Contenidos modulo 5 dream weaver

DISEÑO WEB CON

DREAMWEAVER CC

MÓDULO 6 Máster en eLearning. Universidad de Sevilla

UNIVERSIDAD DE SEVILLA 0

Descargar el programa con Creative Cloud

Desde la página web oficial del programa podemos descargar una versión demo gratuita de 30 días para instalarla en nuestro ordenador que nos va a permitir trabajar con total libertad hasta su caducidad.

Le indicamos unos sencillos pasos para descargar el programa a su ordenador:

• En primer lugar debemos instalar la aplicación Adobe Creative Cloud

• Una vez instalada la aplicación abrir Creative Cloud

• Registrese si es que aún no estas registrado en Adobe "Crear un ID de Adobe."

• Acceda con su ID y contraseña y...

• Seleccione Adobe Dreamweaver CC y comenzar el proceso de descarga.

• Una vez concluida la descarga, podremos abrir Dreamweaver y comenzar a trabajar con él.

La versión de prueba gratuita es totalmente funcional y ofrece todas las características de Adobe Dreamweaver CC

Subir | © Universidad de Sevilla

Abrir programa

• Le aconsejamos que practique abriendo por primera vez el programa para que se vaya familiarizando con él. Además, le vamos a pedir que cree un acceso directo a Dreamweaver en su escritorio. Siga las indicaciones que le damos en esta página.

http://www.adobe.com/es/

http://educa.us.es/bbcswebdav/pid-6106-dt-content-rid-93422_1/courses/master_2/dwcc/01.html%23subir

Cuando ya hemos instalado el programa en Windows, lo siguiente que haremos para empezar a trabajar con él será abrirlo. La forma que tenemos de hacerlo es similar a como lo venimos haciendo con cualquier programa con Windows, haremos clic en el menú Inicio, pulsamos en Todos los programas y seleccionamos Adobe/Adobe Dreamweaver CS6. En la imagen que le presentamos puede ver los pasos que hemos seguido para hacerlo.

También podemos crear un acceso directo al programa en el escritorio para abrirlo de una forma más directa e inmediata.

• Vamos a hacer clic derecho en el acceso del programa en el menú de inicio/Enviar a/ Escritorio (Crear acceso directo)

• Veremos cómo se ha creado un acceso más al programa que se llama "Adobe Dreamweaver CS6". Vamos a hacer clic derecho sobre él y seleccionamos Enviar a: / Escritorio (crear acceso directo).

• Comprobamos cómo se ha creado un acceso directo al programa en nuestro

escritorio Podemos acceder al programa haciendo doble clic sobre el icono de acceso directo creado en el escritorio.


Área de Trabajo


Podemos llamar área de trabajo al espacio y distribución de herramientas que encontramos en el programa cuando vamos a trabajar con él.

En el caso de Dreamweaver vamos a encontrar una en el centro el espacio sobre el que trabajaremos, la ventana de documento, junto con una serie de paneles de herramientas agrupados alrededor de la ventana.

En la parte superior de la ventana del programa vamos a encontrarnos:

• La barra de menús, donde veremos los diferentes menús de herramientas y opciones para editar archivos.

• La barra de formato, desde donde daremos título al archivo en el que trabajamos.

• Menú Común, desde donde podremos introducir diferentes elementos en el documento como imágenes o tablas.

A la derecha encontramos agrupadas en el lanzador las diferentes ventanas de herramientas para gestionar y modificar los documentos, como por ejemplo, la ventana Archivos. Podemos plegar este lanzador para ganar espacio de trabajo pulsando en la flecha que vemos en su borde exterior. Si deseamos volver a verlo tendremos que pulsar de nuevo en la misma flecha.

Por último, encontramos el inspector de propiedades. Es un panel de herramientas desde el que vamos a trabajar con el documento. Además, encontramos la barra de estado que nos dará información sobre el tamaño del documento y velocidad de carga de la página.


Preferencias


• Desde este menú podemos seleccionar otras opciones para las que es necesario un dominio más especializado del programa y que no usaremos desde el nivel inicial.

Cuando empezamos a trabajar en Dreamweaver, una de las primeras acciones que vamos a llevar a cabo, junto con la distribución del espacio de trabajo, será configurar las opciones generales del programa para personalizar el entorno en el que nos moveremos. Esto lo haremos desde el menú Preferencias. Accedemos a él pulsando sobreEdición/Preferencias en la barra de menús de Dreamweaver.

En esta ventana vamos a acceder a la categoría General, desde la que podremos configurar las opciones generales del programa. Encontramos dos grupos de opciones: opciones de documento y de edición.

En las opciones de documento podremos acceder a la configuración con la que el programa va a tratar los documentos y cómo los vamos a ver al abrirlo. Indicaremos que nos avise cuando abramos archivos de sólo lectura, que son aquellos protegidos sobre los que no podemos escribir.

Dentro del apartado opciones de edición vamos a configurar la forma en la que crearemos los documentos con Dreamweaver. Mostrando diálogo al insertar objetos haremos que el programa nos avise cuando introducimos elementos como por ejemplo una imagen. Cuando redactamos un documento en Dreamweaver vemos cómo no nos permite introducir más de un espacio al escribir, para cambiar esta opción, seleccionaremos permitir múltiples espacios consecutivos, de esta forma podremos redactar como si se tratase de un editor de textos.


Los paneles de herramientas

• Los paneles de herramientas de Dreamweaver nos permiten plegarlos para poder disfrutar de mayor espacio de trabajo con el programa. En el momento en el que lo deseemos podemos volver a hacerlos visibles.


Cuando abrimos Dreamweaver encontramos un área de trabajo que muestra una serie de ventanas fijas alrededor de la pantalla, presentan diferentes herramientas que nos van a ayudar a componer cada documento que editemos con el programa. A las agrupaciones de estas ventanas vamos a llamarles paneles.

Estas ventanas tienen la característica de ser plegables. Podemos esconderlas o hacerlas visibles en cualquier momento, para ello haremos clic en el botón del triángulo gris situado en la parte superior derecha de cada una de ellas.

Si nos desplazamos a la barra de menús del programa y pulsamos Edición/Preferencias, dentro del apartado Paneles tenemos la opción de seleccionar los paneles de herramientas que queremos que muestren el programa por defecto cada vez que lo abramos.

Las ventanas que vamos a utilizar con más frecuencia en Dreamweaver serán las de propiedades, insertar y archivos, le los explicamos brevemente:

• Propiedades. Desde aquí vamos a modificar la mayoría de los aspectos del documento y de los objetos que insertemos en él.

• Archivo. Aquí tendremos disponibles todos los archivos con los que vamos a trabajar con el programa.

• Común /Insertar. Localizaremos los objetos, imágenes o tablas que queramos introducir en el documento sobre el que estamos trabajando.


Propiedades

• El cuadro de diálogo Propiedades de la página permite especificar la familia y el tamaño de fuentes predeterminados, el color de fondo, los márgenes, los estilos de los vínculos y otros muchos aspectos relacionados con el diseño de páginas. Puede asignar nuevas propiedades de página a cada página que cree, así como modificar las propiedades de las páginas existentes. Los cambios que realice en el cuadro de diálogo Propiedades de la página afectarán a toda la página.


El inspector de Propiedades se caracteriza por su funcionalidad y versatilidad, ya que cambiará de apariencia conforme empleemos unos objetos u otros para adaptarse a ellos.

Nos permitirá modificar color y forma al texto, alinearlo en el documento o establecer hipervínculos. Al trabajar con tablas o imágenes nos va a permitir cambiar su tamaño, forma y posición en el documento donde trabajamos, además de poder cambiar todas sus propiedades.

Vemos cómo se divide en dos partes, la superior siempre nos va a mostrar propiedades básicas del elemento con el que trabajamos. La parte inferior la podemos plegar y desplegar pulsando sobre la flecha que encontramos en el ángulo inferior derecho del inspector de propiedades. Aquí vamos a encontrar más opciones para trabajar con ese objeto o elemento. Si trabajamos sólo con texto veremos cómo la parte de abajo aparece vacía.

• Formato. Establece el estilo de párrafo del texto seleccionado. Párrafo aplica el formato predeterminado para una etiqueta , Encabezado 1 añade una etiqueta H1, etc.

• ID. Asigna una ID a la selección. El menú desplegable ID (si resulta aplicable) enumera todos los ID declarados pero no utilizados en el documento.

• Clase. Muestra el estilo de clase que se aplica actualmente al texto seleccionado. Si no se ha aplicado ningún estilo a la selección, el menú emergente muestra Sin estilo CSS. Si se han aplicado varios estilos a la selección, el menú aparece en blanco.

Utilice el menú Estilo para seguir uno de estos procedimientos:

o Seleccione el estilo que desea aplicar a la selección.

o Seleccione Ninguno para quitar el estilo seleccionado actualmente.

o Seleccione Cambiar nombre para cambiar el nombre del estilo.

o Seleccione Adjuntar hoja de estilos para abrir un cuadro de diálogo en el que poder adjuntar una hoja de estilos externa a la página.

• Negrita. Aplica o al texto seleccionado, en función de la preferencia de estilo definida en la categoría General del cuadro de diálogo Preferencias.

• Cursiva. Aplica o al texto seleccionado, en función de la preferencia de estilo definida en la categoría General del cuadro de diálogo Preferencias.

• Lista sin ordenar. Crea una lista con viñetas del texto seleccionado. Si no hay texto seleccionado, comienza una nueva lista con viñetas.

• Lista ordenada. Crea una lista numerada del texto seleccionado. Si no hay texto seleccionado, comienza una nueva lista numerada.

• Blockquote y Quitar Blockquote. Inserta y anula sangría en el texto seleccionado aplicando o quitando la etiqueta blockquote. En una lista, la aplicación de sangría crea una lista anidada y su anulación elimina la anidación de la lista.

• Vínculo. Crea un vínculo de hipertexto del texto seleccionado. Haga clic en el icono de carpeta para localizar un archivo del sitio, escriba el URL, arrastre el icono de señalización hasta un archivo del panel Archivos o arrastre un archivo desde el panel Archivos hasta el cuadro. 1. Título. Especifica el texto de información sobre una herramienta para un vínculo de hipertexto.

• Destino

Permite especificar el marco o la ventana donde se cargará el documento vinculado.

• _blank carga el archivo vinculado en una nueva ventana sin nombre del navegador.

• _parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo vinculado se cargará en la ventana completa del navegador.

• _self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino está implícito, por lo que normalmente no es preciso especificarlo.

• _top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los marcos.


Insertar

• Podemos visualizar el panel Insertar desde la barra de Menú Archivo/ Insertar

Encontramos el panel Insertar en la parte superior de la ventana del programa, desde aquí podremos introducir en el documento de una forma rápida y ágil cualquiera de los elementos que nos presenta. Es un menú que estructura su contenido en pestañas, dentro de cada una de ellas vemos una categoría diferente de elementos, entre ellas usaremos con más frecuencia serán las pestañas común, disposición y texto. El resto de categorías requieren un nivel avanzado de uso de Dreamweaver.

Le mostramos una imagen en la que le indicamos los componentes de este menú.

En la pestaña común encontraremos la mayoría de los elementos con los que vamos a trabajar en un documento, tales como hipervínculos, tablas o imágenes. Para hacerlo, sólo tenemos que hacer un clic en su icono correspondiente e insertarlos en el documento para empezar a trabajar con ellos.

Por ejemplo, si seleccionamos el icono correspondiente a insertar imagen, lo que haremos será buscarla en nuestra carpeta de imágenes e introducirla en el documento. A lo largo de los apartados del módulo iremos viendo cómo hacer uso de los diferentes elementos que componen este menú.



Archivos

• Podemos localizar la ventana Archivos desde la barra de menú superior Ventana/Archivos. Crear una nueva carpeta y nómbrala.

• A continuación, renómbrala, trasládala a otra ubicación del directorio principal y por último la eliminas.

La ventana Archivo la encontramos en el margen derecho de la pantalla. Podremos ver en todo momento los archivos con los que estamos trabajando y acceder a ellos.

Desde aquí podremos renombrarlos, eliminarlos y organizarlos. Podremos desplegar esta ventana y hacer que ocupe toda la pantalla pulsando en el botón. Para devolverla a su tamaño original haremos clic otra vez en el mismo botón.

Si decidimos renombrar algún archivo desde esta ventana, Dreamweaver nos preguntará si queremos actualizar los archivos para no perder los hipervínculos. Podremos hacerlo pulsando en el botón Actualizar.

En el caso de no querer actualizar a la hora de introducir cambios, corremos el riesgo de que fallen vínculos entre los documentos y la información no se presente correctamente.

Creación de un archivo o carpeta

Eliminación de un archivo o carpeta

Cambio del nombre de un archivo o carpeta

Traslado de un archivo o carpeta

| © Universidad de Sevilla

Creación de sitios web

• Es esencial almacenar todos los recursos del sitio en la carpeta raíz local para asegurar que los vínculos que configuremos en el ordenador funcionen bien cuando el sitio se cargue en el servidor. Esto se debe que los elementos del sitio han de permanecer en la misma ubicación del disco duro con relación al servidor Web para que los vínculos funcionen correctamente.

El siguiente esquema muestra los pasos esenciales a tener en cuenta a la hora de crear un sitio web.


Planificación y diseño

• Objetivos del sitio. ¿Qué se desea conseguir mediante el sitio?

• Visitantes del sitio. ¿Qué audiencia se desea que visite su web?

• Definir un diseño. ¿Cómo aparecerá nuestra web ante el visitante?

• Organizar el sitio. Desde un principio hay que tener presente la jerarquía de los documentos. Si se comienza a crear documentos sin pensar en el orden que le corresponde, se puede terminar con una enorme carpeta llena de archivos difícil de administrar. Es conveniente dividir el sitio en categorías, colocando las páginas relacionadas en una misma carpeta. Este tipo de organización facilitará el mantenimiento y la navegación del sitio. También es conveniente decidir dónde colocaremos los elementos como imágenes, archivos de sonido, etc. Es aconsejable colocar todas las imágenes en una carpeta, a fin de facilitar su localización para insertarla en una página.

• Sitio local y sitio remoto. Deberán tener exactamente la misma estructura.

• Planificación de la navegación. Debemos crear un sistema de navegación en el cual, el visitante se oriente fácilmente y sepa en todo momento en qué lugar se encuentra y pueda regresar a la página inicial. Podemos establecer una estructura lineal o jerárquica. Un ejemplo típico del esquema de navegación lineal es la mayoría de los tutoriales, donde para acceder a la página 10, debemos recorrer las anteriores. El caso del esquema de navegación jerárquica la utilizan la mayoría de los portales, en ellos se ofrece una barra de navegación principal, que permite acceder a cualquier parte del sitio sin importar la ubicación actual del visitante.

• Creación de páginas web Una vez creado el sitio local, estaremos en disposición de crear documentos. Un documento (es decir, una página del sitio web) puede contener texto e imágenes, además de elementos como animaciones, vídeo, vínculos con otros documentos y sonido. Conforme se trabaje con los documentos, Dreamweaver generará automáticamente el código HTML.

• Disposición y configuración de página Definiremos la apariencia que deben tener nuestras páginas web en un navegador. Es fundamental para el diseñador/a, tales como la ubicación de los menús o las imágenes. Dreamweaver nos ofrece distintos métodos

para el diseño, como por ejemplo, el uso de las tablas, permitiéndose dibujar fácilmente celdas de tablas en una página y a continuación colocarlas donde se prefiera.

• Introducción de contenidos Se puede añadir contenido a las páginas escribiendo o pegando texto e insertando objetos como imágenes, tablas, sonidos y otros elementos que nos facilite el programa. Para la elaboración de páginas web suelen usarse tres formatos de archivos gráficos: GIF, JPEG (JPG) y PNG. Actualmente, la mayoría de los navegadores sólo reconocen sin problemas los formatos de archivos GIF y JPEG.

• Vinculación de las páginas Dreamweaver permite después de configurar un sitio local para guardar los documentos del sitio web, establecer conexiones desde nuestros documentos a otros documentos, o tipos de archivos, es decir, crear vínculos. Es posible establecer vínculos con cualquier texto o imagen de cualquier lugar del documento.

• Publicación del sitio Es conveniente comprobar localmente el sitio a medida que se construye para detectar y solucionar los problemas lo antes posible y evitar que se repitan. Debemos asegurarnos que no hay vínculos rotos (la página no aparece en el navegador, informándonos que hay un error) y que las páginas no tardan mucho en cargar.


¿Qué es un sitio?

• Dreamweaver nos ofrece el panel Archivos para ayudarnos no sólo a gestionar los archivos de forma local, sino a transferirlos hacia y desde un servidor remoto. Podemos visualizar, seleccionar, abrir y copiar archivos hacia y desde la carpeta raíz local, además de hacia y desde los servidores remotos y/o de prueba en este panel.


Los sitios web no son más que una colección de documentos html. Cada imagen, desde el botón de navegación más pequeño hasta el mapa de imagen más grande, son archivos independientes que deben ser cargados junto a la página HTML, así como cualquier otro elemento incluido, como pueden ser sonidos, vídeos, animaciones, etc.

En nuestro caso, vamos a diseñar el Programa del Curso que estáis realizando como parte del ejercicio final de este curso

Ya iremos viendo a lo largo de este módulo la forma en la que vamos a organizar nuestro sitio.


Crear carpeta en local.

• Es importante que al nombrar la carpeta no empleemos espacios, tilde o caracteres extraños como la ñ y las mayúsculas. No es conveniente que lo nombremos con guiones bajos (_), ya que es más difícil memorizar el nombre del mismo.

El primer paso que debemos realizar para diseñar y organizar nuestro sitio es crear una carpeta en nuestro ordenador, en ella iremos incluyendo los documentos que van a componer nuestro sitio.

Ésta será la carpeta principal del sitio, donde irán el resto de subcarpetas y archivos que vayamos creando. Esta carpeta se llama carpeta raíz. Para crearla nos dirigimos a la unidad C: o D: (en el caso de tener dos discos duros) de


nuestro ordenador, desde Windows sin necesidad de abrir Dreamweaver, una vez dentro vamos a crear una nueva carpeta, le indicamos los pasos a seguir:

• Abrimos el disco duro C: y pulsamos en el menú Archivo/Nuevo/Carpeta.

• A continuación nombraremos la carpeta escribiendo en la zona sombreada. Recuerde que el nombre que le debemos dar a estar carpeta es programa.


Creación de un sitio nuevo.

• Dreamweaver nos va a mostrar dos tipos de asistentes a partir de los que podremos configurar nuestro sitio web, que son el básico y el avanzado. Los dos cumplen las mismas funciones a la hora de configurar el sitio. En nuestro caso emplearemos el básico ya que nos estamos iniciando en el manejo del programa.

Una vez que hemos creado la carpeta raíz, lo siguiente será configurar el sitio en Dreamweaver. Un sitio local es la estructura que debemos crear en nuestro equipo para que contenga todas las carpetas, archivos html, imágenes, sonidos, etc, con las que vamos a trabajar en nuestro sitio web.

Configuramos un sitio en Dreamweaver para que el programa reconozca la carpeta raíz del sitio que hemos creado y en la que guardaremos los archivos que editemos con Dreamweaver.

Éste tiene que ser siempre el primer paso que debemos dar cuando vayamos a utilizar Dreamweaver por primera vez.

Le indicamos unos pasos para comenzar a hacerlo:

• Nos dirigimos a la barra de Menú y pulsaremos en el menú Sitio.

• A continuación, seleccionaremos Nuevo Sitio.

• A partir de aquí accedemos al asistente que nos va a guiar en el proceso para configurar nuestro sitio local en Dreamweaver.


http://educa.us.es/SCRIPT/master/scripts/student/serve_page.pl/master/dw8/tema1/pagina14.htm?689577511+689613548+OFF+dw8/tema1/demos/crearcarpeta.swf+


Editar sitio local

• Insistimos en que resulta esencial almacenar todos los recursos del sitio en una carpeta principal del disco duro e identificarlos dentro de Dreamweaver. Esto es así, porque los vínculos sólo funcionarán correctamente si todos los elementos del sitio permanecen en la misma ubicación del disco duro con relación al servidor Web.

Un sitio local es una estructura que debemos crearen nuestro equipo para que contenga todas las carpetas, archivos html, imágenes, sonidos, etc, con las que vamos a trabajar en nuestro sitio web. Una vez que hemos configurado un sitio en Dreamweaver podemos modificarlo en el momento que estimemos oportuno. De esta forma el programa nos ofrece una

mayor elasticidad a la hora de cambiar el nombre del mismo o las opciones con las que lo configuramos al crearlo.

Para editar un sitio vamos a dirigirnos a la barra de menús, donde haremos clic en el menú Sitio y seguidamente en Administrar sitios. Una vez aquí el programa nos muestra una ventana con la lista de sitios que tenemos configurados en Dreamweaver. Accederemos a cada sitio haciendo un clic en su nombre.

Eliminaremos, editaremos, duplicaremos y exportaremos un sitio haciendo clic sobre el icono que corresponda.


Estructura del sitio

• Si queremos eliminar una carpeta o archivo vamos a hacer clic derecho sobre ellos en la ventana Archivos y seleccionamos Eliminar. Seguidamente pulsamos Aceptar en el cuadro de diálogo.

Estamos empezando a diseñar nuestro sitio a partir de la carpeta raíz, en este módulo trabajaremos en la creación del diseño del programa del curso que está desarrollando como parte del Trabajo fin de Máster.

Comenzaremos creando la estructura.

Partimos de una carpeta raíz creada en C/ que hemos nombrado programa.



http://educa.us.es/SCRIPT/master/scripts/student/serve_page.pl/master/dw8/tema1/pagina19.htm?689577511+689613553+OFF+dw8/tema1/demos/crearcarpeta.swf+

Observamos en la imagen, que de ella, parten unas series de subcarpetas y archivos.

Crearemos una nueva carpeta dentro de la carpeta programa a partir de Dreamweaver que nombraremos como image, para tener un mayor control sobre la creación de la estructura y la disposición de carpetas y archivos en el sitio.

Para ello, vamos a dirigirnos a la ventana Archivos, en el panel de herramientas de la derecha. Haremos un clic sobre la carpeta raíz del sitio para seleccionarla, seguidamente haremos clic con el botón derecho y pulsaremos en Nueva carpeta.

Cuando se ha creado la carpeta nueva, vemos cómo aparece sombreado el nombre de la misma, seleccionaremos esta zona y escribimos el nombre que tendrá la nueva carpeta en el sitio (image).

En la carpeta image, vamos a introducir las imágenes que utilizaremos en los archivos.

Además, vemos como el sitio que representa la imagen contiene las páginas que componen el programa del curso y que son las siguientes:

• Calendario, que nombraremos como (calendario.html)

• Competencias, (competencias.html)

• Entorno, (entorno.html)

• Evaluación, (evaluación.html)

• Presentación, que nombraremos como, (index.html) al ser el primer archivo que visualicemos cuando abramos el sitio.

• Justificación, (justificación.html)

• Metodología, (metodologia.html)

• Y, por último Programa, (programa.html)


Abrir y guardar páginas

• Asegúrese de estar trabajando en el espacio de trabajo adecuado seleccionando Ventana/ Diseño del espacio de trabajo/ Restablecer "Diseñador"

• Para abrir documentos que ya hemos editado con Dreamweaver nos vamos a dirigir a la ventana Archivos, donde haremos doble clic en el nombre documento que queremos abrir.

• Dreamweaver nos permite trabajar con más de un archivo a la vez ya que los podemos organizar a partir de las pestañas que están situadas debajo de la


ventana del documento. Pulsando en ellas abrimos el documento para editarlo.

El primer paso para generar una nueva página de forma correcta es:

• Seleccionar Archivo/Nuevo. Se abrirá el cuadro de diálogo Nuevo Documento.

• Haga clic en la categoría Página en Blanco que aparece a la izquierda del cuadro de diálogo Nuevo documento. En la columna Tipo de página,

podremos seleccionar el tipo de página que queremos crear (por ejemplo HTML, ColFusion, etc.). Escoge HTML

• En la columna diseño, podemos seleccionar como base de nuestra página un diseño predeterminado. Estos diseños se dividen en dos categorías:

Columnas fijas: No cambian su tamaño dependiendo de los ajustes del navegador del usuario. Se miden en píxeles.

Columnas flotantes: Varían su tamaño si el usuario cambia la ventana del navegador, pero no si el usuario modifica los ajustes de texto.

• Haga clic en <ninguno> en la columna Diseño para construir la página sin emplear un diseño predeterminado.

• Deje el ajuste predeterminado Tipo de documento a XHTML 1.0, ya que es el ajuste más adecuado en muchos casos.

• Por último, clic en el botón Crear para generar una nueva página HTML en blanco.

Deberíamos de acostumbrarnos a guardar las páginas en la carpeta raíz local lo antes posible y de forma frecuente. Insistiremos en este aspecto a lo largo del módulo ya que es muy importante almacenar todos los recursos del sitio en una carpeta principal del disco duro para que los vínculos que configuremos funcionen cuando carguemos el sitio en el servidor.

Para Guardar una página en un sitio web.

• Seleccionaremos el comando Archivo/ Guardar en el programa.

• En el cuadro de diálogo Guardar como, guardaremos la página en el directorio principal de la carpeta raíz del sitio programa.

• En el campo Nombre, llamaremos al archivo por ejemplo calendario. Éste será uno de los apartados que componen el sitio programa del curso

• Hacemos clic en Guardar para conservar la página en la carpeta raíz local. Verá como en la ventana Archivos se ha añadido el archivo calendario.html.

Desde Dreamweaver también es posible importar un archivo de Microsoft Word


Propiedades de la página

• Definición de las propiedades de la página

A la hora de diseñar una página web, en nuestro caso el programa de un curso, es fundamental tratar las propiedades de la misma, ya que van a decidir la apariencia que ésta va a tener cuando la vea el usuario. Podremos configurar aspectos tales como el color del cuerpo de texto, el fondo de la página o la alineación de los márgenes de la misma.

Para acceder a esta ventana haremos clic derecho en cualquier área vacía del documento y seleccionaremos Propiedades de la página .

También puede acceder desde el cuadro de diálogo Propiedades de la página (Modificar > Propiedades de la página). El cuadro de diálogo Propiedades de la página permite especificar la familia y el tamaño de fuente predeterminada, el color de fondo, los márgenes, los estilos de los vínculos y otros muchos aspectos relacionados con el diseño de páginas. Puede asignar nuevas propiedades de página a cada página que cree, así como modificar las propiedades de las páginas existentes. Los cambios que realicen en el cuadro de diálogo Propiedades de la página afectarán a toda la página.


Renombrar archivos del sitio

• Debemos tener en cuenta que al cambiar el nombre a los archivos tendremos que escribir también la extensión del mismo, por lo que al final del nombre vamos a marcar .html, por ejemplo: programa.html sería el nombre completo del archivo.

Habrá ocasiones en las que tengamos que cambiar el nombre a algunos archivos que hayamos editado con Dreamweaver.


http://helpx.adobe.com/es/dreamweaver/using/set-page-properties.html


Para cambiar el nombre de un archivo vamos a dirigirnos a la ventana Archivos, en la pestaña Sitio:

• Seleccionaremos el archivo o carpeta cuyo nombre deseamos cambiar desde la ventana archivo.

• Pulsamos botón derecho del ratón Edición / Cambiar nombre.

• Seguidamente veremos cómo el archivo aparece sombreado y podremos escribir el nombre nuevo que queramos darle. A continuación, pulsamos Enter en el teclado.

• Una vez que lo hemos hecho, el programa nos avisa para que demos nuestra aprobación al cambio.

• Cuando aceptemos, vamos a ver una ventana que nos muestra el progreso de la actualización de vínculos y archivos en todo el sitio.


Cortar, copiar y pegar archivos

• Debemos tener precaución a la hora de cortar y pegar archivos ya que si nos equivocamos podemos alterar notablemente la estructura y navegación del sitio.

Conforme estamos trabajando con los archivos de nuestro sitio, habrá ocasiones en las que tengamos que cambiar algún archivo de lugar y moverlo a otra carpeta.

Le indicamos unos pasos a seguir para copiar un archivo:

• Nos situamos en la ventana Archivos, una vez allí dentro

localizamos y seleccionamos el archivo que vamos a copiar.

• Seguidamente hacemos clic derecho sobre el nombre del archivo y pulsamos Edición/ Copiar.


• Una vez copiado, seleccionamos la carpeta en la que queremos pegarlo, hacemos clic derecho sobre ella y pulsamos Pegar.

De esta forma tendremos el mismo archivo repetido en dos carpetas diferentes. Si lo que queremos es quitar el archivo de una ubicación y trasladarlo a otra, tendremos que hacer el mismo proceso que copiando, sólo que esta vez seleccionaremos cortar en vez de copiar. Así moveremos el archivo de una carpeta a otra. Dreamweaver también nos permite duplicar los archivos que deseemos. Para ello haremos clic derecho en el nombre del archivo que queramos/ Editar/ y seleccionaremos Edición/Duplicar.


El texto

• Una hoja de estilo CSS es una hoja de estilo prediseñada que se puede vincular a los documentos para modificar aspectos de forma y diseño de los mismos.

El texto es una de las partes más importantes de una página web. Aprender a situar el texto de manera correcta en una página web es importante para el resultado global de la página. De igual modo, los espacios y la facilidad para leerlo pueden ser primordiales para muchos usuarios.

Si ya ha utilizado otros programas de edición de textos como Microsoft Word no le será complicado aplicar el texto a una página web puesto que muchas de las herramientas de edición de textos que posee Dreamweaver guardan una gran similitud con programas de edición de textos.

Al abrir un archivo nuevo en Dreamweaver y hacer clic en cualquier zona del mismo podrá ver

cómo aparece un cursor parpadeante dispuesto para empezar a escribir.

En Dreamweaver disponemos de una amplia gama de opciones para dar formato al texto que introduzcamos en cada uno de los documentos que editemos del sitio ya que en cada momento podemos necesitar formatos diferentes en función de nuestras necesidades.

El programa nos va a permitir dos modos diferentes a la hora de aplicar formato al texto que editemos, ya que podemos hacerlo:

• a partir de los atributos de texto que encontramos en el inspector de propiedades, o bien

• editando una hoja de estilo CSS.




Atributos de texto

• Por defecto, el estilo de cualquier texto HTML con el formato Encabezado 1 es genérico: el color es negro y la familia de fuente Times New Roman.

Abra el inspector de propiedades (Ventana > Propiedades) si es que no está ya abierto y haga clic en el botónHTML.

• Seleccione el texto al que desea dar formato.

Configure las opciones que desea aplicar al texto seleccionado.


Añadir texto a un documento

• Para seleccionar todo el contenido de la página puede pulsar la etiqueta body o ejecutar el comando Seleccionar todo, cuyo método abreviado es Ctrl+A.

• Para seleccionar un fragmento de un párrafo pulse ante la primera letra y arrastra hasta situar el puntero sobre la última. Y para seleccionar un párrafo completo, pulse en la etiqueta del selector de etiquetas.

La copia y pegado de texto, resulta una alternativa a su introducción directa con el teclado. Entre los tipos de documentos que los profesionales reciben con contenido de texto para incorporarlos en las páginas web, se incluyen los archivos de texto para incorporarlos en las páginas Web, se incluyen los archivos de texto ASCII, los archivos en formato de texto enriquecido y los documentos Office.

Comenzaremos seleccionando el siguiente fragmento de texto.

• Haga clic con el botón derecho sobre el texto seleccionado y pulse la opción Copiar.

