Creacin y alojamiento de pginas Web

Para crear pginas Web como AulaFacil.com podemos emplear muy diferentes mtodos y programas. En cualquier caso para tener una pgina en Internet necesitar: A. Crear los ficheros o archivos que componen la Web. Una Web normalmente se compone de un cierto nmero de pginas. Por ejemplo, esta pgina del curso, que es un fichero con terminacin htm. B. Una direccin de Internet. Por ejemplo la direccin www. aulafacil.com. Por ejemplo www.elpais.es C. Tener un alojamiento o servidor en Internet donde colocar la Web. Lo normal es construir la web y tenerla en el disco duro de nuestro ordenador y luego enviarla a un servidor de Internet. Un servidor de Internet en realidad es otro ordenador que est permanentemente encendido y conectado a la Red. D. Y enviar los ficheros normalmente desde el disco duro de su ordenador al sitio donde se alojar la pgina. Algunos Portales permiten la creacin y alojamiento de pginas personales directamente en Internet de forma sencilla. A) LA CREACION DE LOS FICHEROS. La construccin de las pginas de una Web se suele realizar utilizando diferentes programas editores. Los programas editores permiten la creacin de pginas de una forma sencilla sin tener que programar cada instruccin del lenguaje Html. Los diseadores de pginas web, suelen emplear varios programas para la creacin de las pginas. Uno de los favoritos es el Dreamweaver. Una buena recomendacin es utilizar el programa Dreamweaver para crear los ficheros de la pgina Web. Las versiones antiguas de Microsoft office tenan un programa para crear pginas web. En AulaFacil dispone de un buen curso sobre creacin de pginas Web utilizando Front Page. Otra opcin es programar directamente en HTML. . Esta es una opcin para los que desean profundizar y comprender el lenguaje que se encuentra detrs de las pginas de Internet. Puede acceder al curso sobre HTML en el siguiente enlace HTML. Este curso facilita comprender el cdigo que se emplea en las pginas

B) LA DIRECCION DE INTERNET Existen dos opciones:

Tener una direccin propia del tipo www.aulafacil.com. Esto es lo que se denomina una direccin de primer nivel. Utilizar una direccin gratuita que nos proporciona algn Portal de Internet del tipo www.geocities/yosemite/Aqui/lapaginadenacho

Puede ver el tema de los Dominios en la siguiente pgina Dominios Si desea crear una pgina personal y no necesita que la Web disponga de una direccin de primer nivel puede crear y alojar su pgina en alguno de los Portales que ofrecen esta posibilidad. Algunos Portales que proporcionan alojamiento y facilidades para crear pginas personales son Iespana y Pobladores. Puede ver la explicacin en Pginas gratuitas Para realizar las pginas necesitar seguramente imgenes o Gif y diferentes complementos para darle vistosidad a las pginas. Le recomendamos realizar el curso sobre Buscadores especialmente la parte referida a la bsqueda de programas informticos. C) EL ALOJAMIENTO

El alojamiento puede ser gratuito. Normalmente es una opcin para pginas personales. Varios Portales en Internet proporcionan alojamiento gratuito con ciertas restricciones. Pginas gratuitas Para las empresas lo normal es pagar un alojamiento para sus pginas. Una explicacin ms detallada la puede encontrar en Alojamiento

D) ENVIO DE LAS PAGINAS A INTERNET Para subir los ficheros que ha creado desde el disco duro de su ordenador al servidor de Internet disponemos de varias opciones. Nuestra opcin favorita es utilizar un programa especializado FTP. Puede ver como utilizarlo pulsado sobre el enlace siguiente FTP.

La Direccin de la pgina. Los Dominios en Internet

Con relacin a la direccin de la pgina tenemos dos primeras opciones: 1. Si queremos tener nuestra propia direccin. Como por ejemplo Aulafacil.com. Tenemos que pagar el registro. 2. Otra opcin es utilizar un alojamiento gratuito. El alojamiento gratuito tiene ciertas limitaciones por lo que se suele utilizar para pginas personales. Una direccin del tipo http://geocities.com/Paris/2226/principal.htm Diferentes Portales proporcionan alojamiento gratuito y una direccin a las pginas personales. Por ejemplo, el Portal Iespana y una posible direccin seria http://www.iespana.es/aaprender/ REGISTRO DE UN DOMINIO PROPIO Si queremos tener nuestra propia direccin tenemos que buscar un nombre que no este registrado y pagar el registro. Podemos registrar diferentes terminaciones:

La terminacin .com es para las empresas y procede de company La terminacin .net estaba pensada para las redes. La terminacin .org se refiere a organization. Organizaciones no lucrativas.

Las marcas de empresas reconocidas, se encuentran protegidas por la legislacin. Las empresas que ya tienen direcciones funcionando en Internet se encuentran protegidas por las legislaciones. Supongamos que deseamos que nuestra pgina se denomine PedazodePagina.com Nos vamos por ejemplo a Arsys

Tecleamos el nombre que deseamos registrar. Por ejemplo PedazodePagina Y pulsamos Enviar

Una vez que conseguimos localizar un dominio que este libre y por tanto no

registrado, pulsamos Registrar. A continuacin, seguimos las distintas pginas para dar la conformidad al contrato y dar los datos necesarios. Completamos el formulario de Pago. Otras empresas donde podemos realizar el registro con las instrucciones en castellano son Acens Nominalia

El registro de dominios con terminacin .es podemos realizarlo directamente en Nic Podemos realizar el registro en numerosas pginas. Todas tienen la misma validez y son parecidas. Un registro muy barato y sencillo pero con las instrucciones en ingles Dotster. Otro registro es el de Netsol Podemos igualmente realizar el registro con las terminaciones para los diferentes pases. Por ejemplo en la pgina de VeriSing Los aspectos legales relacionados con los dominios podemos consultarlos en Dominiuris PAGINAS GRATUITAS Si deseamos tener una pgina gratuita no necesitamos realizar el registro del dominio. El Portal donde alojemos de forma gratuita la pgina ser la que nos proporcione la direccin. Por ejemplo si utilizamos Iespana la direccin puede ser http://www.iespana.es/cursocrear/ En cualquier caso si tenemos una empresa es interesante registrar el dominio con la terminacin .com y tenerla reservada.

LECCION 2 Creacin de una Pgina Personal gratuita

En numerosos Portales podemos crear una pgina personal. Por ejemplo en Iespana,

Desde la portada. Pulsamos sobre Mi sitio

Pulsamos sobre Crear

Aparecen las condiciones del contrato. Pulsamos al final de la pgina Si acepto las condiciones. En la pgina siguiente ponemos el nombre y los datos del sitio. Por ejemplo aaprender y un ttulo por ejemplo "los mejores cursos". Nos hacemos miembros de I-club dando nuestros datos personales y una direccin de E-mail autntica. Ahora tenemos que activar nuestro sitio utilizando la clave de activacin que recibimos en la direccin de E-mail que hemos dado. Entrando de nuevo a Mi sitio. En la parte superior izquierda de la pgina se

encuentran las herramientas de diseo, Disea tu sitio .Una forma sencilla de realizar una pgina es utilizar el Editor HTML.

Otros sitios que ofrecen espacio gratuito para pginas personales. Demasiado Pobladores Ya

LECCION 3 COMO ENVIAR LAS PAGINAS WEB A LOS SERVIDORES CON FTP

OBTENER EL PROGRAMA PARA REALIZAR EL ENVIO Las pginas las creamos y las guardamos en el disco duro de nuestro ordenador. Para que puedan ser vistas en Internet tenemos que enviarlas desde nuestro ordenador al ordenador conectado a Internet. Es lo que se denomina hospedar una pgina en un servidor de Internet. Existen diferentes procedimientos para enviar las pginas que hemos creado. El procedimiento que preferimos en utilizar un programa especializado en la transferencia de ficheros. Uno especialmente bueno es el WS_FTP95 y las versiones posteriores. El programa WS_FTP es gratuito para estudiantes y pginas no comerciales y barato para propsitos comerciales. Podemos bajarnos directamente el programa de la direccin. ftp://ftp1.ipswitch.com/ipswitch/product_downloads/ws_ftple.exe Si quiere saber Cmo bajar el programa Existen varios buenos programas para transferir ficheros que podemos utilizar. Y varias

pginas de Internet en las que podemos obtenerlos. Por ejemplo en softonic.htm Una vez en localizado el programa que deseamos, lo bajamos al disco duro de nuestro ordenador. Cmo bajar el programa Una vez que hemos descargado el programa desde Internet al disco duro de nuestro ordenador debemos instalarlo COMO ENVIAR LOS FICHEROS

Una vez que tenemos instalado el programa pulsamos sobre el programa ejecutable para ponerlo en marcha. En nuestro caso pulsamos sobre la imagen FTP

Nos aparece el Cuadro Propiedades de Sessin. Esta es la parte que puede dar algn problema. Los datos para rellenar este cuadro los facilita la empresa o web donde hemos decidido alojar nuestra Web. Suelen enviar la informacin en un Email cuando se contrata el servicio hospedaje con las instrucciones para rellenar este cuadro. El ejemplo que mostramos a continuacin corresponde al alojamiento de aulafacil.org. Si no conocemos el Host Type, es decir el tipo de servidor ponemos Automatic detect para que el mismo programa se ocupe de investigarlo.

Y pulsando Aceptar

Si todo va bien aparece un cuadro parecido al siguiente.

LECCION 4 Enviar ficheros al servidor de Internet

ENVIAR PAGINAS DEL DISCO DURO DE NUESTRO ORDENADOR AL SERVIDOR DE INTERNET 1. Nos movemos por nuestro disco duro para encontrar el subdirectorio donde tenemos colocados los archivos que deseamos enviar. I. Tenemos un botn en la parte superior en el que si pulsamos aparecen las diferentes carpetas o directorios de nuestro disco duro. .

II.

Podemos movernos hacia arriba haciendo clic en la flecha superior

III.

El sistema para movernos por las diferentes carpetas del servidor es el mismo sistema.

Si deseamos colocar los archivos en una carpeta que ya esta creada en el servidor simplemente hacemos doble clic sobre la carpeta correspondiente. En el siguiente

ejemplo ya tenemos creada la carpeta para el curso denominada "CrearInternet" y hacemos clic dos veces para entra en este apartado y poder colocar los ficheros.

2. Marcamos los que deseamos enviar. Si queremos enviar varios ficheros a la vez , podemos marcarlos manteniendo pulsada la Tecla Ctrl que se suele encontrar en el extremo Inferior izquierdo del teclado. Otra forma de seleccionar varios ficheros que se encuentran uno a continuacin de otro es manteniendo pulsada la flecha de Maysculas y pulsando la flecha Arriba o Abajo.. 3. Y pulsamos la flecha que apunta a la derecha tal como se muestra en la siguiente imagen. Es preciso tener cuidado pues si enviamos un fichero con el mismo nombre que otro ya existente en el servidor, eliminaremos, borraremos el anterior.

Cuando tenemos muchos ficheros en los que estamos trabajando y subimos ficheros de manera frecuente puede ser complicado saber que ficheros he actualizado desde ltima sesin. Para subir nicamente los ficheros que hemos actualizado un truco til es utilizar Date.

Pulsamos sobre Date. Nos ordena por fechas de actualizacin. Normalmente los ficheros que hemos actualizado desde el ltimo envo son los que aparece antes de WS_FTP.LOG. En nuestro ejemplo son los cuatro primeros archivos, tal como se muestra en la siguiente imagen. Marcamos los primeros ficheros que se muestran.

BAJAR FICHEROS DEL SERVIDOR AL DISCO DURO DE NUESTRO ORDENADOR

Nos movemos por los directorios del servidor. Marcamos los ficheros que deseamos bajarnos. Pulsamos la Flecha que apunta hacia la Derecha

LECCION 5 Gestionar el servidor de Internet

CREAR UN DIRECTORIO EN EL SERVIDOR

Pulsamos sobre MkDir

Le ponemos un nombre a la nueva carpeta es decir al directorio que deseamos crear. En nuestro ejemplo escribimos en el recuadro CursoFrontPage. Para evitar problemas de compatibilidad con diferentes navegadores es aconsejable poner un nombre sin dejar huecos. Y tampoco utilizar acentos, "" o smbolos diferentes al alfabeto estndar NorteAmericano.

En la ventana del programa se mostraran las diversas carpetas que hemos creado. En este caso se muestran como carpetas amarillas que hemos creado para ordenar los ficheros del servidor.

ELIMINAR

Marcamos el fichero o el directorio que deseamos borrar. Antes de borrar un directorio debemos asegurarnos que este no contiene ficheros que

deseamos mantener. Es preciso tener cuidado con lo que se elimina para no perder informacin o ficheros valiosos. Pulsamos sobre Delete

SALIR

Pulsamos Close Y pulsamos Exit

Alojamiento de pginas

Tenemos una primera opcin que hemos comentado anteriormente y es el alojamiento gratuito. Numerosas pginas personales se alojan en Portales que ofrecen espacio gratuito. Este sistema suele tener muchas limitaciones y restricciones. Podemos alojar nuestra pgina gratis en GratisWeb por ejemplo o en Iespana Para las Webs de empresas o profesionales lo normal es un alojamiento de pago con una direccin propia. Existen numerosas empresas que proporcionan alojamiento. Por ejemplo, en castellano son importantes Arsys.es y Acens. Para buscar y comparar alojamiento podemos ir a la pgina BuscaHost Existen proveedores de los Estados Unidos que proporcionan alojamientos a bajo coste de gran capacidad. Aunque las instrucciones suelen estar en idioma ingls. Por ejemplo Yahoo y Linuxwebhost. Para buscar y comparar alojamientos en empresas Norteamericanas podemos hacerlo en Hostindex Podemos tener distintos tipos de alojamientos, dependiendo del sistema operativo o

si compartimos el ordenador con otros clientes. Dependiendo del sistema operativo que utilizan podemos distinguir servidores:

Los servidores Windows que suelen ser ms caros. Y los servidores que emplean el sistema operativo Unix o Linux y que evitan a Bill Puertas.

Ciertas bases de datos o programas funcionarn en unos servidores pero no en otros. Las empresas de alojamiento suelen especificar en las caractersticas tcnicas de sus servidores que programas y bases de datos soportan. El tipo de alojamiento puede ser: 1. Alojamiento compartido. Es el ms frecuente. A menos que se trate de una pgina con muchas, muchas, visitas esta es la opcin tpica. En este tipo de alojamiento varias pginas comparten un servidor. Cada cliente tiene asignada una parte del disco duro que gestiona con independencia. Un alojamiento compartido es como un apartamento en un edificio. 2. Servidor dedicado. Todo el ordenador es para una pgina o empresa. Es un sistema ms costoso. Apropiado para empresas con pginas que reciben muchas miles de visitas cada da. Es como tener una vivienda independiente. Si tiene dudas contrate un alojamiento de bajo coste. En caso de necesitar ms recursos, normalmente puede aumentarlos rpidamente comunicndoselo a la empresa de alojamiento. Algunas empresas incluso disponen de sistemas automatizados para solicitar el incremento de los recursos.

LECCIN 1 Introduccin

El programa Dreamweaver de Macromedia es uno de los programas ms utilizados en todo el mundo para la creacin de paginas WEB . Es empleado tanto por profesionales como por personas que se inician en la creacin de su primera pagina web. De hecho muchos lo consideran ampliamente superior a otros programas similares, tales como FrontPage de Microsoft . Aqu no vamos a entrar en quien tiene o deja de tener razn. Lo que si vamos a hacer es tener una primera aproximacin a la ltima versin de Dreamweaver : la versin 7 de Macromedia Dreamweaver MX 2004. Mostraremos de una forma fcil y didctica como sacar provecho de l con unos pocos clicks y nos pondremos en la senda para poder penetrar mejor en sus secretos. El objetivo de este curso es mostrar las principales funcionalidades de Dreamweaver , de manera que cuando acabemos el curso cualquiera sea capaz de comprender el programa y este capacitado para afrontar la creacin de una pgina Web. Muchos creen que como Dreamweaver es un programa usado por profesionales, tiene que ser muy complicado para los usuarios ocasionales. Realmente Dreamweaver es un programa muy sencillo e intuitivo , que puede ser utilizado a muchos niveles. Desde el ms bsico suficiente para crear una pagina personal de un usuario novel, hasta gestionar todo un Site empresarial con un contenido de cientos de paginas En las prximas lecciones iremos presentando de forma fcil y didctica, las distintas funcionalidades del programa. El alumno podr seguir las lecciones tanto con el texto como con las lecciones multimedias que se muestran al final de cada leccin. El objeto de estas demostraciones multimedias es reforzar el contenido didctico de cada leccin mostrando como se hace realmente en el programa. LECCIN 2 Iniciar Dreamweaver El primer paso para utilizar un programa es iniciarlo. El programa Dreamweaver de Macromedia , al igual que casi todos los programas que se pueden ejecutar en un entorno Windows puede iniciarse por varios caminos distintos. Dependiendo tanto de la configuracin que hayamos elegido durante su instalacin, como de nuestras preferencias personales.

En esta leccin aprenderemos varias de ellas, luego depender de sus gustos personales elegir una u otra de ellas para iniciar la aplicacin Dreamweaver. La forma ms sencilla es pulsar con un doble click del ratn sobre el icono de Dreamweaver situado en el escritorio.

Otros lugares desde donde podemos iniciar el programa Dreamweaver es desde el botn de inicio, situado en el esquina inferior izquierda del escritorio.

Cuando pulsemos sobre el se desplegara el men inicio. Y pulsaremos sobre el icono de Macromedia Dreamweaver MX 2004.

Por ltimo hay un lugar ms desde donde podemos iniciar el programa: Slo tenemos que pulsar en Todos los programas. Y despus en la carpeta Macromedia

Y finalmente en la opcin de Macromedia Dreamweaver. Y ya tendremos lista la aplicacin para poder utilizarla.

LECCIN 3 Entorno de Trabajo El programa Dreamweaver es una aplicacin muy completa con un gran nmero de funcionalidades muy potentes, pero a la vez esta diseada para hacer ms cmodo el trabajo al usuario. Naturalmente tener una aplicacin con un gran nmero de funciones implica un gran nmero de botones, mens, opciones y pulsar cientos de clicks, que a primera vista puede resultar muy complicados Entonces cmo puede Dreamweaver combinar a la vez potencia y comodidad? Esto lo hace permitiendo que el usuario personalice a su gusto el entorno de trabajo. En esta leccin vamos a familiarizarnos con las principales reas de trabajo de Dreamweaver. En la imagen inferior vemos sealada la barra de titulo , en ella adems de ver el nombre de la aplicacin, el ttulo de la pgina que tengamos activa, tambin veremos los iconos de gestin de ventanas tpicos de Windows.

Debajo de la barra de ttulo tenemos la barra de Mens , en ella tenemos acceso a todos los mens, desde los cuales podemos manejar con eficiencia las numerosas opciones de Dreamweaver.

Debajo de la barra de Mens, nos encontramos la barra de los grupos de paneles, la cual es contextual, esto significa que va cambiando dinmicamente segn la tarea en la que estemos trabajando.

En el centro de la pantalla nos encontramos con la pantalla de inicio. Este contenido aparece cuando no tenemos ningn documento activo y podemos distinguir tres zonas distintas.

En la zona de la izquierda: vemos la lista de los documentos usados ms recientemente y nos da la opcin de abrir cualquiera de ellos rpidamente pulsando sobre ellos. En la zona central: podemos crear un nuevo documento en blanco en cualquiera de los formatos mostrados. En la zona de la derecha: Dreamweaver nos permite utilizar unas plantillas de ejemplos para crear nuestros documentos de una manera rpida y sencilla. En la izquierda y en la zona inferior de la ventana de dreamweaver tenemos otros paneles con funciones avanzadas.

Las cuales iremos descubriendo a lo largo del curso, segn los necesitemos, para no hacer demasiado ridos los primeros temas.

LECCIN 4 Ventana del Documento En esta leccin y la siguiente vamos a seguir descubriendo las distintas zonas de trabajo de la aplicacin Dreamweaver de Macromedia. En esta leccin nos centramos en los iconos que estn relacionados con la ventana del documento. En la ventana del documento es donde visualizaremos y editaremos la pgina web en la que trabajemos. Aqu tenemos abierto un documento llamado Untitled-1

En la imagen superior vemos que la barra del titulo del documento tiene los tpicos controles de minimizacin, maximizacin y cerrar ventana. Esto es til en el caso de que tengamos abiertos simultneamente varios documentos. En la parte inferior de la ventana de Dreamweaver tenemos la barra de estado

En la parte inferior derecha de la barra de estado podemos ver varios indicadores muy tiles. Con el de la derecha Dreamweaver nos indica el tamao del documento en KiloBytes y el tiempo que un navegador estndar tardara en visualizar completamente la pgina con una conexin telefnica a Internet. A su izquierda Dreamweaver nos indica las dimensiones en pixels de la pgina que estamos creando.

Podemos elegir entre una lista de tamaos predeterminados. El tamao ptimo depende de las dimensiones del monitor o pantalla en que se visualice la pgina. Dado que por ahora la mayora de los usuarios de Internet tienen monitores de 800x600 pxeles . Si diseamos una pgina con un tamao superior provocamos que las personas que nos visiten visualicen incorrectamente nuestras pginas. Debemos tener muy presente que el objetivo de nuestra pgina es que sea vista por el mayor nmero posible de personas, por lo que no debemos poner trabas innecesarias a nuestros visitantes. LECCIN 5 Vistas de Edicin En la barra de documentos en la esquina superior derecha vemos tres botones que modifican la vista de trabajo del documento: Codigo, Dividir y Diseo:

Son las tres formas que Dreamweaver nos permite visualizar el documento para su edicin. En la vista Cdigo Dreamweaver nos muestra el cdigo HTML de la pgina y nos permite editar directamente las instrucciones con las que el navegador del usuario mostrar la pgina.

Mas adelante veremos que significa esto exactamente. En la vista Diseo Dreamweaver nos muestra la pgina tal como se visualizar en el navegador del usuario, podemos editarla sin necesidad de conocer el lenguaje HTML. Por ltimo, la vista Dividir , nos muestra simultneamente el cdigo y la vista de diseo, de esta manera podemos escribir instrucciones en lenguaje HTML en la pgina e instantneamente comprobaremos como se visualizara en un navegador. De toda maneras si queremos ver en pantalla completa como se visualizara la pgina podemos pulsar en el icono de previsualizacin.

Y Dreamweaver abrir una ventana del navegador que tengamos asociado por defecto y nos mostrara la pagina completa. En la ventana de previsualizacin podemos detectar tanto los errores de diseo como los de cdigo, y directamente corregirlos en la aplicacin de Dreamweaver sin tener que grabar y abrir el documento con cada prueba LECCIN 6 Abrir un Documento Nuevo Ya hemos visto las principales zonas de trabajo de Dreamweaver. Ahora, en las prximas lecciones vamos a aprender las operaciones bsicas de manejo de documentos tales como crear un nuevo documento, grabarlo para poder recuperarlo en el futuro, abrir documentos almacenados... El primer paso es abrir un documento nuevo. En la Leccin 3 de este curso de dreamweaver aprendimos una forma de crear documentos nuevos.

Ahora vamos a ver otra forma de crear nuevos documentos. Para ello debemos ir a la barra de mens . Y pulsar en el men Archivo

En el men que se desplegar, buscaremos la opcin Nuevo y pincharemos en ella con el botn izquierdo del ratn.

Se nos abrir una ventana como la que vemos en la imagen inferior. En ella podremos elegir entre diversos tipos de documentos, el que deseemos crear. Nosotros pulsaremos en la pestaa General y en el panel de la izquierda llamado categora elegiremos Pgina bsica. El panel adyacente cambiar de manera contextual dependiendo que opcin hayamos elegido en el panel de categoras. Como por ahora hemos elegido pgina bsica. Este ser el ttulo del panel y entre las distintas opciones pulsaremos sobre HTML.

Vemos que hay una gran variedad de documentos que podemos crear desde aqu. Ms adelante veremos algunos de ellos, a medida que los necesitemos. LECCIN 7 Guardar un Documento Una vez que hemos aprendido a crear documentos nuevos, cuando hayamos terminado de trabajar con ellos, necesitaremos aprender a guardarlos para poder recuperarlos en el futuro. Para ello desplegaremos de nuevo el men archivo y buscaremos esta vez la opcin guardar.

Al pulsar sobre la opcin guardar se nos abrir una ventana titulada Guardar como. En ella vemos varias zonas importantes. En la zona superior podemos elegir la carpeta donde queramos guardarlo, es donde pone Guardar en.

Y en la zona inferior introduciremos el nombre con el que deseamos conservar el documento. Para finalizar slo tenemos que pulsar el botn guardar en la ventana activa. En esta leccin hemos aprendido otra manera de crear documentos nuevos con dreamweaver y tambin hemos aprendido a guardarlos.

LECCIN 8 Recuperar un Documento En la leccin anterior aprendimos a guardar documentos creados con dreamweaver. En esta leccin aprenderemos a recuperarlos para poder trabajar con ellos. El primer paso es ir al men archivo, pulsaremos sobre el con el botn izquierdo del ratn. Y en el men que se desplegar buscaremos la opcin abrir.

Una vez que hayamos pulsado sobre la opcin abrir del men archivo. Aparecer una ventana de dialogo como la que vemos en la ventana inferior. Es un cuadro de dialogo muy semejante al que ya conocimos cuando guardamos el documento En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar donde tenemos almacenado el documento.

Cuando hayamos encontrado la carpeta solo tendremos que elegir de entre la lista mostrada el ttulo del documento que deseemos abrir y pulsaremos sobre el con el botn izquierdo del ratn. LECCIN 9 Cerrar un Documento Una vez que hemos aprendido a crear un documento, a guardarlo y a recuperarlo. Vamos a aprender ahora a cerrar el documento. Esto lo haremos cuando hayamos acabado de trabajar con el documento en cuestin, bien porque ya no lo necesitemos mas, o por que tengamos muchos documentos abiertos y necesitemos despejar un poco el rea de trabajo. Para ello iremos otra vez al men archivo, tal como ya sabemos. Y all pulsaremos en la opcin cerrar. Tal como vemos en la imagen inferior.

Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece un cuadro de dilogo como el que vemos en la siguiente imagen.

En este cuadro nos pregunta, en el caso de que hayamos modificado algo desde la ultima vez que grabamos el documento, si queremos guardar los cambios en el documento en el que hemos estado trabajando. Si pulsamos no, todos los cambios realizados desde la ultima grabacin sern descartados. Esto es util en el caso de que no nos guste nuestra pagina y prefiramos una versin anterior de ella, esto es algo que suele pasar mas a menudo de lo que nos gusta reconocer. O bien, si pulsamos s. Se guardaran los cambios realizados sobre el documento. Pero, atencin, es posible que hayamos cometido un error y hayamos pulsado el botn si, de manera mecnica. Dreamweaver nos da una ultima oportunidad para meditarlo y nos muestra otra ventana de dialogo como la inferior.

Por ultimo, una vez que hayamos guardado, o no, los cambios sobre la pagina solo nos queda salir del programa. Y para ello volveremos al men archivo. Buscaremos en el final del men y pulsaremos sobre la opcin Salir

Una vez que pulsemos aqu, el programa de dreamweaver se cerrar y nos mostrara el escritorio.

LECCIN 10 El Sitio Introduccin a la configuracin de El Sitio: Ya hemos tenido nuestro primer contacto con el entorno Dreamweaver . Hemos aprendido cuales son las diferentes partes de la ventana de trabajo de Dreamweaver y a movernos entre ellas. Tambin hemos aprendido las funciones ms bsicas, tales como crear una pgina nueva, guardarla, cerrarla y como recuperarla. Pero no debemos olvidar una cosa, hasta ahora slo hemos creado una pgina web en blanco. Pero las pginas de verdad tienen contenido y este contenido puede formarse con diversos documentos que puede ser desde otras pginas html, imgenes, scripts, animaciones, hasta cualquier tipo de objeto que podamos vincular en una pgina html. El conjunto de todos estos documentos que forman parte de la pgina se llama en el lenguaje de las pginas web un Sitio, site en ingles. En esta leccin, y las siguientes, vamos a aprender a disear un Sitio para albergar nuestras pginas y sus elementos, de una forma sencilla y didctica. Ahora que sabemos lo que es un Sitio vamos a configurarlo paso a paso. Todas las opciones de configuracin estn en el men Sitio de la barra de mens.

Pulsando sobre el men Sitio, se despliega el men. Para configurarlo por primera vez pulsaremos en la opcin Administrar sitios.

Dreamweaver abrir una ventana de dialogo con todas las opciones para administrar el sitio. Como an no tenemos creado ninguno, pulsaremos en el botn Nuevo.

Y Dreamweaver nos preguntar qu es lo que queremos crear exactamente un Sitio o un Servidor FTP y RDS?. Por ahora slo vamos a crear un Sitio. En la prxima leccin continuaremos con la creacin del sitio.

LECCIN 11 Configurar un Sitio Nuevo En la leccin anterior comenzamos a configurar un Sitio nuevo, ahora vamos a continuar Acabamos la leccin anterior confirmando en la ventana de dilogo que queramos crear un nuevo Sitio. Pulsaremos sobre la opcin sitio.

Veremos que se abre otra ventana de dialogo, ahora iremos contestando a las preguntas que nos va haciendo Dreamweaver y pulsaremos el botn siguiente despus de rellenar cada

ventana con las respuestas que nos pide. La primera cuestin que Dreamweaver nos plantea es el nombre del sitio. Es muy util que el nombre tenga una fuerte relacin con el contenido de la pgina para poder recordarlo fcilmente.

La respuesta a la siguiente pregunta depender de la tecnologa con la que deseemos trabajar. Ya dijimos antes que una pgina web puede enlazar documentos de muy diferentes tipos, algunos de ellos son utilizados para intercambiar informacin con el servidor. En esta opcin elegimos el tipo documento dependiendo de las caractersticas del servidor con el que trabajaremos.

Para este curso no vamos a utilizar las tecnologas de servidor, as que elegiremos la opcin No .

La cuestin de abajo se interesa en la forma en como subiremos las pginas que creemos al sitio de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto elegiremos la opcin Ninguno.

Y con esto hemos acabado de proporcionarle a Dreamweaver la informacin necesaria para configurar nuestro sitio. LECCIN 12 Editar un Sitio En las lecciones anteriores ayudamos a Dreamweaver a configurar nuestro sitio. En esta leccin vamos a personalizar un poco ms nuestro sitio para adecuarlo a nuestras necesidades de trabajo. Para ello volvemos a la ventana de dialogo Administrar sitios.

Y esa vez, como ya tenemos creado el sitio CursoDreamweaver pulsaremos el botn Editar.

Y en la ventana de dialogo. Pulsaremos en la pestaa Avanzadas. Y en el men categora pulsaremos la opcin Datos locales.

En la seccin Datos locales podemos cambiar y ajustar los valores del sitio, tales como Nombre del sitio, que ya conocemos. Y la Carpeta raz local, esto significa que podemos designar manualmente la carpeta donde deseemos situar las pginas que creemos y los documentos vinculados a ella. Con la opcin Actualizar lisa archivos nos aseguramos que cuando modifiquemos un archivo se actualice automticamente las carpetas locales durante las copias. Por ltimo con la opcin carpeta predeterminada de imgenes le diremos a Dreamweaver donde situaremos agrupadas todas las imgenes con las que trabajemos, esto es muy til para no tener mltiples rutas lo que nos evitan posteriormente muchos errores de vinculacin.

Por ltimo, en las opciones de la imagen inferior, configuramos la direccin http de nuestro sitio, con lo que Dreamweaver detecta y distingue automticamente las direcciones www de pginas internas a nuestro sitio, con lo que se ahorran tiempo al navegar. Con la opcin cach, Dreamweaver , actualiza y gestiona todos los cambios de las pginas y sus enlaces interiores automticamente, por ejemplo si cambiamos una imagen no tenemos que ir modificando una a una todas las pginas.

LECCIN 13 Opciones Administrar Sitios

Ya hemos aprendido a configurar el sitio, ahora veremos rpidamente el resto de las opciones de la ventana de dialogo Administrar sitios. Que nos ayudarn a gestionar ms fcilmente nuestro sitio.

Las opciones nuevo y editar, ya las conocemos, por lo que no nos reiteramos ms en el tema.

Las siguientes opciones son Duplicar, Quitar y Exportar. Con duplicar conseguimos crear un duplicado del sitio que tenemos activo, con ello logramos duplicar totalmente la estructura del sitio. Es muy til para crear duplicados perfectos del sitio en otros servidores, sobre todo si tenemos utilizarlo como plantilla de la estructura. Cuando tengamos un numero importante de sitios, algunos de ellos estarn obsoletos o simplemente no los necesitaremos ms, podemos eliminarlos pulsando el botn Quitar. La opcin Exportar nos permite guardar las caractersticas del sitio en un archivo XML, de forma que con un slo archivo podemos guardar, recuperar, e incluso compartir con otras personas las caractersticas del sitio fcilmente

Las ltimas opciones son Importar, Ayuda y Listo. Importar es la opcin complementaria de Exportar, con ella podemos crear un nuevo sitio a partir de las caractersticas de otros sitio exportado. La opcin ayuda, se explica en si misma.

Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botn "Listo" y todos nuestros cambios sern actualizados.

LECCIN 14

El Texto En esta leccin y las prximas crearemos, de verdad, nuestra primera pgina web. Al principio ser slo una pgina con texto e iremos descubriendo las distintas funcionalidades de Dreamweaver , respecto al formato de los textos. Para comenzar, necesitamos crear una pgina nueva y darle un buen titulo. Como ya hemos visto esto en lecciones anteriores iremos directo al grano. Pero en la animacin de abajo podemos ver todos los pasos desde cero. Una vez que hayamos creado la pgina y le hayamos dado el titulo, escribiremos en la vista de diseo el texto normalmente, ya nos preocuparemos despus por los formatos.

Una vez que hemos escrito el texto de nuestra primera pgina , pulsaremos en el grupo de paneles insertar.

Y de entre las opciones podemos elegir el tipo de panel insertar que vamos a tener activo. Este depender de la accin que vayamos a realizar.

En comn tenemos las opciones ms habituales, sin embargo las dems estn especializadas en algn tipo determinado de accin.

Por ejemplo nosotros vamos a trabajar con el texto, por lo que pulsaremos en la opcin texto. En el caso de que queramos tener acceso a todos los paneles de forma rpida pulsaremos la opcin Mostrar como fichas LECCIN 15 Formateando Textos En la leccin anterior aprendimos que escribir en nuestra pgina web era tan fcil como simplemente teclear en la vista de diseo. En esta leccin y las siguientes veremos que en Dreamweaver adems de aadir texto fcilmente, podemos darle formato y aplicarle un gran nmero de efectos que ayudarn a realzar nuestra pgina web. Acabamos la leccin anterior activando la opcin Texto en la barra de los grupos de paneles insertar. En la imagen inferior vemos como aparece la ventana de trabajo.

Darle formato a un texto es tan sencillo como seleccionar la zona que deseamos y buscar en los iconos de la pestaa texto, el efecto que deseemos aplicarle. En este caso, al primer prrafo de nuestro documento vamos a darle una apariencia de Encabezado1, para ello pulsamos h1.

Al segundo prrafo le daremos un formato de Encabezado2, pulsando h2

Y al tercer prrafo le daremos formato de Encabezado 3.

En la barra texto, vemos otros iconos con distintos formatos. Por ejemplo, pulsando el icono B, resaltamos el texto seleccionado, con I, le damos al texto seleccionado nfasis un formato inclinado como el de la letra itlica de los procesadores de textos.

Sin embargo, En el lenguaje HTML, existen sus propias formas de resaltar y dar nfasis, de hecho se hace pulsando en los iconos S, que viene de la palabra Strong en ingles y el icono em que viene de la palabra Emphasis. Estos dos efectos son virtualmente iguales a B e I, aunque puede que cada navegador le de una pequea variacin al aspecto de uno u otro.

LECCIN 16 El Panel de Propiedades Ya hemos tenido un primer acercamiento a la barra texto del grupo de paneles insertar. Ahora vamos a ver como puede el panel propiedades ayudarnos a mejorar el aspecto de nuestro textos En la imagen inferior tenemos una vista general del panel.

Desde el panel propiedades podemos, tras seleccionar una lnea o prrafo, aplicarle por ejemplo un formato centrado, simplemente pulsando en el icono de la imagen.

Podemos combinar en una misma pgina varios tipos de alineamiento, por ejemplo podemos darle al segundo prrafo un alineamiento ajustado y mantener al mismo tiempo el centrado del primer prrafo.

Vamos a probar, ahora, el alineamiento derecho en el tercer prrafo.

Por ltimo, podemos aplicarle a todo un prrafo una sangra. Tal como vemos en la imagen inferio. r

LECCIN 17 Formatos en el Panel de Propiedades En la zona izquierda del panel de propiedades, tenemos unas opciones que an no conocemos y que vamos a ver en esta leccin. Estas son las propiedades, Formato, Fuente, Estilo, Tamao, Color

Vamos a verla poco a poco. La primera opcin Formato nos permite cambiar el formato del prrafo, por defecto los prrafos no tienen formato, pero podemos elegir uno de la lista. Segn el que elijamos nuestro prrafo tendr una apariencia u otra. En la leccin anterior vimos los formatos de encabezado 1 a 3, aqu tenemos ms opciones para aplicar.

En la opcin fuente podemos predeterminar que juego de fuente ser visible por el usuario, esta opcin es muy til, en el caso de que el usuario no tenga instalada la fuente elegida por nosotros para nuestra pgina , podemos establecer con esta instruccin un juego de fuentes suplentes.

La opcin estilo hace referencia a una funcionalidad avanzadas de un formato de pginas

llamado CSS, por ahora no lo vamos a ver. Basta saber que existe y que controla la forma en que escribimos las instrucciones para el navegador.

En la opcin tamao, elegimos el tamao de la fuente, si estamos acostumbrados a usar procesadores de textos. podemos sorprendernos que a parte del tamao por punto, al que podemos estar acostumbrados, vemos tambin tamao pequeo o mayor, por ejemplo. Esto se explica porque los navegadores permiten al usuario elegir el tamao de visualizacin de la letra, y si el usuario cambia el tamao, puede perderse el efecto deseado. Con los tamaos relativos, podemos conservar el efecto visual del texto aunque el usuario cambie estos valores en su navegador.

Por ltimo podemos utilizar colores para dar ms vistosidad a nuestros textos, slo tenemos que marcar el texto que queramos colorear y elegir un color de la tabla.

Ms adelante veremos como podemos sacarle ms partido al color en nuestras pginas web. LECCIN 18 Las Listas Cuando estamos creamos una pgina web nos encontraremos, muchas veces, con que deseamos dar a nuestros un textos un aspecto ms ordenado. En un editor de textos utilizaramos las listas. Dreamweaver tambin nos permite crear listas para hacer ms atractivos nuestras pginas. Una de las formas de crear listas con Dreamweaver es activar la barra Texto, para ello pulsaremos, tal como vemos en la imagen inferior, en el botn Comn .

Y en el panel que se despliega seleccionremos la opcin Texto.

Ya hemos visto anteriormente algunas de las funcionalidades del panel texto, ahora vamos a continuar explorndolo con las funciones de listas. Pulsaremos el botn ul. Con este botn activamos la opcin Listas simples o no ordenadas.

Qu es una lista simple? La mejor de forma de verlo es a travs un ejemplo. Si seleccionamos la lista simple, la lnea donde tengamos activo el cursor de texto ser el comienzo de una lista. Cuando pulsemos la tecla enter, Dreamweaver convertir el texto introducido en esa lnea en una entrada de la lista y prepara la siguiente lnea como otro elemento de la lista.

Para terminar de introducir elementos en la lista slo tenemos que pulsar la tecla enter dos veces seguidas y ya podremos continuar escribiendo normalmente.

LECCIN 19 Dar Formato a las Listas En esta leccin y la prxima vamos a ver como aplicar formato tambin a las listas. Podemos acceder a las opciones de formato desde el panel propiedades, en la parte inferior de la ventana de Dreamweaver .

Para dar formato el primer paso, es siempre marcar el texto al que deseemos aplicarle el formato. Una vez que lo hayamos marcado deberos buscar en el panel propiedades el icono del formato que deseemos aplicarle. Atencin, en lecciones anteriores vimos que podamos aplicarle formato a todo un prrafo simplemente situando el cursor en cualquier punto del prrafo. Pero si queremos aplicar

formato a las listas deberemos marcar toda la lista, y no slo un elemento.

Esto es debido a que Dreamweaver nos permite aplicar formatos diferenciados a cada elemento de la lista, en el ejemplo de la imagen inferior vemos como hemos resaltado slo uno de los cuatro elementos de la lista, pulsando el icono B

Dreamweaver nos permite combinar de forma sencilla distintos formatos sobre el mismo elemento. Por ejemplo en la imagen inferior hemos combinado el resaltado con el efecto Itlica .

En prximas lecciones continuaremos explorando los efectos que podemos aplicar a las listas.

LECCIN 20 Las Listas Ordenadas Vamos a dejar por un momento los formatos de las listas y en esta leccin aprenderemos otro tipo de listas. Las listas ordenadas, en contra de lo que pudiera parecer a primera vista, no se llaman as porque ordenen nuestras listas alfabticamente o por cualquier otro criterio. Una lista ordenada se diferencia de las dems, porque a cada elemento antecede un nmero en orden creciente.

En Dreamweaver podemos crear una lista ordenada, tanto pulsando en el icono de lista ordenada del panel propiedades, o en el icono ol de la barra texto, en el grupo de paneles insertar.

El funcionamiento para aadir elementos de las listas o cerrar la lista es idntico al que hemos visto en la leccin de las listas desordenadas. Tambin podemos aadir elementos a una lista pulsando en el icono li , tal como vemos en la imagen inferior.

Finalmente este es el aspecto de nuestra lista ordenada.

En esta leccin hemos visto que son y como crear listas ordenadas. En la leccin prxima continuaremos aplicando formatos a las listas.

LECCIN 21 El Formato para Listas Ordenadas En esta leccin vamos a continuar descubriendo los formatos que podemos aplicar a las listas. Seguimos investigando las opciones disponibles en el panel de propiedades, esta vez en la zona de la derecha. Empezaremos con la opcin formato, si pulsamos sobre la pestaa, vemos que se despliega un men con gran nmero de opciones, algunas de ellas ya las conocemos de la barra texto del panel insertar. Por ejemplo encabezado 1, 2 y 3. Pero en la imagen de abajo vemos que en el men formato, tenemos muchas ms opciones. Pulsando en cada una de ellas aplicamos al prrafo un formato de tamao y estilo distinto.

Hablando de Estilo, a la derecha de la opcin formato, nos encontramos con la opcin estilo. Esta opcin es algo engaosa, ya que con estilo no se refiere al texto, sino al estilo de la pgina web. Esta opcin es muy til en el caso de que estemos utilizando tecnologas CSS, pero esto pertenece a un nivel muy superior a los objetivos de este curso. Baste saber por ahora que al igual que el mundo real, hay distintos tipos de leguajes en el que se pueden crear las pginas webs. Algunos de ellos son el lenguaje Html, el lenguaje Xml, o el CSS, entre otros muchos. El objetivo de este curso es aprender el uso de la aplicacin Dreamweaver de Macromedia, por lo que de los distintos tipos de lenguajes slo tenemos que saber lo necesario para convencernos de que Dreamweaver nos permite hacer casi de todo sin tener que programar una sola lnea en ningn lenguaje web.

