2. 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
3. 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.
5. 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 design
Be able to evidence techniques
6. 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 design
Be able to evidence techniques
7. 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 design
Be able to evidence techniques
8. 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 design
Be able to evidence techniques
9. 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 design
Be able to evidence techniques
