Diseño y Maquetado de Plantillas WEB 7 | Solo Photoshop
Tutorial Photoshop
Tutorial por Solo Photoshop
Solo Photoshop
DISEÑO Y MAQUETADO DE PLANTILLAS WEB 7
Con Adobe Photoshop, Microsoft Front Page y Macromedia Dreamweaver
Continuamos con la septima entrega junto a Paquo360 que nos enseña como crear una plantilla usando Adobe Photoshop, y luego maquetarla con Macromedia Dreamweaver, pero debido a algunos pedidos de usuarios haremos primero la Maquetacion en Microsoft Front Page :)
Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas, al igual que usar Dreamweaver 8 para el maquetado. !!
Abre tu diseño de Página, ahora en HTML. La Primera impresión en Front Page 2000 o superior es un poco tosca (ruda) pues las celdas aparentan estar fuera de lugar, sin embargo no es así y lo puedes comprobar en la Vista Previa .
Lo primero que haremos será cambiar el color del fondo de nuestra Página.
Formato > Fondo > Colores > Fondo > más colores > Valor = EC,ED,F7.
Con esto se homogeniza el fondo de nuestra página y estamos en posibilidades de eliminar las imágenes cuyo color es el mismo que el de fondo. Sólo haz clic sobre estas y luego presiona Supr (delete), no importa que cambie el tamaño de la celda. Si tienes duda, en cualquier momento puedes comprobar que tu celdas aun concuerdan con la Vista Previa
Evita en todo momento hacer un cambio a las celdas de los extremos superior y derecho, pues son estas las que dan estabilidad a tus tablas.
Ahora ve a la pestaña HTML y busca lo siguiente (6, 7, o 8 línea):
Debajo encontrarás el siguiente código. Agrega el comando ALIGN.
<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TABLE WIDTH=780 BORDER=0 CELLPADDING=0 CELLSPACING=0 ALIGN=CENTER>
Con esto tu Plantilla se centra sobre la página como en la imagen.
Hasta ahora mi contador de Tiempo estimado de carga marca 15 seg. a 28.8 kb/s, es decir que si tienes una velocidad de conexión a Internet de 56 kb/s tu Plantilla se cargará en 7.5 segundos (la mitad). Sin duda es una tentadora marca, sin embargo hay que pensar en que se le agregarán más celdas, scripts, imágenes y muchas otras cosas que aumentarán enormemente el peso de la Plantilla, es por esta razón que debemos bajarla aún más.
Quitemos las imágenes de las pantallas de cada ventana. Excepto un triangulo que anda por ahí.
La imagen nos muestra el resultado, y vemos también la imagen del triangulo a la que me refería.
El Tiempo Estimado de Carga disminuye a 12 segundos, nada mal.
A continuación hay que sustituir las imágenes con el mismo color. Posiciónate en alguna de las celdas cuya imagen de color eliminaste luego: Clic Botón Derecho del Ratón > Propiedades de Celda > Fondo, baja el sub-menú de color > Mas Colores > Seleccionar. Y ya con el gotero muestrea el color oscuro de la imagen del triangulo, que es el color de las imágenes borradas, o simplemente usa el siguiente valor: C3,C7,E5. En delante este valor estará cargado en los Colores del Documento, lo que significa que no será necesario muestrear nuevamente.
Como ven ya falta poco :), hasta la proxima
Ver las demas entregas < 1 > < 2 > < 3 > < 4 > < 5 > < 6 > < 7 > < 8 > < 9 > < 10 >
Comentarios de Diseño y Maquetado de Plantillas WEB 7 | Solo Photoshop
↑ Tutorial
Charity
2006-05-17 20:55
paginillasweb
2006-05-18 08:06
mcnadie
2006-05-18 10:01
pinolere
2006-05-19 07:05
carlatovar
2006-05-19 10:56
rickblanc02
2006-05-19 11:56
juanvarela
2006-05-29 21:23
salinas282003
2006-06-05 17:08
aldobond
2006-06-06 14:42
freelander
2006-06-10 18:10
wilytus
2006-06-10 21:22
wilssonly
2006-06-10 22:35
marjorie davila
2006-06-13 15:32
duver
2006-07-10 02:06
rickblanc02
2006-10-23 00:58
tutupaturro
2006-11-19 17:35
aarias
2007-01-18 08:48
↑ Tutorial