web page maker tutorial

8/6/2019 Web Page Maker Tutorial

1/23

Webpage maker Manual

1. What is Webpage Maker?

2. General structure

3. List of elements

4. Inserting elements4.1 Image4.2 Text4.3 Buttons

4.4 Information4.5 Contact4.6 Description

5. Eliminating elements

6. Property panel6.1 Image Properties6.2 Text Properties

6.3 Button Properties6.4 Information Properties6.5 Contact Properties6.6 Description Properties6.7 General Properties

7. Page design7.1 Selecting elements7.2 Moving elements

7.3 Adjusting page size

8. Managing templates8.1 Loading template8.2 Saving template8.3 Deleting template

9. General options9.1 Preview

9.2 Accept9.3 Cancel


2/23

1. What is Webpage Maker?

The program Webpage Maker is a part of Hosting by 3D Vista that allowsusers to create WebPages for their virtual tours without needing anytechnical knowledge of programming.

With just a few clicks you can create a professional site with images, textsand advanced functions, as well as get the statistics on page views. Andby using web editor, your page will get better rankings in Google andother search engines.

The user interface of Webpage Maker has been designed so that theelements can be placed on screen by dragging and dropping. Oncefinalized, Webpage Maker will change this design into a real webpage

that would take hours if you would have to program it.

If you want to use the same design for your pages, you can save time bysaving the template and using them for all of your pages.

Webpage Maker works in synchrony with VistaZoo, so that the data usedin the portal is directly exported to tour as information (description,price, address, etc.)

To access Webpage Maker you need to host the tour first in 3DVistaHosting, either via SHOW 3 or Publisher 4, or using any of the online

services of 3DVista such as VistaZoo or VistaTour. Once the tour ishosted, we can access the Webpage Maker aplication from the Hostingmenu (in SHOW 3 or Publisher 4) or from the user control panel(VistaZoo and VistaTour)

Next we will explain what Webpage Maker offers and how to create yourpage in a few minutes.


3/23

2. General structure

Webpage Maker consists of the following elements:

List of page elements where the contents can be inserted/deletedand their sequence on the page can be changed.

Property panel of the elements.

Canvas where page design will be visualized.

General options of the program (Accept, Cancel, Preview)

Graphically we will find this design:


4/23

3. List of elements

Basically, the list of elements allows managing the contents that willappear on the finalized page.

These elements can be the following:

Pictures

Text

Buttons

Tour Information

Contact

Tour Description

Besides the elements shown in the Content window, there are two otherelements that always appear in the list and cannot be deleted:

General panel that defines page characteristics. It is always thefirst element of the list.

Viewer of the virtual tour is always the last element of the list.

The order in the Content list is important because it allows establishingthe elements which will be shown in the background or as the first one

compared to the others. Meaning that the first element of the list will beplaced in the most backward position and the last element will be shownin the first position above other elements.

To change the order of the elements there are two possibilities:

The first consists of the following steps:

Choose the element by clicking on it in the list of elements.

Use the following moving buttons:


5/23

Allows moving the element to the beginning of the list, tothe position that comes immediately after the General.It will be enabled only if the element is not already inthat position.

Allows moving the element to the position above itscurrent one. It will be enabled only if the element is notsituated right after the General at the beginning of thelist.

Allows moving the element to the position below itscurrent one. It will be enabled only if the element is notsituated right before the Viewer at the end of the list.

Allows moving the element to the end of the list, to theposition that comes immediately before the Viewer. Itwill be enabled only if the element is not already in thatposition.

The second way to change the order of the elements consists of thefollowing steps:

Go on the element in the list of elements and click on it with theMouse.

Drag the element to the desired position in the list.

When it comes to restrictions in the order of the elements, it is importantto remember that:

The elements General and Viewer have fixed positions thatcannot be changed.

None of the elements can be situated to the position before theGeneral and after the Viewer.


6/23

4. Inserting elements

4.1. Image

This option allows adding pictures to the webpage.

To insert an image, just select it from the drop-down menu and click theAdd button. The program will show a window of the archives from thecurrent directory where you can choose the file name of the image youwant to add. Then the chosen image will appear on the upper-left cornerof the canvas. To move it to another position, just click on it and drag it tothe wanted position. Also, the list of contents will renew itself to includethe new item as the last one before the Viewer.

You can add as many images as you like.

4.2. Text

The text option allows adding different texts to the finalized page.

To insert a text element just choose it from the drop-down menu and clickon the Add button. Then the text will appear on the upper-left corner ofthe canvas. To move it to another position, just click on it and drag it tothe wanted position. Also, the list of contents will renew itself to includethe new item as the last one before the Viewer.

You can add as many texts as you like.


7/23

4.3. Buttons

The button option allows adding button toolbar with previously setfunctions to the finalized page. It is especially useful for real estatevirtual tours.

To insert a button toolbar, just choose it from the drop-down menu andclick on the Add button. Then the button toolbar will appear on the upper-left corner of the canvas. To move it to another position, just click on itand drag it to the wanted position. Also, the list of contents will renewitself to include the new item as the last one before the Viewer.

You can only have one button toolbar on the finalized page.


8/23

4.4. Information

Information option allows adding a text box with tour properties to thefinalized page. This information can be obtained from VistaZoo and

VistaTour portals because it is necessary to first upload the virtual tourthere.

To insert an information element, just choose it from the drop-down menuand click on the Add button. Then the information will appear on theupper-left corner of the canvas. To move it to another position, just clickon it and drag it to the wanted position. Also, the list of contents willrenew itself to include the new item as the last one before the Viewer.

You can only have one information element on the finalized page.

4.5. Contact

Contact option allows adding a text box with tour authors contacts to thefinalized page. This information is obtained from VistaZoo and VistaTourportals because it is necessary to first upload the virtual tour there.

To insert a contact element, just choose it from the drop-down menu andclick on the Add button. Then the information will appear on the upper-left corner of the canvas. To move it to another position, just click on itand drag it to the wanted position. Also, the list of contents will renewitself to include the new item as the last one before the Viewer.

You can only have one contact element on the finalized page.


9/23

4.6. Description

Description option allows adding a text with tour description to thefinalized page. This information is obtained from VistaZoo and VistaTourportals because it is necessary to first upload the virtual tour there.

To insert a description element, just choose it from the drop-down menuand click on the Add button. Then the information will appear on theupper-left corner of the canvas. To move it to another position, just clickon it and drag it to the wanted position. Also, the list of contents willrenew itself to include the new item as the last one before the Viewer.

You can only have one description element on the finalized page.


10/23

5. Eliminating elements

Any of the inserted elements can be deleted from the finalized page.

There are two ways to do this.

The first one consists of:

Selecting the element or elements that you wish to delete (formultiple selection press the Shift or Ctrl + Mouse button).

Clicking the Delete button which will only be enabled when youhave already chosen some of the elements.

The other way is to select the element or elements and press the Delete

button on the keyboard.

On both cases you will be shown a confirmation Popup to make sure thatyou really wish to delete the selected elements. Once accepted, theseelements will be removed from the canvas and from the list of contents,renewing the position of other elements.


11/23

6. Property panel

Property panel allows the edition and modification of the properties ofthis element that you have chosen. By default, if no item has beenselected, you will be shown the properties of the general panel.

6.1. Image Properties

The image properties are the following:

Image type.

Dimensions of the image (width x height) in pixels.

File name as it has been saved in the hosting account.

Option for changing image. Options for establishing a link from the image.

The Change Image option allows substituting the current image byopening a window of files for choosing a new image and updating thechanges on the canvas and in the list of contents.

The options for establishing a link from the image allows linking theimage with a web page, e-mail address or with other type of addresses.This way, by clicking on the image on the finalized page, it will open thelink specified before with these options.

