CAPITULO 1. UN VISTAZO A DREAMWEAVER. Hola y bienvenidos.

Vamos a ensearles a utilizar a nivel bsico e integral Macromedia Dreamweaver MX, que como todos saben, es un editor grfico 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 opcin podemos elegir ventanas acopladas o sueltas, como en la versin 4, y si elegimos la opcin 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 prctica esta opcin a partir de esta version. Ni dudarlo. Vamos a hacer click en la herramienta EDIT y seleccionamos la opcin PREFERENCIAS.

Como pueden ver, tenemos muchas categoras, 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 categora General que es la que les estoy mostrando, que nos da para tildar, si queremos, la opcin 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 categora, uno puede poner el mximo nmero de pasos o lneas 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 versin anterior) y elegir qu tipo de diccionario queremos para la correccin de texto. Si hacemos click en el botn, 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 2. MIRANDO LAS NUEVAS DIFERENCIAS Esta es la misma de la versin anterior, y tenemos que tener en cuenta que la bsica que es la otra solapa que pueden ver en el grfico de arriba, es con ayuda, ah nos pregunta paso por paso: Nombre del Sitio Carpeta de ubicacin en nuestro rgido Si utilizamos tecnologa (php, asp, etc.) Pero en este caso, utilizaremos el avanzado: Donde dice Site Name colocaremos, como dice el grfico, el nombre con el cual luego nosotros identificaremos al site, de varios que podemos tener a la vez para disear. 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 disear, es decir, en una carpeta que vamos a destinar. Daremos por tildado las dos casillas que nos da por opcin y le damos OK. El tilde del cache sirve para que mantenga todo en forma automtica 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 disear, 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 pgina online. En resumen, les quiero decir que si tenemos todo disperso por cualquier parte de nuestro rgido, el mismo programa ya nos va a pedir que coloquemos todo en un mismo lado. Entonces vamos a colocar como est en el grfico 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. Tambin 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 subiramos nuestro sitio, pero no se preocupen si no tienen ninguno, ya que esta opcin se puede tranquilamente setear en cualquier momento del desarrollo y armado de nuestro sitio web.

En esta imagen vemos con ms claridad las opciones de nuestra ventana sitio:

"...Nota: Los botones Archivos del sitio, Servidor de prueba y Mapa del sitio slo 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 ms de 30 minutos (slo FTP). Actualizar actualiza las listas de los directorios local y remoto. Utilice este botn para actualizar manualmente las listas de directorios si ha desactivado las opciones Actualizar lista de archivos locales automticamente o Actualizar lista de archivos remotos automticamente, en el cuadro de dilogo Definicin del sitio (consulte Configuracin 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 opcin Permitir desproteger y proteger archivo, las copias locales sern de slo lectura. Los archivos permanecern disponibles en el sitio remoto para que otros miembros del equipo puedan protegerlos. Si est desactivada la opcin 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 estn 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 slo 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 estn 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 desproteccin y proteccin slo puede utilizarse con los archivos remotos. Si coloca un archivo que an no existe en el sitio remoto y est activada la opcin Permitir desproteger y proteger archivo, Dreamweaver aadir el archivo al sitio remoto como protegido. Haga clic en el botn Desproteger para aadir 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 opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual en el cuadro de dilogo Definicin 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 slo lectura. Esta opcin no est disponible si est desactivada la opcin Permitir desproteger y proteger archivo para el sitio actual en el cuadro de dilogo Definicin del sitio. El botn expandir o colapsar (slo Windows) ampla o contrae el panel Sitio para mostrar uno o dos paneles... " (texto extrado de la ayuda en espaol del Dream MX)
Bien, entonces una vez ya seteado nuestro sitio de colores, vamos al men archivo y nuevo (control + N).

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 tecnologa asp o php por ejemplo. Se nos abrir la siguiente pantalla:

Como pueden ver aqu nos presenta una ventana dndonos opciones a elegir: html, una plantilla o template de html (un html ya predefinido), un item de librera, un estilo (css), un archivo javascript

o un archivo xml. Nosotros nos vamos a dedicar a una pgina bsica HTML, presionamos luego el botn CREAR o CREATE. Bien! ahora tenemos nuestro primer archivo HTML:

Como dije en el principio esto es un editor grfico de html, por defecto tenemos el cursor listo para escribir lo que tengamos que colocar: en la barra de propiedades vemos las caractersticas del texto, su tamao, color, su alineacin, si tiene un formato definido como ttulo, (pensemos como si fuera Word), para generar listas con vietas, con nmeros, y distancia de la lista para darle el diseo deseado (el tema lista lo veremos ms adelante). En la parte blanca de nuestro archivo html pidamos el men contextual con el botn derecho del mouse o ir al men Modificar o Modify y seleccionar Page Properties, o Propiedades de pgina o simplemente con Control + J y se les va a presentar la siguiente pantalla: Como pueden ver ac tambin tenemos la posibilidad de colocar el ttulo a la pgina que no tiene nada que ver con el nombre del archivo, (invito a aquellos que no tengan muy claro el cdigo html a realizar los cursos gratuitos que damos de HTML). Luego tenemos la opcin de colocar dos tipos de fondos de pgina, un color o una imgen. A continuacin vemos cuatro casilleros con una seleccin de color para cada uno: Texto: texto, contenido sin vnculo, sin link. Vnculo: texto vinculado, que nos llega a otro sitio o a otro html de nuestro sitio. Vnculo visitado: texto vinculado pero ya cargado en el cache, es decir luego de haberlo activado y visitado. Vnculo activo: Momento en que el usuario hace click y no suelta la presin 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 lneas como les muestro a continuacin:

Pueden ver como despliego la lista de tipografas para seleccionar la que deseo, tengan en cuenta que HTML utiliza las fuentes de los usuarios, si utilizamos una tipografa media rara vamos a tener inconvenientes porque si no la tienen instalada la va a cambiar por la que tenga predeterminada en su mquina. Por eso tenemos que tener en cuenta que si utilizamos una tipografa decorativa o extraa, debe estar como imagen y no como fuente de html as todos la pueden ver. El tamao de la tipografia se mide en cdigo html, del 1 al 7 y cuando dice - +1 por ejemplo significa que del tamao PREDETERMINADO del usuario en su navegador agregue (+) o saque (-) un (1) tamao del predeterminado por el usuario en esa mquina, por eso siempre es ACONSEJABLE, determinar el color, tamao y fuente y no dejar nada por PREDETERMINADO para que el diseo de mi sitio se vea tal cual uno desea que se vea. Cuando escribimos un prrafo y deseamos tener un DOBLE INTERLINEADO como si fuera cambio de prrafo presionen LA TECLA ENTER. Si desean hacer un salto de rengn pero no de prrafo es decir un SIMPLE INTERLINEADO presionen SHIF + ENTER. En la barra de herramientas comn tenemos las siguientes opciones:

De izquierda a derecha: Insertar vnculo Insertar vnculo a una direccin 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 sustitucin o rollover Insertar una barra de navegacin Insertar una lnea horizontal Insertar fecha Insertar una tabla de datos (de Excel por ejemplo) Insertar un comentario para el cdigo HTML Cambiar un tag de programacin 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 tpica ventana de guardar que ya conocemos todos:

A nuestra primer pgina la vamos a guardar como index.html, tenemos que tener en cuenta que los navegadores reconocen a index como la primer pgina a mostrar para comenzar a navegar un sitio web. Bien continuemos (pueden ir a tomar un vaso de agua y volver rpido!), al texto que estamos escribiendo vamos a darle diferente formatos, diferentes tipografas, tamaos, 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 imgenes 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 vnculos van a funcionar. POR ESO REPITO: DEFINIR EL SITIO ES LO MS IMPORTANTE.

Podemos ver como agregu la carpeta imagenes.

Y vemos aqu como lo llamo gato.jpg (respeten obviamente la extensin) 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.

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 comn 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 lgica, nos pide: Cuntas Rows o Filas. Cuntas columnas o Columns. En pixel o porcentaje que ancho tiene que tener la tabla. Si deseamos que se vea el borde con relieve, que tamao. Cell Padding: tamao mnimo de pixels de la celda. Cell Spacing: tamao en pixels de separacin entre las celdas. Cuando le damos ok o aceptar nos aparece la tabla en el html:

Podemos observar en la barra de propiedades, que tambin podemos modificar la cantidad de columnas, de filas, el tamao de altura y anchura, el espacio entre celdas y el tamao de las celdas. Algo que se agrega en estas propiedades es el tema de alineacin 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 fjense 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.

