MANUAL DE DREAMWEAVER · MANUAL DE DREAMWEAVER Página -I- Índice

MANUAL DE DREAMWEAVER

Página -I-

Índice UNIDAD 1 ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL ............................... 1 INTRODUCCIÓN ................................................................................................................. 1 ENTORNO DE TRABAJO .................................................................................................... 1 ELEMENTOS DE LA VENTANA .......................................................................................... 3 LOS PANELES...................................................................................................................... 4 INSPECTOR DE PROPIEDADES .......................................................................................... 4 PANEL ARCHIVOS .............................................................................................................. 4 PANEL ACTIVOS ................................................................................................................. 5 PANELES INSPECTOR DE ETIQUETAS ............................................................................... 5 PANEL HISTORIAL .............................................................................................................. 5 PANEL CSS .......................................................................................................................... 5 PANEL INSPECTOR DE CÓDIGO ........................................................................................ 6 PANEL MARCOS ................................................................................................................. 6 DISPOSICIÓN DE PANELES ............................................................................................... 6 MENÚS ............................................................................................................................... 6 MENÚS CONTEXTUALES ................................................................................................... 6 AYUDA ............................................................................................................................... 6 METODOLOGÍA DE TRABAJO EN UNA WEB ................................................................... 7 PLANIFICACIÓN DE UN SITIO WEB .................................................................................. 7 DEFINICIÓN DE UN SITIO WEB O SITIO LOCAL ............................................................... 8 INTRODUCCIÓN ................................................................................................................. 8 CREAR UN SITIO LOCAL .................................................................................................... 8 CREAR UN SITIO LOCAL MEDIANTE EL ASISTENTE......................................................... 8 CREAR UN SITIO LOCAL MEDIANTE UNA CARPETA EN EL DISCO DURO ........................................................................................................... 9 CÓMO SUBIR LAS PÁGINAS AL SERVIDOR .................................................................... 10 CONFIGURAR EL SERVIDOR ............................................................................................ 10 ACCESO A NUESTRO LUGAR EN EL SERVIDOR ............................................................. 10 SUBIR LOS ARCHIVOS AL SERVIDOR .............................................................................. 10 BAJAR ARCHIVOS DESDE EL SERVIDOR ......................................................................... 11 TRABAJAR EN MODO EXPANDIDO................................................................................ 11 GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL.................................................................. 12 AÑADIR ARCHIVOS/CARPETAS AL SITIO LOCAL .......................................................... 12 ESTABLECER LA PÁGINA PRINCIPAL .............................................................................. 12 CAMBIAR EL NOMBRE DE UN ARCHIVO ....................................................................... 12 BORRRAR ARCHIVOS/CARPETAS ................................................................................... 13 TRABAJAR CON LAS PÁGINAS........................................................................................ 13 COMENTARIOS SOBRE LAS CARPETAS .......................................................................... 13 CARPETAS DE IMÁGENES ............................................................................................... 13 TÍTULO DE PÁGINA Y NOMBRES DE ARCHIVO ............................................................. 13 GUARDAR PÁGINAS ........................................................................................................ 13 ABRIR PÁGINAS EXTERNAS ............................................................................................ 14 VISTA PREVIA EN EL NAVEGADOR ................................................................................ 14


Página -II-

UNIDAD 2 CREACIÓN DE PÁGINAS: PROPIEDADES ........................................................................ 15 ESTABLECER EL TAMAÑO DE UNA PÁGINA.................................................................. 15 INTRODUCCIÓN ............................................................................................................... 15 PROPIEDADES DE UNA PÁGINA ..................................................................................... 15 APLICAR FONDOS DE COLOR A LA PÁGINA ................................................................. 15 APLICAR FONDOS BITMAP ............................................................................................. 15 ESCRITURA DEL TEXTO ................................................................................................... 16 INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA ................................................................ 16 INSERTAR LÍNEAS HORIZONTALES ................................................................................. 16 INSERTAR IMÁGENES ...................................................................................................... 16 INSERTAR VÍNCULOS ....................................................................................................... 17 RESUMEN CONCEPTOS GENERALES: EDICIÓN FORMATOS Y PANEL PROPIEDADES .................................................................................................. 18 SUGERENCIAS EN LA CONFECCIÓN DE LA WEB ........................................................... 20 GUÍA PARA COMPONER CON ESTILO ............................................................................ 20 UNIDAD 3 ESTILOS CSS ...................................................................................................................... 21 INTRODUCCIÓN ............................................................................................................... 21 COMENTARIOS SOBRE ESTILOS ...................................................................................... 22 ELEMENTOS DE CONTROL PARA CSS............................................................................. 22 EL PANEL DE ESTILOS CSS ............................................................................................... 22 EL MODO ACTUAL DEL PANEL CSS ................................................................................ 23 EL MODO TODO DEL PANEL CSS ................................................................................... 24 CREAR ESTILOS INTERNOS CON PROPIEDADES DE PÁGINA ..................................................................................... 24 CREAR ESTILOS INTERNOS CON EL BOTÓN NUEVA REGLA CSS ............................................................................... 26 EDICIÓN DE ESTILOS CSS ................................................................................................ 27 CREAR ESTILOS EXTERNOS CSS ...................................................................................... 27 APLICAR UNA HOJA DE ESTILOS EXTERNA A OTRAS PÁGINAS .................................. 29 CONVERTIR UN ESTILO CSS INTERNO EN EXTERNO ..................................................... 29 ANEXO: RESUMEN SOBRE HOJAS DE ESTILO CSS ......................................................... 29 ESTILOS CSS DE MUESTRA .............................................................................................. 30 DISEÑOS PREFIJADOS ...................................................................................................... 31 UNIDAD 4 ENLACES O VÍNCULOS .................................................................................................... 32 INTRODUCCIÓN ............................................................................................................... 32 RUTAS RELATIVAS Y ABSOLUTAS .................................................................................. 32 ASIGNAR UN VÍNCULO ................................................................................................... 33 VÍNCULOS DE TEXTO ...................................................................................................... 33 CAMBIO DE ATRIBUTOS PARA LOS VÍNCULOS DE TEXTO ........................................... 34 ENLAZAR CON LA FUNCIÓN SEÑALAR ARCHIVO ......................................................... 34 ENLAZAR CON LA FUNCIÓN BUSCAR ARCHIVO ........................................................... 34 CREAR ENLACES DE CORREO ELECTRÓNICO ................................................................ 34 CREAR MARCADORES EN EL DOCUMENTO ACTUAL ................................................... 35 CREAR MARCADORES A OTRA PÁGINA DEL SITIO LOCAL .......................................... 35 VÍNCULOS CON ARCHIVOS ............................................................................................. 35


Página -III-

CREAR VÍNCULOS GRÁFICOS .......................................................................................... 36 ASIGNACIÓN DE DESTINO A LOS VÍNCULOS ................................................................ 36 CREAR UN ENLACE A UNA PÁGINA FUERA DEL SITIO LOCAL .................................... 37 CREAR ENLACES A ARCHIVOS COMPRIMIDOS ............................................................. 37 MAPA DE IMÁGENES ...................................................................................................... 37 EDITAR LAS ZONAS SENSIBLES ....................................................................................... 37 CREACIÓN DE BARRAS DE NAVEGACIÓN ..................................................................... 38 ADMINISTRACIÓN DE LOS VÍNCULOS ........................................................................... 39 EDITAR VÍNCULOS EN MAPA DEL SITIO ........................................................................ 40 CAMBIAR UN VÍNCULO EN TODO EL SITIO ................................................................... 41 UNIDAD 5 TABLAS ............................................................................................................................. 42 CREAR TABLAS ................................................................................................................. 42 SELECCIONAR UNA TABLA ............................................................................................. 42 SELECCIONAR FILAS, COLUMNAS Y CELDAS ................................................................ 43 AÑADIR FILAS Y COLUMNAS ......................................................................................... 43 ELIMINAR FILAS Y COLUMNAS ...................................................................................... 43 DIVISIÓN Y COMBINACIÓN DE CELDAS ........................................................................ 43 CAMBIAR EL TAMAÑO DE FILAS, COLUMNAS CELDAS Y TABLAS ........................................................................................................... 44 CAMBIAR EL TAMAÑO DE UNA TABLA ........................................................................ 44 CAMBIAR EL TAMAÑO DE FILAS Y COLUMNAS ........................................................... 44 IGUALAR ANCHOS DE COLUMNA DE CÓDIGO Y VISUALES ........................................ 44 AMPLIAR CELDAS DE UNA TABLA ................................................................................. 44 IMPORTAR DATOS A LA TABLA ..................................................................................... 45 ORDENAR EL CONTENIDO DE LAS TABLAS ................................................................... 45 TABLAS ANIDADAS ......................................................................................................... 45 TABLAS DE DISEÑO ......................................................................................................... 45 CREAR CELDAS EN LA TABLA DE DISEÑO ..................................................................... 45 DETALLES DE LAS TABLAS Y CELDAS ............................................................................ 46 CUADRÍCULA ................................................................................................................... 46 CAMBIAR EL TAMAÑO DE LAS TABLAS Y LAS CELDAS EN EL MODO DISEÑO............................................................................. 46 MOVER TABLAS Y CELDAS ............................................................................................. 46 UNIDAD 6 IMÁGENES ........................................................................................................................ 48 INTRODUCCIÓN ............................................................................................................... 48 PREPARACIÓN DE LAS IMÁGENES PARA LA WEB ........................................................ 49 INSERTAR IMÁGENES ...................................................................................................... 49 CAMBIAR EL TAMAÑO DE LA IMAGEN ......................................................................... 50 ALINEACIÓN DE IMÁGENES ........................................................................................... 51 COLOCAR UN BORDE A LAS IMÁGENES NOMBRAR Y ETIQUETAS DE TEXTO .............................................................................. 52 PANEL DE ACTIVOS: GESTIÓN DE IMÁGENES ............................................................... 52 MARCADORES DE POSICIÓN .......................................................................................... 53 VISTA PREVIA DE IMÁGENES .......................................................................................... 53 CREAR THUMBNAILS DE MODO AUTOMÁTICO: ÁLBUM DE FOTOS ........................................................................................................... 54


Página -IV-

IMÁGENES DE SUSTITUCIÓN .......................................................................................... 55 GIF´S ANIMADOS ............................................................................................................ 56 UNIDAD 7 MARCOS ........................................................................................................................... 57 INTRODUCCIÓN ............................................................................................................... 57 INSERCIÓN DE UN CONJUNTO DE MARCOS PREDEFINIDO ......................................... 58 INSERCIÓN MANUAL DE MARCOS ................................................................................. 58 SELECCIONAR MARCOS: EL PANEL MARCOS ................................................................ 58 GUARDAR UN CONJUNTO DE MARCOS ........................................................................ 59 RESUMEN: CÓMO GUARDAR UN CONJUNTO DE MARCOS Y ESTABLECER DESTINOS ................................................................................................ 59 PROPIEDADES DE LOS MARCOS ..................................................................................... 60 PROPIEDADES DEL CONJUNTO DE MARCOS ................................................................ 60 EJEMPLO DE MARCOS..................................................................................................... 61 UNIDAD 8 FORMULARIOS ................................................................................................................. 62 INTRODUCCIÓN ............................................................................................................... 62 FUNCIONAMIENTO DE LOS FORMULARIOS .................................................................. 62 CREAR UN FORMULARIO ................................................................................................ 62 OBJETOS DEL FORMULARIO ........................................................................................... 63 CAMPOS DE TEXTO DE UNA LÍNEA ............................................................................... 63 CAMPOS DE TEXTO DE VARIAS LÍNEAS ........................................................................ 64 CASILLAS DE VERIFICACIÓN ........................................................................................... 64 BOTONES DE OPCIÓN ..................................................................................................... 64 GRUPOS DE OPCIÓN ....................................................................................................... 65 ELEMENTOS DE LISTA/MENÚ ......................................................................................... 66 BOTONES DE FORMULARIO ........................................................................................... 66 CAMPO DE IMAGEN ........................................................................................................ 67 CAMPO DE ARCHIVO ...................................................................................................... 67 JUEGO DE CAMPOS ......................................................................................................... 67 CAMPO OCULTO ............................................................................................................. 68 MENÚ DE SALTO ............................................................................................................. 68 GESTIÓN DE LOS FORMULARIOS ................................................................................... 69 CGI .................................................................................................................................... 69 PRUEBA DE FORMULARIOS ............................................................................................ 70 UNIDAD 9 ELEMENTOS DE EDICIÓN ................................................................................................ 73 EL PANEL HISTORIAL ....................................................................................................... 73 AUTOMATIZACIÓN DE TAREAS ..................................................................................... 73 LOS COMANDOS ............................................................................................................. 74 BUSCAR Y REEMPLAZAR ................................................................................................. 74 BUSCAR Y REEMPLAZAR ETIQUETAS ............................................................................. 74 VISTAS DISEÑO, DIVIDIR Y CÓDIGO .............................................................................. 75 EDICIÓN DEL CÓDIGO ..................................................................................................... 75 EL SELECTOR DE ETIQUETAS .......................................................................................... 76 INSERCIÓN Y EDICIÓN DE ETIQUETAS ........................................................................... 76 LA VENTANA SELECTOR DE ETIQUETAS ........................................................................ 76 QUICK TAG EDITOR ......................................................................................................... 76 FRAGMENTOS .................................................................................................................. 77


Página -V-

UNIDAD 10 PLANTILLAS Y BIBLIOTECAS ........................................................................................... 78 INTRODUCCIÓN ............................................................................................................... 78 CREAR UNA PLANTILLA DESDE CERO ............................................................................ 78 CREAR PLANTILLAS A PARTIR DE UN DOCUMENTO .................................................... 79 CREAR UNA PLANTILLA DESDE LA BARRA INSERTAR .................................................. 79 CREAR PÁGINAS DESDE UNA PLANTILLA...................................................................... 79 DEFINICIÓN DE LAS REGIONES EDITABLES ................................................................... 80 ELIMINAR REGIONES EDITABLES ................................................................................... 81 BIBLIOTECAS .................................................................................................................... 81 CREACIÓN DE ELEMENTOS DE BIBLIOTECA .................................................................. 81 COLOCAR ELEMENTOS DE BIBLIOTECA ......................................................................... 82 MODIFICAR ELEMENTOS DE BIBLIOTECA...................................................................... 82 RECUPERAR ELEMENTOS DE BIBLIOTECA ..................................................................... 82 UNIDAD 11 MULTIMEDIA ................................................................................................................... 83 INTRODUCCIÓN ............................................................................................................... 83 INSERTAR ANIMACIONES FLASH ................................................................................... 83 INSERTAR TEXTO FLASH ................................................................................................. 84 INSERTAR BOTONES FLASH ............................................................................................ 85 INSERTAR VÍDEO ............................................................................................................. 85 INCRUSTAR VÍDEO EN UNA PÁGINA WEB .................................................................... 86 VÍNCULO A UN ARCHIVO DE VÍDEO.............................................................................. 86 FLASH VÍDEO ................................................................................................................... 86 INSERTAR SHOCKWAVE .................................................................................................. 87 INSERTAR SONIDO .......................................................................................................... 87 INCRUSTAR AUDIO EN UNA PÁGINA WEB ................................................................... 88 VÍNCULO A UN ARCHIVO DE AUDIO ............................................................................. 88 INSERTAR APPLET DE JAVA ............................................................................................ 88 INSTALAR Y UTILIZAR EXTENSIONES ............................................................................. 89 CÓMO INSTALAR LAS EXTENSIONES ............................................................................. 89 UNIDAD 12 ENTORNO SPRY ............................................................................................................... 90 SPRY WIDGETS ................................................................................................................. 90 BARRA DE MENÚS DE SPRY............................................................................................ 91 NAVEGACIÓN POR FICHAS ............................................................................................. 92 ACORDEÓN DE SPRY ....................................................................................................... 93 PANEL DE CONTRACCIÓN SPRY ..................................................................................... 93 SPRY Y LOS FORMULARIOS ............................................................................................ 94 CAMPO DE TEXTO DE VALIDACIÓN SPRY..................................................................... 94 SELECCIÓN DE VALIDACIÓN SPRY ................................................................................. 95 ÁREA DE TEXTO DE VALIDACIÓN .................................................................................. 96 CASILLAS DE VERIFICACIÓN ........................................................................................... 96


Página - 1 -

DREAMWEAVER

Unidad 1 ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL

INTRODUCCIÓN

Dreamweaver es un editor para el diseño de sitios Web con una interfaz gráfica que permite visualizar automáticamente el código y el diseño de la página que vamos creando.

ENTORNO DE TRABAJO

Cuando se inicia Dreamweaver se muestra un asistente con el que podemos crear un documento vacío y acceder a los documentos que hayamos creado recientemente así como trabajar con plantillas, hojas de estilo, marcos, etc…

• Si seleccionamos la opción HTML en la columna central, crearemos un nuevo documento vacío en el que partiendo de cero podemos crear una página en lenguaje HTML. También disponemos de opciones para iniciar una página en lenguajes para programación de sitios dinámicos (PHP, ASP, etc..)

• En la columna de la izquierda, aparece un listado de los documentos guardados recientemente, pudiendo abrir cualquiera de ellos.


Página - 2 -

• En la columna de la derecha disponemos de una serie de plantillas predeterminadas para crear páginas con hojas de estilo CSS, páginas con marcos, páginas prediseñadas, etc..Para empezar a trabajar con una página en blanco, pulsar en la opción Crear nuevo>HTML, veremos la ventana de trabajo en Dreamweaver con una página en blanco.

Además aparecen una serie de paneles repartidos por la pantalla que podemos abrir, cerrar desde el menú Ventana o cambiar de tamaño haciendo uso del ratón. En la parte inferior aparece el panel de Propiedades y en el lateral, entre otros, el panel Archivos, CSS , etc.. en función de lo que hayamos activado en el menú Ventana. En la parte superior de la pantalla tenemos la barra de menús que da acceso a todas las opciones del programa (muchas de las cuales son accesibles desde los diferentes paneles). Debajo de la barra de menús se encuentra la barra de herramientas Insertar con los elementos comunes que podemos insertar en una página Web, como son: - Común: para insertar los elementos básicos en una página web, como los hipervínculos,

tablas, imágenes, multimedia, fecha, etc..

- Diseño: para trabajar más específicamente con tablas, capas, marcos, etc..


Página - 3 -

- Formularios: para trabajar con los elementos típicos de los formularios

- Datos: insertar objetos de datos y elementos dinámicos.

- Spry: contiene botones para crear páginas Spry, objetos de datos y widgets de Spry

- Texto: con las opciones de texto más habituales

- Favoritos: permite agrupar y organizar en un lugar común los botones de la barra

Insertar que utilicemos con más frecuencia. Para añadir la categoría favoritos , pulsar con el botón derecho del ratón en la barra insertar y activar la opción Personalizar favoritos. Seleccionar los elementos deseados y agregar con el botón de la flecha.

Si necesitamos agrupar todas las barras Insertar para que aparezcan como fichas activar Mostrar como fichas o bien Mostrar como menú (utilizando el botón derecho del ratón). ELEMENTOS DE LA VENTANA La ventana principal de Dreamweaver contiene los siguientes elementos:

Barra de estado Selector de etiquetas HTML

Tamaño de la ventana

Tamaño y tiempo de carga

Barra Documento Barra Estándar


Página - 4 -

• La barra Documento (en la parte superior): que contiene los botones con las diferentes vistas del documento (código, dividir y diseño), permite añadir un título a nuestro documento, administrar archivos y realizar una vista previa en nuestro navegador entre otras opciones.

• Si hacemos clic con el botón derecho del ratón sobre la barra Documento, se pueden activar el resto barras comunes entre otras la barra Estándar con las opciones típicas de Windows tales como Nuevo, Abrir, Guardar, Copiar, Pegar, etc..

• En la Barra de estado vemos:

o cada una de las etiquetas HTML que se van generando a medida que introducimos elementos en nuestra página, pudiendo seleccionar la etiqueta y modificarla, se trata del Selector de etiquetas.

o La casilla Tamaño de ventana para ver el tamaño de la ventana con el que estamos trabajando en ese momento.

o La casilla Tamaño y tiempo de carga en el navegador, para tener una idea aproximada del tiempo que tardará en cargarse nuestra página. El tiempo de carga dependerá de la velocidad de conexión o el módem.

LOS PANELES

Para activar los distintos paneles seleccionar el menú Ventana

AA.. INSPECTOR DE PROPIEDADES Se puede abrir mediante el menú Ventana>Propiedades o bien pulsando Control + F3. Desde este panel se pueden examinar y editar las propiedades de cada elemento que seleccionemos en una página. El contenido del inspector variará en función del elemento seleccionado.

La flecha de ampliación del panel (situada en la parte inferior del inspector), se amplia para ver más propiedades. El icono nos permitirá insertar directamente etiquetas HTML en la ventana flotante que aparece. El icono de la parte derecha permite controlar los paneles.

BB.. PANEL ARCHIVOS Se utiliza para realizar las operaciones de mantenimiento de archivos, creación de documentos HTML, organización de páginas, movimientos de archivos y creación de carpetas. También permite transferir archivos entre los sitios local y remoto, es decir, entre la carpeta que tenemos en nuestro disco duro y nuestro servidor de internet. Además en este panel se puede ver un sitio local en forma de mapa visual de iconos vinculados, para agregar nuevos archivos a un sitio y para modificar , agregar o quitar vínculos.

Con la tecla F8 podemos hacer visible el panel de archivos.


Página - 5 -

CC.. PANEL ACTIVOS Se llama Activos a los diversos elementos que se almacenan en un sitio, como pueden ser las imágenes, vídeos, animaciones Flash, colores, etc… y se encuentran clasificados en categorías. Mediante las herramientas de este panel podemos, entre otras acciones, seguir la pista de los colores utilizados en las páginas, insertar imágenes y elementos Flash y gestionar la biblioteca de elementos.

DD.. PANELES INSPECTOR DE ETIQUETAS Agrupa los paneles Atributos y Comportamientos. Mediante el panel Atributos podemos editar etiquetas HTML y objetos mediante una hoja de propiedades. El panel Comportamientos permite al usuario interactuar con la página para realizar determinadas tareas, como por ejemplo una opción de menú en una página o cuando se pasa el ratón por encima de un elemento para que muestre una imagen o reproduzca un sonido.

EE.. PANEL HISTORIAL Muestra una lista de todas las operaciones realizadas en el documento activo desde que éste se ha creado abierto, se trata en definitiva como una grabadora que va almacenando todo lo que vamos haciendo durante nuestra sesión de trabajo.

FF.. PANEL CSS Agrupa en principio los paneles Estilos CSS y Elementos PA. El panel de estilos CSS se utiliza para crear, editar y quitar estilos CSS (hojas de estilo en cascada), los cuales permiten generar efectos de texto y controlar la colocación de los elementos de pantalla, ajuste de márgenes, propiedades de fuentes y texto, etc.. . El panel Elementos PA se utiliza para el control de capas en Dreamweaver. Una capa es un elemento que puede contener cualquier tipo de objeto y es susceptible de desplazarse por cualquier parte del documento.


Página - 6 -

GG.. PANEL INSPECTOR DE CÓDIGO Permite ver y editar el código de lo que realizamos en la página en una ventana independiente de la principal. Para abrir el panel del inspector de código ir al menú Ventana>Inspector de código o pulsar la tecla F10.

HH.. PANEL MARCOS Muestra una representación de los marcos del documento de una manera visual pudiendo seleccionar los mismos para editar o ver sus propiedades. DISPOSICIÓN DE LOS PANELES Para desplazar

los paneles a otro sitio de la pantalla ( o convertirlos flotantes), arrastrar del extremo punteado que aparece a la izquierda de la barra de título del panel y soltar en otra posición.

Para desplegar

Cuando el panel está desplegado, a la derecha de la barra de título aparece un pequeño

símbolo que da acceso a un menú contextual .

un panel, basta con hacer clic en la flechita pequeña situada a la izquierda del nombre del panel y la misma acción para cerrar el panel.

Para cerrar todos los paneles a la vez y trabajar más cómodamente pulsar la tecla F4 y la misma tecla para volver a visualizarlos. MENÚS EN DREAMWEAVER MENÚS CONTEXTUALES Los menús contextuales aparecen al hacer clic con el botón derecho del ratón sobre un determinado elemento de la página y nos proporcionan una serie de comandos para llevar a cabo determinadas acciones. AYUDA EN DREAMWEAVER Pulsando la tecla F1 se accede a la ayuda principal del programa, organizada como una página

Web. Además de la tecla F1 , el icono que se encuentra en un panel, inspector o ventana nos muestra la ayuda para ese elemento en cuestión.

Posición de arrastre


Página - 7 -

METODOLOGÍA DE TRABAJO EN DREAMWEAVER PLANIFICACIÓN DE UN SITIO WEB A la hora de realizar un sitio Web debemos planificarlo antes de comenzar a añadir elementos, tenemos que tener claro el número de páginas que va a contener, qué va a aparecer en cada una de ellas, a quién está destinado, cuál es el propósito, etc.. Es preciso tener en cuenta lo siguiente:

• Crear el sitio en papel antes de comenzar a trabajar con Dreamweaver, indicando los temas que vamos a tratar y organizarlos en categorías.

• Dibujar un organigrama de la Web representando las páginas con rectángulos (ver figura) y utilizar flechas para señalar los hipervínculos.

• Una vez decidido el contenido de las páginas, tenemos que crearlas, para ello, escribiremos el texto, el diseño de los gráficos y los archivos de audio y vídeo necesarios..

• Pensar en la audiencia que observará nuestra página. Una vez planificado el sitio Web, la mecánica de trabajo con Dreamweaver es la siguiente:

11ºº.. Crear un nuevo sitio. 22ºº.. Crear la(s) carpetas y archivos que van a constituir nuestro sitio Web. 33ºº.. Configurar los diferentes elementos básicos de la página (imagen o color de fondo,

colores y tipos de letra, márgenes, tamaño de la página, etc..). 44ºº.. Introducir en cada página los elementos que deseemos (texto, imágenes, vínculos,

capas, animaciones, sonidos, etc..) 55ºº.. Continuar creando la totalidad de las página que conformen nuestro sitio Web,

procurando dar un formato homogéneo a los distintos encabezados y párrafos de cada página (adjuntar estilos).

66ºº.. Comprobar el buen funcionamiento de todos los vínculos. 77ºº.. Comprobar la compatibilidad con diferentes navegadores. 88ºº.. Alojar el sitio Web en el servidor al que estemos suscritos.


Página - 8 -

DEFINICIÓN DE UN STIO WEB O SITIO LOCAL INTRODUCCIÓN Un documento de Dreamweamer es cada página que realizamos dentro de la ventana de trabajo. El conjunto de páginas con elementos multimedia enlazadas entre sí constituyen un Sitio web. Lo usual es disponer de una página principal conteniendo los temas o apartados principales de la web desde la que accedemos a las diferentes páginas para desarrollar cada uno de esos temas de forma individual. Es conveniente, por otra parte, con vistas a tener organizado nuestro sitio, agrupar en una sola carpeta todas las imágenes que aparecen en la diferentes páginas, agrupar en otra todos los archivos de sonido, plantillas, animaciones, etc.. El lugar en el disco duro en donde se almacenan el conjunto de documentos y archivos que conforman la totalidad de una web se le llama Sitio Local o carpeta Raíz Local. Será una réplica del Sitio remoto, que es el sitio real del servidor Web al que accederán los visitantes. La creación de un sitio local, comprendido en la carpeta raíz local dentro de la que se establece la estructura de archivos y carpetas del sitio, evitará el acceso a cualquier archivo ubicado fuera de la carpeta raíz local. Los archivos del disco duro que no se encuentren en la carpeta raíz local no estarán disponibles para el servidor remoto. Es aconsejable definir un sitio local en nuestro ordenador antes de empezar a crear páginas, gráficos y demás elementos. El nombre de una carpeta raíz es simplemente para fines de gestión de archivos (no estará disponible para los visitantes de la página) y puede ser el nombre del sitio respectivo o cualquier otro nombre que deseemos. CREAR UN SITIO LOCAL Podemos crear un sitio local de varios modos:

• Mediante el asistente Sitio de Dreamweaver • Mediante la creación de carpetas previas en el disco duro.

CREAR UN SITIO LOCAL CON EL ASISTENTE SITIO DE DREAMWEAVER

11.. En la ventana principal de la aplicación de Dreamweaver seleccionar una de estas dos opciones:

• Menú Sitio>Nuevo sitio.. • Menú Sitio>Administrador de sitios…>botón Nuevo…>Sitio

22.. Se abre el asistente con dos fichas; Básicas y Avanzadas. Seleccionar Básicas y en esta

ventana tenemos que escribir el nombre que vamos a poner al sitio (que puede coincidir con el nombre de la carpeta raíz local) y la dirección URL

en donde se alojará nuestro sitio en el servidor de Internet (de momento no poner nada). Pulsar el botón Siguiente.

33.. En el siguiente paso del asistente, seleccionar No deseo utilizar una tecnología de servidor, la otra opción es la que debemos seleccionar cuando se trate de páginas Web dinámicas creadas con tecnologías de servidor como PHP, ASP, etc.., pulsar el botón Siguiente.

44.. En este paso podemos decidir entre Editar copias locales en mi equipo y luego

cargarlas al servidor cuando estén listas (crear las páginas en nuestro PC y luego subirlas al servidor) o Editar directamente en el servidor utilizando la red local, seleccionar la primera opción. En el apartado ¿En qué lugar del equipo desea almacenar los archivos?, por defecto asigna el nombre del sitio (paso 2) a la carpeta raíz local.


Página - 9 -

Debemos especificar la carpeta del disco duro en donde almacenaremos las páginas y

elementos de nuestro sitio, para ello pulsar en el botón . Si queremos poner el mismo nombre al sitio y a nuestra carpeta raíz local pulsar el botón Siguiente. 55.. En el siguiente paso del asistente en el apartado ¿Cómo conecta con su servidor

remoto? Seleccionar Ninguno en el desplegable, o bien indicar cómo nos vamos a conectar con el servidor remoto para enviarle todas las páginas y archivos de nuestra Web, lo usual suele ser vía FTP, en ese caso debemos rellenar todos los datos con la información que nos facilite la empresa que gestiona el servidor. Una vez introducidos los datos, pulsar en el botón Conexión de prueba para conectar con el servidor. Pulsar el botón Siguiente.

66.. En el último paso del asistente se muestra la información que hemos configurado para

nuestro sitio. Pulsar el botón Completado para finalizar. En el panel de Archivos aparece el nombre del sitio creado y la carpeta raíz local en la que iremos incluyendo las páginas y elementos de nuestro sitio (comprobar si está seleccionada la opción Vista local en la casilla de la derecha).

77.. Si posteriormente deseamos realizar alguna modificación, seleccionar el menú

Sitio>Administrador sitios y en el cuadro de diálogo Administrador de sitios pulsar el botón Editar o bien el botón Quitar si queremos eliminar el sitio creado.

Dentro de la carpeta raíz local ir creando nuevas carpetas para organizar los contenidos del sitio Web, para ello seleccionar la carpeta raíz y con el botón derecho Nueva Carpeta. Para crear una página nueva seleccionar Nuevo archivo.

CREAR UN SITIO LOCAL MEDIANTE LA CREACIÓN DE LA CARPETA PREVIA EN EL DISCO DURO.

11.. Dentro de la aplicación de Dreamweaver seleccionar en el panel de Archivos la pestaña Archivos y posteriormente la unidad deseada (C:,D:,etc..)

22.. Con el botón derecho del ratón en la unidad seleccionada elegir Nueva carpeta y poner

un nombre a la que será la carpeta raíz local (puede coincidir con el nombre que le pongamos al sitio).

33.. Seleccionar el menú Sitio>Nuevo sitio…, en el asistente escribir un nombre para el sitio

(puede ser el mismo de la carpeta raíz u otro distinto) y pulsar el botón Siguiente.

44.. En el siguiente paso seleccionar No deseo utilizar una tecnología de servidor y pulsar el botón Siguiente.

55.. En este paso del asistente elegir Editar copias locales en mi equipo y luego cargarlas al

servidor cuando estén listas (crear las páginas en nuestro PC y luego subirlas al servidor)y en el apartado ¿En qué lugar del equipo desea almacenar los archivos?

Pulsar en el icono y seleccionar la carpeta que hemos creado en el paso -2-, pulsar el botón Siguiente.

66.. En el siguiente paso del asistente en el apartado ¿Cómo conecta con su servidor

remoto? Elegir de la lista Ninguno y pulsar el botón Siguiente.

77.. Para finalizar, pulsar el botón Completado.


Página - 10 -

CÓMO SUBIR LAS PÁGINAS AL SERVIDOR

AA.. CONFIGURAR EL SERVIDOR Nuestro proveedor de internet nos deberá proporcionar los datos de conexión al servidor. Los datos necesarios para un sistema de transferencia FTP (File Transfer Protocol) son los siguientes: Servidor FTP: podría ser parecido a ftp.nombre.com, usuario.servidor.org,etc.. Directorio del servidor: es la carpeta donde se ubicarán nuestra páginas y archivos, p. ej. \html, public_html, etc.. Usuario: es el nombre de usuario que nos ha asignado el servidor, p. ej. Jetxe Contraseña: es la clave para que podamos acceder a los archivos de nuestra Web en el servidor

Una vez introducidos los datos pulsar en el botón Prueba o Conexión de prueba .

BB.. ACCESO A NUESTRO LUGAR EN EL SERVIDOR Una vez configurada la conexión al servidor, es preciso conectarnos a él para llevar los archivos y páginas a la carpeta que nos han asignado en su disco duro. Pasos:

1. En el panel Archivos pulsar en el icono Conectar al servidor remoto . 2. En el panel se puede ver la carpeta del servidor en donde podremos alojar nuestros

archivos y la casilla desplegable derecha deberá mostrar la opción Vista remota. 3. Si en la casilla seleccionamos la opción Vista local, lo que veremos serán los archivos y

páginas que tengamos alojados en el sitio local de nuestro disco duro.

CC.. SUBIR LOS ARCHIVOS AL SERVIDOR Una vez tengamos nuestras páginas y archivos del sitio web creados, debemos depositarlos (subirlos) en el servidor. Pasos:

11.. En el panel de Archivos seleccionar la opción Vista local para visualizar los archivos y páginas que tengamos alojados en el sitio local de nuestro disco duro.

ftp://ftp.nombre.com/�


Página - 11 -

22.. Pulsar el icono Colocar y, tras realizarse la conexión con el servidor y solicitarnos conformidad para colocar todo el sitio en dicho servidor, comenzará la transferencia de archivos desde el sitio local al sitio remoto.

33.. Una vez finalizada la transferencia, seleccionar la opción Vista remota en la casilla de la

derecha en el panel Archivo para ver todos los archivos ya ubicados en el servidor y dentro de la carpeta que hayamos asignado al definir el sitio. Esta carpeta nos la ha asignado la empresa proveedora de Internet. Las carpetas del sitio local y del sitio remoto se muestran coloreadas en verde y amarillo respectivamente.

DD.. BAJAR LOS ARCHIVOS DESDE EL SERVIDOR Para trasladar los archivos existentes en el servidor hasta el sitio local en nuestro disco duro, hay que realizar el proceso inverso al que acabamos de ver. Pasos:

11.. En la casilla de la derecha seleccionar la opción Vista remota para visualizar los archivos y páginas que tengamos alojados en el servidor.

22.. Hacer clic en el icono Obtener archivos y, tras solicitar conformidad, se realizará la conexión con el servidor y comenzará la transferencia de archivos desde el servidor al sitio local.

TRABAJAR EN MODO EXPANDIDO Dreamweaver utiliza un sistema parecido al de otros programas FTP, como p. ej. Cute FTP para la transferencia de archivos del ordenador local al ordenador remoto. En el panel de Archivos,

pulsar en el icono Expandir/Contraer . En la parte izquierda de la pantalla tenemos una vista del ordenador remoto o servidor, en tanto que en la parte derecha observamos el contenido de nuestro sitio local. Desde esta vista podemos realizar las transferencias de archivos hacia y desde el servidor

utilizando respectivamente los iconos Cargar y Obtener , pero también arrastrando los archivos de un lado al otro (de izq. a der. bajamos archivos al sitio local y de der. a izq. subimos al servidor). El panel de Archivos en modo ampliado también permite:

Actualizar: las listas de elementos que aparecen en los directorios local y remoto (aunque esta operación está configurada automáticamente).

Archivos del sitio: muestra la estructura de archivos de los sitios local y remoto en las dos mitades de la pantalla.

Servidor de prueba: muestra la estructura de directorios del servidor de prueba y del sitio local. Sólo se utiliza para la creación de páginas dinámicas.


Página - 12 -

Mapa del sitio: muestra una representación gráfica del sitio basándose en los vínculos entre las páginas. Necesitamos establecer una página como principal previamente para ver el mapa del sitio. Permite seleccionar páginas, abrir una página para editarla, añadir nuevas páginas al sitio, crear vínculos entre archivos y cambiar títulos de página.

Proteger y desproteger archivos: se utilizan para proteger y desproteger archivos en el servidor. GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL AÑADIR ARCHIVOS Y/O CARPETAS AL SITIO LOCAL Una vez definido el sitio local necesitamos crear las carpetas y las páginas que contiene ese sitio. A la página principal o de Inicio de nuestro sitio le pondremos el nombre de archivo que indique nuestro proveedor de Internet, normalmente recibe alguno de estos nombres; index.html, welcome.html, default.html o home.html. Para añadir páginas a nuestro sitio existen varios métodos:

AA.. DESDE EL PANEL DE ARCHIVOS

11.. En el panel Archivos, activar la Vista local y pulsar en el icono 22.. Seleccionar Archivo>Nuevo archivo o Nueva carpeta 33.. Aparece un nuevo archivo con el nombre por defecto untitled.html

También desde el panel Archivos

•• Seleccionar el sitio local (CARPETA RAÍZ)creado con el botón derecho del ratón y elegir la opción Nuevo archivo o Nueva carpeta del menú contextual.

BB.. DESDE EL MENÚ ARCHIVO DE LA APLICACIÓN DE DREAMWEAVER

11.. Seleccionar menú Archivo>Nuevo… 22.. En la ventana Nuevo documento, elegir Página en blanco y en la columna Tipo de

página: seleccionar HTML (o cualquier otro diseño predeterminado) y pulsar el botón Crear.

33.. Aparece un nuevo archivo con el nombre por defecto untitled.html 44.. En este caso no aparece el nuevo archivo en la ventana del sitio hasta que lo guardemos

con el menú archivo>Guardar como y la extensión htm o html. ESTABLECER LA PÁGINA PRINCIPAL Para indicar cuál será la página principal del resto de páginas de nuestro sitio:

11.. En el panel Archivos, seleccionar con el botón derecho el nombre del archivo que deseamos convertir en página de inicio o principal.

22.. Seleccionar la opción Establecer como página principal. CAMBIAR EL NOMBRE DE UN ARCHIVO Hacer dos clic despacio (no doble clic) sobre el archivo deseado o seleccionarlo con el botón derecho del ratón y en el menú contextual Edición>Cambiar nombre


Página - 13 -

BORRAR ARCHIVOS Y/O CARPETAS En el panel Archivos, seleccionar individualmente o en grupo (tecla CONTROL y clic) los archivos y/o carpetas deseados. TRABAJAR CON LAS PÁGINAS Para editar los archivos de las páginas, en el panel Archivos hacer doble clic sobre el nombre del archivo deseado. Posteriormente se puede cambiar entre las páginas abiertas seleccionándolas desde las pestañas que muestra la barra de Documento. COMENTARIOS SOBRE LAS CARPETAS A la hora de crear carpetas debemos tener en cuenta que éstas se ubican siempre a partir del nivel de carpeta que tengamos seleccionado. En general, las carpetas de contenidos, Imágenes, animaciones, etc.. crearlas a partir del directorio raíz (sitio local). CARPETAS DE IMÁGENES Para almacenar las imágenes en el interior de una carpeta es preferible utilizar uno

•• En Mi PC o explorador de Windows, seleccionar el archivos(s) de la carpeta deseada y copiarlos al portapapeles(Control + C ) y, posteriormente en la carpeta deseada del sitio local pegarlos(Control + V)

de estos métodos:

•• En el panel Archivos, localizar la carpeta que contiene las imágenes y copiarlas al portapapeles (Control + C). Seleccionar posteriormente nuestro sitio y pegarlas en la carpeta deseada(Control + V)

•• Menú Insertar>Imagen, seleccionar de la carpeta deseada la(s) imagen(s) y pulsar Aceptar. Posteriormente indicar la ruta de destino donde deseamos insertar las imágenes.

TíTULO DE PÁGINA Y NOMBRES DE ARCHIVO Cuando se accede a una página para su edición, en la barra de Documento de DW se muestra Documento sin título, esto se debe a que cada página además de tener un nombre de archivo, debe tener un título identificativo de la página (no tiene por qué ser el mismo que el del archivo).

Para asignar un título a la página, hacer clic en la casilla Título: de la barra Documento y poner un nombre. También se puede seleccionar el menú Modificar<Propiedades de la página>Título codificación y poner un nombre en la casilla Título. GUARDAR PÁGINAS Es recomendable guardar el trabajo que realicemos en las páginas mediante el menú Archivo>Guardar o Guardar como… Siempre que modifiquemos un documento y no esté guardado aparece un asterisco (*) junto al nombre del archivo, que desaparece al guardarlo.


Página - 14 -

Si hemos creado varias páginas sin tener un sitio local definido:

11.. Crear primero el sitio local (ver CREAR UN SITIO LOCAL) 22.. Abrir una a una las páginas y seleccionar menú Archivo>Guardar como e ir guardando

cada una de las páginas en la capeta del sitio local. 33.. Tras solicitarnos autorización para actualizar los vínculos el panel Archivos reflejará los

cambios automáticamente. ABRIR PÁGINAS EXTERNAS Se pueden aprovechar otras páginas que tengamos almacenadas en el disco, que pueden proceder de internet y las hemos almacenado en un disco o simplemente páginas de otro sitio que queremos utilizar en el nuevo sitio. Es imprescindible para poder abrir una página Web externa en DW que esté guardada previamente en disco. Para guardar una página de internet en disco seleccionar en el menú Archivo>Guardar y en la casilla Tipo de archivo: Página Web completa Pasos:

11.. Abrir el sitio local 22.. Menú Archivo>Abrir y seleccionar de la unidad correspondiente el archivo deseado. 33.. Una vez cargada la página, podemos modificarla, eliminar información , seleccionar

elementos para copiarlos en otra página, ver su código HTML, etc.. 44.. Para integrar la página en nuestro sitio local, seleccionar menú Archivo>Guardar como,

seleccionar nuestra carpeta del sitio local o bien pulsar el botón Raíz del sitio y asignar un nombre de archivo.

VISTA PREVIA EN EL NAVEGADOR Para comprobar cómo se verán nuestras páginas en uno o varios navegadores verificar el correcto funcionamiento de las mismas, podemos hacer uso de la vista previa.

11ºº.. Definir los diferentes navegadores, para ello en el menú Archivo>Vista previa en el navegador>Editar lista de navegadores…para ver la ventana Preferencias.

22ºº.. Pulsar el botón + para añadir nuevos navegadores e indicar su ubicación en el disco duro estableciendo si queremos que actúen como navegador principal o secundario.

33ºº.. Una vez definidos los navegadores, para ver las páginas pulsar la tecla F12


Página - 15 -

Unidad 2 CREACIÓN DE PÁGINAS: PROPIEDADES En esta unidad vamos a ver los elementos básicos para crear páginas sencillas utilizando formatos y colores. ESTABLECER EL TAMAÑO DE LA PÁGINA INTRODUCCIÓN Los monitores tienen mucho en común con las TV. En el caso de los monitores CRT están formados por un tubo de rayos catódico también llamados tubo de vacío (dentro del tubo es casi un vacío perfecto). Los de color se obtienen mediante 3 cañones de electrones. Estos bombardean la placa de fósforo en la parte interior de la pantalla y liberan puntitos de luz a color rojo, verde y azul (RGB) llamados Píxel. La resolución se caracteriza por los píxel representados en horizontal y vertical un ejemplo es la resolución 800X600 osea 800 píxels en horizontal y 600 píxels en vertical. A más resolución más píxels representados. A la hora de crear páginas Web conviene utilizar un tamaño adecuado para que puedan verse correctamente en las resoluciones de monitor más corrientes. En este sentido la resolución óptima para la gran mayoría de monitores sería de 800 x 600 píxeles. Configurar primero el tamaño de la página antes de comenzar, para ello:

1. Antes de seleccionar el tamaño debemos visualizar el área de trabajo en modo no

expandido 2. Seleccionar en la barra de estado de la ventana del documento la flecha desplegable 3. Activar la opción Editar tamaños…> 800 x 600 Maximizado (opción recomendada) o

1024 x 768 PROPIEDADES DE UNA PÁGINA Para establecer las propiedades generales de una página podemos utilizar alguno de estos métodos:

• Botón Propiedades de página… en el panel Propiedades • Menú Modificar>Propiedades de página • En la ventana del documento hacer clic con el botón derecho y seleccionar Propiedades

de página. Veremos el cuadro de diálogo Propiedades de la página, donde se pueden aplicar en las distintas categorías, las fuentes y los encabezados, colores para los vínculos, los fondos, etc.. APLICAR FONDOS DE COLOR SÓLIDO A LA PÁGINA Botón Propiedades de página>Color de fondo>Seleccionar la paleta de colores APLICAR FONDOS BITMAP Las imágenes deberán estar en formato GIF, JPEG o PNG. Si la imagen es más grande que la resolución empleada no cabrá y si es más pequeña se repetirá como un mosaico en toda la ventana.


Página - 16 -

Para aplicar una imagen de fondo, botón Propiedades de página>Imagen de fondo>Seleccionar la imagen:

• De la carpeta imagen del sitio • De otra carpeta, en ese caso guardarla en el directorio Imagen del sitio

ESCRITURA DEL TEXTO Se puede teclear directamente el texto o copiar texto al portapapeles de otra aplicación con las opciones Copiar o Cortar y Pegar posteriormente en DW en la posición donde se encuentre el cursor. Aunque forma de controlar los atributos de texto es similar a la de los procesadores de texto se utiliza el panel Propiedades , menú Texto o la ficha Texto de la barra Insertar. INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA Para insertar un salto de párrafo pulsar la tecla Intro. Para bajar sólo una línea cada vez, mantener la tecla de Mayúscula pulsada y tecla Intro. Para añadir espacios en blanco pulsar las teclas Control + Mayúscula + Barra espaciadora INSERTAR LÍNEAS HORIZONTALES

1. Ir al menú Insertar>HTML>Regla horizontal 2. Seleccionar la línea y modificar sus atributos(ancho, alto, alineación,etc..) en el panel

Propiedades

La inserción de líneas horizontales provoca el desplazamiento hacia abajo del texto que se encuentre por debajo de la línea (equivalente a la tecla Intro) ACTIVIDAD 1

• Crear un sitio con el nombre Aula_1 que contenga cuatro páginas llamadas home.html, derecho.html. protocolo.html y ofimática.html. Añadir al sitio una carpeta llamada Images para alojar tres imágenes descargadas previamente de nuestro equipo.

• Establecer la página de home.html como documento principal y asignarle de título Prácticas de Secretariado.

• Añadir al resto de páginas y establecer un título para cada una de ellas además de un color de fondo. Posteriormente guardar todas las páginas.

INSERTAR IMÁGENES La unidad 4 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. Vamos a ver aspectos generales de cómo se inserta una imagen en un documento. Para ello:

1. Situar el cursor en la posición deseada.

2. Seleccionar menú Insertar>Imagen pulsar el icono en la barra Insertar>Común 3. En la ventana que aparece elegir la ruta y el nombre de archivo en donde se encuentra

la imagen a colocar. Si el archivo no está ubicado en el sitio local, veremos una serie de ventanas que nos permitirán copiar el archivo en el lugar que deseemos de nuestro sitio local (normalmente en la carpeta destinada a las imágenes)


Página - 17 -

INSERTAR VÍNCULOS La unidad 3 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. Vamos a ver algunos aspectos de los vínculos. Para ello: Un vínculo es un enlace entre dos lugares de tal manera que al hacer clic en un elemento de la página (texto o imagen) se acceda automáticamente a otro lugar de la página, a otra página de nuestro sitio, a una imagen ampliada, una dirección de correo, etc..

1. Seleccionar el texto al que queremos aplicar el vínculo. 2. En el panel Propiedades aparece una casilla llamada Vínculo en la que escribiremos la

ruta que contiene el documento al que accederemos o bien habiendo clic en la carpeta

. También podemos seleccionar un texto o imagen, pulsar la tecla Mayúscula y arrastrar hacia un archivo en el panel Archivos. Asimismo se puede seleccionar el texto o

imagen y arrastrar el icono (que aparece a la derecha de la casilla Vínculo) hacia el archivo deseado en el panel Archivos.

ACTIVIDAD 2

• Seleccionar el sitio Aula_3 en el panel de archivos y hacer doble clic en el archivo home.html. Introducir el texto Secretariado de Dirección –BILBAO y poner un tamaño de 24, alinear al centro y ponerlo en negrita. En el panel Propiedades seleccionar un color de fondo cakee y para el texto color marrón.

• Introducir el texto “Esta es una práctica de documento web de la escuela de Secretariado. En este ejercicio practicaremos con los formatos, imágenes y vínculos. En la unidad 2 estudiaremos los estilos. Para ello debajo de todas las páginas hemos insertado palabras que serán futuros enlaces”.

• Seleccionar este párrafo y establecer lo siguiente: o Fuente (panel Propiedades); Verdana a 14 píxeles en negrita y cursiva o Color del texto blanco y alineado a la izquierda

• Abrir las otras páginas y copiar en ellas el texto Secretariado de Dirección y añadir a su derecha el nombre de la materia. En la parte inferior de cada página escribir las materias de las otras páginas, posteriormente guardar todo.

• Insertar una línea horizontal en todas las páginas debajo de cada encabezado • Guardar en la carpeta images, tres fotos del Gugenheim, Puppie y la vista de Bilbao

desde Artxanda e insertarlas en las páginas correspondientes justo debajo de la línea horizontal.

• Asignar a todas las imágenes : o un ancho y alto de 100 x 100 o alinear la imagen a la izquierda o introducir en cada imagen un comentario sobre la misma de un par de líneas

• Abrir el archivo home.html y crear enlaces para acceder a las páginas Puppie, Vista desde Artxanda y Guggenheim. A su vez desde cada página crear los respectivos enlaces.

• En la dirección http://www.pekegifs.com/webmaster/generartexto3d.htm generar un botón con la palabra Principal (seguir las instrucciones del enlace) para ir siempre a la página de inicio (home.html) .

• En cada una de las páginas añadir el botón creado para que enlace con la página principal (se puede cinsertar la imagen con el vínculo a la página deseada y copiarlo al resto de páginas)

• Insertar una imagen gif animada de http://www.gifanimados.com/email/buzonesrojos/ en la parte inferior del archivo home.html ,que sirva de vínculo para que nos permita abrir la aplicación de correo electrónico y se muestre la dirección del destinatario ya introducida (poned vuestra dirección de correo) .

http://www.pekegifs.com/webmaster/generartexto3d.htm�

http://www.gifanimados.com/email/buzonesrojos/�


Página - 18 -

