Como começar a criar um site no Dreamweaver MX

Antes de começarmos a criar um site, é extremamente importante entendermos qual a sua real necessidade e muitas pessoas acham que para começar a criar um site no Dreamweaver, basta clicar em File e logo em seguida abrir um arquivo ou criar um novo. Não é bem assim :) ...

Antes de começarmos a criar um site, é extremamente importante entendermos qual a sua real necessidade!

Muitas pessoas acham que para começar a criar um site no Dreamweaver, basta clicar em File e logo em seguida abrir um arquivo ou criar um novo. O que estas pessoas não sabem, é que desta forma, estariam impossibilitadas de fazerem alguns trabalhos, como por exemplo o uso de algumas extensions (extensões, assunto não abordado neste tutorial!).

Criando um site a partir do menu Site, nossa vida é facilitada ao extremo pois desta forma o Dreamweaver pode nos informar de algum link "quebrado", pode definir o caminho de uma imagem corretamente e muitas outras vantagens - como por exemplo a utilização do FTP ! Isso mesmo, o Dreamweaver possui no painel Site, a opção de trabalharmos com FTP (desde que este esteja previamente configurado) ;-)  Para começar, clique em Window (Janela) e depois em Site - ou simplesmente aperte sua tecla F8 conforme indica a figura abaixo: 

Após isso o Dreamweaver nos mostrará a tela conforme a figura indica abaixo. Clique então em Site e depois em New Site (Novo Site).  

Perceba na próxima imagem que o Dreamweaver nos oferece a opção Basic (Básica) e a opção

Advanced (Avançada). Neste tutorial abordaremos o modo avançado, já que nos oferece uma maior possibilidade de configuração. Perceba, na figura abaixo, que o painel nos oferece as seguintes opções:

Local Info - Informações locais (de sua máquina)

Site Name: Local onde você deve colocar o nome do Site

Local Root Folder: Local onde está a pasta que contém os arquivos do site. Clique na "pastinha" e indique o local.

Refresh Local file list Automatically: Deixe esta opção marcada para que o Dreamweaver atualize a lista de arquivos automaticamente

Default Images Folder: Pasta que contém as imagens do site

HTTP Adress: endereço http de seu site

Cache: mantenha esta opção marcada para que o Dreamweaver mantenha as informações do site e acelere o uso do painel Asset, controle de links, mapa do site e outras características/vantagens. 

Remote Info - informações remotas  

 Em informações remotas, indicaremos ao Dreamweaver qual é o tipo de acesso remoto que utilizamos para envio de arquivos de nossa máquina para o servidor. Um dos modos mais utilizados, é com certeza, o FTP que abordaremos neste tutorial. Em Access indicamos qual o tipo de acesso, no nosso caso, o FTP.

FTP Host: endereço do ftp, que geralmente é: ftp.seusite.com.br. Esta informação você deve consultar em seu servidor ;)

Host Directory: diretório do site no server. Deixe esta opção vazia Login: Aqui você deve digitar o Login, ou nome de usuário, necessário para conectar ao FTP. Novamente, esta informação deve ser pedida ao servidor Password: A senha que você deve digitar para ter acesso ao FTP, que deve ser consultada no servidor que hospeda o site Perceba ainda que o Dreamweaver nos dá a opção de configurarmos um Firewall e ainda utilizar SSH. Caso queira, você pode configurar o firewall clicando em Firewall Settings, porém deve-se ter muito cuidado e somente mexer nesta opção caso você tenha certeza do que está fazendo pois este tutorial não aborda o assunto Firewall ...

Há ainda duas opções para marcarmos:

Automatically upload files to server on save Enable file check in and check out

Aconselho que você deixe desmarcadas estas opções: você já imaginou se a cada vez que você salvar um arquivo o Dreamweaver conectar ao servidor FTP para enviar o mesmo?! Não dá né?!  Testing Server - Servidor de testes Caso você esteja trabalhando com alguma linguagem dinâmica para web, como ASP, JSP ou PHP por exemplo, pode definir um servidor de testes local para testar seus scripts sem ter que enviar os arquivos ao servidor. Em Server Model  você deve indicar ao Dreamweaver qual a linguagem utilizada. No caso deste tutorial, coloquei PHP MySQL como xemplo. Em Access você define o tipo de acesso, que em nosso caso é local/network já que o servidor está nesta máquina. Em Testing Server Folder você deve indicar o caminho da pasta do servidor de testes. Marque também a opção Refresh Remote list Automatically. Em URL Prefix você deve definir o prefixo que está configurado no servidor de web, que geralmente é http://localhost 

O Dreamweaver ainda nos oferece outras opções pouco exploradas pela maioria dos usuários, porém não menos importante! São elas: Cloaking: Permite excluir pastas e arquivos de todo o site. Design Notes: Controle de informações adicionais relativas aos documentos, como, por exemplo comentários acerca do status do arquivo. Site Map Layout: Mapa do layout do site, opções para definir o número de colunas exibidas por exemplo.

 Neste tutorial, deixaremos estas opções com os valores padrões (default). Clique em OK para terminar de criar o site! O Dreamweaver mostrará uma tela dizendo que o cache e depois o painel mostrará os arquivos que você possui na pasta do site, conforme indica a imagem a seguir: 

Pronto, você acabe de criar um site no Dreamweaver ! Fácil não?! E além de fácil, este recurso poupará muito tempo e trabalho, acredite! ;)

Uma dica: explore ao máximo este painel Files (e os outros também), pois há muita coisa interessante! 

Objetivos: 

Ensinar como usar imagens em seu Dreamweaver, criar mapas de imagens e álbuns de imagens.

Para inserir uma imagem no Dreamweaver, clique no menu Insert/Image. Vale lembrar que a iamgem deve estar na mesma pasta, dos arquivos .HTM ou numa sub-pasta dos seus arquivos .HTM.

 

 

Ou use o botão Images da barra Common.

 

 

Depois de inserida a imagem, podemos usar a Barra de propriedades para alterar seus atributos.

 

Modificando a largura e a altura da imagem 

Altere a largura e a altura da imagem, no local apontado na imagem abaixo.

 

 Depois de alterar largura e altura, os valores ficam em negrito para avisá-lo que aquele não é o tamanho original da imagem.

 

 

Clique no lugar indicado pela seta para restaurar os valores de largura e altura, ou em cima da letra “W” para restaurar só a largura e em cima da letra “H” para restaurar só a altura.

 

Alterando o texto alternativo da imagem

 

Texto alternativo é aquela descrição que aparece em cima de algumas imagens na web quando posicionamos o mouse sobre elas.

 

Selecione a imagem e altere seu texto alternativo no local indicado abaixo.

 

 

Quando sua página estiver no ar, o texto alternativo aparecerá assim:

 

 

Inserindo uma borda na imagem 

Para inserir uma borda na imagem, digite a espessura da borda em píxels no local descrito abaixo.

 

 

Resultado

 

 

Fazendo um texto contornar a imagem

 

Vamos usar recursos de alinhamento de imagem para fazer com que um texto a envolva, vamos alinhar a imagem à direita e à esquerda do texto.

 

Com a imagem inserida digite ou cole um texto com pelo menos 10 linhas ao lado da imagem.

 

Selecione a imagem e altere seu Align para Left.

 

 

Resultado

 

 

Experimente o alinhamento Right também.

 Se você achar que o texto ficou muito próximo da imagem, podemos aumentar esta distância modificando os atributos HSPACE e VSPACE na barra de Propriedades.

 

 

Resultado

 

 

Usando uma imagem como link

 

Para fazer com que uma imagem se torne um link, selecione-a e digite o nome da página a ser aberta na caixa Link.

 

 

Depois que transformamos uma imagem em link, automaticamente aparece uma borda na imagem, por padrão, esta borda terá a cor azul se o link ainda não tiver sido visitado e púrpura se já tiver sido visitado, se você quiser remover esta borda, altere o valor de Border para 0 (zero) na barra de propriedades.

 

 

Criando um mapa de imagens

 

Um mapa de imagens é um recurso que permite fazer com que apenas um trecho da imagem seja transformada em link.

 

Selecionando sua imagem no Dreamweaver aparecerá em baixo à esquerda de sua barra de propriedades os botões com as formas de mapas de imagem, como mostra a figura abaixo.

 

 

Onde:

 

 

Selecione o mapa retangular e desenhe um retângulo em cima de sua imagem, um pequeno retângulo.

 

 

Com o mapa selecionado, digite a página ou o site que abrirão a partir do link mapeado.

 

 

Criando um álbum de imagens

 

Um álbum de imagens é uma daquelas páginas com miniaturas de imagens que quando clicadas exibem a imagem em outra página em tamanho grande.

 

Para testar este exercício, crie uma nova pasta e coloque pelo menos 10 imagens dentro dela, esta página só pode conter arquivos de imagem e todas as imagens que ai estiverem aparecerão no álbum.

 

1. No seu Dreamweaver crie um novo arquivo.

 

2. Clique no menu Commands/Create web photo álbum.

 

 

3. Quando clicar em OK, o Fireworks será aberto para fazer o trabalho de criação dos arquivos miniatura das imagens, no término do trabalho aparecerá a caixa de diálogo abaixo:

 

 

Resultado:

 

 

Salve seu arquivo e pressione F12 para ver o resultado.

 

O Dreamweaver criou uma página chamada index.htm dentro da pasta principal, e uma página .HTM para cada imagem grande dentro da sub-pasta Pages, é importante que você dê uma olhada na estrutura das pastas criadas e o seu conteúdo para ter uma idéia melhor do trabalho que seu programa fez para você

Fala galera! Tudo bem com vocês?!

 

Neste tutorial apresentarei novos conceitos sobre como misturar imagens. Esta técnica é bastante conhecida no aplicativo Photoshop, mas ainda há muitas pessoas que desconhecem este recurso no fantástico aplicativo Macromedia Fireworks MX.

 

O grande ganho que temos com a utilização deste recurso está no fato de se obter excelente resultados com fotos de baixa resolução.

 

Então mãos a obra senhoras e senhores!

 

1) Precisaremos de duas fotos, do mesmo altura e largura, para realizar a técnica.

 

2) No exemplo que darei utilizarei as fotos relacionadas abaixo. Ambas possuem as mesmas medidas: 116 x 76 pixels:

 

         

 

3) Definido as imagens a utilizar, iremos criar um novo documento, através do comando Arquivo, Novo ou pelo atalho Ctrl+N, de 116 x 76 pixels. Selecione a cor preto para o fundo.

 

 

4) Veja como deve ficar a tela após as configurações necessárias:

 

 

5) Salve o novo documento como mistura_imagens.png. Lembrando que os documentos salvos no fireworks possuem extensão .PNG. Para salvar acione o comando Arquivo, Salvar ou pelo atalho Ctrl+S.

 

 

6) Após ter salvado o documento, abra a primeira imagem. Para abrir acione o comando Arquivo, Abrir ou pelo atalho Ctrl+O e arraste para o documento mistura_imagens.

 

 

7) Concluído o procedimento para a primeira foto, repita-o para a segunda imagem.

 

8) Com as duas imagens no documento mistura_imagens acesse o menu Janela, Camadas ou pelo atalho F2 e selecione a opção Camadas.

 

 

9) Com a janela camadas aberta, vai ao layer que contém a segunda imagem e clique na opção Adicionar máscara.

 

 

10) Ainda com a máscara da máscara 2 selecionada, acesse a paleta de ferramentas e escolha a ferramenta Gradiente e arraste-o sobre o documento. No sentido da esquerda para a direita.

 

 

11) Você deve respeitar o sentido para aplicar o efeito de degrade, porque senão o efeito sai ao contrário e não irá conseguir alcançar o resultado desejado. Veja:

 

 

12) Após ter inserido o efeito de degrade nosso documento está pronto !

 

13) Veja como ficou nosso exemplo e outras fusões ilustrativas:

 

 

 

 

14) Após concluir o efeito aqui aprendido, falta apenas exportar a imagem criada. Para tal, acesse o menu Arquivo, Exportar ou pelo atalho Ctrl+Shift+R.

 

 

15) Na janela que surgiu, escolha um nome para o arquivo e o formato como quer que seja salvo.

 

