Scheme of Workd for the Web Design for Beginners (using Adobe Dreamweaver CS6) course

SCHEME OF WORK: WEB DESIGN FOR BEGINNERS (USING DREAMWEAVER CS6) 2012-13

PGCE / Cert Ed Yr2 > CDIP > Patch 1 > Group VHS

Wk. Teaching

Strategies / Activities

Learning Strategies / Activities

Functional Skills E-Learning Assessment

Methods Classroom Resources

1 Introduction & Designing a Webpage with HTML & Notepad 1. Introduce Course with

Course Handbook.

2. Get learners to fill out start column of RARPA Document.

3. Load Week 1 PowerPoint & give out Week 1 hand-outs

4. Group discussion & activity on what is HTML, XHTML, Tags

5. Explain Gap Filing Exercise: Apply html coding to text.

6. Demonstrate how to make a webpage using Notepad.

1. Review Course Handbook.

2. Fill out Start Column of RARPA Document identify prior knowledge & targets for the course.

3. Read/discuss/take part in activity on what is HTML, XHTML, and Tags. Use Week 1 hand-outs.

4. Carry out Gap Filing Exercise in Pairs.

5. Make a webpage using Notepad using Week 1 hand-outs.

Literacy/Language • Reading hand-outs • Paired/Group work (verbal

communication) • Take part in discussion • Questioning & answering • Reading / understanding

key words / technical terms • Processing their learning

and findings • Decision making Numeracy • Calculating a font sizes • Calculating a border sizes • Calculating image sizes • Colour codes ICT • Notepad (software) skills. • Internet Explorer (web

browser) skills. • Using Computer hardware

(keyboard, mouse etc.) • Saving files in different

formats.

• Using Classroom Management software (like LAN School) to be used for demonstrations.

• Access to video-sharing website / resource bank where learners who were away for the lesson or need extra support or want to revise lesson activities can access video tutorials of the lesson pre-made by the Lecturer.

• Access to Online Server where learners can make their webpage live on the Internet.

• RARPA Document

• Paired Work: Gap Filing Exercise.

• Practical/Graduated/ Computer Simulated Task: Individually, produce a Webpage using HTML coding in Notepad.

• Observation

• Problem Solving

• Peer Feedback on Individual webpage’s created.

• Computer Classroom

• Projector • Projection

Screen/White Board

• Course Handbook • Week 1 hand-outs.

• Classroom

Management Software (LANSch)

• Web Design Software (Adobe Dreamweaver)

• Word Processing Software (Microsoft Word)

• Note taking software (Notepad)

• Access to the Internet

• Access to Online Server



2 Getting Started with & Using Adobe Dreamweaver (1) 1. Load Week 2

PowerPoint & give out Week 2 hand-outs

2. 10 minute lecturer on

‘organising your files’, ‘labelling your files’, and ‘XHTML’.

3. Introduce & show the

Dreamweaver Interface & Panels

4. Issue exercise 01 –

Label Dreamweaver’s Panels within Week 2 hand-outs.

5. Issue exercise 02 –

Design a webpage using Dreamweaver. Demonstrate Dreamweaver panels & tools using Week 2 hand-outs.

If learners do not finish Exercise 02, they have 1 hour during Week 3’s lesson.

1. Learners to engage in lecturer on ‘organising your files’, ‘labelling your files’, and ‘XHTML’.

2. Load Dreamweaver on computers and watch tutorial by lecturer on its interface and panels.

3. Complete Exercise 01 – Label Dreamweaver’s panels from tutorial given by Lecturer on Exercise 01 sheet in week 2 hand-outs.

4. Start Exercise 02 – Design a webpage using Dreamweaver. Create a new webpage file, label it with a title, write information down, and apply a background colour, link colours, hyperlink, email address, image, text decoration, and inserting a video.

Literacy/Language • Reading hand-outs • Individual & paired work

(verbal communication) • Take part in discussion • Questioning & answering • Reading / understanding


and findings • Decision making Numeracy • Creating a number of

folders. • Calculating a font Sizes. • Calculating border Sizes. • Calculating Image Sizes. • Colour codes. ICT • Dreamweaver (software)

skills. • Internet Explorer (web


(keyboard, mouse etc.) • Saving files.




• RARPA document

• Individual work.

• Implementing Buddy System during exercise work.

• Practical/Graduated/ Computer Simulated Task: Individually, produce a Webpage using Dreamweaver.

• Observation

• Problem Solving


• Projector

• Projection Screen/White Board

• Week 2 hand-outs

• Classroom Management Software (LANSch)








3 Getting Started with & Using Adobe Dreamweaver (2) 1. Learners have the first

hour to complete Exercise 02 from Week 2. Any learners that have completed work will be issued extension/additional exercise.

2. Learners to pair up and feedback on their webpages designed in Exercise 02 from Week 2.


4. Demonstrate where learners can access suitable webpage template documents within Dreamweaver.

5. Lecture / tutorial on ‘Site Control’

1. Continue/Complete Exercise 02 – Design a webpage using Dreamweaver. Create a new webpage file, label it with a title, write information down, and apply a background colour, link colours, hyperlink, email address, image, text decoration, and inserting a video.

2. Give feedback to the person sitting next to them on their webpage created.

3. Investigate the webpage templates available in Dreamweaver.

4. Understand the importance of ‘Site Control’ and how to manage it using Week 3 hand-outs.





folders. • Calculating image sizes. • Numbering files to

ascending order. • Colour codes. ICT • Dreamweaver (software)

skills. • Internet Explorer (web






• RARPA document


• Implementing Buddy

System during exercise work.

• Practical/Graduated/ Computer Simulated Task: Individually, produce a Webpage using Dreamweaver & using Site Control within an existing project.

• Observation

• Problem Solving

• Computer

Classroom

• Projector











4 Controlling Typography & Creating Links with Dreamweaver 1. Upload Week 4

exercise files onto system for download.


3. Demonstrate / remind learners how to decorate & edit text.

4. Demonstrate how text can be transferred from Word into a webpage.

5. 10 minute lecture on font unit measurements and font choices.

6. Demonstrate how to create internal links, external links and named anchors.

7. Extension/Addition Exercise: Inserting Images.

1. Download Week 4 exercise files from system personal login space or USB stick.

2. Practice / Revise how to

decorate & edit text on a webpage.

3. Transfer text from a

Word Document into a webpage file in Dreamweaver.

4. Listen / take part in

discussion on font unit measurements and font choices.

5. Apply internal, external

links and named anchors to Week 4 exercise files.

6. Extension/Addition

Exercise: Inserting Images to Week 4 exercise files.





folders. • Calculating font sizes. • Choosing the right number

of named anchors. • Configuring image sizes for

a webpage. • Colour codes. ICT • Dreamweaver & Word

(software) skills. • Internet Explorer (web






• RARPA document



• Practical/Graduated/ Computer Simulated Task: Individually, controlling the typography and applying links to a website project.

• Observation

• Problem Solving


• Projector











5 The Webpage Layout 1. Upload Week 5

exercise files onto system for learners to download.


3. 10 minute lecture on the elements of the webpage layout.

4. Issue Exercise 01 – learners to label the webpage elements on existing online webpage’s.

5. Demonstrate how the webpage elements can be customised in Dreamweaver (Exercise 02).

6. Issue Exercise 03 – Get learners to use knowledge gained in lesson to make a webpage for specific requirements given in hand-outs.


discussion on the elements of the webpage layout.

2. Download Week 5

exercise files from system personal login space or USB stick.

3. Exercise 01 – Identify

the webpage elements on existing online webpage’s.

4. Exercise 02 - Customise the elements on a webpage template Dreamweaver.

5. Exercise 03 – Decorate

webpage template with text, images, and customise to a specific specification as mentioned in Week 5 handouts.




and findings • Decision making Numeracy • Calculating the width of the

elements on the webpage. • Calculating font sizes. • Referring to a specific line

of coding to configure. • Configuring image sizes for








• RARPA document



• Practical/Graduated/ Computer Simulated Task: Individually, identifying the webpage elements, customising them in Dreamweaver and using them to create a complete webpage.

• Observation

• Problem Solving


• Projector











6 Adobe Photoshop within web development (1) 1. Load Week 6

PowerPoint & give out Week 6 hand-outs

2. Introduction to Adobe Photoshop & tutorial on its interface.

3. Tutorials on the tools available and how to create a new document.

4. Exercise 01 – Demonstrate how to create a background graphic using the gradient tool.

5. 10 minute lecture on ‘image file formats for the web’ and tutorial on how to save Photoshop files.

6. Exercise 02 – Demonstrate how to create a background graphic using the paint bucket tool and text tool.

1. Learners to update their RARPA document with their progress.

2. Listen / take part in discussion on Adobe Photoshop’s interface and tools.

3. Practice how to create a new document in Photoshop.

4. Exercise 01 – create a

background graphic using the gradient tool and save appropriately for web.


discussion on image file formats for the web.

6. Exercise 02 – create a

background graphic using the paint bucket tool, text tool and save appropriately for web.




and findings • Decision making Numeracy • Creating new documents to

specific document sizes (width & height).

• Calculating font sizes. • Colour codes. ICT • Photoshop (software) skills. • Using Computer hardware

(keyboard, mouse etc.) • Creating new & saving files.




• RARPA document



• Practical/Graduated/ Computer Simulated Task: Individually, design/create two background graphics using a number of tools in Adobe Photoshop.

• Observation

• Problem Solving


• Projector




• Image Editing Software (Adobe Photoshop)







7 Adobe Photoshop within web development (2) 1. Upload Week 7

exercise files onto system for download.


3. Exercise 01 – Demonstrate how to create a banner using tools learnt previous week, the brush tool.

4. Introduce learners to www.brusheezy.com where brushes can be downloaded & used in Photoshop.

5. Exercise 02- Demonstrate how to resize images in Photoshop. Use files uploaded in Week 7 folder.

6. Exercise 03- Get learners are to use graphics created on a webpage template.

1. Exercise 01 – create a banner using tools learnt last week plus the brush tool, use download brushes from www.brusheezy.com and applying layer styles to specific layers.

2. Exercise 02 – Resize

images given by Lecturer (Week 7 folder) in Adobe Photoshop.

3. Download Week 7


4. Exercise 03 – Using

images created in Adobe Photoshop, apply them to a webpage template in the Week 7 folder. Webpage template can be customised using skills and knowledge learnt in Week 5.




and findings • Decision making Numeracy • Creating new documents to


• Calculating the width of the elements on the webpage.

• Image sizes (width & height).

• Colour codes. ICT • Dreamweaver &

Photoshop (software) skills. • Using Computer hardware

(keyboard, mouse etc.) • Creating new & saving files.




• RARPA document



• Practical/Graduated/ Computer Simulated Task: Individually, design/create a banner using varies tools. Apply graphics created over the last two weeks within a webpage template.

• Observation

• Problem Solving


• Projector




• Image Editing Software (Adobe Photoshop)





http://www.brusheezy.com/



8 Using CSS with Dreamweaver 1. Upload Week 8

exercise files onto system for learners to download.


3. 10 minute lecture on what is CSS, the advantages of CSS and how it works.

4. Exercise 01 – Apply fix.css to a website & customise.

5. Exercise 02 – Apply flex.css to a website & customise.

6. Exercise 03 - Demonstrate how SEO (Search Engine Optimisation) works and apply Meta Tags to a webpage.

1. Listen / take part in discussion on CSS.

2. Download Week 8


3. Exercise 01 – Configure

the fix.css file using Week 8 handouts and apply to website project.

4. Exercise 02 – Configure

the flex.css file using Week 8 handouts and apply to website project.

5. Exercise 03 – Apply

Meta Tags to a webpage template to enable SEO (search engine optimisation).














• RARPA document



• Practical/Graduated/ Computer Simulated Task: Individually, understanding how CSS files are customised and applied to a number of webpage’s.

• Observation

• Problem Solving


• Projector











9 The Assignment & Devising a Web Design Contact 1. Load Week 9

PowerPoint & give out Assignment Pack, information pack on devising a web design contract.

2. 10 minute lecture on questions to ask a client when collecting the requirements for a website project, producing a site & mind map for website project and planning a suitable website.

3. Issue Assignment. Discuss what is required, advice learners how to start and how to collect information from the internet for their website.

4. Monitor learner’s progress of their assignment.


discussion on devising a web design contact and planning a suitable website.

2. Read assignment pack.

Review / listen / take part in discussion on the assignment issued.

3. Start assignment.

Learners are to make a website to a specific brief. Learners can either start their project by creating their graphics in Photoshop first or choosing a suitable template and customising it to fit the requirements mentioned in the brief.

4. Learners to collect their

information using news website on the Internet and refer to Week 9 handout on how to download and save their data.





folders. • Creating new documents to


• Calculating the width of the elements on the webpage.

ICT • Dreamweaver, Photoshop

& Word (software) skills. • Internet Explorer (web



formats.




• RARPA document



• The Assignment. The assignment is created to practise the skills you have learnt within this course. The assignment will cover all the material you have learnt from the beginning of the course to the present.

• Observation

• Problem Solving


• Projector


• Week 9 hand-outs & Assignment




• Image Editing software (Adobe Photoshop)





10 The Assignment & Applying JavaScript (Animation) to your webpage. 1. Load Week 10

PowerPoint & give out Week 10 hand-outs.

2. 10 minute lecture on

uploading a website onto the World Wide Web and where to buy a domain name & web space from.

3. Continue to monitor

learner’s progress on their website assignment. Tell learners to use the checklist on the back of the assignment.

4. Explain & demonstrate what JavaScript is and how to apply it to a webpage.

5. Feedback on websites created for assignment.

1. Listen / take part in discussion on how to upload a website onto the World Wide Web and where to buy a domain name & web space from.

2. Continue/Complete

working on assignment. Learners should be transferring their data (text & images) onto their designed webpage’s and decorating it. Also conclude by adding links and testing uploading it onto an online server.


discussion on JavaScript and apply to assignment website (if completed).

4. Give feedback to peers

on websites created.

5. Learners to complete

their RARPA Document and hand in to Lecturer.







a webpage. • Colour codes. ICT • Dreamweaver, Photoshop

& Word (software) skills. • Internet Explorer (web



formats. • Saving files to multiple

drives/servers.




• RARPA document



• The Assignment. The assignment is created to practise the skills you have learnt within this course. The assignment will cover all the material you have learnt from the beginning of the course to the present.

• Observation

• Problem Solving


• Projector


• Week 9 hand-outs & Assignment




• Image Editing software (Adobe Photoshop)



Scheme of Workd for the Web Design for Beginners (using Adobe Dreamweaver CS6) course

Education

Transcript of Scheme of Workd for the Web Design for Beginners (using Adobe Dreamweaver CS6) course