NUNCA MAIS PASSE RAIVA POR NÃO CONSEGUIR RESOLVER UM PROBLEMA COM O EXCEL - GARANTIDO!

UNIVERSIDADE DO VBA - Domine o VBA no Excel Criando Sistemas Completos - Passo a Passo - CLIQUE AQUI

Você está em: PrincipalTutoriaisVivianhespanholetto : Dwbasico004
Quer receber novidades e e-books gratuitos?

FILTRO DE TUTORIAIS:


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!

Quer receber novidades e e-books gratuitos?

Cursos Online

  • Banco de Dados
  • Carreira
  • Criação/Web
  • Excel/Projetos
  • Formação
  • + Todas as categorias
  • Contato: Telefone: (51) 3717-3796 | E-mail: webmaster@juliobattisti.com.br | Whatsapp: (51) 99627-3434

    Júlio Battisti Livros e Cursos Ltda | CNPJ: 08.916.484/0001-25 | Rua Vereador Ivo Cláudio Weigel, 537 - Universitário, Santa Cruz do Sul/RS, CEP: 96816-208

    Todos os direitos reservados, Júlio Battisti 2001-2020 ®

    [LIVRO]: MACROS E PROGRAMAÇÃO VBA NO EXCEL 2010 - PASSO-A-PASSO

    APRENDA COM JULIO BATTISTI - 1124 PÁGINAS: CLIQUE AQUI