Diseño de páginas web

Transcripción

1 Diseño de páginas web Utilización de Dreamweaver Ricardo Esteban Alonso

2 Abrir el programa Una vez instalado el programa lo encontramos en la ruta Inicio > Programas > Macromedia Dreamweaver 4 > Dreamweaver 4. Resulta más práctico crear un acceso directo desde el escritorio. Al abrir el programa por primera vez se abre una ventana de forma automática: es la de ayuda (Bienvenido), que la podemos cerrar y ya no vuelve a aparecer. Primeros pasos con Dreamweaver 1-1

3 Crear el sitio (1) Crear una carpeta en disco C: C:\cursoweb Colgar de la carpeta creada otras como : C:\cursoweb\imagenes C:\cursoweb\documentos... Pulsar sobre Sitio nuevo Primeros pasos con Dreamweaver 1-2

4 Crear el sitio (2) Escribimos: Nombre del sitio: Jefatura de Estudios El resto se queda como está y damos a Aparece una nueva ventana, advirtiendo de que se va a crear la caché del sitio: Le damos a Primeros pasos con Dreamweaver 1-3

5 Disposición de mapa del sitio Debes indicar el nombre de la Página principal del sitio web en el cuadro de texto que lleva ese nombre. Los botones de Etiquetas de iconos permiten elegir el rótulo que aparecerá en cada icono de página del web: puedes elegir Nombres de archivo o sus Títulos de página. Al activar la casilla Mostrar archivos marcados como ocultos podrán verse dichos archivos ocultos en el mapa del sitio (se distinguen porque aparecen con el nombre en cursiva). Si se activa la casilla Mostrar archivos dependientes podrán verse todos los archivos que estén incluidos en cada página dentro del mapa del sitio(+). Primeros pasos con Dreamweaver 1-4

6 Crear el primer documento En la ventana del Sitio aparece con el nombre que acabamos de ponerle: Para crear el primer documento le damos a Archivo y en el menú siguiente pulsamos sobre Nuevo archivo. Aparecerá un documento, de nombre untitled.htm, colgando de la carpeta cursoweb. Es nuestro primer archivo, y vamos a cambiar su nombre por el de index.html Primeros pasos con Dreamweaver 1-5

7 La primera página (1) Tiene que aparecer una ventana (no necesariamente igual), donde se ve la barra de título: Todos los paneles flotantes que se hayan abierto podemos cerrarlos, si bien es interesante mantener siempre abierto el inspector de propiedades: Primeros pasos con Dreamweaver 1-6

8 La primera página (2) Escribimos un texto cualquiera: Página principal Departamento de Medios Informáticos Modificamos, utilizando el inspector de propiedades, las dos líneas anteriores: (si está oculto se abre dando a Ventana > Propiedades) Primeros pasos con Dreamweaver 1-7

9 La primera página (3) El siguiente paso puede ser poner un color de fondo a la página. Para ello pinchamos en un punto de la página donde no haya nada, y pulsamos el botón derecho del ratón, se nos abre un menú contextual, y elegimos Propiedades de la página, que al pulsar con el botón izquierdo del ratón nos aparecerá la ventana del margen derecho. En ella elegimos un color para el Fondo, y al mismo tiempo colocamos el Título a nuestro documento, que puede llamarse Primera Página. El resto lo dejamos como está, y le damos a En la barra de título aparece el nombre del documento, el nombre de la carpeta raíz y el nombre del archivo que contiene a la página. A continuación se ve un asterisco * (nos indica que este documento no lo hemos guardado todavía). Conviene ir guardando los cambios, y para ello damos a Archivo > Guardar Primeros pasos con Dreamweaver 1-8

10 Comprobar la página con los navegadores Desde el mismo Dreamweaver pulsando la tecla F12 se abrirá el navegador que tengamos configurado como predeterminado y podemos ver el aspecto de nuestra página. También podemos utilizar la ruta: Archivo > Vista previa en el navegador > iexplore Otra forma conveniente es ver nuestra página desde fuera de Dreamweaver, como puede ser desde el Explorador de Windows. Podemos ver en el explorador que se ha creado una carpeta sin nuestra intervención, de forma automática: _notes (de momento no hablamos de ella). Buscamos y hacemos clic sobre index. Sería interesante comprobar su funcionamiento con otros navegadores, como Netscape, Opera, Mozzilla,... Primeros pasos con Dreamweaver 1-9

11 Salir de Dreamweaver Varias formas, como por ejemplo con el botón Cerrar y nos aparece una ventana de advertencia Le damos a Sí y tendremos cerrado el programa. Otra forma es con la ruta: Archivo > Salir Volver a entrar a Dreamweaver Con el icono del escritorio o con la ruta ya descrita (diap.1) Puede que se abra la doble ventana de nuestro sitio, y entonces pulsamos sobre el documento index.html o bien que se nos abra un documento nuevo untitled, que no es de ningún sitio concreto: en este caso, le damos a Sitio > Abrir Sitio > Jefatura de Estudios. Si queremos abrir un documento nuevo: Archivo > Nuevo archivo Página web existente: Archivo > Abrir. Si el archivo se ha creado con Microsoft Word: Archivo > Importar > Importar HTML de Word Primeros pasos con Dreamweaver 1-10