WEBSITE AND WEBSITE GRAPHICS CREATED WITH XARA XTREME PRO The Xara Xone Workbook H    1    2    3    4    5    Download Zipped Tutorial John Horn’s (covoxer) Web Designer 6 Helpers Web Designer 6 has many features which add flexibility and power, but you have to dig a bit to find them. And some are not documented. We’ll look at some of these and see how they work. But before we do, a big thanks to John Horn (covoxer) for all the hard work and intelligent thought that he has contributed to make Web Designer 6 such a powerful yet easy program. Thanks John! HTMLBlockText If you have a web page and you want your visitors to be able to copy the text on the web page, then Paste the text into another document, Microsoft Word, or Dreamweaver for example, and you want the formatting to be retained, use this option. With normal HTML text, when you copy and paste the text into another document, you loose all formatting; indents, paragraph breaks, etc. The HTMLBlockText command retains the basic formatting when the text is pasted. So how do you add this? Simple. Really! Select the text area, or text column with the Selector Tool, and press the yellow (Names) tag icon on the Infobar. Names dialog used to assign HTMLBlockText option What you don’t see is what you get. John assures me that even though a layer is invisible, there may be times when you want to force this layer to export. John’s example is Dynamic Page or Sticky Footers (part of the WD6 Tweakset). If you just export the page to HTML this formatting is lost. Web Designer 6 just treats these layers as if they have been deleted. The solution is to add an exclamation point to the beginning of the invisible layer. For example, !My Hidden Layer. What matters is for the first word of the layer name to be preceded by the exclamation mark. We’ll look at John’s Tweakset a little later on. NoHighSlide Web Designer 6 now has an easy way to create a slide show. You simply drag photos onto the page, resize the photos down to thumbnail size, select all and open the Web Properties > Image Properties tab. Check Pop-up Photo, set a maximum Pop-up width and select from a variety of slide show Options. Creating a Slide Show is covered in detail on Page 3. The slide show feature is created with a program called High Slide. If the implementation of High Slide has a down side, it is you can only have one slide show per page. OK. So maybe that is not a bad thing. But there are instances when you may want to have a slide show, and also a pop up photo or two. Well as things now stand, any photo pop up you add, even if it is not part of the slide show, becomes part of the slide show. And after a while, this can become tedious. However, if you Name the photo, or photos, NoHighSlide, the photo or photos are treated as simple pop ups. So you can have your slide show and pop ups too. Centering slide show photos If you have your thumbnail images spread out across or over the page, each pop up photo opens centered on the thumbnail image. If you would rather have each pop up photo centered on the page, add this scrip to a placeholder in the Web Properties > Placeholder > Replace with HTML Code text entry box: <script type="text/javascript">hs.align = "center";</script> NoPageClipping If you have rectangular objects that extend off the page the portion of the objects that extend beyond the page margins are automatically cropped. A placeholder named NoPageClipping allows these objects to be seen in their entirety. The page is still centered in the browser. NoAutoHighlight If you use the new Navigation Bar Tool to create a navigation button bar for your website, the button for the current page is different (highlighted using the mouse over state) to identify the current page. If for some reason you decide you that you do not want this to happen and you would rather keep your visitors in the dark as to which page they are visiting, name the button NoAutoHighlight. And if you do this, please let your editor know why. <html> Some scripts that you may add to your site require that the script be entered at the beginning of the HTML script (for server side scripts). Just name the placeholder <html> (include the angle brackets), and the script will be added to the very start of the HTML file. If you add a <head> named placeholder, the script will be placed between the <head> tags. You can find more of these “helpers” in this TalkGraphics thread. John Horn’s Tweakset Those of you who have used Web Designer 5 and/or Xtreme 5, may be familiar with John Horn’s Tweakset. These tweaks add features and functions not present in Xtreme or Web Designer. John has updated some of these tweaks for Web Designer 6. I’ll explain some of these tweaks here so you can understand how they work and what they do. You can download the Tweakset here. Please read the README.TXT file for instructions on how to add these to the Designs Gallery. And by all means read the Manual.html file (included in the ZIP file) for illustrated details. You can use Bill Taylor’s XaReg utility (available in the Xara Xone Shareware Page) to rename the folder and to move it to the top of the Designs Gallery list as I have done in the illustration above. History Buttons These are simply pre-programmed Previous Page and Next Page buttons. Drag and drop them from the Designs Gallery > XWD Tweaks folder onto the page and place them wherever you wish. Left Aligned Page By default, Web Designer and Xtreme centers all web pages in the browser. But there may be times and reasons when you would rather the page align to the left side of the browser. Drag and drop this tweak onto the page. That all there is to it. Tile Background Horizontally You may want a bitmap image that only appears at the top of the page. And you do not want this image to fill the entire page, the way a background image normally does. Drag and drop this tweak onto the page and the background image will tile horizontally only and not vertically. In addition, if you want the background that is not tiled to be a different color (by default it is the page color) you can change the color in the placeholder script. Tile Background Vertically Drag and drop this tweak onto the page to make the background bitmap image tile in the vertical direction only. The image aligns to the left side of the page so consider this when designing the tile image. If you want the image to continue under the page, then design the tile to the width of the page. You can also modify the placeholder script to change the background color not covered by the background bitmap. Don’t Tile Background This makes the background image align to the top left corner of the page and the image will not tile. You can also change the background color by altering the placeholder script. Static Background By default, the background pattern starts from the top left corner of the page. Drag and drop this tweak onto the page to force the background pattern to tile starting at the top left corner of the browser window. Don’t Scroll Background This tweak locks the background image in place when the page scrolls. Dragging Pop-Ups This tweak creates a predefined bar or area that lets your visitors to drag a popup anywhere on the browser screen. Auto Load Next Page Automatically loads a new page into the browser after a specified length of time. You can modify the script to determine the time and the page to be opened. Auto Width Use this tweak to create multiple page widths that are determined by the visitor’s screen size. You need to create separate sites for each page width and then this tweak redirects the visitor to the appropriate website based upon browser information. The result is a visitor with a small screen computer sees a page designed specifically for his computer and a person with a 24” monitor will see a website designed for that width and any size in between. Designs Gallery > XWD 6 Tweaks folder Sticky Footer Double click on the tweak icon to create a new page with a sticky footer layer. Place text, graphic objects, etc. at the bottom of the page and these items will appear on the bottom of the page even if the browser window is resized or the page is scrolled. The large blue rectangle automatically scales to the size of the page. You can change the color to your background color but do not delete the rectangle and do not alter the sticky footer layers or their position. Loading Screen Double click this icon to create a new page with a special Loading Screen layer. Place the objects you want your visitor to see while the rest of the page objects load. For example, if you have a gallery page with a lot of large photo objects that may take a slower browser some time to load, use a simple loading screen that gives your visitor some information and informs her or him that the page will load in a few moments. When the page has loaded, the loading screen disappears revealing the full page. Dynamic Page This tweak causes the page to expand or contract based on dynamic created content which is created via a PHP script. An example of this is content loaded from a data base. The Dynamic Page layer expands and contracts to accommodate the content. If you have questions about these tweaks, or to request or find new tweaks, visit the Tweakset for WD6 TalkGraphics thread. And special thanks to John for holding my hand and walking me through these tweaks. And thanks to John and Steve for the technical edit help. Comments, questions, corrections or suggestions? Use the e-mail link below to forward your feedback to your editor (that’s still me). Gary W. Priester Your Editor Send e-mail