Dentro de las celdas podemos trabajar como reas de trabajo independientes, en las tres primeras celdas superiores, escrib texto en forma normal, setendolas 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

LAS CAPAS Las capas tienen su buen uso para DHTML, es decir, HTML dinmico, pero tambin las podemos usar para la organizacin del html, ustedes seleccionen el cono capa que se encuentra al lado derecho del cono tabla. Una vez seleccionado, dibujamos el tamao de la capa, una capa nos sirve como concepto bsico para colocar cualquier objeto como texto, imagen, tabla, etc, dentro del html en la ubicacin 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 ms imgenes 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 disposicin de elementos.

Ustedes se preguntarn: 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, todava tenemos versiones 4 o inferiores y no todos los navegadores, como el Netscape, por ejemplo, en versiones viejas reconocen la ubicacin precisa de las capas. Si las lee, pero no su ubicacin, 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 imgenes 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 ms 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 imgenes de sustitucin (rollovers)

Los rollovers son imgenes que al pasar el puntero del mouse por encima, cambian por otra del mismo tamao. stos pueden ser botones o simples efectos grficos de intercambio de imgenes. Para crear un rollover, nos posicionamos en el lugar donde queremos insertarlo y hacemos click sobre el botn Insertar imagen rollover (Insert Rollover Image) en la barra de herramientas comunes. Se abrir un cuadro de dilogo que nos pedir un nombre para nuestro rollover y tambin que le indiquemos la ubicacin de la primera imagen (cuando el mouse no est encima) y de la segunda imagen (cuando el mouse est encima). Tildamos tambin la opcin de pre-carga de las dos imgenes para que el usuario pueda ver el rollover cuando hayan bajado las dos imgenes. Tambin establecemos una direccin 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 imgenes y de esa manera le indica el texto que hay en esa imagen, entonces, si desea el usuario con botn derecho pide: Mostrar imagen.

Aqu les muestro un ejemplo: Tengo dos imgenes que deseo intercambiar para el rollover:

Bajar imgenes para rollover. Esto fue lo que complet:

y este es el resultado:

Reglas Si necesitamos ayuda para ubicar los elementos en nuestra pgina, podemos utilizar una regla en el borde superior y otra el lado izquierdo de la pgina. Para mostrarla debemos ir a Ver > Reglas > Mostrar. Grilla Tambin podemos hacer aparecer una grilla para guiarnos en el diseo de nuestra pgina. Para ello debemos ir a Ver > Grilla > Mostrar. Desde aqu podemos especificarle al programa cada cuantos pixels, pulgadas o centmetros tendremos las lneas de nuestra grilla, para ello debemos ir a: Ver > Grilla > Seteos. Para que nos resulte ms fcil ubicar con respecto a la grilla los objetos que insertamos en nuestra pgina, podemos tildar la opcin Ajustar a (Snap to) que se encuentra en Ver > Grilla, de esta forma, las lneas de nuestra grilla adoptarn un efecto de imn que atraern los objetos para alinearlos mejor cuando los incorporemos al espacio de nuestra pgina. Configuremos uno o ms exploradores para visualizar las pginas. Lo primero que vamos a querer hacer despus de haber introducido algo de texto en nuestra pgina, es ver cmo est quedando. Para ello, pulsamos la tecla F12 o Control + F12, se abrir nuestro navegador predeterminado en nuestra mquina. Si tuviramos ms de un navegador, podemos indicarle al programa cmo acceder a l. Debemos ir al cono que se encuentra en la barra comn de herramientas que es lo mismo que ir a Archivo > Previsualizacin en Navegador> Editar la lista de navegadores

Se abrir un cuadro de dilogo que nos permitir agregar navegadores secundarios para previsualizar. El botn Agregar (Add) se utiliza para definir un nuevo navegador. El botn Editar (Edit) nos permite cambiar los seteos para el navegador seleccionado. El botn Remover (Remove) nos permite quitar de la lista un navegador. Para previsualizar una pgina con el navegador secundario debemos oprimir Ctrl F12 o lo que nos indique ah mismo en la edicin de los navegadores. Puntos de fijacin (Anclas o Anchor) Para colocar un enlace a otro punto de la misma pgina debemos primero colocar un ancla en el punto de destino del vnculo. Ubicamos el cursor en el punto de la pgina adonde deseamos crear una referencia y vamos al cono que tenemos en la barra comn de herramientas.

Introducimos un nombre que represente esta ubicacin en la pgina. Podemos asignar cualquier nombre, pero es recomendable escoger uno que sea fcil de recordar cuando se asigne el vnculo que navegar a esta ubicacin, cuando hacemos click en el cono del ancla, nos aparece la siguiente pantalla:

De esta forma se introduce un punto de fijacin, representado por un pequeo icono con un ancla. Este icono no se ver luego al visualizar la pgina 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 pgina (texto o grfico ). Para hacer el vnculo deberemos tipear en el campo Vnculo (Link) el smbolo numeral seguido del nombre del ancla al que queremos linkear. Por ejemplo #texto.

Si desea poner un vnculo aun punto de fijacin que se encuentra en otra pgina, lo que deber hacer es escribir # y el nombre del ancla luego del nombre de la pgina adnde se encuentra dicho ancla. Por ej. : prueba.html#ancla. Otra manera de colocar vnculos a anclas es por medio del puntero o mira que tenemos al lado del campo de vnculo 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 pgina html y vincular automticamente.

CAPITULO 4.

HIPERVINCULOS
Lo que vamos a hacer a continuacin es aprender a vincular un html con otro, esta accin es lo que nos permite que el usuario cuando esta en nuestro sitio pueda navegar de acuerdo a lo diseado 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 pgina 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. Mtodo: Usar tipografa como grfico. Pginas a desarrollar:

Principal (index.html) Men principal: a e i o u contacto Recomiendo e (incorporamos una imagen de la letra e) i (incorporamos una imagen la letra i acompaado un texto informativo) o (incorporamos la imagen de un oso) u (incorporamos texto sobre la u, la definicin del diccionario) En las pginas a, e, i, o, u, colocamos un botn para volver a principal y repetimos el contacto y recomiendo. (En teora esta todo aprobado por el cliente Vocales) Entonces manos a la obra!!! Bajar archivo con imgenes y textos. Realizo la recoleccin de imgenes, texto (en la teora lo da el cliente, por eso, en este caso se las doy yo para que puedan trabajar.) Defino el sitio en Dreamweaver MX, llamndolo Vocales por ejemplo, no se olviden este paso es el ms importante! con su carpeta correspondiente en el rgido, para colocar todo el sitio cuando lo vamos desarrollando ah. Voy a guardar las paginas a, e, i, o, u y principal y comenzamos por la ltima mencionada. Abrimos la pgina creada como principal y pngale el fondo que deseen, eso lo dejo al criterio de ustedes y vamos a crear una barra de navegacin por texto por ahora, lo que aprendar como vincular, lo pueden llevar luego a una imagen, se realiza de la misma manera. Como pueden observar en el archivo para bajar que les estoy dando todos los elementos para que puedan rpidamente seguir con este tutorial. Colocamos en principal la imagen principal y por debajo, colocamos el men de navegacin. En el ttulo del html podemos colocar por ejemplo: ::: Bienvenidos a la Pgina Principal de Vocales :::. Ver ejemplo. Ahora, vamos a colocar las imgenes en todos los htmls restantes, vean los ejemplos:

Pgina A - Pgina E - Pgina I - Pgina O - Pgina U i. Fjense que para colocar el vnculo 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 continuacin de Link o Vnculo y ah le indican donde esta el html que desean abrir por medio de esa frase.

Cuando realizan el vnculo para contacto, en link no debemos buscar nada, directamente escriben: mailto:elemail@deustedes.com.

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

Les paso ahora las caractersticas que le he dado a los vnculos en las propiedades de la pgina para que los vnculos sean del color que pueden observar y miren los efectos que hacen los vnculos cuando ya fueron tildados y en el momento que tienen el mouse apretado en el vnculo sin soltar como nos muestra el color seteado.

Para practicar: Armar sitios, de colores, mas letras, nmeros, etc. Que estn vinculados entre s y no olvidar un contacto y practicar vincular a un sitio externo al nuestro y con la opcin blank que es la ms recomendada. Coloquen imgenes, textos, etc. Recuerda que si tienes alguna duda, puedes acudir al foro de nuestro sitio. All encontrars otros que tambin saben y aprenden.

CAPITULO 5. Frames o Marcos Los marcos estn compuestos por dos elementos: el frameset o conjunto de marcos y los marcos individuales. El conjunto de marcos contiene informacin sobre la cantidad de marcos que habr en la pgina, el tamao, etc. Este conjunto no se muestra en los navegadores sino que solo contiene la informacin para mostrar los marcos. Los marcos son zonas definidas o reas de una pgina HTML. Cada marco aloja una pgina Web. Lo que se suele hacer es un marco para la parte de navegacin de la pgina y otro marco para el contenido. La ventaja de los marcos es que podemos establecer zonas que siempre sern visibles por ms que el usuario descienda con la barra de desplazamiento de su navegador. Por ejemplo, podemos hacer que el encabezado de la pgina con el logo de la empresa siempre est visible. Entonces, una pgina 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 diseo 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 programacin 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 reproduccin de nuestra pgina 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 vnculos.

Guardemos los cambios. Una vez que est todo guardado podemos comenzar a definir ciertas propiedades de cada una de las pginas 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 pgina en un navegador. Al seleccionar Default dejaremos que el navegador determine la forma en la que se vern los bordes. Ancho del borde (Border Width): En caso de haber elegido Si en la opcin 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 cmo hayamos dividido la pgina). 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 vnculos en un conjunto de marcos Los vnculos que se asignan en los marcos son iguales a cualquier otro vnculo en un archivo HTML, excepto que cuando estamos trabajando en un conjunto de marcos y queremos establecer un vnculo, debemos precisar cul ser el marco de destino de dicho vnculo (para eso le pusimos nombre a los distintos marcos). Al hacer un vnculo debemos entonces desplegar el campo Destino (Target) y seleccionar en qu marco se mostrar la pgina.

CAPITULO 6. FORMULARIOS Nos posicionamos en la barra de herramientas, en vez de comn 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 ningn 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 pgina un recuadro con lnea punteada de color rojo. Todos los elementos de formulario que querramos insertar debern ir dentro de este recuadro. Lo primero que debemos hacer es seleccionar el formulario haciendo clic sobre la lnea 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 Accin (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 pginas Web ya poseen en sus servidores secuencias de comando estndar para hacer diversas tareas. Debemos consultarlos acerca de la ruta para accederlos y su utilizacin. Por convencin, los programas CGI se guardan generalmente en una carpeta de nombre cgi-bin. En Mtodo (Method) se especifica cmo se manejarn los datos del formulario. Las opciones son Default (Predeterminado), Get (Obtener) y Post (Publicar). La seleccin adecuada depender del servidor y de la secuencia de comandos que se est utilizando. Debemos consultar esta informacin a nuestro proveedor de hosting. El mtodo Default utiliza el que el navegador tenga por omisin 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 mxima de caracteres que podr ingresar el usuario. Tambin debemos indicarle si ser de una sola lnea o varias y si ser un campo contrasea, 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". Botn (Button): Sirve para enviar el formulario o reestablecerlo. En general se ponen debajo de todo. Debemos especificar una etiqueta para el botn (texto que aparecer sobre el botn) y si ser un botn de enviar o restablecer o no har nada. Casilla de verificacin (Checkbox): Sirven para que el usuario seleccione varios elementos. Haciendo clic en una casilla de verificacin aparece una tilde de seleccin. 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 opcin (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 seleccin Rojo, verde o azul tendremos tres botones de opcin y los tres se llamaran "color" para que el programa luego lo interprete correctamente y no deje que el usuario tilde ms 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 mxima de caracteres y un estado inicial. Campo de imagen (Image): Para insertar una imagen que acte como botn enviar. Debemos proporcionar un texto alternativo para quienes no puedan ver imgenes (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 direccin de e-mail, que requieren que le enviemos en un campo oculto la direccin a la cual deber ir ese e-mail. Men "saltar" (Jump menu): Este tipo de men desplegable, permite elegir entre opciones que nos llevarn a otra pgina o archivo. Se pueden crear enlaces a pginas en nuestro sitio, a pginas en otro sitio, a archivos, a imgenes, a direcciones de correo O a cualquier archivo que se pueda abrir en un navegador. Debemos elegir una instruccin o categora, por ejemplo: "Ir a" o "Adonde quiere ir", un botn IR y un listado de opciones con sus URL's. Ver ejemplo de formulario funcionando. Bajar archivo de formulario.