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 Six: Pages, buttons and browsing

This is the sixth 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 and fifth 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 7 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 7 page button :: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008

We will begin by setting our page size. Click on the ‘Master Pages’ drop down box and double click on the ‘Master A’ icon, this opens up the Master Page, enabling us to set the automatic defaults when any new page is created using Master Page A as the template. The screenshots for WebPlus are taken while working through this project using the ‘Site Designer’ workspace.


Right click anywhere on the page (or pasteboard), selecting ‘Page Properties’ from the list. Set the page width to 900 and page height to 600. We will use this height on our Master Page although, when we come to or regular pages, this height will be more, it is just to ensure all of the regularly used elements placed on this page will be included in every page, no matter what the height. It also makes setting up this page easier as we can see everything in the one window.

Step Nine: The Master Page

Margins and guides are next on our menu. The quick way is to right click on this page and select ‘Layout guides’ from the popup menu. Firstly, we set the page ‘Margins’. Set the left and right to 70 pixels each, with the top at 70 and the bottom to 90 pixels. Secondly are the layout ‘Guides’, click on the tab and enter the following, clicking the add button after entering the numbers: Horizontal 30 (click add), 70 (click add); Vertical 300, 400, 500, 600, 700, 800 (click add between each one); Finally, click OK.


Our page is automatically populated with our page margins and layout guides – much easier and more accurate than trying to drag them onto the page in their right places!



Save our progress so far.

Click anywhere on our page. Grab the page_top image using the pointer tool (do not grab one of the handles, we are moving this image into place, our cursor will show the move cursor), drag it towards the top left corner until it snaps into place. Look at the transform tab and, setting the anchor to top left, you should see x and y both at 0. Repeat this process for inserting the page_bottom.png, the x should be 0 and y 510. Right click the page_bottom.png and, selecting ‘Arrange’ (at the bottom of the popup window), select ‘Attach to bottom of page’.


Selecting the ‘Attach to bottom of page’ means that whenever we adjust the length of our page, the page_bottom.png will automatically move to the correct place on our page, whether it’s 600 or 6000 pixels. Neat!


Back to the Home page (double click on the home page in the Site tab), press Ctrl+G and import page_left.png, remembering to choose link. This time, with the pointer tool, drag the image to the space just below the top image on the left side of our page – the image snaps to the page edge, top and side of the left margin. Drag the centre handle down to the bottom page margin, it automatically snaps to this position too. The transform tab co-ordinates read X 0, Y 50, W 70, H 500. Repeat for the page_right image, this will read X 830, Y50, W 70, H 500.

Serif WebPlus can do all the work for us – if we want – but as we have taken the reigns so far, let’s continue to do so with how we manage this site.


Open Tools> Image Export Manager leaving the ‘All Pages’ option checked – we’ve only one page anyway.


The first section provides the Image Export Options, we want to take control, so, checking the ‘Save to my chosen path and name, click the choose file button. We are presented with the name and location. Leave the default file name in this instance because we have already named our object. Click the New Folder button and enter page_images for the folder name, now click OK, our location bar reads page_images/name.


On to the Picture Resampling options, check the ‘Always use original file (never resample) option. Because we have already made our image the optimum for our purpose, we know that what we see is what we will get on our web page. If we had not checked this option and WebPlus kindly ‘thought’ it could do a better job, we may end up with an image of smaller file size (not always) but inferior appearance.


Note:The folder name we have given in the location option will be applied to our web site during the upload process. Using the same name and location as we have on our hard drive helps if ever we need to check images or have a problem with our local WebPlus file.


Because everything, both off and on-line, is named and located in the same place, finding the right image becomes an easier task. If we left WebPlus to do this all for us, we would have one image folder called wpimages on-line filled with files given obscure names like wp23fd54g32.png – a nightmare and much longer job trying to locate the relevant image!


It does take a little longer to create our site because we are becoming more involved with the inner workings. The benefits of this action far outweighs the cost. This will become clearer later when we begin to add more images and content to our pages as our site grows.


It’s great for creating backups too!

Step Ten: Importing the graphics.

Step Eleven: Adding pages

We can now add some more pages, but first, let’s change the default ‘Home’ title of our first page to the one we used in our menu bar - ‘Welcome’. To do this, right click on the word ‘Home’ in the Site tab and choose ‘Page Properties’. The word Home is highlighted in the popup box. Simply type in the word Welcome.


Click the ‘Add pages’ button that runs along the top of our site tab. This next part is important – always change the default ‘Page 2’ (or higher number) displayed in the popup window to a relevant, but short name.  For the first page, this is ‘About’. Leaving ‘Master Page set to ‘A’, check the ‘Copy objects from page’ choosing Welcome, also check the ‘copy html option (this copies the Image Properties set previously); placement is after Welcome. Click OK. We are automatically located on this new page. The image options we had set on the Welcome page are copied to this new page.


Don’t worry that there seems to be a big gap in the towards the bottom of this new page. This is because the Site Properties is set to the default 1000 pixels for new page height. We will attend to our page height later and see some more of the magic in Serif WebPlus.


Add the News, Gallery and Contact pages.

We have a few more options to set for each page before adding our navigation bar. In the site manager, right click on the Welcome page, choosing Page Properties from the drop down list. In the popup window, the important section to change is the ‘Specify html title’. This is the text that displays across the top of a browser window; also, it is something a search engine notices. We need to make this meaningful and descriptive, not just ‘welcome’. Click in the ‘Specify html title’ area and type a descriptive name to enter our title. Spaces are allowed, for this example site I put ‘Major Confusion - Web Page tutorial example - Welcome’ (without the quote marks). Avoid question marks as these don’t play ‘nice’ with search engines.


There is a setting for page height on this tab, leave this for now as we are concentrating on page names, we will return here once this section is completed.


While we are on this popup window, take a moment to look at some of the other tabs, don’t change anything for now, unless you want to write some relevant copy in the Search tab or set the Search Engine options. Press OK to accept the changes.


When we come to the next four pages, there’s a little more to do. Right click on the ‘About’ page in the Site tab, choosing Page Properties once more. Change the Specify html title, changing the beginning as we did before, mine now reads ‘Major Confusion - Web Page tutorial example - About Me’ (using copy and paste at the beginning of the title). This time we need to change the ‘generic’ page2.html file name to a more easily recognised one. Click the change button, typing about.html – one word of advice; keep the letters all lower case placing underscores instead of spaces. For these pages though, simple one word descriptions will do fine.

Step Twelve: Adding our buttons

It’s finally here! Currently our pages are just individual pages with no connections. We are now going to add the roll over buttons we created in DrawPlus – it seems such a long time ago!

Open the Master A page once more. In the left hand tool bar go to the Navigation tool and click on the Insert Rollover button. A Rollover window pops up, providing us with a number of options. The first is our ‘target’ for this button to act on.


WebPlus will work out the required coding for us, we only have to make the decisions for which button does this action.


So, for the top action – Hyperlink, click on the Set button, choosing ‘Site Page’, Welcome, then add the number 1 into the accessibility box, Clicking OK to return to the main Rollover dialogue. You will notice that the Hyperlink box now has the ‘Welcome’ page in its description box.

Repeat this for the Over button and the Down buttons, also, use the Down button for the ‘Down and Over’ state. When all four states have been set, leave the Embed option blank and click OK.


The regular cursor key will change to a + (Plus sign) with a rectangle placed to the lower right hand side; click as close to the first set of guide lines, and just let go of the mouse. A new button has appeared. Grab it and slide it into the centre of this first red rectangle on our page, it will snap to the guidelines. Be careful not to adjust the size. If you would be happier using the transform tab, the co-ordinates are: X 300, Y 30, (W 100 and X 24). Repeat this process until all five buttons are complete and sitting on our page. The Accessibility key for for each button is, About 2; News 3; Gallery 4; Contact 5. The X co-ordinates for each button is About 400, News 500, Gallery 600, Contact 700.


Save after creating each one.

Carrying out this button placement on our Master Page has meant that we only need do this once, take a look at any of the pages – they each have the buttons! It is time to test our site in a browser.  Choose to Preview your site in a browser.

On the Welcome page, press Ctrl+G, inserting a link to the welcome_down.png image. Place this over the Welcome button. It will snap to the guidelines; if preferred, the transform tab can set using the same settings as before. Right clicking on the image, choose Image Export options, making our selections as before.


This time, however, before clicking on OK and moving to the next page to continue, click on the Image Export options, opening the Alt and Title tab, typing in the top box ‘You are at * Welcome Page’ – replacing * for your web site name (in my example this is You are at the Major Confusion example Welcome page). Save, then continue with the other pages (move to the About page and then set the You are at button up).


You can test between pages if you wish to try things out.

Currently, all of our page heights are set to 1000 pixels, this is because they follow the default new page settings. When we want a different page height, simply open up the ‘Page Properties’ and set the page height, lets try this with the ‘Welcome’ page, setting it to 750 pixels. We notice our page bottom graphic automatically jumps to the new bottom of the page, fantastic! However, our page sides have been left behind. Clicking on either one, drag the centre handle down until it snaps to the page margin, repeat for the other side. It is the same for all of our pages. Easy!

Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 9b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a-c :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10a :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10c :: Kaptain-Chaos Designs ©2008

Let’s have another sneak peek and preview our web page in a browser - wow!

Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e:: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10d :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 10e :: Kaptain-Chaos Designs ©2008

Notice the Alt and Title tab? These are very useful locations to add information to. Alt tabs are used by screen readers and search engine spiders. The Title is what pops up to the right of the mouse pointer when it rests on an image. Try holding your mouse over the image above to see the image title.

Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11a+b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11b :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d+e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11e :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11d :: Kaptain-Chaos Designs ©2008

The option to save in a particular folder presents it self again, however, as these are ‘root’ pages, just leave them at this default.


Repeat this process for specifying the HTML title and changing the filename for the following three pages, giving unique titles and page names.

Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008 Major Confusion Website Tutorial part 6 step 11f :: Kaptain-Chaos Designs ©2008

Before adding any new pages or our navigation bar (I know we’re itching to have a go – good things come to those who wait!), let’s set some image options, so that the subsequent pages will automatically have this set up too.

Continue with the other five images in the same way as the first.

Remember to save once this is completed.

This is where the fun begins! Make sure the ‘Transform’ tab is open and snapping is on. The quick way is to click on the insert picture button on the toolbar or press Ctrl+G, the long way is to select Insert>Picture>From File. Navigate to our Serif/WebPlus/my website/page_images folder, select page_top.png, and check the ‘link option.

Press Ctrl+G, navigate to the deco_left.png image, clicking anywhere on the page. Carefully move to the position shown, the image snaps to the guide lines. The transform tab reads x 280, y 30 (w should already be 20 and h 24). Do the same for the deco_right.png x reads 800.

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

Setting the buttons options is straightforward. First up is the ‘Normal state, checked by default. Clicking on the Browse button, locate the welcome_normal.png file, making sure the ‘link’ radio button is checked and OK out. Now click on the Image Export options, this is the familiar window with image placement and Resampling options, set these as before.

On a personal note, I like to give people a visual clue to where they are. To do this, we will place a copy of our ‘Down’ button for a page on the appropriate page. This has the effect of blocking the roll over action for that page. It throws up an error for this in our site manager window, stating that the hyperlink and Active object aren’t working but it is nothing to worry about as this is a deliberate action on our part.

We now have a fully functional basic web site layout. Although we can leave it here and say “The time has come to add the content”, we will just add some refinement to the site and look at a few simple ideas to spur us on our way to creating our very own, non template based, web site.