I.BASES Y PLANIFICACIÓN
1.1 Pasos en el trabajo de desarrollo Web
El trabajo de desarrollo de una página Web comienza con el proceso de definición de una estrategia y unos objetivos del sitio, continúa con el diseño (en el que se define el aspecto y el funcionamiento del sitio) y avanza hasta la fase de producción y desarrollo (durante la cual se c?rea el sitio); la funcionalidad se comprueba para ver si se cumplen los objetivos establecidos y, al final, se publica el sitio.
1.2 Planificar sitios
Es un tópico pero no deja de ser verdad: planificar y organizar bien desde el primer momento ayuda a ahorrar tiempo más adelante. La organización del sitio implica mucho más que determinar el lugar en el que irá cada archivo: la planificación del sitio implica también investigar los requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos del sitio. Además, debe tener en cuenta requisitos técnicos tales como el acceso de los usuarios, los navegadores, …
Una vez que haya organizado la información y que haya determinado una estructura operativa, podrá comenzar a crear el sitio.
Determine qué estrategia va a e?mplear y cuáles son los aspectos relativos a los usuarios que debe tener en cuenta durante la planificación del sitio.
-
Utilice el “mapa del sitio” de Dreamweaver para establecer la estructura organizativa del sitio. En la ventana Sitio de Dreamweaver puede añadir, borrar y renombrar los archivos y carpetas fácilmente para cambiar la organización de la estructura. Consulte Introducción a la administración del sitio y la colaboración.
Cuando la creación y el desarrollo de la página se haga entre varias personas:
1.3 Organizar la estructura del sitio
Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle frustración y tiempo más adelante. Si comienza a crear documentos sin pensar en la jerarquía a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difícil de administrar, o con archivos relacionados repartidos por media docena de carpetas con nombres similares.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar los documentos dentro de dicha carpeta. Después podrá copiar dichos archivos en un servidor Web cuando esté preparado para publicar el sitio y permitir al público que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos públicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio público de una vez.
Divida el sitio en categorías. Coloque las páginas relacionadas en una misma carpeta. Utilice subcarpetas cuando sea necesario. Este tipo de organización facilitará el mantenimiento y la navegación por el sitio.
Decida dónde desea colocar elementos como imágenes y archivos de sonido. Los diseñadores sitúan a veces todos los elementos que desean utilizar en un si?tio y que son ajenos a HTML en una carpeta llamada Activos.
1.4 Diseñar el esquema de navegación
Otra área en la que merece la pena planificar es la navegación. Cuando diseñe su sitio, piense en la experiencia que le gustaría que tuvieran sus visitantes. Las búsquedas y los índices facilitan a los visitantes la localización de la información que están buscando.
Diseñe la apariencia que tendrá la navegación. La navegación debe ser homogénea en todo el sitio. Si sitúa una barra de navegación a lo largo de la parte superior? de la página principal, intente mantenerla en ese lugar en todas las páginas vinculadas.
Volver arriba
II.TRABAJAR EN DREAMWEAVER
Dreamweaver puede mostrar un documento de tres formas distintas: en la vista de Diseño, en la vista de Código y en una vista dividida que muestra tanto el diseño como el código. (Puede cambiar la vista en la que desea trabajar seleccionando una vista en la barra de herramientas de Dreamweaver.) De forma predeterminada, Dreamweaver muestra la ventana de documento en la vista de Diseño.
Además, puede trabajar con la vista de Diseño de Dreamweaver de dos formas distintas: en la vista de Disposición y en la vista Estándar. (Puede seleccionar estas vistas en la categoría de vistas del panel Objetos.) En la vista de Disposición, puede diseñar elformato de una página, insertar gráficos, texto y elementos multimedia; en la vista Estándar, además de insertar gráficos, texto y elementos multimedia, también puede insertar capas, crear documentos con marcos, crear tablas y aplicar otros cambios a la página (opciones que no se encuentran disponibles en la vista de Disposición).
Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el menú Ventana. Una marca de verificación al lado de un elemento de este menú indica que el elemento señalado se encuentra abierto, aunque puede estar oculto detrás de otras ventanas. Para ver un elemento que actualmente no está abierto, elija el nombre del elemento del menú o utilice su método abreviado de teclado.
2.1 La ventana de documento
En la? vista de Diseño, la ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un navegador Web. La barra de título de la ventana de documento muestra el título de la página y, entre paréntesis, el nombre de la
carpeta raíz, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados.
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.
El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su contenido en la ventana de docume?nto. Haga clic en <body> para seleccionar todo el cuerpo del documento.
La ventana emergente Tamaño de ventana permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Consulte Cambiar el tamaño de la ventana de documento.
A la derecha del menú emergente Tamaño de ventana observará la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia. Consulte Comprobar el tiempo de descarga y el tamaño.
La barra del lanzador aparece a lo largo de la parte inferior de la ventana de documento. De forma predeterminada, los botones de la barra del lanzador abren la ventana Sitio, el panel Activos, el panel Estilos HTML, el panel Estilos CSS, el panel Comportamientos, el panel Historial y el inspector de código. Para especificar qué botones deben aparecer en la barra del lanzador (y en el lanzador flotante), consulte Personalizar la barra del lanzador.
2.2 Cambiar el tamaño de la ventana de documento
La barra de estado de la ventana de documento muestra las dimensiones actuales de la ventana (en píxeles). Si hace clic en este tamaño de ventana, Dreamweaver muestra el menú emergente Tamaño de ventana, que permite adaptar las dimensiones de la ventana a las de varios tamaños de monitor comunes. Para diseñar una página cuyo mejor aspecto se logra con un tamaño específico, puede ajustar la ventana de documento con cualquiera de los tamaños predeterminados, editar dichos tamaños predeterminados o crear nuevos tamaños.
Nota: El tamaño de la ventana indicado corresponde a las dimensiones internas de la ventana del navegador, sin bordes. El tamaño del monitor figura entre paréntesis. Por ejemplo, la opción “536 x 196 (640 x 480, Predeterminado)” es el tamaño de ventana que se debe utilizar si los visitantes van a hacer uso de Microsoft Internet Explorer o Netscape Navigator en su configuración predeterminada con un monitor de 640 x 480.
2.3 Utilizar la barra del lanzador
La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. También puede ver el lanzador, un panel flotante con idénticos botones.
Para mostrar u ocultar el lanzador:
Elija Ventana > Lanzador.
Si la barra del lanzador no aparece en la parte inferior de la ventana de documento, active Mostrar Lanzador en barra de estado en las preferencias de Barra de estado.
Para especificar qué elementos deben aparecer en la barra del lanzador, consulte Personalizar la barra del lanzador.
Para cambiar la orientación del lanzador de horizontal a vertical:
Haga clic en el icono de orientación situado en la parte inferior derecha.
Para obtener información sobre los elementos que abren los botones predeterminados del lanzador, consulte La ventana Sitio, Utilizar estilos HTML para aplicar formato a texto, Utilizar el panel Estilos CSS, El panel Comportamientos, Automatizar tareas, Utilizar la vista de Código (o el inspector de código), Introducción a la administración de activos y Utilizar el panel Referencia de Dreamweaver.
2.4 Utilizar la barra de herramientas
La barra de herramientas de Dreamweaver contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: Código, Diseño y una tercera vista que combina las vistas de Código y de Diseño. La barra de herramientas contiene algunos comandos comunes relacionados con la selección de vistas y el estado del documento. Los elementos del menú Opciones (botón situado a la derecha) cambia en función de la vista que seleccione.
-
Para ver una vista que contenga las vistas de Código y de Diseño, haga clic en el bo?tón Mostrar vistas de código y diseño. Cuando seleccione esta vista, se encontrará disponible la opción Vista de diseño arriba del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
-
Para ver el menú emergente Estado de archivo, haga clic en el botón de menú de estado de archivo.
-
Para previsualizar o depurar un documento en un navegador, haga clic en Vista previa/depurar en navegador y elija uno de los navegadores enumerados en el menú emergente.
Para agregar o cambiar los navegadores enumerados en el menú, elija Editar lista de navegadores.
-
Para actualizar la vista de Diseño, haga clic en el botón Actualizar vista de diseño.
-
Para obtener acceso al panel Referencia, haga clic en el botón Referencia.
El panel Referencia contiene información de referencia sobre código HTML, CSS y JavaScript.
-
Para desplazarse por el código, haga clic en el botón Navegación por el código.
-
Para obtener acceso al menú Opciones, haga clic en el botón de menú Opciones.
En el menú Opciones se enumeran distintas opciones para cada vista. Para obtener más información sobre las opciones de vista de Diseño, consulte Introducción a la disposición.
Nota: Cuando la ventana de documento muestre ambas vistas, dispondrá de acceso al menú Opciones de cada una de las vistas haciendo clic en la vista deseada y luego en el menú Opciones.
2.5 Utilizar menús contextuales
Dreamweaver emplea de forma extensiva los menús contextuales, que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esé trabajando. En los menús contextuales sólo aparecen los comandos pertinentes para la selección actual.
Para utilizar un menú contextual:
1 Haga clic con el botón derecho del ratón (Windows) o haga clic mientra?s presiona la tecla Control (Macintosh) en el objeto o ventana. Aparecerá el menú contextual para el objeto o la ventana seleccionados.
2 Seleccione el comando del menú contextual y libere el botón del ratón.
2.6 Utilizar el panel Objetos
El panel Objetos contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Para mostrar u ocultar el panel Objetos, elija Ventana > Objetos.
2.6.1 Para inser?tar un objeto
Haga clic en el correspondiente botón del panel Objetos o arrastre el icono del botón hasta la ventana de documento. Dependiendo del objeto, aparecerá el correspondiente cuadro de diálogo de inserción de objeto en el que se le pedirá que seleccione o inserte el archivo u objeto deseado.
Para omitir este cuadro de diálogo e insertar un objeto marcador de posición vacío:
Mantenga presionada la tecla Control (Windows) u Opción (Macintosh) mientras inserta el objeto. (Por ejemplo, para insertar un marcador de posición para una imagen sin especificar un archivo de imagen, mantenga presionada la tecla Control u Opción y haga clic en el botón Imagen.)
Nota: Esto no permite omitir todos los cuadros de diálogo. Algunos objetos, como las barras de n?avegación, las capas, los botones Flash, los marcos, etc., no insertan marcadores de espacio.
El panel Objetos contiene siete categorías de forma predeterminada: Caracteres, Común, Formularios, Marcos, Head, Invisibles y Especial. También contiene botones que cambian de vista: Estándar y Disposición.
-
La sección Ver del panel Objetos permite elegir entre vista Estándar (predeterminada) o de Disposición. Si está seleccionada la vista de Disposición, también podrá seleccionar las herramientas de Disposición: Dibujar celda de disposición y Dibujar tabla de disposición. Para obtener más información, consulte Introducción a la disposición.
?
Para cambiar de categoría, utilice el menú emergente situado en la parte superior del panel. Puede modificar cualquier objeto del panel o crear sus propios objetos; consulte Modificar el panel Objetos y Crear un objeto simple.
Algunas de las preferencias generales afectan al panel Objetos. Para cambiar estas preferencias, elija Edición > Preferencias y seleccione General.
-
Cuando inserte objetos tales como imágenes, tablas, secuencias de comandos y elementos head, aparecerá un cuadro de diálogo en el que se le solicitará información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos o manteniendo presionada la tecla Control mientras crea el objeto. Cuando se inserta un objeto con esta opción desact?ivada, el objeto recibe valores de atributo predeterminados. Después de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades.
2.6.2 Común
La categoría Común del panel Objetos contiene los objetos más utilizados:
Imagen inserta una imagen en la posición de inserción del cursor. Aparecerá un cuadro de diálogo en el q?ue podrá especificar un archivo de imagen. Consulte Insertar una imagen.
Imagen de sustitución le solicita que especifique dos archivos de imagen para definir una imagen de sustitución. Una imagen de sustitución es una imagen que cambia cuando el puntero pasa sobre ella.
Tabla coloca una tabla en el punto de inserción.
Datos tabulares coloca en el punto de inserción una tabla con los datos de otro archivo (como un archivo exportado de Microsoft Excel o de una base de datos como archivo de texto delimitado).
Barra de navegación inserta una serie de imágenes para emplearlas en la navegación de un sitio.
Regla horizontal coloca una regla horizontal en el punto de inserción.
Capa crea una capa. Haga clic en el botón Capa y, a continuación, mueva el puntero hasta la ventana de documento y arrástrelo para definir el tamaño y la ubicación de una capa. Dreamweaver crea de forma predeterminada una capa definida por la etiqueta div. Utilice el inspector de propiedades para seleccionar otra etiqueta o cambie la configuración predeterminada en Preferencias de capa.
Vínculo de correo electrónico coloca un vínculo de correo electrónico en el punto de inserción.
Fecha coloca la fecha actual en el punto de inserción. Aparecerá un cuadro de diálogo en el que podrá especificar un formato para la fecha e indicar si Dreamweaver debe actualizar la fecha automáticamente cada vez que guarde el archivo.
Server-Side Include coloca un server-side include (SSI) en el punto de inserción. Aparecerá un cuadro de diálogo en el que podrá elegir un archivo de origen para el SSI.
HTML de Firew?orks coloca un archivo HTML producido por Fireworks en el punto de inserción.
Flash coloca una película Flash en el punto de inserción utilizando las etiquetas object y embed. Aparecerá un cuadro de diálogo que le permitirá localizar un archivo SWF. Los atributos codebase, class id y pluginspage están predefinidos con los valores adecuados para Macromedia Flash Player. Utilice el inspector de propiedades para especificar otros atributos para la película.
Botón Flash coloca un objeto de botón Flash en el punto de inserción.
Texto Flash coloca un objeto de texto Flash en el punto de inserción. Consulte
Shockwave coloca una película Macromedia Shockwave en el punto de inserción utilizando las etiquetas object y embed. Los atributos codebase, class id y pluginspage están predefinidos con los valores adecuados para Shockwave. Aparecerá un cuadro de diálogo en el que podrá especificar un archivo de origen DCR para la película, o bien puede utilizar el inspector de propiedades para especificar un archivo de origen.
Generator Coloca un objeto de Macromedia Generator en el punto de inserción.
2.6.3 Caracteres
La categoría Caracteres del pane?l Objetos contiene algunos caracteres especiales:
Salto de línea Coloca un salto de línea (br) en el punto de inserción. También puede presionar Mayús+Entrar (Windows) o Mayús+Retorno (Macintosh) para insertar un salto de línea.
Espacio indivisible Coloca un espacio indivisible ( ) en el punto de inserción.
Copyright coloca un símbolo de copyright en el punto de inserción.
Marca coloca un símbolo de marca comercial registrada en el punto de inserción.
Registrada coloca un símbolo de marca comercial en el punto de inserción.
Libra coloca un símbolo de libra (moneda) en el punto de inserción.
Yen coloca un símbolo de yen (moneda) en el punto de inserción.
Euro coloca un símbolo de euro (moneda) en el punto de inserción.
Abrir comillas coloca comillas angulares de apertura en el punto de inserción.
Cerrar comillas coloca comillas angulares de cierre en el punto de inserción.
Guión coloca un guión en el punto de inserción.
Otro proporciona una serie de caracteres especiales, como é y ç, disponibles para que los seleccione. Al seleccionar uno de ellos y hacer clic en Aceptar, se colocará en el punto de inserción.
2.6.4 Formularios
La categoría Formularios del panel Objetos contiene botones que permiten crear formularios e insertar elementos de formulario.
Los formularios son simplemente contenedores de elementos de formulario; los límites del formulario no son visibles en la ventana de documento a menos que se seleccione Ver > Ayudas visuales > Elementos invisibles.
Coloque el punto de inserción dentro de los límites del formulario antes de insertar el elemento de formulario; los elementos de formulario situados fuera de las etiquetas form no aparecen en todos los navegadores. Si intenta insertar un elemento fuera del formulario, un cuadro de diálogo le preguntará si desea añadir una etiqueta de formulario alrededor de dicho elemento. Haga clic en Sí para crear un formulario que contenga el elemento o en No para insertar el elemento sin formulario.
Formulario coloca un formulario en el punto de inserció?n.
Campo de texto coloca un campo de texto en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades.
Botón coloca en el punto de inserción un botón con Submit como valor predeterminado de las etiquetas name y vaule. Coloque el punto de inserción dentro de los límites del formulario antes de insertar el botón; los botones situados fuera del formulario no aparecen en todos los navegadores. Utilice el inspector de propiedades para establecer el nombre, la etiqueta y la acción.
Casilla de verificación coloca una casilla de verificación ?en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.
Botón de opción coloca un botón de opción en el punto de inserción. Establezca el nombre, el valor de activación y el estado inicial en el inspector de propiedades.
Lista/menú coloca una lista o menú emergente en el punto de inserción. Establezca el nombre, el tipo y los valores iniciales en el inspector de propiedades.
Campo de archivo coloca un campo de archivo en el punto de inserción. Establezca el nombre, el tamaño y el valor inicial en el inspector de propiedades.
Campo de imagen coloca un campo de imagen en el punto de inserción. Establezca el nombre, el tamaño, el texto alternativo y el archivo de origen en el inspector de propiedades.
Campo oculto coloca un campo oculto en el punto de inserción. Establezca el nombre y el valor en el inspector de propiedades.
Menú de salto coloca un menú emergente de URL en el punto de inserción. Al elegir un valor de este menú, el usuario se traslada al URL. Establezca los valores de la lista en el cuadro de diálogo que aparece.
2.6.5 ? Marcos
La categoría Marcos del panel Objetos contiene botones que permiten crear disposiciones comunes de conjuntos de marcos.
Izquierda crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del actual.
Derecha crea un conjunto de marcos y añade un marco estrecho y vacío a la derecha del actual.
Arriba crea un conjunto de marcos y añade un marco estrecho vacío sobre el actual.
Abajo crea un conjunto de marcos y añade un marco estrecho vacío bajo el actual.
Izquierda, esquina superior izquierda y arriba Crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del actual, un marco estrecho vacío sobre el actual y un marco pequeño vacío en la esquina superior izquierda del conjunto de marcos.
Izquierda y anidado superior crea un conjunto de marcos y añade un marco estrecho vacío sobre el actual y otro a la izquierda de ambos marcos.
Superior y anidado izquierda crea un conjunto de marcos y añade un marco estrecho vacío a la izquierda del m?arco actual y otro sobre ambos marcos.
Dividir Crea un conjunto de marcos y lo divide en cuatro partes, creando tres nuevos marcos vacíos y situando el marco actual en el cuadrante inferior derecho.
2.6.6 Head
La categoría Head del panel Objetos contiene objetos que permiten añadir elementos a la sección head de los documentos.
Meta inserta una etiqueta meta en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir información para atributos meta.
Palabras clave inserta una etiqueta meta de palabras clave en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir palabras clave para el documento.
Descripción inserta una etiqueta meta de descripción en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir texto que describa el documento.
Actualizar inserta una etiqueta meta de actualización en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir el tiempo de espera (en segundos) para la actualización y si se volverá a cargar la página actual o pasar a una nueva.
Base inserta una etiqueta base en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir un URL base para los vínculos del documento.
Link inserta una etiqueta link (vínculo) en la sección head del documento. Aparecerá un cuadro de diálogo en el que podrá introducir información sobre vínculos. No se trata de un hipervínculo, sino de un vínculo empleado para especificar una hoja de estilos externa.
2.6.7 Invisibles
La categoría Invisibles del panel Objetos contiene botones que permiten crear objetos no visibles en la ventana del navegador.
Elija Ver > Ayudas visuales > Elementos invisibles para ver los iconos que marcan la posición de estos objetos. Haga clic en los iconos para seleccionar los objetos y cambiar sus propiedades. Consulte Elementos invisibles. Las preferencias de elementos invisibles permiten seleccionar qué elementos específicos son visibles en la ventana de documento cuando se activa Ver > Ayudas visuales > Elementos invisibles.
Punto de fijación con nombre coloca un punto de fijación con nombre (un nombre=”") en el punto de inserción. Aparecerá un cuadro de diálogo donde podrá introducir el nombre del punto de fijación.
Secuencia coloca una secuencia de comandos en el punto de inserción. Aparecerá un cuadro de diálogo. Elija el idioma e introduzca texto para la secuencia de comandos.
Comentario coloca un comentario en el punto de inserción dentro del código HTML. Aparecerá un cuadro de diálogo donde podrá introducir texto para el comentario. Consulte Insertar comentarios.
2.6.8 Especial
La categoría Especial del panel Objetos contiene botones que permiten insertar objetos configurables especiales, como plug-ins y applets.
Applet coloca un applet Java en el punto de inserción. (El applet Java sólo aparecerá cuando vea el documento en un navegador.) Aparecerá un cuadro de diálogo en el que podrá especificar el archivo que contiene el código del applet o hacer clic en Ca?ncelar para dejar el origen sin especificar. Utilice el inspector de propiedades para especificar otras propiedades para el applet Java.
ActiveX coloca un control ActiveX en el punto de inserción. Utilice el inspector de propiedades para especificar un archivo de origen y otras propiedades para el control ActiveX..
Plug-in utiliza la etiqueta embed para insertar un archivo (en el punto de inserción) que requiere un plug-in de Netscape para su reproducción. Aparecerá un cuadro de diálogo en el que podrá especificar el archivo de origen
2.6.9 Disposición y Ver
La sección Ver del panel Objetos permite seleccionar un modo de visualización entre dos posibles: Estándar o Disposición. Si selecciona la vista de Disposición, podrá seleccionar las herramientas en la sección Disposición.
Dibujar celda de disposición le permite dibujar celdas de tabla individuales en la vista de Diseño de la ventana de documento.
Dibujar tabla de disposición le permite dibujar tablas completas en la vista de Diseño de la ventana de documento.
Volver arriba
III.EDITAR UN SITIO WEB EXISTENTE
Puede utilizar Dreamweaver para editar un sitio existente en su disco local, aunque no se haya utilizado Dreamweaver para crear el sitio original.
3.1 Para editar un sitio Web existente
1 Elija Sitio > Definir sitios y haga clic en Nuevo, o bien elija Sitio > Abrir sitio > Definir sitios. En el cuadro de diálogo Definición de sitio que aparece estará seleccionada la categoría Datos locales.
2 Introduzca las opciones siguientes:
-
En el campo Nombre del sitio, introdu?zca un nombre para el sitio. El nombre del sitio aparece en la ventana Sitio y en el submenú Sitio > Abrir sitio. Utilice el nombre que desee, ya que no aparecerá en el navegador y sólo le servirá de referencia.
-
En el campo Carpeta raíz local, especifique la carpeta del disco duro en la que se desea almacenar los archivos, las plantillas y los elementos de biblioteca existentes del sitio. Haga clic en el icono de carpeta para examinar y seleccionar la carpeta o introduzca una ruta y un nombre de carpeta en el campo de texto.
-
En la opción Actualizar lista archivos locales autom., indique si desea actualizar automáticamente la lista de archivos locales cada vez que copie archivos en el sitio local. Si desactiva esta opción, mejorará la velocidad de Dreamweaver a la hora de copiar esos archivos, pero el panel Local de la ventana Sitio no se actualizará automáticamente. Para actualizar manualmente la ventana Sitio, haga clic en el botón Actualizar de dicha ventana. Para actualizar manualmente sólo el panel Local, elija Ver >Actualizar local en la ventana Sitio (Windows) o Sitio > Ver archivos del sitio > Actualizar local (Macintosh).
-
En el campo Dirección HTTP, introduce el URL de la página definitiva, para que Dreamweaver pueda verificar los vínculos del sitio que utilicen URL absolutos. Por ejemplo, la dirección HTTP absoluta del sitio Web de la Universidad de Navarra es http://www.unav.es
-
En la opción Caché, indique si desea crear un caché local para mejorar la velocidad de las tareas de administración de vínculos y sitios. Si no selecciona esta opción, Dreamweaver volverá a preguntarle si desea utilizar un caché antes de crear el sitio. Es recomendable seleccionar esta opción porque el panel Activos sólo funciona cuando se ha creado un caché.
3 Haga clic en Aceptar.
Se abrirá la ventana Archivos del sitio.
3.2 Crear, abrir y guardar documentos HTML
Macromedia Dreamweaver ofrece diversas formas de crear un documento. Puede crear documentos HTML nuevos y vacíos; abrir un documento HTML existente, aunque no haya sido creado con Dreamweaver; o bien crear un nuevo documento basado en una plantilla.
También puede abrir archivos de texto no HTML, como archivos JavaScript, archivos de correo electrónico de texto normal o archivos de texto guardados con procesadores de texto o editores de texto. No podrá utilizar todas las herramientas de edición de documentos de Dreamweaver en un documento de texto normal, pero sí podrá utilizar funciones básicas de edición de texto. Entre las posibles razones para abrir un documento de texto figuran editar y depurar código JavaScript, consultar el contenido del archivo de configuración de Dreamweaver o abrir un correo electrónico que contiene un fragmento de código HTML para copiar el código y pegarlo en otro documento.
Para crear un documento HTML vacío en una nueva ventana de documento, realice una de estas operaciones:
Si abre la vista de Código (en la ventana de documento) o el inspector de código, podrá ver que el nuevo documento no está totalmente vacío, pues contiene etiquetas html, head y body para que pueda comenzar a trabajar. Mientras escriba en la vista de Diseño de la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto un editor de código y observar cómo se crea el código HTML.
Para abrir un archivo HTML existente, lleve a cabo una de estas operaciones:
Seleccione Archivo > Abrir.
Si el archivo se ha creado con Microsoft Word, elija Archivo > Importar > Importar HTML de Word.
Si elige Importar HTML de Word, Dreamweaver abre el archivo y le permite especificar opciones para eliminar código ajeno a HTML generado por Word. (Microsoft Word 97 y las versiones posteriores cuentan con el comando Guardar como HTML, que añade código HTML innecesario al convertir un documento a este formato.)
Nota: No se puede importar directamente un archivo de Microsoft Word (.doc) a Dreamweaver. Si desea importar el contenido de un archivo de Word, inicie Word y guarde el archivo como HTML antes de importar el archivo HTML resultante a Dreamweaver.
3.3 Para crear un nuevo documento basado en una plantilla
1 Elija Archivo > Nuevo de plantilla. Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio actual. Deberá crear plantillas antes de crear documentos basados en ellas (consulte Crear plantillas). Cuando crea un documento basado en una plantilla, algunas partes del documento quedan bloqueadas para que no puedan editarse. (El archivo de plantilla determina qué partes son editables y cuáles no.) Esto garantiza la coherencia en el uso de la plantilla en múltiples documentos de un mismo sitio.
2 Seleccione una plantilla y haga clic en Seleccionar. Se creará un nuevo documento basado en la plantilla. De forma predeterminada, las partes editables del nuevo documento quedan rodeadas por un borde azul. Todo el documento queda rodeado por un borde amarillo (de forma predeterminada) para recordarle que está basado en una plantilla y que, por tanto, algunas de sus partes están bloqueadas. (Para personalizar los colores de los bordes, consulte Definir preferencias de la plantilla.) Para modificar una parte editable de la plantilla, seleccione el contenido del marcador de posición en la región editable y sobrescríbalo. En algunos casos, no hay ningún contenido de marcador de posición en la región editable; en este caso, haga clic dentro de la región editable.
Para guardar un documento:
1 Seleccione Archivo > Guardar.
2 Proporcione un nombre para el archivo y vaya hasta el lugar en el que desea guardar el archivo.
Nota: Dreamweaver añade automáticamente .htm (Windows) o .html (Macintosh) al nombre del archivo cuando aparece el cuadro de diálogo. (Puede controlar la extensión de archivo que debe añadirse utilizan?do una opción de las preferencias generales.) Para guardar un archivo como texto normal en Windows, asígnele la extensión de nombre de archivo .txt. Para guardar un archivo como texto normal en Macintosh, sencillamente borre .html del nombre del archivo Macintosh. (Para que Dreamweaver vea el archivo como HTML de nuevo, guárdelo otra vez con la extensión .html o .htm.) Después de guardar un archivo como texto, Dreamweaver no interpreta ningún código HTML del archivo. Cuando guarde los documentos, evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas siempre que sea posible. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos. Asimismo, no comience los nombres de los archivos con números.
3 Haga clic en el botón Guardar para guardar el archivo.
3.4 Cambiar el título de una página
El título de una página HTML ayuda a los visitantes del sitio a realizar un seguimiento de lo que ven mientras navegan, al tiempo que identifica la página en listas de historial y de marcadores. Si no asigna ningún título a una página, ésta aparecerá en la ventana del navegador y en las listas de marcadores y de historial como Untitled Document. Asignar un nombre de archivo al documento (al guardarlo) no equivale a asignar un título a la página. Para localizar todos los documentos sin título del sitio, utilice el comando Sitio > Informes; consulte Crear informes.
Para cambiar el título de una página:
1 Lleve a cabo una de estas operaciones:
Elija Modificar > Propiedades de la página. Haga clic en un espacio vacío de la página para asegurarse de que no hay nada seleccionado. Luego elija Propiedades de la página en el menú contextual haciendo clic con el botón izquierdo del ratón (Windows) o presionando Control mientras hace clic (Macintosh) en la ventana de documento.
Elija Ver > Contenido de Head y haga clic en el botón Título cuando aparezca éste; luego abra el inspector de propiedades.
Elija Ver > Barra de herramientas.
2 Introduzca el título de la página en el cuadro de texto Título.
3 Si está editando el título en el cuadro de diálogo Propiedades de la página, haga clic en Aceptar.El ?título aparecerá en la barra de título de la ventana de documento (y en la barra de herramientas si ésta se encuentra visible).El nombre de archivo de la página y la carpeta en la que está guardado el archivo aparecen entre paréntesis junto al título en la barra de título. Un asterisco indica que el documento contiene cambios que no se han guardado aún.
3.5 Definir una imagen de fondo o un color de página
Para definir una imagen o un color para el fondo de la página, utilice el cuadro de diálogo Propiedades de la página. Si utiliza tanto una imagen como un color de fondo, el color aparecerá mientras se descarga la imagen y luego la imagen cubrirá el color. Si la imagen de fondo contiene píxeles transparentes, el color de fondo se verá a través de ellos.
3.6 Para definir una imagen o un color de fondo
1 Elija Modificar > Propiedades de la página o seleccione Propiedades de la página en el menú contextual de la vista Diseño de la ventana de documento.
2 Para definir una imagen de fondo, haga clic en el botón Examinar, vaya hasta la imagen y selecciónela. Como alternativa,introduzca la ruta de acceso a la imagen de fondo en el cuadro Imagen de fondo. Dreamweaver forma un mosaico con la imagen de fondo (la repite) si ésta no ocupa toda la ventana del navegador. (Para evitar que se forme un mosaico con la imagen de fondo, utilice CSS -hojas de estilos en cascada- para desactivar la formación de mosaicos con la imagen. Consulte Utilizar hojas de estilos CSS.)
3 Para definir un color de fondo, haga clic en el cuadro Color de fondo y seleccione un color del selector de color. (Consulte Trabajar con color?es.)
3.7 Propiedades de la página
Utilice el cuadro de diálogo Propiedades de la página para especificar diversas opciones de la página. Para abrir el cuadro de diálogo Propiedades de la página, elija Modificar > Propiedades de la página.
Título especifica el título de la página que aparece en la barra de título de la ventana de documento y la ventana de la mayoría de los navegadores. Consulte Cambiar el título de una página.
Imagen de fondo y Fondo especifican una imagen y un color de fondo para la página. Consulte Definir una imagen de fondo o un color de página.
Texto y Vínculos definen los colores predeterminados de texto, vínculos, vínculos visitados y vínculos activos. Consulte Definir colores predeterminados ?de texto. También puede controlar estos colores utilizando hojas de estilos CSS; consulte Aplicar un estilo CSS personalizado (clase).
Margen izquierdo y Margen superior especifican los tamaños de los márgenes de la página en la etiqueta body para Microsoft Internet Explorer solamente. Netscape Navigator prescinde estos valores y utiliza los de Ancho del margen y Alto del margen. Para obtener un resultado óptimo en los dos navegadores, proporcione valores de márgenes para ambos navegadores en lugar de para uno solo; complete los cuatro valores de márgenes en lugar de sólo dos. Para asegurarse de que no aparecen márgenes en ningún navegador, configure los cuatro valores con el valor 0. Dreamweaver no muestra márgenes de página en la ventana de documento. Utilice Vista previa en el navegador para ver los márgenes.
Ancho del margen y Alto del margen especifican los tamaños de los márgenes de la página en la etiqueta body para Netscape Navigator solamente. Internet Explorer ignora estos valores y utiliza los de Margen izquierdo y Margen superior. Para obtener un resultado óptimo en los dos navegadores, proporcione valores de márgenes para ambos navegadores en lugar de para uno solo; complete los cuatro valores de márgenes en lugar de sólo dos. Para asegurarse de que no aparecen márgenes en ninguno de los dos navegadores, configure los cuatro valores con el valor 0. Dreamweaver no muestra márgenes de página en la ventana de documento. Utilice Vista previa en el navegador para ver los márgenes.
Codificación del doc. especifica la codificación empleada para los caracteres del documento. Para inglés y otros idiomas de Europa Occidental, elija Occidental. Otras opciones posibles son: centroeuropeo, cirílico, griego, islandés, japonés, chino tradicional, chino simplificado y coreano. Si no aparece ninguna opción para la codificación que desea utilizar, elija Otro para crear un documento con la codificación que use su sistema operativo. Todos los idiomas asiáticos utilizan codificación de doble byte.
Para cambiar las fuentes que emplea Dreamweaver para mostrar cada codificación, elija Edición > Preferencias y seleccione Fuentes/codificación. Las fuentes que seleccione en este panel de preferencias Fuentes/codificación no afectarán al modo en que los visitantes ven las páginas, ya que éstos especifican sus propias fuentes (para una determinada codificación) en los navegadores Web.
Imagen de rastreo especifica una imagen que se va a emplear como guía para copiar un diseño. Esta imagen sólo sirve como referencia, ya que no aparece cuando el documento se muestra en un navegador.
Imagen deter?mina la opacidad de la imagen de rastreo, desde completamente transparente hasta completamente opaca.
Carpeta de docs. muestra la carpeta en la que se guarda el documento actual, si ha sido guardado.
Carpeta del sitio muestra la ruta de la carpeta raíz local del sitio en la que se ha guardado el documento actual, en el caso de que se haya guardado.
3.8 Automatizar tareas
Al crear documentos, es posible que desee realizar la misma tarea muchas veces. En esta sección se explica cómo utilizar el panel Historial para automatizar tareas repetitivas.
Para repetir una serie de pasos una o dos veces, reprodúzcalos directamente desde el panel Historial, que graba los pasos conforme trabaja en un documento. (Para obtener información básica sobre el panel Historial, consulte Panel Historial.) Para automatizar una tarea que realiza a menudo, puede crear un nuevo comando que lleve a cabo esa tarea de manera automática.
Algunos movimientos del ratón, como hacer clic o arrastrar para seleccionar algún elemento de la ventana de documento, no se pueden reproducir ni guardar como parte de comandos guardados. Al realizar un movimiento de ese tipo, aparece una línea negra en el panel Historial (si bien esa línea no es visible hasta que realice otra acción). Para evitar movimientos que no pueden reproducirse, utilice las teclas de flecha en lugar del ratón para mover el punto de inserción dentro de la ventana de documento. Para realizar o ampliar una selección, mantenga presionada la tecla Mayús mientras presiona una tecla de flecha.
Nota: Si aparece una línea negra que indica un movimiento del ratón mientras está realiz?ando una tarea y desea repetirla más tarde, puede deshacer este paso e intentarlo de otra forma, quizá mediante la utilización de las teclas de flecha.
Hay otros pasos que tampoco pueden repetirse, como arrastrar un elemento a otro lugar de la página. Al dar un paso de ese tipo, aparece un icono de comando de menú con una pequeña X roja en el panel Historial.
Los pasos se reproducen exactamente tal y como se han realizado originalmente; no puede modificar los pasos mientras los reproduce. Por ejemplo, si anteriormente ha cambiado a rojo el color de la celda de una tabla y aplica ese paso a otra celda de la tabla, también cambiará el color de dicha celda. Sin embargo, no puede especificar un color distinto al aplicar el paso a una nueva celda.
3.9 Repetir pasos
Para repetir el último paso realizado, utilice el comando Edición > Repetir, o utilice el método abreviado de teclado Control+Y (Windows) o Comando+Y (Macintosh). El nombre de este comando cambia en el menú Edición para reflejar el último paso que ha dado. Por ejemplo, si ha escrito texto, el nombre del comando será Repetir Escritura. (No se puede utilizar el comando Repetir inmediatamente después de una operación de deshacer o de rehacer.)
Para repetir pasos que no sean el más reciente o para repetir varios pasos al mismo tiempo, utilice el panel Historial.
Observe que al reproducir pasos, los que se reproducen son los que están seleccionados (resaltados), no necesariamente el que está señalado actualmente por el dispositivo deslizante.
a) Para repetir un paso
En el panel Historial, seleccione el paso y haga clic en el botón Reproducir. El paso se reproducirá y aparecerá una copia suya en el panel Historial.
Para repetir una serie de pasos adyacentes:
1 Seleccione los pasos en el panel Historial mediante una de estas operaciones:
Arrastre desde un paso hasta otro. (No arrastre el dispositivo deslizante, sino tan sólo desde la etiqueta de texto de un paso hasta la etiqueta de texto de otro paso.)
Seleccione el primer paso y luego haga clic en el último paso mientras mantiene presionada la tecla Mayús, o bien seleccione el último paso y luego haga clic en el primer paso mientras mantiene presionada la tecla Mayús.
Nota: Aunque puede seleccionar una serie de pasos que incluyan una línea negra que indica el movimiento del ratón, dicho movimiento del ratón se omitirá cuando se reproduzcan los pasos.
2 Haga clic en Reproducir. Los pasos se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.
b) Para repetir pasos no adyacentes
1 Seleccione un paso y, a continuación, haga clic en otros pasos mientras presiona la tecla Control (Windows) o la tecla Comando1(Macintosh). También puede hacer clic mientras mantiene presionada la tecla Control o Comando para anular la selección de un paso seleccionado.
2 Haga clic en Reproducir.
Los pasos seleccionados se reproducirán en orden y aparecerá un nuevo paso en el panel Historial con la etiqueta Reproducir pasos.
c) Aplicar pasos a otro objeto
Puede aplicar una serie de pasos del panel Historial a cualquier objeto de la ventana de documento.
Para aplicar los pasos del panel Historial a un objeto nuevo:
1 Seleccione el objeto.
2 Seleccione el paso o los pasos relevantes en el panel Historial y, a continuación, haga clic en Reproducir.
d) Aplicar pasos a múltiples objetos
Si selecciona múltiples objetos en un documento y, a continuación, les aplica pasos desde el panel Historial, los objetos se considerarán como una única selección a la que Dreamweaver intentará aplicar los pasos. Por ejemplo, no puede seleccionar cinco imágenes y aplicar el mismo cambio de tamaño a cada una de ellas a la vez; el cambio de tamaño es una operación que debe aplicarse a cada imagen individual y no a una combinación colectiva de imágenes.
Para aplicar una serie de pasos a cada objeto de un conjunto de objetos, compruebe que el último paso de la serie selecciona el siguiente objeto del conjunto. El siguiente procedimiento demuestra este principio en un escenario concreto: establecer el espaciado vertical y horizontal de una serie de imágenes:
3.10 Para establecer el espaciado vertical y horizontal de una serie de imágenes
1 Comience con un documento en el que cada línea contenga una pequeña imagen (por ejemplo, una viñeta gráfica o un icono) seguida de texto. El objetivo es separar las imágenes del texto y de otras imágenes situadas por encima y por debajo de ellas.
2 Seleccione la primera imagen.
3 En el inspector de propiedades, haga clic en el botón de ampliación (la flecha de la esquina inferior derecha) si es necesario para ver todas las propiedades de la imagen.
4 Introduzca números en los cuadros de texto Espacio V y Espacio H para definir el espaciado de la imagen.
5 Haga clic en la barra de título de la ventana de documento (en lugar de hacerlo dentro de la ventana de documento) para que se encuentre activa la ventana de documento sin mover el punto de inserción.
6 Presione la tecla Flecha izquierda para mover el punto de inserción a la izquierda de la imagen. A continuación, presione la tecla Flecha abajo para mover el punto de inserción una línea hacia abajo, dejándolo justo a la izquierda de la segunda imagen de la serie. Seguidamente, presione Mayús+Flecha derecha para seleccionar esa segunda imagen.
Nota: No seleccione la imagen haciendo clic en ella. De lo contrario, no podrá reproducir todos los pasos.
7 Seleccione en el panel Historial los pasos correspondientes al cambio de espaciado de la imagen y la selección de la imagen siguiente. Haga clic en el botón Reproducir para reproducir esos pasos.
El espaciado de la imagen actual cambiará y se seleccionará la imagen siguiente.
8 Siga haciendo clic en Reproducir hasta que haya establecido correctamente el espaciado de todas las imágenes.
3.11 Copiar y pegar pasos entre documentos
Todos los documentos abiertos tienen su propio historial de pasos. Puede copiar los pasos de un documento y pegarlos en otro.
Nota: Copiar pasos (un botón del panel Historial) es diferente a Copiar (en el menú Edición). No se puede utilizar Edición > Copiar para copiar pasos, aunque sí se utiliza Edición > Pegar para pegarlos.
Al cerrar un documento se borra su historial. Si sabe que va a querer utilizar los pasos de un documento después de cerrarlo, cópielos con Copiar pasos ?(o guárdelos como un comando; consulte Crear comandos nuevos a partir del historial) antes de cerrar el documento.
Hay que tener cuidado al copiar pasos que incluyan los comandos Copiar o Pegar.
Si pega pasos en un editor de texto o en la vista de Código o el inspector de código, aparecerán como código JavaScript. Esta opción puede resultar útil para aprender a escribir secuencias de comandos.
3.12 Para reutilizar los pasos de un documento en otro
1 Comience desde el documento que contiene los pasos que desea reutilizar.
2 Seleccione los pasos del panel Historial.
3 Haga clic en el botón Copiar pasos del panel Historial para copiar dichos pasos.
4 Abra el otro documento.
5 Coloque el punto de inserción donde desee o seleccione un objeto para aplicarle los pasos.
6 Elija Edición > Pegar para pegar los pasos. Los pasos se reproducirán a medida que se peguen en el panel Historial del documento. El panel Historial los muestra como un solo paso, denominado Pegar pasos.
Volver arriba
IV. INTRODUCCIÓN A LA DISPOSICIÓN
La disposición de páginas es una parte fundamental del diseño Web. El término disposición de páginas hace referencia a la apariencia de las páginas en el navegador, es decir, a aspectos tales como la ubicación de los menús o las imágenes. Macromedia Dreamweaver ofrece distintos métodos para crear y controlar la disposición de las páginas Web.
Un método frecuente para diagramar una página consiste en utilizar tablas HTML. Sin embargo, las tablas pueden resultar difíciles de utilizar, pues su función original no era facilitar el diseño de las páginas Web, sino presentar datos en forma tabular.
Para simplificar el uso de tablas en la disposición de páginas, Dreamweaver ofrece la vista de Disposición. En ella puede diseñar una página utilizando tablas como estructura subyacente al tiempo que evita las dificultades tradicionales que plantea el uso de tablas. Por ejemplo, puede dibujar fácilmente celdas de tablas en una página y, a continuación, personalizarlas y colocarlas donde prefiera. La disposición puede tener un ancho fijo u ocupar toda la ventana del navegador.
También puede diagramar las páginas utilizando las tablas de la manera tradicional (consulte Introducción a las tablas) o utilizando capas y convirtiéndolas en tablas (consulte Usar tablas y capas para diseño). Sin embargo, la vista de Disposición de Dreamweaver es la forma más sencilla de preparar la disposición de una página.
Para utilizar la vista de Disposición, deberá salir de la vista Estándar de Dreamweaver.
4.1 Para cambiar a la vista de Disposición
Elija Ver > Vista de tabla> Vista de disposición o haga clic en el botón Vista de disposición del panel Objetos.
La opción Mostrar fichas de tabla de disposición está activada automáticamente en la vista de Disposición. Para desactivar las fichas de tabla cuando se encuentra en la vista de Disposición, elija Ver > Vista de tabla > Mostrar fichas de tabla de disposición.
Nota: Si crea una tabla en la vista Estándar de Dreamweaver y cambia a la vista de Disposición, la tabla contendrá celdas de disposición vacías que quizá deba borrar antes de crear nuevas celdas.
4.2 Celdas y tablas de disposición
Cuando cambia a la vista de Disposición, puede añadir celdas de disposición a la página. Estas celdas le ayudarán a bloquear la disposición de la página. Por ejemplo, puede dibujar una celda en la parte superior de la página para insertar un menú, en la parte derecha para insertar submenús o en un lado para presentar contenido. A la hora de diseñar la página, piense en términos de una cuadrícula de filas y columnas.
Cuando usted crea una celda de disposición en una página, Dreamweaver crea automáticamente una tabla de disposición como contenedor de dicha celda. Una celda de disposición no puede existir fuera de una tabla de disposición. Puede diseñar la página utilizando varias celdas de disposición de una tabla de disposición o utilizar múltiples tablas de disposición para conseguir una disposición más avanzada.
El uso de múltiples tablas de disposición aísla secciones de la disposición para evitar que se vean afectadas por otras. Resulta especialmente útil cuando el contenido de una celda de disposición puede cambiar y hacer que aumente de tamaño. A medida que la celda crece, afecta a las celdas próximas, ya que no se pueden superponer. Si ha creado una disposición con múltiples tablas, las filas y columnas de una tabla no afectarán a otras tablas.
También puede anidar tablas de disposición (insertando una tabla de disposición en otra ya existente). Las celdas de una tabla anidada no están restringidas por las filas y columnas de la tabla externa. Consulte Dibujar una tabla de disposición anidada.
4.2.1 Dibujar celdas y tablas de disposición
En la vista de Disposición puede dibujar celdas y tablas de disposición en la página. Si crea una celda de disposición, se insertará automáticamente una tabla de disposición que actuará como contenedor de dicha celda. Una celda de disposición siempre se encontrará en una tabla de disposición.
Nota: La tabla de disposición que crea automáticamente Dreamweaver tiene el ancho de la ventana de documento. Puede cambiar su tamaño o hacer que sea autoampliable si es necesario.
4.2.2 Para dibujar una celda de disposición
-
Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar celda de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).
-
Sitúe el puntero del ratón en la parte de la página donde desee que comience la celda y, a continuación, arrastre para crear la celda de disposición. Para crear varias celdas sin necesidad de hacer clic repetidamente en el botón de celda de disposición, mantenga presionada la tecla Control (Windows) o Comando (Macintosh).
-
La celda aparecerá en la página con un contorno azul. El azul es el color predeterminado del contorno de las celdas de disposición. El tamaño de cada celda se muestra en el área de encabezado de la columna, en la parte superior de la ce?lda. Para obtener más información sobre el ancho, consulte Configurar el ancho de la disposición.
La disposición de la página utiliza una cuadrícula con columnas y filas, por lo que las celdas pueden extenderse a lo largo de varias filas o columnas, pero nunca superponerse. Dreamweaver ayuda a mantener esta estructura ajustando automáticamente las nuevas celdas a las celdas existentes si se dibujan próximas entre sí (a una distancia de ocho píxeles). Las celdas también se ajustarán automáticamente a un lado de la página si se dibujan cerca del borde (a una distancia de ocho píxeles). Para desactivar temporalmente el ajuste, mantenga presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra la celda por la página.
Esto no significa que todas las celdas deban tener el mismo tamaño o ancho. Puede haber celdas de distinto ancho en la misma columna o celdas de distinto alto en la misma fila.
Para dibujar una tabla de disposición:
1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).
2 Sitúe el puntero del ratón en la página y, a continuación, haga clic y arrastre el ratón para crear la tabla de disposición. Si es la primera tabla que dibuja en la página, se colocará automáticamente en la esquina superior izquierda de la página. Para crear varias tablas sin necesidad de hacer clic repetidamente en el botón de tabla de disposición, mantenga presionada la tecla Control (Windows) o Comando (Macintosh).
La tabla apa?recerá en la página con un contorno verde. El verde es el color predeterminado del contorno de las celdas de disposición (consulte Configurar las preferencias de la vista de Disposición para cambiarlo). También aparecerá una ficha Tabla de disposición en la parte superior de cada tabla dibujada, que le ayudará a distinguir y seleccionar la tabla. El tamaño de cada tabla se muestra en el área de encabezado de la columna, en la parte superior de la tabla.
Para obtener más información sobre el ancho, consulte Configurar el ancho de la disposición.
Las tablas no se pueden superponer. La disposición de la página utiliza una cuadrícula con columnas y filas, por lo que las tablas pueden extenderse a lo largo de varias filas o columnas, pero nunca pueden superponerse. Dreamweaver ayuda a mantener esta estructura ajustando automáticamente las nuevas tablas a las tablas o celdas existentes si se dibujan próximas entre sí (a una distancia de ocho píxeles). Las tablas también se ajustarán automáticamente a un lado de la página si se dibujan cerca del borde (a una distancia de ocho píxeles). Para desactivar el ajuste, mantenga presionada la tecla Alt (Windows) u Opción (Macintosh) mientras arrastra la tabla por la página.
Puede crear tablas de disposición en áreas vacías de la página, en una tabla de disposición existente (anidadas) o alrededor de celdas y tablas de disposición existentes. Cuando se crea una tabla de disposición en un documento en blanco, ésta se ajusta automáticamente a la esquina superior izquierda de la ventana de documento.
Nota: Si la página ya tiene contenido, sólo podrá dibujar la tabla de disposición debajo del contenido.
Para dibujar una tabla de disposición alrededor de tablas o celdas existentes:
1 Sitúese en la vista de Disposición y, a continuación, haga clic en el botón Dibujar tabla de disposición en la categoría Disposición del panel Objetos. El puntero del ratón se convertirá en un signo más (+).
2 Haga clic y arrastre el ratón alrededor de las celdas o tablas de disposición existentes. La tabla de disposición abarcará las celdas o tablas existentes.
4.2.3 Aplicar formato a una celda de disposición
Puede establecer la alineación de contenido, el ancho y el alto y los colores de fondo en el inspector de propiedades.
Para aplicar formato a una celda de disposición en el inspector de propiedades:
1 Haga clic en el borde de la celda o mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda.
2 Elija Ventana > Propiedades para abrir el inspector de propiedades.
3 Dispone de las siguientes opciones de apariencia:
Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro, o elija Autoampliar.
Para cambiar el alto, especifique un valor en píxeles en el cuadro de texto.?
Para establecer un color de fondo para la celda de disposición, elija un color en el selector de colores desplegable o escriba el código hexadecimal del color deseado en el cuadro de texto.
Para establecer la alineación horizontal, selecciónela en el menú emergente Horiz. Puede establecer la alineación del contenido de la celda de disposición como Izquierda, Centro, Derecho o Predeterminado.
Para establecer la alineación vertical, selecciónela en el menú emergente Vert. Puede establecer la alineación del contenido de la celda de disposición como Superior, Medio, Inferior, Línea de base o Predeterminado.
Seleccione No aj. para evitar que se ajuste el texto. Si selecciona esta opción, la celda de disposición se ampliará para dar cabida a todo el contenido sin pasar a una nueva línea. Aplicar formato a tablas de disposición
Puede definir el ancho, alto, relleno, espaciado, etc. en el inspector de propiedades.
4.2.4 Para aplicar formato a una tabla de disposición
1 Haga clic en la ficha o el borde de la tabla.
2 Elija Ventana > Propiedades para abrir el inspector de propiedades.
3 Dispone de las siguientes opciones de apariencia:
Para cambiar el ancho, elija Fijo y escriba un valor en píxeles en el cuadro o elija Autoampliar.
Para cambiar el alto, especifique un valor en píxeles en el campo de texto.
Para establecer el relleno de celdas, especifique el número de píxeles en el campo Rell. celda. El relleno de celdas es la cantidad de espacio que habrá entre el contenido de una celda de disposición y el límite de la misma. Si establece este valor por encima de 0, todas las celdas de la tabla de disposición que ha seleccionado tendrán este espaciado. Si aparecen dos números en el área de encabezado de la columna, utilice la opción Igualar ancho.
Para establecer el espaciado de celdas, especifique el número de píxeles en el campo Esp. celda. El espaciado de celdas es la cantidad de espacio que habrá entre cada celda de disposición. Si establece este valor por encima de 0, todas las celdas de disposición de la tabla que ha seleccionado tendrán este espaciado. Si aparecen dos números en el área de encabezado de la columna, utilice la opción Igualar ancho.
Para borr?ar los valores de alto de todas las celdas de la tabla de disposición que ha seleccionado, haga clic en el botón Borrar atributos de alto. Si no hay elementos en la tabla, ésta se contraerá completamente.
Si hay celdas de ancho fijo, haga clic en el botón Igualar ancho. De este modo se restablecerá automáticamente el ancho HTML de cada celda para que coincida con el contenido de la celda. Por ejemplo, si define el ancho en 200 píxeles y, a continuación, añade contenido que amplía el ancho a 250, aparecerán estos dos números en la barra superior de la tabla: 250 entre comillas y 200 entre paréntesis. Si hace clic en Igualar ancho, desaparecerá el valor de 200 píxeles y se mantendrá el de 250.
Para eliminar las imágenes de espaciador (imágenes transparentes que se utilizan para controlar el espaciado de la disposición) en la tabla de disposición, haga clic en el botón Quitar todos los espaciadores.
Si la tabla de disposición seleccionada está anidada dentro de otra tabla de disposición, haga clic en Desanidar para eliminar la tabla anidada sin perder su contenido. La tabla de disposición desaparecerá y las celdas de disposición y su contenido pasarán a formar parte de la tabla principal.
4.2.5 Añadir contenido a una celda
En la vista de Disposición puede añadir texto, imágenes y otros elementos a las celdas de disposición de la misma forma que en la presentación normal de Dreamweaver (vista Estándar). Haga clic en la celda donde desee insertar contenido y, a continuación, escriba el texto o inserte otros archivos.
Sólo se puede insertar contenido en celdas de disposición, por lo que deberá en primer lugar crearlas (consulte Dibujar celdas y tablas de disposición). Los espacios grises de la página indican las áreas que no están disponibles para añadir contenido a menos que inserte una celda de disposición en ellas.
La celda de disposición se amplía automáticamente cuando se añade material más grande que ella. A medida que se amplía la celda, aumenta de tamaño la columna en la que se encuentra la celda y, además, pueden verse afectadas las celdas adyacentes.
4.2.6 Para añadir texto a una celda
Haga clic en la celda de disposición donde desee añadir texto y lleve a cabo una de estas operaciones:
Escriba texto en la celda. La celda aumentará automáticamente de tamaño a medida que escribe.
Pegue el? texto copiado de otro documento. Utilice el comando Pegar. Para obtener más información, consulte Insertar texto y objetos.
4.2.7 Para añadir una imagen a una celda
1 Haga clic en la celda de disposición donde desee añadir la imagen.
2 Haga clic en el botón Insertar imagen del panel Objetos, elija Insertar > Imagen o arrastre el botón Insertar imagen desde el panel Objetos hasta la página.
3 En el cuadro de diálogo Seleccionar imagen, seleccione un archivo de imagen.
Para obtener más información, consulte Configurar propiedades de imágenes.
4.2.8 Borrar el alto automático de las celdas
Después de insertar contenido en las celdas, puede borrar el alto de las celdas para eliminar su configuración. Dreamweaver crea automáticamente las celdas con un alto especificado, pero una vez añadido el contenido a la celda, dejará de necesitar el alto especificado.
Para borrar el alto, lleve a cabo una de estas operaciones:
Seleccione Borrar alto de celda en el menú Encabezado de columna. Se borrará el alto y es posible que se reduzca el tamaño de algunas filas.
Seleccione una tabla de disposición (haga clic en la ficha o el borde de la tabla) y, a continuación, haga clic en el botón Borrar alto de fila del inspector de propiedades.
4.2.9 Mover y cambiar el tamaño de celdas y tablas de disposición
Todas las celdas y tablas se pueden mover o cambiar de tamaño, lo que permite ajustar fácilmente la disposición de la página. Para utilizar la cuadrícula de Dreamweaver como guía para mover o cambiar el tamaño de celdas y tablas, consulte Utilizar la cuadrícula de Dreamweaver.
4.2.10 Para cambiar el tamaño de una celda
1 Haga clic en el borde de la celda o mantenga presionada la tecla Control (Windows) o Comando (Macintosh) y haga clic en cualquier punto de la celda. Aparecerán manejadores de selección alrededor de la celda.
2 Utilice los manejadores de selección para arrastrar la celda hasta obtener el tamaño deseado.
La celda se ajustará automáticamente a las celdas existentes (cuando se encuentre a una distancia de ocho píxeles de sus bordes).
Una celda de disposición no se puede superponer a otras celdas y no se puede ajustar su tamaño fuera de los límites de su tabla de disposición. Una celda de disposición siempre tendrá como mínimo el tamaño de su contenido.
4.2.11 Para mover una celda
1 Haga clic en el borde de la celda.
2 Arrastre o utilice las teclas de flecha para mover la celda hasta el lugar de la página que desee. La tecla de flecha la mueve de píxel en píxel; si mantiene presionada la tecla Mayús, se moverá de 10 en 10 píxeles.
4?.2.12 Para cambiar el tamaño de una tabla
1 Haga clic en la ficha de tabla. Aparecerán manejadores de selección alrededor de la tabla de disposición.
2 Utilice los manejadores de selección para arrastrar la tabla hasta obtener el tamaño deseado.
La tabla se ajustará automáticamente a las celdas y tablas existentes (cuando se encuentre a una distancia de ocho píxeles de la celda existente). El tamaño de la tabla de disposición no puede quedar por debajo del límite de las celdas que contiene. La tabla tampoco puede superponerse a las tablas o celdas adyacentes.
4.2.13 Para mover una tabla
1 Haga clic en la ficha de tabla.
2 Arrastre o utilice la?s teclas de flecha para mover la tabla hasta el lugar de la página que desee. La tecla de flecha la mueve de píxel en píxel; si mantiene presionada la tecla Mayús, se moverá de 10 en 10 píxeles.
4.2.14 Configurar el ancho de la disposición
En la vista de Disposición puede utilizar dos tipos de anchos: fijo y autoampliable. El ancho aparece en el área de encabezado de la columna, en la parte superior de cada columna. El ancho fijo es un número específico, como 300 píxeles, y se muestra como un número. La opción Autoampliar configura el ancho para que cambie automáticamente según el tamaño de la ventana y se muestre como una línea ondulada. Con esta opción, la disposición siempre llena la ventana del navegador, independientemente del tamaño de ventana que haya establecido el usuario. Si bien el ancho fijo es la opción predeterminada, generalmente establecerá algunas celdas o tablas de disposición con ancho fijo y una con ancho autoampliable. La configuración elegida afectará a todas las celdas o tablas de esa columna. En una disposición sólo se puede definir una columna como autoampliable.
Por ejemplo, supongamos que la disposición tiene una barra de menú en la parte izquierda de la página, el título en la parte superior y el área de contenido principal en la parte derecha. Puede definir la columna izquierda con ancho fijo y el área de contenido principal
con ancho autoampliable.
Para definir un ancho autoampliable, lleve a cabo una de estas operaciones:
Acceda a la parte superior de la columna que desea definir como autoampliable y seleccione Hacer que la columna sea autoampliable en el menú Encabezado de columna. Sólo se puede definir una columna como autoampliable.
Seleccione la columna y, a continuación, haga clic en Autoampliar en el inspector de propiedades.
Cuando usted define una columna como autoampliable, Dreamweaver inserta imágenes de espaciador en las columnas de ancho fijo para controlar la disposición. Una imagen de espaciador es una imagen transparente que no es visible en la ventana del navegador, pero que se utiliza para controlar el espaciado.
Para definir un ancho fijo, lleve a cabo una de estas operaciones:
Acceda a la parte superior de la columna que desea definir como fija y seleccione Hacer que la columna tenga ancho fijo en el menú Encabezado de columna.
Hacer que la colu?mna tenga ancho fijo establece automáticamente el ancho de la columna para que coincida con el ancho del contenido de esa columna.
En el inspector de propiedades, haga clic en Fijo y escriba un valor numérico. Si introduce un valor numérico menor que el ancho del contenido, Dreamweaver establecerá automáticamente el ancho con el tamaño de píxeles correcto.
Algunas veces aparecen dos números en el menú Encabezado de columna: el ancho real de la columna y el ancho que aparece en el código HTML. Esto deberse a varias razones, por ejemplo, a que ha insertado contenido más amplio que el ancho dibujado o especificado. Conviene que el ancho sea igual para que sólo aparezca un número.
Para igualar el ancho (de modo que sólo se especifique el ancho real) seleccione Igualar ancho de celdas en el menú Encabezado de columna.
Volver arriba
Posted by 
