todo dreamweaver

5/11/2018 todo dreamweaver - slidepdf.com

http://slidepdf.com/reader/full/todo-dreamweaver 1/19

Atajos de teclado en documentosEste artículo explica las teclas de acceso rápido en HTML; porqué parecen una buena idea, yporqué no ayudan tanto como era de esperar. En Fundosa Teleservicios ha sido desde hace muchotiempo causa de confusión, por lo que he decidido investigar a fondo el tema. Y no es fácil

explicar. Si no tienes tiempo para leerlo todo, pudes saltar directamente a mis recomendaciones oconocer una alternativa.

El usuario experto del ordenador conoce un secreto para trabajar con menos esfuerzo: los atajosde teclado. Para copiar un texto no necesita coger el ratón: con un rápido control+C se realiza lamisma operación y en un tiempo mucho menor que el usuario novato. No obstante, pocos sabenque pueden, o podrían hacer lo mismo para navegar dentro de una página web.

Pero no son sólo los usuarios expertos que sacan provecho de su teclado: hay usuarios que noutilizan el ratón (por ejemplo los que usan ordenador portátil que no dominan el "touchpad") ymuchos que no pueden manejar ratón por discapacidad. Los usuarios invidentes no ven el punterodel ratón; tienen que usar el teclado. Y un usuario invidente con lector de pantalla puede trabajarmás rápido que uno vidente con ratón.

Pensando en estos dos grupos de usuarios (sobre todo el segundo), el W3C incorporó en HTML laposibilidad de asignar una tecla de acceso rápido a los elementos de la página. HTML 4.01 lodescribe así:

Este atributo asigna una tecla de acceso a un elemento. Una tecla de acceso es un carácter únicodel conjunto de caracteres del documento...

Al pulsar la tecla de acceso asignada a un elemento, el foco se dirige hacia el elemento. La acciónque tiene lugar cuando el foco se dirige hacia un elemento depende del elemento. Por ejemplo,cuando un usuario activa un vínculo definido por el elemento <a></a>, el agente de usuario

normalmente sigue el vínculo. Cuando un usuario activa un radiobotón, el agente de usuariocambia el valor del radiobotón. Cuando el usuario activa un campo de texto, éste permite laentrada de texto, etc.

El punto 9.5 de las pautas WCAG nos instan a proporciona atajos de teclado:

9.5 Proporcione atajos de teclado para los vínculos más importantes (incluidos los de los mapasde imagen de cliente), los controles de formulario y los grupos de controles de formulario.

Aunque sólo es de prioridad 3. Es decir que si no definimos atajos de teclado, esto no significa queel sitio sea inaccesible. Este punto recomienda asignar teclas para los elementos de formulario. Eneste artículo sólo considero atajos para hipervinculos, aunque los mismos principios son de

aplicación para formularios (y creo que un formulario bien diseñado no necesita atajos deteclado.)

El principio es fácil de comprender: el autor de la páginas asigna una tecla a los distintoselementos de la página, por ejemplo el enlace a la página principal en la barra de navegación, o lacasilla de búsqueda. Entonces para activar el enlace basta con teclear la letra o el númerocorrespondiente. Parece muy bien, pero la realidad es bien distinta.

Primero repasamos los problemas más importantes que tiene esta forma de acceder a la página, yluego las posibles soluciones.

http://www.teleservicios.com/



http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html#tech-keyboard-shortcuts







Si fuera tan sencillo...

Por desgracia, a pesar de su aparente utilidad, pocas páginas definen estos atajos de teclado, yaun menos usuarios saben aprovecharlos. ¿Si la idea es tan buena, por qué no se utilizan más?No comprendemos bien las teclas de acceso rápido, y tienen varios problemas que dificultan suimplementación.

El usuario no sabe si están definidos o no

En primer lugar, pocas páginas definen los atajos de teclado. Cuando sí existen, el usuario no seda cuenta. No existe una manera fácil y bien conocida entre los usuarios, para indicar la existenciade teclas rápidas.

Soluciones: Advertir al usuario de la existencia de teclas rápidas

El usuario no sabe qué teclas hemos asignado

Si superamos el primer problema, y el usuario se da cuenta que existen teclas rápidas para lapágina. ¿Cómo puede saber cúales son? Casi ningun navegador indica la definición de los atajos

de teclado (iCab sí lo hace).

El navegador iCab indica la letra de acceso rápido entre parentesis.(Gracias a Charles McathieNevile por la imagen.)

Cada diseñador asigna las teclas a su manera, por lo que el usuario tiene que aprenderlas denuevo para cada sitio. El usuario no sabe qué elementos tienen una tecla asignada, y no sabe quéteclas el diseñador ha asignado. ¿Qué letras elegimos? Para la página de inicio, por ejemplo: ¿Ipara Inicio? ¿P para Principal? ¿H para Home? No lo olvides, nuestro propósito es facilitar lanavegación, no dificultarla. El usuario se confunda más todavía si asignamos teclas rápidas amuchos enlaces en la página.

