BlueGriffon CSS & HTML5 Editor

This Page's Contents

BlueGriffon Web Editor Introduction

BlueGriffon Initial Setup

BlueGriffon Creating a New Web Page

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

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

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

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

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

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