Web Site Layout

  Gaz W 00:51 23 Jan 2004
Locked

How can I make a web site that allows me to have a standard layout without using frames, so that I don't have to put in tables and menus, etc, into each page? I just want a layout that will apply to each page automatically.

Have thought of using in-line frames (IFRAMEs) and also using virtual include but both of these methods have drawbacks, mainly that there is still quite a bit of code to put into each page.

I believe that something like this can be achieved using PHP, but I don't have the hosting for it at the moment.

Any ideas?

  soy 00:57 23 Jan 2004

TEMPLATES

You can create a template and use that for all of your website pages. When you modify the template, all the pages that was based on it will change accordingly.

This will save time as you don't have to code, alter each page individually.

  Gaz W 01:28 23 Jan 2004

How do I make this template so that when I modify it all the pages based on it will change accordingly? Obviously they have to be linked to it somehow, but I don't know a way of doing this.

Also, does the template have to be written in any particular language, or will HTML do?

  IClaudio 08:35 23 Jan 2004

FrontPage, NetObjects Fusion and Dreamweaver (and probably others) all have Template-based page creation and then any change to the original Template will affect all pages based on that Template.

Probably easier than re-inventing the wheel ;)

cheers
Tony

  Taran 09:49 23 Jan 2004

Tell us which WYSIWYG editor you are using and one of us will help.

Before you do though, check out the helpfiles in your current web authoring program. All the mainstream WYSIWYG editors support page templates.

In brief, you make a layout page using tables frames or CSS with your banner, top panel, left panel, even a footer area with your copyright statement. Any page you make from that template automatically has that layout applied to it. Not only that, but if you want to change the appearance of your site at a later date, alter the template then apply that template to all pages created from and linked to it and everything gets changed at once.

  Gaz W 16:38 23 Jan 2004

I may have given the wrong impression that I'm using a WYSIWYG editor. I write all my web pages in Notepad using HTML. Normally I've just used frames but I've gone off the idea of frames completely.

What I need to do is create a site, preferably without a WYSIWYG editor, that will use some sort of template or whatever. A lot of the big sites use things like PHP and ASP, etc, and I'd like to be able to use something more complicated than just HTML.

  Taran 17:04 23 Jan 2004

Unless your site is very large, unless you already know ASP and Access or PHP and MySQL and unless your webhost supports Access or MySQL databases then you are off to a poor start.

If you do want to use dynamic content, you can do all kinds of things. One common way of efficient web page production is to write a header and footer file and use them as includes in a single page document. This page has the same common layout by using the header and footer files, and all hyperlinks in your navigation panel point to content pulled from your database to populate the page. This is how you use one page [with its include files] to serve an entire sites content.

Your hyperlinks then, are queries, requesting information from your database and there is further code embedded into your page to write that information when it is returned from the database into the page as text copy. You can do the same for images as well.

Now, to do this effectively you need a better than average understanding of database design and implementation, you need the database and scripting language support from your web host, and you need to know your available scripting language to begin with.

Data driven sites are no picnic and for a small site I see no advantage in the huge workload to rewrite everything from the ground up. It's a wonderful way of managing large sites of hundreds and even thousands of pages, but for smaller sites I can give you dozens of reasons why not to do it for every reason you can give me in favour of it.

Now, as a possible solution, design a page along the layout that you like. Use simple tables, include your background colours, navigation links [even if the pages you are linking to have not yet been created] and save it as TEMPLATE.htm.

Open this file for every new page, save as a relevant file name and simply alter the empty content window to reflect the page text copy and/or image content.

There are ways of linking .tpl files into sites but toughing things out using notepad significantly increases your workload and decreases your efficiency. I'm not meaning that critically: it's just the way things are.

Using a WYSIWYG editor allows you to efficiently design and output your site[s] quickly and easily. Templates become simple and generating complex layouts also takes an easier turn.

I'll agree that everyoe who designs webs should learn some HTML, but long term web production with Notepad is my idea of absolute hell.

  Taran 17:15 23 Jan 2004

I'd argue that the best overall possible bet you have is to familiarise yourself with CSS and use it to control your site layout.

You can specify table layouts without using table HTML tags, you control your backgrounds [colours and images], borders, fonts, hyperlink underlines, overlines, hover effects and similar.

Everything for your site formatting is held in the CSS file, and you reference it all in <div> tags and similar.

It also helps search engines with your site content since there isn't a load of mismatched HTML to wade through to 'read' your site.

Change something in your CSS file and you change every page in your site in one fell swoop.

Check out this link click here

It's a rework of a page I did for someone in this forum using CSS and XHTML.

There's a download link at the bottom of the page for a copy of the files that make up the page. The buttons are all done using CSS [no images] and if you remove the metatags you'll find the whole page is made up a few list and div tags.

PLay with it a bit. Take it apart, break it, kill it and put it back together again. If you had a site with 100 pages linked to that CSS file, change the CSS file and every page on your site reflects that change.

Just a thought.

;o)

  Gaz W 22:46 23 Jan 2004

I think that's exactly the sort of thing I'm trying to do. Have had a look at your code and it appears that very little needs to be done to the individual pages when updating. I have done similar things in the past but not with css for layouts; I only used it for backgrounds and styles, etc.

I did a crude version of that using virtual includes for big chunks of HTML. It worked, but there were still elements of code that HAD to be put into the code for the individual pages or it wouldn't work, for example the part linking to the style sheet, otherwise the page was loaded before the style sheet could be "read" and applied to the page.

Anyway thanks again for that link. Have downloaded the files and I didn't realise the potential of css. I'll have a go at doing something for myself along those lines.

Regards, Gaz

  Taran 23:42 23 Jan 2004

If you want to dabble with CSS, I suggest you look at this forum link:

click here

Penny has offered some good links to a couple of very serious CSS sites which, in turn, have links to others.

You could also do worse than look into an alternative text editor, at least to experiment with.

Try the superb HTML Kit from click here

It's free, there are download plugin add-ons for CSS, XHTML, ASP, PHP and all sorts of other nice things and, aside from code autocomplete [type in the first < of your syntax and it pops up a list of possible entries from which to select] it has colour highlighted syntax - the best coders aid in the world.

Out of all of the coders tools available it's one of the very best and outperforms some quite expensive software. At the very least it allows you to produce sites faster and more efficiently while still controlling your own code.

The CSS add-ins for HTML Kit are wonderful. There are even some simlpe templates from which to start, and it's an education when starting out to have this kind of thing to examine and take apart to see how it all works.

If you look at some of the sites Penny links to in the thread I've suggested above you'll be amazed. CSS and HTML, or XHTML to give you the best overall output, are a very serious layout combination and I'm sure you'll find it fascinating as well as useful.


Taran

  Gaz W 16:19 24 Jan 2004

Have downloaded HTML-Kit and found it to be extremely useful - and it's free! I've only used it a bit, but I've found that typing HTML code is much easier when it automatically completes it and adds the appropriate tags in for you.

One minor criticism of it I have is that I've always used CAPITALS for HTML, because for me it helps it to stand out more. I haven't found an option to make it capitals and am wondering whether it is because I'm not really supposed to use capitals?

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Best phone camera 2017

Stunning new film posters by Hattie Stewart, Joe Cruz & more

iPad Pro 10.5in (2017) review

28 astuces pour profiter au mieux de votre iPhone