And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

And here’s how the result will look like:

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

• boxes_back_bottom.gif
• boxes_back_top.gif
• feedentry_bg.gif
• feed-icon-14×14.png
• rssfeed_box.gif

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

• Der VZL Shop auf Prestashop-Basis bietet die Möglichkeit Arbeitsheft zu den Weiterbildungskursen zu bestellen und außerdem den Globalzugang (s.u.) zu buchen.
• Der Globalzugang bietet Zugang zu allen Virtuellen Sitzungen, aus denen die Kurse de VZL bestehen. Diese Option gibt es für hessische Lehrerinnen und Lehrer schon länger und ist jetzt für alle verfügbar.
• Und außerdem gibt es noch die sogenannten Mikroprojekte als RSS-Feed, kleinere Unterrichtsideen, die die Neuen Medien benutzen, natürlich gleich mit Beispielen.

The first one is supported by a blog I keep especially for the course and an online course at the VCT. The second is also a blended learning course with its online component at the VCT. Both are starting next week and therefore I will be off in a moment to go on preparing them

Today sees the launch of the new portal of the Virtual Center for Teacher Training. Actually, it looks like the old one, but ask our programmer and he will tell you how much work he put in there.

Inform yourself about the site and its new features at the VCT.

So now the world has two important things going on on this date .

• New Media in Foreign Language Education (Group 1 and Group 2, both together with my colleague Anna Maria Gallus)
• Presenting Content
• Web Technologies

Additionally, I will be part of a group of three to teach the course “Techniques of Scientific Work”, which will be an online course with four in class session throughout the semester.

The New Media in FLE course is also accompanied by another blog I will keep for this course only, which is hosted at WordPress.com.

If you’re one of my students: See you in the first session the week after the next one.