7. Adjust and process images

I. use special effects
In FrontPage 2000, you can use the command button on the special "image" toolbar to perform simple processing on images on the webpage. For example, set the transparent color, set the concave and convex effects, adjust the contrast, brightness, cut, and add text on GIF images.
　　1. image toolbar
After an image is selected, the "image" toolbar appears on the screen. Right-click the toolbar and select "image". The image toolbar is displayed.
The image toolbar usually appears at the bottom of the FrontPage window when you select an image, but you can also move it to another position in the window. The name of each button on the toolbar is shown in. Moving the mouse over each button also displays its name.

Name of buttons in the image toolbar

　　2. Set the background color to transparent.
Set the background color of an image to a transparent color, so that an image can be truly integrated with the page. Select an image, click the "set transparent color" button in the image toolbar, and then click the blank area in the image. Then, the color of the selected area becomes transparent. Is the situation before and after the transparent color settings.

[Note] only images in GIF format can be set with a transparent background color. In addition, the background of the original image must be a single color, and there must be no other color interference. In some areas is not "Transparent", that is, the original image is "not clean.
　　3. Set the image to "concave-convex effect"
Select an image and click the "Concave and convex effect" button on the image toolbar. The border of the image is concave and convex, so that the image looks stereoscopic.

　　4. "crop" Images
Sometimes, the image is too large, and we only need a small part of the image. You can only scale down the image by dragging the image control point with the mouse. You can use the "crop" button on the image toolbar to crop the image without opening the image processing software. The procedure is as follows"
1) Select (click) the image you want to crop and click this button to display a dotted box that is slightly smaller than the image. The four sides and the four corners have eight control points:

2) drag one of the control points to make the dotted box contain only some images:

3) Click the "crop" button again. The image contains only the content in the dotted box.

The functions of other buttons are as follows:
● "Insert an image in the file" button. It is equivalent to the "image"> "from file" command in the "insert" menu. Click this button to open the "insert image" dialog box.
● "Text" button. Adds text to an image. However, this image must be in GIF format. If it is not, FrontPage will automatically convert it into a GIF image file.
● "Automatic thumbnail" button. Used to generate a thumbnail of the selected image and create a hyperlink to the image in the thumbnail.
● "Absolute positioning" button. When defining a layer, set the absolute position of the image on the current layer.
● "Move up layer" button. When defining a layer, move the image up to a layer.
● "Move down a layer" button. When defining a layer, move the image down a layer.
● "Rotate left" button. Rotate the image 90 ° counterclockwise.
● "Rotate right" button. Rotate the image 90 ° clockwise.
● "Horizontal flip" button. Flip the image along the vertical line.
● Vertical flip button. Flip the image along the horizontal line.
● "Add contrast" button. Increase the contrast between the foreground and background colors.
● "Reduce contrast" button. Reduces the contrast between the foreground and background colors.
● "Add brightness" button. Increase the brightness of the image color.
● "Reduce brightness" button. Reduce the brightness of the image color.
● "Black and White mode" button. If the current image is in color, click this button to change the color to black and white.
● "Erosion" button. The image color can be reduced to form a "watermark" effect.
● "Sampling again" button. After adjusting the image size, click this button to obtain the adjusted image.
● Select button. Select an image from a webpage.
● "Rectangular Hotspot" button. You can draw a rectangular hotspot area in the image for hyperlink.
● "Circle Hotspot" button. You can draw a circular hotspot area in the image for hyperlink.
● "Polygon Hotspot" button. You can draw a polygon hotspot area in the image for hyperlink.
● Click "highlight Hotspot. The hotspot area can be highlighted in the image.
● "Restore" button. Click this button to restore the status before the image is edited.
[Note] After special effect settings, the "Save embedded file" dialog box appears when saving the webpage. You must save the image file again to save the effect.
Ii. How to Reduce the image file size and reduce the image download time
1. Reduce the image file size by re-sampling
When an image file is large, not only does the space occupied by the homepage increase rapidly, but the download time of the webpage also increases. The customer may lose patience, thus greatly reducing the number of visitors to the website. Therefore, web page makers must learn how to make image files smaller:
Click the image, and then drag the control point on the image to adjust its size. Drag the corner control point to keep its aspect ratio unchanged in hours.
Adjusting the image size only changes the display mode of the image in the Web browser of the site visitor. Therefore, if you only adjust the size of a large image to a smaller size, the image file size is still the same as the original size. To reduce the image file size and download time, you must resize the image and re-sample it. Ressampling images reduces the file size to match smaller sizes.
Re-sampling is simple. In the webpage view mode, select (click) an image that has been adjusted, and click the "re-sampling" button on the "image" toolbar.
To reduce the image size, you must save the image file again in the "Save embedded file" dialog box when saving the webpage.
[Example] Insert a large image file "Happy New Year" in the "image exercise" page, and then use the method of reducing the image size and increasing the size of the new sample to make the image file smaller.
1) Open the "image exercise" webpage.
2) move the cursor to the image to be inserted, and click "insert"> "image"> "from file" (bottom left ).
3rd, select the image file "newyear.jpg" and click "OK" (bottom right ).

