Section eighth inserting an image

Source: Internet
Author: User
Insert

In order not to affect the download speed of the Web page, the image to be used very few, can not do as far as possible, must be the image should be used image software in the case of not distortion as far as possible compression.

Browsers can recognize images with JPG (also known as JPEG), GIF, PNG, and BMP, Dreamweaver can be better supported by JPG, GIF and PNG three kinds. Currently the most used on the web is JPG and GIF, because these two format file size is small. GIF format images with tools to remove their own background, but very good and page fusion, but also can be made into animation.

To insert the image with Dreamweaver, you can click the button on the objects panel, or click on the insert\image of the menu bar, or you can use the shortcut key ctrl+alt+i directly. A dialog box pops up. Select an image file, click OK. Then when the image is selected, the Properties panel is shown below.

(expanded Image Properties panel)

W and H are the width and height of the image. After inserting the image, the Dreamweaver will automatically give the original width and height of the image. The width and height of the image can be adjusted to enlarge or reduce the display size of the image.
It should be noted, however, that only the size of the image is displayed in the browser, and the size of the image itself has not changed. Therefore, do not expect to use deanweaver to reduce the size of the image to improve the page download speed.
After SRC is the address of this image, you can fill in the address of another image to replace the image.
The Align Marquee is the alignment of the image to the text, followed by a Drop-down marquee with 10 options browser Default, Baseline, Top, Middle, Bottom, text top, absolute middle, absolute Bottom, left and right.
Baseline and bottom are aligned below the bottom line of the image and the bottom of the text. Absolute bottom is the bottom of the image and the base of the text is completely aligned.
Top is a fully aligned top of the image and the upper line of the text. The text top is aligned with the front of the image and the top line of the text.
The middle is the center of the image and the text bottom line alignment. Absolute middle is the center of the image and the middle alignment of the text.
Left is the image on the left-hand side, the text on the right;
In addition, there are three image buttons in the lower part of the properties panel that define how the image is aligned on the page. is left-aligned, center-aligned, right-aligned. The effect is the same as the text in the page, not much here.
After the properties panel's ALT, you can fill in the descriptive text. When someone visits your page, the image position will display the text you fill in before the image is displayed. This way, before the image is shown, others will know what the images are going to say. You can also fill in the path of another image after Low SRC, which is typically a lower-quality replacement for the original image. Show this before the original image is shown, so that others can quickly and generally understand the content of the images.
V space is the other page elements on the left side of the image and the other page elements on the right side of the image and the other pages of the picture. H space is the distance between the top of the image and other page elements above it, and the bottom of the image and other page elements below it.
The width of the image border can be filled in after border. Generally can not fill, that is, not set borders.


The Properties panel also has link, map, and Target, which are related to hyperlinks, as described in the Hyperlinks section.

 



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.