Download Páginas Web. Dreamweaver

TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
TEMA 3: DISEÑO Y EDICIÓN DE PÁGINAS WEB CON
DREAMWEAVER
1. Introducción. Lenguajes y protocolos
Dreamweaver es un software de edición que permite crear páginas web. Es el programa
más utilizado en el sector del diseño y la programación web.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como
pueden ser Microsoft Expresion Web, Amaya, Bluefish, , KompoZer o Quanta Plus.
Algunos de los cuales tienen la ventaja de ser gratuitos.
Los documentos creados por un editor de páginas web llevan la extensión html o htm.
Lenguaje HTML
HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje que se utiliza para crear las páginas web. Este
lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. Nos permite
enlazar y navegar por Internet.
El lenguaje html contiene dos partes:
el contenido, que es el texto que se verá en la pantalla de un ordenador,
y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos,
listas, enlaces, etc. y normalmente no se muestra en pantalla.
Protocolo HTTP
HTTP (Protocolo de Transferencia de Hipertexto) es el conjunto de reglas a seguir para publicar páginas
web o HTML.
Al visitar una página web, la información que sigue a "http" se denomina el URL, que no es más que la
dirección que estamos visitando. Generalmente estas direcciones comienzan con www, que quiere decir
"World Wide Web", pero existen muchas otras extensiones posibles.
Servidor FTP
FTP (Protocolo de Transferencia de Archivos). Es un sistema que permite enviar y recibir ficheros entre
ordenadores a través de la red Internet.
Con el fin de facilitar la creación de una web, los servidores comerciales disponen de un sistema de FTP,
mediante el que puedes enviar rápidamente y de una sola vez todos los ficheros que desees publicar en
tu página u otros ficheros: imágenes, archivos de audio, etc.
Para usar el FTP de un servidor necesitas un programa de FTP (FileZilla, FireFTP, GoFTP, etc.).
2. Cómo tener una página web en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores
que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de
espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y
otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de
disco, lentitud y nombre de nuestra página precedido por el de la suya, además de incorporar publicidad
en nuestra página.
Cuando hayas terminado de diseñar tu página web sólo tendrás que subirla a tu servidor manteniendo la
estructura creada. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro,
respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu
sitio experimentará fallos y enlaces que no funcionarán.
No debes utilizar caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres
de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo
de problemas los nombres de los archivos que alojes en él.
1
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los
nombres en minúscula.
3. Crear una página web inicial y crear un sitio web
Un sitio web es un conjunto de archivos y carpetas que están relacionadas entre sí. Un sitio web lleva una
página principal llamada “index.html”.
Lo primero será crear una carpeta o sitio web donde guardaremos las páginas web que crearemos, las
imágenes y los archivos necesarios. A este sitio le llamamos sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto,
El sitio local y el sitio remoto tienen la misma estructura. El sitio local es la carpeta del sitio con la que
trabajaremos, y los cambios realizados los subiremos o actualizaremos en el sitio remoto.
Ejercicio 1
Antes de empezar, crea una carpeta (sitio web local) con el nombre “web__turismo”.
Dentro de esta carpeta crea una subcarpeta: “images”. La utilizaremos para guardar las
imágenes de nuestro sitio web
Al arrancar Dreamweaver
pantalla inicial como ésta.
aparece
una
Podemos elegir la opción de:
 Crear un documento nuevo
 Configurar o crear un sitio web.
Si tenemos los datos del servidor
podemos crear el sitio y configurar los
parámetros del sitio local y del sitio
remoto.
 También podemos elegir la opción de
