Practicas de Dreamweaver

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

U N ID

D D I D Á C T IC IC Di s eñ o  d d e  p p ág i n as  W Web  c c o n  D Dr eam Weav er  

1. Actividades a desarrollar

Actividad

Nivel dificultad

Página

Int Introducción. roducción. Nuestr Nuestra a pri prim mera página Web El área de trtrabajo abajo de DreamW DreamWeaver

3 sobre 10 2 sobre 10

145 145

Defifinici De nición ón de nuestr nuestro o sitio sitio local

4 sobre 10

146

Crear la página pri principal ncipal del sitio sitio

3 sobre 10

147

Guardando el documento documento

2 sobre 10

147

Defifiniendo De niendo el títítul tulo o de página del docum documento ento

2 sobre 10

147

Disposición de la página

4 sobre 10

148

 Añ  Añadir im imá ágenes

4 sobre 10

150

 Añ  Añadir te texxto

4 sobre 10

151

 Ap  Apliliccar fo form rma ato al te texxto

4 sobre 10

152

Crear imágenes de sustituci sustitución ón

6 sobre 10

152

 A  Ag gru rup par celd lda as en una ta tab bla de dis isp posició ición n

5 sobre 10

154

Trabajar en la vista vista estándar

4 sobre 10

154

 Añ  Añadir relllle eno de celd lda as

5 sobre 10

154

Crear una planti plantilllla a

6 sobre 10

155

 A  Ap pliliccar la pla lan ntill tilla a a una nueva págin ina a

7 sobre 10

156

Vincular Vincul ar los docum documentos entos

6 sobre 10

157

Ver los archivos del sitio sitio

4 sobre 10

158

Insertar Insert ar objetos Flash

6 sobre 10

159

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    44 144

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

2.- Introducción. Nuestra primera página Web

Trataremos a lo largo de este primer capítulo de introducirnos en el mundo de la creación de páginas Web mediante la herramienta Macromedia Dreamweaver. Se trata de crear una tarjeta de visita digital de nuestro Instituto en formato “html” que pueda ser visualizada en cualquier navegador y que después situaremos en Internet. 3.- El área de trabajo de Dreamweaver

Comenzaremos con una breve introducción al área de trabajo de Dreaweaver. Cuando inicia Dreamwaver se abrirán los siguientes elementos de trabajo:

Barra de herramientas Ventana de documento Panel de objetos Panel flotante

Inspector de propiedades propiedades

La ventana de documento muestra el documento actual mientras lo está creando y editando. El panel Objetos contiene iconos en los que puede hacer click para insertar objetos en el documento y para cambiar su forma de trabajar con el mismo. Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilo HTML y el inspector de código, que le permiten trabajar con otros elementos de Dreamweaver. La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados con mayor frecuencia. El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    45 145

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

Dreamweaver puede mostrar un documento de tres formas distintas: vista de Diseño, vista de Código y una vista combinada en la que se muestra tanto el diseño como el código. En la vista de Diseño se puede dos formas distintas de trabajar:  

La vista de Disposición que permite diseñar el formato de una página, insertar gráficos, texto y elementos multimedia.

 

En la vista Estándar se puede crear capas, crear documentos con marcos, crear tablas y aplicar otros cambios a la página.

4.- Definición de nuestro sitio local

 A  An nte tess d de e co comenzar a tra trabaja jarr es imp imprescin ind dib ible le ccre rea ar un ssititio io lo loccal media ian nte el el cual in ind dic ica aremos a Dreamweaver el lugar en el que tenemos intención de almacenar todos los archivos de un sitio concreto. Para trabajar de manera eficaz con Dreamweaver, defina siempre un sitio local para cada sitio Web que cree. Crearemos nuestro sitio local siguiendo los siguientes pasos: 1º.- En primer lugar crearemos la carpeta en la que alojaremos todos los archivos y carpetas relacionados con nuestra página Web. Crear, por tanto, la carpeta Página Web, en la que ubicación que estimes más oportuno, por ejemplo, en Mis Documentos. 2º.- A  A contin tinuació ión n añade en la nueva carp rpe eta creada todos los archivos y carpetas que acompañan a este Unidad Didáctica. 3º.- Si no se encuentran abierta, inicia la aplicación DreamWeaver. En su ventana de trabajo abre el menú Sitio   y haz clic en la opción Sitio Nuevo...  4º.- Surge el cuadro de diálogo Definición de sitio . Selecciona Datos locales   en la lista Categoría. 5º.- En el campo Nombre del sitio , escribe: Web del Instituto. El nombre de sitio permite identificarlo y seleccionarlo fácilmente en la lista de sitios que ha definido. 6º.- A  A contin tinuació ión ne esspecifific ica are rem mos la la ca carp rpe eta ra raíz íz de n nu uestro tro ssititio io Web, pa para ellllo o ha haz cclilicc en en e ell ic ico ono de de carpeta situado a la derecha del campo Carpeta raíz local   y localiza, mediante la ventana Elegir carpeta local , la carpeta Página Web, creada anteriormente. 7º.- Por último marca la opción Activar caché para crear un archivo de caché para el sitio. Al crear un caché para los archivos de nuestra carpeta de sitio, se establece un registro de los archivos existentes de modo que Dreamweaver pueda actualizar rápidamente los vínculos al mover, cambiar el nombre o eliminar un archivo. Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    46 146

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

  8º.- Haz clic en Aceptar  para  para cerrar el cuadro de diálogo.

9º.- Por último, haz clic en el botón Aceptar  del  del mensaje que nos indica que se creará el archivo caché inicial del sitio. La ventana Sitio  mostrará a continuación una lista de todas las carpetas y archivos contenidos en el sitio local. La lista también actúa como administrador de archivos, ya que permite copiar, pegar, eliminar, mover y abrir los archivos del mismo modo que en el Explorador de Windows.

5.- Crear la página principal del sitio

Una vez establecida la estructura para nuestro sitio, en la que se almacenarán las páginas y activos del mismo, crearemos nuestra primera página, es decir la página principal para el sitio. 5.1.- Guardando el documento

Empezaremos guardando el documento en el que se está trabajando: 1º.- Haz clic en la Ventana de documento  de DreamWeaver para activarla. La ventana Sitio  permanecerá abierta en segundo plano. 2º.-  Ab Abre el menú Archivo y elige la opción Guardar . 3º.- En el cuadro de diálogo Guardar como , Página Web, como seleccionaparalanuestro carpeta: ubicación documento.

