Web Authoring - CSS

Reference:

Tutorials

An older starting document: Getting started - click here. (1.72MB - takes a moment to download before displaying).
Beginners guide to html
Bare Bones Guide to HTML
There is a short css tutorial, and a more detailed one.
http://www.cssdrive.com/
http://www.dynamicdrive.com/style/
http://www.thesitewizard.com/
http://www.pageresource.com/dhtml/
http://www.tizag.com/
Server Side Includes on Wikipedia
Apache Tutorial on SSI
Server Side Includes
Adding a shortcut icon
Colours have meanings...

CSS Samples

A simple template to start with....
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.
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.
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:

Assignment - 30%
Project - 50%
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.

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.

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

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

Assignment Sites:

Project Sites:

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

Past Years

Assessment 2010/2011

Project Sites:

Online Application Forms:
(Computer Programming Assignment #1)

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:

Design & Plan

Provide textual, graphical and any other planning materials you consider relevant
Identify a target audience

Clearly identify the purpose of the website
Identify the main communications intent of the website
Document how you intend to achieve the purpose and communications intent of the site

Develop a consistent design solution (style) for the website. This will involve the use of an externally linked CSS file. Links to tutorials are shown above.

Provide a master page design. This will be one or more pages that accurately represent the design solution you have chosen

Develop a consistent site navigation solution with ease of use as the prime aspiration.

Provide a website map
Document how you expect this navigation solution to work

Implement

Create at least 6 (six) webpages.
Use original artwork & photography as already developed for Image Processing
Create each page in accordance with best practice
Use at least one animated GIF
Use at least one piece of javascript or rollover, for example
Use any/all appropriate materials delivered in class as content on your site
Conform to file naming conventions and use a logical directory structure
Remain within the storage size allocated to the project (currently 5MB)
At least one of the pages will be an electronic enrollment form (an example of which is here) which will be validated using a computer program which will be your first computer programming assignment.
The materials generated will also be used for your 8 A4 (2 double-sided A3) magazine which you will generate for Desktop Publishing.

Review/Evaluate

Objectively evaluate the completed website
Provide documentary evidence of this evaluation

Submit

Create and submit 1 bound project containing all materials: include screen grabs, sample HTML, CSS code, typed descriptions of target audience and plan and method for site creation, typed critical review, site-maps &c (refer to the marking scheme distributed). Also submit via normal website upload to the location designated. Your website will be stored in your public_html folder on http://www.fachtnaroe.net. The first file in the site will be called index.html - you will have to overwrite the place holder file with this name which already exists.