The SPOTFOLIO Tutorial: 10 Easy Steps To a Full Website

Home	Packages	Start Now!	Screen Shots	Affiliate	Contact	FAQ	Login

The SPOTFOLIO Tutorial: 10 Easy Steps To a Full Website

The best way to use this tutorial is to start by reading the "Step Notes" of each step.
Then follow the "click by click" step instructions.

Before you know it, you will have a 4 tier professional website.

Notice the help boxes in each step:

Tips worth special attention

Click by click instructions

Have fun creating your new online portfolio!

Printer Friendly Version

Video Version

PLAY

Website Structure Diagram
The following website structure diagram illustrates the website you will create. Each of the 10 steps will guide you in creating another element.	SEE EXAMPLE SITE...

Step 1:

Edit The Home Page

1. Make the desired changes to the page design by using the various editing tools. ***

The "Show Table Borders" tool may be very helpful in understanding the structure of the page design. It shows you the otherwise hidden borders of the tables which construct the web page.

Change images in the page by:

Right clicking the image
Select "Image Properties"
In the "Edit Image" dialog box click upload
Select the image you wish to upload
Mark generic image
Select "This image is replacing the existing one..."
Click "OK"

This will change and resize the image for optimal compatibility with the page.

2. Replace the sample content with yours.
-- Notice the sample content, it will guide you in selecting relevant content for this page.

3. Click the page properties button and fill in the property fields.

4. Save the page

The "Preview" button will show you exactly how your site will look when it is viewed by visitors and allow you to test its functionality. For an updated view, save before previewing.

*** This sub-step is optional.



		The home page is the first page of your site. It is where your site's visitors arrive when they enter the site's address in an internet browser. From this page your site's visitors will navigate to the rest of the site. The home page of your new website is created automatically with your account. When you log in for the first time you will notice it is already there. The name of the home page is index.html. Every website must have one page named index.html and this page will, by default, function as the site's home page. As this page was already created according to the website design template you chose, all you need to do is edit it.

Step 2:

Create The First Sub Page

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "New page form template"
From the drop down list select "Sub Page"
Click "Create Page"

2. Make the desired changes to the page design by using the various editing tools. ***

Preserve the professional look and feel of the site by applying similar design changes to the ones you applied on the home page. Try to be consistent throughout the site!

3. Replace the sample content with yours.
-- Notice the sample content, it will guide you in selecting relevant content for this page.

4. Click the page properties button and fill in the missing property fields.

5. Save the page

To delete a page, click the red delete button:

*** This sub-step is optional.



		From this page on you will create each new page you wish to add to your site. But that doesn't mean repetitious work! All sub pages share the same general page structure. This property allows you to: Save valuable time Avoid repeated work And preserve the professional look and feel of the site By cloning the first sub page. So, this first Sub Page will be the prototype of the following sub pages. You will edit this page once, and clone the rest of the Sub Pages.

Step 3:

Clone The Next Sub Pages

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "Clone of existing page "
From the drop down list select the previous Sub Page you created
Click "Create Page"

2. Replace the content of the cloned page with the relevant content of this new page.

3. Save the page

4. Repeat this step for the rest of the sub pages.

Keep the site easy to navigate by preserving the original number of navigation bar items of the template (5 overall - home + 3 Sub Pages + 1 Portfolio Page).

It is recommended to add additional Sub Pages as links from other pages. We will discuss this in more detail in step 8.
For this step, create only the main Sub Pages of the site as shown in the site structure diagram.



		This time, you will create a new Sub Page by cloning the previous Sub Page you already created and edited. Cloning a page creates an exact copy along with all design changes, content and links.

Step 4:

Create The Portfolio Page

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "New page from template "
From the drop down list select "portfolio page"

2. Make the desired changes to the page design by using the various editing tools. ***

3. Replace the sample gallery names and descriptions

Change the sample images in the page by:

Right clicking the image
Select "Image Properties"
In the "Edit Image" dialog box click upload
Select the image you wish to upload
Mark generic image. This is not a gallery image!
Make sure to select "This image is replacing the existing one..." .

This will change and resize the image for optimal compatibility with the page.

4. Save the page

*** This sub-step is optional.



		This page is the entry point to your portfolio. From here the site's visitors will navigate to the different galleries. Each portfolio page has 4 galleries. You can of course add more galleries or delete galleries if you don't need as many. If you look at the website structure diagram above, you will see that this page is the last page that will be part of the main navigation bar.

Step 5:

Create The Navigation Links

1. Now that you're done creating all the pages that will be linked to from the main navigation bar of the site, it is a good opportunity to create these links.

To link the pages to the corresponding navigation bar item:

Go back to the home page
Highlight a navigation bar item (e.g. "Biography")
Change the text *** (e.g. "About Me")
Highlight and click the link button
In the link dialog box follow option 1
-" Linking to a page on your site"
Select the corresponding page
Repeat this for all navigation bar items

Do this for each of the pages you created so far.
Save each page to preserve the changes you made.

Note: You may edit the color, size and decoration of links just like any other text.

2. Preview your site by clicking the "Preview" button and check that all your links work properly.

You can link images just as you link text.
A linked image will be marked with a blue border.
If you wish to remove this border, "Right Click" the image, select "Image Properties" and set the border to 0 (zero).

To cancel a link, select the linked text or image and click the "Unlink" button:

*** This sub-step is optional.



		In this step you will accomplish the important task of linking the site's pages. At the end of this step you will preview your site and for the first time you will really get a feel of how your site will look and work when it is complete!

Step 6:

Create The First Thumbnails Page

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "New page from template "
From the drop down list select "thumbnails page"

2. Make the desired changes to the page design by using the various editing tools. ***

3. Replace the sample thumbnails with your own images

Change the sample thumbnails in the page by:

Right clicking the image
Select "Image Properties"
In the "Edit Image" dialog box click upload
Select the image you wish to upload
This time mark gallery image!

This will automatically create the dynamic image gallery.

4. Link the navigation bar item to the corresponding pages.
-- Follow the linking instructions of the previous page.

5. Save the page

*** This sub-step is optional.



		The Thumbnails Page gives an overview of each gallery by presenting miniaturized pictures which represents the larger and more detailed picture. For every image you upload to this page 2 versions are automatically created, resized and linked: thumbnail (up to 90x90 pixels) and large view (up to 350x350 pixels). Each thumbnails page has 24 images. A large view page is also automatically created for you when you create the first thumbnails page. The larger pictures will be displayed, along with the title and description you provide, in the Large View Page when a thumbnail is clicked. Upload your images as is! All image manipulation required for the gallery is completely transparent to you and is performed automatically by the software. However, to speed upload time, it is recommended to upload images which weigh less than 3MB.

Step 7:

Clone The Next Thumbnails Pages

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "Clone of existing page "
From the drop down list select the previous thumbnails page you created

2. Replace the images in the page by uploading the images of this gallery.
-- Remember these are gallery images! Follow the upload instructions of the previous page.

3. Save the page

4. Repeat this step for the rest of the thumbnails pages.

5. Now that you're done creating the galleries you need to link them to the portfolio page.

To link the thumbnails pages to the portfolio page:

Go back to the portfolio page
Highlighting a gallery name or select its image
Clicking the link button
In the link dialog box follow option 1
-" Linking to a page on your site"
Select the relevant thumbnails page
Repeat this for all galleries
Save the portfolio page



		Here too we will use cloning as a mean of saving time and preserving the site's professional look and feel. Cloning the previously created Thumbnails Page will copy all links and design changes. You will not need to create links to other pages on the site as you did in the previous step. This significantly reduces the required work in this step.

Step 8:

Edit The Large View Page

1. Make the desired changes only to the page navigation bar and design by using the various editing tools.

Refrain from changing the: Gallery Name, Image Title and Description and the image itself.
They are all generated dynamically by the software.

2. Save the page



		This large view page was created automatically when you created your first thumbnails page. You will find it in the pages drop down list under: "large_view.html". This one page will serve all thumbnails pages and its content will be dynamically generated.

Step 9:

Add Sub Pages

1. Create a new page by clicking the new page button .

In the "New Page Dialog Box"

Fill in the page title and name fields
Select "Clone of existing page "
From the drop down list select the closest sub page to the one you are creating

2. Replace the content of the cloned page with the relevant content of this new page.

3. Create a link to the new page from the relevant page on your site.

To link the page:

Go back to the relevant page
Highlight the text or select the image to link from.
Click the link button
In the link dialog box follow option 1
-" Linking to a page on your site"
Select the new page

3. Save the page

4. Repeat this step for the rest of the sub pages you wish to add.
-- You are free to create as many additional sub pages as you like.



		This step is about making your site as rich in content as you like, while keeping it easy to navigate. Multiple items in the main navigation bar of the site make it hard for the user to navigate his or hers way around the site. That's why additional Sub Pages will be linked to the site via links from other pages rather then from the main navigation bar. For example, from the projects page you might add links to sub pages which elaborate on each of the projects.

Step 10:

Add Files

1. Upload the files you wish to add.

Upload files by:

Clicking the upload button
In the dialog box click browse
Select the files you wish to upload
You may upload 3 files simultaneously
When you are done uploading click finish

2. Go to the page where you want one of the file added.

3. Link the relevant text or image to the file.

Link text or image to a file by:

Highlighting the text or selecting the image
Clicking the link button
In the link dialog box click follow option 2
- "Linking to one of your uploaded files"
Click "Browse Server"
Select the files you wish to link to

4. Save the changed page

5. Repeat this step for the rest of the files you wish to add.



		This is a great way to enrich your site with content of formats other than web pages. You may add Word documents (files with .doc extension). For example, your CV would be a good file to add to the Biography page. Similarly, you can add: Adobe Acrobat files (.pdf extension) Music files (.mp3 extension) Or any other file you wish to add to your site and allow your visitors to download.

Enjoy Your New Site!

One final tip: check your site for typos by clicking the spell check button

-- The first time you run the spell checker it will ask you if you want to install it.
Click "OK" and follow the short installation process (you will only need to do this once).

Your done!

The only thing left to do is enjoy your new site!

But don't keep it to yourself, let others enjoy it too!
Send a link to friends, colleagues and customers and invite them to visit your site.