Objective

To learn web design by reverse engineering existing web pages designed by other designers.

Discussion

The best way to learn web design techniques is to figure out how someone else did it. Fortunately, the HTML code and art for most web sites can easily be downloaded. Often, Dreamweaver will be able to display the code with integrity and allow you to examine how the page was put together.

Although the text and images (photographs, illustrations, logos) are copyrighted, the "layout" and HTML code is not. Using someone else's HTML code and modifying it to suit your own purposes is common practice on the web. In fact, many designers love to share their code with others at sites like www.justdreamweaver.com (a Google search for "free web templates" will reveal a lot more).

Also see review of website copying software.

Procedure

Overview: Browse to an existing web page. Save the page to your hard drive. Open the page in Dreamweaver and examine how the page was put together. Note: replace bold with personalized info.

1. download this page: file > save as "test.html" (complete page, location: faa999/class/html/exercises/x0_reverse")
2. launch Dreamweaver
3. open "test.html"
4. examine layout:
   > what images are being used?
   > how are CSS being used (window > CSS: current)?
   > how are tables being used?
   
5. file > preview in browser (opt+F12 and cmd+F12) and examine
6. grading: "steal" another web page from the Internet and publish it as a link from your process page