1. Copyright © 2013 MyGraphicsLab / Pearson Education
SITE DESIGN
MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication
Copyright © 2013 MyGraphicsLab / Pearson Education

2. Copyright © 2013 MyGraphicsLab / Pearson Education
OBJECTIVES
This presentation covers the following ACA Exam objectives:
2.1 Demonstrate general and Dreamweaver-specific knowledge of best practices for designing a website, such as maintaining consistency, separating content from design, using standard fonts, and utilizing visual hierarchy.
2.2 Produce website designs that work equally well on various operating systems and browser versions/configurations.
2.5 Demonstrate knowledge of flowcharts, storyboards, and wireframes to create web pages and a sitemap (site index) that maintain the planned website hierarchy.
5.5 Create web page templates.
Copyright © 2013 MyGraphicsLab / Pearson Education

3. Copyright © 2013 MyGraphicsLab / Pearson Education
SITEMAP (1 OF 2)
A sitemap depicts the pages you expect to create in order to meet site requirements.
When creating a sitemap, give the pages short filenames with a brief description of the page’s purpose.
A sitemap determines the information architecture and content flow of the site.
Copyright © 2013 MyGraphicsLab / Pearson Education

4. Copyright © 2013 MyGraphicsLab / Pearson Education
SITEMAP (2 OF 2)
A sitemap acts as the foundation for navigation tiers, page hierarchy, and relationships between pages.
A sitemap identifies page types and purpose (e.g., home, about, contact, etc.).
A sitemap can be hand sketched or created using graphics/charting software (Fireworks, Microsoft Visio, PowerPoint, Illustrator).
Copyright © 2013 MyGraphicsLab / Pearson Education

5. Copyright © 2013 MyGraphicsLab / Pearson Education
PAGE WIREFRAMES (1 OF 2)
A wireframe is a visual guide to illustrate page structure for a website.
Wireframe and thumbnail diagrams are good methods to quickly experiment with alternative page layouts without wasting a lot of time working in code that may never be used.
Wireframes not only visually illustrate the overall page design elements, placement, and composition, but also are very useful when it’s time for coding the HTML layout structure and the CSS.
See Adobe Dreamweaver CS6 Classroom in a Book, pages 75–77, for a good introduction.
Copyright © 2013 MyGraphicsLab / Pearson Education

6. Copyright © 2013 MyGraphicsLab / Pearson Education
PAGE WIREFRAMES (2 OF 2)
Use wireframes to test design concepts before any actual design is presented.
Use wireframes to assess alternate page designs.
Be open-minded to changes from client after presenting wireframes.
Sketch wireframe concepts on paper or use wireframing software:
Fireworks
Illustrator
InDesign
Copyright © 2013 MyGraphicsLab / Pearson Education

7. BUILDING THE DESIGN (PROTOTYPES, COMPS) (1 OF 2)
Build page models using Fireworks, Photoshop, or Illustrator.
Build composition in layers.
Generally, two designs are submitted for review:
Each design generally contains a home page and an internal page.
The design should determine the page width and should be implemented in the model:
Fixed or fluid (expands or contracts)
Responsive design (width changes based on media and device size)
For a good overview on planning a website, watch the video Planning Your Website.
Copyright © 2013 MyGraphicsLab / Pearson Education

8. BUILDING THE DESIGN (PROTOTYPES, COMPS) (2 OF 2)
When creating the design, place all page elements in the composition at the actual size.
Use the right fonts and color you have determined in the initial site plan.
Explore the possibility of purchasing professionally available designs and customizing them.
See Adobe Dreamweaver CS6 Classroom in a Book, pages 78–79.
Copyright © 2013 MyGraphicsLab / Pearson Education

9. FROM DESIGN TO DEVELOPMENT (1 OF 2)
After design approval sign-off, development begins.
Generally, the design from Photoshop or Fireworks will be sliced, and the graphics optimized and exported as GIF, JPEG, or PNG.
Photoshop and Fireworks can export complete HTML files, but that should generally be avoided.
Copyright © 2013 MyGraphicsLab / Pearson Education

