• No results found

2 page. Table of Contents

N/A
N/A
Protected

Academic year: 2021

Share "2 page. Table of Contents"

Copied!
208
0
0

Loading.... (view fulltext now)

Full text

(1)

(2)

Table of Contents

Table of Contents ... 2

What is Artisteer? ... 6

What’s New in Artisteer 3.0 ... 7

How to work with the Artisteer interface? ... 8

Start-Up Dialog ... 9

Quick Access Toolbar ... 11

File Menu ... 11

Preview Area ... 18

Ribbon Bar ... 26

Quick Start Guide ... 27

Downloading Artisteer ... 27

Editions of Artisteer: Home&Academic vs. Standard ... 28

System Requirements ... 29

Installing Artisteer ... 31

Activating the Software ... 32

Creating an Artisteer Project ... 33

Using the Artisteer Samples ... 35

Creating a Website or Blog ... 37

Supported Content Management Themes and Web Design Templates ... 38

Creating a basic design ... 40

Design Customization ... 41

Supported Color Models and Properties ... 42

Exporting and Publishing Templates, Projects, Websites or Blogs ... 44

The Export Options Dialog ... 46

General Tab ... 46

CSS Options Tab ... 47

(3)

WordPress Export Options ... 48

Blogger Export Options ... 50

DotNetNuke Export Options ... 51

‘Website or Blog’ Export Options ... 52

Website or Blog:Exporting and Publishing an HTML Project ... 53

Website or Blog:Publishing a Blog to Artisteer.Net ... 55

Joomla Template:Export and Installation ... 57

Tips and Tricks: ... 58

How to Use Joomla Menus with Artisteer ... 58

WordPress Theme:Export and Installation ... 59

Drupal Theme: Export and Installation ... 61

Blogger Designs: Publishing and Export ... 62

DotNetNuke Skin:Export and Installation ... 64

ASP.NET Project:Exporting a Design ... 64

CodeCharge Studio Project: Exporting a Design... 66

Ideas Tab ... 69

Creating Your Design ... 69

Making Adjustments ... 69

Home Tab (Website or Blog Only) ... 70

Edit Tab (Website or Blog Only) ... 74

Setting the Content Layout ... 75

All Pages Option ... 78

Row Options ... 79

Cell Options ... 80

Inserting Media and Links ... 83

Insert an Image ... 83

Insert a Video ... 86

Insert a Table ... 88

Insert a Hyperlink ... 90

Insert a Button ... 92

(4)

Colors ... 96

Paints ... 99

Color Selector Dialog (More Colors)... 100

Fonts ... 103

Layout Tab ... 107

Content Tab ... 118

Shape ... 118

Content Styling (Website or Blog Only) ... 121

Style and Font ... 122

Paragraph ... 127 Metadata ... 129 Background Tab ... 134 Sheet Tab ... 144 Header Tab ... 149 Header Layout ... 149 Header ... 152 Background Image ... 153 Foreground Photo ... 162 Flash ... 164 Title ... 167 Title Style ... 168 Menu Tab ... 170 Menu Layout ... 170 Menu Styles ... 172 Menu bar ... 172 Item ... 175 Subitem ... 177 Blocks Tab ... 179 Block Styles ... 180

(5)

Menu Bar ... 191 Item ... 192 Subitem ... 194 Buttons Tab ... 196 Footer Tab ... 200 Layout ... 200 Footer Styles ... 200 CMS-Specific Features ... 203

Theme options for WordPress themes ... 203

(6)

What is Artisteer?

Artisteer is the first and only Web design automation product that instantly creates fantastic looking Website and Blog templates. This powerful software can make YOU a professional Web designer of Websites, WordPress themes and other blog templates. Artisteer lets you create fantastic looking Website designs and templates in just minutes, without having to know anything about editing graphics or HTML.

With Artisteer YOU immediately become a Web design expert, editing and slicing graphics, coding XHTML and CSS, and creating CMS templates and WordPress themes - all in minutes, without expensive software like Photoshop or Dreamweaver, and with little or no technical training required. Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, table less, cross browser

(7)

What’s New in Artisteer 3.0

The new features in Artisteer 3.0 include:

• Website creation features with support for editing pages and blog posts

• Web design and website samples

• Support for fluid layouts (resizable sheet width)

• Interactive web design preview area (clicking a web design element navigates to the corresponding tab in Artisteer)

• Ability to specify design styles for the "Suggest" feature, generating thematic web designs (corporate, simple, retro, etc.)

• Custom CSS options in Export Options

• WordPress theme code based on the default WP 3.0 TwentyTen theme

• Additional header and background graphics

• Additional color themes

• Free website hosting service at

• Header and footer can now be page-wide

• Added transparency areas for various graphical effects

(8)

How to work with the Artisteer interface?

The Artisteer interface is very simple to learn. There are several main items: File Menu, Quick Access Toolbar, Ribbon with Tabs and Design Preview (highlighted on the image below).

File Menu contains basic options (New, Open, Save, Save As), the Change Template option, the Export menu (Template, HTML, CSS Options, Export options, Favicon), the Preview in Browser option, Activation settings, and About Artisteer dialog.

Quick Access Toolbar contains Open, Save, Undo, Redo, and Quick Export options.

Ribbon contains the designer’s tools.

Design Preview lets you see how your design will look like. Clicking on any objects in the Design Preview will automatically change the tab on the Ribbon bar to the options you can use to style those objects.

(9)

Start-Up Dialog

The Artisteer start-up dialog suggests types of projects available in Artisteer. You can create a website or blog, start with one of the ready-made website samples, or create a CMS template for Joomla, WordPress, Drupal, Blogger, or DotNetNuke. You can also create web templates for ASP.NET applications, or CodeCharge Studio projects.

(10)

Icon

Option

Description

Website or Blog

You can create a website in Artisteer and export it as an HTML website or publish it to Artisteer.net - a free online hosting service for Wordpress style blogs.

Samples

There are several sample templates installed with Artisteer. These samples cover different categories of websites with typical start-up content.

Online Samples

‘Online Samples’ will take you to Artisteer.com and show you a gallery with ready-made templates, which can be downloaded and previewed for free. From each sample page, you can download and install one of the CMS templates, such as Joomla, Wordpress, Blogger, etc., or you can download the Artisteer project from which these templates were created. Note, you cannot import CMS templates into Artisteer, even the ones that were created with Artisteer. If you want to use one of the sample designs as the basis, or idea for your own website,

download the Artisteer and open the Artisteer project (i.e. *.artx file).

, , , Content Management System Themes

Create and export a Joomla, WordPress, Drupal, Blogger or DotNetNuke template for your website or blog.

, Web Design

Templates

Create and export an ASP.NET application or CodeCharge Studio project.

(11)

Quick Access Toolbar

The Quick Access Toolbar is a customizable toolbar which you can use to create one-click shortcuts to frequently used commands, and quickly perform the most common tasks.

By default, the Artisteer Quick Access Toolbar contains the Open, Save, Undo, Redo and Export commands, but you can customize the content of the toolbar by adding or removing items as you like. To add a new item, right click on the desired command button in the Ribbon bar and select "Add to Quick Access Toolbar" option.

To remove an existing item, right click on the item in the Quick Access Toolbar, and select "Remove from Quick Access Toolbar".

Note: Not all the commands located in the Ribbon bar can be added to the Quick Access Toolbar. For some commands, the "Add to Quick Access Toolbar" option in the right click menu is disabled.

File Menu

In the File menu you can manage Artisteer projects (New, Open, Save, Save As), change the template, export or preview it as well as find general information about the version of Artisteer, your license key etc. The language of the Artisteer interface, start up and preview settings can be adjusted in the Preferences dialog (at the bottom right corner of the file menu).

(12)

Please note

If you would like to switch your template to a different application or Content Management System, open

that the Save/Save As option is disabled if you are using Artisteer in trial mode.

Change Template and select the desired type of template. Although when you create a project, you have to pick the type of template you want to create, you can create any template from one project. For example, if you are using the ‘standard’ edition of Artisteer, you can create templates for Joomla, Wordpress, Blogger, etc., all from one project. You do not have to create separate projects for each template. When you change templates within a project, you do not lose the design you were working on. Rather, where the CMS templates share the same design elements, the design you create with one template is applied to the other. Where they are different, the changes are saved and you can come back to them at any time by changing the template type. For example, if you create a ‘website or blog’ project, you design a Header and create ‘style’ choices for the content such as how headings and tables will look on your website. You can also create content for your website, such as pages and post articles. If you change the template type to Wordpress, the ‘style’ elements, such as

(13)

is, you do not create content with Artisteer when you are creating a CMS template; you only define the design, or ‘style’ of how the content will appear. The content in your website is added in the backend of the CMS. But, you will notice that when you switch from a ‘website or blog’ to Wordpress, the content (e.g. pages and posts) disappears in Artisteer. The content has not been deleted; you can go back to the content at any time by changing the template type from ‘Wordpress’ back to ‘website or blog’.

Use the Export menu in Artisteer to export a template, HTML page, and/or configure Export options. The export features are also available on the Quick Access Toolbar.

(14)

If your project is a ‘website or blog’, you can publish and host your project on Artisteer.net, publish your pages to a local file or folder, and/or copy your files to your own hosting service using Artisteer’s FTP client.

If you publish your website to Artisteer.net, all of your ‘style’ selections and content is automatically copied to Artisteer.net. This is the only way to copy your files to Artisteer.net.

If you are creating a static HTML website (not hosted on Artisteer.net), you can elect to publish your project to a file or folder and move them yourself later to your remote, or FTP your files to a remote host using Artisteer’s FTP client (This option is only available for static HTML websites. You must add your FTP settings before using: FileExportExport OptionsFTP Server. Your host provider should provide you with the information you need to configure the Artisteer FTP client).

(15)

Publish to Local or FTP

Template

Specify the type of the exported template: HTML – a group of HTML pages

Blogger – Blogger template

CodeCharge Studio – CCS project DotNetNuke –DNN skin

Drupal –Drupal theme Joomla – Joomla template ASP.NET – ASP.NET project WordPress – WordPress theme

Export to

Publish the template to a local computer, or remote hosting service.

(16)

Folder name This name will be used as the subfolder or archive name where your template files will be saved. Path Specify a folder path where you want to export

your template files.

Create ZIP File Select this option if you want to create a single archive file to contain your files.

Include *.ARTX Project

Select this option if you want to include your project file with your template (*.artx). This may be useful if you want to make a copy of your project file, or you want to share your project with other Artisteer users. Otherwise, this has no effect on your website or template. Note, before you elect this option you should always save your project first so your actual project file and the one in your template are the same.

Help Get online instructions on exporting the template/project.

Use the Import

In a ‘website or blog’ project, you create both the design and the content at the same time. The feature to import the design and content from another .artx project. This only applies to ‘website or blog’ projects. With other types of projects, like Joomla, Wordpress, and other CMSs, you define the design, or ‘style’ of your content but the content is added in the backend of the CMS. For example, you choose the font, size and color of the text in your articles, but the actual text of the article is created in the CMS. What you see in the Preview area of Artisteer is some sample text, images, tables, etc. designed to show you in general what your web pages will look like with the design selections you have made in Artisteer (e.g. font selection).

(17)

the content area and enter your text). Use the Edit tab to override the default ‘style’ options you selected with the ‘Content’ tab.

The changes you made with the ‘Content’ tab are part of your ‘design’ just like working with any CMS template. The changes you made with the Preview area and the Edit tab are part of your ‘content’. The Import option lets you import just design, or ‘style’ settings from another project (e.g. which could include Head, Page Background, Sheet options, etc.), or ‘content’ (e.g. pages or posts), or both design and content.

Use the Preview in Browser

The language of the Artisteer interface may be configured in the

option to see how your website looks in different browsers. The preview (e.g. Chrome) is only available in the list of browsers if the browser is already installed on your

computer.

Preferences

You can also use the Preferences dialog to:

dialog. The default language is English (US), but Artisteer supports many other languages.

• Enable or disable the start-up dialog – this is the dialog you see when you start Artisteer without a project file,

• Enable of disable ‘Auto-preview’ – when you make ‘style’ changes in Artisteer, such as changing colors etc., your changes will appear in the Preview area.

• Enable or disable Preview Highlights – when you move the mouse over content (e.g. a block in the sidebar, or a post article) in the Preview area, Artisteer highlights the area with a border and special icons you can use to manipulate the area (eg. Suggest icon). This can be distracting to some users.

(18)

Preview Area

Template Layout

The default Artisteer template layout reflects the typical website page structure, consisting of the Page Background (Background Tab in Ribbon), Header, Horizontal Menu, Sidebar (Vertical Menu, Blocks), Content (Article 1, Article 2), and Footer:

(19)

The borders of layout elements are highlighted in the Preview area in yellow when you mouse over the area. Left-clicking the mouse over one of the layout element activates the corresponding options on the Ribbon bar.

Over each layout element there is a mini toolbar with available features displayed as icons, such as Suggest , Position , Delete Block , Pages , Width (Sheet only) , and Hide Article

(20)

Title . Some of these features may be absent depending on the type of Artisteer project and CMS you are designing.

Layout Element

Mini Toolbar Features

Header Suggest, Position

Page Background Suggest

Sheet Suggest, Width

Menu Suggest, Position, Pages (Website or Blog only)

Vertical Menu Suggest, Delete Block, Position, Pages (Website or Blog only)

Block Suggest, Delete Block, Position

Sidebar Suggest

Content Suggest

Article Title Hide Article Title (Website or Blog only)

Footer Suggest

Note, ‘Article 1’ in the picture above is an example of an Post article written for your blog as it would appear if created in a CMS like Joomla, Wordpress, etc. For example, the article has a headline, a date and time, an author reference and icon links to related content. When you are working with a CMS like Joomla, Wordpress, etc., you will not see the image and sample text as you see here since the content for your Post is written in the CMS. What you see in the Preview area is an example of your ‘style’ defined in Artisteer applied to a sample image and text. What you will see on your website is your ‘style’ applied to the content you create in the CMS. Similarly, ‘Article’ is a sample except the Preview area shows you all of the possible style elements you can control in Artisteer. For example, you can decide how ‘lists’ should appear on your pages. You can define what icon to use to begin each list item (e.g. numbers or bullets), and what font each line item should have. When you create your content in the CMS (e.g. write a Post article), if you include a ‘list’, this is how the list will appear.

Suggest Mode

(21)

You can also use the suggest mode to see some design ideas for a layout element. Again, when you move the cursor over various parts of the Preview area, Artisteer will highlight a layout element by adding a yellow border around the area. For example, the Header on your page is a layout element, the horizontal menu is a layout element, as well as the Sheet, Blocks, etc.

Select the Suggest Mode buttion in the upper right corner of the Ribbon bar, and then hover the cursor and left-click the mouse on the element you want to change in the Preview area. Click the Suggest Mode button again to change Artisteer back to regular editing.

You can also cycle thru suggestions on an element by holding the Ctrl key down while moving the mouse over the Preview area. When you press the Ctrl key, the Suggest icon should appear over the element that is highlighted. When you left-click the mouse, Artisteer will suggest a design idea and change the layout. If you do not want the change, click the Undo button on the quick access toolbar. Otherwise, you can ask for another suggestion just by holding the Ctrl key down and clicking the mouse.

Position

In the Preview area you can manage the position of the Header, Menu, Vertical Menu and Blocks. Hover the mouse over the appropriate element and click the Position icon . Please note, that the

(22)

position of Blocks and Vertical Menu is not available for Drupal and DNN skins, as the position of these elements can only be changed within the CMS.

The ‘Website or Blog’ Artisteer project includes an additional Pages option, which helps to link pages and the appropriate horizontal and vertical menu items. Hover the mouse over the menu, click the Pages icon and select the page you want to include, or exclude from the menu.

Website Map (Website or Blog Project Only)

The website map is located on the left side of the preview window. The map helps you see and

manage the organization of your web pages. Right-click the mouse on one of the pages to display the context menu and select the approriate command – New Page, New Child Page, New Blog Post, Edit, Rename, Delete, Use as Blog Page, Hide Article Title, Properties. Hide the website map by clicking the icon.

(23)

Page Properties

In the page properties you can define attributes of your page. Some of these are very important to search engine optimization (SEO).

General

Option

Description

Name URL Name of the web page. This is used in the URL to identify the page on your website.

HTML HTML reference to your page. If the browser supports it, this is the title of your page as it appears in the browser’s tabs, or in your favorites list if you bookmark the page. Note, this is different from

(24)

the title that appears in the website map. The page title in the website map is used in your horizontal and vertical menu (if you have not change the menu source).

Page Tags

Option

Description

Description Give a short description of the created page. Your description becomes part of the meta tag, ‘description’, in the HTML code for this page.

<meta name="description" content="this is my separator page This is important to SEO.

" />

Keywords Your keywords become part of the meta tag, ‘keywords’, in the HTML code for this page.

<meta name="keywords" content="sepkeyword This is important to SEO.

" />

Custom Meta Tags Use this text box to add the HTML code to define additional meta tags you want included. These are important to the search engine rankings for your page.

<meta name=”author” content=”Bob Smith” />

<meta name=”contact” content=bsmith@robertsmith.us />

Show in Menu

Option

Description

(25)

uncheck the box to exclude it from the menu.

WYSIWYG Editing (Website or Blog Only)

‘What You See Is What You Get’ (WYSIWYG) Editing is a simple and effective way to add new data to a website. Click the text area in the Preview window, delete the sample text and add/paste the new content. The website Headline, Slogan, Page Title, Articles, Block, and Footer text may be changed in Artisteer with WYSIWYG editing mode. Horizontal and Vertical Menu item names may be altered in the website map (select the page and press F2 or right-click the mouse on the page and select Rename)

(26)

Ribbon Bar

The Ribbon bar is divided into Tabs. Each Tab contains options in a logical sequence from general ideas and options (Ideas, Colors and Fonts, Layout) to specific elements (Background, Sheet, Header, Menu, Content, Sidebar, Vertical Menu, Buttons, Footer). Moving from left to right, we begin with the overall idea and layout of the site. As we move to the right, we become more focused on specific parts of the site such as blocks and buttons. You can use the Preview area to click on the part of the template you would like to design and select the options available inside the active tab.

Some extra tabs with options for adding and editing content appear on the Ribbon if you create a

(27)

Quick Start Guide

Downloading Artisteer

You can download the Artisteer installation file from the official Artisteer Web site at

release of Artisteer appropriate for the platform you will be using: PC or Mac. There are no functional differences between the PC and Mac releases.

The software is provided with a free trial period that allows you to evaluate the product before

purchasing. During this period of time, Artisteer is fully functional and has all of its features available for testing, however you will not be able to save your Artisteer project. Also, you can export templates, but all the templates and images generated with Artisteer will have watermarks on them until the

product is activated. The trial period is unlimited and you can activate the software at any time you wish. Activation instructions are covered in the Activating the Software

With the ‘trial’ version of Artisteer you can also try Artisteer.net with the following restrictions: chapter below.

Trial Version

Full Version

Free Disk Space 10 MB 200 MB

Artisteer Image Gallery unavailble available

Custom Domain unavailable available

The Usage of Blog free 30 day trial* unrestricted

After the 30 day trial, a notification will be sent to your e-mail, offering you to purchase Artisteer or continue using the trial version within the next fourteen days. When this period expires, you will receive another e-mail notification.

(28)

Editions of Artisteer: Home&Academic vs. Standard

There is only one platform release (Mac or PC) of the Artisteer software that you install on your system, but the features available in Artisteer depend on the type of license you have purchased. If you purchased the Standard edition, all features of Artisteer are available. If you purchased the Home edition, there are certain templates you will not be able to export and you will not be able to set most of the custom options available in the Standard edition. The following chart illustrates the differences between both editions:

Version Home&Academic Edition Standard Edition

Free upgrades for 1 year  

Design Suggestions  

Design Features  

Export as XHTML+CSS  

Export as Wordpress Theme  

Export as Blogger Template  

Export as Joomla 1.5, 1.6, or 1.7 Template

 

Export as Drupal 5/6/7 Theme  

Export as ASP.NET Application  

Export to CodeCharge Studio  

Custom Values Dialogs*  

Library of Textures, Glares,

and Gradients Partial (75%)



Number of Color and Font

(29)

bar. Also, many submenus in Artisteer have a More… selection or a specific item selection that allows you select advanced options (e.g. Font Options…, Gradient Options…, etc.)

System Requirements

This section describes the system requirements for the Artisteer software.

Windows

Intel® or AMD® processor 1500 Mhz or faster 150 MB free disk space

1 GB of RAM

Microsoft® Windows® XP, Windows Vista® or Windows Seven®

Microsoft .NET Framework 2.0+. It can be obtained from the Microsoft website at:

Mac OS (Intel)

Intel Core™ Duo 1.33GHz or faster processor 150 MB free disk space

1GB of RAM

Mac OS X v10.5.x or 10.6.x Mac OS (PowerPC)

(30)

Browsers supported:

Internet Explorer 7+ Firefox 2+ Opera 9+ Safari 1+ Google Chrome 1+

Technologies supported:

CodeCharge Studio 4

WordPress 2.7-3.1 content management system Joomla (1.5, 1.6, 1.7) content management system Drupal (5.x, 6.x, 7.x) content management system Blogger

DotNetNuke 4.9+

ASP.NET / Visual Studio Artisteer.net

Standards supported:

XHTML 1.0 Transitional

(31)

PNG with transparency

Installing Artisteer

This chapter describes how to install Artisteer on your computer.

Before you proceed, please make sure that your computer meets the requirements listed in the

System Requirements

Log into Windows as a Power User, or assume the Primary Administrator role. chapter.

Double-click the installation file called ArtisteerInstall.exe. This will launch a standard installation process.

Select the language that you’d like to use during the installation. Click the Next button. Follow the instructions provided by the installation wizard.

Carefully read the License Agreement. If you accept its terms, check "I Accept the terms of the License Agreement" option and proceed to the next step. Otherwise, quit the installation.

Select the destination folder where you want to install the product.

Indicate whether you want to create shortcut icons on the desktop and Quick Launch panel. Click Install button to start the installation.

Click Finish button when the installation is complete.

Artisteer supports silent installation. If you would like to install the software using silent installation, please use /silent key to perform silent installation of Artisteer. This will run the installation process in the background without displaying the installer dialogs, progress bars etc. Your installation query should look similar to the following:

(32)

Activating the Software

After you have purchased Artisteer you will receive a License Key by e-mail to be used to activate the software. The type of license that you purchased determines the features that are available in

Artisteer (‘Home’ vs. ‘Standard’). The activation removes the watermarks added to the generated templates in the trial version. It also automatically enables all of the features of Artisteer for the edition you have purchased (‘Home’ vs. ‘Standard’).

Note, the license key is associated with the Artisteer release, not the target platform. For example, the license key is the same for both Mac and PC if you are installing Artisteer 3.1 even though the

software package may be different.

To activate the product select File  Artisteer Activation and enter your license key number in the first box. If your computer is connected to the internet, check "Auto-activation through the internet" option and click the Activate button. If successful, the software will connect to the Artisteer servers on the Internet, return an activation key, and automatically enable the features of Artisteer.

If you work off-line, use the following link to obtain the activation key from any other computer connected to the web:

In this case, uncheck the "Auto-activation through the internet" option and enter the activation key you obtained from the other computer directly in the Activation Key box.

(33)

Creating an Artisteer Project

You create an Artisteer project using either the start-up dialog (described above) when you start Artisteer, or with FileNewNew Project. You select the type of project you want to make, create your design and content, and then save your changes with FileSave, or FileSave As… This creates a special Artisteer project file (e.g. <your project name>.artx). Your project file is very

important. If you later want to make changes to your design, you will need your project file. Artisteer only works with .artx files. You can export CMS templates from Artisteer, but you cannot import CMS templates created with other software (or even CMS templates created with Artisteer). You can only work with .artx project files, so you should save your changes when your design is finished and keep backup copies of your projects.

Eventhough when you first create a project in Artisteer, you must select a specific project type corresponding to the template you want to create (e.g. Wordpress), you are not constrained to one particular theme or template. In each project file, you can create designs for several types of templates at once. Normally, you will create and work with a single design, but suppose you decide that instead of one CMS, like Joomla, you want to create a design for Wordpress. You can simply change the template type using the File menu (i.e. FileChange Template).

(34)

If you have created a ‘website or blog’ project, and added content to your website, you can still change the project without losing any of your content. This is because there are two parts to your project: the ‘style’ and the ‘content’. The ‘style’ represents those elements that describe how your website will appear. For example, the selected color of your Page Background is a ‘style’ element. How you want Headings to appear in your content is another ‘style’ element. When you add text, images, and other content for your pages and posts, these are ‘content’ elements. When you save your Artisteer project, both your ‘style’ and ‘content’ is saved at the same time. If you are hosting your website on

Artisteer.net, you can also create content on Artisteer.net. This free hosting service is Wordpress based so adding content and managing your website is very similar to Wordpress. Every time you publish your website from the desktop to Artisteer.net, your ‘content’ and ‘style’ that you see on the desktop is synchronized with the content you added on Artisteer.net so you should re-publish your website often and save your project file to keep your content current. You should refer to the

Artisteer.net manual for more details about how to use Artisteer.net, and how your ‘content’ and ‘style’ are kept in-synch.

When you are working with a ‘website or blog’ project you are creating both the ‘style’ and the ‘content’ at the same time. If you are working with Joomla, or some other CMS, you create the ‘style’ but the content (i.e. text, images, etc.) is normally added in the CMS host software (the ‘backend’).

You only work with one template type at a time in Artisteer. When you change template types

(FileChange Template), Artisteer applies the existing ‘style’ changes you made to the new template, where the old and the new templates share the same ‘style’ elements. For example, if you set the Page Background to ‘red’ in your Joomla template and then switch to Wordpress, your new template will also have a ‘red’ page background because Page Background is a common ‘style’ element. If you swtich from a ‘website or blog’ project to another template, like Wordpress, you will see that some of your design changes have been applied but your content (e.g. pages and posts) disappears. Your work is not lost. If you switch back to a ‘website or blog’ template, your content will reappear.

(35)

Using the Artisteer Samples

Artisteer is installed with several professionally designed sample projects which you can use as-is, or customize as you choose. You are free to use the Artisteer samples as you wish so long as you follow

the license agreement at

The Artisteer built-in sample projects were designed to give you some ideas on the possible layout, design and content of a website depending on the topic it covers. To create a website based on one of the Artisteer sample websites, select Samples on the program start up and then just pick the template you want to use. When your project is opened, make sure the project (template) type corresponds to the type of template you want to create (FileChange Template).

Besides the samples that are installed with Artisteer, there are many more free samples on Artisteer’s

websit

clicking on the ‘Online Samples’ icon in the Artisteer start-up dialog when you create a new project. If you open one of the built-in samples, Artisteer will open the project sample file and you can begin making changes. If you want to use one of the on-line samples, you will need to download the .artx project file and then open the project file from wherever the file was downloaded.

1.

Select “Online Samples”

Select Online Samples in the Artisteer start up

(36)

On the web, there are several template types besides the Aristeer project file that you can download and use. If you want to use the sample as the basis for your own website, or if you want to make changes to the sample to create a new website, download and use only the Artisteer project. This is the only template format that you can use within Artisteer. You cannot import other formats (e.g. Joomla) even if the template was exported from Artisteer. The other templates are only for illustration purposes only. They allow you to, for example, download a Joomla template, install it and see

immediately what the template would look like in Joomla.

2.

Find a Sample

Find the sample website, which seems closest to your target website.

3.

Download the Artisteer Project

(37)

As mentioned above (‘Creating an Artisteer Project’), you can export your project to any type of template that your particular version of Artisteer supports. Most of the samples have been created as ‘website or blog’ so when you open the project you may see that several pages and posts have been created already. The first thing you want to do then is check the project type and change it if you want to use a different type of template (e.g. FileChange TemplateJoomla) for your website. If you see the content (i.e. pages and posts) disappear, don’t worry. You can always get these pages back if you change the project type back to ‘website or blog’.

Creating a Website or Blog

Starting from Artisteer 3.0, you can create a website or blog in Artisteer. This means you can add and edit content in WYSIWYG mode, use the standard Artisteer tools to add and modify your design and publish the created website to Artisteer.net (Artisteer’s free hosting service), or export it as an HTML website. You can either start from the default project, or choose one of the professionally done samples, included with Artisteer, or available on Artisteer’s website.

So, creating a website is now as easy as 1-2-3

1.

Select Project

Select a Website or Blog project in the Artisteer start up dialog.

(38)

Supported Content Management Themes and Web Design

Templates

On the Artisteer start-up dialog you can choose the type of project you would like to create. With

2.

Edit

Edit the sample content in the Preview area by clicking the content area and

pasting/typing your own text.

3.

Publish/Export

Click Create Website to publish the website with the help of Artisteer.net - a free online hosting service and blogging service, or Export the website as HTML.

(39)

Artisteer generated templates of any supported Content Management System and Application may also be exported as HTML pages.

(40)

Creating a basic design

Creating a design with Artisteer is as easy as 1-2-3:

In most cases, nearly everything you need to do can be started by clicking the Suggest Design button. This creates a random design that you can either work with as-is, or click again to see another design suggestion

1.

Suggest Design

is a tool to find a basic theme idea by viewing different design suggestions genereated at random

2.

Select Design

when you find a good design idea. You may want to adjust some design elements like colors, fonts or

background separately. The corresponding “Suggest …” buttons will help you find what you want

3.

Export

to save the created design as a WordPress theme, HTML template or any other template format you like.

(41)

Design Customization

Artisteer is a powerful tool with great customization capabilities. After you find a good design idea you may go into a specific tab and adjust the design options until you get exactly the appearance you want. On each tab there are several options for customizing specific elements.

Note: Some options may not be available depending on the settings and layout choices you have made in other areas. Also, all of the advanced options are not available in the ‘Home’ edition of Artisteer.

That is not all!

Here is an example of how it looks for the Sheet tab:

If you can’t find the option you want in a specific list, normally there is a “More…” selection to get full customization capabilities:

Even more options

(42)

The user interface for a typical dialog box includes a list of option groups located in the left pane of the dialog box. Click on the group to show its options. Most of the dialog boxes contain settings that can be changed using slider bars. Position the pointer over the slider and drag it to the right or left to increase or decrease a specific option’s value. The selected value will be displayed in the box next to the slider bar. You can also enter the desired value directly in the textbox.

Supported Color Models and Properties

The colors on computer monitors are made up of varying amounts of red, green and blue base colors. Depending on how much you take from each base color, you can create any of the colors which a monitor can display. For example, a mix of red and green produces the yellow color, a mix of red and blue – magenta and so forth. Mixing all three base colors with full intensity produces the white color while the absence of all the color components returns black.

The values for red, green, and blue base colors are usually specified using a scale from 0–255 (decimal), where 255 represents 100% intensity of the color.

RGB is a convenient color model for computer graphics because the human visual system works in a similar way. However human perception does not see colors as triplets of numbers: red, green and blue. Instead it is more convenient to describe colors as made up of hue, saturation and lightness (or

(43)

angle around the axis corresponds to “hue”. The distance from the axis corresponds to “saturation”, and the distance along the axis corresponds to “lightness”, or “luminosity”.

Hue specifies a pure, spectral color. It is measured as a location on the color wheel, expressed as a degree between 0° and 360°. In common use, hue is identified by the name of the color such as red, orange, or green. Hue Color 0 red 1 yellow 2 green 3 cyan 4 blue 5 magenta 6 red

Saturation is the purity of the color. It represents the amount of grey in proportion to the hue, measured as a percentage from 0% (grey with no hue at all) to 100% (fully saturated color). On the standard color wheel, saturation increases from the center to the edge.

Luminosity

Artisteer allows you to work with both HSL and RGB color schemes. The desired color can be (Lightness): is the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white).

(44)

Exporting and Publishing Templates, Projects,

Websites or Blogs

Once you have settled on the basic look of your site, you can export it as a template compatible with the type of blog, CMS, or application that you want to use. Blogger users may publish templates directly to Blogger. If you have created a ‘Website or Blog’ project you can publish your website as HTML pages to a local folder on your computer or move it to a hosting server via Artisteer’s FTP client. If you choose, you can also publish your website to Artisteer.net.

To export the template/HTML/application,

1) Press Ctrl+E. An export button is also located on the Quick Access Toolbar. Click WordPress Theme, Joomla Template etc. (this depends on your project type).

(45)

2) In the Export dialog indicate the template type (HTML, WordPress, Blogger, Joomla, Drupal, DotNetNuke, ASP.NET Application, CodeCharge Studio), and version of your CMS (for Joomla DotNetNuke, and Drupal templates). Note, the template type depends on the type of your project. If you want to export a different type of template select FileChange Template.

Specify the desired template name and the folder where you want to export your template files. If necessary, compress the template folder by using "Export as a ZIP archive" option. You can also save your .artx project file with your template. This has no affect on installing or using your template. This option is useful though if you want to create a backup copy of your project file, or you want to transfer your template to another Artisteer user.

(46)

The Export Options Dialog

Apart from the Export dialog, the advanced export options are located in the File Menu and on the Ideas tab (Export group). You can use this dialog to set specific options for exporting templates from Artisteer.

The available options are described below. Most of them are optional; no value is assigned when a field is left empty.

Note: some extra group tabs may appear depending on the template type.

General Tab

The general options help to adjust the text/writing direction and Site Icon (Favicon)

Option

Description

Text Direction Specify the text/writing direction. Artisteer supports both Left to Right and Right to Left directions. This is not only how the text will appear on your pages, but also how text is inserted in Artisteer. Site Icon Choose a site icon from the gallery or insert a custom icon from a

(47)

bookmarks.

CSS Options Tab

Option

Description

CSS prefix The CSS prefix exists to avoid conflicts with CSS classes of 3rd-party modules. The “art-“value is a default CSS prefix in Artisteer, which may be modified. It may contain only alphanumeric symbols and dashes (A-z, 0-9, “-”, “_”) and should start with an A-z letter. Additional CSS styles You can enter custom CSS styles here. They will be embedded in

the CSS file generated by Artisteer.

Description Tab

The Description tab describes the information to be used by Artisteer to generate the stylesheet header and the metadata information for the theme. This information is used by the CMS, if your CMS supports such functionality.

Option

Description

Author Name Identifies the name of a person or organization creating the design. Author URL Provides a reference to the Author's website.

Template Version Identifies the Version Number of the template. Template URL Specifies the location of the template on the web.

Tags Specifies the keywords associated with the theme. Description Provides additional information about the theme.

Watermark Tab

Option

Description

(48)

page.

Watermark Text The text to be displayed across the page when the "Show Watermark" option is enabled.

Footnote Tab

Option

Description

Include a backward link to the author

When checked, the above-defined author name will be displayed at the bottom of the page with a link using the name of the Author and the Author’s URL address as defined above.

Include a backward link to the CMS and the Artisteer

When checked, the CMS name and “Artisteer” will appear at the bottom of the page. Uncheck this box if you do not want this to appear.

WordPress Export Options

The WordPress tab contains ‘home page’ Menu Item settings, which specify whether Artisteer should create a special menu item pointing to the homepage (front page) of the website. Menu Source

(49)

names you use to organize your posts and pages; these names can be arranged in a hierarchical order.

Option

Description

Show Home Item Normally, when viewers visit your site, the URL they use does not

reference a specific page. E.g.

or frontpage for a Wordpress site is normally a list of your Post articles. If you select this option, a menu item is added to your horizontal menu bar so your viewers can always go back to this page. If you unselect this option, the ‘Home’ item does not appear so while viewers are on your site, they cannot select a choice on the menu bar to navigate back to this page.

The horizontal menu bar normally consists of items that are links to the pages of your site. The ‘Home’ option only applies to the default frontpage, which is a list of your Posts. In the Reading settings in Wordpress, you can change the frontpage to either a static page, or a specific Post page. However, if you change the frontpage from the default, the ‘Home’ option no longer applies (i.e. you will not see your ‘Home’ option in the menu bar).

This option also appears in your Theme options in Wordpress. See ‘Theme options for Wordpress’ section below. Any settings in your Theme options override the same settings in your theme generated from Artisteer. Also, your Theme options are shared for all of the Artisteer themes you have installed. For example, if I unselect ‘Show Home Item’ in my Theme options, then it overrides this setting in my exported theme, even if I uninstall, delete and reinstall the theme.

Home Item Caption Specifies the caption of the menu item pointing to the home page if you have select ‘Show Home Item’ above.

(50)

the horizontal and/or vertical menu.

Blogger Export Options

Option

Description

Show Blogger Navbar Use this option to hide or show the blogger Navbar.

Menu Source Define if ‘categories’, ‘pages’, or ‘archive should be used as the source for the horizontal and/or vertical menu. ‘Pages’ are the static pages on your website. ‘Categories’ are arbitrary names you create and use to organize your posts. ‘Archive’ refers to the dated post archives.

(51)

Option

Description

Hosting Provider You can choose a hosting provider for images: Picasa Web Albums, ImageShack Image Hosting, or FTP server if you use another image hosting service.

DotNetNuke Export Options

Option

Description

DNN Version Specify the DNN version you are using. Artisteer 3.1 version supports DNN 4.9 and DNN 5. DNN 6 will be supported with the next Artisteer update. Using DNN 4.9 skins, the Login tab and User tab are automatically added to the menu. Using DNN 5 skins, the Login tab and User tab may be removed from the menu with the help of the Menu Options.

(52)

the standard DNN Menu, which can be enabled by selecting the Use DNN Menu option.

The Show Login Tab in Menu and Show User Tab in Menu options is available for DNN 5 skins. The options allow removing the Login Tab and User Tab from the DNN Menu. To remove the Login Tab and/or the User Tab, tick the Use DNN Menu box and deselect the appropriate tab.

‘Website or Blog’ Export Options

Option

Description

Default Page Tags

You can add a site description, keywords and custom meta tags for more effective SEO. The information will be stored in the

appropriate meta tags inside the <head> tag.

Description Give a short description of the created page. Your description becomes part of the meta tag, ‘description’, in the HTML code for this page.

(53)

<meta name="description" content="this is my separator page This is important to SEO.

" />

Keywords Your keywords become part of the meta tag, ‘keywords’, in the HTML code for this page.

<meta name="keywords" content="sepkeyword This is important to SEO.

" />

Custom Meta Tags Use this text box to add the HTML code to define additional meta tags you want included. These are important to the search engine rankings for your page.

<meta name=”author” content=”Bob Smith” />

<meta name=”contact” content=bsmith@robertsmith.us />

FTP Server

Specify the FTP Protocol, Host, User Name, Password, and Remote Directory. Complete these options if you plan to use the Artisteer FTP client to move your static HTML website to a remote server (i.e. if you are using your own hosting service). Your hosting service should provide you the details for how to complete this dialog. Note, you do not need to complete this if you are hosting your website on Artisteer.net.

Website or Blog:Exporting and Publishing an HTML Project

Follow this if you want to publish a static HTML website that is NOT hosted on Artisteer.net.

Pick “Website or Blog” on the Artisteer start-up dialog. Create the design and content of your website in Artisteer by using the options in the Home and Edit tabs.

(54)

To export the website:

1. Go to the Quick Access Toolbar and select Publish to local/FTP.

2. Specify the type of export: to export a website (design and content) to a folder on your

computer, select Local; to export the website to a hosting service, select FTP. Note, Artisteer provides an FTP client to make it easy to move your website files to a remote host server, however you can use any FTP client or service you want to move your files. Your hosting service should provide you with instructions on how to configure your FTP client to use their server.

3. Check off the Create ZIP file option and enter the file name and path to the exported file on your computer/server.

If you want to include your .artx project with your project, select the Include *.ARTX Project

option. Your .artx project contains all of your design and content changes. Adding this to your folder does not affect your HTML website but it is useful if you want to make a backup copy of your Artisteer project, or you want to share your project with another Artisteer user.

You can choose to export your website to a folder instead of a single zip file by unchecking the

Create ZIP file option. The folder option is useful if you already have a local or remote server folder. However, when you export your files this way, Artisteer does not replace the entire folder content with the files you are exporting. To be sure that you do not have any extraneous files from a previous installation, you should remove all of the files in the folder first, before exporting.

4. Click Export to finish the process. Optionally, adjust the additional export options, such as your FTP server settings, text direction, site icon, etc. (see The Export Options Dialog section above for more details).

(55)

Website or Blog:Publishing a Blog to Artisteer.Net

Before publishing your website to Artisteer.net, remember to save the .artx project with the File menu on the Quick Access Toolbar and select Save, or just press Ctrl + S.

To publish a website to Artisteer.net you need to be a registered Artisteer.net user first.

1. Having designed a website, press Ctrl+E or select Publish to Artisteer.net on the Quick Access Toolbar.

2. Specify the user name and password of an existing Artisteer.net account or create a new account by entering the desired user name and your e-mail address. The user name you enter should be unique and contain at least four symbols (lowercase letters (a-z) and/or numbers). The e-mail address must also not be used by anyone else on Artisteer.net.

(56)

Specify the Title and Domain (site name in the URL) for the new website and click Create. The domain should be at least four characters long and it must be unique for all domains on Artisteer.net.

After you have created and published your website, you can continue to make changes to your design and content on the desktop, or use Artisteer.net to create and manage your content on the web. Whichever way you make changes, every time you publish your website, the content and design on the desktop is synchronized with the content on Artisteer.net so you should republish often to make sure your project on the desktop has the same view of your website as Artisteer.net. You should also save your project frequently on the desktop because your project file contains both your ‘design’ and

(57)

Joomla Template:Export and Installation

Artisteer can create templates for Joomla 1.5, 1.6, and 1.7.

Follow the steps below to export your design as a Joomla template:

1. Select “Joomla template” on the Quick Access Toolbar or press Ctrl + E to invoke the Export dialog (or FileExport).

2. Specify the Joomla version (1.5 -1.7), select the Create ZIP File option, and then enter the name of the template and the export destination.

If you want to include your .artx project with your project, select the Include *.ARTX Project

option. Your .artx project contains all of your design changes. Adding this to your folder does not affect your Joomla template but it is useful if you want to make a backup copy of your Artisteer project, or you want to share your project with another Artisteer user.

Joomla templates can be installed from a zip file or a folder. If you choose to use a folder, unselect the Create ZIP File option. The folder option is useful if you already have a local folder that you use for your templates, however when you export your files this way, Artisteer does not replace the entire folder content with the files you are exporting. To be sure that you

(58)

do not have any extraneous files from a previous installation, you should remove all of the files in the folder first, before exporting.

3. Click Export to finish the process. Optionally, adjust the additional export options, such as your text direction, site icon, etc. (see The Export Options Dialog section above for more details). For additional information about installing and using your Joomla template, please refer to this link:

Tips and Tricks:

Joomla currently supports 50 languages. Language packages are available for download at: Joomla localization

Joomla uses three language packages: one for the front end, one for the administrator and one for installation. Using all three packages is not required. Feel free to download only the necessary packages and customize the language settings to suit your needs.

If there are no packages for your language, you can create them manually following the instructions provided in the Joomla documentation:

How to Use Joomla Menus with Artisteer

Please refer to the following link for more information about how to use Joomla menus with Artisteer:

(59)

WordPress Theme:Export and Installation

Artisteer creates Wordpress themes that are compatible with Wordpress version 2.7 and higher. Follow these steps to export a design as a WordPress theme that can be installed in your WordPress installation:

1. Select “WordPress Theme” on the Quick Access Toolbar or press Ctrl + E to invoke the Export dialog (or FileExport).

2. Check off the Create ZIP file option, and then specify the name of the theme and the export destination.

If you want to include your .artx project with your project, select the Include *.ARTX Project

option. Your .artx project contains all of your design changes. Adding this to your folder does not affect your Wordpress template but it is useful if you want to make a backup copy of your Artisteer project, or you want to share your project with another Artisteer user.

Wordpress templates are normally installed from a zip file. If you choose to use a folder (e.g. to replace the files in an existing installed theme), unselect the Create ZIP File option. When you export your files this way, Artisteer does not replace the entire folder content with the files you are exporting. To be sure that you do not have any extraneous files from a previous installation,

(60)

you should remove all of the files in the folder first, before exporting. This is especially important for Wordpress themes.

3. Click Export to finish the process. Optionally, adjust the additional export options, such as your text direction, site icon, etc. (see The Export Options Dialog section above for more details). For more information about installing and using themes for Wordpress, please refer to the following link:

Tips and Tricks:

When exporting themes, Artisteer automatically includes several language files obtained from the WordPress Website at

WordPress theme localization

Specifically, French, German, Italian and Spanish translations are exported by Artisteer in the WordPress compliant file naming format:

<country>_<lang>.mo

For example, the German language file is: de_DE.mo

To include a different or additional language in your Worpdress theme, please find and copy the

desired language files into your specific WordPress theme folder. You can find the additional language files in your default theme folder "<WordPressFolder>\wp-content\themes\default", or on the

WordPress Website at http://codex.wordpress.org/WordPress_Localization

To select a different language than your current WordPress language, change the "define" function in the wp-config.php file, for example:

(61)

To edit translations for your language please download and install the Codestyling Localization plug-in

fro

Then in WordPress administration, select Manage  Localization.

Drupal Theme: Export and Installation

Artisteer can create templates that are compatible with Drupal 5, 6, and 7. Follow the steps below to export a design as a Drupal theme:

1. Pick a Drupal theme on Artisteer start-up. Select “Drupal template” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog (or FileExport).

2. Specify the name of the template, the version of the CMS (5-7) and the export destination. *Optional* Tick the Create ZIP filecheck box to export the website as an archive, or select Include *.ARTX Project to save the Artisteer project and be able to edit it further on.

3. Click Options to invoke the Export Options dialog and adjust the additional settings or just click Export to finish the process (see The Export Options Dialog).

After the export you will obtain a set of Drupal-specific theme files that can be located in the theme folder on the server and easily applied to Drupal websites. The path to the theme folder in the Drupal

(62)

system usually looks like DrupalFolder\themes\ThemeName, so you need to upload the exported theme files to that folder. If your theme is exported as a ZIP archive, extract the archive into the "themes" folder on the server.

After that, you can activate your theme in the Drupal Administration. For this, log into the

administration area, navigate to Administer  Site Building  Themes, check the "Enabled" box as well as the "Default" radio button next to your template and click the "Save configuration" button.

Tips and tricks:

Use only letters (preferably lowercase), numbers, and underscores in the theme name. No special characters, spaces or hyphens are allowed.

Naming standards

If you work with Drupal version 5, be sure not to rename your template folder after the export. Otherwise, some functions will be undeclared and the design will look corrupted.

The localization feature is described in the Drupal documentation:

Drupal Localization

Blogger Designs: Publishing and Export

Blogger templates may be published from Artisteer directly to Blogger.com or exported to any folder on your computer.

(63)

1. Pick a Blogger template on Artisteer start-up. Select “Publish template to Blogger.com” at the Quick Access Toolbar or Press Ctrl + E to invoke the Publish dialog (or FileExport).

2. Enter your username, password, and select your blog, then use the ‘Publish’ button to copy your theme to Blogger.com.

3. Click Options to adjust the specific export settings, such as Blogger navber, menu source, home page menu item, image hosting etc. (see The Export Options Dialog)

To export the template to a folder: 1. Select Export Template

2. Indicate a folder name and path. Tick the appropriate box if you would like to export the template as an archive or to include the *.ARTX Project.

(64)

3. Specify the image Location.The images present on the Blogger template are automatically published to Picasa Web Albums. You can change this setting to ImageShack, or use FTP if you host your images elsewhere.

4. Click Export or make additional adjustments in the Export Options dialog.

DotNetNuke Skin:Export and Installation

Pick a DotNetNuke skin on Artisteer start-up. Select “DotNetNuke Skin” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog (or FileExport).

Specify the name of the folder and the export destination.

Choose the export model: to export as a folder or as a ZIP archive. Tick off the box to include the .artx project file with your template.

ASP.NET Project:Exporting a Design

(65)

1. Pick an ASP.NET Application on Artisteer start-up. Select “Visual Studio C# Project” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog.

2. Specify the name of the project folder and the export destination. *Optional* Create a a ZIP archive, include the *.ARTX project

3. Click Export to finish the process or select Options to adjust the specific export options, such as text direction, site icon, footnote, watermark, website description etc. (see The Export Options Dialog)

When the export is completed, a new C# project will be created in the specified location. Open it in Visual Studio using File  Open Website option and examine the files created. You will see:

• Master Page that defines a site's overall layout and contains a set of content placeholders such as HeaderContentPlaceHolder, TitleContentPlaceHolder, SheetContentPlaceHolder etc.

• Content Page called Default.aspx that has several content blocks and default pages

(DefaultHeader, DefaultMenu, DefaultSidebar1) included into it. This page is generated as an example for you to see how a finished content page may look like.

• CSS files that define the design of the pages.

(66)

Feel free to modify the project files the way you want and enjoy!

CodeCharge Studio Project: Exporting a Design

Follow these steps to create a design that can be applied to CodeCharge Studio projects:

1. Pick a CodeCharge Studio Project on Artisteer start-up. Select “CodeCharge Studio Project” at the Quick Access Toolbar or Press Ctrl + E to invoke the Export dialog

2. Specify the name of the project folder and the export destination. *Optional* Create a a ZIP archive, include the *.ARTX project

3. Click Export to finish the process or select Options to adjust the specific export options, such as text direction, site icon, footnote, watermark, website description etc. (see The Export Options Dialog)

When the export is completed, a new CodeCharge Studio project will be created in the specified location. The following pages will be added to the project:

(67)

• Main

• About

PageTemplate is an essential page that will be used as a basis for creating all the new pages within the CCS project. This functionality is achieved using Project SettingsGeneralNew Page Template option. PageTemplate includes the Header and Footer pages that are used to add page background, sheet, header and menu styles to the pages. Thus all the newly created CCS pages will have a page background, sheet, header and menu styles automatically applied to them.

Note, the Artisteer-generated styles cannot be automatically applied to CCS forms, buttons, and other blocks on the page.

To add a style to these components, you can consider one of the following solutions:

Open CCS Style Builder (Tools  Styles) and add a new style that looks similar to the style generated by Artisteer. Use this new style for CCS forms and controls.

Modify a CCS page template to add the Artisteer styles manually. In that case, do not select any style when creating forms and controls in CCS. Switch to HTML mode and modify your page template manually by adding the Artisteer classes and the necessary html tags. A sample html code snippet is provided on the Main page so you can review it and modify CCS page templates accordingly.

The sample code below demonstrates how to apply the Artisteer-generated Block and Article styles to a Record form on a CCS page. The unchanged HTML code is shown in black, the removed code lines are crossed out, and the lines added to the code are highlighted in red.

(68)
(69)

Ideas Tab

The Ideas tab is a great way to quickly envision your Website design right before your eyes.

Creating Your Design

Let Artisteer create the design for you. The Suggest design feature is best used at the beginning. It allows you to see the various designs available and helps you determine which styles and themes you like. You can select the desired style(s) and Artisteer will make suggestions based on the templates for these styles.

Making Adjustments

You are able to make adjustments to many individual components when brainstorming ideas for your Web design. For example, suppose the font doesn’t match the layout of the site, or you don’t like the colors in the Header. By making adjustments to the suggestions, you can get closer to the look that you want to achieve.

Figure

Table Options

References

Related documents

[r]

Responses to a Request for Proposal will be received by the Purchasing Coordinator, Sumner County Board of Education, 1500 Airport Road, Gallatin, TN 37066 for a Enterprise

The macroeconomic impact of implementing and financing a basic income grant is modeled using a computable general equilibrium (CGE) model for the South African economy, which

This paper introduces a structured approach to help organisations work through four key steps that we refer to as the AIDE approach to Assess, Identify, Develop and Evaluate

In other words, ST is also a form of political consumption and a new form of sustainable tourism development that is based on the push-back from fast lifestyle, ideology

For example, whereas surveyed male students seemed to benefit academically from participat- ing in a learning community, female students reported a greater sense of belonging in

After the major and minor scales, we have charted the pentatonic scale and examine at its usage as well as the Chromatic scale which contains all 12 notes and how you can apply

We perform various operations on N to obtain another bounded LPN V, called the verifier, which we check against a fixed LTL-X formula (in particular, its size does not depend on N).