Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te animas a comprar la versión de pago de este estupendo programa.
Si no conoces las características básicas de HTML puedes verlas aquí.
Novedades de Dreamweaver 8
En este punto comentaremos las características que aporta esta nueva versión sobre la anterior, Dreamweaver MX 2004.
Integración de RSS: con Dreamweaver 8 podrás integrar entradas RSS provinientes de otras páginas con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma podrás introducir datos en forato XML fácil y cómodamente.
Mejoras CSS: esta última versión ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrás acceder a la configuración de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrícula editable desde donde podrás modificar sus propiedades. Además, Dreamweaver 8, añade una nueva barra de herramientas que proporciona la reprodución inmediata de los estilos para diferentes medios (pantalla, impresora, webTV, PDAs...).
Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C.
Transferencia de archivos: Ahora con Dreamweaver 8 podrás seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronización ha mejorado notablemente siendo posible una mejor gestión de cambios, además de pemitir en uso de bolqueo/desbloqueo de archivos para que estos no se sobreescriban.
Interfaz mejorada: Los usuarios con problemas visuales podrán acceder auna opción de Aumento de la pantaña en vista de diseño para analizar o trabajar con difícles anidamientos de tablas. Además de la inclusión de información visual gracias a las guías que permitirán la medición píxel a píxel de todos los elementos.
Nueva barra de herramientas: Se ha añadido una barra de herramientas a Dreamweaver 8, podrás encontrarla en la parte lateral izquierda del modo de Código, esta barra hace mucho más accesible el código al permitirnos la navegación por etiquetas y su contracción. Una de las nuevas novedades es la posibilidad de añadir comentarios con un sólo clic.
Compatibilidad: Comentaremos, además, la compatibilidad añadida en esta versión con PHP5, Coldfusion MX 7 y Video Flash.
Editar páginas web
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión HTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromedía Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.
Cómo tener una página en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.
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.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.
Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores distinguen entrre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imágen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.
Unidad 2. El entorno de trabajo (I)
Vamos a ver cuáles son los elementos básicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cómo se llaman, dónde están y para qué sirven. También veremos cómo obtener ayuda, por si en algún momento no sabemos cómo seguir trabajando. Cuando conozcamos todo esto estaremos en disposición de empezar a crear páginas web.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.
Las barras
La barra de título
La barra de título contiene el nombre del programa (Marcromedia Dreamweaver y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
La barra de menús
La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
La barra de herramientas estándar
La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir , Guardar, etc.
La barra de herramientas de documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
La barra de estado
La barra de estado nos indica en cada momento en qué etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>).
También nos es posible alternar entre los modos de selección, mano (para arrastrar la página), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%).
Los paneles e inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
El inspector de Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.
Pulsando sobre el botón se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.
La barra de herramientas Insertar o panel de objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú Insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.
Personalizar el área de trabajo (I)
Cambiar el aspecto del Panel de objetos
Es posible cambiar el aspecto del panel de objetos, se puede visualizar a modo de fichas, tal como aparece en la siguiente imagen:
También puede tener este otro aspecto:
Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botón , y seleccionar la opción Mostrar como menú.
Para volver al aspecto Fichas, desplegamos el menú Diseño (o el que esté en ese momento) y seleccionamos la opción Mostrar como fichas.
Cambiar el nombre de un grupo de paneles
Es posible cambiar el nombre de un grupo de paneles de forma sencilla. Vamos a ver como ejemplo el cambio de nombre del panel de objetos.
En estos momentos el panel se llama "Insertar", pero queremos renombrarlo como "Insert". Para ello lo primero que hay que hacer es pulsar con el botón derecho sobre la zona del nombre o hacer clic sobre el botón con el siguiente aspecto , ambos situados a los extremos superiores del panel.
Entonces se mostrará el siguiente menú, en el que habrá que elegir la opción Cambiar nombre de grupo de paneles....
Después de esto se mostrará una ventana en la que se podrá introducir el nuevo nombre del panel
Cambiar la agrupación de los paneles
La mayoría de los paneles y los inspectores aparecen agrupados junto a otros en una misma ventana flotante.
Para cambiar la agrupación de un panel o de alguna de sus pestañas es necesario, en primer lugar, seleccionar el panel y la pestaña deseados.
Por ejemplo, vamos a ver cómo cambiar la agrupación de la pestaña Capas del panel Diseño.
Como puede apreciarse en la imagen, la pestaña Capas ya está activa.
Seguidamente hay que hacer clic sobre el botón con el siguiente aspecto , o pulsar con el botón derecho sobre la zona del nombre del panel o de la pestaña.
Para cambiar la agrupación del panel a otro grupo diferente es necesario dirigirse a Agrupar Capas con, después de lo cual debe mostrarse una lista de todos los paneles, pudiendo seleccionar uno de ellos.
De este modo Capas dejaría de estar incluida en el panel Diseño, y aparecería en ese otro panel.
Unidad 3. Configuración de un sitio local (I)
En este tema vamos a ver qué es un sitio web, cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.
Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.com en el navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm.
Una vez creadas las carpetas que formarán un sitio local, ya es posible definir el sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios....
Recuerda que a través del panel Archivos, pestaña Archivos, se puede acceder a cada uno de los sitios creados y a la opción Administrar sitio.
En el caso de haber seleccionado la opción Administrar sitios, aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrará la misma ventana en la que definir las características del sitio.
Las características del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.
Para visualizar las características de una categoría basta con seleccionarla de la lista haciendo clic en ella.
Vamos a ver los datos que hay que editar para la categoría Datos locales.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña Básicas, en vez de la pestaña Avanzadas.
Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.
También podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el menú desplegable de la pestaña Archivos.
Unidad 5. Hiperenlaces (I)
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.
Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta:
Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo.
La ubicación es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el documento actual.
Si queremos referinos a carpetas que están por encima del nivel donde nos encontramos deberemos utilizar ../
Por ejemplo, imagina que estamos en la siguiente dirección http://www.misitio.com/pagina/informacion/index.html. En esta página queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, ¿cómo podemos hacerlo? Fácil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones.
El resultado de la ruta sería el siguiente: ../secciones/seccion1.html.
De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html.
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
En este método los enlaces se crean indicando la ruta a partir de la raíz del sitio.
En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier página del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se crearía como /pagina/secciones/seccion1.html.
Como puedes ver ahora el vínculo a un archivo en todas las páginas es igual porque se define dependiendo del sitio raíz y no de la ubicación donde se encuentra.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínvulo debe ser nombre_de_documento.extension#nombre_de_punto.
El punto se define dentro de un documento a través del menú Insertar, opción Anclaje con nombre.
Podríamos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2
Estos tipos de enlace que hemos visto son válidos tanto para referenciar páginas (para crear hiperenlaces) o incluso imágenes u otro tipo de objetos (como veremos en temas posteriores).
Deberás tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto).
Por ello, es muy recomendable que utilices siempre minúsculas para evitar fallos en los enlaces.
También deberás evitar utilizar caracteres especiales como acentos o espacios, así no tendrás problemas a la hora de referenciar tus objetos.
Crear enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla #.
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrará el enlace
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te creará un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado .
Destino: la página 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, es equivalente al atributo ALT de las imágenes.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.
Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a través del menú Insertar, opción Hipervínculo.
_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 en el conjunto de marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos.
Unidad 6. Imágenes (I)
En este tema vamos a ver cómo insertar imágenes en un documento. También veremos cómo crear algunas imágenes especiales, como es el caso de los Rollovers y los botones flash, que ayudan a mejorar la apariencia de nuestras páginas.
Introducción
Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.
Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. Esta información puedes consultarla aquí .
Insertar una imagen
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos.
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la carpeta imagenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/aulaclic.jpg
Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque sí en el navegador. En Dreamweaver aparecerá de la siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que había sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecerá en el navegador será similar a esta:
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades, que explicaremos a continuación.
Cuando seleccionamos una imagen el Inspector de propiedades muestra esta apariencia:
Desde aquí podrás acceder a distintas propiedades:
Desde el campo Alt podrás asignarle una ayuda contextual a la imagen, esta se mostrará cuando coloques el ratón sobre ella, y es muy útil de cara a hacer páginas accesibles ya que el texto que se escribe será leído por los programas lectores para invidentes. También es muy útil, como ya hemos visto, si la imagen por alguna razón no puede mostrarse.
En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.
Si le damos un valor al campo Vínculo convertiremos al imagen en un link a otra página. Para enlaces externos recuerda que debe empezar siempre por HTTP:// y si deseas crear un vínculo a un enlace electrónico deberá empezar por mailto:
En caso de que le hayas asignado un vínculo podrás decidir en qué ventana quieres que se abra selecionando un valor en el campo Destino.
Puedes asignarle un tamaño de borde desde el campo Borde.
Y 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 del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto.
Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen dentro de la página.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de cómo podría quedar modificándola desde un editor externo, como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa el icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:
Imagen original
Imagen con tamaño modificado
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.
La otra es a través de inspector de propiedades, cambiando los campos An (anchura) o Al (altura). Estos campos aparecerán en el inspector cuando esté seleccionada alguna imagen.
Si estos campos no contienen el tamaño original de la imagen, el valor aparecerá resaltado en negrita y aparecerá a la derecha una flecha circular que permite volver al tamaño original haciendo clic sobre ella.
Unidad 7. Tablas (I)
En este tema vamos a ver cómo trabajar con tablas. Podremos, entre otras cosas, insertar tablas, combinar celdas, insertar filas o columnas y cambiar el tamaño del borde.
Introducción
Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.
Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.
Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas. A continuación tienes un ejemplo de tabla.
Insertar una tabla
Para insertar una tabla hay que dirigirse al menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el número de Filas y Columnas que tendrá la tabla, así como el Ancho de la tabla .
El Ancho puede ser definido como Píxeles o como Porcentaje. La diferencia de uno y otro es que el ancho en Píxeles es siempre el mismo, independientemente del tamaño de la ventana del navegador en la que se visualice la página, en cambio, el ancho en Porcentaje indica el porcentaje que va a ocupar la tabla dentro de la página y se ajustará al tamaño de la ventana del navegador, esto permite que los usuarios que tengan pantallas grandes, aprovechen todo el ancho de pantalla.
Grosor del Borde indica el grosor del borde de la tabla en píxeles, por defecto se le asigna uno (1).
Relleno de celda indica la distancia entre el contenido de las celdas y los bordes de éstas.
Espacio entre celdas indica la distancia entre las celdas de la tabla.
También se puede establecer si se quiere un encabezado para la tabla es recomendable utilizar encabezados en el caso de que los usuarios utilicen lectores de pantalla. Los lectores de pantalla leen los encabezados de tabla y ayudan a los usuarios de los mismos a mantener un seguimiento de la información de la tabla.
Si queremos incluir un título, lo indicamos en Texto, el título aparecerá fuera de la tabla.
En alinear texto indicamos dónde queremos alinear el título con respecto a la tabla.
En Resumen: indicamos una descripción de la tabla, los lectores de pantalla leen el texto del resumen pero dicho texto no aparece en el navegador del usuario.
Rellenar las celdas
Las celdas son cada uno de los recuadros que forman una tabla, resultan de la intersección entre una fila y una columna.
imagen y texto
COLUMNA
Texto dentro de una celda
CELDA
FILA
Para poder insertar algún elemento en una celda, ya sea texto o imágenes, simplemente hay que situar el cursor previamente dentro de la celda deseada.
Unidad 8. Marcos (I)
Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.
Introducción
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm, que es la página que contiene los marcos agrupados.
Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Después, dirigirse al menú Insertar, HTML, Marcos. A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda.
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vací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 la derecha.
Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. En este caso, el documento que 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.
Unidad 9. Formularios (I)
Vamos a ver qué es un formulario, para qué se utiliza, cómo insertar uno, qué elementos puede contener y cómo pueden validarse los datos introducidos en él.
Introducción
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
Aquí vamos a ver cómo crear el formulario, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programación, ya sea en VBScript, en JavaScript o en otro lenguaje de programación, y esto no entra en los objetivos del curso.
A la derecha tienes un ejemplo de formulario.
Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones.
Elementos de formulario
Los elementos de formulario pueden insertarse en una página a través del menú Insertar, opción Formulario.
A través de esta opción se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la página.
Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, así como algunas de sus propiedades.
Campo de texto y Área de texto
Permiten introducir texto. El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.
Se puede pasar de Campo de texto a Área de texto a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente.
También es posible definirlo como Contraseña es como el campo de texto pero las letras que va tecleando el usuario se sustituyen por un carácter como podrás ver en la imagen siguiente.
A continuación tienes un ejemplo de cada uno de estos tres tipos. Puedes escribir en ellos para ver su funcionamiento.
A través del inspector de propiedades es posible asignar también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro.
Botón
Es el botón tradicional de Windows. El botón puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores).
También es posible cambiar el texto del botón, a través de la propiedad Etiqueta del inspector de propiedades.
Casilla de verificación
Es un cuadrito que se puede activar o desactivar.
Puede asignársele el Estado inicial como Activado o como Desactivado.
Botón de opción
Es un pequeño botón redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, sólo puede haber uno activado. Cuando se activa uno, automáticamente se desactivan los demás.
Lista/Menú
Una lista o menú es un elemento de formulario que lleva asociada una lista de opciones.
Los elementos se añaden a través del botón Valores de lista... del inspector de propiedades.
Cuando se trata de un menú, solo es posible elegir uno de los elementos, pero si se trata de una lista, a través de Selecciones del inspector de propiedades puede permitirse que se seleccionen varios simultáneamente.
Etiqueta
Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qué datos ha de introducir en cada uno de ellos.
Unidad 10. Multimedia (I)
Vamos a ver cómo insertar elementos multimedia. En concreto, veremos cómo insertar una animación Flash, un sonido y un vídeo.
Películas Flash
Las películas Flash son animaciones, que al igual que los botones y el texto Flash, tienen la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, aunque se pueden utilizar para realizar cualquier tipo de animación.
Estas películas pueden crearse mediante el programa Flash de Macromedía, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.
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 pulsando sobre la opción Flash que aparece en la pestaña Común del panel Insertar, botón Media.
El inspector de propiedades de las películas Flash es prácticamente igual que el de los botones y el texto Flash, pero existen dos opciones nuevas que hacen referencia a la visualización de la película.
La opción Bucle indica que al finalizar la película, ésta volverá a comenzar desde el principio.
La otra es la opción Rep. autom. (reproducción automática), que al estar marcada indica 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 fotograma de la película.
Interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
Sonido
No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.
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 diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar, Medía, opción Plug-in.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles (recuerda encender los altavoces, si los tienes).
En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se 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 de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y Andeben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores no pueden definirse a través del inspector de propiedades, pero sí a través del código. Una vez definidos los podremos cambiar desde el inspector de propiedades con el botón Parámetros...
Por ejemplo, el archivo anterior aparecía en el código como <embed src="varios/audio.mid"></embed>. Pero para que no se reproduzca automáticamente se ha añadido autostart="false", y para que se reproduzca continuamente se ha añadido loop="true".
La línea de código del archivo de audio ha quedado del siguiente modo:
En el Inspector de propiedades del sonido, el botón Parámetros... abre un cuadro de diálogo donde podemos cambiar esos valores una vez introducidos.
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner música de fondo en una página web, sin que aparezcan los controles 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 decidir cuántas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
Unidad 11. Las plantillas (I)
En este tema vamos a ver qué son las plantillas, cómo crearlas y cómo basar documentos en ellas.
Introducción
Cada vez que deseamos crear un sitio web, tenemos que tener muy en cuenta que las páginas deben seguir un formato uniforme.
La mayoría de nosotros solemos hacer copias de los documentos ya creados, y trabajar sobre estas copias, modificando simplemente su contenido. Esta es la forma más sencilla de tener páginas con una estructura basada en la estructura de otras ya creadas previamente.
Las plantillas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web, pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modificadas.
No es posible modificar las propiedades de una página que está basada en una plantilla, a excepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferentes con los distintos colores, y basar las páginas en una u otra plantilla, según el color de fondo que se desee para cada una.
Cuando se modifica el diseño de una plantilla, se pueden actualizar todas las páginas basadas en ella.
Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates.
Crear plantillas
Las plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Archivos, pestaña Activos.
La pestaña Activos se puede abrir a través del menú Ventana, opción Activos. También pulsando F11.
Una vez abierto el panel hay que seleccionar el botón , para poder trabajar con las plantillas.
Los botones inferiores del panel Activosson similares a los del panel Estilos CSS.
El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botón (Si este botón no está activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla).
Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él.
Para modificar una plantilla la seleccionamos de la lista y pulsamos el botón .
Paraeliminar una plantilla la seleccionamos de la lista y pulsamos el botón .
Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo, opción Guardar como plantilla.
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha.
En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio: en el que se va a guardar.
Unidad 12. HTML desde Dreamweaver (I)
En este tema vamos a ver algunas de las facilidades que proporciona Dreamweaver para trabajar sobre el propio código HTML, y no únicamente sobre el editor gráfico de la vista diseño.
En este tema no se pretende enseñaros el lenguaje HTML sino cómo poder realizar algunos reajustes directamente en el código estando dentro de Dreamweaver.
Etiquetas
Ya sabes que el lenguaje HTML está basado en etiquetas que marcan el inicio y fin de cada elemento de la página Web.
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el código HTML de una página para darle un título. Consistía simplemente en escribir el título deseado entre las etiquetas <TITLE> y </TITLE>.
Las etiquetas consisten en poner un mismo comando entre los símbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el símbolo /, indica final y se suele denominar etiqueta de cierre.
Las etiquetas disponen de atributos que permiten definir características del elemento sobre el que actúan, incluyendo cierto código dentro de la etiqueta.
Por ejemplo, un párrafo se inserta entre las etiquetas <P> y </P>, pero es posible cambiar sus características predeterminadas, como puede ser alinearlo a la derecha. Para ello, en lugar de introducir el texto del párrafo entre las etiquetas anteriores, ha de insertarse entre las etiquetas <P align="right"> y </P>.
También hay elementos que no precisan insertar etiqueta de cierre. Por ejemplo, un May+INTRO dentro del código HTML equivale a la etiqueta <BR>.
También podrás ver la etiqueta <br /> en las páginas que sigan el estándar XHTML. Éste obliga a que todas las etiquetas se cierren, incluso aquellas que no tienen etiqueta final, por lo que <BR> pasa a ser <br /> o <HR> a <hr />.
Dreamweaver inserta automáticamente las etiquetas necesarias para construir la página con la apariencia y contenido definidos en el editor gráfico, pero también ofrece otras posibilidades para trabajar directamente sobre el código.
Entidades HTML
HTML también dispone de códigos especiales para representar caráceteres especiales como pueden ser letras con acentos o no pertenecientes al alfabeto latino internacional, signos de puntuación o tipográficos y símbolos especiales que presenten un problema en HTML como < ó >, que podrían malinterpretarse por el inicio de una etiqueta.
Estos códigos pueden mostrarse como un código numérico o con un nombre de entidad. Ambos métodos son igualmente aceptables, pero ambos deberán ir encerrados entre los símbolos & y ;.
De este modo, < se escribirá como < o <
Usar este método es muy aconsejable, de esta forma los navegadores que estén configurados para visualizar juegos de caracteres que no contengan letras como la ó o la ñ podrán ver el sitio correctamente. En caso contrario estos caracteres se mostrarían de forma extraña.
En el tema 4 vimos que podíamos escribir estos caracteres utilizando el menú Insertar. Ahora te mostraremos otra forma para escribir caracteres que no se incluían en el listado de Dreamweaver y que podrás insertar escribiendo sus entidades en la vista de Código.
Aquí tienes una tabla de los caracteres más utilizados con sus Entidades HTML numérica y de nombre de entidad:
Si escribes más de un espacio en Dreamweaver, cuando lo visualices en un Navegador sólo veras uno. Esto es debido a que en HTML las palabras separadas por más de un espacio se visualizan sapradas de uno.
Para saltarte esta norma puedes escribir tantas veces como quieras y se visualizarán tantos espacios como elementos de entidad hayas introducido.
Unidad 13. Otros elementos (I)
Vamos a ver una serie de elementos que suelen aparecer en las páginas web, como pueden ser las marquesinas, las reglas horizontales y la fecha.
Marquesinas
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.
Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.
También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.
Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>
Unidad 14. Capas
Vamos a ver algunas de las características básicas sobre las capas, para luego poder trabajar con ellas y aplicarles algún comportamiento.
Introducción
Las capas no son más que unos recuadros, que pueden situarse en cualquier parte de la página, en los que podemos insertar contenido HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona grandes posibilidades de diseño.
Las capas pueden moverse de una posición a otra de la ventana pulsando sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros negros, y arrastrándolos hasta conseguir el tamaño deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes, animaciones flash, y todos los elementos que puede contener un documento HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.
Insertar una capa
Las capas pueden insertarse en una página a través del menú Insertar, opción Objeto de diseño, Capa.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para ello hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando sobre el icono correspondiente, pero esto no resulta útil cuando existen muchas capas en un mismo documento, ya que todas las capas tienen asociada una imagen igual a esta, y no es fácil seleccionar la deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Capas del panel Diseño, que puede abrirse a través del menú Ventana opción Capas. Si la opción Capas no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros. También puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en el documento actual, y para seleccionar una de ellas simplemente hay que pulsar sobre el nombre en el panel.
Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades.
ID de capa es el nombre de la capa. También puede ser cambiado a través del panel Capas, haciendo doble clic sobre él.
Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo y superior del documento y la capa.
An y Al indican la anchura y la altura de la capa.
Índice Z es el número de orden de colocación de las capas. Este valor también puede cambiarse a través del panel Capas. Una capa será solapada por aquellas capas cuyo índice Z sea mayor que el suyo.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad según el navegador),
Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
Visible (muestra la capa, aunque la página no se esté viendo) y
Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
Desb. (Desbordamiento) controla cómo aparecen las capas en un navegador cuando el contenido excede el tamaño especificado de la capa.
Visible indica que el contenido adicional aparece en la capa. La capa se amplía para darle cabida.
Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no.
Auto (automático) hace que el navegador muestre barras de desplazamiento para la capa cuando sean necesarias (es decir, cuando el contenido de la capa supere sus límites).
Unidad 15. Comportamientos (I)
En este tema vamos a ver las características básicas de los comportamientos, así como un par de ejemplos de entre sus posibles aplicaciones.
Introducción
Los comportamientos son acciones que suceden cuando los usuarios realizan algún evento sobre un objeto, como puede ser mover el ratón sobre una imagen, pulsar sobre un texto, hacer doble clic sobre un mapa de imagen, etc.
Los comportamientos no existen como código HTML, se programan en JavaScript. Dreamweaver permite insertarlos a través del panel Comportamientos, por lo que no es necesario escribir ninguna línea de código JavaScript para programarlos.
La imagen que aparece a continuación tiene asociado un comportamiento. Sitúa el puntero sobre ella para ver qué es lo que ocurre.
Estás visualizando una capa que estaba oculta.
Si dejas de situar el puntero sobre la imagen, la capa volverá a ocultarse.
La imagen tiene asociados dos comportamientos para mostrar y ocultar la capa. Este tipo de comportamiento lo veremos más adelante.
Otros comportamientos que ya has visto son los que se aplican sobre las imágenes de sustitución y las barras de navegación, que ya están predefinidos, por lo que no es necesario introducir este conjunto de comportamientos a través del panel Comportamientos.
Para validar formularios ya viste algunas características del panel Comportamientos. Vamos a recordar las que necesitamos para poder insertar comportamientos más tarde.
El panel Comportamientos se puede abrir a través del menú Ventana, opción Comportamientos. También pulsando Mayús+F3.
En este panel hay que desplegar el botón pulsando sobre él, y en Mostrar eventos para elegir una versión de la lista de navegadores.
Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecerán unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayoría de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar alguna de sus últimas versiones: IE 5.5 o IE 6.0.
Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algún comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algún navegador, ya se pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc.
Al desplegar el botón del panel Comportamientos aparece la opción Mostrar eventos para, a través de la cual se había elegido el navegador. También aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una.
Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no.
En este caso la acción Validar formulario no puede seleccionarse porque no existe ningún formulario en la página.
Después de elegir alguna acción, el comportamiento correspondiente aparece en el panel Comportamientos. En este caso se han insertado dos comportamientos.
Como puedes ver, cada comportamiento tiene asociados un evento y una acción.
Las acciones son las que se han elegido en la lista anterior y el evento indica cuándo se debe de realizar la acción.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botón . También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los botones .
Unidad 16. Comportamientos Avanzados (I)
En el tema anterior vimos algunos de los comportamientos básicos, en este tema veremos otros comportamientos y veremos cómo utilizarlos y aprovecharnos de esta característica de Dreamweaver para crear diversas funcionalidades automáticamente.
Mensajes emergentes
Este comportamiento te permitirá crear avisos emergentes como en el siguiente ejemplo.
Este comportamiento es útil para poder enviar mensajes al usuario. Ten en cuenta que no deberás abusar de ellos, pues a la larga pueden resultar un poco incómodos, utilízalos con un objetivo concreto y no porque quieras atraer la atención del usuario.
Para crear un mensaje emergente deberás seleccionar el elemento al cual irá asociado el mensaje, en el ejemplo es un texto.
Una vez seleccionado ves al panel Comportamientos (Mayus+F4) pulsa el botón y selecciona la opción Mensaje emergente.
Se abrirá el siguiente cuadro de diálogo:
Aquí deberás introducir el Mensaje que quieras que se muestre. Pulsa Aceptar cuando hayas acabado y estará listo.
Es aconsejable que asocies este comportamiento al evento onClick (cuando el usuario hace clic). Es más intuitivo para el usuario, por ejemplo, si asocias el mensaje a un evento onMouseOver (cuando se pase el ratón por encima) el usuario no sabrá muy bien porque se ha generado el mensaje de aviso.
En realidad no habrá hecho ningún movimiento voluntario para recibir ese tipo de respuesta. Debido a esto (el estimulo-respuesta que espera el usuario), el evento onClick es el más indicado para este caso.
Texto de la Barra de Estado
El Texto de la Barra de Estado es un elemento muy utilizado a la hora de personalizar una página web. Aunque no funciona en algunos navegadores.
Si observas esta barra cuando navegas verás que va cambiando su texto según te encuentres sobre un enlace o no. Normalmente, las páginas que no tratan la Barra de Estado (por ejemplo, esta) no muestran ninguna información. Únicamente cuando posicionas el puntero sobre un enlace el texto de la Barra cambia para mostrar la dirección a la que este se dirige.
Cambiar el Texto de la Barra de Estado significaría modificar el texto que aparece en ese momento cuando realizamos un evento sobre un elemento en particular. Por ejemplo:
Este comportamiento es muy útil para personalizar mucho más tu página y mostrar información que de otra forma no sería posible. Aunque no todos los navegadores son capaces de responder a este comportamiento.
Para crear este comportamiento selecciona el elemento al cual quieres asociar este comportamiento. Abre el panel Comportamientos (Mayus+F4) y pulsa el botón .
Luego selecciona la opción Definir texto y haz clic en Establecer texto de la barra de estado.
Aquí deberás escribir el texto que quieres que aparezca en el cuadro Mensaje, luego pulsa Aceptar y listos.
¿Dónde y cómo asociar el texto en una página? es sencillo. Una de las opciones que te da este comportamiento es poder asociar un texto en concreto a la página en sí.
Es decir, que cuando abras una página se muestre inmediatamente (y permanentemente) un texto en la barra de estado. Eso es posible creando el mensaje asociado al body de la página (para ello tendrás que insertar el comportamiento sin seleccionar ningún elemento para que se asocie con toda la página) y lanzándolo en el evento onLoad (en la carga del documento). De esta forma cuando se abra la página se mostrará el mensaje en la barra de estado y permanecerá allí hasta que se produzca un cambio (por ejemplo, que se posicione el cursor sobre un enlace).
Ahora veamos cómo debemos actuar al establecer texto para los enlaces. En este caso será necesario que introduzcamos dos comportamientos.
El primero, asociado al evento onMouseOver (cuando el ratón se encuentra encima) que mostrará el mensaje que queramos.
El segundo deberá ir asociado al evento onMouseOut (cuando el ratón deja de estar encima) que deberá limpiar la barra de estado para que recupere su estado anterior.
En el caso de que hubiésemos establecido un mensaje para el body de la página, al salir de un enlace (en el onMouseOut) deberemos volver a escribir ese mensaje para que siga mostrándose.
En el caso de que la página no tuviese un mensaje personalizado, deja el cuadro Mensaje en blanco para que la barra de estado recupere su estado natural.
Observa que si no estableces el segundo comportamiento, cuando posiciones el ratón sobre el enlace (o imagen, párrafo..., da igual) el texto de la barra de estado cambiará. Pero cuando el ratón deje de estar sobre el elemento no habrá ninguna orden para que el texto vuelva a cambiar y se mantendrá fijo con el mensaje del anterior comportamiento.
Unidad 17. Estilos CSS Avanzado (I)
En temas anteriores vimos cómo funcionaba el Panel CSS y cómo crear hojas de estilos para poder utilizarlas en tus páginas web.
En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es CSS y cómo crear estilos CSS para crear páginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium).
Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página de un modo eficiente.
En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de una forma mucho más limpia y cómoda.
Aplicar estilos CSS
Hasta ahora, si has entrado un poco en el código de las páginas, habrás visto etiquetas que introducían estilos CSS en ellas.
La forma más habitual de presentarse es en la sección head de la página de esta forma:
Este método lo utilizaremos para incrustar el código directamente sobre el archivo HTML.
También es posible importar archivos de hojas de estilos (de extensión .css) que hayamos creado. Como ya hemos visto esta opción es mucho mejor porque así podemos aplicarla sobre varias páginas a la vez sin la necesidad de escribir el código en cada una de ellas.
En este caso deberemos crear un archivo CSS (Archivo → Nuevo y seleccionando CSS) donde escribiremos las reglas de estilo del mismo modo en el que hemos visto más arriba pero eliminado el componente HTML:
Una página puede contener ambos tipos de estilos CSS, como por ejemplo, tener un archivo vinculado y luego un bloque de estilo incrustado. O incluso tener varias hojas de estilo asociadas.
La organización de los estilos debes decidirla tú. Pero recuerda que cuanto menos código repitas en tus páginas, más fácil será luego de modificar o exportar.
También es posible declarar el estilo en línea. Es decir, tal y como se van creando las etiquetas HTML, para ello deberás utilizar el atributo style:
<p style="color: red; font-size: 30px;">Este texto está en rojo y con un tamaño de 30 píxeles</p>
El estilo en línea es más desaconsejado porque es más difícil de modificar al tener que buscarlo por el texto y modificándolo uno a uno.
Unidad 18. Sitios Remotos (I)
En el tema 3 vimos cómo crear y trabajar con un sitio local.
Esta unidad está dedicada a los Sitios Remotos, veremos cómo crearlos y cómo utilizarlos.
Definir un sitio remoto significa establecer una configuración de modo que Dreamweaver sea capaz de comunicarse directamente con un servidor en Internet (por eso se llama remoto) y así poder trabajar a la vez con tus archivos en el sitio local, es decir, la copia que tienes en tu ordenador, y en el sitio remoto, colgados en el servidor, en Internet.
El modo en el que veremos que el programa se comunica con tu servidor será FTP, ya que es prácticamente el más utilizado y muy pocos utilizan otras alternativas.
Configurar un Sitio Remoto
Muy bien, ahora veamos los pasos que tenemos que seguir para configurar las opciones y que Dreamweaver se pueda conectar con nuestro servidor.
Para ello deberemos modificar la especificación que creamos en su día del sitio con el que estamos trabajando.
Así que haz clic en Sitio y selecciona Administrar sitios.
Selecciona el sitio con el que quieras establecer comunicación remota (o crea uno nuevo para el caso) y pulsa Editar.
Verás que se abre el cuadro de diálogo de Definición del Sitio.
Ahora podremos escoger entre trabajar en modo básico o avanzado. Vamos a seleccionar la pestaña Avanzado para poder ver con más detenimiento las opciones que se nos ofrecen.
Una vez estés en el nuevo modo, selecciona la Categoría Datos remotos en el listado de la izquierda.
Ahora en el desplegable Acceso selecciona el método de acceso que deberá utilizar Dreamweaver para conectarse con el servidor. Como ya hemos dicho nosotros explicaremos la opción FTP.
Se mostrarán las siguientes opciones:
Aquí deberás rellenar los datos que te facilitó el servicio de hosting que contrataste. Si no recuerdas los datos o has perdido el correo electrónico que seguramente te enviaron, pídeles de nuevo la información.
Los datos que necesitrás son los siguientes:
Servidor FTP o host es la dirección a la que se dirigirá Dreamweaver para conectarse a tu servidor será del tipo ftp.servidor.com o también podrás encontrar algunas que están formadas en forma de dirección IP (como por ejemplo, 192.186.1.1)
En el campo Directorio del Servidor podremos establecer una carpeta contenida en el servidor donde queramos subir las páginas.
Imagina que dentro de la estructura de carpetas del servidor romoto tienes una que se llama pagina y dentro de esta otra que se llame principal. Podríamos indicar la ruta pagina/principal para que los archivos se subiesen directamente a esa ubicación.
En Usuario y Contraseña escribe el nombre de usuario y el password para poder conectar con el servidor. Marca la casilla Guardar si quieres que el programa recuerde la contraseña.
Una vez introducidos estos datos puedes pulsar el botón Probar para ver si son correctos y Dreamweaver puede crear una conexión con el servidor remoto.
Finalmente comentaremos la opción Permitir desproteger y proteger archivo. Esta casilla es útil cuando más de una persona está utilizando el mismo servidor y las mismas páginas. De esta forma (como veremos más adelante) podrás bloquear diversos archivos para evitar que se vean modificados por otra persona (que también tenga acceso al servidor) mientras tú trabajas con ellos.
Si seleccionas la opción Cargar archivos en el servidor automáticamente al guardar forzarás a que Deamweaver suba los archivos cada vez que los guardes. Una opción bastante útil para no olvidar subir pequeños retoques que se vayan haciendo en el tiempo. Aunque es una opción un poco peligrosa porque si modificas la versión en local y te equivocas no podrás recuperar la versión anterior que estaba almacenada en el remoto porque se habrá sobreescrito. Esta opción tampoco es recomendable si no tienes conexión permanente y rápida a Internet.
Una vez hayas terminado Acepta todas las pantallas hasta volver a la vista de trabajo y estaremos listos.
Unidad 19. Servidor de Pruebas (I)
Introducción a PHP
Hasta ahora hemos aprendido cómo mostrar contenido estático en nuestras páginas web.
Dejando de lado todos los efectos o animaciones que podamos hacer, en determinadas ocasiones nos es necesario darle un poco más de dinamismo al contenido del sitio.
Digamos que necesitamos mostrar listados de cualquier tipo que puedan generarse automáticamente, o incluso que se repartan en varias páginas.
Es posible que también necesites que el contenido se actualice periódicamente y tengas demasiadas páginas como para ir modificándolas una a una.
O incluso te gustaría crear una página individual para cada elemento que aparezca un listado y resulta muy laborioso crear una página individual para cada uno de ellos.
Muy bien. Ha llegado la hora de dejar un poco de lado HTML y comenzar a crear páginas más versátiles utilizando PHP.
PHP es un lenguaje de programación. Pero no te preocupes, Dreamweaver contiene las suficientes herramientas como para manejarte sencillamente sin que tengas que saber ni una línea de código.
Desde luego, si el tema te apasiona no lo dudes. Aprende PHP y utilízalo para crear prácticamente lo que te venga a la cabeza. Aunque eso se encuentra fuera de este curso.
Nosotros veremos lo que es posible hacer utilizando las herramientas de que dispone Dreamweaver.
Como decíamos PHP es un lenguaje de programación, así que deberemos aprender antes cómo funciona.
Hasta ahora nosotros creábamos páginas con extensión HTML, este tipo de archivos, cuando son requeridos por un navegador se descargan automáticamente del servidor y se visualizan tal y como son en el cliente (el ordenador del usuario que está viendo la página).
PHP actúa de forma diferente.
Un archivo con extensión PHP, cuando es requerido por el cliente se ejecuta en el servidor y genera una página web con código HTML, y es este código HTML el que se envía y se visualiza en el navegador del usuario.
De esta forma, el contenido del archivo PHP es completamente transparente al usuario (además de serle imposible ver el contenido del archivo) y sólo podrá ver el resultado de la petición que ha creado (es decir, lo que genera el archivo PHP según convenga en cada momento).
Verás que esto es más fácil de entender cuando vayamos avanzando en la unidad.
Una de las utilidades de las páginas PHP es que PHP es capaz de buscar en una base de datos mientras se está ejecutando en el servidor y mostrar los datos obtenidos en código HTML para que el navegador del cliente los pueda visualizar:
Como puedes ver PHP puede ser muy útil a la hora de recuperar datos almacenados lo que te será muy útil si decides guardar en forma de tablas información relativa a tus productos, elementos sobre los que estés trabajando, entradas de blog, etc...
Unidad 20. Páginas Dinámicas (I)
Introducción
En esta unidad vamos a ver cómo utilizar Dreamweaver para crear páginas PHP y acceder a datos almacenados en una base de datos.
Como vimos en el tema anterior, las páginas dinámicas se almacenan en el servidor y cuando son requeridas se ejecutan y devuelven una salida de código HTML al cliente que lo visualizará en su navegador.
Mientras el archivo PHP se ejecuta en el servidor, puede crear una conexión a una base de datos y extraer o guardar información en ella.
Ahora que ya tenemos un servidor de pruebas donde pueda ejecutarse el código que introduzcamos en nuestras páginas y permita la creación de bases de datos para almacenar información pasaremos a crear nuestras propias páginas dinámicas de acceso a datos.
Una vez instalado WAMP empezaremos a crear nuestras primeras páginas para mostrar información específica y personalizada.
Para ello nos apoyaremos siempre en la sección Aplicación de la barra de herramientas Insertar:
Puede que en tu ordenador no veas la barra de esta forma, pues puede tomar la forma de pestañas o de menú.
Si la tuvieses en forma de menú haz clic en el desplegable de la izquierda y selecciona Aplicación:
Y en el panel Aplicación que puedes abrir desde el menú Ventana → Bases de datos.
Crear una conexión a la Base de Datos
Como puedes ver en el panel Aplicación los requisitos necesarios para empezar a trabajar con bases de datos ya los hemos cubierto en los temas anteriores del curso.
El último paso que nos quedaría para poder empezar a crear páginas será definir una conexión para que Dreamweaver establezca los parámetros en los que se realizará la comunicación entre los archivos PHP y los datos de nuestras tablas.
En otras palabras deberemos decirle a Dreamweaver dónde está la base de datos, su nombre y un usuario (con su contraseña) con suficientes privilegios como para poder, al menos, visualizar los datos almacenados.
Para ello nos dirigimos a la pestaña Bases de datos en el panel Aplicación y hacemos clic sobre el botón .
Selecciona la opción Conexión MySQL para crear la conexión que necesitamos.
Se abrirá el siguiente cuadro de diálogo:
Aquí deberás colocar los datos correspondientes a tu base de datos.
En Nombre de conexión escribiremos un nombre significativo para poder reconocer la conexión más adelante.
En Servidor MySQL deberemos escribir localhost en nuestro caso ya que la base de datos está alojada en nuestro propio equipo. En otro caso habría que introducir la dirección del servidor donde se encuentre almacenada la información.
Escribe un Nombre de usuario y Contraseña con priviegios suficientes para acceder a la base de datos (al menos parcialmente).
Y finalmente selecciona (pulsando el botón Seleccionar) o escribe el nombre de la base de datos a la cual nos vamos a conectar.
Puedes hacer una prueba de conexión pulsando el botón Prueba, así te asegurarás de que se puede establecer comunicación entre Dreamweaver y el servidor correctamente con los datos facilitados.
Una vez hayas acabado pulsa Aceptar y la conexión estará lista para utilizarse.
Unidad 21. Cómo crear un Blog (I)
Introducción
Hasta ahora hemos visto cómo empezar a manejarnos con páginas dinámicas de acceso a datos utilizando PHP y un servidor mySQL.
La complejidad de las páginas que creemos dependerá de la profundidad de nuestros conocimientos de ambas tecnologías, por lo que muchas veces (sobre todo al principio) nos será dificil alcanzar algunos objetivos que nos propongamos.
Vamos a dedicar este tema a la elaboración de un proyecto complejo en el que deberemos emplear estas técnicas de un modo más completo.
Para ello crearemos un blog o bitácora y utilizaremos herramientas y procedimientos que hemos visto hasta ahora. No te pierdas este tema, introduciremos algunos conceptos que quizá te resulten interesantes.
Un blog es una página web donde se introduce contenido periódicamente sobre un tema en particular.
Su contenido suele organizarse en entradas que se van añadiendo con una asiduidad relativa.
Normalmente, estas entradas pueden comentarse. Es decir, cualquier usuario (o a veces solamente los registrados) pueden dejar su opinión sobre la entrada o sobre el blog en general.
Para facilitar la navegación por la página estas entradas suelen estar organizadas por temas o categorías, de modo que si te interesa poder leer todas las entradas relacionadas con un tema en concreto te sea mucho más sencillo.
Todo blog deberá tener, del mismo modo, una parte privada desde donde el usuario dueño de la bitácora pueda administrar y gestionar los contenidos del blog.
Desde el panel de administración, que debe estar protegido para que sólo tengan acceso aquellas personas con privilegios suficientes, podremos añadir, modificar o eliminar entradas, comentarios y categorías.
De hecho, la función de esta parte privada es que puedas actualizar el contenido sin necesidad de tener que recurrir a la interfaz de phpMyAdmin para insertar nuevos registros como vimos en el tema anterior.
El objetivo de este tema no es entrar en profundidad en cada uno de los detalles, porque podríamos no terminar nunca. Explicaremos el modo en el que deberemos actuar para alcanzar una estructura cerrada que cumpla los requisitos mínimos que un blog necesita.
El aspecto y funcionalidades finales están en tus manos, puedes añadir tantas cosas como quieras.
Así que vamos a empezar...
Estructura de datos
Nuestro primer paso para la creación de un blog será crear la estructura de datos que contendrá la información de las entradas y otros elementos del sitio.
En un sitio simple deberemos crear como mínimo 4 tablas: categorias, entradas, comentarios y usuarios.
En la tabla categorías deberemos listar el nombre de las categorías en las que se dividen las entradas.
En la tabla entradas deberemos almacenar el texto de la entrada con su título y fecha. Obviamente aquí deberemos hacer referencia a qué categoría pertenece la entrada. En un blog más complejo podríamos incluso almacenar qué integrante de la tabla de usuarios creó la entrada...
En la tabla comentarios deberemos almacenar el texto del comentario junto con la información del autor, como su nombre y correo electrónico, por ejemplo. Con conocimientos más profundos de PHP podríamos guardar hasta su dirección IP.
Finalmente en la tabla usuarios guardaremos el nombre y contraseña de los usuarios que tendrán acceso a la edición del blog. Más adelante verás que incluso se podrían establecer niveles de privilegios entre ellos.
El punto en cuestión en este caso es el hecho de que en la forma más simplificada las tres primeras tablas se encuentran relacionadas del siguiente modo:
Como puedes ver en la imagen en la tabla entradas existe un campo que apunta al ID de categorías, y del mismo modo en la tabla comentarios tenemos que tener un campo que apunte a la entrada a la que pertenece dicho comentario.
El problema nos surge, por ejemplo, cuando insertemos una página que nos ayude a eliminar entradas. ¿Qué hacemos con los comentarios asociados a ella? ¿Deberemos crear una página más para que cuando se borre una entrada también lo hagan sus comentarios relacionados? ¿Y repetirlo para las categorías y sus entradas?.
No va a hacer falta.
Podremos utilizar una característica de la definición de la base de datos que existe en Mysql (no existía en las primeras versiones) y en otros sistemas gestores de bases de datos, el borrado y actualización en cascada.
Desde el entorno de PhpAdmin podremos definir esta característica en la vista de relaciones.
Podrás encontrar el enlace a esta vista desde la vista de detalle de cualquier tabla:
Haz clic sobre él y verás una nueva ventana como esta:
Desde aquí podremos especificar las relaciones que tiene la tabla con las demás tablas de la base de datos y qué hacer cuando un elemento relacionado se borra o modifica.
Fíjate que en el ejemplo solamente los campos Id e Id_Categoría son susceptibles de esta opción. Eso es debido a que hemos definido ambos como índices, el primero por ser clave primaria y el segundo porque así lo indicamos en el momento de su creación utilizando el botón Índice.
El modo en el que deberemos definir nuestro objetivo es el siguiente. A un campo indexado podemos asignarle una relación con otro campo indexado de otra tabla (en el ejemplo Id_Categoria está relacionado con el campo Id de la tabla categorias).
Deberemos decirle a phpMyAdmin qué hacer cuando se borre un elemento en la tabla relacionada categorias (ON DELETE) o cuando se modifique el valor de clave de un elemento (ON UPDATE).
La opción que nos interesa en este caso es CASCADE que actúa aplicando los cambios en cascada. Esto es, si borramos un elemento en la tabla categorias, se borrarán todos los registros en la tabla entradas que tengan el mismo ID en el campo Id_Categoria.
En el caso de que modificasemos el ID en la tabla categorias también se actualizaría en todos los registros de entradas con el mismo Id_Categoria si tenemos indicado ON UPDATE CASCADE.
Unidad 22. XML y RSS (I)
Introducción
RSS son archivos que contienen información de una página web con las últimas actualizaciones que se han hecho en ella. Este tipo de archivos es muy útil para cualquier sitio de noticias, foros, weblogs o página que emita contenido de forma continuada.
Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de etiquetas mucho más flexible que HTML.
Este sistema tiene un objetivo muy sencillo, el de organizar información para su almacenamiento y distribución. Como puedes ver esta es la mayor diferencia entre ambos lenguajes, pues HTML está orientado a cómo se debe mostrar la información y XML a organizarla.
Un ejemplo muy claro de lo que sería un archivo XML es el siguiente:
<biblioteca>
<libro>
<titulo>Las 64 casillas</titulo>
<autor>Pablo Alvarez Castano</autor>
<editorial>Paidotribo Editorial</editorial>
<isbn>848019815X</isbn>
</libro>
<libro>
<titulo>Periodismo iconográfico</titulo>
<autor>Gonzalo Peltze</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432128082</isbn>
</libro>
<libro>
<titulo>Educación personalizada</titulo>
<autor>Víctor García Hoz</autor>
<editorial>EDICIONES RIALP SA</editorial>
<isbn>8432122882</isbn>
</libro>
<libro>
<titulo>Nuestro universo</titulo>
<autor>John R Gribbin</autor>
<editorial>Ediciones B</editorial>
<isbn>8466605657</isbn>
</libro>
</biblioteca>
En este ejemplo hemos creado un archivo en la que está almacenado la información de nuestra biblioteca. Observa cómo las etiquetas que conforman el archivo no son más que identificadores que hemos creado para este fin.
La finalidad de XML y RSS consiste en poder compartir información con el resto del mundo de una forma rápida, sencilla y adaptable.
La organización de este tipo de información suele ser muy parecida de un sitio a otro.
Utilizaremos Dreamweaver 8 para incluir fácilmente contenido de un sitio externo en nuestras páginas.
Nota: Es necesario que el servidor de pruebassoporte el manejo de este tipo de archivos para poder incluir este tipo de información en nuestras páginas.
Unidad 23. AJAX y Spry Framework (I)
Introducción
AJAX es una combinación de diferentes técnicas que nos permite modificar el contenido de nuestras páginas sin tener que provocar actualizaciones visibles para el usuario.
Es decir, podremos cambiar la información que mostramos sin tener que hacer una petición al servidor. Como Flash, Java o ActiveX, AJAX es una tecnología que se ejecuta en el cliente!
Para incluir comportamientos y características de AJAX en nuestras páginas deberemos tener conocimientos de JavaScript, XML y DOM (Document Object Model).
Adobe ha creado Spry, una librería JavaScript mucho más sencilla y centrada en HTML que sólo te obligará a tener unas pequeñas nociones de JavaScript y XML.
De esta forma utilizar AJAX se hace mucho más simple y asequible.
Podrás incorporar información almacenada en archivos con formato XML y manejarla dinámicamente sin la necesidad de refrescar la página a cada petición.
Incluir Spry
Utilizar Spry es muy sencillo, sólo deberás incluir un par de scripts de JavaScript que podrás descargarte desde la página de Adobe Labs. Desde allí podrás descargar un archivo .zip, Este archivo contiene algunas demostraciones y la documentación necesaria para utilizar Spry.
Sólo te interesarán dos archivos que se encuentran en la carpeta includes: SpryData.js y xpath.js.
Para utilizarlos, simplemente cópialos en tu sitio y escribe estas dos líneas en la cabecera de la página:
Con esto referenciamos a los scripts y los incluimos en nuestra página. A partir de ese momento estaremos listos para utilizar Spry.
Ten en cuenta que Spry únicamente utiliza JavaScript para su funcionamiento, por lo que las páginas donde decidas incluir este tipo de comportamientos no tendrán porqué ser páginas dinámicas (aunque se comporten como si lo fueran).
Como más adelante verás, Spry utiliza sus propias etiquetas para trabajar con la información almacenada en el archivo XML.
Debido a esto es aconsejable indicar el espacio de nombre (una dirección de Internet que contiene la especificación de las nuevas etiquetas que se van a utilizar) para que el archivo HTML, PHP, ASP... que estemos utilizando sea correcto y se pueda valorar positivamente.
Para indicar el nombre de espacio o namespace deberemos añadir el siguiente atributo a la etiqueta html del documento:
Integración de RSS: con Dreamweaver 8 podrás integrar entradas RSS provinientes de otras páginas con sólo introducir la fuente y arrastrar y colocar los campos. De esta forma podrás introducir datos en forato XML fácil y cómodamente.
Cualquier editor de texto permite crear páginas web. Para ello sólo es necesario crear los documentos con la extensión 
y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
,
, etc.
se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
Para pasar del aspecto Fichas al otro hay que hacer clic sobre el botón 
, y seleccionar la opción 
Para volver al aspecto 
o hacer clic sobre el botón con el siguiente aspecto 
También podemos utilizar el panel 
Para practicar puedes realizar el 
En la nueva ventana habrá que especificar el número de 
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.
Flash que aparece en la pestaña 
Una vez abierto el panel hay que seleccionar el botón 
, para poder trabajar con las plantillas.
(Si este botón no está activado, pulsa con el botón derecho del ratón y elige 
.
.
sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se elimina también la capa.
pulsando sobre él, y en 
. También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los botones 
.
Para ello nos dirigimos a la pestaña 
.
.