Diseño Web Desde 0 Photoshop Css Maquetacion

Vdeo explicado del diseo web con Photoshop
Vdeo con explicaciones y a una velocidad adecuada para aprender a disear una web
utilizando Photoshop.
Por Miguel Angel Alvarez
Publicado: 02/4/09
Atencin: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.
Hace un par de semanas publicamos un vdeo del diseo de una web desde cero con
Photoshop . El anterior vdeo estaba a cmara rpida, por lo que no era muy didctico.
Por solicitud de los usuarios, y por sentido comn para seguir nuestra lnea editorial, de
ayudar en lo posible al aprendizaje de las personas que leen DesarrolloWeb.com, hemos
editado y republicado un vdeo en el que mostramos el proceso de diseo de una web
con Photoshop.
Ahora lo hemos publicado en Dailymotion, que permite subir vdeos en alta definicin y
de cualquier duracin. En esta ocasin el vdeo tiene 31 minutos, todava un poco
acelerado, porque as se hace ms ameno y sigue siendo igual de didctico. Hemos
agregado una locucin para explicar cada cosa que vamos realizando en el diseo de la
web.
As pues, esperamos que de este vdeo podis aprender todava un poco ms los
procesos creativos para crear una plantilla de una web con Photoshop.
Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop
del manual Diseo desde cero"
Ahora , si os ha interesado, quizs queris pasar al siguiente paso, que es crear una
pgina web a partir de esta imagen, con HTML y CSS. Lo hemos explicado en el
artculo: Maquetacin CSS con 960 Grid System, caso real.
Maquetacin CSS con 960 Grid System, caso real

Desarrollo de la maquetacin de una web con 960 Grid System, paso a paso y desde
cero, a partir de una imagen diseada con Photoshop. Con vdeotutorial.
Publicado: 15/5/09
Hasta el momento en el Manual de 960 Grid System publicado en DesarrolloWeb.com

hemos conocido las generalidades de este framework CSS y hemos aprendido sus clases
CSS bsicas y las reglas fundamentales para crear los espacios de una web a partir de
las cajas disponibles en diversos tamaos. En el ejemplo del artculo anterior, pudimos
ver cmo se maquetara una web con 960 Grid, pero el diseo en pruebas era extrarudimentario.
Ha llegado el momento de hacer un caso prctico real de maquetacin CSS con 960
Grid System, que vamos a abordar en este artculo y los siguientes del manual. En este
ejercicio aprenderemos a maquetar un caso real de una web con un aspecto
medianamente decente. La web en s es ficticia, pero tiene todas las caractersticas de lo
que sera una web real, con una maquetacin tpica de los blog actuales.
Para ayudar a que las personas a entender el proceso de creacin de una web desde cero,
hemos apoyado los temas que vamos a tratar con vdeo, en el que veis todo el proceso
de creacin de los ejemplos, tal como los hemos ido desarrollando para poder escribir
luego estos artculos. Es un trabajo doble, porque toca escribir los artculos y luego crear
y editar el vdeo, pero merecer la pena. O al menos eso deseo.
Diseo de la web con Photoshop

Lo primero que habra que hacer es disear una web. Cada uno puede hacer el diseo
que desee, pero para comenzar tenemos la ayuda de unas plantillas que nos proporciona
960 Grid. Para ello debemos descargar el framework CSS y en el archivo ZIP que
obtendremos encontraremos en el directorio "templates" los ficheros grficos en varios
formatos para comenzar el diseo ayudados por unas guas, que marcan las columnas
que tenemos disponibles. Con estos espacios definidos tenemos una facilidad adicional
para hacer una creatividad que funcione luego bien, a la hora de desarrollarla en HTML
y CSS. Tenemos plantillas para comenzar el diseo en programas tan populares como
Fireworks o Photoshop.
Nosotros hemos realizado el diseo de una web con Photoshop, que vamos a utilizar
para hacer esta prctica. Quien domine Photoshop puede que no le interese mucho ver
cmo hemos diseado la web, pero para quien no domine el programa, o para quien
quiera ver nuestras costumbres a la hora de disear una web, o cmo apoyarse de las
plantillas que ofrece 960 Grid System, os recomendamos la lectura de los siguientes
artculos, que van tambin acompaados por vdeos para demostrar y luego explicar lo
que vamos haciendo.
Vdeo demostrativo del diseo de la web a cmara rpida

Vdeo con explicaciones del diseo de una web con Photoshop
El aspecto de nuestra web, que vamos a maquetar con 960 Grid System intentando ser
fieles a la imagen conseguida, es el siguiente:
Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop

del manual Diseo desde cero"
Maquetacin de una web con CSS y 960 Grid System

Ahora que hemos visto la manera de disear una web, viene la parte que muchos de los
lectores haban pedido: Convertir la imagen de Photoshop en una pgina web. Lo
veremos por pasos, porque la pgina es suficientemente grande para ocupar varios
artculos y vdeos.
En el primer paso, que veremos en este artculo, vamos a crear la cabecera de la pgina.
Para ilustrarlo de manera grfica he colocado un vdeo al final de este texto, en el que se
puede seguir el proceso que hemos realizado para crear la cabecera. Como tenemos el
vdeo, comentando cada uno de los pasos, simplemente voy a colocar aqu las
explicaciones bsicas y el cdigo fuente que hemos creado.
1) Importar las hojas de estilos del Framework:
En nuestra pgina, el primer paso ser enlazar con las hojas de estilos del navegador,
aparte de escoger un DOCTYPE para XHTML adecuado.
Los Link con las hojas de estilos son los siguientes. Leer referencias de artculos
anteriores para ms informacin.
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">
Las dos primeras hojas de estilos son opcionales, pero vienen bien porque definen
estilos bsicos, que se aplicarn a todos los navegadores, para que nuestras pginas se
vean igual en cualquier cliente web. El tercer archivo de estilos 960.css es el propio
Framework, con las definiciones de las clases para crear los contenedores y los distintos
tipos de cajas.
2) HTML
Para crear la cabecera tengo un titular y un buscador, ambos en la misma fila. En la
cabecera tengo un titular que ocupar 6 columnas de espacio. Luego habr 2 columnas
de hueco y a la derecha del todo una caja con 4 columnas de espacio, donde aparecer el
buscador.
<div id="cabecera" class="container_12">
<div id="titulogeneral" class="grid_6 suffix_2">
<img src="images/titulo-general.png" width="443" height="30" alt="Diseo web">
</div>
<div id="buscador" class="grid_4">
<form>
<input type=text>
<input type=button value="buscar">
</form>
</div>
<div class="clear"></div>
</div>
Como se puede ver, todo se tiene que meter dentro de un container_12, al que le he
puesto id="cabecera", para luego aplicarle estilos.
Dentro del container_12 tenemos la primera caja con id="titulogeneral", que es el
espacio para el titular, con class="grid_6 suffix_2", que son las 6 columnas de ancho y
el espacio en blanco despus de 2 columnas.
Luego tenemos la caja id="buscador" con 4 columnas de anchura.
6 columnas + 2 espacios + 4 columnas = 12 columnas del container_12
Hay que fijarse que, despus de las columnas que hacen esa fila de la cabecera, todava
dentro del container_12 se ha colocado una capa DIV con class="clear". Esto es
esencial porque los grid_xx tienen un float y sin ese clear podramos tener un problema
con los fondos de los elementos que hay debajo de las cajas.
3) CSS
Ahora podemos ver los estilos que hemos colocado a la pgina por el momento.
BODY{
background-color: #2b1f1f;
}
#cabecera{
background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
padding: 28px 0 0 0;
}
#buscador{
background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
text-align: right;
}
#buscador input{
font-size:8pt;
}
#buscador form{
padding: 40px 30px 6px 0px;
}
En el cuerpo hemos colocado por ahora simplemente un color de fondo.
En la cabecera hemos colocado como fondo el degradado que habamos creado en el
diseo, que se repite en la horizontal con el atributo repeat-x.
A la imagen que hay dentro de la caja titulogeneral le hemos colocado un padding para
que haya un espacio por arriba.
Al buscador le hemos colocado un fondo con una imagen para conseguir el borde
redondeado y hemos alineado el texto a la derecha.
Los campos INPUT que hay en el buscador los he estilizado con una letra menor, para
que tambin se reduzcan de tamao.
Al formulario del buscador le coloco tambin un poco de padding para que se site
donde quiero. Es especialmente importante el padding 40px que se ha colocado por la
parte de arriba (top), porque con ello consigo empujar el formulario de bsqueda hacia
abajo, para que la capa cabecera acabe justo donde termina el buscador. As consigo el
efecto que el buscador est alineado verticalmente en la parte de abajo de la cabecera.
Con todos estos estilos CSS y el HTML anterior la pgina queda maquetada tal como
podemos ver en este enlace.
Vdeo de la maquetacin web con HTML y CSS

