Dreamweaver MX 2004 Básico

Projeto Web – Parte 04

 

Objetivo : Criar um documento com barra de navegação de layout ajustável utilizando o Macromedia Fireworks integrado ao Dreamweaver, slices e tabelas.

 

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

 

Layout Ajustável

 

Conheceremos agora um formato de layout super flexível. Uma pagina baseada em Layout ajustável se encaixa bem tanto para a resolução de vídeo 800x600 quanto para 1024x768, pois ele faz com que a estrutura da pagina seja “esticada” para fazer o enquadramento.

 

Utilizando laytout ajustável, não ficam sobrando espaços vazios à direita ou esquerda da pagina, tudo parece ter o encaixe perfeito.

 

Faremos uma pagina com barra de navegação utilizando laytout ajustável no Dreamweaver, com artes feitas em Fireworks.

 

1. Abra no Fireworks a barra de “navegacao01.png” criada no tutorial anterior a esse.

 

2. Salve-o como “navegacao02.png” e crie as fatias (slices) para cada parte da barra de navegação, inclusive uma selecionando apenas uma parte do fundo da barra para a utilizarmos como fundo no Dreamweaver.

 

 

3. Dê nomes para cada uma das fatias criadas para que possamos localizá-las com maior facilidade quando estivermos no Dreamweaver.

 

A. Selecione a fatia;

 

B. Na “barra de Propriedades”, campo “Edit the object name”, digite o nome da fatia.

 

Repita o procedimento para cada uma das fatias criadas, criando uma a partir de uma seleção de um pedaço do plano fundo da barra de navegação e nomeie-a como “navegacao02_fundo ”.

4. Salve o arquivo novamente e exporte-o:

 

A. Selecione o endereço “DreamweaverBasico/projeto01”;

 

B. Digite o nome “navegacao02.html” para o arquivo;

 

C. Defina a pasta “DreamweaverBasico/projeto01/imagens” para salvar as imagens.

5. Abra o Dreamweaver, e, na janela de gerenciamento de arquivos selecione e abra o arquivo “navegacao02.html”.

 

 

6. Criaremos uma nova tabela para aplicar o efeito de layout fixo à barra de navegação:

 

A. Clique à direita da tabela da barra de navegação e pressione <ENTER> para criar uma nova linha;

 

B. Clique no botão “Table” para que aparece a janela onde escolheremos as opções da nova tabela;

 

C. Configure a tabela com 1 linha e a quantidade de colunas necessária para acomodar cada uma das fatias da barra de navegação (no meu caso foi criada uma tabela de 1 linha e 7 colunas, pois tenho 7 fatias criadas), seguindo as configurações da imagem acima.

É muito importante deixar a medida da tabela em porcentagem, pois é isso que faz com que a tabela se estique ou contraia horizontalmente quando você altera a resolução do vídeo!

 

7. Arraste cada item da barra de navegação para a respectiva célula da nova tabela.

 

 

8. Clique na primeira célula à esquerda da tabela e defina o alinhamento horizontal como esquerdo (left) e, para a última célula à direita, alinhamento horizontal direito (right). Selecione as opções de alinhamento na “barra de Propriedades”.

 

9. Selecione as células restantes na parte interna da tabela e defina o alinhamento horizontal centralizado (center).

 

10. Ajuste a largura de cada uma das células internas, selecione a tabela superior clicando com o cursor do mouse à sua esquerda e delete-a.

 

 

11. Quanto aos espaços em branco que ficaram dentro das células, serão preenchidos com a figura criada a partir da fatia de fundo que você criou no Fireworks para a “navegacao02”.

 

12. Para ver a relação de figuras que foram criadas quando você exportou o arquivo “navegacao02.png” para “navegacao02.html” clique no sinal de “+” no painel do gerenciador de arquivos:

 

 

13. Para preencher o fundo das células:

 

A. Selecione as células desejadas;

 

B. Clique no botão “Background URL of cell” (endereço do plano de fundo da célula );

14. Encontre a pasta “DreamweaverBasico/projeto01/imagens” , e dentro dela o arquivo “navegacao02_fundo” , selecione-o e clique OK.

 

 

A tabela está pronta! Salve o arquivo e pressione <F12> para visualizar o documento no browser padrão.

 

 

Utilizando o laytout ajustável, perceba que ao alternar a resolução do vídeo entre 800x600 e 1024x768 a barra de navegação se ajusta perfeitamente à janela do navegador.

 

Imagem ilustrando a pagina “navegacao02” feita através de layout ajustável, numa resolução de 1024x768.

 

 

Imagem ilustrando a pagina “navegacao01” feita através de layout fixo, numa resolução de 800x600.

 

 

