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.
La pantalla inicial
Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes
fundamentales.

Las barras
La barra de la aplicacin.

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, que ya veremos.

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.

Cada archivo que tengamos abierto, mostrar una pestaa con su nombre, lo que nos permitir cambiar de uno
a otro fcilmente.
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.
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, 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.
Como veremos al personalizar el entorno, algunos paneles, como Insertar nos permiten colocarlo como otra
barra de herramientas.

Configurar un sitio social

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.

Como crear o editar un sitio web sin conexin a internet

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.

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.

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.

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 buscar.htm, paraplantilla.htm,
platossemana.htm,postresemana.htm y las carpetas imagenes y varios.
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).

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.

Caractersticas del texto

Comenzamos viendo las propiedades HTML

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.
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.
Estas son las etiquetas de resaltado ms habituales, pero existen otras que encontramos a travs del men
Texto.
Lista:
Sangra:

Hiperenlaces
Vamos a ver que son los hiperenlaces, para que sirven y como crearlos, ya que son un elemento esencial
para cualquier pgina web.

Introduccin
Tipos de Referencia
Existen diferentes clases de rutas de acceso a la hora de definir los vnculos. Estas referencias no se limitan a
los enlaces, se comportarn igual cuando indiquemos la ubicacin de una imagen, de un archivo Flash, de la
hoja de estilo, etc.

Crear Enlaces

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.

Texto: es el texto que mostrar el enlace

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.
ndice de tabulador: Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla
Tabulador

Insertar Imagen
Para insertar una imagen hay que dirigirse al men Insertar, a la opcin Imagen.