Está en la página 1de 71

I.E.P.

SAN IGNACIO LIMA NORTE

DREAMWEAVER
TEMARIO

COMPUTACIN 2SECUNDARIA

CLASE 1.

Introduccin Iniciar Dreamweaver Entorno de Trabajo La Ventana del Documento Vistas de Edicin Abrir un Documento Nuevo Guardar un Documento Recuperar un Documento Cerrar un Documento El Sitio Configurar un Sitio Nuevo Editar un Sitio Opciones Adminisitrar Sitios El Texto Formateando Textos El Panel de Propiedades Formatos en el Panel de Propiedades Las Listas Formato a las Listas

CLASE 2.

CLASE 3.

CLASE 4.

CLASE 5.

CLASE 6.

CLASE 7.

CLASE 8.

CLASE 9.

CLASE 10.

CLASE 11.

CLASE 12.

CLASE 13.

CLASE 14.

CLASE 15.

CLASE 16.

CLASE 17.

CLASE 18.

CLASE 19. Dar CLASE 20.

Listas Ordenadas El Formato para Listas Ordenadas Los Elementos de las Listas Listas de Definicin Las tablas Crear Tablas Filas y Columnas Panel de Propiedades de las Tablas

CLASE 21.

CLASE 22.

CLASE 23.

CLASE 24.

CLASE 25.

CLASE 26.

CLASE 27.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE


CLASE 28.

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Propiedades de las Tablas Las Plantillas Formatear tablas Formato de Plantillas Las Imgenes Panel Propiedades de Imagen Propiedades de Imagen Combinar Imgenes y Tablas Textos e Imgenes Los Comportamientos Los Enlaces Vnculos desde Imgenes Enlace internos Enlace externos
LECCIN 1 Introduccin

CLASE 29.

CLASE 30.

CLASE 31.

CLASE 32.

CLASE 33.

CLASE 34.

CLASE 35.

CLASE 36.

CLASE 37.

CLASE 38.

CLASE 39.

CLASE 40.

CLASE 41.

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 ot ros 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 pagi a personal de n 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 personale elegir una u otra de s 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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. Resumen multimedia de la leccin 2 ; 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?

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 tar ea 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Las cuales iremos descubriendo a lo largo del curso, segn los necesitemos, para no hacer demasiado ridos los primeros temas. Resumen multimedia de la leccin 3 ; 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. Enla 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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. Resumen multimedia de la leccin 4 ; 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 tan los errores de diseo como los de to 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 Pg ina 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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 ter inado de trabajar con ellos, m 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 uardar en. G

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.

Prof. Jos de la Rosa

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 c uando 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 tt lo del u 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.

Prof. Jos de la Rosa

10

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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

Prof. Jos de la Rosa

11

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Una vez que pulsemos aqu, el programa de dreamweaver se cerrar y nos mostrara el escritorio. Para recordar como abrir de nuevo el programa ver la leccin 2. 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.

Prof. Jos de la Rosa

12

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 F y RDS?. TP 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.

Prof. Jos de la Rosa

13

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 opcinNinguno.

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.

Prof. Jos de la Rosa

14

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 actualce i 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 mltip rutas lo que les nos evitan posteriormente muchos errores de vinculacin.

Prof. Jos de la Rosa

15

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 tenemo que ir modificando una a una s 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.

Prof. Jos de la Rosa

16

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

17

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 alformato 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 titul , escribiremos en la vista de diseo el texto o 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.

Prof. Jos de la Rosa

18

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 trab ajo.

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 Encab ezado1, para ello pulsamos h1.

Prof. Jos de la Rosa

19

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 icon B, resaltamos el o 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.

Prof. Jos de la Rosa

20

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER LECCIN 16 El Panel de Propiedades

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

21

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

22

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 nuestrapgina , 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 acostu mbrados, 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.

Prof. Jos de la Rosa

23

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 .

Prof. Jos de la Rosa

24

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 l ea en una entrada n de la lista y prepara la siguiente lnea como otro elemento de la lista.

Prof. Jos de la Rosa

25

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

26

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 .

Prof. Jos de la Rosa

27

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 de panel l propiedades, o en el icono ol de la barra texto, en el grupo de paneles insertar.

Prof. Jos de la Rosa

28

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

29

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 we b.

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.

Prof. Jos de la Rosa

30

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 capt rarlo u 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.

Prof. Jos de la Rosa

31

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

32

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

LECCIN 23 Las Listas de Definicin Ya hemos visto las listar ordenadas y las listas desordenadas. An no queda un ltimo tipo de listas, las listas s 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 bienpulsando en el icono dd

Prof. Jos de la Rosa

33

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 es lo veremos en el transcurso de las prximas o 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.

Prof. Jos de la Rosa

34

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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, nuest tabla tiene ahora 300 pxeles. Qu ra 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.

Prof. Jos de la Rosa

35

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

36

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Una de las potencias de crear pginas web con Dreamweave en la vista de diseo es que no hace falta saber r 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 au tomticamente redimensionadas de forma uniforme para adecuarse correctamente al nuevo tamao de la tabla.

Prof. Jos de la Rosa

37

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

38

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

39

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 a adido 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.

Prof. Jos de la Rosa

40

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

41

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER LECCIN 28 Propiedades de las Tablas

COMPUTACIN 2SECUNDARIA

En esta leccin continuaremos descubriendo el panel propiedades p ara 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.

Prof. Jos de la Rosa

42

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 m en 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.

Prof. Jos de la Rosa

43

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Para elegir una plantilla slo tenemos que pulsar sobre la opcin deseada, veremos un ejemplo del fo rmato 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 di eado s 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.

Prof. Jos de la Rosa

44

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 crearnuestra 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 quecada 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.

Prof. Jos de la Rosa

45

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 dis tribucin 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.

Prof. Jos de la Rosa

46

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 simpleme nte 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.

Prof. Jos de la Rosa

47

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 c osta 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.

Prof. Jos de la Rosa

48

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Resumen multimedia de la leccin 31 ; 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 a imagen que queramos insertar en l nuestra pgina, simplemente tenemos que seleccionarla y pulsar el botn aceptar de la ventana dilogo.

Prof. Jos de la Rosa

49

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 h emos 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.

Prof. Jos de la Rosa

50

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 sabe mos. 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.

Prof. Jos de la Rosa

51

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 alt velocidad. a 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 nsertar en i 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.

Prof. Jos de la Rosa

52

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

53

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

54

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 n mero 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.

Prof. Jos de la Rosa

55

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 izquierd a.

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.

Prof. Jos de la Rosa

56

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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, simpleme nte tenemos que elegir la imagen que deseemos situar en la celda, pincharemos sobre ella y arrastraremos el puntero del ratn hasta la celda destino.

Prof. Jos de la Rosa

57

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

En la celda central podemos aadir el texto que creamos necesario, por ejemplo una descripcin de la ima gen. 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 pr xima 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.

Prof. Jos de la Rosa

58

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 zon activa de la pgina. El a 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.

Prof. Jos de la Rosa

59

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 .

Prof. Jos de la Rosa

60

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

61

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 panele de la derecha de la ventana de Dreamweaver. s 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 pe staa 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.

Prof. Jos de la Rosa

62

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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

Prof. Jos de la Rosa

63

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

Una es carga previa de imgenes y la otra es restaurar imgenes onmouse out. 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, inclu la de ida 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 derestaurar 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.

Prof. Jos de la Rosa

64

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

65

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

66

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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, d ebemos 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 -

Prof. Jos de la Rosa

67

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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.

Prof. Jos de la Rosa

68

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 propieda des y pulsaremos sobre la opcin vnculo, esta vez no introduciremos ninguna pgina web.

Simplemente escribiremos el nombre del anclaje precedido por el signo #

Prof. Jos de la Rosa

69

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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

Prof. Jos de la Rosa

70

I.E.P. SAN IGNACIO LIMA NORTE

DREAMWEAVER

COMPUTACIN 2SECUNDARIA

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 e ste 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

Prof. Jos de la Rosa

71