APUNTES DE
DREAMWEAVER CLASE I
PROF. VIVIANA LLORET
http://aulamatic.blogspot.com
DREAMWEAVER Clase I: En esta clase aprenderemos a configurar un sitio local, pero antes definamos qué es un sitio web: Es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar y un objetivo común. Crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML, se guardarán dentro de esta carpeta, mientras que las imágenes, las animaciones, las hojas de estilo se crearán en nuevas carpetas dentro de la primera. Después se podrán copiar los archivos en un servidor web “sitio remoto”, lo que equivale a publicar el sitio. La página inicial se debe guardar con el nombre index.htm o index.html. En la actividad que debes desarrollar crearemos una página web llamada currículum_vitae; Crea en el disco local una carpeta con el nombre currículum_vitae_Apellido, y dentro de ésta crea otra con el nombre imagenes. Copia el archivo foto.JPEG en la carpeta imagenes y currículo.doc en la carpeta currículum_vitae_Apellido. Una vez creada las carpetas que formarán el sitio local, definimos el sitio en Dreamweaver. Para ello haz clic en Sitio > Nuevo Definir – Nombre del sitio – Carpeta raíz local ( haz clic en el icono con forma de carpeta y selecciona la carpeta currículum_vitae) – Carpeta predeterminada de imágenes (carpeta imagenes)
Dreamweaver
Prof. Viviana Lloret
La primer página la guardamos con el nombre index.html, para guardar la página, haz clic en Archivo > Guardar Para agregar nuevas páginas, haz clic en Archivo > Nuevo > HTML. Crear las siguientes páginas: Perfil, Experiencia_Laboral, Estudio, Computación, Cursos, hobbies, idioma. Como en todas las páginas debemos insertar una tabla de 8 filas y 2 columnas, aprenderemos a crear una plantilla (página especial en la cual se crea la tabla pedida, se crearán los hipervínculos a las demás páginas, y se configurará una región (Región editable) para agregar el contenido correspondiente a cada página. La guardamos como plantilla (Dreamweaver le agregará la extensión . dwt). Luego vincularemos la plantilla a cada página. Para ello haz clic en Archivo > Nuevo > Plantilla HTML. Para insertar la tabla Insertar > Tabla. Completamos las casillas según el modelo:
Dreamweaver
3
Prof. Viviana Lloret
Combinaremos las celdas de la segunda columna, Para ello: Selecciona las celdas de la segunda columna, haz clic en Combinar celdas.
En las celdas de la primer columna escribe los nombres de cada página creada: Home (index), Perfil, Estudios,… Hipervínculos: Los hipervínculos son enlaces que al hacer clic en ellos nos lleva a otra página o archivo.
Dreamweaver
4
Prof. Viviana Lloret
Insertaremos hipervínculos a las páginas creadas; para ello: Selecciona el texto Home, haz clic en el icono, en la ventana propiedades, con forma de carpeta que se encuentra a la derecha del cuadro de texto vínculo, haz clic en la página Index.html > Aceptar. Realiza el mismo procedimiento para insertar hipervínculos a las restantes páginas.
Modificaremos el color de fondo de la página, para ello: Ubica el cursor en un lugar libre de la página, haz clic en Propiedades de la página, en la ventana propiedades, selecciona el color #cccc66
Dreamweaver
5
Prof. Viviana Lloret
Modificamos, ahora, el color de fondo de la tabla, para ello, seleccionamos la tabla, esto lo podemos hacer ubicando el cursor en alguna celda, clic en Modificar > Tabla > Seleccionar Tabla
Selecciona como color de fondo #00cc33, y como color de borde #003300 (Modificar previamente el tamaño de borde a 1).
Por último, ubicamos el cursor en la segunda columna para crear una región editable, que contendrá el contenido variable de cada página.
Dreamweaver
6
Prof. Viviana Lloret
Haz clic en Insertar > Objetos de Plantilla >Región editable, en la ventana que se abre asígnale el nombre “contenido”.
Una vez lista la plantilla la debemos guardar dando el nombre, por ejemplo, plantilla.dwt (Las plantillas tienen la extensión .dwt y al crearlas se crea automáticamente la carpeta Templates ). Luego debemos vincular la plantilla a cada página, para ello: Nos ubicamos en cada página, clic en Modificar >Plantilla > Aplicar plantilla a la página, seleccionar la plantilla y listo. Una vez guardados todos los cambios, con la tecla F12 podrás visualizar la página creada en tu navegador. Por último modificaremos el alto de las celdas de la primer columna a 60, esto lo debemos hacer en la plantilla y luego al guardarla se nos preguntará si deseamos actualizar las páginas, a lo que responderemos que sí.
Dreamweaver
7
Prof. Viviana Lloret
Oprimimos F12, veremos
En la próxima clase completaremos la página agregando el texto (lo copiaremos del archivo currículum.doc) e insertaremos la foto foto.JPEG.
Dreamweaver
8
Prof. Viviana Lloret
Dreamweaver
9
Prof. Viviana Lloret