Build a complete website using Site Creator

Overview:

 

FotoPlayer is not just for album but can also be used to build a complete website using the new SiteCreator feature! You only need a very basic HTML knowledge to write your site page contents. Site color themes, automatic page fit to browser size,  header logo and site menu links, footer & background  all  will be easily customizable from the SiteCreator tab.

 

Feature is intended for users with basic HTML knowledge and new to site design, who wish to build a fast simple elegant website around their album. You can choose a style from the included different ready-made site templates or customize and create your own style.

 

Site Creator can also be used to customize just the album page content (to add header logo and site links) with other page links disabled. You can add your

 

 

Steps:

1. Enable Site Creator and choose a site template

2. Customize the header site page links if required

3. Edit page templates to add your contents using 'Edit Pages' link.

 

Building a site with album can never be easier than above simple steps.

 

 

Features in detail:

 

Site themes, Background image

 

 

 

a. To use Site Creator, select 'Enable Site Creator' option.

 

b. Select one the ready-made themes from the list. Selecting a ready-made theme will automatically change the color settings in this tab as well as in the 'Themes' tab.

 

c. Customize page background color  and image if required . Color and Image applies for all the site pages including the album page.

    Note: "Bg image" feature can be used for the album page (when flash transparent background feature enabled in Options->Settings tab) even if Site Creator feature is disabled.

 

Template previews:  Check this page to preview different site templates.

 

   

 

 

 

Site header customization

 

 

 

 

 

a. To display logo in the header , left aligned, select 'Enable Logo' option and customize the image sitelogo.png. Click 'Edit' button to open the folder containing this image.

Image is in PNG transparent format is preferred as it can blend nicely with the header background color or the image.

 

b. Adjust the heade width. Default is 90% of the browser width. You can also set to a fixed width in pixels (like 800). This is preferred if the flash album content itself is in fixed width (set in FP skin general tab)

 

c. Customize the color and menu link names if required.

     

     Note: If you change the menu title, you also need to change the template name in FP skin 'site' folder.
 For example, If you change Links (links.html) to   Clients  (clients.html), then rename Links.htt file to Clients.htt in 'site' folder (Use 'Edit Pages' button to open this folder)

 

 

d. There is a header seperator for which you customize the color and size. To disable set the seperator height  to 0.

 

e. Instead of using Site Creator generated header, you can also use own custom header html coding. To enable custom header, select 'Use Custom Header' feature and write the HTML code for the header in header.inc file. To open the folder containing this file, use 'Edit header' button.

 

f. There is a special option to disable header Bg Color. When disabled, header bg will be transparent and the site background color or image will be visible. This feature may be preferred when using Site background image.

 

 

 

 

 

Site page content customization

 

 

 

 

a. To edit the site page contents, edit the template files in the Site template folder. use 'Edit Pages' button to open the folder.

b. Edit the templates Contact.htt, Home.htt , Links.htt , Portfolio.htt, Services.htt using plain text file editor like notepad/wordpad,TextEdit, UltraEdit

c. In each template, add the page content within below area. No need to make any other line edits.

 

<!-- Default page content starts here  -->

<br>

<br>

<br>

<br>

<center> Contact Page template </center>

<br>

<br>

<br>

<br>

<!-- Default page content Ends  -->

 

 

d.  When adding your site contents, if you need to keep site content resources (like javascripts, images, style sheet) use the following files/folders.

 

1.  Keep site content images in the folder site/images/ and when referring the image in your HTML code use <img src="site/images/yourimage.jpg" />

2.  If you wish to add any javascript coding, add to the file site/site.js file.  (this file included in all site pages)

3. To add style sheet code, add  to site/site.css (this file included in all site pages)

 

 

e.  'AutoFit to browser height' feature will automatically fit the site header , site content and site footer within  browser width and height. Thus avoiding the browser scroll bars.

    Browser scroll bar will appear only if the site page content exceeds the browser height.

 

f. Similar to header background color disable, you can also disable the bg color for site pages. If disabled, Site bg color or image will be visible for the content.

 

 

 

 

Site footer  customization

 

 

 

 

a. You can customize the footer color, height and content for the site pages. To edit the footer text, use 'Edit Footer' button and edit the file footer.inc swith plain text editor.

b. Footer text customization applies for all page except the album page (Album page footer can be customized by editing default.htt template in FP skin folder)

 

 

 

 

Disclaimer:  

Please note that FotoPlayer only provides the Site templates. You'll be responsible for writing the content in each page and cannot expect support to customize the pages for your requirements or for any queries related to HTML coding issues in your page contents.

 

 

To learn HTML/CSS basics:

W3Schools.com (HTML)

html.net  (HTML)

W3Schools.com (CSS)

learn-css-tutorial.com  (CSS)

 

 

 

 

 

 

 

 

 


FotoPlayer User Guide v1.5

 Current page link: Building website using Site Creator