Internet, el instrumento esencial de la diplomacia del siglo XXI

EL TEXTO Y LAS LISTAS EN DREAMWEAVER MX

1 - El texto Para comenzar, necesitamos crear una pgina nueva y darle un buen ttulo. Como ya hemos visto esto en los temas anteriores le daremos un ttulo significativo. Una vez que hayamos creado la pgina y le hayamos dado el ttulo, escribiremos en la vista de diseo el texto de forma normal.

Una vez que hemos escrito el texto de nuestra primera pgina en la barra Insertar (Insert) vamos a elegir el tipo de panel insertar que vamos a tener activo. ste depender de la accin que vayamos a realizar, que, en este caso, ser Texto (Text) por lo que pulsaremos esa opcin.

1.1 - Formato de texto En el programa, adems de aadir texto fcilmente, podemos darle formato y aplicarle un gran nmero de efectos que ayudarn a realzar nuestra pgina Web. Anteriormente, hemos activado la opcin Texto (Text), en la barra Insertar (Insert). En la imagen inferior vemos cmo aparece la ventana de trabajo.

El texto y las listas en Dreamweaver MX

-1-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Darle formato a un texto es tan sencillo como seleccionar la zona que deseamos y buscar en los iconos de la pestaa Texto (Text), el efecto que deseemos aplicarle. En este caso, al primer prrafo de nuestro documento vamos a darle una apariencia de Encabezado1, para ello pulsamos h1.

Al segundo prrafo le daremos un formato de Encabezado2, pulsando h2.

Y al tercer prrafo le daremos formato de Encabezado 3, pulsando h3.

En la barra Texto (Text), vemos otros iconos con distintos formatos. Por ejemplo, pulsando el icono B, resaltamos en negrita el texto seleccionado, con el icono I, le damos al texto seleccionado nfasis con un formato inclinado como el de la letra itlica de los procesadores de textos.
El texto y las listas en Dreamweaver MX -2-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Sin embargo, el lenguaje HTML, tiene sus propias formas de resaltar y dar nfasis, y de hecho se hace pulsando en el icono S, que viene de la palabra Strong en ingls, y el icono em que viene de la palabra Emphasis. Estos dos efectos son virtualmente iguales a B e I, aunque puede que cada navegador le de una pequea variacin al aspecto de uno u otro.

1.2 - El panel de propiedades Vamos a ver cmo puede el panel Propiedades (Properties) ayudarnos a mejorar el aspecto de nuestro texto. En la imagen inferior tenemos una vista general del panel.

Desde el panel de propiedades podemos, tras seleccionar una lnea o prrafo, aplicarle, por ejemplo, una alineacin centrada, simplemente pulsando en el icono de la imagen

Podemos combinar en una misma pgina varios tipos de alineacin. Por ejemplo, podemos darle al segundo prrafo una alineacin justificada y mantener al mismo tiempo el centrado del primer prrafo, como veremos en la primera imagen de la siguiente pgina.

El texto y las listas en Dreamweaver MX

-3-

Internet, el instrumento esencial de la diplomacia del siglo XXI

Vamos a probar, ahora, la alineacin derecha en el tercer prrafo.

Por ltimo, podemos aplicarle a todo un prrafo una sangra, tal como vemos en la imagen inferior

El texto y las listas en Dreamweaver MX

-4-

Internet, el instrumento esencial de la diplomacia del siglo XXI

1.2.1 - Formatos en el panel de propiedades En la parte izquierda del panel de propiedades, tenemos unas opciones. Estas son, Formato (Format), Fuente (Font), Estilo (Style), Tamao (Size), Color (Color).

Procedamos a verla poco a poco. La primera opcin, Formato (Format), nos permite cambiar el formato del prrafo. Por defecto los prrafos no tienen formato, pero podemos elegir uno de la lista. Segn el valor que elijamos, nuestro prrafo tendr una apariencia u otra. Ya hemos visto los formatos de Encabezado (Heading) del 1 al 3, y aqu tenemos ms opciones para aplicar.

En la opcin Fuente (Font) podemos predeterminar qu juego de fuente ser visible por el usuario. Esta opcin es muy til, ya que en el caso de que el usuario no tenga instalada la fuente que hemos elegido para nuestra pgina, podemos establecer con esta instruccin un juego de fuentes suplentes.

La opcin Estilo (Style), hace referencia a una funcionalidad avanzada de un formato de pginas llamado CSS, que por ahora no vamos a ver. Basta saber que existe y que controla la forma en que escribimos las instrucciones para el navegador.

El texto y las listas en Dreamweaver MX

-5-

Internet, el instrumento esencial de la diplomacia del siglo XXI

