Examine the design comp

Typically, you don't begin building a website by opening Dreamweaver and laying out pages right away. The first steps to creating a website begin on a piece of paper, or in a graphics-editing application like Macromedia Fireworks. Graphic designers usually sketch out a piece of comprehensive artwork (also known as a "comp") for the website in order to show it to the client and make sure that the initial ideas for the site meet with their client's approval.

A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, "I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips." Based on that discussion, the designer begins planning the layout of the site, and makes sketches of sample pages that fulfill the client's requirements.

This tutorial provides you with the completed and approved comp for Cafe Townsend, a fictional restaurant that has requested a website. As the web designer, it's your job to transform the comp into a working web page (most likely with the help of other graphics designers and Flash developers).

You'll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. In the next sections, you'll use Dreamweaver to lay out this design.

You can also open the original comp file if you want to see it on the computer screen. You can find the comp, homepage-mockup.jpg, in the fireworks_assets folder of the cafe_townsend folder that you copied to your hard drive in Tutorial: Setting Up Your Site and Project Files You might even want to print out the comp so that you can have it in front of you as you build your page.

Comments

Tammerlane said on Jan 4, 2007 at 12:49 PM :

When I try to open the homepage-mockup.jpg file as suggested in the tutorial, I get a message saying that Dreamweaver can't open a jpg file!

No screen name said on Jan 22, 2007 at 4:36 PM :

Tammerlane, you need to reset the .jpg extension to a program that can handle jpg. The easiest one to use (if you are in the PC/Windows environment, I don't know Macs) is Windows Explorer. Open Windows Explorer, go to Tools- Folder Options. Choose the File Types tab. You will see a long list of extensions (three letters following *.). scroll down to JPG the choose the Change button at the bottom. You will get a list of programs, probably with "Recommended Programs" at the top, and the Windows Picture and Fax Viewer is probably among them; otherwise, experiment to find one that works. Another, simpler way to do this (although it might not permanently reset the extension like the above method): select the *.jpg file in Windows Explorer, then right click the mouse (just once, not twice). Go down to Open With and you should see a list of programs that should work.

No screen name said on Jun 13, 2007 at 5:10 PM :

No Screen Name advised Tammerlane how to get Dreamweaver to open a
jpg file by using the Tools - Folder options in Windows Explorer to do
something with the file extensions. Does anyone know how to do this using
Internet Explorer 7?