Unidad 3 ESTILOS CSS

Transcripción

MANUAL DE DREAMWEAVER
Í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 -I-
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 -II-
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 -III-
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 -IV-
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 -V-
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 - 1 -
•
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 - 2 -
-
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 Estándar
Selector de
etiquetas HTML
Barra Documento
Barra de estado
Tamaño de la
ventana
Tamaño y tiempo
de carga
Página - 3 -
•
•
•
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
A.
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.
B.
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 - 4 -
C.
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.
D.
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.
E.
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.
F.
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 - 5 -
G.
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.
H.
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.
Posición de arrastre
Para desplegar 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.
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
.
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.
Página - 6 -
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:
1º. Crear un nuevo sitio.
2º. Crear la(s) carpetas y archivos que van a constituir nuestro sitio Web.
3º. 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..).
4º. Introducir en cada página los elementos que deseemos (texto, imágenes, vínculos,
capas, animaciones, sonidos, etc..)
5º. 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).
6º. Comprobar el buen funcionamiento de todos los vínculos.
7º. Comprobar la compatibilidad con diferentes navegadores.
8º. Alojar el sitio Web en el servidor al que estemos suscritos.
Página - 7 -
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
1. 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
2. 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.
3. 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.
4. 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 - 8 -
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.
5. 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.
6. 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).
7. 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.
1. 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..)
2. 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).
3. 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.
4. En el siguiente paso seleccionar No deseo utilizar una tecnología de servidor y pulsar el
botón Siguiente.
5.
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
botón Siguiente.
y seleccionar la carpeta que hemos creado en el paso -2-, pulsar el
6. 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.
7. Para finalizar, pulsar el botón Completado.
Página - 9 -
CÓMO SUBIR LAS PÁGINAS AL SERVIDOR
A.
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 .
B.
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.
C.
SUBIR LOS ARCHIVOS AL SERVIDOR
Una vez tengamos nuestras páginas y archivos del sitio web creados, debemos depositarlos
(subirlos) en el servidor. Pasos:
1. 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.
Página - 10 -
2. 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.
3. 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.
D.
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:
1. 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.
2. 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 - 11 -
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:
A.
DESDE EL PANEL DE ARCHIVOS
1. En el panel Archivos, activar la Vista local y pulsar en el icono
2. Seleccionar Archivo>Nuevo archivo o Nueva carpeta
3. Aparece un nuevo archivo con el nombre por defecto untitled.html
También desde el panel Archivos
•
B.
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.
DESDE EL MENÚ ARCHIVO DE LA APLICACIÓN DE DREAMWEAVER
1. Seleccionar menú Archivo>Nuevo…
2. 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.
3. Aparece un nuevo archivo con el nombre por defecto untitled.html
4. 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:
1. En el panel Archivos, seleccionar con el botón derecho el nombre del archivo que
deseamos convertir en página de inicio o principal.
2. 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 - 12 -
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 de estos
métodos:
•
•
•
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)
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 - 13 -
Si hemos creado varias páginas sin tener un sitio local definido:
1. Crear primero el sitio local (ver CREAR UN SITIO LOCAL)
2. 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.
3. 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:
1. Abrir el sitio local
2. Menú Archivo>Abrir y seleccionar de la unidad correspondiente el archivo deseado.
3. 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..
4. 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.
1º. Definir los diferentes navegadores, para ello en el menú Archivo>Vista previa en el
navegador>Editar lista de navegadores…para ver la ventana Preferencias.
2º. 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.
3º. Una vez definidos los navegadores, para ver las páginas pulsar la tecla F12
Página - 14 -
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 - 15 -
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 - 16 -
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) .
Página - 17 -
• 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.
Color fuente
Alineación
Listas y Sangría
Para añadir nuevas fuentes, en la casilla Fuente del panel Propiedades seleccionar Editar lista
de fuentes…:
•
Si queremos agregar 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.
Para eliminar 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
.
Para 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
Página - 18 -
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
(sin ordenar). Se pueden crear a partir de texto previamente editado o sin editar.
Para crear listas desde cero:
1. Situar el cursor donde deseemos comenzar la lista
2. En el panel Propiedades hacer clic en el icono Lista sin ordenar
en el icono de Lista ordenada
•
•
o bien
. 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 (para definir un término) utilizar los iconos
de la barra Insertar>Texto. Si seleccionamos esta opción:
Pulsar el icono dl y pulsar Intro.
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 (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
o
o
•
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.
Para establecer las propiedades de las listas:
1. 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 - 19 -
•
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 - 20 -
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 - 21 -
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 - 22 -
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 - 23 -
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 - 24 -
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 - 25 -
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
•
Etiqueta: redefinir el formato predeterminado que posee una etiqueta HTML.
bloque de texto (cualquier tipo de texto en la página).
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 - 26 -
PRÁCTICA con EL SELECTOR DE CLASE
1.
2.
3.
4.
5.
Crear un documento de nombre practica2_cssinterno.html
Seleccionar Nueva regla CSS
Elegir el selector clase y ponerle de nombre .parrafo, y sólo para este documento
Insertar distintos atributos de uente, tamaño, color, etc. (categoría Tipo)
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
mostrar las propiedades y cambiar el estilo.
para
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 - 27 -
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 - 28 -
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 de estos pasos:
• 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.
• 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 PropiedadesPárrafo o
Encabezado 1,Encabezado 2, etc.. y en la casilla EstiloNinguno
Si queremos que prevalezca el estilo de Clase, en Formato del panel Propiedades
seleccionar Ninguna y en la casilla Estiloel 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 - 29 -
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:
1º. 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.
2º. 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 - 30 -
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:
1º.
2º.
3º.
4º.
Seleccionar menú Archivo>Nuevo>Página en blanco
En el recuadro Tipo de página hacer clic en HTML
En la columna central seleccionar un diseño
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 - 31 -
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:
1. El nombre y la ruta del archivo o página a la que se quiere vincular
2. 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:
A.
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 solo hay que
especificar el nombre del archivo de
destino. Por ejemplo
internacionales.html en la carpeta
Ofertas.
• Si el archivo se encuentra en otra
carpeta del mismo sitio, 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.
• Si deseamos establecer un vínculo
que enlace nacionales.html con un documento situado en el directorio raíz
(directorio padre9 es necesario colocar . . /seguido del nombre del archivo.
B.
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 - 32 -
C.
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:
1. Seleccionar el elemento de la página al que estableceremos el vínculo, ya sea un texto o
una imagen.
2. En la casilla vínculo del panel Propiedades
seguir
uno de estos métodos :
• Escribir la ruta del vínculo manualmente
• 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
1. En la página, seleccionar el texto que deseemos. Puede ser una letra, palabra o un
conjunto de palabras.
2. Indicar la ruta por utilizando alguno de los métodos anteriores
PRÁCTICA con VÍNCULOS
1. Crear tres páginas llamadas home.html, uno.html, dos.html y tres.html
2. 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
3. Guardar la página
4. 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.
5. En el documento dos.html escribir; principal, página UNO y página TRES y asignar a cada
6. En el documento tres.html escribir; principal, página UNO y página DOS y asignar a cada
Página - 33 -
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:
1. 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
3. Introducir la dirección de correo y Aceptar
O bien
del grupo Común de la barra Insertar
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 - 34 -
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 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.
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. Guardarla.
2. En la pestaña Común (barra Insertar) seleccionar el icono Anclaje con nombre
escribir un nombre para el marcador.
y
3. Abrir la página desde la que saltaremos(hipervínculo) al marcador y seleccionar el texto
o imagen.
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.
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 - 35 -
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 - 36 -
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.
Página - 37 -
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 - 38 -
•
•
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.
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
o
•
•
•
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.
Página - 39 -
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
panel Archivos.
del
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:
•
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 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.
4) Para 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 - 40 -
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)
2)
3)
4)
Seleccionar el archivo cuyo vínculo deseamos cambiar.
Seleccionar el menú Sitio>Cambiar vínculo en todo el sitio
En la casilla Cambiar todos los vínculos a, se mostrará la ruta y nombre del archivo.
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 - 41 -
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 - 42 -
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
Modificar>Tabla>Combinar celdas.
del panel Propiedades, o bien menú
-
Para dividir:
•
Seleccionar la celda a dividir y pulsar el botón
Modificar>tabla>Dividir celdas.
del panel Propiedades o bien, menú
Página - 43 -
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:
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 - 44 -
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:
A.
B.
Seleccionar la celda donde deseamos incluir la tabla anidada y crear la tabla siguiendo
uno de los métodos comentados anteriormente.
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:
1. Pulsar las teclas Alt + F6 o bien, menú Ver>Modo de tabla
2. En la barra de Insertar, seleccionar ficha Diseño y pulsar el icono Dibujar tabla de diseño
3. 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
1. En la barra Insertar, seleccionar ficha Diseño y pulsar el icono Dibujar celda de diseño
2. 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.
3. 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 - 45 -
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.
2. 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:
1. Seleccionar la celda
2. Con las teclas de cursor desplazar píxel a píxel
Página - 46 -
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.
Página - 47 -
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 - 48 -
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 de estas acciones:
1
•
•
Situar el cursor en la posición deseada y menú Insertar>Imagen
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)
Página - 49 -
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
Delimitadores
•
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:
Perfilar
Recorte
Optimizar
Recorte
Brillo y
Contraste
Página - 50 -
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:
1. Reducir el ancho y alto de la imagen en el panel Propiedades
2. 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
menos difuminadas.
aumenta la nitidez de las imágenes para que aparezcan más o
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 - 51 -
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:
A. 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.
B. 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.
C. 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:
1. Seleccionar la imagen
2. 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
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
actualizadas las imágenes
. El
para tener
Página - 52 -
•
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
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.
se abrirá el
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
de html
hacia el archivo de imagen o archivo
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 - 53 -
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
archivos
e indicar el archivo de imagen o bien arrastrar el Selector de
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.
Página - 54 -
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 se sitúe el cursor encima.
• Imagen de sustitución: seleccionar con el botón Examinar… la imagen que
deberá aparecer al situar el cursor sobre la imagen inicial.
• 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.
Página - 55 -
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 - 56 -
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.
Área de Navegación
•
•
•
•
•
•
•
-----------------------------------------------------------------------
Área de Contenido
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
Página - 57 -
INSERCIÓN DE UN CONJUNTO DE MARCOS PREDEFINIDO (Opción recomendada)
Disponemos de tres métodos para insertar un conjunto de marcos:
A.
Menú Archivo>Nuevo>Página de muestra>Conjunto de marcos, seleccionar la
distribución y número de marcos (por defecto izquierda fijo).
B.
C.
Ficha Insertar>Diseño>Marcos
, seleccionar algún diseño de marcos
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:
1. Menú Modificar>Conjunto de marcos>Dividir marco a la izquierda
2. 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 - 58 -
Pasos:
1. En el menú Ventana>Marcos para ver la miniatura
2. 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
3. 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
1. 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
2. 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.
3. Hacer clic en la miniatura en el marco izquierdo y ponerle un nombre al marco. Repetir
lo mismo para el marco derecho.
4. 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)
5. 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.
6. Hacer clic en el documento en el marco derecho (archivo situado a la derecha) y editar
el contenido correspondiente y Guardar.
Página - 59 -
7. 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
1. Pulsar en el panel Marcos sobre el marco deseado
2. En el campo Nombre de marco se puede asignar un nombre de marco
3. En la casilla Origen aparece el nombre del archivo para el marco. Si queremos cambiarlo
pulsar los iconos
o
4. En la casilla Desplaz. Determinar si deben aparecer o no las barras de desplazamiento
5. 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.
6. En la casilla Bordes permite visualizar o no los bordes del marco.
7. 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
1. Seleccionar el conjunto de marcos en el panel Marcos
2. 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 - 60 -
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 - 61 -
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:
A.
B.
El código HTML que constituye el formulario que el usuario ve en la página
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:
1. 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
2. Seguidamente, el usuario pulsa en un botón que provoca el envío al servidor, de la
información introducida o seleccionada.
3. 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
1. Situar el cursor en el lugar de la página en donde vamos a crear el formulario
2. Ficha Insertar>Formulario>Formulario o bien Ficha Insertar>ficha Formularios>Formulario
3. 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
podemos anidar un formulario dentro de otro.
4. Si hacemos clic en la etiqueta <form>, el panel de propiedades mostrará las casillas para
el control del formulario.
5. Es preferible insertar el nombre del formulario , para ello, editarlo en el panel
Propiedades del formulario
Página - 62 -
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
A.
CAMPOS DE TEXTO DE UNA LÍNEA
Se utilizan para que el usuario introduzca combinaciones alfanuméricas cortas y
concisas.
1. Situar el cursor dentro de la zona del formulario
2. En la ficha Insertar>ficha Formularios, hacer clic en el icono Campo de texto
3. 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.
4. Con el campo de texto seleccionado (hacer clic) podemos arrastrar para mover
el área de texto a otra posición y escribir la etiqueta.
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 - 63 -
B.
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..
1. Seleccionar en el panel Propiedades dentro del apartado Tipo: Varias líneas o
hacer clic en el icono Área de texto
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.
C.
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.
2. En la ficha Insertar> ficha Formularios, hacer clic en el icono Casilla de
verificación
3. 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.
D.
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 - 64 -
Pasos para crear un botón de opción:
1. Crear un formulario y situar el cursor dentro de la zona del formulario
2. En la barra Insertar>Formulario, hacer clic en el botón de opción
3. 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 espaciosESCRIBIR 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:
2. En la barra Insertar>Formularios hacer clic en el icono Grupo de opción
cuadro de diálogo Grupo de opción
•
•
•
, veremos el
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 - 65 -
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:
1. Situar el cursor dentro de la zona de formulario
2. Hacer clic en el icono Lista/Menú . Aparece una casilla con un desplegable
3. Con el elemento de lista seleccionado el panel de Propiedades muestra las siguientes
opciones (ver figura):
4. 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:
1. 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.
2. En la barra Insertar>Formularios hacer clic en el icono Botón
3. Por defecto aparece un botón con el texto Enviar
4. 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 - 66 -
CAMPO DE IMAGEN
Permite insertar una imagen en un formulario y utilizarlo para enviar formularios.
Pasos:
1. Situar el cursor dentro de la zona del formulario donde deseemos ubicar la imagen.
2. En la barra Insertar>Formularios hacer clic en el campo Imagen. Se abrirá una ventana
para poder seleccionar la imagen.
3. 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:
1. 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.
2. 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.
3. 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:
1. Situar el cursor en el lugar del formulario donde vamos a crear el juego de campos.
2. 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 - 67 -
3. 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:
1. Colocar el punto de inserción en el lugar deseado del formulario
2. Hacer clic en el icono Campo oculto
de la barra Insertar>Formularios, veremos un
marcador en el lugar seleccionado.
3. 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:
1. Situar el cursor en el lugar del formulario en donde deseemos ubicar el menú de salto.
2. Hacer clic en el icono Menú de salto
de la barra Insertar>Formularios.
3. 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 - 68 -
-
En el recuadro Elementos de menú irán apareciendo las diferentes
opciones que vayamos programando. Para añadir o eliminar entradas
utilizar los botones
botones
y para cambiar el orden de lista utilizar los
.
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 - 69 -
•
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.
2.
3.
4.
Seleccionar el formulario
En la casilla Acción de panel Propiedades escribir mailto:direccióndecorreo
En la casilla Método seleccionar POST
En la casilla Tipo de codificación escribir text/plain para forzar texto normal
como método de codificación
PRÁCTICA CON FORMULARIOS
DATOS PERSONALES
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.
Página - 70 -
DATOS ACADÉMICOS
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.
ÁREAS DE INTERÉS
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.
OBJETOS DE IDIOMAS
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.
SUCURSALES
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
Página - 71 -
COMENTARIOS
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.
BOTONES DE CONTROL
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.
ESTILOS
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.
PROBAR EL FORMULARIO
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ónapplication/x-www-form-url
Página - 72 -
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
seleccionar la opción Borrar historial.
y
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 - 73 -
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 - 74 -
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
•
•
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
página
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 - 75 -
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:
1. En la vista Diseño, hacer clic en la página para colocar el punto de inserción donde
deseemos insertar código.
2. 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.
3. 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:
1. Seleccionar un objeto en la vista Diseño o seleccionar una etiqueta en el Selector de
etiquetas.
2. Pulsar la tecla CONTROL + T para abrir el Quick Tag editor en modo Editar etiqueta.
3. 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.
4. Para cerrar el editor y aplicar todos los cambio, pulsar INTRO. Para salir sin hacer ningún
cambio, pulsar ESC.
Página - 76 -
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 - 77 -
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
plantilla
del panel Activos y luego clic en el icono Nueva
.
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 - 78 -
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
su vista previa y la posibilidad de modificarla.
se puede ver la plantilla que se ha creado,
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 - 79 -
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:
A.
INSERTAR UNA REGIÓN EDITABLE VACÍA
B.
CREAR UNA REGIÓN EDITABLE A PARTIR DEL CONTENIDO DE UNA PLANTILLA
EXISTENTE
A.
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.
B.
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 - 80 -
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 - 81 -
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 - 82 -
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
figura):
y seleccionar Flash (ver
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 - 83 -
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
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 - 84 -
INSERTAR BOTONES FLASH
1. Situar el cursor en el lugar donde queremos que aparezca el botón.
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 - 85 -
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
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 - 86 -
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
3. Elegir de la ventana el archivo deseado.
y seleccionar
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 - 87 -
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
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 - 88 -
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 - 89 -
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 - 90 -
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
entre un menú horizontal o vertical y Aceptar.
y en la ventana emergente, elegir
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
4.3.
podemos ordenar las opciones.
Para cambiar el texto de las opciones , hay que
seleccionarlas en el panel e introducir el texto en la
casilla Texto.
Página - 91 -
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
de Ayuda que se muestra encontraremos información.
, en la ventana
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 - 92 -
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 - 93 -
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
3.2
En la casilla Tipo: indicar el tipo de valor a introducir. Si no hay ninguno que nos
sirva, seleccionar la opción Personalizado.
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
3.4
En la casilla Sugerencia; escribir un texto de ayuda para que el usuario sepa
exactamente qué debe escribir.
En las casillas Valor mín. y Valor máx . establecer un rango de valores al cual
deberá pertenecer el valor introducido
Página - 94 -
En la casilla Car máx. y Car mín. podemos indicar cuántos caracteres mínimos y
máximos admitirá el campo texto
Si activamos la opción Obligatorio forzamos que el campo de texto no pueda
dejarse en blanco.
3.5
3.6
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
3.2
3.3
3.4
3.5
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.
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.
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.
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.
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 - 95 -
Á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
4.2
4.3
4.4
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.
Se puede activar las casillas Obligatorio y Sugerencia para, obligar al rellenado del
campo y sugerir un texto que incite a cumplimentarlo.
Para evitar que el usuario pueda escribir más caracteres de los permitidos, se
puede activar la opción Bloquear caracteres extra.
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.
Página - 96 -

Unidad 3 ESTILOS CSS

Transcripción

Documentos relacionados

Ingresar www.dian.gov.co botón asignación de citas 3 Clic