The majority of websites on the Internet sport one or more pictures on their individual pages. The images may either be decorative, to make the site more visually appealing, or functional, to convey some sort of information. At the very least, you'll probably want to have at least one image on your site: namely, your site logo. If you're selling products through your site, you may also want to display a photograph or two of those products. This chapter shows you how you can insert these pictures into your web page.
Please note that this is the second chapter of the BlueGriffon 1 tutorial. If you have arrived here from outside thesitewizard.com, you may want to read chapter 1 since I will assume that you already know the things mentioned in that chapter. In addition, if you are completely new to designing websites, you should probably start from the beginning and read How to Make / Create Your Own Website: The Beginner's A-Z Guide.
By the end of this chapter, you will have inserted your website logo into your home page, and optionally added one or more pictures as well.
For this chapter, you will need the following images.
Many websites put a logo on every page of their site to serve as a sort of brand symbol. An example of a logo can be found at the top left hand corner of every page on thesitewizard.com, including this very page you're reading.
If you're creating a business website, and your company already has a logo, just use that same logo for your website. You'll need a digital copy of your picture in either the JPG, PNG or GIF format. If you don't have an electronic copy of that logo, scan it from your letterhead (or whatever) into your computer using a scanner, or at worst, take a picture of it with your camera. Remember that your picture has to be in one of the three formats mentioned above. Do not use any other format or it won't show up correctly on your website on many computers.
Otherwise, you'll just have to create your own logo. If you are not the artistic type, and you don't know how to do this, you may want to read my guide on How to Create a Logo for Your Site the Quick and Easy Way. The guide also gives some hints as to how large (or small) your picture should be in order to fit into your web page.
Incidentally, although you may be tempted to look for some royalty-free images on the Internet to use as your logo, it's generally best for things like your logo to use a completely original picture rather than get some clip art that other websites on the Internet are also using for their logo.
You may also want to get some photos, drawings or other images to display on your website. For example, those selling physical products may want to snap a few pictures of those items. Once again, make sure that your pictures are in one of the three web-friendly formats, namely, PNG, JPG and GIF.
If you are selling digital products, like computer software or electronic books, but still want some sort of picture to represent your product, one possibility is to draw a picture of your book or software box and put it up. You can do this using an image editor, including one of the many free picture editors around. Another possibility, if you're selling downloadable computer software, is to just show screenshots of your program using a screen capture program.
Those of you with extremely large images may need to use a picture editor to resize the image to a more reasonable size. While BlueGriffon does not prevent you from placing a gigantic picture on your site, a picture that is too wide or tall will cause your website to look somewhat odd, where your picture occupies practically the entire screen, pushing your words and other content off the screen.
To help you get a sense of what constitutes too big, many webmasters design their sites for a browser window of about 1024 pixels wide. This 1024 pixels include the width of both the columns of a two column website. As such, if you want a picture to fit into the top header portion of your website (the portion of your page that currently says "PAGE HEADER", but where your logo will eventually fit), but you don't want your users to have to scroll horizontally to see everything, then your picture cannot be wider than 1024 pixels.
Likewise, if your picture is to go into the right column of your website, where your content sits, it should be somewhat smaller than 1024 pixels since you need to account for the space taken up by your left column. There are no hard and fast rules on the sizes of your pictures, and since you're new to this, it may take a few trial-and-error runs to get a size that meets your satisfaction, so be prepared to experiment.
If you're planning to insert a small picture into the navigation column, the way thesitewizard.com has its logo at the top of its left column, your picture will need to be less than 160 pixels in width. This is because you set the left column width to 160 pixels when you created the layout in chapter 1.
In chapter 1, you created a folder to place your website files. For the work in this chapter, you will need to create a sub-folder within the folder you created previously. And you will need to copy all the images used on your website to this folder.
Note that this section is required. I know that some of you are thinking that you can just leave your pictures in whatever folder they are currently located in and it'll still work. If you do that, you will later find that your pictures do not appear on your actual website on the Internet even though they look fine in BlueGriffon. In other words, do NOT skip this section.
For Windows users, you can do this by opening the Documents folder on your computer as you did before. That is, if you're using Windows XP, click the Start menu followed by the "My Documents" line in the menu that appears. Windows Vista and 7 users should click the Start menu (the round button at the bottom left of your monitor) followed by the "Documents" line instead.
Look for your website folder in your Documents folder and doubleclick the folder to open it. A single file
should appear in that folder: the index.html file that you created in chapter 1.
Mac OS X users should do the functional equivalent for their system. That is, use the Finder to open the folder
that contains your index.html file from the previous chapter. Note that I will not repeat this
paragraph for the rest of the steps in this section, but please do the functional equivalent in Finder for
the other steps too. (Don't worry. Once we get back to using BlueGriffon, you'll be guided step-by-step
again. It's just that this section involves Windows Explorer and the Mac Finder, both of which operate differently,
and I don't have a Mac, so I can't help you.) The same goes for Linux users.
Right-click in a blank spot in that folder, just below the index.html file.
(To "right-click" means to click the right mouse button.) This will cause a pop-up menu to appear.
Click the "New" item on that menu, followed by "Folder" in the submenu that appears.
On Windows, a folder called "New Folder" will appear. Change the name "New Folder" to "images". Notice carefully
that I said to change it to "images" and NOT "Images" or "IMAGES". That is,
use small (lowercase) letters for the entire word. Do not use any other name. Do not add spaces to the folder name.
If you do, that name
will come back to bite you in the future.
Hit the ENTER key after typing in the new name, so that Windows does the actual work of renaming.
Doubleclick the folder you just created to open it. You should now see a blank window. Leave this window open.
Open a new Explorer (or Finder) window and navigate to the folder containing the images that you want on your website. For example, you can do this by clicking the Start menu, followed by "Computer" (Windows Vista/7)or "My Computer" (Windows XP), then navigate to whatever location you previously saved your pictures.
At this point, you have 2 windows open on your computer.
Right click the picture you want on your website. In the menu that appears, click "Copy".
Switch to the blank "images" window. Right click the blank space in the window to produce the pop-up menu again. This time, click "Paste".
If you have more than one picture, you can repeat this procedure of copying and pasting till all your pictures have been copied into the "images" folder.
Note: some of you might be tempted to simply drag all your pictures to the "images" folder. I didn't suggest this because the result may not be what you expect, depending on whether your original folder and your "images" folder are on the same drive, and which version of the operating system you're using. You may end up moving all the files, or copying the files, or even just making shortcuts pointing to those files (instead of actually copying the files). Unless you can recognise the difference between a shortcut and a real file, I recommend that you just follow my steps above, to be safe.
Close both folder windows. You don't need them any more.
If you don't already have BlueGriffon up and running, start it up. By default, it should automatically open the
web page you were working on previously. If this does not happen, and you're greeted with a blank screen,
click "File | Open" from the menu. For those who have forgotten my conventions, when I say to click "File | Open",
it means to click "File" from the menu bar, and when a drop-down menu appears, click the "Open" item on that menu.
This should cause a dialog box with a title of "Open a file or a template" to appear. Click the "Choose File..." button.
A window with the title "Choose a file" will pop up, allowing you to navigate to your website's folder if you're not
already there. Click the "index.html" file that you designed in chapter 1 once, to select it. Click
the "Open" button. You will be returned to the initial "Open a file or a template" dialog box that you saw. Click
the "OK" button.
We will now insert your site logo into the top header band of your website. If you will recall, this is the topmost horizontal stretch spanning the entire width of your web page. At present, it is occupied by the words "PAGE HEADER".
Click your mouse somewhere in the line that says "PAGE HEADER". (It doesn't matter where you click it, so long as it's somewhere in those 2 words. If you're not sure what to do, just click the letter "A" in "PAGE".) This should put your text cursor in that line. Delete the words "PAGE HEADER" using your Delete or Backspace key on your keyboard.
Leave your cursor on that line, which should now be blank. Do not click elsewhere on the page or move the cursor away from that line.
Click "Insert | Image" from the menu.
A dialog box with the title "Insert an image" will appear. Click the folder icon next to the blank field for "Image location".
A new window with the title "Select image" should appear. You should be able to see your "images"
folder in that window. Doubleclick that folder to open it.
The window should now show all the files that you had previously copied into this folder. Select the file that is to be your website's logo by clicking it once.
Click the "Open" button.
You will now be returned to the "Insert an image" dialog box. The checkbox for "Make URL relative to page location" should now be checked. If it is not, click it once to put a tick in it. At the bottom of the dialog box, BlueGriffon will show you a preview of your image. If your picture is very big, the preview window will only display a small section of your picture, with some parts cut off. Don't worry about that. Your real picture is still intact. The preview window is there merely so that you can check that you've selected the correct image file. If you find that you've got the wrong file, click the folder button again so that you can select the correct picture.
Your text cursor should currently be in the "Alternate text" field. If it is not, click once in the blank field beside those words to put the cursor there.
Now type "Site logo" (without the quotes) into that field. Alternatively, you can type "Example.com's logo" (without the quotes), replacing "Example.com" with your website's name.
The words you type into the "Alternate text" field are used when visitors who are blind visit your website. Such people use a type of software called a screen reader to read aloud the words on your website. Since those visitors can't see your picture, the software will read your description of the image instead.
The "Alternate text" field is also used by the search engines. Since search engines are for all intents and purposes blind, and need words to know what your website is all about, they too rely on that field to know what your image shows.
For these reasons, it's important that you always put a brief description in the "Alternate text" field for the pictures you display on your site. Your description does not have to be a long novel-sized narrative about your picture. A concise phrase mentioning what the picture is about is usually sufficient. For things like your website's logo, just saying "Logo" or "Site logo" is more than enough to let your visitors (and the search engines) know what is in that picture.
Click the "OK" button at the bottom of the dialog box when you're done.
Your picture should now appear in the header section of your web page.
If you're new to creating websites, chances are that you will find that the picture is too wide, too thin, too tall, too short or not to your liking in some other way. Relax. This is very common for newcomers. It occurs because you have no previous experience to guide you. Do the following to get rid of the picture.
Those who don't want to delete their picture can just skip to the next section.
Click the picture once.
Note: a bug in the version of BlueGriffon that I used (version 1.7.2) causes the picture to be displayed on the screen twice when you do this. As far as I can tell, this is just a visual glitch. Your picture will not actually be displayed twice in a real web browser. (In fact, if you click somewhere else on your page, you will find that the duplicate image disappears.)
Hit the Delete key on your keyboard. The picture will disappear.
You can then return to your picture editor and resize or touch up your image. When you're done, re-insert the image using the procedure described earlier.
At this point, your site logo should be flushed to the left on your web page. Unless your picture is very wide, chances are that you will want to centre ("center" in US English) it so that your page doesn't look unbalanced. Note that if for some reason you don't actually want to do this, feel free to skip this section.
Click the logo once. As mentioned before, due to a bug in version of BlueGriffon that I used (1.7.2), this will cause the logo to appear twice on your page. Ignore the visual glitch and go onto the next step.
Now look at the top of the BlueGriffon window. Notice that under the menu bar, there are 3 rows of toolbars, the top one with large clickable buttons on them, the middle one with a mixture of drop-down boxes and small clickable buttons, and the bottommost one with 4 drop-down boxes. When you hover your mouse over any of those buttons or boxes, a pop-up tooltip appears, describing the function of those buttons or boxes.
Click the small button that has the tooltip "Align center" in the middle toolbar. It should be just next to the small button highlighted in orange, on the line that has buttons that say "B", "I" and "U". See the picture below to see which one I'm referring to if you can't find it.
When you click the button, it will be highlighted in orange, and your logo will appear centred on the page.
Inserting images into the other parts of your web page basically follow the same procedure as inserting your site logo. However, you have to decide how you want your picture to appear.
Your picture can appear by itself without any words flanking its left or right. You can see an example of this in the picture above showing you the location of the "Align center" button in the BlueGriffon toolbar.
You can also have the words of your paragraph flowing to the left or right of your picture. (There's a picture of this later in this article.)
If you want your picture to stand in a space on its own, without words wrapping around it, create a new (empty) paragraph before you insert the picture. You can do this by hitting the ENTER key (or RETURN key on the Mac) to move the existing paragraph down one line. Then use the arrow keys on your keyboard to move your text cursor back up to the empty paragraph you just inserted. You can then put your picture in that spot using the "Insert | Image" menu item as you did before for your site logo. Remember to give a brief description of your picture (eg, type in your product name) in the "Alternate text" field in the "Insert an image" dialog box that appears.
For those who want the picture to stand to the left or right of the words in a particular paragraph, do the following.
Put your text cursor at the beginning of the paragraph in question. (You can do this by clicking somewhere in the paragraph and use the arrow keys on your keyboard to move the cursor to the start of that paragraph.) Do this even if you want the picture to be flushed to the right.
Insert the picture in the usual way with the "Insert | Image" menu item. See the above section on adding a site logo to your website if you've forgotten how to do this.
Your graphical image will now be inserted in a somewhat awkward position into your page. (See picture below.)
Do not move your text cursor. Make sure the blinking text cursor is immediately after the picture that you've inserted. If you can't find it, or are not sure, click somewhere in the paragraph containing your picture and use the arrow keys on your keyboard to move the text cursor so that it is immediately after your picture and before the first word in the sentence following.
Now comes the tricky bit. BlueGriffon version 1.7.2 (the latest version at the time I wrote this chapter) does not appear to provide a way to change the properties of the picture directly from the user interface. As such, we will need to manually change the underlying HTML code of your web page. Don't worry. I'll take you through all the steps you need to take.
Look at the lower half of the BlueGriffon window. Notice that near the bottom, there are two buttons, one labelled "Wysiwyg" and one "Source". At present, you're looking at your web page using the "Wysiwyg" mode. Click the "Source" button to switch to the "Source" mode.
The web page that you have been familiar with will seem to disappear, replaced by a whole bunch of gobbledygook. This mess of cryptic text is known as HTML. Believe it or not, this is actually what your web page looks like under the hood.
Look for the blinking text cursor that you carefully positioned earlier. Immediately before the text cursor, you should be able to see a line that says something like:
Instead of the words "your alternate text", you will see whatever words you entered for the "Alternate text"
field when you inserted your picture, and instead of "your-picture-file-name.png", you will see
your image filename.
Move your text cursor (using the arrow keys on your keyboard) so that it is positioned just before the
closing angle bracket ">" (the one that looks like a greater-than sign). That is, move
the cursor so that it is between the closing quotation mark and the closing angle bracket.
Now hit the space bar on your keyboard once. This will put a space between the closing quotation mark and the angle bracket. A pop-up may also appear with some suggestions of what you can use. Ignore it.
If you want your picture on the left of the page, with the words wrapping around to the right of the image, type the following words:
If you want your image on the right of the page, type the following instead:
Use only one of the above "style" snippets. Do not use both.
WARNING: when you insert the snippet, make sure you insert it exactly as it appears. Do not change the semi-colon (";") to some other punctuation mark. And make sure you put BOTH the opening and closing quotation marks correctly. If you're typing fast, it's easy to make a mistake and put only the opening quote without the closing quote or vice versa. Failure to put matching quotation marks will cause BlueGriffon to mangle your web page beyond repair once you switch back to the "Wysiwyg" mode.
Notice also that "float: left" goes with "padding-right". Similarly, "float: right" goes with "padding-left".
Before you switch back to "Wysiwyg" mode, check to make sure that the line you've inserted is correct. It should look something like the following:
The only differences between your line and mine should be your alternate text, your picture filename, and possibly your use of "float: right; padding-left: 5px;" instead of "float: left; padding-right: 5px;".
Make sure that the words in the paragraph following your graphical image are in black and not red. If the words
are in red, it means that you have a missing quotation mark somewhere, or perhaps you accidentally deleted
the closing angle bracket (">").
Don't skip this step. If you make a mistake, BlueGriffon will try to fix your code when you click the "Wysiwyg" button, but it will do it wrongly, creating a disaster that you cannot easily undo.
Once you're sure you inserted everything correctly, click the "Wysiwyg" button to return to the "Wysiwyg" mode.
Your picture will now appear with the words wrapped around it.
(Optional) If you find that your picture is too close or too far to the words on the left or right, click the "Source" button
again to return to the HTML code. Then change the "5" in the portion "padding-right: 5px;""
or "padding-left: 5px;" to
some other number. That is, if you want the picture to be closer to your words, change it to a smaller number, like
"4". If you want more horizontal space between your picture and your words, change it to a bigger number, like
"8".
It's also possible to add more vertical space between the picture and the words above or below the picture, by changing your line to something like the following.
Notice that I've added "padding-bottom: 5px;" to the style attribute. Observe also that
the addition occurs inside the double quotation marks for style, and immediately after the semi-colon
for the "padding-right: 5px;".
If what I said above is too confusing, or you're not sure if it's needed, just skip this part.
Save your work using "File | Save".
Start up FileZilla and connect to your website. If you've forgotten how to do this, please see chapter 1.
Compare the contents of "Local site" (left) panel with those of the "Remote site" (right) panel. Notice
that the right panel only has one file, "index.html", which you uploaded in chapter 1.
The left panel however has an "index.html" file with a later time-stamp and a folder
named "images".
We need to upload everything in the left panel so that the contents of the right panel mirror exactly that of the left panel.
Chances are that you will also have a file called "index.html.bak" in the left panel. You
do not have to upload anything that ends with a ".bak" extension, since these are just old
versions of your "index.html" file. Whenever you make changes to an existing web page and save
the page with BlueGriffon, it will save a copy of the old version of your web page with a ".bak"
appended to the filename. This is just a precaution in case you make a terrible mistake that you regret. It
at least gives you a chance of recovering your old file.
Drag the "images" folder from the left panel to a blank space in the right panel just below
"index.html". By "drag", I mean that you should click your left mouse button while the arrow is pointing
at "images". Do not release the mouse button. Continue to hold the button down while moving the
mouse so that the arrow is in the right column, in a blank space below "index.html". Your mouse
cursor should change so that there is a square box with a plus ("+") sign just below the arrow. Release the
mouse button.
FileZilla will proceed to create a folder called "images" on your web host's computer, and
upload everything in your local "images" folder to the web server.
Now you will need to upload your modified "index.html" page. Drag the "index.html"
file from your left column to the right. Alternatively, you can also doubleclick the file as you did in chapter 1.
A dialog box with the title "Target file already exists" will appear. By default, the "Overwrite" radio button in the Action section on the right should be selected. If it is not, click to select "Overwrite". Then click the "OK" button.
When you're done, click "Server | Disconnect" from the menu.
Click "File | Exit" to quit FileZilla.
Now fire up your web browser and check your site. Your updated home page, together with the images should appear.
If you see your web page, but not the images, it means that you've either forgotten to upload the pictures, or you
did not upload them to the right place. For example, it can happen if you directly uploaded the pictures to
the same folder as your "index.html" file instead of into the "images" folder on
your web server.
If you see the old version of your web page, instead of the one you modified for this chapter, it means that you uploaded your new web page to the wrong folder on your web host. Another possibility is that your web browser is showing you a cached version of your page. Web browsers often save a copy of the pages they access so that they can speed up your browsing experience. To override this behaviour, click the refresh/reload button on your web browser.
In the next chapter, you'll learn how you can change the appearance of the text on your web page. That is, you'll learn how to change fonts, use bold and italics, and change the colours of your words.
Copyright © 2012-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All BlueGriffon Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Add Pictures and a Logo to Your Website Using BlueGriffon Web Editor
