Coluna Dreamweaver – Spry Widget – Menu Bar

Introdução

Salve Pessoal! Vamos dar inicio ao nosso primeiro tutorial da serie sobre o Spry framework, nesse tutorial vamos fala sobre o Spry Menu Bar, e nos próximos vamos ver cada uma das treze opções do Spry framework, uma por uma.

Pré-requisito

Dreamweaver CS3, para baixar a versão trial clique aqui

Objetivo

Capacitar a criar menus horizontal e vertical com o Spry Menu Bar, conforme nesse exemplo

Conceitos

O Spry é o framework da Adobe para desenvolvimento usando Ajax e está licenseado sob BSD License. O Spry foi projetado com a intenção de facilitar o desenvolvimento, ele incluir bibliotecas de código, linguagens de script e outros recursos para ajudar a desenvolver diferentes componentes de um projeto. O Spry Menu Bar facilitar a criação de menus.

Conteúdo

Antes de iniciar vamos definir o local onde o Dreamwever vai armazenar os arquivos que são gerado pelo Spry framework para criação dos menus. Para definir o local vamos seguir essas etapas

• Na barra de menus clique na opção Site
• Clique em Manage Sites

• Selecione o site e clique no botão Edit…
• Selecione a opção Spry do lado esquerdo, é a ultima opção
• Agora do lado direito na opção Spry assets folder clique no ícone da pasta e informe o local onde o Dreamweaver vai armazenar os arquivos do Spry framework

Criando o Menu

• Na barra inserir do Dreamweaver clique na guia Spry
• Clique no botão Spry Menu Bar

Uma nova janela vai se abrir para que possa se escolhido um dos dois tipos de menu disponíveis, que são o menu vertical e horizontal

• Clique uma das duas opções
• Clique em OK

Observe que o Dreamweaver já montou o menu horizontal ou vertical na página, clique na guia Spry Menu Bar que esta em volta do menu na cor azul, e depois observe o painel de propriedades

Configurando o Menu

1. Nome do menu
2. Botões para adicionar ou remover itens ao menu do primeiro nível, o sinal de mais adiciona e o sinal de menos remove
3. Botões para ordenar os itens do menu do primeiro nível
4. Caixa que mostrar os itens do menu do primeiro nível, selecione um item nessa caixa para pode mudar seu nome e adicionar um link nas etapas 7, 8 e 9
5. Caixa com as itens do segundo nível do menu, possui os botões para adicionar ou remover itens e para ordenar os itens, selecione um item nessa caixa para pode mudar sua configuração nas etapas 7, 8 e 9
6. Caixa com as itens do terceiro nível do menu, possui os botões para adicionar ou remover itens e para ordenarmento, selecione um item nessa caixa para pode mudar sua configuração nas etapas 7, 8 e 9
7. Nome do item ou nome da opção do menu selecionado
8. Link do item selecionado
9. Titulo e Target do item selecionado
10. Botão para remover o estilo do menu

Personalizando o Menu

Para personalizar o menu, utilize o painel CSS do Dreamweaver (Shift+F11 ou Window>CSS Styles)

Considerações Finais

Qualquer comentário que vocês deixarem será bem vindo. Deixem seus pedidos de tutorias para as próximas colunas clicando aqui
Autor: Marcelo Souza Ramos – Colunista Dreamweaver do Portal MXSTUDIO
Visite meu blog www.marceloramos.blog.br. Qualquer dúvida envie um e-mail para marcelo@marceloramos.blog.br ou acesse o nosso fórum