Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Diseño y Maquetado de Plantillas WEB 9

Diseño de Interfases Web - Adobe Photoshop CS, FrontPage y Dreamweaver

 

Tutorial por Paquo360

Atención: este tutorial, fue escrito en el año 2002. No dejes de visitar la versión año 2007 actualizada por elQuique acá: Diseño y Maquetado Web xHTML y CSS con Adobe Photoshop CS3.

En esta novena entrega junto a Paquo360 llegamos a uno de los puntos mas esperados del tutorial, es el que mas han pedido los usuarios desde el comienzo, hablamos de maquetar la web con Macromedia DreamWeaver.

Abre tu diseño de Página, ahora en HTML. Dreamweaver, cuando esta en Vista Estándar Vista Standard, contrario a Front Page, te presenta una página limpia, libre de tantas celdas, te la muestra casi como te la mostraría un navegador. Veamos pues como se vería en internet presionando F-12 en tu teclado.

Para respetar al camino que se siguió con F.P. 2000, cambiemos el color de fondo de nuestra página, sin embargo haremos una pequeña escala en el HTML para ordenarlo y limpiarlo de los malos tratos de Image Ready.

Adobe Photoshop

Rápidamente demos un correcto formato al texto HTML pues Image Ready deja mucho que desear a la hora de escribir el código. Commands > Apply Source Formatting. Tal vez no distingas nada en la Vista del Diseño Vista Diseño, pero puedes apréciar los cambios en la Vista del Código Vista Codigo. Luego quitamos las marcas que Image Ready dejo: Commands > Clean Up HTML usas los parámetro de la imagen. Nos dice que removí y listo.

Adobe Photoshop

Presiona Ok (Aceptar) y listo.

Continuemos pues con el Color de Fondo. Vamos a Modify > Page Properties y seleccionamos el color de fondo que hemos venido usando, escribiendo directamente el código para este color que es ECEDF7 o muestreando con el selector de color Selector de Color.

De paso corregimos el Margen Superior (Top Margin) a un Valor = 0.

La imagen muestra las áreas donde se realizaron los cambios encuadradas de rojo.

Adobe Photoshop

Ahora hay que alinear nuestra pagina al centro, lo cual es muy simple. Nos pasamos a la Vista Layout presionando su respectivo botón Vista Layout.

Hacemos clic sobre la cresta principal del diseño Layout Table para luego usar la Inspector de Propiedades (Window > Properties) Activamos el Tag Editor (o selector de etiquetas) Luego clic sobre el signo + Luego sobre el Menú Tag y seleccionamos Align Finalmente escribimos Center sobre el renglón emergente terminando con un Enter en tu teclado.

Este es el resultado.

Adobe Photoshop

Adobe Photoshop

Es hora de eliminar las imágenes del mismo color que el fondo de nuestra página. En algunos caso puede cambiar el tamaño de las cedas pero eso realmente poco afecta. Haz clic sobre las imágenes y presiona Supr (delete). Quitemos las imágenes de cada ventana.

Estas últimas sustitúyelas por color de fondo de celda, en este caso C3C7E5 que es el mismo color de las imagenes que las cubrían.

Toma la celda por cualquiera de los extremos y luego Sobre el Inspector de Propiedades cambia el Bg (background).

Adobe Photoshop

Adobe Photoshop

Y bueno ya solo nos falta la ultima entrega en version DreamWeaver, hasta la próxima.

Ver las demas entregas < 1 > < 2 > < 3 > < 4 > < 5 > < 6 > < 7 > < 8 > < 9 > < 10 >

Comentarios de Diseño y Maquetado de Plantillas WEB 9

↑ Tutorial

  • varnav

    varnav

    2006-07-18 12:49

    ok
  • tuis

    tuis

    2006-09-23 15:03

    ta pueklantaaaaaa haaaaaaaa