ADOBE DREAM WEAVER

TUTORIAL

Qué es Dreamweaver CS3

O Es un software fácil de usar que permite crear páginas web profesionales, las

funciones de edición visual de Dreamweaver CS3 permiten agregar

rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar

manualmente el código HTML.

Que es lo que se puede hacer:

O Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual.

O Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa.

Arrancar y cerrar Dreamweaver CS3

O Veamos las dos formas básicas de arrancar Dreamweaver :

O Desde el botón Inicio  situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botón Inicio,

se despliega un menú; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador,

buscar Adobe, seguidamente Dreamweaver CS3, hacer clic sobre él, y se arrancará el programa. 

O Desde el icono de Dreamweaver CS3 del escritorio:

Asi sera si tu icono esta en el escritorio, sera mas facil de encontrar:

Mi primera paginaO Si es tu primera pagina ten en cuenta lo

siguiente:  Debes hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página.

O Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que

tiene el siguiente aspecto:

Una vez hayas centrado la imagen y las otras dos líneas siguientes, selecciona la segunda línea de texto, que aún no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botón  y pulsa tres veces sobre el botón .

O Al arrancar Dreamweaver aparece una pantalla inicial como ésta:

El entorno de trabajoO Las barras

La barra de título contiene el nombre del programa (Marcromedia Dreamweaver CS3) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.

La barra de título

 La barra de herramientas estándar

La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir  , Guardar , etc.

La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.

LA BARRA DE HERRAMIENTAS INSERTAR O PANEL DE OBJETOS

La ayudaO A través del menú Ayuda puedes ir a varias

opciones, veamos algunas de ellas:O  Acceder al cuadro de diálogo de ayuda muy similar

al de Windows donde puedes buscar por temas, por índice o por contenido, si seleccionas la opción Ayuda de Dreamweaver o simplemente pulsando F1.

O  Acceder a tutoriales en internet (en la opción Recursos de ayusa en línea).

O  Abrir el panel Referencia en el que encontrarás la sintaxis y descripción de las etiquetas HTML.

O  Acceder al Centro de servicio técnico de Dreamweaver en la web.

O  Acceder al Foros en línea de Adobe.

LAS PROPIEDADES ESTÁN ORGANIZADAS

EN CATEGORÍAS.O  En la categoría Aspecto, como ves en la

imagen anterior, encontramos las propiedades:

O Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que según los colores de la imagen será necesario establecer unos u otros colores para el texto, así como que no es conveniente tener un gif animado como fondo. 

O Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrará en el caso de no haber establecido ninguna imagen de fondo.

O Tamaño: permite definir el tamaño de la letra.

O Color del texto: es el color de la fuente.O Márgenes: permiten establecer márgenes

en el documento. Los márgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de márgen solo funcionan para Netscape Navigator.

Los coloresO Para asignar colores es posible desplegar una

paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.

O Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran

O de la misma forma en O Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintos

Formato del enlace

En general, un texto que tiene asociado un vínculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a través de las propiedades de la página. Estos tres colores diferentes son los que se asignan como color de vínculo, de vínculo activo, y de vínculo visitado.Aqui tienes un vínculo de ejemplo:www.aulaclic.com 

O 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.

O Aqui tienes dos vínculos similares de ejemplo:

ejemplos