Você está na página 1de 44

ndice detallado Unidad 1.

Conceptos bsicos de Dreamweaver 8 Qu es Dreamweaver 8 HTML bsico Novedades de Dreamweaver 8 Editar pginas web Cmo tener una pgina en Internet Arrancar y cerrar Dreamweaver 8 Compaginar dos sesiones Abrir y guardar documentos Mi primera pgina

Qu es Dreamweaver 8
Dreamweaver 8 es un software fcil de usar que permite crear pginas web profesionales. Las funciones de edicin visual de Dreamweaver 8 permiten agregar rpidamente diseo y funcionalidad a las pginas, sin la necesidad de programar manualmente el cdigo HTML. Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc., de una forma muy sencilla y visual. Adems incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del programa. Caractersticas bsicas de HTML puedes verlas aqu.

Las pginas que vemos en Internet estn escritas utilizando el lenguaje HTML (Hyper Text Markup Language). Este lenguaje est basado en etiquetas que marcan el inicio y fin de cada elemento de la pgina Web. Por ejemplo, el ttulo de la pgina Web se escribe entre las etiquetas <TITLE> y </TITLE>. Como ves, ambas etiquetas consisten en poner un mismo comando entre los smbolos "<" y ">". La primera etiqueta indica inicio, y la segunda, que incluye el smbolo "/", indica final.

Las etiquetas disponen de atributos que permiten definir caractersticas del elemento sobre el que actan. Por ejemplo, <TABLE Border="1"> indica que la tabla tendr un borde de tipo 1. Una pgina HTML bsica tendra el siguiente aspecto:

<HTML> <HEAD> <TITLE> Mi primera pgina web </TITLE> <BODY> <A href:"http://www.aulaclic.com"> Haz clic aqu para ir a aulaClic</A> resto de la pgina web </BODY> <HTML> Las etiquetas que se introducen en un documento HTML no son visibles cuando el documento se muestra en un navegador (IExplorer, Netscape, etc). Cuando un usuario desde Internet solicita ver una pgina el servidor Web enva la pgina al navegador y este interpreta las etiquetas para dar el formato a la pgina. Cuando utilizamos Dreamweaver para crear una pgina Web no tenemos que preocuparnos de todo esto. Dreamweaver inserta automticamente las etiquetas necesarias para construir la pgina con la apariencia y contenido definidos en el editor grfico.

Editar pginas web


Cualquier editor de texto permite crear pginas web. Para ello slo es necesario crear los documentos con la extensin HTML o HTM, e incluir como contenido del documento el cdigo HTML deseado. Puede utilizarse incluso el Bloc de notas para hacerlo. Pero crear pginas web mediante el cdigo HTML es ms costoso que hacerlo utilizando un editor grfico. Al no utilizar un editor grfico cuesta mucho ms insertar cada uno de los elementos de la pgina, al mismo tiempo que es ms complicado crear una apariencia profesional para la pgina.

Hoy en da existe una amplia gama de editores de pginas web. Uno de los ms utilizados, y que destaca por su sencillez y por las numerosas funciones que incluye, es Macromeda Dreamweaver.

Adems de Dreamweaver, existen otra serie de buenos editores de pginas web, como pueden ser Microsoft Frontpage, Adobe Pagemill, Adobe GoLive, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, algunos de los cuales tienen la ventaja de ser gratuitos.

Cmo tener una pgina en Internet


Para poder poner una pgina web en Internet, es necesario contratar a alguna empresa con servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del da. El precio por disponer de espacio propio en el servidor depender de la empresa, del espacio en disco, volumen de transferencia y otras opciones que podamos contratar. Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco espacio de disco, lentitud y nombre de nuestra pgina precedido por el de la suya. Hay que tener tambin en cuenta que estas empresas deben generar ingresos de alguna forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras pginas, publicidad que no podremos negarnos a incluir en ellas. Por estos motivos, no se recomienda utilizar hospedaje gratuito para la pgina de una empresa, aunque s es aceptable para una pgina personal. Cuando se va a contratar un servicio de hospedaje es necesario contratar tambin un dominio, tarea de la que se suele encargar la propia empresa de hospedaje. Registrar un dominio consiste en registrar un nombre para nuestra pgina. Este nombre no puede estar repetido en Internet, ha de ser nico, al igual que ocurre con los nombres de las empresas. Es posible registrar un mismo nombre con distintas terminaciones, como por ejemplo, .net, .org, .es o .com. En el caso de los hospedajes gratuitos no es necesario registrar ningn dominio, ya que nuestra pgina no ser ms que un archivo dentro de la de la empresa contratada. A la hora de contratar un servicio de hospedaje tambin hay que tener en cuenta el nmero de cuentas de correo electrnico propias que pueden habilitarse y si disponemos de una base de datos para poder acceder a ella a travs de programacin va Web, aunque esto ltimo ser til slo para usuarios avanzados.

Si piensas contratar un servicio de hospedaje te recomendamos Alojalia.com En cualquier caso, una vez tengas tu espacio en Internet, darle contenido es muy sencillo. Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego querrs que se encuentre a disposicin de todo el mundo en Internet. Por tanto, una vez hayas terminado de disearla en modo local slo tendrs que subirla a tu servidor manteniendo la estructura del local. Es decir, debers subir todos los archivos tal y como aparecen en tu disco duro, respetando el nombre de los archivos y la organizacin de las carpetas. Si no lo haces de este modo, tu sitio experimentar fallos y enlaces que no funcionarn. Recuerda que ser mejor que no utilices caracteres especiales como acentos o ees, ni espacios en blanco. De esta forma te asegurars de que el servidor puede reconocer sin ningn tipo de problemas los nombres de los archivos que alojes en l. Para evitar errores de enlaces rotos o imgenes que no se muestran intenta escribir, tambin, los nombres en minscula. Algunos servidores distinguen entrre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imgen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.

Arrancar y cerrar Dreamweaver 8


Veamos las dos formas bsicas de arrancar Dreamweaver 8. Desde el botn Inicio situado, normalmente, en la esquina inferior izquierda de la pantalla. Colocar el cursor y hacer clic sobre el botn Inicio, se despliega un men; al colocar el cursor sobre Todos los programas aparece otra lista con los programas que hay instalados en tu ordenador, buscar Macromedia (o Adobe si tienes las ltimas versiones), seguidamente Dreamweaver 8, hacer clic sobre l, y se arrancar el programa.

Desde el icono de Dreamweaver 8 del escritorio

Puedes arrancar Dreamweaver 8 ahora para ir probando todo lo que te explicamos. Cuando realices los ejercicios tambin puedes compaginar dos sesiones de la forma que te explicamos aqu.

Para cerrar Dreamweaver MX 2004, puedes utilizar cualquiera de las siguientes operaciones: Hacer clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer clic sobre el men Archivo y elegir la opcin Salir. Si existe algn documento modificado que no ha sido guardado antes de cerrar Dreamweaver, se te pedir confirmacin para guardar o no cada uno de ellos.

Abrir y guardar documentos Para abrir un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+O. Hacer clic sobre el men Archivo y elegir la opcin Abrir. Hacer doble clic sobre el archivo en la ventana del sitio.

Para abrir un documento nuevo, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn abrir de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+N. Hacer clic sobre el men Archivo y elegir la opcin Nuevo. Hacer doble clic sobre el archivo en la ventana del sitio. Despus de esto aparecer una nueva ventana, en la que debers elegir la Categora Pgina bsica, HTML.

Para guardar un documento, puedes utilizar cualquiera de las siguientes operaciones. Hacer clic en el botn guardar de la barra de herramientas estndar.

Pulsar la combinacin de teclas Ctrl+S. Hacer clic sobre el men Archivo y elegir la opcin Guardar. Dreamweaver incluye la posibilidad de, en el caso de estar trabajando simultneamente con varios documentos, poder guardar todos de golpe, sin la necesidad de hacerlo uno por uno. Para guardar todo puedes realizar cualquiera de las siguientes operaciones. Hacer clic en el botn guardar todo de la barra de herramientas estndar.

Hacer clic sobre el men Archivo y elegir la opcin Guardar todo. Al tener varios documentos abiertos es fcil olvidarse de todos las modificaciones hechas en cada uno de ellos. Debes tener mucho cuidado al utilizar la opcin guardar todo, ya que en ocasiones es posible no desear guardar los cambios en todos los documentos modificados. Por ello es conveniente que al principio no utilices esta opcin, al menos hasta que te hayas habituado a manejar el programa.

Para que te vayas haciendo una idea de cmo funciona Dreamweaver, vamos a crear una pgina web sencilla, con varios estilos de texto, una imagen y un enlace a otra pgina. Crear esta pgina solo te llevar unos pocos minutos, y sabrs cmo trabajar con los elementos bsicos con los que estn hechas la mayora de las pginas web. Si nunca has hecho una pgina web, este es el momento para descubrir lo fcil que es.

Mi primera pgina

Lo primero que tienes que hacer es abrir Dreamweaver. Ya has visto en la pgina anterior como puede hacerse. Abres un documento nuevo y seleccionas la Categora Pgina bsica, HTML. Seguidamente introduce, en el documento en blanco, el texto que aparece en la imagen siguiente.

Una vez introducido el texto, vas a modificar el ttulo y el color de fondo del documento. Para ello debes hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Entonces se abrir una ventana como la que aparece ms abajo.

Cambia el Ttulo por Mi primera pgina. En Color de Fondo escribe #CCCCFF, de este modo el fondo del documento pasar a ser de color azul. Seguidamente pulsa sobre el botn Aceptar. Ahora vas a insertar una imagen. Para insertar la imagen, ha de estar accesible para nosotros. Para ello debe encontrarse en nuestro disco duro, en un cd-rom o en un disquete, pero preferiblemente en el disco duro. Muchas de las imgenes que vemos en Internet se pueden copiar al disco duro. Al hacer clic con el botn derecho del ratn sobre la imagen que queremos traer de Internet, se abre una ventana con una opcin similar a Guardar imagen como... (dependiendo del navegador que utilices) que permite grabar dicha imagen en un fichero de nuestro disco duro. En los navegadores ms modernos al colocar el cursor sobre una imagen aparecen estos iconos en una esquina de la imagen, si haces clic en el icono del disquete aparecer el mismo men Guardar imagen como... a que hacamos referencia anteriormente. Copia la imagen que aparece a continuacin, para luego poder insertarla en la pgina web

que estamos creando. Puedes guardarla, por ejemplo, en la carpeta Mis Documentos.

Ahora tienes que insertar la imagen debajo de la segunda lnea de texto. En primer lugar debes situar el cursor al final de la segunda lnea y pulsar un intro (Enter) para ir a una nueva lnea. Despus debes dirigirte al men Insertar, a la opcin Imagen. En la nueva ventana que aparece, debers buscar la imagen en la carpeta en la que la habas guardado, y despus seleccionarla.

Ahora vas a pasar a cambiar el formato del texto. Para ello necesitas visualizar el inspector de propiedades que se encuentra normalmente en la parte inferior de la ventana, y que tiene el siguiente aspecto:

Si no te aparece, puedes mostrarlo a travs del men Ventana, con la opcin Propiedades. Si lo que te ocurre es que nicamente te aparece el ttulo del panel, es porque est contraido. Para que te aparezca desplegado debes pulsar sobre el botn , que aparece junto al nombre. Selecciona la primera lnea de texto y cambia el Formato por Encabezado 1 y el color por #000066, tal y como se muestra en la siguiente imagen.

Despus de esto, la apariencia de la primera lnea habr cambiado. Selecciona la imagen y las dos timas lneas de texto. Pulsa sobre el botn para centrarlos. Una vez hayas centrado la imagen y las otras dos lneas siguientes, selecciona la segunda lnea de texto, que an no ha sido modificada. Cambia el Formato por Encabezado 3, pulsa una vez sobre el botn y pulsa tres veces sobre el botn .

Selecciona de nuevo la ltima lnea, y en Vnculo introduce http://www.elpais.es, para crear un enlace a esa otra pgina:

Despus de todos estos pasos, puedes ver cmo ha quedado el documento pulsando la tecla F12. Por ltimo guarda el documento. Ya sabes que puedes hacerlo a travs del men Archivo, desde la opcin Guardar. Puedes llamar al documento como lo desees, pero siempre teniendo en cuenta que la extensin ha de ser htm o html. Por ejemplo, puedes llamarlo prueba1.htm.

Si pulsas aqu podrs ver cmo debera haber quedado la pgina despus de haber seguido todos los pasos anteriores. Compara esta pgina con la tuya, para ver si lo has hecho todo bien.

Unid ad 2. El ento rno de traba jo (I)

Bsqueda

pub-1875034419

ISO-8859-1

ISO-8859-1

GALT:#008000;G

es

Vamos a ver cules son los elementos bsicos de Dreamweaver 8 , la pantalla, las barras, los paneles, etc, para saber diferenciar entre cada uno de ellos. Aprenderemos cmo se llaman, dnde estn y para qu sirven. Tambin veremos cmo obtener ayuda, por si en algn momento no sabemos cmo seguir trabajando. Cuando conozcamos todo esto estaremos en disposicin de empezar a crear pginas web.

La pantalla inicial