No próximo capitulo você aprenderá a integrar o Macromedia Flash com o Dreamweaver!

FRONTPAGE - BÁSICO Criação de Páginas para Internet - Introdução Criando o Primeiro Arquivo HTML DREAMWEAVER - BÁSICO Introdução ao Dreamweaver MX 2004 Projeto Web – Parte 01 Projeto Web – Parte 04 Projeto Web – Parte 03 Criação de Tabelas no Dreamweaver Dreamweaver Basico - Começando a usar o DreamWeaver Dreamweaver Basico - Configurações de Definição de Sites Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 1 Dreamweaver Basico - Estruturação de Páginas - Usando Tabelas - Parte 2 Dreamweaver Basico - Definição Básica do Design e Inserção de Conteúdo Dreamweaver Basico - Criação de Links Dreamweaver Basico - Configuração de Links Usando Tabelas no DreamWeaver Usando Imagens no Dreamweaver Usando Modelos no Dreamweaver Conhecendo o Dreamweaver 8 Usando comportamentos para criar um menu pop up no Dreamweaver Usando a paleta Behaviors do Dreamweaver - Parte 1 Usando Camadas Para Exibir Dicas de Formulários Fazendo um Site com Templates Prontos no Dreamweaver HTML BÁSICO HTML Básico - Introdução à Internet HTML Básico - Alinhamento de Texto HTML Básico - Cabeçalhos e Formatação de Texto HTML Básico - Formatação de Texto HTML Básico - Criação e configuração de links HTML Básico - Criando Listas Ordenadas e Listas de Definição HTML Básico - Criação de Links Internos e Externos HTML Básico - Criação de Links Externos E Links de E-mail HTML Básico - Inserindo Imagens na Página HTML Básico - Introdução à Tabelas HTML Básico - Criação de Formulários - Parte 1 HTML Básico - Criação de Formulários - Parte 2 DREAMWEAVER - PROGRAMAÇÃO PHP Galeria de Fotos com Efeito Lightbox Dinâmica Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 1) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte 2) Criando Sistema de Cadastro de Emails e Upload de Imagens (Parte Final) Alternando Cores da Tabela no Resultado de uma Consulta Como Criar um Contador de Visitas (Acessos) Criando Galeria de Fotos (Tiny SlideShow) Criando Ícone para URL Criando Recurso Imprimir Criando Sites Auto-Ajustáveis de Acordo com a Resolução Formulário de Contato com Envio de Dados por Email Galeria de Fotos com Efeito Lightbox e Upload Múltiplo de Imagens

CRIANDO UM APLICATIVO PARA UMA ACADEMIA Criando Aplicativo Para Academia - Parte 1 Criando Aplicativo Para Academia - Parte 2 Criando Aplicativo Para Academia - Parte 3 Criando Aplicativo Para Academia - Parte 4 Criando Aplicativo Para Academia - Parte 5 Criando Aplicativo Para Academia - Parte 6 Criando Aplicativo Para Academia - Parte Final WEBSPHERE Apresentando o WebSphere Application Server da IBM Instalação do WebSphere Application Server Configurando uma aplicação no WAS Configurando a segurança no WAS SISTEMA DE SALÃO DE BELEZA Sistema Salão de Beleza - Parte 1 Sistema Salão de Beleza - Parte 2 Sistema Salão de Beleza - Parte 3 Sistema Salão de Beleza - Parte 4 Sistema Salão de Beleza - Parte 5 Sistema Salão de Beleza - Parte 6 Sistema Salão de Beleza - Parte 7 Sistema Salão de Beleza - Parte 8 Sistema Salão de Beleza - Parte 9 Sistema Salão de Beleza - Parte 10 Sistema Salão de Beleza - Parte 11 Sistema Salão de Beleza - Parte 12 Sistema Salão de Beleza - Parte 13 Sistema Salão de Beleza - Parte 14 SISTEMA PARA GERENCIAMENTO DE IMÓVEIS Sistema Para Gerenciamento de Imóveis - Parte 01 Sistema Para Gerenciamento de Imóveis - Parte 02 Sistema Para Gerenciamento de Imóveis - Parte 03 Sistema Para Gerenciamento de Imóveis - Parte 04 Sistema Para Gerenciamento de Imóveis - Parte 05 Sistema Para Gerenciamento de Imóveis - Parte 06 Sistema Para Gerenciamento de Imóveis - Parte 07 Sistema Para Gerenciamento de Imóveis - Parte 08 Sistema Para Gerenciamento de Imóveis - Parte 09 Sistema Para Gerenciamento de Imóveis - Parte 10 Sistema Para Gerenciamento de Imóveis - Parte 11