This manual was of course entirely written using BlueGriffon itself. Please note it is not a HTML5 or CSS2/CSS3 tutorial but a User’s Manual. This manual is not. Warning, this is the User’s Manual for BlueGriffon, not a HTML, CSS or EPUB tutorial. The most complex CSS features of BlueGriffon will be explained in the. BlueGriffon is an Open Source Web editing application that allows All the examples in this tutorial are based on running BlueGriffon under the Linux operating.

Author: Mashicage Nikogami
Country: Costa Rica
Language: English (Spanish)
Genre: Politics
Published (Last): 22 January 2006
Pages: 277
PDF File Size: 6.94 Mb
ePub File Size: 10.36 Mb
ISBN: 115-4-69368-718-5
Downloads: 64169
Price: Free* [*Free Regsitration Required]
Uploader: Kagajind

BlueGriffon is a free and open source web editor that anyone can use to design a website. This tutorial takes you through all the necessary steps to design and publish a fully-functional, multi-page website using BlueGriffon. Your site will be mobile-friendly, which means that not only will it work fine on a desktop and laptop computer screen, but it will tutoriall adjust to the small screens found on mobile phones, tablets and other 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.

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

Bobby’s Web Docs & Tutorial Videos

Before you can even design a website, you will bluegrifgon to get a domain name and sign up for a web host. A domain name is just the name of your site. A web host is a company which owns computers that are permanently connected to the Internet. These computers, called web servers, are where you will place bluegrifofn website, so that others in the world can visit it.

The computers run a special type of software also, confusingly, called tutoorial web server to facilitate this. More details on this matter can be found in my tutorisl How to Create a Website. Please read it before you continue with this BlueGriffon tutorial, otherwise, you will be stuck at chapter 8 when you have to publish the site.

And if you’re thinking to yourself that you’ll get your domain name after you design the site, remember that you will need to know what your domain is when you write your content and design your logo. It won’t do to assume that the domain you want will still be available when you finally get around to buying it. Chances are that it won’t, and turorial have to redo a lot of your work in these chapters.

Don’t put the cart before the horse. As the bare minimum, you should buy your domain name first so that you can incorporate it into your design. If you have been referred to this tutorial by your lecturer or teacher, you may not need to get a domain name or a web host. Some schools and universities set up a special web server for use by their students for their website-making assignments. If so, just skip to the next step. If you’re absolutely broke, you can also set up a website without paying for a domain name or a web host.

Yes, as you probably have surmised from the previous paragraphs, those ttutorial things cost money. However, you should only do bluegriffob if you really cannot afford to get, at minimum, a domain name, because you will lose out in a major way sooner or later.

The High Price of “Free”. Essentially, it involves hosting your website on a free web host see the pages for “free web hosts” on thefreecountry. But make sure you read the above-mentioned article on the consequences before doing this, so that you know what you’re getting into. Obviously if you have no money, you’ve got no choice.

But don’t walk into it blindfolded. Go to the BlueGriffon website and download bluegriffoon install the editor for your system. For Windows users, click the Windows icon to tutoriql the installer.

If you click the text link that says “zip file available here”, 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 and create shortcut links in your start menu and desktop, click the icon tutorisl the installer version instead. You will get a setup program that does everything for you.

Note that this tutorial was written for the version 2 and 3 series of BlueGriffon. You will need at least version 2. People using the old version 1. The user interface of the 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.

For example, if I were to say to click “File Save” on the menu, it means 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’t succeed if you try, since the “Save” is disabled at this time, given that there’s nothing to save at present.

In the dialog box tuorial appears, tuforial the Documents tab. The tabs are located at the top of the dialog box.

Since HTML comments are not displayed by a web browser, 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 from what it would in a real web browser. Various elements on your page may also end up being aligned differently in the editor.

The first page that you will create bouegriffon your site is its home page.

This is the main page of the site, the one that visitors see when they simply type your domain name without any additional filename. For example, if you type “thesitewizard. 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 bluegiffon 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’re selling goods and services on your siteyou should probably mention your bluegrifdon important products or even all your products if you only sell a few things on that page.

You should also link to the other pages on your website where visitors can find out more about those products and place an order. The same principle also applies if you’re creating some other sort of website, such as a personal or hobby site. While you may not have products to sell in such a case, you should nonetheless give your users an idea of what they can find or do on your site, and link to the interior pages where they can do what you want them to do.

BlueGriffon Tutorial: How to Create a Website with BlueGriffon 1.x ()

Otherwise, visitors reaching your main page will be at a loss as to how to proceed from there. 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. The left column holds a site search engine and a menu of links to the major sections of the site, blueggriffon the right column contains the article proper.

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


BlueGriffon Tutorials ()

While BlueGriffon can generate such a layout using the “New wizard” option of the “File” menu, the page ttuorial in the versions I tried BlueGriffon 2. That is, it will not adjust to a mobile phone’s screen, forcing your visitors to have to zoom in to read the different parts of your web page. Since this is not really desirable in this era, where an bluegruffon number of people use smartphones to surf the Internet, we will instead tutoriao the Two Column Layout Wizard to produce the page we need.

The page it generates is mobile-friendly using a method commonly referred to as responsive web designwhich is just a jargon-laden way of saying that your web page will automatically adjust itself to fit the different screen sizes of say mobile phones, tablets, desktop and laptop computers. Create a folder on your computer so that you can store all your website files later.

If you use Windows, and don’t know where to put the folder, just create one on your Desktop. The exact method to create a folder differs from system to system. Windows users can just click the right mouse button while the pointer is hovering over a blank spot on the desktop and select “New Folder” from the menu that appears.

You can name that folder anything you like. For example, if your site’s domain is called “example. Using your web browser, go to the Layout 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.

Scroll down to “Step 1 of 2”, and click the button for “Side column on the left, main content on the right, a header on top, and a footer at the bottom” in the “Choose a Layout” section.

If you have trouble finding it, it’s the bottom-left entry in that section see picture below. Nothing, of course, prevents you from choosing whichever layout you like. However, for the purpose 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 the chapters that follow. For complete novices, you may want to just choose what I suggested for now, since it will be less confusing for you. You can always go back and redo things when you are more familiar with BlueGriffon and website designing. 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.

In reality, this step is probably unnecessary. However, if you happen to create some pages directly 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 from this emotional comfort of using the same version of HTML across all your pages, there is probably little other practical benefit.

Note, though, that this tutorial assumes that you have done this step. 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. The Results page will appear. Do not close the browser window containing the results.


We’re not done with it yet. 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”.