I have a general question about web site design and layout. I've dug
around some on the net but haven't been able to find an appropiate
answer. Let's say you have a website with a horizontal logo (a gif or
jpg) at the top, a navigation menu in the left hand margin, and some
html text and links at the bottom of the page. All the pages on the
site have these three common components, the only thing changing is
the content across the 50+ webpages of the website. Now, let's say one
decides to add another item to the menu on the left, change the top
logo etc. This means one would have to go back and change it in all
the individual webpages as well.

You can probably guess my question at this point: how can I define the
common elements (the top logo, left margin menu etc) in one page (call
it page X), import or link page X in the individual pages so when I
make any changes, I only have to change it in page X, and it gets
propogated throughout all the webpages on the site automatically.

Stylesheets naturally come to mind, but I didn't find anything about
including common images and html bits in the CSS resources I looked
up. From the little I know about html, it doesn't have provisions for
importing external files for such purposes. Please correct me if I'm
wrong in my assumptioin.

What's a good way to accomplish the objective I have in mind?

Thanks.

Hi thehambloke-ga,

There is actually a really simple way to achieve what you are looking
for...what you can do is create a 2x2 FRAMESET that looks something
like this:

|_________________________________________|
|         |                               |
|         |                               |
|    A    |             B                 |
|         |                               |
-------------------------------------------
|         |                               |
|         |                               |
|         |                               |
|         |                               |
|         |                               |
|    C    |             D                 |
|         |                               |
|         |                               |
|         |                               |
|         |                               |
|         |                               |
___________________________________________


The trick to pulling this off is being being able to get the sizes to
fit to your graphics and links. Let me just state explicitly how it
all comes together:
A,B - area for logo (you can make this one section if you have a big
logo going across the whole screen)
C - Links
D - Content Page 

So on your main page you will have nothing but this structure that
loads the homepage by default. Of course, you can get rid of the
seperators by changing the properties of the table...the same goes for
the dimensions of each area (either by pixels or percentage of the
entire window). Each segment will itself be another HTML file. Couple
this with changing the links in A,B, and C so that if they are clicked
they will open in D. This can be done using the "target" parameter in
<a> type commands. You can read more about this here (you will need to
include href and target parameters):

http://www.htmlcompendium.org/attributes-list/Aa.htm#Href

If you want links at the bottom of section D (ie. all of your 50+
pages), I would personally create that piece of HTML code and add it
to the bottom of each page (this shouldn't be too difficult). Of
course you could add another segment at the bottom with more links,
but that just seems to be a bit too much segmentation; you also have
to keep in mind that people reading a specific page will want those
links to appear right after the content...they don't want to look
through all of the static content.

My personal point of reference for all standard HTML needs is the HTML
Compendium:
http://www.htmlcompendium.org/Menus/0framefn.htm

Clicking "HTML Tags" and then <frameset> on the left navigation panel
will bring up all the parameter descriptions for this command:

http://www.htmlcompendium.org/attributes-list/Aframeset.htm

You'll notice that this site uses a similar layout as the one that I
have described above...its a great place to play around and see how
everything fits together!

I hope this has given you a strong starting point...if you have any
problems understanding the information above please feel free to post
a clarification :)

Cheers!

answerguru-ga

---

Request for Answer Clarification by thehambloke-ga on 27 Sep 2002 11:42 PDT

AnswerGuru - my apologies for not making myself clear in my original
post. I'm already familiar with frame and framesets. That is not what
I had in mind, frames add too many extra scrolls bars on the screen.
Invisible frames also don't solve the problem, because they "hold" the
top and the left side margin in place while you scroll the content
area, section D as per your diagram.

If you don't mind, could I request you to do some more research into
the topic? Your response is very impressive and informative in itself.
I can see how you misunderstood the question, I would have done the
same had I been in your place. But it doesn't help me. Here's an
example of what I have in mind - retailforward.com.  If you go to
their webpage, you'll notice they've got the green menu on the left,
and the logo and a javascript drop menu on the top. I'm no HTML
expert, and can't decode the View Source page. But I'm sure if they
added an item to the javascript menu at the top, they won't be going
back to all the individual pages to make changes. Guess you could
automate it by running a script that went into all the pages and did
fine/replace, but that's too cumbersome.

I'm particularly interested in importing/linking external pages, kind
of like a C source code bit which has an include statement at the top,
and when the compiler turns the crank on it, it pulls those files into
the executable. Does such a mechanism exist for webservers, and if
yes, what is it?

Again, please excuse the miscommunication. I appreciate your
assistance.

---

Clarification of Answer by answerguru-ga on 27 Sep 2002 13:13 PDT

Hi again,

Its unfortunate about the miscommunication...in the future please keep
in mind that the more details you include in your question, the more
accurately a researcher can respond. This includes mentioning what
does and does not merit an "answer" in your mind.

It seems my colleagues have managed to address some of your secondary
questions...I refer you to the comments made by owain-ga and rico-ga
for more information about importing external files and using
templates.

The best thing for you to do now if you would like more information on
how to achieve the given result with javascript is to post another
question and specify your exact requirements. No hard feelings I hope
:)

answerguru-ga

The answer provided by answerguru is inadequate. If you get in the
details, I specifically said in the question that I wanted a method to
put everything on *one page* (the top logo, left margin, bottom html
text). The frames method doesn't allow that. Out of courtesy, I
admitted that I should have done a more thorough job of communicating
my question, but I didn't think somebody would actually respond back
with a near obsolete method such such as using frames. It's like
asking someone to build you a computer, and they hand you a
functioning abacus.

Additionally, a part of my question if my assumption that HTML doesn't
allow linking/exporting external pages into another page was incorrect
was not addressed.

I do not mind making the payment, it just doesn't seem fair that
someone with an inappropriate answer should receive it. If you have
the enabling mechanism and it's in accordance with your policies,
please disburse the amount to researcher owain (seems like plenty of
other people knew about server side includes, but did not have the
opportunity to respond). If not, I would like a refund.

The five-star rating I gave was to the complete response, including
comments. If it just rates the researcher who provided the answer,
please change the rating to unrated.

Thank you for your time. Please do not hesitate to contact me if you
have any follow-up questions.

HTML can import external files in exactly the way you want: it's
called a server side include. If you can't do server-side includes, an
alternative is a javascript include.

Server-side is the most elegant (compatable with the greatest number
of browsers) but your ISP has to allow you to do server-side includes.
Javascript includes require the user to have a compatable browser and
have scripting turned on. That may not be an option for
visually-impaired people using screen reader software. For that
reason, I'd suggest you always have a 'home' link on every page, and
use the script to generate the sub-links.

Further info at:

http://www.mompswebdesign.com/articles/pageinclude.html

Owain

Not knowing what software you're using to create your pages,
thehambloke, did you ever consider Macromedia's Dreamweaver software
and its template feature?  From the Dreamweaver documentation...

"A template is a document you can use to create multiple pages that
share the same layout. When you create a template, you can indicate
which elements of a page should remain constant (noneditable, or
locked) in documents based on that template, and which elements can be
changed.

For example, if you're publishing an online magazine, the masthead and
overall layout probably won't change from one issue to the next, or
even from one story in the magazine to the next, but the title and
content of each story will be different. A designer can create the
layout of a story page for the magazine, with placeholder text where
the story's title and contents will be (and with those regions marked
as editable); the designer can then save that layout as a template.
The person putting together a new issue of the magazine creates a new
page based on the template, and replaces the placeholder text with the
actual title and text of the new story.

You can modify a template even after you've created documents based on
it. When you modify a template, the locked (noneditable) regions in
documents that are based on the template are updated to match the
changes to the template."

Hope that helps, or perhaps it will give you and answerguru a lead to
what you're looking for.

regards,

rico

I second owain's suggestion to do this with a server-side include.
This merely involves pulling out of every HTML file the stuff (text,
tags, etc.) that is duplicated and putting that stuff into a text
file. You replace the stuff you've pulled out with an "include" tag:
  <!--#include file="filename.txt" -->
The browser that requested the file gets the file but with the
contents of your text file(s) replacing the "include" tag(s). As far
as the browser is concerned, it's just an ordinary HTML file.

When you want to change something in all the pages, just change the
text file.
The catches are that, as owain noted, your server has to support SSI,
and also that you have to signal to the server that it will need to
"parse" the HTML file that was requested, rather than just shipping it
out the door, and to do the substitution(s) as the file goes out.
Typically this is done by changing the HTML file's extension from
.html to .shtml. If thousands of people and search engines have your
files bookmarked with .html extensions, that's a drawback. But if
virtually all your files will need to be parsed anyway, you may be
able to set the server to parse all HTML files and escape the need to
change extensions.

Thanks for the information folks, the server side include was exactly
was I needed. Might even look into Dreamweaver as suggested by Rico.

One quick follow up question I hope somebody can answer - I've heard
that a lot of search engines cannot index or search through
dynamically created pages like ASP, database driven sites etc. Does
using the mentioned SSI (regular html and the javascript versions)
encompass a dynamically created page? I want to make sure using the
SSI's doesn't hinder the search engine searching and indexing process.