The WebGUI Designers Guide was written with the Web Designer in mind. It was written for an experienced web designer, and assumes you have a working knowledge of HTML and CSS. This book also assumes that you have a basic working knowledge of WebGUI's user interface as described in the WebGUI Content Managers Guide. While we do provide some basic references for HTML, CSS, and WebGUI in this book complete references of those subjects is well beyond the scope of this document.
WebGUI was built to avoid placing limitations on the designer. Similarly, we don't want this book to limit your creativity. This book is part reference, part tutorial, and part cookbook, but it is by no means a complete guide to everything you can do as a designer. With this book our intent is to give you a good understanding of what tools you have at your disposal and how to use them, and provide some examples of how to put them together to make a web site. Ultimately, it's your creativity that makes the site unique and compelling.
collaboration system (3)
css (49)
folder (1)
macros (2)
navigation (5)
snippet (1)
style (2)
template variables (1)
templates (10)
XHTML
XHTML Example Page
CSS
CSS Syntax
CSS Example 1
Classes
CSS Example 2
CSS Example 2, Using it in XHTML
CSS Example 2, In Action
CSS Example 3
CSS Example 3, Using it in XHTML
CSS Example 3, In Action
IDs
CSS Example 4
CSS Example 4, Using it in XHTML
CSS Example 4, In Action
The Nature of Cascading
CSS Example 5
Example 5, Using it in XHTML
Target Even More Specifically
CSS Example 6
CSS Example 6, Using it in XHTML
CSS Example 6, In Action
Other Example
XHTML
CSS In Action
Programming Logic
The IF Statement
The IF/ELSE Statement
The IF/NOT Statement
The IF/ELSE IF Statement
Conclusion
The Choices
Code Example 1
Drab HTML
Exact Same HTML Modified with CSS
Same HTML, But With Different CSS
So then, why use a table?
Example 1, Tables
Example 1, CSS
Table Advantages
The Big Advantage of Tables
Can’t I just keep on using tables?
Reasons to use table-free layouts
Conclusion
WebGUI Macros and Template Variables
Variables
Title Variable in an Article Template
The Basics of WebGUI Template Variables
Syntax of a Template Variable
Example Template Variables
Navigation Asset Settings
Loops
Basic Page Loop
Loop Syntax
Logic Tests
The If Statement
The If Statement with a Variable
The IF/ELSE Statement
IF/ELSE Example
The IF/ELSE IF Statement
Macros
Macro Example
Passing a Parameter to a Macro
Passing Multiple Parameters to a Macro
Macro Examples
Using RandomAssetProxy
Conclusion
A Clean Slate
Setting Up Your Workspace
Steps to Make Your Space
What do you Need?
Will you have pages that need different graphical headers? Different navigations?
How many levels deep will the site be? Or in other words, will the site be deep or shallow?
Dropdown Menu
Crumbtrail
Contextual Navigation
What type of content do I plan to have on this site? Do I care?
Example of the Head Block
Building Templates
Creating a Template
Copying Indent Nav
Create a Template from Scratch
Putting it Together
Conclusion
Get Started
First Steps
Choosing Whether to Use AssetProxy or FileUrl
ˆAssetProxy();
ˆFileUrl();
Installing the Template
WebGUI URLs
Creating a WebGUI Workspace
Preview Your Template
Navigation
Navigation Configurations
Configuring Your Navigation Configuration
Choose a Navigation Style Template
Options for CSS and Javascripts
CSS Snippets
Conclusion
Making a Page Layout Part of Your Design
The Example
Admin Mode On
Page Layout Template
Template Code – Chunk 1
Template Code – Chunk 2
Template Code – Chunk 3
Template Code – Chunk 4
Template Code – Chunk 5
Template Code – Chunk 6
Template Code – Chunk 7
Page Layouts + CSS = Pretty (Right Column)
hotLinks and tickets CSS
Height and Width of Tickets Background
Page Layouts + CSS = Pretty (Left Column)
frontPage CSS
Page Layouts + CSS = Pretty (Bottom)
Conclusion
Indent Nav's Default Look & XHTML
XHTML
Default CSS
Fancy Indent Nav CSS
Horizontal Indent Nav
Indent Nav – anAncestor, navOn
XHTML
Third Example
CSS – Block 1
CSS – Block 2
Conclusion
Basic Bulleted List and XHTML
XHTML
First Example
A Few Submenu Items
A Few Submenu Items, XHTML
A Few Submenu Items, In Action
Navigation Setting
First CSS Block
First Three Selectors
Second CSS Block
Next Set of Selectors
Second Example
Submenu for Blue Nav
First CSS Block
Second CSS Block
Third CSS Block
Final product
Adding in DHTML
A Look at the Code - initList
A Look at the Code – swapVis
Conclusion
Making a News Brief with Collaboration Systems
Redefining the Collaboration System (CS)
Collaboration System (CS) Templates
Collaboration System (CS) Security
Collaboration System Settings
News Brief Collaboration System (CS)
Analyzing What You Need
Conclusion
Image Previewer with WebGUI Collaboration Systems
The Example
The Template
Template, Lines 1 - 5
Template, Lines 6 – 8
Template, Lines 9 – 10 : The Post Loop
Template, Lines 11 – 13 : Text Content
Template, Lines 14 – 26 : Attachments
Template, Lines 27 – 38 : Edit/Delete Controls
Template, Lines 36 – 37 : Ending the Loop, Closing the Cell
Template, Lines 38 – 46 : Ending the Loop, Closing the Cell
Template, Lines 47 – 51 : Ending the Row & Table, Running the Javascript
The Template, Explanation
The Attachment Loop
WebGUI Admin Console Settings
The Last Important Pieces
The Javascript – bigImage
Watching it Come Together
Conclusion
The Pieces
A Collaboration System
Finally, Syndicated Content
Enabling RSS
Bringing in the Syndicated Content
Syndicated Content Settings
Custom RSS Template
The Template Code
Displaying What You Want
Narrowing it Down
Conclusion
General Design & WebGUI
Cascading Style Sheets (CSS)
WebGUI Templates
Javascript
HTML Cheat Sheet
CSS Cheat Sheet