Buidling a Static Website with Dynamic Elements

Static sites with dynamic elements are perfect for website projects where a site's pages will largely remain the same, even if pages will be added on a regular basis. While understanding the code and structure behind static sites is beneficial, if your website is going to be a blog or an e-commerce site our section on content management systems will be more applicable to your goals.

Note: The material below will be easily understandable once you understand basic HTML and CSS code. If you do not already have a book covering HTML and CSS you should purchase one now. Learning to make a basic website should only take you a few days.

As explained on our how to make a website page, static sites are those in which the page code that you upload to the server is exactly the code that is rendered by the visitor's browser. In other words, everything on the page is contained in that page's file and nothing is pulled from other files and dynamically inserted onto the page. Static web pages and websites are easiest to make in the sense that what you see is what you get. However, for larger sites it's nice to be able to have some dynamic elements. In this section we'll explain how to make a static site template that you can use over and over again, and how to add dynamic components to the site to control whatever aspects of a website will stay the same on every page.

Why Make a Static Website Template

Creating your own static website template will make it easy for you to produce new custom pages and sites. Your template will include the structure of all the basic elements you want on your site. On this site you can see there is a header, left sidebar navigation, center content area, and a footer where you see the copyright text. Throughout this site, the only thing that changes is the center content. This allows the webmaster to simply rename a page, add different center content, and the new page file is done. It's unnecessary to re-design every page over and over again.

Once you have your website template made, you can copy it over and over again changing only the visual design elements. This will allow you to quickly produce a new site without having to do a complete structural re-design. You can change the visual design of your site entirely by editing only one file, the CSS file.

Most people these days use a content management system even for small, unchanging sites. However, popular content management systems like Wordpress and Drupal will need to be upgraded on a regular basis, as will the associated plugins. They also require a database to run, and are much more complex than a static site template with dynamic elements. Using a simple website template will likely save you time in the long run, require less maintenance, and be less vulnerable to hacking.

Dynamic Components

If your site contains tens, hundreds, or thousands of pages, you're going to want to have some dynamic components. On this site, the header, sidebar navigation, and footer are inserted dynamically through "PHP includes". Each page has one line of code that references another file that contains the header code, one line of code that references another file that contains the sidebar navigation code, etc. So for this website there is one file called sidebar.php which contains the sidebar code that gets displayed on every page. Therefore, if we want to change a link in the sidebar on every page we only have to change it in the sidebar.php file. Changing the code in that one place makes it dynamically change on every page of the site. Without these PHP includes we'd have to manually change every page if we wanted to change a standard element. PHP includes are huge time savers and will make your life much easier.

Using PHP Includes

"PHP includes" may not be covered in basic HTML and CSS books (which you should have), so we'll show you how to use them here. Below is an example of all you'll really need:

<?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'); ?>

When the above code is placed in a web page file, it tells the server to insert the code that is located in the header.php file (which is in the /includes/ folder) in the place of the line above. So instead of the line of code above being displayed on the page, the server replaces that line of code with the code that's in our header.php file. Every page on our site contains the PHP includes code referencing the header.php file, but there is only one header.php file. So if we want to change the header for every page on our site we only have to change the code in the header.php file. The same is true for our sidebar and footer.

How to Make Your Site Template

Once you know how to make a website, you're ready to make your own website template (or use our free website template, recommended). Your template should include all the structural elements you want on your site, with the "boiler plate" sections in PHP includes. For ease of use, you might consider color coding each section such as the header, top navigation, sidebar, center content area, and footer. All you'll need to make is one index.php file, a style sheet, and the appropriate files in your includes folder. When you're ready to make a new site you simply copy your website template folder, modify the CSS to create a new design, and you're done. Just rename the index.php file to create new pages.

Of course you don't need to have your own website template. You can use free or paid web design programs such as Dreamweaver. But these programs often insert unnecessary code, and if you can do it yourself you'll probably find it's faster and easier to do it exactly how you want the first time around.