Dreamweaver CS5

Prácticas de cierre

Metodología

Cada diapositiva contiene una revisión a temas puntuales referentes a la certificación creación depáginas web con Dreamweaver CS5.

Describe de manera breve la instrucción para el uso de la herramienta e imágenes que lepermitirán visualizar el entorno de trabajo en Dreamweaver CS5.

1. Objetivos de certificación.

2. Definición de los requerimientos.

3. Derechos de autor.

4. Entrevista con el cliente.

5. Principios de diseño.

6. Principios de Accesibilidad.

7. Elegir contenido interactivo.

8. Vistas.

9. Guión gráfico de producción.

10. Elementos a considerar.

11. Espacio de trabajo.

12. Adición de texto a un documento.

13. Formato de párrafo.

14. Panel Insertar.

15. Insertar Imagen.

16. Alineación de una imagen.

17. Edición de imágenes en Dreamweaver.

18. Definición de propiedades de imagen.

19. Herramienta zona interactiva.

20. Inserción de etiquetas div.

21. Cambio de tamaño de etiquetas div.

22. Inserción de la barra de navegación.

23. Propiedades de la página HTML.

24. Título y codificación de página.

25. Configurar Copiar/Pegar.

26. Agregar Hipervínculo.

27. Creación de un vínculo externo.

28. Creación de un vínculo interno.

29. Atributo href.

30. Estado de un botón en Fireworks.

31. Verificar vínculos .

32. Snippets / Uso de fragmentos de código.

33. Panel Archivos.

34. Configuración de un servidor de prueba.

35. Exportación de la configuración del sitio.

36. Ocultación.

37. Algunas etiquetas útiles.

38. Trabajo con el contenido de Head para páginas.

39. Facilidad de uso.

40. Hojas de estilos en cascada (CSS).

41. Creación de una página con un diseño CSS.

42. Fondos de diseño CSS .

43. Plantillas de Dreamweaver.

44. Panel activos.

45. Inserción de archivos FLV.

46. Evaluación y mantenimiento de un sitio.

47. Elementos que pueden leer los lectores de pantalla.

48. Texto alternativo.

49. Navegador de código.

Temas

Objetivos de certificación

1. Definición de los requerimientos del proyecto.

2. Planeación del diseño del sitio y de la maquetación de las páginas.

3. Comprensión de la interfaz de Adobe Dreamweaver CS5.

4. Adición de contenido con Dreamweaver CS5.

5. Organización del contenido con Dreamweaver CS5.

6. Evaluación y mantenimiento de un sitio con Dreamweaver CS5.

Antes de iniciar con el uso de laherramienta se debe tener claro queclase de proyecto se realizará y susalcances.

Antes de iniciar a trabajar en unapágina web se deben determinarobjetivos, contenido y la audiencia a laque irá dirigida el proyecto, para estose deben tomar en cuenta variosaspectos:

• Identificar el público objetivo.

• Identificar las necesidades delcliente.

• Contenido adecuado.

Definición de los requerimientos

El derecho de autor es la protección dela propiedad intelectual.

Las leyes de copyright protegentodas aquellas obras tanto, publicadascomo no publicadas.

La doctrina de uso razonable es partede las leyes del derecho de autor. Éstadice que se pueden usar porcioneslimitadas de material sin permiso porescrito para ciertos fines, comoinformar las noticias o en trabajosescolares.

El propietario o autor del material

puede publicarlo en su sitio, sin

necesidad de un permiso por escrito.

Derechos de autor

Entrevista con el cliente

En la etapa de definición del sitio una parte importante es la entrevista con el cliente donde se obtiene:

• Información necesaria para poder determinar aspectos del diseño de la pagina.

• Identificar al Público Objetivo,

para determinar el contenido

pertinente.

• Necesidades.

• Contenido.

• Accesibilidad.

• Nombre

Temas de la entrevista:

• Metas y audiencia meta

• Identifique algunos objetivos inmediatos de su sitio web.

• Describa las expectativas de contenido de su público meta.

• Describa las características de su público meta.

• ¿Cuál es el rango de edad de su público meta?

• ¿Cuál es el nivel de lectura de su público meta?

• ¿Su público meta tiene requisitos especiales o alguna capacidad diferenciada?

Contenido

• ¿Qué temas debería abarcar su sitio?

• ¿Hay algunos colores, fuentes, gráficos o logotipos que deberían incluirse en el diseño?

• ¿Qué exploradores (y cuáles versiones de estos exploradores) deben ser compatibles con este sitio?

Características de su publico meta Datos para considerar

• Estudiantes de primaria de 8 a 11 años.

• Objetivo: proporcionar materialadecuado que los padres aprueben.

• Al ser menores de edad, se debe obtenerel consentimiento o autorización de lospadres.

• Incluir material, imágenes, y datosadecuados para niños de primaria.

Ejemplo:

De los datos obtenidos en la entrevista, para el caso de una Tienda de libros que quiere un sitio Webque contenga material educativo para sus clientes en el área de ciencias.

Los principios de diseño, son técnicas y teorías que se deben emplear para que sus proyectos gráficos tenganuna apariencia atractiva y profesional.

También ayudan a generar un diseño de pagina que visualmente mantendrá consistencia en todo el sitio.

Principios de diseño

• Contraste: es el uso de la forma ycolor que permite resaltar el pesovisual de uno o más elementos ozonas de una composiciónmediante la oposición o diferenciaapreciable entre estas, teniendocomo resultado atraer la atencióndel espectador hacia loselementos deseados.

• Repetición: es el efecto quepermite resaltar el peso visual deuno o más elementos o zonas deuna composición mediante laoposición o diferencia apreciableentre ellas, permitiéndonos atraerla atención de espectador haciaellos.

• Armonía: Se refiere al acomodo delos elementos y la relación entre síasegurando un sentido de orden ypor lo tanto una mejorapreciación.

• Énfasis: Se usa para denotarimportancia a ciertos elementos,algunos siendo más dominantesque otros, esto para atraer laatención del espectador a ciertasáreas así como la percepción delos objetos dentro de unacomposición.

• Simetría: Se refiere a ladistribución adecuada yequilibrada de formas y espaciosalrededor de una línea (llamadoeje) o de un punto (o centro)común.

• Jerarquía: Se refiere a laimportancia que se le asigna a unelemento dentro de unacomposición mediante el tamaño,posición o color.

Regla de los tercios o triángulo

dorado: Es una forma de composiciónpara ordenar objetos dentro de laimagen. Dividiendo el área de laimagen en nueve secciones mediantedos líneas horizontales equidistantes ydos líneas verticales equidistantes. Serecomienda utilizar los puntos deintersección de estas líneas paradistribuir los objetos de la escena.

Princípios de Accesibilidad

Las directrices y criterios de éxito se organizan alrededor de los cuatro principios siguientes, que sientan lasbases necesarias para que cualquiera pueda acceder y utilizar contenido Web.

• Perceptible: Los componentes de la interfaz deben ser fácilmente inidentificables de manera que puedanpercibir. Esto significa que los usuarios deben ser capaces de reconocer la información que se presenta.

• Operable: Los componentes de la interfaz de usuario y navegación deben ser operables. Esto significa quelos usuarios deben ser capaces de operar la interfaz.

• Comprensible: Los usuarios deben ser capaces de entender, el contenido o la operación no pueden estarmás allá de su comprensión.

• Robusto - El contenido se puede interpretar de forma fiable por una amplia variedad de aplicaciones deusuario. Esto significa que los usuarios deben ser capaces de acceder a los contenidos conforme avanzanlas tecnologías, por ejemplo, los usuarios con discapacidad deben ser capaces de usar la Web con un lectorde pantalla.

Understanding the Four Principles of Accessibility, http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html, Copyright © 2014 W3C® (MIT, ERCIM,

Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.

Elegir contenido interactivo

Al incluir material interactivo en una página se debe considerar los complementos necesarios disponibles ya que de esto dependerá la correcta visualización y funcionamiento del la información contenida.

Vistas

La ventana de documento permitevisualizar documentos en la vistaCódigo, la vista Código dividida, lavista Diseño, las vistas Código yDiseño (vista Dividida) o en la Vista envivo.

Vista código

Esta opción permite a un usuario ver

el diseño y el código a la vez.

También puede optar por visualizar lavista de código dividida o las vistasCódigo y Diseño horizontal overticalmente. (La visualizaciónpredeterminada es la horizontal.)

Vista dividida

Guión gráfico de producción

Un guion grafico sirve para mostrar el contenido detallado de las páginas web, e indicar la colocación de los

elementos en las páginas web, para la aprobación previa del cliente antes del desarrollo, también nos ayuda nos ayuda a definir los parámetros de la información.

Elementos a considerar

Al visualizar un sitio en diferentes equipos o navegadores hay que considerar que algunoselementos pueden cambiar, al obtener una vista previa de las páginas en diferentes navegadoresy plataformas, podrá notar estas diferencias en la apariencia.

Estas diferencias pueden ser de diseño, tamaño de la pagina, color, tamaño de fuentes,

velocidad de descarga y tamaño predeterminado de la ventana del navegador, diferencias queno podrá detectar en una revisión con un navegador de destino.

Espacio de trabajo

A. Barra de la aplicación

B. Barra de herramientas Documento

C. Conmutador de espacios de trabajo

D. Ventana de documento

E. CS Live

F. Grupos de paneles

G. Selector de etiquetas

H. Inspector de propiedades

I. Panel Archivos

Adición de texto a un documento

Puede agregar texto usando el teclado opegando el texto desde otro documento.Puede modificar el texto usando el Inspectorde propiedades.

• Coloque el cursor y dé clic en el punto quedesea insertar el texto, notará el punto deinserción intermitente.

• Escriba algo de texto o pegue el textocopiado en otra aplicación.

Formato de párrafo

Para aplicar formato simple como negritas y cursivas o vincular el texto a otra página web, puede usar las opciones HTML en el Inspector de propiedades.

1. Seleccione el texto al que le cambiará el formato.

2. En el Inspector de propiedades, seleccione Encabezado 1 en el menú Formato.

3. Todo el párrafo se formatea con el estilo de párrafo de Encabezado 1 incrustado.

Panel Insertar

El panel Insertar contiene botones para insertar varios tipos de objetos, como imágenes y formularios, en una página web.

Favoritos:

Panel Insertar > Seleccionar del menú desplegable Favoritos.

Formularios:

Panel Insertar > Formularios

Insertar Imagen

Para insertar una imagen desde el panelinsertar.

Panel Insertar > Desplegar "Imágenes" >Seleccionar Imagen > En el cuadro dediálogo seleccionar la imagen y dar clic enAceptar > Aceptar el resto de las opciones.

Alineación de una imagen

Puede alinear una imagen con el texto,con otra imagen, con un plug-in o conotros elementos de la misma línea.

1. Seleccione la imagen en la vista dediseño.

2. En el inspector de propiedades conel menú emergente Alinear odando clic derecho > Alinear >Izquierda

Puede establecer la alineación conrelación a otros elementos del mismopárrafo o de la misma línea.

Las opciones de alineación son:Predeterminado, Línea de base eInferior, Superior, Medio, Texto superior,Medio absoluta, inferior absoluta,Izquierda, Derecha.

Edición de imágenes en Dreamweaver

La función Brillo/Contraste permite modificar el contraste o el brillo de los píxeles de la imagen. Esto afecta alos resaltados, sombras y medios tonos de la imagen. Normalmente, la función Brillo/Contraste se utiliza paracorregir imágenes que son demasiado oscuras o demasiado claras.

Seleccione Modificar > Imagen > Brillo/Contraste > cambie los valores.

Definición de propiedades de imagen

El inspector de propiedades de imagen permite establecer las propiedades de una imagen.

Opción 1 - Seleccionar Imagen > Menú Modificar > Editar etiqueta > en el campo Nombre: “nombre asignado”

Opción 2 - Menú Ventana > Propiedades para ver el inspector de propiedades para una imagen seleccionada.

En el cuadro de texto situado bajo la imagen en miniatura, introduzca un nombre de modo que pueda hacer referencia a la imagen cuando utilice un comportamiento de Dreamweaver (como Intercambiar imagen) o cuando utilice un lenguaje de creación de scripts como JavaScript o VBScript.

Herramienta zona interactiva

Herramienta de rectángulo de zona interactivaSeleccione la herramienta derectángulo y arrastre el punterosobre la imagen para crear una zonainteractiva

rectangular.

Herramienta circular de zona interactivaSeleccione la herramienta circular yarrastre el puntero sobre la imagenpara crear una zona interactivacircular.

Herramienta poligonal de zona interactiva Seleccione la herramienta poligonaly defina una zona interactiva conforma irregular haciendo clic una vezen cada esquina. Haga clic en laherramienta de flecha para cerrar laforma.

Mapa y Herramientas de zona interactiva Permiten asignar una etiqueta y crear un mapa de imagen en el lado del cliente.

Herramienta de puntero de zona interactiva

Inserción de etiquetas div

Puede utilizar etiquetas div para crear bloques de diseño CSS e insertarlas en el documento. Estoresulta útil si ha adjuntado al documento una hoja de estilos CSS con estilos de posición.Dreamweaver le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos existentes,esto significa codificación más sencilla para los programadores.

Opción 1 - Panel Insertar > Objetos de diseño > Etiqueta Div.

Opción 2 - En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div .

Cambio de tamaño de etiquetas div

Puede cambiar el tamaño de una etiqueta div individual o cambiar simultáneamente el tamaño de múltiples etiquetas div parahacerlas del mismo ancho y altura.

Para cambiar el tamaño de una etiqueta div:

1. Seleccione una etiqueta div haciendo clic en su borde o haciendo clic en el nombre de la etiqueta div en el panel deElementos PA.

Realice una de las siguientes opciones para cambiar el tamaño de una etiqueta div:

• Para cambiar el tamaño por arrastre, debe arrastrar cualquiera de los manejadores de cambio de tamaño de laetiqueta div

• Para cambiar el tamaño un píxel a la vez, mantenga presionado Control mientras presiona la tecla de flecha.

• Las teclas de flecha mueven los bordes derecho e inferior de la etiqueta div; no es posible cambiar el tamañodesde los bordes izquierdo y superior utilizando esta técnica.

2. En el Inspector de propiedades, escriba los valores para ancho (An.) y altura (Al.).

Inserción de la barra de navegación

Para insertar la barra de navegación en un documento de Dreamweaver:

Opción 1 - Ir al panel Insertar > Común > Imágenes > HTML de Fireworks > Examinar > localice yseleccione su archivo HTML

Opción 2 – Menú Insertar > Objetos de imagen > HTML de Fireworks

Para editar, seleccione y luego use el Inspector de propiedades para cambiar las configuraciones.

Propiedades de la página HTML

El cuadro de diálogo Propiedades de la páginasirve para establecer las propiedades de diseñoy formato de la

página, por ejemplo una familia de fuentepredeterminada, el color de la fuente y el colorde fondo.

Menú Modificar > Propiedades de la página >categoría Apariencia (HTML) > seleccionar elelemento para modificar.

Fondo: Define un color de fondo para lapágina. Haga clic en el cuadro de color defondo y seleccione un color en el selector decolor o ingrese un valor especifico.

Texto: Especifica el color predeterminado conel que se presentan las fuentes.

Título y codificación de página

Las opciones Título/Codificación permiten especificar eltipo de codificación del documento específico para elidioma utilizado al crear las páginas Web, así comoespecificar el Formulario de normas Unicode que debeutilizarse con dicho tipo de codificación.

Opción 1 - Menú Modificar > Propiedades de la página >Categoría Título/Codificación y establezca las opciones.

• Título Especifica el título de la página que aparece enla barra de título de la ventana de documento y laventana de la mayoría de los navegadores.

• Tipo de documento (DTD) Especifica la definición deun tipo de documento.

• Codificación Especifica la codificación empleada paralos caracteres del documento. Si selecciona Unicode(UTF-8) como codificación del documento, no seránecesaria la codificación de entidades, ya que lacodificación UTF-8 puede representar todos loscaracteres.

Opción 2 - En la barra de herramientas documentoborrar texto de “Documento sin título" > Escribir eltitulo que se desea.

Configurar Copiar/Pegar

Para añadir texto a un documento deDreamweaver puede escribir textodirectamente en la ventana dedocumento o puede cortar y pegartexto. También puede importar texto

de otros documentos por ejemplo

Word.

Seleccione Edición > Preferencias >Categoría Copiar/Pegar > configurelas opciones > clic en Aceptar

Agregar Hipervínculo

Vínculo: Especifica un hipervínculo para laimagen.

Opción 1 - Arrastre el icono de señalizaciónhasta un archivo del panel.

Opción 2 - Archivos, haga clic en el icono decarpeta para buscar y seleccionar undocumento del sitio o escriba el URL.

Opción 2 - Menú Insertar > Hipervínculo

Creación de un vínculo externo

1. Seleccione la imagen o texto alque desea dar formato de vínculo.

2. En el campo de texto Vínculo enel Inspector de propiedades,escriba o pegue la dirección (URL)del sitio al cual desea vincular.

Recuerde incluir “http://” en ladirección.

Creación de un vínculo interno

Los vínculos internos no necesitan una URL completa;

Opción 1 - Explorando o apuntando hacia sus archivos de destino a través del Inspector de propiedades de texto.

Opción 2 -

1. Seleccione una imagen, una palabra o una frase de texto que desee formatear como vínculo.

2. Haga clic en HTML en el Inspector de propiedades.

3. Junto al campo de texto Vínculo, haga clic en el icono Buscar el archivo (carpeta de archivos) o el ícono señalar archivo.

4. Busque el archivo que desea vincular y haga clic o arrastre hacia él.

5. Haga clic en Aceptar.

Atributo href

<a href=”http://www.ejemplo.com”> vínculo a ejemplo </a>

Este atributo inserta un vínculo a la dirección provista, como se muestra en el ejemplo anterior.

Estado de un botón en Fireworks

Los botones contienen cuatro estados:

• Arriba (botón no tocado)

• Sobre (puntero sobre el botón)

• Abajo (botón siendo presionado)

• Sobre y Abajo (puntero encima mientras el botón está presionado)

Verificar vínculos

Una tarea de prueba técnica clave es la verificación de todos los vínculos en su sitio. Adobe Dreamweaver CS5le permite hacer esto automáticamente usando el Verificador de vínculos.

Asegúrese que su sitio esté abierto.

Menú Sitio > Comprobar vínculos en todo el sitio.

La pestaña del Verificador de vínculos muestra todos los vínculos rotos en el sitio.

4. Corrija los vínculos rotos y verifique los vínculos nuevamente.

Nota: Si los vínculos están indicados como rotos, debe comprobarlos en el explorador para confirmar.

Snippets / Uso de fragmentos de código

Los fragmentos de código permiten almacenar contenido para volverlo a utilizar

posteriormente. Puede crear, insertar, editar o eliminar fragmentos de código HTML,JavaScript, CFML, ASP, PHP, etc. También puede administrar y compartir losfragmentos de código con otros miembros del equipo. Hay disponibles algunosfragmentos predefinidos que puede utilizar como punto de partida.

Panel Archivos

Abrir / Eliminar un archivo.

1. En el Panel Archivos (Ventana >Archivos), seleccione un sitio, unservidor o una unidad en el menúemergente (donde aparece el sitio, elservidor o la unidad actual).

2. Localice y seleccione el archivo quedesea abrir.

3. Siga uno de estos procedimientos:

• Haga doble clic en el icono delarchivo.

• Haga clic con el botón derecho

4. Seleccione Abrir o Edición > Eliminar

Conectar/desconectar (Protocolo FTP,RDS y WebDAV) Conecta y desconectadel sitio remoto. De formapredeterminada.

Panel Archivos > Desplegar el botónEscritorio > Seleccionar el “Nombre delsitio" > Seleccionar la carpeta que sedesea conectar > Clic en el ícono delpanel "Conectar al servidor remoto"

Configuración de un servidor de prueba

Para desarrollar páginas dinámicas, Dreamweaver necesita los servicios de un servidor de prueba para generary mostrar contenido dinámico mientras trabaja. El servidor de prueba puede ser el equipo local, un servidorde desarrollo, un servidor en funcionamiento o un servidor de producción.

Menú Sitio > Administrar sitios > Nuevo > seleccione la categoría Servidores > Añadir nuevo servidor (+) > clicen el botón Avanzadas > seleccione el Modelo de servidor.

Exportación de la configuración del sitio

1. Seleccione Sitio > Administrar sitios.

2. Seleccione uno o varios sitios cuya configuración desee exportar y haga clic en Exportar:

– Para seleccionar más de un sitio, presione Control (Windows) o Comando (Macintosh) mientras hace clic en cada sitio.

– Para seleccionar un rango de sitios, presione Mayús mientras hace clic en el primer sitio y en el último sitio del rango.

3. Si desea crear una copia de seguridad de la configuración del sitio para usted, seleccione la primera opción del cuadro dediálogo Exportando sitio y haga clic en Aceptar. Dreamweaver guarda la información de inicio de sesión en el servidor

remoto, es decir, el nombre de usuario y la contraseña, además de la información de ruta local.

4. Si desea compartir la configuración con otros usuarios, seleccione la segunda opción del cuadro de diálogo Exportando sitio yhaga clic en Aceptar. (Dreamweaver no guarda la información que no funciona con otros usuarios, como la información deinicio de sesión en el servidor remoto y las rutas locales.)

5. Por cada sitio cuya configuración desee exportar, vaya a la ubicación en la que desea guardar los archivos del sitio y haga clicen Guardar. (Dreamweaver guarda la configuración de cada sitio como un archivo XML con extensión de archivo .ste.)

6. Haga clic en Listo.

Nota: Guarde el archivo *.ste en la carpeta raíz del sitio o en el escritorio para que le resulte fácil encontrarlo. Si no recuerda ellugar en que lo situó, realice una búsqueda de archivos con la extensión *.ste en el equipo para encontrarlo.

Ocultación

La ocultación le permite excluir carpetas y archivos concretos de todas las operaciones de sitio.

En el menú Sitio > Nuevo Sitio…> Configuración avanzada > Ocultación

Algunas etiquetas útiles

<html></html> Comprende todas las etiquetas en un documento HTML, que lo define como un documento HTML.

<head></head> Comprende la etiqueta de título y contiene títulos de documento e información de autoría para el documento.

<title></title> Comprende el título para el documento.

<body></body> Comprende todas las etiquetas que conforman el documento.

<em></em> Enfatiza el texto con cursiva.

<h1></h1> Es una etiqueta de encabezado que crea el tamaño de texto más grande.

<p></p> Crea párrafos.

<strong></strong> coloca el texto en negrita.

Listas

<ol></ol> Crea una lista ordenada.

<ul></ul> Crea una lista sin ordenar.

<li></li> Comprende un elemento de lista y debe colocarse adentro de las etiquetas <ol></ol> o de las etiquetas <ul></ul>.

Trabajo con el contenido de Head para páginas

Las páginas contienen elementos que describen la información de la página y que son utilizados por los navegadores de búsqueda. Puede definir las propiedades de elementos head para controlar cómo se identifican las páginas.

• Inserción de un elemento en la sección head de un documento: Seleccione un elemento en el submenú Insertar > HTML > Etiquetas Head.

Facilidad de uso

La facilidad de uso se refiere a la eficacia en la consulta de información de un sitio Web debe contemplarsecuando se planea un sitio web, esto impacta la estructura del sitio, el diseño y el desarrollo de contenidos.

Algunos puntos a considerar son:

• Tiempo de descarga: cuanto tiempo tardan en cargar.

• Eficiencia de uso: la estructura del sitio es evidente.

• Facilidad de navegación: mientras navega se obtiene la información esperada.

• Tipos de elementos de navegación se usan: botones, hipervínculos, imágenes, etc. que facilitan lanavegación.

Hojas de estilos en cascada (CSS)

Las hojas de estilos internas (a veces llamadas hojas de estilos incrustadas) son buenas para mantener laconsistencia dentro de un documento.

Las Hojas de estilos en cascada (CSS) son especialmente útiles para mantener la consistencia a lo largo de variaspáginas diferentes. Al usar una hoja de estilos externa (un documento por separado que contiene informaciónde estilos CSS) puede asegurar que la apariencia del texto sea consistente a lo largo de diversas páginas, alseparar el diseño del contenido de manera mas eficiente.

Los desarrolladores usan CSS para separar el contenido del diseño o presentación de sus sitios, permitiendo alos dispositivos de asistencia acceder a la información provista en el contenido. Los desarrolladores tambiénusan CSS para crear una estructura consistente para el contenido de texto, ayudando a los dispositivos deinterpretación (tales como navegadores texto-a-voz).

Creación de una página con un diseño CSS

1. Seleccione Archivo > Nuevo.

2. En el cuadro de diálogo Nuevo documento, seleccione la categoría Página en blanco (selecciónpredeterminada).

3. En Tipo de página, seleccione el tipo de página que desea crear.

4. En Diseño, seleccione el diseño CSS que desea utilizar. Puede elegir entre 16 diseños distintos. La ventanaVista previa muestra el diseño y ofrece una breve descripción del diseño seleccionado.

Nota: Debe seleccionar un tipo de página HTML para el diseño. Por ejemplo, puede seleccionar HTML,

ColdFusion®, PHP, etc. No pueden crearse páginas ActionScript™, CSS, Library Item, JavaScript, XML, XSLT ni

ColdFusion Component con un diseño CSS. Los tipos de página de la categoría Otro del cuadro de diálogo

Nuevo documento tampoco pueden incluir diseños de página CSS.

Fondos de diseño CSS Muestra los colores de fondo asignadostemporalmente a los distintos bloquesde diseño CSS y oculta los demás coloresde fondo o imágenes que normalmenteaparecen en la página.

Para visualizarlo seleccione Ver > Ayudasvisuales > Fondos de diseño CSSAl activar las ayudas visuales para verbloques de diseño CSS, Dreamweaverasigna automáticamente a cada bloquede diseño CSS un color de fondodiferenciador. (Dreamweaver seleccionalos colores mediante un procesoalgorítmico, es decir, que no puedeasignar los colores que desee.) Loscolores asignados se distinguenvisualmente y están pensados paraayudarle a diferenciar los bloques dediseño CSS.

Plantillas de Dreamweaver

Aspectos básicos de las plantillas de

Dreamweaver

Una plantilla es un tipo especial dedocumento que sirve para crear undiseño de página “fijo”; puede creardocumentos basados en la plantillaque heredan su diseño de página. Aldiseñar una plantilla, usted especifica

como “editables” y limita aquellos

contenidos de un documento basado

en dicha plantilla que los usuarios

pueden editar.

Panel activos

El panel activos, es la herramientaprincipal que debe utilizarse paraorganizar los activos del sitio, incluidoslos contenidos reutilizables conocidoscomo elementos de la biblioteca.

Para insertar una imagen:

Panel activos > arrastrar la imagen alárea de trabajo.

Inserción de archivos FLV

Dreamweaver ofrece las opciones siguientes para mostrar vídeo FLV a los visitantes de su sitio:

• Descarga progresiva de vídeo Descarga el archivo FLV en el disco duro del visitante del sitio y loreproduce. Sin embargo, a diferencia de los métodos tradicionales de entrega de vídeo de tipo “descarga yreproducción”, la descarga progresiva permite iniciar la reproducción del archivo de vídeo antes de quehaya finalizado la descarga.

• Flujo de vídeo Transfiere el contenido de vídeo y lo reproduce en una página Web transcurrido un breveperiodo de búfer que garantice una reproducción fluida.

Evaluación y mantenimiento de un sitio

Algunos de los métodos mas utilizados para recopilar información y comentarios de un sitio web son:

• Informes del sitio.

• Encuesta por correo.

• Vínculo en un correo electrónico solicitando comentarios.

Algunas formas para recabar información y realizar una prueba de uso de sitio son:

• Entrevistas.

• Observaciones.

Elementos que pueden leer los lectores de pantalla

La accesibilidad designa la capacidad de crear sitios y productos Web quepuedan utilizar aquellas personas con discapacidades visuales, auditivas,motoras u otras. Entre los ejemplos de funciones de accesibilidad paraproductos de software y sitios Web podemos citar la compatibilidad conlectores de pantalla, los equivalentes textuales para gráficos, los accesosdirectos del teclado y el uso de colores de pantalla con alto contraste, entreotros.

Un lector de pantalla puede leer los siguientes elementos:

• El texto que aparece en la pantalla.

• Texto alternativo en imágenes.

Texto alternativo

Para usuarios con deficiencias visualesque usan sintetizadores de voz o lectoresde pantalla con navegadores que sóloadmiten texto, el texto se reproduce envoz alta.

Opción 1 - Menú Modificar > editaretiqueta > texto alternativo y escribir eltexto que se desea.

Opción 2 - Panel Propiedades > Alt:tecolote

Navegador de código

El navegador de código muestra una lista de fuentes de código relacionadas con la selección actual de la página, como pueden serreglas CSS internas y externas, server-side includes, archivos JavaScript externos, archivos de plantilla padre, archivos debiblioteca y archivos de origen de iframe.

Al hacer clic en un vínculo en el navegador de código, Dreamweaver abre el archivo que contiene el código correspondiente. Elarchivo aparece en el área de archivos relacionados, en el caso de que esté activado. Si no están activados los archivosrelacionados, Dreamweaver abrirá el archivo seleccionado como documento independiente en la ventana de documento.

Apertura del navegador de código: puede abrir el navegador de código haciendo clic en el indicador de navegador de código .Este indicador aparece cerca del punto de inserción de la página cuando el ratón ha permanecido inactivo durante más de 2segundos.