Marcos

Hay dos formas de crear un conjunto de marcos en Dreamweaver:

puede disearlo usted mismo o seleccionarlo de una serie de
conjuntos de marcos predefinidos. Si elige un conjunto de marcos
predefinido se configurarn automticamente todos los conjuntos
de marcos necesarios para crear la disposicin. sta es la forma
ms sencilla de insertar rpidamente un diseo de marcos en la
pgina.
Insertar un conjunto de marcos predefinido
Los conjuntos de marcos predefinidos facilitan la seleccin del tipo
de conjunto de marcos que desea crear.
Los iconos de conjuntos de marcos predefinidos de la
categora Marcos del panel Objetos proporcionan una
representacin visual de cada conjunto de marcos al aplicarse a un
documento seleccionado.

El conjunto de marcos seleccionado rodea al documento actual (el

documento en el que se encuentra el punto de insercin). El rea
azul de un icono de conjunto de marcos predefinido representa la
pgina o el marco seleccionado actualmente en un documento,
mientras que el rea blanca representa el nuevo o los nuevos
marcos.
Para insertar un conjunto de marcos predefinido:
1.

Site el punto de insercin en el documento.

2. A continuacin, lleve a cabo una de estas operaciones:

o

En la categora Marcos del panel Objetos, seleccione un

conjunto de marcos predefinido. Para insertar el conjunto

de marcos, puede hacer clic en un icono o arrastrar un icono

directamente al documento.
o

Para seleccionar un conjunto de marcos predefinido,

elija Insertar > Marcos >Izquierda, Derecha, Arriba,
Abajo, Izquierda y arriba, Superior izquierda, Izquierda
superior o Dividir.

Disear e insertar un conjunto de marcos

Elija Modificar > Conjunto de marcos > Dividir marco a la

izquierda, a la derecha, hacia arriba o hacia abajo.

Arrastre uno de los bordes del marco a la ventana de

documento para dividir el documento vertical u horizontalmente.

Arrastre un borde del marco por una de las esquinas para

dividir el documento en cuatro marcos nuevos.

Presione la tecla Alt mientras arrastra el ratn si desea

dividir un marco interior.

Modificar un conjunto de marcos

Para modificar el cunjunto de marcos puede eliminar marcos, o

crear un nuevo conjunto de marcos dentro de un marco ya
existente(marcos anidados)
Para eliminar un marco:
Arrastre el borde del marco fuera de la pgina o hasta el borde del
marco padre.
Crear un conjunto de marcos anidado
Un conjunto de marcos dentro de otro conjunto recibe el nombre
de conjunto de marcos anidado. Cada nuevo conjunto de marcos
creado incluye su propio documento HTML de conjunto de marcos y
sus documentos de marcos. La mayora de las pginas Web con
marcos utilizan en realidad marcos anidados y varios de los
conjuntos de marcos predefinidos en Dreamweaver tambin utilizan
la anidacin.
Para crear un conjunto de marcos anidado
1.

Site el punto de insercin en el marco en el que desea

insertar el conjunto de marcos anidado.

2. Lleve a cabo una de estas operaciones:

o

Elija Modificar > Conjunto de marcos > Dividir

marco hacia arriba, hacia abajo, a la izquierda o a la
derecha.

En la categora Marcos del panel Objetos , seleccione

un icono de conjunto de marcos.

Elija Insertar > Marcos > Izquierda, Derecha,

Arriba, Abajo, Izquierda y arriba, Superior izquierda,
Izquierda superior o Dividir.

Seleccionar un marco o un conjunto de marcos

Los marcos y los conjuntos de marcos son documentos HTML

individuales. Para realizar cambios en un marco o en el conjunto de
marcos, comience seleccionando el marco o conjunto de marcos que
desea cambiar. Puede seleccionar un marco o un conjunto de marcos
en la ventana de documento o utilizando el panel Marcos.
Cuando seleccione un marco o el conjunto de marcos, aparecern
lneas de seleccin en el panel Marcos y en la ventana de
documento.
Utilizar el panel Marcos
El panel Marcos proporciona una representacin visual de los
marcos del documento. Puede hacer clic en un marco o conjunto de
marcos en el panel Marcos para seleccionarlo en el documento y,
seguidamente, ver o editar las propiedades del elemento
seleccionado en el inspector de propiedades.
El panel Marcos tambin muestra la jerarqua de la estructura del
conjunto de marcos de una manera que puede no percibirse en la
ventana de documento. En el panel Marcos, el conjunto de marcos
est rodeado por un borde grueso tridimensional, los marcos estn
rodeados por una lnea delgada gris, mientras que los distintos
marcos se identifican a travs de sus nombres.
Para mostrar el panel Marcos, lleve a cabo una de estas
operaciones:

Elija Ventana > Marcos .

Presione MAY + F 2

Guardar archivos de marcos y de conjunto de marcos

Puede guardar de forma individual una pgina del conjunto de
marcos o una pgina de marco, o bien guardar todos los archivos de
marco abiertos y la pgina de conjunto de marcos.

Cuando se utiliza Dreamweaver para crear documentos de marcos,

cada nuevo documento de marco recibe un nombre de archivo
temporal (por ejemplo, UntitledFrame_1 para la pgina de conjunto
de marcos, Untitled-1, Untitled-2, etc. para las pginas de marcos).

Para guardar un archivo de conjunto de marcos:

1.

Seleccione el conjunto de marcos en el panel Marcos o en la

ventana de documento.

2. Lleve a cabo una de estas operaciones:

o

Para guardar el archivo de conjunto de marcos ,

elija Archivo > Guardar conjunto de marcos.

Para guardar el archivo de conjunto de marcos como un

archivo nuevo , elija Archivo > Guardar conjunto de
marcos como.

Para guardar un documento que est dentro de un marco:

Haga clic en el marco para seleccionarlo y, a continuacin,
elija Archivo > Guardar marco o Archivo > Guardar marco como.
Para guardar todos los archivos de un conjunto de marcos:
Elija Archivo > Guardar todos los marcos. De este modo se
guardarn todos los documentos abiertos, incluidos los documentos
individuales, los documentos de marcos y los documentos de
conjunto de marcos.

Estilo CSS

Hasta ahora, si has entrado un poco en el cdigo de las

pginas, habrs visto etiquetas que introducan estilos CSS en
ellas.
Por defecto, cuando crebamos una < Nueva regla de estilo
> desde el inspector de propiedades, se defina la regla
nicamente para la pgina actual. Esto generaba un cdigo
similar al siguiente en el <head> de la pgina (por supuesto,
cambiando las propiedades segn el caso).
<style type="text/css">
<!-body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}

//->
</style>
Este mtodo se emplea para
incrustar
el
cdigo
directamente en la pgina. Los estilos son declarados en la

cabecera
(<head>...</head>),
type="text/css"> y </style>.

entre

las

etiquetas <style

La base del CSS es lograr un estilo homogneo y fcil de

modificar para todo nuestro sitio. Por lo tanto, no tiene sentido
incrustar el mismo estilo en cada pgina. En nuestros sitios de
ejemplo, hemos optado por exportar los estilo a una hojas de
estilos (un archivo de extensin .css). Esta opcin nos resultaba
mucho mejor, ya que nos permite centralizar el estilo en un slo
archivo que aplicaremos a todas las pginas.
Si acabamos de comenzar con nuestro sitio, podemos crear
nuestra hoja directamente. En este caso deberemos crear un
archivo CSS (Archivo Nuevo y seleccionando CSS). En l
escribiremos las reglas de estilo del con la misma sintaxis que
hemos visto ms arriba pero eliminado el componente HTML.
Este sera el contenido de nuestra hoja definiendo el mismo
estilo que arriba:
@charset "iso-8859-1";
/* CSS Document */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
background: url('imagenes/fondo.gif') repeat-x bottom;
}

Las dos primeras lneas generadas por Dreamweaver no son

imprescindibles.
Este
cdigo
est
guardado
en
un
archivo
con
extensin .css (por ejemplo, miestilo.css). Luego deberamos
vincularlo
en
la
pgina
HTML
utilizando
la
etiqueta <link /> dentro del <head> de la pgina:
<link href="ruta/miestilo.css" rel="stylesheet" type="text/css"
/>

Otra opcin que nos permita el Inspector de propiedades

CSS era crear un Estilo en lnea. Este estilo slo afectaba al
elemento en cuestin, ya que lo que realmente estamos haciendo
es definir las propiedades CSS empleando el atributo style del
elemento:
<p style="color: red; font-size: 30px;">Este texto est en rojo
y con un tamao de 30 pxeles</p>
El estilo en lnea es el ms desaconsejado porque es ms difcil
de modificar al tener que buscarlo por el texto y modificndolo
uno a uno.

Una pgina puede contener todos estos tipos de estilos CSS, o

incluso tener varias hojas de estilo asociadas. Entonces cundo
empleamos cada uno?
Emplearemos hojas de estilos para todos los estilos comunes
a las pginas del sitio.

 Emplearemos estilos incrustados en la pgina para los estilos

que se emplean en nicamente en esa pgina, y que ya no
seran tiles si borrsemos la pgina. Por ejemplo, para
definir el la apariencia de una tabla en concreto.
Emplearemos estilos en lnea cuando el estilo solo tenga
sentido por estar en esa posicin en concreto, y no se suela
repetir en el sitio. Por ejemplo, si queremos dar ms margen
a un prrafo por tener una imagen en concreto, pero que no
tendra sentido si cambisemos la imagen.
La organizacin de los estilos debes decidirla t. Pero
recuerda que cuanto menos cdigo repitas en tus pginas, ms
fcil ser luego de modificar o exportar.