To establish a link, the following steps are necessary:

Write the address in the text box.

Choose the type of the address inserted from the drop-down menu.

Click the Link button.

If the address is not correct or does not correspond to the type selected,an error message will appear. When everything is correct, the link will beestablished.


12/23

It is also possible to delete a link. For this just delete the text box with thespecified address and click the Link button.

6.2. Text Properties

The text properties are the following:

Text content

Option for changing text font.

Option for changing text alignment.

Option for changing text color.

Option for establishing links.

To modify the text content, just write in the text box shown. To changethe font, click the Font button. Then you will see a Popup where you canchoose the options of type, style, size and the option of underlining thetext.

To change the alignment, just choose one of the possibilities (left, centre,right alignment) from the drop-down menu.

To change the color, click on the colored box and choose the color thatyou like.

Establishing links is somewhat more complicated than with images. Themain difference is that with images just one link was established but withtext you can establish various links with the words you choose.

To establish a link with a text element, follow these steps:

Choose the part of the text that you would like to use as a link. Todo this, go on the text box and choose the wanted area by usingkeyboard or the Mouse.

Write the address in the corresponding text box (making sure thatthe selected word is underlined).


13/23

Choose the type of the address (website, email address, other).

Click on the Link button.

The link will appear underlined and in blue color in the property panel aswell as on the canvas.

To have more links, repeat the steps above but choose new words youwant to link.

To edit each of the established links, click on each of them in the text box.

It is also possible to delete the links. For that just choose the link youwant to delete by clicking on it, then delete the specified address and

click on the Link button.

6.3. Button Properties

The button toolbar properties are the following:

Option for choosing button type.

Option for changing the font and color of text on buttons. Option for changing button alignment.

Option for modifying separation between buttons.

Option for showing or hiding text on buttons.

Type of image used for current button.

Dimensions of the image used for current button.

Option for showing or hiding current button.

Option for changing the image for current button.


14/23

There are 7 types of buttons on the button toolbar:

Map button. Gives access to the location of tour usingGoogle-maps.

Brochures button. Allows creating a brochure related tothe tour or edit it when it already exists. An option for thiswill be enabled.

Send button. Allows sending an email to the address thathas been established with the link.

Mortgage button. When clicked on it, will show a specificcalculator for carrying out a mortgage calculation.

Schools button. Allows access to a web page with a list ofall the schools and libraries situated in the same zone wherethe tour was made.

Community button. Allows access to a web page withstatistics and profiles of the zone where the tour is located.

Schedule button. Allows sending an email to the tourauthor to make an appointment on the shown date. For thatit is necessary to specify the email address of the tour

author in the corresponding options that are enabled whenyou choose this button while making the page.

By selecting any of these buttons, the properties of the particular buttonchosen will be visualized.

The alignment of the button toolbar can be horizontal o vertical, allowingthe buttons to appear as a row or column.


15/23

6.4. Information Properties

The information properties are the following:

Option for choosing if the fields are shown in 1 or 2 columns.

Option for showing or hiding the fields without content.

Option for changing color and font of field names.

Option for changing the color and font of field content.

Option for ordering position of the fields. For this it is necessary tochoose the field by clicking on it in the field list and use thefollowing buttons for increasing or decreasing a position:

Allows decreasing a position of the field chosen.

Allows increasing a position of the field chosen.

6.5. Contact Properties

The contact properties are the following:


16/23

Option for choosing if the fields are shown in 1 or 2 columns.

Option for showing or hiding the fields without content.

Option for changing color and font of field names.

Option for changing color and font of field content.

Option for ordering position of the fields. For this it is necessary tochoose the field by clicking on it in the field list and use thefollowing buttons for increasing or decreasing a position:

Allows decreasing a position of the field chosen.

Allows increasing a position of the field chosen.

Options for changing the position and alignment of the contactimage with possibilities as left, right, upper, lower and centrealignment.

