DREAMWEAVER.

 

Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí.

 

Como crear un sitio.

 

crear una carpeta en el disco local, para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta.

Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto, lo que equivale a publicar el sitio, de modo que la gente podrá verlo en Internet a través del FTP para cargar el sitio local en el servidor.

 

La página inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.

 

menú Sitio, a la opción Administrar sitios....

la opción Nuevo... / definir las características del sitio.

Definirse el Nombre del sitio y la Carpeta raíz local.

la categoría Mapa de diseño del sitio puede definirse la página principal del sitio.

(si en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la cogerá por defecto).

Aceptar.

 

Abrir un sitio

menú Sitio.

Administrar sitios....

seleccionar el sitio

Listo.

 

Vistas del sitio

Ventana / Archivos.

También pulsando F8.

Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio.

 

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces.

 

dentro de Dreamweaver, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, Simplemente hay que pulsar sobre el botón Actualizar.

Propiedades del documento

Este cuadro se puede abrir de tres modos diferentes:

Pulsar la combinación de teclas Ctrl+J.

Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

Hacer clic con el botón derecho del ratón sobre el fondo de la página. Aparecerá al final del menú contextual la opción Propiedades de la página. Se abrirá el cuadro de diálogo siguiente:

 

Unidad 4. El texto (I)

Formato:  Los encabezados se utilizan para establecer títulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito

 

Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola.

Tamaño:   Permite cambiar el tamaño del texto.

Color:  Permite seleccionar el color de la fuente.

Estilo:  Estos botones permiten establecer si el texto aparecerá en negrita o en cursiva.

Alinear:   Establecer la alineación del texto.

Lista:   Crear listas con viñetas o listas numeradas.

Menú Texto /  Lista / se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán (en la propiedad Estilo:)

Sangria:  Estos dos botones permiten sangrar el texto y anular la sangría

Estilos CSS (texto).

Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una página, desde la posición precisa de elementos hasta el diseño de fuentes y estilos concretos y ese estilo se actualiza automáticamente.

1. En el documento, se selecciona el texto al que se desea aplicar características concretas.

2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del párrafo que queramos.

   3. En el cuadro Estilo del panel Propiedades.

También se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qué tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opción Cambiar nombre...

Hiperenlaces.

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ínvulo 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.

Crear enlaces

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.

 

Crear vínculos.

 

Texto: es el texto que mostrará el enlace

Vínculo: es la página a la que irá redirigida el enlace, si se trata de un enlace externo deberás escribirla empezando siempre por HTTP://

Destino: la página donde se abrirá la página, este campo se explica en el siguiente apartado.

Título: se trata de la ayuda contextual del vínculo, es equivalente al atributo ALT de las imágenes.

Tecla de acceso: atributo que facilita la accesibilidad a las páginas, habilita el acceso al enlace mediante la pulsación de la tecla Alt más la tecla de acceso indicada.

Índice de tabulador : Como habrás podido observar puedes saltar a través de los enlaces pulsando la tecla Tabulador. En este campo podrás establecer un índice indicando la prioridad del enlace y así configurar el modo en el que actuará el Tabulador es sus diferentes saltos.

Destino del enlace

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.

 

 

Formato del enlace

Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.

 

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.

 

El campo Borde sirve para ponerle un borde a la imagen, independientemente de si ésta va a contener un vínculo o no.

 

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 a apariencia de una mano señalando.

 

Enlace a correo electrónico

La sintaxis del vínculo en este caso es mailto:direccióndecorreo.

También es posible a través del menú Insertar, opción Vínculo de correo electrónico.

 

En este caso no es posible asignar el vínculo a una imagen, solo permite introducir el texto que contendrá el vínculo de correo.

 

 

 

Imágenes.

 

Insertar / Imagen.

Buscar la imagen / seleccionarla.

Aceptar.

 

En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento, ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.

 

Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque sí en el navegador. En Dreamweaver aparecerá de la siguiente forma:

 

Inspector de propiedades

 

Alt podrás asignarle una ayuda contextual a la imagen.

En Clase podrás asignarle un estilo que hayas creado anteriormente, así podrás darle alineación, bordes e incluso tamaño con sólo un clic.

