Class 18
Managing your site
Your website is growing bigger…
You have several HTML pages…
You have many images…
You have many CSS fi...
SPRY
About Spry widgets
A Spry widget is a page element that provides a
richer user experience by enabling user
interactio...
How does it work?
A Spry widget comprises the following parts:
Widget structure An HTML code block that defines the
struct...
Widget structure with HTML code
<!--SPRY Navigation-->
<div id="sprynav" class="grid_12">
<ul id="MenuBar1" class="MenuBar...
Widget styling with CSS
Widget Behavior with JavaScript
How do I put it on my site?
Here are the proper steps:
1. Define your site with Manage Site
2. From Advanced tab, set wher...
Automatically Added…
In the header:
<script src="spry/SpryMenuBar.js" type="text/javascript"></script>
<link href="spry/Sp...
Automatically Added…
In the body:
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a> </li>
<li><a href=...
Automatically Added…
<script type="text/javascript">
<!--
var MenuBar1 = new
Spry.Widget.MenuBar("MenuBar1",
{imgDown:"spr...
Upcoming SlideShare
Loading in...5
×

Class18

672

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
672
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Class18"

  1. 1. Class 18
  2. 2. Managing your site Your website is growing bigger… You have several HTML pages… You have many images… You have many CSS files… On top of that, now you’ll need javascript files… How Can You Manage Your Site Effectively? by using ‘Manage Sites’!
  3. 3. SPRY About Spry widgets A Spry widget is a page element that provides a richer user experience by enabling user interaction. http://labs.adobe.com/technologies/spry/samples/#widgets
  4. 4. How does it work? A Spry widget comprises the following parts: Widget structure An HTML code block that defines the structural composition of the widget. Widget behavior JavaScript that controls how the widget responds to user-initiated events. Widget styling CSS that specifies the appearance of the widget.
  5. 5. Widget structure with HTML code <!--SPRY Navigation--> <div id="sprynav" class="grid_12"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">Home</a> </li> <li><a href="#“ class="MenuBarItemSubmenu">Featured</a> <ul> <li><a href="#">artist</a></li> <li><a href="#">illust</a></li> <li><a href="#">event</a></li> </ul> </li> <li><a href="#">Articles</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="clear">&nbsp;</div> <!--End SPRY Navigation-->
  6. 6. Widget styling with CSS
  7. 7. Widget Behavior with JavaScript
  8. 8. How do I put it on my site? Here are the proper steps: 1. Define your site with Manage Site 2. From Advanced tab, set where your Spry Assets folder will go 3. Decide which widget will be useful for your site 4. Insert Spry Widget 5. Customize the styles
  9. 9. Automatically Added… In the header: <script src="spry/SpryMenuBar.js" type="text/javascript"></script> <link href="spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
  10. 10. Automatically Added… In the body: <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">Home</a> </li> <li><a href="#" class="MenuBarItemSubmenu">Featured</a> <ul> <li><a href="#">artist</a></li> <li><a href="#">illust</a></li> <li><a href="#">event</a></li> </ul> </li> <li><a href="articles.html">Articles</a> </li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  11. 11. Automatically Added… <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"spry/SpryMenuBarDownHover.gif", imgRight:"spry/SpryMenuBarRightHover.gif"}); //--> </script>

×