Bluegriffon Templates
Le 24/07/12 07:13, Yarrow a �crit: I just downloaded BG to make a website for a friend's small business. I have made a site for them already in an ancient program (microsoft publisher) because that's all i know how to use. I feel, however, that what I have made looks well, old and dated. Granted its better than what they have currently but I wanted to try to get them something clean and polished, a more modern and fancy kind of site. Since I know nothing of coding, other than CSS is the new go to thing for fancy sites, I decided I wanted to use a template. To my dismay, all of the fabulous templates shown say you must go to a site and pay for them, and in the description says you will then gain access to.2864 free templates.If they are free, why must i first pay 12.11USD (approx)to gain access to them?
I understand BG is currently free and a great option for those like me who are incapable of coding, but I feel showing us then denying us access to the templates till we cough up some dough is rather underhanded. You pay for it because being we worked on a universal manifest for template sites, implemented it, spent time gathering these manifest and implemented a rather nice and super-simple UI above them.
Griffon - Free download and software reviews. None, in context. I purchased the full version of Blue. 1, and have been defrauded. File: free blue griffon templates Date: Size: 11.04 MB Type of compression: zip Total downloads: 837 Uploaded by: dyoclitaf File checked: Kaspersky. How to Create Multiple Pages for Your Website with BlueGriffon 2. All your pages the way the free Expression Web editor can with its Dynamic Web Templates.
You can still get free templates from the Web, download them, unzip them, manually change the filename and directory architecture. We do it in one click w/o needed tech knowledge. Greg Chapman 24.07.12 1:52. Hi Daniel, On 24 Jul 12 08:35 Daniel Glazman said: You pay for it because being we worked on a universal manifest for template sites, implemented it, spent time gathering these manifest and implemented a rather nice and super-simple UI above them. You can still get free templates from the Web, download them, unzip them, manually change the filename and directory architecture. We do it in one click w/o needed tech knowledge.
All you say is, of course, true, but over on the KompoZer forum (Dare I mention that here?:-) ) I found that many newbies expected that a web template would solve all their web design problems. It never did. The trouble is that many, come to web design with only experience of word processing and desktop publishing behind them and a complete lack any understanding of 'styles', even in the applications they are used to. Most only know how to apply visual effects to their documents by clicking on various toolbar buttons and don't consider semantics at all. These folk download a web template they like the look of and start using the same techniques they are used to and get in a hopeless mess. (That's when they start posting questions on the support forums.) The result is that I always used to advise that people should consider that web templates are for coding geeks that understand HTML and CSS but lack graphic design skills. They are NOT for those who recognise good graphic design but know nothing of HTML and CSS.
What this means is that there is no substitute for learning the principles that underpin HTML and CSS before one starts work on web design and no point in looking for templates until you are at that stage. (You don't need to know all the intricacies of of every HTML tag and attribute or CSS selector and element - BlueGriffon can look after that - but you do need to know the principles of what is going on under the hood. In the same way, while you can't drive a car until you understand the relationship between steering wheel, gear lever, accelerator, brake and clutch - yet you don't have to know about tappets, pistons and batteries.) Why am I bothering to say all this? Well, I'm a frustatrated KompoZer user and am thinking of adopting BlueGriffon and producing a BlueGriffon 'add-on', an extension to the official manual, that would introduce new web designers to the principles and techniques required - before they go looking for templates! I've done something similar already, for Kompozer, on my site. I just need to convert the information there to apply to BlueGriffon and present it as a PDF.
EMail me if you think the idea is worth following up. Greg Chapman Helping new users of KompoZer and The GIMP peacenik 24.07.12 12:14. Hi Didier, On 24 Jul 12 20:14 Didier Charles said: I would be interested in checking that out. Could you supply the URL address for downloading these? The URL depends on which of the templates you wish to use.
Open BlueGriffon 2. File One-click Templates 3.
From the left pane select a supplier 4. From the right pane click DEMO for the template you are interested in. It loads in your browser, from where you can save the page together with all its associated support files. As Daniel says, it is then a bit of a pain to sort it out to be able to make easy use of it. That's where the add-on is a help. Yarrow 24.07.12 23:32.
I am one of those people! I know how to use graphics programs to get things how i want them to look but i have zero knowledge of how to make things like links highlight when you mouse over them, or have an animated drop down menu. When you say ' The result is that I always used to advise that people should consider that web templates are for coding geeks that understand HTML and CSS but lack graphic design skills. They are NOT for those who recognise good graphic design but know nothing of HTML and CSS. ' is there any program/template good for me or am i just going to have to buckle down and try to learn about coding? (i tried before but all the letters/numbers/symbols sent me into panic attacks) Also, when you say you are ' thinking of adopting BlueGriffon and producing a BlueGriffon 'add-on', an extension to the official manual, that would introduce new web designers to the principles and techniques required - before they go looking for templates! I've done something similar already, for Kompozer, on my site.
I just need to convert the information there to apply to BlueGriffon and present it as a PDF. ' I think that would be awesome! But as an aside, could you post the links to what you've done? I know you say what you did was for Kompozer, but if the basic principles are the same would it be enough to teach me what i need to know? Greg Chapman 25.07.12 2:39. Hi Yarrow, On 25 Jul 12 07:32 Yarrow said: I am one of those people! I know how to use graphics programs to get things how i want them to look but i have zero knowledge of how to make things like links highlight when you mouse over them, or have an animated drop down menu.
The fundamental issue for those used to graphics programs is that what underpins all web pages is TEXT. HTML is one language and CSS another.
The first defines the 'content' (the text, graphics and, perhaps, audio contained on the page) and the second its 'style' - how it will appear (fonts, font-size and colour used, layout and positioning of text and graphics). Not only is appearance important, so is semantics if you are going to get a site well rated by a search engine. (To a search engine text marked as a heading is very different to text that just happens to be the same size. It's position within the file may also affect its treatment.) While a program like BlueGriffon can hide the the business of generating the text that goes into the files that make a web page from the user so it can be claimed 'no knowledge of HTML required', there is no way to avoid making a graphically sophisticated site without some understanding of the mechanics behind it all. (And I haven't even got to JavaScript, PHP, and other technilogies that are required to make various forms of interactivity work.) When you say '.The result is that I always used to advise that people should consider that web templates are for coding geeks that understand HTML and CSS but lack graphic design skills. They are NOT for those who recognise good graphic design but know nothing of HTML and CSS.'
is there any program/template good for me or am i just going to have to buckle down and try to learn about coding? (i tried before but all the letters/numbers/symbols sent me into panic attacks) You don't need to learn all the detail of the syntax and grammar of HTML and CSS to create a graphically pleasing site - BlueGriffon can look after that - but you do need to have an appreciation of the underlying mechanics. It is that which guides you to which of BlueGriffon's menus, options, panels and dialogues to turn to to get the effect you want.
You must always bare in mind that whereas a graphic artist is usally producing a single work of art, a web site may be made up of scores or hundreds of linked documents, all of which must have a common appearance or theme. It is the norm to find that you need to make changes to your basic design once you have already got a site with many pages up and running. Times, and the nature of a site's content, will change and new features will be required which have an impact on the existing design. This is the vital reason for the need to separate 'content' from 'style', It allows you to make changes in the appearance of a site that affects all pages, while not changing their content. (The site at is worth looking at to see this in action - a single page controlled by many switchable stylesheets.) Also, when you say you are '.thinking of adopting BlueGriffon and producing a BlueGriffon 'add-on', an extension to the official manual, that would introduce new web designers to the principles and techniques required - before they go looking for templates! I've done something similar already, for Kompozer, on my site. I just need to convert the information there to apply to BlueGriffon and present it as a PDF.
' I think that would be awesome! But as an aside, could you post the links to what you've done?
I know you say what you did was for Kompozer, but if the basic principles are the same would it be enough to teach me what i need to know? The site is in my signature. Go to: and work down through all the linked pages. It starts with a little 'essential theory' and then goes on to just two exercises, one to introduce the concept of a single external stylesheet to control the appearance of a site and another, that uses a few additonal CSS techniques, to create a site's 'master page' - in effect a template that you will have built yourself from scratch.
It's very crude, so the page finishes with links to further guides on how to add various common features that a site may need. If you absorb everything in the two exercises you will have the knowledge you need to pick a web template from those found in BlueGriffon's Template Add-on and have the understanding to control and manipulate it. There is almost no code mentioned on the site at all (except where it is simpler to show the code because, by that stage you are expected to know where to find the menu options and dialogues to generate it.) but that means that it needs to be very KompoZer specific, so a newcomer may find it a little tricky to apply to BlueGriffon directly - but just skimming through it, may begin to help understanding, as I try to explain not just the effect you will see at every step in the exercises, but also why you are doing it. Yarrow 25.07.12 19:33.
How to Create Multiple Pages for Your Website with BlueGriffon 2 and 3 by Christopher Heng, Having completed your home page in the previous chapters of this, we can now work on the rest of your website. As implied by the above paragraph, you will need the knowledge and skills taught in the earlier chapters for this guide to make any sense at all, since it completely relies on the work done previously. If you don't even have a site yet, you should start with the article giving the. Goal of This Chapter By the end of this chapter, you will have created the other pages of your site (with the exception of the Feedback/Contact Form).
Using Your Home Page as a Template for New Pages Instead of designing the new pages from the ground up, and going through the laborious task of duplicating the work done in chapters 1 to 6, it's more efficient to make a copy of your home page and modify it. That is to say, if you are creating, a new page called 'sitemap.html', make a copy of your 'index.html' and rename it 'sitemap.html'. Then modify 'sitemap.html' so that it has the content you want. Here is one way of doing it. Start up BlueGriffon and open your home page (your 'index.html' file). Click 'File Save As.' From the menu.
In the 'Save Page As' dialog box that appears, type in your new filename. For example, if the new page is to be your Site Map, type 'sitemap.html' (without the quotes). At this point, you have a new file called 'sitemap.html' (or whatever you called it) with the same content as your home page. If you look above your web page in BlueGriffon, you may see two tabs. Your home page is in the tab on the left, and the currently selected tab is the one you just duplicated from the home page. If so, unless you are accustomed to working with multiple files open in different tabs at the same time, I recommend that you close all open files (use 'File Close current tab' from the menu until you're left with a blank BlueGriffon window) then re-open the 'sitemap.html' file again.
This way, you will not accidentally modify the wrong one. It's very easy to make that mistake even if you're an experienced webmaster, since, at this point in time, both the pages look identical (one having been derived from the other).
Important Things to Note About Naming Files Before you go berserk creating new pages for your website, please read my article on, if you have not already done so when making your menu in chapter 6. This is very important. The recommendations for good filenames for websites are different from those for files stored on your own computer. Specifically, do not use capital (uppercase) letters or spaces in your filenames. Notice that when I mentioned your Site Map, I gave a suggested name of 'sitemap.html', and not the more obvious 'Site Map.html'. There's a good reason for that.
Please read for more information, including other things not to do, why they should not be done, and workarounds so that the words in your filenames are reasonably easy to read. Introduction to the Site Map The first new file that you will create in this chapter is the Site Map. You can see an example of this by looking. As you can see, it simply lists all the pages available. At this time, your website only has one page, so you may be tempted to forego the site map altogether. However, I suggest that this is actually a good time to create one.
If you wait till your site has (say) 100 pages, the task of getting around to listing all 100 URLs in the site map will be so onerous that you will give up. And, unfortunately, that is the time you will be in sore need of one.
Although a page containing an exhaustive list of links to all the other pages of your site seems pointless to you, it is actually a feature that enhances both the user friendliness of your website, as well as its search engine readiness. As a webmaster, you will intimately know how your site is organised ('organized' in ), since you shed blood, sweat and tears to create it.
But not everyone sorts information the way you do. What is obvious to you will not necessarily be to your visitors. Since you can't anticipate how everyone thinks, and it's probably impossible to design a site that suits everybody's way of organising information, giving them a Site Map will at least help them to find what they need when they get lost. A site map also helps the search engine find the other pages on your site, particularly if your site is constructed in such a way that the engine has difficulty locating every page.
Unless you plan for your website to be a one page wonder, I strongly recommend that you create a site map. It doesn't require a lot of effort to create one, since it's just a list of links, but you reap its benefits anyway. How to Make a Site Map At the moment, your site map page looks exactly like your home page. Do the following:. Change the TITLE field Click 'Format Page Properties' from the menu. A dialog box with the title 'Document properties' will appear. You may remember this dialog box from chapter 1 when you designed your home page.
Change the contents of the 'Title' field so that it either says 'Site Map' (without the quotes) or 'Site Map (Example Co)' (without the quotes). Obviously, you should use the name of your website instead of 'Example Co'. Click the 'OK' button. Change the visible title displayed on the web page itself You may or may not have an existing title displayed on the page itself. Since your site map is based on your home page, that title probably said something like your website's name. Modify that so that it now says 'Site Map'. Replace the content Now delete the existing content in the right column, and replace it with a list of links, one on each line.
The easiest way to make BlueGriffon cooperate in this is to do the following. Let's say that you are creating three links on the page: 'Home', 'About Us' and 'Contact Form'. Type 'Home' (without the quotation marks), then immediately after, type Shift+ENTER. That is, hold down the Shift key and hit ENTER on the keyboard.
This inserts what is known as a 'line break'. (If you just hit ENTER, you will end up with a new paragraph, which puts too much space between lines.) Then type 'About Us', followed by Shift+ENTER again, and finally 'Contact Form'. Keep doing this until all your page titles are on their own lines. At this point, they are just the unadorned titles, and not yet links. Then go back to each line, select the word or words on that line, and. Adding links in the future Due to deficiencies in BlueGriffon 3.0.1 and the older 2.3.1, there is no easy or intuitive way to add to an existing list of links separated by line breaks in the WYSIWYG mode. It's faster to just switch to the Source mode to solve it.
Put your cursor just after the last character on the line above where you want to insert the new link. Then click the 'Source' button at the bottom of the BlueGriffon window to switch to the source view.
Look for the cursor on the page. If you positioned it as I suggested in the step above, it should be just after the words of your link and before ' ' on that same line. Use the arrow keys on your keyboard to move the cursor to the end of the line, immediately after ' ', but still on that same line. Hit the ENTER key (or RETURN key on the Mac) to create a new line. Type ' ' on that new line.
Click the 'WYSIWYG' button at the bottom of the window to switch back to the WYSIWYG view. Click to place your cursor on the new blank line that you created. You can now proceed to type the words for that link and.
Avoid the temptation to make your site map look spectacular or unusual. A site map is the often the last resort your visitors have in finding something on your website. Don't make it into such a visual conundrum that they feel they are undergoing an IQ test just to use it. That is to say, just make it a simple list of links the way thesitewizard.com and other sites do.
The About Us Page If you are selling goods or services, you may want to create an 'About Us' page to tell visitors a bit about your company. This is a straightforward page that doesn't require any technique other than those you have already learnt. Name the page anything you like (eg, 'about.html' or 'aboutus.html'), but if you have put a link to that page in your navigation menu in chapter 6, remember to use the same filename, otherwise people clicking your button will not be able to reach it. In addition, after creating your page, don't forget to change the TITLE field in 'Page Properties' to say something like 'About Us (Example Co)' or words to that effect. Those creating a personal or hobby website may omit this page.
If you choose to ignore what I say and create the page anyway, be circumspect about what you reveal about yourself. (This actually applies to your entire site, and not just this page.) Remember that a website can be read by anyone on the Internet, from future employers to criminals and lunatics living in your neighbourhood. The Other Pages Follow the same basic procedure for the other pages that you want to create, that is, make a copy of your 'index.html' file, change the TITLE field in 'Page Properties', and alter the content of the page. In addition, once you've finished designing that new page, list it in your Site Map. Do not create the Contact Form (or Feedback Form, or whatever you want to call it) yet. This will be dealt with in chapter 9. What Happens if I Want to Put a File into a Subdirectory?
If you want to create new pages in a subdirectory (ie, folder), you will need to take additional steps, or your website will not show up correctly in a web browser. BlueGriffon (at least up to version 3.0.1) will not automatically update any relative URL on your page when you save it. Create a new subdirectory in your website's folder. If you have forgotten how to do this, review, where you created the 'images' directory. Open your home page in BlueGriffon, and click 'File Save As.'
. Navigate to that new directory, type your new filename, and click 'Save'. Although everything looks fine on your page in BlueGriffon, it is not. All your images, style sheets and any link using relative URLs will be broken. You can verify this by starting up a browser now and viewing the file. Click your site logo.
Then click 'Insert Image' from the menu. This will bring up the 'Insert an image' dialog box that you met in chapter 2. Click the folder icon, navigate to your 'images' folder, select the image again, and click 'Open'. As usual, make sure that the 'Make URL relative to page location' check box is ticked, and click 'OK'. Repeat this for all the other pictures on your page. Click 'Panels Stylesheets' from the menu. In the 'Stylesheets' panel that appears, click the line that says 'styles.css' to select it.
Hosting
Click the gear icon at the bottom of the panel. It is the one immediately after the '+' and '-'.
In the menu that pops up, click 'Edit'. A dialog box with the title 'Stylesheet properties' will appear.
Click the folder icon next to the 'Href' field. In the 'Select a stylesheet file' dialog box that appears, navigate to the directory containing your 2 style sheet files. Click 'styles.css' to select it followed by the 'Open' button. Click the 'Make URL relative to page location' check box to put a tick in it. Click the 'OK' button to dismiss the 'Stylesheet properties' dialog box. Click the line that says 'tswnavbar.css' in the 'Stylesheets' panel to select it.
Once again, click the gear icon at the bottom of the panel, followed by the 'Edit' line in the menu that pops up. Click the folder icon for the 'Href' field.
In the dialog box that appears, click the 'tswnavbar.css' file to select it, followed by the 'Open' button. Once again, put a tick in the 'Make URL relative to page location' check box. Click the 'OK' button. If you have used absolute URLs for the buttons in the navigation menu in chapter 6, skip to the next step. On the other hand, if the links for your buttons use relative URLs, for each button, click to put your cursor somewhere within the word on that button, click 'Insert Link' from the menu, click the folder icon for the 'Target' field, select the file, and click 'Open'. Unfortunately, in spite of the 'Make URL relative to page location' check box having a tick, the Target field will contain an absolute URL beginning with 'file:///' (or at least it does in BlueGriffon versions up to 3.0.1).
To work around this bug, click the check box to remove the tick, then click it again to put the tick back. This should fix the Target field. Click the 'OK' button.
Repeat the process for all the other links in your navigation menu. Then go through all the links on your page that contain relative URLs and repeat the same process to update them. Don't forget that your logo is also a link.
Make your other modifications to the page (eg, change the title field and content) and save the file with 'File Save' when you are done. If you plan to create other pages in this same subdirectory in the future, I recommend that you use this newly modified page as the basis for those files. This way, you don't have to go through the hassle of updating all the relative URLs again. What Happens if I Want to Change My Design? If you want to change the design of your site, you will have to go through all the pages on your site to manually update them.
Unfortunately, BlueGriffon (at least up to version 3.0.1) does not have built-in facilities to automatically update all your pages the way the free, or the commercial. Next Chapter Now that your website is nearly complete, you will probably be eager to test out the links that you could not before using a browser. However, since your site is still on your own computer, and not the Internet, you will only be able to test the links that point to other pages on your site if you have used relative URLs.
If you have used absolute URLs, clicking those links will cause the browser to connect to the Internet in search of that page, which it will not be able to find, since you have not transferred your site to your web host yet. (If you don't know why the situation is different with relative URLs, go back to chapter 5 and re-read the.) As such, instead of my customary section on testing, you should proceed to the where you will transfer your website to the Internet. I know that you have not yet created your feedback (or contact) form yet. The reason for doing things in this order will be explained in that chapter. Copyright © 2017-2018 Christopher Heng. All rights reserved. Get more free tips and articles like, on web design, promotion, revenue and scripting, from.
Free Bluegriffon Templates
You are here: » » » ». thesitewizard™ News Feed (RSS Site Feed) Do you find this article useful?
You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds. You can from my. Please Do Not Reprint This Article This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
Related Articles. New Articles. Popular Articles. How to Link to This Page To link to this page from your website, simply cut and paste the following code to your web page.
(Switch to your web editor's HTML source mode before pasting.) How to Create Multiple Pages for Your Website with BlueGriffon 2 and 3 It will appear on your page as.