Web Design

Objectives

Developing Programming and Development (learning strand) skills, specifically:

  • Understand that CSS is a model for formating HTML web pages
  • Understand that CSS organises web contents in "boxes" - the box model
  • Be able to apply CSS box model to an element of a web page

Styling

Learn It

  • Now you have two web pages. They are not much to look at although you can navigate from one page to another. To build a good quality web site, you need to think about a few things carefully:
    • What do you want to be on your web site?
    • What do you want to be on your homepage?
    • What is your target audience?
    • Are layouts and choice of colours and fonts appropriate for the contents and target audience?
  • It is a common practice for web designers to sketch some layouts of web pages, then web developers use those designs to write html code.
  • The following image showing an example of such sketch of layout.

design-sketch.jpg

  • This is the original Twitter concept sketch!

twitter-concept.jpg

Design It

  • Sketch your own web page layout design. To do this:
    • You can use pencil and paper,
    • You can use Word's shapes or textboxes,
    • You can also use the Paint program,
  • Be sure to annotate the elements of your layout
  • The following is a sketch of layout for the homepage (index.html) this tutorial will use to make our homepage look nicer. It was created using Paint.

sketch.png

Learn It

  • Web pages are made of different areas.
    • Some headers to say what the page is about.
    • Some links to take users to different pages.
    • The main area will be the place for the main content for that page.
  • You can say web pages are made of different shapes and sizes of boxes, and you are absolutely right. In this section, we are going to learn the box model of web design.
  • All HTML elements can be considered as boxes.The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:

box-model.gif

  • Margin: Clears an area around the border. The margin does not have a background color, it is completely transparent.
  • Border: A border that goes around the padding and content.
  • Padding: Clears an area around the content.
  • Content: The content of the box, where text and images appear
  • Size: The size of the box can be defined by width and height in unit of number of pixels.
  • Follow this link to see how to style an element using this box model.
  • To give an idea of scale, the following shows a box with the size of 100x100 pixels as displayed in your browser.

100pixels.jpg

Code It

sketch.png

  • There is a video tutorial for this week and next week's coding to help you along.
  • Let's create the layout shown above using the box model. First, we'll define the top blue box.
  • Open your index.html file with Notepad.
  • Let's give the blue box a name, topbox. This will let the web browsers know which part of the webpage we are talking about when we write code for it.
  • Add the following lines just below the <body> tag.
<div id="topbox">
</div>

Your index.html should now look like this: topbox-style-1.png

  • The <div> tag is for defining a division or section on a web page. In this case, we defined a section or division called "topbox". Right now there is no information about the size, colour or content about the division yet.

Code It

  • We'll now create the layout using the box model, and style the top box.
  • We have our top box defined in the index.html file. But if you open the index.html file with a browser, it will not show up. The reason is we have not defined the size and colour of the box yet.

To do this, we need another new tag <style> plus some attributes to tell browsers the size and colour of our topbox. Since <style> is not the actual content on the page's body, we need to add this style information within the <head> tags like so:

<!DOCTYPE html>
<html>
<head>
<title>My Dog Jack</title>
<style> 
#topbox { 
width: 800px; 
height: 100px;
background-color: blue;
}
</style> 
</head>
<body>
<div id="topbox">
</div>
<p>My dog Jack is a minature schnauzer. He is 8 months old.</p>
</body>
</html>

Test It

  • Create the layout using the box model - and then save the work and refresh your browser to see the changes.
  • Save your index.html file and then open it with a browser. You should see something like this:

topbox-page-1.png

  • If you don't see it, double check your index.html file to make sure there are no typos and unclosed tags: (use the following as your guide.)

topbox-style-2.png

  • The following is what you code should look like and what you web page should look like:

Code It

  • Let's now create the layout using the box model and add text to the box.
  • We now have a blank box with solid colour. Let's add some text to the box as the heading to our home page. We are going to use a new tag, heading tag to do this.
  • Before we start, can you work out where we should place this heading text in the following lines?
  • Only partial code from index.html is shown.
<body>
<div id="topbox">
</div>
<p>My dog Jack is a minature schnauzer. He is 8 months old.</p>
</body>
</html>
  • Since we want the heading to be inside the box, we need to put it in between the <div> tags. There are six different heading tags you can use, from <h1>, <h2> to <h6>, each resulting in a different font size with <h1> the biggest and <h6> the smallest.
  • You might have guessed correctly, we need to add the heading like so (I used h2 here):

Only partial code from index.html is shown.

<body>
<div id="topbox">
<h2>My Dog Jack</h2>
</div>
<p>My dog Jack is a minature schnauzer. He is 8 months old.</p>
</body>
</html>
  • After you added the heading to your index.html file, save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.
  • You should see something similar to this:

topbox-page-2.png

Code It

  • We'll now create the layout using the box model, adding style to the heading.
  • Our topbox now contains the heading. The heading text has the default colour black. We need to change the text location and colour to make the topbox of our home page look nicer.
  • To style the heading text, we need to add some style attributes to the heading tag. In this case the h2 tag.
  • To style the h2 heading, the following lines of code need to be added:
h2 { 
color: yellow; 
text-align: center; 
}
  • Note that two attributes are used to define the style of <h2>.
  • …also, the attribute color is spelled the American way.
  • color: yellow; is the syntax for defining the heading text color as yellow.
  • text-align: center; is the syntax for defining where the heading text should be placed inside the topbox.
  • You can also use text-align: right; if you want the heading text to be placed on the right-hand side part of the topbox.
  • Add the above lines of code inside your index.html file. Try to work out where to add those lines independently.
  • Save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.
  • If you don't get the result right, here are some tips for debugging:
    • Check there are no spelling mistakes for attribute names and attribute values.
    • Check American spelling is used for the word color
    • Check there are no missing : , ; , or {, or } symbols.
  • Your page should now look like this…

topbox-page-3.png

Badge It - Self Assessment

learning strand: Programming and Development

  • Complete the tasks for this lesson. Save your work.
  • In lesson two you used the trust system to rate your own progress. Lets see how you are getting on.
  • If you find there are things you still cannot do, this will be the good chance to catch up by asking your teacher or re-read the instructions.

When you are ready, click here to assess your progress.