How To Reverse Engineer A Web Site

While you should NEVER use this technique to steal someone else web site, reverse engineering is an excellent way to learn how web sites are laid out and created so that you can learn how it is done.  The following was done using Firefox as the browser. Using the View commands in IE will be slightly different.

  1. Create a folder on your desktop and name it (e.g., csszengarden.com) and create another folder inside of it and name it images.
  2. Create a New Site Definition for this folder in Dreamweaver.
  3. Create a new Blank Page and in the Code View select all of the code (CTRL/CMD+A) and click the Delete button. Save this file as index.html.
  4. Create a new Blank CSS Page (not HTML) and select all of the code (CTRL/CMD+A) and click the Delete button. Save this file as main.css (or whatever you like with an ".css" extension on it).

Copy And Paste HTML Code To Local Index.html File

  1. Go to the web site you want to reverse engineer (In this case, we when to www.csszengarden.com and selected the Kyoto Forest design)
  2. Click View > Page Source and select all (CTRL/CMD+A) of the HTML source code and then Copy (CTRL/CMD+C) it to the clipboard.  Leave this page open for the next section.
  3. Return to Dreamweaver (ALT/OPTION+TAB) and Paste (CTRL/CMD+V) the code into the Code View in the index.html and then save it..
  4. CHECK POINT: Save the file and preview it in a browser. You should see the page but with no style applied to it.

Copy And Paste CSS Code To Local CSS File

  1. Return back to the source site (e.g., csszengarden.html) and select View > Page Source AGAIN, if necessary. Then locate either a <link> tag or an @import directive to determine the relative path to the CSS file (in our case, it was at 207/207.css)
  2. Copy and paste this relative path to the end of the web site domain name (in our case, http://www.csszengarden.com/207/207.css) and press Enter to open the CSS file.

    ALTERNATIVE: Simple click on the CSS link in the index.html view to open the CSS file in a new window.
  3. Go back to the page again and select all (CTRL/CMD+A) of the CSS code and copy (CTRL/CMD+C) it to the clipboard.
  4. Return back to Dreamweaver and paste (CTRL/CMD+V) the CSS code into the main.css (or whatever name you gave it). Save the file again.
  5. Return to the index.html and delete the @import or <link> to the CSS in Code View.
  6. Create a new link to the newly created CSS file.

    TIP:     You can use the CSS Designer Panel to link the file.
  7. If needed, return back to the CSS file and add “images/” to ALL url properties(i.e., url(images/header_resources.gif) and save the file. 

    TIP    : You can do a Find and Replace to FIND all url( and REPLACE them with url(images/ at one time.

    NOTE: The total number of results is listed in the bottom of the Find and Replace dialog box. This lets you know how many background images you need to retrieve from the web site in the next step.

    ALTERNATIVE: You could save all of the images to the root directory of the local web site and then move them into the images folder by dragging and dropping them in the Files panel. When you do this you will be prompted to update all references of the images in the CSS file. This way you don't have to do the Find and Replace method discussed above.
  8. CHECK POINT: Save the file and preview it in a browser. You should see the page take on the style of the main.css style sheet but no images.

Snagging Images From Source File

  1. Right-click directly on the page itself in Firefox and select View Page Info and then select the Media icon in the dialog box.
  2. Select all of the background images for the site and then click Save As to save all of the images (or any other asset you want) to the images folder.

    ALTERNATIVE: If you do not have Firefox, you may have to manual save the images one at a time from the procedures below:
    Return a third time to the source site and click around the site to select all of the background images that was referred to in the CSS file (in our case, there were 12 images).
    • For each image, right-click on it and select View Background Image.  Then right-click again and select Save Image as and save it to the images folder.
      NOTE: Images can be words, web site background, bullets, etc.
      ALTERNATIVE: You can use a program like Snag-it to capture all images from a web site.
    • You may also need to select any FOREGROUND images (images that use the <img> tag instead of url( ) with CSS).

Snagging JavaScript From Source File (BONUS)

  1. Return back to the source site (e.g., csszengarden.html) and select View>Page Source AGAIN and review the <link> tag or <script> tag to determine if a JavaScript file (*.js) is linked to the page.
  2. If a JavaScript file is linked, copy and paste its relative path to the end of the web site domain name (e.g., http://www.csszengarden.com/scripts/javascriptfile.js ) and press Enter to open the JAVASCRIPT file.
  3. Select all (CTRL/CMD+A) of the JavaScript code and copy (CTRL/CMD+C) it to the clipboard.
  4. Return to Dreamweaver and create a new JavaScript file (not HTML) and paste (CTRL/CMD+V) the JavaScript code into name in (e.g., myJavaScriptFile.js)
  5. Return to the index.html page and link the newly created JavaScript file to it by selecting Insert > HTML Objects >Script and navigate to the newly created JavaScript file.

    NOTE: If the JavaScript is also embedded in a <script> tag, copy the complete script and paste it into your site as well.
  6. Return to the index.html page and preview (F12) it in a browser. Make any necessary changes or correct any omissions.
  7. CHECK POINT: Save the file and preview it in a browser. You should see the page, its style, its background images and any JavaScript interaction.