Documente Academic
Documente Profesional
Documente Cultură
Dreamwever
Interfaz
Apariencia general
Nuestra andadura en la web ha comenzado con Dreamweaver y el estudio de XHTML.
A lo largo de las páginas de este documento iremos desarrollando los diferentes aspectos del diseño
de páginas web, combinando tanto las herramientas propias de dreamweaver (DW de ahora en
adelante), y recurriendo al código puro y duro en aquellos casos donde sea necesario.
En esta sección vamos a hablar sobre todo de la apariencia del programa, de algunas
recomendaciones acerca de su configuración y uso y de herramientas a las que podemos recurrir sin
que nuestro código resulte perjudicado.
Comencemos pues, con la apariencia y configuración del programa.
La barra de herramientas
La barra de herramientas nos permite insertar diferentes elementos en nuestro documento. En
muchos casos nos ofrece un acceso rápido y cómodo a ciertas funciones del DW.
En el caso de que alguna vez tengamos que activarla (podemos cerrarla accidentalmente), debemos
hacerlo desde el Menú Ver > Barras de herramientas > Insertar.
La barra de herramientas nos ofrece varias opciones. Según la visualización que escojamos nos
aparecerán diferentes herramientas, específicas para cada caso.
En el apartado "Común", que aparece por defecto al abrir el programa por primera vez tenemos las
opciones más generales: crear tablas, puntos de ancla, insertar imágenes o crear imágenes de
sustitución son las que mejor funcionan.
Si pulsamos "Común" para desplegar las opciones de la barra, tendremos acceso al resto de
herramientas propias de cada apartado. Uno de los más útiles para evitarnos escribir código es el de
Formulario.
Desde aquí podemos definir qué tipo de elementos deseamos para nuestro formulario, insertar
campos para pedir información al usuario y botones que validen la información, de tal manera que
llegue a nuestro correo. Para más información, consulta el apartado sobre formularios.
¿Código o diseño?
Como ya te habrás dado cuenta, estamos haciendo mención a un buen uso del código XHTML. Esto
es importante para no generar un resultado a partir de una etiqueta inadecuada.
Por tanto, desde aquí aconsejamos utilizar el doble espacio de trabajo que nos ofrece DW. ¿Qué es
esto?
Básicamente, se trata de una opción que nos permite trabajar en el documento bien a nivel de
código, bien sólo en modo diseño (la apariencia de la web).
Nosotros sugerimos la tercera opción: el modo dividir.
De esta manera visualizamos diseño y código al mismo tiempo. Esta opción se encuentra en la barra
de herramientas "Documento", a la que accedemos desde el menú Ver > Barras de herramientas >
Documento.
Vista de código
Cuando navegamos por internet podemos solicitar al navegador que nos muestre el código fuente de
una página para saber cómo está hecha. Cuando trabajamos en nuestro documento en modo dividir
también tenemos ese código a mano.
Por defecto, DW suele mostrar el código ocupando tanto ancho como sea necesario. Esto puede
generar líneas de código interminables e incómodas de leer.
Para solucionar esto debemos activar una opción que permite visualizar el código según el ancho
del área de trabajo, de tal manera que no habremos de recurrir a las barras de desplazamiento
horizontales.
A esta opción llegamos desde el menú Ver > Opciones de vista de código > Ajustar texto.
bien aplicar los estilos CSS de manera más rápida que tecleando en código.
Muchas de estas operaciones se realizan desde las paletas que nos ofrece DW. Todas ellas pueden
activarse desde el menú Ventana.
b) Existen dos posibilidades para aplicar o quitar una etiqueta de párrafo o encabezado:
1ª) Texto - Formato de párrafo - Elegir un formato de párrafo del menú desplegable
2ª) En el inspector de propiedades de texto hacer clic en el cuadro Formato - Aparece el menú
desplegable - Elegir la opción deseada
6.- Insertar una regla horizontal
En Dreamweaver es posible separar visualmente diferentes textos y objetos en la misma ventana de
documento con una o más reglas horizontales.
a) Para insertar una regla horizontal:
Situar el punto de inserción en el lugar donde se quiere insertar una regla horizontal
Existen dos opciones para insertar regla horizontal:
o 1ª) «Insertar - Regla horizontal
o 2ª) En la barra «Insertar» marcar la categoría «Común» - Aparece la barra de menú - Hacer clic en
el botón «Regla horizontal» (4º botón empezando por la derecha)
c) Para modificar una regla horizontal en la ventana de documento.
Seleccionar la regla horizontal que se quiere modificar
En el inspector de propiedades de «Regla horizontal» modificar las propiedades que se deseen:
ancho (An) y alto (Al), alineación de de la regla y sombreado
Hiperenlaces
Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento
esencial para cualquier página web.
Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en
Internet, por ejemplo, "http://www.aulaclic.com".
Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo
del directorio en el que se encuentra el documento actual.
Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello
el vínculo debe ser "nombre_de_documento#nombre_de_punto". El punto se define dentro de un
documento a través del menú Insertar, opción Anclaje con nombre.
La forma más sencilla de crear un enlace es a través del inspector de propiedades. Para ello es
necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el
Vínculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene
HTTP://
Otra forma de crear un enlace es a través del menú Insertar, opción Hipervínculo.
Es posible crear también vínculos vacíos, que pueden ser útiles cuando se utilizan comportamientos,
DISEÑO WEB UPOLI-ESTELI
etc. Para ello es necesario escribir en Vínculo únicamente una almohadilla '#'.
El destino del enlace determina en qué ventana va a ser abierta la página vinculada, puede variar
dependiendo de los marcos de que disponga el documento actual.
Puede especificarse en el inspector de propiedades a través de Dest, o en la ventana que aparece a
través del menú Insertar, opción Hipervínculo.
_blank:
Abre el documento vinculado en una ventana nueva del navegador.
_parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de
marcos padre.
_self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el
vínculo.
_top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para qué sirve cada una de estas opciones de destino,
ya que se volverán a ver en el tema de Marcos
Cuando el vínculo está definido sobre una imagen, en el borde aparecen una serie de puntitos al
pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece
el contorno de esa zona.
Aquí tienes dos vínculos similares de ejemplo:
DISEÑO WEB UPOLI-ESTELI
Como puedes ver, la segunda imagen que hace de vínculo contiene un recuadro alrededor. Esto ocurre debido
a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la
primera imagen vale cero (0).
El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un
vínculo o no.
Si se pone a cero (0), no aparece ningún borde, ya que esto indica que el tamaño de las líneas que forman el
recuadro es cero (0). Puede hacerse un recuadro más gordo incrementando el valor del campo Borde.
Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del
vínculo. Suele adquirir la apariencia de una mano señalando.