Curso de Dreamweaver CS3

Guardamos los cambios de la página anterior y creamos dos páginas más (texto2 y texto3) con el mismo texto pero manipulando las PROPIEDADES DE PÁGINA y las de los párrafos. para conseguir estos aspectos para las dos nuevas páginas:

texto2.htm

Propiedades de Página:
Fuente (Verdana, color blanco) Fondo ( color gris oscuro) H1 y H2 (Georgia, color amarillo claro)

Alineaciones:
H2 (centro), Párrafos. y H1 (Derecha)

texto3.htm

Propiedades de Página:
Fuente (Arial, color blanco) Fondo ( color azul) H1 (Arial, blanco, 30px) y H2 (Arial, color azul claro, 18px)

Alineaciones:
Párrafos. (Centro)

Visualiza un ejemplo de como quedará el Sitio "LEd Zeppelin" después de estos ejercicios

1. Abrimos el sitio "LED ZEPPELIN". Abrimos todas sus páginas.

Ha llegado el momento de incluir texto a las páginas del proyecto LED ZEPPELIN. Por suerte no tenemos que escribirlo directamente.
Abrimos el texto que corresponde a cada página y lo insertamos en la misma.

Pulsa sobre el nombre de los textos para verlos. copiarlos y pegarlos.

Una vez hayamos insertado los textos en sus correspondientes páginas pasamos a determinar los párrafos, encabezados, saltos de línea y listas que sean necesarios.
Todas las páginas tienen una estructura parecida (repasa el enlace de ayuda para ver el resultado final):

1. Aplicamos Encabezados 1 a la primera línea y Encabezado 2 los demás titulares (sólo en la pagina historia se llega a necesitar Encabezados 3)
2. El último párrafo que contiene la información del copyright está centrado.

Además, tenemos que construir las Listas Ordenadas de las páginas disco1, disco2, disco3 y disco4.
Estas listas contienen las canciones de cada disco y van a continuación del encabezado 1 de cada página.

Vamos ahora a dar propiedades a TODA LA PAGINA para otorgar una aspecto a su contenido.
Sigue estos pasos:

1. Abre la pagina historia.html, la tomaremos como cobaya para después otorgar las mismas propiedades al resto de paginas.
2. Abrimos el cuadro de PROPIEDADES DE PÁGINA.
3. Categoría ASPECTO:
   • Fuente: Verdana, 11px, color gris oscuro (#666666)
   • Margen Superior e Inferior: 10px
   • Margen Izquierdo y Derecho: 0px
4. Categoría ENCABEZADOS:
   • Fuente: Georgia
   • Encabezados 1: 40px, gris oscuro (#2C312B)
   • Encabezados 2: 20px, gris medio (#4B554C)

Eso en  lo que respecta al texto en general... pero habrá algunos pedazos que tendrán un aspecto diferente al resto.
Para ellos vamos a crear clases de texto, es decir, estilos específicos de texto:

El pie de las páginas.

En todas las paginas el último párrafo es el párrafo con la información del copyright. No es tan importante como el resto, así que, le aplicamos un aspecto especial:

1. Seleccionamos ese último párrafo.
2. Desde el panel PROPIEDADES le damos estas propiedades: Tamaño 10px
3. Se creará un estilo, por defecto, Estilo 1.
4. Cámbiale el nombre a ese estilo y denomínalo pie.
5. Aplica ese estilo al resto de últimos párrafos de las páginas..
   
   

Si queremos que todo el sitio tenga un aspecto similar debemos reproducir la mismas propiedades en el resto de páginas. Para ello tenemos, por ahora, 2 métodos:

1. Con paciencia...
   Es decir, reproducir los mismos pasos que hemos hecho en la página historia con el resto.
   Es el más seguro.
2. Copiar y pegar la etiqueta <style>
   Recuerda que las propiedades de página son ESTILOS CSS que se albergan en la etiqueta <style> que está en en HEAD. Podemos ir a la vista de código y copiar esa etiqueta (desde el principio hasta el final) y pegarla en el HEAD del resto de páginas.
   

En las páginas de los discos, donde están las listas de las canciones de cada disco vamos a desarrollar un nuevo estilo de texto para diferenciar el título de las canciones del resto.

1. Abre la pagina disco1.html
2. Selecciona TODA la lista de canciones... y aplícale el Estilo pie.
3. Ahora selecciona el titulo de una canción y aplícale estas propiedades desde el Panel Propiedades:
   Tamaño 12px, color verde (#496c00)
4. Se creará un estilo, por defecto, Estilo 1.
5. Cámbiale el nombre a ese estilo y denomínalo canción
6. Aplica ese estilo al resto de títulos de canciones.

Truco: mismas propiedades a varias páginas

Twitter Meneame Delicious Technorati Digg Facebook