treinamento prático em dream waver
DESCRIPTION
Curso passo a passo de DreamWaver.TRANSCRIPT
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 1/130
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 2/130
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 3/130
© 2006 by Digerati BooksTodos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.Nenhuma parte deste livro, sem autorização prévia por escrito da editora,poderá ser reproduzida ou transmitida sejam quais forem os meios emprega-dos: eletrônicos, mecânicos, fotográficos, gravação ou quaisquer outros.
Diretor EditorialLuis Matos
Assistência EditorialMonalisa NevesErika Sá
Preparação dos originaisJeferson Ferreira
RevisãoLuciana Salgado Guimarães Moreira
Projeto GráficoDaniele Fátima
DiagramaçãoLuciane S. Haguihara
Dados Internacionais de Catalogação na Publicação (CIP)(Câmara Brasileira do Livro, SP, Brasil)
P659h Pinto, Sandra Rita B.
Treinamento prático em Dreamweaver/
Sandra Rita B. Pinto − São Paulo : Digerati
Books, 2006.
128 p.
ISBN: 85-7702-047-9
1.Dreamweaver. – Programa de computador.
2. Web Design. I. Título.
CDD 005.3
Universo dos Livros Editora Ltda.Rua Haddock Lobo, 347 – 12º andarCEP 01414-001 São Paulo/SPFone: (11) 3217-2600 Fax: (11) 3217-2617www.universodoslivros.com.bre-mail: [email protected]
Conselho Administrativo: Alessandro Gerardi, Alessio Fon Melozo,Luis Afonso G. Neira, Luis Matos e William Nakamura.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 4/130
Prefácio
A diferença entre uma coisa bem-feita e outras não tão bem-feitas
é o modo como o trabalho começa. Existe um princípio metafísico
que diz que uma coisa não pode nascer maior do que o objeto ou ser
que a gerou. Aplicado ao mundo dos trabalhos profissionais, sobre-
tudo na área de informática, esse princípio pode ser bem exempli-
ficado: da bagunça não pode nascer algo organizado, da mediocri-
dade não pode nascer nada sensacional, do simplório não vai surgir
nada sofisticado...
Quando a Internet firmou-se, na década de 1990, juntamente com
a multidão das empresas pontocom que aproveitaram a explosão da
Rede Mundial para ganhar dinheiro, a programação ou desenho depáginas em HTML se tornou equivalente a um curso de engenharia
em alguma coisa muito sofisticada, como fazer foguetes ou conser-
tar reatores nucleares. Criou-se até uma profissão, o webdesign, o
“desenhista de webs”, um sujeito responsável por tornar uma página
funcional e atraente ao mesmo tempo.
Desde o início da Internet, várias pesquisas já foram feitas sobre
o tempo que as pessoas gastam olhando uma página Web a procura
do que desejam. Os resultados mostram que, se o desenho de uma
página não atrai o usuário em até 5 segundos, ele se “desliga” doconteúdo e digita outro endereço. E essa chance é única: ao contrá-
rio do que acontece com o controle remoto da televisão, o usuário
da Internet não dá um zapping por tudo que está disponível e retorna
no final ao mesmo canal.
Bom, não é a toa que as empresas pontocom faliram... Páginas
bonitas e atraentes – como as que as pesquisas advogam como as
ideais para a conquista da audiência – não podem sair de algo tão
simples, linear e, literalmente, textual como o HTML. HTML puro,processado em modo texto, gera conteúdo escrito formatado e dis-
tribuído em certo leiaute – uma página limpa e organizada (ou nem
tanto, dependendo do designer), mas nada mais que isso. Não exis-
tem grandes recursos, ou ao menos não existem recursos que va-
lham a pena. Afinal, o maior não pode sair do menor...
Por que não fazer, então, com que a fonte fique maior? Foi o que
a Macromedia fez ao lançar o Dreamweaver, uma ferramenta gráfica
de produção de sites que permite a edição manual de código HTML,
ao mesmo tempo em que possui uma interface no formato inserir-arrastar-e-soltar, comum à maioria dos programas do Windows.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 5/130
Você quer trabalhar com formulários dinâmicos e scripts? O Dre-
amweaver possibilita a inserção de objetos de outras linguagens de
programação ainda durante o desenvolvimento da página, e ajuda
a atrelar uma ação programada a um objeto criado anteriormente.
Quer cria menus deslizantes? O Dreamweaver foi a primeira ferra-menta que possibilitou a criação desse tipo de design, muito antes
das facilidades do Flash e do Java.
Por falar em Flash, o Dreamweaver também permite a inserção
de conteúdo Flash dentro de páginas HTML, ou a montagem de ban-
ners e janelas de aplicativo. Isso sem falar nas opções de segurança,
servidor FTP próprio, arquivos virtuias...
Largue seus códigos HTML escritos no Notepad, esqueça o
Front Page, relegue os editores de código “simpáticos” ao esqueci-
mento... Se você quer uma coisa grande, bem-vindo ao mundo do
Dreamweaver.
Tadeu Carmona
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 6/130
Sumário
Capítulo 1– Introdução .........................................6
Capítulo 2 – Iniciando o Dreamweaver ..................9
Capítulo 3 – Trabalhando com textos ....................17
Capítulo 4 – Trabalhando com imagens .................24
Capítulo 5 – Tabelas ...............................................29
Capítulo 6 – Folhas de estilos ................................45
Capítulo 7 – Modelos e bibliotecas ........................52
Capítulo 8 – Molduras ............................................64
Capítulo 9 – Camadas ............................................71
Capítulo 10 – Links .................................................79
Capítulo 11 – Interatividade ..................................86
Capítulo 12 – Formulários .....................................96
Capítulo 13 – Criando banners ..............................107
Capítulo 14 – Editando códigos HTML ...................115
Capítulo 15 – Publicando seu site ..........................123
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 7/130
6Treinamento prático em Dreamweaver
Introdução
Antes de começarmos a elaborar páginas na Web, é importanteter conhecimento de alguns conceitos que podem servir de basepara todo o trabalho. O primeiro, e o mais importante, é: qual a fina-lidade de utilizar o Dreamweaver, sendo que posso criar páginas emHTML sem ter que gastar tanto com software?
A resposta é simples. O Dreamweaver, além de ser um editor deHTML, fornece recursos de projetos diferenciados que permitem co-dificar e desenvolver páginas, sites e aplicações Web. E tudo issosem considerar que ele auxilia na construção de aplicações dinâmi-cas mediante bancos de dados nas linguagens de servidor, como o
ASP, ASP.NET, PHP, ColdFusion e JSP.Para quem tem conhecimentos em HTML, o Dreamweaver per-mite manipular e codificar de forma rápida todos os projetos, já quepara codificar nessa linguagem é preciso não esquecer de inicializare finalizar tags.
Conceitos básicos
Ao longo de todo o livro, falaremos muito sobre sites, páginas
e outros conceitos relacionados à Internet. Portanto, é melhor ir se familiarizando com alguns termos:
• HTML ( HyperText Markup Language): linguagem utilizada parainserir textos na Internet. É definida em tags, ou marcas, que indicamo que é necessário na página. Essas tags sempre aparecem entre ossímbolos < >, como, por exemplo, <b> Palavras em negrito</b>.Ao nos depararmos com o código, o HTML dá início ao recurso ne-grito e finaliza o comando. Nesse caso, </b> finaliza o recurso deexibição em negrito;
Nota: toda tag deve ser iniciada e finalizada.
• Hipertexto: conceito que define a navegação entre segmentosde textos fora de uma seqüência linear. Na verdade, é como um tex-to interligado a diversos conteúdos (links);
• Hipermídia: associação entre elementos de mídia, como tex-tos, fotografias, sons e vídeos. Tais elementos possuem relação com
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 8/130
7Introdução
o tema escolhido. Em um site de pesquisa, por exemplo, a partir deum clique em um determinado assunto, podemos disponibilizar ou-tros pontos de vista sobre o tema;
• Web: é a forma como nos referimos a World Wide Web, a fa-
mosa WWW. Se buscarmos apoio na tradução da palavra, teríamosteia, o que não deixa de ser verdade, já que se trata de uma teia deinformações difundida mundialmente;
• Páginas: são arquivos que armazenam um conjunto de infor-mações. Normalmente, possuem a extensão .html ou .htm;
• Site: local na Internet em que são armazenadas e disponibiliza-das as Webs. Trata-se de um conjunto de Webs armazenadas em umou vários computadores;
• Home page: é a primeira página, também conhecida como pá-gina de abertura. Pode conter ou não links inseridos a fim de levar ousuário a outras páginas, assim como um índice em um livro;
• Web server: servidor da Web equipado com software adequa-do para armazenar as Webs de uma pessoa ou empresa, gerenciandotodo o acesso ao site. Sempre que você criar um site, deverá disponi-bilizá-lo em um servidor de acesso que irá, de fato, colocá-lo no ar;
• Navegador Web: software que permite aos usuários navega-rem pela Web. O mais conhecido é o Internet Explorer;
• Web designer: profissional responsável por projetar todo o sis-tema de Webs;• Website: conjunto de páginas existentes em um servidor;• Site local: arquivos localizados em uma determinada pasta na
unidade de disco, servindo de espelhos ao site remoto;• Site remoto: site do Web server que todos os visitantes vão
acessar. Isso significa que foram feitos os “uploads” de cada infor-mação existente em sua pasta-raiz para o servidor.
Criando um visual
Antes de utilizar qualquer tipo de software é importante pegaruma folha e fazer um rascunho de todo o layout de seu site, definin-do como os elementos devem ser distribuídos na página inicial e es-colhendo todos os tópicos, imagens e sons que pretende visualizar.
Para tanto, faça um desenho de toda essa organização por meiode links, ou seja, desenhe toda a sua estrutura, qual página levará à
outra. Veja um exemplo de disponibilização das informações:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 9/130
8Treinamento prático em Dreamweaver
Figura 1.1.
Enumere todas as páginas que devem ser incluídas, assim como
as que devem fazer parte do menu e da área de links. Dessa forma,
você não se perde, pois definiu os tópicos principais de sua página e
de todas as outras ligadas a ela.
Agora sim você pode pôr a mão na massa. Para isso, nos próxi-
mos capítulos exploraremos o Dreamweaver e todas as suas ferra-
mentas.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 10/130
9Iniciando o Dreamweaver
Iniciando o Dreamweaver
Por padrão, o Dreamweaver está localizado na pasta Macrome-dia. Portanto, caso não possua um atalho na área de trabalho, vocêdeve utilizar o menu Iniciar > Todos os programas > Macrome-
dia > Macromedia Dreamweaver MX 2004 para iniciar a utilizaçãodo aplicativo.
Ao abrir o Dreamweaver pela primeira vez, será exibida uma cai-xa de diálogo que permite ao usuário escolher qual o layout da áreade trabalho. Vejamos nossas opções:
Figura 2.1.
• Design: é a área de trabalho integrada, na qual a janelaDocument e todos os painéis são ligados por uma janela de aplica-ção maior. Nesse caso, os painéis estarão localizados à direita datela. É o layout mais recomendado para todos os tipos de usuários;
Figura 2.2.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 11/130
10Treinamento prático em Dreamweaver
• Code: é a mesma área de trabalho, mas, nesse caso, os painéisestão localizados à esquerda. Por outro lado, a janela Document exi-be o código. Esse tipo de área de trabalho é recomendado aos usu-ários já acostumados com códigos e linguagens de programação,
principalmente em HTML.
Figura 2.3.
Para ocultar a página de abertura que aparece sempre que oDreamweaver é carregado, use a opção Don´t show again. Se mu-dar de idéia, use o menu Edit > Preferences e ative a opção Show
start page.Para iniciar o Dreamweaver, utilize a opção Design e um clique
em OK.
Criando uma página em branco
Para verificar todos os elementos da área de trabalho (workspace),devemos criar uma página em branco. Para tanto, siga o menu File >New; será apresentada a janela New Document. Isso feito, simples-mente ative a opção Create, sem escolher qualquer outra opção,para visualizar a área de trabalho.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 12/130
11Iniciando o Dreamweaver
Figura 2.4.
Nota: para fechar o documento atual, siga o menu File > Close ou utilize o atalho Ctrl + W.
A área de trabalho
Figura 2.5.
Vejamos os elementos encontrados na área de trabalho:• Barra de ferramentas Insert: armazena os atalhos (botões) que
permitem a inserção de vários objetos, tais como imagens, tabelas,camadas e outros. Possui várias categorias, de acordo com o objetoaplicado no documento, que são alteradas conforme utilizamos aseta voltada para baixo ao lado da opção Common. Veja as opções
da barra Insert:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 13/130
12Treinamento prático em Dreamweaver
Figura 2.6.
• Barra de ferramentas Document: organiza atalhos (botões) quepermitem visualizar o documento de forma diferente. São eles osmodos Code, Design e Split, que contém as duas visualizações etodas as opções de visualização do documento e da transferênciaentre o site remoto e local;
• Barra de ferramentas Standard: contém atalhos com opera-ções básicas do menu, tais como criar um novo arquivo, salvar, re-
cortar, colar e outros;• Barra de status: guarda todas as informações sobre o documen-
to em uso, como o seletor de tag, tamanho da janela, do documentoe tempo estimado de download;
• Janela Document: exibe o documento atual;• Inspetor Properties: exibe todas as propriedades dos objetos
selecionados na janela do documento. Permite, também, a alteraçãode cada uma das propriedades;
• Grupo de painéis: conjunto de painéis agrupados sob um tí-tulo. Esses painéis podem ser deslocados na tela e têm a forma de
janelas.
É importante que antes de dar início à criação do site seja feitauma pasta na área de trabalho do Windows capaz de armazenar to-dos os objetos e páginas do site. Como vimos, essa pasta vai contero site local que futuramente servirá para passar as informações aoservidor da Web que você utiliza.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 14/130
13Iniciando o Dreamweaver
Criando um site local
Nessa etapa, utilizaremos o Assistente de criação para nos ajudarna criação de um site local. Para isso, abra o menu Site > Manage
Site. Observe a caixa de diálogo que será aberta:
Figura 2.7.
Utilize o botão New e a opção Site para visualizar a janela de de-finição de seu site:
Figura 2.8.
Na primeira etapa, deve ser definido o nome do site. Para tanto,digite MeuSite e pressione o botão Next. Observe a janela que será
aberta:
Figura 2.9.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 15/130
14Treinamento prático em Dreamweaver
A segunda etapa irá perguntar ao usuário se ele deseja trabalharcom uma tecnologia de servidor ou se o site será estático, ou seja,sem a tecnologia de um servidor; para isso, use a opção No, I do not
want to use a server technology e pressione Next novamente.
Nessa etapa você deve informar como deseja trabalhar com os ar-quivos, dos quais, por padrão, faz-se cópias locais na máquina e, emseguida, upload no servidor (Edit local copies on my machine, then
upload to server when ready). Também deve definir qual o local emque o site será armazenado, ou seja, o nome da pasta-raiz com todosos elementos do site. Caso queira alterar a localização, use a opçãorepresentada pela pasta amarela ao lado do caminho atual e indiquea nova pasta. Para concluir, pressione o botão Salvar.
Figura 2.10.
Ao pressionar o botão Next você deve indicar se irá se conectarao servidor remoto. Nesse caso, use a opção Nome, pois o site re-moto será configurado logo adiante.
Figura 2.11.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 16/130
15Iniciando o Dreamweaver
A última caixa de diálogos vai exibir as informações de configu-ração de seu site, tais como nome, local do site, acesso remoto eteste do servidor. Para finalizar, pressione o botão Done para que ogerenciador dos sites seja finalizado:
Figura 2.12.
Pressione o botão Done para que seu site seja criado. Note queo painel File contém a informação do nome de seu site, bem comoa sua localização:
Figura 2.13.
Criando uma página básica
Para criar uma nova página em seu site, siga o menu File > New e clique na opção Basic Page na lista de categorias e em HTML nacoluna com o tipo de página básica desejada. Depois, pressione obotão Create.
Crie o hábito de salvar suas páginas logo após a criação, ou seja,não espere para salvar até inserir textos e imagens. Dessa forma,ao importar imagens ou textos, todos os caminhos que fazem refe-
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 17/130
16Treinamento prático em Dreamweaver
rência à sua localização serão criados nos locais corretos. Para sal-var, use o menu File > Save ou o atalho Ctrl + S e indique o nomeda página.
Algumas dicas sobre nomes de páginas
Por padrão, todo arquivo salvo possui a extensão .htm, mas, sevocê quiser, é possível gravar com a extensão .html; o Dreamweavernão fará distinção alguma. No entanto, é preciso um certo cuidado coma criação do nome do arquivo. Para isso, leve em conta o seguinte:
• Não utilize os caracteres especiais, tais como %, #, &, *, >, <,?, }, {, !, @ e [;
• Procure não utilizar acentos, pois a maior parte dos sistemasoperacionais não reconhecem esses caracteres;
• Para cada plataforma utilizada, o nome de um arquivo serádiferente. No Windows, por exemplo, um nome como INDICE.HTMserá visualizado de outra maneira em plataforma Unix, em que é fei-ta distinção entre letras maiúsculas e minúsculas. O ideal é nomearcom todos os caracteres em minúscula;
• Não utilize espaços em branco. Uma boa prática é utilizar ca-racteres de sublinhado ou hífens para simular espaços, como, por
exemplo, primeira_pagina.htm;• Evite utilizar números como nomes de arquivos.
Informando o título do site
Sempre que uma página é visualizada, no topo da janela o nave-gador irá exibir o título da página que, por padrão, tem o nome doseu site. Para atribuir um título, digite-o na opção Title e pressionea tecla Enter. Caso a barra de ferramentas do documento não estejasendo visualizada, use o menu View > Toolbars > Document.
Figura 2.14.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 18/130
17Trabalhando com textos
Trabalhando com textos
Agora, você já sabe como criar uma página, portanto, chegou ahora de adicionar conteúdo, ou seja, inserir elementos de textos,imagens e de trabalhar com cores e formatações.
Inserindo texto
Para inserir um texto, digite-o diretamente no local em que acharapropriado. Digite o texto e pressione a tecla Enter para mudarde linha.
Alterando a aparência do texto
Para alterar a aparência do texto, é necessário, em primeiro lugar,selecioná-lo. Para definir suas propriedades, trabalhe com a janelaProperties:
Figura 3.1.
Com o inspetor de propriedades, você pode alterar a fonte utili-
zando a opção Font, e o tamanho, com a opção Size. Para texto emnegrito e itálico, pressione os botões representados pelas letras B eI, respectivamente.
Outros estilos podem ser alterados quando utilizamos o menuText > Style e clicamos em uma das opções oferecidas.
Trabalhando com formatos de cabeçalhos
Na opção Format, você encontrará seis níveis de cabeçalhos, no-meados de Heading 1 a Heading 6.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 19/130
18Treinamento prático em Dreamweaver
Figura 3.2.
Ao utilizar um estilo de cabeçalho, o Dreamweaver o exibe com fontes maiores do que o corpo do texto, gerando um espaço logoabaixo do mesmo.
É importante saber que, ao escolher uma fonte, ela deve estarinstalada no computador do usuário que visualiza a página. Também
deve-se levar em conta que cada usuário pode alterar o tamanho desua tela, a cor de seu texto bem como o tamanho da fonte emprega-da na exibição das páginas, portanto, o modo como o tipo de carac-tere é exibido em sua tela pode mudar de um usuário a outro.
Devido a esse fato, a fonte que você escolher deve estar insta-lada na máquina de todo mundo. As fontes instaladas instruirão onavegador para que sejam feitas as mudanças do texto para outra
fonte, ou seja, se ao escolher uma determinada fonte ela não estiverdisponível em seu computador, automaticamente o navegador faráuma segunda escolha e, caso essa segunda escolha não se encon-tre, o navegador procurará uma terceira escolha. Se nenhuma delasestiver instalada no computador do usuário, será utilizada uma fon-te-padrão.
Para escolher a lista de fontes, você deve abrir o menu Text >Font > Edit Font List. Observe a caixa de diálogo:
Figura 3.3.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 20/130
19Trabalhando com textos
Nela você encontra uma lista de combinações de fontes e podeselecionar as que deseja visualizar por meio da opção Available
fonts. Escolha a fonte desejada e pressione <<. Para remover uma fonte, utilize o sinal de subtração (-) da seção Font list.
Lembre-se de que as fontes sem serifa, como a Arial e Verdana, facilitam a leitura na tela do computador, ao contrário das que pos-suem serifa, como a Times New Roman e a Script.
Figura 3.4.
Alterando a cor
Para alterar a cor dos seus textos, use a opção Text color pre-sente no inspetor de propriedades. Uma paleta com 216 cores seráapresentada. Ao dar um clique sobre uma cor, automaticamente oDreamweaver vai preencher a opção ao lado com um código hexa-decimal.
A forma como esta tabela funciona não é nenhum enigma. Basta
saber que cada cor usa uma tabela RGB – vermelho (Red), verde(Green) e azul (Blue). O sistema de numeração hexadecimal tem porbase 16 pontos, utilizando números de 0 a 9 e letras de A a F. Comocada cor representa um código de seis dígitos, os dois primeiros re-presentam a quantidade de vermelho, os dois seguintes, a quantida-de de verde e os dois últimos, a quantidade de azul. Como exemplo,imagine o código #00FF00. Nele, indicamos 00 de vermelho, FF deverde e 00 de azul, portanto, a cor será um tom de verde. Caso você
já conheça o código hexadecimal que representa a cor, poderá digi-tá-lo na caixa ao lado da opção Text color.
A barra inspetor de propriedades
Além da definição de fonte e do formato do texto, é possível ali-nhar e trabalhar com alguns ajustes do parágrafo, utilizando os bo-tões adequados a essa atividade presentes na barra de inspetor depropriedades:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 21/130
20Treinamento prático em Dreamweaver
Figura 3.5.
Trabalhando com recuos
Digite um parágrafo com mais de uma linha e selecione-o. Para
criar um recuo, utilize o botão que avança a tabulação. Isso fará comque o texto recue para o próximo ponto de tabulação existente.Sempre que o botão for pressionado, o seu texto será mais recuado.Caso queira retroceder para o ponto anterior da tabulação, use obotão Desfazer recuo. Observe um exemplo:
Figura 3.6.
Em editores de textos, tais recuos são conhecidos como enden-tações, utilizadas de forma a destacar um ou mais parágrafos, dife-renciando-os dos demais. Caso prefira, você pode utilizar os menusText > Indent para o recuo e Text > Outdent para retroceder osrecuos criados.
Trabalhando com listas
É possível criar parágrafos com listas numeradas ou com marca-dores, fazendo uso dos botões presentes no inspetor de proprieda-
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 22/130
21Trabalhando com textos
des. Para criar uma lista numerada, dê um clique em qualquer pontodo parágrafo e siga o menu Text > List > Ordered List ou use o ata-lho para lista numerada na barra de propriedades.
Para listas com marcadores, siga o menu Text > List > Unordered
List ou o atalho da barra de propriedades.Para definir o estilo da numeração ou dos marcadores, siga o
menu Text > List > Properties em que você irá encontrar:• List type: tipo da lista, se numerada, com marcadores ou sem
definição;• Style: estilo da numeração ou dos marcadores;• Start count: quando uma lista é numerada, é possível indicar
qual deve ser o número inicial da lista. Dessa forma, ao pressionar atecla Enter após cada um dos parágrafos, o Dreamweaver irá nume-rá-los na seqüência;
• New style: permite definir o estilo do próximo parágrafo, ouseja, do próximo item da lista.
Observe a caixa de diálogo:
Figura 3.7.
Listas de definições
Alguns dos parágrafos devem possuir termos importantes e de-finições desses termos, tais como em um cardápio: você encontra onome do prato e, logo a seguir, os ingredientes (a definição) empre-gados. Nesse caso, tanto o termo importante quanto a sua definiçãodevem ficar em parágrafos separados, sem as quebras de linhas.Saiba como fazer isso:
1. Digite um termo como, por exemplo, Filet à parmegiana.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 23/130
22Treinamento prático em Dreamweaver
2. Siga o menu Text > List > Definition e pressione a tecla Enter.
3. O cursor irá se mover para a próxima linha sem criar parágra- fos diferentes.
4. Digite os ingredientes do prato.
Repare que o termo (Nome do prato) está na margem esquerda etodas as suas definições (Ingredientes) estão endentadas nas linhasseguintes.
Figura 3.8.
Importando texto
Caso você tenha digitado todo o texto de sua página em um proces-
sador, basta selecioná-lo, copiá-lo e colá-lo. O Dreamweaver executaráas ações de arrastar e soltar dos processadores mais utilizados.Se houver necessidade, o Dreamweaver pode abrir arquivos que
foram criados e salvos como textos (.txt) ou como páginas da Web(.html) pelos processadores. Esses arquivos serão abertos em novas
janelas e determinados trechos podem ser copiados e colados paraa página atual.
Após colar o texto, você pode trabalhar com os recursos de for-matação e recuos de parágrafo, como feito no caso da digitação di-
reta, utilizando a janela de propriedades.No caso de você ter importado um arquivo de texto criado no Ma-
cintosh, os parágrafos serão apresentados em uma só linha, pois oDreamweaver depende de um caractere de avanço que, nesse caso,está ausente.
Para alterar o formato dos arquivos de textos recebidos pelosprocessadores, você deve utilizar o menu Edit > Preferences e aopção Code Format:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 24/130
23Trabalhando com textos
Figura 3.9.
Nesse caso, indique o espaçamento das endentações e, também,
o caractere de quebra de linha ( line break type). Dessa forma, oDreamweaver poderá reconhecer tal caractere e fazer as quebras delinhas nos locais apropriados.
Quebra de linhas
Você deve ter reparado que sempre que a tecla Enter é utilizada,um novo parágrafo é inserido com uma quebra de linha. No caso de
querer uma nova linha sem nenhum espaço entre ela e a anterior,digite o texto e, logo a seguir, pressione as teclas Shift + Enter paraque ele seja inserido na próxima linha, sem a quebra de parágrafo.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 25/130
24Treinamento prático em Dreamweaver
Trabalhando com imagens
Não há nada melhor do que uma imagem para representar suas
idéias, ou “vender seu peixe”, como muitas pessoas dizem. Portan-
to, esqueça os textos extensos e adote a inserção de uma ou mais
imagens, tornando a sua página menos cansativa.
Inserindo imagens
Dê um clique em um parágrafo e siga o menu Insert > Image. A
caixa de diálogos Select Image Source será exibida:
Figura 4.1.
Para que sejam inseridas imagens em arquivos, ative opção File
System em Select file name from e automaticamente serão exibidas
miniaturas da pasta atualmente aberta ( Examinar). O Dreamweaver
pode abrir imagens nos formatos GIF, JPG, JPEG e PNG. Você veráas características da imagem com a opção Image preview, que infor-
mará o tamanho em pixels, formato e tamanho em bytes, bem como
o tempo de abertura.
Caso a imagem escolhida não esteja localizada na mesma pasta
em que sua página está sendo criada, automaticamente o Dream-
weaver vai informar e perguntar se você gostaria de criar uma cópia
da imagem para a pasta atual. Ao pressionar o botão Sim, é preciso
informar a pasta e o nome da imagem inserida. Essa é uma forma de
organizar as informações em seu site, e também a melhor maneirade fazer o download de informações em uma única pasta.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 26/130
25Trabalhando com imagens
Figura 4.2.
Ao gravar a página, o Dreamweaver não faz referências; ele subs-
titui o nome do caminho ( path) da localização da imagem em seu
computador no lugar de criar um link rápido. Por isso, é importante
salvar o documento antes de inserir as imagens. Se a imagem esti-
ver fora da pasta em que seu site está, você verá um alerta referente
à inexistência do arquivo de imagem.
Na caixa de diálogos Select Image Source, encontramos a opção
URL, utilizada para sites dinâmicos, ou seja, sempre que seu documen-
to é executado em um servidor de aplicativos. Em nosso caso, não uti-
lizamos essa opção por não estarmos criando um site dinâmico.
A opção Relative to está configurada por padrão como Document,
o que permite escolher como o Dreamweaver faz referências às ima-
gens. Elas podem ser relativas ao documento, sendo indicado o cami-
nho para a imagem com base na localização do documento, ou rela-
tivas à raiz do site, em que o caminho é indicado para a imagem combase na localização do documento HTML relativo à raiz de seu site.
Quando o site é grande, ou caso pretenda mover as páginas com certa
freqüência, o ideal é utilizar a opção relativa à raiz do site (Site Root).
Um atalho para a inserção de imagens é a barra Insert, na qual
você encontrará o seguinte botão:
Figura 4.3.
Observação: em um site, o melhor formato para uma imagem
é o tipo GIF, pois uma imagem JPEG exibe características em
demasia, como pequenos quadros carregados de informações
sobre a cor. Sua qualidade pode ser melhor, mas, em compen-
sação, o tamanho do arquivo é muito maior.
Redimensionar imagens
Após inserir a imagem, clique nela para observar a seguintes
opções na barra de propriedades:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 27/130
26Treinamento prático em Dreamweaver
Figura 4.4.
Figura 4.5.
Para redimensionar, dê um clique em uma das alças de seleção
(quadrinhos pretos ao redor da imagem) e arraste para a esquerdaou direita até torná-la maior. Nesse caso, as especificações, definidas
em largura e altura da imagem, automaticamente serão redefinidas,
mas, em compensação, a qualidade também se altera. A resolução
da tela, por padrão, é de 72 dpi (dts por inch – pontos por polegada),
sendo que essa não é a resolução ideal para exibir imagens no tama-
nho que você alterou. Portanto, a exibição da imagem (download)
demoraria muito mais tempo. Você somente alteraria o tamanho na
tela, sem redimensionar o arquivo. Para isso (ajustar o tamanho da
imagem), o ideal seria utilizar softwares de edição para garantir queseu tamanho e qualidade sejam melhores.
Editando a imagem
Para melhorar a aparência da imagem utilizando softwares grá-
ficos, é possível utilizar a barra de propriedades Edit presente na
barra Properties, que contém os seguintes elementos:
Figura 4.6.
Vinculando imagens a documentos
As imagens inseridas podem guiar o visitante a páginas específi-
cas do site, funcionando como links para botões de navegação. Paracriar esse link, dê um clique na imagem e utilize a pasta existente à
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 28/130
27Trabalhando com imagens
direita do campo Link. Será exibida a caixa de seleção de arquivo.
Indique qual arquivo deve ser aberto e pressione OK.
Figura 4.7.
Dessa forma, sempre que a página for aberta e o visitante clicar
na imagem, automaticamente será aberta a página de link escolhida
por você.
Vinculando arquivos no painel Files
Para criar links com o painel de arquivos (Files), você deve proce-
der da seguinte forma:
1. Clique na imagem que deverá fazer referência a um documento
ou arquivo.
2. Abra o painel de arquivos seguindo o menu Window > Files.
3. Do lado direito da tela, será aberto o painel com todos os do-cumentos e imagens de seu site.
Figura 4.8.
4. Clique na imagem.
5. Na barra de propriedades, pressione o ícone Point to file, ao
lado do campo Link.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 29/130
28Treinamento prático em Dreamweaver
6. Arraste o ponteiro até o painel Files.
7. Na lista Local View, indique o arquivo desejado.
Figura 4.9.
8. Ao utilizar a opção Map View no painel Files, o seu site seráatualizado e você verá todos os links existentes:
Figura 4.10.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 30/130
29Tabelas
Tabelas
Para facilitar o controle de textos e imagens em sua página, é pos-sível fazer uso de uma ferramenta poderosa, as conhecidas tabelas.Elas permitem enquadrar textos ao redor de uma imagem, ajustaro alinhamento e, também, criar blocos de textos com endentações.Com esses recursos, você terá um controle maior sobre a posiçãodos elementos da página.
Criando tabelas
Para criar uma tabela, abra o menu Insert > Table, ou utilize o
atalho da barra Insert (Figura 5.1).
Figura 5.1.
Será aberta a seguinte janela:
Figura 5.2.
Nessa caixa de diálogo, encontramos as opções listadas:
Opção
Rows
ColumnsTable width
Descrição
Número de linhas.
Número de colunas.Largura da tabela.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 31/130
30Treinamento prático em Dreamweaver
Tabela 5.1.
Ao pressionar a tecla Enter, a tabela será gerada:
Figura 5.3.
Nesse exemplo, você gerou uma tabela com quatro linhas ( row)e quatro colunas (column). A interseção de uma coluna com umalinha é conhecida como célula. Portanto, sua tabela possui 13 cé-lulas, pois a área em que o título foi digitado (caption) abrange so-mente uma célula.
Fazendo ajustes no layout
É possível ajustar a largura da tabela utilizando os ponteirosexistentes na borda das células. Mantenha o botão do mouse pres-sionado em um dos ponteiros e arraste até a largura desejada.Rapidamente, o Dreamweaver vai informar quais são as novas di-mensões de sua tabela.
Para ajustar a largura de uma coluna, mova o ponteiro do mousesobre ela e note o aparecimento de setas voltadas para a direita epara a esquerda. Mantenha o botão pressionado enquanto arrasta
para a direita, a fim de aumentar, ou para a esquerda, a fim de dimi-nuir a largura da coluna.
Opção
Border thicknessCell padding
Cell spacingHeaderCaptionAlign captionSummary
Descrição
Espessura da borda em pixels.Número de pixels existentes em uma borda da célula.
Número de pixels entre as células adjacentes.Insere linha para o título principal.Título que será adicionado à tabela.Alinhamento do título na tabela.Observações que você insere para determinar a utilida-de da tabela.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 32/130
31Tabelas
Inserindo textos
Para inserir um texto, posicione o cursor na célula em que desejavisualizá-lo e, simplesmente, digite-o. Para mover de uma célula a
outra, pressione a tecla Tab. Ao mover o cursor para a última célulada tabela e pressionar a tecla Tab, automaticamente o Dreamweavergera uma nova linha com o mesmo número de colunas da linha an-terior. Ou seja, o perfil das células anteriores também será levadopara a nova linha.
Inserindo linhas e colunas
Para inserir uma linha, você deve proceder da seguinte maneira:
1. Posicione o cursor sobre uma célula.
2. Pressione o botão direito do mouse.
3. Clique na opção Table.
4. Selecione a opção Insert Row, para que seja acrescentada uma
linha acima da posição atual do cursor.
Figura 5.4.
Para inserir colunas, dê um clique com o botão direito em alguma
célula e siga o menu Table > Insert Column para acrescentar umacoluna à esquerda da posição do cursor.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 33/130
32Treinamento prático em Dreamweaver
Inserindo mais de uma linha ou coluna
No tópico anterior, você acrescentou somente uma linha à tabela.E, como a colocou acima da posição atual do cursor, é fundamental
posicioná-lo em uma célula estratégica, pois você poderá inserir li-nhas na posição indesejada.
Caso tenha de inserir mais de uma linha e determinar se devemser inseridas acima ou abaixo do cursor, siga o menu Insert > Table
Objects > Insert Row Above (Inserir linhas acima) ou Insert Row
Below (Inserir linhas abaixo).Para inserir colunas à esquerda ou à direita do cursor, abra o
menu Insert > Table Objects > Insert Column Left (Inserir colunasà esquerda) ou Insert Column Right (Inserir colunas à direita).
Um atalho para esses comandos é o seguinte caminho:
1. Clique na célula desejada com o botão direito do mouse.
2. Selecione a opção Table.
3. Clique em Insert Rows or Columns.
4. Especifique o que deseja inserir, a quantidade e o local da in-serção.
Opção
Insert
Number of rows
Descrição
Para determinar o que deseja inserir, se linhas (rows) oucolunas (columns).Especifique o número de linhas ou colunas que desejainserir. Você pode digitar a opção desejada ou utilizar o
controle deslizante para determinar o número correto.
Figura 5.5.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 34/130
33Tabelas
Tabela 5.2.
Excluindo uma linha ou coluna
Para excluir uma linha, posicione o cursor na linha desejada, pres-sione o botão direito do mouse e siga o menu Table > Delete Row.Nesse caso, todas as células da linha serão excluídas automatica-
mente. Para excluir uma coluna, dê um clique na coluna usando obotão direito do mouse e abra o menu Table > Delete Column.
Caso queira desfazer a última operação, utilize o menu Edit >Undo, ou pressione o botão Undo da barra de ferramentas:
Opção
Where
Descrição
Determine a posição em que as linhas ou colunas devemser inseridas: Above the selection, acima da posição do
cursor, Below the selection, abaixo.
Figura 5.6.
Mesclando células
Quando inserir título, para que ele seja exibido exatamente nocentro das células, você deve mesclar as células adjacentes. Dessa
forma, as células tornam-se uma só. Saiba como fazer isso utilizandoo exemplo seguinte, baseado na Figura 5.7:
Figura 5.7.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 35/130
34Treinamento prático em Dreamweaver
1. Você deve selecionar a célula na qual o texto está digitado etodas as células ao lado utilizando a tecla Shift e as setas à direita.
2. Use o menu Modify > Table > Merge Cells ou o atalho das
teclas Ctrl + Alt + M.
3. Outra forma de mesclar é selecionar as células, usar o botãodireito do mouse e as opções Table > Merge Cells.
Figura 5.8.
Dividindo células
Dependendo do trabalho, talvez seja preciso dividir as células emmais de uma. Para isso, posicione o cursor na célula que será divi-dida e utilize o menu Modify > Table > Split Cells ou o atalho Ctrl+ Alt + S.
Especifique o tipo de divisão desejada, se em linhas ( row) ou co-lunas (column), o número de células e pressione OK.
Figura 5.9.
Selecionando células
Posicione o cursor na célula a selecionar e pressione a tecla Ctrl.
Para selecionar mais de uma célula, pressione Ctrl e, logo a seguir,
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 36/130
35Tabelas
as teclas Shift e as setas para a direita ou para a esquerda, até sele-cionar as células desejadas.
Para mesclar ou dividir células, você deve selecionar mais de umalinha, coluna e, muitas vezes, até mesmo toda a tabela. Vejamos o
que fazer para selecionar células.Para selecionar toda a tabela, posicione o cursor em sua largura
e selecione a opção Select Table, ou o menu Modify > Table >Select Table:
Figura 5.10.
Para selecionar uma coluna, faça o seguinte:
1. Posicione o mouse na borda superior de uma coluna:
Figura 5.11.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 37/130
36Treinamento prático em Dreamweaver
2. O ponteiro do mouse será alterado para uma seta voltada parabaixo.
3. Selecione a coluna, ou arraste o ponteiro do mouse até selecio-
nar múltiplas colunas.
Para selecionar uma linha, faça o seguinte:
1. Posicione o mouse na borda superior de uma linha.
2. O ponteiro do mouse será alterado para uma seta voltada paraa direita.
Figura 5.12.
3. Selecione a coluna ou arraste o ponteiro do mouse até selecio-nar várias colunas.
Você pode utilizar o menu contextual (com a largura da tabela ouda coluna) para selecionar a coluna ou linha desejada:
Figura 5.13.
Caso queira selecionar células não adjacentes, use a tecla Ctrl edê um clique em cada uma das células a selecionar:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 38/130
37Tabelas
Figura 5.14.
Propriedades da tabela
Repare que ao selecionar a tabela, a barra Properties exibirá asseguintes opções:
Figura 5.15.
Vejamos como trabalhar com cada uma das opções:
• Em Table Id, digite um nome para a tabela (Figura 5.16):
Figura 5.16.
• Em Rows, especifique o número de linhas que deseja e, emcols, o número de colunas (Figura 5.17):
Figura 5.17.
• Especifique a largura na opção W e a altura da tabela na opçãoH. Nelas, você poderá alterar as unidades de medida, por padrãodefinidas em pixels (Figura 5.18), para porcentagem. Dessa forma,poderá redimensionar o tamanho levando em conta que a largura e
a altura atuais são de 100%. Para diminuir, digite, por exemplo, 75%,e reduzirá em 25% o tamanho atual:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 39/130
38Treinamento prático em Dreamweaver
Figura 5.18.
• Na opção Cell Pad, especifique o número de pixels entre o con-teúdo da célula e o limite, assim como a distância entre as paredes(bordas) da célula e o texto digitado. Na opção CellSpace, você deveespecificar o número de pixels entre cada uma das células da tabela(distância de uma célula a outra). Observe a Figura 5.19:
Figura 5.19.
• Na opção Bg color, escolha uma cor que vai servir de fundopara a tabela (preenchimento) e em Brdr color, especifique uma corpara as linhas de borda da tabela (Figura 5.20):
Figura 5.20.
Algumas vezes, ao definir as bordas das colunas zero, é possível
não visualizar essas bordas. Para isso, ative-as com o menu View >Visual Aids > Table Border. Dessa forma, fica mais fácil visualizar osdelimitadores de cada célula.
Para alterar o alinhamento da tabela com relação à página, use aopção Align e escolha o tipo de alinhamento desejado.
Figura 5.21.
Na opção Border, você deve especificar a largura da borda empixels.
Inserindo uma imagem no fundo da tabela
Você poderá inserir um logotipo no fundo de sua tabela. Para tan-to, use a opção Bg Imagem e especifique o nome do arquivo ou, sepreferir, arraste o nome do arquivo, que deve estar na lista de arqui-
vos existentes, para junto dessa opção:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 40/130
39Tabelas
Figura 5.22.
Dependendo do tamanho da imagem, ela será exibida em formade azulejos, ou seja, uma ao lado da outra, e, portanto, você poderáter um efeito desastroso:
Figura 5.23.
Outro problema é que a imagem pode sobrepor o texto digitadoao exibir o seu site. Portanto, nem sempre é o ideal inserir imagensno fundo das tabelas. É preferível inserir o logotipo em uma deter-minada célula:
1. Clique na célula desejada.
2. Siga o menu Insert > Image, escolha a imagem desejada edê OK.
Alterando o layout de uma ou mais células
Para alterar o layout de várias células, selecione-as e use a barraProperties, que apresenta as seguintes opções:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 41/130
40Treinamento prático em Dreamweaver
Descrição
Permite alterar o estilo dos textos existentes etambém as fontes utilizadas pelos estilos.
Permite alterar o estilo do parágrafo, seu tamanho
e a cor da fonte utilizada.
Permite apresentar o texto em negrito e itálico.
Permite alterar o alinhamento do texto na célula.
Permite inserir marcadores, numeração e alterarrecuos do texto na célula.
Permite definir o alinhamento horizontal e verticaldo texto com relação à célula. As opções W e H servem para especificar a largura (width) e alturada célula ( height).
Impede a quebra automática de textos nas linhas.
Permite formatar as células ou linhas selecionadas
como um cabeçalho de tabela. Por padrão, as cé-lulas apresentadas como cabeçalho ( header) sãoapresentadas em negrito e no centro.
Permite definir uma imagem de fundo para a célu-la (Bg), a cor de fundo da célula e a cor da borda(Brdr).
Figuras das opções
Figura 5.24.
Tabela 5.3.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 42/130
41Tabelas
Usando layouts predefinidos
Após criar a tabela, é possível utilizar os layouts predefinidos do
Dreamweaver. Para tanto, selecione a tabela e use o menu Commands
> Format Table, escolha o formato desejado e pressione o botãoApply:
Figura 5.25.
Tornando as colunas em larguras consistentes
O Dreamweaver pode redimensionar a largura no código HTML
para combiná-lo com o aspecto visual da tabela, ou seja, é possível
tornar as células consistentes. Para fazê-lo, clique em uma célu-
la, abra o menu contextual e selecione a opção Make All WidthsConsistent.
Figura 5.26.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 43/130
42Treinamento prático em Dreamweaver
Figura 5.28.
Opção
Sort byOrder
Then by
Descrição
Permite especificar qual coluna da tabela será classificada.Permite especificar o tipo de classificação (alfabética ounumérica), bem como a ordem da classificação (ascen-dente ou descendente).Permite incluir outra coluna a classificar. Por exemplo, hávárias linhas com a classificação de pescados e, dentro
dessa ordenação, você deseja classificar por porções.
Tabelas aninhadas
O Dreamweaver pode trabalhar com uma tabela dentro de outra.Nesse caso, elas são conhecidas como tabelas aninhadas. Para tan-
to, crie uma tabela e, logo a seguir, posicione o cursor em uma célulapara criar uma nova tabela nessa posição:
Figura 5.27.
Classificando os dados em tabelas
Quando uma tabela tem muitos dados, o Dreamweaver podeclassificá-los, ou seja, pode criar uma ordenação para as linhas deuma tabela ou de uma coluna. Para tanto, selecione a tabela ou umacélula e siga o menu Commands > Sort Table:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 44/130
43Tabelas
Tabela 5.4.
Inserindo link com textos
Para inserir um link com outra página, você deve selecionar otexto que vai armazenar o link e, na opção Link, digitar o nome dapágina ou a imagem para a qual deseja fazer um link. Dessa forma,quando der um clique no texto, será apresentada a imagem ou pági-na com a qual você faz referência (link). Observe:
Opção
Sort includesthe first row
Sort headersrowsSort footer rowsKeep all colors
Descrição
Inclui a primeira linha da tabela na classificação. Nessecaso, se a primeira linha tiver o título das colunas, ela será
enviada para outro local após a classificação.Inclui a linha de cabeçalhos de colunas na classificação.
Inclui as linhas de rodapé na classificação.Permite manter as cores das linhas da mesma forma apósa classificação.
Figura 5.29.
Removendo o conteúdo dacélula sem alterar sua estrutura
Ao apagar o conteúdo de uma célula, você pode comprometer todaa estrutura da tabela. Para evitar esse problema, selecione uma oumais células e use o menu Edit > Clear, ou pressione a tecla Delete.
Importando dados
Você pode utilizar tabelas criadas por outros aplicativos, comoo Microsoft Excel ou Microsoft Word, sem ter de digitar todos osdados novamente. Para isso, siga o menu File > Import, escolha a
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 45/130
44Treinamento prático em Dreamweaver
opção que for mais conveniente (Excel Document, Word Document
ou Tabular Data), especifique o arquivo a ser importado e pressione
o botão Abrir:
Figura 5.30.
Exportando uma tabela
O processo inverso também pode ser realizado, ou seja, se você
criou uma tabela no Dreamweaver, pode enviá-la ao Microsoft Excel,
por exemplo. Para tanto, faça o seguinte:
1. Selecione a tabela.
2. Use o menu File > Export > Table. Será aberta seguinte janela:
Figura 5.31.
3. Indique as opções de exportação, como o delimitador dos da-
dos (Tab, espaço, vírgula, ponto-e-vírgula), como devem ser trata-
das as quebras de linhas (se no padrão Windows, Macinstosh ouUnix) e pressione Export.
4. Será aberta a caixa de diálogos Export Table As.
5. Indique o nome que a tabela deve receber e pressione o botão
Salvar.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 46/130
45Folhas de estilos
Folhas de estilos
O Dreamweaver nos permite trabalhar com padrões técnicos da
Web, os conhecidos layouts CSS.Tais layouts surgiram em 1996 por meio de um órgão do governoamericano que aprovou a primeira versão do Cascading Style She-
ets, o principal método para normatizar elementos de um site. Os layouts CSS substituem os antigos comandos <font> por folhas deestilos, facilitando o gerenciamento de textos em uma página.
No Dreamweaver, é permitido usar o CSS para adicionar blocosde conteúdos e camadas ( layers) para criar seu próprio layout.
Ao utilizar o CSS, o Dreamweaver apresenta réguas e guias que
facilitam nossa orientação durante a criação da página.
Tipos de estilos utilizados no Dreamweaver
O Dreamweaver possui três tipos de estilos CSS. Observe:• Custom CSS Styles: também conhecidos como Class Style.
Permitem a aplicação de atributos do estilo aos blocos de textos;• HTML tag styles: permitem redefinir a formatação de determi-
nada tag, tais como <font>, <h1> e outros;• CSS selector styles: permite redefinir a formatação de uma de-
terminada combinação de tags em uma célula da tabela, como, porexemplo, td h1, aplicada sempre que um cabeçalho h1 for utilizadoem uma tabela.
Criando páginas com os estilos
Para criar uma página em branco utilizando o CSS use o menuFile > New. Na lista Category, escolha a opção Page Design (CSS) eescolha o layout da página na opção Page Design:
Figura 6.1.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 47/130
46Treinamento prático em Dreamweaver
Ao pressionar o botão Create, o novo documento aparecerá na janela. Aproveite para salvar o arquivo como Index.htm mediante omenu File > Save.
Caso o arquivo contenha links para outras páginas, será apresen-
tada a caixa de diálogos Copy Dependent Files, exibindo uma listade cada um dos arquivos dependentes que devem ser salvos:
Figura 6.2.
Pressione o botão Copy files to, navegue até a pasta que possuias imagens e pressione Copy para que todos os arquivos sejam gra-vados junto com a página.
Páginas baseadas em templates
É possível criar mais de um tipo de documento no Dreamweaver.
Para tanto, vamos criar uma nova página baseada em um templa-te, que servirá como um modelo para outras páginas criadas. Saibacomo fazer:
1. Crie um novo documento em branco.
2. Abra o menu File > Save As Template.
3. Na opção Site, digite o nome de seu site, no caso, poderá ser
O Chef em casa.
4. Informe o nome do modelo na opção Save as e pressione obotão Save.
Figura 6.3.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 48/130
47Folhas de estilos
Criando documentos baseados em templates
Para utilizar o modelo criado anteriormente como template, siga omenu File > New. Dê um clique na guia Templates, selecione o templa-
te que você pretende utilizar (Modelo1) e pressione o botão Create.
Figura 6.4.
Após utilizar o modelo, a página em branco se transformará em
um layout definido anteriormente, sem a necessidade de alterar ecriar novas tabelas:
Figura 6.5.
O painel CSS
Para visualizar o painel CSS, abra o arquivo com a folha de estilos,como, por exemplo, o arquivo Index.htm, e siga o menu Window >CSS Styles; o painel aparecerá no lado direito de sua página.
Figura 6.6.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 49/130
48Treinamento prático em Dreamweaver
Figuras
Atalhos do painel de estilos
Nomes
Attach Style Sheet
New CSS Style
Edit Style Sheet
Delete CSS Style
Descrição
Abre a caixa Link external style sheet, quepermite selecionar uma folha de estilos ex-terna a ser importada do documento atual.Abre a caixa New CSS Style, que permite se-lecionar o tipo de estilo a ser criado, se Class
style, HTML tag ou CSS selector.Abre a caixa CSS Style definition, que per-mite editar qualquer estilo existente no do-cumento atual.Remove o estilo selecionado do painel CSS
Styles, assim como a formatação de qual-quer elemento nele aplicado.
Dê um clique com o botão direito do mouse sobre um estilo exis-tente e você verá o menu contextual:
Figura 6.7.
Tabela 6.1.
Criando um estilo CSS
Com a página Index aberta, utilize o botão New CSS Style:
Figura 6.8.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 50/130
49Folhas de estilos
Na tabela seguinte, as opções da janela:
Opção
Name
Selector Type
Define in
Descrição
Informe o nome do estilo. Sempre que o estilo for do tipoClass, é importante iniciar o nome com um ponto.Tipo de estilo CSS (classe) personalizado, que pode serClass, Tag (como em HTML) ou Advanced (contém códigos,seletores contextuais e outros).Permite definir se as folhas serão aplicadas em um novo ar-quivo de folha de estilo ou somente no documento atual.
Tabela 6.2.
Defina as opções da seguinte forma: Name como Títulos, Selec-
tor Type como Class e Define in como This document only. Pressio-ne OK para concluir.
Será apresentada a caixa de diálogos CSS Style Definition, ondedevem ser informadas as opções de Type (tipo de fonte utilizada),Background (fundo da página), Block (controle de blocos de textos,tais como alinhamentos verticais, espaçamento e outros) Border (es-pecificações para as bordas da página e tabelas), List (formatações
para textos existentes no formato de listas), Positioning (posiciona-mento de imagens e tabelas) e Extensions (controle para quebra depáginas).
Após entrar com todas as especificações desejadas para cadauma das opções, pressione o botão OK.
Figura 6.9.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 51/130
50Treinamento prático em Dreamweaver
Anexando folhas de estilos externas
Você poderá ter folhas de estilos criadas em outros documentos.Tais folhas podem ser importadas para o documento atual. Para isso,
faça o seguinte:
1. Abra o menu Windows > CSS Styles para visualizar a caixa deestilos aberta.
2. Pressione o botão Attach Style Sheet e será apresentada aseguinte janela:
Figura 6.10.
3. Clique na opção Link.
4. No rodapé da caixa de diálogos, você deve ativar a opçãoSample Style Sheet para que seja aberta a caixa de estilos existentes:
Figura 6.11.
5. Escolha um dos estilos apresentados e pressione OK.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 52/130
51Folhas de estilos
Editando uma folha de estilo
Você pode fazer alterações nas folhas de estilos. Veja como é fácil:
1. No painel de folhas de estilos, dê um clique no nome da folhade estilo que deseja alterar.
2. Pressione o botão Edit Style Sheet.
Figura 6.12.
3. Clique no estilo que deseja alterar e pressione o botão Edit.
4. Faça todas as alterações necessárias para o estilo.
5. Pressione o botão OK e, logo depois, o botão Done.
6. Pronto, as formatações serão aplicadas.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 53/130
52Treinamento prático em Dreamweaver
Modelos e bibliotecas
Em capítulos anteriores, você aprendeu a criar estilos com os re-cursos das folhas de estilos CSS, por isso, agora, acreditamos queseja um bom momento para nos aprofundarmos em modelos.
Suponha que você tenha um site “grande”, com várias páginaslinkadas em um menu, com cada uma delas representando infor-mações dos vários departamentos de sua empresa. Portanto, vocêdepende de cada um dos elementos de sua equipe para atualizaras informações pertinentes às páginas dos departamentos, e, se-guramente, cada um dos funcionários possui uma idéia e um layout diferente para suas páginas.
O ideal é fazer com que cada funcionário tenha a liberdade paraentrar com as informações necessárias, mas que utilizem um estiloprojetado por você, ou seja, está na hora de trabalhar melhor commodelos. Então, mãos à obra.
Criando modelos
Quando criamos um modelo, a primeira coisa a ser feita é o pro- jeto da página, isto é, inserir tabelas, camadas, elementos gráficos
e links necessários ao projeto. Após todas as definições, contandocom a estática, apresentação de cores e fontes, use o menu File >Save as Template. Indique o nome que o novo modelo deve ter epressione o botão Save:
Figura 7.1.
Todo arquivo com os dados de uma página é gravado com a ex-tensão .html. Nesse caso, porém, os modelos são gravados em ar-quivos com a extensão .dwt, com a localização também em umapasta especial, a /Template/information.dwt. É justamente essa ainformação que você visualiza no título de sua janela:
Figura 7.2.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 54/130
53Modelos e bibliotecas
Você também pode dar início ao seu trabalho criando uma pági-na em branco e, logo em seguida, salvá-la como um modelo. Vocêé quem decide a ordem de criação de seus modelos e projetosde páginas.
Áreas editáveis
Essa é a hora em que vamos definir todos os elementos e áreasque sua página deve armazenar, o espaço conhecido como área edi-tável, ou seja, local em que os dados podem ser inseridos.
Por padrão, todas as áreas de um moelo são bloqueadas. Casoalguma informação tenha de ser inserida, é preciso criar regiões edi-táveis, portanto, toda informação que não for definida como editávelserá automaticamente bloqueada em sua página.
Toda e qualquer alteração na página deve ser feita enquanto esti-ver trabalhando no modelo original. No entanto, páginas que foramconstruídas a partir de modelos criados por você não permitem ne-nhuma alteração, a não ser nas áreas conhecidas como editáveis.
Criando um título editável
Para melhor exemplificar o título editável, crie uma tabela comduas colunas e duas linhas.
Na primeira linha, selecione as duas células criadas e mescle-as,a fim de utilizá-las como área de título. Para isso, selecione as duascélulas, clique com o botão direito do mouse sobre elas e siga omenu Table > Merge Cells.
Com o cursor na primeira linha, criaremos a primeira área editá-vel. Para isso, use o menu Insert > Templates Objects > Editable
Region. Forneça um nome para a área editável e pressione o bo-tão OK:
Figura 7.3.
Outra maneira de criar uma área editável é, na barra Insert, pressior-nar o botão Make Template e, logo após, a opção Editable Region:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 55/130
54Treinamento prático em Dreamweaver
Figura 7.4.
Na hora de inserir áreas editáveis e outros elementos, como ima-gens, o ideal é criar o hábito de não colocar acentos e outros carac-teres especiais, tais como cedilha (ç), exclamação (!) e outros.
Com o cursor posicionado na célula em que a área editável foi cria-da, você verá que, na barra de propriedades, aparecerá o seguinte:
Figura 7.5.
Ao posicionar o cursor sobre a área editável, você verá, logo aci-ma, o nome da região:
Figura 7.6.
Caso não esteja vendo o nome da área editável, utilize o menuView > Visual Aids > Invisible Elements.
Após criar a área com o título, é importante alterar sua aparência,ou seja, o tamanho da fonte, a cor dos caracteres e o alinhamento dotexto. Para tanto, selecione a área abaixo do nome da região editá-vel, que também apresenta a mensagem Titulo Principal, selecioneo texto e utilize a barra de propriedades:
Figura 7.7.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 56/130
55Modelos e bibliotecas
Inserindo um local para fotos
Agora que você criou uma área para o título, crie uma na qualdeve ser colocada uma imagem, como uma foto, por exemplo.
Para fazê-lo, abra o menu Insert > Image Objects > Image Pla-ceholders. Dê um nome para a foto e defina suas dimensões (largurae altura), sua cor de fundo e um possível texto alternativo. Pressioneo botão OK.
Figura 7.8.
O local para a inserção da imagem já está na célula apropriada,agora você não poderá esquecer de que é preciso tornar esta áreaeditável. Para tanto, selecione a área que acaba de criar, dê um cliquesobre a imagem, um clique no botão Template e selecione a opçãoEditable Region. Por fim, forneça um nome para a nova área editável.
Em sua página, você criou duas área editáveis, ou melhor, duasáreas em que a inserção de informações será permitida. Para ve-rificar as áreas editáveis que você criou, siga o menu Modify >Templates; as últimas linhas do menu irão informar todos os nomesdas regiões, inclusive aquela na qual seu cursor estiver:
Figura 7.9.
Portanto, é preciso lembrar de tudo o que deve ser alterado ouincluído, mesmo os links devem estar em uma região editável.
Uma preocupação que devemos ter em conta diz respeito à cria-ção dos links. Assim, sempre use o ícone da pasta para que você
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 57/130
56Treinamento prático em Dreamweaver
posicione o cursor sobre o arquivo desejado, procure nunca digitaro link direto no campo que lhe é reservado, pois isso pode impedirque o Dreamweaver localize os arquivos:
Figura 7.10.
Para remover uma área editável, selecione a região e siga o menuModify > Templates > Remove Template Markup, ou, se preferir,clique sobre a área e pressione a tecla Delete.
É importante saber que, ao remover uma região editável de umarquivo de modelo que possui páginas subseqüentes, todas as pá-ginas modificadas na região que você tornou editável serão altera-das, de forma que a região editável mude para refletir as alteraçõesefetuadas.
Inserindo conteúdos opcionais
No Dreamweaver, um recurso interessante é conhecido como con-teúdo opcional, áreas nas quais definimos um conteúdo que será ocul-to ou exibido de acordo com as páginas criadas a partir de um mode-lo. Para criar uma área com conteúdo opcional, faça o seguinte:
1. Selecione uma linha de sua tabela e siga o menu Insert >Template Objects > Optional Region.
2. Digite um nome para a área opcional, como por exemplo, Pra-
tos, e desabilite a opção Show by default (Exibir por padrão). Essaopção deve estar habilitada quando na maiorira de suas páginas oconteúdo for definido como opcional.
3. Pressione o botão OK.
Na página que estamos criando, você definiu que algumas áreastêm conteúdos opcionais, ou seja, por padrão elas ficam ocultas naspáginas criadas a partir de seu modelo. Ao criar e editar novas pági-
nas, é possível ocultar ou exibir as áreas com conteúdos opcionais.Vejamos como controlar o conteúdo definido como opcional:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 58/130
57Modelos e bibliotecas
1. Use o menu Modify > Template Properties.
2. Selecione a área opcional criada (Opcional) na lista de nomes.
3. Nesse caso, algumas opções da região tornam-se disponíveis.
4. Ative a opção Show.
5. Repare que a caixa de opções Value tem seu valor alterado. Elapassa de oculto (False) para exibido (True).
6. Pressione o botão OK.
Regiões que se repetem
Algumas vezes, há determinadas áreas em uma página que de-vem ser duplicadas, principalmente quando precisamos fazer váriasentradas. O Dreamweaver pode trabalhar com essas áreas e as reco-nhece como áreas repetitivas, permitindo o controle sobre todas.
Para inserir áreas repetitivas, selecione, em suas páginas, duaslinhas vazias na parte inferior da tabela (duas linhas e duas colunas),
abra o menu Insert > Template Objects > Repeating Region, dê umnome à área e pressione o botão OK:
Figura 7.11.
1. Crie uma tabela com duas linhas e três colunas.
2. Na nova tabela, digite cabeçalhos na linha Pratos, na célula àdireita, Sobremesas, e na última célula, Sopas.
3. Selecione a próxima célula em branco, abaixo do título Pratos.
4. Use o menu Insert > Template Objects > Editable Regions, oupressione o botão Editable Region existente na barra Insert.
5. Crie uma área editável chamada Pratos.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 59/130
58Treinamento prático em Dreamweaver
6. Na próxima célula à direita, crie uma área editável chamadaSobremesas.
7. Na última célula à direita, crie uma região editável chamada
Sopas.
8. Pronto, sua tabela deverá ter a seguinte aparência:
Figura 7.12.
Construindo páginas a partir de modelos
Após definir as áreas editáveis, aquelas em que seu conteúdopode ser alterado e também as áreas repetidas de seu site, é possí-vel salvar o modelo criado e fechá-lo para que possamos criar umapágina estruturada exatamente nesse modelo.
Para criar uma nova página, use o menu File > New. Na janelaNew from Template, selecione a guia Templates.
Note que aparecerá o nome de seu projeto e, à direita, todos osmodelos gerados a partir dele:
Figura 7.13.
Dê um clique no modelo recém criado (Information.dwt) e pres-sione o botão OK.
Insira o título no local desejado e a foto que pretende colocar em
sua página. Repare que você poderá inserir elementos apenas nasáreas editáveis.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 60/130
59Modelos e bibliotecas
Observe também que em sua página aparecem áreas bloqueadasnas quais a cor padrão é amarelo-fosco e o nome do modelo apare-cerá no canto superior-direito da página.
Caso o cursor esteja posicionado em uma área bloqueada (região
não-editável), o ponteiro do mouse terá a aparência de um círculo comuma linha atravessada. Esse ponteiro também será exibido sempreque estiver em uma área bloqueada, ou quando receber um clique.
Preencha todo o conteúdo e grave o arquivo como Pedidos.html.Nesse caso, você preencherá uma matriz e o modelo original não foialterado; este permanece na pasta do Dreamweaver com os outrosmodelos criados anteriormente.
Alterando modelos
Caso seu modelo precise de alguns ajustes, você poderá editá-loe efetuar as alterações.
Para tanto, abra o modelo utilizado com o menu File > Open
Recent, e dê um clique no arquivo Information.dwt.Faça alguma alteração em seu modelo, como, por exemplo, alte-
rar a parência do título principal, sua fonte ou seu tamanho.Salve seu modelo e feche o arquivo. Anteriormente, você pode
ter criado várias páginas baseadas nesse modelo, mas, agora, fezalterações em sua matriz. Ao abrir os arquivos criados estruturadosem seu modelo, as páginas exibidas podem não refletir suas altera-ções, portanto, para que elas sejam atualizadas, você deve mantero modelo e todas as páginas criadas também abertas na tela, pois,dessa forma, ao alterar o modelo, todas as páginas seguintes, cria-das a partir do modelo, serão atualizadas.
Caso o modelo e as páginas estejam fechados, abra-os e utilize omenu Modify > Templates, selecionando a opção Update Current
Page, para que somente a página atual seja alterada.Mas o que fazer se várias páginas foram criadas com base nesse
modelo? Ora, basta abrir uma a uma e seguir o mesmo menu Modify > Templates > Update Current Page. Outra opção é verificar a al-teração nos modelos, bem como nos links existentes, o que é muitomais conveniente caso várias páginas tenham sido geradas a partirde um modelo.
Para atualizar as páginas, use o menu Modify > Templates >
Update Pages. Para verificar o registro das alterações, marque aopção Show Log e, ao pressionar o botão Done, automaticamente
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 61/130
60Treinamento prático em Dreamweaver
serão atualizadas todas as páginas, links e modelos, bem como otempo necessário para todas as atualizações:
Figura 7.14.
Trabalhando com bibliotecas
Em muitas das páginas criadas, alguns elementos tornam-se re-petitivos, como botões, direitos autorais do site e esse tipo de infor-mações.
Como exemplo, suponha que, por padrão, todas as suas páginaspossuem os direitos autorais e a data da última atualização. Essas
informações fazem parte de mais de quatro páginas criadas em seusite, portanto, você deverá abri-las uma a uma para alterá-las. Ouseja, é preciso selecionar o texto, fazer as alterações e, logo a seguir,salvar e fechar a página. Imagine ter de fazer isso uma vez por dia emvárias páginas? Um sufoco, não é mesmo?
Dessa forma, podemos chamar esses itens repetidos, tratando-os como elementos, em uma biblioteca de itens e utilizá-los sempreque forem necessários.
É improtante salientar que tais itens somente podem ser criados
na tag <body> e </body>.Saiba como criar itens em uma biblioteca:
1. Ao final de sua página digite o texto 2006, O Chef em Casa.
2. Para inserir a data atualizada, use o menu Insert > Date, sele-cione o estilo desejado da data e pressione o botão OK.
3. Salve sua página.
4. Abra o painel de arquivos usando o menu Window > Files.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 62/130
61Modelos e bibliotecas
5. Dê um clique no painel Assets.
6. Selecione a informação que você acaba de inserir.
7. Arraste até o painel Assets.
8. Clique no último botão da janela, chamado Library:
Figura 7.15.
9. Um novo item de biblioteca será criado. O nome desse itemserá Untitled.
10. Clique sobre o novo item e dê-lhe um novo nome, Direitos,por exemplo, e pressione Enter.
Outra maneira de criar um item é com o botão New Library, naparte inferior do painel de grupos Library:
Figura 7.16.
Inserindo um item de biblioteca em páginas
Para inserir um item de biblioteca em uma página, faça o seguinte:
1. Abra a página em que deseja ver o item de biblioteca.
2. Posicione o cursor no local em que deseja ver o item.
3. Dê um clique sobre o item de biblioteca criado.
4. Pressione o botão Insert existente no painel Library.
5. Automaticamente, o item será inserido em sua página.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 63/130
62Treinamento prático em Dreamweaver
Caso queira, você poderá utilizar o seguinte atalho:
1. Abra o painel Files e a guia Assets.
2. Dê um clique sobre o item de biblioteca desejado.
3. Posicione o cursor no local em que deseja ver o item.
4. Arraste o item do painel Assets até o local desejado.
Sempre que um item de biblioteca é inserido em um documento,uma referência a esse item será feita (um código em HTML é inseri-do), mesmo que você não esteja vendo o item na pasta Library de
seu site. Cada item gerado é gravado na pasta Library com o nomeque você informou e a extensão .lbi.
Caso tenha removido um item de biblioteca acidentalmente, des-de que possua várias outras páginas com os elementos utilizados,você poderá recriá-lo rapidamente. Para isso, abra a página com oitem de biblioteca que você removeu. Pressione o botão Recreate existente no painel Assets.
Nesse caso, o item será recriado com o mesmo nome de itemutilizado na página.
Para modificar um item de biblioteca, dê um duplo clique sobre oícone existente no painel Assets e, rapidamente, o mesmo será aber-to em nova janela. Faça todas as alterações que achar conveniente.
Para atualizar todas as referências de bibliotecas utilizadas em suaspáginas, siga o menu Modify > Library > Update Pages. Para alterarsomente a página corrente, a opção deve ser Modify > Library >Update Current Page.
Da mesma forma que os modelos, automaticamente o Dream-
weaver informa a atualização de todas as referências:
Figura 7.17.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 64/130
63Modelos e bibliotecas
Para excluir um item da biblioteca, dê um clique no item desejadoe pressione o botão Delete, presente no painel Assets.
Veja, agora, como criar um item de biblioteca que funcionarácomo referência a menus de outras páginas:
1. Crie uma tabela com uma linha e quatro colunas.
2. Digite os textos seguintes como títulos das colunas: Aulas,Cardápios, Almoços e Jantares e Home.
3. Selecione o texto e formate da forma desejada.
4. Selecione o item Aulas.
5. Crie um link para a página correspondente.
6. Selecione o item Cardápios e crie um link para a página cor-respondente.
7. Selecione o item Almoços e Jantares e crie um link para ele.
8. Selecione o item Home e crie um link para a página Index.
9. Selecione a tabela criada.
10. Pressione o botão New item Library do painel Assets.
11. Digite o nome do novo item, como, por exemplo, Menus, epressione Enter.
Pronto, agora todas as suas páginas podem ter um menu criado.Para isso, arraste o item Menu do painel diretamente para suas pá-ginas.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 65/130
64Treinamento prático em Dreamweaver
Molduras
Você pode dividir a página de seu site em várias regiões, sen-
do que cada uma delas funciona como uma página HTML diferente.
Tais divisões são conhecidas como molduras ou frames. Um frame
é uma parte (região) de sua janela que exibe um documento HTML
independente do exibido no restante da janela.
A primeira vantagem que temos ao utilizar frames é o fato de que
a página não precisará ser recarregada continuamente, além de que
cada frame conta com barras de rolagem individuais, permitindo
uma aproximação mais individual.
Por outro lado, muitos programadores preferem não trabalhar
com frames, já que estes sobrecarregam suas páginas. Outras des-vantagens são o alinhamento gráfico, mais difícil, e o teste de nave-
gação, mais demorado.
Criando frames
Para criar um frame, abra um documento e escolha a categoria
Framesets, escolha um tipo de frameset e pressione o botão Create:
Figura 8.1.
Criando frames em documentos em branco
Caso você tenha criado uma página em branco e deseja aplicar
layouts de frames, faça o seguinte:
1. Com o documento aberto, use a barra Insert.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 66/130
65Molduras
2. Clique na opção Layout.
3. Pressione o botão Frames e dê um clique no tipo de frame
desejado.
Figura 8.2.
Visualizando bordas dos frames
Muitas vezes, as bordas de um frame não estão visíveis. Para
visualizá-las, use o menu View > Visual Aids e selecione a opção
Frame Borders.
Desenhando frames
Você pode desenhar frames dentro de frames existentes. Para isso,
use o menu Modify > Frameset e utilize um dos itens disponíveis:
Figura 8.3.
Opção
Split Frame Left
Split Frame Right
Split Frame Up
Split Frame Down
Descrição
Cria um frame à esquerda do atual.
Cria um frame à direita do atual.
Cria um frame acima do atual.
Cria um frame abaixo do atual.
Tabela 8.1.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 67/130
66Treinamento prático em Dreamweaver
Outra maneira de separar os frames em partes menores é manter
a tecla Alt pressionada enquanto arrasta uma borda do frame sele-
cionado para a esquerda ou para a direita.
Redimensionando frames
A maneira mais rápida de redimensionar um frame é manter o
botão do mouse pressionado enquanto o arrasta para a esquerda ou
para a direita.
Excluindo frames
Para excluir um frame, você pode arrastar sua borda para fora dapágina atual. Caso algum documento não tenha sido gravado em
frames removidos, o Dreamweaver nos informa.
Selecionando frames
Para formatar frames, é preciso selecioná-los. Para selecionar,
siga o menu Windows > Frames. Aparecerá do lado direito da tela o
painel de frames. Ao clicar em um dos frames desse painel, automa-
ticamente ele será selecionado na janela do seu site:
Figura 8.4.
Ao selecionar um frame, será acrescida uma linha pontilhada na
janela de design, indicando o frame selecionado. A maneira mais rá-
pida de fazer uma seleção é manter a tecla Alt pressionada enquanto
dá um clique sobre o frame desejado.
Especificando o conteúdo de um frame
Com o Dreamweaver, é possível especificar o conteúdo inicial de
um frame, ou seja, abrir determinada página em um frame. Saibacomo fazê-lo:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 68/130
67Molduras
1. Dê um clique no frame desejado.
2. Siga o menu File > Open in frame. Será aberta a seguinte janela:
Figura 8.6.
Salvando frames
Se deseja visualizar sua página no browser, você deve, antes de
qualquer coisa, salvar todos os documentos exibidos nos frames
existentes. Para tanto, siga o menu File > Save Frame, ou Save frame
as, e indique o nome do frame no documento.
Se for necessário salvar todos os arquivos associados a um con-
junto de frame, utilize o menu File > Save All.
Figura 8.5.
3. Indique o nome do arquivo que deseja ver aberto e pressio-
ne OK.
4. Você verá, no frame em que o cursor está posicionado, o ar-
quivo aberto:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 69/130
68Treinamento prático em Dreamweaver
Propriedades do frame
Selecione um frame e veja as opções apresentadas na barra
Properties:
Figura 8.7.
Na tabela seguinte, a definição de cada um dos botões:
Botão Definição
Permite alterar o formato do parágrafo, do texto e
da fonte utilizada.
Permite aplicar um estilo ao texto, bem como al-
terar seu tamanho e cor.
Permite aplicar negrito e itálico.
Permite alterar o alinhamento do texto no frame.
Permite aplicar marcadores, numeração ou recuos.
Permite especificar um link ao frame com outra
imagem ou documento.
Tabela 8.2.
Alterando a cor do preenchimento da frameset
Para alterar a cor de preenchimento (fundo), posicione o cursor
em um frame e use o menu Modify > Page Properties. Na caixa de
diálogos exibida, use a opção Background color.
Propriedades do frame
Selecione um frame e veja as opções da barra Properties:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 70/130
69Molduras
Figura 8.8.
Nessa barra, é possível visualizar o número de linhas ( rows) e co-
lunas (columns) do frame, se há bordas ( border), bem como a espes-
sura ( border width) e a cor ( border color) destas. A opção Column
determina qual a medida da coluna do frame em pixels.
Inserindo títulos em frames
Para inserir um título em um frame, selecione o frame desejado e
digite o título no campo Title, na barra de ferramentas.
Figura 8.9.
Utilizando target
Você pode adicionar um link em um frame para abrir um docu-mento existente, utilizando um destino (target) para esse link. Para
isso, no modo de visualização de design, selecione a opção Link,
especifique o arquivo desejado e, na opção Target, selecione o fra-
me, ou janela, no qual o documento linkado deve aparecer. Veja as
opções existentes:
Descrição
Atribui o documento especificado em uma nova janelado browser, fazendo com que a janela atual permaneça
sem alterações.
Abre o documento especificado em um frame que origi-
nou aquele em que o link aparece.
Abre o documento especificado em link no frame atual,
substituindo o conteúdo existente.
Abre o documento especificado em link na janela atual
do browser, substituindo todos os frames.
Opção de target
_blank
_parent
_self
_top
Tabela 8.3.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 71/130
70Treinamento prático em Dreamweaver
Vale ressaltar que os nomes dos frames aparecem na lista Target se,
por acaso, você estiver dentro de um. Ao editar o documento em sua
própria janela, os nomes dos frames não aparecem na lista Target.
Alguns browsers não suportam o trabalho com frames; nesse
caso, o conteúdo é armazenado no arquivo de frame em uma tagconhecida como “noframes”.
Para visualizar frames em browsers que não oferecem suporte,
siga o menu Modify > Frameset > Edit Noframes Content e insira o
conteúdo como em um documento comum.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 72/130
71Camadas
Camadas
Também conhecidas como layers, o Dreamweaver pode traba-lhar com camadas, elementos de uma página HTML que podem serposicionados em qualquer lugar, permitindo a inserção de imagens,textos ou de qualquer outro conteúdo no corpo do código HTML(<body>). Uma camada é uma tag <div> com posicionamento ab-soluto ou relativo.
Inserção de camadas
Assim como as tabelas e os frames, uma camada pode conter ca-
madas aninhadas. Para desenhar uma camada simples, use a barrade ferramentas Insert e clique no botão Draw Layer:
Figura 9.1.
Outra maneira de inserir layers é seguir o menu Insert > Layer.
Na criação de camadas, o ponteiro do mouse será alterado parauma mira (cruz). Ao posicionar o cursor na janela e arrastá-lo para adireita e para baixo, verá a nova camada surgir. Quando terminar decriar, solte o botão do mouse.
Caso não visualize as bordas/marcadores de código das cama-das, use o menu View > Visual Aids > Invisible Elements.
Após criar a primeira camada, mantenha a tecla Ctrl pressionadaenquanto cria novas camadas, sem ter de utilizar o comando nova-mente.
Caso o cursor esteja posicionado em uma camada, ao criar a pró-xima, a camada atual se expande para receber a nova; esse recursoé conhecido como camadas aninhadas.
Visualizando a janela dodocumento e a de código
Caso você tenha conhecimentos em códigos HTML, pode quereranalisar as duas janelas simultaneamente, com um clique no botãoda Figura 9.2:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 73/130
72Treinamento prático em Dreamweaver
Figura 9.2.
Figura 9.3.
Por padrão, o código de uma camada é inserido na parte superior dapágina, logo após a tag <body>. A tag <div> permite que um públicomaior visualize suas camadas. Ela cria um posicionamento da camadaem relação aos lados superior e esquerdo da janela do browser:
Figura 9.4.
Ao posicionar o cursor e digitar o texto, a camada se expandepara acomodar todo o texto digitado; esse é o padrão em camadas.
Gerenciando camadas
Para gerenciar as camadas existentes de seu documento, use omenu Window > Layers, ou o atalho F2:
Figura 9.5.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 74/130
73Camadas
Para exibir ou ocultar camadas aninhadas, utilize os botões Plus
(+) ou Minus (-).Repare que será apresentada uma lista com o nome da camada
acompanhado por um número (z), o índice de camadas criadas.
Ao selecionar uma camada com um clique do mouse, automati-camente seu nome aparecerá em negrito. Para selecionar várias ca-madas de uma só vez, mantenha pressionada a tecla Shift enquanto
faz a seleção:
Figura 9.7.
Figura 9.6.
Caso o cursor esteja posicionado na janela de documento, dê umclique na borda da camada e utilize as teclas Ctrl e Shift para selecio-nar múltiplas camadas.
Preferência de camadas
Para especificar as configurações padrão das camadas, utilize omenu Edit > Preferences e dê um clique na categoria Layers:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 75/130
74Treinamento prático em Dreamweaver
Definindo as propriedades de uma camada
Ao selecionar uma camada, você observará as seguintes proprie-dades na barra Properties:
Figura 9.8.
Nomeando camadas
Cada camada criada vai receber um nome genérico, como layer1,layer2, e assim sucessivamente. Para nomear suas camadas, utilizea barra Layers, no lado direito da tela. Dê um duplo clique sobre onome da camada, digite um novo nome e pressione a tecla Enter:
Figura 9.9.
Outra maneira de nomear camadas é digitar um nome na opçãoLayer ID:
Figura 9.10.
Largura e altura das camadas
Para alterar a largura e a altura de uma ou mais camadas, selecio-ne-as e utilize as opções H ( height /altura) e W (width /largura) e digiteas medidas em pixels:
Figura 9.11.
Para alterar a posição da camada em sua página com relação à mar-
gem superior e esquerda do documento, use as opções R ( right /direita)e L ( left /esquerda):
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 76/130
75Camadas
Figura 9.12.
Para redimensionar em uma camada um pixel de cada vez, se-lecione a camada e arraste as alças de redimensionamento até alargura desejada.
Alterando o posicionamento de uma camada
Para alterar a ordem em que a camada aparece na janela do docu-mento, digite um novo valor do índice na opção Z-Index:
Figura 9.13.
No exemplo seguinte, é possível observar que, dependendo dascamadas, devemos alterar a ordem de empilhamento. Por padrão, aprimeira camada aparece abaixo da segunda, mas o resultado podenão ser o esperado:
Figura 9.14.
Alterando a cor de fundo da camada
A cor de fundo de uma camada é alterada quando utilizamos aopção Bg color presente na barra Properties:
Figura 9.15.
Para inserir uma imagem no fundo da camada, use a opção Bg
image:
Figura 9.16.
Alterando a visibilidade da camada
Caso não esteja visualizando o painel de camadas, siga o menuWindow > Layers ou pressione a tecla F2. Para ocultar a visualiza-
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 77/130
76Treinamento prático em Dreamweaver
ção de uma camada, dê um clique no ícone com a figura de um olhoaberto ao lado do nome da camada. Para voltar a exibir a camada,basta dar um clique no ícone com a figura de um olho fechado:
Figura 9.17.
Alinhando camadas
Para alinhar duas ou mais camadas, selecione as que desejaalinhar, use o menu Modify > Align e escolha uma das opções de
alinhamento apresentadas.É possível fazer cortes em uma camada utilizando as seguintes
opções da barra Properties:
Figura 9.18.
Sobreposição de camadas
O Dreamweaver não permite criar uma tabela com camadas so-brepostas. Caso você pretenda converter as camadas em tabelas,será necessário prevenir-se com relação às sobreposições. Paraisso, siga o menu Modify > Arrange > Prevent Layer Overlaps.
Convertendo camadas em tabelas
Para converter as camadas selecionadas em tabelas, abra o menuModify > Convert > Layers to Table:
Figura 9.19.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 78/130
77Camadas
O ideal é ativar as opções Most accurate, útil para preservar o layout do texto e Prevent layer overlaps, com a qual nos prevenimosdas sobreposições de camadas.
Na tabela a seguir, saiba a descrição das funcionalidades de cada
uma das opções apresentadas na figura anterior:
Tabela 9.1.
Convertendo tabelas em camadas
O procedimento contrário também pode ser aplicado, ou seja,converter uma tabela em layers. Para isso, siga o menu Modify >Convert > Table to Layers. Após escolher as opções desejadas,pressione o botão OK:
Opção
Most accurateSmallest: collapse empty cellsLess than: X pixels wide.Use transparent GIFsCenter on pagePrevent layer overlapsShow layers panelShow gridSnap to grid
Descrição
Para maior precisão.Para fechar células vazias.Menores que X pixels de largura.Utilizar GIFs transparentes.Centralizar na página.Evitar sobreposição de camadasMostrar o painel camadas.Mostrar a grade.Encaixar na grade.
Figura 9.20.
Opções de grade e régua
Quando trabalhar com camadas, é ideal utilizar grades e réguasque sirvam como guias em seu documento. Para tanto, siga o menuView > Grid > Show grid:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 79/130
78Treinamento prático em Dreamweaver
Opções
ColorShow gridSnap to grid
SpacingDisplay
Definições
Permite especificar a cor das linhas de grades.Permite exibir as linhas de grade.Permite ancorar as camadas e objetos às grades.
Permite especificar o espaçamento entre as grades.Permite visualizar as grades como linhas ( lines) ou pontos(dots).
Figura 9.21.
Para facilitar o posicionamento de camadas, é possível prendê-las em pontos pré-determinados das grades. Para isso, use o menuView > Grid > Snap to grid.
Para configurar as especificações das grades existentes, siga omenu View > Grid > Grid Settings. Você encontrará as seguintes
opções:
Figura 9.22.
Na tabela seguinte, veja o que cada uma das opções possibilita:
Tabela 9.2.
Nota: para excluir uma camada, selecione-a e pressione a teclaDelete.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 80/130
79Links
Links
Ao criar um site com documentos da Web, é preciso fazer algu-
mas conexões entre imagens e documentos. Por exemplo, há em
todo site uma página inicial (index) que possui chamadas (conexões)
a outras páginas.
O Dreamweaver permite fazer essas conexões criando links para
documentos, imagens, arquivos de som e imagem (multimídia) ou,
ainda, para programas em que podemos fazer o download de outras
informações.
Caminhos de arquivos
Ao criar um link, é importante perceber que o caminho ( path) do
documento na tela é vinculado àquele que está sendo habilitado.
Por isso, o ideal é manter todos os arquivos de documentos em uma
mesma pasta, para que facilite a conexão.
Cada página em seu site possui um endereço único, conhecido
como URL (Universal Resource Locator); sempre que você fizer a
conexão dessa página com outro arquivo, será indicado o caminho
relativo ao documento ou à pasta à qual ele pertence.
A maioria dos aplicativos de criação de páginas entende que te-mos três tipos de caminhos de link de arquivos. São eles:
• Caminhos absolutos: aqueles em que são fornecidas as infor-
mações completas para a URL, como, por exemplo http://www.dige-
rati.com.br/livros/dreamweaver.htm, em que tanto no arquivo atual
como no linkado são fornecidas informações absolutas (completas);
• Caminhos relativos ao documento: esse tipo de caminho é o mais
apropriado para os links locais da maioria das páginas da Web, pois em
suas especificações não há registro da URL completa, sendo diferente
apenas o segmento do caminho. Como exemplo, temos aulas.htm
• Caminhos relativos à raiz: esse tipo de caminho fornece a loca-
lização da pasta-raiz de seu site a um determinado documento. Esse
processo é bastante utilizado quando trabalhamos com sites mais
complexos e grandes (os portais, por exemplo), pois utilizam vários
servidores ou, até mesmo, um servidor capaz de hospedar vários
sites diferentes. Por exemplo, /livros/dreamweaver.htm.
Por isso, é importante armazenar os arquivos linkados e com ima-gens na mesma pasta em que está o seu site. Como exemplo, temos
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 81/130
80Treinamento prático em Dreamweaver
a página Index.htm que, por sua vez, chama a página Aulas e a página
Cardápios. Cada uma dessas pastas abre imagens, fotos e sons que
fazem referência a outros documentos e mensagens. Para não perder
um tempão no servidor tentando localizar essas informações, o ideal
é armazenar tudo em pastas distintas. Ou seja, quanto às páginas re- feridas, deixe-as na raiz principal, as imagens, em uma página conhe-
cida como Imagem, o mesmo com sons e assim sucessivamente.
Estabelecendo caminhos relativos ao documento
Quando o arquivo está na mesma pasta do documento atual, se
faz necessário digitar o nome do arquivo que deseja linkar:
Figura 10.1.
Para fazer vínculo com um arquivo que está em uma subpasta,
você deve fornecer o caminho dessa subpasta:
Figura 10.2.
Em qualquer um dos exemplos citados, é importante, para nãocausar erros de digitação, utilizarmos o botão com a pasta amarela
ao lado da palavra Link. Dessa forma, o Dreamweaver procura o ar-
quivo e transcreve, nesse local, todo o caminho:
Figura 10.3.
Sempre que utilizar a pasta amarela para fazer referência a um
arquivo externo à pasta atual, automaticamente o Dreamweaver irá
perguntar se deseja fazer uma cópia desse arquivo, evitando o trans-
torno de localizar o documento linkado:
Figura 10.4.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 82/130
81Links
Criando links
Até agora, trabalhamos com links sobre textos (hipertextos), ou
seja, com o cursor posicionado em determinada palavra, e utiliza-
mos a opção Link, existente na barra Properties. Isso é conhecidocomo uma tag de âncora, na qual o Dreamweaver gera um par de
âncoras para os objetos linkados, textos ou imagens. Portanto, ao
criar um link, automaticamente o código HTML será:
<a href=”fi le:///C:/Documents%20and%20Settings/
Sandra/logos/aulas.JPG”Aulas</a>
Você pode criar links com outros documentos, arquivos de ima-
gem, filmes, sons, arquivos PDF, nomes, correios eletrônicos e, tam-
bém, links nulos, que permitem anexar determinado comportamen-
to a um objeto.
Uma maneira rápida de criar esse tipo de link é digitar o nome
que lhe pertence na opção Link, na barra Properties. Por outro lado,
se deseja maior paticidade, arraste o nome do arquivo existente na
barra Files (lado direito da tela) até a opção Link.
Outra maneira de criar um link é selecionar o texto ou imagem e
usar o menu Modify > Make link ou pressionar as teclas Ctrl + L.
Fazendo links em imagens
1. Dê um clique na página que deve receber a imagem.
2. Na janela Properties, na opção Src, arraste o nome de um ar-
quivo de imagem.
3. Na opção Link, arraste o nome de um documento que deve ser
linkado:
Figura 10.5.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 83/130
82Treinamento prático em Dreamweaver
Outra forma rápida e eficiente de fazer links é dar um clique no
ícone Point to file (relógio), à direita do campo Link e, em seguida,
arrastar o ponteiro do mouse para o painel Files até o arquivo que
deseja linkar.
Uma seta aparecerá indicando que os dados foram linkados.
Criando link usando o site Map
No painel Files (lado direito da tela), você pode ter uma visão
global de todos os arquivos que estão dentro da mesma pasta, bem
como dos links gerados. A visualização atual recebe o nome de Lo-
cal view:
Figura 10.6.
Para mudar o modo de visualização, mude a opção Local view para Map view:
Figura 10.7.
Para visualizar os arquivos e o mapa do site, é preciso expandir
essa janela por meio do botão Expand/collapse (Figura 10.8):
Figura 10.8.
Com a tela do mapa do site expandida, você verá o arquivo Index.
htm. Dê um clique nesse arquivo e verá o ícone Point to File.Arraste esse ícone e aponte-o para outro arquivo que será linkado:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 84/130
83Links
Figura 10.9.
Esse método funciona muito bem quando você precisa criar links
no site inteiro.
Para retornar à janela do Dreamweaver, pressione novamente o
botão Expand/collapse.
Testando
Para verificar os links criados, você pode testá-los simulando a
utilização no navegador. Para isso, basta pressionar a tecla F12 e dar
um clique em cada link gerado para ver se estão fazendo as referên-
cias corretas.
Links de correio eletrônicos
Um link de correio eletrônico abre uma nova janela de uma nova
mensagem e utiliza o programa de correio eletrônico associado aonavegador utilizado pelo usuário. Para saber qual é esse programa
de correio eletrônico, use o menu Iniciar e clique, com o botão direi-
to do mouse, sobre o ícone Internet, ative a opção Propriedades e,
na guia Programas, você terá todas as informações necessárias:
Figura 10.10.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 85/130
84Treinamento prático em Dreamweaver
Portanto, ao criar um link com um correio eletrônico, automatica-
mente será exibida a janela de seu programa de correio.
Para criar um link, faça o seguinte:
1. Digite Fale conosco:
2. Com o ponto de inserção logo após os dois pontos da expres-
são digitada, use o menu Insert > Email Link:
Figura 10.11.
3.No campo Text, digite o texto que deseja exibir no documento,
funcionando como link.
4. No campo E-Mail, digite o endereço eletrônico do contato e
pressione OK.
Ao testar seu site, veja que, ao clicar sobre esse endereço, auto-
maticamente o navegador irá exibir uma janela em branco com uma
nova mensagem.
Gerenciando links
Caso você mude os links de pastas (endereços) ao abrir sua página
e utilizar um link ao qual você se referiu, automaticamente o Dream-
weaver busca essa informação na pasta de seu documento atual. Esseprocesso pode levar algum tempo, portanto, se a mudança foi feita, é
necessário atualizá-la. Como? Digite os links novamente.
Com esse método você percorrerá link a link, efetuando a tro-
ca da informação. Para facilitar seu tabalho, você pode indicar ao
Dreamweaver que faça a atualização automaticamente. Veja como
é fácil:
1. Use o menu Edit > Preferences.
2. Clique na categoria General.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 86/130
85Links
3. Ative a opção Always (Sempre) da opção Update links when
moving files (Atualizar os links ao mover arquivos) e dê OK.
Essa opção fará uma atualização automática de todos os links
para um documento selecionado, ou de um documento selecionadoque for movido ou renomeado.
A opção Prompt, do mesmo comando, irá exibir uma caixa de
diálogos com uma lista de todos os arquivos alterados. Estando in-
formado, você deve pressionar o botão Update para que o Dream-
weaver faça a atualização.
Uma maneira rápida de cumprir esse processo de atualização é
criar um arquivo de cachê, que armazena todas as informações sobre
os links e seus respectivos locais no site. Para tanto, faça o seguinte:
1. Siga o menu Site > Manage Sites.
2. Selecione o site desejado com um clique.
3. Pressione o botão Edit.
4. Na caixa de diálogos Local Info, use a opção Enable cache.
5. Pressione o botão OK.
Figura 10.12.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 87/130
86Treinamento prático em Dreamweaver
Interatividade
O objetivo desse capítulo é criar interatividade com o visitante dapágina mediante sobreposições e comportamentos do Dreamweaver.
Antes de qualquer coisa, é importante falar um pouco sobrecomportamentos, espécies de ações do usuário (visitante da pá-gina) combinadas com atividades relativas ao evento disparado.Por exemplo, quando o usuário movimenta o mouse sobre umbotão, isso dispara um evento (uma ação): alterar a imagem des-se botão.
Todos os comportamentos em Dreamweaver são como códigospreviamente escritos em linguagem JavaScript e podem ser incor-
porados rapidamente e sem grandes transtornos em seu site.O Dreamweaver possui vários comportamentos que lhe sãopróprios. Caso tenha conhecimentos em JavaScript, poderá criá-los e anexá-los em seu site. Outra coisa interessante é fazer odownload de diversos comportamentos no site do Dreamweaver.Porém, para fazê-lo, é preciso associar-se ao Macromedia.com,uma operação simples e gratuita. Para o ingresso e download, uti-lize o seguinte endereço: http://www.macromedia.com/exchange/dreamweaver.
Imagens cambiáveis
Já vimos o conceito de imagens cambiáveis no Capítulo 4, imagensque mudam quando o usuário as toca com o ponteiro do mouse. Parainseri-las, siga o menu Insert > Image Objects > Rollover Image.
Dê um nome para a imagem na opção Image Name. Informequal imagem deve ser visualizada inicialmente em Original Image.Como, ao posicionarmos o cursor, a imagem deve ser trocada poroutra, indique qual será essa imagem na opção Rollover Image.Como texto alternativo, é possível digitar Pratos Típicos da Cozinha
Internacional .Caso queira que sua imagem acesse um determinado site ou lo-
cal, digite seu endereço na opção When clicked, Go to URL (Quantoclicado, vá para a URL). Dessa forma, quando o visitante clicar sobrea imagem, será enviado para uma página diferente ou para um siteligado ao assunto:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 88/130
87Interatividade
Figura 11.1.
Caso você tenha deixado essa opção em branco, o Dreamweavervai preenche-la com um sinal de link nulo, representado por cer-quilha (#). Nesse caso, será exibida, pelo navegador, a imagem deuma mãozinha apontando para a imagem, fazendo com que o cursor
permaneça na mesma página. Portanto, não deixe essa opção embranco, pois irá remover o código em JavaScript que cria a sobrepo-sição de imagens.
Por enquanto, você está visualizando uma imagem. A interativi-dade será percebida somente ao visualizar a página em seu navega-dor, por isso faça um teste pressionando a tecla F12.
Comportamentos
Agora que você verificou como inserir imagens cambiáveis, va-mos aprender a criar sobreposições de imagens de forma diferente,usando os comportamentos do Dreamweaver. Dê um clique sobre aimagem cambiável que acabou de inserir e abra o painel de compor-tamentos utilizando o menu Window > Behaviors ou, se preferir, oatalho Shift+F3.
Figura 11.2.
Ao abrir o painel de comportamentos, você notará um sinal deadição (+); com ele, inserimos novas ações. Para trocar a imagem,pressione o sinal de adição e use a opção Swap Image (Permutarimagem).
A imagem selecionada aparece em uma lista. Altere a imagemcambiável utilizando a opção Set source to, indicando qual deve ser
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 89/130
88Treinamento prático em Dreamweaver
a imagem a ser exibida. Você percebeu que cumpriu o mesmo pro-cesso do exemplo anterior, mas, nesse caso, usou uma ação (com-portamento) para obter o mesmo resultado. Outra coisa importanteé que, ao fornecer um nome para a imagem, facilitamos sua procura
e inserção. Caso o nome não tenha sido definido, aparecerá a men-sagem unnamed image <img>.
A opção Preload images, por padrão, aparece habilitada, indican-do que é importante pré-carregar as imagens. Nesse caso, as ima-gens que serão trocadas, substituindo as originais, serão carregadas
junto com o restante da página, sobrepondo-as rapidamente e elimi-nando o atraso que, geralmente, ocorre no download sempre que ousuário posiciona o ponteiro do mouse sobre a imagem.
Outra opção que vem habilitada por padrão é Restore images
onMouseOut (Restaurar as imagens onMouseOut), que permite areversão para as imagens originais quando o usuário sair.
Após clicar no botão OK, você verá o comportamento definidono painel:
Figura 11.3.
Nesse exemplo, você tornou uma imagem cambiável. Vejamos,agora, o que fazer para trocar várias imagens com um evento:
1. Abra a página com as imagens que você inseriu.
2. Ative o painel de comportamentos (menu Window > Behaviors).
3.
Use o sinal de adição.
4. Ative a opção Swap Images.
5. Veja o que acontece caso não defina um nome para as imagens:
Figura 11.4.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 90/130
89Interatividade
6. Nesse caso, dê um clique na imagem da lista Images.
7. Ative a opção Browse para trocar a imagem.
8. Indique qual deve ser a imagem cambiável (Set source to).
9. Repita os passos de 6 a 8 até trocar todas as imagens neces-sárias.
Exibindo mensagens pop-up
É possível apresentar pequenas caixas de diálogos ao usuárioclicando em algum botão ou texto inserido. Para testar esse tipo deefeito, faça o seguinte:
1. Digite o texto Cardápios.
2. Selecione-o.
3. Use o sinal de adição (+) do painel de comportamentos.
4. Ative a opção Popup Message.
Figura 11.5.
5. Digite a mensagem que o usuário vai visualizar.
6. Pressione o botão OK.
Para ver o que ocorre, faça um teste no navegador (F12):
Figura 11.6.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 91/130
90Treinamento prático em Dreamweaver
Outro tipo de mensagem que você pode inserir em seu site sãoas existentes na barra de status. Para tanto, selecione uma imageme, novamente, ative o sinal de adição no painel de comportamentos.Siga o menu Set Text > Set Text of Status Bar. Será aberta a se-
guinte janela:
Figura 11.7.
Digite a mensagem que deseja ver na barra de status e pressio-ne OK.
Faça um teste em seu navegador e, ao movimentar o mouse so-bre a imagem, verá a mensagem sendo exibida na barra de statusde sua página.
Figura 11.8.
Menus flutuantes
Outro comportamento bastante utilizado é o que cria menus flu-tuantes com ações criadas no ambiente JavaScript. Tais menus sãoexibidos em navegadores Netscape e em Explorer, mas, provavel-mente, não terá os mesmos efeitos se o usuário estiver utilizando onavegador Opera.
Selecione a imagem desejada e use o sinal de adição do painelde comportamentos. Ative a opção Show Pop-Up Menu para ver acaixa de diálogos:
Figura 11.9.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 92/130
91Interatividade
1. Digite Cardápios na opção Text.
2. Na opção Link, digite a página que deseja visualizar, por exem-plo cardápios.html.
3. Pressione o sinal de adição para criar um novo item de menu.
4. Caso queira criar um subitem de menu, use o botão da Figura
11.10:
Figura 11.10.
5. Após criar todas as opções do menu, você terá a seguinte con-figuração:
Figura 11.11.
Para remover um item do menu, dê-lhe um clique e pressione osinal de subtração.
Para mover os itens, você deve dar um clique na opção desejadae utilizar as setas para cima ou para baixo.
Concluída a criação de seu menu, pressione OK. Para conferir oresultado, faça um teste na janela de seu navegador:
Figura 11.12.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 93/130
92Treinamento prático em Dreamweaver
Alterando a aparência do menu
No painel de comportamento, dê um duplo clique sobre a ação
Show Pop-Up Menu para ver a caixa de diálogos que acabou de uti-
lizar. Dê um clique na guia Appearance e veja as opções existentes:
Figura 11.13.
Para alterar a exibição do menu, use as opções Vertical ou Ho-
rizontal Menu. As fontes devem ser alteradas por meio da opção
Font, Size, B (negrito) e I (itálico).
As opções de Up state indicam o estado do menu quando o pon-teiro do mouse for pressionado e as opções de Over state funcio-
nam quando o ponteiro estiver sobre ele.
Para alterar a aparência das células (bordas ao redor do texto), uti-
lize a guia Advanced, na qual você encontrará as seguintes opções:
Opção
Cell width
Cell height
Cell padding
Text indent
Cell spacing
Show borders
Border width
Shadow
Border color
Highlight
Descrição
Define a largura da célula.
Define a altura da célula.
Define o espaço em branco antes do menu.
Define o espaçamento das células.
Define o espaçamento do texto dentro da célula.
Exibe bordas ao redor das células.
Altera a largura da linha de borda das células.
Permite definir a cor do sombreamento da célula.
Permite definir a cor da borda das células.
Permite definir a cor do brilho das células.
Tabela 11.1.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 94/130
93Interatividade
Para definir o posicionamento do menu com relação à imagem,utilize a guia Position:
Figura 11.14.
Incorporando som à imagem ou ao texto
Um evento que pode chamar a atenção do visitante de seu site éuma música ou um sinal sonoro que pode ser incorporado ao textoselecionado ou à imagem. Para tanto, selecione a imagem ou o tex-to, utilize o sinal de adição do painel de comportamentos e ative aopção Play Sound.
Indique o nome do arquivo de som que deseja incorporar e pres-sione OK. Ao clicar sobre a imagem ou texto, automaticamente oarquivo de som será executado:
Figura 11.15.
Verificando o navegador
Como podemos observar, o navegador utilizado pelo seu visi-tante pode causar alguns transtornos na hora de exibir e executaras camadas e animações. Devido a esse fato, é importante detectarquais os navegadores estão sendo utilizados e tentar redirecionar osusuários para outra página.
Nesse caso, quando o usuário estiver utilizando um navegadordiferente, é possível criar uma página estática sem as camadas ouanimações, redirecionando-a com navegadores do Explorer 4.0 parapáginas com animações.
Para verificar esse comportamento, selecione a tag <body> pararedirecionar o usuário antes que a página seja recarregada.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 95/130
94Treinamento prático em Dreamweaver
Para selecioná-la, vá à barra de status (antes da janela Properties)e dê-lhe um clique.
Figura 11.16.
No painel de comportamentos, clique no sinal de adição e ative a
opção Check Browser:
Figura 11.17.
No caso do Netscape, ou de navegadores mais avançados, comoo Internet Explorer 4.0, direcione a URL (Go to URL), indicando paraqual página o visitante deverá ir.
As opções de Otherwise permitem o redirecionamento com acontinuidade na página.
Caso utilize outros navegadores, marque a opção Other brow-
sers e direcione o visitante para alguma página.A opção URL permite especificar a página para a qual os usuários
dos navegadores mais recentes serão redirecionados. Ao pressionara tecla OK, será inserido o código JavaScript na página.
Abrindo a janela do navegador
Quando sua página for carregada, é possível exibir informações
como anúncios, promoções e outros tipos de dados em uma nova janela do navegador. Nesse caso, podemos controlar o tamanho e
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 96/130
95Interatividade
outros atributos da nova janela do navegador, tais como as barras demenus existentes e as barras de rolagem.
Para abrir em uma nova janela do navegador, use o sinal de adiçãodo painel de comportamentos e a opção Open Browser Window:
Figura 11.18.
Na opção URL to display indique qual página (URL) será exibida.A largura da janela deve ser definida na opção Window width e aaltura em Window height.
Controle todos os atributos da janela utilizando as opções Navi-
gation toolbar (Barra de ferramenta de navegação), Menu bar (Bar-ra de menus), Location toolbar (Barra de ferramenta local), Status
bar (Barra de status), Scrollbars as needed (Barras de rolagem, se
necessárias), Resize handles (Alças de preenchimento) e Window
name, para definir o nome da janela.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 97/130
96Treinamento prático em Dreamweaver
Formulários
Se pretende interagir com o usuário solicitando informações,como o endereço de e-mail do visitante, você pode contar com os
formulários que, além de colher informações, permitem maior rapi-dez na venda de seu produto.
Quando falamos de formulários, falamos também de um códi-go-fonte escrito em HTML que armazena as informações sobre o
formulário, como, por exemplo, todos os campos e botões que ousuário visualiza na página. Por trás do código-fonte, há os scriptsde processamento, mais conhecidos como aplicativos, que proces-sam todas as informações enviadas.
A maior parte dos formulários é processada por scripts CommomGateway Interface, popularmente chamados de scripts CGI, que, naverdade, trata-se de um padrão de envio de informações entre umservidor e um script de processamento. A maioria desses scripts éescrita na linguagem Perl, mas também podem ser feitos nas lingua-gens Java, VBScript, JavaScript e C++.
Antes de criar um formulário, é importante verificar sé é possívelexecutar scripts CGI no seu servidor.
Os objetos dos formulários
Para acessar a barra de formulários, siga o menu Insert > Form >Forms, ou na barra Insert, selecione Forms:
Figura 12.1.
Ao inserir um formulário, aparecem na tela linhas pontilhadasvermelhas que servem para identificar visualmente a área do formu-lário. Essa área é reconhecida pelas tags <form> e </form>.
Vejamos os botões de formulários presentes na barra Forms:
Nome dos botões
Form
Descrição
Insere um formulário na página. Serão visualizadas astags <form> e </form>, que abrem o formulário. Éimportante que todas as informações estejam inseri-
das entre as duas tags para que os dados sejam pro-cessados pelo navegador.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 98/130
97Formulários
Nome dos botões
TextFieldHiddenField
TextAreaCheckBoxRadio ButtonRadio GroupList/MenuJump MenuImage FieldFile Field
Button
Descrição
Insere um campo de texto no formulário.Insere um campo oculto na página.
Insere uma área de texto no formulário.Insere uma caixa de seleção.Insere um botão de opções.Insere um grupo de botões de opções.Insere uma lista de opções.Insere uma lista de navegação ou um menu pop-up.Insere uma imagem.Insere um campo de texto em branco e um botãoBrowse (Procurar).
Insere um botão de ação que realiza uma tarefa.
Tabela 12.1.
Construindo o formulário
Para criar um formulário, em um documento novo, siga o menuInsert > Form > Form e note o contorno pontilhado em vermelhoexibido em sua página.
Ao selecionar esse contorno, você verá a barra Properties:
Figura 12.2.
Digite um nome para o formulário na opção Form Name, como,por exemplo, Visitantes.
No campo Action (ação do formulário), especifique o caminho até
a URL na qual reside o script que vai processar as informações noservidor. Por exemplo: http://www.digerati.com/cgi-bin/forms.cgi.
Em Method (Método), selecione a opção POST. Dessa forma, to-dos os valores digitados no formulário serão enviados ao servidor.
A outra opção existente é GET, que serve para enviar as informa-ções ao servidor e anexá-las à URL. Porém, essa opção não deve serutilizada em formulários extensos, pois as URLs têm um limite de 8.192caracteres; caso os dados sejam enormes, os valores podem ficar trun-cados. É importante, também, não utulizar o método GET quando asinformações solicitadas são confidenciais, como números de cartõesde crédito ou dados bancários, pois esse método não é seguro.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 99/130
98Treinamento prático em Dreamweaver
Criando campos
Criada a tag de formulário, é possível, para facilitar o trabalho ea visualização, criar uma tabela. Assim, controlamos a largura e a
altura de cada um dos objetos do formulário. Para tanto, siga o menuInsert > Table e defina o número de linhas e colunas desejadas.
Para criar um campo de texto simples, com uma linha, faça o se-guinte:
1. Pressione, na barra Form, o botão TextField.
2. Digite um nome para o campo na opção TextField, presente nabarra Properties do campo.
3. Para especificar a extensão do campo de texto, digite 40 naopção Char Width.
4. Para especificar o número máximo de caracteres no campo,use a opção Max Chars.
5. Na opção Type, defina como Single line.
6. Para que apareceça um texto inicial, ao carregar o formuláriuona tela, digite o texto na opção Init val (Valor inicial).
7. Pressione a tecla Enter para criar um novo parágrafo.
Tipos de campos de texto permitidos na opção Type:
Tipo
Single line
Mult line
Password
Descrição
Cria um campo com uma única linha, para textos curtos, comonome, endereço, CEP e outros.Cria um campo de texto maior, no qual podem ser digitadasinformações, como respostas, observações e outros camposextensos. É possível determinar o número de caracteres ou delinhas disponíveis.Cria um tipo de texto especial no qual o que é digitado torna-seoculto ou será substituído por asteriscos ou marcadores. São
utilizados para a inserção de senhas e códigos especiais.Tabela 12.2.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 100/130
99Formulários
Exemplo de campos com múltiplas linhas:
Figura 12.3.
A opção Wrap identifica se o texto deve ou não passar automa-ticamente à linha seguinte (Default ou Off). A opção Virtual definea quebra de linha na área do texto, ao passo que e a opção Physical especifica essa quebra quanto aos dados.
Observe um exemplo de um campo de senhas:
Figura 12.4.
Campos ocultos
Alguns elementos em seu formulários podem ser invisíveis parao usuário, com a finalidade de coletar informações ou mesmo deenviá-las ao servidor. Todas as informações contidas em camposocultos são transmitidas ao servidor quando o formulário é enviado,
utilizando o nome/valor definido na configuração do campo. Vejacomo criar um campo oculto:
1. Em um novo parágrafo, aperte o botão HiddenField.
2. Aparecerá um marcador em seu documento.
3. Na barra de propriedades, digite o nome do campo na opçãoHiddenField.
4. Em Value, digite Catálogo de Produtos.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 101/130
100Treinamento prático em Dreamweaver
5. Crie um novo campo oculto e, em HiddenField, digite Enviar
para.
6. Em Value, digite [email protected].
7. Salve a página. Observe o resultado:
Figura 12.5.
Inserindo caixas de seleçãoUm campo bastante útil em formulários é aquele que permite fa-
zer com que o usuário escolha uma ou mais opções em um grupo deitens previamente relacionados. Saiba como construí-lo:
1. Em um novo parágrafo, digite a pergunta que deseja fazer aousuário. Por exemplo: Qual seu prato preferido?
2. Pressione a tecla Enter para criar uma linha.
3. Use o botão CheckBox name da barra de formulários.
4. Será criada uma caixa de seleção.
5. Na barra de propriedades, digite o nome da caixa de seleção,Carnes.
6. Em Checked value, digite Carnes ao lado do botão criado.
7. Repita os procedimentos dos passos 3 a 6 para inserir novasopções em seu formulário.
Figura 12.6.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 102/130
101Formulários
A opção Initial state serve para definir se, ao carregarmos o formu-lário, a opção aparecerá como ativa (Checked) ou não (Uncheked).
Botões de opção
Para que o usuário possa selecionar apenas uma opção, vocêdeve utilizar o Radio Button. Observe:
1. Em um novo parágrafo, digite Estado Civil .
2. Na barra Form, dê um clique no botão Radio Button.
3. Na barra de propriedades, digite o nome do campo como Sol-
teiro.
4. Em Cheked value, digite Solteiro.
5. Em Initial state, escolha a opção Checked para que estaapareça selecionada quando carregamos o formulário, ouUncheked, para que não apareça selecionada.
6. Para criar uma nova opção, repita os passos de 2 a 5. Observeo resultado:
Figura 12.7.
Listas de rolagem
Podemos configurar uma lista de opções em um espaço limita-do por meio do botão List/Menu. Veja como é fácil criar esse tipode campo:
1. Em um novo parágrafo, digite Escolha um Prato.
2. Pressione Enter e, em seguida, o botão List/Menu.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 103/130
102Treinamento prático em Dreamweaver
3. Na barra de propriedades, digite o nome do campo (Carnes)abaixo da opção List/Menu.
4. Em Type, escolha a opção List, para criar uma lista de pratos
com carne.
5. No campo Height você deve especificar o número de linhasque serão exibidas pela lista. Digite 3.
6. Se deseja permitir ao usuário a seleção de mais de uma opção,habilite Allow multiple.
7. Dê um clique no botão List Values para entrar com as opçõespermitidas.
Figura 12.8.
8. Digite o primeiro elemento, por exemplo, Bife à parmegiana.
9. Em Value, digite Parmegiana.
10. Para criar um novo item, pressione o sinal de adição.
11. Após inserir todos os itens da lista, pressione o botão OK.
12. O campo Value deve armazenar o texto a ser enviado ao ser-vidor quando o usuário seleciona um item.
Menus pop-up
Outro recurso do botão List/Menu da barra de formulários é o fatode podermos criar, com facilidade, menus pop-up que permitem ainclusão de várias opções em espaços limitados. Ao carregarmos o
menu em um navegador, estará visível somente uma das opções, mas
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 104/130
103Formulários
se clicarmos na seta que indica para baixo nesse mesmo menu, todasas opções serão exibidas. Em bancos de dados e em outras lingua-gens, esse tipo de campo é conhecido como caixa de combinação.
Para criar um menu pop-up, faça o seguinte:
1. Em um novo parágrafo, digite Cardápios de congelados e pres-sione Enter.
2. Dê um clique no botão List/Menu da barra de formulários.
3. Dê um nome para o menu utilizando a opção List/Menu.
4. Pressione o botão List Values para criar a lista de elementos.
5. Digite o primeiro elemento da lista na opção Item Label.
6. Em Value digite a informação que será enviada ao servidor,Carnes.
7. Para criar mais itens, use o sinal de adição.
8. Repita os passos de 5 a 7 para criar todos os elementos dese- jados.
9. Para alterar a ordem de exibição, dê um clique sobre o elemen-to e utilize a seta indicando para cima para subir o item, ou a setapara baixo, para descê-lo.
10. Pressione OK quando terminar a lista. Observe:
Figura 12.9.
Menus de salto
É possível criar um menu suspenso com links para outras páginasde seu site; algo similar ao menu pop-up criado anteriormente, mas,
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 105/130
104Treinamento prático em Dreamweaver
agora, com a facilidade de se ligar às páginas mais rapidamente.Saiba como fazer:
1. Em uma área nova de seu formulário, digite Escolha sua opção
e pressione Enter.
2. Pressione o botão Jump Menu.
3. Na opção Text, digite o texto que deseja visualizar no menu: Aulas particulares.
4. Na opção When selected, go to URL, digite o endereço da pági-na para a qual deseja ir, ou pressione o botão Browse para localizá-la.
5. A opção Open URLs in permite informar onde devemos abriras URLs; a opção padrão é na janela principal (Main window).
6. Informe o nome do menu na opção Menu name.
7. Para acrescentar um novo item, utilize o sinal de adição.
8. Para excluir um item, dê-lhe um clique e pressione o sinal desubtração.
9. Ao terminar, pressione o botão OK.
Figura 12.10.
Botões de comando
Criados os campos em seu formulário, será interessante enviarseus dados ao servidor. Para tanto, você pode criar um botão decomando conhecido como Submeter ou Enviar, que informa ao na-vegador o envio de todos os dados de acordo com ação e métodoespecificados. Outro botão importante é o Limpar, que apaga todas
as informações da página e permite a inserção de novos dados. Vejacomo criar o botão Submeter:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 106/130
105Formulários
1. Posicione o ponteiro na última linha de seu formulário.
2. Dê um clique no botão Button, na barra de formulários.
3. Automaticamente, será exibido um botão com o texto Submit.
4. Na opção Button da barra de propriedades digite o nome dobotão.
5. Na opção Label digite o texto que deseja ver no botão. Podeser Submeter ou Enviar, por exemplo.
6. A ação do botão (Action) deve ser Submit form, para que osdados sejam enviados ao servidor.
7. Crie outro botão com o nome Limpar, que tem a função de re-definir o formulário (Reset form).
Figura 12.11.
Campos de imagem
Uma opção interessante em seu formuláiro é a de inserir imagensque podem ser enviadas a outras páginas do site. Esse tipo de cam-po é conhecido como campo de imagem.
Para criar um campo de imagem, use o botão Image Field nolocal em que deseja ver a foto e selecione a figura que que queiravisualizar.
A barra de propriedades da imagem é parecida com a de umaimagem normal. Defina um nome para a imagem na opção abaixode Image Field. Para alterar a largura e a altura, utilize as opções W
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 107/130
106Treinamento prático em Dreamweaver
(width /largura) e H ( height /altura). A opção Src define o nome daimagem de origem. Em Alt, defina o texto que deseja visualizar aoposicionar o ponteiro do mouse sobre a imagem.
Para editar a imagem, use o botão Edit image; se necessário,
altere o alinhamento da imagem utilizando a opção Align.Se achar interessante que a imagem abra o painel de comporta-
mentos, use o sinal de adição e escolha a opção Go to URL.Teste seu formulário pressionando a tecla F12. Ao dar um clique
na imagem, automaticamente você será levado para a página inicialdefinida na opção Alt.
Figura 12.12.
Validando formulários
Para garantir que os dados digitados pelo usuário são os quevocê realmente definiu, é possível validar seu formulário para queseja feita a verificação das informações e acidentes não aconteçamquando enviarmos dados ao servidor.
Para validar os dados, é importante visualizar o painel de com-portamento Window > Behaviors. Posicione o cursor no contor-no de seu formulário, escolha o sinal de adição e, depois, a opçãoValidate form.
Nesse momento, todos os campos existentes no formulário se-rão listados na janela Validate por meio da opção Named Fields.Selecione um campo da lista e ative a opção
Required (É necessário). Você pode definir qual tipo de dado seráaceito em seu campo com a opção Accept (Aceitar), que permitequalquer tipo de dado (Anything), números (Number), endereço dee-mail (Email address) ou um intervalo de números (Number from),no qual você deve digitar o intervalo inicial e o final.
Faça isso com cada um dos campos existentes, ou seja, cliqueno campo Named Fields, indique se é necessário ou não (Required)e o tipo de dado que deve receber (Accept). Após definir todos oscampos, pressione o botão OK.
Para testar seu formulário, salve a página e pressione a tecla F12
para visualizar no navegador. Preencha o campo de e-mail com valo-res e veja o que acontece.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 108/130
107Criando banners
Criando banners
Um diferencial para qualquer site pode ser a inserção de banners,
anúncios que chamam a atenção dos usuários.
Por padrão, a maioria dos desenvolvedores de páginas insere
banners no topo das páginas. Alguns, porém, adotam a criação de
janelas pop-up, mas, infelizmente, a maior parte dos provedores
consegue bloquear tais janelas. Portanto, a solução para esse pro-
blema pode ser a inserção de um banner que flutue sobre a página.
Veja como criá-lo:
1. Em um documento em branco, siga o menu Insert > Layout
Objects > Layer.
2. Aparecerá uma pequena moldura na tela, indicando que uma
layer foi criada.
3. Nela, insira uma imagem por meio do menu Insert > Image.
4. Nesse caso, o ideal é inserir figuras do tipo JPEG ou GIF. Se prefe-
rir, você pode inserir as animações criadas com o Macromedia Flash:
Figura 13.1.
5. Para criar um efeito de movimento em sua imagem, selecione
a camada.
Tome cuidado para não selecionar apenas a imagem. Para sele-
cionar a camada é necessário dar um clique no canto superior es-
querdo da tela (quadradinho no canto superior esquerdo da layer).
6. Para movimentar a imagem, clique-a com o botão direito do
mouse. Use a opção Record Path.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 109/130
108Treinamento prático em Dreamweaver
7. Será exibida, logo abaixo da barra de propriedades da imagem,
a barra com a linha de tempo, conhecida como timeline, que permite
animar e criar efeitos de movimento em sua imagem:
Figura 13.2.
Caso a barra Timelines não esteja sendo visualizada, você pode
ativá-la com o menu Window > Timelines ou utilizando o atalho Alt
+ F9.
8. Dê um clique na alça da camada (quadradinho no canto supe-
rior-esquerdo) e arraste a imagem pela tela.
9. Automaticamente, o Dreamweaver cria um percurso na tela.
10. O Dreamweaver exibe uma caixa de mensagens informando
quais os atributos da camada que a timeline pode animar. Vai indicar
que os atributos como topo, largura, altura, valor de índice e visibilidade
podem ser animados em uma imagem e que as alterações efetuadas
na largura e na altura da imagem não provocam efeitos no Netscape.
Figura 13.3.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 110/130
109Criando banners
11. Ative a opção AutoPlay existente na barra Timelines para que
a imagem seja executada ao abrir a página.
12. Ao testar a página com a tecla F12 você verá sua imagem sen-
do movimentada pela tela.
Sempre que quiser animar objetos do tipo imagem, você, inicial-
mente, deve inserir uma camada ( layer) e, dentro desta, a imagem;
sem ela, será impossível criar efeitos de movimentação.
Outra forma de animar objetos
1. Crie um documento em branco e salve-o com o nome de
anima.html.
2. Altere as propriedades da página com o menu Modify > Page
Properties.
3. Na opção Background image, escolha uma imagem usando o
botão Browse, que deve servir como fundo de página.
4. Crie uma pequena camada com o menu Insert > LayoutObjects > Layer.
5. Na barra de propriedades, dê um nome a essa camada e defina
as propriedades L (margem esquerda) como 364, T (margem supe-
rior) como 354, W (largura) como 64 e H (altura) como 61.
6. Ative a barra Timelines usando o menu Window > Timelines.
7. Para modificar a timeline da camada selecionada, siga o menu
Modify > Timeline > Add objects to timeline.
8. O Dreamweaver irá apresentar uma caixa de mensagens infor-
mando quais atributos da imagem podem ser alterados.
9. Pressione o botão OK.
10.Automaticamente, o tempo é adicionado à timeline na primei-ra linha.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 111/130
110Treinamento prático em Dreamweaver
11. Ao arrastar o objeto (camada) para a timeline, esse objeto
aparecerá na linha de animação, na qual você pode soltar o mouse.
12. Caso uma nova camada seja inserida, o Dreamweaver coloca-
rá o objeto na linha seguinte ao canal de animação atual.
13. Dê um clique na primeira camada e insira uma imagem. Faça
o mesmo na segunda camada:
Figura 13.4.
14. Para controlar o tempo da imagem, dê um clique na barra
espessa presente na barra Timelines e arraste-a para a direita ou
para a esquerda até definir o tempo em que a imagem deve ser
apresentada.
Elementos da barra Timelines
Cada linha da barra Timelines é conhecida como um canal de ani-
mação, representando todos os elementos existentes em sua página.
Cada linha pode conter somente uma camada e cada timeline
pode receber apenas um nome. O painel Timelines pode controlar a
posição, a dimensão, a visibilidade e a ordem de empilhamento das
camadas de seu documento.
Sempre que um objeto for inserido em uma timeline, a imagemserá posicionada no quadro de número um, ou seja, a camada movi-
menta-se quadro a quadro no tempo definido por você.
A opção Fps indica o número de quadros por segundo que serão
exibidos em sua camada.
Cada quadro define o que deve acontecer com a imagem (cama-
da) na sua página. Um quadro define um ponto na animação, bem
como o seu tamanho e sua posição. Tais efeitos são chamados de
interpolação de valores, ou seja, o Dreamweaver cria valores neces-
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 112/130
111Criando banners
sários para cada quadro existente a fim de produzir o caminho que
a camada deve percorrer. Portanto, uma camada teria, sempre, um
quadro inicial e um quadro final, indicados por círculos abertos no
início e no final da barra de animação.
Ao selecionar a opção Loop no painel Timelines será adiconada aoúltimo quadro da camada uma ação que retorna a reprodução do mo-
vimento ao quadro um, iniciando, novamente, a apresentação do obje-
to como um loop que, ao chegar ao final, retorna ao ponto de início.
Posicionando objetos
Para criar uma animação de determinada imagem, podemos utili-
zar sua barra de propriedades. Veja como fazer:
1. Selecione a camada.
2. Dê um clique na barra Timelines, mais precisamente no quadro
em que deseja criar o movimento.
3. Dessa forma, você indicará o tempo desejado.
4. Na barra de propriedades da imagem, altere as margens do topo(T) e, a partir da esquerda (L), coloque valores diferentes dos iniciais.
5. Se quiser criar um efeito visual diferente, altere também as
propriedades de largura (W) e altura da imagem (H).
6. Salve o arquivo e teste a exibição de movimentação utilizando
a tecla F12 para visualizar seu navegador:
Figura 13.5.
Caso queira inserir alguns caracteres especiais como se fossem
botões, use o menu Insert > HTML > Special Characters:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 113/130
112Treinamento prático em Dreamweaver
Figura 13.6.
Controlando a exibição da imagem
Até agora, todas as imagens inseridas e animadas ficam “passean-
do” pela janela e isso pode ser um pouco desagradável depois de
alguns segundos de exibição. Portanto, é melhor controlar quando
deve ser iniciada e finalizada a exibição da animação. Observe:
1. Selecione a imagem.
2. Isso feito, crie duas áreas nas quais o usuário deve dar um
clique.
3. Na primeira área, o usuário deve ser levado à página informa-
da na opção de link, ao passo que na outra deve fechar a animação,
como se você trabalhasse com um banner.
4. Selecione uma das alternativas de mapeamento da imagem,
usando um dos botões da barra de propriedades (reto, circular ou
desenho livre).
5. Será apresentada uma área sombreada indicando o que está
sendo mapeado, ou seja, o local em que o usuário dará um clique
com o mouse para ativar determinada página (indicada na opçãoSrc).
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 114/130
113Criando banners
6. Na barra Properties, crie um link com a página cardapios.html
(opção Src).
7. Na opção Target, escolha _blank para que o link seja aberto em
uma nova janela (em branco):
Figura 13.7.
8. Pronto, a área foi mapeada. Assim que o usuário posicionar o
mouse na área indicada e der um clique, será levado à página indi-
cada. Portanto, ao mapear a área dentro da imagem, procure não
fazê-lo em um espaço pequeno, pois o usuário pode não saber o que
fazer com a imagem “dançando” pela tela.
Fechando o banner
Para parar a exibição do seu banner, é preciso criar uma nova
área dentro da camada, como se estivesse criando um botão. Obser-
ve as etapas seguintes para conseguir esse efeito:
1. Dê um clique na camada com a imagem.
2. Crie uma nova camada aninhada na camada atual por meio do
menu Insert > Layouts Objects > Layer.
3. Insira uma imagem com o botão Sair nesta camada.
4. Nesse caso, o usuário deve disparar uma ação de fechar o ban-
ner e não ativar uma página qualquer. Para que funcione corretamen-
te, adicione um evento como os utilizados em comportamentos.
5. Selecione a área mapeada com o botão Sair.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 115/130
114Treinamento prático em Dreamweaver
6. Use o menu Window > Behaviors para abrir o painel de com-
portamentos no lado direito de sua tela.
7. Pressione o sinal de adição (+), pois um novo comportamento
deve ser adicionado.
8. Clique na opção Show-Hide Layer.
9. Será apresentada uma caixa de diálogos indicando quais layers
estão ativadas no momento.
10. Caso não tenha fornecido um nome para a primeira camada,
automaticamente ela será nomeada como Layer1.
11. Indique a ação que deseja para essa layer, que, no caso, deve
ser oculta.
12. Pressione o botão OK.
13. Nesse caso, a ação vai ocultar a camada que possui a ima-
gem, fechando a janela atual.
14. Um evento onMouseOver foi criado pelo Dreamweaver in-
dicando que a imagem será fechada quando o usuário “passar” o
mouse sobre o botão Sair.
15. Salve o arquivo e teste a sua página apertando a tecla F12.
Nesse caso, a imagem será fechada quando o usuário passar o
mouse sobre o botão. Porém, a ação que deve ser executada é o de-
saparecimento do banner quando o usuário der-lhe um clique, e nãoapenas “passar” sobre ele com o ponteiro do mouse.
Para corrigir esse ponto, dê um clique na janela Behaviors que
você acabou de criar. No comportamento onMouseOver, clique na
seta voltada para baixo a fim de trocar o comportamento.
Selecionar a opção OnClick fará com que a ação seja alterada
para o clique com o mouse.
Pronto, a partir de agora seu banner se movimenta sobre a tela e
você terá acesso às ações com um clique sobre a imagem. Ao clicar
sobre o botão Sair, o usuário fechará o banner.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 116/130
115Editando códigos HTML
Editando códigos HTML
Até agora, criamos todo o design da página sem nos preocupar-mos com os códigos gerados pelo Dreamweaver. Muitas vezes, épreciso acessar o código HTML subjacente à página, o que propor-ciona maior controle das alterações e, também, uma tentativa maisefetiva quanto às soluções de alguns problemas da página.
Suponha que você tenha alterado a fonte de um determinadotexto, mas parte dele apresenta-se com a fonte não alterada. Pararesolver esse problema, é importante editar o código HTML e moversuas tags de forma que o texto permaneça dentro das tags de fonte.Observe:
<font><b> texto </b></font> selecionado
Nesse caso, indicamos que somente a palavra texto apareceráem negrito, pois as tags /b e /font fecham a execução dos caracte-res nesse estilo.
O Dreamweaver permite a visualização de códigos quando utiliza-mos o botão Code, da janela de documento:
Figura 14.1.
O código HTML e a janela de design são visualizadas simultanea-mente. Dessa forma, ao mover qualquer elemento da página, vocêobservará o que ocorre na janela de códigos, tornando-se fácil per-ceber as tags básicas, como por exemplo:
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 117/130
116Treinamento prático em Dreamweaver
Tag inicial
<p align= >
<font color = “#FF9900”
<i>
<img src=”fi le:///C|/San-
dra/Desktop/LogosCinza.
GIF”width=”209”height=
”114”alt=”dolma”></body>
Tag final
</p>
</font>
</i>
</body>
Descrição
Faz o alinhamento do texto exis-tente dentro das tags.Altera a cor da fonte do textoexistente dentro da tags.Aplica itálico nos caracteres dastags.Insere a imagem LogosCinza.
gif, da pasta C:\Sandra, comlargura de 209 pixels e altura de114 pixels, e apresenta o texto
alternativo (alt) como dolma.
Tabela 14.1.
Ao longo do desenvolvimento de seu site, você perceberá as inú-meras tags existentes. Não se preocupe em decorá-las ou criar umalista de tais elementos.
Adicionar comentários em seu código
Imagine que você resolveu passar a administração de sua pági-na para outro desenvolvedor, sendo que este não conseguiu perce-ber quais problemas devem ser solucionados ou melhorados, con-siderando mais fácil reiniciar o desenvolvimento da página do queconsertá-la. Para prevenir esse tipo de situação, é possível inserircomentários, textos descritivos para transmitir a terceiros as infor-mações necessárias, tais como a mudança de determinada imagem,do endereço, e outros dados importantes. Observe:
1. Para inserir comentários, posicione o cursor no local que de-seja comentar.
2. Você poderá estar na visualização no modo Design ou no modoCode.
3. Pressione o botão Comment existente na barra Insert.
4. Digite o comentário necessário.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 118/130
117Editando códigos HTML
Figura 14.2.
Para exibir os marcadores de comentários, siga o menu View >Visual Aids > Invisible Elements.
Inserindo palavras–chave
Outro recurso interessante é inserir palavras-chave que facilitema pesquisa em sites de localização, como o Google por exemplo.Para tanto, faça o seguinte:
1. Ative a barra de inserção HTML:
Figura 14.3.
2. Clique no botão Head.
3. Selecione a opção Keywords.
4. Digite todas as palavras-chave necessárias.
5. Pressione o botão OK.
Figura 14.4.
Inserindo descrições
Podemos entrar com uma definição para a página por meio dobotão Description, presente na barra de inserção HTML. Digite a
descrição de seu site e pressione o botão OK.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 119/130
118Treinamento prático em Dreamweaver
Figura 14.5.
Ajustando o posicionamento da janela
Com o código em HTML, você pode controlar o posicionamentodas janelas de seu site. Veja como fazer:
1. Visualize o documento.
2. Posicione o cursor sobre o link criado, ou seja, um texto quevocê digitou e no qual inseriu um link.
3. Veja a janela de códigos:
Figura 14.6.
4. Nela, Você encontrará o código:
<a href=”#” onClick=”MM _ openBrWindow(‘aulas.html’,
’defi nition’,
‘scrollbars=yes,width=300,height=100’)”>legumes
</a>.</font></p>
5. Logo após o parâmetro height (altura), digite uma vírgula,pois você acrescentará um parâmetro e, depois, o seguinte código:
screenX=0, screenY=0, top=0, left=0
Os parâmetros screenX e screenY são utilizados pelo Netscapee navegadores posteriores, posicionando a janela na parte superioresquerda da tela. Por outro lado, os parâmetros top e left são para
o navegador Internet Explorer, fazendo o mesmo que os parâmetros
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 120/130
119Editando códigos HTML
screenX e screenY. Nesse caso, qualquer um dos navegadores uti-lizados pelo visitante posicionará a janela no canto superior esquer-do da tela.
Para perceber a diferença, teste sua página no navegador e, a
seguir, altere os parâmetros para 400 para ver a diferença de posi-cionamento da janela.
Seletores de tag
O seletor de tags permite que você acesse mais facilmente a hie-rarquia de tags HTML, podendo ser útil para selecionar um item de
forma mais rápida.Uma tag difícil de controlar é a de tabelas aninhadas, pois, muitas
vezes, selecionamos determinada tabela quando na verdade outraaninhada é que acaba sendo selecionada. Veja como utilizar o sele-tor de tags:
1. Veja o código HTML de sua página pressionando o botão Code.
2. Na barra de tags, você verá as tags criadas para o ponto emque seu cursor está dentro do código.
3. Dê um clique com o botão direito sobre a tag <meta> ou<head>.
4. Ative a opção Edit Tag:
Figura 14.7.
5. Rapidamente, o Dreamweaver vai exibir a tag selcionada emuma janela à parte, permitindo alterações:
Figura 14.8.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 121/130
120Treinamento prático em Dreamweaver
Tags rápidas
Tags rápidas nos auxiliam a inserir tags HTML com maior rapidez.Isso é bastante útil quando, por algum motivo, você conhece muito
bem os códigos HTML e resolve escrevê-los manualmente.Vejamos como inserir tags rápidas:
1. Posicione o cursor no ponto de inserção entre uma imagem eum texto.
2. Dê um clique no botão direito e use a opção Insert Tag. Seráaberta a seguinte janela:
Figura 14.9.
3. Escolha a opção HTML.
4. Escolha a tag que pretende inserir.
5. Pressione o botão Insert. Serão solicitadas algumas proprieda-des para inserir a tag.
6. Defina as propriedades e pressione OK.
Limpando tags vazias
Muitas vezes, criamos tags que contêm problemas, como redun-dância e o fato de serem vazias. O Dreamweaver pode limpar essas
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 122/130
121Editando códigos HTML
tags para você, sendo altamente recomendável que, após a criaçãode seu site, seja executado esse comando a fim de não causar trans-tornos e lentidão em seu carregamento.
Para eliminar essas tags, siga o menu Commands > Clean Up
HTML. Aparecerá a seguinte caixa de diálogos:
Figura 14.10.
A partir de dois pontos de opções (Remove e Options), vejamosas características dessa caixa:
Opção
Empty container tags
Redundant nested tags
Non-DreamweaverHTML comments
Dreamweaver specialmarkup
Specific tag(s)
Descrição
Para remover tags vazias, como por exemplo tags
apresentadas como <b> </b>, não possuindoqualquer texto a deixar em negrito.Para remover tags redundantes. É útil quando setem um conjunto duplicado de tags dentro de ou-tro que produz o mesmo resultado, conhecidascomo tags duplicadas, como por exemplo <b>
<b> texto negrito </b> </b>.Para remover comentários em HTML que não
pertencem ao Dreamweaver. Faz com que todosos comentários inseridos pelo Dreamweaver se- jam removidos.O Dreamweaver cria várias tags que não estão nopadrão do HTML, como <mm:libitem>, que indi-ca um item de biblioteca. Apenas o Dreamweaverreconhece essa marcação, os navegadores irãoignorá-la.Para remover tags específicas. Permite instruir o
Dreamweaver para que remova as tags digitadasna caixa de texto.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 123/130
122Treinamento prático em Dreamweaver
Opção
Combine nested <font>Tags when possible
Show log oncompletion
Descrição
Opção útil para combinar tags de <font> quando formatamos um texto com tags que podem ser
aninhadas.Opção útil para mostar o registro no sistema.Permite identificar os itens que o Dreamweavereliminou.
Tabela 14.2.
Se precissar, você pode importar todos os seus códigos para oMicrosoft Word. Basta utilizar o menu File > Import > Word Docu-
ment ou outro recurso que achar mais conveniente.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 124/130
123Publicando seu site
Publicando seu site
Após testar todo o seu site para verificar possíveis erros em di-
ferentes navegadores, está na hora de colocá-lo no ar, ou seja, pu-
blicá-lo.
Para isso, é importante que você obedeça aos seguintes proce-
dimentos:
• Verifique o desempenho de cada página do site para ver se os
links e botões funcionam de forma correta;
• Visualize todas as páginas em vários tipos de navegadores e
plataformas diferentes, verificando todas as fontes e cores utilizadas
pela página;
• Verifique todos os links rompidos, ajustando-os;• Controle o tempo de download de todas as páginas e imagens
do site;
• Faça o maior número possível de relatórios.
Download de arquivos
Caso esteja trabalhando em um ambiente multi-usuários, utilize
os métodos de devoluções e retiradas para a transferência de arqui-
vos. Em sites remotos, é possível utilizar as opções Get Files e PutFiles para transferir arquivos.
O primeiro passo é contatar o provedor que vai hospedar o seu
site e verificar como é feito o gerenciamento. Normalmente, eles dis-
ponibilizarão login e senha para que você transfira e gerencie infor-
mações rapidamente.
Após contatar o provedor, faça o download e o upload de todos
os arquivos utilizados em suas páginas. Por isso, foi fundamental, no
ponto de partida, a criação de todas as páginas, imagens e botões
exatamente na mesma página, o que evita erros na hora de efetuar a
transferência de informações.
Para fazer o download de arquivos em servidores remotos, pro-
ceda da seguinte forma:
1. Use o painel de arquivos.
2. Selecione a opção Manage Sites.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 125/130
124Treinamento prático em Dreamweaver
Figura 15.1.
3. Na caixa Manage Sites, selecione o item desejado (O Chef em
casa).
4. Pressione o botão Edit.
5. Verifique as configurações do site remoto:
Figura 15.2.
6. Dê um clique na guia Advanced.
7. Ative a opçãoRemote Info
, que apresenta as informações dosite remoto.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 126/130
125Publicando seu site
Figura 15.3.
8. Informe o método de acesso, como, por exemplo, FTP.
9. Entre com as informações necessárias e presisone OK.
10. Clique no botão Done para fechar a janela de gerenciamento
de seu site.
11. No painel Files, utilize o botão Connects to remote host (Figu-
ra 15.4), para que seja aberta uma conexão com o servidor remoto.
Figura 15.4.
12. Se, anteriormente, uma conexão foi feita, o botão irá indicar
Disconnect from remote host. Ignore essa etapa.
13. Caso os arquivos remotos estejam visíveis no painel remoto,
ignore o botão Connect e pressione o botão Get Files.
14. Selecione os arquivos do download.
15. Pressione o botão Get Files (Figura 15.5).
Figura 15.5.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 127/130
126Treinamento prático em Dreamweaver
16. Para eftuar o download dos arquivos da página, clique no
botão Sim. Agora, se pretende ignorar esses arquivos, pressione o
botão Não.
17. Para evitar essa caixa de diálogos no próximo download, ativea opção Don´t show me this message again.
Efetuando o upload de arquivosem servidores remotos
Os comandos Put Files copiam os arquivos do site local para o
site remoto, sem alterar seus status de retirada. Esse processo é
conhecido como upload. Observe:
1. Selecione o arquivo com a primeira página.
2. No painel File, dê um clique no botão Connects to remote host.
3. Será aberta uma conexão com o servidor remoto.
4. Pressione o botão Put Files (Figura 15.6).
Figura 15.6.
5. Para arquivos dependentes, clique em Sim e será feito o upload.
Clique em Cancel, na caixa de diálogos Status, para interromper
a transferência de arquivos.
Sincronizando arquivos nos sites local e remoto
Após criar todos os arquivos (páginas) nos sites local e remoto, é
possível sincronizá-los. No caso do site remoto ser um servidor FTP,
a sincronização utilizará o FTP.
1. Para sincronizar arquivos ou pastas específicas no lugar de sin-
cronizar todo o site, selecione os arquivos ou as pastas desejadas no
painel Files.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 128/130
127Publicando seu site
2. Dê um clique com o botão direito do mouse em um dos ar-
quivos.
3. Clique na opção Synchronize.
4. Você verá a caixa de diálogos Synchronize Files:
Opção
Put newer files to remote
Get newer files from remote
Get and Put newer files
Descrição
Carrega todos os arquivos locais que tenham
datas de modificação mais recentes do que
os seus correspondentes remotos.
Efetua o download de todos os arquivos remo-
tos com datas de modificação mais recentes
do que as de seus correspondentes locais.
Coloca as versões mais recentes de todos os
arquivos nos sites remoto e local.
Tabela 15.1.
Figura 15.7.
5. Selecione a opção para o site inteiro.
6. Nesse caso, todo o site será sincronizado.
7. Se quiser sincronizar apenas os arquivos selecionados, use a
opção Selected Local Files Only.
8. Na opção Direction, defina uma direção para a cópia dos arqui-vos. (veja a Tabela 15.1).
9. Pressione Preview para visualizar a sincronização.
Veja, a seguir, as possíveis direções para as cópias dos arquivos.
5/10/2018 Treinamento Prático em Dream Waver - slidepdf.com
http://slidepdf.com/reader/full/treinamento-pratico-em-dream-waver 129/130
128Treinamento prático em Dreamweaver
Registrando todas as transferências
O Dreamweaver nos permite registrar todas as atividades de
transferência de arquivos com FTP. Caso ocorra um erro durante a
transferência de arquivos, o registro (FTP Log) do site irá auxiliá-lo afim de determinar qual foi o problema.
Para exibir o registro, use o painel Results por meio do menu
Window > Results ou da tecla F7 e ative a opção FTP Log:
Figura 15.8.