Reverse Engineering Page Layout

April 28, 2008 at 7:18 am Leave a comment

Have you ever seen a Web page that uses a really amazing layout? With just a few simple tricks you can learn how that layout was created. In the process you can grow your Web design skills dramatically.

Tables Are the Key

HTML tables are the key to Web page design. Since HTML doesn’t reliably support absolute positioning, Web Designers have long used tables to control page layout. Dividing your Web page into a series of table cells gives you some degree of control over where text and graphics will appear.

Sophisticated page layouts require very complex tables. Designers use tables with cells that span multiple rows and columns, or even nest tables inside one another to create the desired effect. The result can be a confusing mass of HTML code.

While page layouts can be a challenge to decipher, a few simple tricks can help you understand the underlying table structure. Start by viewing the Web page’s HTML source code.

Go to the Source

You can easily view the HTML source code used to create any Web page. In fact, it’s impossible for a Web Designer to hide their HTML code so that others can’t read it.

To view a page’s source code using Internet Explorer, go to the View menu and select Source. A new window will pop up containing the page’s source code, as shown below.

The graphic below shows a snippet of the the HTML source code for the start of the body section for the KMAC web site (http://www.kmaconline.com), a relatively simple Web page that we will use as an example.

Source of beginning of body section

As you can see, the HTML code for even a simple layout can be complicated. Trying to understand the Web page by viewing the source code alone can be an exercise in futility. Surely there must be a better way!

Cracking the Secret Code

Fortunately there is a better approach: reverse engineering. While this may sound hard, the basic steps are simple.

  1. Save a copy of the page to your local computer
  2. Change the page’s HTML code to show you the underlying tables
  3. View the page in your browser

Let’s try it.

Saving the Page

To save a local copy of the Web page using Internet Explorer, go to the File menu and select Save As. A dialog box will appear asking where you’d like to save the Web page.

Notice that this dialog box has a field labeled Save as type. This lets you chose exactly how the page will be saved. By default, the field should be set to Web Page complete, which is what we want. This option tells Internet Explorer to save the Web page itself and also download a copy of all the graphics it uses. This ensures that we will see all of the page’s graphics when we view the local copy. Otherwise our local copy would be filled with broken images.

Viewing the Page

Once you’ve saved the page, you will need to load your local copy into your browser (Internet Explorer doesn’t do this automatically when you save the page!).

To load the local copy, follow these steps:

  1. Under the File menu, chose Open. A dialog box will appear.
  2. Click the Browse button in this dialog box.
  3. Another dialog box will appear that allows you to navigate the files on your local computer’s file system.
  4. Find the local copy of your Web page and select it.
  5. Click Open, and then Ok to load the page.

If you’ve done everything correctly, you should see the Web page in your browser, and the browser’s address field should say something like “C:\temp\Adventure Summer Camp for All Ages – Kent Mountain Adventure Center”.

Change the Code

Now that we have a copy of the page on our computer, we can edit the HTML source code and view any changes we will make.

To edit the source code, again go to the View menu and select Source. A window will again appear showing you the HTML code. This window is actually a copy of Notepad, the Windows text editor.

You can change the HTML code using Notepad and then select File – Save to save your changes. When you refresh the Web page in your browser, the changes will appear.

Turn on Those Tables

Now we’re finally ready to view the tables used to control layout. Find the first TABLE tag used on the page, and set the width of its borders.

For example, line 14 of the source code for the Kent Mountain page looks like this:

<TABLE border=0 cellPadding=0
cellSpacing=0 width=620>

Notice that the table’s BORDER attribute is set to zero. Change this to set the border width to something we can see like a 4, as shown below.

<TABLE border=4 cellPadding=0
cellSpacing=0 width=620>

Now save the changed code and refresh your browser window to load the changes.

This clearly shows the main table used in the page’s layout. Notice that we can see three distinct columns: a left column containing the page navigation, a right column containing the page’s main text, and a narrow middle column used for padding.

Let’s go further into the code. Notice that line 22 of the page shows another table that looks like this:

<TABLE border=0 cellPadding=0
cellSpacing=0 width="100%">

By likewise setting this table’s BORDER attribute, we can see where it appears. Or, if you prefer, you can also use the table’s BGCOLOR attribute to color the table. BGCOLOR shades all of the table’s cells in the color of your choice. For complex layouts it is sometimes easier to understand tables using both BGCOLOR and BORDER.

That’s what we’ll do in this example, as shown below.

<TABLE  BGCOLOR=orange border=4
cellPadding=0 cellSpacing=0 width="100%">

Again save the HTML source code and refresh your browser window to view the changes. The page should now appear as below.

This shows that the right column of our main table includes a second, nested table. This second table likewise includes three distinct columns.

This same approach works with images too. If we aren’t sure which parts of the page are created using graphics, and which parts are created with pure HTML, we can set the BORDER attribute for each image to see.

Look and Learn

There’s more to this layout that what we’ve seen here, and this is a relatively simple Web page. Analyzing pages with a complex layout can take quite some time. Don’t expect to understand the page’s structure immediately; it often takes several tries and a little experimentation to understand what’s really going on. As a rule of thumb, expect to spend 2-4 hours reverse engineering a page layout.

That may seem like a long time, but it’s worth the trouble. Once you understand a page layout, it’s easy to use something similar in your own page designs.

Copy, But Don’t Plagiarize

All of this raises an important question: are we stealing someone else’s work? The answer depends on how much someone’s page layout you plan to copy.

If you are debugging pages to learn new HTML tricks, then you’re probably safe. Professional Web Designers routinely debug pages in this way to build their skills.

On the other hand, if you reuse an existing page layout by simply changing its text and graphics, then you’re on shaky ethical ground.

Let your conscience be your guide, and ask yourself how much of your own Web pages you’re willing to let other people mimic.

Life as a Web Designer

And don’t forget that this same technique can be used to track down HTML errors on your own pages or in pages that you inherited from someone else.

If you plan a career in Web Design, then you can expect to spend a lot of time debugging pages in this way, both to understand them and to track down errors. You’ll find yourself reverse engineering lots of pages to track down errors that break your page. Any tools and tricks that help are worth the time investment to learn.

Don’t forget that using Keynote NetMechanic’s HTML Toolbox is also a great way to debug Web pages. HTML Toolbox includes HTML Check & Repair, a great tool that finds coding errors on your Web page and can fix them with just one click. It can dramatically reduce the time you spend debugging Web pages.

Advertisements

Entry filed under: Script. Tags: , .

Mozilla Firefox beta is internet-life Threading c-sharp

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


April 2008
M T W T F S S
    Jun »
 123456
78910111213
14151617181920
21222324252627
282930  

%d bloggers like this: