If you look at all the tools necessary to put together a website, the number can be a bit staggering. First you’ll need a text editor, to help with the actual coding of the site. Sure, you can use a graphic, WYSIWYG (what you see is what you get) editor, like Dreamweaver or any number of similar programs, but the html code those produce is often a bit bloated, although not as bloated as using Microsoft Word’s built in “save as html” feature.
Along with coding the web page, you’ll potentially need a CSS editor. CSS is a fairly recent development in web page design, enabling designers to completely separate the content of the page from the design and layout of the page. CSS enables someone to produce lean html code that simply includes the content, without attempting to throw together layout via tables. With CSS, the layout is kept in a separate file, and can be changed rapidly (and across the entire website), without having to alter each and every page. Because CSS has so many options, and many of them can be a bit of a chore to implement, a good CSS editor is becoming more and more vital to web development.
As you’re coding the web page, of course, you’ll want to preview how the site actually looks in a web browser. And once the page is complete, of course, you’ll need a way to upload your pages to the web server. This is often accomplished via FTP, and a good quality, easy to use program can be invaluable.
That’s four programs right there, and while there are certainly other programs you may want to take advantage of (such as a graphics editing program to crop photos and to scale them to size), the four programs mentioned above make up a large part of a web developer’s toolkit.
Coda, from Panic software, is a shareware web development program that takes care of all of the above programs (except the graphics editor). It is a high quality text editor with a separate CSS editor, includes a built-in FTP program, and allows the developer to preview the web page being worked on simply by clicking on another tab.
First, the text editor. Contrary to what Microsoft would have you believe, a word processor is not the same thing as a text editor. A text editor, at its most basic, is designed to edit text, as the name implies. A word processor is more oriented toward adding style and pizzazz to a document. The text editor built into Coda is what you would expect from a good editor.
It includes both tag suggestion and tag completion, so when you start typing a tag, it quickly provides a pop-up list showing all tags that start with what you’ve typed so far. And once you fill in your initial tag, Coda automatically provides the close tag, so speed up your coding.
Coda also produced syntax highlighting, so you can know at a glance if a style element is formatted properly. This color scheme adjusts based on what you are coding, so the highlighting is different if producing a web page (html), compared to when you are coding in Python or simply writing a plain text document.
Coda also uses what are called Clips. Known as snippets or similar in other text editors, Clips in Coda are simply a bunch of commonly used code that you may want to paste into your document, for both ease and accuracy. Included in the default Clips (you can, of course, add your own), are such items as the initial DOC type for a web page, basic structure for a web page using frames, and common meta data tags often used in a web page. The Clips change depending on what type of project you are using, so if you start in on a Java project, the Clips will be applicable to that, and not a Perl script.
The CSS editor will come in extremely handy for people who use a lot of style elements and don’t want to have to remember exactly how to write each one. Included in Coda’s CSS editor are Text elements, such as size and font, and Color & Background elements, for adding color or pictures to the background of a table, cell or web page. Also available are CSS templates for Dimensions, Margins & Padding and Borders, for complete control over the size and layout look of your page. Finally, you can also produce quick and easy Lists and Tables with Coda’s CSS editor, along with general Layout and Printing rules.
Using the CSS editor in Coda is a breeze. If the element you wish to change is common, simply go to the correct style and (if the element already exists), use Coda’s built-in options or add your own. Editing a font element, for example, is as easy as selecting from Coda’s options, such as Serif, Sans Serif, Fantasy, Cursive or Monospace, so that it doesn’t matter which fonts the person browsing your website has installed, they can simply use a Serif font and know that the site will look pretty close to what you designed. For more control, Coda includes commonly used font series, such as “Georgia, Times New Roman, Times, Serif,” which tells your browser to use Georgia if available, but if not use Times New Roman, and if that’s not available just use Times, and if not that, any font from the Serif font family.
Other options are available to change, such as font size, font weight, the height of the line, both before and after a paragraph, spacing between letters, alignment, and so much more. Each section of the CSS editor has a very extensive list of options built in, so coming up with style rules on your own is almost a thing of the past!
As mentioned, when designing a web page, checking to see what it looks like in an actual web browser is important. You can, of course, save your project, then open it up in Safari or Firefox or any browser of your choice, but Coda has chosen to include a preview mode, which uses the exact same rendering engine as does Safari, so if that is your main concern, then simply click the Preview tab, and get an instantaneous, always-up-to-date view of the page being coded.
You can still open your page in an external browser, of course, an option made particularly easy. At startup, Coda scans your applications folder, and all web browsers installed on your system are noted. In the preview pane, then, an option is shown to allow you to open the current document in any of those browsers. A nice touch, and while it’s nothing a user can’t do manually, its inclusion was very well done and thought out.
Finally, Coda includes a built-in FTP program. Built on the same engine included in Panic’s excellent Transmit FTP program, the FTP capabilities in Coda are equally as good, and equally as easy to use. Simply hit the “Connect” button in the Remote pane along the left side of the window, and a sheet will scroll down from the top of the window, requesting the server information. Type that in, hit Connect, and you should be logged in almost immediately. Sites you commonly use can be saved into Coda’s preferences, so there will be no need to type in an address a second time.