CURSO VOCACIONAL

INFORMTICA / RESTAURAO / DESPORTO

ANO 9. - TURMA: B

INFORMTICA

Mdulo 13 - Criao de Pginas Web

| Manual de Dreamweaver |

ANO LETIVO: 2016/2017 FORMADOR: JORGE S

Pg. 2
 Objetivos Contedos Metodologias Avaliao
Conhecer os objetivos fundamentais Itens a abordar: O professor deve: Mecanismos/meios a adotar:
da utilizao de um Editor de HTML. Centralizao da informao; Efetuar exerccios de teor Instrumentos de avaliao
Eliminao de redundncias: terico/prtico; Escrita/Prtica;
Informao mais oportuna; Usar exemplos prticos do dia- Instrumentos de avaliao
Independncia dos programas; a-dia empresarial e comercial; oral;
Segurana da informao. Privilegiar aulas prticas para Observao direta de
que os alunos utilizem o competncias e atitudes;
Identificar as vantagens da utilizao Focar e explicar os itens: computador; Trabalho terico/prtico sobre
de um Editor de HTML. Integridade da informao; Utilizar enunciados/problemas a normalizao de estruturas de
Facilidade de acesso; que exemplifiquem todo o dados de uma base de dados;
Partilha de processo de criao/manipulao Outros instrumentos de
dados/concorrncia; de uma base de dados relacional; avaliao.
Segurana; Estimular o trabalho em grupo.
Facilidade de
consulta/cruzamento de
informao;
Facilidades de atualizao;
Confidencialidade;
Backups e Restores.
Identificar e descrever os termos
associados utilizao do Adobe
Dreamweaver. Os termos utilizados em bases de
dados:
Chaves primrias e
estrangeiras.
Campos/atributos, registos,
tabelas/entidades, domnios,
Conhecer as principais vistas do integridade referencial e de
Adobe Dreamweaver. entidade, estruturas, etc.

Os modelos:
Relacional;
Hierrquico;
Rede.
 Objetivos Contedos Metodologias Avaliao
Desenvolver o processo completo de A modelao de dados:
modelao de dados. Conceber o modelo lgico;
Aplicar regras de normalizao
na conceo das tabelas da base
de dados;
Conceber o modelo fsico.

Descrever o processo de normalizao As formas normais:

de uma base de dados. 1FN;
2FN;
3FN.

Automatizar completamente todo o Gesto e manipulao de uma BD:

processo de criao e manipulao de Criar a base de dados;
uma base de dados. Criar as tabelas, identificar as
chaves primrias e estabelecer os
respetivos relacionamentos;
Inserir dados nas tabelas;
Efetuar diversos tipos de
operaes de manipulao de
dados.
Durao: 30 horas
Bibliografia:
Ullman, J.; Widom, J. A, First Course in Database Systems. Prentice-Hall
Elmasri and Navathe, Fundamentals of Database Systems, 2nd edition. Benjamin/Cummings Pub
Korth and Silberschatz, Database Systems Concepts, 3rd edition. McGraw-Hill
Pereira, Jos Lus, Tecnologia de Base de Dados. FCA
Carrio, Jos; Carrio, Antnio, Desenho de Bases de Dados e Linguagem SQL. Edies Chambel

4
1 . I n t r o d u o a o a m b i e n t e d e t r a b a l h o

O Dreamweaver um editor HTML WYSIWYG (What You See Is What You Get) editado pela
Adobe/Macromedia que se distingue dos outros pela possibilidade de dar dinamismo s
pginas, utilizando o DHTML (Dynamic HTML).
A construo das pginas faz-se dentro de uma janela com vrias janelas flutuantes: uma
serve para inserir diferentes objectos (Window > Insert), a outra permite modificar as
propriedades dos elementos seleccionados (Window > Properties) e as outras servem para
abrir outras janelas como a do cdigo CSS, a dos behaviors (comportamentos), ou ainda a
janela de gesto do site (Window > Files).

1.1. FERRAMENTAS DE TRABALHO

A Barra Selector de Etiquetas

A barra permite seleccionar directamente as etiquetas de HTML (Tags). Do lado direito

podemos definir a rea de resoluo das nossas pginas web, obtendo igualmente uma
estimativa do espao necessrio para armazenar os contedos e o tempo de download.

5
 O Inspector de Propriedades

Esta janela apresenta sempre as propriedades do objecto que est seleccionado.

Se estiver a trabalhar numa tabela, o inspector de propriedades assumir a seguinte forma:

Palete dos Objectos (Barra de Insero)

A Palete dos Objectos contm os objectos mais comuns na criao de sites, assim como:
grficos, tabelas, linhas horizontais, campos de formulrios, links internos, quebras de linha, e
muitos outros. Existe vrios tipos de Objectos, por defeito a paleta que aparece sempre a
dos Objectos mais Comuns (categoria Comum). Se pretender alterar a paleta basta clicar no
separador que se encontra ao longo da barra de insero.
Nota: A barra de insero pode igualmente ser mostrada como itens dum menu.

Pg. 6
Os principais modos de visualizao

Modo Design (modo predefinido)

Pg. 7
2. D o c u m e n t o

2.1. PROPRIEDADES DA PGINA

Clique no boto Page Properties que

se encontra a meio do inspector de
propriedades, sem ter nada
seleccionado no documento.

Ou

Abra o menu Modify e clique em

Page properties.

Ou

Clique com a tecla direita do rato no

documento e escolha Page
properties

Nesta janela pode definir uma srie de elementos para a pgina, como ttulo, a cor de fundo, a
cor das vrias hiperligaes, as margens, etc.
necessrio algum cuidado com as alteraes nesta zona do Dreamweaver, que aqui
estaremos a alterar todo um contedo de uma pgina, e no de um elemento em particular.
Um dos elementos importantes o Encoding, que permite alterar o tipo de cdigo usado nas
nossas pginas. Este cdigo o que os browsers lem quando abrem a pgina, e nele que
esto os caracteres usados no nosso idioma (Portugus), aconselhvel a no alterao
deste elemento.

Pg. 8
2.2. ELEMENTOS (OBJECTOS)

No Dreamweaver, os elementos (Tags), so designados por Objectos.

Posicione o cursor onde pretende inserir o objecto e carregue no cone

respectivo.

Modificar

Para alterar um objecto, clique com a tecla direita do rato e seleccione o tipo
de formatao que aplicar.

Ou
Utilize a barra do verificador de propriedades.

Pg. 9
 2.3. FORMATAO

Para formatar qualquer tipo de Objecto, poderemos utilizar a barra do Inspector de

Propriedades.

Exemplo de quando selecciona texto:

2.4. NCORAS E HIPERLIGAES

A introduo de ncoras e hiperligaes so o que demonstra a grande vantagem

das pginas Web, que a possibilidade de se navegar entre elas, apenas clicando
em hiperligaes espalhadas por todos os documentos.

Hiperligaes Internos
Posicione o cursor no local onde pretende inserir a ncora.
Active a paleta Invisibles e clique no boto Named Anchor.
Digite o nome que pretende atribuir ncora e clique no boto OK.
Em outro ponto da pgina, seleccione o texto que ir servir de hiperligao para
esta ncora.
Na barra do verificador de propriedades, na caixa Link digite: #nome do ncora.

Exemplo: No incio do documento, inserir uma ncora com o nome topo; no final do
documento, uma hiperligao para o topo do documento.

Pg. 10
Hiperligaes Locais
Seleccione o objecto (texto ou imagem) que ir servir de ligao.
Na barra do verificador de propriedades, na caixa Link, digite o caminho e nome do
ficheiro a que se destina a hiperligao.
Ou
Clique na pasta amarela Browse for file e seleccione o ficheiro a que se
destina esta hiperligao.

Pg. 11
Hiperligao para Email
Posicione o cursor no local onde pretende inserir a hiperligao.
Abra o menu Insert/Email link.
Ou
Clique no boto Insert email link, na paleta Common
Escreva o texto e o endereo para a hiperligao.

Pg. 12
 Hiperligaes Externos

Para criar hiperligaes externas ao site, utilize a caixa Link da barra do inspector de
propriedades e digite o endereo completo.

Exemplos:
http://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
ftp://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
file://nomedositio.dominio/directorio/subdirectorio/.../nomeficheiro
mailto:nome@servidor.dominio

Escreva o texto que

pretende para a
hiperligao.
Seleccione o texto.
Na barra das propriedades,
na caixa Link, digite a
endereo completo.

Alterar as cores das hiperligaes

Abra o menu Modify/Page

properties.
Altere as cores de:
Links
Visited Links
Active Links

Pg. 13
 2.5. IMAGENS

O Dreamweaver, sendo um construtor de sites para a Internet, s aceita os mesmos tipos de

Imagens que o HTML aceita, isto significa que apenas poderemos trabalhar com GIFs, JPGs e
PNGs.

Inserir

Posicione o cursor no local onde pretende inserir a imagem.

Clique no boto Insert Image, na paleta dos objectos Comuns.

Propriedades

Todas as propriedades da imagem esto visveis na barra do verificador de propriedades.

Hiperligao, texto alternativo, alinhamento, nome do ficheiro (Src), altura, largura e limite.

Pg. 14
Image Maps
Insira a imagem.
Seleccione a imagem.
Na barra do inspector de propriedades, na seco Map, seleccione o tipo de Hotspot
a utilizar (rectngulo, circular ou forma livre).
Desenhe, sobre a imagem o Hotspot.

Pg. 15
 Com o Hotspot seleccionado, na barra do inspector de propriedades, na caixa Link,
digite a hiperligao.

Pg. 16
 Rollover images

As Imagens Rollover, como o prprio nome indica so imagens que quando o rato passa por
cima se transformam noutra. O que quer dizer que no necessrio utilizar (saber) JavaScript
para se fazer um boto rollover.

Primeiro teremos que criar duas imagens, uma que ser a imagem que est visvel quando o
utilizador abre a pgina e outra que ser a que aparece quando o ponteiro do rato passar
sobre ela.

Clique no boto relativo aos rollovers que se encontra Paleta do Objectos Comuns.
Seleccione a imagem original (Original Image) e a imagem para o efeito rollover
(Rollover image).
Se desejar uma hiperligao, escreva-a na caixa When clicked, go to url.

Pg. 17
 2.6. TABELAS

As tabelas em Dreamweaver, so bem mais fceis de inserir e trabalhar do que em

programao HTML, embora ele crie um cdigo exactamente igual ao HTML puro (inserido por
ns).

Inserir

Na paleta de objectos comuns, clique no respectivo boto.

Indique o n de linhas e de colunas.

Formatar

Para formatar as clulas utilize a barra do inspector de propriedades.

Teremos acesso aos alinhamentos, cor de fundo, imagem de fundo, ao espao entre
clulas, ao espao entre as clulas e a texto, etc.

Unir clulas

Seleccione as clulas que pretende unir.

Clique no boto Merge cells que se encontra na parte inferior da barra do inspector de
propriedades.

Pg. 18
Pg. 19
Resultado no browser I.E.

Exemplo: Centrar uma imagem no ecr:

Insira uma tabela com 1 linha, 1 coluna, 100% de largura, sem limite ou qualquer
espao entre clulas.

Na barra do inspector de propriedades, altere a altura da tabela para 100%.

Insira a imagem dentro da clula e alinhe ao centro.

Pg. 20
 Barra de Navegao

O Dreamweaver, permite a criao de barras de navegao atravs da insero de vrios

botes numa tabela.

Para inserir uma Barra de navegao, efectue um clique no boto que se encontra na
Paleta dos Objectos Comuns.
D um nome ao elemento (Element name).
Seleccione a imagem (Up image).
Poder ainda, seleccionar uma imagem para o efeito rollover.
Na caixa When clicked, go to url, digite a hiperligao a que se destina este
elemento.
Clique no boto + para adicionar novos itens ou no para eliminar itens da barra de
navegao.

Pg. 21
Pg. 22
 2.7. FRAMES

A utilizao de frames uma tcnica muito

interessante para organizar e estruturar o contedo
de uma pgina HTML, na medida em que facilita a
criao de documentos compostos que o utilizador v
em janelas diferentes dentro da janela principal do
browser.

Isto porque as frames constituem, de facto, uma

poderosa ferramenta com vrias vantagens para os
autores de pginas HTML, tais como:
A possibilidade de atribuir a cada frame um
URL independente, permitindo que cada
uma tenha um contedo independente das
outras.
Atribuindo nomes nicos a cada frame,
possvel que cada link do documento cause
a modificao de uma frame especfica.
A facilidade de criar frames estticas
compostas pelos elementos que se
pretende que sejam sempre visveis.
A possibilidade de desenvolver layouts mais
sofisticados e funcionais.

Mude a Paleta dos Objectos Comuns para a Paleta das Frames.

Seleccione o tipo de Frame que pretende utilizar.

Para inserir outra frame dentro de uma existente:

Pg. 23
 Posicione o cursor na Frame onde pretende inserir outra.
Abra o menu Insert/Frame/... e clique no tipo de frame que pretende inserir.

Para guardar:
Abra o menu File/Save all frames

Pg. 24
2.8. FORMULRIOS

Os visitantes tm a possibilidade de responder a uma srie de perguntas

que foram elaboradas por ns e que nos chegam atravs de e-mail. Assim
podemos saber quais os pontos bons e maus do site, visto por aqueles que
o usam.

Para inserir um formulrio, mude para a Paleta do Formulrio.

Quando se insere um formulrio na pgina ficam visveis umas linhas

horizontais a tracejado para que seja possvel identificar o local onde o
formulrio foi inserido.

Clique no boto Insert Form

Escreva Nome:

Clique no boto Insert Text Field

Repita para o Email e para todos os outros campos, conforme figura a seguir:

Pg. 25
Mais uma vez podemos alterar todas as propriedades dos elementos do formulrio atravs da
barra do inspector de propriedades.

Pg. 26
3 . P l u g i n s

Os plugins so extenses de objectos inseridos nas nossas pginas que no funcionam sem um
programa especfico (plugins). Assim existem aplicaes que podemos colocar na net, que no
sero visveis por utilizadores que no possuam o plugin necessrio leitura daquele
objecto.
Um dos objectos mais usados na net, que precisa de um plugin, o Flash. Todos os
documentos em flash, inseridos numa pgina, s sero vistos por quem tem o plugin instalado.
preciso ter ateno e fazer alguns testes para ter a certeza que todos os utilizadores
conseguiro ver a pgina tal e qual como a projectaram.

3.1. FLASH BUTTON

Pg. 27
3.2. Flash Text

Pg. 28
 3.3. 4. LAYERS

Uma das grandes inovaes dos browsers foi terem criado a possibilidade de se trabalhar
com layers na Internet, assim como se faz em Photoshop para se montar as imagens. Tambm
o podemos fazer na Internet.
Nem todos os browsers suportam layers.

1. Para inserir um layer clique no boto da Paleta de Objectos Comuns, a que se refere
os Layers.
2. Desenhe a rea que o layer deve abranger, podendo depois inserir, dentro do layer,
tabelas, imagens ou texto.

Atravs das propriedades podemos definir a posio do exacta do layer, usando o L(left) e o
T(top), juntamente com o H(height) e W(width).

Tambm podemos definir o fundo, e a sua visibilidade.

A propriedade TAG, deve ser deixada como est, assim usamos o elemento DIV, que o
elemento que o HTML reconhece e aceita como layer, a alterao desta TAG pode dar origem a
alguns erros.

Pg. 29
 Converter em Tabelas

Como j foi referido atrs, os layers no so reconhecidos por todos os browsers e todas as
suas respectivas verses. Existe ento uma aco no Dreamweaver que permite a
transformao dos Layers em Tabelas, alinhando-os nas pginas atravs de imagens invisveis.

Para fazer essa transformao, necessrio que nenhum layer esteja sobre outro. De
seguida, devemos abrir o menu Modify/Layout/Convert Layers to Tables.

Ocultar e Mostrar Layers

Escreva o texto e construa o layer.

Seleccione o layer. Na barra do inspector de propriedades, na caixa Vis escolha

Hidden.

Pg. 30
 Seleccione o texto e active a janela dos comportamentos:
Menu Window/Behaviors.
Clique no boto + e seleccione Show/Hidden layers.

Seleccione o layer e clique no boto Show.

Na coluna Events, seleccione OnMouseOver

Pg. 31
 Clique no boto + e seleccione Show/Hidden
layers.
Seleccione o layer e clique no boto Hide.
Na coluna Events, seleccione
OnMouseOver.

Pg. 32
4. C r i a o e G e s t o d e S i t e s

Na criao de sites teremos de ter uma estrutura organizada, caso contrrio o site comear a
ficar to complexo que poder perder ficheiros ou ficar com hiperligaes quebradas.

Existe uma janela de estruturao de Sites no Dreamweaver, essa janela pode ser aberta
atravs do menu Site/Site Files. Aqui poder organizar toda a estrutura do seu site, tanto a
nvel de ficheiros como a nvel de pastas.

Criar um Site

Abra o menu Site/ New Site.

Local Info
Digite um nome para a identificao do site (Site name).
Especifique o local onde pretende criar o site (Local root folder).
Digite o endereo onde ir ficar o seu site opcional (HTTP address).

Pg. 33
Web Server Info

Ter que definir o endereo de FTP

(file transfer protocol), que lhe
fornecido pelo Servidor onde ir
alojar o seu site, o nosso username e
a nossa password.

Clique no boto OK.

Criar Ficheiros e Pastas

Abra o menu File/New file ou New folder

Pg. 34
Pg. 35
Site Layout

Para poder organizar o seu site atravs de um organograma, dever existir um ficheiro com o
nome index. Este ser a sua Home Page.

Abrir um Site

Abra o menu Site/Open site.

Seleccione o site que pretende abrir.

Estruturar o Site

Seleccione o ficheiro no painel Site navigation.

Clique no Point to file e arraste at ao ficheiro pretendido.

Repita quantas vezes forem necessrio.

Ao abrir uma pgina, ir verificar a existncia de hiperligaes para as pginas abaixo

da actual.

Pg. 36
Pg. 37
 NDICE

1.1. Ferramentas de Trabalho............................................................3

2. DOCUMENTO............................................................................................................6

2.1. Propriedades da Pgina..............................................................6

2.2. Elementos (Objectos).................................................................7

2.3. Formatao................................................................................8

2.4. ncoras e Hiperligaes.............................................................8

2.5. Imagens...................................................................................12

2.6. Tabelas.....................................................................................16

2.7. Frames.....................................................................................21

2.8. Formulrios..............................................................................23

3. PLUGINS..................................................................................................................25

3.1. Flash Button.............................................................................25

3.2. Flash Text.................................................................................26

4. Layers.........................................................................................27

5. Criao e Gesto de Sites.....................................................................................31

Pg. 38