xhtml, css & templates - webgui - cms · xhtml • thought of as a combination of xml and html...
Post on 25-Jun-2018
224 Views
Preview:
TRANSCRIPT
XHTML, CSS & TemplatesWUC 2006 - Design Track
XHTML
• Thought of as a combination of XML and HTML
• The X is for Extensible
• How is it ‘ Extensible’?
• XHTML is more structured than HTML
• It takes resources to handle unstructured code
• Big computers can handle it, little devices can’t
• Have a cell phone? A PDA?
DTD
XHTML
• Stands for ‘Document Type Definition’
• Adds structure to your page
But where does it go?How do I use it?
Using a DTD
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Strict
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Transitional
<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Frameset
The First Line in your HTML file
XHTML
So, what do they each do?
XHTML
• Strict
• Very strict, some CSS works in unexpected ways
• Quite a few HTML tags are deprecated
• border=”0”, nowrap, etc.
• Transitional
• Fairly forgiving, allows quite a bit
• Frameset
• Allows you to use frames
Implementations
XHTML
• Every opening tag has a closing tag
• <p></p>, <b></b>, <html></html>
• But what about tags that don’t have a closing tag?
• <br>, <img>, <hr>
• They become self-closing
• <br />, <img />, <hr />
• All tags are lowercase
Syntax
XHTML
• XHTML 1.1
• Based off of the Strict doctype from XHTML 1.0
• All layout and style is controlled with CSS
• Breaks tags into modules to custom fit what a page is meant to do
• Not widely used (right now)
Implementations
XHTML
• XHTML 2.0
• An entirely new way of making pages
• Not backwards compatible with older implementations of XHTML
• All new tags
• Don’t worry about it for now, but be aware it’s coming
Implementations
XHTML
• Cascading Style Sheets
• Extremely powerful
• Separates Content from Presentation
CSS
ExampleCSS
<font face=”arial” color=”blue”>Hi</font>HTML
<span class=”blueText”>Hi</span>CSS
They do the same thing, but how?
• CSS Uses Selectors & Properties
• Example-
.blueText { font-family:arial; color:blue;}
Selector
Property
Property
CSSSelectors and Properties
CSSTypes of Selectors
p {
padding:5px;
}
Affects all <p></p> tags on a page
Global
CSSTypes of Selectors
Classes
.blueText {
color:blue;
}
<span class=”blueText”>...</span>
Requires a class call in the page
ID
#redText {
color:red;
}
<span id=”redText”>...</span>
Requires an ID call in the page
CSSTypes of Selectors
A specific ID can only be used once on a page!
CSSTypes of Selectors
Multiple Selectors
h1, h2, h3, h4 {
font-size:14pt;
}
All tags specified will inherit the property
• <head></head>
• External
• Inline
CSSWhere do you put it?
• Works great, but it can be messy• Good way to get started
CSSWhere do you put it?
In the head of your document
<head> <style type=”text/css”> p { padding:5px; } </style></head>
• Create all of your CSS in a separate file
• Terrific way to update an entire website
• Any change to this file will immediately affect all of your other pages
• Keeps your html very clean
CSSWhere do you put it?
An external CSS File
<head> <link rel =”stylesheet” href=”example.css” type=”text/css” /></head>
• In the body of your html
• Generally not the best way to implement styles
• Overrides any styles declared in the <head> of a document
• Both a Pro & a Con
CSSWhere do you put it?
Inline
<p style=”padding:5px;”>...</p>
Cool CSS Tricks
Cool CSS Tricks
• Color Changing Text Example
• Image rollovers Example
• Image Map with no Image Map Example
Links
Mouseover Effects with no Javascript
Cool CSS Tricks
• Small Caps
• Letter Spacing
• First Letter
Fun Titles
font-variant:small-caps
letter-spacing:2px;
p:first-letter { }
Examples
Templates
• Reusable pieces of code that dictate how content is presented in a WebGUI site
• XHTML
• CSS
• Macros
• Template Variables
What is a WebGUI Template?
Templates
• A website design• The wrapper for all the
content on your page
Style Templates
Remember, whatever is in your template will be on EVERY page you use it on!
Style Template
Templates
• Determines the default layout of content on the page
Page Templates
Style Template
Page Template
Everything in WebGUI uses templates...
And you can modify them!
• Extremely similar to a standard webpage
• Makes use of two important WebGUI components...
TemplatesHow do I use them?
Macros
Template Variables
• Predefined actions that occur depending on what is placed within them
TemplatesWhat’s a Macro?
^AssetProxy(red.gif);
Macro Name
What’s placed within it
<img src="/uploads/5Y/0M/5Y0MfDuq-miO8k8sjqhFw/red.gif" alt="" style="border-style:none;" />
• WebGUI is Dynamic, Template Variables help display different content
TemplatesWhat’s a Template Variable?
<tmpl_var page.menuTitle>
Begins the template variable
What variable you’re asking for
About Us
Tip
Templates
Questions?
top related