el entorno de dreamweaver

Upload: grone-jordan-angel-apolinario-campos

Post on 21-Feb-2018

216 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/24/2019 El Entorno de Dreamweaver

    1/9

    La barra de la aplicacin.

    El entorno de Dreamweaver

    Los elementos bsicos de Dreamweaver , la pantalla, las barras, lospaneles, etc..., para saber diferenciar entre cada uno de ellos.Aprenderemos cmo se llaman, dnde estn y para qu sirven.

    La pantalla inicial

    Al arrancar Dreamweaver aparece una pantalla inicial como sta,vamos a ver sus componentes fundamentales. As conoceremos losnombres de los diferentes elementos y ser ms fcil entender elresto del curso.

    Las barras

    La barra la aplicacin es una novedad en Dreamweaver C!. itenemos la ventana ma"imi#ada veremos todos los elementos de labarra ocupando una sola lnea, si no, ocuparn dos lneas, como en laima$en superior.

    Los botones propios de la aplicacin, que aparecen %unto al icono, nospermiten &de derec'a a i#quierda( cambiar entre la vista de dise)o ocdi$o, acceder a las e"tensiones que se pueden a)adir, o aladministrador de sitios, que ya veremos.

    *s 'acia la derec'a observamos el conmutador del espacio detraba%o, como un desple$able. +n espacio de traba%o es la

  • 7/24/2019 El Entorno de Dreamweaver

    2/9

    Las pestaas de documento.

    con$uracin del entorno &paneles visibles y su disposicin( quepodemos $uardar y car$ar. Lo veremos ms adelante.

    Al 'acer clic en -nsertar, por e%emplo, veremos las operacionesrelacionadas con los diferentes elementos que se pueden insertar enDreamweaver.

    Cada arc'ivo que ten$amos abierto, mostrar una pesta)a con sunombre, lo que nos permitir cambiar de uno a otro fcilmente. i%unto al nombre aparece un , indica que ese arc'ivo tiene cambios

    sin $uardar.

    La barra de estado.

    /sta barra la encontramos deba%o de la ventana de documento, y nosda informacin sobre el mismo.

    La barra de herramientas estndar.

    La barra de 'erramientas estndar contiene iconos para reali#ar lasacciones ms 'abituales del men0 Arc'ivo y /dicin. De i#quierda aderec'a1 2uevo arc'ivo, Abrir, e"plorar con Adobe 3rid$e, 4uardar,4uardar todo.

    La barra de herramientas de documento.

    La barra de 'erramientas de documento contiene iconos que nospermiten cambiar entre las distintas vistas de edicin y la vista envivo, acceder cmodamente al ttulo de la p$ina.

  • 7/24/2019 El Entorno de Dreamweaver

    3/9

    La barra de representacin de estilos.

    /sta barra, muc'o menos utili#ada, nos permite ver la apariencia de

    nuestra web en distintos dispositivos, si estamos utili#ando 'o%asdistintas que dependan del eso.

    Confgurar un sitio local

    /n este tema vamos a ver qu es un sitio web, cmo crearlos y$estionarlos, y cmo modicar las propiedades de los documentos,como puede ser el color de fondo.

    +na ve# creadas las carpetas que formarn la estructura del sitiolocal, o por lo menos la carpeta ra#, ya es posible denir el nuevositio.

    5anto si se eli$e la opcin 2uevo..., como si se eli$e la opcin /ditar...,se mostrar la misma ventana en la que denir o modicar lascaractersticas del sitio.

  • 7/24/2019 El Entorno de Dreamweaver

    4/9

    Las opciones del sitio se a$rupan en diferentes cate$oras queaparecen en la parte i#quierda.

    Abrir un sitio

    6ara abrir un sitio ya denido 'ay que diri$irse al men0 itio, a laopcin Administrar sitios.... seleccionar el sitio de la lista de sitios ypulsar sobre el botn Listo.

    5ambin podemos utili#ar el panel Arc'ivos, buscar y seleccionar elsitio a abrir en el men0 desple$able Arc'ivos.

    Ver el sitio

    /l panel Arc'ivos &men0 7entana 8 Arc'ivos o tecla 9:( es uno de lospaneles ms importantes de Dreamweaver, ya que nos da acceso alos arc'ivo del sito.

    /n este caso vemos todos los documentos creados en nuestro sitio

    buscar.'tm, paraplantilla.'tm, platossemana.'tm,postresemana.'tmy las carpetas ima$enes y varios.

  • 7/24/2019 El Entorno de Dreamweaver

    5/9

    Dreamweaver $uarda la cac' de nuestro sitio, cmo se or$ani#an losarc'ivos y se relacionan entre ellos.

    El texto propiedades ! "ormato

    A lo lar$o de este tema vamos a aprender a cambiar las propiedadesdel te"to y a crear estilos C, que permiten asi$nar al te"to clases y

    estilos creados por nosotros mismos, no predenidos.Caractersticas del te"to

    Las caractersticas del te"to seleccionado pueden ser denidas atravs del men0 9ormato, y a travs del inspector de propiedades.

    Comen#amosviendo laspropiedades ;5*L

  • 7/24/2019 El Entorno de Dreamweaver

    6/9

    5odas estas propiedades $eneran etiquetas ;5*L, que tienen un estilopor defecto en el nave$ador. 9ormato1

    /s importante emplear correctamente los encabe#ados, ya que seor$ani#ar me%or el contenido de nuestra web, y es importante decara a buscadores y visitantes.

    Estilo/l botn 3 encierra el te"to en una etiqueta , que por defecto semuestra en ne$rita. /l botn -, lo encierra entre , que por defecto seve en cursiva.

    Lista

    /stos botones permiten crear listas con vi)etas o listas numeradas.7eremos qu son las listas en el si$uiente apartado.

    #angr$a

    /stos dos botones permiten san$rar el te"to y anular la san$ra. Lasan$ra es una especie de mar$en que se establece a ambos ladosdel te"to. /n este caso los botones se reeren a san$ra a la i#quierdadel te"to.

    %iperenlaces

    7amos a ver qu son los 'iperenlaces, para qu sirven y cmocrearlos, ya que son un elemento esencial para cualquier p$ina web.

    &ntroduccin

    +n 'iperenlace, 'ipervnculo, o vnculo, no es ms que un enlace, queal ser pulsado lleva de una p$ina o arc'ivo a otra p$ina oarc'ivo./s posible asi$nar un vnculo a un te"to, a una ima$en, o aparte de una ima$en.Cuando creemos un enlace, lo que realmente'aremos ser crear una etiqueta que es la que en ;5*L se encar$ade denir los enlaces. /sto podrs observarlo en la barra de estado1

    'ipos de re"erencia

  • 7/24/2019 El Entorno de Dreamweaver

    7/9

    /"isten diferentes clases de rutas de acceso a la 'ora de denir losvnculos. /stas referencias no se limitan a los enlaces, se comportarni$ual cuando indiquemos la ubicacin de una ima$en, de un arc'ivo9las', de la 'o%a de estilo, etc. .'tml.La referencia absoluta esindependiente de la ubicacin de la p$ina que contiene el enlace, yser vlida siempre que no cambie la ubicacin del arc'ivo enla#ado./s la opcin obli$atoria si pretendemos enla#ar a arc'ivos fuera denuestro sitio &enlaces e"ternos(.

  • 7/24/2019 El Entorno de Dreamweaver

    8/9

    dentro del sitio. 6or defecto Dreamweaver te crear un enlace relativoal documento.

    Destino1 la ventana donde se abrir la p$ina, este campo se e"plicaen el si$uiente apartado.

    5tulo1 se trata de la ayuda conte"tual del vnculo, que aparecer almantener un instante el cursor sobre el enlace.

    5ecla de acceso1 atributo que facilita la accesibilidad a las p$inas,'abilita el acceso al enlace mediante la pulsacin de la tecla Alt msla tecla de acceso indicada.

    ndice de tabulador1 Como 'abrs podido observar puedes saltar atravs de los enlaces pulsando la tecla 5abulador. /n este campopodrs establecer un ndice indicando la prioridad del enlace y ascon$urar el modo en el que actuar el 5abulador es sus diferentes

    saltos. 6or defecto, se tabularn por orden de aparicin

    &mgenes

    /n este tema vamos a ver cmo insertar im$enes en un documento.5ambin veremos cmo crear al$unas im$enes especiales, como esel caso de los

  • 7/24/2019 El Entorno de Dreamweaver

    9/9

    /n