Buscar temas sin respuesta | Ver temas activos Fecha actual Mar Sep 07, 2010 9:12 am

Índice general » Tutorías » Estructura Plantilla html

Todos los horarios son UTC




Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas  Página 1 de 1
  [ 9 mensajes ] 
Imprimir vista Tema previo | Siguiente tema 
Estructura de una plantilla html 
Autor Mensaje
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Estructura de una plantilla html
En este tutorial veremos la estructura de la plantilla vt101 http://www.plantilleando.com/plantillas ... /page.html
El objetivo de este tutorial es ver las diferentes partes de una plantilla.
Se requieren unos conocimientos minimos de Html para poder seguir el tutorial. Si no estás familiarizado con este lenguaje de programación te aconsejo leer un manual de los muchos que hay en internet. Html es un lenguaje basado en etiquetas de apertura y cierre, por lo que su aprendizaje no es nada complicado.

A continuación se muestra el código completo de la plantilla. En este mismo hilo iré detallando su estructura.

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" dir="ltr" lang="en-US" xml:lang="en">
<head>
    <!--
    Created by Artisteer v2.0.2.15338
    Base template (without user's data) checked by http://validator.w3.org : "This page is valid XHTML 1.0 Transitional"
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Plantinet</title>

    <script type="text/javascript" src="script.js"></script>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="style.ie61.css" type="text/css" media="screen" /><![endif]-->
</head>
<body>
<div class="Main">
        <div class="Sheet">
            <div class="Sheet-tl"></div>
            <div class="Sheet-tr"><div></div></div>
            <div class="Sheet-bl"><div></div></div>
            <div class="Sheet-br"><div></div></div>
            <div class="Sheet-tc"><div></div></div>
            <div class="Sheet-bc"><div></div></div>
            <div class="Sheet-cl"><div></div></div>
            <div class="Sheet-cr"><div></div></div>
            <div class="Sheet-cc"></div>
            <div class="Sheet-body">
                <div class="Header">
                    <div class="Header-png"></div>
                    <div class="Header-jpeg"></div>
                    <div class="logo">
                        <h1 id="name-text" class="logo-name"><a href="#">Título</a></h1>
                        <div id="slogan-text" class="logo-text">Texto de Lema</div>
                    </div>
                </div>
                <div class="nav">
                    <ul class="artmenu">
                        <li><a href="#" class=" active"><span><span>Home</span></span></a></li>
                        <li><a href="#"><span><span>About</span></span></a>
                                        <ul>
                                <li><a href="#">Photos</a></li>
                                <li><a href="#">Press</a></li>
                            </ul>
                                    </li>
                        <li><a href="#"><span><span>Services</span></span></a></li>
                        <li><a href="#"><span><span>Solutions</span></span></a>
                                        <ul>
                                <li><a href="#">Consulting</a>
                                    <ul>
                                        <li><a href="#">Lorem ipsum</a> </li>
                                        <li><a href="#">Dolor sit amet</a> </li>
                                        <li><a href="#">Consectetuer</a> </li>
                                    </ul>
                                </li>
                                <li><a href="#">Training</a></li>
                                <li><a href="#">Analisys</a></li>
                            </ul>
                                    </li>
                        <li><a href="#"><span><span>Contact</span></span></a></li>
                    </ul>
                    <div class="l">
                    </div>
                    <div class="r">
                        <div>
                        </div>
                    </div>
                </div>
                <div class="contentLayout">
                    <div class="content">
                        <div class="Post">
                            <div class="Post-body">
                        <div class="Post-inner">
                            <h2 class="PostHeaderIcon-wrapper">
                                <span class="PostHeader">Welcome</span>
                            </h2>
                            <div class="PostContent">
                               
                                <img class="article" src="images/spectacles.gif" alt="an image" style="float: left" />
                                <h1>Heading 1</h1>
                                <h2>Heading 2</h2>
                                <h3>Heading 3</h3>
                                <h4>Heading 4</h4>
                                <h5>Heading 5</h5>
                                <h6>Heading 6</h6>
                                <p>Lorem ipsum dolor sit amet,
                                <a href="#" title="link">link</a>, <a class="visited" href="#" title="visited link">visited link</a>,
                                 <a class="hover" href="#" title="hovered link">hovered link</a> consectetuer
                                adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl
                                in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
                                <p><a href="javascript:void(0)">Read more...</a></p>
                               
                                <table class="table" width="100%">
                                   <tr>
                                      <td width="33%" valign="top">
                                      <div class="Block">
                                         <div class="Block-body">
                                            <div class="BlockHeader">
                                               <!--div class="header-tag-icon"-->
                                               <div class="BlockHeader-text">
                                                  <center>Support</center></div>
                                               <!--/div-->
                                               <div class="l">
                                               </div>
                                               <div class="r">
                                                  <div>
                                                  </div>
                                               </div>
                                            </div>
                                            <div class="BlockContent">
                                               <div class="PostContent">
                                                  <img src="images/01.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
                                                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  velit semper laoreet dictum, quam diam dictum urna. </p>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                      </td>
                                      <td width="33%" valign="top">
                                      <div class="Block">
                                         <div class="Block-body">
                                            <div class="BlockHeader">
                                               <!--div class="header-tag-icon"-->
                                               <div class="BlockHeader-text">
                                                  <center>Development</center></div>
                                               <!--/div-->
                                               <div class="l">
                                               </div>
                                               <div class="r">
                                                  <div>
                                                  </div>
                                               </div>
                                            </div>
                                            <div class="BlockContent">
                                               <div class="PostContent">
                                                  <img src="images/02.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
                                                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  velit semper laoreet dictum, quam diam dictum urna. </p>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                      </td>
                                      <td width="33%" valign="top">
                                      <div class="Block">
                                         <div class="Block-body">
                                            <div class="BlockHeader">
                                               <!--div class="header-tag-icon"-->
                                               <div class="BlockHeader-text">
                                                  <center>Strategy</center></div>
                                               <!--/div-->
                                               <div class="l">
                                               </div>
                                               <div class="r">
                                                  <div>
                                                  </div>
                                               </div>
                                            </div>
                                            <div class="BlockContent">
                                               <div class="PostContent">
                                                  <img src="images/03.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
                                                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                  Quisque sed felis. Aliquam sit amet felis. Mauris semper,
                                                  velit semper laoreet dictum, quam diam dictum urna. </p>
                                               </div>
                                            </div>
                                         </div>
                                      </div>
                                      </td>
                                   </tr>
                                </table>
                                   
                            </div>
                            <div class="cleared"></div>
                        </div>
                       
                            </div>
                        </div>
                        <div class="Post">
                            <div class="Post-body">
                        <div class="Post-inner">
                            <h2 class="PostHeaderIcon-wrapper">
                                <span class="PostHeader">Who uses our products?</span>
                            </h2>
                            <div class="PostContent">
                               
                                   
                                   
                                  <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
                                   Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
                                   Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
                                   Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
                                   Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
                                   Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
                                   Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>
                                 
                                    <blockquote>
                                        <p>
                                            &#8220;This stylesheet is going to help so freaking much.&#8221;
                                            <br />
                                            -Blockquote
                                        </p>
                                    </blockquote>
                                  <br />
                                  <table class="article" border="0" cellspacing="0" cellpadding="0">
                                  <tbody>
                                    <tr>
                                      <th>Header</th>
                                      <th>Header</th>
                                      <th>Header</th>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr class="even">
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                    <tr>
                                      <td>Data</td>
                                      <td>Data</td>
                                      <td>Data</td>
                                    </tr>
                                  </tbody></table>
                                 
                                  <p>
                                        <a class="Button" href="javascript:void(0)">
                                          <span class="btn">
                                            <span class="t">Join&nbsp;Now!</span>
                                            <span class="r"><span></span></span>
                                            <span class="l"></span>
                                          </span>
                                        </a>
                                  </p>
                                   
                            </div>
                            <div class="cleared"></div>
                        </div>
                       
                            </div>
                        </div>
                    </div>
                    <div class="sidebar1">
                        <div class="Block">
                            <div class="Block-tl"></div>
                            <div class="Block-tr"><div></div></div>
                            <div class="Block-bl"><div></div></div>
                            <div class="Block-br"><div></div></div>
                            <div class="Block-tc"><div></div></div>
                            <div class="Block-bc"><div></div></div>
                            <div class="Block-cl"><div></div></div>
                            <div class="Block-cr"><div></div></div>
                            <div class="Block-cc"></div>
                            <div class="Block-body">
                                <div class="BlockHeader">
                                    <div class="header-tag-icon">
                                        <div class="BlockHeader-text">
                                            Newsletter
                                        </div>
                                    </div>
                                    <div class="l"></div>
                                    <div class="r"><div></div></div>
                                </div>
                                <div class="BlockContent">
                                    <div class="BlockContent-body">
                                        <div><form method="get" id="newsletterform" action="javascript:void(0)">
                                        <input type="text" value="" name="email" id="s" style="width: 95%;" />
                                        <button class="Button" type="submit" name="search">
                                                <span class="btn">
                                                    <span class="t">Subscribe</span>
                                                    <span class="r"><span></span></span>
                                                    <span class="l"></span>
                                                </span>
                                        </button>
                                        </form></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Block">
                            <div class="Block-tl"></div>
                            <div class="Block-tr"><div></div></div>
                            <div class="Block-bl"><div></div></div>
                            <div class="Block-br"><div></div></div>
                            <div class="Block-tc"><div></div></div>
                            <div class="Block-bc"><div></div></div>
                            <div class="Block-cl"><div></div></div>
                            <div class="Block-cr"><div></div></div>
                            <div class="Block-cc"></div>
                            <div class="Block-body">
                                <div class="BlockHeader">
                                    <div class="header-tag-icon">
                                        <div class="BlockHeader-text">
                                            Highlights
                                        </div>
                                    </div>
                                    <div class="l"></div>
                                    <div class="r"><div></div></div>
                                </div>
                                <div class="BlockContent">
                                    <div class="BlockContent-body">
                                        <div>
                                                          <ul><li><b>Jun 14, 2008</b>
                                                          <p>Aliquam sit amet felis. Mauris semper,
                                                                velit semper laoreet dictum, quam
                                                                diam dictum urna, nec placerat elit
                                                                nisl in quam. Etiam augue pede,
                                                                molestie eget, rhoncus at, convallis
                                                                ut, eros. Aliquam pharetra.<br/>
                                                                <a href="javascript:void(0)">Read more...</a>               
                                                          </p></li></ul>
                                                          <ul><li><b>Aug 24, 2008</b>
                                                          <p>Aliquam sit amet felis. Mauris semper,
                                                                velit semper laoreet dictum, quam
                                                                diam dictum urna, nec placerat elit
                                                                nisl in quam. Etiam augue pede,
                                                                molestie eget, rhoncus at, convallis
                                                                ut, eros. Aliquam pharetra.<br/>
                                                                <a href="javascript:void(0)">Read more...</a>               
                                                          </p></li></ul>
                                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="Block">
                            <div class="Block-tl"></div>
                            <div class="Block-tr"><div></div></div>
                            <div class="Block-bl"><div></div></div>
                            <div class="Block-br"><div></div></div>
                            <div class="Block-tc"><div></div></div>
                            <div class="Block-bc"><div></div></div>
                            <div class="Block-cl"><div></div></div>
                            <div class="Block-cr"><div></div></div>
                            <div class="Block-cc"></div>
                            <div class="Block-body">
                                <div class="BlockHeader">
                                    <div class="header-tag-icon">
                                        <div class="BlockHeader-text">
                                            Contact Info
                                        </div>
                                    </div>
                                    <div class="l"></div>
                                    <div class="r"><div></div></div>
                                </div>
                                <div class="BlockContent">
                                    <div class="BlockContent-body">
                                        <div>
                                              <img src="images/contact.jpg" alt="an image" style="margin: 0 auto;display:block;width:95%" />
                                        <br />
                                        <b>Company Co.</b><br />
                                        Las Vegas, NV 12345<br />
                                        Email: <a href="mailto:info@company.com">info@company.com</a><br />
                                        <br/>
                                        Phone: (123) 456-7890 <br/>
                                        Fax: (123) 456-7890
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cleared"></div><div class="Footer">
                    <div class="Footer-inner">
                        <a href="#" class="rss-tag-icon" title="RSS"></a>
                        <div class="Footer-text">
                            <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
                                | <a href="#">Privacy Statement</a><br />
                                Copyright &copy; 2009 ---. All Rights Reserved.</p>
                        </div>
                    </div>
                    <div class="Footer-background"></div>
                </div>
            </div>
        </div>
        <div class="cleared"></div>
        <!-- If you'd like to support Artisteer, having the "created with" link somewhere on your blog is the best way; it's our only promotion or advertising. -->
        <p class="page-footer">Web Template created by <a href="http://www.plantinet.com">Plantinet</a>.</p>
    </div>
   
</body>
</html>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 9:34 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
A continuación paso a detallar las diferentes partes que forman la plantilla.

El codigo comprendido entre las etiquetas <head></head> informan al navegador del contenido de la página.
Dentro del <head></head> incluiremos las etiquetas <meta =""> muy importantes para la indexación en buscadores. Esto lo verenos en próximos tutoriales.


Citar:
<!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" dir="ltr" lang="en-US" xml:lang="en">
<head>
<!--
Base template (without user's data) checked by http://validator.w3.org : "This page is valid XHTML 1.0 Transitional"
-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Plantilleando</title>

<script type="text/javascript" src="script.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" href="style.ie61.css" type="text/css" media="screen" /><![endif]-->
</head>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 9:39 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
El código comprendido entre las etiquetas <body></body> es la parte visible de nuestra web.

En esta plantilla en concreto, los elementos que forman el <body></body> están estructurados de la siguiente manera:
- En la parte superior nos encontramos la cabecera, donde insertaremos nuestra imagen y el título visible de la web.
- Mas abajo nos encontramos el menu.
- A la izquierda podemos localizar el contenido central de la página.
- A la derecha encontramos tres modulos Newsletter, Highlights y Contact Info.
- El la parte inferior encontramos el pie de página.

Nuestras plantillas son generadas automaticamente y todo el código html es muy similar entre ellas.

En los siguientes posts iremos viendo cada uno de los elementos que componen el <body></body>(cuerpo de la página).

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 10:04 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
La estructura general se raaliza mediante etiquetas <div></div>. Todas las etiquetas div tienen un elemento de apertura <div> y uno de cierre </div>.
Las etiquetas <div> pueden contener otras etiquetas <div> en su interior.
Las etiquetas <div> tienen una serie de propiedades; nos centraremos en las dos mas importantes para este tutorial.
Propiedad class=""; nos indica a que clase pertenece la etiqueta <div>.
Propiedad id=""; nos indica cual es el identificador de la etiqueta <div>

Tanto la propiedad class como la propiedad id están relacionadas con las hojas de estilo css que veremos más adelante.

Esta es la primera etiqueta que encontramos entre las etiquetas <body></body>.

Apertura
<div class="Main">

Cierre (última etiqueta de la página)
</div>

En ella están incluidos todos las demás etiquetas <div></div> que componen la estructura y es una especie de contenedor de las demás etiquetas <div>.

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 10:23 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
Puesto que todas las etiquetas tienen apertura y cierre, es importante que prestéis atención a la forma en que analizamos la estructura a partir de ahora.

Una etiqueta de apertura sin etiqueta de cierre puede desarreglar toda la estructura de la página.

Imagen Head, título y eslogan.

Despues de la etiqueta <div class="Main"> sigue el siguiente código html. En vuestras plantillas modificar o borrar solo el contenido que marco en verde.
Citar:
<div class="Sheet">
<div class="Sheet-tl"></div>
<div class="Sheet-tr"><div></div></div>
<div class="Sheet-bl"><div></div></div>
<div class="Sheet-br"><div></div></div>
<div class="Sheet-tc"><div></div></div>
<div class="Sheet-bc"><div></div></div>
<div class="Sheet-cl"><div></div></div>
<div class="Sheet-cr"><div></div></div>
<div class="Sheet-cc"></div>
<div class="Sheet-body">
<div class="Header">
<div class="Header-png"></div>
<div class="Header-jpeg"></div>
<div class="logo">
<h1 id="name-text" class="logo-name"><a href="#">Título de la web</a></h1>
<div id="slogan-text" class="logo-text">Eslogan</div>
</div>
</div>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 10:42 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
El Menú está controlado por css y javaScript. Podeís añadir, modificar o quitar elementos de menú a vuestro gusto, para ello prestar atención a los elementos marcados en color.

Texto en verde crea un menú.
Texto en rojo crea un submenú.
Texto en azul crea un sub_sub_menú.

Citar:
<div class="nav">
<ul class="artmenu">
<li><a href="#" class=" active"><span><span>Home</span></span></a></li>
<li><a href="#" class=" active"><span><span>Nuevo menú</span></span></a></li>
<li><a href="#"><span><span>About</span></span></a>
<ul>
<li><a href="#">Photos</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Nuevo sub menú</a></li>
</ul>
</li>
<li><a href="#"><span><span>Services</span></span></a></li>
<li><a href="#"><span><span>Solutions</span></span></a>
<ul>
<li><a href="#">Consulting</a>
<ul>
<li><a href="#">Lorem ipsum</a> </li>
<li><a href="#">Dolor sit amet</a> </li>
<li><a href="#">Nuevo sub sub menú</a> </li>
<li><a href="#">Consectetuer</a> </li>
</ul>
</li>
<li><a href="#">Training</a></li>
<li><a href="#">Analisys</a></li>
</ul>
</li>
<li><a href="#"><span><span>Contact</span></span></a></li>
</ul>
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 10:53 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
El contenido central de la página.

Nota: Las plantillas incluyen contenido que en la mayoria de los casos sobra o molesta, pero que es importante para saber donde ubicar cada elemento y que apariencia tendrá.

Marco en verde las partes que se pueden modificar o borrar.
El código marcado en rojo es un botón.

Citar:
<div class="contentLayout">
<div class="content">
<div class="Post">
<div class="Post-body">
<div class="Post-inner">
<h2 class="PostHeaderIcon-wrapper">
<span class="PostHeader">Welcome</span>
</h2>
<div class="PostContent">

<img class="article" src="images/spectacles.gif" alt="an image" style="float: left" />
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet,
<a href="#" title="link">link</a>, <a class="visited" href="#" title="visited link">visited link</a>,
<a class="hover" href="#" title="hovered link">hovered link</a> consectetuer
adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl
in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros.</p>
<p><a href="javascript:void(0)">Read more...</a></p>

<table class="table" width="100%">
<tr>
<td width="33%" valign="top">
<div class="Block">
<div class="Block-body">
<div class="BlockHeader">
<!--div class="header-tag-icon"-->
<div class="BlockHeader-text">
<center>Support</center></div>
<!--/div-->
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>
<div class="BlockContent">
<div class="PostContent">
<img src="images/01.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div>
</div>
</div>
</td>
<td width="33%" valign="top">
<div class="Block">
<div class="Block-body">
<div class="BlockHeader">
<!--div class="header-tag-icon"-->
<div class="BlockHeader-text">
<center>Development</center></div>
<!--/div-->
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>
<div class="BlockContent">
<div class="PostContent">
<img src="images/02.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div>
</div>
</div>
</td>
<td width="33%" valign="top">
<div class="Block">
<div class="Block-body">
<div class="BlockHeader">
<!--div class="header-tag-icon"-->
<div class="BlockHeader-text">
<center>Strategy</center></div>
<!--/div-->
<div class="l">
</div>
<div class="r">
<div>
</div>
</div>
</div>
<div class="BlockContent">
<div class="PostContent">
<img src="images/03.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque sed felis. Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam diam dictum urna. </p>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>

</div>
<div class="cleared"></div>
</div>

</div>
</div>
<div class="Post">
<div class="Post-body">
<div class="Post-inner">
<h2 class="PostHeaderIcon-wrapper">
<span class="PostHeader">Who uses our products?</span>
</h2>
<div class="PostContent">



<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit, <a href="#" title="test link">test link</a>.
Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>.
Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.
Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc.
Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>

<blockquote>
<p>
&#8220;This stylesheet is going to help so freaking much.&#8221;
<br />
-Blockquote
</p>
</blockquote>
<br />
<table class="article" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr class="even">
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody></table>

<p>
<a class="Button" href="javascript:void(0)">
<span class="btn">
<span class="t">Join&nbsp;Now!</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</a>
</p>

</div>
<div class="cleared"></div>
</div>

</div>
</div>
</div>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mar Feb 16, 2010 11:11 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
Esta es la parte derecha de la página. Está estructurada en tres bloques que podemos modificar o borrar por separado.

Marco en azul el bloque del Newsletter.
Marco en verde el bloque de Highlights.
Marco en rojo el bloque de Contact info.


Citar:
<div class="sidebar1">
<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"><div></div></div>
<div class="Block-bl"><div></div></div>
<div class="Block-br"><div></div></div>
<div class="Block-tc"><div></div></div>
<div class="Block-bc"><div></div></div>
<div class="Block-cl"><div></div></div>
<div class="Block-cr"><div></div></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="header-tag-icon">
<div class="BlockHeader-text">
Newsletter
</div>
</div>
<div class="l"></div>
<div class="r"><div></div></div>
</div>
<div class="BlockContent">
<div class="BlockContent-body">
<div><form method="get" id="newsletterform" action="javascript:void(0)">
<input type="text" value="" name="email" id="s" style="width: 95%;" />
<button class="Button" type="submit" name="search">
<span class="btn">
<span class="t">Subscribe</span>
<span class="r"><span></span></span>
<span class="l"></span>
</span>
</button>
</form></div>
</div>
</div>
</div>
</div>
<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"><div></div></div>
<div class="Block-bl"><div></div></div>
<div class="Block-br"><div></div></div>
<div class="Block-tc"><div></div></div>
<div class="Block-bc"><div></div></div>
<div class="Block-cl"><div></div></div>
<div class="Block-cr"><div></div></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="header-tag-icon">
<div class="BlockHeader-text">
Highlights
</div>
</div>
<div class="l"></div>
<div class="r"><div></div></div>
</div>
<div class="BlockContent">
<div class="BlockContent-body">
<div>
<ul><li><b>Jun 14, 2008</b>
<p>Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam
diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede,
molestie eget, rhoncus at, convallis
ut, eros. Aliquam pharetra.<br/>
<a href="javascript:void(0)">Read more...</a>
</p></li></ul>
<ul><li><b>Aug 24, 2008</b>
<p>Aliquam sit amet felis. Mauris semper,
velit semper laoreet dictum, quam
diam dictum urna, nec placerat elit
nisl in quam. Etiam augue pede,
molestie eget, rhoncus at, convallis
ut, eros. Aliquam pharetra.<br/>
<a href="javascript:void(0)">Read more...</a>
</p></li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="Block">
<div class="Block-tl"></div>
<div class="Block-tr"><div></div></div>
<div class="Block-bl"><div></div></div>
<div class="Block-br"><div></div></div>
<div class="Block-tc"><div></div></div>
<div class="Block-bc"><div></div></div>
<div class="Block-cl"><div></div></div>
<div class="Block-cr"><div></div></div>
<div class="Block-cc"></div>
<div class="Block-body">
<div class="BlockHeader">
<div class="header-tag-icon">
<div class="BlockHeader-text">
Contact Info
</div>
</div>
<div class="l"></div>
<div class="r"><div></div></div>
</div>
<div class="BlockContent">
<div class="BlockContent-body">
<div>
<img src="images/contact.jpg" alt="an image" style="margin: 0 auto;display:block;width:95%" />
<br />
<b>Company Co.</b><br />
Las Vegas, NV 12345<br />
Email: <a href="mailto:info@company.com">info@company.com</a><br />
<br/>
Phone: (123) 456-7890 <br/>
Fax: (123) 456-7890
</div>
</div>
</div>
</div>
</div>
</div>
</div>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mié Feb 17, 2010 10:15 pm
Perfil
Santi
Site Admin
Avatar de Usuario

Registrado: Mar Oct 06, 2009 8:05 pm
Mensajes: 69
Nota Re: Estructura
El siguiente elemento y último es el pie de página.

Marco en verde las partes modificables.

Citar:
<div class="cleared"></div><div class="Footer">
<div class="Footer-inner">
<a href="#" class="rss-tag-icon" title="RSS"></a>
<div class="Footer-text">
<p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
| <a href="#">Privacy Statement</a><br />
Copyright &copy; 2009 ---. All Rights Reserved.</p>
</div>
</div>
<div class="Footer-background"></div>
</div>
</div>
</div>
<div class="cleared"></div>
<p class="page-footer">Web Template created by <a href="http://www.plantilleando.com">Plantilleando</a>.</p>
</div>

</body>
</html>

_________________
Suelo estar por el foro de 17:00h a 24:00h Europa occidental, GMT

Mié Feb 17, 2010 10:21 pm
Perfil
Mostrar mensajes previos:  Ordenar por  
Este tema está cerrado, no puede editar mensajes o enviar nuevas respuestas   Página 1 de 1
  [ 9 mensajes ] 

Índice general » Tutorías » Estructura Plantilla html

Todos los horarios son UTC


¿Quién está conectado?

Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 2 invitados

No puede abrir nuevos temas en este Foro
No puede responder a temas en este Foro
No puede editar sus mensajes en este Foro
No puede borrar sus mensajes en este Foro

Buscar:
Saltar a:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Forum style by ST Software for PTF.
Traducción al español por Huan Manwë