3.5 Inserting Images
To insert an image in a page, put the cursor where you want it and press: 
.
This will open a window like:
Now you have 2 options:
-
Insert an image from another site's server
You just have to write the image URL (you can get it by right-clicking the other site image and selecting properties in most browsers).
When someone visits your page, the image will come from the original server.
This behavior is not recommended in many cases, because:
- If the image get deleted or changed, it will affect your page too.
- Since images can be relatively huge files, you will be stealing the resources of the server that hosts the image and saving the resources of your own hosting.
- Some servers restrict the images access to their own pages, so you will never get that picture displayed in your site unless you copy it.
Although, it is useful to link the page images of one site to another if you control both sites. - If the image get deleted or changed, it will affect your page too.
-
Insert an image stored in your server
Click the Browse Server button in the Image Info tab of the Image Properties window.
It will open a new window with the folder and file listing at your site's image folder.
Just click a file to select it, or click a folder to browse further.If you need to upload a new image file to your server click Browse... at window's bottom and select an image file in your computer. Then press Upload and after a while, the file will be displayed in the folder currently opened in the file browser window.
You can also create new folders in your site's image folder by pressing the Create New Folder button.
After uploading you image, just click its name on the server file list: the file browser window will close and the URL field at the Image Properties Page will be automatically filled.
Just press OK and your image will display in the page editor.
Note: The image file browser allows you to upload only the image formats:
File Type
File Extension JPG - Joint Photographic Experts Group .jpg or .jpeg
GIF - Graphic Interchange Format .gif
PNG - Portable Network Graphics .png
BMP - Microsoft Windows Bitmap .bmp
Although BMP files are supported by the file browser, we discourage its use because:
-
Usually generates huge files
-
It is a proprietary Microsoft image format, which is not supported by some browsers
The Image Info tab (in the image properties window) has some other options that can be useful for you:
-
Alternative Text
This is the text that will appear if the browser cannot display the picture (resulting from a broken link or a server error for example). This text will also be displayed in most browsers if you pause the mouse cursor over the image for a few seconds.
-
Width and Height
Let you select a display size different from the original picture size. In most cases it is better that you change your image size with an image editor software at your computer before upload the image to the server.
Avoid use huge images when you only need to display a little thumbnail because it will make your page slower to show to visitors. If you need to display a thumbnail, create it with an image editor and upload it.
The lock
lets you maintain the image proportions so no distortion will occur.
You also have a reset
button that can reload your image real dimensions.
-
Border
This field lets you specify a border width for your image, in pixels. If you leave it blank no border will be displayed.
If you insert a link in your picture and don't want a border to appear, must put '0' at the border field. Please see section 3.4 for how to insert a link in your images.
-
HSpace and VSpace
Let´s specify the space between the image and adjacent text, horizontally and vertically.
-
Align
Specify the image alignment to the page text. You can try all the settings and preview the result in the preview area of the Image Properties window.
Example
Now we will use the 3.4 section sample and add some images:
|
Let´s start by inserting a logo image.
You will insert an image in the top left cell of the main table, so you must have an image smaller or equal to the size you specified to that cell (refer back to section 3.2 for details).
First delete the 'Site Logo Here' but leave the cursor there. Then press the image button .
In the Image Properties window press the Browse Server button.
Click the Browse... button
Browse your computer for the logo image you created and press the Open button.
Back to the Browse Server window, press the Upload button
Wait a while for the image upload.
When it finishes, your file name will appear in the browser file list (see last picture)
Click it with your mouse, the browser window will close and the URL field at the image properties window will be filled:
Press the OK button and your logo picture will be inserted in your page:
|
Now we will put pictures with links in the space reserved for Ad 1 and Ad 2.
Just delete the 'Ad 1 Here' and 'Ad 2 Here' placeholders and insert your images. You can even use animated .gif pictures:
Site Name Here Links
Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text Content Text
Content Text Content Text Content Text
To insert a link in the images you can use the image properties window. After select the image file, navigate to the Link tab and fill the URL field:
Note that in this window you have to include the protocol ('http://' in this case) in the URL.
You can also use the link button 
to insert a link in an image like explained before for text. Just select the image with a click of your mouse and press the link button in the toolbar.
Use the link properties window to specify your link and target as you do for text links:
We recommend you always use the link button, since it can be used for all types of link.
You may even insert a link in an image and text mix, selecting the image and text and pressing the link button.
After inserting the ads links you will get something like:
|
Note that your browser is displaying a rectangle around your images to notify you those images have links on them.
If you don't like those rectangles around your images, right click them and select Image Properties. In the image properties window, type 0 (zero) in the Border field:
Close the Image Properties window pressing the OK button and click the Save & Preview button.
Now your page should look like this:
|
Try to click the ads images.
Last
See also:
Copyright © AWE Editions, Lda. 2006
This page was created with AWE Easy Web Site Creator