4º.- En el campo Nombre de archivo , escribe: index.htm. Este nombre es muy habitual para las páginas principales o de inicio de un sitio Web.  5º.- Para terminar, haz clic en el botón Guardar . 5.2.- Definiendo el título de página del documento

 A pesar de de que el d do ocumento ya posee un nombre de arch rchiv ivo o además necesita ita un títu título lo de págin ina a que ayudará a los visitantes a identificar la página están título de aparece de título del título navegad navegador or ydel en sitio la lilista sta de m marcadores. arcadores. Daremo Daque remos s un título títviendo: ulo a laelpágina delpágina sigui siguiente ente m modo: odo: en la barra

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    47 147

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

1º.- Si la barra de herramientas no está visible, abre el menú Ver  y  y elige Barra de herramientas .

2º.- En el campo Título  escribe: Página Principal del Centro 3º.- Guarda el archivo, siguiendo los pasos del apartado anterior. 5.3.- Disposición de la página

El término disposición de páginas hace referencia a la apariencia de las páginas en el navegador, es decir, a aspectos tales como la ubicación de los menús o las imágenes. Dreamweaver ofrece la vista de Disposición que permite diseñar una página utilizando Tablas de disposición en cuyo interior serán alojadas una serie de celdas de disposición, en las cuales iremos situando los contenidos del documento. Empezaremos, por tanto, situándonos en la vista de Disposición. Para ello abre el menú Ver  y  y dentro del apartado Vista de tabla elige la opción Vista de disposición  o haz clic en el botón Vista de disposición  del panel Objetos. Icono Dibujar celda de disposición Icono Dibujar tabla de disposición Icono de vista de Disposición

 A la la h ho ora de dis dise eñar la p pá ágin ina a, p pie ien nsa e en n té términ rmino os de de u un na ccu uadríc rícula de ffilila as y co colu lum mnas. E Ell u usso d de e múltiples tablas de disposición aísla secciones de la disposición para evitar que se vean afectadas por otras. Crearemos a continuación una única tabla de disposición que contendrá los elementos de nuestra página Web. Para ello hemos de seguir los siguientes pasos: 1º.- Si aún no están abiertas, abre las siguientes herramientas del área de trabajo:    

El panel de Objetos (elige Ventana > Objetos) El Inspector de propiedades (elige Ventana > Propiedades)

2º.- En el panel Objetos , haz clic en el icono Dibujar Tabla de Disposición . 3º.- Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma de una herramienta de dibujo (una cruz pequeña). Ahora haz clic en la esquina superior izquierda del documento y arrastra el ratón para dibujar una tabla de disposición, no importa el de qué tamaño.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    48 148

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

4º.- Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello utilizamos la Ventana de propiedades . En la misma introduciremos en los campos Ancho-Fijo: 750 y Alto:  1000

5º.- Haz clic con el botón derecho en el interior de la tabla de disposición recién creada. Aparece un menú, abre la línea Alinear  y  y haz clic en la opción Centro . Crearemos a continuación la estructura de nuestra página Web mediante celdas de disposición. Insertaremos la primera celda de disposición siguiendo los siguientes pasos: 1º.- En el panel Objetos , haz clic en el icono Dibujar Celda de Disposición . 2º.- Haz clic en la esquina superior izquierda de la misma y arrastramos el ratón para dibujar, con cualquier tamaño, una celda de disposición. 3º.- A   A contin tinuació ión n sele lecccio ion na la celd lda aq qu ue acabamos de de crea rear h ha acie ien ndo clilicc en en el p pe erím rímetro tro de la mis ism ma. Cuando una celda es seleccionada ésta es remarcada y aparecen unos cuadrados cuadrados en los extr extremo emoss de la misma y en el centro de sus lados. 4º.- Cambiamos a continuación las dimensiones de la celda utilizando la ventana de propiedades. Introducimos los siguientes los valores Ancho-Fijo:  750 y Alto: 150

5º.- documento, Repetimos los anteriores para crear resto de celdas que constituyen la disposición del de pasos manera que lleguemos a el obtener la siguiente estructura y con las siguientes dimensiones. (El diseño del documento se encuentra en la siguiente página) DIMENSIONES DE LAS CELDAS Celda 1: 750 x150 Celda 5: 325 x 200 Celda 9: 180 x 72 Celda 2: 750 x 25 Celda 6: 750 x 80 Celda 10: 180 x 72 Celda 3: 325 x 200 Celda 7: 34 x 288 Celda 11: 180 x 72 Celda 4: 100 x 200 Celda 8: 180 x 72 Celda 12: 536 x 46

Celda 13: 510 x 26 Celda 14: 13 x 242 Celda 15: 510 x 216 Celda 16: 13 x 242

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Celda 17: 750 x 30 Celda 18: 38 x 151 Celda 19: 675 x 151 Celda 20: 37 x 151

Página:1 Página:    49 149

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

Distribución de las celdas de disposición

5.4.- Añadir imágenes

 A  Ah hora q qu ue ya se ha disp ispuesto la lass disti istin nta tass áre rea as de la pá pág gin ina a, añadire iremos el conten tenid ido o gráfi ráficco.  A  Ap pren rendere rem mos dos fo form rma as de in inssert rta ar iim mágenes en Dre rea amweaver: u utitililizzando el m me enú pririn ncip ipa al d de e Drea reamweaver y utilizando el panel Objetos. 1º.- Haz clic en cualquier lugar de la Celda 1, de manera que el punto de inserción se sitúa en la celda sin seleccionarla. 2º.-  Ab Abre el menú Insertar  y  y haz clic en la opción Imagen . 3º.- Seleccionar En el cuadro diálogo, origen de de imagen localiza en la carpeta: Imágenes, el archivo Encabezamiento.gif. 4º.- Haz clic en Seleccionar , para que la imagen quede insertada en la Celda 1. 5º.- Para insertar la fotografía del Instituto en la Celda 3  en primer lugar haremos clic en la misma. 6º.- Si la ventana Activos no se encuentra en pantalla, muestra la misma abriendo el menú Ventana  y marcando la línea Activos.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    50 150

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

