Para el avance de esta semana, he decidido ya involucrarme en lo que es la programación, respecto de
la pagina a crear, revisando la herramienta adobe dreamweaver CS6 como primera aproximación a la programación de paginas web. Esta primera plantilla está basada en el mockup del home de "ofertitas.cl".
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ofertitas.cl</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #336666;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Selectores de elemento/etiqueta ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
/* ~~ Este contenedor de anchura fija rodea a todas las demás divs ~~ */
.container {
width: 960px;
margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}
.header {
background-color: #336666;
text-align: center;
}
.sidebar1 {
float: left;
width: 180px;
background-color: #CCCCFF;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 600px;
float: left;
background-color: #6C6;
}
.sidebar2 {
float: left;
width: 180px;
background-color: #CCCCFF;
padding: 10px 0;
}
/* ~~ Este selector agrupado da espacio a las listas del área de .content ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px;
}
ul.nav {
list-style: none; /* esto elimina el marcador de lista */
border-top: 1px solid #666;
margin-bottom: 15px; /* esto crea el espacio entre la navegación en el contenido situado debajo */
}
ul.nav li {
border-bottom: 1px solid #666; /* esto crea la separación de los botones */
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* esto cambia el color de fondo y del texto tanto para usuarios que naveguen con ratón como para los que lo hagan con teclado */
background-color: #ADB96E;
color: #FFF;
}
/* ~~ Los estilos de pie de página ~~ */
.footer {
padding: 10px 0;
background-color: #D6D6D6;
position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
}
/* ~~ Clases float/clear varias ~~ */
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position: absolute;
left: 279px;
top: 366px;
width: 550px;
height: 293px;
z-index: 1;
}
.nav #form2 {
font-weight: bold;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header">
<p><img src="imagenes/subasta4.jpg" alt="" name="Insert_logo" width="127" height="112" id="Insert_logo" style="background-color: #C6D580; display:block;" /></p>
<div align="left"></div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Home</a>
<ul>
<li><a href="#">Elemento 1.1</a></li>
<li><a href="#">Elemento 1.2</a></li>
<li><a href="#">Elemento 1.3</a></li>
</ul>
</li>
<li><a href="#">Productos</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Servicios</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Elemento 3.1</a>
<ul>
<li><a href="#">Elemento 3.1.1</a></li>
<li><a href="#">Elemento 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Elemento 3.2</a></li>
<li><a href="#">Elemento 3.3</a></li>
</ul>
</li>
<li><a href="#">Ayuda </a></li>
</ul>
<form id="form1" name="form1" method="post" action="">
<label for="Buscador"> buscador</label>
<input type="text" name="Buscador" id="Buscador" />
</form>
<p> </p>
<p> </p>
</div>
<div class="sidebar1">
<ul class="nav">
<li> <!-- end .sidebar1 --></li>
<form id="form2" name="form2" method="post" action="">
Categorias:
</form>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Accesorios vehiculos</div>
<div class="AccordionPanelContent">
<p>Repuestos</p>
<p>Espejos</p>
<p>Motores</p>
<p>Accesoris limpieza</p>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Animales y mascotas</div>
<div class="AccordionPanelContent">Contenido 2</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Artes y antiguedades</div>
<div class="AccordionPanelContent">Contenido 3</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Camara y accesorios</div>
<div class="AccordionPanelContent">Contenido 4</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Computación</div>
<div class="AccordionPanelContent">Contenido 8</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Celulares</div>
<div class="AccordionPanelContent">Contenido 6</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Servicios</div>
<div class="AccordionPanelContent">Contenido 9</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Deporte</div>
<div class="AccordionPanelContent">Contenido 5</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Electronica, audio y video</div>
<div class="AccordionPanelContent"></div>
</div>
</div>
</ul>
</div>
<div class="content">
<h1>Subastas</h1>
<table width="565" height="311" border="2" align="center" cellspacing="3">
<tr>
<th bgcolor="#CCCCCC" scope="col"> </th>
<th bgcolor="#CCCCCC" scope="col"> </th>
<th bgcolor="#CCCCCC" scope="col"> </th>
</tr>
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
<td bgcolor="#CCCCCC"> </td>
</tr>
</table>
<p> </p>
<p><!-- end .content --></p>
</div>
<div class="sidebar2">
<p><img src="imagenes/Sin título.png" width="170" height="450" alt="publicidad" /></p>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
