Creacin y almacenamiento de una pgina nueva

1. En Dreamweaver, Seleccione Archivo > Nuevo.

2. En la ficha General del cuadro de dilogo Nuevo documento, seleccione Pgina bsica en la lista
Categora, seleccione HTML en la lista Pgina Bsica y haga clic en Crear.
3. Seleccione Archivo > Guardar como.
4. En el cuadro de dilogo Guardar como, busque y abra la carpeta cafe_townsend que defini
como carpeta raz local del sitio. Esta carpeta la cre dentro de una carpeta llamada local_sites.
5. Escriba index.html en el cuadro de texto Nombre de archivo y haga clicen Guardar.
El nombre de archivo aparecer ahora en la barra de ttulo en la parte superior de la ventana de la
aplicacin.
6. En el cuadro de texto Ttulo del documento en la parte superior del nuevo documento, escriba
Cafe Townsend.


ste es el ttulo de la pgina (distinto al nombre de archivo). Los visitantes del sitio vern este ttulo
en la barra del ttulo del navegador cuando accedan a ella a travs de su navegador Web.

7. Seleccione Archivo > Guardar para guardar la pgina.
Insercin de tablas
A continuacin, vamos a introducir una tabla que incluir texto, grficos y activos de Macromedia
Flash.

1. Haga clic una vez en la pgina para colocar el punto de insercin en la esquina superior
izquierda de la pgina.





2. Seleccione Insertar> Tabla.
3. En el cuadro de dilogo Tabla, siga este procedimiento:
Escriba 3 en el cuadro de texto Filas.
Escriba 1 en el cuadro de texto Columnas.
Escriba 700 en el cuadro de texto Ancho de tabla.
Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.



4. Haga clic en Aceptar.
Aparece en su documento una tabla con tres filas y una columna. La
tabla tiene 700 pxeles de ancho, sin bordes, relleno de celda ni espacio
entre celdas.










5. Haga clic una vez a la derecha de la tabla para anular la seleccin.
6. Seleccione Insertar> Tabla para insertar otra tabla.
7. En el cuadro de dilogo Insertar tabla, siga este procedimiento para la
segunda tabla:
Escriba 1 en el cuadro de texto Filas.
Escriba 3 en el cuadro de texto Columnas.
Escriba 700 en el cuadro de texto Ancho de tabla.
Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.
8. Haga clic en Aceptar.

Aparece una segunda tabla con una fila y tres columnas debajo de la
primera tabla.



9. Haga clic a la derecha de la tabla para anular la seleccin.
10. Inserte una tercera tabla seleccionando Insertar > tabla e introduciendo
los siguientes valores en el cuadro de dilogo Insertar tabla:
Escriba 1 en el cuadro de texto Filas.
Escriba 1 en el cuadro de texto Columnas.
Escriba 700 en el cuadro de texto Ancho de tabla.
Seleccione Pxeles en el men emergente Ancho de tabla.
Escriba 0 en el cuadro de texto Grosor del borde.
Escriba 0 en el cuadro de texto Relleno de celda.
Escriba 0 en el cuadro de texto Espacio entre celdas.
11. Haga clic en Aceptar.
Aparece una tercera tabla con una fila y una columna debajo de la
segunda tabla.


Haga clic a la derecha de la tabla para anular la seleccin. La pgina
creada debe ser parecida a la siguiente:








Establecimiento de las propiedades de una tabla

Ahora va a definir propiedades especficas de la tabla utilizando el modo de tablas expandidas, una
funcin que aade temporalmente relleno y espaciado de celdas a las tablas y aumenta los bordes,
para as simplificar la edicin. Especficamente, permite colocar el punto de insercin de manera
Precisa, sin seleccionar accidentalmente la tabla equivocada o el contenido de otra tabla.

1. Seleccione Ver > Modo de tabla > Modo de tablas expandidas.



Si aparece el cuadro de dilogo Introduccin al modo de tablas expandidas, haga clic en Aceptar.

2. Haga clic una vez dentro de la primera fila de la primera tabla.



3. En el inspector de propiedades (Ventana> Propiedades), introduzca 90 en el cuadro de
texto Alto de celda (Al) y presione Intro (Windows).



Si no aparece el cuadro de texto Alto de celda, haga clic en la flecha de ampliacin situada en la esquina inferior derecha
del inspector de propiedades.

4. Haga clic una vez dentro de la segunda fila de la primera tabla.



5. En el inspector de propiedades, introduzca 166 en el cuadro de texto
Alto de celda y presione Intro

6. Haga clic una vez dentro de la tercera fila de la primera tabla.
7. En el inspector de propiedades, introduzca 24 en el cuadro de texto Alto De celda y presione
Intro.

Ahora debe tener tres filas de alturas diferentes en la primera tabla.



A continuacin vamos a definir las propiedades de la segunda tabla (la que consta de tres
columnas).

8. Haga clic una vez dentro de la primera columna de la segunda tabla.



9. En el inspector de propiedades, introduzca 140 en el cuadro de texto Ancho de celda (An) y
presione Intro.

10. Haga clic una vez dentro de la segunda columna de la segunda tabla.



11. En el inspector de propiedades, introduzca 230 en el cuadro de texto Ancho de celda y presione
Intro



12. Defina el ancho de la tercera columna con un valor de 230 pxeles. Si el Selector de tablas est
activado (Ver > Ayudas visuales > Anchos de tabla), podr ver sobre las columnas de la tabla
respectivas los tres valores en pxeles que acaba de introducir. No va a introducir valores para la
altura de las celdas de esta tabla porque la altura de dichas celdas variar dependiendo del
contenido que agregue ms adelante.

13. Por ltimo, haga clic dentro de la ltima tabla (la que tiene una fila y una columna).

14. En el inspector de propiedades, introduzca 24 en el cuadro de texto Alto de celda y presione
Intro




15. Haga clic en el vnculo Salir de modo de tablas expandidas en la parte superior de la ventana de
documento para regresar al Modo estndar.

16. Guarde la pgina.

Insercin de un marcador de posicin de imagen
Un marcador de posicin de imagen es un grfico que se utiliza hasta que el grfico definitivo est
listo para su incorporacin a la pgina Web. Un marcador de posicin de imagen puede resultar til
al crear el diseo de pgina, pues permite colocar una imagen en una pgina antes de crear la
imagen.