• Por último, añadir el siguiente texto en el archivo home.html: © made by jonan y comprobar si funcionan todos los vínculos utilizando para ello la opción de Mapa del sitio.

RESUMEN CONCEPTOS GENERALES: EDICIÓN, FORMATOS Y PANEL PROPIEDADES Para introducir texto, colocar el cursor en el lugar deseado y escribir, el texto se muestra con los atributos que tenga por defecto. Para insertar un salto de dos líneas, pulsar tecla INTRO Para insertar un salto de una línea, pulsar tecla MAYÚSCULA + INTRO Para separar las palabras con más de un espacio pulsar la combinación de teclas CONTROL+MAYÚSCULA+Barra espaciadora Todos los cambios de atributos que realicemos se aplicarán al texto que se encuentre seleccionado. Para cambiar el tamaño, el formato y el tipo de fuente, utilizar el panel Propiedades. También podemos hacer uso del menú Insertar>HTML>Caracteres especiales y del menú Texto.

Para añadir nuevas fuentes, en la casilla Fuente del panel Propiedades seleccionar Editar lista de fuentes…:

• Si queremos agregar

• Para

fuentes a una combinación, seleccionarla en el recuadro Lista de fuentes, elegir posteriormente la fuente a añadir en el recuadro Fuentes

disponibles y pulsar en el icono para incorporarla. eliminar

• Para

una fuente de una combinación seleccionar ésta en el recuadro Lista de fuentes, elegir la fuente a eliminar en el recuadro Fuentes elegidas y pulsar el

icono . añadir una combinación de fuentes, en el recuadro Lista de fuentes,

seleccionar la opción (Añadir fuentes de la lista siguiente), en el recuadro Fuentes

disponibles seleccionar la fuente a agregar a la nueva combinación y pulsar para incorporarla. Repetir ésta última operación para ir incorporando fuentes al

grupo. Para crear o eliminar nuevos grupos

hacer clic en los botones

Color fuente Alineación Alineación

Listas y Sangría


Página - 19 -

Para insertar caracteres especiales, situar el cursor en la posición deseada y elegir en el menú Insertar>HTML>Caracteres especiales o bien hacer clic en el último icono

a la derecha de la barra Insertar>Texto

• Podemos crear Listas de texto numeradas (ordenadas) y listas de texto con viñetas

1. Situar el cursor donde deseemos comenzar la lista

(sin ordenar). Se pueden crear a partir de texto previamente editado o sin editar. Para crear listas desde cero:

2. En el panel Propiedades hacer clic en el icono Lista sin ordenar o bien

en el icono de Lista ordenada . También se pueden utilizar los iconos

del menú Insertar>Texto 3. Cada vez que terminemos una línea, pulsar Intro y para finalizar la lista

pulsar Intro dos veces seguidas. • Para crear listas a partir de párrafos ya escritos, basta con seleccionar la totalidad

de los párrafos (elementos de texto independientes entre sí) y pulsar en uno de los

iconos • Para crear Listas de definición

o Pulsar el icono dl y pulsar Intro.

(para definir un término) utilizar los iconos

de la barra Insertar>Texto. Si seleccionamos esta opción:

o Pulsar el icono dt y escribir el texto a definir, el texto saltará a la segunda línea pero con una sangría izquierda para indicar que esa segunda línea describe lo que se ha dicho en la primera. Tras escribir esta segunda línea y volver a pulsar Intro, el cursor regresará a su sangría normal.

• Para crear Listas anidadas

• Para establecer las

(combinación de listas), crear primero una lista sin ordenar o una lista ordenada y posteriormente aplicar a la línea o líneas deseadas

una sangría de texto mediante el icono . El párrafo o párrafos seleccionados se

desplazarán a la derecha y mostrarán viñetas diferentes. Utilizar el icono para adaptar la numeración en el caso de las listas ordenadas.

propiedades de las listas1. Colocar el cursor sobre la lista. Si lo hacemos sobre los puntos principales,

las modificaciones afectarán a todos estos; si lo hacemos sobre los puntos secundarios, las modificaciones solo afectarán a ese grupo secundario.

:

2. Seleccionar menú Texto>Lista >Propiedades o bien pulsar el botón

del panel Propiedades. 3. En las casillas Tipo de lista y Estilo ajustar el formato y estilo de lista

deseado. 4. En la casilla Iniciar recuento podemos introducir el valor que deberá tener

una lista que no comience por el número 1 5. Si queremos cambiar únicamente algunos elementos de la lista, situar el

cursor sobre dicho elemento y actuar igual que antes pero sobre las opciones de la sección Elemento de lista.

• Para cambiar la fuente predeterminada que aparece cuando comenzamos a escribir en DW:

1. Menú Edición>Preferencias>Fuentes, en la casilla Fuente proporcional, seleccionar la fuente que el programa utilizará para mostrar texto normal. El tamaño también se puede ajustar

• Para llevar a cabo la corrección ortográfica de un documento utilizar el menú Texto>Ortografía (proceder como lo haríamos en un procesador de texto).


Página - 20 -

• Para buscar un texto en un documento y reemplazarlo por otro ir al menú Edición>Buscar y reemplazar

SUGERENCIAS EN LA CONFECCIÓN DE LA WEB

• Presentar una estructura bien organizada • Diseñar la web en papel y hacer un mapa de distribución de las páginas uniendo con

líneas cada vínculo y su página correspondiente. • Recopilar toda la información que vayamos a colocar en la página (documentos de

texto, imágenes, símbolos, direcciones URL de enlaces a otras webs, archivos disponibles, etc.)

• Pensar el nombre que vamos a dar a cada página y archivo y apuntarlo. • Decidir si vamos a trabajar con tablas, plantillas, animaciones, capas, imágenes

mapeadas, sonidos, animaciones flash • Navegar por distintos webs para ir recopilando ideas. • Despertar el interés con el tema y la apariencia. • Incluir el acceso a todos los temas desde la página de bienvenida, o bien, si el tema de la

web es amplio, crear una página inicial tipo periódico por medio de una tabla y desde la misma página a modo de índice acceder al resto de documentos del sitio.

GUÍA PARA COMPONER CON ESTILO

• Utilizar 2 o 3 fuentes distintas en cada página • Líneas de texto cortas • Altura de texto de 10 a 12 píxeles • Alinear los textos por la izquierda • Dividir en varias páginas el contenido de la web (las páginas con mucha información

tardan más en cargarse) • No utilizar texto intermitente y no abusar de texto en mayúsculas • Utilizar iconos o símbolos que puedan sustituir un texto escrito y emplearel mismo estilo

para la creación de iconos. • Un icono que enlace con la página principal es de gran ayuda para las webs de muchas

páginas. • Utilizar pocos iconos animados (ralentizan la carga de la página) • Utilizar una barra de navegación o botones idénticos para todas las páginas. • No utilizar imágenes grandes es preferible utilizar miniaturas o tuhnbnails que luego

podamos ampliar • Utilizar colores pastel o neutros para el fondo. El fondo debe ser menos importante que

el contenido de la página y no debe dificultar la lectura del texto. • La descripción de los enlaces debe ser clara (evitar el clásico “Pinche aquí”) • Posibilitar la comunicación con los visitantes a través de email o formularios para

mejorar el trabajo • Avisar a los usuarios de la fecha de la última actualización • Si creamos enlaces a otras webs distintas, permitir la opción de que se carguen en una

ventana nueva del navegador


Página - 21 -

Unidad 3 ESTILOS CSS INTRODUCCIÓN Un estilo es un grupo de atributos de formato texto identificados por un nombre. El término en cascada se refiere a la secuencia ordenada de estilos. En DW cada estilo recibe inicialmente el nombre Estilo y un número. DreamWeaver trabaja por defecto con hojas de estilo en cascada (CSS) y determinadas combinaciones de atributos que aplicamos al texto las convierte en un estilo CSS que luego podemos utilizar para aplicárselo directamente de una sola vez a otro texto. Otros tipos de formato de texto como, p. ej., los encabezados que encontramos en el desplegable de la casilla Formato del panel Propiedades, no fuerzan la creación de un estilo CSS y lo que hacen es aplicar lo que se llama una etiqueta HTML. DreamWeaver trabaja combinando estilos CSS y estilos HTML, para especificar cómo queremos trabajar ir al menú Edición>Preferencias, activar la categoría General y seleccionar la casilla de Utilizar CSS en lugar de etiquetas HTML. El uso de estilos CSS permite entre otras cosas cambiar a la vez los atributos (propiedades) de texto que compartan un mismo estilo. Cada vez que se crea una combinación nueva de atributos de texto en una página, el programa crea un estilo nuevo que aparece en la casilla Estilos del panel Propiedades. PRÁCTICA CON ESTILOS SENCILLOS Para ver un ejemplo de estilos básicos realizar la siguiente práctica:

1. Escribir tres párrafos y aplicarles fuentes, tamaños, negritas y colores diferentes. 2. Comprobar los estilos creados en la casilla Estilos y aplicarlos a otros textos del documento.

Los estilos se aplican a la totalidad de un párrafo, palabra o fragmento, no es necesario seleccionarlo todo. No obstante podemos aplicar estilos a palabras sueltas o fragmentos de párrafos

3. En el panel de estilos (activar en menú Ventana<Estilos CSS)

ver cómo quedan configurados los estilos (pulsar en el icono +) y en las propiedades realizar algún cambio. Si realizamos alguna modificación en un estilo aplicado (formato, fuente, etc.) automáticamente se actualizan el resto de párrafos con ese estilo


Página - 22 -

4. Para borrar un estilo, seleccionarlo y pulsar seguidamente en la papelera de la

ventana estilos 5. Pulsar el botón Código en la ventana del documento para ver cómo se muestra el

código que define el trabajo con los estilos (<style type=”text/css”>) y por debajo del mismo aparecen los diferentes estilos creados.

COMENTARIOS SOBRE LOS ESTILOS

• Se pueden crear estilos CSS a partir de texto escrito, pero también se pueden crear desde cero (Propiedades de página)

• Es posible aplicar estilos CSS a texto en formato HTML como p.ej. encabezados h1, h2, listas, etc..

• Podemos tener estilos CSS internos, que solo afectan a la página en la que se encuentran y también podemos crear estilos CSS externos que pueden aplicarse a múltiples páginas a la vez, con lo cual, una modificación de un estilo externo puede cambiar el aspecto de todo el texto de uno o varios sitios a la vez.

• Aunque el programa asigna automáticamente los nombres de los estilos, se pueden cambiar y crear nuestros propios nombres, para ello:

1. En la casilla Estilo del panel Propiedades seleccionar la opción Cambiar nombre…

2. Seleccionar el estilo y asignar un nuevo nombre • Hay tres tipos de estilos CSS:

o Estilos personalizados o de Clase, que se pueden aplicar a párrafos enteros, fragmentos de párrafo, palabras o letras sueltas.

o Estilos de Etiqueta que se aplican a texto que ha sido conformado con etiquetas HTML (h1, h2, li, dl, etc.).

o Estilos de selector, que redefinen el formato de una determinada combinación de etiquetas que cumple unas determinadas condiciones.

ELEMENTOS DE CONTROL PARA CSS EL PANEL DE ESTILOS CSS Para activar el panel de estilos ir al menú Ventana>Estilos CSS, podremos ver los estilos asociados al documento actual y supervisar las reglas y propiedades CSS que afectan a un elemento de página actualmente seleccionado o las reglas y propiedades que afectan a todo un documento (botones Actual y Todo respectivamente):

También nos permitirá modificar las propiedades que afectan a todo un documento.


Página - 23 -

En la parte inferior del panel estilos vemos los botones:

Adjuntar una hoja de estilos externa

Crear un nuevo estilo

Editar un estilo

Borrar un estilo

Si pulsamos el botón , se abre un menú en el que encontraremos, además de los comandos citados, otros destinados al control de estilos CSS. EL MODO ACTUAL DEL PANEL CSS

Si activamos el botón del panel de estilos CSS podemos supervisar las reglas y propiedades CSS que afectan a un elemento de página que se encuentre actualmente seleccionado.

Para mostrar las reglas en cascada de la etiqueta seleccionada pulsar el icono , esto nos permitirá ver el nombre de estilo que tiene aplicado el texto seleccionado en la página. El icono

muestra la información acerca de la propiedad que hayamos seleccionado en el recuadro Resumen de la selección. Veamos un ejemplo, tomando la figura de abajo:

• Está resaltado el estilo .Estilo1, que indica que tenemos el cursor sobre un elemento de texto en la página que tiene este estilo aplicado.

• A la derecha de .Estilo1 aparece la etiqueta <p> indicando que se trata de un párrafo (HTML).

• En el apartado Propiedades de “.Estilo 1” , se muestran listadas en orden alfabético las propiedades que posee el estilo. Si deseamos añadir propiedades, hacer clic en el enlace Añadir propiedad y seleccionar la propiedad que deseemos.

• Si activamos el icono , las propiedades de los estilos aparecen en la lista y únicamente estarán en color azul aquellas que estén siendo utilizadas por el estilo. Las propiedades aparecen clasificadas en grupos que podremos expandir o contraer para ver su contenido.

• Para volver al modo de visualización anterior,

pulsar en el icono . • Todos los cambios que realicemos en este panel

se reflejarán de forma inmediata en los textos que contengan el estilo CSS editado.


Página - 24 -

EL MODO TODO DEL PANEL CSS El botón Todo del panel CSS muestra todas las reglas CSS definidas para el documento actual, independientemente de que estén en una hoja de estilos externa o en el mismo documento. En este modo podemos editar directamente las propiedades y parámetros de un estilo CSS sin necesidad de que el cursor tenga que estar situado en un elemento de texto que contenga un estilo.

CREAR ESTILOS INTERNOS con Propiedades de página Sólo se utilizan en el documento actual. Si queremos que el sitio Web tenga un estilo uniforme en todas las páginas, debemos utilizar una hoja de estilos externa vinculada al sitio (opción recomendada). Un método para crear estilos CSS internos es a través de la ventana Propiedades de página (otro

método que veremos será con la opción Nueva regla). Los atributos que asignemos en las categorías Aspecto, Vínculos, y Encabezados se convertirán directamente en estilos CSS. Se trata de estilos generales de la página. Destacamos entre otros:

• En la categoría Aspecto podemos definir entre otros la Fuente de página(fuente de los párrafos), tamaño, color, color de fondo, imágenes, etc.

• En la categoría Vínculos, el color de los vínculos y el estilo de los mismos • En la categoría Encabezados, establecemos los títulos de las secciones, su fuente,

tamaño y color


Página - 25 -

PRÁCTICA con ESTILOS INTERNOS

1. Crear un nuevo documento de nombre practica1_cssinterno .html en nuestro sitio local 2. Pulsar el botón 3. Introducir lo siguiente:

• en la categoría Aspecto: Fuente de página (se aplica a los párrafos) Verdana, Color, blanco y Color de fondo verde oscuro (utilizar el selector de colores), Tamaño, 11 píxeles.

• En la categoría Vínculos: en Color de vínculo seleccionar marrón oscuro, en Vínculos visitados seleccionar marrón claro, en Vínculo de sustitución (cambia el color del enlace cuando situamos el cursor en el mismo) de color verde claro. En Estilo subrayado , seleccionar Mostrar subrayado solamente al situar cursor encima .

• En la categoría Encabezados: Fuente de encabezado, Times new roman, en Encabezado 1, a 16 píxeles y en la casilla color introducir un color gris.

4. Pulsar Aceptar para guardar los cambios y comprobar en el panel estilos CSS los atributos aplicados. Se mostrará la ventana:

Se trata de estilos generales de la página y no se puede cambiar su nombre ya que no son estilos personalizados. En el panel estilos CSS vemos las diferentes propiedades de cada estilo y podemos modificarlos (sin necesidad de pulsar las Propiedades de página) o añadir nuevos, para ello ir a las Propiedades en la parte inferior del panel.


Página - 26 -

CREAR ESTILOS INTERNOS con el botón NUEVA REGLA CSS

1. En el panel estilos CSS hacer clic en el icono Nueva regla CSS o bien menú Texto>Estilos CSS>Nuevo.

2. En la ventana Nueva regla CSS (ver figura), en Tipo de selector seleccionar entre:

• Clase: permite crear un estilo personalizado que puede aplicarse a un rango o bloque de texto (cualquier tipo de texto en la página).

• Etiqueta: redefinir el formato predeterminado que posee una etiqueta HTML. Es el tipo de estilo adecuado para cambiar por ejemplo los atributos de los encabezados h1, h2, h3, etc.

• Avanzadas: redefinir el formato predeterminado de una combinación específica de etiquetas.

3. En la casilla Nombre debemos introducir una información que dependerá del tipo de selector elegido:

• Con el selector clase introducir el nombre que tendrá el estilo que vamos a crear precedido por un punto.

• Con el selector Etiqueta podemos seleccionar del desplegable la etiqueta para la que vamos a crear un nuevo estilo (p. ej. h2 o p, etc..).

• Con el selector Avanzadas podemos aplicar estilos sólo al texto que contenga una determinada combinación de etiquetas.

4. Por último, en la sección Definir en, podemos decidir entre crear estilos sólo para el documento activo (Sólo este documento) o bien, crear un archivo de estilos externo mediante la opción (Nuevo archivo de hoja de estilos)

Si hemos seleccionado un estilo de clase, al aceptar veremos la ventana que se muestra abajo y en ella aplicaremos los atributos deseados. Para aplicar este estilo de clase, seleccionar en el documento el texto deseado y en el panel Propiedades seleccionarlo de la lista Estilo


Página - 27 -

PRÁCTICA con EL SELECTOR DE CLASE

1. Crear un documento de nombre practica2_cssinterno.html 2. Seleccionar Nueva regla CSS 3. Elegir el selector clase y ponerle de nombre .parrafo, y sólo para este documento 4. Insertar distintos atributos de uente, tamaño, color, etc. (categoría Tipo) 5. Seleccionar el texto en el documento al que aplicaremos el estilo y en la casilla estilo

elegir el estilo creado (.parrafo) 6. Realizar posteriormente cambios en las propiedades y comprobar los mismos. 7. Crear 2 nuevos estilos de clase llamados .titulo1 y .titulo2 con los atributos deseados.

Si hemos aplicado el mismo estilo de clase a distintas partes del documento, al realizar alguna modificación en sus propiedades se actualizarán automáticamente. PRÁCTICA con EL SELECTOR DE ETIQUETA

1. Crear un documento de nombre practica3_cssinterno.html 2. Seleccionar Nueva regla CSS 3. Elegir el selector de etiqueta y en el desplegable buscar h3 y sólo este documento Vamos a definir un estilo con el selector de etiqueta para los el encabezado h3, para ello:

• En el panel CSS hacer clic en el icono Nueva regla CSS , y elegir la opción Etiqueta. • En el desplegable buscar la etiqueta correspondiente a h3 y activar la opción Sólo este

documento. • Ajustar en la categoría Tipo de la ventana Definición de regla,la fuente, el tamaño y

color para el encabezado, cambiar también en la categoría Fondo ,el color. Al Aceptar todos los encabezados de la página a ese nivel adoptan el estilo.

EDICIÓN DE ESTILOS CSS Para cambiar el aspecto de todo el texto que tenga un estilo aplicado, se pueden realizar varias cosas:

A. En el panel CSS seleccionar el estilo a modificar y pulsar seguidamente el icono Editar

estilo y en la ventana Definición de regla ajustar los cambios. B. Hacer clic con el botón derecho sobre un estilo en el panel CSS y elegir entre varias

opciones del menú contextual para borrar, duplicar, editar, etc.

C. En el panel CSS seleccionar el estilo a modificar y utilizar los botones para mostrar las propiedades y cambiar el estilo.

CREAR ESTILOS EXTERNOS CSS Si necesitamos emplear los mismos estilos CSS en varias páginas, en lugar de volver a crear los estilos, es preferible crear una hoja de estilos externa lo cual permitirá que cualquier página pueda acceder a ellas. Al utilizar hojas de estilo externas podemos cambiar rápidamente el aspecto del texto de todas las páginas simplemente editando el estilo CSS. Los archivos reciben la extensión .css y es conveniente clasificarlos en una carpeta que puede recibir el nombre CSS Dos métodos:

A. Crear una hoja de estilos interna como se ha visto, (Propiedades de página ,Nueva regla CSS o estilos directamente) seleccionar los formatos de estilo y con el botón derecho del ratón seleccionar Mover reglas CSS , indicar el nombre del estilo externo y guardarlo en una carpeta de nuestro sitio local(p. ej. CSS).


Página - 28 -

B. En la página Web actual (o en una en blanco) en el panel CSS, Nueva regla CSS • Etiqueta>seleccionar la etiqueta deseada y en el apartado Definir en: >Nuevo

archivo de hoja de estilos asignar un nombre a la hoja de estilos externa y definir el conjunto de formatos.

• Clase> poner un nombre al estilo de clase (.nombre) y en el apartado Definir en: >Nuevo archivo de hoja de estilos asignar un nombre a la hoja de estilos externa y definir el conjunto de formatos.

Cuando confeccionamos un estilo externo aparece una pestaña con el documento donde se muestran los códigos que definen el estilo, es preciso guardar este documento en el menú Archivo.


Página - 29 -

APLICAR UNA HOJA DE ESTILOS EXTERNA A OTRAS PÁGINAS

1. Abrir un archivo existente o un nuevo documento

2. Hacer clic en el icono Adjuntar hoja de estilos del panel estilos CSS 3. Pulsar el botón Examinar.. y localizar el archivo .css 4. Activar la opción Vincular y Aceptar

Cada vez que hagamos un cambio en alguno de los estilos de una página automáticamente se modificará en todas las páginas que están vinculadas. Nota: Es preciso que en cada página apliquemos los formatos (párrafo, encabezados, etc..) CONVERTIR UN ESTILO CSS INTERNO EN EXTERNO Si hemos creado un conjunto de estilos interno:

1. Abrir el documento que tenga los estilos CSS internos 2. Seguir uno

• Seleccionar todos los estilos con el ratón (utilizar tecla Mayúscula y hacer clic), posteriormente, con el botón derecho del ratón seleccionar Mover reglas CSS>Nueva hoja de estilos y asignar un nombre al estilo externo.

de estos pasos:

• Menú Archivo>Exportar>Estilos CSS y poner un nombre de archivo y una ubicación para el archivo externo (guardarlo en el sitio local con la extensión css)

3. Una vez exportada la hoja de estilos externa, si deseamos que el documento utilice exclusivamente ese estilo externo, debemos eliminar primero todos los estilos internos que pueda tener la página antes de vincularla.

Nota: Si creamos una etiqueta como estilo (ya sea interno o externo)por ejemplo <p> o

cualquier h1,h2,h3, seleccionar en Formato del panel PropiedadesPárrafo o Encabezado 1,Encabezado 2, etc.. y en la casilla EstiloNinguno

Si queremos que prevalezca el estilo de Clase, en Formato del panel Propiedades seleccionar Ninguna y en la casilla Estiloel estilo de Clase deseado.

ANEXO: HOJAS DE ESTILO EN CASCADA (fuente ANAYA MULTIMEDIA)

CREAR UNA HOJA DE ESTILOS INCRUSTADA Para gestionar las tareas de formato, como fijar los colores de fondo de la página, los tipos y tamaños de las fuentes y los márgenes de página, etc. utilizar el botón Propiedades de página…., de este modo se crea una hoja de estilos incrustada que permite aplicar posteriormente esos formatos a los distintos elementos de la página actual. Pasos:

1. Pulsar el botón , o utilizar la misma opción en el menú contextual.

2. Insertar los parámetros para las distintas categorías y pulsar Aceptar. 3. Asignar a los distintos elementos de la página los encabezados.


Página - 30 -

CREAR UNA HOJA DE ESTILOS EXTERNA Si queremos que todas las páginas del sitio tengan el mismo aspecto sólo hay que definir la CSS una vez y aplicarla después al resto de páginas a través de dicha hoja de estilos externa. Las hojas de estilo externas también llamadas vinculadas, cuando se introduce un cambio en una hoja de estilo externa todas las páginas vinculadas a ella se actualizan automáticamente para reflejar las características nuevas. Para exportar un estilo incrustado como un archivo CSS externo y aplicar éste a varias páginas a la vez:

1. Si la página actual ya contiene una hoja de estilos incrustada (sino crearla por los métodos ya vistos), ir al panel estilos CSS, pulsar el botón Todo y seleccionar con el ratón todas o parte de las reglas del estilo incrustado.

2. Con el botón derecho del ratón sobre la selección, elegir la herramienta Mover reglas CSS y activar el botón radial Una nueva hoja de estilos o una existente y Aceptar.

3. Guardar en una carpeta creada a tal efecto (p. ejemplo CSS) dentro de nuestro sitio local con un nombre de archivo. Automáticamente se crea una ficha con el nombre del estilo.

APLICAR LA HOJA DE ESTILOS EXTERNA A OTRAS PÁGINAS

1. Abrir el archivo al que vamos a aplicar el estilo 2. Insertar en el documento los distintos tipos de encabezados que deseemos (o hacerlo

posteriormente).

3. Pulsar el icono Adjuntar hoja de estilos , botón Vincular y seleccionar de la carpeta el nombre de archivo que contiene el estilo.

4. Repetir el paso -3- para cada hoja. Una vez creada una hoja de estilos externa es fácil el mismo formato a varias páginas con sólo adjuntar la hoja de estilos externa a cada una de ellas. CAMBIAR LA HOJA DE ESTILOS EXTERNA Para cambiar la hoja de estilos externa y ver cómo cambia en cascada en todas las páginas vinculadas a ella:

1. En el panel estilos CSS de cualquiera de los documentos hacer clic en alguna regla (por ejemplo body) y cambiar las propiedades del elemento seleccionado.

ESTILOS CSS DE MUESTRA Para ahorrar trabajo podemos aprovechar las hojas de estilo de muestra de la aplicación de Dreamweaver. Dos métodos:

