QuarkXPress Integration with Adobe Creative Suite 3
Page 8

Working with Adobe Dreamweaver


X-Ray Magazine v3n2 Make Web-Ready HTML PagesQuarkXPress 6.5 and 7 have a number of built-in web tools. To learn more, click here to read PDF articles X-Ray Magazine v3n2: Make Web-ready HTML Pages, X-Ray Magazine v3n4: Web Forms Part One, or X-Ray Magazine v3n5: Web Forms Part Two.


Adobe® Dreamweaver® is a very widely used visual HTML editing tool. We use Dreamweaver to create all of the pages at X-Ray Magazine online. Dreamweaver has some great layout tools, but perhaps not everything you are used to in a tool such as QuarkXPress. So many workflows are built on prototyping in Photoshop or Illustrator and then recreated in Dreamweaver. In addition, many workflows contain content that began as a print project, and recreating it from scratch can be quite time consuming. QuarkXPress has some excellent HTML and web-design features that can help with both of these workflows.

HTML TO DREAMWEAVER

QuarkXPress includes web layouts that can create menus and hyperlinks, convert print graphics or fancy text treatments to web graphics, and then write a standards­based HTML file with CSS that can be opened directly in Dreamweaver. For many design­intensive jobs this is faster than working from scratch, especially since the CSS can be written as an external file, allowing for easy overrides of styling attributes that may not work well in your web job.

Full details on how to design in QuarkXPress for web can be found in the training section at Quark's web sites, or turn to other articles here at X-Ray Magazine online by clicking the links above.

ThePowerXChange XTensions, Plug-ins, and other Stuff

Start with the basics: create or duplicate a web layout and start designing. (The interactive layout instructions above are similar.) Once your design is done go to file > export > HTML.You’ll see a number of choices. HTML is a safe bet, but XHTML may be your preference due to its cleaner structure. XSLT is also available if you plan on using your output as a template to feed in other XML content using XSL technology.

At this point you can also choose to have an external CSS file. If you don’t click this, QuarkXPress will make a CSS file anyway that describes all key formatting attributes for boxes and text, but it will just embed it within your HTML files. If you plan on editing the formatting attributes, it is smarter to do it in external CSS.

Each QuarkXPress page is a different HTML or XHTML file, along with an image folder, that contains web versions of any graphics and text boxes that have the convert to graphic on export checkbox checked in the measurements palette.

X-Ray Magazine QuarkXPress 7 Integration with Adobe Creative Suite 3 Figure 3

Figure 3 Convert to hraphic on export takes effect text to the web.

You can now open those files up in Dreamweaver using the files palette.

If you just need to turn a print layout into HTML without doing any additional design enrichment in a web layout, hold down control + shift when you go to the file > export menu and HTML will be enabled.

Working With PDF

QuarkXPress includes robust built­in PDF features, including PDF/X. With the release of QuarkXPress 7.3, the features are even easier to use than ever before, due to the addition of some default PDF output styles.

Also, QuarkXPress can import PDF files like any other graphics format. For advanced users, QuarkXPress is also unique in being able to write its own JDF ticket. This topic is covered in the Job Jackets section of your Help file and PDF manuals.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13

X-Ray Magazine
X-Ray Magazine Logo
If you enjoy our articles, click here to subscribe.
AddThis Social Bookmark Button
 
Free JavaScripts provided by The JavaScript Source

 

PhotoZoom Pro 2 a Photoshop Plug-in
GLUON ProBullets & Numbers
QuarkXPress 7 Design Inspiration Bundle
TransType Pro
Ideabook for QuarkXPress, InDesign, or PageMaker
Fotolia Stock Images