Você está na página 1de 15

O código é o motor subjacente de qualquer

página Web. E muitos designers visuais,


assim como muitos motoristas, preferem
deixar o motor para os mecânicos e guiar
a maior parte do tempo na visualização
Design. Entretanto você descobrirá que,
para obter o melhor desempenho da sua
página Web, precisará “levantar o capô”
de vez em quando e trabalhar diretamente
no código. A familiaridade com o código
não oferece apenas um amplo espectro de
possibilidades: você também entenderá
melhor a potência do seu motor Web.
14 Trabalhando com Código

Nesta lição, você aprenderá a trabalhar com o código de uma página Web
e aprenderá a:
• Selecionar código
• Recolher seções do código
• Adicionar novo código
• Comentar o código
Esta lição levará aproximadamente 60 minutos para ser completada. Certi-
fique-se de você copiou Lessons/Lesson14 do CD do Adobe Dreamweaver
CS3, Classroom in a Book para a unidade de disco antes de iniciar. Ao tra-
balhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário
restaurar os arquivos iniciais, copie-os novamente do CD.

Selecione o código
Antes de poder mover, copiar, excluir, ou seja, manipular qualquer bloco
de código, você precisará certificar-se de que o selecionou corretamente.
Um erro ao selecionar e recortar um tag, por exemplo, poderia deixar ca-
racteres estranhos que impediriam que a página fosse exibida corretamen-
te no navegador. Neste exercício, você irá explorar os vários métodos para
selecionar código na visualização Code do Dreamweaver.
1 Inicie o Dreamweaver.
2 Se necessário, pressione F8 para abrir o painel Files e escolha DW CIB
na lista de sites.
4 ADOBE DREAMWEAVER CS3
Classroom in a Book

3 No painel Files, expanda a pasta lesson14 e dê um clique duplo no arquivo code_start.


htm para abri-lo.

4 Coloque o cursor no parágrafo embaixo da figura CarryAll Inc..


5 Clique Code ( ), o primeiro botão da esquerda na barra de ferramentas Document, para
alternar para a visualização Code.
6 A partir do botão de menu View options ( ) na barra de ferramentas Document, certifi-
que-se de que a opção Word Wrap (quebra de linha) está ativada.

Com a opção Word Wrap ativada, você será capaz de ver todo o código, independentemen-
te do tamanho da sua janela de documento.
LIÇÃO 14 5
Trabalhando com Código

7 Dê um clique triplo no código para selecionar o tag <p> inteiro. Clique em qualquer lu-
gar para desmarcar a seleção. Mova o cursor para a coluna Code number e clique uma vez
no número de linha de código, 102, para selecionar novamente o tag <p>; clique em qual-
quer lugar para limpar a seleção. Arraste o cursor da linha 100 a 103 para selecionar uma
série de tags.

O método do clique triplo é perfeito para selecionar uma linha de código individual; o
clicar e arrastar a coluna de número da linha funciona bem para selecionar múltiplos tags.
Como a HTML é uma linguagem baseada em tags e hierárquica, o Dreamweaver fornece
uma ferramenta para selecionar rapidamente o tag pai, Select Parent Tag.
8 Clique em qualquer lugar no bloco de código que inicia na linha 102. Na barra de fer-
ramentas Coding vertical, localizada no lado esquerdo da janela de documento, clique em
Select Parent Tag ( ), o quinto ícone a partir de cima.
Você notará que o tag <p> inteiro é instantaneamente selecionado. Como o cursor estava
dentro um único tag <p>, o Dreamweaver o identifica como o pai.
9 Clique em Select Parent Tag novamente. Observe que o tag <div id="company"> que
envolve o parágrafo (e todo o código dentro do tag) é destacado.
6 ADOBE DREAMWEAVER CS3
Classroom in a Book

Durante este passo, o tag contendo o <p> previamente selecionado – o tag <div
id="company"> – é selecionado. Hierarquicamente falando, esse tag <div> é o pai do tag
<p> e de todos os outros tags contidos dentro do primeiro.
Embora você possa copiar ou colar qualquer seleção, vamos deixar essa operação para o
próximo exercício em que você aprenderá a recolher código.

Recolha o código
Ao fazer a depuração do código de uma página HTML, a quantidade de código em si pode
ser um obstáculo. O Dreamweaver fornece uma função útil para ocultar temporariamente
uma área selecionada do código recolhendo a seleção. Como você verá nesse exercício, par-
tes de código recolhidas são fáceis de mover e gerenciar.
1 Se necessário, reabra o arquivo code_start.htm do exercício anterior dando um clique
duplo em sua entrada no painel Files.
2 Se necessário, clique em Code, na barra de ferramentas Document, para entrar na visua-
lização Code.
3 Arraste o mouse para selecionar qualquer intervalo de código se distribuindo por um ou
mais tags.

Note os dois botões cinza que aparecem entre o lado esquerdo do código e os números de
linha. Esses botões são chamados de alças de código e controlam o recurso de recolhimento
de código.
LIÇÃO 14 7
Trabalhando com Código

4 Clique na alça de cima para recolher o código selecionado. Observe que a seleção é subs-
tituída por uma área cinza dos primeiros sete caracteres e reticências; além disso, as duas
alças se fundem em uma. Mova o cursor sobre a área cinza para ver as primeiras 10 linhas
da seção recolhidas em uma dica de ferramenta.

5 Clique uma vez na alça de código para expandir a seção recolhida. Clique em qualquer
lugar no código para remover a seleção.
Embora possa recolher qualquer seleção de código, na maior parte do tempo você precisará
recolher um bloco completo de código como um tag <div>. A barra de ferramentas Coding
fornece uma ferramenta para fazer exatamente isso.
6 Coloque o cursor diretamente depois da primeira ocorrência do código <div
class="company">, acima do código <h2>CarryAll Inc.</h2>, e clique Collapse
Full Tag ( ), o segundo ícone a partir do alto da barra de ferramentas Coding.

Como o nome já evidencia, Collapse Full Tag combina a ação do Select Parent Tag com o
clicar em uma alça de código para selecionar simultaneamente o tag inteiro e o recolher.
Essa ferramenta é muito útil ao trabalhar com blocos e seus conteúdos, como a série de
tags <div> com a classe de CSS .company. Vamos recolher rapidamente todos eles e os
reorganizar.
8 ADOBE DREAMWEAVER CS3
Classroom in a Book

7 Coloque o cursor diretamente depois da segunda ocorrência do código <div


class="company">, acima do código <h2>Anon de empresa</h2> e clique em
Collapse Full Tag. Repita essa ação para a terceira e última ocorrência do código <div
class="company">.

Agora que os três tags <div> estão recolhidos, você pode movê-los rapidamente de um
lugar para outro.
8 Selecione a primeira seção recolhida clicando no número de linha 99. Pressione Ctrl+X
(Windows) ou Cmd+X (MacOS) para recortar a seleção. Mova o cursor para frente do últi-
mo bloco de código recolhido e pressione Ctrl+V (Windows) ou Cmd+V (MacOS).
Embora você pudesse expandir o bloco de código recolhido para revisar o resultado, há
uma abordagem melhor e mais visual que você pode adotar.
9 Clique em Design ( ) na barra de ferramentas Document para retornar para a visuali-
zação Design. Observe que a ordem de empresas foi reorganizada e agora Company Anon
aparece em primeiro lugar. Clique em Code para retornar para a visualização Code; observe
que as seções de código ainda estão recolhidas.

É importante saber que o código recolhido permanece nesse estado até que seja expandido. Se
várias seções estiverem recolhidas, você pode expandi-las uma de cada vez clicando na alça
de código apropriada – ou pode expandir todas de uma vez com a ferramenta Expand All.
LIÇÃO 14 9
Trabalhando com Código

Se salvar uma página com código recolhido nela, as seções recolhidas ainda permanecerão
recolhidas quando o arquivo for reaberto.

10 Na barra de ferramentas Coding, clique em Expand All ( ), o quarto ícone a partir do


alto. Observe que todas as seções previamente recolhidas foram expandidas.
11 Escolha File > Save.
No próximo exercício, você aprenderá sobre as ferramentas e os mecanismos que o Drea-
mweaver oferece para ajudá-lo a codificar manualmente mais rápido.

Adicione um novo código


Embora todos os exercícios do livro tenham sido conduzidos quase que exclusivamente na
visualização Design, é importante que você entenda como trabalhar na visualização Code
também. Cedo ou tarde, você precisará ajustar seu código para obter um efeito desejado – e
pode-se fazer isso somente na visualização Code.
Neste exercício, você aprenderá a adicionar novos tags em torno de um código existente e a
inserir novo código manualmente.
1 Se necessário, reabra o arquivo code_start.htm do exercício anterior dando um clique
duplo em sua entrada no painel Files.
2 Se necessário, clique em Code na barra de ferramentas Document para entrar na visuali-
zação Code.
3 Role para a parte inferior da página e posicione o cursor antes do código <p>© 2007
dev / design LLC.</p>.

O objetivo deste exercício é adicionar outro elemento ao rodapé que será alinhado à esquer-
da, assim como o elemento atual está alinhado à direita. Para realizar isso, você precisará
envolver o tag existente em um novo tag <div>.
10 ADOBE DREAMWEAVER CS3
Classroom in a Book

4 Insira o caractere do tag de abertura em HTML, o sinal de menor, <, e faça uma pausa.
Observe que o Dreamweaver abre uma lista de todos os tags disponíveis; este é o recurso
dicas de código. Digite o primeiro caractere no tag desejado, d, e faça uma pausa. Observe
que a lista de dicas de código rola para o primeiro tag que inicia com a letra d. Digite o pró-
ximo caractere, i, e faça uma pausa. A lista de dicas de código agora está destacando o tag
desejado, div; pressione Enter (Windows) ou Return (MacOS) para aceitar essa seleção.

As dicas de código são ótimas tanto para acelerar a codificação manual como para garantir
exatidão. Como você verá a seguir, as dicas de código também estão disponíveis para atri-
butos de tag, além dos próprios tags.
5 Pressione a barra de espaço. Se as dicas de código não aparecerem, pressione
Ctrl+Espaço (Windows) ou Cmd+Espaço (MacOS). Digite a primeira letra no atributo de-
sejado, i; Observe que o atributo de id é destacado e pressione Enter (Windows) ou Return
(MacOS) para aceitar essa seleção. Observe que o Dreamweaver não insere apenas o atri-
buto, mas também os elementos necessários para o valor, um sinal de igual e duas aspas.
Digite a primeira letra do valor desejado, r. O valor rightColumn é destacado; pressione
a tecla de seta para baixo uma vez para rightFooter e pressione Enter (Windows) ou Re-
turn (MacOS) para aceitar essa seleção. Digite o caractere do tag de fechamento, o sinal de
maior, >, para completar o tag.
LIÇÃO 14 11
Trabalhando com Código

O Dreamweaver não apenas apresenta tags e atributos válidos na lista de dicas de código,
como também exibe IDs e classes de CSS disponíveis quando apropriado. Isso é particular-
mente importante porque a CSS faz distinção entre maiúsculas e minúsculas e, assim, você
evita inserir a ortografia errada ou a caixa errada para um nome de seletor de CSS. Agora,
vamos adicionar o tag de fechamento e aprender outra capacidade do Dreamweaver.
6 Posicione o cursor no final do código <p>© 2007 dev / design LLC.</p> e digite
os primeiros dois caracteres no tag de fechamento, </, e faça uma pausa. Observe que o
Dreamweaver completa o tag com os caracteres restantes, div>. Pressione Enter (Windows)
ou Return (MacOS) para aceitar essa adição.

Na visualização Code, o Dreamweaver fornece completamento de código que, como você


acaba de ver, monitora e fornece o que o tag necessita para ser fechado. Agora, vamos prati-
car utilizando ambos os recursos de codificação.
7 Coloque o cursor na frente do código <div id="rightFooter"> e digite o seguinte
código, tirando proveito das dicas de código e completamento de código:
<div id="leftFooter">
<p>All rights reserved</p>
</div>
12 ADOBE DREAMWEAVER CS3
Classroom in a Book

8 Clique em Design para alternar para a visualização Design.

Nota: As regras predefinidas de CSS, leftFooter e rightFooter, utilizam a propriedade float


para alcançar o efeito de exibir dois parágrafos na mesma linha.
9 Escolha File > Save.
No próximo exercício, você aprenderá a adicionar comentários de HTML ao seu código.

Comente seu código


Um comentário de HTML permite inserir notas, atributos e outros conteúdos em uma
página Web que são invisíveis para o navegador, mas são embutidos no código-fonte. Você
poderia, por exemplo, querer indicar quando a página foi atualizada pela última vez. Os
comentários de HTML também podem ser utilizados para ocultar qualquer conteúdo que,
de outro modo, seria visível. Nos exercícios a seguir, você terá uma oportunidade de colocar
para funcionar os usos do recurso de comentários de HTML.
1 Se necessário, reabra o arquivo code_start.htm do exercício anterior dando um clique du-
plo em sua entrada no painel Files.
2 Se necessário, clique em Code na barra de ferramentas Document para entrar na visuali-
zação Code.
3 Role até o topo da página e posicione o cursor depois do tag <head>. Pressione Enter
(Windows) ou Return (MacOS) para criar uma nova linha.
LIÇÃO 14 13
Trabalhando com Código

4 Na barra de ferramentas Coding, clique no botão de menu Apply Comment ( ), o oitavo


ícone da parte inferior e escolha HTML Comment na lista.

Há cinco tipos de comentários diferentes disponíveis:


• Apply HTML comment – Insere um comentário padrão de HTML que inicia com <!-- e
termina com -->.
• Apply /* */ Comment – Utilizado para inserir comentários de múltiplas linhas em código
JavaScript ou CSS.
• Apply // Comment – Utilizado para inserir comentários de uma única linha em JavaScript.
• Apply ' Comment – Utilizado para inserir comentários de uma única linha em VBScript.
• Apply Server Comment – Ativado em páginas com código do lado do servidor, insere o
comentário apropriado para o modelo atual de servidor.
5 Com o cursor dentro do comentário de HTML, digite o seguinte texto: Last modified on
e então digite a data de hoje.

Agora você tem a data de última modificação embutida no código, mas invisível para o vi-
sitante casual da página. Em seguida, vamos utilizar um comentário de HTML para ocultar
temporariamente uma parte da página.

Nota: Lembre-se de que qualquer comentário HTML inserido em documento é acessível para
qualquer pessoa pela opção View Source de navegador.
14 ADOBE DREAMWEAVER CS3
Classroom in a Book

6 Clique em Design para retornar à visualização Design e selecione a imagem embaixo do


título CarryAll Inc. No Tag Selector, escolha <div.company>.

Costuma ser uma boa idéia alternar entre as visualizações Design e Code. Freqüentemente,
é mais fácil fazer uma seleção na visualização Design – especialmente em conjunção com o
Tag Selector – e então alternar para Code a fim de completar a operação.
7 Na barra de ferramentas Coding, clique no botão de menu Apply Comment e escolha
Apply HTML Comment na lista.

Observe que o código previamente selecionado agora está cercado por um comentário de
HTML. Vamos examinar o efeito que isso tem na visualização Design.
LIÇÃO 14 15
Trabalhando com Código

8 Clique em Design. Observe que a seção inteira de CarryAll desapareceu e há somente


duas empresas atualmente exibidas na página Web.

Como o navegador ignora qualquer código dentro de um tag de comentário de HTML, a


seção inteira não é exibida. Agora, vamos trazê-la de volta.
9 Clique em Code. Com o bloco de código comentado ainda selecionado, escolha Remove
Comment ( ), o ícone diretamente abaixo do botão de menu Apply Comment.
10 Clique em Design; observe que a seção agora voltou. Escolha File > Save.
Parabéns, você completou esta lição!
Revisão
䉴 Perguntas
1 Como alternar entre as visualizações Code e Design?
2 Em que a barra de ferramentas Coding é diferente de outras barras de ferramen-
tas do Dreamweaver?
3 Qual é maneira mais rápida de selecionar o tag pai que inclui um bloco de texto?
4 O que acontece quando você clica em Select Parent Tag uma segunda vez?
5 Verdadeiro ou Falso: Depois de recolher um código, você nunca mais pode
recuperá-lo.
6 Identifique dois usos para um comentário de HTML.

䉴 Respostas
1 Clique nos botões Code e Design na barra de ferramentas Document.
2 A barra de ferramentas Coding somente é visível na visualização Code e é verti-
cal em vez de horizontal.
3 Coloque o cursor no bloco de texto e escolha Select Parent Tag na barra de ferra-
mentas Coding.
4 Sempre que se clica em Select Parent Tag, todo o código dentro do tag pai, in-
cluindo este, é selecionado.
5 Falso. Pairar o cursor sobre um bloco de código recolhido exibe o código, clicar
uma vez na alça de código expande-o.
6 Um comentário de HTML pode ser utilizado para inserir comentários no códi-
go-fonte que não são exibidos no navegador ou ele pode ser utilizado para impedir
que qualquer código seja exibido.