Qu es Dreamweaver MX 2004 Dreamweaver MX 2004 es un software fcil de usar que permite crear pginas web profesionales.

Las funciones de edicin visual de Dreamweaver MX 2004 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Te puedes descargar gratuitamente la ltima versin de Dreamweaver desde la pgina de Macromedia, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

Editar pginas web Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina. Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedia Dreamweaver. Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los

cuales tienen la ventaja de ser gratuitos.

Cmo tener una pgina en Internet Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. 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 pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados. Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com

Unidad 2. El entorno de trabajo (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver MX 2004, la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Las barras La barra de ttulo

La barra de ttulo contiene el nombre del programa (Macromedia Dreamweaver MX 2004) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar. La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles.

La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir La barra de herramientas de documento , Guardar , etc.

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes. El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar. La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al men insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu .

Unidad 3. Configuracin de un sitio local (I)

Bsqueda

pub-1875034419

ISO-8859-1

IS

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo. Introduccin Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas que va a contener. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto,

lo que equivale a publicar el sitio, de modo que la gente podr verlo en Internet. La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad. Por supuesto, pueden existir varios sitios locales en un mismo ordenador. Tanto si se elige la opcin Nuevo, como si se elige la opcin Editar, se mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una Categora basta con seleccionarla de la lista haciendo clic en ella.

Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto. Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.

Unidad 4. El texto (I)

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto 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, Helvetia,Sansserif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetia. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro. Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del

men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto. La lista con vietas (desordenada) se selecciona a travs del botn numerada (ordenada) se selecciona a travs del botn . Ejemplo de lista con numerada (ordenada): 1. Preparar la mochila 1. Sacar los libros de ese da 2. Introducir los libros del da siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador , mientras que la lista

Ejemplo de lista con vietas (desordenada):

Perro Gato Aves Canario Loro Hamster

o o

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada.Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Unidad 5. Hiperenlaces (I)

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.

Introduccin Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo a un texto, a una imagen, o a parte de una imagen.

Tipos de enlaces Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Referencia absoluta: Conduce a una ubicacin externa al sitio en el que se encuentra el documento. La ubicacin es en Internet, por ejemplo, "http://www.aulaclic.com". Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. Referencia relativa al documento: Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual. Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser "nombre_de_documento#nombre_de_punto". El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre.

Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo. Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla '#'.

Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de

destino, ya que se volvern a ver en el tema de Marcos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace.

Bsqueda
pub-1875034419 1 ISO-8859-1

Unidad 6. Imgenes (I)

w w w .aulaclic.es

Web

www.aulaclic.es

ISO-8859-1

En este tema vamos a ver cmo insertar imgenes en un documento. Tambin veremos cmo crear algunas imgenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras pginas.

Introduccin Todas las pginas web acostumbran a tener un cierto nmero de imgenes, que permiten mejorar su apariencia, o dotarla de una mayor informacin visual. Existen una serie de formatos de imagen ms recomendables que otros para ser introducidos en una pgina web. Esta informacin puedes consultarla aqu .

Insertar una imagen Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen. Despus de esto, ya es posible seleccionar una imagen a travs de la nueva ventana.

Si por algn motivo se desea insertar un BMP, este no aparecer a no ser que en Tipo se seleccione Todos los archivos. En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta raz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicacin diferente, la imagen puede no verse al estar siendo buscada en la ubicacin anterior. Lo mismo ocurre cuando se selecciona un documento para crear un vnculo. La ruta en la que se encuentra la imagen aparecer representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raz del sitio o relativa al documento. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes. En el caso de insertar la imagen como relativa al Documento la ruta sera: imagenes/aulaclic.jpg

Mientras que en el caso de ser insertada como relativa a la Raz del sitio la ruta sera: /imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervnculo a un documento relativo al documento o a la carpeta raz del sitio. Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque s en el navegador. En Dreamweaver aparecer de la siguiente forma: Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que haba sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecer en el navegador ser similar a esta: Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades.

Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen. Cambiar el tamao de una imagen Dentro de Dreamweaver puede modificarse el tamao de las imgenes. Dicho cambio de tamao no se aplica directamente sobre el archivo de imagen, sino que lo que vara es la visualizacin de la imagen dentro de la pgina. Es muy probable que la imagen resultante no sea de buena calidad, en comparacin de cmo podra quedar modificndola desde un editor externo, como Fireworks. Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamao de varias formas diferentes:

Imagen original

Imagen con tamao modificado

Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar til modificar el tamao de algunas imgenes aunque esto implique perder calidad. Existen dos formas de modificar el tamao. Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen. La otra es a travs de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecern en el inspector cuando este seleccionada alguna imagen. Hay que tener en cuenta que para cambiar la alineacin de la imagen hay que hacerlo a travs del campo Alinear del inspector de propiedades. La alineacin de las imgenes ofrece ms posibilidades que la del texto: superior, medio, medio absoluta, lnea de base, etc. Pueden crearse vnculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen. Esta informacin puedes consultarla aqu .

Unidad 8. Marcos (I)

Vamos a ver qu son los marcos y para qu se utilizan. Tambin veremos cmo insertar un marco sencillo en una pgina, y cmo trabajar con l.

Introduccin Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es a pgina que contiene los marcos agrupados. Es posible editar los documentos contenidos en los marcos desde la pgina que contiene el grupo de marcos. Esto facilita el trabajo, ya que es ms fcil hacerse una idea de cmo quedar la pgina al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco. El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos bsicos y ejemplos sencillos.

Crear marcos Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas. Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.

Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo. En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco padre (MainFrame). Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.

Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. En esta imagen puedes ver un ejemplo de marco a la derecha. Sobre un documento ya existente, menu.htm, se ha insertado un marco a la derecha. Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que tenamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre ser el de la izquierda.

El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.

Unidad 9. Formularios (I)

Vamos a ver qu es un formulario, para qu se utiliza, cmo insertar uno, qu elementos puede contener y cmo pueden validarse los datos introducidos en l.

Introduccin Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente. Aqu vamos a ver cmo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en VBScript, en JavaScript o en otro lenguaje de programacin, y esto no entra en los objetivos del curso. A la derecha tienes un ejemplo de formulario. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones.

Elementos de formulario

Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades. Campo de texto y rea de texto: Permiten aadir un cuadro de texto. El Campo de texto solo permite al usuario escribir una lnea, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. Tambin es posible definirlo como Contrasea es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carcter como podrs ver en la imagen siguiente. A continuacin tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
Campo de tex

rea de texto

**********

A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro.

Botn: Es el botn tradicional de Windows. El botn puede tener asignadas tres opciones:Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).
Enviar

Tambin es posible cambiar el texto del botn, a travs del campo Etiqueta del inspector de propiedades.

Casilla de verificacin: Es un cuadrito que se puede activar o desactivar. Deseo recibir informacin

Puede asignrsele el estado inicial como Activado o como Desactivado.

Botn de opcin: Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Superman Spiderman

Lista/Men: Una lista o men es un elemento de formulario que lleva asociada una lista de opciones.
--- Elige opcin lista ---

--- Elige opcin men--Perro Gato

Los elementos se aaden a travs del botn Valores de lista del inspector de propiedades. Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultneamente.

Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario

pueda saber qu datos ha de introducir en cada uno de ellos.

Seleccionar elementos de una tabla Existen varias formas de seleccionar una tabla. Una de ellas es a travs del men Modificar estando el cursor en la tabla, o desplegando el men contextual de la tabla al pulsar con el botn derecho sobre ella. En ambos casos aparece la opcin Tabla, a travs de la cual se puede elegir la opcin Seleccionar tabla.

Tambin es posible seleccionar una tabla pulsando con el ratn sobre el borde que la rodea, o pulsando sobre la etiqueta <table> que aparece en la barra de estado de la ventana de documento.

Como novedad muy til a la hora de trabajar con tablas, Dreamweaver MX 2004 incorpora la opcin Anchos de tabla. Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada columna. Junto a los anchos se encuentran unos men desplegables (men de encabezado de la tabla y men de encabezado de la columna). Estos mens permiten acceder rpidamente a determinados comandos relacionados con la tabla.

Si tienes el cursor en la tabla y no te aparece esa zona verde puedes activar su visualizacin seleccionando la opcin Anchos de tablas del men Tabla o tambin desplegando de la barra de mens, el men Ver, Ayudas visuales, Anchos de tabla. De la misma forma se desactiva su visualizacin. Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un ancho especificado, si aparecen dos nmeros, el primer nmero corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo nmero es el ancho el ancho visual que aparece en la vista de diseo, por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 pxeles pero al contener una imagen que necesita ms espacio, la columna ocupar realmente 142 pxeles (ancho visual de la columna tal como aparece en la pantalla). Cuando ocurren estas diferencias podemos hacer que en el cdigo (propiedades) se cambie el ancho por el real, para ello slo tenemos que seleccionar la opcin Igualar todos los anchos del men desplegable de encabezado de tabla. En este men vemos que tambin tenemos la opcin Seleccionar tabla.

