1. Internet

¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Alejandro E. Ramos Castro
Descripción
Tareas
Proyectos
Referencias
Apoyos
Currículum
Portafolio
Materias
Alumnos
Diseño gráfico V (grupo E)
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
Diseñar páginas web puede ser un reto interesante, pero más veces de las que uno quisiera resulta
ser más elboarado de lo que se pensó inicialmente. Para este ejemplo se pensó en una estructura
sencilla basada en una retícula de cuatro columnas y compuesta de un encabezado, el cuerpo de
documento y un pie de página.
Preparativos
Mientras todavía se trabaja en Illustrator conviene hacer una lista de la paleta de colores que se
está utilizando, en el caso de las partes de colores degradados, se tomará en cuenta el que
aparezca hasta abajo. Conviene cambiar la ventana "Colores" de Illustrator para que muestre los
valores "web":
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 1 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
La paleta de colores para la página es:
Fondo encabezado, títulos y bordes del cuerpo de la página: #008b00;
Fondo del cuerpo de la página: #efebe2;
Fondo de la barra de menús: #225322;
Fondo de la barra de menús: #010901;
Tipografía del encabezado, menús y títulos: #f5e6ca;
Tipografía del pie de página: #808080;
Tipografía del cuerpo de la página: #000000;
También resultará necesario hacer una lista de las tipografías a utilizar:
Encabezado: Helvética, 48pt.
Títulos: Helvética, 24pt.
Menús: Helvética Bold, 14pt.
Cuerpo: Helvética, 14pt.
Pie de página: Helvética, 10pt.
Análisis de la estructura
La página está basada en una retícula de 4 columnas y 2 regiones principales:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 2 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Habrá de observarse que en el encabezado todos los elementos llegan hasta los bordes, no así en el
cuerpo de la página, el cual tiene márgenes entre todos los elementos.
En el cuerpo de la página se tiene la retícula de 4 columnas, pero la central utiliza 2 de ellas, por lo
que se reduce a 3. Las columnas de los extremos utilizan la cuarta parte del ancho total mientras
que la central la mitad de éste. El pie de página utiliza todo el espacio.
El formato presentado es rectangular, pero el contenido pudiera variar y la altura cambiaría en
consecuencia, por lo tanto el cuerpo de la página deberá ser capaz de adaptarse a la cantidad de
contenido que se tenga, mientras que el encabezado resulta ser la única sección donde se tienen
una dimensión constante (que se puede medir fácilmente en Illustrator):
Antes de comenzar a armar la página en Dreamweaver habrá que guardar el gráfico de la identidad
de la página en un formato adecuado para web. Copiando el gráfico a un documento nuevo de
puede "guardar para web" con todo y transparencia para que pueda verse el color del fondo.
Armado en Dreamweaver (primera parte)
El primer paso será necesariamente crear un documento nuevo en Dreamweaver:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 3 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Enseguida de eso será escribir el título de la página y guardarlo. Después insertar una tabla de 2
columnas y una fila sin bordes ni espacios:
Pero antes de que se haga más, será necesario definir algunos datos básicos para el documento,
para ello será necesario modificar las propiedades de la página (Modificar -> Propiedades de la
Página…). En esta sección se pueden definir ajustes que afecten a toda la página, como la
tipografía, su tamaño, el color de fondo y varias cosas más:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 4 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
En caso de tener a la vista la paleta "CSS" se podrá notar que se crearon un par de entradas en la
misma, si se selecciona alguna de ellas se podrá ver las definciones de estilo que se generaron:
Para identificar los elementos que componen la página y al mismo tiempo comenzar a darle forma,
habrá que definir dos identificadores más, uno para el encabezado en si y otro para el menú. Para
el primero se definirá el color del fondo y para el segundo lo mismo, además del tamaño de la
aparecerá lo siguiente:
tipografía. Primero el encabezado, depués de presionar el botón
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 5 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
08-9-22 13:26
Page 6 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Para identificar el encabezado como tal es necesario seleccionar la celda de la tabla que contendrá
los elementos que formarán esa sección; hecho lo anterior, si se mira al pie de la ventana de
trabajo, se encontrarán una serie de botones uno de los cuales está identificado por "td" , al
presionar la tecla "control" y hacer clic con el ratón se desplegará un menú del cual se podrá
seleccionar el identificador para esa sección:
Mismo procedimiento para la barra de menús:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 7 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
08-9-22 13:26
Page 8 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Después de insertar la imagen, escribir el texto del encabezado y el de las opciones de los menús,
se obtiene lo siguiente:
Todavía le falta para que se parezca por completo al original.
Armado en Dreamweaver (segunda parte)
La siguiente parte consiste en agregar la tabla del contenido de la página y los textos e imágenes
que lo componen. Para ello es necesario revisar cuántos pixeles se están dejando de márgen entre
las celdas que forman la tabla.
Una vez hecho lo anterior se agregará una nueva tabla de 1 fila por 3 columnas, las cuales deberán
tener un borde de 1 pixel y estarán separadas entre si por 8 pixeles:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 9 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Con la tabla en el documento deberá seleccionarse cada columna y escribir el ancho que deben
tener; en el caso de las de la orilla deberán ser de la cuarta parte del ancho de la tabla o sea, del
25%, mientras que la central será del 50% del ancho total:
De la misma manera se puede seleccionar la tabla completa para poder asignarle un color a los
bordes de las celdas:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 10 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
El siguiente paso será agregar el texto del contenido en las columnas donde tenga que estar, pero
el resultado puede ser algo sorprendente:
Para resolverlo es necesario seleccionar toda la fila, colocando el puntero en el borde izquierdo de
la misma éste cambiará a una flecha apuntando a la derecha, en ese momento se puede hacer clic.
Con la fila seleccionada deberá cambiarse la alineación vertical para que todo quede alineado a la
parte superior:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 11 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Lo siguiente será agregar las imágenes y asignar a los títulos su formato adecuado, por lo que
habrá que seleccionar cada uno y seleccionar la opción "Encabezado 2" para cada uno:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 12 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Ajustando todo con hojas de estilo
La mayor parte de la página ya está hecha. Con excepción del pie de página, que se agregará más
adelante, lo que sigue es realizar los ajustes necesarios mediante hojas de estilo (CSS).
Todos los navegadores tienen predefinida la apariencia de todo elemento que pueda aparecer en
una página, pero uno puede redefinir cualquiera de esos ajustes, ya sea modificando las
especificaciones para cualquier etiqueta HTML, o de elementos o regiones que sean únicos en la
página (como ya se hizo arriba con el encabezado y la barra de menús) o bien, definiendo "clases"
de objetos que deban compartir una misma apariencia.
Para continuar con esta página se van a modificar las características de los "Encabezados 2" , los
cuales son marcados en HTML con la etiqueta "h2". Para ello se creará una nueva definición a través
de la paleta "CSS", para después modificar el puntaje, color de la tipografía y el color de fondo de la
etiqueta:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 13 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
08-9-22 13:26
Page 14 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Si se hace clic sobre el botón "Aplicar" se podrán observar los cambios realizados, pero la tipografía
está prácticamente pegada al borde de la celda, para arreglar esto habrá que ajustar los espacios
alrededor de la tipografía, lo cual se obtiene en el panel "Cuadro":
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 15 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
De la misma manera se puede modificar la etiqueta "p", que es la que define los párrafos de texto.
Usando el mismo procedimiento anterior, sólo se modificarán los espacios alrededor de los
párrafos:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 16 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
En la misma dinámica se alterarán los espacios alrededor para las imágenes:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 17 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Ya va tomando mejor forma, pero el espacio entre renglones en el texto es un tanto cerrado, habrá
que ampliarlo un poco; para ello se editará nuevamente la etiqueta "p":
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 18 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
08-9-22 13:26
Page 19 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Continuan los ajustes de CSS
Ahora toca el turno nuevamente al encabezado, especialmente a la barra de menús. Cada una de las
opciones que aparecen ahí deben se comportarse como enlaces/ligas/vículos, solo que al hacerlo su
aspecto cambia un poco:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 20 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Para corregir esto es necesario cambiar la definición de la etiqueta "a", que es la que define los
enlaces, solo que en este caso hay una dificultad; si se realiza la modificación a dicha etiqueta el
cambio será para todo el documento, por lo que enlaces en otras secciones aparecerían igual que
en la barra de menús. La forma de evitar esto es que el cambio se efectúe únicamente para la bara.
La manera de indicar que una etiqueta se vea afectada solo cuando se encuentra en un lugar
específico es mediante el nombre que identifica a la sección seguido de la etiqueta que nos
interesa, en este caso será: #barraMenus a:
Para abrir espacio entre las distintas opciones es necesario agregar un "colchón" entre el borde y el
texto en si, pero hay que hacer ese ajuste en dos lugares, primero en la etiqueta que se está
modificando y también en el identificador de la barra de menús:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 21 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
08-9-22 13:26
Page 22 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Al revisar la página en el navegador podrá verificarse que los enlaces funcionen correctamente y
lleven a la página que corresponda según cada uno, pero hace falta algo, el puntero únicamente
cambia de flecha a mano pero alguna otra indicación visual hace falta.
Para agregar más señales visuales que indiquen que se trata de un enlace se puede agregar otra
modificación a la etiqueta "a", conla variante para cuando se pasa el puntero por encima del enlace.
Es igual que la definición anterior, pero en este caso se especifica como #barraMenus a:hover.
La parte ":hover" es la variante para cuando pasa el puntero sobre el enlace. La única modificación
será el color del fondo por uno un tanto más oscuro:
El siguiente paso ahora es arreglar el nombre del sitio, recorriendo ligeramente la imagen y
alineando el nombre a la parte inferior del bloque. Esto se hará ajustando únicamente los estilos de
los elementos que se encuentran en él, que en este caso es un "Encabezado 1" definido por la
etiqueta "h1" y una imagen, definida por la etiqueta "img".
Comenzado con la etiqueta "h1" lo que se hará es ampliar el espacio a la izquierda y bajar la
tipografía:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 23 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
El margen a la izquierda separa la imagen y el texto del borde, mientras que el margen inferior en
cero compenza por el margen que ya se había definido para todas las imágenes. El margen superior
empuja al texto hacia abajo, pero también a la imagen:
Para arreglar eso será necesario modificar el margen superior de la imagen para regresarla un poco;
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 24 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
no la misma cantidad de pixeles, sino una cantidad ligeramente menor para crear un margen más
reducido:
El resultado luce bastante mejor:
Últimos toques
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 25 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
La página está casi completa, faltando únicamente el pie, pero para agregarlo podemos hacer dos
cosas: Agregar otra fila a la tabla del cuerpo y fusionar las 3 celdas de la misma en una sola o bien,
agregar un elemento nuevo e identificarlo como "pie de página".
La primera opción pudiera ser sencilla, pero el resultado no sería del todo parecido a lo que en
Illustrator se había propuesto:
Aparte de que no tiene todavía formato la tipografía, existe un borde alrededor que no está
contemplado en el original.
La segunda opción requiere de agregar un elemento adicional, llamado "div", y agregar una nueva
definición a la hoja de estilos, pero la semejanza con la propuesta original se puede obtener de
mejor manera.
Para agregar el elemento "div" es necesario colocar el cursor al final del documento y hacer clic
sobre el botón para insertarlo:
La ventana que se presenta permite colocar el elemento al final de todo, asignarle un nombre, que
en este caso será "pie" , y directamente pasar a la definición de las reglas para la hoja de estilos del
nuevo elemento:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 26 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Entre las definiciones de estilos que se definirán, está el tamaño, color y alineación de la tipografía:
Adicionalmente se especifican algunas propiedades más de presentación. El ancho será igual al de
las tablas anteriores, pero hay que restar el grosor de los bordes, por lo que el ancho resultante
será de 1022 pixeles. También se define un margen superior y los bordes que tendrá todo:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 27 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Este elemento tiene borde alrededor igual que la tabla de contenido, con la "curiosidad" de que el
borde superior es del mismo color que el fondo de la página; con ese color y el margen negativo
que se indicó se tapa el borde inferior de la tabla y se logra el efecto necesario para que el diseño
sea como el que se hizo en Illustator:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 28 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Finalmente hay que ajustar los márgenes propios del texto contenido en el pie; de la misma manera
que se hizo con el encabezado, se especificará un estilo que sólo afecte al párrafo contenido en
este bloque. Eso se logra definiendo el estilo para "#pie p":
Los verdaderos últimos toques
Hasta este punto la página pareciera estar por completo terminada, todo está en su lugar, los
colores quedaron definidos y el aspecto general es muy cercano a la propuesta original, excepto
por unos pocos detalles… el encabezaddo debería ser de un color degradado en lugar de uno
plano. Lo mismo debiera ocurrir con el fondo de los títulos y el de la barra de menús:
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 29 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Para corregir lo anterior es necesario regresar a Illustrator y poner en documentos independientes
cada uno de los fondos que se van a utilizar.
Encabezado
Barra de menús
Opciones de menús
Títulos
En todos los casos el área de trabajo de cada archivo deberá ser de la misma altura que el fondo
respectivo, aunque el ancho no es forzoso que se corresponda también, puede ser igual a la altura
para formar un cuadrado, de esta manera es más fácil generar las imágenes de fondo cuando se le
pida al Illustrator "Salvar para Web…" .
Al final de ese proceso lo que se obtendrá serán 4 imágenes para utilizar en los elementos que
están faltando:
Encabezado
Títulos
Barra de menús
Opciones de menús
Para agregarlos es necesario modificar la definición de estilos para el elemento que nos interese,
por ejemplo para "#encabezado":
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 30 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Al repetir la operación los estilos "#barraMenus", "#barraMenus a" y "h2", finalmente llegamos
al resultado originalmente propuesto:
Una cosa más, al ponerle la imagen de fondo a las opciones de los menús el efecto que se tenía al
pasar el cursor sobre éstas ahora se perdió, por lo que será necesario hacer una imágen más para
usarla como fondo en el estilo "#barraMenus a:hover":
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 31 of 32
¿Cómo llevar un diseño de Illustrator a Dreamweaver?
08-9-22 13:26
Ahora si, está todo completo.
http://www.dis.uia.mx/profesores/alex/materias/2007o/dg5/illustrator_dreamweaver.php
Page 32 of 32