hướng dẫn sử dụng artisteer 3 thiết kế web joomla

hướng dẫn sử dụng artisteer 3 thiết kế web joomla tài liệu, giáo án, bài giảng , luận văn, luận án, đồ án, bài tập lớn v...

Table of Contents

Table of Contents 2

What is Artisteer? 5

What’s New in Artisteer 3.0 6

How to work with the Artisteer interface? 7

Start Up Dialog 8

Quick Access Toolbar 10

File Menu 10

Preview Area 14

Ribbon 19

Quick Start Guide 20

Downloading Artisteer 20

Editions of Artisteer: Home&Academic vs Standard 20

System Requirements 21

Installing Artisteer 23

Activating the software 24

Creating a Website or Blog 25

Creating a Website From the Artisteer Built-in Samples 26

Creating a Website From Online Samples 29

Supported Content Management Themes and Web Design Templates 31

Supported Color Models and Properties 32

Creating a basic design 34

Design Customization 35

Exporting and Publishing Templates, Websites or Blogs 37

Export Options 40

Exporting a design as a WordPress theme 43

Exporting a design as a Joomla theme 45

Exporting a design as a Drupal theme 47

Publishing and Exporting Blogger designs 48

Exporting a design as a DotNetNuke Skin 49

Exporting a design as an ASP.NET Project 49

Exporting a design as a CodeCharge Studio Project 50

Exporting a Design as an HTML Template 53

Exporting a Designed Website or Blog as an HTML Website 53

Publishing a designed Website or Blog to Artisteer.Net 54

Ideas Tab 56

Creating Your Design 56

Making Adjustments 56

Home Tab (Website or Blog Only) 57

Edit Tab (Website or Blog Only) 60

Colors & Fonts Tab 72

Colors 72

Paints 74

Color Selector Dialog (More Colors) 76

Fonts 78

Layout Tab 82

Content Tab 87

Shape 87

Content Styling (Website or Blog Only) 90

Style and Font 91

Paragraph 95

Metadata 97

Background Tab 99

Sheet 106

Header Tab 110

Header Layout 110

Background 111

Foreground Photo 114

Flash 116

Title 118

Title Style 120

Menu Tab 121

Menu Layout 121

Menu Styles 122

Menu bar 123

Item 126

Subitem 128

Sidebar Tab 130

Sidebar Layout/Styling 130

Block Styles 131

Block Content 139

Vertical Menu Tab 142

Layout and Styles 142

Menu Bar 143

Item 144

Advanced Options 146

Subitem 146

Buttons Tab 149

Footer Tab 153

Glossary 155

What is Artisteer?

Artisteer is the first and only Web design automation product that instantly creates fantastic looking Website and Blog templates It is powerful software that makes YOU a professional Web designer of Websites, WordPress themes and blog templates It 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

Photoshop or Dreamweaver, and no technical skills

Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, tableless, cross browser compatible and fully compliant HTML and CSS code and export your design to create great looking Web and Blog templates

Creating great designs has never been easier!

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 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

• Website hosting service at www.artisteer.net (accessible from within Artisteer)

• Header and footer can now be page-wide

• Added transparency areas for various graphical effects

• Added masked header textures (transparency areas in the texture graphics)

How to work with the Artisteer interface?

The Artisteer interface is quite 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

Start Up Dialog

The Artisteer start up dialog suggests types of projects available in the software.You can create a website or blog, use the ready built-in or online website samples, design templates for Joomla, WordPress, Drupal, Blogger, DotNetNuke as well as create an ASP.NET application or CodeCharge Studio project

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 and blogging tool

Samples

Samples suggest different categories of websites with typical start-up content There are Personal and Professional, Business, and Community samples Custom content may be entered WYSIWYG-wise Editing tools are located in the Edit tab Besides, you can insert links, images, cliparts, tables, and buttons You can also view and modify the source HTML, as well as add/modify the web design using all the design tools available in Artisteer

Samples may be also used as CMS templates Go to

File-> Change Template and select the appropriate CMS, then export the project

Online Samples

Online samples will take you to Artisteer.com and show a gallery with free ready-to-go templates, which can be previewed and downloaded at the website The fully customizable templates are available for Joomla, WordPress, Blogger, Drupal and DotNetNuke They are also available

as an Artisteer project or an HTML website template

Online samples may be used both for personal and for commercial purposes

, , , Content Management

System Themes

Create and export a Joomla, WordPress, Drupal, Blogger

or DotNetNuke template for your website or blog Change the project anytime by going File -> Change Template

, Web Design

Templates

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

Quick Access Toolbar

The Quick Access Toolbar is a customizable toolbar that provides the ability 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 interface, start up and preview settings can be adjusted in the Options dialog (at the bottom right corner of the file menu)

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 in the trial mode

Change Template and select the necessary type of template Artisteer will automatically adjust

the created design

The Export menu in Artisteer allows exporting a template as a Content Management theme and/or as

an HTML page, configuring Export options and adding a Site Icon (choose from the gallery or insert from file) The export features are also available at the Quick Access Toolbar

The Import feature (Website or Blog only) allows importing design and content from an artx project

The Preview in Browser

The language of the interface may be configured in Artisteer

option may help see how your website looks in different browsers Artisteer suggests preview in Internet Explorer, Firefox, Chrome, opera and Safari The preview in Artisteer is active only for the browsers installed on your computer

Options

You can also enable or disable start up dialog, auto-preview and preview highlights

dialog Artisteer currently supports Arabic, Chinese, Czech, Danish, Dutch, English, French, German, Hungarian and Italian languages The default language is English (US)

The Preview highlights feature is designed set off the items of template layout, such as Header,

Menu, Article, Block and Footer When enabled the feature highlights the borders of a layout item in yellow

Preview Area

Template Layout

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

The borders of layout elements are highlighted in the Preview area in yellow on mouse hover

Leftclicking the layout element activates the corresponding options on the Ribbon

Over each layout element there is a mini toolbar with available features, such as Suggest , Position , Delete Block , Pages , Width (Sheet only) , and Hide Article Title Some of features may be absent depending on the type of Artisteer project and CMS

Layout Element Mini Toolbar Features

