Guia Dreamweaver
Guia Dreamweaver
Guia Dreamweaver
1Dreamweaver es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver CS5 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual. La pantalla inicial de dreamweaver es la que vemos en la imagen siguiente
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a travs de los mens, aunque en ocasiones nos enven a los paneles. Las pestaas de documento.
Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno a otro fcilmente. Si junto al nombre aparece un *, indica que ese archivo tiene cambios sin guardar. Podemos cerrar cada documento clicando en el aspa de la derecha, o acceder a otras acciones haciendo clic con el botn derecho, como Cerrar otros archivos.
Esta barra la encontramos debajo de la ventana de documento, y nos da informacin sobre el mismo. A la izquierda, encontramos el selector de etiquetas. Nos sirve para seleccionar etiquetas completas. Siguiendo hacia la derecha encontramos las herramientas de Seleccin, Mano y Zoom. Y otros datos como el tamao de la ventana, el tamao de la pgina o su codificacin. Hasta aqu las barras que siempre veremos en la aplicacin. A parte, existen otras que podemos ver u ocultar desde el men Ver Barras de herramientas.
La barra de herramientas estndar: La barra de herramientas estndar contiene iconos para realizar las acciones ms habituales del men Archivo y Edicin. De izquierda a derecha: Nuevo archivo, Abrir, , Guardar, Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar, Pegar Deshacer y Rehacer. Esta barra puede ser muy til, pero en realidad casi todo el mundo usa esos comandos directamente con el teclado (Ctrl + G para guardar, Ctrl + C para copiar, etc.) La barra de herramientas de documento.
La contiene iconos que nos permiten cambiar entre las distintas vistas de edicin y la vista en vivo, acceder cmodamente al ttulo de la pgina, o realizar las distintas opciones de validacin que nos ofrece el programa.
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.
Vistas de un documento
Podemos editar el documento con distintas vistas, que puedes cambiar travs de la barra de documento:
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.
La Vista en vivo 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.
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.
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.
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.
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 Dream automticamente actualizar todas las referencias a ese archivo (enlaces desde otras pginas, origen de la imagen, etc).
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.
Las propiedades estn organizadas en categoras. En la categora Apariencia (CSS), como ves en la imagen anterior, encontramos las propiedades: y y y y y y 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. 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. 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:
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.
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. El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris , lo
que hace que se despliegue la paleta de colores. El otro modo es introduciendo directamente el nmero hexadecimal del color en el recuadro blanco.
Todas estas propiedades generan etiquetas HTML, que tienen un estilo por defecto en el navegador. Pero al final, podremos personalizarlas con CSS para que se vean exactamente como queramos.
Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o formato predeterminado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato predeterminado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato predeterminado se respetar que hayan varios espacios en lugar de solo uno. Estilo: El botn B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botn I, lo encierra entre <em></em>, que por defecto se ve en cursiva. Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men Texto. Por ejemplo, subrayar el texto. Esta opcin no aparece en el panel dePropiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Adems, emplea etiquetas que estn en desuso. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Veremos qu son las listas en el siguiente apartado. Sangra: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de margen que se establece a ambos lados del texto. En este caso los botones se refieren a sangra a la izquierda del texto. Si lo aplicamos sobre texto normal, lo encerrar en una etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia la derecha. En cambio, al aplicarlo sobre una lista, crear una sublista dentro de sta.
CREAR UN SITIO LOCAL 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 unacarpeta 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. 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. Lo primero es crear la carpeta raz para nuestros archivos, sea la carpeta que representara nuestro sitio local Men Sitio ---------> Opcin Nuevo sitio Posteriormente se nos abrir la ventana en la cual debemos elegir el nombre y la ubicacin del sitio local.
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. Despus de rellenar los datos pulsamos el botn Aceptar e inmediatamente se abrir el panel de sitios (F8) en donde veremos la carpeta local con los archivos que ella contiene. Dentro de este sitio se mantendrn almacenados y organizados todos los archivos que utiliza nuestro sitio Web, crearemos una carpeta de Imgenes en donde se almacenaran todas las imgenes que utilicemos.
Los botones inferiores del panel Activos tienen diferentes funciones, el primero, sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botn . Si el botn est desactivado, pulsa con el botn derecho del ratn sobre el rea de plantilla y eligeNueva Plantilla. Cuando se pulsa ese botn aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre l. Para modificar una plantilla la seleccionamos de la lista y pulsamos el botn Para eliminar una plantilla la seleccionamos de la lista y pulsamos el botn Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automticamente.
Dentro del recuadro es posible insertar objetos, que aparecern por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrn ser modificados en las pginas. La regin editable se ajustar al tamao del contenido. Por lo que aunque parezca pequea cuando an no tiene nada no limitar lo que queramos introducir.
USAR PLANTILLAS PARA CREAR PGINAS NUEVAS La opcin ms simple, consiste en elegir una Pgina de plantilla al crear un Nuevo documento.
MARCOS O FRAMES Los marcos o frames sirven para distribuir mejor los datos de las pginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegacin, mientras que otras s pueden cambiar. Adems de mejorar la funcionalidad, pueden mejorar tambin la apariencia. Cada uno de los marcos de una pgina, contiene un documento HTML individual. Por ejemplo, en la siguiente imagen puedes ver una pgina con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento quienes.htm. Para poder visualizar la pgina de este modo, hemos tenido que abrir el documento index.htm, que es la pgina que contiene los marcos agrupados.
CREAR MARCOS
Para crear un marco, primero hay que abrir algn documento. Puede ser uno nuevo o uno ya existente. Despus, dirigirse al men Insertar, HTML, Marcos. A travs de esta opcin
Puede elegirse el tipo de marco que va a crearse. Vamos a ver el marco a la Izquierda. Si pulsamos sobre Izquierda se crear un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una lnea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene el grupo de marcos. El de la derecha es el documento que tenamos inicialmente, que est en el marco conocido como marco
padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sob la re lnea que separa los marcos. Esto solo es posible mientras dicho documento no se haya guardado. Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha, el marco vaco aparecer a la derecha del documento original. Para seleccionar los marcos del documento es necesario dirigirse al panelMarcos, que puede abrirse a travs del men Ventana (Maysculas + F2).
todo
, ya