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> email@example.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
<li><a href="#">Service Name</a></li>
<li class="sponsors"><a href="#">News Item</a><br />
News Item Summary</li>
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
<h2>Welcome to our Template</h2>
<img src="images/img_1.jpg" alt="" width="585" height="156" />
<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>
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!