Vamos a hacerlo lo más sencillo posible, con una cabecera, un menú lateral de navegación y el resto para contenido.
Agregamos a nuestro proyecto una carpeta que llamaremos "css", y en esa carpeta agregaremos un nuevo item "hoja de estilo" que llamaremos web.css.
En el archivo nuevamente creado, vamos a crear primero la sección de la cabecera. Para ello, agregaremos otra carpeta, llamada "img" en la raíz del proyecto, y en esa carpeta agregamos el siguiente archivo:
Primero definimos la sección body, que es la que nos define toda la página
body
{
margin: 0;
padding: 0;
background: #fff;
font-family: Arial,Verdana;
}
Sencillo: 0 de márgen y relleno. Blanco como color de fondo, y la familia de fuentes, Arial, o si no existe verdana.
Listo. Seguimos con la sección headercontent, que va a ser la que nos de formato a nuestra cabecera:
#headercontent
{
border-style: solid;
width: 100%;
height: 70px;
margin: 0;
border-color: #333;
border-width: 0 0 1px 0;
background-image: url('../img/logo.PNG');
background-repeat: no-repeat;
background-position: right center;
}
Bien. Nótese que cuando vamos a utilizar un estilo CSS y queremos que identifique al elemento que lo lleve por el nombre, tenemos que anticipar el nombre de la sección con un "#" Lo que estamos haciendo es darle un formato general a la cabecera, va a tener un ancho del 100%, alto de70 píxeles, sin margen, un borde inferior de 1 pixel y de un color gris oscuro, y va a tener la imagen sin repetir a la derecha y centrado.
Luego, creamos la sección que va a tener el menú, en el lateral izquierdo.
#leftcontent
{
float: left;
width: 20%;
padding: 20px;
}
Este es más fácil, lo único que le decimos es que ocupa el 20% que flota a la izquierda (es decir que se pone en primer lugar a la izquierda) y le dejamos un relleno (padding) de 20 píxeles.
Algo parecido es el contenedor que va a tener nuestro contenido principal:
#rightcontent
{
width: 75%;
float: right;
color: #000;
padding: 5px;
}
Casi lo mismo que el otro, con una aclaración extra que es el color de la letra, que va a ser negro (#000).
Bien. Podemos seguir.
Ahora volvemos a editar la página maestra, para que incluya los estilos que creamos
Bien, lo primero que hay que ver es que agregamos el link al archivo CSS que acabamos de crear. esto lo hacemos con la siguiente línea:
Pasamos a la vista diseño, y arrastramos, desde la pestaña de navegación un control Treeview, al que le vamos a hacer click en el triangulito que tiene en la parte superior derecha, y del menú desplegable vamos a elegir el origen de datos y seleccionamos "" como se ve en la figura:
Nos aparece entonces el siguiente diálogo:
Seleccionamos "Mapa del sitio", presionamos aceptar y ¡Listo! ya tenemos la estructura del sitio lista para arrancar con seguridad.
El sitio nos queda entonces así:
El sitio nos queda entonces así:
Mañana continuamos con la configuración de seguridad.
