Web design...Design Basics - Techwatch Support Forums: Digital & Satellite TV, FTA, Cable, Computers, Mobile Phones, Apple and General Tech Forums

reiss · 30-10-10, 03:02 PM

If you haven't seen my previous post on getting started, have a look here - Web design...Getting started
I'm going to assume that you have all your software sorted and you're ready to build your first web site. You've probably designed your home page in image editing software like photoshop, you'll need to separate the images and save them for web, making sure you've reduced the file size of each image.

Site structure
It's important to keep things tidy at all times, your site may grow or someone else may have to work on it.
I usually keep my files in easy to navigate folders such as 'images/home' remember, don't use spaces for any files or folder names. If you need to use 2 words, use an underscore or hyphen - 'images/home_page/my-logo.gif'

Starting off
You should always start with 'index.html' & 'styles.css', call your style sheet whatever you want, but 'index' is the default name for most web servers, so use it.
The style sheet is going to define various style parameters throughout your site, it also keep things neat and ensures that you don't have to keep repeating code (repeating code = bad practice)

The first bit of code that goes into your style sheet should be what font you want to use, what margin your page has and any background colours or repeated images:

This bit of CSS sets the main font, it's size and colour (#CCC - light grey), the margin for the entire page, table data & table headers (margin:0px) (avoid table layouts where ever possible) and the background colour (black)

HTML Code:

body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #CCC;
    margin:0px;
    background-color: #000;
}

Your index page needs to know which style sheet to use, so you need to link your style sheet in-between the <head></head> tags like this -

HTML Code:

<link href="styles.css" rel="stylesheet" type="text/css" />

styles.css should be in the same folder as index.html for the above example to work

It's also good practice to put a title tag in their too, this shows up in the browser tab and is also what gets saved when people bookmark your site, plus it has SEO benefits. Like this -

HTML Code:

<title>Techwatch: Satellite TV forums, FTA, Cable, Hardware, Mobile Phones, Apple and Tech forums - Post New Thread</title>

The above example is this pages title tag, right click this page and select 'view page source' to see the code

So, you've designed your first home page to a nice standard width and are ready to start building the HTML, I'll assume your page is no wider than 1024px in my examples. I prefer my pages centred on screen, so I'll create a container (DIV tag) that my site will fit into. This is usually called a wrapper and is used on all of your pages. Open up your style sheet and define your wrapper like so -

HTML Code:

#wrapper {
    width:1024px;
    height:auto;
    margin:40px auto 0 auto;
}

The line 'margin:40px auto 0 auto' is shorthand for -
margin-top:40px;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
I find it a much neater way to work, the dimensions go clockwise - top, right, bottom, left. The left and right auto values will centre your div. The height auto means the div will stretch to fit whatever is inside it. That's it, your first div id is setup, now we need to write the HTML on our index page (between the <body></body> tags)

HTML Code:

<div id="wrapper">

</div><!--close wrapper-->

your entire site should now go in-between the opening and closing wrapper div. Make a note of the comment tag -  Your site could be several hundred lines long, so that closing div tag (</div>) will be way down at the bottom and you're going to want to know what div it's closing. I do this on all my closing div's, it's good practice and far easier to see what's going on.

Setting common styles
If you're going to use the same style more than once PUT IT IN YOUR STYLE SHEET. Lets say you want red text occasionally, define it like this in your styles.css -

HTML Code:

.red {
    color:#c82026;
}

and in your index HTML, you can then make a section of text red like so -

HTML Code:

<p class="red">Some red text goes here</p>

styles must start with a dot in your style sheet (.red) and div id's are defined starting with a hash (#wrapper)

That should be enough to get you started.

Good luck

30-10-10, 03:02 PM	#1 (permalink)
reiss Large Member Join Date: May 2008 Posts: 403 Thanks: 37 Thanked 106 Times in 78 Posts	Web design...Design Basics If you haven't seen my previous post on getting started, have a look here - Web design...Getting started I'm going to assume that you have all your software sorted and you're ready to build your first web site. You've probably designed your home page in image editing software like photoshop, you'll need to separate the images and save them for web, making sure you've reduced the file size of each image. Site structure It's important to keep things tidy at all times, your site may grow or someone else may have to work on it. I usually keep my files in easy to navigate folders such as 'images/home' remember, don't use spaces for any files or folder names. If you need to use 2 words, use an underscore or hyphen - 'images/home_page/my-logo.gif' Starting off You should always start with 'index.html' & 'styles.css', call your style sheet whatever you want, but 'index' is the default name for most web servers, so use it. The style sheet is going to define various style parameters throughout your site, it also keep things neat and ensures that you don't have to keep repeating code (repeating code = bad practice) The first bit of code that goes into your style sheet should be what font you want to use, what margin your page has and any background colours or repeated images: This bit of CSS sets the main font, it's size and colour (#CCC - light grey), the margin for the entire page, table data & table headers (margin:0px) (avoid table layouts where ever possible) and the background colour (black) HTML Code: body,td,th { font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #CCC; margin:0px; background-color: #000; } Your index page needs to know which style sheet to use, so you need to link your style sheet in-between the <head></head> tags like this - HTML Code: <link href="styles.css" rel="stylesheet" type="text/css" /> styles.css should be in the same folder as index.html for the above example to work It's also good practice to put a title tag in their too, this shows up in the browser tab and is also what gets saved when people bookmark your site, plus it has SEO benefits. Like this - HTML Code: <title>Techwatch: Satellite TV forums, FTA, Cable, Hardware, Mobile Phones, Apple and Tech forums - Post New Thread</title> The above example is this pages title tag, right click this page and select 'view page source' to see the code So, you've designed your first home page to a nice standard width and are ready to start building the HTML, I'll assume your page is no wider than 1024px in my examples. I prefer my pages centred on screen, so I'll create a container (DIV tag) that my site will fit into. This is usually called a wrapper and is used on all of your pages. Open up your style sheet and define your wrapper like so - HTML Code: #wrapper { width:1024px; height:auto; margin:40px auto 0 auto; } The line 'margin:40px auto 0 auto' is shorthand for - margin-top:40px; margin-right:auto; margin-bottom:0; margin-left:auto; I find it a much neater way to work, the dimensions go clockwise - top, right, bottom, left. The left and right auto values will centre your div. The height auto means the div will stretch to fit whatever is inside it. That's it, your first div id is setup, now we need to write the HTML on our index page (between the <body></body> tags) HTML Code: <div id="wrapper"> </div><!--close wrapper--> your entire site should now go in-between the opening and closing wrapper div. Make a note of the comment tag - <!--close wrapper--> Your site could be several hundred lines long, so that closing div tag (</div>) will be way down at the bottom and you're going to want to know what div it's closing. I do this on all my closing div's, it's good practice and far easier to see what's going on. Setting common styles If you're going to use the same style more than once PUT IT IN YOUR STYLE SHEET. Lets say you want red text occasionally, define it like this in your styles.css - HTML Code: .red { color:#c82026; } and in your index HTML, you can then make a section of text red like so - HTML Code: <p class="red">Some red text goes here</p> styles must start with a dot in your style sheet (.red) and div id's are defined starting with a hash (#wrapper) That should be enough to get you started. Good luck

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Web Page - Up-loadable images/prices and registration/email system	Simzter	Internet	1	02-11-10 10:50 AM
Web design...Getting started	reiss	Internet	0	30-10-10 02:01 PM
Design Magazine No.17 - 2010 Download Free	thachvisit	PC Software	0	07-09-10 02:40 PM
NY web designer claims he owns Facebook	Internet News	Internet	0	13-07-10 01:30 PM
Microsoft Office Web Apps now live in the UK	Internet News	Internet	0	08-06-10 12:00 PM