DREAMWEAVER

Dreamweaver CS5 es un software fcil de usar que permite crear pginas web profesionales.

Las funciones de edicin visual de Dreamweaver CS5 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. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te dar tiempo a entenderlo y decidir si quieres adquirir la versin completa de este fantstico programa. Nota: Esta versin estar disponible hasta que Adobe lance la nueva versin del programa. Los logotipos de Dreamweaver son propiedad de Adobe, as como las marcas registradas Dreamweaver y Adobe. Las pginas web estn escritas en HTML. Si no conoces las caractersticas bsicas de HTML puedes verlas aqu.

1.2. Novedades de Dreamweaver CS5

En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior. Compatibilidad con CMS integrada. Un sistema de gestin de contenidos (en ingls Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son ms usados, y ahora Dreamweaver integra con los principales, permitindose crear nuestras pginas con la estructura adecuada.

Inspeccionar CSS. Ahora, con la opcin Inspeccionar, podemos ver claramente los mrgenes aplicados al elemento seleccionado, y qu propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Integracin Adobe Browserlab. Adobe Browser Lab es un servicio en lnea de Adobe, que nos permite comparar cmo se ve una misma pgina web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.

Este servicio es fcilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su pgina web.

Configuracin sencilla de sitios . Ahora resulta ms sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido ms las opciones avanzadas y poco importantes.

Sugerencias de cdigo. Ahora las sugerencias de cdigo incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

UNIDAD 1:
CONCEPTO BASICO DE DREAMWEAVER CS5 (II) 1.3. 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 incluido en Windows 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, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque tambin es cierto que escribir el cdigo nos da ms control sobre l, y sobre todo al principio, nos ayudar a aprenderlo rpidamente. 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 Adobe Dreamweaver. Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Expresin Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4. 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, sobre todo al comienzo. 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. En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn.

Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores (los que utilizan linux) distinguen entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.

Unidad 1. Conceptos bsicos de Dreamweaver CS5 (III)

1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas bsicas de arrancar Dreamweaver CS5.

Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men. Puedes comenzar a escribir el nombre del programa, y aparecer directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre l para arrancar el programa.

Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes

Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aqu. Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botn cerrar

, en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinacin de teclas Alt + F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos.

1.6. Abrir y guardar documentos

Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn abrir de la barra de herramientas estndar (si est visible).

Pulsar la combinacin de teclas Ctrl + O. Hacer clic sobre el men Archivo y elegir la opcin Abrir.... Hacer doble clic sobre el archivo en la ventana del sitio. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opcin Abrir con Adobe Dreamweaver CS5.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones.: Hacer clic en el botn nuevo de la barra de herramientas estndar (si est visible).

Pulsar la combinacin de teclas Ctrl + N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina en blanco. En la segunda columna seleccionamos HTML, observamos que hay muchos diseos ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseo ninguno. A continuacin pulsamos el botn Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn Guardar de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl + S. Hacer clic sobre el men Archivo y elegir la opcin Guardar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botn Guardar todo de la Barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo.

Al tener varios documentos abiertos es fcil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa. De todas formas, observa que cuando hay cambios sin guardar aparece un * tras el nombre del documento .

Unidad 1. Conceptos bsicos de Dreamweaver CS5 (IV)

1.7. Mi primera pgina
Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abre un documento nuevo y selecciona la Categora Pgina bsica, HTML, en la columna Diseo dejamos la opcin por defecto: <ninguno>. Seguidamente, haz clic sobre la zona blanca del documento y escribe lo siguiente:

Una vez introducido el texto, vamos a modificar el ttulo y el color de fondo del documento. Para ello podemos hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina.

Entonces se abrir una ventana como la que aparece a continuacin:

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Haz clic en Ttulo/Codificacin a la izquierda, y en el Ttulo escribe Mi primera pgina. Para aplicar los cambios, pulsa sobre el botn Aceptar.

Unidad 1. Conceptos bsicos de Dreamweaver CS5 (V)

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras pginas, habitualmente en una subcarpeta dedicada a las imgenes. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensas publicar la pgina en Internet, hay que respetar los derechos de autor de la imagen. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web que estamos creando. Gurdala en la carpeta donde vas a guardar la pgina que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda lnea de texto. En primer lugar, situamos el cursor al final de la segunda lnea y creamos un salto de lnea (tecla Enter). Despus nos dirigimos al men Insertar, opcin Imagen.

En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, seleccionarla y pulsar Aceptar. Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, opcin Propiedades. Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contrado. Para que te aparezca desplegado debes hacer doble clic en Propiedades.

Selecciona la primera lnea de texto. En el inspector de propiedades pulsa HTML y aplica el formato Encabezado 1 (h1) seleccionando el valor Encabezado1 del cuadro Formato.

Para cambiar el color del texto cambiamos el panel a las opciones de estilo, pulsando el icono CSS a la izquierda.

Mediante el inspector de propiedades en Dreamweaver CS5 accedemos tanto a las propiedades de CSS como a las propiedades de HTML.

Podemos decir que en una pgina web, HTML se encarga de estructurar el contenido, la informacin, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

Unidad 1. Conceptos bsicos de Dreamweaver CS5 (VI)

Al utilizar el inspector de propiedades de CSS, Dreamweaver aplica formato al texto mediante hojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseo de la pgina Web y reducen el tamao del archivo. Selecciona la primera lnea. En Regla de destino selecciona <Nuevo estilo en lnea>, para aplicar el formato solo al texto seleccionado. Tambin aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:

Observa que hemos centrado el texto pulsando en el botn

Selecciona la segunda lnea de texto, y seleccionando como antes <Nuevo estilo en lnea>, marca los botones para ponerlo en negrita y cursiva respectivamente. Vamos a centrar tambin la imagen. Para ellos seleccinala. Lo que hay que centrar es el contenido del prrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarqua de

etiquetas. Haz clic sobre p. Ahora, en Regla de destino selecciona <Nuevo estilo en lnea> y centra el prrafo como hemos visto hasta ahora, pulsando en .

Por ltimo vamos a crear el enlace. Selecciona el texto de la ltima lnea, y cambia el panel de Propiedades a las propiedades de HTML. En el campo Vnculo, escribe la URL de la pgina a enlazar, como se ve en la imagen:

Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar. Puedes llamar al documento como lo desees, pero la extensin ha de ser htm o html. Por ejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpeta que la imagen descargada. Ahora, puedes ver cmo se ve en tu navegador pulsando la tecla F12.

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.

Unidad 2. El entorno de Dreamweaver CS5 (I)

Vamos a ver cules son los elementos bsicos de Dreamweaver CS5, 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.

2.1. 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 y dnde, como veremos ms adelante.

Unidad 2. El entorno de Dreamweaver CS5 (II)

2.2. Las barras
La barra de la aplicacin.

La barra la aplicacin se incorpor en la versin anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola lnea, si no, ocuparn dos lneas, como en la imagen superior. Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte inferior), varios botones propios de la aplicacin, el conmutador de espacio de trabajo y una caja de bsquedas para obtener ayuda on line.

Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones que se pueden aadir, o al administrador de sitios, que ya veremos.

