Getting started in Flux

Creating a new web site in Flux is easy, first, you need to decide wether you are making a site from scratch, or using one of the supplied templates to get you started.

Create a site from scratch

To create new site, simply open the Flux application and choose 'New' from the File menu. A new window will appear that looks like this

Choose a location for the web site to reside, type an appropriate name.
Once you have done this, you are ready to create your first page.

Creating a HTML Page

Press the 'New Page' button on the toolbar, this will pop down a sheet, in this sheet, you can choose what type of page to make, in most cirumstances, choose the first option, just a plain HTML file. Call the file whatever you want, but usually, the main page in a site is called 'index.html', the file extension is added for you, so just type in 'index'. Press 'OK'.

Creating a CSS file

Almost every site will have at least one CSS file, to create one is almost identical to creating a HTML file, but this time, choose the CSS option, and give it another name, you can call this anything you want, it's often useful to pick a name that describes the CSS, as you may have many more in future, for example, you could call it 'antique.css', for a style that is in an olde worlde style, again, the .css extension is added for you, so just type 'antique'. Press 'OK'.

Editing the page

Now you have created both a CSS, and HTML file, you can start creating your page, do this by simply double clicking the 'index.html' file you have just created. Once it opens, you need to associate the CSS file to the page, do this by pressing the 'StyleSheets' button on the toolbar, select the 'CSS' tab, and drag the CSS file you have just created to this area.

Press 'Done' Now, we have linked the CSS file to the HTML file, so we can start adding elements to the page, we will start with a simple container (div)...

Choose 'Div' from the 'New Element' toolbar menu, a new object will appear on the page that you can move around, and resize. By default, this object has overrides applied to it, so when you move or resize the object, only that object is affected.