utilizando 960 Grid System
Para acabar, os dejamos un vdeo donde se ve el proceso relatado en este artculo,

comentado y explicado para que se pueda entender bien.
Maquetacin CSS con 960 Grid System, Parte II

Continuamos mostrando un caso real de maquetacin con CSS usando el framework
CSS 960 Grid System.
Publicado: 26/5/09
Estamos maquetando una web con CSS, para mostrar a todos los lectores de
DesarrolloWeb.com el proceso de creacin de una pgina web con el framework CSS
960 Grid System. Esta prctica la estamos haciendo desde cero y explicando paso por
paso los detalles, no slo de la maquetacin de la propia web, sino tambin las tcnicas
que utilizamos para aplicar estilo a diversos componentes de la pgina, como cajas de
contenido, listas, etc.
El presente artculo forma parte de una serie de artculos que se puede encontrar en el
Manual de 960 Grid System . En anteriores entregas ya comenzamos a maquetar este
caso real de pgina web, con un aspecto bastante profesional. Todo el proceso lo
estamos grabando en vdeo, para que cualquier lector pueda adems ver en su ordenador
cmo hemos realizado nosotros esta prctica.
En el presente artculo veremos la maquetacin de la parte principal del cuerpo de la
pgina y llegaremos hasta el punto que se puede ver pulsando este enlace. Recordemos
que la cabecera de la pgina ya explicamos cmo se haca en el artculo anterior .
As pues, comencemos a ver cmo hemos realizado este trabajo, aunque cabe decir que
las explicaciones en texto de este artculo sern bien bsicas, puesto que todo el proceso
explicado se puede ver en el vdeo que hemos publicado y que se encuentra disponible
al final de este artculo.
Maquetacin del Cuerpo

Todo lo que vamos a colocar en el cuerpo se tiene que incluir dentro de un contenedor.
Cuando hicimos la cabecera se cre ya en un contenedor, pero ahora como el cuerpo
tiene otros estilos, por lo que nos conviene crear una nueva capa DIV para el cuerpo,
que har las veces de contenedor y tal como hemos hecho en otras ocasiones
utilizaremos la class="container_12". Dentro del contenedor colocaremos, como
venimos explicando en este manual, varias divisiones o espacios que se definirn a
travs de elementos DIV con clases grid_xx, siendo xx el nmero de columnas que
utiliza esa divisin.
La maquetacin principal del cuerpo, con el contenedor y las cajas grid_xx sera la
siguiente:
<div class="container_12" id="cuerpo">
<div class="grid_12" id="navegador">
Aqu va el navegador
</div>
<div class="grid_8">
Aqu va la columna de la izquierda del cuerpo
</div>
Aqu va la columna de la derecha del cuerpo
</div>
</div>
Lo primero que hemos realizado en este artculo es la barra de navegacin que hay
debajo de la cabecera. Lo interesante de esta barra de navegacin es que la hemos hecho
con listas. Las listas nos vienen muy bien a la hora de maquetar con CSS, porque son
muy verstiles para presentar elementos uno detrs de otro.
El navegador lo colocamos en una fila de manera independiente, con una caja grid_12,
porque no hay nada ms en esta fila.
La parte de la izquierda del cuerpo la hemos definido en un grid_8, porque tiene 8
columnas de anchura. Dentro colocamos varias noticias de portada en unos recuadros
bastante sencillos, a los que les hemos asignado un borde y un fondo plano.
La parte de la derecha del cuerpo es la que ms detalles tiene. La hemos colocado con
un grid_4, para que ocupe 4 columnas de anchura, tal como se dise en Photoshop y
para completar el espacio disponible en el container_12 (8 columnas de la parte de la
izquierda + 4 columnas de la derecha = 12 columnas del container_12). Se ha creado un
tipo de caja, con un titular y un cuerpo que tiene un degradado. Dentro los contenidos
son diversos y tienen a su vez diversas clases de estilos CSS para conseguir el aspecto
que andbamos buscando. Nota: Para las explicaciones, recordar siempre que hay un
vdeo al final del artculo donde se ve paso a paso la maquetacin y se dan las razones
por las que hemos optado por esos estilos CSS y todas las guas para conseguir el
resultado final. Un vdeo vale ms que mil palabras ;)
Cdigo HTML y CSS del ejemplo

