Converting a free template into a working website

General web design discussion, including HTML, CSS, and JavaScript

Converting a free template into a working website

Postby justin » Fri Aug 26, 2011 12:25 pm

We've been getting a lot of requests lately for information on how to get started building MagicEdit sites from a template, so we thought we'd post a tutorial of sorts on the forum. Keep in mind that this particular thread is sort of a 'best practices' set of guidelines we follow ourselves BEFORE we start using any MagicEdit. That is, this applies to any web designer who wants to download a template and create a working website out of it. We'll get to adding MagicEdit in a separate thread.

Part I: Find the Template
The first step in the process is, obviously, to find a template. Easy, right? Not so fast. Ask yourself a couple of questions before you spend any time setting up a web template. First question: is this template HTML/CSS, or is it Flash? If it's Flash, toss it out. If you will need to do any customization, you'll have to break into the files and really know what you're doing. If you want iPhone/iPad users to view the site, well that's too bad. Plus, MagicEdit doesn't work on Flash and Google doesn't really like it too much either. So, short story long, no Flash.

Second question: where'd this template come from? It's always important to consider where you get your templates from, as not all sites are created equal. In our experience, if you come across a template and its HTML is a big ugly mess, then most of the other templates on that site are probably going to be just like it (and it doesn't seem to matter how much those templates cost). We've found http://freecsstemplates.org and http://free-css.com to have pretty clean HTML, but those are just two examples. Freecsstemplates.org lets you preview the template and view source before downloading, but you generally only get one page (index.html) when you download it. Free-css.com usually gives you an about.html and a contact.html in addition to the index page, but you have to download the template and open the index file to view the source.

So, now that you've found a clean, shiny HTML/CSS template, downloaded it, and put it up on your web server, what's next? Breaking the HTML up into include files, that's what's next. Stay tuned...
justin
 
Posts: 10
Joined: Tue Apr 12, 2011 2:53 pm

Re: Converting a free template into a working website

Postby justin » Tue Aug 30, 2011 2:41 pm

Part II: Break up the HTML
Remember the 90s, when grunge was fresh, "Saved by the Bell" had new episodes, and every website had different color palettes and layouts for every page? Well, it's not the 90s anymore. Nowadays we watch Zack and Screech on reruns and design websites to have a consistent style. Templates, of course, are built with a consistent style as well, and since that style is uniform across the site, there is really no need to completely build each page from scratch, not when you have include files at your disposal.

An include file is a quick way to put the same HTML on every page that needs it, without having to type it over and over again in each and every .html file. For example, if the template you are working with has the same header, navigation menu, and footer on every page, but the main body of the site changes from page to page, you could create include files for each element that is going to be reused and insert include tags on each page, like so:

Code: Select all
<!--#include file="i_head.html"-->
<!--#include file="i_nav.html"-->
<div>This is where your body content goes</div>
<!--#include file="i_tail.html"-->


As for the include files themselves, it's always best practice to break them up into logical chunks. Your i_head.html file would look something like this:
Code: Select all
<!DOCTYPE HTML ...>
  <html>
    <head>
      ...
    </head>
    <body>
      <div class="main">
        <div class="header">
          ...
        </div>


Your navigation menu goes in a file called i_nav.html:
Code: Select all
<div class="menu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>


Lastly, i_tail.html would contain the footer, or anything that lives at the bottom of every page on your site, such as copyright information. It also needs to close any open tags from i_head.html (or anywhere else on the page):
Code: Select all
<div class="footer">
  <p>&copy; Copyright <a href="#">My Website</a>.</p>
</div>
</div><!--closes "main" div-->
</body>
</html>


That's really all there is to it. There are plenty of other files you could include, of course, and they don't have to live on every single page of the site. If you had an HTML/JavaScript gallery, for instance, you could include that file only on pages that require a gallery. Suppose you had different sidebars for different sections of the site; you could build each sidebar in a different include file and call the one you need for a particular page. Taking a template and splitting it immediately into include files, before you even create any missing files you will need later, is a great way to save time during the development of your site. Up next: Include files in action (how to turn a template into include files).
Last edited by justin on Tue Oct 18, 2011 1:53 pm, edited 1 time in total.
justin
 
Posts: 10
Joined: Tue Apr 12, 2011 2:53 pm

Re: Converting a free template into a working website

Postby justin » Mon Sep 12, 2011 3:20 pm

Part II.b: Break up the HTML (a real-life example)
Let's try breaking up a real web template into include files. For this example we'll use FreeCSS.com's GreenZap template (http://www.free-css.com/free-css-templates/page1/greenzap.php). This template is a great use case for include files; when you download and open the file, you'll see dozens of lines at the beginning of each of the three main pages that are exactly the same. If you use the template as is, without breaking it into include files, you would have to make any changes to the header (site title, slogan, image, whatever) three times. And if you add more pages (and make future changes), that's more changes you will have to keep track of down the road. Point taken? Let's move forward.

Assuming you have downloaded the GreenZap template and have opened it up in your HTML editor of choice, take a look at the index.html file. The first include file we will create is i_head.html. Go ahead and create a new file with the name i_head.html and cut and paste in the first 41 lines of HTML from the index.html file. This will include everything from "<!DOCTYPE html PUBLIC" to the </div> tag BEFORE <div class="body">. After pasting the code into i_head, go back to index.html and make sure the lines you just pasted are deleted. Replace all those lines with this single line of HTML:
Code: Select all
<!--#include file="i_head.html"-->

Now, do the same to the about.html and contact.html files, making sure to delete only the lines preceding <div class="body"> and replace them with <!--#include file="i_head.html"-->. Make sure you save your files!

Next we will create i_tail. Since the bottom of each page is the same (all the way from the photo gallery down), go back to index.html and cut and paste the lines from <div class="FBG"> to the end of the file and paste them all into a file called i_tail.html. Put the include into index.html (<!--#include file="i_tail.html"-->) and replace the code in about.html and contact.html as well.

We'll create one more include file for this exercise and call it i_sidebar.html. In index.html, find <div class="right"> and copy that line all the way through the line that says <div class="clr"></div> and paste it into the i_sidebar file. Replace those lines in index.html with <!--#include file="i_sidebar.html"-->, and replace them in contact.html and about.html as well.

Now, time to take a peek at your work. If you followed these steps correctly, you can push up your files to your web server and load the index page. It should look the same as the GreenZap screenshot on FreeCSS.com. Tip: if you use Dreamweaver, you can preview the page in Design View too, without having to push the files to your server. Of course, Dreamweaver's rendering won't match the HTML exactly (it never does), but you should still be able to see that the HTML from your include files is, well, included. If the include files aren't showing up in Dreamweaver, go to the Preferences menu and click the Invisible Elements submenu. Make sure that the box for "Server-Side Includes: Show included file" is checked.

Congratulations! You are now reusing 111 lines of code!
justin
 
Posts: 10
Joined: Tue Apr 12, 2011 2:53 pm

Re: Converting a free template into a working website

Postby justin » Mon Sep 26, 2011 12:48 pm

Part III: Additional Pages
Continuing on with our GreenZap template, it's time to fix the other three pages to use the include files from Part II. By using the include files, we can reduce the HTML to just 37 lines. Let's start with the contact.html file. The top 5 lines should look like this:
Code: Select all
<!--#include file="i_head.html"-->
  <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>Contact information<br />

and the bottom 6 lines (starting from the closing </form> tag:
Code: Select all
        </form>
      </div>
      <!--#include file="i_sidebar.html"-->
    </div>
  </div>
  <!--#include file="i_tail.html"-->

Now you can finish up with the includes by adding them to the services.html and about.html pages. The simplest way is to open the include file that you're ready to add, delete the duplicate lines from the services or about file, and replace them with the include tag. Make sure you have i_head, i_sidebar, and i_tail included in all your files, and that you delete the duplicate lines to avoid mismatched tags. Now, when you're ready to add new pages, all you have to do is copy an existing page to use as a template (or create a new one from scratch, remembering to use the include files) and update the navigation menu in i_head.html. Easy!
justin
 
Posts: 10
Joined: Tue Apr 12, 2011 2:53 pm

Re: Converting a free template into a working website

Postby justin » Tue Oct 18, 2011 5:52 pm

Part IV: Clean House
Tutorials aim to be many things for many people. They tend to have way more visual features than you (or anyone else) will actually want or need in real-life applications. Our GreenZap template, for example, has a search box in the upper-right corner. Are you really going to use that? I'm not, so I'm going to remove it. Also, since I don't plan on using this as a blog, I will remove all the "meta" data (which isn't true meta data, only static text that has date, "Posted by", and "Filed under" information) as well as the second sample blog post. Also, I'm not going to display my email address for the world to see (and the spammers to grab), so I'll remove that line too. The Sidebar Menu will need some changing, obviously, but I'm not going to remove it. "Sponsors" will become something else too, but I'll leave it as placeholder text for now.

Fortunately for us, we've been using include files. (Yes, I realize I keep mentioning how awesome include files are, but if you are new to them and are beginning to find out for yourself just how great they are, then you understand why.) Since most of the stuff we'll be deleting is in one include file or another, removal will only take a couple of minutes.

The first thing that needs to go is the search box. If you like it and/or are going to use it, by all means keep it. I don't want it, so I'll delete that div from i_head (the one that says <div class="search">). Done. Now I'll go into i_tail and delete the email line. (To be clear, you should never, EVER, post your email address on a public web page. Unless you REALLY like spam. If you want people to contact you, use a contact form. More on that later.) Delete the entire line that says "<strong>E-mail:</strong> me@jungleland.com<br />. And, while you're looking at i_tail.html, go ahead and change the <a href="#"> on the next line to say <a href="contact.html">.

Now let's go into the sidebar. Open up i_sidebar.html and change the headings. I want Sidebar Menu to be a list of services, so let's change the <h2> to say <h2>Services</h2>. Similarly, let's change <h2>Sponsors</h2> to <h2>News</h2>. Since we'll be adding MagicEdit tags to our template later, let's create some placeholder text in the sidebar lists and remove all of the unnecessary list items, so that your i_sidebar.html file looks like this:
Code: Select all
<div class="right">
  <h2>Services</h2>
  <ul>
    <li><a href="#">Service Name</a></li>
  </ul>
  <h2>News</h2>
  <ul class="sponsors">
    <li class="sponsors"><a href="#">News Item</a><br />
      News Item Summary</li>
  </ul>
</div>
<div class="clr"></div>

Finally we'll make our changes to the index page. Open up index.html and remove the second "blog post" as well as the placeholder meta information and comment row from the first post. Your index file should now contain only this:
Code: Select all
<!--#include file="i_head.html"-->
<div class="body">
  <div class="body_resize">
    <div class="left">
      <h2>Welcome to our Template</h2>
      <img src="images/img_1.jpg" alt="" width="585" height="156" />
      <div class="clr"></div>
      <p>This is a free CSS website template that we are converting into a MagicEdit site. Stay tun\
ed for more tutorials and prepare to be amazed at how easy MagicEdit is to implement!</p>
    </div>
    <!--#include file="i_sidebar.html"-->
  </div>
</div>
<!--#include file="i_tail.html"-->

Next we'll start adding the MagicEdit tags and transform our static template into a fully-functioned, dynamic site that can be maintained by even the most inexperienced content manager!
justin
 
Posts: 10
Joined: Tue Apr 12, 2011 2:53 pm


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron