template html page_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-07 09:41 出处：网络

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.

相关专题：css

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?

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.

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.

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.

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!