Dreamweaver

PROYECTO WEB
Diseño de sitio Local sobre la ciudad de Lima.
1. Crear la carpeta lima puede estar en cualquier lugar en el equipo Por ejemplo:
F:\lima

Figura 1. Dentro de la carpeta principal crea la carpeta imagenes.

Dreamweaver
DEFINA LA CARPETA DEL SITIO LOCAL PARA EL SITIO LIMA

1. Inicie Dreamweaver y seleccione Sitio> Nuevo sitio. Aparecerá el cuadro de diálogo Configuración del sitio.
2. En el cuadro de texto Nombre del sitio, introduzca LIMA - PERÚ como el nombre del sitio. El nombre se utiliza
internamente por Dreamweaver para identificar el sitio. No importa si contiene espacios.
3. Haga clic en el icono de carpeta situado junto al cuadro de texto Carpeta Sitio Local para buscar y seleccionar la carpeta
LIMA.

El cuadro de diálogo Configuración del sitio ahora debe ser similar a la figura.

4. Haga clic en Guardar. Aparece

La Figura Lista de archivos en el panel Archivos

Dreamweaver
CREAR Y GUARDAR UNA NUEVA PÁGINA

1. En Dreamweaver, asegúrese de que el sitio LIMA está

seleccionada en el panel Archivos (ver Figura).

2. Seleccione Archivo> Nuevo, seleccione como en la

imagen:

5. Clic en CREAR
6. Seleccione ARCHIVO / GUARDAR
7. Escriba index en el cuadro de texto Nombre de archivo y haga clic en Guardar.
Dreamweaver
ASI DEBE QUEDAR:
Dreamweaver
CONSTRUIR LA ESTRUCTURA DE PÁGINA BÁSICA

La Figura. La página se divide en secciones distintas, todas anidadas dentro de una capa exterior.
Dreamweaver
INTRODUCIR ETIQUETAS <DIV> Y OTROS ELEMENTOS DE AGRUPACIÓN

1. Haga clic en el botón Dividir en la parte superior izquierda de la ventana de documento para revelar la estructura
HTML subyacente que Dreamweaver ya ha construido para usted (vea la Figura 5).

Figura 5. Abra la vista Dividir para ver la estructura HTML subyacente.

2. CLIC EN El PANEL INSERTAR consta de varios sub-paneles (el valor predeterminado es común).

5. La categoría de la estructura contiene toda la agrupación y los elementos estructurales necesarios para construir el
marco para una página web.
Dreamweaver
6. Haga clic en la primera opción, Div (ver Figura).

6. En el cuadro de diálogo Insertar Div, deje "En el punto de inserción" seleccionado en el menú emergente Insertar, deje
en blanco el cuadro de texto Clase y escribe CONTENEDOR en el cuadro de texto ID (vea la Figura)

7. Haga clic en Aceptar.

El nuevo <div> aparece en su página, rodeado de una línea de puntos en la vista Diseño y, con un poco de texto de
marcador de posición en el interior (ver figura).

El <div> y el texto de marcador de posición aparecen tanto en las vistas Código y Diseño.

Nota: Si no puede ver la línea de puntos que rodea el <div>, seleccione Ver > OPCIONES DE VISTA DISEÑO > Ayudas
visuales, y asegúrese de que hay una marca de verificación junto Contornos de diseño CSS. Al hacer clic en cualquiera de
las opciones en el submenú Ayudas visuales que activa y desactiva.
Dreamweaver
8. El texto de marcador de posición se debe seleccionar de forma automática cuando el <div> se inserta, así que presione
Eliminar para eliminarlo. La línea de puntos del <div> aún debe ser visible en la vista Diseño, y usted debería ver el
punto de inserción entre la apertura y cierre <div> etiquetas en la vista Código, como se muestra en la Figura.

9. Si elimina demasiado, pulse Ctrl + Z para deshacer el paso anterior y vuelva a intentarlo.
10. En el panel Insertar, haga clic en header
11. El cuadro de diálogo Insertar header tiene las mismas opciones que Div CONTENEDOR. Deje el menú
emergente Insertar en "En el punto de inserción," y escribe ARRIBA en la parte superior del cuadro de texto ID. A
continuación, haga clic en Aceptar para insertar las etiquetas <header> y el texto de marcador de posición.

12. Pulse Suprimir para eliminar el texto del marcador y escriba Lima ciudad de Reyes para reemplazarlo.
13. Seleccionar el texto escrito y haga clic en HEADING 1 en el menú INSERTAR , como se muestra en la Figura.
Dreamweaver

14. En el código subyacente, Dreamweaver ajusta el texto en las etiquetas <h1>, y el título debe aparecer en texto grande.
15. A continuación, clic en Navigation en el panel Insertar y configure como se indica:

17. haga clic en Aceptar.

Nota: El ID no puede contener espacios ni caracteres especiales.

18. BORRE EL TEXTO “COLOCAR QUI EL CONTENIDO PARA ID “MAINNAV”

Dreamweaver

19. Haga clic en Lista sin ordenar y luego li (elemeto de la lista) en el panel Insertar y luego clic en li (de lista).

20. ESCRIBE "INICIO".

21. UBICA EL CURSOR DESPUES DEL ULTIMO </li>

22. Haga clic en li (elemeto de la lista)

Dreamweaver

23. y escriba: HISTORIA.