1. En la ventana de documento, haga clic una vez dentro de la primera fila
de la primera tabla.
2. Seleccione Insertar > Objetos de imagen > Marcador de posicin de
imagen.
3. En el cuadro de dilogo Marcador de posicin de imagen, siga este
procedimiento:
Escriba banner_graphic en el cuadro de texto Nombre.
Escriba 700 en el cuadro de texto Ancho.
Escriba 90 en el cuadro de texto Alto.
Haga clic en el cuadro de color y seleccione un color en el selector
de color. Para este tutorial, seleccione un marrn rojizo (#993300).
Deje en blanco el cuadro de texto Texto alternativo.

4. Haga clic en Aceptar.
El marcador de posicin de imagen aparece dentro de la primera tabla.
El marcador de posicin de imagen muestra una etiqueta y los atributos
de tamao de la imagen que en su momento colocar en ese lugar.



5. Guarde la pgina.

Adicin de color a la pgina
A continuacin va a aadir ms color a la pgina configurando los colores de algunas de las celdas
de la tabla y del fondo de la pgina.
1. Haga clic una vez dentro de la primera celda de la tabla de tres columnas.
2. Haga clic en la etiqueta <td> (etiqueta de celda) en el selector de
etiquetas para seleccionar la celda.



3. En el inspector de propiedades (Ventana> Propiedades), haga clic una vez dentro del cuadro de
texto Color de fondo. El cuadro de texto est situado justo al lado del cuadro de color del
Color de fondo

4. En el cuadro de texto Color de fondo, introduzca el valor hexadecimal 993300 y presione Intro



La celda de la tabla se volver de color marrn rojizo.
5. Haga clic una vez dentro de la segunda celda de la tabla de tres columnas.
6. Haga clic en la etiqueta <td> (etiqueta de celda) en el selector de etiquetas para seleccionar la
celda.
7. En el cuadro de texto Color de fondo, introduzca el valor hexadecimal #F7EEDF y presione Intro
La celda de la tabla se volver de color marrn claro.
8. Repita los pasos de 5 a 7 para cambiar tambin el color de la tercera celda de la tabla a un
marrn claro.
9. Una vez definidos los colores de las tres celdas, haga clic una vez fuera de la tabla para anular la
seleccin.
A continuacin cambiar el color de fondo de toda la pgina modificando las propiedades de la
pgina. El cuadro de dilogo Propiedades de la pgina le permite configurar varias propiedades de
la pgina, incluyendo, entre otros, el tamao y el color de las fuentes de la pgina, el color de los
vnculos visitados y los mrgenes de la pgina.

1. Seleccione Modificar > Propiedades de la pgina.
2. En la categora Aspecto del cuadro de dilogo Propiedades de la pgina, haga clic en el cuadro
de color Color de fondo y seleccione negro (#000000) en el selector de color.



3. Haga clic en Aceptar.
El color de fondo de la pgina se vuelve negro.



4. Guarde su trabajo.
Su diseo de pgina quedar definido. El diseo incluye varias tablas que pueden albergar activos
como imgenes, texto y archivos de Flash Video (FLV).

Repaso de la tarea
En esta gua paso a paso se incorporar activos a la pgina de inicio de Cafe Townsend, un
restaurante ficticio. Aprender a aadir imgenes, archivos de Macromedia Flash, archivos de
Macromedia Flash Video y texto. Cuando haya terminado, la pgina se parecer a sta:



Como podr ver, el texto de la pgina todava no est formateado. Eso es debido a que ms
adelante aprenderemos a darle formato al texto utilizando hojas de estilos en cascada (CSS).






Insercin de imgenes
Una vez creado su diseo de pgina, ya puede aadir activos a la pgina. Vamos a comenzar
aadiendo imgenes. Hay varias formas de aadir imgenes a una pgina Web en Dreamweaver.
En este apartado va a aadir cuatro imgenes distintas a la pgina index de Cafe Townsend
siguiendo varios mtodos.

1. En Dreamweaver, abra el archivo index.html que cre
2. Haga doble clic en el marcador de posicin de imagen banner_graphic, en la parte
superior de la pgina.



3. En el cuadro de dilogo Seleccionar origen de imagen, acceda a la carpeta de imgenes
dentro de la carpeta cafe_townsend que defini como carpeta raz del sitio.
4. Seleccione el archivo banner_graphic.jpg y haga clic en Aceptar.



Dreamweaver sustituye el marcador de posicin de imagen por el grfico de rtulo de Cafe
Townsend.


5. Haga clic una vez fuera de la tabla para anular la seleccin de la imagen.
6. Guarde el archivo (Archivo > Guardar).

Insertar una imagen utilizando el men Insertar

1. Haga clic una vez dentro de la tercera fila de la primera tabla (dos filas por debajo del
grfico de rtulo que acaba de insertar, justo encima de las celdas coloreadas de la tabla).



2. Seleccione Insertar > Imagen.
3. En el cuadro de dilogo Seleccionar origen de imagen, acceda a la carpeta de imgenes dentro
de la carpeta cafe_townsend, seleccione el archivo body_main_header.gif y haga clic en Aceptar.

NOTA: Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de imagen, haga clic en Aceptar.

Aparece en la tabla un grfico largo y coloreado. Parece ms un color de fondo para la celda de la
tabla que un grfico, pero si lo mira con ms atencin ver que el grfico tiene las esquinas
redondeadas. El efecto de equinas redondeadas le dar un aspecto interesante a la parte inferior
de la pgina una vez haya aadido todos los activos.

Insercin de una imagen arrastrando
1. Haga clic una vez dentro de la ltima fila de la ltima tabla de la pgina (justo debajo de las
celdas coloreadas de la tabla).

2. En el panel Archivos (Ventana > Archivos) busque el archivo body_main_footer.gif (dentro
de la carpeta de imgenes), y arrstrelo hasta el punto de insercin de la ltima tabla.

NOTA Se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de imagen, haga clic en Aceptar.



3. Haga clic una vez fuera de la tabla y guarde la pgina (Archivo > Guardar).

Insertar una imagen desde el panel Activos
1. Haga clic una vez dentro de la columna central de la tabla de tres columnas (la primera
celda de la tabla de color marrn claro).

2. En el inspector de propiedades (Ventana > Propiedades), seleccione Centro en el men
emergente Horiz, y seleccione Superior en el men emergente Vert. Esto alinear el
contenido del a tabla en el centro de la celda, y empujar el contenido de la celda a la parte
superior de la misma.

NOTA: Si no aparecen los mens emergentes Vert o Horiz, haga clic en la flecha de ampliacin situada en la esquina
inferior derecha del inspector de propiedades.

3. Presione Intro (Windows) o Retorno (Macintosh) una vez para crear ms espacio.



4. Haga clic en la ficha Activos del panel Archivos o seleccione Ventana >Activos.



5. Si no est seleccionada la vista Imgenes, haga clic en Imgenes para ver sus activos de
imagen.
6. En el panel Activos, seleccione el archivo street_sign.jpg.

7. Siga uno de estos procedimientos:
Arrastre el archivo street_sign.jpg hasta el punto de insercin de la celda de la tabla central.
Haga clic en Insertar en la parte inferior del panel Activos.

NOTA: Si se abre el cuadro de dilogo Atributos de accesibilidad de la etiqueta de imagen, haga clic en Aceptar.

El grfico street_sign.jpg aparece en la pgina.



8. Haga clic una vez fuera de la tabla para anular la seleccin de la imagen.
9. Guarde la pgina.

Insercin y reproduccin de un archivo Flash
A continuacin va a insertar un archivo Flash que reproduce una serie de fotografas de alimentos
ofrecidos por Cafe Townsend. El archivo Flash que va a insertar es un archivo FMA, o rea de
mensajera flexible. Un FMA es un tipo de aplicacin Flash comn que muestra un mensaje
informativo. El mensaje puede cambiar segn las necesidades especficas. Por ejemplo, si Cafe
Townsend va a celebrar un acontecimiento especial, el FMA se podra cambiar fcilmente (sin
afectar al resto de la pgina) para mostrar informacin sobre el evento en lugar de mostrar los
alimentos ofrecidos. Para insertar el archivo FMA de Flash necesita insertar cdigo HTML para
incrustar el archivo en la pgina de Dreamweaver. Para hacer esto, lo ms sencillo es insertar el
archivo SWF (el archivo de pelcula Flash exportado) en la pgina. Cuando se inserta un archivo
SWF en Dreamweaver, Dreamweaver escribe por usted todo el cdigo Flash HTML necesario.

1. Con la pgina index.html abierta en la ventana de documento de Dreamweaver, haga clic una
vez dentro de la segunda fila de la primera tabla.
La fila de la tabla justo debajo del grfico de rtulo introducido en el apartado anterior.
2. En el inspector de propiedades (Ventana > Propiedades), seleccione Centro en el men
emergente Horiz, y seleccione Medio en el men emergente Vert. De este modo se colocan los
contenidos de la celda de la tabla en el medio de la misma.



NOTA: Si no aparecen los mens emergentes Vert o Horiz, haga clic en la flecha de ampliacin situada en la esquina
inferior derecha del inspector de propiedades.

Archivos flash Al crear activos en Macromedia Flash, se trabaja con archivos FLA, el tipo de archivo
predeterminado de la aplicacin Flash. Los archivos FLA tienen la extensin .fla. Por ejemplo, si est
trabajando con un logotipo animado para un sitio Web, el nombre del archivo Flash podra ser
animated_logo.fla.
Cuando termine de trabajar con el archivo FLA en Flash, debe exportar el archivo a un formato que pueda
verse en la Web con Flash Player. Al exportar archivos FLA en Flash, se convierten en archivos SWF con
la extensin .swf. Los archivos SWF (no FLA) reproducen contenido Flash en un navegador; es el tipo de
archivo que se debe introducir en una pgina Web que se est diseando con Dreamweaver.

3 Seleccione Insertar > Media > Flash.

En el cuadro de dilogo Seleccionar archivo, acceda al archivo flash_fma.swf (est en la carpeta
raz cafe_townsend del sitio) seleccione el archivo y haga clic en Aceptar. Si se abre el cuadro de
dilogo Atributos de accesibilidad de la etiqueta de objeto, haga clic en Aceptar.





En la ventana de documento aparecer un marcador de posicin del contenido Flash en lugar de
una escena de FMA. Esto es debido a que el cdigo HTML apunta al archivo SWF flash_fma.swf.
Al cargar la pgina index.html, el navegador muestra el archivo SWF.

4. El marcador de posicin del contenido Flash se mantendr seleccionado despus de insertar un
archivo SWF mientras no haga clic en ningn otro punto de la pgina. Si no est seleccionado,
seleccione el marcador de posicin del contenido haciendo clic sobre l.
5. En el inspector de propiedades (Ventana > Propiedades), haga clic en Reproducir.



NOTA: Si no puede ver el botn Reproducir de Flash, haga clic en la flecha de ampliacin situada en la esquina inferior
derecha del inspector de propiedades.

Dreamweaver reproduce el archivo Flash en la ventana de documento, mostrando lo que podrn
ver los visitantes de la pgina cuando la vean a travs de un navegador.



6. En el inspector de propiedades, haga clic en Detener para detener la reproduccin del archivo
Flash.
7. Guarde la pgina.

Insercin de Flash Video
A continuacin va a insertar un archivo de vdeo Flash utilizando el activo proporcionado.
1. Con la pgina index.html abierta en la ventana de documento de Dreamweaver, haga clic
una vez sobre el grfico que introdujo en la columna central de la tabla de tres columnas.
En el apartado anterior, se cre espacio antes de insertar el grfico; es aqu donde debe
hacer clic.



2. Seleccione Insertar > Media > Flash Video.
3. En el cuadro de dilogo Insertar de Flash Video, seleccione Vdeo de descarga progresiva en
el men emergente Tipo de vdeo.

Flash Video El comando Insertar Flash Video de Dreamweaver le permite insertar contenido de Flash
Video en las pginas Web sin tener que utilizar la herramienta de autora de Flash. El comando inserta un
componente de Flash, que muestra el contenido de Flash Video seleccionado, adems de un conjunto de
mandos de reproduccin cuando se muestra en un navegador.
El comando Insertar Flash Video le permite ofrecer contenido de vdeo a los visitantes de su sitio a travs
de una de estas opciones:
El vdeo de descarga progresiva descarga el archivo de Flash Video (FLV) al disco duro del usuario y lo
reproduce. Sin embargo, a diferencia de los mtodos tradicionales de entrega de vdeo de tipo "descarga
y reproduccin", la descarga progresiva permite iniciar la reproduccin del archivo de vdeo antes de que
haya finalizado la descarga.
El vdeo de flujo transfiere el contenido de Flash Video y lo reproduce en la pgina Web de inmediato
cuando se solicite. No obstante, para poder utilizar el vdeo de flujo en pginas Web, es necesario tener
acceso a Macromedia Servidor de comunicaciones de Flash, el nico servidor que puede transferir
contenido de Flash Video.

4. En el cuadro de texto URL, especifique una ruta relativa al archivo cafe_townsend_home.flv; para
ello, haga clic en Examinar, acceda al archivo cafe_townsend_home.flv (situado en la carpeta raz
cafe_townsend del sitio), y seleccione el archivo FLV.




5. Seleccione Aspecto de halo 2 en el men emergente Apariencia. Se muestra una vista
previa del aspecto seleccionado bajo el men emergente Apariencia. La opcin Apariencia
determina el aspecto y funcionamiento del componente de Flash Video que incluir el
contenido de Flash Video.
6. En los cuadros de texto Ancho y Alto, siga este procedimiento:
En el cuadro de texto Ancho, escriba 180.
En el cuadro de texto Alto, escriba 135 y presione Intro (Windows)
o Retorno (Macintosh).



El valor de los cuadros de texto Ancho y Alto especifica la anchura y la altura en pxeles del archivo
FLV. Puede ajustar los valores arbitrariamente para cambiar el tamao del Flash Video en su
pgina Web. Al aumentar las dimensiones de un vdeo, suele deteriorarse la
calidad del vdeo.
NOTA "Total con aspecto" es el valor del ancho y alto del archivo FLV ms el ancho y alto del aspecto seleccionado.

7. En el resto de opciones, deje los valores predeterminados:
Restringir mantiene la misma relacin de aspecto entre el ancho y alto del componente de Flash
Video. Esta opcin est activada de forma predeterminada.
Reproduccin automtica especifica si el archivo se va a reproducir al abrir la pgina Web. Esta opcin
est desactivada de forma predeterminada.
Rebobinado automtico especifica si el control de reproduccin vuelve al punto de inicio cuando
finalice la reproduccin. Esta opcin est desactivada de forma predeterminada.

8. Haga clic en Aceptar para cerrar el cuadro de dilogo y aadir el contenido de Flash Video a la
pgina Web.
El comando Insertar Flash Video crea un archivo de reproduccin de vdeo SWF y un archivo de
skin SWF que se utilizan para reproducir el contenido de Flash Video en una pgina Web. (Quizs
tenga que hacer clic en el botn Actualizar del panel Archivos para ver los nuevos archivos.) Estos
archivos se almacenan en el mismo directorio que el archivo HTML al que est aadiendo
contenido de Flash Video (en este caso, la carpeta raz cafe_townsend). Al cargar la pgina HTML
con el contenido de Flash Video, Dreamweaver carga estos archivos como archivos dependientes
(siempre que haga clic en S en el cuadro de dilogo Colocar archivos dependientes).
9 . guarde la pagina




Insercin de texto
A continuacin, va a aadir texto a la pgina. Puede escribir texto directamente en la ventana de
documento de Dreamweaver o copiarlo y pegarlo de otro origen (como un archivo de Microsoft
Word o de texto).Mas adelante, le dar formato al texto utilizando hojas de estilos en cascada
(CSS).

Insercin del texto del cuerpo
1. En el panel Archivos, localice el archivo sample_text.txt (en la carpeta raz cafe_townsend) y
haga doble clic en el icono del archivo para abrirlo en Dreamweaver. Esta ventana se muestra en
la vista Cdigo y no se puede cambiar a la vista Diseo (la vista que ha estado utilizando hasta
ahora) porque el archivo no tiene formato HTML.



2. En la ventana de documento sample_text.txt , presione Control+A para seleccionar todo el texto
y, a continuacin, elija Edicin > Copiar para copiar el texto.

3. Cierre el archivo sample_text.txt haciendo clic en la X de la esquina superior derecha del
documento.
4. En la ventana de documento index.html, haga clic una vez dentro de la tercera celda de la tabla
de tres columnas (la celda a la derecha de la columna con el grfico y el vdeo de Flash).
5. Seleccione Edicin> Pegar. El texto del archivo de texto aparece en la celda de la tabla
seleccionada.



Dependiendo de la resolucin de su monitor, el texto ampliar la tabla de tres columnas para darle
cabida al texto. De momento, no se preocupe por el aspecto. En el siguiente tutorial, aprender a
darle estilo al texto utilizando hojas de estilos CSS, para que todo el contenido se incluya en la
tabla de un modo adecuado.
6. Asegrese de que el punto de insercin contina en la celda de la taba donde acaba de
pegar el texto. Si no lo est, haga clic dentro de la celda de la tabla.

7. En el inspector de propiedades (Ventana > Propiedades), seleccione Superior en el men
emergente Vert. El texto que acaba de pegar se alinear en la parte superior de la celda. Si no
aparece el men emergente Vert, haga clic en la flecha de ampliacin situada en la esquina inferior
derecha del inspector de propiedades.


7. Guarde la pgina.





Insercin de texto de una barra de navegacin
A continuacin va a insertar texto para una barra de navegacin. Tenga en cuenta que el texto no
va a tener aspecto de barra de navegacin hasta que lo formatee en el siguiente tutorial.


1. Haga clic una vez dentro de la primera columna de la tabla de tres columnas (la columna
de color marrn rojizo).
2. Escriba la palabra Cuisine.



3. Presione la barra de espacio y escriba Chef Ipsum.
4. Repita el paso anterior hasta haber incluido las siguientes palabras con un espacio entre ellas:
Articles, Special Events, Location, Menu, Contact Us.
No presione la tecla Intro (Windows) o mientras escribe. Utilice solamente la barra de espacio para
separar las palabras y deje que stas se distribuyan de forma natural. El ancho fijo de la celda
de la tabla determina las palabras que van a caber por lnea.



4. Manteniendo el punto de insercin en la primera celda de la tabla de tres columnas, haga
clic en la etiqueta <td> del selector de etiquetas.

5. En el inspector de propiedades (Ventana > Propiedades), seleccione Superior en el men
emergente Vert.
El texto que acaba de escribir se alinear en la parte superior de la celda.



6. Guarde la pgina.
Creacin de vnculos
Un vnculo es una referencia insertada en una pgina Web que seala a otro documento. Puede
convertir prcticamente cualquier tipo de activo en un vnculo, pero el tipo de vnculo ms comn
es el de texto. Puede crear vnculos en cualquier etapa del proceso de creacin del sitio. En este
apartado va a crear vnculos para la barra de navegacin, aunque todava no lo haya formateado
para que aparezca como barra de navegacin.
La carpeta raz de cafe_townsend incluye una pgina HTML completada a la que puede enlazar
con el vnculo (una pgina con un men de Caf Townsend). Esta pgina se utilizar para todos
los vnculos de navegacin, aunque si estuviera creando un sitio real tendra pginas diferentes
para estos vnculos.
1. Con la pgina index.html abierta en la ventana de documento de Dreamweaver, seleccione la
palabra Cuisine que introdujo en la primera celda de la tabla de tres columnas. Tenga cuidado de
seleccionar nicamente la palabra Cuisine, y no el espacio que le sigue.


3. En el inspector de propiedades (Ventana > Propiedades), haga clic en el icono de carpeta
situado junto al cuadro de texto Vnculo.





3. En el cuadro de dilogo Seleccionar archivo, localice el archivo
menu.html (que est en la misma carpeta que el archivo index.html) y
Haga clic en Aceptar

4. Haga clic una vez en la pgina para anular la seleccin de la palabra Cuisine. El texto Cuisine
aparecer subrayado y de color azul, lo que indica que se ha convertido en un vnculo.

5. Repita los pasos anteriores para vincular cada palabra o conjunto de palabras escritas para as
poder navegar. Tendr que crear seis vnculos ms: para Chef Ipsum, Articles, Special Events,
Location, Menu, yContact Us.
Enlace con vnculos cada palabra o conjunto de palabras a la pgina menu.html, y al crear los
vnculos tengacuidado de no incluir los espacios antes y despus de las palabras o grupos de
palabras. Se trata slo de un conjunto de vnculos ficticios; en un sitio real, enlazara cada
palabra de la barra de navegacin con una pgina especfica diferente.

NOTA: Los vnculos no funcionan cuando se hace clic en ellos en la ventana de documento en Dreamweaver; slo
funcionan en los navegadores. Para asegurarse de que los vnculos funcionan correctamente, tendr que obtener una vista
previa de la pgina en un navegador.

6.Guarde la pgina.

1. Asegrese de que el archivo index.html est activo en la ventana de documento.
2. Presione F12 Si no est abierto, su navegador principal se iniciar mostrando la
pgina index.

A continuacin, guarde su trabajo y pulse de nuevo la tecla F12 para asegurarse de que sus
cambios surten efecto.

Ya ha creado una pgina Web con contenidos. El paso siguiente consiste en formatear el
contenido para darle un aspecto ms atractivo

En este momento la pagina debe quedar de la siguiente forma: