DreamWeaver

CS5 y CS6

Cursosindustriales. Curso de DreamWeaver CS6 1

DREAMWEAVER CS5. BARRA DE HERRAMIENTAS I En este capítulo vamos a conocer la barra de herramientas y a saber sacarle todo el máximo provecho. Utilizaremos cada función para dar mayores características en nuestra página Web index.html que estaba en blanco y que abrimos anteriormente. La barra de herramientas es una barra de acceso rápido de la barra de menús, ya que desde la barra de menús puedes acceder a las herramientas que accedes desde esta barra de herramientas. Dreamweaver CS5-CS6-CC nos facilita el acceso a las herramientas más usadas en los documentos Web. La barra de herramientas está dividida en nueves menús.

Este curso está redactado, diseñado, compilado y distribuido por Cursosindustriales.net. El autor del mismo te da derecho a compartirlo, imprimirlo, usarlo y modificarlo siempre que referencies la procedencia del curso y que en este caso es de Cursosindustriales.net y su autor Deimos_hack. Si has conseguido este curso y has tenido que pagar por ello, envíame un correo a [email protected] y enseguida me pondré en contacto contigo. Si quieres ayudar al proyecto Cursosindustriales, haz una donación mediante PayPal en los puntos autorizados de la Web.

Cursosindustriales. Curso de DreamWeaver CS6 2

COMÚN El menú Común de la barra de herramientas, es un conjunto de herramientas básicas de Dreamweaver CS5 y que permiten dar a la página Web una estructura básica y agregar material multimedia de diferente naturaleza. Las herramientas de la barra de herramientas, se usan en la ventana de diseño, por norma general.

Para ir probando cada herramienta individual, abre la página en blanco index.html y empezaremos a trabajar en la Web.

Hipervínculo

.

Esta herramienta te permite insertar un hipervínculo en el documento en blanco. Pulsa sobre el icono y se te abrirá una ventana.

En Texto, introducirás un texto que será que el estará el hipervínculo. En Vínculo, si en tu documento ya tienes algún enlace a la misma página te saldrá todos los que tengas en él. La carpeta te permite seleccionar otro archivo que tengas en tu sitio. También puedes insertar una dirección URL en la zona en blanco. El Destino será la forma en la cual se mostrará la página del enlace: Siendo:

Cursosindustriales. Curso de DreamWeaver CS6 3

_blank. Te abre el enlace en una nueva pestaña del navegador. _new. Te abre una nueva página del navegador y deja la anterior abierta. _parent. Abre el enlace en la misma página que el documento actual. _self. Abre el enlace en la misma página que el documento actual. _top. Abre el enlace en la misma página que el documento actual. En Título pondrás una descripción que aparecerá cuando el enlace esté activo. La Clave de Acceso sirve para establecer una tecla del teclado para realizar el hipervínculo. Por ejemplo, vamos a poner para nuestro caso la letra a, y cada vez que pulsemos la tecla a, con la página cargada, iremos al hiperenlace. En Índice de fichas se establecerá un número para generar un orden de fichas. NOTA: El atributo _new no lo recoge el lenguaje HTML5, por lo que su equivalente es _blank.

Vínculo de correo electrónico

.

En el cuadro simplemente se rellena un Textbox título que representará al hipervínculo y otro Textbox que introducirá la dirección de correo electrónico.

Anclaje Usado junto al hipervínculo se usa para realizar enlaces dentro de la misma página Web. Está herramienta sustituye a la etiqueta (id en HTML5). El hipervínculo se realiza desde la herramienta Hipervínculo, y el Textbox Vínculo nombrarás al título que pongas al anclaje.

Reglas horizontal

.

Simplemente inserta en el documento Web una línea horizontal que divide al mismo. ().

Cursosindustriales. Curso de DreamWeaver CS6 4

Tabla

.

Esta herramienta te permite crear una tabla y configurar su estilo.

Para configurar bien la tabla, aparte de la ventana que nos ha aparecido, vamos a utilizar el panel de propiedades. Sobre el panel de propiedades he de decirte que cambia de estado cada vez que pulsas cualquier herramienta y te permite configurar la herramienta seleccionada. En este caso pulsar sobre Aceptar y creada la tabla:

Nos fijamos en el panel de propiedades:

Cursosindustriales. Curso de DreamWeaver CS6 5

Desde esta ventana podemos alinear la tabla mediante el Select Alinear podemos elegir la posición de la tabla a la izquierda, derecha y al centro. Los controles de Filas y Cols, sirven para elegir el número de filas y columnas respectivamente. Existen cuatros iconos en la parte inferior de las propiedades de la tabla, y empezando desde la izquierda:

El primer icono, te permite Borrar el alto de la fila, por lo que la tabla vuelve a un estado original y convencional respecto a su altura. El siguiente icono, Convierte el ancho de las celdas de la tabla por defecto en píxeles a porcentaje. El icono siguiente, vuelve a poner el estado de las tablas en píxeles. El último icono, Borra el ancho de la celda de la tabla seleccionada y la vuelve a su estado original. En la parte izquierda de la barra de propiedades de la tabla tenemos un ComboBox y cuyo nombre indica Tabla y sirve para darle un identificador a la tabla. Ese identificador, servirá más tarde si queremos llamar alguna función de la tabla o queremos incluir a la tabla en alguna función de JavaScript o PHP. En el ComboBox Clase, te permite dar un estilo visual a la tabla insertando el estilo de una clase que hayas creado previamente. Si seleccionas una o varias celdas de la tabla, podrás ver que el panel de propiedades de la tabla cambia y te permite otras opciones.

Cursosindustriales. Curso de DreamWeaver CS6 6

Seleccionadas las celdas de la tabla, puedes alinear el contenido de la tabla, ajustar el ancho, ajustar el alto, agregar un fondo a la celda e incluso combinar celdas mediante el icono que te permitirá fusionar las celdas seleccionadas. El icono de al lado, que está deshabilitado, realizará la función adversa a la unión, realizará la separación de las celdas fusionadas con anterioridad. Este icono, sustituye al atributo Colspan y Rowspan, si te acuerdas del lenguaje HTML. Con Dreamweaver CS5 se pueden crear las estructuras de las páginas Web de los sitios, jugando con los valores y gracias a la función que te permite Dreamweaver CS5 para arrastrar y mover el ancho de la tabla:

Cursosindustriales. Curso de DreamWeaver CS6 7

CREAR UNA PLANTILLA MEDIANTE TABLAS. La diferencia entre píxeles y porcentajes está en la forma de visualización de la página respecto el navegador Web; los píxeles muestran la tabla en píxeles reales, por lo que si a pantalla completa tenemos una tabla de 800 pixeles, y nuestra resolución de pantalla es inferior, tendremos que usar los barra de desplazamiento horizontal de la ventana del navegador para visualizar la tabla correcta. Por contra, si utilizamos porcentajes, aunque la pantalla se restauré o se maximice, en el navegador siempre veremos la tabla completa, por mucho que reduzcamos o ampliemos la ventana del navegador. Dicho esto, para crear una estructura de una página Web, vamos a crear una Nueva tabla y como queremos que no exceda mucho en ancho de pantalla elegimos 10 filas por 6 columnas. De ancho elegiremos un ancho de 800 pixeles. Por defecto se mostrará así:

Como lo que queremos que tenga un espacio vertical adecuado, podremos redefinirla manualmente poniendo el ratón en la línea inferior de la tabla y arrastrar la tabla hasta cuando queramos. Pero para ir a lo seguro, seleccionaremos toda la tabla, pinchando en una de las líneas del borde de la tabla e iremos a la ventana de código.

Vamos a poner el atributo Height="800" para que nuestra tabla se expanda verticalmente. Ahora podemos fusionar celdas para darle el aspecto que queramos. Voy a fusionar todas las celdas a partir de la segunda fila y dejando normal las columnas primera y última para que aparezca de tal forma:

Cursosindustriales. Curso de DreamWeaver CS6 8

Ahora nos dirigimos a la última columna y vamos a crear dos ventanas de menús con su espacio para el título y su espacio para el contenido, de tal forma que primero fusionamos la cuarta con la sexta fila:

Después hacemos lo mismo con la octava a décima.

Ahora hacemos lo mismo en la columna primera fusionando la tercera fila y la quinta y la séptima a la novena fila:

Como puedes ver Dreamweaver CS5 a redimensionado la tabla, pero ahora puedes dimensionarla con el ratón. Cursosindustriales. Curso de DreamWeaver CS6 9

En la primera fila de la segunda columna, pulsa sobre Nueva tabla y crea una tabla de dos filas, dos columnas y un ancho de 400 pixeles, como se ve en la imagen.

Ahora fusiona las dos primeras filas de la primera columna y ya tienes la primera ventana del esqueleto Web. Después fusiona la cuarta, quinta, sexta y séptima columna de la primera fila y obtendrás otro menú a la derecha superior.

Las celdas pequeñas que nos quedan en la columnas quinta, sexta y séptima servirán para insertar icono de escritorio como si estuviésemos en un ordenador. Vamos a utilizar tres iconos típicos de Windows para enlazar a contenido multimedia en nuestra página Web. Empezaremos a diseñar un estilo y le ponemos un título a la página. Ahora ya queda insertar el material multimedia y ajustar los menús a gusto. Cursosindustriales. Curso de DreamWeaver CS6 10

Como ves con las tablas puedes crear páginas únicas y personalizadas. El problema es que Dreamweaver CS5 justifica las celdas a su antojo y cuando las quieres redimensionar, te cuesta o no consigues, en la pantalla de Diseño, el formato que tú quieras. Para evitar la auto justificación, se utilizan los DIV-PA para crear las estructuras de las páginas Web ya que directamente insertando ventanas en la página Web y alineándolas de acuerdo a unas normas, obtenemos una página de calidad superior a la anterior y a la cual podemos agregar estilos personalizados. Ya lo verás cuando estudies esta herramienta.

Div

.

Esta herramienta te crea una etiqueta para utilizarla en el documento actual o el punto seleccionado.

Imagen

.

Esta herramienta te permite insertar, ajustar y manipular material multimedia. Cuando utilizas imágenes en una página HTML, debes de tener en cuenta que las imágenes tienen un peso y que mientras mayor sea la calidad de la imagen, más tiempo tardará la carga de la misma, por lo que es bueno, optimizar tanto el tamaño de la imagen como la calidad de la misma.

Cursosindustriales. Curso de DreamWeaver CS6 11

Dreamweaver CS5 reconoce tres extensiones principales de formato y para editarlas, una vez insertadas en la página, seleccionar el icono de la barra de propiedades de edición y después se abrirá una ventana similar que cambia según el tipo de imagen que sea:

.GIF Formato propiedad de Unisys es ideal para imágenes que contienen poco colores. Este formato se utiliza mucho para crear imágenes en movimientos e iconos representativos.

La opción Paleta, te permite elegir unos colores predefinidos para el tipo de archivo en concreto. La opción Perdida reduce la calidad de los colores. Trazar permite mezclar colores para obtener otros degradados complejos a raíz de los expuestos. Abajo, las herramientas cuentagotas Cursosindustriales. Curso de DreamWeaver CS6 12

te

permite la opción transparente, añadir más colores o suprimir los colores a trazar.

.JPEG o .JPG Este formato es ideal para insertar imágenes fotográficas con miles de colores. Suele ocupar mucho más espacio en disco que el anterior formato de imagen.

.PNG Formato propiedad de Microsoft y utiliza imágenes complejas de colores y transparencias. Dreamweaver CS5 te permite la opción de cargar proyectos Photoshop y optimizar la misma. Para seleccionar un archivo .PSD de Photoshop, selecciona el archivo:

Dreamweaver CS5 no te permite trabajar con las capas que tenga el proyecto Photoshop, pero te permite optimizar la imagen para que no pierda calidad, pero reduzca el peso del archivo. En la pestaña Opciones, esta herramienta te permite guardar la imagen con un Cursosindustriales. Curso de DreamWeaver CS6 13

formato de imágenes globales. La Calidad, indica el porcentaje de calidad de la imagen; mientras mayor sea el número, menor será la compresión y mayor la calidad de la imagen. El Suavizado te proporciona un desenfoque básico. Existen 8 niveles de suavizado siendo el cero sin desenfoque y el 8 el máximo desenfoque. Perfilar el borde de los colores proporciona una imagen más nítida. El Checkbox, Eliminar colores no utilizados, elimina los colores que la imagen tiene y que son significativos de la resolución de la imagen. Simplemente reduce el tamaño del archivo sin reducir la calidad de resolución significativamente. En la parte derecha superior de la imagen, tienes un resumen de la configuración, del tamaño y del tiempo que tarda en cargar la imagen en una resolución Web. En la parte inferior tienes las opciones de tratar la imagen, recortarla y hacer un zoom.

La herramienta Puntero, te permite conocer los valores de las componentes RGB de la imagen, al pasar el ratón sobre cada parte de la imagen. La herramienta de recorte, exporta un área que selecciones en la imagen, la recorta, y determina la nueva área de trabajo. Los siguientes iconos presentan la imagen en una pantalla, dos y cuatros partes respectivamente.

CONFIGURAR UNA IMAGEN. Cuando seleccionas la imagen insertada en la página Web, la ventana de propiedades cambia con los valores de la imagen:

En donde en la parte superior izquierda te muestra el nombre que le asigna Dreamweaver CS5 a la imagen, el espacio que ocupa y te muestra la misma en Cursosindustriales. Curso de DreamWeaver CS6 14

miniatura. El Ancho y el Alto sirven para establecer el alto y ancho respectivos de la imagen en el documento. Por defecto está dado en píxeles. El Textbox Origen indica la ruta de acceso a la imagen. Pulsando en el icono de la carpeta, puedes buscar el archivo a insertar. El icono te permite arrastrar hacia un archivo de nuestro panel de menús y seleccionar un archivo concreto. A continuación la ruta aparecerá directamente en el Textbox en concreto. El Textbox Vínculo te permite elegir un enlace para dicha imagen. Por norma general es un script que amplifica la imagen. Los Textbox Destino y Original aunque no los vas a usar demasiados, Destino, te permitirá elegir el atributo Target del vínculo. El Original, lo verás más adelante.

MAPEO DE LA IMAGEN. Mapear una imagen significa seleccionar zonas de esa imagen en la cual se creen hipervínculos. Dreamweaver nos facilita la acción de la creación de mapa de imagenes permitiéndonos crear formas en la imagen de forma rectangular, circular o poligonal.

Cada vez que pulses cualquier forma y la selecciones en la imagen, la barra de propiedades cambiará a la ventana específica del mapeo, y te mostrará un mensaje para indicarte que tienes que insertar el contenido del atributo alt.

Cursosindustriales. Curso de DreamWeaver CS6 15

La barra de propiedades.

En donde pone Mapa, hay que poner un nombre obligatorio. Por defecto Dreamweaver CS5 lo nombre por Map. El Puntero se usa para desplazar o modificar la zona dibujada. En Vínculo, ira la dirección del vínculo que realiza la imagen. Puedes utilizar la herramienta de vinculación rápida. Destino será el Target del vínculo. Alt será la descripción del vínculo.

IMAGENES DE SUSTITUCIÓN. Aunque la imagen de sustitución se suele realizar en clases CSS para la simplicidad del código, Dreamweaver CS5 te simplifica esta acción enormemente. Para elegir la imagen de sustitución selecciona la barra de menús y el menú Insertar. Selecciona el submenú Objetos de imagen y la función de Imagen de sustitución:

En Nombre de la imagen debes de insertar un nombre valido para este evento. En Imagen original, seleccionas el archivo de imagen que se muestra por Cursosindustriales. Curso de DreamWeaver CS6 16

defecto. En Imagen de sustitución, seleccionas la imagen que se cambiará cuando se pase el ratón por ella. Texto alternativo, es el texto que aparecerá al pasar el ratón. Por último se puede seleccionar una URL o vínculo a la imagen de sustitución. El efecto queda así:

FORMATEAR LAS IMAGENES. Mediante la ventana de propiedades de la imagen, podemos también alinear la imagen para darle un formato visual al documento Web. Mediante el control de Alineación podemos alinear la imagen para que el texto se muestre al lado de ella.

Este control no alinea la imagen dentro del documento, sino el texto respecto a la imagen. Para alinear la imagen dentro del documento Web, se requiere que puses sobre la barra de menús, el menú Formato y la función Alinear y en el cuadro que se te muestra, utilizar la opción más adecuada. Desde aquí si se alinea la imagen en el documento Web.

CARGAR UNA IMAGEN ANTES QUE LA PRINCIPAL. Esto se suele hacer cuando se utilizan imágenes de alta calidad y pesadas. Para que el navegador no vaya mostrando poco a poco la imagen, se suele establecer una imagen en baja definición que se cargará antes que la imagen principal. Así no hacemos esperar al usuario mientras se carga la imagen pesada.

Cursosindustriales. Curso de DreamWeaver CS6 17

Para ello, cuando seleccionas una imagen, en la ventana de propiedades, el Textbox Original, te permite elegir una imagen de baja resolución que se mostrará mientras no se haya cargado del todo la imagen original.

SELECCIONAR EDITOR PARA LA IMAGEN. Dreamweaver CS5 te permite la opción de elegir un editor de imágenes con el que tratar la imagen que utilizarás en el documento Web. Para configurarlo, en la barra de menús, el menú Edición, Preferencias y Tipo de archivo / Editores, te muestra la siguiente ventana.

En Editor de código externo, te permite buscar cualquier programa que tengas instalado en tu ordenador para editar las imágenes. Incluso si es portable te lo reconoce y abrirá el programa cuando quieras editar la imagen. Para ello, en la ventana de propiedades de la imagen, una vez agregado la ruta del programa pulsa sobre y se te abrirá el programa en concreto. Si no has elegido un programa, se te mostrará una ventana de aviso y te mandará a la pantalla anterior para que lo selecciones.

Cursosindustriales. Curso de DreamWeaver CS6 18

Media

.

Esta Herramienta te permite insertar en el documento Web Scripts, pequeños programas y animaciones. Cuando insertamos un archivo Media, la ventana de propiedades cambia a.

El icono de esta herramienta es el icono del último archivo Media que hayas utilizado. Cuando pulsas este icono, se te presentará una ventana en la cual tendrás que poner un nombre, una tecla de acceso, que ya hemos visto, y un índice de tabulador. El panel de propiedades Media, ya te suena de otros herramientas, pues existen controles comunes, como son el Ancho, y el Alto, el Nombre, Fondo, Clase. Los otros controles que desconoces tienen las funciones siguientes: Las opciones Bucle y Rep. autom., te permite reproducir en bucle la animación y la reinicia cuando acaba. El Espacio V., y el Espacio H., te permite definir (en píxeles), el espacio entre la animación y el texto que rodea la animación o programa. La Calidad y la Escala tiene más que ver con la configuración de los parámetros de Flash (en este caso). Alinear, alinea la animación dentro del documento Web. El botón Reproducir, visualiza la animación directamente en el documento de manera local. Parámetros, define parámetros específicos para la animación. Estos parámetros pueden usarse en un Script.

FLV. Esta herramienta Media, te permite insertar documentos FLV. FLV es el formato de video de Adobe Flash Player. Cuando seleccionas el archivo se muestra la ventana siguiente. Cursosindustriales. Curso de DreamWeaver CS6 19

En Tipo de video, puedes seleccionar la opción por defecto, Descarga progresiva de video o la opción Flujo de video. La primera según se va acumulando en la memoria RAM del ordenador, se va reproduciendo. En la segunda opción se reproduce mientras se acumula en BUFFER lo siguiente. URL, es el espacio a insertar la dirección del archivo. Aspecto, será el estilo que tendrá los controles del reproductor. Ancho y Alto establece el ancho y alto respectivo del reproductor. La opción Restringir hace que el reproductor no sea más grande que la base del documento Web. Reproducción automática y Rebobinado automático establece si empieza el video nada más abrir el documento Web y si, una vez terminado el video, se reproduce de nuevo. Existen otras herramientas Media para insertarlas en un documento Web y que no vamos a tratar en el curso, para así reducir el tamaño del mismo.

Widget

.

Un Widget es una aplicación JavaScript o Apple que te permite insertar dentro del documento la aplicación que realizará una función especial. Existen cantidad enormes de Widget, pero el más famosos es el típico editor de texto que se incluye en los sitios de Chat y que tiene todas las herramientas

Cursosindustriales. Curso de DreamWeaver CS6 20

para editar el texto, cambiarle el color, incluir caracteres especiales o incluir emoticonos, entre otros.

Si no tienes en tu sistema instalado ningún Widget, Dreamweaver CS5 no te permitirá agregar Widget a tu documento. Te habilita un cliente de Widget para descargarte a tu ordenador Widget conectándose a la página de Adobe.

