• Save

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Class18

on

  • 848 views

 

Statistics

Views

Total Views
848
Views on SlideShare
834
Embed Views
14

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 14

https://bbhosted.cuny.edu 14

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Class18 Class18 Presentation Transcript

  • Class 18
  • 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’!
  • 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
  • How does it work?
    A Spry widget comprises the following parts:
    Widget structure An HTMLcode block that defines the structural composition of the widget.
    Widget behavior JavaScriptthat controls how the widget responds to user-initiated events.
    Widget styling CSS that specifies the appearance of the widget.
  • 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-->
  • Widget styling with CSS
  • Widget Behavior with JavaScript
  • How do I put it on my site?
    Here are the proper steps:
    Define your site with Manage Site
    From Advanced tab, set where your Spry Assets folder will go
    Decide which widget will be useful for your site
    Insert Spry Widget
    Customize the styles
  • Automatically Added…
    In the header:
    <script src="spry/SpryMenuBar.js" type="text/javascript"></script>
    <link href="spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
  • 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>
  • Automatically Added…
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"spry/SpryMenuBarDownHover.gif", imgRight:"spry/SpryMenuBarRightHover.gif"});
    //-->
    </script>