La generación de una página web con Adobe Dreamweaver, puede hacerse empleando alguno de los modelos prediseñados que aparecen en cuanto seleccionamos “Archivo / Nuevo…”, tal como se explica en el artículo “Crear una nueva página web en Dreamweaver”. Sin embargo, en muchas ocasiones y por diferentes circunstancias, podremos necesitar generar una página web diferente a los modelos prediseñados.
Es por esta razón, que daremos un ejemplo de cómo realizar un diseño desde cero, comenzando con una página en blanco, de forma que puedan conocer los procedimientos necesarios para realizar una página web desde cero con Adobe Dreamweaver CS4.
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.
Crear una nueva página web en Dreamweaver
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.
A través de la ventana de inicio rápido.
La ventana de Inicio Rápido cuenta con tres columnas. En la columna central, titulada “Crear nuevo”, aparece como primera opción un botón titulado “HTML”. Haciendo un click en este botón, se abrirá la ventana en modo código que presentará un documento con el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
</body>
</html>
Esta es la opción única y por defecto que se tiene a través de esta vía (XHTML 1.0 transitional e idioma inglés), aunque es posible editarla, tanto manualmente como a través de las opciones que presenta el programa para modificar el tipo de documento (“Archivo / Convertir” y seleccionar la opción deseada). Si bien es posible llegar a obtener los mismos resultados que en la siguiente opción, dado que Dreamweaver realiza una serie de acciones por defecto, a menos que vayamos a realizar un trabajo muy personalizado y el programa no lo presente por defecto, la siguiente es la mejor de las dos para los recién iniciados.
A través del menú Archivo de la barra de herramientas estándar
Para seleccionar una segunda forma de abrir un archivo en blanco para iniciar un nuevo trabajo, tenemos dos formas de hacerlo. La primera, es acceder a través de “Archivo / Nuevo…” y la segunda es empleando las teclas de acceso rápido “Ctrl + N”. El procedimiento es el mismo para ambas formas, por lo que la trataremos en este mismo apartado.
Al hacer click en “Archivo / Nuevo” o teclear “Ctrl + N” se abrirá la siguiente ventana:
En el menú de la izquierda aparecen varias opciones, de las cuales solo emplearemos la primera, “Página en blanco”, ya que las otras opciones están referidas a la creación de plantillas o páginas basadas en otros lenguajes. Al abrirse esta ventana, siempre aparece seleccionado el menú “Página en blanco”, por lo que simplemente no tendremos que dejar las opciones como aparecen.
A la derecha del menú, aparece una cuadro titulado “Tipo de página” con una lista de opciones que nos permite crear varios tipos de documentos en blanco, de los cuales solo nos interesa el primer ítem, que nos permite crear un documento en blanco del tipo HTML o XHTML.
Aún más a la derecha, aparece un nuevo cuadro titulado “Diseño”, el cual nos permite seleccionar desde ninguno para que elaboremos nuestro diseño desde cero, hasta diseño en una, dos o tres columnas, con barra lateral a la izquierda o derecha, en diseño de ancho fijo, elástico o flotante.
El diseño seleccionado aparecerá en una vista previa que se encuentra en el extremo derecho de la ventana, donde además de un esquema del tipo de diseño seleccionado, aparece en su interior un símbolo que indica el tipo de diseño y debajo una descripción del mismo. Debajo de la vista del esquema del diseño, podemos optar por el tipo de documento (HTML 4.01 strict o transitional, XHTML 1.0 strict o transitional, XHTML 1.1, XHTML Mobile 1.0 o ninguna) y el tipo de CSS que se empleará (si estará en el HEAD, si estará en un archivo aparte o si se quiere emplear un archivo existente), además de opciones de importar y exportar archivos CSS.
Si establecemos en “Diseño CSS en:” que queremos crear un nuevo archivo, aparecerá una nueva ventana que nos pedirá guardar el archivo CSS. Allí seleccionaremos el nombre del archivo y el directorio en el cual guardaremos el mismo. Tengamos en cuenta que, para no tener problemas cuando subamos la página al servidor, conviene que se haga en la estructura de directorios que luego se subirá. Para ello se pueden utilizar las opciones más frecuentes, que son:
- Guardar el archivo CSS en el mismo directorio que el archivo HTML.
- Guardar el archivo CSS en un directorio creado para guardar los archivos relacionados con la página web dentro del directorio raíz (directorio raíz / archivos, por ejemplo).
- Guardar el archivo CSS en un directorio creado para guardar los archivos CSS (directorio raíz / css, por ejemplo)
Una vez guardado el archivo CSS, al cual en el documento de ejemplo llamaremos “estilo.css”, aparecerá la nueva página visualizando el código HTML y el archivo CSS, pudiendo verlos alternando entre ellos en el selector que se encuentra en la barra ubicada encima del código.
Importante: A menos que nos encontremos creando una página directamente en el servidor, cosa que es posible hacer con Dreamweaver pero que no es el caso del ejemplo que estamos construyendo, es conveniente cambiar el enlace del archivo HTML al archivo CSS, debido a que Dreamweaver emplea una URL absoluta, lo que en este caso supondría un enlace a un directorio interno de nuestro ordenador. Es necesario que cambiemos la URL absoluta por una URL relativa, lo que veremos cómo hacer en el ejemplo siguiente cuando lleguemos al paso correspondiente.
Para cambiar la URL del link del CSS, debemos ir al código HTML, que en su primera parte se mostrará así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
<link href=”file:///C|/Documents and Settings /Mis documentos/archivos/estilo.css” rel=”stylesheet” />
<!–[if IE]>
<style>
/* coloque las reparaciones de css para todas las versiones de IE en este comentario condicional */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* la propiedad zoom propia que se indica más arriba proporciona a IE el hasLayout que necesita para evitar diversos errores */
</style>
<![endif]–>
</head>
Como podemos ver, el link dice file:///C|/Documents and Settings /Mis documentos/estilo.css, lo que es una URL que no será reconocible cuando subamos el archivo a la web. Debemos dejar solo la URL relativa, quedando el código de esta forma:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
<link href=”archivos/estilo.css” rel=”stylesheet” />
<!–[if IE]>
<style>
/* coloque las reparaciones de css para todas las versiones de IE en este comentario condicional */
.twoColElsLtHdr #sidebar1 { padding-top: 30px; }
.twoColElsLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* la propiedad zoom propia que se indica más arriba proporciona a IE el hasLayout que necesita para evitar diversos errores */
</style>
<![endif]–>
</head>
Crear una nueva página web
Ahora, a modo de ejemplo, construiremos un diseño web básico para mostrar lo descrito hasta el momento. Tal como ya se ha expresado, utilizaremos la mejor opción de apertura de un documento en blanco, haciendo click en “Archivo / Nuevo…”. Una vez que se ha abierto la ventana de opciones, haremos click en la opción “2 columnas elásticas, barra lateral izquierda, encabezado y pie” en la columna titulada “Diseño” y XHTML 1.1 en “Tipo de documento” y “Crear nuevo archivo” en “Diseño CSS en:”.
Veremos en la ventana de vista previa, un esquema del tipo de página que hemos seleccionado. A continuación, haremos click en “Crear” y aparecerá la ventana de la página en modo de “Código” con los dos archivos, el HTML y el CSS abiertos, aunque solo aparecerá visible el HTML. Para ver el código del CSS, deberemos seleccionar la ventana correspondiente en la parte superior del código.
Importante: El empleo de XHTML 1.1 y un CSS aparte del código HTML, no es casual, ya que son prácticas recomendables el empleo de CSS en archivo independiente y la utilización de códigos estrictos (XHTML 1.1 o HTML 4.01 strict). También es aconsejable la validación de los códigos una vez finalizado el proceso de creación del sitio.
Ahora estamos en condiciones de modificar y agregar todo aquello que creamos conveniente para nuestro sitio, dando lugar al proceso creativo del diseño de una página web.
Creación de la página y encabezado
El primer paso, como es de suponerse, es la creación de los archivos necesarios. Para crear el archivo html, iremos a “Archivo / Nuevo…”. Cuando se abre el cuadro “Nuevo Documento”, seleccionaremos “HTML”, y en la segunda columna, “ninguno”, con lo que estaremos creando un archivo HTML sin un diseño predefinido. Más a la derecha, seleccionaremos el tipo de documento que deseamos crear (para el ejemplo, XHTML 1.1).
Dado que se trata de un archivo HTML que no contiene formato alguno, no se tendrá la posibilidad de crear un archivo CSS relacionado o insertar el código CSS en el <head>, lo que podremos hacer posteriormente.
Una vez que hemos creado el archivo HTML, veremos que el mismo tiene el siguiente código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sin título</title> </head> <body> </body> </html>
Una vez que hemos creado el archivo, debemos guardarlo. Luego crearemos el archivo CSS, para lo cual iremos a “Archivo / Nuevo…” y haremos clic en la opción “CSS”. Al hacer clic en “Crear”, se generará un archivo donde solo aparecerá la codificación de caracteres y un comentario indicando el tipo de documento de que se trata. Al igual que en el caso anterior, este archivo será guardado. Para el ejemplo lo guardaremos en el mismo directorio que se encuentra el archivo HTML con el nombre “estilo.css”.
Siguiendo los procedimientos descritos en el artículo “Dreamweaver. Propiedades de la página web”, modificaremos las propiedades de la página en caso de ser necesario. También deberemos darle título a la página (“Ejemplo”), que introduciremos en el campo que a tales efectos se encuentra en la barra de herramientas.
Una vez que se han creado los archivos, deberemos comenzar a generar el encabezado de la página, el cual tiene información muy relevante para el funcionamiento de la página y su posicionamiento, que no es aportado por el encabezado que contiene por defecto.
Creando el encabezado
El encabezado, como podremos ver, contiene ya alguna información, como la codificación de caracteres y el título de la página.
Pero esto es insuficiente para una página web normal, por las razones que ya hemos expuesto, de modo que deberemos crear, entre otras cosas, las etiquetas “meta” que consideremos necesarias y el vínculo del documento HTML con el archivo CSS.
Para crear una etiqueta “meta”, tendremos que ir a “Insertar / HTML / Etiquetas head”, ante lo cual se abren seis posibilidades, que son etiquetas “meta”, palabras clave, descripción, actualizar, base y vínculo.
Siguiendo un orden lógico en el encabezado, comenzaremos insertando la descripción de la página, seleccionando la opción correspondiente en el menú descrito, tras lo que se abrirá un cuadro muy sencillo donde tendremos un área de texto donde introduciremos la descripción de la página. A continuación crearemos la etiqueta de las palabras clave, que se realiza tras abrirse un cuadro similar al anterior, donde introduciremos las palabras o frases clave separadas por una coma, tal como cuando escribimos el código directamente.
Luego, en caso de que la página lo requiera, se puede comenzar a introducir las etiquetas “meta” que sean necesarias, a través de la opción correspondiente que se encuentra en el menú, que abre el siguiente cuadro:
Ahora deberemos realizar uno de los pasos más importantes de toda la creación de los elementos del encabezado, que es la vinculación del documento HTML con el archivo CSS. La posibilidad de realizarlo se encuentra en el mismo menú que se crean el resto de las etiquetas del encabezado, seleccionando en este caso, la opción “Vínculo”. Esta etiqueta también servirá llegado el momento para introducir el favicon.
Una vez que completamos estos procedimientos, estamos prontos para iniciar el proceso de creación del diseño de la página web.
Inicio de la creación del diseño
Los primeros pasos en la definición del diseño de la página, pueden comenzarse, como ya se ha descrito en un artículo anterior, en “Modificar / Propiedades de la página”, donde se abre un cuadro en el que, además de los parámetros básicos de la planta, se encuentran una serie de elementos que están relacionados con el diseño de la página, como por ejemplo las propiedades del elemento “body” y algunos estilos CSS elementales.
De todas formas, si hemos creado un archivo CSS, no es conveniente emplear esta opción, ya que el código CSS generado por este método se incluyen dentro de las etiquetas “head” y en el propio elemento “body”.
Definición de los atributos de “body”
Los atributos de la etiqueta “body”, define las propiedades de todos aquellos elementos que están incluidos dentro de ella, por lo que sus efectos, a menos que se defina otra cosa en los elementos hijos, se verán en toda la página.
Para crear los atributos del elemento “body”, eliminando los que los navegadores definen por defecto, se debe ir a la barra de herramientas “estilos CSS”, donde buscaremos, al pie de la misma, el botón para crear una nueva regla.
Una vez que hemos seleccionado esta opción, se abre el cuadro para la creación de nuevas reglas CSS, en el que seleccionaremos “Etiqueta” en “Tipo de selector”, “body” en “Nombre del selector” y haremos clic en Aceptar.
En el cuadro que se abre, introduciremos todas las características básicas que serán válidas para todo el documento, salvo que en elementos posteriores se definan otros parámetros. Para el ejemplo, definiremos la familia de fuente como “Arial, Helvetica, Sans-Serif”, un tamaño de fuente de 12px, el color de la misma en negro, definiremos el color de fondo de la página (blanco), margen y relleno en 0px, dejando el resto de las opciones sin definir.
Creación de una capa contenedora
Cuando nos encontramos en el inicio del diseño, uno de los primeros pasos que debemos dar es la definición de las características principales de la página. Una de estas características es el tipo de diseño que llevaremos adelante, si se trata de un diseño de ancho fijo, elástico o flotante.
Para el caso del ejemplo, crearemos una capa contenedora de ancho fijo, pero el procedimiento siguiente es similar para todos los casos, cambiando el tipo de unidades que se emplearán.
Como las características de la capa contenedora está definida en el archivo CSS, el primer paso es crear la regla CSS en el archivo, para lo cual deberemos emplear la opción “Crear nueva regla” que se encuentra en la parte inferior del cuadro “Estilos CSS”.
En el cuadro que muestra la imagen anterior, deberemos colocar el tipo de regla (id, class) y el nombre de la misma. Una vez que introducimos estos datos y hacemos clic en Aceptar, se abre un nuevo cuadro donde deberemos introducir los atributos de esta capa:
Para el caso del ejemplo, daremos un ancho de 800px, un color de fondo #eee, márgenes derecho e izquierdo “auto” (para que la capa se centre), un relleno (padding) de 10px y bordes derecho e izquierdo de 4px de ancho, sólido y de color #999.
Introducción de la capa contenedora en el archivo HTML
Una vez que hemos definido los atributos que tendrá la capa contenedora, solo resta introducir la misma dentro del archivo HTML y generar algún contenido de ejemplo, para que veamos como queda, que en el ejemplo que estamos desarrollando se trata de un texto.
La vista de la página quedará como se ve en la imagen inferior, y tras lo cual, podremos comenzar a definir la maquetación de la página y la inclusión de los elementos componentes de la misma, procedimientos que se describirán en un artículo posterior.
modificado el 14 marzo, 2018 20:17