Practica 1

Diseo grfico orientado a la Web
Maestra en Tecnologas de la Informtica Empresarial

MSc. Ileana Camacho Rostrn.
PRCTICA 1: CREAR UNA PLANTILLA UTILIZANDO HTML5 Y CSS3
Prctica 1: Crear una plantilla utilizando HTML5 y CSS3
PRCTICA 1: CREAR UNA

O BJETIVOS
Crear un plantilla web utilizando los elementos de HTML5 Realizar efectos visuales con CSS3 Realizar animaciones utilizando CSS3
PLANTILLA UTILIZANDO HTML5 Y CSS3
P ASOS A SEGUIR
Vamos a construir una plantilla HTML5 en conjunto con CSS3 utilizando los conocimientos adquiridos durante la presentacin terica. El resultado final debe ser el siguiente:
La estructura bsica del sitio es
Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.
2 de 9
Abra su editor HTML favorito, crea un documento html y pegue el cdigo HTML5 de la pgina:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Prctica I: Creando una plantilla</title> </head> <body> <div id="pagewrap"> <header id="header"> <h1 id="site-logo"><a href="#">Prctica 1</a></h1> </header> <nav id="menu"> <ul id="main-nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Item1</a></li> <li><a href="#">Irem2</a></li> </ul> </nav> <div id="content"> <section id="seccion"> <article class="post"> <header> <h1><a href="#">Artculo 1</a></h1> </header> Texto artculo 1 <footer><p>Comentarios (0)</p></footer> </article> <article class="post"> <header> <h1><a href="#">Artculo 2</a></h1> </header> Texto artculo 2 <footer><p>Comentarios (0)</p></footer>
3 de 9

</article> </section> <aside id="sidebar"> <h4>Barra lateral</h4> <div> <img src="http://24.media.tumblr.com/tumblr_lxb0fp6l871r9dn2io1_500.jpg" width="180" height="180" id="animacion"></div> </aside> </div> <footer id="footer"> <p>Pie de pgina</p> </footer> </div> </body> </html>
Crea un achivo nuevo llamado practica1.css A continuacin se detalla el estilo CSS de cada parte de la estructura:
CONFIGURACIONES GENERALES PARA HTML5

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset { margin: 0; padding: 0; } img, fieldset { border: 0; } /* set image max width to 100% */ img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } /* set html5 elements to block */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ESTILOS GENERALES
body { }
font: .81em/150% Arial, Helvetica, sans-serif;
Aadir a la regla: Color de texto: #FFF Fondo con radial-gradient. Color externo: # 134952 Color interno: # 4a939e
4 de 9
Puede ayudarse de la pgina: http://www.cssmatic.com/gradient-generator

a{
} a:hover { } p{ } /* list */ ul, ol {
color: #fff; text-decoration: none; outline: none; text-decoration: none; margin: 0 0 1.2em; padding: 0;
} li { }
margin: 1em 0 1.4em 24px; padding: 0; line-height: 140%; margin: 0 0 .5em 0; padding: 0;
/* headings */ h1, h2, h3, h4, h5, h6 { line-height: 1.4em; margin: 20px 0 .4em; color: #000; } h1 { font-size: 2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h5 { font-size: 1.1em; } h6 { font-size: 1em; }
ESTRUCTURA
Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R. 5 de 9

#pagewrap { margin: 0 auto; }
#content { margin: 0 auto; width:80%; }
HEADER
#header { background: #333; }
Aadir a la regla: Padding superior e inferior: 1em Padding derecho e izquierdo: 3m
#site-logo { font-weight:400; color: #fff; }
Aadir a la regla: Para el logo del sitio, se usar una fuente definida con la etiqueta @font-face. Para esto, vaya al sitio http://www.1001freefonts.com/ o cualquier otro de su preferencia y siga las instrucciones vistas en teora. Tamao de fuente: 5em.
#site-logo a { text-decoration: none; }
MENU
#menu { -webkit-box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); box-shadow: 0px 10px 14px 0px rgba(0,0,0,0.75); }
Definir lo siguiente para la regla anterior: Fondo: lineal-gradient (desde arriba): de #555555 a #333333. Puede ayudarse en http://www.cssmatic.com/gradient-generator Ancho: 100% border:1px #222 solid Aadir sombra al texto. Puede ayudarse en http://www.css3-generator.de/text-shadow.html
#main-nav {
6 de 9

margin: 0; padding: 0 3em;
#menu li { margin: 0; padding: 0; list-style: none; display: inline-block; font: bold 14px verdana, sans-serif; }
#menu a { line-height: 100%; font-weight: bold; display: block; padding: 14px 15px; text-decoration: none; text-shadow: 0 -1px 0 rgba(0,0,0,.5); }
Aadir lo siguiente a la siguiente regla: Sombra al texto. Puede ayudarse en http://www.css3-generator.de/text-shadow.html
#menu a:hover { background: #777777; border:1px #000000 solid; }
CONTENIDO
#seccion { float: left; }
Aadir a la regla anterior: Ancho: 70% Margen derecho:5%
#footer { clear: both; text-align: center; padding: 20px; background:#777777; }
article { padding: 20px; margin-bottom: 15px; }
article footer {
7 de 9

text-align: right; }
BARRA LATERAL
#sidebar { float: left; width: 25%; }
#sidebar div { padding:5em 0; margin:10%; background:#FFF; border: 0px solid #000000; vertical-align:middle; text-align:center; }
Aadir a la regla anterior: Borde redondeado en 10px. Puedes ayudarte en http://www.cssmatic.com/border-radius
ANIMACIONES
ANIMANDO EL MEN El men de navegacin deber tener una animacin. Para ello, debe modificar la regla #menu a. Aada una transicin que afecte a la propiedad background-color. La duracin de la transicin debe ser de 0.5 segundos y sin retardo inicial. ANIMANDO LA IMAGEN DE LA BARRA LATERAL Para realizar la animacin de la imagen de la barra lateral, debe modificar el archivo CSS y aadir la regla #animacion y escribir lo siguiente: Transformacin con los siguientes valores: rotate(360deg) scale(0.794) skew(1deg) translate(0px); O puede crear la suya en http://www.css3maker.com/css3-transform.html o aqu http://www.css3generator.de/transform.html Aadir una transicin que afecte a todas las propiedades que dure 1s.
Por ltimo, si queremos que se realice una animacin al mover el puntero del mouse sobre la imagen, aada la regla #animacion:hover al archivo CSS con lo siguiente: Transformacin con los siguientes valores: rotate(0deg) scale(0.5) skew(1deg) translate(0px); O puede crear la suya en http://www.css3maker.com/css3-transform.html o aqu http://www.css3generator.de/transform.html
GOOGLE FONTS API

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R. 8 de 9
Prctica 1: Crear una plantilla utilizando HTML5 y CSS3 Modifique la regla #sidebar, cambiando el tipo de letra usando Google Font API. Ayuda http://www.google.com/fonts
9 de 9

Practica 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Practica 1

Diunggah oleh

Hak Cipta:

Format Tersedia

Diseo grfico orientado a la Web

Maestra en Tecnologas de la Informtica Empresarial

PRCTICA 1: CREAR UNA PLANTILLA UTILIZANDO HTML5 Y CSS3

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

PRCTICA 1: CREAR UNA

PLANTILLA UTILIZANDO HTML5 Y CSS3

La estructura bsica del sitio es

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

CONFIGURACIONES GENERALES PARA HTML5

font: .81em/150% Arial, Helvetica, sans-serif;

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

Puede ayudarse de la pgina: http://www.cssmatic.com/gradient-generator

} a:hover { } p{ } /* list */ ul, ol {

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

#content { margin: 0 auto; width:80%; }

Aadir a la regla: Padding superior e inferior: 1em Padding derecho e izquierdo: 3m

#site-logo { font-weight:400; color: #fff; }

#site-logo a { text-decoration: none; }

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

Aadir lo siguiente a la siguiente regla: Sombra al texto. Puede ayudarse en http://www.css3-generator.de/text-shadow.html

#menu a:hover { background: #777777; border:1px #000000 solid; }

Aadir a la regla anterior: Ancho: 70% Margen derecho:5%

#footer { clear: both; text-align: center; padding: 20px; background:#777777; }

article { padding: 20px; margin-bottom: 15px; }

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Prctica 1: Crear una plantilla utilizando HTML5 y CSS3

Aadir a la regla anterior: Borde redondeado en 10px. Puedes ayudarte en http://www.cssmatic.com/border-radius

GOOGLE FONTS API

Maestra en Tecnologas de la Informacin Empresarial M.Sc. Ileana Camacho R.

Anda mungkin juga menyukai