Muitos leitores têm nos procurado com dúvida de como inserir um arquivo Flash em programas de edição de sites, principalmente no Dreamweaver, este processo acontece de maneira muito simples e direta como podemos ver a seguir.

Muitas pessoas possuem dúvidas a respeito de como trabalhar arquivos SWF com HTML, a maior dificuldade é que um arquivo SWF é um arquivo fechado e todas as ações devem ser configuradas antes do fechamento, no arquivo original. Existem muitas formas de se trabalhar com arquivos SWF, você pode: criar menus, botões, banners etc.

É sobre isso que falaremos nesta parte tutorial. Se você já possui um arquivo SWF e precisa colocá-lo em sua página HTML, siga os passos abaixo:

1. Clique no ícone Inserir Flash na barra de ferramentas Objetos comuns;

2. Abrirá uma caixa de diálogo para você selecionar o arquivo SWF que você quer inserir;

3. Escolha o arquivo e dê um clique em Selecione;

4. Esta ação colocará o arquivo SWF em sua página, mas lembre-se, todas as ações devem estar configuradas no próprio arquivo;

5. Você pode fazer pequenas modificações utilizando a janela de Propriedades, basta selecionar o arquivo e fazer os ajustes de: Qualidade, Borda etc.

Autor/fonte: Dygimage

<!–adsense–>
Como vão? Esta é a primeira coluna sobre Dreamweaver. Vamos abordar vários aspectos deste software de uma maneira geral, lembrando sempre que as dúvidas de vocês são mais importantes, portanto, mandem e-mails pedindo matérias etc… Afinal, a coluna só existe porque você a faz.

Bom, deixando as introduções, vamos ao programa.

Dreamweaver, como vocês sabem, é um excelente editor de HTML. Selecionei algumas áreas para fazer uma pequena visão e, claro, nas próximas colunas, serão vistas detalhadamente:

. Criando um FTP: O Dreamweaver possui um programa de FTP, acessado pelo menu SITE > NEW SITE. Nas configurações, forneça alguns dados e facilmente terá um excelente programa de FTP, muito prático;

. Tabelas: A criação e edição de tabelas no Dreamweaver é bastante simples e com inúmeras opções. Mais à frente, veremos algumas dicas para fazer alguns tipos de menus, muito úteis para sites com o Modelo “Portal”;

. DrawLayers: São camadas que podem ser colocadas em qualquer parte da tela, contendo textos, imagens, ações, animações, outras camadas. Outro aspecto interessante é a possibilidade de esconder essas camadas com a opção “Hidden” no box “VIS”. Existem também algumas opções como fazer de um layer uma máscara para outro, ou seja, o conteúdo de um layer será exibido somente no espaço definido por outro layer e também podemos fazer de um layer uma espécie de Frame, onde um eventual HTML será aberto;

. Folhas de Estilo ( CSS): Arquivos que pré-determinam dados como fonte, tamanho, Background etc. O Dreamweaver tem um bom editor e os estilos podem ser salvos à parte ou no próprio HTML;

. Time-Line: O Dreamweaver possui uma opção que permite animar camadas com o código HTML. Isso pode ser usado em sites com rolagem horizontal, menus pop-up etc;

