Professional Documents
Culture Documents
Walter Alvarez
Septiembre, 2008
CreandounsitioWebcon PhotoshopyDreamweaver
Septiembre, 2008
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
Introduccin
Con el presente documento pretendo ayudar a quienes nunca han diseado un sitio web con Photoshop. La presente obra explica paso a paso la creacin de un sitio web, desde la parte del Diseo, hasta el montaje en Dreamweaver y lo publicamos en internet, obviamos la parte de recopilacin de informacin, y pasos anteriores a este proceso, ya que este documento presupone que ya cuentas con esa informacin. Con esta entrega pongo a tu disposicin las tcnicas que me han ayudado en el diseo de interfaces para pginas web, permteme reiterarte que la creatividad no es algo nacido sino aprendido, con la practica vas a ir mejorando, las interfaces te quedarn cada vez mejor, pero con la ayuda de este documento te doy una muy buena base. Las tcnicas son bsicas y mas que tcnicas te dars cuenta que son trucos aprendidos a lo largo de 8 aos de experiencia en diseo web, que pongo a tu disposicin. Adobe Photoshop es el programa ms utilizado en Internet para la edicin de imgenes digitales, por lo que te ensear a disear pginas web utilizando un par de herramientas de este poderoso programa, mismas que incluyo en graficas. Adems aprenders a armar el documento en dos columnas dentro de Dreamweaver, y a aplicar CSS dentro de la pagina web para lograr una esttica profesional. Para finalizar, los comentarios o sugerencias a esta obra puedes hacerla escribiendo a: war@solucionesseo.com, tus aportes sern bienvenidos y ayudarn a mantener esta obra actualizada.
Puedes reproducir esta obra total o parcialmente, siempre que menciones la procedencia de la misma.
Por ltimo, recuerda que te estoy dando parte de mis conocimientos, mismos que espero te ayuden a una mejora en tus diseos y ample tus conocimientos, por lo que cualquier donacin es bienvenida. Esta obra es gratuita, ayuda a mantenerla as.
Puedes enviar la donacin va Western Unin a: Nombres y Apellidos: Walter Humberto Alvarez
Cedula de Identidad: 001-210478-0006W Direccin: Costad Sur de la Funeraria Monte de los Olivos 1 c. al Este. Managua, Nicaragua.
Luego de enviar la ayuda, por favor avsame a: war@solucionesseo.com, especificando el monto, nombre completo y pas. Estos datos me los requieren en las oficinas de Western unin.
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
Imprenta y se hace as para que la imagen impresa tenga la mayor cantidad de informacin de colores posible y pierda menos calidad.
Ahora que entendemos un poco mejor lo relacionado a la resolucin, puedo decirte que la resolucin se mide en dpi o ppp (dpi= dots per inch ; ppp = puntos por pulgada). Raramente veremos la resolucin expresada en pixeles / centmetro, no porque no se pueda, sino porque Puntos por Pulgada es el estndar. Sino haz la prueba, pregntale al joven o la joven diseadora de la Imprenta en la que sacas tus documentos, si le mandas la resolucin en pixeles por pulgada o pixeles por centmetro, probablemente te responda no importa, sin embargo si realizas este tipo de cambio en la resolucin de una imagen y ms si esta va a la imprenta para sacar volantes mejor avsale al diseador de la imprenta as te evitars futuros dolores de cabeza.
Si presionamos la pestaa Custom, se nos desplegaran las opciones de tamao de documento que Photoshop tiene preestablecidas, Default Photoshop Size = es 454 * 340 pixeles. U.S. Paper = tamao carta, Legal y Tabloide y as sucesivamente para cada opcin que se lecciones de Presets. Si observas con atencin cuando cambias la opcin Presets a custom o cualquier otra de las opciones la casilla Size se activa y te permite cambiar entre tamaos, por su parte las casillas de width (ancho) y height (alto) cambian respectivamente al realizar el cambio.
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
A la par de la opcin Width y Height encontrars siempre la unidad de medida, dentro de las cuales las ms usadas son cm (centmetros), inches (pulgadas), mm (milmetros), pixels (pixeles). Cual usaremos nosotros?, pixeles, ya que es la interfaz de una pgina web la que voy a realizar y va a ser vista a travs de monitores y los monitores trabajan con pixeles. A la par de resolution (resolucin) aparece otro cuadro en el cual puedes seleccionar si la resolucin la quieres representar en pixeles/pulgada o pixeles/centmetro. Te recomiendo pixeles/pulgada (anteriormente expliqu la razn). 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.
No importa cul es la forma que le vayas a dar, ni el tamao del documento que utilices, la estructura de una pgina 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 diseo lo amerita, la imagen de la seccin.
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 funcin del Men es siempre la misma, ofrecerle al visitante la posibilidad de navegar a travs de nuestro sitio web. b. Toma en cuenta que las opciones del men deben estar disponibles en todas las pginas de nuestro sitio web, as que lo que conviene es que cada opcin tenga como nombre la seccin que ser visitada, es decir, Acerca de la Empresa llevar al visitante a una pgina en la que se encuentre informacin de la Empresa, posiblemente una breve resea, misin y visin, adems valores y cualquier otra informacin que se considere de valor. c. Una pgina web es como una presentacin en Power Point de tu empresa, la diferencia es que es a nivel Mundial, y como en una presentacin 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 energa elctrica, o cuantas cartas se reciben por aire o cuantas cartas se reciben por tierra, etc. ii. Hay que realizar una seleccin exhaustiva de la informacin a publicar. iii. Una correcta seleccin de informacin le ser muy til a la empresa, a la vuelta del final del desarrollo del sitio web toda la informacin til va a estar online. 3. Contenido a. En esta parte se muestra la informacin de la pagina individual, en el caso de la portada no caigamos en el error de mostrar un texto de bienvenida, b. Una pgina 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 propsito es vender, pero si resultara til si la bienvenida la acompaamos con una resea breve de lo que puede encontrar en este sitio web. 4. Footer / Pie de pagina a. Generalmente mostraremos aqu informacin de contacto de la empresa: Empresa.com Todos los derechos reservados. Tel: 555-555555; fax : 555-555555, etc y adems los crditos. Que no se te olviden los crditos con un enlace hacia tu sitio web.
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
obstante tratar de explicar los procedimientos y las herramientas lo mejor y ms comprensible posible.
La interfaz de Photoshop es bastante intuitiva, no es necesario haber visto nunca Photoshop para conocer alguna de sus herramientas, las bsicas Seleccin / Mover, Herramienta rectngulo, elipse, Texto, Zoom y una que otra conocida que, al igual que en otros programas de diseo realizan la misma funcin.
10
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Nos concentraremos en las herramientas que vamos a utilizar frecuentemente a la hora de disear pginas web, siendo estas: la herramienta Mover en otros programas de diseo esta herramienta se llama Seleccin y sirve para seleccionar un objeto y moverlo hacia una nueva posicin 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 continuacin. Otras herramientas que utilizaremos son las que se encuentran en la casilla de la herramienta rectngulo para dibujar rectngulos, nosotros usaremos la herramienta Rectngulo para aplicar mascaras para el Top, dentro de ella se encuentran la herramienta elipse para dibujar formas elpticas o redondas si presionamos shift mientras arrastramos en el documento, rectngulo de bordes redondeados como su nombre lo indica inserta rectngulos con esquinas redondeadas, lo podemos usar para el Men o los espacios de Noticias, polgono no lo vamos a usar, pero sirve para insertar estrellas o polgonos, lnea para dibujar lneas que podran servir de separadores entre secciones dentro del contenido, y por ltimo formas bsicas que contiene formas prediseadas como Flechas, llamados, estrellas de 8, 16, 32 puntas y otros.
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 travs del Panel de Propiedades podemos cambiar las propiedades de un Objeto como tipo, tamao o color.
Selecciona cada una de las herramientas para que veas los cambios que sufre el panel de propiedades.
Lo ms 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 seleccin de herramientas vamos a dibujar una elipse, un crculo y un rectngulo dentro de nuestro documento, la elipse debe ser de color rojo, el crculo azul y el rectngulo verde.
11
Este mismo procedimiento sigue para dibujar una elipse, solo que en lugar de seleccionar Rectngulo 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 encontrars 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
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
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, vers 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 configuracin 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 ests listo para aplicar mascaras.
Una vez ubicada la foto que queremos, le damos OK, a continuacin la imagen se abre en una nueva ventana, dejando nuestro documento aparentemente cerrado, pero no es asi, estamos usando Windows cuyo significado en espaol es Ventanas, Photoshop tambin 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
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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, mostrndose de la siguiente forma: , pues esto se debe a que los botones grandes corresponden al Programa, mientras que los botones pequeos (y casi no destacables) corresponden a la ventana del documento. As que manos a la obra, restaura la ventana del documento y vers que el documento anterior ah est solo que haba 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 rectngulo. Ahora presiona el botn derecho del ratn encima de Layer 1 y selecciona la opcin Create Clipping Mask.
El procedimiento para crear mascaras es siempre el mismo, solo practica aplicar mascaras con las otras dos formas del documento.
16
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 botn derecho del Mouse y selecciona Create Clipping Mask (Crear mascara de rectorte) 4. Listo! Para cambiar la posicin de la foto dentro de la mscara, 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 posicin deseada.
No te preocupes por los colores, lo importante hasta aqu es que distingas las herramientas que he utilizado. Los colores los vamos a cambiar ms 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 rectngulo, lnea, rectngulo 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
o Slice
Esta herramienta divide nuestro diseo 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 Cdigo 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 fcil de usar lo nico que necesitamos es darle clic a nuestro documento y seleccionar el area que queremos dejar y luego presionar Enter.
18
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
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 gua, como se muestra en la foto de abajo.
A continuacin 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 extensin la da Photoshop por defecto).
19
Presiona Guardar o Save y ya tendrs guardada la primera parte de 4. Por ningn 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 debers empezar desde el inicio, es decir, retroceder unas 15 pginas de este documento. Asi que cuando regresas al documento lo que debes hacer es presionar la siguiente combinacin de teclas CTRL+ALT+Z (sin las comillas). Esta combinacin es para deshacer, no desesperes, el archivo que acabas de guardar est a salvo, pero tampoco vayas a guardar porque reemplazaras el primer pedazo del documento. Repite la operacin para el Menu, Contenido y Bottom, nombrando los archivos distintos, hasta que tengas la siguiente estructura:
20
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 pginas cuya vista deber ser como las siguientes:
Paginatop
Paginamenu
Paginacontenido
pabinabottom
21
A paginatop.psd lo nico que haremos es dividirlo en sectores a fin de dividir as tambin 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 vaco, adems vers en la barra de propiedades que aparecen dos botones extraos , 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 (sealados en los crculos rojos), estos cuadritos se llaman Manejadores y sirven para redimensionar. Arrastramos el manejador derecho del centro hacia el centro hasta que la lnea punteada quede en un espacio que abarque nicamente al logotipo.
Con la accin anterior redimensionamos el sector 1, y definimos un rea menor para l, ante esto aparece un sector 2 a la derecha, dirgete a la herramienta seleccionar sector y haz clic en el sector 2, al activarse el botn Promote
haz clic en el y vers que el sector 2 ahora es de color azul, igual que el sector 1.
22
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Sigue el procedimiento anterior, solo que esta vez la seleccin debe abarcar nicamente al Slogan. Al final tu documento debe tener el siguiente aspecto:
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
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
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 tamao.
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 tambin el tamao 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 debers hacerlo de sector en sector.
25
Esta tcnica te sirve no solo para guardar paginas con sectores como HTML, sino tambin para disminuir el tamao de una foto sin alterar la calidad de la misma. Adems usando esta tcnica puedes disminuir el peso de imgenes que posteriormente sern utilizadas en un banner en flash, no obstante si ese es el fin te recomiendo que la opcin progresive se encuentre desactivada, ya que flash no trabaja muy bien con imgenes progresivas.
Como apreciars 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 imgenes de los recortes. El nombre lo puedes dejar igual, ya que Photoshop le da al archivo HTML el mismo nombre del archivo psd, Tipo: cercirate que est seleccionada la opcin HTML e images, de lo contrario no tendras el cdigo HTML
26
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 operacin con los dems 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 algn cambio en los ttulos, o bien porque vas a disear 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 tcnica.
Cualquier comentario que ayude a enriquecer este trabajo porfavor hazlo escribiendo a war@solucionesseo.com.
A continuacin 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
Como editor WYSIWYG que es (What You See Is What You Get), Dreamweaver oculta el cdigo HTML de cara al usuario, haciendo posible que alguien que no entiende el lenguaje HTML pueda crear pginas y sitios web fcilmente.
Conceptos Bsicos
Pagina Web Cuando pensamos en una pagina web debemos pensar en una empresa que tiene una jerarqua bien establecida, un departamento de ventas, divisin de personal, contabilidad, diseo, etc. Cada una de estas estructuras cumple una funcin determinada e importante dentro de la empresa. Pues una pagina web es una seccin 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 Divisin de Computadoras, Divisin de Tecnologas Web y Multimedia, Divisin de Personal y Contabilidad, cada una cumple una funcin 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 vers que hay una seccin de diseo grafico, otra de diseo web, otra Quienes somos, etc, si entras a diseo grafrico veras los precios de los productos impresos y una galera de trabajos realizados, lo mismo en diseo web solo que en diseo web se muestran los trabajos de sitios web diseados.
28
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Sitio Local Una vez definido el trabajo a realizar, todo lo guardas en una carpeta, la cual, si eres ordenado, pondrs el nombre del cliente y dentro de ella toda la informacin, paginas html, imgenes, etc. Este es el sitio local, es decir, la copia en el disco duro del sitio web en internet.
Sitio esttico Se le llama sitio esttico al sitio web que no interacta con una Base de Datos, es decir solo usa tecnologa HTML, CSS y JavaScript.
Sitio dinmico El sitio dinmico es aquel en el que la informacin que se le muestra al navegante proviene de una Base de Datos, generalmente en MySql y las paginas estn en formato PHP, ASP, JSP.
Sitio Interactivo Es aquel sitio que su funcionalidad depende de acciones del usuario, es decir, si presiona un botn el sitio completo hace algo, lo ms comn es que estos sitios interactivos dependan de otra tecnologa para agregar interactividad, Adobe Flash.
29
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 opcin de abir como ultima de la lista para abrir un archivo. Create New te muestra una lista de los formatos compatibles con
30
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Dreamweaver, nosotros utilizaremos HTML, Create from Samples es un conjunto de plantillas prediseadas que te ayudarn en tu proceso de aprendizaje del programa, para realizar cambios a estas plantillas prediseadas debers tener conocimientos previos de Hojas de Estilo Cascada (CSS) y HTML. Debajo encontrars 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, adems lo utiliza Adobe para comunicar a los usuarios acerca de novedades y nuevas versiones caracterstica heredada de Macromedia. Al dar clic en siguiente pantalla: en la pantalla de Bienvenida se nos desplegar la
En la pantalla de definicin del sitio se nos muestran 2 pestaas Bsico y Avanzado, aunque lo recomendable es que vayas paso a paso, es ms rpido en la pestaa Avanzado, as que clic en Advanced:
La pantalla que sigue presenta las mismas opciones que la pestaa Basic solo que mas accesible, lo que nos permitir la definicin del sitio mas rpidamente, a continuacin detallo las opciones de la pestaa Advanced.
31
Eso es todo, con esa configuracin bsica ya hemos definido nuestro sitio web.
32
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] La ventana Files, si no la tienes abierta dirigete a Window / Files, debe estar como la foto de abajo.
Si miras con atencin, te dars cuenta que he definido el sitio en el nivel inmediato superior de la carpeta recortes, as lo debes tener t.
para desplegar el
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 cdigo y en la inferior una vista previa, DESIGN: nos permite trabajar sobre la pagina sin ver nada de cdigo.
Nosotros trabajaremos con SPLIT activado, esto nos permitir ir viendo en el cdigo los cambios que vayamos realizando en la vista de diseo, y adems nos ubicar ms rpidamente dentro de aquella seccin especfica de cdigo 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 pequeo 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 disposicin 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 opcin se requiere que el diseador tenga conocimientos de CSS para poder configurar un estilo y luego aplicarlo, adems desde este Panel de propiedades podemos aplicar Numeracin y Cursiva , , vietas , Alineacin al texto , . 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 . y , Negrita enlaces Sangra
3. Establecer un punto de enlace arrastrando la herramienta hasta el documento que queremos vincular y soltarlo cuando este ltimo se sombree.
34
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
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 travs de Links el resto de pginas. Esta pgina principal debe tener el nombre de index y la extensin 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 botn, que facilita la navegacin del usuario a travs del sitio, y no hemos realizado ninguna operacin en este archivo, asi que que seran los links?, en este caso Dreaweaver se refiere a la ruta de las imgenes, recuerda que el sitio esta configurado para que las imgenes sean con enlaces relativos al documento, dicho de otra forma, al cambiar de posicin el archivo, no hemos cambiado de posicin las imgenes, asi que las imgenes se quedan en el mismo lugar de origen, por lo que hay que especificar la ruta o decirle al programa donde estn las imgenes que se presentarn en el documento.
36
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Ahora pasemos a las otras dos paginas, ya que el procedimiento no es el mismo vamos a explicarlo a continuacin. Abre paginamenu.html y paginacontenido.html, ahora tienes 3 documentos abiertos y puedes alternar entre ellos dndole clic a la pestaa que tiene el nombre del archivo que quieres visualizar, comenzamos a trabajar con paginamenu.html
Peimro haz clic en la vista del cdigo y al inicio localiza la lnea < 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 programacin sino un lenguaje interpretado, asi que el atributo ID est de ms.
37
Ahora que ya no tienes ID asignado a esta tabla podemos cambiar las rutas en el cdigo, que es nuestro siguiente paso.
Al igual que un programa de edicin de texto Dreamweaver nos permite localizar lneas o palabras de cdigo de una forma rpida y eficiente a travs 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 cdigo 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, tambin 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.
38
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 bsquedas en documentos cerrados, ten en cuenta que esta opcin no se puede deshacer.
Search: Aqu defines el lugar en el que ser buscado el trmino. Al darle clic desplega otro grupo de opciones. Source Code: Para realizar las bsquedas en el Codigo Fuente Text: Para realizar la bsqueda nicamente en el texto (no afecta el cdigo) Text (Advanced): Permite buscar dentro de etiquetas especficas y si adentramos un poco ms en esta herramienta, tambin nos permite buscar dentro de sus atributos. Specific Tag: Permite realizar bsquedas dentro de etiquetas con atributos especficos y cambiar sus valores desde esta ventana. Requiere conocimientos de HTML para identificar las etiquetas (TAGS).
Luego de haber presionado el botn Replace All algo extraa con elementos que no habas visto inicialmente.
la pantalla se mostrar
1. En el Panel de Propiedades aparece un Botn extrao 2. Se ha abierto una ventana con un montn de cdigo en un formato medio raro
cambios
que
la
operacin
, esta ventana solo te informa de los Find and Replace acaba de realizar.
Si presionas Boton derecho del mouse sobre cualquier de las pestaas de este nuevo Panel, se desplegar un men emergente del cual seleccionando Close Panel Group este panel se cerrar.
39
Si presionas el botn Refresh, vers que en la pantalla de diseo las imgenes no se encuentran, este error significa que todo est bien, ya que la ruta de las imgenes han cambiado y se visualizarn cuando peguemos el cdigo en el index.html Antes de continuar veamos cunto mide de ancho este documento, para ello nos dirigimos en el cdigo 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.
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
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
insertar tabla de la pestaa comn. Al presionar insertar tabla, aparece el cuadro de dialogo que debers dejar como se muestra en la foto de abajo.
Al presionar el Botn 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
Dreamweaver solo nos est alertando que esas imgenes no tienen comentarios, presiona cancel. Ahora toda tu pantalla deber verse asi:
42
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 operacin de resta automtica, 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 alineacin 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 comn). 2. A la par de Vert. (vertical align), estn dos campos sealados con dos letras
W que corresponde al ancho; y H que corresponde al alto espacio de W escribiremos 262 y presionamos ENTER.
; en el
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 fcil 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
Importante: Antes de pegar el contenido dentro de index.html, cambia los valores de vert en el panel de propiedades a top.
44
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] Ahora solo nos falta paginabottom.html, repite los pasos anteriormente descritos.
Ahora el Men no nos sirve como est, ya que necesitamos que sean textos y no imgenes las que estn enlazadas (por el posicionamiento) adems que son ms rpido de cargar.
As que selecciona la imagen que tiene las opciones y brrala, haz lo mismo con el espacio en blanco que tienes en la columna de portada (columna de la derecha).
45
En el espacio vaco 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 vacas actualmente. Esto para garantizar la integridad de nuestro diseo.
46
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER] 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 opcin para insertar tantas filas necesitemos en el Men.
Para preparar los vnculos, selecciona el texto que vayas a vincular y en el panel de propiedades en la casilla LINK escribe # (smbolo numeral), esto te va a servir de ayuda visual para saber donde tienes los vnculos.
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 direccin. Si el vinculo es a una pgina dentro de tu sitio local solo debes escribir el nombre del archivo seguido de la extensin 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 electrnico debers agregar mailto: seguido de la direccin de correo electrnico ej: mailto:war@solucionesseo.com. Cierra todos los documentos a excepcin de index.html, cuando Dreamweaver te pregunte si quieres guardar los cambios presiona NO. A continuacin guarda el index.html.
47
48
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
La ventana Files ha cambiado, una vista rpida nos demuestra que Dreamweaver ya guard la plantilla dentro de Templates. Podramos cerrar el documento pero no hemos ingresado aun ninguna regin editable, es decir, toda la pagina est bloqueda.
49
4. Guardamos el documento Al finalizar estos pasos vers como se le ha agregado a nuestro archivo una pequea pestaa de color azul Cyan con el nombre de la regin editable.
Esto quiere decir que ya estamos listos para usar nuestra plantilla. Guarda el archivo y cirralo, no lo volvers 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 sern de la misma forma, que siempre van a tener las mismas opciones, por ejemplo el Men. Para un sitio de 10 o 15 pginas, cambiar los vnculos se puede realizar de forma manual, pero con el tiempo este sitio se va a ir haciendo ms grande y si el dueo del sitio desea agregar un par de vnculos en el Men cuando su sitio tenga 60 pginas, 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 afectarn a TODO EL SITIO, siempre que esos documentos estn afectados por la plantilla.
50
WalterAlvarez [CREANDOUNSITIOWEBCONPHOTOSHOPYDREAMWEAVER]
2. Selecciona la plantilla (solo tenemos una), verifica que la casilla (Update page when template changes) est seleccionada, esta opcin es la que te salvar el pellejo ms adelante, ya que es la que har el trabajo de actualizacin en todo el sitio.
3. Presiona
para seleccionar o
para cancelar.
51
El documento se ve exactamente igual al que tenamos, pero si te das una asomadita por el cdigo vers 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 diseo. A esta pgina solo falta agregarle contenido y guardarla en el directorio raz de nuestro sitio, que ya est listo para ser publicado.
En Servidor escribes la url del sitio web, usuario = usuario, contrasea = contrasea 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 ayudarn a enriquecer este libro. Distribuye este libro gratuito, solo recuerda mencionar la procedencia.
52