Ditching Frames

[Ben Walker]

I'm finally going to get tackle ditching the frameset from my site. For the navigation menu am I better off using an server side includes to replicate the buttons on every page, or is there some other reccomended way. Any advice greatly appreciated before I start....

Cheers,
Ben

[Shroomz~>]

Hi Ben, do it with simple css. Something like this example >>> http://www.w3.org/Style/Examples/007/menus.html over at w3.org is very easy to customize. Just be carefull that whatever you do is EI6 compatible even if workarounds are needed. Internet Explorer 6 really is a steaming pile of dog turd unfortunately.

[Counterparts]

I'm not that much of a web man, but I did something similar for a customer recently who wanted a web front end to configure a software system.

I had the 'constant stuff' in the left hand column of a table, with the other parts of the table filled-in depending on the item clicked in the left column. I used php scripting to control the HTML output.

I think that you can use <DIV> tags & CSS to produce similar results as Shroomz indicates.

[Ben Walker]

Shroomz - If I use css, don't I have to repeat the code to create the menus on every page? Looking at that example, I think I do. I'd hoped that I could avoid having to do this as it then becomes a big maintenance issue if you want to change the menu structure in any way (ie, if I want to add a new navigation button). Maybe I've misunderstood.

Counterparts - your idea is interesting, but it would mean quite a big redesign. It effectively means that everything is on one page, doesn't it, and is built dynamically depending on which button is pressed. I guess that this makes most of your content invisible to search engines, not that that's a particularly big problem.

Thanks both, for your suggestions,
Ben

[Counterparts]

Hi Ben

In a way, yes. The page changes depending on the menu/button item clicked etc. but the same code framework runs everytime, e.g. calling functions to build the complete HTML. The code can be quite modular with this approach.

As far as search engines go, you could stick a load of meta data on the index.php page (although I'm guessing a bit here).

A friend of mine's a bit of a wizz when it comes to this sort of thing, I'll ask him for some ideas

[Shroomz~>]

Shroomz - If I use css, don't I have to repeat the code to create the menus on every page?

No, not at all. Afaik the best way if using CSS for a navigation menu would be to use the 'link' element to link an external style sheet to the html document. In that way the same simple style sheet can be used on every page making maintenence extremely fast.

The same style sheet could also contain CSS for your top or bottom page banners, logos or anything else which is repeated on every page.

[Counterparts]

Shroomz, can a CSS include content, or is it just formatting/style information to be applied?

[Shroomz~>]

Just formatting & style info to be applied to the html, so I should really have said that.

On saying that, it depends how you're looking at it. A link to a graphic element like a banner or logo is obviously going to be in your html, but in css you can create coloured shapes, like a box to use as a page-top banner or whatever, so I suppose in that sense you could say that css CAN include content .... mmm, don't quote me on that

[ChrisWerner]

Just curiosity, why you want to drop the frameset?

[Shroomz~>]

oops, giving Ben false info here

In actual fact, css can indeed include content like in the small example below:-

Code: Select all

<STYLE>
    BODY {
      background: url(mybrilliantbanner.gif) white;
      color: black
    }
  </STYLE>

[Ben Walker]

Just curiosity, why you want to drop the frameset?

The main reason is that I can't point anyone to a particular page on my site without losing the navigation info - say I want to point you to the V2 Oscillators page on my site: http://www.modularsynth.co.uk/modulepag ... lators.htm

If you follow that link, you'll get taken to the page, but without the frame, so you have no way of navigating within the site from there.
So instead I have to tell people, 'go to my site, click the modules button, then the link to v2 oscillators'.

The other reason is that, from what I understand, with frames the search engines only pick up what's in your index page, so any pages within the site aren't going to get indexed by the search engines.

And it's a good opportunity for me to try and learn a bit more about page design, css, ssi includes, etc etc

Ben

[Ben Walker]

I've been trying various things out, looking at examples, tutorials, the w3c standards,etc, and I can't see how I can replace the frames just by using css. No matter which way I look at it, the images that form the buttons, and the links that those buttons take you to will have to be hardcoded onto every page.

All of the examples I've looked at show you how to create a text based navigation bar, not an image based one.

I can set various image properties in the stylesheet, but not the source of the image itself, nor the hyperlink coded against the button. So I'd have to recreate that banner within the code of every page.

That's why SSI includes looks more promising, as I just need to create one html document called (eg) navbar.htm and add an 'include navbar' command at the top of every page. Then if the navbar changes, I only need to change one page, not every page. Am I missing something?

Thanks again for your advice,
Ben

[Counterparts]

Sounds good to me, although I've always used some kind of scripting to buld the web page so can't say for sure.

http://tutorials.alsacreations.com/

I found the above to be a very useful reference to CSS / HTML .

[Shroomz~>]

Ben, I don't know why you'd need to use separate images for the navbar buttons on your site anyway from looking at it. I mean the buttons don't visually move much if at all when pressed so would it not make sense to have a single background image behind your navbar which gives the impression/look of separate buttons & just have text links with a hover state on top of it? The position etc of that background image would be in a single external style sheet along with the css markup for the navbar text, hover states etc. Sure, you'd have to have the hyperlinks for the navbar in the code of every page, but that's just a copy & paste thing anyway.

I reckon go with whatever you're more comfortable with.

This page on the site Counterparts linked you to is good >>> http://tutorials.alsacreations.com/include/

[Ben Walker]

Well, I'm making pretty good progress here.

Have a look at http://www.modularsynth.co.uk/test/newindex.html

Don't be put off by the missing pictures and bear in mind that only pages which are linked from the main menu are currectly present in the test directory.

It's now frameless, using stylesheet to build the menu, and then an ssi-include command to put the menu onto each page so I don't have to cut and paste the menu into all the different pages whenever I change the menu.

BUT (there's always a but) something odd is happening with a couple of the pages. All works fine in Internet Explorer (for once) but have a look at the Downloads and the the Links pages in Netscape or Firefox. All the buttons except the top one disappear, although their labels remain. WTF? I'm convinced its something to do with the fact that these two pages use unstructured lists (the <ul> and <li> tags) to build lists with bullet points, but beyond that I'm stuck.

Any ideas? Feel free to nose around in the source code if it helps.

Cheers,
Ben

[Liquid Len]

OK, here's a question from an ignoramus trying to clear his mental fog. This is what I'm scrambling to learn right now. Coming from a C/Assembler/SQL background, lots of stuff to learn (good though - I don't want to write device drivers and transport layers forever). I just had the Microsoft Visual Studio 8 studio dumped in my lap, in the last four weeks I've learned ASP, ADO, C# (and moved out of a rented house that was slowly poisoning me with oil fumes).

Right now I'm tweaking around the concept of 'Master Pages' and in the last few days have learned somewhat of this CSS stuff. From what I can tell from a quick read here, you don't need to use ASPX master pages using the techniques on this page - I'm finding it a bit of a pain (pane) to use them. Are master pages just a silly microsoft-ism or do they have their uses?

[Ben Walker]

Have a look at http://www.modularsynth.co.uk/test/newindex.html

All works fine in Internet Explorer (for once) but have a look at the Downloads and the the Links pages in Netscape or Firefox. All the buttons except the top one disappear, although their labels remain. WTF?
Any ideas? Feel free to nose around in the source code if it helps.

Phew, managed to sort that one out, so I think it's now just a matter of going through and pointing all pages at the new stylesheet / menu.
Few other changes on the way as well.

Byeee

Ben

[Counterparts]

Looks fine in Mozilla, Ben. G'work!

[Ben Walker]

Finally finished off all the work required to ditch frames a couple of days ago, and went 'live' with the new site architecture yesterday - no probs so far. Nothing should looks substantially different from your point of view, but I'm happy with the changes I've made so far. Let me know if you encounter any problems with the new design - if you can't view the site at all, a simple f5 refresh should do the trick.

Thanks for all the suggestions above - they really helped point me in the right direction.

I've also brought a lot of the old pages up to date (fixed links, dropped some redundant links, fixed all the references to the old style planetz url's which give you a 'hacking attempt' error, etc).

I've plans for lots of other changes, first of which is to find all the old j9k modules (no, I've not forgotten.) Let's see if I can do that before Flexor 3 is out.

Ben

[Shroomz~>]

Nice one Ben, it's all working fine here.