Dreamweaver

Dreamweaver

Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobre todo en lo que a productividad se refiere.

Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

Hojas de estilo y capas.

Javascript para crear efectos e interactividades.

Inserción de archivos multimedia.

Además es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañías, para realizar otras acciones más avanzadas.

En resumen, el programa es realmente satisfactorio, incluso el código generado es de buena calidad. La única desventaja consiste en que al ser tan avanzado, puede resultar un poco difícil su manejo para personas menos experimentadas en el diseño de webs.

Las funciones de edición visual de Dreamweaver permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML.

Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc.., de una forma muy sencilla y visual.

El programa Adobe Dreamweaver, al igual que muchos otros programas, presenta varias formas de iniciar un nuevo trabajo. Como la temática que tratamos es la creación de nuevas páginas web, trataremos exclusivamente este tema, aunque este programa permite la creación de documentos en varios lenguajes de programación.

Para familiarizarnos con el entorno del programa, mostramos a continuación la página inicial del software, desde la cual podremos acceder a las diferentes funcionalidades. En la imagen podemos apreciar la barra de herramientas estándar y una ventana con varios comandos.

Documento HTML en blanco

Domo en todos los programas de edición, la primera opción que dispone Dreamweaver es la creación de una página HTML en blanco. Para ello se pueden emplear tres vías diferentes:

La primera y la más sencilla, es hacer click en el botón HTML que aparece en la ventana de inicio rápido.

La segunda, que puede llevar varios pasos, es hacer click en “Archivo / Nuevo…”

La tercera, es a través de las teclas de acceso rápido, para lo cual se emplea “Ctl + N”

Los vías 2 y 3 dan acceso a un nuevo documento por el mismo método, mientras que la primera vía es una opción diferente, por lo que trataremos aparte ambas formas de acceder a un documento en blanco.

Características principales en Dreamweaver:

Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.

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 párrafo ya definido para HTML, que puede ser encabezado, párrafo o formato predeterminado. Los encabezados se utilizan para establecer títulos 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, debería ir siempre en párrafos, salvo que esté en otros elementos, como tablas o listas.

Es importante emplear correctamente los encabezados, ya que se organizará mejor el contenido de nuestra web, y es importante de cara a buscadores y visitantes. No te preocupes por cómo se muestran esos encabezados, recuerda que siempre podremos personalizarlo.

Estilo:

El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.

Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.

Lista:

Estos botones permiten crear listas con viñetas o listas numeradas. Veremos qué son las listas en el siguiente apartado.

Sangría:

Estos dos botones permiten sangrar el texto y anular la sangría. La sangría es una especie de margen que

...