16) No próximo artigo explicarei, pormenorizado, todos os formatos de exportação no Macromedia Fireworks.

 

Muito bem galera, por hoje é só. Conto com o acesso de todos vocês para os próximos artigos.

 

Fábio Almeida

 

Olá galera, tudo bem com vocês?

 

Neste artigo iremos falar e aprender sobre um assunto que vários profissionais da área tem dificuldades em desenvolver, trata-se do topo do site, que uma vez desenvolvido utilizando recursos simples e marcantes causará um efeito satisfatório. Outra dificuldade está na impressão passada pela logomarca.

 

Para tentar amenizar tais dificuldades, iremos trabalhar com a criação de um topo inteiro de um site, nos mínimos detalhes.

 

1- Crie um novo arquivo – Arquivo, Novo – ou pelo atalho Ctrl+N:

 

 

2- Defina o tamanho de 779 x 280. Lembre-se de manter a resolução padrão para internet, que é de 72 pixels/polegadas. A cor podemos definir como branco.

 

 

3- Com o novo documento aberto, iremos trabalhar com alguns efeitos neste momento. O primeiro efeito que iremos trabalhar é a fusão de imagens. Ao acompanhar este artigo, escolha 04 (quatro) imagens ao seu gosto, de acordo com o site que pretende fazer. Ative o menu Arquivo, Abrir. Na janela que surgiu, escolha a primeira imagem de seu gosto para iniciarmos nosso efeito.

 

 

 

4- Com a imagem aberta, iremos dar começar a utilizar as ferramentas que citei no artigo passado, agora na prática. A primeira destas ferramentas que utilizaremos agora é a ferramenta Laço, que serve para dar um efeito esfumaçado a imagem ao recorta-la e cola-la em outro arquivo. Juntamente iremos trabalhar com a propriedade Enevoar da barra de propriedades. Para que possamos visualizar as propriedades de cada ferramenta, devemos selecioná-la. Ao realizar tal tarefa, perceba que a barra de ferramentas muda sua aparência. Definiremos a propriedade Enevoar com 22%. Quanto mais porcentagem, mais esfumaçada as bordas das imagens ficará. Confira como deverá ficar as configurações:

 

 

 

5- A próxima etapa nos permite trabalhar a vontade, não tendo que seguir um modelo pré-definido. Façam da maneira que julgam ficar melhor. Para utilizar a ferramenta laço, clique e segure o botão do mouse. Veja o modelo:

 

 

6- Após ter delimitado a área para aplicação do efeito, temos que colocar a imagem aberta ao lado do documento criado nos passos 1 e 2. Para fazer isto, ative o menu Janela, Lado a lado vertical.

 

 

7- Já com os dois documentos lado a lado, clique na ferramenta Seta Preta que se encontra na caixa de Ferramentas, posicionando-a no centro de sua seleção. Notem que o cursor do mouse deixa de ser a seta e passa a um formato de tesoura.

 

 

8- Agora basta clicar e arrastar para o documento aberto ao lado. Analisem o efeito criado. Veja que a imagem fica esfumaçada.

 

9- Tendo arrastado a imagem que acabamos de aplicar o efeito esfumaçado, feche a imagem. Ao surgir a mensagem pedindo para salvar, clique em Não.

 

10- Outra propriedade que iremos modificar e que é bastante interessante é a propriedade Opacidade. Posicione a imagem no lado esquerdo do documento e defina a opacidade em 55%. Veja como deverá ficar:

 

 

11- Agora vocês já estão aptos a desenvolver os mesmos efeitos para as 03 (três) imagens restantes. Sigam os passos de 03 à 10 para aplicar o efeito as demais imagens. Um detalhe que é importante, é definir a opacidade das demais imagens diferenciadas da primeira imagem. Temos que ir escurecendo cada imagem até chegar aos 100% de opacidade. Isso irá dar um efeito bastante agradável ao topo de nosso site.

 

12- O efeito quase que pronto será o seguinte:

 

 

13- Se observarmos detalhadamente iremos constatar que há falhas em branco no documento. Mas para este probleminha, o super Fireworks tem uma simples e eficaz solução.

 

14- A solução é enquadrarmos nosso documento. Para isso, selecionem na caixa de Ferramentas – Cortar.

 

 

15- Após ter selecionado, iremos clicar sobre o documento e arrastar como se fossemos fazer um retângulo. Vejam:

 

 

16- Vale aqui a ressalva de que esta ferramenta permite que você possa redimensionar a área após ter utilizado. Para isso basta clicar nas linhas do retângulo e arrastar como quiser.

 

17- Após ter definido a área teremos que fazer uma mágica para enquadrar nosso documento. Esta mágica chama-se ENTER. Pressionem a tecla enter e vejam o efeito final após o enquadramento:

 

 

É isso aí turma, por hoje finalizaremos por aqui. Espero que estejam gostando dos artigos e que estes possam estar agregando conhecimento a vocês.

 

No próximo artigo iremos dar continuidade a este topo, pois podemos ainda melhora-lo. Aprenderemos a utilizar outros efeitos do Fireworks, também muito interessantes.

 

Não deixem de acompanhar a série Fireworks!!!

 

Dúvidas?! Enviem e-mail para webdesigner.pro@pop.com.br.

 

Um grande abraço a todos.

Olá galera! Tudo bem com vocês?

 

Ensinarei neste artigo criar os tão famosos botões no estilo XP. O processo é simples, basta acompanhar os passos a seguir:

 

1) Crie um novo documento de 400 x 400 pixels. Trabalhar com o palco maior evitará surpresas desagradáveis com o tamanho dos objetos futuramente.

 

 

2) Suas configurações devem ficar da seguinte forma:

 

 

3) Com o documento em branco aberto, selecione a ferramenta Elipse.

 

 

4) Vamos criar agora a base do botão. Crie um círculo de aproximadamente 80 x 80 pixels.

 

Dica: Para fazer um círculo perfeito pressione a tecla Shift enquanto está fazendo-o.

 

5) Caso não tenha acertado o tamanho logo de início, vá até a barra de propriedades e faça os ajustes. Como disse em minha apresentação, a barra de propriedades é de imensa importância e utilidade.

 

 

