2 page. Table of Contents

Transcription

1 Version 3.1

2 2 Table of Contents Table of Contents... 2 What is Artisteer?... 6 What s New in Artisteer How to work with the Artisteer interface?... 9 Start-Up Dialog Quick Access Toolbar File Menu Preview Area Ribbon Bar Quick Start Guide Downloading Artisteer Editions of Artisteer: Home&Academic vs. Standard System Requirements Installing Artisteer Activating the Software Creating an Artisteer Project Using the Artisteer Samples Creating a Website or Blog Supported Content Management Themes and Web Design Templates Creating a basic design Design Customization Supported Color Models and Properties Exporting and Publishing Templates, Projects, Websites or Blogs The Export Options Dialog General Tab CSS Options Tab Description Tab Watermark Tab Footnote Tab artisteer.com 2

3 3 WordPress Export Options Blogger Export Options DotNetNuke Export Options Website or Blog Export Options Website or Blog:Exporting and Publishing an HTML Project Website or Blog:Publishing a Blog to Artisteer.Net Joomla Template:Export and Installation Tips and Tricks: How to Use Joomla Menus with Artisteer WordPress Theme:Export and Installation Drupal Theme: Export and Installation Blogger Designs: Publishing and Export DotNetNuke Skin:Export and Installation ASP.NET Project:Exporting a Design CodeCharge Studio Project: Exporting a Design Ideas Tab Creating Your Design Making Adjustments Home Tab (Website or Blog Only) Edit Tab (Website or Blog Only) Setting the Content Layout All Pages Option Row Options Cell Options Inserting Media and Links Insert an Image Insert a Video Insert a Table Insert a Hyperlink Insert a Button Editing the HTML Source Colors & Fonts Tab artisteer.com 3

4 4 Colors Paints Color Selector Dialog (More Colors) Fonts Layout Tab Content Tab Shape Content Styling (Website or Blog Only) Style and Font Paragraph Metadata Background Tab Sheet Tab Header Tab Header Layout Header Background Image Foreground Photo Flash Title Title Style Menu Tab Menu Layout Menu Styles Menu bar Item Subitem Blocks Tab Block Styles Block Content Vertical Menu Tab Layout and Styles artisteer.com 4

5 5 Menu Bar Item Subitem Buttons Tab Footer Tab Layout Footer Styles CMS-Specific Features Theme options for WordPress themes Glossary artisteer.com 5

6 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 compatible and fully compliant HTML and CSS code, and export your design to create great looking Web and Blog templates. artisteer.com 6

7 7 Creating great designs has never been easier! artisteer.com 7

8 8 What s New in Artisteer 3.0 The new features in Artisteer 3.0 include: Website creation features with support for editing s 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 (accessible from within Artisteer) Header and footer can now be -wide Added transparency areas for various graphical effects Added masked header textures (transparency areas in the texture graphics) artisteer.com 8

9 9 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. artisteer.com 9

10 10 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. artisteer.com 10

11 11 Icon Option Description Website or Blog Samples Online Samples,,, Content Management System Themes 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. There are several sample templates installed with Artisteer. These samples cover different categories of websites with typical start-up content. 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, 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). 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. Quick Access Toolbar artisteer.com 11

12 12 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). artisteer.com 12

13 13 Please note that the Save/Save As option is disabled if you are using Artisteer in trial mode. If you would like to switch your template to a different application or Content Management System, open 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 s and post articles. If you change the template type to Wordpress, the style elements, such as the Header, and other choices are automatically applied to your Wordpress theme, but the content is not because with Wordpress, like most CMSs, the content is added in the Wordpress backend. That artisteer.com 13

14 14 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. s 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, and/or configure Export options. The export features are also available on the Quick Access Toolbar. Use the Export menu to export your template to a single file (i.e. archive file), or to a file folder. artisteer.com 14

15 15 If your project is a website or blog, you can publish and host your project on Artisteer.net, publish your s 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: FileExportExport OptionsFTP Server. Your host provider should provide you with the information you need to configure the Artisteer FTP client). artisteer.com 15

16 16 Publish to Local or FTP Specify the type of the exported template: HTML a group of HTML s Blogger Blogger template CodeCharge Studio CCS project Template 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. artisteer.com 16

17 17 Folder name Path Create ZIP File Include *.ARTX Project Help This name will be used as the subfolder or archive name where your template files will be saved. Specify a folder path where you want to export your template files. Select this option if you want to create a single archive file to contain your files. 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. Get online instructions on exporting the template/project. Use the Import 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 s will look like with the design selections you have made in Artisteer (e.g. font selection). In a website or blog project, you create both the design and the content at the same time. The distinction can be ambiguous though. For example, use ContentText to set the font, size and color of the text in your article. Use the Preview area to enter text in your or post directly (e.g. select artisteer.com 17

18 18 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. s or posts), or both design and content. Use the Preview in Browser 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. The language of the Artisteer interface may be configured in the Preferences dialog. The default language is English (US), but Artisteer supports many other languages. You can also use the Preferences dialog to: 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. artisteer.com 18

19 19 Preview Area Template Layout The default Artisteer template layout reflects the typical website structure, consisting of the Page Background (Background Tab in Ribbon), Header, Horizontal Menu, Sidebar (Vertical Menu, Blocks), Content (Article 1, Article 2), and Footer: artisteer.com 19

20 20 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 Title artisteer.com 20

21 21. Some of these features may be absent depending on the type of Artisteer project and CMS you are designing. Layout Element Header Page Background Sheet Menu Vertical Menu Block Sidebar Content Article Title Footer Mini Toolbar Features Suggest, Position Suggest Suggest, Width Suggest, Position, Pages (Website or Blog only) Suggest, Delete Block, Position, Pages (Website or Blog only) Suggest, Delete Block, Position Suggest Suggest Hide Article Title (Website or Blog only) 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 s. 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 artisteer.com 21

22 22 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 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 artisteer.com 22

23 23 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 s and the appropriate horizontal and vertical menu items. Hover the mouse over the menu, click the Pages icon and select the 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 s. Right-click the mouse on one of the s 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. artisteer.com 23

24 24 Page Properties In the properties you can define attributes of your. Some of these are very important to search engine optimization (SEO). General Option Description Name URL HTML Name of the web. This is used in the URL to identify the on your website. HTML reference to your. If the browser supports it, this is the title of your as it appears in the browser s tabs, or in your favorites list if you bookmark the. Note, this is different from artisteer.com 24

25 25 the title that appears in the website map. The 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. Your description becomes part of the meta tag, description, in the HTML code for this. <meta name="description" content="this is my separator " /> This is important to SEO. Keywords Your keywords become part of the meta tag, keywords, in the HTML code for this. <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. <meta name= author content= Bob Smith /> <meta name= contact content=bsmith@robertsmith.us /> Show in Menu Option Horizontal Menu Vertical Menu Description Check the box to have the displayed in the Horizontal Menu or uncheck the box to exclude it from the menu. Check the box to have the displayed in the Vertical Menu or artisteer.com 25

26 26 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 and press F2 or right-click the mouse on the and select Rename) 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 Website or Blog project in Artisteer (see the sections Home Tab and Edit Tab below for more details) artisteer.com 26

27 artisteer.com 27 27

28 28 Quick Start Guide Downloading Artisteer You can download the Artisteer installation file from the official Artisteer Web site at or Please choose the 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 chapter below. With the trial version of Artisteer you can also try Artisteer.net with the following restrictions: 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 , offering you to purchase Artisteer or continue using the trial version within the next fourteen days. When this period expires, you will receive another notification. artisteer.com 28

29 29 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, Partial (75%) and Gradients Number of Color and Font Schemes *Custom Values Dialogs refers to additional customization options available in the Standard edition. Normally, these appear with the icon in the bottom right corner of the command block on the Ribbon artisteer.com 29

30 30 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 It can be obtained from the Microsoft website at: B386F32C0992 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) Not supported artisteer.com 30

31 31 Browsers supported: Internet Explorer 7+ Firefox 2+ Opera 9+ Safari 1+ Google Chrome 1+ Technologies supported: CodeCharge Studio 4 WordPress 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 CSS 2 Section 508 (partially) artisteer.com 31

32 32 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 chapter. Log into Windows as a Power User, or assume the Primary Administrator role. 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. Activating the Software After you have purchased Artisteer you will receive a License Key by 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 artisteer.com 32

33 33 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. artisteer.com 33

34 34 Creating an Artisteer Project You create an Artisteer project using either the start-up dialog (described above) when you start Artisteer, or with FileNewNew Project. You select the type of project you want to make, create your design and content, and then save your changes with FileSave, or FileSave 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. FileChange Template). 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 s 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.com 34