Search

 

Module: Editor

Version: 4.2.1 +

User: Developer

Difficulty: Easy

Introduction

This exercise teaches you how to style your website with CSS

 

Prerequisites

- The Futurama Editor must be installed.
- Futurama Runtime must be installed.
- Completing the tutorial Styling your website with CSS first, is recommended. 

 

 

Description 

In this exercise we will create some simple content for a website, and style it by using a stylesheet. You can use the website application we've created in the previous exercise: Creating a Website.

Assignment

Create a Website application with the following content:

  • A background that is blue;
  • A left panel with the following properties:
    - A square panel of height and width 300 pixels;
    - Background-color: red;
    - Positioned on the left side of the page;
    - No content
  • A right panel with the following properties:
    - A square panel of height and width 300 pixels;
    - Background-color: yellow;
    - Positioned on the right side of the page;
    - The HTMLInclude of our previous exercise as content

Take the following steps to do so:

  1. Create two WebPanel objects within the WebPage object in your Futurama document. Name them appropriately (f.i. 'Left' and 'Right')
  2. Use a text-editor to create a stylesheet file. It should be saved with the extension '.css'.
  3. In the Editor, select the WebPage object and edit the Stylesheet property. Select the stylesheet you created.
  4. Enter a CSSClass in the CSSClass property of both your webpanels, and include these CSSClasses in your stylesheet. Enter the style elements that style your website according to the description above.

Tips

  • When you want to finish this exercise without having to write the CSS stylesheet, you can download the solution and use the stylesheet included.
  • For more information about CSS you can consult the external pages Cascading Style Sheets (CSS) and CSS Tutorials.
  • CSS-tips:
    - Classes should be included in your website by putting a dot (full stop) in front of the classname. F.i. you can enter your style elements for the left panel within the brackets of the expression: ".left{  }"
    - To create the green background, you can use the default CSSClass 'BODY'. (No dot in front of it)
    - The height or width of the webpanels can be denoted in pixels with the abbreviation "px.". So for instance: "height: 300px;".
    - To position the webpanels at either the left or right side of the website, you can use the element 'float'. 
  • If you are not yet familiar with CSS, or do not want  f your website is not displayed, consult the manual page Installation and upgrading Futurama runtime on a webserver for more information. 

Solutions

Download

image

You can download our solution for this assignment by clicking the image at the right. (Futurama 4.2.1.2)
Please note that you can very well have a different solution that is just as good as ours.

Variations

If you want some more practise on this subject, you could try the extra exercises below.
We won't provide a solution for these variations, just consider them as a way to further experiment with Futurama.
  • (Easy): You can add multiple classes in the CssClass property. Create a specific Class for the dimensions of the two webpanels. In this way you can alter both dimensions at the same time. In lager websites, this will make your website easier maintainable.
  • (Medium): Add a header webpanel above the two webpanels, and a footer below. Give them both a height of 50px, a width of 100% and a different color.

Updated: 2013-01-07