Ayuda ejercicios unidad 18: Diseño de página. Maquetación web



Solución al ejercicio 1

Partimos del archivo ejerciciomaquetacion.htm, abierto con Dreamweaver CS5.

Tras examinar la maquetación que queremos obtener, observamos elementos destacados: un elemento contenedor, que contiene toda la página, dándole un ancho fijo. Una cabecera con el título y dos enlaces. Una columna izquierda, con el menú. Otra columna principal, con el contenido de la página. Y por último, un pie de página.

Comenzamos creando esos elementos, y dándoles un id o clase:

  1. Selecciona todo el texto de la página.
  2. Ve al menú Insertar y selecciona Objetos de diseñoEtiqueta Div.
  3. En el cuadro de diálogo, debe estar seleccionado Ajustar alrededor de la selección. Asígnale el Id container y pulsa Aceptar.
  4. Selecciona los dos párrafos iniciales, y el encabezado.
  5. Ve al menú Insertar y selecciona Objetos de diseñoEtiqueta Div.
  6. En el cuadro de diálogo, debe estar seleccionado Ajustar alrededor de la selección. Asígnale el Id header y pulsa Aceptar.
  7. Selecciona la lista con los enlaces del menú.
  8. Ve al menú Insertar y selecciona Objetos de diseñoEtiqueta Div.
  9. En el cuadro de diálogo, debe estar seleccionado Ajustar alrededor de la selección. Asígnale el Id colizq y pulsa Aceptar.
  10. Selecciona el texto del contenido de la página, desde el encabezado 2 (Ejercicios de maquetación), excepto el último párrafo.
  11. Ve al menú Insertar y selecciona Objetos de diseñoEtiqueta Div.
  12. En el cuadro de diálogo, debe estar seleccionado Ajustar alrededor de la selección. Asígnale el Id content y pulsa Aceptar.
  13. Selecciona el último párrafo.
  14. Ve al menú Insertar y selecciona Objetos de diseñoEtiqueta Div.
  15. En el cuadro de diálogo, debe estar seleccionado Ajustar alrededor de la selección. Asígnale el Id footer y pulsa Aceptar.

Una vez con las capas creadas, es hora de darles los estilos correspondientes.

Div #content

  1. Crea una nueva regla de estilo para el id. Puedes hacerlo desde el panel Estilos CSS.
  2. En las propiedades de Cuadro, para limitar la página a un ancho fijo, le asignamos un ancho (width) de 960px.
  3. Para que quede centrado, dale un margen (margin) lateral auto, y superior e inferior 0.
  4. Además, para conseguir la apariencia que queremos dale un padding: 10px 20px, y un color de fondo #CF3B19.

Div #header

  1. En este caso, la cabecera no requiere de ningún estilo de maquetación. Si observas verás que uno de los párrafos tiene asignada la clase link. Crea una regla CSS para que esta clase se muestre flotante a la derecha (float: right;).

Div #colizq

  1. Crea una nueva regla de estilo para el id.
  2. Para que se muestre como una columna a la izquierda, desde las propiedades de Cuadro, dale un ancho fijo de 180px y ponlo flotante a la izquierda (width: 180px; float: left;).

Div #content

  1. Crea una nueva regla de estilo para el id.
  2. Para que se muestre como una columna a la izquierda, desde las propiedades de Cuadro, dale un ancho fijo de 780px, que es el epsacioq ue nos queda, y ponlo flotante a la izquierda (width: 780px; float: left;).
  3. Para completar el estilo, dale color de fondo blanco (#fff) y tamaño de la fuente al 90%.
  4. Queremos aplicarle también un padding. Pero ocurre que el padding forma parte del ancho. Por ello, si lo añadimos, tendremos que restarlo del ancho de 780px, o no nos cabrá. Por eso, lo más cómodo es crear un segundo div, y darle a él el padding. Envuelve todo el contenido del div #content en una nueva Etiqueta Div, y addígnale la clase padd y crea la regla de etsilo para que muestre un padding: 10px;

Div #footer

  1. Crea una nueva regla de estilo para el id.
  2. Como estamos trabajando con columnas flotantes, haz que este div rompa ese flotamiento, con la propiedad clear: both;
  3. Para compleatr el estilo, centra el texto (text-align: center;), dale un padding (padding: 10px 5px 5px;) y reduce un poco el tamaño de la fuente (font-size: 80%;).

   Inicio    







Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.