75
CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVA CETPRO “JESÚS NAZARENO CAUTIVO” – MONSEFÚ UNIDAD 1: CONCEPTOS BÁSICOS DE DREAMWEAVER CS5 1.1. ¿Qué es Dreamweaver CS5? Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..., de una forma muy sencilla y visual. Además 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 versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa. Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa. Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. 1.2. Novedades de Dreamweaver CS5 En este punto comentaremos las características que aporta esta nueva versión sobre la anterior. Compatibilidad con CMS integrada: Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndonos crear nuestras páginas con la estructura adecuada. Inspeccionar CSS: Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre. Prof. Joseph Sandoval CoronadoPágina 1

MANUAL DREAMWEAVER CS5.docx

Embed Size (px)

Citation preview

Page 1: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 1: CONCEPTOS BÁSICOS DE DREAMWEAVER CS5

1.1. ¿Qué es Dreamweaver CS5?Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales.Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..., de una forma muy sencilla y visual.Además 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 versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.

Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa.Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe.

1.2. Novedades de Dreamweaver CS5En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.

Compatibilidad con CMS integrada: Un sistema de gestión de contenidos (en inglés Content Management System, abreviado CMS) es in interfaz o programa que nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora Dreamweaver integra con los principales, permitiéndonos crear nuestras páginas con la estructura adecuada.

Inspeccionar CSS: Ahora, con la opción Inspeccionar, podemos ver claramente los márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son propias, como heredadas de los elementos padre.

Integración Adobe Browserlab: Adobe Browser Lab es un servicio en línea de Adobe, que nos permite comparar cómo se ve una misma página web en las distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows o Mac OS.

Prof. Joseph Sandoval Coronado Página 1

Page 2: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Este servicio es fácilmente accesible desde Dreamweaver, pero realmente cualquiera puede usarlo desde su página web.

Configuración sencilla de sitios: Ahora resulta más sencillo configurar nuestro sitio local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las opciones avanzadas y poco importantes.

Sugerencias de código: Ahora las sugerencias de código incluyen nuestras clases personalizadas, y los comandos y funciones propios de los distintos CMS soportados.

1.3.Editar páginas webCualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo. Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.

1.4.¿Cómo tener una página en Internet?Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.

Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.

Prof. Joseph Sandoval Coronado Página 2

Page 3: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.

Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. 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 ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.

A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo 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 querrás que se encuentre a disposición de todo el mundo en Internet.Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan Linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.

1.5. Arrancar y cerrar Dreamweaver CS5

Veamos las dos formas básicas de arrancar Dreamweaver CS5.

Desde el botón Inicio   situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón 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.

Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón cerrar  , en la esquina superior derecha, como en cualquier ventana de Windows.

Pulsar la combinación de teclas Alt + F4.

Prof. Joseph Sandoval Coronado Página 3

Page 4: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Hacer clic sobre el menú Archivo y elegir la opción Salir.

Si existe algún documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedirá confirmación 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 botón abrir   de la barra de herramientas estándar (si está visible).  Pulsar la combinación de teclas Ctrl + O. Hacer clic sobre el menú Archivo y elegir la opción 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 opción Abrir con → Adobe

Dreamweaver CS5. 

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón nuevo   de la barra de herramientas estándar (si está visible).  Pulsar la combinación de teclas Ctrl + N. Hacer clic sobre el menú Archivo y elegir la opción Nuevo.

Después de esto aparecerá una nueva ventana, en la que deberás elegir la Categoría Página en blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creados que podemos elegir, para nuestro primer ejemplo elegimos en Diseño <ninguno>. A continuación pulsamos el botón Crear.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones:

Hacer clic en el botón Guardar   de la barra de herramientas estándar.  Pulsar la combinación de teclas Ctrl + S. Hacer clic sobre el menú Archivo y elegir la opción Guardar.

Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultáneamente 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.

Prof. Joseph Sandoval Coronado Página 4

Page 5: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Hacer clic en el botón Guardar todo   de la Barra de herramientas estándar.  Hacer clic sobre el menú Archivo y elegir la opción Guardar todo.

Al tener varios documentos abiertos es fácil olvidarse de todas las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opción 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 opción, 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.

1.7. Mi primera páginaPara que te vayas haciendo una idea de cómo funciona Dreamweaver, vamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace a otra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar con los elementos básicos con los que están hechas la mayoría de las páginas web. Si nunca has hecho una página web, este es el momento para descubrir lo fácil que es.Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la página anterior como puede hacerse. Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columna Diseño dejamos la opción 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 título y el color de fondo del documento.Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.Entonces se abrirá una ventana como la que aparece a continuación:

Prof. Joseph Sandoval Coronado Página 5

Page 6: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser de color azul.Haz clic en Título/Codificación a la izquierda, y en el Título escribe Mi primera página.Para aplicar los cambios, pulsa sobre el botón Aceptar.

Ahora vamos a insertar una imagen. Para insertar la imagen, hemos de tenerla en la carpeta donde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a las imágenes.Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventana con una opción 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 página en Internet, hay que respetar los derechos de autor de la imagen.Copia la imagen que aparece a continuación, para luego poder insertarla en la página web que estamos creando. Guárdala en la carpeta donde vas a guardar la página que acabas de crear.

Ahora vamos a insertar la imagen debajo de la segunda línea de texto. En primer lugar, situamos el cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nos dirigimos al menú Insertar, opción Imagen.

En la nueva ventana que aparece, deberás buscar la imagen en la carpeta en la que la habías guardado, seleccionarla y pulsar Aceptar.

Prof. Joseph Sandoval Coronado Página 6

Page 7: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ 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 través del menú Ventana, opción Propiedades.

Si lo que te ocurre es que únicamente te aparece el título del panel, es porque está contraído. Para que te aparezca desplegado debes hacer doble clic en Propiedades. 

Selecciona la primera línea 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 página web, HTML se encarga de estructurar el contenido, la información, mientras que CSS se encarga de mostrar ese contenido con el formato adecuado.

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 diseño de la página Web y reducen el tamaño del archivo.

Selecciona la primera línea. En Regla de destino selecciona <Nuevo estilo en línea>, para aplicar el formato solo al texto seleccionado. También aplica el estilo de Fuente Arial, Helvetica, sans-serif, color azul #009 y centra el texto, tal y como muestra la imagen siguiente:

Prof. Joseph Sandoval Coronado Página 7

Page 8: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Observa que hemos centrado el texto pulsando en el botón  .Selecciona la segunda línea de texto, y seleccionando como antes <Nuevo estilo en línea>, marca los

botones   para ponerlo en negrita y cursiva respectivamente.

Vamos a centrar también la imagen. Para ello selecciónala. Lo que hay que centrar es el contenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de las propiedades nos aparece la jerarquía de etiquetas.

Haz clic sobre <p>. 

Ahora, en Regla de destino selecciona <Nuevo estilo en línea> y centra el párrafo como hemos visto hasta ahora,

pulsando en  .

Por último vamos a crear el enlace. Selecciona el texto de la última línea, y cambia el panel de Propiedades a las propiedades de HTML.

En el campo Vínculo, escribe la URL de la página a enlazar, como se ve en la imagen:

Por último guarda el documento. Ya sabes que puedes hacerlo a través del menú Archivo, desde la opción Guardar.

Puedes llamar al documento como lo desees, pero la extensión 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 cómo se ve en tu navegador pulsando la tecla F12. 

Prof. Joseph Sandoval Coronado Página 8

Page 9: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 2: EL ENTORNO DE DREAMWEAVER CS5 Vamos a ver cuáles son los elementos básicos de Dreamweaver CS5, la pantalla, las barras, los paneles, etc..., para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas 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á más fácil entender el resto del curso. La pantalla que se muestra a continuación 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 dónde, como veremos más adelante.

2.2. Las barras

La barra de la aplicación:

La barra la aplicación se incorporó en la versión anterior de Dreamweaver. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.Esta barra contiene los siguientes elementos: los menús (en la imagen, en la parte inferior), varios botones propios de la aplicación, el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha a izquierda) cambiar entre la

vista de diseño o código, acceder a las extensiones que se pueden añadir, o al administrador de sitios, que ya veremos.

Prof. Joseph Sandoval Coronado Página 9

Page 10: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Más hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar

y cargar. Lo veremos más adelante.

Los menús, están agrupados en categorías.

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 través de los menús, aunque en ocasiones nos envíen a los paneles.

Las pestañas de documento:

Cada archivo que tengamos abierto, mostrará una pestaña con su nombre, lo que nos permitirá cambiar de uno a otro fácilmente. 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 botón derecho, como Cerrar otros archivos.Debajo de las pestañas encontramos los archivos a que utiliza nuestra página, 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 información 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 Selección, Mano (para desplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o su codificación.

 Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas.

Prof. Joseph Sandoval Coronado Página 10

Page 11: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

 

La barra de herramientas estándar:

La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con Adobe Bridge, Guardar, Guardar todo, Imprimir el código 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 edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones de validación que nos ofrece el programa.

La barra de representación 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 versión se han añadido más opciones, como las de ver los estilos que dependen de pseudo clases activas, como cuando el cursor está sobre un elemento.

La barra de navegación con navegador:

Esta barra nos permite usar Dreamweaver como un navegador web y navegar por las páginas de nuestro sitio, aunque sólo tiene sentido con la Vista en vivo, como ya veremos.

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

Prof. Joseph Sandoval Coronado Página 11

Page 12: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ 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 través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.

El inspector de Propiedades:

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitiéndonos editarlas, por lo que se convierte en uno de los elementos más utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará su ubicación, dimensiones, peso, clase, etc...Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la página Web que estemos diseñando.

El panel Insertar:

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el menú Insertar, clasificados en categorías. Podemos emplearlo para insertar imágenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.Como vemos en las imágenes, es posible configurar este panel para verlo como menú, como panel flotante o como una barra de herramientas integrada en la ventana de trabajo.

2.4. Vistas de un documento

Podemos editar el documento con distintas vistas, que puedes cambiar través de la barra de documento:

La vista Diseño 

Prof. Joseph Sandoval Coronado Página 12

Page 13: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ La vista Diseño permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

La vista Código La vista Código se utiliza para poder trabajar en un entorno totalmente de programación, de código fuente. No permite tener directamente una referencia visual de cómo va quedando el documento según se va modificando el código.

El código que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseño.

La vista Dividir La vista Dividir permite dividir la ventana en dos zonas: Código y Diseño. La zona izquierda muestra el código 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.

Prof. Joseph Sandoval Coronado Página 13

Page 14: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

 

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 Diseño, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haríamos con el navegador.La función de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeños cambios se previsualizan correctamente en el navegador.No obstante, siempre hay que comprobar la página con los principales navegadores del mercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso verás cómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en la vista en vivo o en el navegador.

 

La vista Código 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 código. Lo que hace es que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente código fuente.

2.5. La ayudaA través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.

Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta.

Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

Acceder a Dreamweaver Support Center en la web. Acceder al Foros en línea de Adobe.

Prof. Joseph Sandoval Coronado Página 14

Page 15: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.

Prof. Joseph Sandoval Coronado Página 15

Page 16: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 3: CONFIGURAR UN SITIO LOCALEn este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.

3.1. IntroducciónUn sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas 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 imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.Después se podrán 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 organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, y no se podría 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 conexión a InternetUna vez creadas las carpetas que formarán la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio.Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.Recuerda que a través del panel Archivos, se puede cambiar a cada uno de los sitios definidos.

También podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción Administrar sitios o Nuevo sitio...

Prof. Joseph Sandoval Coronado Página 16

Page 17: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir o modificar las características del sitio.

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.Las dos únicas opciones imprescindibles son las que encontramos en la categoría Sitio, y de momento son las únicas que cambiaremos.

Vamos a ver los datos que hay que editar para la categoría 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 características son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.

Las demás 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.Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

3.3. Abrir un sitio

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar

el sitio de la lista de sitios y pulsar sobre el botón Listo.

También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú

desplegable Archivos.

Prof. Joseph Sandoval Coronado Página 17

Page 18: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

3.4. Ver el sitio

El panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles más 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 botón   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. También el servidor de pruebas o las bases de datos.En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) con nuestros archivos.

Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un archivo o su carpeta desde Dreamweaver, automáticamente

