DISEÑO DE PÁGINAS WEB - josevicente.com · Diseño de páginas web con Dreamweaver MX José...

DISEÑO DE PÁGINAS WEB

Con Dreamweaver MX

Por José Vicente Manga

Diseño de páginas web con Dreamweaver MX

José Vicente Manga – Octubre 2005 2

ÍNDICE 1. INTRODUCCIÓN

a. ¿Qué es HTML? .............................................................................................................................3 b. Enlaces y tipos de enlaces ............................................................................................................3 c. Qué es Dreamweaver ....................................................................................................................4 d. Ajustando las preferencias de Dreamweaver............................................................................4 e. Interfaz y Paneles ...........................................................................................................................6 f. Definiendo un sitio ........................................................................................................................7 g. Creando un mapa del sitio ............................................................................................................9

2. DOCUMENTOS a. Definiendo las propiedades de un documento..........................................................................9 b. Insertando elementos en la cabecera del documento.............................................................10 c. Insertando texto............................................................................................................................11 d. Insertando caracteres especiales................................................................................................11 e. Creando un estilo HTML............................................................................................................12 f. Corrigiendo ortográficamente un documento.........................................................................12 g. Salvando el documento...............................................................................................................13

3. AÑADIENDO LOS ENLACES a. Enlaces y Targets.........................................................................................................................13 b. Añadir un enlace en un texto .....................................................................................................13 c. Enlaces dentro del documento...................................................................................................14 d. Enlaces a una dirección de correo.............................................................................................14 e. Target en otras ventanas .............................................................................................................14

4. AÑADIENDO IMÁGENES a. Formatos gráficos ........................................................................................................................15 b. Insertando una imagen ................................................................................................................15 c. Ajustando propiedades de imagen ............................................................................................15 d. Alineando imágenes ....................................................................................................................16 e. Añadir un enlace en una imagen ...............................................................................................17 f. Insertar Rollover básico..............................................................................................................17 g. Creando y modificando mapas de imagen...............................................................................18 h. Creando barras de navegación...................................................................................................19

5. TABLAS Y MARCOS a. ¿Qué es una tabla?.......................................................................................................................20 b. Definiendo una tabla ...................................................................................................................20 c. Modificando una tabla ................................................................................................................20 d. Ordenando una tabla....................................................................................................................21 e. Insertando datos desde un fichero de datos delimitado.........................................................21 f. Utilizando una tabla para diseñar..............................................................................................22 g. ¿Qué es una página con marcos (frameset)? ...........................................................................23 h. Definir una página con marcos..................................................................................................23 i. Modificando una página con marcos........................................................................................24 j. Utilizar marcos para diseñar......................................................................................................24

6. FORMULARIOS a. ¿Qué es un formulario?...............................................................................................................25 b. Creando formularios con Dreamweaver..................................................................................25 c. Los campos de texto....................................................................................................................26 d. Los campos ocultos .....................................................................................................................27 e. Área de texto.................................................................................................................................27 f. Las casillas de verificación ........................................................................................................27 g. Los botones de opción.................................................................................................................27 h. Grupo de opciones.......................................................................................................................27 i. Los menús y las listas..................................................................................................................28 j. Los menús de salto......................................................................................................................28 k. El campo de imagen ....................................................................................................................29 l. El campo de archivo....................................................................................................................29 m. Los botones ...................................................................................................................................29 n. Las etiquetas .................................................................................................................................30 o. El juego de campos......................................................................................................................30

7. EJERCICIOS PROPUESTOS ...................................................................................................................31



INTRODUCCIÓN a. ¿Qué es HTML?

HTML son las siglas de las palabras Hiper Text Markup Language o Lenguaje de Marcas Hipertextuales, que es como se conoce al lenguaje en el que se escriben, básicamente, las páginas web.

Este lenguaje informático utiliza etiquetas de texto encerradas entre los signos < y >, como por ejemplo <html>. La mayoría de ellas necesita una etiqueta de apertura y otra de cierre entre las que se coloca el texto al que deseamos que afecten. La etiqueta de apertura tiene el aspecto mostrado anteriormente, mientras que la de cierre incorpora una barra delante del nombre de la etiqueta: </html>.

Todo documento web se estructura en dos partes: la cabecera y el cuerpo. Pero debe comenzarse con la etiqueta <html> y finalizarse con la etiqueta </html>.

El espacio de la cabecera se delimita con las etiquetas <head> y </head>, mientras que el espacio para el cuerpo queda acotado por <body> y </body>.

Cualquiera de las etiquetas HTML puede escribirse en minúsculas o mayúsculas indistintamente.

Los datos de la cabecera de un documento web contienen, entre otros, el tipo de documento de que se trata, el juego de caracteres utilizado, el título de la página, las etiquetas <META> que permiten que los buscadores puedan localizar la página web, y los scripts en lenguaje Javascript o similares.

El contenido de un documento web que se muestra en el navegador de Internet es el que encuentra en el espacio reservado al cuerpo del documento.

A continuación puede verse esta estructura de forma básica: <html>

<head> <title>Página personal</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="keywords" content="león,educación,secundaria"> <meta http-equiv="keywords" content="león,educación,secundaria">

</head> <body>

Este texto se muestra en el área de contenido de la ventana del navegador </body>

</html>

b. Enlaces y tipos de enlaces Los enlaces hipertextuales son zonas sensibles del contenido de un documento web, de

modo que haciendo clic sobre ellas nos dirigen a nuevos documentos web, a otro lugar del mismo documento, a un archivo para su descarga o reproducción, o a enviar un mensaje de correo electrónico.

Para crear un enlace basta con escribir las etiquetas <a> y </a> encerrando entre ellas el texto o la referencia al archivo de imagen que deseamos usar como elemento sensible al puntero del ratón, aunque debemos, además, especificar algún otro parámetro dentro de la etiqueta <a>.

Para crear una enlace a otro documento web: <a href=”dirección web del nuevo documento”>Elemento sensible</a>

Para crear un enlace a un archivo: <a href=”ruta y nombre completo del archivo”>Elemento sensible</a>

Para crear un enlace para enviar un mensaje de correo electrónico: <a href=”malito:dirección de correo electrónico”>Elemento sensible</a>



Para crear un enlace a otro lugar del mismo documento: <a href=”#marca”>Elemento sensible</a>, donde marca debe sustituirse por el

nombre de la marca que hayamos definido en el lugar del documento al que deseamos dirigirnos. Esa marca se define con la etiqueta <a name=”marca”>Elemento marcado</a>, donde marca es el nombre elegido como referencia para saltar a ese lugar desde el enlace hipertextual.

c. ¿Qué es Dreamweaver?

Dreamweaver es, probablemente, el mejor software para la creación y edición de sitios web, ya que nos permite crear todo el sitio web sincronizando todos los archivos que utilicemos, introduciendo el contenido de los documentos web mediante la escritura directa del código html, creando el contenido de forma visual, o combinando las dos modalidades anteriores. Además, realiza la modificación de los enlaces y referencias a archivos del sitio de forma automática en todos los archivos afectados cuando cambiamos algún dato en uno de ellos, permite trabajar de forma fácil con bases de datos, con hojas de estilo en cascada, y es capaz de generar el código de los documentos web para que funcione en la mayoría de los navegadores web.

d. Ajustando las preferencias de Dreamweaver

En Dreamweaver MX se puede personalizar prácticamente todo. Solamente en sus preferencias existen 20 categorías, y dentro de cada una podemos encontrar hasta 14 parámetros configurables, en algunas de ellas.

Para personalizar las preferencias, en el menú Edición elegimos Preferencias y accedemos a las siguientes categorías:



General: donde podemos ajustar algunas opciones de documento y de edición. Accesibilidad: aquí podemos ajustar algunos parámetros para mejorar la visualización

del espacio de trabajo, como utilizar fuentes grandes, etc. Barra de estado: permite ajustar los tamaños de ventana del explorador disponibles y

seleccionar la velocidad de conexión a Internet. Capas: aquí ajustamos los valores por defecto utilizados al crear capas, así como la

inclusión o no en los documentos que creemos con capas, del código necesario para reparar un error de visualización de capas con el navegador de Netscape.

Colores de código: donde podremos asignar un color diferente para cada tipo de elemento que compone el código HTML, con el fin de facilitar su análisis y la localización de una porción de código determinada.

Elementos invisibles: permite elegir qué códigos ocultos del documento se mostrarán en la vista de diseño.

Estilos CSS: podemos elegir si se usará la forma completa o abreviada de los estilos en las hojas de estilo en cascada.

Formato de código: nos permite establecer sangrías y otros parámetros con el fin de que el listado del código HTML aparezca visualmente organizado.

Fuentes: aquí configuramos el juego de caracteres, los tipos de fuente y los tamaños por defecto para el documento y para la interfaz del programa.

Nuevo documento: fundamentalmente, podemos seleccionar el lenguaje utilizado, por defecto, en los nuevos documentos que creemos y elegir la codificación del país del juego de caracteres que utilizaremos.

Paneles: elegiremos qué paneles se superpondrán a la ventana del documento (siempre visible) y los iconos de los paneles que estarán disponibles en la barra del lanzador.

Quick Tag Editor: ajustamos si los cambios realizados en el Quick Tag Editor se actualizan inmediatamente en el documento y si deseamos sugerencias de etiquetas o no.

Reescritura de código: elegimos el comportamiento de Dreamweaver ante algunos casos de código mal escrito, como etiquetas sin finalizar o la escritura de símbolos en el texto utilizando la codificación para la web, de manera que corrija automáticamente los errores que encuentre.

Resaltando: permite elegir los colores que deseemos para identificar rápidamente determinadas regiones y elementos en el documento.

Sitio: ajustamos aquí algunos parámetros relacionados con la transferencia de archivos desde y hacia el servidor de Internet.

Sugerencias para el código: aquí podemos activar o no la terminación automática de etiquetas, o bien las sugerencias para el código, y los menús que se mostrarán en las sugerencias que aparecen mientras se escribe el código.

Tipos de archivo/editores: permite asociar los tipos de archivo de imagen, sonido, etc. con un editor adecuado a cada uno, que será el utilizado cuando sea necesario editarles desde Dreamweaver, entre otras opciones.

Validador: elegimos aquí las especificaciones de los lenguajes web para los que deseamos que Dreamweaver compruebe la validez del código de nuestro documento.

Vista de disposición: nos ofrece la posibilidad de elegir los colores con que se representarán las partes de una tabla en la vista de disposición, así como ajustar el uso de espaciadores para fijar el ancho de columnas.

Vista en navegador: nos permite configurar los navegadores disponibles para realizar una vista previa del documento y si esa vista se realizará sobre una copia temporal del documento o directamente sobre el documento.



e. Interfaz y Paneles La interfaz, como se puede apreciar más adelante, dispone de múltiples paneles,

organizados en grupos, que pueden mostrarse a voluntad en el área correspondiente y, si se desea, plegar o desplegar para un acceso más cómodo a los paneles de uso más frecuente. También es posible ocultar a voluntad el área de paneles con el fin de disponer de un área mayor para visualizar la ventana de documento.

El grupo de paneles Insertar está situado fuera del área de paneles, bajo la barra de menús, debido a la gran cantidad de paneles que contiene. Desde él podemos insertar en nuestro documento web prácticamente cualquier objeto.

Bajo el grupo de paneles Insertar se encuentra la barra de herramientas de documento, que incorpora los botones de visualización en modo vista de diseño, vista de código o ambos, el título del documento, y otros botones que permiten administrar archivos o visualizar el documento en un navegador.

En la parte inferior de la ventana de documento encontramos el inspector de etiquetas, una pequeña barra que muestra la etiqueta o etiquetas que dan formato al texto u objeto sobre el que se encuentra el cursor en el documento y que permite seleccionar todo ese texto u objeto haciendo clic sobre la etiqueta correspondiente.

Grupo de paneles Insertar Barra de herramientas de documento Paneles

Ventana de documento

Inspector de etiquetas

Barra de estado

Barra del lanzador Inspector de propiedades



A su lado está la barra de estado que muestra el tamaño de la ventana de documento y el tiempo de descarga para la velocidad de conexión elegida. También podemos elegir un tamaño para la ventana de documento ajustado a unas dimensiones determinadas, en función de la resolución para la que lo hemos diseñado, siempre que esa ventana no esté maximizada.

Justo a su derecha aparece la barra del lanzador, que dispone de los botones que hayamos configurado en las preferencias de Dreamweaver y que permiten mostrar rápidamente los paneles a los que hace referencia cada uno de esos botones.

Por último, en la parte inferior de la pantalla se halla el inspector de propiedades, a través del que podremos configurar completamente cada objeto incluido en nuestro documento web. Este panel es sensible al contexto en que se encuentre el cursor. Todos los grupos de paneles se despliegan o se pliegan al hacer clic sobre su nombre en la barra de título, y disponen de un pequeño icono a la derecha de esa misma barra que despliega un menú contextual al panel activo en ese momento dentro del grupo. Desde este menú podemos modificar el nombre del grupo de paneles y acceder a algunas funciones relacionadas con el panel activo. Todos los grupos de paneles pueden convertirse en ventanas independientes, que no podrán situarse fuera de la ventana de Dreamweaver, arrastrando el icono situado a la izquierda del nombre, en la barra de título, al lugar donde queramos que aparezca la ventana correspondiente. Del mismo modo, si arrastramos una ventana independiente de un grupo de paneles, hacia el área de paneles, cambiará de forma de ventana a la forma de grupo de paneles general. Dentro de cada grupo de paneles, situando el puntero del ratón sobre la solapa de un panel y pulsando el botón izquierdo, accedemos a un menú contextual que nos permite colocar ese panel en otro grupo de paneles existentes o en un grupo nuevo, con la opción Agrupar ... con, así como cambiar su nombre, entre otros. Algunos paneles disponen de una pequeña barra de herramientas en la parte inferior.

f. Definiendo un sitio Lo primero es la organización. No debemos precipitarnos al crear un sitio web.

Diseñemos primero sobre un papel el mapa del sitio que deseamos y creemos la estructura de carpetas que permitirán organizar todos los archivos del sitio adecuadamente. Esta estructura deberá ser igual a la que se alojará posteriormente en el servidor de Internet definitivo.

Para crear la estructura de carpetas es recomendable utilizar el explorador de Windows, aunque puede crearse desde el administrador de sitios de Dreamweaver.

Un ejemplo de esta organización en carpetas se muestra a continuación: Los documentos web (.htm) que vayamos creando se

alojarán en la carpeta principal (Mi web) y los demás elementos (sonidos, imágenes, scripts,...) estarán contenidos en carpetas específicas para cada tipo de elemento. También es recomendable que los elementos gráficos utilizados en las barras de navegación o menús de la página web no estén alojados en la misma carpeta que las imágenes que vayan a mostrarse como parte del contenido. Archivos en formato de Word (.doc), de Acrobat (.pdf), etc. podrían alojarse en una carpeta de documentos.

Una vez creada la estructura de carpetas en algún lugar del disco duro, desde el menú Sitio de Dreamweaver elegimos Nuevo sitio y nos encontraremos ante una ventana de definición del sitio con dos pestañas: Básica y Avanzada.

La pestaña Básica nos guía paso a paso a través de la definición del sitio, configurando los datos principales. Es bastante sencillo seguir sus instrucciones y configurar las opciones según nuestras necesidades, por lo que no se detallará aquí.



La pestaña Avanzada nos muestra una ventana similar a la del ajuste de Preferencias en la que encontramos varias categorías de ajustes. Veamos ésta.

Categoría Datos locales:

Nombre del sitio: permite introducir un alias para identificar el proyecto que comenzamos, ya que dreamweaver puede gestionar múltiples proyectos. Este nombre no tiene nada que ver con el nombre de la carpeta que hayamos definido para contener los archivos de nuestro sitio web, aunque puede ser el mismo.

Carpeta raíz local: ruta completa hacia la carpeta que contendrá los archivos de nuestro sitio web.

Actualizar lista de archivos locales automáticamente: hará que Dreamweaver actualice automáticamente el mapa del sitio cada vez que se incorpore o elimine algún archivo a la estructura del sitio.

Dirección HTTP: URL final de la página, para que puedan comprobarse los enlaces absolutos que se programen.

Caché: Su activación acelera la actualización remota de archivos. Categoría Datos remotos:

Acceso: si queremos que la vista previa en el navegador se haga desde archivos temporales en nuestro ordenador, seleccionaremos Ninguno; si por el contrario deseamos sincronizar archivos sobre un servidor local, seleccionamos Local/Red; y si lo que queremos es trabajar directamente sobre un servidor remoto, seleccionamos FTP. Si elegimos alguna de las dos últimas opciones debemos configurar algunos parámetros adicionales relacionados con la configuración del servidor elegido. Categoría Servidor de prueba: permite indicar a Dreamweaver si se va a utilizar un

servidor de prueba para procesar las páginas dinámicas. Dreamweaver es compatible con muchos lenguajes de servidor por lo que habrá que indicarle el tipo de servidor de prueba que utilizaremos. A continuación se muestra la configuración en caso de utilizar IIS (Internet Information Server, el servidor de Internet que incorpora Windows XP Profesional).

Modelo de servidor: Podremos elegir entre ASP VBScript y ASP Javascript que son los lenguajes que entiende IIS.

Acceso: Local/Red. Carpeta del servidor de prueba: C:\Inetpub\wwwroot\ Prefijo de URL: escribimos http:// y a continuación el nombre que deseemos

utilizar para acceder a la página web desde el navegador. Por defecto es http://localhost. Categoría Ocultación: permite ocultar carpetas y archivos con una determinada

extensión, lo que permite incluirlos o excluirlos de las operaciones convencionales que realiza la herramienta Sitio.

Categoría Design Notes: Activada permite añadir Post-It virtuales que indican el

estado de diseño en que se encuentran los archivos o carpetas. Útil cuando se está desarrollando un sitio web en equipo. Esta opción crea ficheros exclusivos dentro de las carpetas con el nombre “_notes”.

Categoría Mapa de disposición de sitio: Categoría fundamental, pues no hay

organización del sitio si no se marca el archivo que será la página principal.



Página principal: normalmente la llamaremos index.htm ya que prácticamente todos los servidores de Internet reconocen ese nombre como página principal por defecto.

Número de columnas: especifica el número máximo de páginas que podrán visualizarse en cada fila del mapa del sitio.

Ancho de columna: especifica la anchura, en píxeles, de cada columna del mapa del sitio.

