Libro diseno

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

Por : Walter Alvarez

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.

La presente obra explica paso a paso la creación de un sitio web, desde la
parte del Diseño, hasta el montaje en Dreamweaver y lo publicamos en
internet, obviamos la parte de recopilación de información, y pasos anteriores a
este proceso, ya que este documento presupone que ya cuentas con esa
información.

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.

Adobe Photoshop es el programa más utilizado en Internet para la edición de
imágenes digitales, por lo que te enseñaré a diseñar páginas web utilizando un
par de herramientas de este poderoso programa, mismas que incluyo en
graficas.

Además aprenderás a armar el documento en dos columnas dentro de
Dreamweaver, y a aplicar CSS dentro de la pagina web para lograr una estética
profesional.

Para finalizar, los comentarios o sugerencias a esta obra puedes hacerla
escribiendo a: war@solucionesseo.com, tus aportes serán bienvenidos y
ayudarán a mantener esta obra actualizada.

3


Puedes reproducir esta obra total o parcialmente, siempre que menciones la
procedencia de la misma.

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.

Esta obra es gratuita, ayuda a mantenerla así.

Puedes enviar la donación vía Western Unión a:

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.

Luego de enviar la ayuda, por favor avísame a: war@solucionesseo.com,
especificando el monto, nombre completo y país. Estos datos me los requieren
en las oficinas de Western unión.

La práctica hace al maestro.

4


Crear interfaz web con Photoshop CS3

Al comenzar un proyecto de una página web, es necesario tener la mayor
cantidad de información disponible de parte del cliente, es decir, logotipo,
imágenes (preferiblemente de alta resolución), MP3 (si aplica), videos (si
aplica).

Luego de tener toda la información procedemos al diseño, y si estamos
empezando, nuestra primer pregunta es ¿Qué tamaño le doy al documento?.

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.

Dimensiones del Documento y Resolución
Las dimensiones del documento son: 1000px (ancho) / 500 px (alto), la
resolución la mantendremos en 72 pixeles/pulgada (ver cuadro 1).

La resolución es la densidad de puntos, o píxeles, que tiene una
imagen.

La resolución de la imagen, es la cantidad de píxeles. La
resolución se utiliza también para clasificar casi todos los
dispositivos relacionados con las imagen digital ya sean
pantallas de ordenador o televisión, impresoras, escáneres,
cámaras, etc.

La resolución expresa el número de píxeles que forman una
imagen de mapa de bits. La calidad de una imagen, también
depende de la resolución que tenga el dispositivo que la capta.

La resolución de una imagen es directamente proporcional al
peso en Kb o Mb de la imagen, las imágenes que se publicarán
en internet deben tener resolución baja (72dpi – 96 dpi). Las
imágenes de resolución alta (200dpi – 500dpi), son utilizados en

5


Imprenta y se hace así para que la imagen impresa tenga la
mayor cantidad de información de colores posible y pierda
menos calidad.

Ahora que entendemos un poco mejor lo relacionado a la resolución, puedo
decirte que la resolución se mide en dpi o ppp (dpi= dots per inch ; ppp =
puntos por pulgada). Raramente veremos la resolución expresada en pixeles /
centímetro, no porque no se pueda, sino porque Puntos por Pulgada es el
estándar.

Sino haz la prueba, pregúntale al joven o la joven diseñadora de la Imprenta en
la que sacas tus documentos, si le mandas la resolución en pixeles por pulgada
o pixeles por centímetro, probablemente te responda “no importa”, sin embargo
si realizas este tipo de cambio en la resolución de una imagen y más si esta va
a la imprenta para sacar volantes mejor avísale al diseñador de la imprenta así
te evitarás futuros dolores de cabeza.

cuadro 1.
Creación de un documento nuevo de Photoshop

Si presionamos la pestaña Custom, se nos
desplegaran las opciones de tamaño de
documento que Photoshop tiene pre-
establecidas, Default Photoshop Size = es 454
* 340 pixeles. U.S. Paper = tamaño carta,
Legal y Tabloide y así sucesivamente para
cada opción que se lecciones de Presets.
Si observas con atención cuando cambias la
opción Presets a custom o cualquier otra de
las opciones la casilla Size se activa y te
permite cambiar entre tamaños, por su parte
las casillas de width (ancho) y height (alto)
cambian respectivamente al realizar el cambio.