24. Repita el paso anterior para agregar los textos: CULTURA, DEPORTE Y POLITICA
La página debería parecerse a la Figura (Compruebe cuidadosamente que los <ul> etiquetas se anidan dentro de la
apertura y cierre de <nav> etiquetas.)
Dreamweaver
24. El siguiente elemento será la Imagen de la Plaza mayor de Lima. Haga clic en Div del panel Insertar, y el uso de los
valores que se
muestran en la
Figura

25. SE VERA:

26. BORRE EL TEXTO Y Haga clic DENTRO DEL DIV PLAZA MAYOR PARA COLOCAR EL PUNTO DE
INSERCION ALLI, VEA EL EJEMPLO
Dreamweaver
27. LUEGO HAGA CLIC EN article
en el panel Insertar. El <articulo> elemento va dentro de
PLAZAMAYOR <div>, NO LLEVA NOMBRE DE ID

SE VERA:

28. Haga clic en el artículo de nuevo. Este próximo <articulo> tiene que ir después de PLAZAMAYOR <div> , y
debe tener el ID con el nombre: PRINCIPAL

APARECE:
Dreamweaver

27. A continuación, agregue un <aside> elemento haciendo clic Aparte del panel Insertar, y el uso de los siguientes
ajustes:
 Insertar: Después de la etiqueta <article id="principal">
 ID: barra lateral

28. Por último, añadir un <footer (Pie de Página)> elemento haciendo clic en Pie de página en el panel Insertar y
utilizar los siguientes valores:
 Insert: Después de la etiqueta <aside id="barra lateral">

El <footer> no necesita un ID, por lo que dejar el campo de texto ID en blanco.

29. Guarde la página.
Dreamweaver
El código HTML subyacente en la vista Código debería verse como se muestra en la Figura. Compare el archivo
cuidadosamente con la figura. Dreamweaver sangra el código para mostrar los elementos que están anidados dentro de
otros.
VISTA DISEÑO:

VISTA CODIGO:

La estructura básica en HTML de la página se ha completado.

INSERTANDO LOS ARCHIVOS DE TEXTO A LOS ARTICULOS

1. Abra el archivo LIMA.
2. Seleccione el párrafo La Plaza Mayor de Lima, y copiarlo en el portapapeles.
Dreamweaver
3. En Dreamweaver, seleccione el texto del marcador en la primera <article> elemento, como se muestra en la Figura

4. Seleccione Edición> Pegado especial

5. Seleccione el segundo o tercer botón de opción en el cuadro de diálogo Pegado especial, haga clic en Aceptar para
pegar el texto con la estructura en el <article>.

APARECE:
Dreamweaver

6. COPIE EL ARTICULO HISTORIA y SUS tres párrafos siguientes Y PEGUELO EN EL ARTICULO ID

PRINCIPAL
Dreamweaver

7. Haga lo mismo con la barra lateral <aside>, copiar y pegar en texto de LA COLONIA".

DEBE APARECER ASI:

VISTA DISEÑO:
Dreamweaver

VISTA CODIGO:
Dreamweaver

VISTA PREVIA EN TIEMPO REAL:

Dreamweaver

TRABAJAR CON ENTIDADES HTML

BORRA EL TEXTO QUE ESTA EN FOOTER Y EN EL MENU INSERTAR, CLIC EN EL ICONO

APARECE:

Y LUEGO CLIC EN: APARECE: APARECE

Escriba “Lima Ciudad Virreynal EN EL SIGLO XXI.”

5. Guarde la página.
INSERCIÓN DE UNA IMAGEN SIN UN TÍTULO

La imagen de la plaza de armas necesita ser anidado dentro de PLAZAMAYOR <div>, pero fuera de
la <article> elemento que contiene el texto PLAZA MAYOR DE LIMA.
2. UBICA EL CURSOR SEGÚN LA IMAGEN

3. En el panel Insertar haga clic en Imagen. Si aparece un submenú, seleccione Imagen MAYOR.
4. La imagen se inserta después de la <article>
Dreamweaver

El inspector de propiedades muestra los detalles de la imagen, como la anchura y la altura.

5. Los campos de texto W y H muestran que la imagen es 1000 píxeles de ancho y 547 píxeles de alto

INSERCIÓN DE UNA IMAGEN CON UNA LEYENDA

En esta sección, podrás insertar una imagen con una leyenda entre los párrafos segundo y tercero de <article> principal
utilizando el HTML5 <figure> y <figcaption> elementos.
1. En la vista Diseño, desplácese hacia abajo para el PRINCIPAL <article> , que comienza con
"HISTORIA"
2. Haga clic en cualquier lugar dentro del párrafo segundo después del título.
3. Seleccione la <p> etiqueta del selector de etiquetas

4. Pulse la tecla de flecha hacia la derecha una vez para mover el punto de inserción entre el cierre </p> tag del segundo
párrafo y la apertura <p> etiqueta del tercer párrafo.
Dreamweaver
5. Haga clic en figure (es el último punto). Esto inserta los<figure> y <figcaption> elementos con texto de
marcador de posición en cada elemento.

6. El texto de marcador de posición para el <figure> elemento debe seleccionarse automáticamente. Pulse Eliminar
para eliminarlo.

7. Panel Insertar y haga clic en Imagen.

8. Seleccione plaza antigua.jpg en la carpeta de imágenes para insertar en la página web.
Dreamweaver
9. Seleccione el texto de marcador de posición en el <figcaption> elemento y reemplazarlo con PLAZA DE ARMAS
DEL SIGO PASADO.

SE VERA: