Presentacion de Dreamweaver-2

Creacin de una pgina usando CSS
CSS
Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web Cuando se utiliza CSS para formatear una pgina se separa el contenido de la presentacin El contenido de una pgina (el cdigo HTML) reside en el archivo HTML
Las reglas CSS que definen la presentacin del cdigo residen en otro archivo (una hoja de estilo externa) O bien en otra parte del documento HTML (normalmente en la seccin <head>)
Los estilos CSS aportan gran flexibilidad y control sobre el aspecto exacto que se busca en una pgina, desde la colocacin precisa de elementos hasta el diseo de fuentes y estilos concretos.
H1 { font-size: 16 pxeles; font-family: Helvetica; font-weight: bold; }

H1 es el selector { } lo que est entre las llaves es la declaracin
La declaracin consta de dos partes:

La
propiedad, por ejemplo: font-family El valor, por ejemplo Helvetica
Se pueden aplicar varios estilos al mismo elemento o pgina Web, en cascada
Una regla de formato CSS consta de dos partes:

Selector, es un trmino (P, H1, nombre de una clase, ID, etc.) Declaracin, definicin de los elementos del estilo
H1 { font-size: 16 pxeles; font-family: Helvetica; font-weight: bold; }
Las reglas CSS pueden residir en:

CSS
externas, son conjuntos de reglas CSS almacenados en un archivo .css, vinculadas a las pginas Web en la seccin head del documento. Las hojas de estilos CSS internas (o incrustadas) son grupos de reglas CSS incluidos en una etiqueta style en la seccin head de un documento HTML
<head> <style>
p{
font-size:80px
}
</style> </head>
Pgina Web estructurada con CSS
Los diseos basados en CSS suelen utilizar etiquetas <div> en lugar de <table> (tablas) para crear los bloques CSS utilizados para el diseo Se pueden colocar estos bloques CSS en cualquier lugar de la pgina y asignarles propiedades como bordes, mrgenes, colores de fondo, etc.
Una capa de Dreamweaver es un elemento de pgina HTML que se puede colocar en cualquier lugar del documento. Especficamente, es una etiqueta <div> (o cualquier otra etiqueta) con una posicin absoluta. Las capas se arrastran hasta su pgina con Dreamweaver y despus se colocan donde quiera
Un <div> es un elemento rectangular dentro del cual se puede incluir: palabras, prrafos, enlaces, imgenes, varias de estas cosas a la vez o incluso otras capas o tambin tablas.
Realizar una pgina Web estructurada con CSS
En Dreamweaver, crear un nuevo documento llamado index-css.html Colocar como titulo de la pgina sitio Web de Huajuapan CSS
Seleccionar en el men la opcin Layout, y hacer clic en la opcin Draw AP div
Una vez que el cursor se haya convertido en un apuntador en cruz, arrastrar (crear) una capa de cualquier tamao sobre la pgina
Hacer clic en el manejador de seleccin situado en la esquina superior izquierda de la capa para asegurarse que est seleccionada la capa
En Properties:
En CSS-P Element, escribir banner_imagen
En W(ancho), 700px
En H(alto), 90px En L(margen izquierdo), 20px En T(margen superior), 20px
Hacer clic una vez fuera de la capa creada para anular su seleccin Ahora se agregarn otras capas.
Se utilizar la primera capa (banner_imagen) como punto de referencia para colocar las dems capas.
Insertar una segunda capa
Seleccionar en el men la opcin Layout, y hacer clic en la opcin Draw AP div
Dibujar una nueva capa en el rea de trabajo
Hacer clic en el manejador de seleccin de la nueva capa para seleccionarla Una vez seleccionada la nueva capa, ingresar los datos:
En CSS-P Element, flash_animacion

W (ancho), 700px H (alto), 150px L (izquierda), 20px T (superior), 111px
Dreamweaver aplicar el tamao y la situacin a la nueva capa flash_animacion
Al colocar 111 pixeles en el margen superior se evita el solapamiento con la primera capa
En caso de que las capas se solapen, se notar como el borde de una de las capas (la que est debajo) se marca con una lnea de puntos. Hacer clic una vez fuera de la nueva capa (para anular su seleccin)
Seleccionar View->Visual Aids->CSS Layout Backgrounds
Dreamweaver inserta colores de fondo a las capas. Estos colores seleccionados aleatoriamente no aparecern en la pgina Web publicada.
Solo se trata de ayudas visuales que ofrece Dreamweaver para la identificacin y manipulacin de las capas.
Insertar tres capas ms a la pgina, debajo de las dos capas insertadas anteriormente
Modificacin de la primera capa (de tres capas)
Seleccionar la primera de las tres capas insertadas, y modificar los datos: En CSS-P Element escribir, encabezado
W
(ancho), 700px H (alto), 24px
Modificacin de la segunda capa (de tres capas)
Seleccionar la segunda capa (de las tres ltimas capas insertadas) En CSS-P Element escribir, contenido_central
W
Modificacin de la tercera capa (de tres capas)
Seleccionar la tercera capa (de las tres ltimas capas insertadas) En CSS-P Element escribir, pie_pagina
W
Alineacin de las capas
Seleccionar la capa encabezado y arrastrar el manejador de seleccin hasta que la capa est justo debajo de la capa flash_animacion
Seleccionar y arrastrar la capa contenido_central y alinearla debajo de la capa encabezado Seleccionar y arrastrar a su posicin correspondiente la capa pie_pagina (debajo de la capa contenido_central
Desactivar los fondos de diseo CSS, View->Visual Aids->CSS Layout Backgrounds
Aadir capas dentro de una capa
En la capa contenido_central , se incluirn otras capas, equivalente a las celdas de las tablas que se insertaron en el diseo anterior Hacer clic una vez a la derecha de las capas para asegurarse de que no hay nada seleccionado
Insertar una nueva capa, colocndola dentro de la capa contenido_central
Seleccionar la capa insertada y modificar: En CSS-P Element escribir, menu

W
(ancho), 140px H (alto), 350px L (izquierda), 20px
Mueva la capa en la esquina superior izquierda de la capa que lo albergar
Dibujar una segunda capa
Dibujar una segunda capa dentro de la capa contenido_central En CSS-P Element escribir, video_flash
W
Ubicar la nueva capa, en la parte central de contenido_central
Dibujar una tercera capa
Crear otra capa en la capa contenido_central, con los datos: En CSS-P Element escribir, texto
W
Ubicar la nueva capa, en la parte central de contenido_central
Si aparecen lneas en los bordes de una capa, no hay ningn problema, slo significa que las capas estn solapadas por uno o dos pixeles.
Aadir color a la pgina
Seleccionar la capa menu, haciendo clic sobre su nombre en el panel
Modificar el color de fondo de las capas para hacer un diseo similar al que se realiz en HTML Una vez establecidos los colores, insertar el contenido de cada capa, crear los enlaces, insertar el video, animacin e imgenes en la capa que le corresponda.
Probar el sitio
Visualizar la pgina en el navegador y probar que los enlaces (link) funcionen adecuadamente
Centrar el contenido de la pgina horizontalmente

Utilizando la propiedad margin de CSS se puede centrar una pgina Web horizontalmente, en la pgina estilos.css, agregar: #contenido{ width:700px; left:50%; margin:0 auto; }
El valor 0 auto indica que los mrgenes superior e inferior son iguales a 0 y los mrgenes laterales toman un valor de auto. Cuando se asignan mrgenes laterales automticos a un elemento, los navegadores centran ese elemento respecto de su elemento padre
El elemento padre de la nueva etiqueta (<div>), es la propia pgina (el elemento <body>), por lo que se consigue centrar el elemento <div> respecto de la ventana del navegador.
Con estas modificaciones se puede conseguir un diseo dinmico o lquido (tambin llamado fluido) que se adapta a la anchura de la ventana del navegador y permanece siempre centrado
Acceder al archivo index.html Hacer clic en la visualizacin de cdigo
Insertar un rengln justo antes del inicio del cdigo de la primera tabla, insertar <div id=contenido>
Y antes de terminar el cuerpo del documento agregar: </div>
Centrar el contenido de la pgina tanto horizontal como verticalmente
Hasta el momento el contenido del archivo index.html est alineado a la izquierda de la pantalla
Para centrarlo se incluir una nueva etiqueta que afecte a todo el contenido Como se trata de una caracterstica nica aplicada a un elemento global por pgina, se definir con un id
Acceder al archivo estilos.css, insertar un rengln antes de la etiqueta p (al inicio del archivo), insertar:
position:absolute;
#contenido{ width:700px; /*Le ponemos el valor del ancho*/

height:500px; /*Le ponemos el valor del alto*/ top:50%; /*Desde arriba, colocar al 50% de la pantalla*/ left:50%; /*Desde la izquierda, colocar al 50% de la pantalla*/ margin-top:-250px; /* 50% del alto, para centrarlo verticalmente*/
margin-left:-350px; /* 50% del ancho, para centrarlo horizontalmente*/

}
Se esta utilizando el posicionamiento absoluto y se ubica el contenido en el medio de la pantalla, Despus se le asigna margen superior e izquierdo negativos en cantidades equivalentes a la mitad de las dimensiones del contenido que se desea centrar. Adems se indican las dimensiones del contenido
Acceder al archivo index.html Hacer clic en la visualizacin de cdigo
Insertar un rengln justo antes del inicio del cdigo de la primera tabla, insertar <div id=contenido>
Y antes de terminar el cuerpo del documento agregar: </div>
Visualizar la pgina en el navegador