6


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.

A la par de resolution (resolución) aparece otro cuadro en el cual puedes seleccionar si la
resolución la quieres representar en pixeles/pulgada o pixeles/centímetro. Te recomiendo
pixeles/pulgada (anteriormente expliqué la razón).

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.

Elementos de la Interfaz de nuestra página web
En esta sección definiremos los elementos a utilizar, las secciones que
utilizaremos (botones, encabezados, fuentes, colores, etc).

Debemos tener claro que un sitio web consta básicamente de la siguiente
estructura:

No importa cuál es la forma que le vayas a dar, ni el tamaño del documento
que utilices, la estructura de una página web es siempre la misma, veamos
cada elemento por separado:

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


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


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


obstante trataré de explicar los procedimientos y las herramientas lo mejor y más
comprensible posible.

Diseñando con Photoshop
Permíteme aclararte que las herramientas que vamos a utilizar y los procedimientos en
sí, te servirán para cualquier versión de Photoshop del CS al CS3, así que no importa
que versión estés usando, y, en el caso que suceda, cuando un procedimiento varíe
de una versión a otra te lo haré saber.

Si ya tienes el Photoshop en tu equipo continuemos, sino descarga la
versión de prueba de la página de Adobe (antes de la descarga te
debes registrar):

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”).

Al iniciar tu pantalla debería verse algo así (en Photoshop CS3):

La interfaz de Photoshop es bastante intuitiva, no es necesario haber visto nunca
Photoshop para conocer alguna de sus herramientas, las básicas Selección / Mover,
Herramienta rectángulo, elipse, Texto, Zoom y una que otra conocida que, al igual que
en otros programas de diseño realizan la misma función.

10


Nos concentraremos en las herramientas que vamos a utilizar frecuentemente a la

hora de diseñar páginas web, siendo estas: la herramienta Mover en otros
programas de diseño esta herramienta se llama Selección y sirve para seleccionar un
objeto y moverlo hacia una nueva posición en el documento, aquí sirve para lo mismo
solo que en lugar de mover objetos mueve el contenido de una capa. Las capas las
veremos a continuación.

Otras herramientas que utilizaremos son las que se encuentran en la casilla de la
herramienta rectángulo para dibujar rectángulos, nosotros usaremos la
herramienta Rectángulo para aplicar mascaras para el Top, dentro de ella se
encuentran la herramienta elipse para dibujar formas elípticas o redondas si
presionamos shift mientras arrastramos en el documento, rectángulo de bordes
redondeados como su nombre lo indica inserta rectángulos con esquinas
redondeadas, lo podemos usar para el Menú o los espacios de Noticias, polígono
no lo vamos a usar, pero sirve para insertar estrellas o polígonos, línea para
dibujar líneas que podrían servir de separadores entre secciones dentro del contenido,
y por último formas básicas que contiene formas prediseñadas como Flechas,
llamados, estrellas de 8, 16, 32 puntas y otros.

Propiedades de las Herramientas

Cuando presionamos cualquier herramienta de la caja de Herramientas
(a la izquierda) la barra de propiedades (arriba) cambia entre
herramientas, esto es porque cada herramienta tiene distintas
propiedades, a través del Panel de Propiedades podemos cambiar las
propiedades de un Objeto como tipo, tamaño o color.

Selecciona cada una de las herramientas para que veas los cambios que
sufre el panel de propiedades.

Lo más importante es que el campo color está disponible en cada una de
las herramientas y esto es así porque de esta forma es que cambiamos
el color de un objeto dentro de Photoshop.

Para practicar el cambio de color y la selección de herramientas vamos a
dibujar una elipse, un círculo y un rectángulo dentro de nuestro
documento, la elipse debe ser de color rojo, el círculo azul y el rectángulo
verde.

11


Dibujo de formas dentro del documento y configuración de propiedades
de los objetos.

Para dibujar un rectángulo, selecciona
la herramienta rectángulo de la Caja
de Herramientas, y sigue los siguientes
pasos.
1. Haz clic con el botón izquierdo
del Mouse en cualquier lugar del
documento y no sueltes el
Mouse.
2. Arrastra el Mouse y suéltalo en
el lugar donde quieras que
termine de dibujarse el
rectángulo, procura que el
arrastre sea perpendicular, asi
verás más rápido los resultados.

Este mismo procedimiento sigue para
dibujar una elipse, solo que en lugar de
seleccionar Rectángulo selecciona
Elipse en la caja de herramientas.

Cuando sueltes el Mouse la forma se
rellenará con el color que tengas
seleccionado en el Campo Color del
Panel de Propiedades.

Haz clic en el cuadro color en la barra de propiedades, y te aparecerá una
ventana para que selecciones el nuevo color:

La pantalla grande a la izquierda te muestra
toda la gama del color que estes
seleccionando, la barra vertical que le sigue
a la derecha te permite cambiar entre un
color y otro, solo debes dar clic y desplazar
el cursor arriba y abajo.
A la derecha encontrarás un cuadro cuya
parte superior cambia a medida que cambias
el cursor de posicion, este es una vista
previa del color seleccionado.
Cuando tengas el color deseado haz clic en
“OK”.

12


Cambiar el color a través de las Capas

Las capas nos permiten trabajar con imágenes de
forma segura y mucho más versátil ya que nos dan
la oportunidad de separar componentes de
imágenes, así como hacer ajustes en ellas sin
afectar a todos los componentes y sin peligro de
estropear el resultado final.

El trabajo con capas reduce la posibilidad de
cometer errores involuntarios y, aplicar profundidad
mas eficientemente.

Si no tienes abierta la Ventana Capas presiona la
tecla “F7” o bien dirigete a “Windows/Layers”.

Aunque la forma de esta ventana cambió un poco, la
funcionalidad es siempre la misma y las opciones,
aunque mejoradas en la version CS3, siguen siendo
las mismas.

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.

Regresando a las capas, selecciona cualquier capa, luego selecciona la herramienta

mover de la caja de herramientas, haz clic en el documento y mueve el cursor
con el boton izquierdo del Mouse, verás como puedes cambiar la posicion de ese
objeto sin necesidad de dar clic encima de él, esa es la ventaja de las Capas, nos da
mas control sobre nuestra imagen y los objetos dentro de ella.

El ojo sirve para ocultar o visualizar el contenido de una
capa, el cuadro con color es la miniatura de la capa y el cuadro gris con la forma
blanca es la miniatura de la mascara vectorial, el texto Shape 3 lo podemos cambiar
dandole doble clic, de esta forma le damos o cambiamos el nombre a una capa.

13


Para cambiarle el color a un objeto deberemos darle clic a la miniatura de mascara
vectorial, a continuacion seleccionamos la herramienta con que dibujamos esa forma,
ejemplo, si es una elipse basta con seleccionar cualquiera de las herramientas que se
encuentra dentro de la caja de Herramienta Rectangulo, si es un texto deberemos
seleccionar la herramienta texto; a continuacion damos clic en el campo Color del
Panel de Propiedades y seleccionamos el color que deseemos.
(ver “Dibujo de formas dentro del documento y configuración de propiedades de los objetos”).

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.

Crear Mascaras dentro de Photoshop

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


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

duplican, mostrándose de la siguiente forma: , pues esto se debe a que
los botones grandes corresponden al Programa, mientras que los botones pequeños (y
casi no destacables) corresponden a la ventana del documento.

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


Nuestro documento pasa a tener el siguiente aspecto:

Asi se muestra nuestro documento Asi se ve la ventana Capas

La imagen que importamos al documento pasa a tener el nombre de Layer 1 y quedó
encima de Shape 1 que corresponde a la capa donde tenemos el rectángulo.

Ahora presiona el botón derecho del ratón encima de Layer 1 y selecciona la opción
“Create Clipping Mask”.

Luego de crear la máscara, la ventana
Capas debe tener el siguiente aspecto:

El procedimiento para crear mascaras es siempre el mismo, solo practica aplicar
mascaras con las otras dos formas del documento.

16


Procedimiento para crear mascaras:

1. Dibuja la forma de la mascara.
2. Ubica la imagen una capa superior de la forma de la mascara
3. Presiona el botón derecho del Mouse y selecciona Create Clipping Mask (Crear
mascara de rectorte)
4. Listo!

Para cambiar la posición de la foto dentro de la máscara, selecciona la
herramienta mover, haz clic en la capa que quieres mover y en el documento haz
clic y arrastra el objeto hasta que quede en la posición deseada.

Dibujando nuestra interfaz

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.

