Introducción. Propiedades de la página.

Editar página con Dreamweaver

Se muestran las alternativas que se tienen a la hora de crear páginas web en Dreamweaver y cómo
establecer las propiedades principales de la página. Se destacan las diferencias entre trabajar con
una aplicación de este tipo y hacerlo a mano, escribiendo todo el código HTML y CSS. En esta
lección se estudian:
Diseño de páginas web.
Introducción.
Propiedades de la página.
Editar página con Dreamweaver.

1. CREAR PÁGINAS WEB

Bueno, pues ¡manos a la obra! Crear una página web en Dreamweaver se puede hacer de varias
formas. Por ejemplo, podemos utilizar el enlace que aparece en la sección Crear nuevo de la
ventana de bienvenida o hacerlo a través del menú Archivo.
Despliega el menú Archivo y elige Nuevo.
Aparece un cuadro de diálogo en el que indicamos exactamente (ya que tenemos bastantes
posibilidades) qué tipo de documento queremos crear.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Podemos crear páginas web, plantillas, etc. Si se trata de una página web estática, elegiremos el
tipo HTML, que es el que está seleccionado por defecto. Además, podemos partir de cero o
elegir un determinado diseño.
Pulsa en el apartado Plantillas de inicio de la izquierda.
Los diseños básicos han sido confeccionados por expertos en la materia y establecen los diseños
de maquetación más habituales en las páginas web.

Por ejemplo, si queremos una distribución compuesta por un encabezado en la parte superior de
la página, el contenido dividido en varias columnas y un pie de página, seguramente podríamos
partir del diseño cuadrícula simple y personalizarlo después.
Vuelve a la sección Nuevo documento de la izquierda.
Por ahora vamos a crear nuestros propios diseños, así que elegiremos el marco NINGUNO en la
parte derecha de la ventana.
Además, debemos establecer un par de detalles acerca de la página web que se creará en
Dreamweaver.
Estos detalles son el tipo de documento (doctype) y cómo queremos que se relacione el archivo
.html con la hoja de estilo en cascada o archivo .css.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Despliega la lista Tipo de documento.

Aquí elegiremos el tipo de documento o doctype adecuado. En función de la elección realizada,
tendremos que cumplir una sintaxis más o menos restringida.
Así, por ejemplo, eligiendo un doctype XHTML deberemos escribir en minúscula todas las
etiquetas de código, incluir entre comillas dobles el valor de los atributos, cerrar todas las
etiquetas, etc. Es decir, utilizar una sintaxis más restrictiva que si empleamos un doctype de tipo
HTML.
Elegiremos el tipo de documento HTML5, que es la versión más utilizada hoy en día. Con ello,
se utiliza sintaxis HTML y el formato debe realizarse siempre mediante CSS
Elige HTML5
Por su parte, podemos establecer las reglas CSS en la sección de cabecera del documento HTML
o en un archivo externo, que es la mejor solución.
En el caso de que ya tengas la hoja de estilos CSS creada, podrás indicarlo en el apartado
Adjuntar CSS.
Pulsa en el botón Preferencias.
Puedes establecer otros detalles para el nuevo documento a través de este cuadro de diálogo.
Recuerda que en este caso se establecerá solo para el documento que estás creando, ya que si
quieres cambiar las preferencias de forma general, no debe haber ningún documento en marcha.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Por ejemplo, podríamos indicar la codificación que queremos utilizar. Normalmente, la

codificación Unicode (UTF-8) es adecuada.
Cierra el cuadro de diálogo de preferencias.
Pulsa en el botón Crear.
Ahora ya podemos trabajar en la ventana del documento y con todas las barras y paneles de
Dreamweaver para diseñar la página web.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

2. PROPIEDADES DE LA PÁGINA WEB

Una vez creada la página web, es útil acudir al cuadro de diálogo Propiedades de la página para
establecer algunas de sus características de forma general.
Pulsa en el botón Propiedades de la página del inspector de propiedades.

Otra forma de acceder a este cuadro de diálogo es mediante el comando Propiedades

de la página del menú Archivo.

Como puedes comprobar, en este cuadro de diálogo se distingue entre apariencia CSS y
apariencia HTML. Sabemos que lo más adecuado es utilizar siempre CSS para el formato o
apariencia de la página web.

