UTILIDADES DE ADOBE DREAMVEAVER CS3

MENÚ
A continuación se describirá los elementos más importantes del Menú de Adobe
Dreamweaver CS3:
El menú Archivo contiene los elementos de menú estándar como Nuevo, Abrir,
Guardar, Guardar como. También contiene otros comandos para la visualización o manipulación del documento actual, como Vista previa en el navegador e Imprimir código.
El menú Edición contiene los elementos de menú estándar como Cortar, Copiar y Pegar. También incluye comandos de selección y búsqueda, como Seleccionar
etiqueta padre, Buscar y reemplazar, y proporciona acceso al editor de Métodos
abreviados de teclado y al Editor de la biblioteca de etiquetas.
El menú Ver le permite obtener diversas vistas del documento (como la vista
Diseño y la vista Código) y mostrar y ocultar diversos tipos de elementos de página y herramientas de Dreamweaver CS3.
El menú Insertar ofrece una alternativa a la barra Insertar para la inserción de
objetos en el documento.
El menú Modificar le permite cambiar las propiedades del elemento de página
seleccionado. A través de este menú, puede editar los atributos de etiquetas,
cambiar las tablas y elementos de tablas y realizar diversas operaciones
relacionadas con elementos de biblioteca y plantillas.
El menú Texto le permite aplicar formato al texto fácilmente.
El menú Comandos proporciona acceso a diversos comandos, entre otros, uno
para aplicar formato al código en función de las preferencias de formato y otro
para crear un álbum de fotos.
El menú Sitio proporciona opciones de menú para crear, abrir y editar sitios, así como para administrar los archivos del sitio actual (en Macintosh).
El menú Ventana proporciona acceso a todos los paneles, inspectores y ventanas
de Dreamweaver CS3.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).