Vínculo convertiremos al imagen en un link a otra página.

Puedes asignarle un tamaño de borde desde el campo Borde.

alineación con respecto al texto desde el campo Alinear.

Espacio V y Espacio H te serán muy útiles para separar la imagen del los Campos An (anchura) o Al (altura) para cambiar el tamaño de la imagen.

 

 

Imagen de sustitución. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sitúa sobre ella.

 

1.- Insertar, Objetos de Imagen.

2.- Imagen de sustitución.

3.- Checar las opciones del cuadro de dialogo.

 

 

Es preferible que la opción Carga previa de imagen de sustitución esté activa. Si se activa, la imagen de sustitución se carga cuando se carga la página, de este modo se evitan las demoras debidas a la descarga de la imagen cuando llega el momento de que aparezca.

 

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen.

 

Botones Flash

Insertar/ Media / Botón Flash.

En esta misma ventana hay que especificar también el Texto que mostrará el botón (Texto del botón:), así como el nombre con el que será guardado (Guardar como:) y el vínculo asociado (Vinculo: y Destino:).

     Recuerda que los botones deben guardarse con la extensión SWF.

inspector de propiedades es posible editar de nuevo sus atributos:

Texto Flash

1.- Insertar/ Media/ Texto Flash.

El inspector de propiedades del texto Flash es igual que el de un botón Flash

 

 

Barra de navegación

Una barra de navegación es un conjunto de imágenes que se utilizan como opciones de menú para navegar dentro de una web. Un página web solo puede contener una única barra de navegación.

 

Insertar/ Objetos de imagen / Barra de navegación.

En la nueva ventana pueden especificarse cuatro imágenes diferentes para cada uno de los botones, el vínculo para cada uno de ellos, etc.

A través de la opción Insertar es posible especificar si los botones de la barra de navegación van a aparecer de forma horizontal o vertical dentro de la página.

 

Marquesinas

son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea

 

Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.

Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE>. Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.

También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide">, la marquesina hará el desplazamiento una sola vez y se detendrá.

Si pones <marquee behavior="alternate">, en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:

<marquee behavior="alternate"> Bienvenid@s a PerrosGatos <img src="imagenes/logo_animales.gif"> </marquee>

 

 

 

Tablas.

 

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizar.

 

Las tablas están formadas por un conjunto de celdas, distribuidas en filas y columnas.

 

Insertar, Tabla.

 

Podrás checar el número de filas o columnas, así como también el ancho de las filas, color borde, etc.

 

 

Formato de tabla

Las propiedades de la tabla se especifican a través de su inspector de propiedades.

 

 

Añadir y eliminar filas y columnas

Modificar / Insertar filas o columnas....

Para eliminar filas y columnas hay que posicionarse en el lugar adecuado y luego :

Modificar / tabla / eliminar filas o columa.

 

También se puede seleccionar la fila o columna a borrar y pulsar la tecla de borrado (Del o Supr)

 

Combinar celdas y separarlas

 

Combinar celdas consiste en convertir 2 o más celdas en una sola por lo que dejará de haber borde de separación entre una celda y otra ya que serán una sola.

 

Una de las formas de dividir y combinar celdas es a través del inspector de propiedades.

 

Marcos

 

Sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.

 

Cada uno de los marcos de una página, contiene un documento HTML individual.

 

Crear marcos

 

Insertar, HTML, Marcos

 

Todos los documentos que contienen marcos tienen que tener una página en cada uno de ellos. Es por esto que al crear algún marco, se cargan páginas nuevas por defecto en cada uno de ellos, a excepción del marco que contiene la página original.

 

Pueden establecerse sus propiedades a través del inspector de propiedades.

 

 

 

Formularios

 

Se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

 

 

Los elementos pueden insertarse a través del menú Insertar, opción Formulario.

 

El Campo de texto solo permite al usuario escribir una línea, mientras que el Área de texto permite escribir varias.

 

 Y a través del inspector de propiedades, marcando la opción Una línea o Multi línea respectivamente así como también el Ancho del cuadro de texto, el número máximo de líneas o caracteres, y el valor inicial del cuadro..

 

Botón