Unidad 1. Conceptos básicos de Dreamweaver CS5 (I) 1.1. Qué es Dreamweaver CS5 Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde la página de Adobe , la versión caduca al cabo de 30 días, pero seguro que te dará tiempo a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa. Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del programa. Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe. Las páginas web están escritas en HTML. Si no conoces las características básicas de HTML puedes verlas aquí. 1.2. Novedades de Dreamweaver CS5
Es un Guia para aprender a usar Dreamweaver Cs5. 5
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Unidad 1. Conceptos básicos de Dreamweaver CS5 (I)
1.1. Qué es Dreamweaver CS5
Dreamweaver CS5 es un software fácil de usar que permite crear páginas
web profesionales.
Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente
diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el
código HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc.., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas
trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin
salir del programa.
Para seguir este curso te puedes descargar la versión gratuita de Dreamweaver desde
la página de Adobe, la versión caduca al cabo de 30 días, pero seguro que te dará tiempo
a entenderlo y decidir si quieres adquirir la versión completa de este fantástico programa.
Nota: Esta versión estará disponible hasta que Adobe lance la nueva versión del
programa.
Los logotipos de Dreamweaver son propiedad de Adobe, así como las marcas
registradas Dreamweaver y Adobe. aulaClic no tiene ninguna relación con Adobe.
Las páginas web están escritas en HTML. Si no conoces las características básicas de
HTML puedes verlas aquí.
1.2. Novedades de Dreamweaver CS5
En este punto comentaremos las características que aporta esta nueva versión sobre la
anterior.
Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en
inglés Content Management System, abreviado CMS) es in interfaz o programa que nos
permite gestionar el contenido de un sitio web. Cada vez son más usados, y ahora
Dreamweaver integra con los principales, permitiéndos crear nuestras páginas con la
estructura adecuada.
Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los
márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto si son
propias, como heredadas de los elementos padre.
Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de
Adobe, que nos permite comparar cómo se ve una misma página web en las distintas
versiones de Internet Explorer, Firefox y Safari, bajo los sistemas operativos de Windows
o Mac OS.
Este servicio es fácilmente accesible desde Dreamweaver, pero realmente cualquiera
puede usarlo desde su página web.
Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro sitio
local y remoto. Ya que se han simplificado las opciones esenciales, y distinguido más las
opciones avanzadas y poco importantes.
Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases
personalizadas, y los comandos y funciones propios de los distintos CMS soportados.
Unidad 1. Conceptos básicos de Dreamweaver CS5 (II)
1.3. 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ónHTML o HTM, e incluir como contenido del documento el código HTML deseado. Puede utilizarse incluso el Bloc de notas incluido en Windows para hacerlo.
Pero crear páginas web mediante el código HTML es más costoso que hacerlo utilizando un editor gráfico. Al no utilizar un editor gráfico cuesta mucho más insertar cada uno de los elementos de la página, al mismo tiempo que es más complicado crear una apariencia profesional para la página, sobre todo si no estamos demasiado familiarizados con el HTML. Aunque también es cierto que escribir el código nos da más control sobre él, y sobre todo al principio, nos ayudará a aprenderlo rápidamente.
Hoy en día existe una amplia gama de editores de páginas web. Uno de los más utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Adobe Dreamweaver.
Además de Dreamweaver, existen otra serie de buenos editores de páginas web, como pueden ser Microsoft Expresion Web, Amaya, Bluefish, NVU, KompoZer o Quanta Plus. Algunos de los cuales tienen la ventaja de ser gratuitos.
1.4. Cómo tener una página en Internet
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El precio por disponer de espacio propio en el servidor dependerá de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay que tener también en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas, publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una empresa, aunque sí es aceptable para una página personal, sobre todo al comienzo.
Cuando se va a contratar un servicio de hospedaje es necesario contratar también un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra página. Este nombre no puede estar repetido en Internet, ha de ser único, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com.
En el caso de los hospedajes gratuitos no es necesario registrar ningún dominio, ya que nuestra página no será más que un archivo dentro de la de la empresa contratada.
A la hora de contratar un servicio de hospedaje también hay que tener en cuenta el número de cuentas de correo electrónico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a través de programación vía Web, aunque esto último será útil sólo para usuarios avanzados.
Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com.
En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrás que se encuentre a disposición de todo el mundo en Internet.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu servidor manteniendo la estructura del local. Es decir, deberás subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio experimentará fallos y enlaces que no funcionarán.
Recuerda que será mejor que no utilices caracteres especiales como acentos o eñes, ni espacios en blanco en los nombres de archivos o carpetas. De esta forma te asegurarás de que el servidor puede reconocer sin ningún tipo de problemas los nombres de los archivos que alojes en él.
Para evitar errores de enlaces rotos o imágenes que no se muestran intenta escribir, también, los nombres en minúscula. Algunos servidores (los que utilizan linux) distinguen entre mayúsculas y minúsculas, por lo que si en tu página quieres mostrar la imagen foto1.jpg deberás guardarla con ese nombre y no como Foto1.jpg. Evitarás horas perdidas buscando fallos.
Pág. 1.2
1.5. Arrancar y cerrar Dreamweaver CS5
Veamos las dos formas básicas de arrancar Dreamweaver CS5.
Desde el botón Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio, se despliega un menú. Puedes comenzar a escribir el nombre del programa, y aparecerá directamente. O puedes pulsar en Todos los programas y buscarlo en la lista con los programas que hay instalados en tu ordenador. Buscar Adobe Dreamweaver CS5 y haz clic sobre él para arrancar el programa.
Desde el icono de Dreamweaver CS5 del Escritorio, si lo tienes .
Puedes arrancar Dreamweaver CS5 ahora para ir probando todo lo que te explicamos.
Cuando realices los ejercicios también puedes compaginar dos sesiones de la forma que
puedas ver el tema mientras utilizas Dreamweaver, como te explicamos aquí.
Para cerrar Dreamweaver CS5, podemos utilizar cualquiera de las siguientes
operaciones:
Hacer clic en el botón cerrar , en la esquina superior derecha, como en cualquier ventana de Windows.
Pulsar la combinación de teclas Alt + F4.
Hacer clic sobre el menú Archivo y elegir la opción Salir.
Si existe algún documento modificado que no ha sido guardado antes de cerrar
Dreamweaver, se te pedirá confirmación para guardar o no cada uno de ellos.
1.6. Abrir y guardar documentos
Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones:
Hacer clic en el botón abrir de la barra de herramientas estándar (si está visible).
Pulsar la combinación de teclas Ctrl + O.
Hacer clic sobre el menú Archivo y elegir la opción Abrir....
Hacer doble clic sobre el archivo en la ventana del sitio.
Hacer clic derecho sobre el archivo en el explorador de Windows, y elegir la opción Abrir con → Adobe Dreamweaver CS5.
Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes
A través del menú Ayuda puedes ir a varias opciones, veamos algunas de ellas:
Acceder al cuadro de diálogo de ayuda muy similar al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.
Acceder a una Introducción a InContext Editing de la página de Adobe, que muestra un resumen de esta herramienta.
Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.
Acceder a Dreamweaver Support Center en la web.
Acceder al Foros en línea de Adobe.
Además, en la barra de aplicación encontramos una caja de búsqueda. Al introducir los
términos de la búsqueda y buscar, iremos a la ayuda online de Adobe.
Unidad 3. Configurar 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.
3.1. 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, archivos de tipos específico, etc., se deben crear
nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los
archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Después se podrán copiar los archivos en un servidor web, en el denominado sitio
remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es
la copia del sitio con la que trabajaremos, y los cambios los actualizaremos en el sitio
remoto.
La organización de los archivos en un sitio permite administrar y compartir archivos,
mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el
servidor, etc.
La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya
que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con
ese nombre.
Por ejemplo, si escribiéramos la dirección genérica http://www.aulaclic.es en el
navegador, éste intentaría cargar la página http://www.aulaclic.com/index.htm, por lo
que se produciría un error en el caso de que no existiera ninguna página con el
nombre index.htm, y no se podría navegar por el sitio a no ser que se escribiese
Es conveniente definir sitios homogéneos, que todas las páginas de un sitio sigan un
mismo formato, es decir, que tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las páginas a través del cuadro de
diálogo Propiedades de la página.
Este cuadro se puede abrir de tres modos diferentes:
Pulsar la combinación de teclas Ctrl + J.
Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.
Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página.
Se abrirá el cuadro de diálogo siguiente:
Las propiedades están organizadas en categorías.
En la categoría Apariencia (CSS), como ves en la imagen anterior, encontramos las
propiedades:
Fuente de página: es el tipo de letra que le aplicaremos al texto.
Tamaño: es el tamaño de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opción no-repeat. Si queremos que se repita o dejamos la opción en blanco o seleccionamos la opción repeat. Si queremos que se repita solo en horizontal seleccionamos la opción repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
En la categoría Apariencia (HTML), como vemos en la imagen siguiente,
encontramos las propiedades:
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo.
Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.
Texto: es el color de la fuente.
Vínculos: es el color que mostrará el texto de los vínculos.
Vínculos visitados: es el color que mostrará el texto de los vínculos visitados.
Vínculos activos: es el color que mostrará el vínculo cuando el cursor del ratón hace clic sobre el mismo.
Márgenes: permiten establecer márgenes en el documento, es decir, la distancia entre donde empieza el contenido de la página y la ventana del navegador.
Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia
es que CSS aplica nuestra configuración utilizando reglas de estilo, mientras que HTML lo
hace con atributos HTML. Estos últimos están cayendo en desuso, ya que se tiende a
limitar el HTML al contenido, y no al diseño. Por eso, te desaconsejamos su uso.
Unidad 3. Configurar un sitio local (VI)
En la categoría Vínculos (CSS) encontramos las propiedades:
Fuente de vínculo: es el tipo de letra que mostrará el texto del vínculo.
Tamaño: es el tamaño del texto de los vínculos.
Color de vínculo: es el color de los vínculos, que ayuda al usuario a distinguir entre el texto normal y los vínculos que sirven de enlace a otras páginas.
Vínculos visitados: es el color de los vínculos visitados, que permite distinguir al usuario si unos vínculos ya han sido visitados o no.
Vínculos de sustitución: es el color del texto del vínculo cuando situamos el ratón encima del vínculo.
Vínculos activos: es el color de los vínculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vínculo asociado, el texto aparece subrayado, con esta opción podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado.
En la categoría Encabezados (CSS) encontramos la propiedad:
Fuente de encabezado: permite establece el tipo de fuente de los encabezados.
El resto propiedades hacen referencia al estilo cursiva o negrita, así como al tamaño y
color que queremos aplicar a cada tipo de encabezado.
En la categoría Título/Codificación encontramos la propiedad:
Título: es el título del documento, que aparecerá en la barra de título del navegador y de la ventana de documento de Dreamweaver
En la categoría Imagen de rastreo encontramos las propiedades:
Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que sólo se mostrará en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla gráfica sobre la que crear el documento.
Transparencia: permite establecer la opacidad de la imagen de rastreo.
Hay que tener cuidado de no crear páginas que tarden mucho tiempo en cargarse en el
navegador. Para ver cómo comprobar el tamaño de los documentos, pulsa aquí .
Para asignar colores es posible desplegar una paleta de colores como ésta. Al
seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la
parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para
web. Éstos son los colores que se muestran de la misma forma en cualquier navegador
bajo cualquier sistema operativo.
Esto no quiere decir que sólo podamos utilizar estos colores. Podemos personalizarlos
a través del botón de la parte superior de la paleta.
Los colores pueden asignarse a través de los botones: .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y
también en algunas ventanas que permiten especificar propiedades (sobre todo
propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de
la página, que vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro
gris , lo que hace que se despliegue la paleta de colores. El otro modo es
introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color
azul con valor #39F, el botón quedaría del siguiente modo: .
En la web, los colores se representan por la cantidad que contienen de los colores
primarios aditivos (Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan números hexadecimales, que van del 0
a la F (A=10, B=11, ..., F=16).
El valor mínimo (00) indica la ausencia total de ese color, y el máximo (FF) su
intensidad total.
Para indicar que nos referimos a un color, utilizamos el símbolo # la principio del código.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al
rojo, el segundo al azul y el último al verde.
En Dreamweaver observarás muchas veces que se emplean sólo tres valores. En este
caso, se interpreta que los valores de los pares están repetidos. Es decir, los colores
#FF22AA y #F2A son el mismo.
Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y
modificar sus propiedades.
Unidad 4. El texto: propiedades y formato (I)
A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a
crear estilos CSS, que permiten asignar al texto clases y estilos creados por nosotros
mismos, no predefinidos.
4.1. Características del texto
Las características del texto seleccionado pueden ser definidas a través del
menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades
que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos
categorías HTML y CSS.
Comenzamos viendo las propiedades HTML
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en
el navegador. Pero al final, podremos personalizarlas con CSS para que se vean
exactamente como queramos.
Formato:
Permite seleccionar un formato de párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetará que hayan varios espacios en lugar de solo uno. El
texto normal, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.
Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.
Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
Lista:
Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.
Sangría:
Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
Accediendo a las propiedades CSS.
Las hojas de estilo en cascada (CSS, Cascading Style Sheets) nos permiten formatear
nuestra página y darle el diseño que queramos. Podemos cambiar desde propiedades
simples, como el color de fondo, hasta cosas más vistosas, como hacer que un bloque se
muestre en una posición determinada o que un elemento cambie al pasar el cursor sobre
él. Profundizaremos en esto más adelante, por ser una parte fundamental en la creación
de páginas web.
Tenemos más posibilidades a la hora de aplicar formatos. Dreamweaver CS5 nos
proporciona numerosas funciones para la creación de estilos mediante hojas de estilos en
cascada .
Regla de destino:
Las reglas CSS sirven para definir a qué elemento aplicamos el estilo, y cómo lo hacemos.
Podemos definir una Nueva Regla, eliminarla o aplicar una clase. Veremos esto antes de acabar el tema.
Editar regla:
Mediante este botón accedemos a las opciones para la creación o modificación de estilos CSS, de la regla seleccionada.
Panel CSS:
Este botón abre el panel CSS si no lo tuviéramos abierto.
Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una única fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, sans-serif, el texto se verá con la fuente Arial, pero si esta no existe se verá en Helvetica.
Estilo:
Estos botones ponen el texto en negrita y cursiva respectivamente. Pero en este caso, generan un estilo css en línea.
Alineación:
A través de estos botones es posible establecer la alineación del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada.
Hemos de aplicarlo sobre el elemento que contiene el texto que queremos alinear, por ejemplo sobre un párrafo.
Tamaño:
Permite cambiar el tamaño del texto. El tamaño lo podemos indicar en diversas unidades, en píxeles, porcentajes del tamaño base, etc...
Color:
Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la página. Si no se ha establecido ningún color en las propiedades de la página ni aquí, el color del texto por defecto será el negro.
Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus
propiedades.
4.2. Listas
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con
viñetas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya
sea a través delinspector de propiedades, o a través del menú Formato.
La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la
lista numerada (ordenada) se selecciona a través del botón .
aspecto exacto que se busca en una página, desde la posición precisa de elementos
hasta el diseño de fuentes y estilos concretos.
Una de las grandes ventajas de los estilos CSS reside en que cuentan con una
capacidad simple de actualización; cuando actualiza un estilo CSS, el formato de todos los
documentos que usan ese estilo se actualiza automáticamente.
4.5. Crear un estilo personalizado
Con Dreamweaver CS5, las características que apliquemos a un texto a través
del Inspector de propiedades CSS crearán automáticamente estilos CSS. Aunque
tenemos que decidir a qué elementos afecta.
Veámoslo:
Crear un estilo en línea.
Por ejemplo, si queremos que un determinado estilo afecte a un único elemento y en un
caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la
propia etiqueta HTML, por lo que si alguna vez queremos modificarlo, deberemos de ir al
elemento.
En el Inspector de propiedades CSS, en Regla de destino, seleccionamos <Nuevo
estilo en línea>.
A continuación, definimos las propiedades del estilo.
Insistimos que esta opción es la menos flexible y debe empelarse sólo en casos
concretos, cuando el estilo no se repita, y no tenga sentido mantenerlo si borramos esa
Crear una regla de estilo:
Vamos a crear un estilo que afecte a todas las etiquetas de un tipo, sólo a las que estén
contenidas en determinados elementos o una clase.
Para ello, En el Inspector de propiedades CSS, en Regla de destino,
seleccionamos <Nueva regla CSS>.
Ahora intentamos modificar sus propiedades o pulsamos en Editar regla. En cualquier
caso nos aparecerá la siguiente ventana:
Tipo de selector: el tipo de selector es fundamental, ya que determina a qué
elementos afectará el estilo.
Podemos elegir entre cuatro tipos de selector:
Clase. Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase.El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver.
ID. El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #.
Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada.
Compuesto. Combina los selectores anteriores. Por ejemplo, p.resaltado afecta únicamente a los párrafos con la clase resaltado, pero no a los encabezados con esa clase. También se pueden anidar. Por ejemplo ul#menu li p afecta sólo a los párrafos que estén dentro de un elemento de una lista con el id menu.
Nombre del selector: esta opción permite asignar un nombre al selector.
Depende íntimamente del tipo de selector, pues aquí introduciremos el nombre de la
clase, id, etiqueta, etc... Por defecto, indicará el elemento seleccionado, pero podemos
escribir el que queramos.
Definición de regla: esta opción nos permite guardar el estilo en el documento actual o
en un nuevo archivo .css.
Si elegimos (Sólo este documento) la definición del estilo se guardará en la cabecera
de la página, por lo que sólo estará disponible dentro de ésta.
Si elegimos (Nueva hoja de estilo) se creará un archivo CSS. Podremos emplear estos
estilos en cualquier página del sitio sólo con vincular la hoja de estilos. Deberemos de
indicar dónde guardar el archivo css que contendrá los estilos. Normalmente en la misma
carpeta que las páginas.
Si ya estamos utilizando una hoja de estilo, podremos seleccionarla aquí y los estilos se
añadirán ella.
4.6. Definir o editar un estilo
Una vez creado, tenemos que definir las propiedades que formarán el estilo.
Para ello, encontramos las opciones básicas en el Inspector de propiedades CSS.
Observa que la regla que estamos editando es la que aparece en Regla de destino. Si
queremos editar otra regla, hacemos clic en el desplegable y la seleccionamos, ya que
una vez creadas se van añadiendo a la lista.
Si queremos acceder a todas las propiedades, podemos pulsar en el botón Editar
regla. Se abrirá la ventana Definición de regla.
Aquí encontramos todas las propiedades CSS agrupadas por Categorías. Las veremos
más adelante.
Esta ventana es la opción más cómoda nada más crear el estilo, cuando tenemos que
cambiar varias propiedades.
Para pequeños cambios que no podamos hacer desde el Inspector de propiedades y
otras funciones extras, disponemos del panel Estilos CSS. Podemos acceder a él desde
el menú Ventanas o pulsando en el botón Panel CSS.
En la parte superior vemos las propiedades que afectan al elemento, en medio las
reglas aplicadas, y en la parte inferior las propiedades del estilo actual.
También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un
nombre que indique a qué tipo de texto se va a aplicar. Para ello accedemos al
panel Estilos, hacemos clic con el botón derecho sobre el estilo y seleccionamos la
opción Cambiar nombre... Aparecerá un cuadro de diálogo para que introduzcamos el
nuevo nombre como la imagen inferior.
Si quieres aprender más sobre el panel Estilos CSS, puedes hacerlo aquí .
Nota: En los primeros ejercicios del curso iremos aplicando propiedades sin haber
explicado previamente cada una. Más adelante detallaremos qué hacen las propiedades
existentes. No obstante, sabiendo un poco de inglés resultan muy intuitivas.
Para practicar lo que hemos visto, puedes realizar el Ejercicio paso a paso Redefinir
Seleccionamos las reglas que queramos exportar, y en las propiedades del panel (el
icono de la esquina superior derecha) seleccionamos Mover Reglas CSS....
Nos aparecerá la siguiente ventana:
Encontramos dos opciones para ubicar los estilos:
Hoja de estilos nos permite seleccionar una hoja ya existente. Las reglas se añadirán a ella.
Una nueva hoja de estilos... creará una hoja nueva para las reglas exportadas. Deberemos de indicar dónde queremos guardar el archivo, normalmente en la misma carpeta que las páginas.
Los estilos seleccionados se quitarán de la página actual, y se vinculará con la hoja de
estilos.
Vincular una hoja de estilos.
Si queremos utilizar una hoja de estilos ya existente en nuestra página, debemos
vincularla.
Podemos hacerlo desde el menú Formato → Estilos CSS → Adjuntar hoja de
estilos... o desde el panel Estilos CSS. Lo único que tendremos que hacer es seleccionar
el archivo a vincular. Las hojas de estilo tienen la extensión .css.
Recuerda, que aunque en principio Dreamweaver nos permite elegir cualquier archivo
del equipo, todos los archivos que utilicemos deben de estar dentro del sitio.
Para practicar lo que acabamos de ver, puedes seguir el Ejercicio paso a paso
Exportar y vincular hojas de estilo.
Ejercicio propuesto de la Unidad 4 Prueba evaluativa de la Unidad 4
Pág. 4.9
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.
5.1. Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado
lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Cuando creemos un enlace, lo que realmente haremos será crear una
etiqueta <a></a> que es la que en HTML se encarga de definir los enlaces. Esto podrás
observarlo en la barra de estado:
5.2. Tipos de referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas
referencias no se limitan a los enlaces, se comportarán igual cuando indiquemos la
ubicación de una imagen, de un archivo Flash, de la hoja de estilo, etc.
Crear vínculos de esta forma es muy sencillo, sólo deberás rellenar los campos que
explicaremos a continuación y el enlace se colocará en el lugar en el que estaba situado el
cursor.
Texto: es el texto que mostrará el enlace. Si teníamos un texto seleccionado, aparecerá ahí.
Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por http://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto Dreamweaver te creará un enlace relativo al documento. Si quieres que los enlaces
sean relativos al sitio visita este avanzado .
Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.
Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.
Índice de tabulador: Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos. Por defecto, se tabularán por orden de aparición.
5.4. Destino del enlace
El destino del enlace determina en qué ventana va a ser abierta la página vinculada,
puede variar dependiendo de si el documento está basado en marcos.
Puede especificarse en el inspector de propiedades HTML a través de Destino, o en
la ventana que aparece a través del menú Insertar, opción Hipervínculo.
_blank:Abre el documento vinculado en una nueva ventana o pestaña del navegador.
_parent:Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Tiene sentido si se emplean marcos.
_self:Es la opción predeterminada, y la que se produce si no indicamos otra cosa. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
_top:Abre el documento vinculado en la ventana completa del navegador. Tiene sentido si se emplean marcos.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas
opciones de destino, ya que se volverán a ver en el tema de Marcos.
Si la página no usa marcos (lo habitual hoy en día) simplemente no especificaremos
nada para abrirlo en la misma ventana, y emplearemos _blank para abrir ventanas
nuevas.
Lo habitual es abrir las los enlaces a páginas del sitio en la misma ventana, y los
enlaces externos en ventanas nuevas. Otra tendencia dice que una página nunca debería
de abrir nuevas ventanas, y que debe de ser el usuario el que decida qué enlaces quiere
abrir en ventanas nuevas. En la mayoría de navegadores, para abrir un enlace un una
ventana nueva, basta con hacer clic con la ruedecilla del ratón.
5.5. Formato del enlace
En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo
tiempo, puede adquirir cuatro colores diferentes que pueden especificarse a través de las
propiedades de la página. Estos cuatro colores diferentes corresponden a los tres estados
del vínculo: vínculo normal, vínculo activo (el último pulsado), vínculo visitado o vínculo de
sustitución (cuando el cursor está sobre el vínculo).
Aquí tienes dos vínculos de ejemplo:
www.aulaclic.es www.elpais.com
Si has visitado alguno, verás que sale en un tono morado, si no sale en azul.
En Relativa a es posible especificar si la imagen será relativa al documento o a la
carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si cambiamos
la página de carpeta, lo habitual es cambiar también sus imágenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma
en el campo URL de la ventana y en el campo Origen del inspector de propiedades,
dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al
documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se
encuentran la carpeta imagenes y el documento en el que deseamos insertar la imagen.
Dicha imagen, llamadaaulaclic.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.
Otra forma de insertar una imagen, es arrastrarla directamente desde el
panel Archivos sobre el documento.
Si insertamos una imagen y luego la borramos, la movemos, o escribimos mal su
nombre, en Dreamweaver aparecerá así indicando que el enlace al archivo está
roto.
En ese caso, la imagen que aparecerá en el navegador será similar a ésta:
.
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el
contenido del campo Alt del inspector de propiedades, que explicaremos a
continuación.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una imagen.
6.3. Propiedades de una imagen
Cuando 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ón en el campo Vínculo, y decidir en qué ventana se abre con el campo Destino. Podemos hacer que cada zona de la imagen tenga un vínculo
distinto, creando un Mapa de imagen. Puedes ver su uso en este avanzado . Y con lo aprendido, realizar el Ejercicio paso a paso Crear mapas de imagen.
En el campo Alt escribimos el texto que remplazará a la imagen si ésta no puede mostrarse. Es un atributo muy importante que deberíamos incluir siempre para hacer páginas accesibles. Por ejemplo, el texto que se escribe será leído por los programas lectores para invidentes. Si lo que queremos es mostrar un ayuda contextual cuando el usuario tenga el cursor sobre la imagen, debemos de empelar el atributo title. No podemos insertarlo desde el panel, tenemos que hacerlo desde el código fuente con el formato title="Texto a mostrar". Internet Explorer muestraAlt como ayuda contextual cuando la imagen no lleva title, pero el resto de navegadores no lo harán, respetando el estándar.
En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.
Existen otros atributos que afectan al diseño de la imagen. Como ya hemos explicado,
la tendencia actual es utilizar CSS para todo lo relativo a diseño, por lo que estos atributos
están cayendo en desuso y no deberían de ser empleados. No obstante, los explicaremos
para que entiendas su función:
Puedes asignarle un grosor de borde desde el campo Borde. En CSS, existe el atributo border.
Puedes seleccionar su alineación con respecto al texto desde el campo Alinear. En CSS, existe el atributo vertical-align.
Por último las opciones Espacio V y Espacio H te serán útiles para separar la imagen del texto y así no queden demasiado pegadas a él. Estos campos indican el espacio vertical y horizontal respectivamente entre la imagen y el texto. En CSS, podemos hacerlo con el margin.
Además, encontramos algunos controles de Edición: El botón nos permite
optimizar la imagen desde Dreamweaver, cambiando el formato o creando transparencias
como puedes ver aquí . Por otro lado, el icono nos permite editar la imagen con
un programa externo, como Photoshop o Paint. Puedes ver cómo cambiar el programa de
edición aquí .
6.4. Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes.
Por un lado, podemos cambiar el tamaño con el que se ve una imagen, pero dicho
cambio de tamaño no se aplica directamente sobre el archivo de imagen, que conservará
el tamaño original.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de
cómo podría quedar modificándola desde un editor externo, como Fireworks, Photoshop,
También es posible seleccionar una pulsando con el ratón sobre el borde
exterior que la rodea, o pulsando <table> que aparece en la barra de estado de la
ventana de documento.
Cuando se selecciona una tabla o cuando se coloca el cursor sobre cualquier parte de
la tabla, Dreamweaver muestra en una zona verde el ancho de la tabla y de cada
columna. Junto a los anchos se encuentran unos menús desplegables (menú de
encabezado de la tabla y menú de encabezado de la columna). Estos menús permiten
acceder rápidamente a determinados comandos relacionados con la tabla.
Si tienes el punto de inserción en la tabla y no te aparece esa zona verde puedes
activar su visualización seleccionando la opción Anchos de tablas del menú Tabla o
también desplegando de la barra de menús, el menú Ver → Ayudas visuales → Anchos
de tabla. De la misma forma se desactiva su visualización.
Si no aparece el ancho de la tabla o de una columna, la tabla o la columna no tiene un
ancho especificado. Si aparecen dos números, el primer número corresponde al ancho
especificado en las propiedades de la tabla o columna y el segundo número es el ancho el
ancho visual que aparece en la vista de diseño; por ejemplo en la tabla anterior la primera
columna tiene 139 (142), en las propiedades de la celda tenemos el ancho 139 píxeles
pero al contener una imagen que necesita más espacio, la columna ocupará realmente
142 píxeles (ancho visual de la columna tal como aparece en la pantalla).
Cuando ocurren estas diferencias
podemos hacer que en el código (propiedades) se cambie el ancho por el real, para ello
sólo tenemos que seleccionar la opción Igualar todos los anchos del menú desplegable
de encabezado de tabla.
En este menú vemos que también tenemos las opciones para Borrar o Igualar los
anchos.
Si en una tabla no indicamos los anchos, estos se ajustarán al contenido.
No siempre se desea seleccionar toda una tabla, en ocasiones se desea seleccionar
filas, columnas o celdas.
Puede seleccionarse una fila o columna de varias formas, lo mejor es que pruebes
las distintas formas y elijas la que más te gusta. Estas son las formas de selección:
Puedes utilizar la opción Seleccionar columna del menú de encabezado de columna (zona verde de anchos) esto sólo es válido para seleccionar una columna.
Manteniendo pulsado y arrastrando el ratón hasta seleccionar la columna/s o fila/s completamente.
También puede hacerse situando el cursor junto al borde superior o izquierdo de la columna o fila respectivamente, de modo que el cursor cambia a la forma de una flecha negra. Al hacer clic se selecciona la columna o fila a la que apunta dicha flecha.
En cualquier momento, para seleccionar una fila posicionar el cursor en cualquier sitio de la fila y sobre la etiqueta <tr> de la barra de estado o sobre la etiqueta <td> para seleccionar la celda.
Para seleccionar celdas:
Para seleccionar varias celdas contiguas, basta con mantener pulsado el ratón mientras se arrastra sobre las celdas deseadas.
Para seleccionar una sola celda o varias celdas no contiguas, hay que mantener pulsada la tecla Control mientras se hace clic sobre las celdas.
7.5. Formato de tabla
Las propiedades de la tabla se especifican a través de su inspector de propiedades.
En este caso, se crearán atributos para la tabla. Pero algunos de estos valores, como el
ancho, los podemos especificar mediante CSS.
A través del inspector de propiedades se pueden modificar los valores que se
especificaron al insertar la tabla. Al mismo tiempo, pueden indicarse otros como pueden
ser el valor Alinear (que permite alinear la tabla a la izquierda, al centro o a la derecha de
la pantalla), el borde de la (en Col. borde) o los valores de relleno y espaciado de la
celda.
Si lo que se selecciona es una celda, o un conjunto de celdas, el inspector de
propiedades cambia, para permitir especificar otros valores.
La parte superior del inspector de propiedades nos permite alternar entre las
propiedades HTML, que en este caso sirven para especificar las propiedades del texto
que se insertará dentro de la celda (o celdas) seleccionada, y la propiedades CSS para
definir los estilos.
La parte inferior sirve para especificar valores propios de la celda, como puede ser
el color o imagen de fondo (que es preferible definir con CSS), la alineación del
contenido en horizontal (Horz.) y vertical (Vert.), especificar su tamaño (An. y Al.)
(en Fnd). Si no queremos que el tamaño se ajuste al contenido, marcamos la opción No
aj. y si queremos convertirla en un encabezado, basta con marcar la opción Enc..
Para practicar puedes realizar el Ejercicio paso a paso Modificar las propiedades de la
tabla.
7.6. Formato CSS
Como cualquier elemento, podemos cambiar el aspecto de la tabla definiendo
propiedades CSS.
Los selectores.
Podemos definir una clase y aplicársela a la tabla desde el panel Propiedades, o si es
una tabla en concreto, asignarle un ID y definir las propiedades para ese ID.
Pero ¿y si queremos editar las propiedades de las etiquetas que forman la tabla?
Fijémonos en el aspecto de la barra de estado cuando tenemos el punto de inserción en
una celda:
Vemos que con el selector table nos referimos a la tabla completa. Con el
selector tr hacemos referencia a las filas y con el selector td hacemos referencia a
las celdas. Cuando las celdas sean encabezados, en vez de td, emplearemos el
selector th. Observa que no hay un selector para referenciar a las columnas enteras,
pequeñas pantallas de los portátiles de bajo coste, hasta monitores panorámicos en alta
resolución.
Existen dos tendencias principales a la hora de maquetar (distribuir los elementos) en
nuestra página: el diseño fijo y el diseño elástico.
El diseño fijo especifica las medidas en píxeles. Por lo que el contenido siempre se mostrará del mismo tamaño, lo que facilita mucho el diseño. Por contra, se desaprovecha mucho el espacio en monitores grandes, o puede aparecer el "scroll" horizontal en monitores muy pequeños. Un ejemplo de este diseño sería la home de aulaClic.
El diseño elástico especifica las medidas en porcentajes. Esto hace que el contenido se adapte al tamaño de la ventana en la que se visualiza, lo que nos permite aprovecharla completamente. Por contra, en diseños elaborados, es más complicado hacer que la página no se descuadre, sobre todo cuando es demasiado ancha o estrecha. Un ejemplo de este diseño es la página de este curso.
Como recordarás, el tamaño de las tablas puede ser definido en píxeles o
en porcentaje. Cuando el tamaño de la tabla sea definido en píxeles, la tabla se verá del
mismo modo independientemente del tamaño de la ventana del navegador. En cambio,
cuando el tamaño de la tabla sea definido en porcentaje, la tabla se ajustará al tamaño
del elemento que la contiene, lo cual implica que el contenido de la tabla se puede
descuadrar.
Pulsa aquí para ver una página con tablas de tamaño fijo, en píxeles. Imagina que la
página ha sido diseñada para visualizarse correctamente en un monitor pequeño de baja
resolución.
Si modificas el tamaño de la ventana, verás que la tabla es siempre del mismo tamaño.
Esto tiene un gran inconveniente, ya que si maximizas la ventana del navegador (lo que
equivaldría a visualizar la página en un monitor grande con alta resolución), a los lados de
la tabla aparecerá un gran espacio vacío.
Pulsa aquí para ver una página con tablas de tamaño variable, en porcentaje.
Si modificas el tamaño de la ventana, verás que las tablas se ajustan a ella. Usar tablas
con tamaño variable tiene también un gran inconveniente, ya que si maximizas la ventana
del navegador apreciarás claramente cómo el contenido de las tablas se descuadra,
quedando demasiado estirado, lo que dificulta su lectura.
En un principio puede parecer más conveniente utilizar tablas con tamaño fijo, aunque
esto implique que aparezca el hueco vacío a la derecha, en el caso de los monitores con
alta resolución. Pero con un poco de práctica a la hora de manejar las tablas, puedes
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.
8.3. Seleccionar marcos
Para 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
panel Marcos pulsando la combinación de teclas Mayúsculas + F2.
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se
puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse
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 éstos
contengan.
Sí es necesario seleccionar los marcos para especificar las propiedades específicas de
cada uno de ellos.
8.4. Guardar
Todos los documentos que contienen marcos tienen que tener una página en cada uno
de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en
cada uno de ellos, a excepción del marco que contiene la página original.
Estas páginas nuevas pueden ser posteriormente sustituidas por otras ya existentes,
como ya veremos más adelante.
Es necesario guardar la página que contiene el grupo de marcos, así como cada una 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 marcos
contengan alguna página ya existente, ya que en ese caso el único documento al que
habrá que dar nombre será al que contiene el grupo de marcos.
Para guardar el documento que contiene el grupo de marcos, hay que seleccionarlo
previamente.
Para guardar cada uno de los otros documentos, simplemente hay que situar el cursor
en ellos antes de pulsar sobre Guardar .
8.5. Configurar marcos
Una vez seleccionado un marco a través del panel Marcos, pueden establecerse sus
propiedades a través del inspector de propiedades.
Cada marco tiene asignado un nombre, que puede cambiarse a través de Nombre de marco. El nombre no puede contener espacios en blanco.
En Origen aparece el nombre del documento HTML que está contenido en el marco.
En Bordes puede elegirse si aparecerá o no una línea separando el marco del resto de marcos. En el caso de que se muestre el borde, se puede especificar un color para éste a través de Color borde.
Desplaz. indica si aparecerán o no las barras de desplazamiento cuando el documento del marco no pueda visualizarse completamente.
Si la opción Mismo tamaño está activa, indica que los usuarios no podrán variar las medidas del marco desde el navegador.
El Ancho del margen y el Alto del margen indican la separación que habrá entre el contenido 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 inspector de
propiedades es algo diferente.
En Bordes puede elegirse si aparecerá o no una línea separando los marcos entre sí y
puede especificarse un color para este a través de Color del borde. También es posible
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, para que se
ajuste a la ventana del navegador.
8.6. Contenido del marco
Como ya has visto, el contenido de un marco puede establecerse a través del
campo Origen del inspector de propiedades.
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en
cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de
otros ha de poder variar.
A través del campo Origen del inspector de propiedades, sólo es posible especificar el
documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este
documento por otro a través de vínculos.
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los
enlaces. Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para
que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te 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 en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se 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 o ventana que el vínculo.
_top:Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir 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 los
distintos marcos de la página.
Podemos añadir todos estos destinos a cualquier elemento de la página que contenga
algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces
funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en
una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos
resultados finales.
Para practicar puedes realizar el Ejercicio paso a paso Crear y configurar marcos.
Prueba evaluativa de la Unidad 8
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.
Veamos las opciones más importantes que nos ofrece el inspector de
propiedades cuando tenemos seleccionado el archivo Flash:
Como en otros elementos, como las imágenes, podemos asignarle el ancho (An.) y alto
(Alt.). En Archivo, indicamos la ruta hasta el archivo SWF.
Si disponemos de Flash instalado en el equipo, y vamos a ir haciendo cambios sobre el archivo original (.fla), nos resultará muy útil indicar su ubicación en Origen. Así, para editarlo, bastará con pulsar Editar.
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 hasta que el usuario la activase. Por tanto interesa desmarcar esta opción cuando se desea que la reproducción sea activada por algún comportamiento.
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 siempre son del tamaño exacto del contenido, pueden tener un escenario de fondo alrededor 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 en relación con el texto. Si queremos centrarla horizontalmente, podemos optar por centrar 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 aparecer sobre el Flash. En cambio, si es Transparente, el fondo se verá transparente (a no ser 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 siguiente
aspecto:
Al insertarse animaciones Flash, es frecuente que Dreamweaver añada algunos
archivos que nos permitirán reproducir los elementos, normalmente creando la
carpeta Scripts. Es importante incluir esta carpeta cuando publiquemos nuestro sitio, si no
los archivos no se verán. De todas formas, Dreamweaver nos avisará cuando incluya
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a
través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del
menú Ventana opciónElementos PA. 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.
4.3. Formato de una capa
Las propiedades de la capa se especifican a través de su inspector de propiedades.
Elemento CSS-P es el nombre o ID de la capa. Desde aquí podemos asignarle otro ID,
pero si lo hacemos perderá las propiedades que hayamos indicado para este elemento. Si
lo que queremos es cambiar el ID por otro más descriptivo, podemos hacer clic derecho
sobre el borde de la capa y elegir ID... en el menú contextual. También puede ser
cambiado a través del panel Elementos PA, haciendo doble clic sobre él.
El resto de campos se refieren a las propiedades CSS que definen la posición y tamaño
de la capa.
Izq y Sup indican la distancia en píxeles (también podemos introducir un valor en
porcentaje) que hay entre los límites izquierdo y superior del documento y los lados
superior e izquierdo de la capa respectivamente.
Por defecto se toman los lados del documento, a no ser que creemos una Capa PA
dentro de otra capa posicionada. En este caso, la distancia se referirá a los lados de la
capa padre, independientemente de su posición en el documento.
Si queremos que la posición se tome con respecto al elemento padre, pero este no
tiene posicionamiento absoluto, podemos darle un posicionamiento relativo empleando
CSS (En las propiedades de Posición del editor CSS,
estableciendo position como relative). Esto no afectará a la posición del elemento padre
si no cambiamos las propiedades left, top, right o bottom.
Truco: Si queremos centrar una capa con respecto al elemento que la contiene
podemos hacerlo empleando CSS. Para ello, en Izq. ponemos 50%. Para que el lado
izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la
mitad del ancho de la capa. En la imagen anterior, como el ancho es 200px, añadiríamos
por CSS margin-left: -100px;.
An y Al indican la anchura y la altura
Í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 Elementos PA. 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:
o Default (visibilidad según el navegador),
o Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
o Visible (muestra la capa, aunque la página no se esté viendo) y
o Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Elementos PA, 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). Hasta ahora, los elementos que veíamos se ajustaban a su
contenido. En el caso de las Capas PA podemos indicar un ancho y alto, por lo que puede
que el contenido no quepa dentro de la capa. Con esta propiedad controlamos cómo
aparecen las capas en un navegador cuando el contenido excede el tamaño especificado
de la capa.
o Visible indica que el contenido adicional se muestra, excediendo los límites de la capa.
o Hidden (oculto) especifica que el contenido adicional no se mostrará en el navegador.
o Scroll (desplazamiento) especifica que el navegador deberá añadir barras de desplazamiento a la capa tanto si se necesitan como si no.
o 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).
visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.
Para practicar puedes realizar el Ejercicio paso a paso Insertar una capa.
Todo lo que hemos definido de la capa, aparece como propiedades CSS en la cabecera
de la página, utilizando como selector el ID o nombre de la capa. Por eso, si queremos
emplear una capa en la misma posición en distintas páginas, podemos exportar ese estilo
a una hoja de estilos, y en cada página crear una capa y darle el mismo ID. Recuerda que
el ID ha de ser único en la página, pero puede repetirse en páginas distintas.
Podemos editar estas propiedades con el editor CSS en la categoría Posición. Ahí
verás, por ejemplo, que podemos indicar la distancia con el lado derecho (right) en vez
del izquierdo como hacíamos hasta ahora. O la distancia con el lado inferior (bottom).
Aunque podemos hacerlo de varias formas, lo recomendable es indicar la distancia con
uno de los lados y el ancho, y la distancia con el lado superior o inferior y el alto.
Ejercicio propuesto de la Unidad 14 Prueba evaluativa de la Unidad 14
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.
15.1. 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.
Luego repite el proceso tantas veces como elementos en el menú quieras insertar.
Cuando hayas acabado decide en qué ventana quieres abrir los enlaces en Abrir URL en: y dale un nombre al menú (para reconocerlo mejor más tarde) en Nombre del menú.
Luego puedes marcar la opción Seleccionar primer elemento tras el cambio de URL para que cuando se abra la ventana el elemento del menú que se muestre sea
el primero.
Déjalo desmarcado si quieres que se muestre el de la página que se está visualizando.
Luego marca la opción Insertar botón Ir tras el menú para que se añada un
botón al formulario.
Si escoges esta opción verás que se crea un menú como el que tienes justo sobre este
párrafo.
El funcionamiento de este menú de salto es muy parecido al anterior, sólo que una vez
seleccionada la página que mostrar hay que pulsar el botón para que se efectúe el salto.
Ejercicio propuesto de la Unidad 16 Prueba evaluativa de la Unidad 16
Unidad 17. Estilos CSS Avanzados (I)
En temas anteriores vimos cómo funcionaba el panel Estilos CSS y cómo crear hojas
de estilos para poder utilizarlas en tus páginas web.
Hasta ahora hemos ido empleando las propiedades CSS más comunes, aunque no las
hemos explicado detalladamente. En esta unidad intentaremos explicar mejor qué es
CSS.
A lo largo del curso, hemos orientado nuestras páginas para 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. Ya que aunque no las hemos empleados, existen etiquetas
Otra opción que nos permitía el Inspector de propiedades CSS era crear un Estilo en
línea. Este estilo sólo afectaba al elemento en cuestión, ya que lo que realmente estamos
haciendo es definir las propiedades CSS empleando el atributo style del elemento:
<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 el más desaconsejado porque es más difícil de modificar al tener
que buscarlo por el texto y modificándolo uno a uno.
Una página puede contener todos estos tipos de estilos CSS, o incluso tener varias
hojas de estilo asociadas. Entonces ¿cuándo empleamos cada uno?
Emplearemos hojas de estilos para todos los estilos comunes a las páginas del sitio.
Emplearemos estilos incrustados en la página para los estilos que se emplean en únicamente en esa página, y que ya no serían útiles si borrásemos la página. Por ejemplo, para definir el la apariencia de una tabla en concreto.
Emplearemos estilos en línea cuando el estilo solo tenga sentido por estar en esa posición en concreto, y no se suela repetir en el sitio. Por ejemplo, si queremos dar más margen a un párrafo por tener una imagen en concreto, pero que no tendría sentido si cambiásemos la imagen.
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.
Para practicar realiza el Ejercicio Paso a Paso de Creación de una Hoja de Estilo.
17.2. Sintaxis CSS
Un archivo CSS tiene una estructura muy bien definida, por lo que bastará con que nos
aprendamos unas cuantas reglas para poder empezar a familiarizarnos con su creación.
Su estructura siempre es la siguiente:
El formato a seguir para definir una propiedad es: selector
{ propiedad: valor;} o selector {propiedad: valor1 valor2 valor3;} si
puede tener varios valores. Aunque como lo habitual es escribir varias propiedades para
Este texto tiene dos elementos flotantes a la izquierda.
Ahora uno se encuentra debajo del otro, y el texto fluye teniéndolos en cuenta a ambos.
Aunque puede llegar un párrafo que deje de verse afectado.
¡Como éste!
Unidad 17. Estilos CSS Avanzados (XVIII)
Ahora combinando los márgenes y los elementos flotantes podemos crear
columnas de una forma muy sencilla:
cabeceramenumenumenumenumenu
contenido contenido contenido contenido contenido
pie
La forma es la siguiente:
1. Creamos una cabecera. No hace falta que se le aplique ningún estilo en especial a no ser que queramos darle un alto fijo, pero hemos preferido añadir unos bordes y paddings para que se vea mejor el ejemplo (igual que en resto de los elementos).
cabecera
2. Luego creamos otro bloque utilizando divs.
cabecera
menumenumenu
menumenu
3. A este último bloque le asignamos la propiedad float: left; para que se encuentre flotando a la izquierda y le damos una anchura (en nuestro caso un 30%).
cabecera
menumenu
4. Luego creamos un tercer elemento que contendrá la segunda columna.
cabecera
menumenu
contenido contenido contenido contenido contenido
5. A este elemento deberemos darle un margin-left del mismo tamaño que la anchura de la primera columna. Así nos aseguramos de que se encuentren en el mismo nivel (porque el elemento de la izquierda está flotando) pero no vuelva a tomar el flujo normal cuando el bloque de la izquierda haya acabado.
cabecera
menumenu
contenido contenido contenido contenido contenido
6. Finalmente añadimos un nuevo bloque que utilizaremos como pie de página.
cabecera
menumenumenumenumenu
contenido contenido
pie
7. A este bloque deberemos asignarle la propiedad clear: both; para que el elemento flotante no le afecte en caso de que el contenido fuese demasiado corto.
cabecera
menumenumenumenumenu
contenido contenido
pie
No es la única forma de conseguir este efecto. Podemos hacer las dos columnas
flotantes, emplear Divs PA, etc...
17.16. Controles de elementos de bloque y en línea
Ahora veremos cómo posicionar los elementos y darles el tamaño que nos convenga
para representarlos.
Antes de empezar deberíamos hacer una distinción entre las etiquetas HTML.
Podemos clasificar las etiquetas en dos grupos: de bloque o en línea.
Las etiquetas de bloque son aquellas que causan un salto de línea antes y después de
ellos, y ocupan todo el ancho del elemento que las contienen. Por ejemplo las etiquetas p,
div, table, hr, body, etc... Se emplean para organizar el contenido.
La etiqueta de bloque más genérica es div, que puede contener cualquier etiqueta. Por
ejemplo, un párrafo no debe contener a otro párrafo.
Sin embargo luego encontramos otro tipo de etiquetas (en línea) que no producen
saltos en el flujo de la página, como pueden ser las etiquetas a, strong, em, span, etc... Se
emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc...
Las etiquetas de bloque pueden contener a otras etiquetas de bloque y a etiquetas en
línea. Las etiquetas en línea, pueden contener a otras etiquetas en línea, pero nunca a un
elemento de bloque.
Teniendo esto siempre en mente verás que es más sencillo trabajar y moldear las
páginas utilizando CSS.
Primero veremos las propiedades de tamaño height (altura) y width (anchura).
Puedes especificarlas en cualquier elemento de bloque (no en elementos en línea) y
establecerán su alto y su ancho en píxeles o porcentaje.
300x50
#contenedor {
width: 300px;
height: 50px;
}
Finalmente tenemos la propiedad display, que establece cómo se muestra el tipo de
elemento con el que estamos tratando.
Esta propiedad es muy útil por ejemplo para transformar las etiquetas de bloque a
en línea y viceversa.
Puede tomar los valores inline, block, list-item, run-in, inline-block, table, inline-
visible. Es la opción por omisión. El contenido sale de elemento, y puede que se solape con los elementos que haya a continuación.
hidden. Lo que no quepa en el elemento, queda oculto.
auto. Muestra las barras de desplazamiento en el elemento cuando sea necesario.
scroll. Siempre muestra las barras de desplazamiento.
visible. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
hidden. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. El texto en esta capa no cabe al tener un tamaño fijo, por lo que desborda.
auto. Éste sí cabe.
scroll. Éste sí cabe.
Si el desbordamiento es visible, puede tapar a los elementos que haya después.
En el editor de propiedades CSS, encontramos el desbordamiento en la
categoría Posición.
Y recuerda si estamos trabajando con Divs PA, podemos establecer este atributo
directamente sobre el Inspector de propiedades.
8.4. Posicionamiento
El posicionamiento es el lugar donde el navegador coloca un elemento HTML para
visualizarlo.
Por defecto, los elementos se posicionan uno a continuación de otro. Si se trata de
elementos de bloque, como capas, párrafos, listas, etc, se irán colocando uno debajo del
otro. A este posicionamiento se le denomina estático.
Utilizando CSS, con la propiedad position podemos cambiar el tipo de
posicionamiento de los elementos. Existen cuatro tipos de posicionamiento:
static. Es el normal.
relative. El posicionamiento relativo coloca el elemento en su posición normal. A partir de ahí, podemos desplazar el elemento, permaneciendo el hueco de su posición original.
absolute. Con el posicionamiento absoluto, especificamos la posición del elemento con respecto al elemento que lo contiene.
fixed. Se establece la posición del elemento de forma parecida al absoluto, pero el elemento queda fijo en la pantalla, aunque utilicemos barras de desplazamiento.
Al cambiar el desplazamiento de un elemento, es fácil que se solape sobre otro. Esto
produce que un elemento quede oculto. Para controlar esto, disponemos de la propiedad
CSS z-index, a la que podemos asignar un valor numérico. Un elemento con un z-
index mayor se verá por encima de otro con un z-index menor.
Las cajas del siguiente ejemplo aparecen solapadas. Al pasar el cursor sobre ellas, se
le asigna z-index: 10;, lo que hace que se vean por encima del resto.
El z-index sólo afecta a los elementos con un posicionamiento distinto de static. Los
elementos posicionados siempre se verán por encima de otros elementos no
posicionados, y entre ellos se verá encima el de mayor z-index, o en su defecto, el que se
haya generado en último lugar.
Truco: Para que un elemento sin posicionamiento se vea por encima de otro
posicionado, podemos darle posicionamiento relativo, lo que no afectará a su apariencia
si no lo desplazamos, y unz-index mayor que el del elemento posicionado.
En el editor CSS encontramos las estas propiedades agrupadas bajo posición.
18.5. Posicionamiento relativo
El posicionamiento relativo coloca el elemento en su posición normal, y a partir de ahí lo
desplaza la distancia que le indiquemos. Al desplazarlo deja un "hueco" donde estaría su
posición normal.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: relative;.
Para indicar el desplazamiento horizontal, utilizamos left para desplazarlo a la
izquierda y right para hacerlo a la derecha. Utilizar valores negativos, produce el efecto
opuesto. Por ejemplo, para desplazar un elemento 40px a la derecha, podríamos
poner right: 40px; o left: -40px;.
Del mismo modo, podemos desplazarlo verticalmente utilizando top para desplazarlo
hacia arriba o bottom para hacerlo hacia abajo.
Si no establecemos valores de desplazamiento el elemento no cambia su posición, por
eso es muy común asignar el posicionamiento relativo a elementos para poder utilizar una
propiedad que requiere posicionamiento, como puede ser z-index.
Pág. 18.3
18.6. Posicionamiento absoluto
Al utilizar el posicionamiento absoluto indicamos de forma precisa la posición del
elemento en la página.
Al contrario que con el posicionamiento relativo, el elemento al que le hemos asignado
un posicionamiento absoluto no deja un hueco en la página. Podemos decir que el resto
de elementos lo ignoran, y se colocan como si no existiese.
Para aplicarlo, lo primero es declararlo en el estilo, utilizando position: absolute;.
La posición y tamaño del elemento se indica siempre en relación a otro elemento que lo
contiene. El elemento contenedor será el más cercano que haya con posicionamiento
no estático. Si no hay ninguno, se utilizará el body.
Para definir la posición utilizamos top para referirnos a la distancia entre el borde
superior del elemento posicionado y el borde superior del elemento contenedor. Por lo
tanto left será la distancia entre los lados izquierdos, right entre los lados derechos
y bottom entre los lados inferiores.
Para posicionar un elemento del que conocemos sus dimensiones, basta con indicar un
punto en vertical (top o bottom) y un punto en horizontal (right o lef). En el siguiente
elemento, todas las cajas
tienen position: absolute; witdth: 60px; height: 60px y un borde. Para
cada una hemos cambiado la posición. Además, a la caja que contiene a todas, le hemos
dado position: relative; para que las cajas de dentro tomen su posición a partir de ella.
top: 0;left: 0;
bottom: 0;left: 0;
top: 50%;left: 50%;
bottom: 50%;right: 50%;
top: 50%;right: 0;
top: 70px;left: 100px;
top: 25%;right: 25%;
Como vimos en el tema relacionado con capas, Dreamweaver nos permite tratar los
divs con posicionamiento absoluto de forma especial, a través de los Divs PA.
Podemos insertar una capa con posicionamiento absoluto directamente a través del
menú Insertar, opción Objeto de diseño, Div PA.
Cuando un elemento (no solo divs) tiene posicionamiento absoluto, en Dreamweaver se
muestra así si están seleccionados:
Esto nos permite establecer su tamaño y posición simplemente arrastrándolos o
estirando de sus bordes, directamente sobre la vista de diseño. Además, todas estas
propiedades aparecerán en el inspector de propiedades.
Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 50%;
}
div#columna_derecha {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
}
Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).
Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.
div#columna_izquierda {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 200px;
}
div#columna_derecha {
position: absolute;
right: 0;
left: 200px;
top: 0;
height: 100%;
}
Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.
No obstante, como veremos, para obtener una columna fija, y la otra líquida, es mejor hacerlas flotantes.
Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto hará que nos podamos desplazar por el contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}.
Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema.
Puedes ver un ejemplo de página maquetada con posicionamiento absoluto aquí.
Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocábamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de dejar una separación igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deberá de ser del 100% - el alto del encabezado. En vez de eso, resulta más claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como mejor lo veremos será con un ejemplo:
Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para cualquier cosa.
Pág. 18.5
18.7. Posicionamiento flotante
El posicionamiento es un poco distinto al resto. Para empezar, no se define con la
propiedad position, si no con la propiedad float. Puede tomar estos valores:
left : flotante a la izquierda (float: left;).
right : flotante a la derecha (float: right;).
none : sin flotante.
En Dreamweaver, encontramos esta propiedad junto a las propiedades de Cuadro:
Lo que hace este posicionamiento es desplazar el elemento todo lo que pueda hacia la
dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento
también flotante. Además hace que todos los elementos fluyan alrededor de él.
Es muy común utilizarlo en imágenes, para que el texto fluya alrededor de ellas. En el
siguiente ejemplo, todas las cajas contienen un párrafo con una imagen al principio
(<p><img /> Texto</p>). Sólo cambia el float de la imagen.
Normal. La imagen queda en la posición inicial, aumentando el alto de la línea, y no aparecen varias líneas de texto junto a la imagen.
Derecha. La imagen está en la misma posición, pero con un float: right;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.
Izquierda. La imagen está en la misma posición, pero con un float: left;. Esto permite que aparezcan varias líneas de texto junto a la imagen, y cuando llegue al final, que continúe por debajo, rebasando la imagen. Así, la imagen se integra mejor en el documento.
Observa que el texto puede quedar demasiado pegado a la imagen. Para solucionarlo,
no hay más que aplicar un pequeño margin a la imagen, hacia el lado que está el texto.
Existen algunos inconvenientes al utilizar el posicionamiento flotante. Un elemento que
contiene a otro flotante, no lo tiene en cuenta para su tamaño a lo alto. Por ejemplo, el
siguiente párrafo tiene un borde, y vemos que si la imagen es flotante, "se sale".
Normal. El párrafo se ajusta a la imagen y el texto.
Derecha. El párrafo sólo ajusta su alto al texto.
Además, si por ejemplo hay varios párrafos con elementos flotantes al mismo lado,
hace que se "amontonen":
Normal. Primer párrafo.
Normal. Segundo párrafo.
Derecha. Primer párrafo
Derecha. Segundo párrafo.
Para solucionar esto, disponemos de la propiedad clear, que rompe el flotamiento.
Puede tomar tres valores:
left: impide el flotamiento a la izquierda.
right: impide el flotamiento a la derecha.
both: impide el flotamiento por ambos lados.
En el siguiente ejemplo, utilizamos el mismo que en el ejemplo anterior, pero al
segundo párrafo le hemos dado la propiedad de estilo clear: right;.
Derecha. Primer párrafo
Derecha. Segundo párrafo.
Con el posicionamiento flotante, podemos por ejemplo colocar elementos uno al lado
del otro. En el siguiente ejemplo, hemos utilizado capas, todas con float:left; y un
pequeño margen para que no se peguen. Observa cómo se comportan cuando cambias el
tamaño de la ventana:
De forma muy parecida, podemos utilizar el posicionamiento flotante para crear
columnas en un documento. Basta con que la suma del ancho de las capas que harán
de columnas quepa en el ancho de elemento contenedor, y que tengan posicionamiento
flotante. En Internet Explorer, si la suma de los anchos es del 100%, para algunos
tamaños de ventana no cabe, por lo que mostrará una columna debajo de la otra, aunque
esto sólo ocurre a veces. Por eso, cuando utilizamos porcentajes es mejor utilizar un
ancho total un poco menor, por ejemplo del 99% o 99.5%.
De acuerdo con lo que hemos dicho, podemos dividir un elemento en dos columnas de
Hemos estado hablando de crear un servidor. Un servidor remoto (el que se encuentra
en Internet y requiere de una conexión FTP para subir archivos) tiene una dirección
asociada.
Puede ser una dirección formada por un nombre de dominio, como www.aulaclic.es, o
por una dirección IP (conjunto de 4 números del 0 al 255 separados por puntos,
como 213.188.129.143). Realmente, el nombre en texto siempre está asociado a una IP,
pero se utiliza para ser más fácil de recordar.
Este es el modo en el que accedemos a un servidor remoto, dando su nombre ya sea
por dominio o por IP.
Pues bien, localhost se corresponde con el nombre de dominio del servidor local.
Verás que una vez instalado WAMP podremos acceder a nuestro servidor local
escribiendo en la barra de direcciones del navegador http://localhost/. Se mostrará una
pantalla parecida a ésta, con información sobre la versión:
También podríamos hacerlo escribiendo http://127.0.0.1/ que es la dirección IP de
nuestro propio ordenador.
Lo que estamos haciendo es acceder a la carpeta que tiene WampServer por defecto
establecida como localhost. Esta carpeta se encuentra dentro de la carpeta de instalación,
en una subcarpeta llamada www. Los documentos que tengamos ahí serán accesibles
por el servidor.
Para poder acceder a los documentos que hemos ido creando, tenemos varias
opciones:
Podríamos copiar nuestros archivos allí. Por ejemplo, si copiamos dentro de www la carpeta del sitio animales, podríamos acceder al sitio escribiendo http://localhost/animales en la barra de direcciones del navegador. Esta no es la mejor solución, sobre todo si hemos instalado WampServer en Archivos de programa.
Podemos cambiar la ubicación de localhost a la carpeta que queramos. Para ello deberíamos de editar el archivo httpd.conf (clic sobre el icono Apache → httpd.conf). Se abrirá un archivo de texto. En él buscamos las dos apariciones del DocumentRoot (basta con buscar www), que mostrará la ruta actual (por ejemplo "c:/wamp/www" o "c:/program files/wamp/www") y cambiarla por la que queramos. Además, debemos de copiar el contenido de www a la nueva carpeta. Para que funcione, tenemos que reiniciar el servidor.
Otra opción es crear un alias. De forma que al escribir http://localhost/miswebs accedamos a los documentos de una carpeta que no esté realmente dentro de www. Vamos a realizar esto último por ser lo más cómodo, creando un alias llamado sitios.
Para crear una alias, sique el ejercicio paso a paso Crear un alias en WampServer.
Independientemente de la opción que elijamos, tenemos que tener claro que sólo
podremos acceder a los archivos que estén dentro de la carpeta definida como Carpeta
del servidor o a la identificada con un alias.
Pág. 20.6
20.5. Trabajar con un servidor local WampServer
Para ejecutar el programa sólo tenemos que ir a Inicio → Todos los
programas → WampServer y finalmente en start WampServer, o utilizar su acceso
directo, si lo creaste durante la instalación.
En el área de notificación aparecerá un nuevo icono: . (Puede que el diseño de
estos iconos varíen un poco según la versión que hayas instalado).
Como ya hemos dicho, WAMP se encarga de ejecutar principalmente
dos servicios: Apache (para correr PHP) y MySQL (para trabajar con bases de datos).
El icono de la barra de tareas tiene varios estados que dependen de cómo se
encuentren estos servicios:
Este icono indica que ambos servicios están ejecutándose correctamente.
Si se muestra este otro icono significa que únicamente uno de los servicios se encuentra ejecutándose en este momento, el otro se encuentra suspendido o no está instalado.
Si ves este icono significará que ninguno de los servicios se encuentra ejecutándose en estos momentos.
Si haces clic izquierdo sobre cualquiera de estos iconos se mostrará el menú de
WampServer (a la derecha).
Nos centraremos, ahora, en la parte inferior que se encuentra bajo el título de Quick
Admin.
Aquí podrás encontrar 3 comandos que tienen que ver con el estado de los servicios:
Iniciar los Servicios (Start All Services) intentará lanzar los dos servicios (Apache y MySQL).
Detener los servicios (Stop All Services) parará los servicios que se estén
ejecutando, por lo que el estado del icono en la barra de tareas cambiará a .
Reiniciar los servicios (Restart All Services) parará los servicios e intentará ejecutarlos de nuevo. Utiliza esta opción cuando se te presente algún problema en su funcionamiento, o hayas cambiado algo en los archivos de configuración.
Por defecto, el servidor de WampServer está apagado (off-line). Esto quiere decir qué
sólo desde ése equipo se puede ver el contenido del localhost.
Si pulsamos en Encender (Put Online) hacemos público este contenido y otras
personas pueden verlo. Esto no quiere decir que alguien buscando en Google pueda
llegar a visitarnos. Sólo estará disponible para quienes conozcan nuestra IP pública. Si
quieres conocer la tuya, puedes encontrar muchas páginas que te la muestran, como Cuál
es mi IP.
Nota: Si te conectas a Internet a través de un router o cortafuegos, deberás de
configurarlo para que permita el acceso a localhost. Normalmente basta con abrir el
puerto 80.
Cuando el servidor está apagado (off-line) los iconos muestran un pequeño
candado: , y .
Para volver de nuevo al estado cerrado podrás seleccionar la opción Apagar (Put
Offline) que aparecerá en vez de Encender.
Podemos trabajar con cada servicio independientemente,
desde Apache → Service o MySQL →Service.
No vamos a detallar cada opción. Explicaremos las comunes.
Las opciones Iniciar/Continuar Servicio, Detener Servicio y Reiniciar Servicio son
los equivalentes a los que vimos en el menú principal pero tratados individualmente para
cada uno de los servicios.
Observa las dos últimas opciones Install Service y Remove Service, te servirán para
instalar y desinstalar el servicio. Al instalar el servicio este se iniciará con Windows, por lo
que no tendremos que ejecutar WampServer cuando queramos usarlo.
Finalmente veremos las opciones que vamos a utilizar de momento que se encuentran
en la parte superior..
Localhost abre una nueva ventana del navegador mostrando el contenido raíz del localhost. Por defecto verás una página creada por WAMP desde donde podrás navegar por el contenido de las carpetas.De todas formas también puedes abrir una nueva ventana y escribir http://localhost/carpeta/ para ver el contenido de una carpeta que se encuentre en el directorio que asignaste al localhost o acceder a un alias.
WWW Directory abre en una ventana del Explorador de Windows la carpeta que asignaste al localhost.Desde aquí podrás trabajar con los ficheros como hacíamos hasta ahora. Copiándolos, moviéndolos o borrándolos cuando sea necesario.
Por último la opción phpMyAdmin nos llevará a una página web desde donde podremos controlar, gestionar y crear nuestras bases de datos.
Recuerda, que a no ser que instales los servicios, cada vez que arranques el equipo
deberás de arrancar también WampServer para comenzar a trabajar con él.
Pág. 20.7
20.6. Configurar un servidor de pruebas
Una vez instalado WampServer tendremos listo un servidor local capaz de correr PHP
sin ningún tipo de problemas.
Ahora podemos combinar esta aplicación con Dreamweaver para probar las páginas
dinámicas que vayamos creando en nuestro sitio.
No tendremos más que declarar un Servidor de prueba en Dreamweaver.
Para ello deberás editar la configuración del sitio, haz clic en Sitio y luego
en Administrar sitios....
Selecciona el sitio que quieras modificar y pulsa Editar.
Se abrirá el cuadro de diálogo de Configuración del sitio.
Selecciona la categoría de Servidores.
Para configurar un nuevo servidor, pulsa el icono +.
En las opciones, en Conectar usando tenemos que elegir Local/red, ya que el servidor
está en nuestro propio equipo (equipo local).
Las opciones cambiarán y se mostrarán así:
Ahora deberás rellenar los datos del servidor de pruebas.
En Carpeta de servidor deberemos seleccionar una carpeta dentro
del localhost donde guardaremos los archivos que queramos probar. Pueden ocurrir dos
cosas:
Si nuestros archivos están ya en localhost (o accesibles con un alias), podemos indicar la misma carpeta en la que está definido el sitio en Dreamweaver.
Si no están en localhost, debemos de crear una carpeta allí para el sitio. Al vincular esa carpeta con el sitio, Dreamweaver irá copiando allí los archivos necesarios.
En nuestro caso nuestro localhost lo hemos definido un alias (sitios) para la carpeta
que contiene los sitios con los que estamos trabajando. Por lo tanto en Carpeta de
servidor, dejamos la misma carpeta del sitio en Dreamweaver. Insistimos en que si tienes
la carpeta de servidor en otra ubicación, debes indicarla aquí.
Y finalmente escribe el URL del sitio de pruebas. Siempre comenzaremos
por http://localhost/. Si sólo tenemos un sitio, lo normal es definirlo directamente ahí. Si
tenemos varios, debemos de indicar la subcarpeta correspondiente o su alias. En nuestro
caso tenemos hemos definido el alias sitios. Por lo tanto, aquí
Desde aquí podemos crear los distintos usuarios que se conectarán a la base de datos,
y darle distintos privilegios a cada uno.
Para crear un nuevo usuario sólo tienes que hacer clic en Agregar un nuevo usuario.
En la siguiente ventana tendrás que introducir los valores que definirán la cuenta:
En Servidor selecciona Local porque es el único modo con el que vamos a trabajar en
estos momentos. Esto quiere decir que se conecta desde el mismo servidor en el que está
la base de datos.
El resto puedes configurarlo a tu gusto.
Más abajo encontrarás estas opciones:
Aquí podrás seleccionar los privilegios del usuario en forma global, las opciones que
marques aquí se aplicarán sobre todas las bases de datos del sistema.
Puedes especificar también un límite de recursos (conexiones, peticiones,
etc...). 0 indica sin límite.
Cuando estés listo pulsa Continuar.
hora verás la pantalla con las opciones del nuevo usuario que acabas de crear. Verás
que algunas ya las conoces, como los privilegios globales.
Lo que nos interesa en este momento son unas opciones que encontrarás más abajo,
los privilegios específicos. Es decir, privilegios enfocados a una única base de datos:
Selecciona una base de datos en el desplegable o escribe su nombre en el cuadro de
texto. Luego pulsa Continuar.
Selecciona los privilegios que quieras aplicar y pulsa Continuar para finalizar.
Verás que en la misma página más abajo tienes una opción muy parecida a la que
acabamos de ver pero actuando únicamente sobre una tabla de la base de datos.
Estableciendo los privilegios de este modo recortaríamos muchísimo más la actuación
del usuario sobre la base de datos.
Los privilegios más comunes son los siguientes:
SELECT: permite al usuario realizar una consulta de selección para poder leer los datos de una tabla.
INSERT: permite al usuario realizar una consulta de creación de registro para introducir nuevos datos en una tabla.
UPDATE: permite al usuario actualizar los valores de una tabla.
DELETE: permite al usuario eliminar registros de una tabla.
CREATE: permite al usuario crear tablas en la base de datos.
DROP: permite al usuario eliminar una tabla o la base de datos completa.
Si conoces un poco SQL estos privilegios ya te serán familiares.
Para practicar la creación de privilegios realiza el Ejercicio Paso a Paso de
Asignación de Privilegios.
En este tema no realizaremos ejercicios sobre la creación de la base de datos del sitio Blog, en temas posteriores veremos qué tablas específicas deberemos crear y las crearemos entonces. Unidad 21. Páginas dinámicas (I)
21.1. 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
En este caso deberemos en Filtro: seleccionar el campo sobre el cual realizaremos el
filtro. Seleccionar en el cuadro de lista que contiene un = si queremos que el campo
sea igual, distinto,mayor, menor o que empiece o acabe con alguna cadena
determinada.
En el desplegable que encontrarás más abajo deberás seleccionar Valor introducido para poder especificar en el cuadro de la derecha (en la imagen 0) el valor
con el que comparar.
En apartados posteriores veremos el significado de escoger en el desplegable otra
opción que no sea Valor introducido.
Una vez hayas terminado, pulsa el botón Aceptar y el recordset contendrá únicamente
los registros que cumplan la condición indicada en el cuadro de diálogo.
Nota: recuerda que puedes utilizar el botón Prueba para previsualizar el efecto del filtro
sobre la tabla seleccionada.
Para practicar el filtrado de registros realiza el Ejercicio Paso a Paso de Filtrado de
Si seleccionas alguna de las tres últimas opciones se mostrará el siguiente cuadro de
diálogo:
Selecciona aquí el Juego de registros sobre el que quieras realizar el recuento y
pulsa Aceptar.
Dependiendo de la opción que escojas se añadirá un texto u otro a la página.
Registro inicial: Visualiza el número dentro del listado total de registros, del primer elemento de la lista que se está mostrando en la página actual.
Registro final : Visualiza el número dentro del listado total de registros del último elemento de la lista que se está mostrando en la página actual.
Total de registros: Visualiza el número total de registros del juego (la suma de todos los registros de todas las páginas).
Seleccionando la primera opción Estado de navegación de juego de registros
podremos insertar un literal que mostrará el recuento exacto de los registros que se están
visualizando, se añadirá una línea como ésta:
Que en la Vista en vivo tomaría este aspecto:
Como puedes ver, esta opción es una combinación de las tres anteriores que ilustra
perfectamente el funcionamiento del recuento de registros.
Para practicar el uso del recuento realiza el Ejercicio Paso a Paso de Recuento de
Registros.
Pág. 21.7
21.9. Mostrar/Ocultar regiones
Como hemos visto la paginación es muy útil para navegar por nuestros registros.
Pero existen determinados casos en los que nos gustaría que estos items funcionen de
forma diferente.
Por ejemplo, ¿por qué debe aparecer el elemento de navegación Anterior en la primera
página si en realidad no existe una página anterior a la que podamos ir?
Vamos a utilizar las opciones de Mostrar región para realizar algunos cambios sobre
los elementos de la página. En nuestro caso vamos a seleccionar Mostrar si no es la
primera página:
Estas opciones en realidad actúan sobre cualquier parte de la página, así que incluso
podrás hacer desaparecer una tabla o un párrafo si no se cumplen los criterios de la
opción.
Cuando hagas clic en alguna de ellas verás un cuadro de diálogo como éste:
Igual que en el apartado anterior existe un asistente que te permitirá crear un formulario que primero muestra los datos existentes en un registro de la tabla y te permitirá modificarlos y guardarlos.
Para ello, deberás hacer clic en el botón Asistente de formulario de
actualización de registros .
Se abrirá el siguiente cuadro de diálogo:
El modo en el que rellenaremos los datos es el siguiente:
Seleccionaremos, primero, la Conexión con la que trabajaremos.
Luego elegiremos la Tabla a actualizar que será de donde saquemos los datos que luego modificaremos.
Como deberemos elegir registro de entre toda la tabla para modificar, deberemos indicar cuál. Para ello deberemos seleccionar un campo (en Columna de clave exclusiva) y un juego de registros (en Seleccionar registro de) para establecer el
registro que va a mostrar la página. De esta forma vincularemos el campo del recordset de la página y se mostrará la información que coincida con él.
El resto funcionaría igual que en el cuadro de diálogo anterior. Seleccionando los campos que se van a mostrar, su tipo de elemento de formulario y la forma en la que se va a enviar.
En la caja de texto Valor predeterminado encontrarás la cadena que mostrará el contenido del campo en el registro en cuestión.
No lo modifiques si quieres que muestre la información almacenada. Sólo cámbialo si quieres que aparezca un valor fijo en vez del valor contenido en el registro, por ejemplo, ninguno, sin precio, etc... e incluso nada.
Finalmente pulsa Aceptar y el formulario se creará.
Pág. 21.13
21.14. Asistente de eliminación de registros
Siguiendo con los asistentes encontramos al final el de Eliminar Registro .
Para utilizar el asistente de Dreamweaver para crear páginas de eliminación de
registros deberás crear una página especial que se dedique única y exclusivamente a
eliminar el registro.
Para ello tendremos una primera página donde el usuario seleccionará el registro a
borrar y dará la orden de borrado; esta página enlazará con la página de borrado
pasándole el identificativo del registro a borrar, y la página de borrado mostrará los datos
del registro a borrar y pedirá confirmación al usuario.
Con lo cual deberemos seguir este guión:
La primera página deberá tener un enlace a la página de borrado de la forma:
borrar.php?id=99
Donde borrar.php será la página de borrado, id el nombre del parámetro que contiene el valor de clave del registro a borrar,y 99 es el valor de la clave del registro a borrar (en este caso queremos borrar el registro cuya clave sea 99).
1. Crear un recordset que muestre la información del elemento cuya clave se ha pasado como parámetro para que pueda ser verificado.Para ello deberás utilizar un juego de registros filtrado por el campo clave principal y el valor recibido como parámetro.
2. En la misma página añadiremos un formulario con un campo oculto y un botón de tipo Submit que permita al usuario confirmar el borrado y reenvíe a la misma página de borrado. Al campo oculto le deberemos asociar el campo clave principal del registro que se muestra, puedes hacerlo pulsando el botón que aparece al lado de su propiedad Valor:
Deberás recordar el nombre que le das a este control de formulario porque es el que utilizaremos para borrar el registro.
1. Luego podremos incluir el código para borrar el registro.
Haz clic en el botón Eliminar Registro en la barra de Datos, y rellena el siguiente cuadro de diálogo:
La primera opción deberás dejarla en Valor de clave principal. Puedes utilizar el resto de opciones para crear otros tipos de eliminaciones más complejas, aunque este método sea el más utilizado.Luego selecciona la Conexión, la Tabla donde se encuentra el registro a borrar y su Columna de clave principal.Por último le deberemos indicar cómo debe acceder al valor que le dará el valor de la clave principal del registro que tiene que eliminar, indica que lo hacemos por Parámetro URL y escribe el nombre del campo oculto del formulario que acabas de crear (es el que le pasa el valor).Finalmente puedes elegir a qué página redireccionar cuando se realice el
borrado.Pulsa Aceptar y habrás acabado.
21.15. Juegos de registros avanzados
Por último en este apartado vamos a ver un modo avanzado de crear juegos de
registros.
Si en el cuadro de diálogo Juegos de registros que hemos visto hasta ahora haces clic
en el botón Avanzado... verás estas otras opciones:
En este cuadro de diálogo puedes crear juegos de registros mucho más complejos.
El principio del cuadro es igual que la versión simple, deberás introducir
un Nombre para el juego de registros y asignarle una Conexión.
Luego deberemos introducir una sentencia SQL que indicará qué registros se van a
mostrar.
Mediante las opciones y botones que veremos ahora podremos crear sentencias
bastante completas, pero si quieres aprender más sobre este lenguaje puedes visitar
el curso de SQL que se encuentra en nuestra página web.
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...
22.2. 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.
o coche/@color=rojo, para que el campocoche del elemento tenga un atributo de color rojo.
Condición de búsqueda: puedes buscar en un nodo o atributo utilizando la función contains(). Así podrías escribir contains(nombre, 'la') y mostraría sólo aquellos elementos que tuviesen la cadena la en su nombre.
Una vez introducida la condición simplemente pulsa Aceptar y la región condicional se
creará.
En el caso de que utilicemos la condicional múltiple verás que se crea la siguiente
estructura:
Deberás introducir un bloque en xsl:when que se mostrará si se cumple la condición, y
otro en xsl:otherwise para que se muestre cuando no se cumpla.
Pág. 23.6
23.7. Insertar un fragmento XSLT
Una vez tenemos el archivo XSLT terminado y mostrando los datos que queremos
mostrar podemos pasar a insertarlo en cualquier página dinámica.
Hacerlo es muy sencillo, sólo tendrás que abrir un archivo PHP (en nuestro caso),
colocar el punto de inserción en el lugar que quieras que aparezca la información y hacer
clic en el botónTransformación XSL que encontramos en el panel Insertar, en la
Deberás rellenar este cuadro de diálogo para definir el modo en que accederemos y
cargaremos el archivo XML deseado.
El procedimiento es muy sencillo, primero indicaremos un nombre en Conjunto de
datos para poder distinguirlo y diferenciarlo de otros posibles conjuntos de datos que
queramos cargar.
En Origen XML indicaremos la ruta del archivo XML, puede encontrarse en nuestro
propio sitio o en una dirección concreta de internet, en este último caso deberemos indicar
la ruta completa (incluyendo http://...).
Una vez indicado el archivo XML podemos hacer clic en el botón Obtener
esquema para ver el esquema XML del archivo.
Selecciona el Elemento de fila, es decir la etiqueta XML que contiene el conjunto de
datos que queremos cargar, este paso se realizará tal cual como vimos en la unidad
anterior. Una vez seleccionado haz clic en el botón Vista previa para ver un listado con
los primeros 20 elementos (de muestra) para asegurarte del contenido del archivo.
Para finalizar podemos definir el tipo de datos que contiene cada dato del elemento.
Podemos hacerlo haciendo clic sobre él en el listado de Columnas del conjunto de
datos y seleccionando su tipo en el desplegable Tipo de datos. Podrás elegir
entre: Cadena (de texto), Número, Fecha o Vínculo de imagen.
Este cuadro de diálogo también te permitirá ordenar los elementos del conjunto
respecto a una de sus columnas en el momento de la carga. Para ello
selecciona Ordenar y elige el ordenAscendente o Descendente en Dirección.
Para eliminar las filas duplicadas marca la opción Distinguir al cargar.
Por último marca la opción Desactivar caché de datos XML si quieres que el
contenido que se muestre en tu página se refresque cada cierto tiempo, indica este
intervalo en la opciónActualizar datos automáticamente. En caso de que esta opción no
se active los datos se cargarán una vez y sólo se actualizarán si se refresca la página.
Cuando hayas terminado de configurar el cuadro de diálogo haz clic en Aceptar y los
elementos listos para utilizar se mostrarán en el panel Vinculaciones.
24.3. Crear una región de Spry
Para poder mostrar datos provenientes de un conjunto Spry será necesario crear
una región Spry. Para ello simplemente haz clic en Insertar → Spry → Región de Spry.
Verás el siguiente cuadro de diálogo:
Selecciona el conjunto de datos creado anteriormente en Conjunto de datos Spry.
Luego decide si quieres que se cree un Contenedor de tipo DIV o SPAN, ten en cuenta
que un DIV es un elemento de tipo bloque, por tanto contiene un salto de línea antes y
después de él. Si lo que te interesa es insertar el contenido XML en línea (por ejemplo
dentro de un párrafo) selecciona el elemento de tipo SPAN.
En caso de que tuvieses algún elemento de la página seleccionado las
opciones Ajustar selección y Reemplazar selección se activarán para que puedas elegir
si situar la región envolviendo el elemento seleccionado o sustituirlo por el contenedor
elegido.
En principio veremos únicamente la opción de Tipo Región, en próximos apartados
veremos para qué nos servirá el tipo Región de detalle.
Pulsa Aceptar y estarás listo para arrastrar elementos del panel Vinculaciones a tu
página:
24.4. Repetición de elementos
En el apartado anterior vimos como insertar elementos del archivo XML, pero de ese
modo sólo seremos capaces de visualizar la primera fila de elementos.
Dreamweaver pone a nuestra disposición la opción de Repetición de Spry para poder
crear repeticiones de nuestro diseño para cada una de las filas que compongan el
conjunto de datos. Para ello haz clic en Insertar → Spry → Repetición de Spry y verás
el siguiente cuadro de diálogo:
Del mismo modo que antes indicaremos el tipo de Contenedor, el Conjunto de datos
Spry y si queremos que se inserte ajustando o reemplazando el elemento HTML
seleccionado.
Puedes seleccionar Repetir o Repetir hijo dependiendo del tipo de repetición que
quieras conseguir. Seleccionando Repetir hijo harás que lo que se encuentre dentro de la
región se repita para cada una de las filas del archivo, (opción muy útil para las tablas y la
repetición de elementos tr (fila de la tabla)).
Pulsa Aceptar y ahora los elementos que añadas se repetirán para cada una de las
filas existentes en el archivo XML.
24.5. Listas de repetición
Cuando queremos crear un listado de elementos XML sin tener en cuenta el resto de
información del archivo podemos utilizar la opción Insertar lista de repetición para
generar listados de este tipo:
Brooklyn Follies Crepúsculo El Evangelio De Judas El Método: Al Descubierto La Sociedad Secreta De Los Maestros De La Seducción El Pintor De Batallas El Poder Del Ahora El Profesor El Viaje A La Felicidad: Las Nuevas Claves Científicas La Catedral Del Mar La Sombra Del Viento La Verdadera Historia Del Club Bilderberg Ligero De Equipaje: La Vida De Antonio Machado Matanzas En El Madrid Republicano: Paseos, Checas, Paracuellos... Miguel Duran: Del Cielo Al Abismo Milagro En Los Andes Milenio 3: El Libro Seda Travesuras De La Niña Mala Un Lugar Llamado Nada Yo, Maya Plisetskaya
Para ello simplemente haz clic en Insertar → Spry → Lista de Repetición de Spry y
verás el siguiente cuadro de diálogo:
Selecciona el tipo de listado que quieres generar en Etiqueta de contenedor. Puedes
elegir entre UL (lista sin ordenar), OL (lista ordenada), DL (lista de
definición) o SELECT (lista desplegable).
En las dos primeras opciones el cuadro de diálogo permanecerá tal y como ves en la
imagen.
Si seleccionas DL (lista de definición) o SELECT (lista desplegable) su aspecto
variará un poco debido a las diferentes opciones que admiten estas etiquetas:
DL (lista de definición): Consta de dos campos, Columna DT que contiene el
nombre el nombre a definir, y Columna DD que contiene la definición del campo anterior.
SELECT (lista desplegable): Consta de dos campos, Columna de etiquetas que
contiene el nombre que se muestra en el desplegable, y Columna Valor que contiene el
valor que se pasa cuando se envía el formulario al que pertenece el desplegable.
Combinando esta región con una tabla de datos Spry con la opción Actualizar
regiones de detalle al hacer clic en la fila activada podremos provocar lo siguiente: Al
hacer clic sobre una de las filas todos los campos situados en la región Spry (Región de
detalle) se actualizarán para mostrar la información relativa a la fila seleccionada.
Esta opción es muy sencilla y vistosa, pues permite una interacción total con el usuario
a la hora de mostrar información en pantalla.
Ejercicio propuesto de la Unidad 24 Prueba evaluativa de la Unidad 24
Pág. 24.5
Unidad 25. AJAX y Spry Framework (I)
25.1. Introducción
Hasta ahora hemos visto dos tipos de lenguaje de programación en nuestra web:
Por un lado JavaScript (comportamientos). Se ejecuta en el lado del cliente, es decir, en el propio navegador de quien visita la web, sin tener que recargar la página. Esto dota de dinamismo a la página, ya que empleando conocimientos más avanzados, podemos crear HTML, cambiar CSS... pero requiere que todo esto haya sido enviado al cliente al cargar la página.
Por otro lado, hemos visto PHP. Se envía una petición al servidor, el cual genera la página, muchas veces conectándose a la base de datos. Cuando la página está
creada en el servidor, se devuelve al usuario, quien la ve en el navegador. Si el usuario quiere cambiar el contenido, por ejemplo al paginar en un listado, ha de volver a enviar la página, que se tiene que volver a generar y ser devuelta al usuario.
Combinando los scripts ejecutados en el cliente y en el servidor obtenemos AJAX. Lo
que conseguimos con esto es una comunicación asíncrona, pidiendo al servidor sólo los
datos que el usuario necesita, sin recargar la página, y usando JavaScript para actualizar
solo las regiones afectadas.
Por ejemplo, imaginemos el típico carrito de compra. Cuando el usuario añade un
artículo, debemos "apuntarlo" en su lista de artículos del servidor. Sin AJAX habría que
enviar toda la página, volver a crearla y traerla de vuelta. En cambio, con AJAX, sólo
enviamos el ID del artículo. El servidor lo procesa, y envía el resultado a AJAX, que al
recibirlo actualiza únicamente la vista del carrito del usuario, sin recargar toda la página.
Esto hace que el usuario perciba la página como una aplicación interactiva más que como
una web.
Para incluir comportamientos y características de AJAX en nuestras páginas
deberemos tener conocimientos de JavaScript, XML y DOM (Document Object Model).
Con Spry, utilizar AJAX se hace mucho más simple y asequible.
Como hemos visto en la unidad anterior es posible 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.
Ahora veremos un modo avanzado de utilizar estas funcionalidades desde una
perspectiva menos cómoda pero mucho más potente, pues seremos capaces de manejar
el contenido dinámico de una forma total y siempre utilizando la librería Spry que nos
proporciona Adobe.
Spry es una tecnología desarrollada y propietaria de Adobe, y es la que emplea
Dreamweaver. Existen otras opciones, como jQuery, muy empleada en la web.
Como puedes ver en el ejemplo, este código creará una tabla con un encabezado con
las palabras ID y PROPIEDAD.
El resto de filas serán repeticiones que mostrarán los diferentes registros del dataset.
Si hacemos clic en alguno de los encabezados, los registros se reordenarán para
mostrarse ordenados por el campo que se encuentra en el encabezado pulsado. A la
celda le hemos añadido un comportamiento onclick que ejecute sobre el
dataset miDataSet el método sort ordenando por el campo entre paréntesis.
Es posible especificar en qué dirección se realizará la ordenación, para ello deberás
indicarlo añadiendo un nuevo parámetro:
miDataSet.sort('propiedad', 'ascendig')
miDataSet.sort('propiedad', 'descending')
miDataSet.sort('propiedad', 'toggle')
Al asociar este método a un comportamiento podemos provocar que los registros se
ordenen ascendentemente, descendentemente o utilizar la propiedad toggle para que
cada vez que se provoque el comportamiento cambie la ordenación de ascendente a
descendente y viceversa.
Como hemos dicho también es posible provocar la ordenación al cargar el dataset, de
esta forma al visualizar los datos por primera vez aparecerán ordenados de la forma en
que queramos y no hará falta esperar a que se realice un comportamiento para
ordenarlos.
Ordenar un dataset en la carga requiere que se especifique en el momento en que lo
definimos.
Veamos un ejemplo:
<script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml","listado/elemento",{sortOnLoad:"propiedad", sortOrderOnLoad:"descending"}); </script>
Aquí, en el momento de la declaración del dataset indicamos por qué campo se debe
de ordenar y en qué sentido.
Podemos ordenar por varios campos, separándolo por /. Por
ejemplo sortOnLoad:propiead/@atributo.
La ordenación en algunos momentos puede crearnos problemas si estamos
visualizando campos que contienen números o fechas. Por ejemplo como número, 9 es
menor que 10. En cambio, como texto al ordenar alfabéticamente, '10' va antes que '9'.
Para ello utilizaremos la declaración de los tipos de columnas:
<script type="text/javascript"> var miDataSet = new Spry.Data.XMLDataSet("archivo.xml", "listado/elemento", {sortOnLoad:"propiedad", sortOrderOnLoad:"descending"}); miDataSet.setColumnType("propiedad", "number"); </script>
De esta forma estamos indicando que la columna propiedad es de tipo numérico,
también podríamos haber escrito date si fuese de tipo fecha.
Por defecto las columnas se consideran de tipo texto y por lo tanto se ordenará
alfabéticamente.
Pág. 25.8
25.8. Condicionales
Es posible crear condiciones dentro de las áreas de repetición para decidir si los
elementos se deberán mostrar o no.
Para ello nos podremos valer de diferentes métodos.
El primero que veremos será el atributo spry:test, que debe colocarse junto a