revista div css

1
Etapas para el diseño
de sitios web
Objetivo:
Maneja adecuadamente la creación de plantillas para la
creación de las páginas que contendrá un sitio web mediante la
resolución de ejercicios. Aplica los conceptos base para lamaquetación
y construye un sitio web haciendo uso de capas
mediante DW CC.

2
Por:
Eduardo Luis Castillo
Gabriela Vargas
Temas:
Concepto capas
Insertar capas
Etiqueta div
Propiedades de capas
Cuando usar un div
Hojas de estilos en las capas
Resolución de ejercicios

3
Etapas para el diseño de sitios web
Concepto de capa
Las capas no son más que unos recuadros, que pueden situarse en
cualquier parte de la página, en los que podemos insertar contenido
HTML. Dichas capas pueden ocultarse y solaparse entre sí, lo que proporciona
grandes posibilidades de diseño.
Las capas pueden moverse de una posición a otra de la ventana pulsando
sobre el recuadro blanco, y sin soltar el ratón, arrastrándola hacia la
nueva posición.
También pueden ser redimensionadas pulsando sobre los recuadros
negros, y arrastrándolos hasta conseguir el tamaño deseado.
Dentro del recuadro de la capa es posible insertar texto, tablas, imágenes,
animaciones flash, y todos los elementos que puede contener un
documento HTML.
Este icono sirve para seleccionar la capa al pulsar sobre él, y al eliminarlo se
elimina también la capa.
Insertar capa
Las capas pueden insertarse en una página a través del menú Insertar,
opción Objeto de diseño, Capa.
Una vez se ha insertado la capa, pueden editarse sus atributos, pero para
ello hay que seleccionarla primero.
Una capa puede seleccionarse de varias maneras. Una de ellas es pulsando
sobre el icono correspondiente, pero esto no resulta útil cuando
existen muchas capas en un mismo documento, ya que todas las capas
tienen asociada una imagen igual a esta, y no es fácil seleccionar la
deseada a la primera.
Cuando existen varias capas en un mismo documento, es preferible
seleccionarlas a través de la pestaña Capas del panel Diseño, que puede
abrirse a través del menú Ventana opción Capas. Si la opción Capas no te
aparece directamente en este menú, posiblemente esté dentro de la
opción Otros. También puedes abrir el panel pulsando F2.
En dicho panel aparecen los nombres de todas las capas que existen en
el documento actual, y para seleccionar una de ellas simplemente hay
que pulsar sobre el nombre en el panel.

4
Etiqueta Div
Puede crear diseños de página insertando manualmente etiquetas div y aplicando a estas estilos de posición CSS. Una
etiqueta div es una etiqueta que define las divisiones lógicas existentes en el contenido de una página web. Puede
utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color,
entre otras posibilidades
Inserción de etiquetas div
Puede utilizar etiquetas div para crear
bloques de diseño CSS y colocarlos en
el documento.
1. En la ventana de documento, sitúe el
punto de inserción en el lugar donde
desea que aparezca la etiqueta div.
2. Siga uno de estos procedimientos:
Seleccione Insertar > HTML > Div.
En la categoría HTML del panel Insertar,
haga clic en Div.
3. Establezca cualquiera de las opciones
siguientes:
Insertar
Permite seleccionar la ubicación de la
etiqueta div y el nombre de la etiqueta
si no es una etiqueta nueva.
Clase
Muestra el estilo de la clase aplicado
actualmente a la etiqueta. Si ha
adjuntado una hoja de estilos, las clases
de la hoja de estilos aparecerán en la
lista. Utilice este menú emergente para
seleccionar el estilo que desea aplicar a
la etiqueta.
ID
Permite modificar el nombre utilizado
para identificar la etiqueta div. Si ha
adjuntado una hoja de estilos, aparecerán
en la lista los ID definidos en la hoja
de estilos. No aparecen en la lista los ID
de bloques que ya están en el documento.
4. Haga clic en Aceptar.
La etiqueta div tendrá el aspecto de un
cuadro en el documento con texto de
marcador de posición. Al desplazar el
puntero sobre el borde del cuadro,
Dreamweaver lo resaltará.
Si la etiqueta div se sitúa con una
posición absoluta, se convierte en un
elemento PA. (Puede editar las etiquetas
div que no tengan una posición
absoluta).