actualizará todas las referencias a ese archivo (enlaces desde otras páginas, origen de la imagen, etc.)

En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya que Dreamweaver simplemente no encontrará la página.

Al modificar algún objeto que es referenciado por algún 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.

Prof. Joseph Sandoval Coronado Página 18

Page 19: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemos configurada la

opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemos establecer desde

el menú Edición, opción Preferencias, categoría General.

3.5. Subir archivos al servidorCuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) deberás subir los archivos al sitio que hayas contratado o conseguido gratuitamente. 

Algunos sitios gratuitos sólo permiten que subas archivos vía web, por lo que deberás 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 funcionarán correctamente, y es posible que algunas imágenes no se muestren.Para subir los archivos vía web deberás 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.

Vía FTP puedes ver el contenido de tu sitio como una carpeta más (igual que en el Explorador de

Windows) y, obviamente, nos es mucho más útil para subir los archivos.

Uno de los programas gratuitos más utilizados es FileZilla, desde su página web podrás descargarte el programa y su traducción 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.

Prof. Joseph Sandoval Coronado Página 19

Page 20: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Aquí deberás introducir los datos que te facilitó el servidor donde vas a alojar tus páginas: Servidor, Usuario y Contraseña.Rellena los campos y haz clic en Conectar. Se conectará automáticamente y podrás ver una carpeta donde podrás 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 más que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo.Verás cómo el programa empieza a copiar la información de tu disco a Internet.Cuando haya finalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) ¡y verás el sitio en Internet!

Prof. Joseph Sandoval Coronado Página 20

Page 21: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor.

Busca la carpeta public_html y sube tus archivos allí.

3.6. Propiedades del documentoEs conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.Puede definirse el formato de cada una de las páginas a través del cuadro de diálogo Propiedades de la página.Este cuadro se puede abrir de tres modos diferentes:Pulsar la combinación de teclas Ctrl + J.Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.Se abrirá el cuadro de diálogo siguiente:

Las propiedades están organizadas en categorías.

En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: Fuente de página: es el tipo de letra  que le aplicaremos al texto. Tamaño: es el tamaño de la fuente que aplicaremos al texto. Color del texto: es el color de la fuente. Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo

se mostrará en el caso de no haber establecido ninguna imagen de fondo. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se

muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según 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 opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.

Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.

Prof. Joseph Sandoval Coronado Página 21

Page 22: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ En la categoría 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 según 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. Vínculos: es el color que mostrará el texto de los vínculos. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el

mismo. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde

empieza el contenido de la página y la ventana del navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.

En la categoría Vínculos (CSS) encontramos las propiedades:

Prof. Joseph Sandoval Coronado Página 22

Page 23: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo. Tamaño: es el tamaño del texto de los vínculos. Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto

normal y los vínculos que sirven de enlace a otras páginas. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos

vínculos ya han sido visitados o no. Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del

vínculo. Vínculos activos: es el color de los vínculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto

aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.

Prof. Joseph Sandoval Coronado Página 23

Page 24: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

En la categoría 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 tamaño y color que queremos aplicar a cada tipo de encabezado.

En la categoría Título/Codificación encontramos la propiedad: Título: es el título del documento, que aparecerá en la barra de título del navegador y de la

ventana de documento de Dreamweaver.

En la categoría Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se

mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.

Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el navegador.

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.

Prof. Joseph Sandoval Coronado Página 24

Page 25: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos a través del botón   de la parte superior de la paleta.

Los colores pueden asignarse a través de los botones:   .

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también 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 página, 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 número hexadecimal del color en el recuadro blanco.

Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con

valor #39F, el botón quedaría 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 números hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).

El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su intensidad total.

Para indicar que nos referimos a un color, utilizamos el símbolo # al principio del código.

Por tanto, podemos definir un color cómo #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el último al verde.

En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, se interpreta

que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.

Prof. Joseph Sandoval Coronado Página 25

Page 26: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 4: EL TEXTO: PROPIEDADES Y FORMATOA lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.

4.1. Los colores

Características del texto: Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

Comenzamos viendo las propiedades HTML

Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.

Formato: 

Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado 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 predeterminado se respetará que hayan varios espacios en lugar de solo uno. El texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo: El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.

Prof. Joseph Sandoval Coronado Página 26

Page 27: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Lista: Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.

Sangría: Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.

Accediendo a las propiedades CSS.Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación de páginas web.Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS5 nos proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en cascada.

Regla de destino: Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.

Editar regla: Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.

Panel CSS: Este botón abre el panel CSS si no lo tuviéramos abierto.

Prof. Joseph Sandoval Coronado Página 27

Page 28: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

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 línea.

Alineación: A través de estos botones es posible establecer la alineación 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 párrafo.

Tamaño: Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...

Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.

4.2. ListasEs posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.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 opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón   , mientras que la lista numerada

(ordenada) se selecciona a través del botón .Ejemplo de lista numerada (ordenada):1. Preparar la mochila

1.1.Sacar los libros de ese día1.2. Introducir los libros del día siguiente

2. Ponerme el pijama3. Lavarme los dientes4. Poner el despertador

Ejemplo de lista con viñetas (sin ordenar):

Prof. Joseph Sandoval Coronado Página 28

Page 29: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ o Perro

o Gato

o Aves

Canario Loro

o Hámster

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario añadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la lista anidada.

A través del menú Formato, opción 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 algún lugar de la lista para que se active este submenú.

En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso de las listas ordenadas, el número por el que comenzará el recuento.

4.3. Caracteres especialesA veces necesitarás introducir caracteres especiales en tus páginas. Debido al modo editor de Diseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizando la opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemos en el teclado.Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imagen inferior.

Prof. Joseph Sandoval Coronado Página 29

Page 30: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de los caracteres más utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos sólo selecciónalo en la lista y aparecerá en la vista de Diseño.Si el carácter que buscas no se encontrase allí, haz clic en Otro... y se abrirá una ventana desde donde podrás seleccionar caracteres entre una lista bastante más amplia:

4.4. Estilos CSS. Introducción

Los estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.

También permiten, como veremos más adelante, definir prácticamente cualquier propiedad de los elementos que contendrán nuestra web.

Prof. Joseph Sandoval Coronado Página 30

Page 31: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>, <h2>...), párrafos

(<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de esta etiqueta en el ámbito del estilo.

También 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 línea (afectará sólo al elemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio si la guardamos en un archivo CSS.

Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto del contenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automáticamente.

4.5. Crear un estilo personalizado

Con Dreamweaver CS5, las características que apliquemos a un texto a través del Inspector de

propiedades CSS crearán automáticamente estilos CSS. Aunque tenemos que decidir a qué elementos afecta.Veámoslo:

Crear un estilo en línea.Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. 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 línea>.

A continuación, definimos las propiedades del estilo.Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa etiqueta concreta.

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

Prof. Joseph Sandoval Coronado Página 31

Page 32: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ 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 sólo puede afectar a un elemento en cada página, 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

párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.

Nombre del selector: esta opción 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.

Prof. Joseph Sandoval Coronado Página 32

Page 33: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en un nuevo archivo .css.

Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de la página, por lo que sólo estará disponible dentro de ésta.

Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que las páginas.

Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se añadirán ella.

Prof. Joseph Sandoval Coronado Página 33

Page 34: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

4.6. Definir o editar un estiloUna vez creado, tenemos que definir las propiedades que formarán el estilo.

Para ello, encontramos las opciones básicas 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 añadiendo a la lista.

Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Se abrirá la

ventana Definición de regla.

Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos más adelante.

Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiar varias propiedades.Para pequeños 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

botón Panel CSS.

Prof. Joseph Sandoval Coronado Página 34

Page 35: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

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.

También 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 botón derecho sobre

el estilo y seleccionamos la opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el nuevo nombre como la imagen inferior.

4.7. Aplicar un estiloEn 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 serán los estilos que definamos como clases. Veamos cómo hacerlo:

En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el punto de inserción,

pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga el texto (por ejemplo el párrafo).

En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creado por nosotros

de la lista que aparece al desplegar el cuadro Regla de Destino. Desde las propiedades HTML también

podemos hacerlo, utilizando el desplegable Clase.

Prof. Joseph Sandoval Coronado Página 35

Page 36: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

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 opción 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.

4.8. Hojas de estilos

Exportar estilos

Prof. Joseph Sandoval Coronado Página 36

Page 37: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Es frecuente que comencemos creando los estilos en la propia página, y después al ver que los necesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nos permite exportar estos estilos fácilmente.

Utilizamos el panel Estilos CSS (Mayús + F11). En este caso nos será más útil la vista Todo. Agrupados en <style> encontramos los estilos creados en la página.

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 añadirán a ella.

Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas. Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma carpeta que las páginas.

Los estilos seleccionados se quitarán de la página 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 página, 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 extensión .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.

Prof. Joseph Sandoval Coronado Página 37

Page 38: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Prof. Joseph Sandoval Coronado Página 38

Page 39: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 5: HIPERENLACES

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

5.1. Introducción Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Cuando creemos un enlace, lo que realmente haremos será crear una etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás observarlo en la barra de estado:

5.2. Tipos de referenciaExisten diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.

Referencia absoluta:Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo http://.Por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/seccion2/pagina1.html.La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, y será válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria si pretendemos enlazar a archivos fuera de nuestro sitio (enlaces externos).

  Referencia relativa al documento (por defecto):

La ubicación del archivo enlazado se toma en relación con la ubicación de la página. Es decir, partimos de la carpeta en la que se encuentra el documento.Si queremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su nombre. Por ejemplo, pagina2.htm.

Si está en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo imagenes/miimagen.gif.Si queremos referirnos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../

Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.Esta opción depende de la ubicación del archivo, y pueden no funcionar correctamente si alteramos la estructura de carpetas.Esta es la opción por defecto de Dreamweaver, y es la forma más habitual para enlazar archivos dentro del sitio.

Prof. Joseph Sandoval Coronado Página 39

Page 40: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Referencia relativa al sitio:Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomando como origen la carpeta raíz del sitio.

Para indicar la ruta relativa al sitio, precedemos la ruta de enlace por la barra /.En el ejemplo anterior si tuviésemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.

Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaría independientemente de su ubicación.Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor de pruebas como veremos más adelante, ya que Windows interpretará como raíz la raíz del disco duro. 

Marcadores o Puntos de fijación:Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa o absoluta) separados por una almohadilla (#).

El formato sería nombre_de_documento.extension#nombre_de_punto.Si el punto de fijación está en la propia página, basta con indicar únicamente el punto en el enlace, por ejemplo #apartado2

Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje con nombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde el Inspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidos en la página. Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos.

5.3. Crear enlacesLa forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector HTML.

Por ejemplo, en la siguiente imagen hay un enlace a www.aulaclic.es, que al ser un archivo externo es de referencia absoluta, por eso contiene http://

Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #. Veremos su utilidad más adelante. 

Prof. Joseph Sandoval Coronado Página 40

Page 41: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.

Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.

Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.

Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te creará un enlace relativo al documento.

Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se tabularán por orden de aparición.

5.4. Destino del enlaceEl destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar

dependiendo de si el documento está basado en marcos.

Puede especificarse en el inspector de propiedades HTML a través de Destino, o en la ventana que

aparece a través del menú Insertar, opción Hipervínculo.

_blank:Abre el documento vinculado en una nueva ventana o pestaña del navegador.

Prof. Joseph Sandoval Coronado Página 41

Page 42: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

_parent:Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.

_self:Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.

_top:Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos.No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya

que se volverán a ver en el tema de Marcos.

Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada para abrirlo en

la misma ventana, y emplearemos _blank para abrir ventanas nuevas.

Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una ventana nueva, basta con hacer clic con la ruedecilla del ratón.

5.5. Formato del enlaceEn general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de sustitución (cuando el cursor está sobre el vínculo).

Aquí tienes dos vínculos de ejemplo:www.aulaclic.es   www.elpais.com

Si has visitado alguno, verás que sale en un tono morado, si no sale en azul.

Recuerda que como todo en nuestra página, los vínculos tienen un formato por defecto, pero es totalmente

personalizable por CSS. Para ello, basta con crear una Regla de estilo para la etiqueta a.

Si queremos distinguir entre los tres estados del enlace, emplearemos los siguientes selectores:

a:link para los enlaces normales.

a:visited para los enlaces visitados.

a:active para los enlaces activos.

a:hover para los enlaces con el cursor encima.

Aunque recuerda que en las propiedades del documento teníamos la categoría Vínculos CSS que nos permite establecer estos valores.

 Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Prof. Joseph Sandoval Coronado Página 42

Page 43: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Aquí tenemos dos vínculos en una imagen:

Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Este es el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondo transparente.

Veamos cómo quitarlo utilizando CSS.

En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, y

pulsamos Editar regla.

En Tipo de selector, elegimos Compuesto, y en Nombre de selector escribimos a img, es decir, imágenes

que estén dentro de una etiqueta a (de enlace).

Se abrirá la ventana Definición de regla para a img:

En ella, seleccionamos la categoría Borde, y en Style seleccionamos none. Pulsamos Aceptar.

Esta regla hará que las imágenes con enlace se muestren sin borde. Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.

Prof. Joseph Sandoval Coronado Página 43

Page 44: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

5.6. Enlace a correo electrónicoEs posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando se desea que los visitantes de la web puedan contactar con nosotros.

La sintaxis del vínculo en este caso es mailto:direccióndecorreo.

Puede definirse el vínculo a través de Vínculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados.

También es posible a través del menú Insertar, opción Vínculo de correo electrónico.

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo.

Lo que hace esta opción es abrir el cliente de correo predeterminado del usuario (Outlook, Firebird...). Por lo que puede no ser práctica si el usuario no lo tiene, se conecta en un ordenador público, o emplea el correo web directamente.

Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá una página dinámica como veremos a lo largo del curso. Otra opción sería mostrar nuestra dirección de correo, para que el usuario pueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejor hacerlo como una imagen, o escribiéndola de forma que la pueda entender un humano (por

ejemplo micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearán para el envío de correo no deseado.

Prof. Joseph Sandoval Coronado Página 44

Page 45: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 6: IMÁGENES

En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear

algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.

6.1. Introducción Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

6.2. Insertar una imagen

Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo

acceder con la combinación de teclas Ctrl + Alt + I.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar también sus imágenes.

Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.

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 raíz del sitio o relativa al documento.

Por ejemplo, imagina que dentro de la carpeta raíz 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.

Prof. Joseph Sandoval Coronado Página 45

Page 46: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

En el caso de insertar la imagen como relativa al Documento la ruta sería: imagenes/aulaclic.jpgMientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería: /imagenes/aulaclic.jpg

Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio. 

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

 Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, en Dreamweaver

aparecerá así   indicando que el enlace al archivo está roto.

En ese caso, la imagen que aparecerá en el navegador será similar a ésta: .

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, que explicaremos a continuación.

6.3. Propiedades de una imagen

Cuando seleccionamos una imagen el Inspector de propiedades muestra está apariencia:

Desde aquí podremos establecer distintos atributos a la imagen:

Ancho y Alto son las dimensiones de la imagen. Dreamweaver las pondrá directamente.

Como pasaba con el texto, podemos crear un hiperenlace en la imagen escribiendo la dirección en el

campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona

de la imagen tenga un vínculo distinto, creando un Mapa de imagen.

En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el

formato title="Texto a mostrar". Internet Explorer muestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

Prof. Joseph Sandoval Coronado Página 46

Page 47: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado, la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos están cayendo en desuso y no deberían de ser empleados. No obstante, los explicaremos para que entiendas su función:

Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border.

Puedes seleccionar su alineación con respecto al texto desde el campo Alinear. En CSS, existe el

atributo vertical-align.

Por último las opciones Espacio V y Espacio H te serán útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente

entre la imagen y el texto. En CSS, podemos hacerlo con el margin.

Además, encontramos algunos controles de Edición: El botón   nos permite optimizar la imagen desde

Dreamweaver, cambiando el formato o creando transparencias. Por otro lado, el icono   nos permite editar la imagen con un programa externo, como Photoshop o Paint.

6.4. Cambiar el tamaño de una imagenDentro de Dreamweaver puede modificarse el tamaño de las imágenes.

Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamaño original.Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop, etc..Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:

Tamaño original

 

Con tamaño modificado

El resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el que aplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.

Existen dos formas de modificar el tamaño.

Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.

Prof. Joseph Sandoval Coronado Página 47

Page 48: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.

Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre

ella. 

Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchura y altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarse el archivo completo con su tamaño original.

Por ejemplo, si tenemos una fotografía de nuestra cámara de fotos, de un tamaño grande (por ejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) esta sería una mala solución, porque el usuario se estaría descargando el archivo completo, y no una miniatura real que ocuparía mucho menos tamaño.

  Dreamweaver también nos permite cambiar el tamaño real del archivo de imagen.

Para hacerlo, seleccionamos la imagen, y pulsamos en el icono   del Inspector de propiedades. Se

abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en la pestaña Archivo.

En la sección escala, podemos establecer un porcentaje del tamaño original.

El nuevo tamaño se mostrará en An (ancho) y Al (alto). También podemos introducir directamente el nuevo tamaño.

Incluso podemos recortar un área de la imagen, seleccionando Exportar área, y seleccionando el área de la imagen en la previsualización de la derecha (no se ve en la imagen anterior).

Prof. Joseph Sandoval Coronado Página 48

Page 49: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Cuando lo tengamos, pulsamos Aceptar.

En este caso, si hemos alterado físicamente el archivo.

El resultado es bastante bueno, aunque siempre será mejor con herramientas especializadas, como Photoshop o GIMP.

6.5. Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipo de imagen suele utilizarse en los menús o en los botones para desplazarnos a través de distintas páginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imágenes

Hemos creado el siguiente rollover. Sitúa el cursor sobre él para ver qué es lo que ocurre.

Para insertar un rollover hay que dirigirse al menú Insertar, Objetos de Imagen, a la opción Imagen de sustitución. En la nueva ventana hay que especificar la imagen original y la de sustitución.

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el que aparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puede hacerse a través del

campo Alt del inspector de propiedades de la imagen seleccionada.

 Existe una forma parecida de crear estos efectos utilizando CSS, y de hecho son más utilizados. Básicamente consiste en cambiar la imagen de fondo de un elemento

Prof. Joseph Sandoval Coronado Página 49

Page 50: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

6.6. Objetos inteligentesLos objetos inteligentes son imágenes que obtenemos directamente desde un archivo de Photoshop (.psd).Al insertarlo, lo hacemos igual que con cualquier imagen, eligiendo el archivo de Photoshop.

Pero una archivo .psd no es un archivo que podamos mostrar en una página web. Por eso, lo que hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweaver nos pedirá que

elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismas opciones que encontrábamos al

pulsar el botón   del Inspector de propiedades.

¿Qué ventajas obtenemos con todo esto? Si observas la esquina superior izquierda del objeto inteligente

encontrarás un icono como éste . Las dos flechas verdes indican que el archivo está sincronizado, es decir, la imagen está generada a partir del último archivo de Photoshop.

Pero puede que en cualquier momento queramos modificar la imagen. Podemos hacerlo abriendo el

archivo .psd, o pulsando el icono   del Inspector de propiedades, que abrirá el archivo fuente de Photoshop.

Tras guardar los cambios, vemos que el icono de la imagen en Dreamweaver ha cambiado, mostrando ahora

una flecha roja:   . Esto indica que la imagen que estamos viendo en Dreamweaver (jpg, psd, png) no es la misma que el original (psd) ya que se ha modificado. Podemos volverla a generar pulsando el

icono   Actualizar desde origen.

 Por lo tanto, los objetos inteligentes son útiles para imágenes que tengamos que editar frecuentemente.

Prof. Joseph Sandoval Coronado Página 50

Page 51: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

UNIDAD 7: TABLAS

En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.

7.1. Introducción Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.La finalidad de las tablas es presentar una serie de datos de forma clara y organizada, dividiéndolos en filas y columnas.Hasta hace poco, y todavía hoy es fácil encontrar diseños web basados en tablas. Esto es debido a la facilidad que nos ofrecen estos elementos para organizar contenidos y repartir el espacio. No obstante, esta no es una práctica recomendable, ya que las tablas no fueron pensadas para ello, y si no están bien anidadas pueden ocasionar problemas al analizar nuestra web con herramientas automáticas, como los bots que indexan el contenido para los buscadores. Para maquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.

7.2. Insertar una tablaPara insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.

En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla.

Prof. Joseph Sandoval Coronado Página 51

Page 52: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se

visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje de la página o del elemento contenedor) y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.

Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o en blanco, la tabla no mostrará borde.

Relleno de celda (cellpadding) indica la distancia entre el contenido de las celdas y los bordes de éstas.

Espacio entre celdas (cellspacing) indica la distancia entre las celdas de la tabla.

También se puede establecer si se quiere un encabezado para la tabla, por ejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr el mismo diseño con celdas normales y estilos CSS, es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.En Resumen: podemos indicar una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.

7.3. Rellenar las celdasLas celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.

   

imagen y texto

    COLUMNA

   Texto dentro de una celda

   

   CELDA

   

FILA  

Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el punto de inserción dentro de la celda deseada haciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.

Prof. Joseph Sandoval Coronado Página 52

Page 53: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Si queremos insertar elementos ya existentes en la celdas, tenemos que crear primero la tabla vacía, y después seleccionar y arrastrar los elementos a insertar sobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", como hacíamos, por ejemplo, con las listas.

 7.4. Seleccionar elementos de una tabla

Existen varias formas de seleccionar una tabla. Una de ellas es a través del menú Modificar estando el punto de inserción en la tabla, o desplegando el menú contextual de la tabla al pulsar con el botón derecho sobre ella. En ambos casos aparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionar tabla.

También es posible seleccionar una pulsando con el ratón sobre el borde exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la ventana de documento.

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ús desplegables (menú de encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten acceder rápidamente a determinados comandos relacionados con la tabla.

Prof. Joseph Sandoval Coronado Página 53

Page 54: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o también desplegando de la barra de menús, el menú Ver → Ayudas visuales → Anchos de tabla. De la misma forma se desactiva su visualización.

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 números, el primer número corresponde al ancho especificado en las propiedades de la tabla o columna y el segundo número es el ancho el ancho visual que aparece en la vista de diseño; por ejemplo en la tabla anterior la primera columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles pero al contener una imagen que necesita más espacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna tal como aparece en la pantalla).

Cuando ocurren estas diferencias podemos hacer que en el código (propiedades) se cambie el ancho por el real, para ello sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable de encabezado de tabla.

En este menú vemos que también tenemos las opciones para Borrar o Igualar los anchos.Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.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 más te gusta. Estas son las formas de selección: Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de

anchos) esto sólo es válido para seleccionar una columna. Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente. También 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.

En cualquier momento, 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 celda.

Para seleccionar celdas: Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón 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.

7.5. Formato de tablaLas propiedades de la tabla se especifican a través de su inspector de propiedades. En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el ancho, los podemos especificar mediante CSS.

Prof. Joseph Sandoval Coronado Página 54

Page 55: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

A través 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 de la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la celda.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 nos permite alternar entre las propiedades HTML, que en este caso sirven para especificar las propiedades del texto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para definir los estilos.La parte inferior sirve para especificar valores propios de la celda, como puede ser el color o imagen de fondo (que es preferible definir con CSS), la alineación del contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.) (en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc. 

7.6. Formato CSSComo cualquier elemento, podemos cambiar el aspecto de la tabla definiendo propiedades CSS.

Los Selectores:Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla? Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de inserción en una celda:

Vemos que con el selector table nos referimos a la tabla completa. Con el selector tr hacemos referencia a las filas y con el selector td hacemos referencia a las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el selector th. Observa que no hay un selector para referenciar a las columnas enteras, aunque sí existe un método empleando etiquetas <col />, es más avanzado y no lo veremos en este curso.Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerda que podemos emplear selectores compuestos. Así para referirnos a las filas de una tabla con la clase miclase, lo haremos con el selector .miclase tr, y emplearemos .miclase td para referirnos sus celdas. Nota: Si al crear una página definimos las propiedades del texto empleando las Propiedades de la página, Dreamweaver crea una regla con el selector body,td,th. Es decir, aplica el mismo estilo a la página, a las celdas y a los encabezados. Esto hará que por ejemplo, si cambiamos la fuente de la tabla, el cambio no se aplique ya que prevalece la generada por Dreamweaver, por ser más concreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor es editar el selector dejándolo sólo como body. Recuerda que para editar un selector, hacemos clic derecho sobre la regla en el panel Estilos CSS, y elegimos Editar selector en el menú contextual. 

Prof. Joseph Sandoval Coronado Página 55

Page 56: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

Propiedades:

Podemos aplicar la mayoría de propiedades que ya hemos empleado a las tablas, filas y columnas: fuente, tamaño, color, imagen de fondo.Existen algunas propiedades CSS específicas de las tablas, como el borde colapsado. Dreamweaver no nos permite asignar estos estilos con los asistentes, así que los veremos más adelante.Un estilo muy útil es el que nos permite centrar la tabla en la página. Para ello, debemos editar los márgenes izquierdo y derecho (categoría Cuadro), estableciendo el valor auto para ambos.Otro aspecto que facilita ver los datos en la tabla son las filas alternas. Para hacerlo, no tenemos más que crear una clase que, por ejemplo, cambie el color de fondo, y aplicarla a filas alternas.

7.7. Cambiar tamaño de tabla y celdas:Como ya sabes, el Ancho de una tabla puede ser definido como Píxeles o como Porcentaje. El tamaño de la tabla a través del inspector de propiedades estará especificado por los valores de An (anchura) y Al (altura). Normalmente sólo se especifica la anchura, no la altura.

Los valores An y Al de una celda siempre están en Píxeles. No es necesario especificar ninguno de estos dos valores para las celdas, a no ser que se desee que se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido o al tamaño de la ventana.No solo puede establecerse el tamaño de las tablas y de las celdas a través del inspector de propiedades. También es posible hacerlo manteniendo pulsado el ratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.

7.8. Añadir y eliminar filas y columnas:Existen varias formas de añadir y eliminar filas y columnas a una tabla.Lo primero que hay que hacer es, estando el cursor en una celda o seleccionando varias, desplegar el menú contextual de la tabla al pulsar con el botón derecho sobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opción Tabla.Según las celdas seleccionadas, algunas de las opciones de Tabla se podrán utilizar mientras que otras no.Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertar fila o Insertar columna.La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras que la columna se inserta a su izquierda.

Prof. Joseph Sandoval Coronado Página 56

Page 57: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

También tenemos una opción más completa, la opción Insertar filas o columnas.... Al seleccionarla aparece una nueva ventana, donde es posible determinar si lo que se insertarán serán filas o columnas, el número de ellas que se insertará, y la posición donde se insertarán.

Para eliminar una fila o una columna, hay que posicionar el cursor en la fila o columna a eliminar y elegir la opción Eliminar fila o Eliminar columna del menú Tabla.

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr).

7.9. Anidar, dividir y combinar celdas: Es posible insertar tablas dentro de las celdas de otras tablas. A esto se le llama anidar tablas.

A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primera celda de una tabla se ha insertado otra tabla.

   

    

   

Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieres insertar la nueva tabla e insertarla como ya hemos visto.

Prof. Joseph Sandoval Coronado Página 57

Page 58: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de

separación entre una celda y otra ya que serán una sola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir el título de la tabla, normalmente más ancho. En este caso habría que combinar todas las celdas de la primera fila en una sola.

Mientras que dividir celdas consiste en partir en dos una celda.Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.

Si se seleccionan varias celdas pueden combinarse pulsando sobre el botón   del inspector de propiedades (lo encontrarás en la parte inferior izquierda del panel Propiedades, o pulsando sobre la opción Combinar celdas de la opción Tabla, que como ya has visto puedes dirigirte a ella a través del menú contextual de la tabla y a través del menú Modificar.

Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuya combinación pueda dar como resultado otra celda, es decir, que su combinación dé como resultado un rectángulo. No podemos combinarlas para formar una "L". Por ejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas 1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.

1 2

3 4

Podemos combinar celdas en vertical y horizontal:

 

        

   

             

         

  

    

     

         

               

 

Para dividir una celda hay que pulsar sobre el botón   del inspector de propiedades, o sobre la

opción Dividir celda de la opción Tabla.

En ambos casos, aparece una ventana como ésta, en la que hay que especificar si la celda se va a dividir en filas o columnas, y el número de éstas.

Prof. Joseph Sandoval Coronado Página 58

Page 59: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ

7.10. Modos de tabla:A la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos de visualización. Nosotros hemos trabajado en todo el tema con el modo estándar, y vamos a seguir trabajando con él, pero se puede pasar a los otros modos a través del menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entre Modo estándar o el Modo de tablas expandidas.

El Modo de tablas expandidas añade temporalmente relleno y espaciado de celda a las tablas de un documento y aumenta los bordes de las tablas para facilitar la edición. Este modo se puede utilizar para seleccionar elementos de las tablas o colocar el punto de inserción de forma precisa e introducir contenido pero en este modo no vemos la página como quedará exactamente.

En este curso nos limitaremos al modo estándar, aunque puedes emplear el Modo de tablas expandidas cuando lo creas útil.

7.11. Adaptar webs a distintas resoluciones:Siempre que se crea una página web hay que tener en cuenta que va a ser visitada por usuarios con monitores de distintos tamaños y con distintas resoluciones. Desde las pequeñas pantallas de los portátiles de bajo coste, hasta monitores panorámicos en alta resolución.

Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en nuestra página:

el diseño fijo y el diseño elástico.

El diseño fijo especifica las medidas en píxeles. Por lo que el contenido siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeños. Un ejemplo de este diseño sería la home de aulaClic.

El diseño elástico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseños elaborados, es más complicado hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseño es la página de este curso.

Prof. Joseph Sandoval Coronado Página 59

Page 60: MANUAL DREAMWEAVER CS5.docx

CENTRO DE EDUCACIÓN TÉCNICO PRODUCTIVACETPRO

“JESÚS NAZARENO CAUTIVO” – MONSEFÚ Como recordarás, el tamaño de las tablas puede ser definido en píxeles o en porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del mismo modo independientemente del tamaño de la ventana del navegador. En cambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño del elemento que la contiene, lo cual implica que el contenido de la tabla se puede descuadrar.

Si modificas el tamaño de la ventana, verás que la tabla es siempre del mismo tamaño. Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría a visualizar la página en un monitor grande con alta resolución), a los lados de la tabla aparecerá un gran espacio vacío.

Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana del navegador apreciarás claramente cómo el contenido de las tablas se descuadra, quedando demasiado estirado, lo que dificulta su lectura.

En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores con alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes salvar el inconveniente del descuadre de la página y así definir páginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor de más grande.No solo puede establecerse el tamaño de la tabla, también es posible establecer el tamaño de las celdas.

El tamaño de la celda a través 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 están en Píxeles. En la imagen anterior, la celda no tiene una anchura concreta, se ajusta al contenido. Si la queremos exactamente de 200 píxeles, basta con introducir 200px en An. Para que, por ejemplo, la anchura fuera del 25 por ciento de la tabla, en An. Habría que escribir 25%.

Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta que contiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado a la izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar la página en monitores de distintos tamaños y con distintas resoluciones, la apariencia sea bastante similar, o al menos que la distribución del contenido de la tabla no se vea muy afectado por el cambio de tamaño de la ventana del navegador.

Prof. Joseph Sandoval Coronado Página 60