CSci 220 - Lecture 7

Web Page Design

© Morris Firebaugh

 


I. Introduction

A. Chapter 7: Formatting Text with Lists and Tables

B. Ordered Lists

C. Unordered Lists

D. Creating Tables for Data and Page Layout

 
II. The Syntax of HTML Lists

Lists are one of the most economical formats for presenting information

The two main classes of lists are

 


III. Ordered Lists

The syntax of ordered lists is

<OL>
<LI>
<LI>
. . .
<LI>
</OL>

Two useful attributes of ordered list include

START=number
TYPE=symbol

[symbol=1 | A | a | I | i for numerical, alpha-upper,alpha-lower, 
Roman-upper,Roman-lower, respectively]

Example 1: The "Sequential steps" list is produced by the HTML code

<OL>
 <LI>Step 1 
 <LI>Step 2 
 <LI>Step 3 
</OL>

Example 2: A mixture of embedded lists of various types

  1. This is the first alphabetic item of the complex list
    1. This is numerical item one
    2. This is numerical item two
    3. This is numerical item three
    4. This is numerical item four
  2. This is the second alphabetic item of the complex list
    1. This is numerical item five
    2. This is numerical item six
    3. This is numerical item seven
    4. This is numerical item eight
  3. This is the third and final item of the alphabetic list

 

The corresponding HTML code is:

<OL TYPE="A">
<LI>This is the first alphabetic item of the complex list 
	<OL>
		<LI>This is numberical item one 
		<LI>This is numberical item two 
		<LI>This is numberical item three 
		<LI>This is numberical item four 
	</OL>
<LI>This is the first alphabetic item of the complex list 
	<OL start=5>
		<LI>This is numberical item five 
		<LI>This is numberical item six 
		<LI>This is numberical item seven 
		<LI>This is numberical item eight 
	</OL>
<LI>This is the third and final item of the alphabetic list 
</OL>


III. Unordered Lists

Unordered lists come in two varieties

The syntax of bulleted lists is

<UL> <LI> <LI> . . . <LI> </UL>

The only "complexity" comes with nesting

For example, the output:

is produced by the code

<UL> <LI>This is the first item of the bulleted list, at the top level <UL><LI>This is numerical item one of first level nesting <LI>This is numerical item two <LI>This is numerical item three <LI>This is numerical item four <UL><LI>This is numerical item one of second level of nesting <LI>This is numerical item two <LI>This is numerical item three <LI>This is numerical item four </UL></UL><LI>This is the final item back at the top level of bulleting </UL>

The syntax of definition lists is

Term1
Definition1
Term2
Definition2
TermN
DefinitionN

Example of a Definition List

Hardware
those elements of a computer you can actually touch
Firmware
programs (particularly parts of the OS) embedded in ROM ICs
Software
programs for carrying out useful tasks
RAM
random access memory (requires the same time to read each location)
ROM
read only memory (non-volitile, for storing parts of the OS)
OS
operating system (e.g., Windows NT, Linux, Mac OS8.5)

This was generated by the code

<DL> <DT>Hardware <DD>those elements of a computer you can actually touch <DT>Firmware <DD>programs (particularly parts of the OS) embedded in ROM ICs <DT>Software <DD>programs for carrying out useful tasks <DT>RAM <DD>random access memory (requires the same time to read each location) <DT>ROM <DD>read only memory (non-volitile, for storing parts of the OS) <DT>OS <DD>operating system (e.g., Windows NT, Linux, Mac OS8.5)

 


IV. Tables for Page Layout

Tables are probably the single most powerful HTML tool for arranging information and enhancing the appearance of web pages.

 

Table 8.1
Sorting Algorithm Dependency on N
Sort Type
Random distribution
Nearly in order
Bubble sort
N2
N
Shell sort
N3/2
N
Quick sort
N log(N)
N2
Tree sort
N log(N)
N
Radix sort
N
N

 

 

<B><FONT COLOR="#0000FF" SIZE=+1>Table 8.1</FONT></B><br> <I><FONT COLOR="#0000FF" SIZE=+1>Sorting Algorithm Dependency on N</FONT></I><FONT SIZE=+1></FONT> <FONT SIZE=+1></FONT><TABLE BORDER="1" CELLSPACING="2" CELLPADDING="0"> <TR> <TD <P ALIGN=CENTER><B><FONT SIZE=+1>Sort Type</FONT></B></TD> <TD <P ALIGN=CENTER><B><FONT SIZE=+1>Random distribution</FONT></B></TD> <TD <P ALIGN=CENTER><B><FONT SIZE=+1>Nearly in order</FONT></B></TD></TR> <TR> <TD <FONT SIZE=+1>Bubble sort</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>2</SUP></FONT></TD> <TD <P ALIGN=CENTER>N</TD></TR> <TR> <TD <FONT SIZE=+1>Shell sort</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>3/2</SUP></FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD></TR> <TR> <TD <FONT SIZE=+1>Quick sort</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N log N</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N<SUP>2</SUP></FONT></TD></TR> <TR> <TD <FONT SIZE=+1>Tree sort</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N log N</FONT></TD> <TD <P ALIGN=CENTER>N</TD></TR> <TR> <TD <FONT SIZE=+1>Radix sort</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD> <TD <P ALIGN=CENTER><FONT SIZE=+1>N</FONT></TD></TR> </TABLE>

 

