Web Design

Next steps

Learn It

  • After you have done everything so far, you should see something similar to the following image when you open your index.html in a browser:

page-8.png There are several things we can do to improve this page:

  • Leave some space between the boxes
  • Leave some space between the text and image from the border of the two boxes
  • Add an image to fill the blank space in the topbox
  • Make the heading "My Dog Jack" bigger
  • Change the page's background colour from white to something more interesting

page-finish.png

Code It

  • Space between boxes - add space between the topbox and the container.

Let's examine the box model below: A box has top, buttom, left or right margin. By default all the four margins are zero.

  • The model shows that the top margin is what we need to achieve the space between the topbox and the container which contains the left and right box inside it.
margin-top: 10px;
  • Can you work out, independently, where to put the line margin-top: 10px;?

Code It

  • Lets add some space between the left and the right boxes.
  • If we add a margin using the right box, we will use its left margin; if we add a margin using the left box, we use its right margin.
  • Important note: if we add a margin to a box, it will move to make room for the added margin.
  • For example: if we add 10px of margin-left to the right box, it will move 10px to the right. This may result in the right box moving outside the big container and mess up our layout!
  • To solve this problem, we need to decrease the width of the right box by 10px so that it will remain inside the container.
  • Before adding the margin:
#rightbox {
width: 640px;
height: 600px;
background-color: grey;
float: right;
}
  • After adding the margin:
#rightbox {
width: 630px;
height: 600px;
background-color: grey;
float: right;
margin-left; 10px;
}
  • Can you work out what changes made and why? If your image is out of place, can you fix it independently?

Code It

  • Let's add space between the content (text and image) and the box border.
  • We'll start by taking a look at what we have so far…

page-9.png

  • The hyperlinks inside the leftbox are too close to the borders of the box. We need to add some space between the box border and the hyperlinks.

box-model.gif

  • The model (above) shows that the padding is what we need to achieve the space between the box border and the content. Just as margin, padding also has four sides: left, right, top and buttom. After some experimenting, I found the following works best for me:
padding-top: 40px; 
padding-left: 10px;
padding-buttom: 20px;
padding-right: 10px;
  • Can you work out, independently, where to put the above lines?

Badge It

  • Decide on a topic you would like to make webpages about it.
  • Your topic could be pets, movies, games, your favourite football teams, music bands, etc.
  • Design your webpage layout using Paint or Word shapes tool.
  • Your design must be different from the tutorial one. Annotate each element on your design. For example, a picture of my dog, or general information about my dog. etc
  • Build your webpages one at a time based on the layout you designed. You need at least two pages that are linked.
  • Build the webpages using Notepad or SublimeText if available. If you are stuck, go to appropriate sections in the tutorials for instructions.
  • Once finished, write an evaluation of your project:
    • Is your design suitable for its purpose?
    • Is your design suitable for its intended audience?
    • Are all links correct?
    • Are the choices of colour, fonts, images appropriate?
    • Work independently and hand in your project at the end of term.
  • Silver: Create two inter-linked web pages using HTML.
  • Gold: Use CSS to style the pages.
  • Platinum: Use CSS with padding and margins to create your pages.

Validate