BlueGriffonis an open source WysiwygHTML editor. There are downloads for Windows, Mac and Linux. You can edit content the same way you would in a word processor. You can then toggle views quickly to see the source and what HTML markup and the CSS styling looks like, making BlueGriffon beneficial tool for learning HTML and CSS. Note that 'fireftp-2.0.32-bluegriffon.xpi' is the name of the file at the time I write this, but it's possible that by the time you read this, there will be a new version with a different number. If so, just click the 'fireftp-whatever-number-here-bluegriffon.xpi' link that you see on the page. BlueGriffon is an intuitive application that provides Web authors (beginners or more advanced) with a simple User Interface allows creating attractive Web sites without requiring extensive.
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
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.
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.
Note that this tutorial was written for the version 3 (and version 2) series of BlueGriffon. You will need atleast version 3.0.1 (if you are using one of the version 3s) or2.3.1 (if you are using one of the version 2s) of BlueGriffon, since those were what I used to test the steps given here.People using the old version 1.72 should read theBlueGriffon1 Tutorial instead. The user interface of the 1.x series is slightly different from that of later versions.
Configuring BlueGriffon
Before we go any further, do the following.
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).
In the dialog box that appears, click the Documents tab. (The tabs are located at the top of the dialog box.)
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.
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
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'.
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.
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.)
Click the 'Go to Step 2' button.
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.
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.
Click 'Generate code'.
The Results page will appear. Switch to BlueGriffon. Do not close the browser window containingthe results. We are not done with it yet.
In BlueGriffon, click 'File | New' from the menu.
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.
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.)
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.)
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.
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.
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.
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.
Click 'File | Save As...' from the menu.
Navigate to the folder you created earlier for your website files.
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.
Click 'File | Close current tab' to close the file.
Now click 'File | New'. A new blank page will appear.
Once again, click the 'Source' button.
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.)
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.
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.
Right click the highlighted text, and select 'Copy' from the menu that appears.
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.
Click 'File | Save As...' from the menu.
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'.
In the 'Save as type' field, select 'All files (*.*)'.
Click 'Save' at the bottom of the dialog box.
Click 'File | Close current tab' from the menu.
If you like, you can close the Layout Wizard tab in your browser. You won't need it any more.
Click 'File | Open File' from the menu.
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.
Click 'Format | Page Properties' from the menu.
A dialog box with the title 'Document properties' will appear.
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.
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).
Example Co.
Example Co. is the world's leading company selling examples. If you have heard, seen or read anexample somewhere, or even just dreamt about one, we probably have it in our stock. Our selectionof examples is so extensive that we even have examples of examples. For example, this example thatyou are reading about this very moment is available in our online shop too.
Featured Products
Example Website: Get your very own example website, carefully created using thesitewizard.com'sBlueGriffon tutorial. As you know, thesitewizard.com's guide takes the new user through all thesteps needed to create a fully-functional website. Think of all you can do with your own example website!
Rejected Manuscripts: Are you a budding author, faced with the unrelenting barrage of rejection slips frompotential publishers for your magnum opus? Now you can comfort yourself by getting examples of rejected manuscriptsfrom other wannabe authors. As you know, misery loves company.
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.
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.
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.
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-2021 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 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.
It will appear on your page as:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 4 January 2021.
by Christopher Heng, thesitewizard.com
Now that you have almost completed your website, with only the feedback (or contact) form outstanding, it is timeto transfer it to the Internet. This process is known as 'uploading' (the technical term) or'publishing' (the layperson's term).
Goal of This Chapter
By the end of this chapter, you will have uploaded the completed portions of your website to your web host, andwill have tested it 'live' on the Internet.
It is possible to use this chapter even if you have not followed the earlier chapters of theBlueGriffon Tutorialto design your site, since its primary focus is the uploading process.However, if you have not even created a website yet, please start at the beginning, with the guideon how to set up a website.
Bluegriffon Mac Big Sur
Prerequisites
You will need the following.
A Web Host
I mentioned in chapter 1that you will need to get a web hostand a a domain name. If you havedelayed doing that because your site was not ready, you can put these things off no longer, since you will need it here.
The only possible exception to this is if you are a student following this tutorial as part of a course requirement.Your university or school may have allocated space on their own web server (ie, a computer on the Internet designed tohold websites). Get the details from your lecturer or teacher.
FTP or SFTP Details
The information you will need from your web host are your website's FTP server address, the directory to put yourwebsite files, and your FTP (or SFTP) login name and password. In many cases, these will probably have been sentto you (eg, via email) when you first signed up with the web host.
If you cannot find the details or the email in question, contact your web host and ask them. There's nopoint writing to me about it. Only your web host has that information.
For the curious, 'FTP' stands for 'File Transfer Protocol'. It is the means by which you will transfer a filefrom your computer to your web host's server, somewhat like theHTTP protocoldescribed in chapter 5 which browsers use to retrieve web pages. Some web hosts offer 'SFTP', which isa secure version of FTP. It encrypts everything transmitted, so that (hopefully) your password will be safe from peopleeavesdropping on your connection.
Hold on, What About My Feedback Form?
I realise that, although you have finished most of your website, you have not yet made the feedback (or contact) form.As I said before, this will only be done in chapter 9. There is a reason for this.
In my experience with newcomers, if they are to find any part of the web design process difficult at all,it is usually at two points. One of them is the initial uploading of their site, and the otheris getting the feedback form to work properly. As such, I prefer to separate the learning ofthese 2 stages so that they don't take place at the same time. This lets the new webmaster solvethe problems (if any) of each stage without the complications of the other confusing the issues.
Since getting the feedback form to work properly depends, in part, on your being able topublish the pages correctly to the right location, it seems sensible to first deal with theformer. Once you can publish your pages without problem, and view them in a web browser, youcan sort out any additional issues a feedback form poses.
Now some of you, at this point, may be concerned that visitors will arrive at your site immediatelyafter you publish it, and make a beeline for your feedback form, only to find that it doesn't exist.Don't worry. The reality is, since your website is new, and you have not yet advertised it to anyone,no one will know it exists, let alone visit it. Not even the search engines. It is not that easy toget visitors.
Installing the FireFTP Add-On into BlueGriffon
In its default state, BlueGriffon (at least up to version 3.1) does not come with any built-in way totransfer your website to the Internet.
There are multiple ways to solve this. One way is to use a separate computer program, called an FTP client,to do it. There are numerous freeFTP clients available around, and I have a tutorial onhow to upload your websiteusing FileZilla, which is one of those free software listed there.
Alternatively, you can also install an extension, called FireFTP, into BlueGriffon that performsthe same function. The guide below shows you how you can use this second method, since the extension isprovided on the BlueGriffon website and it loosely integrates into the editor (in the sense that you invokeit from a menu in BlueGriffon). However, FireFTP is arguably less user-friendly and polished than a full-fledged,standalone program like FileZilla, so if you prefer to use the latter, feel free to do so. Thehow to upload guidementioned earlier is a general guide that can be used to upload any website, whether it is created usingBlueGriffon or other software. And you won't lose out by following either the FileZilla tutorialor the one below. However, after uploading you should return to read the section below ontestingyour site.
Note that if you choose to use FileZilla to upload your site, remember to transfer the entire 'images' folder,with all its picture files, as well as all files with names ending with the '.html' and '.css'extensions. You do not need to transfer any file with a name ending with '.bak' since those are justold versions of your web pages that BlueGriffon saves whenever you modify a file. If you have created anyadditional folders for your other pages inchapter 7,be sure to upload those too (that is, the folders and the files they contain).
Don't worry. It doesn't matter which program you use to upload your site. It's just a means to get your siteonto the Internet. And this tutorial series does not depend on you using any specific method.
In any case, the steps below deal with how you can install the FireFTP extension.
Go to the BlueGriffon website. Click the 'extras' link at the top ofthe web page, and click the link to go to the page to download the FireFTP add-on. At the time I write this,this means to click the underlined 'free add-on' words. Then right-click the '
fireftp-2.0.32-bluegriffon.xpi'link. By right-click, I mean to click your right mouse button while the pointer is hovering over those words.Note that 'fireftp-2.0.32-bluegriffon.xpi' is the name of the file at the time I write this, but it'spossible that by the time you read this, there will be a new version with a different number. If so, just click the'fireftp-[whatever-number-here]-bluegriffon.xpi' link that you see on the page.
Click the 'Save Link As' (or the equivalent for your browser) in the menu that pops up. In the dialog boxthat appears, navigate to a location that you can easily remember later (eg, your desktop) and save the file. Yourbrowser will then proceed to download it and save it there.
Once this is done, you can close your browser window/tab for the BlueGriffon site. You won't need itany more.
Start up BlueGriffon.
Click 'Tools | Add-ons' from the menu. That is, click 'Tools' from the menu bar, followed by 'Add-ons' from thedrop-down menu that appears.
The Add-ons Manager window will appear. Click the line that says 'Extensions' in the left column, if it is notalready selected. (If you're not sure, just click it.)
Click the '+' button at the top of the window (next to the search field).
A dialog box with the title 'Select add-on to install' will appear. Navigate to the location where you savedthe add-on file earlier and click it once to select it. Then click the 'Open' button.
A dialog box with the title 'Software installation' will appear. Click the 'Install Now' button.
You will see the message 'FireFTP will be installed after you restart BlueGriffon' in the Add-ons Manager.Click the 'Restart now' button.
This will close your BlueGriffon window and restart the program.
The FireFTP extension will now be available from your 'Tools' menu.
Configuring FireFTP
Click 'Tools | FireFTP' from the menu.
A new window with the title 'FireFTP' will appear. The left half of the window shows you the directories (the firstcolumn of the left half) and files (the second column of the left half) on your computer. The right half should beempty now, but when you connect to your account on your web host, it will display the files present there.
Since we're going to be dealing with 2 sets of website files and directories in this chapter, one on your own computerand one on your web host's computer, we will need to have some sort of system in order to avoid confusion. The conventiontypically used in such situations is to refer to your own computer as local and your web host's computeras remote. In other words, the left half of the FireFTP window shows your local computer, while theright half shows the remote system to which you are connected.
Navigate to your local website directory in the left half. That is, by the end of this step, the second column of the lefthalf should show your website files, like 'index.html', 'sitemap.html' and the other files you created inchapter 7.Do not skip this step.
Click 'Tools | Options' from the menu bar found on the top right hand side of the FireFTP window.
The Options dialog box will appear.
Click the 'Show hidden files' checkbox to put a tick in it.
Click the 'Downloads/Uploads' tab found at the top of the dialog box.
Click the 'Automatic Mode' radio button.
Click the 'Close' button.
Now click the 'Create an account...' drop down box at the top of the FireFTP window and select 'Create an account'.
A dialog box with the title 'Account Manager' will appear.
Type your FTP server address into the 'Host' field. Your web host may refer to this variously as 'FTP server name','FTP hostname', or 'FTP address'. For instance, if your web host says to use a FTP server name of 'ftp.example.com',enter 'ftp.example.com' (without the quotation marks) into that field.
As you type, the program will automatically fill the 'Account Name' with the same words.
Enter your login name into the 'Login' field. Your web host may refer to this as your 'username'.
Enter your password into the 'Password' field.
Click the 'Connection' tab at the top of the Account Manager dialog box.
Click the 'Use Current' button for the 'Local' field. The directory for your local website files will automaticallypopulate that field. If this is not correct, it probably means that you did not navigate to your local websitefiles directory earlier.
The 'Remote' field is where your web pages are supposed to be placed on your web host's computer. This informationneeds to be provided by your web host. It cannot be guessed. Do not put some random directory here. Ask themif you don't already have the information.
For those who don't know how to locate the relevant bit of information in your web host's email, look for wherethey say your web pages (or 'HTML files') are to be placed. For example, some web hosts tell you to put thefiles in the 'www' directory. If so, type 'www' (without the quotation marks) into the 'Remote' field. Otherweb hosts say that you need to use the 'public_html' directory. If so, enter 'public_html' (again, without the quotationmarks). And so on. Remember to use the exact name they give to you. Do not change the capitalisation of the name.'WWW' is different from 'www', as is 'public_html' from 'PUBLIC_HTML'. If your web host says to publishyour files in the default directory that you see when you connect by FTP, leave the 'Remote' field blank.
If your web host tells you that you are using SFTP, click the drop-down box for 'Security' and selectthe 'SFTP' line. If you are using FTP, leave the 'Security' field at 'None'. If you have a choice of usingeither FTP or SFTP, it's probably best to use SFTP since that is more secure.
Click the 'OK' button.
Bluegriffon Para Mac
How to Upload Your Files Using FireFTP
Once you have finished setting up FireFTP, you are ready to publish your website.
Click the 'Connect' button at the top of the FireFTP window.
Click one of the file names in your local website half of FireFTP to select it. Then type Ctrl+A(or Cmd+A on the Mac) on your keyboard. (That is, hold down the Ctrl key while typing 'a'.) This selects allthe files and folders on your website.
Note that files with names ending with a '
.bak' are the old versions of your web pages. When you modify yourpage and save it, BlueGriffon saves the original version with a '.bak' extension. You do not need to uploadthese files, nor do you want to, since they probably contain the mistakes that you corrected in the current version.To unselect those files without unselecting everything else that you have already highlighted, hold down the Ctrl keywhile clicking them. (Note that this Ctrl+click instruction applies to Windows. I don't know the equivalenton a Mac.)In the centre ('center' in USEnglish) of the FireFTP window, between the local and remote panes, you should see two green arrows, one pointingto the left, and the other to the right.
Click the arrow pointing to the right (that is, pointing from the local computer towards the remote computer).
FireFTP will proceed to upload your files.
Click 'Disconnect' from the menu. After FireFTP disconnects from your site, depending on which remote directory youwere in before, it may immediately forget that it has disconnected and pop up an error message complainingthat there is 'No such file or directory' for the remote folder. If so, click 'OK' to dismiss this spurious error.
Close the FireFTP window. (If you use Windows, you can exit FireFTP by clicking the 'X' button on the top right handside of the window.)
How to Test Your 'Live' Website
Now that your website is really on the Internet, it's time to do the testing that you could not properly do when itwas on your own computer.
Test the default page
Type '
http://www.example.com/', without the quotation marks, and after substituting your domain namein place of 'example.com', into your browser's address bar. Do not type it into Google or Bingor any other search engine. Type it directly into your web browser'saddress or location bar. In addition, do not type 'http://www.example.com/index.html',where the home page filename is added to the end of the URL.The result should be that you see your home page in your browser, in spite of not tagging '
index.html'onto your domain name. If you don't, look at the error message displayed in the browser. If it saysa '404 File Not Found', 'Document Not Found','Forbidden', or 'Directory has no index file', it may mean one of the following things:You may have named your file wrongly. For example, if you used a filename of '
Index.html' (notice the capital 'I'), you will get this error. The home page must be named 'index.html' if you want this trick of typing your domain name to work.You may have uploaded your files to the wrong directory. Don't think that this possibility does not apply to you. Web servers will only display files placed in specific folders, for security reasons. Just because you successfully uploaded your files to your server does not mean that they are in the right location.
A less likely possibility is that your web host has not set up their server to show
index.htmlas the default page. This is rare nowadays, since most web hosts configure their servers to follow the conventions that the majority of webmasters are familiar with (if only to reduce the amount of technical support they have to give).To test this possibility, type '
http://www.example.com/index.html' (yes, this time with the filename) into your browser's address bar. If this works, but 'http://www.example.com/' doesn't, then you are in this boat. You can solve the problem either by asking your web host to set the default page to 'index.html' for you, or you can find out from them how you can do this for yourself. Although I have a tutorial for changing the name of the default page for one commonly-used web server software (called Apache), your web host is probably using a different program for their system. I say this because Apache recognizes 'index.html' by default.Another solution is to rename '
index.html' to the name used by your web host's server software. However, this means that any links on your site pointing to the home page with 'index.html' somewhere in the URL will break, and you will have to fix all those links. In addition, if you ever move your site to a different web host using the standard 'index.html' convention, you will face this issue anew.
On the other hand, if you get a 'Domain not found', 'No DNS for www.example.com' or error messages of that ilk, itcould be one of 3 reasons.
Your domain name is so new that your internet (eg, broadband, dial-up or wifi) provider has not yet updated their system to recognise it. Some companies take as much as 2 days to be able to connect to newly-minted domain names. If this is the case, you'll just have to be patient and try again later.
Alternatively, your web host may not have set up the 'www' subdomain for your site. Not every web host does this automatically. To see if this is the case, type '
http://example.com' (that is, your domain name without the 'www' prefix) into your browser's address bar. If this works, but the 'www.example.com' version doesn't, contact your web host to ask them how you can set up the 'www' version. (For example, on some web hosts, you may need to log into your website's control panel and click a checkbox somewhere.)You made a typing error when entering your domain name into the browser. Before you scoff at this, check it. Typing mistakes afflict us all, whether you are a newcomer or an experienced webmaster.
Check the Appearance: Layout, Navigation Menu, Colours and Images
Take a look at the web page. If you do not see the two column layout that you created in chapter 1, orthe buttons on the navigation menu no longer look like buttons but bullet points in a list, or the colourson the page have reverted to white, it means that you did not upload the '
styles.css' and'tswnavbar.css' files, which control these features.Another thing that you will need to check are the images that you placed on your pages. Make sure thatall of them show up on the site as they did on your computer. If they don't, it could be due to oneor more of the following reasons:
You forgot to upload them. (Did you remember to upload your
imagesfolder and its contents?)You uploaded them to the wrong place. (Did you upload the pictures to an
imagesfolder on your remote site directory or did you wrongly place them into the same directory as your web pages?)There is a problem with the link to the images. (Did you remember to put a tick in the box to 'Make URL relative to page location' when you inserted the image?).
Test all links
You should now embark on an exhaustive clicking of all the links you inserted into your pages, including thosefound on your navigation menu. They should all lead to valid destinations, except for the onespointing to your Feedback (or Contact) Form. The latter, as expected, will result in a 'File Not Found'(or words to that effect) error, since you have not yet created it yet.
(Note that if you have inserted GoogleAdSense advertisements into your pages, you should not click the links in those advertisements, since that willget you kicked out of their program. Check only the links that you have added yourself, to make sure they are valid.)
Once you have fixed any outstanding issues, and everything appears as it should, congratulations!With your site finally on the Internet, you are now a webmaster.
Next Chapter
In the next chapter, you will adda feedback (or contact) form, thereby completing the website.
Copyright © 2017-2020 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 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.
Bluegriffon Macos Big Sur
It will appear on your page as:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 27 July 2020.