La zona de contenido es el área donde propiamente se colocara todo el contenido de las paginas Internas. De momento existen 4 modelos (tipos) para las paginas internas en cuanto a su estructura, la cual esta basada de manera similar a las paginas de inicio.
Se usan los mismo elemento de las paginas de inicio, como son: el concepto de renglón y columna, los cuales ya también están predefinidos para las paginas internas.
cuadro B 74.75%
cuadro K 24.25%
<!--Renglón tipo 2-->
<div class="renglon">
<div class="cuadro B margen_derecho">
<p>cuadro B <strong>74.75%</strong></p>
</div>
<div class="cuadro K">
<p>cuadro K<strong> 24.25%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 2-->
.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.B { width: 74.75%; }
.K { width: 24.25%; }
.margen_derecho { margin-right: 1%; }
cuadro D 65%
cuadro G 34%
<!--Renglón tipo 1-->
<div class="renglon">
<div class="cuadro D margen_derecho">
<p>cuadro D <strong>65%</strong></p>
</div>
<div class="cuadro G">
<p>cuadro G<strong> 34%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 1-->
.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.D { width: 65%; }
.G { width: 34%; }
.margen_derecho { margin-right: 1%; }
cuadro P 79.8%
cuadro M 19.2%
<!--Renglón tipo 3-->
<div class="renglon">
<div class="cuadro P margen_derecho">
<p>cuadro P <strong>79.8%</strong></p>
</div>
<div class="cuadro M">
<p>cuadro M<strong> 19.2%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 3-->
.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.P { width: 79.8%; }
.M { width: 19.2%; }
.margen_derecho { margin-right: 1%; }
cuadro A100%
<!--Renglón tipo 4-->
<div class="renglon">
<div class="cuadro A margen_derecho">
<p>cuadro A <strong>100%</strong></p>
</div>
</div>
<!-- fin Renglón tipo 4-->
.renglon { display: table; margin-bottom: 1em; margin-right: auto; margin-left: auto; width: 100%; max-width: 1492px; }
.cuadro { float: left; min-height: 16em; border-style: none; margin-bottom: 0; }
.A { width: 100%; }
.margen_derecho { margin-right: 1%; }
Ruta de navegacion o Breadcrumbs
<!-- Breadcrumb -->
<ul class="breadcrumbs">
<li><a title="Inicio" href="index.php">Inicio</a></li>
<li><a title="Plantillas 2012" href="index.php">Plantillas 2012</a></li>
<li><a title="Página Interna" href="interna.php">Página Interna</a></li>
</ul>
<!-- Fin de Breadcrumb -->
ul.breadcrumbs{margin:10px 0 27px;padding:0;line-height:0%;font-size:0;border:1px solid transparent;font-size:0;}
ul.breadcrumbs li{list-style-type:none;margin:0!important;padding:0;display:inline-block;position:relative;line-height:100%;font-size:14px;}
ul.breadcrumbs li a{padding:10px 25px 10px 15px;background:url(imagenes/breadcrumbs-bg.gif) no-repeat right center;text-decoration:none;border-top:1px solid #efefef;border-bottom:1px solid #efefef;font-size:12px;}
ul.breadcrumbs li.last a{color:#333;cursor:default;text-decoration:none;background:none;}
ul.breadcrumbs a:hover{text-decoration:underline;}
ul.breadcrumbs li.primera a{border-left:1px solid #efefef;}
ul.breadcrumbs li.ultima a{border-right:1px solid #efefef;font-weight:bold;background-image:none;color:maroon;}
El archivo general.js incluye la siguiente declaración:
$('ul').find('li:first-child').addClass('primera');
$('ul').find('li:last-child').addClass('ultima');
la cual agrega automáticamente el atributo class="primera" al primer elemento <li> y el atributo class="ultima" al ultimo elemento <li>, por lo que de usar el archivo general.js un html
Se uso para fines de ejemplo unicamente el servicio de Adthis
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style herramientas_del_usuario">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<!-- AddThis Button END -->
.herramientas_del_usuario { margin-bottom: 16px; height: 1em; }
Se uso para fines de ejemplo unicamente el servicio de Adthis
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fdf8cc94940859d"></script>
Este código depende de una cuenta independiente.
Paginas Internas para las plantillas 2012
<h2>Paginas Internas para las plantillas 2012</h2>
h2 { font-size: 1.3em; color: maroon; }
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
Ejemplo 1 :
<p>
<img class="imagen100" src="imagenes/ejemplos/imagen_cuadro_D_2.jpg" alt="Imagen de Prueba" />
<strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, ..............</p>
Ejemplo 2 :
<p>
<img class="imagen70" src="imagenes/ejemplos/imagen_cuadro_D_2.jpg" alt="Imagen de Prueba" />
<strong>Lorem Ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, ..............</p>
.imagen100 { width: 100%; }
.imagen70 { width: 70%; float: left; margin: 0 .5em .5em; }
Última modificación :
Sábado 9 de Junio de 2012, Rogelio Argumedo Uribe
<p class="autor_nota">
Última modificación : <br />Sábado 9 de Junio de 2012, Rogelio Argumedo Uribe
</p>
.autor_nota { color: #ba5112; text-align: right; font-size: .7em; }
PRESIDENCIA DE LA REPÚBLICA, MÉXICO - ALGUNOS DERECHOS RESERVADOS © 2012 - POLÍTICAS DE PRIVACIDAD