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'



---

Last lesson we saw that we could turn our code into a web page which we you can view in a web browser.

We did this by making sure we have a folder to store our web page

Folder Structure for you web pages.

Task 1

1. How to open your file using a text editor

   In order to create our web page we used a text editor notepad ++

   To open your web page file from last week

   

Save your file

Creating a layout using styling and dividers

One of the best ways we can layout our page is to use dividers. Dividers or divs enable us to split up and style different areas of our page.

Let's create the outline area for our page.

To do that we are going to use a divider <div> tag and style it with a border so we can see it.

Task 2

Create the block below in Edublocks, then copy the HTML code into your notepad file.

Your code should look like code below:

Your web page should look like this

---

---

---

Now let's change the size of the divider so it will be the full size of our page. To do that we need to add the styles Height and Width into our styling for our divider.

However this makes the styling in the blocks a little cumbersome and more difficult to reuse. So instead of doing the styling inside of our divider, we are going to style our divider in the Head of our web page.

To do that we have to give our style a name. Then we can use that name in our divider and it will do all the styling we use here inside our divider.

Change your code so it now looks like this:

We can have as many styles as we want in a class.

---

---

Extension- border style and background

The border has 3 properties the first is its width in pixels(px), in our case that is 1px the second is it's style which we have chosen as solid and the third is its colour we have chosen red

• Change the width of the border in pixels(px)
• Change the colour of the border using one of your hexadecimal codes you created last week when you designed your page

• Change the colour of the background of your outline divider by adding the background-color block inside of your class style block

Centering our divider on the page

Web pages that are not full pages tend to be created so that they are in the centre of the full page

We can do that to our page by adding a style called margin

However what we want to do can't be done with the margin block in edublocks, so we need to use the plain text block and type our code into it

If we set the properties of the margin to 0 auto then it will automatically centre our divider(div) on the page

Task 3

1. Add this to the end of your divider style: margin: 0 auto;

see example below

Click on the button below to see what your code would look in a web browser.
Click here

---

---

Extension

Screenshot your centred web page layout and your HTML code into your PowerPoint

---

Putting dividers inside of divider

Now we have our outside border created we are going to split our page up using more sections tags so that it looks something like this

---

Task 4

To do this we first need to split our page into 3 sections see below:

1. Let's first create the three sections for our page


---

2. Now let's create a styled area for our page header where our banner will go
3. Create another style underneath our first outline to call it .myheader and then style it the same as our first style i.e. width 1200px but set it's height to 100px see below:


Copy your code to your notepad file and save it and then refresh your browser and your page should now look something like this.

Click here

---

Extension

Can you add a class style for the Main part of your page using the divider tag <div> ?

Can you add a class style for the Footer to your web page using a footer tag <div> ?

Click here to see my example

---

Screenshot your code into your PowerPoint

---

Adding an image onto the page

Before we add in our own page banner let's first see how we add an image to our website. To add an image we need to put a link to it in the img src tag. Copy the link below and paste it into the img src tag.

---

Task

Now we know how to add an image we can look at adding the banner we created when we designed our web page

Let's first move our banner into our Web Design folder

if you haven't made a banner use the one below just so you have a banner image to use. Right click on it and save it as banner.png

1. Copy your banner into your Web Design folder and make sure its is called banner

2. Now write the name banner.png inside of your img src tag and make sure it is inside your header box

We cannot give edublocks a link to our banner as it is on our computer, so we will have to copy our code into our notepad ++ page to see this working.

You must put your banner and web page inside the same folder, "Web Design", for this to work.

3. After you have copied your code Save it and then refresh your browser and your page should now look something like this.
Click here

---

---

Extension

Can you add your own image to the the top of your web page?

Free web Headers

---

Can you add some text to go with your image ?

Screenshot your code into your PowerPoint

---

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.

---

You now have all of the tools you need to create your own page layout

use your powerpoint design you made is lesson one to guide you in your page design.

---

---

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