4) Click "View"> "folder" to change the window to "folder" view. Find the latest newyear.jpg file in the saved imagescript folder. The file size is 58kb.

5) Click the image, move the mouse to the control point in the corner, and drag it to make the image smaller:

In this case, the newyear.jpg file size is still 58kb in the folder.
6. Click "re-sample" on the "Images" toolbar and click "save". The size of the "newyear.jpg" file remains unchanged.
". In this case, the size of the newyear.jpg file is changed to 12 kb.

　　2. Reduce image quality and reduce image files
By reducing the quality, the compression ratio of image files is increased, and the file size is greatly reduced. Only JPEG images can do this. Non-JPEG images must be converted to JPEG first.
In webpage view mode, right-click a JPEG image and click "image attributes" in the shortcut menu ". The "image properties" dialog box is displayed. The "general" tab is displayed.

General tab of the "image properties" dialog box

As shown in the figure, for JPG files, "Jpeg" is automatically selected in the "type" column ". The quality parameter of the image is displayed in the "quality" box next to it. The default value is 75. Value Range: 1 ~ 100. The larger the value, the better the quality, but the larger the image file. You can change this value to a smaller value to reduce the image quality. Click "OK" to complete the settings, save the webpage, and save the image file again in the "Save embedded file" dialog box to reduce the size of the image file. This method is used to reduce the size of image files. By reducing the "quality" value from 75 to 30, the file size can be reduced to about half of the original size. From the previous images, we can see that this method has a small impact on the quality of continuous images, while it has a significant impact on text images with different contour.
[Practice]
Create a new webpage in the "Web page exercise" on the local website and insert two large images. Check the file size in the "folder" view. Then, the size of the first image is reduced, and then the "re-sampling" command is executed to reset the attributes of the second image (which must be a JPG file, reduce its "quality" value. Let's take a look at their file sizes. At last, save the webpage and save the image file again to see the reduction of the image file.
　　3. Use a thumbnail
Images are often downloaded for a long time, especially for visitors who use low-speed Internet connections. Therefore, people generally do not insert large and exquisite images into webpages. However, in some special situations, some clear images are often needed. To solve this problem, FrontPage provides the image thumbnail function.
A thumbnail of an original image is used in a webpage to replace the original image. The area and number of file bytes are much smaller than the original image. At the same time, the hyperlink between the thumbnail and the source image is automatically created. Ordinary viewers only need to browse the thumbnail without affecting the display speed of the entire webpage. To see a viewer with clear and large images, click the thumbnail to open the source image immediately.
It is easy to set the image to a thumbnail. Select the image. Click the automatic thumbnail button on the image toolbar. The selected image is reduced to a small image with a blue box around it. At this time, the FrontPage has created a hyperlink pointing to the original large image of the thumbnail. Open the webpage in the browser and click the thumbnail to open the large image.
When you save a webpage file, you will be prompted to save the thumbnail (and the source image ). By default, the thumbnail file name is appended with "_ small" after the original image file name, with the same extension.
It is worth noting that not all images can be set as thumbnails. If the image to be processed is smaller than the default size of the thumbnail, or the image has a hyperlink, or if the image is a GIF animated image, the FrontPage cannot generate a thumbnail.
[Example] Set the "sanjiangkou" Image in "image exercises" on the webpage to a thumbnail.
1) Open the "image exercise" Page and click "sanjiangkou.

The "sanjiangkou" image on the webpage is selected

2) Click the automatic thumbnail button on the image toolbar. The selected image is reduced to a small one.

Figure 3.26 set the image to a thumbnail

3) Click "save" on the commonly used toolbar to save the "image exercise" webpage. The "Save embedded file" dialog box is displayed:

Note: The thumbnail file name is added with "_ small" after the original image file name "SJK", and click "OK" to save the file.
4) Select "preview in Browser" in the "file" menu. The "sanjiangkou" image is just a thumbnail. However, you can click it to see the beautiful source image.
[Thumbnail settings]
Default values can be used for thumbnails. However, if you are not satisfied with the default value, for example, you want the thumbnail to be larger. You can change the value. The procedure is as follows:
1) Click the "Tools" menu, select the "webpage options" command, open the "webpage options" dialog box, and select the "Automatic thumbnail" tab, as shown in.

2) set three options on the "Automatic thumbnails" tab of the "webpage options" dialog box.
You can set the thumbnail size in the "set" and "pixel" boxes. The "Settings" box uses that parameter to determine the size (the default value is "width"), and the "pixel" box determines the value of this parameter (the default value is "100 "). If you change the value of the "pixel" box to 200, the thumbnail will be doubled (the height of the thumbnail will automatically increase proportionally as the width increases ). The file size and download time of the thumbnail are also increased.
Select the "Border width" check box and select the Border width of the thumbnail in the "pixel box" on the right;
In webpage view mode, right-click an image, click "image properties" on the shortcut menu, and then click the "General" tab.
In the "low resolution" box, type the file name of another low resolution image or click "Browse" to find it. If the image is on the site, browse the site and folder containing the image, and then select the image you want. If the image is on your LAN, click "select a file from computer" and then browse the image you want from the LAN. If the image is on the global wide area network, click "use web browser to select a webpage or file ". In your web browser, browse the desired image and switch back to FrontPage 2000. The web page you have accessed will be displayed in the URL box.
This function is useful for large images or high-resolution images. If images are mapped to images, visitors using low-speed Internet connections can click the hotspot based on low-resolution images without waiting for the entire high-resolution image to be downloaded.

