Đang tải... (xem toàn văn)
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...
2 page artisteer.com | page 2 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 3 page artisteer.com | page 3 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 4 page artisteer.com | page 4 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 5 page artisteer.com | page 5 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! 6 page artisteer.com | page 6 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) 7 page artisteer.com | page 7 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. 8 page artisteer.com | page 8 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. 9 page artisteer.com | page 9 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 10 page artisteer.com | page 10 , 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) [...]... or Export the website as HTML artisteer. com | page 30 31 page 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... 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 artisteer. com | page 28 29 page 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... Samples in the Artisteer start up 2 Find a Sample Find the sample website, which seems closest to your target website artisteer. com | page 29 30 page 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... 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 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... create a Website or Blog in Artisteer (see the chapters Home Tab and Edit Tab) artisteer. com | page 19 20 page 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. .. to the web: http://www .artisteer. com/?p=a2 In this case uncheck the "Auto-activation through the internet" option and enter the obtained activation key directly in the Activation Key box artisteer. com | page 24 25 page 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. .. create a website based on one of the Artisteer sample websites, select Samples on the program start up artisteer. com | page 26 27 page 1 Select “Samples” Select Samples in the Artisteer start up dialog 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,... from an artx project artisteer. com | page 12 13 page The Preview in Browser 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 The language of the interface may be configured in Artisteer Options dialog Artisteer currently... WordPress 2.7 -3. 1 content management system Joomla (1.5, 1.6, 1.7) content management system artisteer. com | page 22 23 page 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) PNG with transparency Installing Artisteer This chapter describes how to install Artisteer on... page artisteer. com | page 16 and 17 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 . looking Web and Blog templates. Creating great designs has never been easier! 6 page artisteer. com | page 6 What’s New in Artisteer 3. 0 The new features in Artisteer 3. 0 include: • Website. 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. 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