Enter BlueGriffon. Built on top of Gecko (the rendering engine used by Firefox), BlueGriffon enables you to create web pages using HTML5, CSS3, and other widely-used web standards. Let’s take a look at how to build web pages with BlueGriffon.
Installing BlueGriffon
Head on over to the BlueGriffon download page. You can either grab an installer or an archive containing the program’s files. If you downloaded the installer, pop open a terminal window and navigate to the directory in which you downloaded the archive. Then, run the following commands: Where x.x.x is the version of BlueGriffon (the current version is 1.1.1) and [arch] is the architecture of your distribution (x86 for 32-bit systems or x86_64 for 64-bit systems). Follow the prompts. The installer copies the program’s files into the folder /usr/local/BlueGriffon. If you downloaded the archive, just extract it to a directory in your path. Then, either manually add a launcher for the application to your system menu or add the path to the directory /usr/local/BlueGriffon to your system path.
Getting Started
When you’re ready to go, either double click the icon that the installer places on your desktop or run the command bluegriffon.
Select File -> New to create a new web page. You’re literally presented with a blank canvas, sort of like a new word processor document. As with a word processor, you can literally start typing to create your document. Using the buttons and menus on the toolbar, you can also apply formatting to your page. Like what? Here’s a sampling:
Heading and paragraph styles Font attributes like bold and italics Alignment of the text Indents Lists
You can also insert links, tables, images, video, audio, and forms with a click of a button or by selecting an option from the Insert menu. That’s all pretty much standard for any good HTML editor. What sets BlueGriffon apart is its support for HTML5. HTML5 includes a number of new elements that, among other things, make it easier to add audio, video, menus, and distinct sections to a web page. You can insert HTML5 elements by selecting Insert -> HTML 5 Element and then selecting the element from the list.
You have two options for adding formatting using Cascading Style Sheets. If you have a style sheet file, you can link it to your web page by selecting Insert -> Stylesheets. Click the + button.
Click Linked to the document and then click the icon beside the Href field. Navigate to the directory containing the stylesheet file that you want to add to your web page. Once you’ve added the stylesheet file, it appears in the Insert or edit stylesheets window.
When you’re done, you can wind up with a very nicely-formatted web page.
Any time you want to view or edit the HTML code of the page, click source at the bottom of the BlueGriffon window.
Adding Diagrams
Obviously, the easiest way to do that is to create the diagram in another program, save it as a web-friendly graphic file, and then insert a link to the image in BlueGriffon. But if you just need a simple diagram, you can use BlueGriffon’s built-in SVG editor. On your web page, click where you want to place the diagram. Then, launch the editor by clicking the SVG Edit button on the toolbar.
The diagrams you can create are fairly basic, but you can build some decent flowcharts and the like. When you close the editor, BlueGriffon places the diagram on your web page.
Final Thoughts
BlueGriffon does a very good job of helping you build single web pages. There’s no site management feature, but its support for HTML5 is second to none. And you can expand on BlueGriffon’s capabilities with add-ons. You have to buy the add-ons, but if that supports the development of the application then they’re worth it. Photo credit: svilen001
