1. New Horizons Computer Learning Centers Website Software
Created by Ravinder Basra

2. Aims and Objectives Aims Objectives
This is the ability to use a software application designed for planning, designing and building websites.
Objectives
Create structures and styles and use them to produce websites
Select and use website software tools and features to develop multiple page websites with multimedia and interactive features
Publish and test multiple page websites with multimedia and interactive features

3. Website Development Cycle
Determine what website content and layout will be needed for each page and for the site
Start with Planning to Maintenance – Students to write down what they think the stages of this cycle are

4. Website Storyboard https://www.draw.io/
Determine what website content and layout will be needed for each page and for the site
- tool to create a basic storyboard

5. Website Site Map https://www.draw.io/
Determine what website content and layout will be needed for each page and for the site

6. Task Create Storyboard & Site Map
Scenario
You work for a local website design company. You have been contracted to create a website for a local fruit shop.
Show sample storyboard – sampleAssessment/sitemap.xml & template.xml
Create a sample storyboard & site map using:

7. Website Templates Plan and create web page templates to layout content
Demo freetemplates – freetemplates folder - ideas

8. Website Templates http://www.lipsum.com/
Plan and create web page templates to layout content
Images & text content

9. Task Introduction to Adobe Dreamweaver
Introduce Dreamweaver, interface, split view files panel
Dreamweaver folder/dreamweavercs6/lessons/lesson 1,2,3

10. Task Create a website template
Create induction Template from scratch – inductioncolumns3_nav.htm

11. Website Features & Structures
Select and use website features and structures to enhance website navigation and functionality
Free images
- selected ones
Images types

12. Website Features & Structures
Select and use website features and structures to enhance website navigation and functionality
Free images
- selected ones
Images types – compare -

13. Task Explore website features & structures
inductioncolumns3_nav.htm – save as template
Add images – from - selected ones – resize etc
Add video – from video folder
Add video – from youTube – embedded code e.g. <iframe width="560" height="315" src=" frameborder="0" allowfullscreen></iframe>

14. Website Stylesheets
Create, select and use styles to enhance website consistency and readability

15. Task Create Website Stylesheets
Explore style sheets and selectors
Move embedded stylesheet to external style sheet – code view – highlight styles – move to icon

16. Website Laws, Guidance & Constraints
Provide guidance on laws, guidelines and constraints that affect the content and use of websites.
Explain what access issues may need to be taken into account

17. Task Accessibility/Validation Tools
Cynthiasays
HTML
Demo these tools e.g. validator
CSS
Nibbler

18. File types
Explain when and why to use different file types for saving content

19. File types
Explain when and why to use different file types for saving content
Client side V Server side diagram/technologies

20. Task File types Server Side – asp, aspx, cfm, jsp, php
Explain when and why to use different file types for saving content
Server Side – asp, aspx, cfm, jsp, php
Client Side – html, htm, css, js, vbs,
Client side V Server side diagram/technologies
Data– pdf, xml, txt, accdb,
Can you think of any more?

21. File guidelines & conventions
Store and retrieve files effectively, in line with local guidelines and conventions where available.

22. Task File guidelines & conventions
Store and retrieve files effectively, in line with local guidelines and conventions where available.
What is camelCase notation? Provide examples.

23. Web Page Content
Prepare content for web pages so that it is ready for editing and formatting.

24. Task Create Web Page Content
Prepare content for web pages so that it is ready for editing and formatting.
Images
Meta Tags
Navigation Techniques - links
Media e.g. video
inductioncolumns3_nav.htm
meta tags & viewport,
templates & regions
CSS transitions – give drinks cabinet an image id; create id in css file, use css transition window to create a hover effect on the image
Form – rate us with radio buttons
Widgets
Text
Social Media
Blogs
Newsfeeds & Forms

25. Copyright
Organise and combine information needed for web pages in line with any copyright constraints, including across different software

26. Task Copyright http://www.copyrightservice.co.uk/copyright/copyright
ImagesCopyright.pdf
Explore several guidelines regarding copyright

27. Meaning
Select and use appropriate editing and formatting techniques to aid meaning
Comments, white space, indentation

28. Task Meaning Apply comments to your CSS & HTML code
Select and use appropriate editing and formatting techniques to aid meaning
Apply comments to your CSS & HTML code
Developer version V live version

29. Enhanced Web Features Can you think of any?
Select and use appropriate programming and development techniques to add features and enhance websites
Can you think of any?

30. Enhanced Web Features
Select and use appropriate programming and development techniques to add features and enhance websites
Dreamweaver Featured Add-ons
– demo a free one
e.g. paper printout patterns – background paper images – show for header or footer
Create an image gallery – see imagegallery.html – images same size and use behaviours to swap images, add behaviour to open larger image in new browser window. Show JavaScript code produced.
Dreamweaver lessons - Lesson10 – Adding interactivity

31. Download Information .zip .rar .pdf .odt .docx
Select and use file formats that make information easier to download
.zip
.rar
.pdf
.odt
.docx

32. Webpage Needs
Check web pages meet needs, using IT tools and making corrections as necessary
Website Performance
Site Analyser

33. Task Webpage Needs Validation Tools in Dreamweaver
Link checker, validator, site reports, spell checker

34. Publish & Test
Publish and test multiple page websites with multimedia and interactive features

35. Task Publish & Test Cross-browser testing tools/services
Publish and test multiple page websites with multimedia and interactive features
Cross-browser testing tools/services
IETester ( - Free browser compatibility checker from Core Services for Internet Explorer Versions from 5.5
IE Netrenderer ( - Free site allows you to check how a website is rendered by Internet Explorer from current versions back to 5.5
Use FTP client to upload to a folder on desktop – e.g. server

36. Quality Problems
Identify any quality problems with websites and explain how to respond to them
Respond appropriately to quality problems with websites to ensure outcomes are fit for purpose
PowerMapper ( Checkpoints include : accessibility, broken links, browser compatibility, SEO

37. Quality Problems 1) Functionality Testing 2) Usability testing
Identify any quality problems with websites and explain how to respond to them
1) Functionality Testing
2) Usability testing
3) Interface testing
4) Compatibility testing
5) Performance testing
6) Security testing
What do these mean?

38. Task L Quality Problems
Identify any quality problems with websites and explain how to respond to them
1) Functionality Testing e.g. all links, forms, validation
2) Usability testing e.g. navigation, content
3) Interface testing e.g. apps, servers
4) Compatibility testing e.g. browsers, mobile devices
5) Performance testing e.g. web stress testing
6) Security testing e.g. break a login screen
Show demo – testPlan.docx
Create a test plan based on the above e.g. browser support

39. Upload & Publish
Select and use an appropriate program to upload and publish the website and make sure that it will download efficiently
FTP clients

40. Task Upload & Publish
Dreamweaver’s FTP client

41. Sample Scenario Scenario
You are tasked with creating a website about the module you are studying(website software), to help other apprentices. You need to advise on what content is permissible and how best to create their site to enable a quick download on the internet and maintain as small a storage requirement as possible. The site must have a minimum of five pages including both internal and external links and a variety of other advanced features, such as mouse roll-over and links to audio/video features (whether these are stored within the website or externally).

42. Task Sample Tasks & Questions
Download sample, copyright free, images
Create a simple storyboard with 5 distinct features
Create a template in Dreamweaver based on your storyboard. Use cascading style sheets for styling. The template should include features such as: navigation structures, media content, and suitable text.
Create an image gallery in Dreamweaver
Embed a suitable video from Google YouTube into a webpage
Create a suitable test plan for your website
Test your website using automated tools
Upload & Publish your website

43. Q&A