Andrew's Mac Tips

Friday, June 10, 2005

Making Pages

This is the first log entry, even though the site has been progressing for about a week. Sorry about that. I thought a good subject for today would be: How is this site put together?

Basically, it's done through four types of template; the first is a javascript file that's separate from the HTML but accessed by all the pages. In that file I put all the navigation elements that you see to the right, as well as the "A site put together by a recent switcher..." message that you see above, and the "Thanks for visiting!" message in the footer below. These items are in the javascript file so that in the future I can change any one of them and the whole site will be modified, without having to tweak the individual pages.

As I add a new page the only change I'd normally make to the javascript file would be to add its link to the Contents section.

The second template is the separate stylesheet that's also accessed by all the pages. In there I define the look of the pages; the font and the size of the text, the width of the columns, the behavior of the navigation buttons. All of those things that we once had to do page by page using old-fashioned HTML.

The third and fourth templates are "Fill in the Blanks" boilerplates for regular new pages, and wide image new pages. The first thing I do when making a new page is to save any screenshots that I might need into the local folder for the site. Then I open TextEdit and, using a Butler Pasteboard, I paste in the template for a new page and replace all instances of "***" with the title. The template already has a link for the image of the app's icon if I'm doing a Look, as well as a button leading to an outside site, so I just fill in the blanks. The blanks are always something obvious to see, like "XXX" or "ZZZ."

At this stage I usually save the page to the local folder and then quit TextEdit and open my Smultron project and drop the new file there. The Smultron project already has the javascript and stylesheets open so I can update those at the same time.

Now I write the body of the page and switch to Safari to Look it. When I'm happy with the result I check that I've updated the navigation, then I drop it into Opera to see how it looks there; usually it's identical, but sometimes I need to substitute a break for a paragraph mark to get it truly finessed.

Later I'll check it on a friend's PC using IE6 and Mozilla, but for now it's time to upload. I do that by opening Cyberduck with a shortcut to my ftp site and dropping in the new and modified files. And lastly, a quick check of the online version. Writing this reminds me that I must download Firefox to do a QC check there as well...

Postscript:
As this is my first log entry I soon realised while writing it that I could turn log entries into a pasteboard template as well, so that's what I now have. The blanks that I fill in are the date and heading and the heading also repeats in the button for contacting me, and the email subject header...

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home