CAPITULO 1.

Hola y bienvenidos. Vamos a enseñarles a utilizar a nivel básico e integral Macromedia Dreamweaver
MX, que como todos saben, es un editor gráfico de html y otros lenguajes para web.

Cuando instalamos el programa, y lo abrimos por primera vez, Dreamweaver MX nos

muestra la siguiente pantalla:

En esta opción podemos elegir ventanas acopladas o sueltas, como en la versión 4, y si

elegimos la opción MX, nos permite elegir una vista del programa como si fuera para
programadores. Por eso, nos da como ejemplo el programa HomeSite/Coder-Style.

Nosotros elegimos la que vemos seleccionado en la ventana ya nombrada.

Les presento la interface que nos muestra este programa:

Comencemos a contar con detalles sus partes principales.

Es muy práctica esta opción a partir de esta version. Ni dudarlo.

Vamos a hacer click en la herramienta EDIT y seleccionamos la opción PREFERENCIAS.
Como pueden ver, tenemos muchas categorías, ya que se han agregado algunas que nos
sirven para aquellos sitios de debamos hacer con base de datos, ya que han unificado, a mi
criterio, el Dreamweaver 4 con el Ultradev.

Por ahora vamos a la categoría General que es la que les estoy mostrando, que nos da para
tildar, si queremos, la opción de abrir archivos en archivos nuevos y no en el mismo, y
detalles que vamos ir viendo a medida que transcurra este curso. Lo que si vale la pena
destacar es que al final de esta categoría, uno puede poner el máximo número de pasos o
líneas en la ventana Historial o History, luego, en la barra de herramientas si deseo ver,
íconos, íconos con texto o texto solo (igual que en la versión anterior) y elegir qué tipo de
diccionario queremos para la corrección de texto.

Si hacemos click en el botón, CHANGE WORKSPACE, nos aparece la misma ventana que al
principio:
Que nos sirve en el caso de probar con otro espacio de trabajo.

Les presento el menú de herramientas:

Hacemos click en Site o Sitio y elegimos Nuevo sitio o New site:

CAPITULO 1.2

Esta es la misma de la versión anterior, y tenemos que tener en cuenta que la básica que es
la otra solapa que pueden ver en el gráfico de arriba, es con ayuda, ahí nos pregunta paso
por paso:

 Nombre del Sitio

 Carpeta de ubicación en nuestro rígido
 Si utilizamos tecnología (php, asp, etc.)

Pero en este caso, utilizaremos el avanzado:

Donde dice Site Name colocaremos, como dice el gráfico, el nombre con el cual luego
nosotros identificaremos al site, de varios que podemos tener a la vez para diseñar.
En Local Root Folder buscaremos, haciendo click en la carpetita amarilla que tenemos al lado
de la ventana editable, la ruta correcta donde vamos a guardar todo que vamos a diseñar, es
decir, en una carpeta que vamos a destinar. Daremos por tildado las dos casillas que nos da
por opción y le damos OK.
El tilde del cache sirve para que mantenga todo en forma automática actualizado con
respecto a links y a otras cosas que podemos ir cambiando sobre la marcha.
Una cosa importante: este es el paso mas importante: setear, dejar bien configurado en
qué carpeta vamos a colocar TODO lo que vamos a diseñar, y dejar así armado el sitio TAL
CUAL lo vamos a tener en el FTP, es decir, en el dominio que tengamos ya contratado para
tener nuestra página online.
En resumen, les quiero decir que si tenemos todo disperso por cualquier parte de nuestro
rígido, el mismo programa ya nos va a pedir que coloquemos todo en un mismo lado.
Entonces vamos a colocar como está en el gráfico de arriba, vamos a crear un sitio de
colores, entonces el nombre del sitio será SITIO DE COLORES. Cuando terminen de crearlo
le dan Ok o Aceptar, se les va a habilitar la siguiente pantalla, llamada SITIO o SITE.
Pensemos que esta es como nuestro "explorador de windows" pero de Dreamweaver MX,
para cambiar de lugar o de nombre, archivos de nuestro sitio. También es nuestra
herramienta FTP para luego de haber terminado el sitio subir todo al servidor contratado.

Del lado izquierdo nos pide configurar, si ya tenemos los datos, los datos remotos del
servidor a donde subiríamos nuestro sitio, pero no se preocupen si no tienen ninguno, ya
que esta opción se puede tranquilamente setear en cualquier momento del desarrollo y
armado de nuestro sitio web.

En esta imagen vemos con más claridad las opciones de nuestra ventana sitio:

