␡
- Introduction
- Thinking About User_Interface Design for Your Personal Web Business
- My Favorite Personal Web Business User Interface: Layout Issues
- Implementing the Layout
- Adding Content
- Form: Font Issues
- Form: Color Issues
- Form: Border Issues
- Aesthetics: Spacing
- Homework Assignment 5: Designing Your User Interface
- Glossary of Business and Technical Terms
Implementing the Layout
You could use a WYSIWYG Web page editor to create your user interface, but I say, "Why bother?" Those editors never do exactly what you want, requiring you to modify the HTML they produce, and unfortunately the HTML produced by WYSIWYG Web page editors can be nightmarish, to put it mildly. It's much easier for you to design the user interface "by hand." Fortunately for us, handcrafting the above user interface in HTML is extremely simple. The user interface with no content filled in looks like Figure 9.
){kind=link}
Basic user interface, no content added.
The HTML that created this is shown in Listing 1.
Listing 1 Basic HTML for the general user interface
<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>
<!--insert logo here-->
<!--insert menu here-->
</TD>
<TD WIDTH=480 VALIGN=TOP>
<!--insert banner here-->
<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>