www.fachtnaroe.ie



Web This site

Web Authoring - CSS

Reference:

Tutorials

CSS Samples

  1. A simple template to start with....
  2. Use of z-index

    - uses z-index to layer elements in the browser as one does in DTP and image editing. Requires top and left coordinates and a positioning statement also.

  3. Opacity of shape and text

    - shows use of opacity (control alpha value) for text and for a shape, z-index, and border-radius.

    Note that border-radius is css 3 and will only display correctly using the border-radius property in browsers that support this. Other earlier variants such as -moz-border-radius and -webkit-border-radius should not be used; if used these may allow rounded corners in earlier browsers but will break css 3.

    Your design solution should not in any case depend on rounded corners for success. They should only be used to enhance the user experience.

  4. Vertical Text

    Note that as presently implemented, this method uses non CSS 3 instructions. However, these are required to get the browsers we are currently using to do as we wish. For really important text using this effect, use images of text.

Useful tools

IMPORTANT: The most important tutorials will be given in class when sample webpages will be created showing you the fundamentals of HTML; these classes will also include the uploading of files, creating editing and modifying files and properties and any other aspects of HTML you ask about. So ask!

Assessment

Assessment is by:

  1. Assignment - 30%
  2. Project - 50%
  3. Learner Record - 20%

(Prior to 2012 assessment was by project only, accounting for 100% of the marks, where students created one working website. You may view current/previous submissions by clicking in the sections below. Please note that the links in the sections below are not examples of best practice; they are merely examples of past work.)

Your assignment and project should be created in a plain text editor - Notepad for Microsoft® Windows®, or gedit or vi for Linux is recommended (marks may be deducted heavily for the use of any other publishing tool such as FrontPage®).

What colours can I use? Technically you can use any colour that you like; but how the codes for that colour will cause the colour to appear on someone elses computer may be completely different. That's why the idea of "Web-Safe Colors" was introduced.

websafe Colour Palette

Today, most peoples computers are sufficiently well equipped to display all necessary colours. But if unsure, choose a colour from the set above.

What colours should I use? Firstly, choose a consistent colour scheme for the whole site. This scheme should in some way reflect the type of site you're creating. There are good guidelines for which colours will look well with others on many sites, all based on tried and true colour theory. Here is one such sample site: http://colorschemedesigner.com/. Just watch out for the fact that the scheme designer should be taken as a guideline for which web-safe colours you use.

Generating non-standard characters such as áccented characters appropriately is also easy enough: just choose them from the list (PDF 17.7KB) and insert the proper çödès.

NB All of your work should conform to recognised standards. This site http://interact.webstandards.org/ may set you clear why we have defined standards in the first place.

Validate your site! Use:

to validate your HTML (should be HTML5) and your CSS (should be level 3) respectively.

You'll also find browsershots.org useful to make sure your site is compatible with other browsers. Don't check against every browser possible at this site - just the main ones. If unsure, ask!

Present Year

Assessment 2011/2012

  1. Assignment 30%: create a single page demonstration of a look-and-feel solution for Garnett Medical. Click here for brief.
  2. Project (50%): Create complete website for The Waterfront Hotel (to incorporate reservations form as below).
  3. Learner Record (20%)

Assignment Sites:

  1. it.angelinab
  2. it.clairef
  3. it.declanh
  4. it.andrewl
  5. it.kieferl
  6. it.richardob
  7. it.adamod
  8. it.darrenod
  9. it.normanor
  10. it.aaronr
  11. it.jesss
  12. it.michaels
  13. it.jonathant
  14. it.keithw

Project Sites:

  1. it.angelinab
  2. it.clairef
  3. it.declanh
  4. it.andrewl
  5. it.kieferl
  6. it.richardob
  7. it.adamod
  8. it.darrenod
  9. it.normanor
  10. it.aaronr
  11. it.jesss
  12. it.michaels
  13. it.jonathant
  14. it.keithw

Online Reservation Form Validation:
(Computer Programming Assignment #1)

  1. it.angelinab
  2. it.clairef
  3. it.declanh
  4. it.andrewl
  5. it.kieferl
  6. it.richardob
  7. it.adamod
  8. it.darrenod
  9. it.normanor
  10. it.aaronr
  11. it.jesss
  12. it.michaels
  13. it.jonathant
  14. it.keithw

The due date is on the calendar.

You must create a website for the project for which you will:

  1. Design & Plan
  1. Implement
  1. Review/Evaluate
  1. Submit

The due date is on the calendar.

Past Years

Assessment 2010/2011

Project Sites:

  1. it.kehindea
  2. it.johnc
  3. it.michaelg
  4. it.mariuszh
  5. it.martinh
  6. it.paulm
  7. it.cianm
  8. it.johnod
  9. it.richardor
  10. it.caiques
  11. it.ianw

Online Application Forms:
(Computer Programming Assignment #1)

  1. it.kehindea
  2. it.johnc
  3. it.michaelg
  4. it.mariuszh
  5. it.martinh
  6. it.paulm
  7. it.cianm
  8. it.johnod
  9. it.richardor
  10. it.caiques
  11. it.ianw

Your project for this year is the Seangearánaí Social Club. This is a rural club that seeks to provide activities that will involve people in the Seangearánaí area, encouraging them to mix, mingle and socialise. It's intent is to tackle rural isolation as well as to organise occasions where single people might meet up, where otherwise they might just have to depend on day-to-day good luck to meet partners.

The due date is on the calendar.

You must create a website for the project for which you will:

  1. Design & Plan
  1. Implement
  1. Review/Evaluate
  1. Submit

The due date is on the calendar.

Assessment 2009/10:

Your topic for this year is "Crossing the water: Clonmel & its Bridges"

You must create a website for the project for which you will:

  1. Design & Plan
  1. Implement
  1. Review/Evaluate
  1. Submit

Related:

Miscellaneous:

Photographs from field trips:

Last updated: 20120412-13:59
back to top
Fachtna Roe, Senior College, Central Technical Institute, Clonmel, Ireland.