"...Nota: Los botones Archivos del sitio, Servidor de prueba y Mapa del sitio sólo
aparecen en el panel Sitio ampliado.
Conectar/desconectar (FTP, RDS, protocolo WebDAV y SourceSafe) conecta o
desconecta del sitio remoto. De forma predeterminada, Dreamweaver desconecta del sitio
remoto si permanece inactivo durante más de 30 minutos (sólo FTP).
Actualizar actualiza las listas de los directorios local y remoto. Utilice este botón para
actualizar manualmente las listas de directorios si ha desactivado las opciones Actualizar
lista de archivos locales automáticamente o Actualizar lista de archivos remotos
automáticamente, en el cuadro de diálogo Definición del sitio (consulte Configuración de una
carpeta remota).
Obtener archivo (bajar archivos) copia los archivos seleccionados del sitio remoto o del
servidor de prueba en el sitio local (sobrescribiendo la copia local del archivo, si existe). Si
está activada la opción Permitir desproteger y proteger archivo, las copias locales serán de
sólo lectura. Los archivos permanecerán disponibles en el sitio remoto para que otros
miembros del equipo puedan protegerlos. Si está desactivada la opción Permitir desproteger
y proteger archivo y se obtiene un archivo, se transferirá una copia de éste con privilegios
de lectura y escritura.
Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si están
activos los paneles Sitio remoto o Servidor de prueba, los archivos del servidor remoto o de
prueba seleccionados se copian en el sitio local. Si está activo el panel de archivos locales,
Dreamweaver copiará las versiones de los archivos locales del servidor remoto o de prueba
en el sitio local.
Nota: Es posible obtener los archivos del servidor remoto y del servidor de prueba,
pero sólo se pueden proteger o desproteger los archivos remotos.
Colocar archivo (subir archivos) copia los archivos seleccionados del sitio local en el sitio
remoto o el servidor de prueba.
Dreamweaver copia los archivos seleccionados en el panel activo del panel Sitio. Si está
activo el panel Archivos locales, los archivos locales seleccionados se copian en el sitio
remoto o en el servidor de prueba. Si están activos los paneles Sitio remoto o Servidor de
prueba, Dreamweaver copia las versiones locales de los archivos remotos o del servidor de
prueba seleccionados en el sitio remoto.
Nota: Es posible colocar archivos en los servidores remoto y de prueba, pero la
funcionalidad de desprotección y protección sólo puede utilizarse con los archivos
remotos.
Si coloca un archivo que aún no existe en el sitio remoto y está activada la opción Permitir
desproteger y proteger archivo, Dreamweaver añadirá el archivo al sitio remoto como
“protegido”. Haga clic en el botón Desproteger para añadir un archivo sin protegerlo.
Proteger archivos transfiere una copia del archivo desde el servidor remoto hasta el sitio
local (sobrescribiendo la copia local del archivo, si existe) y marca el archivo como protegido
en el servidor. Esta opción no está disponible si está desactivada la opción Permitir
desproteger y proteger archivo para el sitio actual en el cuadro de diálogo Definición del
sitio.
Desproteger transfiere una copia del archivo local al servidor remoto y permite que otros
usuarios la editen. El archivo local se convierte en archivo de sólo lectura. Esta opción no
está disponible si está desactivada la opción Permitir desproteger y proteger archivo para el
sitio actual en el cuadro de diálogo Definición del sitio.
El botón expandir o colapsar (sólo Windows) amplía o contrae el panel Sitio para mostrar
uno o dos paneles... " (texto extraído de la ayuda en español del Dream MX)
Bien, entonces una vez ya seteado nuestro sitio de colores, vamos al menú archivo y nuevo
(control + N)

CAPITULO 2.

Bien, entonces una vez ya seteado nuestro sitio de colores, vamos al menú archivo y nuevo (control +
N), pedimos de esta manera un nuevo archivo, un html ya que no usamos tecnología asp o php por
ejemplo.

Se nos abrirá la siguiente pantalla:

Como pueden ver aquí nos presenta una ventana dándonos opciones a elegir: html, una
plantilla o template de html (un html ya predefinido), un item de librería, un estilo (css), un
archivo javascript o un archivo xml. Nosotros nos vamos a dedicar a una página básica
HTML, presionamos luego el botón CREAR o CREATE.

Bien! ahora tenemos nuestro primer archivo HTML:

Como dije en el principio esto es un editor gráfico de html, por defecto tenemos el cursor
listo para escribir lo que tengamos que colocar: en la barra de propiedades vemos las
características del texto, su tamaño, color, su alineación, si tiene un formato definido como
título, (pensemos como si fuera Word), para generar listas con viñetas, con números, y
distancia de la lista para darle el diseño deseado (el tema lista lo veremos más adelante).

En la parte blanca de nuestro archivo html pidamos el menú contextual con el botón derecho
del mouse o ir al menú Modificar o Modify y seleccionar Page Properties, o Propiedades de
página o simplemente con Control + J y se les va a presentar la siguiente pantalla:
Como pueden ver acá también tenemos la posibilidad de colocar el título a la página que no
tiene nada que ver con el nombre del archivo, (invito a aquellos que no tengan muy claro el
código html a realizar los cursos gratuitos que damos de HTML). Luego tenemos la opción de
colocar dos tipos de fondos de página, un color o una imágen.
A continuación vemos cuatro casilleros con una selección de color para cada uno:

• Texto: texto, contenido sin vínculo, sin link.

• Vínculo: texto vinculado, que nos llega a otro sitio o a otro html de nuestro sitio.
• Vínculo visitado: texto vinculado pero ya cargado en el cache, es decir luego de
haberlo activado y visitado.
• Vínculo activo: Momento en que el usuario hace click y no suelta la presión sobre el
mismo y vemos como cambia de color hasta que lo soltamos.

Les muestro una ventana con los colores como muestra por defecto:

Uno elije y listo!

Entonces para comenzar, coloquemos un gris de fondo y texto en blanco y escriban unas
líneas como les muestro a continuación:
CAPITULO 2.2

Pueden ver como despliego la lista de tipografías para seleccionar la que deseo, tengan en
cuenta que HTML utiliza las fuentes de los usuarios, si utilizamos una tipografía
media rara vamos a tener inconvenientes porque si no la tienen instalada la va a
cambiar por la que tenga predeterminada en su máquina.
Por eso tenemos que tener en cuenta que si utilizamos una tipografía decorativa o extraña,
debe estar como imagen y no como fuente de html así todos la pueden ver.

El tamaño de la tipografia se mide en código html, del 1 al 7 y cuando dice - ó +1 por

ejemplo significa que del tamaño PREDETERMINADO del usuario en su navegador agregue
(+) o saque (-) un (1) tamaño del predeterminado por el usuario en esa máquina, por eso
siempre es ACONSEJABLE, determinar el color, tamaño y fuente y no dejar nada por
PREDETERMINADO para que el diseño de mi sitio se vea tal cual uno desea que se vea.

Cuando escribimos un párrafo y deseamos tener un DOBLE INTERLINEADO como si fuera

cambio de párrafo presionen LA TECLA ENTER.
Si desean hacer un salto de rengón pero no de párrafo es decir un SIMPLE INTERLINEADO
presionen SHIF + ENTER.

En la barra de herramientas común tenemos las siguientes opciones:

De izquierda a derecha:

• Insertar vínculo
• Insertar vínculo a una dirección de email
• Insertar un ancla
• Insertar tabla
• Insertar capa
• Insertar imagen
• Insertar un placeholder graphics
• Insertar un html de Fireworks
• Insertar un archivo de Flash
• Insertar una imagen de sustitución o rollover
• Insertar una barra de navegación
• Insertar una línea horizontal
• Insertar fecha
• Insertar una tabla de datos (de Excel por ejemplo)
• Insertar un comentario para el código HTML
• Cambiar un tag de programación

Hasta ahora nos estamos olvidando de algo muy importante: SALVAR O GUARDAR EL
DOCUMENTO, así que vamos a archivo o file, seleccionamos Guardar o Save y nos va a
aparecer la típica ventana de guardar que ya conocemos todos:

A nuestra primer página la vamos a guardar como index.html, tenemos que tener en cuenta
que los navegadores reconocen a index como la primer página a mostrar para comenzar a
navegar un sitio web.
Bien continuemos (pueden ir a tomar un vaso de agua y volver rápido!), al texto que
estamos escribiendo vamos a darle diferente formatos, diferentes tipografías, tamaños,
colores, etc, algo asi:

Miren bien esta imagen, vean el ícono que selecciono, dice IMAGE o IMAGEN, hagan click en
él, les aparece lo siguiente:

Buscan la ruta donde esta la imagen que desean colocar y no importa si no está en la
carpeta de la pagina de colores porque una vez GRABADO EL ARCHIVO HTML dentro de la
carpeta que hemos seteado nuestro sitio al principio de todo, el programa reconoce que está
fuera y nos va a preguntar: ¿LO GUARDAMOS EN LA CARPETA DEL SITIO?, ahí le colocamos
que sí y si queremos lo agregamos en una carpeta llamada imágenes pero DENTRO DE LA
CARPETA DEL SITIO SETEADO.
Mi carpeta para el sitio de colores esta en mis documentos en una carpeta llamada ejemplo,
entonces me pregunta si queremos guardar la imagen del gato que está en otra carpeta
fuera de ejemplo, y le digo que SI. De esta manera nunca me voy a confundir y siempre mis
vínculos van a funcionar. POR ESO REPITO: DEFINIR EL SITIO ES LO MÁS IMPORTANTE.

Podemos ver como agregué la carpeta imagenes.

Y vemos aquí como lo llamo gato.jpg (respeten obviamente la extensión) y lo guardo dentro
de la carpeta imagenes en la carpeta ejemplo.
Donde coloco el cursor, coloco la imagen:
Observen que la barra de propiedades nos está mostrando las ropiedades de la imagen,
cuanto pesa, cual es la ruta de la misma (Src), el alto y el ancho.
Para la próxima entrega practiquen lo siguiente:

o DEFINIR SITIOS
o INSERTAR PARRAFOS Y TEXTOS CON FORMATOS DIFERENTES.
o INSERTAR IMÁGENES.

Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. Allí encontrarás
otros que también saben y aprenden.

CAPITULO 3. LAS TABLAS

En esta clase, vamos a tratar un tema que no hemos abordado que es TABLAS y CAPAS.
Comencemos por Tablas, vamos a la barra común de herramientas y seleccionamos el
siguiente ícono.

Nos aparece la siguiente ventana:

Si alguna vez han utilizado el Microsoft Word, nos encontramos con la misma lógica, nos
pide:

• Cuántas Rows o Filas.

• Cuántas columnas o Columns.
• En pixel o porcentaje que ancho tiene que tener la tabla.
• Si deseamos que se vea el borde con relieve, que tamaño.
• Cell Padding: tamaño mínimo de pixels de la celda.
• Cell Spacing: tamaño en pixels de separación entre las celdas.

Cuando le damos ok o aceptar nos aparece la tabla en el html:

 • Podemos observar en la barra de propiedades, que también podemos modificar la
cantidad de columnas, de filas, el tamaño de altura y anchura, el espacio entre celdas
y el tamaño de las celdas.
• Algo que se agrega en estas propiedades es el tema de alineación de la tabla con
respecto al html, podemos elegir, derecha, centro o izquierda como esta desplegado
en la imagen de arriba.
• Se le puede agregar nombre a la tabla (Table ID).
• Color de fondo de tabla.
• Color de borde de la tabla.
• Fondo con una imagen en vez de color para la tabla.
• Ajustar automaticamente borrando sobrantes en blanco de espacio a lo ancho o a lo
alto de toda la tabla. (íconos por debajo del Table ID), ver en la imagen de arriba.

Comencemos a personalizar nuestra tabla:

• Copien en un html las propiedades de color que les muestro para comenzar a darse
cuenta los cambios que pueden realizar en la tabla misma.
• Ahora fíjense en la muestra abajo, hacemos click en una de las celdas, y la barra de
propiedades va a cambiar, nos muestra las propiedades de la CELDA no de la tabla.
• A su vez, podemos sumarle las propiedades de la celda a las propiedades de la tabla.
• Seleccioné todas las celdas con un "barrido" y le di los colores, como pueden ver en
la imagen.
• También le dí un color al borde de las celdas.
• Fíjense que pueden colocar en vez de color de celda, un Bg, una imagen de fondo a la
CELDA y no a la tabla.
 • Dentro de las celdas podemos trabajar como áreas de trabajo independientes, en las
tres primeras celdas superiores, escribí texto en forma normal, seteándolas por la
barra de herramientas y en la celda del medio como pueden observar inserté una
imagen como lo hacemos habitualmente en un html.

Las tablas son muy utilizadas para ORGANIZAR nuestro contenido dentro de un html.

CAPITULO 3. LAS CAPAS

Ahora hablemos de CAPAS.

• Las capas tienen su buen uso para DHTML, es decir, HTML dinámico, pero también las
podemos usar para la organización del html, ustedes seleccionen el ícono capa que se
encuentra al lado derecho del ícono tabla.
• Una vez seleccionado, dibujamos el tamaño de la capa, una capa nos sirve como
concepto básico para colocar cualquier objeto como texto, imagen, tabla, etc, dentro
del html en la ubicación que nos guste sin estar sujetos al editor de texto.
• Dentro de la capa dibujada insertamos una imagen.

• Vean que en el top de la capa, es decir margen superior izquierdo, tenemos un

cuadradito, desde ahí con el mouse podemos mover a donde queremos la capa con
todo lo que contenga por todo el html.
• Sigo agregando capas con texto y más imágenes como pueden ver en el ejemplo y
colocar las capas como deseen, NO SUPERPONGAN, porque sino luego no podemos
convertir a una gran tabla esta disposición de elementos.
Ustedes se preguntarán: ¿porqué esto no lo podemos dejar con las capas y listo?, la
respuesta es simple, no todos los navegadores de los usuarios de internet en el
mundo tienen todo actualizado, todavía tenemos versiones 4 o inferiores y no todos los
navegadores, como el Netscape, por ejemplo, en versiones viejas reconocen la ubicación
precisa de las capas. Si las lee, pero no su ubicación, vuelvo a repetir, entonces para no
tener inconvenientes, directamente, convertimos todo a una gran tabla y listo, nos
aseguramos de esa manera que todos van a poder visualizar tranquilamente nuestro html.
Bajar archivo con imágenes
Veamos un ejemplo.

• Una vez que agregamos las capas necesarias y las ubicamos como deseamos, vamos
al menú modificar > convertir > y seleccionamos lo siguiente: CAPAS A TABLAS.

• Nos aparece la siguiente ventana:

 • Aca estoy pidiendo lo más preciso posible, si le pido Center on Page, corro todo al
centro y si en realidad estoy colocando todo tal cual deseo, no conviene.
• Nota: No podemos convertir capas a tabla si se encuentran superpuestas
capas.

Nos puede suceder que al tiempo tenemos que mover algo de lugar y retocar alguna cosilla,
para eso, volvemos al menú modificar, convertir y pedimos lo contrario, convertir la tabla a
capas y de esa manera, arreglamos todo lo necesario y volvemos a pedir que sea una tabla.
Nuestros botones como imágenes de sustitución (rollovers)
Los rollovers son imágenes que al pasar el puntero del mouse

por encima, cambian por otra del mismo tamaño. Éstos pueden ser botones o simples
efectos gráficos de intercambio de imágenes.

• Para crear un rollover, nos posicionamos en el lugar donde queremos insertarlo y

hacemos click sobre el botón Insertar imagen rollover (Insert Rollover Image) en la
barra de herramientas comunes.
• Se abrirá un cuadro de diálogo que nos pedirá un nombre para nuestro rollover y
también que le indiquemos la ubicación de la primera imagen (cuando el mouse no
está encima) y de la segunda imagen (cuando el mouse está encima).
• Tildamos también la opción de pre-carga de las dos imágenes para que el usuario
pueda ver el rollover cuando hayan bajado las dos imágenes.
 • También establecemos una dirección adonde nos llevará el rollover al hacer clic.
Pulsamos aceptar. (No siempre necesario.)
• El texto alternativo es el ALT, es el menú emergente donde nos dice una "ayuda".
Esto lo utilizamos muchas veces para guiar al navegante, o para aquellos, que ponen
en su navegador no bajar imágenes y de esa manera le indica el texto que hay en
esa imagen, entonces, si desea el usuario con botón derecho pide: Mostrar imagen.

Aquí les muestro un ejemplo:

Tengo dos imágenes que deseo intercambiar para el rollover:

Bajar imágenes para rollover.

Esto fue lo que completé:

Y este es el resultado:

Reglas

• Si necesitamos ayuda para ubicar los elementos en nuestra página, podemos utilizar
una regla en el borde superior y otra el lado izquierdo de la página.
 • Para mostrarla debemos ir a Ver > Reglas > Mostrar.

Grilla
También podemos hacer aparecer una grilla para guiarnos en el diseño de nuestra página.
Para ello debemos ir a Ver > Grilla > Mostrar.

• Desde aquí podemos especificarle al programa cada cuantos pixels, pulgadas o

centímetros tendremos las líneas de nuestra grilla, para ello debemos ir a:
Ver > Grilla > Seteos.
• Para que nos resulte más fácil ubicar con respecto a la grilla los objetos que
insertamos en nuestra página, podemos tildar la opción Ajustar a (Snap to) que se
encuentra en Ver > Grilla, de esta forma, las líneas de nuestra grilla adoptarán un
efecto de imán que atraerán los objetos para alinearlos mejor cuando los
incorporemos al espacio de nuestra página.

Configuremos uno o más exploradores para visualizar las páginas.

• Lo primero que vamos a querer hacer después de haber introducido algo de texto en
nuestra página, es ver cómo está quedando. Para ello, pulsamos la tecla F12 o
Control + F12, se abrirá nuestro navegador predeterminado en nuestra máquina.
• Si tuviéramos más de un navegador, podemos indicarle al programa cómo acceder a
él.
• Debemos ir al ícono que se encuentra en la barra común de herramientas que es lo
mismo que ir a Archivo > Previsualización en Navegador> Editar la lista de
navegadores.

• Se abrirá un cuadro de diálogo que nos permitirá agregar navegadores secundarios

para previsualizar.
• El botón Agregar (Add) se utiliza para definir un nuevo navegador.
• El botón Editar (Edit) nos permite cambiar los seteos para el navegador seleccionado.
• El botón Remover (Remove) nos permite quitar de la lista un navegador. Para
previsualizar una página con el navegador secundario debemos oprimir Ctrl F12 o lo
que nos indique ahí mismo en la edición de los navegadores.

Puntos de fijación (Anclas o Anchor)

• Para colocar un enlace a otro punto de la misma página debemos primero colocar un
ancla en el punto de destino del vínculo.
• Ubicamos el cursor en el punto de la página adonde deseamos crear una referencia y
vamos al ícono que tenemos en la barra común de herramientas.
• Introducimos un nombre que represente esta ubicación en la página. Podemos
asignar cualquier nombre, pero es recomendable escoger uno que sea fácil de
recordar cuando se asigne el vínculo que navegará a esta ubicación, cuando hacemos
click en el ícono del ancla, nos aparece la siguiente pantalla:

• De esta forma se introduce un punto de fijación, representado por un pequeño icono

con un ancla. Este icono no se verá luego al visualizar la página en un explorador.
• Si aparece un cartel de advertencia es porque usted tiene seteado su programa para
no mostrar elementos invisibles. Para mostrarlos y poder ver el ancla, deberá ir a:
Ver > Elementos invisibles.

• Una vez creado el ancla podrá linkear a ella desde cualquier otro punto de la página
(texto o gráfico ). Para hacer el vínculo deberemos tipear en el campo Vínculo (Link)
el símbolo numeral seguido del nombre del ancla al que queremos linkear. Por
ejemplo #texto.
• Si desea poner un vínculo aun punto de fijación que se encuentra en otra página, lo
que deberá hacer es escribir # y el nombre del ancla luego del nombre de la página
adónde se encuentra dicho ancla. Por ej. : prueba.html#ancla.
• Otra manera de colocar vínculos a anclas es por medio del puntero o mira que
tenemos al lado del campo de vínculo en la barra de propiedades.
 • Lo que hacemos es arrastrar la mira hacia el archivo que deseamos vincular y listo, y
lo mismo esta mira nos sirve para colocar a los html juntos y llegar con la mira hacia
el ancla de la otra página html y vincular automáticamente.

Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. Allí encontrarás
otros que también saben y aprenden.

CAPITULO 4.

Me imagino que deben haber practicado unnnnn montónnn =), los que vamos a hacer a continuación
es aprender a vincular un html con otro, esta acción es lo que nos permite que el usuario cuando esta
en nuestro sitio pueda navegar de acuerdo a lo diseñado por nosotros.

En primer lugar vamos a pensar un organigrama es lo mas adecuado para saber que vamos
a desarrollar, que botones colocar y a donde vamos a dirigir al navegante. Los navegadores
reconocen el index.html como el default.html o el main.html (lo mas usado es el
index.html) como primer página a mostrar, si no existe ninguna con este nombre, no sabe
cual abrir como primera.

Cliente: Vocales

Objetivo: Mostrar al usuario cuales son las vocales del abecedario.

Método: Usar tipografía como gráfico.

Páginas a desarrollar:

• Principal (index.html)
o Menú principal:
 a
 e
 i
 o
 u
 contacto
  Recomiendo
• e (incorporamos una imagen de la letra e)
• i (incorporamos una imagen la letra i acompañado un texto informativo)
• o (incorporamos la imagen de un oso)
• u (incorporamos texto sobre la u, la definición del diccionario)

En las páginas a, e, i, o, u, colocamos un botón para volver a principal y repetimos el

contacto y recomiendo. (En teoría esta todo aprobado por el cliente Vocales)
¡¡¡Entonces manos a la obra!!!
Bajar archivo con imágenes y textos.

i. Realizo la recolección de imágenes, texto (en la teoría lo da el cliente, por eso, en

este caso se las doy yo para que puedan trabajar.)
ii. Defino el sitio en Dreamweaver MX, llamándolo Vocales por ejemplo, no se
olviden este paso es el más importante! con su carpeta correspondiente en
el rígido, para colocar todo el sitio cuando lo vamos desarrollando ahí.
iii. Voy a guardar las paginas a, e, i, o, u y principal y comenzamos por la última
mencionada.
iv. Abrimos la página creada como principal y póngale el fondo que deseen, eso lo dejo
al criterio de ustedes y vamos a crear una barra de navegación por texto por ahora,
lo que aprendar como vincular, lo pueden llevar luego a una imagen, se realiza de la
misma manera.
v. Como pueden observar en el archivo para bajar que les estoy dando todos los
elementos para que puedan rápidamente seguir con este tutorial.
vi. Colocamos en principal la imagen principal y por debajo, colocamos el menú de
navegación. En el título del html podemos colocar por ejemplo: ::: Bienvenidos a la
Página Principal de Vocales :::.
Ver ejemplo.
vii. Ahora, vamos a colocar las imágenes en todos los htmls restantes, vean los
ejemplos:
Página A - Página E - Página I - Página O - Página U
viii. Fíjense que para colocar el vínculo a las frases, tenemos que "barrerlas con el mouse"
o seleccionarla como les muestro en el ejemplo y hacen click en la carpeta que tienen
a continuación de Link o Vínculo y ahí le indican donde esta el html que desean abrir
por medio de esa frase.

i.
 ii. Cuando realizan el vínculo para contacto, en link no debemos buscar nada,
directamente escriben: mailto:[email protected].

iii. Cuando les toca la hora de realizar vínculos a otros sitios webs, tengan en cuenta que
uno no desea que el navegante en su navegador mande nuestro sitio hacia la solapa
de "Atrás", por eso preferimos indicarle por medio del target o destino la orden
"_blank" que significa en otro navegador, puden ver en los ejemplos.

iv. Les paso ahora las características que le he dado a los vínculos en las propiedades de
la página para que los vínculos sean del color que pueden observar y miren los
efectos que hacen los vínculos cuando ya fueron tildados y en el momento que tienen
el mouse apretado en el vínculo sin soltar como nos muestra el color seteado.
Para practicar:

• Armar sitios, de colores, mas letras, números, etc.

• Que estén vinculados entre sí y no olvidar un contacto y practicar vincular a un sitio
externo al nuestro y con la opción blank que es la más recomendada.
• Coloquen imágenes, textos, etc.

Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. Allí encontrarás
otros que también saben y aprenden.

CAPITULO 5. Frames o Marcos y formularios, temas que no hay que olvidar.

Marcos

Los marcos están compuestos por dos elementos: el frameset o conjunto de marcos y los
marcos individuales.
El conjunto de marcos contiene información sobre la cantidad de marcos que habrá en la
página, el tamaño, etc.
Este conjunto no se muestra en los navegadores sino que solo contiene la información para
mostrar los marcos.
Los marcos son zonas definidas o áreas de una página HTML.
Cada marco aloja una página Web. Lo que se suele hacer es un marco para la parte de
navegación de la página y otro marco para el contenido.
La ventaja de los marcos es que podemos establecer zonas que siempre serán visibles por
más que el usuario descienda con la barra de desplazamiento de su navegador.
Por ejemplo, podemos hacer que el encabezado de la página con el logo de la empresa
siempre esté visible.

Entonces, una página Web compuesta por dos marcos, en realidad está integrada por tres
archivos individuales: el archivo del conjunto de marcos y dos archivos cuyo contenido es el
que se muestra dentro de los marcos.

Para crear un conjunto de marcos con dos marcos debemos seguir los siguientes pasos:

• Crear un nuevo archivo seleccionando que es con frames o marcos:

• Tenemos para elegir el diseño que mas nos conviene.

• Guardemos todo antes de comenzar, así que vamos al menu archivo o file y pedimos
salvar todo, save all.
• Nos pide con una linea rayadita primero el html que contiene a todos los marcos que
armamos.
• Luego nos pide uno a uno que lo salvemos.
• Para la programación necesitamos colocarle un nombre, una instancia para que luego
lo pueda encontrar cuando vinculemos.
• vamos a Ventana>Otros > Marcos (Window> Other > Frames).
• Se abrirá una ventana con una reproducción de nuestra página de marcos.
• Haremos click en cada una de las zonas dentro de la ventana Marcos (frames) y en el
inspector de propiedades, en el campo Nombre del marco (Frame Name)
 escribiremos un nombre para cada uno de ellos (Por ej: encabezado, botonera,
cuerpo).
• El nombre debe ser una sola palabra y servirá luego para definir el destino de los
vínculos.

• Guardemos los cambios.

• Una vez que está todo guardado podemos comenzar a definir ciertas propiedades
de cada una de las páginas de marcos:

Src: Define la página HTML que se está mostrando en un marco.

Scroll: determina si el navegador le pondrá o no a esa página barras de desplazamiento
cuando no haya lugar suficiente para mostrar todo el contenido. El valor Auto hace que el
navegador solo muestre las barras si es necesario y en muchos navegadores lo tomarán
como auto si dejamos este seteo en Default.
No resize (no redimensionar): No permite al usuario modificar el tamaño de los marcos en
el navegador .
Ancho del margen (Margin Width): establece un margen desde el lateral izquierdo y
derecho (el espacio entre el borde y el contenido del marco ).
Largo del margen: (Margin Height): establece un margen desde el borde superior e inferior
(el espacio entre el borde y el contenido del marco).
Propiedades del conjunto de marcos:
Para establecer el tamaño de los frames y los bordes utilizamos las propiedades de los
conjuntos de marcos.
Las propiedades que podemos configurar para los conjuntos de marcos son las siguientes:
Bordes (Borders): Si queremos que haya bordes alrededor de los marcos cuando veamos la
página en un navegador. Al seleccionar Default dejaremos que el navegador determine la
forma en la que se verán los bordes.
Ancho del borde (Border Width): En caso de haber elegido Si en la opción Bordes, aquí
especificaremos el ancho del mismo.
Border Color: Color del borde.
Por último debemos establecer la medida de cada marco.
Esto se logra haciendo click en cada una de las representaciones de los marcos
que aparecen en el inspector de propiedades y seleccionando un valor en el campo Columna
(Column) o Fila (Row) (dependiendo de cómo hayamos dividido la página). Para conseguir
un resultado óptimo, debemos establecer la medida de uno de los lados (fila o columna) y al
segundo debemos indicarle que su medida será Relativa (Relative) a 1, es decir relativa al
otro. Esta es la mejor manera de definir la medida de los marcos.

Estableciendo vínculos en un conjunto de marcos

Los vínculos que se asignan en los marcos son iguales a cualquier otro vínculo en un archivo
HTML, excepto que cuando estamos trabajando en un conjunto de marcos y queremos
establecer un vínculo, debemos precisar cuál será el marco de destino de dicho vínculo (para
eso le pusimos nombre a los distintos marcos). Al hacer un vínculo debemos entonces
desplegar el campo Destino (Target) y seleccionar en qué marco se mostrará la página.

Veamos el ejemplo de la página de las vocales en frames o marcos.

Bajar archivo del sitio completo en marcos

CAPITULO 6. Frames o Marcos y formularios, temas que no hay que olvidar.

Formularios:

Nos posicionamos en la barra de herramientas, en vez de común seleccionamos formularios.

