Recoding iWeb Sites Part 1: How to Combine iWeb Sites with Other Web Design Tools for Even Better Sites
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Apple designed iWeb as an easy-to-use tool for people to create very polished Web sites without having to know a thing about HTML, stylesheets, or JavaScript. In fact, Apple even removed options for actually working with any of the code or tags that eventually end up in sites and pages created using iWeb. Unlike many other Web-design tools (consumer or professional), iWeb doesn’t offer you any option viewing or changing anything except through the use of the various GUI tools Apple built into it. In fact, the actual file structure (Web pages, images, and similar files and directories) isn’t actually created and saved until you publish the site—something very different from any other Web design tool.
This is actually not a bad thing. It reduces the confusion that many non-Web designers might feel when they think about what goes into creating a Web site (even if you use the best GUI tools in the world). And iWeb integrates a number of basic photo-editing features into iWeb that typically require multiple separate applications, again increasing ease of use for new consumers and seasoned pros alike.
The problem is that there are times when you simply need to be able to add or edit HTML directly. This is true whether you’re trying to use iWeb to design more professional Web sites and want to break away from the Apple templates. I might not use iWeb as a professional Web design tool; it can suffice as a quick and easy way to design concept pages for clients and it could be used for basic business Web sites. You can even use iWeb as a jumping off point—getting an initial site design done and then moving to another application for finishing (and for any additional pages or updates).
Even for consumers, there are times when you need to add HTML code. Blogrolls, links to add RSS feeds to a visitor’s My Yahoo page, free comment services for blogs such as HaloScan, Google’s AdSense, and plenty of other Web services work by allowing you to create an account with the service’s provider and then being able to put a segment of code (often a piece of JavaScript) into your Web pages that will load other content based on that account. IWeb doesn’t offer any built-in functionality to allow you to do add even a tiny line of HTML to your site.
The wonderful answer to this problem is that when you publish a Web site created with iWeb, all it does is generate the files that would be created by any other application (or written in a text editor if you like do old school Web design). Although iWeb does do a lot of heavy work with stylesheets to create its polished look (along with a penchant for storing images as PNG files rather than JPEGs), it actually generates relatively clean and legible HTML files. You can easily open these up and edit them with any other Web design tool you like (including TextEdit or some other text-editing application). The catch is that if you make changes in iWeb and republish the site, you’ll need to edit your pages in that external editor again.
iWeb Enhancer
If you want to simply drop the occasional bit of HTML code into an iWeb page, there’s a shareware utility called iWeb Enhancer that makes the process relatively easy. To use it, you create a rounded rectangle shape the size of the item that you will be adding (the actual resulting object, not the size of the needed bit of HTML). Double-click the shape to use it as a text box and add a special HTML tag with the actual code that you want to add between them. Then publish the site, run iWeb Enhancer, and perform a manual sync to your .Mac account (if you are publishing to .Mac) or upload the site to an alternate Web server.
Interestingly, the iWeb enhancer tag that you add as a line of text in that box is actually an HTML comment tag—the kind that Web browsers ignore when displaying a page, and that Web designers can use to describe part of a page or that back-end Web applications can use to insert alternate code at the comment’s location. The combination of the shape and the comment allow iWeb Enhancer to locate and convert the resulting text entered into iWeb back into HTML code on the page. However, every time you update and republish a page, you have to run iWeb Enhancer again.