comparte el articulo 

Crear una nueva página web en Dreamweaver

Actualizado el 22/03/2010 < > 2 Cometarios

Resumen: Formas de crear un nuevo documento HTML o XHTML con Adobe Dreamweaver, además de algunas correcciones en caso de que se esté creando un documento en modo local.

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.

Ventana de inicio de Adobe Dreamweaver

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:

  1. La primera y la más sencilla, es hacer click en el botón HTML que aparece en la ventana de inicio rápido.
  2. La segunda, que puede llevar varios pasos, es hacer click en “Archivo /  Nuevo…”
  3. 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.

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

1.      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:

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:

  1. Guardar el archivo CSS en el mismo directorio que el archivo HTML.
  2. 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).
  3. 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.

Publicado el 22/03/2010, última actualización 22/03/2010.

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

Autor: Andrés Fernández

URL: LaWebera.es :: Diseño Web

Añadir Comentario (Subir al texto)

2 Cometarios

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

    […] 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 […]

    Miércoles, 31 de marzo 2010

  2. Maquetación de páginas web: posición de las capas (primera parte)

    […] los ejemplos que veremos, crearemos un documento XHTML 1.1, escribiendo el siguiente […]

    Miércoles, 21 de abril 2010

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras