Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Lab5Maquetacion Web1 html5css

    Încărcat de

    Ana Luz Cotrado
    7 vizualizări10 pagini
    maquetación web

    Titlu original

    Lab5Maquetacion_web1_html5css

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    maquetación web

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    7 vizualizări10 pagini

    Lab5Maquetacion Web1 html5css

    Încărcat de

    Ana Luz Cotrado
    maquetación web

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 10

    INTRODUCCION AL DESARROLLO WEB

    Lab5 Maquetación Web1 con HTML5&CSS


    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.

    Se trata de un diseño sencillo, pero en el que se encuentran elementos distintos y variados con los que
    INTRODUCCION AL DESARROLLO WEB

    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

    El cuerpo de la página <body>


    INTRODUCCION AL DESARROLLO WEB

    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 mostrado agragando los estilos necesarios ala pagina de estilos para cada elemento o
    etiqueta html

    Definiendo 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, 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 queda de la siguiente manera:
    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.

    Finalmente probar el diseño debe quedar como se pide.

    S-ar putea să vă placă și