Single Page Website with CSS Layout
For designing and developing an effective, good looking website, it is important
that you have a good knowledge of HTML and CSS. While HTML helps you to put your
actual contents on web pages, CSS takes care of the presentation part. CSS is used
to separate the presentation part from your contents which in turn makes your web
pages light-weight and more readable. It significantly reduces your page load time
and helps your website attain better positions in search results.
Here, we will learn to plan, design and create a single page website with simplistic
look. The purpose of this tutorial is to take you through the process of website
design, deliberating layout essentials and encourage you to start building websites
yourself. We will create one page website here, but after you are familiar with
the process, it should not be difficult for you to create more complex websites.
This tutorial is intended for those who have some basic knowledge of HTML, but it
does not require any previous knowledge of CSS. We will start here from scratch
and build a fully functional website. This step by step tutorial will also help
you to understand the basic concepts of CSS. After you complete
this tutorial, you should be able to start building decent and effective websites
on your own. In the process, we will create an HTML file and a CSS file and learn
how to link them together. For demonstration purpose, we will use one of the websites
created by me - Sangla Holiday Home. Just have a look what we will build at the
end of this lesson:
This is an example of a simple One Page Website.
I created this website in 2 hours flat on request of a friend. I don't claim that
it is beautiful, but it will certainly help you to understand the concepts of
CSS Layout and website design. Wherever necessary, I will
explain about the css rules and attributes and also recommend the best practices.
Basic Website Design
As you may notice, there are four major sections of this website - Heading Section,
Links Section, Content Section and Footer section. All the sections used in this
website are rectangular and we will use <div> tags for them. The div
is nothing but an empty rectangular container which is used along with CSS for placing
the contents in websites.
As for any website layout design, the width can be defined either in pixel (fixed
width) or in percentage (varies with display width). Both have some advantages and
disadvantages - you may go through our article on
Website Design Considerations for more information on this. Here we will
use the fixed width layout.
Directory and Files
First thing you need to do is to create two folders in the root directory (named
as 'htdocs' or 'wwwroot') of your website - 'images' and 'css'. Now create a new
'html' file in root directory and name it as 'default.html'. Also create a new 'css'
file. You can do this by saving a text file with '.css' extension, just like html
file. If you are using windows, open Notepad and type /* CSS File */
and save it as default.css in your 'css directory'.
In css, the text between '/*' and '*/' is treated as comment. It is a good idea
to keep writing comments. This makes the code easy to understand and takes lesser
time to make any change later on. We will keep the image files in 'images' folder.
As of now download and save the
image used in background of 'heading' section.
This is all we need to start!