You are on page 1of 10

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Inspectores y Paneles
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o
inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian
dependiendo del objeto seleccionado, mientras que el panel nos da acceso a opciones generales.
A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms
importantes.

El inspector de Propiedades

El inspector de Propiedades muestra las opciones propias del objeto o texto seleccionado, permitindonos editarlas, por lo que se convierte en uno de
los elementos ms utilizados en Dreamweaver. Por ejemplo, cuando el elemento seleccionado sea una imagen, mostrar su ubicacin, dimensiones, peso,
clase, etc...
Este panel puede mostrar dos tipos de propiedades, HTML y CSS, que podemos aplicar a los diferentes elementos de la pgina Web que estemos
diseando.

El panel Insertar.

En el panel Insertar, encontramos todos los elementos que podemos encontrar en el men Insertar, clasificados en categoras. Podemos emplearlo
para insertar imgenes, enlaces, multimedia, tablas, formularios... cualquier elemento que nuestra web necesite.
Como vemos en las imgenes, es posible configurar este panel para verlo como men, como panel flotante o como una barra de herramientas
integrada en la ventana de trabajo.

Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 11

Programa Adobe Dreamweaver CS6


Diseo Web

Centro de Educacin Continua

Sesin de Aprendizaje

La vista Diseo
La vista Diseo permite trabajar con el editor visual.

Nos ofrece un aspecto muy similar al resultado final, pero totalmente editable.

La vista Cdigo
La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una
referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

El cdigo que vemos es el que genera Dreamweaver al editar el contenido en la vista Diseo.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 12

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

La vista Dividir
La vista Dividir permite dividir la ventana en dos zonas: Cdigo y Diseo. La zona superior muestra el cdigo fuente, y la
inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La vista en Vivo
La vista en Vivo es otra de las novedades que trae Dreamweaver desde la versin CS4. Nos ofrece una vista del resultado final no editable. A
diferencia de la vista Diseo, que nos permite editar los elementos, esta vista nos permite interactuar con ellos, tal como lo haramos con el navegador.
La funcin de esta vista es la de ahorrarnos tiempo, al no tener que comprobar que pequeos cambios se previsualizan correctamente en el
navegador.
No obstante, siempre hay que comprobar la pgina con los principales navegadores del mercado, que sern los que emplearn nuestros visitantes.
De hecho, a lo largo del curso vers cmo algunos elementos se ven de forma muy distinta si los vemos en la vista de diseo, en la vista en vivo o en el navegador.

La vista Cdigo en vivo


Esta vista se emplea conjuntamente con la Vista en vivo. Divide la pantalla como la vista Dividir, pero sin que podamos editar el cdigo. Lo que hace es
que al seleccionar partes de la web en la Vista en vivo, se seleccione su correspondiente cdigo fuente.

La Ayuda
A travs del men Ayuda puedes ir a varias opciones, veamos algunas de ellas:

Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por
temas, por ndice o por contenido, si seleccionas la opcin Ayuda de Dreamweaver o
simplemente pulsando F1.
Acceder a una Introduccin a InContext Editing de la pgina de Adobe, que muestra un
resumen de esta herramienta.
Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML.
Acceder a Dreamweaver Support Center en la web.
Acceder al Foros en lnea de Adobe.

Adems, en la barra de aplicacin encontramos una caja de bsqueda. Al introducir los trminos de
la bsqueda y buscar, iremos a la ayuda online de Adobe.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 13

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Configurar un sitio local


En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los
documentos, como puede ser el color de fondo.

Introduccin
Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar
el sitio web antes de crear las pginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local. Los documentos HTML normalmente se crean dentro de dicha
carpeta, mientras que para contener las imgenes, las animaciones, archivos de tipos especfico, etc., se deben crear nuevas carpetas dentro de sta, con el
objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local.
Despus se podrn copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente
podr verlo en Internet.
Por tanto, el sitio local y el sitio remoto tienen la misma estructura. El sitio local es la copia del sitio con la que trabajaremos, y los cambios los
actualizaremos en el sitio remoto.
La organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para
cargar el sitio local en el servidor, etc.
La pgina inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genrica, el servidor
devuelve la pgina con ese nombre.
Por ejemplo, si escribiramos la direccin genrica http://www.Jaanle.com en el navegador, ste intentara cargar la pgina
http://www.Jaanle.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm, y no se podra
navegar por el sitio a no ser que se escribiese exactamente http://www.Jaanle.com/nombrepagina.htm

Crear o editar un sitio web sin conexin a Internet


Me

Una vez creadas las carpetas que formarn la estructura del sitio local, o por lo menos la carpeta raz, ya es posible definir el nuevo sitio.
Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios... o directamente a Nuevo sitio.
Recuerda que a travs del panel Archivos, se puede cambiar a cada uno
de los sitios definidos.
Tambin podemos acceder desde el icono de acceso rpido de la barra
de la aplicacin a la opcin Administrar sitios o Nuevo sitio...

En el caso de haber seleccionado la opcin Administrar sitios, aparece


una ventana que contiene la lista de sitios locales definidos con anterioridad.

Por supuesto, pueden existir varios sitios locales en un mismo ordenador.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 14

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Tanto si se elige la opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir o
modificar las caractersticas del sitio.
Definic

Las opciones del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda.
Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella.
Las dos nicas opciones imprescindibles son las que encontramos en la categora Sitio, y de momento son las nicas que cambiaremos:
Vamos a ver los datos que hay que editar para la categora Datos locales, que ser lo nico que empleemos de momento:
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la lista de sitios.
La Carpeta del sitio local, que es en la que se encuentra el sitio dentro del disco duro local. La carpeta puede contener ya archivos o no.
Estas dos caractersticas son las imprescindibles para definir un sitio local. El resto son opcionales, y de momento no nos interesan.
Las dems opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor
en el que estar el sitio remoto. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.

Abrir un sitio
Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la
opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar
sobre el botn Listo.
Tambin podemos utilizar el panel Archivos, buscar y
seleccionar el sitio a abrir en el men desplegable Archivos.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 15

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Ver el sitio
El panel Archivos (men Ventana /Archivos o tecla F8) es uno de los paneles ms importantes de Dreamweaver, ya que nos da
acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestro sitio contactos.html, index.html,servicios.html y la carpetas imagenes.
Es posible visualizar un sitio en el panel Archivos o en una ventana. Para cambiar de una vista a otra hay que pulsar sobre el botn
en la parte superior del panel y de la ventana.

que aparece

Esto nos sirve para ver a la vez el sitio local (el de nuestro equipo) y el sitio remoto (el del servidor), y poder, por ejemplo, sincronizar los archivos, o
compararlos. Tambin el servidor de pruebas o las bases de datos.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la derecha) con nuestros archivos.

Dreamweaver guarda la cach de nuestro sitio, cmo se organizan los archivos y se relacionan entre ellos. Por eso, si cambiamos el nombre de un
archivo o su carpeta desde Dreamweaver, automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen,
etc).
En cambio, si realizamos estos cambios desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no
funcionarn enlaces, etc, ya que Dreamweaver simplemente no encontrar la pgina.
Al modificar algn objeto que es referenciado por algn otro documento, se muestra una ventana similar a sta, que indica los documentos que hacen
referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.

Simplemente hay que pulsar sobre el botn Actualizar, aunque esto depender de si tenemos configurada la opcin Mensaje al actualizar vnculos si
movemos archivos. Lo cual podemos establecer desde el men Edicin, opcin Preferencias, categora General.
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 16

Programa Adobe Dreamweaver CS6


Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

Subir los Archivos a un Servidor


Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio
que hayas contratado o conseguido gratuitamente.Algunos sitios gratuitos slo permiten que subas archivos va web, por lo
que debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y
debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Si no los enlaces no
funcionarn correctamente, y es posible que algunas imgenes no se muestren.
Para subir los archivos va web debers seguir las instrucciones que te proporcionar tu servidor.
La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior.
Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es mucho ms til para
subir los archivos.
Uno de los programas gratuitos ms utilizados es FileZilla, desde su pgina web podrs descargarte el programa y su
traduccin tu idioma.
Una vez instalado, abre el programa. Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus
pginas: Servidor, Usuario y Contrasea.
Rellena los campos y haz clic en Conectar. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas
creado.
La parte central de la pantalla estar dividida en dos columnas. A la izquierda, la marcada como Sitio local, nos permite explorar la estructura de
archivos y carpetas de nuestro sitio. A la derecha encontramos Sitio remoto, con los archivos ubicados en el servidor FTP.

Ahora no tenemos ms que arrastrar los archivos del sitio local al remoto para subirlos, o del remoto al local, para descargarlos al equipo.
Vers como el programa empieza a copiar la informacin de tu disco a Internet.
Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y
vers el sitio en Internet!
Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 17

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Propiedades del Documento


Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo formato, es decir, que
tengan el mismo color de fondo, de fuente, etc.
Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina.
Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinacin de teclas Ctrl + J.


Hacer clic sobre el men Modificar y elegir la opcin
Propiedades de la pgina.
Hacer clic con el botn derecho del ratn sobre el fondo de
la pgina. Aparecer al final del men contextual la opcin
Propiedades de la pgina.

Se abrir el cuadro de dilogo siguiente:


Las propiedades estn organizadas en categoras.
En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades:

Fuente de pgina: es el tipo de letra que le aplicaremos al texto.


