Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

  

WWW pages

Tip of the week
(Bulleted options)
The bulleted option does not really work in HTML, and it is extremely difficult to get any form of control on how the list is produced. Thus a better approach is to use a table to align the text in the list. For example in the table given in the second column, I have used a table with two columns and two rows. Here is the basic layout, with a border included for you to see how it is produced:
Cleaner interface. The basic menu now fits into the full page, and can be expanded, as required.
Easier updates, as I just have to change a single file, rather than all of the pages when there is a change.
External file reference, which reduces the ammount of code in each page.
If the border is taken away (and setting the Border parameter to zero) and the background color to the background color of the background, then the user will not know that a table has been used. Simple, but affective, as users like to see some alignment of the text on bullets. The parameters for the bulletted table should be:
cellpad=0; cellspace=0;
border=0
Also, make sure that the cell alignment for each cell of the table is set to Top.
Sometimes the bulletted list can get a bit cramped. There's two ways to get round this. The first is to give each row a given height (in this case it is 40 pixels):
Eggs.
Bacon.
Cheese.
or you can put a line divider after each of the options (which is useful if there are vary levels of text in each bulletted list. Obviously the borders around the table should be invisible (but I've shown them for clarity):
Eggs. dfs dfs dfasd fs sd
Bacon. sdfs
Cheese. sdf sdfas dfa sdfasdf as dfasd

 

 

WWW pages of the past (July 2002 - IV)

July 2001 (Part IV)
After implementing a JavaScript menu option in the previous WWW page, I've added it to the Projects page, so that I can assess if it is useful in applying it to other pages. The old page can be accessed from here.

The menu option is constructed using the links of the previous version of the menu, but it is now much more compact. The following is the table which is inserted into each of the project pages:

Select an area

Select an area

If you interested the screen-shots on the right-hand side show the differences between the two. The advantages I think are:

Cleaner interface. The basic menu now fits into the full page, and can be expanded, as required.

Easier updates, as I just have to change a single file, rather than all of the pages when there is a change.

External file reference, which reduces the ammount of code in each page.

The function call to add a Category is addCategory(). Yellow boxed comments are added with the fourth argument of the function call. For example, the string is defined with non-breaking spaces (&nbsp):

General information
 on projects

will display the comment of General information on projects. Try moving your mouse cursor over the menu options, and the text comment should be displayed, as shown next:


Old projects page without JavaScript menu [Enlarge] [HTML]

New projects page with JavaScript menu [Enlarge] [Current]

Here's an extract from the JavaScript:

addCategory("GENERAL", "General", false, "General"); addCategoryLink("GENERAL", "Main page", "pr_main.html"); addCategoryLink("GENERAL", "Request/Ideas", "form_project.html"); addCategory("PROJECTS", "Projects 2000/2001", false, "BEng projects 2000/2001"); addCategoryLink("PROJECTS", "Comp. and E-com", "pr_bell.htm"); addCategoryLink("PROJECTS", "Real-time booking", "pr_tait.htm"); addCategoryLink("PROJECTS", "Agents", "pr_holmes.htm"); addCategoryLink("PROJECTS", "TCP/IP Emulator", "pr_faisal.htm"); addCategoryLink("PROJECTS", "Database link", "pr_huet.htm"); addCategoryLink("PROJECTS", "Remote Learning", "pr_kevin.htm"); addCategoryLink("PROJECTS", "Linux drivers", "pr_cristiano.htm"); addCategoryLink("PROJECTS", "Networking MM", "pr_networking_mm.htm"); addCategory("PROJECTS2", "Projects 2001/2002", false, "BEng projects 2001/2002"); addCategoryLink("PROJECTS2", "On-line voting", "project_greig.htm"); addCategoryLink("PROJECTS2", "Agent Recovery", "project_douglas.htm"); addCategoryLink("PROJECTS2", "File Sharing", "project_mcgregor.htm"); addCategoryLink("PROJECTS2", "HTTP Monitoring", "project_jack.htm"); addCategory("PROJECTS3", "Prev. Hons", false, "Previous projects (Hons)"); addCategoryLink("PROJECTS3", "Fire Wire", "pr_kelvin.htm"); addCategoryLink("PROJECTS3", "E-Commerce", "pr_xavier.htm"); addCategoryLink("PROJECTS3", "File Sharing", "project_mcgregor.htm"); addCategory("PROJECTS4", "Prev. MSc", false, "Previous projects (MSc)"); addCategoryLink("PROJECTS4", "Mobile Agents", "res_marcus.htm"); addCategoryLink("PROJECTS4", "Router", "res_router.htm"); addCategoryLink("PROJECTS4", "Gigabit Ethernet", "res_giga.htm"); addCategory("PROJECTS5", "Prev. MPhil/PhD", false, "Previous projects (MPhil/PhD)"); addCategoryLink("PROJECTS5", "RSA Method", "res_wang.htm"); addCategoryLink("PROJECTS5", "Components", "res_oli.htm");

The scripts are included with:

<script language=JavaScript src="homepage.js"></script>
<script language=JavaScript src="projects.js"></script>
<script language=JavaScript> showHomePage();
</script>