crear plantillas de diseño fluido. Este
tipo de diseño hace que la página se
adapte
automáticamente
a
las
dimensiones del dispositivo (móvil, tablet o monitor).
Este diseño crea páginas que no tienen un ancho fijo, y permite que cada navegador lo adapte
a su tamaño. Usando está técnica puedes eliminar la necesidad de crear diseños especiales
por cada dispositivo. Pero puede dar problemas de visualización de imágenes, tablas,
capas,…
Nosotros elegiremos la opción “Crear nuevo: HTML”. Y posteriormente configuraremos el sitio
remoto mediante dreamweaver o mediante un programa FTP.
Guarda la página con el nombre “index”, dentro de la carpeta “web_ turismo”.
4. Pantalla de Dreamweaver:
Las diferentes barras de herramientas podemos hacerlas visibles o no, desde la opción de menú Ver,
Barras de herramientas. Y también podemos personalizar las ventanas visibles desde el menú Ventana
La barra de menús: va agrupada por categorías. Permite ejecutar todos los comandos de
Dreamweaver. Está formada por 10 pestañas:
2
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Barra de menús
Barra de ventana
Insertar
Barra de herramientas
documentos
Ventana
de
estilos CSS y
divs
Barra de herramientas
estándar
Ventana
de
propiedades
de estilos
Barra de código
Área de
trabajo
Ventana
de
propiedades
Ventana
archivos
de
Barra de
estado
La barra de Ventana Insertar: nos permite insertar tablas, capas, imágenes, enlaces, botones, etc.
La barra de herramientas documento: contiene iconos que nos permiten cambiar entre las
distintas páginas, cambiar de vista diseño o código o ambas, y permite ver la página en el
explorador, o realizar las distintas opciones de validación que nos ofrece el programa.
La barra de herramientas estándar: contiene iconos para realizar las acciones más habituales
como: nuevo archivo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer.
La ventana de propiedades: es una ventana flotante. La apariencia y opciones cambian
dependiendo del objeto o texto seleccionado, permitiéndonos editarlas. Por ejemplo, cuando el
elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...
La barra de estado: A la izquierda aparece el selector de etiquetas que sirve para ver y
seleccionar etiquetas completas. A la derecha encontramos las herramientas de Selección, Mano
(para desplazarse) y Zoom, y otros datos como el tamaño de la ventana, el tamaño de la página o
su codificación.
La ventana de archivos: nos permite ver las carpetas y páginas creadas en nuestro sitio web.
3
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
La ventana de estilos y elementos PA (capas o divs): permite ver los estilos creados y las divs
utilizadas.
El área de trabajo: es la zona donde editamos nuestra página web.
5. Diseño de páginas web
Podemos diseñar nuestra página web utilizando tablas, marcos (frames) o capas divs.
Actualmente sólo se recomienda el uso de capas divs
Mediante tablas:
Se utilizan para estructurar la información,
aunque sus bordes a veces no sean visibles.
Las celdas de una tabla pueden incluir todo
tipo de elementos: texto, viñetas, imágenes,
videos, animaciones flash, etc.
Mediante capas:
Las capas, también llamadas layers o
divisiones, son unos recuadros, elementos de
bloque, destinados a contener y agrupar otros
elementos.
Pueden situarse en cualquier parte de la página
(tienen una posición absoluta).
También se puede crear una capa dentro de
otra (capas anidadas)
Posición de las capas
-
static: cada capa se coloca debajo de
la anterior. Se pueden posicionar unas
al lado de otras con el atributo "float: left o right”
relative: La capa tiene una posición respecto a la capa donde está incluida y respecto a
la posición que ocuparía si no le colocáramos el atributo relative.
absolute: Los puntos de referencia para posicionarse son en función del borde de la
ventana del navegador y no de la capa en la que está
fixed: (fija) Se comporta igual que con el valor absolute pero aquí al mover las barras de
desplazamiento de la ventana, (siempre que la página ocupe más espacio que la ventana),
la caja se queda inmóvil, por lo que no se moverá con el resto de la ventana..
-
Ejercicio 2:
-
Vamos a crear una página web dedicada al turismo y promoción de tu país
Diseña en un papel la forma que quieres dar a tu página web
-
Puedes utilizar el siguiente guion:
 Datos del país (capital, superficie, población, moneda, idioma, etc.)
 Mapas
 Historia
 Ciudades más importantes
 Lugares interesantes
 Música
 Gastronomía, …
