How to Design a Website with BlueGriffon (thesitewizard.com) (2024)

by Christopher Heng, thesitewizard.com

BlueGriffon is a free (and open source) web editor that anyone can use to design a website. It is a visual web editor,or, in computer-jargon, a WYSIWYG (short for "What You See Is What You Get") editor, where you can see a closeapproximation of what your website looks like in the web editor even as you design it.

Goal of This Tutorial Series

This tutorial takes you through all the necessary steps to design and publish a fully-functional, multi-pagewebsite using BlueGriffon. Your site will be mobile-friendly, which means that not only will it work fine on adesktop and laptop computer screen, but it will also adjust to the small screens found on mobile phones, tablets andother handheld devices. It will have a home page, a Site Map, an (optional) About page, a working Contact Form,and any other pages you like.

Goal of This Chapter

By the end of this chapter, you will have created a mobile-friendly 2 column home page for your website.

Preliminary Steps

1. Get a Domain Name and a Web Hosting Account

   Before you can even design a website, you will need toget a domain name and sign upfor a web host. A domain name isjust the name of your site. For example, "thesitewizard.com" is the domain name of this website. A web hostis a company which owns computers that are permanently connected to the Internet. These computers, called web servers,are where you will place your website, so that others in the world can visit it. The computers run a special type ofsoftware (also, confusingly, called a web server) to facilitate this.

   More details on this matter can be found in my article Howto Create a Website. Please read it before you continue with this BlueGriffon tutorial, otherwise, youwill be stuck at chapter 8 when you have to publish the site. And if you are thinking to yourself that you will get yourdomain name after you design the site, remember that you will need to know what your domain is when you write yourcontent and design your logo. It won't do to assume that the domain you want will still be available when you finallyget around to buying it. Chances are that it won't, and you will have to redo a lotof your work in these chapters. Don't put the cart before the horse. As the bare minimum, you shouldbuy your domain name first sothat you can incorporate it into your design.

   For students: If you have been referred to this tutorial by your lecturer or teacher, you may not need toget a domain name or a web host. Some schools and universities set up a special web server for use by their students fortheir website-making assignments. If so, just skip to the next step.

   For the penniless: If you are absolutely broke, you can alsoset up a website without paying for a domain name or a web host. (Yes, as you probably have surmised from the previousparagraphs, those 2 things cost money.) However, you should only do this if you really cannot afford to get, at minimum,a domain name, because you will lose out in a major way sooner or later. If you are in this boat, pleaseread my article "Is itPossible to Create a Website Without Buying a Domain Name? The High Price of "Free"." for more details. Essentially,it involves hosting your website on a free web host (see thefreecountry.com'slist of free web hosts)and accepting whatever web address they give you for your site. But make sure you read the above-mentioned article on theconsequences beforedoing this, so that you know what you are getting into. Obviously if you have no money, you have got no choice. But don'twalk into it blindfolded.

2. Download and Install BlueGriffon

   Go to the BlueGriffon website and download and install the editor foryour system. There are versions for Windows, Mac OS X and Linux, so be sure to get the right one.

   For Windows users, click the Windows icon (or the words that say "Windows 7, 8, 10") to get the installer.If you click the link that says "zip file", you will end up with an archive file which you have to install by hand.If you don't know how to manually extract files from an archive, copy them into a new directory somewhere andcreate shortcut links in your start menu and desktop, click the icon for the installer version instead.You will get a setup program that does everything for you.

   Update: BlueGriffon is no longer available from the developer. You can, however, getthe final version (3.1) from the Internet Archive (which is a sort of museum that preserves historicalcopies of websites that give it permission to). Go to the archive'sthe 27 December 2023 copyof the BlueGriffon site, scroll down to the section "Download BlueGriffon 3.1" (you will have to scroll downquite a fair bit to get there), and download the version appropriate for your system.

Configuring BlueGriffon

Before we go any further, do the following.

1. Click "Tools | Preferences" from the menu. By this, I mean to click "Tools" on the menu bar, followed by"Preferences" in the drop down submenu that appears.

   Important: in the interest of brevity, I shall continue to use this convention to describeclicking menu items. For example, if I were to say to click "File | Save" on the menu, itmeans to click the word "File" on the menu bar, followed by the word "Save" on the drop down menu that appears.Note that I'm just using "File | Save" as an example here; you don't actually have to click it (and you won'tsucceed if you try, since the "Save" is disabled at this time, given that there's nothing to save at present).

2. In the dialog box that appears, click the Documents tab. (The tabs are located at the top of the dialog box.)

3. Click the checkbox for "Show HTML comments" to remove the tick. Since HTML comments are not displayed by a webbrowser, removing the tick will cause BlueGriffon to display your page as a browser does. If you leave it there,you may get confused later when designing your page since such comments will cause the page to look different fromwhat it would in a real web browser. Various elements on your page may also end up being aligned differently in theeditor.

   

4. Click the "Close" button.

Introduction to the Home Page

The first page that you will create for your site is its home page. This is the main page of the site, theone that visitors see when they simply type your domain name without any additional filename. For example,if you type "thesitewizard.com" into your web browser's address bar now, you will arrive at my home page.

In terms of function, the home page of a website is analogous to both the cover of a magazine and its"Contents" page. Like the cover, it should give your visitors an idea of what your website is all about.And like the "Contents" page, it should provide links to the important pages or sections of your site.It is the means by which you help your users get to the parts of your website where they want to go.

What this means in practice is that if you are running an online shop (ie, you are selling goods andservices on your site), you should probably mention your most important products (or even all yourproducts if you only sell a few things) on that page. You should also link to the other pages onyour website where visitors can find out more about those products and place an order.

The same principle also applies if you are creating some other sort of website, such as a personalor hobby site. While you may not have products to sell in such a case, you should nonetheless giveyour users an idea of what they can find or do on your site, and link to the interior pages where theycan do what you want them to do. Otherwise, visitors reaching your main page will be at a loss as tohow to proceed from there.

The Two Column Layout

For the purpose of this tutorial, your home page (and the rest of your site) will have a two column layout.You can see an example of this on all the article pages of thesitewizard.com, such as this very page itself.The left column holds a sitesearch engine and a menu of links to the major sections of the site, while the right column contains thearticle proper.

Such a layout is used by many webmasters because it is both space-efficient and familiar to visitors. It allowsyou to place less essential (but useful) information in the side column while concentrating your primary content inthe main column. The familiarity of the format to your visitors means that it is automatically user-friendly sincethey know how to find their way around the page.

While BlueGriffon can generate such a layout using the "New wizard" option of the "File" menu, thepage generated in the versions I tried (BlueGriffon 2.3.1 and 3.0.1) is not mobile-friendly. That is, it will notadjust to a mobile phone's screen, forcing your visitors to have to zoom in to read the different parts of yourweb page. Since this is not really desirable in this era, where an increasing number of peopleuse smartphones to surf the Internet, we will instead use theLayout Wizardto produce the page we need.

Don't worry. It's free too. The page it generates is mobile-friendly using a method commonly referred to asresponsiveweb design, which is just a jargon-laden way of saying that your web page will automatically adjust itselfto fit the different screen sizes of (say) mobile phones, tablets, desktop and laptop computers.

Creating a Blank 2 Column Web Page

1. Create a folder on your computer so that you can store all your website files later. If you use Windows, anddon't know where to put the folder, just create one on your Desktop. The exact method to create a folder differsfrom system to system. Windows users can just click the right mouse button while the pointer is hovering overa blank spot on the desktop and select "New | Folder" from the menu that appears. You can name that folderanything you like. For example, if your site's domain is called "example.com", name the folder "example.com".

2. Using your web browser, go to theLayout Wizard.(Click the link in the previous sentence to go there.)Do not close BlueGriffon. Just leave it running while you go to the Wizard in your browser.

   You will see something similar to the picture below.

   

3. Scroll down to "Step 1 of 2", and click on the button for "Two columns with the side column on the left,a header on top, and a footer at the bottom" in the "Choose a Layout" section (see picture below).

   

   (Nothing, of course, prevents you from choosing whichever layout you like. However, for thepurpose of this tutorial, I will assume that you have selected the one I mentioned above.If you choose a different one, you will have to adapt my instructions to your site in thechapters that follow. For complete novices, you may want to just choose what I suggestedfor now, since it will be less confusing for you. You can always go back and redo things whenyou are more familiar with BlueGriffon and website designing.)

4. Click the "Go to Step 2" button.

5. The wizard will show its "Step 2 of 2" page. Most of the items here can be left at their default values,since you can change things you don't like later in BlueGriffon itself. However, to alignthe choices here with that created by BlueGriffon's default choices, click the down arrow besidethe "HTML version to use" box and select "HTML 5".

   In reality, this step is probably unnecessary. However, if you happen to create some pagesdirectly with BlueGriffon in the future and mix it with the pages using the Wizard's layout,all your pages will use the same version of HTML, which is nice for consistency. (Apart fromthis emotional comfort of using the same version of HTML across all your pages, there isprobably little other practical benefit.) Note, though, that this tutorial assumes that youhave done this step.

6. Scroll to the section "Terms of Use: Licence Agreement (Required)". Read the condition(s) there,and if you agree, click the checkbox to indicate it.

7. Click "Generate code".

8. The Results page will appear. Switch to BlueGriffon. Do not close the browser window containingthe results. We are not done with it yet.

9. In BlueGriffon, click "File | New" from the menu.

10. A blank page will appear. You should see a series of buttons at the bottom of the blank page saying"Dual View", "Wysiwyg", "Source" and "Print Preview". Click the "Source" button.

11. The editor will now show you the underlyingHTMLcode for that blank page. Yes, it was not actually blank after all.

    Click somewhere on the page to put the text cursor there. (It doesn't really matter where. Put it at thefirst character of the first line if you can't decide.)

12. Select everything on that page by typing "Ctrl+A" on your keyboard. By this, I mean that you shouldhold down the "Ctrl" key on your keyboard, and while that key is still held down, type "a". If youdo it correctly, you will find that everything on the page is highlighted. Now hit the delete keyon your keyboard.

    (If you use a Mac, you may have to use "Cmd+A" instead of "Ctrl+A" to select everything.And if you don't have a Delete key, use the backspace key.)

13. Everything should be erased and the portion of the screen that used to show the HTML codeshould now be completely blank.

    Switch back to the browser window (or tab) showing the Layout Wizard's Results page.

14. Click somewhere in the box under the "HTML Code" section of the Wizard. The code should automatically be highlighted.Right click the section (that is, click your right mouse button while the mouse pointer is hoveringover the highlighted text). A menu should appear. Click the "Copy" line in that menu.

15. Switch back to BlueGriffon.

    Click to put the text cursor onto the blank page. (The text cursor may already be there, but do it anyway, just incase.) Then type "Ctrl+V" on your keyboard. Again, this means to hold down your "Ctrl" key and type "v". (Mac usersshould probably use "Cmd+V" instead.)

    The HTML code that you copied from the box in the Wizard should now be pasted into the blank space.

16. Click the "Wysiwyg" button at the bottom of the document. You will see your web page. It is howevera one column page instead of the expected two columns. That is because we have not completed copyingand saving all the required code from the Wizard.

17. Click "File | Save As..." from the menu.

18. Navigate to the folder you created earlier for your website files.

19. Type "index.html" (without the quotation marks) into the "File name" field of the "Save Page As" dialog box,replacing the default name given there. Make sure you type it as I said, without capital letters or spaces.That is, it's "index.html" and not "Index.html" or "INDEX.HTML" or anything else.

    Then click the "Save" button.

20. Click "File | Close current tab" to close the file.

21. Now click "File | New". A new blank page will appear.

22. Once again, click the "Source" button.

23. Click somewhere on the page to put the text cursor there. (As before, it doesn't matter where on the pageyou put it. Put it on the last character of the first line if you can't decide.)

24. Select everything with "Ctrl+A" (or "Cmd+A" on the Mac) and delete it by hitting the delete key on yourkeyboard. You should now see a blank document.

25. Switch back to the Wizard in your browser. Scroll down the page and click somewhere in the box in the "CSS Code"section. The code should be automatically highlighted.

26. Right click the highlighted text, and select "Copy" from the menu that appears.

27. Switch to BlueGriffon and type "Ctrl+V" (or "Cmd+V" on the Mac) on the keyboard like you did before. The codeyou copied should appear in what was previously a blank area.

28. Click "File | Save As..." from the menu.

29. A dialog box with the title "Save Page As" will appear. Navigate to the folder you created earlier for your websitefiles, if you are not already there. Type "styles.css" (without the quotation marks) into the "File name" field.Make sure you type it exactly as I stated, with no spaces or capital (uppercase) letters. And remember, it's"styles.css" (with a plural) not "style.css".

30. In the "Save as type" field, select "All files (*.*)".

31. Click "Save" at the bottom of the dialog box.

32. Click "File | Close current tab" from the menu.

33. If you like, you can close the Layout Wizard tab in your browser. You won't need it any more.

34. Click "File | Open File" from the menu.

35. A dialog box with the title "Choose a file" will appear. Navigate to your website's folder if you are notalready there, and click the "index.html" file once to select it. Then click the "Open" button.

    The web page should appear in BlueGriffon.

Layout of the Page

Before you do anything else, let me explain some of the common terms that webmasters use to referto the different sections of your web page. This will make it easier for you to understand me when Irefer to those things throughout this tutorial series.

At the top of your page, you should see the words "Placeholder content for your header section [etc]".This section, which spans both the left and right columns, is sometimes referred to as the headersection or the masthead. In chapter 2, you will be placing your website's logo here.

Below that are the two columns of your site. The left column is narrower, and functions as the"side column". It is also variously referred to as the "side bar" or "navigation column".You will be placing your navigation menu (like the buttons you see at the side of thesitewizard.com)here in a later chapter.

The right column is where your main content will be placed. It is sometimes referred to as the contentor main column. You will be working on this portion of the page in this chapter itself.

At the bottom of the page is another section that spans both columns. This is the footer of the page.Webmasters typically place their copyright notice here. Websites that don't put a navigation menu inthe side column also sometimes put a list of links here that function as a navigation menu.You will also be working on the footer in this chapter.

Note that although the page looks similar (but not identical) to how it will appear in a web browser, with the links underlinedin blue, remember that BlueGriffon is not actually a browser but a web editor. As such,even if you are curious about the things mentioned in the placeholder text, clickingthe links in the editor will not take you to the destinations of those links. You will only be placing yourtext cursor at those locations. Try it now to see what I mean. (That is, click one of the links.)

Changing the Title of Your Page

The first thing you should do with any new web page is to set the title.

1. Click "Format | Page Properties" from the menu.

2. A dialog box with the title "Document properties" will appear.

3. Enter the title of your page into the "Title" field, replacing "Insert web page title here". Since this isyour home page, the title should be the name of your website (or its domain name). If you wish, you can alsoappend a brief phrase describing the purpose of your site.

4. Click the "OK" button.

Note that this "title" is not actually displayed in the user-visible portion of your web page. Itis, nonetheless, very important that you set it, since it is used by the search engines to listyour page in their results. If you don't change it, Google and Bing will list your site as"Insert web page title here". The title is also displayed in the web browser's title bar or tab(depending on which browser you use and how you configure it).

Writing the Content for Your Home Page

The technical aspect of writing your content is actually easy. In this respect, BlueGriffon works a lot like Microsoft Wordand other word processing software.Whatever you type will appear at the location where your text cursor is, and the Backspace and Delete keys onyour keyboard do the expected thing of removing text. You can move the cursor around with the arrow keyson your keyboard, and the PgUp and PgDn keys (and the scroll bar on the right) scrolls the page.

The more demanding task is actually figuring out what to say on your page. I suggest that youstart by replacing the word "Welcome" at the top of the page, which at presentfunctions as a sort of heading for the entire page. Change it to the name of your site.For example, if your website is called "Example Co", replace "Welcome" with "Example Co".As implied by the first paragraph of this section, you can replace the word by clicking your mouse pointersomewhere within the word "Welcome", using your arrow key to move the text cursor to the end of the word,and then hitting the Backspace key to delete the letters one by one. Then type in your new heading.

This will be the first appearance of the name of your website in the user-visible portion of your web page.Remember that the Title field that you set earlier only appears in the browser's title bar or tab, soif you don't put the name of your site somewhere on your home page, your website will appear to haveno name to your human visitors.

In addition, if you plan to have your site name appear in your logo (which you will create and insert intothe header section in the next chapter), it's possible to get away with not repeating it here. In this case,either replace "Welcome" with some other word (or words), or just get rid of it.

Once you have settled this user-visible title, move on to replace the text in the rest of the right column.Review what I said earlier about some ofthethings that should go into a home page if you are not sure how to proceed. Those who are completely stuckcan take a look at my example for a fictitious company in the box below. You won't be able to use the words verbatim,since your company is unlikely to be selling the same goods, but it can serve as a framework to get youstarted on the sort of things you may want on your own page (eg a list of your products).

Don't worry about changing fonts, putting words in bold or italics, changing the text size, or adding picturesfor now. These will be dealt with in later chapters. For now, just work on your content. If you are experiencingwriter's block, it may be because you are subconsciously trying to come up with the perfect set of words. One possiblesolution is to just dump your words unceremoniously onto the page, even if they sound utterly mundane. You can alwayspolish it later. In fact, many people find it easier to start with a rough copy and modify it over time than to stareat a blank page, hoping for inspiration so that they can wax lyrical about their products.

Leave everything in the left column alone. You will come back to it in a later chapter when you haveacquired the additional knowledge you need to change it correctly.

How to Make a Sub-Heading in BlueGriffon

If you want a sub-heading for some of the sections on your page, like the "Featured Products" in my exampletext above, you will need to do the following.

1. Type your sub-heading on a line of its own. Use the ENTER key (or RETURN key on the Mac) on your keyboardto make a new paragraph, and type the words that will become the sub-header on that new line. You may need tohit the ENTER key again after typing the header so that the line stands on its own and is not joinedto the next paragraph.) Then select the line that you just typed. In computer jargon, selecting a linemeans to highlight it. You can do this by dragging your mouse pointer over the words on that line.

2. With the highlighted text still on the page, click the drop down box on the toolbar that currently has the word"Paragraph" in it. It should near the top of the BlueGriffon window (below the menu bar and the line of toolbar icons).See the picture below if you can't find it.

   

3. From the list that appears, select "Heading 2".

Your sub-heading will now look bigger and use a bold font.

For those wondering, "Heading 1" is meant to be used for the title of your entire page, while "Heading 2" isfor the sub-headers. If you have sub-sections within your main sections, you can use "Heading 3" for thosesub-sections. As you may have guessed, if you have sub-sections to those sub-sections, you can use "Heading 4"for those. And so on, until "Heading 6".

Do not use these headings as a way to put your text in bold. Use them only to mark headings. You will learn howto put text in bold and italics, as well as change text size and fonts in chapter 3.

Changing the Footer

Click somewhere in the footer among the words "Placeholder content for the footer [etc]" to place yourtext cursor there. Delete the dummy text and type instead whatever you want.

As mentioned earlier, many webmasters use this space to put their copyright and other notices. I alsoput the date I wrote (or updated) the page here. But you are under no obligation to follow this. Writewhatever you like.

If you are wondering about how you can copyright something, see my articleCopyright IssuesRelevant to Webmasters.

To insert the copyright character, "©", click "Insert | Characters and symbols" from the menu. In the dialog boxthat appears, click "Latin-1 Supplement" in the upper half. Locate and click the "©" symbol in the bottom half.Then click the "Insert" button. To get rid of the dialog box, click the "X" at the top. (There doesn't seem to be a"Close" button on that box in the version of BlueGriffon that I used.)

Save Your Work

Now save your page. You can do this by clicking "File | Save" from the menu. In fact,you should make it a habit of saving your work frequently as you design your page, so that anunexpected power failure or software crash will not cause you to lose everything you have done so far.

Testing the Page in a Browser

Even though you have not actually finished designing the home page, nor have you published it onto theInternet, you can and should take a look at your progress so far in a real web browser. Yes, browserscan also view web pages saved on your computer.

Start your browser, and open the "index.html" file that you have been working on. The exact procedure differsfrom browser to browser. On Windows, if you use Firefox, just type "Ctrl+O" (that is,hold down the "Ctrl" key and type the letter "o" on the keyboard). For Internet Explorer, type "Ctrl+O" andclick the "Browse" button in the dialog box that appears. You can then navigate to the folder whereyou saved your files earlier, and select "index.html".

Don't be disappointed that your page looks plain. That is to be expected. After all, you have only juststarted, and this chapter's focus was on getting a basic two column layout and putting your contentonto the home page. You will get a chance to polish its appearance from the next chapter onwards.

In the meantime, take the opportunity to proofread your page: it's sometimes easier to spot mistakeson a page displayed in a web browser than in an editor.

If you are curious as to how your site looks on a smartphone, resize the horizontal width of thebrowser window. Once it drops below 630 pixels (horizontally), your page will appear in a single column.

If you use Firefox, you will need to go to "Tools | Web Developer | Responsive Design Mode" (using its menu) since thatbrowser will not otherwise allow you to resize the window to mobile phone sizes. Click the "Responsive" fieldon the top left (just above your page and below the browser's address bar) and choose one of the options fromthe drop down menu that appears. For example, select "iPhone 6/7/8" to see your page as it will be displayedon those versions of iPhone. If you don't see the brand of phone you want to test with, manuallyset the resolution of that phone in the numeric fields on that same line.To return to the normal desktop web browsing mode, click "Tools | Web Developer | Responsive Design Mode" again.

Next Chapter

In the next chapter, you willadd picturesand a site logo to your web page.

Copyright © 2017-2024 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/.

Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS 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.

• Should I Use a Temporary Domain Name Till My Preferred Domain Becomes Available?
• Does the Price of a Domain Depend on the Name Chosen? Why do Some Domains Cost So Much?
• Should You Get a Domain Name with Spaces or Dots In Between to Improve Readability?
• Should You Choose a Linux or a Windows Web Hosting Package? Is There Such a Thing as a Mac Web Host?
• The Real Meaning of "Unlimited Bandwidth" and "Unlimited Disk Space" in Web Hosting
• Does Using a Web Host Mean that My Files Belong to Them?
• Should I Learn HTML or Just Use a WYSIWYG Web Editor? Pros and Cons of Using a Visual Web Editor vs Learning HTML
• What is MySQL? What is a Database? What is SQL?

• How to Set the Height of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some Other Audio Clip) from a List on a Website
• How to Draw a Horizontal Line on a Web Page with Expression Web
• How to Create a Website Free of Charge
• Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
• What's the Difference Between a Domain Name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS
• What's the Difference Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?

• How to Create a Blog
• How to Make / Create a Website: The Beginner's A-Z Guide
• Tips on Choosing a Good Domain Name
• Expression Web Tutorial: How to Design a Website with Microsoft Expression Web
• Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6
• BlueGriffon Tutorial: How to Design a Website with BlueGriffon 3
• How to Design and Publish Your Website with KompoZer (free WYSIWYG web editor)
• Free Feedback/Contact Form Wizard

It will appear on your page as:

BlueGriffon Tutorial: How to Design a Website with BlueGriffon