Temas de aplicaciones de Internet- ULS: Primer acercamiento programación web

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">

<head>

<title>Ofertitas.cl</title>

<!--

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>

#apDiv1 {

position: absolute;

left: 279px;

top: 366px;

width: 550px;

height: 293px;

z-index: 1;

}

.nav #form2 {

font-weight: bold;

}

</style>

</head>

<body>

<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>

<label for="Buscador"> buscador</label>

</form>

</div>

Categorias:

</form>

<div class="AccordionPanelTab">Accesorios vehiculos</div>

<p>Repuestos</p>

<p>Espejos</p>

<p>Motores</p>

<p>Accesoris limpieza</p>

</div>

<div class="AccordionPanelTab">Animales y mascotas</div>

<div class="AccordionPanelContent">Contenido 2</div>

</div>

<div class="AccordionPanelTab">Artes y antiguedades</div>

<div class="AccordionPanelContent">Contenido 3</div>

</div>

<div class="AccordionPanelTab">Camara y accesorios</div>

<div class="AccordionPanelContent">Contenido 4</div>

</div>

<div class="AccordionPanelTab">Computación</div>

<div class="AccordionPanelContent">Contenido 8</div>

</div>

<div class="AccordionPanelTab">Celulares</div>

<div class="AccordionPanelContent">Contenido 6</div>

</div>

<div class="AccordionPanelTab">Servicios</div>

<div class="AccordionPanelContent">Contenido 9</div>

</div>

<div class="AccordionPanelTab">Deporte</div>

<div class="AccordionPanelContent">Contenido 5</div>

</div>

<div class="AccordionPanelTab">Electronica, audio y video</div>

</div>

</ul>

</div>

<h1>Subastas</h1>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</div>

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>

Temas de aplicaciones de Internet- ULS

lunes, 22 de octubre de 2012

Primer acercamiento programación web

No hay comentarios:

Publicar un comentario