• De nuevo en Dreamweaver, abriremos un nuevo documento y guardamos la página con el nombretexto.html.

• Y desde el menú Edición, seleccionamos el comando Pegar.

• A continuación, en el primer punto y seguido del fragmento de texto que hemos pegado, pulse la tecla Intro.


• Seleccione el término don Quijote, y cópielo

• Sitúe el cursor del ratón en un espacio en blanco del documento y Pégalo. Haga clic en la teclaIntro para que la nueva palabra constituya un párrafo independiente.

• Para finalizar este ejercicio, guarde los cambios pulsando sobre el comando Guardar.

En ocasiones, tendremos que deshacer o rehacer los contenidos que introducimos en un documento. Para ello, Dreamweaver nos ofrece una herramienta que nos facilitará la tarea de eliminar las acciones realizadas en el documento desde la última vez que guardamos los cambios. Esta herramienta se llama Deshacer y Rehacer, la encontramos en el menú Edición en la barra de menús del programa. Su modo de empleo es bastante sencillo. Cada vez que lo necesitemos haremos un clic en en Deshacer o pulsamos la combinación de teclas Ctrl+Z, veremos cómo las últimas acciones que realizamos en el documento han sido borradas por el programa.


Añadir fuentes Adobe Edge a la lista de fuentes

• No puede obtener una vista previa de fuentes Edge y Web en la vista Diseño. Cambie a la Vista en vivo u obtenga una vista previa de la página en un navegador para obtener una vista previa de estas.

Puede agregar tanto fuentes Adobe Edge como fuentes Web a la lista de fuentes de Dreamweaver. En la lista Fuentes, las pilas de fuentes que admite Dreamweaver se enumeran en primer lugar, por delante de las fuentes Web y fuentes Edge.

• Seleccione Modificar > Administrar fuentes.

• La ficha Fuentes Adobe Edge muestra todas las fuentes Adobe Edge que se pueden añadir a la lista Fuentes.

Para buscar y añadir fuentes de esta lista a la lista Fuentes, haga lo siguiente:

o Haga clic en la fuente que desea añadir a la lista Fuentes.

o Para anular la selección de una fuente, haga clic en la fuente nuevamente.

o Utilice filtros para limitar la lista de manera que solo incluya las fuentes preferidas. Por ejemplo, para limitar la lista a las de tipo Serif, haga clic en .

o Puede utilizar varios filtros. Por ejemplo, para mostrar solo los filtros de tipo Serif que pueden utilizarse para párrafos, haga clic en y .


o Para buscar una fuente por su nombre, escriba su nombre en el cuadro de búsqueda.

• Haga clic en para filtrar las fuentes que ha seleccionado.

• Haga clic en Listo.

• Abra la lista de fuentes desde cualquier ubicación. Por ejemplo, puede utilizar la lista Fuentes de la sección CSS del panel Propiedades.

En la lista Fuentes, las pilas de fuentes de Dreamweaver se muestran delante de las fuentes Web. Desplace hacia abajo la lista para localizar las fuentes seleccionadas.


Crear listas y cambiar estilo de fuentes

Creación de una lista usando texto existente

• Seleccione una serie de párrafos para convertirlos en una lista.

• En el inspector de propiedades de HTML, haga clic en el botón Lista con números y Lista con viñetas, o bien seleccione Formato > Lista y seleccione el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista de definición.

En ocasiones vamos a necesitar enumerar determinados apartados a la hora de redactar un contenido concreto o tenemos que elaborar una lista de viñetas.

Dreamweaver nos permite trabajar con:

• Listas numeradas . Usaremos las listas numeradas para crear una organización de apartados dentro de un mismo documento, en el que deseemos mantener un orden secuenciado de los elementos.

• Viñetas . Las emplearemos cada vez que creemos una lista ordenada de elementos dentro de un documento, a la que no le daremos ordenación numérica.

Para hacerlo vamos a marcar con un clic izquierdo la zona del documento en la que queremos que aparezca la lista. Seguidamente pulsamos en el botón de lista numerada o de viñetas que encontramos en el inspector de propiedades. Vemos que por defecto el programa inserta las viñetas como círculos negros y la lista numerada en forma de números.

http://educa.us.es/bbcswebdav/pid-6106-dt-content-rid-93422_1/courses/master_2/dwcc/webfont.html%23subir

Verá que Dreamweaver introduce un estilo predeterminado de viñeta o lista numerada que nos permite modificar con cierta facilidad pulsando sobre el botón Elemento de la lista en el inspector de propiedades.

Desde la ventana Propiedades de la lista vamos a cambiar el tipo de lista que hemos introducido en el documento. En el campo Tipo de lista podemos pasar de

una lista de viñetas a una lista numerada. Será en el campo Estilo donde podremos cambiar tanto la forma de los números como la apariencia de las viñetas de nuestra lista. En el caso de crear una lista numerada, en el campo Iniciar recuento, podremos indicar al programa que inicie la numeración desde un número determinado. Aceptamos para que los cambios tengan efecto.

Cuando trabajamos con las listas podremos crear esquemas de contenido donde organizamos la información de manera jerárquica, por ejemplo, de un punto principal del esquema podemos generar puntos secundarios.

Podemos hacer que estos puntos secundarios se desplacen hacia el interior de la lista, creando así una estructura en

jerarquía. Para ello, haremos clic en el inicio de la línea con la tecla tabulador en el teclado. Mire en la imagen cómo lo hacemos.


Imágenes y tipos de Formatos

• Recuerde que los cambios de tamaño de una imagen pueden provocar una pérdida de su calidad, sobre todo en archivos JPG o GIF confeccionados por píxeles.

Dreamweaver dispone de una barra de propiedades con un elevado número de herramientas gracias a las cuales podrá manipular algunos de los aspectos más importantes de los archivos gráficos.

Seguro que ha visto muchas páginas web y casi todas tienen imágenes, pero pocas veces nos hemos parado a analizar qué tipo de imágenes emplean y en qué formato están creadas.

Cuando nos disponemos a realizar una web, podemos emplear imágenes en el documento para complementar la información que presentamos, así como para hacer más atractiva la página.

Podemos utilizar imágenes que editemos nosotros mismos o con fotografías que realicemos, escaneemos o descarguemos de Internet. En cada caso, tendremos que ver las propiedades de cada imagen y la función que tendrá en el documento. Fundamentalmente, vamos a emplear imágenes en formato GIF y JPG.

Tipos de Formatos




Obtener imagen

• Al seleccionar una imagen a insertar, vamos a hacerlo Relativo a Documento. Al verlo en el navegador, el archivo buscará la imagen dentro de la carpeta local en la que lo estamos diseñando.

Podemos encontrar imágenes de calidad y adaptadas a nuestras necesidades prácticamente en cualquier lugar de Internet. En otro momento explicamos los aspectos relacionados con derechos de autoría y de licencias de uso de las imágenes que podemos insertar en nuestros contenidos. De todos modos, existen diversas formas de encontrar imágenes de calidad y utilidad.

• Descargando imágenes de páginas web. Podemos visitar muchas páginas en Internet en las que encontraremos imágenes que pueden sernos de utilidad. Guardaremos en nuestro ordenador la imagen que deseemos haciendo clic derecho sobre ella y seleccionando "Guardar imagen como". La guardaremos en el formato de origen en que se introdujo en la página.

• Utilizando buscadores de imágenes. Google es hoy por hoy uno de los buscadores más populares y fuertes para localizar imágenes a través de Internet. Solamente tendremos que introducir un descriptor para que la aplicación nos busque todas las imágenes que encuentre en función de nuestro criterio de búsqueda.

• Utilizando bancos de imágenes on-line. Desde estos lugares podremos descargar imágenes que localizaremos organizadas por categorías. Muchas veces serán gratuitos, mientras que otras tendremos que pagar por ellas. La forma de guardarlas es la misma en cada uno de los casos. Quizás uno

de los bancos de imágenes más famoso sea Flickr. En Flickr podemos encontrar miles de imágenes, muchas de ellas con opción de compartir y utilizar siempre que reconozcamos la autoría.


Insertar Imágenes


