xhtml, css & templates - webgui - cms · xhtml • thought of as a combination of xml and html...

32
XHTML, CSS & Templates WUC 2006 - Design Track

Upload: lyminh

Post on 25-Jun-2018

224 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

XHTML, CSS & TemplatesWUC 2006 - Design Track

Page 2: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

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?

Page 3: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

DTD

XHTML

• Stands for ‘Document Type Definition’

• Adds structure to your page

But where does it go?How do I use it?

Page 4: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

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

Page 5: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

So, what do they each do?

XHTML

Page 6: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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

Page 7: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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

Page 8: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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

Page 9: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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

Page 10: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• Cascading Style Sheets

• Extremely powerful

• Separates Content from Presentation

CSS

Page 11: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

ExampleCSS

<font face=”arial” color=”blue”>Hi</font>HTML

<span class=”blueText”>Hi</span>CSS

They do the same thing, but how?

Page 12: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• CSS Uses Selectors & Properties

• Example-

.blueText { font-family:arial; color:blue;}

Selector

Property

Property

CSSSelectors and Properties

Page 13: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

CSSTypes of Selectors

p {

padding:5px;

}

Affects all <p></p> tags on a page

Global

Page 14: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

CSSTypes of Selectors

Classes

.blueText {

color:blue;

}

<span class=”blueText”>...</span>

Requires a class call in the page

Page 15: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

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!

Page 16: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

CSSTypes of Selectors

Multiple Selectors

h1, h2, h3, h4 {

font-size:14pt;

}

All tags specified will inherit the property

Page 17: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• <head></head>

• External

• Inline

CSSWhere do you put it?

Page 18: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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>

Page 19: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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>

Page 20: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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>

Page 21: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Cool CSS Tricks

Page 22: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Cool CSS Tricks

• Color Changing Text Example

• Image rollovers Example

• Image Map with no Image Map Example

Links

Mouseover Effects with no Javascript

Page 23: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Cool CSS Tricks

• Small Caps

• Letter Spacing

• First Letter

Fun Titles

font-variant:small-caps

letter-spacing:2px;

p:first-letter { }

Examples

Page 24: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

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?

Page 25: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

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

Page 26: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Templates

• Determines the default layout of content on the page

Page Templates

Style Template

Page Template

Page 27: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Everything in WebGUI uses templates...

And you can modify them!

Page 28: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• Extremely similar to a standard webpage

• Makes use of two important WebGUI components...

TemplatesHow do I use them?

Macros

Template Variables

Page 29: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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;" />

Page 30: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

• 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

Page 31: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Tip

Templates

Page 32: xhtml, Css & Templates - Webgui - Cms · XHTML • Thought of as a combination of XML and HTML • The X is for Extensible • How is it ‘ Extensible’? • XHTML is more structured

Questions?