Final Design Notes - November 22, 2009

A. Index Page - Welcome

1. Eliminate redundant Pens Icon Image.
2. Create some custom imagery for eye candy and some fun.
3. Move CSS Icon Image to Section Two - Intro to Dreamweaver.

B. Intro to Dreamweaver

1. Condense two pages of text into 1 by using Spry Menu Tabs.
2. Using a Fireworks tool, select, choose and deploy final colors for tab, content, and rollover display areas. Re-style the default CSS for design style consistency.

C. Digital Imaging Applications

1. Condense Unit 3 Digital Imaging Applications from 6 pages to 3 by using spry menu tabs. The new page - Digital Applications 1 now consists of two tabbed panels consolidating page 1, 2, and 4.
2. Page 3 has been re-named Digital Applications II and gets a new Fireworks generated table. Rollovers and image swaps, using external image files, is the technique used in this display. The table is sized down to accommodate the sites main content area.
3. Page 5 and 6 are consolidated and re-med to Digital Applications III. The new page uses a Spry Tabbed to accomplish the task.
4. The images in this area have been reduced in size by 50%. Highslide Javascript behaviors are used to open the original size.

D. Typography

1. Revise CSS design image diagram.
2. Text content has been revised as necessary.
3. The typography unit, previously two separate HTML pages has been consolidated into one page. This new page demonstrates the use of a Spry Accordion panel.
4. The default Spry Accordion Panel CSS styles have been modified for site design consistency.

E. Tables

1. Review and refine the table layout to maximize the available space.
2. Add borders, condense space, and eliminate unnecessary tags.
3. Condense content in the sidebar.
4. This page sets the standard height for both the sidebar and the content area. The sidebar height being the determining factor.
5. The open new browser window behaviors, formerly on this page, have been replaced by The Highslide Image Expander.

F. Dynamic Applications

1. Consolidate information into two Spry Tabbed Panels. With CSS Styles previous applied and in place, making this change is a quick solution to reduce scrolling.

G. Global Changes

1. Reduce Sidebar width from 240px to 200px.
2. Adjust margins and padding on the paragraph and heading tags for consistency. Reduce the standard font size across the boards to 12px. This sizing applies to standard text paragraphs and list items.
3. Revise, review and re-design menu layout.
4. Add a new class to create clear navigation. Add a new ID named "current". This ID, with a dummy link added to each local page, allows the button to remain in the rollover state while you are on the targeted page.
5. Reduce the button font size to 10 px Bold to enhance visual focus.
6. Reduce the header from 165 px to 135 px high.
7. Resolve the header image issue for browser compatibility by replacing the PNG images with 1 single image.The new image is a JPG consisting of a selection of the header that encompasses the Site Title, the Pens Icon and a section of the Background. The image is placed in the Header Division as a Background Image.
8. With the page consolidation complete, the menu bar has been re-designed and a new navigation system is now in place. Simple rollover buttons for the navigation bar have been created, thereby adding some texture and aesthetic appeal.
9. A textured background has been added to the side bar for visual interest.

Round tripping from Photoshop to Dreamweaver

The purpose of this demonstration is to show you how to take a design comp produced in Photoshop and build a functional CSS based web interface in Dreamweaver CS4. The following outline is an overview of the project's process flow. Many of the projects's links will lead you to Workflow Techniques, this project's companion page.

• Setting up Photoshop Preferences
1. Open preferences > from the Rulers menu > choose Pixels. From the Units menu > choose pixels.
2. Open a new file by selecting: File > New. The new file dialogue box will appear. Name your file in the text field. Use a naming convention consistent with the Name of Your Site.
3. Choose Web from the Preset Menu. Select your size from the drop-down menu. We will be using 1024 x 768 for this exercise.
4. Set the Resolution to 72 ppi, since this will become a web document, and the color mode to RGB. Choose a white background.
5. Create the Wire Frame and complete the design with graphic elements.
• Setting up Dreamweaver
1. Define your new site and Select its Local Root Folder.
2. Create a new HTML Document and save it in the appropriate location in your site's file structure hierarchy.
3. Develop the core CSS Rules to structure the layout. Use the Wire Frame to define the primary areas: Header, Sidebar, Content, and Footer. The footer in this design will contain a "nested div" named "footer content".
• A separate rule is required for each area.
• Normalize key properties such as padding and margins.
• Restrain portions of the layout by creating an "OuterWrapper". In this application, the "outerWrapper" will center the design on the screen.
• The primary areas will be defined with unique ID's: #outerWrapper, #header, #sidebar, #content, #footer, #footerContent. See the CSS Rules and the accompanying video here.
4. Build the CSS layout with "<div> tags". See the video.
• From Photoshop to Dreamweaver - Incorporating Background Images
1. Adding the background image to the <body> tag with a selection from the layered PSD Interface Comp.
2. See the video on Photoshop selections. This video demonstrates making selections in Photoshop and creating new files using the Copy Merge option. Choose a folder for your PSD's in the working images folder of your site as you will be optimizing them in Dreamweaver..
3. Add the background images to the body, the header and the footers, with selections from Photoshop. To accomplish this task, you must have IDs in place and your divisions have also been defined. See the video.
4. Create and style the footer outside of the #outerwrapper, allowing it to tile across the bottom of the page. The floats must be cleared for the footer to tile across the bottom of the page. Click here for the code.