Ms hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuracin del entorno (paneles visibles y su disposicin) que podemos guardar y cargar. Lo veremos ms adelante. Los mens, estn agrupados en categoras.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles. Las pestaas de documento.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos. Debajo de las pestaas encontramos los archivos a que utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder a ellos con un clic. Esto nos ahorrar bastante tiempo. La barra de estado.

Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano (para desplazarse) y Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin.

Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el men Ver Barras de herramientas.

La barra de herramientas estndar.

La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar, Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado ( Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.

La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa. La barra de representacin de estilos.

Esta barra, menos utilizada, nos permite ver la apariencia de nuestra web en distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso. En esta nueva versin se han aadido ms opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor est sobre un elemento. La barra de navegacin con navegador.

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las pginas de nuestro sitio, aunque slo tiene sentido con la Vista en vivo, como ya veremos.

Como tambin veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra barra de herramientas.

Unidad 2. El entorno de Dreamweaver CS5 (III)

2.3. Inspectores y paneles
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, mientras que el panel nos da acceso a opciones generales. 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 las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se convierte en uno de los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin, dimensiones, peso, clase, etc... Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos diseando. El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en categoras. Podemos emplearlo para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite. Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo. Personalizar el rea de trabajo es bastante intuitivo, pero si necesitas ayuda, te recomendamos este avanzado .

Unidad 2. El entorno de Dreamweaver CS5 (IV)

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:

La vista Diseo La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable. La vista Cdigo La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

Unidad 2. El entorno de Dreamweaver CS5 (V)

La vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona izquierda muestra el cdigo fuente, y la derecha el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La Vista en vivo La vista en Vivo es una mejora reciente de Dreamweaver. Nos ofrece una vista del resultado final no editable . A diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el navegador. La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan correctamente en el navegador. No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado, que sern los que emplearn nuestros visitantes. De hecho, a lo largo del curso vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el navegador.

La vista Cdigo en vivo

Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el cdigo. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente cdigo fuente.

2.5. La ayuda

A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas: Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o simplemente pulsando F1. Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra un resumen de esta herramienta. Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder a Dreamweaver Support Center en la web. Acceder al Foros en lnea de Adobe. Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de la bsqueda y buscar, iremos a la ayuda online de Adobe.

Unidad 3. Configurar un sitio local (I)

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.

3.1. 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, archivos de tipos especfico, 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. Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio remoto. 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. La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese nombre. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.es 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, y no se podra navegar por el sitio a no ser que se escribiese exactamente http://www.aulaclic.es/nombrepagina.htm

3.2. Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible definir el nuevo sitio. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio. Recuerda que a travs del panel Archivos, se puede cambiar a cada uno de los sitios definidos. Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a la opcin Administrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opcin Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Unidad 3. Configurar un sitio local (II)

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir o modificar las caractersticas del sitio.

Las opciones 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.

Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento son las nicas que cambiaremos: Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemos de momento: Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios. La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no. Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan. 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.

3.3. 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 Archivos. Para practicar realiza el Ejercicio paso a paso Crear un sitio web local. En este ejercicio, configuraremos un sitio que iremos completando ms adelante.

Unidad 3. Configurar un sitio local (III)

3.4. Ver el sitio
El panel Archivos (men Ventana Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya que nos da acceso a los archivos del sitio.

En este caso vemos todos los documentos creados en nuestro sitio buscar.htm, paraplantilla.htm, platossemana.htm, postresemana.htm y las carpetas imagenes y varios. Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botn que aparece en la parte superior del panel y de la ventana.

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o compararlos. Tambin el servidor de pruebas o las bases de datos. En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina. Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a sta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos configurada la opcin Mensaje al actualizar vnculos si movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin Preferencias, categora General.

Unidad 3. Configurar un sitio local (IV)

3.5. Subir archivos al servidor
Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no funcionarn correctamente, y es posible que algunas imgenes no se muestren. Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.

Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos. Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs descargarte el programa y su traduccin tu idioma. Una vez instalado, abre el programa y haz clic en Archivo Gestor de sitios y luego en Nuevo sitio para configurar un nuevo sitio FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Servidor, Usuario y Contrasea. Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas creado. La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo. Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.

Unidad 3. Configurar un sitio local (V)

3.6. Propiedades del documento

Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina.

Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl + J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras. En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: Fuente de pgina: es el tipo de letra que le aplicaremos al texto. Tamao: es el tamao 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. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opcin no-repeat. Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita solo en horizontal seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.

Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador. En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. 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. Texto: es el color de la fuente. Vnculos: es el color que mostrar el texto de los vnculos. Vnculos visitados: es el color que mostrar el texto de los vnculos visitados. Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo. Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del navegador. Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuracin utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseo. Por eso, te desaconsejamos su uso.

Unidad 3. Configurar un sitio local (VI)

En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo. Tamao: es el tamao del texto de los vnculos. Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no. Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo. Vnculos activos: es el color de los vnculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que queremos aplicar a cada tipo de encabezado. En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver En la categora Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo. Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu .

Unidad 3. Configurar un sitio local (VII)

3.7. Los colores

Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior. Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma en cualquier navegador bajo cualquier sistema operativo. Esto no quiere decir que slo podamos utilizar estos colores. Podemos personalizarlos a travs del botn la parte superior de la paleta. de

Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que vimos en este tema.

El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris

, lo que hace que se

despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #39F, el botn quedara del siguiente modo: .

En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos ( Rojo, Verde y Azul). Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16). El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total. Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo. Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el ltimo al verde. En Dreamweaver observars muchas veces que se emplean slo tres valores. En este caso, se interpreta que los valores de los pares estn repetidos. Es decir, los colores # FF22AA y #F2A son el mismo.

Unidad 3. Crear nuevo documento y modificar sus propiedades

Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la pgina.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn 3. Selecciona Pgina en blanco en Categora. 4. Selecciona HTML en Tipo de pgina. 5. Haz clic sobre el botn Crear. 6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de diseo . de la barra de herramientas.

7. Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual. 8. Elige la opcin Propiedades de la pgina en el men contextual y selecciona la categora Apariencia (CSS). 9. En Color de texto: escribe #585858. 10. En Color de fondo: escribe #FEFEFE.

11. Haz clic en la categora Vnculos CSS. 12. En Color de vnculos: escribe #DFA01B. 13. En Vnculos visitados: escribe #F9CA69. 14. En Vnculos activos: escribe #FFB900. 15. Haz clic en la categora Ttulo/codificacin. 16. En Ttulo, escribe Cocina. 17. Haz clic sobre el botn Aceptar. 18. Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta mis_sitios/cocina que habrs creado en ejercicio anterior.

Unidad 4. El texto: propiedades y formato (II)

Accediendo a las propiedades CSS. Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra pgina y darle el diseo que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas ms vistosas, como hacer que un bloque se muestre en una posicin determinada o que un elemento cambie al pasar el cursor sobre l. Profundizaremos en esto ms adelante, por ser una parte fundamental en la creacin de pginas web. Tenemos ms posibilidades a la hora de aplicar formatos. Dreamweaver CS5 nos proporciona numerosas funciones para la creacin de estilos mediante hojas de estilos en cascada .

Regla de destino: Las reglas CSS sirven para definir a qu elemento aplicamos el estilo, y cmo lo hacemos. Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema. Editar regla: Mediante este botn accedemos a las opciones para la creacin o modificacin de estilos CSS, de la regla seleccionada. Panel CSS: Este botn abre el panel CSS si no lo tuviramos abierto.

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, Helvetica, sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica. Estilo: Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en lnea. Alineacin: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un prrafo. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, porcentajes del tamao base, 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.

Unidad 4. Insertar texto y modificar sus propiedades

Objetivo
Practicar las operaciones de insertar texto y modificar sus propiedades.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior. 4. Haz doble clic sobre el documento quienes.htm, que aparece en los archivos desplegados en el panel de Archivos. Se abrir el documento en Dreamweaver. 5. Sita el punto de insercin antes de la primera letra de la primera lnea. 6. Escribe el texto Quines somos y pulsa la tecla Intro para saltar de lnea. 7. Si no aparece el inspector de propiedades, brelo a travs del men Ventana, opcin Propiedades. 8. Haz clic en el texto Quines somos.

9. En Formato, del inspector de propiedades HTML, elige Encabezado 1. Observa como ahora el texto es de mayor tamao. 10. En la barra de herramientas de documento, haz clic sobre la caja de texto Ttulo, y escribe Quines somos. 11. Haz clic sobre el botn Guardar de la barra de herramientas.

Unidad 4. El texto: propiedades y formato (III)

4.2. 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 Formato. La lista con vietas (sin ordenar) se selecciona a travs del botn se selecciona a travs del botn . , mientras que la lista numerada (ordenada)

Ejemplo de lista 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 Ejemplo de lista con vietas (sin ordenar): o o o Perro Gato Aves o Canario Loro

Hmster

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 Formato, 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.

Unidad 4. Convertir texto en una lista

Objetivo
Practicar las operaciones que hay que realizar para convertir texto en una lista desordenada.

Ejercicio
1. Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, brelo a travs del men Ventana, opcin Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. Recuerda que creamos este sitio en el tema anterior a partir de archivos de la carpeta Ejercicios. 4. Haz doble clic sobre el documento postresemana.htm, que aparece en los archivos desplegados en el panel Archivos. Se abrir el documento en Dreamweaver. 5. Si no aparece el Inspector de propiedades HTML, brelo a travs del men Ventana, opcin Propiedades. 6. Haz clic en la primera lnea Postre de la semana. 7. En el desplegable Formato, elige Encabezado 1. 8. Haz clic en la segunda lnea Boniatos a la mallorquina. 9. En el desplegable Formato, elige Encabezado 2. 10. Selecciona las tres lneas de texto desde 1kg de boniatos hasta Abundante aceite. 11. Haz clic sobre el botn Lista sin ordenar del Inspector de propiedades HTML.

12. Selecciona las lneas desde Mondar los boniatos hasta el final. 13. Haz clic sobre el botn de Lista ordenada del inspector de propiedades.

14. Haz clic sobre la barra de herramientas, para cambiar el Ttulo, e introduce Postre de la semana. 15. Haz clic sobre el botn Guardar + S. de la barra de herramientas. Si esta barra no aparece visible, pulsa Ctrl

Unidad 4. El texto: propiedades y formato (IV)

4.3. Caracteres especiales
A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin. Lo mismo ocurrir con los caracteres que no tenemos en el teclado. Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen inferior.

Slo coloca el cursor del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo. Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres entre una lista bastante ms amplia:

Unidad 4. El texto: propiedades y formato (V)

4.4. Estilos CSS. Introduccin

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto. Tambin permiten, como veremos ms adelante, definir prcticamente cualquier propiedad de los elementos que contendrn nuestra web. Podemos definir los estilos para determinadas etiquetas, como encabezados ( <h1>, <h2>...), prrafos (<p>), enlaces (<a>), etc... lo que formatear todas las apariciones de esta etiqueta en el mbito del estilo. Tambin podemos crear clases. Algo as como definir un estilo y darle un alias. El estilo afectar a todos los elementos a los que apliquemos esa clase. Por otro lado, al crear el estilo, podemos definirlo como un estilo en lnea (afectar slo al elemento seleccionado) o crear una regla, que puede afectar a toda la pgina, o a todo el sitio si la guardamos en un archivo CSS. Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.

4.5. Crear un estilo personalizado

Con Dreamweaver CS5, las caractersticas que apliquemos a un texto a travs del Inspector de propiedades CSS crearn automticamente estilos CSS. Aunque tenemos que decidir a qu elementos afecta. Vemoslo: Crear un estilo en lnea. Por ejemplo, si queremos que un determinado estilo afecte a un nico elemento y en un caso puntual, podemos crearlo como un estilo en lnea. Esto incrustar el estilo en la propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al elemento. En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo estilo en lnea>.

A continuacin, definimos las propiedades del estilo. Insistimos que esta opcin es la menos flexible y debe empelarse slo en casos concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.

Unidad 4. El texto: propiedades y formato (VI)

Crear una regla de estilo: Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, slo a las que estn contenidas en determinados elementos o una clase. Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nueva regla CSS>.

Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecer la siguiente ventana:

Tipo de selector: el tipo de selector es fundamental, ya que determina a qu elementos afectar el estilo. Podemos elegir entre cuatro tipos de selector:

Clase. Es el alias que tomar el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase. El nombre de la clase va precedido por un punto, y si no lo ponemos lo har Dreamweaver. ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma nica y concreta. Por tanto, el estilo slo puede afectar a un elemento en cada pgina, al que tenga ese ID. En el selector, se escribe precedido por #. Etiqueta. El estilo afectar a todas las apariciones de la etiqueta HTML indicada. Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta nicamente a los prrafos con la clase resaltado, pero no a los encabezados con esa clase. Tambin se pueden anidar. Por ejemplo ul#menu li p afecta slo a los prrafos que estn dentro de un elemento de una lista con el id menu. Nombre del selector: esta opcin permite asignar un nombre al selector.

Depende ntimamente del tipo de selector, pues aqu introduciremos el nombre de la clase, id, etiqueta, etc... Por defecto, indicar el elemento seleccionado, pero podemos escribir el que queramos. Definicin de regla: esta opcin nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.

Si elegimos (Slo este documento) la definicin del estilo se guardar en la cabecera de la pgina, por lo que slo estar disponible dentro de sta. Si elegimos (Nueva hoja de estilo) se crear un archivo CSS. Podremos emplear estos estilos en cualquier pgina del sitio slo con vincular la hoja de estilos. Deberemos de indicar dnde guardar el archivo css que contendr los estilos. Normalmente en la misma carpeta que las pginas. Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aqu y los estilos se aadirn ella.

Unidad 4. El texto: propiedades y formato (VII)

4.6. Definir o editar un estilo
Una vez creado, tenemos que definir las propiedades que formarn el estilo. Para ello, encontramos las opciones bsicas en el Inspector de propiedades CSS.

Observa que la regla que estamos editando es la que aparece en Regla de destino. Si queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vez creadas se van aadiendo a la lista. Si queremos acceder a todas las propiedades, podemos pulsar en el botn Editar regla. Se abrir la ventana Definicin de regla.

Aqu encontramos todas las propiedades CSS agrupadas por Categoras. Las veremos ms adelante. Esta ventana es la opcin ms cmoda nada ms crear el estilo, cuando tenemos que cambiar varias propiedades. Para pequeos cambios que no podamos hacer desde el Inspector de propiedades y otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a l desde el men Ventanas o pulsando en el botn Panel CSS.

En la parte superior vemos las propiedades que afectan al elemento, en medio las reglas aplicadas, y en la parte inferior las propiedades del estilo actual.

Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qu tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos clic con el botn derecho sobre el estilo y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.

Si quieres aprender ms sobre el panel Estilos CSS, puedes hacerlo aqu

Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber explicado previamente cada una. Ms adelante detallaremos qu hacen las propiedades existentes. No obstante, sabiendo un poco de ingls resultan muy intuitivas. Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir el estilo de una etiqueta.

Unidad 4. El texto: propiedades y formato (VIII)

4.7. Aplicar un estilo
En el caso de haber creado una regla para una etiqueta, no ser necesario aplicarla, ya que directamente afecta a todas las etiquetas de ese tipo. Por tanto lo que tendremos que aplicar sern los estilos que definamos como clases. Veamos cmo hacerlo: En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de insercin, pero sin seleccionar, el estilo se aplicar a la primera etiqueta que contenga el texto (por ejemplo el prrafo). En el inspector de Propiedades seleccionamos la opcin CSS y seleccionamos el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML tambin podemos hacerlo, utilizando el desplegable Clase.

Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barra de estado, y seleccionar la clase deseada del men Establecer clase.

Todas las reglas disponibles aparecen al desplegar el submen Formato Estilos CSS. Observa que existe una clase llamada ninguna. Lo que hace esta opcin es quitar la clase al elemento. La barra de estado nos ayudar a saber qu clase tiene aplicada un elemento. La clase aparecer junto al nombre de la etiqueta, separada por un punto.

Para practicar puedes realizar el Ejercicio paso a paso Crear y aplicar una clase y el ejercicio paso a paso Modificar el estilo de una lista.

Unidad 4. El texto: propiedades y formato (IX)

4.8. Hojas de estilos
Exportar estilos Es frecuente que comencemos creando los estilos en la propia pgina, y despus al ver que los necesitaremos en otras pginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fcilmente. Utilizamos el panel Estilos CSS (Mays + F11). En este caso nos ser ms til la vista Todo. Agrupados en <style> encontramos los estilos creados en la pgina.

Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el icono de la esquina superior derecha) seleccionamos Mover Reglas CSS.... Nos aparecer la siguiente ventana:

Encontramos dos opciones para ubicar los estilos: Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se aadirn a ella. Una nueva hoja de estilos... crear una hoja nueva para las reglas exportadas. Deberemos de indicar dnde queremos guardar el archivo, normalmente en la misma carpeta que las pginas. Los estilos seleccionados se quitarn de la pgina actual, y se vincular con la hoja de estilos.

Vincular una hoja de estilos. Si queremos utilizar una hoja de estilos ya existente en nuestra pgina, debemos vincularla. Podemos hacerlo desde el men Formato Estilos CSS Adjuntar hoja de estilos... o desde el panel Estilos CSS. Lo nico que tendremos que hacer es seleccionar el archivo a vincular. Las hojas de estilo tienen la extensin .css. Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.

Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso Exportar y vincular hojas de estilo.