Excerpt: Bring Your Web Design to Life
Created
27 June 2011
Requirements
User level
Beginning
Required products
- Dreamweaver (Download trial)
- Creative Suite 5.5 Web Premium (Download trial)
In working with design companies and advertising agencies around the world, we at Codify Design Studio noticed a common gap in the web design workflow—a gap between designers and developers, and the creation of the HTML and CSS necessary to bring that design to life within a browser. This gap in the workflow results in aspects of the designer's vision being unrealized in the final design represented in a web browser.
In my seminars, I ask designers to raise their hands if they would be willing to send only artwork files to their commercial printers, and let the prepress men do the layout work instead of them. No designer raises his or her hand. Just as print designers are responsible for bringing their designs to the press, web designers should be responsible to bring their designs to the browser.
To help designers transition to web design, I've written and designed Bring Your Web Design to Life: Creating Rich Media Websites with Adobe Creative Suite. This unique video series and reference guide starts form the very beginning and teaches designers step-by-step how to bring their web design to the browser. You'll start with a design comp in Photoshop, click on the slicing tool, and get to work creating the assets we need for your web layout.
You'll create new blank HTML and CSS files in Dreamweaver, and go step-by-step through the process of assembling text and graphics into our desired layout. As you work, you'll use the Dreamweaver site management features and create a fully functioning four-page website.
In addition, this video workbook series shows you how to animate an Illustrator file in Flash, edit video in Photoshop, introduce you to Ajax via Adobe's Spry framework, and use Dreamweaver to manage the whole project.
The included reference guide features graphical representations of web design concepts, time codes for referencing the video, an area to take notes, and lots of sequential screenshots—all designed to refresh your memory each time you start a new project.
See for yourself
Watch and read four sample chapters of this unique approach to learning HTML and CSS.
- Download sample chapters (PDF, 2.4 MB)
Chapter 2: Use CSS to style your navigation
Learn how to use CSS to style your navigation using the provided template. (Running time: 14:36)
Chapter 3: Create templates with editable regions
In this video, learn how to create templates with editable regions using the provided template. (Running time: 8:07)
Chapter 5: Edit and design audio
See how to edit and design audio using the provided template. (Running time: 7:52)
Chapter 7: Add and style a Spry Widget
See in this video how to add and style a Spry widget using the provided template. (Running time: 30:50)
Where to go from here
If you liked what you read and saw, check out the complete video workbook series:
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- Working with Drupal in Dreamweaver CS5
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page
- Understanding Spry basics
- Getting to know your CSS selectors – Part 1: CSS2.1 and attribute selectors
- Getting to know your CSS selectors – Part 2: CSS3 pseudo-classes and pseudo-elements
- Using and customizing jQuery Mobile themes
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