Calendario

.

Inserta una fecha en el documento Web. Cada vez que se abra la página, se actualizará la fecha y hora, pero la hora no se actualiza mientras que está el documento Web abierto. Para ello debes de insertar un Widget o una aplicación Java de Media.

Server Side Include DE MAESTROSDELWEB: Los Server Side Includes, o simplemente SSI, nos proporcionan una sencilla forma de automatizar ciertos aspectos de la creación y posterior mantenimiento de nuestro sitio web, y sin necesidad de saber programar en Perl o PHP. Los SSI son directivas insertadas en páginas HTML que nos permiten inserción de contenido generado dinámicamente en nuestras páginas web. Como PHP pero mucho más fácil. Para que los SSI funcionen, las páginas HTML que las incluyen deben ser evaluadas por Apache antes de mostrar su contenido al navegador cliente. Por este motivo, servir páginas que hacen uso de SSI consume más recursos del sistema que el servir páginas HTML normales. El uso de SSI consume más recursos del sistema su utilización supone una carga adicional del servidor. Aunque esto es inevitable y lo mismo ocurre con los scripts en PHP o CGI, es una cuestión de comodidad contra eficiencia. Cursosindustriales. Curso de DreamWeaver CS6 21

Obviamente, no debemos hacer que Apache evalúe todas las páginas HTML antes de devolverlas al cliente, ya que seguramente en muchas de ellas no habrá directivas SSI y estaremos sobrecargando el sistema inútilmente. Por lo tanto, debemos diferenciar las páginas HTML y las que incluyen instrucciones SSI, para ello nada mejor que la solución estándar, la de usar la extensión “shtml” con las páginas que deben ser evaluadas.

Comentario

.

Sirve para introducir un comentario HTML y que no se reflejará en el documento Web.

Metadatos. Este menú te permite definir ciertos metadatos que estarán dirigidos a las máquinas que registran todos los sitios Web. Como ya hablamos en el curso de HTML, de los robots que rastrean la Internet. Pues bien, con esta serie de herramientas, puedes agregar mensajes que solo estos robots leerán y que mostrarán en los buscadores Web para las personas que busquen nuestro sitio. Está formado de:

META . Esta etiqueta sirve para añadir información sobre la página Web. Está información sirve para los buscadores.

Tiene tres opciones, Nombre, Valor y Contenido. El primero indica el tipo de información y se ha de rellenar en el Textbox Valor. Por ejemplo Nombre y Descripción. El tercer Textbox sirve para realizar una cadena representativa del valor; en este caso una descripción de la página. NOTA: Ten en cuenta que el atributo de Valor se ha incluido en Inglés debido a que la mayoría de los robots de buscadores entienden el Inglés principalmente.

Cursosindustriales. Curso de DreamWeaver CS6 22

PALABRA CLAVE

.

Te permite insertar una serie de palabras claves describiendo la función de la página y que los robots de los buscadores clasificarán tu Web según estas palabras.

Puedes poner, por ejemplo: cursos, Cursosindustriales, formación, aprendizaje, Dreamweaver, Flash, etc. Estas palabras claves las guardarán los distintos robots de los buscadores y cuando accedas a un buscador y pongas en el buscador alguna palabra clave, aparecerá tu página como principal búsqueda. NOTA: La aparición de la página en buscadores no quiere decir que aparezca en el primer puesto de los navegadores y que aparezca directamente; la aparición lleva un tiempo (aproximadamente de dos a tres semanas) y la posición en la que se encuentre en el navegador, depende exclusivamente del tráfico que tengas y las solicitudes que los usuarios hagan al buscador de tu propia página.

DESCRIPCIÓN

.

Se presenta una ventana similar a la anterior y te permite realizar una descripción de la página o del sitio Web. Esta descripción es la que aparecerá en las páginas de los buscadores; por tanto es bueno que sea clara, concisa y directa.

ACTUALIZAR

.

Esta opción te permite refrescar el contenido de la página cada tiempo estipulado en segundos mediante el cuadro Demora.

Cursosindustriales. Curso de DreamWeaver CS6 23

