Alvo Web » Dreamweaver

Spry collapsible painel

admin — Thu, 31 Jan 2008 18:49:10 +0000

Autor: Felipe Alencar

Spry collapsible painel è assim que o Dreamweaver CS3 denomina o efeito.
Com certeza você já deve ter visto esse efeito e se ainda não conseguiu reproduzi-lo agora chegou a hora.
É bem fácil de se usar e customizar!

Versão: Dreamweaver CS3 e 8
Dificuldade: Médio. Conhecimentos em HTML, CSS e lógica Js.

Como se trata de um recurso nativo do Dreamweaver 8 e CS3, resolvi colocá-lo na categoria do Dreamweaver, porem esse tutorial trabalha com Divs HTML, CSS, e Javascript.
Na verdade é bem fácil, porem se você não conhecer as ferramentas acima terá dificuldades em customizar.

Veja funcionando:

Clique aqui, você adicionar uma imagem se quiser.

Loren Ipsum neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”
“There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain….”

Vamos ao que interessa.

Abra seu Dreamweaver CS3, crie um novo arquivo e salve com um nome de sua preferência.
O nosso se chama: “index.htm”

Com o “index.htm” aberto escolha a visualização Code ou Código e clique na guia “spry”
Depois clique na opção “Spry collapsible painel” e tenha certeza de que o código foi inserido dentro da tag

Note que no momento em que você clicou na opção “Spry collapsible painel” foi criada uma pasta chamada “SpryAssets” ela contem os arquivos:

SpryCollapsiblePanel.css
SpryCollapsiblePanel.js

No final do código da sua “index.htm” foi inserido um código que faz a referência ao seu spry.

<script type="text/javascript">
	
script>

Pronto, seu script já esta funcionando. Aperte f12 no seu Dreamweaver e teste no seu browser.

Algumas customizações rápidas no documento javascript “SpryCollapsiblePanel.js”

Na linha 341 você pode ajustar a velocidade de abertura do seu efeito. O valor é em milisegundos, quanto menor é mais rápido.

Na linha 55 você pode definir que a sua

começa fechada por exemplo.
Basta inserir o valor “false” como da imagem acima. O padrão é “true”.

No arquivo CSS “spryCollapsiblePanel.css” você configura o estilo e detalhes visuais do seu spry.
Não vou citar pois aqui fica a vontade e a criatividade de cada um ok. O código é bem simples.

Baixe os arquivos funcionando aqui.

Galera, o Download esta dando pau no Firefox2, se alguem souber como contornar, poste por favor!

Abs, e até a próxima!

Felipe Alencar
next4.com.br
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Como criar um Favicon

admin — Tue, 02 Oct 2007 18:25:39 +0000

Autor: Felipe Alencar

Tema: Criar Favicon.
Dificuldade: básico.
Recomendações: Para um bom aproveitamento deste artigo, é necessário ter conhecimento básico Photoshop.
Testado e Aprovado: IE7.0 FireFox2 e Opera 9.0

Arquivos:
1 arquivo HTML que contem o seu formulário;
1 Imagem do seu favicon 16×16 px (Preferência .GIF)

Nesse tutorial vamos aprender a criar um favicon, na minha opinião todo site deve ter um.
No atual momento eles podem ser visualizados nos navegadores IE7, Firefox2 e Opera. No IE6 não tem suporte. Nos demais navegadores nós não testamos.

Abra seu editor de imagem preferido, crie uma imagem com dimensões de 16px de largura (width) 16px de altura (height) um quadrado.

Esse é o tamanho padronizado para o Favicon, dentro deste espaço você deve fazer a sua arte.
Uma vez pronto você deve salvar como “favicon.gif”

Perceba que esse arquivo favicon.gif ainda não é o Favicon, pois a terminação do arquivo é “favicon.ico” você vai gera-lo em uma ferramenta logo abaixo.

Acesse o site HTMLKIT e utilize a ferramenta do site para gerar seu “favicon.ico”

Pronto, agora que o seu Favicon.ico esta gerado, basta acessar sua página HTML e fazer um “include” (inclusão do arquivo) do seu favicon.ico na sua página.

Abra sua página HTML localize as tags e insira entre elas o seguinte código:

Obs: Não esqueça de subir o favicon no diretório raiz do site.

Se você resolveu trocar o favicon e o antigo continua aparecendo no seu navegador, você deve limpar o cache do seu navegador para que ele mostre o novo favicon.

um abraço e até a próxima

Felipe Alencar
Next4.com.br
Equipe Alvo Web

O Conteúdo do Alvo Web Developers está licenciada sob uma Creative Commons Atribuição-Uso Não-Comercial-Compartilhamento pela mesma Licença 2.5 Brasil License.

Backup do dreamweaver

admin — Thu, 30 Aug 2007 16:03:59 +0000

Cansados de formatar a maquina e perder a configuração do dreamweaver e ter de fazer tudo novamente?

Faça um backup do Dreamweaver antes de formatar!

1) Habilite a opção de visualização de pastas no seu windows. “Mostrar arquivos ocultos”

2) Acesse c:\documents and setings\”seu user”\dados de aplicativos\adobe\Dreamweaver\configuration

3) Salve o conteúdo desta pasta e sobrescreva na nova instalação.

Este procedimento salva: Behaviors, extensions, componentes, projetos de sites entre outras informações.

Equipe Alvoweb.