Autores: Dulce Surez Daz Roberto Becerril Martnez Mara de Jess lvarez Tostado Uribe Vctor David Napolen

Martn vila Isaura Rivera Jimnez Erick Fernando Bernal Arzaluz

Manual de apoyo para el libro de Computacin Especializada Modulo III: Dreamweaver

Temas:
I. Consideraciones en torno a Dreamweaver
II. Requisitos de instalacin IV. Conceptos importantes III. Cmo iniciar con Dreamweaver V. Que es un sitio WEB

VI. Primera Pgina

VIII. Vnculos X. Formularios

VII. Creacin de Tablas

IX. Imgenes

I. Consideraciones en torno a Dreamweaver

Antecedentes
palabra portal de Internet se empez a utilizar en 1998, se refiere a pginas donde se concentran distintos servicios como noticias, bsquedas en Internet, mensajes electrnicos, etc. La idea era emplear estos portales como punto de partida para comenzar la actividad en Internet. Ejemplos de estos portales son: Yahoo, Netscape's, AOL, etc. Actualmente el uso de la palabra portal de Internet se extiende a aquellos sitios donde se puede interactuar con el contenido de la pgina. Pero por ejemplo en el portal de un banco se pueden hacer transacciones bancarias.
La

Macromedia Dreamweaver MX
los conocimientos para disear, codificar y desarrollar sitios, pginas y aplicaciones WEB, mediante herramientas tiles y sencillas de manejar.
Provee Trabajando

en solo entorno se puede crear y administrar rpidamente un sitios Web y aplicaciones de Internet.
Proporciona

un espacio de trabajo, donde cada documento aparece en una ventana distinta. Los grupos de paneles aparecen apilados en principio, pero pueden separarse en sus propias ventanas. Las ventanas se ajustan automticamente, a los lados de la pantalla y en la ventana Documento, al arrastrarlas o cambiar su tamao.

Caractersticas
Permite

trabajar en un entorno de edicin visual.

Permite
Soporta Hojas

crear pginas web de forma rpida.

gran cantidad de tecnologas.

de estilo y capas. para crear efectos e interactividades. de archivos multimedia.

Javascript Insercin

Caractersticas (cont.)

El cdigo que genera es de buena calidad Es un programa de "maquetacin" de pginas web

Aade herramientas de productividad, como son la creacin de plantillas o "templates".

Temas

II. Requisitos de instalacin

Requisitos para instalar Dreamweaver

Un

procesador Intel Pentium II o equivalente a 300 MHz o ms rpido

Windows

98, Windows 2000, Windows NT (con Service Pack 3 o posterior), Windows ME o Windows XP versin 4.0 o posterior de Netscape Navigator o Microsoft Internet Explorer
La 96

MB de memoria de acceso aleatorio (RAM) (se recomienda disponer de 128 MB).

Requisitos para instalar Dreamweaver

275 Un

MB de espacio en disco disponibles

monitor de 256 colores capaz de mostrar una resolucin de 800 x 600 pxeles (se recomienda disponer de un monitor de millones de colores capaz de mostrar una resolucin de 1024 x 768 pxeles)
Una

unidad de CD-ROM.

Temas

II. Cmo iniciar con Dreamweaver

Acceso a Dreamweaver

rea de Trabajo

Temas

IV. Conceptos importantes

Conceptos

HTML: "Lenguaje para marcado de hipertexto". Ms claro an, se trata de un lenguaje para estructurar o manipular documentos a partir de texto en World Wide Web. Navegador: Es el programa que nos ofrece acceso a Internet. Debe ser capaz de comunicarse con un servidor y comprender el lenguaje de todas las herramientas que manejan la informacin de Web. Los mas populares son Netscape e Internet Explorer.

Conceptos

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un navegador. HTTP: Es el protocolo de transferencia de hipertexto, o sea, el protocolo que los servidores de World Wide Web utilizan para mandar documentos HTML a travs de Internet.

URL: Es el Localizador Uniforme de Recursos, o dicho mas claramente, es la direccin que localiza una informacin dentro de Internet.

Conceptos

World Wide Web (WWW): Es un sistema de informacin, el sistema de informacin propio de Internet. Sus caractersticas son: Informacin por hipertexto: (texto o imgenes), la informacin que se muestra en la pantalla est vinculada con otras informaciones que pueden ser de otras fuentes. Grfico: En la pantalla aparece simultneamente texto, imgenes e incluso sonidos.

Conceptos

Global: Se puede acceder a l desde cualquier tipo de plataforma, usando cualquier navegador y desde cualquier parte del mundo. Pblica: Toda su informacin est distribuida en miles de ordenadores que ofrecen su espacio para almacenarla. Toda esta informacin es pblica y toda puede ser obtenida por el usuario. Dinmica: La informacin, aunque esta almacenada, puede ser actualizada por el que la publico. Independiente: Dada la inmensa cantidad de fuentes, es independiente y libre. Temas

V. Qu es un sitio Web ?

ANTES DE COMENZAR Qu es un sitio Web ?

Un

es un conjunto de documentos vinculados, con atributos compartidos, tales como temas relacionados, un diseo similar y un objetivo comn.

Fuente de la imagen: http://static.flickr.com/78/159868523_e2ae286efa_m.jpg

Ms sobre sitios WEB

En Dreamweaver, un sitio normalmente consta de dos partes:
Un

conjunto de archivos situados en un equipo local (el sitio local).

una ubicacin en un servidor Web remoto donde cargars los archivos cuando estn preparados para ponerlos a disposicin pblica (mediante el servidor UAEM).
Y

Fuente de la imagen: http://www.gif-galerie.de/cgibin/gif.pl?Language=es&Section=Computer&Page=2

Sobre la creacin de sitios Web

mtodo ms comn para crear un sitio Web utilizando Dreamweaver consiste en crear y editar pginas en el disco local y cargar copias de esas pginas en un servidor Web remoto para ponerlas a disposicin pblica.
El

Fuente de la imagen: http://www.gif-galerie.de/

Sobre la creacin de sitios Web

Se puede utilizar Dreamweaver de otras formas por ejemplo:
Ejecutando

un servidor Web en el sistema local.

archivos en un servidor para la realizacin de pruebas.

Cargando
Editando

archivos sin definir un sitio o utilizando un disco montado, como si se tratara del disco local. Pero en las lecciones de esta gua se da por sentado que se trabaja localmente y que posteriormente se realiza la carga en un servidor remoto.

Crear un sitio
Antes

de decidirnos a crear un sitio web, tendremos que crear en nuestro disco duro lo que denominamos un sitio local, que no es ms que la creacin de una carpeta que en un futuro contendr todo aquello que compone nuestra Web (archivos, imgenes, animaciones, etctera). Esta carpeta se define como carpeta raz local y ser una rplica exacta del sitio remoto el cual ser el sitio real donde accedern los visitantes de la web.

Crear un sitio
Ser en este sitio local donde podremos probar todas nuestras pginas y hacerles los cambios oportunos antes de subirlas al servidor y proceder a su publicacin.
Pasamos

local.

entonces a ver como se crea un sitio

Da clic en la opcin del Temas Sitio y selecciona el comando Administracin de sitios.

Crear un sitio
Posteriormente

aparecer la siguiente ventana:

Crear un sitio
deberemos seleccionar la pestaa NuevoSitio para darle nombre a nuestro sitio:
Ahora

Prueba 1

Carpeta que creaste

Imgenes

Configuracin del sitio

Dreamweaver asigna al sitio el nombre Sitio sin nombre 1. Para asignarle el nombre elegido, activa la pestaa Avanzadas y especifica los datos de configuracin del sitio: El nombre del sitio.
Seala

la carpeta raz que creaste al principio

Carpetas

donde se encuentran tus imgenes.

Configuracin del sitio

Importante sealar que los nombres de las carpetas correspondientes, no deben llevar acentos ni signos complicados, tampoco ee, lo ms sencillo posible para que no haya problema con servidores futuros. Posterior a buscarla y abrirla volvers a la pantalla:

Tips para la planeacin del diseo del sitio.

Una vez definido nuestro sitio conviene realizar su planeacin, para eso debes tomar encuentra ciertos aspectos y evitar hacer cambios inoportunos al sitio:
Identifica Define Qu

que debe comunicar el sitio.

a quin va dirigido el sitio, para poder definir un perfil de usuario. contenido necesitars para el sitio?, para recopilar todos los contenidos de las pginas, como textos, imgenes, animaciones, etc.
Temas

VI. Primera pgina

Creacin de la primera pgina

Selecciona

del Temas la opcin de Archivo y da clic en el comando nuevo

Posteriormente activa la pestaa Generales, selecciona Pgina Bsica y da clic en HTML Da clic en:

Da nombre a la pgina en la opcin Guardar como

Gurdala en la carpeta raz creada para el sitio.

Contenido a nuestra primera pgina

Es

recomendable que en cualquier pgina vaya un ttulo, el logotipo de la empresa o una animacin. el diseo de pginas es muy importante el uso de Tablas que nos sirvan de guas para distribuir texto, imgenes, animaciones, Temass, etctera.

En

Logo y ttulo.

Ejemplo de Pgina

Los ttulos subrayados indican vnculos a otras pginas.

La cuadrcula con los bordes azules muestra la tabla que utilizaron para disear esta pgina.

Vista previa a la pgina

Podemos

configurar el navegador para ir probando la pgina de vez en cuando:

Opcin para configurara el navegador donde visualizar la pgina.
Tecla rpida para visualizar la pgina F12.

Configuracin del navegador

Temas

VII. Creacin de Tablas

Definicin de Tabla
Una

tabla es una estructura formada por filas y columnas que nos permite organizar cualquier tipo de informacin. Dreamweaver es posible crear una tabla de manera fcil y rpida.

En

Se

puede modificar fcilmente la estructura inicial de una tabla para crear un diseo ms complejo combinando y dividiendo celdas, insertando filas y columnas y/o modificando las propiedades de la misma.

Formas de crear una tabla

Formas de crear una tabla

Especificar las caractersticas de la Tabla

Configurar las propiedades de la tabla

Configurar las propiedades de la tabla

Ancho

de tabla: la longitud total a lo ancho, de la tabla que puede ir en porcentaje o en pxeles (es recomendable usar porcentaje y emplear un ancho del 90% para que la tabla no est al lmite de la ventana),
del borde: Es posible que los bordes de las tablas no sean visibles, para ello debemos colocar el nmero 0, si le ponemos una cifra (1, 2) el borde ser cada vez ms ancho.

Grosor

Configurar las propiedades de la tabla

Relleno

de celda: el espacio que habr entre el borde de una celda y su espacio de trabajo, entre celdas: distancia que quedar entre una celda y otra (si no deseamos ninguna, debe ir 0), por si deseamos que la tabla lleve uno, podemos combinar celdas.

Espacio

Encabezado:

Otra manera de insertar tablas Indica

las especificaciones de la tabla.

Teniendo activa la pestaa Comn, da clic en el icono que muestra una tabla.

Ejemplo

Incrustar una nueva tabla dentro de otras.

Da

clic en la celda donde quieres insertar la nueva tabla y pulsar <Enter> para que abra espacio y se pueda realizar la operacin.

Posteriormente seleccionar del Temas la opcin de Insertar y el comando Tabla.

Configurar el contenido de la tabla

Es

conveniente alinear el texto o imagen dentro de la celda en la tabla.

Configurar el contenido de la tabla

Configurar

la fuente dando clic en Editar lista de fuentes , y seleccinala, as como el tamao de la letra.
Da clic en el icono de color para escoger el adecuado.

Dividir y combinar celdas

Hay diferentes herramientas para facilitar la transformar de celdas, por ejemplo:
Podes Crear celdas dentro de otra, dividiendo la celda original; para ello damos clic en el Inspector de propiedades, en el icono:

Dividir celdas
Otra forma es dar clic en la opcin Tabla en el comando Dividir Celda y activar el botn de seleccin de Columnas o Filas:

Recuerda que antes de la configuracin debes tener activo el cursos en la celda que vas a configurar.

Combinar celdas

Puedes convertir varias celdas en una seleccionando las celdas a combinar y dando clic en el Inspector de propiedades, en el icono:

Otra forma es dar clic en la opcin Tabla en el comando Combinar.

Temas

VIII. Vnculos

Definicin

Son objetos que nos permiten conexiones entre documentos.

establecer

Se pueden establecer vnculos con cualquier texto o imagen de otro lugar en un documento. A la hora de crear vnculos resulta fundamental conocer la ruta del archivo con el que se establece (de imagen, texto u otra pagina).

Propiedad destino

_blank abre el documento vinculado en una nueva ventana del navegador, sin modificar la ventana actual. _parent abre el documento vinculado en el conjunto de marcos padre del marco en el que aparece el vnculo, sustituyendo todo el conjunto de marcos.

Propiedad destino

_self abre el vnculo en el marco actual y sustituye el contenido de dicho marco.

_top abre el documento vinculado en la ventana actual del navegador, eliminando de esta forma todos los marcos.

Objetos que se pueden vincular

Texto

Imgenes
Imgenes de sustitucin Mapas de Imgenes Y otros ms ...

Tipos de Rutas
Hay tres tipos de rutas de vnculos:

Rutas absolutas protocolo).

(incluyen

el

Rutas relativas al documento (dentro del sitio).

Rutas relativas a la raz del sitio (incluyen raz /).

Ejemplo

Temas

IX. Imgenes

Propiedades de imagen
Direccin de origen de la imagen.

Dimensiones de la imagen.

Destino del vnculo.

Herramientas para mapas de imgenes.

Rollover o imagen de sustitucin

Imagen de sustitucin, se le llama a la tcnica de reemplazar una imagen por otra cuando se pasa por encima de ella el puntero del Mouse, vista desde un navegador.

Forma de insertar un rollover

Direccin de la imagen en la pgina.

Direccin donde nos traslada al hacer clic.

Texto que aprece cuando se acerca el puntero del Mouse.

Direccin de la imagen que aparece al pasar el Mouse.

Mapas de imgenes

Un mapa de imagen, se realiza dividiendo dicha imagen en regiones o zonas interactivas. Cuando se hace clic en una zona interactiva, se realiza una accin, por ejemplo: se abre un archivo nuevo, o aparece otra imagen o texto; es decir, se utiliza bsicamente para crear vnculos.
Esto se realiza mediante el inspector de propiedades de una imagen.

Propiedades de mapa de imagen

Herramientas para marcar la zona interactiva en la imagen.

Temas

X. Formularios

Definicin

Los formularios son elementos que permiten recopilar informacin, sugerencias o comentarios de los visitantes de un sitio Web. Los formularios recogen la informacin del usuario y la envan a un servidor para procesarla.

Lo que debes saber sobre formularios

Cuando se crea un formulario, dentro del cdigo de Dreamweaver se inserta la etiqueta <form>, la cual incluye parmetros, que permiten especificar una ruta a la aplicacin del lado del servidor que procesar los datos del formulario, as como el mtodo que se utilizar para transmitir los datos del navegador al servidor.

Lo que debes saber sobre formularios

Cuando un visitante introduce informacin en el formulario de un sitio Web y hace clic en el botn de envar, la informacin se transfiere al servidor donde ser procesada por una aplicacin. El servidor responde enviando la informacin solicitada de vuelta al usuario o bien realizando alguna accin basada en el contenido del formulario.

Es importante considerar que no se pueden recoger datos del formulario sin una aplicacin del lado del servidor para procesarlos.

Objetos de Formulario

Cajas de texto

Botones y Casillas de verificacin

Campos de archivos e imagen

Listas o Temass

Objetos de Formulario

Campos de texto aceptan cualquier valor alfanumrico. El texto puede mostrarse en una sola lnea, en varias o como una serie de puntos o asteriscos en el caso de informacin privada (por ejemplo, para proteccin de contraseas). Campos ocultos permiten almacenar informacin introducida por el usuario, como un nombre, una direccin de correo electrnico o una preferencia de visualizacin, y utilizarlos la prxima vez que el usuario visite el sitio.

Objetos de Formulario

Botones realizan acciones cuando se hace clic en ellos. Normalmente estas acciones incluyen el envo y restablecimiento de formularios. Puede aadir un nombre o una etiqueta personalizada a un botn, o bien usar una de las etiquetas predefinidas, Enviar o Restablecer. Casillas de verificacin admiten mltiples respuestas en un solo grupo de opciones. Un usuario puede seleccionar tantas acciones como sean necesarias.

Objetos de Formulario

Botones de opcin representan opciones que se excluyen mutuamente. Cuando se selecciona un botn de un grupo de botones de opcin, se desactivan todos los dems botones del grupo. Por ejemplo, un usuario debe elegir entre dos opciones: Femenino o Masculino. Lista/Temas muestra valores de opciones en una lista de desplazamiento que permite a los usuarios seleccionar varias opciones. La opcin Temas muestra los valores de las opciones en un Temas emergente que permite a los usuarios seleccionar una sola opcin.

Objetos de Formulario

Temass de salto son listas de navegacin o Temass emergentes que permiten insertar un Temas en el que cada opcin se vincula a un documento o archivo. Campos de archivo permiten al usuario examinar los archivos del equipo y cargarlos como datos de un formulario.

Campos de imagen permiten insertar una imagen en un formulario. Los campos de imagen se pueden utilizar para crear botones grficos (por ejemplo, Enviar o Restablecer).

Insertar un Formulario

Marcador de zona de formulario. Zona de formulario donde se van a insertar los objetos.

Propiedades

Ejemplo

Temas

BIBLIOGRAFA BSICA:

Prez Lpez, Csar. Administracin de 2003.West, Ray. et. al.

sitios y pginas Web con Macromedia Dreamweaver Mx, ed. ALFAOMEGA. Mxico,
Fundamentos de Dreamweaver MX / Ray
West, Tom Muck; traductor Eloy Pineda Rojas. ed. McGraw-Hill, New York. 2003.Bruce, Betsy. et. al. Aprendiendo Macromedia Dreamweaver 4 En 24 Horas, ed. Prentice Hall, Mxico. 2001.