2. Adobe Dreamweaver es una aplicación en forma de estudio que está destinada a
la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en
estándares. Creado inicialmente por Macromedia(actualmente producido por Adobe
Systems) es el programa más utilizado en el sector del diseño y la programación
web, por sus funcionalidades, su integración con otras herramientas como Adobe
Flash y, recientemente, por su soporte de los principales competidores
son Microsoft Expression Web y BlueGriffon (que es de código abierto) y tiene
soporte tanto para edición de imágenes como para animación a través de su
integración con otras. Hasta la versión MX, fue duramente criticado por su escaso
soporte de los estándares de la web, ya que el código que generaba era con
frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar.
Esto se ha ido corrigiendo en las versiones recientes. Estándares del World Wide
Web Consortium.
3. 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
Java script para crear efectos e interactividades
Inserción de archivos multimedia...
4. Compatibilidad con CMS integrada. Un sistema de gestión de contenidos (en
inglés Content Management System, abreviado CMS) es in interfaz o programa que
nos permite gestionar el contenido de un sitio web. Cada vez son más usados, y
ahora Dreamweaver integra con los principales, permitiendo crear nuestras páginas
con la estructura adecuada.
Inspeccionar CSS. Ahora, con la opción Inspeccionar, podemos ver claramente los
márgenes aplicados al elemento seleccionado, y qué propiedades le afectan, tanto
si son propias, como heredadas de los elementos padre.
Integración Adobe Browserlab. Adobe Browser Lab es un servicio en línea de
Adobe, que nos permite comparar cómo se ve una misma página web en las
distintas versiones de Internet Explorer, Firefox y Safari, bajo los sistemas
operativos de Windows o Mac OS.
Configuración sencilla de sitios. Ahora resulta más sencillo configurar nuestro
sitio local y remoto. Ya que se han simplificado las opciones esenciales, y
distinguido más las opciones avanzadas y poco importantes.
Sugerencias de código. Ahora las sugerencias de código incluyen nuestras clases
personalizadas, y los comandos y funciones propios de los distintos CMS
soportados.
5. 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.
6. 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 se establece a ambos lados del texto. En este caso los botones se
refieren a sangría a la izquierda del texto.
Si lo aplicamos sobre texto normal, lo encerrará en una
etiqueta <blockquote></blockquote>, que por defecto se muestra indentada hacia
la derecha. En cambio, al aplicarlo sobre una lista, creará una sublista dentro de ésta.
7. Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen.
Después de esto, ya es posible seleccionar una imagen a través de la nueva
ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación
de teclas Ctrl + Alt + I. En Relativa a es posible especificar si la imagen será
relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa
al Documento, ya que si cambiamos la página de carpeta, lo habitual es cambiar
también sus imágenes.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma
en el campo URL de la ventana y en el campo Origen del inspector de
propiedades, dependiendo de si ha sido insertada como relativa a la carpeta raíz
del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se
encuentran la carpeta imágenes y el documento en el que deseamos insertar la
imagen. Dicha imagen, llamada aulaclic.jpg, se encuentra dentro de la
carpeta imágenes.
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imágenes/aulaclic.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imágenes/aulaclic.jpg
8.
9. Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que
permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar. Además de mejorar la
funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por
ejemplo, en la siguiente imagen puedes ver una página con dos marcos. El marco
izquierdo contiene el documento menu.htm y el derecho el
documento quienes.htm. Para poder visualizar la página de este modo, hemos
tenido que abrir el documento index.htm, que es la página que contiene los marcos
agrupados. Es posible editar los documentos contenidos en los marcos desde la
página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil
hacerse una idea de cómo quedará la página al final, cosa que no es posible si se
editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobre todo al
principio, por lo que no vamos a profundizar mucho en el tema, y veremos
solamente algunos conceptos básicos y ejemplos sencillos.