Eat Your Words! Creating webpage Layout

CONTENT The Layout of a Webpage HEADER FOOTER Each of these sections represents a ‘div’ (or divider). By linking these to a class within a CSS file, you can change their look and where they appear on the page.

The Layout of a Webpage Use a simple program such as PowerPoint to draw an image which consists of: -a header (or literally a head) -a middle, which should be plain -and a footer (the jaw) Group all the objects, then save this as an image.

The Layout of a Webpage Paste your image back into Powerpoint three times and crop each image to create three distinct sections. Each section must be of equal width. The middle section, must be plain as this will be repeated to make a wider mouth. Save your images as top.png, middle.png and bottom.png

The basic HTML Create a new.html file in WordPad and save it as index.html Any text between is a comment and won’t be seen. A div tag represents a box within the page (a bit like this text box) Divs will automatically appear underneath the one above by default.

DIV Tags A div tag represents a box within the page (a bit like this text box) If you put a div inside another (ie. Top, middle and bottom are all inside container), then they will appear as a box within a box) CONTAINER DIV MIDDLE DIV TOP DIV BOTTOM DIV

Using CSS At the top of your HTML is a link to a css file called style.css This file contains all the code which tells the browser what the page will look like. By linking to the CSS file, each time you update style.css the index html page will change too!

Using CSS In WordPad, create a new file called style.css and save it in the same folder as index.html Add in the following code. Make sure that your ‘top.png’ image is saved in the same file and is the correct number of pixels wide & high.

What the CSS Actually Means A. before a name means that is it a ‘class’ which you have created. This is a name of an html object that you have created such as a Div. Setting the container margins to 0 Auto means that the Div will sit in the middle of the page.

What the CSS Actually Means Setting a background image for the Div means that we can use our images to fill the boxes that we are creating on the page. By adding position:fixed to the style, this attached the div to the top of the webpage and when you scroll down, the image moves down with you!

Using CSS Keeping your WordPad documents open, open up your index.html page in a web browser to check how it looks. When you open up your index.html page in a browser, you should see just the header image in the middle. Don’t worry if your transparent section looks a bit scruffy right now. This will look different soon!

Using CSS Using WordPad, add this new class to your style.css file. This will create a middle div which repeats the plain pattern for the mouth for as long as needed.

Using CSS Keeping your WordPad documents open, open up your index.html page in a web browser to check how it looks. When you open up your index.html page in a browser, you should see the header with a long strip of your middle section repeated over and over. Because you made a plain middle section, you won’t see the repeats. It should look like a single block of colour.

Using CSS Using WordPad, add this new class to your style.css file. This will create a bottom div style which is a fotter for your webpage. With a bottom margin of -15px, this means that your jaw stays firmly at the bottom of the page!

Using CSS Keeping your WordPad documents open, open up your index.html page in a web browser to check how it looks. When you open up your index.html page in a browser and scroll down to the bottom, you should see the header with a long strip of your middle section which eventually meets the bottom ‘jaw’ of your image. To finish the design, all we need to do now is add content to the Webpage.

Adding HTML Content As you did with your first website, use (heading), and (paragraph) tags to add in some content inside the middle Div. To make your page grow with your content, comment out the height attribute in the style sheet for the ‘middle’ class.

Adding HTML Content Keeping your WordPad documents open, open up your index.html page in a web browser to check how it looks. When you open up your index.html page in a browser and scroll down to the bottom, you should see the header with your content in the middle section. As you scroll through your text, it will appear as if it is being eaten… Use this template to create a blog of each theory task that you learn in computing.