Luego lo que debemos hacer es hacer click en el primer icono de la paleta formularios
(Insertar formulario), donde deseamos colocar el formulario.
Si luego de esto no vemos ningún cambio es porque no estamos viendo elementos invisibles.

Debemos ir a Ver > Elementos invisibles (View > Invisible elements).

Ahora veremos que se ha creado en nuestra página un recuadro con línea punteada de color
rojo. Todos los elementos de formulario que querramos insertar deberán ir dentro de este
recuadro. Lo primero que debemos hacer es seleccionar el formulario haciendo clic sobre la
línea roja. En el inspector de propiedades veremos las propiedades del formulario.
En el campo Nombre (Form name) escribimos un nombre para nuestro formulario.
En el campo Acción (Action) debemos escribir la ruta completa de la secuencia de comandos
que procesará el contenido del formulario (CGI). Por lo general los proveedores de
alojamiento de páginas Web ya poseen en sus servidores secuencias de comando estándar
para hacer diversas tareas. Debemos consultarlos acerca de la ruta para accederlos y su
utilización. Por convención, los programas CGI se guardan generalmente en una carpeta de
nombre cgi-bin.

En Método (Method) se especifica cómo se manejarán los datos del formulario. Las opciones
son Default (Predeterminado), Get (Obtener) y Post (Publicar). La selección adecuada
dependerá del servidor y de la secuencia de comandos que se esté utilizando. Debemos
consultar esta información a nuestro proveedor de hosting. El método Default utiliza el que
el navegador tenga por omisión que, por lo general, es Post ya que es el sugerido por el
Consorcio W3.

Elementos de formulario Estos son los elementos de formulario que Dreamweaver nos
permite insertar:

(Todos ellos tienen un campo Nombre (Name) que debemos completar)

Campo de texto (TextField): Para que el usuario ingrese texto.

Debemos especificar un largo y, si queremos una cantidad máxima de caracteres que podrá
ingresar el usuario. También debemos indicarle si será de una sola línea o varias y si será un
campo contraseña, en cuyo caso el usuario verá asteriscos. Si lo deseamos, podemos darle
un valor inicial, es decir, un texto para que aparezca inicialmente en ese campo. Por
ejemplo: "escriba su nombre en este campo".

Botón (Button): Sirve para enviar el formulario o reestablecerlo. En general se ponen

debajo de todo. Debemos especificar una etiqueta para el botón (texto que aparecerá sobre
el botón) y si será un botón de enviar o restablecer o no hará nada.

Casilla de verificación (Checkbox): Sirven para que el usuario seleccione varios

elementos. Haciendo clic en una casilla de verificación aparece una tilde de selección.
Nosotros debemos configurar el estado inicial (tildado o no tildado) y qué valor le
enviará al servidor en caso de que el usuario lo tilde. Por ejemplo: SI.
Botones de opción (Radio Buttons): Estos botones le permiten elegir al usuario UNA
entre varias opciones. Debemos darle el mismo nombre a todos los que formen parte de un
grupo de opciones. Por ejemplo, en una selección Rojo, verde o azul tendremos tres botones
de opción y los tres se llamaran "color" para que el programa luego lo
interprete correctamente y no deje que el usuario tilde más de uno.
Debemos indicar el estado inicial (tildado o no) y el valor que le enviará cada uno al servidor
en caso de estar tildado (Por ejemplo: rojo ).

Lista/MenÚ (List/Menu): Este campo nos permite crear una lista desplegable o un menú.
Debemos definir si será lista o menú e indicarle qué opciones ofrecerá al usuario (listado).

Campo de archivo (File Field): Para que el usuario pueda adjuntar un archivo al
formulario. Debemos darle un largo al campo y, si lo deseamos, una cantidad máxima de
caracteres y un estado inicial.

Campo de imagen (Image): Para insertar una imagen que actúe como botón enviar.
Debemos proporcionar un texto alternativo para quienes no puedan ver imágenes
(navegadores solo texto).

Campo oculto (Hidden field): Algunas secuencias de comandos CGI requieren que le
enviemos valores en campos ocultos ya que el usuario no tiene por qué verlos. Por ejemplo,
existen CGI para enviar el contenido de un formulario a una dirección de e-mail, que
requieren que le enviemos en un campo oculto la dirección a la cual deberá ir ese e-mail.

Menú "saltar" (Jump menu): Este tipo de menú desplegable, permite elegir entre
opciones que nos llevarán a otra página o archivo. Se pueden crear enlaces a páginas en
nuestro sitio, a páginas en otro sitio, a archivos, a imágenes, a direcciones de correo O a
cualquier archivo que se pueda abrir en un navegador. Debemos elegir una
instrucción o categoría, por ejemplo: "Ir a" o "Adonde quiere ir", un botón IR y un listado de
opciones con sus URL's.

Ver ejemplo de formulario

Ver ejemplo de formulario funcionando.

Bajar archivo de formulario.

Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. Allí encontrarás
otros que también saben y aprenden.