7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 1/7

 La barra de la aplicación.

Las pestañas de documento.

EL ENTORNO DE DREAMWEAVER

Los elementos básicos de Dreamweaver , la pantalla, las barras, los paneles, etc..., para saberdiferenciar entre cada uno de ellos(llaman, dónde están y para qué sirven). ambién veremoscómo obtener ayuda, por si en al!"n momento no sabemos cómo se!uir traba#ando. $uandocono%camos todo esto estaremos en disposición de empe%ar a crear pá!inas web.

La pantalla inicial

&l arrancar Dreamweaver aparece una pantalla inicial como ésta. &s' conoceremos los nombres delos diferentes elementos y será más fácil entender el resto del curso. uede no coincidireactamente con la que ves en tu ordenador,

LAS BARRAS

La barra la aplicación es una novedad en Dreamweaver $*+. iene sus elementos los men"s (enla ima!en, en la parte inferior), varios botones propios de la aplicación, el conmutador de espaciode traba#o y una ca#a de b"squedas para obtener ayuda on line.

Los botones propios de la aplicación, que aparecen #unto al icono, nos permiten (de derec-a ai%quierda) cambiar entre la vista de diseño o códi!o, acceder a las etensiones que se puedenañadir, o al administrador de sitios.

Los men"s, están a!rupados en cate!or'as.

&l -acer clic en nsertar, por e#emplo, veremos las operaciones relacionadas con los diferenteselementos que se pueden insertar en Dreamweaver.

Dreamweaver $*+ añade una novedad. Deba#o de las pestañas encontramos los arc-ivos a queutili%a nuestra pá!ina, como la -o#a de estilos, arc-ivos /ava*cript, etc... pudiendo acceder a elloscon un clic. 0sto nos a-orrará bastante tiempo.

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 2/7

 La barra de estado.

La barra de herramientas estándar.

1uardar todo, mprimir el códi!o fuente, $ortar, $opiar,Des-acer y 2e-acer.

La barra de herramientas de documento.

La barra de representación de estilos.

0sta barra la encontramos deba#o de la ventana de documento, y nos da información sobre elmismo.

& la i%quierda, encontramos el selector de etiquetas. 3os sirve para seleccionar etiquetascompletas. *i!uiendo -acia la derec-a encontramos las -erramientas de *elección, 4ano (paradespla%arse) y 5oom.

La barra de -erramientas estándar contiene iconos para reali%ar las acciones más -abituales del

men" &rc-ivo y0dición. De i%quierda a derec-a 3uevo arc-ivo, &brir, eplorar con &dobe 6rid!e,1uardar,

La barra de -erramientas de documento contiene iconos que nos permiten cambiar entre las

distintas vistas de edición y la vista en vivo, acceder cómodamente al t'tulo de la pá!ina, oreali%ar las distintas opciones de validación que nos ofrece el pro!rama.

0sta barra, muc-o menos utili%ada, nos permite ver la apariencia de nuestra web en distintosdispositivos, si estamos utili%ando -o#as distintas que dependan del eso.

Confgurar un sitio local

7n sitio web es un con#unto de arc-ivos y carpetas, relacionados entre s', con un diseño similar oun ob#etivo com"n. 0s necesario diseñar y plani8car el sitio web antes de crear las pá!inas que vaa contener.

Los documentos 94L normalmente se crean dentro de dic-a carpeta, mientras que paracontener las imá!enes, las animaciones, arc-ivos de tipos espec'8co, etc., se deben crear nuevascarpetas dentro de ésta, con el ob#etivo de tener una me#or or!ani%ación de los arc-ivos a la -orade traba#ar.

Después se podrán copiar los arc-ivos en un servidor web, en el denominado sitio remoto, lo queequivale a publicar el sitio, de modo que la !ente podrá verlo en nternet.

or tanto, el sitio local y el sitio remoto tienen la misma estructura.

La or!ani%ación de los arc-ivos en un sitio permite administrar y compartir arc-ivos, mantener losv'nculos de forma automática, utili%ar : para car!ar el sitio local en el servidor, etc.

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 3/7

que de8nir o modi8car las caracter'sticas del sitio.

La pá!ina inicial de nuestro sitio debe de tener el nombre inde.-tm o inde.-tml, ya que cuandose intenta acceder a una 72L !enérica, el servidor devuelve la pá!ina con ese nombre.

$rear o editar un sitio web sin coneión a nternet

 ambién podemos acceder desde el icono de acceso rápido de la barra de la aplicación a la opción&dministrar sitios o3uevo sitio...

 anto si se eli!e la opción 3uevo..., como si se eli!e la opción 0ditar..., se mostrará la mismaventana en la

Debe de8nirse el 3ombre del sitio, que "nicamente nos servirá para identi8carlo en la lista desitios. La $arpeta ra'% local, que es en la que seencuentra el sitio dentro del disco duro local. La carpeta puede contener ya arc-ivos o no.0stas dos caracter'sticas son las imprescindibles para de8nir un sitio local. &unque s'destacaremos la opción 7sar v'nculos de distinción entre may"sculas y min"sculas.Después de rellenar los datos pulsamos el botón &ceptar y abrimos el sitio. *i preferimosutili%ar un asistente para crear el sitio web sólo tenemos que seleccionar la pestaña 6ásicas, enve% de la pestaña &van%adas.

 Abrir un sitio

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 4/7

ara abrir un sitio ya de8nido -ay que diri!irse al men" *itio, a la opción &dministrar sitios....seleccionar el sitio de la lista de sitios y pulsar sobre el botón Listo.

;er el sitio

0l panel &rc-ivos (men" ;entana < &rc-ivos o tecla :=) es uno de los paneles más importantes deDreamweaver, ya que nos da acceso a los arc-ivo del sito.

0s posible visuali%ar un sitio en el panel &rc-ivos o en una ventana. ara cambiar de una vista aotra -ay que pulsar sobre el botón que aparece en la parte superior del panel y de la ventana.

0n esta ima!en, se visuali%a el remoto (a la i%quierda) todav'a vac'o, y el sitio local (a la derec-a)con nuestros arc-ivos.

&l modi8car al!"n ob#eto que es referenciado por al!"n otro documento, se muestra una ventanasimilar a ésta, que indica los documentos que -acen referencia a dic-o ob#eto, y que pueden seractuali%ados para que no se produ%can los problemas antes mencionados.

El texto: propiedades y formato

$aracter'sticas del teto

Las caracter'sticas del teto seleccionado pueden ser de8nidas a través del men" :ormato, y através del inspector de propiedades. ;amos a ver las posibilidades que se nos ofrecen a través del

inspector de

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 5/7

ropiedades, que están clasi8cadas en dos cate!or'as 94L y $**.

$omen%amos viendo las propiedades 94L

:ormato

&l 8nal, podremos personali%arlas con $** para que se vean eactamente como queramos.

ermite seleccionar un formato de párrafo ya de8nido para 94L, que puede ser encabe%ado,párrafo o formato predeterminado. Los encabe%ados se utili%an para establecer t'tulos dentro deun documento. 0l formato predeterminado sirve para que el teto apare%ca tal cual -a sido

escrito, por e#emplo, si entre dos palabras se introducen varios espacios solo se considera uno,pero al establecer el formato predeterminado se respetará que -ayan varios espacios en lu!ar desolo uno. 0l teto normal, deber'a ir siempre en párrafos, salvo que esté en otros elementos, comotablas o listas.

Estilo: 

0l botón 6 encierra el teto en una etiqueta , que por defecto se muestra en ne!rita. 0l botón , loencierra entre , que por defecto se ve en cursiva.

Lista: 

0stos botones permiten crear listas con viñetas o listas numeradas. ;eremos qué son las listas enel si!uiente apartado.

Sangría: 

0stos dos botones permiten san!rar el teto y anular la san!r'a. La san!r'a es una especie demar!en que se establece a ambos lados del teto. 0n este caso los botones se re8eren a san!r'a ala i%quierda del teto.

9iperenlaces

ntroducción7n -iperenlace, -iperv'nculo, o v'nculo, no es más que un enlace, que al ser pulsado lleva de unapá!ina o arc-ivo a otra pá!ina o arc-ivo. 0s posible asi!nar un v'nculo a un teto, a una ima!en, oa parte de una ima!en. $uando creemos un enlace, lo que realmente -aremos será crear unaetiqueta que es la que en 94L se encar!a de de8nir los enlaces.

Tipos de reerencia

2eferencia absoluta $onduce al sitio en el que se encuentra el documento utili%ando la rutacompleta del arc-ivo, incluyendo el protocolo -ttp>>.or e#emplo, -ttp>>www.aulaclic.com, o

-ttp>>www.misitio.com>pa!ina>pa!ina?.-tml. 2eferencia relativa al documento (por defecto) La ubicación del arc-ivo enla%ado se toma en

relación con la ubicación de la pá!ina. 0s decir, partimos de la carpeta en la que se encuentra eldocumento.*i queremos enla%ar con una pá!ina o arc-ivo dentro de la misma carpeta, notenemos más que utili%ar su nombre. or e#emplo, pa!ina@.-tm.*i está en una subcarpeta de la

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 6/7

 

pá!ina actual, no tenemos más que indicar el nombre de la carpeta antes del arc-ivo, y separarlospor una barra (>). or e#emplo ima!enes>miima!en.!if.*i queremos referinos a carpetas que estánpor encima del nivel donde nos encontramos deberemos utili%ar ..> or e#emplo, ima!ina queestamos en la si!uiente dirección-ttp>>www.misitio.com>pa!ina>informacion>inde.-tml. 0n estapá!ina queremos mostrar una ima!en que se encuentra en la carpeta-ttp>>www.misitio.com>pa!ina>secciones>seccion?.-tml, superior

Crear enlaces

0s necesario seleccionar el teto o el ob#eto que va a servir de enlace, y se!uidamente establecer

el ;'nculo en el inspector 94L.or e#emplo, aqu' -ay un enlace a www.aulaclic.es, que al ser unarc-ivo eterno es de referencia absoluta, por eso contiene -ttp>>

0s posible crear también v'nculos vac'os, que pueden ser "tiles cuando se utili%ancomportamientos, etc. ara ello es necesario escribir en ;'nculo "nicamente una almo-adilla .

Atra forma de crear un enlace es a través del men" nsertar, opción 9iperv'nculo.

Texto: es el teto que mostrará el enlace. ;'nculo es la pá!ina a la que irá rediri!ida el enlace, sise trata de un enlace eterno deberás escribirla empe%ando siempre por -ttp>>. defecto

Dreamweaver te creará un enlace relativo al documento.estino: la ventana donde se abrirá la pá!ina, este campo se eplica en el si!uiente apartado.Título: se trata de la ayuda contetual del v'nculo, que aparecerá al mantener un instante elcursor sobre el enlace. Tecla de acceso: atributo que facilita la accesibilidad a las pá!inas, -abilita el acceso al enlace mediante lapulsación de la tecla &lt más la tecla de acceso indicada.

!mágenes

ntroducción

Las imá!enes son un aspecto muy importante de la web. Ba sea como complementos a lainformación o parte del diseño, la -acen muc-o más atractiva a o#os del visitante.

!nsertar una imagen

ara insertar una ima!en -ay que diri!irse al men" nsertar, a la opción ma!en.

7/24/2019 Evangelista Ayala .Flor

http://slidepdf.com/reader/full/evangelista-ayala-flor 7/7

0n 2elativa a es posible especi8car si la ima!en será relativa al documento o a la carpeta ra'% delsitio. or e#emplo, ima!ina que dentro de la carpeta ra'% del sitio (la carpeta del sitio) seencuentran la carpeta imá!enes y el documento en el que deseamos insertar la ima!en. Dic-aima!en, llamada aulaclic.#p!, se encuentra dentro de la carpeta imá!enes. 0n el caso de insertarla ima!en como relativa al Documento la ruta ser'a imá!enes>aulaclic.#p!. 4ientras que en elcaso de ser insertada como relativa a la 2a'% del sitio la ruta ser'a >imá!enes>aulaclic.#p!. Atraforma de insertar una ima!en, es arrastrarla directamente desde el panel &rc-ivos sobre eldocumento. 94L desde Dreamweaver

Eti"uetas

0n el primer tema vimos como e#emplo las etiquetas que -ay que incluir en el códi!o 94L de una pá!inapara darle un t'tulo. $onsist'a simplemente en escribir el t'tulo deseado entre las etiquetas. Las etiquetasconsisten en poner un mismo comando entre los s'mbolos C y . La primera etiqueta indica inicio, y lase!unda, que incluye el s'mbolo >, indica 8nal y se suele denominar etiqueta de cierre. Las etiquetasdisponen de atributos que permiten de8nir caracter'sticas del elemento sobre el que act"an, incluyendocierto códi!o dentro de la etiqueta.