Using Adobe® Dreamweaver® and Photoshop® An Introduction

ARTISTIC WEB DESIGN

PART ONEThe design phase before launching Dreamweaver

Chapter 3-1

CHAPTER 3Designing the layout of your web site

Chapter 3-2

Keeping visitors in your site: designing an effective scheme

Examining navigational layouts

Studying the navigation of existing sites Navigational guidelines Home page information Link pages Navigational schemes Site maps Consistent hassle free navigation

Chapter 3-3

Creating a navigational flowchart

Planning and organizing site content Creating flowcharts for strategic site planning Checking for omissions: reviewing your designs with others

Chapter 3-4

Designing for monitor resolutions

Avoiding horizontal scrollingDesigning for 800 x 600Designing for 1024 x 768+The safe solution: centered layoutsThe design benefits of backgroundsLiquid layoutsElastic layouts

Chapter 3-5

Tailoring the principles of design to the challenges of the web

Symmetry & Balance Repose Congruity:

Content & Visual Contrast Repetition Unity

Design principles of web layout

Chapter 3-6

Examining VisualCongruity

Text and imagealignment

Design principles of web layout

Chapter 3-7

Unity: the final checklistDesign balanced?Breathing space?Consistent content?Text and graphics aligned?Contrast evident when applicable?Repetitive design elements to ensure

continuity?

Design principles of web layout

Chapter 3-8

The major components of a page

HeadingNavigational system(s)Body contentBreathing spaceFooter navigation

Formulating the structure of your pages

Chapter 3-9

Creating layouts using Photoshop

Measurement set to pixels

Brainstorming your design ideas through mock layouts

Heights Consider the fold and

the page’s future content Brainstormi

ng How many? How much

detail?