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. Dreamweaver tambin nos permite crear listas para hacer ms atractivos nuestras pginas. 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 botn Comn.

Y en el panel que se despliega seleccionaremos la opcin Texto.

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 este botn activamos la opcin Listas simples o no ordenadas.

Dasuac/ 2014

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, Dreamweaver convertir el texto introducido en esa lnea en una entrada de la lista y prepara 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.

LAS LISTAS ORDENADAS

Las listas ordenadas, en contra de lo que pudiera parecer a primera vista, 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. 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.

ELEMENTOS DE LAS LISTAS

Para ello pulsaremos en el botn elemento de la lista, que est en el panel de propiedades.

Dasuac/ 2014

Dreamweaver, nos mostrar una ventana de dilogo llamada propiedades de lista. En la primera opcin, tenemos Tipos de lista, con esta opcin podemos elegir como mostraremos la lista. Podemos, entre otros modelos, crear listas numricas, o listas en las que cada elemento sea mostrado precedido por un punto...

Tambin podemos, pulsando en la opcin estilo, elegir el estilo numrico para nuestra lista. Por ejemplo, podemos querer mostrar una lista numrica normal, o quizs queramos que nuestros elementos sean mostrados con una lista de nmero romanos, o puede que queramos una lista alfabtica...

Dreamweaver nos permite tambin elegir el nmero con que comenzar nuestra lista. Podemos no querer comenzar por el uno, o quizs deseemos continuar la numeracin de una lista anterior.

Dasuac/ 2014

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

LAS LISTAS DE DEFINICION

Ya hemos visto las listas ordenadas y las listas desordenadas. An nos queda un ltimo tipo de listas, las listas de definicin. Qu son las listas de definicin. Fcil. Una lista donde sus elementos son definiciones. No ha quedado suficientemente claro? Vamos a verlo con un ejemplo. En la imagen inferior vemos una lista de definicin, debajo de cada elemento (Dreamweaver y Explorer) tenemos otro elemento en una lnea con sangra que define el elemento anterior. Esto es una lista de definicin.

Activar una lista de definicin es muy sencillo, simplemente tenemos que situar el cursor en el punto donde queramos insertarla y pulsar en el botn dl de la barra texto, del panel insertar.

Dasuac/ 2014

Vamos a explicar un poco ms detalladamente cual es la funcin de cada icono. dl significa declaracin de la lista, es el icono que pulsamos para crear una lista de definicin nueva. LAS TABLAS Las tablas tienen muchsima importancia en el diseo de pginas web. Es el esqueleto sobre el que las pginas se construyen. En esta leccin vamos a ir paso a paso y crearemos una tabla normal como las que podemos crear en cualquier procesador de textos. Podemos crear una tabla fcilmente, pulsando en el icono Tabla, de la barra comn, del panel insertar, tal como vemos en la imagen inferior.

Cuando pulsamos sobre el icono, Dreamweaver abre una ventana de dilogo como la que vemos abajo. En ella nos pide que definamos la forma y caractersticas de la tabla que estamos creando.

Dasuac/ 2014

Simplemente tenemos que introducir un valor en la celda filas y otro en la celda columnas para definir el tamao de la tabla, por ejemplo si introducimos 4 y 3 respectivamente, nuestra tabla tendr 12 celdas, distribuidas en un rectngulo de 4 celdas de alto y 3 celdas de ancho.

Si cambiamos el valor columna 3 por un 5, la tabla tendr ahora 20 celdas, distribuidas en un rectngulo de 4 celdas de alto por 5 de ancho. Desde aqu podemos cambiar tambin el ancho de la tabla, nuestra tabla tiene ahora 300 pxeles. Qu significa esto? Pues los pxeles son una unidad de medida de las pantallas de televisin y monitores, un pxel es el punto ms minsculo de luz que una pantalla puede manejar.

En la imagen superior vemos que Dreamweaver nos permite crear con un slo clic diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia ms esttica a nuestras tablas. En la parte final del cuadro de dilogo, podemos mejorar la accesibilidad de nuestra tabla, esto significa que podemos escribir un texto que se visualizar en el caso de que la tabla no haya podido ser mostrada en el navegador del usuario, ya sea por problema de la red o por carencias del navegador.

Dasuac/ 2014

Ya que este texto se mostrara como sustituto de la tabla, es importante que cuidemos el aspecto esttico de la pgina cuando esto ocurra. En alinear texto, podemos elegir la posicin en que se mostrara el texto.

CREAR TABLAS
En la imagen inferior vemos como Dreamweaver nos muestra todos estos elementos en la vista de diseo para que podamos trabajar con ellos. Esto es tal como lo vemos nosotros mientras trabajos con ello, cuando el usuario visualice la pgina slo ver la tabla y su contenido, no todas estas ayudas.

