Jump to content
superfireydave

Building a Website

Recommended Posts

Ever wanted to build a website, but weren't sure how to start?

Read onwards!

 

What's involved in building a website?

 

Well, there's quite a few things depending on the type of website you're looking at building. We'll keep things simple for now though and talk about a simple "static" 1 page website.

 

You need to have an idea of a layout. What the site looks like.

You also need to have an understanding of HTML (HyperText Markup Language). HTML is the code that is used to encapsulate the content you want on the page.

For example, you might wish to display the following:

 

This is my page!

 

I like pie!!!!

 

With HTML, it would look something like this.

 

<b>This is my page!</b>

	<p>I like pie!!!!</p>

Forum or BB code (the code you use to format on this very forum) is very similar to HTML, so if you're familiar with that HTML shouldn't pose too much of an issue for you.

 

Thirdly, you need to have an understanding of CSS (Cascading Style Sheets). While HTML is purely to encapsulate data, CSS is purely to format and style it. Together, these technologies help seperate the presentation of the page, and the data that the page contains making it much easier to change either.

 

If you're new to all of this, you might want to take some time to look at a few tutorials so you can understand where we're going to go next.

HTML Tutorials -> http://www.w3schools.com/html/html_intro.asp

CSS Tutorials -> http://www.w3schools.com/css/default.asp

 

 

 

So now you should have a fairly basic understanding of HTML, CSS, and what is required to build a webpage. Let's get going!

We're going to be building the layout I've done here here. All the files for this next part can be found in a .rar archive here.

 

Analysing the Layout

After extracting the archive, take a look at the layout.jpg file enclosed. There are 3 main parts to it. There's the logo, the content on the right hand side, and the box in the lower left. There's also a gradient background on it.

 

The logo is an image as opposed to just being text, so we'll need to cut out an image for it (these are already supplied in the image folder of the archive) however the content is just plain text. The box is also an image, so we'll need to cut that out as a seperate image.

What about the gradient though? Should we take the whole background? No. What we can do using CSS is use a very small section of the gradient, and we can tile it across the background. So we cut out a segment that is as tall as the background (600px) but only 1px wide. We'll be tiling it horizontally, so you'll see the exact same background you see in layout.jpg.

 

 

Starting the HTML

Open up the index.html file included in the archive in any text editor. I personally use dreamweaver, but that's expensive for what it is and notepad++ or even notepad is almost as good.

 

The first thing that goes in any html document is the doctype. It tells the browser what type of document it is. In this case, we'll use xHTML transitional 1.0. If you didn't quite understand that, don't worry. The next step should be more familiar - open the html tag. There's a little bit extra to my html tag because it tells the browser some more information similar to the doctype definition. You don't really need to worry about it now though. Finally, because I'm anal retentive, we'll also close the html tag to make sure that we don't accidently forget to do this later. I'll be closing all of my tags as I open them to avoid this issue.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
</html>

The next part should be more familiar, we'll open the body tags. Notice how I've indented them to make it easier to understand where we are in the HTML document.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<body>
	</body>
</html>

If you look at the layout, all of the page is centered. We don't want the content of our site to expand to fill the width of the browser. What we'll do to make it easier later on is start by opening a new div and give it the id "view". You'll notice I've got some weird stuff happening behind my closing tag. That's a HTML comment. I also comment whenever I close a div to make things much less confusing in big projects.

 

<div id="view">
</div> <!-- close view -->

 

Now for some actual content. We'll start off by doing the logo. We'll create a div with the id "header" and then create a H1 tag to put the information we're trying to encapsulate. Although the logo is an image, it's also good practice to have the text in the HTML document to increase accessibility. We're also not going to put the image in at this moment. So go ahead and create the div, create the h1, and then add in the data "Flow Creative Development" (or whatever text you wish to put in its place). Do all of that within the view div.

 

<div id="view">
	<div id="header">
		<h1>Flow Creative Development</h1>
	</div> <!-- close header -->
</div>

The next part we'll do, is to add in a little piece of code that might not make sense now, but we're going to use later to help hide the text when we put the image in. In between the H1 tags, and the text inside them add in a span tag and close it.

<div id="view">
	<div id="header">
		<h1><span></span>Flow Creative Development</h1>
	</div> <!-- close header -->
</div>

Great! Now we'll move onto the content on the right hand side. We've got a heading, although it's not as big as our main logo so we'll use a H2 tag. We've also got two paragraphs of text that we can encapsulate with the p tag. Finally, we should probably encapsulate the whole thing in another div to make formatting easier. So open a div and give it the id "content" then open up a H2 tag and add the heading "This is a website layout!". Close the H2 tag and open a P tag and add the first filler paragraph. Close the P tag. Repeat that for the second paragraph, and finally close the "content" div. Again, do this within the view div.

 

Here's how our code should be looking in full:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<body>
		<div id="view">
			<div id="header">
				<h1><span></span>Flow Creative Development</h1>
			</div> <!-- close header -->
			
			<div id="content">
				<h2>This is a website layout!</h2>
				<p>
					We’re using some dummy text here to help demonstrate what some real content would look like.  This is fairly commonplace, especially if you’re not 100% sure what the content will be, or if the site is going to be build around a content management system (more about that later).
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div> <!-- close content -->
			
		</div> <!-- close view -->
	
	</body>
</html>

 

Now we'll add the image of the box. We'll add it again, in the view div, and underneath the last bit we did. Create a new div with the id "boximage" and then open an img tag inside it. We'll add the box image. Make sure to specify its height, its width, and to also give it an "alt" attribute. This is also for accessibility, and makes your page of higher quality. I used the alt attribute "an image of a box".

 

<div id="boximage">
	<img src="images/box.jpg" width="405" height="200" alt="an image of a box" />
</div> <!-- close boximage -->

 

While we're working inside the view div, add an empty div near the bottom, and give it the id "bottom".

<div id="bottom">
</div> <!-- close bottom -->

It wont make sense at the moment, but we'll be using it later.

 

 

The last thing to do before we finish off the HTML is to go back up to the top and add in some head tags so we can give our site a name, and attach a stylesheet.

 

Add this code just after you've opened up the html tag.

 

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" />
		
		<title>A Webpage!</title>
	</head>

There's some more confusing stuff there. The meta tag tells the browser what character set is being used, and the link tag is telling us which stylesheet to use. The stylesheet should exist, but it doesn't have anything in it at the moment.

Finally, the title tag specifies the title for the website. This is the name that will appear at the top of the browser when you've got this page open.

 

 

 

So your final HTML code should look something like this:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		
		<link rel="stylesheet" href="css/stylesheet.css" type="text/css" media="screen" />
		<link rel="shortcut icon" href="images/favicon.ico" />
		
		<title>A Webpage!</title>
	</head>
	
	<body>
		
		<div id="view">
			<div id="header">
				<h1><span></span>Flow Creative Development</h1>
			</div> <!-- close header -->
			
			<div id="content">
				<h2>This is a website layout!</h2>
				<p>
					We’re using some dummy text here to help demonstrate what some real content would look like.  This is fairly commonplace, especially if you’re not 100% sure what the content will be, or if the site is going to be build around a content management system (more about that later).
				</p>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div> <!-- close content -->
			
			<div id="boximage">
				<img src="images/box.jpg" width="405" height="200" alt="an image of a box" />
			</div> <!-- close boximage -->
			
			<div class="bottom">
			</div> <!-- close bottom -->
			
		</div> <!-- close view -->
	
	</body>
</html>

And that's it for the HTML!

 

 

 

Go grab a drink or something, maybe some food because we're going to get started on the CSS.

 

CSS is different to HTML. It's not about encapsulating the data, it's about adding rules to format the data.

 

Let's get started and open up the stylesheet.css file found in the css folder of the tute files.

 

We'll start off by styling the body.

 

We'll add a background image to it (background.jpg) and we'll tile it across horizontally. We'll also set the margin to 0 and the padding to zero. The #fefefe denotes the background color which is what the user will see if there's an error with the background image. We're using #fefefe instead of plain white because it looks more natural, and is easier on the eyes. Plain white looks "too" clean in most cases, so avoid using it if possible. The same goes for complete black (#000000).

 

body {
	background: #fefefe url(../images/background.jpg) top repeat-x;
	margin:0;
	padding:0;
}

Now, we'll move onto the view id. We want to make it display in the center of the screen, and we also want to limit it to 1000px wide. Again, we'll set the padding to 0. To make it appear in the center, we set the top and bottom margins to zero, but then set the left and right margins to "auto". I'm taking a shortcut and using the shorthand version. You can also set them manually via margin-left, margin-right etc.

 

#view {
	margin:0 auto;
	padding:0;
	width:1000px;
}
Note that because view is an id, it has the hash (#) symbol infront of it, whereas because the body is a standard HTML tag it does not. Classes are notated using a period(.) and function almost indentically to id's however we're not using them here.

 

 

 

Next, we'll do the header. Remember how we didn't add the image into the header and we also left some text? Here's where we'll add the image in, and get rid of the text.

We need to set the background to be the logo.jpg file, and then we need to make sure the height and width of the header id is big enough to fit it, so make it the same size as the image. Finally, you'll want to adjust the top and left margin to make it sit further away from the left and the top.

 

#header {
	background: #fefefe url(../images/logo.jpg) center no-repeat;
	
	margin:0;
	margin-left:65px;
	margin-top:45px;
	padding:0;
	
	height:95px;
	width:360px;
}

 

To hide the text, we're going to do something sneaky. We're going to set the H1 tag to hide content that goes past its boundries, then we're going to move the span tag past the boundry and have it drag the rest of our text along with it - effectively hiding the text so we only see the background image.

 

#header h1 {
	overflow: hidden;
}

#header h1 span {
	display: block;
	margin: -150px 0 0 0;
}
We use the display:block attribute to ensure that it displays as a block (like an image is a block) and although we can't see the span because nothing is in it, it will behave like a block and push the boundry upwards so that the text will follow.

 

 

 

Onto the content on the right hand side again. It looks to be about 500px wide, so we'll set it to that width. The text is also aligned to the right, so we'll set that too. It's got a bit of a right margin too. What's special about it though, is that the bottom of the bottom paragraph will be in line with the box (at least, that's how it is in the layout so that's how we're going ot make it). Because of this, we're going to "float" the whole paragraph to the right. This is a similar way to how you would make a column layout.

 

#content {
	float:right;
	margin:0;
	margin-right:30px;
	padding:0;
	
	width:500px;
	
	text-align:right;
}

We'll now format the text for the H2 tag in the content. As with the previous H1, instead of targetting ALL H2 tags, we'll only target the specific tag in content. With the font-size, I've used an "em" measurement. One em is about equal to the width of a capital M, although this is not always the case. What it means though is that a person can increase the default font size, and our text will scale with it. This means that people with vision disabilities can easily read what we're saying. I've used a rich black, but it's not completely devoid of colour. This makes it easier on the eyes.

 

#content h2 {
	font-family:"Century Gothic";
	font-weight:bold;
	font-size:2em;
	color:#231F20;
	
	margin:0;
	padding:0;
}

The last bit for this content div is the paragraph style. Again, I've used em measurements. As with the H2 tag, I haven't used complete blackness, but rather a dark grey. This is much easier to read that solid black.

#content p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	color:#4D4D4D;
}

 

Almost done! The last main part is the boximage div, and we're going to position the picture of the box so it lines up with the gradient. We'll also float it to the left although this probably isn't completely necessary. We need to set the width and height to accomodate the picture, and then we'll set a margin from the top, and from the left to position it correctly.

 

#boximage {
	float:left;
	margin:0;
			
	margin-top:210px;
	margin-left:45px;
	padding:0;
	
	
	width:405px;
	height:200px;
}

 

The final piece of CSS we need to do is related to the bottom ID we put in before. With the floats we've used, it's possible for content to float up through the pieces we've positioned on either side. If we had a footer, it would appear much higher than we mean it to. By adding the following code to the bottom ID we make the div sit below our previous floats and correct any issues that we may have had if we were to add anything below the boximage div.

 

#bottom {
	clear:both;
}

 

We're done! Here's the CSS again in full:

body {
		background: #fefefe url(../images/background.jpg) top repeat-x;
		margin:0;
		padding:0;
	}
	
	#view {
		margin:0 auto;
		padding:0;
		width:1000px;
	}
		
		#header {
			background: #fefefe url(../images/logo.jpg) center no-repeat;
			
			margin:0;
			margin-left:65px;
			margin-top:45px;
			padding:0;
			
			height:95px;
			width:360px;
		}
		
		#header h1 {
			overflow: hidden;
		}
		
		#header h1 span {
			display: block;
			margin: -150px 0 0 0;
		}
		
		#content {
			float:right;
			margin:0;
			margin-right:30px;
			padding:0;
			
			height:auto;
			width:500px;
			
			text-align:right;
		}
			#content h2 {
				font-family:"Century Gothic";
				font-weight:bold;
				font-size:2em;
				color:#231F20;
				
				margin:0;
				padding:0;
			}
			
			#content p {
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:0.8em;
				color:#4D4D4D;
			}
		
		#boximage {
			float:left;
			margin:0;
			
			margin-top:210px;
			margin-left:45px;
			padding:0;
			
			
			width:405px;
			height:200px;
		}
		
		
	#bottom {
		clear:both;
	}

 

It's worth noting that when we're giving something a measurement of 0, you don't have to define it as being px or em. You can, but you don't have to as it makes no difference (I'm used to using px though, not quite sure why, but there's no reason for me to be doing so =P).

 

 

What did we just do!?

We've just converted a layout from a picture, to a website. We've done so without using tables (which is important as they are an accessibility nightmare) and we've seperated the content from the presentation via CSS and HTML.

 

Congratulations if you've gotten this far! You're well on your way to learning the internets and their secrets =P

If you have issues, feel free to take a look at the version I've completed here and you can download the files for the finished version here. If you've got any questions, don't hesitate to PM me and I'll try to get on it asap.

 

 

Where do I go from here?

Well, you can always go back to the w3schools links I linked above to polish your understanding of HTML and CSS. These two languages are the key to making nice websites (along with a nice layout of course!).

You can then start thinking about setting up your own website but to do that, you'll need a domain and some hosting first!

 

 

What is a domain, and how do I get one?

A domain is essentially a web address. atomicmpc.com.au is a domain. To be specific, atomicmpc is the domain name, and .com.au is the domain type.

 

.com domains are fairly common, and shouldn't be too expensive. Expect to pay around $10 a year for one, perhaps a little more. There are no requirements for a .com domain, other than the domain not already being registered.

.com.au domains are also fairly common, however these are more expensive. Around $15 a year (I've seen $25 for two years) but some places can charge as much as $75 for a year (which is way too much). The big thing with .com.au domains is that you can only get a .com.au domain if you also have both an ABN, and a registered business name. The web address must then have something to do with your business name (for example, I can legally obtain flowcreativedevelopment.com.au as I have regisistered flow creative development as a business name and attached it to my ABN). At least, that's how it has worked everytime I've had a need for a .com.au domain.

 

Before you jump to it and grab a domain, read the next section first as some hosting plans bundle domains with them.

 

I have my domain! What's hosting!?

A domain is the address on the internet of a webpage. How do you put the webpage on the internet though? With hosting.

Hosting is a service offered by quite a few companies, and basically they've got a server which is connected to the internet with some other internet technologies installed that mean when someone looks up a domain that links to their server, the server will send back a webpage to be displayed on screen.

You can host your own website if you really wanted to, but I don't recommend it because it's a bit of an effort - especially if you're new to everything!

 

I personally use dreamhost and have previously also used bluehost. Both are US based, but are fairly good value for money and have a heap of features which will be super useful if you continue to learn about making websites. Both give you a domain with a hosting plan too, so it can work out being a little cheaper than purchasing one individually, however, as they're US based hosts, they don't offer .com.au domains with them.

 

If you already had a domain, and just got hosting by itself, you're going to have to tell your domain to point towards your hosting company's "nameserver". You need to do this so that the domain links to the files on the server. Your hosting should have a fairly easy to follow guide on this though, and if all else fails we here at atomic can certainly help.

 

So you've got your website, your hosting, and your domain!

So upload it! You'll need to connect via FTP to your host, and upload to the web folder on your hosting (this differs from hosting to hosting, I put my sites in folders that have the same name as the site but yours may be completely different). Take note that when a user types in "www.mypage.com" into their browser, the server by default will return the index page - "www.mypage.com/index.html" so make sure you want your "home page" to be named index.html.

 

 

That's about all the technical knowledge you'll need in order to get a website up and running on the net, but here's some more information on making really good websites.

Best Practices

These are little things which don't seem terribly important, but increase the quality of your site by a substantial amount and mean that HTML and CSS peeps who are as stuck up as I am wont cringe when we view your source code =P

 

  • Don't use HTML to add colour or style things, that's what CSS is for.
  • If you want to replace text with an image, use the method we used with our H1 tag. This is preferable to just using an image in the html.
  • Don't use tables unless you're trying to display tabulated data (e.g. a table of exchange rates).
  • Use unordered lists (the li tag) for any navigation lists you have (like your primary navigation) because semantically, these are a list of links. As with everything else, you can alter the formatting using CSS.
  • When setting font sizes, use em measurements instead of px measurements. It might take a bit of fiddling to get right, but some of your users will appreciate it.
  • As I mentioned before, try not to use plain white (#ffffff) or plain black (#000000) as these look a little bit TOO clean.
  • Comment your code, but not excessively. Do make a note of which div you're closing, but don't write an essay about what this small piece of HTML does.
  • Use indenting in both your HTML and CSS to help readability.
  • Use CSS shorthand to keep your CSS files as small as possible (I sometimes don't bother with this for the sake of readability. It's up to you to make a decision about it though.)

More CSS shorthand information!

It's worth forming the habit of trying to keep your css as concise as possible - remembering that the smaller the file, the faster it loads.

There are several that are usually used;

- margin and padding. the values are read clockwise, beginning from the top. eg, instead of using this:

margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 0;
you would do this instead:
margin: 10px 50px 10px 0;
and the same applies to padding. also, if you only specify two, instead of four, it'll apply them top/left and bottom/right, so margin: 0 auto; will have a zero margin top & bottom and automatic on the sides.

 

- colour hex values can be reduced from 6 digits to 3, if each rgb pairing is the same. eg, instead of #ffffff you would use #fff, or #cc5511 would be #c51.

 

- all the font attributes can be listed collectively (provided they're in the right order), so instead of:

font-family: Arial, Tahoma;
font-size: 1.2em;
font-weight: bold;
font-style: italic;
line-height: 15px;
you can put it all together, in order (font weight, font style, font size/line height, font family)
font: bold italic 1.2em/15px Arial, Tahoma;

 

 

 

Advancing your Knowledge

There's a heap of resources on the internet, both good and bad. Have a look through the net and see if you can tell the difference between the good and bad. If you're in doubt, as I said before you can always ask here. Once you're confident with HTML and CSS you may wish to look at PHP and mySQL for developing dynamic database driven websites, or for something lighter perhaps some javascript.

 

contributors: superfireydave, GTAV6

Share this post


Link to post
Share on other sites

whoah... that's a pretty fair effort there, dave! i'd say that only goes to prove your qualification as the number 1 spark plug around these parts :o)

 

it's certainly nice and clear, easy to follow.

 

 

 

should this be stickied/pinned, or whatever it's called now? just a wee thought for a passing *od... (prolly johnsee)

Share this post


Link to post
Share on other sites

+1 for sticky. It should help to stop this board being congested with a million "How do I make a Website?" Threads.

 

It will be even betterer when the text in this forum isn't the same colour as the background.

 

-X

Share this post


Link to post
Share on other sites

whoah... that's a pretty fair effort there, dave! i'd say that only goes to prove your qualification as the number 1 spark plug around these parts :o)

 

it's certainly nice and clear, easy to follow.

 

 

 

should this be stickied/pinned, or whatever it's called now? just a wee thought for a passing *od... (prolly johnsee)

lol

I don't know about me being the number 1 spark plug =P~

There's certainly a lot of talent amongst everyone.

 

But cheers for the replies.

 

Might add in some best practices and how to host a site as well.

Share this post


Link to post
Share on other sites

Fail. All that text and no mention of Frontpage.

 

:P

 

Good work.

Hah! I've helped 3 or so atomicans learn how to do stuff properly, before they were using frontpage =P

The code that thing outputs is disgusting QQ

Share this post


Link to post
Share on other sites

Hah! I've helped 3 or so atomicans learn how to do stuff properly, before they were using frontpage =P

The code that thing outputs is disgusting QQ

Heh. It was so funny watching people at uni try to pass off it's code as their own.

Share this post


Link to post
Share on other sites

um, i've been giving this a wee bit of thought, sfd, and there are several things i wonder might be worth mentioning... bearing in mind you're aimimg at entry-level web design basics, i might be introducing some ideas here that go beyond that?

 

 

first of all, css 'shorthand'. even though i'm not up with all of what you can do, it's still worth forming the habit of trying to keep your css as concise as possible - remembering that the smaller the file, the faster it loads.

there are several that i usually use;

- margin and padding. the values are read clockwise, beginning from the top. eg, instead of using this:

margin-top: 10px;
margin-right: 50px;
margin-bottom: 10px;
margin-left: 0;
you would do this instead:
margin: 10px 50px 10px 0;
and the same applies to padding. also, if you only specify two, instead of four, it'll apply them top/left and bottom/right, so margin: 0 auto; will have a zero margin top & bottom and automatic on the sides.

 

- 0px or 0em doesn't actually need to have the unit specified - simply 0 will do.

 

- colour hex values can be reduced from 6 digits to 3, if each rgb pairing is the same. eg, instead of #ffffff you would use #fff, or #cc5511 would be #c51.

 

- all the font attributes can be listed collectively (provided they're in the right order), so instead of:

font-family: Arial, Tahoma;
font-size: 1.2em;
font-weight: bold;
font-style: italic;
line-height: 15px;
you can put it all together, in order (font weight, font style, font size/line height, font family)
font: bold italic 1.2em/15px Arial, Tahoma;

 

secondly, using display: none; when you're replacing the heading with an image. i used to always do that, but read somewhere a while ago that (some, if not most?), screen readers will skip any heading that's hidden or not displayed. what i do now requires a bit more mark up than before, but is supposedly far more accessibility friendly. i'd cheerfully attirbute this method to where i first saw it, but i've forgotten where/who it was...

<h1><span></span>Flow Creative Development</h1>
-and the css-
#header h1 {
			position: relative;
			overflow: hidden;
		}

#header h1 span {
			display: block;
			position: relative;
			z-index: 1;
			margin: -150px 0 0 0;
		}
basically, what that's doing is shoving the heading up outside the header div and making it invisible by hiding where it's 'overflowed' the div. this means a screenreader will still pick it up, as (in theory), the heading has merely been shifted to where it can't be seen, as opposed to not being displayed at all. i don't believe this is the perfect solution, but it's certainly the best i've come across.

Share this post


Link to post
Share on other sites

That last bit's pretty neat, I wasn't sure if screen readers skipped content that was hidden via CSS, although I had seen the content appear in some text based browsers so I assumed a text reader would be the same. I might try and work that in, and add the other stuff to the bottom ^_^

edit: Cheers GTAV6, you're right. Did some research and I've been doing the wrong thing QQ

I've updated the tute though, and you're now listed as a contributor :D

Share this post


Link to post
Share on other sites

Great effort mate. I'm trying to learn CSS so i can customise my blog abit myself.

 

PHP will be my next effort after that. Would really like to understand how wordpress works.

Share this post


Link to post
Share on other sites

Great effort mate. I'm trying to learn CSS so i can customise my blog abit myself.

 

PHP will be my next effort after that. Would really like to understand how wordpress works.

Well, it's fairly easy to make yourself a layout and then chuck the little bits of PHP that wordpress uses in without even understanding PHP.

It helps a bit if you do, but it's not neccessary =P Wordpress is really nice like that ^_^

 

Gratz on Stickiness ;-)

Cheers =P

Share this post


Link to post
Share on other sites

Yeah I'm starting to get the hang of things. Found myself editing the files of prebuilt themes to do things like stopping CSS from putting a margin around images (frecks up smileys) and adding PHP function calls to templates so posts display the author name. Still miles away from being able to code a site from scratch though. :P

Share this post


Link to post
Share on other sites

very nice Tut. they way i learnt CSS basics is looking at free CSS templates and altering them to see what changed on the page display, i still have a lot to learn, but now i have the basics down should make it easier.

Share this post


Link to post
Share on other sites

A few more CSS tips:

  • Start clean

    The first line of all of my CSS files is always:

    * { margin: 0; padding 0; }
    What does it do? '*' basically applies to all tags, so with this piece of code you are resetting all margins and padding on all elements to 0. This helps with browser constancy problems as well as meaning you won't need to repeat this entry all through your CSS.

    To go along with this certain elements will need to have their padding and margin set to an appropriate value to look good (although they will now be the same across the various browsers) use something like the following to achieve this:

    ul, ol {
    	padding-left: 2em;
    }
    
    h1, h2, h3, h4, h5 {
    	margin-bottom: 0.5em;
    }
    
    p {
    	margin-bottom: 1em;
    }
    You will want to adjust those sizes to suit your particular need but I find those values cover most cases (see tip on units). I tend to apply these particular rules only to content areas.

     

  • Setting the base font

    To apply a particular font to all elements in your page apply it to the html element not the body element (if you apply it to the body element tables don't get the style). So the the entry will be:

    html {
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size: 11px;
    }
    Also of note here be sure to include a generic family (ie "serif", "sans-serif", "cursive", "fantasy", "monospace") in your list as this will handle the cases where your preferred font isn't available.

     

  • Know the difference between fixed size units and relative sized units

    While using px (pixels) for everything is in some ways easier and the most appropriate for dealing with images that are of a fixed size, when your are laying out text consider using em (1em is equal to the current font size), this will allow your paragraph spacing to scale nicely if the user chooses a larger font for example.

     

  • CSS List menus

    These are used fairly extensively in modern site designs so here is the low down on how to generate a horizontal list menu, first the HTML

    <ul class="list-menu">
    	<li><a href="page1.html">Page 1</a></li>
    	<li><a href="page2.html">Page 2</a></li>
    	<li><a href="page3.html">Page 3</a></li>
    	<li class="current"><a href="page1.html">Page 4</a></li>
    	<li><a href="page5.html">Page 5</a></li>
    	<li class="last"><a href="page6.html">Page 6</a></li>
    </ul>
    <div class="clear"></div>
    Pretty simple, we have created an unordered list with a class reference for the CSS, each link is done using a standard anchor tag. The "last" class is optional but can is important if there are space considerations. The "current" class lets us highlight how current page again this is optional but is recommended from a usability perspective. I will add a mention here that you can apply multiple classes to a single element so the last item can have both the "last" and "current" classes, this can also be used to apply say different colours to a particular menu item. The div after the list is used to prevent the menu overflowing, but also allowing the menu to handle the browser being resized, I will provide more detail in the CSS comments.

     

    Now that we have the HTML the CSS is where all the "magic" happens:

    ul.list-menu { 
    	padding: 0;
    }
    ul.list-menu li {
    	list-style: none; /* Remove the bullet points */
    	float: left; /* Each item float to the left, this can be thought of as working like the windows explorer "icon" layout (from XP, not sure about Vista) */
    	margin-right: 10px; /* Put some space between each menu item */
    }
    ul.list-menu li.last {
    	margin-right: 0; /* Remove the unnecessary space from the last item */
    }
    ul.list-menu a {
    	display: block; /* Allows you to do more resizing on an anchor element */
    	padding: 0.5em 2em; /* Add some spacing to make the tabs look good */
    	/* The rest is basic styling */
    	text-decoration: none;
    	background: #0000ff;
    	color: #ffffff;
    }
    ul.list-menu a:hover {
    	/* The rest is all about the look */
    	background: #4444ff;
    }
    ul.list-menu li.current a {
    	margin-right: 0; /* Remove the unnecessary space from the list item */
    	/* The rest is all about the look */
    	background: #ff0000;
    }
    ul.list-menu li.current a:hover {
    	/* The rest is all about the look */
    	background: #ff4444;
    }
    
    .clear {
    	clear: both;
    }
    See the comments in the code as to what each section does, now back to that "clear" class, basically because all of the elements are "floating" the browser will not assign space for your menu and will instead attempt to wrap items around it, to prevent this we put a clearer item in place, this tells the browser that no floating elements should be present to the left or right of the div, since the div is a block element (ie it has a line break before and after the element) all other elements are now pushed down to give the menu space.
Phew, all items have been tested in the usual suspects (IE7, Firefox 3, Safari (windows), Opera, Crome) and it is known to work with IE 5.5 and 6.

 

PS:

secondly, using display: none; when you're replacing the heading with an image. i used to always do that, but read somewhere a while ago that (some, if not most?), screen readers will skip any heading that's hidden or not displayed. what i do now requires a bit more mark up than before, but is supposedly far more accessibility friendly. i'd cheerfully attirbute this method to where i first saw it, but i've forgotten where/who it was...

!SNIP!

basically, what that's doing is shoving the heading up outside the header div and making it invisible by hiding where it's 'overflowed' the div. this means a screenreader will still pick it up, as (in theory), the heading has merely been shifted to where it can't be seen, as opposed to not being displayed at all. i don't believe this is the perfect solution, but it's certainly the best i've come across.

Another simple alternative is to use text-indent ie:

<h1>My Menu</h1>
and css
h1 {
	text-indent: -1000em;
	height: {{image_height}}px;
	width: {{image_width}}px;
	background: url({{image_url}}) no-repeat;
}
Will position your text well off screen but does not affect any of the surrounding layout and no tag spam.

Share this post


Link to post
Share on other sites

um, there's a reason why the method i mentioned for heading image replacement is better (accessibility-wise), than using text-indent, SledgY, but i'm afraid i can't remember what it is. i know it made sense at the time. i just wish i could find the original article i learned the tecnique from.

 

as far as using a global css reset goes, i pretty much just stick with the basic * { padding: 0; margin: 0; } for my sites. i think that unless you're going to be rebuilding amazon or eBay, there's little call for too much more than that... at least as far as sfd's tutorial is aiming at, anyway ;o)

Eric Meyer produced a very interesting article on css resets, it's well worth a read.

 

 

it's definately well worth while getting the hang of using unordered lists for navigation, though - once you learn how it all works, they are incredibly versatile and they can be fine-tuned even more than what you have there.

Share this post


Link to post
Share on other sites

um, there's a reason why the method i mentioned for heading image replacement is better (accessibility-wise), than using text-indent, SledgY, but i'm afraid i can't remember what it is. i know it made sense at the time. i just wish i could find the original article i learned the tecnique from.

Your text will disappear if the user is browsing with images off.

 

It really depends what your design is, my preference is to not do image replacement as it's a bit of a waste of time when often the replacement image is just text. Usually only clients that decide they really really want a particular font is it necessary I find that after explaining the positive/negative aspects of the choice many clients will compromise.

 

These techniques are also often used with the unordered list navigation.

Share this post


Link to post
Share on other sites

Youve forgotten the most important part and that is, publishing your work of art!

Share this post


Link to post
Share on other sites

Probable unsolicited advertising removed.

 

While free sites with templates can be useful for both n00bs and those who just want to throw something up quickly, the purpose of this thread was to discuss building your own site.

 

If the post was not unsolicited advertising, the poster is welcome to contact me to discuss the post.

Share this post


Link to post
Share on other sites

Youve forgotten the most important part and that is, publishing your work of art!

This is true.

The difference interfaces from commercial hosts can be confusing to a n00b like me!

 

Nice work to all involved!

Share this post


Link to post
Share on other sites

superfireydave: just a typo you may have missed.

 

you've created your "bottom" div with a class reference in your html example, but addressed it as a normal div 'id' in your stylesheet. not that important, but just letting you know :)

Edited by Layers

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×