To do this, use the Properties panel (Property Inspector) for images. You may want to add white space around your images so that the image and the text are not clumped together. Original (no attribute). This is the original version of the image. This lets you control the appearance of a border. Set the image border to 0 if you don't want a border.Ĭlass (attribute: CSS Setting). This allows you to apply any class styles that are defined in Dreamweaver. To use this, select an element in the workspace, then select a class style that you wish to apply. Target (attribute: Link Target). This controls how a link opens in a web browser. Earlier in this article, we learned that _blank makes the link open in a new browser window.īorder (attribute: Image Border). H Space (attribute: Horizontal Space). Inserts blank space (in pixels) to the left and right of the image. V Space (attribute: Vertical Space). Inserts blank space (in pixels) above and below the image. Each button gives you a different way to edit the image. Link (attribute: Hyperlink). This displays the address if the image is a hyperlink.Īlt (attribute: Alternate Text). Enter a description for the picture in the Alternate text box. This can be an actual description of the picture. This alternate text will be read by screen readers (that the blind use) and will be indexed by search engines. It's a good idea to always enter something in this box.Įdit (attribute: Edit). There are several icons beside Edit. You can mouseover each of these buttons to learn what they do. Src (attribute: Source). Sets the source (the filename and path from the document to the image. H (attribute: Height). Specifies the height of an image. W (attribute: Width). This specifies the width of an image. Hotspot tools (attribute: Image Map Coordinates). This creates image map hotspots for links. The links are in the shape of a rectangle, polygon, or oval. Map (attribute: Map Name). Map assigns a name to an image map. You must have a name for an image map. ID (attribute: Name). It identifies the image uniquely on the page. You can leave this blank if you want. Image (no attribute). It simply displays the file size. Let's learn what each of these attributes mean. The Property Inspector for Dreamweaver CC is pictured below.ĭreamweaver CC does not offer all the attributes in the Property Inspector as found in Dreamweaver CS6. This is because CSS is a more effective way to set these attributes. An attribute is defined as a characteristic or property of an image. Select an image on your page by clicking on it. You'll then see the image attributes appear in the Property Inspector. Image Attributes in the Property Inspector The Property Inspector below your page will then allow you to add attributes to your image. Inserting an ImageĪgain, before you even begin to insert an image into your document, it's a good idea to go ahead and transfer the image to your root folder. More specifically, the image file in the root folder. Otherwise, when you upload your site to the Internet, the images will not appear. You will now need to save any images that you're going to use on your web site in the "images" folder. Now create a new folder within the "New_Site" folder and name it images, as we've done below. Because it keeps your site more organized. That said, open your "New_Site" folder. It's recommended that you create an "images" folder.
LEARNING DREAMWEAVER CS6 CODE
Just like when you start a new paragraph, every time you insert an image into your Dreamweaver document in Design View, Dreamweaver will automatically generate HTML code into the Code view. You do not have to worry about doing this.įor every image that you add to your Dreamweaver page, however, you must include that image in your root folder for the site. If you place an image in your Dreamweaver document, but do not include it in your root folder, when you upload your site to the web, the image will not appear on your website. That said, always remember that any image that you place on your page must be included in your root folder. You can place the images directly in your root folder, or you can create a sub folder within the root folder and name it images."
LEARNING DREAMWEAVER CS6 HOW TO
Although it's important for every web page that you create to have text, adding images compliments your text and makes the page more attractive to view. The good news is that adding images or graphics isn't any harder than adding text – once you learn exactly how to do it.
0 kommentar(er)
