Having completed your home page in the previous chapters of this BlueGriffon tutorial series, we can now work on the rest of your website.
As implied by the above paragraph, you will need the knowledge and skills taught in the earlier chapters for this guide to make any sense at all, since it completely relies on the work done previously. If you don't even have a site yet, you should start with the article giving the steps to build a website from scratch.
By the end of this chapter, you will have created the other pages of your site (with the exception of the Feedback/Contact Form).
Instead of designing the new pages from the ground up, and going through the laborious task of duplicating the work done in chapters 1 to 6, it's more efficient to make a copy of your home page and modify it.
That is to say, if you are creating, a new page called "sitemap.html", make a copy of your "index.html" and rename it "sitemap.html". Then modify "sitemap.html" so that it has the content you want.
Here is one way of doing it.
Start up BlueGriffon and open your home page (your "index.html" file).
Click "File | Save As..." from the menu.
In the "Save Page As" dialog box that appears, type in your new filename. For example, if the new page is to be your Site Map, type "sitemap.html" (without the quotes).
At this point, you have a new file called "sitemap.html" (or whatever you called it) with the same content as your home page. If you look above your web page in BlueGriffon, you may see two tabs. Your home page is in the tab on the left, and the currently selected tab is the one you just duplicated from the home page.
If so, unless you are accustomed to working with multiple files open in different tabs at the same time, I recommend that you close all open files (use "File | Close current tab" from the menu until you're left with a blank BlueGriffon window) then re-open the "sitemap.html" file again. This way, you will not accidentally modify the wrong one. It's very easy to make that mistake even if you're an experienced webmaster, since, at this point in time, both the pages look identical (one having been derived from the other).
Before you go berserk creating new pages for your website, please read my article on How to Create Good Filenames for Your Web Pages, if you have not already done so when making your menu in chapter 6. This is very important. The recommendations for good filenames for websites are different from those for files stored on your own computer.
Specifically, do not use capital (uppercase) letters or spaces in your filenames. Notice that when I mentioned your Site Map, I gave a suggested name of "sitemap.html", and not the more obvious "Site Map.html". There's a good reason for that. Please read that article for more information, including other things not to do, why they should not be done, and workarounds so that the words in your filenames are reasonably easy to read.
The first new file that you will create in this chapter is the Site Map. You can see an example of this by looking at thesitewizard.com's Site Map. As you can see, it simply lists all the pages available.
At this time, your website only has one page, so you may be tempted to forego the site map altogether. However, I suggest that this is actually a good time to create one. If you wait till your site has (say) 100 pages, the task of getting around to listing all 100 URLs in the site map will be so onerous that you will give up. And, unfortunately, that is the time you will be in sore need of one.
Although a page containing an exhaustive list of links to all the other pages of your site seems pointless to you, it is actually a feature that enhances both the user friendliness of your website, as well as its search engine readiness. As a webmaster, you will intimately know how your site is organised ("organized" in US English), since you shed blood, sweat and tears to create it. But not everyone sorts information the way you do. What is obvious to you will not necessarily be to your visitors. Since you can't anticipate how everyone thinks, and it's probably impossible to design a site that suits everybody's way of organising information, giving them a Site Map will at least help them to find what they need when they get lost.
A site map also helps the search engine find the other pages on your site, particularly if your site is constructed in such a way that the engine has difficulty locating every page.
Unless you plan for your website to be a one page wonder, I strongly recommend that you create a site map. It doesn't require a lot of effort to create one, since it's just a list of links, but you reap its benefits anyway.
At the moment, your site map page looks exactly like your home page. Do the following:
Click "Format | Page Properties" from the menu.
A dialog box with the title "Document properties" will appear. You may remember this dialog box from chapter 1 when you designed your home page.
Change the contents of the "Title" field so that it either says "Site Map" (without the quotes) or "Site Map (Example Co)" (without the quotes). Obviously, you should use the name of your website instead of "Example Co".
Click the "OK" button.
You may or may not have an existing title displayed on the page itself. Since your site map is based on your home page, that title probably said something like your website's name. Modify that so that it now says "Site Map".
Now delete the existing content in the right column, and replace it with a list of links, one on each line.
The easiest way to make BlueGriffon cooperate in this is to do the following.
Let's say that you are creating three links on the page: "Home", "About Us" and "Contact Form". Type "Home" (without the quotation marks), then immediately after, type Shift+ENTER. That is, hold down the Shift key and hit ENTER on the keyboard. This inserts what is known as a "line break". (If you just hit ENTER, you will end up with a new paragraph, which puts too much space between lines.) Then type "About Us", followed by Shift+ENTER again, and finally "Contact Form". Keep doing this until all your page titles are on their own lines. At this point, they are just the unadorned titles, and not yet links.
Then go back to each line, select the word or words on that line, and make it into a link.
Due to deficiencies in BlueGriffon 3.0.1 and the older 2.3.1, there is no easy or intuitive way to add to an existing list of links separated by line breaks in the WYSIWYG mode. It's faster to just switch to the Source mode to solve it.
Put your cursor just after the last character on the line above where you want to insert the new link. Then click the "Source" button at the bottom of the BlueGriffon window to switch to the source view.
Look for the cursor on the page. If you positioned it as I suggested in the step above, it should be
just after the words of your link and before "</a><br>" on that same line.
Use the arrow keys on your keyboard to move the cursor to the end of the line, immediately after
"<br>", but still on that same line. Hit the ENTER key (or RETURN key on the Mac)
to create a new line.
Type "<br>" on that new line.
Click the "WYSIWYG" button at the bottom of the window to switch back to the WYSIWYG view.
Click to place your cursor on the new blank line that you created. You can now proceed to type the words for that link and make it into a link the usual way.
Avoid the temptation to make your site map look spectacular or unusual. A site map is the often the last resort your visitors have in finding something on your website. Don't make it into such a visual conundrum that they feel they are undergoing an IQ test just to use it. That is to say, just make it a simple list of links the way thesitewizard.com and other sites do.
If you are selling goods or services, you may want to create an "About Us" page to tell visitors a bit about your company. This is a straightforward page that doesn't require any technique other than those you have already learnt. Name the page anything you like (eg, "about.html" or "aboutus.html"), but if you have put a link to that page in your navigation menu in chapter 6, remember to use the same filename, otherwise people clicking your button will not be able to reach it.
In addition, after creating your page, don't forget to change the TITLE field in "Page | Properties" to say something like "About Us (Example Co)" or words to that effect.
Those creating a personal or hobby website may omit this page. If you choose to ignore what I say and create the page anyway, be circumspect about what you reveal about yourself. (This actually applies to your entire site, and not just this page.) Remember that a website can be read by anyone on the Internet, from future employers to criminals and lunatics living in your neighbourhood.
Follow the same basic procedure for the other pages that you want to create, that is, make a copy of your "index.html" file, change the TITLE field in "Page | Properties", and alter the content of the page.
In addition, once you've finished designing that new page, list it in your Site Map.
Do not create the Contact Form (or Feedback Form, or whatever you want to call it) yet. This will be dealt with in chapter 9.
If you want to create new pages in a subdirectory (ie, folder), you will need to take additional steps, or your website will not show up correctly in a web browser. BlueGriffon (at least up to version 3.0.1) will not automatically update any relative URL on your page when you save it.
Create a new subdirectory in your website's folder. If you have forgotten how to do this, review chapter 2, where you created the "images" directory.
Open your home page in BlueGriffon, and click "File | Save As...".
Navigate to that new directory, type your new filename, and click "Save".
Although everything looks fine on your page in BlueGriffon, it is not. All your images, style sheets and any link using relative URLs will be broken. You can verify this by starting up a browser now and viewing the file.
Click your site logo. Then click "Insert | Image" from the menu. This will bring up the "Insert an image" dialog box that you met in chapter 2. Click the folder icon, navigate to your "images" folder, select the image again, and click "Open". As usual, make sure that the "Make URL relative to page location" check box is ticked, and click "OK".
Repeat this for all the other pictures on your page.
Click "Panels | Stylesheets" from the menu. In the "Stylesheets" panel that appears, click the line that says "styles.css" to select it.
Click the gear icon at the bottom of the panel. It is the one immediately after the "+" and "-".
In the menu that pops up, click "Edit".
A dialog box with the title "Stylesheet properties" will appear. Click the folder icon next to the "Href" field.
In the "Select a stylesheet file" dialog box that appears, navigate to the directory containing your 2 style sheet files. Click "styles.css" to select it followed by the "Open" button.
Click the "Make URL relative to page location" check box to put a tick in it.
Click the "OK" button to dismiss the "Stylesheet properties" dialog box.
Click the line that says "tswnavbar.css" in the "Stylesheets" panel to select it.
Once again, click the gear icon at the bottom of the panel, followed by the "Edit" line in the menu that pops up.
Click the folder icon for the "Href" field.
In the dialog box that appears, click the "tswnavbar.css" file to select it, followed by the "Open" button.
Once again, put a tick in the "Make URL relative to page location" check box.
Click the "OK" button.
If you have used absolute URLs for the buttons in the navigation menu in chapter 6, skip to the next step.
On the other hand, if the links for your buttons use relative URLs, for each button, click to put your cursor somewhere within the word on that button, click "Insert | Link" from the menu, click the folder icon for the "Target" field, select the file, and click "Open".
Unfortunately, in spite of the "Make URL relative to page location" check box having a tick, the Target field will contain an absolute URL beginning with "file:///" (or at least it does in BlueGriffon versions up to 3.0.1). To work around this bug, click the check box to remove the tick, then click it again to put the tick back. This should fix the Target field.
Click the "OK" button.
Repeat the process for all the other links in your navigation menu.
Then go through all the links on your page that contain relative URLs and repeat the same process to update them. Don't forget that your logo is also a link.
Make your other modifications to the page (eg, change the title field and content) and save the file with "File | Save" when you are done.
If you plan to create other pages in this same subdirectory in the future, I recommend that you use this newly modified page as the basis for those files. This way, you don't have to go through the hassle of updating all the relative URLs again.
If you want to change the design of your site, you will have to go through all the pages on your site to manually update them. Unfortunately, BlueGriffon (at least up to version 3.0.1) does not have built-in facilities to automatically update all your pages the way the free Expression Web editor can with its Dynamic Web Templates, or the commercial Dreamweaver editor can with its DWT files.
Now that your website is nearly complete, you will probably be eager to test out the links that you could not before using a browser.
However, since your site is still on your own computer, and not the Internet, you will only be able to test the links that point to other pages on your site if you have used relative URLs. If you have used absolute URLs, clicking those links will cause the browser to connect to the Internet in search of that page, which it will not be able to find, since you have not transferred your site to your web host yet. (If you don't know why the situation is different with relative URLs, go back to chapter 5 and re-read the explanation of how a browser constructs a full URL from a relative one.)
As such, instead of my customary section on testing, you should proceed to the next chapter where you will transfer your website to the Internet. Don't worry. I know that you have not yet created your feedback (or contact) form yet. The reason for doing things in this order will be explained in that chapter.
Copyright © 2017-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create Multiple Pages for Your Website with BlueGriffon 2 and 3
