SlideShare une entreprise Scribd logo
1  sur  11
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 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.
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:
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
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>

Contenu connexe

Similaire à Class18

Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Alexandre Marreiros
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizationsChris Love
 
Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkWebvanta
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slowdmethvin
 
J day la 2011 webmatrix
J day la 2011 webmatrixJ day la 2011 webmatrix
J day la 2011 webmatrixAlice Pang
 
Joomla! Day Los Angeles 2011 WebMatrix
Joomla! Day Los Angeles 2011 WebMatrixJoomla! Day Los Angeles 2011 WebMatrix
Joomla! Day Los Angeles 2011 WebMatrixAlice Pang
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesMark Roden
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5Ron Reiter
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutionswoutervugt
 
Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolboxSkysoul Pty.Ltd.
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Patrick Meenan
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web PresenceSusan Boone
 

Similaire à Class18 (20)

Semantic UI Introduction
Semantic UI IntroductionSemantic UI Introduction
Semantic UI Introduction
 
Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1 Microsoft PT TechRefresh html win8.1
Microsoft PT TechRefresh html win8.1
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Building Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 FrameworkBuilding Responsive Websites with the Bootstrap 3 Framework
Building Responsive Websites with the Bootstrap 3 Framework
 
Building Web Interfaces
Building Web InterfacesBuilding Web Interfaces
Building Web Interfaces
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean SlowPrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 - Web Doesn't Mean Slow
 
J day la 2011 webmatrix
J day la 2011 webmatrixJ day la 2011 webmatrix
J day la 2011 webmatrix
 
Joomla! Day Los Angeles 2011 WebMatrix
Joomla! Day Los Angeles 2011 WebMatrixJoomla! Day Los Angeles 2011 WebMatrix
Joomla! Day Los Angeles 2011 WebMatrix
 
jQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPagesjQuery - the world's most popular java script library comes to XPages
jQuery - the world's most popular java script library comes to XPages
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Multi screen HTML5
Multi screen HTML5Multi screen HTML5
Multi screen HTML5
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Building Web Hack Interfaces
Building Web Hack InterfacesBuilding Web Hack Interfaces
Building Web Hack Interfaces
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutions
 
Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolbox
 
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...Google I/O 2012 - Protecting your user experience while integrating 3rd party...
Google I/O 2012 - Protecting your user experience while integrating 3rd party...
 
Kiely mitchell
Kiely mitchellKiely mitchell
Kiely mitchell
 
Web (UI) Development
Web (UI) DevelopmentWeb (UI) Development
Web (UI) Development
 
Leverage Your Online Web Presence
Leverage Your Online Web PresenceLeverage Your Online Web Presence
Leverage Your Online Web Presence
 

Plus de Jiyeon Lee (17)

Cultural conflict resolution
Cultural conflict resolutionCultural conflict resolution
Cultural conflict resolution
 
Class22
Class22Class22
Class22
 
Class 21
Class 21Class 21
Class 21
 
Class 21
Class 21Class 21
Class 21
 
Class 20
Class 20Class 20
Class 20
 
Class19
Class19Class19
Class19
 
Class 17
Class 17Class 17
Class 17
 
Class14
Class14Class14
Class14
 
Class 12
Class 12Class 12
Class 12
 
Class11
Class11Class11
Class11
 
Class 10
Class 10Class 10
Class 10
 
Class8
Class8Class8
Class8
 
Class7
Class7Class7
Class7
 
Class6
Class6Class6
Class6
 
Class5
Class5Class5
Class5
 
Class4
Class4Class4
Class4
 
Class2
Class2Class2
Class2
 

Dernier

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 

Dernier (20)

A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 

Class18

  • 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. 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. 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. 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-->
  • 7. Widget Behavior with JavaScript
  • 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. 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. 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. Automatically Added… <script type="text/javascript"> <!-- var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"spry/SpryMenuBarDownHover.gif", imgRight:"spry/SpryMenuBarRightHover.gif"}); //--> </script>