Manual Dreamweaver
Upcoming SlideShare
Loading in...5
×
 

Manual Dreamweaver

on

  • 1,949 views

Conceptos Básicos de Dreamweaver

Conceptos Básicos de Dreamweaver

Statistics

Views

Total Views
1,949
Views on SlideShare
1,938
Embed Views
11

Actions

Likes
1
Downloads
40
Comments
0

3 Embeds 11

http://diswebunach.blogspot.com 5
http://www.diswebunach.blogspot.com 4
http://localhost 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Manual Dreamweaver Manual Dreamweaver Document Transcript

    • Unidad 1. CONCEPTOS BÁSICOS DE DREAMWEAVER CS41.1. Qué es Dreamweaver CS4Dreamweaver CS4 es un software fácil de usar que permite crear páginas web profesionales.Las funciones de edición visual de Dreamweaver CS4 permiten agregar rápidamente diseño yfuncionalidad 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 Java Script,etc.., de una forma muy sencilla y visual.Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar conmapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.1.2. Novedades de Dreamweaver CS4En este punto comentaremos las características que aporta esta nueva versión sobre la anterior.Nueva interfaz de usuario. Dreamweaver CS4 presenta una nueva interfaz que permitecambiar fácilmente de espacio de trabajo y adaptar los paneles de forma rápida y cómoda. Estanueva interfaz es muy parecida a los demás programas de Adobe, como Photoshop, Illustrator,etc. Existen distintos espacios de trabajo adecuados para cada ocasión (clásico, programador,diseñador, etc.) pero también tenemos la posibilidad de crear el nuestro propio de forma muysencilla.Vista en vivo. La Vista en vivo nos permite trabajar con una vista real, tal y como veríamos lapágina en un navegador. Si hemos incluido elementos interactivos en nuestra página, comomenús desplegables, menús tipo acordeón, widgets, etc, podremos interactuar con ellos en lavista en vivo, de la misma forma que lo haríamos en un navegador.
    • Navegador de código. La función de Navegador de código muestra las fuentes de código queafectan a la selección que tengamos activa, pueden ser CSS (hojas de estilos en cascada),funciones JavaScript externas, plantillas de Dreamweaver, archivos de origen de iFrame, etc.La nueva barra de Archivos relacionados. Muestra todos los archivos que de una forma u otracontribuyen al diseño final de nuestra página, como hojas de estilo css, archivos javascript, etc.Mediante esta nueva utilidad podemos pasar de un archivo a otro cómodamente y tener unavisión mucho más clara de todos los archivos con los que estamos trabajando en nuestro sitioweb.Inspector de propiedades CSS. El hasta ahora Inspector de propiedades, queda dividido enpropiedades HTML (el que conocíamos de otras versiones) y CSS. Éste último nos permite creary editar nuestros estilos de forma cómoda y sencilla.
    • 1.3. Editar páginas webCualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear losdocumentos con la extensión HTML o HTM, e incluir como contenido del documento el códigoHTML 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 uneditor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de loselementos de la página, al mismo tiempo que es más complicado crear una aparienciaprofesional 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 alprincipio, 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, yque destaca por su sencillez y por las numerosas funciones que incluye, es AdobeDreamweaver.Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como puedenser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de loscuales tienen la ventaja de ser gratuitos.1.4. Cómo tener una página en InternetPara poder poner una página web en Internet, es necesario contratar a alguna empresa conservidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El preciopor 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: pocoespacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay quetener también en cuenta que estas empresas deben generar ingresos de alguna forma, por loque se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que nopodremos negarnos a incluir en ellas.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 inicio.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 dominioconsiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido enInternet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posibleregistrar 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 nuestrapágina no será más que un archivo dentro de la de la empresa contratada.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ásque 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 tuservidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal ycomo aparecen en tu disco duro, respetando el nombre de los archivos y la organizaciónde las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que nofuncionarán.Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, niespacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de queel servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojesen é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 entremayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpgdeberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscandofallos.
    • 1.5. Arrancar y cerrar Dreamweaver CS4Veamos las dos formas básicas de arrancar Dreamweaver CS4.Desde el botón Inicio (Windows Vista) situado, normalmente, en la esquina inferiorizquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega unmenú. Al colocar el cursor sobre Todos los programas aparece otra lista con los programas quehay instalados en tu ordenador, buscar Adobe Dreamweaver CS4 y haz clic sobre él paraarrancar el programa.Desde el icono de Dreamweaver CS4 del Escritorio .Para cerrar Dreamweaver CS4, podemos utilizar cualquiera de las siguientes operaciones:1. Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquierventana de Windows.2. Pulsar la combinación de teclas Alt + F4.3. 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 documentosPara abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:1. Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).2. Pulsar la combinación de teclas Ctrl + O.3. Hacer clic sobre el menú Archivo y elegir la opción Abrir.4. Hacer doble clic sobre el archivo en la ventana del sitio.5. Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opciónAbrir con → Adobe Dreamweaver CS4.Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones:1. Hacer clic en el botón nuevo de la barra de herramientas estándar (si estávisible).2. Pulsar la combinación de teclas Ctrl + N.3. 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áginaen blanco.En la segunda columna seleccionamos HTML, observamos que hay muchos diseños ya creadosque podemos elegir, para nuestro primer ejemplo elegimos en Diseño ninguno. A continuaciónpulsamos el botón Crear.Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones.1. Hacer clic en el botón Guardar de la barra de herramientas estándar.2. Pulsar la combinación de teclas Ctrl + S.3. 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 convarios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Paraguardar todo puedes realizar cualquiera de las siguientes operaciones.1. Hacer clic en el botón Guardar todo de la barra de herramientas estándar.2. 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 encada 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. Porello es conveniente que al principio no utilices esta opción, al menos hasta que te hayashabituado a manejar el programa. De todas formas, observa que cuando hay cambios singuardar aparece un * tras el nombre del documento.1.7. Mi primera páginaVamos a crear una página web sencilla, con varios estilos de texto, una imagen y un enlace aotra página. Crear esta página solo te llevará unos pocos minutos, y sabrás cómo trabajar conlos elementos básicos con los que están hechas la mayoría de las páginas web.Lo primero que hay que hacer es abrir Dreamweaver. Ya hemos visto como puede hacerse.Abre un documento nuevo y selecciona la Categoría Página básica, HTML, en la columnaDiseño dejamos la opción por defecto: <ninguno>.Seguidamente, hacer clic sobre la zona blanca del documento y escribir lo siguiente:Una vez introducido el texto, vamos a modificar el título y el color de fondo del documento.www.espoch.edu.ec
    • Para ello podemos hacer clic sobre el menú Modificar y elegir la opción Propiedades de lapágina.Entonces se abrirá una ventana como la que aparece a continuación:En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasará a ser decolor 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 carpetadonde estamos creando nuestras páginas, habitualmente en una subcarpeta dedicada a lasimágenes.Muchas de las imágenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic conel botón derecho del ratón sobre la imagen que queremos traer de Internet, se abre una ventanacon una opción similar a Guardar imagen como... (dependiendo del navegador que utilicemos)permite grabar dicha imagen en un fichero de nuestro disco duro. Ten en cuenta que si piensaspublicar 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 queestamos 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, situamosel cursor al final de la segunda línea y creamos un salto de línea (tecla Enter). Después nosdirigimos 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íasguardado, seleccionarla y pulsar Aceptar.Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector depropiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene elsiguiente 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 elformato 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 iconoCSS a la izquierda.Mediante el inspector de propiedades en Dreamweaver CS4 accedemos tanto a las propiedadesde CSS como a las propiedades de HTML.Podemos decir que en una página web, HTML se encarga de estructurar el contenido, lainformació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 mediantehojas de estilos en cascada. Los estilos CSS ofrecen un mayor control sobre el diseño de lapágina Web y reducen el tamaño del archivo.Selecciona la primera línea. En Regla de destino selecciona Estilo en línea, para aplicar elformato 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:
    • Observa que hemos centrado el texto pulsando en el botón .Selecciona la segunda línea de texto, y seleccionando como antes < estilo en línea >, marca losbotones para ponerlo en negrita y cursiva respectivamente.Vamos a centrar también la imagen. Para ellos selecciónala. Lo que hay que centrar es elcontenido del párrafo que la contiene. Para hacerlo, en la barra de estado, encima de laspropiedades nos aparece la jerarquía de etiquetas. Haz clic sobre p.Ahora, 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 dePropiedades 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. Porejemplo, lo hemos llamado miprimerapagina.htm, y la hemos guardado en la misma carpetaque la imagen descargada.Ahora, puedes ver cómo se ve en tu navegador pulsando la tecla F12.
    • Unidad 2. EL ENTORNO DE DREAMWEAVER CS4Vamos a ver cuáles son los elementos básicos de Dreamweaver CS4, la pantalla, las barras, lospaneles, 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 momentono sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposiciónde empezar a crear páginas web.2.1. La pantalla inicialAl arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentesfundamentales. Así conoceremos los nombres de los diferentes. La pantalla que se muestra acontinuación (y en general todas las que veremos) puede no coincidir exactamente con la queves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean encada momento y dónde, como veremos más adelante.
    • 2.2. Las barrasLa barra de la aplicación.La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventanamaximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparándos 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 debúsquedas para obtener ayuda on line.Los botones propios de la aplicación, que aparecen junto al icono, nos permiten (de derecha aizquierda) cambiar entre la vista de diseño o código, acceder a las extensiones que se puedenañadir, o al administrador de sitios, que ya veremos.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) quepodemos 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 diferenteselementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver sonaccesibles 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 tienecambios sin guardar. Podemos cerrar cada documento clicando en el aspa, o acceder a otrasacciones haciendo clic con el botón derecho, como Cerrar otros archivos.Dreamweaver CS4 añade una novedad. Debajo de las pestañas encontramos los archivos a queutiliza nuestra página, como la hoja de estilos, archivos JavaScript, etc... pudiendo acceder aellos 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 elmismo.A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetascompletas. Siguiendo hacia la derecha encontramos las herramientas de Selección, Mano (paradesplazarse) y Zoom. Y otros datos como el tamaño de la ventana, el tamaño de la página o sucodificación.Hasta aquí las barras que siempre veremos en la aplicación. A parte, existen otras que podemosver u ocultar desde el menú Ver → Barras de herramientas.
    • La barra de herramientas estándar.La barra de herramientas estándar contiene iconos para realizar las acciones más habituales delmenú Archivo y Edición. De izquierda a derecha: Nuevo archivo, Abrir, explorar con AdobeBridge, Guardar, Guardar todo, Imprimir el código fuente, Cortar, Copiar, Pegar, Deshacer yRehacer.La barra de herramientas de documento.La barra de herramientas de documento contiene iconos que nos permiten cambiar entre lasdistintas vistas de edición y la vista en vivo, acceder cómodamente al título de la página, o realizarlas distintas opciones de validación que nos ofrece el programa.La barra de representación de estilos.Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en distintosdispositivos, si estamos utilizando hojas distintas que dependan del eso.Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlocomo otra barra de herramientas.2.3. Inspectores y panelesDreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocencomo paneles o inspectores. La diferencia entre panel e inspector es que, en general, laapariencia y opciones de un inspector cambian dependiendo del objeto seleccionado, mientrasque 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 lospaneles o inspectores. Vamos a ver los más importantes.
    • El inspector de PropiedadesEl 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 enDreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrará suubicación, dimensiones, peso, clase, etc...Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a losdiferentes 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ú, comopanel flotante o como una barra de herramientas integrada en la ventana de trabajo.Personalizar el área de trabajo es bastante intuitivo, pero si necesitas ayuda, hagámoslo:Personalizar el área de trabajo (Ejercicio)Abrir y cerrar panelesTodos los paneles son accesibles a través del menú Ventanas.Para cerrar un panel, basta con hacer clic derecho sobre su pestaña y elegir Cerrar del menú.Un comando que puede resultarnos útil es la tecla F4. Al pulsarla, todos los paneles se ocultan.Para mostrarlos, la volvemos a pulsar.Acoplar y desacoplar panelesA la derecha (por defecto) encontramos la pila de paneles, algunos paneles aparecenacoplados. Eso quiere decir que se muestran como pestañas, pudiendo ver el que queramoshaciendo clic, pero sin poder ver dos a la vez.Para desacoplarlos, basta con hacer clic sobre la pestaña y arrastrar.
    • Al mover el panel sobre distintos elementos, veremos que lo podemos acoplar en otros lugares(zonas de colocación), que aparecerán resaltados en azul (imagen anterior). Esto nos permiteintercambiar paneles entre grupos acoplados o dejarlos como flotantes si los sacamos fuera.Incluso algunos paneles, como el panel Insertar, nos permiten acoplarlos en la barra deherramientas.Cambiar el aspecto del panel insertarEs posible cambiar el aspecto del panel. Como ya hemos dicho, podemos arrastrarlo hasta labarra de menús para que tome un aspecto de fichas, como se aprecia en la siguiente imagen:Pero también puede tener este otro aspecto, en menú:Para alternar estos aspectos, hacemos clic derecho sobre el nombre en el menú yseleccionamos la opción Mostrar como Fichas o Mostrar como menú, según el caso.
    • Cambiar los métodos abreviados de tecladoLos métodos abreviados de teclado son las combinaciones de teclas que permiten acceder aalgunas opciones sin la necesidad de moverse a través de los menús. Para modificar lascombinaciones de teclas hay que dirigirse al menú Edición, a la opción Métodos abreviadosde teclado.En esta nueva ventana es necesario seleccionar un comando y una de las combinaciones de lalista de Métodos abreviados, situar el cursor en el campo Pulse tecla, seguidamente pulsar lacombinación de teclas deseada, y por último hacer clic sobre el botón Cambiar.Es posible que no se permita modificar las combinaciones de teclas del conjunto seleccionado,por ser combinaciones que provienen de fábrica, por lo que se pedirá confirmación para crearuna copia modificable del conjunto.Hay que tener también en cuenta que no se permite asignar a un comando una combinación deteclas que ya está asignada a otro diferente.
    • Color de los iconosPor defecto, los iconos de Dreamweaver se muestran de color gris, y al pasar el cursor porencima, se muestran de color.Pero como ves en la imagen anterior, podemos hacer que todos los iconos se muestren decolor. Para ello no tenemos más que elegir la opción Iconos de colores del menú Ver.Espacios de trabajoSi adaptamos a nuestro grupo el entorno y cerramos el programa, al volver a iniciarlo semantendrá nuestra configuración. Pero a la larga iremos haciendo cambios, abriendo panelesque necesitemos puntualmente, cerrando otros por accidente, etc. Por eso es muy útil guardarnuestra configuración y poder restaurarla cuando queremos.A esta configuración del entorno, se le denomina Espacio de trabajo. Y podemos guardarnuestra configuración actual desde el menú Ventana → Diseño del espacio de trabajo →Nuevo espacio de trabajo.... y darle un nombre.
    • Como vemos en el la imagen, DiseñosWebFIE es un espacio personalizado. Además vemosque Dreamweaver trae una serie de espacios ya creados que podemos utilizar. Para cargarlo,basta con seleccionarlo en el menú.Otra opción muy interesante que encontramos en este menú es la de Restablecer espacio.Esto lo volverá a cargar, muy útil cuando lo hemos desorganizado.2.4. Vistas de un documentoPodemos editar el documento con distintas vistas, que puedes cambiar través de la barra dedocumento:La vista DiseñoLa vista Diseño permite trabajar con el editor visual.Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.La vista CódigoLa vista Código se utiliza para poder trabajar en un entorno totalmente de programación, decódigo fuente. No permite tener directamente una referencia visual de cómo va quedando eldocumento 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 permite dividir la ventana en dos zonas: Código y Diseño. La zona superiormuestra el código fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna delas zonas, este cambio se aplica directamente sobre la otra.
    • La vista en VivoLa vista en Vivo es otra de las novedades que trae Dreamweaver CS4. Nos ofrece una vistadel resultado final no editable. A diferencia de la vista Diseño, que nos permite editar loselementos, 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ñoscambios se pre visualizan correctamente en el navegador.No obstante, siempre hay que comprobar la página con los principales navegadores delmercado, que serán los que emplearán nuestros visitantes. De hecho, a lo largo del curso veráscómo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseño, en lavista en vivo o en el navegador.La vista Código en vivoEsta 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 laVista 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 portemas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver osimplemente pulsando F1.Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumende 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.Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los términosde la búsqueda y buscar, iremos a la ayuda online de Adobe.
    • Unidad 3. CONFIGURAR UN SITIO LOCALEn este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificarlas 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ñosimilar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear laspáginas que va a contener.La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Losdocumentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contenerlas imágenes, las animaciones, archivos de tipos específico, etc., se deben crear nuevascarpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a lahora 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, loque 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 copiadel 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, mantenerlos 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 quecuando 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.producciones.es en elnavegador, éste intentaría cargar la página http://www.producciones.es/index.htm, por lo quese produciría un error en el caso de que no existiera ninguna página con el nombre index.htm, yno se podría navegar por el sitio a no ser que se escribiese exactamentehttp://www.producciones.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 lacarpeta 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 aNuevo sitio. Recuerda que a través del panel Archivos, se puede cambiar a cada uno de lossitios definidos. También podemos acceder desde el icono de acceso rápido de la barra de laaplicación a la opción Administrar sitios o Nuevo sitio...En el caso de haber seleccionado la opciónAdministrar sitios, aparece una ventanaque contiene la lista de sitios localesdefinidos con anterioridad.Por supuesto, pueden existir varios sitioslocales en un mismo ordenador.
    • Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la mismaventana 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 listahaciendo clic en ella.Vamos a ver los datos que hay que editar para la categoría Datos locales, que será lo únicoque empleemos de momento.Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista desitios. La Carpeta raíz 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 sonopcionales, y de momento no nos interesan.Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitiolocal, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
    • Aunque sí destacaremos la opción Usar vínculos de distinción entre mayúsculas yminúsculas. Ya comentamos, que aunque en nuestro equipo no por trabajar en Windows,muchos servidores distinguen entre mayúsculas y minúsculas. Así Dreamweaver también lohará.Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio. Si preferimos utilizarun asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vezde la pestaña Avanzadas.3.3. Abrir un sitioPara 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.Ejercicio paso a paso: Crear un sitio web localObjetivoPracticar las operaciones que hay que realizar para crear un sitio sin conexión a Internet.Ejercicio1. Crea una carpeta en tu disco duro, dentro de la carpeta ejercicios donde guardar losarchivos de los distintos que vayamos creando. Llámala mis_sitios.2. Copia a ella la carpeta Musicad3.3. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.4. Haz clic sobre el menú Sitio.5. Elige la opción Administrar sitios. Se abrirá una nueva ventana.6. Selecciona el botón Nuevo..., y selecciona la opción Sitio. Se abrirá una nueva ventana.7. Selecciona la pestaña Avanzadas de la nueva ventana.8. Selecciona Datos locales en Categoría.
    • 9. En Nombre del sitio escribe Musicad3.10. En Carpeta raíz local busca la carpeta Musicad3 que acabas de copiar, y que seencuentra dentro de la carpeta mis_sitios. Selecciónala. Puedes hacerlo a través delbotón con forma de carpeta.11. En Carpeta predeterminada de imágenes busca la carpeta imagenes, que seencuentra dentro de la carpeta Musicad3, y selecciónala. Puedes hacerlo a través delbotón con forma de carpeta.12. Haz clic sobre el botón Aceptar y sobre el botón Listo.3.4. Ver el sitioEl panel Archivos (menú Ventana → Archivos o tecla F8) es uno de los paneles másimportantes de Dreamweaver, ya que nos da acceso a los archivo del sito.En este caso vemos todos los documentos creadosen nuestro sitio artistas.html, contactos.html,index.html, letras.htm, novedades.html yvideos.html ademas las carpetas imagenes yvideos.Es posible visualizar un sitio en el panel Archivos oen una ventana. Para cambiar de una vista a otrahay que pulsar sobre el botón que aparece en laparte superior del panel y de la ventana.Esto nos sirve para ver a la vez el sitio local (el denuestro equipo) y el sitio remoto (el del servidor), ypoder, por ejemplo, sincronizar los archivos, ocompararlos. También el servidor de pruebas o lasbases de datos.En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a laderecha) con nuestros archivos.
    • Dreamweaver guarda la caché de nuestro sitio, cómo se organizan los archivos y se relacionanentre 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 otraspáginas, origen de la imagen, etc).En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las páginas no semostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc, ya queDreamweaver simplemente no encontrará la página.Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventanasimilar a ésta, que indica los documentos que hacen referencia a dicho objeto, y que pueden seractualizados para que no se produzcan los problemas antes mencionados.
    • Simplemente hay que pulsar sobre el botón Actualizar, aunque esto dependerá de si tenemosconfigurada la opción Mensaje al actualizar vínculos si movemos archivos. Lo cual podemosestablecer 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ássubir 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 irsubiendo uno a uno cada archivo y creando las carpetas tú mismo. Este proceso puedehacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como seencuentra en tu carpeta del disco duro. Si no los enlaces no funcionarán correctamente, y esposible que algunas imágenes no se muestren.Para subir los archivos vía web deberás seguir las instrucciones que te proporcionará tuservidor.La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunosgratuitos. 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 Exploradorde 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ásdescargarte el programa y su traducción tu idioma.Una vez instalado, abre el programa y haz clic en Archivo → Gestor de sitios y luego enNuevo sitio para configurar un nuevo sitio FTP.
    • 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 unacarpeta 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 comoSitio local, nos permite explorar la estructura de archivos y carpetas de nuestro sitio. A laderecha 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 delremoto al local, para descargarlos al equipo.Verás como el programa empieza a copiar la información de tu disco a Internet. Cuando hayafinalizado, sólo tendrás que introducir tu dirección de Internet en la barra de direcciones de tunavegador (Firefox, Internet Explorer...) ¡y verás el sitio en Internet!Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con elservidor. 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 mismoformato, 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álogoPropiedades de la página.Este cuadro se puede abrir de tres modos diferentes:1. Pulsar la combinación de teclas Ctrl + J.2. Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.3. Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al finaldel 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 laspropiedades:1. Fuente de página: es el tipo de letra que le aplicaremos al texto.2. Tamaño: es el tamaño de la fuente que aplicaremos al texto.3. Color del texto: es el color de la fuente.4. Color del fondo: permite especificar un color de fondo para el documento, pero dichocolor solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
    • 5. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dichaimagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener encuenta que según los colores de la imagen será necesario establecer unos u otroscolores para el texto, así como que no es conveniente tener un gif animado como fondo.6. Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si noqueremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repitao dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que serepita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repitaen vertical, entonces seleccionamos repeat-y.7. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entredonde empieza el contenido de la página y la ventana del navegador.En la categoría Apariencia (HTML), como vemos en la imagen siguiente, encontramos laspropiedades:1. Imagen de fondo: permite especificar una imagen de fondo para el documento. Dichaimagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener encuenta que según los colores de la imagen será necesario establecer unos u otroscolores para el texto, así como que no es conveniente tener un gif animado como fondo.2. Fondo: permite especificar un color de fondo para el documento, pero dicho color solose mostrará en el caso de no haber establecido ninguna imagen de fondo.3. Texto: es el color de la fuente.4. Vínculos: es el color que mostrará el texto de los vínculos.5. Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
    • 6. Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón haceclic sobre el mismo.7. Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entredonde empieza el contenido de la página y la ventana del navegador.Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es queCSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo hace conatributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a limitar el HTML alcontenido, y no al diseño. Por eso, te desaconsejamos su uso.En la categoría Vínculos (CSS) encontramos las propiedades:1. Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.2. Tamaño: es el tamaño del texto de los vínculos.3. Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre eltexto normal y los vínculos que sirven de enlace a otras páginas.4. Vínculos visitados: es el color de los vínculos visitados, que permite distinguir alusuario si unos vínculos ya han sido visitados o no.5. Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratónencima del vínculo.6. Vínculos activos: es el color de los vínculos activos.7. Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, eltexto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplopara que no aparezca subrayado.8.
    • En la categoría Encabezados (CSS) encontramos la propiedad:1. 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 quequeremos aplicar a cada tipo de encabezado.En la categoría Título/Codificación encontramos la propiedad:1. Título: es el título del documento, que aparecerá en la barra de título del navegador y dela ventana de documento de Dreamweaver
    • En la categoría Imagen de rastreo encontramos las propiedades:1. Imagen de rastreo: permite establecer una imagen como fondo del documento, peroque sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en unnavegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear eldocumento.2. 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 elnavegador. Para ver cómo comprobar el tamaño de los documentos.Comprobar tamaño para optimizar la cargaSi las páginas tienen muchos elementos (imágenes, tablas, etc.) y son muy grandes,posiblemente tarden mucho tiempo en mostrarse totalmente en el navegador. Esto no es nadarecomendable, ya que los usuarios pueden perder la paciencia, y no visitar más nuestra página.Siempre hay que intentar que el tiempo de descarga en el navegador no sea muy elevado.Dreamweaver permite calcular automáticamente el tiempo de descarga de las páginas. Para ellohay que dirigirse al menú Edición, a la opción Preferencias.En esta nueva ventana lo primero que hay que hacer es seleccionar una Categoría. En este casonos interesa la de Barra de estado.En ella habrá que establecer una Velocidad de conexión.
    • La velocidad por defecto, la velocidad es de 56,0 kbps que es la velocidad a la que seconectaban lo módems telefónicos. Actualmente, las conexiones de ADSL y cable llegan a cifrasmucho mayores, de varios MB/s. No obstante, ha que establecer el valor al de la conexión mediade la región de los usuarios a los que va destinada la web.Una vez establecida una velocidad de conexión, y aceptados los cambios, Dreamweavercalculará el tamaño y el tiempo de descarga de la páginas a partir de esa velocidad de conexión.Hay que tener en cuenta que el tamaño de descarga de una página no solo se calcula a partirdel tamaño de esa página en disco, sino que hay que considerar también el tamaño de lasimágenes que aparecen en ella, y del resto de elementos.Cuando en la ventana de documento de Dreamweaver esté abierta alguna página, se mostraránsu tamaño y su tiempo de descarga en la barra de estado.Por ejemplo, esta página de ejemplo tiene un tamaño de descarga de 3255K, y se presupone untiempo de descarga de 465 segundos (para una conexión 56kb), ya que en la barra de estado dela ventana de documento aparecen estos datos entre el tamaño de la ventana de documento y elpanel de propiedades.3.7. Los coloresPara asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un colorde estas paletas, se muestra el valor hexadecimal del color en la parte superior.Las paletas de colores de Dreamweaver utilizan la paleta de216 colores seguros para web. Éstos son los colores que semuestran de la misma forma en cualquier navegador bajocualquier sistema operativo.Esto no quiere decir que sólo podamos utilizar estos colores.Podemos personalizarlos a través del botón de la partesuperior 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énen 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 eneste tema.El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , loque hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente elnú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 azulcon 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 primariosaditivos (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 # la principio del código.Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, elsegundo al azul y el último al verde.En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este caso, seinterpreta que los valores de los pares están repetidos. Es decir, los colores #FF22AA y #F2Ason el mismo.Ejercicio paso a paso: Crear nuevo documento y modificar suspropiedadesObjetivo.Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurarlas propiedades de la página.
    • Ejercicio1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.2. Abre el menú Archivo y elige la opción Nuevo, o bien haz clic sobre el botón de labarra de herramientas.3. Selecciona Página en blanco en Categoría.4. Selecciona HTML en Tipo de página.5. Haz clic sobre el botón Crear.6. A partir de este momento vamos a realizar todos los ejercicios en la vista diseño. Hazclic sobre el botón Mostrar vista de diseño .7. Haz clic con el botón derecho del ratón sobre el documento en blanco, para abrir sumenú contextual.8. Elige la opción Propiedades de la página en el menú contextual y selecciona lacategoría Apariencia (CSS).9. En Color de texto: escribe #585858.10. En Color de fondo: escribe #FEFEFE.11. Haz clic en la categoría Vínculos CSS.12. En Color de vínculos: escribe #DFA01B.13. En Vínculos visitados: escribe #F9CA69.14. En Vínculos activos: escribe #FFB900.15. Haz clic en la categoría Título/codificación.16. En Título, escribe Deportes.17. Haz clic sobre el botón Aceptar.18. Haz clic sobre el botón Guardar de la barra de herramientas. Guarda el documentocon el nombre menu.htm.
    • Unidad 4. EL TEXTOA lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilosCSS, que permiten asignar al texto clases y estilos creados por nosotros mismos, nopredefinidos.4.1. Características del textoLas características del texto seleccionado pueden ser definidas a través del menú Formato, ya través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen através del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.Comenzamos viendo las propiedades HTMLTodas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en elnavegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamentecomo queramos.Formato:Permite seleccionar un formato de párrafo ya definido para HTML, quepuede ser encabezado, párrafo o formato predeterminado. Losencabezados se utilizan para establecer títulos dentro de undocumento. El formato predeterminado sirve para que el texto aparezcatal cual ha sido escrito, por ejemplo, si entre dos palabras se introducenvarios espacios solo se considera uno, pero al establecer el formatopredeterminado se respetará que hayan varios espacios en lugar desolo uno. El texto normal, debería ir siempre en párrafos, salvo queesté en otros elementos, como tablas o listas.
    • Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenidode nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo semuestran esos encabezados, recuerda que siempre podremos personalizarlo.Estilo:El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestraen 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 através del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecensubrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de unvínculo. Además, emplea etiquetas que están en desuso.Lista:Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listasen el siguiente apartado.Sangría:Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie demargen que se establece a ambos lados del texto. En este caso los botones se refieren asangrí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 nuestrapágina y darle el diseño que queramos. Podemos cambiar desde propiedades simples, como elcolor de fondo, hasta cosas más vistosas, como hacer que un bloque se muestre en unaposición determinada o que un elemento cambie al pasar el cursor sobre él. Profundizaremos enesto 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 CS4 nos proporcionanumerosas 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 acabarel 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.Fuente: Permite seleccionar un conjunto defuentes. Aparecen conjuntos de fuentes enlugar de una sola, ya que es posible que alestablecer una única fuente el usuario no latenga en su ordenador. El seleccionar unconjunto de fuentes posibilita que en el casode que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, siseleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta noexiste se verá en Helvetica.Estilo:Estos botones ponen el texto en negrita y cursiva respectivamente.Alineación:A través de estos botones es posible establecer la alineación del texto de una de estas cuatroformas distintas: izquierda, centrada, derecha y justificada.
    • Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplosobre un párrafo.Tamaño:Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, enpíxeles, porcentajes del tamaño base, etc...Color:Permite seleccionar el color de la fuente, ignorando el color que se haya definido en laspropiedades de la página. Si no se ha establecido ningún color en las propiedades de la páginani aquí, el color del texto por defecto será el negro.Ejercicio paso a paso: Insertar texto y modificar sus propiedadesObjetivoPracticar las operaciones de insertar texto y modificar sus propiedades.1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos.3. Selecciona el sitio Musicad3 en el panel Archivos. Recuerda que creamos este sitio enel tema anterior.4. Haz doble clic sobre el documento contactos.html, que aparece en los archivosdesplegados en el panel de Archivos. Se abrirá el documento en Dreamweaver.5. Sitúa el punto de inserción antes de la primera letra de la primera línea.6. Escribe el texto Quiénes somos y pulsa la tecla Intro para saltar de línea.7. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opciónPropiedades.8. Haz clic en el texto Quiénes somos.9. En Formato, del inspector de propiedades, elige Encabezado 1. Observa como ahora eltexto es de mayor tamaño.10. En la barra de herramientas de documento, haz clic sobre la caja de texto Título, yescribe Quiénes somos.11. Haz clic sobre el botón Guardar de la barra de herramientas.
    • 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 atravé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 listanumerada (ordenada) se selecciona a través del botón .Ejemplo de lista numerada (ordenada):1. Preparar la mochila1. Sacar los libros de ese día2. Introducir los libros del día siguiente2. Ponerme el pijama3. Lavarme los dientes4. Poner el despertadorEjemplo de lista con viñetas (sin ordenar):1. Perro2. Gato3. Aves1. Canario2. Loro4. HámsterPara establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesarioañadir una sangría en los elementos de la lista que se desee que pasen a formar parte de la listaanidada.A través del menú Formato, opción Lista, es posible acceder a las propiedades de la listaseleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algúnlugar 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 conviñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:), y en el caso delas 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 deDiseño de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluircaracteres como á, ê, ì, ö, ç.. de forma rápida. Pero si quieres poner dos espacios en blanco ylos introduces por teclado, Dreamweaver no los creará, deberás introducirlo dos veces utilizandola opción que vamos a ver a continuación. Lo mismo ocurrirá con los caracteres que no tenemosen el teclado.Haz clic en el menú Insertar y selecciona la opción HTML verás el desplegable de la imageninferior.Sólo coloca el cursor del ratón sobre Caracteres especiales y verás una lista rápida de loscaracteres 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 desdedonde podrás seleccionar caracteres entre una lista bastante más amplia.
    • 4.4. Estilos CSS. IntroducciónLos estilos CSS se utilizan para combinar una serie de atributos del texto, como pueden ser elcolor o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vezque 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 delos elementos que contendrán nuestra web.Podemos definir los estilos para determinadas etiquetas, como encabezados (<h1>,<h2>...), párrafos (<p>), enlaces (<a>), etc... lo que formateará todas las apariciones de estaetiqueta 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 alelemento seleccionado) o crear una regla, que puede afectar a toda la página, o a todo el sitio sila guardamos en un archivo CSS.Un estilo CSS no es más que un conjunto de reglas de formato que controlan el aspecto delcontenido de una página Web. Los estilos CSS aportan gran flexibilidad y control al aspectoexacto que se busca en una página, desde la posición precisa de elementos hasta el diseño defuentes y estilos concretos.Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidadsimple de actualización; cuando actualiza un estilo CSS, el formato de todos los documentosque usan ese estilo se actualiza automáticamente.4.5. Crear un estilo personalizadoCon Dreamweaver CS4, las características que apliquemos a un texto a través del Inspector depropiedades 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 casopuntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiquetaHTML, 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 enlí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.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éncontenidas en determinados elementos o una clase.Para ello, En el Inspector de propiedades CSS, en Regla de destino, seleccionamos < Nuevaregla CSS >.Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nosaparecerá la siguiente ventana:
    • Tipo de selector: el tipo de selector es fundamental, ya que determina a qué elementosafectará 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 aplicarleesa 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 quetenga 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 alos 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éndentro 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 quequeramos.Definición de regla: esta opción nos permite guardar el estilo en el documento actual o en unnuevo archivo .css.Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera de lapá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 estilosen cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de indicar dóndeguardar el archivo css que contendrá los estilos. Normalmente en la misma carpeta que laspáginas.Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos seañadirán a ella.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. Siqueremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que una vezcreadas se van añadiendo a la lista.Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar regla. Seabrirá la ventana Definición de regla.Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos másadelante.Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que cambiarvarias propiedades.Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y otrasfunciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde el menúVentanas o pulsando en el botón Panel CSS.
    • En la parte superior vemos las propiedades que afectan al elemento, en medio las reglasaplicadas, 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 queindique a qué tipo de texto se va a aplicar. Para ello accedemos al panel Estilos, hacemos cliccon 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, nos será necesario aplicarla, ya quedirectamente se aplicarán directamente.Por tanto lo que tendremos que aplicar serán los estilos que definamos como clases. Veamoscómo hacerlo:En el documento, selecciona el texto al que deseas aplicar el estilo CSS. Si situamos el puntode inserción, pero sin seleccionar, el estilo se aplicará a la primera etiqueta que contenga eltexto (por ejemplo el párrafo).En el inspector de Propiedades seleccionamos la opción CSS y seleccionamos el estilo creadopor nosotros de la lista que aparece al desplegar el cuadro Regla de Destino. Desde laspropiedades HTML también podemos hacerlo, utilizando el desplegable Clase.Si queremos aplicar la clase a una etiqueta, podemos hacer clic derecho sobre ella en la barrade 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 alelemento.La barra de estado nos ayudará a saber qué clase tiene aplicada un elemento. La claseaparecerá junto al nombre de la etiqueta, separada por un punto.4.8. Hojas de estilosExportar estilosEs frecuente que comencemos creando los estilos en la propia página, y después al ver que losnecesitaremos en otras páginas del sitio, los pasemos a una hoja de estilo. Dreamweaver nospermite 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 laesquina 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 deindicar 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... odesde el panel Estilos CSS. Lo único que tendremos que hacer es seleccionar el archivo avincular. Las hojas de estilo tienen la extensión .css.
    • Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo delequipo, todos los archivos que utilicemos deben de estar dentro del sitio.Unidad 5. HIPERENLACESVamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son unelemento esencial para cualquier página web.5.1. IntroducciónUn hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva deuna 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 esla 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 referenciasno se limitan a los enlaces, se comportarán igual cuando indiquemos la ubicación de unaimagen, 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.misitio.com, o http://www.misitio.com/pagina/pagina1.html.La referencia absoluta es independiente de la ubicación de la página que contiene el enlace, yserá válida siempre que no cambie la ubicación del archivo enlazado. Es la opción obligatoria sipretendemos 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 del 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 queutilizar 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 lacarpeta 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 encontramosdeberemos utilizar ../Por ejemplo, imagina que estamos en la siguiente direcciónhttp://www.misitio.com/pagina/informacion/index.html.En esta página queremos mostrar una imagen que se encuentra en la carpetahttp://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 información, subimos un nivel y luegonos 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 sialteramos la estructura de carpetas.Esta es la opción por defecto de Dreamweaver, y es la forma más habitual.Referencia relativa al sitio:Conduce a un documento situado dentro del mismo sitio que el documento actual. Tomandocomo 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/, unenlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html secrearía como /pagina/secciones/seccion1.html.Por tanto, podríamos poner ese vínculo en cualquier página del sitio y funcionaríaindependientemente de su ubicación.Estos enlaces no funcionarán en el sitio local, a no ser que configuremos un servidor depruebas, 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. Paraello, indicamos el nombre del punto de fijación a continuación de la ruta del archivo (relativa oabsoluta) 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 elenlace, por ejemplo #apartado2Podemos definir el punto dentro de un documento a través del menú Insertar, opción Anclaje connombre. O podemos utilizar el atributo ID de cualquier elemento (se puede establecer desde elInspector de Propiedades HTML). En cualquier caso, los nombres no deben de estar repetidosen la página.Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamentea 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ásproblemas 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 esnecesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecerel Vínculo en el inspector HTML.Por ejemplo, aquí hay un enlace a www.aulaclic.es, que al ser un archivo externo es dereferencia absoluta, por eso contiene http://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 queexplicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado elcursor.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ásescribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar losarchivos que existan dentro del sitio.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 elcursor sobre el enlace.Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlacemediante 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 enlacespulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridaddel enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Pordefecto, 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, puedevariar dependiendo de si el documento está basado en marcos.Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana queaparece a través del menú Insertar, opción Hipervínculo._blank: Abre el documento vinculado en una nueva ventana o pestaña del navegador._parent: Abre el documento vinculado en la ventana del marco que contiene el vínculo o en elconjunto de marcos padre. Tiene sentido si se emplean marcos._self: Es la opción predeterminada, abre el documento vinculado en el mismo marco o ventana._top: Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si seemplean marcos.Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos nada paraabrirlo 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 enlacesexternos en ventanas nuevas. Otra tendencia dice que una página nunca debería de abrirnuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere abrir enventanas nuevas.
    • 5.5. Formato del enlaceEn general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo,puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades dela página. Estos tres colores diferentes corresponden a los tres estados del vínculo: vínculonormal, vínculo activo (el último pulsado) o vínculo visitado.Aquí tienes dos vínculos de ejemplo:http://www.misitio.es/ http://www.misitio.org/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 estotalmente personalizable por CSS. Para ello, basta con crear una Regla de estilo para laetiqueta 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.Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos alpulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa),aparece el contorno de esa zona.Aquí tenemos dos vínculos en una imagen:Como puedes ver, la primera imagen que hace de vínculo contiene un recuadro alrededor. Estees el formato por defecto, pero no suele quedar bien, sobre todo en imágenes con el fondotransparente.
    • Veamos como quitarlo utilizando CSS.En el Inspector de propiedades CSS seleccionamos Nueva regla CSS en Regla de destino, ypulsamos 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 alsituarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.
    • 5.6. Enlace a correo electrónicoEs posible especificar vínculos a direcciones de correo electrónico. Esto resulta útil cuando sedesea 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, seleccionandopreviamente 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 quecontendrá 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 unordenador público, o emplea el correo web directamente.Siempre que se pueda, es mejor crear un formulario de contacto, aunque esto requerirá unapágina dinámica. Otra opción sería mostrar nuestra dirección de correo, para que el usuariopueda enviarnos el correo como quiera. Si publicamos nuestra dirección en la web es mejorhacerlo como una imagen, o escribiéndola de forma que la pueda entender un humano (porejemplo (micorreo(arr)sitio.com) para evitar que sea reconocida por robots que la emplearánpara el envío de correo no deseado.
    • UNIDAD 6. IMÁGENESEn este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómocrear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, queayudan a mejorar la apariencia de nuestras páginas.6.1. IntroducciónLas imágenes son un aspecto muy importante de la web. Ya sea como complementos a lainformació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.6.2. Insertar una imagenPara insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después deesto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando teacostumbres, 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ízdel 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 elcampo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo desi 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 lacarpeta imágenes y el documento en el que deseamos insertar la imagen. Dicha imagen,llamada foto.jpg, se encuentra dentro de la carpeta imágenes.En el caso de insertar la imagen como relativa al Documento la ruta sería:imágenes/foto.jpgMientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:/imágenes/foto.jpgOtra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre eldocumento.Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su nombre, enDreamweaver 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 delcampo Alt del inspector de propiedades.
    • 6.3. Propiedades de una imagenCuando seleccionamos una imagen el Inspector de propiedades muestra esta 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ónen el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacerque 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. Esun atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Si loque queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre laimagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemosque hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorermuestra Alt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadoresno lo harán, respetando el estándar.En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darlealineación, bordes e incluso tamaño con sólo un clic.Puedes asignarle un grosor de borde desde el campo Borde.Puedes seleccionar su alineación con respecto al texto desde el campo Alinear.Por último las opciones Espacio V y Espacio H te serán muy útiles para separar la imagen deltexto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical yhorizontal respectivamente entre la imagen y el texto.
    • Además, encontramos algunos controles de Edición: El botón nos permite optimizar laimagen desde Dreamweaver, cambiando el formato o creando transparencias. Por otro lado, elicono nos permite editar la imagen con un programa externo, como Photoshop o Paint.MAPA DE IMAGENLos mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algúntipo de comportamiento.Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que sedesea crear el mapa, y abrir el inspector de propiedades de dicha imagen.Estando seleccionada la imagen, ya es posible crear un mapa a través de los botones delinspector de propiedades que tienen el siguiente aspecto: . Si no te aparecendespliega el panel Propiedades para verlo completo.Los tres últimos botones son los que se utilizan para crear los mapas. Dichos mapas puedentener forma rectangular, circular, o libre, dependiendo del botón pulsado.Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre laimagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugaresdonde se desea que comience y finalice el mapa, así como sobre el resto de lugares (en orden)que se desea que recorra el mapa en el caso de forma libre.Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vínculo yun texto alternativo a ese mapa como puedes ver a continuación:
    • El primero de los botones, el de la flecha, debe pulsarse al finalizar la creación de un mapa, paraque el puntero recupere su forma original al situarse sobre una imagen. De este modo, esposible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitiosdeseados, para ajustarlos mejor a la imagen.OPTIMIZADOR DE IMAGENCambiar el formato del archivoAl pulsar el botón del Inspector de propiedades de la imagen, accedemos a la ventanaPresentación preliminar de la imagen, similar a la que vemos a continuación:
    • Sobre los botones de Aceptar y Cancelar, encontramos herramientas que nos permitendesplazarnos por la imagen o el zoom. También encontramos las opciones de visualización. Unamuy útil es la que nos permite ver varias vistas de la imagen, pulsando el icono . En laimagen anterior, vemos cuatro vistas del mismo archivo.A cada vista podemos asignarle un formato de archivo distinto para comparar las diferencias. Notenemos más que hacer clic en la vista, y seleccionar el formato que queramos del desplegableFormato. En la pestaña Opciones podremos cambiar las opciones de cada formato.Es muy importante la información que aparece junto a cada vista, que nos indica el formatoelegido y el tamaño que ocuparía el archivo en ese formato.Vamos a examinar el ejemplo que tenemos en la imagen. Ten en cuenta que el resultado queobtenemos depende íntimamente de la imagen seleccionada, y si utilizamos otra imagen podríadar un resultado totalmente opuesto:• La primera vista, arriba a la Izquierda, es un formato PNG 32.Podemos ver que es el resultado de mayor calidad. La transparencia se muestra perfectamente,por ejemplo en la sombra, y que podemos ver el fondo a través de la esfera, dando la sensaciónde que sea de cristal. Por contra, vemos que es el archivo de mayor tamaño (14,59 K), muchomayor que el resto.Nos quedaremos con este formato, si es necesario mantener las transparencias intactas.• La segunda vista, arriba a la derecha, utiliza el formato GIF.El archivo ya es algo menor (5,89 K). Lo primero que llama la atención es que sólo estransparente el fondo. Esto se debes que GIF sólo admite un color uniforme como transparencia,no admite distintos niveles de transparencia como PNG. Podemos ver que aunque la imagen notiene tonos de color continuos, ya que todos son degradados, no perdemos colores. Esto sedebe a que todos están dentro de la misma gama (como podemos ver en la paleta de laizquierda) y no sobrepasan los 255.Nos quedaríamos con este formato si no estuviese la sombra, siendo todo el fondo transparenteuniforme, y pudiésemos prescindir de la transparencia de la esfera.
    • • En la vista de abajo a la izquierda, empleamos un JPG de alta calidad.Podemos ver que la calidad del resultado es casi idéntica al GIF. Salvo que sin transparencia, yaque este formato no las soporta. No obstante, sí podemos ver que como la imagen no tienetonos continuos de color, el JPG logra una imagen de menor tamaño (2,95 K) que PNG y GIF.Esta sería la mejor opción si podemos prescindir de las transparencias, por ejemplo porque elcolor de fondo del documento también es blanco.• En la vista inferior derecha tenemos un formato JPG de baja calidad.Podemos comprobar que aunque es el archivo de menor tamaño, también es el de peor calidad.En este caso, la pérdida de calidad no compensa el ahorro de tamaño.Se trata, por tanto, de lograr un buen equilibrio o entre tamaño y calidad, ajustándolo a lasnecesidades concretas de la imagen.También hay que tener en cuenta que para poder elegir el formato adecuadamente debemos departir del formato con mayor calidad. En el ejemplo, la imagen original era un PNG 36. Sihubiésemos partido del JPG de peor calidad, no la podríamos haber mejorado.Y una vez más, recalcamos que estos resultados son para esa imagen en concreto.TransparenciasEn ocasiones puede resultar útil poder hacer invisibles algunos colores que forman parte de unaimagen. Normalmente lo que se desea hacer transparente es el fondo.Por ejemplo, en la imagen siguiente el fondo puede desentonar con el fondo de la página, ohacer que su apariencia sea más pobre.Hay que tener en cuenta que lo que podemos elegir es un color (varios) de la imagen que serátransparente, haciendo que cada píxel de ese color sea transparente. Por lo que ése color sólodebe de aparecer en las zonas que queramos cambiar. Además el fondo tiene que estarclaramente delimitado.
    • Los formatos que nos permitirán crear la transparencia serán PNG 8 y GIF. Si la imagen originalera JPG, el resultado no será bueno aunque lo cambiemos de formato, y que JPG altera lostonos continuos.Todo esto lo haremos desde la ventana Presentación preliminar de la imagen a la queaccedemos pulsando el botón del Inspector de propiedades de la imagen.En el panel de la izquierda (recuerda que debe de ser el formato PNG 8 o GIF). Encontramos lapaleta de colores que forma la imagen.Una forma de aplicar transparencia es a través de los botones que podíamos veren la imagen del apartado anterior.Al seleccionar uno de los dos primeros botones, el cursor toma la forma de un cuentagotas .Para hacer un color transparente, basta con hacer clic sobre el color (en la paleta de colores odirectamente sobre la imagen) con esta herramienta. Distinguiremos los colores transparentesporque dejan ver la cuadrícula de cuadros blancos y grises:La diferencia entre el primer y el segundo de los botones de cuentagotas, es que el primero solopermite asignar transparencia a un color, mientras que el otro permite añadírsela a varios. Elúltimo botón se utiliza para quitar la transparencia de algún color.Al hacer transparente el fondo azul, el resultado final es el siguiente:La existencia de transparencia permite mejorar notablemente la estética de nuestras páginas,integrando mejor las imágenes con el diseño.
    • 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 detamaño no se aplica directamente sobre el archivo de imagen, que conservará el tamañooriginal.Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómopodrí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 deDreamweaver y modificamos su tamaño de varias formas diferentes:Tamaño original Con tamaño modificadoEl resultado puede ser más o menos satisfactorio, dependiendo del navegador que es el queaplica realmente el reescalado, pero en ocasiones puede resultar útil modificar el tamaño dealgunas 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 losrecuadros negros que aparecen alrededor de la imagen.La otra es a través de inspector de propiedades, cambiando los campos Ancho o Alto. Estoscampos 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 ennegrita y aparecerá a la derecha una flecha circular que permite volver al tamaño originalhaciendo clic sobre ella.
    • Como hemos comentado, este cambio de tamaño se produce alterando los atributos de anchuray altura, pero no cambiando el tamaño real del archivo, por lo que el usuario deberá descargarseel 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 (porejemplo 2592x1944px), y queremos mostrar una miniatura (por ejemplo, de 200x150px) estasería una mala solución, porque el usuario se estaría descargando el archivo completo, y no unaminiatura 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 depropiedades. Se abrirá la ventana Presentación preliminar de la imagen. Nos fijamos en lapestañ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 introducirdirectamente 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).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. RolloverUn rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella. Este tipode imagen suele utilizarse en los menús o en los botones para desplazarnos a través dedistintas páginas.Veamos un ejemplo de rollover. Partiendo de las siguientes imágenesHemos 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ónImagen de sustitución. En la nueva ventana hay que especificar la imagen original y la desustitución.Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, laimagen de sustitución se carga cuando se carga la página, de este modo se evitan las demorasdebidas 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 queaparecerá en lugar de la imagen en el caso de que por algún motivo ésta no pueda ser mostradaen el navegador.El texto alternativo puede asignarse a todas las imágenes, no sólo a los rollovers. Puedehacerse a través del campo Alt del inspector de propiedades de la imagen seleccionada.6.6. Barra de navegaciónUna barra de navegación es un conjunto de imágenes que se utilizan como opciones de menúpara navegar dentro de una web. Una página web solo puede contener una única barra denavegación.Para insertar una barra de navegación hay que dirigirse al menú Insertar, Objetos de imagen, ala opción Barra de navegación.En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de losbotones, el vínculo para cada uno de ellos, etc.A través de los botones superiores de la ventana es posible crear y eliminar botones de la barrade navegación, así como reordenarlos. Con se crea un botón nuevo, con se elimina elbotón seleccionado, y con se puede modificar la posición del botón seleccionado.
    • En Imagen Arriba indicamos la imagen que quieres mostrar inicialmente (cuando todavía no seha hecho clic).En Sobre imagen, pones la imagen que se mostrará cuando el usuario coloque el cursor sobre elbotón y éste estaba mostrando la imagen asignada en Imagen Arriba.En Imagen abajo, indicamos la imagen a mostrar después de que el usuario haya hecho clic enla imagen.En Sobre mientras imagen abajo, indicamos la imagen a mostrar cuando el usuario mueva elpuntero sobre el botón y éste estaba mostrando la imagen asignada en Imagen Abajo.De esta forma, si asignas imágenes distintas puedes saber cuál es el último botón que ha sidopulsado (el que tiene Imagen Abajo).Aquí tienes un ejemplo de barra de navegación. Para su creación se han utilizado las mismasimágenes para todos los botones, pero como puedes ver, en el botón del medio apareceinicialmente una imagen diferente de la de los otros dos. Esto se debe a que la opción Mostrar"Imagen abajo" inicialmente estaba activa para este botón. Sitúa el puntero sobre los distintosbotones, y pulsa sobre alguno, para ver qué es lo que ocurre.Observa el campo Texto alternativo (es lo mismo que el campo Alt). Cobra especial importanciaen los elementos de navegación. Si no lo ponemos, el usuario no podrá navegar si la carga de laimagen falla.El que existan cuatro imágenes diferentes sirve para identificar cual de los vínculos está activo,cosa que con un simple rollover no puede hacerse.A través de la opción Insertar es posible especificar si los botones de la barra de navegación vana aparecer de forma horizontal o vertical dentro de la página.
    • Sólo podemos tener uno de estos menús por página, así que si intentamos insertar uno nuevo,editaremos el existente.Tanto la imagen de sustitución como la barra de navegación se apoyan en JavaScript, unatecnología que permite cambiar el contenido de la página dinámicamente.6.7. Objetos inteligentesLos objetos inteligentes son imágenes que obtenemos directamente desde un archivo dePhotoshop (.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, loque hará Dreamweaver es convertirlo a un formato estándar. Por eso, tras abrirlo, Dreamweavernos pedirá que elijamos uno de los formatos gif, png o jpg y lo guardemos, con las mismasopciones 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 objetointeligente encontrarás un icono como éste . Las dos flechas verdes indican que el archivoestá 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 hacerloabriendo 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 enDreamweaver (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 editarfrecuentemente.Unidad 7. TABLASEn 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 delborde.7.1. IntroducciónTodos los objetos se alinean por defecto a la izquierda de las páginas web, perogracias a las tablas es posible distribuir el texto en columnas, colocar imágenes allado de un bloque de texto, y otra serie de cosas que sin las tablas seríanimposibles de realizar.La finalidad de las tablas es presentar una serie de datos de forma clara yorganizada, 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 organizarcontenidos y repartir el espacio. No obstante, esta no es una prácticarecomendable, ya que las tablas no fueron pensadas para ello, y si no están bienanidadas pueden ocasionar problemas al analizar nuestra web con herramientasautomáticas, como los bots que indexan el contenido para los buscadores. Paramaquetar nuestras páginas, lo recomendado es emplear capas (div) y CSS.Las tablas están formadas por un conjunto de celdas, distribuidas en filas ycolumnas. 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á queespecificar el número de Filas yColumnas que tendrá la tabla,así como el Ancho de la tabla.El Ancho puede ser definidocomo Píxeles o comoPorcentaje. La diferencia de unoy otro es que el ancho enPíxeles es siempre el mismo,independientemente del tamañode la ventana del navegador enla que se visualice la página, encambio, el ancho en Porcentajeindica el porcentaje de la páginao 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 elancho de pantalla.Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se leasigna 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 ylos 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, porejemplo para indicar el contenido de filas o columnas. Aunque podríamos lograr elmismo diseño con celdas normales y estilos CSS, es recomendable utilizarencabezados en el caso de que los usuarios utilicen lectores de pantalla. Loslectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de losmismos 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 latabla.
    • 7.3. Rellenar las celdasLas celdas son cada uno de los recuadros que forman una tabla, resultan de laintersección entre una fila y una columna.imagen y textoCOLUMNATexto dentro de una celdaCELDAFILAPara 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 deseadahaciendo clic. El elemento lo insertaremos como hemos visto hasta ahora.Si queremos insertar elementos ya existentes en la celdas, tenemos que crearprimero la tabla vacía, y después seleccionar y arrastrar los elementos a insertarsobre la celda. No podemos seleccionar el texto, y crear la tabla "alrededor", comohacíamos, por ejemplo, con las listas.7.4. Seleccionar elementos de una tablaExisten 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 casosaparece la opción Tabla, a través de la cual se puede elegir la opción Seleccionartabla.
    • También es posible seleccionar una pulsando con el ratón sobre el bordeexterior que la rodea, o pulsando <table> que aparece en la barra de estado de laventana de documento.Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier partede la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cadacolumna. Junto a los anchos se encuentran unos menús desplegables (menú deencabezado de la tabla y menú de encabezado de la columna). Estos menúspermiten acceder rápidamente a determinados comandos relacionados con la tabla.
    • Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedesactivar su visualización seleccionando la opción Anchos de tablas del menú Tablao 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 tieneun ancho especificado. Si aparecen dos números, el primer número corresponde alancho especificado en las propiedades de la tabla o columna y el segundo númeroes el ancho el ancho visual que aparece en la vista de diseño; por ejemplo en latabla anterior la primera columna tiene 139 (142), en las propiedades de la celdatenemos el ancho 139 píxeles pero al contener una imagen que necesita másespacio, la columna ocupará realmente 142 píxeles (ancho visual de la columna talcomo 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ónIgualar todos los anchos del menú desplegable de encabezado de tabla.En este menú vemos que también tenemos las opciones para Borrar o Igualar losanchos.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 deseaseleccionar filas, columnas o celdas.Puede seleccionarse una fila o columna de varias formas, lo mejor es quepruebes las distintas formas y elijas la que más te gusta. Estas son las formas deselección:
    • Puedes utilizar la opción Seleccionar columna del menú de encabezado decolumna (zona verde de anchos) esto sólo es válido para seleccionar unacolumna.Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s ofila/s completamente.También puede hacerse situando el cursor junto al borde superior oizquierdo de la columna o fila respectivamente, de modo que el cursorcambia a la forma de una flecha negra. Al hacer clic se selecciona lacolumna o fila a la que apunta dicha flecha.En cualquier momento, para seleccionar una fila posicionar el cursor encualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado osobre la etiqueta <td> para seleccionar la celda.Para seleccionar celdas:Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratónmientras se arrastra sobre las celdas deseadas.Para seleccionar una sola celda o varias celdas no contiguas, hay quemantener 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 depropiedades. En este caso, se crearán atributos para la tabla. Pero algunos deestos valores, como el ancho, los podemos especificar mediante CSS.A través del inspector de propiedades se pueden modificar los valores que seespecificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros comopueden ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o ala derecha de la pantalla), el borde de la (en Col. borde) o los valores de relleno yespaciado de la celda.
    • Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector depropiedades cambia, para permitir especificar otros valores.La parte superior del inspector de propiedades nos permite alternar entre laspropiedades HTML, que en este caso sirven para especificar las propiedades deltexto que se insertará dentro de la celda (o celdas) seleccionada, y la propiedadesCSS para definir los estilos.La parte inferior sirve para especificar valores propios de la celda, como puede serel color o imagen de fondo (que es preferible definir con CSS), la alineación delcontenido 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 laopción No aj. y si queremos convertirla en un encabezado, basta con marcar laopción Enc..7.6. Formato CSSComo cualquier elemento, podemos cambiar el aspecto de la tabla definiendopropiedades CSS.Los selectores.Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o sies 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 deinserción en una celda:
    • Vemos que con el selector table nos referimos a la tabla completa. Con el selectortr hacemos referencia a las filas y con el selector td hacemos referencia a lasceldas. Cuando las celdas sean encabezados, en vez de td, emplearemos elselector th. Observa que no hay un selector para referenciar a las columnasenteras, aunque sí existe un método empleando etiquetas <col />, es másavanzado y no lo veremos en este curso.Podemos crear clases y asignarlas a la tabla, a una fila o a una columna. Recuerdaque podemos emplear selectores compuestos. Así para referirnos a las filas de unatabla 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 lasPropiedades de la página, Dreamweaver crea una regla con el selectorbody,td,th. Es decir, aplica el mismo estilo a la página, a las celdas y a losencabezados. Esto hará que por ejemplo, si cambiamos la fuente de la tabla, elcambio no se aplique ya que prevalece la generada por Dreamweaver, por ser másconcreta. Esto puede entrar muchas veces en conflicto. Para evitarlo, lo mejor eseditar 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 Editarselector en el menú contextual.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 bordecolapsado. 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. Parahacerlo, no tenemos más que crear una clase que, por ejemplo, cambie el color defondo, y aplicarla a filas alternas.7.7. Cambiar tamaño de tabla y celdasComo ya sabes, el Ancho de una tabla puede ser definido como Píxeles o comoPorcentaje. 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 seespecifica la anchura, no la altura.Los valores An y Al de una celda siempre están en Píxeles. No es necesarioespecificar ninguno de estos dos valores para las celdas, a no ser que se deseeque se mantenga obligatoriamente ese tamaño, y no que se ajusten al contenido oal tamaño de la ventana.No solo puede establecerse el tamaño de las tablas y de las celdas a través delinspector de propiedades. También es posible hacerlo manteniendo pulsado elratón sobre alguno de los bordes, arrastrándolo hacia la posición deseada.7.8. Añadir y eliminar filas y columnasExisten 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 seleccionandovarias, desplegar el menú contextual de la tabla al pulsar con el botón derechosobre ella, o bien abrir el menú Modificar. En ambos casos aparece la opciónTabla.
    • Según las celdas seleccionadas, algunas de las opciones de Tabla se podránutilizar mientras que otras no.Para insertar una fila o una columna, hay que pulsar sobre las opciones Insertarfila o Insertar columna.La fila se inserta sobre la celda o el conjunto de celdas seleccionadas, mientras quela columna se inserta a su izquierda.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 quese insertarán serán filas o columnas, el número de ellas que se insertará, y laposición donde se insertarán.
    • Para eliminar una fila o una columna, hay que posicionar el cursor en la fila ocolumna 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 celdasEs posible insertar tablas dentro de las celdas de otras tablas. A esto se le llamaanidar tablas.A continuación tienes un ejemplo de anidamiento. Como puedes ver, en la primeracelda de una tabla se ha insertado otra tabla.
    • Para anidar tablas sólo tienes que posicionar el cursor en la celda donde quieresinsertar la nueva tabla e insertarla como ya hemos visto.COMBINAR CELDAS consiste en convertir 2 o más celdas en una sola por loque dejará de haber borde de separación entre una celda y otra ya que serán unasola. Esto nos puede servir por ejemplo para utilizar la primera fila para escribir eltítulo de la tabla, normalmente más ancho. En este caso habría que combinar todaslas 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 depropiedades.Si se seleccionan varias celdas pueden combinarse pulsando sobre el botóndel inspector de propiedades (lo encontrarás en la parte inferior izquierda del panelPropiedades, 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 latabla y a través del menú Modificar.Tienes que tener en cuenta que sólo es posible combinar celdas contiguas, cuyacombinación pueda dar como resultado otra celda, es decir, que su combinación decomo resultado un rectángulo. No podemos combinarlas para formar una "L". Porejemplo, en la siguiente tabla no podrían combinarse las celdas 1 y 4, ni las celdas1, 2 y 3, porque dichas combinaciones no dan como resultado una celda.
    • 1 23 4Podemos combinar celdas en vertical y horizontal:Para dividir una celda hay que pulsar sobre el botón del inspector depropiedades, 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 sila celda se va a dividir en filas o columnas, y el número de éstas.7.10. Modos de tablaA la hora de trabajar con tablas Dreamweaver nos proporciona distintos modos devisualizació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ésdel menú Ver opción Modo de tabla. Dentro de esta opción podemos elegir entreModo estándar o el Modo de tablas expandidas.El Modo de tablas expandidas añade temporalmente relleno y espaciado de celdaa las tablas de un documento y aumenta los bordes de las tablas para facilitar laedición. Este modo se puede utilizar para seleccionar elementos de las tablas ocolocar el punto de inserción de forma precisa e introducir contenido pero en estemodo no vemos la página como quedará exactamente.En este curso nos limitaremos al modo estándar, aunque puedes emplear el Modode tablas expandidas cuando lo creas útil.7.11. Adaptar webs a distintas resolucionesSiempre que se crea una página web hay que tener en cuenta que va a ser visitadapor usuarios con monitores de distintos tamaños y con distintas resoluciones.Desde las pequeñas pantallas de los portátiles de bajo coste, hasta monitorespanorá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.1. El diseño fijo especifica las medidas en píxeles. Por lo que el contenidosiempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Porcontra, se desaprovecha mucho el espacio en monitores grandes, o puedeaparecer el "scroll" horizontal en monitores muy pequeños.
    • 2. El diseño elástico especifica las medidas en porcentajes. Esto hace queel contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nospermite aprovecharla completamente. Por contra, en diseños elaborados, es máscomplicado hacer que la página no se descuadre, sobre todo cuando es demasiadoancha o estrecha.Como recordarás, el tamaño de las tablas puede ser definido en píxeles o enporcentaje. 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. Encambio, cuando el tamaño de la tabla sea definido en porcentaje, la tabla seajustará al tamaño del elemento que la contiene, lo cual implica que el contenido dela tabla se puede descuadrar.Al trabajar una página con tablas de tamaño fijo, en píxeles. Si modificas el tamañode la ventana, verás que la tabla es siempre del mismo tamaño. Esto tiene un graninconveniente, ya que si maximizas la ventana del navegador (lo que equivaldría avisualizar la página en un monitor grande con alta resolución), a los lados de latabla aparecerá un gran espacio vacío.Al trabajar con una página con tablas de tamaño variable, en porcentaje. Simodificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usartablas con tamaño variable tiene también un gran inconveniente, ya que simaximizas la ventana del navegador apreciarás claramente cómo el contenido delas 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 losmonitores con alta resolución. Pero con un poco de práctica a la hora de manejarlas tablas, puedes salvar el inconveniente del descuadre de la página y así definirpáginas con tamaño en porcentaje que aprovechen el ancho cuando el monitor demás grande.No solo puede establecerse el tamaño de la tabla, también es posible establecer eltamaño de las celdas.
    • El tamaño de la celda a través del inspector de propiedades estará especificadopor los valores de An (anchura) y Al (altura). Normalmente solo se especifica laanchura, 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 queremosexactamente de 200 píxeles, basta con introducir 200px en An.. Para que, porejemplo, la anchura fuera del 25 por ciento de la tabla, en An. habría que escribir25%.Jugando con las medidas de las celdas de la tabla, y teniendo en cuenta quécontiene cada una de ellas (imágenes, texto alineado a la derecha, texto alineado ala izquierda, texto de gran tamaño, etc.), puede conseguirse que al visualizar lapágina en monitores de distintos tamaños y con distintas resoluciones, la aparienciasea bastante similar, o al menos que la distribución del contenido de la tabla no sevea muy afectado por el cambio de tamaño de la ventana del navegador.Unidad 8. MarcosVamos a ver qué son los marcos y para qué se utilizan. También veremos cómoinsertar un marco sencillo en una página, y cómo trabajar con él.8.1. IntroducciónLos marcos o frames sirven para distribuir mejor los datos de las páginas, ya quepermiten mantener fijas algunas partes, como pueden ser el logotipo y la barra denavegación, mientras que otras sí pueden cambiar. Además de mejorar lafuncionalidad, pueden mejorar también la apariencia.Cada uno de los marcos de una página, contiene un documento HTML individual.Por ejemplo, en la siguiente imagen puedes ver una página con dos marcos. Elmarco izquierdo contiene el documento menu.htm y el derecho el documentoquienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrirel documento index.htm, que es la página que contiene los marcos agrupados.
    • Actualmente los marcos están cayendo en desuso. Aunque son realmenteprácticos, crean problemas a la hora de ser indexados por los buscadores. Y estarcorrectamente indexado y posicionado es crucial para una web.Por ejemplo, si vemos el código fuente de una página con marcos, vemos querealmente no hay más que las llamadas a las páginas correspondientes, por lo queno hay nada que indexar. Por otro lado, si se indexa una página, puede que elvisitante llegue a ella directamente, no a través del marco. Esto hace, por ejemplo,que el usuario no pueda acceder a los elementos de navegación de nuestro sitio.El problema más común al no usar marcos es tener que repetir los elementoscomunes, como el menú y logo en cada página, con la complicacióncorrespondiente a la hora de hacer un cambio. No obstante, esto es fácilmentesolucionable si empleamos PHP o JavaScript en nuestra página.Por lo tanto, si piensas colgar tu página en internet para uso público, no terecomendamos su uso. Pero si la página es de uso privado, tal vez te facilite eltrabajo emplear marcos.
    • 8.2. Crear marcosExisten varias formas de crear un marco. Nosotros vamos a ver solamente una deellas.Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevoo uno ya existente.Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puedeelegirse el tipo de marco que va a crearse.Vamos a ver el marco a la Izquierda.Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda deldocumento actual.
    • Como puedes ver en la imagen, aparece una línea quedivide el documento en dos. El documento de partida era uno nuevo.En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y elque contiene el grupo de marcos. El de la derecha es el documento que teníamosinicialmente, que está en el marco conocido como marco padre (MainFrame).Para seleccionar el documento que contiene el grupo de marcos hay que pulsarsobre la línea que separa los marcos. Esto solo es posible mientras dichodocumento no se haya guardado.Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marcovacío aparecerá a la derecha del documento original.En esta imagen puedes ver un ejemplo de marco a la derecha.Sobre un documento ya existente, menu.htm, se ha insertado un marco a laderecha.Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el dela derecha, y el que contiene el grupo de marcos. En este caso, el documento que
    • teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha.Por ello, en este caso el marco padre será el de la izquierda.El marco padre siempre es el marco en el que se encuentra el documento inicial,sobre el que se han insertado el resto de marcos.8.3. Seleccionar marcosPara seleccionar los marcos del documento es necesario dirigirse al panel Marcos,que puede abrirse a través del menú Ventana. También puedes abrir el panelMarcos pulsando la combinación de teclas Mayúsculas + F2.En el panel Marcos aparecen los marcos que contiene el documento de marcos, yse puede pasar de uno a otro pulsando sobre ellos en el panel. También puedeseleccionarse la página de marcos pulsando sobre el borde que rodea a los marcos(el que aparece más grueso y en relieve en la imagen).No es necesario seleccionar los marcos para editar los documentos que éstoscontengan.Sí es necesario seleccionar los marcos para especificar las propiedades específicasde cada uno de ellos.8.4. GuardarTodos los documentos que contienen marcos tienen que tener una página en cadauno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas pordefecto en cada uno de ellos, a excepción del marco que contiene la páginaoriginal.Estas páginas nuevas pueden ser posteriormente sustituidas por otras yaexistentes, como ya veremos más adelante.
    • Es necesario guardar la página que contiene el grupo de marcos, así como cadauna de las páginas que están incluidas en sus marcos.No es conveniente guardar la primera vez los marcos con la opción Guardar todo, ya que podemos equivocarnos al dar los nombres a los nuevos documentos.Es preferible guardar cada documento uno por uno, a no ser que todos los marcoscontengan alguna página ya existente, ya que en ese caso el único documento alque habrá que dar nombre será al que contiene el grupo de marcos.Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlopreviamente.Para guardar cada uno de los otros documentos, simplemente hay que situar elcursor en ellos antes de pulsar sobre Guardar .8.5. Configurar marcosUna vez seleccionado un marco a través del panel Marcos, pueden establecersesus propiedades a través del inspector de propiedades.Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombrede marco. El nombre no puede contener espacios en blanco.En Origen aparece el nombre del documento HTML que está contenido en elmarco.En Bordes puede elegirse si aparecerá o no una línea separando el marco del restode marcos. En el caso de que se muestre el borde, se puede especificar un colorpara éste a través de Color borde.
    • Desplaz. indica si aparecerán o no las barras de desplazamiento cuando eldocumento del marco no pueda visualizarse completamente.Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar lasmedidas del marco desde el navegador.El Ancho del margen y el Alto del margen indican la separación que habrá entre elcontenido del marco y sus bordes izquierdo-derecho y superior-inferior.Si lo seleccionado es todo el conjunto de marcos (la página de marcos), el inspectorde propiedades es algo diferente.En Bordes puede elegirse si aparecerá o no una línea separando los marcos entresí y puede especificarse un color para este a través de Color del borde. También esposible establecer un grosor para el borde a través de Ancho.El campo Columna (o Fila dependiendo del marco elegido en Selección Fila Col.)sirve para especificar el tamaño del marco, que puede ser en Píxeles, Porcentaje(de la ventana) o Relativo (proporcional al resto de marcos).Normalmente utilizarás dos marcos, uno de ellos con tamaño en Píxeles, que seráel que contenga la barra de navegación, y el otro marco con tamaño Relativo, paraque se ajuste a la ventana del navegador.8.6. Contenido del marcoComo ya has visto, el contenido de un marco puede establecerse a través delcampo Origen del inspector de propiedades.
    • Cuando trabajamos con marcos, queremos poder cargar diferentes documentos encada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras queel de otros ha de poder variar.A través del campo Origen del inspector de propiedades, sólo es posible especificarel documento que se cargará inicialmente en el marco, pero hemos de podercambiar este documento por otro a través de vínculos.Como recordarás, en el tema de hipervínculos vimos los posibles destinos de losenlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordarpara que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcoste serán más fáciles de entender._blank:Abre el documento vinculado en una ventana nueva del navegador._parent:Abre el documento vinculado en la ventana del marco que contiene el vínculo o enel conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el quese encuentra el documento inicial, sobre el que se han insertado el resto de marcos._self:Es la opción predeterminada. Abre el documento vinculado en el mismo marco oventana que el vínculo._top:Abre el documento vinculado en la ventana completa del navegador, lo cual quieredecir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.Además de estos destinos para los enlaces, también aparecerán los nombres de losdistintos marcos de la página.
    • Podemos añadir todos estos destinos a cualquier elemento de la página quecontenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elementoFlash, etc.Gracias a todo esto podremos hacer que las barras de navegación y el resto deenlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de losmarcos, en una ventana nueva, en toda la ventana, etc.Esta tarea puede resultar algo pesada, y al principio complicada, pero da muybuenos resultados finales.Unidad 10. MultimediaVamos a ver cómo insertar elementos multimedia. En concreto, veremos cómoinsertar una animación Flash, un sonido y un vídeo, que son los más empleados.10.1. Películas Flash (SWF)Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Esfrecuente verlas en las páginas iniciales de los sitios web, a modo de presentaciónhacia los usuarios, como banners publicitarios, como botones... Flash es elelemento multimedia más empleado en las páginas web.Estas películas pueden crearse mediante el programa Flash también de Adobe.Para poder ser visualizado en el navegador, y necesitan que el usuario tengainstalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmenteya viene con el navegador.El contenido de esta p&aacutegina requiere una versi&oacuten m&aacutes recientede Adobe Flash Player.Las películas Flash pueden insertarse en una página a través del menú Insertar →Media, opción Flash, o pulsando Ctrl + Alt + F.
    • También pueden insertarse empleando el panel Insertar en la categoría Común,pulsando sobre la opción SWF que aparece al desplegar el menú Media.Veamos las opciones más importantes que nos ofrece el inspector de propiedadescuando tenemos seleccionado el archivo Flash:Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) yalto (Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambiossobre el archivo original (.fla), nos resultará muy útil indicar su ubicación enOrigen. Así, para editarlo, bastará con pulsar Editar.La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde elprincipio.La otra es la opción Rep. autom. (reproducción automática), que al estar marcadaindica que nada más cargarse la página comenzará a reproducirse la película Flash.Si esta opción no estuviera marcada, se mostraría únicamente el primer fotogramade la película hasta que el usuario la activase. Por tanto interesa desmarcar estaopción cuando se desea que la reproducción sea activada por algúncomportamiento.
    • La Calidad, cuanto más baja, antes se cargará el archivo pero peor se verá.Conviene dejarla en Alta para verlo tal cuál se creó.La Escala permite elegir cuanto se verá del archivo. Las películas Flash no siempreson del tamaño exacto del contenido, pueden tener un escenario de fondoalrededor del objeto, aunque no se muestre. Si dejamos Predeterminada, se verátodo la película. En cambio, si elegimos Ajuste exacto, se verán sólo los objetos,omitiendo el escenario de fondo.Alinear funciona como con las imágenes, y nos permite alinear la película enrelación con el texto. Si queremos centrarla horizontalmente, podemos optar porcentrar el contenido del elemento que contiene el Flash (normalmente un párrafo)empleando CSS.Wmode es el modo de ventana. Si es opaco, otros elementos pueden aparecersobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a noser que se haya especificado un color de fondo en el Flash).El botón Reproducir nos permite ver la película.Al insertarse la película, veremos la ubicación en la vista de diseño con el siguienteaspecto:Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunosarchivos que nos permitirán reproducir los elementos, normalmente creando lacarpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestrositio, si no los archivos no se verán. De todas formas, Dreamweaver nos avisarácuando incluya archivos.
    • 10.2. SonidoNo es muy habitual incluir sonido en una página web, ya que algunos usuariossuelen estar escuchando su propia música cuando navegan en Internet, por lo queel escuchar también sonido en cada página que se visita puede resultar algomolesto.A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página,puede hacerla más atractiva. Las páginas que contienen sonido suelen ofrecer laposibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseenescuchar el sonido de la página puedan desactivarlo. Siempre es mejor que que elusuario abandone la página.Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3,el WAV y en algunas ocasiones el MIDI, aunque existen otros formatos diferentesque también pueden utilizarse. Lo ideal es incluir algún archivo de audio que noocupe mucho espacio, y que no por ello sea de mala calidad.Para insertar un archivo de audio en un documento tienes que dirigirte al menúInsertar, Medía, opción Plug-in.A continuación, para el que se muestran los controles de audio. Si lo deseas,puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces,si los tienes).
    • Pueden ocurrir dos cosas:Si tu navegador tiene instalado el plugin necesario para reproducir el archivo, semostrará un control similar a este (imagen de IE8):En cambio, si el plugin necesario no está instalado, el navegador ofrecerá laposibilidad de hacerlo, como en esta imagen de Firefox.Un plugin es un añadido al navegador, que nos permite realizar funciones extra,como en este caso, reproducir un archivo de música. Al insertar un elemento comoplug-in lo que indicamos es que el navegador debe de intentar abrir el archivoempleando los pluigns que tenga para tal fin. Por eso, si no lo tiene, nos invitará ainstalarlo.En Dreamweaver no se mostrarán los controles de audio. Todos los archivosque son insertados como plugin aparecen representadas dentro deDreamweaver por una imagen como la de la izquierda.En el inspector de propiedades pueden establecerse la altura y la anchura con laque se mostrarán los controles de audio, mediante Al y An.En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto delos controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que seescuche el sonido en la página, pero que no se muestren los controles de audio, loscampos Al y An deben valer cero.Los sonidos se reproducen automáticamente al cargarse la página, y se reproducensolamente una vez. Estos valores no pueden definirse como propiedades a travésdel inspector de propiedades, pero si los conocemos podemos empelar el botónParámetros....
    • Por ejemplo, para que el archivo se reproduzca continuamente se hemos añadidoloop="true".Si no queremos que se reproduzca automáticamente, podemos añadir tambiénautostart="false"La línea de código del archivo de audio nos quedaría del siguiente modo:<embed src="media/audio.mid" autostart="false" loop="true"></embed>Si quieres poner música de fondo en una página web, sin que aparezcan loscontroles de audio, puedes escribir este código directamente en la vista Código.<bgsound src="cancion1.wav" loop="-1">Insértalo después de la etiqueta </title> Con el parámetro loop puedes decidircuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modocontinuo).No obstante, insistimos en que no es recomendable poner música sin controles dereproducción.Lo más habitual en la web es insertar el sonido empleando Flash. Esto hace que nose necesiten plugins, sólo poder reproducir Flash. Además, nos permite crear loscontroles personalizados.
    • 10.3. VídeosEn ocasiones puede interesar incluir algún vídeo en una página web, pero hay quetener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lotanto, precisan de mucho tiempo para descargarse.En este apartado nos referimos a inserta vídeo de un archivo alojado en nuestrositio. No a mostrar vídeos de sitios especializados, como youTube.Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y elMOV.Para insertar un archivo de vídeo en un documento tienes que dirigirte al menúInsertar, Medía, opción Plug-in.Puedes ver el vídeo (si tienes el plugin adecuado) a continuación:El inspector de propiedades para los archivos de vídeo insertados de esta forma esel mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.Hay que prestar especial atención al ancho y alto. Por defecto, si Dreamweaver nopuede obtener el tamaño del archivo lo fijará a 32 x 32, insuficiente para ver unvídeo. Es mejor borrarlos, y así el vídeo se mostrará con su tamaño original. Siconocemos el tamaño del vídeo, podemos pensar en insertarlo directamente, perohay que tener en cuenta el tamaño de los controles de reproducción, que dependede cada navegador.Los vídeos también se reproducen automáticamente al cargarse la página, y sereproducen solamente una vez. Estos valores pueden cambiarse a través botónParámetros, del mismo modo que en el caso de los archivos de audio, añadiendoautostart="false" y loop="true".
    • Como ya hemos dicho, todos los objetos insertados a través de la opción Plug-inprecisan que el usuario tenga instalado un reproductor o un plug-in apropiado parareproducirlos. En el campo Origen del inspector de propiedades se establece elarchivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puedeestablecerse en el campo URL plg una página en la que pueda encontrarlo. No seránecesario en los archivos más comunes de audio y vídeo, pero sí si intentamoscargar un archivo más raro.