Diseño avanzado de un Blog para Dummies - www.multinivelcoach ...
Diseño avanzado de un Blog para Dummies - www.multinivelcoach ...
Diseño avanzado de un Blog para Dummies - www.multinivelcoach ...
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
#color1 Violeta body<br />
#color2 Rosa body<br />
…<br />
Una vez echo en todos, pulsamos en Vista Previa (No Guardar)<br />
<strong>Diseño</strong> <strong>avanzado</strong> <strong>de</strong> <strong>un</strong> <strong>Blog</strong> <strong>para</strong> <strong>Dummies</strong> – Óliver Al-Nabhany<br />
¿Qué conseguimos con esto a parte <strong>de</strong> tener <strong>un</strong> blog <strong>de</strong> colores? Que sabrás como se<br />
llama cada parte a partir <strong>de</strong> los colores. Coge tu seg<strong>un</strong>do folio y a partir <strong>de</strong> las relaciones <strong>de</strong><br />
los colores sabrás como se llama cada parte.<br />
Ahora tendrás clarísima la estructura <strong>de</strong>l blog, así que empezaremos a modificarlo <strong>de</strong><br />
verdad. Lo primero necesitas conocer cuáles son los modificadores que pue<strong>de</strong>s usar. Abre<br />
en seg<strong>un</strong>do plano la siguiente web:<br />
http://<strong>www</strong>.w3schools.com/css/css_backgro<strong>un</strong>d.asp<br />
Ahí encontrarás todas las opciones disponibles. Te garantizo que no te llevará más <strong>de</strong> 10<br />
minutos ver todo lo que se pue<strong>de</strong> hacer.<br />
Del boceto a la realidad<br />
Ya sabes lo básico <strong>de</strong> la estructura <strong>de</strong> nuestra web, ahora vamos a transformar la i<strong>de</strong>a en<br />
<strong>un</strong>a realidad.<br />
Primero vamos a <strong>de</strong>finir el tamaño que va a tener todo, y a rellenar todos los espacios. Más<br />
a<strong>de</strong>lante nos centraremos en las tipografías.<br />
Para que te hagas a <strong>un</strong>a i<strong>de</strong>a <strong>un</strong> blog <strong>de</strong> tamaño normal, tiene <strong>un</strong>os 750píxels <strong>de</strong> ancho.<br />
Generalmente se distribuyen en 450 a 500 píxeles el Post y el resto (250 a 300 píxeles) la<br />
Si<strong>de</strong>bar. La altura normal <strong>de</strong>l Hea<strong>de</strong>r son <strong>un</strong>os 200 píxeles, al igual que el Footer. Pues bien<br />
<strong>de</strong>finimos el ancho <strong>de</strong> las partes:<br />
#page �width:750px;��<br />
#hea<strong>de</strong>r �width: 750px; heigth:200px��<br />
…<br />
Lo siguiente será ir colocando las imágenes o colores <strong>para</strong> cada zona. Por lo general<br />
recomiendo que a<strong>un</strong>que quieras <strong>de</strong>jar <strong>un</strong>a zona <strong>de</strong> <strong>un</strong> color sólido, a<strong>de</strong>más <strong>de</strong> colocar el<br />
color en cuestión, también colocar <strong>un</strong>a imagen <strong>de</strong> 1px x 1px <strong>de</strong> ese color <strong>de</strong> fondo. Parece<br />
<strong>un</strong>a tontería, pero a veces <strong>para</strong> IE6 es útil.<br />
Ejemplo:<br />
#page�width:750px; backgr<strong>un</strong>d:red; backgr<strong>un</strong>dimage:<br />
url(‘http://…’);��<br />
�<br />
Y así en todas.<br />
De momento te recomiendo que vayas subiendo las imágenes a <strong>un</strong> sitio tipo Flickr o por el<br />
estilo, así sabrás su url sin complicaciones.<br />
Para el caso <strong>de</strong>l Hea<strong>de</strong>r o <strong>de</strong>l Footer, lo que hacemos es algo distinto. Como hemos fijado<br />
ya el tamaño, recortamos en Photoshop <strong>un</strong>a imagen <strong>de</strong> nuestro boceto.
Change language