VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 1

Download and Install ViziGen-Page

Watch Video (optional)

 

INSTRUCTIONS

1) Start you web browser and go to http://www.vizigenpage.com.

2) Click on the 'Downloads' tab.

3) Click on the link to the latest version to download the installer.

4) The procedure will vary depending on your browser and its settings but in general you want to do the following:

- Save the installer file somewhere on your computer.

- Locate the installer file in the file system of your computer and double click on it.

5) When the installer starts do the following:

- Click on the 'Run' button

- Click 'Next'

- Click 'Next'

- Click 'Install'

- Click 'Finish'

6) A 'VG' icon will have been placed on your desktop. Double-click on it to run ViziGen-Page.

7) On the main menu of ViziGen-Page click on Help | About.

The 'About' dialog box will be displayed.

Note that there are buttons to launch your default web browser and make it display the following:

- Licence Agreement

- ViziGen website

- Help Centre

- ViziGen-Page Forum

- Check for updates (if your version has been superseded details will be displayed).


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 2

Run ViziGen-Page and create a new Project

Watch Video (optional)

 

THEORY

A Project corresponds to a web site. When you use ViziGen-Page to design your web site all of the details are stored within the Project file -- which is saved on your hard disk or other media. When you are happy with your design you use ViziGen-Page to create your web site files on your local computer. You can check how your web site looks using any web browser and if everything looks good you can use ViziGen-Page to automatically upload all of your web site files to your web server.

 

You do not need to have a web server or an account with an Internet Service Provider to follow this training course. You can create a fully working web site on your local computer.

 

INSTRUCTIONS

1) From the main menu do: File | New

2) Fill out Project Form as follows:

- Name: KGSR

- Description: Kusadasi Golf & Spa Resort

- Project Folder: Browse and create/select a folder e.g. C:\KGSR

- Project File: (read only -- so don't worry about it)

- FTP Host: xxx

- FTP User Name: xxx

- FTP Password: xxx

- Project Folder: xxx

- Generated Style Sheets: (accept default)

- Media: (accept default)

- Mirror Folder: (accept default)

3) Click on "Create"

VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 3

Save the Project File

Watch Video (optional)

 

THEORY

You save the Project on your hard disk or other media so that you can continue working on it in the future or on another computer.

 

INSTRUCTIONS

1) From the main menu do: File | Save As...

2) Save with the name "KGSR".


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 4

Create Named Colour "Black"

Watch Video (optional)

 

THEORY

A "Named Colour" simply associates an actual colour with a descriptive name. You can then use that "Named Colour" anywhere within the design of your web site. If you decide you want to change colours you simply change the "Named Colour" (name and/or colour) and the change is automatically applied everywhere it is used. This saves a great deal of time and makes it very easy for you to completely change the appearance of your web site.

 

INSTRUCTIONS

1) Right-click on "Named Colours" in the tree view on the Globals tab.

2) Click on "Create Named Colour...".

3) Fill out the form as follows:

- Name: Black

- Description:

- Colour: #000000

4) Click on "Create"


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 5

Create Named Colour "Dark Blue"

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on "Named Colours" in the tree view on the Globals tab.

2) Click on "Create Named Colour...".

3) Fill out the form as follows:

- Name: Dark Blue

- Description:

- Colour: #0760d2

4) Click on "Create"


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 6

Create Named Colour "Pale Blue"

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on "Named Colours" in the tree view on the Globals tab.

2) Click on "Create Named Colour...".

3) Fill out the form as follows:

- Name: Pale Blue

- Description:

- Colour: #a6c5ec

4) Click on "Create"


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 7

Create Text Style "Pale Blue" in ViziGen-Page

Watch Video (optional)

 

THEORY

You create "Text Styles" up front and then use them wherever you want within your web site. If you want to change fonts, colours, or sizes etc. you simply change the "Text Style" and everywhere it is used is automatically updated. This makes it very easy to change the appearance of your web site.

 

INSTRUCTIONS

1) Right-click on "Text Styles" in the tree view on the Globals tab.

2) Click on "Create Text Style...".

3) Fill out the form as follows:

- Name: Pale Blue

- Description:

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Pale Blue

- Line Height: 20

- Bold: Off

- Italic: Off

- Underline: Off

4) Click on "Create"


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 8

Create Paragraph Style "Pale Blue Text"

Watch Video (optional)

 

THEORY

"Paragraph Styles" make it very easy to change the appearance of your web site. You simply change the details of a "Paragraph Style" and everywhere it is used is automatically updated.

 

INSTRUCTIONS

1) Right-click on "Paragraph Styles" in the tree view on the Globals tab.

2) Click on "Create Paragraph Style...".

3) Fill out the form as follows:

- Name: Pale Blue Text

- Description:

- Text Style: Pale Blue

- Text Alignment: Left

- Heading: (Not a heading)

- Margin Top: (0)

- Margin Right: (0)

- Margin Bottom: (0)

- Margin Left: 20

- First Line Styling: (Off)

- First Letter Styling: (Off)

4) Click on "Create".


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 9

Create Template "Resort"

Watch Video (optional)

 

THEORY

Within ViziGen-Page all web pages that you create have to be based on a "Template". As it is highly likely that many web pages will have the same basic layout the idea behind Templates is that they will save you time and make it easier to change your design. You can create as many "Templates" as you like.

 

INSTRUCTIONS

1) Right-click on "Templates" in the tree view on the Globals tab.

2) Click on "Create Template..."

3) Fill out the form as follows:

- Name: Resort

- Description:

- Background Image: (None)

- Background Colour: Dark Blue

- Top Padding: 4

- Centre Page in Browser Window: Tick

4) Click on "Create".


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 10

Set Page Body Background Colour

Watch Video (optional)

 

INSTRUCTIONS

1) Click on "Page Body" under "Resort" (under Templates) in the tree view on the Globals tab.

2) Modify the form as follows:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: Black

3) Click on "Update".


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 11

Resize the Page Body

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the "Template Designer" tab.

2) Click on the "Move/Resize" icon on the Tool Bar to start using the Move/Resize tool.

3) Click on the black rectangle (to select the "Page Body").

4) Use the Status Bar to check that you have "Page Body" selected.

5) Drag the right edge of the black rectangle to make the width 1000. Check its size on the Status Bar at the bottom. Alternatively use the keyboard to resize the rectangle: Ctrl+Right-Arrow or Ctrl+Left-Arrow. Watch the video if you need more help on this.

6) Make the height of Page Body 631


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 12

File | Save (from Tool Bar)

Watch Video (optional)

 

INSTRUCTIONS

1) Note the asterisk in the title bar (it indicates that the project details have changed)

2) Click on the “Save Project File” icon on the Tool Bar.

Do this as and when you feel it necessary from now on.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 13

Insert Page Content Box “Page Content Box”

Watch Video (optional)

 

THEORY

Page Content Boxes are placed in Templates so that Pages (based on the Template) can feature their own unique content – within the Page Content Box. At the Page level a Page Content Box cannot be moved or have its width increased. But its height can be altered (increased or decreased) to suit the requirements of the Page. A Template can have as many Page Content Boxes as are required.

 

INSTRUCTIONS

1) Click on the “Select Space” icon on the Tool Bar to start using the Select Space tool.

2) Click somewhere towards the top left of the highlighted area (dashed line) and drag towards the bottom right corner.

 

Theory:You don't have to be precise when selecting space because whatever is created in it will be moved and resized precisely in a subsequent task.

 

3) Click on the “Insert Page Content Box” icon on the Tool Bar.

4) Fill out the form as follows:

- Name: (Accept Default)

- Description: (Leave blank)

- Box Effect: (None)

- Background Image: (None)

- Background Colour: Dark Blue

5) Click “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 14

Move/Resize "Page Content Box"

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Move/Resize” icon on the Tool Bar.

2) Use the left or right arrow key to move the Page Content Box to X = 14 (see Status Bar at bottom)

3) Use the up or down arrow key to move the Page Content Box to Y = 105

4) Use Ctrl+Right Arrow or Ctrl+Left Arrow to set the Width to 973

5) Use Ctrl+Up Arrow or Ctrl+Down Arrow to set the Height to 489

Hint: If you are unable to move the box - resize it first. And vice versa.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 15

Create Folder “Pages”

Watch Video (optional)

 

THEORY

The Folder Tree tab is where you create the most important part of your web site – the actual web pages. You create Folders to make it easier for you to find them when they have to be changed.

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab.

2) Right-click on “Root Folder”.

3) Click on “Create Folder...”.

4) Fill out the form as follows:

- Name: Pages

- Description:

5) Click “Create”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 16

Create Page “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on the "Root Folder" tree view node (on the Folder Tree tab).

2) Click on “Create Page...”

3) Fill out the form as follows:

- Name: Apartments

- Description:

- File Name: index.htm

- Template: Resort

- Title: Apartments

- Description: Holiday Resort, Kusadasi, Turkey

   HINT: Copy and paste the text from here...

- Keywords: Golf, Spa, Holiday, Kusadasi, Turkey

4) Click “Create”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 17

Create a Text Box on Page “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click on the “Select Object” icon on the Tool Bar.

3) Click anywhere in the central blue box ("Page Content Box").

4) Use the Status Bar to check that you have "Page Content Box" selected.

5) Click on “Select Space” on the Tool Bar.

6) Drag a rectangle anywhere in the central blue box ("Page Content Box").

7) Click on “Insert Text Box” on the Tool Bar.

8) Fill out the form as follows:

- Name: Hello World Text Box

-Description:

- Background Image: (None)

- Background Colour: Black

9) Click on “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 18

Enter Text in Text Box

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Text Editor” on the Tool Bar.

2) Type in “Hello World!” (or whatever you want). It will appear inside the “Hello World Text Box”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 19

Generate Web Site

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

3) Click the “Generate” button.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 20

Display Web Page in Browser

Watch Video (optional)

 

INSTRUCTIONS

Run your web browser and open index.htm in the Pages folder of your Training Course Project Folder.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 21

Download All Images required for the Training Course

Watch Video (optional)

 

INSTRUCTIONS

1) Start your web browser.

2) Visit http://www.vizigenpage.com.

3) Click on the "Help Centre" tab.

4) Click on the "Training Course" link in the top right of the web page.

5) Click on the "Download Training Course Media and Supporting Files" link towards the bottom of the web page.

6) Click on the link to the zip file:

http://kgsr.vizigenpage.com/Downloads/ViziGen-Page_TrainingCourseImages.zip

7) Save the zip file somewhere on your computer.

8) Extract all of the files in Media folder of the zip file into the Media folder of your training course project folder. Optionally, you can copy all the vgp files to your project folder. These hold the Training Course project as it is at the end of every step - useful if you get stuck or want to jump ahead.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 22

Create Box Effect “Black Box”

Watch Video (optional)

 

THEORY

A Box Effect is a means of applying a graphical effect to box-type elements of your web pages. You can either supply a sample image (made using a separate graphics application) or use ViziGen-Page to make one. In either case, once you've configured your Box Effect, ViziGen-Page re-sizes the image, as necessary, so that it can be used wherever you want within your web site. Later, if you want to change the Box Effect you simply provide a different image and it will be automatically applied everywhere you use it.

 

INSTRUCTIONS

1) Click on the “Globals” tab.

2) Make sure the “KGSR” tree node is expanded.

3) Right-click on “Box Effects” in the tree view.

4) Click on “Create Box Effect...”

5) Fill out the form as follows:

- Name: Black Box

- Description:

- Source: Internal

Within the "Layer 1" tab enter the following values:

- Type: Simple

Layer Settings

- Layer Name: Layer 1

- Origin (X): 0

- Origin (Y): 0

- Width: 400

- Height: 300

- Depth: 20

- Light Angle (X): 45

- Light Angle (Y): 45

Within "Panel Colour"

- Type: Named Colour

- Named Colour: Black

- Alpha: 100

Edge Settings

- Corner Width: 10

- Corner Height: 10

- Corner Type: Round

- Edge Type: Convex

Within "Edge/Corner Colour"

- Type: Named Colour

- Named Colour: Black

- Alpha: 100

6) Click “Create”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 23

Apply Box Effect to Page Body

Watch Video (optional)

 

INSTRUCTIONS

1) Expand the "Templates" tree node.

2) Expand the "Resort" tree node.

3) Click on “Page Body”.

4) Modify the form as follows:

- Box Effect: Black Box

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 24

Display Template (with Box Effect)

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab and check that the Box Effect has been applied.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 25

Re-Generate and Re-display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display index.htm in your web browser.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 26

Create Box Effect “Blue Border Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Globals” tab and make sure that the “KGSR” tree node is expanded.

2) Right-click on “Box Effects” in the tree view.

3) Click on “Create Box Effect...”

4) Fill out the form as follows:

- Name: Blue Border Box

- Description:

- Source: Internal

Within the "Layer 1" tab enter the following values:

- Type: Simple

Layer Settings

- Layer Name: Layer 1

- Origin (X): 0

- Origin (Y): 0

- Width: 400

- Height: 300

- Depth: 4

- Light Angle (X): 90

- Light Angle (Y): 90

Within "Panel Colour"

- Type: Named Colour

- Named Colour: Black

- Alpha: 100

Edge Settings

- Corner Width: 5

- Corner Height: 5

- Corner Type: Square

- Edge Type: Convex

Within "Edge/Corner Colour"

- Type: Named Colour

- Named Colour: Dark Blue

- Alpha: 100

5) Click on “Create”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 27

Apply Box Effect to "Page Content Box"

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on the central blue rectangle "Page Content Box".

4) Use the Status Bar to check that you have "Page Content Box" selected.

5) Click on “Properties” on the Tool Bar.

6) Modify the form as follows:

- Change Box Effect to “Blue Border Box”.

- Change Background Colour to “(None)”.

7) Click on “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 28

View Box Effect on Page “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab and check that the Box Effect has been applied.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 29

Re-Generate and Re-display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display index.htm in your web browser.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 30

Insert Header Image on Template

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click on “Select Object” on the Tool Bar and select “Page Body”. Hint: click towards the top, above the central box with the blue outline. Use the Status Bar to check what is selected.

3) Use the Status Bar to check that you have “Page Body” selected.

4) Click on “Select Space” on the Tool Bar and select some space just below the top edge of the selected box.

5) Click on “Insert Image” on the Tool Bar.

6) Fill out the form as follows:

- Name: Header Image

- Description:

- Image: Media\Header.png

- Alternative Text: Kusadasi Golf & Spa Resort

- Title: Kusadasi Golf & Spa Resort

- Thumb Nail: (Not Checked)

7) Click on “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 31

Move/Resize Header Image

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar and set the following as described in Task 14 above.

X= 271

Y = 18

Width = 457

Height = 51

Hint: If you are unable to move the box - resize it first. And vice versa.

 

Theory:The image/photo is automatically resized to to fit the space available (the aspect ratio is locked to avoid distortion).



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 32

Display Page

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab and check that the header image can be seen


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 33

Re-Generate and Re-Display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display index.htm in your web browser.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 34

Create Image "Apartments-Outside" on Page "Apartments"

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the "Page Designer" tab.

2) Click on "Select Object" on Tool Bar.

3) Click on "Hello World Text Box" to select it.

4) Use the Status Bar to check that you have "Hello World Text Box" selected.

5) Click on "Delete" on the Tool Bar.

6) Click "Yes" on the message box to delete the Text Box.

7) Click on "Page Content Box" to select it. Hint: the central box with a blue border.

8) Click on "Select Space" on the Tool Bar.

9) Drag out a rectangle on "Page Content Box".

10) Click "Insert Image" on the Tool Bar.

11) Fill out the form as follows:

- Name: Apartments-Outside Image

- Description:

- Image: Media\Apartments.JPG

- Alternative Text: Apartments

- Title: Click to view full size

- Thumb Nail: Checked

12) Click "Update"

 

Theory:If you set the image to be a thumb nail then when it is clicked on within a web browser it will be displayed at its full size. Thus the image you specify should ideally retain its original size.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 35

Move/Resize “Apartments-Outside Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Use the “Move/Resize” tool to set the size and position of “Apartments-Outside Image” as follows:

X = 19

Y = 110

Width = 963

Height = 479

Hint: If you are unable to move the box - resize it first. And vice versa.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 36

Insert Slide Box on “Apartments-Outside Image”

Watch Video (optional)

 

THEORY

A Slide Box differs from most other boxes within ViziGen-Page because it can be placed anywhere on a Page or Template. That's why it's called a Slide Box – because you can slide it around anywhere.

 

INSTRUCTIONS

1) Click on “Select Space for Slide Box” on the Tool Bar.

2) Drag a rectangle of the sky part of the photo.

3) When you release the left mouse button the Slide Box form will be displayed.

4) Fill it out as follows:

- Name: Sea View Slide Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

- Anchor Point: Top Left

5) Click on “Update”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 37

Move/Resize “Sea View Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/Resize “Sea View Slide Box” as follows:

X = 94

Y = 126

Width = 506

Height = 140

Hint: If you are unable to move the box - resize it first. And vice versa.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 38

Create Background Image “Sea View”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Globals” tab and ensure that the “KGSR” tree node is expanded.

2) Right-click on “Background Images” on the tree view.

3) Click on “Create Background Image...”

4) Fill out the form as follows

- Name: Sea View Background Image

- Description:

- Image: Media\SeaView.png

- Position Type: Keyword

- Horizontal Position: left

- Background Repeat: no-repeat

- Vertical Position: top

- Background Repeat: no-repeat

5) Click “Create”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 39

Create Text Style “Dark Blue”

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on “Text Styles” on the tree view.

2) Click on “Create Text Style...”

3) Fill out the form as follows:

- Name: Dark Blue

- Description:

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Dark Blue

- Line Height: 20

- Bold: Off

- Italic: On

- Underline: Off

4) Click on “Create”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 40

Insert Stack Box on “Sea View Slide Box” on Page “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on “Sea View Slide Box”. Hint the black rectangle on the sky part of the photo.

4) Use the Status Bar to check that you have “Sea View Slide Box” selected.

5) Click on “Select Space” on the Tool Bar.

6) Drag a rectangle on “Sea View Slide Box”.

7) Click on “Insert Stack Box” on the Tool Bar.

8) Fill out the form as follows:

- Name: Sea View Stack Box

- Description:

- Box Effect: (None)

- Background Image: Sea View Background Image

- Background Colour: (None)

9) Click “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 41

Move/Resize “Sea View Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize “Sea View Stack Box” as follows:

X = 99

Y = 131

Width = 495

Height = 130

Hint: If you are unable to move the box - resize it first. And vice versa.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 42

Insert Text Box on “Sea View Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Drag a rectangle on “Sea View Stack Box”.

3) Click on “Insert Text Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Sea View Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 43

Move/Resize “Sea View Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

1) Move and resize “Sea View Text Box” as follows:

X = 172

Y = 146

Width = 414

Height = 80

Hint: If you are unable to move the box - resize it first. And vice versa.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 44

Enter Text on “Sea View Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Text Editor” on the Tool Bar.

2) Click on the arrow of the “Text” list box on the Tool Bar.

3) Click on “Dark Blue”.

4) Type the following:

There are 750 luxury apartments, most with sea or mountain views, all air-conditioned and fully equipped.”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 45

Re-Generate and Re-Display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display index.htm in your web browser.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 46

Create Page “Facilities”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab.

2) Right-click on “Pages” in the tree view.

3) Click on “Create Page...”.

4) Fill out the form as follows:

- Name: Facilities

- Description:

- File Name: Facilities.htm

- Template: Resort

- Title: Facilities

- Description: Holiday Resort, Kusadasi, Turkey

- Keywords: Golf, Spa, Holiday, Kusadasi, Turkey

5) Click on “Create”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 47

Insert “Pool Image” on “Page Content Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on “Page Content Box” (hint: the central black box with blue border).

4) Use the Status Bar to check that you have “Page Content Box” selected.

5) Click on “Select Space” on the Tool Bar.

6) Drag out a large rectangle on “Page Content Box”.

7) Click on “Insert Image” on the Tool Bar.

8) Fill out the form as follows:

- Name: Pool Image

- Description:

- Image: Media\Pool.JPG

- Alternative Text: Pool

- Title: Click to view full size

- Thumb Nail: Checked

9) Click on “Update”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 48

Move/Resize “Pool Image”

Watch Video

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize “Pool Image”as follows:

X = 20

Y = 110

Width = 638

Height = 478


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 49

Insert “Facilities Slide Box” on “Page Content Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Object” on the Tool Bar.

2) Click on “Page Content Box” (hint: click on the black space to the right of the photo).

3) Use the Status Bar to check that you have “Page Content Box” selected.

4) Click on “Select Space for Slide Box” on the Tool Bar.

5) Drag out a rectangle on the black space to the right of the photo.

6) When the left-mouse button lifts the Slide Box form will be displayed.

7) Fill it out as follows:

- Name: Facilities Slide Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

- Anchor Point: Top Right

8) Click on “Update”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 50

Move/Resize “Facilities Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Facilities Slide Box” as follows:

X = 634

Y = 141

Width = 335

Height = 415


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 51

Insert Text Box on “Facilities Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Drag a rectangle on “Facilities Slide Box”.

3) Click “Insert Text Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Facilities Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 52

Move/Resize “Facilities Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize “Facilities Text Box” as follows:

X = 634

Y = 167

Width = 335

Height = 367


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 53

Enter Text on “Facilities Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Text Editor” on the Tool Bar.

2) Type the following:

The resort has the following facilities:

3) Press carriage return on the key board.

4) Click on “On-screen Keyboard” on the Tool Bar.

 

Theory:Keyboards don't feature every possible character, for example the copyright symbol. In addition there are foreign language characters, mathematical symbols, and currency symbols that cannot be entered directly from the keyboard. To assist with this ViziGen-Page provides the On-screen Keyboard to deal with these problems.

 

5) Make sure that Keyboard Type “Common” is displayed (see list box near top).

6) Click on the bullet symbol in the top left corner of the keyboard.

7) This is how you insert special characters and symbols into your web pages.

 

Theory:ViziGen-Page has a comprehensive Copy/Paste capability. Accordingly, rather than type in the text shown below you can copy it to the clipboard and then us the Tool Bar to copy it into the Text Box.

 

8) Type the following:

championship golf course

11 outdoor pools

8 children's pools

Heated indoor pool

2 tennis courts

Volley ball court

Basket ball court

Crazy golf

Kids club and playground

Beach club with bar/restaurant etc

Gym/Fitness centre

Pool bars/cafes with WiFi

Bars, restaurants, and shops

Aqua park

Spa, sauna, and Turkish bath

Games room

Pool, darts, billiards

9) Some web browsers might insert spurious blank lines into the text they put on the clipboard - and these could be pasted into the text box causing its height to virtually double. If this happens to you simply delete the unwanted blank lines. The text box should return to its original height.

10) Close the “On-screen Keyboard” window.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 54

Re-Generate and Re-Display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display Facilities.htm in your web browser.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 55

Create Box Effect “Tab Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Globals” tab and make sure that the root tree node “KGSR” is expanded.

2) Right-click on “Box Effects”.

3) Click on “Create Box Effect...”

4) Fill out the form as follows

- Name: Tab Box

- Description:

- Source: Internal

Layer 1

- Type: Fully Configurable

Layer Settings

- Layer Name: Layer 1

- Origin (X): 0

- Origin (Y): 0

- Width: 300

- Height: 150

- Depth: 6

- Light Angle (X) 75

- Light Angle (Y): 60

Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Top Left Corner Settings

Width: 10

Height: 10

Corner Type: Round

Edge Type: Convex

Corner Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Bottom Left Corner Settings

Width: 0

Height: 0

Corner Type: Round

Edge Type: Convex

Corner Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Bottom Right Corner Settings

Width: 0

Height: 0

Corner Type: Round

Edge Type: Convex

Corner Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Top Right Corner Settings

Width: 10

Height: 10

Corner Type: Round

Edge Type: Convex

Corner Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Top Edge Settings

Height: 10

Edge Type: Convex

Edge Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Right Edge Settings

Width: 10

Edge Type: Convex

Edge Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Bottom Edge Settings

Height: 0

Edge Type: Convex

Edge Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

Left Edge Settings

Width: 10

Edge Type: Convex

Edge Colour

Type: Named Colour

Named Colour: Dark Blue

Alpha: 100

5) Click on “Create”

6) Close the window displaying the graphic image of the tab once you're done looking at it.


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 56

Create Nav Bar Link Box Style “Blue Tab”

Watch Video (optional)

 

THEORY

A “Nav Bar” (or Navigation Bar) is a common web page feature that provides a means of navigating to other pages of the web site. Within ViziGen-Page a “Nav Bar” consists of “Links” each of which allows another page to be accessed. “Links” have two parts as follows:-

(1) The text of the link.

(2) The box that contains the link-text.

Both of these can be styled to suit your needs.

 

INSTRUCTIONS

1) Right-click on “Nav Bar Link Box Styles” in the tree view.

2) Click on “Create Link Box Style...”

3) Fill out the form as follows:

- Name: Blue Tab

- Description:

- Nav Bar Type: Box

Padding:

- Top: 13

- Right: 0

- Bottom: 0

- Left: 0

Background (Normal Link):

- Box Effect: Tab Box

Background (Normal + Hover Link):

- Box Effect: Tab Box

Background (You-Are-Here Link):

- Box Effect: Tab Box

Background ( You-Are-Here + Hover Link):

- Box Effect: Tab Box

4) Click on “Create”


VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 57

Create Nav Bar Link Text Style “Tab Link Text Style”

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on “Nav Bar Link Text Styles” in the tree view.

2) Click on “Create Link Text Style...”

3) Fill out the form as follows:

- Name: Tab Link Text Style

- Description:

Text Style (Normal Link)

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Pale Blue

- Bold: Off

- Italic Off

- Underline: Off

- Text Alignment: (Center)

Text Style (Normal + Hover Link)

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Black

- Bold: Off

- Italic Off

- Underline: Off

- Text Alignment: (Center)

Text Style (You-Are-Here Link)

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Black

- Bold: Off

- Italic Off

- Underline: Off

- Text Alignment: (Center)

Text Style (You-Are-Here + Hover Link)

- Font Name: Lucida (sans-serif)

- Font Size: 16

- Text Colour: Black

- Bold: Off

- Italic Off

- Underline: Off

- Text Alignment: (Center)

4) Click on “Create”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 58

Create Nav Bar “Tabbed Nav Bar”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on “Page Body” to select it. Hint: click in the centre of the black space to the left of the header image.

4) Use the Status Bar to check that you have “Page Body” selected.

5) Click on “Select Space” on the Tool Bar.

6) Select some space between the header image and the blue-border box below it.

 

Theory:The space between the header image and the blue-border box is only narrow. Note how the cursor changes from grey to red when it's over selectable space.

 

7) Click on “Insert Nav Bar” on Tool Bar.

8) Fill out the form as follows:

- Name: Tabbed Nav Bar

- Description:

- Nav Bar Type: Box

- Link Box Style: Blue Tab

- Link Text Style: Tab Link Text Style

Background

- Background Colour: (None)

- Background Image: (None)

- Box Effect: (None)

9) Click on “Update”

Note: The Nav Bar itself is invisible - we will put some tabs on it soon...



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 59

Move/Resize “Tabbed Nav Bar”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize “Tabbed Nav Bar” as follows:

X = 40

Y = 69

Width = 920

Height = 32



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 60

Create a Nav Bar Link for “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space for Nav Bar Link” on the toolbar.

 

Theory:With ViziGen-Page Nav Bar Links are like Slide Boxes and can be placed anywhere on the Template (or Page). Conventionally they are placed in neat horizontal rows or vertical columns but that is optional within ViziGen-Page.

 

2) Select some space under the header image. Hint: It can be anywhere really (as explained in the Theory paragraph above). It will be sized and positioned precisely in the next task.

Note: Nav Bar Link Form will be displayed as soon as the left mouse button lifts.

3) Fill out the form as follows:

- Link Type: Internal

- Target Page: Apartments Hint: Use the “Browse...” button to locate the Target Page

- Link Text: Apartments

- Link Tooltip: blank

- Bookmark: (None)

- Target Window: Open in same window/tab

4) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 61

Move/Resize Nav Bar Link for “Apartments”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize the Nav Bar Link as follows:

X = 40

Y = 73

Width = 180

Height = 33



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 62

Create a Nav Bar Link for “Facilities”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Object” on the Tool Bar.

2) Click on “Tabbed Nav Bar” (hint: clicked to the right of the Apartments link.

3) Use the Status Bar to check that you have “Tabbed Nav Bar” selected.

4) Click “Select Space for Nav Bar Link” on the toolbar.

5) Select some space to the right of the Apartments link.

6) Note: Nav Bar Link Form will be displayed as soon as left mouse button lifts.

7) Fill out the form as follows:

- Link Type: Internal

- Target Page: Facilities (in the Pages folder)

- Link Text: Facilities

- Link Tooltip: blank

- Bookmark: (None)

- Target Window: Open in same window/tab

8) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 63

Move/Resize the Nav Bar Link for “Facilities”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize the Nav Bar for “Facilities” as follows:

X = 225

Y = 73

Width = 180

Height = 33



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 64

View Nav Bar Operation

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab.

2) Click on Page “Apartments”.

3) Click on the “Page Designer” tab.

4) Browser Mode will be active so click on the “Facilities” link on the displayed nav bar.

Note that the displayed Page changes to the “Facilities” Page.

This makes navigation around your site very easy in ViziGen-Page.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 65

Re-Generate and Re-display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display Facilities.htm in your web browser. Try clicking on the links of the tabbed navigation bar.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 66

Copy “Facilities” Page via Clipboard

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab. Make sure that the “Root Folder” tree node is expanded, and the “Pages” tree node too.

2) Right-click on Page “Facilities”.

3) Click on “Copy Page to Clipboard”.

4) Right-click on tree node “Pages”.

5) Click on “Paste Page from Clipboard”.

Note that a Page called “Facilities-1” has been created.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 67

Convert “Facilities-1” to “Milli Park”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Facilities-1” in the tree view.

2) Modify the form as follows:

- Name: Milli Park

- Description:

- File Name: MilliPark.htm

- Template: Resort

- Title: Milli Park

- Description: Holiday Resort, Kusadasi, Turkey

- Keywords: Golf, Spa, Holiday, Kusadasi, Turkey

3) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 68

Page “Milli Park” - Change Photo

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

 

Theory:ViziGen-Page has copied Page “Facilities” in its entirety. This is a general capability for most of the things that you can create within the application. You can even paste things from one project to another. Please note: if you do this everything needed by the pasted object will be copied/pasted too.

 

2) Click on “Select Object” on the Tool Bar.

3) Click on the photo.

4) Click on “Properties” on the Tool Bar.

5) Modify the form as follows:

- Name: Pine Tree Image

- Description:

- Image: Media\MilliPark.JPG

- Alternative Text: Pine Tree in Milli Park

- Title: Click to view full size

- Thumb Nail: Checked

6) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 69

Page “Milli Park” - Update Text Box Properties

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the text to select the Text Box.

2) Use the Status Bar to check that “Facilities Text Box” is selected.

3) Click on “Properties” on the Tool Bar.

4) Update the form as follows:

- Name: Milli Park Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 70

Page “Milli Park” - Change Text

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Text Editor” on the Tool Bar.

2) Select all the text in the Text Box by dragging with the mouse and click on the Delete key.

3) Paste in the following text:

The Dilek National Park (known locally as Milli Park) has to be visited by anyone who likes nature and the outdoors...

Unspoilt Mediterranean paradise

Wild boar

Eagles

Wild horses

Beaches, coves, and picnic area

Walks and bike trails

Forested mountains sweeping down to the sea

4) Hint: To paste either use Ctrl+V or the "Paste Plain Text from Clipboard" button on the Tool Bar.

5) As before, if your web browser inserts extra blank lines when you copy the above text to the clipboard, use the delete or backspace key to remove them.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 71

Resize “Milli Park Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Adjust the size of “Milli Park Text Box” as follows:

Width: 288

Height: 240



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 72

Rename Slide Box to “Milli Park Slide Box”

Watch Video (optional)

 

 

INSTRUCTIONS

1) Click on “Select Box Behind” on the Tool Bar to select the Slide Box that the Text Box in.

Hint: If this tool isn't featured on the Tool Bar click again in the text box.

 

Theory: When you select a box ViziGen-Page remembers the precise point where you clicked. It then becomes possible to select the boxes below by successively clicking on “Select Box Behind” on the Tool Bar. Conversely you can click on “Select Box In Front” to select boxes in the other direction.

 

2) Click on “Properties” on the Tool Bar.

3) Change the name to “Milli Park Slide Box”.

4) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 73

Move/Resize “Milli Park Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

(The “Move/Resize” tool should be already selected if the procedure above has been followed. If not - select it.)

1) Resize “Milli Park Slide Box” as follows:

X: 633

Y: 164

Width: 335

Height: 288



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 74

Move “Milli Park Text Box”

Watch Video (optional)

 

INSTRUCTIONS

(The “Move/Resize” tool should be already selected if the procedure above has been followed. If not - select it.)

1) Click anywhere in “Milli Park Text Box” (it won't be selected until the next step is performed).

2) Click “Select Box in Front” on Tool Bar to select “Milli Park Text Box”.

3) Click on “Center Horizontally” on the Tool Bar.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 75

Add Link to Nav Bar for Page “Milli Park”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on the Nav Bar Link “Facilities”.

4) Use the Status Bar to check that you have Nav Bar Link “Facilities” selected.

5) Click “Copy to Clipboard” on the Tool Bar.

6) Click “Select Box Behind” on Tool Bar (to select “Tabbed Nav Bar”).

7) Click “Paste Nav Bar Link from Clipboard” on the Tool Bar.

8) A copy of the “Facilities” Nav Bar Link will have been pasted on top of the “Apartments” link. (Because links are always pasted to the top left corner of the nav bar.)

9) Click on “Move/Resize” on the Tool Bar.

10) Move the new link to the following location:

X = 410

Y = 73

The dimensions should remain as follows:

Width = 180

Height = 33

11) Click on Properties on the Tool Bar.

12) Change the properties as follows:

- Link Type: Internal

- Target Page: Milli Park

- Link Text: Milli Park

- Link Tooltip: blank

- Bookmark: (None)

- Target Window: Open in same window/tab

13) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 76

Re-Generate and Re-display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display Facilities.htm in your web browser.

- Click on the nav bar links to access the other pages.

- Try clicking on the photos.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 77

Create Page “Archaeology”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab. Make sure that the “Root Folder” and “Pages” tree nodes are expanded.

2) Right-click on “Pages”.

3) Click on “Create Page...”

4) Fill out the form as follows:

- Name: Archaeology

- Description:

- File Name: Archaeology.htm

- Template: Resort

- Title: Archaeology

- Description: Holiday Resort, Kusadasi, Turkey

- Keywords: Golf, Spa, Holiday, Kusadasi, Turkey

5) Click on “Create”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 78

Create a Column Box on “Page Content Box” of Page “Archaeology”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on “Page Content Box” to select it. Hint: it's the box under the nav bar with the blue border.

4) Use the Status Bar to check that you have “Page Content Box” selected.

5) Click on “Select Space” on the Tool Bar.

6) Drag a large rectangle within “Page Content Box”.

7) Click on “Insert Column Box” on the Tool Bar.

8) Fill out the Column Box form as follows:

- Name: Archaeology Column Box

- Description:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: (None)

- Full Height Columns: (leave unchecked)

9) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 79

Move/Resize “Archaeology Column Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Archaeology Column Box” as follows:

X = 18

Y = 109

Width = 964

Height = 481



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 80

Create left-hand Stack Box on “Archaeology Column Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space” on the Tool Bar.

2) Select a large block of space on the left-hand side of “Archaeology Column Box”.

3) Click on “Insert Stack Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Left Stack Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 81

Move/Resize “Left Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Left Stack Box” as follows:

X = 36

Y = 131

Width = 455

Height = 437



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 82

Insert a Text Box into “Left Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a block of space inside “Left Stack Box”. Hint the inner blue-border box on the left hand side

3) Click on “Insert Text Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Left Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 83

Move/Resize “Left Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Left Stack Box” as follows:

X = 47

Y = 149

Width = 415

Height = 400



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 84

Create a Left Corner Box in “Left Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Drag a large rectangle from the top left corner of “Left Text Box”. Note you have to position the cursor exactly over the corner i.e. just inside the white dashed lines.

 

Theory:You are creating a “Corner Box”. These can only be created in the top left and/or top right corners of a Text Box. What is special about them is that the text within the Text Box will flow round them.

 

3) When the left mouse button is released the Corner Box form will be displayed.

4) Fill it out as follows:

- Name: Left Corner Box

- Description:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 85

Resize “Left Corner Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Resize “Left Corner Box” as follows:

Width = 236

Height = 173

 

Theory:

Note that you cannot move a Corner Box – it has to stay in the corner of the Text Box.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 86

Insert a Stack Box in “Left Corner Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a rectangle of space within “Left Corner Box”.

3) Click on “Insert Stack Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Left Corner Stack Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 87

Move/Resize “Left Corner Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/resize “Left Corner Stack Box” as follows:

X = 70

Y = 151

Width = 194

Height = 148



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 88

Insert an Image into “Left Corner Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a large rectangle of space within “Left Corner Stack Box”.

3) Click on “Insert Image” on the Tool Bar.

4) Fill out the form as follows:

- Name: Priene Image

- Description:

- Image: Media\Priene.JPG

- Alternative Text: Priene

- Title: Click to view full size

- Thumb Nail: Checked

5) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 89

Move/Resize “Priene Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Priene Image” as follows:

X = 75

Y = 156

Width = 184

Height = 138



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 90

Insert Text into “Left Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click in “Left Text Box” (hint: click on the photo and click “Select Box Behind” on the Tool Bar until “Left Text Box” is featured on the Status Bar at the bottom.

2) Click on “Text Editor” on the Tool Bar.

3) Type in the following text (or simply copy and paste – paste via the Tool Bar):

Priene

Priene was an ancient Greek holy city and the home of the important Temple of Athena.

The ruins include several columns of the temple, much of the city wall, a well-preserved theatre, and council chamber.

Priene is located just 24 km (or 15 miles) from the resort, to the south-west of Soke.

In ancient times it was on the coast but is now well inland.

The ruins of the city are generally conceded to be the most spectacular surviving example of an entire ancient Greek city intact except for the ravages of time.

For more information click here.

4) Hint: If copy/paste introduced spurious blank lines/paragraphs simply delete them. "Left Text Box" should have a height of 391 and "Left Stack Box" a height of 411.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 91

Create Text Style “Heading”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Globals” tab and make sure that the “KGSR” tree node is expanded.

2) Right-click on “Text Styles” on the tree view.

3) Click “Create Text Style...”

4) Fill out the form as follows:

- Name: Heading

- Description:

- Font Name: Lucida (sans-serif)

- Font Size: 20

- Text Colour: Pale Blue

- Line Height: 20

- Bold: On

- Italic: Off

- Underline: Off

5) Click on “Create”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 92

Create Paragraph Style “Heading”

Watch Video (optional)

 

INSTRUCTIONS

1) Right-click on “Paragraph Styles”.

2) Click on “Create Paragraph Style...”

3) Fill out the form as follows:

- Name: Heading

- Description:

- Text Style: Heading

- Text Alignment: Left

- Heading: H1 – Most Important

- Margin Top: (0)

- Margin Right: (0)

- Margin Bottom: (0)

- Margin Left: 20

- First Line Styling: (Off)

- First Letter Styling: (Off)

4) Click on “Create”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 93

Make “Priene” a heading

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click “Text Editor” on the Tool Bar.

3) Click in “Left Text Box” (hint: click on the text).

4) Select “Priene”, on the top line.

5) Select “Heading” from Paragraph Style combo box on Tool Bar.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 94

Create right-hand Stack Box on Column Box

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Object” on the Tool Bar.

2) Click on “Archaeology Column Box” (hint: click in the black area to the right of the text and its enclosing blue-border box.

3) Use the Status Bar to check that you have “Archaeology Column Box” selected.

4) Click on “Select Space” on the Tool Bar.

5) Select a large block of space on the right-hand side of “Archaeology Column Box”

6) Click on “Insert Stack Box” on the Tool Bar.

7) Fill out the form as follows:

- Name: Right Stack Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

8) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 95

Create right-hand Stack Box on Column Box

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/resize “Right Stack Box” as follows:

X = 509

Y = 131

Width = 455

Height = 437



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 96

Insert a Text Box into “Right Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space” on the Tool Bar.

2) Select a block of space inside “Right Stack Box”

2) Click on “Insert Text Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Right Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 97

Move/Resize “Right Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Left Stack Box” as follows:

X = 519

Y = 149

Width = 415

Height = 380



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 98

Create a Right Corner Box in “Right Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space” on the Tool Bar.

2) Drag a large rectangle from the top right corner of “Right Text Box”. Note the the cursor has to be exactly over the corner, just inside the dashed lines.

3) When the left mouse button is released the Corner Box form will be displayed.

4) Fill it out as follows:

- Name: Right Corner Box

- Description:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 99

Resize “Right Corner Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Resize “Right Stack Box” as follows:

Width = 217

Height = 173



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 100

Insert a Stack Box in “Right Corner Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space” on the Tool Bar.

2) Select a rectangle of space within “Right Corner Box”.

3) Click on “Insert Stack Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Right Corner Stack Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

5) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 101

Move/Resize "Right Corner Stack Box"

Watch Video (optional)

 

INSTRUCTIONS

1) Click "Move/Resize"

2) Move/resize "Right Stack Box"

X = 737

Y = 151

Width = 194

Height = 148



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 102

Insert an Image into “Right Corner Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Space” on the Tool Bar.

2) Select a large rectangle of space within “Right Corner Stack Box”.

3) Click on “Insert Image” on the Tool Bar.

4) Fill out the form as follows:

- Name: Miletus Image

- Description:

- Image: Media\Miletus.JPG

- Alternative Text: Miletus

- Title: Click to view full size

- Thumb Nail: Checked

5) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 103

Move/Resize “Miletus Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/resize “Miletus” as follows:

X = 742

Y = 156

Width = 184

Height = 138



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 104

Insert Text into “Right Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click in “Right Text Box” (hint: the area of black space below or to the left of the photo).

2) Use the Status Bar to check that “Right Text Box” is selected.

3) Click “Text Editor” on the Tool Bar.

4) Type or paste the following text into “Right Text Box”:

Miletus

Miletus was an ancient Greek city which in the 6th century BC was the place where Greece's philosophical and scientific tradition began - with the Milesian School.

The Milesian School was started by Thales, who was followed by Anaximander, and Anaximenes. •Miletus was also the birthplace of Isidore of Miletus who was the architect who designed the Hagia Sophia in Instanbul. He also invented the flying buttress.

Miletus is located 35 km (22 miles) south of Soke which is the nearest town to the resort.

For more information click here.

5) Hint: If copy/paste introduced spurious blank lines/paragraphs simply delete them. "Right Text Box" should have a height of 380 and "Right Stack Box" a height of 437.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 105

Make “Miletus” a heading

Watch Video (optional)

 

INSTRUCTIONS

1) Select “Miletus” on the first line of the text.

2) Select “Heading” from Paragraph Style combo box on Tool Bar.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 106

Create a Hyper-Text Link Style

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Globals” tab and make sure that the “KGSR” tree node is expanded.

2) Right-click on “Hyper-Text Link Styles”.

3) Click on “Create Hyper Link Style...”

4) Fill out the form as follows:

- Name: Underline

- Description:

Link Style:

- Font Name: inherit

- Text Colour: inherit

- Bold: inherit

- Italic: inherit

- Underline: on

Visited Style:

- Font Name: inherit

- Text Colour: inherit

- Bold: inherit

- Italic: inherit

- Underline: on

Hover Style:

- Font Name: inherit

- Text Colour: inherit

- Bold: inherit

- Italic: inherit

- Underline: on

Active Style:

- Font Name: inherit

- Text Colour: inherit

- Bold: inherit

- Italic: inherit

- Underline: on

5) Click on “Create”

 

Theory:Hyper-text links in web pages can be styled for four different states:

- an un-clicked link ("Link Style" above)

- a link that has been clicked ("Visited Style" above)

- when the mouse is hovering over a link ("Hover Style" above)

- when the link is being clicked ("Active Style" above)



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 107

Create an external link in the Priene Text Box

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click “Text Editor” on the Tool Bar.

3) Click in the Priene text to select “Left Text Box”.

4) Select “here” at end of the Priene text block.

5) Click on “Insert Hyper-Text Link” on the Tool Bar.

6) Fill out the form as follows:

- Link Type: External

- URL: http://en.wikipedia.org/wiki/Priene

- Bookmark:

- Link Tooltip: Wikipedia

- Target Window: Open in a new window/tab

- Hyper-Text Link Style: Underline

7) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 108

Create an external link in the Miletus Text Box

Watch Video (optional)

 

INSTRUCTIONS

1) Click in the Miletus Text Box.

2) Select “here” at end.

3) Click on “Insert Hyper-Text Link” on the Tool Bar.

4) Fill out the form as follows:

- Link Type: External

- URL: http://en.wikipedia.org/wiki/Miletus

- Bookmark:

- Link Tooltip: Wikipedia

- Target Window: Open in a new window/tab

- Hyper-Text Link Style: Underline

5) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 109

Add Link to Nav Bar for the Archaeology page

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click “Select Object” on the Tool Bar.

3) Click on Nav Bar Link “Facilities”.

4) Use the Status Bar to check that you have Nav Bar Link “Facilities” selected.

5) Click “Copy to Clipboard” on the Tool Bar.

6) Click “Select Box Behind” on Tool Bar (to select “Tabbed Nav Bar”).

7) Click “Paste Nav Bar Link from Clipboard” on the Tool Bar.

A copy of the “Facilities” Nav Bar Link will have been pasted on top of the “Apartments” link. (This is because it always pastes link to the top left corner of the nav bar.)

8) Click “Move/Resize” on the Tool Bar.

9) Move the new link to the following location:

X = 595

Y = 73

It should retain the following dimensions:

Width = 180

Height = 33

10) Click “Properties” on the Tool Bar.

11) Change the properties as follows:

- Link Type: Internal

- Target Page: Archaeology

- Link Text: Archaeology

- Link Tooltip: blank

- Bookmark: (None)

- Target Window: Open in same window/tab

12) Click on “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 110

Re-Generate and Re-Display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display any of your pages (e.g. Facilities.htm) in your web browser. Click on the nav bar links to access the new page..

4) On the Archaeology page click on the external links you created.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 111

Create Page “Sunsets”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Folder Tree” tab and make sure that the “Root Folder” and “Pages” tree nodes are expanded.

2) Right-click on “Pages”.

3) Click on “Create Page...”.

4) Fill out the form as follows:

- Name: Sunsets

- Description:

- File Name: Sunsets.htm

- Template: Resort

- Title: Sunsets

- Description: Holiday Resort, Kusadasi, Turkey

- Keywords: Golf, Spa, Holiday, Kusadasi, Turkey

5) Click on “Create”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 112

Create a Column Box on Page “Sunsets”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Page Designer” tab.

2) Click on “Select Object” on the Tool Bar.

3) Click on “Page Content Box” (hint: the central blue-border box).

4) Use the Status Bar to check that you have “Page Content Box” selected.

5) Click on “Select Space” on the Tool Bar.

6) Select a large block of space in “Page Content Box”.

7) Click “Insert Column Box” on the Tool Bar.

8) Fill out the form as follows:

- Name: Sunsets Column Box

- Description:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: (None)

- Full Height Columns: (leave unchecked)

9) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 113

Move/Resize “Sunsets Column Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/resize “Sunsets Column Box” as follows:

X = 18

Y = 109

Width = 964

Height = 482



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 114

Insert “Samos” Image within “Sunsets Column Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a large rectangle of space within “Sunsets Column Box”.

3) Click “Insert Image” on Tool Bar.

4) Fill out the form as follows:

- Name: Sunset Samos Image

- Description:

- Image: Media\SunsetSamos.JPG

- Alternative Text: The sun setting over the Greek island of Samos

- Title: Click to view full size

- Thumb Nail: Checked

5) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 115

Move/Resize “Sunset Samos Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/resize “Sunset Samos Image” as follows:

X = 19

Y = 109

Width = 636

Height = 477



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 116

Insert Stack Box into “Sunsets Column Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Obj1ect” on the Tool Bar.

2) Click on “Sunsets Column Box” (hint: black area to right of photo).

3) Use the Status Bar to check that you have “Sunsets Column Box” selected.

4) Click on “Select Space” on the Tool Bar.

5) Select a large rectangle of space on “Sunsets Column Box” (hint: black area to right of photo).

6) Click “Insert Stack Box” on Tool Bar.

7) Fill out the form as follows:

- Name: Sunsets Stack Box

- Description:

- Box Effect: (None)

- Background Image: (None)

- Background Colour: (None)

8) Click “Update”.



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 117

Move/Resize “Sunsets Stack Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Sunsets Stack Box” as follows:

X = 655

Y = 111

Width = 323

Height = 477



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 118

Insert Parasol Image

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a large rectangle of space within “Sunsets Stack Box”.

3) Click “Insert Image” on Tool Bar.

4) Fill out the form as follows:

- Name: Sunset Parasol Image

- Description:

- Image: Media\SunsetParasol.JPG

- Alternative Text: Parasol silhouetted at sunset

- Title: Click to view full size

- Thumb Nail: Checked

5) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 119

Move/Resize “Sunset Parasol Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Sunset Parasol Image” as follows:

X = 655

Y = 113

Width = 323

Height = 234



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 120

Insert Palms Image

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Select Object” on the Tool Bar.

2) Click on “Sunsets Stack Box” (hint: the black rectangle below the parasol photo.

3) Use the Status Bar to check that you have “Sunsets Stack Box” selected.

4) Click on “Select Space” on the Tool Bar.

5) Select a large rectangle of space within “Sunsets Stack Box” (in the black rectangle below the parasol photo).

6) Click “Insert Image” on Tool Bar.

7) Fill out the form as follows:

- Name: Sunset Palms Image

- Description:

- Image: Media\SunsetPalms.JPG

- Alternative Text: Palm trees at sunset

- Title: Click to view full size

- Thumb Nail: Checked

8) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 121

Move/Resize “Sunset Palms Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move/resize “Sunset Palms Image” as follows:

X = 666

Y = 347

Width = 312

Height = 241



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 122

Put Slide Box on “Sunset Samos Image”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Object” on the Tool Bar.

2) Click on “Sunset Samos Image” (hint: the large photo on the left).

3) Click on “Select Space for Slide Box” on the Tool Bar.

4) Select some space towards the top of the image.

5) Fill out the form as follows:

- Name: Sunset Slide Box

- Description:

- Box Effect: Blue Border Box

- Background Image: (None)

- Background Colour: (None)

- Anchor Point: Top Left

6) Click on “Update”



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 123

Move/Resize “Sunset Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Move/Resize” on the Tool Bar.

2) Move/Resize the new Slide Box as follows:

X = 69

Y = 115

Width = 536

Height = 123



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 124

Insert Text Box on “Sunset Slide Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Select Space” on the Tool Bar.

2) Select a rectangle within “Sunset Slide Box”.

3) Click on “Insert Text Box” on the Tool Bar.

4) Fill out the form as follows:

- Name: Sunset Text Box

- Description:

- Background Image: (None)

- Background Colour: (None)

5) Click on “Update”.





VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 125

Move/Resize “Sunset Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click on “Move/Resize” on the Tool Bar.

2) Move and resize the “Sunset Text Box” as follows:

X = 77

Y = 134

Width = 509

Height = 84



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 126

Enter Text in “Sunset Text Box”

Watch Video (optional)

 

INSTRUCTIONS

1) Click “Text Editor” on the Tool Bar.

2) Type (or paste) the following:

The Kusadasi Golf & Spa resort is set in unspoilt Turkish countryside in the hills behind Kusadasi with stunning view of mountains, the Aegean Sea, and the Greek island of Samos - behind which the sun is setting below...



VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 127

Add Link to Nav Bar for the Sunsets page

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Template Designer” tab.

2) Click “Select Object” on the Tool Bar.

3) Click on the Nav Bar Link “Facilities”.

4) Use the Status Bar to check that you have Nav Bar Link “Facilities” selected.

5) Click “Copy to Clipboard” on the Tool Bar.

6) Click “Select Box Behind” on Tool Bar (to select “Tabbed Nav Bar”).

7) Click “Paste Nav Bar Link from Clipboard) on the Tool Bar.

8) A copy of the “Facilities” Nav Bar Link will have been pasted on top of the “Apartments” link.

9) Click “Move/Resize” on the Tool Bar.

10) Move the new link to the following location:

X = 780

Y = 73

Width = 180

Height = 33

11) Click “Properties” on the Tool Bar.

12) Change the properties as follows:

Link Type: Internal

Target Page: Sunsets

Link Text: Sunsets

Link Tooltip: blank

Bookmark: (None)

Target Window: Open in same window/tab

12) Click “Update”

VIZIGEN-PAGE WEB DESIGN TRAINING COURSE - STEP 128

Re-Generate and Re-Display

Watch Video (optional)

 

INSTRUCTIONS

1) Click on the “Web Site Files” tab.

2) Click the “Generate” button.

3) Display any of your pages (e.g. Facilities.htm) in your web browser. Click on the nav bar links to access the new page..

4) Optional - To upload the web site files to a web server simply enter the appropriate FTP credentials etc on the Project form on the Globals tab, return to the Web Site Files tab, and click on "Start".