Dreamweaver CS3 integrated spry renderings tutorial

In the popular era of Web and Ajax, Adobe's lightweight Ajax framework spry is undoubtedly the most exciting, especially when it is integrated into Dreamweaver cs3.

Excluding spry XML data interaction and spry window components related to user interaction, the first thing that gets Users Started is the Ajax visual effect of spry. In Dreamweaver CS3, click the relevant button to easily add visual transitions to page elements, so that they can expand selection, collapse, fade, highlight, and so on.

1, spry menu bar

You can use this button to create a horizontal or vertical webpage drop-down or pop-up menu. The sprymenubar. js script file integrated by the spry framework does not need to be compiled.CodeAt the same time, menu columns adopt HTML Structure Based on Web standards for convenient editing.

Horizontal menu test address: http://www.dreamweavercs3.cn/demo/spry/spry_01.html

Longitudinal menu test address: http://www.dreamweavercs3.cn/demo/spry/spry_02.html

2, spry tabbed panels

For Windows operating system users, the tab function is not unfamiliar, but it is not very easy to implement this function in the web page. Now spry tabbed panels can be quickly completed, in Dreamweaver CS3, you can directly select the content of each main tab to edit.

Test address: http://www.dreamweavercs3.cn/demo/spry/spry_03.html

3, spry accordion

We have all used QQ chat software. When we select "QQ friends", "QQ Group", or "recent contacts, click this name to slide up and down the selected content without changing the entire window. Similarly, in Web applications, we once racked our brains for these "QQ Menus". Now we can use spry accordion for ease.