1. Unit 15 – Web Authoring http://www.yahmad.co.uk/ Web Authoring Project

2. Unit 15 – Web Authoring Project http://www.yahmad.co.uk/ Overview In the next part of the unit you will use the skills you have developed in the first part of unit and create a website based on a topic from the list shown below: Sports Movies/TV Cars Travel Computer games Objectives Understand the use of simple tools in Adobe Fireworks and Dreamweaver. Understanding the difference between CSS and HTML tags. Understanding how to export and import files into suitable software.

3. Unit 15 – Web Authoring Outcomes http://www.yahmad.co.uk/ Outcomes Time Task 1 Design: Website Proposal including CSS Styles – Select an appropriate topic Design – Select the appropriate template or create your own using the video tutorial Site Map Task 2 Content: Top header Animated Content Rollover Images Text for each page Task 3 CSS & Hyperlinks: Create CSS Text styles Create new webpages Internal Links External Links Extension: Create a photo Gallery Page using the Homework Gather content for each page on a Word Document. Save images as Jpegs.

4. Unit 15 – Web Authoring Task 1 http://www.yahmad.co.uk/ Website Proposal 1. You need to select a topic from the list shown below for the next part of the web authoring unit: Sports Movies/TV Cars Travel 2. You need to complete the design documents which include the Website Proposal, Hand drawn Design and Sitemap documents. Purpose: What type of content will be provided on the website and what will be the reason for this? Target Audience: Who will the website be aimed at (Gender, Age, Genre etc.)? House style: What type of colours will be used on the website? CSS Text Styles: What type of text styles will you choose for your website – Consider fonts, colours, formatting etc.

5. Unit 15 – Web Authoring Task 1 – Template 1 – Copy the Template Folder http://www.yahmad.co.uk/ Choose a Template (existing template) height: 95px; width: 930px height: 175px;width: 930px; height: 400px; width: 170px; height: 100px; width: 170px;

6. Unit 15 – Web Authoring Template Size – You can change the Colours Task 1 – Template 2 – Copy the Template Folder http://www.yahmad.co.uk/ height: 150px; width: 850px height: 100px; width: 170px; height: 400px; width: 840px;

7. Unit 15 – Web Authoring Template Size – You can change the Colours Task 1 – Template 3 – Copy the Template Folder http://www.yahmad.co.uk/ height: 200px; width: 850px height: 100px; width: 170px; height: 400px; width: 680px; height: 500px; width: 150px;

8. Unit 15 – Web Authoring Task 2 http://www.yahmad.co.uk/ Content for all webpages 1. You need to create your content using the appropriate software: Refer to the sizes in your selected template. Make sure you save Fireworks files so can edit the file at a later date. Export your content into the correct folder. Rollover Buttons Top header, Animated Content Text for each page Save your collection of pictures into the images folder. Rollover Buttons Top header Animated Content Text for each page

9. Unit 15 – Web Authoring Task 3 http://www.yahmad.co.uk/ CSS Styles You need to create CSS styles for H1 (Heading 1), H2 (Heading 2) and P (Paragraph). You need to apply the text styles appropriately to your text content. Hyperlinks You need to create new webpages. You need to create external links ensuring each rollover button goes to the correct page (Internal Links). External Links – You need to create at least 3 external links to other websites.

10. Unit 15 – Web Authoring Extension – http://www.yahmad.co.uk/ Insert Photo Gallery Copy the Photo Gallery folder in the website root folder: Copy the same 20 Jpeg images into both Photo and Thumbs Folder. Rename the images 1 - 20 To insert the SWF Gallery file you need to click on Insert >> media >> SWF Then select the my Gallery1 File. Resize the SWF so it fits into your DIV Tag.

11. Unit 15 – Web Authoring Plenary – Refer to the Lesson Objectives http://www.yahmad.co.uk/ Plenary Task (Q&A) Peer Assess each others work and suggest possible improvements. Discuss the levels pupils have achieved for this task. Objectives Understand the use of simple tools in Adobe Fireworks and Dreamweaver. Understanding the difference between CSS and HTML tags. Understanding how to export and import files into suitable software.