BLUEGRIFFON Published : 2011-10-12 License : None 1
INTRODUCTION 1.
1. INTRODUCTION A griffon vulture is a large scavenger bird. But what is BlueGriffon? BlueGriffon is an Open Source Web editing application that allows WYSIWYG (What You See Is What You Get) editing and creation of web pages. It is a successor to the NvU editor, which is no longer maintained. BlueGriffon also includes support for new features in HT ML5, which have been defined since the time when NvU and some other similar editors were developed. T he BlueGriffon website is http://bluegriffon.
GETTING STARTED 2. CONTENTS OF A SIMPLE WEBSITE 3. CREATING TEXT ON A WEB PAGE 4. ADDING AN IMAGE TO A PAGE 5.
2. CONTENTS OF A SIMPLE WEBSITE At the most basic level a website is nothing more than a set of files written in a specific way that can be interpreted (or parsed, in web lingo) by a web browser. In order for all browsers to interpret the files the web pages must be written in a consistent manner. T his consistency of form is HT ML, or HyperT ext Mark-up Language. Because HT ML is nothing more than a text file written in a specific format, all that is needed to write web pages is a text editor.
3.
T he large textarea in the lower portion of the BlueGriffon window is where all the content of the page is entered. T o enter text, simply select the window and start typing. Don't worry about fonts or other formatting issues just yet, we'll get to that a little later. After entering a bit of text, pause to save the file. Saving the page can be accomplished by selecting the Save icon button near the upper left corner of the BlueGriffon window.
T he location (or folder or directory) where you choose to save this file is also significant. A suggested habit is to create a folder on the hard drive of your computer that will hold all the files needed for a given web site. T his folder should contain no files except those needed to display this particular web site. By keeping everything contained in a folder in this way it will make transferring your site to a server very easy. You can set this up without having to leave BlueGriffon.
T o gain a tiny bit of immediate gratification, use the Preview icon button near the top right of BlueGriffon. 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.
Use the Choose... command button to navigate to your selected browser, and select the checkbox if you would like to avoid having to record your choice again. (If this task was frustrating or confusing, just open your favourite web browser as you normally would. On its menu bar select "File", then "Open File" (or the most similar choice available in your web browser). In the resulting dialogue box, navigate to the T utorial_Site folder and select the index.html file.
4. ADDING AN IMAGE TO A PAGE Most web pages have at least some visual (non-textual) content, so let's begin to see how BlueGriffon can be used to place an image on the page. Just as there are benefits to grouping all files for a website within one folder, there are benefits to having a nested folder dedicated for the purpose of containing all images used on the website. As you'll soon see keeping things categorized in this way will make expansion and revision of the site relatively painless.
Alternatively, you may choose to copy the image displayed immediately below on this page. You could use your image editing program (e.g. the GNU Image Manipulation Program) to create a new image from taking a screenshot of the area of the image above. But you will probably find it simpler and quicker from within your web browser to select the image with the secondary mouse button, then select "Save Image As..." from the resulting context menu.
T his tutorial will seldom show all of the different techniques that you could use to accomplish a given goal, but this example might reduce your surprise as you discover alternate methods as you use BlueGriffon. In any case, a dialogue box will appear. Select the "Select image" icon, navigate to the file that you saved inside the "Images" directory for your site, then select the "Open" command button.
Back in the "Select Image" dialog you will notice that your choice has automatically filled in the path to your selected image, and selected the checkbox "Make URL relative to page location". You may also notice that the "OK" command button is not yet available. BlueGriffon is encouraging you to supply some useful information in the "Alternate text:" textbox.
Remember, BlueGriffon is a WYSIWYG editor, so just drag and drop the image to the location before / within / after the text where you would like for it to appear. Now would be a good time to save the page with the image inserted. Merely select "File" on the menu bar, then select "Save", or as before by selecting the "Save" icon button near the upper left corner of the BlueGriffon window. In either case, you will notice this is completed promptly (without you having to supply a Name and T itle, etc.
5. USING LINKS First, there needs to be another page to link to. T o make another page in your site, just select the "Create a new page" icon in the upper left corner of the BlueGriffon window. (Or use Alt+f then Alt+n to accomplish the same goal.) A new blank page will appear in a new tab. For now just enter some new text in the page, select the "Save file to a local location" icon, give the page a title, and save the page in the T utorial_Site directory.
In the resulting dialogue, select the "Select a file" icon and navigate to the second_page.html file. T he way that the the path of the link is written tells the browser if the link is relative or absolute. When creating websites, it's a very good idea to understand how this works. If a URL starts with a / (the forward-slash character used to separate the names of folders or directories within a URL) or a protocol (e.g. "http:", "file:"), it is an absolute URL.
but the bits in the middle will vary depending upon the operating system in use and the organizational choices you made when you created this web folder. T here is a serious drawback to using an absolute URL here, however. If at a later time you decide to move the location of your site to a different web address or change the location of a directory within a site, you would have go back and change all the links in the site to point to the new location.
In general, an absolute URL should only be used when linking to an external website. Notice that if you make an unreasonable request of BlueGriffon, and select the checkbox "Make URL relative to page location", in this case no change is made to the T arget URL. After: selecting the "OK" command button to create this second link, and saving these recent changes to your index.
STYLES 6. INLINE STYLES 7. USING EMBEDDED STYLES 8. EXTERNAL CASCADING STYLE SHEETS 9.
6. INLINE STYLES HT ML is well suited to setting up links to different pages, images and locations on the net. It was not designed for telling a browser how that information should be presented in minute detail. In the first decade or less of the use of HT ML, some web designers attempted to fine tune the layout, spacing, and other aspects of the appearance of a web page by using various HT ML tags.
Rules found in sources at the bottom of this list override rules found earlier in the hierarchy. T his allows e.g. a user with a slight visual impairment to ensure that all text is rendered in a larger font size, even if the author of a website thought it would be cute to use a tiny font s ize . But if a user does not create or have their own style sheet, then the author's preference for a s maller fo nt s ize will overrule the default font size which the browser would have used.
In the resulting CSS Properties dialog, in the uppermost selection list select the up-and-downarrow icon at the right end of the textbox, then select the last item in the list of choices. T his will "Apply styles to:" "this element, through inline styles". T hen select the twisty triangle at the left end of the Colors item to expand or reveal the choices.
Select the radio button for a Background color.
and then select the OK command button. For the moment, close the CSS Properties dialog, and back in the main BlueGriffon window Save your file again. When you reload this page in your web browser preview, you can see the yellow background color has been applied as the style for this one list item. How long is this shopping list? How many times do I have to select an item, navigate to its style properties, select a color, etc.
7. USING EMBEDDED STYLES In this section, we continue to construct and embellish our shopping list of cheeses in the file index.html. Select the text for another list item, and reopen the CSS Properties dialog (via Panels, Style Properties as before, or via Alt+p then Alt+s, or by selecting the "Set CSS styles" icon slightly to the right of the middle of the icon bar), but this time change the selection to "Apply styles to:" "all elements of same type...".
Repeat for each of the other similar list items (Gruyère through Double Gloucester). (While it would be tempting to select a group of list items and supply the class name once for all of them, that would achieve a different result. As the hover text reveals this operation would "Apply a class to selection's container". For this list in this document, you will probably find that the class is applied to the entire body of the document.
We must also select a compatible Foreground color with this rule, to guard against some other style rule possibly changing the text to e.g. a nearly-invisible white color against this lightcolored background). Select the Foreground color dot and choose black, then select the OK command button. An important guideline for web design and style creation is: Whenever a style specifies a Background color it must also specify a compatible color (or Foreground color, as BlueGriffon names it).
In the BlueGriffon window (or in the web browser preview window, after Saving the file and reloading the tab or page within browser) you will observe three different background colors for the various list items. T his illustrates another aspect of the hierarchical overrides in CSS; an embedded style rule which has more specificity (e.g. it applies to items only with class="no") takes precedence over an embedded style which is applied to all elements (e.g. all list items within a given file).
8. EXTERNAL CASCADING STYLE SHEETS Maybe you are unsure that you like the default font choice that each browser would use to render your web page. You can select a cheesier font by Edit, Select All, and then expanding the General item in the CSS Properties dialogue.
By selecting the + sign at the bottom of the Font Family: textbox, you can see a list of fonts which are available on your system. While the first few choices are general descriptors for fonts that should be available on any computer system, the later choices may include fonts which would be found on few other computers than yours.
notice that this change is effective immediately in the BlueGriffon window, even before you close the CSS Properties dialog. Remember that much earlier in this tutorial you created another page? You may even still have it open in another tab within your BlueGriffon window. Select it to view it once more. While its content is still quite brief, you will notice that it is still rendered with the default font, rather than the one you just selected for the main page.
I thought so. As usual, BlueGriffon spares you having to learn the details of how to write a CSS @import rule or a HT ML link statement. (Although, as usual, once you have used BlueGriffon to create e.g. an external style sheet, you can use the source command button at the bottom center of the BlueGriffon window to peek at the link it constructed for you, etc.
then select the + sign at the lower left of the resulting anonymous dialogue. In the resulting dialogue, select the radio button for Linked to the document, and then select the New file command button.
Navigate to the Tutorial_Site folder where your: index.html file, second_page.html file, and images folder are located, and create a new folder named style. Within that new folder open a new file named author.css. As you select the Open command button in that dialogue and return to the BlueGriffon Type dialog, select the checkbox for making the URL for the new stylesheet be expressed relative to the location of the current webpage: In the BlueGriffon Type dialog, select the OK command button.
Now switch to the "T utorial second page" tab in the main BlueGriffon window (or reopen that file if it is not still present in a tab). Once again, on the menu bar select Insert, then select Stylesheets from the resulting context menu, again select the + sign at the lower left of the resulting anonymous dialogue. In the resulting dialogue, select the radio button for Linked to the document, and then select the Select a stylesheet file icon.
navigate to the style folder within your Tutorial_Site folder, select the author.css file you created a little while ago, and then select the Open command button. As you return to the BlueGriffon Type dialogue, once again select the checkbox for making the URL for the new stylesheet be expressed relative to the location of the current webpage: Now Save the second_page.html file again, and notice how its font now matches the font in index.html ...
9. ALTERNATE STYLE SHEETS You can also supply an external style sheet which is available as an option to be selected by the visitors who view your web page. Once again, on the menu bar select Insert, then select Stylesheets from the resulting context menu, again select the + sign at the lower left of the resulting anonymous dialogue.
and then select the New file command button. Navigate to your Tutorial_Site folder, and then to its nested style folder, supply the file Name (which does not necessarily have to match the T itle, but should end with ".css"), and then select the Save command button. Back in the BlueGriffon (stylesheet) Type dialogue: select the checkbox for making the URL for the new stylesheet be expressed relative to the location of the current webpage, and select the OK command button.
Back in the main BlueGriffon window, click your mouse over the text in a paragraph (to remove the previous global selection): then return to the CSS Properties dialogue Colors section to: verify that this style rule will apply to "all elements of the same type..." (all paragraphs, signified by the P in the adjacent unavailable textbox), select the Background color dot, select black within the resulting dialogue, and select the OK command button.
Ah! Now the text is legible again ... until you scroll down to the shopping list. But you know how to repair that ... in the main BlueGriffon window click your mouse over the (currently invisible) text in a list item. T hen back in the CSS Properties dialogue Colors section: verify that this style rule will apply to "all elements of the same type...
APPENDIX 10.
10. CREDITS LICENSE All chapters copyright of the authors (see below). Unless otherwise stated all chapters in this manual licensed with GNU General Public License version 2 T his documentation is free documentation; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.
Adding an Image to a Page © Ben Dembroski 2007 Modifications: adam hyde 2007 , 2008 Andrew Lowenthal 2008 T homas Middleton 2008 Nelson Strother 2011 Using Links © Ben Dembroski 2007 Modifications: adam hyde 2007 , 2008 T homas Middleton 2008 Nelson Strother 2011 Using Inline Styles to Control the Appearance of a Page © Nelson Strother 2011 Using Embedded Styles to Control the Appearance of a Page © Nelson Strother 2011 Using External Cascading Style Sheets to Control the Appearance of a Set of Pages © Nels
T he licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public License is intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users. T his General Public License applies to most of the Free Software Foundation's software and to any other program whose authors commit to using it.
2. You may modify your copy or copies of the Program or any portion of it, thus forming a work based on the Program, and copy and distribute such modifications or work under the terms of Section 1 above, provided that you also meet all of these conditions: a) You must cause the modified files to carry prominent notices stating that you changed the files and the date of any change.
T he source code for a work means the preferred form of the work for making modifications to it. For an executable work, complete source code means all the source code for all modules it contains, plus any associated interface definition files, plus the scripts used to control compilation and installation of the executable.
9. T he Free Software Foundation may publish revised and/or new versions of the General Public License from time to time. Such new versions will be similar in spirit to the present version, but may differ in detail to address new problems or concerns. Each version is given a distinguishing version number.
