proyecto

Proyecto 2. Diseño de un sitio Web sobre reglas CSS.
1. Recopilar información sobre el uso de las reglas CSS y agruparlas por su uso, posteriormente diseñaremos un menú de navegación. Ejemplos:

Posible agrupación número 1. Por formatos.
Fuentes y colores: formato del contenido de las formas rectangulares que se crean con HTML
Márgenes y bordes: formato de los propios cuadros.
Layout:modificar la posición de los cuadros en la página Web.

Posible agrupación número 2. Por elementos.
Formato a etiqueta.
Formato a elemento que tiene ID.
Formato a elemento que tiene CLASS.
Formato a elemento combinado.

Posible agrupación número 3. Según categorías que maneja Dreamweaver.
Tipo (respecto al tipo de letra-fuente)
Background (respecto al fondo)
Block (respecto al texto de unespacio rectangular, de una capa por ejemplo).
Box (respecto a los márgenes del espacio rectangular, de una capa por ejemplo)
Border (respecto a bordes)
List (respecto a listas)
Positioning (Respecto a la ubicación en la pantalla)
Extensions
Transition
Language

2. Crear un sitio Web en Dreamweaver CS6 y proporciona la información correspondiente.
Presionar Menú Site (sitio) -> New Site(Nuevo sitio)

Site Name (Nombre del sitio): proyecto3 CSS
Local Site Folder (Carpeta local para el sitio): C:\Users\personal\Documents\proyecto3_CSS

Presionar Save (Guardar).

Verificar que en el panel Files (Archivos) aparezca el sitio proyecto3 CSS.


3. Crear carpetas del sitio Web pero desde el panel Files de Dreamweaver, de tal manera que tenga algo como esto:




4. Crear unarchivo nuevo HTML y guardarlo con el nombre de index en la carpeta proyecto3_CSS.
:

5. Desde la vista Design (Diseño): Especificar las propiedades de la página Web.

Presionar el botón (Propiedades de la página) que se localiza en el panel propiedades, y especificar lo siguiente:

Categoría Title/Encoding (Título/Codificación) ->
Title (Título): Uso de las reglas CSS.
DocumentType (Tipo de documento): HTML5
Encoding (Codificación): UTF8



6. Analizar el código HTML generado por Dreamweaver CS6





Uso de las reglas CSS






Recuerda que:
Especifica que se trata de un documento HTML.
Especifica la tabla de caracteres que usará el navegador para mostrar la página Web. utf-8 permite visualizar correctamente los acentos.




7. Crea unarchivo de tipo CSS y guárdalo con el nombre de estilos en la carpeta CSS de tu proyecto3CSS.


Verifica que aparezca en tu proyecto de la siguiente manera:


-
8. Empieza definiendo reglas en tu archivo estilos.css de tal manera que se apliquen al archivo index.html

Agrega una línea de código en tu archivo index.html que especifique la relación entre index.html y estilos.css

Arribade
Agregar:


En tu archivo estilos.css define una regla para la etiqueta BODY que especifique un color de fondo.
BODY {
background-color:#09F;
}

Hasta el momento tendrás una página con fondo de color y título “Uso de las reglas CSS”





9. Maquetar la página Web con capas , definiendo solo el ancho, ya que el alto se ajustará automáticamente de acuerdo al contenido.CONTENEDOR (1024px de ancho)

CABECERA (1000px de ancho )


NAVEGACION (1000px de ancho )


CUERPO (1000px de ancho)






PIE (1000 px de ancho)




Desde la vista Design (Diseño) -> Panel Insert (Insertar) -> Categoría Layout () -> Insert Div Tag (Insertar etiqueta DIV).




Para contenedor se elige: At insertion point (En el punto de inserción)


Para cabecerase elige: After start of tag (Después del inicio de la etiqueta )

Para navegacion se elige: After tag (Después de la etiqueta )



Para cuerpo se elige después de la etiqueta

Para pie se elige después de la etiqueta


10. Analizar el código generado por Dreamweaver:

Content for id "cabecera" Goes Here
Content for id "navegacion" Goes Here
Content for id "cuerpo"...