Page 1

MANUAL DE DREAMWEAVER CS3

1


ÍNDICE 2-ÍNDICE 3-INICIAR O DREAMWEAVER 6- INSERIR IMAGEM 10-ADICIONAR ESPAÇO ÁS IMAGENS 15-ALINHAR IMAGENS 17-IMAGENS COM MARGENS 20-COLORIR AS MARGENS DAS IMAGENS 22-IMAGEM ALT 25-PROPRIEDADES 31-INSERIR TABELA 33-COLORIR A TABELA 37-INSERIR IMAGEM NUMA TABELA 40-IMAGEM DE FUNDO 43-TABELA COM COLUNA 46-BOTÕES EM TEXTO FLASH 49-CRIAR UM FORMULÁRIO PARA EMAIL 52-FORMULÁRIO COM BOTÃO DE RÁDIO 55-LISTAS ORDENADAS 57-INSERIR RÉGUA HORIZONTAL 61-CAMADAS 63-CAMADAS VISIVEIS 66-CAMADAS COM TABELA 68-BEHAVIOURS 72-IMAGENS COM HIPERLIGAÇÕES 75-MENSAGEM POP-UP 78-STATUS BAR 80-EMAIL LINK 83-JUMP MENUS 86-IMAGEM COM TRANSPARÊNCIA 89-TABELA COM MARGEM 92-IMAGEM TROCADA 95-USAR JAVASCRIPT 97-MENU COM CÓDIGO 100-USAR HIPERLIGAÇÕES NO DREAMWEAVER 103-FAZER DESAPARECER IMAGEM 106-CAMADA VISIVEIS 111-IMAGEM E CAMADA 116-FECHAR IMAGEM 118-SWAP IMAGENS COM CORES 121-FRAMES PARA DIVISÃO

2


INICIAR O DREAMWEAVER 1-Na imagem vêem o símbolo do Dreamweaver.

2-Para activar o Dreamweaver seleccione no menu iniciar um símbolo igual ao indicado acima o qual irá activar o funcionamento do Dreamweaver.

3


3-Seleccione o tipo de ficheiro que iremos trabalhar que serรก o HTML

4-Entraremos assim no ambiente grรกfico do Dreamweaver.

4


5-Das primeiras opções que poderemos seleccionar são a opção Design, a qual permite trabalhar em modo Design na nossa página.

6-A opção seguinte que podemos explorar é a Split, a qual permite visualizar parte do código da nossa página e parte do ambiente Design.

5


7-A última é a opção Code através da qual poderemos ver apenas o código, da página Web que estamos a construir.

INSERIR IMAGEM 1-Para iniciarem a nossa aprendizagem no Dreamweaver vamos inserir uma imagem. Para o tal seleccionamos no menu Insert e de seguida escolhemos a opção Image.

2-Também poderão inserir uma imagem por outro caminho, clicando na opção Insert que vê na imagem

6


3-Escolha no menu Common e depois imagem.

4-De seguida clicamos em OK para que a imagem seja guardada e a possamos utilizar repetidamente.

7


5-A imagem foi assim inserida.

6-Agora seleccione a imagem. Clique no botão direito do rato sobre a imagem e escolha a opção propriedades.

8


7-Poderemos visualizar o tamanho da nossa imagem que neste caso ĂŠ 487 e 309.

8-Vamos alterar esses valores para conseguirmos que a imagem fique mais pequena. Neste caso alterei o valor para 300,300 e consegui que a imagem ficasse mais pequena:

9


ADICIONAR ESPAÇO ÁS IMAGENS

1-Para possamos fazer o seguinte exercício vamos utilizar o texto seguinte: NO TEMPO QUE PASSA No mar que navego Na voz que oiço, No corpo que possuo No tempo que passa Só tu, tens o saber da vida, O sentido das emoções O instintivo talento do amor, O toque imprevisível Que torna um prazer eterno. Só tu, com os teus expressivos olhos O sussurrar do coração entre os dedos Conheces do amor os segredos E assim fascinas, assim cativas. 2-Colocamos o texto no Dreamweaver.

10


3-De seguida seleccionamos o texto e no menu escolhemos a opção window>Properties.

4-Alinhamos o texto ao centro.

5-Iremos inserir uma imagem, efectuando para isso a seguinte escolha:

11


6-Escolhemos a imagem a inserir.

7-Colocamo-la a seguir ao titulo e damos-lhe valores inferiores para ela ficar mais pequena.

12


8-Esses foram os valores dados e a imagem diminui.

9-Colocamos o seguinte valor no VSPACE.

13


10-Conseguimos criar assim uma margem entre a imagem em relação ao texto.

14


ALINHAR IMAGENS 1-Vamos inserir desta vez duas imagens ao nosso gosto e coloca-las lado a lado.

2-Ficarão nesta disposição.

3-Vamos tornar as imagens mais pequenas.

15


4-Alteramos os valores para 100.

5-Seleccionamos a imagem á direita e escolhemos a opção Right.

16


6-As imagens deixarão de estarem juntas e ficará um á direita e outra á esquerda.

IMAGENS COM MARGENS 1-Coloque imagens e um texto na seguinte disposição.

17


2-Seleccione a imagem e altere a propriedade Border para 20.

3-Faรงa o mesmo procedimento para a imagem รก sua direita.

18


4-Conseguimos assim colocar as duas margens nas nossas duas imagens.

19


COLORIR AS MARGENS DAS IMAGENS

1-Insira as seguintes imagens e texto, se as ainda não tiver.

2-Nos menus escolha a opção Modify e de seguida Page Properties.

20


3-Escolha uma cor.

4-As margens imagens foram alteradas para verde.

21


IMAGEM ALT 1-Insira uma imagem qualquer.

2-Com o bot達o direito do rato seleccione propriedades:

22


3-Escreva os seguintes nomes:

4-Desenhe um quadrado.

23


5-Faรงa um preview no Internet Explorer.

6-Guarde o ficheiro.

7-Passe o rato por cima da boca do peixe e surgirรก a palavra boca:

24


PROPRIEDADES 1-Use o seguinte texto para o exercício. NO TEMPO QUE PASSA No mar que navego Na voz que oiço, No corpo que possuo No tempo que passa Só tu, tens o saber da vida, O sentido das emoções O instintivo talento do amor, O toque imprevisível Que torna um prazer eterno. Só tu, com os teus expressivos olhos O sussurrar do coração entre os dedos Conheces do amor os segredos E assim fascinas, assim cativas. 2-Cole o texto no Dreamweaver

25


3-Seleccione Window e Properties.

4-Seleccione todo o texto e de seguida clique no bot達o assinalado.

26


5-Surgirá o seguinte painel de opções:

6-Escolha uma cor.

27


7-O seu texto ficarรก com a cor seleccionada.

8-Escolha de seguida a cor de fundo.

28


9-ObterĂĄ o seguinte resultado.

10-Escolha agora o botĂŁo assinalado.

29


11-Escolha uma imagem ao seu gosto.

12-O resultado final serรก este:

30


INSERIR TABELA

1-Neste exemplo vão ver como se insere uma tabela no Dreamweaver. Seleccione a opção Common e de seguida Table.

2-Vamos fazer uma tabela com 3 campos e 3 colunas.

31


3-Vemos aqui a tabela criada.

4-Escreva os seguintes nomes:

5-Alarge as colunas e a nossa tabela estรก criada.

32


COLORIR A TABELA

1-Depois de inserirmos uma tabela, poderemos de seguida colori-la

2-Seleccione nas propriedades da cor para a tabela.

33


3-A sua tabela ficarรก com estas cores.

4-Seleccione agora a cor de fundo para a tabela.

34


5-Vamos agora alterar a cor de fundo mas da página. Para o tal escolhemos a opção assinalada.

6-Surgirá a seguinte caixa de opções. Nela seleccionamos a primeira opção.

35


7-Vamos visualizar os efeitos no Browser.

8-O efeito conseguido foi o seguinte no qual transformamos a cor das tabelas e do fundo da pรกgina.

36


INSERIR IMAGEM NUMA TABELA

1-Escolha a opção Layout e de seguida Table.

2-Escolha uma tabela com 3 campos e 3 colunas.

37


3-Vemos aqui a tabela conseguida.

4-Com o bot達o direito do rato seleccione as propriedades da tabela.

38


5-Insira agora uma imagem.

6-A sua imagem ficarรก dentro da tabela.

39


IMAGEM DE FUNDO 1-Nos menus seleccione Modify e de seguida Page Properties.

2-Agora clique no bot達o Background image.

40


3-Seleccione uma imagem que goste.

4-A sua imagem ficarรก inserida como fundo.

41


5-Previsualize no seu Internet Explorer como vĂŞ na imagem.

6-A imagem serve agora como fundo.

42


TABELA COM COLUNA 1-Inserimos uma tabelas com uma coluna e com dez campos.

2-A tabela ficarรก assim:

43


3-Colorimos de seguida o primeiro campo da tabela.

4-Teremos agora de colorir os restantes campos de amarelo mais claro.

44


5-Escreva as seguintes palavras e alinhe-as. Conseguimos fazer desta forma um menu atravĂŠs de uma coluna.

45


BOTÕES EM TEXTO FLASH

1-No Dreamweaver existem botões já feitos que podem ser aplicados na nossa página. Para inserirmos um tipo desses botões escolhemos nos menus Insert e Flash Text.

2-Surgirá a seguinte caixa de opções, na qual vamos definir, o tamanho e texto que irá aparecer.

46


3-Agora vamos definir as cores a serem usadas.

4-Vamos prĂŠ-visualizar o botĂŁo atravĂŠs do Internet Explorer.

47


5-Damos permissão ao browser para activar o conteúdo bloqueado.

8-Surgirá o texto do botão em Flash.

9-Passe o rato sobre as letras e elas mudarão de cor.

48


CRIAR UM FORMULÁRIO PARA EMAIL 1-Poderemos criar formulários no Dreamweaver. Para isso teremos que clicar no menu Insert, Form e Text Field.

2-Escrevemos o texto correspondente á caixa de texto na opção Label.

49


3-Obteremos o seguinte resultado.

4-Vamos agora inserir um bot達o.

5-Colocamos o bot達o ao lado da caixa de texto.

50


6-Colocamos agora o bot達o mais abaixo.

7-Seleccionamos as propriedades para alterar o nome Submeter.

51


9-Conseguiremos fazer um formulário com um botão.

FORMULÁRIO COM BOTÃO DE RÁDIO

1-No Dreamweaver seleccione o menu Insert e de seguida Image.

52


2-Vemos aqui as opções disponíveis.

3-Clique na aba do menu Forms. Escolha a opção assinalada e arraste o objecto para a sua página.

4-Vemos aqui o botão de rádio inserido e o seu código respectivo.

53


5-Vamos visualiza-lo no nosso Browser.

9-Podemos vĂŞ-lo aqui junto a imagem posteriormente colocada.

54


LISTAS ORDENADAS 1-Poderemos criar listas ordenadas como existe por exemplo no Word. Para isso escrevemos um texto.

2-De seguida seleccionamos o texto.

55


3-De seguida escolhemos a opção dos menus Text e Ordered List.

4-Conseguiremos assim ordenar numericamente a lista pretendida.

56


INSERIR Rร‰GUA HORIZONTAL 1-Por vezes necessitamos de dividir uma pรกgina que estamos a construir em sectores ou partes.

2-Seleccione nos menus Insert, HTML e Horizontal Rule.

57


3-Conseguirá assim inserir uma régua a delimitar os espaços na sua página.

4-Seleccione a régua e dê-lhe um valor de 5 unidades.

58


5-Agora insira outra imagem.

6-Vemos aqui as duas imagens e uma rĂŠgua a dividir-las.

7-Insira novamente outra rĂŠgua.

59


8-Altere nesta nova rĂŠgua outra vez o mesmo valor que colocou o valor anteriormente.

9-Vemos aqui a rĂŠgua colocada. Poderemos fazer isso sucessivamente dividindo assim o nosso site, com as imagens que vamos colocando.

60


CAMADAS

1-Uma das funções das camadas é conseguirem sobrepor qualquer elemento. Para esse efeito seleccione a opção Layout e de seguida a opção assinalada pela seta.

2-Desenhe uma camada que é o objeto quadrado que se vê na imagem.

5-De seguida iremos inserir uma imagem dentro da camada e para o tal escolhemos a opção Insert e Image.

61


7-Conseguimos inserir a imagem na nossa camada. Desenhe agora a outra segunda camada.

8-O objectivo ĂŠ inserir duas imagens em duas camadas, como se vĂŞ na imagem:

62


CAMADAS VISIVEIS

1-Insira 3 camadas se as não tiver ainda.

2-Depois de inserirmos as três camadas podem torná-las visíveis ou não de forma a ficarem separadas visivelmente. Para tal escolha nos menus Window Css Styles.

63


3-Surgirá o seguinte quadro, através do qual vemos as três camadas inseridas.

4-Insira de seguida três imagens.

64


5-Clique no olho de uma das camadas.

6-Assim ficarĂŁo visĂ­veis apenas duas imagens e poderemos desta forma controlar a visibilidade das camadas.

65


CAMADAS COM TABELA 1-As tabelas também poderão servir para inserir tabelas, vamos então inserir uma camada.

2-Insira cinco campos e apenas uma coluna dentro da tabela.

66


3-A tabela ficará como vê na imagem.

4-Poderá de seguida escrever o que pretender na sua coluna.

67


BEHAVIOURS

1-Escolha no menu a opção Forms e seleccione o botão assinalado na imagem.

2-De seguida Window e Behaviors.

68


3-O comportamento escolhido deverá ser Open Browser Window.

4-Preencha o campo com um link como vê na imagem.

5-De seguida escolha a opção onClick para o botão Submit.

69


6-Faça uma visualização no Internet Explorer.

70


7-Clique no botão.

8-Ao clicar no botão irá directamente para o site pretendido.

71


IMAGENS COM HIPERLIGAÇÕES

1-Insira uma imagem ao seu gosto.

2-Vemos aqui a imagem inserida.

72


3-Seleccione a imagem e escolha a opção Propriedades.

4-Digite um link no campo assinalado. Eu escolhi inserir o link do Google.

73


5-Vamos prĂŠ-visualizar no Internet Explorer.

6-Se clicar na imagem irĂĄ para o site do google.com

74


7-Vemos aqui o resultado.

MENSAGEM POP-UP

1-Poderemos inserir uma mensagem Pop-up na nossa página. Para iniciarmos esse objectivo escolhemos no menu a opção Window e depois Behaviors.

75


2-Nas caixa dos Behaviors seleccionamos Popup Message.

3-Surgirรก o seguinte painel no qual vamos escrever uma frase ao nosso gosto.

76


4-De seguida seleccionamos a opção onLoad, a qual está assinalada.

5-Desta forma surgirá uma caixa de aviso com a mensagem que escrevemos sempre que carregarmos a página.

77


STATUS BAR

1-Nos menus seleccione Window e Behaviors

2-Clique no sinal mais dos Behaviors. Surgirá o seguinte menu, no qual irá escolher a opção Set Text of Status Bar.

78


3-Surgirรก a seguinte caixa na qual poderรก colocar uma frase que irรก surgir na barra de estado.

4-Altere o comportamento para onLoad.

4-Vamos ver o nosso site no Internet Explorer.

79


5-Surgirá no canto inferior esquerdo a frase colocada acima.

EMAIL LINK 1-Um email link é utilizado para activar um email. Para iniciarmos a construção de um vamos a Insert e Email Link.

80


2-SurgirĂĄ a seguinte caixa na qual iremos colocar um texto e o nosso email.

3-PrĂŠ-visualizamos no browser.

81


4-Quando clicarmos no link do email, surgirรก o Outlook Express para o utilizarmos e enviarmos um email.

5-Basta agora preencher o email.

82


JUMP MENUS

1-Os jumps menus servem para como o pr贸prio nome indica fazer um salto de uma p谩gina para outra. Para trabalharmos com os jumps menus seleccionamos Insert, Form e Jump Menu.

2-Adicionamos um texto e um link.

83


3-Clicamos em OK.

4-Inserimos mais um texto e mais um link.

84


5-E inserimos um terceiro e Ăşltimo ao nosso gosto.

6-PrĂŠ-visualizamos no browser.

85


7-Quando seleccionarmos uma das opções escolhidas, iremos automaticamente para a página seleccionada.

IMAGEM COM TRANSPARÊNCIA

1-Podemos aplicar transparência numa imagem com o DreamWeaver. Para isso seleccionamos Insert e de seguida Image.

86


2-Conseguimos inserir a nossa imagem.

3-Escolha agora a opção Modify.

87


4-Regule a transparĂŞncia para cerca de 50 por cento.

5-A sua imagem ficarĂĄ portanto mais transparente.

88


TABELA COM MARGEM 1-Podemos inserir uma tabela para estruturarmos a nossa pรกgina. Para trabalharmos com tabelas vamos a Insert e depois Table.

2-Inserimos 2 campos e duas colunas.

3-Ficarรก assim a tabela inserida.

89


4-De seguida inserimos uma imagem em cada foto.

5-Da seguinte forma:

90


5-Seleccionamos as propriedades da tabela, alteramos a cor e definimos os restantes valores como vimos na imagem abaixo.

6-Obteremos o seguinte resultado.

91


IMAGEM TROCADA 1-Insira uma imagem. De seguida escolha a opção Windows e Behaviors .

2-Clique no sinal mais e escolha a opção Swap Image.

92


3-Seleccione duas imagens.

4-Num imagem coloque o atributo onMouseOut e na outra imagem onMouseOver.

93


5-PrĂŠ visualize no Internet.

6-Ao passar o rato as imagens vĂŁo se alterar, uma vez surgirĂĄ uma e depois outra, quando esta desaparecer.

94


USAR JAVASCRIPT

1-O Javascript é uma linguagem que é usada para construir páginas da internet. Ela poderá ser usada também com o Dreamweaver. Para demonstrar a sua utilização, vamos inserir um botão.

2-De seguida nos Behaviors escolha a opção Call Javascript.

3-Coloque o seguinte código na janela: window.close();

95


4-Pré visualize no Internet Explorer e quando clicar no botão irá surgir a seguinte caixa de opções que permite fechar a janela.

96


MENU COM CÓDIGO 1-O Dreamweaver permite também trabalharmos com códigos já construídos. Para isso escolha a opção Code.

2-Apague todo o código visível.

97


3-Este ser谩 o c贸digo a ser utilizado. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Table Background Change</title> <style type="text/css"> td.off { background: #CCCCCC; } td.on { background: #999999; } </style> </head> <body> <table width="150" cellpadding="3"> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, sans-serif">Menu 1 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, sans-serif">Menu 2 </font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, sans-serif">Menu 3</font></td> </tr> <tr> <td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, sans-serif">Menu 4 </font></td> </tr> </table> </body> </html>

Arial, Helvetica,

Arial, Helvetica,

Arial, Helvetica,

Arial, Helvetica,

5-Seleccione todo o c贸digo acima e copie-o de seguida.

98


6-Cole o cรณdigo no Dreamweaver.

7-Clique no botรฃo respectivo ao Design.

8-Quando mover o rato verรก que a coluna muda de cor.

99


USAR HIPERLIGAÇÕES NO DREAMWEAVER

1-Escreva a palavra Link no Dreamweaver.

2-Coloque uma hiperligação de um site ao seu gosto no campo onde está mencionado Link

100


3-Seleccione a palavra Link e nos menus escolha a palavra Modify.

101


3-Surgirá a seguinte caixa de opções. Escolha as cores assinaladas na imagem que são Link cor azul, Visited links azul, Rollover links azul e Active links vermelho.

4-Previsualize no Internet Explorer. Ao passar o rato irá ver que a palavra Link surgirá a sublinhado.

102


5-Quando clicado a palavra Link surgirรก a vermelho.

FAZER DESAPARECER IMAGEM 1-Insira uma camada.

2-Seleccione a camada.

103


3-Insira uma imagem.

4-Escreva um texto e seleccione-o.

5-Com o texto seleccionado, coloque um cardinal no campo Link.

104


5-De seguida nos comportamentos, escolha a opção Show-Hide Layers.

6-Surgirá a seguinte caixa de opções, na qual escolher a opção hide.

105


7-Ao clicar no link CLIQUE AQUI, irรก fazer aparecer a imagem.

CAMADA VISIVEIS

1-Podemos usar a visibilidade das camadas juntamente com os menus. Desenhe uma camada.

106


2-De seguida nos menus seleccione Insert e Table. Construa uma tabela como vĂŞ na imagem.

3-PoderĂĄ colorir o menu com uma cor ao seu gosto.

107


4-Escreva um texto, seleccione-o e na opção Link escreva um cardinal.

5-Seleccione a camada nas propriedades escolha hidden.

108


6-Seleccione agora a frase.

7-Escolha a opção Show-Hide Layers.

109


7-Desta vez deverá por optar pela opção show.

8-Assim se clicar na palavra ver tabela.

9-A tabela irá surgir.

110


IMAGEM E CAMADA

1-Utilize as seguintes imagens para o pr贸ximo exerc铆cio.

2-Desenhe uma camada.

3-Insira a flor com a rosa na camada.

111


4-Escolha nos Behaviors a opção Show-hide Elements.

5-Escolha agora nas camadas a opção show e show.

112


6-Altere os atributos para onClick.

7-Seleccione a camada á sua direita e nas propriedades escolha a opção hidden.

8-Seleccione desta vez a camada com a flor e nos Behaviors clique na opção Show-Hide Layers

113


9-Ficará aqui predefinido que a camada 1 terá a propriedade show e a camada 2 a propriedade hide.

10-Na segunda camada escolha a opção onMouseOut.

11-Ficarão assim os atributos das suas camadas.

114


12-Quando se clica na rosa a imagem amarela aparece.

13-Quando se tira o rato a imagem amarela desaparece.

115


FECHAR IMAGEM 1-Insira um bot達o.

2-Agora insira uma camada.

3-De seguida uma imagem na camada.

116


4-Na camada escolha a opção Show-hide Layers.

5-Ficará assim.

6-Ao clicar no botão a imagem desaparece.

117


SWAP IMAGENS COM CORES 1-Use as seguintes imagens para o exercĂ­cio.

2-Coloque uma das imagens numa camada.

118


3-Nessa camada seleccione a opção Swap Image.

4-Seleccione uma das imagens.

119


5-Altere o atributo dessa imagem para onMouseOver.

6-Faรงa um preview no Internet Explorer. Ao passar o rato sobre a imagem altera-se a cor da imagem:

120


FRAMES PARA DIVISÃO 1-Os frames servem para além de dividir a página, usar partes de outros sites incorporadas no nosso. Para colocar um frame escolha que na imagem.

2-Obterá a visualização do frame.

121


3-Nos menus seleccione agora Modify e Page Properties.

4-Escolha uma cor.

122


5-A parte de cima da sua pรกgina ficarรก com a cor escolhida.

6-De seguida vamos inserir uma tabela.

123


7-As opções da tabela serão as seguintes:

8-A sua tabela ficará assim:

124


9-Use a seguinte imagem:

10-Cole a imagem nas áreas que vê na tabela e pinte as restantes áreas.

12-Escreva nas áreas as palavras que vê na imagem:

fim

125

Manual Dreamweaver  

Manual Dreamweaver

Read more
Read more
Similar to
Popular now
Just for you