Las Listas:
Cuando estamos creamos una página web nos
encontraremos, muchas veces, con que deseamos dar a nuestros un textos
un aspecto más ordenado. En un editor de textos utilizaríamos las
listas.
Dreamweaver también nos permite crear listas para hacer más atractivos nuestras páginas.
Una de las formas de crear listas con Dreamweaver es activar la barra Texto, para ello pulsaremos, tal como vemos en la imagen inferior, en el botón “Común” .
Y en el panel que se despliega seleccionáremos la opción Texto.
Ya hemos visto anteriormente algunas de las
funcionalidades del panel texto, ahora vamos a continuar explorándolo
con las funciones de listas.
Pulsaremos el botón “ul”. Con este botón activamos la opción “Listas simples o no ordenadas”.
¿Qué es una lista simple?
La mejor de forma de verlo es a través un ejemplo.
Si seleccionamos la lista simple, la línea donde
tengamos activo el cursor de texto será el comienzo de una lista. Cuando
pulsemos la tecla enter, Dreamweaver convertirá el texto introducido en
esa línea en una entrada de la lista y prepara la siguiente línea como
otro elemento de la lista.
Para terminar de introducir elementos en la lista
sólo tenemos que pulsar la tecla enter dos veces seguidas y ya podremos
continuar escribiendo normalmente.
Dar Formato a las Listas
Ahora vamos a ver como aplicar formato también a las listas.
Podemos acceder a las opciones de formato desde el panel propiedades, en la parte inferior de la ventana de Dreamweaver .
Para dar formato el primer paso, es siempre marcar el
texto al que deseemos aplicarle el formato. Una vez que lo hayamos
marcado deberos buscar en el panel propiedades el icono del formato que deseemos aplicarle.
Atención, en lecciones anteriores vimos que podíamos
aplicarle formato a todo un párrafo simplemente situando el cursor en
cualquier punto del párrafo. Pero si queremos aplicar formato a las listas deberemos marcar toda la lista, y no sólo un elemento.
Esto es debido a que Dreamweaver
nos permite aplicar formatos diferenciados a cada elemento de la lista,
en el ejemplo de la imagen inferior vemos como hemos resaltado sólo uno
de los cuatro elementos de la lista, pulsando el icono “B”
Dreamweaver nos permite combinar de forma sencilla distintos formatos sobre el mismo elemento.
Por ejemplo en la imagen inferior hemos combinado el resaltado con el efecto “Itálica” .
Las Listas Ordenadas
Las listas ordenadas, en
contra de lo que pudiera parecer a primera vista, no se llaman así
porque ordenen nuestras listas alfabéticamente o por cualquier otro
criterio.
Una lista ordenada se diferencia de las demás, porque a cada elemento antecede un número en orden creciente.
En Dreamweaver podemos crear una lista ordenada,
tanto pulsando en el icono de “lista ordenada” del panel propiedades, o
en el icono “ol” de la barra texto, en el grupo de paneles insertar.
El funcionamiento para añadir elementos de las listas
o cerrar la lista es idéntico al que hemos visto en la lección de las
listas desordenadas.
También podemos añadir elementos a una lista pulsando en el icono “li” , tal como vemos en la imagen inferior.
Finalmente este es el aspecto de nuestra lista ordenada.
El Formato para Listas Ordenadas
Seguimos investigando las opciones disponibles en el panel de propiedades, esta vez en la zona de la derecha.
Empezaremos con la opción formato, si pulsamos sobre
la pestaña, vemos que se despliega un menú con gran número de opciones,
algunas de ellas ya las conocemos de la barra texto del panel insertar.
Por ejemplo encabezado 1, 2 y 3.
Pero en la imagen de abajo vemos que en el menú
formato, tenemos muchas más opciones. Pulsando en cada una de ellas
aplicamos al párrafo un formato de tamaño y estilo distinto.
Hablando de Estilo, a la derecha de la opción formato, nos encontramos con la opción estilo. Esta opción es algo engañosa, ya que con estilo no se refiere al texto, sino al estilo de la página web.
Esta opción es muy útil en el caso de que estemos
utilizando tecnologías CSS, pero esto pertenece a un nivel muy superior a
los objetivos de este curso. Baste saber por ahora que al igual que el
mundo real, hay distintos tipos de leguajes en el que se pueden crear
las páginas webs. Algunos de ellos son el lenguaje Html, el lenguaje
Xml, o el CSS, entre otros muchos.
El objetivo de este curso es aprender el uso de la
aplicación Dreamweaver de Macromedia, por lo que de los distintos tipos
de lenguajes sólo tenemos que saber lo necesario para convencernos de
que Dreamweaver nos permite hacer casi de todo sin tener que programar
una sola línea en ningún lenguaje web.
Siguiendo con los formatos, tenemos la opción “Fuente”.
Esta opción también puede confundirnos. No se refiere a la fuente que
vamos a aplicar directamente al texto, si no a las fuentes
predeterminadas y en el orden que el navegador del usuario intentará
aplicarlas a nuestra lista en el caso de que no encuentre en su memoria
las fuentes con que nosotros hemos creado la lista.
Como novedad podemos comprobar que además de los
tamaños numéricos, al que debemos estar acostumbrados, también nos
encontramos con otros tamaños “pre-establecidos” Small o médium o large
(pequeño, mediano, grande).
Estos tamaños tienen su razón de ser en los
navegadores permiten a los usuarios cambiar, con sólo un clic, el tamaño
de visualización de los textos. Con estas opciones podemos tener un
control mayor sobre la forma en que nuestros textos se mostraran con
independencia del tamaño que haya elegido el usuario para visualizarlos.
Por último, podemos también realzar nuestras listas modificando el color del texto, ya sea de un único elemento de la lista, o de toda ella.
En el panel de color, podemos elegir una gran
variedad de modos de asignar color, podemos pulsar uno predefinido de la
tabla mostrada, o podemos situar la pipeta sobre cualquier color de la
pantalla y “capturarlo” para nuestra lista.
También podemos elegir las opciones de colores
avanzadas, aunque es posible que dependiendo del navegador del usuario y
las características de su tarjeta gráfica los colores no se muestren
exactamente como nosotros deseamos.
