![]() ![]() Replace the header photo If you’re using the ready-made template, you can just drag and drop to replace it with any picture file from your Windows File Explorer. Below the photo I’ve drawn a thin rectangle which is also set to be full width stretchy, and I’ve also set it to ‘stick at top’, so that when it reaches the top, as the page is scrolled it sticks (I’ve done the same for the buttons, see below). The ‘Scale origin’ setting affects how the photo enlarges as you make the window wider. Select the ‘Full width’ option as shown here. Select the photo (or other object such as a rectangle) and use the right click context menu, or the main menu: Utilities > Web Sticky/Stretchy. which shows this dialog. It’s really easy to make any photo behave like this. The image used here is set to stretch to the full width of the browser window - try adjusting the window width to see what I mean. Header Photo A large eye-catching photo is common at the top of web stories. So now as you add or remove text the page expands or shrinks to accommodate the text. Which means there’s a nice margin below the bottom of the text and the bottom edge of the page. As you can see I have set a Bottom margin of 45px - the other values do not matter. By setting the text column to Push, it makes the page expand (and would push anything else below the column that also had the Push attribute set). To do this, select the text column in the Selector Tool (not in the Text Tool), and use the context menu options (right click) Position on page > Push. This brings up the following dialog. By default, web page documents are a fixed height - you usually have to drag the bottom edge of the page down to adjust the vertical page size, but for documents like this you can set the page size to automatically stretch to accommodate any column height - so it expands as you add more text. The column width is only 700px so I could have used a 760px blank template, but it’s better to have a larger photo (explained below), so I have gone with the wider page size. Expanding Pages This design is based on a 960px wide blank web template: File > New > Web page 960 px. Certainly it’s more common for longer text stories, such as most novels, to use a Serif font like this. Some studies suggest using serif fonts improve readability. The Font I’m using here is a Google font called Droid Serif, 16px size (which is the equival- ent of 12pt in print terms), so quite large, using a generous 125% line spacing. I would not have the column width any wider than this. So this column width, in combination with the font and font size, is the upper end of that recommendation. Line Length & Font For maximum readability it’s often recommended that lines should not have more than around 15 words per line - longer than that and the eye has more difficulty moving from the end of one line to the start of the next. Simply drag the template into Web Designer to open it. Download the template and (if you don’t already own it) download the Web Designer Premium trial version. ![]() ![]() The ‘Make it Easy’ Shortcut! This tutorial takes you through the process of creating the website from scratch, but to save you time, you can download this ready-made template if you wish, and just replace it with your content. This article is itself an example of such a design. What’s more this is a responsive website, so it works on narrow mobile screens such as phones, and includes a few fancy effects such as a fading heading and parallax scroll effects. I’m going to show you how easy this is to create using Xara Web Designer Premium or Xara Designer Pro. These are not really like regular blogs - but just a single column of text, presented in a nicely designed layout intended to focus your attention on the content - with little superfluous clutter or advertising. Create your own web story It’s becoming increasingly popular to create a website that is just an article or story about a single subject, perhaps a journal, a report, a holiday or a product review. ![]()
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |