Creando un  sitio web con  Photoshop y  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  montaje y subida al servidor. 

Walter  Alvarez
Septiembre,  2008 

Diseño Web || Walter Alvarez: www.solucionesseo.com

        Creando un sitio Web con  Photoshop y Dreamweaver 

Por : Walter Alvarez

Septiembre, 2008


 

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.


 

Diseño Web || Walter Alvarez: www.solucionesseo.com

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.


 

Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]   

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


 

pregúntale al joven o la joven diseñadora de la Imprenta en la que sacas tus documentos. probablemente te responda “no importa”. Creación de un documento nuevo de Photoshop Si presionamos la pestaña Custom. Ahora que entendemos un poco mejor lo relacionado a la resolución. 6    . Legal y Tabloide y así sucesivamente para cada opción que se lecciones de Presets.com Imprenta y se hace así para que la imagen impresa tenga la mayor cantidad de información de colores posible y pierda menos calidad. 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. no porque no se pueda.S. U. cuadro 1. Paper = tamaño carta. sino porque Puntos por Pulgada es el estándar. 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. Default Photoshop Size = es 454 * 340 pixeles. Sino haz la prueba. si le mandas la resolución en pixeles por pulgada o pixeles por centímetro. puedo decirte que la resolución se mide en dpi o ppp (dpi= dots per inch . ppp = puntos por pulgada).Diseño Web || Walter Alvarez: www.solucionesseo. se nos desplegaran las opciones de tamaño de documento que Photoshop tiene preestablecidas. por su parte las casillas de width (ancho) y height (alto) cambian respectivamente al realizar el cambio. Raramente veremos la resolución expresada en pixeles / centímetro.

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. pixels (pixeles). dentro de las cuales las más usadas son cm (centímetros). ¿Cual usaremos nosotros?. las secciones que utilizaremos (botones. la imagen de la sección. Es el encabezado de nuestro sitio web y ubicaremos en el logotipo de la empresa. la estructura de una página web es siempre la misma. Elementos de la Interfaz de nuestra página web En esta sección definiremos los elementos a utilizar. slogan de la empresa y si el diseño lo amerita. veamos cada elemento por separado: 1. colores. 7    . Cuando hayamos configurado nuestro documento presionamos “OK”. 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. mm (milímetros). inches (pulgadas). el cual es nuestro documento con las dimensiones que hayamos definido anteriormente. pixeles. encabezados. seguido nos aparecerá un documento en blanco. ni el tamaño del documento que utilices. Te recomiendo pixeles/pulgada (anteriormente expliqué la razón). fuentes. TOP a. 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. etc).

Tel: 555-555555. tampoco cuanto se paga de energía eléctrica. así que lo que conviene es que cada opción tenga como nombre la sección que será visitada. Al usuario probablemente no le interese cuantos empleados hay. o sus servicios si es una empresa de servicios. b. i. Toma en cuenta que las opciones del menú deben estar disponibles en todas las páginas de nuestro sitio web. Contenido a. posiblemente una breve reseña. la función del Menú es siempre la misma. Una página web de éxito muestra al navegante sus productos como primera instancia. fax : 555-555555. En esta parte se muestra la información de la pagina individual.Diseño Web || Walter Alvarez: www.com Todos los derechos reservados. pero no importa como lo llamemos. c. además valores y cualquier otra información que se considere de valor.solucionesseo. Le llamamos menú al conjunto de opciones o secciones de nuestro sitio web. la diferencia es que es a nivel Mundial. a la vuelta del final del desarrollo del sitio web toda la información útil va a estar online. es decir.com 2. 3. Menú a. Que no se te olviden los créditos con un enlace hacia tu sitio web. etc” y además los créditos. Una página web es como una presentación en Power Point de tu empresa. 4. 8    . los Mensajes de Bienvenida no resultan muy útiles a la hora de construir paginas cuyo propósito es vender. etc. o cuantas cartas se reciben por aire o cuantas cartas se reciben por tierra. ii. debes ser capaz de seleccionar el contenido y publicar únicamente lo que es útil para el visitante. misión y visión. y como en una presentación no lo puedes poner todo. “Acerca de la Empresa” llevará al visitante a una página en la que se encuentre información de la Empresa. ofrecerle al visitante la posibilidad de navegar a través de nuestro sitio web. Generalmente mostraremos aquí información de contacto de la empresa: “Empresa. Hay que realizar una selección exhaustiva de la información a publicar. iii. b. Footer / Pie de pagina a. ni cuanto se gasta mensualmente en las compras del supermercado. algunos prefieren llamarlo como “links internos”. en el caso de la portada no caigamos en el error de mostrar un texto de bienvenida. 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. Una correcta selección de información le será muy útil a la empresa.

Alto = Proporcional al contenido i. ahora pasemos al diseño en Photoshop. Puedes variar el alto entre 150px y 200px. 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í. si ya has usado el programa se te hará más fácil la comprensión. te recomiendo que leas la ayuda del Programa. No 9    . ya que el ancho debe haber espacio suficiente para escribir las opciones del menú. 2. 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. te servirá de mucho. 3. Contenido Ancho = 750px Alto = Proporcional al contenido i. dependerá de la cantidad de información mostrada en la página web. 200px en ocasiones es suficiente. sin embargo un numero un poco mayo nunca es malo. ii. ya conocemos lo básico. recuerda que son solamente opciones las que mostrarás. El espacio debe ser suficiente para escribir dos palabras moderadas. ya que va a ser el usuario el que determine. Puedes comenzar (solo para darle un alto cualquiera). Si nunca has usado Photoshop. TOP Ancho = 1000 px Alto = 200px i. 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. 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.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Dimensiones de los elementos de la Interfaz de nuestra página web 1. ii. la altura de este cajón. Es preferible dejar el ancho calculando el 20% del espacio total. Aquí es el ancho el que nos preocupa. Dependerá del alto del logotipo y lo que desees mostrar en este espacio. Menú Ancho = 200 px – 250 px i. haz las pruebas. La altura aquí no es tan importante. El alto del cajón Contenido. con la cantidad de opciones que tenga. 200px de alto.

Si ya tienes el Photoshop en tu equipo continuemos. las básicas Selección / Mover.Diseño Web || Walter Alvarez: www. elipse. al igual que en otros programas de diseño realizan la misma función. no es necesario haber visto nunca Photoshop para conocer alguna de sus herramientas. Diseñando con Photoshop Permíteme aclararte que las herramientas que vamos a utilizar y los procedimientos en sí.com obstante trataré de explicar los procedimientos y las herramientas lo mejor y más comprensible posible. en el caso que suceda. así que no importa que versión estés usando. cuando un procedimiento varíe de una versión a otra te lo haré saber. Texto. 10    . Herramienta rectángulo. te servirán para cualquier versión de Photoshop del CS al CS3. 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. Zoom y una que otra conocida que. Al iniciar tu pantalla debería verse algo así (en Photoshop CS3): La interfaz de Photoshop es bastante intuitiva. y.cfm?product=photoshop Una vez abierto el programa crea un documento nuevo (ver el acápite “dimensiones y resolución”).solucionesseo.

aquí sirve para lo mismo solo que en lugar de mover objetos mueve el contenido de una capa. nosotros usaremos la herramienta Rectángulo para aplicar mascaras para el Top. 11    . 16. la elipse debe ser de color rojo. línea para dibujar líneas que podrían servir de separadores entre secciones dentro del contenido. 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. 32 puntas y otros. lo podemos usar para el Menú o los espacios de Noticias. rectángulo de bordes redondeados como su nombre lo indica inserta rectángulos con esquinas redondeadas. un círculo y un rectángulo dentro de nuestro documento. y por último formas básicas que contiene formas prediseñadas como Flechas. Selecciona cada una de las herramientas para que veas los cambios que sufre el panel de propiedades. Propiedades de las Herramientas Cuando presionamos cualquier herramienta de la caja de Herramientas (a la izquierda) la barra de propiedades (arriba) cambia entre herramientas. 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.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Nos concentraremos en las herramientas que vamos a utilizar frecuentemente a la hora de diseñar páginas web. pero sirve para insertar estrellas o polígonos. tamaño o color. Otras herramientas que utilizaremos son las que se encuentran en la casilla de la herramienta rectángulo para dibujar rectángulos. polígono no lo vamos a usar. esto es porque cada herramienta tiene distintas propiedades. a través del Panel de Propiedades podemos cambiar las propiedades de un Objeto como tipo. llamados. dentro de ella se encuentran la herramienta elipse para dibujar formas elípticas o redondas si presionamos shift mientras arrastramos en el documento. Para practicar el cambio de color y la selección de herramientas vamos a dibujar una elipse. Las capas las veremos a continuación. el círculo azul y el rectángulo verde. estrellas de 8.

2. Cuando tengas el color deseado haz clic en “OK”. Haz clic con el botón izquierdo del Mouse en cualquier lugar del documento y no sueltes el Mouse. Este mismo procedimiento sigue para dibujar una elipse. A la derecha encontrarás un cuadro cuya parte superior cambia a medida que cambias el cursor de posicion. Haz clic en el cuadro color en la barra de propiedades.Diseño Web || Walter Alvarez: www. 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.com 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. Cuando sueltes el Mouse la forma se rellenará con el color que tengas seleccionado en el Campo Color del Panel de Propiedades. procura que el arrastre sea perpendicular. este es una vista previa del color seleccionado. 12    . asi verás más rápido los resultados. la barra vertical que le sigue a la derecha te permite cambiar entre un color y otro. Arrastra el Mouse y suéltalo en el lugar donde quieras que termine de dibujarse el rectángulo. solo debes dar clic y desplazar el cursor arriba y abajo. y sigue los siguientes pasos.solucionesseo. solo que en lugar de seleccionar Rectángulo selecciona Elipse en la caja de herramientas. 1.

El ojo sirve para ocultar o visualizar el contenido de una capa. la funcionalidad es siempre la misma y las opciones. luego selecciona la herramienta mover de la caja de herramientas. tenemos 4 Capas. selecciona cualquier capa. Shape 2. es decir una capa utilizable. nos da mas control sobre nuestra imagen y los objetos dentro de ella.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    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. ya que basta con darle doble clic y Aceptar y el background pasa de ser background para convertirse en “Layer 0”. Si no tienes abierta la Ventana Capas presiona la tecla “F7” o bien dirigete a “Windows/Layers”. de esta forma le damos o cambiamos el nombre a una capa. en el caso que se muestra en la foto superior. 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. siguen siendo las mismas. Aunque la forma de esta ventana cambió un poco. Cada objeto que dibujemos dentro de nuestro documento ocupará una capa nueva. haz clic en el documento y mueve el cursor con el boton izquierdo del Mouse. 13    . 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. las cuales son Shape 1. esa es la ventaja de las Capas. El trabajo con capas reduce la posibilidad de cometer errores involuntarios y. aplicar profundidad mas eficientemente. Regresando a las capas. El background aunque está bloqueado y no lo podemos mover ni editar no significa que no podamos convertirlo y usarlo como capa. el texto Shape 3 lo podemos cambiar dandole doble clic. aunque mejoradas en la version CS3. Es necesario saber esto?. Shape 3 y el Background. así como hacer ajustes en ellas sin afectar a todos los componentes y sin peligro de estropear el resultado final. verás como puedes cambiar la posicion de ese objeto sin necesidad de dar clic encima de él. mmm… Si. 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.