http://www.flickr.com/creativecommons/

• En ocasiones nos pasa que al navegar por Internet encontramos páginas en las que no se muestran las imágenes correspondientes, sino que en su lugar vemos un cuadro blanco con una Xroja. Esto indica que la imagen está rota.

Además del contenido que introducimos en un documento html podemos introducir imágenes que complementen al texto.

Debemos tener en cuenta que a la hora de introducirlas en el documento, éstas tienen que estar guardadas dentro de la carpeta del sitio en el que venimos trabajando, más concretamente, en la carpeta destinada a las imágenes. Esto dependerá si la imagen está en la carpeta general de imágenes (image) o en el directorio principal del sitio.

Para ello vamos a seguir unos sencillos pasos en Dreamweaver:

• Seleccionamos el lugar del documento en el que queremos que aparezca la imagen.

• Pulsamos en el menú Insertar/Imagen.

• Buscamos la imagen en la carpeta correspondiente a las imágenes en nuestro sitio, la seleccionamos y hacemos clic en Aceptar.

No olvide que las imágenes deben seguir las mismas normas para ser nombradas que los archivos html, es decir, en minúsculas, sin espacios en blanco, sin ñ ni caracteres especiales.

Cuando realicemos estos pasos podremos ver cómo la imagen queda ajustada en el lugar del documento que hemos seleccionado.

Cada vez que introducimos una imagen en un documento, tenemos la posibilidad de introducir un texto alternativo que la describa. Para hacerlo, seleccionamos la imagen y nos dirigiremos al inspector de propiedades, donde en el campo ALT escribiremos esta breve descripción. Este texto aparecerá cada vez que el usuario se posicione con el ratón sobre la imagen. Esta opción la veremos si visualizamos la página desde el navegador, tanto en la vista previa como en Internet.

El hecho de que una imagen esté rota significa que la página no puede mostrarla por alguna razón, como pueden ser:


Tamaño de la imagen

• Al modificar el tamaño de una imagen corremos el riesgo de distorsionarla y hacer que no se vea como esperábamos a la hora de diseñarla. Es conveniente editarla en los tamaños que vamos a emplear para la web, usaremos para ello algún editor de imágenes.


Generalmente todas las imágenes que introduzcamos en nuestro documento html van a tener un tamaño que hemos establecido con anterioridad. En aquellos casos en los que tengamos imágenes con unas dimensiones que no sean acordes con el diseño que esperamos darle a la página podemos cambiarla desde las propiedades de la misma.

Para hacerlo vemos cómo en el inspector de propiedades encontramos los campos An y Al, a partir de los cuales vamos a configurar el alto y ancho de la imagen en pixeles. Introduciremos los valores numéricos en las casillas correspondientes para ajustar el tamaño.

También tenemos la opción de cambiar el tamaño de la imagen seleccionándola y haciendo clic sobre uno de los cuadros negros que la contornean, manteniendo el botón del ratón pulsado, agrandaremos la imagen hasta conseguir el tamaño deseado. Aunque hay que tener mucho cuidado al utilizar esta opción dado que podemos distorsionar la imagen haciendo que esta pierda nitidez.

Cuando introducimos imágenes en un documento, debemos tener la precaución de que no sean muy grandes en cuanto a dimensiones y que no ocupen demasiado espacio en disco, ya que esto hará que la página no se vea correctamente en Internet y ocasione problemas.

También podemos utilizar la herramienta Recorte que se encuentra alojada en la barra de propiedades de la imagen cuando está resaltada


Crear una imagen de sustitución

• El campo texto alternativo del cuadro de diálogo Atributos de Accesibilidad de la etiqueta de imagen se corresponde con el atributo Alt de una etiqueta <img>. Es recomendable incluir una descripción de la imagen ya que proporciona información sobre la imagen insertada a los visitantes con deficiencia visuales que utilicen lectores de pantalla.

Otra forma de insertar imágenes en Dreamweaver son las imágenes de sustitución. Esta opción nos va a permitir introducir en un mismo espacio del documento dos imágenes, una encima de otra, que podemos intercambiar pasando el ratón por encima de la imagen. Visualizaremos este efecto de intercambio de imágenes desde el navegador (tanto en la vista previa, como en Internet).


Ejemplo de imagen de sustitución. Posiciona el puntero del ratón sobre la imagen para ver el efecto.

Es una utilidad que nos puede ayudar mucho a la hora de presentar contrastes o evoluciones

en imágenes aportándole dinamismo y efectos a la página.

Al cargar la página en el navegador, siempre se verá una imagen que será la principal, cuando pasemos el ratón por encima de la misma aparecerá la secundaria.

Para insertar una imagen de sustitución debemos tener previamente el documento guardado en nuestro sitio.

Le presentamos los pasos a seguir para hacerlo:

• Seleccionamos el lugar en el que queremos que aparezca la imagen.

• Pulsamos en el menú Insertar/Objeto de Imagen/Imagen de sustitución.

• Seleccionamos la imagen principal y la secundaria que formarán la imagen de sustitución.

• En el campo Texto alternativo, vamos a introducir un texto que describirá brevemente a la imagen cuando nos posicionemos sobre ella.

• Por último, en el campo URL, marcaremos el documento de nuestro sitio o la página de Internet a la que accederemos al hacer clic sobre la imagen.

• Aceptamos para insertar la imagen en el documento.

Podremos comprobar cómo se produce el efecto de la imagen de sustitución, pulsando sobre el botón En vivo


Creación de hipervínculos

• El hipertexto es la organización de una determinada información en diferentes modos, conectados entre sí a través de los enlaces o hipervínculos.


http://elearning.us.es/

El hipertexto es la organización de una determinada información en diferentes modos, conectados entre sí a través de los enlaces o hipervínculos.

Un hipervínculo es un enlace, normalmente entre dos páginas de un mismo sitio, pero un enlace también puede dirigirnos a una página de otro sitio web en Internet, a un fichero, a una imagen o a una dirección de correo electrónico. Para acceder al destino al que apunta el enlace (también lo llamaremos hiperenlace o link), hemos de hacer

clic sobre él.

El usuario ante una página web, realiza un barrido visual de ésta, ojeando "a saltos" la pantalla, anulando automáticamente la información que no le interesa y centrando su atención en la que sí. Un buen diseño de la información, y desde el punto de vista organizativo y de su usabilidad, será aquel que ayude al usuario a encontrar la información que busca de la forma más fácil, rápida y cómoda posible.

Por esta razón, vamos a emplear los hipervínculos con el fin de dotar a nuestro sitio web de una navegación sencilla, ágil y cómoda, permitiendo al usuario acceder de una forma eficiente, a la información que busca.

Tipos de hipervínculos


Con otros documentos o archivos

• A partir de este tipo de vínculos podrá establecer la navegación de todos los archivos del sitio y crear accesos a las páginas que lo componen vinculándolas entre sí.

Cuando estamos construyendo nuestro sitio web vamos a establecer una navegación entre los archivos que lo componen. Lo haremos creando vínculos con otros documentos o archivos del sitio. De esta forma, el visitante podrá acceder a las diferentes áreas del mismo,


pulsando en los enlaces que marcamos en el contenido de las páginas.

Le indicamos unos pasos a seguir para establecer un vínculo a un documento:

• Seleccionamos la zona de texto o imagen que va a llevar el vínculo.

• Nos dirigimos al inspector de propiedades y pulsamos en la carpeta del apartado vínculo.

• Localizaremos el archivo que vamos a vincular en nuestro sitio, seleccionamos Relativo a Documento y pulsamos Aceptar.

Cuando veamos la página en el navegador comprobaremos cómo hemos establecido el vínculo entre los documentos del sitio ya que podremos visitarlos con hacer un solo clic en el enlace.


Rutas y punto de fijación con nombre

• Estableciendo este tipo de rutas podremos cambiar el nombre de la carpeta en la que se encuentran los documentos, ya que la actualizará al momento.

• A la hora de nombrar los puntos de fijación es importante que sean muy cortos y sin espacios en blanco para poder recordarlos y escribirlos con facilidad, por ejemplo con números. Además, los usaremos sólo en páginas de contenido lo suficientemente largas como para que puedan verse con efectividad.

Rutas relativas a la raíz del documento

Rutas relativas a la raíz del sitio


Vínculo de punto de fijación con nombre.


De documento a punto de fijación

• Al dar nuestros primeros pasos con el programa es conveniente visualizar esta indicación en la vista de diseño.

Una vez que hemos creado un documento con puntos de fijación con nombre, podremos establecer vínculos desde otras páginas del sitio a cualquiera de estos puntos concretos del documento. le lo explicamos brevemente:

• El primer paso que daremos será establecer un vínculo, desde el inspector de propiedades, al archivo que contiene los puntos de fijación.

• Una vez que hemos establecido el enlace al documento, nos desplazaremos de nuevo al inspector de propiedades.

• En el campo Vínculo veremos el nombre del archivo que hemos vinculado (por ejemplo, pagina02.htm). Seguidamente, estableceremos el punto de fijación (pagina02.htm#3) escribiéndolo tras el nombre del archivo.

De esta forma, podemos acceder desde un enlace en un archivo, a un punto concreto de una página de nuestro sitio.

Cuando hemos introducido los puntos de fijación con nombre, por defecto, el programa nos ha presentado unos indicadores amarillos que nos señalan que en esa zona hemos marcado un punto de fijación. Cuando veamos la página en Internet comprobaremos cómo estos indicadores no se muestran.

Si queremos que no aparezcan mientras trabajamos, podemos configurarlos desde el menú Edición / Propiedades en la barra de menús de Dreamweaver.

En el apartado Elementos invisibles podemos cambiar el ajuste que el programa establece por defecto y marcar si queremos ver o no ese indicador la próxima vez que introduzcamos un punto de fijación con nombre. Para ello vamos a marcar en la casilla de verificación correspondiente a Puntos de fijación con nombre. Pulsamos en Aceptar para aprobar el cambio.

Los cambios que realicemos tendrán vigencia en todos los archivos con los que trabajemos en el programa a partir de ese momento.



A una dirección URL

• Ahora puede practicar introduciendo un vínculo en el documento a una dirección de Internet, pruebe a abrirlo en una ventana nueva y en la misma.

Otro de los vínculos más comunes que encontramos en cualquier página web es el que introducimos para hacer referencia o redireccionar al usuario a otra dirección de Internet. La forma de introducirlo es bastante sencilla, solamente tendremos que seleccionar el texto o la imagen que queremos vincular, dirigirnos al inspector de propiedades y escribir en el campo Vínculo la dirección completa de la página a la que queremos dirigir a los visitantes de nuestra página.

Dreamweaver nos da la posibilidad de ordenar al navegador del usuario que abra estas páginas en la misma ventana en la que se encuentre el visitante o en una ventana nueva del navegador. Para ello vamos a dirigirnos al campo Dest (destino) cuando estemos creando el

vínculo y seleccionamos _blank para que se abra en una ventana nueva, minimizando la página principal desde la que hemos accedido a ella. También podemos dejar

el destino en blanco para que se abra en la misma ventana en la que estamos visualizando la página.

Además de estos, en el inspector de propiedades encontramos otros tipos de destinos que no veremos en el desarrollo de este curso, ya que su verdadera utilidad reside en el trabajo con marcos:

• _self. Abrirá el archivo en la misma ventana donde se encuentra el enlace.

• _parent. Abre el vínculo en todo el conjunto de marcos "padre" de la ventana en la que nos encontramos.

• _top. Abre en toda la ventana del navegador. Si el enlace se encontraba en una página con marcos, la nueva página los removerá para acomodarse.


Vínculo a correo electrónico

• Si queremos establecer un vínculo a correo en una imagen vamos a seleccionarla primero. Una vez hecho, en el campo Vínculo del inspector de propiedades escribiremos mailto: y seguidamente la dirección de correo, por ejemplo mailto:[email protected]



Al diseñar una página web, hay un elemento fundamental que podemos insertar, y es el vínculo a correo electrónico. Su función consiste en hacer que los visitantes de nuestro sitio puedan ponerse en contacto con nosotros, bien para informarnos sobre errores de la página, o para hacernos llegar sus impresiones sobre el contenido que les presentamos.

Este tipo de vínculos va a abrir el gestor de correo electrónico que el usuario tenga configurado como predeterminado (por ejemplo Outlook Express) y lo prepara para enviar un mensaje nuevo a la dirección de correo que hemos insertado en la página.

Dreamweaver nos facilita mucho la forma de introducir un vínculo a correo electrónico, le indicamos los pasos a seguir para hacerlo:

• Seleccionamos la zona de texto que queremos vincular.

• Pulsamos en el menú Insertar/Vínculo de correo electrónico.

• En la zona Correo electrónico vamos a escribir la dirección de correo en la que queremos recibir los mensajes y aceptamos.

Al establecer un vínculo de correo electrónico veremos cómo en el inspector de propiedades, al señalar la zona vinculada, en el campo Vínculo aparece mailto:[email protected]


Creación de mapas sensibles

• Si una imagen que hemos insertado es demasiado pequeña ¿podemos hacerla más grande aumentando su tamaño en el inspector de propiedades?. Sí, es posible aumentar el tamaño de visualización de una imagen, sin embargo, hacerlo reduce la calidad de la imagen.


Generalmente todos los hipervínculos que establezcamos en un documento estarán insertados en el texto o en una imagen. Dreamweaver nos permite dar un paso más en los hipervínculos y nos ayuda a establecerlos mediante zonas dentro de una imagen. A esta forma de establecer vínculos le llamamos mapas sensibles.

Resulta un recurso muy útil cuando trabajamos en un sitio con mapas de imágenes ya que podremos establecer vínculos desde las zonas de la imagen que deseemos. Para establecer este

tipo de mapas vamos a emplear el inspector de propiedades, donde al seleccionar la imagen vemos cómo cambia de forma y nos presenta las opciones para vincular zonas.

Cuando insertamos una imagen en un documento, desde la que vamos a establecer más de un enlace, crearemos en ella zonas interactivas. Las zonas interactivas son áreas que desde Dreamweaver dibujamos dentro de una imagen y que van a estar vinculadas a otro documento del sitio, dirección de Internet o correo electrónico.

Le indicamos los pasos a seguir para introducir y configurar las zonas interactivas en la imagen. .

Podemos dar varias formas al área interactiva, donde el programa nos ofrece:

• Círculo. Seleccionamos con el botón izquierdo del ratón el lugar donde queremos que comience, y manteniéndolo pulsado, arrastraremos hasta abarcar la zona deseada. Con esta herramienta solamente podemos crear zonas circulares.

• Rectángulo. Vamos a hacer áreas interactivas rectangulares o cuadradas. Para ello, haremos un clic con el botón izquierdo del ratón en el punto donde queremos que comience la zona, manteniéndolo pulsado, arrastraremos desplazándonos hasta el punto donde queremos que se extienda.

• Polígono. Haciendo un clic en cada ángulo que queramos que abarque el área hasta cerrarla, estableceremos un polígono regular o irregular para poder marcar zonas que no sean circulares o rectangulares. Mire el ejemplo de la imagen.


Introducción a tablas

• Podemos configurar el ancho de la tabla a un porcentaje de la ventana del navegador utilizando el inspector de propiedades.


En este apartado veremos cómo las tablas son un instrumento esencial en el diseño de una página web que se utiliza para presentar datos tabulares, diseñar columnas en una página o disponer texto o gráficos en los documentos.

Las celdas de la tablas (los cuadros que se crean en la intersección de cada columna o fila de una tabla) permiten controlar la colocación de texto e imágenes en una página web, puesto que se puede hacer que los bordes de las tablas no sean visibles, por tanto, los visitantes del sitio no verán la estructura del diseño cuando visualicen la página en un navegador.

Las tablas se utilizan como herramienta para presentar datos e imágenes en páginas HTML que proporciona a los diseñadores web formas de añadir estructura vertical y horizontal a una página.

Las tablas constan de tres componentes básicos:

• Filas. Son los espacios horizontales que forman las celdas.

• Columnas. Espacios verticales compuestos por celdas.

• Celdas. Son los contenedores que se originan en las intersecciones de las filas y las columnas.

Una vez creada la tabla, es posible modificar fácilmente tanto su apariencia como su estructura. También es posible añadir contenidos, añadir, eliminar,

dividir y combinar filas y columnas, modificar las propiedades de la tabla, de filas o de celdas para añadir color y alineaciones, así como copiar y pegar celdas.

¿Cómo se inserta una tabla?


Agregar contenidos a tabla


• Para cambiar el tamaño de una tabla vamos a seleccionarla primero en el documento y seguidamente introduciremos el tamaño en valores numéricos en los campos Al y An del inspector de propiedades. Podrá ver que nos permite cambiar el sistema de medidas y seleccionar píxeles o%. Si trabajamos con %, la tabla se ajustará al tamaño del documento, por lo que es posible que en ocasiones se desajuste el diseño que hemos hecho en la misma.

Trabajando con tablas, podemos introducir en las celdas el contenido que deseemos.

Le indicamos los pasos a seguir para hacerlo:

• Hacemos clic dentro de la celda en la que vamos a introducir el contenido.

• Lo siguiente será introducir el contenido que va a llevar la celda. Por ejemplo, podemos comenzar a escribir el texto.

Además, Dreamweaver nos va a permitir modificar la tabla en función de nuestras necesidades de manera que podemos cambiar el número y la disposición de las celdas en cualquier momento, así como modificar el tamaño y apariencia de toda la tabla.

Cada vez que vayamos a hacer un cambio en la tabla, tendremos que seleccionarla primero, lo haremos haciendo un sólo clic en el borde exterior de la tabla. Veremos cómo la tabla seleccionada muestra un contorno negro con cuadrados pequeños que nos van a servir para cambiar el tamaño de la misma.

También nos da la opción de insertar tablas dentro de cada celda en el caso que deseemos realizar una organización más minuciosa o crear filas que contenga cada una un número diferente de celdas.

Organizar el contenido en la celda

Dividir y combinar celdas

Color de fondo/imagen de fondo

Bordes

Para introducir una fila o una columna nueva vamos a hacer clic derecho en cualquier zona de la tabla. En el menú emergente seleccionaremos Tabla/Insertar filas o columnas, en la ventana de diálogo que aparece seleccionaremos el número de filas o columnas que vamos a introducir.

En el caso de eliminar filas o columnas tendremos que seleccionar todas las celdas que la componen y seguidamente hacer clic derecho sobre la selección y escoger Tabla/Eliminar fila o Eliminar columna. También podemos introducir una fila nueva si nos situamos en la última fila de la última columna y pulsamos la tecla Tab, veremos cómo aparece una fila nueva debajo de la que nos encontramos.


Insertar Vídeo html5

• Para añadir vídeos rápidamente a los tres campos, utilice selección múltiple. Al elegir tres formatos de vídeo para el mismo vídeo de una carpeta, se usa como Origen el primer formato de la lista. Los siguientes formatos de la lista se usan para rellenar automáticamente Origen alt. 1 y Origen alt. 2.

Asegúrese de que el cursor se encuentra en la ubicación en la que desea insertar el vídeo.

• Seleccione Insertar > Medios > Vídeo HTML5. El elemento de vídeo HTML5 se inserta en la ubicación especificada.

• En el panel Propiedades, especifique los valores para las diversas opciones.

En Origen, introduzca la ubicación del archivo de vídeo. Como alternativa, haga clic en el icono de carpeta para seleccionar un archivo de vídeo del sistema de archivos local. La compatibilidad con formatos de vídeo varía en función del navegador. Si el formato de vídeo de Origen no es compatible con un navegador, se utiliza el formato de vídeo especificado en Origen alt. 1 u Origen alt. 2. El navegador selecciona el primer formato reconocido para mostrar el vídeo.

• (Título): Especifique un título para el vídeo.

• Anchura (W): Introduzca la anchura del vídeo en píxeles.

• Altura (H): Introduzca la altura del vídeo en píxeles.

• Controles: Seleccione esta opción si desea mostrar en la página HTML controles de vídeo como Reproducir, Pausa y Silencio.

• Autoplay (Reproducción automática): Seleccione esta opción si desea que el vídeo empiece a reproducirse en cuanto se cargue en la página Web.

• Poster (Póster): Introduzca la ubicación de la imagen que desea que se muestre hasta que el vídeo termine de descargarse o hasta que el usuario haga clic en Reproducir. Los valores de Anchura y Altura (W y H) se rellenan automáticamente al insertar la imagen.


• Loop (Bucle): Seleccione esta opción si desea que el vídeo se reproduzca continuamente hasta que el usuario deje de reproducir la película.

• Muted (Silenciado): Seleccione esta opción si desea silenciar la parte de audio del vídeo.

• Flash Video: Seleccione un archivo SWF para los navegadores no compatibles con vídeo HTML5.

• Texto adicional: Proporcione el texto que se mostrará si el navegador no es compatible con HTML5.

• Preload (Precargar): Especifica las preferencias del autor acerca de cómo debe cargarse el vídeo cuando se cargue la página. La selección de Auto carga el vídeo completo al descargarse la página. La selección de Metadata (Metadatos) solo descarga los metadatos después de que haya terminado la descarga de la página.

Previsualizar el vídeo en el navegador

• Guarde la página Web.

• Seleccione Archivo > Vista previa en el navegador. Seleccione el navegador en el que desea obtener una vista previa del vídeo.


Crear una plantilla

• ¿No puede ver la nueva plantilla que acaba de añadir?. Algunas veces, el panel Activos necesita un poco de ayuda. Haga clic en el botón de Actualizar que se muestra en la parte inferior de la derecha del panel para actualizar la lista.


Si nuestro proyecto va a contener varias páginas que van a compartir la misma apariencia y diseño, las plantillas de Dreamweaver se convierten en la solución perfecta. Una plantilla de Dreamweaver es un documento a partir del cual se pueden crear otras páginas. Estas páginas heredan todos los elementos de la plantilla original, pero podemos modificar cada página para incluir contenido y elementos.

Cuando cambiemos algún elemento de esa plantilla, este elemento se cambiará automáticamente en todas las páginas que tengan ese elemento.

Podemos configurar secciones de una página como editables para que podemos añadir o modificar contenido sin alterar de forma accidental o intencionada el diseño original.

Las plantillas son específicas del sitio y se almacenan en la carpeta Templetes dentro de la carpeta raíz del sitio. Podemos abrir, editar o crear plantillas a partir de la lista Plantillas. Podemos abrir, editar o crear plantillas a partir de la lista Plantillas del panel Activos.

Podemos crear una plantilla desde:

Nuevo documento Tipo de página: Plantilla HTML Diseño: 2 columnas fijas, barra lateral derecho, encabezado y pie 3 columnas fijas, encabezado y pie Tipo de documento. HTML5 Diseño CSS en: Crear nuevo archivo

Crear


Crear regiones editables

• Las plantillas no pueden incluir nombres de regiones duplicados. Si intenta configurar dos regiones editables con el mismo nombre, se desplegará un mensaje de error.

A continuación, debemos definir regiones editables que podemos modificar en cualquier página creada a partir de esta plantilla.

Cuando se generan nuevas páginas HTML a partir de plantillas, pueden existir determinadas secciones que queremos que sean editables y otras zonas que tengan que permanecer sin cambios.

Pulsamos en la zona que queremos hacer editable y escoge, Insertar/Plantilla/Región Editable.


Aparecerá el cuadro de diálogo Nueva región editable.

Llamaremos a la región editable "Contenidos" y haremos clic en Aceptar.

Observamos como el cursor se ha incluido ahora dentro de un cuadro azul con una ficha en la parte superior. Esta parte de la página y el contenido que hay dentro será editables en cualquier página elaborada a partir de esta plantilla.

Por último, seleccione Archivo/Guardar como plantilla, para guardar los cambios.

Documents

Contenidos modulo 5 dream weaver