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 : Dwbasico003
Quer receber novidades e e-books gratuitos?

FILTRO DE TUTORIAIS:


Dreamweaver MX 2004 Básico

Projeto Web – Parte 03

 

Objetivo : Tomar conhecimento dos padrões e convenções de nomenclaturas e caminhos de documentos da web. Importar artes do Fireworks para o Dreamweaver, criando uma página de layout fixo e aprender como editar essas artes a partir do Dreamweaver.

 

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

 

Nomenclaturas e Convenções

 

Padrões e convenções utilizados até hoje para nomear documentos da web vêm dos tempos do Unix. Por exemplo, o uso de barras “/” para separar as hierarquias de diretórios ou, o fato de 2 arquivos com mesmo nome serem vistos como arquivos diferentes se um tiver todas as letras de seu nome minúsculas e o outro a inicial maiúscula. O mesmo não acontece com o seu micro, que, diferentemente dos servidores Unix, ambos arquivos são iguais e não podem ocupar o mesmo espaço ao mesmo tempo.

 

Sendo assim, muita atenção deve ser tomada ao nomear um documento web, pois utilizar acentos, cedilha, letras maiúsculas podem impedir a perfeita funcionalidade dos seus links no servidor.

 

Para que o browser abra a pagina inicial de um endereço visitado, é necessário utilizar um padrão para todos os sites contidos num mesmo servidor, o qual pode ser definido pelo próprio administrador dos servidores, porém, foi tomado por convenção nomear a pagina inicial como “index”, seguido da extensão do tipo de documento que tenha sido desenvolvido, como por exemplo: “index.html”; “index.php”; “index.asp”.

 

Dreamweaver + Fireworks

 

Uma forma de enriquecer um projeto web com mapas de imagens, menus atraentes e interativos, design sofisticado é integrar trabalhos desenvolvidos no Macromedia Fireworks com o Dreamweaver.

 

Páginas de Layout Fixo

 

As páginas de layout fixo devem ser desenvolvidas para uma resolução predefinida do vídeo. Tomaremos como padrão a escala 800x600, portanto, o tamanho de área útil para a edição da pagina torna-se aproximadamente 760x400.

 

Como esse tipo de página já tem resolução predefinida, ao serem visualizadas com uma resolução de maior numero de pixels apresentarão espaços em branco à direita ou à esquerda.

 

Nesta etapa de nosso projeto, veremos como importar artes do Fireworks para o Dreamweaver, criando uma página de layout fixo para uma empresa de sorvetes, chamada “Gelateria Pingüim”. Utilizaremos topos criados em Fireworks (a criação dos topos para site, menus e outras artes no Fireworks pode ser feita seguindo-se o passo a passo do tutorial de Fireworks da área Designer de tutoriais no site do Júlio Battisti).

 

1. Crie no Fireworks um arquivo de topo para a página com medidas 760 x 90 pixels, com itens de menu e slices, e digite nele o nome do negocio que será utilizado como tema deste projeto: “Gelateria Pingüim”, criando logotipo se assim você desejar. Exporte-o como navegacao01.html para a pasta DreamweaverBasico/projeto01/ e as imagens para DreamweaverBasico/projeto01/imagens – da hierarquia de pastas criada no tutorial da parte 01 deste projeto.

 

2. Abra o Dreamweaver. Caso a janela de gerenciamento de arquivos não esteja aparecendo, pressione a tecla F8. Abra o nosso “projeto01”.

 

 

3. Abra o arquivo “navegacao01.html”.

 

 

4. Abra o arquivo “navegacao01.html”, clicando duas vezes sobre ele.

 

5. Clique no botão “Preview/Debug in Browser” para setar a relação de browsers disponíveis no seu computador e qual será o browser padrão para a exibição das suas páginas. Após setar as opções, clique OK.

 

 

 

6. Pressione F12 para testar a página “navegacao01.html” no browser padrão. Verifique se as ações de rollover (caso você tenha colocado nos itens do menu) estão funcionando corretamente e altere a resolução de seu vídeo para 800x600 e 1024x768 e verifique que a barra de navegação e seus objetos permanecem sempre alinhados à esquerda. É graças a essa funcionalidade da exportação no Fireworks que os objetos e textos da pagina sempre permaneceram no lugar certo, assim como no arquivo .png original.

 

 

Integração com o Fireworks

 

A Macromedia pensou em tudo. Como o Dreamweaver não tem a capacidade de realizar todas as configurações em uma imagem do Fireworks, que só o próprio poderia fazer, um documento importado do Fireworks fica com vinculo direto ao programa enquanto você estiver editando-o no Dreamweaver.

 

Façamos um teste:

 

1. Selecione um item de menu na sua barra de navegação e note que a “Paleta de Propriedades” exibe características relacionadas ao Fireworks.

 

    A. Src: Exibe o caminho destino do arquivo original (png) do Fireworks referente ao objeto selecionado. Caso não esteja sendo exibido o caminho correto do arquivo “navegacao01.png” que você criou, clique na pastinha e encontre-o.

     

    B. Opções para edição do objeto Fireworks, na seqüência: Edit (Editar um objeto do Fireworks), Optimize in Fireworks (otimizar um objeto no Fireworks), Crop (cortar uma parte do objeto), Resample (atualiza as alterações realizadas num objeto Fireworks), Brightness and Contrast (ajustar os níveis de brilho e contraste de uma figura do Fireworks), Sharpen (torna mais nítida uma imagem do Fireworks selecionada).

2. No “Painel de Propriedades”, clique no botão “Edit” para editar o objeto selecionado no Fireworks.

 

    A. Fireworks: Note que foi aberto o arquivo original “navegacao01.png” dentro do Fireworks. A partir deste momento, você pode alterar tamanhos e cores, aplicar efeitos, enfim utilizar todos os recursos do Fireworks para edição da arte.

     

    B. Editing from Dreamweaver: Essa barra mostra que o arquivo entrou em modo de edição a partir do Dreamweaver. Agora podem ser efetuadas todas as alterações desejadas na arte e, quando estiver concluído, basta clicar no botão “Done” para retornar ao Dreamweaver.

Caso a imagem que você esteja tentando editar pelo Dreamweaver não esteja com o caminho corretamente configurado no campo “Src” do “Painel de Propriedades”, surgirá a janela “Find source” questionando se você deseja editar a imagem com o formato apresentado (gif ou jpg, por exemplo) ou através de um arquivo PNG.

 

 

No próximo capitulo aprenderemos a criar uma página com layout ajustável, integrando Dreamweaver e Fireworks.

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