A construção das páginas faz-se dentro de uma janela com 3 janelas flutuantes:

Transcrição

1 EXERCÍCIO ASSISTIDO Nº1 1. Como funciona o Dreamweaver? Dreamweaver é um editor html WYSIWYG (What You See Is What You Get) editado pela Macromedia que se distinge dos outros pela possibilidade de dar dinamismo às páginas, utilizando o DHTML (Dynamic html). A construção das páginas faz-se dentro de uma janela com 3 janelas flutuantes: o a 1ª serve para inserir diferentes objectos (Window > Objects); o a 2ª permite modificar as propriedades dos elementos seleccionados (Window > Properties); o e a 3ª serve para abrir outras janelas como a do código html, a dos behaviores (comportamentos) (Window > Launcher), ou ainda a janela de gestão do site.

2 2. A Área de Trabalho A primeira coisa a fazer assim que abrimos o Dreamweaver é aceder à área de trabalho (site) se esta existir, senão terás de cria-la da seguinte maneira: 1. Na barra do menu, fazer Site > New Site Deverá aparecer uma janela (Site Definition), onde irá dar um nome a área de trabalho do site, e a sua localização no disco rígido (será um directório a sua escolha). 3. Com isto a janela de gestão do site vai ser construída. Aqui poderás criar, apagar, copiar, ficheiros e directórios.

3 Na janela de gestão (Site > Site Files) do site é onde se organiza o site. Aqui pode-se criar uma pagina "html" (na barra do menu, File > New File) com o nome desejado, ao executar o novo ficheiro ele irá abrir no interface do Dreamweaver, onde iremos construir a nossa página... Aqui podemos alterar o nome de um ficheiro, com a particularida do Dreamweaver alterar automaticamente os links a esta página o que é muito útil. 3. Page Properties... Assim que entrares no ambiente do dreamweaver, uma das primeiras coisas a fazer é abrir as propriedades da página. 1. Para isso tens de aceder ao Modify > Page Properties. Ou ainda mais rápido é com o atalho Ctrl+j. 2. Nessa janela podes dar um título a página, escolher uma imagem de fundo ou uma cor, também podes escolher a cor dos textos e dos links.

4 4. Janela de objectos O Dreamweaver, dá-nos 3 janelas flutuantes (objects, properties e launcher) para podermos trabalhar. Caso que estas não aparecem, podemos activa-las indo em Window na barra menu. A 1ª janela que nos aparece é a dos objectos (figura à direita). Desta janela só vou falar de 4 objectos (aqueles que são mais usados). Apesar de não estar em primeiro, vou começar por falar das layers. As layers vieram revolucionar as páginas html! Imagina as layers como um quadro invisível, que controlas completamente a sua posição e o seu tamanho. Quando alteras uma propriedade a uma layer todo o seu conteúdo é afectado (imagens, tabelas, texto,...) Por isso aconselho-te que todos os objectos que criares estejam dentro de uma layer. Se queres inserir uma imagem numa layer, tens de a criar e depois com o cursor a piscar dentro da layer clica no botão de inserir imagem, a mesma coisa se quiseres inserir uma tabela ou um rollover image. 5. Janela de Propriedades Esta janela apresenta sempre as propriedades do objecto que está seleccionado. Se tiveres uma imagem seleccionada a janela permite-te: dar um nome à imagem, alterar a largura e altura, dar-lhe um link, um alt, até podes editá-la.

5 As propriedades das layers são bastante importante, sobretudo se queres controlar a sua posição com precisão. Podes alterar a sua profundidade, a sua visibilidade, inserir uma imagem ou uma cor de fundo, entre outras coisas. 6. Janela de "Launcher" Esta janela é constituída por 7 botões que abrem e fecham janelas de diversas funções. Aqui só vou mencionar três (Site, Behavior e Code Inspector) Site: Ao clicar em "site", irão aceder a janela de gestão do site (mais informação na pag. 1 e 2).

6 Behavior: Os behaviors são acções "actions" (trocar uma imagem, esconder uma layer, tocar um som, etc.) que ocorrem após um certo acontecimento, "event". Para escolher uma acção carregas no botão. Depois de escolher a acção vais escolher o event, isto é, quando é que a acção vai "correr". Para isso carregas no botão. Code Inspector: Com esta opção, abre-se uma janela com o código HTML do documento. Esta janela de código pode ser exibida de 2 maneiras: Sob forma de janela separada do interface de trabalho do Dreamweaver ou pode-se dividir a janela do interface de trabalho de forma que se exibe o código e a área de trabalho ao mesmo tempo. a grande vantagem desta divisão é que quando se está a editar graficamente uma página, conseguimos visualizar a alteração do código.