sino la ventana del documento. Para abrir una foto del disco duro vamos al Menu File/Open y buscamos la imagen dentro del disco duro. a continuacion seleccionamos la herramienta con que dibujamos esa forma. a continuación la imagen se abre en una nueva ventana. si es una elipse basta con seleccionar cualquiera de las herramientas que se encuentra dentro de la caja de Herramienta Rectangulo. pero no es asi. estamos usando Windows cuyo significado en español es Ventanas. 14    . como se muestra en la foto inferior: Una vez ubicada la foto que queremos. dejando nuestro documento aparentemente cerrado. tal como lo haces con cualquier otro programa cuando abres un archivo.solucionesseo. ejemplo. le damos OK. 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. 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. Crear Mascaras dentro de Photoshop Para las mascaras vamos a utilizar el mismo documento en el que tenemos las formas de arriba. (ver “Dibujo de formas dentro del documento y configuración de propiedades de los objetos”).Diseño Web || Walter Alvarez: www.com Para cambiarle el color a un objeto deberemos darle clic a la miniatura de mascara vectorial. y un par de fotos de Windows. 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.

15    . Para pasar la imagen al documento de las formas (porque ahí lo necesitamos). mientras que los botones pequeños (y casi no destacables) corresponden a la ventana del documento.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. como se muestra en la foto siguiente. 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. Así que manos a la obra. Restaurar y Cerrar se duplican. mostrándose de la siguiente forma: . pues esto se debe a que los botones grandes corresponden al Programa. basta con arrastrar la imagen al documento (con la herramienta Mover Seleccionada.

Diseño Web || Walter Alvarez: www. 16    .solucionesseo.com 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. solo practica aplicar mascaras con las otras dos formas del documento. Luego de crear la máscara. Ahora presiona el botón derecho del ratón encima de Layer 1 y selecciona la opción “Create Clipping Mask”. la ventana Capas debe tener el siguiente aspecto: El procedimiento para crear mascaras es siempre el mismo.

Recuerda que vamos a trabajar un documento de 1000px * 700 px. colores. nos ayudará a crear elementos sencillos pero agradables. 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. textos y cualquier elemento que ubiquemos visible y que permita que el usuario se comunique con navegador (Internet Explorer. Firefox.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Procedimiento para crear mascaras: 1. Dibuja la forma de la mascara. lo importante hasta aquí es que distingas las herramientas que he utilizado. y que las dimensiones que le daremos al documento las vimos anteriormente. 2. Si haz seguido las instrucciones. La interfaz de nuestra página web la conforman los botones. 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. selecciona la herramienta mover. cuando termines de dibujar los elementos de la pagina. Los colores los vamos a cambiar más adelante. Ubica la imagen una capa superior de la forma de la mascara 3. Listo! Para cambiar la posición de la foto dentro de la máscara. 17    . Opera. Presiona el botón derecho del Mouse y selecciona Create Clipping Mask (Crear mascara de rectorte) 4. tu documento debería tener el siguiente aspecto: No te preocupes por los colores. etc) a través de elementos (botones y textos) que ayudan a la navegación rápida a través del sitio.

para lo cual usaremos la herramienta “Seleccionar Sector” Select Tool . 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 . o Slice Esta herramienta divide nuestro diseño en sectores. como lo veremos mas adelante. 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    . esto lo vamos a utilizar dentro del Código de Dreamweaver. lo que sigue es hacer los sectores. Sin embargo aquí vamos a hacer un alto. ya que antes de pasar a hacer los sectores. línea.solucionesseo.com En el Top vamos a ubicar el logotipo de la empresa a la izquierda y una imagen de Fondo. Ten en cuenta que Photoshop crea una carpeta llamada “images”.html (el cual veremos mas adelante). vamos a “partir” nuestro archivo en 4 partes con la ayuda de la herramienta recortar (Crop Tool). rectángulo de bordes redondeados armamos la interfaz hasta que nos quede algo asi: Ahora comienza lo bueno comienza. y con las herramientas rectángulo.Diseño Web || Walter Alvarez: www.

como se muestra en la foto de abajo.psd (la extensión la da Photoshop por defecto). ya que nos van a ser muy útiles en esta parte. vamos a apoyarnos en las guías. yo la llamé paginalibrodisenio. A continuación Guardamos Como (File / Save As) y le damos un nombre. Trazamos las guias en las areas blancas que dejamos. lo hacemos así. 19    . en este punto ya deberías haber guardado tu pagina. ya que en esos lugares exactos vamos a aplicar los recortes. asi que lo llamé paginatop. el nombre debe hacernos referencia en el futuro de que se trata este archivo.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Recortando nuestro documento Para hacer los recortes.psd. Con la herramienta recortar seleccionamos la parte superior en todo lo ancho. pero de alto lo dejamos donde termina la guía.

Contenido y Bottom. Asi que cuando regresas al documento lo que debes hacer es presionar la siguiente combinación de teclas “CTRL+ALT+Z” (sin las comillas). es decir. Repite la operación para el Menu.com Presiona Guardar o Save y ya tendrás guardada la primera parte de 4.solucionesseo. nombrando los archivos distintos. 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. pero tampoco vayas a guardar porque reemplazarías el primer pedazo del documento. el archivo que acabas de guardar está a salvo. y deberás empezar desde el inicio.Diseño Web || Walter Alvarez: www. retroceder unas 15 páginas de este documento. Esta combinación es para deshacer. Por ningún motivo cierres el archivo. hasta que tengas la siguiente estructura: 20    . no desesperes.

para lo cual abriremos todos los archivos de uno en uno. al final de este ejercicio deberas tener 4 páginas cuya vista deberá ser como las siguientes: Paginatop Paginamenu Paginacontenido pabinabottom 21    . empezando por “paginatop.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Con todos los archivos psd creados solo falta crear los sectores.psd”.

dejando un sector completo para el logotipo y otro sector completo para el Slogan. y definimos un área menor para él. dirígete a la herramienta seleccionar sector y haz clic en el sector 2.solucionesseo. 22    . 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.com Aplicando sectores a cada archivo A paginatop. al activarse el botón “Promote” haz clic en el y verás que el sector 2 ahora es de color azul. esto significa que es sector de usuario. ya que nosotros vamos a definir manualmente las dimensiones de cada sector.psd lo único que haremos es dividirlo en sectores a fin de dividir así también el peso total del archivo. ante esto aparece un sector 2 a la derecha. igual que el sector 1. Presiona ”Promote”. Con la acción anterior redimensionamos el sector 1. te aparecerá un cuadro gris con el numero 1 en la parte superior izquierda del documento. estos cuadritos se llaman Manejadores y sirven para redimensionar.Diseño Web || Walter Alvarez: www. Cuando seleccionas la herramienta Seleccionar Sector de la caja de herramientas. Arrastramos el manejador derecho del centro hacia el centro hasta que la línea punteada quede en un espacio que abarque únicamente al logotipo. 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 . Una vez convertido en sector de usuario aparecen unos cuadritos (señalados en los círculos rojos). El cuadro gris pasará a verse azul.

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    .Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Sigue el procedimiento anterior.

esto nos evitará futuros dolores de cabeza.Diseño Web || Walter Alvarez: www.com Nota: Cuando hagas divisiones en sectores que tienen esquinas redondeadas. procura que la curva de la esquina quede en un solo sector.solucionesseo. 24    .

Te recomiendo que dejes. lo cual es bastante aceptable. a la derecha la imagen resultante. la calidad la configuramos debajo del formato Very Hight nos da un 80% de calidad. luego de tener los documentos con sus respectivos sectores es pasarlos a html. siendo los permitidos PNG. JPEG.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Guardando para Web El siguiente paso. Photoshop trae integrada una opción en el Menu. los cambios que realices no se aplican a toda la imagen sino al sector que tengas seleccionado en ese momento. mediante el cual puedes configurar el formato. 25    . Si das clic en JPEG veras que lo puedes guardar en otro formato. 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). Esas son las dos ventanas de Vista que tenemos. puedes cambiar los valores que ver los cambios. las imágenes PNG son de 8 o 24 bits A la izquierda tenemos la imagen original. llamada “Guardar para Web / Save for Web and Devices (CS3)” A continuación te aparece un cuadro de dialogo como el de abajo. para efectos de este documento el formato en JPEG. asi que si deseas cambiarle el formato a la imagen deberás hacerlo de sector en sector. GIF. pero ¿como se hace esto?. calidad o cantidad de colores de la imagen (solo las imágenes GIF trabajan con cantidad de colores 0 -256). mas a la derecha tenemos el cuadro del formato y tamaño.

Tipo: cerciórate que esté seleccionada la opción “HTML e images”. sino también para disminuir el tamaño de una foto sin alterar la calidad de la misma. ya que Photoshop le da al archivo HTML el mismo nombre del archivo psd. de lo contrario no tendras el código HTML 26    .solucionesseo. 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. Como apreciarás en la figura de arriba. ya que flash no trabaja muy bien con imágenes progresivas. he creado una carpeta “recortes”. no obstante si ese es el fin te recomiendo que la opción “progresive” se encuentre desactivada.Diseño Web || Walter Alvarez: www. en esta carpeta es donde voy a guardar el archivo HTML que me genere Photoshop.com Esta técnica te sirve no solo para guardar paginas con sectores como HTML. Además usando esta técnica puedes disminuir el peso de imágenes que posteriormente serán utilizadas en un banner en flash.

Cualquier comentario que ayude a enriquecer este trabajo porfavor hazlo escribiendo a war@solucionesseo. Te recomiendo practicar unas dos o tres veces este ejercicio a fin de que domines la técnica. o bien porque vas a diseñar un banner para la pagina web o cualquier otra cosa. si lo abrimos nuevamente será para realizar algún cambio en los títulos. A continuación pasamos a ver el trabajo que deberemos realizar en Dreamweaver. asi Phosothop va a guardar todos los sectores que creamos con la herramienta Seleccionar Sector.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    que tanta falta nos hará luego.com. 27    . Slices: “All Slices” / “Todos los sectores”. 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. pero no estamos ni a la mitad del trabajo. ya que tenemos nuestra interfaz.

haciendo posible que alguien que no entiende el lenguaje HTML pueda crear páginas y sitios web fácilmente. contabilidad. división de personal. servicio o la empresa. actualmente de la casa de Adobe. tal como se ha afirmado en muchos medios. si entras a diseño grafrico veras los precios de los productos impresos y una galería de trabajos realizados. otra de diseño web.. 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.Diseño Web || Walter Alvarez: www. cada una cumple una función dentro de la empresa. División de Tecnologías Web y Multimedia. Dreamweaver oculta el código HTML de cara al usuario. y soporta gran cantidad de tecnologías.. Además es un programa que se puede actualizar con componentes. que fabrica tanto Macromedia como otras compañías. pero el usuario está navegando en el sitio web. por ejemplo: Soluciones SEO. sin embargo en el sitio web se desglosan sus servicios o se muestras sus productos en paginas individuales.com verás que hay una sección de diseño grafico. Como editor WYSIWYG que es (What You See Is What You Get). Cada una de estas estructuras cumple una función determinada e importante dentro de la empresa. al visitar www. puedo decir que es la empresa como tal.com Diagramación del sitio en Dreamweaver Dreamweaver. etc. lo mismo en diseño web solo que en diseño web se muestran los trabajos de sitios web diseñados. Sitio Web Siguiendo el ejemplo anterior.solucionesseo. otra Quienes somos. anteriormente perteneciente a Macromedia. sobre todo en lo que a productividad se refiere. es la herramienta de diseño de páginas web más avanzada. diseño. para realizar otras acciones más avanzadas. División de Personal y Contabilidad. Aunque sea un experto programador de HTML el usuario que lo maneje. siempre encontrará en este programa razones para utilizarlo.solucionesseo. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional. es decir. además muy fáciles de usar: • • • • Hojas de estilo y capas Javascript para crear efectos e interactividades Inserción de archivos multimedia. 28    . cuenta con una División de Computadoras. 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. etc.

es decir. Sitio Interactivo Es aquel sitio que su funcionalidad depende de acciones del usuario. etc. ASP.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Sitio Local Una vez definido el trabajo a realizar. paginas html. lo más común es que estos sitios interactivos dependan de otra tecnología para agregar interactividad. la copia en el disco duro del sitio web en internet. todo lo guardas en una carpeta. generalmente en MySql y las paginas están en formato PHP. pondrás el nombre del cliente y dentro de ella toda la información. si eres ordenado. 29    . imágenes. Este es el sitio local. es decir solo usa tecnología HTML. la cual. CSS y JavaScript. Adobe Flash. 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. JSP. Sitio estático Se le llama sitio estático al sitio web que no interactúa con una Base de Datos. si presiona un botón el sitio completo hace algo. es decir.

es lo mismo que trabajarlo desde el explorador de Windows. 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. Cada vez que usamos Word. 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.Diseño Web || Walter Alvarez: www. 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. Puedes crear o definir un sitio local desde la pantalla de inicio de Dreamweaver. que no es más que decirle a Dreamweaver en que carpeta se encuentran los datos de nuestro sitio web y a la vez. los archivos por defecto se guardan en la carpeta Mis Documentos. Al guardar un archivo dentro del sitio de Dreamweaver. conocida como Pantalla de Bienvenida. la cual te muestra accesos directos. tales como: Abrir documento reciente. “Create New” te muestra una lista de los formatos compatibles con 30    . un sitio web.solucionesseo.com Definir Sitio Local en Dreamweaver Cuando comenzamos un proyecto. que se encuentran disponibles desde la barra de Menús. abrir documento. a aplicaciones propias del programa. crear tipo de archivo. debemos crearle un sitio en Dreamweaver. La pantalla de Bienvenida esta dividida en tres columnas principales. etc. que cada vez que guarde el archivo este sea guardado en esa ubicación y no en otra. crear archivo usando plantillas. esto nos ahorrará tiempo a la hora del desarrollo del sitio web.

Al dar clic en siguiente pantalla: en la pantalla de Bienvenida se nos desplegará la En la pantalla de definición del sitio se nos muestran 2 pestañas Básico y Avanzado. a continuación detallo las opciones de la pestaña Advanced. es más rápido en la pestaña Avanzado. 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. aunque lo recomendable es que vayas paso a paso.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Dreamweaver. 31    . nosotros utilizaremos HTML. además lo utiliza Adobe para comunicar a los usuarios acerca de novedades y nuevas versiones característica heredada de Macromedia. 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. “Create from Samples” es un conjunto de plantillas prediseñadas que te ayudarán en tu proceso de aprendizaje del programa. lo que nos permitirá la definición del sitio mas rápidamente. así que clic en Advanced: La pantalla que sigue presenta las mismas opciones que la pestaña Basic solo que mas accesible.

espacios en blanco. con esa configuración básica ya hemos definido nuestro sitio web.Diseño Web || Walter Alvarez: www. “ñ”.com Categoria > Local Info En esta opción configuramos nuestro sitio local. yo usaré “sitio del libro”. 32    . 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. aquí puedes usar caracteres acentuados. Default images folder: para definir la carpeta por defecto de las imágenes que usaremos en nuestro sitio web. Site name: Dale un nombre al sitio. Verifica que los Links sean relativos al documento El resto de opciones las dejas como están por defecto ahora presiona Eso es todo.solucionesseo. ya que es solo una ayuda visual que mas adelante te ayudará a identificar el sitio de otros que tengas definidos dentro de Dreamweaver.

SPLIT divide la ventana en dos partes. 33    . Haz clic en el símbolo [+] de la carpeta recortes contenido de la carpeta. DESIGN: nos permite trabajar sobre la pagina sin ver nada de código. en la superior se muestra el código y en la inferior una vista previa.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    La ventana Files. debe estar como la foto de abajo. Si miras con atención. 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. Dreamweaver te permite ver el documento en 3 vistas distintas CODE: para los codificadores que tienen dominio sobre el HTML. te darás cuenta que he definido el sitio en el nivel inmediato superior de la carpeta recortes. para desplegar el A partir de este punto empezamos a armar el rompecabezas que al final será nuestra plantilla para nuestro sitio web. Nosotros trabajaremos con SPLIT activado. así lo debes tener tú. si no la tienes abierta dirigete a Window / Files.

Buscar el archivo dentro del sitio local . _top para abrir el vinculo en la ventana del nivel superior (solo para marcos / Frames). Establecer un punto de enlace arrastrando la herramienta hasta el documento que queremos vincular y soltarlo cuando este último se sombree. . arial. . El estilo se refiere a las clases que hayamos definido en CSS. las propiedades de las herramientas que estemos seleccionando. 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. Si no tenemos nada seleccionado.solucionesseo.com Dentro de la interfaz. entonces el navegador mostrará la fuente que tenga esa computadora por defecto. para ello Dreamweaver pode a nuestra disposición de Grupos de Fuentes. si no lo encuentra que busque Arial. por ejemplo: cuando seleccionamos el grupo “verdana. si no lo encuentra que busque Tahoma. para esta opción se requiere que el diseñador tenga conocimientos de CSS para poder configurar un estilo y luego aplicarlo. Negrita enlaces Sangría 3. además desde este Panel de propiedades podemos aplicar Numeración y Cursiva . 34    . Font nos permite cambiar el tipo de letra. viñetas . y un elemento fundamental que siempre debes tener abierto y accesible es el Panel de Propiedades. 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. _self para abrir el vinculo en la misma ventana que estamos utilizando. Alineación al texto . Desde aquí. como mencioné anteriormente. Escribiendo el nombre de la pagina que queremos vincular dentro de la casilla link 2. podemos aplicar formato a un texto siendo las opciones los Encabezados (Headers) del 1 al 6. con el cursor en cualquier parte del documento. lo que ocasionará que tus textos no se visualicen de la misma forma en todas las computadoras. y . entre mas pequeño el numero mayor relevancia tendrá el texto.Diseño Web || Walter Alvarez: www. Los enlaces los podemos hacer de 3 formas distintas: 1. ya que desde este Panel se muestran (como en Photoshop). _parent para abrir el vinculo en una ventana paralela. el Panel de Propiedades tiene la apariencia de la foto de arriba. Default Font se refiere a que la fuente que se mostrará es la fuente que tenga el usuario predeterminado en su computadora. y que sucederá si no encuentra ninguna de las tres.

Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Armando nuestra página principal Con paginatop. 35    . Esta página principal debe tener el nombre de index y la extensión puede ser php.com debe haber una pagina principal que se muestre al usuario.solucionesseo.html el programa asigna la extensión de forma automática).html abierta solo debes dirigirte a File / Save As (Archivo / Guardar Como). 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.html (no es necesario escribir . a continuación llamaremos a este archivo index. se mandan a llamar a través de Links el resto de páginas. Cuando el usuario visita www. guarda el archivo en el Nivel superior. jsp. y a partir de esta. html.

asi que que serían los links?. Al aparecer esta alerta clic en SI 36    . 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. en este caso Dreaweaver se refiere a la ruta de las imágenes. imagen botón. recuerda que el sitio esta configurado para que las imágenes sean con enlaces relativos al documento.com Cuando presiones guardar te aparecerá una ventana emergente que preguntará si quieres actualizar los links o no. dicho de otra forma. Si entendimos el concepto de Links es cualquier texto.Diseño Web || Walter Alvarez: www. que facilita la navegación del usuario a través del sitio.solucionesseo. y no hemos realizado ninguna operación en este archivo. 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.

html.html Peimro haz clic en la vista del código y al inicio localiza la línea < table ID….html y paginacontenido. 37    . 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. ya que el procedimiento no es el mismo vamos a explicarlo a continuación.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Ahora pasemos a las otras dos paginas. asi que el atributo ID está de más.> el atributo ID lo vas a eliminar junto con su respectivo valor. pero HTML no es un lenguaje de programación sino un lenguaje interpretado. 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. comenzamos a trabajar con paginamenu. Abre paginamenu.

para localizar algo y reemplazarlo por otra cosa. En nuestro caso vamos a encontrar “images/” y lo reemplazaremos por “recortes/images/” (sin comillas). 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). 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. Open Documents: Busca el término en cuestión en 38    . dentro del código fuente en el documento actual.solucionesseo. Find in: presenta un cuadro con múltiples opciones. 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.com Ahora que ya no tienes ID asignado a esta tabla podemos cambiar las rutas en el código. • • • Selected Text para buscar únicamente en el texto seleccionado. Current Document: para delimitar la búsqueda al documento que estamos editando. que es nuestro siguiente paso.Diseño Web || Walter Alvarez: www. que sirve como su nombre lo indica.

