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.

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