Dreamweaver 3. Diseño y creación de páginas web

Transcripción

1 Dreamweaver 3 Dreamweaver es un editor profesional para crear y administrar páginas web. La interface gráfica y las herramientas que ofrece este programa permiten hacerlo de forma sencilla. Se puede bajar una versión de prueba por 30 dias para Pc o Mac de la siguiente dirección: Durante las clases de Dreamweaver se desarrollara un proyecto de interés turístico sobre la ciudad de Barcelona, el material (botones, imágenes, etc.) para realizarlo estará disponible en la red. Paralelamente cada persona trabajará en un proyecto personal sobre el tema que desee, donde pueda poner en práctica lo visto en las clases y crear su propio material. Diseño y creación de páginas web El desarrollo de un proyecto de páginas web comienza mucho antes de montar unas páginas y/o editarlas con un editor como dreamweaver. Este trabajo previo es definitivo para que haya un buen diseño tanto de navegación como de gráficos y textos, así como rapidez y versatilidad en el acceso. Los elementos previos a la creación de las páginas son: 1

2 Mapa de navegación: cómo va a estar distribuida la información dentro de las páginas y dónde va a estarlo. Tener definida la navegación y el lugar donde va a estar es importante porque el editor tendrá esta información de la misma forma y con ella se podrá hacer la edición y actualización de las páginas y los enlaces de forma automática. Además, todos los elementos utilizados tanto las páginas, como los gráficos, sonidos, etc., para ser localizados dentro de la web tienen una dirección y esta dirección depende de la estructura de navegación y del lugar donde se guarde, por tanto, si la dirección esta errada no se podrá encontrar el elemento que se busca. Diseño gráfico: el diseño previo de las páginas, no obligatorio pero si muy remendable, (no de todas, usualmente se hace de la página principal y de alguna otra) usualmente con un programa gráfico como el photoshop o el illustrator, brinda la oportunidad de experimentación y creatividad que el editor no permite, pruebas de color, fondos, botones de navegación, fuentes, diagramación, etc. Otra razón importante para este diseño previo es la distribución del espacio de la página en el editor, la forma y el lugar como se verá la información a medida que se vaya navegando: la utilización y el número de frames y/o capas, la apertura de nuevas ventanas, las partes de la pantalla que serán estáticas y las que no, etc. Además, de este boceto se podrán sacar los elementos necesarios para utilizarlos en la creación de las páginas como los botones, rollovers, logos, etc. Cuando estos elementos están definidos se puede pasar al editor. 1. Creación de un nuevo documento Al iniciar el programa se abrirá un nuevo documento sin título y tres ventanas distintas (se abren desde window en el menú superior). 2

3 La ventana de objetos (izquierda) que permite incertar imágenes, capas, líneas de separación, applets de java, animaciones, etc.,por medio de una interface gráfica (estos elementos también pueden insertarse desde insert en el menú superior). 1 ; la ventana de propiedades (inferior), que brinda toda la información sobre cualquier elemento cuando este se encuentra seleccionado y la ventana que contiene botones para abrir y cerrar diferentes tipos de ventanas o paletas: mapa de navegación, estilos, comportamientos, historia, fuente de html, etc. (debajo de la ventana de propiedades). Antes de crear un nuevo documento se debe definir el folder donde se guardaran las páginas. Para hacerlo se clica en site/new site y aparecerá la siguiente ventana, En ella se define el nombre de la carpeta (site name), ciudad en este caso, (es recomendable no usar nombres de más de 8 caracteres, no mezclar mayúsculas y minúsculas ni guiones o barras o carateres de este tipo, ya que pueden no ser aceptados o presentar problemas, por el programa o por el servidor, mucho más cuando se trabaja en Mac. En el Site Name no influye esto porque no es el nombre de una carpeta ni de una página) y el lugar donde se encontrará esta carpeta (Local Root Folder), clicando sobre el ícono de carpeta que se encuentra a la derecha se podrá llegar al sitio donde se ha decidido que esten ubicadas las páginas, allí se abrirá una carpeta con el nombre ciudad y dentro de ella estará el proyecto, clicando sobre select. Al hacerlo se abrirá una pequeña ventana preguntando si debe crear un espacio para proyecto, de tal manera que el Dreanweaver pueda guardar los links, hacer el mapa de navegación y actualizarlo automáticamente con cualquier cambio que se haga. Clicar sobre create. Se abrirá la ventana site ciudad. Si se clica sobre el botón que debe abrir el mapa de navegación dirá que no puede mostrar nada porque aún no se ha creado el index o página inicial. 1 El Dreanweaver que se utiliza es una versión de prueba tomada de internet en inglés. 3

4 Teniendo seleccionada la carpeta ciudad al lado derecho de esta ventana, ir a File/New Folder", de esta forma se crearán las carpetas que sean necesarias en el proyecto, en este caso, hoteles, lugares, enlaces e imágenes (sin tilde!). Página inicial, index.html Para esta página se utilizarán frames. Los frames son áreas de navegación dentro de una página HTML. Cada frame puede cargar dentro de si un documento HTML distinto. Cuando se usan frames se definen dos tipos de elementos, el primero, un documento ( Frame set ) con el número de frames, su posición y tamaño y otros documentos correspondientes al contenido de cada frame, estos últimos vienen a ser como hijos del primero. Hay tres formas de crear frames en un documento: - Ir a insert/frames. Aparecerá una ventana lateral con las disposiciones posibles que pueden tener los frames, clicar sobre top. Una línea gris rodeará la página y la dividirá en dos. - Ir a window/frames en el menú superior. 4

