comparte el articulo 

Creación de una página web desde cero con Adobe Dreamweaver CS4

Actualizado el 02/07/2010 < > 0 Comentarios

Resumen: En este artículo veremos como iniciar una nueva página web partiendo desde una página en blanco. Desde la configuración hasta los primeros pasos en el diseño.

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.

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.

Crear etiquetas de encabezado

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:

Crear etiqueta meta
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.

Crear vínculo

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”.

Nueva regla 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:

Crear nueva regla
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.

Vista del diseño

Publicado el 02/07/2010, última actualización 02/07/2010.

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras