CBIS 327 ~ Chapter 02

457 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
457
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CBIS 327 ~ Chapter 02

  1. 1. AdobeDreamweaver CS5<br />Chapter 2<br />Adding Web Pages, Links, and Images<br />
  2. 2. Add pages to a Web site<br />Describe Dreamweaver’s image accessibility features<br />Describeimage file formats<br />Insert, resize, and align images within a Web page<br />Describe the different types of links<br />Create relative, absolute, and e-mail links<br />Objectives<br />Adding Web Pages, Links, and Images<br />2<br />
  3. 3. Describe how to change the color of links<br />Edit and delete links<br />Check spelling<br />Describe Code view, Split view, and Design view<br />Display Code view<br />Use Live view<br />Adding Web Pages, Links, and Images<br />3<br />Objectives<br />
  4. 4. Adding Web Pages, Links, and Images<br />4<br />Project – Two New Pages, Links, and Images<br />
  5. 5. Organize your content<br />Identify links<br />Include standard links for navigation<br />Prepare images<br />Consider image placement<br />Resize images as necessary<br />Consider accessibility<br />Verify browser viewing<br />Proofread and check spelling<br />Adding Web Pages, Links, and Images<br />5<br />General Project Guidelines<br />
  6. 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<br />Click the desired Web site to display the site hierarchy<br />Adding Web Pages, Links, and Images<br />6<br />Opening an Existing Web Site<br />
  7. 7. Click File on the Application bar and then point to New<br />Click New to display the New Document dialog box. If necessary, click Blank Page<br />Click the desired page type, layout, and document type<br />Click the Create button<br />If necessary, click View on the Application bar, point to Toolbars, and then click Standard to display the Standard toolbar<br />Adding Web Pages, Links, and Images<br />7<br />Opening a New Document Window<br />
  8. 8. Click the Save button on the Standard toolbar to display the Save As dialog box<br />Type the desired file name in the File name text box<br />Click the Save button in the Save As dialog box to save the page in the desired save location<br />Adding Web Pages, Links, and Images<br />8<br />Opening a New Document Window<br />
  9. 9. Adding Web Pages, Links, and Images<br />9<br />Opening a New Document Window<br />
  10. 10. Vector Images<br />Bitmap images<br />GIF (Graphics Interchange Format)<br />Transparency<br />Animation<br />JPEG (Joint Photographic Experts Group)<br />Progressive JPEG<br />PNG (Portable Network Graphics)<br />Adding Web Pages, Links, and Images<br />10<br />Image File Formats<br />
  11. 11. Adding Web Pages, Links, and Images<br />11<br />Assets Panel<br />
  12. 12. Click Edit on the Application bar and then click Preferences to display the Preferences dialog box<br />Click Invisible Elements in the Category list to display the Invisible Elements options in the Preferences dialog box<br />Click the Anchor points for aligned elements check box to select this option, which makes it easier to align elements<br />Adding Web Pages, Links, and Images<br />12<br />Setting Invisible Element Preferences and Turning on Visual Aids<br />
  13. 13. Click the OK button in the Preferences dialog box to confirm the new setting and close the Preferences dialog box<br />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<br />If necessary, click Invisible Elements to add a check mark to the Invisible Elements command<br />Adding Web Pages, Links, and Images<br />13<br />Setting Invisible Element Preferences and Turning on Visual Aids<br />
  14. 14. Adding Web Pages, Links, and Images<br />14<br />Setting Invisible Element Preferences and Turning on Visual Aids<br />
  15. 15. Double-click the page to open in the Files panel<br />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<br />Adding Web Pages, Links, and Images<br />15<br />Opening a Web Page from a Local Web Site<br />
  16. 16. Adding Web Pages, Links, and Images<br />16<br />Opening a Web Page from a Local Web Site<br />
  17. 17. Click the Assets panel tab to display the Assets panel. Verify that the Images icon is selected<br />Click the desired image in the Assets panel to insert<br />Drag the image from the Assets panel to the desired location on the Web page<br />Type the desired alternate text in the Alternate text text box<br />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<br />Adding Web Pages, Links, and Images<br />17<br />Inserting an Image into the Web Page<br />
  18. 18. Adding Web Pages, Links, and Images<br />18<br />Inserting an Image into the Web Page<br />
  19. 19. Adding Web Pages, Links, and Images<br />19<br />Property Inspector Image Tools<br />
  20. 20. Adding Web Pages, Links, and Images<br />20<br />Image Alignment Options<br />
  21. 21. Click the image to align<br />Click the Align button in the Property inspector to display the alignment options<br />Click the desired alignment option<br />Adding Web Pages, Links, and Images<br />21<br />Aligning an Image<br />
  22. 22. Adding Web Pages, Links, and Images<br />22<br />Aligning an Image<br />
  23. 23. Click to select the image<br />Type the desired image width in the W text box<br />Type the desired image height in the H text box<br />Type the desired horizontal space in the H Space text box<br />Type the desired vertical space in the V Space text box<br />Click outside the image to remove the selection box and view the added space and new size<br />Adding Web Pages, Links, and Images<br />23<br />Adjusting the Image Size and the Horizontal Space<br />
  24. 24. Adding Web Pages, Links, and Images<br />24<br />Adjusting the Image Size and the Horizontal Space<br />
  25. 25. External image editor<br />Adobe Photoshop<br />Cropping<br />Resampling<br />Brightness and Contrast<br />Sharpening<br />Adding Web Pages, Links, and Images<br />25<br />Image Editing Tools<br />
  26. 26. Select the image to crop<br />Click the Crop tool in the Property inspector to apply the bounding box<br />Click and drag the appropriate crop handle inward until the bounding box is the desired size<br />Double-click inside the bounding box to apply the cropping by resizing the image to match the size of the bounding box<br />Adding Web Pages, Links, and Images<br />26<br />Cropping and Modifying the Brightness/Contrast of an Image<br />
  27. 27. Adding Web Pages, Links, and Images<br />27<br />Cropping and Modifying the Brightness/Contrast of an Image<br />
  28. 28. Select the image for which you wish to modify the brightness and contrast<br />Click the Brightness and Contrast tool in the Property inspector to display the Brightness/Contrast dialog box<br />Drag the Brightness slider to the desired setting<br />Drag the Contrast slider to the desired setting<br />Click the OK button to accept the Brightness and Contrast settings<br />Adding Web Pages, Links, and Images<br />28<br />Cropping and Modifying the Brightness/Contrast of an Image<br />
  29. 29. Adding Web Pages, Links, and Images<br />29<br />Cropping and Modifying the Brightness/Contrast of an Image<br />
  30. 30. Absolute link<br />Eternal link<br />Relative links<br />Document-relative link<br />Internal link<br />Root-relative link<br />Named anchor<br />E-mail link<br />Null link<br />Script link<br />Adding Web Pages, Links, and Images<br />30<br />Understanding Different Types of Links<br />
  31. 31. Drag to select the text you wish to turn into a link<br />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<br />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<br />Adding Web Pages, Links, and Images<br />31<br />Creating a Relative Link Using Point to File<br />
  32. 32. Adding Web Pages, Links, and Images<br />32<br />Creating a Relative Link Using Point to File<br />
  33. 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<br />Click the Make Link command and then click the desired file to link to in the Select File dialog box<br />Click the OK button in the Select File dialog box, and then click the selected text to display the underlined link<br />Adding Web Pages, Links, and Images<br />33<br />Creating a Relative Link Using the Context Menu<br />
  34. 34. Adding Web Pages, Links, and Images<br />34<br />Creating a Relative Link Using the Context Menu<br />
  35. 35. Drag to select the text you wish to turn into a link<br />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<br />Adding Web Pages, Links, and Images<br />35<br />Creating a Relative Link to the Home Page<br />
  36. 36. Drag to select the text you wish to turn into a link<br />Click the Link box in the Property inspector, and then type the Web address<br />Press the ENTER key<br />Adding Web Pages, Links, and Images<br />36<br />Creating Absolute Links<br />
  37. 37. Adding Web Pages, Links, and Images<br />37<br />Creating Absolute Links<br />
  38. 38. Drag to select the text you wish to turn into an e-mail link<br />Click Insert on the Application bar and then point to Email Link to highlight it<br />Click Email Link to display the Email Link dialog box<br />Click the Email text box and then type the e-mail address to which you wish to link<br />Click the OK button to accept the entries in the Email Link dialog box<br />Adding Web Pages, Links, and Images<br />38<br />Adding an E-Mail Link<br />
  39. 39. Adding Web Pages, Links, and Images<br />39<br />Adding an E-Mail Link<br />
  40. 40. Click the Split button on the Document toolbar to display Code view in the left pane and Design view in the right pane<br />Adding Web Pages, Links, and Images<br />40<br />Using Design View and Code View Simultaneously<br />
  41. 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<br />Adding Web Pages, Links, and Images<br />41<br />Using Live View<br />
  42. 42. Adding Web Pages, Links, and Images<br />42<br />Using Live View<br />
  43. 43. Add pages to a Web site<br />Describe Dreamweaver’s image accessibility features<br />Describeimage file formats<br />Insert, resize, and align images within a Web page<br />Describe the different types of links<br />Create relative, absolute, and e-mail links<br />Chapter Summary<br />Adding Web Pages, Links, and Images<br />43<br />
  44. 44. Describe how to change the color of links<br />Edit and delete links<br />Check spelling<br />Describe Code view, Split view, and Design view<br />Display Code view<br />Use Live view<br />Adding Web Pages, Links, and Images<br />44<br />Chapter Summary<br />
  45. 45. Chapter 2 Complete<br />Adobe Dreamweaver CS5<br />

×