BlueGriffon, a web page editor
Get Blue Griffin
You will need to download Blue Griffin at:
http://bluegriffon.org/pages/Download
Links to an external site.
You should select the Windows download installer.
After the file downloads, open it and follow the directions to install it.
If you need some content to play with then you can use text from the page “WebTutorial1 Links to an external site.” to create two web pages.
Here is what Blue Griffin looks like with a new, blank document
Creating a File
The first thing we do with a new web page file is SAVE it.
Before we do any editing, we SAVE it.
Be sure to SAVE the file before you do anything else.
I hope that is clear.
Usually we have a home page called “index.html”, though you can call a web page any thing that you want. The first time you save a page most web page editors will ask for a page title in addition to the file name. The page title is optional and could be something descriptive like:
”this is Gary’s first wicked, awesome web page. It’s made with Blue Griffin, a cool, free, open source web page editor. Here he’s writing a little about a graphical, drag-and-drop, programming language called scratch.”
Or it could be much shorter, like “home page”.
It is also important that you create a special folder for your web pages and images, something like “webPlay” or final-web-project.
Once the page is saved, then we can start adding and editing text, links, and images.
Text and Images
So Copy the first page text from the WebTutorial1 file, and then right click to Paste without formatting.
Here we can add an image where it says [scratch logo]. To do so, first download the image, Scratch-logo-outline.png, from the google drive. It’s important that you save it to the “webPlay” directory that you created earlier.
To Add an image click the image icon in the tool bar,
Save the file!
Let’s change the style of the second line, “Scratch your itch, Learn to Code!!!”
Highlight that text. In the second tool bar, we will change “paragraph” to “Heading2”.
Notice it is now bigger and bolder. Heading1 is the biggest and they shrink as the heading number increases.
Save the file!
Adding Links
Let’s add some links to this file. Before we do that it would be nice to have a second page to link to. So, create a new page, save it, add the second page content to it, and save it again.
Add a new line or two at the end of the file and type “Learn More”
Highlight this and select the link button from the main tool bar. Use the file icon there to select the file you want to link to, your new second page. Make the link relative and then click OK.
Using styles in Blue Griffon
Go to the Panels menu and select Style Properties. The first time you open the style properties panel it appears as a floating window, like the layers panel in the Pixlr Editor.
I prefer to have the style properties docked. Just select the pin icon at the top of the style properties panel to dock it.
When using the style panel pay close attention to what the style is applied to:
The style is applied to the element you are actively editing. The choices are:
- this element only through its ID
here the element must already have an id assigned to it - all elements of class ...
here you can create a new class or choose an existing class to edit - all elements of the same type ...
here the element type is selected, e.g., h1 - this element, through inline styles
here a style attribute is applied to the element
External Style Sheets
To use an external style sheet, go to the Panels menu and select stylesheets. If you already have an external stylesheet linked to your page then it will show in this panel.
Double-clicking the sheet's name will open it for editing.
Click the plus in the bottom-left corner to add a new stylesheet. The default is embedded.
Choosing the linked to the document option will create an external stylesheet. The file icon on the right will let you search for an existing stylesheet to link to, or you can create a new file.