< step 5 step 7 >

How I Design My Own Website Template

Web templates for Websdiy

Each time I build a website, I'd design a new template. But not this time.

I have promised myself before I embarked on this project: Never to waste time again on designing a website.

In the past, when I was building mini-sites using WordPress, I would spent days designing my very own template. It's easy to lose focus and forget what's the objective of building a website.

And no matter how hard I tried, my designs won't look better than those templates that were available for download. I've come to realize that if I ever want a stunning design, I would rather download a free copy, pay for a premium template, or engage a designer.

My job as a site owner is to build keywords-focus-content pages, not designing a website. The focus is on building a website that works. I shall touch on designing templates with reference to the HTML elements not the designing aspects. That I shall refer to those designing sites that do a better job of teaching you the hows and whys in designing.

Why waste time on designing a web template?

This time round, I took one of my earlier designs, changed the color of the header and footer, and I'm ready to go.

I just need to create a new layout for each subtopic. That is to showcase what you could do when you are designing your own template for your website. All my templates will be made available for free download at a later stage.

Designing template is a waste of time. I would rather spend time on planning the navigation. This is the only part of a designing that requires special attention. Each click must lead the readers to a specific page they are looking for. This is one area of designing I'll have to track and tweak on the effectiveness of Tier 2 links.

Customizing my own template according to the progress

While certain phrase of the website is completed, I would reorganize the Tier 2 links for easier navigation.

As I had always wanted to have a clean and neat layout. A bloated page filled with 10-20 Tier 2 links is not what I would like to do. I'd have to come out with some creative linking. Not what a web developer would recommend, but this is how I want to build my website.

The current horizontal navigation is temporary. Once the pages for 5 models of web building are ready, they will replace the current Tier 2 pages. That's how I want my site structure to be.

I no longer want to design a visually stunning website. I just want to design a web template for ease of use, ease of navigation.

With the templates done in no time, I could now quickly move on to building web pages.

From web templates to web pages

From step 1 till step 5, what we were doing was just planning and preparation. Now, from step 6 onwards, we will be building web pages that together make up a web site.

We will be dealing with HTML codes. It is not a programming language, just a markup language; that's why it's called HyperText Markup Language.

I'll be showing you codes to design a template and build a web page. Learning the basic HTML will help you to customize a template and to build your own pages. If you want to learn how to hand code a HTML page, you may want to jump to my HTML hand coding guide before you continue with the next step.

Designing Template, Planning Layout, and Including Sidebar Navigation

Designing page templates for different subtopics

With the master theme template design selected for this site, next is to decide on the page layout for various subtopics.

In most cases, only one template is needed for a website, with the exception of the home page. It could still be the same template but with a slightly different layout.

On this site, I shall instead be using a different layout for each subtopic.

You are here...

Also, with each subtopic, I'll using a different file for each Tier 2 header and another file for each Tier 3 page at the side bar.

For step 1 till step 9, you'll notice that the highlight bar in white stays at "How I build" while the highlight changes with each step on the sidebar at the right.

That gives you an idea where you are at now. I could even add another step by highlighting the exact file you are at by hightlighting the specific file: As in this case, it should be "Create Web Pages."

Or I could box up all the pages under step 7 and highlight the specific page file.

This is made possible by using the PHP includes which I'll be covering at a later stage.

PHP includes

The files on this web use the extention PHP. If I were to name it html, then I"ll have to add a line to the htaccess file, or else the PHP command will not be executed.

PHP includes is only a line and it does not requires any knowledge of PHP programming. And this is very powerful. I only need to make changes to a file. Let me give you and example:

This page on creating web pages uses a file named "T37-right.php." If I have 20 pages under this subtopic, I only need to need to make changes to T37-right.php and the rest of the 20 pages will reflect the changes immediately.

Without this PHP includes, I'll have to update all the 20 pages.

As the sidebar gets too crowded, I may delete all links to other steps and show only pages under step 7.

With PHP includes, this repetitive task is made simple by just making changes to only 1 file.

Next...


eskay ng

by eskay ng