Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Dreamweaver_E-Jovem
Compartilhar
Prévia do material em texto
Projeto eJovem M dulo II: Dreamweaveró 2
Capítulo 1.
1.1. Introdução
O Dreamweaver MX é um editor de HTML profissional para desenhar, codificar e
desenvolver site, páginas e aplicativos para a Web no estilo WYSIWYG ("What You See Is
What You Get", ou "O que você vê é o que você tem"). Os recursos de edição visual no
Dreamweaver permitem criar páginas de modo rápido, sem escrever uma linha de código.
Em suas versões mais recentes incorporou um notável suporte para várias tecnologias web,
tais como XHTML, CSS, javascript, Ajax, PHP, ASP, ASP.NET, ColdFusion entre outras
linguagens do lado servidor, tornandoo assim uma poderosa ferramenta para
desenvolvedores web.
1.2. Área de Trabalho
Iniciamos nosso estudo sobre o Dreamweaver conhecendo os componentes que
formam sua interface com o usuário.
Ao inicializar a aplicação pele primeira vez o usuário verá a seguinte tela de
inicialização.
Aqui o usuário pode optar por trabalhar com a área de trabalho de Dreamweaver 4 ou com
a área de trabalho do Dreamweaver MX. Como a escolha de qual área de trabalho deve ser
http://pt.wikipedia.org/wiki/WYSIWYG
Projeto eJovem M dulo II: Dreamweaveró 3
utilizado é pessoal, cabe a cada usuário escolher a que melhor lhe agrada ou que traz mais
produtividade. Em nosso manual iremos trabalhar com a área de trabalho de Dreamweaver
MX.
Dica: Escolha a área de trabalho do Dreamweaver MX, ela lhe proporcionará uma melhor
experiência com a aplicação.
A figura a seguir apresenta a área de trabalho do Dreamweaver MX.
Visão geral das janelas e painéis
A janela Bemvindo Contém dicas sobre a configuração da área de trabalho, para diversos
objetivos, e informações sobre os novos recursos, para as pessoas que
utilizam as versões anteriores
A Barra Inserir Contém botões para inserção de vários tipos de objetos, como imagens,
tabelas e camadas em um documento.
A barra de ferramentas do
documento
Contém botões e menus popup que possibilitam diferentes visualizações
da janela do documento (visualização do projeto e de código), várias
opções de exibição e algumas operações comuns, como a visualização no
navegador.
A janela do documento Exibe o documento que está sendo criado e editado.
O inspetor de propriedades Permite exibir e alterar várias propriedades do objeto ou texto selecionado.
O Grupo de Painéis São um conjunto de painéis interrelacionados sob um cabeçalho
A barra inserir
O Grupo de Paineis
Barra de Menu
Inspetor de
propriedades
A barra de ferramentas
do documento
A janela de
Bemvindos
A janela do documento
Projeto eJovem M dulo II: Dreamweaveró 4
Visão geral dos menus
Barra de Menu
A figura a seguir mostra a barra de menu, é nesta barra que encontramos todos os
comandos do Dreamweaver. Existe várias formas de acessar um comando, via menu ou via
tecla de atalho, com o a prática você deve escolher a forma que mais lhe agrada.
1.3. Planejando e configurando um site
No Dreamweaver o termo site pode se referir a um site da web ou a uma pasta em seu
computador. Ao iniciar a construção de um site é necessário seguir uma série de etapas de
planejamento para assegurar que o site funcionará. Uma destas etapas se refere a estrutura
que o site terá, basicamente isso significa definir a estrutura de pastas e subpastas, porém
antes desta etapa é necessário configurar o site no Dreamweaver.
Configurando um site no Dreamweaver.
1º Passo: Vá ao menu site na barra de menu e clique em novo site.
2º e 3º Passos:
No 2º passo devemos definir um nome para
o site.
No 3º passo devemos definir se iremos
utilizar uma tecnologia de servidor ou não.
Projeto eJovem M dulo II: Dreamweaveró 5
4º e 5º Passos:
No 4º passo iremos definir onde trabalhar
com os arquivos, a sugestão é Editar e testas
localmente como mostra a figura a baixo.
No 5º passo definimos a URL para procura
da raiz do site.
6º e 7º Passos:
No 6º passo definimos se ao terminar a
edição de um arquivo devemos copialo para
outro computador. Escolha a opção não.
No 7º e ultimo passo temos um resumo do
site configurado. Para encerrar a configuração
clique no botão Concluído.
1.4. Criando, Abrindo e Salvando documentos
Após a configuração do nosso site chegou a hora de criarmos a nossa primeira página, nossa
página inicial (também conhecida como home page). Para isso siga os seguintes passos.
Projeto eJovem M dulo II: Dreamweaveró 6
Menu: Arquivo>Novo
A tela seguinte será aberta.
Escolha a categoria: página básica e em página básica escolha HTML em seguida click no
botão Criar. Pronto você acaba de criar um documento HTML no Dreamweaver.
Agora podemos realizar algumas tarefas básicas no documento, uma delas é definir as
propriedades do documento.
1.5. Definindo as propriedades de um documento
Para definir as propriedades do documento temos duas opções. Ir em Modificar
>Propriedade da página ou clicar com o botão da direita do mouse sobre o documento e
no menu popup escolher
propriedade das páginas.
A figura ao lado mostras as
configurações que podemos
alterar.
Projeto eJovem M dulo II: Dreamweaveró 7
Capítulo 2. Trabalhando com texto
2.1. Como inserir e formatar texto em documento
A inserção de texto no Dreamweaver é semelhante a forma de como se trabalha em um
processador de textos padrão. Tudo que você tem a fazer é clicar no documento e começar a
digitar ou colar o texto trazendo de outra aplicação como writer por exemplo;
2.2. Ajustando fontes, estilos, cores e alinhamento
Através do Inspetor de propriedades você pode formatar o texto, selecionando nova fonte,
aplicando estilo, alterando cor e alinhamento. Veja a figura a seguir.
2.3. Inserindo caracteres especiais
Caracteres especias como por exemplo, “ ® © — ® , não são obtidos via teclado, para€
conseguir estes caracteres você deve ir ao menu Inserir>Caracteres especiais.
Projeto eJovem M dulo II: Dreamweaveró 8
2.4. Criando listas
Listas são obtidas facilmente no Dreamweaver, tudo que precisamos fazer é inserir
diretamente no documento uma seqüência de texto como no exemplo a seguir.
em seguida utilizamos o botão lista nãoordenada ou o botão lista ordenada obtendo
um dos seguintes resultados.
2.5. Trabalhando com cores
No Dreamweaver, muitas caixas
de diálogo, assim como o inspetor de
propriedades de diversos elementos
de páginas, contêm uma caixa de
cores, que abre um seletor de cores.
Utilize o seletor de cores para
escolher uma cor para um elemento
Projeto eJovem M dulo II: Dreamweaveró 9
de página. A figura a lado mostrar o seletor de cores do Dreamweaver
2.6. Aplicando cores
Uma outra forma de aplicar cores é inserindo o código hexadecimal diretamente no
inspetor de propriedades ou via código HTML como mostra as figuras a seguir.
Código hexadecimal inserido
diretamente no código html
Código hexadecimal inserido
via inspetor de propriedades
Projeto eJovem M dulo II: Dreamweaveró 10
Capítulo 3. Inserindo hiperlinks no Dreamweaver e
trabalhando com imagens
3.1. hiperlinks
Formado pela junção das palavras hipertexto + link. (Hipervínculo). Palavra,
expressão ou imagem que permite o acesso imediato à outra parte de um mesmo, ou outro
documento, bastando ser acionado pelo ponteiro do mouse. Num hipertexto, um link, na
forma de palavra ou expressão, vem sublinhado ou grafado em cor distinta da utilizada
para o resto do texto.
O hiperlink ou simplesmente link forma o elo que liga várias páginas entre si, ele
também pode ser utilizado para termos uma ligação a recursos fornecidos em nosso site ou
em um site da web. A navegação web está ligada diretamente aos hipertextos, da utilização
destes links surgiu o termo surfar na web. A figura a seguir mostra um diagrama de páginas
ligadas via hiperlink.
3.2. localizaçãode documentos
Ao criar links, é essencial compreender o caminho de arquivo entre o documento do qual
parte o link e o que está sendo vinculado
Cada página da Web tem um endereço único chamado Universal Resource Locator (URL).
Contudo, quando é criado um link local , normalmente, a URL inteira do documento que
está sendo vinculado não é especificada, em vez disso, é indicado um caminho relativo ao
documento atual ou a pasta raiz do site.
Os três tipos de caminhos são os seguintes:
Caminhos absolutos;
Caminhos absolutos fornecem a URL completa do documento vinculado, inclusive o
protocolo a ser utilizado. Por exemplo:
Projeto eJovem M dulo II: Dreamweaveró 11
http://www.bol.com.br
Deve ser utilizado um caminho absoluto para estabelecer um link a um documento em
outro servidor.
Caminhos relativos ao documento;
Caminhos relativos a documentos são os mais apropriados para os links locais na
maioria dos sites da web. Eles são particularmente úteis quando o documento atual e o
vinculado estiverem na mesma pasta, e possivelmente permanecerão juntos. O caminho
relativo a documento também é utilizado para estabelecer um link a um documento em
outra pasta, especificando o caminho através da hierarquia de pastas, do documento atual
ao vinculado. Por Exemplo:
imagens/foto.jpg
Caminhos relativos a raiz do site;
Caminhos relativos a raiz do site fornecem o caminho da pasta raiz do site a um
documento. Pode ser conveniente utilizar esses tipos de caminhos ao trabalhar em um site
grande da web, que use vários servidores, ou um servidor que hospede diversos sites
diferentes. Por exemplo:
/suporte/suport.html
3.3. Criando hiperlinks
A criação de hiperlink é um processo extremante fácil no Dreamweaver, siga os
passos a seguir:
1. Click no menu inserir hiperlink;→
2. Na janela a seguir preencha os seguinte campos;
Texto: O texto que irá aparecer na página no navegador
Link: O caminho do arquivo que será vinculado;
Destinho: Onde o link será aberto, se na mesma janela do navegador ou em outra
janela.
Título: Texto de ajuda;
Chave de acesso: um a letra que servirá de acesso via teclado para o link.
http://www.bol.com.br/
Projeto eJovem M dulo II: Dreamweaveró 12
3. Pressione o botão OK, pronto a hiperlink esta criado.
3.4. Criando links de correio eletrônico
Os links de correio eletrônico são semelhantes aos links de navegação, porém são
utilizados para executar um programa de envio (windows ou linux) ou para abrir a página
de um webmail como por exemplo o google.
Siga os seguintes passos para criar um link de correio;
1. Click no menu inserir link de correio eletrônico;→
2. Na janela a seguir preencha os campos Texto e EMail;
3. Em seguida clique no botão OK;
3.5. Criando links para download
Os links para download funcionam de forma muito parecida com os links para
navegação a diferença é que ao apontar para um arquivo que não tem a extensão html ou
outra que o servidor web entenda o download é iniciado. O servidor web entende que é
para transferir o arquivo solicitado para a máquina que fez a solicitação.
3.6. Adicionando imagens
É possível acrescentar imagens à página que você está criando. Utilize suas próprias
imagens se desejar, mas ao adicionar uma imagem pela primeira vez, é recomentado
utilizar as imagens do site de exemplos do Dreamweaver.
Para adicionar uma imagem a um documento:
1° Salve o documento primeiro.
É possível inserir uma imagem em um documento não salvo, mas para isso uma caixa
de diálogo será exibida informando que a URL utilizado para a imagem local é o
Projeto eJovem M dulo II: Dreamweaveró 13
caminho completo para a imagem. Se este método for utilizado, o Dreamweaver
definirá os endereços URL ao salvar o documento, porém é mais fácil salvar o
documento antes de adicionar as imagens.
2° Para inserir uma imagem vá em inserir >imagem, a caixa de diálogo Secione a origem
da imagem, procure, selecione e em seguida click em OK.
3º Salve o documento.
3.7. Criando mapas de imagens
Um mapa de imagens é uma imagem que serve como dispositivo de navegação. Com
um mapa de imagens, é possível criar múltiplos pontos ativos (áreas clicáveis) em uma
única imagem e vincular cada ponto ativo a uma URL diferente ou arquivo a ser aberto. É
possível também definir onde um documento será aberto, por exemplo: abrir o documento
em uma moldura de um conjunto de molduras de um documento ou abrilo em uma nova
janela do navegador.
Para criar mapas de imagens
Agora você criará um mapa de imagens de modo que uma única imagem seja
vinculada a múltiplas páginas.
1º No Dreamweaver, selecione Arquivo > Abrir, localize e abra um arquivo de
imagem.
2º No documento, clique na imagem.
Projeto eJovem M dulo II: Dreamweaveró 14
3º Abra o inspetor de propriedades, caso ainda não esteja aberto, e clique na seta de
expansão na área inferior à direita do inspetor de propriedades para exibir todas as
propriedades da imagem, se necessário.
Opções dos mapas de imagens
As opções do mapa de imagens aparecem no inspetor de propriedades expandido.
4º Na caixa de texto Nome do mapa, digite Locais.
Dica: Se for criado mais de um mapa de imagens em um documento, cada mapa
deve ter um nome exclusivo. Cada mapa de imagens também pode ter diversas
áreas clicáveis.
5° Clique na Ferramenta Ponto ativo retangular para selecionála.
6° Na janela de documento, clique na área da imagem e arraste o ponteiro do mouse
para baixo e para a direita sobre a imagem para criar uma área de ponto ativo.
Uma camada azul aparece sobre a imagem e o inspetor de propriedades da área ativa
é exibido.
7° Na caixa de texto Link, clique no ícone da pasta. Na caixa de diálogo que aparece,
localize o arquivo que será o alvo do link. Você acabou de definir o primeiro ponto ativo.
Agora você poderá criar outro.
8º Salve e feche o arquivo.
3.8. Imagens cambiáveis (rollover)
Uma imagem cambiável é uma imagem que parece se modificar quando um visitante
passa o ponteiro do mouse sobre a imagem no site. Por exemplo: um botão em uma página
parece “acender” na página quando o visitante aponta o botão do mouse sobre ela.
A imagem cambiável consiste de duas imagens: a imagem exibida quando a página for
carregada pela primeira vez no navegador e a imagem exibida quando o ponteiro for
passado sobre a imagem original.
Observação: Ao criar uma imagem cambiável, certifiquese de utilizar duas
imagens com o mesmo tamanho.
Para criar uma imagem cambiável:
1° Alterne para a página principal (index.htm) se esta não for a página atual (se a
Projeto eJovem M dulo II: Dreamweaveró 15
página não estiver aberta, clique duas vezes em seu ícone no painel Site para abrila).
2° Na janela do documento, colocar o ponto de inserção no local onde a imagem
cambiável deverá aparecer.
3° Escolha Inserir > Imagens interativas > Imagem cambiável.
4° Na caixa de diálogo Imagem cambiável, digite um nome para a imagem, como
imagemprincipal na caixa de texto Nome da imagem.
Com isso, a imagem assumirá um nome exclusivo e se tornará facilmente identificável
no código HTML.
5° Na caixa de texto Imagem original, clique em Procurar para localizar o arquivo
imegam.jpg (desejado) na pasta de imagens de seu site.
A caixa de texto Imagem original indica qual imagem será exibida quando a página
aparecer primeiro no navegador.
6° Na caixa de texto Imagem cambiável, clique em Procurar para localizar imagem.jpg
(segunda imagem desejada) na pasta de imagens do site.
A caixa de texto Imagem cambiável indica qual imagem será exibida quando o
ponteiro estiver apontando para a imagem no navegador.
7° Certifiquese de que a opção Précarregar a imagem cambiável esteja selecionada,
de modo que as imagenscambiáveis sejam carregadas quando a página for carregada no
navegador, garantindo uma transição rápida entre as imagens quando o usuário mover o
ponteiro do mouse sobre a imagem original.
8° Na caixa de texto Quando clicado, vá para a URL, clique no botão Procurar para
localizar index.htm. O arquivo index.htm é o arquivo que está sendo editado, portanto, esta
etapa vincula a imagem cambiável à página em que a imagem cambiável está sendo
colocada. Pode parecer desnecessário criar um link para a página onde o link está ativo,
mas você também utilizará o mesmo conjunto de imagens cambiáveis de navegação em
outras páginas, portanto, este link permitirá que os visitantes retornem à página index.htm
de outras páginas que contêm esta barra de navegação.
9° Clique em OK para fechar a caixa de diálogo.
A imagem original especificada aparece no documento.
Projeto eJovem M dulo II: Dreamweaveró 16
10° Salve o documento.
Observação: As imagens cambiáveis não funcionarão ao apontar sobre elas com o
ponteiro na janela Documento do Dreamweaver. As imagens cambiáveis funcionam
somente no navegador. Para verificar o funcionamento das imagens cambiáveis, visualize
o documento no navegador.
3.9. Alocando espaço para imagem
Crie um alocador de espaço para representar a imagem que será adicionada
posteriormente. Para adicionar um alocador de espaço de imagem:
1° Escolha Inserir > Alocador de espaço de imagem.
2° Na caixa de diálogo, Alocador de espaço de imagem, digite um nome para o
alocador de espaço e uma largura e altura.
Projeto eJovem M dulo II: Dreamweaveró 17
Capítulo 4. Criando e modificando Tabelas
A visualização padrão é a visualização de criação típica do Dreamweaver. Para criar
uma tabela no modo de visualização padrão, utilize o comando Inserir tabela. O
Dreamweaver cria uma tabela com base nas opções selecionadas na caixa de diálogo Inserir
tabela. É possível modificar facilmente a estrutura inicial da tabela para criar projetos mais
complexos e mesclar ou dividir células ou inserir linhas e colunas.
É possível utilizar as células da tabela (as caixas criadas na interseção de cada coluna
ou linha em uma tabela) para controlar a colocação de texto e imagens em uma página da
Web. Uma vez que é possível tornar as bordas das tabelas invisíveis, os usuários não
poderão ver a estrutura subjacente do design ao visualizar a página no navegador.
1° No Dreamweaver, escolher Arquivo > Novo.
Será exibida a caixa de diálogo Novo documento.
2° Na lista Documento em branco, escolha HTML e clique em Criar para criar um novo
documento HTML.
3° No campo de texto Título na barra de ferramentas do documento, digite design da
tabela para adicionar um título ao documento.
4° Selecione Arquivo > Salvar e salve o documento na pasta do site local. Nomeie a
página como modificar_tabela.htm.
4.1. Como inserir uma tabela
Agora você está pronto para inserir uma tabela no documento.
1º Na janela Documento, coloque o ponto de inserção no documento e siga uma das
etapas abaixo:
• Selecione Inserir > Tabela.
• Na categoria Comuns da barra Inserir, clique no ícone Tabela.
A caixa de diálogo Inserir tabela é exibida.
Projeto eJovem M dulo II: Dreamweaveró 18
2° Na caixa de diálogo, definir as seguintes opções:
• Na caixa de texto Linhas, digite 2.
• Na caixa de texto Colunas, digite 2.
• Na caixa de texto Largura, digite 600 e selecione Pixels no menu popup à direita
da caixa de texto Largura. Ao definir a largura em 600 pixels, criase uma tabela de largura
fixa. A largura da tabela será discutida em detalhes posteriormente neste tutorial.
• Na caixa de texto Borda, digite 1 para definir uma borda de 1 pixel ao redor da
tabela e células da tabela.
3° Clique em OK.
O Dreamweaver insere a tabela no documento.
4° Salve o documento seguindo um dos procedimentos abaixo:
• Selecione Arquivo > Salvar.
• Pressione Control + S.
4.2. Modificar a tabela
É possível modificar em seguida o layout da tabela. Você adicionará linhas e colunas à
tabela e aprenderá como mesclar e dividir células para criar o layout da página desejado.
1° Clique na célula superior esquerda e arrastea para a linha de baixo para selecionar
a coluna esquerda.
2° Selecione Modificar > Tabela > Inserir coluna.
Projeto eJovem M dulo II: Dreamweaveró 19
A tabela conterá agora três colunas.
3° Clique na célula esquerda inferior e selecione Modificar > Tabela > Inserir linhas
ou colunas.
Dica: Selecione a opção Inserir linhas ou colunas ao adicionar um número
específico de linhas ou colunas ou para escolher o local onde uma linha ou coluna será
inserida na tabela.
A tabela é atualizada. A tabela terá agora quatro linhas e três colunas.
4° Salve as alterações (Arquivo > Salvar).
4.3. Mesclar e dividir células
Para personalizar o design de uma tabela de acordo com suas necessidades, é possível
mesclar e dividir as células. A seguir você aprenderá como utilizar opções de menu ou o
inspetor de propriedades para mesclar ou dividir células da tabela.
4.3.1. Como dividir a célula e como mesclar as células
1° No documento, selecione as primeiras duas células da coluna esquerda da tabela
arrastando o ponteiro da célula superior até a célula abaixo dela.
Projeto eJovem M dulo II: Dreamweaveró 20
2° Selecione Modificar > Tabela > Mesclar células.
As duas células serão mescladas em uma única célula.
3° Clique na terceira linha da segunda coluna e arraste à direita e para baixo para
selecionar as duas últimas linhas das células na segunda e terceira colunas.
4 ° No inspetor de propriedades, clique no botão Mesclar para combinar as células.
As células selecionadas são mescladas em uma célula.
É possível dividir uma única célula ou coluna.
5° Clique na célula superior esquerda.
6° No inspetor de propriedades, clique no botão Dividir a célula.
A caixa de diálogo Dividir a célula é exibida.
Projeto eJovem M dulo II: Dreamweaveró 21
7 ° Na caixa de diálogo, definir as seguintes opções:
• Na opção Dividir a célula em, selecione Colunas.
• Em Número de linhas, digite 2.
8° Clique em OK.
A tabela é modificada.
4.3.2. Alterar a altura da linha e largura da coluna
É possível ajustar as dimensões da tabela. Para isso, aumente a quantidade de espaço
entre as linhas da tabela e ajuste a quantidade de espaço entre as colunas da tabela.
1° Mova o ponteiro ao longo da borda da tabela inferior até que se transforme em um
seletor de borda e arrasteo para baixo para redimensionar a tabela.
Projeto eJovem M dulo II: Dreamweaveró 22
É possível utilizar este método para redimensionar outras alturas da linha na tabela, se
desejar.
2° Mova o ponteiro ao longo de uma borda da coluna até que se transforme em um
seletor deborda e arrasteo para a esquerda ou direita para modificar a largura da coluna.
3° Após concluir o ajuste da tabela, salve o documento.
4.3.3. Adicionar cor a uma tabela
É possível adicionar cor a qualquer parte de uma tabela. Comece adicionando uma cor
de fundo à tabela inteira e aplique uma cor de fundo diferente às células da tabela. Por
último, modifique a cor da borda.
1° No documento, clique em qualquer célula da tabela e, em seguida, no seletor de
tags localizado na parte inferior da janela Documento, clique na tag <table> para
selecionar toda a tabela.
2° Abra o inspetor de propriedades (Janela > Propriedades), caso não esteja aberto.
As propriedades para a tabela selecionada aparecem no inspetor de propriedades.
3° No inspetor de propriedades, caixa de texto Cor do fundo, selecione uma cor do
seguinte modo:
Projeto eJovem M dulo II: Dreamweaveró 23
• Clique no menu popup seletor de cores para selecionar uma cor.
• Digite uma cor utilizando um valor hexadecimal, por exemplo: #CC9933.
• Digite um nome de cor aceita para a Web, como goldenrod.
A corde fundo é aplicada à tabela.
4° É possível aplicar uma cor de fundo às células da tabela do mesmo modo. Clique na
célula esquerda superior e, no inspetor de propriedades, selecione uma cor diferente na
caixa de texto Cor de fundo.
5° Adicione cores às outras células conforme desejado.
Adicionar cor à borda
Em seguida, você definirá uma cor para as bordas da tabela. A cor é aplicada tanto às
bordas externas como internas da tabela.
1° Na janela do documento, selecione a tabela.
2° No inspetor de propriedades, caixa de texto Cor da borda, utilize o seletor de cores
para selecionar uma cor de borda para a tabela.
3° Quando terminar, salve o documento.
Projeto eJovem M dulo II: Dreamweaveró 24
Capítulo 5. Criação de formulários interativos
Os formulários permitem interagir com ou reunir informações dos visitantes a um site
da Web. Os formulários coletam informações dos usuários e as enviam ao servidor para
serem processadas. Os formulários podem conter vários objetos que possibilitam a interação
do usuário. Os objetos de formulário incluem campos de texto, caixas de listagem, caixas de
seleção e botões de opção. A tag form inclui parâmetros que permitem especificar um
caminho até o aplicativo ou script do servidor que processará os dados do formulário, bem
como o método que será utilizado ao transmitir os dados do navegador ao servidor.
Quando um visitante insere informações no formulário do site da Web e clica no botão
Enviar, os dados são enviados ao servidor que contém o script ou aplicativo que as processa.
O servidor responderá enviando a informação solicitada pelo usuário ou efetuando alguma
ação com base no conteúdo do formulário. Normalmente, as informações são processadas
por um script GGI (Common Gateway Interface), página ColdFusion, Java Server Page
(JSP) ou PHP. Observe que não é possível obter os dados do formulário sem utilizar um
aplicativo ou script de servidor para processar os dados.
O Dreamweaver MX permite criar diversos objetos de formulário, como campos de
texto, campos de senha, botões de opção, caixas de seleção, menus popup e imagens
“clicáveis” (como um botão Enviar).
No Dreamweaver, os tipos de entrada em formulários são denominados objetos de
formulário. Os objetos de formulários são inseridos selecionandose Inserir > Objetos de
formulário ou acessando os objetos de formulário no painel Formulários da barra Inserir
mostrada abaixo.
A categoria Formulários apresenta os seguintes botões:
Formulário insere um formulário no documento. O Dreamweaver insere tags form de
abertura e finalização no códigofonte HTML. Quaisquer outros objetos de formulário, como
campos de texto, botões e outros, devem ser inseridos entre as tags form, para que os dados
sejam processados corretamente por todos os navegadores.
Campo de texto insere um campo de texto em um formulário. Os campos de texto aceitam
qualquer tipo de entrada alfanumérica. O texto digitado pode ser exibido como uma linha
simples, linhas múltiplas, marcadores ou asteriscos (para proteção das senhas).
Campo oculto insere um campo oculto no documento, no qual é possível armazenar dados
do usuário. Os campos ocultos permitem armazenar informações digitadas pelo usuário
(como um nome, endereço de correio eletrônico ou preferência de compra) e, em seguida,
utilizálas quando o usuário visitar o site novamente.
Caixa de seleção insere uma caixa de seleção em um formulário. As caixas de seleção
permitem múltiplas respostas em um único grupo de opções. O usuário poderá selecionar
quantas opções forem aplicáveis.
Projeto eJovem M dulo II: Dreamweaveró 25
Botão de opção insere um botão de opção em um formulário. Os botões de opção
representam opções exclusivas. A seleção de um botão em um grupo cancela a escolha de
todos os outros botões do mesmo. Por exemplo: o usuário pode selecionar Sim ou Não.
Grupo de botões de opção insere vários botões de opção com o mesmo nome.
Lista/menus permite criar opções do usuário em uma lista. A opção Lista exibirá os valores
de opção em uma lista de rolagem e permitirá aos usuários selecionar diversas opções na
lista. A opção Menu exibe os valores de opção em um menu popup e permite aos usuários
selecionar apenas uma única opção.
Menu de salto insere uma lista de navegação ou menu popup. Os menus de salto
permitem inserir um menu no qual cada opção é vinculada a um documento ou arquivo.
Campo de imagens permite inserir uma imagem em um formulário. Os campos de imagens
podem ser utilizados em lugar dos botões Enviar para criar botões com aparência gráfica.
Campo de arquivos insere um campo de texto em branco e um botão Procurar em um
documento. Os campos de arquivos permitem que o usuário procure os arquivos nos discos
rígidos e efetue o upload como dados do formulário.
Botão insere um botão de texto em um formulário. Os botões realizam tarefas quando
forem clicados, como o envio e redefinição dos formulários. É possível adicionar um nome
ou identificador personalizado ao botão, ou utilizar um dos identificadores predefinidos:
“Enviar” ou “Redefinir”.
5.1. Como criar um formulário
A barra Inserir do Dreamweaver permite criar um formulário e inserir objetos nele, por
exemplo: campos de texto, botões, caixas de listagem e botões de opção.
Para adicionar um formulário a um documento:
1° Coloque o ponto de inserção onde o formulário deve ser exibido.
2° Escolha Inserir > Formulário ou selecione a categoria Formulários na barra Inserir e
clique no ícone de Formulário.
O Dreamweaver inserirá o formulário. Com a página no modo de visualização do
projeto, os formulários são indicados por um contorno pontilhado em vermelho. Se este
contorno não estiver visível, verifique se a opção Exibir > Auxílios visuais > Elementos
invisíveis está selecionada.
3° Na janela do documento, clique no contorno do formulário para selecionar o
Projeto eJovem M dulo II: Dreamweaveró 26
formulário ou selecione a tag <form>, no seletor de tags situado no canto inferior
esquerdo da janela do documento.
4° No campo Nome do formulário no inspetor de propriedades, digite um nome
exclusivo para identificar o formulário.
Nomear um formulário possibilita fazer referências a ele ou controlálo com uma
linguagem de criação de scripts, como JavaScript ou VBScript. Se o formulário não for
denominado, o Dreamweaver irá gerar um nome utilizando a sintaxe formn e
incrementará o valor n para cada formulário incluído na página.
5 ° No inspetor de propriedades, especifique no campo Ação, o caminho até a página
ou o script dinâmico que processará o formulário. O caminho completo pode ser digitado no
campo Ação ou clique no ícone de pasta para navegar até a pasta adequada que contém a
página do script ou aplicativo.
Se estiver especificando um caminho até uma página dinâmica, o caminho até a URL
terá uma aparência semelhante à do exemplo:
http://www.meu_site.com/nome_do_aplicativo/process.php
6° No menu popup Método, escolha o método de transmissão dos dados do
formulário ao servidor. Os métodos de processamento de formulários são:
POST Incorpora os dados do formulário à solicitação HTTP.
GET Anexa o valor à URL que solicita a página.
Padrão Utiliza a definição padrão do navegador para enviar os dados do
formulário ao servidor. Normalmente, o padrão utilizado é o método GET.
7° O menu popup Tipo de codif. permite especificar o tipo de codificação MIME dos
dados enviados ao servidor para processamento.
A definição padrão application/xwwwformurlencode é utilizada normalmente
com o método
POST. Se você estiver criando um campo para upload de arquivos, especifique o
tipo de MIME multipart/formdata.
8° O menu popup Destino especifica a janela na qual serão exibidosos dados enviados
pelo programa utilizado.
Se a janela denominada ainda não estiver aberta, uma nova janela será aberta com o
mesmo nome. Os valores do destino são:
_blank carrega o documento correspondente ao destino em uma janela nova e sem
nome.
_parent abre o documento correspondente ao destino na janela principal daquela
Projeto eJovem M dulo II: Dreamweaveró 27
que está exibindo o documento.
_self abre o documento correspondente ao destino na mesma janela em que o
formulário foi enviado.
_top abre o documento correspondente ao destino na janela que estiver aberta. Este
valor pode ser utilizado para assegurar que o documento correspondente ao destino ocupe
a janela inteira, mesmo que o documento original seja exibido em uma moldura.
5.2. Como compreender os objetos de formulário
Os objetos de formulário são mecanismo que permitem aos usuários inserir dados.
Antes de criar um objeto de formulário, é necessário inserir um formulário na página.
Dica: Se você tentar inserir um objeto de formulário sem criar o formulário, a
seguinte mensagem do Dreamweaverserá exibida: "Deseja adicionar tags de
formulário?". Escolha Sim para que o Dreamweaver crie tags "form" para oobjeto.
Os objetos de formulário que podem ser adicionados a um formulário são os seguintes:
Campos de texto aceitam qualquer tipo de entrada de texto alfanumérico. O texto pode ser
exibido como uma linha simples, linhas múltiplas e uma série de pontos ou asteriscos no
caso de informações confidenciais (com a finalidade de proteger a senha, por exemplo).
Campos ocultos permitem armazenar informações digitadas pelo usuário (como nome,
endereço de correio eletrônico ou preferência de exibição) e, em seguida, utilizálas quando
o usuário visitar o site novamente.
Botões executam ações quando clicados. Normalmente, as ações incluem o envio ou a
redefinição de um formulário. É possível adicionar um nome ou identificador personalizado
ao botão ou utilizar um dos identificadores predefinidos: “Enviar” ou “Redefinir”.
Caixas de seleção permitem obter múltiplas respostas a partir de um único grupo de
opções. O usuário pode escolher quantas opções forem necessárias.
Botões de opção representam opções exclusivas. A seleção de um dos botões do grupo
cancela a seleção de todos os outros (um grupo consiste em dois ou mais botões com o
mesmo nome). Por exemplo: em um formulário de assinatura de usuário, é necessário
selecionar “sexo masculino” ou “sexo feminino”.
Lista/Menus exibem valores de opção em uma lista de rolagem que permite aos usuários
selecionar várias opções. A opção Menu exibe os valores de opção em um menu popup e
permite aos usuários selecionar apenas um único item.
Menus de salto são listas navegáveis ou menus popup que permitem inserir um menu no
qual cada opção está vinculada a um documento ou arquivo.
Campos de arquivos permitem ao usuário procurar arquivos no computador e efetue o
upload dos arquivos como dados do formulário.
Campos de imagens permitem inserir uma imagem em um formulário. Os campos de
imagens podem ser utilizados para criar botões com aparência gráfica (por ex.: os botões
Enviar e Redefinir).
Projeto eJovem M dulo II: Dreamweaveró 28
5.3. Utilização dos campos de formulário
Os campos de formulário permitem que os usuários digitem texto em um formulário.
Há três tipos de campos de formulário:
• Campos de texto (nos quais o usuário digita uma resposta).
• Campos de arquivos (nos quais o usuário digita o caminho de um arquivo com o
objetivo de efetuar o upload para um servidor).
• Campos ocultos (que armazenam as informações digitadas pelo usuário em outro
campo).
Ao adicionar um campo a um formulário, é possível a sua extensão, o número de
linhas, número máximo de caracteres que podem ser digitados pelo usuário e se é um
campo de senha.
5.4. Como criar campos de texto
Um campo de texto é um objeto de formulário no qual os usuários podem digitar uma
resposta. Há três tipos de campo de texto:
Campos de texto de linha simples normalmente são utilizados para fornecer uma resposta
com uma única palavra ou frase breve, como um nome ou endereço.
Campos de texto de linhas múltiplas fornecem ao visitante uma área maior, na qual
podem digitar uma resposta. É possível especificar o número máximo de linhas que o
visitante poderá utilizar e o número de caracteres que o objeto pode conter. Se o texto
digitado ultrapassar as definições, o campo se estende de acordo com a definição
especificada no atributo de quebra de linha.
Campos de senhas são um tipo especial de campo de texto. Quando o usuário digita em
um campo de senha, o texto inserido é substituído por asteriscos ou marcadores para que
não seja reconhecido, impedindo que a informação seja visualizada.
Observe que as senhas e outras informações enviadas a um servidor por meio de campos de
senhas não são criptografadas. Os dados transferidos podem ser interceptados e lidos como
texto alfanumérico. Por este motivo, é necessário criptografar sempre os dados que deseja
proteger.
Criando um campo de texto
1° Coloque o ponto de inserção dentro do contorno do formulário:
2° Escolha Inserir > Objetos de formulário > Campo de texto.
O campo de texto no documento e o inspetor de propriedades de campos de texto são
exibidos.
Projeto eJovem M dulo II: Dreamweaveró 29
3° No campo Campo de texto, no inspetor de propriedades, digite um nome exclusivo
para o campo.
O nome escolhido deve identificar exclusivamente o campo de texto no formulário. Os
nomes de objetos de formulário não podem conter espaços ou caracteres especiais. Pode ser
utilizada qualquer combinação de caracteres alfanuméricos e um sinal de sublinhado (_).
Observe que o identificador atribuído ao Campo de texto é o nome da variável que
armazenará o valor (os dados digitados) do campo. Este valor será enviado ao servidor para
processamento.
Criação de um campo para upload de arquivos
É possível criar um campo para upload de arquivos que permita ao usuário selecionar
um arquivo em seu computador, um documento de processamento de dados ou arquivo de
imagem gráfica, por exemplo: e efetuar o upload do arquivo para o servidor. Um campo de
arquivos se parece com outros campos de texto, exceto pela presença de um botão Procurar.
O usuário pode digitar o caminho do arquivo do qual ele deseja efetuar o upload ou utilizar
o botão Procurar para localizar e selecionar o arquivo.
Os campos de arquivos requerem o método POST para transmitir os arquivos do
navegador ao servidor. O arquivo é enviado para o endereço configurado no campo Ação do
formulário.
Observação: Antes de utilizar o campo de arquivos, confirme com o administrador do
servidor se é permitido o upload anônimo de arquivos.
Para criar um campo de arquivos em um formulário:
1º Insira um formulário na página (Inserir > Formulário).
2° Selecione o formulário. O inspetor de propriedades de formulários é exibido.
3° Defina o método do formulário como POST.
4° No menu popup Tipo de codif., selecione multipart/formdata.
5° Coloque o ponto de inserção dentro do contorno do formulário e, em seguida,
Projeto eJovem M dulo II: Dreamweaveró 30
escolha Inserir > Objetos de formulário> Campo de arquivos ou clique no ícone de Inserir
campo de arquivos na guia Formulários da barra Inserir.
O campo de arquivos é inserido no formulário.
Como criar um campo oculto
Os campos ocultos são campos de texto utilizados para coletar informações sobre os
usuários. As informações armazenadas nesses campos são transferidas para o servidor
simultaneamente ao envio do formulário.
Quando um campo oculto é inserido, o Dreamweaver adiciona um marcador no
documento. Se você inserir um campo oculto e o marcador não for exibida,selecione Exibir
> Auxílios visuais > Elementos invisíveis para revelar o marcador.
Para criar um campo oculto:
1° Coloque o ponto de inserção dentro do contorno do formulário:
2° Selecione Inserir > Objetos de formulário > Campo oculto.
Um marcador é exibido no documento.
3° No campo Campo oculto, no inspetor de propriedades, digite um nome exclusivo
para o campo.
4° No campo Valor, digite o valor que deseja atribuir ao campo.
Como inserir caixas de seleção e botões de rádio
Utilize os objetos de formulário caixa de seleção e botão de opção para configurar objetos
Projeto eJovem M dulo II: Dreamweaveró 31
de seleção predefinidos. O usuário clica numa caixa de seleção ou botão de opção para
fazer uma escolha.
Como compreender as caixas de seleção e os botões de opção
Nas caixas de seleção, o usuário alterna cada resposta para “inativa” ou “ativa”. Portanto, o
usuário pode selecionar mais de uma opção em um grupo de caixas de seleção. O exemplo
abaixo mostra esse recurso por meio da seleção de três itens nas caixas de seleção: Surfe,
mountain bike e canoagem.
Os botões de opção funcionam como um grupo e fornecem valores de seleção mutuamente
exclusivos. O usuário pode selecionar apenas uma opção em um grupo de botões de opção.
No exemplo abaixo, “canoagem” é a opção escolhida. Se o usuário clicar em “surfe”, o botão
correspondente a “canoagem” será desmarcado automaticamente.
Como criar uma lista de rolagem
As listas de rolagem permitem exibir diversas opções em um espaço limitado. O usuário
pode percorrer a lista e selecionar vários itens.
Para criar uma lista de rolagem:
1° Coloque o ponto de inserção dentro do contorno do formulário:
2° Escolha Inserir > Objetos de formulário > Lista/menu e selecione o elemento
resultante, se necessário. O objeto de formulário Lista/menu será mostrado dentro do
contorno do formulário e o inspetor de propriedades de lista/menu será exibido. Na
Projeto eJovem M dulo II: Dreamweaveró 32
ilustração abaixo, o inspetor de propriedades de lista/menu exibe o botão Dinâmico. Este
botão é utilizado para criar objetos de formulário lista/menu dinâmicos e exibe apenas um
tipo de documento dinâmico escolhido anteriormente.
3° Em Tipo, selecione a opção Lista.
4° Clique em Valores da lista para adicionar as opções.
A caixa de diálogo Valores da lista é exibida.
5° Com o ponto de inserção no campo Identificador do item, digite o texto que deseja
incluir na lista.
6° No campo Valor, digite os dados que deseja enviar ao servidor quando o usuário
selecionar esse item.
Inclusão de botões de formulário
Os botões de formulário controlam as operações relacionadas aos formulários. Utilize
um botão de formulário para enviar ao servidor os dados digitados em um formulário ou
para redefinir o formulário. É possível atribuir aos botões outras tarefas de processamento
definidas em um script. Por exemplo: o botão de formulário deverá calcular o custo total
dos itens selecionados com base nos valores a eles atribuídos.
Inserção de botões de formulário padrão
O estilo dos botões de formulário é semelhante ao do botão padrão do navegador, que
contém texto a ser exibido. Normalmente, os botões de formulário são identificados como
Enviar ou Redefinir.
Para criar um botão de texto:
1° Coloque o ponto de inserção dentro do contorno do formulário:
2° Escolha Iniciar > Objetos de formulário > Botão ou clique no ícone de Botão, no
painel Formulários.
O Dreamweaver insere o objeto de formulário Botão no formulário e exibe o inspetor de
propriedade do botão.
Projeto eJovem M dulo II: Dreamweaveró 33
3° No campo Nome do botão, no inspetor de propriedades, digite um nome para o
botão.
Existem dois nomes reservados: “Enviar”, que envia os dados do formulário para
processamento, e “Redefinir”, que redefine todos os campos do formulário aos seus valores
originais.
4° No campo Identificador, no inspetor de propriedades, digite o texto que será exibido
no botão.
5° Na seção Ação, selecione uma opção. As ações disponíveis são:
Enviar o formulário para processamento quando o botão for clicado. Redefinir o
formulário quando o botão for clicado. Nenhuma para ativar uma ação com base no script
de processamento quando o botão for clicado. Para especificar uma ação, selecione a tag
Form na barra de status da janela do documento para selecionar e exibir o inspetor de
propriedades do formulário. No menu popup Ação, selecione um script ou página para
processar o formulário.
Projeto eJovem M dulo II: Dreamweaveró 34
Capítulo 6. Trabalhando com Camadas
No início a Web era baseada em texto puro. Posteriormente surgiram os links
permitindo ir de uma página para outra. Logo após surgiram as primeiras imagens gráficas
e o layout da página começou a ter mais valor. Foi tentado primeiramente, o mapa de
imagens do lado do servidor. Em geral eram imagens enormes (pesadas) com pontos
sensíveis. Clicar em um desses pontos enviava uma mensagem ao servidor que retornava
um link ao navegador.
Após essa tentativa, foi usada a Camada, que alterou muito o controle de Layout. Só
que com isso cada vez mais foi necessário o uso de camadas aninhadas e gifs com 1 pixel de
largura (espaçadores). Surgiram então, as Folhas de Estilo em Cascata que permitem o
posicionamento absoluto de um elemento na página. Posteriormente surgiram também, a
adição da terceira dimensão (profundidade) que realmente transformou o posicionamento
em Camadas (zindex).
Exemplo:
<div id="layer1" style="position:absolute; visibility:inherit; width:200px; height:115px; z
index:1"></div>
Camadas são escritas usandose a tag <div></div>. Podese escrever também com a
tag <span></span>. A Netscape desenvolveu duas tags adicionais para a utilização em
seu Navegador: 4.x <layer> e <ilayer>. A diferença entre as duas tags esta relacionada ao
posicionamento: <layer>(posicionamento absoluto) e <ilayer>(posicionamento relativo).
Hoje em dia os Navegadores Navigator 6.x não suportam mais essas tags e sim as tags
<div> e <span>.
6.1. Criando Camadas
Você pode criar camadas de três maneiras:
1°. botão Desenhar Camada (painel Inserir > Categoria Layout) ;
2°. inserir > camada ;
Painel Inserir > Categoria Layout > Camada: o ponteiro tornase um cursor em forma
de cruz. Clique em qualquer lugar do documento e arraste o retângulo até obter o tamanho
necessário. Várias alterações ocorrem:
Projeto eJovem M dulo II: Dreamweaveró 35
a. a camada tem uma pequena caixa externamente no canto superior esquerdo (Alça
de Seleção) utilizada para mover a camada. Ao clicar na Alça de Seleção, oito alças de
redimencionamento aparecem na camada;
b. ícone layer pode ser recortado, copiado, colado, reposicionado. Ao mover o ícone,
a camada não se move, você move somente o código da camada para outro local diferente
na origem HTML.
Menu Inserir > Categoria Layout > Camada: diferente de criar uma camada
arrastando/soltando , ao clicar em Menu Inserir> Categoria Layout > Camada, você insere
uma camada por meio de um menu no canto superior esquerdo automaticamente. O
tamanho padrão é 200 pixels de largura por 115 pixels de altura. Mesmo a camada
aparecendo no canto superior esquerdo, no Painel Properties, as coordenadas de posição
estão vazias. Você tem que ficar atendo ao fato de que utilizando esse método de inserção
de camadas , após inserila, indique as coordenadas esquerda e superior, pois caso contrário
ao inserir novas camadas elas ficarão sobrepostas.
6.2. Configurando as características padrão de uma Camada
Você pode editar as características padrão de uma Camada em: Editar > Preferências
> Camadas.
Projeto eJovem M dulo II: Dreamweaveró 36
Tag: configura o código HTML a ser utilizado ao criaruma camada <div> ou
<span>.
Visibilidade: determina o estado inicial de visibilidade de uma camada. Opções:
Default, inherit (herdada), visible (visível) e hidden (oculta).
Largura: configura a largura da camada.Altura: configura a altura da camada.
Cor de fundo: configura uma cor para o segundo plano da camada.
Imagem de fundo: configura uma imagem para o segundo plano da camada.
Aninhamento: marque essa opção se quiser aninhar automaticamente uma camada
na outra (uma dentro da outra).
Compatibilidade c/Netscape 4: deixe marcada essa opção para contornar o problema
conhecido nos navegadores Navigator 4.x, que faz com que as camadas percam suas
coordenadas de posicionamento quando o usuário redimensiona a janela do navegador.
6.3. Modificando uma Camada
Além de poder alterar/editar camadas com o "Inspetor de Propriedades", você também
pode usar o Painel Camadas. Através dele você seleciona qualquer camada na página
rapidamente, altera relacionamento, modifica sua visibilidade e ajusta sua ordem de
empilhamento. Lembrese que para realizar qualquer alteração em uma camada, tanto pelo
Painel Camada quanto pelo Inspetor de Propriedade, você primeiro tem que selecionar a
camada.
6.4. Selecionando uma Camada
Dependendo da complexidade do layout da página, você pode selecionar camadas de
várias maneiras:
1°. quando há camadas que não estão sobrepostas, clique na alça de seleção da
camada que deseja trabalhar.
2° quando há camadas em lugares específicos no código HTML , escolha o ícone
Camada.
3°. quando há muitas camadas sobrepostas, utilize o Painel Camada para escolher a
camada desejada pelo nome.
4º. quando tiver trabalhando com camadas invisíveis, clique na tag <div> ou <span>
no "Seletor de Tag", exibindo assim o conteúdo da camada.
Projeto eJovem M dulo II: Dreamweaveró 37
6.5. Redimensionando uma Camada
Para tal, posicione o ponteiro sobre uma das oito alças de redimensionamento que
cercam a camada selecionada. O ponteiro se transformará em uma seta com dois ou quatro
pontas. Após isto, clique e arraste a camada com um novo tamanho e forma. Você
pode usar também, as setas de seu teclado. selecione a camada e : Ctrl + Seta para
expandir/contrair a camada em 1pixel ou Ctrl + Shift + Seta para expandir/contrair em 10
pixels.
Por default as bordas de uma camada são sempre mostradas no DW, mesmo você não
tendo selecionado a camada. para evitar isto, vá no Menu Exibir > Auxílios Visuais e
desmarque a opção "Bordas de Camadas".
6.6. Movendo uma Camada
A maneira mais fácil é arrastando a alça de seleção. Se você não tiver visualizando a
alça da camada, clique em algum lugar dentro da Camada. Você pode mover sua camada
para qualquer lugar da tela, até mesmo para fora da parte inferior ou lo lado direito. Para
tal, insira um valor negativo na caixa de texto "left" e "top" do Inspetor de Propriedades.
Podese utilizar as teclas da seta também para mover as camadas. Selecione a camada e
qualquer tecla de seta para mover 1 pixel e Shift + qualquer tecla de seta para mover 10
pixels.
Inspetor de Propriedades da Camada
6.7. Cor de Fundo: cor da camada.
Imagem de Fundo: imagem de fundo da camada(obs: se a camada for maior que a
imagem, a imagem é disposta lado a lado).
Corte: medidas para a região exibível da camada. Você determina qual área da camada
será exibida. Todos os valores de recorte são medidos a partir do canto superior esquerdo
da camada(E, D, A, X).
Projeto eJovem M dulo II: Dreamweaveró 38
E: distância medida a partir do ponto de origem á esquerda.
A: distância medida a partir do ponto de origem na parte superior. L: medida
horizontal da camada.
U: medida vertical da camada.
Id. da camada: nome da camada para que a mesma possa ser referenciada por folhas
de estilo ou funções Javascript. Os nomes são muito importantes ao se trabalhar com
camadas. Cada camada deve ter um ID único entre todos os objetos da página Web. O DW
nomeia automaticamente as camadas como (layer1 , layer2 etc...) a medida que elas são
criadas.
Estouro: determina como textos ou imagens maiores que a camada devem ser tratadas
; visible todo o texto ou imagem que "estoura" o tamanho da camada é exibido e as
configurações de altura e largura estabelecidas para a camada são ignoradas .hidden a
parte do texto ou imagem que "estoura" as dimensões , não é exibida scroll adiciona barra
de rolagem horizontal e vertical , independente do tamanho e volume co conteúdo e da
medida da camada .
auto se o conteúdo da camada exceder os valores de largura e de altura, as barras de
rolagem aparecem.
Vi(visibilidade): determina como a camada é exibida ;
default o navegador configura o atributo de visibilidade ,
inherit configura a visibilidade com o mesmo valor da camada pai , visible faz com
que a camada e todo seu conteúdo sejam exibidos , hidden torna invisível a camada atual
e todo seu conteúdo.
detalhes: ao determinar sua visibilidade lembrese que visualizando ou não uma
camada ela continua a ocupar espaço na página e demanda
tempo de carregamento.
Índice Z: ordem de empilhamento da camada em
relação as outras camadas ; as
camadas com o indicez mais altos, são posicionadas
acima das camadas com valores de indicez mais baixos.
Tag: <div> ou <span>. A lista dropdown contém as
tags que podem ser associadas a uma camada. Por padrão a
camada é escrita com a tag <div>.
6.8. Painel Camadas
Nesse painel você gerencia as camadas em sua página
Projeto eJovem M dulo II: Dreamweaveró 39
web. Ele oferece principalmente , uma boa visão das camadas contidas em sua página.
Oferece também um método bem rápido de selecionar uma camada e permite alterar o
índice z de uma camada. Para abrilo: Menu Janela > Outros > Camadas.
No Painel Camadas são listados as configurações de visibilidade, nome e índicez para
cada camada. Você pode alterar qualquer uma dessas propriedades no próprio Painel. A
visibilidade de uma camada é notificada pelo símbolo de olho na coluna um do painel.
Temos então: Olho fechado indica uma camada oculta, olho aberto indica uma camada
visível e nenhum olho indica que o atributo visibilidade esta configurado como padrão
(inherit).
Para alterar um nome de uma camada, dê um clique duplo no nome atual da camada
no painel (segunda coluna) e o nome é destacado. Digite o novo nome e tecle enter. Para
alterar a ordem de empilhamento, siga o mesmo procedimento anterior descrito só que na
terceira coluna. Você pode inserir um número positivo ou negativo.
6.9. Aninhando Camadas
Você pode pelo Painel Camadas, aninhar e desaninhar camadas (criar camadas pai
filho). Para aninhar uma camada dentro da outra:
1°. Janela > Outros > Camadas.
2°. Pressione Ctrl e clique no nome da camada a ser aninhada (filho) e arrastea para a
parte superior da outra camada (pai).
3º. Aparecerá um retângulo em torno do nome da camada pai, então libere o mouse.
4°. Para desaninhar uma camada aninhada, selecione a camada filha e arraste para
uma nova posição no Painel Camadas.
Você também pode excluir uma camada pelo Painel Layer. Destaque a camada a ser
removida e tecle delete.
Sugiro o uso da Régua (Exibir > Régua > Mostrar) e da Grade (Exibir > Grade >
Mostrar Grade) para obterse um posicionamento preciso de camadas.
1.1. Introdução
1.2. Área de Trabalho
1.3. Planejando e configurando um site
1.4. Criando, Abrindo e Salvando documentos
1.5. Definindo as propriedades de um documento
Capítulo 2. Trabalhando com texto
2.1. Como inserir e formatar texto em documento
2.2. Ajustando fontes, estilos, cores e alinhamento
2.3. Inserindo caracteres especiais
2.4. Criando listas
2.5. Trabalhando com cores2.6. Aplicando cores
Capítulo 3. Inserindo hiperlinks no Dreamweaver e trabalhando com imagens
3.1. hiperlinks
3.2. localização de documentos
3.3. Criando hiperlinks
3.4. Criando links de correio eletrônico
3.5. Criando links para download
3.6. Adicionando imagens
3.7. Criando mapas de imagens
3.8. Imagens cambiáveis (rollover)
3.9. Alocando espaço para imagem
Capítulo 4. Criando e modificando Tabelas
4.1. Como inserir uma tabela
4.2. Modificar a tabela
4.3. Mesclar e dividir células
4.3.1. Como dividir a célula e como mesclar as células
4.3.2. Alterar a altura da linha e largura da coluna
4.3.3. Adicionar cor a uma tabela
Capítulo 5. Criação de formulários interativos
5.1. Como criar um formulário
5.2. Como compreender os objetos de formulário
5.3. Utilização dos campos de formulário
5.4. Como criar campos de texto
Capítulo 6. Trabalhando com Camadas
6.1. Criando Camadas
6.2. Configurando as características padrão de uma Camada
6.3. Modificando uma Camada
6.4. Selecionando uma Camada
6.5. Redimensionando uma Camada
6.6. Movendo uma Camada
6.7. Cor de Fundo: cor da camada.
6.8. Painel Camadas
6.9. Aninhando Camadas
Continue navegando
Compartilhar