Grow your CSS skills. Land your dream job.

How to create an HTML template of sorts.

  • NIX
    # April 30, 2013 at 12:35 pm

    Hi all,
    I need some help and I would imagine this will be quite simple for some of you.

    I’m creating a site to demo an app I’m working on. The app itself is really quite simple but simulating the app has become the difficult part. Basically, I need my site to show the basic functionality of the app, minus any databasing/logins, geolocation, map api etc.

    Right now, I’ve opted to accomplish this via HTML and CSS. Here is the link:

    [test.elitewildlife.com](http://test.elitewildlife.com “Test site”)

    Now, if you click on one of the categories on the phone screen, you’ll see that only the dots in that category remain. Great.

    The problem is, I’m accomplishing this by creating a NEW HTML page for each possible outcome… daunting.

    Right now, I only have a 6 page site… so it’s not a big deal. When it’s 100 pages, that is going to suck! I simply cannot update every single HTML file anytime I want to change anything. It’s just not scalable.

    So, how can I create a generic HTML file and import it each time I want to use it? I presume PHP can accomplish this but how then can I edit say one line in each file? PHP allows me to ADD things to the imported file… it doesn’t really allow me to edit or take away.

    Can someone please help?

    The ONLY option I can think of is to turn the phone into a frame so that everytime someone interacts with it, only that changes. Any ideas?

    NIX
    # April 30, 2013 at 12:40 pm

    *AHA MOMENT!* I could create PHP file for things that will never change… like the header, footer, sidebar, etc. Then, just fill in the rest for each page.

    My apologies. I know this is how wordpress works but I haven’t used it in a year.

    I will try this and post the results.

    NIX
    # May 6, 2013 at 3:16 pm

    Yeah.. this worked beautifully.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".