Dreamweaver

1
Dreamweaver

• Fernanda Barroso
• Abril,2006

2
O que é o DreamWeaver?

• O Dreamweaver é
• um dos melhores editores WYSIWYG (What You See Is
  What You Get) de HTML existentes actualmente no
  mercado.
• um programa desenvolvido pela Macromedia para a
  criação e edição de Sites WWW (páginas pessoais
  ou institucionais, lojas virtuais, etc.)
• um editor que oferece a possibilidade de dar
  dinamismo às páginas, utilizando o DHTML (Dynamic
  html).

3
Estrutura do DreamWeaver

• A sua estrutura é
• similar à dos habituais programas do Microsoft
  Office com
• painéis flutuantes,
• barra de indicador (inferior direito)
• e a janela do documento onde se irá realizar a
  construção do site.

4
(No Transcript)
5
Área de site

• A primeira coisa a fazer, assim que abrimos o
  Dreamweaver, é aceder à area de trabalho
• se essa esta já existe tudo bem
• se não temos de criá-la da seguinte maneira
• Site gt New site(janela de gestão)
• Deverá aparecer uma janela (site definition) onde
  irá dar um nome à área de trabalho e sua
  localização.
• Agora basta criarmos páginas.
• uma das primeiras coisas a fazer é abrir as
  propriedades da página através de
• MODIFYgtPAGE PROPERTIES
• isso vai-nos permitir dar um título à página,
  escolher uma imagem de fundo ou cor, escolher a
  cor de texto e dos links, etc.

6
Janela Principal

• Vamos ter 3 tipos de visão da página que são
• Design view (vista de desenho) onde se desenha a
  página de forma directa (visual).
• Code view (vista de código) onde se edita a
  página escrevendo código em HTML, javaScript, PHP
  e etc.
• Code and Design (vista mista) que nos permite
  combinar os dois modos anteriores de edição de
  páginas.

7
Conteúdos

• Texto
• a edição de texto no Dreamweaver é semelhante a
  qualquer editor de texto.
• na barra de propriedades (properties) é fácil
  alterar as fontes, cor etc.
• se quisermos fazer um link basta selecionar o
  texto a ancorar e ir à barra de propriedades
  clicar no icone de uma pasta e escolher o
  arquivo.

8
Conteúdos

• Imagens
• podemos inserir a imagem através do respectivo
  icone da barra
• clique por cima da imagem e vá à barra de
  propriedades para alterar alguma se desejar.
• Também se pode criar uma imagem como link basta
  inserir um link como no texto.

9
Conteúdos

• Células e tabelas
• A construção de tabelas serve para tabular o
  conteúdo da página, ajudando a arrumá-los, isto
  é, evitando que os conteúdos fiquem espalhados,
  mal organizado.
• Para inserir verifique que no painel de common
  está visível.

10
Conteúdos

• Frames (quadros)
• é outra maneira de organizar a conteúdo (é o mais
  comum).
• aqui temos de ter cuidado de gravar todas as
  frames pq cada frame será uma página simples.

11
Conteúdos

• Barra de navegação
• serve para criar na página uma forma simples de
  navegar no site.
• para isso temos de inserir um botão com o formato
  .gif para montar na barra.
• feito isso vamos ao menu
• insert / interactive images / navigation bar
• Menus popup
• os menus popus (jump menu) oferecem outra forma
  de navegação no site.
• para isso basta inserir um jump menu clicando em
  
• insert / form object/ jump menu.

12
Conteúdos

• Formulários
• permite criar 1 formulário que é a forma dinâmica
  e correcta de se comunicar com um visitante.
• é muito simples inserir um formulário basta
  escolher as opcões
• Insert / form object/ text field
• Insert / form object/ butom

13
Exercício

• Fazer uma página pessoal ou institucional usando
  o Dreamweaver (ver exemplo).