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:elemail@deustedes.com.

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 marcosque 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 lointerprete 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 unainstrucció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.