Solución: Informar al usuario sobre las teclas definidas

Solución: Sólo asignar teclas a elementos de uso frecuente que ayudarán de verdad

Las teclas causan conflicto con las del navegador

http://www.icab.de/

http://www.icab.de/

http://www.icab.de/

http://www.icab.de/



Peor aún, las teclas del documento tienen prioridad sobre las del navegador. Si la página asigna laletra F, el usuario no puede acceder al menu de favoritos con el teclado (si no sabe un truco conla tecla ALT). Si comparamos los distintos navegadores y sus distintas teclas de menú, nosquedamos con un conjunto muy reducido. Si quitamos las teclas empleadas por los navegadoresOpera, Netscape y IE en ingles, por ejemplo (en un mensaje al grupo WAI-IG) sólo nos quedan 14carácteres disponibles ( {cijklopqrsuxyz 0123456789 `-=[];',./} de los cuales las letras no sonexactamente los más útiles).

el problema no termina ahí: Aunque el diseñador elija bien las teclas para no coincidir con las delos navegadores en su idioma, ¿cómo sabe cuáles son las teclas para navegadores en otrosidiomas? El idioma del interfaz del navegador no es necesario el mismo de la página. El idioma delusuario no será necesariamente el del navegador: puede ser un castellano hablante en un paíscon otro idioma o con un navegador nuevo que sólo existe en inglés, por ejemplo. Si el usuariotrabaja, por ejemplo, con la versión francesa, alemana o rusa del navegador, este tendráreservadas otras teclas.

Yo mismo soy testigo: uso las versiones inglesas de diferentes navegadores, porque el inglés esmi idioma materno, pero leo todos los días páginas en castellano. Suponemos que el diseñador dela página asigna la tecla T a un elemento, y comprueba que en IE/Windows no está asignado a labarra de menú. Muy bien, pero yo, con mi navegador en inglés, no puedo acceder al menú deherramientas (Tools). Es verdad que existe una manera de superar este problema en IE/Windows.¿Pero, cuántos usuarios lo conocen? ¿Lo conoces tú?

Uno de los peores problemas es el conflicto no con los navegadores gráficos, sino con las ayudastécnicas para invidentes, especialmente Homepage Reader de IBM y WindowEyes de GW Micro.Con HomePage Reader la combinación de teclas Alt+L esta reservada para leer en modo sóloenlaces y esta combinación deshabilita la asignación en la página. En España hay pocos usuariosde WindowEyes, pero en otros países sí es muy utilizado. Las pautas de diseño Web del Gobiernode Canadá desaconsejan su uso precisamente por este motivo. Me parece que los atajos deteclado pueden ayudar a los usuarios con discapacidad motriz que trabajan con teclado, a costede algunos usuarios invidentes que utilizan ciertos navegadores de voz.

Soluciones: Elegir teclas que no causen conflicto con las del navegador

El usuario no puede teclear el caracter

Aunque hablamos de teclas de acceso rápido, lo que definimos es un carácter . Tenemos quepensar en cómo el usuario puede teclear el carácter. El teclado del diseñador de la página no esnecesariamente igual al teclado del usuario. La eñe es fácil con el teclado español, pero no para elusuario griego o alemán. ¿Puedes teclear "Œ"?

Bien, tecla rápida, Ñ ¡Vaya! ¿Dónde está la tecla?

Soluciones: Elegir caracteres fáciles de teclear

¿Entonces qué hacer?

http://lists.w3.org/Archives/Public/w3c-wai-ig/2003AprJun/0117.html



http://www-3.ibm.com/able/solution_offerings/hpr.html


http://www.gwmicro.com/products/


http://www.cio-dpi.gc.ca/clf-upe/6/skip_e.asp










Es importante tener en cuenta que para aprovechar los atajos de teclado que hemos definido,primero el usuario tendrá que hacer cierto esfuerzo:

1. Enterarse de que los hemos definido2. Averiguar cuáles son3. Aprender y recordar las teclas4. Conseguir teclear el carácter correspondiente

5. Superar los eventuales conflictos entre página y navegador6. Tenemos que evaluar la frecuencia de uso de cada elemento al cual pensamos asignar unatecla. ¿Cuántas veces el usuario va a accionar ese elemento? ¿Le compensará aprender latecla?

7. Cada uno de estos problemas tiene una solución.8. Advertir al usuario de la existencia de teclas rápidas 9. Problema: El usuario no sabe si están definidos o no10. El navegador no informa al usuario que la página define teclas rápidas. Este es,

curiosamente, el aspecto más problemático.11. Una solución es indicar la tecla junto al enlace o dentro del texto del mismo, o

directamente o mediante CSS. Otra es de proporcionar una página sobre la accesibilidaddel sitio y esperar que el usuario averigue que en esta página se describen las teclas.

12. La mejor solución sería mejorar el diseño de los navegadores para que indiquen las teclas,pero es una propuesta a largo plazo.

13. Recomendación: Crear una página sobre accesibilidad, con la lista de teclas y un enlace enla página principal.

14. Informar al usuario sobre las teclas definidas 15. Problema: El usuario no sabe qué teclas hemos asignado.16. Existen varias soluciones a este problema, ninguna plenamente satisfactoria.17. Solución: Indicar cada tecla en el contenido de la página . Por ejemplo esta página indica el

carácter entre parentesis, mediante CSS. Muchos diseñadores no lo harán de esta manerapor consideraciones de estética. Y con razón: la mayoría de los usuarios no quieren usarlas teclas y no quieren ver esta informacíon. Si esperamos muchos usuarios discapacitados(por ejemplo Discapnet), nos compensa esta solución, sino no es aconsejable.

18. Solución: Proporcionar una lista de las teclas.

19. En una página aparte (o en la página sobre accesibilidad) proporcionar una lista de lasteclas. La lista debe ser fácil de comprender e imprimir (el usuario visual la puede imprimirpara tenerla siempre a mano).

20. Solución: Sólo asignar teclas a elementos de uso frecuente que ayudarán de verdad21. El usuario tiene una memoria finita y en la realidad no aprenderá mas de tres o cuatro.22. Solución: Permitir al usuario conocer y recordar las teclas.23. Como diseñadores tenemos que calcular si compensa o no al usuario hacer el esfuerzo de

averiguar y aprender las teclas rápidas. Muy posiblemente le resultará más cómodo usar latecla tabulador repetidamente. Si es un sitio de uso frecuente, por ejemplo, una entidadbancaria, probablemente sí, se recompensará el esfuerzo. Si es un sitio particular que elusuario probablemente sólo consulta una vez, no le interesa un acceso de teclado que lecostará trabajo aprender, pera sólo utilizar una vez.

24. En el Reino Unido la administración pública edita una guía para los responsables y

diseñadores de los sitios web públicos (Web handbook). Dicen:25. "Cuando un usuario visita el sitio web de su departamento por primera vez, éste aporta su

experiencia aprendida en otros sitios. Es entonces importante que todos los sitios públicosdel Reino Unido adopten un estándar coherente de teclas rápidas. Cualquier desviación deesta norma dificultará la navegación para los usuarios por obligarles a aprender un nuevoconjunto de teclas cada vez."

Si todos los sitios utilizaran las mismas teclas, los usuarios podrían aprender las teclas dememoria. El Web handbook (Reino Unido), en las pautas de diseño sección 2.4.4, define una listapara todos los sitios de los web de la administración.

http://www.discapnet.es/



http://www.e-envoy.gov.uk/Resources/WebHandbookIndex1/fs/en







S - Saltar navegación 1 - Página de incio 2 - Novedades 3 - Mapa del sitio 4 - Búsqueda 5 - Preguntas frecuentes (FAQ) 6 - Ayuda

7 - Reclamaciones 8 - Términos y condiciones 9 - Contactar 0 - Definición de teclas rápidas

La única tecla en la lista que no es numérica es la S. Según mis investigaciones no provocaconflicto con los navegadores comunes en su versión castellana.

¿Si este conjunto de teclas es adecuado para los sitios públicos de un país como el Reino Unido yson independientes del idioma (con excepción de la S, que también vale para "saltar" encastellano) porqué no lo podemos adoptar para los sitios públicos españoles? Insto al Ministerio deAdministraciones Públicas a tomar la inivciativa y imponer este conjunto de teclas en los sitiospúblicos españoles. En la actualidad el sitio del MAP un buen ejemplo de teclas rápidas bienintencionadas pero inservibles (a, b, c, d...).

Recomendación: Adoptar el conjunto de teclas de la lista anterior.

Recomendación: Crear una página sobre accesibilidad, con la lista de teclas y un enlace en lapágina principal.

Elegir teclas que no causen conflicto con las del navegador

Problema: Las teclas causan conflicto con las del navegador

La realidad es que no podemos saber qué teclas utilizarán los navegadores y las ayudas técnicas,y no es una exageración desaconsejar cualquier asignación de teclas para evitar cualquierconflicto.

Debemos evitar carácteres con acentos u otros que requieren una combinación de teclas en elteclado del usuario esperado.

Los navegadores definen teclas rápidas con letras, por lo que el consenso es que sea mejoremplear las teclas numéricas de cero a nueve. Opera no permite el uso de las teclas numéricas,pero la nevegación con Opera en una página bien diseñada es mucho mas fácil (el usuario puedesaltar entre encabezados también), por lo que se puede argumentar que esto no representa unproblema importante.

Recomendación: Sólo asignar teclas numéricas

Elegir caracteres fáciles de teclear

Problema: El usuario no puede teclear el carácter

Como he explicado anteriormente si el carácter es difícil o imposible de teclear para el usuario,hemos fracasado en el intento de mejorar la accesibilidad. Recomiendo sólo asignar teclasnuméricas, que son comunes a todos los teclados. Entonces la recomendación es la misma:

http://www.map.es/

http://www.map.es/

http://www.opera.com/



http://www.map.es/



Recomendación: Sólo asignar teclas numéricas

Recomendaciones

Después de tanta explicación, lo importante es saber como actuar. Los atajos de teclado puedenmejorar la usabilidad y accesibilidad de la página si observamos unas pautas sencillas:

Crear una página sobre accesibilidad, con la lista de teclas y un enlace en la páginaprincipal

Adoptar el conjunto de teclas descrito en este documento.

Si por algun motivo no es posible usar este conjunto de teclas, recomiendo lo siguiente:

Elegir caracteres fáciles de teclear y que no causen conflicto con las del navegador Sólo asignar teclas a elementos de uso frecuente que ayudarán de verdad Sólo asignar teclas numéricas Proporcionar una lista de las teclas o una indicación directamente en cada enlace

Una alternativa

Después de explicar todo esto, tengo que decir que existe otra solución para facilitar lanavegación entre páginas (aunque no dentro de la página) que resuelve los problemas que hedescrito quí. El elemento <link> define la relación entre páginas y deja al navegador la tarea decrear un menu de navegación y un conjunto de teclas de acceso. Espero describir esta técnica enotro artículo futuro.

Crear documentos que se ciñan a las gramáticas formalespublicadas con DreamWeaver

Para incluir la declaración "doctype", Macromedia Dreamweaver 4 no provee de un método,pero podrá descargar gratuitamente desde el sitio de Macromedia la extensión Insert HTML

Doctypes(MX124054_Insert_DTD.mxp) que permite esto (se puede descargar del sitio deextensiones de Macromedia en www.macromedia.com/exchange/ dreamweaver/. Nota: Esnecesario inscribirse gratuitamente primero). Para instalar dicha extensión siga el siguienteprocedimiento:

1. Inicie el Macromedia Extension Manager.

2. Haga clic con el botón primario del ratón sobre el ícono Install New Extension .3. O seleccione el menú File y luego la opción Install Extension... Ctrl+I .4. Desde la ventana Select Extension to Install busque el archivo

MX124054_Insert_DTD.mxp, selecciónelo y haga clic en el botón Install .

5. En la ventana que aparezca haga clic en el botón Accept .6. Aparecerá una ventana indicándonos que la instalación fué satisfactoria:

http://www.macromedia.com/exchange/dreamweaver/





Haga clic en el botón Aceptar.

Una vez instalada la extensión:

1. Haga clic en el menú Insert y luego la opción HTML Doctype .2. Aparecerán las diversas opciones de declaraciones doctype que podrá darle a nuestra

página: HTML 2.0, HTML 3.2 y las diversas opciones de HTML 4.01 (Transitional,Transitional no URI, Strict y Frameset). Haga clic en la opción que desee.

Especificar la expansión de cada abreviatura o acrónimoen DreamWeaver

Para colocar las marcas de citas <ABBR> o <ACRONYM> , Macromedia Dreamweaver 4 no proveede un método (salvo la edición del código HTML), pero podrá descargar gratuitamente desde elsitio de Macromedia la extensión Abbreviation and Acronym (MX518234_abbr_acronym.mxp) que permite esto (se puede descargar del sitio de extensiones de Macromedia enwww.macromedia.com/exchange/ dreamweaver/. Nota: Es necesario inscribirse gratuitamenteprimero). Para instalar dicha extensión siga el siguiente procedimiento:



MX518234_abbr_acronym.mxp, selecciónelo y haga clic en el botón Install .

5. En la ventana que aparezca haga clic en el botón Accept .

Aparecerá una ventana indicándonos que la instalación fué satisfactoria:

Haga clic en el botón Aceptar y reinicie el Macromedia Dreamweaver 4.







1. Seleccione el texto al que va a marcar como abreviación o acrónimo.2. Del menú Text seleccione Style y luego Abbreviation o Acronym.

3. O en la barra de Objetos seleccione la barra Goodies y haga haga clic sobre el

ícono de Insert Abbreviation o Insert Acronym .

Extensiones para Discapacitados en DreamWeaverHabilitar nuestros sitios web para que puedan ser cómodamente visitados por personas que notienen conexiones rápidas, browsers de última generación —e incluso por usuarios con algúnimpedimento físico— es parte del proceso de diseño de un sitio web efectivo.

Todos sabemos que el uso de imágenes bien optimizadas, no olvidarnos de las etiquetas ALT paranuestras imágenes, evitar subir páginas que tengan por título "Untitled Document" e inclusodarnos la lata de poner un TITLE en nuestros enlaces de texto son buenas ideas para facilitarle lavida alprójimo, pero no siempre lo hacemos, sea por olvido o porque la entrega del sitio web esen 20 minutos más y aún faltan 180 páginas por hacer... y empezamos a recortar esquinitas para

llegar a tiempo. No nos veamos la suerte entre gitanos.

Con un poco más de planificación, no es difícil revisar cómo lo estamos haciendo al respecto.Entre las extensiones gratuitas para Dreamweaver, se encuentra 508 Accessibility SuiteExtension... (Suite de extensiones de Accesibilidad 508), que añade un menú llamado Accesibilitya Dreamweaver.

Este menú nos permite mejorar fácilmente la accesibilidad de nuestras páginas web de formaanáloga a efectuar una revisión ortográfica.

El usuario puede seleccionar sobre qué partes de su sitio efectuar la revisión, y qué variables

revisar. Las herramientas instaladoas nos ofrecen un informe de acuerdo a las guías WAI (WebAccessibility Initiative — Iniciativa para la accesibilidad en la Web) y a la sección 508 del acto derehabilitación (leyes estadounidenses), y sugerencias para corregir los problemas de accesibilidadque tengamos. Entre los tests y sugerencias de estas herramientas se cuentan:

Revisión de página para asegurarse que los usuarios daltónicos o con problemas visuales puedanver claramente sus elementos.Evitar animaciones que causen parpadeo de pantalla, ya que este parpadeo puede causar ataquesepilépticos en algunas personas.Definición del idioma en que está la página.Alternativas de sólo audio para elementos multimedia.y por supuesto, un largo etcétera.

Si bien estas herramientas —como toda herramienta—requieren un poco de criterio para usarlascorrectamente, son una excelente ayuda para que aportemos un granito de arena a una web másfuncional, y a incorporar elementos no puramente estéticos a nuestro quehacer de diseño Web.



Proporcionar información sobre las colecciones dedocumentos en DreamWeaver

Puede incluir el elemento link en el encabezado de la página. Para ello, siga el siguienteprocedimiento:

1. Haga clic en el menú Insert, Head Tags y Link .2. Aparecerá la ventana Insert Link:

En el campo Href: escriba el nombre del archivo enlazado (o búsquelo haciendo clic en elbotón Browse...). En el campo Rel: podrá especificar la relación entre el documento y elque aparece en el campo Href: (los posibles valores a utilizar son Alternate, Stylesheet,Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section,Subsection, Appendix, Help, y Bookmark; además se pueden escribir más de una relaciónseparando los valores con espacios). En el campo ID: podrá especificar una identidadúnica para el enlace. En el campo Title: podrá describir la relación (este atributo tieneespecial relevancia para enlazar hojas de estilo). Por último, en el campo Rev: podrá

especificar una relación inversa (opuesta a lo que figure en Rel:) entre el documento y elque figure en el campo Href:.

3. Una vez escrito todo lo que considere necesario, haga clic en el botón OK .

Proporcionar un texto equivalente a través de "longdesc"con DreamWeaver

Para incluir el atributo "longdesc", Dreamweaver 4 no provee de un método, pero podrá descargargratuitamente desde el sitio de Macromedia la extensión Accesible Image Object

(MX223952_AccesibleImage.mxp) que permite esto (se puede descargar del sitio de extensiones

de Macromedia en www.macromedia.com/exchange/ dreamweaver/ . Nota: Es necesarioinscribirse gratuitamente primero). Para instalar dicha extensión siga el siguiente procedimiento:



MX223952_AccesibleImage.mxp, selecciónelo y haga clic en el botón Install .






5. En la ventana que aparezca haga clic en el botón Accept .6. Aparecerá una ventana indicándonos que la instalación fué satisfactoria:

Haga clic en el botón Aceptar.


1. Haga clic con el botón primario del ratón sobre la página que esté construyendo, en ellugar donde desee ubicar la imagen.

2. En la barra de Objetos haga clic sobre el ícono de Insert Image (ahora renombrada como

Insert Accesible Image) .3. O haga clic en el menú Insert y luego seleccione Image Ctrl+Alt+I .4. Aparecerá una ventana donde podrá ver la opción para agregar la ruta de un archivo que

contenga descripción de la imagen

. Podrá hacer clic enla carpeta que figura a la derecha para buscar el archivo.

Anclas en DreamWeaver

Las anclas son marcadores que nos permiten enlazar a una parte concreta de un documentoHTML. Cuando hacemos un enlace normal y corriente el navegador visualiza la página enlazadapero lo hace mostrando el principio de esa página. Si queremos enlazar por ejemplo al punto 5 dela página "documento.html" necesitaremos usar las anclas.

Vamos a ver cómo utilizar las anclas en DreamWeaver. Primero tendremos que abrir enDreamWeaver el archivo que vayamos a enlazar, en este caso, "documento.html".

Vamos al punto del documento que queramos enlazar, situamos el cursor y hacemos Insertar >Anclaje con Nombre, aparecerá una ventana para darle un nombre, lo llamamos "punto5". Allí

dodne hayamos insertado el ancla aparecerá este icono:

Ahora vamos al documento donde queremos poner el enlace, por ejemplo en "indice.html". Allí donde queramos poner el enlace seleccionamos las palabras y en la barra de propiedadesescribimos "documento.html#punto5" (suponiendo que indice.html y documento.html estén en elmismo directorio):



Cuando pulsemos en este enlace iremos directamente a donde se encuentra el ancla "punto5" del"documento.html".

Área de trabajo en DreamWeaver

Pantalla inicial de Dreamweaver

El área de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversosniveles de experiencia. Cuando inicie Dreamweaver, se abrirán los siguientes elementos del áreade trabajo:

La ventana de documento muestra el documento actual mientras lo está creando y editando.



El panel Objetos contiene iconos en los que puede hacer clic para insertar objetos en eldocumento y para cambiar su forma de trabajar en el documento. Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilos HTML y elinspector de código, que le permiten trabajar con otros elementos de Dreamweaver. La barra del lanzador contiene botones para abrir y cerrar los inspectores y los panelesutilizados con mayor frecuencia. El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite

modificar dichas propiedades. (Las propiedades que aparecen en el inspector dependen del objetoo texto seleccionado activamente en el documento.)

Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú Ventana y elija laopción deseada.

Diferentes vistas de Dreamweaver

Vista de Código

Conforme cree y trabaje con los documentos, Dreamweaver generará automáticamente el código

HTML subyacente. Para examinar o editar este código, utilice uno de los editores de código deDreamweaver: la vista de Código de la ventana de documento o el inspector de código.

Vista de Diseño

La vista de Diseño muestra una representación visual del documento tal y como la verá en lapantalla del navegador. Cuando trabaje en la vista de Diseño, podrá optar entre dos vistas pararealizar el diseño: vista de Disposición (puede diseñar una disposición de página e insertargráficos, texto y otros elementos multimedia) o vista Estándar (permite insertar capas, creardocumentos de marcos, crear tablas o utilizar otras funciones no disponibles en la vista de

Disposición y se activa haciendo clic en el icono Vista estándar del panel Objetos).

Vista Combinada

Como se señaló, es una combinación de las dos anteriores.

La ventana de documento

En la vista de Diseño, la ventana de documento muestra el documento actual aproximadamenteigual a como aparecerá en un navegador Web. La barra de título de la ventana de documentomuestra el título de la página y, entre paréntesis, el nombre de la carpeta raíz, el nombre del

archivo y un asterisco si el archivo contiene cambios no guardados.La barra de Estado, situada en la parte inferior de la ventana de documento, proporcionainformación adicional sobre el documento que está creando.



El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto o los objetosseleccionados. Haga clic en una de estas etiquetas para resaltar su contenido en la ventana dedocumento. Haga clic en <body>para seleccionar todo el cuerpo del documento.

Haciendo un clic sobre Tamaño de ventana, se despliega un menú que permite cambiar eltamaño de la ventana de documento para que adopte dimensiones predeterminadas opersonalizadas. A la derecha de este, aparece la estimación del tamaño del documento y del

tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes yotros archivos multimedia.

La barra del lanzador aparece a lo largo de la parte inferior de la ventana de documento. Deforma predeterminada, los botones de la barra del lanzador abren la ventana Sitio, el panelActivos, el panel Estilos HTML, el panel Estilos CSS, el panel Comportamientos, el panel Historial yel inspector de código. Para especificar qué botones deben aparecer en la barra del lanzador (y enel lanzador flotante).

Utilizar la barra del lanzador La barra del lanzador contiene botones que permiten abrir y cerrardiversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante conidénticos botones.

Para mostrar u ocultar el lanzador:

Abra el menú Ventana y elija Lanzador.

Si la barra del lanzador no aparece en la parte inferior de la ventana de documento, activeMostrar Lanzador en barra de estado en las preferencias de Barra de estado.

Para especificar qué botones deben aparecer en la barra del lanzador y en el lanzador:

1. Abra el menú Edición y elija Preferencias. A continuación, seleccione Paneles de la listade categorías.Los elementos seleccionados para mostrar en el lanzador y en la barra del lanzadoraparecerán en el cuadro Mostrar en Lanzador.

2. Para añadir un elemento al lanzador y a la barra del lanzador, haga clic en el botón con elsigno más (+).

3. Para quitar un elemento del lanzador y de la barra del lanzador, resalte el elemento y hagaclic en el botón con el signo menos (-).

4. Para cambiar el orden de los elementos del lanzador o la barra del lanzador, seleccione unelemento en la lista y haga clic en un botón de flecha.

5. Haga clic en Aceptar.

El lanzador y la barra del lanzador cambiarán para mostrar los elementos que haya

especificado.

Utilizar el panel Objetos

El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos, comoimágenes, tablas, capas . Para mostrar u ocultar el panel Objetos, elija Ventana y seleccioneObjetos.



Para insertar un objeto:

Haga clic en el correspondiente botón del panel Objetos o arrastre el icono del botón hastala ventana de documento. Dependiendo del objeto, aparecerá el cuadro de diálogo deinserción de objeto en el que se le pedirá que seleccione o inserte el archivo u objetodeseado.

El panel Objetos contiene siete categorías de forma predeterminada: Caracteres, Común,Formularios, Marcos, Head, Invisibles y Especial. También contiene botones que cambian de vista:Estándar y Disposición.

El panel Caracteres contiene caracteres especiales, como los símbolos de copyright, decomillas curvas y de marca registrada. Tenga en cuenta que estos símbolos no semuestran correctamente en las versiones anteriores a la 3.0 de los navegadores (Netscapee IE).

La categoría Común contiene botones para la creación e inserción de los objetos másutilizados, como imágenes, tablas y capas.

La categoría Formularios contiene botones que permiten crear formularios e insertarelementos de formulario.

La categoría Marcos contiene estructuras comunes de conjuntos de marcos.

La categoría Head contiene botones que permiten añadir diversos elementos de la secciónhead, como etiquetas meta, keywords y base.

La categoría Invisibles contiene botones que permiten crear objetos no visibles en laventana del navegador, como los puntos de fijación con nombre.

La categoría Especial contiene botones que permiten insertar elementos especiales, comoapplets Java, plug-ins y objetos ActiveX.

La sección Ver del panel Objetos permite elegir entre vista Estándar (predeterminada) ode Disposición. Si está seleccionada la vista de Disposición, también podrá seleccionar lasherramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición.

Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y elementoshead , aparecerá un cuadro de diálogo en el que se le solicitará información adicional.Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar



objetos o manteniendo presionada la tecla Control mientras crea el objeto. Cuando seinserta un objeto con esta opción desactivada, el objeto recibe valores de atributopredeterminados. Después de insertar el objeto, utilice el inspector de propiedades paracambiar sus propiedades.

Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos comotexto solamente, iconos solamente o texto e iconos.

Utilizar el inspector de propiedades

El inspector de propiedades permite examinar y editar las propiedades del elemento de páginaseleccionado actualmente. (Un elemento de página es un objeto o texto.) Puede seleccionarelementos de página en la ventana de documento o en el inspector de código.

Para mostrar u ocultar el inspector de propiedades, elija Ventana y luego la opción Propiedades.

La mayoría de los cambios realizados en las propiedades se aplicarán de inmediato en la ventanade documento . (Para algunas propiedades, los cambios no se aplican hasta que se hace clic fuerade los campos de texto de edición de la propiedad, se presiona ENTER o se presiona TAB paracambiar a otra propiedad.)El contenido del inspector de propiedades varía en función del elemento seleccionado. El inspectorde propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizancon mayor frecuencia. Haga clic en la flecha de ampliación, situada en la esquina inferior derechadel inspector de propiedades, para ver más propiedades del elemento.

Trabajar con colores

En Dreamweaver, muchos de los cuadros de diálogo, así como el inspector de propiedades demuchos elementos de página, contienen un cuadro de color que abre un selector de color.Utilice elselector de color para elegir el color de un elemento de la página.

Para elegir un color en Dreamweaver:

1. Elija un cuadro de color en cualquier cuadro de diálogo o en el inspector de propiedades.2. Aparecerá el selector de color.

3. Lleve a cabo una de estas operaciones:



o Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de laspaletas Cubos de colores (predeterminado) y Tono continuo son seguros para laWeb; los de otras paletas no lo son.

o Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla,incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otraaplicación, Dreamweaver recogerá el color donde haya hecho clic, pero es posibleque se active la otra aplicación. En tal caso, haga clic en una ventana de

Dreamweaver para seguir trabajando con este programa, o mantenga presionado elbotón del ratón al moverlo de Dreamweaver al escritorio para evitar cambiar a otraaplicación.)

4. Para ampliar la selección de color, utilice el menú emergente situado en la esquina superiorderecha del selector de color. Puede seleccionar Cubos de colores, Tono continuo, SOWindows, SO Mac, Escala de grises y Ajustar a valores seguros para la Web.

5. Para quitar el color actual sin elegir ningún otro color, haga clic en el botón Tachar.6. Para abrir el selector de color del sistema, haga clic en el botón Rueda de color

Bases y Planificación de un Sitio Web

Pasos en el trabajo de desarrollo Web

El trabajo de desarrollo de una página Web comienza con el proceso de definición de unaestrategia y unos objetivos del sitio, continúa con el diseño (en el que se define el aspecto y elfuncionamiento del sitio) y avanza hasta la fase de producción y desarrollo (durante la cual secrea el sitio); la funcionalidad se comprueba para ver si se cumplen los objetivos establecidos y, alfinal, se publica el sitio.

Planificar sitios

Es un tópico pero no deja de ser verdad: planificar y organizar bien desde el primer momentoayuda a ahorrar tiempo más adelante. La organización del sitio implica mucho más quedeterminar el lugar en el que irá cada archivo: la planificación del sitio implica también investigarlos requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos del sitio. Además,debe tener en cuenta requisitos técnicos tales como el acceso de los usuarios, los navegadores, ...

Una vez que haya organizado la información y que haya determinado una estructura operativa,podrá comenzar a crear el sitio.

Determine qué estrategia va a emplear y cuáles son los aspectos relativos a los usuarios que debetener en cuenta durante la planificación del sitio.

Utilice el "mapa del sitio" de Dreamweaver para establecer la estructura organizativa del

sitio. En la ventana Sitio de Dreamweaver puede añadir, borrar y renombrar los archivos ycarpetas fácilmente para cambiar la organización de la estructura. Consulte Introducción ala administración del sitio y la colaboración

Cuando la creación y el desarrollo de la página se haga entre varias personas:

Establezca sistemas que impidan que personas que puedan acceder a la página que Vd.Está desarrollando sobrescriban archivos; consulte Configurar el sistema dedesprotección/protección.



Utilice Design Notes para comunicarse con otros miembros del equipo de desarrollo Web;

Organizar la estructura del sitio

Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle frustración y tiempomás adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden,puede terminar con una enorme carpeta llena de archivos y difícil de administrar, o con archivos

relacionados repartidos por media docena de carpetas con nombres similares.

La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos losarchivos del sitio (lo que se conoce como sitio local) y crear y editar los documentos dentro dedicha carpeta. Después podrá copiar dichos archivos en un servidor Web cuando esté preparadopara publicar el sitio y permitir al público que lo vea. Este enfoque es mejor que crear y editararchivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio localantes de hacerlos públicos y, cuando haya terminado, cargar los archivos del sitio local yactualizar todo el sitio público de una vez.

Divida el sitio en categorías. Coloque las páginas relacionadas en una misma carpeta. Utilicesubcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la

navegación por el sitio.

Decida dónde desea colocar elementos como imágenes y archivos de sonido. Los diseñadoressitúan a veces todos los elementos que desean utilizar en un sitio y que son ajenos a HTML enuna carpeta llamada Activos.

Diseñar el esquema de navegación

Otra área en la que merece la pena planificar es la navegación. Cuando diseñe su sitio, piense enla experiencia que le gustaría que tuvieran sus visitantes. Las búsquedas y los índices facilitan alos visitantes la localización de la información que están buscando.

Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea en todo elsitio. Si sitúa una barra de navegación a lo largo de la parte superior de la página principal,intente mantenerla en ese lugar en todas las páginas vinculadas.



Cambiar el color de los enlaces con DreamWeaver

Cuando escribimos un enlace, por defecto aparece de color azul y subrayado. Como podemos veraquí:

Para que aparezca de otro color e incluso poder quitarle el subrayado tan sólo tenemos que ir aModificar > Propiedades de página... (Ctrl+J) y a la izquierda, pulsar en "Vínculos". Veremos estaventana:

Aquí podremos cambiar todas las propiedades de los enlaces. La fuente, el tamaño, el color pordefecto (color de vínculo), el color al pasar el ratón por encima (vínculos de sustitución), el colorde un enlace ya visitado (vínculos visitados) y el color de un enlace pulsado (vínculos activos).Además podemos quitarle el subrayado en "Estilo subrayado". Nosotros lo hemos rellenado así:

Y este ha sido el resultado:

Además, al pasar el ratón por encima el enlace se subrayará y se iluminará.

todo dreamweaver

Documents

Transcript of todo dreamweaver