mª jesús murcia > apuntes de dreamweaver
Como cualquier programa para Windows, DreamWeaver cuenta con una ayuda muy útil y completa...ya sabes, en el menú Ayuda.
Debemos distinguir entre:
· Página web: un archivo escrito en HTML (extensión .htm o .html), que podrá ser interpretado por un navegador.
· Sitio web: el conjunto de páginas web sobre un tema, relacionadas mediante hiperenlaces o links, junto a otros archivos de imágenes (.gif , .jpg) o sonidos (.mid), todos ellos bien organizados en una estructura de carpetas.
Debemos tener en cuenta el tipo de usuarios y diseñar el aspecto y prestaciones del sitio en consonancia.
Normalmente se diseñan las páginas web para una resolución de pantalla de 800x600, para que puedan ser visualizadas correctamente por la mayoria de usuarios.
Debemos pensar en una buena estructura de carpetas y en los enlaces que permitirán la navegación por el sitio.
DreamWeaver nos ayuda a organizar y mantener nuestro sitio web, mediante la ventana Sitio (o Inspector de sitios).
Para comenzar debemos definir un sitio nuevo en el menú Sitio, Sitio nuevo..., y definiremos un nombre de sitio y una carpeta raíz local (ya debe estar creada).
Después podemos crear carpetas y páginas de forma similar a como lo hacemos en el explorador de Windows. También es útil utilizar las Design notes... de cada archivo, para organizar el trabajo.
DreamWeaver crea las páginas como untitled.htm, debemos renombrar la página principal como index.htm o home.htm, según sea el nombre predeterminado por el servidor, y las demás con un nombre significativo, de cómo máximo 8 caracteres, sin espacios ni acentos, sin mayúsculas, y con la extensión .htm, para evitar posibles errores al publicar la página en servidores, que probablementes serán Unix.
DreamWeaver tiene un entorno un poco especial ya que cuenta con varias ventanas sobre el escritorio: la de edición de cada página, la del sitio, las diferentes ventanas de herramientas, etc.
En el menú Ver podemos activar o desactivar la regla y la cuadrícula, así com ver el código HTML de nuestra página.
En el menú Ventana podemos mostrar u ocultar las diferentes ventanas de herramientas. Es típico tener activadas las de Objetos (Común) y Propiedades, así como la ventana del Mapa del sitio.
También es útil observar la barra de estado, donde podemos elegir la resolución, ver el tamaño del archivo, y activar otras ventanas en el Minilanzador.
Es conveniente comenzar por definir las características de la página, en el menú Modificar, Propiedades de la página: título, imagen o color de fondo, color de los vínculos, etc...
El color se indica en RGB, con dos cifras hexadecimales para cada color (Red, Green, Blue). Cada cifra hexadecimal representa cuatro bits, por lo que estamos trabajando con colores de 24bits.
Recuerda que puedes utilizar la ayuda (botón Ayuda) y las guías visuales (Regla y Cuadrícula).
Simplemente tenemos que escribir, y utilizar la ventana de herramienas Objetos, Caracteres y la ventana de Propiedades, así como el menú Texto.
Podemos incluir caractereres especiales en nuestra página con el menú Insertar, Caracteres especiales.
Es útil revisar nuestra página con el menú Texto, Ortografía.
También se pueden definir y usar estilos HTML, desde el menú Texto o desde la Ventana, Estilos HTML.
Podemos hacerlo desde la ventana de herramienas Objetos, Común y desde el menú Insertar, Imagen. Sus características se modifican desde la ventana de herramientas Propiedades, como por ejemplo el texto ALT, el tamaño (An y Al) y la alineación.
En ningún caso esto modifica el archivo original.
Permiten que varias páginas web conformen un sitio web. Pueden aparecer en la página como un texto subrayado o como una imagen o gif animado. También usando otros elementos, como veremos en los sigientes apartados.
Es conveniente planificar los vínculos antes de definirlos, utilizando un esquema en forma de árbol. También debemos tener en cuenta la diferencia entre una ruta relativa (normalmente la usaremos para referencias a nuestras páginas, imágenes y sonidos) y una ruta absoluta (las emplearemos en las referencias a páginas remotas, y por lo tanto será una URL).
Los vínculos pueden hacerse a diferentes destinos:
· Dentro de la misma página web: por ejemplo, “#capitulo2”. Primero debemos insertar la marca en nuestra página, con la ventana de herramientas Objetos, Invisibles, Insertar punto de fijación con nombre (icono del ancla). Después, con el texto o la imagen que actuarán como vínculo seleccionados, utilizamos el campo Vínculo de la ventana Propiedades, con Señalar archivo.
· A otra página web de nuestro sitio: por ejemplo, “paginas\otra.htm”. Primero debemos escribir el texto o insertar la imagen. Con el texto o la imagen seleccionadas utilizamos el campo Vínculo de la ventana Propiedades, con Señalar archivo o bien con Buscar el archivo.
· A otra página web de un sitio remoto: por ejemplo, “http://www.elpais.es”. Con el texto o la imagen seleccionadas utilizamos el campo Vínculo de la ventana Propiedades, escribiendo la URL o copiandola desde el navegador (Ctrl+C y Ctrl+V).
· A un correo electrónico: “mailto: nombre@correo.es”. Con el texto o la imagen seleccionadas utilizamos el campo Vínculo de la ventana Propiedades.
Un mapa sensible es una imagen en la que definimos varias zonas, cada una de las cuales actúa como vínculo.
Para utilizarlos debemos insertar una imagen y definir cada zonas a través de la ventana Propiedades, de la imagen. Acontinuación definimos el vínculo de la misma forma que cualquier otro vínculo, seleccionando cada zona.
El menú de salto es un objeto de DreamWeaver que utiliza el lenguaje de programación Javascript. Consiste en un menú desplegable con una lista de vínculos.
Para crearlo siturarmos el cursor y seleccionaremos el menú Insertar, Objeto de formulario, Menú de salto, y a continuación definimos las entradas de la lista y su vínculo en el cuadro de diálogo.
Es conveniente que la primera opción sea el título de la lista y que su vínculo sea “#”, con lo que si es seleccionada simplemente se recargará la página actual.
Las tablas son elementos organizadores del contenido de una página web. Nos permiten distribuir texto e imágenes por nuestra página y pueden llegar a ser muy sofisticadas. Es recomendable comenzar la creación de una página web a partir de una tabla que ocupe toda la página.
Para crearla situaremos el cursor y desplegaremos el menú Insertar, Tabla, definiendo el número de filas y columnas así como el % de ancho de la ventana del navegador en que se mostrará.
Para modificar sus carácterísticas, podemos seleccionar una celda, fila, columna o toda la tabla y cambiar sus Propiedades. El contenido de cada celda puede ser texto, imagen, vínculo,... e incluso otra tabla.
Se suele utilizar un borde “0”, que hace la tabla invisible, mostrando sólo la organización de la página Tablas más sofisticadas se consiguen con los botones Combinar celdas o Dividir celdas.
Las capas no se visualizan en navegadores antiguos, ya que forman parte del DHTML o HTML Dinámico. En una capa podemos introducir texto, imagen, tabla, etc., y puede superponerse al contenido de la página web.
Para crear una capa lo haremos a través del menú Insertar, Capa. Aparecerá sobre nuesta página un rectángulo que enmarcará el contenido de la capa (insertaremos elementos de la forma habitual). La capa puede desplazarse sobre toda al hoja, superponiéndose a los otros elementos. Cuando no está seleccionada aparece como un icono amarillo con una C, que podemos utilizar para seleccionarla de forma sencilla (siempre que esté activad la opción menú Ver, Ayudas visuales, Elementos invisibles).
Cuando hay varias capas en la página web, siguen un orden de apilamiento dado por su número de índice Z, en la ventana de Propiedades; la de mayor número está sobre las otras.
En el campo Desb. (desbordamiento) indicaremos cómo se mostrará la capa cuando su contenido sea mayor que sus dimensiones.
En el campo Rec. (Recorte) definimos el área visible de la capa, indicando la distancia en pixeles desde los lados de la capa a esa área visible.
También podemos elegir la etiqueta HTML con que se codificará la capa. DIV y SPAN son las etiquetas estándar, visibles en la mayoria de navegadores; especialmente se recomienda usar DIV.
Los marcos permiten dividir la ventana del navegador y visualizar varias páginas web al mismo tiempo. Lo habitual es utilizar una página como un menú con vínculos que hacen que se muestren diferentes páginas en otros marcos.
Se define una página con la estructura de los marcos, y a cada marco se asocia una página inicial, que puede ir cambiando según como definamos los vínculos de dichas páginas. Cada marco tiene asociado un nombre y cada vínculo indicará en que marco se debe mostrar.
Por ejemplo, podemos tener dos marcos, uno para el menú (superior) y otro para mostrar las páginas de contenido, que irá variando al hacer clic sobre los vínculos del menú. En este caso estaremos utilizando en cada momento tres documentos HTML: la página de definición de los marcos, la página del menú y la página de contenido que se esté mostrando.
Es conveniente planificar si un sitio web se construirá utilizando marcos para navegar por él, ya que esto influirá en el diseño de las páginas. También debe tenerse en cuenta que muchos marcos, o con mucho contenido, pueden difucultar, en lugar de facilitar, la navegación por el sitio.
Para crear marcos con DremWeaver, comenzaremos por crear las páginas que se incluirán en ellos. A continuación crearemos la página de marcos, definiendo los marcos con el menú Insertar, Marcos.
Conviene que en ese momento seleccionemos el menú Ventana, Marcos, para ver la ventana Marcos (o Inspector de marcos), con la definición de los marcos y sus nombres, que nos permitirá seleccionarlos fácilmente.
Si seleccionamos el conjunto de marcos podemos definir sus Propiedades, como el tamaño de cada fila o columna, fijo o en porcentaje de la ventana del navegador. También podemos definir sus propiedades como página, en el menú Modificar, Propiedades de la página, como haciamos para otras páginas.
Si seleccionamos un marco, podemos cambiarle el nombre (topFrame,mainFrame, etc.) por otro más significativo. También podemos definir si tendrá o no barras de desplazamiento, en el campo Desplaz. (desplazamiento). Con la casilla Mismo tamaño impediremos que los usuarios arrastren los bordes de los marcos desde su navegador, cambiando la dimensión de los mismos.
Para definir la página inicial que se abrirá en un marco, lo seleccionamos y a continuación vamos al menú Archivo, Abrir en marco..., o la elegimos en la ventana Propiedades, en el campo Origen, con Buscar el archivo.
Para hacer que una opción del menú abra una página en otro marco, al definir el vínculo debemos seleccionar en el campo Dest. (Destino) el nombre del marco. Las otras opciones mostrarán la página en el mismo marco (“_self”, que es la opción por defecto), en una ventana nueva del navegador (“_blank”) o ocupando toda la ventana del navegador, eliminando así los marcos (“_top”).
Debemos ser muy cuidadosos al guardar, ya que podemos guardar la página de marcos (Archivo, Guardar conjunto de marcos), o sólo la página que muestra el marco (Archivo, Guardar marco, o Guardar todos los marcos).