Quick Start Guide

Simple steps for designing your

site and getting it online.
WebPlus X7
1
In this guide, we will refer to specific tools, toolbars, tabs,
or options. Use this visual reference to help locate them on
the WebPlus workspace.
2
This Quick Start Guide will walk you through the key stages in
creating a website in WebPlus X7, including some basic editing
techniques and a guide to getting your site online.
To install WebPlus X7, insert the WebPlus X7 program disc into
your disc drive. The AutoRun feature starts the setup process.
Simply answer the on-screen questions to install the program.
3
When you launch WebPlus, the appears.
The assistant lets you create new websites from templates or
from scratch, open WebPlus files, and access articles (tutorials,
news, and more) from Serif's Learn and News feeds. All of the
resources you need to create an amazing website are right at
your fingertips!
For this Quick Start Guide, we'll concentrate on the
button, where we'll create a website for a seaside Bed &
Breakfast usinga professionally designed Theme Layout.
You can set up Serif Web Hosting from the initial page of
the Startup Assistant. Hover over the right-hand side
and click until you see the Web Hosting screen, then
click to begin.
4
You don't need to start from scratch with WebPlus. Instead, you
can create a complete website based entirely on a Theme Layout
(i.e., a set of pre-designed template pages with a similar look
and feel).
To pick your design, simply select a theme layout and colour
scheme to suit your taste.
1. On the left of the Startup Assistant, click
.
2. From the left, select
and
then ,
and choose a theme
from the Templates
pane on the right (e.g.,
Tessellate).
3. (Optional) Next, select a colour
scheme.
4. (Optional) Uncheck any pages
you don't want in your site.
5. Click .
There are templates available for both Desktop and
Mobile websites, but we'll concentrate on creating a
Desktop site in this example.
5
It's really easy to add, delete, rename and rearrange pages to
customize your website's structure.
1. To the right of the workspace,
click the tab.
2. Double-click a page's name
(e.g., About Us) to display it in
the workspace.
1. On the tab, click the arrow next to , and select
.
2. In the section of the dialog, give
your new page a name (e.g., Rates & Reservations).
3. Click .
Double-click a page (e.g., Gallery) in the tab to select it,
and then click . In the dialog, click .
1. Right-click a page (e.g., About Us) and click
.
2. In the section, type the new name of your page
(e.g., Rooms) and click .
Use these steps to change the name of the Products page
to Restaurant.
6
Its possible to rearrange pages in the tab. We'll make the
new Rates & Reservations page a child of the Rooms Page.
Drag the Rates & Reservations page onto the Rooms page.
When the cursor appears, release the mouse button.
The Rates & Reservations page will no longer show in the main
navigation bar, but will appear in a pop-up menu when you
hover over the Rooms link, on previewing or publishing your site.
Some objects may be placed on the master page. Master pages
are useful for storing background elements that will appear on
more than one page. We'll look at editing the website's header.
1. Select the header at the top of the page, and click
. The master page is displayed for editing.
2. Triple-click to select the text, and type your new heading.
3. To navigate away from the master page, simply select a
different page on the tab.
7
In WebPlus, there are a range of assets that you can use to build
up your site, including graphics, page content and layouts. Let's
add an under construction graphic to an unfinished page in our
site.
1. In the tab, select an unfinished
page (e.g., Rates & Reservations).
2. On the tab to the left of the
workspace, click .
3. In the , type construct into
the Search box in the top-right corner.
Press the Return key.
4. From the displayed search results select a
thumbnail.
5. Click .
6. From the
category on the
tab, drag your chosen
graphic onto the page.
Resize and reposition it
as required.
You can preview your website at any time. From the
flyout on the toolbar, click
.
8
Its really easy to overwrite the placeholder text in a template.
Well look at editing some text on the Home page, but all of the
text in the template can be edited in the same way.
1. Double-click the Home page to display it in the workspace.
2. Locate the diamond-shaped object, and quadruple-click to
select the text inside the text frame.
3. Type your text.
Triple-click on a text frame to select a paragraph. Start
typing to replace the placeholder text with your own text.
Save your work! From the menu at the top left of the
workspace, click then choose a save location.
9
Your website is based on a theme layout, so empty picture
frames (shown as envelope-shaped placeholders) can be filled
with your pictures.
1. On the tab, select the
category.
2. Click at the bottom of the
category.
3. Navigate to, and select your
pictures ( -click to select
multiple pictures) and then click
.
The pictures are added to the
tab's category.
4. Drag your chosen picture onto
an empty frame on your page.
5. (Optional) Zoom in to your
pictures by clicking
on the
toolbar underneath.
To fine-tune the positioning of a picture, select it and click
. Drag on the picture to move it
around inside the frame.
10
Sliders are animated panels which use a slide transition effect to
move from one slider panel to the next. Lets look at customizing
one of the sliders on the Home page.
1. On the Site tab, double-click the Home page to display it in
the workspace.
2. To the right of the workspace, click the tab, and
click next to Home to display objects on the Home page.
3. Scroll down to (Slider, 4
objects) and click to view
the sliders contents.
1. The diamond-shaped slider is made up of three panels.
Click on each panel in the tab to select it.
2. When you've selected the first panel, click on its placeholder
picture(s) or text frame(s) on your page and replace them
with your own content.
11
3. Repeat this process until all of the placeholder content on
each panel has been edited.
You can also use the blue arrows below the slider to
navigate between different slider panels, if you prefer.
When you preview your slider, you may find that the panels
change too quickly. Fortunately, it's really easy to increase, or
decrease, the length of time for which each panel is displayed.
1. Select your slider (i.e., Slider, 4 objects) on the tab.
2. Double-click the slider on the page to open the
dialog.
3. At the top-right of the
dialog, increase the
. This
is the length of time, in
milliseconds, that each
panel is displayed for.
Dont forget to save your work! From the menu, click
, or hold down the key and press .
12
On the Contact Us page, there is an embedded Google Map.
You can add markers to the map (i.e., your business's location)
to help people to find you and also show where you are based.
1. Double-click the on the Contact Us page.
2. At the top left of the
dialog, type your post code (zip
code) or address in the
field, then click .
3. Navigate to your desired location on the map. Various
controls are available to help you, simply check the box next
to your chosen control(s) in the section.
1. In the section of the dialog,
click . The dialog will open
showing your specified location on the map preview.
2. Click a location on the map to add a
marker at that point. The marker will
appear on the map preview in green.
3. Give your new marker a name and
then click .
4. In the dialog, you'll
see the pin has turned red. Click .
5. The map on your page will update accordingly.
Your marker(s) will appear on the map when it is viewed
in an internet browser.
13
When you're happy with your site, it's time to upload it to the
Internet! We'll look at uploading using Serif Web Hosting, but
you can use a different web hosting provider if you want to.
Serif Web Hosting provides web space for you to publish to. By
signing up to the hosting service, you can simplify web
publishing and have the option of upgrading any time.
1. From the flyout on the toolbar,
click .
2. Towards the bottom of the
dialog, click . You'll be directed to the web
hosting page on Serif.com.
- or -
If you have already set up your hosting from the Startup
Assistant (see page 3 for more information), click
in the dialog, and then jump to the
section on page 14.
3. Click at the top of the page.
4. For both new and existing customers, enter your email
address and then follow the on-screen instructions.
5. Create a new WebPlus Hosting account including entering
an email address, password and domain prefix, and reading
the Terms and Conditions.
Your domain prefix is the name of your website (i.e.,
<prefix>.webplus.net). Think about this carefully, because
it can't be changed once it has been created.
14
1. Click next to your chosen hosting package and select
yearly or monthly payments. Confirm your payment details.
2. Click . Your hosting details will be displayed.
3. If youve chosen Gold or Platinum hosting, click
to choose a different domain (e.g., .co.uk or .com).
You will need to add your account details to WebPlus via a pop-
up dialog which will appear once youve clicked Publish to Web.
1. Create an account name.
2. Copy and paste your details from the
page on Serif.com into the dialog.
3. When youre happy, click . In the
dialog, click to check that your details are valid. Note
that it can take up to 30 minutes for your hosting to activate.
4. Finally, click and then click . Your files
are uploaded to your website, and are now online!
5. Click , and type your web address into your favourite
browser. Your website will be displayed.
:
Bonus navigation bars.
Inclusion in future promotions and discount offers.
To register WebPlus, run the software and, when
prompted by the registration screen, follow the on-screen
instructions. To manually start registration, click Help >
Registration Wizard from within the software.
Visit community.serif.com to have your questions answered
by the Serif community.
Visit www.serif.com/support for Serif Account and
Customer Service information.
0845 345 6770
800 489 6720
1
6
7
2
5