01 - Introduo

O Dreamweaver neste momento, o programa mais usado em todo o mundo para fazer pginas para a internet. fcil perceber porqu: simples mas poderoso. facilidade de um programa !"#$!"% &w'at (ou see, is w'at (ou get) ou se*a com uma interface grfica fcil de trabal'ar, este programa produz o c+digo invis,vel ao utilizador, mas tambm permite, com um toque de um bot-o, passar para o outro lado, o lado do c+digo 'tml de aspecto assustador para quem n-o o con'ece. qui aprender o c+digo opcional, n-o obrigat+rio. ssim este tutorial prop/e0se a um ob*etivo: 12plicar como fazer um simples site para a internet com o Dreamweaver. 3ais nada. penas o ideal para quem tem um trabal'o para fazer para as aulas e n-o sabe como come4ar. 5o fim garantido um site a funcionar, ou o din'eiro de volta. #e 'ouvesse din'eiro envolvido, claro est. 1 se conseguir despertar o bic'in'o do web designer em ti, ainda mel'or, quer dizer que valeu mesmo a pena.

Parte tcnica escondida

6odo o tutorial baseado em carregar em bot/es e selecionar menus, e nem c'ego perto de e2plicar uma s+ instru4-o de c+digo sequer. 3as tudo evolui, e a internet atual est vel'a & verdade.) e nascem novas regras que v-o ditar o futuro das comunica4/es on0line. s pginas de internet contm uma linguagem muito espec,fica de programa4-o, que se c'ama 7638 &7(perte2t 3ar9up 8anguage), e essa linguagem * est a come4ar a desaparecer. um processo que ainda vai levar algum tempo, mas o 7638 tem os dias contados e ir ser substitu,do pela nova linguagem :738 &12tensible 7(perte2t 3ar9up 8anguage). autoridade m2ima no desenvolvimento das normas e especifica4/es para a internet a !orld !ide !eb ;onsortium &!<;). Os standards, especifica4/es e novas propostas podem ser encontrados em 'ttp:==www.w<.org. O vel'o 7638 c'egou > sua ?ltima vers-o, o 7638 @.AB. 1sta vers-o contm * regras e especifica4/es de :38 vers-o B.A, para que se torne fcil > transi4-o de um para o outro. Cma das regras mais importantes impostas pelo 7638 @.AB a separa4-o da DestruturaD e da DcosmticaD. travs do uso de uma tcnica que envolve certos elementos c'amados ;## &cascading st(le s'eets, agora na vers-o E), poss,vel compor pginas com um c+digo mais limpo e acess,vel, s+ com a informa4-o necessria, mantendo as indica4/es da aparncia visual numa pequen,ssima pasta > parte &com a e2tens-o .css) que pode ser reutilizado infinitamente pelo website fora, podendo reduzir consideravelmente o taman'o das pginas &reduzindo o tempo que se espera na internet). Fermite ainda que, altera4/es do pasta ;##, alterem automaticamente todas as pginas de um site, o que poupa muito tempo e trabal'o, se usado de maneira correcta e segundo as normal estabelecidas pelo !<;. 1 c estaremos > espera da nova vers-o do Dreamweaver para nos facilitar a vida. 1ste curso foi gerado de acordo com as normas de transi4-o de 7638 @.AB.

Para quem este curso

O utilizador deve possuir as seguintes caracter,sticas:

saber ingls &o programa em ingls, n-o se traduzem comandos) saber usar o sistema operativo com relativo > vontade &pc ou mac) saber usar um processador de te2to, como por e2emplo o !ord &saber manipular te2to e tabelas) saber utilizar a $nternet, con'ece os termos comuns relacionados &link, browsers, etc..) tem o 3acromedia Dreamweaver @

Fara poder e2plicar tudo detal'adamente torna0se necessrio estabelecer algumas regras:

6odos os comandos de *anelas ou de menus ser-o escritos em ingls, e2ceto quando n-o se torna de todo necessrio &p.e. dizer tabela em vez de table) s partes do te2to que se*am de grande importGncia ser-o escritas em texto bold &negrito) 6odas as instru4/es para a parte prtica deste tutorial ser-o escritas em vermel'o. Fara designar um comando e2istente algures num menu no topo da janela de trabalho, usado o s,mbolo > &maior que) para indicar a 'ierarquia que se deve seguir, com referncia > tecla de atal'o no final, se dispon,vel. 12emplo:

Menu ile > Pre!ie" in #ro"ser > iexplore $ 1%& $sto serve para localizar o comando &preview in) iexplore nos menus e mostra que pressionar a tecla HBE e2ecuta a mesma fun4-o.

Iuando digo DclicaD ou DclicarD significa posicionar o cursor do mouse sobre algo e primir e largar uma vez o bot-o esquerdo do mouse, da mesma maneira que Dclica com o direito do mouseD significa usar o bot-o direito.

Fara aqueles que neste momento se sentem ofendidos com tanta e2plica4-o ingnua, lembrem0se, este tutorial foi feito para todos. Ou pelo menos essa a inten4-o. que uma pessoa ao princ,pio perguntou0me o que era clicar...

0% - 'r(ani)ar o ambiente de trabalho

Iualquer trabal'o come4a no papel. Fortanto, antes de te lan4ares a fazer uma pgina, esbo4a primeiro umas quantas idias numas fol'as. 3as para passar do real ao virtual n-o preciso ter mais do que alguns con'ecimentos bsicos... as coisas dif,ceis nos aprendemos sem dar por isso ao necessitarmos delas ou tendo curiosidade em continuar a aprender com o Dreamweaver. Fara se come4ar a trabal'ar no Dreamweaver s+ s-o necessrias algumas *anelas abertas, estas pequenas cinco:

* 1 + ,anela de projeto3enu da Fgina > .indo" > /ite iles $ 0& qui podemos visualizar o conte?do do nosso trabal'o. o fazer um site, todas as pginas, todas as imagens, anima4/es, tudo se encontra dentro de um 1nico diret2rio de3inida por n2s4 de pre3er5ncia com o nome do projeto . For e2emplo, aqui na imagem ao lado, o pro*eto c'ama0se 6esi(n, contm BB pginas e est situado no disco em D:J3acromediaJ Iuando for altura de colocar o trabal'o na $nternet ou num ;D0Kom, tudo o que se tem a fazer passar o conte?do do diret+rio Design, e tudo funcionar sempre na perfei4-o. Dica:

*anela de pro*eto &site files) aparece de in,cio um pouco (rande demais, pois ela um Ddois em umD 0 pode0se esconder a parte que n-o essencial clicando no pequeno trian(ulo branco situado na parte in3erior esquerda dessa mesma *anela. goras podem0se fazer o resize da *anela > vontade, visualizando apenas o essencial... as pastas com que se trabal'a. 1u c'amo *anela de pro*eto, mas na realidade a tradu4-o deveria ser *anela de pastas. raz-o que esta *anela muito mais do que uma simples representa4-o de pastas, ela de fato a representa4-o visual de todo o pro*eto.

* % + ,anela principal de trabalho1sta *anela surge sempre que iniciamos o Dreamweaver ou um duplo clique numa pgina na *anela de pro*eto. aqui que tudo montado. Os < primeiros bot/es na barra de topo alternam o modo de vista, por ordem: ver s+ c+digo, c+digo e normal, ver pgina normal. 5-o altera em nada aquilo que est feito. Dica:

6rabal'ar com c+digo opcional, n-o obrigat+rio. 3as com o cont,nuo uso do Dreamweaver, surge mais tarde ou mais cedo a necessidade de se come4ar a fazer pequenos acertos quando queremos trabal'os cada vez mais perfeitos. 6udo a seu tempo.

* 7 + ,anela de propriedades3enu da Fgina > .indo" > Properties $control8 7& 9udo no 6ream"ea!er tem op4/es que podem ser alteradas, quer se*a te2to, lin9s, imagens, tabelas &...) 6odas essas propriedades podem ser modificadas aqui, pois a *anela altera0se consoante aquilo com que estamos a trabal'ar. Deve0se trabal'ar com esta *anela ma2imizada, tal como na imagem. /e esti!er minimi)ada clica0se no trian(ulo branco in!ertido no canto in3erior direito dessa mesma *anela para a ma2imizar.

* : + ,anela de objetos3enu da Fgina > .indo" > 'bjects $control8 %& *anela de ob*etos coloca em ,cones quase todas as principais fun4/es e2istentes nos menus de topo. o fazer pairar o mouse por cima de qualquer um destes bot/es, faz0se aparecer > descri4-o de a*uda desse mesmo bot-o. 1sta *anela possui vrios menus diferentes e para se alternar, clica0se no pequeno t;tulo no topo com o tri<n(ulo preto.

* = + ,anela de 3rames3enu da Fgina > .indo" > rames $shi3t8 %& Luntamente com a *anela de propriedades, esta *anela permite definir com e2atid-o as caracter,sticas das frames que usamos. O que s-o frames e para que servem e2plicado adiante no cap,tulo M.

Iuaisquer outras *anelas podem desligadas, pois o que est a mais s+ serve para complicar a vida dos usurios. 5a realidade, nem a *anela de ob*etos nem a de frames seriam necessrias por agora, mas essencial dispor estas *anelas de modo confortvel > volta da *anela principal de trabal'o, pois ser-o mesmo as mais utilizadas.

07 - >ormas de trabalho
1stas s-o algumas regras bsicas do web design, conven4/es da pra2e para que as coisas n-o dem barraca quando menos se espera:

o dar nomes a quaisquer pastas, diret2rios, !ari?!eis, ta(s e outros, >@>AB se deve usar:

s,mbolos como J = : N D OPQ ou qualquer outra simbologia letras 3 $R#;C8 # caracteres decorados como por e2emplo: 4 S - &...)

6e!er-se-? usar-

letras minusculas sem qualquer acentuacao ou decoracao quaisquer algarismos n-o usar espa4os, usar T &underscore) ou 0 &subtrac4-o) como separador se necessrio

1stas regras para os nomes s-o e2tremamente importantes. Cm erro pode significar 'oras de frustra4-o em busca do que est errado, quando algo n-o funciona como devia ser, on0line ou off0line. Iuando uma pgina funciona bem no disco mas recusa0se a funcionar na internet poder significar um erro deste gnero...

*anela de trabal'o nem sempre demonstra instantaneamente o aspecto final da pgina... o Internet Cxplorer e o >etscape tm o mesmo ob*ectivo mas usam motores diferentes, e a mesma pgina pode ficar bem num e diferente no outro. Fara trabal'os mais importantes, devemos ter em mente que debemos produzir algo que todo o utilizador consiga ver da mesma maneira, ou de maneira mais apro2imada da nossa inten4-o, independentemente de qual se*a o browser que este*a a usar.

1nquanto estamos a trabal'ar, devemos verificar de vez em quando o aspecto da&s) pgina&s) utilizando o nosso browser &ou em mais do que um):

Fara isso pode0se clicar em HBE no Dreamweaver para ver como a pgina fica no nosso browser, mas tem um incon!eniente: ao faz0lo o 6ream"ea!er cria um pasta tempor?rio DEhtmD com o atributo de invisivel na diret+rio onde se est a trabal'ar. $sso vai aumentar o n?mero de pastas e o taman'o do pro*ecto ligeiramente, mas s+ temos que nos lembrar de ir > ca4a destes pastas temporrios no fim do pro*ecto e apag0los.

5o entanto e2iste outra forma tambm prtica: vai0se directamente > diret+rio e abre0 se a nossa pgina principal com o browser e dei2a0se aberta &ou minimizada). Desse modo, sempre que se salva a pgina que estamos a trabal'ar, vamos ao browser que est aberto, e clica-se = para re3rescar a janela do bro"ser e verificar as altera4/es feitas.