Getting organised

1. Set your Learning Objectives to red.

2. Open up your PowerPoint from last lesson it should be called 'Web Design'.

To download the PowerPoint by clicking on the image below

Save your PowerPoint as 'Web Design'



---

We now want to divide our main page into sections so that we can put our text and images together and make them look good

To do that we need to use another style called display: inside of our divider tag style section.

The value we need to give to our display style is :inline-block this stops the next tag starting on a new line when we add it.

See my example by clicking on the button below I have made the background of my header box white.

Click here

Task 2

1. Split your main page into three sections and make the French flag

See my example by clicking on the button below (my colours are the wrong way around).

Click here

We can use a % for our width rather than pixels that way whatever the size of our outside border it will always chage to fit it.

---

---

Extension- Divide your main section

• Change your main page so that it is spit into the number of sections you want. Add some text and images into the sections.

---

In order to complete our web page template we need to have some way of navigating between pages

Task 1

1. Create a navigation bar using the code below.




---



---

Extension- My Colours

Change the colours of the buttons to your own colours.

Now that we have created a navigation bar we need to add it to our main page

This is where things can get a little tricky as we have created our navigation bar on a seperate page. The reason for this is that things get a little difficult to follow on Edublocks when we have so much code on a single page. So we are going to start using edublocks to create page parts like we did with the navigation bar and then copy them into our main page using the HTML code.

Task

1. Add the navigation bar code to your main page code using the example below to help you.



2. So that it looks like this:


3. So when you run it your page looks something like this:



---



---

Extension

4. Can you make a copy of your main page and save it as "page2", so you can hyperlink to it?

---

Summing it all up

Lets look at the learning outcomes and decide which one best describes our current level of understanding :

Tick the one you feel is closest to your level