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