Crea Una Revista Online Con Plan Till As Dream Weaver

Crea una

revista online

con plantillas

Macromedia Dreamweaver

Macromedia Dreamweaver 2

Crea una revista online con plantillas 3

Crea una revista online con plantillas

Una de las herramientas más potentes de las que dispone Dreamweaver es la herramienta plantillas. Gracias a ellas

podrás crear en sencillos pasos documentos base a partir de los cuales podrás crear tu propia revista online

Cada vez que creas un sitio web tienes que tener en cuenta que las páginas deben tener un formato uniforme. La mayoría de nosotros solemos hacer copias de los documentos ya creados y trabajar sobre estas copias y modifi-car su contenido. Ésta es la forma más sencilla de tener páginas con una es-tructura basada en la estructura de otras ya creadas previamente. Las planti-llas son una especie de copia de la página en la que van a estar basadas el resto de páginas del sitio web pero que incluyen la posibilidad de establecer unas zonas editables y otras zonas que serán fijas, que no podrán ser modi-ficadas. No es posible modificar las propiedades de una página que está basada en una plantilla, a ex-cepción del título. Cuando se desea que existan páginas con, por ejemplo, diferente color de fondo, es necesario crear plantillas diferen-tes con los distintos co-lores, y basar las pági-nas en una u otra planti-lla, según el color de fondo que se desee para cada una. Cuando se modifica el diseño de una plantilla, se pueden actuali-zar todas las páginas basadas en ella.


Las plantillas son archivos con la extensión DWT que se guardan en el sitio web, dentro de una carpeta llamada Templates. A continuación, vas a crear una revista online con plantillas y con el objetivo de que cada página tenga una estructura base.

Configura tu sitio Antes de comenzar a trabajar con plantillas, debes configurar un sitio donde vas a guardar todos los ele-mentos que vas a necesitar para cons-truir tu revista online, tales como imágenes, páginas HTML, plantillas … por lo tanto una vez que hayas abierto Dreamweaver ve a Menú, Si-tio, Nuevo sitio. Solamente has de seguir los pasos que te indican para terminar de defi-nir tu nuevo sitio. Ponle de nombre el sitio plantillas.


Luego deberás indicarle dónde se encuentra la carpeta en la que se van a guardar todos los ficheros, si aún no la has creado, no te preocupes, cuando pulsas sobre el icono en forma de carpeta para buscarla y localizarla en tu ordenador también te permite crearla en ese momento. Por último, como no deseas conectarte posteriormente con ningún servidor para poder alojar la página web en algún dominio que hubieras podido contratar, responderás a la pregunta con ninguno. En la última ventana podrás ver reflejado un re-sumen de la configuración que acabas de introducir para crearte tu nuevo si-tio. Finalmente presiona el botón de Completado para terminar. Una vez hayas terminado de crear y definir el nuevo Sitio, deberás introdu-cir en su correspondiente carpeta todos los ficheros que vayas a utilizar para poder crear la revista. Estos ficheros podrás encontrarlos dentro del CD-ROM que se adjunta con la revista, todos son imágenes a excepción de uno revista.htm que como puedes ver es un documento HTML que contiene la estructura de la página web ya creada, por si no deseas realizarla por ti mismo. Las imágenes que has de copiar y pegar en tu nueva carpeta son las siguientes: banner.gif, anuncio.jpg, fecha.gif, link.jpg, lo-go_revista.gif, menú.gif, modelo.jpg y portada.jpg.


Una vez que hayas terminado de copiar las imágenes, (no hace falta que co-pies el fichero plantillas.htm si has decidido hacerlo por ti mismo) debes confeccionar la página de la revista, para ello sigue estos sencillos pasos.

Maqueta tu propia revista online Vas a empezar a trabajar sobre el documento que te ha facilitado Dream-weaver al abrirlo. La configuración de este tipo de páginas web suele ser sencillo, para que posteriormente sean fácilmente manipulables, por dos ca-racterísticas importantes. La primera es debido a que por norma general se actualizan diariamente y la segunda razón es debido a que no suele ser solo una persona la que se encarga de tal propósito, sino que suelen dedicarse a ello varias personas. Por ello su estructura no es complicada, y lo más senci-llo para construirlo es mediante una tabla.

Así que lo primero que has de hacer es introducir una tabla a través del me-nú Insertar, Tabla. Introduce los siguientes parámetros para configurar


la tabla, introduce el valor de 5 en el apartado filas, 4 en columnas y