En la opcin Tamao (Size), elegimos el tamao de la fuente. Si estamos acostumbrados a usar procesadores de textos, puede sorprendernos que a parte del tamao por punto, al que podemos estar acostumbrados, vemos tambin opciones de tamao pequeo o mayor, entre otras. Esto se explica porque los navegadores permiten al usuario elegir el tamao de visualizacin de la letra, y si el usuario cambia el tamao, puede perderse el efecto deseado. Con los tamaos relativos podemos conservar el efecto visual del texto aunque el usuario cambie estos valores en su navegador.

Por ltimo, podemos utilizar colores pulsando Color (Color) para dar ms vistosidad a nuestros textos. Slo tenemos que marcar el texto que queramos colorear y elegir un color de la tabla.

2 - Las listas Cuando estamos creamos una pgina Web nos encontraremos, muchas veces, con que deseamos dar a nuestros textos un aspecto ms ordenado. En un editor de textos utilizaramos las listas y este programa tambin nos permite crear listas para hacer ms atractivas nuestras pginas. Una de las formas de crear listas con el programa es activar la barra Texto (Text), tal y como lo vemos en la imagen de la siguiente pgina.

El texto y las listas en Dreamweaver MX

-6-

Internet, el instrumento esencial de la diplomacia del siglo XXI

2.1 - Las listas simples Ya hemos visto anteriormente algunas de las funcionalidades del panel texto, ahora vamos a continuar explorndolo con las funciones de listas. Pulsaremos el botn ul, con el que activamos la opcin Listas simples o no ordenadas (Unordered lists).

Qu es una lista simple? La mejor de forma de verlo es a travs un ejemplo. Si seleccionamos la lista simple, la lnea donde tengamos activo el cursor de texto ser el comienzo de una lista. Cuando pulsemos la tecla Enter, el programa convertir el texto introducido en esa lnea en una entrada de la lista y preparar la siguiente lnea como otro elemento de la lista.

Para terminar de introducir elementos en la lista slo tenemos que pulsar la tecla Enter dos veces seguidas y ya podremos continuar escribiendo normalmente.

El texto y las listas en Dreamweaver MX

-7-

Internet, el instrumento esencial de la diplomacia del siglo XXI

2.1.1 - El formato de las listas simples Vamos a ver ahora cmo aplicar formato tambin a las listas. Podemos acceder a las opciones de formato desde el panel Propiedades (Properties), en la parte inferior de la ventana del programa.

Para dar formato, el primer paso siempre es seleccionar el texto al que deseemos aplicar el formato. Una vez que lo hayamos seleccionado debemos buscar en el panel Propiedades (Properties) el icono del formato que deseemos aplicarle. Atencin, en lecciones anteriores vimos que podamos aplicarle formato a todo un prrafo simplemente situando el cursor en cualquier punto del prrafo. Pero si queremos aplicar formato a las listas deberemos seleccionar toda la lista, y no slo un elemento.

Esto se debe a que el programa nos permite aplicar formatos diferenciados a cada elemento de la lista. En el ejemplo de la primera imagen que se muestra en la siguiente pgina vemos como hemos puesto en negrita slo uno de los cuatro elementos de la lista, pulsando el icono B.

El texto y las listas en Dreamweaver MX

-8-

Internet, el instrumento esencial de la diplomacia del siglo XXI

El programa 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 Itlica

2.2 - Las listas ordenadas Veamos otro tipo de listas. Las listas ordenadas (Ordered lists),abreviadas tambin como ol, en contra de lo que pudiera parecer, no se llaman as porque ordenen nuestras listas alfabticamente o por cualquier otro criterio. Una lista ordenada se diferencia de las dems, porque a cada elemento antecede un nmero en orden creciente, como podemos ver en la imagen de la siguiente pgina.

El texto y las listas en Dreamweaver MX

-9-

Internet, el instrumento esencial de la diplomacia del siglo XXI

En el programa podemos crear una lista ordenada, tanto pulsando en el icono de lista ordenada del panel Propiedades (Properties), o en el icono ol de la barra texto que se encuentra en el grupo de paneles Insertar (Insert).

El funcionamiento para aadir elementos de las listas o cerrar la lista es idntico al que hemos visto en la leccin de las listas simples. Tambin podemos aadir elementos a una lista pulsando en el icono li, (List Item) tal como vemos en la imagen inferior

El texto y las listas en Dreamweaver MX

- 10 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Finalmente, este es el aspecto de nuestra lista ordenada:

2.2.1 - El formato de las listas ordenadas Vamos a continuar descubriendo los formatos que podemos aplicar a las listas. Seguimos investigando las opciones disponibles en el panel de propiedades (Properties), esta vez en la zona de la derecha. Empezaremos con la opcin Formato (Format): si pulsamos sobre la pestaa, vemos que se despliega un men con un gran nmero de opciones, algunas de las cuales ya conocemos de la barra Texto (Text) del panel Insertar (Insert), como es el caso de Encabezado (Heading) 1, 2 y 3. Pero en la imagen de abajo vemos que en el men Formato (Format), tenemos muchas ms opciones. Pulsando en cada una de ellas aplicamos al prrafo un formato de tamao y estilo distinto.

