Apache Web Hosting Php - Php4, Php5 Programming Blog

BLOG DESIGN SOLUTIONS Integrating with TxP This is the bit where it is all supposed to look well organized; where I take you through each step of getting this design to work in TxP with military precision, making it look like the well-planned job of a true professional. But what really happened before I started writing? Well I fiddled, and tweaked, and then fiddled some more, broke it a bit, and retraced my steps to fix the breakage. Basically, I made it up as I went along (I really do enjoy doing things this way, especially when it s all so new). As long as you take the time to review what went wrong and learn from your mistakes, this can be the most fun way to do it. Kids tend to do things this way, and hey, how happy are kids? Let s not reinvent the wheel, though; as I have explained there is more to the default TxP design than meets the eye. All the information architecture is done for us, so all we need to do is add our design on top of it to make it our own. Built-in code editing TxP allows you to edit the CSS and Page templates using its built-in editors located under the presentation tab. Personally I prefer to use an external editor such as Dreamweaver because it gives me the option of undo, find and replace, line numbers, and code coloring. I also find it much easier to work with the code this way. During the walkthrough of this build, that is the way I ll do it: cutting and pasting between my external editor and the relevant TxP interfaces. It is up to you how you do it, of course, and it is perfectly possible to edit directly in TxP. What is more important than how you decide to edit your code is to remember to press Save at the bottom of the page after you finish editing in TxP. It s easy to forget and can lead to much head-scratching as things fail to work. Live design At this stage, all we have is Kev s cartoon. Actually, that s all we need because the rest of the design is done purely via XHTML and CSS. We are, for want of a better term, going to go through a live design process. The slicing of the image we ll come back to shortly, but first let s go and explore to see what we have in the way of XHTML to play with. Before we can plan how we will incorporate the cartoon using CSS, we need to know the ids and classes of XHTML elements and where they are in the structure of the page. In the TxP back end, navigate to Presentation . Style and you should see a sentence on the left that says you are editing CSS default. Let s jump straight in and make some tweaks, I ll discuss the end result once we are done. Change the following: #sidebar-1{ float: left; width: 150px;

TEXTPATTERN Figure 6-22. My schematic design, mocked up up in Fireworks From my very brief note (worded roughly as Kev, please make me a stretchy man ) and my very dull gray box (refer to Figure 6-22) came back a work of art (see Figure 6-23). Not only did this help me get motivated but I was nowhere near as self-critical about the end results because someone else did such an important visual part of the site. Thus I was free to get on with the job at hand: getting a blog up and running. I think it is worth hunting down some talent for collaboration if you don t have the skills to bring your ideas to life. And if you can afford to do it, why not fork over the extra cash? You are sure to reap the rewards in extra traffic and all the opportunities that brings. Figure 6-23. The finished illustration, compliments of kevadamson.com 235

BLOG DESIGN SOLUTIONS It s your blog Now that TxP is installed, you learned about the options available in the TxP management interface, and you had a quick look at the default TxP blog design, let s start to think about your own blog. Before you dive into reams of code, it is always best to do a bit of planning. So you first have to think about what you want from your blog and then consider its visual design. Only then can you start creating your masterpiece. What is the purpose of your blog? Until you define your blog s reason for existence it will be very difficult to get any kind of design going. If you don t already have a clear idea of what it is you want to blog about, it s worth spending a couple of days making some notes of your ideas about what you want to do to begin with and what you might want to do in the future. For example, do you want to add links to other sites? Will there be other sections, such as an About me section? How will you organize the archives or will you just have a search form instead? For the sake of this exercise, let s assume that you want to keep things nice and simple: publish articles and receive comments back that s it. For the sake of this exercise, let s go for a really simple one-column layout and give it our own little twist. Designing your blog Designing for yourself can be a frustrating experience for some: nothing is ever good enough, and nothing ever reflects your personality the way you would like. Some people will spend hours scouring stock photography sites, hoping to come across something that fits, but I find that process completely soul-destroying and have a tendency to go out for a walk or pace around the office, searching for an idea first and a way to implement it second. On this occasion, I was thinking about how I would describe the basics of the page layout the head, the foot, and the bit that goes in between and I thought a stretchy person might be able to help me illustrate the point. The next step was to take this rough idea and give it legs and hands (and a head, for that matter). I fired up my favorite graphics package, Macromedia Fireworks, and drew a schematic diagram to show where I wanted the bits of my design to go, as shown in Figure 6-22. What I lacked were the practical drawing skills to make my idea a reality. Fortunately, I happen to be in touch with a very talented cartoonist by the name of Kev Adamson (www.kevadamson.com) and was able to recruit him to help give me what I wanted.

TEXTPATTERN Default design During setup, you visited the front end of TxP and saw what is a deceptively simple design. In reality, there is a lot more going on than you might expect to give you everything you need to get a useful blog up and running. First, though, let s take a quick look at a fundamental part of TxP: the txp tag. Open up a new browser window or simply click the view site tab, and enter the web address of your site so that you have a copy in front of you to show your changes. Back in the TxP back end, the first stop is the admin area and you will find yourself in the preferences area by default. Let s just walk through a simple example of how TxP slots together. The site name and the site slogan In the preferences area of the admin area, under the heading Publish, you see a text field labeled Site name, as shown in Figure 6-20. You can change it to whatever you like and it will show up on your front page. Go ahead and change it to anything you like, scroll down the page, press Save, and then refresh the site front end it will have been updated. Figure 6-20. Setting the site name and slogan To see how this works, click the presentation tab and look through the default template code. You will see a tag, as shown in Figure 6-21. This is the TxP tag that pulls the information out of the admin area and onto your site. Figure 6-21. Displaying the site name in a template The exact same situation applies to the site slogan in the preferences area of admin. You see a text field labeled Site tagline and the words My pithy slogan; in the default template code, we find a TxP tag that outputs My pithy slogan to the site. This example is perhaps one of the simplest examples of a TxP tag in action, but it does illustrate the principle of tags nicely. A TxP tag is essentially a set of instructions that TxP reads and takes action on. So by adding , you tell TxP to look at what name the site has been given in the preferences area and present it on the site. 233