Diseño de una página web con Adobe Dreamweaver

En este artículo veremos como crear una página web y comenzar a emplear algunas de las herramientas de edición de Adobe Dreamweaver.

En este artículo, veremos como iniciar una página web empleando Adobe Dreamweaver y daremos los primeros pasos en el diseño de una página web. Este mismo ejemplo, seguiremos utilizándolo posteriormente en otras prácticas sobre las diferentes funciones de Adobe Dreamweaver. Crear una página web, necesariamente lleva muchos pasos y no pueden abarcarse en un solo artículo, por lo que este será el primero de una serie.

Importante: El presente artículo está referido exclusivamente a la versión CS4. Versiones más antiguas pueden no contar con todas las funciones que se nombren, pueden encontrarse diferencias entre los códigos generados, etc., aunque es posible que la mayor parte del trabajo práctico pueda llevarse a cabo con escasas diferencias.

Creación de los documentos

Todo el trabajo práctico que realizaremos, es posible hacerlo en un servidor. Sin embargo, los primeros pasos en la creación de una página web con Adobe Dreamweaver es conveniente que sean realizados en el propio ordenador. Para ello y a los efectos de mantener el trabajo ordenado, crearemos un directorio que emplearemos para prácticas con este programa.

Acto seguido, ejecutaremos Adobe Dreamweaver, el cual nos mostrará su página inicial con todos sus accesos directos. Para comenzar a trabajar, crearemos el documento HTML o XHTML. Para ello haremos clic en Archivo / Nuevo… o haremos Ctrl + N; de inmediato se abrirá la ventana “Nuevo documento”. En ella seleccionaremos, a la izquierda, “Página en blanco”. En la columna titulada “Tipo de página”, seleccionaremos HTML. A continuación, deberemos seleccionar el tipo de diseño que deseamos realizar.

Para el ejemplo, tomaremos el diseño a dos columnas elásticas con encabezado y pie de página. A la derecha de la ventana seleccionaremos el tipo de documento (XHTML 1.1) y el lugar donde desarrollaremos el CSS (Seleccionaremos “Crear nuevo archivo”). Una vez finalizado el proceso, haremos clic en Crear.

Al hacer clic en Crear, se abrirá una ventana para el guardado del archivo CSS generado, que tiene un nombre por defecto (twoColElsLtHdr.css), el cual cambiaremos por estilo.css. Luego buscaremos el directorio creado para guardar nuestros archivos de prueba y haremos clic en guardar. De inmediato, los archivos creados se abrirán en el espacio de trabajo, en una ventana dividida que nos mostrará en la parte superior el código generado, y en la parte inferior la vista de diseño, tal como muestra la imagen siguiente.

En esta imagen vemos que en la parte superior, debajo de la pestaña que indica la página en la que nos encontramos trabajando, aparece un menú que sirve para alternar entre los diferentes archivos de código (en este caso, el documento HTML y el archivo CSS).

Ahora debemos proceder a guardar el archivo HTML. En el código HTML, en su parte superior, debemos ingresar un título. Dado que se trata de un ejemplo, la titularemos “Página de ejemplo”. El título debemos colocarlo en el campo Título ubicado en la barra de herramientas ubicada encima de la vista del código (ver imagen). Ahora procederemos al guardado, yendo a Arhivo / Guardar Como o tecleando Ctrl + Mayús + S. Seleccionaremos el directorio que hemos creado para guardar los archivos, en el campo Nombre sustituiremos el nombre por defecto por “index.html” y haremos clic en guardar.

Modificando el diseño

Como vemos en la imagen anterior, la zona de trabajo se encuentra dividida en tres ventanas horizontales. Las dos primeras son las que utilizaremos en adelante, mientras que la inferior, tiene herramientas avanzadas que por el momento no utilizaremos, por lo que la minimizaremos, colocando el puntero sobre su borde superior hasta que aparezca la flecha doble de cambiar el tamaño, hacemos clic y arrastramos hasta que solo sean visibles las pestañas. También es posible cerrarlas.

Cada vez que hagamos clic sobre uno de los elementos en la vista de diseño, en la vista del código aparecerá la sección del código que corresponde al elemento seleccionado. La primera modificación que haremos en nuestro diseño, será el encabezado. Al hacer clic sobre él, el código en la vista superior mostrará la sección del mismo donde se encuentran los elementos que componen este encabezado. Del mismo modo, cuando hacemos clic sobre una sección del código, la ventana de diseño se moverá y se seleccionará la parte del diseño correspondiente.

Ahora modificaremos el Encabezado. Al hacer clic en la vista de diseño, aparecerá un cursor parpadeante, indicando que podemos modificar el texto. Todas las modificaciones de texto, pueden realizarse en ambas vistas y los resultados serán mostrados en ambas. Borramos el texto por defecto y sustituimos por “Mi página”. Si mantenemos el cursor en la misma posición, aparecerá un ícono con un timón. Al hacer clic sobre él, se abrirá una ventana en la cual aparecen todas las etiquetas CSS que están relacionadas con el elemento seleccionado.

Al posar el puntero sobre cada una de estas etiquetas, aparecerán los atributos de la etiqueta y sus valores. La siguiente captura de pantalla ilustra este punto.

Si hacemos clic sobre una de las etiquetas, la vista de código se cambiará a la del archivo CSS, mostrando la etiqueta correspondiente. Ahora haremos una prueba de edición. Haremos clic sobre el ícono de navegación de etiquetas. Al aparecer la ventana, haremos clic en la etiqueta body. En la vista de código, aparece la etiqueta body del código CSS, que se muestra de la siguiente forma:

body  {
  font: 100% Verdana, Arial, Helvetica, sans-serif;
  background: #666666;
  margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
  padding: 0;
  text-align: center; /* esto centra el contenedor en los navegadores IE 5*. El texto se ajusta posteriormente con el valor predeterminado de alineación a la izquierda en el selector #container */
  color: #000000;
  }

Algunos de estos atributos, no es conveniente modificarlos, dado que, tal como se explica en los comentarios, están destinados a compatibilizar la página con diferentes navegadores. La modificación que haremos en esta sección, será el color de fondo. En el atributo background, colocaremos el valor #63a8e8 (esta es la denominación hexadecimal de los colores) y veremos como el color gris oscuro que aparecía de fondo, ahora es de color celeste.

En los próximos artículos de este manual, iremos modificando este diseño de prueba, por lo que sería conveniente que lo guardaran para no tener que generar nuevamente otro archivo.