QuarkXPress How-To: Making Web Pages

Renee Dustman

6

There are numerous ways to produce Web sites these days. Some are created using online services that provide templates; other sites are created using highly technical Web-authoring and programming software. What you use all depends on the type of site you need and your level of expertise as a webmaster or Web designer. If you don’t need a Web site on the level of eBay.com and you think Java is just another name for coffee, you’ll probably have a more enjoyable experience making the transition into Web design using QuarkXPress 5, which has the capability to produce pretty decent Web pages, like the one shown in Figure 1.

With this article, we’ll get you started on a journey where the final destination will be a finished Web site, complete with forms, hyperlinks, image maps, and more. We’ll begin by explaining each option in the New Web Document dialog box and then, we’ll have you create a new Web document. Then, we’ll introduce you to the Web features in QuarkXPress 5.0. We’ll also provide you with some Web design tips that will help you plan your site.

Creating a New Web Document
It only makes sense for you to make the transition into Web design using the same application you’ve been using to produce print documents — stick with what you know and you can’t go wrong! Quark has made this especially easy by closely integrating its Web features with the standard features with which you’re already familiar.

Creating a new Web document in QuarkXPress is very similar to creating a new print document, but the setup is quite different. The main differences are the colors and layout options. To create a new Web document, launch QuarkXPress and choose File > New > Web Document, or press [command][option][shift]N ([Ctrl][Alt][Shift]N in Windows), to open the New Web Document dialog box shown in Figure 2.

In the Colors area, you need to decide what color to make the HTML text, the background, and each type of link. Black text on a white background is the default and deservedly so. It’s been proven time and time again that this color combination is the easiest to read. If you decide to use a background color other than white, make sure to choose contrasting colors for the text and various links.

In the Layout area, enter a pixel value for the page width. The default is 600 pixels — a size that fits on a 15-inch monitor. Since you have no way of knowing what size monitors your Web site will be viewed on, it’s a good idea to start off with this size. Then, select the Variable Width Page check box if you want to specify a page width at which text boxes (you might later specify as variable-width boxes) expand or contract to fit in a viewer’s Web browser. In the Width text box, enter a value between 1 and 100 percent for the maximum area your pages will occupy and enter a pixel value in the Minimum text box for the smallest page width at which variable-width boxes will resize.

If you want to place an image in the background of all the pages in your Web site, select the Background Image check box and click Select. Navigate to the image file and click Open. Then choose an option from the Repeat pop-up menu. Tile duplicates the image to fill the background; Horizontal tiles the image across the page; Vertical tiles the image down the page; and None places the image just once at the top of the page. Then click OK.

Web Document Interface
With a Web document now open on your monitor, you can access all the new Web features, plus the standard ones you’re used to seeing in QuarkXPress. Working in a Web document is practically business as usual, with just a few subtle differences. What follows is a synopsis of the Web tools and commands, all of which we’ll cover in more detail in upcoming issues.

Web tools. In addition to using the standard Tools palette, a Web document has a Web Tools palette, as shown in Figure 3. If you don’t see it onscreen, choose View > Tools > Show Web Tools.

The Web Tools palette contains the tools necessary to create forms and image maps. Forms are mostly used for collecting information provided by viewers, such as email addresses, comments, etc. There are Web tools for creating text fields, check boxes, option buttons, and pop-up menus — all items a form can contain. The various image map tools enable you to select specific areas on images to which you can add links that viewers can click on, which will take them to other pages in your site or other Web sites entirely.

Tip: It’s a good idea to specify the default characteristics for your tools prior to beginning work in a new document. You can access the Tools section of the Preferences dialog box by double-clicking on any tool in either the Tools or Web Tools palette.

The commands for creating a Web page. In addition to creating forms and image maps with Web tools, you can make use of the remaining Web features to produce other common elements found in most Web pages. There are several menu commands and an additional palette included in this lineup.

First off, from the Edit menu, you can access the Meta Tags and Menus commands. Meta tags are keywords you can add to your HTML files to help viewers performing a search on a Web browser find your Web site more easily. For example, a Web site for a rose catalog would do well to include the meta tags roses, flowers, and garden. Menus contain the lists of items in form pop-up menus. The Menus dialog box lets you create and manage these list items.

From the Style menu, you can access the Hyperlink and Anchor commands. In the New Hyperlink dialog box, you can assign a hyperlink destination to targeted text and images in your Web document. In the New Anchor dialog box, you can establish page items as anchors for those hyperlinks.

From the Item menu, you can access the Rollover command, which we covered in the article “Creating image rollovers to liven up your Web pages” in the June 2002 issue. Rollovers are page items that display two different images — one displays when the page is static and the other when a viewer scrolls her mouse across it.

The last of the Web features is the Hyperlinks palette, which you can access from the View menu. This palette provides a secondary way to create a new hyperlink or anchor, as well as manage existing hyperlinks in the document.

Designing for the Web
When navigating the Web, the average viewer looks around just long enough to take in a site’s home page, see if there’s anything that may be of interest, and then either enters the site or moves on. One way to entice viewers into your Web site is to offer them something on the home page, such as a free catalog. Not only do they get something for nothing, but also, you get their email and mailing addresses.

Web pages should also be eye-catching, informative, and easy to navigate. Rollovers, image maps, and hyperlinks are important features that make it easy for viewers to navigate your site with point-and-click ease. Of course, there are many things you shouldn’t do when designing a Web site, such as making something look like a link when it isn’t. While planning your Web site:

• Structure your Web site in a well-organized manner, so it’s easy to navigate.
• Plan out the design of each page. Build every page with a purpose, and make each page look like part of one Web site.
• People don’t like to read onscreen, so use small blurbs of text in a standard font, and don’t make the font too big, too small, or reversed out on a brightly colored background.
• Images should load quickly. Place thumbnail views of images on the main pages so they load fast and create image maps to larger views for viewers who are interested.

Just the Beginning
And that’s our introduction to the Web features in QuarkXPress 5.0. In future issues of this journal, you’ll continue your journey by further developing the new Web document you just created with the Web commands and palettes we briefly reviewed in this article. So make sure to save your document!

---

Creativepro.com readers can subscribe to Element K Journals at a discount. Click here to learn more.