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
• …………………..