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

 

  

WWW pages

Tip of the week
(Transparent backgrounds on graphics)
After years of being constrained in the use of color, I've finally found how useful color can be in the presentation of content. Unfortunately when you use colored background, the graphics that you use need to be transparent against the background, or they will appear with a different background color. One way round this is to set the background color of your graphic to the color of background of your WWW page. Unfortunately this does not allow you to change the background color, in the future. Thus the best way is to produce a graphic file which has a transparent background. For example, look at the following two graphics. The first does not have a transparent background:
and the next one has a transparent background:
If you interested in how to do this in Macromedia Firework, then click Export Special -> WWW and then you should get something like the following (click on it to get a better view of this screen):

On this screen select Index Transparency.
In a previous tip it can be seen that some of the bullets have slightly ragged outlines. This is because the transparency colors have not been defined as all the colors around the outside of the graphic (as this is often difficult to achieved, without actually making some of the colors within the object go transparent.
Pinboard pin
An improved method is to create a canvas for the graphic with the required background color (in this case pinky). This gives:
Pinboard pin

[Next tip]

 

 

WWW pages of the past (July 2002 - III)

July 2001 (Part III)
I've been experimenting with JavaScript-generated menu options. The key to these is to try and create options from a menu system without having to refresh the page. Here's my first attempt at it:

Please click on one of the above menu options to produce a sub-option, and click it again to contract it. Isn't that great! The source code is given on the right-hand side, if you're interested.

My background is in programming, so I actually feel quite comfortable in produce JavaScript code (even though the main code was taken from a WWW page that I downloaded). The key to WWW page design is to notice links that you find appealing, and then look at the code that has produced this. With server-side includes, such as ASP and PHP, it is not possible to view the code, as the server replaces the ASP or PHP with HTML code. With client-side includes, such as JavaScript and VBScript it is possible to look at all of the inserted code, and reuse it. So if you see a nice page, save it to your local drive, and then use Macromedia Dreamweaver or Microsoft FrontPage to view the code.

If you're interested, here's a sample screen shot from the menu option that is given above (just for the record, as there's a good chance it could change soon):

and here's another one:

If you click on them you should get a larger version.

Featured page

Well I've got a little bit of column space left to justify the columns, so I've decided to feature a couple of screen shots from the Networking quiz. These are shown on the right-hand side of the page. If you're interested in going to this page, this click here (oh dear, I'm really struggling to fill the rest of this column).

 

 


The JavaScript is added to the page with:

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

The menu.js file contains the menu options. A sample of it is:

function buildNavigation()
{
addCategory("BOOKS", "Books", false, "My Books");
addCategoryLink("BOOKS", "Adv. PC Architecture", "computing_book.html");
;;;; etc

addCategory("SUBJECTS", "Taught subjects", false, "Subjects taught");
addCategoryLink("SUBJECTS", "CNDS", "cnds.html");
addCategoryLink("SUBJECTS", "NOS", "nos.html");
addCategoryLink("SUBJECTS", "Comp Eng", "cengii.html");
;;;;; etc
}

The homepage.js file contains the addCategory() and addCategoryLink() functions, as given next:

function addCategory(CatIDStr, CatStr, defaultShow, Overlay)
{
sImg = defaultShow? "minus.gif" : "plus.gif";
sStyle = defaultShow? "black" : "none";

SubStr = "<!--CATEGORY_LINKS-->";
if (hpStr.indexOf(SubStr) >= 0)
{
SrcStr = "<DIV STYLE='cursor:hand;'" +

" ID=I_" + CatIDStr +
" onClick=clickCategory(" + char34 + CatIDStr + char34 + ") ALIGN=middle BORDER=0>&nbsp;" +
"<A STYLE='color:black;text-decoration:none;'" +
" HREF='noop' " +
" Title=" + Overlay +
" onfocus=" + char34 + "window.status='';" + char34 +
" onmouseover=" + char34 + "window.status='';" + char34 +
" onclick=" + char34 + "window.event.returnValue = false;" + char34 + ">" +
"<B>" + CatStr + "</B></A><BR>" +
"<DIV STYLE='display:" + sStyle + ";'" +
" ID=T_" + CatIDStr +
" onClick=" + char34 + "window.event.cancelBubble=true;" + char34 + ">" +
"<DIV STYLE='margin-left:12;'><FONT SIZE=1><!--" + CatIDStr + "-->" + "</DIV>" +
"</DIV></DIV>" + SubStr;
hpStr = hpStr.replace(SubStr, SrcStr);
}
}

and addCategoryLink():

function addCategoryLink(CatIDStr, CatStr, LinkUrl)
{
SubStr = "<!--" + CatIDStr + "-->";
if (hpStr.indexOf(SubStr) >= 0)
{
SrcStr = "&nbsp;&nbsp;&nbsp;<A HREF='" + LinkUrl + "'><FONT COLOR=BLUE>" + CatStr + "</FONT></A><BR>" + SubStr;
hpStr = hpStr.replace(SubStr, SrcStr);
}
}

Screen-shots from networking quiz: