dreamweaver

13

Upload: angelica-guerrero

Post on 21-Jul-2015

95 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Dreamweaver
Page 2: Dreamweaver

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

Page 3: Dreamweaver

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.

Page 4: Dreamweaver

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.

Page 5: Dreamweaver

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.

Page 6: Dreamweaver

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.

Page 7: Dreamweaver

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.

Page 8: Dreamweaver

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.

Page 9: Dreamweaver

C R E A R E N L A C E S

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 R T A 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.

Page 10: Dreamweaver

I N S E R T A 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 A V A 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.

Page 11: Dreamweaver

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.

Page 12: Dreamweaver

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 ObjectModel).

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.

Page 13: Dreamweaver

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