7º.- En la lista que aparece en la ventana Activos  selecciona el archivo Fotografía-del-Instituto.gif   y arrástralo con el ratón hasta el interior de la Celda 3 para insertar la imagen. 8º.- Se puede comprobar que el tamaño de la imagen insertada es mayor que el tamaño de la celda que lo contiene. Ajusta, a continuación, en la ventana de propiedades, las dimensiones del logotipo, de manera que An: 325 y Al: 200

9º.-  Ab Abre el el menú Archivo y elige Guardar   para guardar los cambios realizados en la página principal. Conviene guardar los cambios efectuados cada cierto tiempo. Completaremos el contenido gráfico de nuestra página Web introduciendo en cada una de las siguientes celdas los archivos gráficos indicados, ajustando el tamaño de los mismos cuando corresponda. Celda 5: “Pabellones.gif” Celda Ce lda 8: “Info_a.jpg” Celda 9: “Ofeta_a.jpg” Celda 10: “Ins_a.jpg” Celda 11: “D_a.jpg” Celda 12: “Quienes somos.gif” Celda 19: “PiePagina.gif” 5.5.- Añadir texto

 A contin tinuació ión n añadirire emos te texxto a nuestr tra a págin ina a Web. En Drea reamweaver se puede escrib ibirir el co conten tenid ido o directamente en una celda de disposición o cortar y pegar en ella el contenido de otro documento. En este caso se añadirá texto a la celda de disposición copiando y pegando el contenido de un archivo de texto existente. 1º.- En el menú Archivo, selecciona la opción Abrir . En la carpeta Txt localiza el archivo: DatosCentro.txt. 2º.- Dicho documento se abrirá en una nueva ventada de Dreamweaver. 3º.- Selecciona todas las líneas de texto. 4º.- Copia el texto seleccionado en el portapapeles mediante el menú Edición  y la opción Copiar . 5º.- Cierra la ventana del documento DatosCentro.txt. A continuación pincha con el ratón en el int interi erior or de la Celda 6. 6º.- Mediante la combinación Edición  > Pegar , inserta el texto en la celda de disposición. 7º.- Repite el proceso anterior para insertar el contenido del archivo QuienesSomos.txt en la Celda 15.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    51 151

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

5.6.- Aplicar formato al texto

Es posible aplicar formato al texto en la ventana de documento definiendo sus propiedades en el inspector de propiedades. En primer lugar, seleccionaremos el texto al que se desea aplicar formato y, a continuación aplicaremos los siguientes cambios. 1º.- Si el inspector de propiedades no está abierto, abre el menú Ventana y marca la línea Propiedades . 2º.- Selecciona todo el texto de la Celda 6. 3º.- En el segundo menú emergente Formato  del inspector de propiedades que indica actualmente Fuente predet., selecciona la línea: Verdana, Arial, Helvetica, Sans-serif .

4º.- En el menú emergente Tam. elige el tamaño 2. El texto del documento se actualizará automáticamente para reflejar los cambios. 5º.- Marca los botones de alineación centrada y negrita. 6º.- Sigue los pasos anteriores para dar formato al texto de la Celda 15. 5.7.- Crear imágenes de sustitución

Las imágenes de sustitución cambian de apariencia cuando el puntero pasa sobre ellas. Utilizaremos el comando Insertar imagen de sustitución de Dreamweaver para crear cuatro imágenes de sustitución para los botones de navegación: Información del centro, Oferta educativa, Instalaciones y Departamento. Una imagen de sustitución consta de dos imágenes: aquella que aparece cuando se carga la página inicialmente en el navegador y la imagen que aparece cuando el puntero del ratón pasa por encima de la original. Es importante asegurarse de utilizar imágenes que tengan el mismo tamaño.  A contin tinuació ión n añadirire emos trtres im imágenes d de e sustitu titucció ión n para cada uno d de e llo os bo boton tones d de en na avegació ión n que aparecen en la página situados en las celdas de disposición 8, 9, 10 y 11. 1º.- En la ventana de documento pincha con el ratón en la imagen: Info_a.jpg incluida en la Celda 8 para seleccionarla. Elimina dicha imagen mediante la tecla ‘supr’ o mediante la combinación Edición   > Cortar ; de esta forma será posible insertar una imagen de sustitución. 2º.- Haz clic en la Celda 8, para indicar a Dreamweaver el lugar en el que deseamos insertar la imagen de sustitución.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    52 152

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

3º.- Para insertar una imagen de sustitución podemos optar por cualquiera de los métodos siguientes:  

En la categoría común del panel Objetos , haz clic en el icono Insertar imagen de sustitución.

   A  Ab bre

el el menú Insertar   y en la línea Imágenes Interactivas   selecciona la opción Imagen de sustitución.

4º.- En el cuadro de diálogo Inserta Insertarr imagen de sustituc sustitución ión  escribe Información en el campo Nombre de la imagen: . 5º.- En el campo Imagen original:   debemos indiciar qué imagen se debe mostrar cuando se cargue la página inicialmente. Para ello haz clic en el botón Examinar   situado a su derecha y selecciona el archivo Info_a.jpg. 6º.- A  A contin tinuació ión ne essta tab ble leccere rem mos la la iim magen que debe sse er m mo ostra trada ccu uando el us usuario pase e ell ra rató tón n por encima de la imagen original. Para ello haz clic en el botón Examinar  que  que se encuentra a la derecha del campo Ima Imagen gen de sustitución: sustituc ión:  y selecciona el archivo Info_s.jpg. 7º.-  As Asegúra rate te que la opció ión n “C “Ca arg rga a pre revvia de im ima agen de sustititu tucció ión n” es está sele lecccio ion nada, de de manera que la lass imágenes de sustitución se carguen cuando se cargue la página en el navegador, lo que garantiza una transición rápida entre imágenes cuando el usuario pasa el puntero por encima de la imagen original. 8º.- Por último haz clic en el botón Aceptar  para  para cerrar el cuadro de diálogo. 9º.- Puedes ver el resultado cargando la página en un navegador pulsando la tecla F12. Prueba a pasar el puntero del ratón por el botón de navegación “Información del centro”. Repetimos los pasos anteriores para situar imágenes de sustitución en las celdas 9, 10 y 11 y crear los correspondientes botones de navegación. Para ello utilizaremos las siguientes opciones: Celda 9:      