6.6. Description Properties

The description properties are the following:

Content of tour description (cannot be edited).

Option for changing font of description text. Option for changing the alignment of description text. For this it is

necessary to choose one of the options (left, centre and right) fromthe drop-down menu.

Option for changing the color of description text.


17/23


18/23

The Meta Tags option allows including tags of description and keywordsfor searches to your page. For this click on the option and a Popupwindow will appear for enabling the corresponding options and insertingthe necessary texts.


19/23

7. Page design

Page design will be achieved through a canvas that allows showing all theelements that the page will include, as well as its position andappearance.

When no page has been created, an empty canvas will appear with theViewer in the center.

7.1. Selecting elements

There are two ways to select the elements:

By clicking on the corresponding item in the element list. By clicking on the corresponding element on the canvas.

One way or another, the element will be shown as selected on the canvasas well as in the content list. Also, in the property panel the propertiesrelated with that element will be shown.

To delete the selection, just click on any part of the canvas that does nothave any elements.


20/23

7.2. Moving elements

To move an element on the canvas, select it first. Once it has beenchosen, it can be moved by using the arrows on the keyboard or bydragging it with the Mouse.

Description as well as text component can be resized. Do to that use thecorners of the text box and drag the Mouse to change the size of theelement.

7.3. Adjusting page size

There are two ways of visualizing the page:

Visualization with the size adjusted to the screen. (This is theoption that will be shown by default.)

Visualization with the real size of the page.

Furthermore, the page can be shown in the full screen mode or in thenormal way. With both ways the two visualization possibilities are

permitted.

To change the visualization one or another way or to change to full screenmode, use the buttons that can be found in the lower part of the canvas.

The canvas also has an adjustment bar that allows resizing the page fromthe adjusted size to the real size.


21/23

8. Managing templates

After creating a design that you want to use for more than one page it isadvisable to save it as template to save yourself from the trouble ofcreating the same design over and over again. Simply with choosing atemplate, the page that we are editing will obtain its characteristics.

It is possible to load a template, save the current page as a template ordelete a template created by the user.


22/23

8.1. Loading template

To load a template, choose it from the drop-down menu. The canvas,content list and also the property panel will renew itself with the contentsof the chosen template. The changes that have been made previously willnot be saved, making the loaded template the current page.

In the drop-down menu are the templates that are predefined by theprogram as well as the templates that the user has created.

8.2. Saving template

To save the current page as a template, click on the Save button in thetemplate panel.

A Popup window will appear for writing the name which you wish to usefor saving the template and afterwards the template will be created.

Once created, the same template will appear in the end of the drop-downmenu after all the other templates.

When you wish to make changes to a template and save them, you have tosave it as another template. In other words, once that the template hasbeen saved, it can not be modified.

8.3. Deleting template

It is important to mention that only these templates that have beencreated by the user can be deleted. The predefined templates cannot bedeleted. The Delete button will only appear enabled when user createdtemplate has been loaded.

To delete a template, load it and click on the Delete button in thetemplate panel. This way the template will be deleted from the drop-downmenu, although the content keeps being loaded.

9. General options

General options of the program are associated with the generation of thedesigned page. There is an option of preview; option of accepting thechanges and close the program and option of closing the program withoutsaving the changes made.


23/23

9.1. Preview

The preview option allows obtaining a preliminary version of howsomething will appear on the current page, without having created it yet.That is why it is a useful way of seeing the changes made and continuingmaking modifications before having the definite version.

In the preview of the page all of the components are shown with thefunctions that have been specified for them. In other words, the links thathave been added to the pictures, texts and actions associated with thebuttons, will be active.

9.2. Accept

Accept option allows saving the current page with all the changes thathave been made and close the program.

9.3. Cancel

Cancel option allows closing the program without saving the changes

made. Before a Popup will show to confirm that no changes will be madeand that the program will close if you accept it.

web page maker tutorial

Documents