2. Add pages to a Web site Describe Dreamweaver’s image accessibility features Describeimage file formats Insert, resize, and align images within a Web page Describe the different types of links Create relative, absolute, and e-mail links Objectives Adding Web Pages, Links, and Images 2
3. 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 3 Objectives
4. Adding Web Pages, Links, and Images 4 Project – Two New Pages, Links, and Images
5. 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 5 General Project Guidelines
6. 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 6 Opening an Existing Web Site
7. 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 7 Opening a New Document Window
8. 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 8 Opening a New Document Window
12. 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 12 Setting Invisible Element Preferences and Turning on Visual Aids
13. 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 13 Setting Invisible Element Preferences and Turning on Visual Aids
14. Adding Web Pages, Links, and Images 14 Setting Invisible Element Preferences and Turning on Visual Aids
15. 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 15 Opening a Web Page from a Local Web Site
16. Adding Web Pages, Links, and Images 16 Opening a Web Page from a Local Web Site
17. 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 17 Inserting an Image into the Web Page
18. Adding Web Pages, Links, and Images 18 Inserting an Image into the Web Page
19. Adding Web Pages, Links, and Images 19 Property Inspector Image Tools
21. 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 21 Aligning an Image
23. 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 23 Adjusting the Image Size and the Horizontal Space
24. Adding Web Pages, Links, and Images 24 Adjusting the Image Size and the Horizontal Space
25. External image editor Adobe Photoshop Cropping Resampling Brightness and Contrast Sharpening Adding Web Pages, Links, and Images 25 Image Editing Tools
26. 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 26 Cropping and Modifying the Brightness/Contrast of an Image
27. Adding Web Pages, Links, and Images 27 Cropping and Modifying the Brightness/Contrast of an Image
28. 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 28 Cropping and Modifying the Brightness/Contrast of an Image
29. Adding Web Pages, Links, and Images 29 Cropping and Modifying the Brightness/Contrast of an Image
30. 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 30 Understanding Different Types of Links
31. 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 31 Creating a Relative Link Using Point to File
32. Adding Web Pages, Links, and Images 32 Creating a Relative Link Using Point to File
33. 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 33 Creating a Relative Link Using the Context Menu
34. Adding Web Pages, Links, and Images 34 Creating a Relative Link Using the Context Menu
35. 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 35 Creating a Relative Link to the Home Page
36. 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 36 Creating Absolute Links
38. 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 38 Adding an E-Mail Link
40. 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 40 Using Design View and Code View Simultaneously
41. 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 41 Using Live View
43. Add pages to a Web site Describe Dreamweaver’s image accessibility features Describeimage file formats Insert, resize, and align images within a Web page Describe the different types of links Create relative, absolute, and e-mail links Chapter Summary Adding Web Pages, Links, and Images 43
44. 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 44 Chapter Summary