Al arrancar Dreamweaver aparece una pantalla inicial como sta, vamos a ver sus componentes fundamentales. As conoceremos los nombres de los diferentes elementos y ser ms fcil entender el resto del curso. La pantalla que se muestra a continuacin (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qu elementos quiere que se vean en cada momento, como veremos ms adelante.

Las barras La barra de ttulo

La barra de ttulo contiene el nombre del programa (Marcromedia Dreamweaver 8) y seguidamente el nombre del documento que aparecer en el explorador y entre parntesis, su ubicacin y el nombre del archivo en formato html. En el extremo de la derecha estn los botones para minimizar, maximizar/restaurar y cerrar.

La barra de mens

La barra de mens contiene las operaciones de Dreamweaver, agrupadas en mens desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. Muchas de las operaciones se pueden hacer a partir de estos mens, pero para algunas es preferible o indispensable hacerlas desde los paneles. La barra de herramientas estndar

La barra de herramientas estndar contiene iconos para ejecutar de forma inmediata algunas de las operaciones ms habituales, como Abrir La barra de herramientas de documento , Guardar , etc.

La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estndar. Estas operaciones son las de cambio de vista del documento, vista previa, etc. La barra de estado

La barra de estado nos indica en cada momento en qu etiqueta HTML nos encontramos (en la imagen al encontrarnos en un documento en blanco estamos directamente sobre la etiqueta <body>). Tambin nos es posible alternar entre los modos de seleccin, mano (para arrastrar la pgina), o zoom. En cualquier momento puedes seleccionar el zoom preferido desde el desplegable zoom y ajustar la vista al porcentaje preferido (por defecto siempre viene al 100%). Los paneles e inspectores Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores. La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado. A travs de la opcin Ventana, de la barra de mens, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los ms importantes.

El inspector de Propiedades

El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma ms frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrar el tipo de fuente, la alineacin, si est en negrita o cursiva, etc. Pulsando sobre el botn se despliega para mostrar ms opciones. Este botn se encuentra en la esquina inferior-derecha. Seguramente ser la herramienta de Dreamweaver que ms vayas a utilizar. La barra de herramientas Insertar o panel de objetos

La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al men Insertar. Los elementos estn clasificados segn su categora: tablas, texto, objetos de formulario, etc. Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez. Si lo deseas puedes personalizar el rea de trabajo, te explicamos cmo hacerlo aqu .

Vistas de un documento Puedes cambiar la vista del documento a travs de la barra de herramientas de documento.

La vista Diseo La vista Diseo permite trabajar con el editor visual. Es la vista predeterminada de Dreamweaver y la que se suele utilizar habitualmente.

La vista Cdigo La vista Cdigo se utiliza para poder trabajar en un entorno totalmente de programacin, de cdigo fuente. No permite tener directamente una referencia visual de cmo va quedando el documento segn se va modificando el cdigo.

La vista Cdigo y Diseo La vista Cdigo y Diseo permite dividir la ventana en dos zonas. La zona superior muestra el cdigo fuente, y la inferior el editor visual. Cuando se realiza un cambio en alguna de las zonas, este cambio se aplica directamente sobre la otra.

La ayuda A travs del men Ayuda puedes: Acceder al cuadro de dilogo de ayuda muy similar al de Windows donde puedes buscar por temas, por ndice o por contenido, si seleccionas la opcin Utilizacin de Dreamweaver o simplemente pulsando F1. Acceder a tutoriales (opcin Primeros pasos con Dreamweaver). Abrir el panel Referencia en el que encontrars la sintaxis y descripcin de las etiquetas HTML. Acceder al Centro de servicio tcnico de Dreamweaver en la web. Acceder al Foros en lnea de Dreamweaver.

Unidad 3. Config uracin de un sitio local (I)

Bsqueda

pub-1875034419
es

ISO-8859-1

ISO-8859-1

GALT:#008000;G

En este tema vamos a ver qu es un sitio web, cmo crearlos y gestionarlos, y cmo modificar las propiedades de los documentos, como puede ser el color de fondo. Introduccin Un sitio web es un conjunto de archivos y carpetas, relacionados entre s, con un diseo similar o un objetivo comn. Es necesario disear y planificar el sitio web antes de crear las pginas 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 imgenes, las animaciones, las hojas de estilo, etc., se deben crear nuevas carpetas dentro de sta, con el objetivo de tener una mejor organizacin de los archivos a la hora de trabajar. Esto es lo que se conoce como sitio local. Despus se podrn 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 organizacin de los archivos en un sitio permite administrar y compartir archivos, mantener los vnculos de forma automtica, utilizar FTP para cargar el sitio local en el servidor, etc. Es conveniente que la pgina inicial del sitio tenga el nombre index.htm o index.html, ya que los navegadores buscan una pgina con ese nombre cuando se intenta acceder a una URL genrica. Por ejemplo, si escribiramos la direccin genrica http://www.aulaclic.com en el navegador, ste intentara cargar la pgina http://www.aulaclic.com/index.htm, por lo que se producira un error en el caso de que no existiera ninguna pgina con el nombre index.htm.

Crear o editar un sitio web sin conexin a Internet

Una vez creadas las carpetas que formarn un sitio local, ya es posible definir el sitio en Dreamweaver. Para ello hay que dirigirse al men Sitio, a la opcin Administrar sitios.... Recuerda que a travs del panel Archivos, pestaa Archivos, se puede acceder a cada uno de los sitios creados y a la opcin Administrar sitio.

En el caso de haber seleccionado la opcin Administrar 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 opcin Nuevo..., como si se elige la opcin Editar..., se mostrar la misma ventana en la que definir las caractersticas del sitio.

Las caractersticas del sitio se agrupan en diferentes categoras que aparecen en la parte izquierda. Para visualizar las caractersticas de una categora basta con seleccionarla de la lista haciendo clic en ella. Vamos a ver los datos que hay que editar para la categora Datos locales. Debe definirse el Nombre del sitio y la Carpeta raz local, que es en la que se encuentra el sitio dentro del disco duro local. Despus, si se desea, a travs de la categora Mapa de diseo del sitio puede definirse la pgina principal del sitio, de la que colgarn el resto de documentos HTML dentro del sitio, si en la carpeta raz del sitio existe una pgina con el nombre index.htm, Dreamweaver la coger por defecto.

Estas tres caractersticas son las imprescindibles para definir un sitio local. Las dems 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. Despus de rellenar los datos pulsamos el botn Aceptar y abrimos el sitio. Si preferimos utilizar un asistente para crear el sitio web slo tenemos que seleccionar la pestaa Bsicas, en vez de la pestaa Avanzadas.

Abrir un sitio Para abrir un sitio ya definido hay que dirigirse al men Sitio, a la opcin Administrar sitios.... seleccionar el sitio de la lista de sitios y pulsar sobre el botn Listo. Tambin podemos utilizar el panel Archivos, buscar y seleccionar el sitio a abrir en el men desplegable de la pestaa Archivos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un sitio web local.

istas del sitio Es posible visualizar un sitio en el panel Archivos o en una ventana. El panel Archivos se puede abrir a travs del men Ventana, opcin Archivos. Tambin pulsando F8.

Para cambiar de una vista a otra hay que pulsar sobre el botn superior del panel y de la ventana.

que aparece en la parte

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 pgina principal del sitio y contiene vnculos hacia los otros dos.

Si los archivos se mueven de una carpeta a otra, o se cambian de nombre, desde fuera de Dreamweaver, las pginas no se mostrarn correctamente: no aparecern imgenes, no funcionarn enlaces, etc. En cambio, si estas modificaciones se hacen desde dentro de Dreamweaver, a travs del sitio, es posible actualizar automticamente las pginas para que si hacen referencia a un objeto que ha cambiado, despus no se produzcan problemas al visualizarlas. Al modificar algn objeto que es referenciado por

algn 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 botn Actualizar.

Subir Archivos al servidor Cuando quieras visualizar el sitio en Internet (al terminar el curso o para hacer pruebas) debers subir los archivos al sitio que hayas contratado o conseguido gratuitamente.

Algunos sitios gratuitos slo permiten que subas archivos va web, por lo que debers ir subiendo uno a uno cada archivo y creando las carpetas t mismo. Este proceso puede hacerse muy largo y debes tener mucho cuidado en mantener la estructura tal y como se encuentra en tu carpeta del disco duro. Sino los enlaces no funcionarn correctamente y es posible que algunas imgenes no se muestren. Para subir los archivos via web debers seguir las instrucciones que te proporcionar tu servidor.

La alternativa es un servidor FTP, que se utiliza en todos los sitios de pago y en algunos gratuitos. Esta forma es, de lejos, mucho mejor que la anterior. Va FTP puedes ver el contenido de tu sitio como una carpeta ms (igual que en el Explorador de Windows) y, obviamente, nos es mucho ms til para subir los archivos. Uno de los programas gratuitos (si no es con fines comerciales) ms utilizados es SmartFTP, desdesu pgina web podrs descargarte el programa y su traduccin al espaol. Una vez instalado, abre el programa y haz clic en Archivo y luego en Nuevo Navegador Remoto para crear una nueva cuenta FTP.

Aqu debers introducir los datos que te facilit el servidor donde vas a alojar tus pginas: Host, Usuario y Contrasea. Rellena los campos y haz clic en OK. Se conectar automticamente y podrs ver una carpeta donde podrs copiar los archivos que hayas creado. Para ello, haz clic en Archivo y en Nuevo Navegador Local para abrir un navegador de los archivos de tu disco duro. Busca la carpeta que definiste como Sitio local y copia todos los archivos que quieras subir seleccionndolos a la vez y arrastrndolos a la carpeta (remota) del servidor.

Vers como el programa empieza a copiar la informacin de tu disco a Internet. Cuando haya finalizado, slo tendrs que introducir tu direccin de Internet en la barra de direcciones de tu navegador (Firefox, Internet Explorer...) y vers el sitio en Internet!

Los servidores de pago, normalmente suelen mostrar varias carpetas al conectar con el servidor. Busca la carpeta public_html y sube tus archivos all.

Propiedades del documento Es conveniente definir sitios homogneos, que todas las pginas de un sitio sigan un mismo

formato, es decir, que tengan el mismo color de fondo, de fuente, etc. Puede definirse el formato de cada una de las pginas a travs del cuadro de dilogo Propiedades de la pgina. Este cuadro se puede abrir de tres modos diferentes: Pulsar la combinacin de teclas Ctrl+J. Hacer clic sobre el men Modificar y elegir la opcin Propiedades de la pgina. Hacer clic con el botn derecho del ratn sobre el fondo de la pgina. Aparecer al final del men contextual la opcin Propiedades de la pgina. Se abrir el cuadro de dilogo siguiente:

Las propiedades estn organizadas en categoras. En la categora Aspecto, como ves en la imagen anterior, encontramos las propiedades: Imagen de fondo: permite especificar una imagen de fondo para el documento. Dicha imagen se muestra en mosaico. Es importante al elegir una imagen de fondo tener en cuenta que segn los colores de la imagen ser necesario establecer unos u otros colores para el texto, as como que no es conveniente tener un gif animado como fondo. Color de fondo: permite especificar un color de fondo para el documento, pero dicho color solo se mostrar en el caso de no haber establecido ninguna imagen de fondo. Tamao: permite definir el tamao de la letra. Color del texto: es el color de la fuente. Mrgenes: permiten establecer mrgenes en el documento. Los mrgenes izquierdo y superior solo funcionan en Microsoft Internet Explorer, mientras que el ancho y el alto de mrgen solo funcionan para Netscape Navigator. Ninguno de estos mrgenes aparece en la ventana de documento de Dreamweaver, solo se mostrarn en los navegadores.

En la categora Ttulo/Codificacin encontramos la propiedad: Ttulo: es el ttulo del documento, que aparecer en la barra de ttulo del navegador y de la ventana de documento de Dreamweaver.

En la categora Vnculos encontramos las propiedades:

Color de vnculo: es el color de los vnculos, que ayuda al usuario a distinguir entre el texto normal y los vnculos que sirven de enlace a otras pginas. Vnculos visitados: es el color de los vnculos visitados, que permite distinguir al usuario si unos vnculos ya han sido visitados o no. Vnculos activos: es el color de los vnculos activos. Estilo subrayado: por defecto, cuando tenemos un texto con un vnculo asociado, el texto aparece subrayado, con esta opcin podemos elegir otro tipo de estilo por ejemplo para que no aparezca subrayado. En la categora Imagen de rastreo encontramos las propiedades: Imagen de rastreo: permite establecer una imagen como fondo del documento, pero que slo se mostrar en la ventana de documento de Dreamweaver, y nunca en un navegador. Dicha imagen se utiliza como plantilla grfica sobre la que crear el documento. Transparencia: permite establecer la opacidad de la imagen de rastreo.

Hay que tener cuidado de no crear pginas que tarden mucho tiempo en cargarse en el navegador. Para ver cmo comprobar el tamao de los documentos, pulsa aqu .

Los colores 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. Tambin es posible personalizar los colores a travs del botn de la parte superior de la paleta.

Los colores pueden asignarse a travs de los botones:

Estos botones suelen aparecer en el inspector de propiedades de muchos objetos, y tambin en algunas ventanas que permiten especificar propiedades (sobre todo propiedades de texto, fondo, o tablas), como es el caso de la ventana de Propiedades de la pgina, que tienes ms 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 nmero hexadecimal del color en el recuadro blanco. Por ejemplo, si en la paleta de colores que aparece ms arriba se seleccionara el color azul con valor #3399FF, el botn quedara del siguiente modo: .

Para practicar puedes realizar el Ejercicio paso a paso Crear nuevo documento y modificar sus propiedades. Ejercicios del Tema 3. Prueba evaluativa del Tema 3.

Uni dad 4. El text o (I)

Bsqueda

pub-1875034419

ISO-8859-1

ISO-8859-1

GALT:#008000;G

es

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto y a crear estilos CSS, que permiten asignar al texto estilos creados por nosotros mismos, no predefinidos.

Caractersticas del texto

Las caractersticas del texto seleccionado pueden ser definidas a travs del men Texto, y a travs del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a travs del inspector de propiedades, aunque sean menos que las que se nos ofrecen a travs del men Texto.

Formato: Permite seleccionar un formato de prrafo ya definido para HTML, que puede ser encabezado, prrafo o preformateado. Los encabezados se utilizan para establecer ttulos dentro de un documento. El formato preformateado sirve para que el texto aparezca tal cual ha sido escrito, por ejemplo, si entre dos palabras se introducen varios espacios solo se considera uno, pero al establecer el formato preformateado se respetar que hayan varios espacios en lugar de solo uno. Fuente: Permite seleccionar un conjunto de fuentes. Aparecen conjuntos de fuentes en lugar de una sola, ya que es posible que al establecer una nica fuente el usuario no la tenga en su ordenador. El seleccionar un conjunto de fuentes posibilita que en el caso de que el usuario no tenga una fuente se aplique otra del conjunto. Por ejemplo, si seleccionamos Arial, Helvetica, Sans-serif, el texto se ver con la fuente Arial, pero si esta no existe se ver en Helvetica. Tamao: Permite cambiar el tamao del texto. El tamao lo podemos indicar en diversas unidades, en pxeles, centmetros, etc... Color: Permite seleccionar el color de la fuente, ignorando el color que se haya definido en las propiedades de la pgina. Si no se ha establecido ningn color en las propiedades de la pgina ni aqu, el color del texto por defecto ser el negro.

Estilo: Estos botones permiten establecer si el texto aparecer en negrita o en cursiva. A travs del men Texto tambin se puede, entre otras cosas, subrayar el texto. Esta opcin no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vnculos aparecen subrayados y el subrayar texto normal podra hacer que el usuario pensara que se trata de un vnculo. Alinear: A travs de estos botones es posible establecer la alineacin del texto de una de estas cuatro formas distintas: izquierda, centrada, derecha y justificada. Lista: Estos botones permiten crear listas con vietas o listas numeradas. Sangria: Estos dos botones permiten sangrar el texto y anular la sangra. La sangra es una especie de mrgen que se establece a ambos lados del texto. En este caso caso los botones se refieren a sangra a la izquierda del texto.

Para practicar puedes realizar el Ejercicio paso a paso Insertar texto y modificar sus propiedades. Listas

Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con vietas. Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opcin de lista correspondiente, ya sea a travs del inspector de propiedades, o a travs del men Texto. La lista con vietas (desordenada) se selecciona a travs del botn numerada (ordenada) se selecciona a travs del botn . Ejemplo de lista numerada (ordenada):
1. Preparar la mochila 1. Sacar los libros de ese da 2. Introducir los libros del da siguiente 2. Ponerme el pijama 3. Lavarme los dientes 4. Poner el despertador

, mientras que la lista

Ejemplo de lista con vietas (desordenada):


Perro Gato Aves Canario Loro Hamster


o o

Para establecer listas anidadas dentro de otras como en los ejemplos anteriores, es necesario aadir una sangra en los elementos de la lista que se desee que pasen a formar parte de la lista anidada. A travs del men Texto, opcin Lista, es posible acceder a las propiedades de la lista seleccionada. Se debe seleccionar el texto de la lista previamente o tener el cursor en algn lugar de la lista para que se active este submen. En la ventana Propiedades de lista se puede especificar el tipo de lista (con nmeros o con vietas), el tipo de nmeros o vietas que se utilizarn (en la propiedad Estilo:), y en el caso de las listas ordenadas, el nmero por el que comenzar el recuento.

Para practicar puedes realizar el Ejercicio paso a paso Convertir texto en una lista.

Caracteres Especiales A veces necesitars introducir caracteres especiales en tus pginas. Debido al modo editor de Diseo de Dreamweaver esta tarea es muy sencilla utilizando el teclado, podemos incluir caracteres como , , , , .. de forma rpida por si quieres poner dos espacios en blanco y los introduces por teclado, Dreamweaver no los crear, debers introducirlo dos veces utilizando la opcin que vamos a ver a continuacin.

Haz clic en el men Insertar y selecciona la opcin HTML vers el desplegable de la imagen de la derecha. Slo coloca el puntero del ratn sobre Caracteres especiales y vers una lista rpida de los caracteres ms utilizados que no pueden ser introducidos mediante teclado.

Para introducir alguno de estos caracteres en tus textos slo seleccinalo en la lista y aparecer en la vista de Diseo. Si el carcter que buscas no se encontrase all, haz clic en Otro... y se abrir una ventana desde donde podrs seleccionar caracteres entre una lista bastante ms amplia:

Estilos CSS. Introduccin En el men Texto, opcin Estilo, aparecen una serie de estilos predefinidos que pueden aplicarse al texto seleccionado.

Los estilos CSS estn en hojas de estilo de actualizacin automtica (tambin denominadas Hojas de Estilo en Cascada) se utilizan para combinar una serie de atributos del texto, como pueden ser el color o el tamao, de modo que no sea necesario asignar estos atributos uno a uno cada vez que se desee repetir la asignacin de esos mismos valores a otras partes del texto. Tambin algunas de sus opciones pueden utilizarse para definir atributos de imgenes y otras caractersticas que no permitan definir los estilos HTML en versiones anteriores, como el color de fondo para el texto, etc. Incluso permiten aplicar un estilo sobre todas las etiquetas HTML de un mismo tipo, como puede ser la etiqueta A HREF, que corresponde a los hiperenlaces. De este modo, todos los hiperenlaces de la pgina adquiriran la apariencia definida en ese estilo. Un estilo CSS no es ms que un conjunto de reglas de formato que controlan el aspecto del contenido de una pgina Web. Los estilos CSS aportan gran flexibilidad y control al aspecto exacto que se busca en una pgina, desde la posicin precisa de elementos hasta el diseo de fuentes y estilos concretos.

Una de las grandes ventajas de los estilos CSS reside en que cuentan con una capacidad simple de actualizacin; cuando actualiza un estilo CSS, el formato de todos los documentos que usan ese estilo se actualiza automticamente.

Crear un Estilo Personalizado Con Dreamweaver 8, las caractersticas que apliquemos a un texto crearn automticamente estilos CSS que se incrustarn en el documento actual y se aplicarn nicamente sobre l. Vemoslo: Para crear un Estilo CSS personalizado: 1. En el documento, se selecciona el texto al que se desea aplicar caractersticas concretas. 2. En el inspector de propiedades se modifican todas las propiedades de formato de texto, se establecen los atributos de la fuente y del prrafo que queramos.

Automticamente Dreamweaver crear un nuevo estilo con el nombre Estilo1 o Estilo2 o Estilo3,... segn los nombres de los estilos ya creados. Aparecer el nombre Estilo1 en el cuadro Estilo del panel Propiedades.

Tambin se puede cambiar el nombre del estilo, es mejor que el estilo tenga un nombre que indique a qu tipo de texto se va a aplicar. Para ello desplegamos la lista de estilos y seleccionamos la opcin Cambiar nombre... Aparecer un cuadro de dilogo para que introduzcamos el nuevo nombre como la imagen inferior.

Seguidamente se coloca el nuevo nombre sin espacios en blanco. En este caso: miestilo. Al aceptar, aparecer un panel con el nombre Resultados. Cerrar esta ventana. De esta manera se puede crear un estilo para aadirlo a un documento. Cada nuevo estilo que se crea, se aade a la lista de estilos, y los podemos acceder tambin de una manera rpida a travs del men Texto, opcin Estilos CSS. En el Panel CSS se puede verificar que se ha aadido automticamente el nuevo estilo.

Si lo deseas, puedes aprender ms sobre el panel CSS aqu

Aplicar un Estilo

Para aplicar un Estilo CSS personalizado: En el documento, selecciona el texto al que deseas aplicar el estilo CSS, o sita el punto de insercin del mouse en un prrafo para aplicar el estilo a todo el prrafo. Si seleccionas un rango de texto dentro de un prrafo, el Estilo CSS slo afectar al rango seleccionado. En el inspector de Propiedades se selecciona el estilo creado por nosotros de la lista que aparece al desplegar el cuadro Estilo.

Para practicar puedes realizar el Ejercicio paso a paso Crear estilo de clase.

Hojas de Estilos

Podemos exportar estilos que se encuentren incrustados en la pgina HTML a una nueva hoja de estilos haciendo clic derecho sobre el estilo en el Panel CSS y seleccionando Exportar. Se abrir el cuadro de dilogo Exportar estilos como archivo CSS que te permitir guardar todos los estilos incrustados en un nuevo archivo CSS. Esta opcin es muy til si tienes los estilos incrustados en una pgina y queremos utilizarlos en otras tambin. Simplemente pasamos los estilos incrustados a una hoja de estilos y luego la adjuntamos en cualquier pgina que queramos utilizarlos.

Para asignar una hoja de estilos a una pgina despliega el cuadro Estilo que se encuentra en el Inspector de Propiedades y selecciona Adjuntar hoja de estilos...

En Arch./URL debe especificarse la ruta y el nombre de la hoja de estilos. Elegimos si queremos Vincular o importar la hoja de estilos. Si elegimos Vincular la hoja no se incrusta en la pgina sino que se aade a la pgina una referencia a la hoja, esto permite que cualquier cambio realizado en la hoja quede reflejado de manera automtica en todas las pginas que utilizan la hoja. Esta es la opcin ms aconsejable si vamos a utilizar el estilo en ms de una pgina, de esta forma slo ser necesario vincular cada una de los archivos que quieras qeu se vean afectados a la hoja de estilos que hayas creado. Si elegimos Importar la hoja se incrusta en la pgina. La opcin Media te permitir seleccionar el tipo de medio al que se asociar la hoja de estilos, por ejemplo, screen (pantalla), print (impresora) o tv (webtv). Estas opciones te permitirn crear hojas de estilos para soportes diferentes. Puedes crear una para screen, que ser la que se muestre cuando navegues por Internet, y otra para print que ser la que se utilice cuando se imprima el contenido del archivo. Despus de Aceptar, la hoja con sus estilos aparecer en el panel CSS.

Ejerc icios del Tema 4. Unidad 5. Hipere nlaces (I)

Prueba evaluativa del Tema 4.


Bsqueda

pub-1875034419
es

ISO-8859-1

ISO-8859-1

GALT:#008000;G

Vamos a ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que son un elemento esencial para cualquier pgina web.

Introduccin Un hiperenlace, hipervnculo, o vnculo, no es ms que un enlace, que al ser pulsado lleva de una pgina o archivo a otra pgina o archivo. Es posible asignar un vnculo 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 vnculos. Referencia absoluta: Conduce al sitio en el que se encuentra el documento utilizando la ruta completa del archivo. La ubicacin es en Internet, por ejemplo, http://www.aulaclic.com, o http://www.misitio.com/pagina/pagina1.html. 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 documento actual. Si queremos referinos a carpetas que estn por encima del nivel donde nos encontramos deberemos utilizar ../ Por ejemplo, imagina que estamos en la siguiente direccin http://www.misitio.com/pagina/informacion/index.html. En esta pgina queremos mostrar una imagen que se encuentra en la carpeta http://www.misitio.com/pagina/secciones/seccion1.html, cmo podemos hacerlo? Fcil. Deberemos llamarla haciendo referencia al nivel superior (http://www.misito.com/pagina/) para poder ir luego a la carpeta secciones. El resultado de la ruta sera el siguiente: ../secciones/seccion1.html. De esta forma, mientras nos encontramos en la carpeta informacion, subimos un nivel y luego nos movemos dentro de la carpeta secciones para mostrar el archivo seccion1.html. Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio que el documento actual. En este mtodo los enlaces se crean indicando la ruta a partir de la raz del sitio. En el ejemplo anterior si tuviesemos definido como sitio la carpeta http://www.misitio.com/, un enlace en cualquier pgina del sitio a http://www.misitio.com/pagina/secciones/seccion1.html se creara como /pagina/secciones/seccion1.html. Como puedes ver ahora el vnculo a un archivo en todas las pginas es igual porque se define dependiendo del sitio raz y no de la ubicacin donde se encuentra.

Puntos de fijacin: Conduce a un punto dentro de un documento, ya sea dentro del actual o de otro diferente. Para ello el vnvulo debe ser nombre_de_documento.extension#nombre_de_punto. El punto se define dentro de un documento a travs del men Insertar, opcin Anclaje con nombre. Podramos referenciar de este modo a un anclaje llamado parte2 de la siguiente forma: ../secciones/seccion1.html#parte2

Estos tipos de enlace que hemos visto son vlidos tanto para referenciar pginas (para crear hiperenlaces) o incluso imgenes u otro tipo de objetos (como veremos en temas posteriores). Debers tener siempre en cuenta que los nombres de las rutas se correspondan perfectamente a los nombres de los archivos y carpetas en el servidor (local o remoto). Por ello, es muy recomendable que utilices siempre minsculas para evitar fallos en los enlaces. Tambin debers evitar utilizar caracteres especiales como acentos o espacios, as no tendrs problemas a la hora de referenciar tus objetos.

Crear enlaces

La forma ms sencilla de crear un enlace es a travs del inspector de propiedades. Para ello es necesario seleccionar el texto o el objeto que va a servir de enlace, y seguidamente establecer el Vnculo en el inspector. Por ejemplo, aqu hay un enlace a www.elpais.es, que es de referencia absoluta, por eso contiene HTTP://

Es posible crear tambin vnculos vacos, que pueden ser tiles cuando se utilizan comportamientos, etc. Para ello es necesario escribir en Vnculo nicamente una almohadilla #.

Otra forma de crear un enlace es a travs del men Insertar, opcin Hipervnculo.

Crear vnculos de esta forma es muy sencillo, slo debers rellenar los campos que explicaremos a continuacin y el enlace se colocar en el lugar en el que estaba situado el cursor. Texto: es el texto que mostrar el enlace Vnculo: es la pgina a la que ir redirigida el enlace, si se trata de un enlace externo debers escribirla empezando siempre por HTTP://. Haz clic sobre el icono de carpeta para buscar los archivos que existan dentro del sitio. Por defecto dramweaver te crear un enlace relativo al documento. Si quieres que los enlaces sean relativos al sitio visita este avanzado . Destino: la pgina donde se abrir la pgina, este campo se explica en el siguiente apartado. Ttulo: se trata de la ayuda contextual del vnculo, es equivalente al atributo ALT de las

imgenes. Tecla de acceso: atributo que facilita la accesibilidad a las pginas, habilita el acceso al enlace mediante la pulsacin de la tecla Alt ms la tecla de acceso indicada. ndice de tabulador : Como habrs podido observar puedes saltar a travs de los enlaces pulsando la tecla Tabulador. En este campo podrs establecer un ndice indicando la prioridad del enlace y as configurar el modo en el que actuar el Tabulador es sus diferentes saltos.

Destino del enlace El destino del enlace determina en qu ventana va a ser abierta la pgina vinculada, puede variar dependiendo de los marcos de que disponga el documento actual. Puede especificarse en el inspector de propiedades a travs de Dest, o en la ventana que aparece a travs del men Insertar, opcin Hipervnculo. _blank: Abre el documento vinculado en una ventana nueva del navegador. _parent: Abre el documento vinculado en la ventana del marco que contiene el vnculo o en el conjunto de marcos padre. _self: Es la opcin predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vnculo. _top: Abre el documento vinculado en la ventana completa del navegador. No te preocupes si no te queda del todo claro para qu sirve cada una de estas opciones de destino, ya que se volvern a ver en el tema de Marcos.

Para practicar puedes realizar el Ejercicio paso a paso Crear un hiperenlace. Formato del enlace

En general, un texto que tiene asociado un vnculo suele aparecer subrayado. Al mismo tiempo, puede adquirir tres colores diferentes que pueden especificarse a travs de las propiedades de la pgina. Estos tres colores diferentes son los que se asignan como color de vnculo, de vnculo activo, y de vnculo visitado. Aqui tienes un vnculo de ejemplo: www.aulaclic.com

Cuando el vnculo est definido sobre una imagen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vnculo est definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona. Aqui tienes dos vnculos similares de ejemplo:

Como puedes ver, la segunda imagen que hace de vnculo contiene un recuadro alrededor. Esto ocurre debido a que que el campo Borde del inspector de propiedades de la imagen vale uno (1), mientras que para la primera imagen vale cero (0). El campo Borde sirve para ponerle un borde a la imagen, independientemente de si sta va a contener un vnculo o no. Si se pone a cero (0), no aparece ningn borde, ya que esto indica que el tamao de las lneas que forman el recuadro es cero (0). Puede hacerse un recuadro ms gordo incrementando el valor del campo Borde.

Tanto si el vnculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vnculo. Suele adquirir la apariencia de una mano sealando. Enlace a correo electrnico

Es posible especificar vnculos a direcciones de correo electrnico. Esto resulta til cuando se desea que los visitantes de la web puedan contactar con nosotros. La sintaxis del vnculo en este caso es mailto:direccindecorreo. Puede definirse el vnculo a travs de Vnculo, del inspector de propiedades, seleccionando previamente el texto o la imagen deseados. Tambin es posible a travs del men Insertar, opcin Vnculo de correo electrnico. En este caso no es posible asignar el vnculo a una imagen, solo permite introducir el texto que contendr el vnculo de correo. Para practicar puedes realizar el Ejercicio paso a paso Crear vnculo de correo electrnico. En ocasiones es posible que existan en nuestro sitio lo que se conoce como Vnculos rotos. Si no sabes lo qu son o cmo solucionarlos, consltalo aqu .

Ejercicios del Tema 5.

Prueba evaluativa del Tema 5.

Você também pode gostar