Instrucciones:
En esta ocación haremos nuestra primera página web completa y la estructuraremos con html y la maquetaremos con CSS, la página al final debe verse así:
- capa header- ancho: 100% - alto: 100px
- capa contenedor - ancho: 1000px- alto: 850px
- capa cabecera - ancho 1000px- alto: 245px
- capa seccion1: ancho: 615px - alto: 260px
- capa seccion2: ancho: 290px - alto: 260px
- capa misblogs: ancho: 260px - alto: 225px
- capa video: ancho: 300px - alto: 225px
- capa enlaces: ancho: 290px - alto: 225px
- capa footer: ancho: 100% - alto: 100px
Al igual que la capa header, la capa footer tendrá el mismo color y en ella colocaremos la leyenda "2012 derechos reservados" y a la derecha el nombre del webmaster y su correo electrónico.
En la capa cabecera colocaremos una imagen con el mismo tamaño de la capa.
En la capa seccion1 coloremos un texto explicativo del sitio web, podemos escribir aquí la misión y la visión de la institución a la que pertenece el sitio.
En la capa seccion2 colocaremos una imagen o banner publictario.
En la capa misglogs haremos una vinculación hacia los blogs más interesantes con temas relacionados al curso.
En la capa video vamos a colocar un videotutorial sobre html, html5 o cualquier tema relacionado con el curso.
Por último en la capa footer colocaremos una serie de enlaces a páginas interesantes sobre temas de computación.
Para escribir el código de esta página debemos iniciar con la estructura HTML y luego escribimos la maquetación CSS.
Estructura HTML
Nombre del archivo: index.html
ubicación del archivo: carpeta del sitio
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutoriales Lima</title>
<meta name="description" content="Diferentes recursos didácticos de apoyo para los
cibernautas interesados en ampliar sus horizontes informáticos. =)" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/estilos.css" />
<script type='text/javascript' src='js/jquery.js'></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script>
<script type='text/javascript' src='js/custom.min.js'></script>
</head>
<body>
<div id="header">
<div id="nombre">
<img src="img/logo.png">
Tutoriales <span class="estilo1">Lima</span>
</div>
<div id="nav">
<a href="#">Portada </a>
<a href="#">Tutoriales </a>
<a href="#">Videos </a>
<a href="#">Descargas </a>
<a href="#">Comentarios</a>
</div>
</div>
<div id="contenedor">
<div id="cabecera" align="center">
<ul class='aviaslider' id="frontpage-slider">
<li><a href="img/moto_portada.jpg" title="" ><img src="img/moto_portada.jpg" /></a></li>
<li><a href="img/explo_portada.jpg" title=""><img src="img/explo_portada.jpg" /></a></li>
<li><a href="img/photo_portada.jpg" title=""><img src="img/photo_portada.jpg" /></a></li>
<li><a href="img/php_portada.jpg" title=""><img src="img/php_portada.jpg" /></a></li>
</ul>
</div>
<div id="seccion1">
<span class="titulo_sec1">Te damos la bienvenida</span><br><br>
<p class="texto_sec1">En nuestro sitio encontrarás una variedad de herramientas utiles que te
ayudarán con el diseño de páginas web, hojas de trabajo, imagenes en Photoshop y más.
En la sección de descargas bajate las presentaciones sobre los cursos de programación, diseño e información general sobre la computación.<br>
En los tutoriales te damos instrucciones paso a paso con ayuda de imagenes y su
respectivo ejemplo. También en los videos encontrarás videotutoriales que te ayudarán
con esas tareas que a veces se complican un poquito, podrás descargarlos y verlos
cuantas veces quieras en casa.
<br>
<b>Recuerda dejar tus comentarios.</b> </p>
</div>
<div id="seccion2" align="center">
<!-- google_ad_section_end(name=default) -->
<div class="inline-ad">
<script type="text/javascript"><!--
google_ad_client="pub-1865482665613772";
google_ad_host="pub-1556223355139109";
google_ad_width=300;
google_ad_height=250;
google_ad_format="300x250_as";
google_ad_type="text_image";
google_ad_host_channel="0001+S0009+L0007";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="2288BB";
google_color_url="666666";
google_color_text="222222";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&&s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;" frameborder="0" height="250" scrolling="no" width="300"></iframe></ins></ins>
</div>
<!-- google_ad_section_start -->
</div>
<div id="misblogs">
<span class="titulom">Mis Blogs</span><br><br>
<table width="100%">
<tr valign="middle" height="40">
<td>
<a href="http://www.conozcamosphp.blogspot.com"><i>Conozcamos PHP</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="http://www.aprendamoscss.blogspot.com"><i>Aprendamos CSS</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="http://www.conozcamoshtml5.blogspot.com"><i>Conozcamos HTML5</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="http://www.conozcamosaccess.blogspot.com"><i>Conozcamos Access</i></a>
</td>
</tr>
</table>
</div>
<div id="video">
<span class="titulov">Videotutorial recomendado</span><br><br>
<iframe width="285" height="185"
src="http://www.youtube.com/embed/Rpx0COTfokI"
frameborder="0" allowfullscreen></iframe>
</div>
<div id="enlaces">
<span class="tituloe">Enlaces de Interés</span><br><br>
<table width="100%">
<tr valign="middle" height="40">
<td>
<a href="#"><i>Solo Photoshop</i></a>
</td>
<td align="right">
<a href="#"><i>Photo-Design</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="#"><i>Flash Facilito</i></a>
</td>
<td align="right">
<a href="#"><i>Tutorial Lab</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="#"><i>Video Tutoriales</i></a>
</td>
<td align="right">
<a href="#"><i>Tutoriales Photoshop</i></a>
</td>
</tr>
<tr valign="middle" height="40">
<td>
<a href="#"><i>Todo Photoshop</i></a>
</td>
<td align="right">
<a href="#"><i>Colegio IPTCE</i></a>
</td>
</tr>
</table>
</div>
</div>
<div id="footer">
<div id="footer_derechos">
2012 Derechos Reservados
</div>
<div id="footer_webmaster">
<br>
Webmaster: <span class="estilo3">Juan Carlos Lima Cruz</span><br>
E-mail: <span class="estilo3">limacruzjuancarlos@gmail.com</span>
</div>
</div>
</body>
</html>
Maquetación CSS
Nombre del archivo: estilos.css
ubicación del archivo: carpeta css dentro de la carpeta del sitio
@charset "utf-8";
/* CSS Document */
* {
padding:0;
margin:0;
}
#header {
background:#212121;
width:100%;
height:100px;
}
#nombre {
color:#FFF;
height:100px;
line-height:100px;
font-family:Georgia;
font-size: 2.5em;
margin-left:10%;
position:absolute;
width:40%;
}
#nombre .estilo1 {
color:#FF9900;
}
#nombre img {
float:left;
}
#nav {
height:100px;
line-height:110px;
margin-left:50%;
position:absolute;
width:65%;
}
#nav a {
color:#FFF;
font-family:Arial;
font-size:1.2em;
text-decoration:none;
}
#nav a:hover {
color:#F60;
}
#contenedor {
height:850px;
margin-top: 5px;
margin-left:auto;
margin-right:auto;
width:1000px;
}
#cabecera {
border-color:#000;
border-bottom:solid 2px;
border-radius:2em;
height:245px;
position:absolute;
width:1000px;
}
#seccion1 {
height:260px;
border-color:#000;
border-bottom:solid 2px;
border-top:solid 2px;
border-radius:2em;
margin-top:255px;
margin-left: 0px;
padding: 20px;
position:absolute;
width:615px;
}
#seccion1 .titulo_sec1 {
color:#212121;
font-family:Verdana;
font-size:1.5em;
}
#seccion1 .texto_sec1 {
color:#212121;
font-family:Verdana;
}
#seccion2 {
height:260px;
border-color:#000;
border-bottom:solid 2px;
border-top:solid 2px;
border-radius:2em;
margin-top:255px;
margin-left:670px;
padding: 20px;
position:absolute;
width:290px;
}
#misblogs {
border-color:#000;
border-bottom:solid 2px;
border-top:solid 2px;
border-radius:2em;
height:225px;
margin-top:570px;
padding: 20px;
position:absolute;
width:260px;
}
#misblogs .titulom {
color:#212121;
font-family:helvetica;
font-size:1.8em;
}
#misblogs a {
color:#212121;
font-family:helvetica;
font-size:1em;
text-decoration:none;
}
#misblogs a:hover {
color:#036;
font-family:helvetica;
font-size:1em;
text-decoration:underline;
}
#video {
border-color:#000;
border-bottom:solid 2px;
border-top:solid 2px;
border-radius:2em;
height:225px;
margin-left:315px;
margin-top:570px;
padding: 20px;
position:absolute;
width:300px;
}
#video .titulov {
color:#212121;
font-family:helvetica;
font-size:1.8em;
}
#enlaces {
border-color:#000;
border-bottom:solid 2px;
border-top:solid 2px;
border-radius:2em;
height:225px;
margin-left:670px;;
margin-top:570px;
padding: 20px;
position:absolute;
width:290px;
}
#enlaces .tituloe {
color:#212121;
font-family:helvetica;
font-size:1.8em;
}
#enlaces a {
color:#212121;
font-family:helvetica;
font-size:1em;
text-decoration:none;
}
#enlaces a:hover {
color:#036;
font-family:helvetica;
font-size:1em;
text-decoration:underline;
}
#footer {
background:#212121;
width:100%;
height:100px;
}
#footer_derechos {
color:#666;
height:100px;
line-height:100px;
font-family:Georgia;
font-size: 0.8em;
margin-left:20%;
position:absolute;
width:30%;
}
#footer_webmaster {
color:#FFFFCC;
height:100px;
font-family:Georgia;
font-size: 0.8em;
margin-left:60%;
position:absolute;
width:60%;
}
#footer_webmaster .estilo3{
color:#F60;
}
Es necesario aclarar que en el código HTML incluí un video, para lo cual use la opción compartir de youtube.com, si desea hacer lo mismo, omita el código de este video que dejaré de color rojo y substituyalo por su propio código. Con color azúl marino deje el código que corresponde a un anuncio de GoogleAddSense, este anuncio puede sustituirlo por uno creado en flash u otro programa.
No hay comentarios:
Publicar un comentario