To continue our discussion from the February CCMAG digital evangelism article, I will explain now how to link an external cascading style sheet (CSS) file and one or more external JavaScript files to your site to make its maintenance quicker and easier. If you already have an established website, you will need to edit each of your Web files with a single line of code per external file. You would insert these lines of code at the appropriate places in your Web page’s content in order to reference the various sections of your page (that is, the top, footer, left, right, and center). Since the center portion of your page is the main body content (and the search engines need something on your Web page that is static rather than dynamic to index), this is the only section which won’t be contained in an external JavaScript file, although it will still need a reference to the corresponding section in your CSS file in order to display correctly. Of course, the link to your external CSS file must be written in the HEAD section of your HTML code, while the remaining links to the external JavaScript files would go in various places throughout the BODY section of your HTML code. In fact, it is actually the norm to use an external CSS file these days, so you may already be doing that.
If you’re starting from scratch with a brand new site, however, you could use the template below for each of your Web files and type or paste your site’s external file link or textual content within the appropriate DIV ID tag corresponding to each section of your page. After creating your initial file, you could simply do a Save As operation and give that file the name of the next Web file you wish to create in order to save time. Then, all you would need to do to the new file is highlight the sectional content within the “center” DIV ID tag and type or paste the content for your new file in its place. For that matter, I suppose you could even copy and paste the content from your existing Web pages into the appropriate sectional containers within the template to expedite the conversion from your former design to this new design. You would, of course, do the same Save As operation on each new Web file you created, just as you would in creating a site from scratch. Furthermore, as long as you saved your files in a different directory from your current Web files, you could retain the same file names you’re currently using and avoid the problem of 404 Errors resulting from changed file names when folks use their previous bookmarks to your site pages. It’s up to you how you may do this. Now, here’s a suggested template for your Web files:
<HTML>
<HEAD>
<TITLE>Your Page Name</TITLE>
<LINK TYPE=”text/css” MEDIA=”Screen” REL=”stylesheet” HREF=”http://www.yourdomain.com/your_css_file.css”>
<!– Add other HEAD section code according to your preferences. –>
</HEAD>
<BODY>
<DIV ID=”TOP”><SCRIPT LANGUAGE=”javascript” TYPE=”text/javascript”
SRC=”http://www.yourdomain.com/top.js”></SCRIPT></DIV>
<DIV ID=”RIGHT”><SCRIPT LANGUAGE=”javascript” TYPE=”text/javascript”
SRC=”http://www.yourdomain.com/rtcol.js”></SCRIPT></DIV>
<DIV ID=”CENTER”>
<H1>Your Page Name</H1>
<p>Your page’s main body textual content goes here.</p></DIV>
<DIV ID=”LEFT”><SCRIPT LANGUAGE=”javascript” TYPE=”text/javascript”
SRC=”http://www.yourdomain.com/ltcol.js”> </SCRIPT></DIV>
<DIV ID=”FOOTER”><SCRIPT LANGUAGE=”javascript” TYPE=”text/javascript”
SRC=”http://www.yourdomain.com/footer.js”></SCRIPT></DIV>
</BODY>
</HTML>
Of course, you can rearrange your content any way you choose. For instance, you could put your navigational menu in either the left column only or in both the top and footer sections only or in all three. You can also put other content, such as a subscription box for your e-newsletter, in the left and right columns on your pages. That’s entirely up to you. Just be sure to name your external JavaScript files according to the sections they are supposed to fill on your pages so that you can keep them straight.
Now, let’s peek into the actual code content of these external files. As for the CSS file, if you’re already using an external CSS file just continue using what you have, but if you have been putting your CSS code directly into each Web page, you can cut that code from one of your pages and paste it into your new external CSS file, except you wouldn’t surround your external CSS code with the STYLE tag pair as you would on a Web page, so don’t forget to remove that tag pair (if present) after you paste your code into the external CSS file. Also, don’t forget to delete the CSS code from all your remaining Web pages in order to avoid any potential coding conflicts. If you’re building your first Web site and CSS file from scratch, you should consult a HTML and CSS manual for more specifics on the precise code to use in each file, although I will provide you with a link below to an example page on my website containing links to an external CSS file and the other pertinent external JavaScript files for your perusal.
As for the external JavaScript files, I must confess that I am not a JavaScript programmer, so I have borrowed from others and learned a few things on my own about how to write certain JavaScript coding conventions. For instance, in order for a Web browser to display the contents of an external Java script file at a particular place on a Web page, you must use the document.write command within your external JavaScript file and enclose all HTML code and other textual content you want displayed on your site within parentheses and single quotation marks and conclude each document.write command entry with a semicolon. Thus, each line of HTML code and textual content that you wish to display on your Website must be written within your external JavaScript file using the proper JavaScript coding conventions in order for it to work. The following example is a navigational menu which could be used in the top and footer sections of each Web page on your site. If you use undecorated text for your menu, I recommend you use a pipeline symbol ( | ) to separate each menu item for easier viewing and selection. See the example below:
document.write(‘<a href=”http://www.yourdomain.com” title=”Home Page”> Home</a> | <a href=”http://www.yourdomain.com/about.html” title=”Learn more about us”>About Us</a> | <a href=”http://www.yourdomain.com/acts.html” title=”Take a look at our regularly scheduled activities”>Activities</a>’);
If you like, you can get more creative with your menu and give it some flair by adding button code or some color and/or font size changes during a mouse hover. You would add this code to your CSS file with some appropriate coordinating code in your JavaScript files. To see how I’ve done this on my site, visit www.parsonplace.com/examples/webdsign.html to watch the menu in action, and click on each of the JavaScript code examples listed there to view the actual HTML, CSS, and JavaScript code I’ve used to accomplish this effect. The code segments in the CSS file that are pertinent for the menu in the left column of that page are those that begin with ul.navbar and those listed under the /*Button style menu*/ comment.
If you like what I’ve done on my site, you can just copy and paste the entire CSS code directly from your browser window into your external CSS file for quick and easy implementation. Of course, you can tweak the code however you like to get the results you want, so just experiment and have fun with it! Unfortunately, however, not all of this code is compatible with all browsers. Firefox, in particular, is rather disappointing in its display of some of these aspects, while Internet Explorer’s rendering looks great. Therefore, depending on your browser preference, you may want to limit your use of some of these or (if you’re more adept than I am) revise the code to display better in other browsers.
I hope you agree that this approach to website design (i.e., using external CSS and JavaScript files to manage various aspects of your site) makes a site’s maintenance much quicker and easier than a design without it, since editing only five files (your CSS file plus four external JavaScript files pertaining to the top, footer, left, and right sections of your site’s pages) is much simpler and faster than having to edit the same code and/or textual content across every page on your site. This is especially apparent if, for instance, you need to update the copyright date in the footer of your site’s pages. Can you imagine having to do that across even as few as twenty-five pages? Not only does this approach save you loads of time, but it reduces the potentiality of coding or textual content errors that could creep in from making repeated changes across numerous pages.
Well, that does it for now. If you have any questions or comments about this article, you may contact me by email or you can get a conversation going on the CCMAG Website. Either way, I’d love to hear from you!
Michael L. White is the founder and Managing Editor of Parson Place Press, an independent Christian publishing house in Mobile, Alabama. His book Digital Evangelism: You Can Do It, Too! is available wherever books are sold. For a list of his other books and articles, visit his Website at http://books.parsonplace.com.
