Dream Weaver Mx - Unicamp

  • November 2019
  • PDF

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA


Overview

Download & View Dream Weaver Mx - Unicamp as PDF for free.

More details

  • Words: 15,080
  • Pages: 49
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

Related Documents