How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css,...
Transcript of How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css,...
![Page 1: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/1.jpg)
How to Build a Site StyleWebGUI LIVE!
![Page 2: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/2.jpg)
Where do we start?
• Create a design
• Turn it into HTML & graphics
• Introduce WebGUI Components
• Putting it all together
• A Closer Look
![Page 3: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/3.jpg)
Creating a Design The Big Question...
What are my limitations when desiging for WebGUI?
NONEIf anything, it gives more freedom
![Page 4: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/4.jpg)
Our Example
![Page 5: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/5.jpg)
• Photoshop Slices
• Text Editors (Notepad++, etc)
• WYSIWYG???
HTML & GraphicsBreak it up however you normally would
Such As...
![Page 6: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/6.jpg)
• Login Fields
• Areas that might have security
• Graphics
• Where is your content
• Navigation systems
HTML & GraphicsBreak it up however you normally would
Keep in mind
![Page 7: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/7.jpg)
• Where to put them?
• WebGUI Templates define their look... to a point
• Easy to add via Macros
HTML & GraphicsBreak it up however you normally would
Login Fields
![Page 8: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/8.jpg)
• Can provide restricted access to...
• Special Links
• Login areas
• Special messages
HTML & GraphicsAreas that might have security
Remember WebGUI Groups
![Page 9: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/9.jpg)
• Two different ways to reference them
• Both use macros
HTML & GraphicsGraphics
What about em?
![Page 10: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/10.jpg)
• Anything that ISN’T part of your design
• If you put content into a style, it shows up EVERYWHERE that style is used
• You insert content using template variables
HTML & GraphicsWhere is your content?
So, what exactly IS content?
![Page 11: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/11.jpg)
• Remember, WebGUI navigation is dynamic
• Automatically can add or remove pages
• Navigation is referenced by using a Macro
HTML & GraphicsNavigation Systems
Just the highlights...
![Page 12: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/12.jpg)
• Allow logins, access to your account, turn admin-mode on
• Insert graphics, navigation, restricted content
• Display page titles
• And more!
Introducing WebGUI ComponentsMacros
Helpful, and reusable, pieces of code that help you...
![Page 13: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/13.jpg)
• Login - ^L(...); • Simple way to call the default login fields
Introducing WebGUI ComponentsMacros
Admin and Account Macros
![Page 14: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/14.jpg)
• Login - ^L(...); • Simple way to call the default login fields
• Account - ^a(...);• Lets the user click on a link to access their account
Introducing WebGUI ComponentsMacros
Admin and Account Macros
![Page 15: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/15.jpg)
• Login - ^L(...); • Simple way to call the default login fields
• Account - ^a(...);• Lets the user click on a link to access their account
• Gateway URL - ^/;• Returns the URL of the domain
Introducing WebGUI ComponentsMacros
Admin and Account Macros
![Page 16: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/16.jpg)
• Login - ^L(...); • Simple way to call the default login fields
• Account - ^a(...);• Lets the user click on a link to access their account
• Gateway URL - ^/;• Returns the URL of the domain
• Admin Toggle - ^AdminToggle(...);• Lets you flip to Admin mode and back
Introducing WebGUI ComponentsMacros
Admin and Account Macros
Look for them in WebGUI Help, there’s more!...
![Page 17: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/17.jpg)
• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)
• <img src=”myImage.gif” /> becomes...
• ^AssetProxy(myImage.gif);
Introducing WebGUI ComponentsMacros
Referencing Objects
![Page 18: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/18.jpg)
• ^AssetProxy(...); • Grabs an object and displays it (and it’s smart too)
• <img src=”myImage.gif” /> becomes...
• ^AssetProxy(myImage.gif);
• ^FileUrl(...);• Returns the URL of whatever you give it
• <img src=”myImage.gif” /> becomes...
• <img src=”^FileUrl(myImage.gif);” />
Introducing WebGUI ComponentsMacros
Referencing Objects
![Page 19: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/19.jpg)
^AssetProxy(); vs. ^FileUrl();• Why use ^AssetProxy()?
• Grabs and processes passed values
• Recognizes what is being passed to it and creates necessary tags to display it
• Ex- <img>
• Great for quickly referencing assets
![Page 20: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/20.jpg)
^AssetProxy(); vs. ^FileUrl();• Why use ^AssetProxy()?
• Grabs and processes passed values
• Recognizes what is being passed to it and creates necessary tags to display it
• Ex- <img>
• Great for quickly referencing assets
• Why use ^FileUrl()?
• Returns the full URL (minus the domain) of the passed Asset
• Draws no tags at all
• Great for giving you more control in your template or for CSS backgrounds
![Page 21: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/21.jpg)
• Page - ^Page(...); • Pass it menuTitle and you’ll display the
menu title, pass it title and you’ll get the title• ^Page(title); becomes...
• An Example Title
Introducing WebGUI ComponentsMacros
Page Titles
![Page 22: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/22.jpg)
• Page - ^Page(...); • Pass it menuTitle and you’ll display the
menu title, pass it title and you’ll get the title• ^Page(title); becomes...
• An Example Title
• Company - ^c;• Returns the company name in your
settings• ^c; becomes...
• Widgets Inc.
Introducing WebGUI ComponentsMacros
Page Titles
![Page 23: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/23.jpg)
• Page - ^Page(...); • Pass it menuTitle and you’ll display the
menu title, pass it title and you’ll get the title• ^Page(title); becomes...
• An Example Title
• Company - ^c;• Returns the company name in your
settings• ^c; becomes...
• Widgets Inc.
Introducing WebGUI ComponentsMacros
Page Titles
<title> Widgets Inc - Home</title>
<title> ^c; - ^Page(title);</title>
![Page 24: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/24.jpg)
• Backup your work
• Keep your .htm file as a reference
Putting It All TogetherThe Beginning
Prep Work
![Page 25: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/25.jpg)
• Backup your work
• Keep your .htm file as a reference
• Create a copy of that orginal .htm file
• Called the ‘Working Copy’
• Insert the macros here!
Putting It All TogetherThe Beginning
Prep Work
![Page 26: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/26.jpg)
• Backup your work
• Keep your .htm file as a reference
• Create a copy of that orginal .htm file
• Called the ‘Working Copy’
• Insert the macros here!
• Create a WebGUI folder in your asset manager to store your-
• Template
• Images
• Snippets
Putting It All TogetherThe Beginning
Prep Work
![Page 27: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/27.jpg)
• <tmpl_var head.tags>
• Inserts necessary code to handle editing on a page
• Needs to be in your <head></head> tags
Putting It All TogetherThe Middle
Setup Admin Mode and Content
![Page 28: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/28.jpg)
• <tmpl_var head.tags>
• Inserts necessary code to handle editing on a page
• Needs to be in your <head></head> tags
• ^AdminBar();
• Places the Admin bar at the left of the page in admin mode
• Should be right after your <body> tag
Putting It All TogetherThe Middle
Setup Admin Mode and Content
![Page 29: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/29.jpg)
• <tmpl_var head.tags>
• Inserts necessary code to handle editing on a page
• Needs to be in your <head></head> tags
• ^AdminBar();
• Places the Admin bar at the left of the page in admin mode
• Should be right after your <body> tag
• <tmpl_var body.content>
• This creates the area for your content
• Put it wherever you want your content to be (once!)
Putting It All TogetherThe Middle
Setup Admin Mode and Content
![Page 30: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/30.jpg)
• Use ^AssetProxy(); and ^FileUrl for your images
• ^AssetProxy(red.gif);
Putting It All TogetherThe Middle, Still
External References
![Page 31: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/31.jpg)
• Use ^AssetProxy(); and ^FileUrl for your images
• ^AssetProxy(red.gif);
• Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files
• background-image: url(‘^FileUrl(red.gif);’);
Putting It All TogetherThe Middle, Still
External References
![Page 32: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/32.jpg)
• Use ^AssetProxy(); and ^FileUrl for your images
• ^AssetProxy(red.gif);
• Use ^FileUrl(); to reference javascripts, CSS files or backgrounds in CSS files
• background-image: url(‘^FileUrl(red.gif);’);
• Use ^AssetProxy(); to pull in Snippets and your Navigation
Putting It All TogetherThe Middle, Still
External References
![Page 33: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/33.jpg)
• Use ‘File Pile’ to upload images, CSS, Javascripts to WebGUI
Putting It All TogetherThe End
Installing the Template
![Page 34: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/34.jpg)
• Use ‘File Pile’ to upload images, CSS, Javascripts to WebGUI
• Create a template from the Asset Manager
• Be sure to select ‘style’!
Putting It All TogetherThe End
Installing the Template
![Page 35: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/35.jpg)
Putting It All TogetherThe Template
![Page 36: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/36.jpg)
Putting It All TogetherThe Template
![Page 37: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/37.jpg)
Putting It All TogetherThe Template
![Page 38: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/38.jpg)
• Use ‘File Pile’ to upload images, CSS, Javascripts to WebGUI
• Create a template from the Asset Manager
• Be sure to select ‘style’!
• Create a Navigation configuration from the Asset Manager
• Remember its URL!
Putting It All TogetherThe End
Installing the Template
![Page 39: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/39.jpg)
A Few Important BitsNavigation
&Snippets
![Page 40: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/40.jpg)
• Include a navigation system by ^AssetProxy();
• Many available pre-installed
• You can always create your own
• Comes in 2 parts-
• Navigation Configuration
• Navigation Style Template
A Word About Navigation
![Page 41: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/41.jpg)
• Navigation Configurations
• This is what is AssetProxy’d
• Controls what pages will be displayed
A Word About Navigation
![Page 42: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/42.jpg)
• Navigation Configurations
• This is what is AssetProxy’d
• Controls what pages will be displayed
• Navigation Style Template
• Associated with the Configuration
• Controls the look of your navigation
A Word About Navigation
![Page 43: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/43.jpg)
Behold the power of Snippets
• Can be used for external file referencing
• CSS, Javascript, XML
• Just give the appropriate URL...
• .css, .js., .xml
![Page 44: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/44.jpg)
Behold the power of Snippets
• Can be used for external file referencing
• CSS, Javascript, XML
• Just give the appropriate URL...
• .css, .js., .xml
• And select the appropriate MIME type
• text/css, text/javascript, text/xml
![Page 45: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/45.jpg)
Behold the power of Snippets
• Can be used for external file referencing
• CSS, Javascript, XML
• Just give the appropriate URL...
• .css, .js., .xml
• And select the appropriate MIME type
• text/css, text/javascript, text/xml
• Why use a snippet instead of uploading a file?
• Speed and Ease
• Include template variables and macros
![Page 46: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/46.jpg)
Behold the power of Snippets
• Can be used for external file referencing
• CSS, Javascript, XML
• Just give the appropriate URL...
• .css, .js., .xml
• And select the appropriate MIME type
• text/css, text/javascript, text/xml
• Why use a snippet instead of uploading a file?
• Speed and Ease
• Include template variables and macros
• Restrict sections of your template
• You can set the security properties for specific groups
![Page 47: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/47.jpg)
A Closer Look at our Example
![Page 48: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/48.jpg)
The HeadA Closer Look at our Example
![Page 49: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/49.jpg)
The HeadA Closer Look at our Example
WebGUIComponents
![Page 50: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/50.jpg)
The Body, Part 1A Closer Look at our Example
![Page 51: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/51.jpg)
The Body, Part 1A Closer Look at our Example
WebGUIComponents
![Page 52: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/52.jpg)
The Body, Part 2 - HTMLA Closer Look at our Example
![Page 53: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/53.jpg)
The Body, Part 2 - HTML with WebGUIA Closer Look at our Example
WebGUIComponents
![Page 54: How to Build a Site Style · • CSS, Javascript, XML • Just give the appropriate URL... •.css, .js., .xml • And select the appropriate MIME type • text/css, text/javascript,](https://reader033.fdocuments.us/reader033/viewer/2022042910/5f3fe945dec4f812237cde10/html5/thumbnails/54.jpg)
Questions?