Vertical Menu Suggest, Delete Block, Position, Pages (Website or

Position

In the Preview area you can manage the position of Header, Menu, Vertical Menu and Blocks Hover the appropriate element and click the Position icon Please note, that the position of Blocks and Vertical Menu is not available for Drupal and DNN skins, as the position of these elements can be changed only within the CMSs

The Website or Blog Artisteer projects include additional Pages option, which helps to link pages and the appropriate horizontal and vertical menu items Hover the menu item, click the Pages icon and select the page

Website Map (Website or Blog Only)

The website map is located at the left side of the preview window It helps to arrange and move through web pages Right click the website map area to evoke the 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

Page Properties

In the page properties you can add some SEO-valuable meta data for the created pages

General

Option Description

Name URL Here you can type the valid URL name of the web page

HTML Here you can type the page title, which will be displayed in the

content area of your website and in the browser tabs

Page Tags

Option Description

Description Give a short description of the created page The description should

accurately describe the contents of the page

Keywords Specify the keywords for the created web page

Custom Meta Tags Type your own meta tags following in the following format: <meta

name = “author” content = “Artisteer” />

Show in Menu

Option Description

Horizontal Menu Check the box to have a page displayed in the Horizontal Menu or

uncheck the box to exclude it from the menu

Vertical Menu Check the box to have a page displayed in the Vertical Menu or

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 dummy text and add/paste the new data Website Headline and Slogan, Page Title, Articles, Block text, and Footer text may be changed

in Artisteer with the WYSIWYG mode Horizontal and Vertical Menu item names may be altered in the website map (press F2 or right click and select Rename)

Ribbon

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 the part

of 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 appeare on the Ribbon if you create a

Website or Blog in Artisteer (see the chapters Home Tab and Edit Tab)

Quick Start Guide

Downloading Artisteer

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

http://www.artisteer.com 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 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 so you can activate the software at

any time you wish and the activation instructions are provided in the Activating the Software

Editions of Artisteer: Home&Academic vs Standard

chapter

There is only one platform version (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:

Export as Blogger Template  

Export as Joomla 1.5 or 1.6

Template

Library of Textures, Glares,

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:

B386F32C0992

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9CFB2D51-5FF4-4491-B0E5-Mac OS (Intel)

Intel Core™ Duo 1.33GHz or faster processor

150 MB free disk space

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

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

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 to be used to activate the software The type of license that you purchase determines the features that are available in Artisteer (‘Home’

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

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 obtained activation key directly in the Activation Key box

http://www.artisteer.com/?p=a2

artisteer.com | page 25

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 a WYSIWYG mode, use the standard Artisteer tools to add and modify design and publish the created website to a free hosting Artisteer.net or export it as an HTML project Besides, you can choose from different website samples with embedded content or select one of the available online samples made by professional web designers

To create a new website or blog, use the ready website samples or go to the online gallery of samples, select the corresponding icon in the Artisteer start up dialog You can also switch to Website or Blog from another template (File -> Change Template -> Website or Blog)

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

Creating a Website From the Artisteer Built-in Samples

The Artisteer built-in sample websites 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

2. Edit

Edit the dummy content in the Preview by

clicking the content area and pasting/typing

the text Rename Header, Slogan, add and

rename Pages, Blocks and Articles

3. Publish/Export

Click Create Website to publish the

website with the help of Artisteer.net - a free online hosting service and blogging

tool, or Export the website as HTML

The sample websites in Artisteer are arranged in three groups – Personal and Professional, Business, and Community You can choose from the variety of topics too – there are diary- like sample websites, samples on law, health, sport, fashion, business, restaurants, motor-cars, parenthood, religion and education

Sample websites may be modified in Artisteer: use the options in the Home and Edit tabs to add pages and style the content, and add the content in the Preview area Besides, you can insert links, images, cliparts, tables, and buttons as well as view and modify the source HTML

3. Edit Edit the dummy content in

the Preview by clicking the

content area and pasting/typing the text

4. Publish/Export

Click Create Website to publish the

website with the help of Artisteer.net - a free online hosting service and blogging

tool, or Export the website as HTML

Creating a Website From Online Samples

If you have not found the right sample, there are more free samples on the official Artisteer website http://www.artisteer.com/?p=free_website_templates

1. Select “Online Samples”

Select Online Samples in the Artisteer start up

2. Find a Sample

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

artisteer.com | page 30

3. Download the Artisteer Project

Download and run the artx project

4. Edit Edit the dummy content in

the Preview by clicking the

content area and pasting/typing the text

5. Publish/Export

Click Create Website to publish the

website with the help of Artisteer.net - a free online hosting service and blogging

tool, or Export the website as HTML

Supported Content Management Themes and Web Design Templates

On Artisteer start up you can choose a type of project you would like to create Artisteer 3.0 designs templates for Joomla, WordPress, Drupal, Blogger, and DotNetNuke You can also export Artisteer generated templates as ASP.NET and/or CodeCharge Studio applications

Artisteer generated templates of any supported Content Management System and Application may be exported as HTML pages Such templates are a source of professionally developed design, which may

be useful for web designers

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 components returns the black color

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 quite convenient to describe colors as made up of hue, saturation and lightness (or luminosity) This HSL scheme defines colors more naturally and can be visualized as a cylinder whose central axis ranges from black at the bottom to white at the top with neutral colors between them The angle around the axis corresponds to “hue”, distance from the axis corresponds to “saturation”, and 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

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

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 on or click again to see another suggested design

background separately The

3 Click

Export to save

the created design as a WordPress theme, HTML

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 to match your needs On each tab there are several options for customizing specific elements

Note: Some options may not be available depending on 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 specific list then click on “More…” to get full customization capabilities:

Even more options

The user interface for a typical dialog box includes the list of the option groups located in the left pane

of the dialog box Click on the group to expand 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 this textbox

Exporting and Publishing Templates, Websites or

Blogs

Once you have settled on the basic look of your site, you can export it as a design or template which is compatible with the type of blog, CMS, or application that you want to use

There are three steps that need to be followed to export the design:

First, select a template which will be applied and used when viewing the page in Artisteer Currently the following templates are available: Website or Blog (HTML or Artisteer.net), WordPress, Blogger, Joomla, Drupal, DotNetNuke, ASP.NET Application, and CodeCharge Studio

Next, tell Artisteer what export option you want to use when generating the selected template Choose the desired Export Design option to export and save your design as individual style files

In the Export Dialog, specify the desired template name and the folder to export your template files to

If necessary, compress the template folder by using "Export as a ZIP archive" option If you would like

to modify the template in the future, check the “Include the *ARTX project” box, and your project will be saved in the same folder as the template*

*Blogger templates may be published directly from Artisteer The “Publish” feature will upload your template to Blogger.com and the containing images will be uploaded to Picasa, ImageShack, or some other image hosting server, depending on your Export options To get the template published, open

“Export Template” on the quick access toolbar and select “Publish Template to Blogger.com”

The Artisteer “Export Template” menu for Blogger also includes the “Upload to ImageShack” feature, which may be used for free hosting of images

Option Description

Name Identifies the name of your theme It is recommended that the name

should conform to the naming conventions of the CMS used

Path Indicates the path to the folder where the exported files should be

placed

Export as a folder When the template is exported, a folder with the specified name

containing all the theme files is created in the specified location Export as a ZIP archive When the template is exported, a zip archive containing all the

theme files.is created in the specified location

Include the *ARTX Project Saves the *ARTX project and the template in the same folder

Thus, the template may be further customized

Export Options

You can find the export options you select Export  "Export Options " from the File Menu (or use the Export  "Export Options" command on the Ideas tab or on the Quick Access Toolbar The dialog provides a set of options for exporting templates from Artisteer

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

General Tab

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

Option Description

Text Direction Specify the text/writing direction Artisteer supports both Left to

Right and Right to Left directions

Site Icon Choose a site icon form the gallery or insert a custom icon from file