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.

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 > 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 MODIFY>PAGE 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).