[Salty]

I thought there used to be a web design forum, I don't know if it was killed. Anyway, this is pretty basic, I figure there has to be a way to do this without too much head ache but off the top of my head I can't think of how to do it best.

Basically, I'm designing a website that has three major sections, I want one part of the layout to change depending on which part of the site you're in. IE a navigation bar for each section.
So in section 1 it'll say ABC, in section 2 it'll say 123, and in section 3 it'll say something else.
Basically the idea is it would allow me to put the site up quickly and keep a list of all the pages in each section. Essentially when I update a section I'd rather update one file that would then be loaded into each page in that section when it loads, instead of having to manually update each.
I realize I could technically do it with flash but that seems like a really stupid solution.
I imagine it should be easy to do with Javascript. All I want is to be able to insert a bit of html into multiple pages.

Anyone know where I could find some example code?

[OreoCookie]

I have used a combination of server-side includes and CSS to include menus and stuff.

[turtle777]

Originally Posted by Salty 

I thought there used to be a web design forum, I don't know if it was killed.

It was merginated with the Development Forum.

Developer Center:
Discussion forum for software developers of any kind, including Mac OS X, Windows, Unix/Linux, and web development.

-t

[design219]

Originally Posted by Salty 

All I want is to be able to insert a bit of html into multiple pages.

If you are talking about a small site, a site wide find and replace might be easiest. Deamweaver will do this, and I'm sure most other web development programs will too.

Of course using a back end application and dynamic serving would be the slickest solution.

[Salty]

I realize I could do a simple find and replace but that just seems a tedious thing to do every time.

[Calimus]

I'm not sure how you've got it all set up, but you could do it with pure CSS. Using display: hidden; you could have the 3 sections of code in 3 different divs and only have one show at a time, with the class to hide them keyed off a class that is different on the 3 pages.

[Salty]

OK so it looks like I'll be doing it with Server Side Includes! Now I just hope that the friend who's hosting account I'm going to be sharing (it's the Church's website so I'm just piggy backing off his hosting since we won't be doing a ton of traffic).

Anyway looks like so long as the host allows for SSIs, I can just make a basic header, then three files for header,nav section, (bit between nav section and content) then I'll have the content in the individual html files, then a footer file.
I used to edit my old forum's phpBB header and footers all the time so working like this shouldn't be any trouble, had no idea I could work like this with HTML though

[- - e r i k - -]

PHP includes are normally the way to go. I have a menu design that will automatically remove the link and style the current page you are on with just a single menu file.

[Chuckit]

PHP or SSI.

[Salty]

Originally Posted by Calimus 

I'm not sure how you've got it all set up, but you could do it with pure CSS. Using display: hidden; you could have the 3 sections of code in 3 different divs and only have one show at a time, with the class to hide them keyed off a class that is different on the 3 pages.

Yes, but that would require using CSS! And CSS happens to freaking hate me! You have no idea how long it took the last time I edited my blogger template!

[design219]

Originally Posted by Salty 

Yes, but that would require using CSS! And CSS happens to freaking hate me! You have no idea how long it took the last time I edited my blogger template!

You must learn to love CSS.

[Salty]

Originally Posted by design219 

You must learn to love CSS.

Soon as CSS starts to make even a lick of sense, then I'll start to love it! I love what you can do with it, but it makes no freaking sense! I still have no idea how on earth you can know where anything is going on the page!

[Chuckit]

Originally Posted by Salty 

Soon as CSS starts to make even a lick of sense, then I'll start to love it! I love what you can do with it, but it makes no freaking sense! I still have no idea how on earth you can know where anything is going on the page!

By actually learning it. There are some things that are hard to do in CSS, but clarity is not one of its failings. A CSS display: block; float: left is much more clear and concise about where the element will appear than, say, an HTML table.

[OreoCookie]

CSS makes a lot of sense once you get into it. It can save you a lot of work … 
now, the hard part is to make it work properly with IE … 

[- - e r i k - -]

Seriously. You can not make a modern webpage without CSS.

[design219]

Originally Posted by OreoCookie 

the hard part is to make it work properly with IE … 

Oh don't get me started.

[design219]

About CSS... check out css Zen Garden: The Beauty in CSS Design for a nice look at what you can do with CSS, espcially with layout and design. This project takes a single html page and allows people to change the way it looks by applying a different style sheet. You can select a different style sheet by different designer from the html page itself.

It is worth the effort to learn about CSS if you intend to keep designing websites. There are a number of good CSS books, but I would recommend CSS: The Missing Manual by David McFarland

[Jawbone54]

Welcome back, Salty.

[mdc]

I'd make a .php page with variables and then each section pulling whatever variable it needs. One file for all of your content you need to pull and a php include to pull whatever variable (content) you need.

I did this recently for a site who had a sidebar that changed on each page.
title
content
title2
content2
Instead of editing each page's file, I created 1 php file with variables (like I explained earlier) and made each page pull whichever variable it needs. Edit 1 file for all the changes.

[Salty]

I think the HTML SSIs will work out fine. Which is good since I don't know php. My big problem with CSS is that the content is not within the layout. So I never really know where anything is. As well I have yet to really get my head around how I can tell when I read CSS where each part is going to end up. HTML is tough with tables but firstly I can use dreamweaver, and while viewing it things can make sense. Beyond that, at least with tables you just have column and row spanning and once you get that down it's not too tough.

[Salty]

Oh and thanks Jaw, I never really left, I've just been ubber busy, both with the whole graduating thing, plus planting a Church and what not. Things are kinda already falling into place for both though. I should be getting a full time job at a local electronics retailer. And then the Church stuff, I already have a good chunk of people that are very interested and have expressed intent to come out. Our first meeting is this Saturday we'll probably have a low turn out since a lot of people have said it's not a good day for them this week, but once we start going regularly every week people will be able to adjust. It'll all be good.

Oh by the way, anyone know the cheapest/best place to buy a domain? Any places I should stay away from?

[- - e r i k - -]

What seeds do churches grow from?

[besson3c]

Originally Posted by Salty 

I think the HTML SSIs will work out fine. Which is good since I don't know php. My big problem with CSS is that the content is not within the layout. So I never really know where anything is. As well I have yet to really get my head around how I can tell when I read CSS where each part is going to end up. HTML is tough with tables but firstly I can use dreamweaver, and while viewing it things can make sense. Beyond that, at least with tables you just have column and row spanning and once you get that down it's not too tough.

The problem with SSI is that not only does your host need to have it enabled and permitted for your site, but you usually need to rename your pages to have a .shtml file extension.

If you're going to get into page renaming, the better option might be PHP, and it couldn't be easier to do. All you need to do is the following:

1) rename your page to have a .php extension
2) include the following text in your .php file:

<?php include 'path/to/file'; ?>

around this statement will be all your HTML, unaltered. In other words, in place of where your SSI statement would go, just use the include statement above.

[- - e r i k - -]

Originally Posted by Salty 

My big problem with CSS is that the content is not within the layout.

Well that's the whole fricking point isn't it? Separate CODE from LAYOUT.

It makes it a million times easier to maintain, update and change as you go. One file for a whole site layout. What could be easier? It's much easier to actually edit the content without having to sift through garbage layout code, not to mention how much you'll save on bandwidth and rendering time. Sheesh.

I would never ever go back to the TABLE-hell. I left that behind in last millennium.

[OreoCookie]

Originally Posted by design219 

Oh don't get me started.

Yeah, some of my students complained after I told them that I wouldn't bother fixing the course's website for IE … some of them thought it works only on the Mac, although the only browser it didn't work in was IE

CSS can be so nifty and it would be widely adopted if MS had bothered to implement it almost ten years later

[design219]

Salty, the thing about layout in CSS is learning to use the "div" tag. And since you are using Dreamweaver, it is easy to see where things are on the page as it give a pretty good preview as you work.

[shifuimam]

Stay away from GoDaddy - I wasn't impressed with their website or their customer service when I hosted with them for a year. Try 1&1 or Network Solutions.

You need to make sure that whatever hosting service you use permits SSI. SSI can be done with any language - Java, PHP, ColdFusion, ASP, ASP.NET, or SHTML.

I understand your frustrations with CSS. If you're trying to use CSS to position all your elements, try starting with a simple layout that puts everything in the upper left of the page - don't start trying to center things vertically or horizontally in the browser until you've mastered the basics. Start with a simple two-column layout with a banner/header at the top.

The only way to learn CSS is to practice using it all the time. That's really the best I can tell you without writing a long and involved tutorial on the basics of CSS.

If it's any consolation, most of what I learned I taught myself - I took web design classes in my degree program when I was in college, but the fundamentals I learned on my own.

Good luck!

[besson3c]

One can use CSS for text formatting, and for positioning. A good way to learn CSS is to focus on text formatting, as this won't change your page layout. Once you get the hang of using div tags, learning the differences between classes and IDs, and inheritance, perhaps graduate yourself to positioning.

Your goal is to remove all manually set attributes on a page with CSS references.

[shifuimam]

Also, you mentioned in the original post that you want to split up a website into three sections with different navigation in each section.

Unless each part of this side is mutually independent from the others, changing the navigation around is a big no-no. It's confusing for users and makes navigation more difficult. It might look prettier to you, but the end-user experience includes more than just a slick exterior.

[turtle777]

Originally Posted by Salty 

Oh by the way, anyone know the cheapest/best place to buy a domain? Any places I should stay away from?

Well, Dreamhost.

Unfortunately, you are in Canada. Dreamhost offers FREE Domain Hosting for Non-Profit organizations in the US.

Non-profit Discount - DreamHost

-t

[Chuckit]

Originally Posted by besson3c 

The problem with SSI is that not only does your host need to have it enabled and permitted for your site, but you usually need to rename your pages to have a .shtml file extension.

Those are equally true of SSI, and I've known a few crappy Web hosts who had SSI (I assume it came with Apache) and not PHP. That's the reason I mentioned it.

Also, you don't need to rename your files with SSI. Both the XBitHack and AddHandler htaccess directives allow you to specify that normal HTML files should be parsed.

That said, I'd personally use PHP.

[Laminar]

Originally Posted by Chuckit 

That said, I'd personally use PHP.

Quite appropriate for a Salty thread.

[besson3c]

Originally Posted by Chuckit 

Those are equally true of SSI, and I've known a few crappy Web hosts who had SSI (I assume it came with Apache) and not PHP. That's the reason I mentioned it.

Also, you don't need to rename your files with SSI. Both the XBitHack and AddHandler htaccess directives allow you to specify that normal HTML files should be parsed.

That said, I'd personally use PHP.

Yes, I used to add my own AddHandler for supporting SSI in .html files, but I figured that this was a pretty non-standard way of doing this.

SSI is indeed a feature of Apache, provided via the standard mod_include module which comes with Apache.

[besson3c]

Originally Posted by Laminar 

Quite appropriate for a Salty thread.

I miss those days... I used to like calling Salty "salt face". He enjoyed that, as did I. It was mutual fun, and everybody was happy and nobody got hurt.

[besson3c]

Laminar: can I still call you Gossabutt every once in a while?

[Laminar]

Originally Posted by besson3c 

Laminar: can I still call you Gossabutt every once in a while?

[RAILhead]

Am I the only one that giggled when "Salty" said "piggy-backing"?

[besson3c]

Originally Posted by RAILhead 

Am I the only one that giggled when "Salty" said "piggy-backing"?

I did not giggle, perhaps because I did not get the joke.

Sometimes I giggle when I think about some sort of rail being your head though.... heheheh!