Iniciando e conhecendo o Dreamweaver CS3

Dreamweaver CS3
Sumário
Iniciando e conhecendo o Dreamweaver CS3 .................................................................................. 1
Ajustes de Preferência...................................................................................................................... 3
Criando um Novo Arquivo .............................................................................................................. 10
Salvando e Visualizando um Arquivo ............................................................................................. 12
Trabalhando com Imagens ............................................................................................................. 16
Iniciando a Construção do Site - Conceitos e Diretórios ................................................................ 17
Exportando arquivos através do Photoshop .................................................................................. 18
Gerenciador de Arquivos - Manage Sites ....................................................................................... 20
Estilos CSS ....................................................................................................................................... 22
Trabalhando com Layers ................................................................................................................ 26
Hyperlinks ....................................................................................................................................... 29
Rollover Image ................................................................................................................................ 31
Frames e Iframes ............................................................................................................................ 34
Integração com o Flash (SWF) ........................................................................................................ 40
Design com Tabelas ........................................................................................................................ 43
AJAX Utilizando o Framework Spry ................................................................................................ 44
Criando Páginas para o Site ............................................................................................................ 47
Formulário ...................................................................................................................................... 50
Criando o menu (Hotspot Image Map)........................................................................................... 55
Criando o menu (Hotspot Image Map)........................................................................................... 56
Evento com Janela (JavaScript) ...................................................................................................... 57
Publicando seu site na Internet ...................................................................................................... 59
Iniciando e conhecendo o Dreamweaver CS3
Para iniciar o Dreamweaver CS3, clique no menu Iniciar, Todos os programas, opção Adobe
Design Premium CS3 e, em seguida, Adobe Dreamweaver CS3.
Após alguns instantes será iniciado o Dreamweaver CS3 com sua tela inicial.
1
Com o Dreamweaver iniciado, podemos visualizar a Start Page (Página Inicial).
2
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 antes criado 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.
Create from Samples: podemos criar outra página baseada em modelo preexistente.
Ajustes de Preferência
Para obter melhor resultado nos trabalhos do Dreamweaver CS3, podemos personalizar suas
configurações na janela de preferências.
Para acessar, escolha o menu Edit, e clique sobre a opção Preferences, pode-se utilizar a tecla de
atalho <Ctrl>+<U>.
3
Janela Preferences.
Preferências - General
4
Principais componentes da opção General.
● 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.
● 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.
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.
5
Com essa opção marcada, ela utiliza os comandos de formatação lógica, se desmarcada, usa a
física.
● Maximum number of history steps: Esse valor define a quantidade de passos necessária que
será permitido voltar atrás, seja usando o comando Edit, Undo(+), ou usando um painel
chamado histórico. Podendo ser um valor entre 2 e 99.999.
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.
6
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 (do trecho de
comando)) e se negrito (B), itálico (I) ou sublinhado (U).
● Default background: Nessa área é escolhida a cor padrão do fundo da janela do código.
Preferências - Copy and Paste
7
Aqui definimos como se comportarão os elementos quando copiados de outro programa e
colados no Dreamweaver na visualização Design.
● Pode-se escolher entre as opções Text Only (cola apenas o texto), Text with structure (cola os
textos e sua estrutura como parágrafos, por exemplo, mas não sua formatação), Text with
structure plus basic formatting (além do texto e da estrutura, também cola algumas
formatações básicas HTML) ou Text with structure plus full formating (cola tudo com
formatação completa HTML e elementos de folhas de estilo CSS).
● A opção Retain line breaks deixa as quebras de linha no texto a ser colado.
● A opção Clean up Word paragraph spacing tira os espaços adicionais entre os parágrafos do
texto colado.
Preferências - Fonts
Nessa área podemos configurar as fontes utilizadas no programa. ● Font settings: Escolhemos
nessa área o tipo de codificação a ser utilizado, marcando uma das opções da lista.
8
● Proportional font: Seleciona a fonte usada normalmente quando digitamos na tela do
Dreamweaver e seu tamanho.
● Code View: Nessa opção definimos a fonte e o tamanho utilizados na visualização de código
do Dreamweaver.
Preferências - New Document
Aqui ajustamos as opções para novos documentos do Dreamweaver. Entre algumas, temos:
● Default document: Escolhemos os tipos 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.
9
Criando um Novo Arquivo
Ao iniciar o Dreamweaver CS3, 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.
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.
No Start Page, clique sobre a opção Html, de Create New.
Após o clique, um novo arquivo é criado e exibido na área de trabalho do Dreamweaver.
10
Como em um editor de textos qualquer, podemos escrever e apagar os textos digitados, bem
como editá-los, alterando o tamanho e o estilo da fonte, aplicando efeitos como Negrito, Itálico,
etc.
Para editar um texto, é necessário que o mesmo esteja selecionado. Após a seleção, o painel
Properties habilita suas funções para edição de textos.
Format: formata o parágrafo com estilos de textos e alinhamentos predefinidos pelo
Dreamweaver.
Font: possui uma lista de fontes para formatação do texto.
11
Style: CSS são estilos prontos que podemos criar em documentos separados e utilizá-los em
nosso projeto.
CSS: abre o Painel de CSS do Dreamweaver.
Bold e Italic: permitem aplicar a formatação em Negrito e Itálico, respectivamente.
Text Color: Paleta de cores que permite aplicar cor ao texto.
Alinhamento de 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.
Unordered List: aplica marcadores ao(s) parágrafo(s) selecionado(s).
Ordered List: aplica numeração ao(s) parágrafo(s) selecinado(s).
Text Indent: define um recuo de parágrafo.
Text Outdent: retira os recuos de parágrafo aplicados.
Salvando e Visualizando um Arquivo
Todo e qualquer arquivo criado no Dreamweaver, para ser visualizado em um Browser, deve
antes de tudo, ser salvo.
Para isso, clique no menu File, opção Save.
12
Após o clique, será exibida a caixa de diálogo Salvar como. Nesta caixa, devemos informar o
nome do arquivo e o local onde ele será salvo.
Para visualizar o arquivo no Internet Explorer (IE), ainda no Dreamweaver, com seu documento
em uso, clique sobre o botão Preview/Debug in browser.
Após o clique, será exibido um submenu. Escolha a opção Preview in iexplore. Note, que
também podemos acionar o comando, utilizando a tecla de atalho <F12>
13
Após o clique, o IE será exibido, tendo como conteúdo a página Html criada por você.
Uma novidade que pode ser encontrada no Dreamweaver CS3 é 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.
Para visualizar um arquivo utilizando o Device Central, clique em Preview/Debug in browser e
escolha a opção Preview in Device Central.
Será iniciado o Adobe Device Central CS3.
14
O texto e o título são visualizados no dispositivo móvel.
15
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 feita pelo usuário.
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 adicionar uma imagem ao seu documento, clique sobre o botão drop-down, da opção
Images, no painel Insert, depois em Image, selecione o arquivo desejado e clique em OK.
Imagem inserida na página e sendo visualizada no browser.
16
Iniciando a Construção do Site - Conceitos e
Diretórios
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.
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.
Criando a pasta.
17
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! Também podemos inserir dados nas
linhas da página, sem uma estrutura mais complexa.
Além destas opções, podemos também "desenhar" ou desenvolver um layout em um software
de edição de imagens, como o Adobe Fireworks ou 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 topo, etc. Este arquivo é então exportado como
Html, com uma pré-estrutura de tabelas montada.
Exemplo de estrutura criada no Photoshop:
18
Definidas as áreas a serem recortadas e salvas através de exportação, com o comando Save for
Web & Devices.
19
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.
O Dreamweaver possui um gerenciador de arquivos que nos permite ter acesso, de uma 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 atualizá-los
via web, em seu servidor, sem a necessidade de um outro programa para tal.
No Panel Group, exiba a guia Files do painel Files, clicando sobre seu nome.
Panel Files:
20
Expandindo o painel Files, visualizamos outras opções:
21
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.
Estilos CSS
O CSS (Cascading Styles Sheets - Folhas de Estilo em Cascata) é um "estilo" de formatação que
permite uma "declaração global", exigindo que um ou mais componentes sejam configurados
como você quiser, com uma única especificação.
22
Quando, em uma página, houver algum texto ou componente, do lado direito da tela do
Dreamweaver, haverá um painel chamado CSS, onde existirá uma guia chamada CSS Styles, que
estará habilitada. Ali são editados os estilos CSS.
● Attach Style Sheet: adiciona ao documento um estilo já pronto (arquivo .CSS). Vamos explicar
esse procedimento mais adiante.
● New CSS Rule: cria um estilo através de uma caixa de diálogo.
● Edit Style...: edita o estilo criado através da caixa de diálogo.
● Delet CSS Rule: apaga o estilo selecionado na lista
Clicando em New CSS Style, você cria um estilo a partir da caixa de diálogo New CSS Style.
23
O Selector Type define o tipo de estilo que será escolhido:
● Class: estilo a ser aplicado a cada tag de script contido em sua página. Forma um conjunto de
definições para todo o documento.
● Tag: escolhe uma tag para uma propriedade específica, listado na caixa Name:.
● Advanced: específico para efeitos com o mouse sobre links e botões.
O campo Define in, define se o estilo CSS será salvo num arquivo à parte ou incorpado ao código
da página.
Definindo as opções da New Style CSS, na nova caixa de diálogo que aparece, você deve
especificar as propriedades do seu estilo e a qual componente ele aplicar-se-á.
24
Depois, o estilo fica registrado na guia CSS Style.
No código HTML, você também pode observar a ocorrência do estilo.
Para formatar um texto, selecione-o e aplique o estilo pela barra Properties.
25
Trabalhando com Layers
Layer (ou camada) é um elemento de páginas HTML que você pode posicionar em qualquer
lugar, pois, diferentes 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 uns sobre os outros, ocultar alguns enquanto mostra outros e movê-los pela tela.
Exemplo de layout:
26
Para inserir uma layer, vá até o menu Insert, opção Layout Objects e escolha AP Div. Você
também pode inseri-las através da barra Insert, opção Layout e ferramenta Draw AP Div.
27
Inserindo pelo menu, a layer aparece com um tamanho específico. Se você utilizar o botão Draw
AP Div, poderá clicar e arrastar, para definir sua área.
28
O painel Properties também apresenta 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.
É possível aplicar um link em um texto digitado, selecionando e especificando o seu caminho,
pela barra Properties.
Após a configuração, é só clicar no texto com o link, para que ele seja enviado ao destino
estabelecido.
29
Existem ainda as configurações de alvo (Target).
_blank: carrega 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.
30
_top: carrega a página em uma janela maximizada em toda a tela (fullscreen), removendo todos
os frames.
É possivel ainda, mudar a aparência dos links, alterando sua cor e, se necessário, desabilitando o
sublinhado. Isso é feito através da caixa de diálogo Page Properties.
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.
Para iniciar o Rollover Image basta criar um novo documento no Dreamweaver; vá até o menu
Insert, Images Objects e clique sobre a opção Rollover Image.
31
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.
32
Alternate text: Texto que irá aparecer junto da imagem.
When clicked, go to URL: Link da sua imagem.
Com os campos já preenchidos, pode-se visualizar o Rollover criado:
33
Frames e Iframes
Às vezes é interessante manter uma parte da página fixa e outra 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.
Observe nesse exemplo, que a página está dividida em duas partes. Na parte do lado esquerdo é
colocado geralmente o menu do site.
No lado direito, é mostrado geralmente o conteúdo da página escolhida. Estas partes são
chamadas de Frames. Neste caso, existem dois Frames verticais.
A principal vantagem de uma página com frames é que podemos fazer links em um deles e
carregar o conteúdo linkado no outro.
Criando um novo documento no Dreamweaver é possível escolher a categoria Framesets, além
de um dos 15 tipos de disposição de frames.
34
Na criação de uma página com frames, cada um tem sua respectiva propriedade. Clicando nas
partes do painel Frames, seleciona-se os frames, habilitando-se assim, suas propriedades, no
painel Properties.
35
Cada frame poderá abrir um documento HTML diferente.
Outra forma para trabalhar com frames é usando os frames internos na página, que são como
áreas designadas dentro da página que recebem outras páginas HTML como conteúdo. Eles são
conhecidos como Iframes.
O Iframe não aparece na parte design do Dreamweaver, ou seja, mesmo configurando suas
opções, só verá o resultado ao testar no navegador.
Para começar a configuração utilize a opção Tag Chooser.
36
Janela Tag Chooser com as categorias dividias em tags.
Opção Iframe selecionada.
37
O Tag Editor - iframe, é a janela em que podemos editar diversos atributos da tag.
Preencha os campos da janela Tag Editor - iframe.
38
No Dreamweaver na parte de Design nada ocorre, entretanto na parte Code View temos o
código desse comando HTML já inserido e configurado.
Para visualizar o resultado obtido teste a página utilizando IE.
39
Integração com o Flash (SWF)
Uma das tecnologias multimídia mais usadas em páginas para web, ultimamente, é o Flash.
Esses arquivos permitem animação, som e interação, aumentando a interface com o usuário e
melhorando a atratividade da página.
O Dreamweaver CS3 tem uma ótima integração com o Flash. Inserir um arquivo Flash em uma
página, é tão fácil como uma figura qualquer.
Para inserir um componente Flash, vá até o menu Insert, opção Media e escolha Flash. Você
também pode fazê-lo através da barra de ferramentas Common, escolhendo o botão
Media:Flash.
40
Componente inserido.
41
Suas propriedades específicas.
Teste da página.
42
Design com Tabelas
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.
Nas linhas e células de uma tabela, podemos incluir textos, imagens, etc, de uma forma simples
e mantendo alinhamento e organizações desejados.
Abrindo o arquivo gerado pelo Photoshop, vemos que ao apagar as imagens, existe uma
estrutura de células. Essa estrutura obedece a divisão criada com a ferramenta Slice, no
Photoshop.
Levando em consideração que a imagem ocupa todo o espaço da célula, como poderíamos
então, incluir um texto nesta célula ou até mesmo outros objetos, sem comprometer o layout
da página?
As imagens existentes em cada uma das células podem ainda, ser aplicadas como plano de
fundo (Background), ou seja, ao invés de aplicar uma cor na célula, definimos uma imagem e
desta forma, iremos apagá-la da estrutura
43
No exemplo abaixo, as imagens brancas foram retiradas da estrutura e foi definido um plano de
fundo para inserção de outros elementos.
AJAX Utilizando o Framework Spry
O AJAX está ficando muito popular com uma velocidade poucas vezes vista antes na web. 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.
Gmail é um site que funciona desta forma, por exemplo.
Para utilizar o Spry Menu Bar, vá até a opção Insert, guia Spry, clique sobre Spry Menu Bar.
44
Janela Spry Menu Bar.
Ao escolher o layout do menu, será inserido ao Dreamweaver.
45
Sub-menus adicionados aos menus.
Para melhor visualização do menu criado, o resultado pode ser executado pelo Internet
Explorer.
46
Criando Páginas para o Site
Um site com várias seções é equivalente à várias páginas criadas e linkadas umas às outras. A
padronização de um site é um fator importante. O Dreamweaver possui um recurso de
contrução de páginas modelo, chamado Template. Cria-se um layout e salva-o como modelo.
47
Depois, cria-se as regiões editáveis (Editable Regions) onde somente ali poderão ser feitas as
modificações.
48
Após a criação do template, basta criar as páginas a partir dele.
49
Formulário
Formulário é um recurso que permite coletar informações de um usuário e enviá-las a um email. É muito útil, sendo usado por empresas para pesquisas, formulários de pedidos e
interfaces de busca.
Para criá-lo, na barra de ferramentas, clique na guia Forms.
Aparecerão as ferramentas destinadas à construção do formulário.
Form: cria uma área na página, que será destinada ao conteúdo do formulário.
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).
50
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.
Text Area: tem a mesma função do Text Field, mas permite uma área maior de texto multi-linha.
Check Box: permite a escolha de múltiplas respostas em um único grupo de opções, não
cancelando as anteriores.
Radio Button: representa opções exclusivas. A seleção de um dos botões do grupo cancela a
seleção de outros.
Radio Group: insere um grupo de Radio Buttons.
List Menu: exibem valores de opção dentro de uma lista que permite para os usuários selecionar
opções múltiplas.
Jump Menu: permite inserir um menu, no qual cada opção vincula-se a um documento ou
arquivo (links).
Image Field: pode ser utilizado no lugar de um botão de ação, exercendo a mesma tarefa.
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.
Button: insere botões de ação, realizando tarefas quando são clicados.
Label: especifica um rótulo.
Field Set: especifica um rótulo em uma área de formulário.
51
Cada componente tem sua propriedade específica. Veja o exemplo abaixo, com o componente
Text Field.
É necessário inserir um botão (Buttom) que tem a função de enviar os dados preenchidos.
52
Propriedades alteradas.
Para definir o e-mail de destino, altere as propriedades do campo do formulário.
Action: é a ação, ou seja, o que o formulário vai fazer. No caso, enviar os dados para um e-mail
(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
53
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.
Observe abaixo, o Formulário pronto, visualizado pelo browser. Clicando em Enviar, os dados
serão encaminhados para o e-mail especificado anteriormente.
Veja o resultado.
54
Importante: Você deve ter o Outlook configurado para enviar esses dados.
Criando o menu (Hotspot Image Map)
Mapeamento de Imagem com Hotspot é um recurso que consiste em definir uma área sobre
uma figura, possibilitando a criação de um link.
Ao selecionar uma figura, repare que na barra Properties, existem algumas opções destinadas
ao Map.
55
Pointer Hotspot Tool: manipula as regiões criadas.
Rectangular Tool: cria regiões retangulares.
Oval Tool: cria regiões circulares.
Polygon Tool: cria regiões poligonais.
Para criar uma região mapeada, após ter selecionado a imagem, clique em uma de suas
ferramentas e trace uma região sobre a figura.
Criando o menu (Hotspot Image Map)
Defina o caminho para o link, na barra Properties.
56
Link funcionando.
Evento com Janela (JavaScript)
JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HyperText
Mark-up Language).
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>
57
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 se fizerem necessárias
(normalmente atreladas a eventos).
JavaScript digitado.
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=270,height=230'): caminho (arquivo), nome da
janela e opções (sem barra de rolagem, largura e altura).
</script>: fecha o código JavaScript.
Veja o resultado do código acima>
58
Publicando seu site na Internet
Assim que seu site estiver pronto, 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.
Existem algumas maneiras de fazer isto.
Se a página for pessoal, ou seja, construída para você, é interessante que se entre em contato
com seu provedor de Internet, para que ele lhe forneça um espaço para a publicação. Depois
disso, é só enviar os arquivos para o provedor. Isto pode ser feito através de disquete, correio
eletrônico (e-mail) ou FTP.
Um dos métodos mais utilizados é por FTP, pelo qual, através de um programa, você
compartilha seus arquivos com o provedor de uma maneira mais rápida e segura.
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.
59
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á.
Existem alguns sites que disponibilizam para os internautas, um local para a publicação de sua
página, gratuitamente, como se fosse seu provedor de acesso. É claro que seu espaço será um
pouco limitado, variando de acordo com cada site.
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.
Aqui vai a lista de alguns sites com serviço de hospedagem.
FREEWAYWEBHOST
http://www.freewaywebhost.com
XPG
http://www.xpg.com.br
MRFREEHOST
http://www.mrfreehost.com
Para poder hospedar um site na Web, basta criar uma conta em algum site que ofereça este
serviço, e utilizar o opção Expand to show local and remote sites do Dreamweaver.
60
Logo será visualizada a opções Local files (seus arquivos locais) e a Testing Server (onde serão
armazenados os arquivos do site).
Agora na opção Testing Server basta preencher os campos corretamente.
61
Realize a conexão com o servidor FTP e utilize a opção Connects to remote host.
Após concluir a transferência dos arquivos, os mesmos já estarão armazenados no Testing
Server.
Para encerrar, basta acessar o endereço de seu site e visualizá-lo hospedado.
62
63