5
Etapas para el diseño de sitios web
Propiedades de una capa
Las propiedades de la capa se
especifican a través de su inspector
de propiedades.
ID de capa es el nombre de la capa. También puede ser cambiado a través del
panel Capas, haciendo doble clic sobre él.
Iz y Sup indican la distancia en píxeles que hay entre los límites izquierdo y
superior del documento y la capa.
An y Al indican la anchura y la altura de la capa.
Índice Z es el número de orden de colocación
de las capas. Este valor también puede
cambiarse a través del panel Capas. Una
capa será solapada por aquellas capas cuyo
índice Z sea mayor que el suyo.
Desb. (Desbordamiento) controla cómo
aparecen las capas en un navegador cuando
el contenido excede el tamaño especificado
de la capa.
Visible indica que el contenido adicional
aparece en la capa. La capa se amplía para
darle cabida.
Hidden (oculto) especifica que el contenido
adicional no se mostrará en el navegador.
Cuando usar un div
La etiqueta se emplea para definir un bloque de contenido o
secciòn de la pàgina, para poder aplicarle diferentes estilos e incluso
para ralizar operaciones sobre ese bloque especifico.
El uso de la etiqueta div es sencillo.
indice
pàgina rincipal
Autores
Scroll (desplazamiento) especifica que el
navegador deberá añadir barras de desplazamiento
a la capa tanto si se necesitan
como si no.
Auto (automático) hace que el navegador
muestre barras de desplazamiento para la
capa cuando sean necesarias (es decir,
cuando el contenido de la capa supere sus
límites).
Podemos ahora aplicar una modificaciòn a la apariencia de ese
bloque, añadiendo un estilo de borde a la etiqueta ; quedarìa
asì:
indice
pàgina rincipal
Autores

6
Hojas de estilos en las capas
El panel Diseñador de CSS (Ventana >
Diseñador de CSS) es un inspector de
propiedades de CSS que permite crear
“visualmente” archivos y estilos CSS,
así como definir propiedades y consultas
de medios.
Las siguientes secciones están disponibles
en la interfaz de Diseñador de CSS:
Fuentes: una colección de archivos CSS
asociados al proyecto
Medios: consultas de medios para
controlar el tamaño de la pantalla
Selectores: selectores asociados a la
consulta de medios seleccionada en el
panel @Medios
Propiedades: propiedades asociadas
con el selector escogido, con una opción
para mostrar solo las propiedades
establecidas
Usando el Diseñador de CSS, puede
editar reglas individuales en una hoja
de estilos CSS (utilice la ficha Actual
del Diseñador de CSS) o, si lo prefiere,
puede trabajar directamente en la hoja
de estilos CSS (utilice la ficha Todo del
Diseñador de CSS)
En el panel Fuentes del panel Diseñador de
CSS, haga clic en y, a continuación, haga
clic en una de las siguientes opciones:
Crear un nuevo archivo CSS: para crear y
adjuntar un nuevo archivo CSS al
documento
Adjuntar archivo CSS existente: para
adjuntar un archivo CSS existente al
documento
Definir en página: para definir un CSS
dentro del documento
En función de la opción que elija, aparecerá
el cuadro de diálogo Crear un nuevo
archivo CSS o Adjuntar archivo CSS
existente.
Haga clic en Examinar para especificar el
nombre del archivo CSS y, si está creando
un CSS, la ubicación en la que guardar el
nuevo archivo.
Siga uno de estos procedimientos:
Haga clic en Vínculo para vincular el
documento de Dreamweaver con el archivo
CSS.
Haga clic en Importar para importar el
archivo CSS al documento.
(Opcional) Haga clic en Uso condicional y
especifique la consulta de medios que desea
asociar al archivo CSS.

7
Etapas para el diseño de sitios web
Diseñador Css en Dreamweaver CC
1°- creamos un HTML para la
creación de la plantillai
2° Creamos un Div que será el
cuerpo o la base de la plantilla y
continuamos creando los Div
necesarios para nuestra página
que son header o encabezado,
otro para el contenido y otro para
el pie
Guardamos como plantilla y
aplicamos el nombre para nuestra
plantilla

8
REGION EDITABLE
para crear una region editable
debemos ir a insertar + plantilla
+region editable.
Esto nos sirve para poder editar
el contenido de cara menú, sin
tener que cambiar la plantilla ya
que todo lo demás quedará
igual, excepto lo que se agregue
en dicha sección.
Se debe editar en la plantilla creada y vamos a guardar todo. Así se
actualizará la plantilla y se guardará correctamente, actualizando
el contenido que ya tenía

9
Etapas para el diseño de sitios web
Conclusiòn:
Permiten que un diseñador web cree un sitio que pueda ser flexible, fácil de actualizar y coherente
entre páginas HTML.
Las plantillas pueden aumentar la productividad, lo que permite a algunos miembros del equipo
centrarse en el formato de las páginas mientras otros crean nuevas páginas y revisan el contenido
sin cambiar el diseño con formato.
Los diseñadores pueden realizar cambios con rapidez en el diseño general del sitio revisando los
archivos DWT (plantillas de Dreamweaver) directamente. Las páginas que están vinculadas a los
archivos de plantilla se actualizan automáticamente, lo que permite realizar modificaciones en todo
el sitio en minutos.
Bibliografìa:
https://helpx.adobe.com/es/dreamweaver/using/css-designer.html
http://www.ite.educacion.es/formacion/materiales/182/cd/-
seis/la_etiqueta_div.html
https://helpx.adobe.com/la/dreamweaver/using/div-tags.html
https://www.aulaclic.es/dreamweaver8/t_14_1.htm
https://helpx.adobe.com/la/dreamweaver/using/whats-new-2015-1-2015-2.html
https://helpx.adobe.com/la/dreamweaver/using/div-tags.html