1 / 34

Chapter Lessons

OVERVIEW. Chapter Lessons. Create head content and set page properties Create, import, and format text Add links to Web pages Use the History panel and edit code Modify and test Web pages. INTRODUCTION. Developing a Web page. Understanding Page Layout Use White Space Effectively

artan
Download Presentation

Chapter Lessons

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. OVERVIEW Chapter Lessons • Create head content and set page properties • Create, import, and format text • Add links to Web pages • Use the History panel and edit code • Modify and test Web pages Developing a Web Page

  2. INTRODUCTION Developing a Web page • Understanding Page Layout • Use White Space Effectively • Limit Multimedia Elements • Keep it Simple • Use an Intuitive Navigation Structure • Apply a Consistent Theme Developing a Web Page

  3. LESSON 1 Creating Head Content • A web page is composed of two sections: • Head - includes the page title and meta tags which are not visible to the web browser. • Body Developing a Web Page

  4. LESSON 1 Creating Head Content • Title - browser title bar • Keywords - search • Description - search results Developing a Web Page

  5. LESSON 1 Head Content Title text box on Document Toolbar Head Content section Meta icon Title icon Developing a Web Page

  6. LESSON 1 Create Head Content…<html><head> <title>TripSmart</title> <meta name=“keywords” content=“…”> <meta name=“description” content=“…”></head><body….>…..</body></html> Developing a Web Page

  7. LESSON 1 Web Page Properties • Background color • Font color • Link colors (unvisited, visited, active) Developing a Web Page

  8. LESSON 1 Web-Safe Colors • 216 colors • RGB • Hexidecimalvalues Developing a Web Page

  9. LESSON 1 Background color Background Color box Strikethrough button Hexadecimal Number for white White Developing a Web Page

  10. LESSON 2 Create, Import and Format Text Adding text to a Dreamweaver page… • Type in Dreamweaver • Copy/Paste [Ctrl+C] and [Ctrl+V] (Windows)[Cmd+C] and [Cmd+V] (Macintosh) • Import Word Document Developing a Web Page

  11. LESSON 2 Web fonts • Browsers use visitor’s fonts • Font combinations • Serif and Sans Serift T • Graphic text for funky fonts Developing a Web Page

  12. LESSON 2 Text Property Inspector Selected address text Font List Size list arrow Style buttons Developing a Web Page

  13. LESSON 2 Font Size • “3” - Default browser size • “1” through “7”, or • “-7” through “+7” Developing a Web Page

  14. LESSON 2 Web filenames Do not use: Spaces Special characters Punctuation Capital letters Developing a Web Page

  15. LESSON 2 Importing Microsoft Office Documents Select version of Word • File Menu and select Import • Select file to be imported into Dreamweaver • Command Menu and select Clean Up Word HTML Developing a Web Page

  16. LESSON 3 Add Links to Web Pages Links Developing a Web Page

  17. LESSON 3 Link properties • Link names - informative • Mail to links • Hyper text - topic • Graphic • Formatting properties - consistent • Address or path - relative vs absolute Developing a Web Page

  18. LESSON 3 Broken Links • Typos • Pages move • Sites move • Sites expire Developing a Web Page

  19. LESSON 3 Add a Link Selected text Link text box Browse for File Icon Developing a Web Page

  20. LESSON 3 E-Mail Link(mailto:) Text for e-mail Link Link Information Developing a Web Page

  21. LESSON 3 Site Map with links Expand/Collapse button For pages Linked to Home page E-mail link Developing a Web Page

  22. LESSON 4 History Panel…functions • Undo • Redo • Replay Slider Red X indicates Action cannot Be undone Developing a Web Page

  23. LESSON 3 History Panel…properties • 50 steps • Preferences adds more • Be careful - increasing steps uses memory Developing a Web Page

  24. LESSON 3 Code Inspector • Code View in a floating window Options Line number Of the HTML Code Developing a Web Page

  25. LESSON 4 Reference Panel • Open from Code Inspector or Reference Panel HTML Tag Tag Description Developing a Web Page

  26. LESSON 4 Date Object Will change the data each time you save the document Developing a Web Page

  27. LESSON 4 Comment and Date HTML Comment Tag Developing a Web Page

  28. LESSON 5 Modify and Test Pages…in Preview • Proofreading • Window size • Links Developing a Web Page

  29. LESSON 5 Test window sizeswithin Dreamweaver Default Screen sizes Developing a Web Page

  30. LESSON 5 Dreamweaver Default Screen Sizes Developing a Web Page

  31. LESSON 5 Test Pages…in field • Monitors size and resolution • Platforms unix, mac, pc • Browsers explorer, netscape, aol Developing a Web Page

  32. LESSON 5 Under Construction • Don’t do it! • Only causes frustration to the end user Developing a Web Page

  33. SUMMARY Chapter B Tasks • Create head content • Set page properties • Import and Format text • Add links • Use History Panel • Use Code Inspector • Test Web pages Developing a Web Page

More Related