Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LO3 - Lesson 20 - Template

518 views

Published on

EMS Creative iMedia
Cambridge Technicals

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

LO3 - Lesson 20 - Template

  1. 1. Creation – Template Lesson 20
  2. 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. 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.
  4. 4. Cascading Style Sheet What is CSS used for and how is it set up in Dreamweaver?
  5. 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. 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. 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. 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. 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

×