Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Dreamweaver 8
Dreamweaver 8
http://www.aulaclic.es/dreamweaver8/t_1_1.htm
INDICE:
1. Conceptos bsicos de Dreamweaver 8 2. El entorno de trabajo 3. Configuracin de un sitio local 4. El texto 5. Hiperenlaces 6. Imgenes 7. Tablas 8. Marcos 9. Formularios 10. Multimedia 11. Las plantillas 12. HTML desde Dreamweaver 13. Otros elementos 14. Capas 15. Comportamientos 16. Comportamientos Avanzados 17. Estilos CSS Avanzado 18. Sitios Remotos 19. Servidor de Pruebas 20. Pginas Dinmicas 21. Cmo crear un Blog 22. XML y RSS 23. AJAX y Spry Framework
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. Para seguir este curso te puedes descargar la versin gratuita de Dreamweaver desde la pgina de Adobe, la versin caduca al cabo de 30 das, pero seguro que te animas a comprar la versin de pago de este estupendo programa.
HTML bsico
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.
Novedades de Dreamweaver 8
En este punto comentaremos las caractersticas que aporta esta nueva versin sobre la anterior, Dreamweaver MX 2004. Integracin de RSS: con Dreamweaver 8 podrs integrar entradas RSS provenientes de otras pginas con slo introducir la fuente y arrastrar y colocar los campos. De esta forma podrs introducir datos en formato XML fcil y cmodamente. Mejoras CSS: esta ltima versin ha mejorado mucho respecto a la compatibilidad y manejo de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde ahora podrs acceder a la configuracin de cada uno de los estilos desde una lista mucho mejor dotado de una cuadrcula editable desde donde podrs modificar sus propiedades. Adems, Dreamweaver 8, aade una nueva barra de herramientas que proporciona la reproduccin inmediata de los estilos para diferentes medios (pantalla, impresora, web TV, PDAs...). Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2 marcadas por la WCAG/W3C. Transferencia de archivos: Ahora con Dreamweaver 8 podrs seguir trabajando con tus archivos mientras el programa se comunica con tu servidor e incluye los archivos creados o modificados recientemente. Su sincronizacin ha mejorado notablemente siendo posible una mejor gestin de cambios, adems de permitir en uso de bloqueo/desbloqueo de archivos para que estos no se sobrescriban. Interfaz mejorada: Los usuarios con problemas visuales podrn acceder a una opcin de Aumento de la pantalla en vista de diseo para analizar o trabajar con difciles anidamientos de tablas. Adems de la inclusin de informacin visual gracias a las guas que permitirn la medicin pxel a pxel de todos los elementos. Nueva barra de herramientas: Se ha aadido una barra de herramientas a Dreamweaver 8, podrs encontrarla en la parte lateral izquierda del modo de Cdigo, esta barra hace mucho ms accesible el cdigo al permitirnos la navegacin por etiquetas y su contraccin. Una de las nuevas novedades es la posibilidad de aadir comentarios con un slo clic. Compatibilidad: Comentaremos, adems, la compatibilidad aadida en esta versin con PHP5, Coldfusion MX 7 y Video Flash.
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 Macromedia 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.
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 entre maysculas y minsculas, por lo que si en tu pgina quieres mostrar la imagen foto1.jpg debers guardarla con ese nombre y no como Foto1.jpg. Evitars horas perdidas buscando fallos.
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.
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.
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.
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.
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 contrado. 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 ltimas 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.
significa...
significa...
c) Cerrar.
significa...
8. Si hacemos clic sobre el botn Nuevo de la barra de herramientas: a) Aparecer directamente un nuevo documento vaco en pantalla. b) Aparecer una nueva ventana en la que hay que elegir el tipo de documento que se desea crear. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
9. Si se pulsa sobre el icono a) Se guardarn todos los documentos modificados y los nuevos. b) Se guardarn solamente todos los nuevos documentos. c) Se guardarn solamente todos los documentos modificados. d) Ninguna de las opciones anteriores. 10. La combinacin de teclas Ctrl + O sirve para.... a) Crear un nuevo documento. b) Abrir un documento. c) Cualquiera de las dos primeras opciones. d) Ninguna de las opciones anteriores.
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 , 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%).
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.
7. En la barra Insertar o panel de Objetos... a) se puede cambiar las vistas del documento. b) los botones estn clasificados segn su categora. c) se configuran las propiedades del objeto seleccionado. 8. Se puede trabajar con el editor visual mediante las vistas... a) diseo. b) cdigo. c) las dos respuestas anteriores son correctas. 9. El icono sirve para ...
a) pasar a la vista cdigo. b) pasar a la vista cdigo y diseo. c) pasar a la vista diseo. d) insertar una imagen. 10. La vista diseo... a) es la vista predeterminada. b) es la que se suele utilizar habitualmente. c) las dos afirmaciones anteriores son verdaderas. d) las tres afirmaciones anteriores son falsas.
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.
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.
1 Si es la primera vez que realizas este ejercicio, copia en la carpeta Mis documentos de tu disco duro, la carpeta ejerciciosdream, que se encuentra dentro de la carpeta ejercicios del curso. 2 Si no tienes abierto Dreamweaver, brelo para realizar el ejercicio. 3 Haz clic sobre el men Sitio. 4 Elige la opcin Administrar sitios. Se abrir una nueva ventana. 5. Selecciona el botn Nuevo..., y selecciona la opcin Sitio. Se abrir una nueva ventana. 5 Selecciona la pestaa Avanzadas de la nueva ventana. 6 Selecciona Datos locales en Categora. 7 En Nombre del sitio escribe Cocina. 8 En Carpeta raz local busca la carpeta cocina , que se encuentra dentro de la carpeta ejercicios dream, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 9 En Carpeta predeterminada de imgenes busca la carpeta imagenes, que se encuentra dentro de la carpeta cocina, y seleccinala. Puedes hacerlo a travs del botn con forma de carpeta. 10 Haz clic sobre el botn Aceptar y sobre el botn Listo. A partir de este momento, realizando los ejercicios paso a paso, vamos a crear una pgina como la que aparece si pulsas aqu.
Para cambiar de una vista a otra hay que pulsar sobre el botn parte superior del panel y de la ventana.
que aparece en la
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.
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, desde su 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 dnde 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.
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 margen 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.
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.
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.
Ejercicio paso a paso. Unidad 3. Crear nuevo documento y modificar sus propiedades
Objetivo.
Practicar las operaciones que hay que realizar para crear un nuevo documento html y configurar las propiedades de la pgina.
2 Abre el men Archivo y elige la opcin Nuevo, o bien haz clic sobre el botn la barra de herramientas. 3 Selecciona la pestaa General de la nueva ventana. 4 Selecciona Pgina bsica en Categora. 5 Selecciona HTML en Pgina bsica:. 6 Haz clic sobre el botn Crear.
de
7 A partir de este momento vamos a realizar todos los ejercicios en la vista diseo. Haz clic sobre el botn Mostrar vista de diseo .
8 Haz clic con el botn derecho del ratn sobre el documento en blanco, para abrir su men contextual. 9 Elige la opcin Propiedades de la pgina en el men contextual. 10 En Ttulo escribe Cocina. 11 En Fondo: escribe #CCCC99. 12 En Vnculos: escribe #CC6600. 13 En Vnculos visitados: escribe #CC9933. 14 En Vnculos activos: escribe #CC9966. 15 Haz clic sobre el botn Aceptar.
16 Haz clic sobre el botn Guardar de la barra de herramientas. Guarda el documento con el nombre menu.htm, dentro de la carpeta cocina del ejercicio anterior.
Ejercicio 1: Deportes
1 Crear un sitio local con el nombre Deportes, cuya carpeta raz sea la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento menu.htm. 3 Modificar sus propiedades para que el color de los vnculos, sea cual sea su estado, sea #000000 y nunca se encuentren subrayados. 4 Asgnale el color de fondo #738099 y la imagen fondo5.gif que se encuentra en la carpeta imagenes del sitio aparezca como fondo sin repeticin. 5 Haz que la fuente del documento sea Verdana 18px Negrita. 6 Abre los archivos donde.htm, instalaciones.htm, quienes.htm y reservas.htm. 7 Establece el color de fondo como #999999, selecciona la imagen fondo.gif de la carpeta imagenes del sitio como fondo y que se repita sobre el eje de las x. 8 Haz que la fuente de estos documentos sea Arial. 9 Abrir el documento marcos.htm y darle el ttulo Tu Tienda de Deportes. 10 Guardar todos los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.
Ejercicio 2: Animales.
1 Crear un sitio local con el nombre Animales, cuya carpeta raz sea la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdream. 2 Abrir el documento consultas.htm y modificar sus propiedades, para que su ttulo sea Consultas. 3 Abrir el documento gatos.htm y modificar sus propiedades, para que su ttulo sea Gatos. 4 Abrir el documento perros.htm y modificar sus propiedades, para que su ttulo sea Perros. 5 Abrir el documento inicio.htm y modificar sus propiedades, para que su ttulo sea Inicio. 6 Guardar los cambios y cerrar los documentos. A partir de este momento, realizando los ejercicios propuestos, vamos a crear una pgina como la que aparece si pulsas aqu.
Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores, Aqu te lo explicamos.
Ayuda Ejercicios Unidad 3. Crear sitio local y modificar las propiedades de la pgina
Ejercicio 1: Deportes
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio. En la nueva ventana, seleccionar el botn Nuevo... En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales. En Nombre del sitio hay que escribir Deportes. En Carpeta raz local hay que seleccionar la carpeta deportes, que se encuentra dentro de la carpeta ejerciciosdream. Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta deportes, como Carpeta predeterminada de imgenes. Por ltimo, hay que hacer clic sobre el botn Aceptar. Apartado 2 Para abrir el documento menu.htm puedes hacer doble clic sobre l en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Apartado 3 Una vez abierto el documento en Dreamweaver, elige a la opcin Propiedades de la pgina del men Modificar. En la nueva ventana haz clic en la categora Vnculos, y en los campos que aparecern a la derecha modifica Color de vnculo, Vnculos visitados, Vnculos de sustitucin y Vnculos activos y dales el valor #000000, en el campo Estilo subrayado escoge Nunca subrayar. Apartado 4 Selecciona la categora Aspecto y modifica los campos a los siguientes valores, Color de fondo: #738099; Imagen de fondo: imagenes/fondo5.gif; Repetir: no repetir. Apartado 5 Modifica tambin los campos Fuente de pgina: Verdana, Arial, Helvetica, sans-serif; Tamao: 18 y pulsa el botn Negrita Por ltimo, pulsa el botn Aceptar. Apartado 6 Para abrir los documentos donde.htm, instalaciones.htm, quienes.htm y reservas.htm puedes hacer doble clic sobre ellos en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Apartado 7 Una vez abierto los documentos en Dreamweaver, elige a la opcin Propiedades de la pgina del men Modificar para cada uno de ellos y modifica los siguientes campos en la catagora Aspecto. Color de fondo: #999999 Imagen de fondo: imagenes/fondo.gif
Repetir: repetir x Apartado 8 Selecciona Arial, Helvetica, sans-serif en el campo Fuente de pgina. Por ltimo, pulsa el botn Aceptar. Apartado 9 Para abrir el documento marcos.htm puedes hacer doble clic sobre l en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos y seleccionar el sitio en el men desplegable que aparece. Escribe Tu Tienda de Deportes en el campo Ttulo de la barra de herramientas de documento. Apartado 10 Para cada uno de los archivos abiertos hacer clic sobre el botn Guardar , y despus sobre el botn Cerrar . El botn de cerrar cambia dependiendo del diseo de vista de la pgina, si es como fichas o como ventanas flotantes.
Ejercicio 2: Animales
Apartado 1 Para crear un sitio nuevo es necesario elegir la opcin Administrar sitios... en el men Sitio. En la nueva ventana, seleccionar el botn Nuevo... En la nueva ventana, en la pestaa Avanzadas, hay que elegir la categora Datos locales. En Nombre del sitio hay que escribir Animales. En Carpeta raz local hay que seleccionar la carpeta animales, que se encuentra dentro de la carpeta ejerciciosdream. Podemos seleccionar la carpeta imagenes, que se encuentra dentro de la carpeta animales, como Carpeta predeterminada de imgenes. Por ltimo, hay que hacer clic sobre el botn Aceptar. Apartado 2 Para abrir el documento consultas.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Consultas en el campo Ttulo de la barra de herramientas de documento. Apartado 3 Para abrir el documento gatos.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Gatos en el campo Ttulo de la barra de herramientas de documento. Apartado 4 Para abrir el documento perros.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Perros en el campo Ttulo de la barra de herramientas de documento.
Apartado 5 Para abrir el documento inicio.htm puedes hacer doble clic sobre l, en el panel Archivos. Puedes abrir el panel a travs del men Ventana, opcin Archivos. Escribe Inicio en el campo Ttulo de la barra de herramientas de documento. Apartado 6 En todos los documentos, hacer clic sobre el botn Guardar despus sobre el botn Cerrar . , y
Unidad 4. El texto
Caractersticas del texto Listas Caracteres especiales Estilos CSS. Introduccin Crear un estilo personalizado El Panel CSS Crear un nuevo estilo Gestionar estilos CSS Aplicar un estilo Hojas de Estilos