11ºº.. Seleccionar menú Archivo>Nuevo>Página de muestra, veremos el cuadro de diálogo Nuevo documento (ver la figura de la página siguiente).

•• En la carpeta de muestra seleccionar hojas de estilo CSS y elegir una plantilla de estilo prediseñada.

•• Pulsar el botón Crear para abrir un documento CSS en vista Código y realizar si lo deseamos los cambios necesarios, posteriormente guardar el estilo con un nombre (menú Archivo>Guardar), para utilizarlo como hoja de estilos externa vinculándola a la página Web deseada.

22ºº.. Crear un documento nuevo o abrir uno existente que no contenga estilos.

•• En el panel de estilos CSS hacer clic en el icono Adjuntar hoja de estilos , en el cuadro de diálogo que aparece pulsar en el enlace hojas de estilo de muestra para acceder a la ventana de plantillas de CSS y seleccionar el estilo deseado.

•• La página que tengamos abierta adoptará automáticamente los estilos CSS.


Página - 31 -

La diferencia entre aplicar uno u otro método reside en que si aplicamos el método -B- los estilos quedan incluidos en la página, es decir, son estilos internos. DISEÑOS PREFIJADOS En Dreamweaver disponemos de 30 diseños de página CSS listos para ser utilizados. Para ello:

11ºº.. Seleccionar menú Archivo>Nuevo>Página en blanco 22ºº.. En el recuadro Tipo de página hacer clic en HTML 33ºº.. En la columna central seleccionar un diseño 44ºº.. Pulsar el botón Crear y se abrirá un nuevo documento en el que podemos manipular lo

que deseemos. En la lista de diseños nos encontramos: Columna fija: el ancho de columna se especifica en píxeles. La columna no cambia en función del tamaño del navegador o de la configuración del visitante. Columna estática: el ancho de columna se especifica en una unidad de medida (ems) relacionada con el tamaño del texto. El diseño se adapta si el visitante del sitio cambia la configuración del texto , pero no en función del tamaño de la ventana del navegador. Columna Flotante: El ancho de la columna se especifica como % del tamaño del navegador del visitante; el diseño se adapta si el visitante del sitio amplia o reduce el navegador, pero no en función de la configuración del texto. Híbrida: Combinación de las anteriores.


Página - 32 -

Unidad 4 ENLACES O VÍNCULOS INTRODUCCIÓN Un vínculo en HTML es un texto o una imagen que nos permite acceder a otro lugar en el sitio Web o fuera de éste. El vínculo está compuesto de 2 partes:

11.. El nombre y la ruta del archivo o página a la que se quiere vincular 22.. El texto o imagen en donde hacemos clic

RUTAS RELATIVAS Y ABSOLUTAS La ruta de un vínculo es el lugar a donde tiene que ir el navegador para buscar el archivo o página a que hace referencia dicho vínculo. Para explicar los enlaces y los tipos de ruta tomaremos como ejemplo la figura que se muestra abajo. Podemos clasificar las rutas en 3 tipos:

AA.. RELATIVAS: Es el tipo de ruta que se utiliza para todos los vínculos locales, es decir, aquellos que nos conducen a páginas y archivos ubicados dentro del propio sitio. El documento actual y el documento con el que se establece el vínculo se encuentran en la misma carpeta del sitio o en otra carpeta del mismo sitio. Supongamos que estamos creando distintos vínculos en el archivo nacionales.html de la carpeta Ofertas, para especificar rutas relativas hay que tener en cuenta:

• Si el archivo se encuentra dentro de la misma carpeta

• Si el archivo se encuentra

solo hay que especificar el nombre del archivo de destino. Por ejemplo internacionales.html en la carpeta Ofertas.

en otra carpeta del mismo sitio

• Si deseamos establecer un vínculo

, hay que indicar el nombre de la carpeta seguido de una barra diagonal / y del nombre del archivo de destino. Por ejemplo si creamos un vínculo desde nacionales.html a la imagen botón 1.gif que se encuentra en la carpeta images, la ruta sería ../images/botón 1.gif.

que enlace nacionales.html con un documento situado en el directorio raíz (directorio padre9 es necesario colocar . . /seguido del nombre del archivo.

BB.. ABSOLUTAS: Es el tipo de ruta que hay que especificar cuando se trata de vínculos a

páginas o archivos externos a nuestro sitio Web (p. ejemplo http://www.lonelyplanet.com)


Página - 33 -

CC.. RELATIVAS A LA RAÍZ: Se refieren siempre a la raíz del sitio local, es decir, indican la ruta desde la carpeta raíz hasta el documento. En ese caso colocar la barra /. Por ejemplo, si estamos en el archivo index.html de la carpeta raíz y queremos crear un vínculo con el archivo nacionales.html de la carpeta Ofertas debemos escribir la ruta /ofertas/nacionales.html

Antes de crear un vínculo es aconsejable guardar el documento. ASIGNAR UN VÍNCULO El procedimiento para establecer la ruta del vínculo es siempre el mismo:

11.. Seleccionar el elemento de la página al que estableceremos el vínculo, ya sea un texto o una imagen.

22.. En la casilla vínculo del panel Propiedades seguir uno

• Escribir la ruta del vínculo manualmente de estos métodos :

• Hacer clic en el icono de la carpeta y seleccionar el archivo con el que queremos vincular (ver en la página siguiente “ENLAZAR CON LA FUNCIÓN BUSCAR ARCHIVO”)

• Arrastrar el icono Señalar archivo hacia el archivo que queremos vincular en el panel Archivos(ver en la página siguiente “ENLAZAR CON LA FUNCIÓN SEÑALAR ARCHIVO”)

• Menú Modificar>Crear vínculo y seleccionar el archivo. VÍNCULOS DE TEXTO

11.. En la página, seleccionar el texto que deseemos. Puede ser una letra, palabra o un conjunto de palabras.

22.. Indicar la ruta por utilizando alguno de los métodos anteriores PRÁCTICA con VÍNCULOS

11.. Crear tres páginas llamadas home.html, uno.html, dos.html y tres.html 22.. En la página home.html:

• escribir un texto llamado Salta a la página UNO y crear un vínculo a uno.html • “ “ Salta a la página DOS y crear un vínculo a dos.html • “ “ Salta a la página TRES y crear un vínculo a tres.html

33.. Guardar la página 44.. En el documento uno.html escribir; principal, página DOS y página TRES y asignar a cada

uno de los textos sus enlaces correspondientes. 55.. En el documento dos.html escribir; principal, página UNO y página TRES y asignar a cada

uno de los textos sus enlaces correspondientes. 66.. En el documento tres.html escribir; principal, página UNO y página DOS y asignar a cada

uno de los textos sus enlaces correspondientes.


Página - 34 -

CAMBIO DE ATRIBUTOS PARA LOS VÍNCULOS DE TEXTO Los vínculos de texto aparecen con el mismo tipo de letra que la fuente de la página, en color azul y subrayados. Para cambiar el aspecto de los vínculos:

11.. Seleccionar el botón Propiedades de página del panel Propiedades y en la categoría Vínculos: elegir el color para los cuatro tipos de vínculos de texto posibles:

• Color de vínculo: color de los vínculos no visitados • Vínculos visitados: color que mostraran los vínculos que se hayan visitado • Vínculos de sustitución: el color que mostrará el texto de un vínculo cuando el

cursor del ratón pase por encima • Vínculos activos: color que mostrará el texto de un vínculo cuando éste sea

pulsado con el ratón.

En la casilla Estilo subrayado podemos decidir si queremos que el texto de los vínculos aparezca o no subrayado o que éste aparezca sólo en determinadas condiciones.

ENLAZAR CON LA FUNCIÓN SEÑALAR ARCHIVO Permite seleccionar archivos de nuestra carpeta raíz local (evitando de este modo de enlazar con archivos fuera del sitio local).

1. Seleccionar el texto o imagen del documento abierto

2. Pulsar el icono Señalar archivo (en el inspector de Propiedades, a la derecha de Vínculo) y arrastrar hacia el archivo deseado en el panel Archivos.

3. En el apartado Dest del inspector de Propiedades (destino) podemos indicar si queremos que se muestre la página en una nueva ventana (_blank), en la misma ventana (_parent), _self o _top.

4. Para borrar un enlace, seleccionarlo del apartado Vínculo en el inspector de Propiedades y pulsar tecla Supr.

ENLAZAR CON LA FUNCIÓN BUSCAR ARCHIVO

1. Seleccionar el texto o imagen del documento abierto

2. Pulsar el icono Buscar archivo en el apartado Vínculo del inspector de Propiedades 3. Indicar la carpeta que contiene el archivo a vincular. Podemos pulsar en el botón Raíz

del sitio para evitar seleccionar archivos que estén fuera del sitio local.

CREAR ENLACES DE CORREO ELECTRÓNICO Abren automáticamente la aplicación de correo electrónico predeterminada del usuario e inserta la dirección del destinatario en el campo To:

1. Seleccionar una imagen o texto del documento

2. Pulsar el icono Vínculo de correo electrónico del grupo Común de la barra Insertar 3. Introducir la dirección de correo y Aceptar

O bien

1. Seleccionar una imagen o texto del documento 2. En el inspector de propiedades escribir en el apartado Vínculo mailto: seguido de la

dirección de correo y pulsar a tecla Intro


Página - 35 -

Nota: Si nuestros visitantes disponen de un correo Web y no de una aplicación como Outlook, escribir directamente la dirección en la página como vínculo para que puedan copiar y pegarla en su programa de correo.

CREAR MARCADORES (ANCLAJES) EN EL DOCUMENTO ACTUAL En los documentos con gran cantidad de texto o de varias secciones, para saltar a una posición concreta, insertamos un marcador o anclaje ,evitando de este modo utilizar la barra de desplazamiento. Normalmente se utilizan para saltar a la primera o última posición de una página.

1. Situar el cursor en la

2. En la pestaña Común (barra Insertar) seleccionar el icono Anclaje con nombre y escribir un nombre para el marcador.

posición a la que saltaremos

3. Desplazar el cursor a la posición desde la que saltaremos al marcador y seleccionar el texto o imagen.

4. En el inspector de Propiedades, en el apartado Vínculo, arrastrar el icono Señalar archivo

hasta el marcador (ancla). En el apartado Vínculo veremos el texto #nombre de la marca.

5. Repetir los pasos 1 a 4 para el resto de marcadores PRÁCTICA con MARCADORES

• Crear un índice de temas (aproximadamente 15 líneas) y establecer marcadores para saltar a las definiciones de esos temas y viceversa.

CREAR MARCADORES (ANCLAJES) A OTRA PÁGINA DEL SITIO LOCAL

1. Abrir la página (página que contendrá el marcador) de nuestro sitio local y situar el cursor en la posición a la que saltaremos

2. En la pestaña Común (barra Insertar) seleccionar el icono Anclaje con nombre y escribir un nombre para el marcador.

. Guardarla.

3. Abrir la página desde la que saltaremos

4. En el inspector de Propiedades, dentro del apartado Vínculo, escribir el nombre del archivo al que saltaremos seguido del símbolo # (almohadilla) y el nombre de la marca asignada a la otra página.

(hipervínculo) al marcador y seleccionar el texto o imagen.

VÍNCULOS CON ARCHIVOS Permiten descargar a nuestro ordenador un archivo de cualquier tipo. Normalmente archivos del tipo PDF o de música MP3, de fotografías y de vídeo de todos los formatos. Los archivos que deseen descargar los visitantes de nuestra página deberán estar ubicados en una carpeta de nuestro sitio local , en ese sentido es conveniente crear un directorio llamado por ejemplo Archivos y guardar en la misma los ficheros comprimidos en .ZIP, .RAR o en PDF. Para colocar los archivos en el directorio de nuestro sitio local:

• En el Explorador de Windows, Copiar y Pegar los archivos (pdf, .zip, .rar, mp3, etc.) a la carpeta de nuestro sitio local


Página - 36 -

Posteriormente:

1. Seleccionar el texto o imagen al que aplicaremos el vínculo

2. En el panel de Propiedades introducir la ruta del archivo, o bien, utilizar el icono o

(también con la tecla MAYÚSCULA fija, arrastrar desde el texto hasta el archivo situado en el panel Archivos).

3. En función del tipo de archivo de que se trate:

A. Archivo PDF: si tenemos Adobe Acrobat Reader instalado, el documento PDF se abrirá integrado en el navegador.

B. Archivo multimedia: del tipo MP3, AVI, WMV, MPEG, etc. se abrirá directamente en el programa reproductor que tenga asociado.

C. Archivo de imagen: se abre la imagen en el explorador. Dependiendo de la opción que hayamos seleccionado en la casilla Destino del panel Propiedades.

D. Archivo comprimido: si tenemos una serie de archivos comprimidos, -en el explorador de Windows seleccionar los archivos con el botón derecho del ratón y elegir Add to Zip o bien Enviar>Carpeta comprimida en Zip- se abrirá la aplicación winzip o winrar para permitirnos descomprimir el archivo (s) y guardarlos donde deseemos.

E. Archivos de otro tipo: el navegador mostrará una ventana en la que nos preguntará si deseamos guardar el archivo o visualizarlo en alguna aplicación determinada..

CREAR VÍNCULOS GRÁFICOS Se pueden aplicar vínculos a los gráficos Con objeto de que nos permitan enlazar con otras páginas, otros gráficos, archivos, etc. Para ello:

1. En la página seleccionar la imagen que deseemos actúe como vínculo. 2. Asignar la ruta del archivo utilizando alguno de los métodos anteriores

ASIGNACIÓN DE DESTINO A LOS VÍNCULOS Cuando asignamos un vínculo a un texto o imagen podemos indicar en la casilla Dest (Destino) del panel Propiedades la ventana donde se cargará el archivo vinculado. Tenemos varias opciones: _blank: carga el archivo vinculado en una nueva ventana del navegador. De este modo

evitamos retroceder con las teclas del navegador para volver a acceder a la página desde la que se ha llamado al vínculo.

_parent: carga el archivo vinculado en la ventana del marco que contiene el vínculo. _self: carga el archivo vinculado en el mismo marco o ventana del navegador. Al activar el

vínculo la página que teníamos en pantalla desaparece y queda sustituida por la del vínculo. Para volver a ver la página del vínculo, debemos pulsar en la tecla Retroceder

del navegador. _top: carga el archivo vinculado en la ventana completa del navegador


Página - 37 -

CREAR UN ENLACE A UNA PÁGINA FUERA DEL SITIO LOCAL

1. Seleccionar el texto o imagen 2. En el inspector de Propiedades dentro del apartado vínculo escribir la dirección

URL incluyendo el protocolo (p. ej. http://www.deusto.es) CREAR ENLACES A ARCHIVOS COMPRIMIDOS

1. Comprimir el archivo (s), para ello seleccionar los ficheros y con el botón derecho del ratón seleccionar

2. Copiarlo posteriormente con el explorador de Windows a la carpeta de

nuestro sitio local. 3. Seleccionar el texto o imagen y arrastrar hasta el archivo en formato .ZIP del

panel Archivos. MAPA DE IMÁGENES Permiten crear distintas secciones con vínculos en una imagen mediante la creación de objetos rectangulares, elipses o dibujos a mano alzada. Pensemos en un mapa geográfico con las distintas localidades como enlaces. Para crear un mapa de imagen:

1. Seleccionar la imagen en la que vamos a crear el mapa de imagen.

2. Crear las zonas sensibles pulsando los iconos y arrastrar en la imagen para crear zonas interactivas rectangulares, ovales o poligonales irregulares. La tecla MAYÚSCULA ayuda a crear cuadrados perfectos.

3. Asignar un nombre a la imagen en el inspector de Propiedades (en la casilla Alt) y

seleccionar una a una las zonas definidas, posteriormente asignarles los

correspondientes vínculos según los métodos ya comentados ( ).

4. Repetir los pasos -2- y -3- para el resto de los enlaces.

EDITAR LAS ZONAS SENSIBLES Una vez creadas las zonas, para poder editarlas hacer clic con el puntero del ratón y arrastrar los delimitadores o bien cambiar los vínculos asignados. Si realizamos un trazo con la herramienta poligonal, crear un contorno haciendo sucesivos clic y cuando terminemos de trazar pulsar ESC y hacer clic fuera del lugar de la zona.

http://www.deusto.es/�


Página - 38 -

PRÁCTICA CON MAPAS DE IMAGEN

1. Crear un sitio nuevo llamado Turismo en Euskadi 2. Crear un nuevo archivo llamado default.html e insertar una imagen de Euskadi. 3. Crear enlaces (utilizar poligonal) en las distintas provincias a las páginas bizkaia.html,

gipuzkoa.html y araba.html (que previamente habremos creado o que podremos crear con un titular y el contenido de una foto de la provincia).

4. De cada una de las páginas insertar un vínculo para volver a la página principal (podemos copiar y pegar el mismo vínculo en todas las páginas)

CREACIÓN DE BARRAS DE NAVEGACIÓN Mediante una barra de navegación podremos crear un menú de opciones en el que los botones pueden presentar hasta cuatro estados y aspectos distintos en función de lo que se haga en ellos con el ratón. Necesitamos tener creados los gráficos correspondientes para cada uno de los estados de los botones. Pasos:

1. Situar el cursor en el lugar de la página donde queremos crear la barra de navegación 2. Menú Insertar>Objetos de imagen>Barra de navegación , o bien ficha Insertar>

. Sólo podemos definir una barra de navegación por página. 3. En el cuadro de diálogo Insertar barra de navegación (ver figura):

• Introducir un nombre de elemento para el botón (p. ej. botón_1). Los diferentes elementos que vayamos creando se mostrarán en el recuadro Elementos de barra de navegación.

• En Imagen arriba, insertar la imagen que veremos cuando aún no se ha hecho clic en el elemento.

• Sobre imagen, la imagen que aparecerá cuando el puntero se mueva sobre el botón .

• En Imagen abajo insertar la imagen que aparecerá después de hacer clic en el elemento.

• En Sobre mientras imagen abajo, insertar la imagen que veremos cuando el puntero pase sobre va imagen Abajo después de haber hecho clic sobre el elemento


Página - 39 -

• En Texto alternativo, escribir el texto que aparecerá en los navegadores que no puedan reproducir imágenes o en lectores de pantalla.

• En Al hacer clic, ir a URL, introducir la ruta y nombre del archivo vinculado o la página Web cuando hagamos clic con el ratón.

o Mediante las teclas podemos añadir o eliminar elementos de la barra de navegación.

o Los botones permiten cambiar el orden de los elementos de la barra.

• En el campo Insertar, podemos indicar si la barra debe aparecer en forma horizontal o vertical.

• Si marcamos la casilla Utilizar tablas, los elementos de navegación se insertarán en una tabla.

• Para modificar la barra de navegación creada, pulsar de nuevo el icono

de la ficha Insertar>Común>Barra de navegación. PRÁCTICA BARRA DE NAVEGACIÓN

1º. Crear cuatro imágenes de botones personalizados empleando http://jirox.net/AsButtonGen/ (en las imágenes escribir UDeusto, Home, Bilbao y Bizkaia respectivamente) y otras cuatro imágenes con los mismos datos pero con otros colores. Guardar las imágenes en una carpeta de nuestro sitio.

2º. Crear posteriormente cuatro archivos llamados home.html, bilbao.html y bizkaia.html e introducir algún detalle en los mismos para identificarlos.

3º. En el documento home.html insertar una barra de navegación incluyendo : a. Un botón llamado UDeusto utilizando las imágenes guardadas , su enlace será

a la página de la universidad de Deusto (http://www.deusto.es) b. Un botón llamado Bilbao utilizando las imágenes guardadas , su enlace será a

la página de bilbao.html c. Un botón llamado Bizkaia utilizando las imágenes guardadas, su enlace será a

la página de bizkaia.html. 4º. Copiar la barra de navegación del documento home.html a las páginas bilbao.html y

bizkaia.html y añadir en las mismas un nuevo botón para volver a la página principal. ADMINISTRACIÓN DE LOS VÍNCULOS Cuando se está creando un sitio Web, suele ser habitual realizar cambios que pueden provocar la rotura de los vínculos. Para evitar esto podemos activar la administración de vínculos de manera que se actualicen de forma automática cuando llevemos a cabo algún cambio, para ello activar la administración de vínculos :

• Seleccionar menú Edición>Preferencias>General • Activar la casilla actualizar vínculos al mover archivos :

o Siempre, el programa actualizará de forma automática todos los vínculos con origen y destino en un documento seleccionado cada vez que éste se mueva o se renombre.

o Mensaje, sucederá lo mismo pero se pedirá confirmación previamente.

http://jirox.net/AsButtonGen/�

http://www.deusto.es/�


Página - 40 -

EDITAR VÍNCULOS EN MAPA DEL SITIO Es posible modificar la estructura del sitio en la ventana Mapa del sitio, añadiendo, cambiando o eliminando vínculos. DW actualizará automáticamente el mapa del sitio mostrando los cambios realizados. Para crear un vínculo desde la ventana Mapa del sitio y realizar alguna de estas acciones:

1) Previamente pulsar el botón Expandir para mostrar sitios locales y remotos

2) En la ventana que aparece, pulsar el botón Mapa del sitio para mostrar sólo el mapa o bien el mapa y archivos. Veremos la ventana de la figura:

del panel Archivos.

• Seleccionar una página y veremos el símbolo Señalar archivos . Arrastrar este icono hasta el objeto con el que deseemos vincularlo.

• Seleccionar una página y con el botón derecho del ratón elegir la opción Vincular a archivo existente y en la ventana que se muestre elegir el archivo a vincular.

• Arrastrar el archivo de una página desde el explorador de Archivos hasta una página del sitio.

3) Para cambiar un vínculo

4) Para

desde la ventana Mapa del sitio, seleccionar la página cuyo vínculo queremos cambiar y con el botón derecho del ratón elegir Cambiar vínculo… , posteriormente, elegir el archivo a vincular.

eliminar un vínculo desde la ventana Mapa del sitio, seleccionar la página cuyo vínculo queremos eliminar y con el botón derecho del ratón elegir Quitar vínculo, Con esta opción no se elimina el archivo vinculado. Si queremos añadir de nuevo el vínculo, seleccionar la página y con el botón derecho elegir: Vincular a archivo existente o bien Vincular a nuevo archivo.


Página - 41 -

CAMBIAR UN VÍNCULO EN TODO EL SITIO Podemos cambiar manualmente todos los vínculos incluidos los de correo electrónico, FTP, etc.. para que señalen a otro lugar. Para cambiar un vínculo a todo el sitio:

1) Seleccionar el archivo cuyo vínculo deseamos cambiar. 2) Seleccionar el menú Sitio>Cambiar vínculo en todo el sitio 3) En la casilla Cambiar todos los vínculos a, se mostrará la ruta y nombre del archivo. 4) En la casilla Por vínculos a, escribir la ruta y nombre del archivo al cual se dirige el

vínculo. Una opción útil es cambiar en todo el sitio una dirección de correo por otra distinta.


Página - 42 -

Unidad 5 TABLAS Las tablas permiten ubicar los elementos de las páginas con mayor precisión. CREAR TABLAS Utilizar uno de estos métodos:

• Menú Insertar>Tabla

• Ficha Insertar>Común> Botón Tabla

• Arrastrar el icono de Tabla a la página Veremos el cuadro de diálogo de Tabla:

Ajustar los diferentes valores como son: • Grosor (0 sin bordes) • Relleno de celda (espacio entre el contenido y el borde) • Espacio entre celdas (espacio entre las celdas de la tabla) • Encabezado para insertar texto con formato en la primera fila, primera columna o

en ambas. • Accesibilidad, permite añadir un texto de cabecera a la tabla.

SELECCIONAR UNA TABLA Utilizar uno de los siguientes métodos:

• Hacer clic cuando veamos el puntero convertirse en al acercarnos a un borde de la tabla.

• Llevar el cursor a la esquina superior izquierda y hacer clic • Hacer clic en el selector de etiqueta <table> • En una celda de la tabla ir al menú Modificar>Tabla>Seleccionar tabla


Página - 43 -

Veremos los delimitadores de la tabla

SELECCIONAR FILAS, COLUMNAS Y CELDAS Utilizar cualquiera de estos métodos:

• Situar el cursor en el lado izquierdo de la fila o en la parte superior de la columna y hacer clic.

• Situar el cursor en la primera celda de la fila o columna a seleccionar y arrastrar hasta el final de la fila o columna.

Para seleccionar una celda, aplicar uno de estos métodos:

• Situar el cursor en la celda a seleccionar y pulsar las teclas CONTROl + A • Arrastrar el ratón dentro de la tabla • Mantener pulsada la tecla de CONTROL y hacer clic en la celda a seleccionar.

AÑADIR FILAS Y COLUMNA Aplicar uno de estos métodos:

• Seleccionar la tabla y en el panel Propiedades cambiar los valores de las casillas de filas y columnas.

• Situar el cursor en una celda y elegir la opción menú Modificar>Tabla y elegir Insertar fila, Insertar Columna o Insertar filas y columnas…

ELIMINAR FILAS Y COLUMNAS Aplicar uno de estos métodos:

• Seleccionar la fila(s) o columna(s) que deseemos eliminar y pulsar la tecla SUPR. • Seleccionar la fila(s) o columna(s) que deseemos eliminar y elegir la opción menú

Modificar>Tabla y elegir entre Eliminar fila o Eliminar columna. DIVISIÓN Y COMBINACIÓN DE CELDAS

- Para combinar:

• Seleccionar antes todas las celdas que deseamos convertir en una única celda (deben ser

celdas contiguas) y pulsar el botón del panel Propiedades, o bien menú Modificar>Tabla>Combinar celdas.

- Para dividir:

• Seleccionar la celda a dividir y pulsar el botón del panel Propiedades o bien, menú Modificar>tabla>Dividir celdas.


Página - 44 -

También se pueden combinar y eliminar celdas variando el número de filas o columnas que ocupa una celda. Para ello:

• Situar el cursor en una celda y elegir menú Modificar>Tabla>Aumentar tamaño de fila o Aumentar tamaño de columna.

CAMBIAR EL TAMAÑO DE FILAS, COLUMNAS, CELDAS Y TABLAS CAMBIAR EL TAMAÑO DE UNA TABLA

• Seleccionar la tabla y arrastrar de los delimitadores derecho o izquierdo para aumentar la anchura y de los delimitadores superior e inferior para aumentar la altura. Si seleccionamos de los vértices se puede cambiar el tamaño en anchura y altura.

CAMBIAR EL TAMAÑO DE FILAS Y COLUMNAS Utilizar uno de estos métodos:

• Arrastrar situando el cursor en la retícula vertical. Si mantenemos la tecla MAYÜSCULA la anchura de las demás celdas no variará.

• Seleccionar la columna y en el panel Propiedades ajustar la medida en la casilla An: • Arrastrar situando el cursor en la retícula horizontal (en el caso de las filas) o modificar

el valor en el panel Propiedades en la casilla Al: IGUALAR ANCHOS DE COLUMNA DE CÓDIGO Y VISUALES Antes de redimensionar una tabla es recomendable borrar los anchos y altos establecidos. Para ello:

1. Seleccionar la tabla

2. En el panel Propiedades de la tabla pulsar en el icono borrar el ancho de columna y

pulsar seguidamente en el icono borrar alto de fila. 3. Pulsar en el selector verde para seleccionar el ancho de toda la tabla y elegir Igualar

todos los anchos. Es preferible asignar un tamaño porcentual a las tablas y celdas. Para cambiar las dimensiones de porcentajes a píxeles y viceversa:

1. Seleccionar la tabla

2. Pulsar los botones o AMPLIAR LAS CELDAS DE UNA TABLA Para trabajar con comodidad dentro de las celdas de la tabla, seleccionar ficha Insertar>Diseño>botón Ampliada. Para cambiar de modo pulsar en el botón Estándar de la misma pestaña (diseño)


Página - 45 -

IMPORTAR DATOS A LA TABLA

1. Se requiere guardar previamente en la aplicación de Excel un archivo como Texto (delimitado por tabulaciones)(*.txt) en el apartado Guardar como tipo:

2. En DW seleccionar menú Insertar>Objetos de tabla>Importar datos de tabla.. y seleccionar el archivo de Excel.

3. Cuando insertemos la tabla, seleccionarla y menú Edición>Copiar. 4. Pegarla en la tabla insertada previamente en DW dentro de la 1ª celda.

ORDENAR EL CONTENIDO DE LAS TABLAS

1. Seleccionar la tabla a ordenar 2. Menú Comandos>Ordenar tabla 3. Elegir la columna que queremos ordenar y una segunda columna si fuese necesario

(datos repetidos en la 1ª, p. ej. por apellidos y luego por Nombre) 4. Si hemos introducido un encabezado no tachar

la casilla Ordenar filas de encabezado.

TABLAS ANIDADAS Son tablas ubicadas en el interior de una celda de otra tabla. Seguir uno de estos métodos:

AA.. Seleccionar la celda donde deseamos incluir la tabla anidada y crear la tabla siguiendo uno de los métodos comentados anteriormente.

BB.. Crear la tabla anidada fuera de la tabla principal, cortar la tabla al portapapeles y copiarla en la celda deseada. Este método es más recomendable.

TABLAS DE DISEÑO Es una tabla que se dibuja arrastrando con el ratón y cuyas celdas también son creadas arrastrando con el mouse. El resultado es una tabla más adaptada a nuestras necesidades y con unas posibilidades. Se crea una tabla más adaptada a nuestras necesidades y con unas posibilidades de edición mayores que las tablas normales. Para crear una tabla de diseño:

11.. Pulsar las teclas Alt + F6 o bien, menú Ver>Modo de tabla 22.. En la barra de Insertar, seleccionar ficha Diseño y pulsar el icono Dibujar tabla de diseño

33.. Arrastrar en la ventana de documento para crear la tabla (no contiene celdas y aparece

con un marco verde con la etiqueta Tabla de diseño) CREAR CELDAS EN LA TABLA DE DISEÑO

11.. En la barra Insertar, seleccionar ficha Diseño y pulsar el icono Dibujar celda de diseño

22.. Llevar el cursor a la tabla de diseño y arrastrar para crear una celda. La celda aparece

bordeada por un marco azul y el resto de la tabla se marcará con unas líneas auxiliares blancas que marcan las filas y las columnas que el programa crea para construir la tabla.

33.. Repetir los pasos -1- y -2- para crear nuevas celdas de diseño. Si mantenemos pulsada la tecla de CONTROL no hace falta clicar en el icono de Dibujar celda de diseño.


Página - 46 -

DETALLES DE LAS TABLAS Y CELDAS

• Al pasar el cursor por el borde de una celda de diseño se muestra en rojo para indicar la celda en donde se encuentra. Si hacemos clic en la celda se coloreará y aparecerá bordeada de un marco azul con delimitadores; si arrastramos de los delimitadores podremos cambiar el tamaño de la celda.

• Una celda bordeada de color azul indica que el cursor de inserción NO está dentro de la

celda.

• Una celda que tenga el cursor de inserción en su interior aparecerá bordeada de color azul intenso.

• Podemos dibujar una celda de diseño antes que dibujar la tabla de diseño. En este caso, tras dibujar la celda, se creará automáticamente una tabla de diseño para albergar la celda. Dicha tabla ocupará toda la superficie visible de la ventana de documento, en cualquier caso podremos redimensionar el tamaño de la tabla.

• Para suprimir una celda de diseño, seleccionarla y pulsar la tecla SUPR .

CUADRÍCULA Para la creación de tablas en general, menú Ver>Cuadrícula>Mostrar cuadrícula. Es conveniente forzar el ajuste de las celdas a la cuadrícula según vayamos trazando, para ello ir al menú Ver>Cuadrícula>Ajustar a la cuadrícula. CAMBIAR EL TAMAÑO DE LAS TABLAS Y LAS CELDAS EN EL MODO DISEÑO En las Tablas: Hacer clic en la ficha de la tabla (tabla diseño) y arrastrar los delimitadores alrededor de la tabla. Las celdas se ajustan automáticamente. En las Celdas: Seleccionar la celda haciendo clic sobre el borde y arrastrar los delimitadores MOVER TABLAS Y CELDAS Sólo se puede mover una tabla que se encuentre dentro de otra tabla.

11.. Seleccionar la tabla 22.. Con las teclas de cursor desplazar píxel a píxel la tabla en la dirección deseada. Si

mantenemos pulsada la tecla MAYÚSCULA se desplazará de 10 en 10 píxeles. Para cambiar la posición de una celda:

11.. Seleccionar la celda 22.. Con las teclas de cursor desplazar píxel a píxel


Página - 47 -

PRÁCTICA CON TABLAS DE DISEÑO

1. Crea una tabla y las celdas con los datos y la apariencia siguiente:

Foto UD

Email

Botón 1 Botón 2 Botón 3 Botón 4

2. Las celdas que incluyen los botones son:

a. Botones personalizados que podemos encontrar p. ej. en http://www.pekegifs.com/webmaster/generartexto3d.htm

b. Enlaces a distintas páginas de nuestro sitio local 3. En la celda Foto, insertar un logotipo.

http://www.deuto.es/�

http://www.pekegifs.com/webmaster/generartexto3d.htm�


Página - 48 -

Unidad 6 IMÁGENES INTRODUCCIÓN Una imagen en formato gráfico es un conjunto de cuadraditos puestos unos al lado de otros cada uno de los cuales puede presentar colores o matices diferentes; al ver todos esos puntos desde una distancia apreciamos una imagen. Si la vemos más cerca amentando el zoom iremos viendo progresivamente los elementos que la componen que son los cuadraditos que se llaman píxeles. Tres conceptos distintos de la imagen que están relacionados entre sí:

• Tamaño de la imagen • Tamaño de archivo • Resolución de imagen

Tamaño de imagen: es la dimensión real de altura y anchura que tendrá la imagen una vez

impresa. Si hablamos de píxeles, se trata del número de éstos que ocupará la imagen de ancho y alto en la pantalla. Modificar el tamaño de la imagen (redimensionar) no altera el tamaño de la imagen.

Tamaño de archivo: es la cantidad de memoria física necesaria para almacenar la imagen, es

decir, el tamaño del archivo que la contiene. Si en Dreamweaver reducimos el tamaño de la imagen conseguiremos que en la Web se vea con el tamaño deseado, pero estaremos utilizando un tamaño de archivo innecesariamente grande con el consiguiente retardo en la visualización de la página.

Resolución de imagen: es la cantidad de píxeles en la imagen, se mide en píxeles por pulgada

(ppp o bien dpi). A más píxeles por pulgada cuadrada en una imagen, mayor resolución y tamaño del archivo.

Los principales formatos de imagen que podemos utilizar para la Web son: .GIF: son gráficos geométricos, se trata de imágenes con un máximo de 256 colores. Tienen poca resolución, se cargan rápido y admiten transparencias y animación. Muy útiles para pequeñas imágenes tipo icono, botones, logotipos, animaciones y otras imágenes con colores y tonos uniformes. .JPEG (JPG): imágenes de calidad superior como fotografías con alta calidad. A diferencia de las imágenes .GIF son más lentas de cargar pero pueden comprimirse sin perder demasiada calidad. .PNG: comparte características con los dos anteriores pero no soporta animaciones y no es compatible con algunos navegadores antiguos. En resumen, para visualizar las imágenes con calidad utilizar el formato JPG y para imágenes que representen textos o símbolos no fotográficos utilizar el formato GIF . Las animaciones sólo se muestran en formato GIF.


Página - 49 -

PREPARACIÓN DE LAS IMÁGENES PARA LA WEB

• Si abrimos una imagen en Photoshop o a través de la herramienta del panel de imágenes veremos las características de la imagen. En Photoshop ir al menú Imagen>Tamaño de la imagen… y en el cuadro de diálogo que se muestra obtenemos para el tamaño de la imagen en píxeles su tamaño en el documento (si la imprimimos)en cm. o en pulgadas (la mitad) y la resolución

• El tamaño ocupado por el archivo (dimensiones en píxeles) de la imagen con una resolución entre 70 y 100 ppp es más que suficiente para obtener una calidad de visualización óptima de las imágenes en las páginas Web a la vez que un tamaño de archivo suficiente para descargarse rápidamente.

• La mejor solución es optimizar las imágenes a la resolución adecuada y al tamaño adecuado para que una vez colocados en la página no sea necesario reducir o ampliar su tamaño demasiado para adaptarlo a la celda o lugar donde debe colocarse.

INSERTAR IMÁGENES Podemos insertar una imagen en una página, en una celda de una tabla, en un formulario o en una capa. Realizar una

• Situar el cursor en la posición deseada y menú Insertar>Imagen

de estas acciones:

• Situar el cursor en la posición deseada y hacer clic en la ficha Insertar>Común y el icono

• Arrastrar el icono de la barra Insertar>Común al lugar deseado

2. En la ventana Seleccionar origen de la imagen, elegir la ubicación y la imagen a insertar. Nota: Es recomendable copiar la imagen y pegarla en el sitio raíz dentro de la carpeta

correspondiente a imágenes. Otros métodos para insertar imágenes:

•• Desde el panel Archivos, seleccionar la pestaña Activos y arrastrar una imagen hasta la posición deseada en el documento (se entiende que previamente ha sido copiada la imagen al sitio raíz).

•• Desde el panel Archivos arrastrar desde la carpeta que contiene las imágenes al

documento (previamente copiar la imagen a la carpeta del sitio raíz)

1


Página - 50 -

Cuando insertamos una imagen aparece el panel Propiedades de imagen con distintas herramientas para cambiar los atributos de la misma:

• En las casillas An y Al cambiamos el tamaño en píxeles • En la casilla que está a la izquierda del ancho y alto podemos asignar un nombre

descriptivo a la imagen. • En la casilla Origen se especifica el archivo de origen de la imagen. Hacer clic en el icono

para localizar el archivo de origen si queremos cambiar la imagen por otra o

arrastrar desde el icono a la imagen situada en el panel Archivos. CAMBIAR EL TAMAÑO DE LA IMAGEN Para adaptar el tamaño de la imagen a una celda o en el documento, utilizar alguno de estos métodos:

• Seleccionar la imagen insertada y arrastrar de los delimitadores. Si mantenemos pulsada la tecla MAYÚSCULA mientras arrastramos, se mantiene la proporcionalidad entre la anchura y la altura

• Introducir los valores deseados en las casillas An y Al del panel Propiedades Cuando se introduzca el nuevo tamaño por cualquiera de los métodos anteriores las casillas An y Al mostrarán los nuevos valores en negrita.

Si pulsamos el icono se restablecerá el tamaño original. La variación del tamaño de la imagen por este método no varía el tamaño del archivo original. Cuanto menor sea el tamaño del archivo de una imagen antes se cargará en la página Web. Dreamweaver proporciona una serie de herramientas con las que se pueden hacer correcciones, para ello en el panel Propiedades utilizar:

Delimitadores

Optimizar

Recorte

Recorte

Brillo y Contraste

Perfilar


Página - 51 -

La herramienta Recorte permite recortar la imagen prescindiendo de aquellas partes que no nos interesan, para ello arrastrar con el ratón y hacer doble clic una vez modificada la imagen.

La herramienta Volver a muestrear permite reducir el tamaño de una imagen una vez cambiadas sus dimensiones, de este modo se consigue modificar el archivo original y que ocupe poco tamaño. Pasos:

11.. Reducir el ancho y alto de la imagen en el panel Propiedades

22.. Seleccionar el icono Volver a muestrear El muestreo de imagen es muy útil porque no necesitamos cambiar el tamaño y resolución desde programas externos. Basta con cargar la imagen original, asignarle un tamaño deseado y muestrear para que disminuya el peso del archivo. El muestreo para ampliar la imagen no resulta tan efectivo.

La herramienta Perfilar aumenta la nitidez de las imágenes para que aparezcan más o menos difuminadas. ALINEACIÓN DE IMÁGENES Para conseguir el efecto de alineación deseado es preferible colocar las imágenes en la celdas de una tabla. Colocar textos e imágenes en celdas individuales para cada uno. Se pueden alinear imágenes entre sí, con texto o con otros elementos. El concepto de línea de base es una línea hipotética que pasa por la parte inferior de la imagen. Si tenemos varias imágenes será la que llegue más abajo. Si trabajamos alineando imágenes con otras imágenes; en el panel de Propiedades seleccionar el desplegable Alinear, veremos las opciones:

• Con Izquierda y Derecha se intercambian las posiciones de ambas imágenes • Con Línea de base e Inferior la imagen alineará su parte inferior con la línea de base • Con Superior, la imagen alineará su parte superior con la parte superior del elemento

más alto • Con Medio se alineará la parte central de la imagen con la línea de base

Dependiendo de la posición de la imagen y lo que tenga alrededor algunas de las opciones provocarán uno u otro resultado. Algunas de las opciones de alineación son más adecuadas para alinear imágenes con texto.


Página - 52 -

PRÁCTICA.-ALINEAR IMÁGENES CON TEXTO

• Insertar una imagen y escribir alrededor un texto • Comprobar las alineaciones • Ubicar imágenes y texto en las celdas de una tabla

Las opciones Izquierda y Derecha son las únicas que permiten que varias líneas de texto rodeen la imagen, el resto de opciones se utilizan únicamente para alinear una imagen en relación a una única línea de texto, lo cual puede resultar muy útil en el caso de títulos o encabezados. Opciones:

AA.. Texto superior: alinea la imagen con la parte superior del texto de mayor altura de la línea, viene a ser parecido a la opción Superior.

BB.. Medio absoluto: alinea el centro de la imagen con el centro de la línea de texto o del elemento más grande de la línea.

CC.. Inferior absoluto: alinea la parte inferior de la imagen con el punto más bajo de la línea de texto.

COLOCAR UN BORDE A LAS IMÁGENES, NOMBRAR Y ETIQUETAS DE TEXTO Para destacar una imagen:

11.. Seleccionar la imagen 22.. En el panel Propiedades introducir un valor para el marco en la casilla Borde

El valor del borde, si tiene vínculo será del color de los vínculos. Si no tiene vínculo, el color del borde será el del texto del párrafo en el que esté incluida la imagen. Los nombres de imágenes y las etiquetas de texto (Alt) son propiedades invisibles de las imágenes.

• Los nombres de imágenes se utilizan para identificarlas y se emplean principalmente para funciones tales como los Comportamientos. Es recomendable asignar nombres a las imágenes (en el panel Propiedades, debajo del tamaño de la imagen) y que sean sencillos , en minúsculas, sin acentos.

• El texto Alt proporciona información adicional (texto descriptivo) sobre las imágenes a

los usuarios y especifica el texto que aparecerá en el navegador si los usuarios no tienen activados los gráficos. En el caso de los lectores de pantalla para personas invidentes el texto que hayamos asignado será reproducido por el altavoz.

PANEL DE ACTIVOS: GESTIÓN DE IMÁGENES El panel de activos (dentro del panel Archivos) permite organizar los elementos del sitio. Se puede utilizar para ver y catalogar dichos elementos. Características:

• Para ver las imágenes, pulsar ficha Activos y hacer clic en el icono Imágenes . El resto de botones permite visualizar otro tipo de elementos de la página.

• Cuando añadamos un nuevo archivo al sitio pulsar el icono Actualizar para tener actualizadas las imágenes


Página - 53 -

• Si arrastramos una imagen desde el panel de Activos hasta la página, la imagen se ubica

directamente en el lugar en donde se encuentra el cursor.

• Si arrastramos una página.html se crea un vínculo

• Si seleccionamos un nombre de archivo y hacemos clic en el icono Editar se abrirá el editor que tengamos configurado para retocar la imagen.

• También se puede ver el tamaño y la ruta de los distintos archivos en el panel Activos.

MARCADORES DE POSICIÓN Si queremos distribuir elementos en nuestra página Web para ver cómo quedan y todavía no tenemos preparadas las imágenes, podemos utilizar marcadores de posición en lugar de imágenes. Para ello:

1. Situar el cursor en el lugar en donde posteriormente colocaremos la imagen.

2. En la barra Insertar>Común hacer clic en el icono 3. En la ventana que aparece introducir las dimensiones y otros parámetros. 4. Añadir todos los marcadores de imagen que necesitemos y posteriormente hacer doble

clic sobre el marcador de imagen deseado y en la nueva ventana seleccionar la ruta y el nombre de archivo de imagen a colocar.

5. Al pulsar Aceptar se sustituye el marcador por la imagen conservándose el nombre y el texto alternativo que hayamos asignado al marcador.

VISTA PREVIA DE IMÁGENES SUSTITUIR IMÁGENES O MARCADORES Y POSTERIORMENTE CREAR ENLACES A ARCHIVOS O IMÁGENES AMPLIADAS (THUMBNAILS)

1. Insertar un marcador de posición (objeto que se puede añadir a una página para representar el lugar que ocupará un contenido final) mediante el menú Insertar>Marcador de posición.

2. En el inspector de propiedades pulsar el icono Señalar archivo y arrastrar hacia el archivo de imagen en el panel archivos.

3. Si queremos vincularlo con un archivo o la misma imagen ampliada; en el inspector de

propiedades arrastrar el icono Señalar archivo hacia el archivo de imagen o archivo de html

El uso de thumbnails es muy práctico para crear catálogos de productos donde se muestre en una tabla las miniaturas con las imágenes de los productos y enlaces a las mismas imágenes ampliadas.


Página - 54 -

PRÁCTICA CON IMÁGENES AMPLIADAS Se trata de crear miniaturas de imágenes que al hacer clic en las mismas muestren las imágenes que representan ampliadas.

1. Crear un catálogo diseñando para ello una tabla de cuatro columnas y tres filas 2. Escribir los titulares de las 2 primeras filas 3. Insertar las imágenes en las celdas correspondientes (previamente guardar las imágenes

en al carpeta creada en nuestro sitio local) 4. Hacer clic en cada una de las imágenes y en la casilla Vínculo del panel propiedades

seleccionar el icono e indicar el archivo de imagen o bien arrastrar el Selector de

archivos hacia el archivo de imagen. A modo de ejemplo ilustrativo podría ser algo parecido a lo que se muestra en la figura:

Imágenes de la Villa de Bilbao (hacer doble clic en las fotos correspondientes para ver las imágenes)

CREAR THUMBNAILS DE MODO AUTOMÁTICO: ÁLBUM DE FOTOS Dreamweaver permite tomar las imágenes de una carpeta y crear un álbum de fotografías a base de miniaturas pudiendo avanzar o retroceder en las imágenes. Pasos:

1. Abrir un documento nuevo 2. Menú Comandos>Crear álbum de fotos Web 3. Insertar un Título descriptivo, los otros apartados de título son opcionales 4. En el campo Carpeta de imágenes de origen, pulsar el botón Examinar… 5. En el campo Carpeta de destino, elegir la unidad y carpeta donde deseamos almacenar

la página Web y los correspondientes archivos de imágenes a tamaño normal y las miniaturas.

6. En el campo Tamaño de miniatura, elegir el tamaño que deseamos entre los cinco preestablecidos (dejarlo en 100 x 100). Activar la casilla de la derecha si queremos que se muestren los nombres de los archivos debajo de las miniaturas.

7. En el campo Columnas, introducir el nº de columnas que deseamos crear. 8. En los campos Formato de miniatura y Formato de foto, elegir la opción por defecto. 9. Activar la casilla Crear página de navegación para cada foto.

http://images.google.es/imgres?imgurl=http://www.turismoactual.net/wp-content/uploads/2008/01/espana_bilbao.jpg&imgrefurl=http://www.turismoactual.net/turismo/bilbao-cuando-la-suerte-te-acompana.html&usg=__hOQn3gCyPOjfgRVmzFihFvHKqAA=&h=300&w=400&sz=43&hl=es&start=7&itbs=1&tbnid=y7dhwAwVhAYjZM:&tbnh=93&tbnw=124&prev=/images?q=bilbao&gbv=2&hl=es�

http://images.google.es/imgres?imgurl=http://eviajando.com/wp-content/uploads/2008/10/bilbao-metro-station.jpg&imgrefurl=http://www.eviajando.com/transporte-en-bilbao/&usg=__87bmpHlLWIZE1Ym2Yf9C9iMNnBo=&h=333&w=473&sz=48&hl=es&start=13&itbs=1&tbnid=weQjxOk6dTJ_KM:&tbnh=91&tbnw=129&prev=/images?q=bilbao&gbv=2&hl=es�

http://guia-bilbao.com/wp-content/uploads/2009/10/bilbao-retoque_1001_640px.jpg�

http://images.google.es/imgres?imgurl=http://micheleiurillo.files.wordpress.com/2009/06/bilbao.jpg&imgrefurl=http://micheleiurillo.wordpress.com/2009/06/23/valencia-tareas-pendiente-para-una-capital-europea/&usg=__ccB79QxNMvFUs9oAxYvo1hie1YE=&h=500&w=375&sz=53&hl=es&start=10&itbs=1&tbnid=ua2dQ3iaFxhKbM:&tbnh=130&tbnw=98&prev=/images?q=bilbao&gbv=2&hl=es�


Página - 55 -

IMÁGENES DE SUSTITUCIÓN Cuando se pasa el cursor sobre una imagen, ésta se intercambia por otra y cuando el cursor sale de la imagen, vuelve a aparecer la imagen inicial. Se utiliza para conseguir efectos visuales tales como destacar un botón de menú, incorporar información adicional, descripciones de contenido, etc.. Es necesario copiar previamente las imágenes a nuestro sitio raíz (podemos utilizar cualquier aplicación que permita generar botones, en ese caso crear dos o tres botones con el mismo nombre y distintos colores http://jirox.net/AsButtonGen/). Pasos:

1. Situar el cursor en el lugar deseado y posteriormente en la ficha Insertar>Común>

2. Veremos el cuadro de diálogo Insertar imagen de sustitución:

3. Rellenar los siguientes campos: • Nombre de la imagen: poner un nombre a la imagen de sustitución. • Imagen original: pulsar el botón Examinar.... para seleccionar el archivo de la

imagen que deberá aparecer mientras no• Imagen de sustitución: seleccionar con el botón Examinar… la imagen que

deberá aparecer al situar el cursor sobre la imagen inicial.

se sitúe el cursor encima.

• Carga previa de la imagen de sustitución: permite que la segunda imagen se cargue en memoria antes de que se visualice la página.

• Texto alternativo: es lo mismo que la etiqueta <Alt> • Al hacerse clic, ir a URL: permite especificar la página o archivo al que debe

enlazarse cuando hagamos clic en la imagen de sustitución. Nota: Las imágenes deben tener el mismo tamaño. Actualmente resulta más fácil crear estos

botones mediante Adobe Flash, las posibilidades son mayores. Es posible crear botones Flash predefinidos desde Dreamweaver como veremos más adelante.

http://jirox.net/AsButtonGen/�


Página - 56 -

GIFS´S ANIMADOS Un gif animado es un archivo que contiene una serie de imágenes en formato GIF de fondo transparente que se muestran como una secuencia rápida en el navegador, lo que produce el efecto de animación. Son como una pequeña película formada por varios fotogramas que, reproducidos uno tras otro rápidamente, proporcionan la sensación de movimiento. Estos archivos se pueden crear utilizando aplicaciones tales como Adobe Flash o Fireworks, pero también se pueden descargar de internet. PRÁCTICA CON IMÁGENES DE SUSTITUCIÓN

1. Crear una tabla de 1 columna y 1 fila a modo de barra de navegación 2. Incluir en cada celda botones para que nos muestren distintas páginas del tema deseado


Página - 57 -

Unidad 7 MARCOS INTRODUCCIÓN Los marcos también llamados frames permiten dividir la ventana del navegador en 2 o más regiones que pueden albergar contenidos independientes. Se suelen utilizar para definir áreas de contenido y áreas de navegación para una página de tal forma que el área de navegación aparece constante y el área de contenido va cambiando cada vez que se hace clic sobre un vínculo de navegación. • ----------- • ----------- • ----------- • ----------- • ----------- • ----------- • -----------

Top frame

Left frame Main frame

ESTRUCTURA DE una página Web con MAROS, se necesita:

1. Cada uno de los marcos constituye una página Web independiente (tres archivos o páginas) 2. Un archivo o página con la definición del conjunto de marcos donde se indica el tamaño y

la distribución de los marcos.

Dos modos de crear marcos:

• Manualmente • Automáticamente a partir de marcos predefinidos

Área de Navegación

Área de Contenido


Página - 58 -

INSERCIÓN DE UN CONJUNTO DE MARCOS PREDEFINIDO (Opción recomendada) Disponemos de tres métodos para insertar un conjunto de marcos:

AA.. Menú Archivo>Nuevo>Página de muestra>Conjunto de marcos, seleccionar la distribución y número de marcos (por defecto izquierda fijo).

BB.. Ficha Insertar>Diseño>Marcos , seleccionar algún diseño de marcos CC.. Menú Insertar>HTML>Marcos , elegir alguna de las opciones

En la ventana que aparece poner un nombre a cada marco. INSERCIÓN MANUAL DE MARCOS Podemos crear marcos a partir de un documento en blanco. Pasos:

11.. Menú Modificar>Conjunto de marcos>Dividir marco a la izquierda 22.. Arrastrar la línea de separación y configurar los bordes

Nota: Si queremos dividir a su vez el marco de la derecha, hacer clic en el interior del marco

de la derecha y seleccionar menú Modificar>Conjunto de marcos>Dividir marco hacia arriba.

SELECCIONAR MARCOS: EL PANEL MARCOS Una vez creados los marcos, para cambiar el tamaño es preciso seleccionar antes el marco o marcos, desde la ventana del documento o desde el panel Marcos

Panel Marcos

Propiedades de todos los marcos


Página - 59 -

Pasos:

11.. En el menú Ventana>Marcos para ver la miniatura 22.. Desde este panel hacer clic sobre el marco deseado. Si queremos seleccionar el conjunto

de todos los marcos hacer clic en el borde superior o inferior 33.. Cada vez que seleccionemos un marco aparece el panel de Propiedades mostrando sus

características para efectuar las modificaciones que necesitemos

Propiedades del marco seleccionado

GUARDAR UN CONJUNTO DE MARCOS Una vez definida la página con el número de marcos que necesitemos, hay que guardar el conjunto de marcos ya que éste y los correspondientes archivos de cada marco necesitan almacenarse antes de poder realizar una vista previa en el navegador. El conjunto de marcos es el archivo al que se hace referencia cuando se quiere acceder a la página Web que los contiene. RESUMEN: CÓMO GUARDAR UN CONJUNTO DE MARCOS Y ESTABLECER LOS DESTINOS

11.. Crear un documento nuevo (menú Archivo>Nuevo>Página de muestra>Conjunto de marcos>Izquierdo fijo) y pulsar Aceptar en todas las ventanas siguientes. Ampliar ancho

22.. Hacer clic en el documento en el marco izquierdo y pulsar Propiedades de página para

asignar un color de fondo

. Repetir esto mismo para el marco derecho.

33.. Hacer clic en la miniatura en el marco izquierdo y ponerle un nombre al marco. Repetir lo mismo para el marco derecho.

44.. Para guardar los diferentes archivos que conforman la página:

1º. Sin necesidad de seleccionar nada, ir al menú Archivo>Guardar todo 2º. Para el conjunto de marcos poner index.html 3º. Para el archivo que irá en el marco derecho otro nombre de archivo

(p.ej. principal.html) 4º. Para el archivo que irá en el marco izquierdo otro nombre de archivo

(p.ej. indice.html) 55.. Hacer clic en el documento en el marco izquierdo (archivo situado a la izquierda) e

insertar una tabla o lista de contenidos y posteriormente llevar a cabo las siguientes acciones:

1º. Seleccionar el texto u objeto de la tabla o lista al que vamos a aplicar el vínculo

2º. En la casilla Vínculo del panel Propiedades elegir el icono o indicando el archivo con el que enlazaremos

3º. En la casilla Dest, del panel Propiedades, seleccionar en el desplegable el nombre del marco (marco derecho).

4º. Repetir los pasos 1º al 3º para el resto de vínculos y pulsar el botón Guardar.

66.. Hacer clic en el documento en el marco derecho (archivo situado a la derecha) y editar el contenido correspondiente y Guardar.


Página - 60 -

77.. Hacer clic en el borde del conjunto de marcos dentro del documento o seleccionar el conjunto en la miniatura del panel Marcos y Guardar.

Nota: Podemos abrir los archivos que intervienen en cada marco y editar en cada uno la

información necesaria sin necesidad de trabajar en los marcos conjuntamente. PROPIEDADES DE LOS MARCOS Cada marco dispone de su propio inspector de Propiedades

11.. Pulsar en el panel Marcos sobre el marco deseado 22.. En el campo Nombre de marco se puede asignar un nombre de marco 33.. En la casilla Origen aparece el nombre del archivo para el marco. Si queremos cambiarlo

pulsar los iconos o 44.. En la casilla Desplaz. Determinar si deben aparecer o no las barras de desplazamiento 55.. Si activamos la casilla Mismo tamaño el visitante no podrá arrastrar los bordes del marco

para cambiar el tamaño del mismo en un navegador. 66.. En la casilla Bordes permite visualizar o no los bordes del marco. 77.. En las casillas Ancho del margen y Alto del margen se puede especificar los espacios en

píxeles entre el borde del marco y su contenido.

PROPIEDADES DE LOS CONJUNTOS DE MARCOS

11.. Seleccionar el conjunto de marcos en el panel Marcos 22.. En el panel Propiedades:

a. En la casilla Bordes especificar si los bordes deben verse con forma tridimensional o no

b. En Ancho indicar la anchura en píxeles que deberá tener el borde y en Color especificar un color para el borde.

CONSIDERACIONES SOBRE MARCOS No todos los navegadores son compatibles con el uso de marcos. La utilización más lógica de los marcos es la navegación. Normalmente consta de un marco con una barra de navegación y otro que muestra las páginas de contenido principal.


Página - 61 -

PRÁCTICA CON MARCOS

• Crea un diseño con marcos que tenga el siguiente aspecto:

• En el marco izquierdo inserta un índice de contenidos y en el marco derecho una página

de presentación. Del marco izquierdo crear los enlaces correspondientes para su visualización en el marco derecho.

EJEMPLO DE MARCOS

• Menú Archivo>Página en blanco • Ficha Diseño>marcos>Marco izquierdo>Aceptar • Hacer clic en la miniatura dentro del marco izquierdo y asignar con el botón derecho del

ratón Propiedad de página y un color de fondo. (éste será el índice) • Hacer clic en la miniatura dentro del marco derecho y asignar con el botón derecho del

ratón Propiedad de página y un color de fondo. (ésta será la página de contenido) • Menú archivo>Guardar todo, para guardar todos los archivos de cada marco

o Asignar un nombre al conjunto de marcos, p. ej. index.html o Asignar un nombre al archivo situado a la derecha, p. ej. ppal.html o Asignar un nombre al archivo izquierdo, p. ej. indice.html

• En el documento hacer clic en el marco izquierdo (índice.html) y crear una tabla o lsta

con los vínculos. Seleccionar el texto de la tabla y pulsar el botón Vínculo y elegir el archivo a vincular. En el panel Propiedades pulsar en la casilla Dest. Y elegir el nombre del marco (p. ej. contenido).

• Repetir el paso anterior para el resto de los enlaces y en la casilla Dest. Elegir el mismo marco (contenido).

• Una vez cumplimentado todo guardar el archivo con el botón de Guardar. • En el documento hacer clic en el marco derecho (ppal.html) y escribir la página de

presentación o bienvenida • Guardar el archivo con el botón Guardar • Seleccionar el borde que abarca a todos los marcos (index.html) y guardar el archivo.


Página - 62 -

Unidad 8 FORMULARIOS INTRODUCCIÓN Los formularios permiten recopilar información de los visitantes, tales como opiniones sobre la Web, solicitar información, etc.. Un formulario está constituido por campos de texto, botones de opción, listas de selección, etc.. mediante los cuales podemos introducir información para que luego ésta sea gestionada en el servidor e, incluso, pueda finalmente llegar hasta nosotros vía email y conocer la opinión de los visitantes de nuestra página, recibir solicitudes, etc.. FUNCIONAMIENTO DE LOS FORMULARIOS El procedimiento por el cual resulta posible que , a partir de la introducción de una serie de datos en una página Web, éstos lleguen a ser procesados y se obtengan los resultados deseados en forma de informaciones que llegarán al propio internauta o creador de la página Web: Los formularios están formados por dos partes:

AA.. El código HTML que constituye el formulario que el usuario ve en la página BB.. Una secuencia de comandos o una aplicación que son los encargados de procesar la

información enviada. El procedimiento para la gestión del formulario es el siguiente:

11.. El usuario introduce datos directamente en la página Web gracias a una serie de objetos. Entre ellos:

a. Campos de texto b. Cuadros de lista c. Casillas de verificación d. Botones de envío

22.. Seguidamente, el usuario pulsa en un botón que provoca el envío al servidor, de la información introducida o seleccionada.

33.. La información recibida en el servidor se procesa con una aplicación o un script, mediante lenguajes PHP, JPS, ASP, Coldfusion, etc… o scripts como CGI. En función de lo que se programa en el servidor, éste responderá enviando la información de vuelta al usuario, realizando alguna acción basada en el contenido del formulario, enviando a un correo electrónico, etc..

CREAR UN FORMULARIO

11.. Situar el cursor en el lugar de la página en donde vamos a crear el formulario 22.. Ficha Insertar>Formulario>Formulario o bien Ficha Insertar>ficha Formularios>Formulario

33.. Veremos un rectángulo en color rojo, en este recinto iremos colocando todos los objetos

de formulario necesarios. A medida que vayamos introduciendo objetos se irá adaptando el tamaño. Es posible crear diferentes formularios en una página pero no

44.. Si hacemos clic en la etiqueta <form>, el panel de propiedades mostrará las casillas para el control del formulario.

podemos anidar un formulario dentro de otro.

55.. Es preferible insertar el nombre del formulario , para ello, editarlo en el panel Propiedades del formulario


Página - 63 -

OBJETOS DEL FORMULARIO Podemos colocar objetos de formulario en la posición que se encuentre el cursor unos sobre otros como si fueran párrafos de texto o bien ubicarlos en el interior de las celdas de una tabla (opción recomendable).

Barra de herramientas del formulario

AA.. CAMPOS DE TEXTO DE UNA LÍNEA

Se utilizan para que el usuario introduzca combinaciones alfanuméricas cortas y concisas.

11.. Situar el cursor dentro de la zona del formulario

22.. En la ficha Insertar>ficha Formularios, hacer clic en el icono Campo de texto 33.. En la ventana de Accesibilidad;

a. en ID escribir un identificador para el campo b. en Etiqueta, un nombre para el campo c. en Estilo, seleccionar Adjuntar etiqueta de título utilizando el atributo

“for” d. en Posición, seleccionar Antes del elemento de formulario y pulsar

Aceptar. Si queremos quitar todas las opciones de accesibilidad ir al menú Edición>Preferencias y en Accesibilidad desactivar la casilla Objetos de formulario.

44.. Con el campo de texto seleccionado (hacer clic) podemos arrastrar para mover el área de texto a otra posición y escribir la etiqueta.

55.. En el panel Propiedades: a. Campo de texto: escribir un nombre para el campo texto sin dejar

espacios b. Ancho car.: el nº de dígitos de longitud para el campo texto. c. Car. max.: nº máximo de caracteres que podrá introducir el usuario.

Utilizar este parámetro para limitar un campo de contraseña p. ej. a seis caracteres, la edad a tres, etc..

d. Tipo: una línea, varias líneas (caja de texto) o contraseña (password) e. Val inicial: podemos escribir un texto que deseemos que aparezca como

valor predeterminado cuando se cargue el formulario

Panel propiedades Campo de texto


Página - 64 -

BB.. CAMPOS DE TEXTO DE VARIAS LÍNEAS

Permiten recopilar mayor información del usuario. Se utilizan básicamente para solicitudes de información, comentarios, etc..

11.. Seleccionar en el panel Propiedades dentro del apartado Tipo: Varias líneas o

hacer clic en el icono Área de texto 22.. En el panel Propiedades:

a. Asignar un nombre al campo. b. Líneas num.: especificar el nº de líneas que se pueden ver sin necesidad

de las barras de desplazamiento. c. Ajuste: elegir una opción para determinar cómo se mostrará el texto

que introduzca el usuario cuando se supere la capacidad del área de texto.

• Desactivado: no se produce un cambio de línea automático y el usuario deberá pulsar Intro.

• Virtual: el texto se irá ajustando a irá cambiando de línea automáticamente al alcanzarse el límite del campo de texto, sin embargo este ajuste no se enviará junto con los datos para su procesamiento.

• Físico: el texto se irá ajustando e irá cambiando de línea automáticamente al igual que con la opción anterior pero, en este caso, sí que se aplicará el ajuste de datos enviados.

CC.. CASILLAS DE VERIFICACIÓN

Permiten a los usuarios elegir una o más opciones en un grupo de elementos relacionados. Por ejemplo seleccionar uno o varios cursos de aprendizaje en una lista dada.

11.. Situar el cursor dentro de la zona del formulario 22.. En la ficha Insertar> ficha Formularios, hacer clic en el icono Casilla de

verificación 33.. En el panel Propiedades con la casilla seleccionada:

a. Nombre de casilla: escribir un nombre exclusivo para la casilla, sin espacios. Poner el mismo nombre para todas las opciones.

b. Valor activado: escribir el valor que debe enviarse el servidor cuando se activa la casilla de verificación, con objeto de saber qué casillas de verificación se han seleccionado.

c. Estado inicial: activar o desactivar por defecto la casilla cuando se ejecute el formulario.

DD.. BOTONES DE OPCIÓN Se utilizan para seleccionar valores excluyentes, es decir, en un grupo de botones de opción, la selección de uno de ellos anulará cualquier otra selección que se hubiera hecho antes. Sólo podremos activar un botón de opción a la vez.


Página - 65 -

Pasos para crear un botón de opción:

11.. Crear un formulario y situar el cursor dentro de la zona del formulario

22.. En la barra Insertar>Formulario, hacer clic en el botón de opción 33.. En el panel Propiedades con el botón seleccionado:

• En Botón de opción; escribir un nombre exclusivo para el botón sin dejar espaciosESCRIBIR EL MISMO NOMBRE PARA CADA BOTÓN (si no se considerará el conjunto de botones como un grupo).

• En Valor activado; introducir el valor que debe enviarse al servidor cuando se activa el botón. Así podremos saber qué botón de opción se seleccionará.

• En Estado inicial; seleccionar activado o desactivado por defecto cuando se ejecute el formulario.

GRUPOS DE OPCIÓN Son un conjunto de botones de opción agrupados bajo el mismo nombre. Para insertar un grupo de opción:

11.. Situar el cursor dentro de la zona del formulario

22.. En la barra Insertar>Formularios hacer clic en el icono Grupo de opción , veremos el cuadro de diálogo Grupo de opción

•• En la casilla Nombre asignar un nombre al grupo de opciones •• En la columna Label aparecen los textos por defecto para dos botones de opción; hacer

clic en los mismos para escribir el texto que deseamos aparezca al lado de cada botón. •• En la columna Value aparecen los valores que se deben entregar cuando se haga clic en

cada botón de opción; hacer clic en ellos para introducir los valores deseados.

- Con las teclas podemos añadir o eliminar entradas de opción.

- Con los botones podemos cambiar el orden del botón del grupo. - Podemos indicar si queremos que los botones se ubiquen uno sobre otro

mediante saltos de línea o en una tabla. •• Una vez creado el grupo de opciones podremos editar de forma individual cada una de

las opciones, como si fuesen botones individuales.


Página - 66 -

ELEMENTOS DE LISTA/MENÚ

- Con los elementos de Lista podemos crear listas de desplazamiento

en los que el usuario puede hacer selecciones contiguas o no quedando resaltadas.

- Con los elementos de Menú podemos crear listas de selección

en las que el usuario puede seleccionar una única opción.

Para insertar un elemento de Lista: 11.. Situar el cursor dentro de la zona de formulario

22.. Hacer clic en el icono Lista/Menú . Aparece una casilla con un desplegable 33.. Con el elemento de lista seleccionado el panel de Propiedades muestra las siguientes

opciones (ver figura): 44.. Si vamos a crear una lista activar la opción Lista o Menú

- En la casilla Lista/Menú asignar un nombre al elemento - En la casilla Alto, especificar el número de líneas de opciones que se mostrarán

sin que parezca una barra de desplazamiento - En la casilla Permitir múltiples, se permite al usuario la selección de varias

opciones a la vez si pulsamos las teclas MAYÜSCULAS o CONTROL. - Pulsando en el botón Valores de lista accedemos a una ventana en la que

podremos configurar las opciones. Pulsando en los botones se pueden añadir o eliminar entradas respectivamente.

- En la casilla seleccionado inicialmente se pueden establecer los elementos seleccionados en la lista de forma predeterminada.

- Para las opciones de Menú activar del mismo que para las listas

BOTONES DE FORMULARIO Son los encargados de controlar funciones del formulario tales como la activación del envío al servidor de los datos introducidos para el usuario, la eliminación de los datos para poder introducirlos de nuevo, etc.. Para colocar un botón en el formulario:

11.. Situar el cursor dentro de la zona del formulario en donde deseemos ubicar el botón. Normalmente se colocan en la parte inferior del formulario.

22.. En la barra Insertar>Formularios hacer clic en el icono Botón 33.. Por defecto aparece un botón con el texto Enviar 44.. Con el elemento de formulario seleccionado, en el panel Propiedades:

- En la casilla Nombre del botón, asignar un nombre exclusivo para el botón. - En la casilla Etiqueta, escribir el texto que deseamos aparezca en el botón - En la sección Acción, activar la opción que deseamos realice el botón. Dos

opciones: • Enviar formulario: El contenido del formulario será enviado al

servidor para su procesamiento. • Restablecer formulario: Todos los campos de texto, casillas de

verificación y botones de opción se eliminan para dar entrada a nuevos datos.


Página - 67 -

CAMPO DE IMAGEN Permite insertar una imagen en un formulario y utilizarlo para enviar formularios. Pasos:

11.. Situar el cursor dentro de la zona del formulario donde deseemos ubicar la imagen. 22.. En la barra Insertar>Formularios hacer clic en el campo Imagen. Se abrirá una ventana

para poder seleccionar la imagen. 33.. Con la imagen seleccionada, en la casilla Campo imagen, del panel Propiedades

introducir el nombre Enviar para que la imagen actúe enviando los datos del formulario. Cuando trabajemos con el formulario y hagamos clic en la imagen, ésta se comportará como si se tratase del botón ENVIAR.

CAMPO DE ARCHIVO A veces, la información que debe suministrar el visitante de una página con formularios es demasiado extensa para incluirla en un campo de texto y se requiere el envío de un archivo. Por ejemplo, un curriculum vitae, un archivo gráfico, etc.. Pasos:

11.. Situar el cursor en el lugar del formulario donde deseemos ubicar el campo de archivo y

hacer clic en el campo Archivo de la barra Insertar>Formulario. 22.. Con el objeto del formulario seleccionado, introducir un nombre identificativo en la

casilla Campo archivo, especificar una anchura en caracteres para el campo así como un número máximo de caracteres.

33.. Para finalizar, seleccionar el contorno del formulario (línea punteada en rojo) y en el

panel Propiedades ajustar los siguientes conceptos: • En Método; seleccionar POST y en la casilla tipo de codificación seleccionar

Multipart/form-data. Cuando se reproduzca el formulario, el usuario podrá seleccionar el botón Examinar… y de este modo elegir el archivo a enviar; tras la selección, la ruta y nombre del archivo aparecerán en la casilla. Nota: Antes de utilizar los campos de archivo en nuestros formularios, debemos ponernos en

contacto con el administrador del servidor para confirmar si se permite la carga de archivos anónimos.

JUEGO DE CAMPOS Permiten crear secciones dentro del propio formulario con objeto de organizar el contenido. Por ejemplo una sección para datos personales donde se incluya el campo nombre, apellido, dirección, ciudad, etc.. Pasos:

11.. Situar el cursor en el lugar del formulario donde vamos a crear el juego de campos.

22.. Hacer clic en el icono juego de campos de la barra Insertar>Formularios. Se abre una ventana en la que debemos introducir un nombre identificativo para el juego de campos (p. ej. Datos personales, Formación académica, etc..)


Página - 68 -

33.. Ir introduciendo los elementos de formulario que deseemos (campos de texto, casillas, botones, menús, etc..). Todos ellos quedarán englobados por unas líneas que sólo podemos ver cuando previsualicemos el formulario en el navegador.

Para que los juegos de campos queden visualmente mejor, es preferible colocarlos en las celdas de una tabla.

CAMPO OCULTO Permite que al enviarse el formulario, además de la información que haya cumplimentado el usuario, se envíen informaciones que éste no ha introducido. Estos campos no aparecerán en ele navegador y se suelen utilizar cuando se necesita información específica para procesar el formulario, por ejemplo: obtener nombres y números de pedido , obtener direcciones de correo electrónico, incluir el URL de una página a la que se requiere redirigir a los visitantes una vez que hayan rellenado el formulario, etc.. Pasos:

11.. Colocar el punto de inserción en el lugar deseado del formulario

22.. Hacer clic en el icono Campo oculto de la barra Insertar>Formularios, veremos un marcador en el lugar seleccionado.

33.. En la casilla Campo oculto del panel Propiedades escribir un nombre para el campo y en la casilla Valor escribir la información que deseamos que sea enviada al servidor.

MENÚ DE SALTO Es un menú emergente que se ubica dentro de un formulario y que permite, mediante una lista de opciones acceder a vínculos de documentos o archivos. Es posible crear vínculos a documentos del sitio o de otros sitios, correo electrónico, gráficos y cualquier tipo de archivo susceptible de ser abierto en un navegador. Para insertar un menú de salto:

11.. Situar el cursor en el lugar del formulario en donde deseemos ubicar el menú de salto.

22.. Hacer clic en el icono Menú de salto de la barra Insertar>Formularios. 33.. En la ventana que se muestra, configurar lo siguiente:

- En la casilla Texto, escribir el texto para una de las opciones del menú. - En la casilla Al seleccionarse, ir a URL, introducir la ruta del archivo que

debe abrirse al seleccionar la opción. Podemos utilizar el botón Examinar… para localizar el archivo.

- En la casilla Abrir URL en , seleccionar si el archivo deberá abrirse en la ventana principal o en otra.

- En Nombre de menú, asignar un nombre exclusivo para el menú - En Insertar botón Ir tras el menú, fuerza la aparición de un botón Ir tras

el menú. - La opción Seleccionar primer elemento tras el cambio de URL, provoca

la selección automática de la primera opción tras haber accedido a una URL. Esto último se utiliza en el caso de que hayamos asignado como primera opción del menú el texto, p.ej.: “Elija uno”, Seleccione una opción, etc.. De este modo, tras haber seleccionado una opción, el menú remarcará de nuevo la primera.


Página - 69 -

- En el recuadro Elementos de menú irán apareciendo las diferentes opciones que vayamos programando. Para añadir o eliminar entradas

utilizar los botones y para cambiar el orden de lista utilizar los

botones . Una vez insertado el elemento, hacer clic en el mismo si queremos cambiar entre Lista o Menú GESTIÓN DE LOS FORMULARIOS Para que los datos de los formularios sean gestionados en el servidor, es preciso definir que ocurrirá con esos datos y cómo se utilizarán. Para ello hay que actuar en las casillas Acción y Método del panel Propiedades.

• En la casilla Acción

hay que especificar qué debe hacer el navegador con los datos del formulario. Lo que se coloca en esta casilla es la ubicación y el nombre de la aplicación de servidor, por ejemplo, un código GGI, que será el encargado procesar la información cuando el usuario haga clic en el botón Enviar.

• En la casilla Método

se indica cómo hay que tratar los datos del formulario.

Opciones:

- Con GET los contenidos del formulario serán anexados al URL especificado en la casilla Acción. Esta información será visible en la barra de navegación y no es un método seguro para el envío de datos confidenciales.

- Con POST se identificarán los datos del formulario en la petición HTTP.

Este método permite enviar más información y más fiable y segura. Es el método más utilizado para el envío de datos del formulario.

- Con Predet. se utilizará el método predeterminado por el navegador,

que usualmente es GET.

En el panel de Propiedades del formulario podemos establecer una codificación para los datos remitidos al servidor para su procesamiento. En la casilla Tipo de codificación seleccionar application/x-www-form-urlencoded junto con el método POST o bien, multipart/form-data si creamos un campo de carga de archivos. CGI

• Un CGI es un pequeño programa realizado en lenguaje PERL que se coloca en el servidor y que se pondrá en marcha en cuanto enviemos un formulario con el botón Enviar.

• Un CGI consta de una serie de líneas de programación entre las cuales se encuentran

unos campos variables en los que tendremos que introducir datos como la dirección de correo a la que se tiene que enviar el email con los datos, los campos a procesar, etc..


Página - 70 -

• Antes de poner en marcha nuestra Web con un formulario, habremos editado en

nuestro ordenador y mediante, por ejemplo, un editor de textos los campos de variables del CGI. Una vez realizadas las modificaciones para que el CGI trabaje con nuestros datos particulares, deberá ser enviado al servidor en formato ASCII y ubicado en la carpeta que nuestro proveedor de Internet nos indique. Una carpeta típica puede ser cgi-bin

• Cuando un visitante de nuestra página rellene el formulario y lo envíe, el programa CGI procesará todos los datos y nos enviará a nuestra dirección de correo electrónico con toda la información.

PRUEBA DE FORMULARIOS Si no queremos utilizar un script CGI en el servidor para procesar los formularios, podemos utilizar otro método para comprobar el funcionamiento de los formularios y recibir los datos en forma de correo electrónico.

Pasos:

1. Seleccionar el formulario 2. En la casilla Acción de panel Propiedades escribir mailto:direccióndecorreo 3. En la casilla Método seleccionar POST 4. En la casilla Tipo de codificación escribir text/plain para forzar texto normal

como método de codificación PRÁCTICA CON FORMULARIOS

1. Abrir un documento nuevo ( si no hemos creado un sitio, crearlo)

2. Crear un formulario pulsando en el icono Formularios de la barra Insertar>Formularios y dentro del formulario una tabla de filas y 1 columna-600 px de ancho, sin bordes ni espacio entre celdas.

3. Dividir las 2 primeras filas por la mitad (seleccionar 2 filas y botón , 2 columnas). Iremos colocando en cada celda los elementos de formulario necesarios, utilizando el método juego de campos para que quede más estético.

4. Situar el cursor en la primera celda arriba a la izquierda y hacer clic en el icono juego

de campos , nombre Datos personales).

5. Situar a la derecha del texto (Datos personales)un campo de tipo texto y en el panel de Propiedades ajustar las características deseadas.

6. Con el mismo procedimiento añadir por debajo otros cinco campos de texto para los campos Apellidos, Dirección, CP, Ciudad y Tfno. Con sus características de longitud y nombre.

7. Situar el cursor debajo de la última línea y escribir Estado civil y hacer clic en el icono

Lista/Menú para insertar una lista a la derecha del texto. En Propiedades poner de nombre e_civil y hacer clic en el botón Valores de lista e introducir las etiquetas Soltero/a, Casado/a, Separado/a, Viudo/a asignando los mismos valores en el campo Valor.

DATOS PERSONALES

mailto:direccióndecorreo�


Página - 71 -

8. Situar el cursor en la celda superior derecha de la tabla y dividirla verticalmente para convertirla en 2 celdas.

9. Crear un juego de campos de nombre Formación Académica 10. Situar el cursor debajo del nombre del juego de campos y hacer clic en el icono

Botón de opción y ponerle de nombre Graduado y de valor graduado. 11. A la derecha del botón escribir Graduado escolar.

12. Con el mismo procedimiento, añadir por debajo otros tres botones de opción con los

textos Bachillerato y Título universitario. Asignar en la casilla Botón de opción del panel propiedades el mismo texto para todos los botones, en la casilla Valor activado su correspondiente nombre.

13. Situar el cursor en la celda inferior de las dos subdivididas y crear un juego de campos de nombre Áreas de interés.

14. Situar el cursor por debajo del título del juego de campos y hacer clic en el icono

Casilla de verificación , ponerle de nombre mantenimiento y en valor mantenimiento.

15. Situar el cursor en la línea inmediatamente por debajo y colocar otras dos casillas de verificación con los nombres Administración y Servicios con sus correspondientes nombres y valores.

16. Situar el cursor en la segunda celda de la izquierda y crear un juego de campos con el nombre Idiomas.

17. Situar el cursor por debajo del título del juego de campos y pulsar el icono de campo

de texto . Poner un ancho de 10 caracteres y de nombre idioma_1. 18. Situar el cursor a la derecha del campo de texto y hacer clic en el icono Lista/Menú

. Asignarle el nombre idioma_1_nivel y activar la opción menú en Propiedades. Pulsar en Valores de lista con las opciones Alto, Medio y Bajo y los mismos valores para cada opción. Mediante estas opciones y el campo de texto, el visitante podrá introducir un idioma y especificar su nivel de conocimiento.

19. Situar el cursor una línea por debajo de los elementos anteriores y con el mismo procedimiento introducir otro tres conjuntos de campo de texto y Lista/Menú para que se puedan especificar otro tres idiomas con sus correspondientes niveles. Podemos utilizar las opciones Copiar y Pegar para repetir los campos sin olvidar asignar a cada elemento un nombre exclusivo.

20. Situar el cursor en la celda a la derecha de la que acabamos de completar y crera un juego de caracteres con el nombre SUCURSALES DE INTERÉS.

21. Situar el cursor en la línea inferior y hacer clic en el icono Lista/Menú . 22. En el panel de Propiedades, asignar el nombre sucursal y activar la opción Lista. En la

casilla Alto asignar una altura de 8 campos y activar la casilla Permitir múltiples, ya que podemos seleccionar más de una ciudad.

23. En el botón Valores de lista…configurar como etiquetas y valores: Barcelona, Madrid, Zaragoza, Tarragona, etc.. hasta un total de ocho

DATOS ACADÉMICOS

ÁREAS DE INTERÉS

OBJETOS DE IDIOMAS

SUCURSALES


Página - 72 -

24. Situar el cursor en la penúltima celda de la tabla y crear un juego de campos con el nombre Comentarios.

25. Situar el cursor en la línea inferior y hacer clic en el icono Campo de texto . En el panel Propiedades asignar el nombre Comentarios activar varias líneas y poner una anchura de 60 caracteres.

26. Situar el cursor en la celda inferior y hacer clic en el icono Botón de control 27. En el panel Propiedades, activar la opción Enviar formulario. 28. Situar el cursor a la derecha del botón y colocar un nuevo botón. Esta vez, activar la

opción Restablecer formulario. 29. Seleccionar la celda y en el panel Propiedades hacer clic en el icono Alinear al centro.

30. Para personalizar los textos del formulario a base de estilos CSS: • Situar el cursor en el texto Datos personales y en el selector de etiquetas

<fieldset> se seleccionarán todos los textos de este juego de campos. • En el panel de Estilos CSS, hacer clic en Nueva regla CSS. • En la ventana Nueva regla CSS, seleccionar la opción Etiqueta y dentro de la

casilla Etiqueta elegir <fieldset>, Sólo este documento, y aceptar. • Configurar los atributos deseados para el texto. También se pueden aplicar

estilos de forma individual a cada texto.

31. Seleccionar el formulario completo (etiqueta <form#form1> del selector, o bien, hacer clic en el cuadrado intermitente rojo).

32. En el panel Propiedades poner un nombre al formulario, por ejemplo, solicitud. 33. En la casilla Acción escribir mailto:direccióndecorreo, y en Método POST y en Tipo de

codificaciónapplication/x-www-form-url

COMENTARIOS

BOTONES DE CONTROL

ESTILOS

PROBAR EL FORMULARIO

mailto:direccióndecorreo�


Página - 73 -

Unidad 9 ELEMENTOS DE EDICIÓN EL PANEL HISTORIAL Se accede a través del menú Ventana>Historial. En el historial se muestran todos los pasos realizados en el documento activo desde que se creó o se abrió, hasta un determinado número de pasos. No se muestran los pasos dados en otros marcos, ventanas de documento o en el panel Sitio. Arrastrando el cursor que aparece a la izquierda de las operaciones realizadas podemos eliminar o recuperar acciones:

- Desplazamiento hacia arriba elimina la última acción realizada

- Desplazamiento hacia arriba de forma seguida se van eliminando secuencialmente todas las operaciones realizadas.

- Desplazamiento hasta el principio de la lista elimina todas las acciones desde que comenzamos la sesión.

- Desplazamiento hacia abajo se recuperan todas las operaciones eliminadas. Si se deshacen una serie de pasos y seguidamente realizamos una nueva operación en el documento, no podremos rehacer los pasos deshechos ya que habrán desaparecido del historial.

- Para definir el nº de pasos que el panel del historial puede almacenar, seleccionar menú Edición>Preferencias>General, casilla Número máximo de pasos de Historial.

- Para borrar el historial, abrir el menú del panel haciendo clic en y seleccionar la opción Borrar historial.

AUTOMATIZACIÓN DE TAREAS Si tenemos que llevar a cabo tareas repetitivas en la W, podemos utilizar el panel Historial y realizar:

1. En el panel Historial, seleccionar la acción o acciones que queramos repetir (utilizar la tecla CONTROL si son acciones alternas.

2. Pulsar el botón `para reproducir la acción n la posición en la que se encuentra el cursor.

Se pueden copiar y pegar pasos entre documentos, para ello:

1. En el panel Historial, seleccionar los pasos que deseemos copiar. 2. Seleccionar Copiar pasos seleccionados al portapapeles 3. Abrir el otro documento en donde deseemos pegar los pasos seleccionados. Situar el

cursor en el lugar adecuados de la página y en el menú Edición>Pegar o las teclas CONTROL + V.


Página - 74 -

LOS COMANDOS Si hay que repetir muchas veces determinadas tareas resulta más práctico recurrir a los comandos. Podemos crear comandos a partir de los pasos del panel historial. Pasos:

1. En el panel Historial, seleccionar un paso o un conjunto de pasos. 2. Hacer clic con el botón derecho del ratón y seleccionar Guardar como comando… y

asignar un Nombre al comando 3. Abrir el menú comandos y en la parte inferior veremos el nombre del comando (s)

guardado(s), basta con hacer clic en el comando para que reproduzca automáticamente todos los pasos. El comando puede ser utilizado también en otros documentos que abramos o en futuras sesiones.

4. Para eliminar un Comando guardado ir al menú Comandos>Editar lista de comandos y pulsar el botón Eliminar.

BUSCAR Y REEMPLAZAR Permite realizar una búsqueda en el documento actual, en una carpeta o en un sitio Web poara buscar texto, etiquetas HTML o restringir la búsqueda a determinados atributos en las etiquetas HTML. Una vez localizado el elemento buscado, se puede modificar o reemplazar por otro.

1. Seleccionar el menú Edición>Buscar y reemplazar o teclas CONTROL + F 2. En la casilla Buscar en, especificar el ámbito de búsqueda, que puede ser un texto

seleccionado, el documento actual, todos los documentos que estén abiertos, una carpeta determinada, archivos seleccionados en el sitio o el sitio local completo.

3. En la casilla Buscar, especificar el tipo de elemento a localizar y que puede ser texto, código, texto avanzado o una etiqueta.

4. En el recuadro Reemplazar, especificar lo que debemos sustituir al elemento localizado. 5. Las opciones de la parte inferior nos permitirán forzar la búsqueda en función de varios

conceptos. 6. Mediante los botones de la derecha podremos determinar el modo de búsqueda, es

decir, buscar de uno en uno los elementos o todos a la vez y, por otra parte, determinar si se deben producir reemplazos de uno en uno o todos a la vez

BUSCAR Y REEMPLAZAR ETIQUETAS Pasos:

1. Abrir la ventana Buscar y reemplazar 2. Seleccionar el lugar en donde debe buscarse 3. En la casilla Buscar, seleccionar Etiqueta específica. La ventana muestra una serie de

campos nuevos. 4. En las casillas que aparecen podremos seleccionar la búsqueda y reemplazo en función

de múltiples condiciones. Si necesitamos establecer más condiciones se puede hacer clic

en el botón y se abrirá otro conjunto de campos. 5. Mediante la casilla Acción y las que siguen, podremos establecer la acción a realizar. En

función de la acción que elijamos aparecerán o desaparecerán campos para que podamos especificar las condiciones con todo detalle.


Página - 75 -

Se puede guardar la búsqueda realizada para futuras sesiones pulsando el botón Guardar consulta como un archivo en disco. Cada vez que necesitemos utilizar la consulta bastará con hacer clic en el icono Cargar consulta.

VISTAS DISEÑO, DIVIDIR Y CÓDIGO Existen tres modos de visualización múltiples:

• Vista Diseño: muestra todos los objetos (texto, imágenes, tablas, etc..) que contenga la página

• Vista Código: muestra únicamente el código fuente HTML • Vista código y Diseño: combinación de los dos modos anteriores, divide la pantalla en

dos mitades que muestra el código y los elementos. Arrastrando la barra que separa las dos vistas podremos dar a cada una de ellas el tamaño deseado.

EDICIÓN DEL CÓDIGO A medida que vayamos creando páginas Web es posible editar el código fuente para modificar o eliminar ciertos elementos de la misma si no podemos controlarlo con la vista diseño. También podremos hacerlo desde el panel Inspector de código mediante el menú Ventana>Inspector de código o pulsando F10.

• En todos los métodos de visualización podremos hacer clic en el icono mediante el cual podemos acceder a varias opciones relacionadas con la vista código, tales como, numeración de líneas, colores, sangrías, etc..

• Durante la edición del código podemos llevar a cabo cualquier cambio. Si el código

introducido o modificado no parece correcto, Dreamweaver lo resaltará para llamar la atención del usuario.

• Si estamos trabajando en el panel Inspector de código (F10), seleccionar una etiqueta y

hacer clic en el icono de referencia , se abrirá el panel referencia en el que obtendremos información y ejemplos sobre la etiqueta seleccionada.


Página - 76 -

EL SELECTOR DE ETIQUETAS

• Se encuentra en la parte inferior izquierda de la ventana de documento y nos permite navegar por la jerarquía de etiquetas HTML dependiendo de lo que esté seleccionado en la ventana del documento.

• Cuando hagamos clic en el lugar deseado del documento, las etiquetas presentes en el

punto de inserción se mostrarán en el selector de etiquetas, A partir de aquí, podremos seleccionar, editar o quitar etiquetas sin salir de la vista Diseño. INSERCIÓN Y EDICIÓN DE ETIQUETAS Una vez situado el cursor en la zona determinada del código HTML, podemos insertar o editar etiquetas de varios modos:

- De forma manual, escribiendo directamente el código - A través de la ventana selector de etiquetas - Mediante el Quick Tag Editor

LA VENTANA SELECTOR DE ETIQUETAS En la vista Código, hacer clic con el botón derecho del ratón sobre una etiqueta o sobre un objeto en la vista Diseño y seleccionar Editar etiqueta, para editar los atributos de una etiqueta. En función del tipo de etiqueta se mostrarán unas u otras opciones. QUICK TAG EDITOR Las Quick Tag nos permitirán insertar rápidamente etiquetas HTML, muy útil cuando se escribe código de forma manual. Trabaja en la vista Diseño. Para insertar una etiqueta HTML con Quick Tag Editor:

11.. En la vista Diseño, hacer clic en la página para colocar el punto de inserción donde deseemos insertar código.

22.. Pulsar teclas CONTROL + T o hacer clic en el icono del panel Propiedades para abrir el editor en modo Insertar HTML. Podemos mover el editor arrastrándolo a otro lugar.

33.. Se mostrarán una serie de sugerencias, para seleccionar una etiqueta hacer doble clic y pulsar después la tecla INTRO. La etiqueta se insertará en el código junto con la correspondiente etiqueta de cierre. Para salir sin realizar ningún cambio, pulsar la tecla ESC

Para editar una etiqueta HTML con Quick Tag Editor:

11.. Seleccionar un objeto en la vista Diseño o seleccionar una etiqueta en el Selector de etiquetas.

22.. Pulsar la tecla CONTROL + T para abrir el Quick Tag editor en modo Editar etiqueta. 33.. Introducir nuevos atributos, editar atributos existentes o editar el nombre de la

etiqueta. Pulsar tecla Tab para pasar de un atributo al siguiente o para retroceder. 44.. Para cerrar el editor y aplicar todos los cambio, pulsar INTRO. Para salir sin hacer ningún

cambio, pulsar ESC.


Página - 77 -

FRAGMENTOS Dreamweaver permite guardar secciones de código para poder reutilizarlos cuando los necesitemos, a estas secciones se les conoce como fragmentos. Son útiles cuando hay código que debe repetirse a lo largo del sitio Web (p. ej. correo electrónico, vínculos, etc..). Los fragmentos de código se gestionan mediante el panel fragmentos que se encuentra en el grupo de paneles Archivo (se muestran agrupados por categorías en carpetas) Para crear un fragmento de código:

1. Situar el cursor en el lugar en donde queremos que se inserte el código cuando lo utilicemos.

2. En el panel Fragmentos hacer clic en el icono Nuevo fragmento y veremos la ventana fragmentos (ver figura).

3. Cumplimentar las opciones del panel (Nombre, Descripción, etc..). si había código seleccionado en la vista Código, éste aparece automáticamente en el recuadro Insertar antes. Podemos utilizar las opciones Copiar y Pegar para colocar código en esta ventana.

4. Pulsar Aceptar y el código se insertará. Si colocamos el código en el recuadro Insertar después, el código se insertará después del cursor.

Para añadir un fragmento:

1. Situar el punto de inserción donde deseemos insertar el fragmento de código o seleccionar código para ajustar un fragmento alrededor.

2. En el panel Fragmentos hacer doble clic en el fragmento.


Página - 78 -

Unidad 10 PLANTILLAS Y BIBLIOTECAS INTRODUCCIÓN Una plantilla es un documento que se puede utilizar como base para la creación de otros documentos. En Dreamweaver podemos crear una plantilla en la que determinaremos las áreas que podrán editarse y las áreas que no. Si tenemos un sitio Web grande con muchas secciones de varias páginas que comparten un diseño común, podremos crear una plantilla para automatizar el proceso, ya que al realizar un cambio en la plantilla, todos los documentos que se hayan creado a partir de ella cambiarán a la vez. Las ventajas de las plantillas aparecen cuando queremos crear un conjunto de páginas con idéntico aspecto y disposición de elementos o cuando el programador crea las páginas bloqueando lo que no se puede tocar pero deja huecos editables en los que los editores podrán incorporar contenido. Para crear una plantilla podemos:

• Partir de una página Web ya realizada • Partir de cero

El procedimiento para crear una plantilla comprende los siguientes pasos:

1. Desarrollar el diseño de la página 2. Crear las zonas que serán editables 3. Guardar la página en formato plantilla

CREAR UNA PLANTILLA DESDE CERO

1. Hacer clic en el icono Plantillas del panel Activos y luego clic en el icono Nueva

plantilla .

2. Asignar un nombre y hacer clic en el icono Editar en el propio panel y veremos un

documento de plantilla en blanco para que podamos añadirle contenido.

3. Desarrollar el diseño de la página

4. Crear las zonas que serán editables

5. Guardar la página en formato plantilla

Nota: Mediante la opción Página de plantilla de la ventana Nuevo documento podemos crear

páginas basadas en las plantillas que ahí aparecen, pero no

nos permite crear plantillas nuevas.


Página - 79 -

CREAR PLANTILLAS A PARTIR DE UN DOCUMENTO

1. Crear un sitio nuevo y empezar un nuevo documento

2. Diseñar la página y crear las zonas editables1

3. Seleccionar menú Archivo>Guardar como plantilla

4. En la ventana que aparece, especificar el sitio en donde se debe guardar la plantilla y el

nombre con el que deseamos guardarla y pulsar Guardar.

5. La plantilla se almacena con la extensión .dwt

La plantilla queda incorporada al sitio y se almacena en la carpeta TEMPLATES. Si abrimos el

panel Activos y hacemos clic en el icono Plantillas se puede ver la plantilla que se ha creado, su vista previa y la posibilidad de modificarla.

Todas las futuras plantillas que vayamos a crear en el sitio aparecen en este panel y podremos editarlas haciendo doble clic en su nombre.

CREAR UNA PLANTILLA DESDE LA BARRA INSERTAR

Otro método para crear una plantilla a partir de un documento consiste en hacer clic en el icono Crear plantilla en la barra Insertar>Común (ver figura)

Previamente tendremos que empezar un nuevo documento y desarrollar el diseño de la página, posteriormente en el menú Archivo, seleccionar Guardar como plantilla y poner un nombre para la plantilla en el sitio definido.

CREAR PÁGINAS DESDE UNA PLANTILLA

Una vez creada la plantilla, comenzaremos a crear páginas a partir de ella.

Pasos:

1. Seleccionar menú Archivo>Nuevo

2. En la ventana que se abre, seleccionar

1 La definición de las regiones editables se verá en la próxima sección


Página - 80 -

3. En el recuadro Sitio hacer clic en el sitio donde hemos guardado la plantilla.

4. En el recuadro de la derecha veremos la plantilla y todas las que contenga el sitio,

seleccionarla y pulsar Crear

Una vez creada la plantilla todo su contenido permanece bloqueado

Al crear una plantilla debemos definir qué partes serán susceptibles de ser modificadas por el usuario –regiones editables- .

Si creamos una plantilla para que otras personas puedan colocar contenidos en las páginas pero sin que nos alteren el diseño y la ubicación de los elementos, deberemos definir las partes de la página en las que el usuario podrá hacer cosas, el resto permanecerá bloqueado.

DEFINICIÓN DE LAS REGIONES EDITABLES

Para crear u definir las regiones editables en una plantilla, debemos diferenciar dos cosas:

AA.. INSERTAR UNA REGIÓN EDITABLE VACÍA

BB.. CREAR UNA REGIÓN EDITABLE A PARTIR DEL CONTENIDO DE UNA PLANTILLA EXISTENTE

AA.. CREAR REGIÓN EDITABLE VACÍA EN UNA PLANTILLA VACÍA (que no contiene nada)

1. En el panel Activos (o menú Archivo>Abrir>Plantillas de archivos> seleccionar el

archivo de plantilla) hacer clic en el icono Editar y colocar el cursor en el lugar de la plantilla en donde deseemos crear una región editable.

2. Menú Insertar>Objetos de plantilla>Región editable ( o bien icono

en la barra Insertar>Común). 3. Asignar un nombre y pulsar aceptar. El nombre se insertará en la plantilla con la

forma de un marcador de posición en color. 4. Si creamos un documento nuevo a partir de esta plantilla sólo podremos escribir

contenido en la zona editable creada.

BB.. CREAR REGIÓN EDITABLE EN PLANTILLA CON CONTENIDO

Si queremos crear zonas editables en una plantilla que ya posee contenido (suele ser lo más habitual)

1. En el panel Activos (o menú Archivo>Abrir>Plantillas de archivos> seleccionar el

archivo de plantilla) hacer clic en el icono Editar 2. Seleccionar el texto o elemento que deseemos convertir en región editable. 3. Menú Insertar>Objetos de plantilla>Región editable y asignar un nombre,

posteriormente Aceptar.

Se puede definir como región editable una tabla entera o una celda individual


Página - 81 -

ELIMINAR REGIONES EDITABLES

Para volver a bloquear una serie de regiones editables:

1. Abrir la plantilla (menú Archivo>Abrir>Plantillas de archivos>seleccionar el archivo) y

seleccionar la región editable que deseemos bloquear haciendo clic sobre su marcador.

2. Seleccionar el menú Modificar>Plantillas>Quitar formato de plantilla.

BIBLIOTECAS

Durante la creación de un sitio web nos encontraremos con que hay una serie de elementos que aparecen de forma repetitiva a lo largo de las páginas, por ejemplo, botones de navegación, información copyright, encabezados, pies de página, etc.. Dreamweaver puede almacenar estos objetos como elementos de biblioteca.

Una vez creados los elementos de biblioteca, quedan preparados para insertarlos en cualquier documento de nuestro sitio. Cuando se modifique un elemento de biblioteca, todas las páginas que los contengan quedarán también actualizadas.

CREACIÓN DE ELEMENTOS DE BIBLIOTECA

Un elemento de biblioteca es un fragmento de contenido Web que podemos utilizar en todas las páginas que deseemos.

Pasos:

1. Seleccionar el elemento que deseemos incluir en al biblioteca

2. Abrir el panel Activos y hacer clic en el icono Biblioteca 3. En la parte inferior derecha del panel, hacer clic en el icono Nuevo elemento de

biblioteca 4. Poner un nombre para el elemento de la biblioteca (asignar un nombre identificativo).

• Cuando se crea un elemento de biblioteca se añade al sitio una carpeta llamada Library que es la encargada de almacenar todos los elementos de biblioteca para el sitio. Esta carpeta y sus correspondientes archivos sólo se almacenan localmente y no es necesario subirlos al servidor.

• Si queremos crear un elemento de biblioteca a partir de varios elementos, éstos deberán ser contiguos en el documento.

• Si la selección tiene algún estilo CSS aplicado, se muestra una advertencia informando que las especificaciones de hojas de estilo no se incluyen en los elementos de biblioteca.


Página - 82 -

COLOCAR ELEMENTOS DE BIBLIOTECA

1. Situar el cursor en el lugar del documento de nuestro sitio donde deseamos ubicar un elemento de biblioteca.

2. En el panel Activos, seleccionar el elemento de la biblioteca y pulsar el botón Insertar. El elemento se muestra con un fondo de color amarillo que lo identifica.

3. Repetir el paso -1- y -2- para insertarlo en otro documento. 4. Si se selecciona el texto insertado en la página, el panel Propiedades nuestra las

siguientes opciones: • Origen: muestra el nombre de archivo y la ubicación del archivo origen para el

elemento biblioteca. • Botón abrir: se podrá editar el elemento de biblioteca. Realizar el cambio y

guardar el archivo con extensión .lbi (CONTROL + S). • Botón separar del original: se romperá el vínculo entre el elemento de

biblioteca seleccionado y su archivo de origen y ya no se podrá actualizar automáticamente cuando se modifique el elemento origen.

• Botón volver a crear: se sobrescribirá el elemento de biblioteca original con la selección actual.

Si arrastramos un elemento de biblioteca desde ésta hasta el documento manteniendo pulsada la tecla CONTROL, se crea una copia separada del elemento con lo cual podremos editar directamente en la página.

MODIFICAR ELEMENTOS DE BIBLIOTECA

Para modificar todas las copias del elemento de biblioteca que se hayan insertado en los diferentes documentos es preciso editarlo.

1. En la biblioteca, hacer doble clic en el elemento que deseemos editar, o pulsar el icono

Editar en el panel Activos. 2. El elemento aparecerá en la ventana de documento (con la extensión .lbi) realizar los

cambios y guardar el documento .lbi (CONTROL + S), se abrirá la ventana Actualizar elementos de la biblioteca. Pulsar en el botón Actualizar y todas las copias del elemento de biblioteca modificado que se encuentren en las páginas del sitio serán actualizadas automáticamente.

RECUPERAR ELEMENTOS DE BIBLIOTECA

Si hemos eliminado accidentalmente un elemento de biblioteca que tenga varias copias repartidas por las diferentes páginas del sitio, podemos volver a crear el elemento a partir de uno de los documentos que contenga el elemento. Para ello:

1. Seleccionar en un documento el elemento que deseamos volver a integrar en la biblioteca.

2. En el panel Propiedades hacer clic en el botón volver a crear y veremos de nuevo el elemento.


Página - 83 -

Unidad 11 MULTIMEDIA INTRODUCCIÓN Dreamweaver permite incorporar en la s páginas Web objetos multimedia como:

• Sonidos • Animación flash • Vídeo flash • Texto y botones creados directamente desde Dreamweaver • Películas Quick Time • Archivos de audio MP3

Cada vez que añadimos un objeto multimedia, veremos una ventana en la que se nos solicita que introduzcamos atributos de accesibilidad. Si no queremos que aparezca esta ventana, seleccionar en el menú Edición>Preferencias en la categoría Accesibilidad. INSERTAR ANIMACIONES FLASH Adobe Flash (programa para la creación de animaciones) utiliza básicamente dos tipos de archivos:

- .FLA: formato origen de este programa que solo puede abrirse en la aplicación de Adobe Flash para poder editarlo

- .SWF: versión comprimida del archivo (.fla), está optimizada para su utilización en la Web, pero no se puede editar. Esta extensión es la que utilizaremos en Dreamweaver.

Cuando queramos utilizar una animación Flash en DW, debemos crearla con Flash y exportarla en formato (.swf). Para insertar una animación:

1. Situar el cursor en la posición deseada

2. En la barra Insertar>Común desplegar el icono Media y seleccionar Flash (ver figura):

3. Se abre una ventana donde seleccionaremos la ubicación y el archivo .swf, pulsar Aceptar para incorporar la película Flash al documento. El elemento de flash se muestra

en gris con el anagrama


Página - 84 -

Mediante el panel Propiedades (ver figura) podemos realizar las siguientes acciones:

1. Asignar un nombre

2. Ajustar las dimensiones

3. Pulsando el botón (sólo se muestra si tenemos instalada la aplicación

de Flash) se puede editar el archivo flash si se dispone de su versión y modificar el

archivo .fla

4. Si activamos la casilla Bucle, la animación se reproduce de forma cíclica

ininterrumpidamente.

5. La casilla Rep. Autom. la película se ejecuta automáticamente al cargarse la página.

6. En la casilla Espacio, podemos especificar el número de píxeles que deberá haber por los

lados de la película.

7. En la casilla Calidad, controlamos la calidad de la reproducción.

8. En la casilla Escala, determina cómo se ajusta la película a las dimensiones establecidas

por las casillas Ancho y Alto.

9. Para reproducir la película pulsar el botón o para su detención Parar.

INSERTAR TEXTO FLASH Mediante la inclusión de texto Flash se pueden insertar menús, vínculos y otros efectos especiales de animación. Al crear un texto flash en Dreamweaver sin recurrir a la aplicación propiamente de Adobe Flash se crea un archivo pequeño .swf que quedará ubicado en la misma carpeta en donde esté el documento HTML que lo contenga. Para insertar un texto flash:

1. Situar el cursor en el documento donde deseemos insertar el texto flash

2. En la barra Insertar>Común desplegar el icono Media y seleccionar

, en la ventana que se muestra configurar las características y al finalizar pulsar en

Aplicar y posteriormente Aceptar.

3. En la casilla Vínculo, especificar un vínculo al cual deberá saltar el navegador cuando

hagamos clic en el texto flash

4. En la casilla Guardar como indicar el nombre y ubicación para el archivo .swf que

contendrá el texto. Si el archivo contiene un vínculo relativo al documento, debemos

guardarlo en la misma carpeta que el documento HTML actual con objeto de mantener

los vínculos relativos al documento.


Página - 85 -

INSERTAR BOTONES FLASH

1. Situar el cursor en el lugar donde queremos que aparezca el botón.

2. En la barra Insertar>Común desplegar el icono Media y seleccionar .

En la ventana que aparece configurar las características (ver figura):

3. Pulsar el botón Aplicar para ver la apariencia sin cerrar la ventana y luego Aceptar.

4. En la casilla Vínculo, especificar el vínculo al cual deberá saltar el navegador cuando se

haga clic en el botón.

5. En la casilla Guardar como, indicar el nombre y ubicación para el archivo .swf

6. Si el archivo contiene un vínculo relativo al documento, debemos guardarlo en la misma

carpeta que el documento HTML actual con objeto de mantener los vínculos relativos al

documento.

7. Si hacemos clic en el botón se pueden descargar desde la web de

Adobe

INSERTAR VÍDEO Se puede insertar vídeo de varios modos:

- Incrustando el vídeo en la página - Creando un vínculo a un archivo de vídeo - Utilizando una película de Flash con un vídeo incorporado - Insertando Flash vídeo directamente

Dreamweaver soporta los formatos AVI, MPEG, WMA y MOV (Quick Time)


Página - 86 -

INCRUSTAR VÍDEO EN UNA PÁGINA WEB El vídeo quedará incorporado directamente en la página. Pasos:

1. Situar el cursor en el lugar deseado para ubicar la película

2. En la barra Insertar>Común desplegar el icono Media y seleccionar 3. En la ventana que se muestra seleccionar el archivo de vídeo y posteriormente pulsar

Aceptar. La película se inserta por defecto a un tamaño de 32 x 32 píxeles. Si el vídeo aparece recortado, aumentar las dimensiones de la película mediante las casillas An y Al del panel Propiedades o arrastrando de los delimitadores VÍNCULO A UN ARCHIVO DE VÍDEO

1. Seleccionar un texto, imagen u objeto al que aplicaremos el vínculo. 2. En la casilla vínculo del panel Propiedades escribir la ubicación y nombre del archivo de

vídeo. 3. Cuando se previsualice la página, al hacer clic en el vínculo se abrirá el reproductor

correspondiente para ver el vídeo. Si se trata de vídeos .wma o .mpeg se abrirán con el reproductor de Windows Media Player y los archivos .mov con el reproductor de Quick Time.

FLASH VÍDEO El formato de flash vídeo (*.flv) es un estándar para la difusión de vídeo a través del reproductor Flash, no se necesita utilizar una película de flash previamente creada en esa aplicación.

1. Seleccionar el menú Insertar>Media>Flash o bien en la barra Insertar>Común desplegar

el icono Media y seleccionar .

2. Se muestra el cuadro de diálogo Insertar Flash Vídeo (ver figura)


Página - 87 -

3. En la ventana configurar lo siguiente:

• Tipo de vídeo: elegir Descarga progresiva (Progresive Download Vídeo), de tal

manera que el usuario que quiera ver un vídeo colocado en la Web , el archivo de flash vídeo (.flv) se descargará al disco duro del usuario y lo reproducirá

• Vínculo: seleccionar la ubicación y archivo de vídeo a insertar en la página Web. • En Ancho y Alto: asignar las medidas de altura y anchura con el botón Detectar

tamaño, Dreamweaver ajusta automáticamente el tamaño de la ventana de reproducción al del vídeo seleccionado.

INSERTAR SHOCKWAVE Es el formato estándar para multimedia interactivo en la Web. Es un formato comprimido que permite descargar de forma rápida los archivos multimedia creados en Adobe director y su reproducción en los navegadores de uso más frecuente. Pasos:

1. Situar el cursor en el lugar donde deseemos que aparezca la película

2. En la barra Insertar>Común desplegar el icono Media y seleccionar 3. Elegir de la ventana el archivo deseado.

INSERTAR SONIDO Podemos utilizar la mayoría de los formatos de archivo más comunes como .wav, .mid., .mps, etc.. Características de algunos formatos de audio: .MID es un formato creado para la informática musical y la comunicación entre instrumentos

musicales electrónicos. La calidad del sonido es muy alta. Los archivos MIDI no se pueden grabar y deben sintetizarse en un ordenador con hardware y software especiales.

.WAV compatible con cualquier navegador, no requiere de plug-in. Podemos grabar nuestros

propios archivos .wav a través de micrófono. Su limitación es el gran tamaño del archivo.

.MP3 es un formato comprimido que reduce el tamaño de los archivos de sonido pero

conservando una gran calidad. Para reproducir archivos MP3 los visitantes deben descargar e instalar una aplicación auxiliar o un plug-in como Quick t Time, Windows Media Player o Real Player.

Para insertar archivos de audio, podemos utilizar varios métodos:

• Incrustando el audio en la página • Creando un vínculo a un archivo de audio • Utilizando una película flash con audio incorporado


Página - 88 -

INCRUSTAR AUDIO EN UNA PÁGINA WEB El sonido queda incrustado directamente en la página Web. Sin embargo, el sonido sólo se reproducirá si los visitantes del sitio disponen del plug-in adecuado para el archivo de sonido elegido. Se recomienda proporcionar un control para desactivar o silenciar la reproducción del sonido por si los visitantes no desean escuchar el contenido de audio. Pasos:

1. Situar el cursor en el lugar de la página donde deseemos ubicar el sonido

2. En la barra Insertar>Común desplegar el icono Media y seleccionar

3. En la ventana que se muestra, elegir el archivo y luego Aceptar.

VÍNCULO A UN ARCHIVO DE AUDIO Los visitantes podrán decidir si desean o no escuchar el sonido.

1. Seleccionar un texto, imagen u objeto al cual deseamos aplicarle el vínculo 2. En la casilla vínculo del panel Propiedades escribir o seleccionar la ubicación y nombre

del archivo de sonido. 3. Cuando se previsualice la página, al hacer clic en el vínculo se abrirá el reproductor

correspondiente para la audición del sonido. INSERTAR APPLET DE JAVA Los applets de java son pequeñas aplicaciones realizadas en lenguaje Java que pueden insertarse en las páginas Web. Mediante estos pequeños scripts podemos incluir en nuestras páginas infinidad de elementos que proporcionan más dinamismo a la página web (banners, etc..) El applet deberá estar presente en la carpeta del sitio en donde se encuentre la página que lo contenga. Para insertar un applet:

1. Crear un documento nuevo

2. Situar el cursor en donde deseamos que aparezca el applet

3. Seleccionar menú Insertar>Media>Applet o bien barra Insertar>Común desplegar el

icono Media y seleccionar

4. Seleccionar el archivo (extensión .class) y Aceptar

5. Aumentar el ancho y alto del objeto con los delimitadores


Página - 89 -

INSTALAR Y UTILIZAR EXTENSIONES

Dreamweaver permite ampliar las prestaciones del programa mediante la utilización de extensiones que son pequeños programas que se añaden a DW para aumentar sus posibilidades. Las extensiones pueden albergar desde funciones en HTML que pueden añadirse a la barra o el menú Insertar, hasta comandos Javascript que se pueden incluir en el menú Comandos o al panel Comportamientos. CÓMO INSTALAR LAS EXTENSIONES Para instalar las extensiones se utiliza el Extension Manager. Pasos:

1. Elegir menú Comandos>Administrar extensiones 2. En la ventana del gestor de extensiones (aplicación independiente) se pueden instalar

extensiones, eliminarlas y acceder a la web de Adobe Exchange, etc.. (ver figura)

3. Seleccionar en el desplegable que aparece en la parte superior Dreamweaver CS3 y

seguidamente la opción Archivo>Instalar>Extensión o pulsar el icono y se abrirá la ventana en la que se elije la ubicación y extensión a instalar. Las extensiones son archivos .mxp o .mxi

4. Pulsar Instalar para ejecutar la instalación de la extensión y posteriormente Aceptar. 5. Para insertar el objeto, ir al menú Insertar y seleccionar el nombre del objeto o bien, en

la nueva pestaña creada (llamada Goodies) pulsar en 1.

6. El icono de la papelera elimina la extensión que esté seleccionada y mediante el

icono de adobe accedemos a la página desde la cual se pueden descargar nuevas extensiones.

7. Repetir los pasos -1- al -4- para añadir nuevas extensiones.


Página - 90 -

Unidad 12 ENTORNO SPRY

• El entorno Spry consiste en una biblioteca de elementos JavaScript que nos permitirá

añadir efectos, crear barras de menú, elementos desplegables, controlar formularios,

etc.. en nuestras páginas Web.

• Los efectos se encuentran en el panel Comportamientos , si accedemos a dicho panel a

través del menú Ventana>Comportamientos, pulsar el icono , se desplegará la lista

de comportamientos disponibles, elegir el comando Efectos para ver la lista de efectos

disponibles.

• Cada vez que se asigne un efecto Spry, se creará una carpeta específica (SpryAssets)

que contendrá el archivo JavaScript (.js) necesario para la reproducción del efecto.

• Los efectos son: Agitar, aparecer/desvanecer, Arrinconar, Aumentar/reducir, Deslizar,

Persiana y Resaltado.

• Algunos efectos sólo pueden utilizarse para determinadas etiquetas HTML

SPRY WIDGETS Los spry widgets permiten incorporar en nuestras páginas Web elementos tales como barras de menús, paneles, pestañas, etc.. que posibilitan al usuario seleccionar opciones de forma fácil y cómoda. Los Spry widgets tienen en común las siguientes propiedades:

- Son totalmente personalizables en tamaño y colores y se les pueden incorporar elementos gráficos

- Al igual que los comportamientos y otros elementos, es necesario guardar antes la página para poder aplicarlos.

- Al insertar spry widgets se creará automáticamente un fichero externo necesario para su funcionamiento.

En la barra Insertar se encuentra la pestaña Spry con los distintos iconos (ver figura) :

Destacamos entre otros cuatro elementos como son:

• Barra de Menús de Spry

• Paneles en fichas de Spry

• Acordeón de spry

• Panel que puede contraerse de Spry


Página - 91 -

BARRA DE MENÚS DE SPRY Permite crear menús horizontales o verticales y sustituye al comportamiento menú emergente de otras versiones. Pasos:

1. Crear un documento nuevo y guardarlo; en caso contrario no podremos incorporar el widget

2. Hacer clic en el icono Barra de menús de spry y en la ventana emergente, elegir entre un menú horizontal o vertical y Aceptar.

3. Se muestra una barra de menús con una serie de opciones por defecto. Al mismo tiempo, el panel Propiedades y el panel Estilos CSS mostrarán opciones y parámetros que nos permitirán personalizar la barra de menús

4. Para personalizar el menú mediante el panel Propiedades: 4.1. Hacer clic en el título en color azul ( )de la barra de menús

para trabajar con las propiedades. Se permiten hasta tres niveles de menú y submenú, los cuales se muestran en los tres recuadros grandes del panel. La barra de menú aparece por defecto con una serie de opciones principales y secundarias. Si hacemos clic en elemento 1 vemos que tiene asignados tres subelementos. Ocurre lo mismo en el elemento 3 que tiene asignados tres subelementos de los cuales, el primero (elemento 3.1) tiene a su vez asignados otros tres subelementos.

4.2. Para añadir o eliminar esos subelementos o niveles hacer clic en los botones

que aparecen sobre cada una de las columnas correspondientes a los

diferentes niveles. Con los botones podemos ordenar las opciones.

4.3. Para cambiar el texto de las opciones, hay que seleccionarlas en el panel e introducir el texto en la casilla Texto.


Página - 92 -

4.4. En la casilla Vínculo tenemos que introducir el enlace a una página, correo electrónico, etc..al que se accederá al hacer clic en la opción de menú. Utilizar cualquiera de los métodos descritos en la unidad de los vínculos para llevar a cabo los enlaces.

Si trabajamos en una página con Marcos, podemos indicar en la casilla Destino en cuál de ellos se abrirá

4.5. En la casilla Título podemos escribir un texto de ayuda contextual que se mostrará

en forma de etiqueta al colocar el ratón sobre el elemento del menú.

4.6. Haciendo clic en el botón podemos ver los niveles y subniveles d forma escalonada para su mejor interpretación. Para volver al modo de

visualización normal pulsar en el botón

Al crear una barra de menús Spry, el panel de estilos CSS muestra una serie de reglas CSS vinculadas a esa barra. Cada una de estas reglas controla una característica de la barra de menús (estilos, colores,etc.) para saber lo que hace cada regla y cómo actuar en ella, seleccionar la barra de menús en el

documento y, en el panel Propiedades, hacer clic en el enlace , en la ventana de Ayuda que se muestra encontraremos información. NAVEGACIÓN POR FICHAS Incorporan pestañas que actúan a modo de contenedores, pudiendo alojar todo tipo de elementos HTML y además organizan la información de la página sin congestionarla. Para crear un bloque de fichas o pestañas:

1. Crear un documento nuevo y guardarlo

2. Seleccionar el icono Paneles en fichas de Spry

2.1 Para cambiar el nombre de una ficha, seleccionarla como texto normal y escribir el texto deseado, insertar tablas, formularios, imágenes, etc.

2.2 Para cambiar la ficha, pasar el cursor del ratón por encima de la pestaña y se

mostrará un icono con un ojo , hacer clic sobre é para cambiar. 2.3 Para añadir contenido a la ficha, seleccionarla y colocar en su interior lo que

deseemos. 2.4 Si seleccionamos un conjunto de fichas haciendo clic en su borde o en la etiqueta

azul ( ), en el panel Propiedades se podrá añadir, eliminar y ordenar fichas.

2.5 En la casilla Panel predeterminado debemos elegir la ficha que deberá aparecer

abierta al cargarse la página. 2.6 La personalización de este widget Spry se realiza del mismo modo que la Barra de

menús de Spry Se puede utilizar la navegación por fichas para crear catálogos de productos (ver figura página siguiente)


Página - 93 -

ACORDEÓN DE SPRY Muy parecido a la navegación por fichas Spry pero con una disposición vertical. Para crear un acordeón Spry:


2. Seleccionar el icono Acordeón de Spry 3. Seguir los mismos pasos de la navegación por fichas de Spry para los distintos elementos

PANEL DE CONTRACCIÓN SPRY Es un panel en el que podemos alojar la información que deseamos y que puede abrirse o cerrarse a voluntad. Pasos:


2. Seleccionar el icono Panel que puede contraerse de Spry Al igual que en la navegación por fichas y en el acordeón, cambiar el nombre del panel y colocar en su interior el contenido deseado. Configuración del panel:

1. En la casilla Estado predeterminado del panel Propiedades, indicar si se mostrará

inicialmente abierto o cerrado.

2. En la casilla Mostrar hacer clic en Abierto o cerrado del panel si éste nos estorba,

también se puede hacer clic sobre el icono del ojo que aparece a la derecha del

encabezado del panel.

3. La casilla Activar animación permite decidir si el panel debe contraerse o expandirse de

forma animada o bruscamente.


Página - 94 -

SPRY Y LOS FORMULARIOS Hay cuatro elementos Spry que nos permitirán incorporar a nuestros formularios la posibilidad de validación, es decir, elementos que añaden un cierto control a los datos e información que el usuario vaya a introducir en el formulario que hayamos creado. Los cuatro elementos son:

1. Campo de texto de validación

2. Selección de validación

3. Casilla de verificación de validación

4. Área de texto de validación Para que estos elementos tengan sentido es preciso que previamente se haya creado un formulario y esté guardado. CAMPO DE TEXTO DE VALIDACIÓN SPRY Permite introducir campos de texto que muestran varios estados de forma llamativa cuando el usuario introduce datos en ellos. Pasos:

1. Crear un formulario y guardarlo 2. En la barra Insertar>Formularios, seleccionar icono Campo de texto de validación de

Spry

3. El campo de texto es similar al de un campo de texto de formulario. Seleccionar el campo y ajustar en el panel Propiedades:

3.1 En la casilla Tipo: indicar el tipo de valor a introducir. Si no hay ninguno que nos

sirva, seleccionar la opción Personalizado. 3.2 En la casilla Formato: en el caso de que hayamos elegido una opción de

personalización, debemos introducir un patrón contra el que se comparará y se evaluará si el texto introducido al rellenar el formulario es correcto o no.

Escribir en la casilla Patrón una secuencia de caracteres que imite el texto que deseamos. Por ejemplo, si queremos que se introduzcan un número con 9 dígitos podemos escribir

000-000000 y luego activar la casilla Aplicar patrón. 3.3 En la casilla Sugerencia; escribir un texto de ayuda para que el usuario sepa

exactamente qué debe escribir. 3.4 En las casillas Valor mín. y Valor máx. establecer un rango de valores al cual

deberá pertenecer el valor introducido


Página - 95 -

3.5 En la casilla Car máx. y Car mín. podemos indicar cuántos caracteres mínimos y máximos admitirá el campo texto

3.6 Si activamos la opción Obligatorio forzamos que el campo de texto no pueda dejarse en blanco.

Las opciones de validación que nos permitirán determinar cuándo queremos que Spry compare lo que se ha escrito y lo considere correcto o erróneo:

- casilla Enviar: estará siempre activada por defecto, por lo que cada vez que se envíe el formulario se comprobará que los datos son correctos

- casilla Desenfocar: ejecutará la evaluación de texto cada vez que se escriba cualquier carácter en la caja ( no recomendable)

- casilla Estados de vista previa del panel propiedades posibilita seleccionar varios estados que el campo de texto mostrará al visualizarse el formulario en la página y en función de lo que suceda.

SELECCIÓN DE VALIDACIÓN SPRY

Permite elaborar listas de menú con validación del contenido para, por ejemplo, saber si se ha seleccionado la opción correcta o un elemento que no es válido. La utilidad de esta herramienta es la posibilidad de controlar los valores que se seleccionen en una lista desplegable.

1. Crear un formulario y guardar la página

2. En la barra Insertar>Formularios, elegir icono Selección de validación o la opción correspondiente en el menú Insertar>Spry. Este elemento equivale al de Lista/Menú de un formulario

3. Con el campo seleccionado ajustar las siguientes opciones:

3.1 casillas Estilos de vista previa y Validación funcionan igual que en elemento Campo de texto. Es aconsejable usar el valor Cambiar para que se evalúe cada vez que se selecciona un valor.

3.2 Si activamos la casilla Valor en blanco de la sección No permitir, las opciones que no tengan asignado un valor no serán aceptadas.

3.3 Si activamos la casilla Valor no válido, la opción cuyo valor asignado coincida con el que aparezca en la casilla de la derecha no será temida en cuenta para la selección.

3.4 Para introducir las opciones hacer clic en la flecha desplegable del selector y el panel propiedades muestra las opciones de Elemento Lista/Menú (ver unidad de

formularios). Hacer clic en el botón e introducir las opciones. 3.5 En la columna Valor ajustar el valor para cada opción. Si no se asigna un valor y

se ha activado la casilla No permitir valor en blanco, al elegir esta opción aparece un mensaje de error


Página - 96 -

ÁREA DE TEXTO DE VALIDACIÓN Permite crear un área de texto que mostrará diferentes estados en función del texto introducido por ejemplo, alertando al usuario de que ha sobrepasado el número de caracteres permitidos.


2. En la barra Insertar>Formularios, seleccionar Área de texto de validación o la opción correspondiente en el menú Insertar>Spry

3. Este elemento equivale al Campo de texto de varias líneas (ver unidad de formularios). 4. Con el campo seleccionado, ajustar las siguientes opciones:

4.1 Las casillas Estados de vista previa, Validación y Número de caracteres mínimo y

máximo funcionan igual que en los elementos de Spry vistos anteriormente. 4.2 Se puede activar las casillas Obligatorio y Sugerencia para, obligar al rellenado del

campo y sugerir un texto que incite a cumplimentarlo. 4.3 Para evitar que el usuario pueda escribir más caracteres de los permitidos, se

puede activar la opción Bloquear caracteres extra. 4.4 Se puede incluir un controlador de caracteres marcando la opción Recuento de

caracteres, o bien, marcar Caracteres restante para que se muestren los caracteres que se han escrito o los que faltan para alcanzar el máximo.

CASILLAS DE VERIFICACIÓN Permite colocar grupos de casillas de selección de forma que si se seleccionan menos casillas de las requeridas, aparezca un mensaje de error. Este elemento equivale a las casillas de verificación de los formularios.


2. En la barra Insertar>Formularios, Casilla de verificación de validación o la opción correspondiente en el menú Insertar>Spry.

3. Veremos la casilla de verificación, para añadir más casillas debemos crear la región Spry

y luego sin salirnos de la zona delimitada con el recuadro azul tenemos que insertar más casillas de verificación mediante la opción Insertar>Formularios>Casilla de verificación hasta alcanzar el numero de casillas que necesitemos. Si queremos que las casillas aparezcan en columnas, situar el cursor a la derecha de cada una de ellas y pulsar la tecla INTRO.

4. Con el campo seleccionado, ajustar las propiedades: 4.1 casillas Estado de vista previa y Validación funcionan igual que en los elementos

Spry ya vistos. 4.2 En el panel Propiedades, debemos indicar que estamos trabajando con más de

una casilla activando la opción aplicar rango (varias casillas). De este modo podremos señalar el máximo y el mínimo de casillas de verificación que se podrán cambiar utilizando las casillas Nº mínimo de opciones seleccionadas y Nº máximo de opciones seleccionadas.

MANUAL DE DREAMWEAVER · MANUAL DE DREAMWEAVER Página -I- Índice

Documents

Transcript of MANUAL DE DREAMWEAVER · MANUAL DE DREAMWEAVER Página -I- Índice