780 en ancho. En el resto de parámetros deja el valor en cero. Ahora el siguiente paso es adjuntar o dividir las celdas para obtener una estructura de tabla como la que se muestra en la imagen anterior. Para ello has de utilizar las herramientas Combinar las celdas seleccionadas usando extensores o Divide la celda en filas o columnas, depen-diendo de la opción que necesites. Ambas opciones podrás encontrarlas en la ventana Propiedades.

Configura la tabla con ayuda de las imágenes Una vez hayas terminado de configurar la tabla correctamente, es hora de ir introduciendo las imágenes en las celdas correspondientes, para terminar de realizar el diseño. Empieza introduciendo la imagen banner.gif en la primera celda de todas, para ello arrastra el icono de imagen, que podrás en-contrar en la paleta Común, en la ventana Insertar. Se te abrirá una ventana para poder seleccionar la imagen de origen, que en este caso se trata de banner.gif como se te ha mencionado anteriormente.

Bien, acabas de introducir la primera imagen que se trata de un banner, es decir, un anuncio publicitario en Internet. Debes repetir estos mismos pasos para el resto de las imágenes, e ir introduciéndolas en sus celdas correspon-dientes como se muestra en la imagen. En las celdas situadas en la izquierda de la tabla introduce las imágenes, fecha.gif, logo_revista.gif y

menú.jpg, (por orden de celdas superior a interior), mientras que en las


celdas de la derecha introduce las imágenes portada.jpg y link.jpg.

Por último introduce en las celdas centrales de la tabla las imágenes anun-cio.jpg (celda de la izquierda) y modelo.jpg (celda de la derecha).

Para terminar de completar la composición, tan sólo te resta introducir algo de texto en las tres celdas restantes. En ellas se te propone que introduzcas en la celda superior la fecha completa, en la celda del medio la noticia más importante de la revista, o la noticia de última hora, y por último en la celda inferior de todas introduce los artículos que configuran la revista del mes. Todo esto podrás comprobarlo con el fichero que se te facilita titulado re-vista.htm.


Ya has terminado de crear la primera parte para construir una revista online, ahora toca centrase en el cometido de crear una plantilla con Dreamweaver.

Cómo crear una plantilla Las plantillas pueden crearse desde cero, o a partir de una página ya existen-te. Una forma de crear una plantilla desde cero es a través del panel Acti-vos. El panel Activos se puede abrir a través del menú Ventana, opción

Activos. También pulsando F11 o sobre el botón del lanzador. Una vez abierto el panel hay que seleccionar el botón Plantillas, para poder trabajar con las plan-

tillas. Los botones inferiores del panel Acti-vos son similares a los del panel Estilos CSS. El único botón diferente es el primero, que en este caso sirve para actualizar la lista, el resto permite crear una nueva plantilla, edi-tar una plantilla seleccionada en la lista, o eliminarla. Para crear una nueva plantilla hay que pulsar sobre el botón que tiene un + (si

este botón no está activado, pulsa con el botón derecho del ratón y elige Nueva plantilla). Cuando se pulsa este botón aparece un nuevo docu-mento en la lista de plantillas, al que es posible cambiarle el nombre si pul-sas previamente sobre él. Las plantillas se guardan en el sitio web actual, dentro de la carpeta Templates, que se crea automáticamente. Para crear una plantilla a partir de un archivo existente es necesario abrir dicho archi-vo, y después guardarlo como plantilla a través del menú Archivo, opción

Guardar como plantilla. Cuando se pulsa dicha opción, aparece una ventana como la que se muestra a continuación. En ella es necesario especi-ficar el nombre con el que va a ser guardada la plantilla, a través del campo Guardar como, y elegir, de entre la lista de sitios, el Sitio en el que se va a guardar. Cuando se modifica el diseño de una plantilla, se pueden ac-tualizar todas las páginas basadas en ella. Las plantillas son archivos con la


extensión DWT que se guardan en el sitio web, dentro de una carpeta lla-mada Templates.

Convierte tu página en una plantilla Éstas son las dos maneras de crear una plantilla desde cero, para crear una plantilla a partir de una página ya existente como es tu caso, has de realizar los siguientes pasos. Se-ñala con el cursor la palabra Lu-nes, 23 como si de un procesa-dor de texto se tratara, después di-rígete a la paleta Plantillas de

la ventana Insertar y pulsa so-

bre el tercer icono denominado región editable. Comprobarás que Dreamweaver te muestra una ventana de advertencia en la que te indica que el documento actual al no tratarse de una plantilla y aplicarle dicha opción, automáticamente pasará a convertírtelo en una nueva plantilla. Tu tan sólo has de pulsa el botón de Aceptar. Seguidamente te aparecerá una nueva