También es posible configurar aquí si se mostrarán los archivos ocultos y dependientes y si se mostrarán los nombres de archivo o los títulos de página. Categoría Columnas vista archivo: permite configurar que información será mostrada

de cada archivo en las listas Carpeta local y Sitio remoto.

g. Creando un mapa del sitio Una vez hayamos creado los documentos web necesarios, podemos crear el mapa del

sitio desde la ventana Sitio, haciendo clic en el botón , eligiendo Mapa del sitio en el menú Ver o pulsando Alt+F8.

El mapa del sitio nos permite añadir nuevos archivos y también añadir, modificar o quitar vínculos rápidamente. Además nos muestra la organización del sitio de forma gráfica a través de iconos vinculados. Algunas de las operaciones que podemos realizar son:

Cambiar el nombre de un archivo: haciendo clic sobre el nombre y, cuando se pueda editar, escribiendo el nuevo.

Crear un hipervínculo: arrastrando el icono con forma de diana, que aparece al seleccionar un documento, hasta el archivo de la lista de archivos del sitio al que deseamos vincularle.

Guardar el mapa del sitio como una imagen: seleccionando Guardar mapa del sitio en el menú Archivo de la ventana Sitio, y eligiendo el formato de archivo (.bmp o .png). Posteriormente podemos incorporar esa imagen en un documento web y crear un mapa de imagen que vincule cada icono que aparece en el gráfico con el documento web correspondiente, lo que permitirá un acceso rápido a cualquier parte de nuestro sitio web.

2. DOCUMENTOS

a. Definiendo las propiedades de un documento (Propiedades de página). Título: texto que se muestra en la barra de título del navegador de Internet. Imagen de fondo: ruta al archivo de imagen que se cargará como fondo del

documento. Con el botón Examinar podemos recorrer las carpetas de nuestro ordenador para seleccionar el archivo adecuado. Una vez seleccionado, si el archivo no se encuentra dentro de la estructura de carpetas de nuestro sitio web, nos preguntará si queremos que se copie dentro de ella y respondiendo Sí podremos seleccionar la carpeta donde deseamos copiarlo. La ruta al archivo será relativa a la nueva ubicación.

Fondo: introducimos el valor hexadecimal del color de fondo o lo seleccionamos. Texto: Idem para el texto que aparezca en el documento. Vínculos: Idem para los textos utilizados como hipervínculos. Vínculos visitados: Idem para los textos utilizados como hipervínculos cuyo destino ya haya sido visitado. Vínculos activos: Idem para los textos utilizados como hipervínculos a cuyo destino se esté accediendo en ese momento.



Margen izquierdo y margen superior: especifican los valores para los márgenes de la página en Internet Explorer. Si no se desean márgenes, debe especificarse 0. Ancho de margen y alto de margen: Igual a los anteriores, pero estos son reconocidos por Netscape Navigator. Se recomienda que se especifiquen los cuatro valores para obtener buenos resultados con la mayoría de los navegadores. Codificación del doc.: para España debe utilizarse la codificación Occidental. Imagen de rastreo: ruta al archivo utilizado como guía para copiar un diseño realizado con un programa externo. Esta imagen solo aparece en Dreamweaver y no se visualiza en el navegador de Internet. Trasparencia de imagen: permite hacer más o menos transparente la imagen de rastreo, con el fin de identificar fácilmente los elementos del diseño que se desea copiar. Durante la utilización de la imagen de rastreo los colores de la página no son los reales, aunque pueden visualizarse correctamente en el navegador de Internet.

b. Insertando elementos en la cabecera del documento Además del título del documento y la codificación utilizada para el juego de

caracteres, podemos incluir en la cabecera de un documento web otros elementos interesantes: Etiquetas meta: utilizadas por la mayoría de robots de los buscadores de

Internet para localizar e indexar las páginas. Las principales son Keywords y Description.

Información para actualización automática: que provoca en el navegador la apertura de una página tras un periodo de tiempo especificado, a partir de que haya bajado la página actual.

Ubicación y destino base: que permiten especificar, por una parte, la dirección completa para los enlaces relativos del documento y, por otra, definir la ventana de destino de los vínculos del documento por defecto.



Vinculación de archivos externos: para establecer la relación existente entre el documento web y otros archivos que contienen algún tipo de código necesario para visualizar correctamente la información, por ejemplo, hojas de estilos, archivos de scripts, etc. Podemos incorporar estos elementos a través del menú Insertar, seleccionando

Etiquetas Head y eligiendo el tipo de etiqueta deseado, o desde el panel Head del grupo de paneles Insertar. Las etiquetas meta Keywords y Description son accesibles directamente seleccionando Palabras clave o Descripción respectivamente.

La opción Actualizar nos permite definir la dirección de la página que se visualizará transcurrido un tiempo, y el tiempo que debe transcurrir en segundos.

Con la opción Base podemos definir la ubicación de la carpeta del servidor de Internet en la que se alojará nuestra página web. También podemos introducir la ventana o marco de destino, por defecto, para los hipervínculos del documento. Cuando utilizamos esta opción se deben configurar ambos parámetros, pues Dreamweaver escribe el código de ambos aunque solo configuremos uno de ellos, lo que puede provocar errores en el funcionamiento de nuestra web. En caso de configurar uno solo, es preciso acceder después a la vista de código y eliminar manualmente el código que no interese.

Vínculo nos permite relacionar el documento web con archivos de hojas de estilo, de scripts, etc. para lo que debemos especificar la ruta hacia el archivo relacionado, un identificador (ID) único para el vínculo, un Título que describe la relación, y el tipo de relación entre el documento y el archivo vinculado (Rel) o a la inversa (Rev). Para indicar el tipo de relación están disponibles los siguientes: Alternar, Hoja de estilos, Iniciar, Siguiente, Prev, Contenido, Índice, Glosario, Copyright, Capítulo, Sección, Subsección, Apéndice, Ayuda y Marcador.

c. Insertando texto

La manera más fácil de introducir texto es escribirlo directamente en la vista de diseño, asignándole las propiedades adecuadas (tipo de letra, tamaño, color, alineación,...) desde el inspector de propiedades o desde el panel Texto en el grupo de paneles Insertar. La asignación de estas propiedades se realiza de igual forma que en un procesador de texto, por lo que no se explicará con más detalle.

Si deseamos introducir un salto de párrafo basta con pulsar Intro, pero si se trata de un salto de línea será Mayúsculas+Intro. Desde el panel Caracteres del grupo de paneles Insertar y desde la opción Caracteres especiales del menú Insertar, también está disponible el salto de línea.

d. Insertando caracteres especiales El lenguaje HTML utiliza un juego de caracteres básico en el que no se incluyen letras

acentuadas, la ñ y otros caracteres que forman parte de las propias etiquetas HTML como < y >.



Para poder introducir esos caracteres de forma que puedan interpretarse como texto y visualizarse correctamente, es necesario codificarles. Esta codificación ya está definida y siempre comienza con el símbolo & y termina con ; de manera que para introducir una a acentuada se escribiría á o para introducir la ñ ñ.

Dreamweaver codifica de forma automática según vamos escribiendo, las letras acentuadas y los caracteres que pueden insertarse directamente desde el teclado.

Para insertar otros caracteres especiales disponemos del panel Caracteres dentro del grupo de paneles Insertar, y la opción Caracteres especiales en el menú Insertar.

e. Creando un estilo HTML Existen varias maneras de aplicar un estilo al

texto: las hojas de estilo en cascada (CSS), los estilos HTML o aplicando, de forma independiente, un tipo de letra determinado, un color, un tamaño,...

Nos ocuparemos aquí de los estilos HTML. Para crear un estilo HTML nos dirigimos al panel Estilos HTML dentro del grupo de paneles Diseño, y allí hacemos clic en el icono Nuevo estilo, en la barra de la parte inferior, junto a la papelera.

Ahora damos un nombre al estilo, para identificarle en la lista de estilos, y ajustamos los atributos del texto que deseemos, pudiendo seleccionar si esos atributos se aplicarán al texto seleccionado o a todo el párrafo en el que se encuentre el cursor. También es posible elegir si el estilo se añadirá a otros estilos que pudiera tener asignados el texto o, por el contrario, les sustituirá.

Posteriormente, bastará con seleccionar el texto al que aplicar el estilo y hacer clic sobre el nombre del estilo que nos interese en la lista del panel Estilos HTML para aplicar el estilo que hayamos creado.

Este panel dispone, por defecto, de dos opciones que permiten eliminar los estilos que hubieran sido aplicados al texto seleccionado o a todo el párrafo en el que se encuentre el cursor, tanto si se han aplicado desde el mismo panel o de forma independiente desde el inspector de propiedades o desde alguna de las opciones del menú Texto.

f. Corrigiendo ortográficamente un documento

Una vez que hemos creado el documento web y con el fin de evitar que haya errores ortográficos o tipográficos, podemos hacer que Dreamweaver analice ortográficamente el texto antes de salvarlo.



En el menú Texto, o pulsando Mayúsculas+F7, pondremos en marcha el corrector ortográfico, que funciona de forma similar a cualquier corrector ortográfico de un procesador de textos. Cuando encuentra una palabra no incluida en el diccionario muestra una lista de posibles palabras correctas y nos da la opción de cambiar la palabra mal escrita por la seleccionada en la lista de sugerencias, hacer el cambio en todo en documento, omitir esa palabra de la revisión ortográfica, omitirla en todas sus apariciones en el documento y, por último, añadirla al diccionario en caso de estar escrita correctamente.