6) Selecione agora o círculo com a ferramenta Selecionar secundário (mouse branco).

 

 

7) Vá até a barra de propriedades e selecione no campo Categoria de preenchimento a opção Linear.

 

 

8) Definimos nosso círculo para trabalhar com um efeito de degrade. Dê um clique no balde de tinta, localizado a esquerda do campo que definimos acima.

 

 

9) Selecione as cores que desejar. Neste artigo vou utilizar dois tons de laranja. Para selecionar a cor desejada, basta clicar no ponteiro. Veja na imagem a seguir:

 

 

10) Após ter selecionado as cores desejadas, selecione o ponteiro preto.

 

Dica: Você pode acessar este ponteiro de forma mais fácil. Basta pressionar a letra v.

 

11) Coloque o eixo da cor na posição vertical e o ponto final no centro. Veja como deve ficar:

12) Vamos agora fazer algumas cópias deste círculo. Utilizem o método mais comum da informática, o famoso Ctrl+C e Ctrl+V. Faça 04 cópias idênticas do círculo, lembrando que não se pode redefinir o tamanho do objeto.

 

 

13) Selecione o primeiro círculo para editá-lo. O objetivo agora é voltar o posicionamento do eixo da cor para horizontal e modificar a opacidade da segunda cor para zero. Para isso, você irá primeiramente selecionar o círculo com o ponteiro seta preta. Após isso acesse a opção Linear, fazendo com que abra a tela para seleção de cores. Por fim defina a opacidade como zero. Veja:

 

 

14) Repita o processo para os outros 2 círculos duplicados, mudando apenas o eixo e a direção.

 

 

15) Feito isso, una todos os círculos acima do círculo principal. Deve ficar da seguinte maneira:

 

 

Dica: para colocar todos os círculos no mesmo posicionamento, trabalhe utilizando as coordenadas X e Y da barra de propriedade.

 

 

16) Com o ponteiro preto, acesso o menu Modificar, Agruparou simplesmente o atalho Ctrl+G para agruparmos todos os círculos.

 

17) Vamos aplicar um efeito para dar uma aparência legal ao botão. Com o grupo selecione a opção Efeitos na barra de propriedades, escolhendo a opção Sombra e brilho, Aplicar sombra.

 

 

18) Tome cuidado da maneira que aplicará esta sombra, pois o intuito dela é apenas complementar o efeito. Temos que ter cautela neste momento. Segue uma sugestão de configuração:

 

 

19) Para incrementar ainda mais nosso botão, aplique o efeito Sombra e brilho, Brilho interno. Acesse o mesmo menu anterior mudando apenas no momento da opção final (Brilho interno ao invés de Aplicar sombra). Veja:

 

 

20) Confira como está nosso botão até o presente momento:

 

21) Chegou a hora de criar o brilho. Vale a ressalva de que aplicar este efeito exige um pouco mais de concentração. Mude o ponteiro para o ponteiro branco.

 

22) Desagrupe os círculos. Para isso acesso o menu Modificar, Desagrupar ou Ctrl+Shift+G caso prefira o atalho.

 

23) Selecione uma das camadas e dê Ctrl+C e Ctrl+V para criar outro círculo.

 

24) Pegue este círculo duplicado e vamos alterar suas cores e opacidade. Do lado esquerdo e direito modifique para a cor branco e mude a opacidade do lado direito para zero.

 

 

25) Diminua o tamanho do círculo criado e em seguida selecione o ponteiro branco e pegue o ponto inferior do círculo arrastando-o para cima.

 

 

26) Posicione o círculo que acabamos de trabalhar em cima do grupo. Veja como deve ficar:

 

 

27) Insira agora os nomes que quer atribuir ao botão. Veja como fica botões XP com outras cores:

 

 

Muito bem galera, concluímos que criar botões com estilo XP não é complicado, pelo contrário, é bastante simples, exigindo apenas um pouco de concentração.

 

Com criatividade e uma ferramenta tão fenomenal como o Macromedia Fireworks se vai longe

Vamos nessa galera aprender mais um recurso visual bastante interessante e utilizado por muitos profissionais da área.

 

Nosso objetivo é criar um menu de acesso às páginas secundárias do site que está criando.

 

Siga os passos descritos a seguir e veja o quão simples é fazer um menu com design arrojado.

 

Então, mãos a obra!

 

1) Abra o aplicativo Macromedia Fireworks.

 

 

2) Abra o arquivo criado nos artigos passados (Criação de topo para o site – partes I, II e III).

 

 

Observação: neste artigo vamos utilizar os conceitos utilizados no artigo passado (Botões estilo XP) para criação do menu.

 

3) Crie um novo documento de 779 x 800 pixels. Mas por quê esta medida Fábio Almeida? A resposta é simples: utilizamos a medida 779 pixels na largura por ser o padrão utilizado na construção de websites na internet. Já a altura pode ser o quanto precisar, não influenciando. Esta é uma dica de ouro.

 

 

 

4) Copie o topo criado e cole neste novo documento. Alinhe-o da maneira que julgar melhor. Em alguns casos é interessante deixar bordas em seu site por questões de estética. Esta ação é recomendada quando se deseja criar um site mais clean. Veja como deve estar seu arquivo após colar o topo criado:

 

 

5) Reparem que pelo simples fato de ter criado uma borda na página o site tomou um ar diferente. Parte de cada um notar e ter sentidos mais apurados para estar observando as diferenças que às vezes será a marca para seu site. Vale aqui a ressalva de que estes sentidos podem (e devem) serem treinados.

 

Para criar a borda, basta selecionar a ferramenta retângulo e preencher a cor como transparente e a cor do contorno como preto. Veja as propriedades a serem modificadas:

 

     

 

6) Crie um retângulo, utilizando a mesma ferramenta mostrada acima, medindo 718 x 75 pixels e posicione-o logo abaixo do topo.

 

7) Defina o efeito Linear para este retângulo.

 

 

8) Escolha, no balde de tinta ao lado, a primeira cor como azul bem clarinho e a segunda cor como azul escuro. Veja:

 

 

9) Mude a orientação do degrade de horizontal para vertical. Veja como deve ficar:

 

 

10) Agora chegou o momento de inserir os botões de acesso na barra que acabamos de criar. Os botões a serem inseridos são do estilo XP, que aprendemos a criar no artigo passado. Podemos modificá-los de acordo com nossas necessidades, mudando a altura, largura e etc. Ao final teremos um menu muito show!

 

Confiram abaixo como ficou o meu exemplo, onde modifiquei um pouco a estrutura dos botões:

 

 

Dicas: quando inserir o primeiro botão, basta duplicar este para criar os demais. Para duplicar um botão no Fireworks você tem duas maneiras. A primeira é o famoso Ctrl+C e Ctrl+V e a segunda maneira é pelo atalho Ctrl+Alt+D. Após a duplicação basta modificar o texto dos botões. “Nos mais simples detalhes encontramos as maiores maravilhas”.

 

Muito bem galera, espero que todos tenham gostado deste artigo no qual ensinei a criar um menu superior bem legal e que poderá servir de inspiração para muitos outros estilos de menus.

MONTANDO O CORPO DO SITE – PARTE 1

 

Tudo bem com vocês?!

 

Neste tutorial vou ensinar a criar o corpo para nosso site. Muitos podem se questionar sobre o que é o corpo do site. A resposta é simples: corpo do site é a parte central do site, onde incluiremos nossas chamadas para páginas secundárias. Outra pergunta que pode surgir é: “Tenho sempre que fazer desta forma?”. A resposta é NÃO, pois poderá buscar novos meios de se criar um corpo para o site, destacando as principais áreas. A palavra chave neste caso é criatividade. Vou ensinar a criar um, entre vários, modelos existentes. Vale aqui a ressalva de que não quero ver ninguém copiando este layout. Podem utilizá-lo para tirar idéias, mas nunca copie um layout. Veja na figura abaixo nosso efeito final:

 

 

Como para aprender temos que praticar, mãos ao mouse (rs).

 

1) Abra o arquivo que estamos desenvolvendo (com extensão .png).

 

2) Primeiramente, desenvolveremos a parte central do site. Crie um retângulo de 420 x 475 pixels sem cor de fundo e com contorno azul e o posicione ao lado do menu lateral.

 

 

3) Crie um outro retângulo de 150 x 20 pixels com o fundo na cor “#FFE6CC” e o contorno azul.

 

 

4) Utilizaremos agora uma ferramenta ainda não trabalhada. Trata-se da Ferramenta Inclinar (atalho: Q). Com o retângulo selecionado, acione esta ferramenta. Surgirá algumas “alças”. Serão nestas “alças” que daremos o efeito de inclinado. Para tal, clique na alça superior central puxando, levemente, para a direita.

 

OBS: Para inclinar o retângulo, o ponteiro do mouse terá que virar uma seta de ponta dupla. Veja a seguir:

 

        

 

5) Ainda com o retângulo selecionado, vamos aplicar um efeito em sua borda. Vá até sua propriedade Textura e escolha a opção “Linha vertical 3” e mude o valor da quantidade de textura para 100%. Posicione o retângulo no canto superior direito do retângulo maior, criado há pouco.

 

 

6) Selecione a ferramenta Texto e digite a palavra “Destaques”, posicionando-a na lateral direita do retângulo. Configurações: fonte: Tahoma, tamanho: 13, cor: “#EC7600”.

 

 

7) Para incrementar este retângulo, utilizei os botões do estilo XP que ensinei a fazer. Dupliquei as bolinhas (atalho: Ctrl+Alt+D) do menu lateral e alterei apenas o tamanho das mesmas, começando pequena e indo até a maior. Veja como deverá ficar o retângulo após a inserção das bolinhas:

 

 

8) Nossa tarefa agora é inserir as linhas de divisão para o retângulo maior. Selecione a ferramenta Linha e crie uma linha horizontal de um lado ao outro do retângulo. Sua linha deverá medir 419 pixels.

 

DICA: Para se criar uma linha reta perfeita, pressione a tecla SHIFT durante o processo de criação.

 

 

 

9) Duplique esta linha 3 vezes (atalho: Ctrl+Alt+D) e as posicione para o restante do retângulo, buscando alinhá-las entre si.

 

 

10) Nosso retângulo central está prontinho! Vamos para a barrinha do rodapé. Crie um retângulo de 720 x 20 pixels e posicione-a na parte inferior do retângulo maior.

 

 

11) Mude o preenchimento do retângulo para o efeito Radial, em Categoria de preenchimento. As cores a ser utilizada são: laranja claro: “#FFE7CE” e laranja escuro: “#FFA953”.

 

        

 

 

12) Com a ferramenta Texto digite a seguinte frase: “Copyrigth 2005 – Todos os direitos reservados” e a posicione ao centro. Configurações: fonte: Tahoma, tamanho: 12, cor: “#000000”.

 

 

13) Ao finalizar a barrinha, nosso layout terá que ter a seguinte aparência:

 

 

Ok galera, por hoje finalizamos por aqui! No próximo tutorial acabaremos o corpo de nosso site.

MONTANDO O CORPO DO SITE – PARTE 2

 

Olá galera, tudo beleza com vocês?!

 

Iremos neste tutorial dar continuidade à criação do corpo do site. Lembra-se o que vem a ser o corpo do site? Vou refrescar um pouco a mente de vocês: Trata-se da área onde inserimos os links que farão as chamadas para as páginas secundárias. Agora que estão com o conceito fresquinho em mente, vamos dar continuidade.

 

1) Abra o arquivo que iniciamos no tutorial passado (com extensão .png).

 

 

2) Até o momento nossa página está da seguinte forma:

 

 

3) Crie um retângulo de 120 x 112 pixels sem cor de fundo e com o contorno na cor azul e posicione-o no canto superior direito da tela.

 

 

    

 

4) Duplique (atalho: Ctrl+Alt+D) o retângulo criado três vezes e posicione-os abaixo do original. Veja a aparência que a página deverá ter após a duplicação e posicionamento dos retângulos.

 

 

5) Agora vamos criar a parte superior para os retângulos criados. Selecione a ferramenta Linha e desenhe uma linha horizontal de 119 pixels e a posicione na parte superior do primeiro retângulo.

 

 

6) Utilize para a linha criada o mesmo efeito que usamos para construir as linhas de divisões do retângulo central. Suas configurações são: Linha Vertical 1, Quantidade de Textura: 90%, Cor da Linha: azul.

 

     

 

7) Seguindo, selecione e duplique (atalho: Ctrl+Alt+D) as três bolinhas utilizadas no retângulo central e as posicione a esquerda do retângulo menor no qual estamos trabalhando.

 

 

8) Faça o mesmo procedimento para o texto. Duplique-o (atalho: Ctrl+Alt+D) e o posicione a direita do retângulo que estamos trabalhando. Para o primeiro retângulo digite a palavra “Parceiros”. Configurações a serem utilizadas no texto:

 

» Fonte: Tahoma

» Tamanho: 13

» Cor: Laranja (#EC7600)

 

 

9) Repita os procedimentos 7 e 8 para completar a criação dos demais retângulos. Insira os seguintes textos:

 

» Segundo Retângulo: Curiosidades

» Terceiro Retângulo: Downloads

» Quarto Retângulo: Invente-se

 

 

10) Falta apenas criar a parte esquerda da página, onde será criada a parte de Newsletter e inserida a logomarca pessoal. Com a ferramenta Texto selecionada digite a palavra Newsletter e posicione-a abaixo do menu lateral. Configure o texto da seguinte forma:

 

» Fonte: Tahoma

» Tamanho: 14

» Cor: Preto (#000000)

 

 

11) Ainda com a ferramenta Texto selecionada, digite as palavras “Nome” e “E-mail”, utilizando as seguintes configurações:

 

» Fonte: Tahoma

» Tamanho: 11

» Cor: Laranja (#EC7600)

 

 

12) Crie dois retângulos de 125 x 16 pixels sem cor de fundo e com contorno na cor laranja (#EC7600) e os posicione logo abaixo das palavras “Nome” e “E-mail”.

 

 

13) Falta ainda criar o botão de Enviar. Crie um retângulo de 50 x 16 pixels sem cor de fundo e com contorno na cor laranja (#EC7600).

 

 

14) Digite a palavra Enviar e insira dentro do retângulo criado. Configurações para o texto:

 

» Fonte: Tahoma

» Tamanho: 11

» Cor: Cinza Escuro (#666666)

 

 

15) Para finalizarmos, importe a logomarca e a posicione abaixo da seção Newsletter. Acesse o menu Arquivo, Importar (atalho: Ctrl+R) selecionando a logomarca desejada.

 

         

 

 

16) Veja como ficou o layout final de nossa página:

 

 

Para obter um resultado final tão satisfatório quanto este, vale o esforço!

 

Muita bem galera, desta forma finaliza aqui mais um tutorial sobre esta maravilhosa ferramenta de design – o Fireworks.

 

Caso tenha dúvidas, sugestões, opiniões e até mesmo elogios, favor enviá-las para o seguinte e-mail: webdesigner.pro@pop.com.br

 

Acesse: www.fabio.trampos.net

Dreamweaver: Inserindo Botões e Vídeos Flash

O Dreamweaver se integra facilmente as outras ferramentas da Adobe e podemos inserir dentro dele facilmente componentes do Flash. O próprio Dreamweaver já possui alguns exemplos de botões e textos prontos, e você pode criar seus componentes no Flash e depois inseri-los dentro de sua página no Dreamweaver. Para inserir um botão do Flash, clique no Menu Insert, Media Flash Button, ou através do botão Flash Button na barra de ferramentas.

A opção Flash texto permite inserir um Flash de texto com a opção de se colocar links no texto, e mudança de cor na rolagem.

Flash Vídeo

Um dos grande recursos criado ultimamente para disponibilização de vídeos na WEB foi o formato FLV (Flash Vídeo), pois permite a publicação de vídeo em websites, sem a necessidade de um servidor de Streaming, plug-ins, etc..., basta apenas que o navegador do usuário tenha o plug-in do Flash instalado (98 % dos computadores o tem), o maior ?ícone? de sucesso do Flash vídeo ao site YOUTUBE (www.youtube.com), que atualmente é sinônimo de vídeo na Internet.

Para se inserir um arquivo FLV em HTML com o Dreamweaver é muito fácil.Clique na barra de ferramentas no botão Flash Vídeo no Menu Insert, Media, Flash Vídeo.

Na tela apresentada, é necessário definir o caminho onde está o seu arquivo FLV, o Skin de controle do vídeo, as dimensões (Use o botão Detect Size), as opções Auto play (inicia automaticamente) e Auto Rewind (reinicia automaticamente) são opcionais, e a última tela é uma mensagem a ser mostrada caso o usuário não tenha o plug-in do flash.

O Formato Flash Vídeo criado pela Macromedia ®, e comprada pela Adobe®, é atualmente o formato mais recomendável para distribuição de vídeos na WEB. Para transformar seu vídeo AVI, MOV, etc... em FLV é necessário um programa de conversão, pois ele usa como compactador do vídeo o plug-in OnVp6 ou OnVP7, o Adobe Flash®

possui junto a ele o Flash Vídeo Encoder, que faz essa conversão, mas já existem alguns conversores de vídeo que fazem essa conversão.

Templates/ModelosCriar o design e estrutura de um site é uma das melhores partes de um Projeto Web. O problema é quando você tem que implementar mudanças em seu maravilhoso projeto, depois d tudo pronto. Imagine que seu projeto tenha ao todo 150 páginas, quanto tempo demoraria para atualizar os 150 arquivos? Com o auxilio das Templates (Modelos), você usará poucos minutos.

Depois que uma nova página é criada a partir de um Template, o novo documento continua anexado ao modelo original, ao menos que seja especificamente separado ou desanexado. Se você alterar o Template original, todos os documentos criados a partir dele são atualizados automaticamente.

Ao se criar um template, toda a página é bloqueada. Seções bloqueadas de um Template não podem ser alteradas em um documento variado desse Template. É fundamental, ao se criar um Template, definir um tipo de Região que pode ser alterada. Abaixo as Regiões possíveis de um Template:

Regiões Editáveis - área e todo o código, pode ser alterada (área de conteúdo);Atributos Editáveis - dentro de uma tag bloqueada, você pode determinar certos atributos para se tornarem editáveis;Regiões Opcionais - conteúdo pode ou não ser exibido;Regiões de Repetição - certasáreas de um objeto bloqueado (tabela por exemplo) podem ser repetidas em um documento derivado de um Template.

Todas as Regiões precisam ser definidas no Template.

Criando Templates

Aconselho a você quando for criar seus Templates, seguir essas etapas:

1° etapa - finalize uma única página que contenha todos os elementos que você quer incluir no Template;2° etapa - utilize marcadores onde for possível (texto ou imagem). Eles o lembrarão quais elementos devem incluídos;3° etapa - finalize e insira o máximo que puder seu Template. Por exemplo, se em todas sua páginas um rodapé estará presente, termine-o;4° etapa - inclua informações <meta>. Os Sites de pesquisa usam as tags <metas> para fazer um levantamento do conteúdo de sua página.

Você pode criar seus Templates, indo em Menu Arquivo > Salvar como Modelo. O DW então cria uma pasta denominada Templates e o arquivo com a extensão ".dwt".

Veja o exemplo do site da Macromedia:

Note que temos 4 áreas distintas no Site: Menu, Flash, Conteúdo e Lateral. Vejamos agora o esboço dessa página:

Ao converter nosso esboço em um template, todas as áreas são bloqueadas. Temos então que criar nossas Regiões Editáveis. Em nosso exemplo teremos duas Regiões Editáveis: Conteúdo e Lateral. Para determinar uma Região Editável:

01. Selecione o texto, objeto ou área na página que deseja converter em uma região editável;

02. Escolha Menu Insert > Template Objects > Editable Region

Figura 02

O DW exibe a caixa de mensagem "New Editable Region". Nomeie sua região. O DW destaca a seleção criada.

Figura 03

Você pode criar uma Região Editável e, logo após editá-la, tornando uma Região Bloqueada. Para tal, coloque o cursor na Região Editável que deseja bloquear. Vá no Menu Modify > Templates > Remove Template Markup.

Agora que já aprendemos como criar nossas áreas editáveis, vamos aprender a incluir conteúdo nas mesmas. Você deve ir no Menu File > New > Aba Templates

Figura 04

Em "Templates for" escolha o site que esta trabalhando no momento, ao lado determine a sua Template (modelo) e em Preview veja sua Template. Clique em "Create" para criar um novo arquivo que poderá ser editado (em suas Regiões Editáveis). Salve-o com o nome que desejar. Se quiser manter o vínculo com a Template, deixe marcado a opção: "Update page when template changes". Note que nesse novo arquivo criado, as regiões Bloqueadas não podem ser editadas.

Em novas matérias, abordarei recursos mais avançados de uma Template, tais como: Criando e configurando atributos editáveis, explorando e modificando regiões de repetição etc..., mas isso é assunto para outras matérias

1. Selecione os botões que deseja colocar o menu pop-up.

2. Insira um link em cada item do menu, sendo que no lugar do endereço, ex: "link.htm" coloque esse sinal "#" (sem as aspas) repita esse passo em todos os itens que for inserir o menu pop up.

3. Após fazer isso em todos os itens, selecione o primeiro item e vá até a janela "TAG" Quarta janela de cima para baixo e na guia behaviors.

4. No guia behaviors vai até o E o item é ("Show Pop-up Menu") ai é só começar a configurar os menus.

 

Usando o Extension Manager

É possível baixar “extensões” na Web e instalá-las nos programas para obter algumas funções adicionais. Saiba como usá-lo

Antes de tudo iniciar o Extension Manager…

…e então, a primeira e única janela do Extension Manager se abrirá:

1. Clicando neste ícone poderá instalar novas extensões, apenas uma por vez.

2. Ao selecionar uma extensão já instalada, clicando nesse ícone é possível deletá-la.

3. Nesse menu, estará presente todos os programas da Macromedia instalados.

4. Clicando nesse ícone será direcionado para o site de intercâmbio da Macromedia e lá é possível baixar novas extensões.

5. Abrir o arquivo de ajuda do Extension Manager.

6. De acordo com o programa escolhido no menu acima (campo 3), é mostrado nesta área todas extensões já instaladas para tal aplicativo:

- Ativo/Inativo: Desmarcando essa “checkbox” poderá remover parcialmente a extensão do programa. Caso queira ativar novamente a mesma depois de um tempo marca-se essa caixa novamente.

- Extensões instaladas: Mostra o nome da extensão.

- Versão: Mostra a versão de determinada extensão.

- Tipo: Exibe o gênero da extensão, sendo estes: Comportamento(Behaviors) ou Comando.

- Autor: Por último é exibido o autor de determinada extensão.7. Nesta área é mostrada informações adicionais sobre a extensão como, por exemplo, a descrição de uso e sua função explicada detalhadamente.

Clicando no menu Arquivo, temos:

Instalar a extensão: Já descrito acima.

Empacotar extensão: Quando se cria uma nova extensão usa-se este recurso para criar um pacote da mesma e pode distribuí-la mais facilmente na Web.

Enviar a extensão: Ao clicar sobre este menu, será direcionado para uma página no site da Macromedia aonde se obtém mais informações de como enviar sua extensão.

Remover extensão: Já descrito acima.

Importar extensões: Usa-se quando desejar importar muitas extensões de uma só vez.

Ir para o intercâmbio da Macromedia: Já descrito acima.

Sair: Sairá do Extension Manager.

Vale lembrar que, para que as extensões instaladas apareçam no programa desejado, é preciso fechá-lo, caso esteja aberto, e iniciá-lo novamente.

:: Construção de uma Tabela com cantos arredondados ::Este tutorial e uma adaptação do original que escrevi, para publicação no site da DWOnline (uma comunidade Dreamweaver).

Neste artigo abordarei o uso do (FW) Fireworks e (DW) Dreamweaver para obter um efeito de bordas arredondadas em tabelas. O objetivo é "quebrar" aquela apresentação fria, quadrada e padrão do formato retangular das tabelas tão usadas para definir layouts. É uma maneira bastante simples de se obter um visual diferente e o exemplo que vou seguir tem como finalidade apresentar a técnica geral. Com criatividade você conseguirá outros efeitos. ESTE TUTORIAL SUPÕE QUE VOCÊ TEM NOÇÕES BÁSICAS DE MANIPULAÇÃO DAS FERRAMENTAS DO FW e do .

