Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Creating a webpage in QuarkXPress can be as simple as this. Create anything you like using any of the tools in QuarkXPress, for example, this advertisement with pictures and place logos, text boxes, dotted rules, then choose Layout > Duplicate to duplicate the layout, and for Layout Type, instead of Print, choose Web. Give it a name that makes sense, Ad web page, leave the default as they are or change them to your preferences, click on OK, and now we have a webpage that looks exactly like the design we did in QuarkXPress.
To preview it, all you need to do is click the little glow button down here and it will preview it in your Web Browser of choice. And this isn't just a picture of your QuarkXPress page, each item is separate just as you might expect. Now what's great about this is it's literally a one-click operation, but as such it has its limitations. Going back to QuarkXPress, we realize that you can have as many pages as you like in this layout, but there are no site management tools. So realistically, what you'd use this for would be to design a page that looks exactly the way you want it and either hand it off to someone who is going to do an ad interactivity and if necessary recreate it in another program like Dreamweaver, or you can use it as is in your own web projects.
The beautiful thing about it is that either way your design on your webpage is going to look exactly like you created it in QuarkXPress. With all the advanced features such as drop shadows on items, advanced typography, boxes full of beautiful blends, text on a path if you'd like, literally, everything you can do in QuarkXPress. As a designer, if you've ever had to hand your designs off to a website developer, you know that it's difficult to communicate the nuances of your design to another person, especially if that person hasn't learned the aesthetic skills that you have.
You can use QuarkXPress to design exactly what you want and when you hand-off this exported file to your website programmer, they'll have every item necessary to build the website exactly to your specifications without you worrying about them changing some detail that they maybe didn't notice, but that is important to you. For example, each of these pictures will be rotated exactly the way you rotated them and cropped exactly how you did and scaled the way you wanted them as well. Not only does that avoid the time and charges that would otherwise be required for your web person to recreate each little item, it also means that you don't have to sweat the details about whether they did it exactly the way you wanted them to.
But let's say you are not handling this project out to someone else but you want to complete the page yourself. QuarkXPress offers the interactive tools that you need to create hyperlinks as well as image maps, interactive form elements, and rollovers. One thing to be aware of as a designer is that while you can format the text in anyway you'd like, and QuarkXPress will faithfully reproduce them as pictures of that text. If you want the text to remain live and selectable on the webpage, you need to tell XPress not to convert these text boxes into pictures.
One way to do that is to go to the Item > Modify menu, or choose it from the contextual menu that pops up with the Ctrl or right-click onto the item. And under Export, just turn-off this little checkbox down here, Convert to Graphic on Export. That way when it exports, it'll make an actual text box and fill it with the font that's defined in the Cascading Style Sheets that are included with QuarkXPress or that you can create or edit yourself. To edit those CSS font families, you just go to the Edit menu and choose CSS Font Families. There you can create a new family or use one they've already got, or edit one to suit your purposes.
Generally, these are very safe because these fonts are available on both platforms. So by now even with this quick little example, you are probably realizing that in this web-space, the web tools and the way you work with items is very similar to how you do those things in the print space as well. Items have attributes that can be modified, and in this case, the modifications affect the way it creates a webpage. And that advantage is an addition to having complete control over the design of the page, and what designers doesn't want to have complete control over their designs.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 49974 Viewers
117 Video lessons · 37280 Viewers
113 Video lessons · 81188 Viewers
65 Video lessons · 10587 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.