Siguiendo con los formatos, tenemos la opcin Fuente. Esta opcin tambin puede confundirnos. No se refiere a la fuente que vamos a aplicar directamente al texto, si no a las fuentes predeterminadas y en el orden que el navegador del usuario intentar aplicarlas a nuestra lista en el caso de que no encuentre en su memoria las fuentes con que nosotros hemos creado la lista.

Como novedad podemos comprobar que adems de los tamaos numricos, al que debemos estar acostumbrados, tambin nos encontramos con otros tamaos pre-establecidos Small o mdium o large (pequeo, mediano, grande). Estos tamaos tienen su razn de ser en los navegadores permiten a los usuarios cambiar, con slo un clic, el tamao de visualizacin de los textos. Con estas opciones podemos tener un control mayor sobre la forma en que nuestros textos se mostraran con independencia del tamao que haya elegido el usuario para visualizarlos.

Por ltimo, podemos tambin realzar nuestras listas modificando el color del texto, ya sea de un nico elemento de la lista, o de toda ella. En el panel de color, podemos elegir una gran variedad de modos de asignar color, podemos pulsar uno predefinido de la tabla mostrada, o podemos situar la pipeta sobre cualquier color de la pantalla y capturarlo para nuestra lista.

Tambin podemos elegir las opciones de colores avanzadas, aunque es posible que dependiendo del navegador del usuario y las caractersticas de su tarjeta grfica los colores no se muestren exactamente como nosotros deseamos.

LECCIN 22

Los Elementos de las Listas Ya hemos visto como crear listas ordenadas y listas desordenadas. En esta leccin vamos a profundizar en el motivo de su existencia, los elementos de las listas. Para ello pulsaremos en el botn elemento de la lista, que est en el panel de propiedades.

Dreamweaver, nos mostrar una ventana de dilogo llamada propiedades de lista. En la primera opcin, tenemos Tipos de lista, con esta opcin podemos elegir como mostraremos la lista. Podemos, entre otros modelos, crear listas numricas, o listas en las que cada elemento sea mostrado precedido por un punto...

Tambin podemos, pulsando en la opcin estilo, elegir el estilo numrico para nuestra lista. Por ejemplo, podemos querer mostrar una lista numrica normal, o quizs queramos que nuestros elementos sean mostrados con una lista de nmero romanos, o puede que

queramos una lista alfabtica...

Dreamweaver nos permite tambin elegir el nmero con que comenzar nuestra lista. Podemos no querer comenzar por el uno, o quizs deseemos continuar la numeracin de una lista anterior.

Por ltimo podemos cambiar el estilo de algn elemento concreto de la lista, simplemente pulsando en la opcin elemento de la lista, y configurarlo segn nuestras necesidades.

LECCIN 23 Las Listas de Definicin Ya hemos visto las listar ordenadas y las listas desordenadas. An nos queda un ltimo tipo de listas, las listas de definicin. Qu son las listas de definicin?. Fcil. Una lista donde sus elementos son definiciones. No ha quedado suficientemente claro? Vamos a verlo con un ejemplo. En la imagen inferior vemos una lista de definicin, debajo de cada elemento (Dreamweaver y Explorer) tenemos otro elemento en una lnea con sangra que define el elemento anterior. Esto es una lista de definicin.

Activar una lista de definicin es muy sencillo, simplemente tenemos que situar el cursor

en el punto donde queramos insertarla y pulsar en el botn dl de la barra texto, del panel insertar. Para crear un elemento nuevo, podemos hacerlo como ya hemos visto en las listas anteriores, o bien pulsando en el icono dd

Vamos a explicar un poco ms detalladamente cual es la funcin de cada icono. Dl significa declaracin de la lista, es el icono que pulsamos para crear una lista de definicin nueva. El icono dt, significa trmino de definicin, es la palabra que pretendemos definir. En el ejemplo, es Dreamweaver y Explorer.

El botn dd es la definicin del trmino, es la definicin de cada uno de los trminos.

Con esta leccin hemos acabado de tratar el tema de las listas en Dreamweaver, no lo he dicho explcitamente, pero todo lo mostrado en lecciones anteriores respecto a los formatos de listas es tambin aplicable a las listas de definicin. LECCIN 24 Las Tablas En esta leccin y las siguientes vamos a ver el uso que Dreamweaver le da a las tablas. Este no es un tema insignificante. Las tablas tienen muchsima importancia en el diseo de pginas web. Es el esqueleto sobre el que las pginas se construyen. Pero eso lo veremos en el transcurso de las prximas lecciones. En esta leccin vamos a ir paso a paso y crearemos una tabla normal como las que podemos crear en cualquier procesador de textos. Podemos crear una tabla fcilmente, pulsando en el icono Tabla, de la barra comn, del panel insertar, tal como vemos en la imagen inferior.

Cuando pulsamos sobre el icono, Dreamweaver abre una ventana de dilogo como la que vemos abajo. En ella nos pide que definamos la forma y caractersticas de la tabla que estamos creando.

Simplemente tenemos que introducir un valor en la celda filas y otro en la celda columnas para definir el tamao de la tabla, por ejemplo si introducimos 4 y 3 respectivamente, nuestra tabla tendr 12 celdas, distribuidas en un rectngulo de 4 celdas de alto y 3 celdas de ancho.

Si cambiamos el valor columna 3 por un 5, la tabla tendr ahora 20 celdas, distribuidas en un rectngulo de 4 celdas de alto por 5 de ancho. Desde aqu podemos cambiar tambin el ancho de la tabla, nuestra tabla tiene ahora 300 pxeles. Qu significa esto? Pues los pxeles son una unidad de medida de las pantallas de

televisin y monitores, un pxel es el punto ms minsculo que luz que una pantalla puede manejar. Esto est en relacin directa con la configuracin de pantalla de nuestro monitor, por ejemplo si tenemos una resolucin 800x600, este es el limite mximo de tamao que puede mostrar. En las primeras lecciones vimos que Dreamweaver nos aconsejaba que configurramos los parmetros de nuestra pgina segn las necesidades de nuestros potenciales usuarios. Estos parmetros van a marcar el lmite de la cantidad mximas de pxeles que nuestra pgina podr mostrar de una forma cmoda.

En la imagen superior vemos que Dreamweaver nos permite crear con un slo clic diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia ms esttica a nuestras tablas. En la parte final del cuadro de dilogo, podemos mejorar la accesibilidad de nuestra tabla, esto significa que podemos escribir un texto que se visualizar en el caso de que la tabla no haya podido ser mostrada en el navegador del usuario, ya sea por problema de la red o por carencias del navegado.

Ya que este texto se mostrara como sustituto de la tabla, es importante que cuidemos el aspecto esttico de la pgina cuando esto ocurra. En alinear texto, podemos elegir la posicin en que se mostrara el texto LECCIN 25 Crear Tablas En esta leccin continuaremos aprendiendo a crear nuestra tabla. En la leccin anterior habamos creado una tabla de 5 columnas, por 4 filas y de un tamao de 300 pxeles, y con un texto descriptivo llamado Ejemplo tabla. En la imagen inferior vemos como Dreamweaver nos muestra todos estos elementos en la vista de diseo para que podamos trabajar con ellos. Esto es tal como lo vemos nosotros mientras trabajos con ello, cuando el usuario visualice la pgina slo ver la tabla y su contenido, no todas estas ayudas.

Una de las potencias de crear pginas web con Dreamweaver en la vista de diseo es que no hace falta saber nada acerca de programacin para manejar toda su potencia. Por ejemplo, si queremos redimensionar la tabla, tradicionalmente, tendramos que haber ido al cdigo de la pgina y haber tenido que teclear las nuevas dimensiones con cuidado de

no descuadrar toda la pgina. Sin embargo con Dreamweaver, slo tenemos que pinchar con el ratn sobre un lateral de la tabla y arrastrarla hasta la nueva posicin.

Todas las celdas y las medidas de la tabla quedan automticamente redimensionadas de forma uniforme para adecuarse correctamente al nuevo tamao de la tabla.

Una vez que tenemos las medidas que deseamos para nuestra tabla slo tenemos que introducir el texto dentro de cada celda. En nuestro ejemplo vamos a crear una especie de planning.

Para introducir el texto en cada celda slo tenemos que pulsar con el ratn en el interior de cada celda y escribir el texto. Para validarlo podemos, o pulsar en otra celda, o pulsar la tecla enter.

As hemos creado nuestra primera tabla. En la prxima leccin aprenderemos ms cosas sobre ella, en especial las posibilidades de formato que Dreamweaver nos proporciona LECCIN 26 Filas y Columnas En la leccin anterior, creamos nuestra primera tabla, ahora vamos a ver como Dreamweaver nos facilita el trabajar con ellas. Empezaremos pulsando con el botn derecho del ratn sobre cualquier celda activa de la tabla. Vemos como nos aparece el siguiente men, y pulsaremos la opcin Tabla.

Al lado del men, se despliega otro men. Con numerosas opciones, tales como seleccionar tabla, que nos sirve para aplicar un efecto a toda la tabla, o combinar celdas, para unir varias celdas en una....

Pero ahora vamos a detenernos un instante en el apartado insertar. Vemos varias opciones, como por ejemplo insertar fila, que nos aade una fila a la tabla, as podemos convertir fcilmente una tabla de 5 das en una de seis, con slo un clic.

En la imagen inferior vemos como a nuestra tabla le ha crecido una fila justo entre Lunes y Mircoles. Podemos aadir tantas filas y/o columnas como deseemos.

Pero. Que pasa si por error hemos aadido demasiadas?. No es problema, Dreamweaver hace fcil, tanto insertar como eliminar, simplemente tenemos que pulsar sobre la fila o columna a eliminar con el botn derecho y buscar en el men la opcin eliminar. Una pista, est justo debajo de las opciones insertar.

Y aqu tenemos nuestra tabla, despus de haber aadido y eliminado filas despreocupadamente.

LECCIN 27 Panel de Propiedades de las Tablas En esta leccin vamos a ver como podemos obtener un acabado ms profesional cuando trabajamos con tablas. Y esto lo haremos con la ayuda del panel propiedades. El primer paso es seleccionar la tabla tal como vemos en la imagen inferior, simplemente tendremos que situar el cursor en la esquina de la tabla hasta que aparezca un puntero como el de la imagen y pulsaremos para marcar la seleccin.

Seguidamente desplegaremos el panel propiedades, tal como ya sabemos, pero esta vez podemos llevarnos una sorpresa, el panel no es tal como lo recordbamos, ha cambiado. Ahora las opciones hacen referencia a las propiedades de la tabla. Esta es una de las ventajas de Dreamweaver, para ahorrarnos clics, el programa cambia sus paneles y mens de forma contextual segn la tarea que tengamos activa en cada momento.

En la imagen superior vemos las caractersticas de una tabla por defecto, vemos que tiene 3 filas, 3 columnas, y que sus dimensiones son 533 pxeles de ancho por 118 pxeles de alto, que el borde de la tabla tiene grosor 1, y que el alineamiento es el activo por defecto. Sin embargo, abajo vemos las caractersticas de nuestra tabla. Vemos que algunos valores han cambiado, por ejemplo tenemos 4 filas y 5 columnas, y adems nuestra tabla ya tiene puesto el nombre que nos servir para identificarla.

