pagina con maquetacion

PAGINA CON MAQUETACION

(CSS)Para empezar debemos abrir el programa NOTEPAD++ (siguiente figura)

Luego debemos crear un archivo donde vamos a poner todo el código de la pagina donde vamos aponer direcciones para la maqueteacion (siguiente código)

<!DOCTYPE><HTML>  <HEAD> <TITLE>11 Computacion</TITLE> <link href="css/estilo.css" rel="stylesheet" type="text/css"/>

</ASIDE> <ASIDE ID="derecha"> <P> <form action="indeindex.html"method="post"/> <table> <tr>

<th colspan="2"> iniciar secion </th>

</tr> <tr> <th>

<label>Usuario</label> </th> <th> <input type="text" name="nombreuser" size="10px"> </th>

</tr> <tr> <th>

<label>Contraseña</label> </th> <th> <input type="password" name="pass" size="10px"> </th>

</tr>

</table> </P> </ASIDE>  <SECTION class="clase1" contenteditable="true">

<A NAME="tipo"></A> <ARTICLE> <H1>TIPO DE COMPUTADORES</H1> <P> Un artículo es un texto que presenta la postura personal de un periodista , de un analista o de un pensador,

frente a un acontecimiento, un problema actual o de interés general. Mediante estos textos se pretende muchas veces influir en la opinión de los

lectores. Para lograrlo el escritor emplea argumentos o razones que seducen al lector

acercándolo a su postura, persuadiéndolo a un tema o hecho.En el artículo,generalmente se parte del planteamiento de un problema o

situación problemática, o sea,

de opiniones encontradas u opuestas. Quien escribe un artículo no solo analiza los hechos,

sino que al interpretarlos y dar su opinión, argumenta a favor o en contra de ellos. Todos estos factores hacen del artículo un texto argumentativo.</P><center><img class="imagenes" src="imagen/images.jpg"></center>

<video width="400" height="200" controls="controls" proload="proload"> <source src="imagenes/Ñengo Flow No Dice Na (Video Oficial).mp4"> </source> </video>

</ARTICLE> <ARTICLE> <H1>ARTICULO DOS</H1> <P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 2 </P> </ARTICLE> <audio controls="controls" src="imagenes/Plan B Se Cree Mala ( Vídeo Oficial ) La Formula.mp3"> si no sirve utilice otro servidor </audio> <ARTICLE> <H1>ARTICULO TRES</H1> <P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 3 </P> </ARTICLE> <ARTICLE> <H1>ARTICULO CUATRO</H1> <P> ESTE ES UN PARRAFO QUE PERTENECE AL ARTICULO 4 </P> </ARTICLE>

<A NAME="FINALDELDOCUMENTO"></A> <A HREF ="#iniciodeldocumento" <H2><CENTER>Presione aui para ir al inicio</A></H2></CENTER> </SECTION>

<!—E L PIE DE PAGINA SE ESCRIBE CON EL TAG FOOTER --> <FOOTER> <P> Aqui colocaremos nuestro pie de pagina </p> </footer> </div> </BODY> </HTML>

Luego vamos a crear otro archivo donde vamos a colocar el código de estilo (siguiente código)

/*esta es una hoja de estilo principal para mi pagina web*/div#todo{margin:0 auto;width:959px;border:solid 1px Orange;}

header{height:150px;border:solid 1px Orange;width:957px;overflow:hidden;}

/*maquetando el aside izquierda*/aside#izquierda{float:left;border:solid 1px RED;}/*maquetando la la seccion central*/

section{float:left;border:solid 1px RED;width:;}/*maquetando el aside derecha*/

aside#derecha{float:right;border:solid 1px Orange;}footer{float:left;border:solid 1px Orange;}

Luego debemos crear otro archivo para el código de header (siguiente código)

/*maquetando el header*//*fuente personalizada*/@font-face{font-family:destroyed;src:url(fuentes/destroyed.ttf)format('truetype');

}

border{border-radius:60px 10px 20px 10;box-shadow:0px 0px 15px Red;}/*/*h1*/

header h1{font-family:destroyed;margin-left:35px;text-shadow:5px 5px 5px orange;}/*p*/

header p{margin-left:57px;}header form{float:right;}/*menu horizontal*/

header ul{list-style:none;}header ul li{float:left;margin-top: 1px; /**/}

header ul li a{text-decoration:none;color:blue;border:solid 3px Blue;margin:left 3px;padding:5px 15px 5 px 15px;border-radius: 5px 5px 0px 0px;box-shadow:10px 5px 10px Orange; /*derecha abajo lo grande*/transition:background 1s, color 1s, border 1s, box-shadow 1s;/*despues*/transition:background 1s, color 1s, border 1s, box-shadow 1s;transition:background 1s, color 1s, border 1s, box-shadow 1s;transition:background 1s, color 1s, border 1s, box-shadow 1s;}header ul li a:hover{color:yellow;border:solid 3px Red;

box-shadow:opx 5px 10px green;background:Red;

}

Luego debemos crear otro archivo para centro (siguiente código)

/*sección central*/

img.imagenes{

transform:scale(1,1);

-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transition:transform 1s;-webkit-transition:-webkit-transform 1s;-moz-transition:-moz-transform 1s;-o-transform:-o-transform 1s;-ms-transform:-o-transform 1s;}

img.imagenes:hover{transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);-o-transform:scale(1.5,1.5);-ms-transform:scale(1.5,1.5);

}/*colocamos un backgroun y border a la parte central*/section{margin-top:35px;background:blue;box-shadow:0px 0px 20px red;border-radius: 10px 10px 10px 10px;border:solid 7px #000000;}

section article p{text-align:center;margin-left: 30px;margin-right:30px;

}

/*colocamos en el documento la siguiente orden </article class="clase1" contenteditable="true"> para leer mas article class="clase1" contenteditable="true">

<small>Leer mas</small>*/

Luego debemos crear otro archivo para el código de la derecha (siguiente código)

/*aside derecha*/aside#derecha{

margin-top:25px;border:solid 1px red;box-shadow:0px 0px 15px red;border-radius: 10px 10px 10px 10px;transition: border 1s, box-shadow 1s,background 1s;-webkit-transition:border 1s, box-shadow 1s,background 1s;-moz-transition:border 1s, box-shadow 1s,background 1s;-0-transition:border 1s, box-shadow 1s,background 1s;-ms-transition:border 1s, box-shadow 1s,background 1s;}aside#derecha:hover{background:gold;border:solid 1px blue;box-shadow:0px 0px 15px blue;

}aside#derecha ul{list-style:none;padding:10px;}

Luego otro archivo para el código de la izquierda (siguiente código)

/*aside fooder*/aside#izquierda{

margin-top:25px;border:solid 1px red;box-shadow:0px 0px 15px red;border-radius: 10px 10px 10px 10px;transition: border 1s, box-shadow 1s,background 1s;

-webkit-transition:border 1s, box-shadow 1s,background 1s;-moz-transition:border 1s, box-shadow 1s,background 1s;-0-transition:border 1s, box-shadow 1s,background 1s;-ms-transition:border 1s, box-shadow 1s,background 1s;}aside#izquierda:hover{background:gold;border:solid 1px blue;box-shadow:0px 0px 15px blue;

}

Con todos estos códigos obtenemos nuestra página maqueteada con lenguaje CSS (siguiente figura)

pagina con maquetacion

Documents