Sei sulla pagina 1di 69

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

iPED Instituto Politécnico de Ensino à Distância. Todos os Direitos Reservados. iPED é marca registrada pela Empresa Brasileira de Comunicação LTDA.

2

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Sumário

A interface do Dreamweaver CS3

Pág.

9

Property Inspectors

Pág.

17

Iniciando uma Página HTML Simples

Pág.

21

Criando Links internos, externos e locais

Pág.

26

Configurando um Site Local

Pág.

31

Trabalhando com Tabelas

Pág.

33

Criando uma área Editável

Pág.

44

Optional Region

Pág.

50

Construindo Formulários

Pág.

53

Adicionando Caixas de Seleção

Pág.

57

Definindo Links em um Conjunto de Quadros

Pág.

61

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

3

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

4

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Institucional

O iPED, Instituto Politécnico de Ensino a Distância, é um centro de educação on-line que oferece informação, conhecimento e treinamento para profissionais, educadores e qualquer um que queira evoluir profissionalmente e culturalmente.

Nosso objetivo é torná-lo uma base forte de conhecimento e expandir cada vez mais o seu nível intelectual e cultural.

Oferecemos uma quantidade enorme de informação, além de diversos cursos on-line, onde você se mantém atualizado em qualquer lugar e a qualquer hora.

Educação à Distância

Aulas online ou a prática de aprendizagem à distância, através de ambientes virtuais e redes de computadores interligadas para fins educacionais e culturais, nada mais é do que o meio mais prático e inteligente de proliferação de conhecimento.

Através de ambientes virtuais e sistemas inteligentes, é possível adquirir conhecimento de forma total ou gradativa.

Esse é nosso conceito de educação, em tempo real, total ou gradativo, quando quiser e onde quiser e acima de tudo, da forma que quiser!

Nossa Missão

O Grupo iPED foi lançado com o intuito de aprimorar e disseminar o conceito de ensino a distância.

Com a implantação do ensino a distância, pesquisas recentes registram que as pessoas alavancam os resultados dos módulos de treinamento em até 70%, eliminando as distâncias geográficas e proporcionando a melhoria da gestão do conhecimento e dos recursos humanos por competências.

Pensando nisso o iPED presta esse serviço a todos, para que a exclusão digital seja cada vez menor e com o passar do tempo ela desapareça completamente.

Esse é nosso objetivo, essa é nossa missão, e esteja certo que vamos conseguir!

Fabio Neves de Sousa Diretor Geral - Grupo iPED

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

5

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Certificação

O conceito de reconhecimento virtual é concedido através de avaliação feita pelo sistema inteligente, que do inicio até o fim do curso está avaliando cada aluno em suas atitudes individuais e em comparação as atitudes do coletivo. Ao termino do conteúdo avaliado o aluno é submetido a uma avaliação final que nada mais serve do que comprovar a avaliação do desempenho dele ao longo de toda a trajetória do curso.

Nosso sistema garante 100% de segurança.

Empresas poderão confirmar a autenticidade do certificado, pois temos o que existe de melhor em tecnologia disponível no mercado.

Confira o grande diferencial de nosso certificado:

 Confira o grande diferencial de nosso certificado: Certificado Especial - Tramas em linhas personalizadas -

Certificado Especial

- Tramas em linhas personalizadas

- Tarja de Segurança

- Tinta Luminescente

- Selo de Segurança

- Numeração Intransferível

Detalhes sobre o selo

- Numeração Intransferível Detalhes sobre o selo Ao término do curso solicite o seu! 6 Proibida

Ao término do curso solicite o seu!

6

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

D R E A M W E A V E R

Apresentação

MX CS3

Dreamweaver CS3 D R E A M W E A V E R Apresentação MX CS3

Hoje em dia a necessidade de se trabalhar com a Internet é inevitável. A grande maioria dos sistemas em geral está cada vez mais tendendo a Web. Temos como exemplo lojas comerciais, instituições de ensino, bancos centrais que têm por objetivo atender às necessidades pessoais tais como compra de mercadorias, consulta às notas do boletim e extrato bancário. Com o crescimento das empresas .com houve também a necessidade de mão de obra qualificada na área de Web crescendo a procura pelos diversos cargos citados abaixo:

WebWriter

WebMarketing

WebDesigner

WebMaster

WebSurfer

WebProgrammer

Profissional da área de Webwriting. É o redator responsável por textos de ambientes digitais. Profissional responsável pelo marketing, sendo o criador de idéias e propagandas do site que trabalha. Profissional encarregado em trabalhar toda a parte gráfica e o design do site. Profissional responsável por administrar um site na Internet. >Responsável por toda a parte de pesquisa de assuntos em geral que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e banco de dados.

que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e
que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e
que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e
que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e
que será abordado no conteúdo do site. Responsável pelas áreas do site que envolvem programação e

Todos estes profissionais têm o dever de cumprir com seus serviços com qualidade superior devido a demasiada concorrência do mercado de informática.

É por esses e outros motivos que softwares e mais softwares voltados para Web estão

tendo um crescimento estrondoso.

Uma das opções que os Webdevelopers estão utilizando para resolver a maioria de seus problemas é o Dreamweaver MX.

O Dreamweaver é uma ferramenta desenvolvida pela Macromedia ® para criação de

Websites estáticos e dinâmicos. Com o Dreamweaver é possível desenvolver poderosos sites para quaisquer tipos de finalidades sendo para uso pessoal ou uma completa loja de e-commerce.

A Ferramenta possibilita criar diversos tipos de documentos desde os mais simples como

HTML até os mais complexos como JSP ou ASP.NET. Através do próprio Dreamweaver é possível executar todas as ações possíveis com um Website : Criação, Formatação, Conexão FTP com o Servidor WEB, atualização e manutenção.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

7

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

O Dreamweaver é um programa profissional destinado à criação de sites da Web com

recursos

inovadores e recursos abrangentes de planejamento, úteis tanto para os iniciantes como

para

desenvolvedores da Web experientes. Você pode usá-lo para criar visualmente sites da Web, graças a sua interface gráfica de

fácil utilização que mostra as modificações à medida que são efetuadas. Além disso, terá a certeza de que o HTML gerado nos bastidores sairá consistentemente limpo, conciso e editável. Ao contrário da maioria dos programas visuais de criação na Web, o Dreamweaver não altera o código HTML quando importa documentos de um outro programa HTML.

O Dreamweaver oferece muitos recursos que facilitam o design de uma página. Você

poderá testar suas páginas virtualmente usando diferentes navegadores da Web, inserir uma variedade de tipos de arquivos de multimídia clicando em um botão, selecionar cores de uma paleta apropriada à Web apresentando convenções de nomeação hexadecimal e até mesmo arquivos FTP para um servidor de arquivos remoto a partir do programa. Entre os recursos mais avançados, está incluído o suporte para

as últimas inovações da Web, incluindo Páginas de Estilo Cascata e HTML Dinâmico.

Neste curso, você irá aprender fazendo, usando o Dreamweaver para desenvolver passo-

a-passo

exemplos de projetos da Web. Aprenderá a criar páginas HTML, formatar texto, inserir imagens e objetos multimídia, definir links e trabalhar com tabelas e quadros, páginas de estilo

No decorrer do curso, nós iremos aprender vários recursos de Web que fazem parte dessa poderosa ferramenta. Tente acompanhar todos passos do curso, independente do seu nível de conhecimento ou sua habilidade de retenção de informações, pois todos os passos são inteiramente importantes e podem fazer alguma falta quando já estiver em um nível mais avançado.

8

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

A interface do Dreamweaver CS3

- Curso de Dreamweaver CS3 A interface do Dreamweaver CS3 1 – Aqui encontram-se os botões

1 Aqui encontram-se os botões para criação e inserção de objetos tais como tabelas, camadas, imagens, formulários. Os botões são organizados em forma de categorias.

Os botões são organizados em forma de categorias. Vamos conhecer agora as principais categorias utilizadas

Vamos conhecer agora as principais categorias utilizadas para se construir uma simples pagina html.

2 Document Toll Bar > Encontram-se os três diferentes modos de visualização do

documento:

Code Mostra somente o código da página ativa. Design Mostra o resultado gráfico da página ativa. Show Code and Design Views Mostra ambos os modos de visualização: Código e Design. Este modo é bem utilizado para experts que precisam visualizar os resultados gráficos e alterar o código instantaneamente.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

9

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Além do modo de visualização do documento, a Toll

Além do modo de visualização do documento, a Toll Bar também contém os comandos mais comuns e opções relacionadas com transferência entre arquivos locais e remotos, debugação e visualização de documento no browser.

3 Document Title > Permite alterar o título a ser visualizado na barra de título do browser.

4 Code > Visualização do código da página atual que está sendo gerado(Inspetor HTML).

5

Design > Visualização da parte gráfica da página(Janela do documento).

O

Inspetor HTML

Abra o inspetor HTML (F10) clicando no botão HTML do Launcher e você verá o código- fonte HTML gerado pelo programa, para a página em que está trabalhando. O código-fonte com marcas HTML situa-se atrás

de cada página HTML indicando os elementos de códigos entre sinais de maior e menor,

como

mostrado neste exemplo, onde <H1> equivale a Título1 de um processador de texto. <h1 align=‖center‖><font face=‖Arial‖ color=‖#9933FF‖>ScriptBrasil.com.br </font></h1>

Estes elementos são instruções que informam ao navegador como a página deve ser exibida. Observe que cada conjunto de instruções requer uma marca inicial e uma final. A instrução align=―CENTER‖ é um exemplo de atributo, ela modifica o elemento ao qual é adicionada. Na verdade, o usuário apenas vê as palavras ―ScriptbBrasil.com.br‖.

Se você é um iniciante em HTML, convém dedicar algum tempo estudando o código para as marcas criadas para que possa entendê-las e editar o código diretamente, quando necessário. Existem no mercado muitos livros bons que podem ajudá-lo a conhecer HTML.

O Dreamweaver permite que a janela de documento e o inspetor HTML permaneçam

abertos ao mesmo tempo para possibilitar o acompanhamento das alterações feitas nas duas visualizações. Quando se

10

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

realça o texto na janela de documento, este também aparece realçado no inspetor HTML, conforme visto na Figura.

Observe que o inspetor HTML pode ser acessado de quatro maneiras diferentes: a partir do Launcher, com a ajuda da tecla de função F10, de um botão situado na base da janela de documento ou a partir da barra de menu (Window > HTML).

documento ou a partir da barra de menu (Window > HTML). O inspetor HTML do Dreamweaver

O inspetor HTML do Dreamweaver é totalmente integrado com o editor WYSIWYG What you see is what you get (o que você vê na tela será exatamente o que será impresso). As alterações efetuadas em uma janela aparecem automaticamente na outra.

6 Site Panel > Permite definir a localização dos arquivos locais e remotos para organização do site.

7 Document Ativo > Guias contendo os documentos que estão abertos.

Ativo > Guias contendo os documentos que estão abertos. 8 - Tag Selector > Mostra a

8 - Tag Selector > Mostra a hierarquia das tags conforme vão sendo criadas dentro do

documento. Você também pode clicar no Tag Selector para selecionar a própria tag e

todo o seu conteúdo, e até mesmo atribuir uma classe à mesma.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

11

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

9 Properties > Mostra todos os atributos básicos de cada tag que se encontra selecionada. Você pode fazer alterações imediatas apenas mudando as opções que se encontram a ser aplicadas em cada tag .

CATEGORIAS Iremos apresentar agora as principais categorias que são utilizadas para facilitar a criação de sites.

Common Contém botões para criar e inserir os mais comuns objetos conhecidos de html, tais como imagens, botões, camadas.

conhecidos de html, tais como imagens, botões, camadas. Hiperlink – Insere Hiperlinks na página apontando para

Hiperlink – Insere Hiperlinks na página apontando para alguma página interna ou externa. Insere Hiperlinks na página apontando para alguma página interna ou externa.

Email Link – Insere um Hiperlink para abrir o principal de e-mail. Insere um Hiperlink para abrir o principal de e-mail.

Named Anchor – Insere uma âncora no texto utilizado para navegar na própria página que está sendo Insere uma âncora no texto utilizado para navegar na própria página que está sendo exibida. Insert Table Cria uma tabela. Após clicar no botão, aparece uma caixa de
diálogo permitindo especificar diversos atributos da tabela como número de linhas, colunas, altura, largura, entre outros.própria página que está sendo exibida. Insert Table – Cria uma tabela. Após clicar no botão,

Insert Div Tag – Cria as Tags html em ambiente visual. Cria as Tags html em ambiente visual.

Image – Insere uma imagem na página. Após clicar no botão, aparece uma caixa de diálogo Insere uma imagem na página. Após clicar no botão, aparece uma caixa de diálogo permitindo buscar o arquivo de imagem nos diretórios. Image Placeholder Insere um gráfico representando uma imagem
temporária, até a imagem real ser posta no lugar. Serve para saber que ali existe um espaço reservado para uma imagem na página. Rollover Image Placeholder – Insere um gráfico representando uma imagem – Possibilita especificar duas imagens para produzir o Possibilita especificar duas imagens para produzir o
famoso efeito Rollover. Rollover é uma imagem que é alterado por outro quando o cursor do mouse passa por cima. – Possibilita especificar duas imagens para produzir o Fireworks HTML – Insere na página um arquivo
Fireworks HTML alterado por outro quando o cursor do mouse passa por cima. – Insere na página um Insere na página um arquivo de HTML criado pelo fireworks.

Navigation Bar – Insere diversas imagens utilizadas para se navegar no site. Insere diversas imagens utilizadas para se navegar no site.

Flash Permite inserir uma animação feita em flash. Após clicar no botão, aparece uma caixa de diálogo permitindo buscar o arquivo de através dos diretórios. Date Flash – – Insere a data atual. Uma caixa de diálogo aparece permitindo especificar o formato Insere a data atual. Uma caixa de diálogo aparece permitindo especificar o formato e o Dreamweaver também dá a opção de atualizar a data automaticamente a cada vez que for salvo o documento. Server-Side Include (SSI) São inclusões destinadas ao servidor que ao interpretar o comando, incluirá o arquivo desejado no local demarcado. Essas includes só serão visualizadas no próprio Dreamweaver e no servidor através do seu navegador, nunca na sua máquina pelo navegador, pois não existirá um servidor para interpretar o comando.Após clicar no botão, aparece uma caixa de diálogo permitindo buscar o arquivo de através dos Após clicar no botão, aparece uma caixa de diálogo permitindo buscar o arquivo de através dos

12

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Comment – Permite inserir um comentário HTML na página. Permite inserir um comentário HTML na página.

Head Meta Insere uma Tag Meta no cabeçalho do documento. A Tag Meta permite gravar informações da página atual tais como autor, direitos autorais e palavras chaves. Essas tags podem ser usadas para fornecer informações ao servidor.Após clicar no ícone, aparece uma caixa de diálogo, no qual permite entrar com os atributos desejados. *Head Keywords Head Meta – – Insere um comando Meta no cabeçalho que permite especificar diversas palavras chaves Head Meta – – Insere um comando Meta no cabeçalho que permite especificar diversas palavras chaves Insere um comando Meta no cabeçalho que permite especificar diversas palavras chaves que são consideradas importantes. *Head Description entrar com os atributos desejados. *Head Keywords – – Insere um comando Meta no cabeçalho que Insere um comando Meta no cabeçalho que permite criar uma descrição completa do site. *Head Refresh - Permite criar um comando refresh para atualizar a página ou redirecioná-la automaticamente para alguma outra página ou Website em um número determinado de segundos. *Head Base - A Tag base permite definir uma URL base para o documento HTML, permitindo utilizar endereços relativos para o próprio documento. *Head Link - Permite estabelecer um relacionamento entre o documento atual e um ou mais arquivos relacionados. É bastante utilizado quando se quer trabalhar com folhas de estilo externas (CSS). Tag Chooser do site. *Head Refresh - Permite criar um comando refresh – Permite inserir uma tag. Após do site. *Head Refresh - Permite criar um comando refresh – Permite inserir uma tag. Após do site. *Head Refresh - Permite criar um comando refresh – Permite inserir uma tag. Após do site. *Head Refresh - Permite criar um comando refresh – Permite inserir uma tag. Após Permite inserir uma tag. Após clicar no botão, aparece uma janela com diversas árvores separadas por categorias de tags.

*Head - Contém botões utilizados para adicionar elementos que vão entrar na tag head. São bastante utilizados para informações específicas próprias da página como palavras- chaves para buscadores automáticos como o google.com, descrição do site, comandos metas, entre outros.

Characters - Esta guia contém caracteres especiais que não possuem no teclado. Ex: CopyRight ©, Marca Registrada ®.

possuem no teclado. Ex: CopyRight ©, Marca Registrada ®. Line Break – Insere uma quebra de
possuem no teclado. Ex: CopyRight ©, Marca Registrada ®. Line Break – Insere uma quebra de

Line Break Insere uma quebra de linha no texto. Você pode utilizar um atalho pressionando Shift+Enter.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

13

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Non-Breaking Space – Insere um espaço em branco no texto. Insere um espaço em branco no texto.

Left Quotes – Insere aspas no texto. Insere aspas no texto.

Right Quotes – Insere aspas no texto. Insere aspas no texto.

Em Dash – Insere um travessão no texto. Insere um travessão no texto.

Pound – Insere o símbolo da libra no texto. Insere o símbolo da libra no texto.

Euro - Insere o símbolo da euro no texto.no texto. Pound – Insere o símbolo da libra no texto. Yen - Insere o símbolo

Yen - Insere o símbolo do Yen no texto.libra no texto. Euro - Insere o símbolo da euro no texto. Copyright – Insere o

Copyright – Insere o símbolo de proteção à cópia. Insere o símbolo de proteção à cópia.

Registered Trademark – Insere o símbolo de marca registrada no texto. Insere o símbolo de marca registrada no texto.

Trademark – Insere o símbolo de marca registrada no texto. Insere o símbolo de marca registrada no texto.

Other Characters Abre uma janela contendo todos os tipos de caracteres especiais existentes tais como é, ç e outros. Clique no botão correspondente ao caracter especial e o Dreaweaver irá apresentar o código na caixa de texto Insert e em seguida clique no botão ok para inserir no texto.Other Characters –

Forms Contém botões para criação de formulários e seus elementos. Ex: Button, Text, Radio, CheckBox, etc

e seus elementos. Ex: Button, Text, Radio, CheckBox, etc Form – Cria um formulário na página.

Form Cria um formulário na página. Os formulários permitem interagir com os visitantes do site e até mesmo apanhar informações que são consideradas importantes como nome, endereço, telefone, cidade após serem submitidas. Os formulários utilizam diversos tipos de objetos para apanhar as informações do usuários tais como caixas de texto, caixas de verificação e outros. Abaixo se encontram os diversos tipos de elementos existentes de um formulário.Form –

Text Field – Insere uma caixa de texto. Insere uma caixa de texto.

Hidden Field – Insere um campo oculto no texto. Insere um campo oculto no texto.

Textarea insere uma área de texto onde onde é possível definir o tamanho de linhas e colunas que irão determinar o tamanho da área na página Textarea – Checkbox – Insere caixas de verificação para que o usuário possa selecionar uma ou Textarea – Checkbox – Insere caixas de verificação para que o usuário possa selecionar uma ou Checkbox Insere caixas de verificação para que o usuário possa selecionar uma ou mais opções. irão determinar o tamanho da área na página Checkbox – Radio Button – Insere botão radio Radio Button Insere botão radio onde o usuário só poderá selecionar uma opção entre as várias.

14

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Radio Group – Insere um grupo de botões, dos quais o usuário só poderá selecionar uma opção Insere um grupo de botões, dos quais o usuário só poderá selecionar uma opção entre as várias.

List Menu Permite criar uma lista de seleção onde uma ou várias opções podem ser selecionadas ao mesmo tempo dependendo dos atributos que foram selecionados na property inspector. List Menu – Jump Menu – Abre uma janela pop-up que permite definir Jump Menu Abre uma janela pop-up que permite definir

Layout

Você pode criar links para quaisquer tipos de arquivos que podem ser visualizados no browser.Menu – Abre uma janela pop-up que permite definir Layout Image Field - Permite usar uma

Image Field - Permite usar uma imagem no lugar de um botão submit. File Field – Cria um Permite usar uma imagem no lugar de um botão submit.
- Permite usar uma imagem no lugar de um botão submit. File Field – Cria um File Field Cria um campo para upload de arquivos para o servidor. Button Insere um botão no documento como sendo o valor
padrão Button – Insere um botão no documento como sendo o valor submit , podendo ser alterado submit, podendo ser alterado na property inspector como sendo um botão reset ou sem natureza alguma.
inspector como sendo um botão reset ou sem natureza alguma. Label – É usado para associar Label É usado para associar um texto com algum elemento de de formulário.

Fieldset – Cria um container para elementos do formulário. Cria um container para elementos do formulário.

uma lista de opções

para linkar com outros documentos.

uma lista de opções para linkar com outros documentos. As frames são criadas de acordo com
uma lista de opções para linkar com outros documentos. As frames são criadas de acordo com

As frames são criadas de acordo com a figura representativa de cada uma na Insert Bar. Temos treze divisórias que são comuns em WebSites. Frames são uma ótima opção quando se tem de criar divisórias que façam com que o site carregue somente as informações necessárias. É aconselhável utilizar quando se tem um menu fixo no site, e você não perde tempo carregando-o novamente a cada vez que chama uma página que vai conter o mesmo menu.

cada vez que chama uma página que vai conter o mesmo menu. Proibida a reprodução por

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

15

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Permite visualizar como está sendo exatamente a alteração que

Permite visualizar como está sendo exatamente a alteração que está para ser feita, se está sendo aplicada em uma ou mais células ou linhas. Os dois ícones na parte de baixo, da esquerda pra direita, são para mesclar as células e desagrupá-las. Você deve selecionar duas ou mais células em seqüência para que o botão mesclar fique habilitado. The two small icons in the bottom of this section are the Merge Cells and Break Cell buttons. You must highlight more than one cell to use the Merge Cell button.

Cada item foi explicado à parte em Font Property.

button. Cada item foi explicado à parte em Font Property. Essas opções determinam o alinhamento tanto

Essas opções determinam o alinhamento tanto vertical, quanto horizontal. Se você selecionar uma linha ou coluna inteira, e escolher uma das opções existentes, o alinhamento será feito em cada célula selecionada.

Esses campos permitem você determinar qual será a largura e a altura. A célula será redimensionada de acordo com o tamanho em pixels que se encontra no campo.o alinhamento será feito em cada célula selecionada. Marcando a opção No Wrap, você adiciona o

Marcando a opção No Wrap, você adiciona o atributo nowrap na célula da tabela, o qual previne que o texto pule para a próxima linha caso este seja maior que a largura da célula. Na opção Header, a célula sofre uma alteração no código HTML passando a tag <td> para <th>, o qual faz com que o texto interno se torne um título(O texto passa a ficar em negrito).de acordo com o tamanho em pixels que se encontra no campo. Este campo permite você

se torne um título(O texto passa a ficar em negrito). Este campo permite você determinar uma

Este campo permite você determinar uma imagem de fundo para a célula da tabela. O caminho pode ser absoluto(Ex: http://www.elciosilva.kit.net/dw_mx.swf) ou relativo(Ex:

/swf/dw_mx.swf).Você também pode utilizar o target icon(<img src="imagens/targ_icon.gif" width="13" height="13" align="absbottom">), ou navegar por entre os diretórios clicando no ícone da pasta ao lado.

entre os diretórios clicando no ícone da pasta ao lado. Essas duas opções (Bg e Brdr)

Essas duas opções (Bg e Brdr) permitem alterar a cor de fundo e a borda da célula, respectivamente.

a cor de fundo e a borda da célula, respectivamente. preciso. 16 Permite nomear uma tabela

preciso.

16

Permite nomear uma tabela para referência no código JavaScript caso seja

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Permite você alterar o número de linhas e colunas da tabelas. Seja cauteloso ao reduzir o número de algum dos dois itens. Se você tem uma célula com 4 células e quer alterar esse número para 3, todo o conteúdo da última coluna será removida sem aviso algum(Lembre-se que pode utilizar Alt+Z para desfazer ;-).Grupo iPED - Curso de Dreamweaver CS3 Aqui você determina o tamanho da célula. Você pode

algum(Lembre-se que pode utilizar Alt+Z para desfazer ;-). Aqui você determina o tamanho da célula. Você

Aqui você determina o tamanho da célula. Você pode optar por usar porcentagem ou pixels de acordo com a necessidade. Porcentagem é utilizado quando você desejar uma tabela flexível de acordo o layout. Já o tamanho em pixels estabelece um tamanho fixo.

layout. Já o tamanho em pixels estabelece um tamanho fixo. Ajuste do CellPadding, CellSpacing e o

Ajuste do CellPadding, CellSpacing e o tamanho da borda são feitos nesses campos. Você também pode ajustar o alinhamento com o de uma imagem.

Estes quatro botões possuem funcionalidades bastante úteis podendo ser utilizados a qualquer hora. Iremos explicar de cima para esquerda e depois as duas opções de baixo. (*) Remove o valor da altura da célula(ou tabela); (*) Remove o valor da largura da célula(ou tabela); (*) converte a largura da tabela para pixels(sendo funcional quando estiver em porcentagem); (*) converte a altura da tabela para porcentagens(sendo funcional quando estiver em pixel).também pode ajustar o alinhamento com o de uma imagem. Cor de fundo, borda e imagem

para porcentagens(sendo funcional quando estiver em pixel). Cor de fundo, borda e imagem de fundo da

Cor de fundo, borda e imagem de fundo da tabela. Todas as três opções são referentes à tabela inteira.

Property Inspector (Table)

Table Inspector usa somente a parte de baixo para alterações relacionadas aos componentes da tabela. A parte de cima é para formatar textos referentes às células. Primeiramente iremos explicar as funções com a célula selecionada(PI de cima) de depois as funções com a tabela selecionada (PI de baixo).

Mova o mouse em cima de cada item no Property Inspector para ver o que cada um faz.

cada item no Property Inspector para ver o que cada um faz. Proibida a reprodução por

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

17

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Agora, serão apresentadas as funções com a tabela selecionada, que mostra algumas diferenças do PI acima (com a célula selecionada).

algumas diferenças do PI acima (com a célula selecionada). Tables - Permite inserir ou trabalhar com
algumas diferenças do PI acima (com a célula selecionada). Tables - Permite inserir ou trabalhar com

Tables - Permite inserir ou trabalhar com os diversos elementos que compõem a tabela tais como tr, td, th, entre outros.

- Insert Table – Como foi apresentado na Guia Commom, este ícone c ria uma Insert Table Como foi apresentado na Guia Commom, este ícone cria uma

tabela.

diversos atributos da tabela como número de linhas, colunas, altura, largura, entre outros.

Após clicar no botão, aparece uma caixa de diálogo permitindo especificar

-
-

Table Tag Insere apenas as tags <table></table> no ponto de inserção de texto ou em torno de qualquer texto selecionado. Somente disponível em visualização Code.

selecionado. Somente disponível em visualização Code. - Table Row – Insere apenas as tags

- Table Row Insere apenas as tags <tr></tr> no ponto de inserção de texto ou em torno de qualquer texto selecionado. Somente disponível em visualização Code.

selecionado. Somente disponível em visualização Code. - Table Header - Insere apenas as tags

- Table Header - Insere apenas as tags <table></table> no ponto de inserção de texto ou em torno de qualquer texto selecionado. Somente disponível em visualização Code.

selecionado. Somente disponível em visualização Code. Table Data – Insere apenas as tags

Table Data Insere apenas as tags <td></td> no ponto de inserção de texto ou em torno de qualquer texto selecionado. Somente disponíel em visualização Code.

-

selecionado. Somente disponíel em visualização Code. - - Table Caption – Insere apenas as tags

- Table Caption Insere apenas as tags <caption></caption> no ponto de inserção de

texto ou em torno de qualquer texto selecionado. Somente disponíel em visualização

Code.

Templates Permite criar áreas editáveis, opcionais e áreas de repetição nos arquivos que são considerados templates.

de repetição nos arquivos que são considerados templates. - Make Template – Transforma o documento atual
de repetição nos arquivos que são considerados templates. - Make Template – Transforma o documento atual

- Make Template Transforma o documento atual em Template.

18

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Make Nested Template – Cria um Template dentro do outro. Cria um Template dentro do outro.

-

Editable Region – Cria uma área editável dentro do Template. Cria uma área editável dentro do Template.

-

Optional Region – Cria uma área que pode ser visualizada ou não, ficando a critério Cria uma área que pode ser visualizada ou não, ficando a critério

do usuário do Template. Esta área não pode ser editável, para criar uma área opcional

editável, utilize o íconne Editable Optional Region (

-

editável, utilize o íconne Editable Optional Region ( - ). - Repeating Region - Cria uma

).

utilize o íconne Editable Optional Region ( - ). - Repeating Region - Cria uma área

- Repeating Region - Cria uma área de repetição no Template.

Region - Cria uma área de repetição no Template. Editable Optional Region – Cria uma área

Editable Optional Region Cria uma área opcional no template que pode ser editada.

-

Cria uma área opcional no template que pode ser editada. - Repeating Table - Cria uma

Repeating Table - Cria uma área de repetição no formato de tabelas. Você pode definir os atributos da tabela no qual terão as células editáveis.

-

Text - Permite inserir os diversos elementos relacionados a edições de listas e tags de formatação tais como as tags b, p, h1, ul, entre outras.

formatação tais como as tags b, p, h1, ul, entre outras. Bold – Faz com que

Bold – Faz com que o texto selecionado apresente o estilo negrito. Faz com que o texto selecionado apresente o estilo negrito.

-

Italic – Faz com que o texto selecionado apresente o estilo itálico. Faz com que o texto selecionado apresente o estilo itálico.

-

Strong - Faz com que o texto selecionado apresente o estilo strong. Faz com que o texto selecionado apresente o estilo strong.

-

Emphasis - Faz com que o texto selecionado apresente o estilo emphasis. Faz com que o texto selecionado apresente o estilo emphasis.

-

Paragraph – Insere um parágrafo no texto. Insere um parágrafo no texto.

-

Block Quote – Indenta o texto no documento. Indenta o texto no documento.

-

Preformatted Text – Preformata o texto. É usada geralmente em textos que Preformata o texto. É usada geralmente em textos que

possuem o tamanho fixo.

mais importante deste comando é que ele preserva os espaços em branco (

foram especificados no código fonte, sem precisar de utilizar o espaço em branco.

-

O estilo de fonte padrão utilizado no texto é o monospace e o

)

que

fonte padrão utilizado no texto é o monospace e o ) que - Heading 1 –

- Heading 1 Formata o texto com o cabeçalho no nível 1 sendo que o número após

a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais destaque e o número seis o de menor destaque no texto.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

19

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 - Heading 2 - Formata o texto com o

- Heading 2 - Formata o texto com o cabeçalho no nível 2 sendo que o número após

a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de mais destaque e o número seis o de menor destaque no texto.

mais destaque e o número seis o de menor destaque no texto. - Heading 3 -

- Heading 3 - Formata o texto com o cabeçalho no nível 3 sendo que o número após

a letra h na tag pode variar de 1 a 6, sendo o 1 o cabeçalho de maior destaque e o

número seis o de menor destaque no texto.

destaque e o número seis o de menor destaque no texto. - Unordened List – Cria

- Unordened List Cria uma lista de elementos sem algum tipo de ordem

estabelecida. Após clicar no ícone, o Dreamweaver se encarrega de indentar e inserir no texto um marcador. O marcador padrão é um círculo , podendo ser alterado a qualquer momento no Property Inspector.

ser alterado a qualquer momento no Property Inspector . - Ordened List - Cria uma lista

- Ordened List - Cria uma lista de elementos ordenados. Após clicar no ícone, o

Dreamweaver se encarrega de indentar e inserir no texto um marcador numerado. O marcador padrão sãos os números radicais, podendo ser alterado a qualquer momento no Property Inspector.

ser alterado a qualquer momento no Property Inspector . - List Item - Cria mais um

- List Item - Cria mais um elemento pra lista. Se a lista for ordenada(OL), o

Dreamweaver insere um elemento com o número posterior ao já inserido antes. Caso contrário se for uma lista sem ordenação definida(UL), ele insere mais um marcador padrão utilizado podendo ser um círculo, um quadrado, um disco ou até mesmo uma imagem.

um círculo, um quadrado, um disco ou até mesmo uma imagem. - Definition List – Define

- Definition List Define uma lista a ser utilizada. Este tipo de lista é muito útil

quando se deseja, por exemplo, escrever um parágrafo de texto tabulado para a direita criando uma apresentação diferente e agradável de se ler!

criando uma apresentação diferente e agradável de se ler! Definition Term – Define qual será o

Definition Term Define qual será o termo utilizado na lista, como se fosse um título a ser utilizado.

-

- Definition Description – Descrição utilizada para o definir o termo ( ).

- Definition Description Descrição utilizada para o definir o termo (

).

- Abbreviation - Indica os significados de abreviações, como fax, Corp., Av., etc.

- Abbreviation - Indica os significados de abreviações, como fax, Corp., Av., etc.

Esse ícone não modifica a exibição das páginas HTML, mas fornece dados para mecanismos que interpretam dados em uma página, como sistemas de busca, corretores ortográficos, sintetizadores de voz e sistemas de tradução.

sintetizadores de voz e sistemas de tradução. - Acronym – Indica os significados de acrônimos (uma

- Acronym Indica os significados de acrônimos (uma abreviação formada pelas

letras iniciais de uma frase ou grupo de palavras), como WWW, HTML, VB, SQL, etc.

20

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Iniciando uma Página HTML Simples

Depois de conhecer todas as categorias do Dreamweaver MX, vamos trabalhar agora na elaboração de uma simples página HTML. Com o Dreamweaver aberto, vá ao menu principal e clique em file> new. Logo em seguida irá aparecer a janela new document, idêntica à figura abaixo.

aparecer a janela new document, idêntica à figura abaixo. Selecione a categoria Blank Page , o

Selecione a categoria Blank Page, o tipo de documento sendo HTML e Layout <none>. Pronto! A partir de agora podemos dar início à criação de nossa primeira página no Dreamweaver.

Não se assuste com a gama de opções e painéis existentes ao redor da área de trabalho. A maioria deles será apresentada com o decorrer do curso, e você ficará cada vez mais familiarizado.

A primeira coisa que gostaria que percebesse é o título do documento que se encontra logo acima da área de trabalho. O campo se encontra com o valor default(padrão) ―Untitled Document‖. Altere para ―Minha Primeira página Web‖.

Document‖. Altere para ―Minha Primeira página Web‖. Proibida a reprodução por qualquer meio eletrônico ou

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

21

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Agora, digite na área de trabalho o texto de acordo com a figura apresentada logo abaixo.

o texto de acordo com a figura apresentada logo abaixo. Salve o arquivo e para visualizar

Salve o arquivo e para visualizar a apresentação de sua página, pressione a tecla F12, para que o Dreamweaver simule uma apresentação de como está ficando sua página no navegador configurado em sua máquina. Nesse caso, deve estar com a seguinte apresentação.

Nesse caso, deve estar com a seguinte apresentação. Perceba que o título que você digitou (Minha

Perceba que o título que você digitou (Minha Primeira Página Web) se encontra no topo da página na barra de títulos do navegador.

22

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Quanto ao texto que você digitou na área de trabalho, quais alterações que poderão ser feitas?

- tipo e tamanho de fonte;

- alteração da cor;

- negrito e itálico;

- alinhamento;

- entre outros.

Logo abaixo da área de trabalho se encontram as propriedades de cada elemento chamadas Inspector properties (Inspetor de propriedades) ou somente properties, que possui a função de apresentar todos os atributos básicos que podem ser criados ou editados imediatamente. Dependendo do elemento que você selecionar (texto, tabela, camada, etc.), o properties exibe na tela somente os atributos que dizem respeito ao elemento que você selecionou, sendo este bem heterogênico, variando de acordo com cada elemento selecionado.

variando de acordo com cada elemento selecionado. Vamos agora formatar o nosso texto, utilizando o painel

Vamos agora formatar o nosso texto, utilizando o painel properties. Selecione toda a 1ª linha que contém o texto ―Olá. Seja bem vindo!!!‖. Vá até o painel properties e no o campo Font com o valor Default Font. Clique em cima, e altere o valor para arial e pressione Enter. Logo em seguida, no próprio Dreamweaver, você perceberá que o texto da 1ª linha foi formatado para a fonte arial, o qual você acabou de digitar. Caso conheça os tipos de fontes existentes em sua máquina, é só você digitar nesse mesmo campo, o nome completo da fonte com o qual deseja formatar o texto. Perceba que logo ao lado existe uma setinha apontando para baixo, o qual contém uma lista das fontes mais utilizadas na web. Por experiência própria, aconselho utilizar uma dessas fontes, particularmente arial ou verdana, porque são as fontes que deixam o website com melhor aparência visual e não irão apresentar ausência na máquina da maioria dos visitantes de sua página.

Sem desmarcar a seleção do texto, identifique o campo Size no properties e altere também o tamanho da fonte.

Para alterar a cor do texto, basta clicar no quadrado cinza (

o conta-gotas. Como exercício de fixação, gostaria que em cada linha, você alterasse o texto para uma cor e um tamanho diferente de fonte, sendo todo o texto com a fonte arial e o alinhamento

fonte, sendo todo o texto com a fonte arial e o alinhamento )e selecionar uma cor

)e selecionar uma cor com

com a fonte arial e o alinhamento )e selecionar uma cor com centralizado( ). Proibida a

centralizado( ).

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

23

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Pressione F12 para visualizar o resultado.

Dreamweaver CS3 Pressione F12 para visualizar o resultado. Quebras de Linha e Parágrafo Já aprendemos a

Quebras de Linha e Parágrafo

Já aprendemos a inserir uma marca de parágrafo pressionando a tecla Enter. Isso resulta em uma quebra de espaço duplo. Se quiser uma única quebra de linha, use uma quebra de linha. 1. Copie as palavras ―Olá Seja bem vindo!!!‖ e cole as na frente das palavras copiadas (com um espaço entre elas) e depois insira o cursor após o primeiro ―Vindo!!!‖ e pressione Shift+Enter.

Também é possível inserir uma marca de quebra escolhendo Insert > Line Break ou clicando no ícone Insert Line Break, na seção Invisibles da paleta Objects.

Perfeito!!! Salve esse documento agora como ―minha primeira página.html‖

CRIANDO LISTAS

O Dreamweaver facilita a criação de listas em ordem (numérica ou alfabética), listas sem ordem (precedidas por marcadores) e listas de definição (com recuo, sem marcadores ou números). Você pode criar listas à medida que digita um texto no documento ou realçar um texto existente e aplicar o formato de lista. As listas também podem ser aninhadas para criar tópicos e complicadas listas dentro de listas. Para Criar uma Nova Lista

1. Posicione o cursor na janela do documento, digite o item pertencente à lista e adicione

uma quebra de parágrafo a cada um que inserir.

2. Clique no botão Ordered List do inspetor Property (ou escolha Text > Format e

selecione Ordered List).

24

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

3. Insira a lista de itens pressionando Enter para cada novo item da lista. Crie por exemplo

os itens ―Maçã‖, ―Pera‖ e ―Banana‖.

4. Pressione Enter duas vezes para finalizar a lista.

Adicionando uma Linha Horizontal

A marca Horizontal Rule cria uma linha que se estende por toda a largura de uma página

da Web. Ao alterar os atributos da marca, você pode alterar a espessura da linha e limitar seu

comprimento a apenas uma parte da página.

Escolha Insert > HTML > Horizontal Rule na barra de menu, (no alto da página).

3. Use o inspetor Property para alterar a largura para 75% e o alinhamento para o centro.

(Você tem a sua escolha pixels ou uma porcentagem da largura da página.)

Trabalhando com imagens

O que temos de mais rico em conteúdo visual na web, são as imagens, pois como diz o

ditado: ―Uma imagem vale mais que mil palavras‖. Para inserir uma imagem basta apenas

ir ao menu principal, Insert >Image. Você pode também utilizar a categoria common e

clicar no ícone correspondente à imagem (

diretórios pedindo para informar qual imagem deseja inserir.

pedindo para informar qual imagem deseja inserir. ). Logo em seguida aparece uma lista de Posicionamento

). Logo em seguida aparece uma lista de

Posicionamento de imagens

Para alterar o posicionamento das imagens na tela, o processo é semelhante ao posicionamento de texto. Basta identificar no Image Inspector, os ícones de

alinhamento(

identificar no Image Inspector, os ícones de alinhamento( ) referentes à imagem selecionada. Alinhando Figuras em

) referentes à imagem selecionada.

Alinhando Figuras em Relação ao Texto

Para fazer com que os textos se posicionem de acordo com as imagens, no Image Property localize no menu suspensa a opção Align e veja as diversas opções que temos para alinhar o texto juntamente com a imagem. Veja abaixo alguns exemplos de alinhamentos que podemos ter.

Posicionamento de imagens

Para alterar o posicionamento das imagens na tela, o processo é semelhante ao posicionamento de texto. Basta identificar no Image Inspector, os ícones de

alinhamento(

identificar no Image Inspector, os ícones de alinhamento( ) referentes à imagem selecionada. Proibida a reprodução

) referentes à imagem selecionada.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

25

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Alinhando Figuras em Relação ao Texto

Para fazer com que os textos se posicionem de acordo com as imagens, no Image Property localize no menu suspensa a opção Align e veja as diversas opções que temos para alinhar o texto juntamente com a imagem.

que temos para alinhar o texto juntamente com a imagem. Veja abaixo alguns exemplos de alinhamentos

Veja abaixo alguns exemplos de alinhamentos que podemos ter.

Veja abaixo alguns exemplos de alinhamentos que podemos ter. Se o alinhamento não for especificado, o

Se o alinhamento não for especificado, o padrão do navegador é Bottom, o que faz a imagem aparecer à esquerda da tela com sua margem inferior alinhada com a base do texto que aparece em seguida. Uma série de outras variações Absolute Bottom, Middle, Absolute Middle, Top e Text Top move a primeira linha do parágrafo adjacente para várias alturas ao lado da imagem. Qualquer uma destas configurações funciona bem com legendas de uma única linha, mas não quando se tenta integrar uma imagem com blocos de texto.

Criando Links internos, externos e locais

Links são com certeza, uma das implementações recursivas mais bem estruturadas da web e também um dos principais motivos pelo crescimento e explosão da Internet, justamente por proporcionar uma navegabilidade de fácil operação entre as páginas. Podendo ser chamados também de Hyperlinks, podemos classificá-los em três tipos: internos, externos e locais.

Links Locais - Os links Locais são aqueles em que você cria âncoras na própria página para navegar na estrutura que possui vários tópicos diferentes e com um extenso conteúdo, que estão ocupando a mesma página.

Links Internos - São os links que proporcionam a possibilidade de se navegar entre uma página e outra que estão contidas em um mesmo site.

Links Externos ou Globais - São os links que possuem vínculo com outras páginas na internet, necessitando assim, preencher o endereço com a url completa, ao qual deseja criar um vínculo.

26

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Alterando as propriedades da página Caso deseje editar a cor de fundo de uma página, cor do texto, cor do link, inserir um background, há uma opção no dreamweaver que abre uma janela para você editar todas as possíveis alterações relacionadas às propriedades da página, como algumas como algumas que foram descritas acima.

Para alterar as propriedades da página, vá ao menu principal e clique em Modify > Page Properties, ou se preferir, utilize a tecla de atalho Ctrl +J. Veremos agora os atributos mais utilizados que podem fornecer uma nova aparência ao seu site.

que podem fornecer uma nova aparência ao seu site. Appearance (Aparência) Page font: Defini o tipo

Appearance (Aparência)

Page font: Defini o tipo de fonte a ser aplicada no arquivo.

Size: Defini o tamanho do texto.

Text color: Defini a cor do texto. Tudo quanto é texto que você digitar irá aparecer com a determinada cor que definir.

Background color: Selecione o quadrado cinza (

hexadecimal da cor desejada para a cor de fundo da página. No nosso caso,

preenchemos com #000000(preto).

da página. No nosso caso, preenchemos com #000000(preto). ) ou preencha o campo com o código

) ou preencha o campo com o código

Background image: Caso deseje inserir uma imagem como plano de fundo da página, clique na pasta ao lado desse campo e selecione a imagem desejada. No nosso caso, deixamos o campo em branco, sendo assim, a página ficará com a cor de fundo que

escolhemos(#000000).

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

27

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Repeat: Relacionado a repetição da imagem de fundo, você fazer com que ela não repita, repita várias vezes, repita só no eixo X ou só no eixo Y.

Left margin: Margem alinhada para a esquerda.

Right margin: Margem alinhada para a direita.

Top margin: Alinhamento para cima.

Bottom margin: Alinhamento para baixo.

para cima. Bottom margin: Alinhamento para baixo. Link Você escolhe as propriedades do link que você

Link

Você escolhe as propriedades do link que você colocará em sua página.

Link font: Defini o tipo de fonte a ser aplicada no link.

Size: Defini o tamanho da fonte.

Link color: Defini a cor do texto do link.

Rollover color: Defini a cor do texto que o link ficará ao passar o mouse sobre ele.

Visited links: Você pode fazer com que o internauta saiba quais páginas de seu site, ele já visitou. Simplesmente alterando a cor dos links que já foram acessados.

Active links: Aqui você altera a cor do link de quando o internauta estiver com o foco em cima, ou quando o link estiver selecionado.

Underline style: Defini o estilo da linha que vai embaixo do link.

28

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Headings Você escolhe a formatação das tags de parágrafo.

Headings

Você escolhe a formatação das tags de parágrafo.

Heading 1: tag h1. Significa título de primeiro nível;

Heading 2: tag h2. Significa título de segundo nível;

Heading 3: tag h3. Significa título de terceiro nível;

Heading 4: tag h4. Significa título de quarto nível;

Heading 5: tag h5. Significa título de quinto nível;

Heading 6: tag h6. Significa título de sexto nível;

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

29

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Title/Encoding Title: Como vimos anteriormente, podemos dar um título

Title/Encoding

Title: Como vimos anteriormente, podemos dar um título a uma página seja via código HTML, no campo de texto Title que se encontra no topo do documento que está sendo editado no Dreamweaver, ou alterando o conteúdo deste campo. No nosso caso, preenchemos o campo com o texto “Minha Primeira Página Web”.

Document Type (DTD): Escolha o tipo de documento que você quer fazer o site.

Encoding: Defini o conjunto de caracteres que está em uso no documento atual.O padrão é Unicode (UTF-8).

em uso no documento atual.O padrão é Unicode (UTF-8). 30 Proibida a reprodução por qualquer meio

30

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Tracing Image

Tracing Image: Carregue a imagem que desejar nos diretórios do seu computador.

Transparency: Você regula a transparência da imagem que irá no seu arquivo.

Configurando um Site Local

Quando trabalhamos no desenvolvimento de um site, nos preocupamos enormemente

com o planejamento do mesmo, procurando verificar antes de tudo os mínimos detalhes

como:

-

Mapa do Site;

-

Número de Páginas;

-

Local onde as páginas serão armazenadas;

-

Conexão com o servidor;

-

Atualização dos arquivos;

E

outras coisas do gênero.

O

Dreamweaver possibilita a configuração de seu site localmente de modo que não é

necessário se preocupar com este tipo de planejamento inicial que pode vir a acarretar um pouco de atraso desnecessário no projeto. Configurando a Área de Trabalho Local,também chamado de site local, traz as vantagens de se ter uma visão geral da estrutura que seu site está adquirindo conforme o desempenho .

que seu site está adquirindo conforme o desempenho . Antes de darmos prosseguimento, abra o Dreamweaver

Antes de darmos prosseguimento, abra o Dreamweaver e solicite uma nova página e em seguida identifique na área de trabalho o Panel Group Files, idêntico ao que se encontra na imagem acima. Caso o mesmo não esteja visível, acesse o menu Window>File ou pressione F8 para torná-lo disponível. Para abrir a caixa de diálogo Site Definition clique em Site>New Site

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

31

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Vamos conhecer agora alguns dos parâmetros que podem ser

Vamos conhecer agora alguns dos parâmetros que podem ser configurados na categoria Local Info. Caso a guia BASIC esteja selecionada, clique na guia ao lado ADVANCED que possui mais opções de configurações a serem tratadas.

Site Name: Nome para referenciar ao site o qual você está trabalhando.

Local Root Folder: Nesta caixa de texto, digite o nome da pasta que contém todos os arquivos que pertencem ao site como imagens, css files, itens da biblioteca, templates,

) para navegar entre os diretórios existentes no micro e

selecionar a pasta desejada.OBS: Marcando a opção Refresh Local File List automatically você permite que o dreamweaver atualize automaticamente os arquivos locais cada vez que colocar um arquivo dentro da pasta raiz. De preferência deixe marcada esta opção para evitar ambiguidades no manuseamento de arquivos.

etc

ou clique no ícone ao lado(

manuseamento de arquivos. etc ou clique no ícone ao lado( Default Image Folders: Nesta caixa de

Default Image Folders: Nesta caixa de texto, você insere o caminho que se encontra a pasta que será utilizada para armazenar as imagens que envolvem todo o site. Quando configurados todos os arquivos que você inserir como imagem e não estiverem ao alcance da pasta raiz, o Dreamweaver copia os arquivos para dentro da pasta Default Image Folders.

HTTP Address: Digite a URL em que se encontra o Website. Preenchendo esta caixa de texto corretamente, o Dreamweaver habilita a função de verificação de links que utilizam url absolutas (caminho completo como, por exemplo, http://www.scriptbrasil.com/colunas/dreamweaver).

32

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Enable Cache: Esta opção indica se você quer criar um cache local para armazenar elementos que já foram utilizados no site. É bastante útil quando você está sempre recorrendo ao painel Assets que funciona como um repositório do site que contem elementos do tipo imagens, arquivos de flash, cores utilizadas, links, enfim uma variedade de elementos que ficam armazenados em um só painel.

Clique em OK e pronto!! Temos um Website configurado pronto para ser gerenciado e manuseado a qualquer momento. Caso queira realizar alguma alteração relacionada com a configuração local, acesse o menu Site>Edit Sites.

Trabalhando com tabelas

acesse o menu Site>Edit Sites. Trabalhando com tabelas São fundamentais na elaboração de sites com layouts

São fundamentais na elaboração de sites com layouts bem criativos. Com as tabelas você consegue posicionar quaisquer elementos na tela, sem necessitar da utilização de camadas, pois as camadas não são aceitas em alguns navegadores e podem apresentar diferenças de um para o outro.

Vamos realizar agora algumas operações simples, para você se familiarizar com a elaboração de tabelas no Dreamweaver e ao final, criaremos um layout simples de um site somente utilizando as tabelas. Dica: Procure na Internet alguns layouts de sites, ou até mesmo portais que você achar interessante, e abra-os no Dreamweaver para conhecer a estrutura de como o profissional web trabalhou utilizando as tabelas. Tenho certeza de que você irá perceber que foram utilizados alguns recursos interessantes que somente com a experiência, você poderá adquirir. Qualquer página da Internet pode ser salva. Para salvar uma página da Internet, abra uma página de seu interesse em seu navegador, depois vá em Arquivo>Salvar Como, no menu principal e salve como Página de Web Completa. Com o Dreamweaver aberto, crie uma nova página e altere o título para ―Trabalhando

com tabelas‖. Clique no ícone da tabela(

popup para modificação dos seguintes parâmetros da tabela, descritos logo abaixo:

dos seguintes parâmetros da tabela, descritos logo abaixo: ), e logo em seguida aparecerá uma janela

), e logo em seguida aparecerá uma janela

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

33

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Rows: O número exato de linhas que você deseja

Rows: O número exato de linhas que você deseja para a tabela que está sendo criada.

Columns: O número exato de colunas que você deseja para a tabela que está sendo criada.

Width: Largura da tabela. Ao lado do campo de texto, encontra-se uma caixa de seleção utilizada para definir se a largura será em pixels ou porcentagem. A diferença entre um e outro será abordada mais adiante.

Border thickness: Espessura da borda da tabela definida em pixels. Caso digite o valor zero ou deixe o campo em branco, o dreamweaver criará uma tabela sem bordas.

Cell Padding: Definição do espaçamento de dentro da célula da tabela, definido em pixels.

Cell Spacing: Definição do espaçamento entre as células e as bordas da tabela, definido em pixels.

34

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Veja abaixo, como ficou nossa página, de acordo com as modificações, especificadas no quadro acima.

acordo com as modificações, especificadas no quadro acima. Selecionando uma ou mais células aleatoriamente Para

Selecionando uma ou mais células aleatoriamente

Para selecionar uma ou mais células aleatoriamente, clique em cima com a tecla Ctrl pressionada. Marcando a célula, perceba que a borda em volta ficará em negrito, o que significa que a célula se encontra selecionada. Para desmarcar, siga o mesmo raciocínio.Clique em cima da célula desejada com o ctrl pressionado.

em cima da célula desejada com o ctrl pressionado. Selecionando linhas/colunas inteiras da tabela Para

Selecionando linhas/colunas inteiras da tabela

Para selecionar uma linha ou várias linhas inteiras, posicione o mouse na borda esquerda da tabela, procurando fazer com que o ponteiro se transforme em uma flecha apontando para a esquerda. Quando ponteiro o mudar, clique e arraste para selecionar múltiplas linhas.

o mudar, clique e arraste para selecionar múltiplas linhas. Observe no Property Inspector, que a imagem

Observe no Property Inspector, que a imagem de uma tabela com as linhas selecionadas se formará, demonstrando que todas as linhas foram selecionadas.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

35

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Para selecionar uma coluna ou várias colunas inteiras, você

Para selecionar uma coluna ou várias colunas inteiras, você segue os mesmos procedimentos da seleção de linha(s). Posicione o mouse na parte superior da borda da tabela, procurando fazer com que o ponteiro se transforme em uma flecha apontando para baixo. Quando o ponteiro mudar, clique e arraste para selecionar as colunas inteiras.

mudar, clique e arraste para selecionar as colunas inteiras. Observe no Property Inspector, que a imagem

Observe no Property Inspector, que a imagem de uma tabela com as colunas selecionadas se formará, demonstrando que todas as colunas foram selecionadas.

demonstrando que todas as colunas foram selecionadas. Selecionando uma seqüência de células Para selecionar uma

Selecionando uma seqüência de células

Para selecionar uma seqüência de células, existem duas formas:

· Arraste o ponteiro do mouse a partir de uma célula, até uma outra. · Clique em uma célula, e então pressione Shift em uma outra.

em uma célula, e então pressione Shift em uma outra. Mesclando e dividindo células No Dreamweaver,

Mesclando e dividindo células

No Dreamweaver, você pode fazer com que duas ou mais células se transformem em uma só, ou o contrário, fazer com que uma célula se torne várias.

Com a mesclagem e a divisão de células, você pode modelar a tabela, de acordo com o design necessário. A mesclagem de células no Dreamweaver funciona semelhante à mesclagem do

36

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Microsoft Excel. Basta selecionar duas ou mais células em seqüência e clicar no ícone

equivalente a mesclagem(

em ir ao menu principal, clicar em Modify>Table>Merge Cells ou utilizar as teclas de

atalho Ctrl+Alt+M.

Cells ou utilizar as teclas de atalho Ctrl+Alt+M. ) no Property Inspector da célula. Você pode

) no Property Inspector da célula. Você pode também optar

) no Property Inspector da célula. Você pode também optar Para dividir uma célula em várias
) no Property Inspector da célula. Você pode também optar Para dividir uma célula em várias

Para dividir uma célula em várias outras, selecione-a e clique no ícone correspondente à

divisão de células (

dividir uma célula em linhas ou colunas, até no máximo, 100 vezes o seu valor, de acordo com sua necessidade.

100 vezes o seu valor, de acordo com sua necessidade. ) , que se encontra no

) , que se encontra no Property Inspector da célula. Você pode

que se encontra no Property Inspector da célula. Você pode Após clicar no botão, aparece uma

Após clicar no botão, aparece uma janela popup pedindo para ser definido se a célula será dividida em linhas ou colunas e a quantidade de desejada.

dividida em linhas ou colunas e a quantidade de desejada. Obs: Quando você seleciona duas ou

Obs: Quando você seleciona duas ou mais células em seqüência, o botão de mesclagem

(
(

), torna-se ativo. Quando se tem apenas uma célula selecionada, o botão de divisão de

tem apenas uma célula selecionada, o botão de divisão de ) que fica habilitado para uso.

) que fica habilitado para uso.

células (

.

Montando estrutura completa de um Website com tabelas.

É chegada a hora de colocarmos em prática, o que aprendemos com os conceitos relacionados às tabelas no Dreamweaver. Como abordamos anteriormente, as tabelas servem para estruturar um website de maneira que você consiga posicionar vários

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

37

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

elementos da forma que achar necessário e também para uma melhor organização de seu layout e conteúdo. vamos criar de imediato, uma estrutura semelhante a muitos parecidos de portal web, utilizando segmentação de tabelas no Dreamweaver.

Com o Dreamweaver aberto, crie um novo documento HMTL. Altere o título do documento para Estrutura de Um Portal Web. Construa um tabela com 3 linhas e 3 colunas, sendo sua largura e altura iguais a 100%(Dessa forma você não precisa se preocupar com a resolução que o internauta irá utilizar, pois você terá total certeza de que a tabela ocupará toda a tela do browser). Quanto aos demais atributos:

toda a tela do browser). Quanto aos demais atributos: Aí está nossa tabela principal. É a

Aí está nossa tabela principal. É a tabela que irá abrigar todas as outras tabelas filhas. Para facilitar sua identificação, nomeie a tabela para ‖Principal‖ no campo Table Id no Property Inspector da tabela.

no campo Table Id no Property Inspector da tabela. Altere o valor da largura da primeira

Altere o valor da largura da primeira célula da tabela Principal para 160 px. Mescle a segunda e a terceira célula da primeira linha da tabela principal, dessa forma

38

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

iremos criar a área onde ficará o banner.

Pressione F12 para visualizar. O resultado deve ser parecido com a figura abaixo.

O resultado deve ser parecido com a figura abaixo. Obs: Repare que apesar da largura e

Obs: Repare que apesar da largura e altura estarem 100%, a tabela não ocupa toda a tela do navegador, pois existe um espaço tanto no eixo x quanto o eixo y. Para retirar esse espaço vá em Modify>Page Properties(Ctrl+J) e zere os valores TopMargin e LeftMargin. Caso esses atributos se encontrem sem valor algum, significa que o browser.está utilizando o valor default(padrão) que é igual a 2. Mescle a terceira linha da tabela principal com todas as colunas, para criarmos a área do rodapé.

com todas as colunas, para criarmos a área do rodapé. Agora iremos criar uma tabela com

Agora iremos criar uma tabela com nosso menu principal. Clique em cima da primeira célula da segunda linha e crie uma tabela com 14 linhas e 1 coluna com os seguintes parâmetros:

com 14 linhas e 1 coluna com os seguintes parâmetros: Dentro dessa mesma célula, altere seu

Dentro dessa mesma célula, altere seu alinhamento vertical para top, sendo que o default é middle. Dessa forma, caso o conteúdo das células ao lado forem maior do que a célula

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

39

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

que se encontra à tabela, o menu ficará sempre suspenso, acompanhando o cabeçalho do site (junto com a logo e o banner). Nomeia a tabela para ―Menu‖ e veja o resultado.

Nomeia a tabela para ―Menu‖ e veja o resultado. Pinte as linhas da tabela ―menu‖ alternadamente

Pinte as linhas da tabela ―menu‖ alternadamente com as cores #E6F3FF e #F0F8FF, altere a largura da terceira célula da segunda linha pra 130px(onde ficará definida a área do site que contém diversas seções) e também a altura da célula do rodapé.

diversas seções) e também a altura da célula do rodapé. Dentro da célula central, insira uma

Dentro da célula central, insira uma tabela com 2 linhas e 1 coluna, com largura e altura

40

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

iguais a 100%, composta pelos seguintes parâmetros.

CS3 iguais a 100%, composta pelos seguintes parâmetros. Nomeie- a para ―Corpo‖. Altere a altura da

Nomeie-a para ―Corpo‖. Altere a altura da primeira célula da tabela ‖Corpo‖ pra 20px e pinte-a com a cor #CCEDFF.

E pronto!! Agora temos a estrutura de um portal, desenvolvida no Dreamweaver somente com a utilização de tabelas. Agora resta identificar suas áreas. Veja o resultado pressionando F12.

identificar suas áreas. Veja o resultado pressionando F12. Salve a estrutura com o nome de estrutura.html,

Salve a estrutura com o nome de estrutura.html, pois iremos utilizá-la futuramente, na criação de templates.

Veja agora o exemplo real de uma página implementada com esse layout:

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

41

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 A mesma estrutura de tabelas que criamos anteriormente, só

A mesma estrutura de tabelas que criamos anteriormente, só que retiramos alguns

atributos Acabamos de fazer uso de todos os conhecimentos básicos do Dreamweaver para ser criado uma página web. Veja que utilizamos como, por exemplo, as bordas, que

passaram a não existir e acrescentamos outros como as cores de fundo no cabeçalho e no rodapé.

Conforme aumentar sua influência na utilização da ferramenta, seu conhecimento irá expandir cada vez mais, e com isso, será capaz de criar layouts de diversas formas.

Dica: Aconselho você, aprender a utilizar alguma ferramenta para criação de imagens

gráficas para web, de preferência, alguma que trabalhe com total compatibilidade com o Dreamweaver, como o Macromedia Fireworks. No próprio site do IPED, você pode realizar um ótimo curso dessa ferramenta, para enriquecer seu conhecimento relacionado

à área de web. Também pode buscar informações no portal fireworks (http://fireworks.ScriptBrasil.com.br).

Criação de Templates no Dreamweaver Como já era de se esperar, nosso curso irá fornecer um conceito bastante forte do Dreamweaver que é indispensável na criação de qualquer Website bem estruturado hoje em dia: A criação de Templates.

42

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

O que são Templates? Antes de entrarmos nos detalhes, gostaria de dizer que Template é um dos recursos mais úteis já criados no Dreamweaver.

Templates (modelos), como o próprio nome já diz, são modelos prontos de páginas que você pode utilizar em todo o site, de forma que, caso seja necessário a realização de alguma modificação na estrutura da página, somente é feita no documento- mestre(template), economizando tempo na manutenção proporcionado um maior controle das páginas, beneficiando todo o site e a saúde do webmaster.

Av. Macromedia DW MX Nº 10 - BrasilCep: 27.500-000 - Caixa Postal: 80.000Tel:

1234-5678 Fax: Ramal 123www.dwmx.net

Considere o rodapé da empresa XYZ acima, sendo utilizado em 60 páginas formatadas com a cor verde, e com a fonte tamanho 10. O Cliente visualiza o trabalho e faz uma

solicitação por e-mail alegando que a fonte utilizada está um pouco ilegível para leitura e que a cor não está seguindo o padrão artístico da empresa, porque deveria ser azul marinho como o demonstrado abaixo. Sua procedência então é de abrir os 60 arquivos existentes e alterar um por um, até conseguir fazer com que todas as modificações solicitadas pelo cliente, sejam realizadas,

concorda?

Exato, só que dessa forma, sem a utilização de Templates, você perdeu um bocado de tempo, que poderia ser economizado até em 90%.

Baseado nesse exemplo real, cometido por alguns Webmasters, é de imenso ganho, adquirir o conhecimento de templates, que será explicado detalhadamente a seguir.

Como funcionam os Templates. Assim que os templates(documentos-mestres) são criados, você pode aplicá-los em

qualquer página, sendo esta, passando a possuir a estrutura do template e podendo somente serem alteradas as áreas definidas na página do documento-mestre, que possui

a extensão dwt(dreamweaver template).

Os templates também garantem a confiança na alteração de suas páginas, podendo ser

alteradas somente, as regiões que foram definidas como editáveis (Abordaremos esse assunto mais à frente).

Criando um Template.

Primeiramente, gostaria que abrisse a estrutura que salvamos anteriormente chamada estrutura.html.

Com a estrutura aberta no dreamweaver, vamos agora salvá-la como um template, para podermos criar as áreas editáveis. Vá ao menu principal e clique em File > Save as Template.

Obs: Você deve ter algum Website local configurado, como visto anteriormente, ou senão,

o dreamweaver não permitirá a criação de templates.

Logo em seguida aparecerá uma janela, com uma caixa de seleção com todos os sites configurados localmente, a lista de templates existentes àquele site, e uma caixa de texto

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

43

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

pedindo para informar o nome do documento que deseja salvar como template.

o nome do documento que deseja salvar como template. Salve o documento como Master e repare

Salve o documento como Master e repare que após clicar no botão save, o nome do documento passará para Master.dwt, significando que a partir de agora, você está trabalhando com um template, o que lhe dá o poder de habilitar novas várias opções existentes somente para edição de templates. Faça qualquer alteração no documento e salve-o. Observe que aparecerá uma janela avisando que em seu template não existem áreas editáveis.

avisando que em seu template não existem áreas editáveis. Criando uma área Editável: Uma área editável,

Criando uma área Editável:

Uma área editável, proporciona a realização de alterações nas páginas que derivam a partir da página-mestre (em nosso exemplo, a página master.dwt). Caso não seja criada nenhuma área editável no template, não há necessidade de sua existência, pois não será possível fazer nenhuma modificação nas páginas derivadas. Clique com o mouse em cima da área no site referente ao banner principal no topo da página. Para criar uma área editável, vá ao menu Insert>Template Objects>Editable Region. Você pode também clicar no ícone Editable Region, na categoria Templates ou fazer uso das teclas de atalho Ctrl+Alt+V.

44

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Em seguida, temos uma janela popup pedindo para informar

Em seguida, temos uma janela popup pedindo para informar o nome da nova região. Toda região deve ser identificada com um nome, não podendo existir duas regiões com o mesmo nome. Nomeie a nova região para TopBanner e clique em ok, como ilustrado na figura abaixo.

TopBanner e clique em ok, como ilustrado na figura abaixo. Obs: Não utilize caracteres especiais no

Obs: Não utilize caracteres especiais no campo Name.

Observe que na área do banner, agora aparece na tela, uma área retangular contendo o nome da região que acabamos de criar, o que significa que essa área já pode ser editável nos documentos que são baseados nesse template.

editável nos documentos que são baseados nesse template. Vamos criar todas as áreas que serão possíveis

Vamos criar todas as áreas que serão possíveis editar. Além da TopBanner, crie também as áreas chamadas título, corpo e seção (evite caracteres especiais, como definido acima), associadas em seus devidos lugares.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

45

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Salve e feche o template. Obs: Veja que o

Salve e feche o template.

Obs: Veja que o Dreamweaver cria uma pasta chamada Templates na pasta raiz da configuração de seus site. Ali é onde ficarão alocados todos os templates. Não faça nenhuma alteração relacionada ao nome da pasta, nem mesmo, colocar todas as suas letras em minúsculas, senão o Dreaweaver não reconhecerá mais sua existência e acarretará problemas relacionados à atualização e localização dos templates.

relacionados à atualização e localização dos templates. Agora abra um novo documento baseado no template que

Agora abra um novo documento baseado no template que acabamos de criar. Vá ao menu principal e clique em File >New. Na guia Templates, selecione o site que abriga o documento-mestre, veja que aparecerá o template Master, o qual acabamos de salvar.

46

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Clique em Create. A partir de agora, estamos trabalhando

Clique em Create. A partir de agora, estamos trabalhando com a página baseada no template Master. A princípio, a tela é igual à do template-mestre, só que você não pode editar nada na página a não ser, as áreas que foram configuradas para serem editadas que são:

TopBanner, Titulo, Corpo e Seção.

Gostaria que você inserisse os seguintes arquivos abaixo em seus respectivos lugares, correspondentes às áreas editáveis da página que acabamos de criar e salve-a como empresa.html.

página que acabamos de criar e salve-a como empresa.html. Proibida a reprodução por qualquer meio eletrônico

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

47

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Tente deixar nossa página empresa.html, semelhante à página abaixo.

nossa página empresa.html, semelhante à página abaixo. Após criar a página empresa.html, baseada no template

Após criar a página empresa.html, baseada no template Master, salve e feche-a.

Agora crie uma nova página, também baseada no template master, com o nome de servicos.html e insira os seguintes arquivos em seus respectivos lugares.

e insira os seguintes arquivos em seus respectivos lugares. 48 Proibida a reprodução por qualquer meio

48

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Tente deixar nossa página servicos.html, semelhante à página abaixo.

nossa página servicos.html, semelhante à página abaixo. Obs: Lembrando-se que nossa intenção nessa parte do curso

Obs: Lembrando-se que nossa intenção nessa parte do curso , é a de mostrar a funcionalidade dos templates. Não se preocupe com a formatação do layout.

Salve a página servicos.html. Veremos, agora a aplicação de um template.

Imagine que você tenha criado 20 páginas iguais a esta, e seu coordenador chega e solicita que deve ser inserido um novo link chamado trabalhe conosco no menu lateral.

Da maneira convencional, você abriria os 20 aquivos e editaria um a um. Mas como realizamos a criação dessas páginas com a aplicação de templates, iremos mostrar como atualizar de maneira simples.

Abra a página-mestre(Master.dwt) e crie o link ―trabalhe conosco‖ normalmente. Salve e observe que irá aparecer uma janela, perguntando, se você deseja atualizar todas as páginas baseadas neste template.

Essa janela aparece porque o Dreamweaver reconhece que você está fazendo a atualização de um template e que existem vários arquivos dependentes desse documento, que também podem ser atualizados ao mesmo tempo.Clique em sim.

Logo em seguida, aparece um log informando em qual local ocorrerá a atualização, o número de arquivos existentes no site, o nº de arquivos que foram atualizados, o tempo de atualização, etc.

Clique em Close e abra a página empresa.html e serviços.html na tela de seu navegador e veja que as duas foram atualizadas com sucesso.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

49

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Além da área editável, os templates possuem outros recursos que podem ser bastante úteis, se usados corretamente. São eles:

ser bastante úteis, se usados corretamente. São eles: - Optional Region – Cria uma área que

- Optional Region Cria uma área que pode ser visualizada ou não, ficando a critério

do usuário do Template. Esta área não pode ser editável, para criar uma área opcional

editável, utilize o íconne Editable Optional Region (

editável, utilize o íconne Editable Optional Region ( ). - Repeating Region - Cria uma área

).

editável, utilize o íconne Editable Optional Region ( ). - Repeating Region - Cria uma área

- Repeating Region - Cria uma área de repetição no Template.

Region - Cria uma área de repetição no Template. Editable Optional Region – Cria uma área

Editable Optional Region Cria uma área opcional no template que pode ser editada.

-

Cria uma área opcional no template que pode ser editada. - Repeating Table - Cria uma

Repeating Table - Cria uma área de repetição no formato de tabelas. Você pode definir os atributos da tabela no qual terão as células editáveis.

-

Optional Region

Serve para habilitar a visualização de uma determinada área da página, quando convocada. Como por exemplo, caso você esteja trabalhando em um site e deseja que a seção seja habilitada somente em algumas páginas determinadas pelo próprio webmaster. A Optional Region serve para os casos em que se deseja visualizar um certo conteúdo, sem a necessidade de alterá-lo, pois neste recurso, fica impossibilitada esta função.

pois neste recurso, fica impossibilitada esta função. Obs: Mas caso precise criar áreas Opcionais Editáveis,

Obs: Mas caso precise criar áreas Opcionais Editáveis, utilize o ícone Editable Optional Region.

Editáveis, utilize o ícone Editable Optional Region. Acima acabamos de criar uma área Opcional(não editável).

Acima acabamos de criar uma área Opcional(não editável).

50

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

A opção ―Show by Default‖, é utilizada para definir se a região já virá visível ou não.

Para definir se a área estará visível ou não, crie ou abra uma página baseada no template que você definiu a Optional Region e vá ao menu principal e clique em Modify > Templates Properties e veja que todos os Optional Regions e os Optional Editable Regions criados estarão lá, e você pode definir se eles estarão visíveis ou não, atribuindo os valores true ou false.

Trabalhando com Repeating Region.

Áreas de repetição são utilizadas para quando se deseja criar várias áreas com o mesmo conteúdo de acordo com a necessidade. Imagine que seu site utilize algum tipo de avaliação como, por exemplo, um número limitado de estrela de um a cinco. Na primeira página, temos de adicionar 3 estrelas. Daí então, teremos que criar uma região de repetição contendo a estrela. Veja o exemplo abaixo de como criar.

contendo a estrela. Veja o exemplo abaixo de como criar. Abra um template e clique no

Abra um template e clique no botão Repeating Region(

Logo em seguida abre uma janela popup solicitando que você defina o nome da nova

região. Nomeie-a para ―Stars‖ e clique em Ok.

) na categoria ―Templates‖.

―Stars‖ e clique em Ok. ) na categoria ―Templates‖. Veja que a nossa área de repetição

Veja que a nossa área de repetição foi criada. Logo em seguida insira uma imagem

qualquer de uma estrela para utilizar como exemplo( que acabou de criar. O exemplo deve ficar parecido como o citado abaixo:

criar. O exemplo deve ficar parecido como o citado abaixo: ) e coloque-a dentro da nova

) e coloque-a dentro da nova área

como o citado abaixo: ) e coloque-a dentro da nova área Salve esta página e crie

Salve esta página e crie ou edite uma página baseada neste template contendo a área de Repetição. Logo quando abre a página, aparece a imagem da estrela dentro da região, contendo 4 botões que possuem funções voltadas à própria área de repetição:

Cria uma cópia da área de repetição. Exclui a área de repetição que estiver focada. Transfere a área que estiver focada para
Exclui a área de repetição que estiver focada. Cria uma cópia da área de repetição. Transfere a área que estiver focada para um nível
Transfere a área que estiver focada para um nível abaixo. repetição. Exclui a área de repetição que estiver focada. Transfere a área que estiver focada para
Transfere a área que estiver focada para um nível acima.repetição. Exclui a área de repetição que estiver focada. Transfere a área que estiver focada para

Agora você tem um sistema de avaliação (baseado no número de estrelas) que pode ser usado em qualquer página. Clique no botão (+) de acordo com a necessidade de estrelas

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

51

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

que necessitar, como no exemplo abaixo que utilizamos 4 estrelas.

como no exemplo abaixo que utilizamos 4 estrelas. Para excluir uma das áreas, clique no botão

Para excluir uma das áreas, clique no botão (-), conforme necessário.

Trabalhando com Editable Optional Region.

Editable Optional Region (área Opcional Editável) é bastante utilizado quando no site, se tem uma determinada área que você deseja que seja vista ou não e que, quando visível, pode ser alterada em qualquer ocasião. Um bom exemplo é se você tem um site padronizado que a maioria das páginas contém um título e subtítulo, mas nem em todas as páginas, é necessário inserir o subtítulo. Daí então você pode utilizar a ―Editable Optional Region‖ caso deseje o subtítulo ou não.

Optional Region‖ caso deseje o subtítul o ou não. Abra um template e clique no botão

Abra um template e clique no botão Editable Repeating Region(

―Templates‖. Logo em seguida abre uma janela popup solicitando que você defina o nome

da nova região. Nomeie-a para ―Subtitulo‖ e clique em Ok.

) na categoria

Veja que a nossa área opcional editável foi criada. O exemplo deve ficar parecido como o citado abaixo:

Salve esta página e crie ou edite uma página baseada neste template contendo a área opcional editável. Logo quando abre a página, aparece a área de Subtítulo (caso a opção Show by Default permanecesse marcada) para ser preenchida.

Para definir se a área estará visível ou não, crie ou abra uma página baseada no template que você definiu a Optional Editable Region e vá ao menu principal e clique em Modify > Templates Properties e veja que todos os Optional Regions e os Optional Editable Regions criados estarão lá, e você pode definir se eles estarão visíveis ou não, atribuindo os valores true ou false.

Trabalhando com Repeating Table.

Um bom exemplo que pode ser dado, de quando fazer uso da opção Repeating Table, é quando você estiver trabalhando no conteúdo de um website que contenha vários tópicos relacionados em uma mesma tela e se deseja utilizar o tanto de áreas necessárias, de acordo com o número de tópicos existentes na página. Imagine que você esteja criando um FAQ (Frequentily asked questions) com várias perguntas de vários assuntos disponibilizados em links separados(como exemplo um faq para Dreamweaver, HTML, ASP, COLD FUSION, PHP) e cada faq contém um número de perguntas limitadas e variadas(58,25,36,45,55,60 perguntas). Cabe ao desenvolvedor criar uma área no template e de acordo com a necessidade de novas perguntas, habilitar a adição de mais áreas na página para as perguntas e respostas, sendo organizadas dentro de uma tabela.

52

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Abra um template e clique no botão Repeating Table(

Abra um template e clique no botão Repeating Table(

em seguida abre uma janela popup solicitando os parâmetros a definir para a tabela e o

nome da nova região.

) na categoria ―Templates‖. Logo

Defina os parâmetros de acordo com a figura abaixo:

Logo Defina os parâmetros de acordo com a figura abaixo: A única novidade que estamos vendo

A única novidade que estamos vendo são os campos Starting Row e Ending Row que definem de qual linha a qual linhas que exitirão áreas editáveis. Em nosso caso particular, iniciamos da linha 1 e terminamos na última, a linha 2.

Após criada a Repeating Table, altere a cor de fundo das células para #D9EBFB e #EAF4FD e também das duas áreas editáveis para Pergunta e Resposta. O exemplo deve ficar parecido como o citado abaixo:

O exemplo deve ficar parecido como o citado abaixo: Salve esta página e crie ou edite

Salve esta página e crie ou edite uma página baseada neste template contendo a Repeating Table. Logo quando entrar na página, você encontrará a área editável do Faq com 4 botões que possuem funções voltadas à própria área de repetição:

Cria uma cópia da área de repetição.possuem funções voltadas à própria área de repetição: Exclui a área de repetição que estiver focada.

Exclui a área de repetição que estiver focada.de repetição: Cria uma cópia da área de repetição. Transfere a área que estiver focada para

Transfere a área que estiver focada para um nível abaixo.Exclui a área de repetição que estiver focada. Transfere a área que estiver focada para um

Transfere a área que estiver focada para um nível acima.Transfere a área que estiver focada para um nível abaixo. Pronto! Agora você pode inserir quantas

Pronto! Agora você pode inserir quantas perguntas desejar, de acordo com a necessidade de cada página baseada no template, bastando apenas clicar no botão (+). Para excluir alguma área, clique em cima da mesma e pressione o botão (-).

Caso as perguntas não estejam na ordem correta, utilize os botões las corretamente.

CONSTRUINDO FORMULÁRIOS

os botões las corretamente. CONSTRUINDO FORMULÁRIOS e Proibida a reprodução por qualquer meio eletrônico ou

e

os botões las corretamente. CONSTRUINDO FORMULÁRIOS e Proibida a reprodução por qualquer meio eletrônico ou

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

para organizá-

53

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

O Dreamweaver pode criar vários formulários que podem ser usados na captura de todos os tipos de informações dos visitantes de seu site. Você pode realizar uma pesquisa, coletar informações para contato com clientes ou colocar um livro de visitantes no seu site da Web com campos para nomes, endereços, interesses, comentários e eventuais perguntas de visitantes.

Quando os visitantes preencherem o formulário, eles clicam no botão Enviar para enviá-lo a você. Você deve oferecer um mecanismo para que o computador do visitante envie as informações preenchidas no formulário. Geralmente, isso é feito por meio de linguagem server-side(ColdFusion, ASP, PHP), um a linguagem ou ambiente que irá processar as informações e enviá-las a você por correio eletrônico ou colocá-las dinamicamente em uma página do seu site da Web ou até mesmo cadastrá-las em um banco de dados(como mysql, access, SqlServer).

em um banco de dados(como mysql, access, SqlServer). Criando um Formulário HTML Na categoria Form, existem

Criando um Formulário HTML

Na categoria Form, existem uma série de botões de inserção para vários formulários diferentes, como vimos anteriormente na apresentação das categorias. Vamos examinar alguns deles.

Mantenha o mouse sobre cada um dos quatorze botões na categoria Form o tempo suficiente para que seu nome referente apareça. Clique no botão superior esquerdo da categoria Form para inserir um espaço de

formulário em branco(

Um formulário em branco no Dreamweaver é representado por um retângulo contornado por uma

linha vermelha pontilhada, como ilustrado na figura abaixo.

)
)
vermelha pontilhada, como ilustrado na figura abaixo. ) Selecionar este retângulo revela as propriedades de Form

Selecionar este retângulo revela as propriedades de Form no Property Inspetor.

revela as propriedades de Form no Property Inspetor. A caixa de texto embaixo da palavra ―Form‖

A caixa de texto embaixo da palavra ―Form‖ é usada por linguagens de scripts, como JavaScript ou VBScript, para controlar o formulário. Na área de texto junto à palavra ―Action‖, coloque a url para onde os dados serão enviados e processados por uma linguagem server-side(ColdFusion, ASP, PHP). Vamos simplificar usando um ―Mailto‖ do lado do cliente. Basta inserir seu endereço de correio eletrônico assim: ―mailto:you@yourweb.com‖. Defina o método como ―Post‖.

Clique para inserir o cursor na área do formulário da página e digite as seguintes perguntas separadas por uma quebra de parágrafo:

54

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Qual o seu nome? Qual o seu e-mail? Qual o seu livro favorito? Qual a sua comida favorita? Clique com o cursor no final da primeira pergunta e clique no botão Text field, que é o segundo botão da parte superior da categoria Form. (Também é possível usar Insert > Form Object > Text Field na barra de menu principal). Aparece um pequeno retângulo com bordas logo após a pergunta representando a caixa de texto(Text Field).

No inspetor Property, digite ―Nome‖ na caixa TextField e defina Char Width (largura do caractere) como ―50‖. A caixa de texto se expande prontamente. Nomear o campo não tem nenhum efeito óbvio, mas isso será usado por alguma outra linguagem para identificar o campo quando os dados forem apresentados.

Insira ―Digite seu nome‖ no campo Init Val do elemento Nome. O campo Init Val é um valor inicial que será exibido em um campo de texto, a menos que o visitante decida excluí-lo ou sobrescrevê-lo. Na maioria dos casos, ele ficará em branco. Insira um outro campo de texto após a segunda pergunta. Nomeie-o ―email‖ e defina Char Width como ―40‖. Insira um outro campo de texto após a terceira pergunta. Denomine-o ―livro‖ e defina Char Width como ―40‖.

Denomine- o ―livro‖ e defina Char Width como ―40‖. Coloque o cursor após a quarta pergunta,

Coloque o cursor após a quarta pergunta, mas, desta vez, escolha o 8º botão para selecionar Insert List/Menu. (Ou use a barra de menu para selecionar Insert > Form Objects > List/Menu). Digite o nome ―Comida‖ no campo List/Menu, defina o botão de radio Type como Menu e clique no botão List Value.

de radio Type como Menu e clique no botão List Value. Aparece a caixa de diálogo

Aparece a caixa de diálogo List Values. Digite ―Salpicão‖ nas colunas Item label e Values. Clique no símbolo + para adicionar uma nova linha e digite ―Churrasco‖ nas duas colunas. Adotando o mesmo procedimento, insira ―Pizza‖, ―Frutas‖ e ―Legumes‖ . Em seguida, clique em OK.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

55

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Insira uma quebra de parágrafo, colocando o cursor logo

Insira uma quebra de parágrafo, colocando o cursor logo após o último campo de texto, pressionando Enter. Clique no décimo terceiro botão da categoria Form, Button (ou escolha Insert > Form Objects > Button na barra de menu principal). Repita a operação para ter dois botões idênticos próximos um ao outro. Agora, vamos modificar o primeiro botão para que ele reinicialize o formulário. Selecione o primeiro botão e no inspetor Property Button, assinale o botão de rádio que diz ―Reset form‖. Observe que a etiqueta e o nome do botão também mudam.

Observe que a etiqueta e o nome do botão também mudam. Visualize e teste o formulário

Visualize e teste o formulário pressionando F12, colocando seu nome, mudando o texto no segundo Text Field e escolhendo um item da lista comida no menu suspenso que acabamos de criar.

item da lista comida no menu suspenso que acabamos de criar. Adicionando Botões de Rádio Os

Adicionando Botões de Rádio

Os botões de rádio permitem que os visitantes selecionem a partir de várias escolhas. Somente um botão de um grupo poderá estar ativo de cada vez. Vamos adicionar alguns botões de rádio a nosso formulário. Após o campo do endereço de correio eletrônico, digite a pergunta ―Qual seu sexo?‖ Clique o cursor no formulário logo após a pergunta.

Clique no ícone Radio Button ( Objects > Radio Button.

Clique no ícone Radio Button ( Objects > Radio Button. ) na categoria Forms ou escolha

) na categoria Forms ou escolha Insert > Form

56

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Repita esta tarefa mais uma vez para obter dois botões. À direita do primeiro, digite Masculino e à direita do segundo digite Feminino.

Clique para selecionar um dos botões de rádio e exibir as propriedades Radio Button no Property Inspector.

Todos os botões de rádio de um grupo devem possuir o mesmo nome. Vamos manter o nome padrão para área de texto embaixo do RadioButton.

Você pode fazer com que um botão de um grupo radio inicie já selecionado. Para isso vá no property Inspector do Radio Button e altere o Initial State para ―Checked‖.

do Radio Button e altere o Initial State para ―Checked‖. Adicionando Caixas de Seleção As caixas

Adicionando Caixas de Seleção

As caixas de seleção permitem que os visitantes façam múltiplas escolhas e, por isso, são adequadas para escolhas que incluam instruções do tipo ―Selecione todas as categorias‖.

Clique para inserir o cursor após os novos botões de rádio e pressione Ctrl+Enter para inserir uma quebra de linha e em seguida escreva o texto ―Qual sua atividade favorita na internet?‖.

