Spanish (Español) translation by Jorge Montoya (you can also view the original English article)
Ha pasado un tiempo, pero hoy, durante la fase de codificación de este tutorial masivo, vamos a comenzar la conversión HTML de nuestro tema. Ya hemos diseñado la página en su totalidad en Photoshop, así que ahora veremos la conversión de nuestra página de inicio en una página web HTML válida.
A lo largo de nuestra fase de conversión seguiremos buenas prácticas, usaremos HTML 5 válido (doctype, a pesar de que ninguno de los elementos de la especificación más recientes) y CSS 2.1 para el máximo soporte del navegador.
El Plan de Juego
Utilizaremos este proceso general para convertir nuestro diseño de Photoshop en HTML en tres fases
Fase 1
- Crear estructura de documento/carpeta/sitio.
- Definir el tipo de documento.
- Inspeccionar el diseño principal y descubrir el marcado básico general.
- Inspeccionar las secciones específicas de la página para obtener una idea de cómo hacer el marcado de la misma.
- Insertar etiquetas HTML de acuerdo a nuestras ideas de marcado y terminar la codificación HTML.
Fase 2
- Restablecer los estilos predeterminados de los navegadores.
- Agregar algunos estilos predeterminados para elementos HTML comunes.
- Posicionar y diseñar los elementos secuencialmente de arriba hacia abajo y sección por sección.
Fase 3
- Comprobaremos nuestro diseño en todos los navegadores modernos y compensaremos en caso de IE.
- Finalmente, agregaremos algunos comportamientos a nuestro tema con algunos complementos y scripts de jQuery personalizados y de terceros.
Nuestro tema es muy simple, por lo que necesitamos cortar muy pocos gráficos de nuestro diseño. Esos gráficos que rebanamos se harán tan necesarios como al acercarnos al HTML y CSS. Por favor, siga el tutorial de principio a fin con atención, ya que voy a discutir cada truco sólo una vez.
Recursos Utilizados Para Este Proyecto
Puede usar sus propios recursos si lo desea, pero aquí está la lista completa de las imágenes e iconos que he usado en el tutorial:
- Imágenes - Lil Rhody Dan, Flickr
- Feliz Navidad (foto) - del grupo de flickr de PSDTuts
- Íconos sociales - wefunction
- Pájaro de Twitter - webtreats
- JQuery - 1.4.2 Biblioteca de JavaScript
- Plugin JQuery prettyPhoto
- Plugin JQuery Cycle
Generalmente, la conversión a HTML consta de tres partes independientes:
- Contenido (HTML/XHTML)
- Presentación (CSS) y
- Comportamiento (JS)
Las tres sub-partes de hoy se definen a continuación. Siéntase libre de saltar hacia adelante y hacia atrás cuando usted es experto en una cierta habilidad esbozada en una sección específica.
- Parte A - Contenido - Crear marcado y poblar la página Con contenido.
- Parte B - Presentación - Posicionamiento y diseño de contenido con CSS puro.
- Parte C - Comportamiento - Definición de interacciones con JavaScript
¡Vamos a convertir nuestro diseño de Photoshop en una página HTML funcional!
Paso A - 1: Creación de la Estructura del Sitio
Crear una estructura de carpetas bien pensada es extremadamente importante para cualquier trabajo de desarrollo web. Teniendo esto en cuenta, primero crearemos nuestra estructura de carpetas. Utilice la imagen A - 1a como guía para crear su estructura de carpetas.
- En la carpeta de assets, colocaremos todos nuestros recursos: imágenes, videos, flash, etc.
- En la carpeta de archivos, hay dos subcarpetas denominadas, códigos e imágenes.
- La carpeta denominada códigos es para archivos css (hoja de estilos) y js (JavaScript).
- Todas nuestras imágenes utilizadas para crear este tema se colocarán dentro de la carpeta de imágenes.
- Nuestros archivos HTML estarán directamente dentro de la carpeta ICONIFY.
Paso A - 2: El Primer Documento HTML
Cree un nuevo archivo HTML y llámelo index.html. Abra el archivo en su editor HTML/de Cógigo favorito. Coloque el siguiente contenido dentro de su archivo index.html.
1 |
|
2 |
|
3 |
<!DOCTYPE HTML>
|
4 |
<head>
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
6 |
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" /> |
7 |
<meta name="description" content="A brief description of this website or your business." /> |
8 |
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" /> |
9 |
|
10 |
<title>ICONIFY :: Welcome</title> |
11 |
<!-- Favorites icon -->
|
12 |
<link rel="shortcut icon" href="assets/favicon.ico" /> |
13 |
|
14 |
</head>
|
15 |
<body>
|
16 |
|
17 |
</body>
|
18 |
</html>
|
Este es un documento HTML 5 y lo estamos asegurando estableciendo su doctype en HTML. En la sección head, colocamos algunas etiquetas meta como: author, description, keywords, estas etiquetas meta ayudan a los motores de búsqueda a encontrar e indexar fácilmente nuestras páginas web. También estamos declarando el title de nuestra página y favicon.
Paso A - 3: Inspección del Diseño
Inspeccionando el diseño de la página de inicio, encontramos tres secciones horizontales: #header, #content y #footer. Dos (header, footer) de estas tres secciones son estáticas, porque van a ser los mismos a través del sitio. Por lo tanto, dependiendo de esta idea de marcado preliminar del diseño, nuestro marcado HTML será:
1 |
|
2 |
|
3 |
<body>
|
4 |
|
5 |
<div id="header"> |
6 |
<div class="inner"> |
7 |
header |
8 |
</div><!-- end of .inner --> |
9 |
</div><!-- end of #header --> |
10 |
|
11 |
<div id="content"> |
12 |
<div class="inner"> |
13 |
content |
14 |
</div><!-- end of .inner --> |
15 |
</div><!-- end of #content --> |
16 |
|
17 |
<div id="footer"> |
18 |
<div class="inner"> |
19 |
footer |
20 |
</div><!-- end of .inner --> |
21 |
</div><!-- end of #footer --> |
22 |
|
23 |
</body>
|
24 |
</html>
|
Nuestras tres secciones verticales son div#header, div#content, y div#footer. También tenga en cuenta que dentro de cada sección, hay un elemento div.inner, esto es para el efecto de resplandor de cada sección y también colocaremos todos nuestros elementos dentro de estos contenedores div.inner.
En los navegadores, nuestro documento ahora se parece a esta imagen:
Nota: cada etiqueta de cierre tiene un comentario asociado, que describe el elemento que se está cerrando. Es recomendable siempre comentar partes o secciones importantes en un documento HTML. Seguiremos esta práctica hoy.
Ahora vamos a poblar nuestras tres secciones con contenido HTML, secuencialmente de cabecera a pie de página
Paso A - 4: Poblar el Encabezado
Inspeccione el diseño y localice las partes HTML en la sección de encabezado. Utilice la imagen A - 4a como guía.
Aquí está nuestro diseño de encabezado traducido a marcado HTML:
1 |
|
2 |
|
3 |
<div id="header"> |
4 |
<div class="inner"> |
5 |
<ul class="top"> |
6 |
|
7 |
</ul><!-- end of .top --> |
8 |
<div id="nav"> |
9 |
<div id="logo"> |
10 |
|
11 |
</div><!-- end of #logo --> |
12 |
<ul id="menu"> |
13 |
|
14 |
</ul><!-- end of #menu --> |
15 |
</div><!-- end of #nav --> |
16 |
</div><!-- end of .inner --> |
17 |
</div><!-- end of #header --> |
Vamos a cortar nuestra primera imagen, el logo, así que abra el diseño del índice en Photoshop. Seleccione la herramienta Rebanada de dentro del grupo de Herramientas de Recorte. Ahora utilice las imágenes A - 4b y A - 4c como guía para recortar su logotipo. A continuación, vaya a Archivo->Guardar para Web y Dispositivos o presione Alt+Mayús+Ctrl+S desde el teclado para llamar al cuadro de diálogo Guardar para Web y Dispositivos. Seleccione PNG-24 y Transparent y guárdelo en nuestra carpeta raíz archivos-> imágenes como se muestra en la imagen A - 4d.
Utilizaremos estas mismas técnicas/pasos para cortar las siguientes imágenes. Solamente las dimensiones serán mencionadas a partir de ahora.
Vamos a llenar la sección #header con contenidos asociados. Copie lo siguiente en su documento:
1 |
|
2 |
|
3 |
<div id="header"> |
4 |
<div class="inner"> |
5 |
<ul class="top"> |
6 |
<li><a href="#">Downloads</a></li> |
7 |
<li><a href="#">Newsletter</a></li> |
8 |
<li><a href="#">Login</a></li> |
9 |
<li>
|
10 |
<form action="#" method="get"> |
11 |
<fieldset>
|
12 |
<legend>Search Form</legend> |
13 |
<label for="searchTerm">Search</label> |
14 |
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" /> |
15 |
<input type="submit" value="Search" /> |
16 |
</fieldset>
|
17 |
</form>
|
18 |
</li>
|
19 |
</ul><!-- end of .top --> |
20 |
<div id="nav"> |
21 |
<div id="logo"> |
22 |
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a> |
23 |
</div><!-- end of #logo --> |
24 |
<ul id="menu"> |
25 |
<li class="active"><a href="index.html">Home</a></li> |
26 |
<li class="dropdown"><a href="#">Features</a></li> |
27 |
<li><a href="portfolio.html">Portfolio</a></li> |
28 |
<li><a href="blogs.html">Blog</a></li> |
29 |
<li><a href="contact.html">Contact</a></li> |
30 |
</ul><!-- end of #menu --> |
31 |
</div><!-- end of #nav --> |
32 |
</div><!-- end of .inner --> |
33 |
</div><!-- end of #header --> |
Nuestro ul.top es un elemento de lista y por lo tanto está compuesto de elementos li. El último hijo de ul.top tiene nuestro formulario de búsqueda. Dentro de div#nav, hay dos hijos inmediatos: div#logo y ul#menu. ul#menu es un elemento de lista y todos sus hijos son elementos de menú. Observe que un elemento de menú tiene una clase li.active y un elemento de menú tiene una clase li.dropdown. Estas simplemente están para indicar elementos de menú activos y desplegables, respectivamente.
Su navegador debería renderizar index.html así
Paso A - 5: Llene #content
Inspeccione el diseño y localice las partes HTML en la sección content. Utilice la siguiente imagen como guía.
Después de inspeccionar la sección de contenido en el diseño, podemos planificar nuestras sub-secciones HTML dentro de la sección #content como se muestra a continuación.
1 |
|
2 |
|
3 |
<div id="content"> |
4 |
<div class="inner"> |
5 |
|
6 |
<div id="slider"> |
7 |
<ul id="cycle"> |
8 |
|
9 |
</ul>
|
10 |
<div id="cyclePager"></div> |
11 |
</div><!-- end of #slider --> |
12 |
|
13 |
<ul class="promo-col-4"> |
14 |
|
15 |
</ul><!-- end of .promo-col-4 --> |
16 |
|
17 |
<hr /> |
18 |
|
19 |
<ul class="promo-col-3"> |
20 |
|
21 |
</ul><!-- end of .promo-col-3 --> |
22 |
|
23 |
<div class="testimonial"> |
24 |
|
25 |
</div><!-- end of .testimonial --> |
26 |
|
27 |
<div id="recentProjects"> |
28 |
<div class="bar"> |
29 |
|
30 |
</div><!-- end of .bar --> |
31 |
<ul class=""> |
32 |
|
33 |
</ul><!-- end of . --> |
34 |
</div><!-- end of #recentProjects --> |
35 |
|
36 |
</div><!-- end of .inner --> |
37 |
</div><!-- end of #content --> |
Ahora vamos a llenar la sección #content con algunos contenidos, secuencialmente, de arriba a abajo. Copie el código siguiente en su documento html.
1 |
|
2 |
|
3 |
<div id="slider"> |
4 |
<ul id="cycle"> |
5 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/1.jpg" height="336" width="936" alt="Slides" /></li> |
6 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/2.jpg" height="336" width="936" alt="Slides" /></li> |
7 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/3.jpg" height="336" width="936" alt="Slides" /></li> |
8 |
</ul>
|
9 |
<div id="cyclePager"></div> |
10 |
</div><!-- end of #slider --> |
Dentro de #slider tenemos tres enlaces de imagen, que son nuestras diapositivas. Y un div#cyclePager para el paginador o la navegación deslizante.
1 |
|
2 |
|
3 |
<ul class="promo-col-4"> |
4 |
<li class=""> |
5 |
<a href="#" title="Unlimited Columns With 960 Grid"> |
6 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width="48" alt="Blueprint" /> |
7 |
</a>
|
8 |
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5> |
9 |
</li>
|
10 |
<li class=""> |
11 |
<a href="#" title="Unlimited Colors (Change CSS Hex)"> |
12 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width="48" alt="Colors" /> |
13 |
</a>
|
14 |
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5> |
15 |
</li>
|
16 |
<li class=""> |
17 |
<a href="#" title="Display Images With A Unique Flair"> |
18 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48" alt="Photos" /> |
19 |
</a>
|
20 |
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5> |
21 |
</li>
|
22 |
<li class=""> |
23 |
<a href="#" title="Supports All Modern Browsers"> |
24 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48" alt="Browsers" /> |
25 |
</a>
|
26 |
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5> |
27 |
</li>
|
28 |
</ul><!-- end of .promo-col-4 --> |
29 |
|
30 |
<hr /> |
Este es un elemento promocional de 4 columnas llamado ul.promo-col-4 y veremos cómo posicionarlas de acuerdo a nuestro diseño en la parte de CSS. Su estructura es bastante simple -- solo coloque los elementos de cada columna dentro de un li de ul.promo-col-4.
Actualmente, nuestra página se muestra en el navegador de esta forma
1 |
|
2 |
|
3 |
<ul class="promo-col-3"> |
4 |
<li class=""> |
5 |
<a href="#" title="Using Clone Stamp Tool"> |
6 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/1.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
7 |
</a>
|
8 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
9 |
<p>
|
10 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
11 |
</p>
|
12 |
<a href="#" class="btn" title="Read More">Read More</a> |
13 |
</li>
|
14 |
<li class=""> |
15 |
<a href="#" title="Using Clone Stamp Tool"> |
16 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/2.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
17 |
</a>
|
18 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
19 |
<p>
|
20 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
21 |
</p>
|
22 |
<a href="#" class="btn" title="Read More">Read More</a> |
23 |
</li>
|
24 |
<li class=""> |
25 |
<a href="#" title="Using Clone Stamp Tool"> |
26 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/3.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
27 |
</a>
|
28 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
29 |
<p>
|
30 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
31 |
</p>
|
32 |
<a href="#" class="btn" title="Read More">Read More</a> |
33 |
</li>
|
34 |
</ul><!-- end of .promo-col-3 --> |
Esta sección promocional es la misma que ul.promo-col-4, la única diferencia es que tiene 3 columnas. Y se muestra en los navegadores de la siguiente manera:
1 |
|
2 |
|
3 |
<div class="testimonial"> |
4 |
<div class="inner"> |
5 |
<blockquote>
|
6 |
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your system ultimately produces. Viewing color accurately allows you to make sound color decisions throughout your workflow, from digital capture through final output. Color management also allows you to create output based on ISO, SWOP, and Japan Color print production standards. |
7 |
</blockquote>
|
8 |
<span class="arrow"><!-- blockquote box arrow --></span> |
9 |
</div>
|
10 |
<cite>
|
11 |
<strong>Thomas Miller</strong> CEO, envato |
12 |
</cite>
|
13 |
</div><!-- end of .testimonial --> |
Esta es la caja de testimonios que aparece en la página principal. Dentro del elemento padre div.testimonial, colocamos un elemento blockquote dentro de un elemento div.inner. Este elemento div.inner es para el trazo más oscuro interior de la caja de testimonios. Usaremos algunas técnicas en la porción de CSS para diseñar la caja de testimonios.
1 |
|
2 |
|
3 |
<div id="recentProjects"> |
4 |
<div class="bar"> |
5 |
<h5>
|
6 |
Recent Projects |
7 |
</h5>
|
8 |
</div><!-- end of .bar --> |
9 |
<ul class=""> |
10 |
<li class=""> |
11 |
<a href="#" > |
12 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/1.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
13 |
</a>
|
14 |
</li>
|
15 |
<li class=""> |
16 |
<a href="#" > |
17 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/2.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
18 |
</a>
|
19 |
</li>
|
20 |
<li class=""> |
21 |
<a href="#" > |
22 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/3.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
23 |
</a>
|
24 |
</li>
|
25 |
<li class=""> |
26 |
<a href="#" > |
27 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/4.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
28 |
</a>
|
29 |
</li>
|
30 |
</ul><!-- end of .projects --> |
31 |
</div><!-- end of #recentProjects --> |
div#recentProjects tiene dos hijos: div.bar para el encabezado y un elemento ul con cuatro descendientes li para los elementos del proyecto reciente. Eche un vistazo a la vista previa del navegador:
Paso A - 6: Rellenar el Pie de Página
Como de costumbre, inspeccione el diseño y localice las partes HTML en la sección footer. Utilice la imagen A - 6a como guía.
Después de inspeccionar la sección de pie de página en el diseño, podemos planificar nuestras sub-secciones HTML dentro de la sección #footer, como se muestra a continuación.
1 |
|
2 |
|
3 |
<div id="footer" class=""> |
4 |
<div class="inner"> |
5 |
|
6 |
<div class="top"> |
7 |
</div><!-- end of .top --> |
8 |
|
9 |
<ul class="content"> |
10 |
</ul><!-- end of .content --> |
11 |
|
12 |
<div class="bottom"> |
13 |
</div><!-- end of .bottom --> |
14 |
|
15 |
</div><!-- end of .inner --> |
16 |
</div><!-- end of #footer --> |
Copie el siguiente código en su documento html.
1 |
|
2 |
|
3 |
<div class="top"> |
4 |
<div id="twitter" class=""> |
5 |
<!-- Twitter plugin jQuery.getTwitter will automatically fillup this div -->
|
6 |
</div><!-- end of #twitter --> |
7 |
<ul class="social"> |
8 |
<li><h5>Get Social</h5></li> |
9 |
<li>
|
10 |
<a href="#" title="RSS"> |
11 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" width="32" alt="RSS" /> |
12 |
</a>
|
13 |
</li>
|
14 |
<li>
|
15 |
<a href="#" title="Flickr"> |
16 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32" width="32" alt="Flickr" /> |
17 |
</a>
|
18 |
</li>
|
19 |
<li>
|
20 |
<a href="#" title="Facebook"> |
21 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="32" width="32" alt="Facebook" /> |
22 |
</a>
|
23 |
</li>
|
24 |
<li>
|
25 |
<a href="#" title="Twitter"> |
26 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="32" width="32" alt="Twitter" /> |
27 |
</a>
|
28 |
</li>
|
29 |
</ul><!-- end of .social --> |
30 |
</div><!-- end of .top --> |
Hay dos descendientes inmediatos dentro de div.top : uno para nuestro encantador plugin de twitter llamado div#twitter y otro para nuestros enlaces sociales- ul.social.
1 |
|
2 |
|
3 |
<ul class="content"> |
4 |
<li class=""> |
5 |
<h5>About ICONIFY</h5> |
6 |
<p>
|
7 |
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options page makes it easier for non-technical users to make theme changes without getting their hands dirty with code. I'll show you how to make one from scratch! |
8 |
</p>
|
9 |
</li>
|
10 |
<li class=""> |
11 |
<h5>Categories</h5> |
12 |
<ul class="list"> |
13 |
<li><a href="#" title="Graphics Design">Graphics Design</a></li> |
14 |
<li><a href="#" title="Web Graphics">Web Graphics</a></li> |
15 |
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li> |
16 |
<li><a href="#" title="3D Graphics">3D Graphics</a></li> |
17 |
<li><a href="#" title="Web Development">Web Development</a></li> |
18 |
<li><a href="#" title="Programming">Programming</a></li> |
19 |
<li><a href="#" title="Scripting">Scripting</a></li> |
20 |
<li><a href="#" title="Wordpress">Wordpress</a></li> |
21 |
<li><a href="#" title="Cartooning">Cartooning</a></li> |
22 |
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li> |
23 |
<li><a href="#" title="Information Architecture">Information Architecture</a></li> |
24 |
</ul><!-- end of .cat --> |
25 |
</li>
|
26 |
<li class=""> |
27 |
<h5>Recent Posts</h5> |
28 |
<ul class="blogList"> |
29 |
<li>
|
30 |
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a> |
31 |
<h5><a href="#">Developing Future Web Apps</a></h5> |
32 |
<p>
|
33 |
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a> |
34 |
</p>
|
35 |
</li>
|
36 |
<li>
|
37 |
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a> |
38 |
<h5><a href="#">Developing Future Web Apps</a></h5> |
39 |
<p>
|
40 |
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a> |
41 |
</p>
|
42 |
</li>
|
43 |
</ul><!-- end of .blogList --> |
44 |
</li>
|
45 |
</ul><!-- end of .content --> |
El ul.content es una sección de tres columnas y cada elemento li es una columna. Utilizaremos algunos trucos en la parte de CSS para diseñarlos y posicionarlos correctamente.
1 |
|
2 |
|
3 |
<div class="bottom"> |
4 |
<a href="#" id="toTop" title="Scroll To Top"></a> |
5 |
<hr /> |
6 |
<p class="copyright"> |
7 |
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved. |
8 |
|
9 |
<span style="float: right;"> |
10 |
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a> |
11 |
</span>
|
12 |
</p>
|
13 |
</div><!-- end of .bottom --> |
div.bottom debería explicarse por sí mismo. Y esta es la vista previa del navegador:
Página Principal Final HTML
1 |
|
2 |
|
3 |
<!DOCTYPE HTML>
|
4 |
<head>
|
5 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
6 |
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" /> |
7 |
<meta name="description" content="A brief description of this website or your business." /> |
8 |
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" /> |
9 |
|
10 |
<title>ICONIFY :: Welcome</title> |
11 |
<!-- Favorites icon -->
|
12 |
<link rel="shortcut icon" href="assets/favicon.ico" /> |
13 |
|
14 |
</head>
|
15 |
<body>
|
16 |
|
17 |
<div id="header"> |
18 |
<div class="inner"> |
19 |
<ul class="top"> |
20 |
<li><a href="#">Downloads</a></li> |
21 |
<li><a href="#">Newsletter</a></li> |
22 |
<li><a href="#">Login</a></li> |
23 |
<li>
|
24 |
<form action="#" method="get"> |
25 |
<fieldset>
|
26 |
<legend>Search Form</legend> |
27 |
<label for="searchTerm">Search</label> |
28 |
<input type="text" name="searchTerm" id="searchTerm" size="40" maxlength="150" /> |
29 |
<input type="submit" value="Search" /> |
30 |
</fieldset>
|
31 |
</form>
|
32 |
</li>
|
33 |
</ul><!-- end of .top --> |
34 |
<div id="nav"> |
35 |
<div id="logo"> |
36 |
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a> |
37 |
</div><!-- end of #logo --> |
38 |
<ul id="menu"> |
39 |
<li class="active"><a href="index.html">Home</a></li> |
40 |
<li class="dropdown"><a href="#">Features</a></li> |
41 |
<li><a href="portfolio.html">Portfolio</a></li> |
42 |
<li><a href="blogs.html">Blog</a></li> |
43 |
<li><a href="contact.html">Contact</a></li> |
44 |
</ul><!-- end of #menu --> |
45 |
</div><!-- end of #nav --> |
46 |
</div><!-- end of .inner --> |
47 |
</div><!-- end of #header --> |
48 |
|
49 |
<div id="content"> |
50 |
<div class="inner"> |
51 |
<div id="slider"> |
52 |
<ul id="cycle"> |
53 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/1.jpg" height="336" width="936" alt="Slides" /></li> |
54 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/2.jpg" height="336" width="936" alt="Slides" /></li> |
55 |
<li><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/slides/3.jpg" height="336" width="936" alt="Slides" /></li> |
56 |
</ul>
|
57 |
<div id="cyclePager"></div> |
58 |
</div><!-- end of #slider --> |
59 |
<ul class="promo-col-4"> |
60 |
<li class=""> |
61 |
<a href="#" title="Unlimited Columns With 960 Grid"> |
62 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/blueprint.png" height="48" width="48" alt="Blueprint" /> |
63 |
</a>
|
64 |
<h5><a href="#" title="Unlimited Columns With 960 Grid">Unlimited Columns With 960 Grid</a></h5> |
65 |
</li>
|
66 |
<li class=""> |
67 |
<a href="#" title="Unlimited Colors (Change CSS Hex)"> |
68 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/colouralt.png" height="48" width="48" alt="Colors" /> |
69 |
</a>
|
70 |
<h5><a href="#" title="Unlimited Colors (Change CSS Hex)">Unlimited Colors (Change CSS Hex)</a></h5> |
71 |
</li>
|
72 |
<li class=""> |
73 |
<a href="#" title="Display Images With A Unique Flair"> |
74 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/photos.png" height="48" width="48" alt="Photos" /> |
75 |
</a>
|
76 |
<h5><a href="#" title="Display Images With A Unique Flair">Display Images With A Unique Flair</a></h5> |
77 |
</li>
|
78 |
<li class=""> |
79 |
<a href="#" title="Supports All Modern Browsers"> |
80 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/icons/safari.png" height="48" width="48" alt="Browsers" /> |
81 |
</a>
|
82 |
<h5><a href="#" title="Supports All Modern Browsers">Supports All Modern Browsers</a></h5> |
83 |
</li>
|
84 |
</ul><!-- end of .promo-col-4 --> |
85 |
<hr /> |
86 |
<ul class="promo-col-3"> |
87 |
<li class=""> |
88 |
<a href="#" title="Using Clone Stamp Tool"> |
89 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/1.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
90 |
</a>
|
91 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
92 |
<p>
|
93 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
94 |
</p>
|
95 |
<a href="#" class="btn" title="Read More">Read More</a> |
96 |
</li>
|
97 |
<li class=""> |
98 |
<a href="#" title="Using Clone Stamp Tool"> |
99 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/2.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
100 |
</a>
|
101 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
102 |
<p>
|
103 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
104 |
</p>
|
105 |
<a href="#" class="btn" title="Read More">Read More</a> |
106 |
</li>
|
107 |
<li class=""> |
108 |
<a href="#" title="Using Clone Stamp Tool"> |
109 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/promo/3.jpg" class="border" height="138" width="298" alt="Promo Picture" /> |
110 |
</a>
|
111 |
<h4><a href="#">Using Clone Stamp Tool</a></h4> |
112 |
<p>
|
113 |
To use the Clone Stamp tool, you tset a sampling point on the area you want to copy (clone) the pixels from and paint over another area. To paint with the most current sampling point whenever you stop and resume painting, select the Aligned option. Deselect the Aligned option to paint starting from the initial sampling point no matter how many times you stop and resume painting. |
114 |
</p>
|
115 |
<a href="#" class="btn" title="Read More">Read More</a> |
116 |
</li>
|
117 |
</ul><!-- end of .promo-col-3 --> |
118 |
<div class="testimonial"> |
119 |
<div class="inner"> |
120 |
<blockquote>
|
121 |
A color management system reconciles color differences among devices so that you can be reasonably certain of the colors your system ultimately produces. Viewing color accurately allows you to make sound color decisions throughout your workflow, from digital capture through final output. Color management also allows you to create output based on ISO, SWOP, and Japan Color print production standards. |
122 |
</blockquote>
|
123 |
<span class="arrow"><!-- blockquote box arrow --></span> |
124 |
</div>
|
125 |
<cite>
|
126 |
<strong>Thomas Miller</strong> CEO, envato |
127 |
</cite>
|
128 |
</div><!-- end of .testimonial --> |
129 |
<div id="recentProjects"> |
130 |
<div class="bar"> |
131 |
<h5>
|
132 |
Recent Projects |
133 |
</h5>
|
134 |
</div><!-- end of .bar --> |
135 |
<ul class=""> |
136 |
<li class=""> |
137 |
<a href="#" > |
138 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/1.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
139 |
</a>
|
140 |
</li>
|
141 |
<li class=""> |
142 |
<a href="#" > |
143 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/2.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
144 |
</a>
|
145 |
</li>
|
146 |
<li class=""> |
147 |
<a href="#" > |
148 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/3.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
149 |
</a>
|
150 |
</li>
|
151 |
<li class=""> |
152 |
<a href="#" > |
153 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/rcnt-projects/4.jpg" class="border" height="158" width="218" alt="Recent Project" /> |
154 |
</a>
|
155 |
</li>
|
156 |
</ul><!-- end of ul --> |
157 |
</div><!-- end of #recentProjects --> |
158 |
</div><!-- end of .inner --> |
159 |
</div><!-- end of #content --> |
160 |
|
161 |
<div id="footer"> |
162 |
<div class="inner"> |
163 |
<div class="top"> |
164 |
<div id="twitter" class=""> |
165 |
<!-- Twitter plugin jQuery.getTwitter will automatically fillup this div -->
|
166 |
</div><!-- end of #twitter --> |
167 |
<ul class="social"> |
168 |
<li><h5>Get Social</h5></li> |
169 |
<li>
|
170 |
<a href="#" title="RSS"> |
171 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/rss.png" height="32" width="32" alt="RSS" /> |
172 |
</a>
|
173 |
</li>
|
174 |
<li>
|
175 |
<a href="#" title="Flickr"> |
176 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/flickr.png" height="32" width="32" alt="Flickr" /> |
177 |
</a>
|
178 |
</li>
|
179 |
<li>
|
180 |
<a href="#" title="Facebook"> |
181 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/facebook.png" height="32" width="32" alt="Facebook" /> |
182 |
</a>
|
183 |
</li>
|
184 |
<li>
|
185 |
<a href="#" title="Twitter"> |
186 |
<img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/social-icons/twitter.png" height="32" width="32" alt="Twitter" /> |
187 |
</a>
|
188 |
</li>
|
189 |
</ul><!-- end of .social --> |
190 |
</div><!-- end of .top --> |
191 |
<ul class="content"> |
192 |
<li class=""> |
193 |
<h5>About ICONIFY</h5> |
194 |
<p>
|
195 |
Creating themes to give away or sell is great, but not everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options page makes it easier for non-technical users to make theme changes without getting their hands dirty with code. I'll show you how to make one from scratch! |
196 |
</p>
|
197 |
</li>
|
198 |
<li class=""> |
199 |
<h5>Categories</h5> |
200 |
<ul class="list"> |
201 |
<li><a href="#" title="Graphics Design">Graphics Design</a></li> |
202 |
<li><a href="#" title="Web Graphics">Web Graphics</a></li> |
203 |
<li><a href="#" title="User Interface Designing">User Interface Designing</a></li> |
204 |
<li><a href="#" title="3D Graphics">3D Graphics</a></li> |
205 |
<li><a href="#" title="Web Development">Web Development</a></li> |
206 |
<li><a href="#" title="Programming">Programming</a></li> |
207 |
<li><a href="#" title="Scripting">Scripting</a></li> |
208 |
<li><a href="#" title="Wordpress">Wordpress</a></li> |
209 |
<li><a href="#" title="Cartooning">Cartooning</a></li> |
210 |
<li><a href="#" title="Object Oriented Development">Object Oriented Development</a></li> |
211 |
<li><a href="#" title="Information Architecture">Information Architecture</a></li> |
212 |
</ul><!-- end of .cat --> |
213 |
</li>
|
214 |
<li class=""> |
215 |
<h5>Recent Posts</h5> |
216 |
<ul class="blogList"> |
217 |
<li>
|
218 |
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a> |
219 |
<h5><a href="#">Developing Future Web Apps</a></h5> |
220 |
<p>
|
221 |
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a> |
222 |
</p>
|
223 |
</li>
|
224 |
<li>
|
225 |
<a href="#" title=""><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/assets/80x80.jpg" class="border" height="78" width="78" alt="Blog Post" /></a> |
226 |
<h5><a href="#">Developing Future Web Apps</a></h5> |
227 |
<p>
|
228 |
Creating themes to give away or sell is great, everyone who uses your theme will have a solid understanding of HTML/CSS. Providing your theme with an options <a href="#" title="Read More">Read More</a> |
229 |
</p>
|
230 |
</li>
|
231 |
</ul><!-- end of .blogList --> |
232 |
</li>
|
233 |
</ul><!-- end of .content --> |
234 |
<div class="bottom"> |
235 |
<a href="#" id="toTop" title="Scroll To Top"></a> |
236 |
<hr /> |
237 |
<p class="copyright"> |
238 |
Copyright © <a href="#" title="ICONIFY">ICONIFY</a> 2011-2015, All Rights Reserved. |
239 |
|
240 |
<span style="float: right;"> |
241 |
Template By: <a href="http://themeforest.net/user/palpaldal/" title="palpaldal's Themeforest Profile">palpaldal</a> |
242 |
</span>
|
243 |
</p>
|
244 |
</div><!-- end of .bottom --> |
245 |
</div><!-- end of .inner --> |
246 |
</div><!-- end of #footer --> |
247 |
|
248 |
</body>
|
249 |
</html>
|
Parte B Presentación
Hemos terminado la parte de marcado de este tutorial, vamos a pasar al CSS.
Primero, cree algunos archivos CSS en blanco dentro de su carpeta css. También necesitará descargar y enlazar el archivo prettyPhoto.css y el archivo 960.css del sitio web Nomarginsforerroe y 960, respectivamente. Cree y vincule sus hojas de estilo CSS desde el interior de su cabecera de documento como se muestra a continuación:
1 |
|
2 |
|
3 |
<head>
|
4 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 |
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" /> |
6 |
<meta name="description" content="A brief description of this website or your business." /> |
7 |
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" /> |
8 |
|
9 |
<title>ICONIFY :: Welcome</title> |
10 |
<!-- Favorites icon -->
|
11 |
<link rel="shortcut icon" href="assets/favicon.ico" /> |
12 |
|
13 |
<!-- CSS Files -->
|
14 |
<!-- Resetting all default browser markups and styles.-->
|
15 |
<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" /> |
16 |
<!-- 960 Grid ( 12+16 cols) System for easy and flexible markups.-->
|
17 |
<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" /> |
18 |
<!-- Default and template specific styles. -->
|
19 |
<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" /> |
20 |
<!-- prettyPhoto jQuery plugin's CSS styles-->
|
21 |
<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" /> |
22 |
|
23 |
|
24 |
|
25 |
<!-- Weird IE specific codes -->
|
26 |
<!--[if lt IE 8]>
|
27 |
<link rel="stylesheet" type="text/css" href="files/codes/css/ie7.css" media="all" />
|
28 |
<![endif]-->
|
29 |
<!--[if IE 8]>
|
30 |
<link rel="stylesheet" type="text/css" href="files/codes/css/ie8.css" media="all" />
|
31 |
<![endif]-->
|
32 |
|
33 |
</head>
|
En la parte inferior, hemos enlazado dos documentos de hoja de estilo específicamente para los exploradores de IE. Los hemos colocado dentro de un bloque de comentarios condicional que sólo los navegadores de IE entienden.
Paso B - 1: Restablecimiento de Estilos Predeterminados
Es posible que haya notado a estas alturas que, aunque no hemos aplicado ningún estilo CSS a nuestro documento, nuestro contenido no está completamente desarticulado. Estos son los estilos de navegador predeterminados y se aplican a cada página cargada. Para posicionar y diseñar correctamente nuestra página, debemos aplicar algunos estilos básicos para restablecer estos estilos predeterminados, creando así una plantilla en blanco para aplicar nuestros propios estilos y posicionamiento. Vamos a hacer eso desde dentro de nuestro documento reset.css.
Abra el documento reset.css en su editor de texto. A continuación, copie lo siguiente en el documento:
1 |
|
2 |
|
3 |
@charset "utf-8"; |
4 |
/* CSS Document */
|
5 |
/*
|
6 |
|
7 |
~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal
|
8 |
|
9 |
TABLE OF CONTENTS ------------------
|
10 |
|
11 |
1. Style resetting codes (using Eric Meyer's resetter)
|
12 |
http://meyerweb.com/eric/tools/css/reset/
|
13 |
v1.0 | 20080212
|
14 |
|
15 |
2. Default styles of some common XHTML tags/elements.
|
16 |
*/
|
17 |
|
18 |
/* ----------------- Resetting browser defaults ------------------- */
|
19 |
html, body, div, span, applet, object, iframe, |
20 |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
21 |
a, abbr, acronym, address, big, cite, code, |
22 |
del, dfn, em, font, img, ins, kbd, q, s, samp, |
23 |
small, strike, strong, sub, sup, tt, var, |
24 |
b, u, i, center, |
25 |
dl, dt, dd, ol, ul, li, |
26 |
fieldset, form, label, legend, button, |
27 |
table, caption, tbody, tfoot, thead, tr, th, td { |
28 |
background: transparent; |
29 |
border: 0; |
30 |
font-size: 100%; |
31 |
margin: 0; |
32 |
outline: 0; |
33 |
padding: 0; |
34 |
vertical-align: baseline; |
35 |
}
|
36 |
|
37 |
body{ |
38 |
background: #e7e7e7; |
39 |
color: #7c7c7c; |
40 |
font: normal 12px/18px Arial, Helvetica, sans-serif; |
41 |
}
|
42 |
|
43 |
ol, ul{list-style: none;} |
44 |
|
45 |
ol li, ul li{ |
46 |
display: inline; |
47 |
line-height: 0; |
48 |
}
|
49 |
|
50 |
blockquote, q{quotes: none;} |
51 |
|
52 |
blockquote:before, |
53 |
blockquote:after, |
54 |
q:before, |
55 |
q:after{ |
56 |
content: ''; |
57 |
content: none; |
58 |
}
|
59 |
|
60 |
:focus{outline: 0;} |
61 |
|
62 |
/* ----------------- Applying default styles to common XHTML elements ------------------- */
|
63 |
|
64 |
a{ |
65 |
color: #eaa000; |
66 |
text-decoration: none; |
67 |
}
|
68 |
|
69 |
a:hover, a:focus{border-bottom: 1px solid;} |
70 |
|
71 |
abbr{ |
72 |
border-bottom: 1px dotted; |
73 |
letter-spacing: 0.2em; |
74 |
}
|
75 |
|
76 |
acronym{ |
77 |
border-bottom: 1px solid; |
78 |
letter-spacing: 0.1em; |
79 |
}
|
80 |
|
81 |
h1, h2, h3, h4, h5, h6{ |
82 |
color: #2e5bc3; |
83 |
font: bold 100%/1.2 Arial, Helvetica, sans-serif; |
84 |
margin: 18px 0; |
85 |
}
|
86 |
|
87 |
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{color: #2e5bc3;} |
88 |
|
89 |
|
90 |
h1{font-size: 32px;} |
91 |
|
92 |
h2{font-size: 28px;} |
93 |
|
94 |
h3{font-size: 24px;} |
95 |
|
96 |
h4{font-size: 20px;} |
97 |
|
98 |
h5{font-size: 16px;} |
99 |
|
100 |
h6{ |
101 |
font-size: 13px; |
102 |
text-transform: uppercase; |
103 |
}
|
104 |
|
105 |
p{ |
106 |
font-size: 12px; |
107 |
line-height: 18px; |
108 |
margin: 18px 0; |
109 |
}
|
110 |
|
111 |
pre{ |
112 |
font-family: consolas, "Courier New", Courier, monospace; |
113 |
font-size: 14px; |
114 |
line-height: 18px; |
115 |
}
|
116 |
|
117 |
blockquote{ |
118 |
font-size: 12px; |
119 |
font-style: italic; |
120 |
line-height: 18px; |
121 |
margin: 18px 0; |
122 |
padding-top: 6px; |
123 |
}
|
124 |
|
125 |
blockquote+blockquote{ |
126 |
background: none; |
127 |
padding: 0; |
128 |
text-indent: 0; |
129 |
}
|
130 |
|
131 |
cite{ |
132 |
display: block; |
133 |
font-style: normal; |
134 |
line-height: 18px; |
135 |
margin: 18px 0; |
136 |
text-align: right; |
137 |
}
|
138 |
|
139 |
cite strong{display: block;} |
140 |
|
141 |
strong, |
142 |
b{font-weight: bold;} |
143 |
|
144 |
em, |
145 |
i{font-style: italic;} |
146 |
|
147 |
del, |
148 |
strike{text-decoration: line-through;} |
149 |
|
150 |
small{font-size: .8em;} |
151 |
|
152 |
big{font-size: 1.2em;} |
153 |
|
154 |
code{ |
155 |
font-family: consolas, "Courier New", Courier, monospace; |
156 |
padding: 2px 4px; |
157 |
}
|
158 |
|
159 |
input[type="text"], |
160 |
input[type="password"], |
161 |
textarea{ |
162 |
background: #e7e7e7; |
163 |
border: 1px solid #dbdbdb; |
164 |
font-size: 12px; |
165 |
line-height: 12px; |
166 |
margin: 0; |
167 |
padding: 8px 10px 7px; |
168 |
}
|
169 |
|
170 |
input[type="text"]{ |
171 |
color: #666666; |
172 |
font: normal 12px/1 Arial, Helvetica, sans-serif; |
173 |
}
|
174 |
|
175 |
input[type="password"]{ |
176 |
color: #666666; |
177 |
font: normal 12px/1 "Courier New", Courier, monospace; |
178 |
}
|
179 |
|
180 |
textarea{ |
181 |
color: #666666; |
182 |
font: normal 12px/18px Arial, Helvetica, sans-serif; |
183 |
overflow: auto; |
184 |
}
|
185 |
|
186 |
input[type="text"]:focus, |
187 |
input[type="text"]:hover, |
188 |
input[type="password"]:focus, |
189 |
input[type="password"]:hover, |
190 |
textarea:focus, |
191 |
textarea:hover{ |
192 |
background-color: #dedede; |
193 |
border-color: #bbbbbb; |
194 |
}
|
195 |
|
196 |
button, |
197 |
input[type="submit"], |
198 |
input[type="button"], |
199 |
input[type="reset"]{ |
200 |
background: #fcfcfc; |
201 |
border: 1px solid #b6b6b6; |
202 |
color: #7c7c7c; |
203 |
cursor: pointer; |
204 |
display: block; |
205 |
font-size: 12px; |
206 |
height: 32px; |
207 |
line-height: 12px; |
208 |
padding: 0 20px 3px 20px; |
209 |
}
|
210 |
|
211 |
button:focus, |
212 |
button:hover, |
213 |
input[type="submit"]:focus, |
214 |
input[type="submit"]:hover, |
215 |
input[type="button"]:focus, |
216 |
input[type="button"]:hover, |
217 |
input[type="reset"]:focus, |
218 |
input[type="reset"]:hover{ |
219 |
background-color: #b6b6b6; |
220 |
color: #fff; |
221 |
}
|
222 |
|
223 |
hr{ |
224 |
background: #cdcdcd; |
225 |
border: none; |
226 |
border-bottom: 1px solid #f6f6f6; |
227 |
border-top: 1px solid #f6f6f6; |
228 |
display: block; |
229 |
padding-top: 1px; /* Chrome having trouble with height larger than 1px*/ |
230 |
height: 0; |
231 |
margin: 18px 0; |
232 |
}
|
233 |
|
234 |
/* tables still need 'cellspacing="0"' in the XHTML markup */
|
235 |
table{ |
236 |
border: 1px solid #cecece; |
237 |
border-right: none; |
238 |
border-top: none; |
239 |
border-collapse: collapse; |
240 |
border-spacing: 0; |
241 |
}
|
242 |
|
243 |
table caption{ |
244 |
caption-side: top; |
245 |
font-style: italic; |
246 |
padding: 2px; |
247 |
text-align: right; |
248 |
}
|
249 |
|
250 |
td, |
251 |
th{ |
252 |
border: 1px solid #cecece; |
253 |
border-bottom: none; |
254 |
border-left: none; |
255 |
padding: 4px; |
256 |
}
|
Primero, declaramos que nuestro conjunto de caracteres UTF8 como el mismo que hemos usado para nuestro HTML.
En la sección de restablecimiento, estamos restableciendo estilos de navegadores y posicionamiento predeterminados. También aplicamos nuestros colores y detalles predeterminados para cuerpo y texto al selector body. Ahora, si obtiene una vista previa de su documento en cualquier navegador, notará que nuestro tema está cobrando vida lentamente con nuestros propios colores y algunos estilos que estamos aplicando desde el archivo reset.css.
Paso B - 2: Elementos de Posición y Diseño
Vamos a utilizar la biblioteca grid960 para facilitar el posicionamiento. Y usaremos el archivo default.css desde ya para diseñar y posicionar nuestro contenido. Asegúrese de que ha conectado adecuadamente el archivo 960.css dentro de su sección head de index.html. No necesitamos tocar el archivo 960.css, solo usaremos algunas clases de la biblioteca 960.css para posicionar fácilmente nuestros contenidos.
Abra el archivo default.css en su editor de texto. Ahora copie y pegue lo siguiente en su archivo default.css.
1 |
|
2 |
|
3 |
@charset "utf-8"; |
4 |
/* CSS Document */
|
5 |
/*
|
6 |
|
7 |
~"~"~ ICONIFY ~"~"~ XHTML Template by palpaldal
|
8 |
|
9 |
TABLE OF CONTENTS ------------------
|
10 |
|
11 |
1. Common Theme Elements (usually inline elements)
|
12 |
2. Theme Structure
|
13 |
3. Pages Common Content's Styles
|
14 |
a. Header
|
15 |
b. Menu
|
16 |
c. Breadcrumbs
|
17 |
d. Footer
|
18 |
e. Sidebar
|
19 |
f. Pagination
|
20 |
4. Pagewise Styles
|
21 |
a.Home
|
22 |
b. Portfolio
|
23 |
i. Column 2
|
24 |
ii. Column 3
|
25 |
iii.Column 4
|
26 |
c. Blog
|
27 |
ii. Comments
|
28 |
iii.Comment Form
|
29 |
d. Contact
|
30 |
i. Contact Form
|
31 |
5. Others
|
32 |
|
33 |
*/
|
34 |
|
35 |
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
|
36 |
|
37 |
|
38 |
/* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */
|
39 |
|
40 |
/* <<<<<<<<<< 3. Pages Common Content's Styles >>>>>>>>>> */
|
41 |
|
42 |
/* <<<<<<<<<< a. Header >>>>>>>>>> */
|
43 |
|
44 |
/* <<<<<<<<<< b. Menu >>>>>>>>>> */
|
45 |
|
46 |
/* <<<<<<<<<< c. Breadcrumbs >>>>>>>>>> */
|
47 |
|
48 |
/* <<<<<<<<<< d. Footer >>>>>>>>>> */
|
49 |
|
50 |
/* <<<<<<<<<< e. Sidebar >>>>>>>>>> */
|
51 |
|
52 |
/* <<<<<<<<<< f. Pagination >>>>>>>>>> */
|
53 |
|
54 |
/* <<<<<<<<<< 4. Pagewise Styles >>>>>>>>>> */
|
55 |
|
56 |
/* <<<<<<<<<< a.Home >>>>>>>>>> */
|
57 |
|
58 |
/* <<<<<<<<<< b. Portfolio >>>>>>>>>> */
|
59 |
|
60 |
/* <<<<<<<<<< a. Column 2 >>>>>>>>>> */
|
61 |
|
62 |
/* <<<<<<<<<< b. Column 3 >>>>>>>>>> */
|
63 |
|
64 |
/* <<<<<<<<<< c. Column 4 >>>>>>>>>> */
|
65 |
|
66 |
/* <<<<<<<<<< c. Blog >>>>>>>>>> */
|
67 |
|
68 |
/* <<<<<<<<<< i. Comments >>>>>>>>>> */
|
69 |
|
70 |
/* <<<<<<<<<< ii. Comment Form >>>>>>>>>> */
|
71 |
|
72 |
/* <<<<<<<<<< d. Contact >>>>>>>>>> */
|
73 |
|
74 |
/* <<<<<<<<<< i. Contact Form >>>>>>>>>> */
|
75 |
|
76 |
/* <<<<<<<<<< 5. Others >>>>>>>>>> */
|
Paso B - 2a: Tres Secciones Principales
Primero, vamos a posicionar las tres secciones horizontales principales: #header, #content y #footer de nuestro tema. Haremos esto aplicando la clase .container_16 a cada sección como se muestra aquí:
1 |
|
2 |
|
3 |
<div id="header" <strong>class="container_16"</strong>> |
4 |
<div class="inner"> |
5 |
... |
6 |
</div><!-- end of .inner --> |
7 |
</div><!-- end of #header --> |
8 |
|
9 |
<div id="content" <strong>class="container_16"</strong>> |
10 |
<div class="inner"> |
11 |
... |
12 |
</div><!-- end of .inner --> |
13 |
</div><!-- end of #content --> |
14 |
|
15 |
<div id="footer" <strong>class="container_16"</strong>> |
16 |
<div class="inner"> |
17 |
... |
18 |
</div><!-- end of .inner --> |
19 |
</div><!-- end of #footer --> |
Ahora nuestras tres secciones principales están flotando en el centro de la página. .container_16 es la rejilla 16 de grid960. La anchura total de todas nuestras tres secciones es ahora exactamente 940px. Nuestro diseño, sin embargo, es de 980px de ancho por lo que vamos a aplicar relleno (izquierdo + derecho: 20 + 20) px alrededor de nuestras secciones. También aplicaremos otros estilos a nuestras secciones. Escriba estas reglas dentro de la sección de su archivo 2. Estructura de Tema de su archivo default.css o cópielas y péguelas.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< 2. Theme Structure >>>>>>>>>> */
|
4 |
|
5 |
#header{ |
6 |
background: #f1f1f1; |
7 |
border: 1px solid #cdcdcd; |
8 |
-moz-border-radius-bottomleft: 10px; |
9 |
-webkit-border-bottom-left-radius: 10px; |
10 |
border-bottom-left-radius: 10px; |
11 |
-moz-border-radius-bottomright: 10px; |
12 |
-webkit-border-bottom-right-radius: 10px; |
13 |
border-bottom-right-radius: 10px; |
14 |
border-top: none; |
15 |
padding: 0 10px; |
16 |
margin-bottom: 20px; |
17 |
}
|
18 |
|
19 |
#header .inner{ |
20 |
border: 1px solid #f9f9f9; |
21 |
-moz-border-radius-bottomleft: 10px; |
22 |
-webkit-border-bottom-left-radius: 10px; |
23 |
border-bottom-left-radius: 10px; |
24 |
-moz-border-radius-bottomright: 10px; |
25 |
-webkit-border-bottom-right-radius: 10px; |
26 |
border-bottom-right-radius: 10px; |
27 |
border-top: none; |
28 |
margin: 0 -10px; |
29 |
padding: 0 20px; |
30 |
}
|
31 |
|
32 |
#content{ |
33 |
background: #f1f1f1; |
34 |
border: 1px solid #cdcdcd; |
35 |
-moz-border-radius: 10px; |
36 |
-webkit-border-radius: 10px; |
37 |
border-radius: 10px; |
38 |
margin-bottom: 20px; |
39 |
margin-top: 20px; |
40 |
padding: 0 10px; |
41 |
}
|
42 |
|
43 |
#content .inner{ |
44 |
border: 1px solid #f9f9f9; |
45 |
-moz-border-radius: 10px; |
46 |
-webkit-border-radius: 10px; |
47 |
border-radius: 10px; |
48 |
margin: 0 -10px; |
49 |
padding: 40px 20px; |
50 |
}
|
51 |
|
52 |
#footer{ |
53 |
background: #f1f1f1; |
54 |
border: 1px solid #cdcdcd; |
55 |
-moz-border-radius-topleft: 10px; |
56 |
-webkit-border-top-left-radius: 10px; |
57 |
border-top-left-radius: 10px; |
58 |
-moz-border-radius-topright: 10px; |
59 |
-webkit-border-top-right-radius: 10px; |
60 |
border-top-right-radius: 10px; |
61 |
border-bottom: none; |
62 |
margin-top: 20px; |
63 |
padding: 0 10px; |
64 |
}
|
65 |
|
66 |
#footer .inner{ |
67 |
border: 1px solid #f9f9f9; |
68 |
-moz-border-radius-topleft: 10px; |
69 |
-webkit-border-top-left-radius: 10px; |
70 |
border-top-left-radius: 10px; |
71 |
-moz-border-radius-topright: 10px; |
72 |
-webkit-border-top-right-radius: 10px; |
73 |
border-top-right-radius: 10px; |
74 |
border-bottom: none; |
75 |
margin: 0 -10px; |
76 |
padding: 1px 20px; |
77 |
}
|
Todas las reglas para estas tres secciones son más o menos las mismas. Para #header, estamos aplicando un color de fondo y el color del borde exterior (obtenga estos valores de color de su diseño con la herramienta cuentagotas). Y los elementos .inner para el resplandor blanco interior. Compruebe su progreso en su navegador para asegurarse de que todo se está diseñando adecuadamente. Aquí la previsualización de navegador de nuestro documento:
Paso B - 2b: La Sección de Encabezado
Corte y guarde el gráfico de la regla horizontal de divisor del encabezado desde su archivo index.psd. Utilice la siguiente imagen como guía y utilice técnicas de corte de imágenes como se describe en el Paso A - 4. Utilizaremos esta imagen bdr-bg.png en numerosos lugares a lo largo de nuestro tema.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< a. Header >>>>>>>>>> */
|
4 |
|
5 |
#header .top{ |
6 |
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x; |
7 |
overflow: hidden; |
8 |
padding: 10px 0 13px 552px; |
9 |
}
|
10 |
|
11 |
#header .top li{ |
12 |
color: #ababab; |
13 |
display: block; |
14 |
float: left; |
15 |
line-height: 24px; |
16 |
margin-right: 10px; |
17 |
}
|
18 |
|
19 |
#header .top li a{ |
20 |
border: none; |
21 |
border-left: 1px solid #d0d0d0; |
22 |
color: #ababab; |
23 |
padding: 0 0 0 10px; |
24 |
}
|
25 |
|
26 |
#header .top li:last-child{margin: 0;} |
27 |
|
28 |
#header .top li:first-child a{border: none; padding:0;} |
29 |
|
30 |
#header .top li a:focus, |
31 |
#header .top li a:hover{color: #eaa000;} |
32 |
|
33 |
#header .top form{ |
34 |
margin-left: 10px; |
35 |
position: relative; |
36 |
}
|
37 |
|
38 |
#header .top legend{display: none;} |
39 |
|
40 |
#header .top input[type="text"]{ |
41 |
background: #d8d8d8; |
42 |
border: 1px solid #bdbdbd; |
43 |
height: 14px; |
44 |
width: 160px; |
45 |
padding: 4px; |
46 |
font-size: 12px; |
47 |
line-height: 12px; |
48 |
}
|
49 |
|
50 |
#header .top label{ |
51 |
display: none; |
52 |
left: 8px; |
53 |
position: absolute; |
54 |
top: 0px; |
55 |
}
|
56 |
|
57 |
#header .top input[type="submit"]{ |
58 |
background: transparent url(../../images/srch-btn.png) 0 0 no-repeat; |
59 |
border: none; |
60 |
display: block; |
61 |
font-size: 0; |
62 |
height: 15px; |
63 |
padding: 0; |
64 |
position: absolute; |
65 |
right: 4px; |
66 |
text-indent: -999px; /* some browser shows 1px height texts like Safari even with font-size: 0 */ |
67 |
top: 4px; |
68 |
width: 19px; |
69 |
}
|
70 |
|
71 |
#header .top input[type="submit"]:focus, |
72 |
#header .top input[type="submit"]:hover{background-position: -19px 0;} |
73 |
|
74 |
#nav{padding: 20px 0;} |
75 |
|
76 |
#logo a{border: none;} |
Aquí nuestra sección de header con el estilo reciente:
OK, un resumen de los bloques de código o trucos más importantes, secuencialmente desde arriba hacia abajo.
- #header .top - estamos utilizando este elemento para aplicar la imagen de divisor.
- #header .top li - esto aplica un color de texto diferente para este bloque. Y su gran
line-heightayudará a que nuestro texto permanezca en medio del bloque. - #header .top li a - sobreescribir el estilo del elemento de enlace predeterminado y aplicar un estilo único para este bloque.
- #header .top li: last-child - seleccionar el último hijo de #header .top y elimina su margen para un posicionamiento perfecto.
- #header .top li: first-child a - reemplazar el estilo del primer descendiente de #header .top.
- #header .top form - Establece
positiondel formulario arelativepara que sulabelflote apropiadamente. - #header .top legend - ocultar elemento
legendpara no mostrarlo - #header .top label - estamos posicionando la etiqueta para que actúe como un valor de campo para que los visitantes puedan definir fácilmente para qué es este campo. De forma predeterminada, lo estamos ocultando, pero lo mostraremos utilizando JS.
- #header .top input[type = "submit"] - para este botón, divida y guarde nuestro ícono de lupa con la guía mostrada en la imagen B - 2bb.
Paso B - 2c El menú
Primero copie lo siguiente en su sección menu. Puedes ver lo que ha cambiado por lo que se ha resaltado:
1 |
|
2 |
<div id="nav" class="container_16 clearfix"> |
3 |
<div id="logo" class="grid_5 alpha"> |
4 |
<a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/images/logo.png" height="48" width="138" alt="ICONIFY" /></a> |
5 |
</div><!-- end of #logo --> |
6 |
<ul id="menu" class="grid_11 omega"> |
7 |
<li class="active"><a href="index.html">Home</a></li> |
8 |
<li class="dropdown"><a href="#">Features</a> |
9 |
<ul>
|
10 |
<li><a href="#">Home Pages</a></li> |
11 |
<li><a href="#">Portfolio Pages </a> <span>»</span> |
12 |
<ul>
|
13 |
<li><a href="portfolio.html">Column 2</a></li> |
14 |
<li><a href="portfolio-col-3.html">Column 3</a></li> |
15 |
<li><a href="portfolio-col-4.html">Column 4</a></li> |
16 |
</ul>
|
17 |
</li>
|
18 |
<li><a href="#">Blog Pages</a> <span>»</span> |
19 |
<ul>
|
20 |
<li><a href="blogs.html">Blog List</a></li> |
21 |
<li><a href="blog-page.html">Blog</a></li> |
22 |
</ul>
|
23 |
</li>
|
24 |
<li><a href="#">Fake Link 1</a></li> |
25 |
<li><a href="#">Fake Link 2</a></li> |
26 |
<li><a href="#">Fake Link 3</a></li> |
27 |
</ul>
|
28 |
</li>
|
29 |
<li><a href="portfolio.html">Portfolio</a></li> |
30 |
<li><a href="blogs.html">Blog</a></li> |
31 |
<li><a href="contact.html">Contact</a></li> |
32 |
</ul><!-- end of #menu --> |
33 |
</div><!-- end of #nav --> |
Estamos aplicando los nombres de clase container_16 y clearfix al elemento div#nav para posicionar correctamente nuestro #logo y #menu. Estamos aplicando .grid_5 y .alpha a div#logo para darle un espacio igual a 5 grids y remover sus márgenes izquierdos con la clase .alpha. También estamos aplicando .grid_11 y .omega a ul#menu para darle un espacio igual a 11 columnas y remover sus márgenes derechos con la clase .omega. Por último, nos encargamos de los menús desplegables o multinivel. Diseñaremos y posicionaremos el menú y los menús multinivel con CSS.
Ahora corte y guarde la flecha del elemento del menú desplegable dentro de su carpeta de archivos->imágenes como se muestra en la imagen B - 2ca
Copie o escriba el código siguiente dentro de la sección menu de su archivo default.css.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< b. Menu >>>>>>>>>> */
|
4 |
|
5 |
#menu{ |
6 |
padding: 16px 0 0 290px; |
7 |
width: 350px; |
8 |
z-index: 999; |
9 |
}
|
10 |
|
11 |
#menu li{ |
12 |
color: #0f5193; |
13 |
font-size: 14px; |
14 |
font-weight: bold; |
15 |
margin-left: 14px; |
16 |
position: relative; |
17 |
}
|
18 |
|
19 |
#menu li.active a, |
20 |
#menu li a:focus, |
21 |
#menu li a:hover{border-bottom: 1px solid #88afd5;} |
22 |
|
23 |
#menu>li.dropdown>a{ |
24 |
border: none; |
25 |
background: transparent url(../../images/drop-arrow.png) right center no-repeat; |
26 |
padding-right: 10px; |
27 |
}
|
28 |
|
29 |
#menu>li.dropdown.active>a{border-bottom: 1px solid #88afd5;} |
30 |
|
31 |
#menu li a{color: #0f5193;} |
32 |
|
33 |
#menu ul{ |
34 |
background: #e4e4e4; |
35 |
border: 1px solid #b7b7b7; |
36 |
-moz-border-radius: 4px; |
37 |
-webkit-border-radius: 4px; |
38 |
border-radius: 4px; |
39 |
position: absolute; |
40 |
top: -999px; |
41 |
margin: 0; |
42 |
padding: 1px 11px; |
43 |
left: 0; |
44 |
width: 100px; |
45 |
z-index: 999; |
46 |
}
|
47 |
|
48 |
#menu ul li{ |
49 |
background: #d5d5d5; |
50 |
display: block; |
51 |
font-size: 12px; |
52 |
font-weight: normal; |
53 |
line-height: 1.6; |
54 |
margin: 0 -10px; |
55 |
padding: 4px 10px 0; |
56 |
}
|
57 |
|
58 |
#menu ul li span{font-size: 14px;} |
59 |
|
60 |
|
61 |
#menu ul li:first-child{padding-top: 8px;} |
62 |
|
63 |
#menu ul li:last-child{padding-bottom: 6px;} |
64 |
|
65 |
#menu li:hover ul{top: 16px;} |
66 |
|
67 |
#menu li:hover li ul, |
68 |
#menu li li:hover li ul, |
69 |
#menu li li li:hover li ul, |
70 |
#menu li li li li:hover li ul{top: -999px;} |
71 |
|
72 |
#menu li li:hover ul, |
73 |
#menu li li li:hover ul, |
74 |
#menu li li li li:hover ul, |
75 |
#menu li li li li li:hover ul{ |
76 |
left: 121px; |
77 |
top: -2px; |
78 |
}
|
79 |
|
80 |
#menu li li:hover ul{margin-left: 37px;} |
81 |
|
82 |
#menu li li li:hover ul, |
83 |
#menu li li li li:hover ul, |
84 |
#menu li li li li li:hover ul{margin-left: 21px;} |
85 |
|
86 |
#menu li li:hover>a{border-bottom: 1px solid #88afd5;} |
¿Qué hemos hecho aquí?
- #menu - relleno adicional para empujar los elementos del menú a la derecha.
- #menu li - establecer su
positionarelativepara posicionar correctamente los menús multinivel. - #menu>li.dropdown>a - aplicar la flecha del menú multinivel y dar un poco de relleno adicional para que el gráfico de flecha encaje perfectamente dentro del elemento de menú.
- #menu>li.dropdown.active>a - aplicar un borde fijo al elemento de menú multi-nivel
.active. - #menu ul - este de hecho es el elemento de menú multi-nivel. Por lo tanto, estamos aplicando algunos estilos a la decoración y la posición de nuestros elementos de menú multinivel.
- #menu ul li - su
backgroundse muestra como el color debackgroundreal del menú multinivel. - #menu ul li span - darle un tamaño de texto más grande ya que las flechas parecen un poco extrañas con
12px.
Nota: nuestros menús de varios niveles tienen márgenes adicionales a la izquierda. Todo estará bien cuando apliquemos el complemento superfish de menú desplegable jquery un poco más tarde.
Paso B - 2d: El Área de Contenido
Ahora vamos a tratar con el contenido de nuestra sección #content.
El Slider de Imágenes (complemento jQuery.cycle)
Coloque, corte y guarde los radios del deslizador de imagen dentro de su carpeta de archivos->imágenes como se muestra en la imagen B - 2da
Copie lo siguiente en la subsección a.Home de su archivo default.css.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< a.Home >>>>>>>>>> */
|
4 |
|
5 |
#slider{ |
6 |
background: #b5b5b5; |
7 |
border: 1px solid #f8f8f8; |
8 |
height: 336px; |
9 |
margin-top: 10px; |
10 |
padding: 1px; |
11 |
width: 936px; |
12 |
overflow: hidden; |
13 |
position: relative; |
14 |
}
|
15 |
|
16 |
#cyclePager{ |
17 |
position: absolute; |
18 |
height: 18px; |
19 |
overflow: hidden; |
20 |
right: 20px; |
21 |
bottom: 20px; |
22 |
z-index: 99; |
23 |
}
|
24 |
|
25 |
#cyclePager a{ |
26 |
background: transparent url(../../images/cycle-pager.png) 0 0 no-repeat; |
27 |
display: block; |
28 |
float: left; |
29 |
height: 18px; |
30 |
margin-left: 10px; |
31 |
text-indent: -9999px; |
32 |
width: 18px; |
33 |
}
|
34 |
|
35 |
#cyclePager a:hover, |
36 |
#cyclePager a.activeSlide{background-position: -18px 0;} |
Los estilos son muy simples. El color de fondo de #slider debe ser mostrado como el color de resplandor interno oscuro. Lo lograremos aplicando padding de 1px dentro del elemento #slider. Aplicamos position: relative a nuestro #cyclePager para que flote en el interior del #slider y encima de las diapositivas. a.activeSlide es una clase de la diapositiva activa actual, el plugin jQuery cycle aplicará automáticamente esta clase.
Los Artículos Promocionales a 4 Columnas
Aplique estos nombres de clase a su elemento .promo-col-4 y a sus hijos:
1 |
|
2 |
|
3 |
<ul class="promo-col-4 <strong>container_16 clearfix</strong>"> |
4 |
<li <strong>class="grid_4 alpha"</strong>> |
5 |
... |
6 |
</li>
|
7 |
<li <strong>class="grid_4"</strong>> |
8 |
... |
9 |
</li>
|
10 |
<li <strong>class="grid_4"</strong>> |
11 |
... |
12 |
</li>
|
13 |
<li <strong>class="grid_4 omega"</strong>> |
14 |
... |
15 |
</li>
|
16 |
</ul><!-- end of .promo-col-4 --> |
Aquí estamos aplicando un ancho a cada columna igual a la grid 4 y borrando el error de float con la clase clearfix.
Copie o escriba los siguientes estilos después de su código #slider dentro de la sección a.Home.
1 |
|
2 |
|
3 |
.promo-col-4{margin: 30px 0 40px;} |
4 |
|
5 |
.promo-col-4 li{ |
6 |
display: block; |
7 |
overflow: hidden; |
8 |
}
|
9 |
|
10 |
.promo-col-4 li img{ |
11 |
display: block; |
12 |
float: left; |
13 |
margin-right: 10px; |
14 |
}
|
15 |
|
16 |
.promo-col-4 li h5{margin: 4px 0;} |
En este punto su documento debe mostrar en los navegadores como la imagen que se muestra a continuación:
Los Artículos Promocionales a 3 Columnas
Aplique estos nombres de clase a su elemento .promo-col-3 y a sus hijos:
1 |
|
2 |
|
3 |
<ul class="promo-col-3 <strong>container_12 clearfix</strong>"> |
4 |
<li <strong>class="grid_4 alpha"</strong>> |
5 |
... |
6 |
</li>
|
7 |
<li <strong>class="grid_4"</strong>> |
8 |
... |
9 |
</li>
|
10 |
<li <strong>class="grid_4 omega"</strong>> |
11 |
... |
12 |
</li>
|
13 |
</ul><!-- end of .promo-col-3 --> |
..y copie esta regla CSS después de sus códigos #promo-col-4 códigos dentro de la sección a.Home.
1 |
|
2 |
|
3 |
.promo-col-3{margin: 40px 0;} |
Tenemos dos bordes en nuestras imágenes: un resplandor interior y un borde más oscuro. Podemos aplicar estos estilos directamente desde Photoshop, pero es mucho más flexible alcanzar el efecto utilizando CSS. Aplicaremos el resplandor interno de Photoshop y aplicaremos una clase de .border a nuestras imágenes para esos dos bordes. Como ejemplo, siga estas pautas sobre cómo corto, aplico los estilos y los guardo.
Las dimensiones de nuestras imágenes .promo-col-3 son 300x140. Comenzaremos por crear un nuevo documento en Photoshop midiendo 298x138px (estamos dejando 1px de alrededor de la imagen para llenar esos 1px con CSS). Ahora coloque su imagen, reduzca su tamaño mediante el uso de transform. Pulse Ctrl+A para seleccionar el lienzo completo, vaya a Imagen->Recortar. Ahora copie los estilos de capa de cualquiera de nuestras imágenes, ahora aplique ese estilo de capa a esta nueva imagen. Después de hacer todo, debería ver el efecto de resplandor. Ahora guarde la imagen en su carpeta de activos. Aplique las mismas técnicas para nuestras futuras imágenes usando la siguiente imagen como referencia.
Ahora aplique una clase de .border a las imágenes y pegue este código en la sección 1. Elementos Comunes del Tema (generalmente elementos en línea) del archivo default.css.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
|
4 |
|
5 |
.border{border: 1px solid #b9b9b9;} |
El Testimonio
Corte y guarde la imagen de testi-arrow.png dentro de su carpeta archivos->imágenes como se muestra en la imagen B - 2db.
Pegue el siguiente código después de los códigos #promo-col-3 dentro de la sección a.Home.
1 |
|
2 |
|
3 |
.testimonial{margin: 40px 0;} |
4 |
|
5 |
#content .testimonial .inner{ |
6 |
border: 1px solid #f3f3f3; |
7 |
-moz-border-radius: 0; |
8 |
-webkit-border-radius: 0; |
9 |
border-radius: 0; |
10 |
padding: 0; |
11 |
position: relative; |
12 |
margin: 0; |
13 |
}
|
14 |
|
15 |
.testimonial blockquote{ |
16 |
background: #e5e5e5; |
17 |
border: 1px solid #d9d9d9; |
18 |
margin: 0; |
19 |
padding: 20px; |
20 |
}
|
21 |
|
22 |
.testimonial .arrow{ |
23 |
background: transparent url(../../images/testi-arrow.png) 0 0 no-repeat; |
24 |
bottom: -10px; |
25 |
display: block; |
26 |
height: 12px; |
27 |
position: absolute; |
28 |
right: 20px; |
29 |
width: 16px; |
30 |
}
|
Aquí estamos..
- #content .testimonial .inner - sobreescribir algunos estilos del elemento .inner.
- >.testimonial blockquote - fijar el fondo y el color del borde interno de la caja del testimonio.
- >.testimonial .arrow - vincular la imagen de testi-arrow.png y posicionarla apropiadamente.
Vamos a comprobar de nuevo cómo están las cosas en el navegador:
El Cuadro de Proyectos Recientes
Aplique estos nombres de clase a los hijos de su elemento #recentProjects:
1 |
|
2 |
|
3 |
<div id="recentProjects"> |
4 |
<div class="bar"> |
5 |
... |
6 |
</div><!-- end of .bar --> |
7 |
<ul <strong>class="container_16 clearfix"</strong>> |
8 |
<li <strong>class="grid_4 alpha"</strong>> |
9 |
... |
10 |
</li>
|
11 |
<li <strong>class="grid_4"</strong>> |
12 |
... |
13 |
</li>
|
14 |
<li <strong>class="grid_4"</strong>> |
15 |
... |
16 |
</li>
|
17 |
<li <strong>class="grid_4 omega"</strong>> |
18 |
... |
19 |
</li>
|
20 |
</ul><!-- end of .container_16 --> |
21 |
</div><!-- end of #recentProjects --> |
Copie las siguientes reglas después de los códigos .testimonial dentro de la sección a.Home.
1 |
|
2 |
|
3 |
#recentProjects .bar{ |
4 |
border: 1px solid #e5e5e5; |
5 |
margin: 0 0 18px 0; |
6 |
}
|
7 |
|
8 |
#recentProjects h5{ |
9 |
color: #7c7c7c; |
10 |
background: #f3f3f3; |
11 |
border: 1px solid #f9f9f9; |
12 |
margin: 0; |
13 |
height: 38px; |
14 |
text-align: center; |
15 |
font-size: 14px; |
16 |
line-height: 36px; |
17 |
}
|
Acabamos de diseñar y posicionar los elementos de nuestra sección #content. En el navegador nuestro elemento #recentProjects debería renderizar perfectamente como se muestra a continuación.
Paso B - 2e: El área de pie de página
Vamos a atacar el pie de página..
La sección .top del #footer
Aplique estos nombres de clase a su elemento .top y a sus hijos:
1 |
|
2 |
|
3 |
<div class="top <strong>container_12 clearfix</strong>"> |
4 |
<div id="twitter" <strong>class="grid_8 alpha"</strong>> |
5 |
... |
6 |
</div><!-- end of #twitter --> |
7 |
<ul class="social <strong>grid_4 omega</strong>"> |
8 |
... |
9 |
</ul><!-- end of .social --> |
10 |
</div><!-- end of .top --> |
Pegue el siguiente código dentro de la subsección d. Footer de su archivo default.css.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< d. Footer >>>>>>>>>> */
|
4 |
|
5 |
#footer .top{ |
6 |
background: transparent url(../../images/bdr-bg.png) left bottom repeat-x; |
7 |
overflow: hidden; |
8 |
padding-bottom: 33px; |
9 |
width: 940px; |
10 |
}
|
11 |
|
12 |
#twitter{ |
13 |
background: transparent url(../../images/twitter-bird.png) 0 center no-repeat; |
14 |
margin-top: 30px; |
15 |
padding-left: 50px; |
16 |
width: 570px; |
17 |
}
|
18 |
|
19 |
|
20 |
#twitter h2, |
21 |
#twitter .profileLink{display: none;} |
22 |
|
23 |
#twitter li{ |
24 |
display: block; |
25 |
line-height: 18px; |
26 |
}
|
27 |
|
28 |
.social{ |
29 |
background: transparent url(../../images/v-bdr-bg.png) 1px 0 repeat-y; |
30 |
height: 32px; |
31 |
margin: 30px 0 0 0; |
32 |
padding: 0 0 0 10px; |
33 |
overflow: hidden; |
34 |
}
|
35 |
|
36 |
.social li{ |
37 |
display: block; |
38 |
float: left; |
39 |
line-height: 18px; |
40 |
margin-right: 10px; |
41 |
}
|
42 |
|
43 |
.social li:last-child{margin-right: 0;} |
44 |
|
45 |
.social h5{ |
46 |
color: #7c7c7c; |
47 |
font-size: 14px; |
48 |
font-weight: normal; |
49 |
line-height: 32px; |
50 |
margin: 0 0 0 62px; |
51 |
width: 70px; |
52 |
}
|
53 |
|
54 |
.social a{border: none;} |
Aquí estamos..
- #footer .top - usar su propiedad de fondo para aplicar nuestro borde.
- #twitter - aplicar nuestro pájaro de twitter como imagen de fondo. También estamos anulando algunos estilos y ocultándolos (nuestro complemento jQuery de twitter los incluirá en nuestro documento).
- .social - estamos aplicando borde vertical con este elemento. Para su borde vertical, divida y guarde este gráfico de nuestro archivo index.psd como se muestra en la imagen B - 2ea.
En este punto nuestro documento debe mostrarse como sigue. Tenga en cuenta que nuestra sección de twitter está vacía, ya que no hemos aplicado ninguna secuencia de comandos a nuestro documento.
La porción .content del #footer
Aplique estos nombres de clase a su elemento .content y a sus hijos:
1 |
|
2 |
|
3 |
<ul class="content <strong>container_12</strong>"> |
4 |
<li <strong>class="grid_4 alpha"</strong>> |
5 |
... |
6 |
</li>
|
7 |
<li <strong>class="grid_4"</strong>> |
8 |
... |
9 |
</li>
|
10 |
<li <strong>class="grid_4 omega"</strong>> |
11 |
... |
12 |
</li>
|
13 |
</ul><!-- end of .content --> |
Pegue el siguiente código después de las reglas .top dentro de la sección d. Footer.
1 |
|
2 |
|
3 |
#footer .content{ |
4 |
margin-top: 30px; |
5 |
width: 940px; |
6 |
overflow: hidden; |
7 |
}
|
8 |
|
9 |
#footer .content .grid_4{ |
10 |
background: transparent url(../../images/v-bdr-bg.png) right top repeat-y; |
11 |
width: 287px; |
12 |
padding-bottom: 500px; |
13 |
padding-right: 20px; |
14 |
margin-bottom: -500px; |
15 |
}
|
16 |
|
17 |
#footer .content li:last-child{ |
18 |
padding-right: 0; |
19 |
background: none; |
20 |
width: 286px; |
21 |
}
|
22 |
|
23 |
#footer .content h5{ |
24 |
color: #7c7c7c; |
25 |
margin-top: 0; |
26 |
}
|
27 |
|
28 |
#footer .blogList li{ |
29 |
display: block; |
30 |
line-height: 18px; |
31 |
margin-bottom: 20px; |
32 |
}
|
33 |
|
34 |
#footer .blogList li:last-child{margin: 0;} |
35 |
|
36 |
#footer .blogList img{ |
37 |
display: block; |
38 |
float: left; |
39 |
margin: 0 10px 4px 0; |
40 |
}
|
41 |
|
42 |
#footer .blogList h5{ |
43 |
color: #2e5bc3; |
44 |
margin: 0; |
45 |
}
|
46 |
|
47 |
#footer .blogList p{margin: 10px 0;} |
48 |
|
49 |
#toTop{ |
50 |
background: transparent url(../../images/to-top.png) 0 0 no-repeat; |
51 |
border: none; |
52 |
cursor: pointer; |
53 |
display: block; |
54 |
height: 10px; |
55 |
margin: 20px auto; |
56 |
width: 11px; |
57 |
}
|
58 |
|
59 |
#toTop:focus, |
60 |
#toTop:hover{background-position: -11px 0;} |
#footer .content .grid_4 sobreescribe la anchura .grid_4 por defecto y aolica otros estilos.
Para el corte de flecha de #toTop, guarde la flecha de nuestro archivo de Photoshop como se muestra en la imagen B - 2eb.
Copie el siguiente código dentro de la sección 1. Elementos Comunes del Tema (generalmente elementos en línea) del archivo default.css.
1 |
|
2 |
|
3 |
/* <<<<<<<<<< 1. Common Theme Elements (usually inline elements) >>>>>>>>>> */
|
4 |
|
5 |
.border{border: 1px solid #b9b9b9;} |
6 |
|
7 |
.list{margin: 18px 0;} |
8 |
|
9 |
.list li{ |
10 |
display: block; |
11 |
line-height: 18px; |
12 |
margin-bottom: 4px; |
13 |
}
|
14 |
|
15 |
.list li a{color: #7c7c7c;} |
16 |
|
17 |
.list li a:focus, |
18 |
.list li a:hover{color: #eaa000;} |
19 |
|
20 |
.btn{line-height: 18px;} |
Es posible que haya notado que hemos aplicado una clase de .list a nuestro elemento Categories dentro de la sección .content. Esta .list es una clase común en línea y podemos usarla para mostrar otros elementos de la lista en cualquier otra página. Y nuestro elemento de pie de página final se ve así:
Toques Finales
Hemos diseñado con éxito nuestra página principal, y nuestro tema funciona bien en todos los navegadores modernos, excepto IE. Para IE, necesitamos algunos CSS especiales ya que no soportan algunas pseudo clases CSS. Vamos a escribir algún código específico de IE para manejar estos problemas.
Si usted previsualiza su documento en este punto en IE8 entonces usted encontrará este renderización defectuosa:
Para solucionar estas renderizaciones defectuosas copie o escriba las siguientes reglas dentro de su archivo ie8.css.
1 |
|
2 |
|
3 |
/* as IE8 having trouble supporting CSS pseudo class ":last-child" */
|
4 |
#header .top li+li+li+li{margin: 0;} |
5 |
|
6 |
#footer .inner .content li+li+li{ |
7 |
padding-right: 0; |
8 |
background: none; |
9 |
width: 286px; |
10 |
}
|
11 |
|
12 |
.social li+li+li+li+li{margin-right: 0;} |
13 |
|
14 |
.popularPost ul li+li{margin-right: 0;} |
Si usted previsualiza su documento en IE7 encontrará algunas renderizaciones defectuosas de navegador más que en IE8 +
Para solucionarlas, copie o escriba las siguientes reglas dentro de su archivo ie7.css.
1 |
|
2 |
|
3 |
/* as IE7 having trouble supporting CSS pseudo class ":last-child" */
|
4 |
|
5 |
#header .top li+li+li+li{margin: 0;} |
6 |
|
7 |
#footer .inner .content li+li+li{ |
8 |
padding-right: 0; |
9 |
background: none; |
10 |
width: 286px; |
11 |
}
|
12 |
|
13 |
.social li+li+li+li+li{margin-right: 0;} |
14 |
|
15 |
#menu ul li:last-child{padding-bottom: 6px;} |
16 |
|
17 |
#footer .content .grid_4{ |
18 |
padding-bottom: 0; |
19 |
margin-bottom: 0; |
20 |
}
|
21 |
|
22 |
hr{ |
23 |
background: #cdcdcd; |
24 |
border: none; |
25 |
border-bottom: 1px solid #f6f6f6; |
26 |
border-top: 1px solid #f6f6f6; |
27 |
display: block; |
28 |
padding: 0; |
29 |
height: 3px; |
30 |
margin: 18px 0; |
31 |
}
|
32 |
|
33 |
.popularPost ul li+li{margin-right: 0;} |
34 |
|
35 |
#commentForm input[type="text"], |
36 |
#commentForm textarea, |
37 |
#contactForm input[type="text"], |
38 |
#contactForm textarea{margin-left: -80px;} |
Nota: estamos apuntando a algunos elementos que aún no existen. Utilizaremos estos selectores/elementos más adelante.
Paso - C Definición de Interacciones con JavaScript
Descargue y vincule estas bibliotecas de JavaScript. JQuery JavaScript Library v1.4.2, jQuery.prettyPhoto v-2.5.6 y jQuery.cycle v-2.80.
1 |
|
2 |
<head>
|
3 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
4 |
<meta name="author" content="Nuruzzaman Sheikh(palpaldal)" /> |
5 |
<meta name="description" content="A brief description of this website or your business." /> |
6 |
<meta name="keywords" content="keywords, or phrases, suited with each particular page, are best" /> |
7 |
|
8 |
<title>ICONIFY :: Welcome</title> |
9 |
<!-- Favorites icon -->
|
10 |
<link rel="shortcut icon" href="assets/favicon.ico" /> |
11 |
|
12 |
<!-- CSS Files -->
|
13 |
<!-- Resetting all default browser markups and styles.-->
|
14 |
<link rel="stylesheet" type="text/css" href="files/codes/css/reset.css" media="all" /> |
15 |
<!-- 960 Grid ( 12+16 cols) System for easy and flexible markups.-->
|
16 |
<link rel="stylesheet" type="text/css" href="files/codes/css/960.css" media="all" /> |
17 |
<!-- Default and template specific styles. -->
|
18 |
<link rel="stylesheet" type="text/css" href="files/codes/css/default.css" media="all" /> |
19 |
<!-- prettyPhoto jQuery plugin's CSS styles-->
|
20 |
<link rel="stylesheet" type="text/css" href="files/codes/css/prettyPhoto.css" media="all" /> |
21 |
|
22 |
<!-- JavaScript Files -->
|
23 |
<!-- jQuery JavaScript Library Scripts -->
|
24 |
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery-1.4.2.min.js"></script> |
25 |
<!-- cycle plugin jQuery library -->
|
26 |
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.cycle.all.min.js"></script> |
27 |
<!-- prettyPhoto library -->
|
28 |
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/jquery.prettyPhoto.js"></script> |
29 |
|
30 |
<!-- This codes starts/initializes all js functionalities throughout this template. It's also some mini third party js libraries. -->
|
31 |
<script src="http://webdesigntutsplus.s3.amazonaws.com/tuts/188_iconify/tutorial-coding-phase/files/codes/js/init.js"></script> |
32 |
|
33 |
<!-- Weird IE specific codes -->
|
34 |
<!--[if lt IE 8]>
|
35 |
<link rel="stylesheet" type="text/css" href="files/codes/css/ie7.css" media="all" />
|
36 |
<![endif]-->
|
37 |
<!--[if IE 8]>
|
38 |
<link rel="stylesheet" type="text/css" href="files/codes/css/ie8.css" media="all" />
|
39 |
<![endif]-->
|
40 |
|
41 |
</head>
|
Ahora abra su archivo init.js y copie el código fuente de los siguientes complementos:
- Complemento JQuery.easing
- Complemento jQuery.scrollTo
- Complemento de menú desplegable jQuery.supersubs
- Complemento de menú desplegable jQuery.superfish
- Complemento JQuery.twitter
- Complemento JQuery.scrollToTop
- JQuery.tinyValidator personalizado valida los campos de formulario
- Función/códigos de inicialización del Script de Tema
Todas las bibliotecas anteriores son de terceros. Las estamos combinando en un único archivo para menos solicitudes HTTP. Entre ellas tinyValidator es un mini complemento de validación que yo he desarrollado. Ahora vamos a arrancar/inicializar nuestros scripts. Copie el código siguiente dentro de la sección de Códigos de Inicialización JavaScript del Sitio de su archivo init.js.
1 |
|
2 |
|
3 |
/* <<<<<<<< Site Initialization JavaScript Codes >>>>>>>> */
|
4 |
|
5 |
;(function($){ |
6 |
|
7 |
$(document).ready(function(){ |
8 |
$('.border').parent('a').css('border', 'none'); |
9 |
});
|
10 |
|
11 |
/* jQuery ScrollToTop plugin */
|
12 |
$(function() { $("#toTop").scrollToTop({speed:1000,ease:"easeInOutQuad",start:600}); }); |
13 |
|
14 |
/* cycle plugin function declarations using 'cycle.js' jquery plugin */
|
15 |
$(document).ready(function(){ |
16 |
if ($('#cycle').length > 0){ |
17 |
$('#cycle').cycle({ |
18 |
fx: 'scrollLeft', |
19 |
speed: 500, |
20 |
timeout: 8000, |
21 |
randomizeEffects: false, |
22 |
easing: 'easeInOutQuad', //jquery.easing library/plugin is required for this functionality |
23 |
next: '', |
24 |
prev: '', |
25 |
pager: '#cyclePager', |
26 |
cleartypeNoBg: true |
27 |
});
|
28 |
}
|
29 |
});
|
30 |
|
31 |
/* altering search form label and using it's label as field's value */
|
32 |
|
33 |
$(document).ready(function(){ |
34 |
|
35 |
var $searchTerm = $('#searchTerm'); |
36 |
|
37 |
if($searchTerm.val() == ''){ |
38 |
$('label', '#header').css('display', 'inline'); |
39 |
}
|
40 |
|
41 |
$searchTerm.focus(function(){ |
42 |
$searchTerm.siblings('label').hide(); |
43 |
})
|
44 |
.blur(function(){ |
45 |
if($searchTerm.val() == ''){ |
46 |
$searchTerm.siblings('label').show(); |
47 |
}
|
48 |
});
|
49 |
});
|
50 |
|
51 |
/*
|
52 |
* dropdown menu function using 'superfish.js' and 'supersubs.js' jquery plugin
|
53 |
*/
|
54 |
$(document).ready(function(){ |
55 |
if(jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7){ |
56 |
$('ul', '#nav').superfish({ |
57 |
delay: 1000, |
58 |
animation: {opacity: 'show'}, |
59 |
speed: 800, |
60 |
autoArrows: false |
61 |
})
|
62 |
}
|
63 |
else{ |
64 |
$('ul', '#nav').supersubs({ |
65 |
minWidth: 8, |
66 |
maxWidth: 10, |
67 |
extraWidth: 0 |
68 |
}).superfish({ |
69 |
delay: 1000, |
70 |
animation: {opacity: 'show'}, |
71 |
speed: 800, |
72 |
autoArrows: false |
73 |
})
|
74 |
}
|
75 |
});
|
76 |
|
77 |
/*
|
78 |
* initializting twitter plugin
|
79 |
* change 'userName' variable with yours and you are done.
|
80 |
* you can also alter other settings as you need them.
|
81 |
*/
|
82 |
$(document).ready(function() { |
83 |
$("#twitter").getTwitter({ |
84 |
userName: "jquery", |
85 |
numTweets: 1, |
86 |
loaderText: "Loading tweets...", |
87 |
slideIn: true, |
88 |
slideDuration: 750, |
89 |
showHeading: true, |
90 |
headingText: "", |
91 |
showProfileLink: true, |
92 |
showTimestamp: true |
93 |
});
|
94 |
});
|
95 |
})(jQuery); |
Estamos colocando todos nuestros códigos de inicialización de sitio dentro de una función anónima.
- En el primer bloque estamos eliminando el estado hover de las imágenes con una clase
.border. - Inicializar complemento jQuery scrollToTop con nuestro elemento #toTop.
- Asegúrese de que #cycle esté disponible y luego inicialice el complemento cycle.
- Cambiar la etiqueta del formulario de búsqueda y usar su etiqueta como valor del campo.
- Inicializando la función de menú desplegable usando los complementos jquery 'superfish.js' y 'supersubs.js'
- Inicializando el complemento de twitter. Puede mostrar su tweet solo cambiando la variable userName.
Conclusión
¡Uf! Hemos finalizado la parte más importante de nuestra fase de codificación. Usted puede notar que algunas prácticas o técnicas han sido exageradas, pero éstas eran sólo para fines de demostración y algo más. Vamos a trabajar en terminar este tema en la siguiente parte. ¡Muchas Gracias Por Leer!
By