10. FROM DESIGN TO DEVELOPMENT (2 OF 2)
The HTML/CSS code exported from Photoshop or Fireworks should generally be avoided for full-page layouts:
Not very efficient
Dreamweaver should be used instead
Copyright © 2013 MyGraphicsLab / Pearson Education

11. CONVERTING THE DESIGN INTO WEB PAGES
Structure and presentation should be separate and independent.
HTML is used to structure the page layouts and content.
CSS is used to create page styles and appearance (presentation).
JavaScript is generally used for interactivity.
Copyright © 2013 MyGraphicsLab / Pearson Education

12. FILE AND DIRECTORY STRUCTURE
Any website, regardless of its size, must have a physical location on a computer (local or remote server). The location is a folder known as the “root folder.”
Within the root folder, there may be many subfolders.
Creating subfolders is very helpful in keeping organization. For example, very commonly a website root folder will include an “images” subfolder, a “scripts” subfolder, a “media” subfolder, and so on, depending on the site.
Copyright © 2013 MyGraphicsLab / Pearson Education

13. INTRODUCING DREAMWEAVER CS6
Professional software used to create and manage an entire site
Builds standards-compliant HTML and CSS
Incorporates interactivity via JavaScript and the Spry framework
Extensible via widgets and hundreds of publicly available extensions and add-ons
Contains many professionally made templates and page layouts that can be used as starters
Helps manage the entire site, including all links and assets
Copyright © 2013 MyGraphicsLab / Pearson Education

14. DREAMWEAVER CS6 DESIGN BASICS
Dreamweaver contains many predesigned layouts:
Blank Page > Page Type > Layout
Fixed and liquid width layouts
Each layout comes with an external style sheet, HTML structure, and placeholder copy
Dreamweaver CS6 comes with two HTML 5 starter layouts
Copyright © 2013 MyGraphicsLab / Pearson Education

15. Copyright © 2013 MyGraphicsLab / Pearson Education
FLUID GRID LAYOUTS
Included in Dreamweaver CS6
Provide a visual way to control page layout for multiple screen sizes
Automatically integrate cross-browser consistency through the use of HTML5 boilerplate and the respond.js library
Used for responsive design (an approach to web design in which a site provides an optimal viewing experience on any device, with a minimum of resizing, panning, and scrolling)
Copyright © 2013 MyGraphicsLab / Pearson Education

16. SITE DESIGN CONSISTENCY: TEMPLATES
Consider using templates:
Dreamweaver DWT files
A template is a master page from which related child pages are created.
A template maintains the overall look and feel of the site.
See Adobe Dreamweaver CS6 Classroom in a Book, pages 140–165.
Copyright © 2013 MyGraphicsLab / Pearson Education

17. DREAMWEAVER TEMPLATES
Changes in pages based on templates can be made only to editable regions, thereby preserving the consistency of other non-editable regions.
Making changes to a template consistently updates all non-editable regions in the site.
Copyright © 2013 MyGraphicsLab / Pearson Education

18. SITE DESIGN CONSISTENCY: LIBRARIES
Consider using libraries in Dreamweaver.
Libraries are reusable bits of content or code (tables, lists, navigation bars, footer content).
A library is similar in some ways to a template but on a smaller scale.
Making changes to library items consistently updates all instances in the site.
See Adobe Dreamweaver CS6 Classroom in a Book, pages 152–156.
Copyright © 2013 MyGraphicsLab / Pearson Education

19. SITE DESIGN CONSISTENCY: COLORS
Build a set of color swatches in Dreamweaver for consistency:
You can add any colors, not just web-safe colors.
Use the “Favorites” mode in the colors category in the Assets panel to build color swatches for a certain site.
Use the built-in web-safe font sets in Dreamweaver.
Add font sets and reuse as needed.
Copyright © 2013 MyGraphicsLab / Pearson Education

20. SITE DESIGN CONSISTENCY: FONTS
Use the built-in web-safe font sets in Dreamweaver.
Add font sets and reuse as needed.
Copyright © 2013 MyGraphicsLab / Pearson Education