O efeito final que a que nos propomos está ilustrado na figura abaixo:

Uma tabela com os quatro cantos arredondados.

Vamos assumir que o fundo geral da página é na cor cinza escuro (#666666) e o fundo da tabela é na cor cinza claro (#EEEEEE), como mostrado na figura acima.

Observe na figura abaixo uma visão "raio X" da tabela:

Trata-se de uma tabela com 03 linhas e 03 colunas. A célula marcada com o número 1 destina-se ao conteúdo (um texto no caso mais comum ou uma figura ou um formulário, etc..) da tabela. As células marcadas com o número 2 são os quatro cantos arredondados da tabela. Vamos admitir para o nosso exemplo que as células dos cantos têm as dimensões de 25 x 25 pixels.

Vamos ao FIREWORKS, construir os cantos arredondados. Existem várias maneiras de você criar os quatro cantos. Não está em discussão neste tutorial qual a melhor delas. Se você tem uma maneira diferente desta que usei, vá em frente! Use-á.

Parte 1 - FIREWORKS

Abra o FW - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para Largura: 50 pixels - Altura: 50 pixels - Cor da Tela: transparente. Tecle OK.

Construa um quadrado de 50 x 50 ocupando todo o palco, sem bordas e com cor do preenchimento #666666. Atenção: o preenchimento do quadrado deve ser com mesma cor do fundo da página. A seguir construa um círculo com 50 px de diâmetro, sem bordas e com cor do preenchimento #EEEEEE. Atenção: o preenchimento do círculo deve ser com mesma cor do fundo da tabela. Você agora está com uma figura igual a mostrada abaixo:

Vamos agora transformar nossa figura em BITMAP. Selecione as duas figuras que você criou abra o menu "Modificar ===> Nivelar seleção" (ou tecle Ctrl+Alt+Shift+Z) e você agora tem uma imagen bitmap.

Ver figura abaixo: 1- Selecione a ferramenta "Cortar". 2- Ajuste suas dimensões para 25 x 25 e seu canto superior esquerdo em cima do canto superior esquerdo do bitmap criado. 3-Vamos cortar o canto arredondado superior esquerdo! Dê duplo clique dentro do "quadradinho" do cortar e Zás. 4- O primeiro canto está pronto. Exporte e salve com o nome sup_esq.gif

 

Vamos a construção dos três cantos restantes. Abra o arquivo recém criado sup_esq.gif Ver figura abaixo: Selecione o desenho e vá no menu "Modificar ===> Transformar ===> Inverter Horizontalmente"

Com essa ação você inverte a figura na horizontal e obtém o canto superior direito. "Salve" a figura como sup_dir.gif A estas alturas você já descobriu como construir as duas que faltam não é mesmo? O procedimento é o mesmo, selecione a figura que você acabou de "salvar" e vá ao menu "Modificar,Transformar,Inverter Verticalmente" você obtém a inf_dir.gif De modo semelhante obtenha inf_esq.gif

Abaixo estão os quatro cantos para você transferir para seu HD, caso não queira construí-los. Clique com botão direito do mouse sobre a figura e "Salvar figura como".

sup_esq.gif

sup_dir.gif

inf_esq.gif

inf_dir.gif

Parte 2 - DREAMWEAVER

Abra o - (Óbvio!) :-) Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento". Abra um novo documento (Página básica-HTML). Tecle OK.

Ajustando a cor do fundo da página; No menu "Modificar" selecione "Propriedades da Página" (ou tecle Ctrl+J), para abrir a caixa das Propriedades da página. Digite o Título da Página e ajuste a cor do fundo para #666666. Tecle OK Ver figura abaixo:

Inserindo a tabela; 1- selecione a aba "Tabelas"; 2- Clique no ícone das tabelas para abrir a caixa "Inserir Tabelas" (ou tecle Ctrl+Alt+T); 3- Ajuste os parâmetros de construção da tabela conforme a figura abaixo e tecle OK.

Selecione a aba "Layout" e a "Visualização padrão", para ter a tabela neste modo, na janela de visualização. Ver figura abaixo:

Vamos inserir as imagens dos cantos arredondados nas células correspondentes: Ver na figura acima: CÉLULA A - figura sup_esq.gif CÉLULA B - figura sup_dir.gif CÉLULA C - figura inf_esq.gif CÉLULA D - figura inf_esq.gif

Para inserir a figura na célula A: Clique dentro da célula; Menu "Inserir", "Imagem" (ou tecle Ctrl+Alt+I) para abrir a caixa de origem do arquivo de imagem. Selecione a imagem sup_esq.gif e tecle OK. Faça o mesmo com os três cantos restantes e você terá uma imagem como a figura abaixo:

Coloque o cursor em cima da linha 1 e arraste para a posição 2. Faça o mesmo de 3 para 4. Sua tabela ficará como na figura abaixo:

2- mude a cor do fundo da tabela digitando a cor #eeeeee no campo correspondente. 3- clique no ícone de tabela e sua tabela assumirá o aspecto abaixo:

Coloque o cursor na célula F e digite seu texto. Nota: Como você já deve ter percebido as células E e G podem ser preenchidas com conteúdo, mas sem ultrapassar sua altura, no caso 25 px. A célula F pode expandir-se a vontade sem interferir com os cantos arredondados. (Faça experiências para analisar!).

Abaixo um exemplo de aplicação de tabela com canto arredondado construido na tabela gerada conforme esta matéria:

E isso pessoal! E, agora a melhor parte do novo aprendizado. Os exercícios e pesquisas individuais e novas descobertas :-) Crie outros arquivos e experimente: ...coloque cantos chanfrados na sua tabela; ...construa uma figura para inserir nas células E e G (ver segundo desenho

acima), que se integre com os cantos!...e milhares de outras combinações! ...DESCUBRA A VERSATILIDADE DAS FOLHAS DE ESTILO EM CASCATA. Um abraço e até a próxima.