SITE DESIGN My Graphics Lab Adobe Dreamweaver CS

OBJECTIVES This presentation covers the following ACA Exam objectives: n 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. n 2. 2 Produce website designs that work equally well on various operating systems and browser versions/configurations. n 2. 5 Demonstrate knowledge of flowcharts, storyboards, and wireframes to create web pages and a sitemap (site index) that maintain the planned website hierarchy. n 5. 5 Create web page templates. Copyright © 2013 My. Graphics. Lab / Pearson Education

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

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

PAGE WIREFRAMES (1 OF 2) n A wireframe is a visual guide to illustrate page structure for a website. n 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. n 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. n See Adobe Dreamweaver CS 6 Classroom in a Book, pages 75– 77, for a good introduction. Copyright © 2013 My. Graphics. Lab / Pearson Education

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

BUILDING THE DESIGN (PROTOTYPES, COMPS) (1 OF 2) n Build page models using Fireworks, Photoshop, or Illustrator. n Build composition in layers. n Generally, two designs are submitted for review: § Each design generally contains a home page and an internal page. n 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) n For a good overview on planning a website, watch the video Planning Your Website. Copyright © 2013 My. Graphics. Lab / Pearson Education

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

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

FROM DESIGN TO DEVELOPMENT (2 OF 2) n 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 My. Graphics. Lab / Pearson Education

CONVERTING THE DESIGN INTO WEB PAGES n n 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). Java. Script is generally used for interactivity. Copyright © 2013 My. Graphics. Lab / Pearson Education

FILE AND DIRECTORY STRUCTURE n 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. ” n Within the root folder, there may be many subfolders. n 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 My. Graphics. Lab / Pearson Education

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

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

FLUID GRID LAYOUTS n Included in Dreamweaver CS 6 n Provide a visual way to control page layout for multiple screen sizes n Automatically integrate cross-browser consistency through the use of HTML 5 boilerplate and the respond. js library n 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 My. Graphics. Lab / Pearson Education

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

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

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

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