Dream Weaver Mx - Unicamp

Dreamweaver MX – Básico

Licenciamento de Uso Este documento é propriedade intelectual © 2002 do Centro de Computação da Unicamp e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo Centro de Computação da Unicamp podem ser reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou eletrônico, desde que os termos desta licença sejam obedecidos, e que esta licença ou referência a ela seja exibida na reprodução. 2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas externas, sua origem e atribuições de direito autoral (o Centro de Computação da Unicamp e seu(s) autor(es)). 3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer informação contida neste documento devem ser regidas por estas mesmas normas de distribuição e direitos autorais. Ou seja, não é permitido produzir um trabalho derivado desta obra e impor restrições à sua distribuição. O Centro de Computação da Unicamp deve obrigatoriamente ser notificado ([email protected]) de tais trabalhos com vista ao aperfeiçoamento e incorporação de melhorias aos originais. Adicionalmente, devem ser observadas as seguintes restrições: • A versão modificada deve ser identificada como tal • O responsável pelas modificações deve ser identificado e as modificações datadas • Reconhecimento da fonte original do documento • A localização do documento original deve ser citada • Versões modificadas não contam com o endosso dos autores originais a menos que autorização para tal seja fornecida por escrito. A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de qualquer tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O Centro de Computação da Unicamp não assume qualquer responsabilidade sobre o uso das informações contidas neste material.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

2

Dreamweaver MX – Básico

Í n dice

I nter net

4

HT ML – Pr incipais T ags

6

Dicas par a a cons tr ução de um s ite

10

Vis ão ger al do Dr eamweaver MX

15

Pr oj eto – S ite B ioder m

18

Vínculos (Links )

19

Cr iando um novo s ite

20

Cr iando uma nova página em br anco

23

T abelas

25

Mapeamento de imagens

28

Modelos

30

Cr iando páginas a par tir de modelos

31

Cr iando a página inicial do s ite

32

Cr iando a página empr es a

34

Es tilos HT ML

36

Cr iando a página pr odutos

38

Es tilos CS S

41

Cr iando a página atendimento

44

For mulár io

45

Cr iando a página dicas _ belez a

48

Âncor as

49

Última atualiz ação: 12/08/2003

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

3

Dreamweaver MX – Básico

I n t er n et A I nter net não não s e cons titui apenas numa r ede de computador es , mas numa r ede de r edes , conectadas umas as outr as . Um computador ligado a I nter net pode compar tilhar r ecur s os e infor mações a nível mundial. Ex is tem vár ios s er viços que utiliz am es s a es tr utur a e um dos mais conhecidos é a Wor ld Wide Web, ou s imples mente Web. É for mada por milhões de lugar es chamados s ites , que s ão localiz ados atr avés de s eus ender eços . Es s e s is tema de ender eços é também chamado de URL (Unifor m Res our ce Locator , localiz ador unifor me de r ecur s os ). A Web r evolucionou a I nter net por r eunir inter face gr áfica, r ecur s os de multimídia e hiper tex to. Pos s ibilitou a cons tr ução de páginas gr áficas , que podem conter fotos , animações , tr echos de vídeo e s ons . As páginas Web s ão es cr itas na linguagem H T ML (Hyper tex Mar kup Language), ou s ej a, Linguagem de Mar cação de Hiper tex to. Nas páginas , a infor mação es tá or ganiz ada de for ma hiper tex tual, ou s ej a, as páginas es tão ligadas entr e s i, atr avés de links . I s s o per mite uma leitur a não linear do tex to. H iper t ex t o é o conceito que pos s ibilita a " navegação" entr e s egmentos de tex to independentemente de s ua s eqüência linear ou de s ua localiz ação, o leitor s alta de uma infor mação a outr a, não neces s ar iamente numa or dem s eqüencial. Um s ite é um conj unto de páginas Web es tr utur adas s obr e um deter minado conteúdo, es te conteúdo pode conter : infor mações , tex tos , imagens , ilus tr ações , pr ogr amas , tex tos his tór icos , diagr amas , j ogos , etc. A página de entr ada de um s ite é chamada de " Home Page" . O N avegador Par a que o conteúdo de um documento HT ML pos s a s er for matado e ex ibido devemos us ar um pr ogr ama chamado br ows er , ou navegador . Os mais conhecidos s ão o I nter net Ex plor er e Nets cape Navigator . O navegador funciona independentemente de s e es tar conectado a I nter net. A melhor for ma de s e tr abalhar des envolvendo uma página HT ML é off- line, des conectado. Pr imeir o você cr ia as páginas em s eu computador e as tes ta por meio do navegador . Depois , deve colocá- las em um s er vidor Web par a que outr as pes s oas também pos s am vis ualiz á- las . S er vidor W eb S ão computador es equipados com s oftwar e que per mite " s er vir " a uma r ede de computador es . Quanto mais potente o s er vidor maior e melhor poder á s er a r ede por ele atendida. S ão máquinas de alta capacidade, com gr ande poder de pr oces s amento e conex ões veloz es . Podemos us ar como ex emplo a máquina Obelix , que atende a Unicamp.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

4

Dreamweaver MX – Básico

F er r am en t as n eces s ár ias par a a cr iação de págin as É r ecomendável pos s uir alguns conhecimentos bás icos da linguagem HT ML, embor a atualmente s ej a pos s ível cr iar um s ite utiliz ando unicamente os editor es de páginas , que ger am todo o código. Ex is tem vár ios s oftwar es par a edição de páginas html no mer cado, os mais conhecidos s ão: Nets cape Compos er (gr atuito), Fr ontPage da Micr os oft, Dr eamweaver da Macr omedia e GoLive da Adobe. É pr ecis o também ter um navegador ins talado, par a poder mos tes tar as páginas .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

5

Dreamweaver MX – Básico

H T ML - P r in cipais T ags Como j á dis s emos , o Dr eamweaver MX dis ponibiliz a vár ias fer r amentas que facilitam a confecção de páginas Web, no entanto, é des ej ável que s e conheça pelo menos as tags bás icas da linguagem HT ML par a o cas o de ter que faz er uma manutenção no s ite. A s eguir , as tags bás icas da linguagem html: Qu ebr as de L in h a < P> < /P> Ex emplo:

Res ultado:

< P> Pr imeir a linha.< /P> < P> S egunda linha.< /P>

Pr imeir a linha. S egunda linha.

< BR> Ex emplo:

Res ultado:

Pr imeir a linha.< B R> S egunda linha.< B R>

Pr imeir a linha. S egunda linha.

t ex t o em n egr it o < B> < /B> Ex emplo:

Res ultado:

Cur s o de < B > Confecção de Web - bás ico< /B >

Cur s o de Cof ecção de W eb - bás ico

t ex t o em it álico Ex emplo:

Res ultado:

Centr o de Computação - < I > CCUEC< /I >

Centr o de Computação - CCUEC

cen t r aliz ar t ex t o < cen t er > < / cen t er >

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

6

Dreamweaver MX – Básico

t ex t o à dir eit a < r igh t > < / r igh t > t ex t o à es qu er da < lef t > < / lef t > Ex emplo:

Res ultado:

< center > Centr o de Computação< /center >

Centr o de Computação

< r ight> Centr o de Computação< /r ight> < left> Centr o de Computação< /left>

Centr o de Computação Centr o de Computação

F or m at ação do t ex t o Ex emplo:

Res ultado:

< FONT FACE= Ar ial color = r ed s iz e= 2> Centr o Centro de Computação de Computação< /FONT >

L is t as N ão N u m er adas Ex emplo:

Res ultado: • •

< UL> < LI > UNI CAMP < LI > UNES P < /UL>

UNI CAMP UNES P

L is t as N u m er adas Ex emplo:

Res ultado:

1. UNI CAMP 2. UNES P

< OL> < LI > UNI CAMP < LI > UNES P < /OL>

B ar r as h or iz on t ais < H R > = mar cação de linha S I Z E = es pes s ur a

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

7

Dreamweaver MX – Básico

W idt h = lar gur a Ex emplo:

Res ultado:

< HR S I Z E= 2 width= 100% >

I n s er ir im agen s Ex emplo:

Res ultado:

< img s r c= " ex emplos /imagem.j pg>

L in ks < A> < / A> H R E F = r efer ência a página a s er aber ta T AR GE T = _ B L AN K : abr e a página em uma nova j anela do br ows er Chamando uma página: (ar quivos com ex tens ão .htm ou .html) Ex emplo:

Res ultado:

< A HREF= " /ex emplos /Pagina.html" T ARGET = _ B LANK > Clique aqui! ! ! < /A>

Clique aqui! ! !

E x ibin do u m a im agem : ( ar qu ivos com ex t en s ão .gif ou .j pg) Ex emplo:

Res ultado:

< A HREF= " /ex emplos /I magem.j pg" T ARGET = _ B LANK > Clique aqui! ! ! < /A>

Clique aqui! ! !

F az en do dow n load de u m ar qu ivo: ( ar qu ivos com ex t en s ão .D OC, .T XT , .Z I P ) Ex emplo:

Res ultado:

< A HREF= " /ex emplos /tex to.tx t" T ARGET = _ B LANK > Clique aqui! ! ! < /A>

Clique aqui! ! !

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

8

Dreamweaver MX – Básico

R eceben do e-m ails : Ex emplo:

Res ultado:

< A HREF= " mailto: x x x x @ unicamp.br " > Clique aqui < /A> par a enviar s ua opinião! !

Clique aqui par a enviar s ua opnião! !

Ch am an do u m a págin a em ou t r o s er vidor : pr ot ocolo: / / s er vidor / dir et or io/ ar qu ivo Os pr otocolos mais us ados s ão (file ou http): F ile = ar quivo no s er vidor de ftp h t t p = ar quivo no s er vidor Wor ld Wide Web Ex emplo:

Res ultado:

< A HREF= http: //www.unicamp.br T ARGET = _ B LANK > Clique aqui! ! ! < /A>

Clique aqui! ! !

T r abalh an do com t abela de cor es Os valor es par a as cor es devem s er es cr itos no padr ão Hex adecimal. Par a obter uma lis ta de cor es Hex adecimais , aqui es tá :

Cores Hexadecimais Paleta com 216 cores hexadecimais.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

9

Dreamweaver MX – Básico

D icas par a a con s t r u ção de u m s it e 1ª Fas e: Or ganiz ação da infor mação 2ª Fas e: Conceituação do s ite e definição da es tr utur a de navegação 3ª Fas e: Montagem do S ite 4ª Fas e: T es tar localmente 5ª Fas e: Dis ponibiliz ar o s ite

D ica de com o or gan iz ar e es t r u t u r ar a n avegação de u m s it e 01- Definir o conteúdo, o que s er á divulgado no s ite ex emplo: I nfor mações pes s oais : infor mações s obr e você; Publicações como j or nais , r evis tas ; Per fis da empr es a; s egmento da empr es a; clientes , par ceir os , etc... 02- Es tabelecer obj etivos : • • • • •

Você deve per guntar - s e o que os leitor es vão es tar pr ocur ando no s ite. Qual é o obj etivo do s ite. Antes de começar entr ar com códigos ou imagens você deve pens ar o que você quer colocar em s ua página Como s er á es tr utur ada? Ela es tá adequada ou não ao meu público alvo? Ao des envolver um s ite par a uma empr es a ou pes s oas é impor tante que você colha j unto ao s eu cliente s eus obj etivos , idéias , a for ma que imagina s ua página, etc. As s im, ficar á bem mais fácil de começar s eu tr abalho.

03- Divida o s eu conteúdo em tópicos : Cr ie uma lis ta com os pr incipais tópicos , a pr incípio não impor ta a or dem. Es ta é uma for ma de começar a s e or ganiz ar . S ua lis ta poder á ter quantos tópicos des ej ar , mas cuidado, o s eu leitor poder á s e cans ar e s e per der em meio a tantas opções . 04- Quais as quetões que devo levantar com r elação a or ganiz ação e a navegação de um s ite? • •

S er á que os leitor es cons eguem navegar pelo conteúdo de cada tipo de es tr utur a par a encontr ar as infor mações de que pr ecis am. Como ter cer tez a de que os leitor es cons eguem s e localiz ar nos meus documentos (contex to) e achar o caminho de volta até uma pos ição conhecida.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

10

Dreamweaver MX – Básico

T ipos de s it es : S it e es t át ico - S omente código HT ML S it e din âm ico •

Pode conter Java S cr ipts , que s ão pr ogr amas embutidos detr o do código HT ML. Nor malmente r odam localmente, do lado do cliente, ou s ej a, no computador do us uár io. Ex emplo: Java S cr ipt

•

Pr ogr amação PHP, AS P Pode conter pr ogr amação (PHP, AS P) que s ão ex ecutados pelo s er vidor Web, pr oduz indo dinamicamente páginas HT ML, que então s ão enviadas ao cliente par a viz ualiz ação

E x em plos de n avegação 1 . H ier ár qu ica É fácil par a os leitor es des cobr ir a pos ição em que s e encontr am na es tr utur a. Nas hier ar quias , a home page for nece uma vis ão ger al do conteúdo que es tá s ubor dinado a ela e ainda define os pr incipais vínculos ás páginas dos níveis infer ior es da hier ar quia. E XE MP L O: Mapa do s i t e m os t r a a es t r u t u r a h i er ár qu i ca das pági n as do s i t e.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

11

Dreamweaver MX – Básico

Nes te tipo de es tr utur a Linear a home page é o título, ou intr odução, e todas as outr as páginas acompanham em s eqüência com vínculos que levam de uma página a outr a, nor malmente com opções de avançar e r etr oceder .

2 . L in ear

E XE MP L O: i n s t r u ções pas s o-a-pas s o.

3 . E s t r u t u r a L in ear com alt er n at ivas

A es tr utur a linear menos r ígida per mitindo que o leitor s e des vie do caminho pr incipal. Pode ter , por ex emplo, uma es tr utur a linear com r amificações alter nativas que par tam de um único tr onco. As r amificações podem s e r eunir ao tr onco pr incipal em algum ponto mais adiante, em um nível mais baix o da es tr utur a, ou continuar s e r amificando em níveis infer ior es s eguindo caminhos pr ópr ios até chegar a um " fim" . Além de r amificar a es tr utur a linear , você pode também ofer ecer vínculos que per mitam aos leitor es avançar ou r etr oceder na cadeia, cas o pr ecis em r ever alguma etapa ou j á conheçam alguma par te do conteúdo.

Es tr utur a linear e hier ár quica, em cada página do r oteir o você deve ofer ecer vínculos par a o leitor avançar , r etr oceder , r etor nar ao início e s ubir um nível

3 . Com bin ação E s t r u t u r a L in ear com H ier ár qu ica

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

12

Dreamweaver MX – Básico

P r óx im a et apa do plan ej am en t o S ua apr es entação da Web cons is te em deter minar o conteúdo que s er á apr es entado em cada uma das páginas e cr iar alguns vínculos (links ) s imples que pos s ibilitem a navegação por es s as páginas . 1 . Coloque cada tópico em uma página, mas s e tiver um gr ande númer o de tópicos , a manutenção e ... vinculação pode s e tor nar maçante. 2 . Defina bem a for ma de navegação entr e as páginas . S e houver for mas alter nativas , tor ne a ... navegação par a os leitor es a mais intuitiva pos s ível. 3 . T ome cuidado com o que s er á incluindo na home page, lembr e- s e, ela s er á a por ta da s ua ... apr es entação. 4 . T enha s empr e em mente s eus obj etivos . Pr ocur e não s e dis tanciar deles . D ica im por t an t e: A dis pos ição de imagens , tex tos , vídeos , etc. T udo que você des ej a colocar em s ua página pr ecis a s er colocado de for ma agr adável ao leitor . Daí abor dar mos , de for ma ger al, a diagr amação. Es ta palavr a vêm do mundo dos impr es s os . T r ata- s e da dis pos ição de elementos que compõem uma página. Deve s er obs er vado o tamanho das fontes , dis pos ição das imagens , for ma como o tex to s er á apr es entado, etc. Uma boa diagr amação também gar ante o r etor no do inter nauta. Com pos ição da equ ipe a) Analis tas de s is temas (com ex per iência em ger ência de I nfor mação), r es pons ável pela or ganiz ação ....da infor mação;

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

13

Dreamweaver MX – Básico

b) Des ign Gr áfico, r es pons ável pelo pr oj eto gr áfico; c) Pr ogr amador es , que, dependendo do tipo de s ite, podem s er pr ogr amador es HT ML, Java, JavaS cr ipt, ....CGI , PHP, AS P, etc; A equipe dever á ter um coor denador , r es pons ável em faz er o tr abalho fluir de for ma eficiente, dentr o de um cr onogr ama apr oveitando o máx imo de cada pr ofis s ional. Depois do s ite cons tr uído s ur gir á uma outr a pes s oa: o W ebMas t er , que s er á r es pons ável pela adminis tr ação do s ite. É muito haver o acúmulo de funções por membr os da equipe. Mas é impor tante definir o papel de cada na cons tr ução do s ite.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

14

Dreamweaver MX – Básico

Vis ão Ger al do D r eam w eaver MX

Ár ea de T r abalh o:

P ain el I n s er ir O Painel I ns er ir per mite tr abalhar com vár ios tipos de obj etos como tabelas , imagens , for mulár ios , etc. As opções es tão or ganiz adas em guias : Comuns , Layout, T ex to, T abelas , Moldur as , For mulár ios , Modelos , Car acter es , Mídia, Cabeçalho, S cr ipt e Aplicativo.

Par a mos tr ar ou ocultar o painel I ns er ir : es colh a w in dow / in s er t Par a ex pandir ou r eduz ir o painel I ns er ir : cliqu e n a s et a de ex pan s ão, n o can t o es qu er do da bar r a de t ít u lo da B ar r a I n s er ir .

B ar r as de f er r am en t as Contém botões que pos s ibilitam difer entes vis ualiz ações da j anela do documento (vis ualiz ação do des enho e/ou do código da página)

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

15

Dreamweaver MX – Básico

Jan ela do docu m en t o Ex ibe o documento que es tá s endo cr iado e editado. Ao clicar com o botão dir eito do mous e s obr e es s a ár ea s ão ativados menus contex tuais . Utiliz ados par a facilitar o aces s o aos comandos e pr opr iedades mais utiliz ados , r elativos ao obj eto ou j anela que es ta s endo tr abalhada. Os menus contex tuais contêm apenas a lis ta dos comandos que per tencem a s eleção atual.

I n s pet or de P r opr iedades Na ver s ão anter ior do Dr eamweaver , o ins petor de pr opr iedades er a flutuante, agor a é fix o e fica alocado na par te infer ior da ár ea de tr abalho. S ua função é editar ou ins er ir pr opr iedades em um elemento pr eviamente s elecionado. Par a mos tr ar ou ocultar o ins petor de pr opr iedades , bas ta s elecionar na bar r a de menus as opções W in dow / P r oper t ies . A maior ia das alter ações feitas nas pr opr iedades é imediatamente aplicada à j anela do documento.

P ain éis e gr u pos de pain éis Os painéis e gr upos de painéis podem s er encaix ados e combinados confor me a s ua neces s idade.

P ar a ex pan dir e r edu z ir o gr u po de pain éis : •

Clique na s eta de ex pans ão.

P ar a s epar ar o gr u po de pain éis : •

Ar r as te o gr upo atr avés da pinça.

P ar a agr u par a u m pain el em ou t r o gr u po de pain éis : •

Clique n ícone de opções que fica á dir eita da j anela

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

16

Dreamweaver MX – Básico

É apr es entado um menu onde é pos s ível mudar o gr upo, r enomear e fechar o gr upo de painéis .

R edim en cion ar j an ela Ao clicar no tamanho da j anela ex ibe o meu popup. Par a facilitar o des enho de páginas com boa apar ência em um deter minado tamanho, a j anela do documento poder á s er aj us tada a qualquer um dos tamanhos lis tados no menu.

Men u j an ela Es te menu pr opor ciona aces s o fácil a todas as j an elas , in s pet or es e palet as do Dr eamweaver .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

17

Dreamweaver MX – Básico

P r oj et o: S it e B ioder m Vamos cons tr uir um s ite de uma empr es a fictícia chamada " B ioder m" . Atr avés des s e s ite dis ponibiliz ar emos dados s obr e a empr es a (ins titucional), por tifólio dos pr odutos e contato. Dur ante a confecção do s ite apr ender emos a utiliz ar melhor as fer r amentas do Dr eamweaver MX.

E s t r u t u r an do o s it e A or ganiz ação do s ite facilita o entendimento e economiz a tempo. Par a configur ar um s ite comece cr iando uma es tr utur a de pas tas locais em dis co. É impor tante que es ta es tr utur a fique bem definida, pois ela s er á a mes ma publicada no s er vidor . Cr ie uma pas ta chamada " bioder m " e dentr o dela as s ub- pas tas : • • • • • •

docu m en t acao: ar maz enar á a documentação do s ite (ar quivos do wor d, etc) im agen s : ar maz enar á as imagem utiliz adas no s ite em pr es a: ar maz enar á as páginas r efer entes ao as s unto empr es a pr odu t os : ar maz enar á as páginas r efer entes ao as s unto pr odutos at en dim en t o: ar maz enar á as páginas r efer entes ao as s unto atendimento dicas _ belez a: ar maz enar á as páginas r efer entes ao as s unto dicas de belez a

A es tr utur a das pas tas ficar á as s im:

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

18

Dreamweaver MX – Básico

Vín cu los ( L in ks ) No hiper tex to, as páginas s e ligam umas as outr as atr avés de links . Ex is tem vár ios tipos de links : • • • •

I n t er n os - par a documentos de um mes mo s ite E x t er n os - par a documentos de um outr o s ite Cor r eio E let r ôn ico - par a enviar mens agens atr avés do ger enciador de e- mails Ân cor as - par a s eções es pecíficas de uma página

Quando s e cr ia um link é pr ecis o definir o caminho entr e o documento de onde par te o link até o que es tá s endo chamado. Es s e caminho pode s er abs oluto ou r elativo: •

•

Cam in h o abs olu t o - é us ado par a es tabelecer um link a um documento em outr o s er vidor , é pr ecis o for necer a URL (ender eço) completa do documento que es tá s endo chamado. Por ex emplo h t t p: / / w w w .ccu ec.u n icam p.br / t r ein am en t os / in dex _ t r ein am en t os .h t m l . Cam in h o r elat ivo - é us ado par a cr iar vínculos locais na maior ia dos s ites . É útil par a es tabelecer vínculos com documentos s ituados na mes ma pas ta ou em outr a pas ta do mes mo s ite, atr avés de caminhos de es tr utur a das pas tas . Nes s e cas o, coloca- s e s omente o s egmento do caminho, não é neces s ár io es pecificar a URL. T omando como ex emplo a es tr utur a do s ite bioder m: o Par a cr iar um link entr e o documento index .html e um documento (documento.html) que es tá na mes ma pas ta r aíz - link: docu m en t o.h t m l (coloca apenas o nome do ar quivo) o Par a cr iar um link entr e o documento index .html e um documento (documento.html) que es tá dentr o da s ub- pas ta empr es a - link: em pr es a/ docu m en t o.h t m l (coloca a pas ta e o nome do ar quivo, s epar ados pelo car acter / ) o Par a cr iar um link entr e o documento index .html e uma imagem (imagem.gif) que es tá dentr o da s ub- pas ta imagens - link: im agen s / im agem .gif (coloca a pas ta e o nome do ar quivo, s epar ados pelo car acter / ) o Par a cr iar um link entr e um documento que es tá na s ub- pas ta empr es a e uma imagem (imagem.gif) que es tá dentr o da s ub- pas ta imagens link: ../ im agen s / im agem .gif (s obe um nível na es tr utur a de pas tas com .. e em s eguida coloca a pas ta e o nome do ar quivo, s epar ados pelo car acter / ) o S upondo que tives s emos um documento dentr o de uma s ub- pas ta per tencente a s ub- pas ta empr es a, com um link par a uma imagem (imagem.gif) que es tá dentr o da s ub- pas ta imagens - link: ../ ../ im agen s / im agem .gif (s obe dois níveis na es tr utur a de pas tas com ../ .. e em s eguida coloca a pas ta e o nome do ar quivo, s epar ados pelo car acter / )

Par a definir um link de cor r eio eletr ônico: coloque a ex pr es s ão " m ailt o: " e em s eguida o e- mail do des tinatár io, ex emplo - m ailt o: f u lan o@ u ol.com .br . Com r elação as âncor as , ver emos num dos pr óx imos tópicos da apos tila.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

19

Dreamweaver MX – Básico

Cr ian do u m n ovo s it e Defina um novo s ite, na bar r a de menus localiz ada na par te s uper ior da tela clique em S it e/ N ovo s it e (s er á apr es entado um as s is tente par a a cr iação do s ite). Em N om e do s it e digite o nome do s ite (B I ODERM) e em P as t a r aiz local s elecione a pas ta onde ficar á ar maz enado o s ite, nes s e cas o deve s er s elecionada a pas ta bioder m. A opção H T T P Addr es s per mite a checagem dos links do s ite. Deve- s e digitar o ender eço final (URL) que o s ite ter á na Web. Clique no botão OK . Es s a é a maneir a us ual de s e cr iar um s ite, outr a alter nativa é o método bás ico com a aj uda de um as s is tente do Dr eamweaver .

O painel ao lado ex ibe todos os ar quivos e pas tas do s ite atuando como um ger enciador de ar quivos , per mitindo copiar , colar , ex cluir , mover e abr ir ar quivos da mes ma maneir a que o Windows Ex plor er .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

20

Dreamweaver MX – Básico

S elecion an do as im agen s Aces s e o ender eço www.ccuec.unicamp.br /tr einamentos /dr eamweaver /pagina8_ cr iando_ novo_ s ite.html Copie as imagens abaix o par a a pas ta im agen s . Clique com o botão dir eito do mous e s obr e as imagens e es colha a opção s alvar im agem com o . t opo.gif

f ot o1 _ h om e.gif

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

21

Dreamweaver MX – Básico

f ot o2 _ h om e.gif

f ot o3 _ h om e.gif

f ot o4 _ h om e.gif

r odapé.gif

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

22

Dreamweaver MX – Básico

Cr ian do u m a n ova págin a em br an co Na bar r a de menus s elecione Ar qu ivo > N ovo É apr es entada uma caix a de diálogo em que o us uár io poder á es colher o tipo de documento. Na guia Ger al, es colha a categor ia P ágin a bás ica e H T ML Em s eguida, clique no botão Cr iar

D ef in in do as pr opr iedades da págin a Na bar r a de menus , s elecione Modif icar > P r opr iedades da P ágin a e configur e as s eguintes pr opr iedades : T ítulo (título da página): m odelo Fundo (cor de fundo): # F F F F F F (br anco) T ex to (cor do tex to): # 0 0 0 0 0 0 (pr eto) Links (cor dos links ): # 3 3 3 3 9 9 (az ul) Links vis itados (cor dos links vis itados ): # CC0 0 0 0 (lilás ) Links ativos (cor do link no momento em que ele é ativado): # 6 6 3 3 9 9 (ver melho) Mar gem s uper ior : 1 Clique no botão OK .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

23

Dreamweaver MX – Básico

Obs : Ao abr ir a paleta de cor es , o ponteir o do mous e s e tr ans for ma em um contagotas que pode " car r egar " qualquer cor de obj etos das j anelas aber tas do Dr eamweaver . Movimente o mous e e per ceba que ele s e alter a. Clique na cor des ej ada.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

24

Dreamweaver MX – Básico

T abelas A maneir a mais comum de dis por os elementos numa página é tr abalhando com tabelas . Uma tabela é for mada de tr ês elementos : • • •

L in h a: es paçamento hor iz ontal entr e uma bor da e outr a; Colu n a: es paçamento ver tical entr e uma bor da e outr a; Célu la: es paço r es ultante da inter s eção de uma linha com uma coluna.

Ex is tem duas maneir as de cr iar tabelas : pelo Painel I ns er ir Com u n s > I n s er ir t abela, ou pela bar r a de menus I n s er ir > T abela. Vamos cr iar uma tabela com 3 linhas e 1 coluna, lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Clique em OK .

P r opr iedades de t abela Quando a tabela es tiver s elecionada, s uas car acter ís tica apar ecer ão no I ns petor de Pr opr iedades . No campo Alin h ar s elecione a opção Ao cen t r o.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

25

Dreamweaver MX – Básico

I n s er in do m ais lin h as ou colu n as n a t abela S elecione uma linha da tabela e clique com o botão dir eito do mous e s obr e a ár ea s elecionada, no menu de opções que s er á ex ibido s elecione as opções T abela > I n s er ir L in h as ou Colu n as . Na outr a j anela que s e abr e s elecione o nº de linhas ou colunas que des ej a ins er ir e a pos ição em que elas s er ão incluídas .

D ividin do ou m es clan do célu las , lin h as ou colu n as Par a dividir : S elecione a célula, linha ou coluna que pr etende dividir e no I ns petor de pr opr iedades s elecione as opções Célu la > D ivide as célu las em lin h a ou colu n as Par a mes clar : S elecione as células , linhas ou colunas que pr etende mes clar e no I ns petor de pr opr iedades s elecione as opções Célu la/ L in h a > Mes clar as célu las s elecion adas u t iliz an do ex t en s ões

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

26

Dreamweaver MX – Básico

E x clu in do lin h as e colu n as Pos icione o cur s or s obr e a linha ou coluna a s er ex cluída, clique s obr e a ár ea s elecionada com o botão dir eito do mous e e no menu de opções que s er á ex ibido es colha as opções T abela > D elet ar L in h a/D elet ar Colu n a Obs .: Após faz er os tes tes com a tabela, deix e- a com o for mato inicial, ou s ej a, com 3 linhas e 1 coluna.

I n s er in do im agen s Par a ins er ir uma imagem : pelo Painel I ns er ir Com u n s > I m agem ou pela bar r a de menus I n s er ir > I m agem . Na pr imeir a linha da tabela ins ir a a imagem t opo.gif (s elecione a imagem topo.gif no dir etór io " imagens " ). Na ter ceir a linha da tabela ins ir a a imagem r odape.gif (também ar maz enada no dir etór io " imagens " ). I m por t an t e: Na opção U R L : R elat iva a: es colha a opção docu m en t o. Par a que s ej a cr iado cor r etamente o caminho r elativo até as imagens .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

27

Dreamweaver MX – Básico

Mapeam en t o de im agen s O mapeamento de imagens é utiliz ado quando há neces s idade de colocar vínculo em apenas uma par te de uma imagem, e não na imagem toda. S elecione a imagem topo.gif (na pr imeir a linha da tabela). Vamos mapear a ár ea da imagem onde apar ece a palavr a " Home" , colocando um link par a a página index .html. Com a imagem topo.gif s elecionada, vej a que o ins petor de pr opr iedades dis ponibiliz a tr ês tipos de mapas : r etangular , oval e poligonal. S elecione a opção r etangular , como mos tr a a figur a abaix o.

Após s elecionar a opção mapa r etangular , mova o cur s or novamente s obr e a imagem topo.gif, o cur s or as s umir á a for ma de cr uz . Des enhe um r etângulo em volta da palavr a Home ( 1 ) e no campo Link do ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada: index .html ( 2 ) . Vej a a figur a abaix o:

Repita o mes mo pr ocedimento par a os ítens do menu. Com a imagem topo.gif s elecionada, es colha a opção mapa r etangular : •

Des enhe um r etângulo em volta da palavr a E m pr es a e no campo Link do ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada: ../empr es a/empr es a.html

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

28

Dreamweaver MX – Básico

• • •

Des enhe um r etângulo em volta da palavr a P r odu t os e no campo Link do ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada: ../pr odutos /pr odutos .html Des enhe um r etângulo em volta da palavr a At en dim en t o e no campo Link do ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada: ../atendimento/atendimento.html Des enhe um r etângulo em volta das palavr as D icas de B elez a e no campo Link do ins petor de pr opr iedades digite o ender eço da página que s er á aces s ada: ../dicas _ belez a/dicas _ belez a.html

Obs .: O mapeamento é válido apenas par a uma página, nor malmente s er ia neces s ár io r epetir es s e pr ocedimento par a as demais páginas do s ite. No entanto, s e quis er mapear a imagem uma única vez , e faz er is s o valer par a todas as páginas , ter á que utiliz ar o r ecur s o de Modelos , como ver emos a s eguir .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

29

Dreamweaver MX – Básico

Modelos Os modelos s ão muito utiliz ados par a facilitar o tr abalho r epetitivo. Quando s e tem um layout de página que s er á apr oveitado vár ias vez es . Poder íamos utiliz ar o pr ocedimento de copiar a página ou s alvar com o, mas s e houves s em mudanças no layout das páginas , ter íamos que alter á- las uma por uma. A vantagem de s e utiliz ar modelo é que em cas o de mudança, todas as páginas s ão alter adas de uma vez . Per mite também cr iar r egiões bloqueadas e r egiões editáveis , mantendo as s im a integr idade da página or iginal. As r egiões editáveis s ão as ár eas da página que poder ão s er alter adas . Quando s e cr ia um modelo todas as ár eas es tão bloqueadas , par a editar es s as ár eas é neces s ár io cr iar r egiões editáveis . D ef in ido r egiões edit áveis S elecione o tex to ou a célula que des ej a tor nar editável, nes s e cas o es colha a s egunda linha da tabela na qual es tamos tr abalhando.

Na bar r a de menus es colha I n s er ir > Obj et os de Modelos > R egião E dit ável ou atr avés do Painel I ns er ir es colha a guia Modelos , clique no ter ceir o botão R egião E dit ável. Ao apar ecer uma mens agem avis ando que o documento s er á conver tido em modelo, clique em OK . Em s eguida pr eencha o nome da r egião: con t eu do. Clique no botão OK , note que es s a ár ea ficar á contor nada por um r etângulo, com o nome da ár ea em cima. S alvar emos es s a página como um modelo que s er á utiliz ado par a as demais páginas do s ite. Na bar r a de menus s elecione Ar qu ivo / S alvar com o Modelo, s alve com o nome de bioder m _ m odelo. O ar quivo de modelo é um ar quivo com ex tens ão .DWT e ficar á ar maz enado na pas ta T emplates , que s er á cr iada automaticamente na r aiz do s ite. Feche o modelo.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

30

Dreamweaver MX – Básico

Cr ian do págin as a par t ir de m odelos O modelo que cr iamos s er á a bas e par a as demais páginas do s ite, onde s er á alter ada apenas a r egião editável que denominamos de con t eu do. Ao cr iar uma nova página a par tir de um modelo é pos s ível definir s e ela per manecer á anex ada ao modelo. Definindo es s a opção, quando o modelo for alter ado, todas as páginas anex adas a ele s er ão atualiz adas . A pr imeir a página que cr iar emos a par tir do modelo s er á a página inicial do nos s o s ite denominada in dex .h t m l. Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos ( 1 ) , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m ( 2 ) e o modelo bioder m _ m odelo ( 3 ) . Mantenha a opção atualiz ar a página quando o modelo for alter ado ( 4 ) , des s a for ma, ao atualiz ar o modelo, todos os documentos cr iados a par tir dele s er ão atualiz ados . Clique no botão Cr iar . S alve o documento com o nome de in dex .h t m l, na pas ta r aíz do s ite.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

31

Dreamweaver MX – Básico

Cr ian do a págin a in icial do s it e Na página index .html temos então uma tabela com 3 linhas e uma coluna. A 1ª e 3ª linhas da tabela es tão bloqueadas pois s er ão elementos fix os em todas as páginas do s ite, vamos tr abalhar na s egunda linha da tabela, que é uma r egião editável. •

• •

Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 2 linhas , 2 colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 350, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 410. Na pr imeir a célula da tabela ins ir a a imagem foto1_ home.gif (ar maz enada na pas ta imagens )

•

Na s egunda célula da tabela ins ir a a imagem foto2_ home.gif (ar maz enada na pas ta imagens )

•

Na ter ceir a célula da tabela ins ir a a imagem foto3_ home.gif (ar maz enada na pas ta imagens )

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

32

Dreamweaver MX – Básico

•

Na quar ta célula da tabela ins ir a a imagem foto4_ home.gif (ar maz enada na pas ta imagens )

S alve novamente es s a página como in dex .h t m l e em s eguida feche- a. Na bar r a de menus , s elecione Ar qu ivo > S alvar com o. S alve com o nome de in dex .h t m l na pas ta r aíz do s ite. Feche o documento. T ecle F 1 2 par a vis ualiz ar a página no navegador . Obs .: Clicando na B ar r a de menus : Ar qu ivo > Ver if icar a págin a > Ver if icar L in ks , é pos s ível tes tar s e os links es tão Ok.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

33

Dreamweaver MX – Básico

Cr ian do a págin a em pr es a.h t m l Após ter mos cr iado a página inicial do s ite, cr iar emos as páginas s ecundár ias de acor do com o menu pr incipal: empr es a.html, pr odutos .html, atendimento.html e dicas _ belez a.html. Cr iar emos agor a a página em pr es a.h t m l, também a par tir do modelo. •

Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos ( 1 ) , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m ( 2 ) e o modelo bioder m _ m odelo ( 3 ) . Mantenha a opção atualiz ar a página quando o modelo for alter ado ( 4 ) , des s a for ma, ao atualiz ar o modelo, todos os documentos s er ão atualiz ados .

•

S alve o documento com o nome de em pr es a.h t m l, na pas ta em pr es a.

•

Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linha, 2 colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 130, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 630.

•

Na pr imeir a coluna da tabela ins ir a uma cor de fundo, pos icione o cur s or nes s a coluna, e na opção F u n do do I ns petor de pr opr iedades es colha a cor cinz a clar o

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

34

Dreamweaver MX – Básico

(# CCCCCC). •

Defina o pos icionamento ver tical des s a coluna par a N o Alt o. Faça o mes mo par a a outr a coluna. No I ns petor de pr opr iedades , campo Ver t es colha N o alt o.

•

Na s egunda coluna da tabela ins ir a uma outr a tabela de 1 linha/1 coluna e lar gur a de 580 pix els , centr aliz e es s a tabela.

•

Dentr o des s a tabela, ins ir a o tex to r efer ente a empr es a. O tex to pode s er copiado do modelo tex to_ empr es a que es tá na pas ta documentacao, é s ó copiar e colar . O tex to deve ficar pos icionado na par te s uper ior da tabela, par a is s o pos icione o cur s or em qualquer lugar dentr o da tabela, e no I ns petor de Pr opr iedades , no campo Ver t, es colha N o Alt o.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

35

Dreamweaver MX – Básico

E s t i los H T ML Os es tilos HT ML s ão utiliz ados par a s alvar for matações de tex to e par ágr afos e per mitir s ua r eutiliz ação. Os es tilos HT ML afetar ão apenas os tex tos aos quais for em aplicados . Abr a a paleta D es ign que fica do lado dir eito da tela e es colha a guia E s t ilos H T ML :

L im pan do a f or m at ação do t ex t o • • •

S elecione o tex to des ej ado Clique em L im par o es t ilo da s eleção par a r etir ar a for matação do tex to s elecionado. Ou Clique em L im par o es t ilo do par ágr af o par a r etir ar a for matação do par ágr afo inteir o

Faça um tes te: s elecione o tex to que acabamos de copiar e clique em L im par o es t ilo da s eleção. D ef in in do u m es t ilo H T ML • •

Na guia E s t ilos H T ML clique no ícone novo es tilo (folhinha com s inal de + ) Na caix a de diálogo que é ex ibida, dê um nome ao es tilo que s er á cr iado, por ex emplo T ex t o, em s eguida es colha as opções S eleção e L im par o es t ilo ex is t en t e. Nos atr ibutos da fonte es colha Ver dana, tamanho 2 e cor pr eta, clique no botão OK .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

36

Dreamweaver MX – Básico

•

S er á cr iado um novo es tilo, que poder á s er aplicado a qualquer tex to.

Faça um tes te: s elecione novamente o tex to que acabamos de copiar e aplique o es tilo HT ML T ex t o. É s ó dar um duplo clique no es tilo t ex t o que es tá no painel Des ign. Par a r emover um es tilo HT ML cr iado: abr a a paleta D es ign e es colha a guia E s t ilos H T ML , clique com o botão dir eito do mous e s obr e o es tilo des ej ado e es colha E x clu ir . Par a alter ar as pr opr iedades de um es tilo HT ML ex is tente : abr a a paleta D es ign e es colha a guia E s t ilos H T ML , clique com o botão dir eito do mous e s obr e o es tilo des ej ado e es colha E dit ar .

S alve novamente es s a página como empr es a.html.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

37

Dreamweaver MX – Básico

Cr ian do a págin a pr odu t os .h t m l Cr iar emos agor a a página pr odu t os .h t m l, também a par tir do modelo. •

Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m e o modelo bioder m _ m odelo. Mantenha a opção atualiz ar a página quando o modelo for alter ado, des s a for ma, ao atualiz ar o modelo, es s e documento também s er á atualiz ado.

•

S alve o documento com o nome de pr odu t os .h t m l, na pas ta pr odu t os .

•

Aces s e w w w .ccu ec.u n i cam p.br / t r ei n am en t os / dr eam w eaver / pagi n a1 6 _ pr odu t os .h t m l e s alve as imagens batom.gif, cr eme.gif e per fume.gif na pas ta im agen s .

•

Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linhas , 2 colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 130, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 630.

•

Na pr imeir a coluna da tabela ins ir a uma cor de fundo, pos icione o cur s or nes s a coluna, e na opção F u n do do I ns petor de pr opr iedades es colha a cor cinz a clar o (# CCCCCC).

•

Na s egunda coluna da tabela ins ir a uma outr a tabela de 1 linha/1 coluna e lar gur a de 580 pix els , centr aliz e es s a tabela. Dentr o dela ins ir a o tex to r efer ente aos pr odutos , que pode s er copiado do modelo tex to_ pr odutos (ar maz enado na pas ta documentacao), é s ó copiar e colar . O tex to deve ficar pos icionado na par te s uper ior da tabela, par a is s o pos icione o cur s or em qualquer lugar dentr o da tabela, e no I ns petor de Pr opr iedades , no campo Ver t, es colha N o alt o. O útimo par ágr afo do tex to ter mina com a fr as e " Par a s aber mais clique aqui" , tr ans for me a palavr a " aqui" num link, s elecione a palavr a e no campo L in k do I ns petor de pr opr iedades digite ../ in dex .h t m l

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

38

Dreamweaver MX – Básico

•

Após copiar a des cr ição, pule 1 linha e ins ir a uma tabela com 3 linhas e 2 colunas , lar gur a de 540 pix els e bor da = 0. Deix e- a centr aliz ada.

•

S elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 140, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 400.

•

S elecione toda a tabela e no campo Cor de f u n do do I ns petor de pr opr iedades defina a cor cinz a (código # CCCCCC) Ainda com toda a tabela s elecionada alter e o campo E s paço en t r e as célu las par a o valor 2 .

•

•

S elecione s omente as células da tabela e alter e a cor de fundo par a br anco (código # FFFFFF). Par a s elecionar s omente as células da tabela, s elecione as células da pr imeir a linha e com o botão es quer do do moude pr es s ionado s elecione as demais

•

Como r es ultado dis s o s er á cr iada uma es pécie de bor da s epar ando as células da tabela

•

Agor a ins ir a as imagens batom.gif, cr eme.gif e per fume.gif (que s e encontr am na pas ta imagens ) r es pectivamente na 1ª coluna da 1ª linha, na 1ª coluna da 2ª linha e na 1ª coluna da 3ª linha

•

Na 2ª coluna da 1ª linha ins ir a o s eguinte tex to: " Os batons B ioder m fix am por mais tempo, dis pens ando aqueles r etoques fr equentes na maquiagem. Es tão dis poníveis em uma gr ande var iedade de cor es ."

•

Na 2ª coluna da 2ª linha ins ir a o tex to: " O cr eme hidr atante B ioder m é indicado par a o r os to, pos s ui filtr o s olar FPS 20 que pr otege contr a os r aios ultr avioleta do s ol UV- A e UV- B . Além dis s o deix a a pele macia e não engor dur a."

•

Na 2ª coluna da 3ª linha ins ir a o tex to: " O per fume B ioder m pos s ui uma fr agr ância dis cr eta e agr adável que dá uma s ens ação r efr es cante. T em ação pr olongada."

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

39

Dreamweaver MX – Básico

A tabela ficar á as s im:

S alve novamente es s a página e deix e- a aber ta.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

40

Dreamweaver MX – Básico

E s t i los CS S Os es tilos CS S s ão mais abr andentes que os es tilos HT ML. É uma tecnologia que não faz par te do HT ML padr ão, é um conj unto de tags que aj udam a contr olar a apar ência e a for matação de tex tos . Cr ian do u m E s t ilo CS S per s on aliz ado Vamos cr iar um es tilo que for mate o tex to/conteúdo das páginas (tipo e tamanho da fonte e tex to j us tificado). Es s e es tilo s er á aplicado ao tex to da página pr odutos .html •

• • • • • • •

Cr ie uma pas ta chamada cs s dentr o da pas ta bioder m (Com o painel Ar qu ivos aber to, clique com o botão dir eito do mous e s obr e a pas ta S it e-B I OD E R M e no menu que s e abr e s elecione N ova pas t a e nomeie a pas ta como cs s Abr a a paleta D es ign que fica do lado dir eito da tela e es colha a guia E s t ilos CS S Na guia E s t ilos CS S clique no ícone N ovo es t ilo CS S (folhinha com s inal de + ) Na caix a de diálogo que é ex ibida, dê um nome ao es tilo que s er á cr iado, por ex emplo cor po No campo T ipo: s elecione Cr iar es t ilo per s on aliz ado ( clas s e) No campo D ef in ir em : s elecione ( N ovo ar qu ivo de f olh a de es t ilos ) e clique em OK Na caix a de diálogo que é ex ibida, no campo S alvar s elecione a pas ta cs s e no campo N om e do ar qu ivo: digite es t ilos .cs s (es s e s er á o ar quivo que vai ar maz enar os es tilos ). Em s eguida clique no botão S alvar S er á ex ibido o painel de es tilos par a que você defina as pr opr iedades do es tilo: Na categor ia T ipo defina fonte = ver dana, tamanho = 12 pix els , es tilo = nor mal, cor = pr eto (# 000000)

Na categor ia B loco defina alinhamento do tex to = j us tificar

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

41

Dreamweaver MX – Básico

Clique em OK .

S er á cr iado o ar quivo es t ilos .cs s na pas ta bioder m / cs s , contendo o es tilo cor po. Podemos ins er ir outr os es tilos dentr o des s e ar quivo, como por ex emplo um es tilo que per s onaliz e os links , faz endo com que o link s ó fique s ublinhado no momento em que o cur s or es tiver s obr e ele. Par a is s o, edite o ar quivo es tilos .cs s e ins ir a o s eguinte es tilo (logo depois do es tilo cor po): a.linkdes taq: link { color : black; font- s iz e: 7.5pt; font- family: Ver dana, Ar ial, s ans s er if; tex t- decor ation: none } a.linkdes taq: active { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans s er if; tex t- decor ation: none } a.linkdes taq: vis ited { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans s er if; tex t- decor ation: none } a.linkdes taq: hover { color : black; font- s iz e: 7.5pt; font- family: ver dana, ar ial, s ans s er if; tex t- decor ation: under line }

S alve o arquivo es tilos .cs s . Os es tilos cr iados , cor po e lin kdes t aq, devem apar ecer no painel Des ign/Es tilos HT ML. Aplique os es tilos na página pr odutos .html: • • • •

S elecione o tex to da des cr ição que fica antes da tabela dos pr odutos e aplique nele o es tilo cor po . S elecione a palavr a/link " aqui" e aplique nela o es tilo lin kdes t aq Aplique também o es tilo cor po nos tex tos que es tão dentr o da tabela de pr odutos T ecle F12 par a vis ualiz ar a página no navegador . Na des cr ição a fonte s er á alter ada e o tex to ficar á j us tificado, quanto ao link " aqui" , s ó ficar á s ublinhado quando o cur s or es tiver s obr e ele.

S alve novamente a página.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

42

Dreamweaver MX – Básico

Quando um es tilo CS S é aplicado, o Dr eamweaver cr ia uma linha de código dentr o da tag h ead, que s inaliz a o ar quivo de es tilos que es tá s endo utiliz ado. De acor do com o ex emplo abaix o, bas eado na es tr utur a do s ite B ioder m, par a aces s ar o ar quivo es tilos .cs s a par tir de uma página do s ite, deve- s e s ubir um nível na es tr utur a de pas tas e então aces s ar a pas ta cs s : < head> < title> < /title> < meta> < lin k h r ef = " ../ cs s / es t ilos .cs s " r el= " s t yles h eet " t ype= " t ex t / cs s " > < /head> A s eguir podemos ver como ficou o código html ao r eceber um es tilo CS S : < p clas s = " cor po" > P ar a s aber m ais cliqu e < a h r ef = " in dex .h t m l" clas s = " lin kdes t aq" > aqu i< / a> < / p> O tex to " Par a s aber mais clique aqui" r ecebeu o es tilo cor po e a palavr a " aqui" , que é um link, r ecebeu também o es tilo lin kdes t aq. Com o car r egar os es t ilos par a u m a n ova págin a • • •

Abr a a paleta D es ign e es colha a guia E s t ilos CS S Na guia E s t ilos CS S clique no ícone An ex ar a f olh a de es t ilos (o 1º ícone com uma cor r ente) Em s eguida s elecione o ar quivo de es tilos des ej ado

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

43

Dreamweaver MX – Básico

Cr ian do a págin a at en dim en t o.h t m l O Dr eamweaver dis ponibiliz a vár ios r ecur s os par a a cr iação de for mulár ios . O S ite B ioder m ter á uma página de atendimento ao cons umidor , onde s er á dis ponibiliz ado um for mulár io cuj a função s er á obter dados do cons umidor e enviá- los por e- mail à ár ea de atendimento da empr es a. Cr iar emos agor a a página at en dim en t o.h t m l, também a par tir do modelo. •

Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m e o modelo bioder m _ m odelo. Mantenha a opção atualiz ar a página quando o modelo for alter ado, des s a for ma, ao atualiz ar o modelo, todos os documentos s er ão atualiz ados .

•

S alve o documento com o nome de at en dim en t o.h t m l, na pas ta at en dim en t o.

•

Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linha, 2 colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 130, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 630.

•

Na pr imeir a coluna da tabela ins ir a uma cor de fundo, pos icione o cur s or nes s a coluna, e na opção F u n do do I ns petor de pr opr iedades es colha a cor cinz a clar o (# CCCCCC).

•

Na s egunda coluna da tabela ins ir a uma outr a tabela de 1 linha/1 coluna e lar gur a de 580 pix els , centr aliz e es s a tabela. Dentr o des s a tabela, ins ir a o for mulár io, como ver emos a s eguir .

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

44

Dreamweaver MX – Básico

F or m u lár io 1) No cor po da página, dentr o da tabela, digite o título " Atendimento ao Cons umidor " em negr ito. No I ns petor de pr opr iedades es colha fonte ver dana, tamanho 2. 2) Pule 1 linha e digite " Contato" e em s eguida os dados da empr es a (e- mail, telefone, fax ) 3) Em s eguida digite: " S e você tem alguma dúvida ou s uges tão s obr e os nos s os pr odutos , pr eencha o for mulár io abaix o: " 4) Na bar r a I n s er ir , s elecione o ítem F or m u lár io 5) S elecione a pr imeir a opção F or m u lár io , par a que ele cr ie a tag for m (como s e fos s e a moldur a do for mulár io) 6) Dentr o da tag for m, pule 1 linha e digite " Nome: " Na fr ente do nome cr ie um campo de for mulár io, s er á um campo tex to: cr ie um campo tex to clicando na 2ª opçãoCam po de t ex t o S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades do campo: Campo de tex to (nome do campo): n om e Lar g. do car acter e (tamanho da moldur a do campo): 5 0 No max . de car act. (númer o máx imo de car acter es que poder ão s er digitados ): 5 0 T ipo (tipo de linha): L in h a s im ples Valor inicial (valor inicial): deix ar em br anco 7) pule 1 linha e digite " E- mail: " Na fr ente do e- mail cr ie um campo de for mulár io, s er á um campo tex to: cr ie um campo tex to clicando na 2ª opçãoT ex t F ield S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades : Campo de tex to (nome do campo): em ail Lar g. do car acter e (tamanho da moldur a do campo): 4 0 No max . de car act. (númer o máx imo de car acter es que poder ão s er digitados ): 4 0 T ipo (tipo de campo): L in h a s im ples Valor inicial (valor inicial): deix ar em br anco 8) pule 1 linha e digite " Faix a Etár ia: " pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " até 20 anos " pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " de 20 a 40 anos " pule 1 linha e clique na 6ª opçãoB ot ão de r ádio, em s eguida digite " acima de 40 anos " Faix a Etár ia: εδχ γφ

até 20 anos

εδχ γφ

de 20 a 40 anos

εδχ γφ

acima de 40 anos

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

45

Dreamweaver MX – Básico

s elecione o pr imeir o B otão de r ádio e no I ns petor de pr opr iedades configur e s uas pr opr iedades : B otão de opção (nome da var iável): faix a- etar ia Valor s elecionado (valor da var iável): 20 Es tado inicial (es tado inicial do campo: s elecionado ou não): S elecionado s elecione o s egundo B otão de r ádio e configur e s uas pr opr iedades : B otão de opção (nome da var iável): faix a- etar ia Valor s elecionado (valor da var iável): 20- 40 Es tado inicial (es tado inicial do campo: s elecionado ou não): Não s elecionado s elecione o ter ceir o B otão de r ádio e configur e s uas pr opr iedades : B otão de opção (nome da var iável): faix a- etar ia Valor s elecionado (valor da var iável): 40 Es tado inicial (es tado inicial do campo: s elecionado ou não): Não s elecionado 9) pule 1 linha e digite " S ex o: " cr ie um campo tex to clicando na 8ª opçãoMen u de L is t a S ex o: S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades : Lis ta/Menu (nome do campo): s ex o T ipo (tipo de lis ta, as opções tem a mes ma função, s ó muda a for ma de ex ibição) Clique no botão Valor es da lis ta: adicione os valor es " mas culino" e " feminino" (par a adicionar um novo valor clique no s inal + ) Clique em OK . 10) pule 1 linha e digite " Dúvidas ou s uges tões : " cr ie um campo tex to clicando na 4ª opçãoÁr ea de t ex t o

S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades : Campo de tex to (nome do campo): s uges toes Lar g. do car acter e (tamanho da moldur a do campo): 50 No max . de car act. (númer o de linhas do campo): 5 T ipo (tipo de campo): Multi- linha Valor inicial: deix ar em br anco 11) pule 1 linha e cr ie um botão clicando na opção 12ª opçãoB ot ão Submit

S elecione es s e campo e no I ns petor de Pr opr iedades pr eencha as pr opr iedades : B otão (nome do botão): S ubmit Denominação (tex to que s er á ex ibido no botão): " Enviar " Action (ação): Enviar for mulár io Obs .: a acão r es et f or m s er ve par a limpar os campos do for mulár io. 12) Edite o código HT ML e no act ion da tag for m coloque o e- mail par a onde s er ão encaminhados os dados (mailto: x x x x x x x x x x x ).

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

46

Dreamweaver MX – Básico

O for mulár io s er á ex ibido des s a for ma:

Nome:

E- mail: Faix a Etár ia: εδχ γφ

até 20 anos

εδχ γφ

de 20 a 40 anos

εδχ γφ

acima de 40 anos

S ex o:

mas culino

Dúvidas ou s uges tões :

S ubmit

S alve novamente es s a página e feche- a.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

47

Dreamweaver MX – Básico

Cr ian do a págin a dicas _ belez a.h t m l Cr iar emos agor a a página dicas _ belez a.h t m l, também a par tir do modelo. •

Na bar r a de menus es colha Ar qu ivo > N ovo, es colha a guia Modelos , s er ão ex ibidos os s ites e modelos ex is tentes , es colha o s ite B ioder m e o modelo bioder m _ m odelo. Mantenha a opção atualiz ar a página quando o modelo for alter ado, des s a for ma, ao atualiz ar o modelo, todos os documentos s er ão atualiz ados .

•

S alve o documento com o nome de dicas _ belez a.h t m l, na pas ta dicas _ belez a.

•

Pos icione o cur s or na s egunda linha da tabela e cr ie uma nova tabela dentr o des s a linha: Painel I ns er ir Com u n s > I n s er ir t abela, ou bar r a de menus I n s er ir > T abela. A nova tabela ter á as s eguintes pr opr iedades : 1 linhas , 2 colunas , lar gur a de 760 pix els , pr eenchimento da célula = 0, es paçamento entr e as células = 0 e bor da = 0. Defina a lar gur a de cada coluna da tabela, s elecione a pr imeir a coluna e no campo L do I ns petor de pr opr iedades digite 130, agor a s elecione a s egunda coluna da tabela e no campo L do I ns petor de pr opr iedades digite 630.

•

Na pr imeir a coluna da tabela ins ir a uma cor de fundo, pos icione o cur s or nes s a coluna, e na opção F u n do do I ns petor de pr opr iedades es colha a cor cinz a clar o (# CCCCCC).

•

Na s egunda coluna da tabela ins ir a uma outr a tabela de 1 linha/1 coluna e lar gur a de 580 pix els , centr aliz e es s a tabela. Pos icione o cur s or dentr o des s a tabela e no I ns petor de pr opr iedades s elecione N o alt o. Em s eguida, ins ir a o tex to com as dicas de s aúde e belez a (copie o tex to do ar quivo tex to_ dicas _ belez a.doc que es tá ar maz enado na pas ta documentacao.

•

S elecione todo o tex to e no I ns petor de pr opr iedades alter e a fonte par a ver dana, tamanho 2. S alve es s a página.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

48

Dreamweaver MX – Básico

Ân cor as As âncor as s ão utiliz adas em páginas que pos s uem conteúdo muito ex tens o. Atr ibui- s e um âncor a par a cada par ágr afo ou par a cada tópico da página, e depois cr ia- s e um menu no início da mes ma com links par a es s as âncor as . Es s e r ecur s o agiliz a a navegação pelo conteúdo da página, dis pens ando o us o da bar r a de r olagem, que nor malmente s e for ma nes s es documentos muitos ex tens os . Par a ins er ir uma âncor a, na bar r a de menus s elecione I n s er ir / Ân cor a com n om e, ou no Painel I ns er ir : Com u n s / Ân cor a com n om e. Vamos utiliz ar como ex emplo a página do s ite dicas de belez a. Nes s a página dis ponibiliz amos um gr ande númer o de dicas , o que tor nou o s eu conteúdo ex tens o. 1) O conteúdo es tá dividido nos s eguintes tópicos : cuidados com a pele, cuidados com os cabelos , como ter uma alimentação equilibr ada, tr atamento da celulite, beba muita água, como gas tar calor ias mes mo s em tempo par a s e ex er citar , como tir ar o máx imo de pr oveito do baton. 2) No início de cada tópico (dica) ins ir a uma âncor a, da s eguinte for ma: Coloque o cur s or no início do tópico " Cuidados com a pele" . Na bar r a de menus s elecione I n s er ir / Ân cor a com N om e, ou no Painel I ns er ir : Com u n s / Ân cor a com N om e. Na j anela que s e abr e, digite o nome da âncor a: pele, e clique em OK . Faça o mes mo pr ocedimento par a os demais tópicos , as pr óx imas âncor as s e chamar ão: cabelos , alim en t acao, celu lit e, agu a, calor ias , bat on ) 3) Cr ie um menu no início da página, contendo apenas os títulos dos tópicos , como s egue: (us e fonte ver dana, tamanho 2) - Cuidados com a pele - Cuidados com os cabelos - Como ter uma alimentação equilibr ada - T r atamento da celulite - B eba muita água - Como gas tar calor ias mes mo s em tempo par a s e ex er citar - Como tir ar o máx imo de pr oveito do baton 4) Vincule cada ítem do menu a s ua r es pectiva âncor a. S elecione o ítem do menu, e no campo Link do I ns petor de Pr opr iedades digite o nome da âncor a pr ecedido pelo s ímbolo # . Ex emplo # pele.

5) É impor tante também dis ponibiliz ar uma for ma do us uár io voltar par a o menu no topo da página após ter aces s ado um deter minado tópico. Par a is s o, ins ir a uma âncor a no início da página, antes do menu. Es s a âncor a ter á o nome de " topo" . Em s eguida digite a palavr a " T opo" no final de cada tópico e faça um link par a a âncor a topo (# topo). Obs : S e a âncor a fos s e chamada de uma outr a página, o link ficar ia as s im: pagina.html# ancor a S alve a página e tecle F12 par a vis ualiz á- la no navegador . Em s eguida feche a página. T es te o s ite localmente.

Divisão de Serviços à Comunidade - Centro de Computação - Unicamp

49