Apostila Dream Weaver Cs 4

Curso de Dreamweaver CS4
ETB Escola Tcnica de Braslia
ndice
Instalando o Dreamweaver CS4 ................................................................................... 4 rea de Trabalho .......................................................................................................... 8 Interface ....................................................................................................................... 9 Menu Inserir ............................................................................................................. 17 Rguas ....................................................................................................................... 19 Ajustes de Preferncia ............................................................................................... 22 Geral .......................................................................................................................... 23 Acessibilidade ............................................................................................................ 25 Barra de Status .......................................................................................................... 26 Codificao por Cores ................................................................................................ 27 Comparar Arquivos..................................................................................................... 28 Copiar / Colar ............................................................................................................. 29 Dicas de Cdigo ......................................................................................................... 30 Elementos Invisveis ................................................................................................... 31 Elementos PA............................................................................................................. 32 Estilos CSS ................................................................................................................ 33 Fontes ........................................................................................................................ 34 Formato de Cdigo ..................................................................................................... 35 Novo Documento ........................................................................................................ 38 Realce ........................................................................................................................ 39 Regravao de Cdigo ............................................................................................... 40 Site ............................................................................................................................. 42 Tipos de Arquivos / Editores ....................................................................................... 44 Validador .................................................................................................................... 45 Visualizar no Navegador............................................................................................. 46 Criao de Site ........................................................................................................... 47 Configuraes Iniciais da Pgina................................................................................ 56 Propriedades da Pgina ............................................................................................. 56
Aparncia ................................................................................................................... 57 Margens ..................................................................................................................... 61 Links ........................................................................................................................... 61 Cabealhos ................................................................................................................ 62 Ttulo/Codificao ....................................................................................................... 63 Imagem de Rastreamento .......................................................................................... 63 Textos ........................................................................................................................ 64 Criao de imagem de sobreposio.......................................................................... 68 Criao de Listas ........................................................................................................ 70 Imagens ..................................................................................................................... 72 Hyperlinks .................................................................................................................. 75 Links Absolutos .......................................................................................................... 76 Links Relativos ........................................................................................................... 76 Links para E-mails ...................................................................................................... 79 ncoras ...................................................................................................................... 79 Mapeamento de Imagem ............................................................................................ 81 Criao de Templates ................................................................................................ 83
Instalando o Dreamweaver CS4
Clique no boto Instalar Adobe Creative Sute 4 Master Collection
Digite o nmero de srie para validar o software
Clique no boto Aceitar
Escolha o software que deseja, no nosso caso s precisamos do dreamweaver, portanto marca somente ele e clica no boto Instalar.
Clique novamente no boto Instalar para dar continuidade na instao.
Durante a instalao voc acompanhar o andamento do processo atravs da tela acima.
Aps a instalao voc ver a tela com a mensagem de sucesso na instalao, basta clicar no boto sair para iniciar a utilizao do dreamweaver.
rea de Trabalho
Pgina Inicial
Antes de estudarmos a rea de trabalho, verificamos que logo no incio temos uma tela onde podemos manipular documentos. Em Abri um item recente podemos escolher qualquer documento antes criado pelo Dreamweaver. Em Criar Novo 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 opes, clicando em Mais. Se no quiser mais ver a tela inicial ( voc pode usar as opes do menu, tendo os mesmos recursos ), marcando No mostrar novamente Caso marque essa opo e deseje ver essa tela novamente, basta ir ao menu Editar Preferncias e na aba Geral, na rea Opes do Documento, marcando a caixa de seleo Mostrar tela de boas vindas.
Interface
A rea de trabalho do Dreamweaver pode se adequar conforme sua preferncia, voc escolhe a melhor forma para se trabalhar. Pode-se escolher modelos distintos de layout da rea de trabalho atravs do menu Janela Layout do Espao de Trabalho. Opes como Codificador, Designer, Clssico, Tela dual, dentre outros como mostrado na tela abaixo.
Codificador Estilo que usa diretamente a opo de digitao de cdigos, com a possibilidade de inserir elementos externos (como imagens) arrastando da esquerda para a parte do cdigo que deseja.
Designer Escolhendo a opo Designer, logo percebemos que os painis esto trancados na tela (lado direito e na rea inferior). A rea central (branca) representa a pgina que criaremos, onde todos os elementos (texto, mdia) que desejarmos em nossa pgina deve ser colocado nessa rea. Acima dessa rea temos opes que ajudam a desenvolver as pginas.
10
Na parte superior da pgina, temos algumas abas quem mostram o nome dos arquivos abertos, clicando na guia com seu nome para alterar de pgina pra pgina. Abaixo, na parte superior, encontramos os modos de visualizao, onde podemos escolher entre visualizar apenas o cdigo (Cdigo), o cdigo e o design simultaneamente (Dividir) ou somente o design (Design). No menu Exibir tambm temos essas mesmas opes.
1 Definio de ttulo do documento(ttulo da pgina)
11
2 Gerenciamento de Arquivos
3 Visualizao no Browser(navegador)
4 Atualizar visualizao de design
5 Opes de visualizao
12
6 Auxlios Visuais
7 Validar Markup
8 Verificar compatibilidade de navegador
Na parte inferior da pgina temos uma barra onde encontramos algumas funcionalidades: 1 os indicadores das tags HTML usadas, onde mostra o ponto que o cursor estiver posicionado, 2 ferramenta selecionar - Para voltar ao modo normal de criao de elementos do Dreamweaver, devemos escolher a ferramenta selecionar (Seta). 3 ferramenta mo utilizada para mover a pgina quando se tem barra de rolagem, facilita a visualizao da tela.
13
4 ferramenta zoom - conjunto de controles de zoom, que auxilia muito o trabalho de criao de pginas. Essa opo serve somente como auxlio durante a criao. O resultado final o equivalente ao zoom em 100%. Para ativar o campo de zoom, no local onde se encontra a porcentagem de zoom aplicada pgina, clique na seta para baixo e escolha um dos valores predefinidos.
Temos tambm outra opo de zoom, a ferramenta Lupa, que ao ser selecionada torna o cursor uma lupa, onde para dar o zoom basta manter pressionado o boto do mouse. Movimentando, formada uma rea retangular, podendo assim selecionar o que queremos. Uma forma mais fcil ainda, seria clicando com a lupa no local que queremos aproximar, repetindo esse procedimento quantas vezes necessrio. J para diminuir o zoom, com o uso da ferramenta Lupa selecionada pressione a tecla Alt do teclado; no interior da Lupa ter o sinal de subtrao. Clicando em qualquer ponto o zoom diminui. Outra opo e mais prtica para aumentar ou diminuir o zoom usando as teclas de atalho Control + ( aproxima ) e Control ( afasta ). Para percorrer pela tela e ver outros pontos sem precisar diminuir o zoom, basta selecionar nas opes de zoom a ferramenta Mo e arrastar para o local desejado. 5 definio de ampliao - Nessa rea de porcentagem, podemos diretamente digitar o quanto de zoom desejado. 6 resoluo utilizada na pgina,
14
7 tamanho da pgina - informativo do peso do arquivo (em Kb) e o tempo estimado para seu carregamento na web) e 8 padro de codificao. Para alternar entre os painis de um grupo, clique na aba com seu nome. Podendo tambm remover um painel de seu grupo, para isso arraste-o pela aba para o local desejado. Com isso retiramos um painel de seu grupo e colocamos em outro ou deixamos sozinho. Se quiser abrir um painel que no esteja na tela, escolha-o na opo de menu Window. Utilizando a seta que est esquerda do nome do grupo de painis voc pode expandir ou retrair esse grupo. Para remover um grupo de painis, s arrast-lo pela sua barra de ttulo para fora dessa rea. Para anex-lo a alguma rea da tela, basta mov-lo e, quando estiver em um local em que possa ser encaixado, a rea ser destacada. Se quiser que todos os painis fiquem escondidos, clique em F4. Alguns painis possuem opes adicionais que podem ser usadas clicando no cone direita de seu nome, simbolizando trs quadrados pequenos com linhas ao lado e uma pequena seta para baixo. Nas reas dos grupos de painis, existe um boto que serve para retrair essa rea. Caso queira reverter e deixar a rea visvel novamente, clique nesse boto, voltando ao estgio original.
15
Um dos inspetores de maior importncia do software o Propriedades, onde se encontram as principais opes do elemento que estiver selecionado, facilitando o trabalho. Para abrir o inspetor de propriedades, escolha a opo de menu Janela Propriedades.
Aqui encontramos vrios atalhos para formatao das pginas. Podemos formatar um pgrafo, definir uma classe, colocar negrito, itlico, formatar listas ordenadas e no ordenadas, adicionar e remover recuo do texto, inserir hiperlinks e acesso rpido s propriedades das pginas.
16
Menu Inserir
Esse painel se localiza no menu superior e tem vrios elementos que podem ser inseridos na pgina. As opes desse painel esto divididas em vrios conjuntos, cujos nomes aparecem na parte superior do painel. Para escolher um conjunto qualquer do que estiver aparecendo, v at a rea do seu nome e escolha o grupo que deseja. Se quiser que o painel se parea com o do Dreamweaver verso 8 (um menu esquerda com as categorias), escolha a opo Show as Menu nas opes que surgem ao clicar no nome do grupo.
O menu aparecer da seguinte forma:
Quando tiver escolhido essa opo de menu e quiser voltar ao original, escolha entre as opes do menu a opo Mostrar como guias. Para mostrar/ocultar o painel Inserir, escolha a opo de menu Janela Inserir (para o painel Inserir) ou Janela Propriedades (para o inspetor de propriedades). Entre as categorias do painel Inserir temos Personalizar Favoritos, que pode facilmente ser modificada por cada um. Para comear clique no painel Inserir com o boto direito do mouse e escolha a opo de menu Personalizar Favoritos.
17
Na janela que se abre, na parte da esquerda marque a opo que deseja incluir no Favoritos e em seguida clique na seta apontando pra direita (entre as duas reas principais). direita temos opes que fazem parte da categoria. possvel retirar elementos marcando-os e clicando no cone da lixeira, mudar a ordem dos botes e incluir separadores clicando no boto Adicionar separador. Aps a finalizao, clique no boto OK.
18
Rguas
Rguas podem ser utilizadas para saber a distncia entre os objetos que colocar na pgina. Ative a visualizao delas na opo do menu Exibir Rguas Mostrar
Para retirar as rguas, escolha novamente a opo Exibir Rguas Mostrar e s desmarca a opo. Para modificar o ponto de origem das rguas ( 0,0 ), posicione o cursor do mouse sobre o quadrado que fica na parte superior esquerda das rguas (representado por duas linhas cruzadas ) e arraste-o at a posio que quiser o ponto 0,0.
Para voltar a configurao original das rguas, escolha a opo de menu Exibir Rguas Redefinir Origem ou clique duas vezes no quadrado do canto superior. Para escolher a unidade de medida usada pela rgua, pode ser modificada na opo de menu Exibir Rguas, escolhendo entre Polegadas e Centmetros. Partindo da rgua, podemos puxar linhas-guias, que so vistas apenas durante a edio, e no aparecem no resultado final. Para puxar uma linha-guia, coloque o cursor do mouse na rgua na direo que deseja e clique. Mantendo pressionado, arraste a linha para a posio que quiser, junto com a linha guia. Enquanto arrastada, aparece um indicativo da posio ( em pixels ) onde nos encontramos, facilitando o trabalho de estabelecer os limites das reas para a criao, com preciso mxima.
19
Se depois quiser alterar a posio da linha-guia, pode arrast-la ou clicar duas vezes nela, abrindo uma janela, onde voc determina a posio para a linha. Para travar uma linha e no correr o risco de alterar sua posio, utilize a opo de menu Exibir Guias Bloquear Guias.
Outro recurso o de adicionar vrias linhas tanto na vertical quanto na horizontal para estabelecer limites de sua rea. Para remover uma linha, s arrast-la de volta para a rgua. Se quiser remover todas de uma vez, escolha a opo de menu Exibir Guias Limpar Guias. Podemos tambm criar guias que apontem a rea til disponvel quando visualizada uma pgina em um navegador web de acordo com determinadas configuraes de tela. Escolha Exibir Guias e selecione uma das opes ( localizadas abaixo da opo Limpar Guias).
20
Um elemento visual tambm muito til durante a criao de pginas a grade, formada por um conjunto de linhas que se cruzam formando uma espcie de malha quadriculada, ajudando assim a demarcar os espaos entre elementos, muito usada por designers grficos. Para utilizao da grade, escolha a opo de menu Exibir Grade Mostrar Grade para mostr-la na pgina.
Para elementos, como tabelas de layout e camadas, encaixem-se nas linhas da grade, ative a opo Exibir Grade Encaixar na Grade. As configuraes que fizemos (encaixar e visualizar) e outras podem ser feitas pela opo Exibir Grade Configuraes da Grade.
Uma janela de definies da grade em que voc pode escolher: Cor A cor utilizada na visualizao dessa grade. Escolha entre as opes da caixa de cores ou digitar cdigo hexadecimal relativo cor desejada. Mostrar grade/Encaixar na grade O resultado o mesmo das opes de menu que vimos antes. Espaamento Aqui definimos as dimenses dos quadrados que formam a grade tero, digitando um valor e escolhendo no menu a unidade de medida desejada (pixels, polegadas ou centmetros) . Exibir Nessa opo escolhemos as linhas que formam a grade, podendo ser slidas Linhas ou pontilhadas Pontos.
21
Para por em prtica as configuraes, clique com o boto Aplicar. Depois de decidir as opes, clique no boto OK.
OBS: A grade s aparece durante o trabalho no Dreamweaver, na pgina gerada pelo software ela no aparece.
Ajustes de Preferncia
Para obter melhor resultado nos trabalhos com o Dreamweaver CS4, podemos personalizar suas configuraes na janela de preferncias. Para abrir essa janela, escolha a opo de menu Editar Preferncias ou as teclas de atalho Control + U.
22
Preferncias
Geral
Nessa rea configuramos as preferncias gerais do software. Suas configuraes so as seguintes:
Mostrar tela de boas vindas Selecionada, essa opo define que, quando abrir o Dreamweaver, inicialmente aparea na tela janela Start Page, que permite abrir documentos recentes e tambm criar outros. Reabrir documentos ao inicializar Quando estiver marcada, cada pgina que estava aberta, quando fechamos o Dreamweaver, ser aberta da prxima vez que inicializarmos o software. Ativar ao abrir arquivos somente leitura Quando selecionada, aparecer uma caixa de alerta toda vez que for aberto um arquivo configurado como somente leitura. Ativar arquivos relacionados Atualizar links ao mover arquivos Quando essa opo estiver marcada, ao mudar um arquivo do site, movendo-o, renomeando-o ou deletando-o, por exemplo, o Dreamweaver automaticamente muda as referncias a esse arquivo que existiam em outras pginas. Quando escolhida a opo Sempre, atualiza essas referncias automaticamente. Se a opo Solicitar for
23
escolhida, pergunta se deseja atualizar os arquivos, ou no atualiza nenhum arquivo se for escolhida a opo Nunca. Mostrar caixa de dilogo ao inserir objetos Quando estiver marcada, ao incluir algum tipo de elemento na tela, como imagens, aparece uma caixa de dilogo com configuraes que podemos utilizar. Para no ver essas caixas de dilogo, no necessrio desmarcar essa opo; somente manter pressionada a tecla Control quando clicar na opo de inserir o objeto. Ativar entrada inline de bytes duplos Algumas espcies de texto, como o japons, por exemplo, so bytes duplos. Quando escolhida essa opo, podemos digitar diretamente esse tipo de texto no documento. Se no for escolhida, aparecer uma caixa de dilogo que faz a converso do texto nesse tipo. Alternar para pargrafo simples aps cabealho No HTML existe um tipo de formatao chamado cabealho (heading). Quando essa opo estiver marcada, ao pressionar a tecla Enter em um texto com cabealho, automaticamente introduzida uma marcao de pargrafo aps o cabealho. Se aps pressionar o Enter, a opo for desmarcada, o seguinte texto tambm acompanhado por uma nova marcao de cabealho igual anterior. Permitir vrios espaos consecutivos Os navegadores no consideram espaos sucessivos nas pginas, ou seja, se criarmos um cdigo HTML que tenha uma palavra seguida por quatro espaos e outra palavra no navegador, aparecem a primeira palavra seguida de apenas um espao e a palavra seguinte. Para interromper essa formatao, usado um tipo de caractere especial: que simboliza os espaos adicionais desejados. Por padro, o Dreamweaver acompanha o mesmo sistema dos navegadores, desconsiderando os espaos adicionais que digitamos, porque essa opo est desmarcada. Para os usurios acostumados com editores de texto padro, o Dreamweaver permite que ao marcar essa opo seus espaos sejam considerados (coloca automaticamente a formatao para cada espao que for digitado. Usar e no lugar de and No HTML existem dois tipo de formatao principais para os caracteres, sendo elas a formatao fsica e a lgica. Os comandos e simbolizam elementos de formatao lgica para o negrito e o itlico respectivamente. J os comandos e tambm simbolizam negrito e itlico, s que em formatao fsica.
24
Com essa opo marcada, ela utiliza os comandos de formatao lgica; se desmarcada, usa a fsica. Avisar ao incluir regies editveis entre tags ou < hl > < h6 > Se estiver selecionada, temos um alerta quando inclumos regies editveis ( elementos presente nos modelos ) na abrangncia das tags ou em alguma das tags < hl > a < h6 >. Nmero mximo de etapas do histrico Esse valor define a quantidade de passos necessria que ser permitido voltar atrs, seja usando o comando Editar Desfazer (Control + Z), ou usando um painel chamado histrico. Podendo ser um valor entre 2 e 99.999. Dicionrio Ortogrfico Considera o dicionrio a ser utilizado pelo Dreamweaver entre os possveis em seu menu. A opo Portugus (Brasileiro) est disponvel.
Acessibilidade
nessa rea que configuramos as opes de acessibilidade do software.
Mostrar os atributos na insero Marcando as opes Objetos de formulrio, Molduras, Mdia, Imagens, e incluir um
25
desses elementos, abrir uma janela com opes que tornam mais fceis a configurao deles. Manter foco no painel ao abrir Quando for selecionada, faz com que o foco esteja no painel que exibido e no na pgina que est sendo atualizada.
Barra de Status
Velocidade de largura de banda a ser simulada e o tamanho da tela so configuradas nessa rea.
Tamanhos de Janela Esto disponveis vrios tamanhos de janela predefinidos que podem utilizar no programa. Se desejar criar outro tamanho, basta digitar valores para largura e altura, bem como uma descrio para esse tamanho. Velocidade de Conexo Voc escolhe para qual velocidade de conexo quer que o Dreamweaver calcule o tempo estimado de download.
26
Codificao por Cores

Nessa rea configuramos como sero coloridos os cdigos para facilitar a visualizao.
Tipo de Documento Aqui escolhemos o tipo de documento para o qual desejamos configurar o sistema de cores do cdigo. Esse sistema ajuda a encontrar e identificar os cdigos e tambm possveis erros. Para fazer a configurao desse sistema de cores, depois de selecionado o tipo de documento, clique no boto Editar Esquema de Cores.
27
Em seguida, abre-se uma nova janela, onde devemos selecionar o elemento desejado em Estilos de e sua direita, as cores do texto (Cor do texto), Cor do fundo ( do trecho de comando ) e se negrito ( B ), itlico ( I ) ou sublinhado ( U ). Na parte inferior encontramos um exemplo de visualizao do esquema de cores. Aps definir os parmetros desejados, clique no boto OK para retornar janela de preferncias. Fundo Padro Nessa rea escolhida a cor padro do fundo da janela do cdigo.
Comparar Arquivos
Podemos fazer uma comparao de determinados arquivos utilizando algum outro programa (o Dreamweaver no faz isso sozinho). possvel escolher qual programa far isso.
28
Copiar / Colar
Aqui definimos como se comportaro os elementos quando copiados de outro programa e colados no Dreamweaver na visualizao Design.
Primeiramente escolhemos entre as opes Apenas Texto - cola apenas o texto - Texto com estrutura(pargrafos, listas, tabelas e outros) - cola os textos e sua estrutura
29
como pargrafos, por exemplo, mas no sua formatao - Texto com estrutura e formatao bsica(negrito e itlico) - alm do texto e da estrutura, tambm cola algumas formataes bsicas HTML - ou Texto com estrutura e formatao integral(negrito, itlico, estilos) - cola tudo com formatao completa HTML e elementos de folhas de estilo CSS. A opo Reter quebras de linha deixa as quebras de linha no texto a ser colado. A opo Limpar espaamento de pargrafo do Word tira espaos adicionais entre os pargrafos do texto colado.
Dicas de Cdigo
O Dreamweaver nos permite que enquanto digitamos cdigos, podemos receber uma dica rpida do cdigo que possvel digitar. Configuraes dessa opo so feitas aqui.
Tags de Finalizao Decidimos quando ser fechada automaticamente uma tag ( criada a tag de fechamento ); se quando tiver acabado de digitar os caracteres </, se logo aps ter fechado com o caractere > a criao da tag de abertura ou se nunca ( opo Never ). Ativar dicas de cdigo Com essa opo selecionada, ao digitarmos um cdigo no modo de visualizao de cdigo, automaticamente aparecem as opes disponveis para ele dentro de um menu de dicas de cdigo, bastando selecionar a opo que queremos. Na rea Atraso configuramos o tempo necessrio para que o menu de dicas de cdigos
30
se abra. Aqui escolhemos um valor (em segundos) na barra entre 0 e 5. Menus Nessa rea podemos definir as dicas que desejamos disponibilizar. Se quer Nomes das tags, Nomes dos atributos, Valores dos atributos, Mtodos e variveis dos objetos, Entidades HTML, nomes das propriedades de folha de estilo, ferramentas auxiliares nas Dicas de Cdigo como caixa de seleo de cores, seleo de URL ou de fontes e dicas para cdigos do Spry.
Elementos Invisveis
Configuramos aqui as representaes para elementos invisveis.
Mostrar Nesse espao se determinam os elementos invisveis que deseja representados por um cone na tela de desenvolvimento, optando entre: ncoras com nome, Scripts, Comentrios, Quebras de linha, Mapas de imagens do cliente, Estilos incorporados, Campos ocultos de formulrios, Delimitador de formulrios, Pontos de ancoragem de elementos com posicionamento absoluto, Pontos de ancoragem de elementos alinhados, Tags visuais de markup de servidores(ASP, CFML...), Tags no visuais de markup de servidores(ASP, CFML...) e propriedade Exibio CSS determinada como nenhuma. Mostrar texto dinmico como Personaliza como apresentaro na tela de desenvolvimento os textos dinmicos. Se sero representados pelo nome do conjunto de registros (recordset) seguido do nome do campo { Recordset.Field } ou apenas por chaves {}. Incluses no servidor Quando inseridos partes de outros arquivos pelo mtodo Mostrar contedo de arquivo
31
includo, podemos definir se queremos que o contedo inserido seja visvel apenas marcando essa caixa.
Elementos PA
Nesta rea possvel configurar as opes-padro para as DIVs com posicionamento absoluto (reas que podem ter sua posio na pgina definida) usadas no Dreamweaver.
Visibilidade Podemos definir a visibilidade-padro de suas Divs entre quatro opes: default (padro), inherit (quando for aplicado a uma Div aninhada em outra, a interna herda a visibilidade da exterior), visible (visvel) e hidden (escondida). Largura, Altura, Cor do fundo e Imagem do fundo So nessas opes que se definem as configuraes-padro das Divs, como largura, altura, a cor do fundo, podendo escolher diretamente na caixa de cor ou digitando o cdigo hexadecimal e por fim, uma imagem de fundo para ela. Aninhamento Se essa opo for marcada, ao criarmos uma Div na rea interna de outra, a nova ser aninhada anterior, dependendo dela.
32
Estilos CSS
Nessa rea configuramos opes referentes ao CSS ( Cascade Style Sheets Folhas de Estilo em Cascada ), que so elementos responsveis por quebrar limitaes existentes nas marcaes HTML, dando maior vantagem ao designer.
Ao criar as regras de CSS Usar formato abreviado para As opes: Fonte, Fundo, Margem e preenchimento, Borda e largura da borda, Estilo da lista, sero criados com o uso da verso simplificada dos atributos para seus estilos. Por exemplo, o seguinte cdigo define um estilo chamado testeEstilo e utiliza o mtodo convencional. Temos o elemento que est sendo configurado, no caso a fonte, e depois temos os nomes dos atributos dessa fonte que sero alterados seguidos de seus respectivos valores: .testeEstilo{ font-family: courier New , Courier, mono; font-size: 18 px; font-style: italic; } J esse prximo cdigo utiliza a verso simplificada, que no diz os nomes dos atributos, mas digita todos os valores que devem receber: .testeEstilo{ font: italic 18 px Courier New, Courier, mono }
Ao editar regras de CSS Usar formato Com essas opes definimos que ao editar um estilo, se ele usar a verso simplificada apenas se originalmente j a estiver usando (Se original usou formato abreviado), no
33
alterando aqueles que no usarem essa verso, ou se modificar todos com base nos parmetros escolhidos para o item anterior (De acordo com as configuraes acima). Abrir arquivos CSS quando modificados Com essa opo, ao fazermos alteraes em estilos que foram criados em arquivo externo (.css), esses arquivos externos sero abertos para que possam ser modificados. Ao clicar duas vezes no painel CSS Ao clicar duas vezes em algo no painel CSS, escolhemos o que ocorrer; se abrir a janela Caixa dilogo CSS para editar o elemento (Editar usando caixa de dilogo CSS), se editar usando o inspetor de propriedades (Editar usando o painel propriedades) ou se editar na visualizao de cdigo (Editar visualizando cdigo).
Fontes
Nessa rea podemos configurar as fontes utilizadas no programa.
Configuraes de Fontes Escolhemos nessa rea o tipo de codificao a ser utilizado, marcando uma das opes da lista. Fonte Proporcional Selecionando a fonte usada normalmente quando digitamos na tela do Dreamweaver e seu tamanho. Fonte Fixa Tags pre, code e tt utilizam um tipo diferente de fonte por padro (geralmente fontes
34
mono espaadas) e voc escolhe a fonte e o tamanho a serem utilizados com essas tags nessa rea. Visualizao de Cdigo Nessa opo definimos a fonte e o tamanho utilizados na visualizao de cdigo do Dreamweaver. Usar mapeamento dinmico de fontes Marcando essa opo, o Dreamweaver faz um mapeamento dinmico das fontes existentes.
Formato de Cdigo
Nessa parte possvel configurar como ser formatado o cdigo gerado pelo Dreamweaver.
Recuo Escolhendo essa opo, o Dreamweaver endenta (coloca o prximo item um pouco direita) no seu cdigo. Escolhemos tambm se sero includos espaos ou tabulaes, e em tamanho da guia definimos quantos espaos ou tabulaes sero utilizados ( dependendo da escolha do item anterior). Tamanho da Guia Essa opo determina o tamanho utilizado pela tabulao. Esse valor medido em espaos de caracteres.
35
Quebra automtica de linha Se selecionada, o Dreamweaver quebra a linha do cdigo caso ela passe a quantidade de caracteres definida no campo Aps coluna, desde que isso no acabe interferindo na codificao, podendo ocorrer casos de linhas maiores que a largura da janela. Tipo de quebra de linha Tipo de quebra de linha a ser usado no cdigo. Define-se o sistema operacional do servidor remoto: CR LF (Windows), CR (Macintosh) , LF (Unix). Padro de Maiscula e Minscula da Tag Escolhemos como sero escritas as marcaes (tags) HTML, se em letras < minsculas> ou < maisculas >. Funciona para elementos criados a partir das opes do software, no valendo para cdigos que forem digitados diretamente na janela de visualizao do cdigo, a no ser que uma das prximas opes esteja configurada. Padro de Maiscula e Minscula do Atributo Justamente da mesma forma que podemos configurar como as tags sero escritas, tambm podemos definir como os atributos (elementos que configuram as opes da tag) HTML sero escritos, com (minsculas = value ) ou (maisculas =value). Nas verses anteriores do HTML no havia diferena entre utilizar maisculas ou minsculas para tags ou atributos, mas a verso mais atual XHTML utiliza, por padro, minsculas para esses elementos. Ignorar Maisculas e Minsculas Quando marcadas suas opes, o Dreamweaver substitui a formatao de maisculas e minsculas, seguindo as opes j configuradas nos itens anteriores para os elementos que estiverem diferenciados da configurao para as marcaes, caso marque opo Tags, e para os atributos caso marque Atributos. Quando essas opes estiverem selecionadas, as mudanas so feitas inclusive para cdigos digitados diretamente na janela de visualizao do cdigo ou em outro editor. Tag TD Quando marcada a opo No incluir quebra de linha na tag TD, o Dreamweaver no inclui quebras de linha no cdigo escrito (no no contedo) antes e depois de uma tag TD para no causar problemas com verses antigas de navegadores web. Formatao Avanada Realiza definies do cdigo para CSS ou para Bibliotecas de Tags. Clique no boto apropriado e na janela que se abre para efetuar suas configuraes.
36
37
Novo Documento
Aqui ajustamos as opes para novos documentos do Dreamweaver. Entre algumas, temos:
Documento Padro Escolhemos o padro para os documentos que vamos criar para o site, escolhendo no menu o tipo que queremos. Extenso Padro Nessa opo determinamos a extenso padro para os arquivos a serem criados. Tipo padro de documento(DTD) Configuramos o tipo do documento (DTD) gerado pelo Dreamweaver. Vamos escolher XHTM 1.0 Transitional para que os arquivos HTML sigam a recomendao do W3C para XHTML. Codificao Padro Escolhemos a codificao padro das pginas. Se marcar a opo Usar ao abrir arquivos que no especificam uma codificao, a codificao escolhida no menu aplicada a todos os documentos que voc abrir no Dreamweaver que ainda no tiverem suas codificaes definidas. Formulrio de normalizao Unicode Se escolher a codificao Unicode (UTF 8), aplica o formato de normalizao que voc escolher nesse menu. Pode-se tambm incluir uma assinatura Unicode(BOM). Mostrar caixa de dilogo Novo Documento ao pressionar Control + N
38
Se selecionada, deve sempre aparecer a caixa de dilogo para novo documento ao pressionarmos as teclas de atalho Control + N.
Realce
Nessa rea configuramos as cores que o Dreamweaver usa para identificar certos elementos. Certos elementos possuem uma cor especfica que os identifica pelo Dreamweaver. Nessa preferncia escolhemos as cores que queremos, clicando na caixa de cor ou digitando o valor da cor hexadecimal, bem como escolhemos se desejamos identific-lo com uma cor ou no, marcando a caixa mostrar para exibi-la.
Os elementos que podem receber cores para ach-los so: passar o mouse, Regies editveis, Editvel aninhada, Regies, Itens da biblioteca, Tags de outros fabricantes, Live data no traduzido e Live data traduzido.
39
Regravao de Cdigo
Essa rea do Dreamweaver responsvel de reescrever cdigos que j existem em pginas que foram abertas no programa.
Corrigir tags abertas e aninhadas incorretamente Quando escrevermos as marcaes dos cdigos HTML, devemos fech-las sempre de dentro pra fora, para ter um cdigo bem estruturado. Exemplo, no cdigo , texto tamanho 6 e com negrito temos uma marcao de fonte configurada com tamanho 6. O texto inteiro, at que encontremos o fechamento desse comando (), recebe a formatao de tamanho 6, bem como a palavra negrito se encontra ladeada pela marcao de negrito (<6>), recebendo essa formatao. Se escolhermos essa opo de preferncia, o Dreamweaver corrige os cdigos que estejam discordando desse tipo de estrutura e fecha as marcaes que talvez estejam abertas ( exceto comandos HTML que no possuem fechamento ). Renomear itens de formulrio ao colar Quando selecionada, ao copiarmos e colarmos na pgina um elemento de formulrio, ele recebe um nome diferenciado do original. Evitando que tenhamos elementos de formulrio com o mesmo nome. Remover tags extras de finalizao Se o Dreamweaver encontrar uma marcao de fechamento e no encontrar a abertura dessa marcao, e essa opo estiver selecionada, o comando de fechamento sem abertura ser removido.
40
Avisar ao corrigir ou remover tags Nessa rea marcada, ao encontrar uma parte do cdigo que deva corrigir ou remover, o Dreamweaver exibe um alerta sobre o que queira corrigir. Nunca regravar cdigo Em arquivos com extenses Com essa opo, o Dreamweaver no transforma os cdigos em arquivos que tenham as extenses digitadas na caixa de texto na rea direita desse item. Para adicionar extenses, basta digit-la na caixa de texto com o caractere ponto (.) antes do nome da extenso. Caracteres Especiais - Codificar <,>, & e em valores de atributo & Essa opo troca os caracteres <,>, & e pelo caractere & seguido de seu cdigo. Servindo para garantir que apenas caracteres vlidos sero utilizados e corretamente interpretados no navegador. Codificao de URL Escolhida a opo No codificar caracteres especiais, nenhuma mudana feita na URL (endereo); se marcada Codificar caracteres especiais em URLs usando &#, a URL ser verificada e reescrita para conter apenas caracteres vlidos; caso marque a opo Codificar caracteres especiais em URLs usando %, temos a certeza de que nas URLs utilizadas, caracteres especiais sero escritos com o smbolo % seguido de seu cdigo especfico. Garantindo que somente caracteres vlidos sero usados e compatibilidade com a grande maioria dos navegadores. Ativar Contedo Em alguns casos no Internet Explorer (de acordo com a verso, atualizao etc.) podemos ter problemas com contedos como o Flash, Quick Time, Acrobat Reader e outros. Para resolver isso, existe um cdigo JavaScript que automaticamente inserido quando utilizamos no Dreamweaver algum contedo Flash e Shockwave. Se marcarmos a opo Inserir usando browser salvando scripts, o Dreamweaver tambm inclui esse JavaScript para outros contedos que possam experimentar esse tipo de problema. Se marcarmos tambm a caixa Converter tags em scripts em arquivos abertos, a converso ( em vez de utilizar as tags, usar o cdigo JavaScript j corrigindo o problema ) acontece quando abrir o arquivo no Dreamweaver.
41
Site
Aqui so definidas as preferncias do painel do site.
Mostrar Sempre Configuramos o site (local ou remoto) que aparecer em um dos lados da janela: esquerda ou direita. Arquivos Dependentes Todos aqueles aos quais o cdigo HTML faz referncia (imagens, por exemplo). Voc define se quer ser avisado ao fazer a obteno/retirada (download do arquivo do site remoto) na opo Avisar na obteno/retirada ou colocao/devoluo (upload no site remoto) na opo Avisar na colocao/devoluo. Conexo de FTP Marcando essa opo, se voc estiver conectado ao seu site FTP e se mantiver inativo pelo tempo estipulado direita desse item, ser automaticamente desconectado. Tempo limite do FTP Aqui configuramos o tempo mximo que o Dreamweaver faz tentativa de se conectar com o site FTP. Opes de transferncia por FTP Configura-se aps quanto tempo ser escolhida a opo padro de determinada caixa de dilogo durante o FTP, se o usurio estiver inativo durante esse perodo. Host de Firewall Se voc se encontrar atrs de um firewall, deve especificar seu endereo nessa rea;
42
caso contrrio, deve deix-la em branco. Porta de Firewall Voc escolhe, se estiver atrs de um firewall, a porta a ser utilizada se ela for diferente da porta 21. Opes de colocao Se marcada a opo de Salvar os arquivos antes de coloc-los, ao utilizarmos a opo de colocar os arquivos, o Dreamweaver salva todas as pginas ainda no salvas antes de envi-las. Opes de Transferncia Quando marcada a opo Avisar antes de mover arquivos no servidor, ao mover arquivos que se encontram no seu servidor remoto aparece um aviso. Gerenciar Sites Clicando nesse boto, a janela responsvel pelo gerenciamento dos sites aberta.
Aqui voc consegue adicionar as configuraes dos sites que deseja gerenciar, consegue editar, duplicar, remover, exportar e importar.
43
Tipos de Arquivos / Editores

Outros softwares podem ser abertos para editar os arquivos diretamente a partir do Dreamweaver.
Abrir na visualizao de cdigo As extenses de arquivos que digitamos na caixa de texto direita dessa opo, ao serem abertas no Dreamweaver, j acontecem no modo de visualizao de cdigo. Editor de cdigo externo Podemos escolher um editor externo para seus cdigos clicando em Procurar e escolhendo o executvel do programa. Recarregar Arquivos Com essa opo, determinamos o que deve acontecer caso um arquivo aberto no Dreamweaver seja editado em um editor externo; se ser atualizado sempre, nunca ou se ir solicitar. Salvar ao Iniciar Ao solicitar um editor externo para modificar o cdigo, voc pode definir se o arquivo no Dreamweaver, antes de abrir o outro software, ser salvo sempre, nunca ou se ir solicitar. Fireworks Aqui se indica o trajeto at o executvel do Fireworks CS4, caso o possua em seu computador.
44
Criao de Associaes a Editores Externos Primeiro escolhemos na rea Extenses a extenso que deseja utilizar em um editor externo ( caso a extenso desejada no se encontre na lista, voc deve cri-la clicando em adicionar ( + ) e digitando sua extenso ). Escolhida a extenso, clique no boto adicionar ( + ) da rea Editores e procure o executvel do editor a ser utilizado. Se o desejar como primrio, basta clicar no boto Tornar Primrio.
Validador
Utilizamos essa opo para verificar se nos cdigos existem erros nas tags ou de sintaxe.
Se nenhum DOCTYPE for detectado, validar em relao a Nesta parte configuramos o tipo de cdigo que vai utilizar como referncia para aplicar a validao, caso no tenha sido detectado o tipo de documento, restando apenas escolher as opes na lista disponvel.
45
Opes do validador
Clicando nesse boto, pode-se especificar se o validador deve mostrar Erros, Avisos, Mensagens personalizadas, Erros de aninhamento e se deve verificar erros de Aspas no texto e Entidades no texto.
Visualizar no Navegador
Escolhemos as configuraes para visualizao dos arquivos no navegador.
46
Navegadores Podemos definir os navegadores a serem usados para a visualizao das pginas. possvel adicionar um navegador clicando no sinal (+) e definir se ele ser primrio (chamado pela tecla de atalho F12), marcando a opo Navegador Primrio ou secundrio (chamado por Control + 12), marcando Navegador Secundrio. Visualizar usando arquivo temporrio Selecionado, cria uma cpia temporria do arquivo no servidor para podermos visualizla.
Criao de Site
Quando estamos no projeto de um site, precisamos ter organizao para que as pginas no fiquem espalhadas. O Dreamweaver nos d a opo de organizar os projetos em sites, para auxiliar o trabalho e o gerenciamento dos arquivos. A etapa da criao do site deve sempre preceder o desenvolvimento das pginas. No final do trabalho de criao, utilizando o prprio Dreamweaver, podemos enviar seus arquivos para um provedor de hospedagem. Podemos ter vrios sites configurados no programa, afinal, voc pode trabalhar em mais de um projeto ao mesmo tempo. Para comear, vamos criar um site sem pginas dinmicas com a opo de configurao bsica. Mais adiante, vamos alterar o site para que ele utilize pginas dinmicas, e configur-lo com a opo avanada de configurao. Para criar um site, inicialmente escolha a opo de menu Site Gerenciar Sites.
47
Abre-se a janela responsvel pelo gerenciamento de sites a serem utilizados no Dreamweaver CS4.
Clicando no boto Novo, na janela que se abre escolha a opo Site. Outra forma de atingir o mesmo resultado na pgina inicial, clicar na opo Site do Dreamweaver.
48
Abre-se a janela de definio do site. Usaremos a opo de configurao bsica. Nessa primeira etapa, chamada Edio de Arquivos, definimos um nome que identifica o site no Dreamweaver e seu endereo (URL). O nome criado tem importncia somente para o Dreamweaver e para sua organizao. Na opo Como voc deseja nomear o site?, escolha o nome a ser usado no projeto, que ser ETB.
O endereo do site (sua URL) deve ficar em branco, pois s utilizaremos um endereo posteriormente. Apenas para citar, por enquanto, digitamos o endereo do servidor onde as pginas esto hospedadas. Aps escolher o nome, clique no boto Avanar para chegar prxima etapa. Iniciamos agora a etapa chamada Editando Arquivos, Parte 2.
49
Nessa parte configuramos a criao de um site que necessita de alguma tecnologia de servidor, como, por exemplo, ASP, ASP.NET, PHP, ColdFusion ou JSP. Para essa primeira etapa no h necessidade de utilizar tecnologia de servidor, portanto escolhemos a opo No, no desejo usar uma tecnologia de servidor.
Quando estiver num projeto que a utilize, voc pode digitar a opo Sim, desejo usar uma tecnologia de servidor. Quando empregarmos a tecnologia de servidor para esse site, vamos aprender a usar a opo avanada para definio do site.
50
Depois de configurado essa opo, clique no boto Avanar para passar a prxima etapa chamada Editando Arquivos, Parte 3. O primeiro item a configurar nessa etapa como voc deseja trabalhar com seus arquivos: se deseja editar cpias locais nesse computador e efetuar o upload ao servidor quando terminar, que a opo que utilizaremos e a mais recomendada, ou a segunda opo, se deseja editar diretamente no servidor usando a rede local.
51
Logo em seguida preciso clicar no cone de pasta inferior e escolher a pasta em que sero gravados os arquivos do site. Sendo assim, o Dreamweaver saber que os arquivos do site devem ser armazenados nessa pasta. Clique em Avanar para ir prxima etapa Compartilhando Arquivos.
52
Nesta parte definimos como o Dreamweaver vai se conectar ao servidor remoto. Entre as opes temos:
FTP Ao escolher a opo FTP, voc deve informar o endereo do FTP que utilizar ( algo como ftp.seusite.com.br ), a pasta, seu login, senha e, se desejar, testar a conexo. Local/Rede Nessa opo informe a pasta local ou da rede a ser utilizada. WebDAV J se a conexo com o site remoto utilizar o protocolo WebDAV, voc pode test-la clicando no boto Testar conexo.
53
RDS Se a conexo com o site remoto for por Remote Development Services (RDS), para poder configur-la deve clicar no boto Configuraes, ao clicar aparecer a seguinte janela:
Microsoft Visual SourceSafe Se a conexo com o site remoto utilizar banco de dados SourceSafe, para configur-la utilize o boto Configuraes, ao clicar aparecer a seguinte janela:
Na fase inicial, na opo de conexo com o servidor, utilizaremos a opo Nenhuma. Concluda essa etapa, clique em Avanar. Somos enviados rea Resumo, que mostra um pequeno relatrio das opes escolhidas. Para finalizar, clique no boto Concludo. Agora, quando abrirmos o painel Gerenciar Sites, veremos o site recm-configurado. Com o nome de um site selecionado nesse painel temos a opo de edit-lo (clicando no boto Editar, abre-se novamente a janela de definio do site), duplic-lo
54
(clicando em Duplicar, criar-se um cpia do site), remov-lo (clicando em Remover) ou ainda exportar a definio do site (clicando em Exportar), que gera um arquivo no formato .ste que pode ser usado em outra mquina com o Dreamweaver CS4, para importar essa definio (clicando no boto Importar e escolhendo esse arquivo) na janela que se abre.
55
Configuraes Iniciais da Pgina Propriedades da Pgina

Criaremos outro arquivo escolhendo a opo de menu Arquivo Novo.
A janela Novo Documento aberta, na rea da esquerda escolhemos o que queremos criar, se um pgina em branco, um modelo em branco, uma pgina a partir de um modelo, uma pgina a partir de uma amostra ou um outro tipo de arquivo. Escolha a opo Pgina em branco. Na parte central (Tipo de Pgina) voc deve escolher a categoria desejada e na parte direita (Layout) as caractersticas visuais dessa pgina. Nesta primeira etapa, vamos escolher Tipo de Pgina a opo HTML e em Layout a opo <nenhum(a)>. Temos outras opes como anexar uma folha de estilos CSS, criar baseado em um layout etc. Clique no boto Criar para criar sua pgina. Vamos criar a primeira pgina com o Dreamweaver, e o primeiro item a ser examinado neste captulo ser a configurao da pgina. Para configurar as propriedades da pgina, selecione a opo de menu Modificar Propriedades da Pgina, que abre a janela que vamos utilizar. As opes esto divididas em diversas categorias a serem configuradas e o Dreamweaver usa principalmente folhas de estilo (CSS) para as definies de uma pgina.
56
Aparncia
Fonte da Pgina Definimos o tipo padro da fonte a ser utilizada no documento. As fontes se encontram em grupos de trs. Se no encontrar a primeira fonte na mquina do usurio, ser escolhida a segunda e assim por diante. Caso desejar uma fonte ou grupo de fontes que no se encontrem entre as opes, escolha Editar Lista de Fontes.
Na janela que se abre, na parte superior surge a lista das fontes que esto disponveis
57
nos grupos existentes. Na parte inferior direita aparecem as fontes existentes em seu computador, bastando, para criar sua lista de fontes, selecionar uma no lado direito e clicar no boto de adicionar as fontes escolhidas (simbolizado pela seta apontando para a esquerda). Dessa mesma forma podemos adicionar fontes sua lista. Quando concludo, clique em OK e sua lista de fontes estar disponvel. Os botes B e I indicam, respectivamente, texto em negrito e em itlico. Tamanho Escolha o tamanho do seu texto. O HTML por padro usa um valor de 1 a 7. Ou simplesmente digite o valor e escolha a unidade de medida desejada ( pixels, cm etc.). Ser criado um estilo ( CSS ) para utilizar esses tamanhos, no nos limitando, portanto, a utilizar um tamanho padro HTML. Cor do texto Define a cor-padro para os textos da pgina, o que no significa que todos utilizaro somente essa cor. Mais adiante veremos que podemos definir cores para trechos especficos de texto. possvel digitar o valor de cada cor em hexadecimal. Os valores da cor se formam de trs pares representando as cores vermelha, verde e azul #rrggbb ( formato RGB ) precedidos pelo caractere #. Cada par pode receber um valor entre 00 e FF ( equivalente em nmeros decimais a um valor entre 0 e 225 ). Por exemplo, a cor #FF0000 representa no formato RGB ( #rrggbb ) o valor mximo de vermelho, nada de verde e nada de azul, ento, a cor ser o vermelho-puro. Dessa mistura de valores surgem as cores. Ao falarmos de cores, nos deparamos com uma situao. Como nem todos os usurios possuem as mesmas caractersticas (sistema operacional , por exemplo), a configurao de cores pode no ser a mesma para todos. Para resolver este problema, vamos utilizar uma paleta de cores chamada cores seguras, composta por somente 216 cores que aparecem da mesma forma para todos os usurios. Essa paleta se utiliza das 256 cores bsicas do Windows e do MAC, mas 40 delas so diferentes entre esses sistemas, portanto a paleta cores seguras utiliza apenas as restantes. Para saber se uma cor segura, verificamos se os pares das rr, gg, e bb so compostos apenas pelos valores 00, 33, 99, CC, FF. Exemplo, #000033 uma cor segura, #66CCFF tambm, porm #00DDCC no uma cor segura nem #65CCFF. Podemos tambm, em vez de digitar o valor em hexadecimal da cor, escolher uma delas clicando na caixa de cores Na caixa aparecem diversas cores. Movimentando o conta-gotas sobre elas e clicando na cor que deseja. Se quiser voltar a usar a cor padro de um elemento, selecione o
58
quadrado branco com um risco vermelho que se encontra na parte superior da caixa.
Se desejar escolher uma cor que no tenha na paleta, clique em Cor do sistema (simbolizada por um crculo colorido com diversas cores) e defini-la na janela que se abre. Cor do Fundo Define a cor de fundo da pgina. muito importante que esse campo esteja configurado tambm quando usamos uma imagem de fundo da pgina. Por exemplo, se usarmos uma imagem escura de fundo da pgina e configurarmos os textos com cores claras e por qualquer motivo a imagem no for carregada (erro no endereo configurado etc.), o Dreamweaver coloca o branco (padro) como fundo e no haver contraste entre o fundo e os textos, dificultando ou at mesmo impossibilitando a leitura. Portanto, sempre que utilizar imagens como fundo da pgina, configure uma cor de fundo semelhante cor de imagem.
Imagem de Fundo Selecione alguma imagem que deseja utilizar. Ao escolher a imagem, se ela no estiver no diretrio do site, aparece uma caixa de dilogo avisando que o arquivo encontra-se fora da pasta configurada para o site e perguntando se deseja copi-lo para a pasta. Caso isso ocorra, basta responder sim para que a imagem seja copiada para a pasta que foi configurada.
59
Clicando no boto OK, voc vai perceber que a imagem foi repetida muitas vezes na tela. Isso acontece porque ao colocar uma imagem como fundo para uma pgina, se for de tamanho superior ao da pgina, apenas a rea equivalente parte disponvel da tela ser visualizada. Caso a imagem seja de tamanho inferior pgina, ser repetida at preencher toda a tela (esse processo muito semelhante ao de colocar uma imagem como fundo para o desktop do computador). Para remover a imagem, basta deletar seu nome da rea Imagem do Fundo, deixando-a em branco. Repetir Como vimos anteriormente, por padro, quando uma imagem aplicada ao fundo de um elemento ou da prpria pgina, se ela for maior do que o espao que a receber como fundo, apenas as reas comuns entre o elemento e a imagem sero mostradas. Caso a imagem seja menor, ela repetida at preencher todo o elemento (no caso a pgina). Podemos alterar esse procedimento nessa opo de estilo, escolhendo se a imagem de fundo ser sem repetio (no-repeat, ser aplicada apenas uma vez na pgina), repetir (repeat, a imagem ser repetida at preencher a pgina), repetir x (repeat-x, repete a imagem apenas na horizontal) e repetir y (repeat-y, repete a imagem apenas na vertical).
60
Margens
Aqui definimos uma margem (espao entre um lado do navegador e o incio do contedo da pgina), Margem esquerda, Margem direita, Margem superior e Margem inferior.
Links
Nessa categoria definimos as caractersticas visuais que os links existentes na pgina tero como padro.
Fonte do Link Define-se a fonte padro a ser usada nos links. O procedimento para configurar a fonte o mesmo que vimos anteriormente na opo Fonte da Pgina. Caso desejar a mesma fonte configurada nessa opo anterior, basta escolher a opo Idntica Fonte da Pgina. Temos ainda negrito (B) e itlico (I). Tamanho Definimos o tamanho da fonte do link (mesmo procedimento visto tambm anteriormente). Cor do Link Ajustamos a cor que os links tero. Links de Configuramos a cor que o link ter quando o usurio estiver passando o mouse sobre ele, criando um efeito muito interessante. Links Visitados
61
Quando visualizamos os links existentes numa pgina, voc pode ter uma diferenciao que indique ao usurio os links que ele j visitou, bastando escolher a cor para eles nessa rea. Links Ativos Voc escolhe a cor que deve possuir o link em que o usurio clicou. Estilo Sublinhado Configuramos aqui mais um ajuste visual bastante utilizado hoje em dia, especificando como ser o comportamento do sublinhado do link. O link pode ser Sempre sublinhado, Nunca sublinhado, Mostrar sublinhado somente em sobreposio ou Ocultar sublinhado em sobreposio.
Cabealhos
O HTML tem seis opes de cabealho a serem utilizados como ttulos, textos especiais etc. chamadas Cabealho e numeradas de 1 a 6.
Podemos configurar as caractersticas visuais padro para esses elementos. Fonte do Cabealho definida a fonte-padro a ser utilizada nos cabealhos. O procedimento para configurar a fonte o mesmo. Se desejar a mesma fonte configurada na opo anterior, escolha a opo Idntica fonte da pgina. Temos ainda negrito (boto B) e itlico (I). Cabealho 1 a 6 Nas reas respectivas a cada um dos cabealhos, configuramos individualmente suas
62
caractersticas de tamanho (mesmo procedimento j conhecido) e cor.
Ttulo/Codificao
Ajustamos o ttulo e a codificao usada no documento. Ttulo O primeiro item a ser ajustado o ttulo. Digite o texto Primeira Pgina. O ttulo de uma pgina o texto que aparece na parte superior do navegador do usurio.
Outra maneira de fazermos isso na parte superior da janela do Dreamweaver na rea Ttulo. Tipo de Documento (DTD) Aqui onde definimos o tipo de documento (DTD), ou seja, qual padro de tipo seguir, escolhendo entre as opes disponveis. Codificao Nessa rea selecionado o tipo de codificao de caracteres utilizados na pgina
Imagem de Rastreamento
O Dreamweaver tem uma opo muito interessante para ajudar a criar uma pgina, seguindo um modelo de interface que j tenha sido criado em um software grfico, como Fireworks, Photoshop etc.
63
Esse sistema se chama Imagem de Rastreamento que uma imagem colocada como fundo na pgina apenas enquanto utilizamos o Dreamweaver, no sendo incorporada ao resultado final (a pgina HTML). Para remover a imagem de rastreamento, basta apagar o nome dela que est no campo Imagem de Rastreamento da janela de propriedades da pgina. Repare que na parte superior do Dreamweaver temos uma aba com o nome do arquivo. Por enquanto est a palavra Untitled, que simboliza o nome do arquivo e um sinal de asterisco, que aparece sempre que voc faz alguma alterao no arquivo e ainda no o tenha salvado aps a alterao, funcionando como um lembrete.
Textos
Criaremos outra pgina a ser usada neste captulo, salve-a com o nome texto.html. Clicando na pgina, o cursor ser posicionado na parte superior esquerda. Digite o texto Textos Dreamweaver CS4, em seguida aperte a tecla Enter. No Dreamweaver a tecla Enter tem a funo de colocar um novo pargrafo no HTML, por isso h um espao maior entre a primeira e a segunda linha. Se quiser um espao menor, apenas uma quebra de linha, voc deve pressionar as teclas Shift + Enter (esse atalho insere no HTML o comando responsvel por simples quebras de linhas).
64
Mantenha o pargrafo (criado com a tecla Enter) em vez de uma quebra de linha e nessa segunda linha digite o texto Para inserir pargrafos usamos a tecla Enter. Agora temos duas linhas e vamos aprender a configurar as propriedades disponveis para o texto. Para ajustarmos as propriedades de um elemento, utilizamos o Inspetor de Propriedades. Caso no esteja disponvel na tela, voc pode abri-lo utilizando a opo de menu Janela Propriedades ou ainda Modificar Propriedades da Seleo. Esse painel se altera de acordo com o elemento que estiver selecionado no momento, informando as propriedades dele que podemos alterar. Selecione a primeira linha do texto inteira.
No Dreamweaver CS4 temos separadas as opes de HTML e de CSS, como mostrado na imagem acima. Vamos conhecer agora as opes de configurao para o texto: Formato Podemos escolher entre nenhum, pargrafo, cabealhos de 1 a 6 (formatao para cabealhos com tamanho e estilos predefinidos) e pr-formatado, admite espaos adicionais e outras opes, altera a fonte para uma fonte mono espaada. Experimente as opes disponveis para se familiarizar com elas e ao final mantenha a opo de pargrafo. Fonte A fonte um problema parte no design de uma pgina, uma vez que o usurio final precisa t-la instalada em sua mquina para que seja possvel visualizar a pgina da maneira idealizada pelo designer. Caso no possua a fonte escolhida, ela ser substituda e pode gerar resultados completamente diferentes do desejado. Voc mesmo pode definir a fonte a ser utilizada no trecho selecionado. No Dreamweaver, como j vimos, as fontes aparecem em grupos de trs, indicando uma seqncia a ser observada. Se o usurio no tiver a primeira fonte escolhida, automaticamente ela ser
65
substituda pela segunda da lista, que caso tambm no exista na mquina do usurio, ser substituda pela terceira fonte, e caso esta no seja localizada, ser substituda por uma fonte-padro. Para o texto selecionado escolha a opo Arial, Helvetica, Sans-serif.
Tamanho Como vimos, ao configurar as propriedades da pgina, podemos utilizar diversos tipos de valores e unidades de medida. Para exemplo deixe o tamanho no valor 24 pixels. Cor Escolhemos a cor de texto que desejarmos. Basta clicar na caixa e escolher uma cor ou digitar no campo direita da caixa de cor o valor em hexadecimal. Escolheremos a cor vermelha. Negrito/Itlico Para aplicar os efeitos de negrito (opo B) ou itlico (opo I) no texto, basta selecionlos como num editor comum. Alinhamento Aqui escolhemos o alinhamento que o trecho seguir; se esquerda, ao centro, direita ou justificado. Deixe o alinhamento ao centro. Classe O Dreamweaver trabalha especialmente com estilos (CSS), ao ajustarmos as propriedades do texto, na realidade criamos um estilo que pode ser visualizado (j com suas caractersticas) na opo Classe. Podemos modificar o nome de estilo escolhendo em seu menu a opo Renomear.
Abre-se uma janela em cuja rea Novo Nome digitamos o novo nome. No exemplo digite Classe Fonte. Para aplicar esse estilo que ajustamos outra linha, basta selecion-lo e no inspetor de propriedades, na opo Classe, escolher incio que o estilo que criarmos. Perceba que agora a segunda linha tem as mesmas configuraes ajustadas na primeira.
66
Espaos Coloque o cursor na segunda linha entre as palavras pargrafos e usamos e experimente inserir novos espaos entre eles. O Dreamweaver no os colocar porque o HTML no considera espaos adicionais, apenas um espao entre palavras e nas preferncias essa opo ficou mantida. Para utilizar mais espaos, voc deve usar as teclas de atalho Control + Shft + Espao. Esse atalho insere no cdigo o texto que um tipo especial de caractere interpretado pelo navegador como um espao adicional. Assim como possumos esse tipo especial, as palavras acentuadas so substitudas no cdigo pelo Dreamweaver pelos cdigos especiais para elas (por exemplo, a letra simbolizada no cdigo por Eaacute). Se a formatao configurada para o trecho for de texto pr-formatado, o Dreamweaver aceita espaos adicionais. Apenas pressionando a barra de espao e a tecla Enter insere quebras de linha. Outra maneira de colocar quebras de linha, espaos adicionais e caracteres especiais por meio do painel Inserir escolher a opo Texto. Nessa parte se encontram entre tantas outras caractersticas para texto, ao clicar sobre sua ltima opo, vrias opes de caracteres especiais (como libra, copyright etc.), a quebra de linha (representada pelo cone BR) e o espao adicional (representado pelo smbolo de uma barra com uma seta apontando para baixo) e outras opes.
Se no Painel Inserir voc escolher a opo HTML/Caracteres Especiais/Outro..., aparece uma janela com diversas opes disponveis, restando apenas escolher uma e clicar em OK.
67
Criao de imagem de sobreposio

Voc pode inserir imagens de sobreposio na pgina. Uma sobreposio uma imagem que, quando visualizada em um navegador, alterada quando o ponteiro se move sobre ela. Voc deve ter duas imagens para criar a sobreposio: uma imagem primria (a imagem exibida quando a pgina carregada pela primeira vez) e uma imagem secundria (a imagem que aparece quando o ponteiro se move sobre a imagem primria). As duas imagens em uma sobreposio devem ter o mesmo tamanho. Caso contrrio, o Dreamweaver redimensiona a segunda imagem de modo que corresponda s propriedades da primeira imagem. As imagens de sobreposio so automaticamente definidas para responder ao evento onMouseOver. Voc pode definir uma imagem para responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposio. Na janela Documento, coloque o ponto de insero no local em que a sobreposio deve aparecer.
68
Insira a sobreposio usando um destes mtodos: Na categoria Comum do painel Inserir, clique no boto Imagens e selecione o cone Imagem de sobreposio. Com o cone Imagem de sobreposio exibido no painel Inserir, voc pode arrastar o cone para a janela Documento. Selecione Inserir > Objetos de imagem > Imagem de sobreposio.
Defina as opes e clique em OK. Nome da imagem O nome da imagem de sobreposio. Imagem original A imagem a ser exibida quando a pgina for carregada. Digite o caminho na caixa de texto ou clique em Procurar e selecione a imagem. Imagem de sobreposio A imagem a ser exibida quando o ponteiro movido sobre a imagem original. Digite o caminho ou clique em Procurar para selecionar a imagem. Pr-carregar imagem de sobreposio Pr-carrega as imagens no cache do navegador para que no ocorra nenhum atraso quando o usurio mover o ponteiro sobre a imagem.
69
Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto. Ao clicar, vai para URL O arquivo que voc deseja abrir quando um usurio clica na imagem de sobreposio. Digite o caminho ou clique em Procurar e selecione o arquivo. Nota: Se voc no definir um link para a imagem, o Dreamweaver inserir um link nulo (#) no cdigo-fonte HTML ao qual o comportamento de sobreposio anexado. Se voc remover o link nulo, a imagem de sobreposio no funcionar mais. Selecione Arquivo > Visualizar no navegador ou pressione F12. No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposio.
Criao de Listas
Selecione o texto todo que est na segunda linha da pgina: Para inserir pargrafos usamos a tecla Enter e substitua pelo texto Itens. Formate-o com a cor azul e tamanho 16 pixels. Pressione a tecla Enter e digite o texto produto 1, em seguida pressione Enter novamente para inserir um novo pargrafo, digite produto 2 e assim por diante at o produto 5.
Vamos criar uma marcao de lista para os itens. Selecione os cinco itens. Clique no boto de lista no ordenada no inspetor de propriedades (representado pelo smbolo de trs pequenos quadrados seguidos de linhas). Automaticamente ser adicionado esquerda de cada um de seus itens um marcador. Posicione o cursor em qualquer lugar dentro da lista. No inspetor de propriedades, pressione o boto Item de Lista. Ser aberta a janela Listar Propridades, na qual se define o tipo de lista: se utiliza marcadores, numerao, se de diretrios ou de menus. Mantenha marcadores.
70
Em Estilo podemos escolher o tipo de marcador que ser usado : se padro ( Default ), marcador ( Bullet ) ou quadrado ( Squere ).
Escolha quadrado e clique em OK. Repare que todos os itens possuem marcadores quadrados agora. Posicione o cursor em qualquer lugar na linha do item 4 e clique em Item de lista. Na janela Listar Propriedades, vamos configurar a opo Item Lista. Escolha em Novo estilo a opo Marcador e clique em OK.
Repare que todos so representados por quadrados, exceto o item 4. Selecione novamente os cinco itens e clique no boto de lista ordenada (representado pelos nmeros 1 e 3 seguidos de linhas) no inspetor de propriedades. Essa opo coloca marcadores com numerao para os itens. Coloque o cursor em qualquer lugar da lista e clique no boto Item Lista. Repare que voc poderia apenas ter trocado o tipo de lista nessa janela em vez de escolher o boto de lista ordenada. Em estilo voc pode escolher entre algarismos, romanos minsculos, romanos maisculos, letras minsculas e letras maisculas). Escolha Algarismos.
71
No campo Iniciar voc pode definir em qual nmero deve comear a contagem da lista.
Recuo de Texto Podemos endentar (colocar algumas posies direita) um trecho de texto clicando no boto Recuo de texto, representado por uma seta para a direita, duas linhas grossas e duas finas abaixo. Voc pode endentar o texto mais vezes. Coloque o cursor no final do item 5 e pressione Enter. O Dreamweaver acha que vai ser colocado um novo item na lista. Pressione o boto Lista ordenada para desmarc-lo e parar a numerao. Agora digite o texto Recuo de texto e pressione algumas vezes o boto Recuo de texto. Para remover um recuo, clique no boto Remover recuo do Texto, representado por smbolo semelhante ao anterior, s que com a seta apontando para a esquerda.
Imagens
As imagens no so includas no arquivo HTML e sim referenciadas, ou seja, quando o navegador interpreta uma pgina HTML e aparece o cdigo de insero de uma imagem, ele busca no endereo especificado no cdigo a imagem e carrega-a para a pgina. Com o arquivo textos.html criado anteriormente, posicione o cursor no final do texto Recuo de texto e pressione a tecla Enter. No painel Inserir escolheremos a categoria Comum e clicar no boto Imagem (representado por uma paisagem de rvore) que o primeiro de uma lista de itens relacionados a imagens (todos disponveis como submenu ao se clicar na seta preta ao lado do item no painel Inserir).
72
Logo aps abre-se a janela para selecionar a origem da imagem.
Essa janela utilizada para procurar a imagem que ser inserida. Escolha alguma figura. As configuraes que aparecem nessa janela so: Nome do arquivo Define onde procurar o arquivo, possuindo como valores sistema de arquivos (que para imagens a serem inseridas normalmente) e fontes de dados (busca o nome ou caminho para a imagem em um banco de dados, em um XML atravs do Spry etc. ). Escolha a
73
primeira opo. O campo de URL mostra o endereo da imagem. O campo Relativa a diz se o endereo a ser colocado em URL ser a partir do documento atual ou desde a raiz do site. Ao clicar em OK, voc ver a imagem includa na pgina. Selecione a imagem na tela para configurar as opes no inspetor de propriedades.
Aparecer no inspetor a imagem seguida de seu tipo e tamanho (em kb). Abaixo, aparece um campo que serve para dar um identificador a ela para, por exemplo, que os comportamentos do Dreamweaver reconheam-na e possam cham-la por este nome. Deixe em branco esse campo. Largura e Altura Podemos configurar a largura da imagem (em pixels) no campo L e sua altura no campo A. Outra maneira de mudar suas dimenses arrastando-a por suas alas (quadrados pretos localizados sua direita, abaixo e no canto inferior direito). Caso altere, mas desejar voltar ao tamanho original, clique no boto de redefinir o tamanho (representado por um semicrculo com uma seta na ponta). Orig Esse campo corresponde ao endereo de localizao de imagem. Para trocar de imagem, basta clicar na pasta que aparece direita desse campo e escolher um novo arquivo ou digitar um novo nome nessa rea. Alt O campo Alt representa um texto alternativo que ser colocado na rea da imagem caso ela no tenha sido carregada, evitando que o usurio no saiba do que se trata a imagem no carregada, utilizada para tornar o site acessvel principalmente para deficientes visuais. Espao V e Espao H Coloque o cursor logo direita da imagem e escreva o texto Minha imagem. Vamos selecionar novamente a imagem para ver as opes de espao. Digite no campo Espao H o valor 30 pressione a tecla Enter. Repare que colocado um espao horizontal de 30 pixels entre a imagem e os itens que estiveram sua esquerda e
74
sua direita, funcionando como uma espcie de campo de fora que no permite aos elementos chegarem a menos de 30 pixels das bordas laterais da imagem. O campo Espao V faz a mesma coisa, s que com relao aos lados superior e inferior da imagem. Original Essa opo, localizada logo direita do campo Espao H, indica uma imagem de baixa resoluo que pode ser utilizada at que o arquivo esteja totalmente carregado. Para configur-la, utilizamos as mesmas opes do campo Orig. Bordas Se quisermos colocar uma borda em uma imagem ou retirar uma borda (quando criamos um link numa imagem, colocada uma pequena borda em sua volta, bastando colocar como valor para o campo borda o nmero 0 e ela ser removida), digite o nmero 20 e pressione a tecla Enter. Alinhar Essa opo define o alinhamento de uma imagem e elementos que estejam na mesma linha ou no mesmo pargrafo que ela. Tem como opes:
Experimente algumas destas configuraes para conhec-las melhor.
Classe Se tiver algum estilo de pgina, pode aplic-lo na imagem por meio dessa opo.
Hyperlinks
Entre os fatores que influenciaram a grande exploso da Internet temos a facilidade de fazer a leitura dos textos e dos elementos totalmente definida pelo usurio, sem a obrigao de seguir uma estrutura de navegao linear.
75
Ao assistir um programa de televiso ou a um vdeo, preciso uma estrutura linear para o recebimento das informaes que quiser. No caso do vdeo podemos at acelerar a fita, porm foi utilizada uma estrutura linear, pois para chegar ao ponto mais frente ou atrs que queremos, foi preciso passar necessariamente pelos outros pontos que se encontravam no caminho. O hyperlink a grande soluo para a navegao, pois permite ao usurio ir de uma pgina outra qualquer sem necessidade de passar pelas pginas que se encontrem entre elas. Para inserir links no Dreamweaver, primeiramente selecionamos o elemento que desejamos que seja o link (seja esse elemento um texto ou imagem) e utilizamos o campo Link do inspetor de propriedades. Definimos tambm como ser mostrado,
_blank - Pgina em Branco _parent - o conjunto de quadros ou a janela que contm o quadro origem (igual a _self se a origem j for a janela) _self - o prprio quadro ou janela origem _top - substitui todo o contedo da janela que contm a origem.
Os links podem ser de tipos distintos, como veremos a seguir.
Links Absolutos
Leva em considerao o caminho completo para chegar determinada pgina, incluindo o protocolo utilizando pelo navegador. Esse tipo de link muito usado para pginas que no pertenam ao seu site, necessitando, portanto, do caminho completo para que a sua funcionalidade esteja correta.
Links Relativos
Considera a pgina atual como ponto inicial para a navegao. Por exemplo, se voc est na pasta raiz de seu site e quer fazer um link para uma pgina chamada relativo.html que se encontre numa pasta chamada arquivos, o link a ser digitado ser assim: arquivos/relativo.html. Se a pgina para a qual desejamos o link se encontrar no mesmo diretrio que a pgina atual, digite seu nome e extenso no campo Link. Vamos destacar que sempre que o link relativo leva em considerao como ponto inicial a localizao da pgina atual em que estamos inserindo o link. Crie uma pgina com o nome links.html, salve-a. Nela, digite o texto link 1 seguido de um
76
pargrafo e do texto link 2. Se no lembrar o nome da pgina para a qual deseja criar um link, possvel utilizar outras duas formas para cri-lo. Procurar o Arquivo Com o texto link 1 selecionado, no inspetor de propriedades, clique na opo de procurar o arquivo (cone de pasta que se encontra logo aps a rea link).
Na janela que vai abrir, voc deve escolher entre selecionar o nome do arquivo em Nome do Arquivo (seleo normal de um arquivo) ou Fontes de Dados (busca o nome da pgina em um campo do banco de dados). Em seguida, caso tenha selecionado Nome do Arquivo, pode escolher o arquivo explorando as pastas de seu site e selecionando o arquivo desejado. Para o caso ser o arquivo textos.html. Automaticamente o link j funciona aps clicar em OK. Apontar o Arquivo Para ajudar, o Dreamweaver possui um painel chamado Arquivos que funciona de maneira semelhante ao Windows Explorer, mostrando todos os arquivos pertencentes ao site. Se desejar criar outro arquivo, voc pode, por exemplo, clicar com o boto direito do mouse sob o item Arquivos Locais e escolher a opo Novo Arquivo.
77
Na janela tambm pode renomear um arquivo selecionando seu nome e, ao clicar com o boto direito do mouse sobre ele, escolhendo a opo Renomear. Pode tambm exclulo, selecionando-o e clicando na tecla Excluir do seu teclado, alm de criar novas pastas, mudar um arquivo de local, enfim, praticamente clicando duas vezes no seu nome nesse painel. Caso desejar usar um arquivo que no est em seu site, voc pode explorar a partir do cone que representa o desktop do computador, chegar at o local em que se encontra o arquivo desejado e inseri-lo na pgina. Em uma caixa de alerta, o Dreamweaver aconselha que voc o salve na pasta do seu site. Agora selecione o texto Link 2 e perceba que direita do campo link, no inspetor de
78
propriedades e antes do cone de pasta, encontra-se um cone de mira. Com essa ferramenta preciso apenas arrastar essa mira para cima do nome da pgina na qual desejamos o link ao soltar o boto do mouse, o link ter sido criado.
Links para E-mails

Para criarmos um link que abra o software padro de e-mail do usurio com a rea Destinatrio preenchido, necessrio que seja precedido pela palavra mailto: e seguido pelo e-mail do destinatrio, como, por exemplo: mailto:professor@etb.com.br. Caso queira que o campo Assunto j venha preenchido, no exemplo anterior adicione aps o endereo: ?subject=, seguido do texto que quer como assunto. Por exemplo: mailto:professor@etb.com.br. Se deseja um texto inicial no corpo da mensagem do e-mail, basta adicionar aps o assunto &body= e o texto desejado.
Exemplo mailto:professor@etb.com.br?subject=assunto do email&body=corpo do texto de e-mail

Outra forma selecionando o texto e no painel Inserir, em sua categoria Comum, clicar em Link de Email.
Na janela que vai abrir digite o e-mail desejado.
ncoras
Outro tipo de link o que se refere a diferentes reas da mesma pgina. Por exemplo, podemos ter o link no final da pgina que o leva ao incio da mesma. Para isso, usamos o sistema de ncoras que marcam a rea para posterior referncia. Vamos ver um exemplo prtico. Crie outra pgina, salve-a como ancora.html e escreva o texto Aqui comea a pgina.
79
Em seguida clique no cone de ncora que se encontra no painel Inserir em sua categoria Comum.
Clicando nesse item, aparecer uma janela para colocarmos um nome a essa ncora. Digite a palavra topo e clique em OK.
Demos o nome a essa rea da pgina (trecho logo aps o texto) para poder referenci-la. A ncora representada na tela por uma espcie de escudo amarelo com o smbolo de uma ncora. Pode ser que esse cone no esteja aparecendo na sua pgina. Se no estiver vendo essa representao, verifique na opo Editar Preferncias, na guia Elementos Invisveis, se a opo ncoras com nome est selecionada. Em seguida veja na rea Auxlios Visuais (parte superior do Dreamweaver representada por um olho) se a opo Elementos Invisveis se encontra selecionada. Logo aps, pressione a tecla Enter diversas vezes para que tenhamos barra de rolagem e uma distncia bem grande entre o incio e o final da pgina. Na parte final da pgina digite o texto Ir para o topo. Selecione o texto e, sem tirar a seleo, mova a barra de rolagem at o incio da pgina. Utilizaremos agora a mira do inspetor de propriedades e, mantendo o boto do mouse pressionado, arraste a mira at o cone da ncora para criar o link. Outra forma de fazer esse tipo de link digitando diretamente na rea link o caractere # seguido do nome da ncora desejada, no caso #topo. Salve essa pgina com o nome ancoras.htm e vamos test-la. Para testar uma pgina no navegador, podemos escolher a opo de menu Arquivo Visualizar no navegador, selecionar o navegador que deseja ou utilizar as teclas de atalho F12 (Navegador primrio) ou Control + F12 (Navegador secundrio), conforme o que foi configurado nas preferncias do Dreamweaver.
80
Mapeamento de Imagem
Uma nica imagem pode ter algumas partes apontando para links diferentes. Isso pode ser feito pela criao de um mapeamento de imagem que consiste em mapear coordenadas na imagem, tornando-as objetos clicveis e com links. Criaremos outra pgina e salv-la com o nome mapa.html. Nessa mesma pgina que acabamos de criar vamos inserir uma imagem qualquer. Quando for selecionada, repare que, quando ela est selecionada, na parte inferior esquerda do inspetor de propriedades temos uma seo denominada Mapa.
Essa parte a que cria reas dentro da imagem, que sero links que no se misturam. Podemos criar as reas retangulares marcando a ferramenta de ponto ativo retangular no inspetor e, ao passar o mouse sobre a imagem, aparece uma cruz indicando o ponto inicial. Clique e, mantendo o boto do mouse pressionado, criar a rea retangular desejada na parte retangular da imagem.
J para criar uma forma circular, escolhemos a ferramenta de ponto ativo oval e ir da
81
mesma maneira que com o retngulo, mas desta vez na parte circular da imagem. Pra criar uma rea irregular, clique no boto Ferramenta de ponto ativo poligonal e continue clicando, formando pontos, criando um desenho com a forma que quiser ( ligando os pontos). Os pontos ativos (reas) criados so representados na imagem com uma cor meio transparente. Agora iremos fazer links para as pginas que j criamos. Para selecionar um ponto ativo criado (ou caso queira alterar a posio ou tamanho desses pontos ativos , utilize a ferramenta ponto ativo de ponteiro, representada por uma seta preta, logo aps, clicar sobre o ponto ativo desejado, ou caso seja alterao de tamanho, clicar num dos pontos que formam a rea. Selecione o retngulo. No inspetor de propriedades da rea link selecione o cone de pasta e escolha o arquivo textos.html. Selecione o crculo. No inspetor de propriedades da rea link selecione o cone de pasta e escolha o arquivo imagens.html. Selecione a estrela. No inspetor de propriedades da rea link vamos criar um link para o e-mail (digite mailto: seguido do seu endereo eletrnico). Salve a pgina. Agora pode testar e ver que cada rea vai lev-lo a pginas diferentes (ou caso clique na estrela, tentar enviar um e-mail).
82
Criao de Templates
Os Templates so "modelos" de pginas que construmos para economizarmos muito tempo na hora de construir um site. Para explicar melhor, imagine a seguinte situao: voc est produzindo um site do estilo portal e todas as pginas seguem um padro de Design, somente modificando o "meio" ou o seu contedo. Ao invs de criarmos pgina por pgina, basta construirmos um modelo de pgina e apenas modificarmos o contedo. Voc faz toda a estrutura comum do site uma nica vez, deixando o espao que necessita ser mutvel j designado. uma ajuda significativa para sites grandes e pequenos, pois quando voc decidir efetuar qualquer alterao no precisar modificar pgina por pgina, modificando apenas o template voc automaticamente atualizar todas as pginas do seu site. Como fazer um template bsico: 1 - Menu Arquivo > Novo
83
2 - Na tela seguinte escolha em Pgina em branco > Tipo de Pgina > Modelo HTML
3 - Faa toda a estrutura comum da sua pgina, com logomarca, fundo(background), menu, etc tudo que for comum em todas as pginas voc deve fazer nesse momento. 4 - No menu Inserir >Objetos de Modelos > Regio editvel
84
5 - Escolha um nome para sua regio
6 - Ao finalizar esta operao ter uma regio editvel, onde somente neste local poder editar o contedo, deixando o restante bloqueado.
85
7 - Agora clique em Arquivo > Salvar como modelo, d um nome ao modelo e clique em salvar.
8 - Para utilizarmos nosso modelo muito simples, clique em Arquivo > Novo > Modelos,
86
localize o site onde criou e t feito depois s inserir seu contedo na rea que criou e salvar normalmente. Precisando modificar alguma coisa que voc definiu no template, basta abrir o template, fazer a alterao e salvar, ele vai pedir uma confirmao de atualizao de todas as pginas que utilizam o mesmo template, s dar ok e aguardar a atualizao.
Agora voc poder usar a sua criatividade, colocar em prtica o aprendizado que obteve com auxlio das aulas e com o apoio da apostila desenvolver sites utilizando o dreamweaver.
87

Apostila Dream Weaver Cs 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila Dream Weaver Cs 4

Uploaded by

Copyright:

Available Formats

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

Instalando o Dreamweaver CS4

Clique no boto Instalar Adobe Creative Sute 4 Master Collection

Digite o nmero de srie para validar o software

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

Clique no boto Aceitar

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

Clique novamente no boto Instalar para dar continuidade na instao.

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

Durante a instalao voc acompanhar o andamento do processo atravs da tela acima.

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

1 Definio de ttulo do documento(ttulo da pgina)

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

4 Atualizar visualizao de design

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

8 Verificar compatibilidade de navegador

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

O menu aparecer da seguinte forma:

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

ETB Escola Tcnica de Braslia

Curso de Dreamweaver CS4

Codificao por Cores