Cert IV web: March 2008

Sunday, March 30, 2008

Image mapping

Today we're giving PMOG a bash, with a little image map mission that I've put together for your learning pleasure. You'll need a login (send me an email if you need an invitation - I think they're out of beta now, but I could be wrong). You'll also need a firefox addon (there's a link on the PMOG site). Have fun.

Sunday, March 23, 2008

happy easter

I know you'll all miss our weekly get together - the same way I know you probably wouldn't do any exercises that I post here. So here's a compromise... an excellent CSS cheat sheet. Print it out, memorise it and then eat it so that it can't fall into enemy hands.

Monday, March 17, 2008

tables and backgrounds

Today we worked through the backgrounds tutorial on tizag

If you want to experiement there's a background image library on http://www.grsites.com/textures/

We finished up with some work on creating tables, followed by a table exercise on the wikiversity.

If you're feeling chirpy, try the harder advanced table exercise

Image: 'buena vista'
www.flickr.com/photos/70825417@N00/358756373

Monday, March 10, 2008

CSS for layout

This week we're looking at how to use CSS to lay out a page. To kick off, work through this tutorial on subcide called 'Creating a CSS layout from scratch' (up to, but not including page 10, the navigation).

There are some interesting techniques used here to ensure the divisions stay in the right places. And some not-so-interesting uses of graphics instead of text (did you spot them? What would you do differently?)

One thing I noticed was a lot of code in this tutorial that set the padding and margins for various elements to zero. If you're wondering why, there's a good article on the subject called 'No Margin For Error'

Taking the idea of stacking DIV boxes to make a page layout one step further, here's two more web pages to look at:

layout-o-matic - which lets you plug in some variables and automagically generate some CSS
Little boxes - which has a set of templates ready to download

Once you've explored these a little, revisit your '10 things' page and apply some CSS layout so that there's a column on the left of the content. Put an unordered list of links to each detail page in this column. For bonus playing time, decorate your left hand column list using some CSS from the listamatic.

At the end of the day you should have some html that looks like:

<html>
<head>
<title>title</title>
<link rel="stylesheet"
type="text/css"
href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>

<div class="sidebar">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
<div class="content">
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
</div>
<div class="footer">
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="thing1.html">Thing 1</a>
</li>
<li>
<a href="thing2.html">Thing 2</a>
</li>
<li>
<a href="thing3.html">Thing 3</a>
</li>
<li>
<a href="thing4.html">Thing 4</a>
</li>
<li>
<a href="thing5.html">Thing 5</a>
</li>
<li>
<a href="thing6.html">Thing 6</a>
</li>
<li>
<a href="thing7.html">Thing 7</a>
</li>
<li>
<a href="thing8.html">Thing 8</a>
</li>
<li>
<a href="thing9.html">Thing 9</a>
</li>
<li>
<a href="thing10.html">Thing 10</a>
</li>
</ul>
</div>
</body>
</html>

and some CSS that includes:

.content {
margin-left: 150px;
}
.sidebar {
float: left;
}

Monday, March 03, 2008

godzilla vs. filezilla

Today we looked at installing and setting up our own ftp client - filezilla (the client not the server). For the full scoop on ftp, including the all important difference between active and passive modes, check out this little wikipedia entry.

Now, I need you to write a blog post on your ftp experiences so far. If you haven't tried your second ftp client yet, pick one from the list, install it, and take it for a spin - then post an entry on your blog comparing it to your first client (core ftp-lite).

In the blog post tell me which one (if either) will you be using from now on and why. Some other things you might mention include:

The name of your ftp client
The URL you got it from
any installation woes you encountered
some comments on its ease of use
$
the platform(s) it works on
the install file size

and any other interesting bits of information you came across. cu next week. bbb

Image: 'Houston, we have a problem.'
www.flickr.com/photos/76074333@N00/301015327

more on lists and CSS

We re-visited our template today, looking at how we could apply CSS to the blocks on the page in more detail.

A couple of the areas we covered were:

playing with the padding, margin and border settings for each div
viewing the page in both firefox and internet explorer and trying to minimise the differences between them
using the margin-top, float and clear selectors to position various elements
creating some nifty effects by combining lists and CSS in imaginative ways

Here's how the html template looked like when we'd finished with it:

<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
</head>
<body>
<div class="breadcrumbs">
<a href="index.html">Home</a> .
</div>
<div class="title">
<h1>Title</h1>
</div>
<div class="pic">
<img src="xxx.gif" alt="a picture" height="200px" width="150px" />
</div>
<div class="wikiquote">
<p>some text from the wikipedia</p>
</div>
<div class="backgroundinfo">
<p>why this item made my list</p>
</div>
<div class="credits">
<p>Flickr Image: <a href="#">pic name</a></p>
<p>Wikipedia Article: <a href="#">wiki article title</a></p>
</div>
<div class="footer">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="thing1.html">Thing 1</a></li>
<li><a href="thing2.html">Thing 2</a></li>
<li><a href="thing3.html">Thing 3</a></li>
<li><a href="thing4.html">Thing 4</a></li>
<li><a href="thing5.html">Thing 5</a></li>
<li><a href="thing6.html">Thing 6</a></li>
<li><a href="thing7.html">Thing 7</a></li>
<li><a href="thing8.html">Thing 8</a></li>
<li><a href="thing9.html">Thing 9</a></li>
<li><a href="thing10.html">Thing 10</a></li>
</ul>
</div>
</body>
</html>

and here's the final CSS:

.backgroundinfo {
background-color: pink;
text-align: center;
margin-left: 20%;
margin-right: 20%;
border: 2px;
border-style: dotted;
border-color: purple;
}
.breadcrumbs {
background-color: red;
padding: 5px;
border: 0px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: left;
width: 10em;
}
.breadcrumbs a:link {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:visited {
text-decoration: none;
color: yellow;
}
.breadcrumbs a:hover {
text-decoration: underline;
color: blue;
}
.credits {
background-color: #eeeeee;
padding: 5px;
border: 1px;
border-color: blue;
border-style: dashed;
margin: 5px;
float: right;
width: 25%;
margin-top: -45px;
font-family: sans-serif;
font-size: x-small;
}
.footer {
clear:both;
}
.footer a:link {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:visited {
color: white;
text-decoration: none;
padding: 3px;
}
.footer a:hover {
background-color: skyblue;
color: navy;
text-decoration: none;
padding: 3px;
}
.footer li {
display: inline;
padding-right: 7px;
list-style-type: none;
}
.footer ul {
background-color: navy;
color: white;
padding-left: 0;
margin-left: 0;
font-family: sans-serif;
font-size: xx-small;
}

.title {
background: gray;
clear:both;
text-align:center;
margin-top:1px;
}
.pic {
background: skyblue;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}
.pic img {
border: 5px;
border-style: ridge;
}
.wikiquote {
background-color: purple;
text-align: center;
font-style: italic;
margin-left: 20%;
margin-right: 20%;
margin-top: -20px;
border: 5px;
border-style: double;
border-color: orange;
}

body {
margin: 0px;
}

Image: 'consume now3'
www.flickr.com/photos/17949364@N00/202924682