Unit 15 – W

eb Authoring

http://www.yahmad.co.uk/

Web Authoring – Qatar Tourism

Lesson 1 & 2

Unit 15 – W

eb Authoring

Starter 1 – Identify the different features found on a website

http://www.yahmad.co.uk/

Rollover Images/Buttons

Jquery image slider

Banner

Navigation (Drop Down)

Scrolling text

Unit 15 – W

eb Authoring

Starter 2 - (Discuss the difference between code and design view in Dreamweaver)

http://www.yahmad.co.uk/

Why would you use code and design

view?

Unit 15 – W

eb Authoring

Lesson 1 & 2 Overview

http://www.yahmad.co.uk/

Objectives Understanding the Adobe Dreamweaver and Fireworks Interface.

Understand the use of simple tools in Adobe Fireworks and Dreamweaver.

Understanding the need to use appropriate content for a specific purpose.

Understanding how to export and import files into suitable software.

OverviewThe Qatar Tourism Authority have approached you to create a new website to promote tourism to the country. The website will have to include appropriate information on the following topics:• About Qatar• Activities• Entertainment• Shopping

Unit 15 – W

eb Authoring

Lesson 1 & 2 Outcomes

http://www.yahmad.co.uk/

Outcomes TimeTask 1 Copy Website Folder and Manage Site

Task 2 Create and import a Top Banner (header) into your website

Task 3 Create and import an animated banner into your website

Unit 15 – W

eb Authoring

Task 1

http://www.yahmad.co.uk/

OutcomesCopy Website Folder

Copy Website Folder from SEC Public or download and extract from the YAHMAD Website to your USB stick.

Manage Website

Click on Site from the tool bar and then click on New Site to manage your website. Select the website folder.

Unit 15 – W

eb Authoring

Task 2

http://www.yahmad.co.uk/

OutcomesCreate and import a Top Banner (header) into your website

1. Open Adobe Fireworks and set the Canvas to: Width 930, Height 952. Import appropriate content into banner.3. Export the banner into your home page in Adobe Dreamweaver.

Refer to the video Tutorials - SEC Public/WWW.YAHMAD.CO.UK

Use the Auto Vector Mask tool to achieve the Fade Effect

Example Banner

Unit 15 – W

eb Authoring

Task 3

http://www.yahmad.co.uk/

OutcomesCreate and import an animated banner into your website

1. Open Adobe Fireworks and set the Canvas to: Width 930, Height 1752. Import appropriate content (images) into each state of the animated banner.3. Set an appropriate speed for each4. Export the banner into your home page in Adobe Dreamweaver.

Refer to the video Tutorials - SEC Public/WWW.YAHMAD.CO.UK

Example Animated Banner

Unit 15 – W

eb 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 Understanding the Adobe Dreamweaver and Fireworks Interface.

Understand the use of simple tools in Adobe Fireworks and Dreamweaver.

Understanding the need to use appropriate content for a specific purpose.

Understanding how to export and import files into suitable software.