Web help please.
Hi Guys and Gals. I have a web site that is built using frames, i used frames so that i would only have to change one page when making changes i.e. the links to the left. I now understand that frames are something to be avoided and want to change the way the site is built but without changing the appearance too much. what would be the best way to do this?
HERE is the site.
Get updates with RSS
Be the first to know about new products and free stuff from IconBuffet. Subscribe to our RSS feed:
Find work or post a listing at Authentic Jobs.
iqon on Sep 05, 2007
Frames?!?! And I thought I was old school still using tables.
The simplest method I know is to create a table (or simple CSS) and make your navigation, footer, etc. a server side include (SSI) with the #include.
Of course your web host has to support SSI.
redpoint on Sep 05, 2007
IMHO the best way is using php includes. You can manually build your php pages (or you can use a Content Management System like Joomla or Wordpress but for those you would have to be familiar with the template system).
KatieK on Sep 05, 2007
Yup. Use a server language (PHP, ASP, whatever) to include the header, footer, and navigation files on each page.
Also, I'd advise getting rid of the 'click to enter' bit on the home page. Has an extra click that ever helped anyone?
widged on Sep 05, 2007
Ajax + DOM = jQuery. Don't be scared by that name of Ajax. They make a lot of fuss about ajax is very very simple to use. What ajax+DOM means is that you will dynamically replace the content of a portion of the page without having to reload the full page.
Check out jquery, that's a library that makes this very easy to design.
You can see that in action on that page of mine that contains very very obscure data. Don't pay attention to various formatting issues. I converted this from a frame system to a in-page reload rapidly not that long ago... work in progress (and at the bottom of the priority list).
Simply use "view source" to get access to the javascript. The effect is obtained using jQuery load command:
$("div#gpa_content").load("../common/material.html")
Which means load the content of the file stored at: ../common/material.html into the part of the page that is made of a division (div) having for unique id "gpa_content".
Cattya on Sep 05, 2007
There is no reason why the appearance of your page should change. Just take the things you've got in your frames, and put them in DIVs. Then use CSS to place the contents where you need them.
Anyway, a code change is a good excuse to do a bit of a restyle. If you want to try something new, or change things you don't like, this is the best moment. Think about it :)
a2 on Sep 05, 2007
I agree with Cattya. Simple use of DIVs and CSS will duplicate the framed site you have now and allow for easy changes in the future.
Congrats on moving up from frames!
iqon on Sep 05, 2007
Here is a simple site I created for a friend:
Jam Tart Productions
The navigation on the left and the footer at the bottom are separate .SHTML files. All I have to is update one file and it will change everywhere its in use.
If you view the source you will not see the #includes because they were expanded on the server. Whisper an email address on my page and I'll send you the source so can see how it all works.
mik on Sep 05, 2007
I agree with redpoint, use PHP includes.
And while you're at this transition is a good time to establish what you want your URLs to look like, since you'll now have unique URLs for your pages instead of (<shudder>) frames, so check out Apache's mod_rewrite - any of the basic things you're likely to want to do will have plenty of examples available.
You'll have to decide if you want a page template where you include the content for each page, or a file for each page where you include the repeating elements. And if you work locally and upload, you'll need to have PHP installed where you do your development. Once you're rolling, you'll love it.
bdelisio on Sep 05, 2007
I second Cattya's response. Div's and CSS are the way to go.
Adobe's GoLive CS2 is an excellent, easy to use platform for CSS development. In the UK 1and1.com offers GoLive CS2 free with their premium packages.
widged on Sep 05, 2007
On dynamic in page replacement vs server side solutions (php, ssi, ruby), the issues are the same as with frames.
Client-side solution (jQuery, div, dom). pros = faster reload as you load only a portion of the page rather than the full one. You don't have to learn PHP (though to include a page is *very* simple business). Con = user cannot bookmark a subpage. They can only bookmark the main page of your app. Some issues with the back button of the browser as well (check info on that on the jquery website).
Server-side solution. Pro = direct bookmarking possible. Con = the common page elements need to be reloaded each time.
The php part is
<?php
include_once( './admin/inc/header.inc');
?>
... the html for your page content ...
<?php
include_once( './admin/inc/menu.inc');
?>
... more of the html for your page content ...
<?php
include_once( './admin/inc/footer.inc');
?>
Your file then needs to end with .php rather than .html but most of your file will be good old html. Job done.
Management is easier in the sense that if you change the content of any of these parts (footer, header, menu), this change is applied to every page without having to bother about it. The include instructions need however to be on each single page of your website. If you come to decide to put your menu on the left rather than the right, you may need to rewrite each single page of your website.
It's good practice to use CSS to minimize the cost of reformating, but you still have to rewrite your html when you perform page reorganization.
With the client-side solution (jquery), you have to change your template once only.
PS. Note that there is a problem with the page under Directions. It looks like the map hides the text. You need to add some margin around the embedded map. <div>.... embedded map ...</div>. *Much* better would be to invest a bit of time on learning css and have all your ad-hod formatting in separate css file.
widged on Sep 05, 2007
And to learn the power of CSS, have a check at the most excellent CSS play by Stu Nichols.
jmnovak on Sep 05, 2007
Another con of client-side solutions is that if you run a script blocker like I do (NoScript), you have to allow the site to get it to work; I don't like doing that because of the increased risk of something I don't like running. (I still have to enable a bunch of sites that are necessary for day-to-day life, but I wince every time I do so...)
anti on Sep 05, 2007
I second jmnovak's remark, I browse without JavaScript as well. If your site were to require it, it would take a lot of interest on my part to get it enabled.
AppleGeek on Sep 05, 2007
I can help with your frames => php venture.
But you could also try RapidWeaver, it'll make it so you can make one tiny change and not have to update every page yourself.