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).