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

2. 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 links
Adding Web Pages, Links, and Images

3. 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

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

5. 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

6. 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

7. 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

8. 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

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

10. 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

11. Assets Panel
Adding Web Pages, Links, and Images

12. 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

13. 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

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

15. 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

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

17. 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

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

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

20. Image Alignment Options
Adding Web Pages, Links, and Images

21. 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

22. Aligning an Image
Adding Web Pages, Links, and Images

23. 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

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

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

26. 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

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

28. 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

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

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

31. 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

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

33. 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

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

35. 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

36. 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

37. Creating Absolute Links
Adding Web Pages, Links, and Images

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

39. Adding an Link
Adding Web Pages, Links, and Images

40. 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

41. 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

42. Using Live View
Adding Web Pages, Links, and Images

43. 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 links
Adding Web Pages, Links, and Images

44. 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

45. Adobe Dreamweaver CS5
Chapter 2 Complete