Apr
14

Question about website design and maintenance?

By Sally Homemaker

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?

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Categories : Work From Home

5 Comments

1

If you can’t use a server side scripting language like ASP or PHP, then you might consider AJAX. It uses javascript and the xml capabilities of the browser. A good tutorial is at: http://www.w3schools.com/ajax/ajax_httprequest.asp

i used ajax to build my online resume the same as you’re describing. http://www.garybryant.net

2

easiest would be frames. hardest (but most efficient) would be ASP.

with a frame, you would declare the frame as your first page
(psudo code)
<frame split = horizantal, top = 100 pixels, bottom = the rest of the page>
<frame 1 (top) = Page one with logo>
<frame 2 (bottom) = page with content>
</frame>

You can then nest frames for a side bar.
<frame 2 (bottom) = frame2>

<frame2>
<frame 1 = left side bar>
<frame 2 = right side content>
</frame2>

look up frames at a free tutorial at:
http://www.w3schools.com/tags/tag_frame.asp

3

If you’re hosting plan accommodates ASP, you can use include files for the navigation elements. Add the include file to all of your pages and then, when you want to make a change, just make it to the appropriate include file, publish it, and you’re set. Play around w/ a test page b/f you start adding the include file to all of your pages.

Here’s a quick, simple example.

<table>
<tr>
<td colspan="2"><!–#include virtual="/includes/logo.asp" –></td>
</tr>
<tr>
<td><!–#include virtual="/includes/nav.asp" –></td>
<td>Content Goes Here</td>
</tr>
<tr>
<td colspan="2"><!–#include virtual="/includes/footer.asp" –></td>
</tr>
</table>

4

what you can do is create a 2×2 FRAMESET

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

5

Sorry all the above answers are horrible – frames is NOT the way to go.

there’s no ‘easy’ way to do it but I mostly use a combination of things – Dreamweavers template function allows you to build a page as a standard outline and define areas that can be edited. I have a site with 240+ pages – if the navigation items change all I need to do is change it on the one page and when saved dreamweaver automatically updates every page.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

the other thing to use is PHP include – I’m no expert on this but what I do is use this:

<ul id ="chlist">
<li><a href="charity-display.php?alpha=a-c">A - C</a></li>
<li><a href="charity-display.php?alpha=d-f">D - F</a></li>
</ul>

<?php
$alpha = $_GET["alpha"];
if ($alpha == "a-c"){
include("../charity-listings/a-c.php");
}

if ($alpha == "d-f"){
include("../charity-listings/d-f.php");
}
?>

charity-display.php?alpha=a-c is a link with a querystring (the ‘?’) so the page is told "alpha=a-c"

the bit below says if the querystring = a-c INCLUDE the page a-c.php.

so I can have a wesite with ONE page and a blank middle all the links are made of querystrings which will INCLUDE the content of that page – which should just be the content of the story or article or whatever it is you want to be shown.

===============================
it’s also possible to have a blank page and insert a number of ‘includes’ into that. Say you design a page with your navigation area on it you could ‘include’ that code into a page that way yo only need to change that one page and every other page ’sucks’ that code in.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Finally yes – CSS it a great way to change a site throughout – unfortunately it’s far too large a subject to go into here, you’d rally need to buy a book an learn by trial and error – or look at a website like the csszengarden.

Related Posts

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Tags

This is a Widget Section

This section is widgetized. If you would like to add content to this section, you may do so by using the Widgets panel from within your WordPress Admin Dashboard. This Widget Section is called "Feature Bottom Right"