Website Realizer

Getting Started

Step 1: Create a new website from the Blank Template

Step 2: Add elements to the template page

Step 3: Add elements to the index page

Advanced Tutorial

Step 1: Create a new website from a template

Step 2: Prepare the main image

Step 3: Prepare the dark wood texture for the background

Step 4: Create a half transparent image for the light effects

Step 5: Generate color scheme from the main image

Step 6: Customize the template page

Step 7: Customize the navigation bar

Step 8: Customize the index page

Step 9: Change the styles of the text on the page

Step 10: Change the colors of the images

Step 11: Change the colors of the vertical separator

Step 12: Use heading tags

Step 13: Change the title, add keywords and description

Step 14: Add favicon (Favorite Icon)

Insert and edit text

Style the text on a page to make it look more consistent across browsers

Style a hyperlink

Add background color and image to a page

Wrap text around an image

Add YouTube to a web page

Publish your website using FTP or SFTP

Create a form for your visitors to send information to you through email

Create a new template page from the original one but with slightly different styles

Create a new background image for the new template page

Create a new style rule for the index page

Use the new background image in the content-area style

Apply the newly created main-content-area style rule to the index page

Create a flexible box

Create a flexible box from an image with gradients

Create gradient button using the Image Editor

Create a horizontal navigation bar from scratch

Create images used by the navigation bar

Create a white arrow image for sub-menu

Create the navigation bar

Create a new navigation bar using the styles of another navigation bar

Create Image Slider

Create dark wood texture

Create dark metal sheet

Add drop shadow effect to an image

Add drop shadow effect to an image with multiple layers

Application main window

Application main menu

Publish Site...

Sorting Order of Folders and Files

Form and Form Elements

Application main toolbars

Element Order toolbar

Preview and Publish toolbar

Preferences toolbar

Website Explorer toolbar

Application dialogs

Create New Website From Template Dialog

Create a New Website From Blank Template Dialog

Create a New Blank Website Dialog

Open Website Dialog

Publish Website to Local Directory Dialog

Remove Directories and Files Dialog (Local Directory)

Publish to Remote Site Dialog

Create New FTP Site Settings Dialog

Remote Site File Name Filters Dialog

Remove Directories and Files Dialog (Remote Site)

Edit FTP Site Settings Dialog

Maintain Websites dialog

Restore Site Dialog

Maintain Website Templates Dialog

Site Properties Dialog

Text Element Styles Dialog

Add Inner Container Dialog

Template Page Properties Dialog

Template Page Favorite Icon

Template Page Javascript

Page Properties Dialog

Page Properties Style tab

Page Properties Favorite Icon

Page Properties Javascript

HTML Properties Dialog

Web Template Dialog

Mark As Footer Dialog

Text Element Editor

Text Element Editor Main Menu

Text Element File

Text Element Edit

Text Element Format

Text Element Font Color

Text Element Highlight Color

Text Element Insert

Text Element Tools

Text Element Help

Text Element Editor Toolbars

Text Element Edit toolbar

Text Element Search and Spell Checker toolbar

Text Element Font and Style toolbar

Text Element Format toolbar

Text Element Insert and Help toolbar

Text Element Editor Dialogs

Text Element Find/Replace Dialog

Text Element Image Properties Dialog

Text Element Check Spelling Dialog

Text Element Image List Dialog

Text Element Add Hyperlink Dialog

Text Element Insert Bookmark Dialog

Text Element Insert Special Character Dialog

HTML Source Editor

HTML Source Editor Main Menu

HTML Source File

HTML Source Edit

HTML Source Help

HTML Source Editor Toolbar

HTML Source Editor Dialogs

HTML Source Find/Replace Dialog

Insert Table Dialog

Table Element Editor

Table Element Editor Main Menu

Table Element File

Table Element Edit

Table Element Format

Table Element Font Color

Table Element Highlight Color

Table Element Insert

Table Element Table

Table Element Tools

Table Element Help

Table Element Editor Toolbars

Table Element Edit toolbar

Table Element Search and Spell Checker toolbar

Table Element Font and Style toolbar

Table Element Format toolbar

Table Element Insert and Help toolbar

Table Element Table toolbar

Table Element Editor Dialogs

Table Element Find/Replace Dialog

Table Element Add Hyperlink Dialog

Table Element Image Properties Dialog

Table Element Insert Special Character Dialog

Table Element Check Spelling Dialog

Table Properties Dialog

Table Row Properties Dialog

Table Cell Properties Dialog

Image Properties Dialog

Image Properties Link Tab

Form Properties Dialog

Form Button Properties Dialog

Form Image Button Properties Dialog

Form Checkbox Properties Dialog

Form Radio Properties Dialog

Form Text Properties Dialog

Form Textarea Properties Dialog

Form File Upload Field Properties Dialog

Form Selection List Properties Dialog

Import CSV File Dialog

Form Hidden Field Properties Dialog

IFrame Properties Dialog

Audio Properties Dialog

Flash Movie Properties Dialog

Flash Video Properties Dialog

QuickTime Properties Dialog

Windows Media Properties Dialog

Real Media Properties Dialog

Rollover Image Dialog

Round Corners Dialog

Drop Shadow Dialog

Lightbox Properties Dialog

Lightbox Styles tab

Text or Table Lightbox Properties Dialog

Image Rotator Dialog

Image Rotator Select Images Dialog

Image Rotator Image Properties Dialog

Image Slider Dialog

Image Slider Select Images Dialog

Image Slider Image Properties Dialog

Image Slider Button tab

Image Slider Options tab

Nivo Slider Dialog

Nivo Slider Select Images Dialog

Nivo Slider Image Properties Dialog

Nivo Slider Buttons tab

Nivo Slider Caption tab

Nivo Slider Options tab

Fancy Transitions Dialog

Fancy Transitions Select Images Dialog

Fancy Transitions Image Properties Dialog

Fancy Transitions Buttons tab

Fancy Transitions Caption tab

Fancy Transitions Options tab

Photo Gallery I Properties Dialog

Photo Gallery I Image Properties Dialog

Photo Gallery 1 Caption tab

Photo Gallery I Styles tab

PHP - Send Form to Email Dialog

PHP Send Form to Email Email Settings

PHP Send Form to Eamil Validation Messages

PHP Send Form to Email Completion Action

PHP Send Form to Email Styles tab

Navigation Bar Dialog

Navigation Bar Items Toolbar

Navigation Bar Style Tab

Navigation Bar Dimensions tab

Navigation Bar Text tab

Navigation Bar Background tab

Navigation Bar Border tab

Navigation Bar Sub-menu Effects tab

Navigation Bar Active Page tab

Navigation Bar Style Dialog

Navigation Bar Templates Dialog

Maintain Navigation Bar Templates Dialog

PayPal Buy Now Button Dialog

Customize PayPal Buy Now Button

Customize PayPal Buy Now Button Checkout Page

PayPal Buy Now Button Advanced Variables

PayPal Add to Cart Button Dialog

Customize PayPal Add to Cart Button

Customize PayPal Add to Cart Button Checkout Page

PayPal Add to Cart Button Advanced Variables

PayPal View Cart Button Dialog

Customize PayPal View Cart Button

PayPal Donation Button Dialog

Customize Donation Button

Customize PayPal Donation Button Checkout Page

PayPal Donation Button Advanced Variables

PayPal Encryption Key Manager Dialog

PayPal Sandbox Account tab

Generate Keys Dialog

Generate Sandbox Keys Dialog

Configure External Browsers Dialog

Image Editor Dialog

Image Editor Toolbars

Image Editor New Image

Image Editor Resize

Flip or Rotate Image sub-menu

Filters sub-menu

Photo Enhancement

Artistic Effects

Blur And Sharpening

Blending Mode Menu

Image Editor Main Dialogs

Create Flexible Box Dialog

Insert Flexible Box Images Dialog

Insert Flexible Box JPG Options

Insert Flexible Box PNG Options

Insert Flexible Box GIF Options

New Image Dialog

Change Image Size Dialog

Add Borders Dialog

Perspective Dialog

Add Text Dialog

Add Text Outline tab

Add Text Dimensions tab

Add Text Shadow tab

Add Text 3D Effects tab

Load Texture Dialog

Add Shape Dialog

Add Shape Style tab

Add Shape Shadow tab

Add Shape 3D Effects tab

Fill Color / Texture Dialog

Gradients Editor Dialog

New Gradient Dialog

Edit Gradient Dialog

Fill Gradient Configuration Dialog

Photo Edge Effects Dialog

Insert Image Dialog

Insert Image JPG Options

Insert Image PNG Options

Insert Image GIF Options

Insert Image to Layer Dialog

Image Shrinker Dialog

Image Shrinker Settings tab

Capture Active Web Page to Image Dialog

Capture Active Web Page PNG Image Type

Capture Active Web Page GIF Image Type

Create Web Button Dialog

Web Button Color tab

Web Button Shadow tab

Web Button Text tab

Web Button Text Shadow tab

Web Button Image tab

Web Button File Format tab

Web Button JPG Format

Web Button GIF Format

Create Bullet Dialog

Create Bullet Image Dialog

Color Analyzer Dialog

CSS Style Editor Dialog

CSS Style Editor Text tab

CSS Style Editor Background tab

CSS Style Editor Borders tab

CSS Style Editor Box tab

CSS Style Editor List tab

CSS Style Editor Custom tab

CSS Style Editor Elements tab

Custom CSS Dialog

Check HTTP Links Dialog

Preferences Dialog

Website Preference

Web Page Preference

Configure Font Families Dialog

Add Font Family Dialog

Edit Font Family Dialog

Configure Page Extension Dialog

Edit Character Sets Dialog

HTML Source Editor

User Dictionary

Spelling Checker Options

Create Dictionary Dialog

Browser Preview

Publish Website

Licenses and Contacts

End User License Agreement

Third Parties Licenses

System Requirements

Step 10: Change the colors of the images

In this section, we will change the colors of the images to match the color scheme.

Select "greenarrow.png" from the Website Explorer.

Double click on it to load it to the Image Editor. Click down arrow of this button . Select Colors -> Lookup. Select the option "Retain transparency".

Click on the Edit button of the Lookup Dialog to open the Gradient Editor.

Press the button "New" to open the New Gradient Dialog to create a new gradient. Set the color of the stop on the left (with red circle) to #7D6F17. This color can also be selected from the custom colors of the Color Dialog.

Set the color of the stop on the right (with red circle) to #FDFCF7. This color can also be selected from the custom colors of the Color Dialog.

Click OK to create this gradient. Click OK again to exit the Gradient Editor and return to the Lookup Dialog. Click OK to apply this gradient to the image.

The image has changed from to . Click the button "Insert to Site". Click OK to overwrite "greenarrow.png" with this new image.
Select "arrow.png" from the Website Explorer.

Double click this image to load it into the Image Editor. Click this button to open the Fill Color Dialog. Set the fill color to #AF1402.

Click OK to apply this color to the image. Click the "Insert to Site" button and overwrite "arrow.png" with this new image.
Select "arrow.gif" from the Website Explorer and repeat 2 above to set the color to #AF1402 and overwrite the original image with the new one.
Select "icon1.png", "icon3.png", "icon4.png" and "icon6.png" from the Website Explorer. Repear 2 above for each image but use the color #FCBA58.
We will create a new "Read more..." image as the original one has drop shadow so the above method cannot be used. Select Tools -> Image Editor. Click the down arrow of this button and select New -> blank. Set the image size to 150 x 30.

Click this button to open the Add Text Dialog. Select the font "Arial". Select "bold" for Style. Set the size to 11. Set the color to #FCBA58. Enter the text "Read more...".

Press the OK button to add this to a layer. Press the button "Insert to Site". Select "PNG" for the image type and enter the name "readmore.png".

Press the OK button to overwrite the original image.