In this chapter of the Serif WebPlus X2 tutorial, you will learn how to add pictures to your web page. This includes putting a site logo on your web page, placing any additional pictures that you may want on your site, as well as inserting a background image into your page.
Note that this is the second chapter of the Serif WebPlus X2 tutorial series. If you have not read chapter 1, and want to start at the beginning, please see Chapter 1: How to Design Your Website with Serif WebPlus X2. I will assume here that you have carried out all the steps in that chapter.
By the end of this chapter, you will have added your website's logo, product photos and/or any other pictures you want to your web page. Those who like to have a picture form the backdrop to your page's content will also have added that background image. The chapter also introduces the concept of a stacking order to your objects and shows you how you can manipulate it to create the effect you want.
Besides having the Serif WebPlus X2 web editor, you will also need the following pictures.
Most websites, include thesitewizard.com, have a logo that appears on every page on the site. If you don't already have a logo, and are not sure how you can create or get one, please read the How to Create a Logo for Your Site the Quick and Easy Way article. You should also read the article if you're not sure how big or small your logo needs to be.
If you want other pictures to appear on your web page, you will also need to get them ready before starting out on the steps below.
Useful pictures to have on your web page include photos of your products. There's nothing like a photo of a tangible object to underscore to your users that they are getting their desired product in return for using your shopping cart.
Even if you're selling downloadable electronic products, like an ebook or a computer program, you might want to consider creating a 3D picture of either your ebook or a software box. You should of course make it clear to your visitors that they are buying an electronic product, and the picture is just for show, otherwise some of them may expect you to ship them a physical product. Pictures of such things can be created manually using any drawing or painting software, such as those found on the Free Drawing and Painting Software, Image and Photo Editing Programs page, or using specialized software that draw software boxes or book covers.
Note that the picture here of the Beginner's A-Z Guide to Starting Your Own Website is just an illustration of what you can do for an ebook. There is no such physical book. In my case, however, I'm not actually selling an ebook either. It's just an example for my point in this paragraph. The entire guide is available online for free at https://www.thesitewizard.com/gettingstarted/startwebsite.shtml
Some people like to put a background image on their web page, so that the picture forms the backdrop while their main content appears superimposed on it. If this is what you want on your site, get the background image ready before you begin the procedure below.
Important: all pictures that you want to place on your website should be in the GIF, PNG or JPG file format. This is the case whether you want to use the picture as your logo, product photo or background image. Do not use any other format.
Start up Serif WebPlus X2 and open the site definition file that you saved in the previous chapter. This is the "Site1.wpp" or "example.wpp" or whatever file ending with ".wpp" that you saved. If you see the Startup Wizard (pictured below), you can open the file by clicking the "Open Saved Site" link in the centre ("center" if you use US English) column and looking for your site in the either the "History" tab or the "Folders" tab. Otherwise, click the "File | Open" menu from the WebPlus menu and look for your file in the dialog box that opens. Whichever method you use, when you locate your file, click it once to select it, and then click the "Open" button.
For those who have forgotten, when I say click "File | Open", I mean to click the "File" menu item (at the top of the Serif WebPlus X2 window), followed by the "Open" item in the menu that pops up.
You should be able to see the site that you created in the previous chapter. Before you carry on, first decide where you want to place your logo on your web page. One possibility is to put it on the top left hand corner of your website, the way thesitewizard.com does. Alternatively, if your logo is too big to fit in one corner, you may want to put it at the top of the web page spanning the entire width. If you decide to put it at the top of the web page, and you find that the text that you inserted in the previous chapter is in the way, just click the text boxes once (to select it) and drag it out of the way before you insert the picture. (If you've forgotten how to do this, return to chapter 1 of the Serif WebPlus X2 tutorial to refresh your memory.)
Once you have decided on the location for your logo, make sure that no text block on your web page is selected by clicking a blank space on your web page (eg at the bottom of the page). If you see the 8 resizing dots along the edges of any outline of your text blocks, it means that it is still selected. Click outside those boxes in a truly blank space on your page (and not just the small space between your paragraphs).
Insert the picture by clicking the "Insert | Picture | From File... Ctrl+G" menu item. A dialog box will open. Go to the folder where you have saved your logo file, select it and click the "Open" button. Your cursor should change its shape to indicate that a picture has been loaded. Click the spot on your web page where you want the logo to appear. WebPlus will immediately deposit the picture in that area.
If the picture is not in the correct place, click the picture and drag it to the correct spot.
If your picture is the wrong size, or if you want to change something in the picture, click it once to select it, and hit the DEL key on your keyboard. Then go back to your picture editor and resize the picture or touch it up. When you're done, return to WebPlus and reinsert the picture again.
Note that although it may appear to you like it's possible to resize the picture in WebPlus, it's best to use a picture editor for the task. By default, WebPlus does not physically resize your picture. When you "resize" the picture by dragging the handles in WebPlus, all you get is the illusion that it has resized your photo or image. It inserts some hidden information into your web page to tell the web browser that the picture is to be shown with the new dimensions you specify. Then when your visitors load your page, their browsers will resize the image on the fly to display the smaller (or larger) image. Since browsers aren't as sophisticated as a true graphics editor, your picture may end up not being as sharp as it could have been had you physically resized it yourself with an image editor.
Another benefit of using a true graphics editor to do the resizing is that if you make the picture smaller, your file size will also shrink correspondingly, making your website appear more responsive to your visitors. "Resizing" using WebPlus leaves the file at its original size since no real resizing takes place.
When you've finished adjusting the position of your picture, right-click the picture to get a menu. Click the "Image Export Options..." item in that menu. Click the "Alt and Title" tab at the top of the dialog box that appears. Uncheck the "Use default ALT text" box, and click your mouse in the blank line underneath that box. Enter a description for your picture here. For example, since this is your website's logo, type "Example Company's logo" if your website's name is "Example Company".
For the curious, this "ALT text" is meant to describe the picture for visitors who are blind, and cannot actually see your picture. It also serves to tell search engines what your picture is all about, since search engines are for all practical purposes blind too. For a visitor reading your page using a graphical browser, with images enabled, the text will not be visible, so you don't have to worry about it spoiling your visual layout. Note that even though it's not mandatory that you do so, you should always try to give a textual description of your picture in your ALT text for all your images.
If you like, you can also type a caption into the "TITLE text" field. This field is optional too. In many browsers, the words you type in the field will be displayed as a tooltip window when your mouse cursor hovers over the picture. You can see the effect of this by mousing over any of the pictures in this article, or over thesitewizard.com's logo at the top left hand corner of the page.
When you're done, click the OK button.
Look over the page again, and if you're satisfied, save your site definition by clicking "File | Save".
Sometimes you want to insert a picture into your web page so that the text flows around it. For example, if you look at my picture of the Beginner's Guide book above, you will notice that the text flows around the book on its left.
To accomplish this effect in WebPlus X2, click the spot in your text block where you want the picture to be inserted. For example, if you want it to be inserted on the left or the right of your second paragraph, put your text cursor before the first letter of your second paragraph. That is, click somewhere in the text block, and use the arrow keys on your keyboard to move the text cursor to the location where you want the graphic. Then load the picture the same way you did with your site logo ("Insert | Picture | From File... Ctrl+G").
WebPlus X2 immediately places the image at your text cursor location, within your text block. To make the text flow around it, right-click the image once to display a pop-up menu. If you want the picture to be aligned to the left of that paragraph, select "Align | Left" from the menu. If you want it to be aligned to the right (the way I did with my picture of the book above), select "Align | Right". If you change your mind, you can always right-click again and select one of the other "Align" options.
When I say to "right-click" something, eg, to right click a picture, it means to move your mouse cursor over that picture, and then click the right mouse button.
To insert a background image into your web page, so that the picture becomes the backdrop to your main content (see picture below), first make sure that your text box is not selected. That is, click a blank spot on the page where there is no text block or picture object. Then select the "Insert | Picture | From File... Ctrl+G" menu and click the location on the page where you want the picture to be displayed.
When you do that, you will notice that your image will be superimposed over any existing text or graphics on your page. That's okay. Before we fix that, drag the image to the appropriate spot on your web page where you want it to be.
Once you're satisfied with the position of the image, right click your image. In the pop-up menu that appears, click the Arrange item. A submenu will appear. Click the "Send to Back" item.
The picture will be moved behind any existing text or picture that you have on the page.
The insertion of the background image as described above uses one of the tools available to WebPlus X2 users: the manipulation of the stacking order of items on your web page.
The items on your web page, both the text and graphics blocks are placed on your web page in layers. It is possible to place any block of text or picture on your page overlapping another block, and then adjust whether one block is underneath or above another block on the page. Put another way, the blocks (of text or images) are placed on each other in a sort of stack, and you can adjust the order of the stack, so that certain blocks are on top of other blocks.
This is useful to create a variety of effects, limited only by your imagination. The most commonly-used of these effects is the insertion of a background image. For the background image effect, the picture is placed bottommost in the stack and your foreground text and pictures placed above it. Your background picture can then be seen through the gaps in your foreground text and pictures (see the picture in the above section).
To arrange the stacking order of your various blocks (or "objects" as WebPlus likes to call them), look again at the Arrange menu item. You can access the Arrange menu item by right-clicking any block to get the pop-up menu. The "Arrange" menu is also available at the top of the WebPlus window.
The "Bring to Front" menu item lets you move the block or object to the top of the stack, to the foreground, above all other blocks that may be overlapping. The "Send to Back" does the reverse: it places the block underneath all the other blocks that are overlapping. The "Back One" and "Forward One" items move the block down or up one level in the stack, respectively.
Go ahead and try it out on any overlapping block on your page, so that you can see the effect it has on the text and graphics on your page. If you're afraid that you'll mess your page in a way you cannot recover, save the page first before clicking around (that is, use "File | Save" from the main menu). That way, in the event that you make too many errors that you don't know how to undo, simply close your mangled page without saving it (eg, by using "File | Close"), and reload your saved copy ("File | Open") to restore everything back to the state you saved earlier.
Another way to reverse a mistake you make is to hit Ctrl+Z on your keyboard. That is, while holding down the "Ctrl" key, type "z". Or use the "Undo" menu item in the main "Edit" menu.
Now that you understand with the concept of stacking order in WebPlus X2, it is possible to address the problem of deleting a background image. What if, after inserting the background image and sending it to the lowest layer in your page's stacking order, behind the text, you suddenly realize that the image is not appropriate? For example, you may find that the colours are too dark, making it difficult to read the foreground text. If you try to click on the image to delete it, you will find that you're only clicking the topmost layer, your text box or whatever block that happens to be in the foreground.
To delete your background image, you will need to return it to the foreground, above all the other objects or blocks that are stacked above it. There are probably many ways to do this. One way is to send your current foreground block to the background using the "Arrange | Send to Back" menu. Do it until your background image is topmost. Then delete it in the usual way. The "Arrange | Set Object Order" menu item (from the main "Arrange" menu) can also be used to sort the stacking order, but I leave that alternative method for you to explore yourself.
When you're satisfied with your changes, save your work and publish the site to your web hosting account. If you've forgotten how to do this, please return to chapter 1 of the Serif WebPlus X2 tutorial.
Then check out your site in your browser.
In the next chapter, you will learn how to style the text on your web page, such as to change fonts, make your text larger or smaller, make words bold or italicize them, and change the colour of your text. We will also learn how to avoid the problem of large text blocks causing usability problems in WebPlus X2.
Copyright © 2009-2019 by 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 Start / Create a Website: The Beginner's A-Z Guide » List of All Serif WebPlus 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 Images to Your Website in Serif WebPlus X2
