Dreamweaver.

Apresentação em tema: "Dreamweaver."— Transcrição da apresentação:

1 Dreamweaver

2 O que é O Dreamweaver é um programa profissional destinado à criação de sites da Web com recursos inovadores e recursos abrangentes de planejamento, úteis tanto para os iniciantes como para desenvolvedores da Web experientes. Ele trabalha através da linguagem WYSIWYG – What You See Is What You Get

3 Introdução 1 - Barra de menu; 2 - Paleta de objetos; 3 - Janelas de Funções; 4 - Janela de Propriedades; 5 - Barra de Status; 6 - Barra de ferramentas.

4 Barra de Menu File: como na maioria dos programas no menu file (arquivo) você tem opções de abrir e salvar documentos, podemos dar destaque neste ponto para o 'Open in Frame' que abre um documento no frame* (quadro) selecionado; 'Save all Frames' que salva todos os frames da página juntando-os numa só; 'Revert' que abre o documento como na última vez em que você salvou

5 Edit Como também na maioria dos softwares o menu edit dá a opção de copiar, colar (o famoso processo Ctrl+C e Ctrl+V)... e para destaque temos a opção 'Preferences' que possibilita você de configurar inúmeras ferramentas para que o Dreamweaver fique do seu jeito.

6 View: dá opções que dizem respeito à visualização de paletas e objetos de um modo geral; configura o modo de visualização da construção de sua página, você pode ver apenas o design ou somente o código HTML ou ambos dividindo a tela; interessante também é o uso de Réguas (Rulers) e Grade (Grid), para melhor organizar o design da página. Insert: Dá chance de você inserir vários objetos disponíveis na paleta de objetos* como Imagens, Camadas (layers), tabelas, etc

7 Modify Neste menu você pode modificar elementos presentes na sua página inclusive a própria página (Page Properties) elementos esses como tabelas, frames, etc ou então você pode adicionar objetos a Timeline (linha do tempo) ou gerenciar arquivos da Lybrary (biblioteca) e Template.

8 Text: dá uma série de propriedades ligadas ao texto em geral, destaque para o 'CSS Style' que possibilita colocar efeitos de OnMouseOver* em links de texto entre outros. Commands: entre as opções deste item ele permite gerenciar extensões que são disponíveis na internet (extensões são como exemplo um novo behavior* que fizeram ou então um novo objeto* na paleta Common, etc, são atualizações do seu Dreamweaver).

9 Site: Neste item do menu você pode gerenciar o seu site conectado diretamente a ele na rede, é como um programa de FTP (File Transfer Protocol - tal como o http é o protocolo de transferência de hipertextos, o FTP trata das transferências de Arquivos em geral, funciona baseado no um Windows Explorer - veja a figura abaixo com a janela do site).

10

11 Window Dá a opção de mostrar ou ocultar as paletas suspensas e também visualizar as páginas em que se está trabalhando.

12 Paleta de Objetos A Paleta de Objetos contém botões para você criar e inserir objetos como tabelas, camadas (layers) e imagens.

13 Common - A categoria Common contém os elementos mais comuns de serem usados na construção de um site. - Rollover Image: abre-se uma caixa onde você localizará duas imagens; uma aparecerá normal e outra que só aparecerá quando o mouse passar por cima da figura criando um pequeno efeito 'OnMouseOver' e um espaço onde você colocará um link (um endereço) a que essa figura ficará associada. - Image: insere uma imagem no local atual do cursor de texto, uma caixa de diálogo aparece para você localizar a imagem a ser inserida.(veja a figura abaixo que fala um pouco sobre as propriedades de uma imagem inserida na sua página).

14 Table: insere uma tabela no seu site, o uso da é tabela muito importante quando se quer organizar textos, botões e afins no site. Tabular Data: insere uma tabela gerada por outro programa como Microsoft Excel ou um banco de dados

15 Navigation Bar: insere uma lista de imagens para serem usadas como uma barra de navegação do site. Como criar as barras de navegação: uma barra de navegação é composta por uma imagem ou conjunto de imagens, que exibe(m) as alterações com base nas ações de um usuário. Antes de utilizar o comando Inserir a barra de navegação, crie um conjunto de imagens da barra de navegação para os estados de uma imagem a ser exibida. Uma imagem pode apresentar quatro estados:

16 Horizontal Rule:insere uma linha horizontal no local do cursor.
- Layer: cria uma camada. Clique no botão da camada para poder movê-la e escaloná-la (mudar seu tamanho). Por Default (padrão) o Dreamweaver define uma tag - div para cada camada em seu código.( veja a figura abaixo que fala um pouco sobre as propriedades de uma camada ). Link: insere um link de na sua página.

17 Date: insere a data corrente no ponto de inserção.
- Server-Side Include: insere um server side include no ponto de inserção, que é um conjunto de instruções para o servidor para ele incluir um arquivo especificado no documento antes de o usuário acessar o tal do documento. - Fireworks HTML: insere um documento HTML produzido no Fireworks (editor gráfico da Macromedia que possui recursos para a web, como salvar um arquivo gráfico com formato HTML, dando suporte até para fazer botões com efeitos, links...) no ponto de inserção.

18 Flash: Insere um filme Flash no ponto de inserção.
- Flash Button: insere um botão em Flash no ponto de inserção. - Flash Text: insere um texto em formato flash no ponto de inserção, é apenas um texto que muda de cor ao se passar o mouse por cima. - Shockwave: insere um filme no formato Shockwave no ponto de inserção, um filme Shockwave pode ser feito no Macromedia Director ou no Flash. - Generator: insere um objeto do Generator (outro programa da Macromedia,tal objeto também pode ser feito no Flash) no ponto de inserção.

19

20 Characters - A categoria Character na paleta de objetos contém alguns caracteres especiais: Forms A categoria Forms contém botões para você criar e editar formulários na sua página. Frames frame é uma página que contém várias outras encaixadas como podemos ver nos ícones da paleta.

21 Head - Tal categoria cuida dos elementos presentes na parte head do código HTML, no que diz respeito a atributos de parâmetros, propriedades, etc. Invisibles - Esta categoria dá a opção de você criar objetos que não serão visíveis no navegador.

22 Special - A categoria Special contém objetos com configurações especiais, tais como applets e plug-ins. - Applet: insere um applets java que funciona como uma 'pequena' programação dentro da página que serve para um cadastro, jogo ou apenas para um animação, uma caixa de diálogo aparece para onde você pode especificar o endereço do applet. - ActiveX: insere um controle ActiveX no ponto de inserção, use a janela de propriedades para configurá-lo, também diz respeito à programação na sua página. - Plugin: usa um tipo de tag (marcação do código HTML) para inserir um arquivo no ponto de inserção que é requere um plug-in (como um upgrade para suportar um novo elemento).

23 Criando a Primeira Página
- Abra o Dreamweaver – Selecione a opção Site – New site

24 Definindo o novo site bem como as opções para upload ( atualização no seu provedor )
- O primeiro campo que será preenchido é o Nome do site. É como você deseja identificá-lo. - Com a opção Atualizar a lista de arquivos automaticamente ativada, o Dreamweaver atualizará a lista de arquivos do seu site toda vez que você copiar algum arquivo para dentro da pasta local do site.

25 Informações remotas Clique na seta à direita de acesso e selecione FTP. Aqui, você digitará as informações para fazer a transferência dos arquivos do seu micro para o servidor.

26 Em Layout do mapa do site é feita a configuração do mapa exibindo os arquivos ( páginas HTML, pastas, etc ) e links, para que você tenha uma visão completa do seu site.

27 É nesta janela que você irá gerenciar o seu site.
Observe que neste momento ela está dividida em 2 partes. À esquerda serão exibidos os arquivos que foram enviados para o seu provedor. À direita ficam os arquivos armazenados na pasta que você definiu como Pasta raiz local. Esta disposição é padrão, mas pode ser alterada. É aqui que você irá copiar, mover, criar, excluir as suas páginas HTML ou pastas. É aqui também que você irá copiar para o provedor Web as páginas e pastas, mantendo a mesma estrutura tanto para a pasta local quanto para a remota.

28 À esquerda o mapa do site
À esquerda o mapa do site. À direita serão listados os arquivos, pastas e subpastas.

29 Para criar uma pasta, clique com o botão direito e ...
Organizando seu site Para criar uma pasta, clique com o botão direito e ...

30 Clicando neste ícone, você poderá visualizar os códigos
Aqui, você dá um título para sua página

31 Configurando as Propriedades da Página

32

33 Cor de fundo

34 Configurando Texto

35 Inserindo Imagem

36