g. Salvando el documento

Cuando estamos trabajando sobre un documento sin marcos, basta con seleccionar una de las opciones Guardar o Guardar como en el menú Archivo, cumplimentar el nombre del archivo, si fuera necesario, y aceptar.

Si trabajamos en un documento con marcos, debemos guardar, por un lado, la página que contiene la definición de los marcos, seleccionándola en el panel Marcos haciendo clic en el marco exterior y eligiendo Guardar conjunto de marcos como en el menú Archivo. Después seleccionamos cada marco haciendo clic sobre su área en la ventana de diseño o en el panel Marcos y elegimos Guardar marco como en el menú Archivo.

Una forma rápida de guardar todos los documentos abiertos, tengan marcos o no, consisten en elegir la opción Guardar todo en el menú Archivo.

3. AÑADIENDO LOS ENLACES a. Enlaces y Targets

Un enlace es un texto o una imagen que se ha definido como zona sensible y relacionada con un documento web, un archivo o una marca dentro del propio documento, de forma que cuando hacemos clic sobre él, haga que se visualice o se descargue el archivo enlazado. También puede definirse un enlace a un lugar determinado, dentro del mismo documento o en un documento web diferente al que contiene el enlace.

El target es la ventana o marco de destino para el enlace, es decir, la ventana o marco de destino donde se visualizará el documento o archivo al que apunta el enlace.

Cuando un enlace apunta a un archivo de imagen, un documento web o un archivo que ha sido creado con un programa que tengamos instalado en nuestro ordenador (.doc, por ejemplo), éste será abierto y visualizado dentro del navegador de Internet. En caso contrario, el navegador solicita que el usuario seleccione si desea abrir el archivo o guardarlo. En caso de guardarlo, debe indicarse dónde será almacenado.

b. Añadir un enlace en un texto

Primero seleccionamos el texto que servirá de enlace (hipervínculo) y, desde el Inspector de propiedades, arrastramos el botón con forma de punto de mira sobre el archivo al que deseamos enlazar en la lista de archivos del panel Sitio. También podemos examinar las unidades de disco para seleccionar un archivo a enlazar, haciendo clic sobre el botón con forma de carpeta , o bien escribir la dirección de Internet completa en el campo Vínculo del Inspector de propiedades.

También podemos situar el cursor en el lugar donde deseemos crear un enlace de texto y hacer clic en el botón Hipervínculo del panel Común en el grupo de paneles Insertar y cumplimentar los datos en el cuadro de diálogo que aparece.



La creación de enlaces en imágenes se trata en el apartado 4. Añadiendo imágenes. c. Enlaces dentro del documento

Antes de poder crear un enlace a un lugar dentro de un documento es necesario crear un punto de fijación con nombre (marca), que servirá de referencia para saltar a él desde el enlace.

Para crear un punto de fijación con nombre ponemos el cursor en el lugar deseado y elegimos en el menú Insertar, la opción Punto de fijación con nombre , o en el panel Común del grupo de paneles Insertar, el botón y escribimos el nombre para el punto de fijación en el cuadro de diálogo que aparece.

En el lugar donde hayamos definido el punto de fijación aparecerá el icono que señala su posición.

Si tenemos abierto el documento web en el que se encuentra el punto de fijación con nombre al que deseamos saltar desde el enlace, una vez seleccionado el texto que servirá de hipervínculo, arrastraremos el botón sobre la marca del punto de fijación en el documento de destino.

Fijándonos en el campo Vínculo del Inspector de propiedades vemos que el texto del enlace tiene la forma #ancla si está referido al propio documento, o bien documento.htm#ancla si está referido a un lugar determinado en un documento web distinto al que contiene el enlace. Documento y ancla serían, respectivamente, el nombre del documento web que contiene el punto de fijación y el nombre del punto de fijación.

Por supuesto, también podemos escribir el nombre del documento web, el carácter # y el nombre del punto de fijación en el campo Vínculo del Inspector de propiedades.

d. Enlaces a una dirección de correo

Situamos el cursor en el lugar donde deseamos incluir el enlace y hacemos clic en el botón con forma de sobre, en el panel Común del grupo de paneles Insertar, y escribimos el texto que servirá de enlace y la dirección de correo electrónico en el cuadro de diálogo que aparece.

Si deseamos que un texto ya escrito, o una imagen, sea utilizado como hipervínculo a una dirección de correo electrónico, seleccionamos el texto o la imagen y, en el campo Vínculo del Inspector de propiedades escribimos mailto:direcciondecorreo, donde direcciondecorreo será la dirección de correo electrónico completa con la que deseamos enlazar.

Este enlace abre el programa cliente de correo electrónico que se encuentre instalado en el ordenador (normalmente Outlook Express) preparado para redactar un mensaje, con el campo “Para” cumplimentado con la dirección de correo electrónico del hipervínculo.

e. Target en otras ventanas

Por defecto, el elemento vinculado desde un enlace se visualiza en la ventana desde la que se activa el enlace, pero si deseamos que no sea así podemos definir un target.

Para hacer que el elemento vinculado desde un enlace se visualice en una ventana o marco diferente podemos actuar de dos formas: definiendo un target base para todos los enlaces que no tengan un target particular definido, o definiendo individualmente el target para cada enlace.

Para definir un target base, seleccionamos Base en la opción Etiquetas Meta del menú Insertar, o bien hacemos clic en el botón Base del panel Head en el grupo de paneles Insertar. En el campo Destino del cuadro de diálogo que aparece seleccionamos la opción que nos interese:

_blank: carga el documento vinculado en una nueva ventana del navegador.



_parent: carga el documento vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, ello equivale a _top; el documento vinculado se cargará en la ventana completa del navegador.

_self: carga el documento vinculado en el mismo marco o la misma ventana que el vínculo. Este destino es el predeterminado, por lo que normalmente no es preciso especificarlo.

_top: carga el documento vinculado en la ventana completa del navegador, eliminando de esta forma todos los marcos.

Si, por el contrario, deseamos definir un target para un hipervínculo en particular, al crear el enlace, o bien situando el cursor sobre él si ya está creado, elegiremos la opción deseada, de entre las anteriores, en el campo Destino del Inspector de propiedades.

Si estamos trabajando con marcos y tenemos abierto el documento en el que están definidos, el campo Destino permitirá la selección de cualquiera de los marcos definidos como target, además de las opciones referidas anteriormente.

4. AÑADIENDO IMÁGENES a. Formatos gráficos

Los formatos de imagen adecuados para la web son jpg, gif y png, pues comprimen la imagen para reducir al máximo el tamaño del archivo que la contiene. Los formatos jpg y gif realizan una compresión de la imagen en la que existe pérdida de información, mientras que el png es capaz de comprimir adecuadamente una imagen sin pérdidas.

El formato jpg es el adecuado cuando se trabaja con imágenes que presentan una gran variedad de colores, por ejemplo las fotografías, sin que la pérdida de información sea apreciable.

El formato gif es adecuado cuando una imagen tiene pocos colores, o zonas grandes del mismo color, pues solo gestiona 256 colores. Con ese tipo de imágenes es el que mejor rendimiento ofrece. Existe una versión de este formato que permite crear archivos con varias imágenes que se muestran secuencialmente, conocidos como gifs animados.

El formato png es el equivalente de Microsoft al jpg, con la ventaja de que no tiene pérdida de información en la compresión.

b. Insertando una imagen

Situamos el cursor en el lugar en que deseamos insertar la imagen, hacemos clic en el

botón Imagen del panel Común en el grupo de paneles Insertar, o elegimos la opción Imagen en el menú Insertar, y seleccionamos el archivo de imagen a través de la ventana que aparece. En esta misma ventana podemos definir si la dirección hacia la imagen será relativa al documento que va a contenerla o, por el contrario, absoluta (relativa a la raíz del sitio). A continuación nos pregunta si deseamos copiar el archivo de imagen a una ubicación dentro de la estructura de nuestro sitio web y debemos responder que si, eligiendo seguidamente la carpeta en la que se almacenará.

Si disponemos de la imagen en el panel Activos, basta con arrastrarla hasta el lugar del documento en el que deseemos insertarla.



c. Ajustando propiedades de imagen Antes de insertar una imagen debemos haberla preparado para la web, es decir, que

debe encontrarse dentro de un archivo comprimido y no debe tener un tamaño superior al que hayamos decidido que se visualice en nuestro documento web. Por otro lado, si el tamaño de la imagen es bastante grande, es muy conveniente trocearla en varios archivos, que serán organizados dentro de una tabla para visualizar correctamente la imagen completa, lo que hará que el tiempo de descarga sea menor.

El acondicionamiento de las imágenes para la web debe realizarse con un programa de edición de imágenes, como Photoshop o Fireworks.

Para ajustar las propiedades de una imagen basta con seleccionarla y dirigirnos al Inspector de propiedades, donde podremos realizar los ajustes pertinentes:

El campo de texto situado al lado de la miniatura de la imagen es para el nombre identificativo de la imagen para que pueda ser usada con los comportamientos de Dreamweaver o en scripts en lenguaje Javascript o Vbscript. An y Al contienen la anchura y la altura, en píxeles, con que se visualizará la imagen. Estas dimensiones son independientes de las reales de la imagen. Origen contiene la ruta hacia el archivo de imagen. Alt permite introducir un texto que se mostrará durante la carga de la imagen y, posteriormente, al situar el puntero del ratón sobre ella en el navegador. Editar lanza el programa de edición de imágenes que hayamos definido en las preferencias o, en su lugar, el que esté asignado en el registro de Windows para el formato de la imagen que tengamos seleccionada. Restab. tamaño hace que los valores de An y Al sean los de la imagen original. Espacio V y Espacio H contienen el número de píxeles de espaciado vertical y horizontal respectivamente, que habrá en torno a la imagen. Borde permite definir el grosor del borde que aparecerá en torno a la imagen. Orig. especifica la imagen que se cargará antes de la imagen definitiva. Algunos diseñadores web utilizan imágenes de dos bits (en blanco y negro) para mostrar durante el tiempo que dura la carga de la imagen a color. Estos archivos de imagen de dos bits ocupan muy poco espacio, por lo que se descargan rápidamente.

d. Alineando imágenes En el Inspector de propiedades disponemos de tres botones de alineación para la

imagen seleccionada: izquierda, centrado y derecha, y un campo de selección que nos permite ajustar la alineación, además de cómo lo hacen los botones anteriores, mediante nuevas opciones:

Predeterminado suele especificar una alineación con la línea de base. (El valor predeterminado puede variar en función del navegador del visitante del sitio.)

Línea de base e Inferior alinean la línea de base del texto (u otro elemento del mismo párrafo) con la parte inferior del objeto seleccionado.

Superior alinea la parte superior de una imagen con la parte superior del elemento más alto (imagen o texto) de la línea actual.



Medio alinea la parte central de la imagen con la línea de base de la línea actual. Texto superior alinea la parte superior de la imagen con la parte superior del carácter

más alto de la línea de texto. Medio absoluta alinea la parte central de la imagen con la parte central del texto de la

línea actual. Inferior absoluta alinea la parte inferior de la imagen con la parte inferior de la línea

de texto (incluidos los trazos descendentes, como en el caso de la letra g). Izquierda sitúa la imagen seleccionada en el margen izquierdo, ajustando a la derecha

el texto que la rodea. Si hay texto alineado a la izquierda delante del objeto, los objetos alineados a la izquierda suelen pasar a una nueva línea.

Derecha sitúa la imagen en el margen derecho, ajustando a la izquierda el texto que la rodea. Si hay texto alineado a la derecha delante del objeto, los objetos alineados a la derecha suelen pasar a una nueva línea.

e. Añadir un enlace en una imagen

Para añadir un enlace en una imagen, seleccionamos la imagen que deseamos usar como hipervínculo y procedemos de igual forma a como se haría con un texto (apartado 3.b. Añadir un enlace en un texto y 3.c. Enlaces dentro del documento).

f. Insertar Rollover básico

Un rollover es un botón de imagen, que funciona como hipervínculo, de forma que situando el puntero del ratón sobre él, la imagen mostrada en el botón cambia para dar la sensación de que es una zona interactiva, y al hacer clic sobre él descarga el archivo vinculado.

Dreamweaver nos permite crear un rollover, de forma sencilla, a través de la opción Imagen de sustitución que encontraremos en el menú Insertar y en el panel Común del

grupo de paneles Insertar .

En el cuadro de diálogo que aparece podemos dejar el nombre de la imagen por defecto (que no tiene que ver con el nombre del archivo de imagen, sino que sirve para identificar la imagen en el código del script que controla el funcionamiento del rollover) o, por el contrario darle otro diferente (solo se admiten letras y números formando una sola palabra). A continuación indicamos el archivo de imagen que se mostrará al cargar la página (Imagen original) y el archivo de imagen que sustituirá a la primera al pasar el puntero del ratón sobre ella (Imagen de sustitución). Podemos definir también un texto que se mostrará



mientras el puntero del ratón esté sobre la imagen en la ventana del navegador y una URL a la que quedará vinculada la imagen. Es conveniente, para un mejor funcionamiento, marcar la casilla que permite cargar previamente la imagen de sustitución.

Una vez creado el rollover, si fuera necesario editarlo para cambiar la imagen de sustitución, debemos seleccionar la imagen original en el área de diseño y acudir al panel Comportamientos, hacer doble clic sobre el comportamiento Intercambiar imagen e indicar allí el nuevo archivo de imagen de sustitución. También podemos activar o desactivar desde aquí la carga previa de la imagen de sustitución y la restauración de la imagen original cuando el puntero del ratón no esté sobre el rollover.

Para modificar el resto

de las propiedades del rollover (imagen original, dirección del vínculo, alineación, etc.), tras seleccionar la imagen original en el área de diseño debemos dirigirnos al Inspector de propiedades.

g. Creando y modificando mapas de imagen

Un mapa de imagen es una porción de una imagen que se utiliza como hipervínculo. Dreamweaver dispone de herramientas para la creación y edición de mapas de imagen de forma sencilla.

Para crear un mapa de imagen basta con seleccionar la imagen y, en el Inspector de propiedades, introducir un nombre identificativo para el mapa (único para cada imagen convertida en mapa), elegir la herramienta (rectangular, oval o poligonal) haciendo clic en el botón correspondiente y dibujar sobre la imagen el área interactiva deseada.

Una vez dibujada, en el Inspector de propiedades podemos introducir la dirección del vínculo, el target (Destino) y un texto (Alt) que se mostrará cuando el puntero del ratón se detenga sobre la zona interactiva en la ventana del navegador. Los modos en que pueden introducirse estos datos se ha descrito ya anteriormente en el apartado 3. Añadiendo los enlaces.

Sobre una misma imagen pueden crearse múltiples zonas interactivas. Para ello, tras dibujar una de ellas, podemos dibujar otras seguidamente con la misma herramienta de dibujo o con otra diferente. Después debemos hacer clic sobre el botón Puntero de zona interactiva



para liberar la herramienta de dibujo que hemos utilizado y, seleccionando cada zona creada, introducimos los datos que correspondan desde el Inspector de propiedades.

Para editar una zona interactiva creada con anterioridad, basta con seleccionarla y modificar sus datos en el Inspector de propiedades o, desplazando los cuadraditos que enmarcan la zona, modificar su forma o su tamaño.

También puede modificarse la posición de las zonas interactivas haciendo clic dentro de ellas y arrastrándolas a la nueva posición.

h. Creando barras de navegación Una barra de navegación se compone de un conjunto de imágenes cuya visualización

cambia según las acciones que realice el usuario. Las barras de navegación proporcionan a menudo una forma fácil de desplazarse por las páginas y los archivos de un sitio.

Antes de usar el comando Insertar barra de navegación, debemos crear el conjunto de imágenes para los estados de visualización de cada elemento de navegación, mediante un programa de edición de imágenes (por ejemplo Photoshop o Fireworks).

Un elemento de la barra de navegación puede tener cuatro estados: Arriba: la imagen que aparece cuando el usuario aún no ha interactuado con el

elemento. Sobre: la imagen que aparece cuando el puntero pasa sobre la imagen mientras está

Arriba. La apariencia del elemento cambia (por ejemplo, puede ponerse más clara) para que los usuarios sepan que pueden interactuar con él.

Abajo: la imagen que aparece después de hacer clic en el elemento. Por ejemplo, cuando un usuario hace clic en un elemento, se carga una página nueva y la barra de navegación sigue mostrándose, pero el elemento se oscurece para indicar que está seleccionado.

Sobre mientras abajo: la imagen que aparece cuando el puntero pasa sobre la imagen mientras está Abajo después de hacer clic en el elemento.

En realidad, con los tres primeros estados tenemos suficiente, ya que el estado Abajo puede ser sinónimo de pulsado y de inactivo.

La forma más rápida de insertar una barra de navegación es desde el botón Barra de navegación del panel Común en el grupo de paneles Insertar.

El cuadro de diálogo que aparece permite configurar, para cada elemento de la barra de navegación, las imágenes a mostrar en los estados arriba, abajo, sobre y sobre mientras abajo. También es posible introducir un texto alternativo que será mostrado al situar el puntero del ratón sobre el elemento en cuestión en la ventana del navegador, la URL a la que apunta y el target para el documento vinculado. Además podemos elegir la carga previa de las imágenes usadas para ese elemento y si debe mostrarse en el estado abajo por defecto.

Solo la primera vez que accedemos al cuadro de diálogo de edición de la barra de navegación, nos permite elegir la disposición de los elementos de la barra, vertical u horizontalmente, y si deseamos que la barra sea creada dentro de una estructura de tabla o no.

Una vez creada la barra de navegación podemos editarla situando el cursor sobre uno de sus elementos y eligiendo Barra de navegación en el menú Modificar. También podemos copiarla a otro documento web seleccionando todos sus elementos, eligiendo Copiar en el menú contextual que aparece al hacer clic con el botón derecho del ratón y, posteriormente, pegándola en otro documento eligiendo Pegar en el menú contextual referido anteriormente.



Del mismo modo podemos elegir Cortar en el citado menú contextual o pulsar directamente la tecla Supr tras haber seleccionado todos los elementos de la barra de navegación para eliminarla del documento.

Tanto al copiar como al eliminar una barra de navegación, Dreamweaver copia o elimina también el código del script necesario para el control de su funcionamiento.

