Web Layouts by Elaine Weinmann and Peter Lourekas © 2007 ...ptgmedia.pearsoncmg.com/.../bookreg/0321358279_web.pdfButtonsandformswithtextentryﬁelds and check boxesthatcollectinformation

Creating Web layoutsIn this chapter we’ll show you how to createWeb layouts�, as well as how to previewthem in whichever browser is currentlyinstalled in your operating system. Thegood news is that you can apply all yourexisting print layout skills to building Weblayouts—you don’t have to leave thoseskills by the wayside. Another piece of newsis that in addition to the standard toolpalette you’re already familiar with, you’llalso need to learn to use an assortment ofWeb tools� and some new techniques andcommands that are unique to Web layouts.This is a big, fat chapter for a reason.

Print and Web layouts can reside in thesame project, and you can add as many ofeach as you like. To build a Web page, youcan create new items right in a Web layoutor copy and paste items from any existingWeb or print layout in any project. If youdon’t want to start from scratch, you canconvert print layouts (or duplicates ofprint layouts) into Web layouts.

Any or all of the following elements can beadded to a Web layout:

� Text, which will be exported either asHTML text or as a rasterized graphic

� Picture files in most graphic formats,which will be converted to an appropri-ate Web graphics file format, such asJPEG, GIF, PNG, or SWF upon export

� Tables, lines, or any other standard items

� Interactive elements, such as imagemaps and rollovers, that link the viewerto additional information

Web

Layouts

1Web Layouts by Elaine Weinmann and Peter Lourekas. Copyright © 2007. Published by Peachpit Press, a division of Pearson Education, Inc. All rights reserved.

Web Layouts

� The tools on the Web Toolspalette are used for creating varioustypes of controls for Web pages.

� A Web layout in QuarkXPress

Rectangle Image Map

Form Box

Text Field

Button

Image Button

Pop-up Menu

List Box

Radio Button

Check Box

Rollover Linking*

Rollover Unlinking*

(Continued on the following page)

*These tools arenot covered in thisQuickStart Guide.

� Buttons and forms with text entry fieldsand check boxes that collect informationentered by the viewer and send it to ascript program that, in turn, submitsthe data to a Web server for processingand possible feedback information

TIP You can use layers in a Web layout, butthey’ll be flattened in the export file.

TIP To make an item appear on every pageof a Web layout, create or paste the itemonto the master page for that layout.

Both the file storage size of a Web pageand the speed of the user’s system andInternet connection affect the time it takesa page to download for display in abrowser. The smaller the file storage size,the less data there is to be downloaded.The faster the modem speed, the quickerthe data travels between the Web serverand the user’s browser. The essence ofgood Web design is to produce a Web pagethat looks good and downloads in a reason-able time frame.

Every Web page is actually an HTML filethat contains HTML code and conforms tothe HTML language structure. The page iscomposed of text as well as path referencesto picture files. The HTML code instructsthe browser how to display the text andpictures as a Web page.

Since QuarkXPress Web layouts are storedin the standard QuarkXPress format, youcan create and revise them using the sameQuarkXPress features that you’d use toconstruct a print layout. You don’t have toenter or work with HTML code—at leastnot directly.

When your Web layout is finished, you canexport it as HTML files directly fromQuarkXPress. Then, following the instruc-tions from your Internet service provider(ISP), you can use other software to uploadthe HTML files and any picture files usedin the pages to the ISP’s server for displayon the Web.

Web

Layo

uts

2

Chapter 19

Web Layouts by Elaine Weinmann and Peter Lourekas. Copyright © 2007. Published by Peachpit Press, a division of Pearson Education, Inc. All rights reserved.

Web layout to WebsiteHere’s the basic scenario:

In QuarkXPress, you’ll create a Web layout,adding text, pictures, lines, paths—whatever.

Next you’ll export your finalized layout pagesfrom QuarkXPress as HTML files and export anypictures that are used on those pages as separatefiles (in the GIF, JPEG, PNG, or SWF format).

The HTML file or files will be placed, along withthe picture files that you’ve used, into a sitefolder of your choosing. The browser will thenopen the multiple files from that folder and dis-play them as a cohesive whole—a Website. Youroriginal QuarkXPress Web layout will be pre-served in its original form, separate and apartfrom any HTML file that you decide to generatefrom it.

To navigate through pages in a Web layout inQuarkXPress, you’ll use the Page Layout palette.To navigate between HTML files in the Website,you first need to link one file to the next inQuarkXPress using hyperlinks. Then, when a userviews your HTML files in a browser and clicks alink, the browser reads the link and displays thedesignated linked file.

Keeping things organized� In Item > Modify > Export in QuarkXPress,

create and label a separate folder for eachpicture file format, such as GIF, JPEG, and PNG.Then, when you export the pictures thatyou’ve used in a Web layout, put them in thefolder/directory that you’ve allocated for thatformat. This will help keep things organized.

� In QuarkXPress, you can designate a sitefolder/directory for your exported HTMLfiles and any image folders/directories thatcontain pictures used in your Web layout.

� Before uploading your Website to a server forviewing on the Web, ask your Internet serviceprovider how it wants files and folders namedand organized in the site folder/directory thatyou’ve designated.

A Web layout isn’t a Web page—at leastnot yet. It’s a layout that can, if exportedas HTML, be turned into a Web page. Let’sbegin.

To create a Web layout:1. To create a new project, choose File >New > Project (Cmd-N/Ctrl-N).orWith an existing project open, chooseLayout > New.

2. Choose Layout Type: Web.3. Enter a Layout Name.4. In the Colors area�, choose colors forthe Background of the page, for a Link(hyperlink) that gets a user to addi-tional data, for a Visited Link (a linkthat’s already been clicked), and foran Active Link (a link that’s currentlybeing clicked on). (The Visited Linkand Active Link colors display onlywhen a page is viewed in a browser.)

5. In the Layout area, enter a Page Widthvalue or choose a preset width fromthe menu.

6. Optional: Check Variable Width Page,then enter a Width percentage andMinimum width value. When thisoption is checked, variable HTMLtext boxes will have the capacity to

Create

Web

Layout

3

Web Layouts


stretch or shrink in width down to theMinimum width value as the userresizes their browser window; HTMLtext within the box will reflow. To makea text box variable, select the box,choose Item > Modify, click the Texttab, then check Make Variable Width.

7. Optional: Check Background Image,click Browse, then locate and open apicture file to be displayed behind allthe other items on the Web page. Fromthe Repeat menu, choose:

Tile for continuous horizontal andvertical repetition of the image.

Horizontally for continuous horizontal(but not vertical) repetition of theimage.

� The NewProject dialog box

Web page sizeWhen calculating the appropriate size for aWeb page, consider common monitor sizes andmodem speeds. Nowadays, you can safely designfor a 800 x 600-pixel viewing area and a 56 Kbpsmodem. The page won’t occupy the wholebrowser window, though; the browser’s naviga-tion buttons and toolbar will also occupy somespace (see �, next page). Realistically, you’ll beworking with an area about 10 inches wide (740pixels) by 7.5 inches high (550 pixels). You canincrease the page height, but your viewers willhave to scroll downward to view the whole page.


Vertically for continuous vertical (butnot horizontal) repetition of the image.

None to display the image in only onelocation—the upper left corner of thebrowser window.

8. Click OK. (The blue vertical line repre-sents the rightmost edge of the page,as specified in the Page Width field.)You will learn how to add forms, formcontrols, interactive Web elements,and hyperlinks to a page later in thischapter.

TIP The options or values entered in theNew Layout or New Project dialog boxapply to the default master page forthe layout. Every site page created fromthat master will have these settings.

To add pages to a Web layout:With a Web layout open, choosePage > Insert, enter in the Insert [ ]pages field the number of pages youwanted inserted, then click OK.orOn the Page Layout palette, drag a masterpage icon into the layout page area, belowany existing layout page icon�.

The methods for moving through a Weblayout are the same as for a print layout.Here’s a quick summary.

To go to another page in a Weblayout:Choose Page > Previous, Next, First, orLast.orOn the Page Layout palette, double-clicka layout page icon.orChoose a layout page number from theGo-to-page menu at the bottom of the pro-ject window.

Add

Pag

esto

Web

Layo

ut;N

avig

ate

4

Chapter 19


� A Web page has to fit within the standard sizebrowser window, and allowance must be made forthe browser’s navigation and toolbar areas.

� To add a page to aWeb layout, drag a masterpage icon downward into

the layout page area.

Creating text and picture itemsYou’ll use the same tools to create text for aWeb layout that you would use to create text ina print layout (draw a box with a text box tool,then enter or import text), but the attributes youcan assign differ between these two types of lay-outs due to their unique quirks, limitations, andrequirements. For example, you can’t link textboxes in a Web layout.

To get a picture into a Web layout, use the samemethod you’d use in a print layout: Draw a boxwith any picture box tool, then use File > ImportPicture to import a picture.

If you’ve created a Web layout but areunhappy with any of the color, layout width,or background image properties choicesyou made in the New Layout dialog box,you can change them at any time for thecurrent page via the Page Properties dialogbox. And while you’re at it, you can alsoenter a title for the Web page.

To change the properties of anexisting Web page:1. Choose Page > Page Properties (Cmd-Option-Shift-A/Ctrl-Alt-Shift-A).

2. Enter a name in the Page Title field�.This title will display in the title bar ofthe browser window.

3. Change the Export File Name. Thisname is used for the page on the PageLayout palette and when the page isexported as an HTML file. Don’t enterspaces or slashes (/)—they aren’taccepted as characters on the Windowsand Unix platforms.

If you leave the default Export FileName as is and you export the page asan HTML file, there’s a good chancethe program may discover an export

Page

Properties

5

Web Layouts


file with the same name in the samefolder. (An alert dialog box will ask ifyou want to replace the existing exportfile, to which you can respond by click-ing Yes to replace or No to cancel.)To avoid this confusion altogether, weprefer to enter a custom name in theExport File Name field.

4. Choose a Meta Tag Set from the menu.5. Change any of the other settings in thedialog box.

6. Click OK. Each Web layout page hasits own set of Page Properties. Theseproperties don’t apply to a whole layout.

� Use the Page Propertiesdialog box to change the name,colors, width, or backgroundimage of an existing Web page.

What’s changed?Changes made in the Page Properties dialog boxaffect only the currently displayed layout page.Changes made in the Layout Properties dialogbox affect any layout pages that are subsequentlyproduced by dragging the Blank Single Page iconon the Page Layout palette; these new pages won’tinitially be associated with any master page.

Web viewers who download your page maynot have all the fonts you used to designthe page. In this case, the viewer’s Webbrowser will substitute a commonly used,standard font for yours, and this can affectthe look and layout of your page. By speci-fying that your display type (e.g., a headeror logo) be converted to a graphic onexport, you can be confident that it willlook the same in the browser. Keep inmind, however, that because this conver-sion adds a graphic to your Web page, itincreases the file’s size and download time.

To convert a text box into a bitmapgraphic:1. With the Item or Content tool, select atext box in your layout.

2. Choose Item > Modify, then click theExport tab.

3. Check Convert to Graphic on Export�.For other options in the Export pane,see the instructions that follow.

4. Click OK. A camera icon appears in thetext box�. This icon will be visibleonly in the QuarkXpress document,not when the project is viewed in abrowser.

To choose a Web graphics format fora picture file:1. With the Item or Content tool, select apicture box in your layout.

2. Choose Item > Modify, then click theExport tab.

3. Optional: Enter a description in theAlternate Text field to be displayed inlieu of the image in browsers for whichthe show images option is turned offor on Websites for which it’s requiredby law. Alt text helps make a siteaccessible to viewers with disabilities.

Con

vert

toG

raph

icon

Exp

ort;

Exp

ortF

orm

ats

6

Chapter 19


How big?To find out the file size of an exported picturefile, in Mac OS X, highlight the file name in theFinder, then choose File > Get Info (Cmd-I).In Windows, Right-click the file in WindowsExplorer and choose Properties from the con-text menu.

Knowing the file size of an image helps you esti-mate how long it will take to download with theWeb page over the Internet.

� Check Convert to Graphic on Export in Item >Modify > Export for a text box.

Watch that excess baggage!When a picture is exported, QuarkXPressexports the whole thing, regardless of whetherit was cropped or scaled in QuarkXPress.Exporting a larger picture than you need willincrease a site’s download time unnecessarily.For this reason, it’s best to crop or scale yourpictures in an image-editing application or useFile > Save Picture in QuarkXPress to reduceimages to the desired size.

� This camera icon identifies text boxes that will beexported as graphics.

new

4. The Export As formats will compressthe image to reduce its storage size andwill modify colors in the image to getit in sync with the display capabilitiesof the browser.

From the Export As menu, choose:

GIF (Graphics Interchange Format)�for an image that has solid-color areasand sharp edges, as in a logo or displaytype. This format reduces an image’scolors to a 256-color palette. Choose apalette from the Palette menu to beused when the image is converted intothe GIF 256-color format. Web-safe, thebest choice, guarantees that solid col-ors are converted to browser-safe col-ors. Check Use Dithering to allowsolid-color areas that aren’t containedin the browser palette to display as amixture of two browser colors (see thesidebar on the next page). Check UseInterlacing to have the image down-load in progressively greater detail; thisoption increases the file size.

JPEG (Joint Photographic ExpertsGroup)� for a photographic, continu-ous-tone image that doesn’t containsolid colors or whose edges aren’t dis-tinct. Choose from the Image Qualitymenu (the higher the quality setting,the better the image display and theless data loss, but the larger the file sizeand thus the slower the downloadtime). Check Progressive to have theimage download in progressivelygreater detail.

SWF (the native file format for Flash,pronounced “swiff”)� is suitable forvector graphics and animation, but isbest used for pictures created in Flash.Choose a Background for SWF pictures:Opaque, Transparent, or Window.

PNG (Portable Network Graphics)�for a photographic, continuous-toneimage. Its compression scheme causes

ExportF

ormats

forIm

ages

7

Web Layouts


� Export options for the SWF format

� Export options for the PNG format


� Export options for the GIF format

� Export options for the JPEG format

new

no data loss. Click True Color to con-vert the image using the maximumnumber of colors (this option producesthe largest file size). Or click Indexedcolor, then check Use Dithering toallow solid-color areas that aren’t con-tained on the browser palette to displayas a mixture of two browser colors. Forthe Indexed color option, choose apalette from the Palette menu to beused for reducing the image colors to256 colors. Web-safe guarantees thatsolid colors will be converted tobrowser-safe solid colors (the bestchoice). Check Use Interlacing to havethe image download in progressivelygreater detail; this option increases thefile size.

5. In the Export To field, enter a namefor a new folder/directory to hold theexported image or leave this locationas the default “image” folder/directory.The folder will be created when theWeb layout is exported. Any folders/directories that have already beencreated will be listed on the Export Tofield menu.

6. Click OK.

More about the export formatsThe GIF, JPEG, PNG, and SWF formats, withtheir built-in compression schemes, signifi-cantly reduce the storage size of image fileswhile causing only a minor reduction inimage quality. Compressed images down-load faster on the Web.

� Images with a solid background colorand a few solid-color shapes will com-press the most (expect a file size in therange of 20–50K), whereas images thathave many color areas, textures, or pat-terns won’t compress nearly as much,especially large images (100K and up).

� The GIF format may compress continu-ous-tone, photographic images less thanit will images that contain only solid-

Exp

ortF

orm

ats

forIm

ages

8

Chapter 19


DitheringDithering is the intermixing of two palette colorsto create the impression of a third color. Itmakes images that contain a limited number ofcolors (256 or fewer) look as if they contain agreater range of colors and shades, and thus theyare more pleasing to the eye. Dithering is usuallyapplied to continuous-tone images to increasetheir tonal range, but unfortunately, it can alsomake them look a bit dotty.

Dithering usually doesn’t produce aestheticallypleasing results in images that contain solidcolors. This is because the browser palette willdither pixels to re-create any colors that thepalette doesn’t contain. For images that containsolid colors, it’s better to create colors in animage-editing program that lets you work witha Web-safe color palette.

Continuous-tone imagery is, in a way, alreadydithered. Some continuous-tone imagery looksfine on a Web page without dithering and in theallotted 256 colors. Dithering adds noise andadditional colors to a file, though, so compres-sion is less effective when dithering is on thanwhen it’s off.With dithering enabled, you maynot be able to achieve your desired degree offile compression. As is usually the case withWeb output, you’ll need to strike an acceptablebalance between aesthetics and file size.

What’s in a name?To rename the default “image” folder/directory,go to QuarkXPress (Edit, in Windows) >Preferences > Web Layout > General, then enterthe desired folder/directory name in the ImageExport Directory field.

color areas, so JPEG is a better formatchoice for a these types of images.

� For onscreen output, save your images ata resolution of 72 ppi, with a sufficientwidth and height in pixels to producean acceptable image size in the browser.

In summary, images that must be large(500 x 400 pixels or larger) ideally shouldcontain only a handful of large, solid-colorshapes. Try to restrict the size of imagesthat contain intricate shapes and colors tojust a portion of the Web browser window.

GIF

GIF is the standard file format used forWeb graphics. It’s an 8-bit format, whichmeans a GIF image can contain a maxi-mum of 256 colors. Most browser palettesare also 8-bit, which means they too candisplay a maximum of 256 colors—not thethousands or millions of colors that areneeded to make images look pleasing tothe eye. Colors that a browser palette lacksare simulated by dithering, a display tech-nique that intermixes color pixels to simu-late other colors. Since color substitutionsare more noticeable in solid-color areasthan in continuous-tone areas, GIF is agood format choice for images that con-tain solid-color areas or shapes with well-defined edges, such as type�. GIF cansave fully transparent pixels (one level oftransparency).

JPEG

The JPEG format may be a better choicefor preserving color fidelity if your imageis continuous-tone (contains gradations ofcolor or is photographic) and your viewershave 24-bit monitors, which have thecapacity to display millions of colors�.

On the plus side, the JPEG format can com-press a 24-bit image to the same file size asthe GIF format can compress an 8-bit image.

ExportF

ormats

forIm

ages

9

Web Layouts


� For this continuous-toneimage, JPEG is a moresuitable export format.


� GIF is a suitable exportformat for this image, whichcontains only solid-color shapes.

TRAVEL

\E B

Separation of Web and printTo set preferences for a Web layout, go toQuarkXPress (Edit, in Windows) > Preferences(Cmd-Option-Shift-Y/Ctrl-Alt-Shift-Y). To setpreferences for all future Web layouts, close allprojects, then open the Preferences dialog box.The Default Web Layout preferences are listedbelow the Default Print Layout preferences.Preferences for the two types of layouts are setseparately, whereas Application preferences applyto both print and Web layouts.Web and printlayouts have many of the same Preferencesoptions in their separate panes, but some prefer-ence options are unique to one type of layoutor the other.

On the down side, JPEG is a poor choicefor images that contain solid colors or type,because its compression methods tend toadd unwanted pixels (artifacts) along thewell-defined edges of these kinds of images.Also, a small minority of Web users lack 24-bit monitors. A JPEG image will bedithered on an 8-bit monitor, althoughdithering in a continuous-tone image willbe less noticeable than in an image thatcontains solid colors.

If you choose JPEG as your export format,decide which degree of compression isacceptable by weighing the exported filesize versus diminished image quality�.The lower the image quality option youchoose, the greater the degree of compres-sion and the greater the image data loss.

SWF

Macromedia Flash’s SWF format isintended for the rapid delivery of vectorgraphics and animations. If you import anSWF picture file, it’s best to export it in thisformat as well. Special features of SWFinclude anti-aliasing, scalability (allowingpictures to look good on both high-endand low-end displays), and speed.

PNG Indexed and PNG True Color

The two PNG formats, Indexed and TrueColor, have the capacity to save partiallytransparent pixels and are especially usefulfor saving images that have soft, featherededges. The PNG Indexed format allows foronly 256 colors in the optimized image andis similar to the GIF format. The PNG TrueColor format allows for millions of colorsin the optimized image and is similar tothe JPEG format. Both PNG formats use alossless compression method (they don’tcause data loss).

Exp

ortF

orm

ats

forIm

ages

10

Chapter 19


A JPEG quality settingof High

A JPEG quality setting ofLowest: Note the artifactsalong the edges of the shapes.

�

new

Items can be created directly on a Webpage or they can be drag-copied or copiedand pasted from other layouts.

To add items to a Web page by drag-copying:1. Create a Web layout.2. Open an existing QuarkXPress printor Web project that you want to copyitems from. Drag any items (text boxes,picture boxes, contentless boxes, lines,text paths, or tables) into the new Weblayout window�. The items will becopied automatically.

3. Choose export options for any of theitems. If desired, you can also addinteractive elements or form controlsto the layout.

TIP If you drag-copy a text box or tablefrom a print layout to a Web layout, theConvert to Graphic on Export optionwill be enabled for the item automati-cally, but you can go to Item > Modify >Export and uncheck this option for anyselected item.

The “saving” we’re talking about here isjust plain ol’ saving as a QuarkXPressproject—not exporting. The steps forpreviewing and exporting Web layouts arediscussed next.

To save a Web project:For an already saved project, choose File >Save (Cmd-S/Ctrl-S).orFor a new, as yet unsaved project, chooseFile > Save, enter a name, choose a location,then click Save�.

Drag-C

opyto

Web

Layout;Save

11

Web Layouts


� Drag an existing item into a Web project.

� The Save As dialog box for a project

Previewing and exporting WeblayoutsIn order to preview your Web page in abrowser, you need to tell QuarkXPresswhich Web browsers are present in yoursystem.

Note: QuarkXPress is a robust page layoutprogram—not a full-featured Web-pagecreation program. Although QuarkXPresscan export PostScript page layout descrip-tions and convert them to HTML code,it can’t convert HTML code into the pagelayout environment; you can open an“export.htm” file in a browser at any time,but not in QuarkXPress.

To choose browser preferences:1. Go toQuarkXPress (Edit, inWindows) >Preferences > Browsers.

2. Click Add�, locate a browser in yoursystem, then click Open. Click Addagain if you want to locate any otherbrowsers in your system.

3. Optional: If you want to change whichbrowser is the default, click in theDefault column in the AvailableBrowsers scroll window next to a differ-ent browser name (a check mark willappear).

4. Click OK to exit the Preferencesdialog box.

TIP To modify the name used to list abrowser in the Preferences > Browserpane (let’s say you want the name toreflect the browser version), click thebrowser name, click Edit, change theDisplay Name, then click OK. Thischange affects only the browser namethat QuarkXPress displays on its ownmenus, not the name of the actualbrowser application.

