blog top 101 other stuff

how to capture web page designs

Netscape Communicator has a small but powerful feature that will allow you to capture the layout of most web pages and use it in your own site. Keep in mind that we are talking about the design and layout of the pages, not the graphic elements or text content of the page. Those parts are normally protected by copyright but the page layout generally cannot be copyrighted.

You also need to know that an increasing number of sites are using stylesheets and Javascripts which are stored external to the page. Communicator 4.7x will not be able to grab these files but the current version 7 will. Also you need to realize that Composer, Netscape's web page editor, is not the same quality as GoLive or Dreamweaver (although the new version is a very good page editor) so the page you capture may not display properly.

Follow these steps to grab the layout:

1. Start Netscape Communicator (version 4 or higher) and open the address of the page whose design you want to capture.

2. From the File menu, select Edit Page... Communicator will move the page into the Composer page editor complete with the graphic elements. You can tell that you are in the editor because the top of the window will change into something similar to this:

3. Select Save As... from the File menu.

4. Before clicking the Save button, click on the New Folder button and name the folder anything that makes sense to you. You may also want to change the location so the folder is someplace you can find it.

5. Give this file a name that ends with .htm or .html. Click the Save button.

6. In version 4.x of Composer, you will get a message telling you that you may be saving copyrighted materials. That is because you will download all the images on the page along with the page itself. As long as you don't use the images or text content, you will not have a copyright issue. Click OK (or Don't Show Again if you don't want this message to come up again).

7. Start your favorite web editor (GoLive, Dreamweaver, etc.) and select Open from the File menu. Find the page you saved in step 5 and open it. If you are using Composer as your editor, you can skip this step since the page is already open in Composer. Double-clicking the icon for the page will also open it in Composer.

8. You should have the full page, complete with the graphic elements. Now it's up to study and learn from the design.

Problems:

1. Some pages are structured so that it may be difficult to view the page in one of the "low end" web page editors (Composer, HomePage, Page Mill) in the same format as you saw it in the browser. This will make the page hard to edit and adapt. The only real solution in this case is to use a more advanced editor such as GoLive or Dreamweaver.

2. If the page you're capturing uses Javascript or other special features, you will also be capturing those features. However, you may not want this code since it may be difficult to edit. You may have to go into the code and remove the script.

3. If the page uses an external Cascading Style Sheet, you also be capturing that file. However, unless you understand something about CSS, it may be difficult to edit the file.

4. If the page you're capturing uses a Java applet (that displays scrolling text, for example), you probably will not be able to use the same applet in your page. Java applets require one or more separate files which are very difficult to download onto your computer. You will need to go into the code and remove any reference to the applet.

One other note: some early versions of Internet Explorer for Windows can capture the page and will send it to FrontPage or FrontPage Express for editing. However, current versions of Explorer will send the page to Microsoft Word for editing. Word is a very lousy web page editor. Use it only if absolutely necessary for capturing the page and then edit it in a true web page editor.