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)
Learn how to use CSS to style your navigation using the provided template. (Running time: 14:36)
In this video, learn how to create templates with editable regions using the provided template. (Running time: 8:07)
See how to edit and design audio using the provided template. (Running time: 7:52)
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
- Simple styling with CSS
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page
- Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 2: Markup preparation
- Taking a Fireworks comp to a CSS-based layout in Dreamweaver – Part 3: Layout and CSS
- Designing with CSS – Part 5: Building site navigation
- Creating your first website – Part 3: Styling the header and navigation menu
- Small web team uses CSS to develop big-time magazine site
- Tableless layouts with Dreamweaver CS4
- Creating a simple three-column design
- Working with images in Dreamweaver CS4
Tutorials and samples |
