Dreamweaver CS6

Sumário

Iniciando e conhecendo o Dreamweaver CS6 .................................................................................. 1

Ajustes de Preferência...................................................................................................................... 2
Criando um Novo Arquivo ................................................................................................................ 9
Salvando e Visualizando um Arquivo ............................................................................................. 12
Trabalhando com Imagens ............................................................................................................. 13
Iniciando a Construção do Site - Conceitos e Diretórios ................................................................ 15
Exportando arquivos através do Photoshop .................................................................................. 15
Gerenciador de Arquivos - Manage Sites ....................................................................................... 17
Estilos CSS ....................................................................................................................................... 19
Trabalhando com Camadas ............................................................................................................ 23
Hyperlinks ....................................................................................................................................... 26
Rollover Image ................................................................................................................................ 28
Integração com o Flash (SWF) ........................................................................................................ 29
Design com Tabelas ........................................................................................................................ 31
AJAX Utilizando o Framework Spry ................................................................................................ 32
Formulário ...................................................................................................................................... 35
Criando o menu (Hotspot Image Map)........................................................................................... 39
Evento com Janela (JavaScript) ...................................................................................................... 40
Publicando seu site na Internet ...................................................................................................... 41
 Iniciando e conhecendo o Dreamweaver CS6

Para iniciar o Dreamweaver CS6, clique sobre o botão Iniciar, Todos os Programas, Adobe
Master Collection CS6, Adobe Dreamweaver CS6.

Após alguns instantes será iniciado o Dreamweaver CS6 com sua tela inicial.

1
Com o Dreamweaver iniciado, podemos visualizar a Página Inicial (Página Inicial).

Página Inicial

Quando você executa o Dreamweaver, como padrão ele exibe a Página Inicial. Nela podemos
manipular documentos.

Abrir arquivos recentes: podemos escolher qualquer documento antes criado

pelo Dreamweaver.

Criar Novo: podemos criar um documento conforme o tipo que queremos

(HTML, ColdFusion, PHP, CSS, JavaScript,XML, Fluit Grid Layout (onde é a grande novidade desta
versão do Adobe Dream Weaver CS6 é que já podemos definir antes mesmo de criarmos um
novo arquivo se será na plataforma, mobile (para celulares), tablet ou desktop), um novo site
do Dreamweaver ou mais opções, clicando em Mais.

Criar a partir de amostras: podemos criar outra página baseada em modelo pré-existente.

Ajustes de Preferência

2
Para obter melhor resultado nos trabalhos do Dreamweaver CS6, podemos personalizar suas
configurações na janela de preferências.

Para acessar, escolha o menu Editar, e clique sobre a opção Preferências, pode-se utilizar a tecla
de atalho <Ctrl>+<U>.

Janela Preferências.

3
Preferências - General

Principais componentes da opção Geral.

4
Mostrar tela de boas vindas: Selecionada, essa opção define que, quando abrir o Dreamweaver,
inicialmente apareça na tela a janela Página Inicial, permitindo abrir documentos recentes e
também criar outros.

Reabrir documentos ao iniciar: Quando estiver marcada, cada página que estava aberta quando
fechamos o Dreamweaver, será aberta da próxima vez que inicializarmos o software.

Avisar ao abrir arquivo somente leitura: Quando selecionada, aparecerá uma caixa de alerta
toda vez que for aberto um arquivo configurado somente como leitura.

Atualizar arquivos ao mover arquivos: 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 Nunca.

Mostrar caixa de diálogo ao inserir objetos: 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.

Ativar entrada inline de bytes duplos: 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.

Alternar para parágrafo simples após cabeçalho: Com esta opção ativada o Dreamweaver
acrescenta a tag <P> ao iniciar um novo cabeçalho.

Usar <strong> e <em> em vez de <b> e <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.

Número máximo de etapas do histórico: Esse valor define a quantidade de passos necessária
que será permitido voltar atrás, seja usando o comando Editar, Desfazer(+), ou usando um
painel chamado histórico. Podendo ser um valor entre 2 e 99.999.

Preferências – Codificação por cores

Nessa área configuramos como serão coloridos os códigos para facilitar a visualização.

Tipo de documento: 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 Editar Esquema de cores.

Em seguida, é aberta uma nova janela, onde devemos selecionar o elemento desejado em
Estilos for e à sua direita, as cores do texto (Cor do Texto), do fundo (Cor do fundo) e se negrito
(B), itálico (I) ou sublinhado (U).

6
Cor do fundo: Nessa área é escolhida a cor padrão do fundo da janela do código.

Preferencias – Copiar/Colar

7
Aqui definimos como se comportarão os elementos quando copiados de outro programa e Aqui
definimos como se comportarão os elementos quando copiados de outro programa e colados
no Dreamweaver na visualização Clássico.

Pode-se escolher entre as opções Apenas Textos (cola apenas o texto), Texto com estrutura
(cola os textos e sua estrutura como parágrafos, por exemplo, mas não sua formatação), Texto
com estrutura e formatação básica (além do texto e da estrutura, também cola algumas
formatações básicas HTML) ou Texto com estrutura e formatação integral (cola tudo com
formatação completa HTML e elementos de folhas de estilo CSS).

Reter quebras de linhas: deixa as quebras de linha no texto a ser colado.

Limpar espaçamento de parágrafo do Word: tira os espaços adicionais entre os parágrafos do

texto colado.

Converter aspas inglesas para aspas retas: faz a conversão de aspas duplas para as aspas
simples.

Preferências - Fontes

Nessa área podemos configurar as fontes utilizadas no programa.

Configurações de Fontes: Escolhemos nessa área o tipo de codificação a ser utilizado, marcando
uma das opções da lista.
8
Fonte proporcional: Seleciona a fonte usada normalmente quando digitamos na tela do
Dreamweaver e seu tamanho.

Visualização de código: Nessa opção definimos a fonte e o tamanho utilizados na visualização

de código do Dreamweaver.

Preferências - Novo Documento

Aqui ajustamos as opções para novos documentos do Dreamweaver. Entre algumas, temos:

Documento padrão: Escolhemos os tipos padrão para os documentos que vamos criar para o
site, escolhendo no menu o tipo que queremos.

Extensão padrão: Nessa opção determinamos a extensão padrão para os arquivos a serem
criados.

Criando um Novo Arquivo

Ao iniciar o Dreamweaver CS6, temos em sua área de trabalho o Página Inicial, onde podemos
escolher que tipo de arquivo iremos criar ou se desejamos utilizar um documento pronto.

9
Existem duas maneiras de se criar um novo arquivo: através do menu Arquivo opção Novo ou
então, de um modo mais simples, clicando sobre a opção de arquivo desejada, no Página Inicial.

No Página Inicial, clique sobre a opção Html, de Criar Novo.

Após o clique, um novo arquivo é criado e exibido na área de trabalho do Dreamweaver.

10
Como em um Editar os de textos qualquer, podemos escrever e apagar os textos digitados, bem
como Edita-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
Propriedades habilita suas funções para edição de textos.

HTML: abre o painel HTML do Dreamweaver.

Formato: formata o parágrafo com estilos de textos e alinhamentos predefinidos pelo

Dreamweaver.

Negrito e Itálico: permitem aplicar a formatação em Negrito e Itálico.

Formatação de Texto:

 Lista não ordenada: aplica marcadores ao(s) parágrafo(s) selecionados(s).

 Lista ordenada: aplica numeração ao(s) parágrafo(s) selecionado(s).

 Remove Citação de Bloco: retira os recuos de parágrafo.

 Citação de Bloco: define um recuo de parágrafo.

Painel Propriedades com o botão CSS ativo.

11
  CSS: Abre o painel de CSS do Dreamweaver.

 Regra alvo: Exibe as regras criadas através do CSS.

 Fonte: Possui uma lista de fontes para formatação de texto.

 Cor do texto: Paleta de cores que permite aplicar cor ao texto.

 Alinhamento a esquerda: Alinha o parágrafo à esquerda.

 Alinhamento Centralizado: Alinha o parágrafo ao centro.

 Alinha à direita: Alinha o parágrafo à direita.

 Justificar: 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.

Para isso, clique no menu Arquivo, opção Salvar.

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.

12
Para visualizar o arquivo no Internet Explorer (IE), ainda no Dreamweaver, com seu documento
em uso, clique sobre o botão Visualizar debugar no navegador.

Após o clique, o IE será exibido, tendo como conteúdo a página Html criada por você.

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.

13
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.

Com o cursor na posição definida, clique sobre o botão drop-down da opção Imagens, no
painel Inserir, guia Comum. Note que é exibido um submenu com as opções de inserção
disponíveis. Escolha a opção Imagem.

Imagem inserida na página e sendo visualizada no browser.

14
 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.

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.

15
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:

Definidas as áreas a serem recortadas e salvas através de exportação, com o comando Salvar
para Web....

16
 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 Grupo de Painel, exiba a guia Arquivos do painel Arquivos, clicando sobre seu nome.

17
Painel Arquivos:

Expandindo o painel Arquivos, visualizamos outras opções:

18
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.

19
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 Estilo CSS, que
estará habilitada. Ali são Editados os estilos CSS.

1- Anexar folha de estilos: adiciona ao documento um estilo já pronto (arquivo .CSS). Esse
procedimento será explicado mais adiante.

2- Nova Regra CSS: cria um estilo através de uma caixa de diálogo.

3- Editar Página de estilo: edita o estilo selecionado na lista.

4- Desabilitar/Habilitar Propriedade CSS: ativa e desativa o acesso às propriedades da lista.

5- Delete Propriedade CSS: apaga o estilo selecionado na lista.

20
O Tipo de Seletor define o tipo de estilo que será escolhido:

● Classe: 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:.

● Avançado: específico para efeitos com o mouse sobre links e botões.

O campo Define em, define se o estilo CSS será salvo num arquivo à parte ou encorpado ao
código da página.

Definindo as opções da Novo Estilo CSS, na nova caixa de diálogo que aparece, você deve
especificar as propriedades do seu estilo e a qual componente ele aplicar-se-á.

21
Depois, o estilo fica registrado na guia Estilo CSS.

No código HTML, você também pode observar a ocorrência do estilo.

22
Para formatar um texto, selecione-o e aplique o estilo pela barra Propriedades.

Trabalhando com Camadas

Camadas é 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 camada, é possível inserir textos, imagens ou qualquer outro conteúdo que
possa ser inserido em um documento HTML.

No Dreamweaver, você pode usar camadas para construir o layout de sua página. É possível
colocar camadas uma sobre a outra, ocultar alguns enquanto mostra outros e movê-los pela
tela.

Exemplo de layout:
23
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.

24
Inserindo pelo menu, a camada aparece com um tamanho específico. Se você utilizar o
botão Desenhar Div AP, poderá clicar e arrastar, para definir sua área.

O painel Propriedades também apresenta propriedades da camada selecionada.

25
 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 Propriedades.

Após a configuração, é só clicar no texto com o link, para que ele seja enviado ao destino
estabelecido.

26
Existem ainda as configurações de Destino.

_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.

_top: carrega a página em uma janela maximizada em toda a tela (fullscreen), removendo todos
os frames.

É possível 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 Propriedades da página.

27
 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.

Para iniciar o Rollover Image basta criar um novo documento no Dreamweaver; vá até o menu
Inserir, Objetos de imagem e selecione a opção Imagem de sobreposição.

A caixa de diálogo Inserir imagem de sobreposição será aberta.

 Nome Imagem: Um nome para seu Rollover.

 Imagem Original: Primeira imagem que irá aparecer.

 Imagem de sobreposição: Imagem que irá aparecer quando você passar o mouse por
cima.

 Pré-carregar imagem de sobreposição: Marque esta opção para que quando a página
carregar, sua outra imagem seja carregada também.

 Texto alternativo: Texto que irá aparecer junto à imagem.

 Ao clicar, vai para URL: Link da sua imagem.

Com os campos já preenchidos, pode-se visualizar o Rollover criado:

28
 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 CS6 tem uma ótima integração com o Flash. Inserir um arquivo Flash em uma
página, é tão fácil como uma figura qualquer.

29
Para inserir um componente Flash, vá até o menu Inserir, 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.

Componente inserido.

Suas propriedades específicas.

Teste da página.

30
 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 Fatia, no
Photoshop.

31
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

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

32
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 Barra de Menus do Spry, vá até a opção Na Barra Inserir, aba Spry, clique
sobre Barra de Menus do Spry.

Janela Barra de Menus do Spry.

Ao escolher o layout do menu, será inserido ao Dreamweaver.

33
Sub-menus adicionados aos menus.

Para melhor visualização do menu criado, o resultado pode ser executado pelo Internet
Explorer.

34
 Formulário

Formulário é um recurso que permite coletar informações de um usuário e enviá-las a um e-

mail. É 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 Formulário .

Aparecerão as ferramentas destinadas à construção do formulário.

1. Formulário: cria uma área na página, que será destinada ao conteúdo do formulário.

2. Campo de texto: 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. Campo oculto: 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. Area de texto: tem a mesma função do Text Field, mas permite uma área maior de texto
multilinha.

5. Caixa de seleção: permite a escolha de múltiplas respostas em um único grupo de

opções, não cancelando as anteriores.

6. Grupo de caixas de seleção: permite a escolha de múltiplas respostas em dois grupos de

opções, não cancelando as anteriores.

7. Botão de opção: representa opções exclusivas. A seleção de um dos botões do grupo

cancela a seleção de outros.

8. Grupo de botão de opção: insere um grupo de Radio Buttons.

35
 9. Selecionar (Lista/Menu): permite criar uma lista de opções.

10. Menu de salto: permite inserir um menu, no qual cada opção vincula-se a um
documento ou arquivo (links).

11. Campo de imagem: pode ser utilizado no lugar de um botão de ação, exercendo a
mesma tarefa.

12. Campo de arquvo: 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. Botão: insere botões de ação, realizando tarefas quando são clicados.

14. Rótulo: especifica um rótulo.

15. Conjunto de campos: especifica um rótulo em uma área de formulário.

Cada componente tem sua propriedade específica. Veja o exemplo abaixo, com o componente
Campo de texto.

É necessário inserir um botão que tem a função de enviar os dados preenchidos.

36
Propriedades alteradas.

Para definir o e-mail de destino, altere as propriedades do campo do formulário.

37
Ação: é a ação, ou seja, o que o formulário vai fazer. No caso, enviar os dados para um e-mail
(mailto:).

Método: 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.

Observe abaixo, o Formulário pronto, visualizado pelo browser. Clicando em Enviar, os dados
serão encaminhados para o e-mail especificado anteriormente.

38
Veja o resultado.

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 Propriedades, existem algumas opções destinadas
ao Map.

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 Propriedades.

39
 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>

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.

40
Veja o resultado do código acima.

Publicando seu 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á.

41
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.

Utilizaremos o site: www.hostinger.com.br. Abra o Internet Explorer e digite o endereço.

Na página inicial clique em Peça agora! Para criarmos nossa conta gratuita que ira armazenar no
site em html.

Role a página para baixo e inicie o cadastro informando o Nome que você desejar e seu E-mail,
crie uma senha e digite os caracteres informados na imagem.

42
 Em seguida, marque a opção Concordo com os Termos de Serviço e clique em Criar Conta.

Após o clique, irá surgir a tela de conclusão do cadastro.

43
Em seguida, abra o seu e-mail cadastrado para a ativação do site, você irá receber dois e-mails,
abra o de assunto Confirmação de Cadastro de Cliente.

Para autenticar sua conta clique sobre o link como mostrado na imagem abaixo:

Você será redirecionado para uma nova página confirmando o seu cadastro e pronta para a
escolha de sua conta.

Role a página para baixo e escolha a opção Gratuito e clique em Comprar.

44
Vamos criar o domínio para nosso site, veja o exemplo abaixo:

Após preencher os dados necessários clique em Continuar.

Ao clicar será mostrado se o domínio escolhido está disponível ou não, no caso negativo é
necessário escolher um novo domínio disponível.

45
Clique novamente em Continuar e aparecerá a janela para confirmação de aquisição, digite os
caracteres novamente, marque a opção Eu concordo... e clique em Comprar.

Em seguida será informado que a conta foi criada com sucesso.

46
Clique sobre o nome de seu domínio e escolha Gerenciar.

Role novamente a página e procure pela categoria Arquivos e escolha a opção Acesso FTP.

Observe a janela que é mostrada em seguida:

47
Utilizaremos o Host file, o nome de usuário e senha para transferirmos nosso site para o
hospedeiro.

Abra o Windows Explorer e na barra de endereço digite o seu Host File em seguida tecle Enter.

Na janela que se abre digite seu nome de usuário informado na tela de acesso FTP e sua senha,
em seguida clique em Logon.

Tela após login para transferência de arquivos:

48
Abra uma nova janela do Windows Explorer e acesse sua pasta onde está salvo o site criado
durante o curso, selecione todos os arquivos usando as teclas CTRL+A. E copie todos os arquivos
usando as teclas CTRL+C.

Ative a janela do Windows Explorer que contém a tela FTP e cole os arquivos usando as teclas
CTRL+V.

Em seguida será iniciada a transferência dos arquivos:

49
Aguarde a transferência completar.

Abra uma nova guia no navegador e digite seu site:

50
Faça os teste que achar necessários e nosso site está finalizado.

Feche o Internet Explorer.

51