Una de las potencias de crear pginas web con Dreamweaver en la vista de diseo es que no hace falta saber nada acerca de programacin para manejar toda su potencia. Por ejemplo, si queremos redimensionar la tabla, tradicionalmente, tendramos que haber ido al cdigo de la pgina y haber tenido que teclear las nuevas dimensiones con cuidado de no descuadrar toda la pgina. Sin embargo con Dreamweaver, slo tenemos que pinchar con el ratn sobre un lateral de la tabla y arrastrarla hasta la nueva posicin.

Dasuac/ 2014

Todas las celdas y las medidas de la tabla quedan automticamente redimensionadas de forma uniforme para adecuarse correctamente al nuevo tamao de la tabla.

Una vez que tenemos las medidas que deseamos para nuestra tabla slo tenemos que introducir el texto dentro de cada celda.

Dasuac/ 2014

Para introducir el texto en cada celda slo tenemos que pulsar con el ratn en el interior de cada celda y escribir el texto. Para validarlo podemos, o pulsar en otra celda, o pulsar la tecla enter. As hemos creado nuestra primera tabla. En la prxima leccin aprenderemos ms cosas sobre ella, en especial las posibilidades de formato que Dreamweaver nos proporciona

FILAS Y COLUMNAS
En la leccin anterior, creamos nuestra primera tabla, ahora vamos a ver como Dreamweaver nos facilita el trabajar con ellas. Empezaremos pulsando con el botn derecho del ratn sobre cualquier celda activa de la tabla. Vemos como nos aparece el siguiente men, y pulsaremos la opcin Tabla.

Al lado del men, se despliega otro men. Con numerosas opciones, tales como seleccionar tabla, que nos sirve para aplicar un efecto a toda la tabla, o combinar celdas, para unir varias celdas en una.... Pero ahora vamos a detenernos un instante en el apartado insertar. Vemos varias opciones, como por ejemplo insertar fila, que nos aade una fila a la tabla, as podemos convertir fcilmente una tabla de 5 filas en una de seis, con slo un clic.

Dasuac/ 2014

En Dreamweaver se hace fcil, tanto insertar como eliminar, simplemente tenemos que pulsar sobre la fila o columna a eliminar con el botn derecho y buscar en el men la opcin eliminar. Una pista, est justo debajo de las opciones insertar.

PANEL DE PROPIEDADES DE LAS TABLAS

En esta leccin vamos a ver cmo podemos obtener un acabado ms profesional cuando trabajamos con tablas. Y esto lo haremos con la ayuda del panel propiedades. El primer paso es seleccionar la tabla tal como vemos en la imagen inferior, simplemente tendremos que situar el cursor en la esquina de la tabla hasta que aparezca un puntero como el de la imagen y pulsaremos para marcar la seleccin.

Seguidamente desplegaremos el panel propiedades, tal como ya sabemos, pero esta vez podemos llevarnos una sorpresa, el panel no es tal como lo recordbamos, ha cambiado. Ahora las opciones hacen referencia a las propiedades de la tabla. Esta es una de las ventajas de Dreamweaver, para ahorrarnos clics, el programa cambia sus paneles y mens de forma contextual segn la tarea que tengamos activa en cada momento.

Dasuac/ 2014

10

En la imagen superior vemos las caractersticas de una tabla por defecto, vemos que tiene 3 filas, 3 columnas, y que sus dimensiones son 533 pxeles de ancho por 118 pxeles de alto, que el borde de la tabla tiene grosor 1, y que el alineamiento es el activo por defecto. Sin embargo, abajo vemos las caractersticas de nuestra tabla. Vemos que algunos valores han cambiado, por ejemplo tenemos 4 filas y 5 columnas, y adems nuestra tabla ya tiene puesto el nombre que nos servir para identificarla. Vamos a ver el resto de las opciones, en la imagen inferior hemos cambiado las dimensiones de nuestra tabla, simplemente introduciendo nuevos valores en las casillas alto, 100, y ancho, 400 pxeles. Hemos cambiado la alineacin de la tabla a la derecha y hemos engordado un punto los bordes de la tabla.

PROPIEDADES DE LAS TABLAS

En la zona inferior del panel podemos cambiar fcilmente los colores tanto del fondo de la tabla como el color del borde de la tabla.

Por ejemplo, en la imagen inferior vemos el resultado de aplicarle a nuestra tabla los colores verde para el fondo y azul para el borde de la tabla. Como conclusin de este ejercicio podemos asegurar que la combinacin de estos dos colores perjudican seriamente la salud de la vista.

