- Topics:
- Modifying an
Existing Page - Adding a New Page
- Adding a New
Directory - Setting up a
New Website
Let's face it - keeping a complex webpage organized is a difficult task. Here at SEP, anyone in the group can add, delete, or modify existing pages, so given a few years' time, chaos is inevitable, even if people make an honest attempt to obey consistent coding conventions.
At the same time, not allowing group editing is also an undesirable option. We'd be forced to either hire a "professional," or require an individual student to create and maintain all the pages. The former alternative costs lots of money, while the latter distracts the unfortunate student from his/her research.
Fortunately, I have what I feel to be an adequate solution to this paradox.
It allows individual users to add or modify existing pages, but uses
make to enforce a consistent yet flexible page design.
This is the simplest, most common level of interaction you'll have with the SEPWeb environment. By convention, you never modify the HTML file that is shown to the outside world, i.e., a file like prostuds.html. Instead, you modify a special file called prostuds.txt, contained in the same directory, that contains only the main body of prostuds.html. Perl scripts do the tedious jobs: like make the Navigation Bar on the left, add header and footer information, and set up page properties (bgcol,link,vlink,etc.).
The Simplest Way:
Aside from the body of the page, you can also customize some other page properties. For details on these customizations, see Adding New Files.
To add a new file to an existing directory, start by creating a page template. Go to the directory in which you want the new page to reside. Say that you'd like to make a page named prostuds.html. Remember that you'll first need to make a file called prostuds.txt, which will then be parsed by the SEPWeb scripts to create prostuds.html. At the command line, type:
This will create a dummy SEPWeb text file named prostuds.txt. Open prostuds.txt in your favorite text editor. Those strange HTML comment tags allow you some customization options for your new page. Let's start by learning how to use them.
<!-- TITLE: (PUT YOUR TITLE HERE!) -->
This is where you specify the title of your new page. Say you'd like it
to be "Student Info". Then you'd make the above line look like
<!-- BEGIN USER-OVERRIDDEN HEADER (Optional!) -->
<!-- END USER-OVERRIDDEN HEADER -->
Between these two lines, you can make a custom header for my_life.html.
By default, the scripts simply place the title you specified in
my_life.txt ("My Wonderful Life") at the top of the page, in boring
black text.
As mentioned above, space considerations sometimes make it impractical to have the full description of the page in the left-hand-side navigation bar. By making a custom header, you can show a short title in the navigation bar, and a different, longer title in the header. Also, if you find the default colors and sizes of the header text boring, you can change it to your liking, or even add images. (see SEP Homepage)
|
<!-- BEGIN USER-OVERRIDDEN HEADER (Optional!) --> <h1><center> Information for Prospective Students </h1></center> <hr> <br> <!-- END USER-OVERRIDDEN HEADER --> |
<!-- TREE TABLE BGCOL OVERRIDE: (YOUR COLOR) -->
You can change the color of the normally blue navigation bar
on the left of my_life.html. Let's say you want a pastel red bar
instead. You'd change the above line to
<!-- TREE TABLE HEIGHT: (NEW SIZE IN PIXELS) -->
You can manually specify the height of the navigation bar. The
default is 1500 pixels. I've set the height of this page to 3000
pixels, a value that was chosen to safely extend the navigation
bar to the limit of the text. Remember that different people use
different browsers and different fonts, so what may look best for
your configuration may not work for someone else's. To find the
best value by trial and error, I suggest setting the width of your
browser to 750 pixels and using 12 point Helvetica font. This
seems to be a good approximation of the mean configuration that
people use.
If in doubt, forget this option and let it default! This customization serves aesthetic considerations only, and is not crucial to the operation of the page.
<!-- BEGIN TREE TABLE EXTRA INFO (Optional!) -->
<!-- END TREE TABLE EXTRA INFO -->
Between these two lines you can add extra content to the blank area
of the navigation bar, below the folder and file icon structure.
For two examples, see Sergey Fomel's
TeX Page
or the SEP Homepage.
Quite simply, you enter some HTML code between the two comment lines. Remember that your input will lie within the navigation bar table, so you've got to be careful not to make it too wide. The navigation bar table is not of a fixed width.
<!-- PAGE OWNER: webmaster -->
If you will be the sole maintainer of a page, replace "webmaster"
with your SEP username. Your e-mail address (masked to foil spam robots)
will be posted at the bottom of the page, which signals visitors to
contact you when they have questions.
When you've finished making the above customizations, write the body of the file in normal HTML. When you're done, simply type gmake webify at the command line to bring your file online.
Now that you've learned how to correctly add a new file to an existing SEPWeb page, you're ready for a slightly more difficult step: adding new directories. You won't need to worry about the details of customization, but you'll be forced to understand the hierarchical organization of the SEPWeb directory tree.
Many webpages subdivide information into distinct groups, giving a false impression that the underlying directory structure has the same neat organization. A SEPWeb webpage, on the other hand, is the directory structure. The navigation bar displays the directory tree. Besides being extremely navigable for the novice user, this setup is also convenient for contributors to the webpage. There is never ambiguity as to where a given page lies. Look at the navigation bar for this page. You'll notice that the SEPWeb directory appears to be a "subdirectory" of the Internal Info directory, which in turn appears to be a subdirectory of the home directory. Sure enough, the actual path on disk to the SEPWeb directory is /sepwww/pub/internal/sepweb.
Copy the Makefile in the parent directory to the working directory.
THIS_DIR =
Set THIS_DIR to the name of your directory.
SUB_PATH =
Set SUB_PATH to the relative path from TOP_DIR to THIS_DIR.
If newdir is a subdirectory of /sepwww/pub/internal/sepweb, then we
set SUB_PATH = internal/sepweb/newdir/. Note that TOP_DIR=pub,
so we only need include the directories between pub and newdir in
SUB_PATH. IMPORTANT: You must include the closing slash on
SUB_PATH!
DIR_TITLE =
This is simply the string which will be displayed next to the yellow directory icon in
the navigation bar. Remember to keep it short!
DIR_LIST =
DIR_LIST is simply a list of all subdirectories in your new directory. In
newdir, this argument will be empty. But you will have to modify the
Makefile in the parent directory, internal. You would simply add
newdir to the end of the DIR_LIST string.
You'll need to create an index.html for this directory. To do this, start by creating an index.txt page with web_template.pl:
In SEPWeb, a given subdirectory is visible to all files within its parent directory, whereas any file within the subdirectory is visible only within the subdirectory itself. If we're going to add a new directory, we must remake its parent directory and all its subdirectories! The global-webify command does just this.
|
338 koko> pwd 339 koko> cd .. 340 koko> gmake global-webify |
Talk to Morgan
|
Department of Geophysics Stanford University |
|