Following on from my last post, you can see that I was struggling to work out how to move forward with my website design. All I knew was:
- The templates I had looked at all required a compromise;
- MS Publisher was garbage for website design (but I had a copy);
- HTML seemed scary;
- Buying Dreamweaver, Frontpage or similar would cost me money
- I had access to Photoshop Elements and Adobe Lightroom so I could manipulate images and create flash galleries
- Photoshop CS4 had some web design capabilities but they were not as well developed in Elements
So I decided to play around a bit and see if I could mock something up, just for interest’s sake. I used Photoshop Elements to pull together some background images, and then built a few pages based on them. I googled ways to embed flash galleries in Publisher and played around with the code that was required. End result? A dumb mockup that showed what the site might look like (encouraging) but no joy on gettig the flash galleries to work. Also, it was very slow to load when I published it as a test bed to my domain and it only looked any good in Internet Explorer. Sigh…
But at that point I was offered a helping hand in the form of Ben from my office. Having some web design experience, Ben gave me a few good tips that really broke the impasse (thanks Ben!). You can see from his blog that he knows what he is talking about:
- You do not need to buy any expensive software to build a website. You can get by with as little as windows notepad to edit the HTML code;
- The HTML code generated by programs such as MS Publisher is utter garbage, with much more code than is necessary. This makes modifying and optimizing the code almost impossible. Good HTML code is not that complex and can easily be learned online.
- Cascading Style Sheets (CSS) are your friend when you design a website, because you can create one CSS style sheet and it can be applied to all the pages. Want to change the background colour or the fonts? Make one change in the style sheet and they all change – zippity!
- There is some really good free software that can help you to code a website but it is worthwhile walking before you run, so play around with notepad first, then move up to the software (details below)
- WordPress is a fantastic, free blogging platform, but you do need to make sure that your web host has the right software at their end to run it.
With this information in hand, I took the design I had mocked up, spent a little time playing with some basic HTML / CSS code, and I never looked back. That does not, however, mean it is all smooth sailing. It will take time and dedication. Even without the learning curve, I’d say it has take three weeks of evening work to get things to where they are, and I’m not done yet.
So if you are tempted to build your own website, here are the building blocks that I needed to create my website:
- A domain (in my case white-lite.net) where you Web Host uses Apache software and includes an SQL database in your subscription. There are dozens on Web Hosts out there, and prices are very reasonable – knock yourself out!
- A copy of WordPress that I installed on my home PC together with XamppLite (for mockup and testing) as well as on my web server
- A copy of HTML-Kit software (freeware) to improve my HTML coding
- Adobe Photoshop Elements to create various images that are used in the code
- Adobe Lightroom, to quickly create the web galleries that I use on site (the galleries are made with Simpleviewer, which is freeware that you can download as a stand alone application (but it’s easier to use with Lightroom)
- Filezilla (freeware) FTP software for uploading files to the web server
- HTML and CSS tutorials from w3schools.com
- A good online reference for conversion of colour codes from RGB to hex code.
- And some previous experience in programming will help.
There may be other things, but remember, Google is your friend. I did not come across much that I could not solve with one or two quick searches.
Next up, HTML and CSS basics. Don’t expect detailed tutorial,s but I will point you to some useful tidbits…