VAMOS A CREAR UN MENU PARA NUESTRA PAGINA
Cuando necesitemos escribir las etiquetas directamente en el codigo html cambiemos del modo de Diseño a modo Código.
En el articulo anterior indicamos las propiedades de cada etiqueta de nuestra pagina, hoy vamos a crear un menu en el sidebar.
Abrimos el documento html con dreamweaver e identificamos donde se encuentra la etiqueta div de tipo ID llamado sidebar si estamos en el modo DISEÑO cambiamos hacia el modo CODIGO y lo veremos de la siguiente manera:
<div id="sidebar"> sidebar </div>
Vamos a escribir con nuestro teclado dentro de sidebar una etiqueta div que sea de tipo ID que se llame main-menu y dentro de esta etiqueta vamos a escribir el codigo de un menu como acontinuacion se los muestro. Procuren de que les quede alineado de esa manera , ayudará para entender mejor el codigo.
<div id="sidebar">
<div id="main-menu">
<ul>
<li><a href="#">inicio</a></li>
<li><a href="#">nosotros</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contacto</a></li>
</ul>
</div>
</div>
Cada enlace tiene un # en el atributo href="#" es porque aun no tenemos enlaces de esas subpaginas por el momento pero despues las tendremos. Ya que hemos hecho esto oprimen CTRL + S para guardar los cambios que hicimos y abrimos el archivo CSS para eso vamos a la esquina superior izquierda damos click en archivo luego abrir y buscamos nuestro archivo llamado estilos.css donde lo tenemos guardado, lo elegimos y abrimos, luego localizamos la etiqueta #sidebar y justo debajo escribimos las siguientes etiquetas, procuren mantener el orden:
#sidebar {
height: 300px;
width: 280px;
float: left;
background-color: #CCCCCC;
}
#main-menu {}
#main-menu ul {}
#main-menu ul li {}
#main-menu ul li a {}
#main-menu ul li a:hover {}
Una vez escribamos estas etiquetas vamos a guardar los cambios oprimiendo CTRL + S y regresamos al documento html
buscamos las etiquetas en el cuadro que esta a la derecha del programa (como en la imagen) y vamos a indicarle unas propiedades que a continuacion le voy a indicar.
Aqui es donde tenemos todas la etiquetas que del archivo css.
Para indicar las propiedades selecciona la etiqueta con doble click.
#main-menu
CUADRO= Ancho: 280 px (pixeles), Relleno superior: 5 px, Relleno inferior: 5 px.
#main-menu ul
CUADRO = Margen 0 px (en todo), Relleno: 0 px (en todo).
#main-menu ul li
LISTA= Tipo: ninguno.
#main-menu ul li a
TIPO= Tamaño: 18 px, Decoracion: ninguna, Color: #333333.
BLOQUE= Mostrar: Bloque.
CUADRO= Relleno superior: 8px, Relleno inferior: 8 px, Relleno izquierda: 20 px.
#main-menu ul li a:hover
TIPO= Color: #FFFFFF
FONDO= Color de fondo: #333333
Al finalizar oprimes el icono del mundito, eliges vista previa en Chrome y le indicas que si quieres guardar los cambios.
Esto seria todo por el momento si tienes dudas escribela en los comentarios, Gracias por tomarte tu tiempo de leer este articulo en el proximo colocaremos contenido en la pagina como una introduccion que seria una imagen y algo de texto.
Siguenos en la pagina de facebook para estar al tanto de las novedades.
Escribir comentario