HOW TO REVERSE ENGINEER A WEBSITE

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.

SET UP DREAMWEAVER TO RECEIVE HTML SOURCE CODE AND CSS CODE

  1. Create a folder on your desktop and name it (i.e., zengarden) and open this folder 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+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+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 THE LOCAL INDEX.HTML FILE

  1. Go to the web site you want to reverse engineer (in our case, we when to www.csszengarden.com and selected the Kyoto Forest design)
  2. Click on View > Page Source and select all (CTRL+A) of the HTML source code and Copy (CTRL+C) it to the clipboard.  Leave the window open for the next section.
  3. Return to Dreamweaver (ALT+TAB on Window OS) and Paste (CTRL+V) the code into the Code View and save it as index.html.

RESULT TEST POINT: You should see the page but with no style applied to it.

COPY AND PASTE CSS CODE TO THE LOCAL CSS FILE

  1. Return back to the source site (i.e., csszengarden) 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. Select all (CTRL+A) of the CSS code and copy (CTRL+C) it to the clipboard.
  4. Return back to Dreamweaver and paste (CTRL+V) the CSS code into the main.css (or whatever name you gave it). Save file again.
  5. Delete the @import or <link> to the CSS in Code View.
  6. Return to the index.html page and link the newly created CSS file to it from the CSS Panel.
  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.
    TIP: Note the total number of results in the bottom of the Find and Replace dialog box. This will let 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.

RESULT TEST POINT: You should see the page take on the style of the main.css style sheet but no images.

SNAGGING IMAGES FROM SOURCE SITE:

  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. Then select all of the background images for the size 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).
    1. 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.
      NOTE: As another alternative, you can use a program like Snag-it to capture all images from a web site in an instance.
    2. You may also need to select any FOREGROUND images (images that use the <img> tag instead of url( ) with CSS).

(BONUS) SNAGGING JAVASCRIPT FROM SOURCE SITE:

  1. Return back to the source site (i.e., csszengarden) and select View>Page Source AGAIN and review the <link> tag or <scrpt> 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 (i.e., http://www.csszengarden.com/scripts/javascriptfile.js ) and press Enter to open the JAVASCRIPT file.
  3. Select all (CTRL+A) of the JavaScript code and copy (CTRL+C) it to the clipboard.
  4. Return back to Dreamweaver and create a new Javascript file (not HTML) and paste (CTRL+V) the JavaScript code into it and name the file (usually by what it does i.e., disablerightclick.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.

PREVIEWING AND TWEAKING

Return to the index.html page and preview (F12) it in a browser. Make any necessary changes or correct any omissions.

RESULT TEST POINT: You should now see the page, its style, its background images and any javascript interaction.