Dreamweaver CS5

Dreamweaver CS5
Sumário
Introdução ........................................................................................................................................ 1
Área de Trabalho .............................................................................................................................. 1
Ajustes de Preferências .................................................................................................................... 3
Criando um novo Arquivo............................................................................................................... 11
Salvando e visualizando um arquivo .............................................................................................. 15
Trabalhando com imagens ............................................................................................................. 19
Iniciando a Construção do Site - Conceitos e Diretórios ................................................................ 22
Exportando arquivos através do Photoshop .................................................................................. 23
Gerenciador de Arquivos - Manage Sites ....................................................................................... 27
Estilo CSS ........................................................................................................................................ 30
Trabalhando com Layers ................................................................................................................ 33
Hyperlinks ....................................................................................................................................... 34
Rollover Image ................................................................................................................................ 35
Frames e Iframes ............................................................................................................................ 36
Integração com o Flash................................................................................................................... 38
Tabelas............................................................................................................................................ 40
AJAX Utilizando o Framework Spry ................................................................................................ 44
Criando Páginas para o Site ............................................................................................................ 46
Formulário ...................................................................................................................................... 50
Criando o menu (Hotspot Image Map)........................................................................................... 54
Evento com Janela (JavaScript) ...................................................................................................... 55
Publicando o Site na Internet ......................................................................................................... 56
Introdução
Adobe Dreamweaver CS5
O Adobe Dreamweaver CS5 é o software mais famoso para designers e desenvolvedores criarem
seus sites de maneira rápida e fácil, podendo ser criados visualmente ou direto no código, além
de muitos recursos e funcionalidades disponíveis.
A novidade é que esta nova versão, inclui suporte para criações e edições mais populares dos
dias atuais. Isto é ótimo, tanto para os novos desenvolvedores que estão começando a escrever
códigos, quanto para os mais experientes que procuram agilidade.
Área de Trabalho
Para iniciar o Dreamweaver CS5, clique no botão Iniciar, Todos os Programas, opção Adobe
Master Collection CS5 e clique em Adobe Dreamweaver CS5.
Logo será iniciado o Dreamweaver CS5 com sua tela inicial.
1
Após iniciar o programa podemos visualizar a Start Page (Página Inicial), observe:
Start Page (Página Inicial)
Quando você executa o Dreamweaver, como padrão ele exibe a Página Inicial. Nela podemos
manipular documentos.
Open a Recent Item: podemos escolher qualquer documento criado antes pelo Dreamweaver.
Create New: podemos criar um documento conforme o tipo que queremos (HTML, ColdFusion,
PHP, ASP VBScript, XSLT, CSS, JavaScript, XML), um novo site do Dreamweaver ou mais opções,
clicando em More.
Top Features (videos): contém informações de como criar outra página baseada em modelo préexistente.
Para desativar a Start Page, selecione a opção "Don't show again" (Não mostrar novamente),
caso deixe esta opção desmarcada, sempre que iniciado o Dreamweaver exibirá a mesma.
Para criar um novo documento, clique na opção HTML.
Podemos observar na área de trabalho Designer, que todas as janelas e painéis estão integrados
em uma única janela.
2
Para alterar a área de trabalho do Dreamweaver, clique no menu Window, Workspace Layout e
escolha a opção Coder.
Depois de atribuída a opção Coder, observamos as mudanças efetuadas na área de trabalho do
Dreamweaver, clicando em cada um dos botões que estão em destaque.
A área de trabalho Designer é mais utilizada e os três botões na parte superior permitem que o
modo de trabalho seja alterado. Por exemplo, clicando no botão Design, o Dreamweaver muda
para o modo de desenho de página.
Ajustes de Preferências
Para obter melhor resultado nos trabalhos do Dreamweaver CS5, podemos personalizar suas
configurações na janela de preferências.
Para abrir essa janela, escolha o menu Edit e clique sobre as opções Preferences; pode-se utilizar
a tecla de atalho <Ctrl>+<U>.
3
Preferências - General
Principais componentes.









Show Welcome Screen: Selecionada, essa opção define que, quando abrir o
Dreamweaver, inicialmente apareça na tela a janela Start Page, permitindo abrir
documentos recentes e também criar outros.
Reopen documents on startup: Quando estiver marcada, cada página que estava aberta
quando fechamos o Dreamweaver, será aberta da próxima vez que inicializarmos o
software.
Warn when opening read-only files: Quando selecionada, aparecerá uma caixa de alerta
toda vez que for aberto um arquivo configurado somente como leitura.
Enable Related Files: Ativa arquivos relacionados automaticamente ou manualmente.
Update links when moving files: Quando essa opção estiver marcada, ao mudar um
arquivo do site, movendo, renomeando ou deletando, por exemplo, o Dreamweaver
automaticamente muda as referências a esse arquivo que existiam em outras páginas.
Quando escolhida, a opção Always, atualiza essas referências automaticamente. Se a
opção Prompt for a escolhida, pergunta se deseja atualizar os arquivos, ou não atualizar
nenhum arquivo se for escolhida a opção Never.
Show dialog when inserting objects: Quando estiver marcada, ao incluir algum tipo de
elemento na tela, como imagens, aparece uma caixa de diálogo com configurações que
podemos utilizar.
Para não visualizar essas caixas de diálogo, não é necessário desmarcar essa opção,
somente manter pressionada a tecla <Ctrl> quando clicar na opção de inserir objeto.
Enable double-byte inline input: Algumas espécies de texto, como o japonês, por
exemplo, são double-byte. Quando escolhida essa opção, podemos digitar diretamente
esse tipo de texto no documento. Se não for escolhida, aparecerá uma caixa de diálogo
que faz a conversão do texto nesse tipo.
Use <strong> and <em> in place of <b> and <i>: No HTML existem dois tipos de
formatações principais para os caracteres, sendo elas formatação física e lógica.
4



Os comandos <strong> e <em> simbolizam elementos de formatação lógica para o
negrito e o itálico respectivamente. Já os comandos <b> e <i> também simbolizam
negrito e itálico, só que em formatação física.
Com essa opção marcada, ela utiliza os comandos de formação lógica, se desmarcada,
usa a física.
Maximum number of history steps: Esse valor define a quantidade de passos que será
permitido voltar atrás, seja usando o comando Edit, Undo, tecla de atalho <Ctrl>+<Z>,
ou usando um painel chamado History (Histórico). Podendo ser um valor entre 2 e 99.
Preferências - Accessibility
É nessa área que configuramos as opções de acessibilidade do software.

Show attibutes when inserting: Marcando as opções Objetos de formulário (Forms
objects), Molduras (Frames), Mídia (Media), Imagens (Images), ao incluir um desses
elementos, será aberta uma janela com opções que torna mais fácil a configuração
deles.
Preferências - AP Elements
Nesta área é possível configurar as opções padrão para as DIVs com o posicionamento absoluto
(áreas que podem ter sua posição na página definida) usadas do Dreamweaver.
Preferências - Code Coloring
Nessa área configuramos como serão coloridos os códigos para facilitar a visualização.

Document Type: Aqui escolhemos o tipo de documento para o qual desejamos
configurar o sistema de cores do código. Esse sistema ajuda a encontrar e identificar os
códigos e também possíveis erros.
Para fazer a configuração desse sistema de cores, após selecionado o tipo de documento clique
no botão Edit Coloring Scheme.
Em seguida, é aberta uma nova janela, onde devemos selecionar o elemento desejado em Styles
for e à sua direita, as cores do texto (Text color), do fundo (Background color) e aplicar Negrito
(B), Itálico (I) ou Sublinhado (U).

Background color: Nessa área é escolhida a cor padrão do fundo da janela do código.
5
Preferências - Code Format
Nesta parte é possível configurar como será formatado o código pelo Dreamweaver.



Tab size: Essa opção determina o tamanho utlizado pela tabulação. Esse valor é medido
em espaços de caracteres.
TD tag: Quando marcada a opção Do not include a break inside the TD tag, o
Dreamweaver não incluiu quebra de linha do código caso ela passe a quantidade de
caracteres definida em um campo.
Advanced Formatting: Realiza definições do código para CSS ou para Tag Libraries.
Clique no botão apropriado e na janela que se abre para efetuar suas configurações.
Preferências - Code Hints
O Dreamweaver nos permite que enquanto digitamos os códigos, recebemos uma dica rápida
do código que é possível digitar.
Preferências - Code Rewriting
6
Essa área do Dreamweaver é responsável por reescrever códigos que já existem em páginas que
foram abertas no programa.
Preferências - Copy and Paste
Aqui definimos como se comportarão os elementos quando copiados de outro programa e
colados no Dreamweaver na visualização Design.
Preferências - CSS Styles
7
Nesta área configuramos opções referentes ao CSS (Cascade Style Sheets - Folhas de Estilo em
Cascata), que são elementos responsáveis por quebrar limitações existentes nas marcações
HTML, dando maior vantagem ao designer.
Preferências - File Compare
Podemos fazer uma comparação de determinados arquivos utilizando algum outro programa.
Preferências - File Types/Editors
Outros softwares podem ser abertos para editar os arquivos diretamente do Dreamweaver.
Preferências – Fonts
Nessa área podemos configurar as fontes utilizadas no programa.
Preferências - Highlighting
8
Nessa área configuramos as cores que o Dreamweaver usa para identificar certos elementos.
Preferências - Invisible Elements
Configuramos aqui as representações para elementos invisíveis.

Show: Nesse espaço se determinam os elementos invisíveis que deseja ser
representados por um ícone na tela de desenvolvimento, optando entre: Âncoras com
nome (Named anchors), Scripts, Comentários (Comments), Quebras de linha (Line
breaks), Mapas de imagens do cliente (Client-Side image maps), Estilos incorporados
(Embedded styles), Campos ocultos de formulários (Hidden form fields), Delimitador de
formulários (Form delimiter), Pontos de ancoragem de DIVs com posicionamento
absoluto (Anchor points for AP elements), Pontos de ancoragem de elementos alinhados
(Anchor points for aligned elements), Tags visuais de markup de servidores (Visual
Server Markup Tags - ASP, CFML, ...)) e propriedade display do CSS determinada como
nenhuma (CSS display: nome).
Preferências - New Document
Ajustamos as opções para novos documentos do Dreamweaver. Entre algumas, temos:



Default document: Escolhemos o tipo padrão para os documentos que vamos criar para
o site, escolhendo no menu o tipo que queremos.
Default extension: Nessa opção determinamos a extensão padrão para os arquivos a
serem criados.
Unicode Normalization Form: Se escolher a codificação Unicode (UTF - 8), aplica o
formato de normalização que você escolher nesse menu.
Preferências - Preview in Browser
Escolhemos as configurações para visualização dos arquivos no navegador.


Browsers: Podemos definir os navegadores a serem usados para a visualização das
páginas. É possível adicionar um navegador clicando no sinal (+) e definir se ele será o
primário (chamado pela tecla de atalho <F12>), marcando a opção Primary browser ou
secundário (chamado por <Ctrl>+<F12>), marcando Secondary browser.
Preview using temporary file: Selecionado, cria uma cópia temporária do arquivo no
servidor para podermos visualizá-la.
9
Preferências - Site






Always show: Configuramos o site (Local ou Remoto) que aparecerá em um dos lados da
janela: à Esquerda (Left) ou à Direita (Right).
FTP connection: Marcando essa opção, se você estiver conectado ao seu site FTP e se
mantiver inativo pelo tempo estipulado à direita deste item, será automaticamente
desconectado.
FTP time out: Aqui configuramos o tempo máximo que o Dreamweaver faz a tentativa
de se conectar com o site FTP.
FTP transfer options: Em casos de usuário inativo, configura-se após quanto tempo será
escolhida a opção padrão de determinada caixa de diálogo durante o uso FTP.
Proxy host: Se você se encontrar atrás de um firewall, deve especificar seu endereço
nessa área, caso não, deve deixá-la em branco.
Proxy port: Utilizado para fazer a escolha de uma porta se estiver utilizando um firewall
e a mesma for diferente da 21.
Preferências - Status Bar
Velocidade de largura de banda a ser simulada e o tamanho da tela são configuradas nessa área.
10
Preferências - Validator
Utilizamos esta opção para verificar se nos códigos existem erros nas tags ou de sintaxe.

If no DOCTYPE is detected, validate against: Nesta parte, configuramos o tipo de código
que vai utilizar como referência para aplicar a validação, caso não tenha sido detectado
o tipo de documento, restando apenas escolher as opções na lista disponível.
Criando um novo Arquivo
Ao iniciar o Dreamweaver CS5, temos em sua área de trabalho o Start Page, onde podemos
escolher que tipo de arquivo iremos criar ou se desejamos utilizar um documento pronto.
Durante o curso, todos os arquivos que criamos foram do tipo HTML, linguagem de
programação padrão para Web.
Existem duas maneiras de se criar um novo arquivo: através do menu File, opção New ou então,
de um modo mais simples, clicando sobre a opção de arquivo desejada no Start Page.
Clique na opção HTML, no Start Page.
Após o clique, um novo arquivo é criado e exibido na área de trabalho do Dreamweaver. Note
também que aparece no canto superior esquerdo, o Cursor de edição.
11
Neste novo arquivo, podemos digitar um texto, inserir uma imagem ou qualquer outro
componente do Dreamweaver, e assim que este arquivo for salvo, poderá ser visualizado no
browser (Internet Explorer, Mozilla Firefox ou outros).
Acima da janela de documento encontra-se um grupo de botões denominado Barra de
Ferramentas. Esses botões permitem a execução de algumas tarefas de forma rápida, como
alteração do modo de visualização, gerenciamento de arquivos do site, visualização da página no
navegador e configuração de opções.
No campo Title é possível introduzir um texto a ser apresentado pelo navegador na Barra de
Título.
O menu View permite que sejam ativadas algumas opções de auxílio ao webdesigner, como
régua e grade de linhas. A imagem a seguir, mostra a grade e as réguas apresentadas na área de
trabalho.
12
É importante mencionar como ativar as réguas (horizontal e vertical) da área de trabalho caso
elas estejam desabilitadas. Essas réguas são úteis quando há a necessidade de orientação
quanto à posição exata de determinado objeto dentro da página.
Para ativá-las, clique no menu View, opção Rulers e selecione Show.
Para inserir um texto em uma página do Dreamweaver, basta digitar o texto desejado quando o
cursor de edição estiver em modo de espera.
Com a janela do Dreamweaver ativa, digite: Primeiro Exemplo.
Como um editor de textos qualquer, podemos apagar os textos digitados, bem como editá-los,
alterando tamanho e estilo da fonte e aplicando efeitos como Negrito, Itálico, etc.
Para formatar um texto, é necessário que o mesmo esteja selecionado. Posicione o cursor ao
lado do parágrafo digitado e clique uma vez.
13
Após a seleção, o painel Properties (Propriedades) habilita suas funções para edição de textos.
HTML: abre o painel HTML do Dreamweaver.
Format: formata o parágrafo com estilos de textos e alinhamentos predefinidos pelo
Dreamweaver.
Bold e Italic: permitem aplicar a formatação em Negrito e Itálico.
Formatação de Texto:




Unordered List: aplica marcadores ao(s) parágrafo(s) selecionados(s).
Ordered List: aplica numeração ao(s) parágrafo(s) selecionado(s).
Remove Blockquote: retira os recuos de parágrafo.
Blockquote: define um recuo de parágrafo.
Com o texto selecionado, clique no drop-down da opção Format e selecione a opção desejada.
Alteramos a cor do texto através da Paleta de cores.
Após o clique, é exibida a Paleta de cores. Posicione o cursor sobre a cor desejada e clique para
que ela seja aplicada ao texto.
O Dreamweaver CS5 abre a caixa de diálogo New CSS Rule (Nova regra CSS). Nesta caixa
devemos informar o tipo e o nome do seletor de contexto CSS.
Selecione a primeira opção disponível na caixa de combinação, digite a descrição Título na caixa
Selector Name e clique no botão OK.
14








CSS: Abre o painel de CSS do Dreamweaver.
Targeted Rule: Exibe as regras criadas através do CSS.
Font: Possui uma lista de fontes para formatação de texto.
Text Color: Paleta de cores que permite aplicar cor ao texto.
Align Left: Alinha o parágrafo à esquerda.
Align Center: Alinha o parágrafo ao centro.
Align Right: Alinha o parágrafo à direita.
Justify: Justifica o parágrafo.
Salvando e visualizando um arquivo
Todo e qualquer arquivo criado no Dreamweaver, para ser visualizado em um browser, deve,
antes de tudo, ser salvo.
Com o arquivo desejado, clique no menu File, opção Save.
15
Após o clique será exibida a caixa de diálogo Save As. Nesta caixa, devemos informar o nome do
arquivo e o local onde ele será salvo.
Em Tipo, mantenha selecionada a opção mostrada abaixo, para que o arquivo seja salvo com a
extensão .html.
Feito isso, clique sobre o botão Salvar da caixa de diálogo.
No Dreamweaver, com seu documento em uso, clique sobre o botão Preview/Debug in browser.
Em seguida, selecione a opção Preview in IExplore para visualizá-lo no Internet Explorer.
Após o clique, o IE será exibido, tendo como conteúdo, a página HTML criada por você.
Observe na Barra de Título da janela do Internet Explorer (IE), que o arquivo ainda não possui
título. Geralmente definimos um nome para cada página como um informativo, ou ainda, um
único título padrão para todas as páginas do projeto.
16
Retornando ao Dreamweaver, definiremos um título para a nossa página.
Na Barra Document, selecione e apague o texto da caixa Document Title.
Com o cursor no campo Title, digite a descrição que desejar.
Além de visualizarmos nosso arquivo no Internet Explorer (IE), podemos também utilizar outros
browsers.
Para isso, clique sobre o botão Preview/Debug in browser e escolha a opção Edit Browser List.
Será iniciada a janela de Preferences.
Para adicionar um novo browser, clique sobre o botão Add Browser.
Na caixa de diálogo Add Browser, clique sobre o botão Browse....
Na caixa Select Browser, abra a pasta e selecione o ícone do navegador desejado.
17
Ao indicar o caminho do browser, selecione o mesmo como secundário pois temos o Internet
Explorer como navegador primário.
O novo browser será adicionado à lista.
No Dreamweaver CS5, com seu documento ativado, clique sobre o botão Preview/Debug in
browser e selecione a opção Preview in firefox.exe.
Após o clique, o Mozilla Firefox será exibido, tendo como conteúdo a página Html.
No Dreamweaver pode ser encontrado o recurso Device Central que é um aliado para quem
desenvolve sites para dispositivos móveis. Ele traz skins de diversos handhelds e celulares, e
formata o conteúdo Html dentro da área de cada um.
No arquivo desejado, clique em Preview/Debug in browser e escolha a opção Preview in Device
Central.
Caso queira visualizar utilizando outros tamanhos de display, navegue pelas opções da guia Test
Devices, opção Flash Player.
18
Trabalhando com imagens
Trabalhar com imagens, quando falamos de Internet, pode parecer um processo simples, mas
não é. Digamos que seja simples inserir um arquivo de imagem em uma página HTML, sim, mas
esta deve seguir alguns padrões, para que por exemplo, não implique na demora do
carregamento da página do projeto ou então, que esteja com um nível de qualidade baixo, a
ponto de implicar na visualização perfeita realizada pelo usuário.
Os tipos de arquivos de imagens mais usuais, pelo fato de suas características atenderam aos
requisitos de páginas web, são JPG (JPEG), GIF e PNG.
Formato JPEG (Joint Photographic Experts Group)
O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou em tom
contínuo, pois os arquivos JPEG podem conter milhões de cores. À medida que a qualidade de
um arquivo JPEG aumenta, também aumentam o tamanho e o tempo de download do arquivo.
Você geralmente consegue um bom equilíbrio entre a qualidade da imagem e o tamanho do
arquivo compactando um arquivo JPEG. O JPEG é um dos formatos de imagens mais populares e
isso se deve à capacidade de formar imagens fiéis à original. Além disso, os arquivos em JPEG
costumam não ser grandes.
Formato Gif (Graphic Interchange Format)
Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a exibição de
imagens em tom não-contínuo ou imagens grandes de cores simples, como barras de
navegação, botões, ícones, logotipos ou outras imagens com cores e tons uniformes.
Formato PNG (Portable Network Group)
19
O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui suporte à imagens
true-color, em tons de cinza e de cores indexadas, além de suporte a canal alfa para
transparência. PNG é o formato de arquivo nativo do Adobe® Fireworks®. Os arquivos PNG
retêm todas as informações originais de camada, vetor, cor e efeitos (como sombras) e todos os
elementos são completamente editáveis, continuamente. Os arquivos devem ter a extensão
.png para serem reconhecidos como arquivos PNG pelo Dreamweaver.
Graças aos formatos JPEG, GIF e PNG, foi possível utilizar figuras em várias aplicações em
imagens na Internet. Até mesmo o layout das páginas de Internet utilizam estas imagens e é
importante frisar que existem vários outros tipos de formatos para imagens.
As imagens são sempre inseridas na posição em que o cursor estiver, seja em uma linha simples
do documento, seja dentro de uma tabela, etc.
Para que a imagem seja inserida centralizada, clique em Align Center. Logo será exibida a caixa
New CSS Rule, em Selector Name:, digite a descrição e clique no botão OK.
Com o cursor na posição definida, clique sobre o botão drop-down da opção Images, no painel
Insert, guia Common. Note que é exibido um submenu com as opções de inserção disponíveis.
Escolha a opção Image.
Após o clique, será exibida a caixa de diálogo Select Image Source, onde devemos escolher qual
será a imagem a ser inserida no documento.
20
Após escolher a imagem, clique no botão OK, para que a mesma seja inserida na página, no local
indicado.
Após o clique, será exibida uma mensagem na qual podemos informar um pequeno texto que
deve ser mostrado no navegador quando não for possível carregar a respectiva imagem.
Perceba que com a imagem selecionada, o painel Properties exibe campos que nos permitem
fazer alterações nas propriedades da imagem.
Dentre os recursos mais utilizados, temos: possibilidade de inserir um link, definir uma borda,
alinhamento, etc.
Não aconselhamos que seja alterado o seu tamanho através das caixas W (Width) e H (Heigth),
pois as variações não são proporcionais, o que pode causar a deformação da imagem.
Para aplicar uma imagem ao fundo de uma página, no arquivo desejado, clique no botão Page
Properties (Propriedades da Página), localizado no painel Properties.
Na caixa de diálogo aberta, clique em Browse..., para que seja possível a localização da textura
que iremos inserir.
Através do campo Examinar, selecione o local desejado e clique duas vezes na imagem.
Em seguida, clique no botão Apply para adicionar a textura do arquivo e clique em OK para
confirmar.
No campo Title, digite a descrição que desejar para que a mesma seja exibida na guia da página.
21
Integração com o Photoshop CS5.
Com a compra da Macromedia pela Adobe, se tornou possível a integração entre o
Dreamweaver e o Photoshop.
Vamos aprender como inserir um arquivo criado no Photoshop que possui a extensão .psd, em
uma página do Dreamweaver.
Após inserir a imagem .psd em um novo arquivo, como a extensão do Photoshop (.psd) não
pode ser utilizada em páginas HTML, será aberta a janela Image Preview.
Nesta janela serão realizados os ajustes necessários na imagem que será exportada.
Caso não realize nenhuma alteração na imagem, clique no botão OK.
Agora podemos trabalhar com uma imagem que foi gerada a partir de um arquivo do
Photoshop.
Ao selecionar a imagem inserida, perceba que no painel Properties terá um novo campo
chamado Src, representado pelo ícone do Photoshop, o mesmo indica o caminho do arquivo
psd.
Outra forma de integração é copiar uma imagem do Photoshop e colá-la diretamente no
Dreamweaver.
Iniciando a Construção do Site - Conceitos e
Diretórios
Um site do Dreamweaver CS5 é um conjunto de arquivos que formam as páginas da Web. Você
pode criar páginas da Web no computador, carregá-las em um servidor Web e manter o site
transferindo arquivos atualizados sempre que os salvar.
Um dos pontos mais importantes, quando iniciamos a construção de um projeto de site, é a
organização dos arquivos em diretórios e subdiretórios.
22
O mais usual é deixar as páginas HTML do site na raiz de diretórios e separar em pastas distintas
as imagens, o material pesquisado, os arquivos de download, etc.
Nesta lição, criamos uma estrutura de diretórios que receberá todo o material utilizado para o
desenvolvimento de um Website.
Após criar as pastas desejadas, acesse o diretório, para visualizar o seu conteúdo. Logo em
seguida, abra a pasta Arquivos PSD.
Acessando o diretório.
Exportando arquivos através do Photoshop
Existem várias formas de se criar a estrutura de um site. Podemos abrir o Dreamweaver, criar
algumas tabelas, inserir alguns dados e imagens e pronto!
Além destas opções, podemos também "desenhar" ou desenvolver um layout em um software
de edição de imagens, como o Photoshop.
O site pode ser totalmente desenvolvido em um destes softwares ou apenas parte dele, como
por exemplo, um menu diferente ou apenas o seu topo, etc. Este arquivo é então exportado
como HTML, com uma pré estrutura de tabelas montada.
Através do Photoshop CS5, clicamos sobre o menu File, opção Open, e abrimos um arquivo que,
quando exportado, será a página principal do site.
Após escolher a opção do menu File, será exibida a caixa de diálogo Open.
Localize a Sua Pasta e acesse o diretório criado por você. Clique sobre o arquivo e no botão
Abrir.
23
Pressione as teclas <Ctrl>+<+>, para visualizar o arquivo com Zoom de 100%, caso ainda não
esteja.
Agora pressione a tecla <Tab>, para que possamos vê-la por inteira, assim ficarão ocultas as
Barras de Ferramentas. Para voltar as barras, aperte a tecla novamente.
O que temos é um arquivo que contém várias imagens e textos. Caso você tenha feito o curso de
Photoshop CS5 ou tenha conhecimentos deste programa, pode perceber que seu
desenvolvimento não é complicado, contendo algumas formas, imagens e textos e formando o
layout de um site.
Note como no mesmo arquivo, definimos um topo para a página, um menu, um rodapé, etc.
Mas, o que fazer para definir cada uma destas áreas para um documento Html?
Simples! Não podemos disponibilizar todo o arquivo na Web, pois como dito anteriormente, as
páginas devem ter um carregamento um tanto quanto rápido, e uma imagem com esta
complexibilidade, comprometeria tal exigência.
O que devemos fazer então, é dividir este arquivo em partes, para que cada uma seja carregada
separadamente, de uma forma mais rápida. Utilizamos então duas ferramentas do Photoshop:
as Slices, que definem as partes do arquivo, e as Guides, para que as Slices sejam desenhadas.
Para posicionar as Guides ou Linhas-Guia, precisaremos da régua (Rulers).
Com a régua sendo exibida, posicionaremos as Guides nos locais de cortes que faremos na
imagem.
Clique em um ponto qualquer da Régua Horizontal e com o botão do mouse pressionado,
arraste a linha para o ponto 5,0 da Régua Vertical.
24
Clique na Régua Vertical e arraste uma linha-guia para a posição desejada da Régua Horizontal.
Não se esqueça de que você pode utilizar o Zoom (<Ctrl>+<+> ou Ctrl+<->) e mantendo a Barra
de Espaço pressionada, clicar para movimentar o documento.
Diminua o Zoom para 100%, altere o valor na Barra de Status e pressione <Enter>.
Veja que agora o documento já está com as guias posicionadas para os cortes. Então, definimos
as fatias da imagem ou Slices.
Aperte a tecla <Tab> para ativar as Barras de Ferramentas.
Mantenha o mouse pressionado sobre a ferramenta Crop Tool e quando surgir as opções, clique
sobre Slice Tool.
Exportando arquivos através do Photoshop
Após o clique, o cursor tomará outro formato: de uma pequena "faca". As Slices serão definidas
dentro dos espaços gerados pelas Guides. Utilize as teclas <Ctrl>+<-> para reduzir o Zoom.
Ao terminar a fatia, pressione as teclas <Ctrl>+<+>.
25
Agora, que o arquivo já está pronto para ser exportado, utilizaremos um recurso do Photoshop
que, ao salvar o documento, analisa cada parte separada por Slices e exporta um arquivo Html e
Imagens, em separado.
O programa cria uma página com uma tabela, respeitando o número de linhas e colunas
definidas pelas fatias; cria uma pasta no diretório escolhido por você com o nome de images e
armazena dentro dela os arquivos e imagens em formato GIF.
Clique no menu File, opção Save for Web & Devices....
Em seguida, surgirá a caixa de diálogo Save for Web & Devices, exibindo a imagem que será
exportada. Verifique se na caixa Optimized file format está selecionada a opção GIF e clique
sobre o botão Save.
Será exibida agora a caixa de diálogo Save Optimized As.
Em Salvar em, localize a Sua Pasta e depois o diretório Dream_CS5. Modifique o formato do
arquivo através do campo Format, clique no botão drop-down e selecione HTML and Images.
As caixas de diálogos serão fechadas logo após o término do processo de exportação. Feche o
Photoshop e confirme a gravação do arquivo.
Abra o Windows Explorer e acesse seu diretório de arquivos, para que seja possível ver se foi
realizado o processo de exportação.
26
O Photoshop exporta o arquivo com extenção HTML (index) e cria a pasta images, com os
arquivos .gif.
Gerenciador de Arquivos - Manage Sites
Tanto para sites simples quanto para os mais complexos, é inevitável a transferência de arquivos
de diretórios para diretórios, cópias, etc. Bem como, ficar a todo momento, exibindo-os para
manutenção, edição ou simples conferência de dados.
Vimos até agora, como abrir arquivos e modelos através do menu File localizando os diretórios
desejados e utilizamos o Windows Explorer para a cópia ou transferência de arquivos.
O Dreamweaver possui um gerenciador de arquivos (Manage Sites) que nos permite ter acesso
de forma simples e objetiva aos arquivos e diretórios do projeto no qual estivermos
trabalhando. A principal função do gerenciador está ligada aos recursos de transferência de
arquivos para servidores externos, ou seja, é um software FTP ligado ao programa.
Utilizando comandos simples, podemos fazer alterações em nossos documentos e já atualizá-lo
via web, em seu servidor, sem a necessidade de um outro programa para tal.
Com o painel exibindo suas opções, temos algumas a destacar.
27
Nome do Projeto: no gerenciador, é permitido manter vários projetos cadastrados, e com isso,
basta escolher o projeto desejado.
Local de Trabalho: através deste campo podemos definir se queremos visualizar os arquivos
existentes localmente (na máquina) ou na Web (servidor do site).
Barra com os botões de ações: esta barra contém as principais operações do gerenciador.
Gerenciador de arquivos: é neste local que serão exibidos os diretórios e os arquivos do projeto
em uso.
Abra o Dreamweaver CS5 e o arquivo index.html, caso o mesmo não esteja aberto. Vamos
construir para esse arquivo um Manage Sites.
No painel Files, clique em Manage Sites.
Após o clique, surgirá a caixa de diálogo Manage Sites, clique no botão New.
A próxima caixa de diálogo que surgirá será Site Setup for Unnamed Site 2, com a guia Site ativa.
Em Site Name informamos o nome do site, apague a descrição e digite o que desejar.
Em seguida, para indicar o caminho do arquivo, ative o Browse for folder para localizar o arquivo
dentro da sua subpasta Dream_CS5.
Clique no botão Salvar.
28
Ao retornar à caixa de diálogo Site Setup, clique na opção Advanced Settings. Em Local info,
vamos indicar o caminho das imagens, ative o Browse for folder, localize a pasta Dream_CS5, em
seguida abra a subpasta images, clique no botão Salvar.
Ao retornar a janela Site Setup, clique no botão Save.
Na última janela, clique no botão Done.
Ao finalizar a construção do Manage Site, surgirá seu Código, sua pasta images, PSD e seu
arquivo index.html.
Clique sobre os sinais + ou - para exibir ou ocultar os arquivos dos diretórios.
O Servidor Remoto é o local onde seu site será publicado, ou seja, um servidor que possa ser
acessado por usuários do mundo todo, nas 24 horas do dia. Todo arquivo que faz parte do site
deve ser copiado para este servidor. Este processo é chamado de Upload ou "Subir arquivos".
Na Barra de Menus, encontramos comandos para a criação de arquivos e diretórios nos locais de
trabalho (Local ou Remoto), bem como, para a criação e configuração de novos sites no
gerenciador.
Clique novamente sobre o botão Collapse to show only local or remote site para reduzir o
tamanho da janela.
29
Estilo CSS
As Folhas de estilo em Cascata CSS (Cascading Style Sheets) permitem a formatação automática
e rápida dos documentos HTML.
Por exemplo, se você definiu um estilo para os textos do título da página e o aplicou a várias
páginas, quando fizer alguma alteração no estilo, como, por exemplo, mudar a cor dos
caracteres, todas as páginas que apresentam o título configurado com ele serão
automaticamente atualizadas.
Repare que do lado direito da tela do Dreamweaver, existe um painel chamado CSS. Nele, existe
uma guia chamada CSS Styles, onde editaremos os estilos CSS.
Caso não exista na tela este painel, clique no menu Window e escolha a opção CSS Styles.





Attach Style Sheet: adiciona ao documento um estilo já pronto (arquivo .CSS). Esse
procedimento será explicado mais adiante.
New CSS Rule: cria um estilo através de uma caixa de diálogo.
Edit Style Sheet...: edita o estilo selecionado na lista.
Disabe/Enable CSS Property: ativa e desativa o acesso às propriedades da lista.
Delete CSS Property: apaga o estilo selecionado na lista.
30
Para iniciar um estilo, clique no ícone .
Surgirá a caixa de diálogo New CSS Rule.
Selecione a opção Class, o qual será o estilo aplicado a cada tag de script contido em sua página.
Depois especifique o nome no campo Selector Name: como Estilo1. Selecione também a opção
New Style Sheet File.
Em seguida, clique no botão OK.
Aparecerá uma nova caixa de diálogo Save Style Sheet File As, onde você deve especificar o
nome do arquivo (.CSS) e o local onde ele será gravado. Defina o nome como Texto, indique o
caminho da Sua Pasta\Dream_CS5 e depois clique no botão Salvar.
É importante salientar que é preferível salvá-lo no mesmo local onde será gravada a página
HTML.
Após criar o arquivo, surgirá a caixa de diálogo CSS Rule Definition for, podemos definir as
características do estilo criado, especificando: fonte, cor, fundo da janela, posicionamento,
tabela , etc.
31
Através do botão Code, repare no cabeçalho do código HTML e veja a ocorrência do estilo,
especificando que neste caso, está linkado a um arquivo externo.
Ative o botão Design, no painel Properties, mantenha a opção HTML selecionada e clique no
drop-down do campo Class para confirmar a existência do estilo criado.
Para formatarmos o texto, selecione o mesmo. Depois, vá até o campo Class e escolha Estilo1.
32
Clique no botão Split e repare no código. A propriedade do estilo está em forma de tag e o texto
passa a ter uma nova formatação.
Trabalhando com Layers
Layer (ou camada) é um elemento de páginas HTML que você pode posicionar em qualquer
lugar, pois, diferente dos outros, esse parece "flutuar" sobre o layout da página. Assim como
numa célula de tabela, numa layer, é possível inserir textos, imagens ou qualquer outro
conteúdo que possa ser inserido em um documento HTML.
No Dreamweaver, você pode usar layers para construir o layout de sua página. É possível colocar
layers uma sobre a outra, ocultar alguns enquanto mostra outros e movê-los pela tela.
Para inserirmos uma layer: No menu Insert, opção Layout Objects, escolha AP Div. Você também
pode inseri-las através da Barra Insert, na opção Layout e ferramenta Draw AP Div.
33
Você se lembra do painel CSS Styles? Pois bem, é nele que encontramos a guia AP ELEMENTS,
que contém a relação de layers criadas. Aqui, podemos ocultar layers, nomeá-las e ordená-las
umas sobre as outras.
O painel Properties também apresenta as propriedades da layer selecionada.
Hyperlinks
Hyperlink (ou somente link) é o termo usado para o recurso que faz uma "ligação" entre um
local e um outro componente, que pode ser uma página, figura, vídeo, e-mail, etc. Os links são
os responsáveis pela navegação rápida entre as páginas e o acionamento dos downloads.
A propósito, você usa links o tempo todo durante o curso, clicando em Voltar, Próximo, etc...
No Dreamweaver é muito rápido e fácil elaborar os vários tipos de links. Nessa lição
aprenderemos como "linkar" uma página à outra, a fazer links de e-mails e outras propriedades.
Com a palavra desejada selecionada, clique no botão HTML do painel Properties e depois no
botão Browse for File.
34
Com esse procedimento, você escolherá o destino desse link. Você também pode digitar o
caminho no campo Link, do painel Properties.
Pronto! Você acabou de fazer um link para uma página. Dê um clique fora do texto e repare que
agora, o texto está na cor azul e sublinhado. Essa é uma característica padrão dos links.
Clicando no botão drop-down, você verá uma lista com 5 opções de alvo, caso a opção não
esteja ativada, clique sobre o link criado para ativá-la.
_blank e _new:: as duas opções tem a função de carregar a página em uma nova janela.
_parent: carrega a página em um frame ou janela do frame que contém o link.
_self: carrega a página no mesmo frame ou janela do link. Essa opção é a mesma da padrão.
_top: carrega a página em uma janela maximizada em toda a tela (fullscreen), removendo todos
os frames.
Rollover Image
O Rollover Image, é uma opção muito conhecida do Dreamweaver. Quando você acessa um site
e passa o mouse por cima de uma determinada imagem e a mesma se altera, esse efeito
chamamos de Rollover Image. Este efeito funciona por meio de substituição de uma imagem por
outra.
Clique no menu Insert, Image Objects e selecione a opção Rollover Image.
35
A caixa de diálogo Insert Rollover Image será aberta.






Image name: Um nome para seu Rollover.
Original image: Primeira imagem que irá aparecer.
Rollover image: Imagem que irá aparecer quando você passar o mouse por cima.
Preload rollover image: Marque esta opção para que quando a página carregar, sua
outra imagem seja carregada também.
Alternate text: Texto que irá aparecer junto à imagem.
When clicked, Go to URL: Link da sua imagem.
Preencha o campo Image name com o nome que desejar. Este é um nome de identificação
desse objeto.
Clique sobre o primeiro botão Browse..., e escolha a imagem desejada e clique em OK.
Clicamos no próximo botão Browse... para selecionarmos a outra imagem que aparece quando o
cursor do mouse estiver posicionado sobre o objeto.
O campo When clicked, Go to URL representa o endereço de outra página, a qual será aberta
após o clique no botão.
Frames e Iframes
Às vezes é interessante manter uma parte da página fixa e outra parte variável. Isso é possível,
dividindo-se a página em partes, isto é, em Frames. Esse recurso, apesar de pouco popular,
continua sendo uma boa alternativa.
A principal vantagem de uma página com frames é que podemos fazer links em um deles e
carregar o conteúdo linkado no outro.
Clique no menu File no Dreamweaver e selecione a opção New. Na caixa de diálogo New
Document, selecione Page from Sample e, em Sample Folder escolha Frameset. Serão
apresentados 15 tipos de disposição de frames. Escolha Fixed Top, Fixed Bottom e clique no
botão Create.
36
O documento criado apresenta 3 frames: o topo (TopFrame), o principal (MainFrame) e o
inferior (BottomFrame).
Para salvar este documento, utilize o comando Save Frameset As.
Salvamos o arquivo com a descrição frames.html dentro da sua Sua Pasta e da subpasta
Dream_CS5.
Primeiramente faremos com que esse documento comporte-se como três páginas distintas, mas
em conjunto. O frame do topo abrirá uma determinada página, o frame inferior outra e o
principal também.
Escolha a opção Frames, do menu Window.
Você verá o painel Frames ativado. Aqui, você pode selecionar o frame desejado clicando com o
mouse.
Após selecionar o topFrame, no campo Src do painel Properties, especifique o caminho para o
arquivo desejado.
37
Confirme a caixa de diálogo que surge, clique em Sim para fazer a cópia do arquivo que está
sendo inserido e na próxima caixa, clique em Cancelar.
Selecione agora o bottomFrame pelo painel Frames. No campo Src, indique o caminho para o
outro arquivo.
Arquivo inserido.
Selecione agora o mainFrame pelo painel Frames. No campo Src, indique o caminho para o
arquivo index.html.
Teste sua página. Veja que o topFrame e o bottomFrame ficam estáticos, enquanto o
mainFrame possui uma Barra de Rolagem vertical e horizontal.
Integração com o Flash
Atualmente, os browsers têm a capacidade de exibir inúmeros tipos de arquivo de imagem, som
e multimídia. Essa variedade contribui muito para a criação de páginas cada vez mais criativas.
Uma das tecnologias multimídia mais usadas em páginas para web é o Flash. Esses arquivos
permitem animação, som e interação, aumentando a interação com o usuário e melhorando a
atratividade da página.
Podemos inserir facilmente imagens e conteúdo criados com o Adobe Flash em um documento
do Dreamweaver. Você também pode editar uma imagem ou arquivo SWF no editor original
depois de inseri-los em um documento do Dreamweaver.
38
Para inserir um arquivo Flash, vá até o menu Insert, opção Media e escolha SWF. Você também
pode fazê-lo através da Barra de Ferramentas Common, no botão Media : SWF.
Você provavelmente verá uma mensagem avisando que se deve salvar o documento antes.
Clique em OK e na caixa de diálogo aberta, digite a descrição desejada e clique em Salvar.
Na caixa de diálogo Select SWF, procure pelo arquivo, selecione-o e clique no botão OK.
Clicando em OK, surge a mensagem confirmando se quer salvar uma cópia do arquivo que está
sendo inserido, clique em Sim, mantenha localizada a Sua Pasta e depois confirme clicando no
botão Salvar.
Após salvar o arquivo, surgirá a caixa de diálogo Object Tag Accessibility Attributes, clique
somente no botão OK, pois não vamos colocar título.
Como todo componente, o Flash tem suas propriedades específicas. Repare no painel Properties
ao selecionar o componente.
39
Salve as alterações do arquivo e teste sua página para ver como ficou. A animação deve ser
exibida imediatamente.
Tabelas
O uso de Tabelas em documentos HTML é muito útil na apresentação de informações de
maneira organizada.
Tabelas são objetos que inserimos nos arquivos para organizar a estrutura de uma página. Cada
Tabela é formada por um número N de linhas, que pode ser dividida por um número N de
colunas, chamadas de Células.
É uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos. Embora
as colunas não sejam, em geral, especificadas explicitamente no código HTML, o Dreamweaver
permite que você manipule colunas, bem como linhas e células.
Posicione o cursor na célula referente a imagem desejada.
Feito isso, clique sobre o botão Table, no painel Common.
Na caixa de diálogo Table, temos diversas opções que podemos definir antes de inserir a tabela:
seu tamanho, o número de linhas e colunas, a espessura da borda, etc. Vejamos as opções de
edição mais utilizadas.
40
Table size:
Rows: número de linhas.
Columns: número de colunas.
Border thickness: espessura da borda. Se definirmos o valor 0, quando visualizada no browser, a
tabela não exibirá suas linhas.
Cell padding: define o espaço entre a célula e seu conteúdo.
Cell spacing: define o espaço entre cada uma das células.
Table width: o primeiro campo define o tamanho da tabela e o segundo se esse valor deve ser
em pixels ou percent (porcentagem), em relação ao documento.
Accessibility:
Caption: neste campo, podemos definir um nome para cada tabela, podendo então diferenciálas entre si.
Header:
As opções contidas em Header permitem que se defina qual será o cabeçalho da tabela, ou seja,
quais as células que receberão formatações diferentes das demais.
Preencha a caixa de diálogo:
Clique sobre o botão OK. A tabela será inserida na posição definida pelo cursor.
Na caixa de diálogo, informamos que a tabela deverá ser formada por 1 linha e 1 coluna.
Definimos o valor 140 para o seu tamanho.
A tabela também não terá sua borda visível e não haverá nenhum espaço entre as células e seus
conteúdos por isso os demais campos estão com valor 0.
41
Para retirar a seleção de uma tabela, basta clicar em qualquer ponto da página.
Sempre que desejarmos fazer algum tipo de alteração em uma tabela, devemos selecioná-la
antes. Existem duas formas de se fazer isto: clicando sobre a borda da mesma ou ativando um
pequeno menu de opções.
Com a tabela selecionada, formatamos o seu alinhamento.
No painel Properties, clique sobre o botão drop-down do campo Align e escolha a opção Center.
Mesmo após a inserção de uma tabela, com número de linhas e colunas definidas, ainda
podemos inserir mais algumas ou até mesmo excluí-las.
Posicione o cursor na célula da tabela e pressione a tecla <Tab>. Veja que uma linha será
adicionada, respeitando a formatação da tabela.
Clicando com o botão direito do mouse sobre uma das células será exibido um menu. Na opção
Table temos disponível um submenu com algumas das formatações disponíveis.
Para inserir mais uma coluna na tabela, escolhemos a opção Insert Column, do menu de opções
citado acima.
42
Ainda podemos definir o número de linhas e colunas através do painel Properties.
Selecione a tabela, utilizando uma das formas mostradas anteriormente, altere o valor do
campo Colls para 5 e pressione <Enter> para confirmar.
É comum, em determinados casos, a necessidade de transformar várias células em uma só, para
chegar a determinados alinhamentos da tabela. Este processo é chamado de Merge ou Mesclar.
Aprenderemos a mesclar uma célula para começar a inserir o conteúdo do site.
Selecione as seguintes células, como mostra o exemplo abaixo, clique sobre a primeira e com o
cursor pressionado, arraste até a última.
Com o intervalo de células selecionado, clique sobre o botão Merges selected cells using spans,
no painel Properties.
Após o clique, as células selecionadas tornar-se-ão uma só
.
43
AJAX Utilizando o Framework Spry
Uma das maiores novidades desde a versão CS3 é a capacidade de gerar páginas em AJAX, o
qual está ficando muito popular. O que é o AJAX?
Através do AJAX temos na verdade um sistema que gera uma página inicial e simultaneamente
recebe informações que são armazenadas para posteriormente utilizá-las. Clicando, por
exemplo, em um botão ou link, a demora à qual estávamos acostumados desaparece, pois o
próprio sistema usa as informações que possui e muda na própria página que está utilizando as
áreas que terão modificações.
O Gmail é um site que funciona desta forma, por exemplo.
Utiliza principalmente XML e JavaScript, mas como era de se esperar, desenvolver diretamente
um conteúdo AJAX demandaria um conhecimento profundo das tecnologias que o formam. Para
facilitar o trabalho, temos diversos frameworks (uma espécie de biblioteca de códigos) para criar
conteúdo AJAX. A Adobe possui o seu framework para criar conteúdo AJAX, chamado Spry.
Spry Menu Bar
A estrutura do Spry destina-se principalmente aos profissionais de design. Agora iremos
conhecer alguns elementos denominados Spry Widgets, que são na realidade elementos
principalmente de interface, como: menus tabs, etc, e que utilizam o framework Spry para
tornar mais interessante seu resultado visual.
A primeira opção que iremos conhecer é a Spry Menu Bar, uma Barra de Menus.
Na Barra Insert, aba Spry, clique sobre Spry Menu Bar.
Você poderá escolher dois layouts de menus, escolha o Horizontal e clique em OK.
Após o clique, o menu será inserido.
Selecione a parte de cima do menu (que possui uma aba azul com o texto Spry Menu Bar)
habilitando assim a opção Properties.
44
Vamos alterar o seu "nome", para isso apague o texto MenuBar1 e o substitua com a descrição
desejada.
Para alterar o nome destes menus, selecione o Item 1.
Visualize o campo Text, apague o Item 1, digite a descrição desejada e pressione <Enter>.
Outra opção do Framework Spry que pode ser bem aplicada é a Spry Tabbed Panels.
Em um novo documento, clique sobre a opção Spry Tabbed Panels.
Selecione o Spry Tabbed Panels e observe suas propriedades.
Em Properties temos a opção Panels onde é exibida a lista de guias já inseridas.
Para alterar o nome da guia, selecione-a no documento. Após a seleção, digite a informação.
Logo abaixo podemos visualizar um campo que contém o texto Content 1, neste campo vamos
inserir um pequeno texto.
45
Com a guia ativa, vá até o documento e selecione a palavra Content 1.
Ao selecionar, digite o conteúdo que deseja.
Criando Páginas para o Site
Para começarmos a criação de páginas no site, criamos um template para que o processo de
criação seja mais simples e prático.
Após abrir o arquivo html desejado, criaremos agora, as regiões editáveis (Editable Regions).
Clique com o botão direito do mouse sobre a região desejável, vá até a opção Templates e
escolha New Editable Region.
Caso apareça a janela de aviso do Dreamweaver, clique sobre o botão OK. Defina o nome e
clique em OK.
46
Após a criação da região editável, modifique o seu alinhamento no painel Properties. Altere a
propriedade Vert para o tipo Top e apague a descrição.
A seguinte tabela foi inserida.
Em nosso exemplo, clicamos em uma das células da tabela e alteramos a propriedade H (Altura)
no painel Properties para 330 pixels.
Clicamos dentro de cada uma das três colunas e alteramos a largura na propriedade W de
acordo com as medidas: 244px - 25px - 429px.
Alteramos também o alinhamento interno das células para: Vert-Top.
Criamos três links, os mesmos foram utilizados a partir da lição Criando o menu (Hotspot Image
Map) que define uma área sobre uma figura onde é possível criar o link.
Clique no botão Rectangle Hotspot Tool, selecione o botão Home e confirme a caixa de
mensagem.
47
Em seguida, no campo Link, digite index.html e tecle <Enter> para confirmar.
Clique novamente na opção Rectangle Hotspot Tool e selecione o botão com a descrição
Destaques. Ao terminar, no campo Link digite destaques.html.
Faça o mesmo com o botão Contato e no campo Link digite contato.html.
Podemos também selecionar o objeto com a ferramenta Rectangle Hotspot Tool e depois
localizar o arquivo que servirá como link através do botão Browse for File no painel Properties.
Agora, vem o passo mais interessante: transformar a página em um modelo, ou melhor, em
Template.
No menu File e escolhemos o comando Save as Template....
Na caixa de diálogo Save As Template, no campo Save as, mantenha o nome escolhido.
Selecione no campo Site o seu código de matrícula que criamos na lição de configuração do
Manage Sites e clique em Save.
Na janela Dreamweaver - Update Links?, clique em Sim.
O Dreamweaver criou a pagina.dwt, que é um template, colocando-o na respectiva lista. Agora,
que já temos o nosso template, basta criarmos nossas páginas a partir dele. Para isso, usaremos
o recurso Novo a partir do Template.
No menu File, clique em New, para criar um novo arquivo. Na caixa de diálogo New Document,
clique na guia Page from Templates.
Você verá a lista de sites cadastrados na coluna Template for e os templates pertencentes a
esses sites na coluna ao lado. É possível também, ter a visualização do seu template. Selecione o
nome escolhido.
48
O documento criado contém as mesmas características do template. Veja que é especificado a
partir de qual template ele foi criado no canto superior direito. Repare também, que é mostrada
a área editada (regiao), criada anteriormente.
Digite as informações que desejar.
Este arquivo foi salvo com a descrição destaques.html.
Caso apareça a caixa de mensagem confirmando a cópia dos arquivos contidos na página que
está sendo salva, clique em Copy e depois em OK na mensagem seguinte.
Se desejar, altere o título da página.
49
Formulário
Formulário é um recurso que permite coletar informações de um usuário e enviá-las a um
determinado e-mail. É muito útil e é usado por empresas para pesquisas, formulários de pedidos
e interfaces de busca.
É uma maneira muito prática e inteligente de se comunicar com o usuário, permitindo que ele
receba informações posteriormente.
Nele, o usuário inserirá alguns de seus dados e os enviará para um determinado e-mail.
Agora, vamos habilitar as ferramentas para o formulário. Na Barra de Ferramentas, clique na
guia Forms.
Ferramentas utilizadas na construção do formulário.
1. Form: cria uma área na página, que será destinada ao conteúdo do formulário.
2. Text Field: cria uma área que aceita qualquer tipo de texto. O texto digitado pode ser
exibido como uma linha simples, múltiplas, marcadores ou asteriscos (com a finalidade
de proteger senhas).
3. Hidden Field: permitem armazenar informações (como o destinatário dos dados do
formulário ou seu assunto) que não são relevantes ao usuário, mas que serão utilizadas
pelo aplicativo que processa o formulário.
4. Textarea: tem a mesma função do Text Field, mas permite uma área maior de texto
multilinhas.
5. Checkbox: permite a escolha de múltiplas respostas em um único grupo de opções, não
cancelando as anteriores.
6. Checkbox Group: permite a escolha de múltiplas respostas em dois grupos de opções,
não cancelando as anteriores.
7. Radio Button: representa opções exclusivas. A seleção de um dos botões do grupo
cancela a seleção de outros.
8. Radio Group: insere um grupo de Radio Buttons.
9. Select(List/Menu): permite criar uma lista de opções.
10. Jump Menu: permite inserir um menu, no qual cada opção vincula-se a um documento
ou arquivo (links).
11. Image Field: pode ser utilizado no lugar de um botão de ação, exercendo a mesma
tarefa.
12. File Field: permite que o usuário procure por arquivos que estejam em sua máquina,
carregando-os como dados do formulário. Muito utilizado por sites que disponibilizam
contas de e-mail. É o campo utilizado para anexar arquivos às mensagens.
13. Button: insere botões de ação, realizando tarefas quando são clicados.
14. Label: especifica um rótulo.
15. Fieldset: especifica um rótulo em uma área de formulário.
50
O segredo de um formulário bem organizado está na construção de uma tabela, pois ela ajustará
com eficiência os componentes Forms.
Inicialmente, crie a área para o formulário clicando no botão Form.
Com o cursor dentro do Form, pressione a tecla <Enter>, para que possamos visualizar o
formulário e a tabela que será inserida.
Em Properties, na opção Vert, selecione Top
.
Pressione a seta de direção do teclado para cima (
primeira linha.
), para que o cursor fique posicionado na
Criamos a tabela conforme especificações abaixo e centralizamos o cursor como align center, na
região destinada ao formulário.
- 429 pixels de largura
- 8 linhas
- altere o valor do CellPad e CellSpace para 0
- cores: #99CCFF e #CCCCFF
Foi utilizada a opção Checkbox, da barra de ferramentas Forms.
51
O componente Checkbox é usado geralmente para marcação de múltiplas opções, ou seja,
permite que você marque todas ou nenhuma delas. Veja abaixo, suas propriedades no painel
Properties. Para isso, basta selecionar uma delas.
Propriedades do componente Text Field.
Para inserirmos os botões que enviarão os dados para um e-mail, clicamos no interior da última
linha, inserimos uma tabela com 2 colunas e com o alinhamento centralizado, clicamos na opção
Button.
Temos dois botões, um para enviar os dados e o outro para "resetar" o formulário, ou seja,
apagar todas as informações escritas.
Clique no primeiro botão e observe suas propriedades.
Altere as propriedades para cada um deles.
O passo final agora, é definir para onde e como os dados irão após o envio. Para isso, selecione o
formulário para que apareçam suas propriedades.
52
Digite as propriedades conforme a figura nos campos Action e Enctype.
Action: é a ação, ou seja, o que o formulário vai fazer. No caso, enviar os dados para um email(mailto:).
Method: determina como o navegador enviará os dados do formulário. O método POST faz com
que os dados do formulário sejam transmitidos em uma transação em separado (uso do
Outlook, por exemplo), enquanto o GET obriga os dados do formulário a serem anexados ao URL
do script. Um primeiro exemplo da prática desses métodos é quando se transmite a senha de
um usuário para um servidor autenticar. Se o formulário utiliza o método GET, a senha passa
através da URL. Sendo assim, qualquer pessoa que tenha acesso ao computador do usuário
poderá descobrir a senha.
Enctype: é o modo como serão mostrados os dados enviados no e-mail. Usando text/plain, os
dados aparecem separados por linhas.
Agora, salve e teste sua página no browser! Preencha os dados e teste os botões.
Clicando em Enviar, os dados irão para o e-mail especificado anteriormente.
53
Criando o menu (Hotspot Image Map)
Temos que realizar a ligação entre as páginas, ou seja, os links.
Utilizamos um recurso chamado Mapeamento de Imagem com Hotspot, que consiste em definir
uma área sobre uma figura, possibilitando a criação de um link.
Clique sobre a figura referente ao botão Destaques. Repare que no painel Properties, existem
algumas opções destinadas ao Map.
Pointer Hotspot Tool: manipula as regiões criadas.
Rectangle Tool: cria regiões retangulares.
Circle Tool: cria regiões circulares.
Polygon Tool: cria regiões poligonais.
Após ter selecionado a imagem, clique no Rectangle Hotspot Tool e faça uma região sobre a
palavra.
Veja que, logo após, o painel Properties já exibe as opções para definição do destino do link.
Preencha o campo Link com destaques.html ou localize o arquivo pelo ícone.
54
Evento com Janela (JavaScript)
O que é JavaScript?
JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HyperText
Mark-up Language).
Os parágrafos de lógica do JavaScript podem estar "soltos" ou atrelados à ocorrência de
eventos.
Os parágrafos soltos são executados na sequência em que aparecem na página (documento) e
os atrelados a eventos são executados apenas quando o evento ocorre.
Para inserir parágrafos de programação dentro do HTML, é necessário identificar o início e o
final do código JavaScript, da seguinte forma:
<SCRIPT>
códigos
</SCRIPT>
Este procedimento pode ser adotado em qualquer local da página. Entretanto, para melhor
visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início
do documento através da criação de funções a serem invocadas quando fizerem necessárias
(normalmente atreladas a eventos).
No arquivo index.html, acrescentamos um código Script que irá chamar uma outra janela. Este
pop-up conterá alguma informação adicional do site.
Exiba o código HTML de seu documento, clicando na guia Split ou Code.
Localize a tag </style>. Posicione o cursor depois dele e tecle <Enter> para criar uma nova linha.
Com o cursor posicionado abaixo da palavra </style>, digite o seguinte código:
55
Vamos entender o JavaScript digitado:
<script language="JavaScript">: abertura do código JavaScript.
window.open: indica qual será a função do código; neste caso abrir uma janela.
("pop_up.htm","popup",'scrollbars=no,width=245,height=245'): caminho (arquivo), nome da
janela e opções (sem barra de rolagem, largura e altura).
</script>: fecha o código JavaScript.
O arquivo pop_up.html e a imagem pop_up.jpg copiamos para a pasta images.
Visualize sua página index.html, através do browser e veja o resultado.
Publicando o Site na Internet
Após finalizar completamente o site, você deve disponibilizá-lo na Internet. Ainda mais, se você
estiver construindo um site para uma empresa e o cliente tiver pressa de ver os resultados.
No caso da criação de site para simples divulgação pessoal, sem nenhum objetivo comercial,
pode-se utilizar um dos diversos sites de hospedagem gratuita atualmente disponíveis.
É preciso verificar com o provedor no qual o site será hospedado a forma adotada para envio
dos arquivos. A maioria utiliza o envio por meio do protocolo FTP, pelo qual, você compartilha
seus arquivos com o provedor de uma maneira mais rápida através de um programa.
Se a página estiver sendo desenvolvida para uma empresa (cliente), entre em contato com o
provedor da mesma, para que os arquivos sejam enviados.
Mas lembre-se de que as páginas devem sempre ser atualizadas de acordo com as necessidades
da empresa que o contratou, pois os internautas sempre estão à procura de novidades. Por isso,
quanto mais diversificado e interessante for o site, mais visitas ele terá.
56
Para ter um espaço disponível em um destes sites, basta que você se cadastre e aceite os termos
de contrato, colocando em sua página apenas arquivos e imagens aceitos por ele.
Utilizamos o site http://www.xpg.com.br. No lado direito da janela, clique na opção Publicar
HTML grátis.
É necessário que seja realizado um cadastro para a publicação do site que será feito através do
Dreamweaver. Além da criação da conta é preciso fazer sua ativação através do e-mail para que
o login seja reconhecido no site.
Informe o Login que você desejar e seu E-mail.
Em Categoria selecione a opção que desejar, digite a senha e confirme-a.
Em seguida, marque a opção Concordo com o Termo de Serviço e clique em Cadastrar.
Após o clique, irá surgir a tela de conclusão do cadastro.
Em seguida, abra o seu e-mail cadastrado para a ativação do site e clique na mensagem da
Equipe XPG. Selecione o link de validação, copie-o, cole o link na Barra de Endereços e pressione
a tecla <Enter>.
Você será redirecionado para a página do XPG.
Informe o Login, ou seja, seu nome de usuário e a Senha.
Observe o seu endereço para acessar o site após a publicação.
Agora, abra o Dreamweaver e o arquivo index.html caso tenha fechado. Na guia Files, clique
sobre a opção Expand to show local and remote sites.
57
Observe que uma nova janela surge do Dreamweaver, podemos observar que ela está dividida
em duas partes a Local Files (seus arquivos locais) e a Testing Server (onde serão armazenados
os arquivos do site). Caso não esteja visualizando a opção Testing Server, clique em Testing
Server.
Agora definimos as configurações de FTP do site, clique no link define a testing server.
A caixa Site Setup for 0000 será aberta. Em Site Name informe Air Turismo e localize o caminho
Local Site Folder da Sua Pasta, este local indica onde serão salvos os arquivos do site.
Selecione a opção Servers e clique no botão Add New Server.
Em seguida, em Server Name, informe Air Turismo e preencha os campos.
58
Clique em Save, ao retornar a caixa Site Setup for Air Turismo, marque Remote, caso não esteja.
Clique em Advanced Settings, em Local Info já estará selecionada a pasta padrão de imagens.
Clique no botão Save.
Pronto, agora para realizar a conexão com o servidor FTP do XPG, clique sobre a opção Connects
to remote host.
Selecione todos os arquivos do Local Files, pois iremos transferi-los para o Testing Server. Após
selecionar, clique sobre o botão Put File(s) e para completar esta ação, clique no botão OK.
59
Assim, inicia-se a transferência dos arquivos.
Agora basta acessar seu site já publicado na web, para isso, abra o Internet Explorer e digite o
endereço criado por você.
Caso você queira tirar sua página do ar, basta excluir os arquivos do Remote Site, utilizando-se
da opção Get File(s).
60