Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Transcription

1 This section describes how to add content to your pages including text, Microsoft Office documents, images, Flash, and other media content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special. The Paste Special command provides a number of additional paste options as shown in the Paste Special dialog box (see below). You can also use the Paste Preferences option to set paste defaults for Dreamweaver. Insert Symbols Browser support for symbols is somewhat spotty, and symbols such as greater than (>) and less than (<) are used in HTML tags and require special handling. Consult Dreamweaver help if you need to insert either > or <. 1) With the insertion point positioned where the symbol is to appear, Choose Insert HTML / Special Characters 2) Select the symbol you require from the fly-out menu Camosun School of Business Page 1 ABT 294 Course Pack

2 3) If the symbol you require is not listed in the fly-out menu, click Other to open the Insert Other Character dialog box, and select the symbol you require. Numbered and Bulleted Lists 1) Place the insertion point where you want the list to start. 2) Set the Property Inspector to HTML view and click either the Ordered or Unordered List button. Alternatively, you can choose Format List and select the type of list you require from the fly-out menu. 3) When your list is complete, press <Enter> twice. 4) To insert a multi-level list, select the items in an existing list that you want to demote one level, and click the Indent button on the Property Inspector, or choose Format Indent Camosun School of Business Page 2 ABT 294 Course Pack

3 5) To set list properties for all items in your bulleted or numbered list, select the list and choose Format List / Properties. Select the List Type and Style. Use the Start count option to specify the starting number for your list. To set the properties for an individual item in the list, select the item and display the List Properties dialog box. Select the New Style for the item and use the Reset count to option if you want to change the numbering for the item. Inserting Word and Excel Documents You can insert Microsoft Word and Excel documents created in any version of Office more recent than Office 97, provided the size of the document is no more than 300K. 1) Switch to Design View if necessary 2) Drag and drop the file onto the page, or choose File Import / Word Document (or Excel Document). 3) In the Import Word/Excel Document dialog box, choose the formatting options you prefer from the Formatting pop-up menu located at the bottom of the dialog box Camosun School of Business Page 3 ABT 294 Course Pack

4 4) For documents created in Office 97 or files larger than 300K, you can create a link to the relevant file. Make sure that the document is contained within your file structure to ensure that it is uploaded to the Web server. Drag the file from its current location to the required position on the Web page. In the Insert Document dialog box select the Create a link option. If the document is currently outside the file structure of your Web site, Dreamweaver displays a dialog box that allows you to copy the file into the root folder of your site. When you click Yes, Dreamweaver allows you to rename the file and specify the exact location in your Web site folders that the file will be copied into Camosun School of Business Page 4 ABT 294 Course Pack

5 Inserting Images Images can be specifically created for a web site using tools such as Fireworks or Adobe Photoshop, or they can be commissioned from a graphic designer. You can also scan images, upload images from a digital camera, or use any clipart that you have available. Graphic formats currently fully supported on the web are JPEG (.JPG) and GIF. PNG is an emerging format that is gaining popularity but is not fully supported in all browsers. Gif and JPEG formats have the widest support and can be viewed in most browsers. GIF s are used for line art, clipart and animations, and they also support transparency. GIF s are typically small in file size and have a limited colour depth (usually a maximum of 216 web-safe colours). They are well suited for items such as navigation buttons and logos. JPEG s are used for continuous tone images (such as photographs) and are usually larger in file size. JPEGs should be saved in your graphics software using a dithered palette so that the full range of colour can be approximated on systems that lack high colour depth capability. JPEG s can be compressed to achieve a smaller file size; however, compression results in a loss of some of the colour-depth. Inserting a Picture File Images can be inserted directly from an image file if they are stored in JPEG or GIF (or PNG) format, and you can also insert a clip art image into a Microsoft Office document, then copy and paste it into Dreamweaver. When you insert an image file into a Web page, Dreamweaver automatically generates a reference to the file in the HTML code. To make sure that this reference works, the image file must be contained in a folder in the current site. Before adding images to your page make sure that the image file has been properly prepared, and copied or moved into the images or assets folder inside the web. If you select a file that is not already in the site, or paste a clipart image onto the page, Dreamweaver will ask you whether you want to copy the file to the root folder. By copying the file into the site folders, the image will be available when the site is published to the web server. 1) Position the insert point where you want to insert the image. 2) To insert the image, do one of the following: choose Insert Image, click the Insert Image button in the Common Category of the Insert panel, or drag the Insert Image button to the page. (Note: You can also drag an image from the Assets panel or the Files panel to place an image on a page) Camosun School of Business Page 5 ABT 294 Course Pack

