El entorno de Dreamweaver

Los elementos básicos de Dreamweaver:La pantalla, las barras, los paneles, etc..., para saber diferenciarEntre cada uno de ellos. Aprenderemos como se llaman, donde están y para que sirven. También veremoscomo obtener ayuda, por si en algún momento no sabemos como seguir trabajando. Cuando conozcamostodo esto estaremos en disposición de empezar a crear páginas web.

La pantalla inicial: Al arrancar Dreamweaver aparece una pantalla inicial como esta, vamos a ver sus componentesFundamentales. así conoceremos los nombres de los diferentes elementos y será más fácil entender el restoDel curso.

Las barras:

La barra de la aplicación:

La barra la aplicación es una novedad en Dreamweaver CS4,donde veremostodos los elementos de la barra ocupando una sola línea

Esta barra contiene los siguientes elementos: los menús, varios botonespropios de la aplicacion, el conmutador de espacio de trabajo y una caja de busquedas para obtener ayuda onLine.

Los botones propios de la aplicacion, que aparecen junto al icono, nos permiten cambiar entre la vista de diseño o codigo, acceder a las extensiones que se pueden añadir, o al administradorde sitios, que ya veremos.

Mas hacia la derecha observamos el conmutador del espacio de trabajo, como un desplegable. Un espacio detrabajo es la configuracion del entorno, que podemos guardar y cargar.

Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementosQue se pueden insertar en Dreamweaver. Todas las opciones de Dreamweaver son accesibles a traves de losmenus, aunque en ocasiones nos envien a los paneles.

Las pestanas de documento:

Cada archivo que tengamos abierto, mostrara una pestana con su nombre, lo que nos permitirá cambiar deUno a otro fácilmente o acceder a otras acciones haciendo clic con el botón derecho, como Cerrar otros archivos.

La barra de estado:

Esta barra la encontramos debajo de la ventana de documento, y nos da información sobre el mismo.Hasta aquí las barras que siempre veremos en la aplicación:

La barra de herramientas estandar.

La barra de herramientas estandar contiene iconos para realizar las acciones mas habituales delmenu Archivo yEdicion. De izquierda a derecha:

La barra de herramientas de documento.

La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas

de edición y la vista en vivo, acceder cómodamente al título de la página, o realizar las distintas opciones deValidación que nos ofrece el programa.

La barra de representacion de estilos:

Esta barra nos permite ver la apariencia de nuestra web.al personalizar el entorno nos permiten colocarlo como otrabarra de herramientas.

Configurar un sitio local: En este tema vamos a ver¿que es un sitio web, como crearlos y gestionarlos, y como modificar lasPropiedades de los documentos? como puede ser el color de fondo.Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivoComún. Es necesario diseñar y planificar el sitio web antes de crear las páginas que trabajaremos, y los cambios los actualizaremos La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, La página inicial de nuestro sitio debe de tener el nombre index.htm o index.html, ya que cuando se intenta acceder a una URL genérica, el servidor devuelve la página con ese nombre.: Crear o editar un sitio web sin conexión a Internet.

Una vez creadas las carpetas que formaran la estructura del sitio local, o por lo menos la carpeta raíz, ya es posible definir el nuevo sitio Para ello hay que dirigirse al menú Sitio, a la opción Administrar sitios... o directamente a Nuevo sitio.También podemos acceder desde el icono de acceso rápido de la barra de la aplicacion a laOpción Administrar sitios o Nuevo sitio...

Tanto si se elige la opción Nuevo..., como si se elige la opción Editar..., se mostrara la misma ventana en la que definir o modificar las caracteristicas del sitio.

Las opciones del sitio se agrupan en diferentes categorías que aparecen en la parte izquierda.

Debe definirse el Nombre del sitio, que únicamente nos servirá para identificarlo en la lista de sitios.

Después de rellenar los datos pulsamos el botón Aceptar y abrimos el sitio.

Para abrir un sitio ya definido hay que dirigirse al menú Sitio, a la opción Administrar sitios.... seleccionar elSitio de la lista de sitios y pulsar sobre el botón Listo.

También 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 más importantes deDreamweaver, ya que nos da acceso a los archivo del sito.

En este caso vemos todos los documentos creados en nuestroSitio buscar.htm, paraplantilla.htm, platossemana.htm,postresemana.htm y las carpetas imagenes y varios.

Esto nos sirve para ver a la vez el sitio local y el sitio remoto y poder, por ejemplo, sincronizar los archivos, o compararlos. También el servidor de pruebas o las bases de datos.

En esta imagen, se visualiza el remoto (a la izquierda) todavía vacío, y el sitio local (a la derecha) conNuestros archivos.

Dreamweaver guarda la cache de nuestro sitio, como se organizan los archivos y se relacionan entre ellos encontrara la página. Al modificar algún objeto que es referenciado por algún otro documento para que no se produzcan los problemas antes mencionados.

El texto: propiedades y formato: A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, quePermiten asignar al texto clases y estilos creados por nosotros mismos, no predefinidos. Caracteristicas del texto

Comenzamos viendo las propiedades HTML:

Todas estas propiedades generan etiquetas HTML, podremos personalizarlas con CSS para que se vean exactamente como queramos.Formato:

Formato:

Permite seleccionar un formato de parrafo ya definido para HTML, que puede ser encabezado, parrafo oFormato predeterminado.

Es importante emplear correctamente los encabezados, ya que se organizara mejor el contenido de nuestraWeb, y es importante de cara a buscadores y visitantes.

Estilo:

El botón B encierra el texto en una etiqueta, que por defecto se muestra en negrita. El botón I, lo encierraEntre , que por defecto se ve en cursiva.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos que son las listas en el siguienteApartado.

Sangria:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que seestablece a ambos lados del texto. En este caso los botones se refieren a sangría a la izquierda del texto.

Hiperenlaces:Vamos a ver que son los hiperenlaces, para que sirven y como crearlos, ya que son un elemento esencialpara cualquier página web.

Introduccion:

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.

Tipos de referencia:Existen diferentes clases de rutas de acceso a la hora de definir los vínculos. Estas referencias no se limitana los enlaces:

Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo, incluyendo el protocolo

http://.Referencia relativa al documento (por defecto): La ubicación del archivo enlazado se toma en relacióncon la ubicación de la página. Es decir, partimos de la carpeta en la que se encuentra el documento. Siqueremos enlazar con una página o archivo dentro de la misma carpeta, no tenemos más que utilizar su

nombre. Por ejemplo, pagina2.htm.Si esta en una subcarpeta de la página actual, no tenemos más que indicar el nombre de la carpeta antes del archivo y separarlos por una barra (/).

La forma más sencilla de crear un enlace es a través del inspector de propiedades que al ser un archivo externo es de referenciaabsoluta, por eso contiene http://.

Otra forma de crear un enlace es a través del menú Insertar, opción hipervínculo.

Texto: es el texto que mostrara el enlace. Si teníamos un texto seleccionado, aparecerá ahí.

Vinculo: es la página a la que ira redirigida el enlace, si se trata de un enlace externo deberás escribirla Empezando siempre por http://.

Destino: la ventana donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, que aparecerá al mantener un instante el cursor sobre el enlace.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas.

Índice de tabulador: Como abras podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador.

Imágenes: En este tema vamos a ver como insertar imagenes en un documento.

Introduccion: Las imagenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante.

Insertar una imagen: Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen.

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Espreferible que sea relativa al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiartambién sus imágenes.

Otra forma de insertar una imagen, es arrastrarla directamente desde el panel Archivos sobre el documento.

HTML desde Dreamweaver. En este tema no se pretende ensenaros el lenguaje HTML sino como poder realizar algunos reajustes directamente en el codigo estando dentro de Dreamweaver.

Etiquetas: Ya sabes que el lenguaje HTML esta basado en etiquetas que marcan el inicio y fin de cada elemento de lapagina Web.

En el primer tema vimos como ejemplo las etiquetas que hay que incluir en el codigo HTML de una paginapara darle un titulo.

Por ejemplo, un parrafo se inserta entre las etiquetas y, pero es posible cambiar sus caracteristicaspredeterminadas, como puede ser asignarle una clase de estilo CSS.

insertar etiqueta de cierre. Por ejemplo, un May + INTRO dentro del código HTML equivale a la etiqueta.Realmente estas etiquetas si tienen cierre, y se pone en la etiqueta de apertura para seguir elestándar XHTML que obliga a que todas las etiquetas se cierren. Por tanto el salto de línea Anterior seescribiría.

Otras etiquetas que se cierran sobre sí mismas son las imágenes, reglas horizontales.