1. Web->kompozer->Mini-guia de Kompozer.

Lo siento, aun no "arreglo" para que las letras e imagenes no se salgan del área dende deben
estar. Sorry, pero ya casi
La idea de este tutorial es crear una estructura básica de una página web y un menu con
rollover a través de CSS en Kompozer (similar al menu de la izquierda)

Primera Parte [Maquetando un sitio básico con Kompozer]

Las tablas Ya de no deben usarse para el diseño Web, pues no cumplen con los estándares
de la W3C
Un "poquito" de teoria antes de empezar:
<SPAN> sirve para aplicarle estilo a una pequeña parte de una página HTML. Por ejemplo,
con ella podríamos hacer que una parte de un párrafo se coloree en rojo. Con <SPAN>
no es habitual englobar un trozo muy grande de texto, por ejemplo el que comprenda a varios párrafos.
Con <DIV> también podemos aplicar estilo a partes de la página HTML.
La diferencia entre <SPAN> y <DIV> es que con esta última si que podemos aplicar estilo a una
parte más amplia de la página, por ejemplo a tres párrafos. Además que la etiqueta <DIV> tiene
un uso adicional que es el de crear divisiones en la página a las que podremos aplicar una
cantidad adicional de atributos para modificar sus comportamientos. Por ejemplo, con
el atributo align de HTML podemos alinear la división al centro, izquierda, derecha o
justificada. Pero su uso más destacado es el de convertir esa división en una capa.
Una capa es una división, una parte de la página, que tiene un comportamiento muy
independiente dentro de la ventana del navegador, ya que la podemos colocar en cualquier
parte de la misma y la podremos mover por ella independientemente, por poner dos ejemplos.
En el uso de capas se
basan muchos de los efectos más comunes del DHTML.
Las etiquetas <LAYER> e <ILAYER> tienen como objetivo construir capas, pero estas no son compatibles más que con Netscape, por lo que es recomendable utilizar la etiqueta <DIV> para
hacer capas preferentemente a las otras dos. bueno pues si eso era "chino" iniciemos ya: bueno antes... te recomiendo que estes familiarizado con el Modelo de Caja para saber porque se crean estos Divs.
Abre Kompozer y CREA LOS DIV´s DESPUES DE LA ETIQUETA < BODY>
El resultado de este código es el siguiente :

Debes Guardar el Documento Antes de Aplicar Reglas de Estilo CSS En el cuadro de dialogo
Hojas de estilo CSS Seleccione crear Nueva Regla (Numero 1 de la figura) Seleccione en crear
nuevo “style applied to an element with specified ID attribute” (Numero 2 de la figura) Y elija
el DIV, en este caso: #contenedor Y haga clic sobre Crear Regla de estilo.
Este proceso mostrara en la parte izquierda del cuadro de dialogo, la regla creada.
La Ficha General, muestra el código de la regla de estilo. Dale clic a la ficha Texto y
seleccionaremos los datos de formato para el texto general de la pagina. Tipo de letra:
Predefinido. Arial, Helvatica, sans-serif. Tamaño: 12px Color: Al gusto. Dale clic a la ficha Fondo
y seleccione un color de fondo para la capa contenedora (generalmente este fondo lo ocultan
las demás capas) Haga Clic sobre Aceptar.

Repita el procedimiento para la capa #encabezado (clic sobre el icono cascada, Cree una nueva
regla para #encabezado. En la ficha Texto, haga los cambios que considere; en la ficha Fondo
aplique los cambios de la figura Siguiente) Clic sobre Aceptar

Hasta hoy, la apariencia de la página debe ser como la de esta figura.

Cree una hoja de estilo en cascada – CSS para cada una de las siguientes capas Aplicando las propiedades de la siguiente tabla

Capa	Grupo / Ficha	Priedad	Valor	Comentario
Menú	Texto	Tipo de letra	Predefinido / Arial, Helvatica, Sans serif	Especifica el tipo de letra
		Tamaño de letra	12px	Tamaño de la fuente
		Color	Cualquier color
	Fondo	Color	Cualquier Color	Color de fondo de la capa menú
	Caja	Flotar	Izquierda	Hace que la capa del menú se ubique de manera automática a la izquierda de la página.
		Anchura	150px
		Altura	600px
Contenido	Aplicar fondo y estilo de letra fondo
	Caja	Altura	600px	Alto de la capa contenido
		Márgenes  Internos Derecha, izquierda	10px	Para colocar Margen al interior de la capa y evitar que el contenido quede muy pegado a los bordes.
Pie	Caja	Altura / Anchura	30px   /   750px	El tamaño de la capa
	Texto	Alineación	Centrada	Es la ubicación del texto, Debe también aplicar fondo de capa y color de letra.

Cuando finalice debe verse la página como la siguiente Imagen.

de los colores ni hablemos... eso es creatividad de ustedes.. jejeje

Segunda Parte [Creando un menu con rollover en Kompozer]

En la capa Menu escribe los links. Estos vínculos, primero escribe las palabras que servirán como etiquetas, únicamente separadas con un espacio (no des Enter) y luego con el icono vinculo haz el enlace a la pagina Web o archivo deseado. Te quedara como la imagen siguiente.
Ahora le aplicaremos estilo a esos menús y crearon un efecto de
rollover (que la apariencia del
menú cambia al ubicar el Mouse sobre el enlace.
Crearemos una hoja de estilo nueva para la capa #menu pero le indicaremos que esa regla
aplicara únicamente a los enlaces dentro de ella, así es que le agregaremos la etique que sirve
para crear los hipervínculos, que es a. Así es que la hoja de estilo se llamara #menu a Observa la siguiente figura.

Aplícale las siguientes propiedades
Texto: Tipo de letra: Predefinido;  Tamaño de Letra: 12px;   Color: Al gusto;  Decoraciones
de texto: Ninguno – (Esto para evitar que los vínculos aparezcan subrayados)    SELECCIONA UN COLOR DE FONDO (que haga contraste con el color de la letra)
Bordes: Estilo Superior: Solido;   Anchura: 1px;
Caja: Mostrar: Bloque;  

 

Ahora crea una nueva hoja de estilo llamada #menu a:hover con los mismos atributos que la anterior, y únicamente intercambia los colores del texto y del fondo. Esto es para la apariencia que tendrá al ubicar el ratón sobre uno de los enlaces

Muestra del menú aplicándole el estilo con CSS


Pruébalo en el navegador
por: Enrique Reyes



Dejanos tu comentario aqui, si estas logueado en facebook y lo decides, estos comentarios
tambien podran ser vistos en tu perfil, sino haz iniciado sesión o no tienes cuenta,
entonces escribe tu nombre, correo electrónico y los caracteres de verificación.