| UNIVERSITY of VIRGINIA Computer Science | ||||||||
 | ||||||||
| Research | Teaching | People | Community | |||||
Search
Directory
Contact Us
| Search Directory Contact Us | | ||||||||||||||||||||
| ||||||||||||||||||||||
| Undergrads • Grad Students • Faculty • Staff • Alumni • Locator • Phones | ||||||||||||||||||||||
| ||||||||||||||||||||||
To create a homogenous set of pages for the CS department, a number of macros have been developed. These macros save HTML authors the burden of having to manually retype our most commonly used constructs. Examples of commonly used code include the clickable image map that appears at the top of every page, the set of buttons at the bottom of every page, the credit line at the bottom of every page, etc. Using the C language pre-processor (cpp), we are able to insert and expand these macros into any file by simply referring to a short macro name.
The basic chain of events is such:
Macro Definitions:
All macros are defined under /server/htdocs/include.
"macro_header.html"
creates the clickable image map that appears at the top of every
page.
"index_buttons.html"
creates the small set of clickable buttons that appears only on the
top-level CS home page.
".html"
creates the large set of clickable buttons that appears at the bottom of
every subpage.
"macros"
contains various other macro definitions--- e.g. table macro for
faculty page, large letter macro, news page macro, etc
Macro definitions must begin with a #define declaraction. A macro can accept any number of arguments, in the fashion of C function calls. Arguments must be separated by commas.
This macro accepts two arguments: name and url. A
call to this macro would look like:
macro_link(John Smith,http://www.johnsmith.com/>
The output of the macro will then be:
<a href=http://www.johnsmith.com/>John Smith</a>
Note: If a macro definition does not fit on one line, each wrapped line must be broken by a backslash (\) to indicate continuity to cpp.
An example:
#define macro_header(bar_picture)
<body bgcolor="#FFFFFF"> \
<img src=http://www.cs.virginia.edu/newimages/bar_picture \
width=560 height=28 alt=" ">
Raw File Editing:
All .raw files processed by cpp must have this as their first line:
#include "macros"
You may then begin writing conventional HTML code:
<html>
<head>
<title>Test Page</title>
<head>
Immediately after the closing </head>
tag, insert the following line:
macro_header(bar_XXXX.GIF)
where bar_XXXX.GIF is
the name of the custom gradient bar that appears beneath the
top-level image map on every page (*See below). Continue writing HTML
code, until you are ready to end the document with the usual
</body> </html> tags. Immediately before these two
statements, include the following lines:
macro_buttons
macro_footer
The first statement inserts the large button set, and the second
statement inserts the credit line.
#include "macros"
<html>
<head>
<title>Test Page</title>
</head>
macro_header(bar_test.GIF)
<center><h1>Test Page</h1></center>
This is a test page. etc. etc.
<p>
macro_buttons
macro_footer
</body>
</html>
*Note from above: These gradient bars are created using Adobe Photoshop, using a template image. For details, see graphics, below.
Make How-To
See the Makefiles tutorial.
Whenever a new page is written, two images must also be created. One
of these images is the
button
that goes at the bottom of all pages (in
macro_buttons.html) and the other is the
gradient title
bar at the top of each page.
For the title bar, use the template file Bartempl.PSD in the
~Webteam/extra/PCFiles directory. On the
template are two vertical lines. These lines are guides for where the
text should be roughly located. They
exist on a separate layer from the background. To add the text, use
the Times New Roman font, bold and
anti-aliased, at 23 points. The color is RGB 0,0,255. The spacing will
need to be adjusted so it roughly fits
between the two vertical lines. Then deselect the layer with the
vertical lines by clicking on the eye icon next to
the layer that reads 'bar.' Then save the image as bar_pagename.JPG
and upload it to the
server/htdocs/newimages/ directory.
To add a button to the list of buttons at the bottom of each page,
open the b_template.psd file in the
directories mentioned above. Select the image layer that contains the
text, and erase the word Template.
Using the text tool, set the font to Poppl-Laudatio Regular, 14 point,
bold, anti-aliased, and enter the name
of the page you have created. Then go to the
~Webteam/server/htdocs/include/ directory and open the file
".html". This file is just a list of all the buttons, one
entry per line, in alphabetical order. Scroll
down until you find the position where your button should go
(alphabetically), and add
a link to that page, following the format
of the other links in that file.
Once the macro is updated, return to the htdocs directory and type
'make'. This will remake all the html files,
replacing the old button list with the new one. Once the html files
have been updated, edit the
/directory/index.raw file to show the new page you have added.
Finally, whenever new buttons are created, the directory page needs to be
updated appropriately.
Whenever a lecture or talk is recorded, the 8mm video should be converted
to a standard VHS tape and the tape should be stored with
Kim Gregg
in her office.
The video page should be updated to include the contents
of the newly recorded video.
Possibly the single most important question you should ask yourself
when designing a page is: "Would I want to browse this page over a
modem connection?" Too often, HTML authors ignore the vast audience
of "T-1 Challenged" users who will potentially visit their page, and
go overboard with graphics and special effects. Always try to keep
transfer times to a minimum. You will find your users very grateful.
Fortunately, there are ways to achieve respectable download times,
while still maintaining a visually appealing interface. Here are some
tips:
For example:
<img src="picture.JPG" width=150 height=200>
clearly specifies the size of the image (in pixels), which lifts a
burden off clients.
<IMG SRC="mailbox.JPG" width=30 height=30 alt="[Mail]">
An eclectic collection of tips, tricks & hints from Paco
The Listing
of 3,000 Universities
Graphics
Videos
As stated earlier, use animated GIFs with great caution.
They are busy, distracting, and hard to execute with style.
Webteam Checklist
Send e-mail to webteam@cs.virginia.edu to let everyone know, so that
work is not duplicated/erased/modified unknowingly.
Remember to put a Makefile in it.
A sample Makefile
Department of Computer Science
School of Engineering, University of Virginia
151 Engineer's Way, P.O. Box 400740
Charlottesville, Virginia 22904-4740
(434) 982-2200 Fax: (434) 982-2214 Web Comments: webteam@cs.virginia.edu
Admissions Inquiries: inquiry@cs.virginia.edu
Site directory, Other addresses
Server statistics
© Created by the CS Web Team
