1. Today’s Lesson….. 1.Formative Assessment Given Back – Go through Answers. 2.Webpage Design.

2. Webpage Design

3. Lesson Objectives. - You (the student) should be able to understand how the rule of thirds can be used to create an aesthetically pleasing web page. - You (the student) should be able to understand that there are three different types of colour scheme (monochromatic, analogous and complementary) that can be used in the creation of aesthetically pleasing web pages. - You (the student) should characterize and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax

4. Success Criteria. -You (the student) are able to modify a css file to create three web pages that uses the rule of thirds & each one uses either (monochromatic, analogous and complementary) that can be used in the creation of aesthetically pleasing web pages. -You (the student) are able to characterise and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax

5. Warm-Up Exercise. HTML & CSS Students go to www.Kahoot.it Teacher: www.create.kahoot.itwww.create.kahoot.it

6. Task 1. Describe what you think a good website looks like? Make a list of the styles and structures that go into making a good website, use examples of sites that you use every day.

7. Web page design is an art. There are several rules that you can follow to help make a professional looking website.

8. Rule of Thirds. A piece of work is divided into 9 even squares. The rule of thirds comes from traditional art, especially photography.

9. Rule of Thirds. Eye-catching items should line up near the intersections of these lines for the most impactful results. The rule of thirds comes from traditional art, especially photography.

10. Rule of Thirds. The ideal goal is to capture something in a unique way that draws attention into some part of the photograph. The rule of thirds comes from traditional art, especially photography.

11. Rule of Thirds. You want inequality because this forces some elements to appear more significant than others. The rule of thirds comes from traditional art, especially photography.

12. Rule of Thirds. It relates in the same way that you would draw attention to certain pieces of a photograph. The rule of thirds & Webpage Design.

13. Creating an HTML 5 Webpage using the rule of thirds. 1. Adding the components.

14. Rule of Thirds. HTML 5 Tags & Layout. Creating a Webpage in HTML 5.

22. Creating an HTML 5 Webpage using the rule of thirds – part 1. Task 2. Download the document html 5 – template.html & open in web browser.

23. This is what we want. This is what we get.

24. Creating an HTML 5 Webpage using the rule of thirds – part 2. 3. Add a Cascading Style Sheet (CSS). Download styles.css & join it to your html file. Use Notepad ++

26. Colour Schemes. 1.Monochromatic 2.Analogous 3.Complementary

27. Monochromatic. Monochromatic colour schemes are derived from a single base colour. The base colour is extended using its shades, tones and tints.

28. Analogous. Analogous colors are colors that are adjacent to each other on a color wheel.

29. Complementary. The diagram shows colours that are opposite each other. Examples of include: red and green blue and orange yellow and violet.

30. Colour Schemes. Task: Redesign the Rule of Thirds Website using three different types of colour scheme. Monochromatic Analogous Complementary

31. Colour Schemes. Task: Email the screenshot to teacher. cockerill_g@ast.nis.edu.kz

32. 3 DIFFERENT METHODS FOR CREATING WEBSITES 1.Text Based 2.WYSIWYG 3.Content Management System (CMS)

33. 1. Text Based Systems.

34. A text editor is a type of program used for editing plain text files. Text editors are provided with operating systems and software development packages, and can be used to change configuration files, documentation files and programming language source code.

35. 2. WYSIWYG.

36. HTML editors that support What You See Is What You Get (WYSIWYG) paradigm provide a user interface similar to a word processor for creating HTML documents, as an alternative to manual coding. Achieving true WYSIWYG however is not always possible.

37. 3. Content Management System (CMS.)

38. A CMS or a 'Content Management System' quite literally allows you to control and manage the content within your web site - without technical training. Using this uncomplicated system you can very easily add, delete images and edit text in your web site on the fly.

39. Task 5 In pairs collect information that compares the pros and cons of each of the three methods of website creation. The contents of the web page will characterize and compare various editors for creating web pages according to the quality of the interface, capabilities, semantics and syntax. Collect pictures as well as text. You will use this information to create a webpage.

40. Task 6 Start to create a webpage using the information gathered in Task 5. You will need to make use of & tags so that your page scales on different devices. You must create a css file that makes your webpage aesthetically pleasing by using the rule of thirds and a recognized colour scheme.