El menú Ayuda proporciona acceso a la documentación de Dreamweaver CS3,
incluidos los sistemas de ayuda para la utilización de Dreamweaver y la creación
de extensiones para Dreamweaver, además de información de referencia para
diversos lenguajes.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
COLOR
Se puede modificar el color de muchos objetos (texto, tablas, fondo de página,
entre otros).
Para la asignación del color se debe desplegar la paleta de colores, estos colores
se muestran de la misma forma tanto en Windows como en Linux.
Pulse sobre el recuadro gris que se encuentra en el Inspector de
Propiedades, de esta forma aparecerá la paleta de colores con un cursor en forma de gotero para seleccionar el color deseado, tanto de la paleta de colores o de cualquier otro color que señale con el cursor en la pantalla.
Los colores se expresan en forma de valores hexadecimales después del carácter
#, los dos primeros valores equivalen al rojo, los dos siguientes al verde y los 2
restantes al azul ( #FF0000).
En la parte superior de este recuadro muestra el valor hexadecimal del color.
Si conoce el valor hexadecimal del color debe introducirlo en el recuadro blanco:
Otro método para cambiar el color es ingresar en el recuadro blanco el nombre en inglés del color.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
TEXTO
El Texto es una de las utilidades más importantes que trae la herramienta de
diseño Dreamweaver, a continuación revisaremos sus principales opciones y
aplicaciones.
Formato
Permite establecer el estilo de párrafo para el texto seleccionado, puede ser
Párrafo, Encabezado y Predeterminado
Negrita y Cursiva Se aplican al texto seleccionado.
Fuente
Permite especificar el conjunto de fuentes que se emplean en Dreamweaver CS3.
Se encuentran fuentes, por la posibilidad que al establecer un tipo determinado de letra no la tenga instalada su computador.
Alineación
El texto puede ser alineado a la izquierda, centrado, derecha y justificado.
Sangría
Estos botones permiten insertar o anular la sangría en el texto.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
Listas
Se puede insertar el texto en forma de lista ya sea con viñetas o con
numeración. Para realizar este cambio se debe desplazar a las propiedades de
la Lista que se encuentran en el Menú Texto o en el Inspector de Propiedades.
Viñetas: Lista sin ordenar
Numeración: Lista Ordenada
• Casa
• Baño
• Habitación
1. Casa
2. Baño
3. Habitación
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
IMÁGENES
Antes de incluir una imagen, debe guardar la página en la carpeta del Sitio.
Para incluir una imagen en la página que fue guardada previamente, la
imagen deberá estar guardada primero en la carpeta del Sitio que fue creado,
sino lo está Dreamweaver le preguntará si desea copiar el archivo en el sitio.
Para Insertar una Imagen:
Coloque el punto de inserción en el lugar de la ventana de documento en el que
desea que aparezca la imagen y a continuación siga uno de estos procedimientos:
• En la categoría Común de la barra Insertar, haga clic en el icono Imagen.
• En la barra de menú Seleccione Insertar > imagen. Luego Busque y seleccione
el origen de imagen o contenido que desee insertar. En la parte inferior en la
opción Relativa a seleccione Documento.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
En la parte inferior podrá observar que aparece el campo URL localizador uniforme de recurso (Uniform Resource locutor), es aquí donde se encuentra la ruta de ubicación de la imagen, la misma que aparece en el Inspector de Propiedades en el campo Origen.
Si aparece un cuadro gris o un recuadro en blanco con una X roja, significa que la ruta esta de forma incorrecta, o puede ser que se ha modificado el nombre de la imagen, para solucionar esta situación se debe actualizar la ruta para que la
imagen vuelva aparecer.
Modificar el Tamaño de la Imagen:
Existen 2 formas para realizar el cambio de dimensiones en una imagen:
1. Seleccione la imagen y arrastre con el puntero alguno de sus recuadros negros
que aparecen alrededor de la imagen.
Para cambiar el tamaño de manera proporcional, seleccione algún recuadro
ubicado en las esquinas y al mismo tiempo mantenga oprimido la tecla Shift
mientras modifica la imagen.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander (Todos los derechos reservados).
2. Seleccione la imagen, a través del inspector de propiedades, modifique los
campos An (anchura) o Al (altura).
Para alinear las imágenes hay que hacerlo por medio del campo Alinear desde
el Inspector de Propiedades.
Para la realización de este documento, se tomó como referencia el “Manual
Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm.

QUE ES DREAMWEAVER

CURSO DREAMWEAVER www,senavirtual.edu.co

Adobe Dreamweaver® (Dw) Es una aplicación en forma de estudio (Basada por
supuesto en la forma de estudio de Adobe Flash®) pero con más parecido a un taller
destinado para la construcción y edición de sitios y aplicaciones Web basados en
estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe
Systems). Es el programa de este tipo más utilizado en el sector del diseño y la
programación web, por sus funcionalidades, su integración con otras herramientas como
Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web
Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto
para edición de imágenes como para animación a través de su integración con otras
herramientas
Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de
la web, ya que el código que generaba era con frecuencia sólo válido para Internet
Explorer, y no validaba como HTML estándar. Esto se ha ido corrigiendo en las
versiones recientes.
Se vende como parte de la suite Adobe Creative Suite 3 y 4
La gran base de este editor sobre otros es su gran poder de ampliación y personalización
del mismo, puesto que en este programa, sus rutinas (como la de insertar un
hipervinculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo
que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del
programa no sean instrucciones de C++ sino, rutinas de Javascript que hace que sea un
programa muy fluido, que todo ello hace, que programadores y editores web hagan
extensiones para su programa y lo ponga a su gusto.
Las versiones originales de la aplicación se utilizaban como simples editores
WYSIWYG. Sin embargo, versiones más recientes soportan otras tecnologías web
como CSS, JavaScript y algunos Framework del lado servidor.
Dreamweaver ha tenido un gran éxito desde finales de los 90 y actualmente mantiene el
90% del mercado de editores HTML. Esta aplicación está disponible tanto para la
platafoma MAC como para Windows, aunque también se puede ejecutar en plataformas
basadas en UNIX utilizando programas que implementan las API's de Windows, tipo
Wine.
Como editor WYSIWYG que es, Dreamweaver oculta el código HTML de cara al
usuario, haciendo posible que alguien no entendido pueda crear páginas y sitios web
fácilmente.
Algunos desarrolladores web critican esta propuesta ya que crean páginas HTML más
largas de lo que solían ser al incluir mucho código inútil, lo cual va en detrimento de la
ejecución de las páginas en el navegador web. Esto puede ser especialmente cierto ya
que la aplicación facilita en exceso el diseño de las páginas mediante tablas. Además,
algunos desarrolladores web han criticado Dreamweaver en el pasado porque creaba
código que no cumplía con los estándares del consorcio Web (W3C).
CURSO DREAMWEAVER www,senavirtual.edu.co
No obstante, Adobe ha aumentado el soporte CSS y otras maneras de diseñar páginas
sin tablas en versiones posteriores de la aplicación.
Dreamweaver permite al usuario utilizar la mayoría de los navegadores Web instalados
en su ordenador para previsualizar las páginas web. También dispone de herramientas
de administración de sitios dirigidas a principiantes como, por ejemplo, la habilidad de
encontrar y reemplazar líneas de texto y código por cualquier tipo de parámetro
especificado, hasta el sitio web completo. El panel de comportamientos también permite
crear JavaScript básico sin conocimientos de código.
Con la llegada de la versión MX, Macromedia incorporó herramientas de creación de
contenido dinámico en Dreamweaver. En lo fundamental de las herramientas HTML
WYSIWYG, también permite la conexión a Bases de Datos como MySQL y Microsoft
Access, para filtrar y mostrar el contenido utilizando tecnología de script como, por
ejemplo, ASP (Active Server Pages), ASP.NET, ColdFusion, JSP (JavaServer
Pages),PHP sin necesidad de tener experiencia previa en programación.
Un aspecto de alta consideración de Dreamweaver es su arquitectura extensible. Es
decir, permite el uso de "Extensiones". Las extensiones, tal y como se conocen, son
pequeños programas, que cualquier desarrollador web puede escribir (normalmente en
HTML y Javascript) y que cualquiera puede descargar e instalar, ofreciendo así
funcionalidades añadidas a la aplicación. Dreamweaver goza del apoyo de una gran
comunidad de desarrolladores de extensiones que hacen posible la disponibilidad de
extensiones gratuitas y de pago para la mayoría de las tareas de desarrollo web, que van
desde simple efectos rollover hasta completas cartas de compra.
Dato Curioso: Su nombre en español significa "tejesueños o tejedor de sueños".

FORMATOS GRÁFICOS PARA PÁGINAS WEB

Copyright ©: http://www.desarrolloweb.com/.

El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas sean
vistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tarea
agradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, si
embargo, es también el causante de errores graves en las páginas y hacer de estas, en algunos
casos, un martirio para el visitante.
Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sea
ligeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de las
imágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas,
utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.
Tipos de archivos
En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensados
especialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños se
transmiten más rápidamente por la Red.
El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formato
JPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma de
comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otros
propósitos.
Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formato
no tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan el
desconocimiento del formato por parte de los desarrolladores, que las herramientas habituales
para tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportan y que los
navegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato se
comporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resultaría
útil si se llega a extender su uso.
GIF
A parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otras
características que son importantes y útiles.
Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante si
la imagen es muy pequeña, aunque sea una foto.
Un logotipo es
un ejemplo claro
de imagen GIF
Copyright ©: www.desarrolloweb.com
Transparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De este
modo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde está
inscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.
Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemos
indicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos la
transparencia cuando vamos a guardar el gráfico.
Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos.
Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen,
por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en un
gráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.
En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lo
hacemos mientras creamos el gráfico.
32 colores
16 colores
8 colores
Imagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien el
gráfico y como pierde un poco a medida que le restamos colores.
JPG
Veamos ahora cuales son las características fundamentales del
formato JPG:
Compresión: Tal como hemos dicho anteriormente, su
algoritmo de compresión hace ideal este formato para guardar
fotografías. Además, con JPG podemos definir la calidad de la
imagen, con calidad baja el fichero ocupará menos, y viceversa.
Parte de esta
imagen es
transparente
Una fotografía con formato JPG
Copyright ©: www.desarrolloweb.com
Transparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamos
colocar una imagen con un área que parezca transparente procederemos así: con nuestro
programa de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la página
donde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán el
mismo.
I
Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.
Optimizar ficheros
Para que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemos
aprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:
Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace con
nuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.
GIF 256 colores - 10,8 KB
GIF 32 colores - 5,5 KB
GIF 4 colores - 2 KB
Para los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando. Este
formato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en su
aspecto visual.
Intento de
transparencia en
JPG
Copyright ©: www.desarrolloweb.com
JPG
calidad 0
3 KB
JPG
calidad 20
5,9 KB
JPG
calidad 50
10 KB
Es imprescindible disponer para optimizar la imagen de una
herramienta buena que nos permita configurar estas
características de la imagen con libertad y fácilmente.
Photoshop 5.5 o 6 es un programa bastante recomendable,
pues incorpora una opción que se llama "Guardar para el
Web" con la que podemos definir los colores del gif, calidad
del JPG y otras opciones en varias muestras a la vez. Así
con todas las opciones configurables, viendo los resultados
a la vez que el tamaño del archivo podemos optimizar la
imagen de una manera precisa con los resultados que
deseamos.
También existen en el mercado otros programas que nos
permiten optimizar estas imágenes de manera
sorprendente. Una vez hemos creado la imagen la pasamos por estos programas y nos
comprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo para
Internet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con los
programas de edición gráfica.
Photoshop es una herramienta excelente
para optimizar ficheros. Viendo varias
copias podemos elegir la más adecuada.

ESTILOS CSS

Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Estilos CSS
(Hojas de Estilo en Cascada)
ESTILOS CSS

Una de las opciones más interesantes que posee la herramienta Dreamweaver
CS3 son los Estilos CSS (Hojas de Estilo en Cascada), que nos permite crear
formatos que controlan de una forma flexible los contenidos de una página Web
(texto, imágenes, formato de la página, listas, bloques, entre otros).
Por medio de los CSS podemos combinar atributos de color, de tamaño, de tipos
de fuente, o de fondo; buscando la forma de no repetir asignaciones de estos
atributos.
La ventaja de la utilización de CSS, es que permite una actualización automática
en el documento de los cambios que se generen en ellos.
La desventaja de los estilos es que algunos navegadores antiguos no pueden
soportarlos y a veces los ignoran, aunque esto puede ocurrir solo en casos
contados.
Nota: Para evitar que ocurra un conflicto en los CSS creados, evite aplicar dos
estilos deferentes a un mismo texto.
Crear Estilo CSS Nuevo:
1. En la barra de Menú en la opción Texto, seleccione Estilos CSS y luego
de click en la opción Nuevo…
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
2. Aparecerá el cuadro de diálogo Nuevo Estilo CSS.
Defina el tipo de estilo CSS que desea crear:
• Seleccione Clase (puede aplicarse a cualquier etiqueta) y escriba el nombre
del estilo en el cuadro de texto Nombre (Ejemplo: .miestilo)
Nota: los nombres de clase deben comenzar por un punto (.) y pueden
contener cualquier combinación alfanumérica (por ejemplo .myhead1). Si no
introduce el punto inicial, Dreamweaver lo hará de forma automática.
• Para incrustar el estilo en el documento actual, donde dice Definir en,
seleccione Sólo este documento.
3. De click en el botón Aceptar. Aparecerá el cuadro de diálogo Definición de
Estilos.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
4. Seleccione las opciones de estilo que desea establecer para el estilo CSS
nuevo como tipo fuente, tamaño, color, etc. y haga clic en el botón Aceptar.
Aplicar un Estilo CSS:
Nota: Antes de aplicar los Estilos CSS, se recomienda digitar primero todo el texto
que estará en la página.
Para aplicarle a un texto un Estilo CSS creado previamente debe hacer lo
siguiente:
1. Seleccione el texto al que desea aplicarle el estilo
2. En el inspector de propiedades, en el cuadro de texto Estilo, seleccione el
nombre del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Le aparecerá en la página el texto con el estilo que ha seleccionado.
Nota: El procedimiento anterior lo debe realizar para aplicarle un estilo a cada
uno de los textos que se encuentran en la página.
Modificar el Nombre de un Estilo CSS:
Para modificar el nombre de un Estilo CSS, en el panel de archivos en la Ventana
Estilos CSS, seleccione el nombre del estilo que desea modificar, de click derecho
y seleccione la opción Cambiar nombre de clase
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Aparecerá el cuadro de diálogo Cambiar nombre de clase, en el cual se encuentra
seleccionado el nombre del estilo que va a cambiar
En el cuadro de texto Nuevo nombre, digite el nombre que desea asignarle al estilo
y de click en el botón Aceptar.
Modificar las Propiedades de un Estilo CSS:
Para modificar las propiedades de un Estilo CSS como tipo de fuente, color,
tamaño, etc, en el panel de archivos en la Ventana Estilos CSS, seleccione el
nombre del estilo que desea modificar, de click derecho y seleccione la opción
Editar
Aparecerá el cuadro de diálogo Definición de regla, en el cual se encuentran las
propiedades actuales del estilo.
Copyright 2009 SENA – CEV Comunidad Educativa Virtual SENA Regional Santander
Todos los derechos reservados
Modifique las propiedades que desee y por último de click en el botón Aplicar y
luego de click en el botón Aceptar.
Para la realización de este documento, se tomó como referencia el “Manual
Adobe Dreamweaver CS3” de la empresa Adobe y el Sitio Web
http://www.aulaclic.es/dreamweavercs3/index.htm.

DREAMWEAVER

Es el programa que hace parte del paquete de macromedia, junto con los programas de flash y fire. Es un editor gráfico con extención HTML profesional para diseñar, modificar y desarrollar sitios, pagina y apilaciones web.

las funciones de edición visual de dreamweaver permiten crear paginas de forma rápida, sin necesidad de escribir una sola linea de código...

para crear nuestra pagina lo primero que hay que tener en cuenta es crear una carpeta donde almacenaremos las imagénes, animaciones. A esta carpeta la llamaremos mi sitio, (todo debe de ir en esta carpeta). loa nombres de las carpetas no deben llevar espacios, tildes o caracteres especiales.

NOTA:
El nombre que se le crea a la carpeta es indiferente al nombre que se le asigne al sitio.

ELEMENTOS BÁSICOS DE LA VENTANA

Elementos principales
Barra de titulo: Contiene el nombre del programa en el que estamos trabajando, junto con el título, nombre y ubicación. Además las opciones de minimizar, maximizar, cerrar.

Barra de menú: Son los menús desplegables (archivo, edición, ver, insertar, modificar textos, comandos, sitio, ventana y ayuda).

Barra de herramientas de documento: En este sitio podemos encontrar iconos que nos permiten ejecutar de forma inmediata de las operaciones habituales que no son incluidas en la barra de herramientas estandar. Algunas de estas operaciones son: cambio de vista del documento,(código, diseño, vista previa, DVD, validar formatos, administración de archivos).

NOTA:
Para este proyecto nos vamos a ubicar en la ficha diseño, ya que vamos a trabajar con los códigos HTML.

Barra insertar: Contiene botones para inserción de diferentes tipos de objetivos, como hipervínculos, imagenes, tablas, y capas en un documento. Cada objetivo es un fragmento de código HTML, que le permite establecer diversos atributos al insertar.
Por ejemplo: puedo insertar una tabla haciendo clic en el botón tabla de la barra insertar o también en el menú insertar del menú principal.

NOTA: las imagenes deben tener la extensión .jpg

Inspector de propiedades: Este permite ver y realizar modificasiones de las diferentes propiedades del objeto del textoi seleccionado, en el podemos obsertvar las propiedades de un texto (negrita, color, fuente, estilo, etc).

INTRODUCCIÓN A DREAMWEAVER CS3

Introducción
Definición
Entorno de Trabajo
Creación del Sitio
Mi Primera Página

En nuestro tema de la semana 1 "INTRODUCCIÓN A DREAMWEAVER CS3" queremos:
Aprender a instalar Dreamweaver.
Ambientación al entorno de trabajo.
Identificar sus herramientas básicas.
Crear un sitio de trabajo.
Elaborar la Primera Página Web.
Macromedia define a Dreamweaver CS3 como un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML, como si prefiere trabajar en un entorno de edición visual. Dreamweaver CS3 le proporciona útiles herramientas que mejorarán su experiencia de creación Web.
Las funciones de edición visual de Dreamweaver CS3 permiten crear páginas de forma rápida, sin escribir una sola línea de código. No obstante, si prefiere crear el código manualmente, Dreamweaver cs3 también incluye numerosas herramientas y funciones relacionadas con la codificación. Además, Dreamweaver le ayuda a crear aplicaciones Web dinámicas basadas en bases de datos empleando lenguajes de servidor como ASP, ASP.NET, ColdFusion Markup Language (CFML), JSP y PHP.

Ahora vamos a explorar los elementos básicos de la herramienta, porque se debe conocer a fondo las utilidades prácticas como: menús, paneles, pantallas, etc.
Barras
Como se puede apreciar en la pantalla, existen unos elementos horizontales que contienen a su vez iconos y opciones de menú, ha estas disposiciones horizontales o verticales se les conoce como barras y se encuentran en todas las aplicaciones Windows. A continuación se describirán las barras más relevantes de la herramienta.


Barra título
Contiene el nombre del programa que estamos trabajando, junto con el título, nombre y ubicación de la página. En el caso de no tener título y nombre de página aparecerá nombres predeterminados como muestra la gráfica.
Además en el sector derecho se encuentran las opciones de maximizar, minimizar, restaurar y cerrar.
Barra de Herramientas Estándar

Contiene iconos que nos permite ejecutar de forma inmediata, algunas de las operaciones más habituales.Ejemplo: Guardar, Pegar, etc.

Barra de Menú
En esta barra podemos encontrar las operaciones de Dreamweaver que están agrupadas en menús desplegables Nota: Se recomienda realizar las operaciones desde los paneles.

Barra de Herramientas de Documento
En este sitio podemos encontrar iconos que nos permite ejecutar de forma inmediata algunas de las operaciones habituales que no son incluidas en la barra de herramientas estándar. Algunas de estas operaciones son: cambio de vista del documento (código, diseño, vista previa), la administración de archivos, el titulo, etc. Nota: Para efecto de este curso se recomienda trabajar con vista de documento en Diseño, ya que no se va a trabajar código HTML.

Barra Insertar
contiene botones para la inserción de diversos tipos de “objetos”, como imágenes, tablas y capas, en un documento. Cada objeto es un fragmento de código HTML que le permite establecer diversos atributos al insertarlo. Por ejemplo, puede insertar una tablahaciendo clic en el botón Tabla de la barra Insertar. Si lo prefiere, puede insertar objetos utilizando el menú Insertar en lugar de la barra Insertar.

Paneles
Dreamweaver utiliza unas ventanas emergentes similares a los menús, estas reciben el nombre de paneles o inspectores, pero su diferencia radica en que el inspector varía sus opciones dependiendo del objeto seleccionado.
En la parte superior, en el menú ventana, podemos seleccionar ocultar o mostrar los paneles e inspectores. A continuación se mostraran lo más importantes.

Inspector de Propiedades
El inspector permite ver y realizar modificaciones de las diferentes propiedades del objeto o del texto seleccionado. En la gráfica podemos observar las propiedades de un texto, como el tipo de fuente, color, negrilla, etc.

SITIO
Después de revisar y reconocer el ambiente de Dreamweaver, antes de empezar a diseñar una Página Web, es recomendable definir la ubicación de los objetos que la componen: como imágenes, animaciones flash, archivos, etc. A esta ubicación se le denomina como un sitio.
Cree una carpeta en su PC con el nombre del sitio (el nombre del sitio debe hacer referencia al tema principal de las páginas). Por ejemplo para efecto de este curso utilizaremos como nombre MISITIO . Dentro de esta carpeta se debe crear carpetas para las imágenes, para los archivos, etc.
Nota: El nombre de la carpeta que se crea es indiferente al nombre que se le asigne al sitio, pero por organización vamos a utilizar el mismo nombre tanto para el sitio como para la carpeta. Los nombres de las carpetas no deben llevar espacios, tildes, ñ o caracteres especiales.
En el menú principal que esta ubicado en la parte superior de la pantalla debe ingresar a la opción sitio , donde se seleccionara administrar sitio . Debe aparecer la siguiente pantalla, en botón nuevo escogemos sitio .
continuación se definirá el nombre del sitio y la carpeta raíz local, donde se encuentra el sitio dentro del disco duro local. Por ahora las demás opciones no son de nuestro interés, porque estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Nota: En la carpeta Animaciones Semana 1 podrá descargar la animación flash (MISITIO) que le ayudara a entender la creación de un sitio de trabajo con Dreamweaver.

Actividad 1 Unidad 2

Usted ya ha sido contratado por la empresa, y su primer proyecto está orientado a la definición de la página web para la empresa, la cual permitirá promocionar todos los productos comercializados.

Su reto es diseñar la página de inicio del portal de la empresa.

La página diseñada deberá cumplir con los siguientes requerimientos:

1. Nombre de la empresa- Imagen representativa y breve descripción.
2. Descripción de los productos representativos de la empresa ( implementar imágenes de productos para adelgazar, productos para cuidado corporal, productos para el cuidado del cabello, Maquillaje, entre otros)

Debe contener las siguientes características.

a) Título : Nombre de la empresa, al cual se le debe aplicar un estilo con las siguientes especificaciones:

- Nombre del estilo: .mi estilo

- Tipo de selector: clase

- Definir en: solo este documento

- Fuente: Arial

- Tamaño: 14 píxeles

- Grosor: Negrita

- Estilo: Normal

- May/min: Mayúscula

- Color : Defina el color representativo

-

La alineación del texto para el titulo debe ir centrada.

b) Imagen : Las imágenes utilizadas para promocionar los productos representativos y la imagen corporativa de la empresa debe contar con la siguiente configuración

- Tamaño: 150 píxeles alto X 150 píxeles ancho ( imagen corporativa) y las imágenes de los productos no deben superar los 70 Pixeles de alto y ancho

- Alineación: centrada

- Formato de imagen: jpg

c) Párrafo: La descripción de la empresa y de los productos, deberá contar con la siguiente configuración:

- Fuente: Arial

- Tamaño: 12 píxeles

- Color : Negro

- Estilo de fuente: Normal

- Alineación: Justificada