Dreamwaver CS5 (I)

Dreamwaver es un editor de páginas web creado por la empresa Adobe que permite la creación de sitios web tanto tecleando código html como de forma visual, con lo que también es un editor WYSIWYG. La versión con la que hemos trabajado en el curso es la CS5, y Dreamwaver no es un software libre.

A rasgos generales, lo mejor de Dreamwaver es la posibilidad de crear plantillas para un sitio web, de forma que si necesitamos hacer algún cambio en un sitio web a medio desarrollar, con solo modificar la plantilla y guardar los cambios, Dreamwaver modifica automáticamente todas las páginas de nuestro sitio web creadas anteriormente, en lugar de tener que ir aplicando los cambios manualmente en cada una de las páginas. Esto se hace creando una Página de plantilla desde la pantalla inicial de Dreamweaver, en Crear nuevo, Más..., Página de plantilla, y es posible tener varias plantillas para un mismo sitio web.

Al crear un nuevo sitio web, debemos indicar a Dreamwaver en que carpeta de nuestro disco duro vamos a alojar sus ficheros, creando así un "Sitio de Dreamwaver". Podemos administrar varios sitios web en el panel "Archivos" de la parte inferior derecha. Después creamos la Página de plantilla para nuestro sitio y, añadiendo los elementos html necesarios, se guarda la plantilla.

En la plantilla se deben definir las zonas editables que serán las partes del contenido de las distintas páginas de nuestro sitio web, las cuales se irán completando posteriormente, y las zonas no editables de la plantilla quedarán "protegidas" para que no se puedan modificar por error; estas partes "protegidas" de la plantilla serán donde se están las capas div de las cabeceras y/o columnas de la estructura de dicha plantilla de nuestro sitio, cuyas características serán definidas en la hoja de estilo css.

Enlazo aquí este otro "Curso de Creación Web" que parece estar orientado a Dreamwaver, pues describe las áreas de trabajo del programa, barras, paneles, y ofrece ejercicios y demás.

Capas 'DIV' y uso de 'SPAN'

Una capa es un contenedor donde se pueden meter elementos html (textos, imágenes, listas, tablas...) y, más capas. Se emplean también mucho para las plantillas html o la maquetación o distribución web.

La forma de "invocar" una capa desde un documento HTML es:

<div>
contenido y elementos html y/o más capas
</div>

Y es posible definir reglas de estilo CSS para los elementos del contenido que irán dentro de una capa determinada, que luego se invocará desde el documento HTML de la siguiente forma:

<div class="nombre_capa_en_css">
contenido y elementos html y/o más capas
</div>

Y para "definir" (declarar o crear) una capa en el documento CSS, se procede de la misma manera que para crear una clase dentro del CSS:

.nombre_capa_en_css{
propiead1: valor1;
propiead2: valor2;
propiead3: valor3;
}

Por ejemplo, una capa típica es una que abarca todo el contenido del documento html, la capa contenedor:

.contenedor{
width: 880px; /* 880 píxeles de ancho para la capa */
height: 100%; /* la altura será el 100% de lo alto de todo el documento */
margin: auto; /* margen externo automático */
}

Comentarios HTML

En el código anterior, los textos que van entre las cadenas de caracteres "/*" y "*/" son comentarios de 'control' para el Webmaster, o sea, no tienen ningún efecto en el "comportamiento" del documento a la hora visualizarlo en un navegador web.

Ya de paso, los comentarios en el documento HTML se ponen entre los caracteres <!-- y -->.

Ejemplo de capas:

Capa 1

Contenido de la capa 1

Capa 2

Contenido de la capa 2

Capa 3

Contenido de la capa 3

Más contenido de la capa 1

Las capas de este ejemplo están definidas en el fichero CSS de este blog con sus colores de fondo, para que muestren los bordes de color negro, y un margen externo de 5 píxeles (width: 5px;)

Algunos enlaces sobre uso de capas, estructura y maquetación HTML, o maquetación web:

• Introducción al uso de capas con CSS y XHTML / HTML
• Maquetación de páginas web: posición de las capas
• Estructura y maquetación de una página Web con capas y CSS

---

Uso de la etiqueta SPAN

La etiqueta <span> se usa para aplicar un estilo diferente a un determinado texto de, por ejemplo, un parrafo:

• En el fichero CSS
  .rojo {
  color: red;
  font-weight: bold;
  }
• En el fichero html
  <p>No bebas <span class="rojo">lejía</span> que es perjudicial para la salud.</p>

Al visualizarlo en el navegador:

No bebas lejía que es perjudicial para la salud.

Por otro lado, si queremos que todos los span se muestren de la misma forma -en negrita y de color rojo de color rojo- dentro del documento html, se puede definir una regla para span dentro del fichero CSS:

span {
color: red;
font-weight: bold;
}

IMPORTANTE Observar en este ejemplo, el selector la declaración de la regla "span" no lleva delante el caracter "."

1.3.7 Consistencia en el diseño: Plantillas

Una plantilla es una página pre-desarrollada para crear más páginas con el mismo patrón, diseño o estilo.

Son elementos del lenguaje HTML, que permiten definir y guardar características concretas para la presentación de textos y contenidos en la pantalla, que pueden aplicarse en cualquier parte del documento. Todo esto se verá en las próximas entradas de este blog.