Dreamweaver CS3 Tutorial: Website with Server Side Includes (SSI)
Project 3
 View Demo |
Server side includes (SSI) help make your website easy to maintain. As your site grows it becomes more and more difficult to make changes that affect the entire site. Imagine adding a new link from the menu and then updating and uploading all the pages everytime you add a new page!
If you make the menu into a server side include, you can add the link to this include file alone and upload it to your hosting server. All the pages of your site will access this menu include and therefore reflect the new link!
You can make different includes for different submenus which will display in the different sections of your site - one for the services section, one for the products section etc. However you need to ensure that your hosting server supports SSI in order for it to work. If not, you could use Dreamweaver libraries for the different submenus as you can have only one in the template.
Before you Begin Project 3:
- If you are a beginner make sure you go through steps 1- 10 of the Dreamweaver CS3 Tutorial before attempting this project.
- You should have completed Project 2 as you will be using the same files, or you can simply download the final project 2 files and define a site for it in Dreamweaver.
- Download the final project3 files (DWCS3_ssi.zip, 32 KB) so you can take a look at it in case you run into any difficulties.
We will make the header, menu and footer into server side includes.
- Open the template_css.dwt file
- Click somewhere within the header. Click on
- Make a new html page (File > New> Blank Page > HTML >
Get into the code view. Select all the code and delete all the code. Get back into the design view. Save it as a file called “header.html” into a folder called “includes” in the root folder.
- Click on the logo image and make the image source path ‘relative to site’ (not relative to document). A site relative path will always begin with a “/”. Basically this means that the path to the link or image will always be taken from the site root and not relative to the current document. This is important since the includes could be used in any web page, so the path to the image/ link, relative to the document, may be different while the path from the site root will always remain constant. Repeat for any other images or links.
- Go back into the template file. Insert the header include. Insert > Server Side Include > browse to the includes folder and select “header.html”
- Repeat the process for the menu div <#menu> and footer div <#footer>
- Save the template and update all the pages.
- Change the page extensions of the web pages to .shtml from .html eg. about.shtml. If the web page is named with the extension .html, the includes will not show up in the browser. Click yes when asked if the links to these pages should be updated accordingly.
- If you have IIS installed on your computer you can put the site in your inetpub folder and preview it from http://localhost. Otherwise you will need to upload it to your remote hosting server to see if everything is working fine. Ensure that your remote server supports server side includes (SSI).
- Congratulations! Your easy to maintain site with server side includes (SSI) is now live!
In order to make you website live you will need to sign up with a hosting server. I recommend Hostgator which I use to host this site.
Check out the Spry tutorial - a new feature in Dreamweaver CS3 which allows you to add in AJAX components into your website without knowing any AJAX coding.
Dreamweaver CS3 Tutorial for Beginners
Step 1: Define a new site in Dreamweaver
Step 2: Create a Dreamweaver TemplateStep 3: Create the Page Layout in the Dreamweaver Template
Step 4: Create the CSS Style Sheet
Step 5: Insert Common Elements into the Dreamweaver Template:Text & Images
Step 6: Create Libraries or Server Side Includes
Step 7: Define the Editable Regions of the Template
Step 8: Create the HTML Pages of the Site with Content/ Forms
Step 9: Link the Pages
Step 10: Test the Site Locally and Upload Online to the Hosting ServerProject 1: Table Based Layout Website
Project 2: DIV/ CSS/ Tableless Layout Based Website
Project 3 : Website with Server Side Includes
Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.
Dreamweaver is part of Creative Suite 3 Web Standard
Streamline web design, development, and maintenance. Order Now!