CODEWITHSUNDEEP
htmlcss
SuperString
SuperString

Reputation: 22539

template html page

Hi I am new to web programming. I want to create a template sort of css where all the pages look the same except the content of the pages.

So I have a logo and some tabs at the top where you can navigate the website, but the content of the pages would be different (contact, about, info.etc).

How do I go about creating this template?

Upvotes: 0

Views: 329

Answers (4)

Marko
Marko

Reputation: 72230

If you're a beginner, I could suggest trialing Adobe Dreamweaver and looking at using DreamWeaver (.dwt) Templates. It's really, really easy to use and it allows you to create 1 master (template) file with editable parts.

If you have Visual Studio, MasterPages do a similar job!

Good luck and welcome to the Web Development world!

Upvotes: 0

Peter Ajtai
Peter Ajtai

Reputation: 57715

I suggest starting with a paper sketch. Just draw boxes for the different areas each page will have... like Logo, Header, Content, Footer, etc. There's many ways to approach this initial stage. Here's one explanation of the gray box method.

Once you have a rough idea like this, create 1 sample page. You can fill in the content with lorum ipsum. Get the CSS to how you like it, and make sure that each section of the page (roughly each box in your rough sketch) is in it's own unique div (id = "...").

Once you have all of this set up, you'll have your CSS file ready to go.

To create your template HTML file, just take the HTML page you've been working on and delete all the lorum ipsum.

CSS Zen Garden is a great place to look for CSS inspiration.

Upvotes: 1

derekerdmann
derekerdmann

Reputation: 18262

You might want to try building your template page in plain HTML + CSS, and then using simple PHP includes to build your pages. You could, for example, break your page into two separate files:

header.php:

<!DOCTYPE html>
<html>
    <head><title>Hello World</title></head>
    <body>
        <div id="main-content">

and footer.php:

        </div>
    </body>
</html>

And then, for any files that use that template, you'd use something like this:

<?php include("header.php"); ?>

<!--All the content of your page goes here-->
<h1>Hello World!</h1>
<p>Lorem Ipsum</p>

<?php include("footer.php"); ?>

So then if someone visited the previous file (let's say it's called index.php), then the files would be assembled and the final HTML output would look something like:

<!DOCTYPE html>
<html>
    <head><title>Hello World</title></head>
    <body>
        <div id="main-content">

        <!--All the content of your page goes here-->
        <h1>Hello World!</h1>
        <p>Lorem Ipsum</p>

        </div>
    </body>
</html>

Just make sure you have PHP running on your server, or this won't work at all. Also, if you want to develop your site locally, I'd recommend using XAMPP to get a local Apache host.

Upvotes: 3

Miro A.
Miro A.

Reputation: 7963

You have a look at some of the many template sites - e.g. http://www.freecsstemplates.org/ or http://www.freecsstemplates.com/. Chances are you'll find something close to what you want to achieve.

Upvotes: 1

Related Questions