Evaluation Site Build Script
The purpose of this script is to provide instructions on how to build a simple site in
Flexiweb by using pre-prepared material and site parameters.
The exercise is intended to demonstrate some of the features of Flexiweb and uses a
blank template to simulate a bespoke site build. By using a pre-defined template
instead, the site build process can be greatly simplified and speeded up. This is
covered by a separate section at the end of the document.
Before starting the site build process please note the following:
-
-
-
The material you need to build the site will have been supplied in an
accompanying zip file and the individual files this contains are referenced in
the instructions.
For the purposes of the script, it has been assumed that you have no
knowledge of HTML or CSS coding. If you do have this knowledge you may
choose not to select the “Use Editor” option when prompted.
To save any changes made during the build process remember to click the
“Update” button before exiting from any particular screen.
At any stage during the process you can view the current site build progress
by clicking the “Build Site” button. On occasions it may be necessary to
refresh the browser (F5) before changes will be seen.
If you need any assistance please contact us on 020 8286 9822 or by email to
support@retailwebsolve.co.uk.
A. Site Build Steps
1. Login to eval account using:
http://eval.rws-flexiweb.co.uk/flexiweb/siteadmin.php
User name – eval
Password – eval
Sitename – all
2. The site you will be building is going to be based on a blank template so we first
need to select the blank template. To do this click the “Select Component” drop
down and select the “Template” option. Next click the “Available Templates” dropdown and select the Blank template from the list. Now untick the “Preserve
Pages”, “Preserve Menus”, “Preserve Elements” and “Preserve Forms” tick boxes
and then click the “Change Site Template” button. Click “Ok” when asked “Are
you sure …” This has now selected the blank template and by unticking all of the
boxes you have made sure that none of the features of the previously active site
have been carried forward onto the blank template.
3. Now click the “Select Component” drop-down and choose the “Site Params”
option.
4. Decide on a name for your evaluation site and enter this in the box immediately
to the right of the “New Site” button. Note that your site name should not contain
any spaces.
5. Click new site and you should receive confirmation that the site has been created
successfully and is now the active site.
6.
You are now in the Site Params screen, which is indicated by the selection in the
“Select Component” drop-down box. This screen is used to enter basic
configuration details for the site including the published URL, FTP passwords and
check boxes that allow the integration of the various modules into the site.
7. At any point in the site build process you can click the “Build” site button to see a
preview of the website. Try this now but, as the site hasn’t yet been created, you
should just see a blank page in your browser.
8. Click the “Select Component” dropdown and select “Site Info”.
9. In the “Site Info” screen you would enter the email address to be used by any
contact or other email type forms used on the site. Enter your own email address
here and click “Update” Site”.
10. We will now create a user so that you can login in the same way as one of your
clients would to use the content management system. To do this select the “User”
option from the “Select Component” drop down. Type your name in the box to the
right of the “New User” button then click the “New User” button to create yourself
as a user. You will see that your name now appears in the “Select User” dropdown. Now enter a user name and password in the relevant fields then select
“Site Editor” from the “User Type” drop-down. Then click “Update” to save the
changes.
11. Select “Element Styles” from the “Select Component” drop-down. An element is a
page “object” that will appear on every page of the site, so is commonly used to
position features such as headers and other areas which make up the sites
“template”.Now click the “Select Style” drop-down and you will see that three
elements have already been created. These are the “container div”, “main
content” and “outer div”. These are used to control basic site features.
12. Select “container div” from the drop-down and enter a 0px (zero) in the Height
field and 780px in the Width field. Then click the “Update Style” button to save the
changes.
13. Select “main content” from the “Select Style” drop-down and enter the following
values:
Background Colour
Left
Top
Height
Width
Font Size
Text Align
Padding
- #FFFFFF
- 200px
- 298px
- 322px
- 560px
- 10px
- left
- 10px
Then click the “Update Style” button to save the changes.
14. Select “outer div” from the “Select Style” drop-down and enter #C6ABA5 in the
Background Colour field a 0 (zero) in the Height field. Then click the “Update
Style” button to save the changes.
15. Select “Elements” from the “Select Component” drop-down and type body in the
box to the right of the New Element” button and then click the “New Element”
button. Now select “Element Styles” from the “Select Component” drop-down
box. Then select “body” from the “Select Style” drop-down box and enter the
following values:
Background Colour
Position
- #C6ABA5
- None
Then click the “Update Style” button to save the changes.
16. Select “Elements” from the “Select Component” drop-down then type “header” in
the box to the right of the “New Element” button and then click the “New Element”
button. This will create a blank element called header and its associated style,
which can be seen by selecting “Element Styles” from the “Select Component”
drop-down.
17. If you haven’t already done so you should now unzip the file eval.zip and save its
content in a temporary directory on your hard disk.
18. Select “Elements” from the “Select Component” drop-down then select “header”
from the “Select Element” drop-down. In the header element screen select the
“Use Editor” check-box. You will now see formatting options appear at the top of
the large editor window. Click inside the window and the various command icons
will become active. You can see the various functions by holding the mouse over
each icon in turn. Note that certain table functions only become active once a
table has been created and selected.
19. Click the “insert/modify” image icon ( ) and the “Insert Image” dialogue box will
appear. Click “browse” and select the header.jpg image provided in the zip file.
Once selected click “Upload” to transfer the file from your PC to the Flexiweb
server. Scroll down until you see the header image and click to select it. The file
name “header.jpg” will now appear in the “Description” field. Note that the
description also denotes the “Alt-Tag” description. Enter a zero in the “Border”
box and then click “OK”. You will now be returned to the header Element screen
and will see the image in the content editor window. To save the changes now
click “Update Element”.
Note: The header image is larger than the edit window but the size of the image
should not be altered.
20. Now select “Element Styles” from the “Select Component” drop-down box. Then
select “header” from the “Select Style” drop-down box and enter the following
values:
Left
Top
Height
Width
- 0px
- 0px
- 274px
- 780px
Then click the “Update Style” button to save the changes.
21. Click “Build” again and you will see that the site now includes a header. Note you
may need to refresh the browser to see changes when the “Build” function has
been selected.
22. Now select “Menus” from the “Select Component” drop-down box and type “main”
in the box to the right of the “New Menu” button. Then enter 6 in the “Items in
Use” field. Click the “New menu” button to create the new menu. Now change the
“Items in Use” value to 7 and click “Update Menu”. You will notice that the
number of menu items has increased.
23. Take another look at the draft site using the “Build” button. You will see that a
menu has now been added but at this stage it has the wrong descriptions,
position and colour.
24. Whilst still in the “Menu” page, enter the following values in the “Item Name”
column of the menu grid (e.g. replace “item 0” with “Home” and so on) :
Item #
Item Name
0
1
2
3
4
5
6
Home
About Us
Menu
Private Dining & Events
Reviews
Booking Request
Contact
Then click the “Update Menu” button to save the changes.
25. Now select “Menus Styles” from the “Select Component” drop-down box and
enter the following values:
Left
Top
Item Height
Normal Text Colour
Font Size
Font Weight
Item Width
Background Colour
Border Colour
Hover Text Colour
Hover Background Cover
Text Indent
Text Margin
Text Align
- 4px
- 272px
- 26px
- #580853
- 12px
- Bold
- 100px
- #FFFFFF
-0
- navy
- #FAEAFD
- 0px
- 0px<space>12px<space>0px<space>11px
- left
Then click the “Update Menu Style” button to save the changes.
26. Now select “Elements” from the “Select Component” drop-down box. Enter
headbreak in the box to the right of the “New Element” button and click the “New
Element” button. Then select “Element Styles” from the “Select Component”
drop-down box and select “headbreak” from the “Select Style” drop-down box
and enter the following values:
Background Colour
Left
Top
Height
Width
- #EADDBB
- 0px
- 272px
- 26px
- 780px
Then click the “Update Style” button to save the changes.
27. Click “Build” again and you will see that the menu is now positioned below the
header and that each button appears on a white background with a pale pink
rollover colour.
28. We now need to create a line to separate the menu bar from the page content.
To do this select “Elements” from the “Select Component” drop-down box. Enter
headline in the box to the right of the “New Element” button and click the “New
Element” button. Next click the “Use Editor” box (situated to the right of the New
Element button/box). This enables the editor window which will now accept
normal text rather than HTML code. Click anywhere in the area below the “greyed
out” formatting command bar and then click the “insert/modify” image icon ( )
and the “Insert Image” dialogue box will appear. Click “browse” and select the
line.jpg image provided in the zip file. Once selected click “Upload” to transfer
the file from your PC to the Flexiweb server. Scroll down until you see the line
image and click to select it. The file name “line.jpg” will now appear in the
“Description” field. Note that the description also denotes the “Alt-Tag”
description. Enter a zero in the “Border” box and then click “OK”. You will now be
returned to the header Element screen and will see the image in the content
editor window. To save the changes now click “Update Element”.
29. Then select “Element Styles” from the “Select Component” drop-down box and
select “headline” from the “Select Style” drop-down box and enter the following
values:
Left
Top
Height
Width
Z-Index
- 0px
- 298px
- 1px
- 780px
- 10
Then click the “Update Style” button to save the changes.
30. We now need to create the image which sits to the left of the content area. To do
this select “Elements” from the “Select Component” drop-down box. Enter table in
the box to the right of the “New Element” button and click the “New Element”
button. Next click the “Use Editor” box (situated to the right of the New Element
button/box). Click anywhere in the area below the “greyed out” formatting
command bar and then click the “insert/modify” image icon ( ) and the “Insert
Image” dialogue box will appear. Click “browse” and select the table.jpg image
provided in the zip file. Once selected click “Upload” to transfer the file from your
PC to the Flexiweb server. Scroll down until you see the table image and click to
select it. The file name “table.jpg” will now appear in the “Description” field. Note
that the description also denotes the “Alt-Tag” description. Enter a zero in the
“Border” box and then click “OK”. You will now be returned to the header Element
screen and will see the image in the content editor window. To save the changes
now click “Update Element”.
31. Then select “Element Styles” from the “Select Component” drop-down box and
select “table” from the “Select Style” drop-down box and enter the following
values:
Left
Top
Height
Width
- 0px
- 300px
- 360px
- 200px
Then click the “Update Style” button to save the changes.
32. We now need to setup the area of the page to be used for content. To do this
select “Element Styles” from the “Select Component” drop-down box. Then select
“maincontent” from the “Select Style” drop-down box and enter the following
values:
Background Colour
Left
Top
Height
Width
Font Size
Padding
- #FFFFFF
- 200px
- 298px
- 322px
- 560px
- 10px
- 10px
Then click the “Update Style” button to save the changes.
At this stage the site doesn’t have any pages, except the “index” or “home” page
which is created by default using the blank template. Select “Pages” from the
“Select Component” drop-down box. You will notice that only the “index” page
appears in the “Select Page” drop-down box. Before creating new pages we need
to now need to configure the Index page:




Click the “Use Editor” box so that it is selected (ie ticked). This enables
the Page Content editor which will now accept normal text rather than
HTML code.
The “Index” page displays content so there is no need to change the
value in the “Page Type” drop-down.
There is currently only one menu so there is no need to make any
changes to the Menu field (this is used to set which menu’s will appear on
this particular page).
Enter 382px in the “Container height” box and 330px in the “Container
offset” box.
Then click the “Update Page” button to save the changes.
33. The following pages are also content pages:
aboutus
menu
privatedining
reviews
To create them enter each one separately in the box to the right of the “New
Page” button and then click the “New Page” button. You will see that this page
has now been added to the list of pages appearing in the “Select Page” dropdown. As you create each page remember to change the “Container height” and
“Container offset” to the same values as used on the Index page (see final bullet
point in item 32 above) and, after making this change, click the “Update Page”
button to save the changes.
34. Now create the contactus page but as this contains the contact form it needs to
be given this page type by selecting “Contact Us” from the “Page Type” dropdown. Remember also to change the container height and offset fields and to
click “Update Page” to save the changes.
35. Repeat step 34 but this time create the bookingrequest page and select the
“Booking” page type. Remember also to change the container height and offset
fields and to click “Update Page” to save the changes.
36. It is now necessary to update the menu so that it is mapped to the correct page
name. To do this select “Menus” from the “Select Component” drop-down box
and then for each page in turn select the relevant page from the drop-down box
in the column headed “Link”. Remember to click “Update Menu” before exiting.
Some things to note:
-
-
The Title Text column is used to enter the text that will be displayed if the
mouse hovers over the menu item, whilst the Sub-Menu drop-down is
used to map any sub-menu’s that ae relevant to that particular main menu
item.
The name Index used here will normally relate to the “Home” page.
The remaining pages should relate to the pages you have created in
steps 32 to 35.
37. As a final step add page headings to each page by selecting “Pages” from the
“Select Component” drop-down box. Select the index page and making sure that
the editor has been enabled, click near the top of the content editing window,
then type the relevant page heading. You can style the heading the way you
prefer using the formatting commands.
You may also wish to add further content to pages to try out the page editor
functions. The different functions available can be seen by holding the mouse
pointer above each formatting icon.
To switch between normal and HTML view click or unclick the “Use Editor” check
box.
B. Template System
The template system has been developed to serve a number of purposes:
-
To allow rapid, low-cost site builds based on template designs
To allow standard configurations to be replicated quickly and easily
To provide a means of “backing-up” an existing site.
The following section provides step-by-step instructions on how to create a new site
and how to replicate this site using the template system.
B1. Template Site Creation
To create a site using a pre-defined template follow steps 1 to 5 but instead of
selecting the Blank template select the pre-defined template you plan to use.
If you now click “Build” you will be able to view the new site which will have taken on
the characteristics of the template you selected. Menu’s, pages and elements will all
have been created.
From here you can customise the configuration to suit the needs of a particular
customer.
B2. Site Replication
To replicate a site first select the site to be used as the “master” in the “Site Params”
screen. You should now see the selected site shown as “Current Site is …” at the top
of the screen.
We will now save the selected site as a template. To do this enter a name for the
new template in the box to the right of the “New Template” button and then click the
“New Template” button.
Next select the newly created template from the “Available Templates” drop-down
box. Now click the “Save Site to Template” button. Having done this the new
template will have inherited all of the characteristics of the originally selected site.
The next stage is to create the new site you wish to create in the “Site Params”
screen. Once this is done, return to the Templates screen and select the new
template. Now untick all of the “Preserve …” check boxes and then click “Change
Site Template”.
Your new site will now be based on the design, page structure, menu and elements
of the original site, although you will need to re-create certain images and customise
the site to suit the customer for which the site is intended.
Using this feature you can store common configurations as templates and apply
these to rapidly create new sites.