Dreamweaver Mx 2004

5/21/2018 Dreamweaver Mx 2004

1/44

Manual de Dreamwaver MX 2004

1. INTRODUCCIN A DREAMWEAVER................................................................ 2

1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIN DE SITIOS WEB .......... 21.2. GUA DE RECURSOS DE FORMACIN DE DREAMWEAVER........................................ 3

2. ENTORNO DE TRABAJO ................................................................................... 4

2.1. ELEMENTOS DEL ENTORNO DE TRABAJO ................................................................. 52.2. BARRAS DE HERRAMIENTAS ................................................................................... 52.3. INSPECTOR DE PROPIEDADES .................................................................................. 62.4. MENS CONTEXTUALES.......................................................................................... 72.5. PANELES................................................................................................................. 7

3. DEFINICIN DE UN SITIO LOCAL. DIFERENCIAS ENTRE SITIOLOCAL Y SITIO REMOTO......................................................................................... 7

3.1. CONFIGURACIN DE UN SITIO DE DREAMWEAVER NUEVO: CARPETA LOCAL .......... 83.2. CARPETA REMOTA .................................................................................................. 9

3.3. DIFERENCIAS ENTRE SITIO LOCAL Y SITIO REMOTO................................................. 94. CREACIN DE UNA PGINA CON DREAMWEAVER ............................. 10

4.1. MODOS DE EDICIN EN DREAMWEAVER............................................................... 124.2. DEFINIR LAS CARACTERSTICAS DE LA PGINA ..................................................... 124.3. INSERTAR TEXTO .................................................................................................. 154.5. INCLUYENDO IMGENES ....................................................................................... 194.5.1. CREAR UNA IMAGEN DE SUSTITUCIN ............................................................... 214.6. CREANDO VNCULOS ............................................................................................ 224.6.1. ASPECTOS BSICOS DE UBICACIN Y RUTAS DE DOCUMENTOS .......................... 224.6.2. TIPOS DE VNCULOS ........................................................................................... 23

4.6.3. ESTABLECER VNCULOS CON UNA PARTE ESPECFICA DEL DOCUMENTO: ANCLAS.................................................................................................................................... 254.6.4. ESTABLECER VNCULOS CON CORREOS ELECTRNICOS ..................................... 264.6.5. BARRA DE NAVEGACIN.................................................................................... 274.6.6. MAPAS DE IMAGEN ............................................................................................ 284.6.7. COMPROBACIN DE VNCULOS .......................................................................... 294.7. AYUDAS A LA MAQUETACIN: REGLAS Y CUADRCULAS, TABLAS Y PLANTILLAS. 294.7.1. UTILIZACIN DE REGLAS, CUADRCULAS E IMAGEN DE RASTREO PARA DISEARPGINAS ...................................................................................................................... 294.7.2. TABLAS ............................................................................................................. 304.7.3. CAPAS ............................................................................................................... 34

4.8. PLANTILLAS.......................................................................................................... 374.8.1. VISUALIZACIN DE LA PLANTILLA EN LA VISTA DISEO .................................... 374.8.2. CREAR UNA PLANTILLA ..................................................................................... 384.8.3. CREACIN DE REGIONES EN LA PLANTILLA........................................................ 384.8.4. APERTURA DE UNA PLANTILLA PARA EDITARLA ................................................ 404.8.5. DOCUMENTOS BASADOS EN PLANTILLAS ........................................................... 404.9. MARCOS ............................................................................................................... 414.9.1. UTILIZAR MARCOS: VENTAJAS Y DESVENTAJAS ................................................. 414.9.2. CREACIN DE MARCOS ...................................................................................... 424.9.3. MODIFICAR PROPIEDADES DE LOS MARCOS ....................................................... 434.9.4. MARCOS CON VNCULOS.................................................................................... 44

Secretariado de Tecnologas de Apoyo a la Docencia.Universidad de Granada

1


2/44


1. Introduccin a Dreamweaver

Macromedia Dreamweaver MX 2004 es un editor HTML para disear,codificar y desarrollar sitios, pginas y aplicaciones Web. Dreamweaver leproporciona tiles herramientas tanto si desea controlar manualmente elcdigo HTMLcomo si prefiere trabajar en un entorno de edicin visual.

Con Dreamweaver se puede controlar todo el proceso de creacin de un sitioweb: creacin del sitio, estructurar el rbol de links, disear las pginas y lasubida de nuestro trabajo a nuestro servidor web.

Por ejemplo, puede crear y editar imgenes en Macromedia Fireworks o enotra aplicacin de grficos y su posterior importacin directa a Dreamweaver, obien aadir objetos Macromedia Flash.

Tambin ofrece un entorno de codificacin con todas las funciones. Incluyeherramientas para la edicin de cdigo (tales como coloreado de cdigo yterminacin automtica de etiquetas) y material de referencia sobre HTML,hojas de estilos en cascada (CSS), JavaScript, ColdFusion Markup Language(CFML), Microsoft Active Server Pages (ASP) y JavaServer Pages (JSP).

Dreamweaver le permite crear aplicaciones Web dinmicasbasadas en basesde datos empleando tecnologas de servidor como CFML, ASP, NET, JSP yPHP.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios

objetos y comandos, modificar mtodos abreviados de teclado e incluso escribircdigo JavaScript para ampliar las posibilidades que ofrece Dreamweaver connuevos comportamientos, inspectores de propiedades e informes de sitios.

1.1. Flujo de trabajo de Dreamweaver para la creacin de sitiosWeb

Se debe empezar definiendo la estrategia o la finalidad de un sitio.

Luego, debe disear el aspecto y el funcionamiento del sitio. Una vez que eldiseo est finalizado, es cuando se crea el sitio y codifican las pginas,aadiendo el contenido y la interactividad. A continuacin, vincular las pginasy comprobar si el sitio funciona y si cumple los objetivos para los que ha sidodiseado.

Adems, si lo desea, puede incluir pginas dinmicas.

Para terminar el ciclo, publicar el sitio en un servidor.


2


3/44


1) Planificacin del sitioPlanificar y organizar cuidadosamente el sitio desde el primer momento puedeayudar a ahorrar tiempo ms adelante. La organizacin del sitio no slo implicala determinacin de los archivos que van a incluirse, sino que tambin requiereun examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos.

Una vez que haya organizado la informacin y determinado una estructura,podr comenzar a crear el sitio.

2) Diseo de las pginas WebPuede empezar creando pginas de muestra y trabajar en el diseo definitivode sus pginas.

Son interesantes herramientas como: las capas, hojas de estilo, las tablas parala estructura de las pginas, los marcos para la organizacin o las plantillaspara reutilizar los diseos.

3)Adic in de contenido a las pginasCon Dreamweaver, es muy fcil aadir todo tipo de contenidos (texto,imgenes, pelculas, sonidos y elementos multimedia).

4) Codificacin manualHay dos mtodos para crear las pginas. La edicin visual, con herramientassencillas, o el entorno de codificacin que permite trabajar directamente concdigo. Puede utilizar el modo que quiera, o una combinacin de ambos.

5) Pginas dinmicasEste tipo de pginas permite ver a los visitantes informacin almacenada enbases de datos, e incluso aadirles nueva informacin. Los pasos preliminaresa realizar son algo ms complejos. Configurar el servidor Web y el servidor deaplicaciones, y conectarse a la base de datos.

1.2. Gua de recursos de formacin de Dreamweaver

Ayuda

Se accede a la ayuda desde el men Ayuda. Incluye los sistemas de Primeros

pasos y tutoriales, enfocados para orientar la creacin de sitios Web sencillos.

Utilizacin de Dreamweaver proporciona informacin completa sobre todaslas funciones.

Referencia

En Referencia se recogen todas las explicaciones de cdigo, etiquetas yatributos, extradas de diferentes libros.

Y diferentes opciones de Extensiones.


3


4/44


Recursos del si tio Web de Macromedia

El sitio Web de Macromedia ofrece apartados como el Centro de soporte,para las actualizaciones, ejemplos y ltimas noticias para sacar el mximopartido al programa.

El Centro de desarrolladoresproporciona herramientas y tutoriales. A travsde los Foros se pueden intercambiar ideas o compartir consejos tiles.

2. Entorno de trabajo

El espacio de trabajo de Dreamweaver permite ver las propiedades de losdocumentos y los objetos.

Adems, coloca muchas de las operaciones ms frecuentes en barras deherramientas para que pueda realizar cambios en los documentosrpidamente.

Figura 1 . Entorno de trabajo de Dreamweaver MX 2004


4


5/44


2.1. Elementos del entorno de trabajo

La pgina de iniciopermite abrir un documento reciente o crear un documentonuevo. Desde la pgina de inicio tambin puede profundizar sus conocimientossobre Dreamweaver mediante una visita guiada o un tutorial del producto.

La barra de herramientas Insertar contiene botones para la insercin dediversos tipos de objetos, como imgenes, tablas y capas, en un documento.Cada objeto es un fragmento de cdigo HTML que le permite establecerdiversos atributos al insertarlo. Por ejemplo, puede insertar una tabla haciendoclic en el botn Tabla de la barra Insertar. Si lo prefiere, puede insertar objetosutilizando el men Insertar en lugar de la barra Insertar.

La barra de herramientas Documento contiene botones que proporcionanopciones para diferentes vistas de la ventana de documento (como la vista

Diseo y la vista Cdigo), diversas opciones de visualizacin y algunasoperaciones comunes como la obtencin de una vista previa en un navegador.

La barra de herramientas Estndar(que no aparece en el diseo de espaciode trabajo predeterminado) contiene botones para las operaciones mshabituales de los mens Archivo y Edicin: Nuevo, Abrir, Guardar, Guardartodo, Cortar, Copiar, Pegar, Deshacer y Rehacer. Para mostrar la barra deherramientas Estndar, seleccione Ver > Barras de herramientas > Estndar.

La ventana de documento muestra el documento actual mientras lo estcreando y editando.

El inspector de propiedadespermite ver y cambiar diversas propiedades delobjeto o texto seleccionado. Cada tipo de objeto tiene diferentes propiedades.

El selector de etiquetas, que aparece en la barra de estado en la parte inferiorde la ventana de documento, muestra la jerarqua de etiquetas que rodean a laseleccin actual.

Los grupos de panelesson conjuntos de paneles relacionados apilados bajoun encabezado comn. Para ampliar un grupo de paneles, haga clic en laflecha de ampliacin situada a la izquierda del nombre del grupo; para

desacoplar un grupo de paneles, arrastre el punto de sujecin situado en elborde izquierdo de la barra de ttulo del grupo.

El panel de archivos permite gestionar los archivos y las carpetas, tanto siforman parte de un sitio de Dreamweaver como si se encuentran en un servidorremoto. El panel de archivos tambin proporciona una vista de todos losarchivos del disco local, como ocurre en el Explorador de Windows.

2.2. Barras de herramientas

Para mostrar y ocultar las barras de herramientas Ver > Barras de herramientas


5


6/44


Barra de herramientas Documento

La barra de herramientas contiene tambin algunos comandos y opcionesrelativos a la visualizacin del documento y a su transferencia entre los sitioslocal y remoto.

Barra de herramientas EstndarLa barra de herramientas contiene botones para las operaciones mshabituales de los mens Archivo y Edicin: nuevo, abrir, guardar, guardar todo,cortar, copiar, pegar, deshacer y rehacer.

Barra de herramientas Insertar

La barra de herramientas contiene botones para creare insertar objetos talescomo tablas e imgenes. Al pasar el puntero sobre un botn, aparece unadescripcin de la herramienta con el nombre del botn.

Los botones estn organizados en categoras. Para verlas haga clic en laflecha del men desplegable.

2.3. Inspector de propiedades

El Inspector de propiedades permite examinar y editar las propiedades mscomunes del elemento de pgina seleccionado actualmente, como texto o un

objeto insertado. El contenido del inspector de propiedades es distinto enfuncin del elemento seleccionado.


6


7/44


Ventana > Propiedades

2.4. Mens contextuales

Par acceder de forma rpida a los comandos y las propiedades ms tilesrelacionadas con la ventana o el objeto con el que est trabajando.

Haga clic con el botn derecho del ratn sobre el objeto o ventana.

2.5. Paneles

En Dreamweaver, los paneles se organizan en grupos. El panel seleccionadoen un grupo de paneles aparece como una ficha.

Para ampliar o contraer .

para cerrar, con el fin de que no aparezcan en la pantalla, o para maximizar.Tambin se puede acoplar a un panel existente o desacoplar, agrupndolo con

uno nuevo.

Para mover los paneles, clic en , apareciendo esta cruz de flechas .

Para desplazarse por los paneles es muy cmodo el teclado Control+Alt+Tab.

3. Definicin de un sitio local. Diferencias entre sitiolocal y sitio remoto.

Un sitio Web es un conjunto de documentos y de objetos vinculados, bajo undiseo similar u objetivo comn. Macromedia Dreamweaver MX 2004 es unaherramienta de creacin y administracin de sitios, por lo que puede utilizarlapara crear sitios Web completos, adems de documentos por separado.

El primer paso al crear un sitio Web consiste en planificarlo. Para obtenerresultados ptimos, disee y planifique la estructura del sitio Web antes decrear las pginas.

El siguiente paso consiste en configurar Dreamweaver para poder trabajar conla estructura bsica del sitio. Este es el paso ms importante: dejar bienconfigurado en qu carpeta vamos a colocar todo lo que vamos a disear, ydejar estructurado el sitio tal y como lo vamos a subir al servidor.


7


8/44


Por tanto el desarrollo de un sitio Web con Dreamweaver comienza en ladefinicin de una carpeta local para el sitio. En esta carpeta se guardarn todoslos archivos que lo compongan.

3.1. Configuracin de un sitio de Dreamweaver nuevo: carpetalocal

Sitio > Administrar sitios

Haga clic en el botn Nuevo y elija Sitio. Aparece el cuadro Definicin del sitiopara (y el nombre que le quiera dar)

La diferencia entre las pestaas BsicasyAvanzadases que con la primerase puede utilizar el asistente que nos guiar en la configuracin de la carpetalocal.

En la pestaa Avanzadas no tenemos asistente, por lo que convendr a losusuarios con experiencia, y a parte de la carpeta local, se pueden configurar lascarpetas: remota y la de prueba.


8


9/44


Definido nuestro sitio, aparece en el Panel de Archivos los archivos de los queconsta nuestro sitio (ahora vaco). Desde aqu podemos administrar, borrar,copiar, pegar, mover y abrir los archivos que componen el sitio como siestuviramos en el explorador de Windows.

3.2. Carpeta remota

La carpeta remota es el lugar en el que se almacenan los archivos para finesde prueba, colaboracin, produccin, implementacin. Se configura desde lapestaa Avanzadas de Sitio > Administrar sitios

Tras definir la carpeta local puede configurar la carpeta remota.

Determine cmo acceder a la carpeta remota y anote la informacin deconexin.

3.3. Diferencias entre sitio local y sitio remoto

La carpeta local es el directorio de trabajo. En Dreamweaver se conoce comositio local. En ella se almacenan los archivos con los que se est trabajando.

En la carpeta remota se almacenan los archivos, segn el entorno dedesarrollo, para fines de prueba, produccin, colaboracin, etctera. En


9


10/44


Dreamweaver esta carpeta se conoce como sitio remoto en el panel Archivos.En general, la carpeta remota suele colocarse en el equipo donde se ejecuta elservidor Web.

Las carpetas de datos locales y remotos permiten transferir archivos entre el

disco local y el servidor Web, lo cual facilita la administracin de los archivos enlos sitios de Dreamweaver.

En la carpeta del servidor de prueba, Dreamweaver procesa pginasdinmicas.

4. Creacin de una pgina con Dreamweaver

Volviendo a insistir en el punto de partida, cuando hacemos una web,previamente tenemos que tener bien claro el aspecto y la informacin quequeremos dar a la pgina.

Se recomienda que se haga una optimizacin previa de las imgenes tal ycomo se van a insertar, y que los textos se redacten en un editor de textos. Conesto ahorraremos tiempo y dudas a la hora de hacer la web.

Hay varias formas de seleccionar un nuevo documento para empezar a trabajaren l: con un documento en blanco, partiendo de un archivo de diseo deDreamweaver o utilizando una plantilla que defina el aspecto del documento y

establezca las partes que se puedan cambiar.

Creacin de un documento en blanco

Para empezar con las pginas de nuestro sitio

Archivo > Nuevo documento

Aparece el cuadro de Nuevo documento


10


11/44


En la lista de categora elegiremos Pgina bsica para crear un documentoHTML, al que vamos a llamar index.html, que va a ser nuestra pginaprincipal.

La guardamos Archivo > Guardar dentro de la carpeta anteriormenteconfigurada como nuestro sitio local.

Creacin de un documento basado en una archivo de diseoDreamweaver

Puede partir de estos archivos de diseos propuestos por el programa. Lospasos son los mismos que los de creacin de un documento nuevo, salvo queen este caso en vez de elegir Pgina bsica, escogeremos Hojas de estilosCSS. El documento CSS aparecer en la ventana del documento y se abrir en

la vista Cdigo.

Creacin de un documento basado en una planti lla existente

Esta vez partiremos de una plantilla. Los pasos a seguir son los mismos quepara crear un documento en blanco, salvo que ahora, en vez de elegir lapestaa General, elegimos la de Plantillas. Seleccione el sitio donde est laplantilla en la zona derecha del cuadro y en la izquierda seleccione la plantilla.


11


12/44


4.1. Modos de edicin en Dreamweaver

Se puede elegir entre tres vistas para visualizar el documento en el queestamos trabajando. Se eligen desde el men Ver o pulsando los botonescorrespondientes de la Barra de herramientas Documento:

La vista diseo es un entorno de diseo para el diseo visual de lapgina, la edicin visual y el desarrollo rpido de aplicaciones. En esta vista,Dreamweaver muestra una representacin visual del documentocompletamente editable, similar a la que aparecera en un navegador.

La vista cdigo es un entorno de codificacin manual para escribir yeditar cdigo HTML, JavaScript, cdigo de lenguaje de servidor, como porejemplo PHP o ColdFusion Markup Language (CFML) y otros tipos de cdigo.

Es posible ver el mismo documento en Cdigo y Diseo , en una solaventana de documento. Cuando la ventana de documento tiene una barra dettulo, sta muestra el ttulo de la pgina y, entre parntesis, el nombre y la rutadel archivo. Si se han realizado cambios que an no se han guardado, despusdel nombre del archivo Dreamweaver incluye un asterisco.

4.2. Definir las caractersticas de la pgina

Para cada pgina que cree en Dreamweaver, puede especificar laspropiedades de diseo y formato mediante el cuadro de dilogo Propiedadesde la pgina.Modificar > Propiedades de la pgina


12


13/44


El cuadro de dilogo Propiedades de la pgina permite especificar la familia yel tamao de fuente predeterminados, el color de fondo, los mrgenes, losestilos de los vnculos y otros muchos aspectos relacionados con el diseo depginas.

Puede asignar nuevas propiedades de pgina a cada pgina que cree, ascomo modificar las propiedades de las pginas existentes.

Cambio de ttulo

El ttulo de una pgina HTML ayuda a los visitantes del sitio a realizar unseguimiento de lo que ven mientras navegan, al tiempo que identifica la pginaen listas de historial y de marcadores.

Si no asigna ningn ttulo a una pgina, sta aparecer en la ventana delnavegador y en las listas de marcadores y de historial como Documento sinttulo.

Para cambiar el ttulo de una pgina, puede hacerlo de dos maneras:

Ver > Barra de herramientas > DocumentoModificar > Propiedades de la pgina

En el cuadro de texto Ttulo, introduzca el ttulo de la pgina y presione Intro.

Si est editando el ttulo en el cuadro de dilogo Propiedades de la pgina,haga clic en Aceptar.

El ttulo aparecer en la barra de ttulo de la ventana de documento (y en labarra de herramientas Documento, si sta se encuentra visible).

Imagen de fondo o un color de fondo para la pgina

Modificar > Propiedades de la pgina > Aspecto


13


14/44


Para establecer una imagen de fondo, haga clic en el botn Examinar, vayahasta la imagen y seleccinela. Como alternativa, introduzca la ruta de accesoa la imagen de fondo en el cuadro Imagen de fondo.

Dreamweaver forma un mosaico con la imagen de fondo (la repite) si sta noocupa toda la ventana del navegador. Para evitar que se forme un mosaico conla imagen de fondo, utilice hojas de estilo en cascada (CSS) para desactivar laformacin de mosaicos con la imagen.

Para definir un color de fondo, haga clic en el cuadro Color de fondo yseleccione un color del selector de color.

Definicin de colores predeterminados para el texto

Defina colores predeterminados para el texto normal, vnculos, vnculos

visitados y vnculos activos en el cuadro de dilogo Propiedades de la pgina obien elija una combinacin de colores preestablecida para definir los colores delfondo de la pgina y del texto.

Modificar > Propiedades de la pgina

Seleccione colores para las opciones Color del texto, Color de los vnculos,Vnculos visitados y Vnculos activos.

Para elegir una combinacin de colores preestablecida segura para la Web,es decir, que sus autores nos aseguran que se van a ver tal cual en todos losnavegadores ir a


14


15/44


Comandos > Establecer combinacin de colores

y seleccione un color de fondo y una combinacin de colores de texto yvnculos.

El cuadro de muestra da una idea de cul ser la apariencia de la combinacinde colores en el navegador.

Propiedades de pgina CSS frente a propiedades de pgina HTML

De forma predeterminada, Dreamweaver utiliza CSS para asignar propiedadesde pgina. Si en su lugar desea utilizar etiquetas HTML, debe especificarlo enel cuadro de dilogo Preferencias.

Edicin > Preferencias

Y desactive la casilla de verificacin Utilizar CSS en lugar de etiquetas HTML,en la categora General.

4.3. Insertar texto

Dreamweaver permite aadir texto a pginas Web escribiendo el textodirectamente en la ventana del documento, copiando y pegando texto de otro


15


16/44


documento o de otra aplicacin. En este ltimo caso, Dreamweaver, nomantiene el formato del texto pero s los saltos de lnea.

Copiar y pegar texto de Word

Puede aadir contenido de un documento Word, seleccionando, copiando ypegando. Al aadir contenido a una pgina, Dreamweaver convierte elcontenido en HTML y lo copia en una pgina Web. Puede editar el contenidoen Dreamweaver.

Para importarse el archivo completo

Archivo > Importar > Documento de Word