La interfaz de nuestra página web la conforman los botones, colores, textos y
cualquier elemento que ubiquemos visible y que permita que el usuario se
comunique con navegador (Internet Explorer, Firefox, Opera, etc) a través de
elementos (botones y textos) que ayudan a la navegación rápida a través del
sitio.

Recuerda que vamos a trabajar un documento de 1000px * 700 px, y que las
dimensiones que le daremos al documento las vimos anteriormente.

Si haz seguido las instrucciones, cuando termines de dibujar los elementos de la
pagina, tu documento debería tener el siguiente aspecto:

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


En el Top vamos a ubicar el logotipo de la empresa a la izquierda y una imagen de
Fondo, y con las herramientas rectángulo, línea, rectángulo de bordes redondeados
armamos la interfaz hasta que nos quede algo asi:

Ahora comienza lo bueno comienza, lo que sigue es hacer los sectores, para lo cual

usaremos la herramienta “Seleccionar Sector” o Slice
Select Tool .

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


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.

Con la herramienta recortar seleccionamos la parte superior en todo lo ancho,
pero de alto lo dejamos donde termina la guía, como se muestra en la foto de abajo.

A continuación Guardamos Como (File / Save As) y le damos un nombre, el nombre
debe hacernos referencia en el futuro de que se trata este archivo, asi que lo llamé
paginatop.psd (la extensión la da Photoshop por defecto).

19


Presiona Guardar o Save y ya tendrás guardada la primera parte de 4.

Por ningún motivo cierres el archivo, en estos momentos tu archivo es vulnerable y si
lo cierras corres el riesgo de haber perdido todo lo que hasta el momento haz
realizado, y deberás empezar desde el inicio, es decir, retroceder unas 15 páginas de
este documento.

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.

Repite la operación para el Menu, Contenido y Bottom, nombrando los archivos
distintos, hasta que tengas la siguiente estructura:

20


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


Aplicando sectores a cada archivo

A paginatop.psd lo único que haremos es dividirlo en sectores a fin de dividir así
también el peso total del archivo, dejando un sector completo para el logotipo y otro
sector completo para el Slogan.

Cuando seleccionas la herramienta
Seleccionar Sector de la caja de
herramientas, te aparecerá un cuadro gris
con el numero 1 en la parte superior
izquierda del documento, este es un
indicativo que estas en un sector vacío,
además verás en la barra de propiedades
que aparecen dos botones extraños
, estos botones
se utilizan para promover un sector a
Sector de Usuario y dividir el sector
actual en varios sectores de las mismas
dimensiones cada uno.
Presiona ”Promote”, ya que nosotros
vamos a definir manualmente las
dimensiones de cada sector. El cuadro
gris pasará a verse azul, esto significa
que es sector de usuario.

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.

Con la acción anterior redimensionamos el sector 1, y definimos un área menor para
él, ante esto aparece un sector 2 a la derecha, dirígete a la herramienta seleccionar
sector y haz clic en el sector 2, al activarse el botón “Promote”

haz clic en el y verás que el sector 2 ahora es de color azul,
igual que el sector 1.

22


Sigue el procedimiento anterior, solo que esta vez la selección debe abarcar
únicamente al Slogan.

Al final tu documento debe tener el siguiente aspecto:

Recuerda guardar para no perder los cambios

Realiza los mismos procedimientos a fin que al final tengan la siguiente apariencia

23


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


Guardando para Web

El siguiente paso, luego de tener los documentos
con sus respectivos sectores es pasarlos a html,
pero ¿como se hace esto?, Photoshop trae
integrada una opción en el Menu, llamada “Guardar
para Web / Save for Web and Devices (CS3)”

A continuación te aparece un cuadro de dialogo
como el de abajo, mediante el cual puedes
configurar el formato, calidad o cantidad de colores
de la imagen (solo las imágenes GIF trabajan con
cantidad de colores 0 -256), las imágenes PNG son
de 8 o 24 bits

A la izquierda tenemos la imagen original, a la derecha la imagen resultante. Esas son
las dos ventanas de Vista que tenemos, mas a la derecha tenemos el cuadro del
formato y tamaño.

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


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.

Además usando esta técnica puedes disminuir el peso de imágenes que
posteriormente serán utilizadas en un banner en flash, no obstante si ese es el fin te
recomiendo que la opción “progresive” se encuentre desactivada, ya que flash no
trabaja muy bien con imágenes progresivas.

