tema 3: diseÑo y ediciÓn de pÁginas web con … · más utilizado en el sector del diseño y la...

TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la Almudena Mª Jesús Saiz

1

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.


2

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.

Al arrancar Dreamweaver aparece una pantalla inicial como ésta.

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:

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


3

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.

Barra de menús

Barra de ventana Insertar

Barra de herramientas documentos

Barra de herramientas estándar

Ventana de propiedades

Ventana de archivos

Barra de estado

Área de trabajo

Ventana de estilos CSS y divs

Ventana de propiedades de estilos Barra de código


4

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, …


5

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 en categorías.

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.


6

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”

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

≥ 1024 1023-768 768-480 <480


7

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).


8

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)


9

Podemos alinear capas mediante la opción Modificar, Organizar, Alinear

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


10

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”


11

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.


12

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 el

documento. Barra de ventana Insertar, botón Común

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


13

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


14

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

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.

fila celda


15

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 . En este caso la acción tiene que ser la de Mostrar-Ocultar elementos.

Tras 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.


16

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”.

.


17

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 mp4 webm ogv

Internet Explorer 9+ si no no

Chrome 6+ si si si

Firefox 3.6+ no si si

Safari 5+ si no 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".

https://developer.mozilla.org/es/docs/Web/HTML/Elemento/source


18

- 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

http://miarroba.es/

http://www.iespana.es/

http://www.metropli2000.net/

http://www.freeservers.com/

http://www.geocities.com/

http://www.galeon.com/

http://miarroba.es/


19

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

tema 3: diseÑo y ediciÓn de pÁginas web con … · más utilizado en el sector del diseño y la...

Documents