Bro

wse

rP

refe

renc

es

12

Chapter 19


� You can use the Browsers pane of the Preferencesdialog box to tell QuarkXPress which Web browsersare available in your system or to specify a differentbrowser as the default.

You can preview any individual pages priorto exporting your whole Web layout. Forthe preview, QuarkXPress creates a tempo-rary page in memory. (To preview hyper-links, on the other hand, you have toexport the whole layout.)

Note: In order to follow the instructionsbelow, a browser must be installed in yoursystem.

To preview a Web page in a browser:1. Click the HTML Preview buttonat the bottom of the project window�.The page will open in the defaultbrowser currently chosen inQuarkXPress (Edit, in Windows) >Preferences > Application > Browsers(whichever browser has a check markin the Default column).orChoose a browser from the HTMLPreview menu at the bottom of the pro-ject window�.orControl-click/Right-click a blank areaof your Web layout and choose fromthe Preview HTML submenu.

2. When you’re done previewing, closethe browser window, then click backin the QuarkXPress project window.

TIP You can also choose a browser from thePage > Preview HTML submenu, butwhy go to all that trouble?

TIP If you do a lot of previewing, you mightwant to refresh your browser windowto get a fresh, clean look at your work.In Explorer, click the Refresh button;in Safari, click the Reload the CurrentPage button.

Preview

Page

inB

rowser

13

Web Layouts


� HTML Preview button

� HTML Preview menu

No surprises!The same Web page may display differently indifferent browsers (e.g., Microsoft InternetExplorer, Safari, and Mozilla Firefox) and on differ-ent platforms (Mac OS,Windows). Be sure toview your Web page, at a minimum, in the mainbrowsers and on the two main platforms soyou’ll know how it will look on different viewers’systems.

When your Web layout is finished, it’sready to be exported as HTML. Here’s howto do it.

To export a Web layout as HTML:1. Choose File > Export > HTML.2. Enter a page number or a range ofpage numbers to be saved, or chooseAll (the default choice) from the menu�.

3. Choose or create a folder in which tosave the HTML file.

4. Optional: Check Launch Browser to havethe default browser launch automati-cally and display the exported page(s).

5. Optional: Check External CSS File tohave QuarkXPress generate and placea CSS (cascading style sheet) file intothe folder you chose in step 3.

6. Click Export. A separate Export.htmfile will be created for each page speci-fied in step 2 above. The file namewill match the name entered in theExport File Name field in the Page >Page Properties dialog box. The “.htm”extension is added automatically.

Note: If you reexport a Web page to thesame folder location, an alert dialogbox will appear after you click Export.Decide whether you want to replaceindividual export files, replace all files,or not replace individual files.

TIP Any images in the Web layout will beexported in the formats you’ve chosenand will be stored in a default folder/directory called “image” unless youspecified a different folder/directoryin Item > Modify > Export. This folderwill be inside the folder/directory thatcontains the exported HTML page(s).

Exp

orta

sH

TM

L

14

Chapter 19


� Choose options in the Export HTML dialog box.

Cascading style sheetsThe color, font, and styling information in aCSS (cascading style sheet) file affects how thebrowser displays text in an exported HTML file.Cascading style sheets control HTML text for-matting just as style sheets in a QuarkXPresslayout control text formatting. Style sheets thatare applied to text in a QuarkXPress Web layoutare converted into a CSS file automatically byQuarkXPress upon export.

Note: Text boxes that are converted to a graphicprior to export won’t be affected by a CSS.

� If you change the styling of text in a Weblayout and then reexport it, remember tocheck the External CSS File option soQuarkXPress will update the existing CSS file.

� In order for the browser to use the CSS filewhen it displays the HTML file, you must keepthe .htm file and its corresponding .css file inthe same folder.

� To view the simple CSS format coding, openthe external CSS file in a plain text editor(e.g., TextEdit or NotePad).

Creating hyperlinksWebsites have to present information in anorganized, controlled manner so users canaccess the information they need withoutgetting confused. To help orient users,a Website’s introductory usually lists, bytopic, the other pages in the site.

Let’s say you’ve created a multipage Weblayout and you’ve filled the new page(s)with the relevant text and graphics. Thenext step is to place navigation hyperlinks(“links,” for short) on the page to enableusers to get to other locations on the samepage, to other pages in the Website, oreven to another Website. For example, toget users to a page bearing product infor-mation, you would set up a “Products” link.

Various visual devices are used to desig-nate hyperlinks, including underlinedtext, image maps, rollovers, and cascadingmenus. We’ll delve into all of these tech-niques later in this chapter. The Hyperlinkspalette in QuarkXPress�–� is used toassign a link destination to a selected link-ing device. That device can be highlightedtext, an image map area, or a picturebox. Hyperlinks are interactive only whenviewed in a browser.

First we’ll show you how to create a URLlink.

To create a URL hyperlink:1. Choose Window > Hyperlinks.2. Optional: Choose the Item or Contenttool, then click a picture box to use as alinking device, or choose the Contenttool and select some text to use as alinking device.

Note: If you create a Hyperlink destina-tion without first selecting text or a pic-ture box, that link won’t be assigned,though you can assign it later (see“To create a hyperlink for an existingdestination” later in this chapter).

Create

UR

LH

yperlink

15

Web Layouts


PDFs and hyperlinksHyperlinks can be used in PDF files in orderto create links between different areas of text(usually within the same file or to other URLs).Hyperlinks are interactive in an exported PDF fileonly when the file is viewed in Acrobat Reader.

New Hyperlink button

� If the list on your Hyperlinks palette getsto be overly long, via the Show buttons, youcan choose not to show (or hide) URLs ,anchors , or pages to make it more compact.

� On the Hyperlinks palette, destinations canbe shown by Name (as shown in this figure) orby Link (as shown in the next figure).


3. Click the New Hyperlink button onthe Hyperlinks palette.orChoose Style > Hyperlink > New.orWith the pointer over an item,Control-click/Right-click, then chooseHyperlink > New from the contextmenu�–�.

The latter two options are available onlyif you have selected text or an item.

4. Enter a Name to be listed on the paletteas the link destination, and leave URLas the choice on the Type menu�.

5. Enter a location in the URL field.Acceptable locations include an anchorin the active layout, the URL for a fileon the Internet, or the name of anexported HTML file that’s located inthe same folder as the exported .htmfile for the active layout.orChoose a destination from the URLmenu�. Exported HTML files andURLs that are present in the active lay-out will appear on this menu. Thename of the exported QuarkXPressWeb page that displays on this menu istaken from the Export File Name fieldin the Page Properties dialog box.From the URL menu, you can chooseone of the four standard protocols (“–http://,” “https://,” “ftp://,” or“mailto: –”).orClick Select/Browse to the right of theURL field, locate the desired file name,then click Link. You can link to anexported HTML file from anotherfolder, but keep in mind that for thelink to work properly on the Internet,the file will need to be uploaded to theInternet service provider’s server alongwith your exported HTML files. Clickthe Link/Open button to enter a desti-nation as a complete path name.

Cre

ate

UR

LH

yper

link

16

Chapter 19


What’s on the menu?The Hyperlink > New submenu on both thecontext menu and the Style menu lists only thoseexported HTML files that are located in the samefolder as the active project. You can chooseone of those file names as the destination for ahyperlink.

� A Target field will be present inthe New Hyperlink dialog box if textor an item was selected in step 2 inthe instructions on the previous page.

� The URLmenu� The Type menu

� The Targetmenu

� The New Hyperlink dialog box looks like this if youcreate an unassigned hyperlink (didn’t select text or anitem for step 2 in the instructions on the previous page).

6. If text or an item was selected in step 2,choose an option from the Targetmenu to designate where any destina-tion HTML pages should display (�,previous page). These frame targets areneeded only if the item is embeddedwithin a frameset on your Web page.Choose:

None (the empty space at the top) or“_self” to load the target page in thesame frame or window that holds thecurrent page.

“_blank” to load the target page in anew, unnamed window.

“_parent” to load the target page intothe parent frame, if there is one, of thecurrent page.

“_top” to load the target page into thefull browser window, replacing anyframesets.

7. Click OK. The new destination willappear on the palette.

TIP The Hyperlinks palette can list destina-tions that aren’t assigned to any item ortext, and you don’t have to use them inthe Web layout.

This is a method for creating a hyperlinkwithout using a dialog box.

To create a hyperlink for an existingdestination:1. Show the Hyperlinks palette.2. Highlight some text or select a text ora picture box to be used as a linkingdevice�.

3. Click an existing destination or anchorname on the Hyperlinks palette�–�.orControl-click/Right-click an item andchoose a destination from the Hyperlinksubmenu. Either the link icon ora text underline will appear in the boxyou’re using as a linking device.

Create

Hyperlink

viaP

alette

17

Web Layouts


� ...then click a destinationname on the palette. If you reselectthe item, the destination name onthe palette will become selected.

With Name chosenfrom this menu, des-tinations are listedby their assignednames.

� To create a hyper-link, select an item...

� With Link chosen from thismenu, destinations are listed bytheir URL, page name, or anchorname.

To edit a hyperlink:1. On the Hyperlinks palette, click aname or a link, then click the Editbutton.

2. Edit text in the URL field and/or theTarget field.

3. Click OK. The hyperlink listing willupdate on the palette.

Anchors are special names that areattached to existing items on a page andthat function as place markers either for aspecific page in a Website or for a specificlocation on a Web page. If an anchor ischosen as a destination for a hyperlink,a user can click that hyperlink on a Webpage to get to the destination page or loca-tion where the actual anchor item resides.

To create an anchor:1. Optional: Highlight some text or selecta text or picture box to assign to theanchor you’ll be creating in the follow-ing steps. You can also assign an itemto the anchor later (see the followingpage).

2. Click the New Anchor button onthe Hyperlinks palette.orChoose Style > Anchor > New.orControl-click/Right-click an item, thenchoose Anchor > New.

The latter two options are availableonly if text or an item is selected.

3. Change the picture or text AnchorName that was entered automatically,or leave it as is. If you type a space orother character that isn’t acceptable,an alert dialog box will appear whenyou click OK.

4. Click OK�. Anchor names are pre-ceded by a “#” on pop-up menus, sub-menus, and the Hyperlinks palette.

Edi

tHyp

erlin

k;C

reat

eA

ncho

r

18

Chapter 19


� Every anchoris identified by ananchor icon on theHyperlinks palette.

New Anchor button

Unassigned anchor namesare listed in boldface.

When you attach an anchor to an item inyour layout, that item’s location becomesthe anchor’s destination.

To assign an existing anchor to anitem:1. Highlight some text or select a text orpicture box�.

2. Choose Style > Anchor.orControl-click/Right-click the selecteditem, then choose Anchor.

3. Choose an anchor name from the sub-menu�–�. (These names also displayon the Hyperlinks palette when Link ischosen from the palette menu.)

Here is how to create a link to an anchor.

To create a link to an anchordestination:1. Highlight some text or select a textor picture box to become the linkingdevice.

2. In the Hyperlinks palette, click theanchor destination for the text or pic-ture box to link to�. In the browser,clicking this text or item will take theuser to the page where the anchor islocated. Use this method to create a“back to top” link on a page.

You can rename an anchor at any time.

To rename an anchor:1. Click an anchor name on theHyperlinks palette.

2. Click the Edit button.3. Change the name.4. Click OK.TIP An anchor can also be edited via Style >Anchor > Edit or via the Anchor > Editcommand on the context menu.

Link,Renam

eA

nchor

19

Web Layouts


� Select an itemto be attached toan anchor...

� ...then choose ananchor name fromthe Anchor submenu.

� The Anchor iconsignifies that this itemis attached to an anchor.

� These items are attached to an anchor destina-tion. The item on the left has a link icon, whereas thetext on the right has a link underline. In a browser,clicking a link item like either of these will take youto the location of an anchor item (as in �, above).

If you want to break the link between thehyperlink text or object and the destina-tion, you must remove the hyperlink tothat destination. No text or items will beremoved from the layout—only the linkinformation will be removed. (To deletea destination, see the following page.)

To break a hyperlink:1. In your Web layout, select a text orpicture box that is functioning as alinking device. On the Hyperlinkspalette, the destination name for thatlinking device will be highlighted�.

2. Click “No Hyperlink” on the Hyperlinkpalette�.orChoose Style > Hyperlink > Remove.orControl-click/Right-click the selecteditem, then choose Hyperlink > Remove.

The destination name will remain, butthe link between it and the text or pic-ture box will be broken.

TIP If a text box or picture box is deletedfrom a layout, any hyperlinks that theitem contained will also be deleted.The listing on the Hyperlinks palettewill update to reflect the change; thedestination name will remain.

TIP If an item or text that hasn’t beenlinked to a destination is selected,“No Hyperlink” automatically becomeshighlighted on the Hyperlinks palette.

Rem

ove

Hyp

erlin

k

20

Chapter 19


� To remove ahyperlink, select thelinking device (inthis case, some text) ...

� ...then click NoHyperlink on theHyperlink palette.

When a destination name or anchor listingis deleted from the Hyperlinks palette,only the hyperlink references to it aredeleted from the palette—not the actualdestination item or linking device.

To delete a destination or anchor:1. On the Hyperlinks palette, click adestination name or anchor name�.

2. Click the Delete button on the palette,then click OK when the alert boxappears�. The destination or anchorlisting and all hyperlink references thatpoint to that destination will be deletedfrom the palette; the items will remain.

You can also use the Hyperlinks palette toquickly navigate through a Web layout andlocate a destination page or item.

To go to a hyperlink destination:Double-click a hyperlink or anchor nameon the Hyperlinks palette�. The page oranchor item will be displayed in the projectwindow.orControl-click/Right-click a hyperlink oranchor name on the Hyperlinks palette,then choose Go To.orOn the Hyperlinks palette, double-clicka link to an HTML file that resides eitherin the current site folder or in anotherfolder/directory on your hard drive. Thedefault browser will open and that file willbe displayed. Note: If you’re not connectedto the Internet when you double-click aURL destination, a dialog box will alert youthat the server can’t be found.

Delete,G

oTo

Destination

21

Web Layouts


� This prompt appears when you delete a destinationlink or anchor.

� On the Hyperlinks palette, double-click a link name.QuarkXPress will locate and select that hyperlink itemand display it in the project window.

� On the Hyperlinks palette, click adestination name, then click the Deletebutton. The destination and any hyper-link references to that destination willbe deleted from the palette.

This technique creates internal (relative)hyperlinks that take a viewer to differentpages within the same Website. For this towork, you must have exported the targetpage at least once.

To create a hyperlink from one pageto another in a Web layout:1. Create or display a Web layout thatcontains at least two pages.

2. On the first page, select an item orsome text to use as a linking device�.

3. Click the New Hyperlink button onthe Hyperlinks palette.orChoose Style > Hyperlink > New.

4. Enter a destination name for thepalette to display.

5. Choose Page from the Type menu.6. Choose a page from the Page menu�.(The page names you entered into theExport File Name field in the PageProperties dialog box will be listedhere.)

7. Click OK. The new hyperlink with thedestination name you entered will nowbe listed on the Hyperlinks palette�.

TIP You could also have created a page des-tination with no text or item selected(omit step 2) and then later assignedthat page destination to some text oran item in the layout.

Pag

e-to

-Pag

eH

yper

link

22

Chapter 19


� A picture box is selected in a Web layout.

� A destination name is entered and a destinationpage is chosen from the Page menu in the NewHyperlink dialog box.

� The new hyperlinkdestination appears,bearing the name

that was entered onthe Hyperlinks palette.

Absolute vs. relative hyperlinksAn absolute hyperlink assigns either a completepath location for the destination file, including thename of the hard disk, or the completehttp://www... listing.When a browser attemptsto link to this destination, it has to go to theInternet to search for the appropriate Web path,which takes time. To preview getting to anotherWebsite via an absolute hyperlink using theHTML Preview button, your browser must beconnected to the Web.

A relative hyperlink includes only the path toa folder/directory within the current Website’sfolder hierarchy. It’s faster, because the browserneed only go to that folder/directory on the cur-rent Web server or hard disk to retrieve thedestination file.What’s more, you can previewgetting to a page in your Website linked via a rel-ative hyperlink even when your computer isoffline.

As a general rule, you should use an absolutehyperlink to link to a destination on anotherWebsite and a relative hyperlink to link to adestination in the current Website.

URL, page, and anchor destinations canalso be created via the Hyperlinks dialogbox. This can be done with or without anytext or item being selected in your layout.

To create hyperlink destinations usingthe Hyperlinks dialog box:1. Optional: Highlight some text or selecta text or picture box to become thelinking device.

2. Choose Edit > Hyperlinks�.

3. In the Hyperlinks dialog box, click Newto create a new destination.

4. Follow the steps under “To create aURL hyperlink” earlier in this chapterto complete options in the NewHyperlink dialog box, then click OK.

5. Repeat steps 3–4 to create additionaldestinations.

6. Click Save.TIP The destinations listed in the Hyperlinksdialog box will match the names listedon the Hyperlinks palette�.

TIP As with the Show buttons on theHyperlinks palette, you can use theShow menu in the Hyperlinks dialogbox to control how many destinationsare listed in the dialog box ata time.

The other buttons in the Hyperlinksdialog boxTo append hyperlink destinations fromanother project, click Append, locate aproject that contains hyperlink destina-tions, then click Open.

Click Duplicate to duplicate the currentlyselected hyperlink destination. Save thecopy under a new name.

Click Delete to delete the currentlyselected hyperlink destination.

Hyperlinks

Dialog

Box

23

Web Layouts


� In the Hyperlinks dialog box, click New to create anew destination.

� The same destination names appear inthe Hyperlinks dialog box (shown in theprevious figure) as on the Hyperlinks palette.

The restyling that you will be doing herewill affect all the hyperlink text on thecurrent page—but just the current page.Note: Since most browsers let users choosetheir own page and link colors, theirchoice may override yours.

To style hyperlink text:1. Choose Page > Page Properties(Cmd-Option-Shift-A/Ctrl-Alt-Shift-A).

2. In the Colors area�, choose new coloroptions from the Link and Visited Linkmenus.

3. Click OK. Note: Colors chosen forhyperlink text via the Style menu orColors palette override colors chosenvia the Link menu in the PageProperties dialog box.

You can choose which colors will be usedto represent hyperlinks and anchors in atext box in Web layouts (and PDF exports).These colors will display in the Quark-XPress layout but not in the exported file.

To change the anchor icon color for aWeb layout:1. Display a Web layout.2. Go toQuarkXPress (Edit, in Windows) >Preferences > Web Layout > General.

3. In the Hyperlinks area, click theAnchor Color square, choose a newcolor, click OK, then click OK to exitthe Preferences dialog box.

To change the anchor and/or hyperlinkicon color for a PDF export:1. Display a print layout that will beexported to PDF.

2. Go to QuarkXPress (Edit, in Windows) >Preferences > Print Layout > General.

3. In the Hyperlinks area, click the AnchorColor and/or Hyperlink Color square�, choose a new color, click OK, thenclick OK to exit the Preferencesdialog box.

Sty

leH

yper

link;

Cha

nge

Icon

Col

or

24

Chapter 19


� Make Colors: Link and Visited Link choices in thePage Properties dialog box.

� The Hyperlinks area of QuarkXPress (Edit, inWindows) > Preferences > Print Layout > General fora print layout

Creating image mapsImages can do more than just make aWebsite look nice—they also can be usedto create interactive image maps to linkusers to other pages or sites. To do this,first an image is divided into regions,which are called “hot areas,” and then eachregion is assigned a unique link�. If auser clicks a hot area, he or she is taken toanother Web page or site�. Image mapsare fun to use, and they look better thantext links!

Image maps are an HTML feature, butto code an image map directly in HTMLwould be very laborious. Instead, inQuarkXPress, you can create image mapsby defining hot areas over one or more pic-ture boxes (this doesn’t affect or changethe picture). Each hot area is assigned ahyperlink to another page in the same Weblayout or to another site on the Web. Then,when the Web layout is exported as anHTML file, QuarkXPress automatically cre-ates the code for the image map. To createan image map, follow the instructions thatbegin below.

A picture can contain one or more imagemap hot areas.

To create an image map with a URLlink:1. The Image Map XTension must beenabled before you begin (Utilities >XTensions Manager).

2. Display a Web layout and choose View >Guides (F7) so the newly created imagemap areas will be visible.

3. Optional: Select a picture box.

Create

Image

Map

25

Web Layouts


� The URL link for a selected hotarea in the image is listed at thebottom of the browser window.

� In this image map, each hot area represents oneof the 48 Continental States. When users click a state,they jump to another Web page.

Welcometo

TRAVELUSA

C lick on astate to gettravel info!


4. Choose the Rectangle or Oval ImageMap tool�, then drag across a picture.Optional: Shift-drag to constrain a rect-angle to a square or an oval to a circle.orChoose the Bézier Image Map tool,then draw a polygon over a picture(the same way you would draw a Béziertext or picture box). To close the box,click the starting point, or create thefinal point by double-clicking�.

Note: Any hot areas that extend outsidethe picture box will be cropped to theedges of the box when the page isexported.

5. To add a hyperlink to the hot area,keep the hot area selected, then:

Display the Hyperlinks palette, thenclick the New Hyperlink button�.orChoose Style > Hyperlink > New.orControl-click/Right-click the hot areaand choose Hyperlink > New.

6. In the New Hyperlink dialog box(�, next page):

Enter a name.

Choose URL from the Type menu.

Enter a URL in the URL field.orFrom the URL menu, choose a URL oran exported HTML file that has alreadybeen created and is listed as a destina-tion on the Hyperlinks palette.orClick Select/Browse, locate an exportedHTML file, then click Link/Open.

7. To designate where the linked Webpage will display, enter a Target desti-nation or choose a destination fromthe Target menu. If the Target field isleft blank, the target destination will beignored. A Target destination is neededonly if your Web page contains a frame-set.

Cre

ate

Imag

eM

ap

26

Chapter 19


� The Rectangle,Oval, and Bézier toolson the Image Maptool pop-out menu onthe Web Tools palette

� Click the New Hyperlinkbutton on the Hyperlinks palette.

� A hot area created with the Bézier Image Map tool

“_blank” displays the linked Web pagein a new unnamed window.

“_self” displays the linked Web page inthe same frame as the image map.

“_parent” displays the linked Web pagein the parent frame (window) of theimage map. If no parent exists, the linkwill be displayed in the same frame asthe image map.

“_top” displays the linked Web page inthe full browser window and eliminatesany frames.

8. Optional: Repeat steps 3–7 to createother hot areas on the same picture.

9. To preview the image map effect, see“To preview an image map or rollover”later in this chapter. The hot area bor-ders won’t display in the browser.

TIP QuarkXPress converts oval and Bézierhot areas into polygons. To control theprecision with which it does so (thenumber of points that the polygon willbe composed of), go to QuarkXPress(Edit, in Windows) > Preferences > WebLayout > Tools, click the Oval ImageMap or Bézier Image Map tool icon,then click Modify. In the Image MapProperties dialog box, enter a FlattenShape: Maximum Points value�.

TIP To create a hyperlink to an existingdestination, click a hot area on animage map, then click the destinationlink (or name, if your hyperlinksare being shown by name) on theHyperlinks palette.

TIP To link a hot area on an image mapto an anchor or to another page in thecurrent site, for step 6 on the previouspage, choose Anchor or Page from theType menu and choose an existing desti-nation from the Anchor or Page menu.

Create

Image

Map

27

Web Layouts


� The New Hyperlink dialog box

Use the Link to File dialog box to locate andlink to a local HTML file.

Commonly used URL protocols (http://, https://,ftp://, etc.), other existing URL destinations, and otherexported HTML files are listed on the URL menu.

Targetdestinations

� In the ImageMap Propertiesdialog box, specifythe maximum num-ber of points onpolygonal hot areas.

An image’s hot areas will move if the imageis moved and will be scaled if the imageis scaled. You can also edit an image mapdirectly, as in these instructions.

Beware! If a different (new) image isimported into a picture box that containshot areas, any existing hot areas and hyper-links in that picture box will be deleted!

To edit an image map:1. Make sure guides are showing (View >Show Guides or F7).

2. Select the picture box and the hot area.3. To resize a hot area, drag its handles.

orTo reshape a hot area, edit its points asyou would a standard Bézier box.orTo move a hot area, select it, move thepointer over the area�, then drag�.orTo delete a hot area, select it (makesure its handles are visible), then pressDelete/Backspace.

4. To edit a hyperlink, click the nameor link in the Hyperlinks palette, thenclick the Edit button at the top ofthe palette�.

5. In the Edit Hyperlink dialog box�, doany of the following: Edit the existingname; or for a URL, choose anotherURL from the menu or click the Selectbutton to locate a file to link to; or fora Page or Anchor link, choose anotherpage or anchor from the appropriatemenu.

6. Click OK.

Edi

tIm

age

Map

28

Chapter 19


� Click the Editbutton on theHyperlinks palette.

� Make changes in the Edit Hyperlink dialog box.

� ...then drag it to a newlocation.

� To reposition an existinghot area within an image, movethe pointer over the hot area...

Creating rolloversA rollover is an image on a Web pagewhose appearance changes when themouse is moved over it�. If a user clicksthe item, they’re linked to another Webpage. Rollovers are used as visual cues tohelp users find links on a page or to showthem additional information about a link,and are a fun way to add interactivity toWeb pages.

Rollovers can’t be produced in HTML;some programming help is required (usu-ally JavaScript). Fortunately, you can createrollovers right in QuarkXPress, and it’s nothard to do. First you select a default imageand a rollover image, then you choose ahyperlink to another page in the sameWebsite or in another Website.QuarkXPress does the rest for you.

To create a rollover:1. Select a picture� or select a text boxfor which the Convert to Graphic onExport option is on in Item > Modify,then choose Item > Basic Rollover >Create Rollover.orControl-click/Right-click a pictureand choose Basic Rollover > CreateRollover.

2. In the Rollover dialog box�, the pathand file name for the Default Imagewill be filled in already—that’s thepicture that’s currently selected. If youchange this information, a differentpicture will be imported into the box.

To choose a Rollover Image, clickSelect/Browse, locate an image toappear when the image is rolled over,then click Open.

3. For the Hyperlink destination:From the Hyperlink menu, choose aURL or HTML file that’s currentlybeing used as a link in the active layout.or

Create

Rollover

29

Web Layouts


� Two modes in a rollover


� Select a picture.

� In the Rollover dialog box, choose a Rollover Imageand a Hyperlink. Use the Select/Browse buttons to locatethe image files quickly.

A list of option buttons When the mouse is movedover one of the buttons, itsappearance changes. If auser clicks the item, they’relinked to another page.

Click Select/Browse, then chooseeither an HTML file on your hard driveor a URL.

4. Click OK�. To preview the rollover,see the instructions on the next page.

TIP If the rollover image is larger than thedefault image, the rollover image willneed to be scaled and cropped to fit thepicture box that contains the defaultimage. See the next set of instructions.

To view a rollover image:Select an item that contains a rollover, thenchoose Item > Basic Rollover > RolloverImage.orControl-click/Right-click an item that con-tains a rollover and choose Basic Rollover >Rollover Image.

Now that the rollover image is visible�,you can move, scale, or crop it to make itfit better in the picture box.

TIP When a default image or rolloverimage is displayed and selected, youcan choose an export format for it inItem > Modify.

To edit a rollover:1. Select the item that contains a rollover.2. Choose Item > Basic Rollover > EditRollover.orControl-click/Right-click the item andchoose Basic Rollover > Edit Rollover.

3. In the Rollover dialog box, changethe Default Image, Rollover Image, orHyperlink destination.

4. Click OK.TIP You can also edit a rollover hyperlinkby clicking the destination listing onthe Hyperlinks palette, clicking the Editbutton, and then changing the URL.

Vie

wR

ollo

verIm

age;

Edi

tRol

love

r

30

Chapter 19


Linking pagesTo create a rollover that links two pages of aWeb layout, start by exporting those two pages.Next, display the first page, and follow the stepsto create a rollover. And finally, for step 3, fromthe Hyperlink menu in the Rollover dialog box,choose the export file name of the second pageas the link for the rollover.

Rollover icon

Hyperlink icon

� A default rollover image

Default Image icon

Rollover icon

� When the rollover image is displayed, the Hyperlinkand Default Image icons are hidden; only the Rollovericon remains visible.

Rem

ove,Preview

Rollover

31

Web Layouts


� In the browser, the normalstate of a rollover displays whenthe pointer is not over the item.

� In the browser, if you positionthe pointer over a rollover, thehand pointer and the substituterollover image display.

Follow these instructions if you want toremove a rollover from an item withoutdeleting the item or its contents.

To remove the rollover function froman item:1. Select the picture box that containsa rollover.

2. Choose Item > Basic Rollover >Remove Rollover.orControl-click/Right-click and chooseBasic Rollover > Remove Rollover.

TIP You could also, of course, delete apicture box containing a rollover alto-gether; the rollover will be deletedalong with the item.

To preview an image map or rollover:1. Display a page that contains an imagemap or rollover item.

2. Click the HTML Preview buttonat the bottom of the Web projectwindow.

3. In the browser, position the pointerover the image map hot area or roll-over (the hand pointer will display).For a rollover, the rollover imageshould appear�–�. Click the imagemap area or rollover. If the browser canlocate the link page, that page will dis-play. If the browser can’t locate the linkpage or if the link is a URL and thebrowser isn’t currently connected tothe Internet, an alert box will display.Click OK, then click back in a Quark-XPress project window.

Creating cascading menusWhen the user rolls over an area of a Webpage that contains a cascading menu, onlythe top-level menu items on the cascadingmenu are visible. If the user rolls over amenu item, the submenu items under thatmenu item are revealed (they cascade). Ifthe user chooses a submenu item to whicha link has been attached, that link becomesactivated�–�. Aside from being fun touse, cascading menus allow a Web pagedesigner to orchestrate how much infor-mation appears onscreen and keep a pagefrom looking cluttered.

To create a cascading menu, you’ll definemenu and submenu items and the menugroup’s properties. Then later, you’llattach the menu group to an item.

To define a cascading menu group:1. Choose Edit > Cascading Menus.2. Click New. The Edit Cascading Menudialog box will open.

3. Enter a Menu Name for the cascadingmenu group. This is just a definition,not the actual menu items that willappear on the Web page.

Use options in theMenu Properties paneof the Edit Cascading Menu dialog box tostyle the cascading menu (�, next page):

1. From the Background Color menu,choose a background color to appearbehind the main menu items.

2. From the Style Sheet menu, choose astyle sheet to be applied to all themenu items.

3. In the Text Inset field, enter a value tobe used to offset the first main menuname from the left edge of the box thatholds the menu, and to further indentany submenu items.

4. In the Menu Orientation area, clickHorizontal or Vertical for the axis onwhich the menu and submenu itemswill be arranged.

Defi

neC

asca

ding

Men

uG

roup

32

Chapter 19


� This text item stays visible onscreen. A cascadingmenu (not currently visible) is attached to it.

� When the pointer is over anitem that contains a cascadingmenu, the menu items display.

When the pointer isover a menu item,submenu items display.

5. In the Box area, enter Width andHeight values for the overall cascadingmenu, or leave the choice as “auto”to have the program calculate themenu size based on character countand font size of the text it contains.

6. Optional: In the Border area, enter aLine width and choose a Color for aborder to enclose every listing on thecascading menu.

Optional: In the Separator area, entera Line width and choose a Color for aseparator line to be inserted betweeneach submenu item.

7. In the Opening Animation area, fromthe Direction menu, choose the direc-tion in which you want menu items tocascade. If None is chosen, they willappear all at once (they won’t cascade).

8. When a direction other than None ischosen from the Direction menu, theSpeed field becomes available. Enter avalue (0–10,000 milliseconds) for thespeed at which submenu items will dis-play upon rollover. At a Speed setting of0, there will be no delay.

9. In the Offset fields, enter X and Y valuesto offset the cascading menu downwardand to the right so it doesn’t obscurethe object it’s attached to. These valuesare in addition to the Text Inset value.

Use options in theMenu Items pane of theEdit Cascading Menu dialog box� to con-trol the wording, links, and rollover effectfor the cascading menu.

1. Click New, and choose Menu Itemfrom the menu.

2. In the Menu Item Name field, selectthe default text and replace it with thename of your menu item. Main menunames usually don’t have hyperlinksattached to them.

3. Click the new main menu name inthe Menu Structure window and then,

Defi

neC

ascadingM

enuG

roup

33

Web Layouts


� Options in theMenu Properties pane of the EditCascading Menu dialog box control the appearance ofthe cascading menu.

� Options in theMenu Items pane of the EditCascading Menu dialog box control the content ofthe menu, including submenu items and hyperlinks.


from the New menu, choose SubmenuItem�.

4. Select the default text in the SubmenuItem Name field and replace it with thename of your submenu. Note: You can’tuse the same name for menu and sub-menu items.

5. Press Tab, or click in the Hyperlinkfield. This field controls which link theWeb user will get to when he or sheclicks the submenu item in the browser.

Enter a URL or HTML file name.orChoose an existing link from theHyperlink menu (only names ofexported HTML files, URLs, andanchors currently being used as linksin the active layout will appear onthis menu).orClick Select/Browse, locate and clickan existing exported HTML file or URLto use as the hyperlink, then click Open.

6. To add more submenu names toappear under the current menu item,repeat steps 3–4. Any additional sub-menu items will be indented underthe currently highlighted menu item.

7. To add another menu item, click amenu item in the Menu Structureswindow that you want the new one toappear below (the menu items willappear in this order in the cascadingmenu). Click New and choose MenuItem. Follow steps 2–5, above, to createthe menu item and any submenu items.

8. In the Menu Item Mouseover area,choose a font color and a backgroundcolor that will display in the browserbehind the text when the user’s pointeris over a menu item.

9. In the Submenu Item Mouseover area,choose a font color and a backgroundcolor that will display behind the textin the browser when a user’s pointer is

Defi

neC

asca

ding

Men

uG

roup

34

Chapter 19


� You can add, duplicate, or deleteselected menu items from a cascadingmenu. Here, we’re adding a New:Submenu Item to the menu group.

over a submenu item. Theoretically, adifferent highlight color could be cho-sen for each item in a cascading menu.

TIP To delete a menu or submenu itemfrom the Menu Structure window,select it, then click Delete. Or clickDuplicate to duplicate it.

10. Finally, click OK. At this point you caneither create another cascading menugroup by clicking New and then choos-ing options in the Menu Propertiesand Menu Items panes of the EditCascading Menu dialog box, or youcan click Save to close the CascadingMenus dialog box and be done with it.Now follow the next set of instructionsto attach the menu group to an itemin your Web layout.

In the long-winded instructions that youjust followed, you created a cascadingmenu group. The last step is to attach yourcascading menu group to an object in yourlayout (usually text or an image) that willstay visible and stationary onscreen andthat identifies the cascading menu. Thisway, a user will be tempted to roll over thatarea, and the cascading menu that you’veslaved over will appear!

To attach a cascading menu to an item:1. Create or select an item. If a text item

doesn’t have a Rasterize (camera)icon, choose Item > Modify and checkConvert to Graphic on Export, thenclick OK.

2. From the Item > Cascading Menu sub-menu, choose a cascading menu name.orControl-click/Right-click the itemand choose from the Cascading Menusubmenu.

The Cascading Menu icon willappear in the upper right corner ofthe item�–�.

Attach

Cascading

Menu

toItem

35

Web Layouts


Mind your sizesA cascading menu will display in the browser onlywhen a user’s pointer is over the bounding boxof the item that it’s attached to. By scaling thebox in QuarkXPress before converting it to agraphic on export, you can control how close auser’s pointer must be to it before the cascadingmenu will be revealed. The smaller the box,the closer the viewer’s pointer must be for thecascading menu to display.

� This is the cascading menu in a browser when theviewer’s pointer is close to the box that contains thewords “West Coast.”

� A cascading menu is attached to this item in theWeb layout, as indicated by the Cascading Menu icon.Make the box relatively small and be sure it doesn’toverlap any other items (which may also have cascad-ing menus attached to them) to avoid confusingthe viewer as to which text belongs to which menu.

To preview a cascading menu:1. Display the page in your Web layoutthat contains a cascading menu, thenclick the HTML Preview buttonat the bottom of the project window.

2. In the browser, roll the pointer overa menu name to watch the submenuitems cascade—Ta-Dah!(�, previouspage)—then roll over any submenuitem and watch it change colors. (Youchose that color in the Edit CascadingMenu dialog box.)

3. Click back in the QuarkXPress projectwindow.

To edit an existing cascading menu:1. Choose Edit > Cascading Menus.2. Click an existing cascading menuname on the list, then click Edit, or justdouble-click a name.

3. Choose options in the Menu Propertiesand/or Menu Items panes of the EditCascading Menu dialog box. Whenyou’re done, click OK, then click Save toclose the Cascading Menus dialog box.

When you remove a cascading menu froman item, the item’s contents are left intact.The cascading menu group also remainsin the project, and can be edited andattached to any item at any time.

To remove a cascading menu froman item:1. Choose the Item or Content tool, thenselect an item that has a cascadingmenu attached to it.

2. Choose Item > Cascading Menu >Remove Cascading Menu.orControl-click/Right-click the selecteditem and choose Cascading Menu >Remove Cascading Menu.

The cascading menu icon will disappearfrom the item.

Pre

view

,Edi

t,R

emov

eC

asca

ding

Men

u

36

Chapter 19


Cascading Menus dialog box optionsTo append a cascading menu group or groupsfrom another project, click Append, locate a pro-ject that contains cascading menu groups, thenclick Open.

Click Duplicate to duplicate the currentlyselected cascading menu group. Save the copyunder a new name.

Click Delete to delete the currently selectedcascading menu group.

Creating formsViewers use forms� on a Web page toenter information, check options, or makechoices from a list. Then they click a Submitbutton to send the data to the Web serverfor processing. Forms for data collectioncan be used to order products, requestdocuments, perform searches on a Website,or send user information to a Website. TheHTML language supports form tags thatcan be used on a Web page. The Webbrowser reads the form tags and createsthe field, box, or button. A form box is thecontainer that holds text fields, buttons, etc.

Data can be entered or chosen on a formin a variety of ways, such as via text entryfields, lists, pop-up menus, check boxes,or radio buttons, along with the requisiteSubmit and Reset buttons. QuarkXPresscalls these various parts of a form “con-trols,” and provides several tools on theWeb Tools palette for creating them�.The tool name matches the kind of formcontrol that it creates. For example,the Pop-up Menu tool creates a pop-upmenu control.

A server-based script or application isrequired to process form data. Most often,CGI (Common Gateway Interface) scriptsare used for this purpose. QuarkXPressdoesn’t provide the means to create thesescripts; a third-party application is required.Talk with your Webmaster to learn moreabout the creation of CGI or other server-based scripts.

To create a form box:1. Choose the Form Box tool fromthe Web Tools palette.

2. Position the pointer over a blank areaof a Web layout, then drag to create aform box. Form boxes can’t overlapeach other.

TIP Use Item > Content > Form to convertan existing item into a form box. Anyexisting box content will be deleted!

Create

Form

Box

37

Web Layouts

� Various types of form controls within a form boxon a Web page

Pop-up menu

Button

Text field

Radio buttonCheck box

Form box

� The tools on the Web Toolspalette are used to create varioustypes of controls for Web pages.

Rectangle Image Map

Form Box

Text Field

Button

Image Button

Pop-up Menu

List Box

Radio Button

Check Box

Rollover Linking*

Rollover Unlinking*


Opening the Web Tools paletteUnless you close it, the Web Tools palettedisplays automatically when a Web layout isdisplayed. To open the palette if it was closed,choose Window > Tools > ShowWeb Tools.

*These tools arenot covered in thisQuickStart Guide.

To choose options for a form box:1. Choose the Item or Content tool, thenclick a form box.

2. Choose Item > Modify (or Control-click/Right-click and choose Modify),then click the Form tab�.

3. Optional: Change the Name. Youcan leave the default name as is, butremember that each form box musthave a unique name.

4. Choose an option from the Methodmenu to be used for submission ofform data:

Post to send the user-entered data as aseparate packet to the Web server. Thisis usually the preferred option.

Get to append the user-entered data tothe end of the URL or to the end of thefile specified by the URL in the Actionfield. The Get method may appendexcess data, thus exceeding the URLlength limit and resulting in data loss.

For

mB

oxO

ptio

ns

38

Chapter 19


� This is the Formpane in theModify

dialog box for a form box.

5. From the Target menu, choose whereyou want any server-returned data (usu-ally an HTML page) to display. Note:These frame targets are needed only ifyour form is embedded withina frameset on your Web page. Choose:

None (the empty line on the pop-upmenu) or “_self” to load the returnpage into the same frame or windowthat holds the form.

“_blank” to load the return page intoa new, unnamed window.

“_parent” to load the return page intothe parent frame, if there is one, ofthe form.

“_top” to load the return page intothe full browser window, replacing anyframesets.

6. If Post was chosen for the Method instep 4, you need to choose a MIMEencoding option (that’s short for Multi-purpose Internet Mail Extension).

MIMEs are helper applications that aidin the translation of data. Choose oneof the following:

“urlencoded” to make the user-datasubmitted to the Web server follow theurlencoded specifications so the datacan be used on most operating systemplatforms and software applications.

“form-data” to alert the Web server thatthe user-data is being submitted as aseparate attached file and should beencoded as multipart form-data. Thisway, the server will read the multipleparts of the form submission and notjust the name of the attached file.

“plain” to specify that user-data submit-ted to the Web server not be encoded.

7. In the Action field, enter a URL for theCGI script that will process the user-data submitted to the Web server.orClick Browse, then locate and open anexisting script file.

8. In the Form Validation area, choose theresponse method for a submitted formthat lacks an entry in a required field:

Click Error Page to have an existingHTML page display in response to anerror. Enter a URL for that page; orchoose an HTML file from the menu;or click Browse, then locate an HTMLfile (its path will be entered automati-cally in the URL field).orClick Dialog Message, then enter analert message in the text field or leavethe default message as is. The “<miss-ing field>” tag allows the name of thefirst empty required field to be enteredautomatically into an alert message.

9. Click OK.

Form

Box

Options

39

Web Layouts


You can specify dimensions for the formbox that is created automatically when anyform control tool is used (not the Formtool). The settings you specify will remainin effect until they’re changed.

To choose default dimensions forform boxes:1. Choose QuarkXPress (Edit, inWindows) > Preferences > Web Layout >Tools, then click the Form Box toolicon at the bottom of the ToolDefaults window.orDouble-click the Form Box tool on theWeb Tools palette.

2. Click Modify.3. Enter default Width and Heightdimensions for the form box inpixels�, click OK, then click OK toclose the Preferences dialog box.

For

mB

oxTo

ol;F

orm

Gui

delin

es

40

Chapter 19


� Choose Form Tool Preferences in QuarkXPress (Edit, in Windows) >Preferences > Web Layout > Tools.

Form can-do’s� When you move a form box, any formcontrols within the box will move alongwith it.

� A control can be duplicated within thesame form box, provided there’s suffi-cient room for the duplicate in the box.

� You can scale a form box as you wouldany other box (click the box with theItem or Content tool, then drag anyhandle).

� Form boxes can be positioned on anylayer on a page; layer features are fullyfunctional.

� Form boxes are deleted in the same wayother standard items are: Click the boxwith the Item or Content tool, then pressDelete/Backspace or Cmd-K/Ctrl-K.

� To copy a control, Copy or Cut it usingthe Item tool, then Paste it into its cur-rent form box or into another formbox (the box must be large enough toaccommodate it). A control can also bedragged from one form box to another.

� The Group command is available forcontrols inside a form box.

� Form boxes can be created in table cells.

� To apply a background color and shadeto a form box, use the Colors palette orItem > Modify > Box. Some form con-trols (e.g., radio buttons, check boxes)have opaque white backgrounds. ImageButton, Radio Button, and Check Boxcontrols can have a background of None.

Form can’ts� Controls are always contained insidea form box—they can’t be hangingaround loose somewhere.

� A control can’t overlap or reside insideanother control. You’ll get an alertprompt if you try to draw a new controlinside an existing control. Form boxescan’t overlap each other, even if they’reon different layers. You can duplicateform controls, but the duplication mustnot result in any overlapping.

� Text can’t be entered directly into, norcan pictures be placed directly within, aform box or form control. You can, how-ever, place text or picture boxes inside aform box or form controls.

The other form toolsThe Text Field, Button, Image Button,Pop-up Menu, List Box, Radio Button,Check Box, and File Selection tools on theWeb Tools palette can be used either tocreate a control within a whole new formbox or to add controls to an existing formbox. If you drag with any of these tools ina blank area of your layout, a new formbox will be created in the default size, withthe control inside it�. If you drag insidean existing form box, the control will beadded to, and contained within, that box.More than one control can be createdwithin an existing form box, provided youdon’t try to draw a new control on top ofan existing one.

Form

Guidelines;O

therF

ormTools

41

Web Layouts


The visual indicator foran image button control

Editing controlsTo edit an existing control, select the controlbox—not the surrounding form box—chooseItem > Modify, click Form, then change any ofthe settings.

� The visualindicator for a form box

Visual indicators for forms

This page and the next 11 pages of thischapter are devoted to form controls.

Text field controls are added to a Webpage to allow the user to enter characters,or to type a password that shows up in thefield as a series of asterisks.

To create a text or password fieldcontrol:1. Choose the Text Field tool fromthe Web Tools palette.

2. Drag in a blank area of the Web page.orDrag inside a blank area of an existingform box.

3. Choose Item > Modify (or Control-click/Right-click the control and chooseModify), then click the Form tab�.

4. Change the Name or leave the defaultname as is. Each control must have aunique name.

5. Choose one of these options from theType menu:

Text-Single Line to create an entry fieldthat can contain only one line of text.

Text-Multi Line to create an entry fieldthat can contain multiple lines of textand a scroll bar.

Password to create an entry field thatwill display a user-entered passwordas a series of asterisks in Mac OS X,bullets in Windows. Note: A passwordfield control doesn’t perform theactual processing of password protec-tion; that processing is a function ofthe CGI script.

Hidden Field to create a text field thatwill be invisible to the user but that cancontain pre-entered text to be submit-ted along with the form data. No otheroptions are available when HiddenField is chosen.

Text

orP

assw

ord

Fie

ldC

ontr

ol

42

Chapter 19


� The Form pane in theModify dialog box for a TextField control

6. Enter a value in the Max Chars field tospecify the maximum number of char-acters the field can hold. Leave thisfield blank to have the Web browserdetermine the maximum number ofcharacters.

7. Optional: If you chose Text-Multi Linefor step 5, you can check Wrap Text tohave multiple lines of text automati-cally wrap within the multi-line textfield control.

8. Optional: Check Read Only to preventthe user from editing any text in thetext field control when it’s displayed ina browser.

Optional: Check Required to specifythat the text field control must containan entry before the submitted form canbe considered valid. With this optionchecked, if the user tries to submit theform with a required field empty, thechosen Form Validation method will beactivated (see step 8 under “To chooseoptions for a form box” previously inthis chapter).

9. Click OK�–�.

TextorP

assword

Field

Control

43

Web Layouts


� These two text field controls are inside a form boxin a Web layout. The explanatory text is in separate,standard boxes.

� A text field control with Text-Multi Line chosen(note the presence of a scroll bar)

Shifting the scaleIn HTML, text field controls are sized based onthe character count in the field as well as thefont size specified in the browser preferences,whereas in a QuarkXPress Web layout, controlsand other items are sized based on pixels. As aresult, a control that you create in QuarkXPresswill probably look different in scale or even posi-tioning when viewed in a browser.

In a browser, if a user enters more textin a field than the field can display, theentered text scrolls to the left. When thishappens, the user doesn’t see the completeentry and is more likely to make an inputerror. Whenever possible, make sure yourcontrols—particularly Text-Single Linecontrols—are wide enough to display auser’s complete entry.

To scale a control:Choose the Item or Content tool, clicka control, then drag a handle�–�. Asingle-line text field control can only beresized horizontally; a multi-line text fieldcontrol can be resized in any direction,using any handle.

To move a control:Choose the Item tool or hold down Cmd/Ctrl if the Content tool is chosen, thendrag the control to a new position withinthe form box. You can select and thenmove more than one control at a time.

TIP You can’t drag a control or any of itshandles outside its form box.

To delete a control:Click a control using the Item tool, thenpress Delete/Backspace.orClick a control using the Content tool,then press Cmd-K/Ctrl-K.

Sca

le,M

ove,

Del

ete

Con

trol

44

Chapter 19


� Select a control ...

� ... then drag a handle to scale it.

It’s not the same!You align your controls nicely in QuarkXPress,and then view your Web page in a browser—andlo and behold, the alignment looks out of whack.To help avoid this problem,make sure the controlsdon’t overlap each other or overlap any noncon-trol items (e.g., standard text or picture boxes).Also, align your items carefully using Item >Space/Align or using ruler guides in conjunctionwith View > Snap to Guides.

A submit button control is used to senduser data from a Web page form to theWeb server. A reset button control is usedto clear user-data from fields and boxes ina form so a user can reenter data, if needbe. Submit and reset buttons must becreated within the same form box as thecheck box, text field, and radio buttoncontrols; otherwise they won’t know whichdata to submit or reset. The submit andreset button functions can be previewedonly in a browser.

To create a submit or reset buttoncontrol:1. Choose the Button tool from theWeb Tools palette.

2. Click a blank area of a Web page.orClick a blank area in an existingform box.

3. Choose Item > Modify (or Control-click/Right-click the control andchoose Modify from the contextmenu), then click the Form tab�.


5. From the Type menu, choose the kindof button you want to create:

Reset restores all controls within a formbox to their default values (usually ablank state).orSubmit sends the data contained withina form box to the target CGI script.

6. Click OK�.

7. Choose the Content tool, click thecontrol, then enter the desired buttonname. The button will automaticallyscale to fit the length of the name.

You can’t style the button text. It will bedisplayed in the browser’s default sansserif font, as specified by the browserpreferences.

Subm

it,ResetB

uttonC

ontrol

45

Web Layouts


� Here, the Submit and Reset buttons andtwo text field controls are inside the same formbox. The Submit button sends text that theuser enters into the text field controls to theWeb server. The Reset button clears any userdata from the text field controls. The othertext was entered into two standard text boxes.

� This is the Form pane in theModify dialog box fora button control. In this case, a submit button will becreated.

Enter arrival date:

Enter return date:

Submit Reset

An image (picture) can be used as asubmit button control� instead of text.

To create a submit button controlusing an image:1. Choose the Image Button tool.2. Drag in a blank area of the Web page,or inside an existing form box.

3. Choose File > Import Picture, locate apicture file, then click Open. Scale thepicture as desired.

4. Choose Item > Modify (Cmd-M/Ctrl-M)(or Control-click/Right-clickthe control and choose Modify fromthe context menu), then click theExport tab�.

5. From the Export As menu, choose agraphics file format: JPEG, GIF, SWF,or PNG.

6. In the Export To field, enter a name tocreate an additional folder/directoryto hold the image, or leave the default“image” folder selected. Any foldersthat have already been created will belisted on the Export To menu.

7. In the Alternate Text field, enter a textdescription that can be substituted forthe image, or leave the default text as is.Alternate Text is used when image dis-play is turned off for the browser, and isalso used by visually impaired users tohelp them navigate through asubmit!site.

8. The remaining options in the Exportpane will vary depending on whichExport As format you chose in step 5.

For JPEG, choose an option from theImage Quality menu: Highest, High,Medium, Low, or Lowest. The higherthe quality setting, the less the imagewill be compressed but the larger its filestorage size and the longer its down-load time. Check Progressive to havethe image display in progressively moredetail as it downloads.

But

ton

Con

trol

Usi

ngan

Imag

e

46

Chapter 19


� To create this button, we created a buttonshape and text in Adobe Illustrator, savedthe file as a GIF, created an image buttoncontrol in QuarkXPress, and then importedthe .gif file into the image button control box.

� This is the Export pane of the Modify dialog box foran image button control, with JPEG chosen from theExport As menu.

new

orFor GIF �, check Use Dithering tohave any image colors that aren’t foundon the browser palette display as acombination of two colors. Check UseInterlacing to have the image displayin progressively more detail as it down-loads. And choose an option fromthe Palette menu (Web-safe, Adaptive,Windows, or Mac OS) to be used forreducing the number of colors in theimage to the 256 colors that a browsercan display. We recommend choosingWeb-safe, since this palettecontains only those colors used by boththe Navigator and Explorer browsers.orFor SWF, choose a Background:Opaque, Transparent, or Window.orFor PNG �, click True Color to pre-serve the maximum possible number ofexisting image colors for display in thebrowser, or click Indexed Color to limitthe number of image colors to 256.If you clicked Indexed Color, you cancheck Use Dithering to have any imagecolors that aren’t found on the browserpalette display as a combination of twocolors; and choose an option fromthe Palette menu (Web-safe, Adaptive,Windows, or Mac OS) to be used forreducing the number of colors in theimage to the 256 that a browser can dis-play. Web-safe is a good choice, sincethis palette contains only those colorsused by both the Safari and Explorerbrowsers. Check Use Interlacing tohave the image display in progressivelymore detail as it downloads.

9. Click OK.

Button

ControlU

singan

Image

47

Web Layouts


� This is the Export pane of the Modify dialog box foran image button control, with GIF chosen from theExport As pop-up menu.

� This is the Export pane of the Modify dialog box foran image button control, with PNG chosen from theExport As menu.

Renaming a controlEach and every control to be used on a Webpage must have a unique name. To rename animage button or any other type of control, selectthe control, go to Item > Modify > Form, changethe Name, then click OK.

new

Pop-up menus and scroll lists on a Webpage allow users to make choices or navi-gate to supplementary information. A listcontrol offers several options at a time,whereas a pop-up menu has to be clickedin order for its contents to be revealed.

To create a pop-up menu or listcontrol:1. Choose the Pop-up Menu tool orthe List Box tool from the WebTools palette.

2. Click a blank area of the Web page.orClick a blank area in an existing formbox.

3. With the pop-up menu control stillselected, choose Item > Modify (orControl-click/Right-click the controland choose Modify from the contextmenu), then click the Form tab�–�.

4. Change the Name or leave the defaultname as is. Remember, as we’ve saidbefore, each control must have aunique name.

5. From the Type pop-up menu, choosePop-up Menu to create a pop-up menucontrol, or choose List to create a scrolllist control. Either way, the resultingeffect can be previewed only in abrowser.

6. Choose an existing menu set from theMenu pop-up menu, or choose New tocreate a new menu set. For more infor-mation about menu sets, see the nextsection.

7. Optional: If you chose List in step 5,above, check Allow Multiple Selectionsto enable users to choose more thanone item at a time on the scroll list.

8. Optional: Check Required to requirethat the user make a selection from thepop-up menu or list before the submit-ted form will be considered valid. Ifthe user attempts to submit the form

Pop

-Up

Men

uor

List

Con

trol

48

Chapter 19


� This is the Form pane of theModify dialog box fora pop-up menu control.

� This is the Form pane of theModify dialog box fora list box control.

without making a selection, the chosenForm Validation error method will beactivated.

9. Click OK�.

Note:We recommend that you alsocreate a separate text box containinginstructions on how and why the usershould use the pop-up menu or listcontrol, and place this text box nextto the control.

Follow the instructions on the nextpage to create the text content for thelist or pop-up menu control.

TIP To scale a list control vertically, selectthe control, then move the top orbottom midpoint handle. A pop-upmenu control can’t be resized manu-ally. This type of control is scaledautomatically to fit the largest textentry in the applied menu set.

TIP A list control will have a scroll bar onlyif the chosen menu set items overflowthe current list box in the QuarkXPressWeb layout.

Pop-U

pM

enuor

ListControl

49

Web Layouts


� These list box and pop-up menu con-trols use the same menu set, so the sameentry names are available in both. Thedefault entry in this menu set is “aboutus.” It displays on the collapsed pop-upmenu box and will also be highlighted inthe list box when the Web page is viewedin a browser. (Instructions for creatinga menu set begin on the following page.)

List boxcontrol

Pop-upmenucontrol

List controls and pop-up menu controlsare the containers for lists of items a userwill choose from. A menu set provides thatlist of items to a control, along with valuesor URL addresses for each item.

To create a menu set:1. Choose Edit > Menus, then click New.

orSelect a pop-up menu or list control,choose Item > Modify > Form, thenchoose Menu: New.

2. Type a Name for the set and checkNavigation Menu if the items to becreated will be used to link a user toanother Web page�.

3. Click Add, then enter a name for theindividual item.

4. If you checked Navigation Menu instep 2, above, and you want the menuitem to link the user to another page,enter a valid URL or path for that Webpage in the URL field�. To have thepath name be entered automatically,choose a file name from the URL pop-up menu or use the Select/Browse but-ton to locate an existing external file.Only names of exported HTML files,URLs, and anchors that are currentlybeing used as links in the active layoutwill appear on the URL pop-up menu.

If you didn’t check Navigation Menuin step 2, enter a Value for the item.The information entered into theValue field will be sent to the Webserver when the item is selected andthe form is submitted�.

5. Check Use as Default to have the cur-rent menu item be highlighted on thelist when viewed in a browser. In a pop-up menu control, this default menuitem will be the only visible item whenthe pop-up menu is collapsed. You canalso specify a default item in the mainEdit Menu dialog box (see step 7).

Cre

ate

Men

uS

et

50

Chapter 19


� Use the Edit Menu dialog box to create a menu set.With Navigation Menu checked, each menu item mustcontain a URL as its Value.

� With Navigation Menu checked in the Edit Menudialog box, you can enter a URL in theMenu Itemdialog box for the current menu item to link to.

� With the Navigation Menu option unchecked in theEdit Menu dialog box, you can enter Value data in theMenu Item dialog box to be sent to the Web server whenthe current menu item is selected by a user in the browser.

The other buttonsIn the Edit Menu dialog box, click Duplicateto copy a selected item; or click Edit (or just dou-ble-click the item name) to edit a selected item;or click Delete to delete a selected item.

In the Menus for [project name] dialog box,click Edit to edit a selected menu set; or clickDuplicate to copy a selected menu set; or clickDelete to delete a selected menu set.

6. Click OK�.

7. Optional: Click in the Default columnfor an item to make it the currentdefault for a control that uses thismenu set.

8. Click OK, then click Save to save themenu set. If you’re in the Modify dialogbox, click OK to exit.

Next, we’ll show you how to create aBrowse button. A user will click this buttonwhen they’re required to locate and selecta file to be submitted with their form to aWeb server.

To create a separate file selectioncontrol:1. Choose the File Selection tool (it’son the Form Box tool pop-out menuon the Web Tools palette).

2. Drag in a blank area of the Web page.orDrag in a blank area inside an existingform box�.

3. Choose Item > Modify (Cmd-M/Ctrl-M)(or Control-click/Right-clickthe control and choose Modify fromthe context menu), then click theForm tab�.


5. Optional: In the Accept field, enter thenames of MIME types, separating thenames with a comma. This list willbe used by the Web server to help itinterpret the separate file that will besubmitted with the form.

6. Optional: Check Required to make itmandatory for the user to click Browseand choose a file to be submitted withthe form.

7. Click OK.

File

Selection

Control

51

Web Layouts


� The new menu item from figure � on the previouspage appears in the Item Name column in the EditMenu dialog box.

� This is the Form pane of theModify dialog box for afile selection control.

� Drag with the FileSelection tool to create abrowse button control.

Users can select only one option fromamong a group of radio buttons, whereasthey can check as many check boxes asthey like (that’s how they work in dialogboxes, too).

To create a radio button or check boxcontrol:1. Choose the Radio Button tool orthe Check Box tool from the WebTools palette.

2. Drag in a blank area of the Web page.orDrag in a blank area inside an existingform box. For radio button controlsto be in the same group, they mustbe created within the same form box.

3. With the control selected, choose Item >Modify (or Control-click/Right-clickthe control and choose Modify fromthe context menu), then click theForm tab�–�.

4. Change the name or leave the defaultname as is. Each check box controlmust have a unique name, whereasradio buttons require a group name. Ifyou want radio button controls withinthe same form box to be in the samegroup (e.g., to ensure that only onebutton in the form can be highlightedat a time), they must all use the sameGroup name.

TIP If you’ve created several radio but-tons, you can select them, chooseItem > Modify > Form, and thenenter a name for the whole group.

5. From the Type menu, choose “Checkbox” to create a check box control, orchoose “Radio button” to createa radio button control.

Rad

ioB

utto

nor

Che

ckB

oxC

ontr

ol

52

Chapter 19


� This is the Form pane of theModify dialog box fora radio button control.

� This is the Form pane of theModify dialog box fora check box control.

6. Enter a Value to be sent to the Webserver when the control is selectedand the form is submitted. The Valueinforms the data-controlling scriptwhat the chosen option signifies(e.g., a “yes” to a question or anamount from a category).

7. Do any of the following optional steps:For a check box control, check InitiallyChecked to have the current control bechecked when the Web page initiallydisplays or the form is reset.

For a radio button, check Use AsDefault to have the current button con-trol be selected when the Web pageinitially displays or the form is reset.In a group of radio buttons, only onebutton can be preselected at a time.

Check Required to require that thecontrol be clicked or checked beforethe submitted form will be consideredvalid. If the user tries to submit theform without the required selection,the chosen Form Validation method willbe activated.

8. Click OK�.

9. Enlarge the box that holds the controlby dragging any of its handles (thecontrol can’t extend outside the formbox). Choose the Content tool, thenenter text to identify the button orbox�. The text can be styled orindented using commands on the Stylemenu or the Measurements palette.orEnter text into a separate text box, andthen align that box with the controlbox�.

Radio

Button

orC

heckB

oxC

ontrol

53

Web Layouts


� These are radio button and check box controls withina form box on a Web page. Submit sends the valuethat was entered in the Value field in Item > Modify >Form for the radio button controls that are clicked andthe check box controls that are checked. Reset unhigh-lights and set all the controls in the form box back totheir default state.

� Enter text inside the control box...

� ...or enter text into a separate box.

Creating meta tagsWhen generating a search list and index-ing Web pages, Web search engines usethe first lines of text on a Web page as thedescription for that page. Attaching a metatag to a Web page—an HTML tag thatdescribes the content of the page—givesyou control over what text a search enginewill examine, and helps prevent your pagefrom being described and categorizedincorrectly. If your Web page is properlydescribed and indexed on a search list,Web users will be able to find your sitemore readily via the search engine, andhopefully more traffic will be attracted toyour site.

The various categories and options usedin meta tags are derived from the data-transfer system and data organization usedby Web servers. In QuarkXPress, meta tagcategories are organized into meta tagsets, which in turn are incorporated intocode for a Web page. It’s all behind thescenes, though; meta tags don’t produceany visible items on a Web page.

To create a meta tag set:1. With a Web layout open, choose Edit >Meta Tags, then click New�.

2. Enter a Name for the set.3. Click Add.4. In the New Meta Tag dialog box, choosean attribute from the Meta Tag menuor enter an attribute in the field:

Name to designate the category of tagnames that describe information aboutthe Web page, such as the author, anycopyrights, a brief page description,the application used to create the page,or keywords to be used for indexingthe page.orhttp-equiv to designate a category oftag names that instruct the browser toperform specific actions when display-ing the page, such as which character

Cre

ate

Met

aTa

gS

et

54

Chapter 19


Where they’re storedIf a set is created using the Meta Tags commandwhen a Web layout is open, that set will bestored only with that layout. If a set is createdwhen no projects are open, it will be stored asa default in the XPress Preferences file.

Meta Tags, like all the commands listed on thelower half of the Edit menu, follow this directive:Settings that are chosen when a project is openwill be stored only with that project; settings thatare chosen when no projects are open becomethe defaults for future projects.

� The Edit Meta Tag Set dialog box for a new tag set

set to use for the page, how to cachethe page in the browser, when the pageshould expire from the browser cache,and when to automatically refresh(reload) the page into the browser.

5. Choose a value from the Name menuor enter a value in the field�. The val-ues displayed on the menu will varydepending on which attribute was cho-sen in the previous step. (For a descrip-tion of the Name field options, see theQuarkXPress documentation.)

6. In the Content field, enter descriptivecontent text, separating the phraseswith a comma.

7. Click OK.

8. To create additional meta tags, clickAdd, then repeat steps 4–7. You mayrepeat steps 4–7 several times in orderto create meta tags for the author’sname, for the generator program andversion used to create the page, for adescription of the page (entered inthe Content field), and for keywords(entered in the Content field, with thephrases separated by commas)� (seealso�, next page).

9. When you’re done, click OK�, thenclick Save to save the whole set.

TIP In the Meta Tags dialog box, clickDuplicate to duplicate the current set.

TIP In the Meta Tags dialog box, clickDelete to delete the current set. If ameta tag set is attached to the activeWeb layout, an alert dialog box willappear. From the menu, choose areplacement meta tag set or chooseNone; click OK, then click Save.

TIP If no Web project is open when youchoose Edit > Meta Tags, you willcreate a default meta tag set that isn’tassociated or stored with any particularproject.

Create

Meta

TagS

et

55

Web Layouts


� In the New Meta Tag dialog box, the “keywords”Name was chosen and a list of keywords to be usedin a search were entered into the Content field.

� The Name menuwhen http-equiv is cho-sen as the Meta Tag

The Name menu whenname is chosen as theMeta Tag

� The Edit Meta Tag Set dialog box lists the Tag,Name, and Content of each meta tag.

To edit a meta tag set:1. Choose Edit > Meta Tags.2. Choose a set name, then click Edit.3. Click a tag in the scroll window, thenclick Edit.

4. Choose new options from the menusand/or modify the Content text.

5. Click OK twice, then click Save.

You can attach a different meta tag set toeach page in a Web layout.

To attach a meta tag set to a Web page:1. Display the desired Web layout and goto the desired page.

2. Choose Page > Page Properties(Cmd-Option-Shift-A/Ctrl-Alt-Shift-A).

3. Choose a meta tag set from the MetaTag Set menu�.

4. Click OK�. The attached meta tagset can be changed to a different setat any time.

Edi

t,A

ttac

h,A

ppen

dM

eta

Tag

Set

56

Chapter 19


� This is source code in the Internet Explorer browser, showing meta tags that were created inQuarkXPress and then attached to a Web layout page.

� In the PageProperties dialog box,choose from theMeta

Tag Set menu.

You can append a meta tag set from oneWeb project to another.

To append a meta tag set:1. Open the Web project to which youwant to append a meta tag set.

2. Choose Edit > Meta Tags.3. Click Append. Locate the Web projectthat contains the desired meta tag set,then click Open.

4. In the Available window, click a metatag set name (or Shift-click multipleset names).

5. Click the right arrow to include theselected set(s), then click OK.

6. Click Save.

Documents

Web Layouts by Elaine Weinmann and Peter Lourekas © 2007 ...ptgmedia.pearsoncmg.com/.../bookreg/0321358279_web.pdfButtonsandformswithtextentryﬁelds and check boxesthatcollectinformation