LECCIÓN 1 Introducción El programa programa Dreamweaver de Macromedia es uno uno de los los prog progra rama mas s más más utilizados utilizados en todo el mundo para la creación de paginas WEB . Es empleado tanto por profesionales como por personas que se inician en la creación de su primera pagina web. De hecho hecho much muchos os lo consid consider eran an ampli ampliam amen ente te super superior ior a otro otros s progr programa amas s similares, similares, tales como FrontPage de Microsoft . Aquí no vamos a entrar en quien tiene o deja de tener razón. Lo que si vamos a hacer es tener una primera aproximación a la última versión de Dreamweaver : la versión 7 de Macromedia
Dreamweaver MX 2004.
Mostraremos de una forma fácil y didáctica 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 capacitado para afrontar la creación de una página Web. Muchos creen que como Dreamweaver es un programa usado por profesionales, tien tiene e que que ser ser muy muy comp compli lica cado do para para los los usua usuari rios os ocas ocasio iona nale les. s. Real Realme ment nte e Dreamweaver es un programa muy sencillo e intuitivo , que puede ser utilizado a muchos niveles. Desde el más básico suficiente para crear una pagina personal personal de un usuario novel, hasta gestionar todo un “ Site” empresarial con un contenido de cientos de paginas
En las próxima próximas s leccione lecciones s iremos iremos presenta presentando ndo de forma forma fácil fácil y didáctic didáctica, a, las distintas funcionalidades del programa. El alumno podrá seguir las lecciones tanto con el texto como con las lecciones multimedias que se muestran al final de cada cada lecci lección ón.. El objet objeto o de estas estas demo demost strac racion iones es multi multime medi dias as es reforzar el contenido didáctico de cada lección mostrando como se hace realmente en el programa.
LECCIÓN 2 Iniciar Dreamweaver El primer paso para utilizar un programa es iniciarlo. El program programa a Dreamweaver de Macromedia , al igua iguall que que casi casi todo todos s los los programas que se pueden ejecutar en un entorno Windows puede iniciarse por varios caminos distintos. Dependiendo tanto de la configuración que hayamos elegido durante su instalación, como de nuestras preferencias personales. En esta lección aprenderemos varias de ellas, luego dependerá de sus gustos personales elegir una u otra de ellas para iniciar la aplicación Dreamweaver. La forma más sencilla sencilla es pulsar pulsar con un doble doble click del ratón ratón sobre el icono icono de Dreamweaver situado en el escritorio
Otros lugares desde donde podemos iniciar el programa Dreamweaver es desde el botón de inicio, situado en el esquina inferior izquierda del escritorio.
Cuando pulsemos pulsemos sobre el se desplegara el menú icono de Macromedia Dreamweaver MX 2004
inicio. Y pulsaremos sobre el
Por último hay un lugar más desde donde podemos iniciar el programa: Sólo tenemos que pulsar en
Macromedia
Y finalmente en la opción de
Todos los programas. Y después en la carpeta
Macromedia Dreamweaver.
Y ya tendremos lista la aplicación para poder utilizarla.
LECCIÓN 3 Entorno de Trabajo El programa programa Dreamweaver es una aplicación muy completa con un gran numero de funciona funcionalida lidades des muy potente potentes, s, pero pero a la vez esta esta diseñada diseñada para hacer mas comodo el trabajo al usuario. Naturalmente Naturalmente tener una aplicación aplicación con un gran numero de funciones funciones implica un gran gran nume numero ro de boton botones, es, menús menús,, opcio opcione nes s y pulsa pulsarr cient cientos os de click clicks, s, que que a prim primer era a vist vista a pued puede e resu result ltar ar muy muy compl omplic icad ados os ¿Ent ¿Enton once ces s cómo cómo pued puede e Dreamweaver combinar a la vez potencia y comodidad? Esto lo hace permitiendo que el usuario personalice a su gusto el entorno de trabajo. trabajo. En esta esta lección lección vamos vamos a familiar familiarizar izarnos nos con las principales principales áreas de trabajo de Dreamweaver. En la imagen inferior vemos señalada señalada la barra de titulo , en ella además de ver el nombre nombre de la aplicac aplicación, ión, el titulo titulo de la pagina pagina que tengamos tengamos activa, activa, también también veremos los iconos de gestión de ventanas típicos de Windows
Debajo de la barra de titulo tenemos la barra de Menús , en ella tenemos acceso a todo todos s los los menú menús, s, desd desde e los los cual cuales es pode podemo mos s mane maneja jarr con con efic eficie ienc ncia ia las las numerosas opciones de Dreamweaver
Debajo de la barra de Menús, nos encontramos la barra de los grupos de paneles, la cual es contextual, esto significa que va cambiando dinámicamente según la tarea en la que estemos trabajando. Mas en adelante la veremos funcionando en detalle. En el cent centro ro de la panta pantalla lla nos nos enco encontr ntramo amos s con con la pant pantall alla a de inici inicio. o. Este Este conteni contenido do aparece aparece cuando cuando no tenemos tenemos ningun docume documento nto activo activo y podemo podemos s distinguir tres zonas distintas
En la zona zona de la izqu izquie ierd rda: a: vemo vemos s la list lista a de los los docu docume ment ntos os usad usados os mas mas recie reciente nteme mente nte y nos nos da la opció opción n de abrir abrir cualq cualquie uiera ra de ellos ellos rápid rápidam ament ente e 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 rápida y sencilla. En la izquierda y en la zona inferior de la ventana de dreamweaver dreamweaver tenemos otros paneles con funciones avanzadas
Las cuales iremos descubriendo a lo largo del curso, según los necesitemos, para no hacer demasiado áridos los primeros temas.
LECCIÓN 4 Ventana del Documento En esta lección y la siguiente vamos a seguir descubriendo las distintas zonas de trabajo de la aplicación Dreamweaver de Macromedia. En esta esta lecció lección n nos nos centr centram amos os en los los icono iconos s que que están están relac relacion ionado ados s con con la ventana del documento. En la ventana del documento es donde visualizaremos y editaremos la página web en la que trabajemos. Aquí tenemos abierto un documento llamado “Untitled-1”
barra del titulo del documento tiene los En la imagen superior vemos que la barra típicos controles de minimización, maximización y cerrar ventana. Esto es útil en el caso de que tengamos abiertos simultáneamente 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 muy útil útiles es.. Con Con el de la dere derech cha a Dreamweaver nos nos indi indica ca el tama tamaño ño del del docum documen ento to en KiloB KiloByt ytes es y el tiemp tiempo o que que un nave navegad gador or están estánda darr tardar tardaría ía en visualizar completamente la página con una conexión telefónica a Internet. A su izquierda Dreamweaver nos indica las dimensiones en pixels de la página que estamos creando.
Podemos elegir entre una lista de tamaños predeterminados. El tamaño optimo depende de las dimensiones del monitor o pantalla en que se visualice la página. Dado que por ahora la mayoría de los usuarios de Internet tienen monitores de 800x600 píxeles . Si diseñamos diseñamos una página con un tamaño superior provocamos que las personas que nos visiten visualicen incorrectamente nuestras páginas. Debemos tener muy presente que el objetivo de nuestra página es que sea vista por el mayor numero posible de personas, por lo que no debemos poner trabas innecesarias a nuestros visitantes.
LECCIÓN 5 ª Vistas de Edición En la barra de documentos en la esquina superior derecha vemos tres botones que modifican la vista de trabajo del documento: “Codigo”, “Dividir” y “Diseño”:
Son las tres formas que su edición.
Dreamweaver nos permite visualizar el documento para
En la vista “ Código ” Dreamweaver nos muestra el código HTML de la página y nos permite editar directamente las instrucciones con las que el navegador del usuario mostrará la página.
Mas adelante veremos que significa esto exactamente. En la vista “ Diseño ” Dreamweaver nos muestra la página tal como se visualizará en el nave navegad gador or del del usuar usuario, io, pode podemo mos s edita editarla rla sin nece necesid sidad ad de cono conocer cer el lenguaje HTML. Por último, la vista “ Dividir ”, nos muestra simultáneamente el código y la vista de diseño, de esta manera podemos escribir instrucciones en lenguaje HTML en la pági página na e inst instan antá táne neam amen ente te comp compro roba bare remo mos s como como se visu visual aliz izar aría ía en un navegador. De toda maneras maneras si queremo queremos s ver en pantall pantalla a complet completa a como como se visualiz visualizaría aría la página podemos pulsar en el icono de previsualización
Y Dreamweaver abrirá una ventana del navegador que tengamos asociado por defecto defecto y nos mostrara mostrara la pagina pagina complet completa. a. En la ventana ventana de previsu previsualiz alizació ación n podemos detectar tanto los errores de diseño como los de código, y directamente corregir corregirlos los en la aplicac aplicación ión de Dreamweaver sin sin tener tener que graba grabarr y abrir abrir el documento con cada prueba
LECCIÓN 6 ª Abrir un Documento Nuevo
Ya hemos visto las principales zonas de trabajo de Dreamweaver. Ahora, en las próxima próximas s leccione lecciones s vamos vamos a aprende aprenderr las operaciones operaciones básicas básicas de manejo manejo de docu docume ment ntos os tale tales s como como crea crearr un nuev nuevo o docu docume ment nto, o, grab grabar arlo lo para para pode poder r recuperarlo en el futuro, abrir documentos almacenados... El primer paso es abrir un documento nuevo. En la Lección 3 de este curso de dreamwaever aprendimos una forma de crear documentos nuevos.
crear nuevos documentos . Para ello debemos ir a la barra de menús . Y pulsar en el menú Archivo Ahora vamos a ver otra forma de
En el menú que se desplegara, buscaremos la opción ella con el botón izquierdo del ratón
Nuevo y pincharemos en
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 pestaña General y en el panel de la izquierda llamado categoría elegiremos “Página básica”. El panel de adyacente cambiara de manera contextual dependiendo que opción hayamos elegido en el panel de categorías. Como por ahora hemos elegido página básica. básica. Este será el titulo del panel y entre las distintas opciones pulsaremos sobre HTML.
Vemos que hay una gran variedad de documentos que podemos crear desde aquí. Más adelante veremos algunos de ellos, a medida que los necesitemos.
LECCIÓN 7 ª Guardar un Documento Una vez que hemos aprendido a crear documentos nuevos, cuando hayamos terminado de trabajar con ellos, necesitaremos aprender a guardarlos para poder recuperarlos en el futuro. Para ello desplegaremos de nuevo el menú archivo y buscaremos esta vez la opción guardar.
Al pulsar sobre la opción guardar se nos abrirá una ventana titulada “Guardar como”. En ella vemos varias zonas importantes. En la zona superior podemos elegir la carpeta donde queramos guardarlo, es donde pone “Guardar en”.
Y en la zona inferior introduciremos el nombre con el que deseamos conservar el documento. Para finalizar sólo tenemos que pulsar el botón guardar en la ventana activa.
En esta lección hemos aprendido otra manera de crear documentos nuevos con dreamweaver y también hemos aprendido a guardarlos.
LECCIÓN 8 ª Recuperar un Documento En la lecc lecció ión n ante anteri rior or apre aprend ndim imos os a guar guarda darr docu docume ment ntos os cre creados ados con dreamweaver. En esta lección aprenderemos a recuperarlos para poder trabajar con ellos. El primer paso es ir al menú archivo, pulsaremos sobre el con el botón izquierdo del ratón. Y en el menú que se desplegará buscaremos la opción abrir.
Una vez que hayamos pulsado sobre la opción abrir del menú archivo. Aparecerá una ventana de dialogo como la que vemos en la ventana inferior. Es un cuadro de dialogo muy semejante al que ya conocimos cuando guardamos el documento En la zona superior podemos navegar por las distintas carpetas hasta encontrar el lugar donde tenemos almacenado el documento.
Cuando hayamos encontrado la carpeta solo tendremos que elegir de entre la lista mostrada el titulo del documento que deseemos abrir y pulsaremos sobre el con el botón izquierdo del ratón.
LECCIÓN 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 acab acabad ado o de trab trabaj ajar ar con con el docu docume ment nto o en cues cuesti tión ón,, bien bien porq porque ue ya no lo nece necesi site temo mos s mas, mas, o por por que teng tengam amos os mucho uchos s docu docume ment ntos os abie abiert rtos os 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 opción cerrar. Tal como vemos en la imagen inferior
Y ahora, en el caso de que hayamos modificado el documento, vemos que nos aparece un cuadro de dialogo 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, documento, si queremos queremos guardar los cambios en el documento en el que hemos estado trabajando. Si pulsamo pulsamos s no, todos los cambios cambios realizados realizados desde la ultima ultima grabació grabación n serán serán desca descarta rtado dos. s. Esto Esto es util en el caso caso de que no nos gust guste e nues nuestra tra pagin pagina a y prefi prefira ramos mos una versió versión n anter anterior ior de ella, ella, esto esto es algo algo que que suel suele e pasa pasarr mas mas a menudo de lo que nos gusta reconocer. O bien, si pulsamos sí. Se guardaran los cambios realizados sobre el documento. Pero, atención, es posible que hayamos cometido un error y hayamos pulsado el botón si, de manera mecánica. Dreamweaver Dreamweaver nos da una ultima oportunidad para meditarlo y nos muestra otra ventana de dialogo como la inferior.
Por ultimo, ultimo, una vez que hayamos hayamos guardado, guardado, o no, los cambios cambios sobre la pagina pagina solo nos queda salir del programa. Y para ello volveremos al menú archivo. Buscaremos en el final del menú y pulsaremos sobre la opción “Salir”
Una Una vez vez que pulsem pulsemos os aquí, aquí, el progr programa ama de drea dreamw mweav eaver er se cerra cerrara ra y nos nos mostrara el escritorio. Para recordar como abrir de nuevo el programa ver la lección 2.
LECCIÓN 10ª El Sitio Introducción a la configuración 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. También hemos aprendido las funciones más básicas, básicas, tales tales como como crear crear una página página nueva, guardarla, guardarla, cerrarla cerrarla y como como recuperarla. Pero no debemos olvidar una cosa, hasta ahora sólo hemos creado una página web en blanco. Pero las “páginas de verdad” tienen contenido y este contenido puede formarse con diversos documentos que puede ser desde otras páginas html, imágenes, scripts, animaciones, animaciones, hasta cualquier cualquier tipo de objeto que podamos vincular en una página html. El conjunto de todos estos documentos que forman parte de la página se llama en el lenguaje de las páginas web un “Sitio”, “site” en ingles. En esta esta lecció lección, n, y las las sigu siguien ientes tes,, vamo vamos s a apren aprende derr a diseñ diseñar ar un Sitio Sitio para para albergar nuestras páginas y sus elementos, de una forma sencilla y didáctica. Ahora que sabemos lo que es un Sitio vamos a configurarlo paso a paso. Todas las opciones de configuración están en el menú Sitio de la barra de menús.
Pulsando sobre el menú Sitio, se despliega el menú. Para configurarlo por primera vez pulsaremos en la opción Administrar sitios
Drea Dreamwe mweave averr abrirá abrirá una venta ventana na de dialo dialogo go con con todas todas las las opcio opcione nes s para para administrar el sitio. Como aun no tenemos creado ninguno, pulsaremos en el botón Nuevo.
Y Dreamweaver nos preguntará que es lo que queremos crear exactamente ¿un Sitio o un Servidor FTP y RDS?. Por ahora sólo vamos a crear un Sitio
LECCIÓN 11ª Configurar un Sitio Nuevo
En la lección anterior comenzamos a configurar un Sitio nuevo, ahora vamos a continuar Acabamos la lección anterior confirmando en la ventana de dialogo que queríamos crear un nuevo Sitio. Pulsaremos sobre la opción sitio
Veremos que se abre otra ventana de dialogo, ahora iremos contestando a las pregunta preguntas s que nos va haciend haciendo o Dreamw Dreamweave eaverr y pulsare pulsaremos mos el botón botón siguien siguiente te después de rellenar cada ventana con las respuestas que nos pide.
La primera cuestión que Dreamweaver Dreamweaver nos plantea es el nombre del sitio. Es muy util que el nombre tenga una fuerte relación con el contenido de la página para poder recordarlo fácilmente
La resp respues uesta ta a la sigui siguient ente e pregu pregunta nta depe depend nderá erá de la tecno tecnolo logía gía con con la que que dese deseem emos os trab trabaj ajar ar.. Ya diji dijimo mos s ante antes s que que una una pági página na web web pued puede e enla enlaza zar r docum documen entos tos de muy difer diferen entes tes tipos tipos,, algun algunos os de ellos ellos son utiliz utilizad ados os para para inte interc rcam ambi biar ar info inform rmac ació ión n con con el serv servid idor or.. En esta esta opci opción ón eleg elegim imos os el tipo tipo docu docume ment nto o depe depend ndie iend ndo o de las las cara caract cter erís ísti tica cas s del del serv servid idor or con con el que que trabajaremos. Para este curso no vamos a utilizar las tecnologías de servidor, asi que elegiremos la opción “No”
La cuestión de abajo se interesa en la forma en como subiremos las páginas que creemos al sitio de Internet. Por ahora no vamos a preocuparnos de esto y por lo tanto elegiremos la opción Ninguno.
Y con esto hemos acabado acabado de proporci proporcionar onarle le a Dreamwe Dreamweaver aver la informac información ión necesaria para configurar nuestro sitio.
LECCIÓN 12ª Editar un Sitio En las lecciones anteriores ayudamos a Dreamweaver a configurar nuestro sitio. En esta lección vamos a personalizar un poco más nuestro sitio para adecuarlo a nuestras necesidades de trabajo. Para ello volvemos a la ventana de dialogo “Administrar sitios”
Y esa vez, como ya tenemos creado el sitio “CursoDreamweaver ” pulsaremos el botón Editar.
Y en la ventana de dialogo. Pulsaremos Pulsaremos en la pestaña “Avanzadas”. “Avanzadas”. Y en el menú “categoría” pulsaremos la opción “Datos locales”
En la sección “Datos locales” podemos cambiar y ajustar los valores del sitio, tales como como “Nom “Nombre bre del del sitio sitio”, ”, que que ya conoc conocem emos os.. Y la “Carp “Carpeta eta raíz raíz local” local”,, esto esto significa que podemos designar manualmente la carpeta donde deseemos situar las páginas que creemos y los documentos vinculados a ella. Con Con la opci opción ón “Act “Actua uali liza zarr lisa lisa arch archiv ivos os”” nos aseg asegur uram amos os que que cuan cuando do modifiq modifiquem uemos os un archivo archivo se actuali actualice ce automát automáticam icamente ente las carpeta carpetas s locales locales durante las copias. Por último con la opción opción “carpeta “carpeta predeterm predeterminad inada a de imágen imágenes” es” le diremos diremos a Dreamwe Dreamweaver aver donde situare situaremos mos agrupad agrupadas as todas todas las imágene imágenes s con las que traba trabajem jemos os,, esto esto es muy útil para para no tener tener múlti múltipl ples es rutas rutas lo que que nos nos evitan evitan posteriormente muchos errores de vinculación.
Por último, en las opciones de la imagen inferior, configuramos la dirección http de nuestro sitio, con lo que Dreamweaver detecta detecta y distingue distingue automáticamente automáticamente las direcciones www de páginas internas a nuestro sitio, con lo que se ahorran tiempo al navegar. Con la opción caché, Dreamweaver , actualiza y gestiona todos los cambios de las páginas y sus enlaces interiores interiores automáticamente, automáticamente, por ejemplo si cambiamos una imagen no tenemos que ir modificando una a una todas las páginas.
LECCIÓN 13ª Opciones Adminisitrar Sitios Ya hemos aprendido a configurar el sitio, ahora veremos rápidamente el resto de las opciones de la ventana de dialogo “Administrar sitios”. Que nos ayudaran a gestionar más fácilmente nuestro sitio.
Las opciones nuevo y editar, ya las conocemos, por lo que no nos reiteramos más en el tema.
Las siguientes opciones son Duplicar, Quitar y Exportar. Con duplicar conseguimos crear un duplicado del sitio que tenemos activo, con ello logramos duplicar totalmente la estructura del sitio. Es muy útil para crear duplicados perfectos del sitio en otros servidores, sobre todo si tenemos utilizarlo como plantilla de la estructura. Cuan Cuando do tenga tengamo mos s un nume numero ro impor importan tante te de sitios sitios,, algun algunos os de ellos ellos estará estarán n obsol obsoleto etos s o simp simplem lement ente e no los los neces necesita itarem remos os más, más, pode podemo mos s elimi elimina narlo rlos s pulsando el botón Quitar. La opción Exportar nos permite guardar las características del sitio en un archivo XML, de forma que con un sólo archivo podemos guardar, recuperar, e incluso compartir con otras personas las características del sitio fácilmente
Las últimas opciones son Importar, Ayuda y Listo. Importar es la opción complementaria de Exportar, con ella podemos crear un nuevo sitio a partir de las características de otros sitio exportado.
La opción ayuda, se explica en si misma.
Cuando hayamos terminado de administrar el sito, simplemente pulsaremos el botón "Listo" y todos nuestros cambios serán actualizados.
LECCIÓN 14ª El Texto En esta lección y las próximas crearemos, de verdad, nuestra primera página web. Al principio será sólo una página con texto e iremos descubriendo las distintas funcionalidades de Dreamweaver , respecto al formato de los textos. Para comenzar, necesitamos crear una página nueva y darle un buen titulo. Como ya hemos hemos visto visto esto esto en lecciones lecciones anterior anteriores es iremos iremos directo directo al grano. grano. Pero en la animación de abajo podemos ver todos los pasos desde cero. Una vez que hayamos creado la página y le hayamos dado el titulo, escribiremos en la vista de diseño el texto normalmente, ya nos preocuparemos después por los formatos.
Una vez que hemos escrito el texto de nuestra primera página , 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 acción que vayamos a realizar. En común tenemos las opciones más habituales, sin embargo las demás están especializadas en algún tipo determinado de acción.
Por ejemplo nosotros vamos a trabajar con el texto, por lo que pulsaremos en la opción texto. En el caso de que queramos tener acceso a todos los paneles de forma rápida pulsaremos la opción “Mostrar como fichas”
LECCIÓN 15ª Formateando Textos En la lección anterior aprendimos que escribir en nuestra página web era tan fácil como simplemente teclear en la vista de diseño. En esta lección y las siguientes veremos que en Dreamweaver además de añadir texto fácilmente, podemos darle formato y aplicarle un gran numero de efectos que ayudaran a realzar nuestra página web.
Acabamos la lección anterior activando la opcion Texto en la barra de los grupos de paneles insertar. En la imagen inferior vemos como aparece la ventana de trabajo.
Darle formato a un texto es tan sencillo como seleccionar la zona que deseamos y buscar en los iconos de la pestaña texto, el efecto que deseemos aplicarle. En este este caso caso,, al prim primer er párr párraf afo o de nues nuestr tro o docu docume ment nto o vamo vamos s a darl darle e una una apariencia de Encabezado1, para ello pulsamos h1.
Al segundo párrafo le daremos un formato de Encabezado2, pulsando h2
Y al tercer párrafo le daremos formato de Encabezado 3.
En la barra barra texto, texto, vemo vemos s otros otros iconos iconos con con distin distintos tos form format atos. os. Por Por ejem ejemplo plo,, pulsando el icono B, resaltamos el texto seleccionado, con I, le damos al texto selec seleccio cionad nado o énfa énfasis sis un forma formato to inclin inclinado ado como como el de la letra letra italic italica a 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 iguales a “B” e “I”, aunque puede que cada navegador navegador le de una pequeña variación al aspecto de uno u otro.
LECCIÓN 16ª El Panel de Propiedades Ya hemos tenido un primer acercamiento a la barra texto del grupo de paneles insertar. Ahora Ahora vamos vamos a ver como como puede puede el panel panel “propied “propiedades ades”” ayudarnos ayudarnos a mejorar mejorar el aspecto de nuestro textos En la imagen inferior tenemos una vista general del panel.
Desde Desde el panel panel propied propiedade ades s podemos podemos,, tras selecciona seleccionarr una línea línea o párrafo, párrafo, aplicarle por ejemplo un formato “centrado”, “centrado”, simplemente pulsando en el icono de la imagen
Pode Podemos mos comb combin inar ar en una una mism misma a págin página a vario varios s tipos tipos de aline alineam amien iento, to, por por ejemplo podemos darle al segundo párrafo un alineamiento ajustado y mantener al mismo tiempo el centrado del primer párrafo.
Vamos a probar, ahora, el alineamiento derecho en el tercer párrafo.
Por último, podemos aplicarle a todo un párrafo una sangría. Tal como vemos en la imagen inferior
LECCIÓN 17ª Formatos en el Panel de Propiedades En la zona izquierda del panel de propiedades, tenemos unas opciones que aun no conocemos y que vamos a ver en esta lección. Estas son las propiedades, “Formato”, “Fuente”, “Estilo”, “Tamaño”, “Color”
Vamos a verla poco a poco. La primera opción “Formato” nos permite cambiar el formato del párrafo, por defecto los párrafos no tienen formato, pero podemos elegir uno de la lista.
Según el que elijamos nuestro párrafo tendrá una apariencia u otra. En la lección anterior vimos los formatos de encabezado 1 a 3, aquí tenemos más opciones para aplicar.
En la opción fuente podemos predeterminar que juego de fuente será visible por el usuario, esta opción es muy útil, en el caso de que el usuario no tenga instalada la fuente elegida por nosotros para nuestra página , podemos podemos establecer con esta instrucción un juego de fuentes suplentes.
La opción estilo hace referencia a una funcionalidad avanzadas de un formato de páginas 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 opción tamaño, tamaño, elegimos el tamaño de la fuente, si estamos estamos acostumbrados acostumbrados a usar procesadores de textos. podemos sorprendernos que a parte del tamaño por por punt punto, o, al que que pode podemo mos s esta estarr acos acostu tumb mbra rado dos, s, vemo vemos s tamb tambié ién n tama tamaño ño “pequeño” o “mayor”, por ejemplo. Esto se explica porque los navegadores permiten al usuario elegir el tamaño de visualización de la letra, y si el usuario cambia el tamaño, puede perderse el efecto deseado. Con los tamaños “relativos”, podemos conservar el efecto visual del texto aunque el usuario cambie estos valores en su navegador
Por último podemos utilizar colores para dar más vistosidad a nuestros textos, sólo tenemos que marcar el texto que queramos colorear y elegir un color de la tabla
Más adelante veremos como podemos sacarle más partido al color en nuestras páginas web.
LECCIÓN 18ª Las Listas Cuando estamos creamos una página web nos encontraremos, muchas veces, con que deseamos dar a nuestros un textos un aspecto más ordenado. En un editor de textos utilizaríamos las listas. Dreamweaver también nos permite crear listas para hacer más atractivos nuestras páginas. 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 botón “Común”
Dream00051 Y en el panel que se despliega seleccionáremos la opción Texto.
Ya hemos hemos visto visto anterio anteriormen rmente te algunas algunas de las funciona funcionalida lidades des del panel panel texto, texto, ahora vamos a continuar explorándolo con las funciones de listas. Pulsaremos Pulsaremos el botón “ul”. Con este botón activamos la opción “Listas simples o no ordenadas”
¿Qué es una lista simple? La mejor de forma de verlo es a través un ejemplo. Si seleccionamos la lista simple, la línea donde tengamos activo el cursor de texto será el comienz comienzo o de una lista. Cuando Cuando pulsem pulsemos os la tecla tecla enter, enter, Dreamwe Dreamweaver aver convertirá el texto introducido en esa línea en una entrada de la lista y prepara la siguiente línea como otro elemento de la lista.
Para terminar de introducir elementos en la lista sólo tenemos que pulsar la tecla enter dos veces seguidas y ya podremos continuar escribiendo normalmente
LECCIÓN 19 ª Dar Formato a las Listas En esta lección lección y la próxima próxima vamos vamos a ver como aplicar aplicar formato formato también también 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. Atención, Atención, en lecciones lecciones anteriores vimos que podíamos podíamos aplicarle formato a todo un párrafo simplemente situando el cursor en cualquier punto del párrafo. Pero si queremos queremos aplicar formato a las listas deberemos deberemos marcar toda la lista, y no sólo un elemento.
Esto es debido a que Dreamweaver nos permite aplicar formatos formatos diferenciados diferenciados a cada elemento de la lista, en el ejemplo de la imagen inferior vemos como hemos resaltado sólo 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 “Itálica”
resaltado con el efecto
En próximas lecciones continuaremos explorando los efectos que podemos aplicar a las listas.
LECCIÓN 20ª Las Listas Ordenadas Vamos a dejar por un momento los formatos de las listas y en esta lección 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 alfabéticamente o por cualquier otro criterio. Una lista ordenada se diferencia de las demás, porque a cada elemento antecede un número en orden creciente.
En Dreamweaver podemos crear una lista ordenada, tanto pulsando en el icono de “lista ordenada” del panel propiedades, o en el icono “ol” de la barra texto, en el grupo de paneles insertar
El funcionamiento para añadir elementos de las listas o cerrar la lista es idéntico al que hemos visto en la lección de las listas desordenadas. También podemos añadir elementos a una lista pulsando en el icono como vemos en la imagen inferior
“li” , tal
Finalmente este es el aspecto de nuestra lista ordenada.
En esta lección hemos visto que son y como crear listas ordenadas. En la lección próxima continuaremos aplicando formatos a las listas.
LECCIÓN 21ª El Formato para Listas Ordenadas En esta lección vamos a continuar descubriendo los formatos que podemos aplicar a las listas. Seguimos Seguimos investigando las opciones disponibles en el panel de propiedades, esta vez en la zona de la derecha. Empezaremos con la opción formato, si pulsamos sobre la pestaña, vemos que se despl desplieg iega a un menú menú con con gran gran núme número ro de opcio opcione nes, s, algun algunas as de ellas 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 más opciones. Pulsando en cada una de ellas aplicamos al párrafo un formato de tamaño y estilo distinto.
Hablando de Estilo, a la derecha de la opción formato, nos encontramos con la opción estilo. Esta opción es algo engañosa, ya que con estilo no se refiere al texto, sino al estilo de la página web. Esta opción es muy útil en el caso de que estemos utilizando tecnologías 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 páginas webs. Algunos de ellos son el lenguaje Html, el lenguaje Xml, o el CSS, entre otros muchos.
El objetiv objetivo o de este curso curso es aprender aprender el uso de la aplicaci aplicación ón Dreamwe Dreamweave averr de Macromedia, por lo que de los distintos tipos de lenguajes sólo tenemos que saber
lo necesario para convencernos de que Dreamweaver nos permite hacer casi de todo sin tener que programar una sola línea en ningún lenguaje web.
Siguiendo con los formatos, tenemos la opción “Fuente”. Esta opción también puede confundirnos. confundirnos. No se refiere a la fuente que vamos a aplicar directamente 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 además de los tamaños numéricos, al que debemos estar acostumbrados, acostumbrados, también nos encontramos encontramos con otros tamaños “pre-establecidos” Small o médium o large (pequeño, mediano, grande).
Estos tamaños tienen su razón de ser en los navegadores permiten a los usuarios cambiar, con sólo un clic, el tamaño de visualización de los textos. Con estas opciones podemos tener un control mayor sobre la forma en que nuestros textos se mostraran con independencia del tamaño que haya elegido el usuario para visualizarlos
Por último, podemos también realzar nuestras listas modificando el color del texto, ya sea de un único elemento de la lista, o de toda ella. En el panel de color, podemos elegir una gran variedad de modos de asignar color, podemos pulsar uno predefinido de la tabla mostrada, o podemos situar la pipeta sobre cualquier color de la pantalla y “capturarlo” para nuestra lista.
También podemos elegir las opciones de colores avanzadas, aunque es posible que dependiendo del navegador del usuario y las características de su tarjeta grafica los colores no se muestren exactamente como nosotros deseamos.
LECCIÓN 22ª Los Elementos de las Listas Ya hemos visto como crear listas ordenadas y listas desordenadas. En esta lección vamos a profundizar en el motivo de su existencia, los elementos de las listas. Para ello pulsaremos en el botón “elemento de la lista”, que está en el panel de propiedades.
Dreamweaver, nos mostrará una ventana de diálogo llamada “propiedades de lista”. En la primera opción, tenemos “Tipos de lista”, con esta opción podemos elegir como mostraremos mostraremos la lista. Podemos, entre otros modelos, crear listas numéricas, numéricas, o listas en las que cada elemento sea mostrado precedido por un punto...
También podemos, pulsando en la opción estilo, elegir el estilo numérico para nuestra lista. Por ejemplo, podemos querer mostrar una lista numérica normal, o quizá quizás s quera queramo mos s que que nuest nuestros ros eleme elemento ntos s sean sean mostr mostrado ados s con con una una lista lista de número romanos, o puede que queramos una lista alfabética...
Dreamweaver nos permite también elegir el número con que comenzará nuestra lista. Podemos no querer comenzar por el uno, o quizás deseemos continuar la numeración de una lista anterior
Por último podemos cambiar el estilo de algún elemento concreto de la lista, simplemente pulsando en la opción “elemento de la lista”, y configurarlo según nuestras necesidades
LECCIÓN 23ª Las Listas de Definición Ya hemos visto las listar ordenadas y las listas desordenadas. Aun nos queda un último tipo de listas, las listas de definición.
¿Qué son las listas de definición?. Fácil. 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 definición, debajo de cada elemento (Dreamweaver y Explorer) tenemos otro elemento en una línea con sangría que define el elemento anterior. Estoes una lista de definición.
Activar una lista de definición es muy sencillo, simplemente tenemos que situar el cursor en el punto donde queramos insertarla y pulsar en el botón “dl” de la barra texto, del panel insertar.
Para crear un elemento nuevo, podemos hacerlo como ya hemos visto en las listas anteriores, o bien pulsando en el icono “dd”
Vamos a explicar un poco más detalladamente cual es la función de cada icono.
“Dl” significa declaración de la lista, es el icono que pulsamos para crear una lista de definición nueva. El icono “dt”, significa “término de definición”, es la palabra que pretendemos definir. En el ejemplo, es “Dreamweaver” y “Explorer”.
El botón “dd” es la definición del término, es la definición de cada uno de los términos.
Con esta lección hemos acabado de tratar el tema de las listas en Dreamweaver, no lo he dicho dicho explícita explícitamen mente, te, pero pero todo todo lo mostrad mostrado o en leccione lecciones s anterio anteriores res respecto a los formatos de listas es también aplicable a las listas de definición.
LECCIÓN 24ª Las Tablas
En esta lección y las siguientes vamos a ver el uso que Dreamweaver le da a las tablas. Este no es un tema sin insignificante. insignificante. Las tablas tienen muchísima importancia importancia en lo que se refiere al diseño de páginas web. Es el esqueleto sobre el que las páginas se construyen. Pero eso lo veremos en el transcurso de las próximas lecciones. En esta lección vamos a ir paso a paso y crearemos una tabla normal como las que podemos crear en cualquier procesador de textos. Podemos Podemos crear una tabla tabla fácilme fácilmente, nte, pulsando pulsando en el icono icono Tabla, abla, de la barra barra común, del panel insertar, tal como vemos en la imagen inferior.
Dream00055 Cuando Cuando pulsam pulsamos os sobre sobre el icono, icono, Dreamwe Dreamweaver aver abre una ventana ventana de diálogo diálogo como la que vemos abajo. En ella nos pide que definamos la forma y características de la tabla que estamos estamos creando
Simplemente tenemos que introducir un valor en la celda filas y otro en la celda columnas para definir el tamaño de la tabla, por ejemplo si introducimos 4 y 3 respectivamente, nuestra tabla tendrá 12 celdas, distribuidas en un rectángulo 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 rectángulo de 4 celdas de alto por 5 de ancho. Desde aquí podemos cambiar también el ancho de la tabla, nuestra tabla tiene ahora ahora 300 píxeles. píxeles. ¿Qué ¿Qué signifi significa ca esto? esto? Pues Pues los píxeles son una unidad de medida de las pantallas de televisión y monitores, un píxel es el punto más minúsculo que luz que una pantalla puede manejar. Esto está en relación directa con la configuración de pantalla de nuestro monitor, por ejemplo ejemplo si tenemo tenemos s una resolución resolución 800x600, 800x600, este es el limite limite máximo máximo de tamaño que puede mostrar. En las las prim primer eras as lecc leccio ione nes s vimo vimos s que que Drea Dreamw mwea eave verr nos nos acon aconse seja jaba ba que que configu configurára ráramos mos los paráme parámetros tros de nuestra nuestra página página según según las necesid necesidades ades de nuestro nuestros s potencia potenciales les usuario usuarios. s. Estos Estos paráme parámetros tros van a marcar marcar el limite limite de la cantidad máximas de píxeles que nuestra página podrá mostrar de una forma cómoda.
En la imagen superior vemos que Dreamweaver nos permite crear con un sólo clic diferentes tipos de encabezados. Esto es una forma muy sencilla de dar una apariencia más estética a nuestras tablas. En la parte parte final final del cuadro de diálogo, diálogo, podemos podemos mejorar mejorar la accesib accesibilida ilidad d de nuestra tabla, esto significa que podemos escribir un texto que se visualizara en el caso de que la tabla no haya podido ser mostrada en el navegador navegador del usuario, ya sea por problema de la red o por carencias del navegado.
Ya que que este este texto texto se mostra mostrara ra como como susti sustitut tuto o de la tabla tabla,, es impor importan tante te que que cuidemos el aspecto estético de la página cuando esto ocurra. En alinear texto, podemos elegir la posición en que se mostrara el texto
LECCIÓN 25ª Crear Tablas En esta lección continuaremos aprendiendo a crear nuestra tabla. En la lección anterior habíamos creado una tabla de 5 columnas, por 4 filas y de un tamaño de 300 píxeles, y con un texto descriptivo llamado “Ejemplo tabla”. En la image imagen n inferi inferior or vemo vemos s como como Drea Dreamwe mweav aver er nos nos mues muestra tra todos todos estos estos elementos en la vista de diseño para que podamos trabajar con ellos. Esto es tal como lo vemos nosotros mientras trabajos con ello, cuando el usuario visualice la página sólo verá la tabla y su contenido, no todas estas ayudas.
Dream00060 Una Una de las potenc potencias ias de crear crear pági páginas nas web con con Drea Dreamwe mweav aver er en la vista vista de diseño es que no hace falta saber nada acerca de programación para manejar toda su potencia. Por ejemplo, ejemplo, si queremos queremos redimen redimension sionar ar la tabla, tabla, tradicio tradicionalm nalmente ente,, tendríam tendríamos os que haber ido al código de la página y haber tenido que teclear las nuevas dimensiones con cuidado de no descuadrar toda la página. Sin embargo con Dreamweaver, sólo tenemos que pinchar con el ratón sobre un lateral de la tabla y arrastrarla hasta la nueva posición.
Dream00061 Todas odas las las celd celdas as y las las medid edidas as de la tabl tabla a queda uedan n auto automá máti tica cam mente ente redimen redimension sionada adas s de forma forma uniforme uniforme para adecuar adecuarse se correcta correctamen mente te al nuevo nuevo tamaño de la tabla
Dream00062 Una vez que tenemos las medidas que deseamos para nuestra tabla sólo tenemos que introducir el texto dentro de cada celda. En nuestro ejemplo vamos a crear una especie de planning.
Dream00063 Para introducir el texto en cada celda sólo tenemos que pulsar con el ratón en el interior de cada celda y escribir el texto. Para validarlo podemos, o pulsar en otra celda, o pulsar la tecla enter.
Dream00064 Así hemos creado nuestra primera tabla. En la próxima lección aprenderemos más cosas sobre ella, en especial las posibilidades de formato que Dreamweaver nos proporciona
LECCIÓN 26ª Filas y Columnas En la lección anterior, creamos nuestra primera tabla, ahora vamos a ver como Dreamweaver nos facilita el trabajar con ellas. Empezaremos pulsando con el botón derecho del ratón sobre cualquier celda activa de la tabla. Vemos como nos aparece el siguiente menú, y pulsaremos la opción 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 añade una fila a la tabla, así podemos convertir fácilmente una tabla de 5 días en una de seis, con sólo un clic
En la imagen inferior vemos como a nuestra tabla le ha “crecido” una fila justo entr entre e Lune Lunes s y Miér Miérco cole les. s. Pode Podemo mos s añad añadir ir tant tantas as fila filas s y/o y/o colu column mnas as como como deseemos.
Pero. ¿Que pasa si por error hemos añadido demasiadas?. No es problema, Dreamweaver hace fácil, tanto insertar como eliminar, simplemente tenemos que pulsar sobre la fila o columna a eliminar con el botón derecho y buscar en el menú la opción eliminar.. Una pista, está justo debajo de las opciones insertar.
Y aquí aquí tenem tenemos os nues nuestra tra tabla, tabla, despu después és de habe haberr añadi añadido do y elimi elimina nado do filas filas despreocupadamente.
LECCIÓN 27ª Panel de Propiedades de las Tablas Tablas En esta lección vamos a ver como podemos obtener un acabado más profesional cuan cuando do trab trabaj ajam amos os con con tabl tablas as.. Y esto esto lo hare haremo mos s con con la ayud ayuda a del del pane panell propiedades. El prime primerr paso paso es selec seleccio cionar nar la tabla tabla tal tal como como vemos vemos en la image imagen n infer inferior ior,, 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 selección.
Seguidamente desplegaremos el panel propiedades, tal como ya sabemos, pero est esta vez pode podem mos llev lleva arno rnos una sorpr rpresa, sa, el panel no es tal como lo reco record rdáb ábam amos os,, ha camb cambia iado do.. Ahor Ahora a las las opci opcion ones es hace hacen n refe refere renc ncia ia a las las propi propieda edade des s de la tabla tabla.. Esta Esta es una una de las venta ventajas jas de Drea Dreamw mweav eaver er,, para para ahorrarnos clics, el programa cambia sus paneles y menús de forma contextual según la tarea que tengamos activa en cada momento
En la imagen superior vemos las características de una tabla por defecto, vemos que tiene 3 filas, 3 columnas, y que sus dimensiones son 533 píxeles de ancho por 118 píxeles de alto, que el borde de la tabla tiene grosor 1, y que el alineamiento es el activo por defecto. Sin Sin emba embargo rgo,, abajo abajo vemo vemos s las carac caracter teríst ística icas s de nues nuestra tra tabla. tabla. Vemos emos que que algun algunos os valor valores es han han camb cambiad iado, o, por por ejemp ejemplo lo tenem tenemos os 4 filas filas y 5 colum columna nas, s, y además 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 píxeles. Hemos cambiado la alineación de la tabla a la derecha y hemos engordado un punto los bordes de la tabla.
En la lección siguiente seguiremos viendo las sorpresas que tiene guardas el panel de propiedades
LECCIÓN 28ª Propiedades de las Tablas En esta lección continuaremos descubriendo el panel propiedades para las tablas. En la zona inferior del panel podemos cambiar fácilmente 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 conclusión de este ejercicio podemos asegurar que la combinación de estos dos colores perjudican seriamente la salud de la vista.
Drea Dreamwe mweave averr nos nos permi permite te tambié también n defini definirr el espaci espacio o entre entre las las celda celdas s y la separación del texto con respecto las paredes de la celda que los contiene, esto los conseguimos dándoles valores a las casillas “CellPad” y “CellSpace”
En las lecciones anteriores vimos como se podía asignar a la tabla un valor de longitud y altura con una medida concreta en píxeles. Esto es fantástico para controlar las dimensiones de visualización 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 página se muestra en un monitor de una resolución de 800 o en uno de 1024.
Para solucionarlo, Dreamweaver nos permite con un sólo clic cambiar la medida de nuestra tabla de píxeles a porcentajes. Es decir podemos decir que nuestra tabla ocupe el 50% de la pantalla, pantalla, sin importar las dimensiones dimensiones del monitor donde se visualice.
LECCIÓN 29ª Las Plantillas En las lecciones anteriores hemos aprendido a crear tablas y los rudimentos su formato. Sin embargo, podemos ir más allá, para darle a nuestras tablas un aspecto más sofisticado de forma fácil y sencilla. Drea Dreamwe mweave averr tiene tiene una una poder poderosa osa herra herramie mienta nta llama llamada da “plant “plantill illas as”” que que nos nos ayudara en esta tarea. Para utilizarla simplemente tenemos que ir a la barra de menús 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 diálogo llamado “Formatear Tabla”. En esta ventana de diálogo tenemos una gran cantidad de opciones, que para no abrumarnos vamos a ir viendo poco a poco. En la parte superior, tenemos 3 zonas, la izquierda es una menú deslizante en el que pulsando sobre cada una de las entradas, podemos ver en la parte central del cuadro de diálogo un ejemplo de la plantilla elegida.. Para Para elegir elegir una una planti plantilla lla sólo sólo tenem tenemos os que que pulsa pulsarr sobre sobre la opció opción n dese deseada ada,, veremos un ejemplo del formato en la parte central
Y cuando estemos conforme con la elección 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 habíamos diseñado en la lección 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 estética de la tabla de la plantilla, pero Dreamweaver respeta la forma en que nosotros hemos incrustado la tabla en nuestra página.
LECCIÓN 30ª Formatear tablas En esta lección vamos a continuar explorando las plantillas para formatear tablas.
Siemp Siempre re es una una buena buena idea idea,, perde perderle rle el mied miedo o al orde ordenad nador or,, y deci decidir dirse se a investigar las opciones que los menús 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 prediseñadas y decidamos crear nuestra propia combinación de colores simplemente pulsando en las casillas de colores de filas y eligiendo un color primario y un color secundario Los alumnos más observadores ya se habrán dado cuenta de que cada vez que elegimos un color tiene un número hexadecimal asociado, Este es un número universa universall de identif identificac icación ión para cada cada color color.. Con este número podemos podemos estar seguros de que hemos elegido el mismo color exactamente
Sin embargo, si no conocemos el número hexadecimal, siempre podemos pulsar en el botón botón color color, para para desp despleg legar ar la tabla tabla de colo colores res y elegi elegirr en ella ella el que que deseemos
Por ejemplo, en la imagen inferior vemos como queda la combinación de colores verde y azul. Podemos ver en la imagen que el código para el color verde es “#00C “#00CC0 C00” 0” y que que para para el color color azul azul es “#333 “#33339 399”. 9”. Sabie Sabiend ndo o estos estos código códigos, s, podemo podemos s utilizar utilizar exactam exactamente ente estos mismo mismo colores colores en todas todas las páginas páginas que queramos.
Hay un último elemento que vamos a ver en esta lección y es la distribución de colores en las tablas. Dreamweaver nos permite con un sólo clic distribuir los colores de la forma que deseemos. Por ejemplo pulsando en la pestaña “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.
LECCIÓN 31ª Formato de Plantillas En esta lección vamos a terminar de descubrir las opciones de formato de las plantillas de tablas. En la parte inferior de la ventana de diálogo, encontramos las opciones de formato de los encabezados de la plantilla. Vimos como crear encabezados para tablas en lecciones anteriores, pero puede ser que que noso nosotro tros s desee deseemo mos s darle darle a nues nuestro tros s encab encabez ezad ados os un aspe aspecto cto más más personalizado. Lo haremos desde este panel.
La primera opción se refiere a la fila superior de la tabla, podemos definir el alineamiento del texto del encabezado, podemos elegir alinearlo a la izquierda, a la derecha o centrarlo. O simplemente dejarlo si definir
Con Con estilo estilo de texto texto,, podem podemos os darle darle más más prese presenci ncia a a nues nuestro tros s encab encabez ezao aos, s, resaltándolo con un estilo de letra negrita, o itálica o ¿por qué no? Combinar a la vez resaltada e itálica.
Todo lo que hemos visto para los colores es también válido 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 Dreamweaver nos permite tener distintos formatos para el encabezado encabezado superior y para el encabezado lateral. Pode Podemo mos s defi defini nirr la alin alinea eaci ción ón para para toda toda la colu column mna a y tamb tambié ién n el esti estilo lo de visual visualiza izació ción n de las fuente fuentes, s, pode podemo mos s elegi elegirr los mism mismos os forma formatos tos que 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 itálica
Por último podemos con un sólo clic, desde aquí, cambiar el borde la tabla. Podemos ponerle ponerle borde, desde 1 hasta el valor que deseemos, deseemos, teniendo presente que el grosor del borde crece a costa de disminuir el tamaño de las celdas. Un punto importante a la hora de diseñar páginas web y que le da tanto valor a las tabla tablas s cuand cuando o se trata trata de crear crear estru estructu cturas ras de pági páginas nas,, es el hech hecho o de que que podemos dar al borde un grosor de cero.
¿Por qué es esto tan importante? ¿Cómo 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 página. Pero eso lo veremos más 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 lección.
LECCIÓN 32ª Las Imágenes Por fin hemos llegado al tema de las imágenes.
Hacer una página web es muy sencillo, más si se utilizan un programa como Drea Dreamwe mweave aver, r, pero pero cuand cuando o cons constru truimo imos s nues nuestra tra pági página na no quere queremo mos s sólo sólo sencillez, también queremos sea atractiva. Y hoy en día, es indiscutible que para que una página sea atractiva debe tener una estética visual importante. importante. Dreamweaver lo sabe y por ello ha puesto a nuestro servicio una importante cantidad de recursos para que podamos añadir, reasaltar y modificar imágenes para hacer más atractivas nuestras páginas web
La manera más sencilla de añadir una imagen a nuestra página es desplegando al menú insertar, de la barra menú, y buscar en él la opción imagen.
En la venta ventana na de diálo diálogo go que que Drea Dreamwe mweav aver er nos nos abrir abrirá, á, podr podrem emos os busca buscarr la imagen imagen que queramo queramos s insertar insertar en nuestra nuestra página, página, simplem simplemente ente tenemos tenemos que seleccionarla y pulsar el botón aceptar de la ventana diálogo.
En la imagen inferior vemos el resultado de incluir una imagen en la página web, observa que imagen se ha insertado en la posición que ocupaba el cursor en el momento de añadir la imagen, también podemos escribir texto en la misma línea que insertamos la imagen
Eso significa que podemos combinar en la misma línea texto e imágenes, sin importar el orden. Podemos escribir una línea de texto y en cualquier punto de ella insertar la imagen, o podemos insertar primero la imagen y después escribir un comentario a su lado.
Dreamweaver nos permite insertar imágenes de varias maneras, ya hemos visto como como hace hacerlo rlo desd desde e la barr barra a de menú. menú. Ahora Ahora vamo vamos s a apren aprender der a inser insertar tar imágenes desde el panel insertar, con la barra común activada. Podemos pulsar en la barra común en el icono imagen, tal como vemos en la imagen inferior
Dreamwe Dreamweaver aver nos muestra muestra la misma misma ventana ventana de diálogo diálogo de antes, antes, podemo podemos s sele selecc ccio iona narr el arch archiv ivo o como como ya sabe sabemo mos s o pode podemo mos s escr escrib ibir ir el nomb nombre re directamente en la casilla nombre, y después pulsamos aceptar.
Antes de terminar esta lección vamos a ver una ultima forma de insertar imágenes en la pági página na.. Desd Desde e el grup grupo o de pane panele les s de la dere derech cha a de la vent ventan ana a 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 páginas, si hemos configurado adecuadamente el sitio, incluido el directorio de las imágenes, simplemente tendremos que arrastrar la imagen correspondiente desde el panel hasta el lugar de la página donde queramos situarla.
Nota: Nota: El copyr copyrigh ightt de las fotogr fotografí afías as utili utiliza zadas das como como ejem ejemplo plo en este este curso curso pertenece a su autora, Silvia R. Vázquez.
LECCIÓN 33ª Panel Propiedades de Imagen En la lección anterior aprendimos aprendimos a insertar imágenes. imágenes. En esta lección tendremos un primer primer contact contacto o con las posibilid posibilidade ades s que ofrece el panel panel propied propiedades ades de Dreamweaver. Para activar el panel de propiedades simplemente tenemos que desplegarlo como ya sabemos. Si el panel de propiedades no aparece con las mismas opciones que en la imagen inferior, es debido a que tenemos activa alguna otra parte de la ventana de diseño.
Para acceder a las propiedades de las imágenes, sólo 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 más cómodo trabajar con los ficheros.
Sobre Sobre el nombre, nombre, Dreamwe Dreamweaver aver nos muestra muestra el “peso” “peso” o “tamaño “tamaño”” en Kb de la imagen, esto es muy importante para controlar el “peso” final de la página. Hay que tener en cuenta de que cuanto más “peso” tenga nuestra página más lenta será de visualizar por los usuarios, en especial por aquellos que no tienen una conexión de Internet de alta velocidad.
Es impor importan tante te difere diferenc ncia ia el tamañ tamaño o de peso peso de la image imagen n con con el tama tamaño ño de dimensiones de la imagen, una imagen independientemente de su peso puede tener tener las dimens dimension iones es que que neces necesite itemo mos. s. Esto Esto se consi consigu gue e intro introduc ducien iendo do los los valores deseados en las casillas Ancho y Alto. Como se ve en la imagen inferior.
En el caso caso de que que prefi prefira ramo mos s las medid medidas as origin originale ales, s, no es nece necesa sario rio que que recordem recordemos os las cifras, cifras, simplem simplemente ente pulsamos pulsamos en el icono icono restaura restaurarr, tal como como vemos indicado en la imagen superior, En la parte central tenemos las casillas “origen” y “vínculo”. La casilla origen hace referencia al nombre del archivo de la imagen, pulsando sobre la carpeta de su derecha podemos navegar por la estructura del ordenador hasta encontrar la imagen que deseemos insertar en ese punto.
En la casilla vínculo, podemos introducir el nombre de la página web enlazada a la imagen ¿Qué significa esto?. Bueno. Los vínculos los veremos en detalles en próximas próximas lecciones, lecciones, baste saber por ahora que podemos enlazar distintas páginas de manera que pulsando sobre un vínculo en una de ellas el navegador nos muestre otra distinta. Este es el funcionamiento normal de las páginas web, Dreamweaver nos permite con un sólo clic crear un vínculo desde una imagen de manera que pulsando sobre ella, el navegador nos lleve hasta otra. En la casilla vinculo, podemos el nombre de la página destino a la que deseamos vincular desde la imagen.
En la imagen superior tenemos la casilla “Alt” esto significa “alternativa”. Muchas personas no le dan importancia a esta casilla pero en determinadas circunstancias su contenido es vital. Por ejemplo en el caso de que el usuario, por cualquier razón, no pueda visualizar en su ordenador las imágenes 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 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 imágenes, estas funcionalidades se aleja del objetivo de este curso por lo que no entraremos en ellas. Nota: Nota: El copyr copyrigh ightt de las fotogr fotografí afías as utili utiliza zadas das como como ejem ejemplo plo en este este curso curso pertenece a su autora, Silvia R. Vázquez.
LECCIÓN 34ª Propiedades de Imagen En esta lección vamos a seguir descubriendo descubriendo el panel de propiedades propiedades de imagen. Ya hemo hemos s visto, visto, en la lecci lección ón anter anterior ior,, la zona zona supe superio riorr, ahor ahora a verem veremos os las las funciones de la zona inferior
Empezaremos con las opciones de alineación de las imágenes. Pulsando en los iconos de alineación podemos cambiar la posición de la imagen en la página. En realidad lo que alineamos, con estos iconos, es toda la línea. Desde estos iconos no podemos cambiar la alineación de la imagen sin cambiar el del texto con el que comparte línea. En la imagen inferior vemos un ejemplo de alineación a la derecha.
Ahora Ahora bien. bien. Dream Dreamwe weave averr nos nos perm permite ite desde desde la opció opción n aline alinear ar,, no hay que confundir confundir con los iconos de alineamiento, tener más control de cómo la imagen se relaciona con la línea en la que está situada. Por ejemplo con la opción “Línea de base”, el texto comparte la misma línea que el pie de la imagen. Es decir tal como se ve normalmente.
Sin embargo cuando cambiamos a alineación medio, el texto aparece a la altura de la mitad de la imagen, sin importar la alineación del resto de la página. En el menú desplegable hay una gran variedad de alineaciones posibles para el texto de la imagen.
Otra de las opciones es el borde. Con esta opción podemos añadirle a la imagen un borde, borde, una especie especie de marco, marco, con el grosor grosor que decidam decidamos, os, simplem simplemente ente introduciendo un número en la casilla correspondiente Por ejemplo en la imagen inferior vemos el resultado de aplicar un borde de tamaño 10
Dreamweaver tiene otras opciones para controlar el aspecto de las imágenes, 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 introduciendo valores en estas casillas podemos podemos dejar un espacio del tamaño 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.
LECCIÓN 35ª Combinar Imágenes y Tablas En lecc leccio ione nes s ante anteri rior ores es hemo hemos s apre aprend ndid ido o a crea crearr tabl tablas as,, tamb tambié ién n hemo hemos s aprendido a insertar imágenes y también hemos comentado como las tablas eran el esqueleto en el que se basan las páginas web. Vamos a ver un ejemplo practico de todo ello. En esta lección y las próximas vamos a crear una tabla y vamos a insertar en ella textos e imágenes.
En la imagen inferior tenemos una tabla, de 3 celdas por 3 celdas, según la plantilla que ya conocemos. Sólo hemos introducido datos en el encabezado de la columna de la izquierda.
Ahora pulsaremos con el ratón 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 métodos que ya conocemos, por ejemplo con el icono insertar imagen de la barra común.
Seleccionaremos en la ventana de diálogo 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 descripción de la imagen en la celda de la derecha de la imagen. Observa como la apariencia de la página aparece mucho más ordenada que en los ejemplos de las lecciones anteriores.
Podemos situar, tanto textos como imágenes en cualquiera de las celdas de la tabla. Por ejemplo, la siguiente imagen la situaremos en la celda derecha de la fila central
Esta Esta vez la añad añadire iremo mos s arra arrastr strán ándo dola la desd desde e el pane panell archiv archivo, o, simp simplem lement ente e tenemos tenemos que elegir elegir la imagen imagen que deseemo deseemos s situar situar en la celda, celda, pinchare pincharemos mos sobre ella y arrastraremos el puntero del ratón hasta la celda destino.
En la celda central podemos añadir el texto que creamos necesario, por ejemplo una descripción de la imagen. Debido a que la tabla fue pre-formateada con una
plantilla de tablas, el tipo de letra del comentario 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 lección para experimentar con ello.
Vamos a ver la ultima manera de insertar imágenes 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 opción imagen.
Desd Desde e la venta ventana na de diálog diálogo o elegir elegirem emos os la imag imagen en que que dese deseam amos os inser insertar tar y pulsaremos el botón aceptar.
Como Como en las ocasi ocasione ones s ante anterio riore res s escri escribir birem emos os un comen comentar tario io en la celda celda contigua que describa la imagen.
En esta lección hemos atisbado las posibilidades que encierra la inserción de imágenes y la combinación de imágenes y textos en las tablas. En lecciones próximas profundizaremos más en el tema
LECCIÓN 36ª Textos e Imágenes En la lección anterior vimos como combinar en una tabla imágenes y textos. En esta lección veremos como podemos podemos realzar la presencia presencia de nuestra página utilizando las herramientas del panel de propiedades. En leccione lecciones s anterior anteriores es vimos vimos que el panel panel de propied propiedade ades s cambiab cambiaba a según según la zona activa de la página. El mismo panel era radicalmente distinto si tratábamos con textos, con imágenes o con tablas.
En esta lección deberemos tener esto muy presente puesto que dependiendo de donde tengamos tengamos situado el cursor podemos pasar con sólo un clic de trabajar con uno u otro panel.
Para no cometer errores, lo mejor es marcar la zona a la que deseemos aplicar el formato. Y después pulsar el botón 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 después 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 alineación del texto de una celda…
Prime Primero ro marc marcam amos os el texto texto y desp después ués pulsa pulsamo mos s el icono icono de aline alineaci ación ón que que deseemos aplicarle.
Podemos aplicarles otros formatos, como un resaltado del texto,
O cambiar el tamaño de la fuente del texto seleccionado.
Esta lección ha sido un somero repaso de las funciones del panel propiedades, las funciones son las mismas que ya hemos visto en lecciones anteriores
LECCIÓN 37ª Los Comportamientos En esta lección vamos a ver una funcionalidad avanzada avanzada de Dreamweaver, Dreamweaver, que facilita mucho la creación de páginas web más dinámicas. Estos son los comportamientos. Los comportamientos son, valga la redundancia, comportamientos que asignamos a dete determ rmin inad ados os suce suceso sos s para para que que la pági página na reac reacci cion one e de una una mane manera ra determinada. Todo esto lo veremos mejor un ejemplo. Podemos acceder a los comportamientos en el grupo de paneles de la derecha de la ventana de Dreamweaver.
El prim primer er paso paso es sele selecc ccio iona narr el obje objeto to sobr sobre e el que que dese deseam amos os apli aplica carr el comportamiento, por ejemplo una de las imágenes de la tabla.
A continuación desplegaremos el menú “etiqueta” y pulsaremos sobre la pestaña comportamientos. Debajo de la leyenda “comportamientos” encontramos un signo “+”.
Pulsaremos Pulsaremos sobre él para desplegar el menú de comportamientos comportamientos disponible para el objeto seleccionado. Esto último es importante tenerlo en cuenta, pues los comportamientos cambian según 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 sólo podemos aplicar a imágenes. “Intercambiar imagen”. Este comportamiento logra un efecto muy bonito, se trata de que en una página web, cuando el usuario pase el puntero del ratón sobre la imagen, esta imagen cambie y sea sustituida por otra distinta. Se pueden conseguir páginas muy efectivas con este comportamiento y un poco de imaginación y buen gusto.
Tras Tras pulsar pulsar en la opción opción intercam intercambiar biar imagen. imagen. Dreamw Dreamweave eaverr nos mostrar mostrara a un cuadro de diálogo en el que nos pedirá que definamos el origen, esto simplemente quier quiere e preg pregun untar tarno nos s ¿por ¿por cual cual imag imagen en quier quiera a que que sea sea susti sustitui tuida da la imag imagen en seleccionada?
Ya conocemos como examinar las carpetas para encontrar la imagen deseada, en este caso haremos lo mismo, vamos a seleccionar seleccionar la imagen “árbol” y pulsaremos el botón aceptar
Cuando hayamos seleccionado la imagen volveremos a la ventana de diálogo “intercambiar imagen” y pulsaremos aceptar. Hay un punto que no he comentado, y que es apropiado hacerlo antes de salir de esta ventana.
En la zona inferior de la ventana hay dos opciones marcadas Una es “carga previa de imágenes” imágenes” y la otra es “restaurar “restaurar imágenes onmouseout”. onmouseout”. Por defecto ambas opciones están marcadas. Es conveniente conocer la función de ambas opciones, la primera función se enca encarg rga a de que que cuan cuando do el usua usuari rio o visu visual aliz iza a la pági página na por por prim primer era a vez, vez, su ordenador descargue todas las imágenes relacionadas, incluida la de intercambio ¿con qué objetivo? Pues para que cuando el usuario pase el puntero del ratón sobre la imagen, el intercambio sea instantáneo pues ya ha cargado previamente la imagen.
La segunda función “restaurar imágenes onmouseout” se encarga de restaurar la imagen original cuando el puntero del ratón deje de estar sobre la imagen, esta es una opción que depende más del gusto estético que de características técnicas. Así que este punto es totalmente opcional.
En la imagen superior vemos como queda el panel etiqueta después de añadir nuestros comportamientos.
Cuan Cuando do visua visualic licem emos os la págin página a se verá verá como como la image imagen n superi superior or de mane manera ra normal, pero si superponemos el puntero del ratón la página se verá como la imagen inferior
LECCIÓN 38ª Los Enlaces En esta lección 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 rápido podemos decir que un enlace es un objeto que cuando pulsamos sobre él, el navegador nos lleva a otra página. Esta es la gran potencia de Internet, el descubrimiento de que una página lleva a otra y esta, a otra y así hasta que nos cansemos de navegar. El primer paso es seleccionar seleccionar,, por ejemplo, ejemplo, un texto. Este texto será el enlace con la página destino.
En la barra común pulsaremos el icono enlace, tal como vemos en la imagen inferior
Dreamweaver abrirá un cuadro de diálogo en el que completaremos los campos necesarios.
El primero es el texto del enlace, que en este caso coincide con el texto que hemos seleccionado.
El segun segundo do camp campo o es selecc seleccion ionar ar la pági página na con con la que que quere queremo mos s vincu vincular lar el enlace, podemos tanto escribir el nombre directamente como buscarla por las carpetas y seleccionarla como ya sabemos.
La siguiente opción nos dice como accederemos al destino. Podemos utilizar la misma misma venta ventana na del del naveg navegado adorr en la que que estem estemos, os, por por ejem ejemplo plo si estam estamos os navegando por el mismo sitio, o bien abrir otra ventana independiente en la que se mostrara la página de destino. Esto es particularmente útil, cuando queremos que el usuario permanezca en nuestra página después de ver el contenido de la página enlazada.
La opción título, se refiere al título de la página que vamos a abrir, de esta manera tenemos cierto control sobre las páginas. Las siguientes opciones no son importantes para los objetivos de este curso.
Cuando aceptamos los cambios realizados, y volvemos a la vista de diseño vemos como ha cambiado el texto, ahora aparece azul y subrayado. Este Este es el form format ato o por por defe defect cto o que que adop adopta tan n todo todos s los los enla enlace ces. s. Pode Podemo mos s encontrarnos con páginas en que los enlaces tienen otro aspecto, eso no tiene otra importancia más allá de su apariencia estética.
LECCION 39ª Vínculos desde Imágenes En la lección anterior vimos como crear un enlace desde un texto. Dreamwe Dreamweaver aver también también nos permite permite crear crear fácilme fácilmente nte enlaces enlaces desde desde imágen imágenes. es. ¿Cómo puede ser esto?. Un enlace texto se activaba cuando se pulsaba sobre él, un enlace imagen, también. Así de sencillo Para crear un enlace imagen, simplemente tenemos que seleccionar la imagen e ir al panel propiedades
Sobre el panel propiedades, en el campo vinculo, debemos teclear el nombre de la página 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 página “Mi-primerapágina.htm”
Al igual que en el enlace de texto aquí podemos pulsar la opción “Destino” para controlar de que forma se va a abrir la nueva página en el navegador del usuario.
LECCION 40 ª Enlaces internos En las lecciones anteriores hemos visto como vincular una página con otra. En esta vamos a vincular un enlace de la página, no con una página externa, si no con un punto de la misma página. Esto es particularmente útil en el caso de páginas extensas, ya que podemos crear un índice en la cabecera de la página y con un clic ir a la sección que nos interese.
El primer paso, como siempre es seleccionar seleccionar un punto de la página. 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 común, tal como vemos en la imagen superior. En la ventana de diálogo siguiente deberos crear un nombre de anclaje, es decir, un nombre único al que después podamos referenciar de manera sencilla, por ejemplo, “párrafo.”
Dream300064 Cuan Cuando do puls pulsem emos os acep acepta tarr, la vist vista a de dise diseño ño nos nos most mostra rara ra este este aspe aspect cto, o, tranquilos, ese ancla tan bonita sólo se ve en la vista de diseño, el usuario verá la página normalmente, tal como la diseñamos.
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 Una vez vez que que hemo hemos s selec seleccio cionad nado o el texto, texto, por ejemp ejemplo lo,, iremo iremos s al panel panel de propiedades y pulsaremos sobre la opción vínculo, esta vez no introduciremos ninguna página web
Simplemente escribiremos el nombre del anclaje precedido por el signo “#”
La opción destino podemos utilizarla tal como estamos acostumbrados.
De esta manera cuando pulsemos sobre el enlace, la página se desplazará hasta mostrarnos el punto de anclaje que hemos vinculado al enlace.
LECCION 41ª Enlace externos Y ya sólo sólo qued queda a un últim último o punt punto, o, como como crear crear enlac enlaces es a págin páginas as exteri exterior ores, es, situadas en Internet. A lo largo de todo este curso ya hemos aprendido aprendido lo suficiente suficiente como para hacerlo de una manera sencilla y rápidamente. El primer paso es, como siempre, seleccionar el texto que va a servir como enlace.
El siguiente paso es, buscar en la barra común el icono de enlace.
Y aquí aquí viene viene la noved novedad ad,, en la venta ventana na de hiper hipervín víncu culo, lo, que que ya cono conocem cemos, os, introd introduc ucire iremo mos s en la casil casilla la de víncul vínculo, o, la direcc dirección ión url url de la pági página na a la que que deseemos enlazar desde nuestra página. Por ejemplo “http://www.aulafacil.com”
En la opción destino podemos elegir cualquiera de las opciones, para este caso, hemos elegido la opción “_blank”
Cuando hayamos terminado pulsaremos el botón aceptar
Y cuando volvamos a la vista de diseño, comprobaremos que este será el aspecto de nuestra página.
ya sólo sólo qued queda a grab grabarl arla a y lanza lanzarla rla desde desde un naveg navegad ador or para para comp comprob robar ar que que cuando pulsamos en el enlace nos abre en otra página la web de aulafácil.com
