Creando un
sitio web con Walter
Photoshop y Alvarez
Dreamweaver
Planifica, crea, diseña una interfaz para página web. Este libro te
explica paso a paso como hacerlo, desde el diseño hasta el
Septiembre,
montaje y subida al servidor. 2008
Diseño Web || Walter Alvarez: www.solucionesseo.com
Creando un sitio Web con
Photoshop y Dreamweaver
Septiembre, 2008
2
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Introducción
Con el presente documento pretendo ayudar a quienes nunca han diseñado un
sitio web con Photoshop.
Con esta entrega pongo a tu disposición las técnicas que me han ayudado en
el diseño de interfaces para páginas web, permíteme reiterarte que la
creatividad no es algo nacido sino aprendido, con la practica vas a ir
mejorando, las interfaces te quedarán cada vez mejor, pero con la ayuda de
este documento te doy una muy buena base.
Las técnicas son básicas y mas que técnicas te darás cuenta que son trucos
aprendidos a lo largo de 8 años de experiencia en diseño web, que pongo a tu
disposición.
3
Diseño Web || Walter Alvarez: www.solucionesseo.com
Walter Alvarez
www.solucionesseo.com
war@solucionesseo.com
Por último, recuerda que te estoy dando parte de mis conocimientos, mismos
que espero te ayuden a una mejora en tus diseños y amplíe tus conocimientos,
por lo que cualquier donación es bienvenida.
Nombres y Apellidos:
Walter Humberto Alvarez
Cedula de Identidad:
001-210478-0006W
Dirección:
Costad Sur de la Funeraria Monte de los Olivos 1 ½ c. al Este. Managua,
Nicaragua.
4
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Tomando como punto de partida que nuestro sitio va a ser visitado por
monitores de 1024 x 768 mínimo, diseñamos para esa resolución y le vamos a
dar al documento 1000px * 500 px, ¿pero porque tan poco alto?, la respuesta
es sencilla, simplemente porque no queremos tener tanto espacio en blanco
en el sitio, recuerda que cuando leemos un libro o un tutorial leemos de
izquierda a derecha y de arriba hacia abajo, el ojo está acostumbrado a esa
regla, así que no importa cuánto vaya a bajar el sitio por el contenido de una
página determinada, lo que nos debe preocupar es el ancho no tanto el alto, de
todas formas en Dreamweaver podemos, utilizando CSS, repetir una imagen
en donde corresponda para mantener siempre la estética del sitio, pero eso lo
veremos más adelante.
5
Diseño Web || Walter Alvarez: www.solucionesseo.com
cuadro 1.
Creación de un documento nuevo de Photoshop
6
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
A la par de la opción Width y Height encontrarás siempre la unidad de medida, dentro de las
cuales las más usadas son cm (centímetros), inches (pulgadas), mm (milímetros), pixels
(pixeles). ¿Cual usaremos nosotros?, pixeles, ya que es la interfaz de una página web la que
voy a realizar y va a ser vista a través de monitores y los monitores trabajan con pixeles.
Cuando hayamos configurado nuestro documento presionamos “OK”, seguido nos aparecerá
un documento en blanco, el cual es nuestro documento con las dimensiones que hayamos
definido anteriormente.
1. TOP
a. Es el encabezado de nuestro sitio web y ubicaremos en el
logotipo de la empresa, slogan de la empresa y si el diseño lo
amerita, la imagen de la sección.
7
Diseño Web || Walter Alvarez: www.solucionesseo.com
2. Menú
a. Le llamamos menú al conjunto de opciones o secciones de
nuestro sitio web, algunos prefieren llamarlo como “links internos”,
pero no importa como lo llamemos, la función del Menú es
siempre la misma, ofrecerle al visitante la posibilidad de navegar
a través de nuestro sitio web.
b. Toma en cuenta que las opciones del menú deben estar
disponibles en todas las páginas de nuestro sitio web, así que lo
que conviene es que cada opción tenga como nombre la sección
que será visitada, es decir, “Acerca de la Empresa” llevará al
visitante a una página en la que se encuentre información de la
Empresa, posiblemente una breve reseña, misión y visión,
además valores y cualquier otra información que se considere de
valor.
c. Una página web es como una presentación en Power Point de tu
empresa, la diferencia es que es a nivel Mundial, y como en una
presentación no lo puedes poner todo, debes ser capaz de
seleccionar el contenido y publicar únicamente lo que es útil para
el visitante.
i. Al usuario probablemente no le interese cuantos
empleados hay, ni cuanto se gasta mensualmente en las
compras del supermercado, tampoco cuanto se paga de
energía eléctrica, o cuantas cartas se reciben por aire o
cuantas cartas se reciben por tierra, etc.
ii. Hay que realizar una selección exhaustiva de la
información a publicar.
iii. Una correcta selección de información le será muy útil a la
empresa, a la vuelta del final del desarrollo del sitio web
toda la información útil va a estar online.
3. Contenido
a. En esta parte se muestra la información de la pagina individual,
en el caso de la portada no caigamos en el error de mostrar un
texto de bienvenida,
b. Una página web de éxito muestra al navegante sus productos
como primera instancia, o sus servicios si es una empresa de
servicios, los Mensajes de Bienvenida no resultan muy útiles a la
hora de construir paginas cuyo propósito es vender, pero si
resultaría útil si la bienvenida la acompañamos con una reseña
breve de lo que puede encontrar en este sitio web.
4. Footer / Pie de pagina
a. Generalmente mostraremos aquí información de contacto de la
empresa: “Empresa.com Todos los derechos reservados. Tel:
555-555555; fax : 555-555555, etc” y además los créditos. Que no
se te olviden los créditos con un enlace hacia tu sitio web.
8
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
9 Dimensiones de los elementos de la Interfaz de nuestra
página web
1. TOP
Ancho = 1000 px
Alto = 200px
i. Puedes variar el alto entre 150px y 200px, haz las pruebas.
Dependerá del alto del logotipo y lo que desees mostrar en este
espacio.
2. Menú
Ancho = 200 px – 250 px
i. Aquí es el ancho el que nos preocupa, ya que el ancho debe
haber espacio suficiente para escribir las opciones del menú,
200px en ocasiones es suficiente, sin embargo un numero un
poco mayo nunca es malo, sobre todo si el sitio va a ser
dinámico y las opciones del Menú van a ser extraídas de una
Base de Datos de la cual nosotros no tendremos control sobre la
cantidad de caracteres. El espacio debe ser suficiente para
escribir dos palabras moderadas, sin embargo el usuario en este
caso en particular es el que va a escribir esos textos por lo que
conviene dejarle un espacio suficiente para que la cantidad de
caracteres no descuadre nuestra forma posteriormente.
ii. Es preferible dejar el ancho calculando el 20% del espacio total,
recuerda que son solamente opciones las que mostrarás.
Alto = Proporcional al contenido
i. Puedes comenzar (solo para darle un alto cualquiera), 200px de
alto.
ii. La altura aquí no es tan importante, ya que va a ser el usuario el
que determine, con la cantidad de opciones que tenga, la altura
de este cajón.
3. Contenido
Ancho = 750px
Alto = Proporcional al contenido
i. El alto del cajón Contenido, dependerá de la cantidad de
información mostrada en la página web, y tomando en cuenta
que no todas las paginas tienen igual cantidad de información,
conviene hacer un espacio pequeño que luego podamos
agrandar
4. Footer / Pie de página
Ancho = 100% del ancho total de la pagina
Alto = no menos de 50px
Con lo que hemos visto hasta aquí, ya conocemos lo básico, ahora pasemos al diseño
en Photoshop.
Si nunca has usado Photoshop, te recomiendo que leas la ayuda del Programa, te
servirá de mucho, si ya has usado el programa se te hará más fácil la comprensión. No
9
Diseño Web || Walter Alvarez: www.solucionesseo.com
https://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop
Una vez abierto el programa crea un documento nuevo (ver el acápite “dimensiones
y resolución”).
10
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Nos concentraremos en las herramientas que vamos a utilizar frecuentemente a la
Selecciona cada una de las herramientas para que veas los cambios que
sufre el panel de propiedades.
11
Diseño Web || Walter Alvarez: www.solucionesseo.com
12
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Cada objeto que dibujemos dentro de nuestro documento ocupará una capa nueva, en
el caso que se muestra en la foto superior, tenemos 4 Capas, las cuales son Shape 1,
Shape 2, Shape 3 y el Background. El background aunque está bloqueado y no lo
podemos mover ni editar no significa que no podamos convertirlo y usarlo como capa,
ya que basta con darle doble clic y Aceptar y el background pasa de ser background
para convertirse en “Layer 0”, es decir una capa utilizable.
Es necesario saber esto?, mmm… Si, ya que si abrimos una foto y hacemos un
recorte no vamos a ver resultados a menos que esta imagen tenga una capa por
debajo, y si lo que queremos hacer es que el contorno no aparezca (invisible)
necesitamos que ese Background (fondo) sea Capa para que pueda tener
transparencia y asi poder guardar los cambios sin que se altere la imagen
original.
13
Diseño Web || Walter Alvarez: www.solucionesseo.com
Repite el procedimiento para cada forma que estamos trabajando hasta que tengas las
figuras como la de la foto de abajo:
Ahora que has aprendido a dibujar las formas basicas y aplicarle colores estás listo
para aplicar mascaras.
Para las mascaras vamos a utilizar el mismo documento en el que tenemos las formas
de arriba, y un par de fotos de Windows.
Para abrir una foto del disco duro vamos al Menu File/Open y buscamos la imagen
dentro del disco duro, tal como lo haces con cualquier otro programa cuando abres un
archivo, como se muestra en la foto inferior:
Una vez ubicada la foto que queremos, le damos OK, a continuación la imagen se
abre en una nueva ventana, dejando nuestro documento aparentemente cerrado, pero
no es asi, estamos usando Windows cuyo significado en español es Ventanas,
Photoshop también permite el trabajo con ventanas asi que lo que deberemos hacer
es restaurar la ventana del documento no la ventana del programa, sino la ventana del
documento.
14
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Si haz sido observador te habras fijado que cada que se abre un documento o
creamos un documento nuevo los botones de Minimizar, Restaurar y Cerrar se
Así que manos a la obra, restaura la ventana del documento y verás que el documento
anterior ahí está solo que había sido oculto por la nueva ventana de documento.
Para pasar la imagen al documento de las formas (porque ahí lo necesitamos), basta
con arrastrar la imagen al documento (con la herramienta Mover Seleccionada, como
se muestra en la foto siguiente.
15
Diseño Web || Walter Alvarez: www.solucionesseo.com
Ahora presiona el botón derecho del ratón encima de Layer 1 y selecciona la opción
“Create Clipping Mask”.
16
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Procedimiento para crear mascaras:
Todo lo que hemos visto hasta el momento nos servirá más adelante a la hora de
dibujar nuestra interfaz de usuario, nos ayudará a crear elementos sencillos pero
agradables.
Recuerda que vamos a trabajar un documento de 1000px * 700 px, y que las
dimensiones que le daremos al documento las vimos anteriormente.
No te preocupes por los colores, lo importante hasta aquí es que distingas las herramientas que
he utilizado. Los colores los vamos a cambiar más adelante.
17
Diseño Web || Walter Alvarez: www.solucionesseo.com
Ahora comienza lo bueno comienza, lo que sigue es hacer los sectores, para lo cual
Esta herramienta divide nuestro diseño en sectores, cada sector es equivalente a una
imagen que Photoshop ubica en una carpeta que llama “images” dentro de la carpeta
en la que guardemos el archivo .html (el cual veremos mas adelante).
Ten en cuenta que Photoshop crea una carpeta llamada “images”, esto lo vamos a
utilizar dentro del Código de Dreamweaver, como lo veremos mas adelante.
Sin embargo aquí vamos a hacer un alto, ya que antes de pasar a hacer los sectores,
vamos a “partir” nuestro archivo en 4 partes con la ayuda de la herramienta recortar
(Crop Tool), esta herramienta es fácil de usar lo único que necesitamos es darle
clic a nuestro documento y seleccionar el area que queremos dejar y luego presionar
“Enter”.
18
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Recortando nuestro documento
Para hacer los recortes, vamos a apoyarnos en las guías, ya que nos van a ser muy
útiles en esta parte, en este punto ya deberías haber guardado tu pagina, yo la llamé
paginalibrodisenio.psd.
Trazamos las guias en las areas blancas que dejamos, lo hacemos así, ya que en
esos lugares exactos vamos a aplicar los recortes.
19
Diseño Web || Walter Alvarez: www.solucionesseo.com
Asi que cuando regresas al documento lo que debes hacer es presionar la siguiente
combinación de teclas “CTRL+ALT+Z” (sin las comillas). Esta combinación es para
deshacer, no desesperes, el archivo que acabas de guardar está a salvo, pero
tampoco vayas a guardar porque reemplazarías el primer pedazo del documento.
20
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Con todos los archivos psd creados solo falta crear los sectores, para lo cual
abriremos todos los archivos de uno en uno, empezando por “paginatop.psd”, al final
de este ejercicio deberas tener 4 páginas cuya vista deberá ser como las siguientes:
Paginatop
Paginamenu
Paginacontenido
pabinabottom
21
Diseño Web || Walter Alvarez: www.solucionesseo.com
Una vez convertido en sector de usuario aparecen unos cuadritos (señalados en los
círculos rojos), estos cuadritos se llaman Manejadores y sirven para redimensionar.
Arrastramos el manejador derecho del centro hacia el centro hasta que la línea
punteada quede en un espacio que abarque únicamente al logotipo.
22
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Sigue el procedimiento anterior, solo que esta vez la selección debe abarcar
únicamente al Slogan.
Realiza los mismos procedimientos a fin que al final tengan la siguiente apariencia
23
Diseño Web || Walter Alvarez: www.solucionesseo.com
Nota:
Cuando hagas divisiones en sectores que tienen esquinas redondeadas, procura que
la curva de la esquina quede en un solo sector, esto nos evitará futuros dolores de
cabeza.
24
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Guardando para Web
Si das clic en JPEG veras que lo puedes guardar en otro formato, siendo los permitidos
PNG, GIF, JPEG. Te recomiendo que dejes, para efectos de este documento el formato
en JPEG, la calidad la configuramos debajo del formato Very Hight nos da un 80% de
calidad, lo cual es bastante aceptable, puedes cambiar los valores que ver los cambios,
cambia la calidad de la imagen y veras como cambia también el tamaño del mismo (lo
ves en la pantalla de imagen resultante), los cambios que realices no se aplican a toda la
imagen sino al sector que tengas seleccionado en ese momento, asi que si deseas
cambiarle el formato a la imagen deberás hacerlo de sector en sector.
25
Diseño Web || Walter Alvarez: www.solucionesseo.com
Esta técnica te sirve no solo para guardar paginas con sectores como HTML, sino
también para disminuir el tamaño de una foto sin alterar la calidad de la misma.
26
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
que tanta falta nos hará luego, Slices: “All Slices” / “Todos los sectores”, asi Phosothop
va a guardar todos los sectores que creamos con la herramienta Seleccionar Sector.
Nuestro trabajo con Photoshop hasta aquí termina, si lo abrimos nuevamente será
para realizar algún cambio en los títulos, o bien porque vas a diseñar un banner para
la pagina web o cualquier otra cosa.
Te recomiendo practicar unas dos o tres veces este ejercicio a fin de que domines la
técnica.
Cualquier comentario que ayude a enriquecer este trabajo porfavor hazlo escribiendo a
war@solucionesseo.com.
27
Diseño Web || Walter Alvarez: www.solucionesseo.com
Como editor WYSIWYG que es (What You See Is What You Get), Dreamweaver
oculta el código HTML de cara al usuario, haciendo posible que alguien que no
entiende el lenguaje HTML pueda crear páginas y sitios web fácilmente.
9 Conceptos Básicos
Pagina Web
Cuando pensamos en una pagina web debemos pensar en una empresa que tiene
una jerarquía bien establecida, un departamento de ventas, división de personal,
contabilidad, diseño, etc. Cada una de estas estructuras cumple una función
determinada e importante dentro de la empresa. Pues una pagina web es una sección
de una estructura mas grande que ofrece al navegante la posibilidad de informarse
acerca de determinado producto, servicio o la empresa.
Sitio Web
Siguiendo el ejemplo anterior, puedo decir que es la empresa como tal, por ejemplo:
Soluciones SEO, cuenta con una División de Computadoras, División de Tecnologías
Web y Multimedia, División de Personal y Contabilidad, cada una cumple una función
dentro de la empresa, sin embargo en el sitio web se desglosan sus servicios o se
muestras sus productos en paginas individuales, pero el usuario está navegando en el
sitio web, es decir, al visitar www.solucionesseo.com verás que hay una sección de
diseño grafico, otra de diseño web, otra Quienes somos, etc, si entras a diseño grafrico
veras los precios de los productos impresos y una galería de trabajos realizados, lo
mismo en diseño web solo que en diseño web se muestran los trabajos de sitios web
diseñados.
28
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Sitio Local
Una vez definido el trabajo a realizar, todo lo guardas en una carpeta, la cual, si eres
ordenado, pondrás el nombre del cliente y dentro de ella toda la información, paginas
html, imágenes, etc. Este es el sitio local, es decir, la copia en el disco duro del sitio
web en internet.
Sitio estático
Se le llama sitio estático al sitio web que no interactúa con una Base de Datos, es
decir solo usa tecnología HTML, CSS y JavaScript.
Sitio dinámico
Sitio Interactivo
29
Diseño Web || Walter Alvarez: www.solucionesseo.com
Cada vez que usamos Word, los archivos por defecto se guardan en la carpeta Mis
Documentos, cuando guardamos una página web dentro de un sitio web de
Dreamweaver el programa sabe exactamente donde se guardará ese archivo y
nosotros solo deberemos concentrarnos en darle un nombre al archivo y no en la
ubicación del mismo.
Pasemos ahora a la definición del sitio, que no es más que decirle a Dreamweaver en
que carpeta se encuentran los datos de nuestro sitio web y a la vez, que cada vez que
guarde el archivo este sea guardado en esa ubicación y no en otra.
30
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Dreamweaver, nosotros utilizaremos HTML, “Create from Samples” es un conjunto de
plantillas prediseñadas que te ayudarán en tu proceso de aprendizaje del programa,
para realizar cambios a estas plantillas prediseñadas deberás tener conocimientos
previos de Hojas de Estilo Cascada (CSS) y HTML.
En la pantalla de
definición del sitio se
nos muestran 2
pestañas Básico y
Avanzado, aunque lo
recomendable es que
vayas paso a paso, es
más rápido en la
pestaña Avanzado, así
que clic en Advanced:
La pantalla que sigue presenta las mismas opciones que la pestaña Basic solo que
mas accesible, lo que nos permitirá la definición del sitio mas rápidamente, a
continuación detallo las opciones de la pestaña Advanced.
31
Diseño Web || Walter Alvarez: www.solucionesseo.com
Site name: Dale un nombre al sitio, yo usaré “sitio del libro”, aquí puedes usar
caracteres acentuados, “ñ”, espacios en blanco, ya que es solo una ayuda visual que
mas adelante te ayudará a identificar el sitio de otros que tengas definidos dentro de
Dreamweaver.
Local root folder: dale clic al icono de la carpeta para buscar dentro de tu disco duro
la ubicación en la que estará tu sitio web.
Default images folder: para definir la carpeta por defecto de las imágenes que
usaremos en nuestro sitio web.
El resto de opciones las dejas como están por defecto ahora presiona
Eso es todo, con esa configuración básica ya hemos definido nuestro sitio web.
32
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
La ventana Files, si no la tienes abierta dirigete a Window / Files, debe estar como la
foto de abajo.
A partir de este punto empezamos a armar el rompecabezas que al final será nuestra
plantilla para nuestro sitio web.
33
Diseño Web || Walter Alvarez: www.solucionesseo.com
Cabe mencionar que cuando aplicas un enlace (link) se activa la casilla Target
y los valores que muestra son: _blank para abrir el vinculo en una
ventana del navegador nueva, _self para abrir el vinculo en la misma ventana que
estamos utilizando, _parent para abrir el vinculo en una ventana paralela, _top para
abrir el vinculo en la ventana del nivel superior (solo para marcos / Frames).
link .
2. Buscar el archivo dentro del sitio local
3. Establecer un punto de enlace arrastrando la herramienta hasta el
documento que queremos vincular y soltarlo cuando este último se sombree.
34
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Armando nuestra página principal
Con paginatop.html abierta solo debes dirigirte a File / Save As (Archivo / Guardar
Como), guarda el archivo en el Nivel superior, ya que actualmente te encuentras
dentro de la carpeta recortes y lo que queremos es que esta pagina se encuentre en el
directorio raíz de nuestro sitio local, a continuación llamaremos a este archivo
index.html (no es necesario escribir .html el programa asigna la extensión de forma
automática).
35
Diseño Web || Walter Alvarez: www.solucionesseo.com
36
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Ahora pasemos a las otras dos paginas, ya que el procedimiento no es el mismo
vamos a explicarlo a continuación.
Peimro haz clic en la vista del código y al inicio localiza la línea < table ID….> el
atributo ID lo vas a eliminar junto con su respectivo valor, esto porque el atributo ID
sirve para asignar un nombre a un objeto y nos servirá solo si vamos a utilizar un
Programa Orientado a Objetos, pero HTML no es un lenguaje de programación sino un
lenguaje interpretado, asi que el atributo ID está de más.
37
Diseño Web || Walter Alvarez: www.solucionesseo.com
Ahora que ya no tienes ID asignado a esta tabla podemos cambiar las rutas en el
código, que es nuestro siguiente paso.
38
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
todos los documentos que se encuentren abiertos.
• Folder…: Su nombre lo dice todo no?
• Selected Files in Site: Te permite seleccionar varios
archivos desde la ventana Files.
• Entire Current Local Site: Para buscar en todo el
sitio local sin necesidad de abrir los archivos.
39
Diseño Web || Walter Alvarez: www.solucionesseo.com
Antes de continuar veamos cuánto mide de ancho este documento, para ello nos
dirigimos en el código a la etiqueta TABLE y el valor del atributo width es el ancho de
la tabla, este valor es de vital importancia ya que corresponderá al valor que le
daremos de ancho a la columna del Index en el cual aparecerá esta pantalla.
Ahora solo falta copiar esa tabla completa y pegarla en index.html, para ello ubicamos
el puntero del Mouse en el borde derecho de la tabla hasta que la tabla completa
quede remarcada de rojo y damos clic, copiamos (CRTL+C) y lo mantenemos en el
portapapeles.
Debemos pegar el contenido del portapapeles dentro del index.html, sin embargo no
hemos definido en el lugar que deberá aparecer dicha tabla, asi que procedemos a
insertar una tabla de dos columnas y una fila debajo de la tabla del top que tenemos
en el index.html. Para insertar una tabla haz clic en cualquier parte debajo de la tabla
del top (no importa que no aparezca el cursor), y seleccionamos la herramienta
40
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
41
Diseño Web || Walter Alvarez: www.solucionesseo.com
Dreamweaver solo nos está alertando que esas imágenes no tienen comentarios,
presiona “cancel”.
42
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
El problema ahora es que la columna derecha es demasiado estrecha, por lo que
debemos darle un ancho a la columna izquierda (262px), Dreamweaver realiza una
operación de resta automática, cuando insertamos la tabla dijimos que iba a ser de
1000px de ancho si a esto le restamos 262px que corresponden a la columna
izquierda (Menu), significa que la columna derecha mide 738px que es el ancho exacto
de paginacontenido.html.
Ahora que ya tenemos nuestra tabla para el TOP y nuestra columna del Menu, solo
nos faltas un par de archivos por colocar y estaremos listos.
Si haz realizado paso a paso este ejercicio te resultará mas fácil ahora, ya que lo que
vamos a hacer con paginacontenido.html será bastante parecido a lo que le hicimos a
paginamenu.html.
1. Abrimos la paginacontenido.html
2. Buscamos “images/” y lo reemplazamos con “recortes/images/”
43
Diseño Web || Walter Alvarez: www.solucionesseo.com
Importante:
44
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Ahora solo nos falta paginabottom.html, repite los pasos anteriormente descritos.
Ahora el Menú no nos sirve como está, ya que necesitamos que sean textos y no
imágenes las que estén enlazadas (por el posicionamiento) además que son más
rápido de cargar.
Así que selecciona la imagen que tiene las opciones y bórrala, haz lo mismo con el
espacio en blanco que tienes en la columna de portada (columna de la derecha).
45
Diseño Web || Walter Alvarez: www.solucionesseo.com
En el espacio vacío que tienes en Menú inserta una tabla del 100% de ancho y 1 sola
columna por 1 sola fila.
46
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
En Dreamweaver igual que en Word
cuando llegas al final de una tabla (en la
última celda) y presionas la tecla (TAB)
en el teclado, se inserta una nueva fila,
usaremos esta opción para insertar
tantas filas necesitemos en el Menú.
Para preparar los vínculos, selecciona el texto que vayas a vincular y en el panel de
propiedades en la casilla LINK escribe # (símbolo numeral), esto te va a servir de
ayuda visual para saber donde tienes los vínculos.
Para editar un vinculo no necesitas seleccionar todo el texto, basta con posicionar el
cursor encima del texto y en la casilla LINK del Panel de Propiedades cambia la URL o
dirección.
47
Diseño Web || Walter Alvarez: www.solucionesseo.com
48
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Para este ejercicio voy a dejar únicamente como región editable la sección del
contenido, pero tu puedes agregar como región editable la imagen que se encuentra
en la parte superior la imagen que tiene Portada como texto, esto para personalizar
cada una de las secciones.
Ademas puedes agregar como región editable el Top, para poder presentar imágenes
distintas en cada sección del sitio.
49
Diseño Web || Walter Alvarez: www.solucionesseo.com
4. Guardamos el documento
Al finalizar estos pasos verás como se le ha agregado a nuestro archivo una pequeña
pestaña de color azul Cyan con el nombre de la región editable.
Esto quiere decir que ya estamos listos para usar nuestra plantilla.
Las regiones No editables son las que regiones que en todo el sitio serán de la misma
forma, que siempre van a tener las mismas opciones, por ejemplo el Menú.
50
Walter Alvarez [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]
Creando nuevos documentos a partir de nuestra plantilla
2. Selecciona la plantilla (solo tenemos una), verifica que la casilla (Update page
when template changes) esté seleccionada, esta opción es la que te salvará el
pellejo más adelante, ya que es la que hará el trabajo de actualización en todo
el sitio.
51
Diseño Web || Walter Alvarez: www.solucionesseo.com
Entonces podemos decir, que las plantillas nos ayudan a la seguridad ya que protegen
la integridad de nuestro diseño.
A esta página solo falta agregarle contenido y guardarla en el directorio raíz de nuestro
sitio, que ya está listo para ser publicado.
En Servidor escribes la url del sitio web, usuario = usuario, contraseña = contraseña
Puerto 21, pero no es necesario que escribas el puerto el programa sabe que es el
puerto 21 el que utiliza.
Espero que esta obra te haya sido de utilidad, recuerda que puedes escribir tus
comentarios a war@solucionesseo.com estos comentarios ayudarán a enriquecer este
libro.
52