Simple Server-Side Includes with Dreamweaver

Most sites have at least one element, like a navigation feature, a header, or a simple piece of text, that appears on multiple pages. (I really worry about the sites that don’t.) Dreamweaver users can use templates and the library to store repeated elements, and if they do, they need only change the repeated item once, rather than many times on each individual page.

includes1.jpg

Dreamweaver’s library can store lots of design chunks, but it isn’t always the best solution for repeated elements.

Unfortunately, there are some drawbacks to this method. For starters, all of the library and template code ends up in every page that displays the item. Let’s say your site’s sidebar navigation is a library item. When you build a new page, you can simply insert that item into your design. It’s easy, but check out the page code. It’s long and bulky.

Also, when you change a library item, you have to reload every individual page that features the item. If you have a large site, this can take a long time.

Server-side includes (SSIs) serve the same purposes as library items, but without the drawbacks. Imagine again that your sidebar navigation is a repetitive element. The pages that feature the navigation would only need a line of code that calls or includes code from a separate file. All that’s required is one little line, and if you ever need to update the navigation, you can simply change and upload the include file. The updates will automatically appear on all pages. There’s no need to reload all the pages that feature the navigation.

But wait, don’t you need to know how to program to do a server-side include? Not really, but you do need to know how to use them on your server. Find out if your server runs PHP or ASP (or even ColdFusion, though I’ll admit I know absolutely nothing about that), and upgrade if it doesn’t. Once you’re sure you’ve got a server that can handle your includes, the steps are very simple in Dreamweaver.

First, make sure your preferences are set to display SSIs on your working pages. That way you’ll be able to see the includes you create on the pages they belong to, something you’ll want if the included items are design elements. To change the setting, go to the Invisible Elements section of your Preferences.

includes2.jpg

In the Invisible Elements section, make sure the Server-Side Includes box is checked. If not, your page’s includes won’t be displayed within Dreamweaver, and the page will be hard to design.

Now create a new file for your SSI. It can be an HTML, PHP, or ASP file, an existing Dreamweaver LBI (library item), or something else. The type of file doesn’t really matter as long as your server supports it. In most cases, an HTML file will do the trick. Just be sure you remove any tags that would be duplicated by the page the include will occupy. For example, the page you want the include to live in will already have its own html, head, title, and body tags, so take those out of the include file.

includes4.jpg

Remove the gray code, and save the include. You only want the meat.

Next, you need a page to stick that SSI in. (Eventually, you’ll have lots of pages. That’s the point!). The file format of the page needs to match the SSI technology on your server. So, when you go to File > New in Dreamweaver, choose PHP, ASP, or whatever your server gurus told you to use.

The next step is as easy as inserting an image in Dreamweaver. Go to Insert > Server-Side Include, and browse to your include file. This will add a line of code to your page that calls the include. The exact nature of this code will vary depending on what technology you’re using.

includes3.jpg

A simple menu item adds the code that calls the include file.

Now, upload the page and the include file to your server, and test it out. Don’t worry if it doesn’t work the first time. A number of things can go wrong, including something as simple as an incorrect path to the include file or an HTML tag where it shouldn’t be. Other more complicated things, like browser incompatibility or the includes simply failing to appear, can also cause problems. Do some basic troubleshooting, and if you still have issues, talk to your server folks. That’s another benefit of SSIs. The “server-side” aspect means your host’s tech support can usually be of assistance, which isn’t the case with Dreamweaver templates or library items.

Switching to SSIs doesn’t make sense if you have a large site that already uses templates and library items, but this technique is definitely worth considering when building a new site.

At Sessions College. Are you an aspiring Web designer or developer? You can take your Web Design skills to a professional level in our accredited Web Design Degree or Web Design Certificate programs.

Comments
  1. Tonny Eik
  2. Erick
  3. Steve Lee
  4. Ngoc Reily
  5. Moshe Mcaferty