Understanding Design in Actinic - Part 1: Finding Your Way Around the Design Tab

[KB]

Designing in Actinic can take a little while to understand – this is just because there aren't that many programs that work in the way Actinic does. However, once you've learnt the basics, you will discover how flexible Actinic is to design with. The important thing is to spend a bit of time trying to understand how the various features work, before ploughing ahead and trying to make a specific change.

The 'Understanding Design in Actinic' tutorials will give you some basics that you need to know. More information can be found in the Help files

The Design Tab Layout

All windows within the Design tab are un-dockable and resizable. You can also close any of the windows that you don't use by clicking the button at the top-right corner of each window. Don't worry if you do this by mistake, they can be brought back by going to 'Window | Restore ... View Layout'.

The Point and Click Formatting Toolbar

Select a variable in your design and try some of the controls out (you can always use 'Undo' to change it back).

• The first drop down allows you to set whether the selected variable is normal text, or a heading. You can then select what sort of heading it is.
  
• The second drop-down list allows you to change the font of a particular variable. Try and only select one of the more common web fonts such as Arial, Verdana, Times New Roman or Georgia.
  
• The third drop down allows you to change the font size.
  
• The fourth drop down allows you to choose a style from the 'Actinic Stylesheet' to use for the variable.
  
• Finally, there are four buttons allowing you to set the font colour, and also set whether it is bold, italic or underlined.

You can see which of these appearance settings have been applied to a variable by right-clicking on a variable in the layout code and selecting 'Edit Appearance'.

The Layout Toolbar

There is a toolbar along the top of the 'Layout Code' panel. The buttons in this are described below.

Coding Errors

If the 'Coding Errors' icon becomes active when looking at page, it is because there is something the current page that will not appear or work correctly in the online store.

This can often be because has a variable has been used in the design that will not work on a particular type of page.

To view the errors, click the 'Click here to see errors' icon and the 'Coding Errors' window will open.

Then click on an error, and you will be taken to the layout containing the error. The faulty element will be highlighted within the layout code.

If you click the icon, Actinic will validate every single page in your store to check for errors. Again, click on an error to be taken to it.

You can also check all the coding errors in the site by clicking the 'Check Coding Errors' option on the 'Design' menu.