¿Que son las Capas en Dreamweaver?
Las capas no son más que unos recuadros, elementos de bloque, destinados a contener y agrupar otros elementos igual que los párrafos son elementos de bloque destinados a contener texto.
Las capas, también llamadas layers o divisiones, se crean con la etiqueta <div></div>.
Al ser elementos contenedores, son muy útiles para organizar nuestros elementos. Si esto lo combinamos con el posicionamiento absoluto, una propiedad CSS que nos permite colocar los elementos donde queramos en nuestra página, obtenemos los elementos ideales para maquetar nuestra página, es decir, distribuir el contenido en bloques,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.
Las capas, combinadas con JavaScript pueden dotar a una página de verdadero dinamismo.
¿Como insertar una capa en Dreamweaver?
Primero creas un sitio luego que ya lo hallas creado ingresas a la pestaña insertar y te muestra un menú desplegable con la opción objeto de diseño y te aparecerán dos opciones que son las etiqueta Div y
Div PA
Cuando existen varias capas en un mismo documento, es preferible seleccionarlas a través de la pestaña Elementos PA del panel CSS, que puede abrirse a través del menú Ventana opción Elementos PA. También puedes abrir el panel pulsando F2.
¿Que es la Etiqueta Div en Dreamweaver?
La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.
El uso de la etiqueta div es sencillo. Observemos este ejemplo:
<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.
Probemos ahora a aplicar una modificación a la apariencia de ese bloque, añadiendo un estilo de borde a la etiqueta <div>; quedaría así:
<div style="border: 2px solid rgb(204, 102, 204);"><h1>Índice</h1>Página principal<br />Material multimedia<br />Autores<br /></div>
Observemos de nuevo la figura; ahora sí que aparece un borde sólido de 2 píxeles alrededor de todo el espacio definido por la etiqueta div.
Eso es todo lo que necesitamos saber: la etiqueta <div> configura espacios dentro de la página.
mas información en
¿ Que es Las propiedades de la 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.
Vis indica la visibilidad inicial de la capa. La visibilidad puede ser de cuatro tipos:
Default (visibilidad según el navegador),
Inherit (se muestra la capa mientras la página a la que pertenece también se esté mostrando),
Visible (muestra la capa, aunque la página no se esté viendo) y
Hidden (la capa está oculta).
La visibilidad también puede cambiarse a través del panel Capas, pulsando sobre la imagen del ojo. El ojo abierto indica Visible, y el ojo cerrado indica Hidden.
A través de Im. fondo y Col puede indicarse una imagen o un color de fondo para la capa.
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.
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).
mas información en:
¿ Que es Diseño de cuadrícula fluida con Dreamweaver?
En esta edición CS6, Dreamweaver presenta un nuevo tipo de diseño fluido que supone un avance en el campo del diseño.La idea de este diseño fluido viene de recomendaciones del W3C sobre la conveniencia de hacer un sólo diseño para todos los dispositivos, conocido como diseño "One Web", y también de ideas de otros autores, sobre todo de Ethan Marcotte que acuñó el término "Responsive web design". La idea de la rejilla se debe a Joni Korpi.
Este diseño fluido es uno más de los diseños predefinidos de Dreamweaver y está disponible desde el menú Nuevo eligiendo Diseño de cuadricula fluida.
Tomaremos un ejemplo de la pagina ya que no cuento con el CS6 para realizar el proceso.
La principal novedad de este tipo de "diseño de cuadrícula fluida" es que se adaptan a diferentes anchos de pantalla de forma completa. Es decir, que para cada ancho podemos variar el diseño en varios aspectos. Este tipo de diseño se suele llamar "responsive design" que podríamos traducir como "diseño adaptable", " diseño sensible al contexto" o "diseño reactivo" que son más descriptivos que "diseño de cuadrícula fluida".
Por ejemplo, para un ancho correspondiente a un móvil (smartphone) podemos definir un tamaño de letra menor que para un ancho correspondiente a una tableta, o podemos variar la posición del menú. Otra característica importante es que las imágenes varían su tamaño proporcionalmente al ancho de la pantalla.
mas información en :
No hay comentarios:
Publicar un comentario