Transcription
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizTEMA 3: DISEÑO Y EDICIÓN DE PÁGINAS WEB CONDREAMWEAVER1. Introducción. Lenguajes y protocolosDreamweaver es un software de edición que permite crear páginas web. Es el programamá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, comopueden 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 HTMLHTML (Lenguaje de Marcado de Hipertexto) es el lenguaje que se utiliza para crear las páginas web. Estelenguaje indica a los navegadores cómo deben mostrar el contenido de una página web. Nos permiteenlazar 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 HTTPHTTP (Protocolo de Transferencia de Hipertexto) es el conjunto de reglas a seguir para publicar páginasweb 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 ladirección que estamos visitando. Generalmente estas direcciones comienzan con www, que quiere decir"World Wide Web", pero existen muchas otras extensiones posibles.Servidor FTPFTP (Protocolo de Transferencia de Archivos). Es un sistema que permite enviar y recibir ficheros entreordenadores 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 entu 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 InternetPara poder poner una página web en Internet, es necesario contratar a alguna empresa con servidoresque pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer deespacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia yotras opciones que podamos contratar.Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio dedisco, lentitud y nombre de nuestra página precedido por el de la suya, además de incorporar publicidaden nuestra página.Cuando hayas terminado de diseñar tu página web sólo tendrás que subirla a tu servidor manteniendo laestructura 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, tusitio experimentará fallos y enlaces que no funcionarán.No debes utilizar caracteres especiales como acentos o eñes, ni espacios en blanco en los nombresde archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipode problemas los nombres de los archivos que alojes en él.1
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizPara evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, losnombres en minúscula.3. Crear una página web inicial y crear un sitio webUn sitio web es un conjunto de archivos y carpetas que están relacionadas entre sí. Un sitio web lleva unapágina principal llamada “index.html”.Lo primero será crear una carpeta o sitio web donde guardaremos las páginas web que crearemos, lasimá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 quetrabajaremos, y los cambios realizados los subiremos o actualizaremos en el sitio remoto.Ejercicio 1Antes 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 lasimágenes de nuestro sitio webAl arrancar Dreamweaverpantalla inicial como ésta.apareceunaPodemos elegir la opción de: Crear un documento nuevo Configurar o crear un sitio web.Si tenemos los datos del servidorpodemos crear el sitio y configurar losparámetros del sitio local y del sitioremoto. También podemos elegir la opción decrear plantillas de diseño fluido. Estetipo de diseño hace que la página seadapteautomáticamentealasdimensiones 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 adaptea su tamaño. Usando está técnica puedes eliminar la necesidad de crear diseños especialespor 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 sitioremoto 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ú VentanaLa barra de menús: va agrupada por categorías. Permite ejecutar todos los comandos deDreamweaver. Está formada por 10 pestañas:2
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizBarra de menúsBarra de ventanaInsertarBarra de herramientasdocumentosVentanadeestilos CSS ydivsBarra de herramientasestándarVentanadepropiedadesde estilosBarra de códigoÁrea a deestadoLa 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 lasdistintas páginas, cambiar de vista diseño o código o ambas, y permite ver la página en elexplorador, 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 habitualescomo: nuevo archivo, Abrir, Guardar, Guardar todo, Cortar, Copiar, Pegar, Deshacer y Rehacer.La ventana de propiedades: es una ventana flotante. La apariencia y opciones cambiandependiendo del objeto o texto seleccionado, permitiéndonos editarlas. Por ejemplo, cuando elelemento 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 yseleccionar 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 osu 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 AlmudenaMª Jesús SaizLa ventana de estilos y elementos PA (capas o divs): permite ver los estilos creados y las divsutilizadas.El área de trabajo: es la zona donde editamos nuestra página web.5. Diseño de páginas webPodemos diseñar nuestra página web utilizando tablas, marcos (frames) o capas divs.Actualmente sólo se recomienda el uso de capas divsMediante tablas:Se utilizan para estructurar la información,aunque sus bordes a veces no sean visibles.Las celdas de una tabla pueden incluir todotipo de elementos: texto, viñetas, imágenes,videos, animaciones flash, etc.Mediante capas:Las capas, también llamadas layers odivisiones, son unos recuadros, elementos debloque, destinados a contener y agrupar otroselementos.Pueden situarse en cualquier parte de la página(tienen una posición absoluta).También se puede crear una capa dentro deotra (capas anidadas)Posición de las capas-static: cada capa se coloca debajo dela anterior. Se pueden posicionar unasal 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 ala 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 laventana 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 dedesplazamiento 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ísDiseñ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 AlmudenaMª Jesús Saiz6. Propiedades de la página web: Fondo y formatosEs conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, esdecir, que tengan el mismo color de fondo, de fuente, etc.Para definir el formato de cada una de laspáginasiremosalmenú Modificar, Propiedades de lapágina.Las propiedades están organizadascategorías.enAspectoFuente 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 colorsolo 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 entredonde empieza el contenido de la página y la ventana del navegador. Si queremos queocupe toda la ventana deberemos indicar top y left 0 pxVínculos:Por defecto los navegadoresmuestran los enlaces novisitados de color azul ysubrayados y los enlacesvisitados de color morado.Pero podemos modificar eseaspecto.Vínculos: es el color quemostrará el texto de losvínculos.a: linkVínculos visitados: es elcolor que mostrará eltexto de los vínculos yavisitados.a: visitedVínculos de sustitución: es el color que mostrará el vínculo cuando el cursor del ratón secoloca sobre el vinculoa: hoverVínculos activos: es el color que mostrará el vínculo desde que el usuario pincha el botóndel ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.a: activeEstilo 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 AlmudenaMª Jesús SaizTítulo/codificación:Título: es el título del documento, que aparecerá en la barra de título del navegador y de laventana de documento de Dreamweaver.Cuando incluyas una imagen de fondo debes tener en cuenta el tamaño en pixeles de tu imagen y si vasa repetirla o no. Para ello debemos conocer cuáles son las resoluciones de pantalla más utilizadas (800 x600 para monitores de 14” a 17” y 1024x768 para monitores mayores de 17” 10241023-768768-480 480Estos tamaños son los tamaños según la resolución pero de la pantalla completa, un sitio web debeconsiderar el espacio de las barras de navegación, el scroll lateral, la barra de inicio del pc. con lo cual eltamaño efectivo es menor. Ya lo que se quiere es que tu sitio se vea bien en todos los navegadores yordenadores, 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áximode 1000 pxEjercicio 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 InsertarElige 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 de1200 – 1500 px o imágenes más pequeñas que puedan repetirse.- Título de la página.7. Creación de capasInsertar una capa:Podemos insertar una capa de diferentes maneras:Menú Insertar, Objetos de diseño, Div PABarra de ventana Insertar, botón Diseño, Dibujar Div PA6
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizEjercicio 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ónSeleccionar y mover una capa:Las capas pueden moverse de un lugar a otro de la ventana,pulsando sobre el recuadro. También puede cambiarse detamaño pinchando sobre los recuadros oscuros pequeños yarrastrando hasta conseguir el tamaño deseado.Las capas pueden seleccionarse mediante:Pulsando sobre la capaSeleccionando en la barra de estadoMediante el panel Capas, que puede abrirse através del menú Ventana, Elementos PAPropiedades de capa:Se definen en su Ventana de propiedades o en el panel de Capas (Elementos PA), seleccionandola capa.Elemento CSS-P (ID): es el nombre de la capaIzq y Sup: indica la distancia en píxeles que hay entre los límites izquierdo y superior deldocumento y la capa (px).También podemos cambiar la unidad, escribiendo: %, cm o mmAn 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 secolocan 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 lacapa.Desb. (Desbordamiento): puede que el contenido no quepa dentro de la capa. Con estapropiedad controlamos cómo aparecen las capas en un navegador cuando el contenidoexcede 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 dedesplazamiento a la capa tanto si se necesitan como si no.- Auto (automático) hace que el navegador muestre barras de desplazamiento para lacapa cuando sean necesarias (es decir, cuando el contenido de la capa supere suslímites).7
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizTambié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 propiedadesCentrar capas:Cambiaremos las categorías de cuadro y posición, asignando unos márgenes izquierdo yderecho automáticos (cuadro), además de indicar que su posición sea relativaEjercicio 5:-Da medidas de ancho y alto a la capa contenedor (1000x750px)Puedes ponerla color o imagen de fondoCentra la capa contenedor mediante las propiedades de cuadro (margen izdo y dcho auto) yposición (relativa)- Crea dentro de la capa contenedor las capas que necesites: título, logo, nombre, texto, etc.Pon sus medidasAlinear capas:Primero debemos seleccionar todas las capas que queramos (seleccionar y pulsar teclasMayusculas)8
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaPodemos alinear capasOrganizar, AlinearmedianteMª Jesús SaizlaopciónModificar,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 CSSCon 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 paratodas las páginasCrear 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 “ ypinchamos en Editar regla,desde el inspector depropiedades, opción CSS.Elegimos la opción de aplicar sólo a este documentoEste método se emplea para incrustar el códigodirectamente en la página. Los estilos son declarados en la cabecera ( head . /head ), entre lasetiquetas style type "text/css" y /style .Cuando vamos a utilizar el mismo estilo en diferentespáginas no tiene sentido incrustar el mismo estilo en cadapágina. Podemos exportar los estilos a una hoja deestilos (un archivo de extensión .css). Esta opciónpermite centralizar el estilo en un sólo archivo queaplicaremos a todas las páginas.Regla de destino: “nueva regla CSS”. Editar reglaElegimos la opción de aplicar Nuevo archivo de hoja deestilos, o elegimos una hoja de estilos ya creadaDW añade la etiqueta link / dentro del head de lapágina: link rel "stylesheet" type "text/css" href "mis estilos.css" / Y ya podemos seleccionar el estilo de nuestro párrafo9
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizSi acabamos de comenzar con nuestro sitio, podemos crear nuestra hoja directamente. En este casodeberemos crear un archivo CSS (Archivo Nuevo y seleccionando CSS). En él escribiremos lasreglas de estilo del con la sintaxis correcta.Este código está guardado en un archivo con extensión .css (por ejemplo, miestilo.css). Luegodeberíamos vincularlo en la página HTML utilizando la etiqueta link / dentro del head de lapágina: link rel "stylesheet" type "text/css" href "mis estilos.css" / Ejercicio 6:-Crea una hoja de estilos: Archivo / Nuevo/ CSS / CrearPon nombre a tu hoja de estilosCoge de la cabecera del index los estilos # creados para tus capas y córtalos y pégalos en tuhoja de estilos.Incrusta en la cabecera la etiqueta link rel "stylesheet" type "text/css" href "mis estilos.css"/ 9. Insertar textoSe puede escribir texto directamente en la página web,copiando y pegando texto de otro documento o arrastrandotexto de otra aplicación.Cuando pegamos texto, podemos elegir la opción Pegar oPegado especialDespués podemos modificarlo, cambiando sus propiedadesen la Ventana de propiedades.Las fuentes que podemos elegir vienen agrupadas en grupos. El seleccionar un grupo de fuentesposibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Porejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero siesta 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 AlmudenaMª Jesús SaizPárrafos:Al presionar la tecla enter, Dw creaotro párrafo., con interlineadodobleSi queremos salto de línea (dentrodel mismo párrafo), debemosutilizar el menú Insertar/ Texto/Caracteres especiales/ Salto delínea (interlineado sencillo)En la ventana Insertar/ Textopodemoselegirdiferentesopciones, entre ellas las de insertaralgunos caracteres especialesEjercicio 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áscaracterísticasEjemplo: 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 necesites10. Insertar línea horizontalSe utilizan para separar visualmente texto, objetos, etc.Para insertarlas, podemos utilizar la opción: ventana Insertar, botón Común, Regla horizontal. Ydespué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 AlmudenaMª Jesús Saiz11. Insertar imágenesPara insertar una imagen, podemos utilizar diferentes opciones:menú Insertar, a la opción Imagen.Arrastrarla directamente desde el panel Archivos sobredocumento.Barra de ventana Insertar, botón ComúnelPodemos elegir un texto y una descripción larga, para que se vea al pasar porella. El texto aparece en la ventana de propiedades en el valor ALT.12. Crear mapas de imágenesPodemos hacer que cada zona de la imagen tenga un vínculo distinto, creando un Mapa de imagen.13. Insertar vínculosUn hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una páginao 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 elobjeto que va a servir de enlace, y seguidamente establecer el Vínculo (dirección web obuscar 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 delnavegador.Parent: Abre el documento vinculado en la ventana del marco que contiene elvínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos oframes.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. Tienesentido si se emplean frames.Lo habitual es abrir los enlaces a páginas del sitio en la misma ventana, y los enlacesexternos en ventanas nuevas.Otra forma de crear un enlace es a través de la Ventana Insertar/ Común12
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizOtra forma de crear un enlace es a través delmenú Insertar, opción Hipervínculo.Cuando creamos un vínculo el formato por defecto es color azul y subrayado. Para evitar esto podemoscrear 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 necesariosQuita el color azul y subrayado de los vínculosAñ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 tablasPara 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, TablaO ir a Barra de ventana Insertar, botón Diseño, Tabla13
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizEn la nueva ventana habrá que especificar el número de Filas yColumnas que tendrá la tabla, así como el Ancho de la tabla,grosor del borde, relleno y espaciado de tablaSeleccionar y modificar una tabla:Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estandoel punto de inserción en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botónderecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir laopción Seleccionar tabla. Y podemos elegir también las diferentes opciones de modificar y variar lasceldas de la tabla.O también podemos seleccionar mediante el selector de etiquetasfila celdaPropiedades de tabla:Se definen en su Ventana de propiedadesSe pueden modificar los valores que se especificaron al insertar la tabla. Al mismo tiempo, puedenindicarse otros como pueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centroo a la derecha de la pantalla), el grosor del borde de la (en Col. borde), los valores de relleno yespaciado 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 quese 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 imagende 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 Noaj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc.También podemos combinaro 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 AlmudenaMª Jesús SaizEjercicio 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 comportamientosDeberemos abrir la Ventana Comportamientos del panel derecho.Después seleccionamos el objeto que activa el comportamiento, como puede ser una imagen, unfragmento de texto, etc.Al desplegar el botóndel panel Comportamientos aparece la listade todas las acciones posibles.Cada comportamiento tiene asociados un evento y una acción. Lasacciones son las que se han elegido en la lista y el evento indica cuándose debe de realizar la acción.Mostrar u ocultar un elemento:Lo más común es emplearlo con capas, que han de haber sidocreadas antes. Lo que hace este comportamiento es alternar entrelas propiedades de visibilidad visible y hidden.Para conseguir que una capa se muestre al pulsar en otra, debemos primero ocultar la capa queno debe aparecer en un principio (hidden)Después se selecciona el elemento que producirá el evento , luego hay que seleccionar una acciónde la lista, pulsando sobre el botónOcultar elementos. En este caso la acción tiene que ser la de MostrarTras elegir la acción, semostrará un cuadro de diálogoen el que aparecen listadostodos los elementos de lapágina que podemos ocultar omostrar:Señalamos qué elementos hande mostrarse u ocultarse para el evento.15
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizDespués señalamos en la barra lateral de eventos comoqueremos que ocurra.--OnBlur El evento se genera cuando el elementoespecificado deja de ser el foco de interacción delusuario.OnClick se genera cuando el usuario hace clicen el elemento especificadoOnDblClick se genera cuando el usuario hacedoble clic en el elemento especificadoOnFocus se genera cuando el elementoespecificado se convierte en el foco de interaccióndel usuarioOnkeyDown se genera en el momento en que el usuario pulsa cualquier teclaOnkeyPress 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ónonMouseMove se genera cuando el usuario mueve el ratón mientras señala al elementoespecificado.onMouseOut se genera cuando el cursor abandona el elemento especificadoonMouseOver se genera cuando el usuario pasa el ratón esté sobre el elementoonMouseUp 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 seleccionarla imagen que producirá el evento , luego hay que seleccionar la acción de la lista, pulsando sobreel botón. En este caso la accióntiene que ser la de Intercambiarimagen.Dreamweaver nos mostrara uncuadro de diálogo en el que nospedirá que definamos el origen, estosimplemente quiere preguntarnos¿por cual imagen quiera que seasustituida la imagen seleccionada?En la zona inferior de la ventanahay una opción marcada.“carga previa de imágenes”: se encarga de que cuando el usuario visualiza la páginapor primera vez, su ordenador descargue todas las imágenes relacionadas, incluida la deintercambio ¿con qué objetivo? Pues para que cuando el usuario pase el puntero del ratónsobre la imagen, el intercambio sea instantáneo pues ya ha cargado previamente laimagen.Si queremos restaurar la imagen original cuando el puntero del ratón deje de estar sobrela imagen, debemos elegir el comportamiento “restaurar imagen intercambiada”, y elevento “onmouseout”.16
TICO 2ºBachillerato. Departamento de Tecnología. IES Nuestra Señora de la AlmudenaMª Jesús SaizEjercicio 11:-Inserta algún comportamiento, como alguna imagen que aparece o desaparece o imágenes quese intercambian.16. Insertar videosEn 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 tablaNavegadorInternet Explorer 9 Chrome 6 Firefox 3.6 Safari 5 mp4sisinosiwebmnosisinoogvnosisinoPara insertar un archivo de vídeo en una página se puede hacer de dos formas, con la etiqueta video o
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.
