Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Ejemplos de Maquetacion

    Загружено:

    Jonathan Azaña Ramos
    601 просмотров10 страниц
    ejemplos de Maquetacion en word

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    ejemplos de Maquetacion en word

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    601 просмотров10 страниц

    Ejemplos de Maquetacion

    Загружено:

    Jonathan Azaña Ramos
    ejemplos de Maquetacion en word

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 10

    CAPAS Y MAQUETACION EN PAGINAS WEB

    http://publiceuta.com/maqueta/maqueta.html
    MANUAL DE MAQUETACIN DE PGINAS WEB CON CSS
    Hasta hace poco la maquetacin de una pagina web se haca mediante tablas html.
    Actualmente la maquetacin se realiza con hojas de estilo en cascada (css), separando
    completamente el contenido del archivo html de las definiciones de estilo que se
    guardarn en un archivo .css externo que es enlazado por los documentos html del sitio
    web.
    css puede ahorrar mucho tiempo de trabajo. Para cambiar, por ejemplo, el color de fondo
    de un sitio web compuesto por 500 pginas, con css bastara una pequea modificacin
    en la hoja de estilo. Sin css habra que cambiar de forma manual los 500 documentos
    html.
    El archivo css es cargado por los navegadores en el cach con lo que disminuye el tiempo
    de respuesta.
    DISEO CON DOS COLUMNAS: IZQUIERDA CON ANCHO FIJO DE 300 px Y
    DERECHA VARIABLE
    En este diseo a dos columnas se establece una columna a la izquierda con un ancho fijo
    de 300 px, en la que se podra incluir un men de navegacin, y otra columna a la
    derecha de ancho variable para que se adapte a la configuracin del monitor o pantalla.
    La estructura de esta pgina sera la siguiente:
    - cabecera o caja superior (color verde) donde puede colocarse el logotipo o imagen del
    sitio web.
    - cuerpo, con dos columnas que llamaremos izquierda (color rojo) y derecha (color azul).
    - pie o caja inferior (color amarillo).

    El cdigo css usado es el siguiente:

    maquetas.css
    #contenedor2
    {
    width:80%;
    background-color: #f5f5f5; text-align: center;
    margin: 0 auto 0 auto;
    font-family:Verdana;
    }
    #cabecera2
    {
    width:100%;
    background-color: green;
    text-align: center;

    overflow:hidden;
    padding: 0px 0px0px0px;
    margin: 0 auto 10px auto;
    }

    #cuerpo2{
    width: 100%; margin: 0px auto 0px auto; background-color: #f5f5f5; overflow: hidden; }
    #izquierda2{
    float: left;
    width: 300px;
    background-color: red;
    font: 10pt Verdana;
    text-align: center;
    }
    #derecha2{
    margin: 0px 0px0px 320px;
    background-color: #eeffff;
    font: 12pt Verdana;
    text-align: center;
    }
    #pie2{
    background-color: yellow;
    margin: 10px 0 0 0; padding: 0 0 0 0px;
    text-align:center;
    clear: both;
    font: 8pt Verdana; }

    El cdigo html usado es el siguiente:


    < div id="contenedor2">
    < div id="cabecera2">
    < /div>

    < div id="cuerpo2">


    <div id="izquierda2">
    </div>
    <div id="derecha2">
    </div>
    < /div>
    <div id="pie2">
    </div>
    < /div>

    <head>
    <STYLE Type="text/css">
    @import URL("maquetas.css");
    </STYLE>
    </head>
    <body>
    <div id="contenedor2">
    <div id="cabecera2"> LA CABECERA </div>
    <div id="cuerpo2">
    <div id="izquierda2">
    LA PARTE IZQUIERDA
    </div>
    <div id="derecha2">
    LA PARTE DERECHA
    </div>
    </div>
    <div id="pie2">
    EL PIE
    </div>
    </div>

    </body>

    DISEO CON TRES COLUMNAS


    Los diseos que presentamos a continuacin son muy simples, constan de cabecera, tres
    columnas y un pie de pgina. A estos elementos bsicos pueden aadirse otros como:
    elementos de navegacin (men, breadcrumbs o migas de pan), espacios para
    anuncios
    ,etc.
    Para ser didcticos utilizaremos colores de fondo en las cajas y dividiremos la pgina de
    forma
    esquemtica
    en:
    - cabecera o caja superior (color amarillo) donde puede colocarse el logotipo o imagen del
    sitio
    web.
    - cuerpo, con tres columnas que llamaremos izquierda (color rojo), centro (color verde) y
    derecha
    (color
    azul).
    - pie o caja inferior (color marrn).

    Diseo 1: columnas izquierda y central con ancho fijo de 250 px y 500 px,
    respectivamente, y columna derecha de ancho variable para que se adapte
    a la configuracin del monitor.
    Diseo 2: columna izquierda de ancho fijo de 180 px y columnas central y
    derecha de ancho variable para adaptarse a la configuracin del monitor.
    MANUAL DE MAQUETACIN DE PGINAS WEB CON CSS

    DISEO CON TRES COLUMNAS: IZQUIERDA DE ANCHO FIJO, CENTRO Y DERECHA


    DE ANCHO

    VARIABLE
    En este diseo a tres columnas la columna de la izquierda tiene un ancho fijo de 180 px y
    las columnas centro y derecha tienen un ancho variable para que se adapten a la
    configuracin del monitor o pantalla.
    La estructura de esta pgina sera la siguiente:
    - cabecera o caja superior (color amarillo) donde puede colocarse el logotipo o imagen del
    sitio web.
    - cuerpo, con tres columnas que llamaremos izquierda (color rojo), centro (color verde) y
    derecha (color azul).
    - pie o caja inferior (color marrn).
    A estos elementos bsicos pueden aadirse otros como: elementos de navegacin (men,
    breadcrumbs o migas de pan), espacios para anuncios ,etc.

    El cdigo css usado es el siguiente:


    #contenedor2{
    width:998 px;
    background-color: #ffffff;
    text-align: center;
    margin: 0 auto 0 auto;
    font-family:Verdana;
    }
    #cabecera2{
    width:100%;
    background-color: yellow;
    text-align: center;
    overflow:hidden;
    padding: 0px 0px0px0px;

    margin: 0 auto 10px auto; }


    #cuerpo2{
    width: 100%;
    margin: 0px auto 0px auto;
    background-color: #f5f5f5;
    overflow: hidden; }
    #izquierda2{
    float: left;
    width: 180px;
    background-color: red;
    font: 10pt Verdana;
    text-align: center; }

    #centro2{
    float: left; width: 60%;
    margin: 0px 0px0px 10px;
    background-color: green;
    font: 12pt Verdana;
    text-align: justify; }
    #derecha2{
    float: left; width: 18%; margin: 0px 0px0px 10px;
    background-color: #eeffff;
    font: 10pt Verdana;
    text-align: center; }
    #pie2{
    background-color: brown;
    margin: 10px 0 0 0; padding: 0 0 0 0px;

    text-align:center; clear: both;


    font: 8pt Verdana;
    color: yellow;
    }

    El cdigo html usado es el siguiente:


    <div id="contenedor2">
    <div id="cabecera2">< /div>
    <div id="cuerpo2">
    <div id="izquierda2">< /div>
    <div id="centro2">< /div>
    <div id="derecha2">< /div>
    </div>
    <div id="pie2">
    < /div>< /div>
    http://www.lawebera.es/comunidad/articulos/programacion/diseno-de-menuscon-css-avanzado.php

    Вам также может понравиться