Vamos a ver el resto de las opciones, en la imagen inferior hemos cambiado las dimensiones de nuestra tabla, simplemente introduciendo nuevos valores en las casillas alto, 100, y ancho, 400 pxeles. Hemos cambiado la alineacin de la tabla a la derecha y hemos engordado un punto los bordes de la tabla.

En la leccin siguiente seguiremos viendo las sorpresas que tiene guardas el panel de propiedades. LECCIN 28 Propiedades de las Tablas En esta leccin continuaremos descubriendo el panel propiedades para las tablas. En la zona inferior del panel podemos cambiar fcilmente los colores tanto del fondo de la tabla como el color del borde de la tabla.

Por ejemplo, en la imagen inferior vemos el resultado de aplicarle a nuestra tabla los colores verde para el fondo y azul para el borde de la tabla. Como conclusin de este ejercicio podemos asegurar que la combinacin de estos dos colores perjudican seriamente la salud de la vista.

Dreamweaver nos permite tambin definir el espacio entre las celdas y la separacin del texto con respecto las paredes de la celda que los contiene, esto los conseguimos dndoles valores a las casillas CellPad y CellSpace.

En las lecciones anteriores vimos como se poda asignar a la tabla un valor de longitud y altura con una medida concreta en pxeles. Esto es fantstico para controlar las dimensiones de visualizacin de la tabla, pero en ciertas ocasiones, es mejor tener que nuestra tabla se adapte a las dimensiones de la pantalla

en que se visualiza, por ejemplo si queremos que la tabla ocupe la mitad derecha de la pantalla, el resultado es muy desigual si la pgina se muestra en un monitor de una resolucin de 800 o en uno de 1024. Para solucionarlo, Dreamweaver nos permite con un slo clic cambiar la medida de nuestra tabla de pxeles a porcentajes. Es decir podemos decir que nuestra tabla ocupe el 50% de la pantalla, sin importar las dimensiones del monitor donde se visualice. LECCIN 29 Las Plantillas En las lecciones anteriores hemos aprendido a crear tablas y los rudimentos su formato. Sin embargo, podemos ir ms all, para darle a nuestras tablas un aspecto ms sofisticado de forma fcil y sencilla. Dreamweaver tiene una poderosa herramienta llamada plantillas que nos ayudara en esta tarea. Para utilizarla simplemente tenemos que ir a la barra de mens de Dreamweaver y pulsar sobre, el men Comandos, tal como se ve en la imagen inferior.

En el men desplegable que se abrir pulsaremos sobre Formatear tablas.

Y Dreamweaver nos abrir una ventana de dilogo llamado Formatear Tabla. En esta ventana de dilogo tenemos una gran cantidad de opciones, que para no abrumarnos vamos a ir viendo poco a poco. En la parte superior, tenemos 3 zonas, la izquierda es una men deslizante en el que pulsando sobre cada una de las entradas, podemos ver en la parte central del cuadro de dilogo un ejemplo de la plantilla elegida. Para elegir una plantilla slo tenemos que pulsar sobre la opcin deseada, veremos un ejemplo del formato en la parte central.

Y cuando estemos conforme con la eleccin pulsaremos en los botones aplicar y aceptar de la zona de la derecha de la venta.

En la imagen inferior vemos como queda el formato de plantilla elegido sobre la tabla que habamos diseado en la leccin anterior. Observa que lo nico que ha cambiado es el formato de la tabla, ni el contenido, ni sus dimensiones. Nuestra tabla tiene ahora los colores y la esttica de la tabla de la plantilla, pero Dreamweaver respeta la forma en que nosotros hemos incrustado la tabla en nuestra pgina.

LECCIN 30 Formatear tablas En esta leccin vamos a continuar explorando las plantillas para formatear tablas. Siempre es una buena idea, perderle el miedo al ordenador, y decidirse a investigar las opciones que los mens nos ofrecen. Curioseando, por ejemplo, podemos descubrir lo bonito que combinan los colores magenta y azul en una tabla Dreamweaver.

Aunque puede que no nos convenza las combinaciones de colores prediseadas y decidamos crear nuestra propia combinacin de colores simplemente pulsando en las casillas de colores de filas y eligiendo un color primario y un color secundario Los alumnos ms observadores ya se habrn dado cuenta de que cada vez que elegimos un color tiene un nmero hexadecimal asociado, Este es un nmero universal de identificacin para cada color. Con este nmero podemos estar seguros de que hemos elegido el mismo color exactamente.

Sin embargo, si no conocemos el nmero hexadecimal, siempre podemos pulsar en el botn color, para desplegar la tabla de colores y elegir en ella el que deseemos.

Por ejemplo, en la imagen inferior vemos como queda la combinacin de colores verde y azul. Podemos ver en la imagen que el cdigo para el color verde es #00CC00 y que para el color azul es #333399. Sabiendo estos cdigos, podemos utilizar exactamente estos mismo colores en todas las pginas que queramos.

Hay un ltimo elemento que vamos a ver en esta leccin y es la distribucin de colores en las tablas. Dreamweaver nos permite con un slo clic distribuir los colores de la forma que deseemos. Por ejemplo pulsando en la pestaa Alternar podemos alternar los colores cada fila, cada dos, tres o cuatro filas.

En la imagen inferior podemos ver el resultado de distribuir los colores cada tres columnas en la plantilla de muestra.

LECCIN 31 Formato de Plantillas En esta leccin vamos a terminar de descubrir las opciones de formato de las plantillas de tablas. En la parte inferior de la ventana de dilogo, encontramos las opciones de formato de los encabezados de la plantilla. Vimos como crear encabezados para tablas en lecciones anteriores, pero puede ser que nosotros deseemos darle a nuestros encabezados un aspecto ms personalizado. Lo haremos desde este panel.

La primera opcin se refiere a la fila superior de la tabla, podemos definir el alineamiento del texto del encabezado, podemos elegir alinearlo a la izquierda, a la derecha o centrarlo. O simplemente dejarlo si definir.

Con estilo de texto, podemos darle ms presencia a nuestros encabezaos, resaltndolo con un estilo de letra negrita, o itlica o por qu no? Combinar a la vez resaltada e itlica.

Todo lo que hemos visto para los colores es tambin vlido para aplicarlo al color del texto de los encabezados, Simplemente tenemos que tener en cuenta que el color que elijamos debe tener el bastante contraste respecto al fondo para ser visible.

Ya hemos visto las propiedades para el encabezado de la fila superior, ahora vamos a dar formato al encabezado de la columna de la izquierda.

Dreamweaver nos permite tener distintos formatos para el encabezado superior y para el encabezado lateral. Podemos definir la alineacin para toda la columna y tambin el estilo de visualizacin de las fuentes, podemos elegir los mismos formatos que en el encabezado superior o podemos cambiar los formatos. Por ejemplo podemos tener en el encabezado superior un tipo de letra resaltada y en el encabezado lateral un formato en itlica.

Por ltimo podemos con un slo clic, desde aqu, cambiar el borde la tabla. Podemos ponerle borde, desde 1 hasta el valor que deseemos, teniendo presente que el grosor del borde crece a costa de disminuir el tamao de las celdas. Un punto importante a la hora de disear pginas web y que le da tanto valor a las tablas cuando se trata de crear estructuras de pginas, es el hecho de que podemos dar al borde un grosor de cero.

Por qu es esto tan importante? Cmo es una tabla de borde cero?. Una tabla de borde cero significa que el borde no es visualizado por el usuario, lo que permite tener una gran potencia a la hora de situar los distintos elementos de la web en la pgina. Pero eso lo veremos ms adelante. En la imagen inferior tenemos el resultado de aplicar a la plantilla todos los formatos que hemos ido eligiendo a lo largo de la leccin.

LECCIN 32 Las Imgenes Por fin hemos llegado al tema de las imgenes. Hacer una pgina web es muy sencillo, ms si se utiliza un programa como Dreamweaver, pero cuando construimos nuestra pgina no queremos slo sencillez, tambin queremos que sea atractiva. Y hoy en da, es indiscutible que para que una pgina sea atractiva debe tener una esttica visual importante. Dreamweaver lo sabe y por ello ha puesto a nuestro servicio una importante cantidad de recursos para que podamos aadir, reasaltar y modificar imgenes para hacer ms atractivas nuestras pginas web.

La manera ms sencilla de aadir una imagen a nuestra pgina es desplegando al men insertar, de la barra men, y buscar en l la opcin imagen.

En la ventana de dilogo que Dreamweaver nos abrir, podremos buscar la imagen que queramos insertar en nuestra pgina, simplemente tenemos que seleccionarla y pulsar el botn aceptar de la ventana dilogo.

En la imagen inferior vemos el resultado de incluir una imagen en la pgina web, observa que imagen se ha insertado en la posicin que ocupaba el cursor en el momento de aadir la imagen, tambin podemos escribir texto en la misma lnea que insertamos la imagen Eso significa que podemos combinar en la misma lnea texto e imgenes, sin importar el orden. Podemos escribir una lnea de texto y en cualquier punto de ella insertar la imagen, o podemos insertar primero la imagen y despus escribir un comentario a su lado.

Dreamweaver nos permite insertar imgenes de varias maneras, ya hemos visto como hacerlo desde la barra de men. Ahora vamos a aprender a insertar imgenes desde el panel insertar, con la barra comn activada. Podemos pulsar en la barra comn en el icono imagen, tal como vemos en la imagen inferior.

Dreamweaver nos muestra la misma ventana de dilogo de antes, podemos seleccionar el archivo como ya sabemos o podemos escribir el nombre directamente en la casilla nombre, y despus pulsamos aceptar.

Antes de terminar esta leccin vamos a ver una ultima forma de insertar imgenes en la pgina. Desde el grupo de paneles de la derecha de la ventana Dreamweaver, desplegamos en la barra Archivos. Esto nos mostrara el sitio que hemos configurado en lecciones

anteriores. El sitio como ya vimos, es una estructura de directorios que alberga nuestras pginas, si hemos configurado adecuadamente el sitio, incluido el directorio de las imgenes, simplemente tendremos que arrastrar la imagen correspondiente desde el panel hasta el lugar de la pgina donde queramos situarla.

Nota: El copyright de las fotografas utilizadas como ejemplo en este curso pertenece a su autora, Silvia R. Vzquez. LECCIN 33 Panel Propiedades de Imagen En la leccin anterior aprendimos a insertar imgenes. En esta leccin tendremos un primer contacto con las posibilidades que ofrece el panel propiedades de Dreamweaver. Para activar el panel de propiedades simplemente tenemos que desplegarlo como ya sabemos. Si el panel de propiedades no aparece con las mismas opciones que en la imagen inferior, es debido a que tenemos activa alguna otra parte de la ventana de diseo. Para acceder a las propiedades de las imgenes, slo tenemos que pulsar sobre la imagen de la cual queramos activar sus propiedades. Tal como vemos en la imagen de abajo.

