TUTORIAL DREAMWEAVER 4 BÁSICO

Transcripción

1 TUTORIAL DREAMWEAVER 4 BÁSICO Joan Lluis Ceprià Postgrau 2002/ Noves Tecnologíes aplicades a l educació

2 ÍNDICE 0 - CARPETA DE CONTENIDOS página LA PRIMERA PÁGINA WEB página ENLACES EXTERNOS página ENLACES INTERNOS página ENLACES CON IMÁGENES página CREACIÓN DE LA WEB página ESTRUCTURA DE MARCOS página Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

3 0 - CARPETA DE CONTENIDOS Creación de la carpeta El primer paso para crear nuestra web será crear una carpeta local en el ordenador donde se encontrarán todos los materiales necesarios para desarrollar el website. La carpeta la llamaremos, por ejemplo, The Beatles, y contendrá diferentes carpetas para cada uno de los conteniodos Contenido de la carpeta Dentro de la carpeta tenemos las diferentes secciones que compondrán nuestra web: Biografía, Discografía, Enlaces, Imágenes y Letras. 3 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

4 1 - LA PRIMERA PÁGINA WEB Abrir el programa Nuestro primer paso será, evidentemente, abrir el programa de edición web, en este caso, Macromedia Dreamweaver Interfície de Dreamweaver 4 Una vez cargado el programa, limpiaremos la interfície de ventanas, dejándo visibles úncamente dos de ellas: la ventana de propiedades y la ventana de objetos Dar nombre a la página En primer lugar bautizaremos la primera página web con el nombre de The Beatles - Biografía, dentro del campos Título, en la parte superior izquierda. Este será el título de la página, que aparecerá en la parte superior de los naevgadores cuando sea visitada. 4 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

5 1 - LA PRIMERA PÁGINA WEB Menú Guardar En primer lugar debemos asegurar el trabajo, guardando la página recién definida. Nos dirigimos al menú Archivo, clicando sobre Guardar como Guardar como La página debemos guardarla en la carpeta de contenidos creada anteriormente. Lo haremos con el nombre biografia.htm, en minúsculas y sin acentos Copiar el texto Ahora necesitamos el texto de nuestra primera página. Este texto se encuentra en un fichero.txt dentro de la carpeta contenidos, aunque no es necesario que el fichero se encuentre en este lugar. Clicando sobre el fichero, se abrirá el Bloc de Notas y podemos copiar el texto que en el siguiente paso pegaremos en la página web. 5 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

6 1 - LA PRIMERA PÁGINA WEB Pegar el contenido Ya en Dreamweaver 4, tan sólo debemos pegar el texto, que quedará como en la imagen de la derecha, sin ningún tipo de formato Dar formato al texto Para dar formato al texto utilizaremos la ventana de Propiedades. En ella encontramos el tipo de letra, el tamaño de la misma, la alineación... características muy parecidas a las de cualquier editor de texto Guardar la página Una vez hemos acabado de formatear el texto a nuestro gusto, volvemos a guardar el trabajo. 6 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

7 1 - LA PRIMERA PÁGINA WEB Ver el resultado Una vez concluída esta operación, es posible ver el resultado en un navegador, simplemente pulsando la tecla F12. Ya tenemos nuestra primera página web, tan sólo compuesta de texto, sin enlaces internos, externos, ni imágenes. Por supuesto, podemos añadir alguna imágen si lo creemos necesario para realzar el diseño. 7 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

8 2 - ENLACES EXTERNOS Nueva página Ahora vamos a crear una nueva página, esta vez con enlaces externos que proporcionarán más información sobre The Beatles. Primero, desde el menú Archivo abriremos un documento Nuevo. Después, lo bautizaremos con el nombre (desde el campo título) The Beatles - Enlaces Guardar la página Como de costumbre, guardaremos el trabajo en la misma carpeta que antes, con el nombre enlaces.htm Copiar el contenido Ahora debemos recoger los enlaces que aparecerán en nuestra página. Estos se encuentran en el fichero de texto Enlaces_Beatles. Los copiamos y pegamos en la página web. 8 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

9 2 - ENLACES EXTERNOS Dar formato al texto Una vez copiado el texto, al igual que antes, daremos formato al texto. En primer lugar, seleccionamos todo el texto y lo pasamos a Arial, tamaño 2, justificado a la izquierda. Después, seleccionamos cada uno de los títulos y los convertimos en negrita Añadir los enlaces Una vez formateado el texto, añadiremos los enlaces. Seleccionamos el lugar donde aparecerá el enlace (en este caso, el texto del enlace), copiamos y pegamos en la ventana de propiedades, dentro del campo vínculo. Para hacer que el enlace externo se abra en una nueva ventana, debemos indicar el destino del enlace, desde el campo Dest en la ventana de Propiedades, que en nuestro caso será _blank Ver el resultado Ahora sólo queda ver el resultado. Pulsamos F12 y comprobamos en el navegador que todo está en su sitio. 9 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

10 3 - ENLACES INTERNOS Nueva página De nuevo, necesitamos una página web en blanco para mostrar las letras de algunas canciones. En este caso, todas las letras apareceran en la misma página pero separadas del índice, de forma que la sensación del usuario es que está viendo páginas diferentes. Para conseguir este efecto, utilizaremos la herramienta ancla, que nos permite realizar enlaces internos, dentro de una misma página web Obtener el texto En primer lugar obtendremos los títulos de las canciones junto con los textos que se encuentran en la carpeta letras Crear el índice de títulos Con los títulos de las canciones crearemos un índice, dando un formato adecuado. Como se aprecia en la imagen, hemos titulado la página como Letras The Beatles, y a continuación, listamos los cinco títulos de las canciones Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

11 3 - ENLACES INTERNOS Espaciado Una vez tenemos el índice preparado, copiaremos las letras de las canciones. Para evitar que la primera canción aparezca en el espacio visual de la página, tendremos en cuenta dejar suficiente espacio en blanco entre el último título de la canción y la primera letra Copiar las letras A continuación copiaremos el resto de las letras, una tras otra, dando el formato adecuado al texto Colocar las anclas Con todas las letras copiadas (como puede apreciarse en la imagen, hemos centrado el texto de las canciones), empezaremos a colocar las anclas que nos permitirán referirnos a los enlaces internos. Colocaremos el cursor al lado del título, y desde la ventana de Herramientas, modo Invisibles, clicaremos sobre el icono de ancla Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

12 3 - ENLACES INTERNOS Nombrar las anclas Se abrirá una ventana de diálogo en la que se nos pide bautizar el ancla concreta. Es importante recordar con exactitud el nombre proporcionado (mayúsculas y minúsculas incluídas), para referirnos posteriormente. Realizaremos la misma operación con el resto de canciones Colocar el ancla volver Es importante que entre las canciones insertemos un enlace que nos permita retornar al índice de títulos, con lo que evitaremos que el usuario deba navegar utilizando el scroll de pantalla. Para ello, debemos colocar un ancla justo al lado del título inicial de la página, que hemos bautizado con el nombre de inicio Enlaces volver Ahora vamos a hacer que entre canción y canción dispongamos un enlace que nos lleve al inicio de la página. Escribimos volver, lo marcamos y nos dirigimos a la ventana de Propiedades. Desde el campo Vínculo introducimos el nombre del ancla a la que deseamos se diriga el enlace, en este caso al inicio de la página. Los enlaces internos se identifican mediante el signo # justo antes del nombre del enlace. Así, para ir al inicio de la página, introducimos #inicio Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

13 3 - ENLACES INTERNOS Enlaces hacia las canciones Ahora vamos a crear los enlaces a cada una de las canciones. Primero nos situamos en el índice, y luego marcamos el título de la canción. A continuación, desde la ventana de Propiedades, introducimos el nombre del ancla a la que se dirigirá el enlace. En la imagen se está realizando el primer enlace, con el nombre #hard. De la misma forma realizaremos el resto de los enlaces Resultado Una vez todos los enlaces creados, podemos pulsar F12 para comprobar el correcto funcionamiento de todos ellos Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

14 4 - ENLACES CON IMÁGENES Definir la nueva página A continuación vamos a crear la página Discografía. Como de costumbre, definiremos una nueva página con el nombre discografia.htm y la guardaremos junto con el resto de páginas. Esta página contendrá una tabla a modo de índice con las carátulas de todos los discos. Clicando sobre cada una de las carátulas nos dirigiremos hacia otra parte de la misma página en la que se encuentran los títulos de las canciones de cada uno de los discos Los contenidos Todos los contenidos de la página se encuentran en una carpeta llamada Discografía : archivos de texto que contienen las canciones y archivos de imágen de cada una de las carátulas Crear la tabla del índice En primer lugar debemos crear la tabla que contendrá las carátulas de los discos, una tabla de 4 columnas por 6 filas (tres para carátulas y tres más para los títulos). Crear una tabla se consigue mediante la ventana de herramientas, en modo común Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

15 4 - ENLACES CON IMÁGENES Definir la tabla Como comentamos en el punto anterior, ahora debemos definir los parámetros de la tabla: 6 filas y 4 columnas, sin relleno ni espaciado entre celdas (aunque cada uno puede probar los parámetros a su gusto). Tampoco hemos incluído un borde, por lo que la tabla será invisible a ojos del usuario que visite la página Insertar las imágenes Seguidamente situaremos el cursor en la primera celda de la izquierda para colocar el primer disco. Ahora, desde la ventana de herramientas en modo común, clicamos sobre el icono insertar imagen. Desde la ventana de diálogo que se abre seleccionaremos la imagen correspondiente. El proceso debemos repetirlo con el resto de imágenes Insertar los títulos Una vez tengamos todos los discos en sus celdas, utilizaremos las casillas vacías para introducir los títulos que se encuentran en el fichero discografia-thebeatles Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

16 4 - ENLACES CON IMÁGENES Formato del texto Con todos los títulos copiados seleccionamos toda la tabla para dar formato al texto: utilizaremos la fuente Arial, a tamaño 2 y centrada Introduciendo las canciones Una vez completado el índice, debemos colocar las canciones de cada uno de los álbumes. Como en el caso anterior, decidimos que las canciones estén dentro de la misma página, por lo que deberemos definir los enlaces internos. En primer lugar dejaremos suficiente espacio en blanco entre el índice y las canciones del primer disco para evitar que aparezcan en la misma pantalla del usuario. Colocamos la imagen del disco, el título, y a continuación, las canciones Formateando el texto Con todas las canciones de los diferentes discos introducidas, podemos continuar dando formato al texto. Seleccionamos todo el texto, lo centramos y le asignamos Arial tamaño 2.Destacamos en negrita el título del disco y la cara Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

17 4 - ENLACES CON IMÁGENES Enlace interno: volver al índice Ahora vamos a crear el enlace interno que nos permitirá volver al índice después de consultar cada uno de los discos. Para ello, colocaremos un ancla al principio de la página con el nombre indice (en minúsculas y sin acento) Enlace interno: volver al índice (2) Con la marca indice establecida podemos crear los diferentes enlaces. Nos colocamos al final del primer listado e introducimos volver al índice. Con el texto marcado, y desde la ventana de Propiedades, introducimos en el campo Vínculo el nombre de la marca a la que deseamos que volver, en este caso #indice. Repetimos el proceso al final de cada listado Anclas para los discos Ahora vamos a marcar cada uno de los discos con un ancla para referirnos a ellos desde el índice. El ancla la situaremos justo al lado del disco, repitiendo el proceso con cada uno de los discos: 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11 y Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

18 4 - ENLACES CON IMÁGENES Vínculos desde el índice Con todos los discos marcados volvemos al índice para entablecer los vínculos desde las imágenes. Clicamos sobre la primera imagen, y desde la ventana de Propiedades, introducimos en el campo Vínculo, el nombre de la marca a la que queremos que se desplace, en este caso la #01. No olvidemos que para hacer las referencias internas hay que utilizar el signo #. Repetiremos el proceso con cada uno de las imágenes Ver el resultado Finalizado el proceso, podemos ver el resultado desde la ventana de un navegador clicando sobre F Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

19 5 - CREACIÓN DE LA WEB Marcos Con las páginas que formarán nuestra web acabadas, podemos pasar al siguiente punto: crear las páginas de entrada y navegación de la web. Nuestra web utilizará un sistema de marcos para facilitar la navegación. Los marcos permiten que algunas partes de la pantalla permanezcan fijas mientras cambian los contenidos de otras. La web tendrá tres marcos: uno superior con la cabecera y el título, uno a la izquierza que contendrá el menú de navegación y uno central en el que se mostrarán las diferentes páginas que hemos creado hasta ahora Creación de la cabecera Cada uno de los marcos puede mostrar una página diferente a la vez, así que necesitaremos crear las tres primeras páginas que verá el usuario al entrar en la web. Empezaremos por la cabecera, una página que tan sólo estará formada por una imagen que contiene el título de la web. Desde Dreamweaver realizamos el mismo proceso que anteriormente: Archivo - Nuevo, títulamos la página (The Beatles - Cabecera), guardamos e insertamos mediante la ventana de Herramientas la imagen de cabecera, llamada Banner y que se encuentra en la carpeta de imágenes Propiedades de la página A continuación, accedemos a las propiedades de la página desde el menú Modificar, como muestra la imagen del punto 5.2. Debemos modificar los márgenes de la página para hacer que la imagen se ajuste a la perfección a la página y evitar los espacios en blanco. Desde la ventada de propiedades de la página, introducimos valor 0 tanto para el margen izquierdo como para el superior Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

20 5 - CREACIÓN DE LA WEB Guardar la página Ahora ya podemos guardar la página con el nombre que le habíamos asignado, cabecera.htm Página de contenido A continuación crearemos la página que se mostrará en el marco de contenidos en un principio (contenido.htm). Creamos una nueva página en blanco, la guardamos, e introducimos un título junto con una imagen (foto3, en la carpeta imágenes), para obtener el resultado de la imagen de la derecha Página de navegación Por último, debemos crear el menú de navegación. Este estará en una página llamada menu.htm. Creamos la nueva página y la guardamos con su nombre correspondiente. La página menú estará compuesta por una tabla que contendrá cada uno de los iconos de las diferentes secciones: biografía, discografía, enlaces y letras, además de la dirección de correo electrónico del creador. En primer lugar, modificaremos las propiedades, tanto para eliminar los márgenes como para introducir una imagen de fondo(carpeta imagenes / fondo-azul) Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

21 5 - CREACIÓN DE LA WEB Definir tabla Una vez tengamos el fondo azul, delimitaremos la tabla: 1 columna por 5 filas, sin bordes ni relleno, y 130 píxeles de ancho, que corresponde al tamaño de los iconos Iconos de navegación Ahora introduciremos cada uno de los iconos de navegación en su celda correspondiente. Las imágenes de los iconos se encuentran en la carpeta imágenes con los nombres: > boton-biografia.jpg > boton-discografia.jpg > boton-letras.jpg > boton-enlaces.jpg Correo Electrónico En la última celda dispondremos un enlace para nuestra dirección de correo electrónico. Escribimos Correo y desde la ventana de Propiedades, introducimos en el campo Vínculo la dirección asociada: mailto:micorreo@midominio.com 21 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

22 5 - CREACIÓN DE LA WEB Enlaces de los iconos Por último, tan sólo queda definir los enlaces para cada uno de los iconos. Escogemos la primera imagen y nos dirigimos a la ventana de Propiedades. Primero asignamos la página que corresponde al icono, en este caso biografia.htm, desde el campo vínculo. Ahora debemos indicar en qué parte (marco) de la página se abrirá. Si no lo hacemos así, se abriría en una nueva página. Para ello, en el campo Destino, escribirmos contenidos Resultado Repetiremos el proceso para cada uno de los iconos: BIOGRAFíA Vinculo: biografia.htm Destino: contenidos DISCOGRAFÍA Vinculo: discografia.htm Destino: contenidos LETRAS Vinculo: letras.htm Destino: contenidos ENLACES Vinculo: enlaces.htm Destino: contenidos Clicando sobre F12 podemos ver el resultado Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

23 6 - ESTRUCTURA DE MARCOS Página de marcos Para tener a punto nuestra web tan sólo nos queda definir la página de marcos que contendrá las diferentes páginas web de nuestro sitio. Para trabajar esta página, necesitaremos una nueva ventana, llamada Marcos, que haremos presente accediendo al menú Ventana/Marcos (o utilizando el atajo de teclado Mayúsculas+F2) Estructura de marcos A continuación, desde la ventana de Herramientas, modo Marcos, clicaremos sobre la estructura de marcos que deseamos utilizar Guardar el conjunto de marcos Con la estructura definida procederemos a guardarla, utilizando el menú Archivo/Guardar conjunto de marcos como... y nombrando la página con el nombre index.htm Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

24 6 - ESTRUCTURA DE MARCOS Definir marco superior Desde la ventana de Marcos, seleccionamos el conjunto externo (ver imagen) y indicamos el tamaño del marco superior (80 píxeles), sin bordes y con valor 0 de ancho Definir marco inferior Ahora repetiremos la operación con el marco inferior -que contiene los marcos menú y contenidos-. Seleccionamos y indicamos un tamaño de columna de 140 píxeles, sin bordes y con un Ancho de valor Cabecera Ahora vamos a definir el contenido de cada uno de los marcos. Empezamos con el marco cabecera. Desde la ventana de Marcos, clicamos sobre el marco superior; a continuación nos dirigimos a la ventana de Propiedades. Aquí debemos cambiar el nombre del marco por el de cabecera, eligir la página de orígen (cabecera.htm), disponer 0 como valores de ancho y alto del margen, seleccionar NO en Desplazamiento y Bordes, y marcamos Mismo Tamaño Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació

25 6 - ESTRUCTURA DE MARCOS Menú Realizaremos el proceso con el marco de menú. Desde la ventana de Marcos, clicamos sobre el marco izquierdo, y procedemos a renombrar el marco (menu), seleccionar el orígen (menu.htm); el resto de opciones son exactamente iguales que en el paso anterior Contenidos El último marco a definir es el de contenidos. Clicamos sobre el marco correspondiente en la ventana de Marcos, renombramos (contenidos) y le asignamos una página de orígen, que en este caso es contenido.htm. Ahora podemos proceder a volver a guardar todo el conjunto desde el menú Archivo/Guardar conjunto de marcos Probar la web En estos momentos ya tenemos nuestra web a punto, lista para ser probada. Nos dirigimos a la carpeta que contiene todas las páginas y clicamos sobre la página index.htm. Una vez abierta en el navegador, debería verse como en la imagen de la izquierda. Probaremos los diferentes enlaces para comprobar el correcto funcionamiento y ya está todo preparado para publicarse en Internet! 25 - Tutorial Dreamweaver Básico Postgrau 2002/ Noves Tecnologíes aplicades a l educació