domingo, 18 de marzo de 2012

DISEÑO WEB III: ENTORNO DREAMWEAVER

Una vez creado el sitio y nuestro nuevo documento, se nos abre una ventana de trabajo en blanco en la que empezar a trabajar. La peculiaridad es que podemos ver esta ventana, según escojamos, como ventana diseño (vista prelimar a modo de maquetacion) , ventana código (donde se generara el código html,css,etc.) o pantalla dividida.




En el ejemplo vemos la pantalla dividida, en la parte superior podemos ver y trabajar el código, y en la parte inferior tenemos la ventana de diseño. Al abrir un nuevo documento html ya se nos genera un codigo base que contiene las especificaciones html, las etiquetas head, meta, title y body de modo que podamos trabajar directamente el contenido. La característica de Dremweaver es que todo lo que vayamos trabajando en la ventana de diseño nos ira generando el código pertinente. Además, el programa dispone de todas las herramientas, paletas, menús de propiedades, etc. necesarias para ir creando nuestra página.
En el ejemplo podemos seleccionar una imagen que hayamos insertado y en la tabla de Propiedades inferior darle el ancho y alto que deseemos, cambiar la imagen origen (Origen), crear un vínculo, darle un nombre (Alt), una clase (Clase), una identificación para agregarle un estilo (ID),etc. y así con cualquier elemento que vayamos creando. Todas las especificaciones que vayamos dando nos irá escribiendo el código, así que este lo podemos controlar de forma manual o mediante la ventana diseño.

Es esencial, igualmente, conocer el código, revisarlo y trabajarlo manualmente cuando haga falta, puesto que desde la ventana diseño se pueden generar errores, y la revisión manual del código nos permite trabajar directamente sobre los problemas que nos surjan. 

La barra de menu superior nos permite también, entre otras cosas:
Insertar imágenes, tablas, formularios,etc.:
Insertar > Imagen, Objetos de imagen, Tabla, Formulario
Cambiar las propiedades de la página (en conjunto con la tabla Propiedades antes nombrada), modificar marcos creados, etc.:
Modificar > Propiedades de la página, conjunto de marcos
Abrir herramientas de diseño, creación de Divs, marcos, tablas, contenido multimedia, etc.: 
Ver > Diseño del espacio de trabajo

Una vez vayamos maquetando nuestra página podemos visualizarla en nuestro navegador en Vista Previa (en el icono del mundo de nuestro menu superior)

VÍNCULOS

Seleccionando cualquier elemento de la página (normalmente, texto o imagen), podemos crear vínculos a una página web externa escribiendo la URL en Vínculo en la paleta Propiedades. O vincularlo a una página de nuestro propio proyecto (vínculo interno) escribiendo la ruta de la carpeta.
Otro modo para este último es picando el símbolo que aparece al lado (una especie de timón..) y arrastarlo (nos aparece una flecha) hacia el archivo de nuestro sitio que queremos vincular.


Con la herramienta Anclaje de nuestra pestaña Común (Ver > Diseño del espacio de trabajo) aparte de vincular un elemento a un archivo diferente, podemos enlazar con un elemento o zona de la misma página, de modo que cuando cliquemos sobre este nos lleve a esa zona de la página, por ejemplo para ir directamente a un titular que hayamos marcado al final de página.

Etiquetas: , ,

0 Comments:

Publicar un comentario

<< Home