Dar formato al texto

La aplicacin de formato a texto en Dreamweaver es similar a la utilizacin deun programa estndar de tratamiento de texto. Puede establecer estilos deformato predeterminados (Prrafo, Encabezado 1, Encabezado 2, etc.) para unbloque de texto, cambiar la fuente, el tamao, el color y la alineacin del textoseleccionado o aplicar estilos de texto, como negrita, cursiva y subrayado.

Pero el mtodo preferido para aplicar formato al texto y presentar las pginaWeb, es la utilizacin de las hojas de estilo. Ayuda a controlar mejor el diseode una pgina Web al separar los elementos visuales (fuentes, colores) de la

estructura lgica de la pgina. Lo que facilita unas descargas ms rpidas y unmantenimiento ms fcil.

De forma predeterminada, Dreamweaver aplica formato a texto mediante hojasde estilos en cascada (CSS). Si necesita utilizar etiquetas HTML en lugar deestilos CSS, debe cambiar las preferencias de formato de textopredeterminadas de Dreamweaver en

Edicin > Preferencias (casilla de verificacin Utilizar CSS en lugar de etiquetasHTML)

Inspector de propiedades en la aplicacin de formato al texto

El inspector de propiedades de texto permite aplicar un estilo y un formato altexto seleccionado actualmente.

Dreamweaver realiza un seguimiento de las propiedades de formato que elusuario asigna a todos los elementos del texto y asigna una etiqueta a cada

uno de ellos mediante una convencin de asignacin de nombres: Style1,Style2, Style3, Stylen. Si asigna los mismos atributos de formato a dos o ms


16


17/44


elementos del texto, Dreamweaver asigna una etiqueta a los elementos quetengan el mismo ttulo; de este modo, se eliminan los nombres de estiloredundantes.

La etiqueta que Dreamweaver aplica a un cuerpo de texto determinado se

puede aplicar posteriormente mediante el men emergente Estilo, lo quepermite crear una biblioteca de estilos dentro de una pgina y aplicar esosmismos estilos simplemente seleccionando el elemento de texto en la pgina yseleccionando un estilo en el men emergente Estilos.

Aplicacin de formato a los prrafos

Para aplicar una etiqueta de prrafo o encabezado, site el punto de insercindonde quiere el prrafo o el encabezado.

En Texto > Formato de prrafo o con el Inspector de propiedades en Formato

elija lo que ms convenga

La etiqueta HTML asociada con el estilo seleccionado (por ejemplo, h1 paraEncabezado 1, h2 para Encabezado 2) se aplicar a todo el prrafo.

Seleccione Ninguno para quitar un formato de prrafo.

Aadir un espaciado de prrafo

Para crear un nuevo prrafo pulse Intro. En este caso se inserta una lnea enblanco de espacio entre los prrafos.

En caso de querer aadir una nica lnea de espacio, y no ese espacio en

blanco, presione Mays+Intro o Insertar > HTML > Caracteres especiales >Salto de lnea.

Utilizacin de reglas horizontales

Son muy tiles para organizar la informacin y separar visualmente texto.

Insertar > HTML > Regla horizontal

o bien en la categora HTML de la barra de herramientas Insertar

Para modificarla, Ventana > Propiedades y en el Inspector de propiedadesespecificamos sus caractersticas


17


18/44


Creacin de listas ordenadas y sin ordenar

Puede crear listas ordenadas (numeradas) o sin ordenar (vietas). Adems, laslistas se pueden anidar. Una lista anidada es aquella que contiene otra lista.

Coloque el punto de insercin en el lugar donde quiere la lista

Texto > Lista y elija el tipo de lista que desea.

Tambin puede seleccionar el prrafo que quiere convertir en lista y elegir eltipo de lista desde el men Texto > Lista.

Para las listas anidadasseleccione los elementos de la lista que quiera anidary haga clic en el botn de sangra del Inspector de propiedades o elija Texto >Sangra.

Cambio del color del texto

Puede cambiar el color del texto seleccionado de modo que el nuevo colorprevalezca sobre el color establecido en Propiedades de la pgina. Si no se haestablecido ningn color de texto en Propiedades de la pgina, se utilizar elnegro como color predeterminado.

Puede elegir, seleccionando primero el texto, desde el Inspector de

propiedades o desde Texto > Color.

Para volver al color predeterminado del texto, haga clic en el botn delInspector de propiedades.

Insercin de caracteres especiales

Insertar > HTML > Caracteres especiales


18


19/44


Primero aparecen los ms comunes y en Otro... puede elegir ms.

Adicin de espacio entre caracteres

HTML slo permite un espacio entre caracteres; para aadir espacio adicional

en un documento debe insertar un espacio indivisible Control+Mays+Espacio.

Tambin en Insertar > HTML > Caracteres especiales > Espacio invisible

o bien en la categora Texto de la barra Insertar hacer clic en el botn .

4.5. Incluyendo imgenes

En Macromedia Dreamweaver MX 2004, puede trabajar en la vista Diseo o enla vista Cdigo para insertar imgenes en un documento. Al aadir imgenes a

un documento de Dreamweaver, puede establecer o modificar las propiedadesde imagen y ver los cambios directamente en la ventana de documento.

Existen muy diversos formatos de archivo grfico, aunque para pginas Webgeneralmente se utilizan tres formatos de archivo grfico: GIF, JPEG y PNG.Actualmente, GIF y JPEG son los formatos de archivo que cuentan con mayorcompatibilidad y pueden verse en la mayora de los navegadores.

Los archivos GIFutilizan un mximo de 256 colores y son idneos paravisualizar imgenes con grandes reas de color homogneo, como barras denavegacin, botones, iconos, logotipos u otras imgenes con colores y tonosuniformes.

El formato de archivo JPGes el mejor para imgenes fotogrficas o de tonoscontinuos, ya que puede contener millones de colores. A medida que la calidadde un archivo JPEG aumenta, tambin lo hace su tamao y el tiempo que tardaen descargarse.

Dreamweaver proporciona unas funciones bsicas de edicin de imgenes quepermiten modificar las imgenes sin tener que iniciar una aplicacin externa deedicin de imgenes como Macromedia Fireworks.


19


20/44


Insercin de una imagen

Al insertar una imagen en un documento de Dreamweaver, el programa generaautomticamente una referencia al archivo de imagen en el cdigo HTML. Paraasegurarse de que esta referencia es correcta, el archivo de imagen deber

estar en el sitio actual. Si no lo est, Dreamweaver le preguntar si deseacopiar el archivo en el sitio.

Coloque el punto de insercin en el lugar de la ventana del documento dondequiere que aparezca la imagen.

En la categora Comn de la barra de herramientas Insertar, haga clic en el

botn de Imagen .

En el cuadro de dilogo que aparece elija la imagen que quiera. Al insertarse la

imagen se abre automticamente el Inspector de propiedades

Puede cambiar el ancho, el alto, darle nombre o establecer el texto alternativode manera que al pasar el ratn por encima de la imagen aparezca una breveexplicacin de la misma.

Para alinear la imagen es muy til el men que se abre al seleccionar la

imagen y abrir el men emergente con el botn derecho del ratn.

En este men emergente Imagenhay mltiples posibilidades.

En el Inspector de propiedades de la imagen hay un apartado especfico

Cambio de tamao de una imagen

Si cambia el tamao de una imagen visualmente en Dreamweaver, elnavegador del usuario deber escalar la imagen cuando se cargue la pgina.


20


21/44


Esto puede hacer aumentar el tiempo de descarga de la pgina y puedeprovocar que la imagen no se vea correctamente en el navegador del usuario.Si desea reducir el tiempo de descarga y conseguir que todas las instancias deuna imagen tengan el mismo tamao, utilice una aplicacin de edicin deimgenes.