6 3) The Select Image Source dialog box will appear. Use Look in to browse to the folder containing the required image and select the image (the Preview area of the Select Image Source dialog box allows you to preview images before placing them, and also provides additional information such as the size in pixels, the size in KB, and the average download time). If you have chosen a file that is not contained in the Web site structure, note the message Chosen file is not under site root at the bottom of the dialog box. An image file must be stored in a folder under the site root in order for it to be rendered as part of the page once the site is published. 4) Click OK to place the image. 5) If the image is not currently in a folder inside the site, Dreamweaver will prompt you with the following message Camosun School of Business Page 6 ABT 294 Course Pack

7 6) Click Yes. Dreamweaver will display the Copy File As dialog box, which allows you to rename the file if necessary and select an appropriate folder in the site to copy the image into. 7) Click Save to save the image, then specify the <Alt> tag for the image in the Image Tag Accessibility Attributes dialog box. When a text alternative has been specified, the text will display in the browser before the image downloads so that a user does not have to wait for the image to load before using any attached hyperlink. The alternative text is also necessary for anyone who is using a text only browser or a screen reader, and it is automatically displayed in newer browsers as a tool-tip whenever the mouse pointer is positioned on the graphic Camosun School of Business Page 7 ABT 294 Course Pack

8 Pasting a Clip-Art Image 1) Copy a clip-art image that has been inserted into a Microsoft Word or PowerPoint document. 2) Paste the image onto the Web page. The Image Preview dialog box will open. 3) Use the Options tab to specify Format and Quality settings, and use the File tab to specify Scale options. Click OK. 4) In the Save Web Image dialog box, use Look in select a folder in the Web site in which to store the file (typically the images or assets folder), and provide a File name. 5) Specify the <Alt> tag for the image in the Image Description dialog box Camosun School of Business Page 8 ABT 294 Course Pack

9 Modifying the Properties of an Image Once you have placed an image onto a web page it can be used as a hyperlink or image map and you can modify its properties in a number of different ways. You use the Property Inspector to modify the properties of an image. One of the most important options is to specify a text alternative for the image. Other properties you can modify include: Width and Height. These settings reserve space for the image on a page as it loads in a browser. These fields are automatically filled with the original image size and should not be modified under normal circumstances. Scaling images can be accomplished here, but may result in distortion and will not change the download time required for the image. Modifications to the size of an image should be done using an image-editing program such as Photoshop or Fireworks. Src. This setting specifies the path to the image file. Link. This setting specifies a hyperlink for the image. To use your image as a hyperlink, drag the Point-to-File button to a file in the Files panel or click the folder button to browse to a document on your site. You can also type a URL into the Link field to link to a document in a different Web site. Alt. This setting specifies alternative text to display in place of the image as it downloads or for text-only browsers. Edit. This option allows you to edit the image either in Photoshop or in the image-editing program specified in External Editor Preferences. You can also use the Edit Image Settings button to modify some basic settings (such as the JPEG quality and scaling options) in the Image Preview dialog box. You can use the expand button at the bottom right corner of the Property Inspector to access additional image properties you can modify. These include: Map Name Field. This option allows you to create a client-side image map. Hotspot Tools. These tools allow you to create hotspots on an image to use as hyperlinks. V Space and H Space. These settings can be used to add padding along the right and left side of the image (H Space) and along the top and bottom (V Space) of the image. Padding is specified in pixels Camosun School of Business Page 9 ABT 294 Course Pack

10 Target. This setting specifies the target frame that the linked page should be loaded into if you are using a frameset or linking to an external site. Border. This option is used to set the border size in pixels around an image. For an image in a navbar that is used as a link, this should be specifically set to 0 (zero). Image Editing Tools. Tools are provided to Crop, Resample, set Brightness and Contrast levels, and Sharpen the image. Align. This setting specifies how text and the image will align relative to each other on the same line. 1) Select the image. 2) Use the Window menu to open the Property Inspector if necessary. 3) Select the required options from the Property Inspector (Note: to see all of the available options, click the expand button in the lower right-hand corner of the Property Inspector) Camosun School of Business Page 10 ABT 294 Course Pack

11 Creating an Image Map An image can be converted to a client-side image map using the hotspot tools on the Property Inspector. 1) Select the image, then display and expand the Property Inspector if necessary. 2) Enter a unique name for the map into the Map field. 3) You can create rectangular, square, oval, circular or polygonal hotspots. Select a hotspot tool from the Property Inspector to marquee an area of the image that will act as a hyperlink. 4) Drag to marquee the area of the image that will act as a hyperlink. The Property Inspector will update so that you can set the hotspot properties. 5) Drag the Point-to-File button to a file in the Files panel or click the folder button to browse to a document in your site to specify the entry for the Link field. If you are using a frameset, specify the Target frame. Specify the Alt text to display in text-only browsers. 6) Repeat the steps above to create additional hyperlinks to complete your image map. Inserting Media You can incorporate a variety of different media types into your Web site. The basic procedure is to use the Insert Media command or to use the Common category of the Insert panel. For audio files, you can either embed the files or link to the files Camosun School of Business Page 11 ABT 294 Course Pack