[Practice]
Create a new webpage, insert several photos of your website into a picture, and save the webpage as the file name of zpj.htm.
3. Set image attributes
FrontPage provides many methods to control and optimize the images inserted into a webpage. Image attribute setting is an important method.
Click the "format" menu and select "properties" from the pop-up menu. The "image properties" dialog box is displayed, as shown in, the dialog box contains three tabs (the "General" tab is displayed in the figure ).

"General" tab of "image properties" dialog box

　　1. General Tab
On the "General" tab, you can change the format of images and images.
The "general" tab is divided into four areas. The "Default HYPERLINK" section is used to set hyperlinks. We will go to the next tutorial and will not introduce them here.
1) Image Source Area: This area mainly displays the file name of the image file. There are two buttons on the right. The "Browse" button is used to find an image. You can change the current image to another image. The "edit" button starts the default FrontPage image editor, directly edit and modify the image.
2) Type area: This area is used to set the image file type. FrontPage will automatically detect the image file type and display it. If you change the image file type here, for example, the original GIF format, you can change it to JPEG format. When saving the webpage, the "Save embedded file" dialog box appears, asking you to save the image file in JPEG format.
If the image is a GIF file, there are two options. The "Transparent" method allows the viewer to see the background through the image. The "staggered" method means that when the image is large, the browser will gradually display the image, which is clearer at a time, it is not displayed after the image is downloaded. Because the speed of the network is getting faster and the GIF file is relatively small, the effect of the staggered mode is no longer obvious.
There are also two options for JPEG files: the "quality" option has been described earlier; the "Progressive Change" method is similar to the "staggered" method of GIF files, which enables segmented download of image files.
3) "alternative representation" Area: click "Browse" next to "low resolution" and select an image with low resolution and small size, download a low-resolution image first, and then download the entire image to overwrite it. When the browser downloads a large, high-resolution image, you can view the entire webpage completely. Enter the description text of the image in the text box, when an image cannot be downloaded, the viewer cannot see the image, but can see the description of the image.
　　2. "video" tab
The "video" tab is mainly used for setting image files (AVI Files). We have learned before.
　　3. "appearance" tab
Open the appearance tab, as shown in.

"Appearance" tab

The "appearance" tab is divided into two option areas: "layout" and "size ".
1)"Layout" AreaThere are four options:
Alignment provides 10 Alignment modes, which are left and right;
"Border width" refers to the width of the border line added around the image. The default status is 0, that is, there is no border line;
Horizontal spacing refers to the distance between text and image in the horizontal direction;
Vertical spacing refers to the distance between text and image in the vertical direction.
2)"Size" option Area
Select the "specify size" check box to set the width and height of the image. If "pixel" is selected under the image, the image size is measured in absolute pixel values, and "percentage" is selected under the image, and the percentage of browser width is used as the measurement unit.
Select the "keep aspect ratio" check box to maintain the original aspect ratio of the image. When setting the height and width, you only need to set one of them. The effect of this operation is the same as that of dragging the four corners of the image with the mouse.
IV,Image Positioning Method
When you insert an image into a webpage containing text paragraphs, the image and text are arranged together and can only be moved in different rows, and cannot be moved anywhere, increase the line spacing of the text, as shown in.

No image is located in the text.

Use absolute or relative positioning for images to move any image on the webpage.
　　1. Absolute positioning of images
Set the upper-left corner of the page to (0, 0). Based on the given coordinates (x, y), determine the position of the image on the page, that is, absolute positioning.
After selecting an image, click the "absolute positioning" button in the "image" toolbar to complete absolute positioning. After selecting absolute positioning, we can move any image in the webpage.
Note that an image actually floats on a webpage and may block text on the webpage, as shown in (click the "Move Down" button on the "image" toolbar, the image can be placed under the text ). In addition, when the text in the webpage changes in the format, the absolutely positioned image will not change along with the move, which brings some trouble to the webpage modification. To make images change along with the changes in the webpage format, you can use relative positioning of images.

Absolute positioning of images floating on Text

　　2. Relative positioning of images
Relative positioning is to determine the image position based on the positions of other elements in the text section. In this case, you can set the image and text wrapping mode.
Select an image, click the "format" menu, and select the "positioning" command to open the "positioning" dialog box.

"Locate" dialog box

Click the relative box in the "positioning style" area, in the "surround style" area, select "NONE", "Left", and "right" to select a surround mode. The page shown in is displayed.

Webpage after the image is relatively located (left-side)