Puede cambiar el tamao seleccionando la imagen y con los manejadores detamao que aparecen dar el tamao que desea . En caso de que quierarespetar la relacin ancho y alto, presione Mays. mientras arrastra elmanejador.

Para mayor precisin especificar el nuevo tamao en los apartados de altura yanchura del Inspector de propiedades. Para volver al tamao original haga clicen el botn Restablecer tamao .

Recorte de una imagen

Se puede hacer desde el Inspector de propiedades, botn Recorte o desdeModificar > Imagen > Recortar

Aparecern manejadores de recorte alrededor de la imagen.

Arrastre los manejadores hasta la zona que quiere visualizar y presione Intro.

En caso de querer deshacer el recorte vaya a Edicin > Deshacer o Ctrl+Z.

4.5.1. Crear una imagen de sust itucin

Una imagen de sustitucin es una imagen que, al visualizarse en unnavegador, cambia cuando el puntero pasa sobre ella. Son conocidas tambinpor imgenes Rollover.

Se puede crear una imagen de sustitucin con dos archivos de imgenes: laimagen principal (la que aparece al cargarse inicialmente la pgina) y la imagensecundaria (la que aparece al pasar el puntero sobre la imagen principal).Ambas imgenes deben tener el mismo tamao. Si tienen tamaos distintos,Dreamweaver cambia automticamente el tamao de la segunda imagen paraque se ajuste a las propiedades de la primera.

Site el puntero de insercin donde quiera que aparezca la imagen desustitucin. En la categora Comn de la barra herramientas Insertar, haga clicen el botn


21


22/44


o bien Insertar > Objetos de imagen > Imagen de sustitucin

Rellene el cuadro que aparece con el nombre de la imagen de sustitucin, laubicacin de imagen principal y la secundaria. El texto alternativo o la accin arealizar para que aparezca la imagen de sustitucin.

Para ver el efecto F12 o Archivo > Vista previa en el navegador.

4.6. Creando vnculos

Una vez creadas sus pgina HTML deber establecer las conexiones entre susdocumentos y otros documentos. Tambin puede establecer vnculos concualquier texto o imagen de cualquier lugar del mismo documento.

Los vnculos se pueden crear y administrar de varias forma distintas. Algunosdiseadores de sitios Web prefieren crear vnculos con pginas o archivos quetodava no existen cuando estn trabajando, mientras que otros prefieren crear

primero todos los archivos y las pginas y aadir los vnculos ms tarde.

4.6.1. Aspectos bsicos de ubicacin y rutas de documentos

A la hora de crear vnculos resulta fundamental conocer la ruta de archivo entreel documento desde el que establece el vnculo y el documento con el que loestablece.

Cada pgina Web tiene una direccin exclusiva, denominada URL (LocalizadorUniforme de Recursos, Uniform Resource Locator).


22


23/44


Sin embargo, cuando se crea un vnculo local (un vnculo de un documento conotro documento del mismo sitio), no suele ser necesario especificar el URLcompleto del documento de destino.

En este caso se especifica una ruta relativa desde el documento actual o desdela carpeta raz del sitio.

En lugar de escribir las rutas, conviene acceder a los vnculos a travs delbotn Examinar, mtodo que asegura la correcta introduccin de la ruta.

Existen tres tipos de rutas de vnculos:

Rutas absolutas

Proporcionan la URL completa y se utilizan para vincular con pginas Web

externas.No se aconseja poner rutas absolutas para vnculos locales porque simueve el sitio a otro dominio se rompern todos los vnculos de las rutasabsolutas locales.

Rutas relativas

Son las ms adecuadas para los vnculos locales. Particularmente tilescuando el documento actual y el documento con el que se establece elvnculo se encuentran en la misma carpeta. En una ruta relativa al

documento se omite la parte del URL absoluto que coincide en losdocumentos actual y vinculado y se indica nicamente la parte de la rutaque difiere.

Rutas relativas a la raz del sitio

Las rutas relativas a la raz del sitio indican la ruta desde la carpeta raz delsitio hasta un documento. Puede utilizar este tipo de rutas si trabaja con unsitio Web grande que usa varios servidores o un servidor que alberga variossitios distintos. Sin embargo, si no est familiarizado con este tipo de ruta, leresultar ms cmodo mantener las rutas relativas al documento.

Una ruta relativa a la raz del sitio comienza por una barra diagonal, querepresenta la carpeta raz del sitio.

Sin embargo, al mover o cambiar el nombre de documentos con vnculosrelativos a la raz, deber actualizar esos vnculos, incluso aunque las rutasde los documentos no hayan cambiado en su relacin mutua.

4.6.2. Tipos de vnculos

Puede crear varios tipos de vnculos en un documento:


23


24/44


- Un vnculo con otro documento o archivo, como un archivo grfico, depelcula, PDF o de sonido

- Un vnculo de anclaje con nombre, que salta a un emplazamiento

especfico dentro de un documento

- Un vnculo de correo electrnico, que crea un mensaje de correoelectrnico en blanco con la direccin del destinatario ya rellenada

- Vnculos nulos y de script, que permiten adjuntar comportamientos a unobjeto o crear un vnculo que ejecuta cdigo JavaScript.

Vincular mediante el Inspector de propiedades

Seleccione el texto o imagen, que va a servir de enlace, en la vista Diseo de laventana del documento.

Ventana > Propiedades para abrir el Inspector de propiedades

Bien si se ha seleccionado texto o una imagen, el Inspector de propiedadesoportuno tiene una zona exclusiva para establecer vnculos

Al hacer clic en la carpeta podemos localizar y seleccionar el archivo con el quequeremos vincular.

En este cuadro de dilogo de Seleccionar archivo podemos elegir entre si laruta es relativa al documento o a la raz del sitio.

Para una pgina Web, por el contrario, la ruta que se debe escribir debe ser laabsoluta.

El documento vinculado puede aparecer en un lugar distinto de la ventana o enel marco actual, segn lo que se seleccione entre las diferentes opciones delmen Dest. del Inspector de propiedades.

_blank carga el documento vinculado en una nueva ventana sin nombre delnavegador.

_parent carga el documento vinculado en el marco padre o en la ventanapadre del marco que contiene el vnculo.


24


25/44


_self carga el documento vinculado en el mismo marco o la misma ventanaque el vnculo. Este destino es el predeterminado, por lo que normalmente noes preciso especificarlo.

_top carga el documento vinculado en la ventana completa del navegador,

eliminando de esta forma todos los marcos.

Vincular mediante el icono de sealizacin de archivos


Arrastre el icono de sealizacin de archivos situado a la derecha del cuadrode texto Vnculo del Inspector de propiedades y seale otro documento delpanel Archivos. El cuadro de texto Vnculo se actualizar para mostrar elvnculo. Libere el botn del ratn.

Vincular con el comando Hipervnculo


Insertar > Hipervnculo

o con el botn Hipervnculo de la categora Comn de la barra Insertar

Aparecer el cuadro para que lo complete

4.6.3. Establecer vnculos con una parte especfica deldocumento: anclas

Podemos crear un vnculo con una parte de nuestro documento, peropreviamente hay que identificarlo de alguna manera. Para ello le vamos a darun nombre.


25


26/44


Nos situamos en el lugar al que nos queremos dirigir.

Insertar > Anclaje con nombre

o bien clic en el botn de la categora Comn de la barra de Insertar

Nos aparece el cuadro para darle nombre a ese lugar

Un marcador de anclaje aparecer en el punto de insercin .

A continuacin seleccionamos el texto o imagen que nos van a servir de enlacepara llevarnos a ese lugar de anclaje con nombre.

En la zona Vnculo del Inspector de propiedades introducimos el signo (#) y acontinuacin el nombre que del anclaje que nos interesa. En caso de eseanclaje est en otro archivo distinto de la misma carpeta, se pondra antes de# el nombre y la extensin de ese archivo.

Esto mismo lo podemos hacer con el icono de sealizacin o el comandohipervnculo, de la forma anteriormente explicada.

4.6.4. Establecer vnculos con correos electrnicos

En la vista Diseo de la ventana de documento, coloque el punto de insercindonde desea que aparezca el vnculo de correo electrnico o seleccione eltexto o la imagen que desea que aparezca como vnculo de correo electrnico.

Insertar > Vnculo de correo electrnico

o bien en la categora Comn de la barra Insertar hacer clic en el botn

Complete el cuadro


26


27/44


En el caso de querer hacer el vnculo a travs del Inspector de propiedades, se

tendr que escribir en rea reservada al Vnculo ,la palabra mailto: seguido de la direccin electrnica (sin espacio entre losdos puntos y la direccin)

4.6.5. Barra de navegacin

Una barra de navegacin se compone de una imagen o un conjunto deimgenes cuya visualizacin cambia segn las acciones que realice el usuario.

Antes de usar el comando Insertar barra de navegacin, debe crear unconjunto de imgenes para los estados de visualizacin de cada elemento denavegacin. (Considere el elemento de la barra de navegacin como si fuera

un botn, ya que cuando el usuario hace clic en l, le lleva a otra pgina).

Insertar > Objetos de imagen > Barra de navegacin

o bien en la categora Comn de la barra Insertar hacer clic en el botn

Aparecer este cuadro que tiene que completar con lo anteriormente creado.

Para modificar la barra de navegacin

Modificar > Barra de navegacin

En este cuadro puede realizar los cambios necesarios.


27


28/44


4.6.6. Mapas de imagen

Un mapa de imagen es una imagen que se ha dividido en regiones o zonasinteractivas. Cuando el usuario hace clic en una zona interactiva, se realiza unaaccin, por ejemplo, se abre un archivo nuevo.

En la ventana del documento inserte la imagen.

Aparecer el Inspector de propiedades y en la parte baja la zona reservadapara elaborar un mapa con la imagen. Si no lo ve haga clic en la flecha que seencuentra a la derecha del Inspector de propiedades .

Introduzca un nombre exclusivo para el mapa de imagen.

A continuacin vamos a especificar las reas. Escogeremos bien la

rectangular, circular o poligonal, segn lo que nos interese y con laflecha cerraremos la forma.

Despus de crear la zona interactiva nos aparecer el Inspector depropiedades de las zonas intereactivas para especificar lo que queremos.


28


29/44


Para modificar el mapa solamente nos situamos en las zonas interactivascreadas y podremos moverlas, cambiar su tamao, cambiar sus vnculos.

4.6.7. Comprobacin de vnculos

Dreamweaver puede verificar los vnculos establecidos con los documentos delsitio por si hay algn vnculo roto o archivos sin referencia.

Los vnculos externos no los verifica pero puede elaborar una lista con todosellos.

Para comprobar los vnculos de la pgina actual

Archivo > Comprobar pgina > Comprobar vnculos

El panel donde aparecer el informe es el inferior de la pantalla, llamadoResultados, en la pestaa Verificador de vnculos.

Para comprobar los vnculos de todo el sitio

Sitio > Comprobar vnculos en todo el sitio

4.7. Ayudas a la maquetacin: reglas y cuadrculas, tablas y

plantillas

4.7.1. Utilizacin de reglas, cuadrculas e imagen de rastreopara disear pginas

Las reglas y cuadrculas son tiles como ayudas visuales para dibujar, ubicar ocambiar el tamao de los elementos en la vista de diseo de la ventana dedocumento.

Ver > Reglas > Mostrar

Estas son las opciones que tienes relacionadas con la herramienta Regla

Ver > Cuadrcula > Mostrar cuadrcula

Estas son las opciones relacionadas con la herramienta Cuadrcula


29


30/44


Una imagen de rastreoes una imagen JPEG, GIF o PNG que se sita en elfondo de la ventana de documento. Puede ocultar la imagen, configurar suopacidad y cambiar su posicin.

La imagen de rastreo slo se encuentra visible en Dreamweaver. sta nuncapuede verse en la pgina desde un navegador. Cuando est visible la imagende rastreo, la imagen y el color de fondo reales no estn visibles en la ventanade documento; no obstante, se encontrarn visibles cuando la pgina semuestre en un navegador.

Ver > Imagen de rastreo > Cargar

Especifique la transparencia.

Estas son las opciones relacionadas con la herramienta Imagen de rastreo

4.7.2. Tablas

Las tablas constituyen una herramienta muy eficaz para presentar datos detabla y establecer el diseo de texto y grficos en una pgina HTML.

Insercin de una tabla y adicin de contenido

En la vista de diseo coloque el punto de insercin en el lugar donde quiere latabla

Insertar > Tabla

o bien en la categora Comn de la barra de Insertar haga clic en el botn

Aparece el cuadro de dialogo Insertar tabla


30


31/44


Los datos se pueden traer de otra tabla elaborada con otra aplicacin (por

ejemplo, Microsoft Excel) y guardados en un formato de texto delimitado (conelementos separados por tabuladores, comas, dos puntos, puntos y comas uotros delimitadores) se pueden importar a Dreamweaver.

Archivo > Importar > Datos de tablaInsertar > Objetos de tabla > Importar datos de tabla

Aparece el cuadro de dialogo para importar los datos


31


32/44


As mismo podemos exportar una tabla hecha en Dreamweaver a un archivo detexto delimitado.

Archivo > Exportar >Tabla

Seleccionar y dar formato a las tablas

Hay que distinguir entre seleccionar una tabla, filas y celdas.

Seleccionar una tablaHay varios procedimientos como Modificar > Tabla > Seleccionar tabla,hacer clic en la esquina superior izquierda de la tabla. Cuando una celdaest seleccionada podemos seleccionar toda la tabla en Edicin >Seleccionar todo

Seleccionar filas y columnas

Situar el puntero en el borde izquierdo de una fila o en el borde superior dela columna. Cuando el cursor se convierta en una flecha de seleccinarrastre para seleccionar lo que quiera.

Seleccionar celdasHay varios procedimientos como presionar la tecla Control y hacer clic en lacelda deseada

A la hora de dar formato a tablas en la vista Diseo, puede definir propiedadesque se apliquen a toda la tabla o a filas, columnas o celdas seleccionadas de lamisma. Al definir el valor de una propiedad como, por ejemplo, el color de fondoo la alineacin, para toda la tabla y otro valor para celdas individuales, elformato de celda tiene prioridad sobre el formato de fila, que a su veztiene prioridad sobre el formato de tabla.

El orden de prioridad en el formato de tabla es el siguiente:

1 Celdas2 Filas3 Tabla

Por ejemplo, si establece un color de fondo azul para una sola celda y, acontinuacin, establece el color de fondo de toda la tabla como amarillo, lacelda azul no cambiar a amarillo, ya que el formato de celda tiene prioridadsobre el formato de tabla.

Al seleccionar lo que nos interesa (tabla, fila, columna o celda) aparece elInspector de propiedades donde podemos ver y modificar las propiedades.


32


33/44


Utilizacin de un esquema de diseo para aplicar formato a tabla

Seleccione la tabla que le interese

Comandos > Formatear tabla

Aparece el cuadro de dialogo Formatear tabla personalizando las opciones

como desee.

Modificar tabla

Modificar > Tablao bien utilizando el men emergente del botn derecho del ratn en Tabla

Puede combinar, dividir, eliminar, insertar.


33


34/44


Hay que puntualizar que para combinar tendremos que tener seleccionadasdos celdas consecutivas, haciendo clic en ambas con el Control presionado.Para dividir solamente tiene que seleccionarse una celda.

Anidacin de tablas

Una tabla anidada es una tabla dentro de una celda o de otra tabla. Puedeaplicar formato a una tabla anidada como lo hara con cualquier otra tabla; no

obstante, su ancho estar limitado por el ancho de la celda en la que aparece.Seleccione la celda donde quiere insertar otra tabla

Insertar > Tabla

Complete el cuadro de dialogo que aparece con las caractersticas que quieradarle a la nueva tabla.

La tabla aparecer en la tabla existente.

Ordenacin de tablas

Puede ordenar las filas de una tabla en funcin del contenido de una solacolumna. Tambin puede realizar una operacin ms compleja ordenndola enfuncin del contenido de dos columnas.

Lo que no se pueden ordenar son tablas con celdas combinadas.

Comandos > Ordenar tabla

Complete el cuadro de dialogo que aparece segn le convenga.

4.7.3. Capas

Una capa es un elemento de pgina HTML que se puede colocar en cualquierlugar del documento. Las capas pueden contener texto, imgenes u otroscontenidos que se pueden situar en el cuerpo de un documento HTML.

Las capas se emplean para disear la pgina. Puede colocar unas capasdelante o detrs de otras, ocultar algunas capas mientras muestra otras y

mover capas por la pantalla. Puede colocar una imagen de fondo en una capay, a continuacin, insertar una segunda capa, con texto y un fondo


34


35/44


transparente, delante de la primera. Las capas proporcionan una granflexibilidad a la hora de colocar contenido.

Sin embargo, los navegadores Web anteriores a Microsoft Internet Explorer 4.0y Netscape Navigator 4.0 no pueden mostrar capas y los navegadores de la

versin 4 no muestran las capas de una forma totalmente coherente.

Insercin de una capa

Insertar > Objetos de diseo > Capa

o bien en la categora de Diseo de la barra Insertar haga clic en el botn .

En la vista Diseo arrastre el ratn si quiere una sola capa y para dibujar variascapas consecutivamente arrastre mientras presione la tecla Control.

Para ver los bordes de la capa o las marcas de cdigo de capa

Ver > Ayudas visuales > Bordes de capaVer > Ayudas visuales > Elementos visibles

Pueden anidarse capas creando una dentro de otra.

Para mover la capa simplemente hay que pinchar en uno de sus bordes yarrastrarla por la pantalla. Tambin podemos cambiar el tamao moviendo lospuntos de control de su recuadro delimitador, alinearla.

Propiedades de capa

Al seleccionar la capa se abre el Inspector de propiedades

Puede seleccionar varias capas presionando la tecla Mays. mientras vaseleccionando cada una de las capas.

En este caso el Inspector de propiedades afectar a todas las capasseleccionadas


35


36/44


Administ racin de capas

Se hace desde el panel Capas

Ventana > Capas

Aparecern todas las capas, incluidas las anidadas, que aparecen relacionadascon las capas padres.

Utilice el Inspector de propiedades o el panel Capas para cambiar el orden deapilamiento de las capas. La capa que figura en la parte superior de la lista del

panel Capas es la primera en el orden de apilamiento y aparece delante de lasotras capas. En el cdigo HTML, el orden de apilamiento o el ndice z de lascapas determina el orden en que se dibujan las capas en un navegador. Puedecambiar el ndice z para cada capa mediante el panel Capas o el inspector depropiedades.

Con respecto a la visibilidad, para que mientras trabaja se vea una u otra capa,en el panel de Capas aparece un icono representativo.

El ojo no aparece si no se especifica la visibilidad.

Para evitar el solapamiento de unas capas con otras al moverlas o cambiar sutamao, use la opcin Evitar solapamiento.

Conversin de capas en tablas

En vez de utilizar tablas o el modo de diseo para crear el diseo, algunosdiseadores de sitios Web prefieren trabajar con capas. Dreamweaver permitecrear el diseo con capas para despus, si se desea, convertirlas en tablas.Por ejemplo, quiz necesite convertir las capas en tablas si se precisa lacompatibilidad con navegadores anteriores a la versin 4.0.

Puede alternar entre capas y tablas para ajustar y optimizar el diseo de lapgina. No puede convertir una tabla o capa concreta de una capa, deber

convertir las capas en tablas y las tablas en capas en toda la pgina.


36


37/44


Es conveniente evitar el solapamiento porque sino no se pueden crear lastablas.

Modificar > Convertir > Capas en tablas

4.8. Planti llas

Una plantilla de Macromedia Dreamweaver MX 2004 es un tipo especial dedocumento que sirve para crear un diseo de pgina fijo. Al disear unaplantilla, especifica qu reas de los documentos basados en esa plantillapueden ser editadas por los usuarios. De esta manera se agiliza mucho elproceso de creacin de un sitio web.

Un documento que se crea a partir de una plantilla permanece conectado a ellay al modificarse la plantilla, automticamente cambian los documentos basadosen ella.

Una plantilla contiene cuatro tipos de regiones:

Regin editableEs una regin no bloqueada de un documento basado en plantilla, es decir,una seccin que el usuario de la plantilla puede editar.

Regin repetidaEs una seccin del diseo del documento que se define para que se repita.Por ejemplo, puede definir que una fila de una tabla se repita. Normalmente,las secciones repetidas son editables para que el usuario de la plantillapueda cambiarlo.

Regin opcionalEs una seccin de la plantilla que se especifica como opcional, tanto paracontenido como para imagen. El usuario controla si se mostrar.

Un atributo de etiqueta editable

Por ejemplo, se puede bloquear qu imagen aparece en el documento, perodejar que el usuario de la plantilla establezca la alineacin.

4.8.1. Visualizacin de la plantilla en la vista diseo

En las plantillas, las regiones editables aparecen en la vista Diseo de laventana de documento rodeadas por contornos rectangulares del color deresaltado predefinido.

En la esquina superior izquierda de cada regin aparece una pequea ficha, enla que se muestra el nombre de la regin.


37


38/44


Puede identificar un archivo de plantilla observando la barra de ttulo de laventana de documento. La barra de ttulo de un archivo de plantilla contiene lapalabra y la extensin del archivo es .dwt.

Adems de los contornos de las regiones editables, toda la pgina aparece

rodeada por un contorno de otro color, con una ficha en la parte superiorderecha en la que figura el nombre de la plantilla en la que se basa eldocumento. Este rectngulo resaltado le recuerda que el documento estbasado en una plantilla y que no se puede cambiar nada que est fuera de lasregiones editables.

4.8.2. Crear una planti lla

Abra el documento que desea guardar como plantilla.

En la categora Comn de la barra de herramientas Insertar, haga clic en el

botn de Crear plantilla .

Gurdelo como plantilla, Archivo > Guardar como plantilla. Dreamweaverguarda el archivo de plantilla en la carpeta Templates del sitio en la carpeta razlocal del sitio, con la extensin de archivo .dwt. Si no existe la carpetaTemplates en el sitio, Dreamweaver la crear automticamente cuando guardeuna plantilla nueva.

4.8.3. Creacin de regiones en la plantil la

Regiones editables

Seleccione el texto o el contenido que desea definir como regin editable

Insertar > Objetos de plantilla > Regin editableo bien en la categora Comn de la barra de herramientas Insertar, haga clic en

el botn .

En el cuadro que aparece introduzca un nombre exclusivo a la regin editable


38


39/44


La regin editable aparece limitada por un contorno rectangular resaltado en laplantilla con el color de resaltado definido en las preferencias. En la esquinasuperior izquierda de la regin ver una ficha con el nombre de la regin.

Si ha marcado una regin del archivo de plantilla como editable y despus

desea bloquearla de nuevo (convertirla en no editable en los documentosbasados en la plantilla) vaya a

Modificar > Plantillas > Quitar formato de plantilla

Regiones repetidas

Antes de empezar advertir que una regin repetida no es una regin editable.Hay que insertar una regin editable en una regin repetida para que el usuariopueda cambiarla.

Seleccione el texto o contenido que desea definir como Regin repetida.

Insertar > Objetos de plantilla > Regin repetidao bien en la categora Comn de la barra de herramientas Insertar, haga clic en

el botn .

En el cuadro que aparece introduzca un nombre exclusivo a la regin repetida.

Tambin puede especificar una Tabla repetida con el botnintroduciendo en el cuadro que sale a continuacin los valores que quiera.

Regiones opcionales

La forma de definirlas es la misma que las anteriores, salvo que el botn en

este caso es .

Atributos editables en no editables

En la ventana de documento, seleccione un elemento para el que desee definirun atributo de etiqueta editable.

Modificar > Plantillas > Hacer editable el atributo


39


40/44


Complete el cuadro que aparece

4.8.4. Apertura de una plantil la para editarla

Ventana > Activos

Seleccione la categora Plantillas con el botn .

Se enumerarn todas las plantillas disponibles para el sitio y se muestra unavista previa de la misma.

Para editarla haga clic en el botn , o doble clic en el nombre de la plantilla.

Modifique la plantilla y guarde los cambios.

Dreamweaver le pedir que actualice las pginas basadas en la plantilla. Si nodesea actualizarlos clic en No actualizar.

4.8.5. Documentos basados en planti llas

Archivo > Nuevo

Elegimos la pestaa de Plantillas en el cuadro que nos aparece yseleccionamos la plantilla a partir de la cual queremos basar nuestra nuevapgina.


40


41/44


Tambin es posible crear un nuevo documento y despus aplicarle una plantillaseleccionndola de la paleta Plantillas (Templates) y arrastrndola hacia eldocumento, o pulsando el botn Aplicar.

4.9. Marcos

Un marco es una zona de una ventana de navegador que puede mostrar undocumento HTML independiente de lo que se muestra en el resto de laventana.

Un conjunto de marcos es un archivo HTML que define el diseo y laspropiedades de un conjunto de marcos.

Para ver un conjunto de marcos en un navegador, introduzca el URL delarchivo de conjunto de marcos; el navegador abre entonces los documentosque deben mostrarse en los marcos.

El archivo de conjunto de marcos de un sitio suele llamarse index.html. As,cuando el visitante no especifica ningn nombre de archivo, este archivo semuestra de forma predeterminada.

El conjunto de marcos ms normal es el que se divide en tres: la cabecera conel logotipo y que no cambia, el marco de la izquierda (estrecho) con losvnculos para moverse por el sitio y el marcho de la derecha (el mayor) que vamostrando los distintos contenidos.

En realidad los marcos son contenedores que albergan documentos y que secombinan para mostrar los documentos en una sola pgina.

4.9.1. Utilizar marcos: ventajas y desventajas

El uso ms comn de los marcos es la navegacin.

Sin embargo, el diseo con marcos puede resultar complicado y, en ocasiones,las pginas Web que no los incluyen logran prcticamente los mismosobjetivos.

Por ejemplo, si desea que la barra de navegacin aparezca a la izquierda,puede reemplazar la pgina por un conjunto de marcos o, simplemente, incluir


41


42/44


la barra de navegacin en todas las pginas del sitio. Aunque no utiliza marcos,la siguiente imagen muestra un diseo de pgina que los imita.

Hay muchos diseadores Web profesionales que prefieren no utilizar marcos ymuchas personas que navegan por la Web a las que no les gustan. Esto suele

deberse a que encontraron sitios que utilizaban los marcos incorrecta oinnecesariamente (por ejemplo, un conjunto de marcos que vuelve a cargar elcontenido de los marcos de navegacin cada vez que el visitante hace clic enun botn de navegacin). Cuando se utilizan bien los marcos (por ejemplo,para incluir controles de navegacin estticos en un marco permitiendo almismo tiempo que cambie el contenido de otro), pueden resultar muy tiles.

Entre las ventajas de utilizar marcos se incluyen:

El navegador de un visitante no tendr que volver a cargar los grficos denavegacin para cada pgina.

Cada marco dispone de su propia barra de desplazamiento (si el contenido esdemasiado grande para una ventana), permitiendo al visitante desplazarse porlos marcos de forma independiente.

Entre los inconvenientes de utilizar marcos se incluyen:

Lograr una alineacin grfica precisa de los elementos en distintos marcospuede resultar difcil.

Comprobar las opciones de navegacin puede llevar mucho tiempo.

Los URL de las pginas con marcos no aparecen en el navegador, por lo quepuede resultar complicado para un visitante marcar una pgina concreta.

4.9.2. Creacin de marcos

La forma ms sencilla es seleccionar entre varios conjuntos de marcospredefinidos.

Solo se puede insertar un conjunto de marcos predefinido en la vista Diseo dela ventana de documento.

Insertar > HTML > Marcoso bien en la categora Diseo de la barra de herramientas de Insertar haga clicen el botn Marcos y elija la distribucin que ms le interese


42


43/44


Los iconos proporcionan una representacin visual. El rea azul de un icono deconjunto de marcos representa el documento actual y las reas blancasrepresentan marcos que mostrarn otros documentos.

Para borrar un marco slo tenemos que mover el borde fuera de nuestroentorno de trabajo.

Para obtener una vista previa de un conjunto de marcos en un navegador,deber guardar antes el archivo de conjunto de marcos y todos los documentosque se mostrarn en los marcos. Puede guardar cada archivo de conjunto demarcos y documento con marcos individualmente, o guardar al mismo tiempo el

archivo de conjunto de marcos y todos los documentos que aparecen en losmarcos.

La opcin de guardar todos los marcos est en Archivo.

4.9.3. Modif icar propiedades de los marcos

El panel Marcos, Ventana > Marcos, nos ayudar a seleccionar cada uno delos marcos.

Para seleccionarlos en la ventana de documento, haga clic dentro de unopresionando la tecla Alt (se rodear de una fina lnea de puntitos).

Al seleccionarlos, el Inspector de propiedades nos permite modificar suscaractersticas propias.


43


44/44


Es recomendable darle a los marcos valores absolutos en pxeles para evitardesplazamientos de los documentos.

Para seleccionar el conjunto de marcos, Ver > Ayudas visuales > Bordes de

marco. En este caso el Inspector de propiedades sera

4.9.4. Marcos con vnculos

Para incluir un vnculo en un marco que abra un documento en otro marco,deber establecer el destino del vnculo.

Por ejemplo, si la barra de navegacin est en el marco de la izquierda y deseaque el material vinculado aparezca en el marco de contenido principal de laderecha, deber especificar el nombre del marco de contenido principal comodestino de todos los vnculos de la barra de navegacin.

Seleccione el texto o la imagen que van a ser enlaces y en el Inspector depropiedades elija, haciendo clic en la carpeta, el archivo correspondiente. En elmen emergente Dest. aparecern los nombres de los marcos. Seleccione elmarco para abrir el documento vinculado en el marco seleccionado.


44

Documents

Dreamweaver Mx 2004