o texto ―Qual sua atividade favorita na internet ?‖. Escolha o ícone Checkbox ( Box na

Escolha o ícone Checkbox (

Box na barra do menu principal. Após a caixa de seleção, digite ―Ler piadas‖. Insira uma outra caixa de seleção e digite ―Salas de Bate-papo‖.

) na categoria Forms ou Insert > Form Objects > Check

No Property Inspector de cada caixa de seleção, digite um nome no campo embaixo de Checkbox. Você pode usar o mesmo nome ou um diferente para as caixas de seleção. Junto a Checked Value, atribua às duas caixas os nomes ―internet‖ e ―bate-papo‖.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

57

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Visualize o trabalho e salve-o.

- Curso de Dreamweaver CS3 Visualize o trabalho e salve-o. Obs: Veja que com os radio

Obs: Veja que com os radio buttons, você pode selecionar apenas uma opção entre várias. Já nas caixas de seleção, você seleciona o número de itens que desejar.

Organizando os campos dos formulários uniformemente

Para organizar os campos dos formulários e os nomes que o acompanham (nome, endereço, cep), geralmente utilizamos tabelas para organizar bem direitinho o layout e deixar uma aparência bem agradável aos visitantes. Veja o exemplo

uma aparência bem agradável aos visitantes. Veja o exemplo Veja como conseguimos alinhas os campos um

Veja como conseguimos alinhas os campos um embaixo do outro. Agora basta retirar as bordas e formatar a página para se ter uma boa aparência.

58

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 CONSTRUINDO E USANDO QUADROS (Frames) Com Quadros(Frames), você pode

CONSTRUINDO E USANDO QUADROS (Frames)

Com Quadros(Frames), você pode dividir a janela de um navegador em várias janelas. Cada janela pode ser controlada separadamente, tornando possível manter parte do conteúdo de uma janela constante em uma página enquanto outros recursos são alterados. É uma forma útil para estabelecer uma barra de navegação fixa. Você pode colocar os links em um quadro e especificar que as páginas vinculadas devem ser exibidas em um quadro da mesma janela do navegador. Um conjunto de quadros estabelece quais páginas HTML irão preencher cada quadro quando elas são exibidas em um navegador.

Ao criar uma página da Web que usa quadros, você cria páginas múltiplas porque cada quadro do conjunto de quadros é um arquivo HTML diferente. O conjunto de quadros descreve o tamanho e a localização de cada quadro, juntamente com os nomes dos arquivos HTML exibidos em cada quadro. Assim, uma página da Web com dois quadros consiste em três arquivos separados: o arquivo do conjunto de quadros e dois arquivos com o conteúdo que aparece dentro dos quadros.

Como cada quadro é um outro arquivo HTML, você pode inserir texto, imagens, arquivos multimídia, tabelas e outros elementos em cada Quadro. O Dreamweaver exibe todas as páginas no conjunto de quadros simultaneamente para que você possa ver como a página será exibida em um navegador. Para editar cada página, basta mover o cursor da área de um quadro para outro e formatá-la, como faria com outros arquivos HTML.

Para salvar o HTML exibido em um quadro, coloque o cursor na área do quadro e escolha File > Save. Para salvar um arquivo com um conjunto de quadros, escolha File > Save Frameset ou File > Save Frameset As. Para salvar todos os arquivos abertos de uma só vez, escolha File > Save All. O recurso Save All salva o conjunto de quadros e todas as páginas HTML exibidas. Você será solicitado a nomear

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

59

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Crie um Conjunto de Quadros com Três Quadros

Escolha File > New para criar uma nova página. Logo em seguida na janela ―New Document‖, selecione a categoria Page From Sample > Framesets > Fixed Top,NestedLeft(como demonstrado na imagem abaixo) defina as propriedades da página em Modify > Page Properties , atribuindo o título ―Garden Emporium‖.

Properties , atribuindo o título ―Garden Emporium‖. Observe que a página possui 3 divisórias sendo cada,

Observe que a página possui 3 divisórias sendo cada, uma página HTML diferente. Uma quarta página HTML, o conjunto de quadros, descreve a localização e o tamanho das três primeiras.

descreve a localização e o tamanho das três primeiras. Para visualizar esta quarta página(frameset), clique em

Para visualizar esta quarta página(frameset), clique em cima de uma das bordas que separam as páginas HTML e perceba que o Property Inspector irá apresentar uma outra interface contendo informações como o número de linhas e colunas que compõem o frameset , a largura de cada frame definida em px, % ou relativo, entre outras.

60

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Edite cada seção do conjunto de frames. Lembre-se de

Edite cada seção do conjunto de frames.

Lembre-se de que, na verdade, estamos criando quatro documentos HTML diferentes: o conjunto de quadros, o quadro superior, o quadro da esquerda e o quadro da direita. Podemos editar cada seção do conjunto de quadros como faríamos com qualquer outra página da Web. Escolha File > Save Frameset e denomine-o index.html.

Clique no quadro superior e salve o documento como top.htm. Aqui você pode inserir a imagem de um banner, por exemplo. Centralize a imagem na página e ajuste a borda do quadro conforme necessário para exibi-la adequadamente. (Clique fora da imagem para abrir o Property Inspector da direita e use o ícone do center). Salve o trabalho.

Clique no quadro da esquerda e salve o documento como menu.htm. Digite as palavras ―uol‖, ―bol‖, ―yahoo‖, ―google‖ e use o inspetor Property para formatá-las como link com seus respectivos endereços. Adicione uma quebra de linha entre cada uma das palavras. Clique na linha que separa os dois quadros inferiores e arraste a mesma para a esquerda até que o texto e as imagens estejam alinhados, tornando a visualização do menu mais atraente. Clique no grande quadro vazio e digite as palavras: ‖ ‖ Salve o quadro como principal.htm. Escolha File > Save All para salvar todas as alterações feitas nos quatro documentos.

Visualize o trabalho pressionando F12.

Deixe este documento aberto, pois iremos utilizá-lo posteriormente.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

61

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Definindo Links em um Conjunto de Quadros Links em

Definindo Links em um Conjunto de Quadros

Links em quadros são basicamente iguais a links em outros documentos HTML. A diferença é que, em um conjunto de quadros, você precisa especificar um destino para identificar onde a página vinculada será aberta (Você pode optar por abrir em um dos quadros existentes). Quando você tem uma linha de links no quadro da esquerda de uma página e deseja que eles sejam abertos no quadro da direita, o quadro da direita torna-se o destino. Antes de estabelecer o link com um destino, você precisa nomeá-lo. O seguinte exercício mostrará como criar um link em um quadro que muda o conteúdo de um quadro diferente (Como na nossa página de portais vista anteriormente):

Clique pressionando Alt para selecionar o quadro da esquerda. Se o inspetor Property não estiver aberto, escolha Window > Properties. Nomeie o quadro inserindo ―Menu‖ na caixa de texto Frame (logo abaixo da palavra Frame) no inspetor Property. (Você pode escolher qualquer nome).

no inspetor Property. (Você pode escolher qualquer nome). Repita a etapa e insira um nome para

Repita a etapa e insira um nome para cada quadro do conjunto de quadros. Para simplificar, utilize nomes que façam referência ao seu posicionamento na página como ―top‖ , ―left‖ e ―bottom‖. Observe as outras propriedades do quadro que também podem ser definidas aqui e que controlam outros atributos como barras de rolagem, margens e cor.

62

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Agora com o documento de portais aberto, faça com que todos os nomes se transformem em links com seus respectivos endereços (―http://www.scriptbrasil.com.br‖, ―http://www.iped.com.br‖, ―http://www.imasters.com.br‖, ―http://www.wmnonline.com.br‖).

Agora faça com que na lista pop-up Target, escolha ―Principal‖ como o nome do quadro no qual a página vinculada deve ser aberta. Defina a borda como ―0‖.

vinculada deve ser aberta. Defina a borda como ―0‖. Escolha File > Save All para salvar

Escolha File > Save All para salvar seu trabalho e use a tecla F12 para testar o layout e os links em um navegador.

Lembre-se de que, na verdade, há quatro documentos em jogo aqui. Para ver o código HTML de um quadro individual, basta clicar no quadro e usar

a tecla de função F10 ou o botão HTML do Launcher. Inspecionar ou editar o código do documento do conjunto de quadros é um pouco mais complicado.

do conjunto de quadros é um pouco mais complicado. Projetando Quadros para Navegadores Mais Antigos A

Projetando Quadros para Navegadores Mais Antigos

A menos que você forneça uma página alternativa, os navegadores mais antigos que não

suportam quadros exibirão uma página em branco. Para evitar isso, use a opção Noframes que permite oferecer uma página alternativa que é exibida apenas pelos navegadores que não suportam quadros. Para criar uma página alternativa simples com a opção Noframes:

Escolha Modify > Frameset > Edit Noframes Content. O Dreamweaver limpa a janela Document e as palavras ―noframes content‖ aparecem na

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

63

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

parte superior.

Grupo iPED - Curso de Dreamweaver CS3 parte superior. Insira o conteúdo Noframes na janela Document,

Insira o conteúdo Noframes na janela Document, adicionando imagens, texto e outros elementos à página e formatando os mesmos como faria com outros documentos.

Escolha Modify > Frames > Edit Noframes Content para retornar a exibição normal do documento do conjunto de quadros. Você pode usar o HTML Inspector para visualizar a fonte da página Noframes do documento no conjunto de quadros. A seção Noframes irá começar e terminar com marcas <noframes>. Dentro, ela se assemelha à seção <body> da página que não está contida em um quadro.

Criando uma Janela Popup

Nós iremos aprender agora, como criar uma janela popup pelo Dreamweaver CS3, ou seja, abrir uma url em uma nova janela. Nesse caso, a partir de um link. Com este Behavior é possível alterar também as propriedades de como a janela irá aparecer para o internauta. Você pode especificar propriedades como tamanho, atributos (se a janela

poderá ser redimensionada, se terá uma status bar, navigation bar,etc

bastante útil para utilização deste Behavior é quando se tem uma galeria de pequenas imagens(thumbnails) e o usuário deseja visualiza-las de forma ampliada, ao clicar em cima da própria. Abre-se uma nova janela com a imagem versão ampliada, podendo a área da janela estar do mesmo tamanho que a imagem.

). Um exemplo

Inicie um novo documento HTML e digite o texto "Clique aqui para abrir uma nova Janela Popup". Feito isso selecione todo o texto, vá na propriedade Link no Properties Panel e digite "javascript:;" (exatamente da forma que está escrito. Após a palavra javascript em minúsculo, vem dois pontos e ponto e vírgula tudo junto).

minúsculo, vem dois pontos e ponto e vírgula tudo junto). Se tudo der certo, o texto

Se tudo der certo, o texto que você selecionou vai se tornar um link. Continue com o texto selecionado e vá ao Menu > Window > Behaviors, clique no sinal de (+) e selecione o Behavior Open Browser Window.

64

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Logo em seguida, aparecerá uma janela popup solicitando o

Logo em seguida, aparecerá uma janela popup solicitando o preenchimento dos seguintes parâmetros:

popup solicitando o preenchimento dos seguintes parâmetros: (*) URL to Display > Aqui você seta o

(*) URL to Display > Aqui você seta o endereço da nova janela popup. (*) Window Width > Especifica a largura da janela em pixels. (*) Window Height > Especifica a altura da janela em pixels. (*) Window Name > O nome da nova janela. Você utiliza se quiser vinculá-la a algum link ou na chamada de um javascript. O nome não pode conter espaços nem caracteres especiais. (*) Attibutes > Navigation Toolbar - É a barra do navegador que contém os botões que incluem o botão voltar, avançar, Página inicial, atualizar, etc

Location Toolbar - Barra de endereço, onde você digita a url em que deseja ir. Status Bar - é a área no rodapé da janela do navegador que exibe as mensagens contendo informações do carregamento da página e as URL's associadas aos links. Menu Bar - Onde são exibidos os botões Arquivo, Editar, Exibir, Favoritos e outros. Scrollbars as Needed - Especifica se a nova janela exibirá as barras de rolagem(tanto vertical, quanto horiontal) caso o conteúdo exceda o seu tamanho atual.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

65

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

Resize Handlers- Caso esta opção esteja marcada, será possível redimensionar a nova janela, tanto arrastando suas bordas, quanto clicando no botão maximizar.

arrastando suas bordas, quanto clicando no botão maximizar. OBS: Caso você não especifique os atributos para

OBS: Caso você não especifique os atributos para a nova janela, esta irá abrir com os mesmos atributos da janela do qual está sendo lançada. Especificando qualquer atributo da nova janela, dos listados acima, todos os atributos que não estão marcados, são desconsiderados, sendo válidos somente aqueles que estão marcados. Por exemplo, se você não especificar atributo algum, a nova janela abriria com 640 x 480 pixels e teria barra de navegação, barra de endereço, barra de status e barra de menu. Se você definir uma uma largura de 640 por 480, e não setar os atributos com a opção de checkbox, a janela irá aparecer sem barra de navegação, barra de endereço, barra de status e barra de menu e sem as barras de rolagem.

Agora pressione o botão OK pronto!! Você tem sua janela Popup sendo lançada a partir de um link. Para executar com outro evento, faça a alteração no Menu > Window > Behaviors. Clique na setinha que se encontra ilustrada abaixo e procure o evento onClick na relação de eventos irão aparecer.

o evento onClick na relação de eventos irão aparecer. OBS: Caso o evento não se encontre

OBS: Caso o evento não se encontre na lista, vá em WINDOW > BEHAVIORS, clique no

66

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3

sinal de (+) e selecione a opção SHOW EVENTS FOR e selecione outro browser, com a versão mais atualizada, para que o evento desejado possa ser selecionado.

Vezes ou outras, quando estamos precisando alterar as páginas de nosso(s) site(s), temos de fazer isso, até mesmo na mão. Algumas vezes, até é possível mas outras, nos desgasta de uma tal forma que nos irritamos facilmente em frente ao micro. - Não acredito que o cliente pediu para alterar o tamanho daquela logo de novo? - O quê? Vai demorar muito alterar todas essas 300 páginas, só porque você quer a cor da tabela branca, e não azul como combinado anteriormente! Não se desespere em nenhum desses pequenos casos!! O Dreamweaver possui uma ferramenta chamada "Find and Replace" que permite fazer alterações nas páginas, nas pastas selecionadas, ou até mesmo no site inteiro.

nas pastas selecionadas, ou até mesmo no site inteiro. As alterações a serem feitas são de

As alterações a serem feitas são de textos, podendo ser trocado um texto por outro, ou até mesmo alteração de tags. Por exemplo, você tem um logotipo que possui a dimensão de 150x20px em 100 páginas do site. O cliente chega e pede para alterar o tamanho da imagem para 125x25. Para otimizar seu tempo, você terá de utilizar a ferramenta "Find and Replace" em todo o site para que todos os arquivos sejam alterados, sem excessão. É bem simples!!! Vamos lá!!! Apesar de ser bem simples esta tarefa, é de importante valor, o seu conhecimento, principalmente para webmasters que trabalham na administração de grandes portais(imaginem alterar 1000 páginas na mão!!??!!). Primeiramente, você deve ter em mente qual o termo que deseja fazer alteração (tanto de código,tags,textos, e também da parte visual).Selecione-o e vá ao menu principal e clique em Edit > Find and Replace ou utilize as teclas de atalho Ctrl+F. Logo em seguida irá aparecer uma janela popup, com o campo a ser substituído, preenchido pelo termo selecionado. Logo abaixo, no campo "Replace", preencha com o termo que irá substituir o texto que se encontra no campo acima (termo que será substituído)!!

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

67

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 A primeira combo(Find In), permite selecionar a dimensão de

A primeira combo(Find In), permite selecionar a dimensão de páginas a ser atingida. Veja as opções Abaixo:

de páginas a ser atingida. Veja as opções Abaixo: Current Document: Permite fazer o replace (troca)

Current Document: Permite fazer o replace (troca) no documento atual que se encontra aberto. Folder: Permite fazer o replace em uma pasta de sua escolha. Selected Files in Site: Permite fazer o replace no documento que se encontra atualmente selecionado no painel site(F8). Entire Current Local Site: Permite fazer o replace em todos os documentos existentes no site.

Utilize o "Search for" para especificar o tipo de busca que deseja realizar.

para especificar o tipo de busca que deseja realizar. Source Code: É a opção responsável por

Source Code: É a opção responsável por fazer a busca no código HTML do documento (somente no código). Text: É a opção responsável por fazer a busca nas strings da janela do documento (Design View Mode). Text (Advanced): Busca de textos específicos da linguagem que podem ou não estar dentro das tags. Por exemplo, você poderia fazer a busca da palavra "Untitled" que geralmente se encontra entre as tags <title></title> e encontrar todas as páginas que não possuem título. Specific Tag: Usado para encontrar tags, atributos ou valores de atributos específicos. Por exemplo, você poderia buscar todas as tags <Img> que não possuem o atributo alt. As opções explicadas abaixo permitem expandir ou limitar a busca do termo.

68

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

Grupo iPED - Curso de Dreamweaver CS3

Grupo iPED - Curso de Dreamweaver CS3
Grupo iPED - Curso de Dreamweaver CS3 Match Case: Caso selecione esta opção, ela faz com

Match Case: Caso selecione esta opção, ela faz com que o termo procurado seja exatamente do jeito que foi digitado(case-sensitive). Por exemplo, se você fizer a busca pela palavra "scriptbrasil.com.br", vai ser totalmente diferente de "Scriptbrasil.com.br" ou "ScriptBrasil.com.br".

Ignore Whitespace Differences: Faz com que o termo buscado não se diferencie pela quantidade de espaços entre as palavras. Um exemplo é se opção estiver marcada e você procurar pelo termo "Script Brasil" (que possui um espaço entre as palavras), e substituí-lo por "Script Brasil" (que possui cinco espaços em branco), não haverá diferença entre um e outro e o Dreamweaver executará normalmente a função de substituição. Use Regular Expressions: Expressões regulares são buscas personalizadas que você pode criar montando a string que deseja procurar utilizando os diversos caracteres da tabela "escape" . São conhecidas também como padrões que descrevem uma determinada combinação de caracteres no texto.

Para fazer a busca utilizando-se de um dos caracteres especiais da tabela, você deve precedê-lo com a contra-barra ("\"). Por exemplo, caso deseje buscar um termo que inicie exatamente com string "bra" e gostaria de selecionar o termo por inteiro, você deve marcar a opçao Use Regular Expressions e digitar no campo de texto referente ao termo, bra\w*. Com isso você estará buscando todos as palavras que iniciam com "bra" e também pede para selecioná-la por inteiro. O buscador então irá encontrar palavras como Scriptbrasil.com, sobra, branca, manobras.

Proibida a reprodução por qualquer meio eletrônico ou impresso. Grupo iPED - Todos os direitos reservados - www.iped.com.br

69