<!-- The Pagan WebCrafters’ Association -->

“Serving the Magickal, Occult and Pagan Earth Community.”

Creating a Website From Scratch (page 2)

by Mark (9/04)

Look and feel

Look and feel is web-speak for a combination of your colour scheme, layout, and overall design of your site. You've already sorted out your layout, so it's now time to develop a colour scheme. Grab your storyboards from your previous page, and start thinking about what colours you will use in your site. What colour will the page background be? Will it change on each page, or remain the same throughout the site, thus achieving a "common look and feel"? Think back to what you're actually doing, and who your intended audience is. Black and red might look cool in a sort of goth/vampire way, but it probably won't do much for a neo-pagan audience.

A good idea is to start with light simple colours, maybe with a white or off-white background. You can then work on the colours for your title and the other parts of your pages. It's usually best to have complimentary colours. What's that, you ask? Well, complimentary colours are quite simply colours that look good together. A bright red background with lime green text is certainly very bright, but apart from being incredibly difficult to read, they also don't really compliment each other. Dark blue text works well with light colours, and if you have a black or dark background, you're best off sticking with lighter coloured text.

Still with us? Okay, so you've had a think about it, and you've figured out what your colour scheme will be. Write the colours in on your storyboard, or if they're going to be too hard to remember, grab some pencils and colour in the relevant sections. This should leave you with a pretty good idea on what your final page will look like.

Next step in the look and feel process is to decide how your navigation will work. You have links, of course, but how will they be displayed, and how will the user interact with them? Common options are text links, graphical links, and buttons.

Text links are quite simply words that when clicked take you to another page. They're very easy to implement, and they are good for accessibility. Graphical links are usually a picture or image which act as a link. Instead of clicking on a word, you click on a picture, or an icon. Buttons come in a couple of styles. Standard form type buttons (think "Submit") work, and can be customised to act as links. The other option is to create small rectangular images which are about the size of buttons. They look good, and do exactly the same thing. Some people make graphical buttons simply using a fancy font, others actually use a descriptive image background on the button. It's all up to you. Think once again about the kind of audience you will be trying to attract. What sort of link would suit their style? Write it down on your storyboard so that you know what you'll be doing when it comes to actually writing the code for your site.

Making life easier

There are two ways to build a website. The easy way and the hard way. Both ways will work, but one requires more effort. No prizes for guessing which one. The easy way to build your site is to centralise as much as possible. What does that mean? Well, instead of coding your colours and fonts on every single page, consider using a single CSS file which is used on each page. That way if you want to change a colour or a font, you simply update your one CSS file, and all the pages using that file change automatically. Instead of having a list of links hard coded on every page, consider creating a JavaScript file which writes the links in automatically for you. That way when you change the name of one of your pages, you only need update the JavaScript file, and the correct details are written in to each page menu. Saves updating each one individually, and on a big site, that can literally take you days to do. There is one caution when using a JavaScript menu file. You must also include a <noscript> section on your page so that people browsing without JavaScript enabled in their browser can still navigate your site.

A couple of other hints to make things easier for you. If you are using Dreamweaver, consider creating yourself a template file. This is a file which you use every time you want to make a new page. You write all the code for a page, and then lock down certain parts of it so that you can only update the content part of the page. This will avoid situations where you accidentally change a page and don't change the others, and is also very useful where you have more than one person developing the site. The advantage is that if you need to change something, you can simply update the template file and it will automatically make the changes on all pages developed using that file.

Turning on the computer

It's time. You've done the hard part. This part now becomes very simple. The first thing to do is to create a site structure on your local hard drive. Let's say that you're using a folder called c:/webpage/ to do your development work in. Create yourself a subfolder called images to store all your images, and one called scripts to store your JavaScript and CSS files. You should then have c:/webpage/images/ and c:/webpage/scripts/. Depending on the size of your site, you could conceivably create directories for each section of the site, but in the Coven of the Magical Mystics example, a dozen HTML files will be okay in the one directory.

You now know that all your .htm pages will be located under c:/webpage, and all your images will be under c:/webpage/images and so forth. This makes it easier when it comes to putting the links in your page.

Coding your pages

For as many people that code webpages, there are as many preferred editors. Everyone you speak to will recommend a different editor. Well, maybe not everyone, but the point is that there are dozens of good editors, and each one caters to a different set of needs. You can code your pages by hand into notepad or a simple text editor, or you can design them graphically using a "What You See Is What You Get" (or WYSIWYG) interface in programs such as Dreamweaver. It is up to you how you do it.

Start with your index.htm page, and preview your work frequently to ensure that you're sticking within the guidelines of your plan. Make sure that what you're coding is appearing correctly, because it's far easier to find the error in your last 10 lines of code than to trawl through the whole page looking for a misplaced closing bracket. Once your index.htm page is done, and your links are included on the page, it's time to create the pages you're linking to. Use the same process again - save and preview your work often, and test each link as you create it.

There are some ideas which can make life easier for you when you code your pages. You must think not only in terms of how quick or easy it is to actually build the pages right now, but how easy it will be to maintain when you have to come back in a month to make updates or changes.

illustration of Indenting code Indent your code. It is surprising what a difference this makes to readability when you are trying to find something in your code. Lets say you are creating a table on your page. Start with your body tag at the top level, then on the next line, tab once before you write your table tag. Then go to the next line and tab twice for your tr tag, and three times on the next line for your th or td tag. Try to align corresponding tags underneath each other. Put your /tr tag vertically underneath your tr tag, and your /table tag vertically underneath your table tag. Not only is this easier to read, it is easier to debug. You will find that if your tags all match up visually, you will be able to easily see where that missing /tr is that causes your whole table to sit out of alignment.

Use relative links within your site. Another web-word that just means that when you specify the location of a file, you specify it relative to the current file. Although you will most likely never see the difference, relative links are faster than the alternative - absolute links. To do this, if you are creating a link from your homepage to your photo page, simply link to photo.htm, rather than http://www.webserver.com/mysite/photo.htm. The other advantage to this method is that you can put your site on any server, anywhere in the world, and you will not have to update your links to make it all work. You are linking to a file within your existing directory structure. If you use absolute links, you will need to change the domain name, and quite possibly the directory in each and every one of your links, including your image tags.

Name your form elements. When you create a form, whether it be a complex shopping cart, or a simple "contact us" type form, it is far easier to reference your form elements by name rather than their position in the form elements array. Depending on how you name your elements, it can also make the reference shorter. Calling a field "name" makes for a shorter reference than "elements[12]". It will help avoid confusion, and makes it far easier to maintain, update and scale your form.

Save your work often. Save your work often. Save your work often. Save your work often. Save your work often. This cannot be said enough times, and it is surprising how many experienced developers lose an hours really hard work through not saving their files. At times, even five minutes work can be difficult to recover, but it is a whole pile easier than trying to recreate an hours worth. So, save your work often. If your HTML editing program has an autosave function, use it.

Experiment, and have fun. Try different things. If they don't work, or they don't look any good, change them back again. Simple as that. You can't break it! If you get into a tangled mess, drop a quick message on the PWA-L list, and one of the friendly souls will assist you in no time. Some of them actually enjoy challenges, so no matter how bad it is, someone will find a way to help you fix it!

Conclusion

Plan everything before you do it. The time taken to draw everything out on paper is actually less than jumping straight in and coding, then having to go back and change everything because you don't like the layout.

Most of all though, have fun, and don't be scared to ask for people's opinions. Pagans WebCrafters are a pretty friendly bunch, and offering constructive criticism on your work is one of the many services they offer with a smile. This whole process can be enjoyable, and you will find yourself learning something new every step of the way. Experienced developers still learn each time they create a new site.

Enjoy the experience.

Page one <<

Authors' retain all rights to any of their works published on thepwa.net.

Copyright © 1997 - 2004+ by The PWA (Pagan WebCrafters' Association). All Rights Reserved.
The PWA is administrated by Gwen Wolfrose.
Send any comments about this site to

pwa   pwa-l   pwag   pwa lj   xhtml   css  

Articles

Tutorials