ventana con el nombre de Nueva región editable, aquí introduce el

nombre de fecha y pulsa Aceptar.

Ahora fíjate bien, verás cómo la zona seleccionada aparece ahora marcada con un recuadro y una pestaña, en el que la etiqueta pone el nombre que le acabas de asignar. Acabas de convertir ese elemento de la página en una re-gión editable. Si no has entendido muy bien el proceso, no te preocupes, en el siguiente apartado se te explica con más detalle qué son las regiones edi-tables, cómo aplicarlas y finalmente cómo utilizar posteriormente una plan-tilla creada.

Establecer regiones editables en una plantilla Todos los elementos de una plantilla es-tán bloqueados por defecto. Es necesario establecer las zonas que sí podrán ser editadas en las páginas que se basen en dicha plantilla. Para insertar una región editable hay que situar el puntero en el lugar en el que se desea insertar, y des-pués dirigirse al menú Insertar, Ob-jetos de plantilla y escoger la op-

ción Región editable, o pulsar la

combinación de teclas Ctrl+Alt+V.


También puedes hacerlo, recuerda, con el botón Región editable de la

paleta Plantilla que se encuentra dentro de la ventana Insertar, como se te ha comentado en el apartado anterior. Como puedes ver tienes tres ca-minos diferentes para llegar al mismo destino. En la nueva ventana hay que establecer un Nombre para la región editable. Dentro de la plantilla no pueden existir dos regiones editables con el mismo nombre. Posteriormente podrás modificar el nombre a través del inspector de propiedades de la región editable. Las zonas editables aparecen representadas en dreamweaver como un re-cuadro con una etiqueta de color turquesa. En la etiqueta aparece el nombre de la zona editable. Dentro del recuadro es posible insertar objetos, que apa-recerán por defecto en aquellos documentos que se basen en la plantilla. Es-tos objetos, al estar dentro de la zona editable, podrán ser modificados en las páginas.


Todos los objetos que se encuentren fuera de estas zonas editables aparece-rán también en las páginas, pero no podrán ser modificados. En este caso, si usaras una imagen como un logotipo aparecería en todas las páginas que se basaran en esta plantilla, mientras que todo lo que insertáramos dentro de la zona editable EditRegion1 de nuestro ejemplo podría ser modificado.

Declara las regiones editables Una vez explicado qué es, y como convertir un elemento en una región edi-table, tu siguiente cometido consiste en convertir en regiones editables todas aquellas zonas de la página web de tu revista que deseas actualizar diaria-mente. Las zonas que se han escogido son las siguientes. La fecha, la ima-

gen principal de la modelo, el texto que le acompaña a su izquierda, la

imagen de la portada y por último se ha denominado como región edita-ble el texto que contiene un índice del contenido de la revista. Por lo tanto se quedan como zonas fijas que no se van a poder modificar parte de la fe-cha, el logotipo de la revista, el menú que lógicamente no cambia, la

imagen del anuncio y finalmente la imagen perteneciente al especial de

salud. Recuerda nombrar cada región editable con un nombre diferente, y que éste sea fácil de recordar.


Una vez hayas terminado de definir qué zonas has asignado como regiones edita-bles, tan sólo te resta guardar el documento como plantilla y asignarle un nombre. Dirí-gete al menú Archivo, Guardar co-mo plantilla. Te aparecerá una ventana en el que aparece marcado tu sitio que has creado y un listado de las plantillas existen-tes. En Guardar como asigna a la plan-tilla el nombre de revista diciembre, y pul-sa Guardar. Si observas con detenimien-to comprobarás que en el panel sitio, se te ha creado una nueva carpeta llamada Templates, que contiene la plantilla que acabas de generar. Por el contrario si te sitúas en el panel Activos, y pulsas sobre el icono de plantillas, puedes comprobar la presencia de tu nueva plantilla. Si quieres editar o modificar una plantilla ya creada, el camino más fácil es a través de este panel, como se te comenta a continuación.

Cómo editar una plantilla Para editar una plantilla hay que abrirla en Dreamweaver. Una forma de abrirla es a través del panel Activos, pulsando dos veces sobre ella, o es-tando seleccionada pulsando sobre el botón que tiene un lápiz. Una vez abierta la plantilla es posible establecer sus propiedades a través de Pro-piedades de la página. Como recordarás, para abrir esta ventana

puedes: pulsar la combinación de teclas Ctrl+J, o hacer clic sobre el menú

Modificar y elegir la opción Propiedades de la plantilla. Si pulsas con el botón derecho sobre el documento abierto en Dreamweaver, y en el menú contextual que aparece seleccionar la última opción, que es Propiedades de la página.


Qué es una aplicación web

Una aplicación web es un sitio web que contiene páginas almacenadas en un servidor web con contenido parcialmente o totalmente indeterminado. El contenido final de una página se determina sólo cuando el usuario solicita una página del servidor web. Dado que el contenido final de la página varía de una petición a otra en función de las acciones del usuario, este tipo de página se denomina página dinámica. Las aplicaciones web se crean en respuesta a diversas necesidades o pro-blemas. Éstas pueden tener numerosos usos, tanto para los usuarios como para los desarrolladores. Cómo usar una plantilla

Una vez que has terminado de crear una plantilla, de definir sus regiones editables y de guardarla como plantilla. ¿Cómo puedes usar esa plantilla? Ve al menú Archivo, Nuevo en la ventana que se te abre, aparecen dos

pestañas General y Plantillas. Selecciona la pestaña de plantillas, de-ntro de este apartado podrás escoger entre diferentes modos de plantillas, en


este caso escoge la opción de Sitio “plantillas”, a la derecha te apare-cerá una lista con el nombre de todas las plantillas que hayas creado hasta la fecha, escoge la plantilla que has creado con este artículo revista di-ciembre. Una vez que se ha abierto la plantilla, podrás comprobar que sólo te permite modificar aquellas zonas que habías declarado como regiones editables, mientras que las restantes zonas quedan protegidas ante cualquier cambio. Una vez hechos todos los cambios necesarios para la nueva página web, ba-sad en la plantilla diciembre, tan sólo te resta guardar el documento como lo haces habitualmente, a través del menú Archivo, Guardar. Comprobarás que este nuevo documento no te lo guarda como una nueva plantilla sino como una página HTML.

Usa la biblioteca para organizarte


El sistema de plantillas de Dreamweaver es una gran forma de combatir la duplicación de la programación, pero en muchos casos no es la mejor solu-ción. Por ejemplo, ¿qué pasa si quieres incluir un eslogan de una empresa al pie de cada página y después si hace falta, poder actualizarlo en todo el si-tio? Aquí aparece la biblioteca de Dreamweaver que permite almacenar grupos de bienes, como texto, imágenes o tablas y colocar referencias a ellos en las páginas. Si decides editar el objeto de la biblioteca, lo puedes hacer directamente, y todas las referencias se actualizarán de forma automá-tica.

Si lo deseas puedes comprobarlo de la siguiente manera. Crea una página web nueva. Escoge menú Archivo, Nuevo, Página básica, HTML. Con el documento en blanco, añade al-gunos comentarios genéricos, vuelve a la bi-blioteca y arrastra el copyright dentro de la pá-gina, te aparecerá el texto correspondiente al copyright subrayado de amarillo, y sin posibili-dad de modificarlo. Ahora guarda la página,

con cualquier nombre genérico y a continuación, presiona dos veces sobre el elemento de la biblioteca. Te encontrarás dentro del Editor de biblioteca, y para cerciorarte de que es así, fíjate en el título azul de la ventana como aparece el nombre del ele-mento de la biblioteca con la extensión lbi, es decir, copyright.lbi pre-

cedido del texto Elemento de biblioteca. Edita el texto de alguna manera y guarda los cambios, por ejemplo cambia el año 2005. Aparecerá una ventana. Finalmente en esta ventana te preguntará si quieres actualizar las páginas que hagan referencia al pie, demostrando lo fácil que es usar la biblioteca de Dreamweaver para hacer cambios a lo largo de un sitio.


Crea una revista online con plantillas Configura tu sitio ……………………………………………………... 3 Maqueta tu propia revista online ……………………………………... 6 Configura la tabla con ayuda de las imágenes ……………………. 7 Cómo crear una plantilla ……………………………………………... 8 Convierte tu página en una plantilla ……………………………… 10 Establecer regiones editables en una plantilla …………………….. 11 Declarar las regiones editables ……………………………………. 12 Cómo editar una plantilla …………………………………………. 14 Qué es una aplicación web …………………………………….. 15 Cómo usar una plantilla ………………………………………... 15 Usa la biblioteca para organizarte ……………………………... 16

Documents

Crea Una Revista Online Con Plan Till As Dream Weaver