6. pictures on the webpage

The role of images in Web pages is irreplaceable. A good and suitable image is better than ten simple introductions! The graphic and illustrated web pages give visitors a feeling that they are incomparable.
Images not only play a decorative role, but are indispensable in many webpages. For example, product advertisements on Enterprise websites, illustrations in technical articles, and publishing of personal artistic works cannot be without pictures.
Although images can beautify your web page, when you add images, animations, and videos to your site, the occupied space on the home page will increase rapidly, the download time of a Web page is also greatly increased, and the speed of the web page is even intolerable. If the size of the home page provided by the Internet service provider is limited, the size of the image file is an important factor. Therefore, web page makers must pay special attention to the size of image files, try to use images that occupy less space, and sometimes sacrifice the image quality.
I. Basic Image Knowledge
Most browsers only display images in two formats. That is, GIF and JPEG (JPG ). When you compile a webpage using FrontPage, you can insert an image file of another format and convert the format to one of the above two formats.
1) GIF files
GIF is a compressed 8-bit image file. It is widely used for network transmission and has a maximum of 256 colors.
The new gif89a format can be stored in the form of transparent background, and several images can be saved as a file to form an animation effect. It also supports bitmap mode, grayscale or indexed color mode images. GIF files are relatively small, most of which are used for icons, buttons, scroll bars, and backgrounds.
2. JPEG files
JPEG is an efficient compression format. It can delete files that cannot be distinguished by human eyes during archiving to save storage space. The JPEG format compresses files by selectively removing data, which is lossy compression. It is richer and more lifelike than GIF images. It is suitable for storing photos and other images with smaller files.
GIF files and JPEG files have their own advantages, as shown in the following table. The format is determined based on the actual image file.

Comparison between GIF and JPEG formats

	GIF	JPG/JPEG
Color	16/256 colors	True Color
Special features	Transparent background and animation	None
Compression loss?	Lossless Compression	Lossy Compression
Applicable scenarios	The color is limited, mainly based on Cartoon patterns or lines. It generally represents the architectural structure or hand drawing.	Rich Colors, continuous tones, and real things

Although GIF files and JPEG files are the most basic image formats on the Internet, this does not mean that only these two formats of images can be inserted in FrontPage, other files such as PNG, BMP, Tif, WMF, Ras, EPS, PCX, PCD, and Targa can be inserted in FrontPage. FrontPage is embedded with an image Conversion Program, which automatically converts BMP, Tif, and other uncompressed image format files to JPEG or GIF files.
In recent years, PNG files have become popular. Its feature is that you only need to download 1/64 of the image to display a low-resolution image on the webpage. As the image information is downloaded, the image becomes clearer and clearer. For today's increasingly crowded networks, this image format is obviously more suitable for the current form.
Ii. insert an image
Now, we learn how to place images on webpages. In a webpage, you can either insert an image file or clip art, or use a clipboard to paste an image to the webpage.
　　1. Insert an image file into a webpage
It is best to insert an image file on this site, or an image file on a local disk or even on an Internet site.
[Note] Unlike word, the inserted image is not included in the HTM document. A corresponding image file must also exist on the website. When published on the Internet, the relative location of the image file and webpage file must be consistent with that on the local site. Therefore, the "Save embedded file" dialog box appears when you insert an image file that is not stored on this Site or use the clipboard paste method to insert an image. Remind you to save the image file to the site for future upload to the internet server. The simplest method is to import (copy) all required image files to the current website in advance.
Importing images or videos to a site allows you to quickly access the files you need. For example, you can add images to your site one by adding images to the webpage and then saving the webpage. However, if you know that you will use an image group, you can import all of them to the folder specified on your site at one time. Then, when you want to add an image to a webpage, you can access it quickly without having to search for it in the file system.
If you select an Internet site image, if it is not saved to your site, the image is only a path reference on your webpage, if the image is deleted from its website, you cannot see it on your webpage.
To insert an image file, run the "image"/"from file" command in the "insert" menu to complete the operation in the "image" dialog box.
1) files on the site can be found directly in the file list of the dialog box (but note whether the "Search" path in the dialog box is the folder where the site Stores image files );
2) for image files on ephemeral disks outside the site, click the "select a file from computer" button in the dialog box and select folders and image files in the "select image" dialog box;
3) to insert an image to an Internet site, you can directly enter the path and name of the image to be inserted (the URL must be an English URL) in the "url" dialog box ). Or click the "use web browser to select a webpage or file" button in the dialog box. After finding the appropriate image and image file in the browser, switch to the FrontPage window and the address of the image file will automatically be in the "url" box in the "image" dialog box (note: the URL box must be the path of the image file, not the webpage containing the image ).
).

1. Open the ycjf.htm webpage in front pages ).
2) move the cursor to the image to be inserted, and click "insert"> "image"> "from file" (bottom left ).
3rd. On the screenshot dialog box, select the image file "fxgz.gif" and click "OK" (bottom right ).

"Insert image" menu

"Image" dialog box

4) webpage with images inserted during browsing:

Webpage with images inserted in browsing status

[Example 2] Insert the "sanjiangkou New Look" picture on the old urchin website on the "image exercise" page.

1) Open the "webpage exercise" on the local site on the FrontPage, and click "new" in the toolbar to create a new webpage.
2) enter the title "image exercise" on the new webpage ".
3) Click "insert"> "image"> "from File ". In the "image" dialog box, click the "use web browser to select a webpage or file" button. The IE window shown in is displayed.

4) Find the old urchin website in IE browser, and find the "sanjiangkou New Look" picture in "elder care Park/Art Garden. Click the address bar of the browser to select the image URL.
5) return to the FrontPage window. In the "image" dialog box, the address "http://oldchild.nbc.net.cn/sjk.jpg.pdf" of the image file will automatically appear in the "url" box ".

6) Click "OK" to display the "sanjiangkou new appearance" image on the new webpage.

7. Click "Save token" on the "commonly used tools" tab to name the new webpage file "tplx.htm" in the dialog box ". Click "OK" to save the webpage file. The "Save embedded file" dialog box is displayed, as shown in.

If "OK" is selected, the image file is saved to the local site. We select "cancel ". At this time, this image file is not found on the local site, and the image file is still on the old urchin website. If the website cannot be opened or the file is deleted by the website, the image cannot be displayed.

2. Add a clip art to the webpage (images provided by Office 2000)
FrontPage 2000 contains the Microsoft editing library. You can preview the image in the editing library and select it on your webpage.
On the "insert" menu, point to "image" and click "clip art ". In the "clip art repository" dialog box, find the clip art you want, right-click the image, and click "insert" on the shortcut menu.
Because the inserted clip art is not in the local site, the "Save embedded file" dialog box shown above also appears when saving the webpage file. You must select "OK" to save the image file to the local site.
[Example] Insert a clip art image on the "image exercise" webpage.
1) Open the "image exercise" page in FrontPage.
2) move the cursor to the image to be inserted, and click "insert"> "image"> "clip art" (bottom left ).
3) in the "clip art repository" dialog box, select (click) "animal" category (bottom right ).

Insert clip art menu

"Clipboard" dialog box (category)

4) in the "clip art repository" dialog box, right-click the clip art and click "insert" on the shortcut menu to insert the clip art.

"Clip art repository" dialog box (right-click the shortcut menu of the clip art)

5) Click "save" on the toolbar to save the "image exercise" webpage. After the webpage file is saved, the "Save embedded file" dialog box shown in the preceding example is displayed.
6) Click the "change folder" button in the "Save embedded file" dialog box to display the "change folder" dialog box.

7) Click the "Images" folder, and then click "OK" to return to the "Save embedded files" dialog box (for example ). The field under "folder" has changed to "images/", saving the image file to the "Images" folder. Click OK to save the image file. You can also click "RENAME" to modify the image file name, but the file name does not contain Chinese characters or Chinese characters.

[Note] When saving an image, FrontPage will be automatically converted to gif or JPEG Based on the image content. If an image is of 256 or less colors, it is converted to GIF format, and all other images are converted to JPEG format.
3. Add a piece to the webpage through the clipboard
Like all Windows applications, You can paste images from other windows to a webpage through the clipboard. Here is a brief introduction of the Operation Method: In other windows Windows window, select a favorite image, right-click the image, and select "copy" in the pop-up shortcut menu ". Open the webpage file with FrontPage, move the cursor to the image to be inserted, right-click the image, and select "Paste" in the shortcut menu to insert the image.
Like inserting a clip art, you must save the image file to a local website when saving the webpage file.
3. Change the image size and position
The method for changing the image size and position in FrontPage is the same as that in word.
1. Change the image size
Click (selected) the image and move the mouse over the control points (small blocks) on the four sides and four corners of the image. When the mouse pointer turns into a double arrow, press the left button and drag it to change the image size.
[Note] changing the image size only changes the plane space occupied by the webpage, and does not change the image file size.
2. Change the image size
Move the mouse over the image, and drag the left button to change the image position.
Iv. Set the background image
You can use suitable images as the background of the webpage to make the webpage more beautiful. The following is an example of how to add a background image to the home page of the "Web exercise" Local Website:
1) Click the "format" menu and select "background" (bottom left) from the drop-down menu. The "webpage properties" dialog box ("background" tab) shown in the right figure is displayed ).
2) Click the box in front of the "background image" in the dialog box to check the box (called "selected ").

"Webpage attributes"/"background" dialog card

3) Click Browse (B) to open the select background image dialog box ().

"Select background image" dialog box

4. Open the images”folder in the dialog box, select "0002.jpg" as the background image, click "OK", return to the "webpage properties" dialog box, and click "OK" in the "webpage properties" dialog box. As shown in.

Homepage with background in the browser

5. Insert a video
You can not only set beautiful music on the webpage, but also set a small movie (video file) on the webpage. If you have a camera, you can make a video, then the visitor can not only hear your voice, see your pictures, but also see your performances! However, the video files are relatively large, generally several Mb. When using video files, pay attention to the server space.
Now, We can insert a video on the home page of the "Web exercise" Local website. Note: It is best to convert the content of a small movie to a video file with the extension Avi.
First, import the video file to the current site. On the home page, determine the location of the cursor. Click the "insert" menu and select "image" from the drop-down menu. When a sub-menu appears, click "video" (bottom left) to open the "video" dialog box (bottom right ).

Insert video

"Video" dialog box

In the "video" dialog box, open the "Images" folder, select "Fox. Avi", and click "OK" to insert the video file. Like images, we can adjust the video file playback window size.
The inserted video file looks more like an image. You can add a playback control to the video file through settings. Move the mouse over the video file, right-click the video file, and select "image properties" from the shortcut menu to open the "image properties" dialog box, as shown in.

"Image properties" dialog box

In the "image properties" dialog box, select "display controls in the browser", select "unlimited times" in the "repeat" area, and select "Open File" in the "play" area ", click OK ". The result is as shown in.
After saving the webpage, click the "file" menu and select "preview in the browser" from the drop-down menu. Open the webpage in IE to view the webpage with a rotating Earth video.

Video files with controls added

[Note] This is the same as "playing a webpage sound" described in Lecture 3. If you cannot play a video in IE, You can reset the "advanced" option of IE's "Internet Options, select "play video on Webpage" in the "Multimedia" category ".

[Practice]
Insert some images for Your webpage and add a background image to the homepage.