If you've got a website already, but you're looking to do something more advanced with it then you've come to the right place.
Below you'll find information about Advanced Web Design topics like CSS, PHP, Javascript, and much more. There are also some tips and tricks to help you achieve some great results.
Do you want to know how to write more efficient code? Maybe you're fed up with having to edit each of your pages to reflect a navigation change and you want to know how to make a single change and have it instantly seen on every page. Perhaps you want to know how to wrap your text around a picture. On this page, we'll show you how to do all these things and more.
By the way, if you've arrived here and you're looking for the bare bones of Web design then we have a Beginners Web Design page too.
If you wish to skip to a particular subject area, please click on one of the following links:
CSS, or Cascading Style Sheets, is essentially a way of defining the look of your site in a more efficient way. In the days before CSS you had to spray complicated HTML tags throughout your web page in order to say which font you wanted, what colour it should be, how it should be aligned, etc. Code like the following example was common:
<font color="#FF0000" size="4" face="Arial">Welcome to my site</font>
<font size="2" face="Arial">Hello and welcome to mysite.com.</font>
With CSS you define styles in advance and then you call those styles using simple tags in your pages. This makes you pages simpler and smaller thereby making them easier to create and quicker to download. This is done by defining styles that set out things like how your headers and paragraphs should look.
CSS can be defined in the header of each page, but I wouldn't recommend it. The way to go is to use an external style sheet. That way you can make a simple change in your separate style sheet file and it will be reflected on all your pages. An external style sheet is a plain text file that can be created in any text editor. There are also plenty of CSS editors on the web and some more recent page editors have a CSS editor built in. Once created, you can use your external sheet by putting a simple piece of code in the header of each page, for example:
<link rel="stylesheet" type="text/css" href="mystyles.css" />
Instead of mystyles.css you can use any name you like. Maybe use the name of the site, or use something that describes the layout, like 2Col_leftnav.css.
So now we want to define some styles for use on our pages. Styles are defined against selectors. A selector is a tag used on your web page which calls a particular pre-defined style. For example you could set up a general paragraph font style and use the <h1> element tag to define a main page heading style. An example of these would be as follows:
body{
font-family: Arial,sans-serif;
line-height: 1.166;
margin: 0px;
padding: 0px;
}
h1{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
color: #FF0000;
}
You can then use this heading style in your page code by using simple tags such as in the following example:
<h1>Welcome to my site</h1>
<p>Hello and welcome to mysite.com.</p>
This may not seem much easier than the earlier HTML method, but imagine you had 50 pages and wanted to change the colour of the main page header on each one. By changing the color: #FF0000 to, say, color: #0000FF the main heading on each page would change from red to blue.
One more advantage of CSS is that it lets your users view your website however they want to. There are a surprising number of users out there who have their own CSS stylesheets to add to pages to make text bigger, for example, or make the layout simpler .
Once you've written your page cleanly, you can even offer visitors a choice of stylesheets yourself – you can write more than one and then offer an option to switch between them. This makes redesigning your page much easier, if you ever need to, since you can simply swap one set of CSS for another and even leave the old one available for any visitors that prefer it .
This isn't meant to be a detailed CSS tutorial. If you want to read more about it so you can create your own CSS files then I'd recommend Emil Senstrom's Beginner's Guide to CSS and Standards.
There are plenty of places to find information, help or pre-written CSS code on the Internet.
Can't be bothered creating your own external style sheets? Well you don't have to if you don't want to. Just as with the discussion of web site templates on our Beginners Web Design page, you can find plenty of sources on the Internet where you can find free or paid-for CSS templates.
All the same rules apply as with any template. The lower the cost, the more sites there'll be with that template. However, with CSS it may be easier to customise the template once you have it. Change some colours, fonts, or alignments and you are starting to personalise the look of your site. Plus you can add your own logos, images, etc.
Keep an eye out for interesting bits of CSS in articles, email newsletters and websites. For example we've got some CSS tricks on this site which we hope you'll find useful.
This is actually pretty straightforward. Using the CSS "float" property you can align an image and effectively tell text to use the blank area next to it. Take a look at the image at the top of this page and the text next to it. They are in a CSS division called "feature" defined in an external style sheet. Within that division is the ".feature img" class which is defined in the style sheet as follows:
.feature img{
float: left;
padding: 0px 10px 0px 0px;
margin: 0 5px 5px 0;
}
You can see the float property with left alignment. If you want the image on the right with the text on the left of it then simply put the keyword right next to the float property (OK, you'd probably already worked that out for yourself, right?). You simply use a standard <img> tag to insert your image and the following paragraphs will wrap round it.
You can use the float property for things other than images too. If you want a text sidebar to appear within your main text then simply declare a class for it and format it as you wish. For example add the following in your external style sheet:
.inset{
float: right;
padding: 0px 20px 0px 0px;
margin: 0 5px 5px 0;
}
You can then create your sidebar in your web page as follows:
<span class="inset">
<p>sidebar text</p>
</span>
This would create a sidebar on the right hand side of the page with your main text wrapped around it to the left.
Wrapping text around rectangular images is all very well, but what if you want to do something more interesting. If you want text to flow around an image then you can do that too with a bit of work.
First of all you need to insert the image as a background image on your page. Normally with a background image the text just runs over the top of it. However, by defining a number of CSS divisions of different widths and heights you can create a number of rectangles that can be used to overlay the background image. The text on the page will then display next to these invisible rectangles giving the appearance of text flowing around an image.
There's an excellent tutorial on this subject with examples of code and the resultant pages at the Big Baer CSS tutorial pages.
PHP is the most popular scripting language on the web, and the reason for that is how easy it makes it to create dynamic websites quickly. Even if you're not a programmer then you'll still probably be able to do some great things with PHP.
The power of PHP is that you can use it in standard HTML pages. PHP uses a simple tag to include a PHP function. For example:
<html>
<head>
<title>my page - <?php echo date(); ?></title>
</head>
<body>
<?php
$total = 1 + 1
echo $total;
?>
</body>
</html>
This is a complete HTML document with pieces of embedded PHP. The first PHP section inserts the date into the title, and the second writes the answer to 1 + 1 as the content of the document – the word with a dollar before it is a variable, storing the result of the sum. Where this all becomes useful is that your PHP code can open a connection to a database, read data from it, and then put the text into a template, along with other things from the database like the headline, the author's name and the date it was written.
Here's are a few of the most useful PHP functions:
date This function returns the date in a format you specify using letters. For example, date("D j M Y") outputs dates in this format : Mon 1 Jan 2010.
echo Writes text to the document. You can use <?= as a useful shortcut for < ?php echo.
fopen Opens a file on your web server, but can also be used to open a URL and so connect to another server.
fread Reads the contents of the file, either all at once or line by line.
md5 Takes some text and produces a 'hash' using the MD5 algorithm. This is often used to check a user's password without needing to save the user's password in plain text. The sha1 function does the same thing in a more secure way, but is slower.
mysql_connect Connects to a MySQL server. You have to tell it where the server is (usually localhost) as well as your username and password.
mysql_select _db Chooses which MySQL database to open on the MySQL server you're connected to.
mysql_query Sends and SQL commands you want to your MySQL server.
str_replace Replaces word with another in some text.
strtotime Turns an English-language description of a date and time into a number representing that date and time (technically known as a Unix timestamp). This makes them easier to use with a database, as you can sort from the 'highest' (most recent) to the 'lowest' (longest ago) more easily. You can convert back from timestamps again by using the date function.
Before we get started on this don't worry, I'm not going to ask you to write a whole program with PHP. This really is straightforward stuff...heck, even I can do it!
What I'm going to show you is how to use PHP includes to call in external pages for parts of your site that stay common on all your pagesFirst off, to make this work you need to have divisions set up for the various sections of your page as normal. So let's say you have divisions for the top and left sections such as:
#pagetop{
margin: 0;
padding: 10px 0px;
border-bottom: 1px solid #cccccc;
width: 100%;
}
#leftNav{
color: #cccccc;
padding: 0px 0px 0px 10px;
white-space: nowrap;
}
You'd need others for the main content area and any other sections like the bottom of the page. The main division on the page is going to have any content specific to that page, but we're going to call in all the other sections using PHP. I'm assuming you've already verified that your server can run PHP (you can use the simple script in the previous section to test it). PHP is free so ask your provider to install it if it isn't already there.
So you have your sections defined in your external style sheet. Next you may need to make a change to enable PHP to be parsed in a normal html file. If you have a standard apache server then you need to edit the .htaccess file (it should be in .htdocs or a similar location) and add .html to the appropriate line. For example:
AddType application/x-httpd-php .php .html
Note that you may have to edit some other file depending on the type of hosting you have. For example, if you have a Plesk-based host you may have to edit a file called vhost.conf. If in doubt, contact your provider's technical support.
Now that you can have PHP commands parsed in your html files you need to put the PHP includes in the correct place in your page. Lets say you want to call an external file for the header section on your page. Using the pagetop division we set up above, and assuming our external file is called top.php, it would look like this:
<div id="pagetop">
<?php include("top.php");?>
</div>
Pretty simple, huh? Do that at the top of all your pages, build a top.php file, and you now have a header for each page that will be consistent. What's more, any change you make in future will automatically be seen on each page the next time they are loaded in a visitor's browser.
To create your PHP pages, like top.php, left.php, etc, just use your HTML editor. Once they are created and saved you can rename the .html files to .php (note the main page is still a .html file, for example index.html).
Once I have the files built and saved as .php versions I tend to edit them and strip out all the stuff that's no longer needed. For example, you don't need the <head></head> section or the <body></body> tags. The downside to removing these is these is that these files will no longer be easy to edit in an HTML editor, but you'll be changing them so rarely that you can use a text editor. The upside to removing this stuff is that it helps with code validation.
Your main page won't look right if loaded locally on your PC (unless your PC has a PHP capable server running on it). Once you load it on to your site and then view it though, the whole thing comes together. Look at the source of your page and you won't see the PHP code any more, but you'll see the content of the .php files between your CSS tags.
Now, here's the really good part...all these elements will look like a single page to the search engine robots too. This means that if you put navigation into these separate .php files and call them with <?php include("xxx.php");?>, they'll be seen as part of whatever page is being indexed. Search engines love consistent linking so put text links in your .php pages and it should keep them happy.
Whilst PHP is great for all sorts of stuff, it's not the only game in town. What if you want to install a simple bit of code that will run in the user's browser rather than on your server? That's where Javascript comes in. Javascript is similar
Javascript can be inserted straight in to the HTML code of your web pages. You can simply insert it between <script></script> tags, or put a reference to an external .js file between those tags. Although it is similar to the programming language C, it is nevertheless quite simple to create.
The Javascript you write should have functions that are tied to events on the page, meaning that when the visitor does something with your page, the Javascript executes. Here are a few events you can use to trigger Javascript functions:
onmouseover - Runs when the mouse pointer is over a certain part of the page
onsubmit - Runs when the submit button is pressed on a web form
onload - Runs when the page is loaded
onclick - Runs when the mouse is clicked (you can also use ondblclick for a double-click)
For example, on our Computer Security page we have a simple bit of javascript to launch a window in which we display a fake Paypal email (in the section headed Phishing). Now I know this is getting dangerously close to being a...dare I say it...pop-up. I also know the arguments against launching browser windows with all the navigation and address bars removed and I agree with them in most cases. In this case, I used this method because I wanted the ability to launch a sized box with the content of a fake email that is used by criminals to steal people's Paypal account details.
For Javascript tutorials, free scripts, etc, visit www.javascriptkit.com.
You may find all the graphics and pictures you need on graphics sites or clip art CDs. The chances are though that you won't and that sooner or later you'll have to create your own. Even if you can find pre-made graphics you're still likely to want to change it, crop it, convert it, or any one of a number of other alterations. That's where a good graphics package comes in handy.
Paint Shop Pro is a very popular graphics package. It's becoming heavily geared toward digital photography, but it still has some great features for web designers. For a start, it has some of the best support for different image formats and that makes it great for converting to web-supported file types. It also has some great tools for doing everything from fixing colour issues in photos, to applying any one of a large number of effects. One of my favourite things is the screen capture, which is very configurable and great for grabbing things off your screen to show on web pages.
You can also do all the standard stuff like crop, rotate, blur, resize, etc. The resize is very good and it's the best way to get your graphics to the size you want for your page rather than resizing it in your HTML editor. PSP also has some good text tools making it ideal for logos.
Paint Shop Pro also supports Photoshop pluggins and has plenty of its own. Best of all, it's one of the easiest graphics packages to use. Oh, and it's also a lot cheaper than many alternatives. You can download a free 30-day trial version at corel.com.
If you're serious about graphics then Photoshop is still the big daddy of all the graphic design applications. What makes it so good is that it was originally designed for graphic designers working in print. This means it has been around a lot longer than most of its competitors and its pedigree shows. The class that made it the pick of the print designers makes it top choice for serious web designers too.
As well as the web and print, Photoshop is also used in television, film and DVD preparation. It simply provides almost every feature you could ever want, and is constantly doing things that people didn't think were possible. In the latest version, for example, there is a function to easily remove shadows without altering the rest of the image, and a function that lets you extend objects in images without sacrificing the image 's perspective. Each new version makes the existing features easier to use, which is significant given how revolutionary some of Photoshop's functions were considered just a few years ago.
Of course, since you probably won't spend much of your time editing photographs with Photoshop, these market-leading gr aphics features probably won't be all that important to you. If you're interested to know how easily it lets you produce logos and other website elements, the answer is very easily. Photoshop's layers tool is still better than any other out there, and lets you layer text and images together quickly to create a very professional look.
Of course the big downside is the price. It costs well over $500 (roughly 10 times the cost of Paint Shop Pro). Worse, your $500 gets you a restrictive license that only lets you install the program on two computers (and the program 'phones home' to Adobe over the Internet to check). You'll also need a pretty powerful computer to be able to use it to do some of the more advanced things. As much RAM as you can squeeze in is a particular requirement.
The Gimp - OK, a pretty unfortunate name I know, but despite its daft name, the Gimp is widely considered to be the best graphics editor you can get for free – many devotees compare its features to those of Photoshop. While it isn't as easy to use as most commercial offerings, the G mp is certainly powerful, and has become the most popular image editor for Linux (which doesn't run Photoshop).
In some areas, the Gimp outshines Photoshop by a long way. For example, Photoshop comes with a rather limited selection of filters, and there are plenty of companies who make a business out of selling extra ones at a premium. The Gimp includes every filter that the open source community has ever found useful, which is quite a few, and they all come for free . Essentially, if you're willing to take a small hit in ease of use, the Gimp provides you with thousands of dollars worth of functionality at no cost whatsoever.
If you wan t to download the Gimp, go to gimp-win.sourceforge.net/ to get the Windows installer version . There is also a version that has been customised to have a more Photoshop-like interface – you can get it at www.plasticbugs.com.
Paint.NET - A recent arrival in the open source graphics world, but it has gained a lot of followers in a short time. It offers a powerful graphics editing program with a deliberately simple interface, based on the 'Paint' program that comes with Windows – the fact that people already know how to use that interface has been an important factor in its popularity
Plain text and graphics are all well and good, but sooner or later you're going to wa nt to insert some multimedia content, such as a Flash movie, or an audio or video file. An increasingly important area of web design, the good use of multimedia can really add something to your site. Be careful though, it's overuse can have the opposite effect of the one you're hoping for. A lot of people found that out the hard way with overblown Flash site intros.
Unfortunately, browsers don't handle playing multimedia themselves. They use plugins, and you have to know the code to activate these plugins. While this should be simple, it isn’t, for various historical reasons.
To begin with there are two different ways of calling a plugin. Newer browsers use the object tag, like this:
<object width="400" height="40" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"> <param name="SRC" value="../flash/flashmovie.swf"></object>
That one's for a Flash move, but there are others for other applications like Quicktime or Windows Media. You just need to find out their classid and codebase URL, as well as which paramters they use. Most browsers now support the object tag, but some still require the embed tag instead:
<embed src="../flash/myFlashMovie.swf"
width="400" height="40"
type="application/x-shockwave-flash"
plugins page="http://www.macromedia.com/go/getflashplayer">
</embed>
For most cases, you should include both – it's best to place the embed tag inside the object tag, as this will cause browsers that understand object to ignore your embed. As an extra fallback, you might want to insert a ‘plug in not found’ message, with a link to allow users to download the plugin, but in most cases browsers should now do this for you automatically.
Want to add audio to your site with a nice audio player, but without a lot of hassle? Well, that's no problem. For a few dollars you can buy a piece of software that will let you record audio in the program (assuming you have a mic) or use an existing audio file, add beginning and end music using built-in music loops, and create the code to add to your webpages, all in a few clicks of your mouse button. To find out more take a look at Impact Web Audio.
So what should you use it for? Well there are a whole host of good reasons to use multimedia. Here are a few:
The most important thing to remember with multimedia is this: never, ever include multimedia in a page unexpectedly. You think it'd be neat to put a video of yourself greeting your customers on your homepage? Maybe some background music for your product catalogue? For the love of God, don't. There are few worse things on the web than going to a website and having it try to throw unwanted multimedia at you.
The time to give your visitors multimedia content is when they have absolutely explicitly asked for it . You should link to it with text like 'watch the video' or 'listen now', and leave it up to them what they want to do. Note that this also gives you a useful chance to ask the visitor which media player they'd prefer, instead of just trying to play things with one they might not have.
© Russell Card - The UKITbits editorial team 2006
About Us | Site Map | Privacy Policy | Contact Us | Terms of Use | ©2006-2009
Card Computer Consultants Limited