The following page will show you step by step how to create a simple website using WebsitePainter.
Download and install WebsitePainter
If you haven't done this yet, you need to download and install WebsitePainter. You can download the installer from here: http://www.ambiera.com/websitepainter/index.html
Create a new empty website
After you started the Website Painter program, it will ask you to create a new website from a template. Choose the first entry 'Empty page' to start with a new, empty website. The editor will now look like this, and you can start adding texts and images to the page:
Take a look at the 'Properties' window on the left. Here, you can quickly change the appearance of the page (or whatever element currently is selected). You can enter a Title for your page here (this is the text which usually appears for example in google if it displays your page as a search result) or the default colors for your links. Also, you can set a background color, gradient, or image if you like.
Add Text to your page
Unlike most other HTML editors which are using the dynamic HTML layout rules only, it is not possible to place texts, images and others freely where you want them to be. Using WebsitePainter, this is possible, and you are free to place any element where you want.
Simply click on the Entry in the Toolset on the right named 'Text' or alternatively, use the Menu 'Insert -> Text'. Then, click somewhere on the empty page. A text will appear, and clicking on it, you can now type in the text:
With the white rectangles around the area, you can resize the text, and by clicking and dragging the white rectangle with the arrows in it, you can move the text area anywhere you want. This works for every page.
As long as the text element is selected, you can see it's Properties in the 'Properties' window on the left. There, you can change the background color, border and other settings for this text if you want.
Add Images to your page
By using the 'Image' entry of the Toolset or the menu command 'Insert -> Image', you can place images on the website, similar to how the text worked. Once you placed your image, a file selection dialog will appear and ask you to select an image file on your disk. You can select any file of the format .jpg, .png, .gif and .bmp here.
In the 'Properties' window on the left, you can change the image file name which is shown, and other settings for its appearance, as for all other items as well.
Add other pages
If you are finished with that page of your website, you might want to create a second page. Take a look at the top left 'Documents' window, where your only, initially named page 'index.html' is shown. Just right-click on the root element (probably named 'unsaved website' if you haven't saved it yet), and choose 'Add Page'. Alternatively, you can also use the menu command 'Insert -> Add to Project -> Add Page'.
A new page will open, which you can again fill with content. You can edit its name in the 'Properties' window.
Add hyperlinks
To add links between your pages or to other websites on the internet, you can create Hyperlinks. To do this, mark the part of the text you want to be the hyperlink, right-click on it and select 'Insert Hyperlink...'.
Alternatively, you can also use the green hyperlink icon in the toolbar of the editor. This also works for images and shapes (be it transparent, normal or gradient shapes).
A dialog will now open where you can enter the URL of the hyperlink. You can also choose 'Page in this project' as Link type and then select another page in this website.
If you are creating a text link, there will also be a 'Style' section in that dialog. Here you can define and reuse global named styles for your links, if you want more then one or some special styles. Defining different hover colors, disabling underlined links and more is possible here.
Saving and Previewing the Website
To save your website, use the menu command 'File -> Save', so you can continue your work later on this page. You can also preview your website in your browser by clicking 'Publish -> Preview', or simply pressing the shortcut key F5.
Publish the website
Once you are finished with your website, you might want to publish it to an internet server, so that other people can read it. For this, choose the menu command 'Publish -> Publish to local disk'. A dialog will appear to select a target directory. When you press OK, all HTML and image files will be generated on your disk, in the directory you selected.
You now only need to upload these to your webserver or FTP server. For this you can use any FTP program. Ambiera recommends the free FTP client 'Filezilla' (http://filezilla-project.org/) or WinSCP (http://winscp.net/).
Copyright © by Ambiera e.U.