Tamao: es el tamao de la fuente que aplicaremos al texto.
Color del texto: es el color de la fuente.
Color del fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido
ninguna imagen de fondo.
Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una
imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no
es conveniente tener un gif animado como fondo.
Repetir: permite especificar si queremos que la imagen de fondo se repita o no. Si no queremos que se repita, seleccionamos la opcin no-repeat.
Si queremos que se repita o dejamos la opcin en blanco o seleccionamos la opcin repeat. Si queremos que se repita solo en horizontal
seleccionamos la opcin repeat-x y si queremos que se repita en vertical, entonces seleccionamos repeat-y.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del
navegador.

En la categora Apariencia (HTML), como vemos en la imagen siguiente, encontramos las propiedades:

Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una
imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no
es conveniente tener un gif animado como fondo.
Fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna
imagen de fondo.
Texto: es el color de la fuente.
Vnculos: es el color que mostrar el texto de los vnculos.
Vnculos visitados: es el color que mostrar el texto de los vnculos visitados.
Vnculos activos: es el color que mostrar el vnculo cuando el cursor del ratn hace clic sobre el mismo.
Mrgenes: permiten establecer mrgenes en el documento, es decir, la distancia entre donde empieza el contenido de la pgina y la ventana del
navegador.

Podemos observar que muchas propiedades HTML y CSS son similares. La diferencia es que CSS aplica nuestra configuracin utilizando reglas de
estilo, mientras que HTML lo hace con atributos HTML. Estos ltimos estn cayendo en desuso, ya que se tiende a limitar el HTML al contenido, y no al diseo.
Por eso, te desaconsejamos su uso.
Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 18

Programa Adobe Dreamweaver CS6

Sesin de Aprendizaje

Diseo Web

Centro de Educacin Continua

Propiedades del Documento


En la categora Vnculos (CSS) encontramos las propiedades:

Fuente de vnculo: es el tipo de letra que mostrar el texto del vnculo.


Tamao: es el tamao del texto de los vnculos.
Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras
pginas.
Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no.
Vnculos de sustitucin: es el color del texto del vnculo cuando situamos el ratn encima del vnculo.
Vnculos activos: es el color de los vnculos activos.
Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro
tipo de estilo por ejemplo para que no aparezca subrayado.

En la categora Encabezados (CSS) encontramos la propiedad:

Fuente de encabezado: permite establece el tipo de fuente de los encabezados.

El resto propiedades hacen referencia al estilo cursiva o negrita, as como al tamao y color que queremos aplicar a cada tipo de encabezado.
En la categora Ttulo/Codificacin encontramos la propiedad:

Ttulo: es el ttulo del documento, que aparecer en la barra de


ttulo del navegador y de la ventana de documento de
Dreamweaver

En la categora Imagen de rastreo encontramos las propiedades:

Imagen de rastreo: permite establecer una


imagen como fondo del documento, pero
que slo se mostrar en la ventana de
documento de Dreamweaver, y nunca en un
navegador. Dicha imagen se utiliza como
plantilla grfica sobre la que crear el
documento.
Transparencia: permite establecer la
opacidad de la imagen de rastreo.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 19

Programa Adobe Dreamweaver CS6


Centro de Educacin Continua

Sesin de Aprendizaje

Diseo Web

La paleta de los Colores


Para asignar colores es posible desplegar una paleta de colores como sta. Al seleccionar un color de estas paletas, se
muestra el valor hexadecimal del color en la parte superior.

Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. stos son los colores que se muestran de la misma forma
en cualquier navegador bajo cualquier sistema operativo.
Esto no quiere decir que slo podamos utilizar estos colores. Podemos
personalizarlos a travs del botn de la parte superior de la paleta.

Los colores pueden asignarse a travs de los botones: .


Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar
propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que vimos en este tema.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris ,
El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.

lo que hace que se despliegue la paleta de colores.

Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #39F, el botn quedara del siguiente modo: .

En la web, los colores se representan por la cantidad que contienen de los colores primarios aditivos (Rojo, Verde y Azul).
Para indicar la cantidad de cada uno, se utilizan nmeros hexadecimales, que van del 0 a la F (A=10, B=11, ..., F=16).
El valor mnimo (00) indica la ausencia total de ese color, y el mximo (FF) su intensidad total.
Para indicar que nos referimos a un color, utilizamos el smbolo # la principio del cdigo.
Por tanto, podemos definir un color como #F7F0E2 donde el primer par corresponde al rojo, el segundo al azul y el ltimo al verde.
En Dreamweaver observars muchas veces que se emplean slo tres valores. En este caso, se interpreta que los valores de los pares estn
repetidos. Es decir, los colores #FF22AA y #F2A son el mismo.

Adobe Dreamweaver CS6 - Universidad Continental - LMachuca

Pg 20

You might also like