What's Involved in Building a Web Site

Building a Web site is not like designing a poster, or other graphics projects you may have worked on in your graphics classes. In some ways, building a Web site is more like performing surgery-- your goal is to design a layout in Photoshop, and then intricately sew the graphic elements back together in HTML (using Dreamweaver).

So when you design a Web site, do not just start in Photoshop, placing graphics arbitrarily on the page, hoping to figure out how to export them and reconstruct them down the line when you get to that next step.

Instead, consider the whole process in the beginning:

Is this design going to be easy to reconstruct in HTML? What will you have to do to reconstruct your graphics in an HTML table?

How will your page look when viewed on different browsers set to different resolutions?

What part of your layout will be graphics exported from Photoshop or Fireworks, and what parts will involve text and hyperlinks added in Dreamweaver?

How can you save yourself time later on, by making the process of building all of your internal, uniform, inside pages quick, easy and painless?

THE TABLE

You will make a table to hold your graphical elements in place. When you look at your design, can you visualize how to chop it up?

See an example: Mockup with Table guides (scroll down for table guides)

THE BACKGROUND IMAGE

Remember that a background image is the only kind of image that lets you add type over it. Regular graphics are objects that take up space. If you designate space as a graphic, you cannot later decide to add text to that space in Dreamweaver.

Your background image will tile across the page. DO NOT make a background image that is 800x600 pixels wide and expect it to look good on all computers. Background images work best if they are thin horizontal strips or thin vertical strips (something like 1600 x 25 or 40 x 1200 pixels works well)

Bad examples: sky dive site ; see the sky background image

The moral of the story: Do not design a site to fit perfectly in your Photoshop window. Instead picture the page with different lengths of content. Will the site still look good if some pages have one paragraph and some have 6 paragraphs? Also, imagine the site displayed at different resolutions.

COPY TEXT

Remember to leave a space in your design for where you will add copy. Copy text should not be created in Photoshop. This takes up unnecessary memory. You should add your text in HTML (Dreamweaver).

DON'T MAKE A SEPARATE PHOTOSHOP FILE FOR EACH PAGE

Instead of having a separate Photoshop file consisting of your design layout of every page in the site, it is much more convenient to have only ONE Photoshop layout file, that can be used for every page in your site. (You can do this by hiding and viewing layers).

In Class Example: Mona Technologies site {download Photoshop file}