Session 1
Monday, 4 August, 6pm
Structure and Style
Concepts (10 mins)
- Separation of Structure from Style
- The roles of XHTML and CSS
Application (20 mins)
- Create an XHTML page with a functioning link
- balacing tags, self-balancing
- <html>, <head>, <title>, <body>, <p />, <br /><a href="...">
Attaching Styles
Concepts (10 mins)
- Discuss how external style sheets affect XHTML
Application (20 mins)
- Attach an external style sheet to change the
- font-family
- color
- text-size
Review and Assignment (10 mins)
- Adapt the code from today's session to your own content
- Change existing styles to suit your taste
- Create new styles to customise
- a:link
- a:visited
- a:hover
Session 2
Tuesday, 5 August, 6pm
Stylizing Built-in Structure
Concepts (10 mins)
- Built-in structure of XHTML: meaningful structure vs. mere styles
Application (20 mins)
- Add more meaningful structure to your page, and stylise it in the CSS
- <h1>, <h2>, <h3>, etc
- <blockquote>
- <em>, <strong> (discuss why we do not use <b> or <i>)
Custom Structure
Concepts (10 mins)
- Structure of a typical web page
- nav, subnav
- content
- title, search
- How we can create our own meaningful structures with XHTML
- Adding styles to custom structures
Application (20 mins)
- Difference between <div> and <span>
- Difference between <id> and <class>
- Adding styles to <div> and <span> tags
- <div id="nav">
- <div id="content">
- <span class="subnav">
Review and Assignment (10 mins)
- Adapt the code worked on in-class to your own content and styles
- Teach yourself and use Lists (<ul> and/or <ol>) in your page
- Add a style and structure for a title and search bar at the bottom of the page
Session 3
Thursday, 7 August, 6pm
Review (1 hour)
XHTML: Structure of a page
- balacing tags, self-balancing
- <html>, <head>, <title>, <body>, <p />, <br /><a href="...">
- <h1>, <h2>, <h3>, etc
- <blockquote>
- <em>, <strong> (discuss why we do not use <b> or <i>)
- <ul> vs. <ol>
CSS: Styling a page
- add styles to h1, h2, h3, blockquote, em, strong,
- <li>
- list-style-type: disc;
also lower-alpha, lower-roman, decimal, square, circle, etc.
- list-style-position: inside;
- list-style-image: url(bullet.gif);
- list-style: none;
- list-style-type: disc;
CSS: Styling structure
- <div id="nav">
- <div id="content">
- <span class="subnav">
Session 4
Monday, 11 August, 6pm
Positioning with CSS
Concepts (10 mins)
- Why CSS positioning is the way to go
- Absolute vs relative positioning
- Adding another dimension to XHTML: Z-index
Application (40 mins)
- Position the structural elements of the page using CSS
- nav, content
- Show difference between absolute and relative positioning
- position: absolute; position:relative;
- float:
- top:
- left:
- right:
- Show how margins and padding can often get similar affects
- padding: T R B L;
- margin: T R B L;
- padding-top; etc
Review and Assignment (10 mins)
- Use CSS-positioning to move the search/title bar to the top of the page
- teach yourself how to use the <img src="..." /> tag
Session 5
Tuesday, 12 August, 6pm
Tables
Concepts (10 mins)
- The proper and improper use of tables
- The trouble with tables for positioning
Application (30 mins)
- Create a table with XHTML
- <table>
- <tr>
- <td>
- rowspan, colspan
- Stylise the table with CSS
- padding
- margin
- border
Colors and Images
Concepts (10 mins)
- Hexadecimal colors
- Different web image formats
Application (10 mins)
- Change all of the colors to hexadecimal
- Export a .gif, .jpg and .png
- Demonstrate when each is the best choice
- Image Maps
- <map name="mymap">
<area shape="rect" href="mypage.html" coords="26,185 238,185"> </map
- <img src="images/images.gif" usemap="#mymap" />
Code used in this class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="keywords" content="xhtml, web class, usp," />
<meta name="description" content'="This is a sample page used in an XHTML class" />
<meta name="author" content="christopjdfgsdggdgdsf" />
<title>
The first XHTML session!
</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css" media="all">@import "css2.css";
</style>
</head>
<body>
<div id="menu">
<a class="menu" href="brucealmighty.html">Bruce Almighty</a>
|
<a class="menu" href="dumbanddumber.html">Dumb and Dumber</a>
|
<a class="menu" href="oceans11.html">Oceans 11</a>
|
<a class="menu" href="hollywoodhomicide.html">Hollywood Homicide</a>
</div>
<div id="content">
Here we are on the first day thinking of something to say.Here we are on the first day thinking of something to say.
<p />
Girls I have kissed
<ul>
<li style="color:#ff0000; font-size:50px;">Kathryn</li>
<li>Emma</li>
<li>Shelly</li>
</ul>
Girls I have not kissed
<ol>
<li>Dara</li>
<li>Lorraine</li>
<li>Cheryl</li>
</ol>
<map name="cloud">
<area shape="rect" href="help.html" coords="51,24 106,51">
<area shape="rect" href="link2.html" coords="129,24 191,46">
</map>
<img usemap="#cloud" src="images/cloud.gif" alt="another picture of a cloud" />
Here <a href="page2.html">we are on the first day</a> thinking of something to say.
<br />Here we are on the first day thinking of something to say.
<p />
<table>
<tr>
<td colspan="2"> this is the happy title of this table
</td>
</tr>
<tr>
<td class="left">
column1
<br />
link 2
<br />link 3
<br />link 4
</td>
<td class="right">column 2 is tro the rigfht of the first column</td>
</tr>
</table>
</div>
</body></html>
Assignment (10 mins)
- make a new table with a different number of rows and columns, and add some colspans and rowspans for practice
Extra Session
Tuesday 12 August, 6pm
Javascript
Since we've been learning so quickly, we have time for one sessions on Javascript before we talk about usability and design
Concept: Document Object Model
- window.document.image.src is like town.street.adress.people_inside or cat.head.eyeball.color
Application: Javascript Rollover (status and image)
- there are certain events we can catch, the most common being onmouseover and onmouseout.
- by writing javascripts to act on certain events, we can use the Document Object Model to specify actions on specific parts of our page
- <a href="#" onmouseover="window.status='Hello World!';return true;"
onmouseout="window.status='Goodbye Cruel World!';return true;">Hello What?</a>
- status is built-in to the Document Object Model, and by naming our own elements, we can affect our own custom elements
- <img src="image.gif" name="my_rollover" />
- now we add the javascript to change that named image
- <a href="#" onmouseover="window.document.my_rollover.src='image_over.gif'"
onmouseout="window.document.my_rollover.src='image.gif'">
Concept: Functions and Arrays
- rather than having all the javascipt inline, we can put it in a separate document (sound familiar?), and call it from the HTML.
- we can also store lots of variables in an array or list, which is called by this function
Application: Slide Show
- First we need an image with a name, so that we can locate it through the DOM
<img src="images/cover.gif" width="237" height="299" alt="a story about what happens when the rooster goes to the city" name="myPicture">
- Then we need to link to an external javascript. In the head, put
<script type="text/javascript" src="slideshow.js"></script>
- Now lets save a new file as "slideshow.js":
var myPix = new Array("images/cover.gif", "images/1.gif","images/2.gif","images/3.gif","images/4.gif","images/5.gif","images/6.gif")
var thisPic = 0;
function processNext() {
if (document.images && thisPic < 6) {
thisPic++;
} else { thisPic = 0; } document.myPicture.src=myPix?thisPic
}
- And finally, we need to put in a link to activate the slideshow
<a href="javascript:processNext()">Next</a>
Take home Project
- re-code the Rollover as a function in an external js file
- try this out: <a href="javascript:setInterval('processNext()',1000);">Next</a>
Downloads
download all the files associated with today's workshop here
Session 6
Thursday, 14 August, 6pm
The User
Concepts (10 mins)
- User-focused content
- Content-categorization
- Usability testing and Heuristics
Application (30 mins)
User-focused content
- Run through the 3 basic questions (WebContentQuestionaire)
- WHO ARE YOUR USERS?
- WHAT DO THEY NEED FROM YOU?
- HOW CAN YOU SHOW THEM THAT YOU HAVE WHAT THEY NEED?
Content-categorization
- Organize content using the card and sitemap method
Usability testing and Heuristics
Review (10 mins)
- Discuss other formats, and how they can be used on the web
- PHP, PDF, SWF, MOV, DOC
FINAL PROJECT (10 mins)
XHTML web page with an external style sheet (styles.css) that utlizes all of the following tags.
XHTML
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <div id="titlebar">
- <div id="nav">
- <div id="content">
- <span class="currentpage">
- <a class="navbar">
- <h1>
- <h2>
- <a href="...">
- <html>
- <head>
- <title>
- <body>
- <link rel="stylesheet" type="text/css" href="styles.css" />
CSS
- margin:
- padding:
- font-family:
- font-size:
- color:
- font-weight:
- padding-top:
- padding-right:
- padding-bottom:
- padding-left:
- margin-top:
- margin-right:
- margin-bottom:
- margin-left:
- background-color:
- position:
- left:
- top:
- float:
- width: