Introducción
El programa Dreamweaver de Macromedia es uno de los programas más utilizados en todo el mundo para la creación de paginas WEB . Es empleado tanto por profesionales como por personas que se inician en la creación de su primera pagina web.
De hecho muchos lo consideran ampliamente superior a otros programas similares, tales como FrontPage de Microsoft .
Aquí no vamos a entrar en quien tiene o deja de tener razón. Lo que si
vamos a hacer es tener una primera aproximación a la última versión de Dreamweaver : la versión 7 de Macromedia Dreamweaver MX 2004.
Mostraremos de una forma fácil y didáctica como sacar provecho de él con unos pocos clicks y nos pondremos en la senda para poder penetrar mejor en sus secretos.
El objetivo de este curso es mostrar las principales funcionalidades de Dreamweaver , de manera que cuando acabemos el curso cualquiera sea capaz de comprender el programa y este capacitado para afrontar la creación de una página Web.
Muchos creen que como Dreamweaver es un programa usado por profesionales, tiene que ser muy complicado para los usuarios ocasionales. Realmente Dreamweaver es un programa muy sencillo e intuitivo ,
que puede ser utilizado a muchos niveles. Desde el más básico
suficiente para crear una pagina personal de un usuario novel, hasta
gestionar todo un “Site” empresarial con un contenido de cientos de paginas
En las próximas lecciones iremos presentando de forma fácil y didáctica, las distintas funcionalidades del programa.
El alumno podrá seguir las lecciones tanto con el texto como con las lecciones multimedias que se muestran al final de cada lección. El objeto de estas demostraciones multimedias es reforzar el contenido didáctico de cada lección mostrando como se hace realmente en el programa.
Iniciar Dreamweaver
El primer paso para utilizar un programa es iniciarlo.
El programa Dreamweaver de Macromedia , al igual que casi todos los programas que se pueden ejecutar en un entorno Windows
puede iniciarse por varios caminos distintos. Dependiendo tanto de la
configuración que hayamos elegido durante su instalación, como de
nuestras preferencias personales.
En esta lección
aprenderemos varias de ellas, luego dependerá de sus gustos personales
elegir una u otra de ellas para iniciar la aplicación Dreamweaver.
La forma más sencilla es pulsar con un doble click del ratón sobre el icono de Dreamweaver situado en el escritorio.
Otros lugares desde donde podemos iniciar el programa Dreamweaver es desde el botón de inicio, situado en el esquina inferior izquierda del escritorio.
Cuando pulsemos sobre el se desplegara el menú inicio. Y pulsaremos sobre el icono de Macromedia Dreamweaver MX 2004.
Por último hay un lugar más desde donde podemos iniciar el programa:
Sólo tenemos que pulsar en Todos los programas. Y después en la carpeta Macromedia
Y finalmente en la opción de Macromedia Dreamweaver.
Y ya tendremos lista la aplicación para poder utilizarla.
Entorno de Trabajo
El programa Dreamweaver
es una aplicación muy completa con un gran número de funcionalidades
muy potentes, pero a la vez esta diseñada para hacer más cómodo el
trabajo al usuario.
Naturalmente tener una aplicación con un gran número
de funciones implica un gran número de botones, menús, opciones y pulsar
cientos de clicks, que a primera vista puede resultar muy complicados
¿Entonces cómo puede Dreamweaver combinar a la vez potencia y comodidad?
Esto lo hace permitiendo que el usuario personalice a
su gusto el entorno de trabajo. En esta lección vamos a familiarizarnos
con las principales áreas de trabajo de Dreamweaver.
En la imagen inferior vemos señalada la barra de titulo ,
en ella además de ver el nombre de la aplicación, el título de la
página que tengamos activa, también veremos los iconos de gestión de
ventanas típicos de Windows.
Debajo de la barra de título tenemos la barra de Menús ,
en ella tenemos acceso a todos los menús, desde los cuales podemos
manejar con eficiencia las numerosas opciones de Dreamweaver.
Debajo de la barra de Menús,
nos encontramos la barra de los grupos de paneles, la cual es
contextual, esto significa que va cambiando dinámicamente según la tarea
en la que estemos trabajando.
En el centro de la pantalla nos encontramos con la
pantalla de inicio. Este contenido aparece cuando no tenemos ningún
documento activo y podemos distinguir tres zonas distintas.
En la zona de la izquierda: vemos la lista de los
documentos usados más recientemente y nos da la opción de abrir
cualquiera de ellos rápidamente pulsando sobre ellos.
En la zona central: podemos crear un nuevo documento en blanco en cualquiera de los formatos mostrados.
En la zona de la derecha: Dreamweaver nos permite utilizar unas plantillas de ejemplos para crear nuestros documentos de una manera rápida y sencilla.
En la izquierda y en la zona inferior de la ventana de dreamweaver tenemos otros paneles con funciones avanzadas.
Las cuales iremos descubriendo a lo largo del curso, según los necesitemos, para no hacer demasiado áridos los primeros temas.
SI QUIERES ENTENDER MEJOR CLIC AQUI
Resumen multimedia
Resumen multimedia
Resumen multimedia
VER RESUMEN
Formateando Textos
Ventana del Documento
En esta lección y la siguiente vamos a seguir descubriendo las distintas zonas de trabajo de la aplicación Dreamweaver de Macromedia.
En esta lección nos centramos en los iconos que están relacionados con la ventana del documento. En la ventana del documento es donde visualizaremos y editaremos la página web en la que trabajemos.
Aquí tenemos abierto un documento llamado “Untitled-1”
En la imagen superior vemos que la barra del titulo
del documento tiene los típicos controles de minimización, maximización
y cerrar ventana. Esto es útil en el caso de que tengamos abiertos
simultáneamente varios documentos.
En la parte inferior de la ventana de Dreamweaver tenemos la barra de estado
En la parte inferior derecha de la barra de estado podemos ver varios indicadores muy útiles. Con el de la derecha Dreamweaver
nos indica el tamaño del documento en KiloBytes y el tiempo que un
navegador estándar tardaría en visualizar completamente la página con
una conexión telefónica a Internet.
A su izquierda Dreamweaver nos indica las dimensiones en pixels de la página que estamos creando.
Podemos elegir entre una lista de tamaños predeterminados. El tamaño
óptimo depende de las dimensiones del monitor o pantalla en que se
visualice la página. Dado que por ahora la mayoría de los usuarios de
Internet tienen monitores de 800x600 píxeles .
Si diseñamos una página con un tamaño superior
provocamos que las personas que nos visiten visualicen incorrectamente
nuestras páginas. Debemos tener muy presente que el objetivo de nuestra
página es que sea vista por el mayor número posible de personas, por lo
que no debemos poner trabas innecesarias a nuestros visitantes.
Vistas de Edición
En la barra de documentos en la esquina superior derecha vemos tres botones que modifican la vista de trabajo del documento:
“Codigo”, “Dividir” y “Diseño”:
Son las tres formas que Dreamweaver nos permite visualizar el documento para su edición.
En la vista “ Código ” Dreamweaver
nos muestra el código HTML de la página y nos permite editar
directamente las instrucciones con las que el navegador del usuario
mostrará la página.
Mas adelante veremos que significa esto exactamente.
En la vista “ Diseño ” Dreamweaver
nos muestra la página tal como se visualizará en el navegador del
usuario, podemos editarla sin necesidad de conocer el lenguaje HTML.
Por último, la vista “ Dividir ”,
nos muestra simultáneamente el código y la vista de diseño, de esta
manera podemos escribir instrucciones en lenguaje HTML en la página e
instantáneamente comprobaremos como se visualizaría en un navegador.
De toda maneras si queremos ver en pantalla completa como se visualizaría la página podemos pulsar en el icono de previsualización.
Y Dreamweaver abrirá una ventana
del navegador que tengamos asociado por defecto y nos mostrara la pagina
completa. En la ventana de previsualización podemos detectar tanto los
errores de diseño como los de código, y directamente corregirlos en la
aplicación de Dreamweaver sin tener que grabar y abrir el documento con cada prueba
Abrir un Documento Nuevo
Ya hemos visto las principales zonas de trabajo de
Dreamweaver. Ahora, en las próximas lecciones vamos a aprender las
operaciones básicas de manejo de documentos tales como crear un nuevo
documento, grabarlo para poder recuperarlo en el futuro, abrir
documentos almacenados...
El primer paso es abrir un documento nuevo. En la
Lección 3 de este curso de dreamweaver aprendimos una forma de crear
documentos nuevos.
Ahora vamos a ver otra forma de crear nuevos documentos.
Para ello debemos ir a la barra de menús . Y pulsar en el menú Archivo
En el menú que se desplegará, buscaremos la opción Nuevo y pincharemos en ella con el botón izquierdo del ratón.
Se nos abrirá una ventana como la que vemos en la
imagen inferior. En ella podremos elegir entre diversos tipos de
documentos, el que deseemos crear.
Nosotros pulsaremos en la pestaña General y en el
panel de la izquierda llamado categoría elegiremos “Página básica”. El
panel adyacente cambiará de manera contextual dependiendo que opción
hayamos elegido en el panel de categorías. Como por ahora hemos elegido
página básica. Este será el título del panel y entre las distintas
opciones pulsaremos sobre HTML.
Vemos que hay una gran variedad de documentos que
podemos crear desde aquí. Más adelante veremos algunos de ellos, a
medida que los necesitemos.
Guardar un Documento
Una vez que hemos aprendido a crear documentos
nuevos, cuando hayamos terminado de trabajar con ellos, necesitaremos
aprender a guardarlos para poder recuperarlos en el futuro.
Para ello desplegaremos de nuevo el menú archivo y buscaremos esta vez la opción guardar.
Al pulsar sobre la opción guardar se nos abrirá una ventana titulada “Guardar como”. En ella vemos varias zonas importantes.
En la zona superior podemos elegir la carpeta donde queramos guardarlo, es donde pone “Guardar en”.
Y en la zona inferior introduciremos el nombre con el que deseamos conservar el documento.
Para finalizar sólo tenemos que pulsar el botón guardar en la ventana activa.
En esta lección hemos aprendido otra manera de crear documentos nuevos con dreamweaver y también hemos aprendido a guardarlos.
Recuperar un Documento
En la lección anterior aprendimos a guardar
documentos creados con dreamweaver. En esta lección aprenderemos a
recuperarlos para poder trabajar con ellos.
El primer paso es ir al menú archivo, pulsaremos sobre el con el botón izquierdo del ratón. Y en el menú que se desplegará buscaremos la opción abrir.
Una vez que hayamos pulsado sobre la opción abrir del
menú archivo. Aparecerá una ventana de dialogo como la que vemos en la
ventana inferior. Es un cuadro de dialogo muy semejante al que ya
conocimos cuando guardamos el documento
En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar donde tenemos almacenado el documento.
Cuando hayamos encontrado la carpeta solo tendremos
que elegir de entre la lista mostrada el título del documento que
deseemos abrir y pulsaremos sobre el con el botón izquierdo del ratón.
Cerrar un Documento
Una vez que hemos aprendido a crear un documento, a
guardarlo y a recuperarlo. Vamos a aprender ahora a cerrar el documento.
Esto lo haremos cuando hayamos acabado de trabajar con el documento en
cuestión, bien porque ya no lo necesitemos mas, o por que tengamos
muchos documentos abiertos y necesitemos despejar un poco el área de
trabajo.
Para ello iremos otra vez al menú archivo, tal como ya sabemos. Y allí pulsaremos en la opción cerrar. Tal como vemos en la imagen inferior.
Y ahora, en el caso de que hayamos modificado el
documento, vemos que nos aparece un cuadro de diálogo como el que vemos
en la siguiente imagen.
En este cuadro nos pregunta, en el caso de que
hayamos modificado algo desde la ultima vez que grabamos el documento,
si queremos guardar los cambios en el documento en el que hemos estado
trabajando.
Si pulsamos no, todos los cambios realizados desde la
ultima grabación serán descartados. Esto es util en el caso de que no
nos guste nuestra pagina y prefiramos una versión anterior de ella, esto
es algo que suele pasar mas a menudo de lo que nos gusta reconocer.
O bien, si pulsamos sí. Se guardaran los cambios realizados sobre el documento.
Pero, atención, es posible que hayamos cometido un error y hayamos pulsado el botón si, de manera mecánica.
Dreamweaver nos da una ultima oportunidad para meditarlo y nos muestra otra ventana de dialogo como la inferior.
Por ultimo, una vez que hayamos guardado, o no, los cambios sobre la pagina solo nos queda salir del programa. Y para ello volveremos al menú archivo.
Buscaremos en el final del menú y pulsaremos sobre la opción “Salir”
Una vez que pulsemos aquí, el programa de dreamweaver se cerrará y nos mostrara el escritorio.
Para recordar como abrir de nuevo el programa ver la lección 2.
El Sitio
Introducción a la configuración de “El Sitio”:
Ya hemos tenido nuestro primer contacto con el entorno Dreamweaver .
Hemos aprendido cuales son las diferentes partes de
la ventana de trabajo de Dreamweaver y a movernos entre ellas. También
hemos aprendido las funciones más básicas, tales como crear una página
nueva, guardarla, cerrarla y como recuperarla.
Pero no debemos olvidar una cosa, hasta ahora sólo
hemos creado una página web en blanco. Pero las “páginas de verdad”
tienen contenido y este contenido puede formarse con diversos documentos
que puede ser desde otras páginas html, imágenes, scripts, animaciones,
hasta cualquier tipo de objeto que podamos vincular en una página html.
El conjunto de todos estos
documentos que forman parte de la página se llama en el lenguaje de las
páginas web un “Sitio”, “site” en ingles.
En esta lección, y las siguientes, vamos a aprender a
diseñar un Sitio para albergar nuestras páginas y sus elementos, de una
forma sencilla y didáctica.
Ahora que sabemos lo que es un Sitio vamos a configurarlo paso a paso.
Todas las opciones de configuración están en el menú Sitio de la barra de menús.
Pulsando sobre el menú Sitio, se despliega el menú. Para configurarlo por primera vez pulsaremos en la opción Administrar sitios.
Dreamweaver abrirá una ventana de dialogo con todas
las opciones para administrar el sitio. Como aún no tenemos creado
ninguno, pulsaremos en el botón Nuevo.
Y Dreamweaver nos preguntará qué es lo que queremos
crear exactamente ¿un Sitio o un Servidor FTP y RDS?. Por ahora sólo
vamos a crear un Sitio.
En la próxima lección continuaremos con la creación del sitio.
Configurar un Sitio Nuevo
En la lección anterior comenzamos a configurar un Sitio nuevo, ahora vamos a continuar
Acabamos la lección anterior confirmando en la
ventana de diálogo que queríamos crear un nuevo Sitio. Pulsaremos sobre
la opción sitio.
Veremos que se abre otra ventana de dialogo, ahora
iremos contestando a las preguntas que nos va haciendo Dreamweaver y
pulsaremos el botón siguiente después de rellenar cada ventana con las
respuestas que nos pide.
La primera cuestión que Dreamweaver nos plantea es
el nombre del sitio. Es muy util que el nombre tenga una fuerte relación
con el contenido de la página para poder recordarlo fácilmente.
La respuesta a la siguiente pregunta dependerá de la
tecnología con la que deseemos trabajar. Ya dijimos antes que una
página web puede enlazar documentos de muy diferentes tipos, algunos de
ellos son utilizados para intercambiar información con el servidor. En
esta opción elegimos el tipo documento dependiendo de las
características del servidor con el que trabajaremos.
Para este curso no vamos a utilizar las tecnologías de servidor, así que elegiremos la opción “No” .
La cuestión de abajo se interesa en la forma en como
subiremos las páginas que creemos al sitio de Internet. Por ahora no
vamos a preocuparnos de esto y por lo tanto elegiremos la opción Ninguno.
Y con esto hemos acabado de proporcionarle a Dreamweaver la información necesaria para configurar nuestro sitio.
Editar un Sitio
En las lecciones anteriores ayudamos a Dreamweaver a
configurar nuestro sitio. En esta lección vamos a personalizar un poco
más nuestro sitio para adecuarlo a nuestras necesidades de trabajo.
Para ello volvemos a la ventana de dialogo “Administrar sitios”.
Y esa vez, como ya tenemos creado el sitio “CursoDreamweaver ” pulsaremos el botón Editar.
Y en la ventana de dialogo. Pulsaremos en la pestaña “Avanzadas”. Y en el menú “categoría” pulsaremos la opción “Datos locales”.
En la sección “Datos locales” podemos cambiar y
ajustar los valores del sitio, tales como “Nombre del sitio”, que ya
conocemos. Y la “Carpeta raíz local”, esto significa que podemos
designar manualmente la carpeta donde deseemos situar las páginas que
creemos y los documentos vinculados a ella.
Con la opción “Actualizar lisa archivos” nos
aseguramos que cuando modifiquemos un archivo se actualice
automáticamente las carpetas locales durante las copias.
Por último con la opción “carpeta predeterminada de
imágenes” le diremos a Dreamweaver donde situaremos agrupadas todas las
imágenes con las que trabajemos, esto es muy útil para no tener
múltiples rutas lo que nos evitan posteriormente muchos errores de
vinculación.
Por último, en las opciones de la imagen inferior,
configuramos la dirección http de nuestro sitio, con lo que Dreamweaver
detecta y distingue automáticamente las direcciones www de páginas
internas a nuestro sitio, con lo que se ahorran tiempo al navegar.
Con la opción caché, Dreamweaver , actualiza y
gestiona todos los cambios de las páginas y sus enlaces interiores
automáticamente, por ejemplo si cambiamos una imagen no tenemos que ir
modificando una a una todas las páginas.
Opciones Administrar Sitios
Ya hemos aprendido a configurar el sitio, ahora veremos rápidamente el resto de las opciones de la ventana de dialogo “Administrar sitios”. Que nos ayudarán a gestionar más fácilmente nuestro sitio.
Las opciones nuevo y editar, ya las conocemos, por lo que no nos reiteramos más en el tema.
Las siguientes opciones son Duplicar, Quitar y Exportar.
Con duplicar
conseguimos crear un duplicado del sitio que tenemos activo, con ello
logramos duplicar totalmente la estructura del sitio. Es muy útil para
crear duplicados perfectos del sitio en otros servidores, sobre todo si
tenemos utilizarlo como plantilla de la estructura.
Cuando tengamos un numero importante de sitios,
algunos de ellos estarán obsoletos o simplemente no los necesitaremos
más, podemos eliminarlos pulsando el botón Quitar.
La opción Exportar nos
permite guardar las características del sitio en un archivo XML, de
forma que con un sólo archivo podemos guardar, recuperar, e incluso
compartir con otras personas las características del sitio fácilmente
Las últimas opciones son Importar, Ayuda y Listo.
Importar es la opción complementaria de Exportar,
con ella podemos crear un nuevo sitio a partir de las características de
otros sitio exportado.
La opción ayuda, se explica en si misma.
Cuando hayamos terminado de administrar el sito,
simplemente pulsaremos el botón "Listo" y todos nuestros cambios serán
actualizados.
El Texto
En esta lección y las próximas crearemos, de verdad,
nuestra primera página web. Al principio será sólo una página con texto
e iremos descubriendo las distintas funcionalidades de Dreamweaver ,
respecto al formato de los textos.
Para comenzar, necesitamos crear una página nueva y
darle un buen titulo. Como ya hemos visto esto en lecciones anteriores
iremos directo al grano. Pero en la animación de abajo podemos ver todos
los pasos desde cero.
Una vez que hayamos creado la página y le hayamos
dado el titulo, escribiremos en la vista de diseño el texto normalmente,
ya nos preocuparemos después por los formatos.
Una vez que hemos escrito el texto de nuestra primera página , pulsaremos en el grupo de paneles insertar.
Y de entre las opciones podemos elegir el tipo de panel insertar que vamos a tener activo. Este dependerá de la acción que vayamos a realizar.
En común tenemos las opciones más habituales, sin embargo las demás están especializadas en algún tipo determinado de acción.
Por ejemplo nosotros vamos a trabajar con el texto, por lo que pulsaremos en la opción texto.
En el caso de que queramos tener acceso a todos los paneles de forma rápida pulsaremos la opción “Mostrar como fichas”
En la lección anterior aprendimos que
escribir en nuestra página web era tan fácil como simplemente teclear en
la vista de diseño.
En esta lección y las siguientes veremos que en
Dreamweaver además de añadir texto fácilmente, podemos darle formato y
aplicarle un gran número de efectos que ayudarán a realzar nuestra
página web.
Acabamos la lección anterior activando la opción
Texto en la barra de los grupos de paneles insertar. En la imagen
inferior vemos como aparece la ventana de trabajo.
Darle formato a un texto es tan sencillo como
seleccionar la zona que deseamos y buscar en los iconos de la pestaña
texto, el efecto que deseemos aplicarle.
En este caso, al primer párrafo de nuestro documento vamos a darle una apariencia de Encabezado1, para ello pulsamos h1.
Al segundo párrafo le daremos un formato de Encabezado2, pulsando h2
Y al tercer párrafo le daremos formato de Encabezado 3.
En la barra texto, vemos otros iconos con distintos
formatos. Por ejemplo, pulsando el icono B, resaltamos el texto
seleccionado, con I, le damos al texto seleccionado énfasis un formato
inclinado como el de la letra itálica de los procesadores de textos.
Sin embargo, En el lenguaje HTML, existen sus propias
formas de resaltar y dar énfasis, de hecho se hace pulsando en los
iconos “S”, que viene de la palabra “Strong” en ingles 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 pequeña
variación al aspecto de uno u otro.
El Panel de Propiedades
Ya hemos tenido un primer acercamiento a la barra texto del grupo de paneles insertar.
Ahora vamos a ver como puede el panel “propiedades” ayudarnos a mejorar el aspecto de nuestro textos
En la imagen inferior tenemos una vista general del panel.
Desde el panel propiedades podemos, tras seleccionar una línea o párrafo, aplicarle por ejemplo un formato “centrado”, simplemente pulsando en el icono de la imagen.
Podemos combinar en una misma página varios tipos de
alineamiento, por ejemplo podemos darle al segundo párrafo un
alineamiento ajustado y mantener al mismo tiempo el centrado del primer
párrafo.
Vamos a probar, ahora, el alineamiento derecho en el tercer párrafo.
Por último, podemos aplicarle a todo un párrafo una sangría. Tal como vemos en la imagen inferio.
r
Formatos en el Panel de Propiedades
En la zona izquierda del panel de propiedades, tenemos unas opciones que aún no conocemos y que vamos a ver en esta lección.
Estas son las propiedades, “Formato”, “Fuente”, “Estilo”, “Tamaño”, “Color”
Vamos a verla poco a poco. La primera opción “Formato” nos permite cambiar el formato del párrafo, por defecto los párrafos no tienen formato, pero podemos elegir uno de la lista.
Según el que elijamos nuestro párrafo tendrá una
apariencia u otra. En la lección anterior vimos los formatos de
encabezado 1 a 3, aquí tenemos más opciones para aplicar.
En la opción fuente podemos predeterminar que juego
de fuente será visible por el usuario, esta opción es muy útil, en el
caso de que el usuario no tenga instalada la fuente elegida por nosotros
para nuestra página , podemos establecer con esta instrucción un juego
de fuentes suplentes.
La opción estilo hace referencia a una funcionalidad
avanzadas de un formato de páginas llamado CSS, por ahora no lo vamos a
ver. Basta saber que existe y que controla la forma en que escribimos
las instrucciones para el navegador.
En la opción tamaño, elegimos el tamaño de la
fuente, si estamos acostumbrados a usar procesadores de textos. podemos
sorprendernos que a parte del tamaño por punto, al que podemos estar
acostumbrados, vemos también tamaño “pequeño” o “mayor”, por ejemplo.
Esto se explica porque los navegadores permiten al
usuario elegir el tamaño de visualización de la letra, y si el usuario
cambia el tamaño, puede perderse el efecto deseado. Con los tamaños
“relativos”, podemos conservar el efecto visual del texto aunque el
usuario cambie estos valores en su navegador.
Por último podemos utilizar colores
para dar más vistosidad a nuestros textos, sólo tenemos que marcar el
texto que queramos colorear y elegir un color de la tabla.
Más adelante veremos como podemos sacarle más partido al color en nuestras páginas web.
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
En esta lección y la próxima 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” .
En próximas lecciones continuaremos explorando los efectos que podemos aplicar a las listas.
Las Listas Ordenadas
Vamos a dejar por un momento los formatos de las listas y en esta lección aprenderemos otro tipo de listas.
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.
En esta lección hemos visto que son y como crear
listas ordenadas. En la lección próxima continuaremos aplicando formatos
a las listas.
PAGINA SIGUIENTE
Comentarios
Publicar un comentario