<TABLE BORDER="10" CELLSPACING="2" CELLPADDING="0"> <TR> <TD><IMG SRC="Flowers.JPG" HEIGHT="188" WIDTH="289"></TD> </TR> </TABLE>
<TABLE WIDTH="450" BORDER="3" CELLSPACING="0" CELLPADDING="0"> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> </TR> <TR> <TD>Cell 3</TD> <TD>Cell 4</TD> </TR> </TABLE>


Cell 1 Cell 2
Cell 3 Cell 4

 

 

 

 

 

Example 1: GoLive Table Inspector

Produces:

<TABLE BORDER="4" CELLPADDING="0" CELLSPACING="2" WIDTH="200">

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>

			<TR>
				<TD></TD>
				<TD></TD>
				<TD></TD>
			</TR>
		</TABLE>

 

 
Cell 1 Cell 2
Cell 3 Cell 4
Cell 5 Cell 6

This is done with the HTML code

<TABLE WIDTH="250" BORDER="5" 
CELLSPACING="10" CELLPADDING="15" 
ALIGN="RIGHT" BGCOLOR="#990099">
<TR>
<TD WIDTH="50%">Cell 1</TD>
<TD WIDTH="50%">Cell 2</TD></TR>
<TR>
<TD WIDTH="50%" BGCOLOR="#009900">
Cell 3</TD>
<TD WIDTH="50%" BGCOLOR="#000099">
Cell 4</TD></TR>
<TR>
<TD WIDTH="50%" BGCOLOR="#990000" 
HEIGHT="100">Cell 5</TD>
<TD WIDTH="50%" BGCOLOR="#ff9999">
Cell 6</TD></TR>
</TABLE>

 

 

Example 2: ATable Header <TH> example

 

Starting by pushing HTML Editor's Table Button opens:

 

 

Modifying the resulting skeletal structure to read:

			
<center> <TABLE BORDER=2> <TH COLSPAN=3>On Windom Peak in San Juan Mountains of Colorado, Elev. 14087' </TH> <TR> <TD WIDTH=20> <BR> </TD> <TD><IMG SRC="CHIBASIN.JPG" ALIGN=TOP></TD> <TD WIDTH=20> <BR> </TD> </TR> <TR> <TD HEIGHT=20></TD> </TR> </TABLE></center>

Produces:

 

On Windom Peak in San Juan Mountains of Colorado, Elev. 14087'

 

 

 

Example 3: Multi-Column Formatting using Invisible Tables

 

Chapter 8

Three-Dimensional Graphics -

Geometric Modeling and Visibility

M. Firebaugh

© Wm. C. Brown Communications, Inc.

We introduced three-dimensional gra-phics with very concrete examples of how 3D objects may be represented, mani-pulated, and displayed by projecting 3D world coordinates onto a 2D viewing surface. As in all areas of computer science, 3D graphics is subject to trade-offs along the concrete/abstract spectrum. The concrete examples illus-trated in the last chapter have the virtue of simplicity and clarity but suffer from limitations intrinsic in the choice of polyhedral representations. Many of these limitations are overcome by moving to more abstract representations. Several of the more abstract representations for geometric modeling are presented in this chapter.

The second main emphasis of the chapter considers implementation issues of 3D clipping and hidden surface removal. These operations greatly improve the visual realism of the image and may be considered refinements inserted in the viewing pipeline.

The example above illustrates how the moving of a single control point can significantly modify the shape of the para-metric surface. Since there are sixteen points to manipulate, the user has a tool of considerable power for sculpting the 3D surface shape desired. By changing the sign of the control points in the last two rows of the point control matrix, for instance, we can generate the surface shown in Figure 8.5.



 


(a)


(b)


Figure 8.4 Effects of variation of single control point.


The parametric representation of the bicubic patch of Figure 8.5 (b) can be obtained by multiplying out the matrices in equation 8.6 and is represented as:


 

 

What can we learn from this example?

 


VII. Homework Assignment #4

 



 

 


Updated February 3, 2001