Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 3 vistas

    Ejercicio 3

    Cargado por

    glscastor.27

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Ejercicio 3

    Cargado por

    glscastor.27
    3 vistas7 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    3 vistas7 páginas

    Ejercicio 3

    Cargado por

    glscastor.27

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    de 7

    Guía # 5: Repaso HTML5 y CSS3.

    Ejercicio 3: Página web adaptable usando archivos separados de estilos según la dimensión de la pantalla
    del dispositivo utilizado para visualizar la página. Se trabajan cuatro dimensiones: a) pantallas superiores
    a los 1280px, b) pantallas menores a los 769px y superiores a los 769px, c) pantallas menores o iguales a los
    760px y meyores a los 481px, y d) pantallas menores o iguales a los 480px. En cada caso se aplicará una hoja
    de estilos distinta denominadas: extrabig.css, big.css, medium.css y mini.css, respectivamente.

    Script html: inicio.html


    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diseño Web Adaptable</title>
    <link rel="stylesheet" media="screen" href="css/base.css">
    <link rel="stylesheet" media="screen" href="css/color.css">
    <link rel="stylesheet" media="screen and (min-width: 1281px)" href="css/extrabig.css">
    <link rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1280px)"
    href="css/big.css">
    <link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 768px)"
    href="css/medium.css">
    <link rel="stylesheet" media="screen and (max-width: 480px)" href="css/mini.css">
    </head>
    <body>
    <header>
    <h1>El título de sitio web</h1>
    <h2 class="display-extrabig">Extra grande</h2>
    <h2 class="display-big">Grande</h2>
    <h2 class="display-medium">Mediano</h2>
    <h2 class="display-mini">Pequeño</h2>
    </header>
    <div id="wrapper">
    <nav id="main-nav">
    <h2>Mi menú</h2>
    <ul class="menu display-extrabig display-big display-medium">
    <li>
    <a href="#" title="Inicio">Inicio</a>
    </li>
    <li>
    <a href="#" title="Institucional">Institucional</a>
    </li>
    <li>
    <a href="#" title="Carreras">Carreras</a>
    </li>
    <li>
    <a href="#" title="Nuevo Ingreso">Nuevo Ingreso</a>
    </li>
    <li>
    <a href="#" title="Contacto">Contacto</a>
    </li>
    </ul>
    <select class="display-mini">
    <option value="Inicio">Inicio</option>
    <option value="Institucional">Institucional</option>
    <option value="Carreras">Carreras</option>
    <option value="Nuevo Ingreso">Nuevo Ingreso</option>
    <option value="Contacto">Contacto</option>
    </select>
    </nav>
    <section id="main-section">
    <h2>El contenido principal</h2>
    <article>
    <h3>
    <a href="#" title="Contenido uno">Contenido uno</a>

    Lenguajes Interpretados en el Cliente 25


    Guía # 5: Repaso HTML5 y CSS3.

    </h3>
    <p class="display-extrabig display-big display-medium">
    La Universidad Don Bosco es una institución educativa de nivel superior,
    de utilidad pública, apolítica, de inspiración cristiana y sin fines de
    lucro.
    Pertenece y es respaldada por la Institución Salesiana, por fundación y
    arisma.
    </p>
    </article>
    <article>
    <h3>
    <a href="#" title="Contenido dos">Contenido dos</a>
    </h3>
    <p class="display-extrabig display-big display-medium">
    La actividad académica de la Universidad encuentra una base de soporte
    y
    desarrollo dinámico a través de una serie de Escuelas y Departamentos
    especializados que garantizan la calidad educativa de sus programas.
    </p>
    </article>
    <article>
    <h3>
    <a href="#" title="Contenido tres">Contenido tres</a>
    </h3>
    <p class="display-extrabig display-big display-medium">
    Con la apertura del Centro de Estudios de Postgrados (CEP), la
    Universidad Don Bosco promueve un nuevo horizonte de las posibilidades
    educativas con el propósito de responder objetivamente a necesidades
    concretas del país.
    </p>
    </article>
    <article>
    <h3>
    <a href="#" title="Contenido cuatro">Contenido cuatro</a>
    </h3>
    <p class="display-extrabig display-big display-medium">
    El proceso de inscripción para el ciclo 01-2014 inicia a partir del 17
    de septiembre del 2013. El proceso inicia con la adquisición del
    paquete
    informativo, luego por una asesoría en la oficina de Nuevo Ingreso y
    la
    presentación del cuestionario socio-económico en el Departamento de
    Gestión
    Social y Estudiantil.
    </p>
    </article>
    <article>
    <h3>
    <a href="#" title="Contenido cinco">Contenido cinco</a>
    </h3>
    <p class="display-extrabig display-big display-medium">
    Universidad Don Bosco<br>
    Departamento de Publicidad y Relaciones Públicas<br>
    relacionespublicas@udb.edu.sv<br>
    Tel. 2251-8200 ext. 1620 <br>
    </p>
    </article>
    </section>
    <aside class="display-extrabig display-big">
    <ul id="menusec">
    <li>
    <a href="#" title="Proyección Social">Proyección Social</a>
    </li>
    <li>
    <a href="" title="Investigación">Investigación</a>

    Lenguajes Interpretados en el Cliente 26


    Guía # 5: Repaso HTML5 y CSS3.

    </li>
    <li>
    <a href="#" title="CITT">CITT</a>
    </li>
    <li>
    <a href="#" title="Biblioteca">Biblioteca</a>
    </li>
    </ul>
    </aside>
    </div>
    <footer>
    <p>
    Universidad Don Bosco © Derechos reservados 2013. Tel. (503)2251-8200.
    Apartado postal: 1874.
    </p>
    <select class="display-mini">
    <option value="Inicio">Inicio</option>
    <option value="Institucional">Institucional</option>
    <option value="Carreras">Carreras</option>
    <option value="Nuevo Ingreso">Nuevo Ingreso</option>
    <option value="Contacto">Contacto</option>
    </select>
    </footer>
    </body>
    </html>

    Hoja de estilos 1: base.css


    .display-extrabig {
    display: none;
    }

    .display-big {
    display: none;
    }

    .display-medium {
    display: none;
    }

    .display-mini {
    display: none;
    }

    aside ul,
    nav ul {
    list-style: none;
    padding-left: 10px;
    }

    .menu {
    padding-left: 0;
    }

    Hoja de estilos 2: color.css


    body {
    color: #000;
    }

    nav a, nav a:link {


    color: #fff;
    text-decoration: none;
    }

    Lenguajes Interpretados en el Cliente 27


    Guía # 5: Repaso HTML5 y CSS3.

    nav a:visited {
    color: #dcdcdc;
    text-decoration: none;
    }

    nav a:active {
    color: #fc3;
    text-decoration: none;
    }

    nav a:hover {
    color: #ff0;
    text-decoration: underline;
    }

    header {
    background-color: #7094FF;
    }

    header h1 {
    color: #fff;
    }

    header h2 {
    color: #fff;
    }

    nav {
    background-color: #00C24E;
    }

    section {
    background-color: #B061FF;
    }

    #main-section article h3 a {
    color: #e0e0e0;
    }

    #main-section article h3 a:hover {


    color: #fff;
    }

    aside {
    background-color: #FF5757;
    }

    aside a, aside a:link {


    color: #ff6;
    text-decoration: none;
    }

    aside a:visited {
    color: #dcdcdc;
    text-decoration: none;
    }

    aside a:active {
    color: #C28547;
    text-decoration: none;
    }

    aside a:hover {
    color: #75D1D1;
    text-decoration: underline;

    Lenguajes Interpretados en el Cliente 28


    Guía # 5: Repaso HTML5 y CSS3.

    footer {
    background-color: #FF8B3D;
    padding: 8px 6px;
    }

    footer p {
    color: #e9e9e9;
    }

    Hoja de estilos 3: extrabig.css


    .display-extrabig {
    display: inherit !important;
    }

    header, footer, #wrapper {


    clear: both;
    margin-left: auto;
    margin-right: auto;
    max-width: 1800px;
    width: 90%;
    }

    header h1 {
    font-size: 2.2em;
    text-align: center;
    }

    header h2 {
    font-size: 1.6em;
    text-align: center;
    }

    p.display-extrabig {
    font-size: 0.9em;
    text-align: justify;
    }

    .menu ul li {
    display:block;
    padding: 6px 10px;
    }

    #main-nav {
    float: left;
    max-width: 240px;
    padding-left: 10px;
    width: 19%;
    }

    #main-section {
    float: left;
    max-width: 1280px;
    padding: 2px 8px;
    width: 64%;
    }

    aside.display-extrabig {
    float: right;
    max-width: 280px;
    width: 14%;
    }

    Lenguajes Interpretados en el Cliente 29


    Guía # 5: Repaso HTML5 y CSS3.

    #menusec li {
    display: block;
    padding: 6px 2px;
    }

    Hoja de estilos 4: big.css


    .display-big {
    display: inherit !important;
    }

    header, footer, #wrapper {


    clear: both;
    margin-left: auto;
    margin-right: auto;
    max-width: 1020px;
    width: 86%;
    }

    h1, h2 {
    text-align: center;
    font-size: 1.4em;
    }

    p.display-big {
    font-size: 0.9em;
    text-align: justify;
    }

    .menu ul li {
    display:block;
    padding: 4px 8px;
    }

    #main-nav {
    float: left;
    max-width: 280px;
    padding-left: 10px;
    width: 18%;
    }

    #main-section {
    margin-left: 20%;
    max-width: 1024px;
    padding: 16px 20px;
    width: 76%;
    }

    aside.display-big {
    width: 100%;
    }

    Hoja de estilos 5: medium.css


    .display-medium {
    display: inherit !important;
    }

    body {
    font-family: Arial,sans-serif;
    font-size: 18px;
    }

    .menu li {
    display: inline-block;

    Lenguajes Interpretados en el Cliente 30


    Guía # 5: Repaso HTML5 y CSS3.

    padding: 6px 10px;


    }

    #main-nav {
    width: 100%;
    }

    select.display-mini {
    font-size: 1.2em;
    width: 100%;
    }

    Hoja de estilos 6: mini.css


    .display-mini {
    display: inherit !important;
    }

    h1, h2 {
    font-size: 1.25em;
    }

    body {
    font-family: "Lucida Sans",sans-serif;
    font-size: 1.1em;
    }

    select.display-mini {
    font-size: 1.25em;
    }

    Lenguajes Interpretados en el Cliente 31

    También podría gustarte