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

page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Creating a web site

Part Seven: Refinement and Ideas

This is the seventh 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, fourth, fifth and sixth parts of Creating a custom web site.

previous - Web Page Creation Part 6 page: Kaptain-Chaos Designs ©2008 forward to the Major Confusion WebPlus Tutorials page button :: Kaptain-Chaos Designs ©2008 back to Web Page Creation Part 6 page button: Kaptain-Chaos Designs ©2008 forward to the Major Confusion WebPlus Tutorials page button: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

So far we have concentrated on the visual aspects of creating our web site, which is fine, however, if we want our site to be visible to search engines, we need some text. “I’ll be writing some!” I hear someone say. Yes that’s quite right, but Search Engines like links within the site, and our navigation buttons are just images. A really good idea would be to create some text links between our pages running along the bottom of our page. This way we get the best of both worlds. A visually attractive navigation bar running along the top of our window, and a searchable text link running along the bottom that doubles as our navigation bar if our page runs further down below the current window.

Step Thirteen: Adding some refinement

We’re going to start with the images. If this is not to your taste, just skip down to the next section. We should know the drill by now: Ctrl+G import the deco_left image and click on the page. We’ll drag this down to the bottom left corner of our page margin, then, once positioned, use the transform tab to move it into it’s final position.


With the anchor set at centre left, it should currently be reading x 70, y 498 (w 20, h24). Change the y to read 530. The anchor is centre left because we will want our text to be aligned to the centre of the image.

Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008

Open up the Master A page. We’ll turn our attention to the bottom of this page. Everything created here will be seen on all of our pages, we only need create it the once!


There are a few options open to us here. Plain text hyperlinks is top priority, possibly the addition of a copyright notice and even repeating the deco images from the nav bar might look good. We’ll go for all three! Of course, only the text hyperlinks are the essential ingredient here.

Repeat with deco_right x 810, y 530, w and h as before. Select both and, setting the Image Export Options to our page_images folder and never resample.

Open an HTML text box and type:

Welcome | About me | News | Gallery | Contact me

(the | symbol is created by pressing the left shift key and the one next to it - before the Z - at the same time). Selecting the text, set the font size to 10 pt, using the transform tab with top left anchor selected, set this HTML text box to:

x 106; y 521; w 348; h 18.

If you’re not using the deco_left, x = 70

Finally, selecting each word in turn (not the | symbol), right click, choosing Hyperlink from the menu, set the link to the relevant page.

Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 13b :: Kaptain-Chaos Designs ©2008

The text driven navigation is just that, text with hyperlinks, and when clicked, take us to a new page or location. It really is simple to create.

Two more text boxes to go here, the first is the copyright, normally takes the format:

[name] © date

All rights reserved

The © symbol is created by holding down the Alt button and typing 0169 while the button is still pressed in. Use the Verdana font set to 10 pt, right aligned with the following settings, anchored top right:

 x 800; y 521; w whatever is required, h 32.

Our final HTML text box is to set an automatically updating date for whenever there is a site change. This will be updated whenever we upload anything new to the site. Create a new HTML text box, select Verdana 9 pt and type ‘This site was last updated ’ After the space, right click and select Insert> Information>Date and Time and make a choice from the variety of styles available. Centre this text within the box, with the anchor set to bottom centre, enter the following:

x 450; y 554; w (larger than the text); h 14.

With our bottom page elements completed, select them all by dragging the mouse over them all, right click and select Arrange>Attach to bottom of page.


Job done, save the site and preview in a browser.

Step Fourteen: A few ideas to get us going

The main purpose of any website is to include information of one sort or another. Our need now is to add some content, but before we do, let’s look at how the content will be displayed.


There are different ways of displaying text and images on a page, in text frames, freely on the page, in their own ‘picture frames’. Once a choice has been made, for consistency, it is best to retain the style for the text within the site. Rather like deciding on one style of font and sticking with it, it creates a uniform visual style that is easier to follow and looks as though it ‘belongs’, the site pages relate to one another.

For our site we will adopt a ‘picture frame’ style for our text and images. The frames will help focus attention on specific areas of text. These areas can be broken up into sections, making the page appealing and easy to read.


To do this we will be using the WebPlus ‘Quick Shape’, applying a line and some effects that are in keeping with the site style. Web Plus has some great tools in its’ arsenal, we want to make the best use of them.

Click on the ‘Quick Shape’ button and choose the rectangular shape. Drag out a rectangle starting on the first guideline about a quarter of the way down the page. As the shape is dragged out width-wise the shape will snap to the guidelines - we want the last guideline that runs down the page after the ‘Contact me’ button. Now, on the line tab, add a 4 pixel line, colour scheme 4. The example website has the following settings: x=302, y=209, W=496 pix and H=396 pix.


The next part, before any text is added, is to create the fill colour, inner shadow and round off the corners. To do this, fill the quick shape with scheme colour 2 - this should be in the swatches tab already, if not, use the eyedropper tool and click on the on page teal colour. We want to make a tint of this colour to help provide a focal point for our page. With the quick shape selected, make sure the page swatch is selected, go to the Colour tab and choose tinting from the drop-down box. Make this 20% - the tint automatically updates in our quick shape.

Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 7 step 14c :: Kaptain-Chaos Designs ©2008

Next up it’s time to add the Filter Effects. With our quick shape selected right click the mouse button and a pop-up menu window will appear. Select the Filter Effects option and fill in the details as below:

Inner Shadow, Opacity 50, Blur 7.5pt, distance 7.5pt and Angle 45

Finally set the corner radius to 10% - either by dragging the node on the side of the box or typing in the box marked ‘Corner Radius’ in the contextual toolbar at the top of the workspace.

With our shape completed, WebPlus needs to be told how we wish to handle this Quick Shape. By default WebPlus will do a very good job of naming and exporting as a png. However, the default name (qs1) is not very useful for identifying problems or making quick amendments when there are several pages with theses shapes names qs1, qs2, qs3 etc. Also, they are placed in the root of the site, I prefer to place them in a folder and keep the root free for the important files like index.html. I find it much easier to provide these shapes with a name and place related to where and what they are. I export these as an image to the page-images folder and give a name related to the page the Quick Shape is placed in. For this shape the file name is welcome_comment1.png.

To complete this page, we will copy the quick shape added and paste it onto our page, resizing to fit the space on the left hand side of the page. Anchor the top left, the transform tab readout is: x=95 pix, y=246 pix, w=186 pix, h=332 pix. Change the fill to Scheme colour 2; it may be noticed that the rounded corners have changed shape too, alter the corner radius to 18% which will match the first shape. In the Image Export properties, change the name to welcome_comment2.png.

Add an HTML text frame to each of these completed frames and type away. I have provided some more information on the example website. If you find you need more space, simply make the Quick Shape frame taller, lengthen the page via Page Properties you could even add another Quick Shape frame (copy and paste). One alternative to increasing the size of the page is to right click the HTML text frame an choose Text Format > Overflowing Text >Auto scrollbar. Text can be edited in these frames by going to Edit>Edit Story or by using the keyboard short cut Ctrl+E.

Keep watching this site, as more tutorials for WebPlus are added, the example site will be used to provide a visual example of what is being covered in each tutorial.


Remember to keep having FUN with Serif software!


Ken (Major Confusion)