A la derecha de la opcin Formato (Format), nos encontramos con la opcin Estilo (Style). Esta opcin es algo engaosa, ya que con estilo no se refiere al texto, sino al estilo de la pgina Web. Esta opcin es muy til en el caso de que estemos utilizando tecnologas CSS, que veremos posteriormente.

El texto y las listas en Dreamweaver MX

- 11 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Siguiendo con los formatos, tenemos la opcin Fuente (Font). Esta opcin tambin puede confundirnos. No se refiere a la fuente que vamos a aplicar directamente al texto, si no a los tipos de fuente predeterminada (Default Font) 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, adems de los tamaos numricos, a los que debemos estar acostumbrados, tambin nos encontramos con otros tamaos preestablecidos: pequeo, mediano y grande (Small, medium, large). Estos tamaos tienen su razn de ser en los navegadores que permiten a los usuarios cambiar, con slo un clic, el tamao de visualizacin de los textos. Con estas opciones podemos tener un control mayor sobre la forma en que nuestros textos se mostrarn con independencia del tamao que haya elegido el usuario para visualizarlos.

Por ltimo, podemos tambin 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.

El texto y las listas en Dreamweaver MX

- 12 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Tambin podemos elegir las opciones de colores avanzadas, aunque es posible que dependiendo del navegador del usuario y las caractersticas de su tarjeta grfica los colores no se muestren exactamente como nosotros deseamos.

2.3 - Los elementos de las listas simples y ordenadas Ya hemos visto cmo crear listas simples y listas ordenadas por lo que ahora vamos a profundizar en la razn de ser de su existencia, los elementos de las listas. Para ello pulsaremos en el botn Elemento de la lista (List Item), situado en el panel de Propiedades (Properties).

El programa nos mostrar una ventana de dilogo llamada Propiedades de lista (List Properties). En la primera opcin tenemos Tipo de lista (List Type), opcin con la que podemos elegir cmo mostraremos la lista. Podemos, entre otros modelos, crear listas numricas (Numbered List), o listas en las que cada elemento sea mostrado precedido por un punto (Bulleted List).

Tambin podemos, pulsando en la opcin estilo, elegir el Estilo (Style) para nuestra lista. Por ejemplo, podemos querer mostrar una lista numrica (Numbered List) normal, o quizs que nuestros elementos sean mostrados con una lista de nmero romanos, o quizs una lista alfabtica.

El texto y las listas en Dreamweaver MX

- 13 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

El programa nos permite tambin elegir el nmero de comienzo de nuestra lista (Start Count). Podemos no querer comenzar por el uno, o quizs deseemos continuar la numeracin de una lista anterior

Por ltimo, podemos cambiar el estilo de algn elemento concreto de la lista, simplemente pulsando en la opcin Elemento de la lista (List Item), y configurarlo segn nuestras necesidades.

El texto y las listas en Dreamweaver MX

- 14 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

2.4 - Las listas de definiciones Ya hemos visto las listas simples y las listas ordenadas. An nos queda un ltimo tipo de listas, las listas de definiciones (Definition Lists), que se distinguen del resto en que sus elementos son definiciones. Vamos a verlo con un ejemplo. En la imagen inferior vemos una lista de definiciones en la que debajo de cada elemento (Dreamweaver y Explorer) tenemos otro elemento en una lnea con sangra que define el elemento anterior.

Activar una lista de definiciones es muy sencillo, simplemente tenemos que situar el cursor en el punto donde queramos insertarla y pulsar en el botn dl (Definition Lists) de la barra Texto (Text) del panel Insertar (Insert). Para crear un elemento nuevo, podemos hacerlo como ya hemos visto en las listas anteriores, bien pulsando el icono dt (Definiton Term) para crear un nuevo trmino de definicin o en el icono dd (Definition Description) para crear una nueva descripcin de la definicin.

El texto y las listas en Dreamweaver MX

- 15 -

Internet, el instrumento esencial de la diplomacia del siglo XXI

Vamos a explicar un poco ms detalladamente cul es la funcin de cada icono. Dl significa lista de definiciones (Definition List) y es el icono que pulsamos para crear una lista de definicion nueva. El icono dt, significa trmino de definicin, (Definition Term) y es la palabra que pretendemos definir. En el ejemplo, los trminos de definicin son Dreamweaver y Explorer.

El botn dd es la definicin del trmino (Definition Description), y es la definicin de cada uno de los trminos.

El texto y las listas en Dreamweaver MX

- 16 -