1. Crear Sitio
Un Sitio se refiere a una carpeta en nuestro ordenador donde vamos a tener todos los archivos que van a formar parte de nuestra web. Esto incluye los documentos html (cada una de las paginas de la web), las imagenes, las fotos, las plantillas, lsa hojas de estilo, etc.
En el Dreamweaver vamos a el boton superior llamado "
Sitio" (a la altura de los botones de "
Archivo", "
Edicion", etc.) y pinchamos en "
Nuevo Sitio". Lo unico que es necesario rellenar por el momento es el nombre del sitio y la carpeta en la que va a estar localizado en nuestro ordenador. El resto de informacion nos la proporcionara nuestro servicio de hosting cuando lo contratemos y hasta entonces no sera necesaria.
Si tienes un servidor de prueba, que puede ser tu propio ordenador si le instalas Apache, puedes rellenar la informacion sobre el servidor de prueba. Pero puedes ver como quedara la pagina que estas creando en "
Archivo --› Vista previa en el Navegador".
2. Crear hoja de estilos CSS
En el apartado CSS se explica que son y para que sirven las hojas de estilo CSS. Aqui vamos a aprender a utilizarlas.
Lo primero es crear una carpeta dentro de nuestro sitio que, por convencion, la vamos a llamar "assets". No es necesario que tenga este nombre y ni siquiera es necesario que las hojas de estilos esten dentro de una carpeta, pero va a ser mejor con vistas a la organizacion.
Dentro de esta carpeta creamos un archivo CSS: "
Archivo --› Nuevo --› (en la pestaña General) Pagina basica --› CSS". Y lo guardamos con el nombre que queramos. Este es un archivo en blanco , solo con un comnetario de que va a ser una hoja de estilos, y con la extension .css
3. Crear plantilla
Creamos una carpeta que la llamamos templates (lo mismo que antes, por convencion) y dentro de esta vamos a crear una plantilla: "
Archivo --› Nuevo --› (en la pestaña General) Pagina de plantilla --› Plantilla HTML ". Y la guardamos con el nombre que queramos.
La plantilla va a ser la estructura en la que se basen todas nuestras paginas de la web (aunque podemos tener varias plantillas para varios apartados). Y la ventaja es que cuando cambiemos algo en la plantilla este cambio se va a producir en todos los archivos que esten basados en dicha plantilla. Lo que facilita en gran medida la actualizacion de la web.
4. Enlazar la plantilla a la hoja de estilos
Ahora tenemos que enlazar la plantilla a la hoja de estilos CSS para que esta ultima de formato a la plantilla y por extension a todos los archivos de la web que se basen en dicha plantilla.
Esto lo hacemos en la pestaña Diseño de la columna vertical de la derecha. (La misma que tiene las pestañas Aplicacion, Codigo, Archivos y Respuestas). Si pinchamos en la pestaña Diseño se abrira, si estaba cerrada, y en la parte inferior derecha vemos varios iconos. Con el documento plantilla abierto (en el area central del Dreamweaver) pinchamos en el icono de mas a la izquierda: "
Adjuntar hoja de estilos". Y adjuntamos el unico archivo de plantilla que por ahora tenemos, con las opciones "
Vincular" y "
Solo a este documento".
Esto introducira en la cabecera (head) de la plantilla una linea de codigo similar a:
link href="estilos.css" rel="stylesheet" type="text/css"
Ahora guardamos la plantilla y en el siguiente punto veremos como utilizarla de base para un archivo.
5. Crear index
Creamos un archivo: "
Archivo --› Nuevo --› Pagina basica" y lo guardamos como index.htm (o .html, es lo mismo) en el nivel mas alto de nuestro sitio. (El nivel mas alto o raiz (root) es el que no esta dentro de ninguna otra carpeta).
Para que el index este basado en la plantilla (podria no estarlo, pero yo recomedaria que si), con el archivoabrimos en la columa de la derecha la pestaña "
Archivos". Dentro de esta hay dos pestañas: "
Sitio", donde vemos todos los elementos que estan dentro de nuestro sitio, y "
Activos". Pinchamos en "
Activos" y luego, de entre los iconos de la izquierda, pinchamos en "Plantillas". Aparecera la unica plantilla que tenemos. Pinchamos en ella y la arrastramos a la pantalla central, sobre la vista de diseño (en la que no se ve el codigo). Si no sabes cuales son las vistas de codigo y diseño del Dreamweaver mira en la ayuda.
Y guardamos el documento.
Ahora el index estara basado en la plantilla y enlazado a la hoja de estilos. Por lo que cualquier cambio que realicemos en cualquiera de estas se reflejara en el index. Lo mismo se haria para cualquier otro archivo.
