Upcoming SlideShare
×

# Apostila dreamweaver

2,199 views

Published on

Published in: Technology
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

• Be the first to like this

Views
Total views
2,199
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
149
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Apostila dreamweaver

1. 1. SumárioINTRODUÇÃO _________________________________ 3 DICAS PARA CRIAR UM BOM SITE ____________________________ 4CONHECENDO O DREAMWEAVER _____________ 5 A JANELA DE DOCUMENTO _________________________________ 6 INSPETOR DE ORIGEM DE HTML ____________________________ 8 O INSPETOR DE PROPRIEDADES ______________________________ 9 A PALETA DE OBJETOS ___________________________________ 10 O INICIADOR __________________________________________ 12CONSTRUINDO PÁGINAS _____________________ 13 CRIANDO UM SITE LOCAL ________________________________ 13 CRIANDO PÁGINAS ______________________________________ 17 PARÁGRAFO E QUEBRA DE LINHA ___________________________ 30 A PALETA DE HISTÓRICO _________________________________ 33 FECHANDO E ABRINDO ARQUIVOS HTML ___________________ 35RECURSOS ADICIONAIS ______________________ 38 VERIFICAR ORTOGRAFIA __________________________________ 38 ALINHAMENTO DE TEXTO __________________________________ 40 INSERIR LINHA HORIZONTAL ______________________________ 41 LOCALIZAR E SUBSTITUIR _________________________________ 42TRABALHANDO COM IMAGENS _______________ 46 PROPRIEDADES DA IMAGEM ________________________________ 49 CRIANDO IMAGENS CAMBIÁVEIS ____________________________ 51
2. 2. INSERINDO HYPERLINKS _____________________ 57 VÍNCULO DE CAMINHO RELATIVO ___________________________ 58 CAMINHO ABSOLUTO E ÂNCORA IDENTIFICADA _________________ 64 ALTERANDO AS CORES DOS VÍNCULOS _______________________ 67CRIANDO PÁGINAS COM MOLDURAS _________ 69 SALVANDO AS MOLDURAS ________________________________ 74 SELECIONANDO MOLDURAS _______________________________ 76 PROPRIEDADES DAS MOLDURAS ____________________________ 78 INSERINDO UMA BARRA DE NAVEGAÇÃO ______________________ 80CRIANDO TABELAS ___________________________ 84 PROPRIEDADES DA TABELA E DAS CÉLULAS ____________________ 85 OUTRAS MODIFICAÇÕES NA TABELA ________________________ 88 CRIANDO E FORMATANDO UMA TABELA _______________________ 91CRIANDO FORMULÁRIOS _____________________ 94 OS OBJETOS DE FORMULÁRIOS ____________________________ 94 INSERINDO OBJETOS NA PÁGINA ____________________________ 96 VALIDANDO CAMPOS DO FORMULÁRIO _____________________ 103 FAZENDO O FORMULÁRIO FUNCIONAR ______________________ 105CRIANDO FOLHAS DE ESTILOS ______________ 106CRIANDO ESTILOS HTML ____________________ 112TRABALHANDO COM CAMADAS _____________ 114 AS PROPRIEDADES DAS CAMADAS ___________________________ 115AS LINHAS DE TEMPO _______________________ 118 O INSPETOR LINHAS DE TEMPO ____________________________ 118 ADICIONANDO E MOVENDO CAMADAS _______________________ 119LISTA DE EXERCÍCIOS _______________________ 127
4. 4. Dreamweaver 3.0Assim, utilizando o Dreamweaver, você poderá facilmente criar e publi-car suas páginas na Internet, e com isso, divulgar e apresentar as infor-mações contidas nas páginas a pessoas que estejam praticamente emqualquer parte do planeta. Essas pessoas, então, poderão acessar seusite (seja apenas para conhecê-lo, ou para fazer compras, pesquisas,jogar, etc) sem ter que se deslocarem fisicamente.DICAS PARA CRIAR UM BOM SITECriar um site até que não é uma tarefa muito complicada, porém, um sitebem elaborado exige paciência, dedicação e conhecimentos de algumastécnicas. Para obter os melhores resultados, projete e planeje o seu siteantes de criar qualquer página que o integrará. Procure lembrar sempreque um bom site, além de ter uma aparência atraente, necessita que amensagem seja transmitida de forma sucinta e sem demora no apareci-mento das informações na tela (ou seja, o carregamento das páginasdeve ser rápido). Fique atento às seguintes dicas:A Defina os seus objetivos de forma clara;A Analise o perfil de quem irá visitar seu site;A Utilize itens que possam ser exibidos rapidamente na tela;A Crie um bom layout de forma a torná-lo bastante atraente;A Evite excesso de informações numa única página;A De posse dos dados, procure organizá-los de forma inteligente;A A navegação no site deve ser de tal forma que os visitantes possam saber em que local do seu site eles estão e como retornar à página de nível superior;A Forneça uma maneira através da qual os visitantes possam en- trar em contato com o webmaster (quando necessário);A Realize vários testes no seu site com diferentes tipos de navegadores (browsers) antes de torná-lo disponível na Internet. Celta Informática - F: (11) 4331-1586 Página: 4
5. 5. Dreamweaver 3.0CONHECENDO O DREAMWEAVERO Dreamweaver é constituído por uma janela principal e várias outrasjanelas flutuantes (denominadas paletas ou inspetores). Quando vocêinicia o Dreamweaver, verá a janela principal (denominada janela de do-cumento - exibe o documento atual à medida que é criado e editado) ealgumas janelas flutuantes, como mostra a figura a seguir.No ambiente de trabalho do Dreamweaver você poderá exibir ou ocultarqualquer janela, paleta ou inspetor, bastando selecionar seu nome nomenu Janela, você também poderáOBS: O Dreamweaver se lembrará das posições das janelas quandovocê sair do programa, assim, ao iniciá-lo novamente, as janelas estarãona mesma posição que estavam quando você fechou o programa pelaúltima vez. Celta Informática - F: (11) 4331-1586 Página: 5
6. 6. Dreamweaver 3.0A JANELA DE DOCUMENTOAntes de iniciarmos a construção de um site, vamos conhecer melhor aJanela de documento, que é onde as páginas do site serão criadas. Aspáginas no Dreamweaver apresentam-se no formato WYSIWYG (“whatyou see is what you get”), isso significa que aquilo que você estiver vendona janela de documento é o que você vai ver no navegador da Web, emoutras palavras, o que você vê é o que você obtém.A janela de documento é composta pela Barra de título (que exibe o títuloda página e, entre parênteses, o nome do arquivo e um asterisco, caso oarquivo contenha alterações não salvas), Área de visualização (que exi-be todo o conteúdo da página) e pela Barra de status, que apresentaalgumas informações importantes:· Seletor de rótulos: exibem todos os rótulos (tags) que controlam o texto ou objeto selecionado (para realçar o conteúdo de algum rótulo na janela do documento, dê um clique nele).· Tamanho da janela: exibe o tamanho atual da janela de documento, permite redimensionar a janela de acordo com dimensões pré-deter- minadas ou personalizadas (basta dar um clique na setinha para que as opções sejam apresentadas). Você também pode redimensionar manualmente a janela, arrastando suas bordas.· Tamanho do documento e tempo de descarga: exibe o tamanho total da página (em Kilobytes) e o tempo de descarga com base na veloci- dade de conexão definida (para definir as preferências de tempo e tamanho de descarga, escolha menu Editar, opção Preferências, em seguida, selecione a categoria Barra de status e escolha uma veloci- dade de conexão com a qual deseja calcular o tempo de descarga). Celta Informática - F: (11) 4331-1586 Página: 6
8. 8. Dreamweaver 3.0INSPETOR DE ORIGEM DE HTMLComo já comentamos, você poderá ver o código HTML de qualquer pági-na através do Inspetor de origem de HTML, mostrado na próxima figura.Toda página criada no Dreamweaver tem um código em HTML associa-do a ela, e é por isso que elas podem ser exibidas no navegador, já queeles só entendem as instruções do código HTML.A barra de título da janela exibe o nome do arquivo. A opção Quebra autom.de linha faz o texto mudar automaticamente de linha dentro da janela (faci-litando sua leitura) e a opção Números de linha exibe, no lado esquerdo dajanela, o número de cada linha. Como você pode observar na figura anteri-or, essas duas opções estão ativas.Para abrir a janela do Inspetor de origem HTML, acesse o menu Janela edepois a opção Origem de HTML, outra maneira é clicar no ícone doinspetor de origem de HTML, no Iniciador ou no Mini-iniciador (no cantoinferior direito da janela do documento) ou então pressionar a tecla F10. Celta Informática - F: (11) 4331-1586 Página: 8
11. 11. Dreamweaver 3.0· O painel Head contém botões para adicionar diversos elementos HEAD, como os rótulos META, KEYWORDS e BASE.· O painel Invisíveis contém botões para criar objetos que não são visí- veis na janela do documento, como as âncoras com nome.· O painel Molduras contém estruturas comuns dos conjuntos de mol- duras (frames).Para inserir na página os objetos pertencentes à paleta de objetos, cliqueno botão correspondente ao objeto desejado. Para alguns objetos, oDreamweaver necessitará de informações adicionais (como a localiza-ção de uma imagem, por exemplo), sendo assim, uma caixa de diálogoserá exibida. Preencha a caixa de diálogo e depois de clicar no botão OK,o objeto será inserido na página.Você poderá escolher em exibir o conteúdo da paleta como Apenas tex-to, Apenas ícones ou Ícones e texto. Para realizar estas alterações, sele-cione a opção Preferências do menu Editar, na caixa de diálogo apre-sentada, selecione Geral na seção Categoria. Celta Informática - F: (11) 4331-1586 Página: 11
14. 14. Dreamweaver 3.0Vamos criar um site local, para isso, siga os passos seguintes:1. Estando com o programa Dreamweaver aberto, na janela do docu-mento selecione a opção Novo site do menu Site. A caixa de diálogoDefinição de site será exibida (nesta caixa de diálogo, a Categoria Infor-mações locais estará selecionada).Um site local requer um nome e uma pasta raiz local (pasta que armaze-nará todos os arquivos do site), sendo que a pasta raiz local deverá serconfigurada especificamente para o site.2. No campo Nome do site digite um nome para seu site, como exemplo,digite agenda (depois explicarei o porquê deste nome).3. No campo Pasta raiz local você deve especificar a pasta do seu discolocal que armazenará todos os documentos do site. Clique no ícone cor-respondente à pasta, à direita do campo. Na caixa de diálogo Escolher apasta local, crie, na sua pasta raiz (geralmente C:), a pasta Sites. De-pois dê um clique duplo na pasta Sites e crie outra denominadaAgenda_Cultural, dê um clique duplo nela também. Celta Informática - F: (11) 4331-1586 Página: 14
15. 15. Dreamweaver 3.04. Depois de dar um clique duplo na pasta Agenda_Cultural, clique nobotão Salvar. Na caixa de diálogo Definição de Site, selecione a opçãoUtilizar cache para acelerar atualiz. dos vínculos, pois colocando o con-teúdo da pasta Agenda_Cultural em um cache local, será criado um re-gistro dos arquivos existentes para que o Dreamweaver possa atualizarrapidamente os vínculos quando um arquivo for movido, renomeado ouexcluído.Como estamos definindo um site local (e não remoto), não precisamos pre-encher o outro campo (Endereço do HTTP), por isso clique no botão OK.OBS: Site remoto é aquele que já está localizado no seu servidor, é ondeseu site da Web fica armazenado. Celta Informática - F: (11) 4331-1586 Página: 15
16. 16. Dreamweaver 3.0Em seguida o Dreamweaver exibirá uma mensagem, clique no botãoOK. Uma nova janela será criada, cuja barra de título apresenta: Site –agenda (observe, na barra de tarefas do Windows, que apareceu maisum botão relativo ao Dreamweaver).Esta janela Site será utilizada para você fazer o gerenciamento do site,ou seja, você a usará para: copiar, colar, excluir, mover e abrir arquivos,criar pastas, atualizar os arquivos do site remoto (transferir para o siteremoto os arquivos que foram alterados), tudo da mesma forma comovocê faz no Windows Explorer do seu computador.Na janela Site você também poderá visualizar a estrutura de navegaçãodo site, através do Mapa do Site. O mapa do site mostra os arquivosHTML e outros elementos da página como ícones, e os hyperlinks serãoexibidos na ordem em que forem detectados no código de origem deHTML. Por padrão, o site remoto (ou mapa do site) aparecerá no painelesquerdo e o site local será mostrado no painel direito.OBS: O site que iremos criar será referente a uma agenda cultural, ondeconterá informações sobre os filmes e as peças teatrais que estão emcartaz, os shows que serão realizados na semana, os melhores restau-rantes, casas noturnas, etc. Celta Informática - F: (11) 4331-1586 Página: 16
17. 17. Dreamweaver 3.0CRIANDO PÁGINASAgora que já temos o local (pasta) onde será armazenado o site da nos-sa Agenda Cultural, vamos criar os documentos (páginas) para o site, ouseja, vamos construir as páginas e adicionar título, imagens, texto e vín-culos a elas.Lembre-se que uma página da Web é um arquivo HTML contendo infor-mações, e um site é uma coleção de páginas da Web relacionadas en-tre si e geralmente localizadas no mesmo servidor.Vamos inicialmente criar uma página em branco, mas você poderia abrirum documento HTML existente, independente de como tenha sido cria-do, e alterá-lo, e também criar um novo documento com base em ummodelo.Você já deve estar com uma janela de documento aberta, apresentandoUntitled Document (Untitled-1) Dreamweaver na barra de título, então nãoprecisará criar outra página em branco. Caso contrário, para criar umanova página em branco, selecione a opção Novo do menu Arquivo.Vamos começar a criar as páginas referentes aos filmes, (depois vocêcriará as outras). Em um outro capítulo faremos a ligação entre elas, ouseja, adicionaremos os links.Com o ponto de inserção posicionado no início da janela do documento,insira os textos de acordo com a próxima figura (se quiser, arraste aspaletas e os inspetores para outro lugar ou feche-os, pois assim terámais espaço disponível na janela do documento). Celta Informática - F: (11) 4331-1586 Página: 17
18. 18. Dreamweaver 3.0OBS: As informações referentes aos filmes (sinopse, elenco, etc) foramretiradas do jornal e do seguinte site: www.cinemaonline.com.br. Se qui-ser, poderá trocar os nomes dos filmes por outros à sua escolha.Salvando um documentoDepois de ter digitado o texto da figura anterior, vamos salvar a página.Para salvá-la, selecione a opção Salvar do menu Arquivo.OBS: Ao salvar os documentos, evite, sempre que possível, utilizar es-paços e caracteres especiais nos nomes de arquivos e pastas.Na caixa de diálogo exibida, selecione a pasta Agenda_Cultural na se-ção Salvar em, já que esta pasta armazenará todos os arquivos referen-tes ao site que estamos criando. No campo Nome do arquivo digitemissao_impossivel, como mostra a próxima figura. Depois clique nobotão Salvar. Celta Informática - F: (11) 4331-1586 Página: 18
19. 19. Dreamweaver 3.0Observe que agora na barra de título da janela do documento o nome doarquivo e a pasta onde ele está armazenado são exibidos entre parênte-ses. No entanto, o ato de salvar um documento e lhe dar um nome nãocorresponde ao ato de dar um título a uma página (o título da página aindacontinua sendo Untitled Document, ou seja, documento sem título).OBS: Por padrão, os PCs salvam os arquivos HTML com a extensão.htm e os Macs com a extensão html.Agora ative a janela do site (Site – agenda) e veja que o arquivo quesalvamos já faz parte da estrutura do site. Celta Informática - F: (11) 4331-1586 Página: 19
20. 20. Dreamweaver 3.0Definindo um título para a páginaÉ importante definir um título para as páginas, pois quando elas foremexibidas no navegador, o seu título aparecerá na barra de título deste,ajudando os usuários a controlar o que estão exibindo enquanto nave-gam, o título serve também para identificar a página nas listas de históri-co e marcadores. Se uma página não tiver um título, na barra do navega-dor aparecerá Documento sem título.Para alterar o título, clique com o botão direito do mouse em qualquerlugar da página e no menu de contexto que aparecerá, selecione a opçãoPropriedades da página, uma outra maneira é selecionando esta mes-ma opção no menu Modificar. Utilize qualquer um dos métodos paraque a caixa de diálogo Propriedades da página seja exibida.No campo Título digite Missao Impossivel, como mostra a figura anterior,depois clique no botão OK. Observe que o título aparecerá na barra detítulo da janela do documento e o nome do arquivo da página e a pasta naqual ele foi salvo aparecem entre parênteses, ao lado do título.OBS: Sempre que for definir nomes de arquivos ou títulos de página,procure não utilizar caracteres especiais (como é, ç) ou pontuação, comodois pontos, barras inclinadas ou pontos nos nomes dos arquivos, poisdepois que estes arquivos forem publicados na Web (colocados em um Celta Informática - F: (11) 4331-1586 Página: 20
21. 21. Dreamweaver 3.0servidor remoto), muitos servidores poderão converter esses caracteres,provocando a ruptura dos vínculos entre os arquivos, sendo também quemuitos robôs de mecanismos de pesquisa (programas que navegamautomaticamente pela Web, reunindo informações a serem indexadaspelos mecanismos de pesquisa) lêem o título das páginas e outras des-crições inseridas no cabeçalho e utilizam estas informações para indexaras páginas nos seus bancos de dados.Alterando o fundo da páginaComo você já percebeu, quando criamos uma nova página noDreamweaver, esta apresenta, por padrão, um fundo branco. Mas nóspodemos alterar essa condição: inserir uma imagem de fundo ou umaoutra cor diferente do branco.O Dreamweaver disponibiliza 216 cores (chamadas de “cores de nave-gador seguras”) para serem usadas nas páginas, sendo exatamenteessas cores utilizadas pelos navegadores Windows Explorer e Netscape.Para aplicar uma cor de fundo na página, abra a caixa de diálogo Propri-edades da página (através do menu Modificar), depois clique no botãoFundo. Celta Informática - F: (11) 4331-1586 Página: 21
23. 23. Dreamweaver 3.0Caso a imagem selecionada esteja localizada em uma pasta diferentedaquela que contém os arquivos do site, uma janela será exibida (comomostra a próxima figura). Clique no botão Sim para copiar o arquivo paraa pasta-raiz. Celta Informática - F: (11) 4331-1586 Página: 23
24. 24. Dreamweaver 3.0Após clicar em Sim, a caixa de diálogo Copiar o arquivo como aparece,com a pasta Agenda_Cultural já selecionada. Se quiser, renomeie o ar-quivo de imagem e clique no botão Salvar, depois clique no botão OK dacaixa de diálogo Propriedades da página.Observe, na figura anterior, que a imagem de fundo foi organizada lado alado para ocupar toda a área da página. Veja também que após o nomedo arquivo, na barra de título da janela, aparece o caractere *, indicandoque a página contém alterações que ainda não foram salvas. Sendo as-sim, selecione a opção Salvar do menu Arquivo.Formatando o textoVamos agora melhorar a aparência dos textos da página, alterando o tipoe tamanho das fontes, a cor de algumas palavras, etc. Mais para frente,nos próximos capítulos, veremos outros recursos que poderão ser apli-cados às páginas para torná-las ainda mais atraentes. Celta Informática - F: (11) 4331-1586 Página: 24
27. 27. Dreamweaver 3.0Como exemplo, selecione a palavra Sinopse da página que está abertana janela do documento, e aplique o estilo sublinhado. Faça a mesmacoisa com as palavras Elenco, Direção, Gênero, Classificação e Dura-ção. Depois aplique o estilo negrito no primeiro parágrafo, ou seja, notítulo do filme.Outra alteração que iremos realizar com os textos da página é em rela-ção à sua cor, ou seja, vamos aprender a modificar a cor da fonte daspalavras e textos da página. Selecione o primeiro parágrafo da página edepois, no inspetor de propriedades, clique no botão Cor do texto, comomostra a próxima figura.A Paleta de cores é exibida, sendo que você já conhece esta paleta quandoaprendeu a alterar a cor de fundo da página. Com o conta-gotas, cliqueem uma cor da paleta de cores ou da própria página (leve em considera-ção a cor (ou imagem) de fundo quando for escolher a cor da fonte).Depois selecione o restante do texto e altere a cor da fonte também.Utilizando o código hexadecimal da cor, você poderá copiar a cor de umtexto para outro ou então excluir a cor anteriormente definida. Para copiara mesma cor de um texto para outro, deixe o cursor posicionado no textoque já possui a cor, selecione o código hexadecimal (incluindo o sinal #)da caixa ao lado do botão Cor do texto, do inspetor de propriedades, ecopie-o para a área de transferência, pressionando Ctrl+C. Em seguidaselecione o texto cuja cor você quer alterar, posicione o cursor na caixapróxima ao botão Cor do texto, pressione Ctrl+V para colar o código edepois tecle Enter. Celta Informática - F: (11) 4331-1586 Página: 27
28. 28. Dreamweaver 3.0Para remover a cor da fonte de algum texto, selecione-o e depois apagueo código hexadecimal exibido no inspetor de propriedades. Não se es-queça de teclar Enter.Agora que sua página já está pronta (pelo menos por enquanto), salve-aatravés da opção Salvar do menu Arquivo.Como você já aprendeu a criar e salvar páginas, inserir textos, formatá-los, etc, crie outras páginas para outros títulos de filmes. Nas próximasfiguras você encontrará informações sobre alguns filmes, e que como jádissemos, você poderá criar páginas sobre outros títulos de filmes quedesejar.Lembre-se que para criar novos arquivos, ou páginas, basta selecionar aopção Novo do menu Arquivo, e que todos os arquivos devem ser sal-vos na pasta C:SitesAgenda_Cultural (o nome do arquivo e o título dapágina você encontrará na barra de título da janela referente a cada filmenas próximas figuras). Celta Informática - F: (11) 4331-1586 Página: 28
29. 29. Dreamweaver 3.0Após criar e salvar as páginas, altere o fundo de cada uma (trocando acor ou inserindo uma imagem), depois formate os textos (modifique otipo, tamanho e cor das fontes) e aplique, onde achar conveniente, osestilos de negrito, itálico e sublinhado. Por último salve cada página. Celta Informática - F: (11) 4331-1586 Página: 29
30. 30. Dreamweaver 3.0PARÁGRAFO E QUEBRA DE LINHANo Dreamweaver, sempre que você digita um texto (mesmo que sejauma única palavra) e pressiona Enter, este texto torna-se um parágrafo,sendo que cada parágrafo é separado de outros parágrafos por uma li-nha em branco. Assim, sempre que você pressionar Enter, o ponto deinserção pulará uma linha de espaço em branco e iniciará um novo pará-grafo.Observe, na próxima figura, que a página relativa ao filme 60 Segundosapresenta 7 parágrafos.Como já comentamos, toda página criada no Dreamweaver tem um có-digo em HTML associado a ela, e no inspetor de Origem de HTML (janelaque exibe o código da página), você verá que cada parágrafo é represen-tado pelo rótulo <p>. Celta Informática - F: (11) 4331-1586 Página: 30
31. 31. Dreamweaver 3.0Se você quiser, poderá mudar de linha (teclar Enter) sem inserir umalinha de espaço em branco. Para conseguir isto, basta utilizar uma que-bra de linha, ou seja, deixe o ponto de inserção no final da linha que vocêquer dividir e, ao invés de pressionar somente a tecla Enter, pressioneShift+Enter; a linha se dividirá e o ponto de inserção iniciará na próximalinha.Você também pode conseguir uma quebra de linha selecionando a op-ção Quebra de linha do menu Inserir. No código HTML, o rótulo querepresenta uma quebra de linha é <br>.Na próxima figura você pode ver que depois do segundo parágrafo inse-rimos uma quebra de linha. Observe que um ícone é exibido no final dalinha onde inserimos uma quebra de linha. Celta Informática - F: (11) 4331-1586 Página: 31
32. 32. Dreamweaver 3.0Agora que você já entendeu o que representa um parágrafo noDreamweaver, podemos aplicar um estilo a um parágrafo, ou seja, pode-mos aplicar o formato de Cabeçalho 1 (ou Título 1), Cabeçalho 2 (ouTítulo 2), e assim por diante, até o Cabeçalho 6. Entre um cabeçalho e otexto seguinte há sempre uma quebra de parágrafo.Como exemplo, na página Premonicao, selecione o primeiro parágrafoe, no inspetor de propriedades, retire o estilo Negrito (clicando no íconecorrespondente) e altere o tamanho da fonte para Nenhum (essas modi-ficações estão sendo feitas para você perceber melhor como o estiloCabeçalho 1 irá alterar o texto).Com o texto selecionado, clique no menu drop-down Formato do inspe-tor de propriedades e selecione o formato Cabeçalho 1. Celta Informática - F: (11) 4331-1586 Página: 32
33. 33. Dreamweaver 3.0O texto se tornará um título, isto é, terá uma alteração de tamanho, ficaráem negrito, e uma linha em branco será inserida depois do título.Agora, no código HTML, o parágrafo não estará mais associado ao rótulo<p>, e sim ao rótulo <h1>, de Cabeçalho 1 (ou Título 1).Assim, na sua página, você poderá aplicar títulos diferenciados aos tex-tos, e para remover um estilo de parágrafo, selecione a opção Nenhumno menu drop-down Formato do inspetor de propriedades.A PALETA DE HISTÓRICOQuando você precisar desfazer a última ação que realizou em uma pági-na, selecione a opção Desfazer do menu Editar (ou pressione Ctrl + Z),como em qualquer outro programa. O Dreamweaver, além desta opção,também permite que várias etapas sejam desfeitas simultaneamente,através da Paleta de histórico.A Paleta de histórico contém uma lista com todas as alterações que vocêrealizou na página ativa, na ordem em que foram realizadas, e atravésdela será possível desfazer uma ou mais etapas, executá-las novamen-te e criar novos comandos para automatizar tarefas repetitivas. Para abrira paleta de histórico, selecione a opção Histórico do menu Janela. Celta Informática - F: (11) 4331-1586 Página: 33
34. 34. Dreamweaver 3.0De acordo com a figura anterior, para desfazer a etapa (“Excluir”), bastaarrastar o polegar para a etapa acima, a etapa desfeita se tornará cinza.Esta ação é a mesma coisa que selecionar a opção Desfazer do menuEditar.Agora se quiséssemos desfazer as últimas três ações simultaneamen-te, bastaria clicar no canto esquerdo da etapa Aplicar a fonte: ArialRounded para que o polegar seja automaticamente colocado nesta eta-pa ou então arrastar o polegar até esta etapa.Para definir o número de etapas que a paleta de histórico mostrará, sele-cione a opção Preferências do menu Editar, na caixa de diálogo exibidaselecione Geral na lista de categorias e digite o Número máximo de eta-pas da paleta de histórico na caixa de texto apropriada. Celta Informática - F: (11) 4331-1586 Página: 34
35. 35. Dreamweaver 3.0FECHANDO E ABRINDO ARQUIVOS HTMLPara fechar os arquivos HTML, ou seja, as páginas que estão abertas najanela do documento, clique no botão Fechar, localizado no canto direitoda barra de título da janela ou então escolha a opção Fechar do menuArquivo. Se a página contiver alterações que ainda não foram salvas,uma caixa de diálogo perguntando se você deseja salvar essas altera-ções aparecerá, clique no botão Sim (para salvar), Não (para fechar semsalvar) ou Cancelar (para que a página continue aberta). Com este pro-cedimento, somente a janela do documento, que exibe a página, seráfechada. Feche, agora, o arquivo missao_impossivel.htm.OBS: Se você utilizar a opção Sair do menu Arquivo (ao invés de Fe-char), todas as janelas do Dreamweaver, incluindo a janela do site, serãofechadas.Para abrir arquivos você também tem mais de uma opção: através dajanela do site ou da janela do documento. Se a janela do site estiver aber-ta, dê um clique duplo no arquivo que deseja abrir, desta maneira a janelado documento exibirá a página desejada. Celta Informática - F: (11) 4331-1586 Página: 35
36. 36. Dreamweaver 3.0Para abrir um arquivo através da janela do documento, selecione a op-ção Abrir do menu Arquivo. Na caixa de diálogo apresentada, localize oarquivo que deseja abrir e selecione-o, em seguida clique no botão Abrir.Você também pode abrir os quatro últimos arquivos que você editou noDreamweaver selecionando seus nomes no menu Arquivo da janela dodocumento. Celta Informática - F: (11) 4331-1586 Página: 36
37. 37. Dreamweaver 3.0OBS: Cada arquivo aberto no Dreamweaver é exibido em uma janela dedocumento diferente, assim, se você tiver 3 páginas abertas, tambémterá 3 janelas de documentos abertas, as quais são exibidas na barra detarefas do Windows. Mas, se você quiser apenas uma janela aberta porvez, você pode alterar as preferências do Dreamweaver, selecionando aopção Preferências do menu Editar. Na caixa de diálogo exibida, sele-cione a Categoria Geral e desmarque a caixa de opção Abrir os arquivosem outra janela.Depois clique no botão OK. Desta maneira, a janela do documento con-terá apenas uma página aberta, e quando for abrir uma outra página, aprimeira será fechada e não armazenada na mesma janela, como ocor-re na maioria dos outros programas. Celta Informática - F: (11) 4331-1586 Página: 37
38. 38. Dreamweaver 3.0RECURSOS ADICIONAISNeste capítulo iremos estudar alguns outros recursos que podem serutilizados e aplicados nas páginas que você criou.VERIFICAR ORTOGRAFIAO comando Verificar ortografia faz a verificação e correção ortográficados textos de sua página. Você pode verificar apenas uma seleção detexto ou a página inteira.Antes de iniciar a correção ortográfica, a página a ser verificada deveráestar aberta na janela do documento, como exemplo, abra a páginaPremonicao. Posicione o ponto de inserção no início da página (ou emum outro lugar onde queira começar a verificação ortográfica), depoisselecione a opção Verificar a ortografia do menu Texto. Uma caixa dediálogo será apresentada, e já exibe a primeira palavra não localizada. Celta Informática - F: (11) 4331-1586 Página: 38
39. 39. Dreamweaver 3.0A palavra que é exibida no campo Palavra não localizada no dicionárionão pertence ao dicionário ortográfico do Dreamweaver. Você pode re-solver este problema clicando em algum dos botões da caixa de diálogoVerificar a ortografia:· Se a palavra está correta mas não pertence ao dicionário e você gos- taria de adicioná-la ao seu dicionário pessoal, clique no botão Adicio- nar ao dicionário pessoal. Assim, uma futura verificação ortográfica não questionará esta palavra.· Se a palavra está correta mas você não quer incluí-la em seu dicioná- rio pessoal, clique no botão Ignorar;· Se a palavra está correta mas você não quer incluí-la em seu dicioná- rio pessoal, e acha que ela aparece mais de uma vez na página, clique no botão Ignorar todas;· Se a palavra estiver incorreta e sua ortografia correta aparece na cai- xa de listagem Sugestões, selecione a palavra correta e clique no bo- tão Alterar;· Se você acha que a palavra foi digitada incorretamente mais de uma vez, selecione a palavra correta na caixa Sugestões e clique no botão Alterar todas;· Você também pode corrigir manualmente a palavra digitando sua for- ma correta na caixa de texto Alterar para e depois clicar no botão Alte- rar.No nosso caso a palavra vôo não foi encontrada, mas como ela estácorreta e poderemos utilizá-la em outras páginas, clique no botão Adici-onar ao dicionário pessoal. Uma outra palavra será destacada e vocêterá que decidir qual opção utilizar, realize o mesmo procedimento atéque uma caixa de diálogo exibindo a mensagem Verificação ortográficafoi concluída apareça. Depois salve esta página e faça a verificação orto-gráfica nas outras páginas que você criou.OBS: Para confirmar ou alterar o dicionário que o Dreamweaver utilizapara realizar a verificação ortográfica, selecione a opção Preferênciasdo menu Editar. Na Categoria Geral da caixa de diálogo Preferênciasvocê pode alterar o idioma do dicionário através do menu pop-up do campoDicionário. Celta Informática - F: (11) 4331-1586 Página: 39
40. 40. Dreamweaver 3.0ALINHAMENTO DE TEXTOQuando inserimos textos nas páginas, o alinhamento padrão que oDreamweaver utiliza é o esquerdo, mas podemos também alinhar todo otexto ou parte dele com a margem direita ou no centro da página.Para alterarmos o alinhamento de um texto (sendo que este texto podeser um parágrafo, um título, uma lista ou uma página inteira) primeirodevemos selecioná-lo e depois escolher o alinhamento desejado. Comoexemplo, vamos centralizar o texto que representa o título da páginapremonicao.htm.Selecione o texto Premonição e, no inspetor de propriedades, clique nobotão Alinhar no centro (ao invés de selecionar o texto, você tambémpode deixar o ponto de inserção posicionado no parágrafo que será ali-nhado).Como você observou na figura anterior, o texto fica centralizado em rela-ção a ambas as margens da página. Você também pode alinhar os tex-tos através da opção Alinhamento do menu Texto.Centralize também os títulos das outras páginas (o primeiro parágrafoque corresponde ao nome de cada filme), depois salve todas elas. Celta Informática - F: (11) 4331-1586 Página: 40
41. 41. Dreamweaver 3.0INSERIR LINHA HORIZONTALVocê pode inserir, na sua página, linhas (ou réguas) horizontais para se-parar e organizar informações, separar visualmente o texto e os objetos,ou simplesmente para mudar o visual da página. Tais linhas poderão tersuas propriedades modificadas como a altura, largura, o alinhamento,etc.Estando com a página Premonicao (ou outra) aberta na janela do docu-mento, posicione o cursor, por exemplo, no final do terceiro parágrafo(depois da palavra morte.). Agora selecione a opção Régua horizontaldo menu Inserir para que uma linha horizontal, que vai de um lado aooutro da página, seja inserida (a linha estará, inicialmente, selecionada,clique em qualquer lugar da página para retirar a seleção).OBS: A linha horizontal também pode ser inserida clicando-se no botãoInserir régua horizontal ( ) da paleta de Objetos, só não se esqueçade deixar o ponto de inserção posicionado no local desejado antes declicar no botão.Posicione o cursor no final do penúltimo parágrafo e insira outra linhahorizontal. Celta Informática - F: (11) 4331-1586 Página: 41
43. 43. Dreamweaver 3.0Clique no botão Localizar o próximo para o Dreamweaver encontrar oque você está procurando. Se a palavra existir na página, ela será desta-cada (muitas vezes é necessário mover a caixa de diálogo Localizar paraver a palavra destacada). Se o Dreamweaver não conseguir localizar oitem a palavra especificada, uma caixa de diálogo aparecerá informandoque o item não foi localizado.Clique novamente no botão Localizar o próximo para que outra palavracarro seja encontrada, quando a pesquisa terminar o Dreamweaver exi-birá uma caixa de mensagem.Para fechar a caixa de diálogo Localizar, clique no botão Fechar.Abaixo você encontra uma descrição mais completa sobre os itens dacaixa de diálogo Localizar:• Campo Localizar em, cujo menu drop-down contém algumas opções: •Documento atual: a busca do texto especificado é feita somente no documento ativo. Celta Informática - F: (11) 4331-1586 Página: 43
45. 45. Dreamweaver 3.0Em seguida clique no botão Localizar o próximo para que o texto (carro)seja destacado, depois clique no botão Substituir para trocá-lo pelo textosubstituto (veículo). Após esta ação a próxima palavra carro já é desta-cada, e você só precisa clicar no botão Substituir se quiser trocá-la pelapalavra veículo. Se por algum motivo não quiser que a palavra destacadaseja substituída, clique no botão Localizar o próximo ao invés de clicarem Substituir. Celta Informática - F: (11) 4331-1586 Página: 45
47. 47. Dreamweaver 3.0Como mostra a própria caixa de diálogo da figura anterior, o arquivo es-colhido não está localizado na pasta-raiz do site, portanto, uma janelaserá exibida:Clique no botão Sim para copiar o arquivo figpatriota.jpg para a pasta-raiz. A figura é inserida na página, e já aparece selecionada. Celta Informática - F: (11) 4331-1586 Página: 47
51. 51. Dreamweaver 3.010 - Orig. Baixa: se a imagem que você inseriu na página demorar paraaparecer no navegador, você pode especificar uma outra imagem menor(em preto e branco, que carrega mais rapidamente) para ser carregadaantes da imagem principal. Assim, definindo uma imagem de baixa reso-lução, evitará que os visitantes do site esperem muito tempo para veremalguma coisa.11 - Borda: se quiser que a imagem apresente uma borda, digite umnúmero (em pixels) nesta caixa de texto. Insira o número zero para quenão haja nenhuma borda.12 - Botão Atualizar: um clique neste botão faz com que os valores doscampos L e U retornem ao tamanho original.13 - Botão Editar: se você tiver um editor de imagens associado aoDreamweaver, um clique neste botão abrirá a imagem no editor parapoder ser modificada (para especificar um editor de imagens externo,selecione Preferências no menu Editar e depois na seção Categoria,selecione Editores externos).OBS: Quando alterar algum campo do inspetor de propriedades, pressi-one Enter ou clique na imagem em miniatura (que corresponde ao botãoAplicar) para que as alterações sejam refletidas na imagem da página.Lembre-se sempre que quanto menor for a imagem (em Kilobytes (K)),mais rápido ela carregará.CRIANDO IMAGENS CAMBIÁVEISAs imagens cambiáveis são comumente utilizadas nos Web sites, poisprovocam efeitos interessantes. Estas imagens são substituídas por ou-tras quando o usuário passa o ponteiro do mouse sobre elas ou dá umclique, assim, tais imagens possuem um comportamento anexado a elas.Um comportamento é uma combinação entre um evento e uma ação,onde você define qual evento acionará uma determinada ação. Por exem-plo: quando o usuário mover o mouse sobre uma imagem (um evento),um som poderá ser reproduzido (uma ação). Celta Informática - F: (11) 4331-1586 Página: 51
53. 53. Dreamweaver 3.0Na Web, a home page padrão da grande maioria dos sites apresenta onome index.htm, assim, qualquer site que você acessar, este arquivoserá o primeiro a ser exibido no navegador (“arquivo de apresentação dosite”). Vamos, então, salvar esta página que estamos criando com o nomeindex.htm.Selecione a opção Salvar do menu Arquivo. Na caixa de diálogo SalvarComo, localize a pasta Agenda_Cultural (que contém todos os arquivosdo site), e na caixa de texto Nome do arquivo, digite index.htm (comomostra a próxima figura). Depois clique no botão Salvar.Agora vamos definir um título para essa página. Selecione a opção Pro-priedades da página no menu Modificar. Na caixa de diálogo de mes-mo nome, digite Agenda Cultural na caixa de texto Título, depois clique nobotão OK. Celta Informática - F: (11) 4331-1586 Página: 53
54. 54. Dreamweaver 3.0Com a página quase completa, só falta inserirmos as imagens cambiáveise depois os links para as outras páginas que criamos anteriormente.Para criar uma imagem cambiável, precisamos de duas imagens, asquais devem possuir as mesmas dimensões (largura e altura). Uma ima-gem (chamada primária) será inicialmente apresentada pelo navegador,enquanto a outra só será mostrada quando o ponteiro do mouse forposicionado sobre a imagem primária.OBS: Estas imagens deverão ser previamente criadas em algum pro-grama de criação/tratamento de imagens, como o Photoshop, Fireworks,etc, e depois copiadas para a pasta do site.Posicione o ponto de inserção entre o título da página e o texto de apre-sentação (deixe-o centralizado). Na paleta de objetos, clique no botãoInserir imagem cambiável ( ), ou selecione a opção Imagemcambiável do menu Inserir. A caixa de diálogo Inserir imagem cambiávelaparecerá: Celta Informática - F: (11) 4331-1586 Página: 54
55. 55. Dreamweaver 3.0Nesta caixa de diálogo, digite um nome para o objeto que está sendoinserido e defina qual será a imagem original e a imagem cambiável. Nacaixa de texto Nome da imagem digite botao1, clique no primeiro botãoProcurar e selecione o arquivo da imagem original, depois clique no se-gundo botão Procurar e selecione o arquivo da imagem cambiável (porenquanto não vamos inserir nada na última caixa de texto).OBS: Deixe selecionada a opção Pré-carregar a imagem cambiável paraque a imagem cambiável seja carregada no cache do navegador duranteo carregamento da página, a fim de que não seja notada nenhuma pausaentre a substituição de uma imagem por outra.Clique no botão OK. Agora posicione o ponto de inserção no lado direitoda primeira imagem e insira uma outra imagem cambiável, onde esta sechamará botao2 (lembre-se que estas imagens constituirão a barra denavegação da primeira página do site). Repita o procedimento até inseriras outras imagens (botao3 e botao4), como mostra a próxima figura. Celta Informática - F: (11) 4331-1586 Página: 55
56. 56. Dreamweaver 3.0De acordo com a figura anterior, selecione cada imagem e, no inspetorde propriedades, digite 10 no campo de texto Espaço H para que haja umespaço entre elas.Para testar o efeito das imagens cambiáveis, devemos abrir a página emum navegador. Estando com a página aberta na janela do documento,pressione a tecla F12 (isso se o seu navegador for o Internet Explorer) ouselecione a opção Visualizar no navegador do menu Arquivo e esco-lha o navegador desejado.Passe o mouse sobre as imagens e veja como a imagem original é rapi-damente substituída pela imagem cambiável. Feche o navegador pararetornar à janela do documento. Celta Informática - F: (11) 4331-1586 Página: 56
58. 58. Dreamweaver 3.0VÍNCULOS DE CAMINHO RELATIVOVamos, agora, definir os links para as imagens cambiáveis que inseri-mos na página principal do site (index.htm). Como a página que conteráo link e o documento de destino estão na mesma pasta, então utilizare-mos os vínculos de caminho relativo.Antes de criarmos os links, deveremos criar uma outra página, onde aimagem do botão Filmes da página principal conterá um link para estanova página. Esta página, que terá como título Filmes, exibirá os nomesdos filmes, onde cada nome será um link para a página apropriada.Selecione a opção Novo do menu Arquivo. Salve esta nova página napasta Agenda_Cultural e dê o nome de filmes.htm ao arquivo. Depoisexiba a caixa de diálogo Propriedades da página e digite Filmes na caixade texto Título. Por fim, insira o conteúdo na página Filmes de maneiraque fique parecido com a próxima figura. Celta Informática - F: (11) 4331-1586 Página: 58
59. 59. Dreamweaver 3.0Agora, exiba a página Agenda Cultural (arquivo index.htm) e clique nosegundo botão para selecioná-lo, assim as propriedades da imagem serãoexibidas na janela Inspetor de propriedades (se a janela do inspetor nãoestiver aberta, selecione a opção Propriedades do menu Janela).No inspetor de propriedades, clique na pasta ao lado da caixa de textoVínculo (como mostra a figura a seguir) e encontre o arquivo que seráexibido quando a imagem (ou o botão) receber um clique, ou seja, seleci-one o arquivo filmes.htm.Abaixo da caixa de texto Vínculo, no inspetor de propriedades, existe umaoutra caixa denominada Destino. O campo Destino é um atributo de linkso qual especifica onde o link em questão deve ser aberto: na mesmajanela ou em uma nova. Clique na setinha do campo Destino e veja asopções existentes. Celta Informática - F: (11) 4331-1586 Página: 59
63. 63. Dreamweaver 3.0Quando visualizamos qualquer arquivo no navegador, o Dreamweavercria um arquivo temporário (cujo nome inicia-se com as letras TMP) queele utiliza como o arquivo de visualização de navegador (esse arquivopode ser visto na janela do Site, já que ela exibe todos os arquivos dosite). Portanto, se você modificar o arquivo no Dreamweaver e depois najanela do navegador clicar no botão Atualizar ou Refresh, a versão maisatual do arquivo não será mostrada, será necessário fechar a janela donavegador e visualizar o arquivo novamente. Celta Informática - F: (11) 4331-1586 Página: 63
65. 65. Dreamweaver 3.0Agora, na janela do documento, selecione a palavra família e, na caixa detexto Vínculo do inspetor de propriedades, digite o sinal de libra (#) segui-do do nome da âncora, ou seja, digite #familia (sem espaço entre o sinale o nome). Depois pressione a tecla Enter. Celta Informática - F: (11) 4331-1586 Página: 65
66. 66. Dreamweaver 3.0A palavra família agora está vinculada com a âncora identificada. Paraver o resultado, exiba esta página no navegador.OBS: Se a âncora estiver na mesma página (como foi o nosso caso),insira na caixa de texto Vínculo apenas o sinal de libra seguido do nomeda âncora. Se a âncora estiver em uma página e o link para ela em outra(mas ambos na mesma pasta), digite na caixa de texto Vínculo o nomeda página seguido do sinal de libra e do nome da âncora (algo como:nomedapágina.htm#nomedaâncora). Se a âncora estiver em um outrolocal da Internet, será necessário digitar o endereço absoluto e no final onome da página mais o sinal e o nome da âncora (exemplo: http://www.site.com.br/nomedapágina.htm#nomedaâncora).Elementos invisíveisQuando inserimos uma âncora identificada na imagem do tópico anteri-or, uma pequena âncora apareceu ao lado da imagem.OBS: Para exibir ou ocultar os elementos invisíveis (no caso, a pequenaâncora), utilize a opção Elementos invisíveis do menu Exibir. Celta Informática - F: (11) 4331-1586 Página: 66