5 En la ventana frames aparecerán los dos frames que se tienen hasta ahora. Clicar sobre mainframe. La línea punteada bordeará sólo el frame de abajo. Teniendo oprimida la tecla alt, ir a uno de los extremos de la página, aparecerá una flecha, desplazar la flecha hacia el centro, de esta manera se crean un frame más. - Insertarlos con la interface gráfica de la ventana de objetos del Dreamweaver. Hay que tener en cuenta que al salvar este documento HTML realmente se están salvando cuatro documentos HTML distintos, los correspondientes a los tres frames y aquel que los contiene (FrameSet). Para ver la selección de cada uno clicar F12. Es la tecla rápida con la que se visualiza en el navegador lo que se esta haciendo en el Dreamweaver. (En el menú superior File/Preview in Browser aparece una ventana con el navegador que pueda estar por defecto y Edit Browser List, donde se puede añadir el navegador que se quiera. Es importante tener los dos navegadores más usados usualmente, Explorer y Netscape, mientras se diseñan páginas para comprobar si lo que se hace funciona en los dos de forma correcta). Para visualizar cualquier documento es necesario que este salvado así que el programa preguntará si debe hacerlo y primero seleccionará con una línea toda la página (FrameSet), y aparecerá la ventana SaveAs. Ir a la carpeta ciudad y salvar con el nombre index.html. Luego seleccionará el frame inferior-derecho, salvar como derecha. Luego el de la izquierda-inferior, salvar como menu (sin tilde). Luego seleccionará el frame superior, salvar como superior. Es posible que se vea una página en blanco, puede ser que los frames no tengan borde. Para comprobarlo ir a la ventana Frames y clicar sobre uno de ellos. En la ventana de propiedades aparecerán las características correspondientes a este frame (nombre, clicar sobre el frame superior y llamarle 1, al izquierdo 2 y al derecho 3, ver cómo cambian los nombres en la ventana Frames ; Src la dirección dónde se encuentra el frame; Borders si se quieren o no, Scroll en los frames 1 y 2 colocar no y en el 3 default; No Resize si se quiere que el tamaño de los frames pueda ser cambiado en el navegador, hacer el 1 y el 2 no cambiables, Border Color color de los 5

6 bordes si se quiere), pero no el ancho de los bordes, para verlos clicar sobre el borde exterior del documento mayor, la selección se verá distinta, la línea negra será de mayor grosor. En la ventana de propiedades en Border width se verá el ancho del frame, si no se quieren bordes colocar 0 (cero) y clicar. En esta ventana también se puede cambiar el tamaño del frame Row, las unidades en las que se hace la medida que afecta cómo se vea en el navegador, en pixels y porcentaje la medida del frame se mantendrá de acuerdo al tamaño de la pantalla del navegador, si es relativa la medida no se mantendrá. Probar las tres cambiando la medida de la pantalla en el navegador. Si ahora se abre la ventana del Site/Open Site/ciudad en el menú superior y se clica sobre el botón del mapa aparecerán los documentos que se tienen hasta ahora con la estructura de árbol correspondiente. Página de Propiedades Clicar sobre el frame superior del documento. Ir a Modify/PageProperties en el menú superior. (En este caso se hace con el frame pero son las mismas propiedades para cualquier página HTML). 6

7 Aparecerá la página de propiedades Page Properties. El título puede ser cualquiera, mejor que se corresponda con el nombre del documento, en este caso superior; Background Image, si se tiene una imagen para colocar como fondo; color del fondo, del texto, los links, las márgenes, el tipo de letra y Tracing Image la imagen del diseño previo que puede ser usada como guía para el diseño en el Dreamweaver, no se ve en el navegador. Aplicar las propiedades a los tres frames y verlo en el navegador. Tablas Las tablas se usan para disponer las imágenes y los textos dentro de la página conservando y ayudando en la diagramación (el otro elemento que se utiliza son las capas que se verán más adelante). Sin las tablas ubicar una imagen o un texto en la página tiene mucha dificultad y muy pocas posibilidades, con ellas hay multiples posibilidades pudiendo utilizar tablas dentro de tablas. Para insertar tablas se puede usar la ventana de objetos o el menú superior Insert/Table. En esta ventana se elige el número de filas y columnas, el ancho de la tabla, el ancho y el alto de las celdas, el tipo de medida de la tabla (que de igual forma que los frames afecta cómo se vean en el navegador, si la medida es en pixels las medidas de la tabla son exactas y no cambian ni se adecuan al tamaño de la pantalla del navegador manteniendo el diseño, si la medida es un porcentaje pasa todo lo contrario). La tabla tendrá cindo filas y una columna. Al seleccionarla aparecerá la ventana de propiedades. Escribir en cada celda inicio, hoteles, lugares, enlaces y contacto. Seleccionar el texto y aparecerá la ventana de propiedades con sus características. Para quitar una fila de la tabla se selecciona y se borra, para añadir filas o columnas puede hacerse desde la ventana de propiedades cambiando el número o desde el 7

8 menú superior, Modify/Tables/Insert Rows or Columns cuando se quiere un número distinto a uno de filas o columnas y un lugar especifico. Imagen Para insertar una imagen puede utilizarse la ventana de objetos o el menú superior Insert/Image y seleccionándola aparecerá la ventana de propiedades con sus características correspondientes