Tecnico em informatica

Disponível somente no TrabalhosFeitos
  • Páginas : 10 (2346 palavras )
  • Download(s) : 0
  • Publicado : 15 de novembro de 2011
Ler documento completo
Amostra do texto
DREAMWEAVER SPRY & WIDGETS
1

ÍNDICE
ÍNDICE .......................................................................................................................................... 2 ABRA SPRY – DREAMWEAVER ................................................................................................ 3

SpryMenuBar................................................................................................. 7 Spry Accordion ............................................................................................. 11 Spry Collapsible Panel.................................................................................. 12 Spry Tabbed Panels ..................................................................................... 13 SpryTooltip................................................................................................... 15 Spry – Validação de Formulário.................................................................... 16
ADOBE WIDGET BROWSER .................................................................................................... 22

Spry Image Slideshow.................................................................................. 25 Zoom em parte da imagem........................................................................... 33 Google Maps ................................................................................................ 36 Redes Sociais............................................................................................... 40

2

ABRA SPRY – DREAMWEAVER
Embora tenha sido lançado naversão CS3 do Dreamweaver as ferramentas Spry ainda são pouco utilizadas. O objetivo é apresentar a você como tirar proveito destas ferramentas. O framework Spry são bibliotecas no formato JavaScript e CSS, as quais permitem aos usuários do Dreamweaver desenvolver interfaces mais ricas e dinâmicas. Além de possibilitar a exibição de dados no formato XML e criar elementos interativos em páginas queexibem conteúdo dinâmico sem a necessidade de tais páginas se carregarem por completo. O Dreamweaver disponibiliza o Spry em duas perspectivas, uma para designers e outra para programadores. Os designers poderão criar efeitos visuais como Appear, Fade, Blinds (Up e Down), Grow, Shake, Slide, entre vários outros. Já os programadores terão facilidades ao trabalhar com o Ajax e na exibição de dadosarmazenados em arquivos XML. Além desses recursos, tantos para designers quanto para programadores, o Spry oferece alguns widgets que auxiliam na validação de formulários. Vamos analisar a interface do Dreamweaver e localizar os recursos do Spry. Ele possui um painel chamado Spry.

3

No painel DATA

No painel Forms

4

No painel Layout

5

Os demais recursos oferecidos pelo Sprysão os efeitos, effects. Ambos estão localizados na opção Effects do painel Behaviors.

Quando você seleciona algum recurso do spry no Documento window do Dreamweaver, o Property inspector é atualizado e exibe as configurações de recurso em questão.

6

O Spry são bibliotecas no formato JavaScript e CSS. O que significa dizer que para cada recurso do Spry há um arquivo JavaScript e outro CSSrelacionado. O arquivo JavaScript é o responsável pelo comportamento, interatividade, animação e o arquivo CSS se encarrega da estilização. Quando você utiliza algum recurso do Spry e posteriormente salva à página em questão, é exibido o painel Copy Dependent Files, o qual copia para o seu site, configurado no Dreamweaver, os arquivos relacionados ao recurso utilizado. Além de copiar os arquivos,ele lhe informa quais são os arquivos e exibe um alerta para lembrar-lhe de enviar os arquivos para o servidor na web.

Spry MenuBar
O primeiro componente Spry que vamos trabalhar é o MenuBar. Pelo painel Spry clique no componente,ele perguntará se quer criar um vertical ou horizontal.

7

Escolha e clique em OK.

Salve seu arquivo para que ele gere os demais arquivos necessários....
tracking img