As sites become larger and larger, site management becomes a larger worry. How do I keep a 2000-page site updated? How do I keep navigation elements consistent? How do I manage to change the nav on a 2000-page site without losing all my hair? There are a few methods in Dreamweaver that accomplish this.
- Templates
- Library Items
- Server Side Includes (SSIs)
Templates and Library Items can be used with any type of server, and SSIs can as well, provided your host has enabled the ability. In order to use SSIs, your page must have an extension that will be processed by the server, .html usually won't do the trick. If you're on a Unix box, it will need to be .shtml, or if you're using some other server language (regardless of server type), it would need to be .php, .cfm, .jsp, .asp, or .aspx, or any other server language you may be using. The syntax for calling the SSI will depend on which server language you're using. We're going to be using the ASP VBScript syntax since that's one of the more common scripting languages. If you're using another server language, here's the necessary syntax:
ASP and .NET:
<!-- #include file="include.asp" -->
ColdFusion:
<cfinclude template="include.cfm">
PHP
<?php require_once('include.php'); ?>
JSP
<%@include file="include.jsp" %>
Notice that I've added the appropriate server language extension to the includes. This ensures that the include would be processed by the server if a user somehow found out the include name and put it directly into their browser. If you're putting server side code in your includes, you should make sure they're always processed by the server.
Pros and Cons
There are a few advantages/disadvantages to each of these methods. I personally prefer includes simply for their ease of use and the ability to quickly update an entire site by changing just one file.
Templates
Pros:
- No server-side action needed.
- Can be applied to every page in a site.
- With new MX templates, you can include optional and repeating regions as well as nested templates, which allows a lot of flexibility for customizing the design and content of your Web pages.
Cons:
- Changes are physically made to every page based on a template.
- Updating one item requires every page to be updated and uploaded (a huge hassle on a large site).
- Templates are Dreamweaver specific. If you edit the page in an external editor you run the risk of destroying the template markup code.
Library Items
Pros:
- No server-side action needed.
- Can be applied to every page in a site.
- Can be applied to any part of page.
Cons:
- Changes are physically made to every page that includes a library item.
- Updating one item requires every page to be updated and uploaded (a huge hassle on a large site).
- Libraries are Dreamweaver specific. If you edit the page in an external editor you run the risk of destroying the library code.
Server Side Includes
Pros:
- Change one file and every file that uses that include is instantly updated.
- Every server language supports them in one form or another.
- Easier to reuse code pieces.
Cons:
- Server has to parse each page that uses includes, which can slow down your server and make your site feel slower.
How Do They Work?
Server-side Includes are just that - a way for the server to include one file inside another before the page is sent to the browser. This allows you to include page elements in an external file and have them inserted into the page called by the user. Listing 1 is a very simple example using three files. The content.asp page is what the user is viewing. It calls two includes (inc_top.asp and inc_bottom.asp) in order to wrap the content in a table.
When the viewer pulls up www.yourdomain.com/content.asp in their browser, the server parses content.asp and includes our two include files and sends the resulting page to the browser. If the user views the source code of content.asp, they'll see Listing 2.
The server has replaced the two include calls with the content of those files, just as it would any other server-side code (notice the LANGUAGE attribute isn't there either). Let's take this a little further in the next section.
Putting Your Includes Together
One way to think of an SSI is as server-side copy/paste. The server takes the content of your include and pastes it in place of the SSI call. This allows you to create extremely complex layouts using SSI. On Dwfaq.com, we use a large number of server-side includes for every page. Listing 3 is an example of a page on DWfaq.com.
Notice that we have includes for meta tags; CSS; stuff before the body tag (pre_body.asp), which includes JavaScript and CSS calls; and then a top and bottom include. All of the DWfaq headers, including the flyout menus and the footer with its complex table structures are located in includes. Changing the tutorials flyout in our menu is just a matter of changing inc_top.asp. We even put the <body> tag inside an SSI since we're not going to have different JavaScript actions on different pages.
How to Build Your SSIs
Putting together a complex SSI layout really isn't all that difficult. Just build your page in Dreamweaver and then cut/paste the pieces into the SSIs and replace them with the necessary SSI calls. Let's create an example using a header, left hand nav, right hand nav, and a footer. We're going to be using one table to lay out the page.
Create a new ASP VBscript file by clicking File > New and choose Dynamic Page, ASP VBScript. Save the file as content.asp so our include paths will be correct once we've added them in.
Create two more ASP VBScript files and name them inc_top.asp and inc_bottom.asp. Delete everything on the page, including <html>, <head>, and <body> tags. The two files should be completely empty.
Add a three-column, three-row table to your page, and merge all three columns of the first and last row. Your finished table should look like Figure 1.
Fill in some content as placeholders, and dress up your table a bit. In Figure 2 we've added some links on the left and a news story on the right, with our content in the center. I've added a few styles and made quite the piece of masterful site design.
Now we need to look at the code for our table and decide how to chop it up. What should be put into includes, and what should be left on the page? Anything that has to change from page to page should be left out of the includes. In our example, we want everything but the middle content to be the same on every page. I've commented the code in Listing 4 to set where I'm going to chop up the page. I decided to put the </head> and <body> tags inside my top include because every page will have the same scripts, backgrounds, etc. This isn't necessary if you're going to have different settings on each page, and could be detrimental if you need to apply any Behaviors to your page in Dreamweaver. Next, I'm going to cut everything from <!-- Start Bottom Include --> to <!-- Stop Bottom Include --> and place it in inc_bottom.asp. inc_bottom.asp so it now looks like Listing 5.
Now, replace the comment tags in content.asp with the include calls as in Listing 6.
Save all three files, upload, and view content.asp in your browser. If you view source code from the Web browser, it should look exactly as it did when we first built the page in Dreamweaver.
Fortunately, Dreamweaver is "SSI-aware", so it displays the page in design view exactly as we originally designed it. Viewing the page in Dreamweaver's design window should also look exactly as we originally designed it. You won't be able to eit those included files from content.asp (you'll have to open them separately) but you'll be able to work on the page as if there were no includes. |