Como apreciarás en la figura de arriba, he creado una carpeta “recortes”, en esta
carpeta es donde voy a guardar el archivo HTML que me genere Photoshop, dentro de
ella el programa creará otra carpeta llamada “images” y ahí copiará todas las
imágenes de los recortes. El nombre lo puedes dejar igual, ya que Photoshop le da al
archivo HTML el mismo nombre del archivo psd, Tipo: cerciórate que esté
seleccionada la opción “HTML e images”, de lo contrario no tendras el código HTML

26


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.

Realiza esta misma operación con los demás archivos, al final si
ves desde el explorador de Windows la estructura de la carpeta
recortes tiene la forma de la foto de la derecha:

Y la carpeta images se ve como la imagen de abajo:

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.

A continuación pasamos a ver el trabajo que deberemos realizar en Dreamweaver, ya
que tenemos nuestra interfaz, pero no estamos ni a la mitad del trabajo.

27


Diagramación del sitio en Dreamweaver

Dreamweaver, actualmente de la casa de Adobe, anteriormente perteneciente a
Macromedia, es la herramienta de diseño de páginas web más avanzada, tal como se
ha afirmado en muchos medios. Aunque sea un experto programador de HTML el
usuario que lo maneje, siempre encontrará en este programa razones para utilizarlo,
sobre todo en lo que a productividad se refiere.

Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y
soporta gran cantidad de tecnologías, además muy fáciles de usar:

• Hojas de estilo y capas
• Javascript para crear efectos e interactividades
• Inserción de archivos multimedia...
• Además es un programa que se puede actualizar con componentes, que
fabrica tanto Macromedia como otras compañías, para realizar otras acciones
más avanzadas.

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.

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


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

El sitio dinámico es aquel en el que la información que se le muestra al navegante
proviene de una Base de Datos, generalmente en MySql y las paginas están en
formato PHP, ASP, JSP.

Sitio Interactivo

Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si
presiona un botón el sitio completo hace algo, lo más común es que estos sitios
interactivos dependan de otra tecnología para agregar interactividad, Adobe Flash.

29


Definir Sitio Local en Dreamweaver
Cuando comenzamos un proyecto, un sitio web, debemos crearle un sitio en
Dreamweaver, esto nos ahorrará tiempo a la hora del desarrollo del sitio web.

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.

Al guardar un archivo dentro del sitio de Dreamweaver, es lo mismo que trabajarlo
desde el explorador de Windows, el eliminar un archivo desde el explorador de
Windows significa que también lo eliminamos del sitio de Dreamweaver y viceversa.

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.

Puedes crear o definir un sitio local desde la pantalla de inicio de Dreamweaver,
conocida como Pantalla de Bienvenida, la cual te muestra accesos directos, que se
encuentran disponibles desde la barra de Menús, a aplicaciones propias del programa,
tales como: Abrir documento reciente, abrir documento, crear tipo de archivo, crear
archivo usando plantillas, etc.

La pantalla de Bienvenida esta dividida en tres columnas principales, la columna de la
izquierda “Open Recent Item” te muestra una lista de los documento creados o
trabajados recientemente y la opción de abir como ultima de la lista para abrir un
archivo. “Create New” te muestra una lista de los formatos compatibles con

30


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.

Debajo encontrarás dos columnas, la de la izquierda “Getting Started” es el acceso al
Manual de ayuda del programa y la columna de la derecha muestra las actualizaciones
disponibles que tiene el Manual de ayuda, además lo utiliza Adobe para comunicar a
los usuarios acerca de novedades y nuevas versiones característica heredada de
Macromedia.

Al dar clic en en la pantalla de Bienvenida se nos desplegará la
siguiente pantalla:

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


Categoria > Local Info

En esta opción configuramos nuestro sitio local.

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.

Verifica que los Links sean relativos al documento

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


La ventana Files, si no la tienes abierta dirigete a Window / Files, debe estar como la
foto de abajo.

Si miras con atención, te darás cuenta que he
definido el sitio en el nivel inmediato superior de
la carpeta recortes, así lo debes tener tú.

Haz clic en el símbolo [+] de la carpeta recortes para desplegar el
contenido de la carpeta.

A partir de este punto empezamos a armar el rompecabezas que al final será nuestra
plantilla para nuestro sitio web.

