Home > Articles

  • Print
  • + Share This

Adding Content

To say that our user interface looks fairly bland at this point would be an understatement. So let's go back and add (non-working) links to the content that we derived in the last article. We'll also add a logo and a banner advertisement, as shown in Figure 10.

Figure 10

Logo, menu links, and banner advertisement added.

The HTML file with logo, menu links, and banner advertisement added looks only slightly different, as shown in Listing 2.

Listing 2 Logo, menu text, and ad filled in

<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP>
  <img src=logo.gif><BR>
  <A HREF=" ">Phrases</A><BR>
  <A HREF=" ">Dictionary</A><BR>
  <A HREF=" ">Archive</A><BR>
  <A HREF=" ">History</A><BR>
  <A HREF=" ">Definition</A><BR>
  <A HREF=" ">Forum</A><BR>
  <A HREF=" ">Chat</A>
</TD>
<TD WIDTH=480 VALIGN=TOP>
  <IMG src=informitad1.gif>
  <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
  <TR>
    <TD WIDTH=360><!--insert persistent content here--> </TD>
    <TD WIDTH=120><!--insert dynamic    content here--> </TD>
  </TR>
  </TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

However, the user interface still doesn't look that great. Perhaps the problem is a lack of actual content. Let's add some (fake) persistent and dynamic content (see Figure 11).

Figure 11

Content added.

Listing 3 shows the HTML with content added.

Listing 3 Persistent and dynamic content filled in

<HTML>
<HEAD>
<TITLE>Professor F's IT-Forum</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=600 HEIGHT=400 CELLPADDING=0 CELLSPACING=0 BORDER=1>
<TR>
<TD WIDTH=120 VALIGN=TOP>
  <img src=logo.gif><BR>
  <A HREF=" ">Phrases</A><BR>
  <A HREF=" ">Dictionary</A><BR>
  <A HREF=" ">Archive</A><BR>
  <A HREF=" ">History</A><BR>
  <A HREF=" ">Definition</A><BR>
  <A HREF=" ">Forum</A><BR>
  <A HREF=" ">Chat</A>
</TD>
<TD WIDTH=480 VALIGN=TOP>
  <IMG src=informitad1.gif>
  <TABLE WIDTH=100% CELLPADDING=0 CELLSPACING=0 BORDER=1 HEIGHT=340>
  <TR>
    <TD WIDTH=360>
      Professor F's IT-Forum<BR><BR>
      Welcome to Professor F . com--a repository of hacker culture
      and a forum for discussing I.T. issues.  Our mission is to
      correct the negative, misportrayal of the hacker by the media.
      So, you won't find anything about breaking into computers on
      this site. Instead, you'll find something much more valuable--
      the truth. Enjoy! <BR><BR>
      Phrase: Sure, you're bitter <BR>
      Usage: Whenever a friend or coworker complains too much. <BR>
      Example: Barney: I spend all night hacking this algorithm and
      I still can't get it to work<BR>
      Fred: Sure, you're bitter. <BR>
    </TD>
    <TD WIDTH=120>
      Top 5 Phrases<BR>
      Sure, you're bitter<BR>
      Any other questions?<BR>
      Help me Spock!<BR>
      Are you threatening me?<BR>
      Did you just get in?<BR>
      <BR>
      Top 5 Words<BR>
      Foo<BR>
      Bar<BR>
      Baz<BR>
      Frob<BR>
      Grok
    </TD>
  </TR>
  </TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Unfortunately, the user interface still looks bad. The problem has to do with form. Besides having a good layout, the content needs to have good form. Form is the appearance of your content. In the following sections, we'll examine some design rules for fonts and colors that will improve the look of your user interface.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.