By this chapter of the BlueGriffon 1.72 tutorial series, you will have completed the design of your home page. You can now create the rest of your website.
For those who have arrived here from outside thesitewizard.com, you will need the knowledge and skills taught in the earlier chapters for this article to make any sense, since it relies completely on the work done previously. If you're new to website-making, you will have a considerably easier time if you start at the beginning, with the article How to Make / Create a Website.
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 your new pages from scratch, and going through the laborious task of duplicating the work done in chapters 1 to 6, it's more efficient to simply make a copy of your home page and modify it.
That is to say, if you are creating, say, 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's one way to do it:
Start up BlueGriffon and open your home page (your "index.html" file).
Click "File | Save As..." from the menu. That is, click "File" from the menu bar, followed by "Save As..." in the menu that drops down.
In the "Save Page As" dialog box that appears, type in your new filename. For example, if your new page is to be your Site Map, type "sitemap.html" (without the quotes).
For some reason, in the version of BlueGriffon that I have (version 1.7.2), the web editor doesn't seem to update the tab above your page with the new filename although it does update the title bar of the program. That is, the tab still shows "index.html" while the title bar "sitemap.html" (or whatever your new filename is).
To avoid confusion and mishaps, leading you to accidentally modify the wrong file, close the file by clicking "File | Close current tab" from the menu. This will leave you with a blank BlueGriffon window.
Now click "File | Open File" from the menu, and select the new file that you created (eg, "sitemap.html").
The same file you saw just now should reappear, this time with both the title bar and tab showing the correct filename.
For those who aren't sure what I mean when I say "tab" or "title bar", and cannot verify that the version of BlueGriffon you're using still has the bug, just follow the above procedure. It will do no harm even if the bug is fixed. You're just closing and reopening the same file.
At this point, you have a new file called "sitemap.html" (or whatever you called it) with the same content as your home page.
Before you go berserk creating new pages for your website, please read my article on How to Create Good Filenames for Your Web Pages. 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.
For those who are not sure what a Site Map does, please see thesitewizard.com's Site Map, or one with an even simpler layout, HowToHaven's Site Map. In both cases, the site map simply lists all the pages present on the website.
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 your site map will be so arduous that you will give up. And, unfortunately, that is the time your website 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 friendliness. As a webmaster, you will intimately know how your site is organised ("organized" in US English), since you are the one who created it. But not everyone sorts information the way you do. So, for example, while you may think that the obvious way to get to your "Order Form" is by going to the overall "Products" page, followed by clicking the link to the individual product description page, and finally clicking the "Order" button there, some people may expect that they can go straight to the Order Form from somewhere else on your site. By providing a Site Map, such people can still find your order page even if they don't think in the same sequence as you.
(Note: this is just an example, perhaps not a very good one. Don't get stuck on it. I'm just saying that not everybody thinks the same way as you. Since you can't anticipate how everyone thinks, and it's probably impossible to design a site that suits everyone's way of organising information, giving them a Site Map will at least help them 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.
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. It contains some of the information you typed into BlueGriffon when you first created your home page in chapter 1.
Change the field labelled "Title" so that it says either "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.
The tab for your page (along with the title bar to the BlueGriffon window) should change to begin with "Site Map".
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 says "Site Map".
Now delete the existing content, and replace it with a list of links, one on each line. Return to chapter 5 if you have forgotten how to do that.
If you don't want BlueGriffon putting each link in a new paragraph, creating a lot of unnecessary white space on your page, you will have to do it the following way.
Create your first link on its own line, say, "Home" (which links to "index.html"). Then put your cursor so that it is at the end of the line that says "Home", and immediately type the words for your second link, say, "About Us". Now your line will look something like the following:
Move your text cursor so that it is just after "Home" and before "About Us". Click "Insert | HTML 5 Element | br" from the menu. You will find that the "About Us" is moved to the next line without an intervening blank line to demarcate a new paragraph.
You can now make "About Us" into a link, and repeat the process for your next link (eg, "Products", "Order", "Contact Form", etc).
Such a strange way of doing things is necessary under the version of BlueGriffon that I have (1.7.2) since if you were to create the "Home" line and immediately use "Insert | HTML 5 Element | br", then type your "About Us" line, BlueGriffon will forget that you have inserted a new line and put your "About Us" immediately following your "Home". It's possible that this will be fixed in a future version, but until that is the case, you will have to do it this way to get it to work.
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 all other sites do.
If you are selling goods or services, you may want to create an "About Us" page telling people a bit about your company. (Treat it as an opportunity to promote 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, "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 psychos 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 the next chapter.
Some of you may be considering putting your additional pages into subdirectories (ie "folders" in layman's lingo). If so, you will need to do additional work to fix up all the references to files in your main directory (where your home page is) as well as the "images" directory. This involves not just the links to the images (like your site logo and other pictures) but also the link to the CSS file for your navigation menu.
To do this, you will need to understand how to refer to files in a different subdirectory.
If you have a file called "index.html" in your main directory (and you do; it's your home page), and you want to link to a file called "widgetx.html" in a subdirectory called "products", you can either use an absolute URL of "http://www.example.com/products/widgetx.html" or a relative URL of "products/widgetx.html". (See Absolute and Relative URLs in chapter 5, if you have forgotten what these terms mean.) Likewise, all references to your pictures in your "images" folder, are of the form of "http://www.example.com/images/logo.png" or "images/logo.png" for the absolute and relative versions respectively.
But what happens if your file is the aforesaid "widgetx.html", and you want to refer to a file in your main directory? For example, how do you create a link to your Site Map located in your main directory? The absolute URL form is easy, of course. It's just "http://www.example.com/sitemap.html". But what about the relative URL version?
The directory above your current directory is always called ".." (without the quotes), that is, two full stops (periods) without any spaces in-between. So to refer to your Site Map from a file in your "products" subdirectory, you can use a relative URL of "../sitemap.html".
This makes it easy for you to refer to your images from that same file, using relative URLs. For example, from "products/widgetx.html", a reference to your logo file in the "images" directory will look something like "../images/logo.png". The ".." part means go up one directory level. The "images" part says go into the "images" folder from there. And the final "logo.png" part tells the browser that the file you're referring to is called "logo.png".
Likewise, if you created a file called "spareparts.html" in a directory called "subwidgets" located in yet another directory called "products", such that the URL to that file is "http://www.example.com/products/subwidgets/spareparts.html", then a relative link in the latter file referring to your logo will be "../../images/logo.png".
(That is, the first ".." means to go up one directory level. The second ".." means to go up yet another directory level. Then "images" tells the browser to go down into the "images" folder, before retrieving the "logo.png" file.)
Note that the character to separate directories is always the slash/oblique ("/"). This is part of the convention established for URLs, no matter what brand of computer or operating system you use. You may have heard that Windows systems use "\" (the backslash), but that is irrelevant here. In a URL, always separate directories with the slash ("/") character, even if you use Windows and even if your web host's computer uses Windows. Do not use "\" to separate directories in your web addresses; in URLs, only the "/" has the special meaning of separating directory names.
With the above background information out of the way, if you were to create a new file and place it into a subdirectory, you will have to fix all relative URLs on your page manually.
Here are the things you will need to fix. There may be others, but these are the ones that are created directly by following this tutorial series.
Note: do not do this for files located in the same directory as your home page. If you are not using any subdirectories at all (other than for your pictures, as instructed in chapter 2), you can skip to the next section.
You will need to fix the line that loads the CSS file for your navigation menu. You will remember that in chapter 6, we used our own relative URL to load that file instead of the absolute URL provided by the Navigation Menu Wizard. We did it to avoid a problem with BlueGriffon that surfaces when you add buttons to the menu, but our solution means that we have to update the URL ourselves if we move either the CSS file or the page linking to it.
To do this, click the "Source" button near the bottom of the page, and scroll to the top of the page. Locate the line that you added in chapter 6. That is, look for the following line:
Notice the relative URL after the "href" that says "tswnavbar.css". If your current page is now in a subdirectory, this URL is no longer accurate, since it tells your visitors' web browser that the CSS file is in that same folder, which is not true. You will therefore need to change it from "tswnavbar.css" to "../tswnavbar.css".
Click to put your text cursor somewhere on that line. Then, using your arrow keys, move the cursor so that it is immediately before the "t" in "tswnavbar.css" (and after the quotation mark).
Type "../" (without the quotes). Your line should now look exactly like the following:
Obviously, if your current page is in a folder two levels down (instead of one), your relative URL will have to be adjusted accordingly, ie, to "../../tswnavbar.css" instead of "../tswnavbar.css".
Fixing the link to your logo and other pictures is trickier, since the line referring to them may not be that easy to find. You cannot click your picture in the "Wysiwyg" mode to fix it, since your picture will no longer be displayed in the editor. (Or, at least, it wasn't in my version of BlueGriffon.)
While still in the "Source" mode, scroll up to the top of the page (eg, using "PgUp" on your keyboard), then click "Edit | Find" from the menu. Type "<img" (without the quotes). (Yes, type the "<" symbol as well.)
The editor will scroll so that one of the lines that have "<img" appears somewhere in the window. Unfortunately, it will not be highlighted (or at least, it wasn't in the version of BlueGriffon I have), so you have to hunt for it line by line.
Once you find the line that has "<img", look for the first occurence of 'src="images' following it. For example, in my file, the line says '<img alt="Site logo" src="images/logo.png">', but that's because my logo file is named "logo.png" and the description that I entered for that image in chapter 2 was "Site logo".
Modify that line so that it says "../images/logo.png" instead of "images/logo.png".
If you have other images on your page, click the "Next" button, which you can find on the same line as the "Find" field that you typed into earlier. This will scroll the page further so as to unveil the next "<img" somewhere in the window. Look for it and fix the "src" references for those images as well, by adding "../" to the relative URLs. Repeat the procedure until you have found and adjusted the URLs for all your images.
Click the "Wysiwyg" button at the bottom of the window when you're done. If you have fixed your relative URLs correctly, your pictures should now be displayed in BlueGriffon.
If you have followed chapter 6 to the letter, your menu buttons should not have any relative URLs to fix. However, on the off-chance that you decided to use relative URLs instead of the absolute ones which I suggested, you will need to adjust those URLs as well.
This is an easy fix that you can do from the "Wysiwyg" mode. (That is, do not switch to the "Source" mode.)
Click to put your text cursor somewhere in the button you want to change. Then click "Insert | Link" from the menu. You can change the URL in the "Target" field of the dialog box that appears.
If you have created any clickable links on your pages with relative URLs, whether it is for pictures or text, you will also need to update them. Again, this can be done from the "Wysiwyg" mode. Click to put your text cursor somewhere in the link, and bring up the "Links" dialog box by clicking "Insert | Link" from the menu. You can then update the URL in the "Target" field.
Remember: if you have made a picture into a clickable link using relative URLs, there are two things to fix: the relative URL that loads the picture (see earlier step), and the relative URL that is in the clickable link (this step).
If you find this section hard to understand, and tedious to carry out, then one alternative is to dump all your files into the same folder as your home page. This will allow you to avoid this section altogether.
For a small site that has fewer than (say) 10 to 20 pages, putting everything into your main directory is probably a reasonable solution. However, for sites that end up having 50 pages or more, it can become irritating in the long run, in the sense that you will find it increasingly hard to find the file you want to modify, since they are all dumped together in the same location. However, this is a problem that will afflict only you (the webmaster), and not your visitors, since your visitors won't care where those files are placed. (Visitors merely follow links to go to other pages; it's the webmasters who need to open the files to edit them, and thus, it is they who are delayed when there is a huge mess of files to visually scan.)
There may also be a technical issue if you are going to put thousands of pages into the same folder. It's possible that you may hit a limit somewhere in the operating system you or your web host uses. Note: I'm not sure about this: I haven't checked it out recently for the modern systems in use today, since I don't really like to put that many files into a directory. However, if you are planning to create 1,000 pages, I suggest you learn how to use directories and fix your relative URLs.
Once you have finished creating all the pages and saved them, upload them using FileZilla.
Go to your website, and this time, test every link on every page, including those in your navigation menu as well as those in your site map.
If some pictures don't show up on your new pages, check to make sure that you have actually uploaded those pictures to the right location. You may also want to go back to BlueGriffon to check that the link to those pictures are correct.
If your navigation menu is displayed as a bullet-point list of links in your new pages, but it shows up correctly as buttons for your home page, it probably means that you forgot to adjust the link pointing to the "tswnavbar.css" file. That is, you put your new page into a subdirectory, but failed to adjust the relative URL pointing to the navigation menu CSS file.
At this point, the only link that should cause you to receive a "404 File Not Found" error is the link that goes to your Contact Form, since that is the only page you have not created yet. All the other links should lead to their proper destinations.
If you get an unexpected "404 File Not Found", check the following:
Is the link pointing to the right location? Check to make sure that all components of the URL (domain, directory and filename) matches those of your actual file.
Did you upload the file to the correct folder?
Check the spelling in your links. Careless mistakes can occur; webmasters are human after all, and URLs are notoriously difficult to check for typos, since the words tend not to have spaces between them.
If all goes well, congratulations! Your website is almost done. Not only are all the pages of your site online (minus the contact form), they are complete and fully functional.
In the next chapter, you will add a contact form to your website so that you can receive feedback from your visitors.
Copyright © 2015-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 Add Multiple Pages to Your Website with BlueGriffon
