Operation Manual

450
USING DREAMWEAVER
Building Spry pages visually
Last updated 3/28/2012
You can also click the Spry Repeat List button in the Spry category in the Insert panel.
2 Select the container tag you want to use: UL, OL, DL, or SELECT. The other options vary depending on which
container you choose. If you choose SELECT, you must define the following fields:
• Display Column: This is what users see when they view the page in their browsers.
• Value Column: This is the actual value sent to the background server.
For example, you can create a list of states and show users Alabama and Alaska, but send AL or AK to the server. You
can also use the SELECT as a navigational tool and show product names such as “Adobe Dreamweaver” and “Adobe
Acrobat” to users, but send URLs such as “support/products/dreamweaver.html” and
“support/products/acrobat.html” to the server.
3 Choose your Spry data set from the menu.
4 Choose the columns you want to display.
5 Click OK to display a repeat list region on your page. In Code View, you can see that HTML <ul>, <ol>, <dl> or
FORM select tags are inserted into your file.
Note: If you try to insert a repeat list region but you haven’t created a region, Dreamweaver prompts you to add one before
inserting the table. All Spry data objects must be contained within regions.
Adding Spry effects
Spry effects overview
Spry effects are visual enhancements that you can apply to almost any element on an HTML page using JavaScript.
Effects are often used to highlight information, create animated transitions, or alter a page element visually for a
duration of time. You can apply effects to HTML elements without needing additional custom tags.
Note: To apply an effect to an element, it must be currently selected or it must have an ID. If, for example, you are
applying highlighting to a
div tag that is not currently selected, the div must have a valid ID value. If the element doesn’t
already, you will need to add one to the HTML code.
Effects can alter an element’s opacity, scale, position, and styling properties such as background color. You can create
interesting visual effects by combining two or more properties.
Because these effects are Spry-based, when a user clicks on an element with an effect, only that element is dynamically
updated, without refreshing the entire HTML page.
Spry includes these effects:
Appear/Fade Makes an element appear or fade away.
Highlight Changes the background color of an element.
Blind Simulates a window blind that goes up or down to hide or reveal the element.
Slide Moves the element up or down.
Grow/Shrink Increases or reduces the size of the element.
Shake Simulates shaking the element from left to right.
Squish Makes the element disappear into the upper-left corner of the page.