Scribd Logo
Upload

Welcome to Scribd!

  • Lab5Maquetacion Web1 Css

    Uploaded by

    Jose Luis
    39 views10 pages
    fsdfsdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    fsdfsdf

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    39 views10 pages

    Lab5Maquetacion Web1 Css

    Uploaded by

    Jose Luis
    fsdfsdf

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    INTRODUCCION AL DESARROLLO WEB

    Lab5 Maquetación Web1 con HTNL5CSS


    Maquetar una página Web utilizando la etiquetas semánticas de HTML5 y estilos
    CSS.
    En el Laboratorio vamos a realizar un ejemplo de maquetación de una página web utilizando únicamente
    hojas de estilo en cascada (CSS), separando completamente el contenido del archivo HTML de las
    definiciones del aspecto, que se guardarán en un archivo de estilos .css. El ejemplo lo realizaremos paso a
    paso, partiendo de una imagen diseñada previamente con un programa de edición gráfica como Photoshop.

    Para desarrollar el presente laboratorio debe crear un sitio Lab5MaquetaWeb1html5CSS en SublimeText o


    Dreamweaver y guarde allí todos los archivos del presente laboratorio.

    Imágenes de partida

    Podemos ver la imagen que hemos creado y que vamos a maquetar lo más parecido posible usando CSS.
    INTRODUCCION AL DESARROLLO WEB

    Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que
    trabajar.

    De esta imagen hemos extraído algunos gráficos, que utilizaremos a la hora de maquetar el diseño y están
    en el archivo imageneslabmaq1.zip que se adjunta al presente

    Desarrollo de la página html y la hoja de estilos css

    Vamos a generar los archivos HTML y CSS a la vez, pero paso a paso, de modo que podamos explicar las
    etiquetas y estilos que hemos utilizado para cada parte de la página.

    Paso1.- Creamos la distribución de la página con etiquetas semánticas de HTML5

    Como primer paso creamos un página html con el nombre index1.htm y otra página de estilos con el
    nombre estilo1.css
    INTRODUCCION AL DESARROLLO WEB

    El cuerpo de la página <body>

    Estilos css
    INTRODUCCION AL DESARROLLO WEB
    INTRODUCCION AL DESARROLLO WEB

    Paso2.- Crear el diseño como se muestra


    Copiamos el archivo index1.htm como index2.htm igual estilos1.css como estilos2.css y trabajamos para el
    obtener el diseño

    Ahora trabajamos en la hoja de estilos, en la declaración de estilos CSS, para el cuerpo de la página. También
    se definen unos márgenes y el alineamiento del texto, en este caso centrado, para que el contenido de la
    página aparezca en el centro (esto es necesario para Internet Explorer, el centrado y otros navegadores se
    realiza en la capa principal con el atributo "margin" definido como "auto").
    Además se definen otros atributos para el cuerpo de la página, que luego heredarán otros elementos, como
    el tipo de letra o el color del texto.
    INTRODUCCION AL DESARROLLO WEB

    La hoja de estilos css para cada elemento de la página:


    INTRODUCCION AL DESARROLLO WEB
    INTRODUCCION AL DESARROLLO WEB
    INTRODUCCION AL DESARROLLO WEB
    INTRODUCCION AL DESARROLLO WEB

    La capa contenedor
    Generalmente, se utiliza una capa principal, a la que hemos llamado contenedor. Dentro de esta capa se
    colocan todos los elementos que va a tener la página.

    La cabecera de la página

    La imagen de la parte de arriba de la página la vamos a colocar en un único archivo gráfico. Es lo más
    cómodo para este diseño, pues la cabecera no tiene otro motivo que decoración.

    Vemos que es una simple imagen, pero atención, que tenemos que colocar el </div> a continuación de
    <img> sin ningún espacio ni salto de línea, porque si no, Internet Explorer, nos introducirá un pequeño
    márgen debajo de la imagen, que queremos evitar.

    Los atributos de estilo definidos para la cabecera son las dimensiones de la capa, que queremos que sean las
    mismas que las de la imagen. Aunque en este caso podríamos habernos ahorrado definir esos valores
    porque son los que se tomarían por defecto.

    You might also like