. Possibilidade de expansão: A Macromedia (http://www.macromedia.com) mantém um site com novas extensões que podem ser baixadas e instaladas. Este acréscimo é muito bom. Você encontra extensões sobre inserção de vídeos, QuickTime, editor de e-mail (com opções CC, CCo, assunto e corpo), comércio eletrônico etc. Para baixá-las, cadastre-se no site da Macromedia e para instalá-las, você precisa baixar o programa Macromedia Extension Manager.

Gerenciamento/planejamento de um site

O cuidado com a organização do site é primordial para uma fácil localização e economia de tempo. Procure criar uma hierarquia, ou seja, criar pastas para arquivos semelhantes (imagens na pasta imagens, downloads na pasta downloads…).

Divida também seu site em categorias, colocando em pastas iguais arquivos sobre o mesmo assunto e sempre que quiser, use sub-pastas.

Deve-se planejar a navegação, ou seja, pensar no que você quer passar para o visitante. Nunca se esqueça de deixar claro onde ele está, assim como formas de retorno à página principal. Outro aspecto relevante é a quantidade de “clicks” que o visitante pratica para chegar ao local desejado. Informações de forma clara e objetiva são sempre bem-vindas.

Na próxima semana tem mais. Não se esqueça de enviar pedidos e dúvidas.
Autor/fonte: Raphael Simas

Olá pessoal! Nesta segunda coluna, vamos abordar um grande tema do Dreamweaver: os DrawLayers (camadas). Na matéria anterior fiz uma breve descrição e nas próximas, estudaremos caso a caso.

O que são “camadas”?

São recipientes que podem ser posicionados por coordenadas e podem conter vários tipos de informação.

Criando camadas

Cria-se uma camada pelo ícone de camadas, na caixa de ferramentas “Objects”.

Propriedades:

1. Layer ID: No campo, digite o nome pelo qual sua camada será identificada.

2. Posicionamento: Nestes 4 campos estão as coordenadas:

. “L” - Posicionamento horizontal em relação ao canto esquerdo da tela;
. “T” - Posicionamento vertical em relação ao topo da tela;
. “W” - Tamanho horizontal da camada;
. “H” - Tamanho vertical da camada.

3. Z-Index: Indica o nível da camada, ou seja, um número 1 está abaixo de um número 2 e o que estiver na camada de número dois será apresentado em cima da de número 1.

4. VIS: Indica a visibilidade inicial:

. “Default” - Padrão. Não especifica nenhuma característica de visibilidade;
. “Inherit” - Herda a propriedade da camada-mãe, ou seja, se esta camada estiver dentro de outra, ficará com a propriedade de visibilidade da mesma;
. “Visible” - Exibe o conteúdo da camada, independente da camada-mãe;
. “Hidden” - Oculta o conteúdo da camada, independente da camada-mãe.

5. Background Image: Seleciona-se o caminho para uma eventual figura de fundo.

6. Background Color: Seleciona-se uma cor para o fundo.

7. TAG: Rótulo. Determina se a camada é CSS ou da Netscape.

As camadas CSS se baseiam em coordenadas de HTML enquanto as da Netscape se baseiam em uma formatação criada por ela mesma:

. Camadas CSS: SPAN e DIV;
. Camadas da NESTCAPE: Layer e iLayer.

8. Overflow: Determina o que irá acontecer com um conteúdo da camada, caso ele exceda o tamanho da mesma:

. “Visible” - Aumenta o tamanho da camada para que todo o conteúdo seja exibido;
. “Hidden” - Mantém o tamanho da camada e não exibe o excedente;
. “Scroll” - Cria barras de rolagem, permitindo a exibição do conteúdo;
. “Auto” - Faz as barras de rolagem aparecerem apenas quando o conteúdo da camada exceder os limites.

9. Clip: Define o que será exibido na camada, ou seja, área visível. Os valores são relacionados à camada e não à página.

Camadas no Netscape

1. Use: Define o posicionamento da camada em relação à camada mãe:

. Left, Top: Define o posicionamento em relação à esquerda e ao topo;
. PageX, PageY: Define o posicionamento com valores absolutos em relação ao topo e à esquerda.

2. SCR: Permite apresentar no interior de uma camada o conteúdo de outro arquivo HTML.

3. A/B: Específica a ordem de empilhamento.

Dicas: Para editar várias camadas ao mesmo tempo, selecione uma ou mais camadas segurando a tecla “Shift”. Na caixa de Ferramentas aparecerá uma nova opção: “Multiple Layers”, onde se especificará o novo tamanho/posicionamento que será aplicado para todas as camadas. As outras opções foram citadas acima.

Na próxima coluna, continuaremos com a segunda parte da seção “DrawLayers”, onde veremos itens como alinhamento, animação, transparência, dentre outras aplicações.

Autor/fonte: Raphael Simas