Nombre de imagen: Oferta Imagen original: “Oferta_a.gif” Imagen Ima gen de sus sustititución: tución: ““O Oferta_s.gif”

Celda 10:      

Nombre de imagen: Instalaciones Imagen original: “Ins_a.gif” Imagen Ima gen de su sustit stitución: ución: “I“Ins_ ns_s.gif” s.gif” Celda 9:  

Nombre de imagen: Departamentos

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    53 153

 

Tecnologías de la información – 1º de Bachillerato

     

Ricardo Rodríguez García  

Imagen original: “D_ Imagen “D_a.gif” a.gif” Imagen de sustitución: “D_s.gif”

5.8.- Agrupar celdas en una tabla de disposición

 A con co ntin tincrear. uació ión nAgrupar cre rea are rem m osceldas una ta tab bla una de de dtabla is isp posic ició n con la las s celd lda aseldeespaciado boton tones de de celdas navegacyió ión n que acabamos de las en leión permite controlar mover fácilmente las celdas como un grupo si desea cambiar la disposición de la página. Utilizaremos Dibujar tabla de disposición para agrupar las imágenes de los botones de navegación. 1º.- En el panel Objetos  selecciona Dibujar tabla de disposición   2º.- En la ventana de documento, sitúa el puntero del ratón en la esquina superior izquierda de la Celda 8. Con el botón izquierdo pulsado, arrastra el puntero hasta que la tabla contenga las cuatro celdas. 3º.- Suelta el botón del ratón para ver las celdas agrupadas en una nueva tabla. 4º.- También es posible agrupar una única celda en el interior de una tabla de disposición. Siguiendo los pasos descritos crea una tabla que contenga la Celda 15.  5.9.- Trabajar en la vista estándar

La vista de Disposición es útil para establecer el diseño de la página Web. Aunque puede ajustar la mayoría de los elementos de diseño en la vista de Disposición, algunos cambios deben realizarse en la vista Estándar. Cuando cambie a la vista Estándar, observará como Dreamweaver utiliza tablas para crear la estructura de la página. A continuación aprenderemos a trabajar con tablas para continuar refinando el diseño. 1º.- En el panel Objetos, haz clic en el icono de vista Estándar . Puedes observar como ahora la página queda dividida en una serie de tablas. 5.10.- Añadir relleno de celdas

Como se puede observar, el texto introducido en algunas celdas, está demasiado cerca de los bordes de las mismas. Añadiremos a continuación relleno a las celdas para dejar espacio entre el texto y las celdas. 1º.- En primer lugar seleccionamos la tabla en la cual se encuentra la Celda 15. Para ello en primer lugar pincha con el ratón en dicha celda. Observa el selector de etiquetas situado en la esquina inferior izquierda de la ventana de documento.

2º.- En dicho selector de etiquetas se muestra las etiquetas HTML de los elementos del documento.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    54 154

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

3º.- Haz clic en la etiqueta  situada más a la derecha. En la ventana de documento, aparecerá un borde alrededor de la tabla, al tiempo que el inspector de propiedades reflejará las propiedades de una tabla.

4º.- En el campo Rell. celda del inspector de propiedades escribimos 2 para añadir 2 píxeles de espacio entre el texto y las celda de la tabla. 5º.- Retorna a la vista de disposición. 6º.- Guarda el documento. Es conveniente guardar cada cierto tiempo los cambios realizados en el documento.  5.11.- Crear una plantilla

Se puede utilizar plantillas para crear documentos que tengan una estructura y una apariencia comunes. Las plantillas son útiles si desea asegurarse de que todas las páginas del sitio comparten determinadas características. En esta sección crearemos una plantilla a partir de la página principal y, a continuación, emplearemos la plantilla para crear una nueva pagina. 1º.- Una vez abierto el archivo de la página principal: index.htm, abre el menú Archivo y elige la opción Guardar Gua rdar como pplantilla lantilla. 2º.- En el campo Guardar como  cambia el nombre de la plantilla. Escribe indexPlantilla y haz clic en el botón Guardar . En la ventana de documento, un nuevo documento reemplazará al anterior: index.htm. En la barra de título del documento, observa quey una aparece el de identificador plantilla, , extensión archivo dedeplantilla de Dreamwe Dream weaver aver (dwt). En este punto, la plantilla nueva coincide con la página a partir de la cual ha guardado la plantilla. Una plantilla puede contener regiones bloqueadas y editables. El primer paso será crear regiones editables en la plantilla. 1º.- En primer lugar elimina las celdas de la 4 a la 16, junto con su contenido, así como las tablas de disposición que agrupan a varias de las celdas eliminadas. 2º.- A  A contin tinuació ión n harem remos que la lass celd lda as 2, y 3 sean regio ion nes editables. Pa Para ra ello pincha en e ell iinterior nterior de la Celda 2. 3º.- En el menú Modificar , abre la línea Plantillas   y elige Nueva región editable.  Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    55 155

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

4º.- En el campo Nombre:  escribe Region1 como nombre de esta región de la plantilla. A continuación haz clic en el botón Aceptar , para crear una región de plantilla. Observa la ficha que contiene el nombre de la región de plantilla. El marcador de posición también está rodeado por una línea de color azul claro que identifica los límites del área editable. 5º.- Repetimos los pasos anteriores con la Celda 3, dándole el nombre Region2 a la nueva región. 6º.- Elimina la imagen que contiene la Celda 3. 7º.- Selecciona la Celda 3 haciendo clic con el ratón en su perímetro. Sitúa el puntero del ratón en la esquina inferior derecha de la misma y arrastrando el ratón, modifica sus dimensiones, de manera que ocupe todo el espacio libre dejado por las celdas eliminadas. 8º.- A  A contin tinuació ión n, en su ventan tana de propie ied dades, esta tab blec lece el sig igu uie ien nte valo lorr #CCCC00 en al campo Fnd . 9º.-  Ah Ahora sele lecccio ion na la im ima agen sititu uada en la Celda 1. En el inspector de propiedades pincha en el icono de carpeta que se encuentra a la derecha del campo Origen .

10º.-  A  Ap pare recce el cuadro de diá iálo log go Seleccionar origen de imagen .  A  Ab bre la lis lista desple leg gable Relativa a:   y marca la línea Documento. 11º.-  Repite los dos pasos anteriores con la imagen situada en la Celda 19. 12º.-  Mediante la opción Guardar  del  del menú archivo, guarda el documento de plantilla que acabas de crear.  5.12.- Aplicar la plantilla a una nueva página

 A  Ah hora q qu ue ya ya he hemos de defin finid ido o la lass re reg gio ion nes e ed ditita able less d de e la p pla lan ntitilllla a, utitililizzaremos és ésta pa para ccre rea ar un una a página en la que se detallen la oferta educativa del centro. 1º.- En el menú Archivo elige la opción Nue Nuevo vo de plantilla p lantilla, para abrir un nuevo documento.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    56 156

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

 

2º.- En la lista Plantillas: del cuadro de diálogo Se Seleccionar leccionar plantilla pl antilla, selecciona la línea: indexPlantilla . 3º.- A  A contin tinuació ión n, haz clilicc en el botó tón n Seleccionar . La plantilla se aplicará al nuevo documento. 4º.- Guarda el documento, en la carpeta raíz de nuestro sitio, con el nombre OfertaEducativa.htm. (Recuerda: Archivo --> Guardar como...) 5º.- Pincha con el ratón en la celda editable “Región1” para situar el cursor en la misma. Inserta en dicha celda el archivo de imagen: “OfertaTítulo.gif” 6º.- Haz clic en el interior de la celda “Región2” para seleccionarla. A continuación vamos a incluir texto en dicha celda, ayudándonos de los botones de la ventana de propiedades que nos permiten incluir viñetas y avanzar y retroceder en la sangría del texto.

7º.- El texto a introducir es el siguiente: • 

E.S.O.

• 

Bachillerato Tecnológico, Bachillerato de Humanidades y Ciencias Sociales.

• 

Garantía Social Especial de Jardinería y Peluquería.

• 

Ciclo Formativo de grado Medio: “Técnico en montaje y mantenimiento de instalaciones de frío, climatización y producción de calor”.

1er Ciclo y 2º Ciclo. Disponemos de grupos de Diversificación, cuyo fin es ayudar a la obtención del título de Secundaria a los alumnos con dificultades de aprendizaje.

|VOLVER A LA PÁGINA PRINCIPAL| 8º.- Selecciona todo el texto que acabas de introducir y establece las siguientes propiedades para el mismo:

5.13.- Vincular los documentos del sitio

Veamos a continuación cómo podemos vincular la imagen de sustitución “Instalaciones” de la página pri principal ncipal que guía guía al visi visitante, tante, con el docu docum mento “Instal “Instalaciones.html” aciones.html” que acab acabam amos os d de e crear. 1º.-  Ab Abre o muestra tra en panta talllla a el archiv ivo o: “in “index.h .htm tm”. ”. 2º.- En la ventana del documento haz clic en la imagen de sustitución “Oferta” para seleccionarla.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    57 157

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

3º.-  Ab Abre el m me enú Ventana y selecciona la opción Propiedades , para abrir el inspector de propiedades si es que no está abierto. El inspector de propiedades muestra información acerca de la imagen.

4º.- En el inspector de propiedades, pincha con el ratón en el icono de carpeta situado a la derecha del campo Vínculo . 5º.- En el cuadro de diálogo Seleccionar archivo , busca el documento creado en el apartado anterior: OfertaEducativa.htm  y pulsa el botón Seleccionar . El nombre del archivo aparecerá en el campo Vínculo  del inspector de propiedades. 6º.- Comprueba el resultado lanzando la página principal a un navegador pulsando la tecla F12. Una vez mostrada la página en el navegador, haz clic con el ratón en la imagen de sustitución Oferta. 7º.- Repite los pasos anteriores con las siguientes imágenes de sustitución y sus correspondientes archivos:      

Información  Información.hmt Instalaciones  Instalaciones.htm Departamentos  Departamentos.htm

8º.- Veamos a continuación como vincular el archivo OfertaEducativa.htm  con la página principal. Abre el archivo OfertaEducativa.htm y selecciona el texto: | VOLVER A LA PÁGINA PRINCIPAL | 9º.- A  A contin tinuació ión n, en el in insspecto torr de pro rop pie ied dades, pin inccha con el rató ratón n en el ic ico ono de carpe rpeta que aparec rece a la derecha del campo Vínculo . 10º.-  En el cuadro de diálogo Seleccionar archivo , busca el documento: index.htm, que contiene la página principal y pulsa el botón Seleccionar . El nombre del archivo aparecerá en el campo Vínculo  del inspector de propiedades. 11º.-  Lanza la página a un navegador pulsando la tecla F12 y comprueba el funcionamiento de los cambios introducidos. 5.14.- Ver los archivos del sitio

Para ver una representación de alto nivel de la estructura de un sitio local utilizaremos: Ver mapa del sitio  de Dreamweaver. También se puede utilizar el mapa para añadir nuevos archivos al sitio, para añadir, eliminar y cambiar vínculos y para crear un archivo gráfico del sitio que podrá exportar e imprimir desde una aplicación de edición de imágenes. El mapa del sitio siempre muestra la página principal del sitio en la parte superior del mapa; bajo la página principal aparecen los archivos con los que ésta tiene vínculos. Hay varias formas de definir la página principal de un sitio. La forma más sencilla consiste en usar el menú contextual de la ventana Sitio.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    58 158

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

1º.-  Ab Abre el el menú Ventana  y elige la opción Archivos del sitio   para hacer visible la ventana Sitio . 2º.- En la lista Carpeta local  de la ventana Sitio , hacemos click con el botón derecho de ratón en el documento index.htm. 3º.-  Ap Apare recce un menú conte texxtu tua al, sele lecccio ion na Establecer como página principal . 4º.- A  A contin tinuació ión n, ha haz clic lic en el ic ico ono Mapa del sitio  situado en el área superior izquierda de la ventana Sitio . 5º.-  Ap Aparecerá la venta tan na Sitio  con dos vistas del sitio local: a la izquierda se muestra el mapa del sitio, que representa gráficamente la estructura actual del sitio, con index.htm como página principal; mientras que a la derecha se encuentra la lista de contenido de la carpeta local.

Un signo (+) situado junto a cualquier archivo del mapa del sitio indica que el archivo contiene vínculos con otros documentos. Al hacer clic en el signo (+) se amplia el mapa mostrando los archivos asociados, mientras que haciendo clic en el signo (-) se reduce el mapa del sitio. 5.15.- Insertar objetos Flash

Los objetos Flash son pequeños archivos gráficos SWF (Shockwave) que puedes crear mientras trabajas en Dreamweaver. En este caso vamos a crear un objeto de Botón Flash, que situaremos al final del documento principal del sitio y que después vincularemos con la revista digital del instituto. 1º.- En primer lugar abre el documento index.htm, si no se encuentra abierto. 2º.- Para darl darle e un aspecto aspecto más profesional, profesional, camb cambiar iarem emos os el color de fondo de la página. Ha Hazz clic clic con el el botón derecho del ratón en cualquier zona del documento.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    59 159

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

  3º.- En el menú contextual que aparece, escoge la línea Propiedades de la página. 4º.- En el campo Fondo   del cuadro de diálogo Propiedades de la página,  escribe el valor: #FFFF99 y pulsa el botón Aceptar . 5º.-  Al Al fin final d de e lla ap pá ágin ina a cre crea au un na n nu ueva cce eld lda a de de disposición cuyo tamaño será de 750 x 76. 6º.- Hacemos clic en el interior de la celda recién creada para situar el cursor en la misma. 7º.- En el panel Objetos , selecciona Insertar Botón Flash Flash .

8º.- En el cuadro de diálogo Inserta Insertarr BBotón otón Flash Flash  establece los siguientes valores en sus correspondientes campos.    

Estilo: Diamons Spinner Texto del botón: El Espejo digital

   

Fuente: Trebuchet MS Tamaño: 8   Vínculo: www.poblado.com/espejodigital    Color fondo: #FFFF99   Guardar como: Boton.swf 9º.- Haz clic en el botón Aceptar . 10º.-  Ap  Aparec recerá el nuevo botón tón Fla lassh que hemos creado en la celda de disposición seleccionada. Únicamente queda cambiar los valores de Ancho y Alto en la ventana de propiedades por los valores 330 y 70. 11º.-  Lanza la página a un navegador pulsando la tecla F12 y comprueba los resultados.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    60 160

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

6.- Capas

Una capa es un contenedor que puede alojar cualquier objeto HTML, que puede ser colocado en cualquier parte de la página. Las capas se denominan así, ya que pueden posicionarse en tres dimensiones. La tercera dimensión se denomina índice-Z y permite que las capas se solapen unas con otras. 6.1.- Creación de capas

Realizaremos, a continuación, un sencillo ejemplo en el que se podrá comprobar como es posible solapar dos imágenes contenidas cada una de ellas en capas distintas. 1º.- En primer lugar, crearemos un sitio nuevo para este ejemplo. 2º.-  Ab Abre el Explo lora rad dor de Win ind dows y cre rea a la carp rpe eta Capas. 3º.- Copia en dicha carpeta los archivos de imagen: logotipo.gif  y  y Fotografia-del-Instituto.gif .  4º.- Inicia la aplicación DreamWeaver y abre el menú Sitio. Elige la opción Sitio Nuevo... 5º.- En el apartado Nombre del sitio:  introduce el texto Capas.  6º.- Haz clic en el icono de carpeta que se encuentra a la derecha del cuadro de texto Carpeta raíz local   y selecciona la carpeta creada en el paso 2º.  7º.- Por último, haz clic en el botón Aceptar .  8º.- Haz clic en el icono Vista de Disposición .  6º.- clic En elenpanel , haz Objetos el icono Dibujar Tabla de Disposición . 7º.- Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma de una herramienta de dibujo (una cruz pequeña). Ahora haz clic en la esquina superior izquierda del documento y arrastra el ratón para dibujar una tabla de disposición, no importa de qué tamaño. 8º.- Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello utilizamos la Ventana de propiedades . En la misma introduciremos en los campos Ancho-Fijo: 750 y Alto:  1000

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    61 161

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

9º.-  Cambia al tipo de vista Estándar , haciendo clic en su icono  10º.-  Ab  Abre el menú Insertar  y  y elige la opción Capa.  11º.-  Ap  Apare reccerá un rectá tán ngulo que re rep presenta a la capa rec recié ién n crea reada. Arr Arra astra tra la mis ism ma hasta la esquina superior izquierda del documento. 

12º.-  Estando seleccionada la capa, en la Paleta Flotante de Propiedades establece los siguientes valores:    ID de capa: Logotipo     A  An n: 350px     A  Al:l: 139px 

13º.-  Haz clic en el interior de la capa y abre el menú Insertar , escoge la opción Imagen . 14º.-  Surge una ventana de navegación que permite seleccionar el archivo de imagen. En este caso selecciona el archivo Logotipo.gif  y  y haz clic en el botón Aceptar .  15º.-  A contin tinuació ión n y sig igu uie ien ndo lo loss pasos ante terrio iore ress crea rea una nueva capa que se sola lap pe con la anteri terio or y establece para la misma los siguientes valores:    ID de capa: Fotografia     A  An n: 350px     A  Al:l: 231px 

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    62 162

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

  16º.-  Inserta en la misma la imagen Fotografia-del-Instituto.gif . 

17º.-  Pulsa la tecla F12 para lanzar la página Web al navegador. Comprueba los resultados obtenidos.  18º.-  En este caso la imagen de la fotografía de Instituto se superpone a la del Logotipo. Para que el efecto sea el contrario debemos cambiar los valores del Índice-Z de ambas capas.   19º.-  Selecciona la capa Fotografia y sustituye en su Paleta de Propiedades el valor del Índice-Z por 1.  20º.-  Haz lo mismo con la capa Logotipo, pero en este caso el valor a introducir es 2. Pulsa F12 y observa los resultados.  7.- Comportamient Comportamientos os

Los comportamientos están constituidos por una serie de herramientas que empleadas conjuntamente son denominadas HTML Dinámico, ya que en él se puede cambiar la página una vez que ésta se ha cargado. Se pueden asociar una serie de acciones a determinados sucesos, como por ejemplo, al cargar la página, cuando el usuario haga clic con el ratón en un determinado objeto, etc. Ya has utilizado algunas herramientas de comportamiento predefinidas al insertar imágenes de sustitución. Un comportamiento, por tanto, puede ser asociado a una ecuación en la que si un evento le es sucedido a un determinado objeto, ocurre un comportamiento o acción.