Ahora coloco aqu el cdigo HTML y CSS del ejemplo, tal y como est desarrollado
hasta el momento:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Diseo desde cero</title>
<link rel="STYLESHEET" type="text/css" href="960-gridsystem/code/css/reset.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/text.css">
<link rel="STYLESHEET" type="text/css" href="960-grid-system/code/css/960.css">
<style type="text/css">
BODY{
background-color: #2b1f1f;
color: #FFF;
font-family: verdana, arial, helvetica;
}
A{
color: #bce7e4;
}
#cabecera{
background: #fff url(images/fondo-cabecera.gif) repeat-x;
}
#titulogeneral img{
padding: 28px 0 0 0;
}
#buscador{
background: transparent url(images/fondo-buscador.gif) no-repeat bottom right;
text-align: right;
}
#buscador input{
font-size:8pt;
}
#buscador form{
}
#cuerpo{
background-color: #000;
}
#navegador{
font-size: 12pt;
margin-top: 10px;
margin-bottom: 10px;
}
#navegador a{
color: #FFF;
font-weight: bold;
text-decoration: none;
}
#navegador ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#navegador li{
float: left;
margin: 0 20px 0 0;
padding: 0;
}
.itemportada{
border: 3px solid #3b1010;
background-color: #3c2a2a;
padding: 10px;
overflow:hidden;
}
.imagenitemportada{
float: right;
margin-left: 10px;
}
.tituloitemportada{
font-weight: bold;
font-size: 120%;
margin-bottom: 6px;
}
.autoritemportada{
font-size: 8pt;
margin-bottom: 4px;
}
.introitemportada{
}
.comentariositemportada{
font-size: 8pt;
margin-top: -10px;
}
.titlateral{
background-color: #4b0d0d;
padding: 10px;
}
.cuerpolateral{
background: #612323 url(images/fondo-cuerpo-lateral.gif) repeat-x;
overflow: hidden;
}
.imagencuerpolateral{
float: left;
}
.cuerpolateral form{
margin: 0px;
}
.cuerpolateral form span{
display: block;
margin: 5px 0 5px 0;
}
.textocuerpolateral{
margin-left: 110px;
}
.cuerpolateral input{
font-size: 8pt;
}
.cuerpolateral ul{
list-style-type: none;
margin: 15px 0 0 0;
padding: 0;
}
.cuerpolateral li{
padding: 0 0 0 20px;
margin: 0 0 6px 0;
background: transparent url(images/estrellita.png) no-repeat scroll 0 4px;
}
.nube{
font-size: 10px;
text-align:center;
}
.nube span.etiqueta1{font-size: 100%}
.nube a{
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div id="cabecera" class="container_12">
<div id="titulogeneral" class="grid_6 suffix_2">
<img src="images/titulo-general.png" width="443" height="30" alt="Diseo de una
web desde cero">
</div>
<div id="buscador" class="grid_4">
<form>
<input type=text>
<input type=button value="buscar">
</form>
</div>
</div>
<div class="grid_12" id="navegador">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="#">Secciones</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div class="itemportada">
<img src="images/foto-desarolloweb.jpg" width="258" height="250" alt="Foto"
class="imagenitemportada"/>
<div class="tituloitemportada"><a href="#">Ttulo de un artculo</a></div>
<div class="autoritemportada">DesarrolloWeb.com</div>
<div class="introitemportada">
<p>
Lorem ipsum dolor sit amet...
</p>
<p>
Curabitur placerat. Vivamus rhoncus est...
</p>
</div>
<div class="comentariositemportada"><a href="#">3 comentarios</a></div>
</div>
<div class="itemportada">
<img src="images/foto-guiarte.jpg" width="256" height="252" alt="foto"
class="imagenitemportada" />
<div class="tituloitemportada"><a href="#">Otro artculo destacado en la portada
con titulo mayor</a></div>
<div class="autoritemportada">DesarrolloWeb.com</div>
<div class="introitemportada">
<p>
Nullam enim nulla...
</p>
<p>
sagittis convallis...
</p>
</div>
<div class="comentariositemportada"><a href="#">8 comentarios</a></div>

</div>
<div class="tituloitemportada"><a href="#">>> Ver contenidos
anteriores</a></div>
</div>
<div class="titlateral">
<img src="images/tit-usuarios.png" width="91" height="20" alt="Usuarios" />
</div>
<div class="cuerpolateral">
<img src="images/usuarios-grande.png" width="91" height="118" alt="usuarios"
class="imagencuerpolateral" />
<div class="textocuerpolateral">
<form>
<span>Nombre:</span>
<input type="text" name="nombre" size="15" />
<span>Clave:</span>
<input type="text" name="clave" size="15" />
<span><input type="submit" value="Entrar" /></span>
</form>
</div>
</div>
<img src="images/tit-rss.png" width="41" height="21" alt="RSS" />
</div>
<img src="images/RSS-grande.png" width="101" height="101" alt=""
class="imagencuerpolateral" />
<div class="textocuerpolateral">
<ul>
<li><a href="#">Todos los contenidos</a></li>
<li><a href="#">Artculos en RSS</a></li>
<li><a href="#">Noticias en RSS</a></li>
</ul>
</div>
</div>
<img src="images/tit-hablamos.png" width="205" height="26" alt="Hablamos
de..." />
</div>
<div class="nube">
<span class="etiqueta6"><a href="#">html</a></span>
<span class="etiqueta8"><a href="#">desarrollo</a></span>
<span class="etiqueta5"><a href="#">javascript</a></span>
<span class="etiqueta3"><a href="#">asp</a></span>
<span class="etiqueta10"><a href="#">php</a></span>

<span class="etiqueta5"><a href="#">diseo web</a></span>
<span class="etiqueta4"><a href="#">servidores</a></span>
<span class="etiqueta1"><a href="#">java</a></span>
<span class="etiqueta3"><a href="#">apache</a></span>
<span class="etiqueta6"><a href="#">promocin web</a></span>
<span class="etiqueta9"><a href="#">ajax</a></span>
<span class="etiqueta4"><a href="#">recursos</a></span>
<span class="etiqueta5"><a href="#">dhtml</a></span>
</div>
</div>
</div>
</div>
</body>
</html>
Podemos ver este cdigo en marcha en una pgina aparte , para apreciar el resultado de
la maquetacin CSS creada hasta el momento.
Vdeo de la creacin de este ejemplo con CSS y 960

Grid
Ahora os ofrecemos el vdeo que hemos grabado mientras realizbamos esta
maquetacin CSS. Como veris, est repleto de explicaciones y detalles que resultarn
interesantes para aquellos que quieran saber cmo, partiendo de una imagen de
Photoshop, crear una pgina web, maquetada con CSS. Por supuesto, aprenders
tambin a usar el framework 960 Grid System, que es de lo que se trata en este manual.
Maquetacin CSS, fin del ejemplo

Terminamos de crear en XHTML y CSS la plantilla del diseo de ejemplo para mostrar
el funcionamiento de 960 Grid System, con vdeo incluido para ilustrar el proceso.
Publicado: 19/6/09
El objetivo de este artculo es terminar con las explicaciones y demostracin de uso del
framework CSS 960 Grid System. En pasados artculos ya explicamos qu es 960 Grid
System y comenzamos a crear un diseo de muestra que hemos maquetado paso a paso,
en varios artculos del Manual de maquetacin web con CSS y 960 Grid.
El diseo de la web que estamos maquetando se puede ver aqu. En artculos anteriores
hemos podido llegar hasta este punto. Ahora nos queda maquetar la parte final del
cuerpo de la pgina y adems, vamos a crear un pie de pgina para completar nuestro
ejercicio de diseo web. Si lo deseas, puedes ver el aspecto final que tendr el ejemplo
que estamos construyendo.
Adems, para ilustrar de una manera grfica y visual a los lectores de
DesarrolloWeb.com, hemos publicado todo el proceso de maquetacin en vdeo, lo que
esperamos sirva para que esta prctica de diseo web se pueda entender por cualquier
persona. Al final de este artculo veris el vdeo de esta ltima etapa, que tambin
contiene muchas explicaciones que sern sin duda tiles para entender cmo se ha
realizado este ejemplo de maquetacin web.
Parte final del cuerpo de la pgina

La parte final del cuerpo la vamos a colocar en el contenedor general del cuerpo (que
habamos colocado antes con un DIV con la clase CSS container_12. Ver el anterior
artculo). En ella debemos colocar un titular, y ms abajo 3 contenedores para 3
recuadros distintos. El titular lo colocamos ocupando todo el ancho disponible, pues es
el nico integrante de una fila, en una caja grid_12. Crearemos luego las divisiones para
colocar los 3 recuadros de abajo, en DIV con clases CSS grid_3, grid_3 y grid_6. Y
recordemos que despus de cada fila hay que colocar un DIV con class="clear".
El esquema principal sera el siguiente:
Titular que ocupa todo el ancho disponible.
</div>
Primera caja del fin del cuerpo, anchura de 3 columnas.
</div>
Segunda caja del fin de cuerpo, con anchura de 3 columnas.
</div>
Tercera caja, con anchura de 6 columnas.
</div>
Con esta estructura conseguimos que el framework 960 Grid System cree unos espacios
como los que necesitbamos. Ahora se trata de introducir contenidos en esos espacios
para conseguir el diseo de cajas que habamos planeado en Photoshop.
Dentro de las divisiones creadas con 960 grid colocamos a su vez otras divisiones para
albergar los distintos recuadros. Esas partes me las voy a saltar en este texto, pero
podis ver cmo se crean en el vdeo que acompaa al artculo. Pero lo que s quiero
decir es que todos los estilos para formatear estas cajas se deben colocar, no en las capas
que tienen class grid_x, sino en los DIV que metemos dentro de estas.
Maquetamos el pie de pgina

Al final de este diseo debemos colocar un pie. En el diseo que habamos hecho con
Photoshop no llegamos a definir el aspecto y los contenidos del pie, pero nosotros
vamos a crear uno sobre la marcha para que nuestra pgina quede completa.
Para empezar, hemos decidido colocar el pie en un nuevo contenedor con
class="container_12", pues le queremos asignar estilos distintos de los que tiene el
cuerpo de la pgina.
Luego, vamos a crear dos divisiones en el pie, una con 8 columnas de anchura y otra
con 4 columnas. Y para acabar esta fila el ya tpico DIV con class="clear". La estructura
ser la siguiente:
<div class="container_12" id="pie">
Enlaces del pie
</div>
Logotipo del pie
</div>
</div>
En la divisin de 8 columnas colocaremos los enlaces del pie de pgina y en la parte con
4 columnas de anchura colocaremos un logotipo del sitio web. Para ver cmo asignar
estilos a estos dos elementos, os referimos al vdeo, donde lo podris ver todo con
detalle.
CSS y XHTML completos de esta ltima parte del

diseo
Ahora voy a colocar el cdigo HTML de esta ltima parte del diseo, para que se vea no
slo la estructura de cajas conseguida con 960 Grid System, sino tambin las etiquetas
que utilizamos para maquetar nuestro ejemplo.
La ltima parte del cuerpo:
Este primer DIV abre el cuerpo. Pero aqu falta todo el cdigo de la primera parte del
cuerpo que vimos en el artculo anterior.
<img src="images/tit-secciones-detalle.png" width="266" height="25"
alt="Secciones al detalle" />
</div>
</div>
<div class="titcaja2"><img src="images/tit-noticias.png" width="96" height="15"
alt="Noticias" /></div>
<div class="cuerpocaja2">
<div class="cuerponoticias">
+ <a href="#">Ttulo de una noticia</a>
<br />
+ <a href="#">Otro ttulo de prueba</a>
<br />
+ <a href="#">Ms cosas de inters...</a>
<br />
+ <a href="#">La ltima noticia</a>
<br />
[<a href="#">...</a>]
</div>
</div>
</div>
<div class="titcaja2"><img src="images/tit-otrasecc.png" width="148" height="15"
alt="Otra seccin" /></div>
<div class="cuerpocaja2">
<div class="otrasecciontit"><a href="#">Ttulo de una noticia</a></div>
<div class="otraseccioncuerpo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam enim nulla,
condimentum ut, adipiscing in, rutrum ut, neque.
<br />
<a href="#">Ver ms</a>.</div>
</div>
</div>
<div class="titcaja2"><img src="images/tit-comunidad.png" width="133"
height="15" alt="Comunidad" /></div>
<div class="cuerpocaja2 cajacomunidad">
<img src="images/comunidad.jpg" width="452" height="138" alt="" />
</div>
</div>
</div>
Y ahora muestro el cdigo completo del pie de pgina.
<div class="container_12" id="pie">

<div id="enlacespie">
<a href="#">Portada</a> | <a href="#">Acerca de</a> | <a href="#">Contacto</a>
| <a href="#">Copyright</a>
</div>
</div>
<div id="logopie">
<img src="images/logopie.png" width="286" height="20" alt="Diseo desde
cero" />
</div>
</div>
</div>
Los estilos CSS que hemos definido para conseguir que estos contenidos se muestren
como queramos son los siguientes:
.titcaja2{
margin: 10px 0 0 3px;
}
.cuerponoticias{
line-height: 20pt;
}
.otrasecciontit{
margin-bottom: 3px;
font-weight: bold;
}
.cuerpocaja2{
border: 2px solid #929191;
padding: 10px;
}
.cajacomunidad{
padding-right: 0px;
padding-left: 2px;
}
#enlacespie{
font-size: 8pt;
margin: 6px 0 10px 0;
}
#enlacespie a{
color: #fff;
}
#logopie{
margin: 8px 0 10px 10px;
}
#pie{
}
El resultado final de este diseo lo podemos ver en una pgina aparte.
Vdeo del final de la maquetacin CSS

