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 Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Creating a web site

Part Five: Scheming Fonts!

This is the fifth part of a series working through the processes involved when creating a customised graphical web page environment, avoiding the use of a template driven site. The programs involved in this process are Serif DrawPlus, Serif PhotoPlus using Serif WebPlus to bring it all together and publish to our website. If you have not already done so, I suggest you look over the first, second, third and fourth parts of Creating a custom web site.

previous - Web Page Creation Part 4 page: Kaptain-Chaos Designs ©2008 forward to the Web Page Creation Part 5 page button :: Kaptain-Chaos Designs ©2008 back to Web Page Creation Part 5 page button: Kaptain-Chaos Designs ©2008 forward to the Web Page Creation Part 5 page button :: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

Opening up Serif WebPlus, select ‘Start New Site’ from the options menu, a default sized page opens up.


Leaving the page as it is for the time being, we will set up our default colour scheme and font styles, a good place to start with any new WebPlus project. If you have not already got a copy of the free colour wheels in the ‘My Designs’ section of the Gallery tab in WebPlus, here is the RGB Shade and Tint Colour wheel instructions page, please follow the instructions and place the colour wheels in the ‘My Designs’ section of the Gallery tab. Drag the Shade colour wheel onto the workspace, click on the teal swatch, one out from the centre, as we did in the initial DrawPlus section, using the colour picker tool that is located in the Colour tab. In case you have forgotten, here’s how again.

Step Seven: Setting up the Colour Scheme in WebPlus

Selecting the ‘Shade’ colour wheel, with the left mouse button held down, drag the eyedropper tool from the ‘Colour tab and across the pasteboard to the second to darkest shade of teal. With the cross hair of the cursor placed in the centre of the swatch, let go of the mouse button. The picked colour swatch in the Colour tab now shows our teal shade, and our shade colour wheel changes from RGB to a selection of tones of teal. Magic!


You will also notice that our ‘Publication Palette’ in the Swatches list also has a copy of this swatch added to it. It is important to check this when carrying out the next stage, as these new ‘Publication Palette’ colours are the key to creating our Scheme. For now, right click this swatch and delete it, we do not want to be confused when picking our scheme colours.

We will now select some of our colours. Click anywhere on the pasteboard (outside the page), to ensure nothing is selected.

For our page background colour, it is the outer swatch of the darkest section, choose this swatch with the colour picker tool. The chosen colour now fills a new swatch in our ‘Publication palette. Repeat this process, this time selecting the second swatch in from the outside edge of the opposite section; this will become our on page colour. We need three more colours. The final one from this colour wheel is the lightest outside swatch.


The other two colours will be contrasting colours using the ‘tint’ colour wheel. Let’s click and drag the RGB tint colour wheel onto our workspace, resizing it to 400 pixels x 400 pixels. Do the same with a new instance of the RGB ‘shade’ colour wheel. With the ‘tint’ colour wheel selected, drag the colour picker to the shade colour wheel and pick the centre swatch of the ‘orange’ section opposite the teal section - see this screen shot. The ‘tint’ colour wheel changes to tones of the orange shade.


We now have three colour wheels on our pasteboard 1) teal, 2) orange and 3) RGB. Delete the RGB colour wheel, we have no further use for it. We will now pick two contrasting tones from the new colour wheel. The first is the outer swatch of the section opposite the darkest section, followed by the lightest outer swatch. See screen shot left.

With our colours selected, we can turn our attention to setting the colour scheme. Before we do, we will take a look at our Swatches tab. Towards the bottom of this tab is a line of our newly created swatches; it is these that we will be selecting next.

Open the Colour Scheme by clicking on the ‘paint pot’ button in the toolbar or go to Tools>Scheme Manager. Selecting the ‘Scheme Colour 1’ drop down box, scroll down towards the bottom of the colour swatches, selecting the dark green swatch that is next to the first light green swatch. Selecting Scheme Colour 2, scroll down to the first light green swatch (next to the one we just picked). Scheme colour 3 is the one after this swatch, Scheme colour 4 the middle of our orange swatches and 5 is the last of our orange swatches.


Now we need to set our hyperlink colours.

Set ‘Hyperlink’ to the same as Scheme 1;

‘Followed’ to the darkest orange swatch; ‘Active’ to the same as scheme 5 and

‘Rollover’ to the same as scheme 3.


Our hyperlink text will take these colours when once a hyperlink is set. The action will only be obvious when the page is viewed in a browser window. We just need to set our background and on page colours.


Our background colour ‘B’ is the same as the Scheme 1 colour.

Our on page colour ‘O’ is the same as Scheme 2 colour.


Save the Colour Scheme under a new name, example given is ‘my web site’. It will always be available to us from now on; any changes we make to this scheme will automatically be reflected in the text, background colour and on page colour. Because we have created our own buttons and background swatches, this will not be reflected in those elements.

Step Eight: Setting fonts

Font styles create an impression of a publication from the moment it is looked at and greatly enhances print media; with the PC, however, it is much safer to stick with what is called a ‘web safe’ font. The simple reason for this is that most PC’s have these (or something very similar) installed by default. This means web browsers will be able to display our pages how they have been designed. If we choose a font that not everyone will have installed on their PC, we cannot guarantee the wonderful page we have designed will be seen in the same way by someone who does not have the fantastic ‘xyz’ font installed.


So, the best choice is to stick with web safe, Serif WebPlus makes choosing a web safe font easy - it has already collected these in an easy to find group in the Fonts tab.


Non web safe fonts can still be used if it is absolutely necessary, be these are best saved as graphics to ensure what we have designed will be seen by all. The down side to this is that search engines will not see any text written in this format. So the best advice is to stick with web safe fonts, making the page itself look interesting and inviting.

Before we continue, it is a good idea to save our new site under its own name. We will use ‘My site’ for the example. Go to File in the menu bar and click on Save As, Navigate to our Serif/WebPlus/My website folder and save here.

Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b+c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d-h :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7g :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 7h :: Kaptain-Chaos Designs ©2008

Open the Text>Text Style Palette from the menu bar. With the ‘Normal’ font selected click on the Modify button. We will leave this as the default 12 pt Verdana. Selecting the Font in the Text style pane, choose the text colour swatch and set this to our scheme colour 1. Click on OK to accept this change. If you want your Heading 1, 2 or 3 text to be a specific style or colour, click the plus sign next to the Normal and, in the drop down list, select the relevant style to be changed. In this case, we will adjust the Heading 1 to 20 pt and text colour to Scheme 4.


These settings can be adjusted to suit personal preferences, but remember, we are hoping others will want to view our pages, so just use one or two font styles at the most, varying their sizes (weights) and keep things legible!

Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c+d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 5 step 8c :: Kaptain-Chaos Designs ©2008

Just before we leave this page, fancy a quick peek? Hit the ‘Preview site in browser’ button.

Having completed our colour scheme, drag the colour wheels off the pasteboard and into ‘My Designs’ in the Gallery tab, naming them ‘my site main’ and ‘my site complimentary’. They will always be available should we want to create or adjust a graphic - I will discuss this in a later part.