“exatamente aqui”. Tire proveito das bem
projetadas starter pages do Dreamweaver
para criar rapidamente um layout baseado
em padrões, pronto para seu conteúdo
personalizado. Ao longo do caminho, você
irá explorar as maneiras de trabalhar com
o Dreamweaver e criar uma página Web de
qualidade profissional.
Dreamweaver CS3
Nesta lição, veremos uma introdução ao Dreamweaver CS3 criando uma página Web de exemplo e entendendo como fazer o seguinte:
Criar uma nova starter page
•
Salvar o documento
•
Modificar o título de uma página
•
Alterar os títulos do texto
•
Inserir texto a partir de um documento externo
•
Adicionar imagens de primeiro plano e de fundo
•
Criar links para outras páginas no site
•
Selecionar e modificar estilos CSS
•
Visualizar sua página em um navegador
•
Esta lição levará aproximadamente 90 minutos para ser concluída. Cer-tifique-se de que você copiou a pasta Lessons/Lesson01 do CD do Adobe
Dreamweaver CS3, Classroom in a Book para a unidade de disco antes de
começar. Ao trabalhar nesta lição, você sobrescreverá os arquivos iniciais. Se for necessário restaurar os arquivos iniciais, copie-os novamente do CD.
Escolha um ponto de partida CSS
O Adobe Dreamweaver CS3 oferece 32 diferentes arquivos de ponto de partida, todos com diferentes layouts. Nesta lição, você criará o ponto de partida que será modificado por toda a lição.
1 Inicie o Adobe Dreamweaver CS3. 2 Escolha File > New.
3 Na caixa de diálogo New Document, selecione, se necessário, a categoria Blank Page na primeira coluna.
4 Na coluna Page Type, selecione HTML.
O Dreamweaver permite que você crie vários tipos de páginas; HTML é o tipo comumente utilizado para criar páginas Web padrão.
5 Na coluna Layout, selecione 2 column fixed, left sidebar, header and footer e o 12º layout de exemplo na lista. A visualização para esse layout utiliza um símbolo de cadeado para in-dicar que a largura está configurada; outros layouts permitem que a largura seja expandida ou reduzida de acordo com a janela do navegador.
6 Deixe todas as outras opções nas suas configurações padrão e clique em Create.
Sua nova página aparecerá na janela de documentos. Se necessário, clique em Design a fim de mudar para a visualização Design em vez da visualização Code ou Split.
Salve a página
Depois de criar sua página, uma boa idéia é salvá-la imediatamente.
1 Escolha File > Save. Um método alternativo é pressionar Ctrl+S (Windows) ou Cmd+S (MacOS).
2 Quando a caixa de diálogo Save As aparecer, navegue até a pasta Lesson01 e abra-a. No campo de nome File, insira index.htm. Clique em Save.
Modifique o título da página
O título de página em uma página Web é exibido na barra de título do navegador. Títulos de página são um dos elementos fundamentais utilizados por sistemas de pesquisa, como o Google, para indexar sites da Web. É importante sempre modificar o título de página pa-drão do Dreamweaver, Untitled Document, para uma frase descritiva.
1 No campo Title da barra de ferramentas Document, selecione o espaço reservado para texto, Untitled Document, e pressione Delete.
2 Insira Vacation Palace e pressione Enter (Windows) ou Return (MacOS).
Altere títulos
Os títulos do espaço reservado são facilmente modificados no Dreamweaver: por padrão, o Dreamweaver está no modo de edição de texto.
1 Dê um clique duplo no texto do espaço reservado Header e insira esta frase: your vaca-tion wonderland awaits… . o Dreamweaver fornece diferentes maneiras de selecionar texto semelhantes àquelas dos softwares de processamento de texto, como por exemplo, dar um clique duplo em uma palavra apenas.
2 Posicione o cursor no início do espaço reservado de texto Main Content e arraste-o ao longo da frase. Com o texto selecionado, insira a frase a seguir: Where you are royal-ty. Utilize o método de clicar e arrastar para selecionar uma parte qualquer do texto no Dreamweaver.
3 Escolha File > Save.
Insira texto
O texto do parágrafo é tão fácil de atualizar quanto o texto do título. Além de inserir texto manualmente, o Dreamweaver fornece um poderoso mecanismo de colar texto copiado a partir de outras fontes, como produtos do Microsoft Office, mantendo a formatação con-forme desejado.
1 Posicione o cursor na frente do título de nível H2 do espaço reservado e arraste-o até o final do parágrafo seguinte para que tanto o título como o parágrafo sejam selecionados. Pressione Delete (Windows) ou Forward Delete (MacOS) para remover a seleção.
2 Com o Explorer (Windows) ou o Finder (MacOS), navegue até os arquivos do CD copia-dos para seu sistema e abra lesson01 > vacation.rtf.
3 Quando o arquivo abrir, selecione todo o texto e pressione Ctrl+C (Windows) ou Cmd+C (MacOS) para copiá-lo para a área de transferência.
4 No Dreamweaver, dê um clique triplo no parágrafo do espaço reservado abaixo do cabe-çalho, Where you’re royalty, e pressione Ctrl+V (Windows) ou Cmd+V (MacOS) para colar o texto a partir da área de transferência.
Adicione novas imagens
Inserir imagens e elementos gráficos no Dreamweaver é muito simples e direto. Na página, as propriedades da imagem, como o alinhamento, podem ser ajustadas por meio do inspe-tor de Propriedades.
1 Selecione todo o conteúdo no quadro, incluindo o espaço reservado para o cabeçalho Sidebar1 e os dois parágrafos subseqüentes. Pressione Delete (Windows) ou forward delete (MacOS) para remover o texto do espaço reservado.
2 Na Tag Selector, localizada na parte inferior da janela de documentos, selecione <h3> e pressione Delete (Windows) ou forward delete (MacOS) para remover a tag HTML restante. 3 Na categoria Common da barra Insert, clique no botão de menu Images e escolha Image na lista.
4 Na caixa de diálogo Select Image Source, navegue até os arquivos do CD copiados para seu sistema e selecione lesson01 > images > beach_birds_view.jpg. Clique em OK para con-firmar sua escolha.
5 Posicione o cursor no início da segunda frase no parágrafo do conteúdo principal que inicia com a frase “Stroll our …” e clique em Images na barra Insert.
6 Na caixa de diálogo Select Image Source, selecione full_beach.jpg e clique em OK. 7 Se o inspetor de propriedades não estiver visível, escolha Window > Properties. 8 Com a imagem recém-inserida selecionada, escolha a lista de opção Right na proprie-dade Align no inspetor de proprieproprie-dades. O texto flui em torno das imagens alinhadas à esquerda ou à direita.
Crie links para outras páginas
Hyperlinks, mais comumente conhecidos como links, são aquilo que torna a Web uma mí-dia única. O Dreamweaver facilita a criação de um link.
1 Na parte inferior da página, selecione o texto do espaço reservado para rodapé (Footer) e o substitua pela frase Information – Contact Us.
2 Dê um clique duplo na palavra Information para selecioná-la. No inspetor de proprie-dades, insira information.htm no campo Link. O propósito desse link é estabelecer uma conexão com uma página na mesma pasta que a o documento atual.
3 Selecione a frase Contact Us e, no campo Link do inspetor Property, insira http://www. yourvacationpalace.com/contact.htm. Inserindo o endereço Web completo, você pode vincular diretamente a qualquer página acessível na Internet.
Selecione e modifique estilos CSS
Páginas Web modernas utilizam Cascading Style Sheets (CSS) para estilização e layout. Neste exercício, você modificará a cor de fundo da página existente, adicionará um elemen-to gráfico de fundo a uma seção da página e ajustará vários atribuelemen-tos de texelemen-to. Todas essas alterações são realizadas por meio do painel CSS Styles do Dreamweaver.
Altere a cor de fundo a do corpo da página
As CSS podem ser utilizadas para alterar as propriedades de estilo de uma tag HTML qual-quer, como <body>.
1 Escolha Window > CSS Styles.
2 No painel CSS Styles, clique em All para alternar a partir do modo Current, se necessário. O modo All mostra todos os estilos CSS associados com a página.
3 Expanda a entrada <style> no painel All Rules clicando no sinal de adição (Windows) ou no triângulo (MacOS).
4 Selecione body e escolha Edit Style, o ícone de lápis ( ) na parte inferior do painel CSS Styles.
5 Quando a caixa de diálogo CSS Rule definition for body aparecer, clique na amostra de cor Background para abrir o seletor de cores pop-up.
6 No seletor de cores, utilize a ferramenta Eyedropper (conta-gotas) para obter uma amos-tra do bloco de cor branca na segunda coluna.
O Dreamweaver insere automaticamente o valor hexadecimal para branco, #FFFFFF, no campo Background color.
7 Clique em OK para completar a alteração. O Dreamweaver identifica a nova cor no pai-nel de propriedades do paipai-nel CSS Styles.
8 Pressione F4 para ocultar todos os painéis; observe que a cor de fundo agora mudou de cinza para branco.
Cor de fundo padrão Fundo branco modificado 9 Pressione F4 novamente para restaurar os painéis. 10 Escolha File > Save.
Insira um fundo gráfico
Enquanto as imagens de primeiro plano são inseridas diretamente na página, as imagens de fundo são posicionadas por meio de CSS.
1 Posicione o cursor em qualquer lugar no texto do cabeçalho, “your vacation wonderland awaits”.
2 Na Tag Selector, escolha <div#header>. Essa seleção indica a tag <div> com um ID de #header.
3 No painel CSS Styles, clique em Current para mudar para o modo Current. 4 No painel Summary, clique em Background e então escolha Edit Styles ( ).
5 Quando a definição de CSS Rule para a caixa de diálogo .twoColFixLtHdr #header apare-cer, clique no botão Browse ao lado do campo e do rótulo da imagem Background.
7 Na lista Repeat, escolha no-repeat. Clique em OK.
8 Clique em qualquer lugar na página para remover a seleção do cabeçalho e visualizar a imagem de fundo.
No momento, o texto do cabeçalho em preto é um pouco difícil de ler contra o fundo do céu azul; você ajustará a cor do texto do cabeçalho no próximo exercício.
Ajuste fontes e cores do texto
As CSS fornecem um tremendo controle sobre a seleção de estilos. Além de mudar a apa-rência e o comportamento de todas as instâncias de uma tag em uma página ou em um site inteiro, você também pode mudar um estilo para afetar uma tag em uma localização parti-cular.
1 Posicione o cursor em qualquer lugar no texto do cabeçalho, your vacation wonderland awaits.
2 Na Tag Selector, escolha <h1>.
3 No painel CSS Styles, verifique se o modo Current está selecionado; se o modo All estiver selecionado, clique em Current.
4 No painel Rules, escolha .twoColFixLtHdr #header h1 e clique em Edit Style ( ).
5 Quando a definição de CSS Rules para .twoColFixLtHdr #header h1 aparecer, clique em Type na coluna Category.
6 Na lista Font, escolha Geneva, Arial, Helvetica, sans-serif. Clique na amostra Color para abrir o seletor de cores pop-up e utilize a ferramenta Eyedropper para selecionar branco na segunda coluna. Clique em OK para confirmar suas alterações.
7 Clique em qualquer lugar na página para remover a seleção do texto de cabeçalho. O cabeçalho branco contrasta mais nitidamente com a imagem de fundo e é mais fácil de ler.
Altere o tamanho e espaçamento do texto
Além de alterar o estilo e as cores das fontes, como demonstrado no exercício anterior, você também pode controlar o tamanho e o espaçamento do texto com CSS.
1 Posicione o cursor em qualquer lugar no título ou parágrafo do conteúdo principal. 2 Na Tag Selector, escolha <div#mainContent>.
3 Com .twoColFixLtHdr #mainContent selecionado no painel Rules do painel CSS Styles, clique em Edit Style ( ).
4 Quando a definição da CSS Rules para .twoColFixLtHdr #mainContent aparecer, clique em Type na coluna Category.
5 Na lista Size, escolha 14 e deixe a unidade de medida padrão configurada como pixels. 6 No campo Line height, insira 21 e, novamente, deixe a unidade de medida padrão confi-gurada como pixels. Clique em OK.
O parágrafo agora tem uma aparência mais arejada e suas modificações na página agora estão completas.
7 Escolha File > Save.
Visualize sua página em um navegador
Embora o Dreamweaver faça um excelente trabalho de representação de páginas Web na janela de documentos, sempre é importante revisar suas páginas em um ou mais navegado-res. O Dreamweaver permite a visualização em qualquer navegador localmente instalado, depois de definido em Preferences.
1 Escolha File > Preview in Browser > Edit Browser List.
A caixa de diálogo Preferences aparece, com a categoria Preview in Browser pré-selecionada. 2 Escolha Add ( ) para adicionar um novo navegador à lista.
3 Na caixa de diálogo Add Browser, deixe todos os campos desmarcados e clique em Browse.
4 Quando a caixa de diálogo Select Browser abrir, navegue até seu navegador preferido: Para escolher o Firefox no Windows, acesse Program Files > Mozilla Firefox > firefox.exe.
•
Para escolher o Internet Explorer no Windows, navegue até Program Files > Internet
•
Explorer > iexplore.exe
Para escolher o Safari no Macintosh, navegue até Applications: Safari.
•
6 No campo Name da caixa de diálogo Add Browser, insira o nome que você quer que apa-reça na lista de navegadores, como Firefox, Internet Explorer ou Safari.
Nota: O Dreamweaver insere o nome do arquivo do aplicativo que talvez não seja o mais
amigável ao usuário. Devido à constante evolução dos navegadores, uma boa idéia é combinar o nome do seu navegador com um número de versão como Firefox 2.0 ou Internet Explorer 7.
7 Marque a opção Primary Browser; clique em OK.
8 Na caixa de diálogo Preferences, clique em OK para completar o procedimento.
9 Pressione F12 (Windows) ou Option+F12 (MacOS) para visualizar a página atual no seu navegador primário.
10 Depois de completar a revisão da sua nova página Web, feche o navegador e retorne ao Dreamweaver.
Parabéns – você criou sua primeira página Web no Dreamweaver. Como pode ver, o Dreamweaver combina grande poder com facilidade de uso.
Perguntas
䉴
1 Qual é a maneira mais rápida de criar o design de um layout inicial?
2 Verdadeiro ou falso: Qualquer texto colado no Dreamweaver perde a estrutura e a formatação original.
3 Qual é a diferença entre adicionar imagens de primeiro plano e de fundo à página? 4 Em que os dois modos do painel CSS Styles – All e Current – diferem?
baseados em CSS. Carregue a caixa de diálogo New Document escolhendo File > New.
2 Falso. O Dreamweaver tem a capacidade de reter a estrutura – parágrafos, listas etc. – a formatação, incluindo atributos como negrito e itálico. Como veremos na Lição 4, Trabalhando com texto, você pode escolher o grau de estrutura e de forma-tação mantido.
3 Imagens de primeiro plano são inseridas diretamente na página por meio do bo-tão Images na barra Insert. Imagens de fundo são adicionadas ao design por meio da CSS.
4 O modo All exibe uma lista de todos os estilos associados à página atual, incluin-do aqueles incorporaincluin-dos à tag <head> e aqueles contiincluin-dos dentro de folhas de estilo externas. O modo Current, por outro lado, mostra detalhes – como regras, seletores e propriedades – pertencentes à seleção atual.
