Enable ServerSide Includes in Dreamweaver: Best Practices and ExamplesServer Side Includes (SSI) are a lightweight way to include reusable content or execute simple server-side commands inside HTML pages. When used correctly they reduce duplication, simplify maintenance, and let non-developers update shared page elements (headers, footers, navigation) without touching templates. This article explains how to enable and use SSI with Dreamweaver, covers server configuration (Apache and IIS), offers best practices, and provides practical examples and troubleshooting tips.
What are Server Side Includes?
Server Side Includes (SSI) are directives embedded in HTML that the web server parses and replaces with dynamic content before delivering the page to the browser. Common uses:
- Inserting common page fragments (headers, footers, nav)
- Displaying file modification times
- Including external files or scripts
- Executing simple server-side commands (where allowed)
A typical SSI include looks like:
<!--#include virtual="/includes/header.html" --> <!--#include file="header.html" --> - virtual paths are resolved relative to the web root and processed through server-side URL mapping.
- file paths are resolved relative to the current file on the server filesystem.
Why use SSI with Dreamweaver?
Dreamweaver is a visual authoring environment that helps build and manage site assets. Combining Dreamweaver’s site management with SSI yields:
- Faster updates: update a single include file to change headers site-wide.
- Simpler handoff: content editors can edit plain HTML fragments.
- Lower complexity: SSI is simpler than full templating systems or server-side languages for small scale sites.
Server requirements and file extensions
Most servers only parse SSI in files with specific extensions, commonly .shtml. By default:
- Apache: often configured to parse .shtml for SSI.
- IIS: supports SSI if feature is enabled and file extensions are associated.
If you prefer .html, the server must be configured to parse .html for SSI (may impact performance).
Recommendation: Use .shtml for files that contain SSI to avoid wide parsing overhead and to be explicit.
Configuring Apache to support SSI
- Enable the include module (on many systems it’s loaded by default):
- Module name: mod_include
- Allow SSI in the directory and set the handler in .htaccess or server config:
Options +Includes AddType text/html .shtml AddOutputFilter INCLUDES .shtml - Restart Apache if you changed the main config.
Notes:
- If AddOutputFilter is not available, some distros use:
AddHandler server-parsed .shtml - Ensure AllowOverride permits Options and FileInfo if using .htaccess.
Configuring IIS to support SSI
- Install the Server Side Includes feature (Windows Server / IIS):
- Use Server Manager > Add Roles and Features > Web Server (IIS) > Web Server > Application Development > Server Side Includes.
- Add the .shtml mapping in Handler Mappings if not present.
- Ensure the SSI module is enabled for the site or application.
Setting up Dreamweaver for SSI
- Define your site in Dreamweaver (Site > Manage Sites > New Site). Point it to the local folder that mirrors your web root.
- Use the same folder structure and file extensions you’ll deploy (e.g., .shtml for pages with includes).
- When creating includes:
- Create an includes folder (e.g., /includes/) and add header.html, footer.html, nav.html fragments.
- Keep these fragments as valid HTML snippets — avoid <!DOCTYPE> or full HTML structure in includes.
- Insert includes into pages manually or with Dreamweaver’s code view:
<!--#include virtual="/includes/header.html" --> - Use Dreamweaver’s Live View sparingly: it may not process SSI locally unless you have a local server configured. To preview SSI, set up a local Apache/IIS server and point Dreamweaver’s testing server to it (Site > Servers).
Best practices
- Use .shtml for pages containing SSI: keeps server parsing explicit and efficient.
- Put includes in a central folder (e.g., /includes/) and use virtual includes to avoid relative path issues.
- Keep include files as fragments (only the elements they need) and avoid duplicate // elements.
- Use comments and descriptive names: header.shtml, footer.shtml, nav-main.shtml.
- Limit SSI logic: SSI is not a full programming environment — keep it for static fragments and simple server-driven values (date, last-modified).
- Escape user-provided content elsewhere — SSI does not sanitize inputs.
- Use version control for include files to track site-wide changes.
- Test includes on the actual server environment (local server or staging) since Dreamweaver Live View may not evaluate SSI.
Examples
-
Basic include (virtual):
<!--#include virtual="/includes/header.html" --> -
Basic include (file, relative):
<!--#include file="includes/footer.html" --> -
Display last modified date:
<p>Last updated: <!--#flastmod virtual="/index.shtml" --></p> -
Echo an environment variable:
<!--#echo var="REMOTE_USER" -->(Remote user is populated only if authentication is used and the server provides that variable.)
-
Conditional includes (if/else): Some SSI implementations support conditional directives:
<!--#if expr="$HTTP_USER_AGENT = /Mobile/" --> <!--#include virtual="/mobile/header.html" --> <!--#else --> <!--#include virtual="/includes/header.html" --> <!--#endif -->Support for expressions varies by server config.
Dreamweaver-specific tips
- Use Dreamweaver snippets to quickly insert SSI syntax if you use it frequently.
- For server-side previewing: set up a testing server under Site > Servers with the correct URL prefix (http://localhost/…) so Live View fetches parsed pages.
- If you use Templates in Dreamweaver, consider combining templates and includes: put the core layout in a template and dynamic/common fragments in SSI includes inserted into template regions.
Troubleshooting common issues
- SSI directives showing in the browser as plain text:
- Ensure file extension is parsed by server (.shtml or configured .html).
- Confirm mod_include (Apache) or SSI feature (IIS) is enabled.
- Check .htaccess or server config for Options +Includes and correct handler.
- Relative path include fails:
- Use virtual includes (absolute from web root) to avoid path confusion.
- Dreamweaver Live View not showing includes:
- Configure a testing server and use the site’s testing URL; local file preview won’t execute SSI.
- Permission errors:
- Server must have read access to included files.
- Improper HTML structure:
- Ensure includes don’t contain duplicate or .
- Performance concerns when parsing many files:
- Restrict parsing to .shtml and avoid enabling SSI site-wide for .html files.
When to choose alternatives
SSI is great for small to medium static sites needing small dynamic bits. Consider alternatives when:
- You need complex logic, database access, or APIs — use PHP, Node.js, or server frameworks.
- You need template engines with richer features (partials, inheritance).
- You need better security controls and input handling — heavier frameworks provide more tools.
Quick workflow example
- Create site in Dreamweaver, include folder /includes/.
- Create header.html (fragment) with navigation markup.
- Create index.shtml and insert:
<!--#include virtual="/includes/header.html" --> <main>Page content</main> <!--#include virtual="/includes/footer.html" --> - Configure local Apache with .shtml parsing and set Dreamweaver testing server to http://localhost/site/.
- Preview in Live View or browser using http://localhost/site/index.shtml and verify includes render.
Summary
Server Side Includes remain a pragmatic, low-overhead method to manage shared HTML fragments and simple server-driven values. With Dreamweaver, combine SSI fragments and careful server/testing setup to streamline site maintenance. Use .shtml by default, keep include fragments minimal and well-organized, and preview on a server that actually parses SSI.
Leave a Reply