Manual de Dreamweaver CS5. MEDIAactive

de herramientas Documento.

      6 Este modo de visualización divide la ventana del documento en dos partes. (3) A diferencia de versiones anteriores del programa, la división de las áreas de diseño y código se realiza verticalmente, siendo la parte izquierda la reservada al código y la derecha, al diseño. Haga doble clic sobre la palabra Imagen en la ventana de diseño. (4)

      Debe saber que toda acción realizada de modo visual tiene su reflejo en la programación de la aplicación.

      En la ventana de código, compruebe como, efectivamente, la palabra Imagen, actualmente resaltada de color gris, se encuentra entre el código strong.

      7 En la parte inferior de la ventana del documento se sitúa la Barra de estado, que proporciona información adicional sobre el archivo que está siendo editado. La parte inicial de la mencionada barra queda reservada al Selector de etiquetas, que muestra la jerarquía de etiquetas que rodea a la selección actual. En el caso del texto Imagen, el cual se encuentra seleccionado, muestra la etiqueta strong, debido al estilo aplicado, el estilo negrita. Este texto se encuentra en el interior de una tabla. Haga clic en la etiqueta <table> de la Barra de estado. (5)

      8 La pulsación sobre la etiqueta en la Barra de estado implica la selección del elemento definido por ésta en la vista Diseño, en este caso la tabla, y el correspondiente fragmento de programación en la vista Código. Pulse el botón Código de la barra de herramientas Documento. (6)

      9 Así la etiqueta table contiene toda la programación correspondiente a los elementos incluidos en la tabla. Y a su vez la tabla pertenece al cuerpo de la página. Haga clic en la etiqueta body de la Barra de estado.

      10 Una página Web se compone de dos secciones diferenciadas. La primera se denomina head (cabecera) y contiene las instrucciones genéricas que definen el documento y posibilitan su posterior visualización en Internet. La segunda se denomina body y contiene el cuerpo de la página, es decir, el código necesario para representar los diferentes elementos que la componen. La selección de la etiqueta body comporta por tanto la de todos los elementos contenidos en la página. Cambie a la vista Diseño pulsando este botón de la barra Documento.

      11 La Barra de estado se completa con la zona informativa. Ésta ocupa el extremo derecho de la barra y presenta el campo Tamaño de descarga/Tiempo de descarga, situada junto al porcentaje de zoom, que sólo aparece en la vista Diseño, que muestra una estimación del tamaño del documento y del tiempo de descarga de la página. Este campo permite cambiar el tamaño de la ventana del documento para que adopte dimensiones predeterminadas o personalizadas. Despliegue este campo para ver su contenido. (7)

      La selección de la etiqueta body comporta la selección de todo el contenido de la página en la vista Diseño.

      12 Los tamaños de ventana predefinidos, establecidos en píxeles, tienen en cuenta la visualización final del documento. Las páginas Web una vez publicadas son reproducidas mediante un navegador de Internet. La ventana del navegador presenta un determinado tamaño en función de la resolución de pantalla (píxeles por pulgada) seleccionada. Dreamweaver propone tamaños de ventana indicando las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Pero los tamaños preestablecidos tan sólo podrán ser aplicados si trabajamos con la disposición de ventanas clásica, siendo imposible aplicarlos si los documentos quedan dispuestos en forma de fichas. Seleccione con un clic la única opción activa del menú, Editar tamaños.

      13 Se abre así el cuadro de preferencias del programa mostrando la categoría Barra de estado. (8) En ella podemos variar alguno de los tamaños preestablecidos, a fin de personalizarlos, o crear un tamaño nuevo propio. Los diferentes tamaños predefinidos quedan listados en el cuadro Tamaños de ventana, que presenta tres columnas. El primer tamaño permanece incompleto, quedando establecido únicamente el valor correspondiente a la anchura. El valor de la columna Ancho determina la cantidad de píxeles, puntos de información de color, que presentará horizontalmente la ventana del documento. Haga clic sobre el valor 592, en la primera posición de la columna Ancho, para seleccionarlo, introduzca el número 300 y pulse la tecla Retorno.

      14 El valor Alto, por tanto, determina la cantidad de píxeles verticales de la ventana. Haga clic en el espacio en blanco de la columna Alto, inserte la cifra 100 y pulse la tecla Retorno.

      15 El valor incluido en el campo Descripción también aparece en el campo Tamaño de descarga/Tiempo de descarga, facilitando la selección de la opción adecuada. Haga clic en el espacio en blanco de la columna Descripción para situar el cursor de edición en este punto, escriba la palabra publicidad y pulse la tecla Retorno. (9)

      16 La categoría Barra de estado se completa con el campo Velocidad de conexión. Para calcular este dato, el programa realiza una estimación de la velocidad de transmisión de datos. Pero el tiempo de descarga real dependerá de las condiciones generales de Internet y principalmente de la velocidad de conexión del usuario. El programa permite seleccionar una de las velocidades de conexión predeterminadas. La velocidad de descarga de las páginas es primordial, ya que los usuarios no acostumbran a tener paciencia. Resulta en todo caso aconsejable utilizar un valor de descarga bajo, en previsión de usuarios que no dispongan de buenas conexiones a Internet, de modo que la descarga de nuestras páginas no sea lenta ni en estos casos. Mientras que los tamaños de ventana preestablecidos sólo pueden ser aplicados en la disposición clásica de ventanas, la información del tiempo de descarga de la Barra de estado resulta de gran ayuda para valorar la relación calidad/tamaño de nuestros documentos durante su edición. Haga clic en Aceptar para abandonar el cuadro de diálogo Preferencias.

      17 Para terminar la presente práctica, haga clic en una zona libre de la página para eliminar la selección actual del contenido. (10)

      Si no se encuentra ningún elemento de la página seleccionado, tampoco ninguna etiqueta del Selector de etiquetas se encuentra activada.

Lección 7. Elementos básicos de una página web

      La vista Diseño sólo muestra por defecto el contenido del cuerpo de la página. Pero Dreamweaver permite editar la cabecera de la página también de forma visual. Para ello, debe mostrarse el denominado contenido head. Cada una de las etiquetas de esta sección puede ser modificada mediante el Inspector de propiedades, el panel de Dreamweaver sensible al contexto. Este panel de la aplicación muestra las propiedades del elemento seleccionado y permite modificarlas. De este modo, el usuario puede definir fácilmente las propiedades del documento, como el título, las etiquetas meta o los estilos de color empleados en el mismo. El panel de propiedades también se emplea para modificar los elementos contenidos en el cuerpo