The basics

When you go to File>New Project dialog box, there’s an unassuming orange Quark symbol at the bottom left. Clicking on this button brings up this dialog box.

(If you have an existing job open, you can also go to Layout>Layout Properties and change the Layout Type from Print to Web, although you might want to do this to a copy of your original.)

There aren’t too many options to worry about. Checking Single Layout Mode creates a project where the pages are all the same size. You can fix the width of the page in pixels or have a variable width that resizes with the browser window. There are some colour options and the ability to set a background image on the page.

General features

As you’d expect, working in the Quark web layout is fairly similar to working in the print layout. There’s an additional tools palette, which contains tools for making buttons, forms, tick boxes and the like. However, as someone whose only real experience is creating static webpages, there’s no way of making the buttons or tickboxes do anything.

HTML is obviously much more limited in its formatting options than QuarkXPress and several features unsupported by HTML don’t work in the web layout, for example kerning and fine control over leading. On more elaborate layouts, Quark will solve issues such as wrapping text around an object by converting it into a graphic.

Producing the HTML

Simply go to File>Export>HTML and press OK. Pages will export as HTML files and all images will be stored in a separate folder called ‘images’. There’s no built-in FTP client and, at least in Windows, saving to ‘My Network Places’ doesn’t seem to work. Therefore you’ll need to save to your hard drive and upload using an FTP client — I personally use the free FireFTP plug-in for the Firefox browser.

It’s not necessary to downsample your images, as the export feature will produce new web-optimised images for you.

Cascading style sheets

Cascading style sheets (CSS) are to the web what the Style Sheets function is to Quark. They separate the formatting from the content and are therefore very powerful. All websites worth their salt use CSS; however, unlike Quark Style Sheets, they’re responsible for a lot more than just text and essentially control the entire look of a website.

Quark does include a limited amount of CSS support, but this seems to be restricted only to text. Of course you can make global changes to your site by editing the Quark Style Sheets, but for many features you’ll have to edit pages manually, which is very time consuming.

A personal project

I created an online CV using QuarkXPress — I’ll keep some anonymity by not linking to it, but the layout and structure are similar to this online resumé.

I created the basic layout — the header, footer and left-hand navigation panel — on a Quark master page and used the two-button rollover feature to create the effect on the left-hand panel. Each document page in Quark corresponded to a single HTML file. Here’s my verdict:

The good

• If you’ve a reasonable knowledge of Quark, it’s very easy to use. You’ve got most of the Quark functionality and you need very little knowledge of HTML — all you have to do is upload your outputted files onto your web server
• The rendering is very good — the web page produced by Quark looked very much like what I’d laid out on the page. It displayed correctly on the latest versions of Internet Explorer, Safari and Firefox.

The bad

• Very limited CSS support. If your website requires moderate-to-major changes, you may end up having to do much of it by hand. Also, this is likely to affect the accessibility of your website to people with disabilities
• Big file sizes. I’ve been learning CSS recently and eventually felt confident enough to code my website by hand. My version, including images, came in at 80KB. The version produced by QuarkXPress was a whopping 600KB! (And this was in no way an elaborate website.)
• Lack of basic functionality. For example, try as I might, I just couldn’t centre my webpage in Quark. I also couldn’t link to an image hosted on another server — Quark just made a copy of the image and used that
• Fairly horrible HTML. I’m no expert, but there’s a lot of it and it’s a bit unfathomable
• I built my site around a master page and you would imagine that Quark would output those files once and add the variable parts, right? Wrong! It made individual image files for every page
• There’s no real way of editing the HTML to make small changes. You have to open up QuarkXPress, re-output the page and the corresponding images, then re-upload them to your webserver.

Conclusions

I’ve been a bit negative regarding this feature, but then I know some HTML and CSS and have some knowledge of the web in general.

However, if you’re called upon to make a straightforward, static website that doesn’t have that many pages — and you have QuarkXPress already — then this is a decent option, if you can cope with the large file sizes and lack of accessibility features.

The best resource for this is probably the QuarkXPress forums.