Dreamweaver te permite ver el documento en 3 vistas
distintas CODE: para los codificadores que tienen dominio sobre el HTML, SPLIT
divide la ventana en dos partes, en la superior se muestra el código y en la inferior una
vista previa, DESIGN: nos permite trabajar sobre la pagina sin ver nada de código.

Nosotros trabajaremos con
SPLIT activado, esto nos
permitirá ir viendo en el código
los cambios que vayamos
realizando en la vista de
diseño, y además nos ubicará
más rápidamente dentro de
aquella sección específica de
código que necesitemos
reparar o modificar.

33


Dentro de la interfaz, y un elemento fundamental que siempre debes tener abierto y
accesible es el Panel de Propiedades, ya que desde este Panel se muestran (como en
Photoshop), las propiedades de las herramientas que estemos seleccionando.

Si no tenemos nada seleccionado, con el cursor en cualquier parte del documento, el
Panel de Propiedades tiene la apariencia de la foto de arriba. Desde aquí, como

mencioné anteriormente, podemos aplicar formato a un texto
siendo las opciones los Encabezados (Headers) del 1 al 6, entre mas pequeño el
numero mayor relevancia tendrá el texto, Font nos permite cambiar
el tipo de letra, Default Font se refiere a que la fuente que se mostrará es la fuente que
tenga el usuario predeterminado en su computadora, lo que ocasionará que tus textos
no se visualicen de la misma forma en todas las computadoras, para ello
Dreamweaver pode a nuestra disposición de Grupos de Fuentes, por ejemplo: cuando
seleccionamos el grupo “verdana, arial, tahoma” le estamos diciendo al navegador que
antes de presentar ese texto busque en la carpeta Fonts del sistema del usuario el tipo
de letra Verdana, si no lo encuentra que busque Arial, si no lo encuentra que busque
Tahoma, y que sucederá si no encuentra ninguna de las tres, entonces el navegador
mostrará la fuente que tenga esa computadora por defecto.

El estilo se refiere a las clases que hayamos definido en CSS,
para esta opción se requiere que el diseñador tenga conocimientos de CSS para poder
configurar un estilo y luego aplicarlo, además desde este Panel de propiedades
podemos aplicar Numeración , viñetas , Alineación al texto , Negrita
y Cursiva , Sangría , y enlaces

.

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).

Los enlaces los podemos hacer de 3 formas distintas:

1. Escribiendo el nombre de la pagina que queremos vincular dentro de la casilla

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


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).

Cuando el usuario visita www.solucionesseo.com debe haber una pagina
principal que se muestre al usuario, y a partir de esta, se mandan a llamar a
través de Links el resto de páginas. Esta página principal debe tener el
nombre de index y la extensión puede ser php, html, jsp,

35


Cuando presiones guardar te aparecerá una ventana emergente que preguntará si
quieres actualizar los links o no, Si entendimos el concepto de Links es cualquier texto,
imagen botón, que facilita la navegación del usuario a través del sitio, y no hemos
realizado ninguna operación en este archivo, asi que que serían los links?, en este
caso Dreaweaver se refiere a la ruta de las imágenes, recuerda que el sitio esta
configurado para que las imágenes sean con enlaces relativos al documento, dicho de
otra forma, al cambiar de posición el archivo, no hemos cambiado de posición las
imágenes, asi que las imágenes se quedan en el mismo lugar de origen, por lo que
hay que especificar la ruta o decirle al programa donde están las imágenes que se
presentarán en el documento.

Al aparecer esta alerta clic en SI

36


Ahora pasemos a las otras dos paginas, ya que el procedimiento no es el mismo
vamos a explicarlo a continuación.

Abre paginamenu.html y paginacontenido.html, ahora tienes 3 documentos abiertos y
puedes alternar entre ellos dándole clic a la pestaña que tiene el nombre del archivo
que quieres visualizar, comenzamos a trabajar con paginamenu.html

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


Ahora que ya no tienes ID asignado a esta tabla podemos cambiar las rutas en el
código, que es nuestro siguiente paso.

Al igual que un programa de edición de
texto Dreamweaver nos permite localizar
líneas o palabras de código de una forma
rápida y eficiente a través del Menu Edit /
Find and Replace (Buscar y Reemplazar),
que sirve como su nombre lo indica, para
localizar algo y reemplazarlo por otra
cosa.

En nuestro caso vamos a encontrar
“images/” y lo reemplazaremos por
“recortes/images/” (sin comillas), dentro
del código fuente en el documento actual.

El cambio de ruta lo realizamos porque recuerda que el archivo en el que lo
mostraremos ya no se encontrará dentro de esta carpeta recortes, también recuerda
que este archivo es el producto de los recortes que realizaste en Photoshop con la
Herramienta Seleccionar Sector y luego de haber Guardado para web.

Find in: presenta un cuadro con múltiples opciones,
• Selected Text para buscar únicamente en el texto
seleccionado,
• Current Document: para delimitar la búsqueda al
documento que estamos editando.
• Open Documents: Busca el término en cuestión en

38


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.

Cuando realices búsquedas en documentos cerrados,
ten en cuenta que esta opción no se puede deshacer.

Search: Aquí defines el lugar en el que será buscado el
término. Al darle clic desplega otro grupo de opciones.
• Source Code: Para realizar las búsquedas en el
Codigo Fuente
• Text: Para realizar la búsqueda únicamente en el
texto (no afecta el código)
• Text (Advanced): Permite buscar dentro de etiquetas
específicas y si adentramos un poco más en esta
herramienta, también nos permite buscar dentro de
sus atributos.
• Specific Tag: Permite realizar búsquedas dentro de
etiquetas con atributos específicos y cambiar sus
valores desde esta ventana. Requiere conocimientos
de HTML para identificar las etiquetas (TAGS).

Luego de haber presionado el botón “Replace All” la pantalla se mostrará
algo extraña con elementos que no habías visto inicialmente.

1. En el Panel de Propiedades aparece un Botón extraño
2. Se ha abierto una ventana con un montón de código en un formato medio raro

, esta ventana solo te informa de los
cambios que la operación Find and Replace acaba de realizar.

Si presionas Boton derecho del mouse sobre cualquier
de las pestañas de este nuevo Panel, se desplegará un menú emergente del
cual seleccionando “Close Panel Group” este panel se cerrará.

39


Si presionas el botón Refresh, verás que en la pantalla de diseño las imágenes no se
encuentran, este error significa que todo está bien, ya que la ruta de las imágenes han
cambiado y se visualizarán cuando peguemos el código en el index.html

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.

Como se muestra en la foto de arriba la tabla mide 262 de ancho.

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


insertar tabla de la pestaña común. Al presionar insertar tabla,
aparece el cuadro de dialogo que deberás dejar como se muestra en la foto de abajo.

En este punto ya debes estar dentro de index.html

Al presionar el Botón OK, aparece la tabla dibujada en nuestro documento, ubicamos
el cursor dentro de la columna izquierda y pegamos el contenido del portapapeles
(CTRL+V).

41


Al pegar el contenido dentro de la columna izquierda, aparece el siguiente cuadro;

Dreamweaver solo nos está alertando que esas imágenes no tienen comentarios,
presiona “cancel”.

Ahora toda tu pantalla deberá verse asi:

42


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.

Dos cosas vamos a realizar en la columna izquierda antes de continuar:

1. Haz clic en la columna izquierda y en el panel de propiedades asigna

TOP a Vert en el panel de propiedades. Lo
que acabas de hacer es asignar alineación vertical al contenido de esa
columna, esto nos va a garantizar que el contenido siempre se encuentre en la
parte superior de esta columna (es lo común).
2. A la par de Vert. (vertical align), están dos campos señalados con dos letras

“W” que corresponde al ancho; y “H” que corresponde al alto ; en el
espacio de W escribiremos 262 y presionamos ENTER.

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


3. Copiamos en la ventana de diseño la tabla.

Importante:

Antes de pegar el contenido dentro de index.html, cambia los valores de
vert en el panel de propiedades a top.

4. La pegamos en la columna derecha de index.html

44


Ahora solo nos falta paginabottom.html, repite los pasos anteriormente descritos.

Al finalizar tu documento deberá tener el siguiente aspecto:

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


En el espacio vacío que tienes en Menú inserta una tabla del 100% de ancho y 1 sola
columna por 1 sola fila.

Antes de insertar contenido alguno en el
menú y en contenido debemos alinear
verticalmente TOP las celdas que
tenemos vacías actualmente. Esto para
garantizar la integridad de nuestro
diseño.

46


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.

Si el vinculo es a una página dentro de tu sitio local solo debes escribir el
nombre del archivo seguido de la extensión html (miarchivo.html), si lo que
deseas es apuntar a otro dominio de internet debes agregar el protocolo ej:
http://www.solucionesseo.com y si vas a agregar un vinculo a correo electrónico
deberás agregar mailto: seguido de la dirección de correo electrónico ej:
mailto:war@solucionesseo.com.

Cierra todos los documentos a excepción de index.html, cuando Dreamweaver te
pregunte si quieres guardar los cambios presiona NO. A continuación guarda el
index.html.

47


Crear Plantillas a partir de un documento elaborado
Hasta aquí ya tenemos nuestro sitio web armado, al menos la estructura, solo nos falta
la información, pero para efectos de una actualización mas rápida nos conviene
convertir este archivo en plantilla.

Es proceso es rápido y fácil y lo único que vamos a configurar es la región editable, es
decir la única parte de todo el sitio que estará cambiando frecuentemente, esta parte
cambiante es el contenido, es decir la columna derecha.

Para crear un documento nuevo en plantilla seguiremos los pasos:

1. Ir al Menu Archivo / Guardar como Plantilla (File / Save as template)
a. Dreamweaver crea una carpeta dentro del directorio raíz llamada
Templates y dentro de esta carpeta crea el archivo con la extensión
.dwt.
i. No es necesario subir esta carpeta al servidor ya que por su
formato requiere de Dreamweaver. No la borres
2. Debemos darle un nombre a esta plantilla y definir para que sitio funcionará.
Dreamweaver te muestra un listado con todos los sitios disponibles, pero por
defecto te muestra como primera opción el sitio que tienes abierto y esta es la
opción que usaremos, puedes dejar todos los campos como se ven en la figura
de abajo, cuando estes listo presiona “save”.

A la pregunta Update Links?, responde SI.

48


La ventana Files ha cambiado, una vista
rápida nos demuestra que Dreamweaver
ya guardó la plantilla dentro de
Templates.

Podríamos cerrar el documento pero no
hemos ingresado aun ninguna región
editable, es decir, toda la pagina está
bloqueda.

Insertando Región Editable

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.

Para insertar una región editable:

1. Seleccionamos el area que vamos a definir como región editable
2. Nos dirigimos al Menu Insertar / Objetos de Plantilla / Region Editable

49


3. Le damos un Nombre a la región editable

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.

Guarda el archivo y ciérralo, no lo volverás a usar a menos que vayas a realizar
cambios en el Menú o agregar fotos en las regiones No editables.

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ú.

Para un sitio de 10 o 15 páginas, cambiar los vínculos se puede realizar de forma
manual, pero con el tiempo este sitio se va a ir haciendo más grande y si el dueño del
sitio desea agregar un par de vínculos en el Menú cuando su sitio tenga 60 páginas, le
vamos a dar gracias a Dios de tener la plantilla lista. Ya que cuando hacemos cambios
en la plantilla en las regiones No editables estos cambios afectarán a TODO EL SITIO,
siempre que esos documentos estén afectados por la plantilla.

50


Creando nuevos documentos a partir de nuestra plantilla

1. Selecicona Menu Modificar / Plantillas / Aplicar Plantilla a pagina (Modify /
Templates / Apply Template to Page…)

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.

3. Presiona para seleccionar o para cancelar.

51


El documento se ve exactamente igual al que teníamos, pero si te das una asomadita
por el código verás que está en gris y si pasas el Mouse encima del Menú observaras
que no lo puedes tocar, esto es porque esta bloqueado.

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.

Subir sitios via FTP al servidor
Para esto necesitamos un cliente FTP, te recomiendo Filezilla, es gratuito y fácil de
usar.

Para conectarte a tu servidor necesitas que el administrador de servidor te de acceso
a una cuenta FTP con un usuario y un password, solicítaselo.

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.

El resto de datos se los solicitas a tu Proveedor de Hosting o al administrador de
servidor.

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.

Distribuye este libro gratuito, solo recuerda mencionar la procedencia.

52

Libro diseno

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Libro diseno

Ähnlich wie Libro diseno (20)

Mehr von New Generation Marketing

Mehr von New Generation Marketing (18)

Libro diseno