First, use special effects in FrontPage 2000, using the command button on the special "picture" toolbar to simply handle the images in the web page. For example, set transparencies, set unevenness, adjust contrast, brightness, cut, and add text on the GIF format. 1. Picture toolbar usually, when a picture is selected, the "picture" toolbar will appear on the screen. Right to the toolbar with the mouse, select "Picture" and the picture toolbar will appear. The picture toolbar typically appears at the lower end of the FrontPage window when selecting the picture, but can also be moved to the window. The name of each button on the picture toolbar is shown in the figure below, and the mouse will also display its name on each button.
Picture toolbar Name
2, set the picture background color to transparent color to set the picture background color to transparent color, which can make a picture truly integrated with the page. Select the picture, click the "Set Transparent Color" button in the picture toolbar, then click the blank place in the picture, the color of the click is transparent. The following figure is the case where the transparent color setting is before and after.
[Note] Only GIF format images can set the background transparency. Moreover, the background of the original picture must be a single color, and there is no other color interference. Some places in the above picture are not "transparent", which is the original picture "unclean". 3. Set the picture as "uneven effect" selection picture, click the "Confinci-convex Effect" button in the picture toolbar, the image boundary is embossed, so that the picture looks three-dimensional effect.
4, "Tail" picture, sometimes, the picture is too large, and we only need a small part of the picture, and the point to drag the picture with the mouse button can only compare the picture to reduce the picture. The "Tail" button with the picture toolbar can cut the image without having to open the image processing software. The operation steps are as follows "1) Select (click) the picture to be tailored, click the button, there is a dashed box that is slightly smaller than the picture, and there are 8 control points in the four and four points:
2) Drag one of the control points, make only some pictures in the virtual box:
3) Click the "Trip" button again, the image will only leave the contents of the virtual box.
The role of other buttons is as follows: ● "Picture of the picture in the file" button. The "Picture"> "from the file" command is equivalent to the "Insert" menu. Click this button to open the Picture dialog. ● "Text" button. Used to add text in the picture. But the picture must be GIF format, if not, FrontPage will automatically convert it into a GIF format image file. ● "Auto Thumbnail" button. Used to generate a thumbnail and create a hyperlink link to the image in the thumbnail. ● "Absolute Location" button. When the layer is defined, the absolute position of the image is set in the current layer. ● "Lower 1" button. When the layer is defined, the picture is shifted onto the image. ● "Move a layer" button. When the layer is defined, the picture is moved downward. ● "Rotate the left" button. Rotate the picture counterclockwise 90 °. ● "Rotate the right" button. Rotate the picture clockwise 90 °. ● "Horizontal Flip" button. Turn the picture along the vertical line symmetrical. ● "Vertical Flip" button. Turn the picture along the horizontal line symmetrically. ● "Add Contrast" button. Add the contrast of the picture foreground color and background colors. ● "Reduce Contrast" button. Reduce the contrast of the picture foreground color and background colors. ● "Add Brightness" button. Add the brightness of the picture color. ● "Reduce the brightness" button. Reduce the brightness of the picture color. ● "Black and White Mode" button. If the current picture is colored, click this button to turn the color picture into black and white. ● "Error" button. You can fade the color of the picture to form a "watermark" effect. ● "Reissue" button. After adjusting the image size, click the button to get the image after adjustment. ● "Selected" button. Used to select a picture in a web page. ● "Rectangular Hotspot" button. It can be used in the picture to be used for hyperlinks for hyperlinks. ● "Round Hotspot" button. The circular hotspot area can be used in the picture for hyperlinks. ● "Polygon Hotspot" button. The polygon hotspot area can be used in the picture for hyperlinks. ● "Highlight the Hotspot" button. The hotspot area can be highlighted in the picture. ● "Restore" button. Click this button to restore the status before editing. [Note] After the special effect is set, the "Save Embedded File" dialog will generally appear when saving the web page, and you must reserve the effect back. Second, how to make the picture file becomes small and reduce the download time of the picture, by re-sampling the picture file is smaller when the picture file is large, not only the occupancy of the home page will increase rapidly, but the download time of the web page will become very long. It is possible to make our customers lose patient, and the significant number of websites will reduce the number of views. Therefore, the web crew must learn how to make the picture file smaller: Click the image, and then drag the point on the image to adjust its size. The control point of the drag angle can keep it in the same period change. Adjusting the picture size is just a way to change the image in a web browser at the site visitor. Therefore, if you only adjust the size of the big picture to a smaller size, the picture file size is still as big as the original. To reduce the file size and download time of the image, you must re-sample the picture after adjustment. Re-sampling images will reduce the file size to match smaller sizes. Re-sampling is simple, in web view mode, select (click) The size of the size has been adjusted, and then click the "Re-Sampling" button on the "Picture" toolbar. By re-sampling pictures, you must re-save the image file by saving the web page while re-saving the image file, you can really decrease the image file. [Example] Insert a larger image file "Happy New Year" in the "Picture Exercise", and then use the method of reducing the picture size to make the picture file smaller. 1) Open "Image Exercise" page 2) Move the cursor to insert the image, click "Insert"> "Picture"> "from the file" (lower left). 3) On the "Picture" dialog box, select the image file "newyear.jpg", click "OK" (lower right).
4) Click "View"> Folder "to make the window into a" folder "view. Find the "newyear.jpg" file in the image folder, you can see its file size is 58KB. 5) The mouse click on the image, then move the mouse to the corner of the control point to drag, so that the picture becomes smaller:
At this time, look at the "newyear.jpg" file in the "folder" view is still 58kb. 6) Click the "Re-Sampling" button on the "Picture" toolbar, the size of the "newyear.jpg" file has not changed. 7) Click the "Save" button to save the "Image Exercise" web page, and re-save the image file "Newyear.jpg" through the "Save Embedded File" dialog box. At this time, you can see the size of the "newyear.jpg" file in the "folder" view to 12KB.
2. Reduce the picture quality to make the picture file to reduce the quality of the quality to increase the compression ratio of the picture file, and the file size will greatly decrease. Only pictures of the JPEG format can do this, the picture in the non-JPEG format first wants to convert to JPEG format. In web view mode, right-click on the JPEG format image and click Image Properties on the Shortcut menu. You can get the "Image Properties" dialog shown below, which generally displays the "General" tab therein.
"Picture Properties" dialog box "General" tab
As can be seen in the figure, "JPEG" is automatically selected in the "Type" field for the JPG file. The quality parameters of the picture are displayed in the "Quality" box later, the default value is 75. The value ranges from 1 to 100, the larger the value, the better the quality, but the picture file is also. You can change this value to a smaller value to reduce the quality of the picture. Click "OK" to complete the settings, then save the web, and re-save the image file through the Save Embedded File dialog box, you can reduce the size of the image file. A few pictures in this precedent will reduce the size of the picture file through this method. By reducing the "mass" value from 75 to 30, it can reduce the size of the file to half. As can be seen from the previous few pictures, this method is relatively small for continuous image quality, and the influence of the text picture of the contour is obvious. [Practice] Newly built a web page in the local website "Web Practice", insert two larger pictures. Let's take a look at their file size in the Folder view. Then make the size of the first picture be smaller, then execute the "re-sampling" command; reset the attribute of the second picture (must be a JPG file), reduce its "quality" value. Take a look at their file size. Finally, the image file is re-saved by saving the page to see the reduction of the image file. 3, download time using thumbnail images is often very long, especially for site visits that use low speed Internet connection. So people generally don't insert a big beautiful picture in the web page. But in some special cases, some particularly clear pictures are often required. In order to solve this problem, FrontPage provides a picture thumbnail feature. Use a thumbnail of an original map in the web page to replace the original image, the area, the number of file bytes is much smaller than the original picture. At the same time, the hyperlink between the thumbnail and the original map is automatically established. Ordinary viewers simply browse thumbnails without affecting the display speed of the entire web page. Need to see a clear picture of the viewer, just click on the thumbnail, the browser will open the original image immediately. The operation method of setting this picture into thumbnails is simple. As long as this picture is selected. Click the Auto Thumbnail button on the image toolbar. At this time, the selected picture is reduced to a small picture, and there is a blue box around it. At this point, FrontPage has created hyperlinks to thumbnail original pictures, open the web page in the browser, click the thumbnail to open the big picture. When the web file is saved, a prompt will appear (and the original map). By default, the file name of the thumbnail is to add "_small" after the original image file name, the extension is the same. It is worth noting that all pictures can be set to thumbnails. If the image to be processed is smaller than the default size of the thumbnail, or the image has a hyperlink, or the picture is a GIF animation picture, then FrontPage A thumbnail cannot be generated. [Example] Set the picture "three rivers" in the "picture exercise" into a thumbnail 1) Open the page "Picture Exercise" and click the "Three River" pictures. The "Three Rivers" pictures in the web page are selected
2) Click the Auto Thumbnail button on the image toolbar. At this time, the selected picture is reduced to a small picture.
Figure 3.26 Picture is set to thumbnail
3) Click the "Save" button on the usual toolbar to save the "Image Exercise" webpage, and the "Save Embedded File" dialog box appears:
Note: The file name of the thumbnail is "_small" after the original image file name "SJK", and click "OK" to complete the save. 4) Select the "Browser preview" command in the "File" menu to see the "Three River" pictures of the "Three Rivers" just a thumbnail. But you can see the beautiful original image with your mouse. [Settings for the thumbnail] You can use the default value for thumbnails. However, if you are not satisfied with the default settings, for example, you want the thumbnail to be bigger. You can change the setting value. The operation method is as follows: 1) Click the Tools menu, select the "Web Page Options" command, open the "Web Page Options", select the Auto Thumbnail tab, as shown below. 2) Set three options on the Auto Thumbnail tab of the "Web Options" dialog. Settings boxes and "Pixel" boxes set the size of the thumbnail. The Set box determines that the parameter determines the size (default is "width"), the "Pixel" box determines the value of this parameter (the default is "100"). If the setting value of the "pixel" box is changed to 200, the thumbnail will be doubled (the height of the thumbnail increases automatically with the increase in width). However, the file size and download time of thumbnails are also correspondingly increased. The "Border Rough" check box, select the border of the thumbnail after selecting the "pixel box" on the right side; right-click on the web view mode, click the mouse button on the image, click on the shortcut menu " Image Properties, and then click the General tab. In the Low Resolution box, type another low resolution image file name or click Browse to find it. If you look at the site and folders that contain images, select the image you want. If you click on your LAN, click "Select a file from your computer" and then browse from the LAN to the image you want. If the image is on the Global WAN, click "Use a web browser to select a web page or file." In your web browser, browse to the image you want, then switch back to FrontPage 2000, you have visited the webpage location will be displayed in the URL box. This feature is useful for large images or high resolution pictures. If the picture is an image mapping, the site visitor connected to the low speed Internet can click on a hot spot based on low-resolution pictures without waiting for the entire high-resolution picture to complete the download.
[Practice] Newly built a web page, insert several photos you like, make them a thumbnail, and save the webpage in "zpj.htm" file name. Third, set the picture property FrontPage provides a number of methods to control and optimize the images inserted into the web, where the image property setting is an important means. Click the Format menu, select "Properties" in the pop-up menu, get 3 tabs in the Dialog box (shown in the figure "General" option in the dialog card).
"Picture Properties" dialog "General" tab
1. The "General" tab can change the format of the image and the picture on the General tab. The General tab is divided into 4 areas, with the "default hyperlink" section to set the hyperlink, we will learn from the next lecture, this is not introduced. 1) Picture source area: This part mainly displays the file name of the image file. There are two buttons on the right end, "Browse" buttons are used to find pictures, can change the current image into another picture; Edit button can start FrontPage default image editor, edit and modify the picture directly. 2) Type area: This part is used to set the type of image file, and FrontPage automatically detects the type of image file and is displayed. If you change the type of the image file here, for example, it is a GIF format, you change it to the JPEG format. The Save Embedded File dialog box appears when saving the web page, requires you to save the image file in the JPEG format. If the picture is a GIF file, there will be two options. The "transparent" mode can make the viewer to see the background through the picture; "Interlaced" mode is when the picture is large, the browser will gradually display the picture, once more clear, not waiting for the picture, then display. Since the network speed is generally high, the GIF file is relatively small, and the role of interleaving mode is not obvious. There are two options for JPEG files: "Quality" option has been introduced, "progressive change" is similar to the "interleaving" manner of the GIF file, which enables image file segmentation. 3) "Alternative Representation" area: Click the "Browse" button behind "Low Resolution", select a low resolution, a small size picture, then browse the webpage, first load low resolution pictures, then then Download the entire picture, cover it. Make the viewer to see the entire web page in front of the browser to download a complete large high-resolution picture in the browser; enter the description text of the image in the "Text", when you can't download When the picture, the viewer can't see the picture, but you can see the description text of the picture. 2, the "Video" tab "Video" tab is mainly used for the setting of the image file (AVI file), and we have learned before. 3, the "Appearance" tab opens the "Appearance" tab, as shown below. "Appearance" tab
"Appearance" tab is a "layout" and "size" two options area 1) "layout" area has 4 options: "Alignment" provides 10 alignment, the most commonly used, left, right; "Border thickness" refers to the thickness of the frame line in the picture, the default state is 0, that is, there is no frame; the "horizontal spacing" refers to the distance of the text and the picture in the horizontal direction; "vertical spacing" means the vertical direction Distance to the picture. 2) The Size option area You can set the width and height of the image by selecting the "Specified Size" check box. If "pixel" is selected below, the size of the picture is measured by absolute pixel value; and the "percentage" is selected below, the percentage of the browser width is measured as a metric unit. Select the "Keep Aspect ratio" check box, then hold the original aspect ratio of the picture, when setting the height, and width, one of them is required. The effect of this and the method of dragging the picture with the mouse is the same. Fourth, the picture is positioned when the picture is inserted into a web page containing the text paragraph, and the picture is arranged together, and can only move in different lines, and cannot move any position, and because the picture is high, the line spacing of the text Also tall, as shown below.
Picture without positioning in the text
The image can be used to move the image in the web page with an absolute positioning or relative positioning. 1. The absolute positioning of the image will be (0, 0), and determine the position in the web page according to the given coordinate (x, y), is absolutely positioned. After selecting pictures, click the "Picture" toolbar "absolute positioning" button to complete the absolute positioning. After choosing absolute positioning, we can move the location of the image in the web page. Description, this time the picture is actually floating on the web, it may block the text on the web, as shown below (click the "Picture toolbar" down "button to make the picture in the text the following). Moreover, when the text in the web page is formatted, the absolute positioning picture does not follow moving, which makes some troubles to web page modification. To make the picture change with the changes in the web format, the relative positioning of the picture can be used. Picture floating on text
2. The relative positioning of the picture is based on the position of the picture based on the position of other elements in the text paragraph, in which case the surface surrounding method of the text can be set. Select the picture, click the "Format" menu, select the "Position" command to open the "Location" dialog.
"Positioning" dialog
Click the "Relative" box in the "Locating Style" area, "None" in the "Surround Style" area, "None", "left", "right" in three surround modes, can be selected as shown in the following figure Web page.
Picture relative to the page (left surround)