Evento Eve nto + Objeto Objeto = Acci Acción ón 7.1.- Ejemplo de comportamien comportamientos tos

Veamos a continuación un sencillo ejemplo, en el que una misma imagen irá cambiando en función del botón por el que esté pasando el puntero del ratón. 1º.- En primer lugar, crearemos un sitio nuevo para este ejemplo. 2º.-  Ab Abre el Explo lora rad dor de Win ind dows y cre rea a la carp rpe eta Comportamientos. 3º.- Copia en dicha carpeta los siguientes archivos de imagen:          

Matema atematiticasB casBoton.gif oton.gif y Matemáti atemáticasC casCapa apa LenguaB Leng uaBoton.gif oton.gif y LenguaC LenguaCapa.gif apa.gif FisicaBoton.gif FisicaB oton.gif y FisicaC FisicaCapa apa.gif .gif InglesBoton.gif y InglesCapa.gif Fondo.gif

4º.- Inicia la aplicación DreamWeaver y abre el menú Sitio. Elige la opción Sitio Nuevo...  

5º.- En el apartado Nombre del sitio:  introduce el texto Capas. 

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    63 163

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

6º.- Haz clic en el icono de carpeta que se encuentra a la derecha del cuadro de texto Carpeta raíz local  y selecciona la carpeta creada en el paso 2º.  7º.- Por último, haz clic en el botón Aceptar .  8º.- Haz clic en el icono Vista de Disposición .  9º.- En el panel Objetos , haz clic en el icono Dibujar Tabla de Disposición . 10º.-  Mueve el puntero a la ventana de documento; el puntero del ratón adoptará la forma de una herramienta de dibujo (una cruz pequeña). Ahora haz clic en la esquina superior izquierda del documento y arrastra el ratón para dibujar una tabla de disposición, no importa de qué tamaño. 11º.-  Cambiaremos, a continuación, las dimensiones de la tabla de disposición recién creada, para ello utilizamos la Ventana de propiedades . En la misma introduciremos en los campos Ancho-Fijo:  450 y Alto:  200

12º.-  A con contin tinuació ión n, y media ian nte celdas de disposición   crea la siguiente estructura.  13º.-  Inserta cada de las siguientes imágenes en sus respectivas celdas:     

Celda 1: MatematicasBoton.gif   Celda 2: LenguaBoton.gif     Celda 3: FisicaBoton.gif     Celda 4: InglesBoton.gif     Celda 5: Fondo.gif  

14º.-  Cambia al tipo de vista Estándar , haciendo clic en su icono.  15º.-  Haz clic en cualquier zona en blanco del documento.  16º.-  A  Ab bre el menú Insertar  y  y elige la opción Capa.  17º.-  A  Ap pare reccerá un re recctá tán ngulo que representa a la capa recién creada.  A  Arr rra astra tra izquierda la mis ism madehlaascelda ta la5:e squin ina a superior

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    64 164

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

18º.-  Estando seleccionada la capa recién creada (si no lo está haz clic en su selector: rectángulos situado en su esquina superior derecha), modifica los siguientes valores en su paleta de propiedades:  

ID de capa: Fondo    A  An n: 300px    A  Al:l: 200px

19º.-  Haz clic en el interior de la capa que acabas de crear. Abre el menú Insertar  y  y activa la línea Capa. 20º.-  Selecciona esta nueva capa insertada y establece los siguientes valores en su paleta de propiedades:   ID de capa: Matematicas   Iz: 0   Sup: 0    A  An n: 300    A  Al= l=2 200

   

Im. Fondo: MatematicasCapa.gif Vic: hidden

21º.-  Haz clic en el interior de esta última capa creada. Abre el menú Insertar  y  y activa la línea Capa. 22º.-  Selecciona la capa y establece para la misma los siguientes valores:  

ID de capa: Lengua   Iz: 0   Sup: 0    A  An n: 300   A  Al= l=2 2Fondo: 00 do: LenguaC    Im. Fon LenguaCapa.gif apa.gif  

Vic: hidden

23º.-  Repite los pasos anteriores para añadir dos capas más, con sus correspondientes parámetros:    

ID de capa: Fisica Iz: 0   Sup: 0    A  An n: 300    A  Al= l=2 200   Im. Fondo: FisicaCapa.gif   Vic: hidden    

ID de capa: Ingles Iz: 0

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    65 165

 

Tecnologías de la información – 1º de Bachillerato Ricardo Rodríguez García  

    Sup: 0    A  An n: 300    A  Al= l=2 200   Im. Fondo: InglesCapa.gif  

Vic: hidden

24º.-  Pulsa F12 para lanzar la página en el navegador y comprueba los resultados obtenidos hasta ahora.  A contin tinuació ión n esta tab ble leccere rem mos lo loss comporta tam mie ien nto toss, qu que en este caso consis istitirá rán n en hacer ap aparec recer la la capa correspondiente que se encuentra oculta, cuando el usuario pase el ratón por encima de cualquier de las cuatro imágenes que hacen referencia a los departamentos. 1º.-  Ab Abre el menú Ventana  y elige la opción Comportamientos. Surge en pantalla la paleta que permite establecer acciones en función de determinados eventos. 2º.- Haz clic sobre la imagen MatematicasBoton.gif insertada en la celda 1, para seleccionarla. 3º.- Ha Hazz clic clic sobre el botón situado situado en la paleta Comportamientos. Se abrirá una lista en la que debes elegir la opción Mostrar-Ocultar capas . 4º.-  Ap Apare recce un cuadro de diá iálo log go que nos perm rmitite e seleccionar aquellas capas que queremos mostrar u ocultar, según corresponda. 5º.- Selecciona la línea Capa “Matemáticas” en capa “Fondo” y haz clic en el botón Mostrar. 6º.- Comprueba como se ha añadido a la línea anterior la palabra (Mostrar).  

