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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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