Esta opción está bien cuando quieres cargar en tu página Web una introducción y luego que se cargue tu Web. En Demora introduces el tiempo en segundo que quiere que actuara o se mantenga la Web.

En Acción puedes elegir Ir a URL, seleccionando un archivo distinto de la página principal; o Actualizar este documento, que actualizará el documento en cuestión.

BASE

.

Esta etiqueta establece una URL base para los demás enlaces internos que tomemos en nuestro documento. Es un poco liosa al principio, pero después y, sobre todo cuando tienes muchos archivos en la Web, es bueno, pues recorta el largo de los hipervínculos.

En Href seleccionas la dirección base de los hipervínculos. Imagina un sitio llamado Cursosindustriales y en ese sitio hay tres carpetas: una img, otra videos y otra cursos. Cuando haces un enlace a img, tienes que poner la ruta entera de la imagen que busques en concreto; pero si en Href pones: http://cursosindustriales, en el hipervínculo ya puedes poner solo "../img/imagen_en_concreto" En Destino, el destino del hipervínculo.

Cursosindustriales. Curso de DreamWeaver CS6 24

Script

.

Esta herramienta te permite insertar o no insertar un Script. Cuando lo pulsa se muestra la siguiente ventana:

En Tipo, selecciona el tipo de Script que quieres insertar en el documento Web. Los script más usados en los documentos Web son de JavaScript, pero Dreamweaver CS5 te permite insertar script de diferentes lenguajes de programación como Visual Basic Script, script de Java, PHP, entre otros. En Fuente, Dreamweaver te permite cargar un script que tengas ya compilado. Siempre que el navegador lo entienda, se podrá ejecutar en el documento Web. Los menús siguientes; Plantillas y regiones editables, y Selector de etiquetas lo vamos a saltar. Para más información, Internet.

Cursosindustriales. Curso de DreamWeaver CS6 25

DISEÑO La pestaña Diseño nos proporciona un ambiente adecuado para crear la estructura interna de una página Web y crear menús atractivos al visitante.

En este menú entraremos a estudiar a fondo las etiquetas de posicionamiento absoluto que nos posibilitarán crear ventanas específicas en cualquier parte del documento. Como puedes ver, esta pestaña de la barra de herramientas, tiene la opción de seleccionar dos estilos visuales de la barra: Estándar y Ampliada. simplemente la Ampliada proporciona una ayuda visual a la hora de utilizar tablas. Más adelante lo verás.

Etiqueta DIV

.

Esta herramienta te crea una etiqueta DIV (una ventana encima del documento).

En Insertar, selecciona el punto en el cual crear el DIV. Clase, aplicas una clase a esta etiqueta creada. Id, le pones un identificador para poder llamarlo desde otra función del programa o desde cualquier Script. El botón Nueva regla CSS, te abre la ventana de propiedades de la página Web en su menú de CSS para que le apliques los nuevos detalles en una regla CSS que se guardará por defecto en el documento Web actual.

Cursosindustriales. Curso de DreamWeaver CS6 26

DIV de posicionamiento

.

Similar al anterior, el uso de esta herramienta se utiliza para realizar estructuras en la página Web como pueden ser menús, fondos, ventanas de publicidad, etc., etc. Este control se usa siempre en modo de diseño. Cuando pulsas sobre la herramienta, no se muestra ninguna ventana, sino que el cursor cambia a un puntero en cruz que indica que puedes seleccionar en el fondo el DIV. Eso es; con el ratón pulsado en un punto y arrastrando, vas generando la forma que quieras que tenga el DIV y el lugar del documento Web en el cual lo quieras insertar de manera manual.

Pinchando en la pared derecha del DIV, el panel de propiedades cambia a.

En donde, en la parte izquierda donde pone Elemento CSS-P está seleccionado el nombre que por defecto Dreamweaver CS5 le añade al DIVPA. El Select Desb., te permite seleccionar el efecto que tendrá el DIV - PA sobre el documento Web siendo que esté oculto, que esté bloqueado, que se presente por encima o por debajo de otro elemento. Los Textbox Izq., Sup., An., Al., te permiten establecer la posición relativa del DIV - PA en el documento Web. El Textbox Izq., coloca el DIV - PA en la izquierda del documento Web, al valor de píxeles indicado. El valor cero es pegado al borde izquierdo de la pantalla. El Textbox Sup., coloca el DIV - PA respecto a la parte superior. El valor cero es en la parte superior del documento. An., establece el ancho del DIV - PA. Al., establece el alto del DIV -PA. El control Índice Z, establece el orden de los DIV - PA que tengas en el documento; por así decirlo, establece un orden de creación. El primer DIV - PA por defecto tendrá un índice Z de 1; el segundo será 2, etc. Cursosindustriales. Curso de DreamWeaver CS6 27

