Layout Issues in Web Design

The use of tables and frames has been an issue in web design for a long time.
Both have had a long running issue of browser compatibility.

Frames

Syntax:

There are two types of frame sets currently in use by web designers, these are the old style of frames where a single html documents bind together multiple other html documents into one page presented on the screen and the newer iframe, which allows a html document to be embedded and navigated inside another page using a floating windows. The syntax used to create frames is as follows:

Old Frames:

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=20%, 80%>
</FRAMESET>
</HTML>

Other arguments that can be used include src, name, marginwidth, marginheight, scrolling and noresize. There is also an option to include a <noframes> tag. This is for browsers which don’t support frames, the html content inside the no frames tag is displayed if the frames can’t be.

iFrame:

<iframe src=’Source.html’ width=’100’ height=’100’ name=’iframe1’>

Other attributes that can be set in an iframe include align, frameborder, marginwidth, marginheight and scrolling.

Frames were originally devised to simplify maintaining a standard navigation system across a site. The idea being that if the navigation layout is separated from the content if you wish to add a new page to the site then the navigation system only has to be update once. However in the early internet competing browsers supported different technologies. At first only internet explorer supported frames. This meant that if web designers wanted to take advantage of their potential audience not using IE they had to either mirror the content of their site on every page using the noframes tag or maintain two completely different sites for each group. Using frames also caused web designers a lot of other unexpected problems.

Perhaps the biggest problem with using frames is the issue of book marking a frame embedded page. When a user bookmarks a page in a site using frames, given the way frames works typically the browser will only record the homepage of  the site, if a user intended to record the address of a page within a site other than the homepage they will have difficulty. Although frames allow web designers to create an easily updatable navigation system they also create a problem for search engines. When a search engine finds suitable content in a framed site the link they present to the user will point to the html document which won’t include the other framed content that may be necessary to navigate to the rest of the site. This problem can be circumvented by providing a link on every page that restores the fame structure but this is creates an extra barrier between users and your site. Frames prevent you being able to link to specific content inside your website without creating a gateway html page form the frame. Frames also prevent pop down menus in forms from being displayed properly if they’re placed near a frame border When a user prints a framed page each html document that makes up the frame will be printed separately.

Tables

Syntax of a table:

<table>
  <tr>
    <td>
      1
    </td>
    <td>
      2
    </td>
  </tr>
  <tr>
    <td>
      3
    </td>
    <td>
      4
    </td>
  </tr>
</table>

The optional arguments for the <table> tag include summary, width, height, border, frame, rules, cellspacing, cellpadding, align and bgcolor.

The optional arguments for the <tr> tag include align, char, charoff, valign and bgcolor.

The optional arguments for the <td> tag include rowspan, colspan, headers, abbr, scope, axis, align, char, charoff, valign, width, height, nowrap and bgcolor. By using rowspan and colspan correctly the designer can create tables with non standard layouts. For instance the html code in the above example would create a table like the one below:

    1 2
    3 4

By altering the code as follows:

<table>
  <tr>
    <td colspan=”2”>
      1
    </td>
  </tr>
  <tr>
    <td>
      3
    </td>
    <td>
      4
    </td>
  </tr>
</table>

It would create a table like this:

    1
    3 4

After frames became less popular for setting out websites tables filled the gap. Unfortunately, early web browsers had the same compatibility issues regarding tables as they did with frames. Although all browser have supported tables practically since the outset they did not all support them in the same way. Some browsers didn’t recognize particular attributes of the different tags. Microsoft particularly was famous for supporting proprietary tags in their browser.

This meant that web designers, in order to ensure their websites were universally accesible, had to test them using every different browser in use and typically several versions of the same browser. Even when following good coding practices web pages typically looked different on every different browser. The task facing the web designer was to make them look as similar as possible on the different platforms, given the changing natures of all the platforms available this was often more of an art than a science. This is still a problem today, most notably between firefox and internet explorers interpretation of CSS driven layouts. The use of tables over frames did lessen the issue of browser compatibility and restored direct linking to websites. Pages inside a site could be linked directly and bookmarked properly now that frames weren’t as popular. The use of tables to layout the content of a website is currently being superseded by the use of the <div> tag and CSS as this is more uniformly supported across the browsers, allows pages to be directly linked in the ways frame don’t. It also allows all the information regarding the master layout of the site to be encapsulated in one CSS document rather than repeated in every html document as is necessary when using frames.

Web publishing using MS Word

Microsoft Word has evolved in recent times to also support saving documents as web pages. This allows word to essentially serve the same functions as dreamweaver or Adobe go-live to a lesser extent. Initially Microsoft’s intention in including this function was to allow Office users to save their work in a universal format for distribution. This has since evolved into a fully functional what you see is what you get editor with support for linking, embedding objects and style sheets among others. Microsoft has built upon its past experience developing front page to offer the same functionality inside Word.

To create a web page using Word is simple. Open Word and start editing the document as you normally would. While the page is in development it is best to save it as a Word doc file as this is the most stable and easy to work with document MS-Word can generate. When the web page is finished to your specification and you want to start testing it in a browser go to File->Save as like normal but change the document type to web page(*.htm; *.html). Word will then automatically generate the HTML code to best match the layout of the word document. If word is not yet set to the ideal screen layout for web design it will do once you save the document. It is important to remember that the layout of the web page generated is affected by the browser and screen size you use as well as the options you have enabled or disable in the browser, therefore it may not be identical to the layout shown inside MS-Word. A third party company called WordNet has taken this Office function to the next level with their Word plug-in also called WordNet available at (http://www.topshareware.com/Word-Netdownload- 13004.htm). This office plug-in allows Word documents to be published direct to the net inside Word. This essentially makes the link between development and publishing transparent. I quite like this product as it opens up web publishing to completely unskilled people, where previously web publishing was only available to trained people looking to make a profit for their investment of time in training and effort in development. Although Word doesn’t have the same functionality of Dreamweaver or Front page it is a lot more accessible to people outside the web design profession.

Your rating: None