UPDATE:
This article was written in 2007 and is very out of date.
If you want to build yourself a website for your business, club or as a personal blog, you cannot really do any better at the moment than to use WordPress.
Find a good web host that will help (most will install WordPress for you) and then configure the basics (site name, slogan, contact details etc.) and the start writing the pages. You can easily add a blog one the site is up. It does not have to look flash now. When the site is live you can then search for better themes, or hire a web designer to put something nice up. I can of course help you with this, see MorrowTech.
Original Article
Making websites is easier than ever. With free web editing tools such as NVU, an adundance of code shared online and free FTP tools and cheap webhosting, building and publishing websites is easier than ever. Here are a few of the main tips I have used over the years.
Open Source Templates – The easy way to start building your own Web Pages
I have been dedicating the last month or so to setting up a home LAMP server, to host PHP/MySQL sites and static sites and blogs using FTP. Now I need to get back to the busines of creating web pages. By far the easiest way to build a site for the first time is to use a ready made template. Many blogging services such as Blogger and WordPress provide simple templates ready to use with a Blogspot or WordPress hosted blog. These same templates can be used on your own domains, however they are often lacking a little in design and style, and of course, a unique template is essential to make you site stand out.
So, how to start? Open Source of course. There are many sites on the internet that collect and distribute offer open source templates. The nature of open source is that many of the templates appear on many different sites. The sites that I have found most useful are:
Andreas Viklund Free Web templates
and
Open Source Templates.
In addition to open source, there are some simple examples of general template layouts that use HTML/CSS, such as pmob and a selection of 3 column templates on Incutio.
One you have chosen a template, download and save all the various parts to a new directory, and then you can start to play and test them. Remember, to view a website in development all you have to do is open the index.html file in a browser. Just right click, open with… Firefix (for example) and then you can view the page. As you make changes to the layout, content, you just have to hit F5 to refresh the page. Play with the CSS if you are feeling brave, to change the colours, size of borders etc. etc.
Stu Nicholls CSS – The Best CSS Dropdown Menu on the Web
I have spent a large part of the last 3 days attempting to redesign the web navigation (i.e. menu) on one of my sites, and have been very frustrated at the often poor quality of work provided for free. OK, if it is free, what should we expect? I downloaded many XHTML/CSS examples, some with JS (JavaScript) too, which on the most part all worked fine in trusty Firefox, and often worked OK in IE6, but when tested in IE7 they failed. I eventually took a look at Stu Nicoll’s website, and found an excellent script called “Skeleton” which comes with all the Internet Explorer bug fixes too. A fully tested and functional CSS/JS/HTML horizontal drop down menu. Well done, and thank you Stu!
How to Create a Dynamic Menu on a Static Site Using PHP Includes
If you have a static html website, but want to build an attractive and stylish menu, with different hover styles and active styles and sub menus, then it is really quite simple. To get it working, the only thing you need to do is either use .php pages or have the following code in your .htaccess, which allows php to be parsed on .html pages. This code comes in very useful for various other items, such as banner/content rotations and other includes.
RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html
A good example of this in action is the menu on webologist.co.uk (no longer using the menu!).
Possibly the biggest advantage of this method it that you only need one menu code block on the site, rather than separate menus for each page/section of the site. Rule number one when coding is “write the code once, and once only”.
First on each page (in individual section headers) is some php to designate each page (this will then control the menu styles for the different sections). e.g.
<?php $thisPage=”weightloss”; ?>
Then the menu looks a bit like this:
<div id="nav"><ul<?php
if ($thisPage==”home”)
echo ” class=\”current\””;
else echo ” class=\”select\””;?>><li><a href=”/”><b>Home</b>
<!–[if IE 7]><!–></a><!–<![endif]–><!–[if lte IE 6]><table><tr><td><![endif]–><ul<?php
if ($thisPage==”home”)
echo ” class=\”sub_active\””;
else echo ” class=\”sub\””;?>>
<li><a href=”http://www.webologist.co.uk/search/”>Search</a></li>
<li><a href=”http://www.webologist.co.uk/sitemap.html”>Site Map</a></li>
<li><a href=”http://www.webologist.co.uk/aboutus.html”>About</a></li>
<li><a href=”http://www.webologist.co.uk/contact.html”>Contact</a></li>
<li><a href=”http://www.webologist.co.uk/privacy.html”>Privacy</a></li>
<li><a href=”http://www.webologist.co.uk/disclaimer.html”>Disclaimer</a></li>
<li><a href=”http://www.motleyhealth.co.uk/fitness-store-discount-codes-and-money-off-coupons”>Money Off Coupons !</a></li>
<li><a href=”http://www.webologist.co.uk/web-search/”>Web Search</a></li>
</ul>
<!–[if lte IE 6]></td></tr></table></a><![endif]–></li></ul>
etc. etc. ….. (this is just a snippet of the code)
And finally the CSS:
/* CSS Document */
/* ======
This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/doors_drop_line_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
========= */
#nav {margin:1px 0 1px 0;}/* the styling */
#nav {float:left; width:100%; height:auto; background:#fff url(”dropline/bottom_line.gif”) repeat-x bottom; position:relative;}#nav .select, #nav .current {margin:0; padding:0; list-style:none; display:block;}
#nav li {display:inline; margin:0; padding:0;height:auto;}
#nav .select a,
#nav .current a {display:block; height:21px; float:left; background: url(”/menu-files/left_blue.gif”) no-repeat left top; padding:0 0 0 3px; border-bottom:1px solid #000; text-decoration:none; font-size:10px; line-height:20px; white-space:nowrap; margin-left:2px;}
* html #nav .select a, * html #nav .current a {width:1px;}#nav .select a b,
#nav .current a b {height:100%; display:block; background:url(”/menu-files/right_blue.gif”) no-repeat right top; padding:0 6px 0 3px; color:#000;}#nav .select a:hover,
#nav .select li:hover a {background-position:0 -75px; border-color:#046; cursor:pointer;}#nav .select a:hover b,
#nav .select li:hover a b {background-position:100% -75px; border-color:#046; color:#fff;}#nav .sub {display:none;}
/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0; font-size:11px;}#nav .current a {background-position:0 -75px; border-color:#046;}
#nav .current a b {background-position:100% -75px; color:#ff6;}#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; color:#fff; text-decoration:underline;}#nav .sub_active .current_sub a,
#nav .sub_active a:hover {background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; color:#ff6; text-decoration:underline;}#nav .select li a:hover .sub,
#nav .select li:hover .sub {display:block; position:absolute; width:970px; top:21px; left:0; background:#3D7397; margin-top:1px; padding:0; z-index:100; border-bottom:5px solid #fff;}#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
#nav .sub_active {display:block; position:absolute; width:970px; top:21px; left:0; background:#3D7397; margin-top:1px; padding:0; z-index:10; color:#000; border-bottom:5px solid #fff;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}#nav .sub_active a {height:25px; float:left; text-decoration:none; line-height:24px; white-space:nowrap; font-weight:normal;}
#nav .sub_active a,
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:inline; background:#3D7397 url(/menu-files/sub_sep.gif) top right no-repeat; padding:0 10px; margin:0; font-size:10px; width:auto; white-space:nowrap; font-weight:normal; border:0; color:#fff; height:25px; line-height:24px; }
So you get highlighted menu items on hover, and also “current” and “sub-active” menus for the sections.
One menu, one stylesheet, one bit of code for each page/section include. Plus some images for the menu.
Basically it’s one of Stu Nichol’s menus with some php chucked in.
The menu is called up onto each page (or each section header to be precise) with:
< ? php include(‘includes/logo-menu.htm’); ? >
Simple as that. So a site with 500 pages with 10 sections needs only one menu file.
To Recap:
1. Modify .htaccess to allow php to parse in any html page
2. Categorise each page/section of your site with the code <?php $thisPage=”page1″; ?>
3. Add the code into the UL elements of the menu, so that the UL elements will either read or and then the corresponding CSS with determine how it looks.
This demo file should get you started. You will need to ensure that the paths to the images, style etc are all correct, as my directory structure is a little odd after years of haphazard evolution! For example, on my main site, I have the follow structure:
/dropline/ – this is where the menu images and css is kept. The css is thus called up in the head section with
link rel="stylesheet" media="all" type="text/css" href="http://www.webologist.co.uk/dropline/style.css"
/includes/ – this is where I keep the actual menu code, along with other includes, like advertising blocks, footers and the like. Really for the menu it may as well be in the dropline directory, but the dropline solution came later, and I updated the site a little at a time.
Also my menu include is also inside another include (one called menu-head) which in turn is inside the site section includes. It is a little crazy, and it does not have to be like that, but I have not got around to tidying it up yet. There was some logic to all this madness, but now it is lost in time.
Download to zipped file with examples of: .htaccess, menu_code (i.e. the file to (php_inlcude / SSI), plus the “dropline” men directory with the stylesheet and the 4 images.
Color Charts and Wheels to Match HTML Colors
There are a lot of color tables, color charts and color wheels online these days, however, many are just a bit naff. But this one I found today is actually pretty good.
It is from Colorschemedesigner.com and allows you to enter your chosen color as an RGB value (000000–FFFFFF) and then view colors that are either mono, complement the color, or are triad, tetrad, analogic, or accented analogic in nature, which means, lots of color comparisons!
- Color Scheme Chart
It looks like this site has been around for a while, but according to their about us page they have recently made some updates, which makes it one of the most up to date color comparison charts around. Some features:
- NEW: Adjust variants. Each color shade in the palette can be now individually edited.
- NEW: The palette IDs additionaly support values of individual color adjustments. The backward compatibility of previously generated IDs is granted.
- NEW: Menu. All supporting functions were gathered to the new application menu located in the upper right corner.
- NEW: Undo/Redo. Most actions and adjustments are now undoable.
- NEW: Instant Designer Shop added. Get hi-quality professional logos, templates, designs and services for instant use.
- Photoshop palette export (.ACO) fixed.
- Improvement: The application interface was cleaned up.
How to Write Your Own Blog with Google’s Blogger
This was originally written in 2006 and Blogger has stopped its FTP service. They do provide a hosting service now though.
Using Blogger.com to post to your own domain is a piece of cake. This website was built using this following method, but has since moved to WordPress:
Here is what you do:
1. In Blogger, “create a blog”
http://beta.blogger.com/create-blog.g
and choose Advanced blog set up at the bottom of the page.
2. Pop in your FTP details, either IP address or ftp.domainname.com
3. Enter the FTP path, eg. if it is for your default domain, then this will be /var/www/html/ (this will vary for every webhost)
4. Choose a file name (usualy index.html)
5. Then the Blog url, eg. http://www.domainname.com
6. Enter your user name and FTP password that your web hosting provider has given you
7. Continue to the next page……
8. Chose a template – the Blogger ones are nice and simple, but I wanted extra columns. There are many free and open source templates available these days. I really like Andreas Viklund’s templates. They are very stylish, easy to modify, and have only a few files.
9. Your Blog has been created !
10. You can add a description next, and change the main title if you desire.
11. The settings need to be modified for the archiving and site feed publishing:
12. Under Archive, add the achive path, e.g. /var/www/html/, and the URL, same as under publishing. Make sure Enable Post pages is set to yes as this allows all posts to have a unigue page that can then be cached in the search engines.
13. Site Feed – add the path and URL here too, most likely the same as for archiving.
That’s it. Create a post, publish, and check it all looks OK. Make sure the Blog, the archive and the sitefeed are all being published to the correct folders. Blogger creates both atom and rss site feeds. The templates can be easily modified once you become familiar with them. Good luck and happy blogging!
NVU – Free Web HTML Editor – Easy Way To Make a Website
Creating your own website is actually incredibly easy, and can be done very cheaply. To create your own site you need just four things:
1. An internet service provider – although in theory you could set one up from a cybercafe if you really wanted.
2. A web host – your ISP may provide some space for a homepage with FTP capability.
3. An HTML editor / website builder application (some webhosts provide online web builders with templates for you). I have used NVU, which is free to download, and very user friendly, even for people like me that have next to no understanding of HTML, or any other sort of coding for that matter.
4. FTP (file transfer protocol) software. Not needed if your webhost provides you with FTP, or if they provide you with an online page builder. I use Coffee Cup Free FTP, because it is, well, free, and very useful too. The good thing about having your own FTP (like CoffeeCup) rather than using the one built into your webhost package is that you can easily upload, download or delete any file you like. You can even use your webhosts online web builder (if they have one) to build the foundation of a site, then download it to your pc and edit in NVU.
The web hosting business is incredibly competitive, so there are plenty of really good deals to suit all your needs.
OK, assuming you have applied for a URL domain name with a web host, and they have given you your FTP username and password to access your area on their server, this is what you do.
1. Download CoffeeCup Free FTP. Click on Servers, Add, and enter your server name. I use the name of the webhost for the domains with 1and1 and the name of my ISP for my homepage so I don’t get them muddled, but anything will do really. Fill in all the username and password your ISP or webhost have provided you with, enter the host name, such as yoursite.com, then finish. Now you can access your web host / ISP server space where you keep your website files.
2. Download NVU
3. Create a folder which is the name of your wesbite URL (I keep all my websites in My Documents/My Webs which was set up already on my XP pc).
3. Open NVU, check the page settings under Tools, Preferences, Advanced are set to HTML 4 Transitional. Click New.
4. Chose Save As under File, and save as Index in your new folder.
5. Type some text on the page, such as “test”. Save again.
6. Open CoffeCup FTP, click server and open the server you created earlier, then drag and drop the webfolder from My Computer to My Site.
7. Open your web browser, type in your URL, and hey presto, you should have a page that says test in the top left corner.
So if your ISP has already provided you with some webspace, as most, if not all, do, then you can create your own web page for nothing. If you want your own domain name, then you need to find a suitable hosting company. Your ISP will most likely have hosting packages, but they may not be the best suited to your needs or the best value either. Jumpline.com and 1and1 both provide plenty of webspace, plus full FTP, MySQL databases, dynamic content, form builders, web statistics, newletter tools and basic web builders.
You can also use templates in NVU, so if you chose New, More Option (in the drop down box) and chose “A new document based on a template” you can use this. It can either be a tempalte you have downloaded, or even easier, you can type in a website and use that as a template. Feel free to try it with this one, then try other sites and see how they build them. Some use loads of tables, like http://news.bbc.co.uk/ for instance, and others use frames and stuff which I again do not understand at the moment. There are quite a few places that provide free web page templates if you search around.
If you wish to create an online photo album, then the best application I have found is Jalbum, which is also free to download, and comes with it’s own FTP too. And once you have created the album, you can open the Index page in NVU and add links and text or whatever. Happy web building !