El control Vis., te permite establecer el estado de presentación del DIV - PA según tres condiciones:

Por defecto (default), se muestra el DIV - PA en la posición correspondiente según el número de índice Z. Inherit, hereda el atributo del elemento PA superior, esto es que cuando se inserta un DIV - PA dentro de otro, este segundo, hereda las características del primero. Visible, hace que sea visible el DIV - PA dentro del documento. Hidden, oculta el DIV - PA para que no se muestre en el navegador. ELEMENTOS PA. Desde el panel de controles, la pestaña Elementos PA, puedes ver todos los elementos que vayas insertando en el documento.

Si has insertado los DIV - PA separados unos de otros, en la ventana de DIV PA los verás separados. Cuando insertes un DIV - PA dentro de otro, verás que el segundo hereda las propiedades del primero, siempre que tengamos la opción de Evitar solapamientos desactivados. Si, por defecto, no se solapan los DIV - PA, puedes activas el solapamiento desde la barra de menús, el menú Editar y la opción de preferencias elegir el menú de Elementos PA.

Cursosindustriales. Curso de DreamWeaver CS6 28

Dreamweaver CS5 por defecto, desactiva el Checkbox Anidar. Para que se hereden unos de otros, simplemente selecciónalo y ahora cuando crees un DIV - PA dentro de otro, heredará del primero las propiedades.

Es muy común mientras se está utilizando DIV - PA, utilizar las ayudas visuales de Dreamweaver CS5, como las guías, cuadrícula o reglas. Eso ya lo dejo en mano del desarrollador Web. Para ver ayudas visuales, recuerda barra de menús, Ver y seleccionar la opción adecuada. Dreamweaver CS5, al igual que sus otras versiones, te permite convertir un elemento DIV - PA en una tabla, y viceversa. Al utilizar esta opción, es común que el desarrollador evite los solapamientos para evitar que la futura tabla produzca errores de creación al combinar celdas que no deseamos se combinen. Un solapamiento es cuando dos o más DIV - PA se tocan pero sin llegar a heredar las propiedades; es decir están juntos o comparten un espacio. El Evitar solapamiento, desplaza los DIV - PA lo suficiente como para que no se toquen. Cursosindustriales. Curso de DreamWeaver CS6 29

Desde la barra de menús, el menú Modificar y seleccionar la función Convertir. Ahí se despliega un menú en el cual te permite convertir Tablas a DIV PA o DIV - PA a Tablas. Cuando presionamos para convertir se muestra la ventana de conversión:

Para convertir las tablas que tengamos en nuestro documento a DIV - PA;

Dreamweaver ajustará lo máximo posible cada elemento transformado, pero tú como administrador debes de revisar el cambio y actuar en consecuencia.

Iframe

.

Esta herramienta nos crea una ventana similar al DIV PA, pero al cual le tenemos que configurar mediante los atributos HTML. Revisa HTML5.

Frames

.

Aunque los desarrolladores Web están usando más el uso del Iframe, aún se sigue usando el Frame convencional. Esta herramienta te permite crear tu frame personalizado e insertarlo en el documento Web. Cursosindustriales. Curso de DreamWeaver CS6 30

Cada herramienta, te crea un Frame según la posición indicada. Dreamweaver CS5, te inserta, en la pantalla del documento, el Frame en cuestión. Ese Frame es independiente del documento actual, y deberás de configurarlo si quieres para que se muestre junto al documento actual. Yo no voy a entrar más en detalles con este control, pues no lo utilizo y no me gusta usarlo en páginas Web. Pero es bueno conocer su funcionamiento y su uso. He obviado en el menú de Diseño, las herramientas de menús de SPRAY. Todo ello lo veremos más adelante a modo de pruebas.

Cursosindustriales. Curso de DreamWeaver CS6 31