SlideShare a Scribd company logo
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.

More Related Content

PDF
9 Things You Can Do Now for 2009 Fundraising Success
DOC
Basic Web Design In Dreamweaver
PPTX
Adobe dreamweaver
PPTX
Adobe dreamweaver
PPT
Developing a Web Page
PDF
Introduction to Dreamweaver
PPT
Dreamweaver & Me PPT
PPTX
Unit a adobe dreamweaver cs6
9 Things You Can Do Now for 2009 Fundraising Success
Basic Web Design In Dreamweaver
Adobe dreamweaver
Adobe dreamweaver
Developing a Web Page
Introduction to Dreamweaver
Dreamweaver & Me PPT
Unit a adobe dreamweaver cs6

Viewers also liked (17)

PDF
Dreamweaver-Vision-2013-14
PDF
Dreamweaver and Me
KEY
Internet Broadcasting
PDF
DREAMWEAVER eLEARNING
PDF
Developing Modern Web Interfaces with Dreamweaver CC
PDF
Ajax Development With Dreamweaver
PPTX
Dreamweaver - Introduction AND WALKTHROUGH
PPTX
유니티애즈 적용가이드_유니티 엔진 5.2버전
PPTX
ADOBE DREAMWEAVER
 
PDF
Makalah Desain web menggunakan dreamweaver 8
PPTX
Windows 10 Main User Interface (UI)
PPT
Web Page Authoring 1
DOCX
How to install adobe dreamweaver step by step with pictures
PDF
Dreamweaver cs6 step by step
PPTX
Web topic 13 html validation tools
PPT
Lecture 1: Web Design + Usability
Dreamweaver-Vision-2013-14
Dreamweaver and Me
Internet Broadcasting
DREAMWEAVER eLEARNING
Developing Modern Web Interfaces with Dreamweaver CC
Ajax Development With Dreamweaver
Dreamweaver - Introduction AND WALKTHROUGH
유니티애즈 적용가이드_유니티 엔진 5.2버전
ADOBE DREAMWEAVER
 
Makalah Desain web menggunakan dreamweaver 8
Windows 10 Main User Interface (UI)
Web Page Authoring 1
How to install adobe dreamweaver step by step with pictures
Dreamweaver cs6 step by step
Web topic 13 html validation tools
Lecture 1: Web Design + Usability
Ad

Similar to Introduction To Web Design with Dreamweaver Basics (20)

PPT
Introduction To Web Design
PPT
MVC For Web Development
PDF
Getting Started With Django
PDF
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
PPTX
Adobe Day UK 2013: Seek and ye shall find
PDF
Web applications support on AGL
PDF
JWC 2015 - Mobile apps development for Joomla!
PPTX
220908 Portfolio Pdf Ver
PDF
Webmaster Jam Session: Design and Development Behind the Scenes Day Two
 
PDF
Chad Udell - Developers are from Mars, Designers are from Venus
PPT
Would You Consider Internet Explorer for Your Website Design?
PPSX
Week 6 1 Listing The Elements
PPTX
The Future of Mobile - Presented at SMX Munich
PPTX
Django Level Four Django Level Four.pptx
PDF
JSDay 2013 - Practical Responsive Web Design
PDF
Software Development Practices
PDF
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 
PPTX
Javascript & SEO 2019
PDF
A Period of Transition
PPTX
Top Website Mistakes
Introduction To Web Design
MVC For Web Development
Getting Started With Django
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
Adobe Day UK 2013: Seek and ye shall find
Web applications support on AGL
JWC 2015 - Mobile apps development for Joomla!
220908 Portfolio Pdf Ver
Webmaster Jam Session: Design and Development Behind the Scenes Day Two
 
Chad Udell - Developers are from Mars, Designers are from Venus
Would You Consider Internet Explorer for Your Website Design?
Week 6 1 Listing The Elements
The Future of Mobile - Presented at SMX Munich
Django Level Four Django Level Four.pptx
JSDay 2013 - Practical Responsive Web Design
Software Development Practices
Webmaster Jam Session: Design and Development Behind the Scenes Day One
 
Javascript & SEO 2019
A Period of Transition
Top Website Mistakes
Ad

Recently uploaded (20)

PDF
Urban Design Final Project-Context
PPTX
areprosthodontics and orthodonticsa text.pptx
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PDF
Urban Design Final Project-Site Analysis
DOCX
The story of the first moon landing.docx
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPT
Machine printing techniques and plangi dyeing
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PPTX
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
PPTX
building Planning Overview for step wise design.pptx
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
PDF
Interior Structure and Construction A1 NGYANQI
PPT
UNIT I- Yarn, types, explanation, process
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PPT
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
PPTX
Special finishes, classification and types, explanation
Urban Design Final Project-Context
areprosthodontics and orthodonticsa text.pptx
DOC-20250430-WA0014._20250714_235747_0000.pptx
Urban Design Final Project-Site Analysis
The story of the first moon landing.docx
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
YOW2022-BNE-MinimalViableArchitecture.pdf
Machine printing techniques and plangi dyeing
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
Causes of Flooding by Slidesgo sdnl;asnjdl;asj.pptx
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
building Planning Overview for step wise design.pptx
pump pump is a mechanism that is used to transfer a liquid from one place to ...
YV PROFILE PROJECTS PROFILE PRES. DESIGN
Interior Structure and Construction A1 NGYANQI
UNIT I- Yarn, types, explanation, process
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
mahatma gandhi bus terminal in india Case Study.pptx
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
Special finishes, classification and types, explanation

Introduction To Web Design with Dreamweaver Basics

  • 1. Presented by: Ermilo John D. Gialogo, Jr. BSCS-IST, De La Salle University-Manila
  • 2. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8 HOW DO I START?
  • 3. 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
  • 4. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 5. 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
  • 6. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 7. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 8. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 9. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 10. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 11. 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
  • 12. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 13. 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
  • 14. 08/06/09 Ermilo John D. 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 and Configuring a Website Site Definition Files Panel 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. 08/06/09 Ermilo John D. Gialogo, Jr. ● Introduction to Web Design with Dreamweaver 8 WRAP UP THE STUFF.