Chapter 2 Adding Web Pages, Links, and Images Adobe Dreamweaver CS5 Chapter 2 Adding Web Pages, Links, and Images

Objectives Add pages to a Web site Describe Dreamweaver’s image accessibility features Describe image file formats Insert, resize, and align images within a Web page Describe the different types of links Create relative, absolute, and e-mail links Adding Web Pages, Links, and Images

Objectives Describe how to change the color of links Edit and delete links Check spelling Describe Code view, Split view, and Design view Display Code view Use Live view Adding Web Pages, Links, and Images

Project – Two New Pages, Links, and Images Adding Web Pages, Links, and Images

General Project Guidelines Organize your content Identify links Include standard links for navigation Prepare images Consider image placement Resize images as necessary Consider accessibility Verify browser viewing Proofread and check spelling Adding Web Pages, Links, and Images

Opening an Existing Web Site Click the Site pop-up menu button in the Files panel to display the drives on your computer and Web sites created with Dreamweaver Click the desired Web site to display the site hierarchy Adding Web Pages, Links, and Images

Opening a New Document Window Click File on the Application bar and then point to New Click New to display the New Document dialog box. If necessary, click Blank Page Click the desired page type, layout, and document type Click the Create button If necessary, click View on the Application bar, point to Toolbars, and then click Standard to display the Standard toolbar Adding Web Pages, Links, and Images

Opening a New Document Window Click the Save button on the Standard toolbar to display the Save As dialog box Type the desired file name in the File name text box Click the Save button in the Save As dialog box to save the page in the desired save location Adding Web Pages, Links, and Images

Opening a New Document Window Adding Web Pages, Links, and Images

Image File Formats Vector Images Bitmap images GIF (Graphics Interchange Format) Transparency Animation JPEG (Joint Photographic Experts Group) Progressive JPEG PNG (Portable Network Graphics) Adding Web Pages, Links, and Images

Assets Panel Adding Web Pages, Links, and Images

Setting Invisible Element Preferences and Turning on Visual Aids Click Edit on the Application bar and then click Preferences to display the Preferences dialog box Click Invisible Elements in the Category list to display the Invisible Elements options in the Preferences dialog box Click the Anchor points for aligned elements check box to select this option, which makes it easier to align elements Adding Web Pages, Links, and Images

Setting Invisible Element Preferences and Turning on Visual Aids Click the OK button in the Preferences dialog box to confirm the new setting and close the Preferences dialog box Click View on the Application bar, point to Visual Aids, and then point to Invisible Elements on the Visual Aids submenu to highlight the command If necessary, click Invisible Elements to add a check mark to the Invisible Elements command Adding Web Pages, Links, and Images

Setting Invisible Element Preferences and Turning on Visual Aids Adding Web Pages, Links, and Images

Opening a Web Page from a Local Web Site Double-click the page to open in the Files panel If the Standard toolbar is not displayed, click View on the Application bar, point to Toolbars, and then click Standard to display the Standard toolbar Adding Web Pages, Links, and Images

Opening a Web Page from a Local Web Site Adding Web Pages, Links, and Images

Inserting an Image into the Web Page Click the Assets panel tab to display the Assets panel. Verify that the Images icon is selected Click the desired image in the Assets panel to insert Drag the image from the Assets panel to the desired location on the Web page Type the desired alternate text in the Alternate text text box Click the OK button in the Image Tag Accessibility Attributes dialog box to display the selected image in the Document window and to view the attribute changes in the Property inspector Adding Web Pages, Links, and Images

Inserting an Image into the Web Page Adding Web Pages, Links, and Images

Property Inspector Image Tools Adding Web Pages, Links, and Images

Image Alignment Options Adding Web Pages, Links, and Images

Aligning an Image Click the image to align Click the Align button in the Property inspector to display the alignment options Click the desired alignment option Adding Web Pages, Links, and Images

Aligning an Image Adding Web Pages, Links, and Images

Adjusting the Image Size and the Horizontal Space Click to select the image Type the desired image width in the W text box Type the desired image height in the H text box Type the desired horizontal space in the H Space text box Type the desired vertical space in the V Space text box Click outside the image to remove the selection box and view the added space and new size Adding Web Pages, Links, and Images

Adjusting the Image Size and the Horizontal Space Adding Web Pages, Links, and Images

Image Editing Tools External image editor Cropping Resampling Adobe Photoshop Cropping Resampling Brightness and Contrast Sharpening Adding Web Pages, Links, and Images

Cropping and Modifying the Brightness/Contrast of an Image Select the image to crop Click the Crop tool in the Property inspector to apply the bounding box Click and drag the appropriate crop handle inward until the bounding box is the desired size Double-click inside the bounding box to apply the cropping by resizing the image to match the size of the bounding box Adding Web Pages, Links, and Images

Cropping and Modifying the Brightness/Contrast of an Image Adding Web Pages, Links, and Images

Cropping and Modifying the Brightness/Contrast of an Image Select the image for which you wish to modify the brightness and contrast Click the Brightness and Contrast tool in the Property inspector to display the Brightness/Contrast dialog box Drag the Brightness slider to the desired setting Drag the Contrast slider to the desired setting Click the OK button to accept the Brightness and Contrast settings Adding Web Pages, Links, and Images

Cropping and Modifying the Brightness/Contrast of an Image Adding Web Pages, Links, and Images

Understanding Different Types of Links Absolute link Eternal link Relative links Document-relative link Internal link Root-relative link Named anchor E-mail link Null link Script link Adding Web Pages, Links, and Images

Creating a Relative Link Using Point to File Drag to select the text you wish to turn into a link Click the Point to File tool next to the Link text box in the Property inspector, and then drag the pointer to the desired file in the Files panel When the pointer is over the desired file in the Files panel, release the mouse button to display the linked text in the Property inspector Link box Adding Web Pages, Links, and Images

Creating a Relative Link Using Point to File Adding Web Pages, Links, and Images

Creating a Relative Link Using the Context Menu Drag to select the text you wish to turn into a link, and then right-click the selected text to display the context menu Click the Make Link command and then click the desired file to link to in the Select File dialog box Click the OK button in the Select File dialog box, and then click the selected text to display the underlined link Adding Web Pages, Links, and Images

Creating a Relative Link Using the Context Menu Adding Web Pages, Links, and Images

Creating a Relative Link to the Home Page Drag to select the text you wish to turn into a link Drag the home page file from the Files panel to the Link box in the Property inspector, and then click in the Document window to deselect the text Adding Web Pages, Links, and Images

Creating Absolute Links Drag to select the text you wish to turn into a link Click the Link box in the Property inspector, and then type the Web address Press the ENTER key Adding Web Pages, Links, and Images

Creating Absolute Links Adding Web Pages, Links, and Images

Adding an E-Mail Link Drag to select the text you wish to turn into an e-mail link Click Insert on the Application bar and then point to Email Link to highlight it Click Email Link to display the Email Link dialog box Click the Email text box and then type the e-mail address to which you wish to link Click the OK button to accept the entries in the Email Link dialog box Adding Web Pages, Links, and Images

Adding an E-Mail Link Adding Web Pages, Links, and Images

Using Design View and Code View Simultaneously Click the Split button on the Document toolbar to display Code view in the left pane and Design view in the right pane Adding Web Pages, Links, and Images

Using Live View Click the Live View button on the Document toolbar to view the page as it would appear in the browser and to verify that the line spacing is correct and that the document is properly formatted Adding Web Pages, Links, and Images

Using Live View Adding Web Pages, Links, and Images

Chapter Summary Add pages to a Web site Describe Dreamweaver’s image accessibility features Describe image file formats Insert, resize, and align images within a Web page Describe the different types of links Create relative, absolute, and e-mail links Adding Web Pages, Links, and Images

Chapter Summary Describe how to change the color of links Edit and delete links Check spelling Describe Code view, Split view, and Design view Display Code view Use Live view Adding Web Pages, Links, and Images

Adobe Dreamweaver CS5 Chapter 2 Complete