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-bottom: 20px;
padding-right: 10px;
  • Can you work out, independently, where to put the above lines?

Badge It

  • Silver: Create two inter-linked web pages with the same style that you have been following throught out this unit.
  • Gold: Your rightbox now should have some text and at least one image. Sometimes, it is very convenienent to use tables to orgainise our content or images. Please follow this tutorial carefully to add a table in your rightbox.
    • challenge can you look up online how to style a table using CSS?
  • Platinum:
    • So far, we have learned how to style our webpages by placing some CSS (cascading style sheet) code between the start <style> and the </style> tags.
    • Professional web developers prefer to use separate CSS files also known as external style sheet so they can use the same style sheet on different webpages without have to write the same code again and again.
    • Using an external style sheet is especially useful when you want to change the look of all your webpages. Because you only need to change one style sheet file and then all the webpages use this style sheet will all have been changed.
    • Please have a look at this link to learn how to create an external style sheet and include it in all your webpages.
    • Upload your separate style sheet file and the html files that you have linked your style sheet to.

Validate