1. No category

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 <a name> 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 <NAME> (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. (</HR>).
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 <DIV></DIV> 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