This article is for people who want to design their own website templates, and assumes you have some experience, and skill in web design, and web development. If all of the above are true, you are probably familiar with Hyper Text Markup Language (HTML), and Cascading Style Sheets (CSS). If you are not familiar with either of these terms, you should enroll in a beginners’ class, or do some research on your own before you try to build a template with this example. Some good places to learn more about web design, and web development are a local college, local library, or online on a website like W3schools.com. As you progress, you may want to join an online web development community like WebPlatform.org, or check out a local computer club. If you feel comfortable enough with HTML, and CSS to continue, then please do.
Since most web pages on a web site have a header at the top of the page, at least one section, or element for content in the middle of the page, and a footer at the bottom of the page, you will likely want to organize your template in a similar way. For most people with some basic skill in HTML, and CSS, both the header, and content sections will be relatively easy to position, but the footer may be a little more difficult.
The example below uses a combination of HTML, and CSS to define, position, and style the page elements described in the preceding paragraph. It requires two pages: One for the HTML wireframe, and one style sheet for the CSS. To start, directly below this paragraph is an example of an HTML outline. You can title this page whatever you want, as long as it has the .html, or .htm suffix, or extension in the file name. The file extension .html is recommended, since it is generally the standard suffix for a page written in Hyper Text Markup Language.
You can call your style sheet cssfile.css, to match the the “href” attribute value in the head of the HTML document. Of course, you may change the name of the style sheet to your liking, as long as it has the .css suffix, and matches the “href” attribute value in the HTML page it will apply to. Here is the CSS style sheet for the given example:
The div class names, width, and height attribute values can be defined by you, and should be appropriate for the web, and content. If you have any questions, please feel free to ask them in the comments section. There is also a forum where you can discuss this topic, and others at entrepreneurs-advantage.com.
*These examples rely on a combination of information from cssstickyfooter.com, ryanfait.com/stickyfooter/, http://ryanfait.com/resources/footer-stick-to-bottom-of-page/, http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/, and http://css-tricks.com/snippets/css/sticky-footer/ for the wireframes, and accompanying style sheet. Many thanks to the authors of these websites.