1. BUILDING A WEBSITE
7.4.3: Applying a Layout

2. STARTER ACTIVITY >> WEBSITE LAYOUT
Think about what you see on a website.
How is the website laid out?
What sections are there?
Can you think of different ways to lay out a website?
STARTER
ACTIVITY

3. THIS LESSON: LEARNING OBJECTIVES
In this lesson you will:
UNDERSTAND how to use the HTML tag <div> to apply sections to a webpage.
LEARN how to use CSS class to apply style to different sections.
UNDERSTAND how to include margins and padding to shape your webpage.
So that you can:
DEVELOP the homepage of your website.
The design will be used as the template to create websites in future lessons.

4. LAYOUT Any webpage can be broken down into sections, such as: Header
Navigation
Article
Sidebar
Footer
Some websites have less, and some have more. But layouts vary in the placement of these sections.
To create a layout, you need to acquire some different skills.
If you ever get stuck, do not panic or shout out. Take time to try and work it out yourself, then ask the person next to you. Lastly, ask the teacher.

5. LAYOUT
This lesson, we are going to work towards creating a basic layout, such as the one shown here.
On the next slide, you will see the HTML and CSS needed to create this template.
We will identify the key skills needed and then work on each one throughout this lesson.
You should then be able to create a layout for your own website.

6. HTML <div> TAG
Here is the HTML for the template that you just saw.
Using the <div> tag is the first stage of dividing your webpage into different sections.
Like the majority of tags, you need to use <div> to start your section and </div> to end your section.
We need to apply style to each section. To do this apply a class to each section. We can then refer CSS to a class, to apply the style to that section.

7. CSS Remember that we add CSS between the <style> tags.
Here we have CSS for each class / section.
The skills we need to introduce are...
CSS Float, Clear and Overflow.
CSS Box Model.

8. >> TASK: WEB PAGE LAYOUT: STAGE1 >> EXTENSION:
Add a new slide called ‘website’ layout.
Using shapes (under the ‘insert’ tab) build a template for your webpage.
Add labels to describe each section and outline what content will be there.
Write how your layout begins to meet the key elements of good website design.
Complete this task in your development diary.
Remember your diary is where you will showcase your work. Don’t be lazy with it! Be proud of your work!
Coursework is a vital skill to develop. Don’t just write short sentences. Explain and justify the design choices you have made. Discuss what you have learnt and how you applied it!
>> EXTENSION:

9. >>TASK: Sections
Open your Notepad++ from last lesson. Complete the HTML...
>>GOOD
Create several sections (e.g. header, article, footer…) in HTML using the <div> tag.
>>BETTER
Add content to each section, to start building up the content of your website. Use <h1> tags and <p> tags to add writing.
>>BEST
Add more sections and place images into your HTML.
Information from BBC Bitesize.
Do not worry about the CSS yet. We will do this later in the lesson!

10. CLASS REVIEW Have you created sections using the <div> tag?
Have you added content to build on the idea you had for a website?
Is your website starting to look how you imagined?

11. CSS: FLOAT CSS: CLEAR CSS: OVERFLOW
The float property is used for positioning and layout on web pages. The float property can be left, right, none or inherit.
The clear property specifies what elements can float beside the cleared element and on which side. Values are none, left, right, both or inherit.
If an element is taller than the element containing it, and it is floated, it will overflow outside of its container.
CSS: CLEAR
CSS: OVERFLOW
These are important skills to have in CSS, as they help improve the positioning of elements on your webpage.

12. CSS: BOX MODEL Think of each section as a box.
For each box you can apply a margin, border or padding.
Border will create a border around your box.
Padding helps to keep your writing away from the edge of your box.
Margin helps to leave a gap between boxes.
Remember that the size of your box equals the height and width of your content + padding + border + margin.
Information from BBC Bitesize.

13. >>TASK: Section Style
In your Notepad++...
>>GOOD
Use the examples to apply float / clear to each of your sections to get your layout.
>>BETTER
Use padding and margin to improve your layout further.
>>BEST
Continue to update your website, by applying different font and colour styles.
Information from BBC Bitesize.
See w3schools.com for a helpful resource to improve your skills and website further.

14. CLASS REVIEW Have you achieved the layout for your website?
Did you use the examples or change them to meet your own needs?
Are you happy with your work so far?

15. >> TASK: DEVELOPMENT DIARY UPDATE >> EXTENSION:
Add screenshots of your work to your development diary.
Add a write up about what you have achieved and how you did it.
Think about what else you would like to learn to be able to build your website further.
Remember your diary is where you will showcase your work. Don’t be lazy with it! Be proud of your work!
Coursework is a vital skill to develop. Don’t just write short sentences. Explain and justify the design choices you have made. Discuss what you have learnt and how you applied it!
>> EXTENSION:

16. TASK REVIEW Show your website to the person next to you.
Ask questions about the work.
Give the work a rating out of five stars.
Can you offer feedback? What is good about the work? What could be improved?

17. PLENARY: Epraise Questions
What is the HTML tag to divide your web page into sections?
What can be used in CSS to position two sections next to each other?
What are the parts of the box model?
How would you work out the total area of a section?

18. NEXT LESSON
We will introduce new skills using HTML and CSS to develop your website further.