Dreamweaver MX 2004 Básico

 

Projeto Web – Parte 01

 

Objetivo : Iniciar a criação de um projeto Web utilizando as ferramentas do Dreamweaver MX 2004. Entender como funciona a organização dos arquivos que compõe um projeto web, conhecer as ferramentas e opções de formatação de documentos no Dreamweaver.

 

Pré-requisitos: Ter conhecimento intermediário sobre gerenciamento de arquivos e Painel de controle no Windows.

 

Organização dos Arquivos

 

A organização dos arquivos que compõe o site é de primordial importância para um projeto web desde seu desenvolvimento até a publicação.

O ideal é criar hierarquias de pastas separando-se os documentos-fonte (docs, flas, pngs) dos documentos finais.

Exemplo:

 

 

Definição do site

 

Definiremos um site que será inicializado neste tutorial e continuado nos próximos.

 

Seguindo os passos de 1 a 7 em “Definindo um Site no Dreamweaver” do capitulo anterior, defina um site com as seguintes caracteristicas:

 

1. Nome do site: projeto01;

 

2. Não utilizar tecnologia de servidor;

 

3. Editar cópias locais na máquina e depois fazer o upload para o servidor quando estiver pronto;

 

4. Selecione nenhum (none) para conexão com o servidor.

 

O Painel Files deve estar como na figura abaixo (esquerda).

 

5. Selecione na Tela inicial a opção HTML para criar um novo documento do tipo HTML no seu site ou, caso essa tela não esteja sendo exibida, clique no menu Arquivo (File) e na opção Novo... (New...), selecione o tipo Basic Page, HTML e clique em Criar (Create).

 

 

:O Workspace do Dreamweaver pode ser alterado a qualquer momento entre Designer ou Coder clicando no menu Edit, Preferences, General, Change Workspace. Para o nosso curso básico de Dreamweaver utilizaremos o modo Design.

 

Formatação do documento

 

Para cada documento criado no site, podem ser definidas cores, alinhamentos, fundos, tamanhos, títulos individuais. Através da janela “Page Properties” podem ser feitas todas essas configurações.

 

1. Para exibir a janela “Page Properties”, clique com o botão direito do mouse em algum local dentro da área de edição da sua página ou use CTRL+J.

 

2. Clique na opção Page Properties… (Propriedades da Página).

 

Category: Opção que traz os itens Links, Headings, Title/Encodin, Tracing image.

3. Na janela Page Properties, selecione na lista Category (Categoria), a opção Appearance para setar as propriedades visuais da página conforme a figura abaixo:

 

 

4. A categoria Links nos oferece as opções de definição fonte (Link font), tamanho (Size), cor antes e depois de visitado, ativo e com foco (Link color, Visited links, Rollover links, Active links), além de podermos escolher quando e se queremos que o link fique com aquele famoso sublinhado (Underline style). Configure como na figura abaixo:

 

 

5. Para definição do formato dos títulos (de 1 a 6), na opção Headings pode-se setar a formatação para os títulos de 1 a 6 do documento, sendo possível seleciona uma formatação individual para cada nível de título. Deixe as opções como as da próxima figura:

 

6. Na categoria “Title/Encoding”, é onde será digitado o título da janela, o qual irá aparecer na Barra de título da janela do browser. Digite o slogan do nosso projeto “Pingüim Gelateria”.

 

 

7. Em Tracing Image é possível definir no campo “Tracing image” uma figura de plano de fundo para o documento e controlar seu nível de transparência – aplicando um efeito do tipo marca d’água – ao arrastar o ponteiro do campo “Transparency”. Para esse documento não utilizaremos imagem no plano de fundo, mas você pode fazer o teste clicando no botão “Browse…”, selecionando uma figura JPG, GIF ou BMP, por exemplo, de sua maquina e clicando no botão “Aplicar” para ver o resultado.

 

 

8. Clique no botao “Ok” para aplicar as configurações realizadas e retornar ao documento.

 

9. Digite a seguinte frase: “Pingüim Gelateria”

 

10. Selecione a frase digitada e clique com o botão direito para aplicar um estilo de título. Aponte para “Paragraph Format” e clique na opção “Heading 1”.

 

 

Note que o texto ficou formatado com o tamanho, cor e fonte escolhidos na categoria “Headings” da janela de “Propriedades da Página”:

 

 

: Não há ordem para edição das propriedades da página, sendo assim você pode alterá-las a qualquer momento durante a criação do documento e além de utilizar o meu Page Properties…, também pode realizar as configurações por meio da Barra de Ferramentas Propriedades que por padrão localiza-se na parte inferior da janela de trabalho do Dreamweaver:

 

 

1. Formato e nome da fonte (Format, Font).

 

2. Estilo e tamanho, onde o ultimo pode ser definido em pixels, centímetros, milímetros, porcentagem, e outras unidades de medida que podem ser selecionadas a qualquer momento (Style, Size).

 

3. Negrito, Itálico, e Cor (Bold, Italic, Calor).

 

4. Alinhamentos de texto (Left, Center, Right, Justify) na parte superior e, na inferior, botões de marcadores, numeradores e recuo de texto direito e esquerdo.

 

5. Link e Target para a definição de hiperlinks.

 

6. O botão com desenho de alvo (Point to file), é arrastável e, assim como o botão com a pastinha amarela, serve para setar arquivos que serão chamados ao ativar um hiperlink. A diferença é que o alvo pode ser arrastado com o mouse e solto encima de algum arquivo do computador para que o link seja estabelecido enquanto a pasta oferece a opção de procurar o arquivo nas hierarquias de pastas do disco.

 

Salvando o documento

 

Um documento do Dreamweaver pode ser salvo a qualquer momento durante a sua criação, mas deve seguir algumas regras para que não ocorram conflitos na sua publicação. Não utilizar acentuação, espaços, letras maiúsculas estará evitando problemas de incompatibilidade com os servidores.

 

Outro passo importantíssimo é armazenar os arquivos corretamente na estrutura de pastas criada para o projeto, assim como foi comentado no tópico “Organização de Arquivos” desta coluna..

 

1. Clique no menu “File, Save”.

 

 

2. Note que no campo “Save in:” já veio selecionada a pasta definida na criação do site para armazenar os arquivos. No campo “File name:”, digite o nome “index.htm” e clique no botão “Salvar”.

 

 

3. O nome do arquivo será exibido na hierarquia do painel “Files”, logo abaixo da pasta “projeto01”.

 

 

: O nome “index” é o padrão utilizado para nomear a primeira pagina do site que será exibida ao digitar o endereço de um site no browser. No próximo capitulo veremos um pouco mais sobre nomenclaturas de arquivos e convenções.