2. ¿QUÉ ES DREAMWEAVER?
Dreamweaver 8 es un software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver 8 permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente el código
HTML.
Se puede crear tablas, editar marcos, trabajar con capas, insertar comportamientos
JavaScript, etc., de una forma muy sencilla y visual.
Además incluye un software de cliente FTP completo, permitiendo entre otras cosas trabajar
con mapas visuales de los sitios web, actualizando el sitio web en el servidor sin salir del
programa.
3. CARACTERÍSTICAS…
Integración de RSS: con Dreamweaver 8 podrás integrar entradas RSS provinientes de
otras páginas con sólo introducir la fuente y arrastrar y colocar los campos. De esta
forma podrás introducir datos en formato XML fácil y cómodamente.
Mejoras CSS: esta última versión ha mejorado mucho respecto a la compatibilidad y manejo
de estilos de cascada. De esta forma se ha mejorado el panel de estilos CSS, donde
ahora podrás acceder a la configuración de cada uno de los estilos desde una lista
mucho mejor dotado de una cuadrícula editable desde donde podrás modificar sus
propiedades.
Accesibilidad: Dreamweaver 8 incorpora las normas de accesibilidad de prioridad 2
marcadas por la WCAG/W3C.
Transferencia de archivos: Ahora con Dreamweaver 8 podrás seguir trabajando con tus
archivos mientras el programa se comunica con tu servidor e incluye los archivos
creados o modificados recientemente.
Interfaz mejorada: Los usuarios con problemas visuales podrán acceder auna opción de
Aumento de la pantaña en vista de diseño para analizar o trabajar con difícles
anidamientos de tablas.
Nueva barra de herramientas: Se ha añadido una barra de herramientas a Dreamweaver 8,
podrás encontrarla en la parte lateral izquierda del modo de Código, esta barra hace
mucho más accesible el código al permitirnos la navegación por etiquetas y su
contracción. Una de las nuevas novedades es la posibilidad de añadir comentarios con
un sólo clic.
Compatibilidad: Comentaremos, además, la compatibilidad añadida en esta versión con
PHP5, Coldfusion MX 7 y Video Flash.
4. COMO TENER UNA PAGINA EN INTERNET
Para poder poner una página web en Internet, es necesario contratar a alguna empresa con
servidores que pueda alojarla y hacerla accesible desde Internet las 24 horas del día. El
precio por disponer de espacio propio en el servidor dependerá de la empresa, del
espacio en disco, volumen de transferencia y otras opciones que podamos contratar.
Hay empresas que ofrecen este servicio gratuitamente, pero con ciertas limitaciones: poco
espacio de disco, lentitud y nombre de nuestra página precedido por el de la suya. Hay
que tener también en cuenta que estas empresas deben generar ingresos de alguna
forma, por lo que se dedican a vender espacios publicitarios dentro de nuestras páginas,
publicidad que no podremos negarnos a incluir en ellas.
Por estos motivos, no se recomienda utilizar hospedaje gratuito para la página de una
empresa, aunque sí es aceptable para una página personal.
Dreamweaver te permite crear una copia local (en tu ordenador) del sitio web que luego
querrás que se encuentre a disposición de todo el mundo en Internet.
Por tanto, una vez hayas terminado de diseñarla en modo local sólo tendrás que subirla a tu
servidor manteniendo la estructura del local. Es decir, deberás subir todos los
archivos tal y como aparecen en tu disco duro, respetando el nombre de los
archivos y la organización de las carpetas. Si no lo haces de este modo, tu sitio
experimentará fallos y enlaces que no funcionarán.
5. CREAR O EDITAR UN SITIO WEB
Una vez creadas las carpetas que
formarán un sitio local, ya es
posible definir el sitio en
Dreamweaver.
Para ello hay que dirigirse al
menú Sitio, a la
opción Administrar sitios....
Recuerda que a través del
panel Archivos,
pestaña Archivos, se puede
acceder a cada uno de los sitios
creados y a la
opción Administrar sitio.
En el caso de haber seleccionado la opción Administrar
sitios, aparece una ventana que contiene la lista de
sitios locales definidos con anterioridad.
Por supuesto, pueden existir varios sitios locales en un
mismo ordenador.
Tanto si se elige la opción Nuevo..., como si se elige la
opción Editar..., se mostrará la misma ventana en la
que definir las características del sitio.
6. Las características del
sitio se agrupan en
diferentes categorías
que aparecen en la
parte izquierda.
Para visualizar las
características de
una categoría basta
con seleccionarla de
la lista haciendo clic
en ella.
Debe definirse el Nombre del sitio y la Carpeta raíz local, que es en la que se encuentra el
sitio dentro del disco duro local.
Después, si se desea, a través de la categoría Mapa de diseño del sitio puede definirse la
página principal del sitio, de la que colgarán el resto de documentos HTML dentro del sitio, si
en la carpeta raíz del sitio existe una página con el nombre index.htm, Dreamweaver la
cogerá por defecto.
Estas tres características son las imprescindibles para definir un sitio local.
7. TEXTO
Las características del texto seleccionado pueden ser definidas a través del menú Texto, y a
través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a
través del inspector de propiedades, aunque sean menos que las que se nos ofrecen a
través del menú Texto.
8. LISTAS
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.
Para que un texto que ya ha sido introducido en el documento se convierta en una lista,
simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya
sea a través del inspector de propiedades, o a través del menú Texto.
9. CREAR ENLACES
La forma más sencilla de crear un enlace es
a través del inspector de propiedades.
Para ello es necesario seleccionar el
texto o el objeto que va a servir de
enlace, y seguidamente establecer
el Vínculo en el inspector.
Por ejemplo, aquí hay un enlace
a www.elpais.es, que es de referencia
absoluta, por eso contiene HTTP://
I N S E RTA R I M A G E N
Para insertar una imagen hay que dirigirse al
menú Insertar, a la opción Imagen. Después
de esto, ya es posible seleccionar una
imagen a través de la nueva ventana.
10. I N S E R TA R
Para insertar una tabla hay que dirigirse al
menú Insertar, a la opción Tabla.
En la nueva ventana habrá que especificar el
número de Filas y Columnas que tendrá
la tabla, así como el Ancho de la tabla .
El Ancho puede ser definido como Píxeles o
como Porcentaje.
C S S AVA N Z A D O
En temas anteriores vimos cómo funcionaba el Panel CSS y cómo crear hojas de estilos para poder utilizarlas en tus páginas
web.
En este tema aprenderemos más sobre CSS, pero orientándonos más a qué es CSS y cómo crear estilos CSS para crear
páginas que sigan los fundamentos y reglas marcadas por el W3C (Word Wide Web Consortium).
Esta metodología exige que el archivo HTML solamente muestre datos organizados y estructurados con etiquetas de
marcación HTML, mientras que la parte de formato recaería sobre los estilos CSS única y exclusivamente.
Para poder lograr esto deberemos dominar en profundidad CSS para poder posicionar, modificar o adornar la página de un
modo eficiente.
En este tema aprenderemos controles que nos ayudarán a presentar el texto e imágenes de nuestras páginas de una forma
mucho más limpia y cómoda.
11. XML Y RSS
RSS son archivos que contienen información de una página web con las últimas
actualizaciones que se han hecho en ella. Este tipo de archivos es muy útil
para cualquier sitio de noticias, foros, weblogs o página que emita contenido
de forma continuada.
Para crear archivos RSS utilizamos el lenguaje XML, que es un lenguaje de
etiquetas mucho más flexible que HTML.
Este sistema tiene un objetivo muy sencillo, el de organizar información para su
almacenamiento y distribución. Como puedes ver esta es la mayor diferencia
entre ambos lenguajes, pues HTML está orientado a cómo se debe mostrar
la información y XML a organizarla.
12. AJAX
AJAX es una combinación de diferentes técnicas que nos permite modificar el
contenido de nuestras páginas sin tener que provocar actualizaciones visibles
para el usuario.
Es decir, podremos cambiar la información que mostramos sin tener que hacer una
petición al servidor. Como Flash, Java o ActiveX, AJAX es una tecnología que se
ejecuta en el cliente!
Para incluir comportamientos y características de AJAX en nuestras páginas
deberemos tener conocimientos de JavaScript, XML y DOM (Document Object
Model).
Adobe ha creado Spry, una librería JavaScript mucho más sencilla y centrada en
HTML que sólo te obligará a tener unas pequeñas nociones de JavaScript y XML.
De esta forma utilizar AJAX se hace mucho más simple y asequible.
Podrás incorporar información almacenada en archivos con formato XML y manejarla
dinámicamente sin la necesidad de refrescar la página a cada petición.
13. INCLUIR SPRY
utilizar Spry es muy sencillo, sólo deberás incluir un par de scripts de JavaScript que podrás
descargarte desde la página de Adobe Labs. Desde allí podrás descargar un archivo
.zip, Este archivo contiene algunas demostraciones y la documentación necesaria para
utilizar Spry.
Sólo te interesarán dos archivos que se encuentran en la carpeta includes: SpryData.js y
xpath.js.
Para utilizarlos, simplemente cópialos en tu sitio y escribe estas dos líneas en la cabecera de
la página:
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
Con esto referenciamos a los scripts y los incluimos en nuestra página. A partir de ese
momento estaremos listos para utilizar Spry.
Ten en cuenta que Spry únicamente utiliza JavaScript para su funcionamiento, por lo que las
páginas donde decidas incluir este tipo de comportamientos no tendrán porqué ser
páginas dinámicas (aunque se comporten como si lo fueran).