Y ahora os dejamos con el vdeo explicado paso a paso para terminar esta prctica de
diseo web. Son casi 50 minutos intensivos de maquetacin y aplicacin de estilos CSS.
Esperamos que os guste y que os conteste todas las dudas que puedan haber quedado al
leer las anteriores lneas.

Diseño Web Desde 0 Photoshop Css Maquetacion

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Diseño Web Desde 0 Photoshop Css Maquetacion

Загружено:

Авторское право:

Доступные форматы

Vdeo explicado del diseo web con Photoshop

Maquetacin CSS con 960 Grid System, caso real

Hasta el momento en el Manual de 960 Grid System publicado en DesarrolloWeb.com

Diseo de la web con Photoshop

Vdeo demostrativo del diseo de la web a cmara rpida

Podemos descargarnos esta plantilla en el articulo "Descargas de la plantilla Photoshop

Maquetacin de una web con CSS y 960 Grid System

Vdeo de la maquetacin web con HTML y CSS

Para acabar, os dejamos un vdeo donde se ve el proceso relatado en este artculo,

Maquetacin CSS con 960 Grid System, Parte II

Maquetacin del Cuerpo

Cdigo HTML y CSS del ejemplo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div class="comentariositemportada"><a href="#">8 comentarios</a></div>

<span class="etiqueta10"><a href="#">php</a></span>

Vdeo de la creacin de este ejemplo con CSS y 960

Maquetacin CSS, fin del ejemplo

Parte final del cuerpo de la pgina

Maquetamos el pie de pgina

CSS y XHTML completos de esta ltima parte del

<div class="container_12" id="pie">

Vdeo del final de la maquetacin CSS

Вам также может понравиться