Bluegriffon User Manual

BlueGriffon has serious problems on recent versions of macOS, the authors don't appear to react on bugreports. So we stopped making BlueGriffon available via the Self-Service.

What is BlueGriffon ?

How to install BlueGriffon?

How to use BlueGriffon ?

Fortunately, BlueGriffon operates with a very similar interface regardless of the system under which system it runs. All the examples given will be equally applicable to OS X and Windows. In the event that there is a difference, separate instructions for each operating system will be provided. Since BlueGriffon does not yet know which web browser you prefer to use, you will be rewarded with a dialog where you need to specify which one among e.g. Google Chrome, Microsoft Internet Explorer, Mozilla Firefox, Opera, Safari or whatever browsers are installed on your computer system. 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. Free Manuals for Freedom. Using Links First, there needs to be another page to link to. To make another page in your site, just select the 'Create a new page' icon in the upper left corner of the BlueGriffon window.

The user manual is available online, only for CERN users, here

BlueGriffon ® The next-gen Web and EPUB Editor based on the rendering engine of Firefox ® Version 2.2 released 2017-jan-26. « My HTML Editor is BlueGriffon, an intuitive, modern and robust application. I like that what I see is what I get on the Web. » Jeff Jaffe, CEO of the World Wide Web Consortium (W3C). The solution to this problem was to create a standard for specifying the presentation of HTML that would be the same in all browsers. This standard is called CSS, or Cascading Style Sheets. It is certainly beyond the scope of this tutorial to explain the intricacies of how this works. Fortunately BlueGriffon does a lot of this work for you.

What are the differences between the free version and the commercial one ?

The Basic version add :

• The user's manual
• Responsive design
• Fullscreen mode
• CSS Editor Pro with Media Queries, CSS Variables and even a visual CSS Selector editor!
• Table Layout Manager with 44 predefined layouts, all strictly CSS-based
• Toolkit Manager for one-click insertion of multiple JavaScript/CSS files
• MathML Editor panel (based on ASCIIMathML)
• Code Snippets panel
• One-Click Templates Manager with ~2,500 free templates
• Mobile Viewer
• EyeDropper, a colorpicker allowing to select a color from anywhere on screen(s) (Windows and Linux only)
• PUTter, to publish a document and the local resources attached to that document through HTTP PUT
• Thumbnail manager
• Word count warnings
• Project Manager

The Epub edition add all the necessary features to produce quality Epub contents:

• EPUB 2
• EPUB 3.0
• EPUB 3.1
• full metadata editing support for EPUB 2, 3 and 3.1
• copy/paste between EPUB and all flavors of html

Resources

This Page's Contents

BlueGriffon Web Editor Introduction

• BlueGriffon comes in 3 versions. The difference between versions is the number of powerful features included.
  • Without Licence, i.e. FREE version. User Manual if required € 7.50 (Aug 2018) 100 page PDF document
  • Basic
  • EPUB Licence

Manuals for older versions of BlueGriffon are available online do a Google search

Initial Setup

Recommended Initial settings after you install Bluegriffon

Bluegriffon User Manual Model

1. Click file > New, or Ctrl T keys. Note: A untitled tab appears.
2. Click Dual View button near bottom left. The main window splits vertically into on left & Source, the HTML markup, Source window, containing the HTML markup on right
   1. Note the markup produced and compare it to my markup in Required HTML tags in tutorial 2.
      1. Bluegriffon produces slightly more markup, which does not alter the results produced, so you can leave it as it is.
3. Click in the Design window. Then click View > All Tags Mode.
   1. This will display icons displaying the start tags that are used in the Source window.
4. If Style Property Tab is not displayed on the left then Click Panels > Style Properties
5. Click Style Property Tab it to display a long list of styles.

BlueGriffon Create a New Web Page

The above creates a document that holds more information than is covered in the first few lessons. So only view the code that is relevent

Create page wih CSS Header, Side bar, Main Content & Footer

Bluegriffon 3 User Manual

1. Open BlueGriffon
2. Click File > New Wizard
3. In the New Document Wizard
   1. Title In Title Enter Your Page TITLE goes here
   2. Author In Author: If you want your name etc to be available to the WWW enter any/ all / none of the following: Your name, company, organization, Wemmaster name & email
   3. Keywords Enter the pages Keywords. At this stage you can leave blank or Enter web, page
   4. Language: Select English (en)
   5. Character set: Select Unicode(UTF-8)
   6. Text Direction Select Left to right
   7. Click Next
4. In the Colours and Backgrounds
   1. I Suggest you leave as the default colours
   2. Only if you wish to change the default colours click Use custom colours & change as required.
   3. Click Next
5. In Document Background
   1. At this stage leave as is
   2. Click Next
6. In Page layouts
   1. Ensure predefined CSS layout is Ticked. This tutorial covers CSS layouts in a later lesson.
   2. Width: Select 950px
   3. Sidebar: Select Left 180px
   4. Click New row > Select 1 column 100%
   5. leave the Include ticked. This produces latin text in the main section. You can delete or alter this later.
   6. Click Finish

Bluegriffon User Manual

The above creates a document that holds more information than is covered in the first few lessons. So only view the code that is relevent

Bluegriffon User Manual Software

BlueGriffon User Manual