- PRODUCTO NUEVO - PRODUCTO NUEVO -
VIDEO TUTORIAL DE DISEÑO WEB EN DVD
Videos originales a precios económicos
|
© 2007 - 2008 www. Ceinfor.net Todos los derechos reservados.
|
Los CURSOS en DVD son una manera sencilla y
visual de aprender sin esfuerzo, cómodamente,
desde el reproductor de DVD de su PC.
Nuestros videos tutoriales están creados por profesionales con alto conocimiento
en el Diseño
de Páginas Web, los videos están grabados en el formato de
windows media, para que el estudiante lo pueda utilizar
desde el primer
Momento
y con suma facilidad.
Con esta herramienta usted podrá crear páginas web en cuestión de semanas. |
FIREWORKS - DREAMWEAVER - FLASH
QUITO - MANTA - GUAYAQUIL
Envíos para todo el Ecuador y Latinoamérica por DHL
 
CLIC AQUÍ PARA MÁS INFORMACIÓN
CURSO GRATUITO DE MACROMEDIA DREAMWEAVER EN QUITO
- ECUADOR
LECCIÓN 1
Recomendaciones.-
Todos los nombres de documentos y carpetas que se creen a partir de este tutorial se escribirán con minúsculas y sin espacios, tildes, comas o guiones.
En Opciones de carpeta, Ver, debemos desactivar Ocultar las extensiones de archivo.
Pasos Preliminares.-
Vamos a crear una carpeta en el disco local “C” con el nombre “cursodreamweaver”.
Dentro de esta carpeta creamos otra carpeta con el nombre “leccion1”.
Mi Primera página HTML.-
Crear un documento de texto con el nombre “primera”. Abrimos el documento con un editor de texto y escribimos lo siguiente:
hola.
Guardamos los cambios y cerramos el documente. Ahora cambiamos la extensión “txt” por “html” y revisamos el documento en un navegador.
Código fuente.-
El código fuente es el contenido mismo de la página web. Es el ADN de la página.
Etiquetas.-
Las etiquetas son parte fundamental del código fuente. Son las partes de las que se conforma el lenguaje HTML. Se caracterizan por estar entre “<>”. Los navegadores tienen predefinidas las etiquetas, las reconoce y luego las interpretan. Los párrafos, el cuerpo del documento, las tablas, etc son etiquetas.
Ejemplo:
En nuestra primera página utilizaremos la etiqueta <br>
hola.<br>
Este es un salto de linea.
Estructura de una página HTML
Una página html está conformada por una estructura en etiquetas determinada y es la siguiente:
<html>
<helad>
Esta es la parte de la página web no visible.
Aquí se encuentran los metatags, el título del documento y la programación java. Esto no es visible en el navegador.
</helad>
<body>
Este es el cuerpo del documento, la parte que el navegador muestra. Imágenes, texto, colores, etc.
</body>
</html>
Ejercicio.- Crear un documento de texto con el nombre “segunda” y realizar la estructura anterior.
APRENDE CON NUESTRO CURSO DE MACROMEDIA DREAMWEAVER EN QUITO - ECUADOR
LECCIÓN 2
Etiquetas, estilos y clases .-
Cada etiqueta tiene características específicas y pueden contener a otras etiquetas.
Cada etiqueta que se abre para contener a otra etiqueta, debe cerrarse en el orden inverso de cómo se abrió.
<p><i><b> </i></b></p>
Ejercicio.- Abrir un documento de texto con el nombre “tercera” y escribimos el siguiente código:
<p>Este es un párrafo</p>
<p><b>Este es otro párrafo con negritas</b></p>
<p><b><i>Este es otro parrafo con negritas y subrayado</i></b></p>
<p><i><b>Este es otro parrafo con negritas y subrayado pero tiene un error</i></b></p>
Ejercicio.- Abrir un documento de texto con el nombre “cuarta” y escribimos el siguiente código:
<p align="center">Este es un parrafo alineado al centro</p>
En este ejemplo vemos como la etiqueta párrafo admite el estilo o característica align="center"
Ejercicio.- Abrir un documento de texto con el nombre “quinta” y escribimos el código siguiente, dentro de una estructura HTML.
<html>
<head>
<title>Mi quinta</title>
</head>
<body>
<p><font color="#000066">Este es un parrafo azul </font></p>
<p><font size="24">Este es un parrafo de letra 24 </font></p>
<p><font size="24" color="#003300" face="Arial">Este es un parrafo de letra 24, verde y Arial</font></p>
<p><b><font size="24" color="#003300" face="Arial">Este es un parrafo de letra 24, verde, Arial y bold</font></b></p>
</body>
</html>
Notas importantes: Color en la web. Tamaño de la fuente.
Ejercicio de evaluación.-
Crear un documento con las pautas anteriores.
LECCIÓN 3
Dreamweaver.
Este programa nos permite trabajar sobre la parte gráfica o el código fuente. No es necesario conocer a profundidad el código fuente pero es necesario entender las características de su estructura.
Nuevo documento.
Vamos a trabajar en páginas básicas HTML.
Archivo/ Nuevo/ General/ Basic Page/ HTML – Generar
Tenemos tres formas de visualizar la página: solo en código fuente, solo en modo gráfico o las dos formas a la vez. Esta última es la recomendada.
Vamos a Modificar/ Propiedades de Página y encontramos lo siguiente:
Es importante tomar esta primera referencia para la construcción de nuestro sitio web.
Directorios.-
En este tutorial vamos a mostrar una forma de organizar los documentos HTML e imágenes para un mejor control de nuestro sitio. No es mandatorio, si se tiene otro tipo de diseño de directorios que a usted le convenga puede hacerlo.
- Crear una carpeta de nombre wwwnombredelsitio.
- Dentro de esta carpeta crear carpetas para cada grupo de archivos. “imágenes”, “swf”, “html”.
- La primera pagina del sitio debe estar en el mismo nivel de las carpetas de archivos y tiene que llamarse “INDEX”.
- No importa la extensión que escoja para sus documentos HTML. Pueden ser *.html o *.htm.
Nota: Poner los nombres de los documentos y carpetas con minúsculas, sin tildes ni signos de puntuación y sin espacios.
wwwnombredelsitio
Index.html
Imágenes
html
swf
LECCIÓN 4
Tablas.
El HTML es cuadrado. Esto puede ser un impedimento para el diseñador gráfico, pero a la larga esta herramienta es la que nos permite definir espacios específicos en nuestra página y estructura ordenadamente los contenidos. Hay que pensar en función del visitante, para este debe ser un sitio amigable y de acceso rápido.
Celdas, filas y columnas.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Este es el código de una página de dos filas y tres columnas. Tiene un ancho al 100% del monitor, un borde de 0 px, espacio entre celdas de 0 px y paspartú de 0 px.
Si multiplicamos el número de filas por el de columnas, tendremos la cantidad de celdas de nuestra tabla. En este caso seis celdas.
Para crear una tabla ingresamos en insertar/ tabla.
Barra de Propiedades.-
Esta herramienta será una constante en todo lo que realicemos en nuestro sitio web.
La particularidad de este panel es que cambia según lo que estemos utilizando. Si son tablas las propiedades serán de tablas, si es texto de texto, etc.
Hay posibilidad de anidar tablas dentro de una celda, abrir divisiones de celda o aumentar el número de filas o columnas dependiendo las necesidades.
A continuación una tabla que en una de sus celdas anida otra tabla:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
Ejercicio.- Crear una estructura de una página web con tablas.
Seleccionar elementos de una tabla.-
LECCIÓN 5
Texto, Características particulares..-
Es importante para el texto tener en la etiqueta “head” la siguiente línea:
<head>
<title>Nombre del documento</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
Esta línea permite que el navegador reconozca caracteres latinos en el texto.
Del modo gráfico podemos escribir de forma simple, incluyendo tildes, la letra “ñ” y diéresis. Pero si nos fijamos en el código fuente veremos que una simple “á” se convierte en “& a acute;”. La “ñ” en “ñ”, y la “ü” en “ü”.
El tipo de letra es mejor si la definimos por familias o las más comunes. Los navegadores cargan los tipos de letra de cada computador, es decir que si colocamos un tipo de letra que otras personas no lo tienen, el navegador buscará un tipo de letra predefinido en esa computadora. Esto hace cambiar el diseño de nuestro sitio.
Los monitores trabajan en píxeles. Poner los tipos de letra en píxeles también. Si colocamos en picas, cada navegador lo reconocerá distinto o en sus propiedades ajustará a lo que este definido previamente por el usuario.
La barra de propiedades permite configurar las características de las fuentes.
Este es un ejemplo de un párrafo.
<p align="center"><font color="#990000" size="5" face="Arial">Esta es una preba de un texto</font></p>
Listados.-
Este es un listado con íconos:
<ol>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ol>
Este es un listado con numerales
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
En la ventana Propiedades de lista se puede especificar el tipo de lista (con números o con viñetas), el tipo de números o viñetas que se utilizarán, y en el caso de las listas ordenadas, el número por el que comenzará el recuento.
LECCIÓN 6
Color. Manejo del color en HTML y recomendaciones.
Para asignar colores es posible desplegar una paleta de colores como ésta. Al seleccionar un color de estas paletas, se muestra el valor hexadecimal del color en la parte superior.
Las paletas de colores de Dreamweaver utilizan la paleta de 216 colores seguros para web. Éstos son los colores que se muestran de la misma forma en Microsoft Internet Explorer y en Netscape Navigator, tanto en Windows como en Macintosh.
También es posible personalizar los colores a través del segundo botón de la parte superior de la paleta, o seleccionar un color de fuera de la paleta pulsando, una vez abierta la paleta, sobre el color deseado.
Los colores pueden asignarse a través de los botones con la siguiente apariencia:  .
Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y también en algunas ventanas que permiten especificar propiedades (sobretodo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la página , que tienes más arriba.
El color puede insertarse de dos modos. Uno de ellos es pulsando sobre el recuadro gris  , lo que hace que se despliegue la paleta de colores . El otro modo es introduciendo directamente el número hexadecimal del color en el recuadro blanco.
Por ejemplo, si en la paleta de colores que aparece más arriba se seleccionara el color azul con valor #3399FF , el botón quedaría del siguiente modo:  .
LECCIÓN 7
Estructura de un sitio web. Definir un sitio. Estructura de archivos.
En este tema vamos a ver qué es un sitio web , cómo crearlos y gestionarlos, y cómo modificar las propiedades de los documentos, como puede ser el color de fondo.
Introducción
Un sitio web es un conjunto de archivos y carpetas, relacionados entre si, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes de crear las páginas que va a contener.
La forma habitual de crear un sitio consiste en crear una carpeta en el disco local . Los documentos HTML normalmente se crean dentro de dicha carpeta, mientras que para contener las imágenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de ésta, con el objetivo de tener una mejor organización de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local .
Después se podrán copiar los archivos en un servidor web, en el denominado sitio remoto , lo que equivale a publicar el sitio, de modo que la gente podrá verlo en internet.
La organización de los archivos en un sitio permite administrar y compartir archivos, mantener los vínculos de forma automática, utilizar FTP para cargar el sitio local en el servidor, etc.
Es conveniente que la página inicial del sitio tenga el nombre index.htm , ya que los navegadores buscan una página con ese nombre cuando se intenta acceder a una URL genérica.
Por ejemplo, si escribiéramos la dirección genérica http://www.artepresente.com/ en el navegador, éste intentaría cargar la página http://www.artepresente.com/index.htm , por lo que se produciría un error en el caso de que no existiera ninguna página con el nombre index.htm .
Crear o editar un sitio web sin conexión a Internet
Una vez creadas las carpetas que formarán un sitio local, ya es posble definir el sitio en Dreamweaver.
Para ello hay que dirigirse al menú Sitio , a la opción Nuevo sitio . Pero también se puede crear un nuevo sitio a través de la opción Editar sitios .
Recuerda que a través del panel Sitio se puede acceder a ambas opciones.
En el caso de haber seleccionado la opción Editar sitios , aparece una ventana que contiene la lista de sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un mismo ordenador.
Tanto si se elige la opción Nuevo , como si se elige la opción Editar , se mostrará la misma ventana en la que definir las características del sitio.
Dicha ventana puede ser visualizada como asistente en el caso de seleccionar la pestaña Básica , pero vamos a verlo en el caso de seleccionar la pestaña Avanzadas .
En Categoría es posible especificar el elemento que va a ser editado. Para ello basta con seleccionar una de ellas.
Vamos a ver los datos que hay que editar para la categoría Datos locales .
Debe definirse el Nombre del sitio y la Carpeta raíz local , que es en la que se encuentra el sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de disposición del sitio puede definirse la página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio.
Las demás opciones en este momento no nos interesan, ya que estamos definiendo el sitio local, y no es necesario establecer los datos del servidor en el que estará el sitio remoto.
Para abrir un sitio ya definido es necesario seleccionarlo a través de la ventana o del panel Sitio . También es posible abrirlo seleccionándolo en la ventana Editar sitios , pulsando seguidamente sobre el botón Listo .
Vistas del sitio.-
Es posible visualizar un sitio en el panel Sitio o en una ventana.
El panel Sitio se puede abrir a través del menú Ventana , opción Sitio . También pulsando F8 o sobre el botón  del lanzador .
Para cambiar de una vista a otra hay que pulsar sobre el botón  que aparece en la parte superior del panel y de la ventana.
Al mismo tiempo, es posible visualizar el sitio local, el sitio remoto, el servidor remoto de prueba o el mapa del sitio.
En esta imagen se visualizan el mapa del sitio y el sitio local.
En este caso los documentos prueba1.htm y prueba2.htm cuelgan del documento indice.htm , ya que éste ha sido definido como página principal del sitio y contiene vínculos hacia los otros dos.
Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las páginas no se mostrarán correctamente: no aparecerán imágenes, no funcionarán enlaces, etc.
En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a través del sitio, es posible actualizar automáticamente las páginas para que si hacen referencia a un objeto que ha cambiado, después no se produzcan problemas al visualizarlas.
Al modificar algún objeto que es referenciado por algún otro documento, se muestra una ventana similar a esta, que indica los documentos que hacen referencia a dicho objeto, y que pueden ser actualizados para que no se produzcan los problemas antes mencionados.
Simplemente hay que pulsar sobre el botón Actualizar .
LECCIÓN 8
Enlaces. Lógica del enlace. Hipertexto.-
Vamos a ver qué son los hiperenlaces , para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.
Introducción
Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo.
Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen.
Tipos de enlaces
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
 Referencia absoluta:
Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, por ejemplo, " http://www.artepresente.com ".
 Referencia relativa al sitio:
Conduce a un documento situado dentro del mismo sitio que el documento actual.
 Referencia relativa al documento:
Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual.
 Puntos de fijación:
Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vínculo debe ser " nombre_de_documento#nombre_de_punto ". El punto se define dentro de un documento a través del menú Insertar , opción Punto de fijación con nombre .
Crear enlaces
La forma más sencilla de crear un enlace es a través del inspector de propiedades . Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vinculo en el inspector.
Por ejemplo, aquí hay un enlace a www.elpais.es , que es de referencia absoluta, por eso contiene HTTP:// .
Otra forma de crear un enlace es a través del menú Insertar , opción Hipervínculo .
Es posible crear también vínculos vacíos , que pueden ser útiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vinculo únicamente una almohadilla ' # '.
Destino del enlace
El destino del enlace puede variar dependiendo de los marcos de que disponga el documento actual. Dicho destino determina en qué ventana va a ser abierta la página vinculada. Puede especificarse en el inspector de propiedades a través de Dest , o en la ventana que aparece a través del menú Insertar , opción Hipervínculo .
 _blank:
Abre el documento vinculado en una ventana nueva del navegador.
 _parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre.
 _self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
 _top:
Abre el documento vinculado en la ventana completa del navegador.
No te preocupes si no te queda del todo claro para que sirve cada una de estas opciones de destino, ya que se volverán a ver en el tema de Marcos .
Vínculo de correo electrónico.-
LECCIÓN 9
Marcos.-
Vamos a ver qué son los marcos y para qué se utilizan. También veremos cómo insertar un marco sencillo en una página, y cómo trabajar con él.
Introducción.-
Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad, pueden mejorar también la apariencia.
Cada uno de los marcos de una página, contiene un documento HTML individual. Por ejemplo, en la imagen de la derecha puedes ver una página con dos marcos. El marco izquierdo contiene el documento menu.htm y el derecho el documento perros.htm . Para poder visualizar la página de este modo, hemos tenido que abrir en el navegador el documento marcos.htm , que es el que en este caso contiene los marcos.
Es posible editar los documentos contenidos en los marcos desde la página que contiene el grupo de marcos. Esto facilita el trabajo, ya que es más fácil hacerse una idea de cómo quedará la página al final, cosa que no es posible si se editan individualmente cada uno de los documentos que contiene el marco.
El trabajar con marcos puede resultar una tarea algo complicada, sobretodo al principio, por lo que no vamos a profundizar mucho en el tema, y veremos solamente algunos conceptos básicos y ejemplos sencillos.
Crear marcos
Existen varias formas de crear un marco. Nosotros vamos a ver solamente una de ellas.
Para crear un marco, primero hay que abrir algún documento. Puede ser uno nuevo o uno ya existente.
Lo primero que hay que hacer es dirigirse al menú Insertar , a la opción Marcos . A través de esta opción puede elegirse el tipo de marco que va a crearse.
Vamos a ver el marco a la Izquierda .
Si pulsamos sobre Izquierda se creará un nuevo marco a la izquierda del documento actual.
Como puedes ver en la imagen, aparece una línea que divide el documento en dos. El documento de partida era uno nuevo.
En este caso tendremos tres documentos: el de la izquierda, el de la derecha, y el que contiene los marcos. El de la derecha es el documento que teníamos inicialmente, que está en el marco conocido como marco padre (MainFrame).
Para seleccionar el documento que contiene el grupo de marcos hay que pulsar sobre la línea que separa los marcos. Esto solo es posible mientras que dicho documento no se haya guardado.
Si en lugar de insertar un marco a la izquierda lo insertamos a la Derecha , el marco vacío aparecerá a la derecha del documento original.
En esta imagen puedes ver un ejemplo de marco a la derecha.
Sobre un documento ya existente, menu.htm , se ha insertado un marco a la derecha.
Al igual que en el caso anterior, tenemos tres documentos: el de la izquierda, el de la derecha, y el que contiene los marcos. En este caso, el documento que teníamos inicialmente es el de la izquierda, mientras que antes era el de la derecha. Por ello, en este caso el marco padre será el de la izquierda.
El marco padre siempre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
Seleccionar marcos
Para seleccionar los marcos del documento es necesario dirigirse al panel Marcos , que puede abrirse a través del menú Ventana . Si la opción Marcos no te aparece directamente en este menú, posiblemente esté dentro de la opción Otros . También puedes abrir el panel Marcos pulsando la combinación de teclas Mayús+F2 .
En el panel Marcos aparecen los marcos que contiene el documento de marcos, y se puede pasar de uno a otro pulsando sobre ellos en el panel. También puede seleccionarse la página de marcos pulsando en sobre el borde que rodea a los marcos (el que aparecen en negro en la imagen).
No es necesario seleccionar los marcos para editar los documentos que éstos contengan. Si es necesario seleccionar los marcos para especificar las propiedades específicas de cada uno de ellos.
Contenido del marco
Como ya has visto, el contenido de un marco puede establecerse a través del campo Origen del inspector de propiedades .
Cuando trabajamos con marcos, queremos poder cargar diferentes documentos en cada uno de ellos. El contenido de alguno de los marcos ha de ser fijo, mientras que el de otros ha de poder variar.
A través del campo Origen del inspector de propiedades , sólo es posible especificar el documento que se cargará inicialmente en el marco, pero hemos de poder cambiar este documento por otro a través de vínculos.
Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces. Estos destinos podían ser _blank , _parent , _self , y _top . Vamos a recordar para que servía cada uno de ellos, ya que ahora que ya sabes trabajar con marcos te serán más fáciles de entender.
 _blank:
Abre el documento vinculado en una ventana nueva del navegador.
 _parent:
Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre. Como ya sabes, el marco padre es el marco en el que se encuentra el documento inicial, sobre el que se han insertado el resto de marcos.
 _self:
Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo.
 _top:
Abre el documento vinculado en la ventana completa del navegador, lo cual quiere decir que los marcos de la ventana desaparecerán al abrir el vínculo en ella.
Además de estos destinos para los enlaces, también aparecerán los nombres de los distintos marcos de la página.
Podemos añadir todos estos destinos a cualquier elemento de la página que contenga algún enlace, ya sea texto, una imagen, un mapa de imagen, un elemento Flash, etc.
Gracias a todo esto podremos hacer que las barras de navegación y el resto de enlaces funcionen a nuestro antojo, cargando unas u otras páginas en alguno de los marcos, en una ventana nueva, en toda la ventana, etc.
Esta tarea puede resultar algo pesada, y al principio complicada, pero da muy buenos resultados finales.
LECCIÓN 10
Para insertar una imagen hay que dirigirse al menú Insertar , a la opción Imagen . Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana.
Si por algún motivo se desea insertar un BMP, este no aparecerá a no ser que en Tipo se seleccione Todos los archivos . Importación de imágenes, rollovers y gif animados. Mapa de imagen
En Relativa a es posible especificar si la imagen será relativa al documento o a la carpeta raíz del sitio. Es preferible que sea relativa al Documento , ya que si se mueve todo el sitio a una ubicación diferente, la imagen puede no verse al estar siendo buscada en la ubicación anterior.
Lo mismo ocurre cuando se selecciona un documento para crear un vínculo.
Ocurre lo mismo que cuando se crea un hipervínculo a un documento relativo al documento o a la carpeta raíz del sitio.
Si se inserta un BMP en un documento, este no aparece correctamente en Dreamweaver, aunque sí en el navegador. En Dreamweaver aparecerá de la siguiente forma:
Esa misma imagen es la que aparece en Dreamweaver cuando no se encuentra una imagen que había sido insertada. Esto puede ocurrir si se ha modificado el nombre de la imagen, o si se ha movido de directorio, desde fuera de Dreamweaver. En ese caso, la imagen que aparecerá en el navegador será similar a esta:
Aparece un recuadro blanco con una X roja, junto con el nombre de la imagen o el contenido del campo Alt del inspector de propiedades .
La ruta en la que se encuentra la imagen aparecerá representada de una u otra forma en el campo URL de la ventana y en el campo Origen del inspector de propiedades , dependiendo de si ha sido insertada como relativa a la carpeta raíz del sitio o relativa al documento.
Por ejemplo, imagina que dentro de la carpeta raíz del sitio (la carpeta del sitio) se encuentran la carpeta imágenes y el documento en el que deseamos insertar la imagen. Dicha imagen, llamada logo.jpg , se encuentra dentro de la carpeta imágenes .
En el caso de insertar la imagen como relativa al Documento la ruta sería:
imagenes/logo.jpg
Mientras que en el caso de ser insertada como relativa a la Raíz del sitio la ruta sería:
/imagenes/logo.jpg
Cambiar el tamaño de una imagen
Dentro de Dreamweaver puede modificarse el tamaño de las imágenes. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, si no que lo que varía es la visualización de la imagen dentro de la página.
Es muy probable que la imagen resultante no sea de buena calidad, en comparación de como podría quedar modificándola desde un editor externo, como Fireworks.
Por ejemplo, vamos a ver lo que ocurre si insertamos una imagen que representa al icono de Dreamweaver y modificamos su tamaño de varias formas diferentes:
Imagen original
Imagen con tamaño modificado
   
Puede apreciarse claramente que los resultados no son muy satisfactorios, pero en ocasiones puede resultar útil modificar el tamaño de algunas imágenes aunque esto implique perder calidad.
Existen dos formas de modificar el tamaño.
Una de ellas es, una vez seleccionada la imagen, arrastrar con el puntero alguno de los recuadros negros que aparecen alrededor de la imagen.
La otra es a través de inspector de propiedades , cambiando los campos An (anchura) o Al (altura). Estos campos aparecerán en el inspector cuando sea seleccionada alguna imagen.
Hay que tener en cuenta que para cambiar la alineación de la imagen hay que hacerlo a través del campo Alinear del inspector de propiedades . La alineación de las imágenes ofrece más posibilidades que la del texto: superior, medio, medio absoluta, línea de base, etc.
Pueden crearse vínculos y comportamientos sobre partes de una imagen, sin la necesidad de que sea sobre toda ella. A esto se le conoce como mapa de imagen .
Imagen de sustitución.
Botones Flash.-
Barra de Navegación .-
LECCIÓN 11
Hojas de Estilo.-
Estilos HTML
En el menú Texto , opción Estilo , aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado.
Es posible definir otra serie de estilos, aplicables a párrafos o a palabras seleccionados. Estos nuevos estilos, llamados estilos HTML, se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamaño, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignación de esos mismos valores a otras partes del texto.
La forma más sencilla de crear, borrar y asignar estilos HTML es a través del panel Estilos HTML . Dicho panel puede abrirse pulsando la combinación de teclas Ctrl+F11 , o a través del menú Ventana , opción Estilos HTML .
Pulsando sobre cada uno de los estilos de la lista es posible aplicarlos sobre el texto seleccionado.
A través de la flecha de la parte inferior del panel es posible decidir si los estilos deben aplicarse sobre el texto nada más pulsar sobre ellos, o por otro lado, aplicarlos una vez seleccionados pulsando sobre el botón Aplicar .
Pueden borrarse los estilos de la lista a través del botón con forma de papelera. A través del botón que está junto al de la papelera es posible añadir estilos nuevos.
Cuando se pulsa el botón de creación de nuevo estilo, aparece una ventana como ésta.
En ella pueden especificarse el Nombre del estilo, y los atributos de la fuente y del párrafo, que son los mismos que los puedes aplicar a un texto a través del inspector de propiedades .
También si el estilo se aplicará sobre la selección o todo el párrafo, a través de Aplicar a , y si los nuevos atributos se añadirán o no al estilo que esta aplicado ya sobre la selección, a través de Al aplicar .
También es posible abrir esta ventana para modificar un estilo ya existente. Para ello es necesario pulsar dos veces sobre el estilo en el panel Estilos HTML ..
Como puedes ver, es bastante sencillo trabajar con estilos HTML.
En los estilos HTML no hay actualización automática. Esto quiere decir que, cuando se modifica un estilo, todo el texto al que se le haya aplicado previamente ese estilo no van a actualizarse con los nuevos valores de los atributos del texto.
Esto puede resultar un inconveniente cuando se trabaja continuamente con estilos HTML.
Estilos CSS
los estilos CSS son hojas de estilo de actualización automática. Se usan principalmente para especificar el formato de texto, pero algunas de sus opciones pueden utilizarse para definir atributos de imágenes y otras características que no permiten definir los estilos HTML, como el color de fondo para el texto, etc.
También permiten aplicar un estilo sobre todas las etiquetas de un mismo tipo, como puede ser la etiqueta A HREF , que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la página adquirirían la apariencia definida en ese estilo.
El inconveniente que tiene trabajar con hojas de estilos es que algunos navegadores no las soportan y las ignoran, aunque estos navegadores suelen ser versiones antiguas, por lo que ocurrirá en pocos casos.
Vamos a ver como funcionan las hojas de estilo a través del panel Estilos CSS , que puede abrirse a través del menú Ventana , opción Estilos CSS . También pulsando Mayús+F11 o sobre el botón  del lanzador .
Existen dos modos diferentes para trabajar con los estilos, pudiendo pasar de uno a otro eligiendo una opción  .
En el caso de estar seleccionada la opción Aplicar estilos , es posible aplicar directamente un estilo sobre el texto seleccionado, pulsando sobre uno de los estilos de la lista . En el caso de que la opción seleccionada sea Editar estilos , aparecerán las características asignadas a cada uno de los estilos.
Para poder utilizar los estilos de una hoja de estilos, es necesario cargarla en el documento. Para ello hay que pulsar sobre el primero de los cuatro botones inferiores  . En la nueva ventana debe especificarse la ruta donde se encuentra el archivo CSS.
El botón  sirve para crear un nuevo estilo en la hoja de estilos actual o en otra nueva.
El botón  sirve para abrir la ventana donde editar un estilo nuevo o el seleccionado
El último botón, que tiene forma de papelera, sirve para borrar el estilo seleccionado.
Cuando se pulsa el botón de creación de nuevo estilo, aparece una ventana como ésta.
En ella deben especificarse el Nombre del estilo, y la hoja de estilos en la que va a definirse dicho estilo, que puede ser una nueva o una ya existente. Esto último se especifica en Definir en .
En Tipo es posible especificar si el estilo va a ser uno personal creado desde cero ( Crear estilo person. clase ), una etiqueta HTML redefinida ( Redefinir etiqueta HTML ) o una mezcla entre los dos tipos anteriores ( Usar selector CSS ).
En el caso de haber elegido Redefinir etiqueta HTML , en Nombre aparece la lista de etiquetas HTML que pueden ser redefinidas, como pueden ser BODY, A, FORM, TABLE, etc.
Después de pulsar sobre el botón Aceptar (y una vez guardada la hoja de estilos en el que caso de ser una nueva), aparecerá una ventana como ésta.
Eligiendo una u otra categoría es posible especificar diferentes propiedades, muchas de las cuales no se podían aplicar mediante estilos HTML. Por ejemplo, a través de la categoría Fondo es posible especificar el color de fondo para un bloque de texto o para la página entera (al redefinir la etiqueta <body>).
Hay que tener en cuenta que puede producirse lo que se conoce como conflicto de estilos . Esto se produce cuando se aplican dos estilos diferentes a un mismo texto, y ambos especifican diferentes valores para un mismo atributo. Por ejemplo, un estilo puede especificar que el color del texto es azul, y el otro que es verde. En este caso el navegador solamente podrá aplicar al texto uno de los dos colores.
El estilo que esté más cerca del texto en el código HTML será el que se aplique.
A diferencia de lo que ocurría con los estilos HTML, cuando se aplican estilos CSS esto sí se aprecia en código HTML de la página.
LECCIÓN 12
Comportamientos.-
El panel Comportamientos se puede abrir a través del menú Ventana , opción Comportamientos . También pulsando Mayús+F3 o sobre el botón  del lanzador .
En este panel hay que desplegar el botón  pulsando sobre él, y en Mostrar eventos para elegir una versión de la lista de navegadores.
Algunos comportamientos no funcionan para algunos navegadores, por lo que dependiendo del navegador elegido aparecerán unos u otros comportamientos posibles.
Existen comportamientos que funcionan en Internet Explorer pero no en Netscape. Debido a que la mayoría de usuarios utiliza Internet Explorer, vamos a seleccionar este navegador. Puedes seleccionar alguna de sus últimas versiones: IE 5.5 o IE 6.0 .
Una vez elegido un navegador ya no es necesario volver a elegirlo las siguientes veces que se desee insertar algún comportamiento.
Insertar un comportamiento
Cuando ya hay establecido algún navegador, ya se pueden insertar comportamientos.
Lo primero que hay que hacer es seleccionar el objeto sobre el que se ha de aplicar el comportamiento, como puede ser una imagen, un fragmento de texto, etc.
Al desplegar el botón  del panel Comportamientos aparece la opción Mostrar eventos para , a través de la cual se había elegido el navegador. También aparece la lista de todas las acciones posibles para el navegador elegido previamente, de entre las que se puede seleccionar una.
Según el elemento sobre el que se desee aplicar el comportamiento, se podrán elegir unas acciones, mientras que otras no.
En este caso la acción Validar formulario no puede seleccionarse porque no existe ningún formulario en la página.
Después de elegir alguna acción, el comportamiento correspondiente aparece en el panel Comportamientos . En este caso se han insertado dos comportamientos.
Como puedes ver, cada comportamiento tiene asociada una acción y un evento. Las acciones son las que se han elegido en la lista anterior.
Para eliminar un comportamiento, hay que seleccionarlo en el panel Comportamientos y pulsar sobre el botón  . También es posible cambiar el orden de los comportamientos aplicados a un objeto, seleccionándolos y ordenándolos mediante los botones   .
LECCIÓN 13
Plantillas.-
Las plantillas pueden crearse desde cero, o a partir de una página ya existente.
Una forma de crear una plantilla desde cero es a través del panel Activos .
El panel Activos se puede abrir a través del menú Ventana , opción Activos .También pulsando F11 o sobre el botón  del lanzador .
Una vez abierto el panel hay que seleccionar el botón  , para poder trabajar con las plantillas.
Los botones inferiores del panel Activos son similares a los del panel Estilos CSS  . El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permiten crear una nueva plantilla, editar una plantilla seleccionada en la lista, o eliminarla.
Para crear una nueva plantilla hay que pulsar sobre el botón  (Si este botón no está activado, pulsa con el botón derecho del ratón y elige Nueva Plantilla ). Cuando se pulsa ese botón aparece un nuevo documento en la lista de plantillas, al que es posible cambiarle el Nombre pulsando previamente sobre él. Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates , que se crea automáticamente.
Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archivo, y después guardarlo como plantilla a través del menú Archivo , opción Guardar como plantilla .
Cuando se pulsa dicha opción, aparece una ventana como la de la derecha. En ella es necesario especificar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como , y elegir, de entre la lista de sitios, el Sitio en el que se va a guardar.
Establecer regiones editables en una plantilla
Todos los elementos de una plantilla están bloqueados por defecto.
Es necesario establecer las zonas que sí podrán ser editadas en las páginas que se basen en dicha plantilla.
Para editar una plantila hay que abrirla en Dreamweaver. Una forma de abrirla es a través del panel Activos , pulsando dos veces sobre ella , o estando seleccionada pulsando sobre el botón  .
Una vez abierta la plantilla es posible establecer sus propiedades a través de Propiedades de la página .
Como recordarás, para abrir esta ventana puedes:
 Pulsar la combinación de teclas Ctrl+J .
 Hacer clic sobre el menú Modificar y elegir la opción Propiedades de la página .
 Pulsar con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú contextual que aparece seleccionar la útltima opción, que es Propiedades de la página .
Para insertar una región editable hay que situar el puntero en el lugar en el que se desea insertar, y después dirigirse al menú Insertar , Objetos de plantilla , opción Región editable , o pulsar la combinación de teclas Ctrl+Alt+V .
En la nueva ventana hay que establecer un Nombre para la región editable. Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre.
Posteriormente puede modificarse el nombre a través del inspector de propiedades de la región editable.
La zonas editables aparecen representadas en Dreamweaver como un recuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable.
Dentro del recuadro es posible insertar objetos, que aparecerán por defecto en aquellos documentos que se basen en la plantilla. Estos objetos, al estar dentro de la zona editable, podrán ser modificarlos en las páginas.
Todos los objetos que se encuentren fuera de estas zonas editables aparecerán también en las páginas, pero no podrán ser modificados.
Lección 14
Configurar un sitio en red.
La ventana para editar los sitios puede ser visualizada de dos formas, según esté seleccionada la pestaña Básica o la pestaña Avanzadas .
Ya hemos visto cómo hay que configurar el sitio local a través de la pestaña Avanzadas , pero para editar el sitio remoto vamos a verlo a través de la pestaña Básica , que permite utilizar el asistente y resulta más sencillo.
La primera ventana del asistente permite asignar un nombre al sitio. En este caso le hemos llamado CursoDreamweaver .
FTP.-
Hay que especificar, en primer lugar, el tipo de conexión . Suele utilizarse la conexión por FTP , creada para la transferencia de ficheros a través de Internet. Vamos a ver qué opciones hay que especificar en el caso de haber elegido la conexión por FTP.
Una de las cosas que hay que especificar es el nombre o la dirección del servidor que contendrá el sitio remoto. Cada ordenador tiene asociado una dirección IP, que lo identifica dentro de Internet. Al mismo tiempo, dicha dirección puede tener asociado un nombre, que resulta más fácil de recordar para las personas que el número. Esto es lo que hay que especificar en este campo.
Después hay que especificar el directorio en el que se encontrará el sitio remoto en el servidor.
Por último hay que identificarse . Los servidores no pueden dejar que cualquier persona acceda a sus directorios, y modifique los archivos, que pueden pertenecer a otras personas. Cada persona tendrá asignado un directorio dentro del servidor contratado, y para acceder a dicha carpeta será necesario introducir un nombre y una clave. Esto se especifica en la ventana a través de los dos últimos campos a rellenar.
LECCIÓN 15
Otras herramientas.-
Las marquesinas son texto, imágenes, o una mezcla entre texto e imágenes, que pueden desplazarse de un lado a otro de la ventana en forma de línea. A continuación tienes un ejemplo de marquesina.
Las marquesinas no se pueden insertar a través del editor gráfico de Dreamweaver, es necesario hacerlo a través del código.
Para crear una marquesina hay que insertar las etiquetas <MARQUEE> y </MARQUEE> . Entre dichas etiquetas han de introducirse los elementos que se desea que aparezcan en la marquesina.
También es posible especificar algunas características de la marquesina. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varíen. Por ejemplo, si pones <marquee behavior="slide"> , la marquesina hará el desplazamiento una sola vez y se detendrá.
Si pones <marquee behavior="alternate"> , en lugar de desplazarse continuamente de derecha a izquierda, la marquesina se desplazará de lado a lado de la ventana, como si rebotara en los extremos, tal y como ocurre en el ejemplo anterior, cuyo código puedes ver a continuación:
<marquee behavior="alternate">
Bienvenid@s a PerrosGatos
<img src="imagenes/logo_animales.gif">
</marquee>
Fecha.-
Dreamweaver permite insertar fácilmente la fecha de última modificación de las páginas.
Cuando se modifica una página en la que se ha insertado este tipo de fecha, se actualizará automáticamente con la fecha del sistema.
Conviene insertar la fecha de modificación cuando la página ha de contener información actualizada cada poco tiempo, para que los usuarios puedan saber cuando fue la última vez que se actualizaron los datos. Pero en el caso de que la página no se actualice hasta que pase cierto tiempo, es preferible no incluir la fecha de modificación.
Para insertar la fecha hay que dirigirse al menú Insertar , a la opción Fecha .
En la nueva ventana ya es posible establecer el formato de la fecha, y si se desea que se actualice o no automáticamente al modificar y guardar la página de nuevo.
Regla horizontal.-
El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal . Una regla horizontal no es más que una línea horizontal.
Para insertar una regla hay que dirigirse al menú Insertar , a la opción Regla horizontal .
El inspector de propiedades para las reglas es el siguiente.
A través de sus campos es posible modificar en cierta medida la apariencia de las reglas. A continuación tienes cuatro ejemplos de reglas horizontales.
Sonido.-
No es muy habitual incluir sonido en una página web, ya que algunos usuarios suelen estar escuchando su propia música cuando navegan en Internet, por lo que el escuchar también sonido en cada página que se visita puede resultar algo molesto.
A pesar de ello, el incluir un sonido agradable, apropiado al contenido de la página, puede hacerla más atractiva. Muchas de las páginas que contienen sonido suelen ofrecer la posibilidad de activarlo o desactivarlo, para que aquellos usuarios que no deseen escuchar el sonido de la página puedan desactivarlo.
Los formatos de sonido más habituales en Internet son, fundamentalmente, el MP3 , el WAV y en algunas ocasiones el MIDI , aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
Para insertar un archivo de audio en un documento tienes que dirigirte al menú Insertar , Medía , opción Plug-in .
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles ( recuerda encender los altavoces, si los tienes).
 En Dreamweaver no se mostrarán los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda.
En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarán los controles de audio, mediante Al y An .
En el caso de no especificar ningún tamaño, se mostrará el tamaño por defecto de los controles, como ocurre en el ejemplo de arriba. Si lo que se desea es que se escuche el sonido en la página, pero que no se muestren los controles de audio, los campos Al y An deben valer cero.
Los sonidos se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores no pueden cambiarse a través del inspector de propiedades , pero sí a través del código.
Por ejemplo, el archivo anterior aparecía en el código como <embed src="varios/audio.MID"></embed> . Pero para que no se reprodujera automáticamente se ha añadido autostart="false" , y para que se reprodujera continuamente se ha añadido loop="true" .
La línea de código del archivo de audio a quedado del siguiente modo:
<embed src="varios/audio.MID" autostart="false" loop="true"></embed>
Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea.
Si quieres poner musica de fondo en una página web, sin que aparezcan los controles de audio, puedes escribir este código directamente en la vista Código.
<bgsound src="cancion1.wav" loop="-1">
Insértalo despues de la etiqueta </title> Con el parámetro loop puedes decidir cuantas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo).
Vídeos.-
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI , el MPEG y el MOV .
Para insertar un archivo de vídeo en un documento tienes que dirigirte al menú Insertar , Medía , opción Plug-in .
A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.
El inspector de propiedades para los archivos de audio insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.
Los videos también se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Estos valores pueden cambiarse a través del código, del mismo modo que en el caso de los archivos de audio, añadiendo autostart="false" y loop="true" .
Todos los objetos insertados a través de la opción Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vídeo) que ha de reproducirse.
En el caso de que el usuario no tenga instalado ningún plug-in adecuado, puede establecerse en el campo URL plg una página en la que pueda encontrarlo.
ENVÍANOS UN COMENTARIO DE NUESTRO CURSO DE MACROMEDIA DREAMWEAVER EN QUITO - ECUADOR |
