Crear Web - Capitulo 2

En este segundo capitulo vamos a darle formato a la plantilla con la creacion de un menú (en principio sera una lista con enlaces), un titulo, un subtitulo, un cuerpo para el texto principal y un pie.

Después vamos a crear estilos para todos estos elementos en nuestra hoja de estilos CSS.

Pasos:

1. Crear los archivos a los que van a enlazar los elementos del menú 

Por ejemplo: Home, Biografia, Articulos1, Articulos2, Contacto, Webmap.
(Boton derecho en la carpeta en la que queremos crear los archivos + Nuevo archivo)

2. Crear la lista-menu y poner los enlaces de cada elemento de la lista a al archivo correspondiente de los que acabamos de crear

Seleccionando el texto que queremos que sea un enlace y arrastrando el archivo al que queremos que enlace a la propiedad "Vinculo".

3. Crear H1, H2, Cuerpo, Pie

Para ello pondremos una palabra de texto para cada elemento y luego la seleccionaremos y con el boton derecho la definiremos como una nueva region editable y le daremos el nombre que queramos.

4. Crear los estilos para cada uno de los elementos anteriores

Si sabes un poco de CSS o de programacion puedes llevar a cabo los pasos siguientes:

• Pinchamos en el icono "Nuevo estilo CSS" en la pestaña "Diseño" (en la columna derecha)

• Seleccionamos "Redefinir etiqueta HTML" para "body", "h1", "h2" y "h3" y para el resto seleccionamos "Crear estilo personalizado" y le asignamos el nombre que queramos (le puedes dar los mismos nombres que ves en esta pagina que yo les he dado)

• Seleccionamos las caracteristicas para cada uno (o, si no entiendes bien como se hace esto, puedes simplemente copiar y pegar el codigo que esta a continuacion en naranja en la hoja de estilos y mas adelante preocuparte de como funciona)

• Para el body asignaremos

body {

padding-left: 180px;
font-family: Arial, Helvetica, Geneva, sans-serif;
color: black;
background-color: #FFFFFF;
line-height: 1.6em;
font-size: 1em;

}

• Para la lista-menu

ul.navbar {

list-style-type: none;

position: absolute;

top: 5em;

left: 5px;

width: 166px;

background-color: #FFFFFF;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 0.9em;

}

ul.navbar li {

background: #FFFFFF;

color: #000099;

margin: 0.5em 0;

padding: 0.3em;

border-left: 1em solid #000099;

border-top-width: 1px;

border-bottom-width: 1px;

border-top-style: solid;

border-bottom-style: solid;

border-top-color: #000099;

border-bottom-color: #000099;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000099;

}

ul.navbar a {

text-decoration: none

}

                             (Para que los links del menú no esten subrayados ni en azul)

• Para H1, H2, pie

h1 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000099;
font-size: 2.5em;

}

h2 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FF6600;
font-size: 1.5em;

}

h3 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000099;
font-size: 1.2em;

}

.pie {

font-size: 0.8em;

}

• Y la lista, que es primer elemento del body, la definiremos como:

• Home
• Biografia
• …………………..

Crear Web - Capitulo 1

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.