Major Confusion :: Sharing the FUN with Serif software page footer: Kaptain-Chaos Designs ©2008 Major Confusion :: Sharing the FUN with Serif software Page Header : Kaptain-Chaos Designs ©2008 Major Confusion navbar Links: Kaptain-Chaos Designs ©2008 Major Confusion navbar Contact me: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar Gallery: Kaptain-Chaos Designs ©2008 Major Confusion navbar Tutorials: Kaptain-Chaos Designs ©2008 Major Confusion navbar Home: Kaptain-Chaos Designs ©2008
Kaptain-Chaos Designs

Home

Tutorials

Gallery

Links

Contact

Site map

Privacy Policy

Terms & Conditions

Major Confusion PhotoPlus Graphic :: Kaptain-Chaos Designs @2008 Major Confusion DrawPlus Graphic :: Kaptain-Chaos Designs @2008 Major Confusion WebPlus Graphic :: Kaptain-Chaos Designs @2008 page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008 back to Major Confusion WebPlus Tutorials home page button: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 back to Major Confusion WebPlus Tutorials home page button: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

A good place to start with web site design is with a pen or pencil and some paper, making a list of the various pages needed. For our example, we will look at a personal web site. Typically, this consists of the following main pages: Home (or Welcome); About Me; News; Gallery; Contact Me, obviously the choice is yours to make. There can be other pages coming off these main sections called ‘Child’ pages, for example, a ‘Hobbies’ page could be a ‘Child’ page of the ‘About Me’ page.

The next is page size, how wide will our page be? We must consider that not everyone will have the latest kit with large or wide displays, some people do not have their browser maximised either; therefore, our page width should consider this. Generally, our content should fit within an 800-pixel width screen (less the scroll bar gives around 760 pixels as the main area for content). This size means those people with a larger width screen will see some page background while those with the smaller screen sizes (or a reduced browser window) will see our content without the need for constantly scrolling from left to right and back again to read our content. We want to engage with our audience, not turn them away!

Do we want our navigation (nav) buttons running across the top, or down the side, of our pages? Do we want to use the Serif WebPlus inbuilt button styles, or do we want to create our own? The inbuilt ones are very good, and extremely flexible. For our example, though, we are going to be making the buttons in Serif DrawPlus. We will cover two of the issues that are raised using this method further on, but it does have the advantage of creating pages with a custom look.

What is our colour scheme going to be? It would be good if we could look at a colour wheel to set this up, now where have we seen one...? Oh, yes, here are two colour wheels! These are a freely available resource to download and place into the ‘My Designs’ section of the Serif DrawPlus or Serif WebPlus ‘Gallery’ tab. We will be using various tones of one colour for the page and ‘on page’ background colours and a complimentary colour providing added impact for highlights. Following this step-by-step ‘Simple graphics for a Serif WebPlus web site’ project should provide a greater understanding of how to create a website from scratch without relying on a template.

I know we are chomping at the bit to fire up a program and begin all the fun stuff, but it is good to consider these points carefully when making these decisions before looking at the graphic design of the page.

The use of three Serif products in this project is designed to create some familiarity with the software packages. Much of the following can be created straight in WebPlus; the steps are quite easily converted to using the one program. Using DrawPlus adds the capability of using layers; I find this provides greater control over the creation process with a way to easily make amendments without affecting the main site. Layers are not available in WebPlus. Please remember there are many ways of creating a site layout for WebPlus (including straight from a template, quick and easy).


This is just one of the ways to create an individual web site.

next button Major Confusion Web Page Creation Part 2 :: Kaptin-Chaos Designs ©2008 next button Major Confusion Web Page Creation Part 2 :: Kaptin-Chaos Designs ©2008

This project utilises Serif DrawPlus, Serif PhotoPlus and Serif WebPlus (v10 upwards). We will look at a simple page for a site design, creating all the graphic elements necessary within DrawPlus to place on our Master Page in WebPlus. We will be concentrating on the purely visual aspect rather than discussing content related issues. However, content is something that needs to be considered first, as what good is a web site if it looks ‘pretty’ but has no content to draw people in and maintain their interest?

Part One: Introduction

Creating a web site

Time to allow: A week-end or several one hour sessions.


PLEASE NOTE: It has been reported that users of Vista browsing with Internet Explorer have experienced some problems with the display of a number of these pages. I have posted a possible solution here. Firefox and other browsers do not have a problem  in Vista. XP users do not have have any problems.