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. BlueGriffon is an Open Source Web editing application that allows All the examples in this tutorial are based on running BlueGriffon under the Linux operating.
|Published (Last):||7 July 2018|
|PDF File Size:||14.74 Mb|
|ePub File Size:||20.53 Mb|
|Price:||Free* [*Free Regsitration Required]|
Below you will find a basic overview of the important features you should become familiar with when using Blue Griffon.
BlueGriffon Tutorials ()
For our editing purposes, you do will not need any additional add-ons or features that are not part of the basic Blue Griffon installation. This is what the main application window looks like. The bluegrirfon common bluegrifvon and important – features you should be familiar with are flagged and described below. Even if you are creating a new page, you should be opening the blank. There are global page sections that are used on almost every web page on the net.
These global sections are not unlike the sections of a typical Word document. Paragraphs and each Heading level are already assigned a styles, so all you need to do bulegriffon order to use them is select a section from the drop down menu, and the text will automatically be assigned the proper formatting.
Only Paragraph – Heading 6 should be used on your Web site. In order to ensure proper coding, it is absolutely imperative that you use either the! Other notes about buttons: The C toggle button is used if you want to display code snippets as plain text on your page. You should not have a need for this in your typical editing. The U toggle button is used if you want to underline text on your page.
It is supremely frowned upon to underline plain text on your page for the simple reason that underlined text on a web page almost always conveys a link. To create a list, click on the button corresponding to the type of list you want to create. Begin typing your first item. After each item, simply press the Enter key to add another item.
After you have typed in your final item, press the Enter key once more, then click the toggle button again to deactivate the list format and return to a new paragraph. For example, if you insert an image and would like to align it to the right of the page and have text wrap around blurgriffon, you could select the “float right” style from the drop down menu, if available. Please be aware ttuorial not all sites will have the same set of pre-defined styles available.
Tjtorial will open the litte dialog box underneath the main menu tutoriwl. Since your web site working directory should already be populated and residing on your desktop, click the Choose File Browse for and locate the file you want to edit, select it, and click Open to close the file browser window and populate the location field in the little dialog box under the menu bar.
It is recommended to open the new page in a Tabso make sure that option is checked. Click OK in the little dialog box to open the file. The file will now appear in the main editing window. To create and insert a table into your page, click the Create Table button discussed above. A small pop-up window will appear in which you can select how many rows and columns you would like your table to initially have.
If the pop-up appears too small, simply drag your selection to either edge of the pop-up and it will automatically grow to as large as you need. Once you have selected the correct number of rows and columns, just click on your selection and the blank table will appear in your page where your cursor was.
This will open the Table Properties window where you can set important property values and other table settings. The following settings are recommended as best practices for ease of use, and consistency across pages:. The CSS stylesheet already defines default styles for tables which is why these values need to be set this way. Just a reminder that the CSS already defines default settings for all of the attributes mentioned above – don’t re-invent the wheel if you don’t have to.
To create a link or if you are editing a link, select the link firstclick the Link button discussed above. A small link properties pop-up window will appear. Critical Reminder About Links: Remember the good rule of thumb for links: If you are linking to a page within your site, open that page in the same window. It’s typically not good to take your user away from your site where they can be distracted bbluegriffon the content on blhegriffon external site and forget how to get back to your site.
When linking to documents, you should FIRST copy and paste the document into the working directory on your desktop into the correct documents folder so that when you go browsing for the document in order to link it to your page, the document is already in the correct location.
To insert an image or edit image properties of an image you pre-selected on your pageclick the Insert Image button discussed above. Some of the same rules apply with images as they do with links.
For example, any image you insert into your page should already have been copied and pasted into the web site working directory on your desktop in the images folder. Otherwise, the server will not be able to find your image and it will appear broken online. Bobby’s Web Training Docs. Getting Started with Blue Griffon This is what the main application window looks like.
Open Existing File – opens an existing file. Save File – saves the current file. Create Table – creates new table Insert Image – insert an image into the current page.
Creat Link – create a link from scratch or from selected text. Global Page Section menu – Select section you want to create from drop down menu. Proper coding for italic font is: Insert a Table To create and insert a table into your page, click the Create Table button discussed above. The following settings are recommended as best practices for ease of use, and consistency across pages: Cell Spacing – should always be set to 0 which is typically the default value. Cell Padding – should always be set to 0 which is typically the default value.
Background Color – set a special background color for a cell or selection of cells not recommended unless absolutely necessary. Text – this box is already pre-populated in the screenshot above because the text was already selected to become the link prior to clicking the Link button.
If you do not pre-select text, this field will be editable where you can type in the desired text for your link. Target – You can type a value into the Target field or browse to a file using the yellow folder with the green arrow to the right of the field. For email addresses – type the email address into the target field, then make sure the option labeled This is an email address is checked.
Leave all other options unchanged.
For external links outside of your site – type the full URL into the target field ex: In the Window target section, make sure the option labeled Open the link in: From the drop down menu that is activated, select the new window option in order to have the link open in a new window. You will see the full absolute path populate the target field. It is imperative that you make sure the option labeled Make URL relative to page location is checked.
Forgetting to check this option will result in broken links as the server will be looking for a file that lives on your computer which it can never see – nor can your site visitors. Image Location field – Click on the yellow folder with the green arrow to open a file browser window. Locate the image in your web site working directory on your desktop in the images folder and select the image you want to insert. This tells the server to start in the folder where you current page lives, and locate the image you want to display relative to the current folder.
Again, forgetting to check this option will result in broken images as the server will be looking for an image that supposedly lives on your computer which the server can never see – nor can your site visitors.
Title – Give your image a title that will appear when a user’s mouse hovers over the image. Alternate Text – Type alternate text for your image in this field.
It is imperative that every image on your web page have alternate text associated with it. For visually-impaired users who cannot see the page – let alone an image – and are using screen readers to “read” the web page to them, the alternate text is read to those users to explain the content of the image.
Bobby’s Web Docs & Tutorial Videos | Bobby’s Web Training | Lehigh University
For example, on a staff directory page containing a photo of a staff member, the alternate text should read something like “Photo of Johnny Awesome”. Same goes bluegritfon a photo of the UC Lawn or Lehigh shield logo. Essentially, make sure that you are providing enough relevant detail to fully describe the content of a given image.