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

Introduction To Web Design with Dreamweaver Basics

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