5. TABLAS Y MARCOS a. ¿Qué es una tabla?

Una tabla en HTML es un espacio organizado en filas y columnas que pueden tener un tamaño fijo (relativamente) o variable en función del contenido y del tamaño de la ventana en la que se visualice. La etiqueta <table> define la tabla, <tr> define las filas y <td> las columnas.

Las tablas tienen atributos que permiten mostrar o no el borde de las divisiones, hacerle más o menos grueso, elegir su color o el aspecto del fondo de toda la tabla o de algunas de sus celdas, etc.

b. Definiendo una tabla

Desde Dreamweaver la definición de tablas es tarea sencilla. Podemos hacerlo de varias formas, aunque la más aconsejable es utilizando la Vista de disposición en el panel Disposición del grupo de paneles Insertar.

En estas condiciones, eligiendo el botón Dibujar tabla de disposición, podemos crear una tabla a nuestra medida, haciendo clic y arrastrando en el área de diseño para delimitar el espacio que ocupará nuestra tabla.

Después, pulsando sobre el botón Dibujar celda de disposición, podemos dibujar, del mismo modo que en el caso anterior, las celdas que deseemos dentro del área de la tabla. Dreamweaver crea de forma automática las celdas adyacentes a la que nosotros dibujamos, de forma que mantenga la posición y el tamaño con que se dibujó.

c. Modificando una tabla

Una vez dibujada la tabla, o una celda cualquiera dentro de ella, es posible modificar su tamaño arrastrando los cuadraditos que aparecen sobre el punto medio de sus lados o en sus vértices. También es posible modificar su tamaño, alineación o propiedades del fondo a través del Inspector de propiedades, bien desde la Vista estándar o bien desde la Vista de disposición.

Como si de un procesador de textos se tratara, podemos combinar varias celdas para que se muestren como una sola, o bien dividir una celda para convertirla en varias filas o columnas. Estas operaciones podemos hacerlas desde la Vista estándar, a través del Inspector de propiedades, seleccionando la celda o celdas adecuadas y haciendo clic en el botón correspondiente .

También es posible insertar imágenes de espaciador, que son archivos de imagen de un píxel a los que se asigna la anchura adecuada mediante la etiqueta <img>, que se colocan como contenido de las celdas y sirven para adecuar las celdas vacías a un tamaño determinado, de forma que no puedan variar de tamaño en función del tamaño de la ventana



en la que se visualice la tabla. Dreamweaver crea las imágenes de espaciador de forma automática, aunque podemos indicarle que utilice una que hayamos creado nosotros.

Estando en la Vista de disposición aparece, en la parte superior de cada celda, una casilla que muestra la anchura de cada columna en píxeles (si tiene ancho fijo) o una línea quebrada (si la columna es autoampliable). A su vez, esta indicación es un botón desplegable que permite definir un ancho fijo o autoampliable para cada columna, igualar el ancho de todas las columnas, eliminar la altura de las filas, etc.

También podemos modificar todos estos y otros parámetros, tanto para la tabla, como para las celdas, desde el Inspector de propiedades, una vez seleccionada la tabla o la celda correspondiente.

Una forma rápida de modificar el aspecto de una tabla consiste en ajustar su formato a través de la opción Formatear tabla del menú Comandos, para lo que debemos estar en la Vista estándar.

d. Ordenando una tabla Desde Dreamweaver podemos hacer que las filas de una tabla se ordenen en función

de los datos contenidos en una o en dos columnas. Para ello, basta con situar el cursor en una celda de la tabla y elegir la opción Ordenar tabla del menú Comandos.

De este modo podemos elegir, mediante el cuadro de diálogo que se muestra más abajo, la o las columnas por las que se ordenará la tabla y el tipo de ordenación que se llevará a cabo.

e. Insertando datos desde un fichero de datos delimitado

Si disponemos de una colección de datos provenientes de otro programa, organizados en filas y columnas, y queremos incluirlos en nuestra web, podemos crear, desde el programa con el que gestionamos esos datos, un archivo de texto en el que aparezcan delimitados por un carácter, por ejemplo las comillas.

A partir de ese archivo y gracias a la opción Importar datos de tabla, que encontramos bajo el elemento Objetos de tabla del menú Insertar, Dreamweaver creará una tabla a la medida de los datos y les introducirá en ella manteniendo la estructura original.



Desde el cuadro de diálogo Importar datos de tabla podemos elegir el archivo de texto que contiene los datos, el carácter usado como delimitador, aunque Dreamweaver intenta detectarlo por defecto, hacer que el ancho de las columnas de la nueva tabla se ajuste a los datos que deban contener o, por el contrario, lo introduzcamos nosotros de forma porcentual o en píxeles, establecer el espacio entre el borde de la celda y los datos que contiene (relleno de celda), y el espacio entre celdas, elegir si deseamos que los datos de la primera fila se muestren en negrilla, cursiva o con ambos atributos y, por último, establecer la anchura del borde de las celdas.

f. Utilizando una tabla para diseñar

Una buena forma de organizar los elementos que contiene un documento web consiste en introducirles en celdas de una tabla en la que habremos definido una anchura del borde igual a cero, para que no se muestre en el navegador.

De este modo, utilizamos la tabla como plantilla y, si la definimos correctamente y la utilizamos en todos los documentos web de nuestro sitio, hará que la visualización de nuestra página web tenga coherencia, pues mantendrá siempre la misma estructura.

Ya hemos visto cómo crear y editar una tabla, por lo que, a continuación sólo me referiré a la forma de utilizarla como platilla. Partiendo de un documento nuevo vacío, creamos la tabla con la estructura que deseamos para nuestra web, y definimos sus atributos de color o imagen de fondo y otros que nos interesen, e incorporamos los elementos que serán mostrados en todas nuestras páginas web. Ahora definimos las celdas de la tabla en las que vamos a insertar diferentes textos, imágenes u otros elementos en cada documento de nuestro sitio.

Para ello, situamos el cursor en la celda en cuestión y hacemos clic sobre el botón Región editable del panel Plantillas en el grupo de paneles Insertar. Dreamweaver nos advertirá de que el documento se guardará como plantilla y, tras aceptar, podremos dar un nombre identificativo a la nueva región editable (el nombre de la región no puede contener caracteres especiales ni puede usarse varias veces en una misma plantilla). Repetimos esta operación con cada celda cuyo contenido deseemos modificar en los documentos basados en la plantilla. Ahora podemos guardar la plantilla desde la opción Guardar o Guardar como plantilla del menú Archivo.



Dreamweaver guarda las plantillas en la carpeta Templates en la raíz de la estructura de archivos de nuestro sitio web. Si no existe esa carpeta la crea automáticamente. No deben sacarse los archivos de plantilla de esa carpeta, ni incluir en ella archivos que no sean plantillas, ni mover la carpeta a otro lugar, pues se producirían errores en las rutas a las plantillas.

Para crear documentos basados en la plantilla que hayamos creado, elegimos Nuevo en el menú Archivo, hacemos clic en la solapa Plantillas y elegimos la plantilla adecuada. Es recomendable dejar marcada la casilla Actualizar página cuando cambie la plantilla, pues así podremos modificar el aspecto de todos los documentos basados en la plantilla con sólo modificar los atributos de la tabla en el archivo de plantilla.

g. ¿Qué es una página con marcos (<frameset>)? Una página con marcos es aquella que tiene definidas dos o más divisiones de la

ventana de visualización del navegador, con el fin de mostrar un documento web diferente en cada una de ellas. Un marco (frame) es cada una de esas divisiones de la ventana.

Al crear los marcos se define una estructura jerárquica en la que unos marcos quedan anidados a otros (siempre que se definan más de dos marcos), pues solo es posible definir marcos directamente en fila o en columna, es decir que si definimos dos marcos, uno a la izquierda del otro, después podríamos definir nuevos marcos, uno encima de otro, dentro de cada uno de los marcos definidos previamente. Esto es así porque cada marco es tratado como si fuera una ventana independiente.

No todos los navegadores son compatibles con el uso de marcos y algunos visitantes pueden experimentar dificultades para navegar por páginas con marcos. Por eso, si los utilizamos, debemos incluir siempre una sección noframes en el conjunto de marcos para los visitantes que no pueden verlos (Modificar > Conjunto de marcos > Editar contenido sin marcos). Una buena alternativa consiste en incluir también un vínculo a una versión sin marcos del sitio, para los visitantes con navegadores que no admitan marcos o que no deseen utilizarlos.

Entre las ventajas de utilizar marcos se incluyen: - El navegador de un visitante no tendrá que volver a cargar los gráficos de

navegación para cada página. - Cada marco dispone de su propia barra de desplazamiento (si el contenido es

demasiado grande para una ventana), permitiendo al visitante desplazarse por los marcos de forma independiente. (Por ejemplo, si la barra de navegación se encuentra en otro marco, cuando el visitante se ha desplazado al final de una página de contenido muy grande en un marco, no será necesario volver al principio de la página para acceder a la barra de navegación.) Entre los inconvenientes de utilizar marcos se incluyen:

- Lograr un alineamiento gráfico preciso de los elementos en distintos marcos puede resultar difícil.

- Comprobar las opciones de navegación puede llevar mucho tiempo.

h. Definir una página con marcos La etiqueta HTML que permite definir marcos es <frameset>. Sin embargo

Dreamweaver permite crear marcos fácilmente eligiendo el botón del panel Marcos, en el grupo de paneles Insertar, que corresponda con el número y organización de los marcos que deseemos.



En el documento que contenga la definición de los marcos no debe haber otros contenidos que no sean los relativos a la sección noframes, por lo que la definición de los marcos se hará en un documento nuevo vacío (generalmente index.htm).

i. Modificando una página con marcos Una vez definido el número y disposición de los

marcos, podremos seleccionar cada uno de ellos por separado, o bien una fila o una columna de marcos, o también todos los marcos, haciendo clic sobre el área correspondiente del panel Marcos del grupo de paneles Disposición avanzada.

Tras seleccionar el marco y desde el Inspector de propiedades, podremos introducir la URL del documento que se cargará en cada marco al principio, y modificar sus atributos.

Veamos los parámetros que se pueden ajustar en un marco: Nombre del marco: uno de los atributos más importantes es el nombre identificativo

del marco (Dreamweaver asigna un nombre por defecto), que se recomienda cambiar por una palabra que nos ayude a identificar el marco en el conjunto de la página. El nombre no admite caracteres especiales ni espacios en blanco.

Origen: ruta absoluta o relativa al archivo del documento que se cargará en el marco al principio.

Desplaz.: permite elegir si deseamos que se muestren barras de desplazamiento dentro del marco o no, cuando el contenido del mismo excede el área de visualización.

Mismo tamaño: activo no permite que desde la ventana del navegador pueda modificarse el tamaño del marco arrastrando el borde.

Bordes: hace que se muestre el borde del marco o no. Color borde: selección del color para el borde del marco. Ancho del margen y alto del margen: establecen los márgenes dentro del marco, en

píxeles. Estos márgenes no tienen que ver con los márgenes del documento que se visualice dentro del marco.

j. Utilizar marcos para diseñar

En vez de utilizar tablas para dar una estructura uniforme a un sitio web, podemos utilizar marcos.

Un ejemplo de este caso sería el sitio web con una página de definición de marcos que contiene un marco de encabezado, para el logotipo de la página y algún banner publicitario, un marco de menú donde se muestra un documento con los hipervínculos que enlazan a cada página o sección del



sitio, en el que se habría definido el tercer marco (el de contenido) como target base, y un tercer marco en el que se mostrarían los contenidos del sitio. La página que se muestra más abajo está organizada mediante una definición de cuatro marcos: encabezado, pie, menú y contenido. El marco de encabezado contiene un documento que incluye una imagen con el logotipo de la página y un contador de visitas a la página. El marco de pie contiene una pequeña barra de navegación con cuatro enlaces y un texto que indica la fecha de la última actualización. El marco de menú muestra un documento organizado mediante una tabla, de la que no se muestran los bordes, en la que aparecen los enlaces a las distintas secciones del sitio web. En el marco de contenido se muestran los documentos a los que enlazan la mayoría de los hipervínculos definidos en el sitio web.

En este caso no han sido utilizadas imágenes en ninguna barra de navegación, con el fin de acelerar al máximo la carga de las páginas.

6. FORMULARIOS a. ¿Qué es un formulario?

Un formulario es una página web (o una parte de una página web) en la que existen campos para introducir datos o para seleccionar opciones. Estos datos se recogen en el propio formulario y se envían a un servidor para su procesamiento mediante un programa CGI. También es posible enviar los datos por correo electrónico a una dirección de correo programada.

b. Creando formularios en Dreamweaver Para crear un formulario dentro de una página web, basta con situar el cursor en el

punto a partir del cual deseamos que aparezca el formulario y elegir el botón Formulario en el panel Formularios del grupo de paneles Insertar. También podemos hacerlo desde el menú Insertar > Formulario.



En la ventana de documento aparece un recuadro rojo que indica la extensión del formulario. Dentro de él colocaremos los diferentes campos o botones que hayamos previsto.

Cuando seleccionamos recuadro del formulario podemos realizar los ajustes oportunos desde el Inspector de Propiedades:

Nombre del formulario: Dreamweaver asigna un nombre por defecto, peor podemos poner el que deseemos. Este nombre es usado por el código de script que pueda afectar al formulario. Acción: En este campo introduciremos el URL de la aplicación que deba procesar los datos, o la dirección de correo electrónico a la que serán enviados. En este caso debe ir precedida de malito: Método: Debemos elegir el método por el que se transmitirán los datos del formulario al servidor. Las opciones posibles son POST, GET y Predeterminado. La primera es adecuada cuando se desean enviar los datos a una dirección de correo electrónico. La segunda es adecuada cuando se envía la dirección a una aplicación que se encargará de procesarla y devolverá un resultado, tras el procesado. La opción Predeterminado utiliza la opción por defecto del navegador, que generalmente es GET. Dest(ino): Permite elegir el marco de destino para la página de resultados enviada por el servidor tras el procesado de los datos enviados. Las opciones de este menú desplegable dependen de si hemos definido una página de marcos o no. En el segundo caso se mostrarán solo las opciones _blank, _parent, _self y _top, mientras que el primer caso, además, se mostrarán los nombres de los marcos que hayamos definido. Enctype: Desde aquí podemos elegir el tipo de codificación con el que serán enviados los datos al servidor. El tipo application/x-www-form-urlencode se utiliza normalmente junto con el método POST. El tipo multipart/form-data es adecuado cuando se ha incluido en el formulario un campo para carga de archivos. Es recomendable escribir text/plain como tipo de codificación cuando deseemos que un formulario nos envíe los datos a nuestra dirección de correo, siempre que no sean datos confidenciales, pues de esta forma leeremos mejor la información recibida. A continuación se muestra el código HTML correspondiente a un formulario que enviará los datos por correo electrónico. El código de los elementos que contenga deberá estar escrito entre las dos líneas.

c. Los campos de texto Son elementos del formulario que permiten que el usuario de la página introduzca

información desde el teclado. Pueden ser de una o de varias líneas. En el primer caso, podemos especificar el número máximo de caracteres (Cars máx) y en el segundo, el número máximo de líneas (Líneas núm). En este último caso el campo se transforma en un Área de texto. También podemos introducir un valor inicial para este campo.



La anchura que ocupa el campo en la página web se determina en número de caracteres (Ancho car).

Como cada elemento de un formulario, también debe tener un nombre identificativo, que podemos elegir o, por el contrario, dejar que Dreamweaver lo establezca.

La opción Contraseña hace que los caracteres introducidos en el campo de texto se muestren como asteriscos.

d. Los campos ocultos En estos campos sólo es posible introducir un valor, además del nombre del campo. El

valor asignado a un campo oculto se envía con los demás datos del formulario, pero no es visualizado en la página web.

e. Área de texto Descrita en su mayor parte en el apartado c. Los campos de texto. Resta añadir que es

posible elegir que tipo de ajuste del texto dentro del área definida para contenerle: - Predeterminado y Desactivado: no ajustan el texto dentro del área, por lo que

si la línea de texto excede la anchura del área, el texto es desplazado hacia la izquierda.

- Virtual: ajusta el texto dentro del área pero no realiza ningún ajuste en el texto que se envía al servidor.

- Físico: ajusta el texto dentro del área definida en la página web y envía el texto al servidor ajustado de la misma forma que en pantalla.

f. Las casillas de verificación Las casillas de verificación permiten seleccionar más de una opción en un grupo de

opciones. Podemos definir si la casilla aparecerá marcada o no por defecto, e introducir el valor que tendrá ese campo cuando esté marcado.

g. Los botones de opción Los botones de opción son similares a las casillas de verificación pero realizan

selecciones excluyentes, en vez de múltiples, en un grupo de opciones.

h. Grupo de opciones

Para utilizar cómodamente los botones de opción podemos valernos de los grupos de opciones, que nos permiten programar, fácil y rápidamente, cada botón de opción del grupo, de forma que pueda realizarse la selección excluyente de una sola de las opciones.

Es posible que el grupo de opciones se organice dentro de una tabla o, por el contrario, mediante saltos de línea <br> a continuación de cada opción.



i. Los menús y las listas

Son objetos del formulario que nos permiten seleccionar una o varias opciones entre varias, pero presentándolas en forma de menú o en forma de lista. Pueden tener la misma utilidad que los botones de opción y las casillas de verificación respectivamente. En un menú sólo puede seleccionarse una de las opciones, mientras que en una lista es posible la selección múltiple.

A través del botón Valores de lista... se introducen los textos que se mostrarán en el menú o la lista (Etiquetas) y los valores asociados, que quedarán seleccionados al marcar la opción correspondiente. Mediante los botones + y – podemos añadir o eliminar opciones.

Una vez introducidas las opciones de la lista podemos elegir una de ellas como opción por defecto.

En la lista de opciones, además, podemos ajustar la altura, en líneas, del área que ocupará la lista en nuestra página web, y si permitiremos la selección múltiple o no.

A continuación se muestra el código de un menú de opciones con tres opciones y la primera de ellas seleccionada por defecto, y más abajo el código de una lista de opciones que ocupa dos líneas en la página web, con tres opciones y la primera de ellas seleccionada.

j. Los menús de salto Similares a los menús de opciones, pero la selección de una de las opciones tiene el

mismo efecto que hacer clic en un hipervínculo, es decir, la selección nos permite acceder a una dirección de Internet.

Mediante un cuadro de diálogo podemos configurar las opciones del menú, introduciendo para cada una un texto descriptivo, que aparecerá en el menú, y una dirección URL a la que saltará el navegador al seleccionar el texto asociado en el menú.

Como puede verse a la derecha, también podemos elegir dónde se cargará el contenido de la URL seleccionada y, si lo deseamos, que aparezca un botón Ir al lado del menú que determina cuando se carga la URL seleccionada. Marcaremos la opción Seleccionar primer elemento tras el cambio de URL cuando en la lista de opciones hayamos incluido el texto Selecciona una opción al principio de la lista.



Este menú se apoya en un código de script, por lo que si, una vez creado, deseamos modificarlo, debemos seleccionarlo y acudir al panel de comportamientos donde encontraremos uno relativo al menú de salto.

k. El campo de imagen

Este campo sirve para enviar los datos del formulario al hacer clic sobre la imagen. Es similar al botón de envío.

Podemos insertar este campo dentro del espacio definido para el formulario, a través del menú Insertar > Objetos de formulario > Campo de imagen o bien desde el icono Campo de imagen del panel Formularios del grupo de paneles Insertar, si bien es más recomendable la segunda opción. Mediante este segundo método, se nos pide seleccionar el archivo de imagen a mostrar en el campo que estamos creando y, una vez elegido, desde el inspector de propiedades podemos ajustar algunos parámetros como:

- Campo imagen: corresponde al nombre identificativo del objeto para ser tratado desde un script.

- An y Al: permiten ajustar la altura y la anchura de la imagen. - Origen: ruta hacia el archivo de imagen. - Alt: texto alternativo, que será mostrado mientras se carga la imagen y tras

situar el puntero del ratón sobre la imagen y dejar inmóvil unos instantes. - Alinear: permite elegir la alineación de la imagen con relación a la línea

textual en la que se haya insertado. El botón Editar imagen abre la imagen en el programa de edición de imágenes que

hayamos configurado en las preferencias de Dreamweaver o el que esté asociado por defecto en el Sistema Operativo con el tipo de imagen utilizada.

l. El campo de archivo Este campo permite, al usuario de nuestra página web, elegir un archivo que se

encuentre almacenado en su ordenador, para que sea enviado junto con los datos de los otros campos del formulario.

En este caso, sólo es posible ajustar el tamaño del campo, en caracteres, y el número de caracteres máximo que podrá contener, aunque éste último dato no tiene efecto alguno.

m. Los botones Disponemos de tres modelos de botón que nos permiten controlar el funcionamiento

del formulario: Enviar, Restablecer y Botón (ninguno). Todos ellos se insertan desde el icono Botón del panel Formularios del grupo de paneles Insertar, o bien desde el menú Insertar > Objetos de formulario > Botón. En realidad se trata de un solo botón al que podemos asignar una u otra acción.

El botón Enviar provoca el envío de los datos de todos los campos del formulario a la dirección que hayamos introducido al crear el formulario (dentro de la etiqueta <Form>).

El botón Restablecer pone a cero (o vacía) todos los campos del formulario.

Cuando elegimos Ninguno en la selección de acciones de botón, éste aparece en la

página web pero no ocurre nada al actuar sobre él. Si deseamos incorporarle alguna acción (distinta de Enviar o Restablecer) podemos hacerlo desde el panel de comportamientos.



n. Las etiquetas El único fin del icono Etiquetas del panel Formularios en el grupo de paneles

Insertar, es introducir textos en el formulario de forma que queden asociados estructuradamente a los elementos del formulario, mediante la etiqueta <label>. No obstante, podemos escribir textos directamente dentro del espacio del formulario, al lado de los diferentes campos, con el fin de aclarar lo que debe hacer el usuario en cada caso.

o. El juego de campos

Es una etiqueta contenedora (<fieldset>) para un grupo lógico de elementos de un formulario.



7. EJERCICIOS PROPUESTOS a. Desde el explorador de Windows, crea una estructura de carpetas, dentro de la

carpeta Mis documentos formada por una carpeta principal con tu nombre y, dentro de ella, las carpetas imagenes, documentos y sonidos. Cuida de no utilizar letras acentuadas ni signos en los nombres de las carpetas de un sitio web. También es recomendable que los nombres de los archivos y carpetas no tengan más de una palabra.

b. Define un sitio en Dreamweaver relacionándolo con la estructura de carpetas que has creado.

c. Comprueba si tienes un documento vacío abierto en la ventana de documentos y define sus propiedades de título, fondo (de momento sin imagen), texto, vínculos y márgenes.

d. Introduce las etiquetas <meta> Keywords (Palabras clave) y Description (Descripción).

e. Escribe algunos textos en el documento, de forma que sirva de página de bienvenida y no te olvides de escribir el texto que servirá de hipervínculo para continuar visitando tu sitio web.

f. Crea, al menos, dos estilos HTML y aplícaselos a dos textos diferentes de los que has introducido en el documento.

g. Comprueba la ortografía del documento sobre el que estás trabajando. h. Guarda el documento en la carpeta principal de tu sitio web, con el nombre

index.htm. i. Cierra el documento anterior y abre uno nuevo, que utilizarás como menú de

enlaces para tu página. Define sus propiedades como en el ejercicio c) e introduce las etiquetas <meta> descritas en el apartado d).

j. Escribe un texto que encabece el documento y, más abajo, en líneas diferentes los textos que quieras utilizar como hipervínculos con los demás documentos que formen tu sitio web. Escribe también aquellos que desees enlazar con otras páginas web. No te olvides de escribir un texto que sirva de enlace hacia la página de bienvenida que ya has creado y conviértelo en un hipervínculo.

k. Introduce también un hipervínculo que enlace con tu dirección de correo electrónico o con una que te pueda interesar, en caso de que no dispongas de una propia.

l. Guarda el documento actual y ciérralo. Abre el documento index.htm que habías creado anteriormente y, sobre el texto introducido como enlace para continuar, crea el hipervínculo encargado de abrir el documento de menú. Guarda y cierra de nuevo el documento index.htm.

m. Abre un documento nuevo, define sus propiedades e introduce las etiquetas <meta>. Escribe un texto de agradecimiento a los visitantes de tu sitio web, aplícale el estilo HTML que desees, guárdalo y cierra el documento.

n. Abre el documento de menú y añade un hipervínculo enlazado con el documento de agradecimiento, pero programa el hipervínculo para que el agradecimiento aparezca en una ventana nueva, en vez de aparecer en la ventana en la que se muestra el menú.

o. Elige algunas imágenes para incorporar en los documentos que vas creando (puedes obtenerlas de Internet) y ajusta su tamaño si son demasiado grandes. Es recomendable que vayas almacenándolas en la carpeta imagenes que creaste al principio.



p. Abre la página de bienvenida e inserta allí una de las imágenes que has elegido, ajustando sus propiedades para que no se muestre nada más que la imagen. Haz otro tanto en la página de agradecimiento.

q. Crea un nuevo documento, define sus propiedades e introduce las etiquetas <meta>. Compón el contenido del documento utilizando texto e imágenes. Inserta en algún lugar del documento un rollover básico (imagen de sustitución) que sirva para regresar a la página de menú. Puedes crear las imágenes que desees utilizar, si no dispones de las adecuadas. No olvides guardar el documento al final.

r. Crea un nuevo documento, define sus propiedades, introduce las etiquetas <meta> y dale un contenido en el que aparezca una imagen que deba utilizarse como hipervínculo con otro documento y otra imagen en la que debamos definir, al menos, dos zonas activas que enlacen con otras páginas web. Guárdalo al final.

s. Crea un nuevo documento de menú que disponga de los mismos hipervínculos que el que creaste anteriormente, pero esta vez colócalos en una barra de navegación, para lo que deberás crear varias imágenes que contengan los textos de cada hipervínculo. Guárdalo con un nombre diferente al otro menú.

t. Crea un nuevo documento y, dentro de él, una tabla que te permita organizar la información que desees mostrar en él. Seguidamente, introduce los textos e imágenes en las celdas adecuadas de la tabla y ajusta las propiedades de la tabla para que aparezca a tu gusto. No olvides guardarlo todo.

u. Abre el documento de bienvenida y, sobre él, define una página con marcos en la que aparezcan, al menos dos marcos, uno para el menú de enlaces y otro para mostrar el documento enlazado con el hipervínculo activo. Ajusta las propiedades de los marcos para que aparezcan a tu gusto y guarda el resultado.

v. Crea un último documento en el que deberás definir un formulario, con el fin de recabar la opinión de los visitantes de tu sitio web sobre un tema de tu elección. Para ello diseña una encuesta utilizando varios elementos de formulario para que el visitante responda a las preguntas planteadas de diferentes maneras. Los datos del formulario deben ir a parar a tu dirección de correo electrónico.

w. Por último, modifica la página de bienvenida para que aparezcan dos hipervínculos, de forma que uno muestre el resto de tu sitio web con el menú de texto y el otro con el menú de imágenes (barra de navegación). Completa en ambos casos los textos e imágenes de los menús para tener acceso a todos los documentos creados.

DISEÑO DE PÁGINAS WEB - josevicente.com · Diseño de páginas web con Dreamweaver MX José...

Documents

Transcript of DISEÑO DE PÁGINAS WEB - josevicente.com · Diseño de páginas web con Dreamweaver MX José...