Vamos a ver las propiedades paso a paso. Lo primero es darle a la imagen un nombre. Con esto le decimos a Dreamweaver que vamos a considerar la imagen como un objeto. Si le ponemos un nombre representativo es mucho ms cmodo trabajar con los ficheros.

Sobre el nombre, Dreamweaver nos muestra el peso o tamao en Kb de la imagen, esto es muy importante para controlar el peso final de la pgina. Hay que tener en cuenta de que cuanto ms peso tenga nuestra pgina ms lenta ser de visualizar por los usuarios, en especial por aquellos que no tienen una conexin de Internet de alta velocidad. Es importante diferencia el tamao de peso de la imagen con el tamao de dimensiones de la imagen, una imagen independientemente de su peso puede tener las dimensiones que necesitemos. Esto se consigue introduciendo los valores deseados en las casillas Ancho y Alto. Como se ve en la imagen inferior.

En el caso de que prefiramos las medidas originales, no es necesario que recordemos las cifras, simplemente pulsamos en el icono restaurar, tal como vemos indicado en la imagen superior, En la parte central tenemos las casillas origen y vnculo. La casilla origen hace referencia al nombre del archivo de la imagen, pulsando sobre la carpeta de su derecha podemos navegar por la estructura del ordenador hasta encontrar la imagen que deseemos insertar en ese punto.

En la casilla vnculo, podemos introducir el nombre de la pgina web enlazada a la imagen Qu significa esto?. Bueno. Los vnculos los veremos en detalles en prximas lecciones, baste saber por ahora que podemos enlazar distintas pginas de manera que pulsando sobre un vnculo en una de ellas el navegador nos muestre otra distinta. Este es el funcionamiento normal de las pginas web, Dreamweaver nos permite con un slo clic crear un vnculo desde una imagen de manera que pulsando sobre ella, el navegador nos lleve hasta otra.

En la casilla vinculo, podemos el nombre de la pgina destino a la que deseamos vincular desde la imagen.

En la imagen superior tenemos la casilla Alt esto significa alternativa. Muchas personas no le dan importancia a esta casilla pero en determinadas circunstancias su contenido es vital. Por ejemplo en el caso de que el usuario, por cualquier razn, no pueda visualizar en su ordenador las imgenes de nuestra web. El texto de la casilla Alt se muestra en el lugar de la imagen, hasta que esta pueda ser mostrada. Por eso es tan importante que el texto sea lo suficientemente descriptivo para que el usuario capte el significado del enlace sin ver la imagen.

Por ltimo en la imagen superior vemos las opciones con las que Dreamweaver nos permite editar las imgenes, estas funcionalidades se aleja del objetivo de este curso por lo que no entraremos en ellas. Nota: El copyright de las fotografas utilizadas como ejemplo en este curso pertenece a su autora, Silvia R. Vzquez. LECCIN 34 Propiedades de Imagen

En esta leccin vamos a seguir descubriendo el panel de propiedades de imagen. Ya hemos visto, en la leccin anterior, la zona superior, ahora veremos las funciones de la zona

inferior

Empezaremos con las opciones de alineacin de las imgenes. Pulsando en los iconos de alineacin podemos cambiar la posicin de la imagen en la pgina. En realidad lo que alineamos, con estos iconos, es toda la lnea. Desde estos iconos no podemos cambiar la alineacin de la imagen sin cambiar el del texto con el que comparte lnea. En la imagen inferior vemos un ejemplo de alineacin a la derecha.

Ahora bien. Dreamweaver nos permite desde la opcin alinear, no hay que confundir con

los iconos de alineamiento, tener ms control de cmo la imagen se relaciona con la lnea en la que est situada. Por ejemplo con la opcin Lnea de base, el texto comparte la misma lnea que el pie de la imagen. Es decir tal como se ve normalmente.

Sin embargo cuando cambiamos a alineacin medio, el texto aparece a la altura de la mitad de la imagen, sin importar la alineacin del resto de la pgina. En el men desplegable hay una gran variedad de alineaciones posibles para el texto de la imagen.

Otra de las opciones es el borde. Con esta opcin podemos aadirle a la imagen un borde, una especie de marco, con el grosor que decidamos, simplemente introduciendo un nmero en la casilla correspondiente Por ejemplo en la imagen inferior vemos el resultado de aplicar un borde de tamao 10.

Dreamweaver tiene otras opciones para controlar el aspecto de las imgenes, por ejemplo podemos especificar el espacio que habr entre la imagen y el texto que le rodea. En la imagen inferior vemos las casillas de espacio vertical y espacio horizontal, introduciendo valores en estas casillas podemos dejar un espacio del tamao que nosotros deseemos entre la imagen y el texto. Por ejemplo con un valor de 25 para el espacio vertical y otros 25 para el espacio horizontal obtenemos un aspecto tal como vemos en la imagen inferior.

LECCIN 35 Combinar Imgenes y Tablas

En lecciones anteriores hemos aprendido a crear tablas, tambin hemos aprendido a insertar imgenes y tambin hemos comentado como las tablas eran el esqueleto en el que se basan las pginas web. Vamos a ver un ejemplo practico de todo ello. En esta leccin y las prximas vamos a crear una tabla y vamos a insertar en ella textos e imgenes. En la imagen inferior tenemos una tabla, de 3 celdas por 3 celdas, segn la plantilla que ya conocemos. Slo hemos introducido datos en el encabezado de la columna de la izquierda.

Ahora pulsaremos con el ratn en el interior de la celda donde queramos introducir la imagen. Una vez que tenemos activa la celda, insertaremos la imagen con alguno de los mtodos que ya conocemos, por ejemplo con el icono insertar imagen de la barra comn.

Seleccionaremos en la ventana de dilogo la imagen que deseemos insertar y pulsaremos aceptar.

En la imagen inferior vemos como queda la tabla con la imagen y un comentario con la descripcin de la imagen en la celda de la derecha de la imagen. Observa como la apariencia de la pgina aparece mucho ms ordenada que en los ejemplos

de las lecciones anteriores.

Podemos situar, tanto textos como imgenes en cualquiera de las celdas de la tabla. Por ejemplo, la siguiente imagen la situaremos en la celda derecha de la fila central

Esta vez la aadiremos arrastrndola desde el panel archivo, simplemente tenemos que elegir la imagen que deseemos situar en la celda, pincharemos sobre ella y arrastraremos el puntero del ratn hasta la celda destino.

En la celda central podemos aadir el texto que creamos necesario, por ejemplo una descripcin de la imagen. Debido a que la tabla fue pre-formateada con una plantilla de tablas, el tipo de letra del comentario de la fila superior y el de esta fila son diferentes. Dreamweaver nos permite cambiar el formato en cualquier momento, nosotros esperaremos a la prxima leccin para experimentar con ello.

Vamos a ver la ultima manera de insertar imgenes en la tabla. Esta vez lo haremos desde la barra men. Pulsaremos en el men insertar.

Y en el men que se desplegar buscaremos la opcin imagen.

Desde la ventana de dilogo elegiremos la imagen que deseamos insertar y pulsaremos el botn aceptar.

Como en las ocasiones anteriores escribiremos un comentario en la celda contigua que describa la imagen.

En esta leccin hemos atisbado las posibilidades que encierra la insercin de imgenes y la combinacin de imgenes y textos en las tablas. En lecciones prximas profundizaremos ms en el tema LECCIN 36 Textos e Imgenes

En la leccin anterior vimos como combinar en una tabla imgenes y textos. En esta leccin veremos como podemos realzar la presencia de nuestra pgina utilizando las herramientas del panel de propiedades. En lecciones anteriores vimos que el panel de propiedades cambiaba segn la zona activa de la pgina. El mismo panel era radicalmente distinto si tratbamos con textos, con imgenes o con tablas. En esta leccin deberemos tener esto muy presente puesto que dependiendo de donde tengamos situado el cursor podemos pasar con slo un clic de trabajar con uno u otro panel.

Para no cometer errores, lo mejor es marcar la zona a la que deseemos aplicar el formato. Y despus pulsar el botn adecuado del panel de propiedades. Por ejemplo para camibar el color de la fuente de una celda.

Primero debemos marcar el texto a cambiar y despus pulsaremos en el icono color, y cuando se despliegue la paleta de colores pulsar sobre el color deseado. De esta manera no cambiaremos inadvertidamente, por ejemplo, el color de toda la tabla.

Lo mismo sirve para cambiar la alineacin del texto de una celda.

Primero marcamos el texto y despus pulsamos el icono de alineacin que deseemos aplicarle.

Podemos aplicarles otros formatos, como un resaltado del texto,

O cambiar el tamao de la fuente del texto seleccionado.

Esta leccin ha sido un somero repaso de las funciones del panel propiedades, las funciones son las mismas que ya hemos visto en lecciones anteriores Todos estos cambios los veremos mejor en la animacin de esta leccin.

LECCIN 37 Los Comportamientos

En esta leccin vamos a ver una funcionalidad avanzada de Dreamweaver, que facilita

mucho la creacin de pginas web ms dinmicas. Estos son los comportamientos. Los comportamientos son, valga la redundancia, comportamientos que asignamos a determinados sucesos para que la pgina reaccione de una manera determinada. Todo esto lo veremos mejor un ejemplo. Podemos acceder a los comportamientos en el grupo de paneles de la derecha de la ventana de Dreamweaver. El primer paso es seleccionar el objeto sobre el que deseamos aplicar el comportamiento, por ejemplo una de las imgenes de la tabla.

A continuacin desplegaremos el men etiqueta y pulsaremos sobre la pestaa comportamientos. Debajo de la leyenda comportamientos encontramos un signo +. Pulsaremos sobre l para desplegar el men de comportamientos disponible para el objeto seleccionado. Esto ltimo es importante tenerlo en cuenta, pues los comportamientos cambian segn sea el objeto seleccionado. Un texto, o un link, no soporta los mismos comportamientos que, por ejemplo, una imagen.

Como tenemos seleccionada una imagen, vamos a seleccionar de la tabla un comportamiento que slo podemos aplicar a imgenes. Intercambiar imagen. Este comportamiento logra un efecto muy bonito, se trata de que en una pgina web, cuando el usuario pase el puntero del ratn sobre la imagen, esta imagen cambie y sea sustituida por otra distinta. Se pueden conseguir pginas muy efectivas con este comportamiento y un poco de imaginacin y buen gusto.

Tras pulsar en la opcin intercambiar imagen. Dreamweaver nos mostrara un cuadro de dilogo en el que nos pedir que definamos el origen, esto simplemente quiere preguntarnos por cual imagen quiera que sea sustituida la imagen seleccionada?

Ya conocemos como examinar las carpetas para encontrar la imagen deseada, en este caso haremos lo mismo, vamos a seleccionar la imagen rbol y pulsaremos el botn aceptar.

Cuando hayamos seleccionado la imagen volveremos a la ventana de dilogo intercambiar imagen y pulsaremos aceptar. Hay un punto que no he comentado, y que es apropiado hacerlo antes de salir de esta ventana. En la zona inferior de la ventana hay dos opciones marcadas Una es carga previa de imgenes y la otra es restaurar imgenes onmouseout. Por defecto ambas opciones estn marcadas. Es conveniente conocer la funcin de ambas opciones, la primera funcin se encarga de que cuando el usuario visualiza la pgina por primera vez, su ordenador descargue todas las

imgenes relacionadas, incluida la de intercambio con qu objetivo? Pues para que cuando el usuario pase el puntero del ratn sobre la imagen, el intercambio sea instantneo pues ya ha cargado previamente la imagen.

La segunda funcin restaurar imgenes onmouseout se encarga de restaurar la imagen original cuando el puntero del ratn deje de estar sobre la imagen, esta es una opcin que depende ms del gusto esttico que de caractersticas tcnicas. As que este punto es totalmente opcional.

En la imagen superior vemos como queda el panel etiqueta despus de aadir nuestros comportamientos.

Cuando visualicemos la pgina se ver como la imagen superior de manera normal, pero si superponemos el puntero del ratn la pgina se ver como la imagen inferior.

LECCIN 38 Los Enlaces

En esta leccin y las siguientes veremos los enlaces. Ya hemos hablados de ellos con anterioridad pero en estas lecciones vamos a crear nuestros propios enlaces paso a paso. Haciendo un repaso rpido podemos decir que un enlace es un objeto que cuando pulsamos sobre l, el navegador nos lleva a otra pgina. Esta es la gran potencia de Internet, el descubrimiento de que una pgina lleva a otra y esta, a otra y as hasta que nos cansemos de navegar. El primer paso es seleccionar, por ejemplo, un texto. Este texto ser el enlace con la pgina destino.

En la barra comn pulsaremos el icono enlace, tal como vemos en la imagen inferior

Dreamweaver abrir un cuadro de dilogo en el que completaremos los campos necesarios. El primero es el texto del enlace, que en este caso coincide con el texto que hemos seleccionado.

El segundo campo es seleccionar la pgina con la que queremos vincular el enlace, podemos tanto escribir el nombre directamente como buscarla por las carpetas y seleccionarla como ya sabemos.

La siguiente opcin nos dice como accederemos al destino. Podemos utilizar la misma ventana del navegador en la que estemos, por ejemplo si estamos navegando por el mismo sitio, o bien abrir otra ventana independiente en la que se mostrara la pgina de destino. Esto es particularmente til, cuando queremos que el usuario permanezca en nuestra pgina despus de ver el contenido de la pgina enlazada.

La opcin ttulo, se refiere al ttulo de la pgina que vamos a abrir, de esta manera tenemos cierto control sobre las pginas. Las siguientes opciones no son importantes para los objetivos de este curso.

Cuando aceptamos los cambios realizados, y volvemos a la vista de diseo vemos como ha cambiado el texto, ahora aparece azul y subrayado. Este es el formato por defecto que adoptan todos los enlaces. Podemos encontrarnos con pginas en que los enlaces tienen otro aspecto, eso no tiene otra importancia ms all de su apariencia esttica.

LECCION 39 Vnculos desde Imgenes En la leccin anterior vimos como crear un enlace desde un texto. Dreamweaver tambin nos permite crear fcilmente enlaces desde imgenes. Cmo puede ser esto?. Un enlace texto se activaba cuando se pulsaba sobre l, un enlace imagen, tambin. As de sencillo Para crear un enlace imagen, simplemente tenemos que seleccionar la imagen e ir al panel propiedades.

Sobre el panel propiedades, en el campo vinculo, debemos teclear el nombre de la

pgina destino, o bien explorar y seleccionar el archivo destino de la forma que ya sabemos.

En este caso hemos vinculado la imagen cartaya.jpg a la pgina Mi-primera-pgina.htm

Al igual que en el enlace de texto aqu podemos pulsar la opcin Destino para controlar de que forma se va a abrir la nueva pgina en el navegador del usuario.

LECCION 40

Enlaces internos En las lecciones anteriores hemos visto como vincular una pgina con otra. En esta vamos a vincular un enlace de la pgina, no con una pgina externa, si no con un punto de la misma pgina. Esto es particularmente til en el caso de pginas extensas, ya que podemos crear un ndice en la cabecera de la pgina y con un clic ir a la seccin que nos interese.

El primer paso, como siempre es seleccionar un punto de la pgina. En este caso estamos seleccionando un punto para situar un anclaje, esto es un punto al que posteriormente podremos referenciar.

Una vez que lo hayamos seleccionado, deberemos pulsar en el icono anclaje de la barra comn, tal como vemos en la imagen superior. En la ventana de dilogo siguiente debemos crear un nombre de anclaje, es decir, un nombre nico al que despus podamos referenciar de manera sencilla, por ejemplo,

prrafo.

Dream300064 Cuando pulsemos aceptar, la vista de diseo nos mostrara este aspecto, tranquilos, ese ancla tan bonita slo se ve en la vista de diseo, el usuario ver la pgina normalmente, tal como la diseamos.

El siguiente paso es crear el punto de enlace, es decir, marcar una palabra, frase o imagen sobre la que pulsaremos para ir al destino que ya hemos elegido.

Una vez que hemos seleccionado el texto, por ejemplo, iremos al panel de propiedades y pulsaremos sobre la opcin vnculo, esta vez no introduciremos ninguna pgina web.

Simplemente escribiremos el nombre del anclaje precedido por el signo #

La opcin destino podemos utilizarla tal como estamos acostumbrados.

De esta manera cuando pulsemos sobre el enlace, la pgina se desplazar hasta mostrarnos el punto de anclaje que hemos vinculado al enlace. LECCION 40 Enlaces internos En las lecciones anteriores hemos visto como vincular una pgina con otra. En esta vamos a vincular un enlace de la pgina, no con una pgina externa, si no con un punto de la misma pgina. Esto es particularmente til en el caso de pginas extensas, ya que podemos crear un ndice en la cabecera de la pgina y con un clic ir a la seccin que nos interese.

El primer paso, como siempre es seleccionar un punto de la pgina. En este caso estamos seleccionando un punto para situar un anclaje, esto es un punto al que posteriormente podremos referenciar.

Una vez que lo hayamos seleccionado, deberemos pulsar en el icono anclaje de la barra comn, tal como vemos en la imagen superior. En la ventana de dilogo siguiente debemos crear un nombre de anclaje, es decir, un nombre nico al que despus podamos referenciar de manera sencilla, por ejemplo, prrafo.

Dream300064 Cuando pulsemos aceptar, la vista de diseo nos mostrara este aspecto, tranquilos, ese ancla tan bonita slo se ve en la vista de diseo, el usuario ver la pgina normalmente, tal como la diseamos.

El siguiente paso es crear el punto de enlace, es decir, marcar una palabra, frase o imagen

sobre la que pulsaremos para ir al destino que ya hemos elegido.

Una vez que hemos seleccionado el texto, por ejemplo, iremos al panel de propiedades y pulsaremos sobre la opcin vnculo, esta vez no introduciremos ninguna pgina web.

Simplemente escribiremos el nombre del anclaje precedido por el signo #

La opcin destino podemos utilizarla tal como estamos acostumbrados.

De esta manera cuando pulsemos sobre el enlace, la pgina se desplazar hasta mostrarnos el punto de anclaje que hemos vinculado al enlace. LECCION 41 Enlace externos

Y ya slo queda un ltimo punto, como crear enlaces a pginas exteriores, situadas en Internet. A lo largo de todo este curso ya hemos aprendido lo suficiente como para hacerlo de una manera sencilla y rpidamente. El primer paso es, como siempre, seleccionar el texto que va a servir como enlace.

El siguiente paso es, buscar en la barra comn el icono de enlace.

Y aqu viene la novedad, en la ventana de hipervnculo, que ya conocemos, introduciremos

en la casilla de vnculo, la direccin url de la pgina a la que deseemos enlazar desde nuestra pgina. Por ejemplo http://www.aulafacil.com

En la opcin destino podemos elegir cualquiera de las opciones, para este caso, hemos elegido la opcin _blank

Cuando hayamos terminado pulsaremos el botn aceptar

Y cuando volvamos a la vista de diseo, comprobaremos que este ser el aspecto de nuestra pgina.

ya slo queda grabarla y lanzarla desde un navegador para comprobar que cuando pulsamos en el enlace nos abre en otra pgina la web de aulafcil.com

Curso de HTML TEMARIO CLASE 1. Comenzamos CLASE 2. Conceptos Fundamentales CLASE 3. Mi primera pgina (I) CLASE 4. Mi primera pgina (II) CLASE 5. Mi primera pgina (III) CLASE 6. Guardar CLASE 7. Formato de Letras CLASE 8. Colores de las Letras CLASE 9. Las partes de las instrucciones CLASE 10. Alinear el Texto CLASE 11. Lneas Horizontales CLASE 12. Los prrafos y el cambio de Lnea CLASE 13. Poner Titulares CLASE 14. Las Utiles Tablas CLASE 15. Atributos de las Tablas CLASE 16. Color de las Tablas CLASE 17. Poner Enlaces CLASE 18. Insertar Imgenes CLASE 19. Imgenes Animadas CLASE 20. Atributos de Insertar imgenes CLASE 21. Enlazar una Imagen

CLASE 22. Atributos de la Pgina CLASE 23. Poner Notas

LECCION 1

Para confeccionar una pgina web lo nico que se necesita es un editor de texto. Existen editores especializados en crear ficheros HTML Podemos utilizar Notepad, WordPad o el que queramos. Es preferible utilizar Notepad o un editor especializado para generar ficheros de Html que en editor ms avanzado que puede incluir cdigos no deseados. Seguramente tienes uno de estos programas en tu ordenador. Si no sabes donde esta pulsa en la esquina inferior izquierda "Inicio" y "Buscar"

Escribimos el nombre del fichero que estoy buscando en este caso Notepad y pulsamos "Buscar Ahora"

Y pulsamos dos veces sobre sobre el fichero de Notepad

Existen editores gratuitos en Internet. Por ejemplo en la pgina de Internet http://www.softonic.com/ En la seccin de programacin tienes editores gratuitos para descargar.

LECCION 2

Pasos para crear la pgina web: 1. Abrir el programa editor de texto. 2. Escribir los cdigos o "tags". Escribimos los comandos como escribimos en un procesador de textos. Y guardamos el fichero que creamos como fichero de texto.A lo largo de este curso veremos los diferentes cdigos.

Una vez abierto el programa editor de texto voy escribiendo los cdigos o "tags"

Las instrucciones, cdigos o "tags" de html van entre dos signos < y >. Las instrucciones es indiferente si se escriben en maysculas o minsculas.

Tenemos que poner un cdigo de inicio y uno de cierre.

Ejemplo: Poner texto en negrilla La instruccin para que un texto se ponga en negrilla es Soy magnfico La instruccin de cierre tiene que llevar el signo / Por lo tanto:

A) Ponemos el cdigo de inicio para poner el texto en negrilla B) A continuacin el texto que queremos que aparezca en negrilla y C) Al final el cdigo de cierre

3. Guardar el fichero. Es recomendable que cree un directorio en el disco duro de su ordenador para guardar ordenadas los ficheros que iremos generan