PHP practice 2


Layout user interface for website


I. General

Many years ago, table tag in HTML usually use for layout structure of website. Nowadays, because many of characteristics, CSS little by little replace table in layout website. By use, CSS for layout or format we easy find out usability, reuse... it's very difficult to find a website without using CSS. For references you can search on internet to find some html project template (like this one) to refer how to layout. However, in this practice, I do not focus on the perfect in interface, I just focus on understand the basic of layout technical.

II. Requirement

Use CSS to layout interface structure of website with some basic requirements:
  • Banner: put a big picture
  • Horizontal menu: show up some basic information about company or projects
  • Vertical left menu: show up list of company
  • Right zoon: show up products with small information
  • Footer: a little information likes copyright

III. Implement

  • Step 1: create html file, put name is index.html (in case you want to make html project), in this practice mainly talk about PHP so I put the name is index.php
  • Step 2: create CSS folder inside your project to store CSS file. After that, you create a CSS file with the name is style.css inside CSS folder
  • Step 3: make relation between style.css and index.php by drag CSS file into head tag.
  • Step 4: layout, but I think firstly you should refer style of layout in this book, chapter 9

layout website

IV. Video for layout details

V. The result of practice

layout result

Have fun and good luck, some suggests for you: