Dreamweaver cs5 naty

13. Otros elementos
14. Capas
1.Conceptos básicos de Dreamweaver CS5 15. Comportamientos
2. El entorno de Dreamweaver CS5 16. Comportamientos avanzados
3. Configurar un sitio local 17. Estilos CSS Avanzados
4. El texto: propiedades y formato 18. Diseño de página. Maquetación
5. Hiperenlaces web
6. Imágenes 19. Sitios remotos
7. Tablas 20. Servidor de Pruebas
8. Marcos 21. Cómo crear un Blog
9. Formularios 22. XML y RSS
10. Multimedia 23. Acceso a datos con Spry
11. Las plantillas 24. AJAX y Spry Framework
12. HTML desde Dreamweaver 25. Spry y Formularios
26. Controles Spry Avanzados

 Dreamweaver CS5 es un
software fácil de usar que
permite crear páginas web
profesionales. Las funciones
de edición visual de
Dreamweaver CS5 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.

 Un sistema de gestión de
contenidos (en inglés Content
Management System,
abreviado CMS) es in interfaz o
programa que nos permite
gestionar el contenido de un
sitio web. Cada vez son más
usados, y ahora Dreamweaver
integra con los principales,
permitiéndos crear nuestras
páginas con la estructura
adecuada.

 Ahora resulta más sencillo
configurar nuestro sitio local
y remoto. Ya que se han
simplificado las opciones
esenciales, y distinguido más
las opciones avanzadas y
poco importantes.
 Este servicio es fácilmente
accesible desde
Dreamweaver, pero
realmente cualquiera puede
usarlo desde su página web.

 Ahora resulta más
sencillo configurar
nuestro sitio local y
remoto. Ya que se
han simplificado las
opciones esenciales,
y distinguido más las
opciones avanzadas
y poco importantes.

 Ahora las sugerencias de código
incluyen nuestras clases
personalizadas, y los comandos y
funciones propios de los distintos CMS
soportados.

 Al arrancar Dreamweaver aparece una pantalla
inicial como ésta, vamos a ver sus componentes
fundamentales. Así conoceremos los nombres de
los diferentes elementos y será más fácil entender
el resto del curso. La pantalla que se muestra a
continuación (y en general todas las de este curso)
puede no coincidir exactamente con la que ves en
tu ordenador, ya que cada usuario puede decidir
qué elementos quiere que se vean en cada
momento y dónde, como veremos más adelante.

 Un sitio web es un conjunto de archivos y carpetas,
relacionados entre sí, con un diseño similar o un
objetivo común. Es necesario diseñar y planificar el
sitio web antes de crear las páginas que va a
contener.
 La forma habitual de crear un sitio consiste en crear
una carpeta en el disco local. Los documentos HTML
normalmente se crean dentro de dicha carpeta,
mientras que para contener las imágenes, las
animaciones, archivos de tipos específico, etc., se
deben crear nuevas carpetas dentro de ésta, con el
objetivo de tener una mejor organización de los
archivos a la hora de trabajar. Esto es lo que se
conoce como sitio local.

 Después se podrán copiar los archivos en un
servidor web, en el denominado sitio remoto, lo
que equivale a publicar el sitio, de modo que la
gente podrá verlo en Internet.
 Por tanto, el sitio local y el sitio remoto tienen la
misma estructura. El sitio local es la copia del sitio
con la que trabajaremos, y los cambios los
actualizaremos en el sitio remoto.
 La organización de los archivos en un sitio permite
administrar y compartir archivos, mantener los
vínculos de forma automática, utilizarFTP para
cargar el sitio local en el servidor, etc.
 La página inicial de nuestro sitio debe de tener el
nombre index.htm o index.html, ya que cuando
se intenta acceder a una URL genérica, el servidor
devuelve la página con ese nombre.

 Las características del texto
seleccionado pueden ser definidas a través
del menú Formato, y a través del inspector de
propiedades. Vamos a ver las posibilidades
que se nos ofrecen a través del inspector de
propiedades, que están clasificadas en dos
categorías HTML y CSS.

 Todas estas propiedades generan etiquetas
HTML, que tienen un estilo por defecto en el
navegador. Pero al final, podremos
personalizarlas con CSS para que se vean
exactamente como queramos.

 Permite seleccionar un
formato de párrafo ya
definido para HTML, que
puede ser encabezado,
párrafo o formato
predeterminado. Los
encabezados se utilizan
para establecer títulos
dentro de un
documento. El formato
predeterminado sirve
para que el texto
aparezca tal cual ha
sido escrito

 El botón B encierra el texto en una
etiqueta <strong></strong>, que por defecto se
muestra en negrita. El botón I, lo encierra
entre<em></em>, que por defecto se ve en cursiva.
 Estas son las etiquetas de resaltado más habituales,
pero existen otras que encontramos a través del
menú Texto. Por ejemplo, subrayar el texto. Esta
opción no aparece en el panel de Propiedades ya
que de normal no suele utilizarse, debido a que los
vínculos aparecen subrayados y el subrayar texto
normal podría hacer que el usuario pensara que se
trata de un vínculo. Además, emplea etiquetas que
están en desuso.

 Estos botones permiten crear listas con viñetas
o listas numeradas.

 Estos dos botones permiten sangrar el texto y anular la
sangría. La sangría es una especie de margen que se
establece a ambos lados del texto. En este caso los
botones se refieren a sangría a la izquierda del texto.
 Si lo aplicamos sobre texto normal, lo encerrará en una
etiqueta <blockquote></blockquote>, que por
defecto se muestra indentada hacia la derecha. En
cambio, al aplicarlo sobre una lista, creará una sublista
dentro de ésta.

 Un hiperenlace, hipervínculo, o vínculo, no es
más que un enlace, que al ser pulsado lleva de
una página o archivo a otra página o archivo.
 Es posible asignar un vínculo a un texto, a una
imagen, o a parte de una imagen.
 Cuando creemos un enlace, lo que realmente
haremos será crear una etiqueta <a></a> que
es la que en HTML se encarga de definir los
enlaces. Esto podrás observarlo en la barra de
estado:

 Las imágenes son un aspecto
muy importante de la web. Ya
sea como complementos a la
información o parte del diseño, la
hacen mucho más atractiva a
ojos del visitante. No obstante, no
conviene abusar, ya que
aumentarán mucho el tamaño
final de la web.
 Existen una serie de formatos de
imagen más recomendables que
otros para ser introducidos en una
página web.

 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.
Cuando te
acostumbres, te será
más cómodo
acceder con la
combinación de
teclas Ctrl + Alt + I.

 En Relativa a es posible especificar si la imagen
será relativa al documento o a la carpeta raíz
del sitio. Es preferible que sea relativa
alDocumento, ya que si cambiamos la página
de carpeta, lo habitual es cambiar también sus
imágenes.
 Lo mismo ocurre cuando se selecciona un
documento para crear un vínculo.
 La ruta en la que se encuentra la imagen
aparecerá representada de una u otra forma
en el campo URL de la ventana y en el
campoOrigen del inspector de propiedades,
dependiendo de si ha sido insertada como
relativa a la carpeta raíz del sitio o relativa al
documento.

 Todos los objetos se alinean
por defecto a la izquierda
de las páginas web, pero
gracias a las tablas es
posible distribuir el texto en
columnas, colocar
imágenes al lado de un
bloque de texto, y otra serie
de cosas que sin las tablas
serían imposibles de realizar.
 La finalidad de las tablas es
presentar una serie de
datos de forma clara y
organizada, dividiéndolos
en filas y columnas.

 En la nueva ventana habrá que especificar el número
de Filas yColumnas que tendrá la tabla, así como el Ancho
de la tabla.
 El Ancho puede ser definido como Píxeles o comoPorcentaje.
La diferencia de uno y otro es que el ancho enPíxeles es
siempre el mismo, independientemente del tamaño de la
ventana del navegador en la que se visualice la página, en
cambio, el ancho en Porcentaje indica el porcentaje de la
página o del elemento contenedor) y se ajustará al tamaño
de la ventana del navegador, esto permite que los usuarios
que tengan pantallas grandes, aprovechen todo el ancho de
pantalla.
 Grosor del Borde indica el grosor del borde de la tabla en
píxeles, por defecto se le asigna uno (1). Si lo ponemos a 0 o
en blanco, la tabla no mostrará borde.

 Relleno de celda (cellpadding) indica la
distancia entre el contenido de las celdas y los
bordes de éstas.
 Espacio entre celdas (cellspacing) indica la
distancia entre las celdas de la tabla.

 Los marcos o frames sirven para distribuir mejor los datos
de las páginas, ya que permiten mantener fijas algunas
partes, como pueden ser el logotipo y la barra de
navegación, mientras que otras sí pueden cambiar.
Además de mejorar la funcionalidad, pueden mejorar
también la apariencia.
 Cada uno de los marcos de una página, contiene un
documento HTML individual. Por ejemplo, en la siguiente
imagen puedes ver una página con dos marcos. El
marco izquierdo contiene el documento menu.htm y el
derecho el documento quienes.htm. Para poder
visualizar la página de este modo, hemos tenido que
abrir el documento index.htm, que es la página que
contiene los marcos agrupados

 Los formularios se utilizan para recoger datos de
los usuarios. Nos pueden servir para realizar un
pedido en una tienda virtual, crear una
encuesta, conocer las opiniones de los usuarios,
recibir preguntas, etc.
 Una vez el usuario rellena los datos y pulsa el
botón para enviar el formulario se arrancará un
programa que recibirá los datos y hará el
tratamiento correspondiente.

 Las películas Flash son animaciones, cuyo archivo
tiene la extensión SWF. Es frecuente verlas en las
páginas iniciales de los sitios web, a modo de
presentación hacia los usuarios, como banners
publicitarios, como botones... Flash es el elemento
multimedia más empleado en las páginas web.
 Estas películas pueden crearse mediante el
programa Flash también de Adobe. Para poder ser
visualizado en el navegador, y necesitan que el
usuario tenga instalado el plug-in de Flash Player.
Su instalación es muy sencilla y normalmente ya
viene con el navegador.

 Las plantillas 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 modificadas.
 No es posible modificar las propiedades de una página
que está basada en una plantilla, a excepción del
título. Cuando se desea que existan páginas con, por
ejemplo, diferente color de fondo, es necesario crear
plantillas diferentes con los distintos colores, y basar las
páginas en una u otra plantilla, según el color de fondo
que se desee para cada una.
 Cuando se modifica el diseño de una plantilla, se
pueden actualizar todas las páginas basadas en ella.
Esto nos puede ahorrar mucho trabajo.
 Las plantillas son archivos con la extensión DWT que se
guardan en el sitio web, dentro de una carpeta
llamada Templates.

 el lenguaje HTML está basado en etiquetas que marcan el
inicio y fin de cada elemento de la página Web.
 En el primer tema vimos como ejemplo las etiquetas que hay
que incluir en el código HTML de una página para darle un
título. Consistía simplemente en escribir el título deseado entre
las etiquetas <title> y </title>.
 Las etiquetas consisten en poner un mismo comando entre
los símbolos < y >. La primera etiqueta indica inicio, y la
segunda, que incluye el símbolo /, indica final y se suele
denominar etiqueta de cierre.
 Las etiquetas disponen de atributos que permiten definir
características del elemento sobre el que actúan, incluyendo
cierto código dentro de la etiqueta.
 Por ejemplo, un párrafo se inserta entre las
etiquetas <p> y </p>, pero es posible cambiar sus
características predeterminadas, como puede ser asignarle
una clase de estilo CSS. Para ello, a la etiqueta de apertura
anterior habría que añadir el atributo y su valor, quedando<p
class="miclase"> y </p>.

 Las marquesinas son texto, imágenes, o una mezcla
entre texto e imágenes, que pueden desplazarse
de un lado a otro de la ventana en forma de línea
 Para crear una marquesina hay que insertar las
etiquetas <marquee> y </marquee>. Entre dichas
etiquetas han de introducirse los elementos que se
desea que aparezcan en la marquesina.
 También es posible especificar algunas
características de la marquesina. La marquesina,
por defecto, se desplaza de derecha a izquierda
indefinidamente, pero si lo deseas puedes hacer
que estas propiedades varíen. Por ejemplo, si
pones <marquee behavior="slide">, la marquesina
hará el desplazamiento una sola vez y se detendrá.

 Las capas, también llamadas layers
 Las capas no son más o divisiones, se crean con la
que unos recuadros, etiqueta <div></div>.
elementos de bloque,  Al ser elementos contenedores, son
destinados a contener y muy útiles para organizar nuestros
agrupar otros elementos, elementos. Si esto lo combinamos
igual que los párrafos con el posicionamiento absoluto,
son elementos de una propiedad CSS que nos permite
bloque destinados a colocar los elementos donde
contener texto. queramos en nuestra página,
obtenemos los elementos ideales
para maquetar nuestra página, es
decir, distribuir el contenido en
bloques.

 Los comportamientos son acciones
que suceden cuando los usuarios
realizan algún evento sobre un
objeto, como puede ser mover el
ratón sobre una imagen, pulsar
sobre un texto, hacer doble clic
sobre un mapa de imagen, etc.
 Los comportamientos no existen
como código HTML, se programan
en JavaScript. Dreamweaver
permite insertarlos a través del
panelComportamientos, por lo que
no es necesario escribir ninguna
línea de código JavaScript para
programarlos.

 Este comportamiento es útil para poder enviar
mensajes al usuario. Ten en cuenta que no
deberás abusar de ellos, pues a la larga pueden
resultar un poco incómodos, utilízalos con un
objetivo concreto y no porque quieras atraer la
atención del usuario. Mientras se muestre el
mensaje, la ventana del navegador quedará
bloqueada.

 Para crear un mensaje emergente deberás
seleccionar el elemento al cual irá asociado el
mensaje, en el ejemplo es un enlace de texto.
 Una vez seleccionado ves al
panel Comportamientos (Mayus + F4) pulsa el
botón y selecciona la opción Mensaje emergente.

 Hasta ahora, si has entrado un poco en el
código de las páginas, habrás visto
etiquetas que introducían estilos CSS en
ellas.
 Por defecto, cuando creábamos una <
Nueva regla de estilo > desde el inspector
de propiedades, se definía la regla
únicamente para la página actual. Esto
generaba un código similar al siguiente en
el <head> de la página (por supuesto,
cambiando las propiedades según el caso).

 una página puede contener todos estos tipos de estilos
CSS, o incluso tener varias hojas de estilo asociadas.
Entonces ¿cuándo empleamos cada uno?
 Emplearemos hojas de estilos para todos los estilos
comunes a las páginas del sitio.
 Emplearemos estilos incrustados en la página para los
estilos que se emplean en únicamente en esa página, y
que ya no serían útiles si borrásemos la página. Por
ejemplo, para definir el la apariencia de una tabla en
concreto.
 Emplearemos estilos en línea cuando el estilo solo tenga
sentido por estar en esa posición en concreto, y no se
suela repetir en el sitio. Por ejemplo, si queremos dar más
margen a un párrafo por tener una imagen en
concreto, pero que no tendría sentido si cambiásemos
la imagen.
 La organización de los estilos debes decidirla tú. Pero
recuerda que cuanto menos código repitas en tus
páginas, más fácil será luego de modificar o exportar.

 La maquetación es la distribución de los
elementos en nuestra página. Piensa en una
página web cualquiera. Seguro que distingues
algunos elementos claramente diferenciados,
como un encabezado, columnas, y un pie de
página.

 Por lo general, la maquetación se realiza sobre elementos en
bloque. Normalmente divisiones, pero también lo podemos
hacer con párrafos, listas, o con el propio body. Por defecto los
elementos de bloque ocupan todo el ancho del elemento que
lo contiene, y su alto se ajusta al contenido.
 Cualquier elemento HTML de bloque, tiene dos atributos que
pueden definir su tamaño: ancho (width) y alto (height).
 Los valores para estas medidas, pueden ser expresados en las
medidas habituales:
 Tamaños absolutos, utilizando px, cm, etc...
 Tamaños relativos al elemento que lo contiene, utilizando
porcentajes (%).
 Tamaños relativos a la fuente, utilizando em.
 El valor auto es el valor por defecto. Por ejemplo, un párrafo, por
defecto, tienen un ancho del 100% y un alto ajustado al
contenido.

 Definir un sitio remoto significa establecer una
configuración de modo que Dreamweaver sea
capaz de comunicarse directamente con un
servidor en Internet (por eso se llama remoto) y así
poder trabajar a la vez con tus archivos en el sitio
local, es decir, la copia que tienes en tu ordenador,
y en el sitio remoto, colgados en el servidor, en
Internet.
 El modo en el que veremos que el programa se
comunica con tu servidor será FTP, ya que es
prácticamente el más utilizado y muy pocos utilizan
otras alternativas.

 PHP es un lenguaje de  Como decíamos PHP es un
programación. Pero no lenguaje de programación,
te preocupes, así que deberemos
Dreamweaver contiene aprender antes cómo
las suficientes funciona.
herramientas como para  Hasta ahora nosotros
manejarte sencillamente creábamos páginas con
sin que tengas que extensión HTML, este tipo de
saber ni una línea de archivos, cuando son
código. requeridos por un
navegador se descargan
automáticamente del
servidor y se visualizan tal y
como son en el cliente (el
ordenador del usuario que
está viendo la página).

 PHP actúa de forma diferente.
 Un archivo con extensión PHP, cuando es
requerido por el cliente se ejecuta en el servidor y
genera una página web con código HTML, y
es este código HTML el que se envía y se visualiza
en el navegador del usuario.
 De esta forma, el contenido del archivo PHP es
completamente transparente al usuario (además
de serle imposible ver el contenido del archivo) y
sólo podrá ver el resultado de la petición que ha
creado (es decir, lo que genera el archivo PHP
según convenga en cada momento).

 Un blog es una página web donde se introduce
contenido periódicamente sobre un tema en
particular.
 Su contenido suele organizarse en entradas que se
van añadiendo con una asiduidad relativa.
 Normalmente, estas entradas pueden comentarse. Es
decir, cualquier usuario (o a veces solamente los
registrados) pueden dejar su opinión sobre la entrada
o sobre el blog en general.
 Para facilitar la navegación por la página estas
entradas suelen estar organizadas
por temas o categorías, de modo que si te interesa
poder leer todas las entradas relacionadas con un
tema en concreto te sea mucho más sencillo.


 Todo blog deberá tener, del mismo modo,
una parte privada desde donde el usuario
dueño de la bitácora
pueda administrar y gestionarlos contenidos
del blog.
 Desde el panel de administración, que debe
estar protegido para que sólo tengan acceso
aquellas personas con privilegios suficientes,
podremos añadir, modificar o eliminar entrad
as, comentarios y categorías.

 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. De hecho, la última versión de HTML es
XHTML, que no es más que HTML pero siguiendo
fielmente la estructura XML (etiquetas bien
anidadas, cerradas, en minúsculas, atributos
siempre entre comillas dobles...).

 Spry se compone de
un conjunto de
archivos codificados
en JavaScript que se
añadirán a tu
proyecto desde el
momento en que
empieces a
utilizarlos.

 Por un lado JavaScript (comportamientos). Se ejecuta en el
lado del cliente, es decir, en el propio navegador de quien
visita la web, sin tener que recargar la página. Esto dota de
dinamismo a la página, ya que empleando conocimientos más
avanzados, podemos crear HTML, cambiar CSS... pero requiere
que todo esto haya sido enviado al cliente al cargar la página.
 Por otro lado, hemos visto PHP. Se envía una petición
al servidor, el cual genera la página, muchas veces
conectándose a la base de datos. Cuando la página está
creada en el servidor, se devuelve al usuario, quien la ve en el
navegador. Si el usuario quiere cambiar el contenido, por
ejemplo al paginar en un listado, ha de volver a enviar la
página, que se tiene que volver a generar y ser devuelta al
usuario.
 Combinando los scripts ejecutados en el cliente y en el servidor
obtenemos AJAX. Lo que conseguimos con esto es una
comunicación asíncrona, pidiendo al servidor sólo los datos
que el usuario necesita, sin recargar la página, y usando
JavaScript para actualizar solo las regiones afectadas.

 Para incluir comportamientos y características de AJAX en
nuestras páginas deberemos tener conocimientos de
JavaScript, XML y DOM (Document Object Model). Con Spry,
utilizar AJAX se hace mucho más simple y asequible.
 Como hemos visto en la unidad anterior es posible 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.
 Ahora veremos un modo avanzado de utilizar estas
funcionalidades desde una perspectiva menos cómoda
pero mucho más potente, pues seremos capaces de
manejar el contenido dinámico de una forma total y siempre
utilizando la librería Spry que nos proporciona Adobe.

 Spry es una tecnología desarrollada y propietaria de Adobe,
y es la que emplea Dreamweaver. Existen otras opciones,
como jQuery, muy empleada en la web.


 veremos qué puede hacer Dreamweaver por
nuestros formularios. Encontrarás las opciones
que utilizaremos bajo el menúInsertar → Spry o en
la barra Insertar, pestaña Spry.

 Como es habitual
con Spry,
Dreamweaver irá
incluyendo archivos
JavaScript a nuestro
sitio, en la
carpeta SpryAssets,
uno para cada tipo
de control.

 Estos controles harán
que tus páginas se
muestren de una
forma más profesional,
vistosa y ordenada.
 Podrás encontrarlos
bajo el menú Insertar
→ Spry, al final del
desplegable o desde
el panel Insertar,
seleccionando Spry:

 Estos controles son
completamente
configurables y además
también aceptan
modificaciones en su estilo
utilizando CSS. De hecho el
estilo inicial que muestran
es muy básico, por lo que
no deberías tener
problemas para
modificarlo.
 Y como siempre,
Dreamweaver irá
añadiendo las librerías que
necesite para crear estos
comportamientos a la
carpeta SpryAssets.

 Informacion tomada
de la pagina :
 http://www.aulaclic.
es/dreamweaver-
cs5/index.htm

Dreamweaver cs5 naty

Más contenido relacionado

La actualidad más candente (18)

Destacado (20)

Similar a Dreamweaver cs5 naty (20)

Dreamweaver cs5 naty