Como diseñar con elementos Div en Dreamweaver
Inserción y edición de etiquetas div
Si no está familiarizado con el uso de etiquetas div
y de hojas de estilos en cascada (CSS) para crear páginas Web, puede crear un
diseño CSS basado en uno de los diseños predefinidos que se suministran con
Dreamweaver. Si no se siente cómodo utilizando código CSS pero sí con el uso de
tablas, también puede probar a utilizar tablas.
Dreamweaver
le permite insertar rápidamente una etiqueta div y aplicar a ésta estilos
existentes.
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 > Objetos de diseño > Etiqueta Div.
- En la categoría Diseño del panel Insertar, haga clic en el botón Insertar etiqueta Div
3.
Defina
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.
Recuerda:
Dreamweaver le avisa si
introduce el mismo ID de otra etiqueta del 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.)
Edición de etiquetas div
Después de insertar una etiqueta div, puede manipularla o añadir
contenido a ella.
Cuando se asignan bordes a etiquetas div, o cuando se selecciona
Contornos de diseño CSS, las etiquetas div tienen bordes visibles. (La opción
Contornos de diseño CSS está seleccionada de forma predeterminada en el menú
Ver > Ayudas visuales.) Cuando se pasa el puntero por encima de una etiqueta
div,
Dreamweaver la resalta. Puede cambiar el color de resaltado o desactivar el
resaltado.
Visualización y edición de reglas aplicadas a una etiqueta div
1. Siga uno de estos procedimientos para
seleccionar la etiqueta div:
- Haga clic en el borde de la etiqueta div.
- Busque el resaltado para ver el borde.
- Haga clic dentro de la etiqueta div y presione las teclas Control + A (Windows) o Comando + A (Macintosh) dos veces.
- Haga clic en el interior de la etiqueta div y seleccione la etiqueta div del selector de etiquetas en la parte inferior de la ventana de documento.
2. Seleccione Ventana > Estilos CSS para abrir
el panel Estilos CSS si aún no está abierto.
- Las reglas que se aplican a la etiqueta div aparecen en el panel.
3. Lleve a cabo los cambios necesarios.
Colocación
del punto de inserción en una etiqueta div para añadir contenido
- Haga clic en cualquier lugar dentro de los bordes de la etiqueta.
- Seleccione el texto y escriba encima o presione Suprimir.
Recuerda:
Puede añadir contenido a la
etiqueta div como lo haría en una página.
Cambio del color de resaltado de las
etiquetas div
Cuando se desplaza el puntero por encima del borde
de una etiqueta div en la vista Diseño, Dreamweaver resalta los bordes de la etiqueta. Si
es necesario, puede activar o desactivar el resaltado o modificar el color en
el cuadro de diálogo Preferencias.
1.Seleccione Edición > Preferencias
(Windows) o Dreamweaver > Preferencias (Macintosh).
2.Seleccione Resaltando en la lista de categorías
de la izquierda.
3.Lleve a cabo uno de los cambios siguientes y haga
clic en Aceptar:
- Para cambiar el color de resaltado de las etiquetas div, haga clic en el cuadro Color al pasar el ratón por encima y seleccione un color de resaltado con el selector de color (o bien escriba el valor hexadecimal del color de resaltado en el cuadro de texto).
- Para activar o desactivar el resaltado de las etiquetas div, active o desactive la selección de la casilla Mostrar correspondiente a Ratón por encima.
Recuerda:
Estas opciones afectan a todos
los objetos, como tablas, que Dreamweaver resalta cuando pasa el puntero del
ratón sobre ellos.
El
Dreamweaver es una poderosa herramienta para los diseñadores web con y sin
experiencia. Uno de los problemas comunes de diseño, que Dreamweaver no se
ocupa con sus herramientas incorporadas, es la capacidad de centrar un
contenedor DIV en una página. Utilizando una serie de elementos de estilo en
línea, puedes controlar el ancho de un contenedor DIV y la posición en una
página.
Instrucciones
1. Busca el contenedor DIV que tiene todo el contenido de tu página web.
Crea un nuevo contenedor DIV si aún no existe.
2. Agrega la etiqueta style = "" al contenedor DIV para contener
los elementos de tu nuevo estilo: <div style=" ">
3. Agrega un ancho establecido en
el contenedor DIV dentro de la
etiqueta de estilo. Asigna un valor suficiente para almacenar todo el contenido
de la página web. Establece tu valor en porcentajes o píxeles: <div
style="width: 25px;">
4. Establece los márgenes derecho e izquierdo de tu contenedor DIV para "auto":
<div style="width: 25px; margin-right: auto; margin-left:
auto;">
5. Crea una etiqueta de cierre </div> al final del contenido de la
página web si estuvieras creando un nuevo contenedor DIV desde cero.
No hay comentarios:
Publicar un comentario