también nos permite buscar dentro de sus atributos. se desplegará un menú emergente del cual seleccionando “Close Panel Group” este panel se cerrará. Entire Current Local Site: Para buscar en todo el sitio local sin necesidad de abrir los archivos. la pantalla se mostrará 1. Luego de haber presionado el botón “Replace All” algo extraña con elementos que no habías visto inicialmente. Si presionas Boton derecho del mouse sobre cualquier de las pestañas de este nuevo Panel. En el Panel de Propiedades aparece un Botón extraño 2. • Specific Tag: Permite realizar búsquedas dentro de etiquetas con atributos específicos y cambiar sus valores desde esta ventana. Al darle clic desplega otro grupo de opciones. Requiere conocimientos de HTML para identificar las etiquetas (TAGS). ten en cuenta que esta opción no se puede deshacer. 39    . Se ha abierto una ventana con un montón de código en un formato medio raro cambios que la operación . Cuando realices búsquedas en documentos cerrados. Search: Aquí defines el lugar en el que será buscado el término.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    • • • todos los documentos que se encuentren abiertos. • 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. Folder…: Su nombre lo dice todo no? Selected Files in Site: Te permite seleccionar varios archivos desde la ventana Files. esta ventana solo te informa de los Find and Replace acaba de realizar.

html. este error significa que todo está bien. Ahora solo falta copiar esa tabla completa y pegarla en index. 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.html.com Si presionas el botón Refresh.html Antes de continuar veamos cuánto mide de ancho este documento. Como se muestra en la foto de arriba la tabla mide 262 de ancho.Diseño Web || Walter Alvarez: www.html. sin embargo no hemos definido en el lugar que deberá aparecer dicha tabla.solucionesseo. verás que en la pantalla de diseño las imágenes no se encuentran. 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. para ello nos dirigimos en el código a la etiqueta TABLE y el valor del atributo width es el ancho de la tabla. Debemos pegar el contenido del portapapeles dentro del index. copiamos (CRTL+C) y lo mantenemos en el portapapeles. Para insertar una tabla haz clic en cualquier parte debajo de la tabla del top (no importa que no aparezca el cursor). asi que procedemos a insertar una tabla de dos columnas y una fila debajo de la tabla del top que tenemos en el index. y seleccionamos la herramienta 40    . ya que la ruta de las imágenes han cambiado y se visualizarán cuando peguemos el código en el index.

41    .html Al presionar el Botón OK. 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. aparece la tabla dibujada en nuestro documento. Al presionar insertar tabla.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    insertar tabla de la pestaña común. ubicamos el cursor dentro de la columna izquierda y pegamos el contenido del portapapeles (CTRL+V).

com Al pegar el contenido dentro de la columna izquierda. aparece el siguiente cuadro. Ahora toda tu pantalla deberá verse asi: 42    . Dreamweaver solo nos está alertando que esas imágenes no tienen comentarios. presiona “cancel”.Diseño Web || Walter Alvarez: www.solucionesseo.

(vertical align). Dreamweaver realiza una operación de resta automática. ya que lo que vamos a hacer con paginacontenido. y “H” que corresponde al alto espacio de W escribiremos 262 y presionamos ENTER. están dos campos señalados con dos letras “W” que corresponde al ancho. Haz clic en la columna izquierda y en el panel de propiedades asigna TOP a Vert en el panel de propiedades.html será bastante parecido a lo que le hicimos a paginamenu.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    El problema ahora es que la columna derecha es demasiado estrecha. Lo que acabas de hacer es asignar alineación vertical al contenido de esa columna. Si haz realizado paso a paso este ejercicio te resultará mas fácil ahora. en el Ahora que ya tenemos nuestra tabla para el TOP y nuestra columna del Menu. por lo que debemos darle un ancho a la columna izquierda (262px). solo nos faltas un par de archivos por colocar y estaremos listos. 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). Abrimos la paginacontenido.html.html. 1. . significa que la columna derecha mide 738px que es el ancho exacto de paginacontenido. esto nos va a garantizar que el contenido siempre se encuentre en la parte superior de esta columna (es lo común). Buscamos “images/” y lo reemplazamos con “recortes/images/” 43    . 2.html 2. A la par de Vert. Dos cosas vamos a realizar en la columna izquierda antes de continuar: 1.

Copiamos en la ventana de diseño la tabla. Importante: Antes de pegar el contenido dentro de index.Diseño Web || Walter Alvarez: www. 4.solucionesseo.html 44    .html. La pegamos en la columna derecha de index. cambia los valores de vert en el panel de propiedades a top.com 3.

haz lo mismo con el espacio en blanco que tienes en la columna de portada (columna de la derecha). 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. repite los pasos anteriormente descritos. Así que selecciona la imagen que tiene las opciones y bórrala.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Ahora solo nos falta paginabottom.html. 45    . Al finalizar tu documento deberá tener el siguiente aspecto: Ahora el Menú no nos sirve como está.

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    . Antes de insertar contenido alguno en el menú y en contenido debemos alinear verticalmente TOP las celdas que tenemos vacías actualmente.Diseño Web || Walter Alvarez: www. Esto para garantizar la integridad de nuestro diseño.solucionesseo.

basta con posicionar el cursor encima del texto y en la casilla LINK del Panel de Propiedades cambia la URL o dirección.html. se inserta una nueva fila. 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. 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 preparar los vínculos.com. Cierra todos los documentos a excepción de index.html). cuando Dreamweaver te pregunte si quieres guardar los cambios presiona NO. usaremos esta opción para insertar tantas filas necesitemos en el Menú.html.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. si lo que deseas es apuntar a otro dominio de internet debes agregar el protocolo ej: http://www. Para editar un vinculo no necesitas seleccionar todo el texto.solucionesseo. A continuación guarda el index. 47    .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.

Dreamweaver te muestra un listado con todos los sitios disponibles.Diseño Web || Walter Alvarez: www. cuando estes listo presiona “save”. A la pregunta Update Links?. pero para efectos de una actualización mas rápida nos conviene convertir este archivo en plantilla. 48    . No es necesario subir esta carpeta al servidor ya que por su formato requiere de Dreamweaver. Ir al Menu Archivo / Guardar como Plantilla (File / Save as template) a.com Crear Plantillas a partir de un documento elaborado Hasta aquí ya tenemos nuestro sitio web armado.solucionesseo. es decir la única parte de todo el sitio que estará cambiando frecuentemente. es decir la columna derecha. puedes dejar todos los campos como se ven en la figura de abajo. responde SI. Debemos darle un nombre a esta plantilla y definir para que sitio funcionará. solo nos falta la información. Es proceso es rápido y fácil y lo único que vamos a configurar es la región editable. i. al menos la estructura. esta parte cambiante es el contenido. Para crear un documento nuevo en plantilla seguiremos los pasos: 1. pero por defecto te muestra como primera opción el sitio que tienes abierto y esta es la opción que usaremos.dwt. Dreamweaver crea una carpeta dentro del directorio raíz llamada Templates y dentro de esta carpeta crea el archivo con la extensión . No la borres 2.

es decir. Nos dirigimos al Menu Insertar / Objetos de Plantilla / Region Editable 49    . Seleccionamos el area que vamos a definir como región editable 2. Insertando Región Editable Para este ejercicio voy a dejar únicamente como región editable la sección del contenido. Ademas puedes agregar como región editable el Top. pero tu puedes agregar como región editable la imagen que se encuentra en la parte superior la imagen que tiene Portada como texto. Podríamos cerrar el documento pero no hemos ingresado aun ninguna región editable. para poder presentar imágenes distintas en cada sección del sitio. una vista rápida nos demuestra que Dreamweaver ya guardó la plantilla dentro de Templates. Para insertar una región editable: 1.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    La ventana Files ha cambiado. toda la pagina está bloqueda. esto para personalizar cada una de las secciones.

que siempre van a tener las mismas opciones. 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. 50    . Guarda el archivo y ciérralo. Las regiones No editables son las que regiones que en todo el sitio serán de la misma forma.solucionesseo. no lo volverás a usar a menos que vayas a realizar cambios en el Menú o agregar fotos en las regiones No editables. siempre que esos documentos estén afectados por la plantilla. por ejemplo el Menú.Diseño Web || Walter Alvarez: www. 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. Ya que cuando hacemos cambios en la plantilla en las regiones No editables estos cambios afectarán a TODO EL SITIO. le vamos a dar gracias a Dios de tener la plantilla lista. cambiar los vínculos se puede realizar de forma manual. Para un sitio de 10 o 15 páginas.com 3. Le damos un Nombre a la región editable 4.

esta opción es la que te salvará el pellejo más adelante. verifica que la casilla (Update page when template changes) esté seleccionada. 3.Walter Alvarez  [CREANDO UN SITIO WEB CON PHOTOSHOP Y DREAMWEAVER]    Creando nuevos documentos a partir de nuestra plantilla 1. ya que es la que hará el trabajo de actualización en todo el sitio. 51    . Selecicona Menu Modificar / Plantillas / Aplicar Plantilla a pagina (Modify / Templates / Apply Template to Page…) 2. Presiona para seleccionar o para cancelar. Selecciona la plantilla (solo tenemos una).

que las plantillas nos ayudan a la seguridad ya que protegen la integridad de nuestro diseño. que ya está listo para ser publicado. 52    . El resto de datos se los solicitas a tu Proveedor de Hosting o al administrador de servidor.Diseño Web || Walter Alvarez: www. A esta página solo falta agregarle contenido y guardarla en el directorio raíz de nuestro sitio. Distribuye este libro gratuito. te recomiendo Filezilla. Entonces podemos decir. solo recuerda mencionar la procedencia. contraseña = contraseña Puerto 21. En Servidor escribes la url del sitio web. 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.com El documento se ve exactamente igual al que teníamos. pero no es necesario que escribas el puerto el programa sabe que es el puerto 21 el que utiliza. Subir sitios via FTP al servidor Para esto necesitamos un cliente FTP. Para conectarte a tu servidor necesitas que el administrador de servidor te de acceso a una cuenta FTP con un usuario y un password.com estos comentarios ayudarán a enriquecer este libro. Espero que esta obra te haya sido de utilidad. solicítaselo. esto es porque esta bloqueado. recuerda que puedes escribir tus comentarios a war@solucionesseo. es gratuito y fácil de usar. usuario = usuario.solucionesseo.

Sign up to vote on this title
UsefulNot useful