Read Me First
This is a short tutorial, and a working website document you can experiment with.
If you’re reading this in Web Designer then feel free to experiment and explore the
features of the program. If you’re reading this as a web page, then this is an example
of what you could be producing with help from Ronald Schexnayder using Web Designer.
This is how to create a great looking website in 6 easy steps, using Web Designer.
1) Open the Designs Gallery and select a design
OK we don’t actually need to do this because this document is already open. It’s based
on the template design called ‘Beta’. You can see all the templates by selecting the
menu option:
File -> New from Designs Gallery
Or by clicking this icon on the top bar.
Preview your website: At any time you can select File -> Preview Website or just click this icon on the top
bar. This button has a ‘fly-out’ showing two options. The first previews just the current page (quickest) the
other previews the whole website. Try it now to see what this website looks like in a web browser.
In the Preview window check out the buttons along the top to the see other pages, and move over the various
objects, such as the photo above right, or click the links, such as the one immediately below here to see various
layer effects. Close the preview window when you’re done.
2) Edit the Theme Colors
The color line.
Click to find out more about the Color Editor.
Move the mouse pointer over the left end of the Color line at the bottom of the screen and click on any of the
square color patches. These are the Theme Colors for this website. Click on any of them and select ‘Edit’. This
displays the color editor, and you can now select different colors. For the best results we suggest making Theme
Color 1 and 2 similar or matching colors. There are theme colors for all the main design elements of this design.
New: Color Schemes. In the latest version we’ve introduced drag ‘n’ drop color
schemes. Open the Designs Gallery, go to the Beta2 folder, scroll down to the bottom
and you will see a variety of Color Scheme thumbnails. Drag any on this page to see all
the website colors change in an instant.
3) Edit the text on your website
Click the big T icon on the left set of tools (the Text Tool). Now click on any text and start editing. Try the heading
and replace it with your own. When using the Text Tool, the bar across the top allows you to change font, size,
etc. The ABC icon at the end is a spell checker control. Text editing is like in any word processor, for e.g. drag to
select text.
You can change button text the same way. Some buttons are ‘stretchy’ and can accommodate
any text label. Try this button to the left. If you want to change the button link address, make
sure the button is selected, and click the chain link icon at the top. To add a link to some text, just select the text
in the Text Tool and use the same link button.
4) Re-arrange your objects
Now let’s try some object moving and resizing. Choose the Selector tool (the large arrow at the top) and drag on
the photo on the top right of this page. See how the text flows around it. Try dragging on the headings or even
some of the buttons and preview again. What you see in Web Designer is exactly what you get on your web page.
Anything, anywhere.
To resize an object drag on one of the corner handles shown around the selected object. Try it on this pale flower
symbol under the text. Click on it with the Selector arrow, then drag a corner handle.
To rotate an object click on it again so you get rotate handles in the corners. Drag on these to rotate the object.
Try it with the petal shape or a text heading even. This way you can easily move, resize and rotate just about
anything on the page.
Step 5 continues on the next page:
Last updated 5th April 2010
Content Management through Web Designer, with Ronald Schexnayder.
Drag here to change the hue to be any color of the spectrum
Click here to see more
advanced controls
such as showing the hex
RGB color values.
Drag in here to change the
shade of the selected color,
to be lighter or darker.
When changing Theme
Colors, it’s normally best to
not adjust the shade by too
much.
You can drag the
eye-dropper
anywhere on
screen to pick
colors from the
screen
The Color Editor
This panel is created as a pop-up layer which, for the more advanced users, you can see in the Page &
Layer gallery. The round-cornered panel background was created with the Rectangle Tool, and made
very slightly transparent with the Transparency Tool. It was given a soft shadow using the Shadow
Tool. The arrows were drawn as simple straight lines using the Shape Editor Tool, and given an arrow
head from the Line Gallery.
Web Designer includes all tools to create just about any graphics and photo effects you’re likely to
require. And no HTML or JavaScript knowledge required at all.
Click anywhere to hide this layer.