El entorno de Dreamweaver
Los elementos bsicos de Dreamweaver , la pantalla, las barras, los paneles, etc..., para
saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y
para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no
sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en
disposicin de empezar a crear pginas web.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta. As conoceremos los
nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La
pantalla que se muestra a continuacin (y en general todas las de este curso) puede no
coincidir exactamente con la que ves en tu ordenador,
Las barras
La barra de la aplicacin.
La barra la aplicacin es una novedad en Dreamweaver CS4.
Esta barra contiene los siguientes elementos: los mens (en la imagen, en la parte
inferior), varios botones propios de la aplicacin, el conmutador de espacio de trabajo y
una caja de bsquedas para obtener ayuda on line.
Los botones propios de la aplicacin, que aparecen junto al icono, nos permiten (de
derecha a izquierda) cambiar entre la vista de diseo o cdigo, acceder a las extensiones
que se pueden aadir, o al administrador de sitios.
Los mens, estn agrupados en categoras.
Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los
diferentes elementos que se pueden insertar en Dreamweaver.
Las pestaas de documento.
Dreamweaver CS4 aade una novedad. Debajo de las pestaas encontramos los archivos
a que utiliza nuestra pgina, como la hoja de estilos, archivos JavaScript, etc... pudiendo
acceder a ellos con un clic. Esto nos ahorrar bastante tiempo.
La barra de estado.
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
(para desplazarse) y Zoom.
La barra de herramientas estndar.
La barra de herramientas estndar contiene iconos para realizar las acciones ms
habituales del men Archivo yEdicin. De izquierda a derecha: Nuevo archivo, Abrir,
explorar con Adobe Bridge, Guardar,
Guardar todo, Imprimir el cdigo fuente, Cortar, Copiar,
Deshacer
Pegar, y Rehacer.
La barra de herramientas de documento.
La barra de herramientas de documento 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.
La barra de representacin de estilos.
Esta barra, mucho menos utilizada, nos permite ver la apariencia de nuestra web en
distintos dispositivos, si estamos utilizando hojas distintas que dependan del eso.
Configurar 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.
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.
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.
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 [Link] o [Link], ya que
cuando se intenta acceder a una URL genrica, el servidor devuelve la pgina con ese
nombre.
Crear o editar un sitio web sin conexin a Internet
Tambin podemos acceder desde el icono de acceso rpido de la barra de la aplicacin a
la opcin Administrar sitios oNuevo sitio...
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.
Debe definirse el Nombre del sitio, que nicamente nos servir para identificarlo en la
lista de sitios.
La Carpeta raz 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.
Aunque s destacaremos la opcin Usar vnculos de distincin entre maysculas y
minsculas.
Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio.
Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la
pestaa Bsicas, en vez de la pestaa Avanzadas.
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.
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
que aparece en la parte superior del panel y
de la ventana.
En esta imagen, se visualiza el remoto (a la izquierda) todava vaco, y el sitio local (a la
derecha) con nuestros archivos.
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.
El texto: propiedades y formato
Permiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos.
Caractersticas del texto
Las caractersticas del texto seleccionado pueden ser definidas a travs del men
Formato, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se
nos ofrecen a travs del inspector de
propiedades, que estn clasificadas en dos categoras
[Link] y C
Comenzamos viendo las propiedades HTML
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. El texto normal, debera ir
siempre en prrafos, salvo que est en otros elementos, como tablas o listas.
Estilo:
El botn B encierra el texto en una etiqueta , que por defecto se muestra en negrita. El
botn I, lo encierra entre , que por defecto se ve en cursiva.
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.
Hiperenlaces
Introduccin
Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva
de una pgina o archivo a otra pgina o [Link] posible asignar un vnculo a un texto, a
una imagen, o a parte de una [Link] creemos un enlace, lo que realmente
haremos ser crear una etiqueta que es la que en HTML se encarga de definir los enlaces.
Tipos de referencia
Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la
ruta
completa
del
archivo,
incluyendo
el
protocolo
[Link]
ejemplo,
[Link] o [Link]
Referencia relativa al documento (por defecto): La ubicacin del archivo enlazado se
toma en relacin con la ubicacin de la pgina. Es decir, partimos de la carpeta en la que
se encuentra el [Link] queremos enlazar con una pgina o archivo dentro de la
misma carpeta, no tenemos ms que utilizar su nombre. Por ejemplo, [Link] est
en una subcarpeta de la pgina actual, no tenemos ms que indicar el nombre de la
carpeta antes del archivo, y separarlos por una barra (/). Por ejemplo
imagenes/[Link] queremos referinos a carpetas que estn por encima del nivel
donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la
siguiente direccin[Link] En esta pgina
queremos
mostrar
una
imagen
que
se
encuentra
en
la
carpeta
[Link] cmo podemos hacerlo? Fcil.
Deberemos llamarla haciendo referencia al nivel superior
Crear enlaces
Es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente
establecer el Vnculo en el inspector [Link] ejemplo, aqu hay un enlace a
[Link], que al ser un archivo externo es de referencia absoluta, por eso contiene
http://
Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan
comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una
almohadilla .
Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.
Slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar
en el lugar en el que estaba situado el cursor.
Texto: es el texto que mostrar el enlace. Vnculo: es la pgina a la que ir redirigida el
enlace, si se trata de un enlace externo debers escribirla empezando siempre por [Link]
defecto Dreamweaver te crear un enlace relativo al documento.
Destino: la ventana donde se abrir la pgina, este campo se explica en el siguiente
apartado.
Ttulo: se trata de la ayuda contextual del vnculo, que aparecer al mantener un instante
el cursor sobre el enlace.
Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al
enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada.
Imgenes
Introduccin
Las imgenes son un aspecto muy importante de la web. Ya sea como complementos a la
informacin o parte del diseo, la hacen mucho ms atractiva a ojos del visitante.
Insertar una imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen.
En Relativa a es posible especificar si la imagen ser relativa al documento o a la carpeta
raz del sitio. Por ejemplo, imagina que dentro de la carpeta raz del sitio (la carpeta del
sitio) se encuentran la carpeta imgenes y el documento en el que deseamos insertar la
imagen. Dicha imagen, llamada [Link], se encuentra dentro de la carpeta imgenes.
En el caso de insertar la imagen como relativa al Documento la ruta sera:
imgenes/[Link]. Mientras que en el caso de ser insertada como relativa a la Raz del
sitio la ruta sera: /imgenes/[Link].
Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos
sobre el documento.
HTML desde Dreamweaver
Etiquetas
En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el cdigo
HTML de una pgina para darle un ttulo. Consista simplemente en escribir el ttulo
deseado entre las etiquetas. Las etiquetas consisten en poner un mismo comando entre
los smbolos < y >. La primera etiqueta indica inicio, y la segunda, que incluye el
smbolo /, indica final y se suele denominar etiqueta de cierre. Las etiquetas disponen de
atributos que permiten definir caractersticas del elemento sobre el que actan,
incluyendo cierto cdigo dentro de la etiqueta.
