Sesin de Aprendizaje
Diseo Web
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:
Pg 11
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.
Pg 12
Sesin de Aprendizaje
Diseo Web
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 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.
Pg 13
Sesin de Aprendizaje
Diseo Web
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
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...
Pg 14
Sesin de Aprendizaje
Diseo Web
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.
Pg 15
Sesin de Aprendizaje
Diseo Web
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
Sesin de Aprendizaje
Diseo Web
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.
Pg 17
Sesin de Aprendizaje
Diseo Web
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
Sesin de Aprendizaje
Diseo Web
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:
Pg 19
Sesin de Aprendizaje
Diseo Web
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.
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.
Pg 20