Creation – TemplateLesson 20

Lesson Goals

Know how to build a website template

Understand the use of CSS in web design

Be able to evidence Dreamweaver techniques

#css #template#editable

Assessment Criteria

The assessment criteria for this part of the unit is as follows:

LO3 – Create a new functional multi-page website

P3 Demonstrate web authoring skills by creating a new competent functional multi-page website that includes:• Consistent style across pages• Text and graphics• Method of user feedback

M2 Demonstrate proficient design skills. The new multi-page website produced is suitable for the target audience and includes rich media. The website produced is generally of a good technical standard.

D2 Make appropriate use of optimisation techniques and site management tools. The website produced is generally of a high technical standard.

Cascading Style SheetWhat is CSS used for and how is it set up in Dreamweaver?

CSS

A cascading style sheet can be used in web design to help define the way that a web site will look.

CSS allows you to define formatting for the website by defining: Colours Fonts Layout

The syntax of CSS is very simple as it is mostly created using basic English words to define each element.

#css #template#editable

Understand use of CSS in web designBe able to evidence techniques

Export

Your navigation bar or buttons must be exported as a Fireworks HTML file which can be used in Dreamweaver.

This file keeps each slice as a separate element on your page so that you can link all of the buttons to the correct pages of your website.

If you only exported your file as an image you would lose any rollover behavior you added to your buttons.

#css #template#editable

Understand use of CSS in web designBe able to evidence techniques

Export

If you export as a .png file you end up with an image of your buttons:

Exporting your buttons as HTML allows your slices to be maintained:

#css #template#editable

Understand use of CSS in web designBe able to evidence techniques

Technical Needs

A typical user of your website will be looking for the following: Navigation – Easy to get from page to page Flow – Obvious which bit comes next Loading – Relatively quick load times Access – Site accessible to disabled users Consistency – A clear style across all pages Browsers – Displays correctly in all browsers Colours – Effective contrasting colour scheme Form – Allowing user interaction e.g. Contact

You will need to refer to your mockups while making the template and check these areas have been considered.

#css #template#editable

Understand use of CSS in web designBe able to evidence techniques

Your Task

Define the CSS in your website template to specify properties for: Headings Paragraph Background

Complete your template by exporting your navigation bar and including all other static assets such as a copyright notice, logo, banner image etc.

Provide evidence of your template and all the main elements in the creation section of your planning form. #css #template

#editable

Understand use of CSS in web designBe able to evidence techniques