Crear una Pagina web con dreamweaver

Como Crear una Pagina web con dreamweaver


El primer paso para utilizar un programa es iniciarlo.

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
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.

El programa Dreamweaver es una aplicación muy completa con un gran numero de funcionalidades muy potentes, pero a la vez esta diseñada para hacer mas comodo el trabajo al usuario.

Naturalmente tener una aplicación con un gran numero de funciones implica un gran numero 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.

Debajo de la barra de titulo 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. Mas en adelante la veremos funcionando en detalle.

En el centro de la pantalla nos encontramos con la pantalla de inicio. Este contenido aparece cuando no tenemos ningun documento activo y podemos distinguir tres zonas distintas

En la zona de la izquierda: vemos la lista de los documentos usados mas 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.


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 optimo 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 numero posible de personas, por lo que no debemos poner trabas innecesarias a nuestros visitantes.

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

...
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 dreamwaever 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 desplegara, 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 de adyacente cambiara 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 titulo 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.

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.

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 titulo del documento que deseemos abrir y pulsaremos sobre el con el botón izquierdo del ratón.
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 dialogo 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 cerrara y nos mostrara el escritorio
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 aun no tenemos creado ninguno, pulsaremos en el botón Nuevo.Y Dreamweaver nos preguntará que 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 lección anterior comenzamos a configurar un Sitio nuevo, ahora vamos a continuar

Acabamos la lección anterior confirmando en la ventana de dialogo 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, asi 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.
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.

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 ayudaran 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.

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 numero de efectos que ayudaran a realzar nuestra página web.

Acabamos la lección anterior activando la opcion 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 italica 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.


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 inferior ...

En la zona izquierda del panel de propiedades, tenemos unas opciones que aun 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

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”

Dream00051

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 .

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.

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 vamos a continuar descubriendo los formatos que podemos aplicar a las listas.

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 grafica los colores no se muestren exactamente como nosotros deseamos.




Ya hemos visto como crear listas ordenadas y listas desordenadas.

En esta lección vamos a profundizar en el motivo de su existencia, los elementos de las listas.

Para ello pulsaremos en el botón “elemento de la lista”, que está en el panel de propiedades.





Dreamweaver, nos mostrará una ventana de diálogo llamada “propiedades de lista”.

En la primera opción, tenemos “Tipos de lista”, con esta opción podemos elegir como mostraremos la lista. Podemos, entre otros modelos, crear listas numéricas, o listas en las que cada elemento sea mostrado precedido por un punto...





También podemos, pulsando en la opción estilo, elegir el estilo numérico para nuestra lista. Por ejemplo, podemos querer mostrar una lista numérica normal, o quizás queramos que nuestros elementos sean mostrados con una lista de número romanos, o puede que queramos una lista alfabética...





Dreamweaver nos permite también elegir el número con que comenzará nuestra lista. Podemos no querer comenzar por el uno, o quizás deseemos continuar la numeración de una lista anterior





Por último podemos cambiar el estilo de algún elemento concreto de la lista, simplemente pulsando en la opción “elemento de la lista”, y configurarlo según nuestras necesidades



Ya hemos visto las listar ordenadas y las listas desordenadas. Aun nos queda un último tipo de listas, las listas de definición.

¿Qué son las listas de definición?. Fácil. 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 definición, debajo de cada elemento (Dreamweaver y Explorer) tenemos otro elemento en una línea con sangría que define el elemento anterior.

Estoes una lista de definición.





Activar una lista de definición es muy sencillo, simplemente tenemos que situar el cursor en el punto donde queramos insertarla y pulsar en el botón “dl” de la barra texto, del panel insertar.

Para crear un elemento nuevo, podemos hacerlo como ya hemos visto en las listas anteriores, o bien pulsando en el icono “dd”





Vamos a explicar un poco más detalladamente cual es la función de cada icono.

“Dl” significa declaración de la lista, es el icono que pulsamos para crear una lista de definición nueva.

El icono “dt”, significa “término de definición”, es la palabra que pretendemos definir. En el ejemplo, es “Dreamweaver” y “Explorer”.





El botón “dd” es la definición del término, es la definición de cada uno de los términos.


Con esta lección hemos acabado de tratar el tema de las listas en Dreamweaver, no lo he dicho explícitamente, pero todo lo mostrado en lecciones anteriores respecto a los formatos de listas es también aplicable a las listas de definición.

En esta lección y las siguientes vamos a ver el uso que Dreamweaver le da a las tablas.

Este no es un tema sin insignificante. Las tablas tienen muchísima importancia en lo que se refiere al diseño de páginas web. Es el esqueleto sobre el que las páginas se construyen. Pero eso lo veremos en el transcurso de las próximas lecciones.

En esta lección 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 fácilmente, pulsando en el icono Tabla, de la barra común, del panel insertar, tal como vemos en la imagen inferior.



Dream00055

Cuando pulsamos sobre el icono, Dreamweaver abre una ventana de diálogo como la que vemos abajo.

En ella nos pide que definamos la forma y características de la tabla que estamos creando





Simplemente tenemos que introducir un valor en la celda filas y otro en la celda columnas para definir el tamaño de la tabla, por ejemplo si introducimos 4 y 3 respectivamente, nuestra tabla tendrá 12 celdas, distribuidas en un rectángulo 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 rectángulo de 4 celdas de alto por 5 de ancho.

Desde aquí podemos cambiar también el ancho de la tabla, nuestra tabla tiene ahora 300 píxeles. ¿Qué significa esto? Pues los píxeles son una unidad de medida de las pantallas de televisión y monitores, un píxel es el punto más minúsculo que luz que una pantalla puede manejar.

Esto está en relación directa con la configuración de pantalla de nuestro monitor, por ejemplo si tenemos una resolución 800x600, este es el limite máximo de tamaño que puede mostrar.

En las primeras lecciones vimos que Dreamweaver nos aconsejaba que configuráramos los parámetros de nuestra página según las necesidades de nuestros potenciales usuarios. Estos parámetros van a marcar el limite de la cantidad máximas de píxeles que nuestra página podrá mostrar de una forma cómoda.





En la imagen superior vemos que Dreamweaver nos permite crear con un sólo clic diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia más estética a nuestras tablas.

En la parte final del cuadro de diálogo, podemos mejorar la accesibilidad de nuestra tabla, esto significa que podemos escribir un texto que se visualizara 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 navegado.

En esta lección continuaremos aprendiendo a crear nuestra tabla.

En la lección anterior habíamos creado una tabla de 5 columnas, por 4 filas y de un tamaño de 300 píxeles, y con un texto descriptivo llamado “Ejemplo tabla”.

En la imagen inferior vemos como Dreamweaver nos muestra todos estos elementos en la vista de diseño para que podamos trabajar con ellos. Esto es tal como lo vemos nosotros mientras trabajos con ello, cuando el usuario visualice la página sólo verá la tabla y su contenido, no todas estas ayudas.



Dream00060

Una de las potencias de crear páginas web con Dreamweaver en la vista de diseño es que no hace falta saber nada acerca de programación para manejar toda su potencia.

Por ejemplo, si queremos redimensionar la tabla, tradicionalmente, tendríamos que haber ido al código de la página y haber tenido que teclear las nuevas dimensiones con cuidado de no descuadrar toda la página.

Sin embargo con Dreamweaver, sólo tenemos que pinchar con el ratón sobre un lateral de la tabla y arrastrarla hasta la nueva posición.



Dream00061

Todas las celdas y las medidas de la tabla quedan automáticamente redimensionadas de forma uniforme para adecuarse correctamente al nuevo tamaño de la tabla



Dream00062

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

En nuestro ejemplo vamos a crear una especie de planning.



Dream00063

Para introducir el texto en cada celda sólo tenemos que pulsar con el ratón en el interior de cada celda y escribir el texto. Para validarlo podemos, o pulsar en otra celda, o pulsar la tecla enter.



Dream00064

Así hemos creado nuestra primera tabla. En la próxima lección aprenderemos más cosas sobre ella, en especial las posibilidades de formato que Dreamweaver nos proporciona
En la lección anterior, creamos nuestra primera tabla, ahora vamos a ver como Dreamweaver nos facilita el trabajar con ellas.

Empezaremos pulsando con el botón derecho del ratón sobre cualquier celda activa de la tabla.

Vemos como nos aparece el siguiente menú, y pulsaremos la opción 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 añade una fila a la tabla, así podemos convertir fácilmente una tabla de 5 días en una de seis, con sólo un clic





En la imagen inferior vemos como a nuestra tabla le ha “crecido” una fila justo entre Lunes y Miércoles. Podemos añadir tantas filas y/o columnas como deseemos.





Pero. ¿Que pasa si por error hemos añadido demasiadas?. No es problema, Dreamweaver hace fácil, tanto insertar como eliminar, simplemente tenemos que pulsar sobre la fila o columna a eliminar con el botón derecho y buscar en el menú la opción eliminar.. Una pista, está justo debajo de las opciones insertar.





Y aquí tenemos nuestra tabla, después de haber añadido y eliminado filas despreocupadamente.

En esta lección vamos a ver como podemos obtener un acabado más 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 selección.





Seguidamente desplegaremos el panel propiedades, tal como ya sabemos, pero esta vez podemos llevarnos una sorpresa, el panel no es tal como lo recordábamos, 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 menús de forma contextual según la tarea que tengamos activa en cada momento





En la imagen superior vemos las características de una tabla por defecto, vemos que tiene 3 filas, 3 columnas, y que sus dimensiones son 533 píxeles de ancho por 118 píxeles 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 características de nuestra tabla. Vemos que algunos valores han cambiado, por ejemplo tenemos 4 filas y 5 columnas, y además 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 píxeles. Hemos cambiado la alineación de la tabla a la derecha y hemos engordado un punto los bordes de la tabla.

En esta lección continuaremos descubriendo el panel propiedades para las tablas.

En la zona inferior del panel podemos cambiar fácilmente 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 conclusión de este ejercicio podemos asegurar que la combinación de estos dos colores perjudican seriamente la salud de la vista.


Dreamweaver nos permite también definir el espacio entre las celdas y la separación del texto con respecto las paredes de la celda que los contiene, esto los conseguimos dándoles valores a las casillas “CellPad” y “CellSpace”


Esta es la 1º parte...sigan con la 2ª en mi otro post...http://www.taringa.net/posts/info/5366696/2º-parte-de-como-crear-una-pagina-web-con-dreamweaver_.html

Fuentes de Información - Crear una Pagina web con dreamweaver

Dar puntos
7 Puntos
Votos: 3 - T!score: 2.5/10
  • 1 Seguidores
  • 22.852 Visitas
  • 14 Favoritos

Comentarios Destacados

@HELLFISHO Hace más de 4 años +9
Eh? O.o

Te faltaron imágenes... algo más... ilustrativo.

Pero buena explicación.

7 comentarios - Crear una Pagina web con dreamweaver

@HELLFISHO Hace más de 4 años +9
Eh? O.o

Te faltaron imágenes... algo más... ilustrativo.

Pero buena explicación.
@kevin01234 Hace más de 4 años +1
HELLFISHO dijo:Eh? O.o

Te faltaron imágenes... algo más... ilustrativo.

Pero buena explicación.

es verdad men
@lalatop Hace más de 3 años +3
pone imagenes hdp xD
@pablo64 Hace más de 1 año +1
El primer paso para utilizar un programa es iniciarlo.

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 Crear una Pagina web con dreamweaver