Quick Links
Introduction
BlueGriffon is a free, open-source web page editor that anyone can use to design and build the website. It is a WYSIWYG (What You See Is What You Get) web editor, providing a GUI interface for making webpage in an easy way even though users have less experience or knowledge in web programming.
This online tutorial allows you to get started on using the free version of BlueGriffon (http://bluegriffon.org/) for writing your first web page.
Learning Objective
- Create a web page using BlueGriffon
- Learn the fundamental aspects of HTML editing
- Enter and format text in BlueGriffon
- Create and maintain hyperlinks to pages on other sites
- Using tables to arrange data
- Insert, resize and position images
Software Requirement
BlueGriffon
You will need BlueGriffon for creating and editing your web page. BlueGriffon is a WYSIWYG – “What You See Is What You Get” HTML editor as well as graphical web design software from Disruptive Innovations SAS, a French Company founded in Oct 2003.
BlueGriffon 3.1: Free Version available at http://bluegriffon.org/#download
Supporting platforms: Microsoft Windows (7, 8, 10); Mac OS X ver.10.10 or above and Ubuntu 16.04, it only support 64bits Operating System
Supporting Languages: English (USA), Čeština, Deutsch, Español (Castellano), Suomi, Français (France), Galego, עברית, Italiano, 日本語, 한국어, Nederlands, Polski, Русский, Slovenščina, Svenska, 中文 (简化字), 中文 (繁體字), Magyar, српски
Getting Started with BlueGriffon
Installation of BlueGriffon (demonstrated with Windows platform)
- Double click the installer which is downloaded from the site
- In the Setup Wizard, click Next.
- Select Destination Location (suggested to use the default location), click Next.
- Check the box Create a desktop shortcut and click Next
- Confirm the installation details and click Install.
- Wait for the installation in progress.
- After the completion of installation, check the box Launch BlueGriffon and click Finish.
- Launch BlueGriffon
To start BlueGriffon
- Double click the short cut of BlueGriffon on the Desktop
- When you first launch the program, you’ll find a number of task panes, toolbars, and dialogs with a wide range of features. Your BlueGriffon windows should look something like this:
Creating a New Web Page
A fundamental function of BlueGriffon is to allow you to create a web page (*.htm; *.html etc)
To create a new page, please click the PLUS symbol on the top left corner of BlueGriffon
- Wysiwyg (What You See Is What You Get): the editor view where you input text
- Source: reveals the HTML codes of the page you are editing
- Print Preview: display the preview of the printed version of your editing page
Page Properties
Go to Format > Page Properties
It allows you to edit the Title, Author, Description, Keywords of your web Page
The Text Language and Character Set allow you to change the HTML encoding to Unicode (UTF-8), Simplified Chinese or Traditional Chinese (Big-5)
When you have finished making changes, click the OK button.