4
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
6. Propiedades de la página web: Fondo y formatos
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es
decir, que tengan el mismo color de fondo, de fuente, etc.
Para definir el formato de cada una de las
páginas
iremos
al
menú Modificar, Propiedades de la
página.
Las propiedades están organizadas
categorías.
en
Aspecto
Fuente de página: es el tipo de letra que le aplicaremos al texto.
Tamaño: es el tamaño de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color
solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre
donde empieza el contenido de la página y la ventana del navegador. Si queremos que
ocupe toda la ventana deberemos indicar top y left = 0 px
Vínculos:
Por defecto los navegadores
muestran los enlaces no
visitados de color azul y
subrayados y los enlaces
visitados de color morado.
Pero podemos modificar ese
aspecto.
Vínculos: es el color que
mostrará el texto de los
vínculos.
a: link
Vínculos visitados: es el
color que mostrará el
texto de los vínculos ya
visitados.
a: visited
Vínculos de sustitución: es el color que mostrará el vínculo cuando el cursor del ratón se
coloca sobre el vinculo
a: hover
Vínculos activos: es el color que mostrará el vínculo desde que el usuario pincha el botón
del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.
a: active
Estilo subrayado: podemos elegir que el vínculo aparezca o no aparezca subrayado.
5
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Título/codificación:
Título: es el título del documento, que aparecerá en la barra de título del navegador y de la
ventana de documento de Dreamweaver.
Cuando incluyas una imagen de fondo debes tener en cuenta el tamaño en pixeles de tu imagen y si vas
a repetirla o no. Para ello debemos conocer cuáles son las resoluciones de pantalla más utilizadas (800 x
600 para monitores de 14” a 17” y 1024x768 para monitores mayores de 17”
≥ 1024
1023-768
768-480
<480
Estos tamaños son los tamaños según la resolución pero de la pantalla completa, un sitio web debe
considerar el espacio de las barras de navegación, el scroll lateral, la barra de inicio del pc... con lo cual el
tamaño efectivo es menor. Ya lo que se quiere es que tu sitio se vea bien en todos los navegadores y
ordenadores, te recomiendo que no utilices medidas muy grandes.
Podemos elegir un tamaño de fondo de 1200 px de ancho y después utilizar capas de un ancho máximo
de 1000 px
Ejercicio 3:
-
Abre el documento nuevo index HTML en DW, coloca la vista del documento en dividir
(código/diseño)
Incluye en tu pantalla la barra de herramientas estándar y la Ventana Insertar
Elige y define las siguientes propiedades de la página:
- color o imagen de fondo (con o sin repetición): utiliza imágenes de fondo de ancho de
1200 – 1500 px o imágenes más pequeñas que puedan repetirse.
- Título de la página.
7. Creación de capas
Insertar una capa:
Podemos insertar una capa de diferentes maneras:
Menú Insertar, Objetos de diseño, Div PA
Barra de ventana Insertar, botón Diseño, Dibujar Div PA
6
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Ejercicio 4:
-
Crea una capa contenedor (cambia el nombre o identificador)
Para colocar las capas en la posición que queramos podemos ayudarnos de la cuadrícula (menú Ver,
Cuadrícula, Mostrar cuadrícula).
La cuadrícula podemos configurarla con líneas o puntos y definir su separación
Seleccionar y mover una capa:
Las capas pueden moverse de un lugar a otro de la ventana,
pulsando sobre el recuadro. También puede cambiarse de
tamaño pinchando sobre los recuadros oscuros pequeños y
arrastrando hasta conseguir el tamaño deseado.
Las capas pueden seleccionarse mediante:
Pulsando sobre la capa
Seleccionando en la barra de estado
Mediante el panel Capas, que puede abrirse a
través del menú Ventana, Elementos PA
Propiedades de capa:
Se definen en su Ventana de propiedades o en el panel de Capas (Elementos PA), seleccionando
la capa.
Elemento CSS-P (ID): es el nombre de la capa
Izq y Sup: indica la distancia en píxeles que hay entre los límites izquierdo y superior del
documento y la capa (px).
También podemos cambiar la unidad, escribiendo: %, cm o mm
An y Al: indican la anchura y la altura de la capa.
Índice Z: es el orden de superposición de las capas. Las capas de mayor número se
colocan por encima de las de menor número cuando se solapen.
Vis: indica la visibilidad inicial de la capa
- Default (visibilidad según el navegador),
- Inherit (se muestra la capa mientras la página a la que pertenece también se esté
mostrando),
- Visible (muestra la capa, aunque la página no se esté viendo) y
- Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel de Capas (Elementos PA),
pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
Im. fondo y Col. Fondo: se utilizan para indicar una imagen o un color de fondo para la
capa.
Desb. (Desbordamiento): puede que el contenido no quepa dentro de la capa. Con esta
propiedad controlamos cómo aparecen las capas en un navegador cuando el contenido
excede el tamaño especificado de la capa.
- Visible indica que el contenido adicional se muestra, excediendo los límites de la capa.
- Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
- Scroll (desplazamiento) especifica que el navegador deberá añadir barras de
desplazamiento a la capa tanto si se necesitan como si no.
- Auto (automático) hace que el navegador muestre barras de desplazamiento para la
capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus
límites).
7
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
También podemos editar estas propiedades desde la ventana estilos CSS.
Pinchando sobre el estilo (doble click) creado para la capa,
aparece una ventana completa de propiedades
Centrar capas:
Cambiaremos las categorías de cuadro y posición, asignando unos márgenes izquierdo y
derecho automáticos (cuadro), además de indicar que su posición sea relativa
Ejercicio 5:
-
Da medidas de ancho y alto a la capa contenedor (1000x750px)
Puedes ponerla color o imagen de fondo
Centra la capa contenedor mediante las propiedades de cuadro (margen izdo y dcho auto) y
posición (relativa)
- Crea dentro de la capa contenedor las capas que necesites: título, logo, nombre, texto, etc.
Pon sus medidas
Alinear capas:
Primero debemos seleccionar todas las capas que queramos (seleccionar y pulsar teclas
Mayusculas)
8
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Podemos alinear capas
Organizar, Alinear
mediante
Mª Jesús Saiz
la
opción
Modificar,
Homogeneizar capas:
Podemos igualar los tamaños de las capas asignándolas el mismo ancho y alto (Modificar,
Organizar, Asignar mismo ancho y alto)
Anidar capas:
Podemos crear o anidar una capa dentro de otra, si pulsamos la tecla Alt. cuando la creemos.
8. Estilos CSS
Con el archivo abierto podemos crear un estilo desde la ventana de Propiedades, en la opción CSS.
Podemos elegir entre crear un estilo para nuestra página o crear una hoja de estilos que se utilice para
todas las páginas
Crear el estilo únicamente para la página actual. Esto genera un código en la <head> de la página.
Opción Regla de destino: ”Nueva regla CSS “ y
pinchamos en Editar regla,
desde el inspector de
propiedades, opción CSS.
Elegimos la opción de aplicar sólo a este documento
Este método se emplea para incrustar el código
directamente en la página. Los estilos son declarados en la cabecera (<head>...</head>), entre las
etiquetas <style type="text/css"> y </style>.
Cuando vamos a utilizar el mismo estilo en diferentes
páginas no tiene sentido incrustar el mismo estilo en cada
página. Podemos exportar los estilos a una hoja de
estilos (un archivo de extensión .css). Esta opción
permite centralizar el estilo en un sólo archivo que
aplicaremos a todas las páginas.
Regla de destino: “nueva regla CSS”. Editar regla
Elegimos la opción de aplicar Nuevo archivo de hoja de
estilos, o elegimos una hoja de estilos ya creada
DW añade la etiqueta <link /> dentro del <head> de la
página:
<link rel= "stylesheet" type="text/css" href="mis_estilos.css" />
Y ya podemos seleccionar el estilo de nuestro párrafo
9
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Si acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este caso
deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS). En él escribiremos las
reglas de estilo del con la sintaxis correcta.
Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luego
deberíamos vincularlo en la página HTML utilizando la etiqueta <link /> dentro del <head> de la
página:
<link rel= "stylesheet" type="text/css" href="mis_estilos.css" />
Ejercicio 6:
-
Crea una hoja de estilos: Archivo / Nuevo/ CSS / Crear
Pon nombre a tu hoja de estilos
Coge de la cabecera del index los estilos # creados para tus capas y córtalos y pégalos en tu
hoja de estilos.
Incrusta en la cabecera la etiqueta
<link rel= "stylesheet" type="text/css" href="mis_estilos.css"/>
9. Insertar texto
Se puede escribir texto directamente en la página web,
copiando y pegando texto de otro documento o arrastrando
texto de otra aplicación.
Cuando pegamos texto, podemos elegir la opción Pegar o
Pegado especial
Después podemos modificarlo, cambiando sus propiedades
en la Ventana de propiedades.
Las fuentes que podemos elegir vienen agrupadas en grupos. El seleccionar un grupo de fuentes
posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por
ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si
esta no existe se verá en Helvetica.
Podemos elegir otra fuente mediante la opción “Editar lista de fuentes”
10
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Párrafos:
Al presionar la tecla enter, Dw crea
otro párrafo., con interlineado
doble
Si queremos salto de línea (dentro
del mismo párrafo), debemos
utilizar el menú Insertar/ Texto/
Caracteres especiales/ Salto de
línea (interlineado sencillo)
En la ventana Insertar/ Texto
podemos
elegir
diferentes
opciones, entre ellas las de insertar
algunos caracteres especiales
Ejercicio 7:
-
Colócate en la capa “título” y escribe el título de tu página (sin formato)
Pincha en la ventana de propiedades en Editar regla y elige el tipo de fuente y demás
características
Ejemplo: font-family: "Trebuchet MS,"
font-size: 70px;
font-weight: bold;
color: #333;
letter-spacing: 2em;
text-align: center;
vertical-align: middle
-
Elige también el tipo de Fuente y sus características para las capas “menú” y “texto”
Elige en cada caso la regla de destino que necesites
10. Insertar línea horizontal
Se utilizan para separar visualmente texto, objetos, etc.
Para insertarlas, podemos utilizar la opción: ventana Insertar, botón Común, Regla horizontal. Y
después podemos cambiar alguna de sus propiedades en la ventana de propiedades.
Si la vamos a utilizar en múltiples ocasiones podemos crearla mediante estilos.
11
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
11. Insertar imágenes
Para insertar una imagen, podemos utilizar diferentes opciones:
menú Insertar, a la opción Imagen.
Arrastrarla directamente desde el panel Archivos sobre
documento.
Barra de ventana Insertar, botón Común
el
Podemos elegir un texto y una descripción larga, para que se vea al pasar por
ella. El texto aparece en la ventana de propiedades en el valor ALT.
12. Crear mapas de imágenes
Podemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen.
13. Insertar vínculos
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página
o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Crear vínculos:
A través del inspector de propiedades. Para ello es necesario seleccionar el texto o el
objeto que va a servir de enlace, y seguidamente establecer el Vínculo (dirección web o
buscar el archivo)
Podemos elegir la forma en que abrira la nueva página web:
-
-
Blank: Abre el documento vinculado en una nueva ventana o pestaña del
navegador.
Parent: Abre el documento vinculado en la ventana del marco que contiene el
vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos o
frames.
Self: Es la opción predeterminada, y la que se produce si no indicamos otra cosa.
Abre el documento vinculado en la misma ventana que el vínculo.
Top: Abre el documento vinculado en la ventana completa del navegador. Tiene
sentido si se emplean frames.
Lo habitual es abrir los enlaces a páginas del sitio en la misma ventana, y los enlaces
externos en ventanas nuevas.
Otra forma de crear un enlace es a través de la Ventana Insertar/ Común
12
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Otra forma de crear un enlace es a través del
menú Insertar, opción Hipervínculo.
Cuando creamos un vínculo el formato por defecto es color azul y subrayado. Para evitar esto podemos
crear un estilo para la etiqueta <a> o una clase para un estilo que queramos
.amenu { font-family: "Trebuchet MS"; font-size: 20px; font-weight: bold; color: #CCCCCC;
text-align: right; text-decoration: none; }
Si queremos tener efectos al colocarnos sobre los enlaces deberemos indicarlo de la siguiente forma.
.amenu:hover { color: orange; text-decoration:underline;}
Ejercicio 8:
-
Crea las capas del menú de navegación.
Crea los vínculos necesarios
Quita el color azul y subrayado de los vínculos
Añade un efecto al colocar el ratón sobre el vínculo: cambio de color,
subrayado, letras en mayúsculas (text-transform: uppercase), ,…
14. Creación de tablas
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
O ir a Barra de ventana Insertar, botón Diseño, Tabla
O ir a Barra de ventana Insertar, botón Diseño, Tabla
13
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
En la nueva ventana habrá que especificar el número de Filas y
Columnas que tendrá la tabla, así como el Ancho de la tabla,
grosor del borde, relleno y espaciado de tabla
Seleccionar y modificar una tabla:
Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando
el punto de inserción en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón
derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la
opción Seleccionar tabla. Y podemos elegir también las diferentes opciones de modificar y variar las
celdas de la tabla.
O también podemos seleccionar mediante el selector de etiquetas
fila celda
Propiedades de tabla:
Se definen en su Ventana de propiedades
Se pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, pueden
indicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro
o a la derecha de la pantalla), el grosor del borde de la (en Col. borde), los valores de relleno y
espaciado de la celda, el color del borde, el color de la tabla o imagen de relleno de la tabla.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de propiedades cambia,
para permitir especificar otros valores.
La parte superior de la ventana de propiedades sirve para especificar las propiedades del texto que
se insertará dentro de la celda (o celdas) seleccionada,
La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen
de fondo, la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño
(An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No
aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..
También podemos combinar
o dividir celdas
.
Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.
14
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Ejercicio 9:
-
Inserta una tabla en alguna de tus páginas.
Ejercicio 10:
-
Completa y rellena todas las páginas de tu sitio web.
15. Insertar comportamientos
Deberemos abrir la Ventana Comportamientos del panel derecho.
Después seleccionamos el objeto que activa el comportamiento, como puede ser una imagen, un
fragmento de texto, etc.
Al desplegar el botón
del panel Comportamientos aparece la lista
de todas las acciones posibles.
Cada comportamiento tiene asociados un evento y una acción. Las
acciones son las que se han elegido en la lista y el evento indica cuándo
se debe de realizar la acción.
Mostrar u ocultar un elemento:
Lo más común es emplearlo con capas, que han de haber sido
creadas antes. Lo que hace este comportamiento es alternar entre
las propiedades de visibilidad visible y hidden.
Para conseguir que una capa se muestre al pulsar en otra, debemos primero ocultar la capa que
no debe aparecer en un principio (hidden)
Después se selecciona el elemento que producirá el evento , luego hay que seleccionar una acción
de la lista, pulsando sobre el botón
Ocultar elementos.
. En este caso la acción tiene que ser la de MostrarTras elegir la acción, se
mostrará un cuadro de diálogo
en el que aparecen listados
todos los elementos de la
página que podemos ocultar o
mostrar:
Señalamos qué elementos han
de mostrarse u ocultarse para el evento.
15
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Después señalamos en la barra lateral de eventos como
queremos que ocurra.
-
-
OnBlur El evento se genera cuando el elemento
especificado deja de ser el foco de interacción del
usuario.
OnClick se genera cuando el usuario hace clic
en el elemento especificado
OnDblClick se genera cuando el usuario hace
doble clic en el elemento especificado
OnFocus se genera cuando el elemento
especificado se convierte en el foco de interacción
del usuario
OnkeyDown se genera en el momento en que el usuario pulsa cualquier tecla
OnkeyPress se genera cuando el usuario pulsa y suelta cualquier tecla;
OnkeyUp se genera cuando el usuario suelta una tecla después de pulsarla.
onMouseDown se genera cuando el usuario pulsa el botón del ratón
onMouseMove se genera cuando el usuario mueve el ratón mientras señala al elemento
especificado.
onMouseOut se genera cuando el cursor abandona el elemento especificado
onMouseOver se genera cuando el usuario pasa el ratón esté sobre el elemento
onMouseUp se genera cuando se suelta un botón del ratón que se encuentra pulsado.
Intercambiar imagen:
Para conseguir que una imagen cambie al pulsar o pasar por otra, debemos primero seleccionar
la imagen que producirá el evento , luego hay que seleccionar la acción de la lista, pulsando sobre
el botón
. En este caso la acción
tiene que ser la de Intercambiar
imagen.
Dreamweaver nos mostrara un
cuadro de diálogo en el que nos
pedirá que definamos el origen, esto
simplemente quiere preguntarnos
¿por cual imagen quiera que sea
sustituida la imagen seleccionada?
En la zona inferior de la ventana
hay una opción marcada.
“carga previa de imágenes”: se encarga de que cuando el usuario visualiza la página
por primera vez, su ordenador descargue todas las imágenes relacionadas, incluida la de
intercambio ¿con qué objetivo? Pues para que cuando el usuario pase el puntero del ratón
sobre la imagen, el intercambio sea instantáneo pues ya ha cargado previamente la
imagen.
Si queremos restaurar la imagen original cuando el puntero del ratón deje de estar sobre
la imagen, debemos elegir el comportamiento “restaurar imagen intercambiada”, y el
evento “onmouseout”.
.
16
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
Ejercicio 11:
-
Inserta algún comportamiento, como alguna imagen que aparece o desaparece o imágenes que
se intercambian.
16. Insertar videos
En ocasiones puede interesar incluir algún vídeo que tenemos creado o descargado en nuestro sitio web,
pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco.
La compatibilidad de los tipos de vídeo con los navegadores más usados se muestra en la siguiente tabla
Navegador
Internet Explorer 9+
Chrome 6+
Firefox 3.6+
Safari 5+
mp4
si
si
no
si
webm
no
si
si
no
ogv
no
si
si
no
Para insertar un archivo de vídeo en una página se puede hacer de dos formas, con la etiqueta <video >
o mediante un plug-in.
Insertar video con etiqueta html5:
<video width="160" height="120" controls >
< source src="videos/africa.mp4" type="video/mp4" >
<source src="foo.ogg" type="video/ogg">
Tu navegador no implementa el elemento <code>video</code>
</video>
Se pueden especificar varios tipos de archivos usando el elemento <source> con el fin
de proporcionar vídeos en formatos diferentes para diferentes navegadores.
Esto reproduce el archivo mp4 en navegadores que admiten el formato mp4. Si el navegador no
admite mp4 el navegador usará el archivo ogv.
La etiqueta <vídeo> tiene varios atributos:
controls. Muestra los controles estándar para video (ply, pause, stop)
autoplay. Hace que el vídeo comience a reproducirse al cargarse la página.
loop. Para que se reproduzca una vez tras otra, sin parar.
preload. Para que se cargue al hacelo la página especificaremos preload="auto", para
que se cargue al pulsar play, preload="none".
Insertar video mediante plugin
Para insertar un archivo de vídeo en un documento, podemos utilizar diferentes opciones:
menú Insertar, opción Media, opción Plug-in.
Barra de ventana Insertar, botón Común
Hay que prestar especial atención al ancho y alto. Por defecto, si
Dreamweaver no puede obtener el tamaño del archivo lo fijará a 32 x 32,
insuficiente para ver un vídeo. Es mejor borrarlos, en el inspector de
propiedades, y así el vídeo se mostrará con su tamaño original.
Los vídeos se reproducen automáticamente al cargarse la página, y se
reproducen solamente una vez. Estos valores pueden cambiarse a través
botón Parámetros, añadiendo autostart="false" y loop="true".
17
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
- Por ejemplo, para que el archivo se
reproduzca
continuamente
hemos
añadido loop="true".
- Si no queremos que se reproduzca
automáticamente,
podemos
añadir
también autostart="false"
En Dreamweaver no se mostrarán los controles de video. Todos los archivos que son
insertados como plugin aparecen representados dentro de Dreamweaver por una imagen como la
de la izquierda.
Ejercicio 12:
-
Inserta un video, previamente descargado y guardado en la carpeta de tu sitio web.
17. Alojamiento web
Direcciones de espacio gratuito
-
Miarroba:
http://miarroba.es/
Iespana:
http://www.iespana.es
Metropilo 2000: http://www.metropli2000.net
Freeservers:
http://www.freeservers.com
Geocities:
http://www.geocities.com
Galeón:
http://www.galeon.com
Un alojamiento web gratuito y con buen servicio es el de la plataforma:
http://miarroba.es/
Permite publicar tu propia página web de la forma rápida y sencilla. Te da hasta 500MB con acceso FTP,
transferencia ilimitada, PHP5 y MySQL 5.x.
Registrarse en
18
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena
Mª Jesús Saiz
1. Hacer clic en Regístrate y rellena todos los datos
2. Entrar en la cuenta creada:
3. Iniciar el servicio que queremos configurar. En nuestro caso
el del espacio web
4. Creamos nuestro nuevo espacio web rellenando el
formulario, donde introduciremos la dirección URL
del mismo ([email protected])
Una vez creado mi espacio se puede administrar.
Subir nuestro sitio web mediante el software de Filezilla:
FileZilla es un program que permite subir archivos a un servidor
mediante el protocolo FTP. Es de código abierto y software libre.
El programa se puede poner en castellano mediante la opción: Edit / settings/ Interface settings/
lenguaje/ español
En la parte superior de la ventana del programa tienes cuatro cuadros de texto en los que
deberás colocar los siguientes datos:
– Servidor: es la IP de tu página web. Lleva la forma 5.57.226.202. También puedes usar la
URL (Ejemplo:www.profemjesus.webcindario.com/).
– Nombre de usuario: es el nombre de usuario asignado desde el servidor.
– Contraseña: es la contraseña asignada desde el servidor
– Puerto: coloca el número 21 o déjalo en blanco.
Coloca en el lado derecho del explorador de archivos la carpeta public_html y en el lado
izquierdo la carpeta que se encuentra en tu PC con los archivos de tu sitio web.
Selecciona los archivos y carpetas que deseas subir al servidor, y arrástralos a la carpeta del
lado derecho
19