Así pues, en la categoría Apariencia CSS estableceremos algunas propiedades CSS referentes a
la apariencia o formato global de la página. Estas propiedades se incrustarán en la sección head
del documento .html, aunque posteriormente podremos mover esas reglas a una hoja externa.
Fíjate qué propiedades tenemos disponibles aquí. A diferencia de escribir la hoja de estilo "a
mano", aquí simplemente establecemos las propiedades más importantes de una forma visual.
Despliega la lista Fuente de página.
Elige el conjunto de fuentes Gotham, Helvetica Neue, Helvetica, Arial, sans-serif.
Haz clic en el campo Tamaño y escribe 1.2.
Elige las unidades em.
Pulsa en el selector Color del texto .

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

De esta forma es más sencillo elegir el color deseado, ya que simplemente tenemos que
seleccionarlo en la paleta de colores y modificarlo adecuadamente.

En la parte inferior del selector de colores podremos indicar la codificación exacta del color si la
conocemos. Por defecto se utiliza la codificación RGB, aunque para especificar colores en las
hojas de estilo en cascada se suele utilizar el modelo HSL.
Ambos modelos de color admiten un componente alfa o de transparencia.

Pulsa .

Haz clic en el campo de texto situado al lado de este selector de color.

Podemos escribir aquí el color si lo conocemos.
Escribe el color #336699.
Haz clic en el campo de texto correspondiente al color del fondo de la página y escribe
#dcdcdc.
También se puede establecer una imagen como fondo de la página web. La imagen se repetirá, por
defecto, para ocupar todo el fondo de la misma.
Despliega la lista Repetir.
Si no deseas que sea así, aquí puedes indicar cómo debe hacerlo.
Por ejemplo, si utilizas la imagen para resaltar una franja de la página (como ocurre al crear una
barra lateral), seguramente te interesará que solo se repita verticalmente. En este caso, elegirás la
opción repeat-y.

Repliega la lista con .

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

En el apartado de márgenes establecerás los valores apropiados. Si deseas que se ajuste a la

superficie disponible en la ventana del navegador, establece un valor de 0.
Establece el valor 0 para los cuatro márgenes de la página. Hazlo en este orden: izquierdo,
derecho, top e inferior.
Pulsa en el botón Aplicar.
Vemos que el fondo de la página ya presenta el color establecido.
Selecciona la categoría Apariencia HTML.
Aquí podríamos establecer prácticamente las mismas propiedades de la página pero a través de los
atributos HTML. Sabemos que es mejor hacerlo mediante CSS, por lo que no utilizaremos esta
sección.
Selecciona la categoría Vínculos CSS.
Aquí se establecen las propiedades de los hipervínculos. Así pues, podremos establecer el tipo de
letra, tamaño, decoración (o estilo de subrayado), etc.

Haz clic en el campo de texto Color de vínculo.

Escribe #3366cc.
Despliega la lista Estilo subrayado.
Elige Nunca subrayar.
Esta opción establecerá la propiedad text-decoration para la regla de los hipervínculos en la hoja
de estilo.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Pulsa en Aplicar.
Selecciona la categoría Encabezados (CSS).
Aquí podrás establecer las características del texto que actúa como encabezado h1, h2... h6.
Puedes elegir el tamaño y color.
Selecciona la categoría Título/Codificación.
Aquí podrás establecer el título de la página web.
Haz doble clic en el texto Documento sin título.
Escribe: Conocer los Estados Unidos - Ciudades, gastronomía, atracciones, costumbres
En este mismo apartado podrías cambiar el tipo de documento y la codificación de la página web.
Finalmente, muestra la sección Imagen de rastreo.
En muchas ocasiones el diseño preliminar de la página web se realiza como una imagen que
después se utiliza en Dreamweaver para diseñarla como página web.
Si se dispone de dicha imagen, conocida como imagen de rastreo, se puede indicar aquí e
incluso establecer su transparencia para que sea cómodo trabajar con la imagen de fondo mientras
se añaden los elementos en la superficie de la página.
Es habitual que sea un diseñador de imágenes el que realice dicho boceto y un diseñador web el
que lo utilice para crear la página web. En este caso, la imagen de rastreo puede ser muy útil a la
hora de trabajar en Dreamweaver.
Pulsa en el botón Aceptar.
Fíjate que se ha actualizado el título de la página. Podrías haberlo hecho también en este campo
del inspector de propiedades.

El nombre de la página principal o frontpage de un sitio web es muy importante.

Normalmente este nombre debe ser index.html.
Esto se debe a que index.html o index.htm es el nombre que suele utilizar la mayoría de
servidores web para el documento principal de un sitio web.
El documento principal es aquel que el servidor proporcionará cuando no se establezca
explícitamente en la URL solicitada. Por ejemplo, si escribes en la barra del navegador la
dirección www.empresa.com sin especificar ninguna página en concreto, entonces el
servidor web correspondiente facilitará la página predeterminada de este sitio. En este caso,
sería equivalente a haber escrito la URL completa wwww.empresa.com/index.html.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

El documento principal o predeterminado de un servidor se establece en su configuración.

Así, otros nombres típicos son main.html o default.html.
Si no estás seguro de qué nombre utilizar para la página principal del sitio web, pregúntaselo
a la persona que administra el servidor web.

Guardaremos la página con estos cambios.

Elige Guardar como en el menú Archivo.
Escribe index.html y pulsa en Guardar.
Vamos a ver dónde están las propiedades que hemos establecido.
Pulsa en el botón Código.
Aquí vemos que las propiedades establecidas mediante el cuadro de diálogo se han convertido en
una hoja de estilo interna, ya que las reglas aparecen en la sección head de la página.

Dreamweaver lo hará así si establecemos estas propiedades mediante el cuadro de diálogo

Propiedades de la página.
Normalmente preferiremos utilizar hojas externas, por lo que nos facilita la tarea de mover las
reglas.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Despliega el menú Archivo y elige Nuevo.

Selecciona CSS en Tipo de documento.
Pulsa en Crear.
Elige Guardar como en el menú Archivo.
Pulsa en el botón Nueva carpeta.

Escribe css y acepta con .

Pulsa en el botón Abrir.

Escribe estilo.css en el campo Nombre.
Pulsa en Guardar.
Vuelve a la página index.html.
Debemos seleccionar las reglas que deseamos mover a la hoja externa.
Haz clic al principio de la línea 7.
Haz clic en el hueco inferior de la barra de desplazamiento vertical.

Manteniendo pulsada la tecla , haz clic al final de la línea 30.

Una vez seleccionadas las reglas, las moveremos a la hoja externa.

Haz clic con el botón derecho del ratón en cualquier parte de esta selección.
Elige Selección - Mover reglas CSS.
Pulsa en el botón Examinar.
Haz doble clic en la carpeta css.
Selecciona estilo.css y pulsa en Aceptar.
Pulsa de nuevo en Aceptar.
Fíjate que se han eliminado las reglas de la sección head y, a cambio, se ha establecido el enlace
con la hoja externa mediante la etiqueta <link> de la línea 8.
Selecciona las líneas 6 y 7 y elimínalas porque ya no hacen falta.
Muestra estilo.css.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Aquí están las reglas que hemos establecido visualmente, mediante el cuadro de diálogo de las
propiedades de la página.
Elige Guardar todo en el menú Archivo.
Con el comando Guardar todo se guardan todos los archivos abiertos que han sido modificados.

Las propiedades CSS que aparecen en el cuadro Propiedades de la página son de

carácter general. Podremos establecer muchas más a medida que trabajemos con los
elementos de la página web.

Vemos que trabajando en Dreamweaver ya no es necesario recordar el nombre de las propiedades

CSS y además es más fácil establecer los valores adecuados de esas propiedades.
El trabajo de forma visual mediante Dreamweaver es más cómodo aunque siempre podemos
volver al código y afinarlo si así lo necesitamos o si simplemente nos gusta más trabajar de esta
otra forma.
Se debe crear un sitio web en Dreamweaver para establecer la ubicación donde se almacenarán
los archivos que constituyen las páginas web.
Se puede crear un sitio web desde cero en Dreamweaver o a partir de uno existente.

Es conveniente que las imágenes se almacenen en una carpeta específica para que sea más fácil
modificarlas o buscarlas, si lo necesitamos.
En el panel Archivos encontraremos todos los archivos del sitio web.

En el panel Activos se muestran los recursos del sitio web: imágenes, combinaciones de
colores, etc.
Para crear páginas web, elige el comando Nuevo en el menú Archivo y selecciona el tipo de
documento que quieres crear, por ejemplo, un documento HTML.
Podrás elegir entre empezar de cero o utilizar uno de los diseños de Dreamweaver para después
personalizarlo.
También tendrás que indicar el tipo de documento o doctype así como la ubicación de las
reglas CSS.

Copyright © Computer Aided Elearning, S.A.

 Introducción. Propiedades de la página. Editar página con Dreamweaver

Una vez creada la página web, es útil acudir al cuadro de diálogo Propiedades de la página
para establecer algunas características de la misma de forma general.

Copyright © Computer Aided Elearning, S.A.