How Do I Make The Page Go Side Introducing Web Page Design

How do I make the page go side by side?

Unless you know other programmes, design your page in Publisher.

You should start a BLANK webpage

If you know Dreamweaver, you can use CSS (Cascading Style Sheets), but I won’t be going through CSS in the lesson.

Today

Do a rough draft of your home page.

You can put ‘placeholders’ for pictures you will take later.

The screen should look like this

Why do you think it is such a long page?

You need to think about what would be visible on MOST screens and what you would have to scroll to.

How to make columns and put things side by side

Make a table.You are going to use this

to help you put things in the correct place just like you used boxes when designing a front page. Remember, you will end up not having the boxes show.

Notice how the table can help you organise

The CHS logo is in the top left box on the table. The Head’s picture is a few boxes over – again at the top.

Notice, I have some coloured boxes. I might use these for a navigation bar.

You need to use think about the layers on your page

Use the drop down from the Arrange menu to move things to the front or back. There are also icons and shortcuts (F6/SHIFT F6) to help with this

Want to see how it looks on a webpage?

Go to web page preview under the file menu

This is how it would look in a browser?

What are the problems?

-purple bar doesn’t go all the way to the top.

-Head’s picture skewed.

-poor colour design

-where’s a main heading?

I want a big place in the middle for text.

Highlight the boxes you want to be all one big piece of text.

Now use Merge Cells under the Table menu

Remember, it is annoying to change this later if you decide you want a different shape shape to write. This is why planning is important.

Now use the fill tool to fill with the colour you want

-Again, you will want to read up on colour theory for your final essay. (remember, these are light not ink colours

-think about what each colour symbolises.

Click the text tool and write.

Remember to choose the font you want, the colour, size of font, weight of font, etc.

We will do a lesson on which fonts work on the web.

You will want to label your navigation bar.

Remember to align the text in the box according to your design.

You will want to think about the CONTRAST of colours.

We won’t add the hyperlinks this lesson.

Pupils who know other programmes can make buttons in other programmes.

Preview again

What types of design problems do I have?

-poor colour design

-no font design

-needs to think more about different types of screens – when people will have to scroll for Head’ picture

-where is the footer?