Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

Dreamweaver

Verso Provisria

Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

Antes do Dreamweaver

Dreamweaver
Antes do Dreamweaver HTML Hyper Text Markup Language
As pginas Web so escritas na linguagem HTML, ou seja, Linguagem de Marcao de Hipertexto. Nas pginas, a informao est organizada de forma hipertextual, ligadas entre si atravs de links .

Site
Um site um conjunto de pginas Web estruturadas sobre um determinado contedo (informaes, textos, imagens, etc..) A pgina de entrada de um site chamada de "Home Page" .

Browser
Para que o contedo de um documento HTML possa ser formatado e exibido deve usar-se um programa chamado browser, ou navegador. Os mais conhecidos so o Internet Explorer e Netscape Navigator. A melhor forma de desenvolver uma pgina HTML off-line, desconectado. Primeiro criam-se as pginas, a seguir testam-se por meio do browser e s depois, se colocam no servidor Web, para que outras pessoas tambm possam visualiz- las .

Dreamweaver
Antes do Dreamweaver Software
recomendvel possuir alguns conhecimentos bsicos da linguagem HTML, embora actualmente seja possvel criar um site utilizando unicamente os editores de pginas que geram todo o cdigo. No mercado os mais conhecidos so: FrontPage da Microsoft, Dreamweaver da Macromedia e GoLive da Adobe.

Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

HTML

Dreamweaver
HTML Principais tags
Como j dissemos, o Dreamweaver MX disponibiliza vrias ferramentas que facilitam o desenvolvimento de pginas Web, no entanto, desejvel que se conheam pelo menos as tags bsicas da linguagem HTML. Quebras de linha < P> < / P>

< BR>

Dreamweaver
HTML

Texto em negrito < B> < / B>

Texto em itlico < I> < / I>

Dreamweaver
HTML
Centralizar texto < CENTER> < / CENTER> < RIGHT> < / RIGHT> < LEFT> < / LEFT>

Formatao de texto

Dreamweaver
HTML
Barra Horizontal < HR > = marcao de linha SIZE = espessura WIDTH = largura

Inserir imagens

Dreamweaver
HTML
Links <A> </A> = marcao de linha HREF = referncia pgina que se pretende abrir TARGET =_blank : abre a pgina numa nova janela do browser

Download de um ficheiro Ficheiros com extenso .doc, .txt, .zip

Dreamweaver
HTML
Mails

Chamando uma pgina alojada num servidor protocolo:// servidor / directorio / ficheiro http = ficheiro no servidor www

Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

Dreamweaver

Dreamweaver
Introduo O que o Dreamweaver?
O Dreamweaver um programa profissional destinado criao de sites com recursos inovadores, teis tanto para iniciantes como para os mais experientes. possvel criar visualmente sites da Web, graas sua interface grfica de fcil utilizao que mostra as modificaes medida que so efectuadas. As pginas podem ser testadas virtualmente, usando diferentes navegadores da Web.

Dreamweaver
Introduo rea de Trabalho
Na figura seguinte possvel visualizar a interface do dreamweaver.

Dreamweaver
Introduo
Painel Inserir O Painel Inserir permite trabalhar com vrios tipos de objectos como tabelas, imagens, formulrios, etc.. As opes esto organizadas da seguinte forma: Comuns, Layout, Texto, Tabelas, Molduras, Formulrios, Modelos, Caracteres, Media, Cabealho, Script e Aplicao.

Barra de Ferramentas Contm botes que possibilitam diferentes visualizaes da janela do documento (visualizao do desenho e/ou do cdigo da pgina).

Dreamweaver
Introduo
Janela do documento Exibe o documento que est sendo criado e editado. Inspector de propriedades Na verso anterior do Dreamweaver, o inspector de propriedades era flutuante, agora fixo e fica alocado na parte inferior da rea de trabalho. A sua funo editar ou inserir propriedades num elemento previamente seleccionado. Par a mostrar ou ocultar o inspector de propriedades , basta seleccionar na barra de menus as opes Window/ Properties.

Instituto Politcnico de Tomar

Escola Superior de Gesto rea Interdepartamental de Tecnologias de Informao e Comunicao

Primeiros Passos

Dreamweaver
Primeiros Passos Criao da pasta raiz
Antes de se comear a trabalhar deve criar-se uma pasta de nome Raiz e na mesma colocar todos ficheiros. Esta ser a pasta a transferir para o servidor web para que seja publicado o site.

Criao de um site

Dreamweaver
Primeiros Passos
Informaes Locais Informaes referentes localizao do site na mquina local.

Em "Nome do Site" atribui-se um nome ao mesmo. Em "Pasta Raiz Local" feita indicao da RAIZ. Em Endereo HTTP especifica-se o endereo, caso exista.

Dreamweaver
Primeiros Passos Abrir o site
Site Abrir o site nome do site" possvel abrir o site, mesmo que no se tenha criado uma pgina.

Na janela "Pasta Local" esto dispostas todas as pastas, e ficheiros contidos dentro da pasta RAIZ, na mquina local. E na Janela "Site remoto" esto as pastas e ficheiros da mquina remota (Servidor Web)

Dreamweaver
Primeiros Passos Propriedades da pgina
possvel inserir uma imagem de fundo (background) , cor do fundo (bgcolor), cor do texto, cor do link e cor do link activo.

Dreamweaver
Primeiros Passos Linha HR
possvel criar uma linha atravs do objecto HR. Com a linha seleccionada, temos acesso ao painel de propriedades:

Pode modificar-se o alinhamento (padro, direita, esquerda e centro) e a espessura da linha (Altura em pixeis e largula em pixeis).

Dreamweaver
Primeiros Passos Fonte
Fonte o tipo de letra, o tamanho, etc..

Alinhamento
Podem alinhar objectos como imagens, tabelas, links ou simples texto. Alinhamento esquerda Alinhamento esquerda Alinhamento esquerda

Dreamweaver
Primeiros Passos Visualizao do projecto
Fonte o tipo de letra, o tamanho, etc.. Visualizao do cdigo Visualizao do cdigo e projecto Visualizao do projecto

Cdigo em cima e projecto em baixo

Dreamweaver
Primeiros Passos

Apenas o cdigo visualizado

Dreamweaver
Primeiros Passos

Apenas o projecto visualizado

Dreamweaver
Primeiros Passos Insero de cores
Selecciona-se o objecto que se quer mudar de cor, tal como uma palavra, links, etc No painel de propriedades, existem diversas cores escolha:

Dreamweaver
Primeiros Passos Insero de imagens
A utilizao de imagens na web resume-se praticamente a imagens GIF e JPEG. GIF GIF foi inventado pela CompuServe e suporta at 256 cores. JPEG O JPEG suporta milhes de cores. PNG O PNG veio para substituir o GIF e o JPEG.

Dreamweaver
Primeiros Passos
Propriedades da imagem Selecciona-se a imagem e aparecem as propriedades da mesma:

possvel atraibuir um nome, ver o tamanho, altura e largura em pixeis, etc..

Dreamweaver
Primeiros Passos Links
Links para email Para criar um link para um email necessrio criar a seguinte tag em HTML: <a href="mailto:nome@isp.pt">E-Mail</a> No entanto, o mesmo possvel de ser feito no dreamweaver. Clicando na seguinte imagem , aparece o seguinte ecr:

No campo texto, deve inserir-se o texto que ficar visvel para ser clicado, e no campo E-Mail, deve ser inserido o endereo para o qual deve ser enviado o mesmo.

Dreamweaver
Primeiros Passos
Link Externo Link externo, aquele link que aponta para fora da pgina de origem (para uma outra pgina do prprio site ou um site externo): <a href="http://www.ipt.pt">Instituto Politcnico de Tomar</a> (link externo ao site) Isto possvel no entanto de ser feito atravs do dreamweaver:

No destino existem 4 opes, onde blank indica que a pgina ser aberta numa nova janela e top na janela actual.

Dreamweaver
Primeiros Passos Tabelas
possvel escolher o nmero de linhas, colunas, espessura, largura e outras caractersticas.

Em propriedades da tabela, existem 2 botes em destaque:

Dreamweaver
Primeiros Passos
Clica-se neste boto para juntar as clulas. Clica-se neste boto para dividir as clulas. Cellspacing Define o espaamento das clulas:

Cellpadding Define a espessura entre o texto e a espessura das clulas.

Bibliografia

Recursos Bibliogrficos
OLIVEIRA.Helder (2002). Fundamental do Dreamweaver MX. Lisboa: FCA.

On-line
http://www.macromedia.com

Nota: No possvel garantir a existncia futura dos endereos (URLs), citados nos recursos on-line. Como se sabe, os endereos so virtuais e a sua vida til depende nica e exclusivamente dos seus autores e proprietrios.