7º.- Aceptar  Por último, confirma con el botón . 8º.- En la paleta Comportamientos, habrá surgido una línea que hace referencia a esta acción. Haz clic sobre la misma para seleccionarla si no lo estuviera. 9º.- Ha Hazz clic clic en el b botón otón que abre la lista lista desplegable desplegable de eventos. Selecciona la línea OnMouseOver . 10º.-  Vue Vuelve lve a hacer hacer clic clic sobre el botón sit situado uado e la paleta Comportamientos. Haz clic sobre la línea Mostrar-Ocultar capas . 11º.-  A  Ap pare recce el el m mis ism mo cuadro de diá iálo log go ante teririo or. La lín línea a sele lecccio ion nar es es lla a misma de antes, pero en este caso y una vez seleccionada, haz clic en el botón Ocultar . Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    66 166

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

12º.-  Por último, haz clic en el botón Aceptar  para  para confirmar los cambios. 13º.-  En la paleta Com Comportamientos portamientos haz clic clic e en n el botón de la línea línea que se encue encuentra ntra seleccionada, para abrir la lista desplegable de eventos. Selecciona la línea OnMouseOut . 14º.-  Pulsa F12  y comprueba que ocurre cuando se pasa el ratón por encima de la imagen MatematicasBoton.gif. 15º.-  Repite los pasos anteriores para establecer los comportamientos asociados a las imágenes: LenguaBoton.gif, FisicaBoton.gif y Ingles.gif, con sus capas correspondientes. 8.- Marcos

Las páginas Web que usan marcos pueden ser extremadamente versátiles, ya que permiten mantener fijas partes del sitio web, como un logotipo o las barras de navegación, mientras permiten que otras partes si cambien el contenido. Una página basada en marcos está dividida en varias ventanas con ventanas dentro.  A  Au unque una págin ina a basada en marc rco os actú túa a como una sola págin ina a web, ca cada marco rco contitie ene un solo documento HTML, que puede incluir contenidos completamente independientes y barras de desplazamientos independientes. Lo que mantiene unidos estos documentos se llama documento de definición de conjunto de marcos  o página de conjunto de marcos . 1º.- En primer lugar copia la carpeta Marcos , con todos sus archivos y subcarpetas, en el disco duro de tu ordenador. 2º.-  Ab Abre la apliliccació ión n Dre rea amWeaver. Ante tess de hacer otra cosa, crearemos un nuevo sitio para la página web con marcos que crearemos a continuación.  

3º.- A  Ab bre el me m nuevo...   enú Sitio  y elige la opción Sitio 4º.- En el apartado Nombre del sitio , introduce el texto: Marcos . 5º.- Haz clic en el icono de carpeta situado a la derecha de la caja de texto Carpeta raíz local. Selecciona la carpeta Marcos   pegada en el paso 1º. 6º.- Por último haz clic en el botón Aceptar . 7º.- A  A contin tinuació ión n abre el menú Insertar , activa la línea Marcos  y elige la opción Arriba.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    67 167

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

8º.- El panel Marcos nos permite seleccionar marcos asilados o conjuntos de marcos. Para ver dicho panel, selecciona el menú Ventana y marca la línea Marcos . 9º.- En dicho panel podrás observar que en nuestro documento existen tres marcos:      

El marco superior: topFrame. El marco inferior: mainFrame. Un marco exterior que encierra a los dos anteriores.

10º.-  A  Acctiv tiva e ell marco e exxte terrio iorr hacie ien ndo cli clicc en en el el perím rímetro tro d de e lo loss marcos, dentro del panel Marcos . Se marcará su perímetro mediante una línea negra gruesa. 11º.-  En la ventana de propiedades puedes observar como el marco exterior presenta una distribución de 2 filas x 1 columna.

12º.-  El apartado Selección Fila Col.  nos permite permite acti activa va la fifila la o column columna a cuyo cuyoss valores desea deseam mos cam cambiar. biar. 13º.-  En este caso haz clic sobre la primera fila para activarla (aunque posiblemente ya se encuentra activa por defecto). 14º.-  En la sección Valor  introduce  introduce el número 134, de esta forma estamos asignando al marco superior una anchura de 134 pixeles. 15º.-  El siguiente paso será guardar el documento de trabajo. Abre el menú Archivo y selecciona la línea Guardar Gua rdar conjun conjunto to de marcos como...  16º.-  Selecciona la carpeta Marcos  y asigna al documento el nombre Index.htm . Por último haz clic en el botón Aceptar . 17º.-  Volviendo al panel Marcos , selecciona el marco topFrame haciendo clic en el mismo. 18º.-  Observa ahora la paleta de Propiedades   e introduce en el apartado Nombre de marco   el texto MarcoSuperior . El nuevo nombre asignado aparece en el panel Marcos .

19º.-  Haz clic en el icono de carpeta que puedes encontrar a la derecha de la caja de texto Origen . Aparece una ventana de navegación que nos permite selecciona archivos, en este caso busca el archivo

arriba.htm  y haz clic en el botón Aceptar .

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    68 168

 

Tecnologías de la información – 1º de Bachillerato

 

Ricardo Rodríguez García  

20º.-  A  Ah hora el do documento arrib riba.h .htm tm se encuentr tra a asocia iad do al ma marco rco superirio or y por ta tanto se muestra tra en el mismo. 21º.-  Siguiendo los pasos anteriores, asigna el nombre Principal al marco mainFrame y asocia el mismo con el documento portada.htm. 22º.-  El último paso será vincular cada uno de los botones que aparecen en el documento arriba.htm, que recordemos se encuentra asociado al marco superior, con una serie de documentos que, a su vez, deberán mostrarse en el marco Principal. 23º.-  Haz doble clic en el botón Currículum  para mostrar su ventana de propiedades. 24º.-  Pulsa el botón Examinar...  que se encuentra a la derecha del apartado Vínculo . 25º.-  A  Ap pare recce una venta tan na de navegació ión n, busca y selecciona el archivo: Currículo.htm 26º.-  A  Ab bre la lis lislataopción desple leg gable Destino   y selecciona . De esta Principal forma el archivo vinculado se mostrará en dicho marco. 27º.-  Haz clic en el botón Aceptar . 28º.-  Repite los pasos anteriores para vincular los siguientes botones con sus correspondientes documentos, de manera que se muestren igualmente en el marco Principal.    

Botón HIERRO  HierroForjado.htm Botón MOLDES  Moldes.htm   Botón VARIOS  Varios.htm

29º.-  Por último, lanza la página al navegador pulsando la tecla F12 y comprueba los resultados.

Unidad Didáctica 9.- Diseño de páginas Web con DreamWeaver

Página:1 Página:    69 169