Maintain Your Site with Page Include FilesGet Web Design Tips and Tricks on mps-web-design.com. Maintain Your Site with Page Include Files topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.
by Larry (Momp) Poch We all know how web sites seem to take on a life of their own. As the number of pages increases maintaining the site can be a time consuming task...! The use of 'Page Include' files makes the task of editing web pages a lot easier and faster. An additional benefit is that it reduces the size of a page, thus improving page load time. This article takes a brief look at three forms of 'Page Include' files. CSS Includes, SSI Includes, and Javascript Includes. 1.. (CSS) Cascading Style Sheet Includes CSS can be used to format the page margins, font, link colors, and much more. Create a file in your text editor, and include all the common stylesheet declarations for your pages, now save the page with a .css file extension. Note: the declaration tags are not included in an external style sheet. This reference is in the Link Relevant tag used to call up the stylesheet. For this example we will call the stylesheet page 'main.css'. h1 {color: #ff0000; font-family: arial; font-size: 14px; text-decoration : underline; } p {font-family: verdana; font-size: 10pt; color: #ffffff; } td {font-family: verdana; font-size: 10pt; color: #ffffff; } a {font-family: arial; font-size: 10pt; font-weight: bold; } a:link {color: #0000ff; text-decoration: none; } a:visited {color: #800080; text-decoration: none; } a.menu:link {color: #ffffff; text-decoration: none; } a:hover {color: gold; text-decoration: underline; } In the tag area of the page the 'main.css' stylesheet is called up using the LINK REL tag. Now when you want to add or change your page format, just edit this one file. The changes will appear on any page where the stylesheet is called up. For more on CSS see: http://www.mompswebdesign.com/css/index.html AOL Users Click Here -------------------- 2.. (SSI) Server Side Includes SSI is a great way of controlling site content that appears on multiple pages across a web site. Requirements: 1..your web site server must have SSI enabled. 2..most web hosts require the SSI pages to have a file extension of .shtml in place of .html or .htm 3..the file extension used will depend on the operating system used on the web hosts server. Windows servers use .asp file extension. Windows script: Unix/Linux servers use .php file extension. Unix/Linux script: This example will build a navigation bar for the bottom of a page. My web host server is Linux so we will use the .php file extension. Create a file in your text editor and include the HTML code for the navigation bar. Now save the SSI page with a .php file extension. Any HTML coding can be used in a SSI file, but the file should only include the code for the specific item. We will name this file 'bot_nav.php' and place it in a sub-directory called 'ssi' Now place the following script code on the page in the location you want the navigation bar to be rendered. Now when you add a new page or section to your site and want to add it to the navigation bar you only have one page to edit. The changes will appear where ever the SSI include page is called up. Note: when viewing the source code of the page where the script is called up, the include page coding will appear just as written in the SSI Include file. -------------------- 3..Javascript Includes The Javascript Include is very similar to the SSI Include in the example above. The differences are in the way the code on our javascript include page is written. For this example we will use the same navigation bar code as used above. Create a file in your text editor and include the HTML code for the navigation bar. We then add some javascript coding to each line of the HTML code as well as opening and closing javascript tags. The code for the javascript include page will look like this: Note: The page must begin with Each page line must begin with document.writeln(' Each page line must end with '); Now save the page with a .js file extension, 'bot_nav.js'. Now place the following code on the page in the location you want the navigation bar to be rendered. Javascript is a very sensitive language, but you can include most HTML or javascript coding on the page. Here are some things to watch for. 1..you can not include javascript that has to access another file to run. DO NOT include the tags in the .js file, they are included in the location script code. 2..if your content contains a backslash '' it must be preceded by another backslash ''. 3..if your content contains an apostrophe (') it must be preceded by a backslash ('). 4..the most common reasons for script error messages are extra space at the end of a line, or missing characters. This is the same type of script used to syndicate content for use on other sites. But to code a long article or web design tip by hand would take some time. I used a CGI script called 'Master Syndicator' that codes the content for me. The script is available at http://www.mompswebdesign.com/cgi-bin/prolinkz/pl.cgi?willmaster Note: whether using CSS, SSI, or Javascript Include pages be sure to upload them to your site in ASCII mode. Implimenting one or all three of these 'Page Include' methods will make maintaining and adding to your site a lot quicker and easier. ------------------------------------------------- Larry(Momp) owns Momp's Web Design and MWD News newsletter. In addition to the web design service, the site includes a web design reference library for webmasters. Momp's Web Design: http://www.mompswebdesign.com/ MWD Newsletter: http://www.mompswebdesign.com/mwdnews.html Contact Momp: mailto:momp@mompswebdesign.com ==================================================
|
More Articles:1. Other printing applications Challenging and inspiring. That’s what printing has been calling for in the modern technology. Artists and graphic designers have their own exploits towards printing and graphic design. They have been merging their capabilities and creative ideas towards making out even solutions to designs. The breakthrough in inkjet prints plus the breakthrough and advancement in designs have teamed up to make fabulous productions. They say two heads are better than one and it made sense. They have merged the… 2. Paper talk in printing A small factor but otherwise needs some consideration in printing is choosing the kind of paper your print job would be printed on. A few designers do not give much thought about this issue. Some may have techniques so that the color in whatever paper printed on would not affect the prints. Some just do not give a damn about it as long as they have done their work. Let their clients worry about it later on.The first is opacity. This refers to how much you can see through the paper. You would not… 3. Review of Online Website Builders By Yolanda McDonald Online website builders are becoming more and more popular. Online Website builders enable the average HTML-Challenged person to build (dare I say...cool) websites online without having to code a thing. These time saving tools come with some features built in, such as forums, link exchanges, password protected member areas, RSS feeds and more.I've looked into a couple of offerings lately in an attempt to replace the poor hosting I was getting from another web host. I compared 3 site builder… 4. How To Keep More Of Your Visitors Did you know that most of your visitors probably never go beyond your homepage? And a lot of them leave within ten seconds of hitting your homepage, NEVER to return again?These are wasted visitors, and you must do everything possible to reduce the waste, or you'll simply miss out on a great amount of profits.Luckily, there are a couple of effective tactics you can employ to prevent visitors turning their backs on your site. I've outlined ten of them in this article. The basic strategy is two-fol… |
||||