Presentacion de Dreamweaver-2

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Presentacion de Dreamweaver-2

Încărcat de

Drepturi de autor:

Formate disponibile

Creacin de una pgina usando CSS

H1 { font-size: 16 pxeles; font-family: Helvetica; font-weight: bold; }

La declaracin consta de dos partes:

propiedad, por ejemplo: font-family El valor, por ejemplo Helvetica

Se pueden aplicar varios estilos al mismo elemento o pgina Web, en cascada

Una regla de formato CSS consta de dos partes:

H1 { font-size: 16 pxeles; font-family: Helvetica; font-weight: bold; }

Las reglas CSS pueden residir en:

Pgina Web estructurada con CSS

Realizar una pgina Web estructurada con CSS

Seleccionar en el men la opcin Layout, y hacer clic en la opcin Draw AP div

En CSS-P Element, escribir banner_imagen

Insertar una segunda capa

Seleccionar en el men la opcin Layout, y hacer clic en la opcin Draw AP div

Dibujar una nueva capa en el rea de trabajo

En CSS-P Element, flash_animacion

Dreamweaver aplicar el tamao y la situacin a la nueva capa flash_animacion

Seleccionar View->Visual Aids->CSS Layout Backgrounds

Modificacin de la primera capa (de tres capas)

(ancho), 700px H (alto), 24px

Modificacin de la segunda capa (de tres capas)

(ancho), 700px H (alto), 350px

Modificacin de la tercera capa (de tres capas)

(ancho), 700px H (alto), 24px

Alineacin de las capas

Desactivar los fondos de diseo CSS, View->Visual Aids->CSS Layout Backgrounds

Aadir capas dentro de una capa

Insertar una nueva capa, colocndola dentro de la capa contenido_central

Seleccionar la capa insertada y modificar: En CSS-P Element escribir, menu

(ancho), 140px H (alto), 350px L (izquierda), 20px

Mueva la capa en la esquina superior izquierda de la capa que lo albergar

Dibujar una segunda capa

(ancho), 230px H (alto), 350px

Ubicar la nueva capa, en la parte central de contenido_central

Dibujar una tercera capa

(ancho), 330px H (alto), 350px

Ubicar la nueva capa, en la parte central de contenido_central

Aadir color a la pgina

Seleccionar la capa menu, haciendo clic sobre su nombre en el panel

Centrar el contenido de la pgina horizontalmente

Acceder al archivo index.html Hacer clic en la visualizacin de cdigo

Y antes de terminar el cuerpo del documento agregar: </div>

Centrar el contenido de la pgina tanto horizontal como verticalmente

#contenido{ width:700px; /*Le ponemos el valor del ancho*/

margin-left:-350px; /* 50% del ancho, para centrarlo horizontalmente*/

Acceder al archivo index.html Hacer clic en la visualizacin de cdigo

Y antes de terminar el cuerpo del documento agregar: </div>

Visualizar la pgina en el navegador

S-ar putea să vă placă și

#contenido{ width:700px; /Le ponemos el valor del ancho/