Dasuac/ 2014

11

Dreamweaver nos permite tambin definir el espacio entre las celdas y la separacin del texto con respecto las paredes de la celda que los contiene, esto los conseguimos dndoles valores a las casillas Rell celda y Esp. celda.

LAS PLANTILLAS Dreamweaver tiene una poderosa herramienta llamada plantillas que nos ayudara en esta tarea. Para utilizarla simplemente tenemos que ir a la barra de mens de Dreamweaver y pulsar sobre, el men Comandos, tal como se ve en la imagen inferior.

Dasuac/ 2014

12

En el men desplegable que se abrir pulsaremos sobre Formatear tablas.

Y Dreamweaver nos abrir una ventana de dilogo llamado Formatear Tabla. En esta ventana de dilogo tenemos una gran cantidad de opciones, que para no abrumarnos vamos a ir viendo poco a poco. En la parte superior, tenemos 3 zonas, la izquierda es un men deslizante en el que pulsando sobre cada una de las entradas, podemos ver en la parte central del cuadro de dilogo un ejemplo de la plantilla elegida. Para elegir una plantilla slo tenemos que pulsar sobre la opcin deseada, veremos un ejemplo del formato en la parte central.

Dasuac/ 2014

13

Y cuando estemos conformes con la eleccin pulsaremos en los botones aplicar y aceptar de la zona de la derecha de la ventana.

En la imagen inferior vemos como queda el formato de plantilla elegido sobre la tabla que habamos diseado en la leccin anterior. Observa que lo nico que ha cambiado es el formato de la tabla, ni el contenido, ni sus dimensiones. Nuestra tabla tiene ahora los colores y la esttica de la tabla de la plantilla, pero Dreamweaver respeta la forma en que nosotros hemos incrustado la tabla en nuestra pgina.

FORMATEAR TABLAS Aunque puede que no nos convenza las combinaciones de colores prediseadas y decidamos crear nuestra propia combinacin de colores simplemente pulsando en las casillas de colores de filas y eligiendo un color primario y un color secundario. Cada vez que elegimos un color tiene un nmero hexadecimal asociado, Este es un nmero universal de identificacin para cada color. Con este nmero podemos estar seguros de que hemos elegido el mismo color exactamente.

Dasuac/ 2014

14

Sin embargo, si no conocemos el nmero hexadecimal, siempre podemos pulsar en el botn color, para desplegar la tabla de colores y elegir en ella el que deseemos.

Hay un ltimo elemento que vamos a ver en esta leccin y es la distribucin de colores en las tablas. Dreamweaver nos permite con un slo clic distribuir los colores de la forma que deseemos. Por ejemplo pulsando en la pestaa Alternar podemos alternar los colores cada fila, cada dos, tres o cuatro filas.

FORMATO DE PLANTILLAS En esta leccin vamos a terminar de descubrir las opciones de formato de las plantillas de tablas. En la parte inferior de la ventana de dilogo, encontramos las opciones de formato de los encabezados de la plantilla. Vimos cmo crear encabezados para tablas en lecciones anteriores, pero puede ser que nosotros deseemos darle a nuestros encabezados un aspecto ms personalizado.

Dasuac/ 2014

15

Lo haremos desde este panel.

La primera opcin se refiere a la fila superior de la tabla, podemos definir el alineamiento del texto del encabezado, podemos elegir alinear a la izquierda, a la derecha o centrarlo. O simplemente dejarlo si definir. Con estilo de texto, podemos darle ms presencia a nuestros encabezados, resaltndolo con un estilo de letra negrita, o itlica o por qu no? Combinar a la vez resaltada e itlica.

Todo lo que hemos visto para los colores es tambin vlido para aplicarlo al color del texto de los encabezados, Simplemente tenemos que tener en cuenta que el color que elijamos debe tener el bastante contraste respecto al fondo para ser visible.

Dasuac/ 2014

16

Ya hemos visto las propiedades para el encabezado de la fila superior, ahora vamos a dar formato al encabezado de la columna de la izquierda.

Dreamweaver nos permite tener distintos formatos para el encabezado superior y para el encabezado lateral. Por ltimo podemos con un slo clic, desde aqu, cambiar el borde la tabla. Podemos ponerle borde, desde 1 hasta el valor que deseemos, teniendo presente que el grosor del borde crece a costa de disminuir el tamao de las celdas. Un punto importante a la hora de disear pginas web y que le da tanto valor a las tablas cuando se trata de crear estructuras de pginas, es el hecho de que podemos dar al borde un grosor de cero.

Dasuac/ 2014

17