No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar filas, columnas o celdas. Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes las distintas formas y elijas la que ms te gusta. Estas son las formas de seleccin: Puedes utilizar la opcin Seleccionar columna del men de encabezado de columna (zona

verde de anchos) esto slo es vlido para seleccionar una columna. Manteniendo pulsado y arrastrando el ratn hasta seleccionar la columna/s o fila/s completamente. Tambin puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha. Para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la columna. Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratn mientras se arrastra sobre las celdas deseadas. Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.

Formato de tabla

Las propiedades de la tabla se especifican a travs de su inspector de propiedades.

A travs del inspector 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), el color de fondo o de borde de la tabla, o la imagen de fondo. 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 del inspector de propiedades en este caso 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 (diferentes de los especificados para la tabla global), el color del borde de la celda, etc. Dos opciones que posiblemente necesites utilizar con frecuencia sern Horiz y Vert, que definen la alineacin del contenido de la celda de forma horizontal y vertical respectivamente.

Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la tabla.

Cambiar tamao de tabla y celdas Como ya sabes, el Ancho de una tabla puede ser definido como Pxeles o como Porcentaje. El tamao de la tabla a travs del inspector de propiedades estar especificado por los valores de An (anchura) y Al (altura). Normalmente solo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre estn en Pxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamao, y no que se ajusten al contenido o al tamao de la ventana. No solo puede establecerse el tamao de las tablas y de las celdas a travs del inspector de propiedades. Tambin es posible hacerlo manteniendo pulsado el ratn sobre alguno de los bordes, arrastrndolo hacia la posicin deseada.

Unidad 10. Multimedia (I)

Vamos a ver cmo insertar elementos multimedia. En concreto, veremos cmo insertar una animacin Flash, un sonido y un vdeo.

Pelculas Flash Las pelculas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensin SWF. Es frecuente verlas en las pginas iniciales de los sitios web, a modo de presentacin hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animacin. Estas pelculas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga instalado el plugin para poder ser visualizadas. Las pelculas Flash pueden insertarse en una pgina a travs del men Insertar, Meda, opcin Flash, o pulsando Ctrl+Alt+F. Tambin pueden insertarse pulsando sobre la opcin Comn del panel Insertar, botn Media. Flash que aparece en la pestaa

El inspector de propiedades de las pelculas Flash es prcticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualizacin de la pelcula.

La opcin Bucle indica que al finalizar la pelcula, sta volver a comenzar desde el principio. La otra es la opcin Rep. autom. (reproduccin automtica), que al estar marcada indica que nada ms cargarse la pgina comenzar a reproducirse la pelcula Flash. Si esta opcin no estuviera marcada, se mostrara nicamente el primer fotograma de la pelcula. Interesa desmarcar esta opcin cuando se desea que la reproduccin sea activada por algn comportamiento.

Sonido No es muy habitual incluir sonido en una pgina web, ya que algunos usuarios suelen estar escuchando su propia msica cuando navegan en Internet, por lo que el escuchar tambin sonido en cada pgina que se visita puede resultar algo molesto. A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la pgina, puede hacerla ms atractiva. Muchas de las pginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la pgina puedan desactivarlo. Los formatos de sonido ms habituales en Internet son, fundamentalmente, el MP3, el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que tambin pueden utilizarse. Lo ideal es incluir algn archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad. Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles ( recuerda encender los altavoces, si los tienes). En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.

En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. En el caso de no especificar ningn tamao, se mostrar el tamao por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden cambiarse a travs del inspector de propiedades, pero s a travs del cdigo. Por ejemplo, el archivo anterior apareca en el cdigo como <embed src="varios/audio.MID"></embed>. Pero para que no se reprodujera automticamente se ha aadido autostart="false", y para que se reprodujera continuamente se ha aadido loop="true". La lnea de cdigo del archivo de audio a quedado del siguiente modo: <embed src="varios/audio.MID" autostart="false" loop="true"></embed> Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea. Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despues de la etiqueta </title> Con el parmetro loop puedes decidir cuantas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).

Unidad 11. Las plantillas (I)

En este tema vamos a ver qu son las plantillas, cmo crearlas y cmo basar documentos en ellas.

Introduccin Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las pginas deben seguir un formato uniforme. La mayora de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma ms sencilla de tener pginas con una estructura basada en la estructura de otras ya creadas previamente. Las plantillas son una especie de copia de la pgina en la que van a estar basadas el resto de pginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que sern fijas, que no podrn ser modificadas. No es posible modificar las propiedades de una pgina que est basada en una plantilla, a excepcin del ttulo. Cuando se desea que existan pginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las pginas en una u otra plantilla, segn el color de fondo que se desee para cada una. Cuando se modifica el diseo de una plantilla, se pueden actualizar todas las pginas basadas en ella. Las plantillas son archivos con la extensin DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates. Crear plantillas Las plantillas pueden crearse desde cero, o a partir de una pgina ya existente. Una forma de crear una plantilla desde cero es a travs del panel Activos.

El panel Activos se puede abrir a travs del men Ventana, opcin Activos. Tambin pulsando F11. Una vez abierto el panel hay que seleccionar el botn , para poder trabajar con las plantillas. Los botones inferiores del panel Activos Plantillas son similares a los del panel Estilos CSS . El nico botn diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botn (Si este botn no est activado, pulsa con el botn derecho del ratn y elige Nueva Plantilla). Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l. Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn . .

Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente. Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y despus guardarlo como plantilla a travs del men Archivo, opcin Guardar como plantilla. Cuando se pulsa dicha opcin, aparece una ventana como la de la derecha. En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a travs del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio en el que se va a guardar.

Unidad 12. Capas

Vamos a ver algunas de las caractersticas bsicas sobre las capas, para luego poder trabajar con ellas y aplicarles algn comportamiento. Introduccin Las capas no son ms que unos recuadros, que pueden situarse en cualquier parte de la pgina, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre s, lo que proporciona grandes posibilidades de diseo. Las capas pueden moverse de una posicin a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratn, arrastrndola hacia la nueva posicin. Tambin pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrndolos hasta conseguir el tamao deseado. Dentro del recuadro de la capa es posible insertar texto, tablas, imgenes, animaciones flash, y todos los elementos que puede contener un documento HTML. La capa no solo aparece representada por el recuadro anterior, sino que tambin aparece la imagen en el documento, cuando est abierto en Dreamweaver. Este icono sirve para seleccionar la capa al pulsar sobre l, y al eliminarlo se elimina tambin la capa.

Insertar una capa Las capas pueden insertarse en una pgina a travs del men Insertar, opcin Objeto de diseo, Capa. Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero. Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta til cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fcil seleccionar la deseada a la primera.

Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a travs de la pestaa Capas del panel Diseo, que puede abrirse a travs del men Ventana opcin Capas. Si la opcin Capas no te aparece directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el panel pulsando F2. En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel. Formato de una capa Las propiedades de la capa se especifican a travs de su inspector de propiedades.

ID de capa es el nombre de la capa. Tambin puede ser cambiado a travs del panel Capas, haciendo doble clic sobre l. Iz y Sup indican la distancia en pixels que hay entre los lmites izquierdo y superior del documento y la capa. An y Al indican la anchura y la altura de la capa. ndice Z es el nmero de orden de colocacin de las capas. Este valor tambin puede cambiarse a travs del panel Capas. Una capa ser solapada por aquellas capas cuyo ndice Z sea mayor que el suyo. Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos: Default (visibilidad segn el navegador), Inherit (se muestra la capa mientras la pgina a la que pertenece tambin se est mostrando), Visible (muestra la capa, aunque la pgina no se est viendo) y

Hidden (la capa est oculta). La visibilidad tambin puede cambiarse a travs del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden. A travs de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa. Desb. (Desbordamiento) controla cmo aparecen las capas en un navegador cuando el contenido excede el tamao especificado de la capa. Visible indica que el contenido adicional aparece en la capa. La capa se ampla para darle cabida. Hidden (oculto) especifica que el contenido adicional no se mostrar en el navegador. Scroll (desplazamiento) especifica que el navegador deber aadir barras de desplazamiento a la capa tanto si se necesitan como si no. Auto (automtico) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus lmites). Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.

Unidad 13. Comportamientos (I)

w w w .aulaclic.es

Bsqueda
pub-1875034419 1 ISO-8859-1

Web

www.aulaclic.es

En este tema vamos a ver las caractersticas bsicas de los comportamientos, as como un par de ejemplos de entre sus posibles aplicaciones.

Introduccin Los comportamientos son acciones que suceden cuando los usuarios realizan algn evento sobre un objeto, como puede ser mover el ratn sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc. Los comportamientos no existen como cdigo HTML, se programan en JavaScript. Dreamweaver permite insertarlos a travs del panel Comportamientos, por lo que no es necesario escribir ninguna lnea de cdigo JavaScript para programarlos. La imagen que aparece a continuacin tiene asociado un comportamiento. Sita el puntero sobre ella para ver qu es lo que ocurre.

Ests visualizando una capa que estaba oculta. Si dejas de situar el puntero sobre la imagen, la capa volver a ocultarse.

La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos ms adelante. Otros comportamientos que ya has visto son los que se aplican sobre las imgenes de sustitucin y las barras de navegacin, que ya estn predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a travs del panel Comportamientos. Para validar formularios ya viste algunas caractersticas del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos ms tarde. El panel Comportamientos se puede abrir a travs del men Ventana, opcin Comportamientos. Tambin pulsando Mays+F4. En este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de la lista de navegadores. Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecern unos u otros comportamientos posibles. Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayora de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar alguna de sus ltimas

versiones: IE 5.5 o IE 6.0. Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algn comportamiento.

Insertar un comportamiento Cuando ya hay establecido algn navegador, ya se pueden insertar comportamientos. Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc. Al desplegar el botn del panel Comportamientos aparece la opcin Mostrar eventos para, a travs de la cual se haba elegido el navegador. Tambin aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una. Segn el elemento sobre el que se desee aplicar el comportamiento, se podrn elegir unas acciones, mientras que otras no. En este caso la accin Validar formulario no puede seleccionarse porque no existe ningn formulario en la pgina. Despus de elegir alguna accin, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos. Como puedes ver, cada comportamiento tiene asociada una accin y un evento. Las acciones son las que se han elegido en la lista anterior y el evento indica cundo se debe de realizar la accin.

Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botn . Tambin es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionndolos y ordenndolos mediante los botones .

Unidad 14. Otros elementos (I)

Vamos a ver una serie de elementos que suelen aparecer en las pginas web, como pueden ser las marquesinas, los contadores y la fecha.

Marquesinas Las marquesinas son texto, imgenes, o una mezcla entre texto e imgenes, que pueden desplazarse de un lado a otro de la ventana en forma de lnea. A continuacin tienes un ejemplo de marquesina.

Las marquesinas no se pueden insertar a travs del editor grfico de Dreamweaver, es necesario hacerlo a travs del cdigo. Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina. Tambin es posible especificar algunas caractersticas de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina har el desplazamiento una sola vez y se detendr. Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazar de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo cdigo puedes ver a continuacin: <marquee behavior="alternate">

Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee>

Unidad 15. HTML desde Dreamweaver (I)

En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio cdigo HTML, y no nicamente sobre el editor grfico de la vista diseo. En este tema no se pretende ensearos el lenguaje HTML sino cmo poder realizar algunos reajustes directamente en el cdigo estando dentro de Dreamweaver.

Etiquetas Ya sabes que el lenguaje HTML est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo deseado entre las etiquetas <TITLE> y </TITLE>. Las etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final se suele denominar etiqueta de cierre. Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan, incluyendo cierto cdigo dentro de la etiqueta. Por ejemplo, un prrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus caractersticas predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del prrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>. Tambin hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del cdigo HTML equivale a la etiqueta <BR>. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico, pero tambin ofrece otras posibilidades para trabajar directamente sobre el cdigo.

El inspector de cdigo

Recordars que Dreamweaver ofrece la posibilidad de trabajar con tres vistas: vista Diseo, vista Cdigo y vista Dividir (Cdigo y Diseo). Todas estas vistas se aplican directamente sobre la ventana del documento.

Pero existe un panel que permite visualizar el cdigo independientemente de la vista aplicada en el documento. Este panel es el llamado Inspector de cdigo y puede abrirse a travs del men Ventana. Si la opcin Inspector de cdigo no te aparece directamente en este men, posiblemente est dentro de la opcin Otros. Tambin puedes abrir el Inspector de cdigo pulsando F10.

El Inspector de cdigo muestra el cdigo HTML de la misma forma que lo hacen la vista Cdigo y la vista Dividir (Cdigo y Diseo), pero puede resultar ms cmodo trabajar con el panel, ya que puede situarse en cualquier parte de la pantalla, y no se limita slo al espacio del documento.