Blog Talk 2 – How to Implement Consistent Framework
Vicker | November 15, 2005 | 11:43 pmI think all of you have done the redesign assignment already and starting to write the report. When you are redesigning the web, I think most of you may have faced a certain problem in mind that is how to make all the pages consistent? As all the pages will have the same html opening tags, meta tags, linking of the style sheets, header navigation bar and the footer copyright declaration part. If I simply copy and paste it to every page, it is time consuming and not easy to maintain in the future. So I want to introduce a few methods here.—————————————————————1. FramesI think I don’t need to talk too much about frames, it is just a standard HTML tag that is easy to implement. It will divide the screen into areas which each area will load it’s corresponding page.The advantage is that it is server independent, any web hosting services can run it. However there are a bunch of problem using frames to achieve consistency which are shown below.- Browser don’t know what to bookmark- Opening the source will open the frameset but not the page- Search engine will have problem crawling the pages—————————————————————2. Client Side IncludeInclude means that you will insert one page (in here HTML) into another one. For example, you may have a navigation menu which will appear in every page. So you can simply include the navigation menu page into every pages of your web site to achieve consistency. In here client side include means the include process is done on the client side which can be achieved using JavaScript.Here is the JavaScript example:
<script type=”text/javascript”>function print_header (){var elem = document.getElementById (”header_content”);elem.innerHTML = “<table><tr>…….</tr></table>”}</script><span id=”header_content”></span>
The advantage of using client side include is that it is server independent just like frame. Any browser which supports JavaScript will work. However there are a few disadvantages as below.- Destroying HTML structure (if you look at the JavaScript structure, you can see that it is some sort of program and strings instead of standard HTML)- Hard to maintain- Search engine won’t be able to crawl because it is made at client side—————————————————————3. Server Side IncludeIn contrast, server side include is done by some server side scripting. It can be some simple ones like the SHTML or some complicated ones like PHP, ASP or JSP. The pros of server side include is that it can totally eliminate all the disadvantages in the previous methods. However the main disadvantage is that it is server dependent, and it is sad that CityU personal web do not support these.The example of SHTML is illustrated below:=> index.shtml
<!–#include file=”header.html”–><body>……</body><!–#include file=”footer.html”–>
=> header.html
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.1//EN”"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh-tw”>
More resources and tutorialsHow do I include another file inside a HTML file?How do I include one HTML file in another?
Related posts
- Comments
- No Comments »
- Categories
- Web Usability
- Tags
- frame, HTML, include, PHP
Comments rss
Trackback
