Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction To Web Design with Dreamweaver Basics

3,487 views

Published on

These slides were presented to the ID108 Instructional Systems Technology majors of the Computer Science degree takers of De La Salle University.

The presentation aims to teach basic layouting principles and an outline on how to teach Dreamweaver 8.

Published in: Design, Technology, Business

Introduction To Web Design with Dreamweaver Basics

  1. 1. Presented by: Ermilo John D. Gialogo, Jr. BSCS-IST, De La Salle University-Manila
  2. 2. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8 HOW DO I START?
  3. 3. <ul><li>Set up the website anatomy </li></ul><ul><ul><li>Containing Block </li></ul></ul><ul><ul><li>Logo </li></ul></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>White Space </li></ul></ul><ul><ul><li>Footer </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  4. 4. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  5. 5. <ul><li>Layout using Rule of Thirds </li></ul><ul><ul><li>Application of the “divine proportion” </li></ul></ul><ul><ul><ul><li>Generally makes the site aesthetically appealing </li></ul></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  6. 6. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  7. 7. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  8. 8. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  9. 9. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  10. 10. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  11. 11. <ul><li>Common layout examples </li></ul><ul><ul><li>Left-column navigation </li></ul></ul><ul><ul><ul><li>http://www.thinkgeek.com/index.shtml </li></ul></ul></ul><ul><ul><li>Right-column navigation </li></ul></ul><ul><ul><ul><li>http://www.audi.com </li></ul></ul></ul><ul><ul><li>Three-column navigation </li></ul></ul><ul><ul><ul><li>http://store.apple.com/ </li></ul></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  12. 12. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  13. 13. <ul><li>Users won't read your text thoroughly in a word-by-word manner. </li></ul><ul><ul><li>Scanning </li></ul></ul><ul><ul><li>Exhaustive reading is rare </li></ul></ul><ul><li>The first two paragraphs must state the most important information. </li></ul><ul><li>Start subheads, paragraphs, and bullet points with information </li></ul><ul><ul><li>Carrying words that users will notice when scanning </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  14. 14. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8 WHAT IS DREAMWEAVER? Does it weave dreams?
  15. 15. <ul><li>What is Dreamweaver? </li></ul><ul><ul><li>WYSIWYG HTML Editor </li></ul></ul><ul><ul><li>Site Manager </li></ul></ul><ul><ul><ul><li>Styles </li></ul></ul></ul><ul><ul><ul><li>Links </li></ul></ul></ul><ul><ul><li>IDE for Coders </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  16. 16. <ul><li>Adding Text and List, Preview in Browse </li></ul><ul><ul><li>Creating a new page </li></ul></ul><ul><ul><li>Setting page properties </li></ul></ul><ul><ul><ul><li>Introducing Cascading Style Sheets </li></ul></ul></ul><ul><ul><li>Text Attributes in the Property Inspector </li></ul></ul><ul><ul><li>Saving your work </li></ul></ul><ul><ul><li>Previewing in your browser </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  17. 17. <ul><li>Defining and Configuring a Website </li></ul><ul><ul><li>Site Definition </li></ul></ul><ul><ul><li>Files Panel </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  18. 18. <ul><li>Links, Anchors and MailTo </li></ul><ul><ul><li>Relative and Absolute Links </li></ul></ul><ul><ul><ul><li>Absolute path – complete URL </li></ul></ul></ul><ul><ul><ul><li>Relative path – location of the file in relation to the page being viewed </li></ul></ul></ul><ul><ul><li>Anchors </li></ul></ul><ul><ul><ul><li>Why anchors? </li></ul></ul></ul><ul><ul><ul><li>Naming an anchor </li></ul></ul></ul><ul><ul><ul><li>Linking to an anchor </li></ul></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  19. 19. <ul><li>Inserting Media </li></ul><ul><ul><li>Inserting Images </li></ul></ul><ul><ul><li>Inserting Flash Videos </li></ul></ul><ul><li>Web Page Layout with Tables </li></ul><ul><ul><li>Inserting a table </li></ul></ul><ul><ul><li>Resizing </li></ul></ul><ul><ul><li>Merging </li></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  20. 20. <ul><li>Tips and Tricks on Layouting </li></ul><ul><ul><li>Apply the following settings on the table </li></ul></ul><ul><ul><ul><li>Cell Padding: 0 </li></ul></ul></ul><ul><ul><ul><li>Cell Spacing: 0 </li></ul></ul></ul><ul><ul><ul><li>Border: 0 </li></ul></ul></ul>08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  21. 21. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8 WRAP UP THE STUFF.

×