Home

Artisteer User Manual

1. Selecting a content style either for the page or Current Row is also a way of resetting all of your options but you need to use it with care since it also resets changes you may have made to your Rows and Cells For example if you choose a style with borders then borders are added to all of the Cells on your page If you change the border appearance for a Cell and then later select a content style that does not have borders this may eliminate any changes you made to the Cell But selecting a content style does not affect the All Pages options These options define how the border is supposed to appear when you select a content style with borders Even if you select a different style without borders your All Pages options are not changed Suppose you choose a content style with borders but no row margins or spacing Artisteer4 0 51 Artisteer 52 Web Design Revolution i o A oman _ a leases foe on oo Eq Current Row b E All Pages b V Show Gridlines By default the All Pages options have a defined Margin 10px and Spacing 10px but you don t see this in the layout because the content style you selected does not include margin or spacing Even though these settings are a single value think of each as a set of values which are either included or excluded when you select a content style Fite SS WO Undo Redo Q Export Untitled Artistee
2. Artisteer4 0 84 Artisteer 85 Web Design Revolution group New Bright Contrast Dark Light Monochrome Pastel Blue Green Orange Red and Yellow You may also create a custom color theme by adjusting the color in Paints in the Adjust menu in the Color Selector dialog click More Colors or using the Fill option to adjust the color of a specific layout element in tabs Background Sheet Header Menu Content Sidebar Vertical Menu Buttons See working with colors Click Save Theme to preserve the created color Theme When you save a color theme it is added automatically to the Artisteer Color Themes custom gallery so you can use the color theme in other Artisteer projects Select Delete Theme to remove the theme from the Artisteer custom gallery E save Theme i Delet Save Color Theme x Color Themes Colors Enter Color Theme Mame violet a Save Theme O Swe Delete Theme Y Filter Custom Artisteer may help you define and apply the color theme for your website Select the From Image option and upload the image you would like to use as a basis for a new color theme Artisteer will attempt to create a color theme bases on the prevalent colors in your picture Artisteer4 0 85 Artisteer 86 Web Design Revolution Color from image x Source images Palettes I FromFile o oox caa Paints The three main co
3. Blur E Texture m Gradient E Glare Mask z Marketplace 1 Lev Suggest Mode E Play Lal Motion 2 E Add Image gt Add Shape asi z a Background Slideshow P E Transparency C Horizontal Padding IL vertical Padding Fill Use the Play option to run the slideshow Use the Motion option to adjust the way the slides appear Artisteer4 0 81 Artisteer 82 Web Design Revolution TF Options Speed Delay Repeat Use this option to set the slideshow speed The option allows to set how much time should pass before a slideshow replays The option activates or turns off slideshow replay Artisteer4 0 82 Artisteer 83 Web Design Revolution Collage Options Adjust the width and height of a slide collage General vee Mask is one of the effects that overlays an image Use this option to adjust the mask parameters such as Mask repeat Position Flip Rotate and Scale Use this option to adjust the background parameters such as Color weight Color Saturation Blur Transparency and Blend Mode You can also set the Background format of the background image JPEG or PNG and specify the JPEG image quality Aare Adjust Transparency Blend Mode Position Fit and Scale parameters for glare s in the slide images Style an image or texture using Blend Mode Transparency Color Weight Image or Texture Color Saturation and Contrast parameters 7
4. in the appropriate list will open the Block Option dialog where you can adjust the settings Block Options ES a Header Texture Texture Position Gradient Icon E Content Texture _ Grdient o Block Header and Content 5 Header Header Texture m Header Texture Specify the value of the Vertical Padding 0 25 px the Background color and Border color Transparency 0 100 Text Styling and the Width of the Block Header Border 0 10 px and Transparency 0 100 Within this section you can adjust the Transparency 0 100 Blend Mode overlay softlight normal Color Weight Color Saturation Contrast and Smart Invert This section contains the following settings Scale 10 130 Texture Repeat fill norizontally vertically Position top left center left bottom left Flip vertical horizontal and Rotate CW 90 CCW 90 Position Gradient specify the Gradient Contrast 100 100 Change the icon enable disable the use of the original icon size and specify the Offset value 0 20 px con The Options for Block Content include Padding 0 50 px Fill Border Color Transparency and Border Width 0 10 px The Texture and Gradient options Artisteer4 0 176 Artisteer 177 Web Design Revolution Content Texture include Blend Mode Transparency 0 fully opaque to 100 fully Gradient transparent Color Weight Color Saturation and G
5. Overlay Increases the light effect of the image by increasing the contrast between the lighter and darker areas Set the texture transparency value 0 100 Use this to adjust the percentage of color the Menu Area fill color will have when blended with the texture Use this to adjest the color saturation amount of gray in the color of the Artisteer4 0 159 Artisteer 160 Web Design Revolution wal Menu Area fill color when it is blended with the texture Color Saturation Mask Mode Enable or disable the mask mode and specify whether a mask should appear along with the texture wal Adjust the contrast of the texture and background Contrast Smart Invert Enables or disables the swap of the ornament and background colors of the texture Texture Position Menu Area and Item scale The scale option allows to increase or descrease the texture saving the original proportions The scale values range from 10 to 130 Texture repeat The Texture repeat option controls the way the texture populates the menu area Choose from Fill Horizontally or Vertically modes or disable the Texture Repeat option Position Specify the texture position Top Left Center Left Bottom Left Flip Use the Flip option to get a mirror reflection of the texture Supported values None Vertical Horizontal Rotate Rotate the texture 90 degrees clockwise or counterclockwise or disable the Rotate option Gradient Menu Area
6. Use the Margin option to set the distance from the top element Positive top margin values range from O to 50 px you can also select a negative margin of either 20 or 10 px value The top margin can also be adjusted in the Layout Options panel Click More Margins to open the options You can also these options by selecting the Custom Values icon in the Layout or Menu Styles command group on the Ribbon bar Layout Use this option to set the distance from the top element Positive top margin values range from 0 to 200 px negative margin values range Top Margin from 200 to 0 px The Top Outline feature enables or disables the rounded menu corners of the menu Top Outline Artisteer4 0 156 Artisteer 157 Web Design Revolution Menu Styles Passive i Passive Menu Styles P The Menu Styles group provides a gallery with ready made Horizontal Menu styles Select a Horizontal Menu and use it as it is or customize the menu style in the Menu and Submenu groups Select the Custom Values icon for extra customization in the Options panel See Menu Options below Menu Refine the horizontal menu further by adjusting the styles of menu area and items The styling options are available inside the Menu Area Item Active Passive and Hovered lists E ee Active e a a 7 Passive Menu Item Coloring Area ka T T l IEU Hovered k Menu p Use the Menu Area list
7. dhA To edit the image right click the image and use the context menu e a e e E Cut Copy Paste Paste as Text Edit Hyperlink Change Image New Slide d Image Options Row Style b Hide Article Title Edit Source HTML or hover the mouse over the inserted image and click the Image Options icon in the top right corner of the image The Image Options will be displayed in the s ideout Panel Artisteer4 0 68 Artisteer 69 Web Design Revolution j x Width 681 gt px IE Height sit px 1 G Scale 85 r Alt Text el Preview Yes Image Options source filename for the image When you add an image either your own file or a picture from the gallery the file is copied to the images folder of your website template That is when you export your HTML website you should find your image in the images folder gl z If you are using Artisteer net when you publish your website the image is ource copied to Artisteer net and added to your media library You can use these images on your own websites and websites you develop for clients subject to the following restriction http www artisteer com p fag tag6 When you insert an image the dimensions are scaled to fit the content area This is the width of the image in px after insertion in the cell If you change Width the width the image is scaled i e Height changes automatically so the image keep
8. Insert Use this option group to add a photo shape or controls such as headline slogan search box or RSS to your Header You can choose from the gallery of professional images with many different types of subjects insert your own custom photo or find more free images in the online gallery using the More Online feature The Image menu allows to add an image object to the Header You can select a professional photo from a gallery grouped by subject Business Communication Teens Music Education Travel etc insert your custom photo or browse the Artisteer online image gallery using the More Online option You can insert several images and arrange them by dragging and dropping them in the right position rotating or resizing them You can also place an image on top of others by selecting the Bring to Front Send to Back Option Use the Edit Image options to align the image add an effect such as recolor shadow or flip or go to Options for extra customization See Options gt Photo Object Options a Position My Effects 7 Options Edit Image Ma Artisteer4 0 146 Artisteer 147 Web Design Revolution The Shape option allows to add one of the suggested shapes Drag and drop or rotate the shape to find the right position You can also click on the shape area to add some text or activate the Edit Shape options that will appear at the right side of the Ribbon bar Text gt la Effects i
9. J Preview mok Cancel For the Footer Text Blocks Text Article Headline Text and Article Header Text you can also modify the Paragraph settings such as alignment indentation and spacing Article Content Text Fort Paragraph Alignment Indentation Left Side Right Side Spacing Before After Ward Preview u E E Default px Default ps T Deiat F p ps ps Default Indent First Line Default px Line Spacing t bea Par paph Pars paph Par paph Par paph Para paph Par paph Par paphPar paph Par paph Pam paph Pars paph Para paph Par paph Pam paph Far paph Par paph Par paph Par paph Para paph Par paph Par paph Par graph Par paph Par paph Par paph Para praph Para paph Pars paph Pais paph Fara paph Par paph Par paph Para paph F Preview OF Cancel The Font Scale option allows you to change the overall font scale Using the Options button you can define a custom font scale This scales all of the text on your page based on the font size defined for each text item Artisteer4 0 93 Artisteer 94 Web Design Revolution Set Font scale for all text The supported values are from 50 to 200 Font Scale 200 is the biggest font scale value Artisteer4 0 94 Artisteer 95 Web Design Revolution The layout tab is where you can quickly change the overall positioning of elements on the page
10. More Heights see Options Custom layout options can be configured for the Header using the General tab on the Header Options panel General Top Margin a Top Outline set the height length of the Header as it appears on the page Note this is independent of the position of the Header relative to the menu sheet or page This is the space between the Header and the top of the page or bottom of the menu if it exists When the Top Margin is 0 the Header appears to be joined to the top of the page See Margin above When turned on Top Outline rounds off the top corners i e applies the radius Using Top Outline and a radius to round the corners helps differentiate the Header from the rest of the Page This option is only available when the Header is positioned outside the Sheet since otherwise the Header is part of the Sheet and therefore you need to Artisteer4 0 134 Artisteer 135 Web Design Revolution configure this with the Sheet options When turned off the corners are squared i e does not apply the radius A negative margin will display the Header overlapping top of the page i e truncates the top of the Header Within the Background option group you can control the background color transparency and add effects such as textures glares shadow gradient mask and round corners ig Fill Color E Transparency Py Effects 7 Background Ma The Fill Color option pro
11. 153 Artisteer 154 Web Design Revolution The list of fonts you see in Artisteer are based on the installed fonts for your system Artisteer does not support embedded fonts so you should pick fonts that are most likely to be on a wide range of systems Web safe fonts are an industry recognized set of fonts that are most commonly available on most computer systems You can find a list of web safe fonts from many sources on the web Header Logo Name Font Font Family Font Style Font Size px Headings Bold 26 Arial Heading Default Style 14 a Arial Content ce 16 Arial Italic 18 a5 Arial Black Bold 20 Comic Sans MS Bold Italic 22 Courier New 24 Georgia bi ee T7 Effects A Underline Aa E Small Caps A C Overline AA E All Caps Strikeout Character Spacing Spacing 3 Normal By px Font Preview AaBbYyGgLluj Artisteer4 0 154 Artisteer 155 Web Design Revolution Menu Tab The Menu tab is used to control the position and design of the horizontal menu The tab also includes tools for managing the design of menu items and subitems As always you select the appropriate level of customization using either the fully automated suggested design or manually using the customization options on the Ribbon bar or in the Options panel Artisteer supports three of the most popular Web 2 0 menu styles classical with separators tab
12. Artisteer4 0 39 Artisteer 40 Web Design Revolution this page lt meta name description content this is my separator page gt This is important to SEO ate Your keywords become part of the meta tag keywords in the HTML code for this page Keywords lt meta name keywords content sepkeyword gt This is important to SEO 523 Use this text box to add the HTML code to define additional meta tags you want included These are important to the search engine Custom Meta Tags rankings for your page lt meta name author content Bob Smith gt lt meta name contact content bsmith robertsmith us gt 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 ETP Server 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 Blogger Export Options Show BOCED Use this option to hide or show the blogger Navbar coo Define if categories pages or archive should be used as the source for the horizontal and or vertical menu Pages are the static Artisteer4 0 40 Artisteer 41 Web Design Revolution Horizontal Menu Source Ver
13. T suggest Layout Suggest Images y Page 5h Delete Page p Design Ideas Website Export Gp Filer E ke O Undo Redo aF Export 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 Artisteer4 0 14 Artisteer 15 Web Design Revolution Panel Mode Most of your options can be set in a panel that slides out in the Preview area With Panel mode you don t have to continually select the ribbon bar to open a dialog to change options As you work in the Preview area the panel options change depending on which elements you re working with e g menu bar header images etc E Image or Texture Vertical Menu Page E
14. The widgets can be disabled by selecting Edit Inactive widgets Save Widget Artisteer4 0 203 Artisteer 204 Web Design Revolution First Top Widget Area This sidebar is displayed above the main content You can also choose to display the widget on all pages except the selected page or specify the ids of pages where the widget is displayed Show widget on All pages Selected pages All pages except selected To move a widget to another widget position scroll a bit and specify the right position e g Primary Widget Area Sidebar Position Primary Widget Area Select ly A Secondary Widget Area Select r A First Top Widget Area Select Je Second Top Widget Area Select 6 First Bottom Widget Area Select r You can also select the appropriate widget appearance as the rest of sidebar as a block as a post or as simple text Artisteer4 0 204 Artisteer 205 Web Design Revolution Appearance sidebar default sidebar default block post simple text When the widgets are configured the template looks as in Artisteer except for menu which needs to be activated To activate the menu exported from Artisteer navigate Appearance gt Menus gt Theme Locations and select Sample HMenu as Primary Navigation Theme Locations Your tiene supports 7 menu Select whch MENU wou Wale ike fo use Primate Waevigation Sample H ienu A Voila
15. This option is enabled if you have selected a sidebar style Layout gt Column Style and added a Glare background Transparency Control the transparency of the column and glare to the Sheet 100 means that the glare is not visible As you Artisteer4 0 104 Artisteer Web Design Revolution 105 reduce this the glare should show thru scale Use this to scale the glare background image E g if you choose the particular glare from the gallery with large bubbles reducing the scale will reduce the size of the bubbles you see in the background Blend mode Set how the background color of the column and the background glare are blended into each other Hint temporarily set the transparency to 0 so you can view the effect better There are 3 options available Normal No effect on the underlying layers Overlay Blends the two layers together by changing the opacity darkness and lightness of the top layer soft Light This blend mode lightens or darkens the image depending on the color of the top layer If the top layer s pixel is dark then the bottom layer s pixel is darkened If the top layer s pixel is light then the bottom layer s pixel is lightened Artisteer4 0 105 Artisteer 106 Web Design Revolution Content Tab If you refer to the Preview Area section described earlier the Content tab is used to style how your article content will appear o
16. Transparency m 15 pixels Effects B Texture z W More Paddings E Gradient t By Shadow Clicking on the More buttons will open a Block options dialog Artisteer4 0 171 Artisteer 172 Web Design Revolution h a Block Options Layout Texture Gradient Shadow Header Texture Texture Position 4 E Padding oy Fill IT JH Border E k A Transparency g Border width 1 a Background jist Specify the space between the outer borders of the Block and the content Padding area within the Block Supported values 0 50 pixels This option is not available if you have not selected a block style a Specify the color of the block background Fill H Specify the border color of the block background Border Color F Specify the Transparency of the Background Supported values O fully Transparency opaque 100 fully invisible O Specify the Block Border width Supported values 0 10 pixels This option Border width is not available if you have not selected a block style Texture Artisteer4 0 172 Artisteer 173 Web Design Revolution F Specify the Transparency of the Background Supported values O fully Transparency opaque 100 fully invisible ed Specify how the Texture blends with the underlying layer of the block Blend mode Options Normal No effect on the underlying layers Soft Light
17. After that you may need to disable some of the previously created pages in menu For more information about adjusting menus please refer to Artisteer Blogger Help Artisteer4 0 212 Artisteer 213 Web Design Revolution CMS A Content Management System CMS is a software application designed to create edit publish and manage Website content using a simple browser based interface The content may include text photos electronic documents music video and other type of computer files CMSs usually provide a number of ready made solutions and standard templates for most common applications The main advantage of a CMS is that it requires almost no technical skills or knowledge to create the website and manage its content gJ Q a tu J A blog short for Web log is a special type of Web site with a series of entries usually posted to a single page in reverse chronological order Blogs are often maintained by an individual and represent the personality of the author provide diary type commentary links to articles on other Web sites descriptions of different events and social issues or include other material such as graphics or video WordPress WordPress is an open source blog publishing application an advanced blogging tool with a focus on aesthetics web standards and usability The official WordPress website is http wordpress org Artisteer4 0 213 Artisteer 214 Web Design R
18. Artisteer4 0 214 Artisteer 215 Web Design Revolution 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 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 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 red yellow a cyan eine 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 Lig
19. Glare 104 Sheet the Header and the Menu Applying the radius to one applies the same to the other even if they are not all on the Sheet But the radius may be disabled for the Header and the Menu depending on the position and orientation E g if the Menu and Header are in the Sheet but the Menu is above the Header the radius option is disabled for the Header because it is sandwiched between the menu and the top of the Sheet on the page background and therefore you cannot display it with rounded corners The column width options refer to the sidebar not your content area That is you can resize the columns of your sidebar containing blocks but you cannot resize the column containing your page or post content Column 1 2 and 3 depend on the number of columns and orientation of your sidebar The columns corresponding to the sidebar positions are enabled while the one column corresponding to the content area is not E g if you choose two columns with the sidebar on the left then the Column 1 width option is enabled while the Column 2 and Column 3 options are disabled Note if you make the width of any column too wide this may cause other layout elements or content to wrap around or overlap other areas incorrectly Using the column style options you can control the transparency of columns change the color of borders and adjust the weight and style of separators borders that separate columns
20. Home Edit Colors amp Fonts Layout To o eoeee cuns EN Header C Margin fin Column Width Ga Widgets F Menu JB Padding E Column Style Blocks Suggest Layout Sheet Width Columns New ae i a L4 Footer Ei Margin Block Ideas Design Layout Sheet Layout m Columns a Blocks B 1 7y AAI I n Design Layout The Layout gallery provides a simplified way of selecting the layout of the Header and the Horizontal Menu bar You can also select the style and Gallery orientation of these elements using the options described below Note the gallery options do not include the Footer If you want to change the Footer area use the group of Footer options described below The gallery is divided up into several patterns Basic no header and no menu or menu conjoined with the sheet or menu separated from the Sheet Fixed header with or without the horizontal menu bar either conjoined or separated from the Sheet Outside The menu and or the header are separated from the Sheet Menu Inside Header The menu appears inside the Header area and the Header has or has not some margin space at the top Wide The header and or the menu are the same width as the page as opposed to the same width as the Sheet in other options The Header Artisteer4 0 95 Artisteer 96 Web Design Revolution area cannot have a defined width It can
21. Texture Position Padding gt View i Vertical Align gt SERON Subpage 1 ii No Border consectetur IL Top i Subpage 2 W Cell anaes _ C Aa Borders a tellus sit 6 px Solid M Subpage 3 rat iaculis g f E Right gt Blog rane i Solid X nperdiet Block Theme Colors Bottom Eider coulent hare Read T More Borders H m O LJ m mj 6 px Solid F SA Carrere aE BEEBE munum 17 Text 6 px Solid z Additional Colors Lorem ipsum dolor Suspendisse pharetra auctor EG Nunca sollicitudin es i g E E G tra Nunc a sollicitudin est Text O Text phare ullamcorper gravida fe Donec vel neque in neque porta ame m lore ue Send 2 t Spe a More Colors venenatis sed sit amet lectus sed Donec vel neque reque Curabitur ullamcorper gravida felis sit porta venenatis sed sit amet amet scelerisque lorem iaculis sed lectus Artisteer4 0 58 Artisteer Web Design Revolution 59 Select the second row and change the Row border color This adds a border around the second row and since the Cells are spaced some margin is added to both sides and now you see a separate border around the Cells v Arial Bs Z u x xX AY Style and Font Paste Clipboard Pages gt Home B Blog Posts amp Post 2 E Post r D Fie p H O Undo Redo Q Export Home Edit Colors amp Fonts Layout Content Untitled Artist
22. Texture Position m i 3 m Gradient Page 1 v Subpage 1 i Color weight o v Subpage 2 al Color saturation o ki v Subpage 3 Bur o px Page 2 E Transparency o w BI ock Eil Blend mode Normal Enter content here o 7 oe a eee Suspendisse pharetra auctor phare el Image Format JPEG Nunc a sollicitudin est Text E JPEG quality a Donec vel neque in neque porta Click on the Icon to turn off Panel Mode and display the options in a dialog window Artisteer4 0 15 Artisteer 16 Web Design Revolution Collage Options x El General Background Mask Sani me Zi Glare W Color saturation E bz E Image or Texture i E Texture Position i s Gradient 2 Transparency jo TE Blend mode Normal jel Image Format JPEG r 3PEG quality 5 2 L a Pages Posts Panel The Pages Posts panel is located on the left side of the preview window The folder in this panel is your site map which shows you all of the pages and posts articles have been created in your project You can manage your pages and posts using the context menu For instance right click on a page or post in the folder to display the context menu and then select one of the commands New Page New Child Page New Blog Post Edit Rename F2 Delete Use as Blog Page Hide Article Title Properties You can hide the Pages Post Panel by clicking on the
23. gg tyi g m Content T H Block Ideas Block Styles F Block Content Artisteer4 0 168 Artisteer 169 Web Design Revolution Block Styles You can choose a block style from the gallery There are three major groups Gallery Simple With Header and Without Header The thumbnails give a basic idea of the block design Radius specify how round the corners of blocks should be select a px value from the list or set your custom value at More radiuses Block Spacing is the space around the block which separates blocks and the main content Select a px value from the list or set your custom value at Styling More Spacings Distance is the space between the block header and block content Select a px value from the list or set your custom value at More Distances specify the Inner padding value adjust the color border weight color and Background transparency of the background add texture insert from file gradient and shadow Teee Style the text add an icon fill the block header background with color adjust eader the border add transparency texture and or gradient Adjust the text padding fill the block content background with color adjust Content the border add transparency texture and or gradient The Styling option provides the ability to change block spacing alter the distance between blocks or make the blocks more rounded by changing the radius value Artisteer4 0 169
24. icon in the upper right corner Artisteer4 0 16 Artisteer 17 Web Design Revolution Pages a B Home K ewe Enter Sit subj New Page n er l e ubi Ba New Child Page Blog New Blag Post i Edit Post 2 5 7 E Post Rename VMenu Delete gt Home Use as Blog Page Hide Article Title Subpage 1 Subpage Properties page lt o Subpage 3 Alan Page Properties Properties General Page Tags a HTML 59 Title cane 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 of the web page This is used in the URL to identify the page on your website Name URL Artisteer4 0 17 Artisteer 18 Web Design Revolution E 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 Wile favorites list if you bookmark the page Note this is different from the title that appears in the website map Pages Posis Panel The title in the website map is used in your horizontal and vertical menu if you have not changed the menu source By default the menu sources for both horizontal and vertical menu are the pages you create in Artisteer The captions are from the page titles in the site map In all of the built in CMS templates you can change the source for both in the backend Yo
25. import content or design from an artx project preview the template in one of the popular browsers develop a plug in as well as find general information about the version of Artisteer and your license key 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 Please note that the Save Save As option is disabled if you are using Artisteer in trial mode Artisteer4 0 24 Artisteer 25 Web Design Revolution Use the Export option to export or publish a template to one of the supported Content Management Systems and solutions Use the Import feature to import the design colors textures etc and or content pages posts widgets etc from another artx project Use the Preview in Browser option to see how your website looks in different browsers The preview e g Chrome is available in the list of browsers if the browser is already installed on your computer Use the Develop option to create debug save a plug in or deploy it to the Artisteer MarketPlace You can find the Quick Start Guide and other resources at the developers wiki page Enter your license key in the Activation window to activate Artisteer For more information about activation see Activating the Software Use the About Artisteer dialog when reporting a problem or asking a question in support Use the Preferences dialog to enable or disable th
26. 0 38 Artisteer Web Design Revolution Watermark Tab Show Watermark i Watermark Text Footnote Tab Include a backward link to the author Include a backward link to the CMS and the Artisteer 39 Description lf checked the Watermark Text will be repeated throughout the page The text to be displayed across the page when the Show Watermark option is enabled Description When checked the above defined author name will be displayed at the bottom of the page in the Footnote with a link using the name of the Author and the Author s URL address as defined in the Description options above If Author and Author s URL is blank default this does not appear When checked the CMS name and Artisteer will appear at the bottom of the page in the Footnote Uncheck this box if you do not want this to appear Website Template Export Options Ea Default Page Tags Description 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 lt head gt tag You can also add tags for each page separately These tags will override the default page tags To add tags to a particular page right click the page in the Pages Posts panel and select Properties gt Page Tags Give a short description of the created page Your description becomes part of the meta tag description in the HTML code for
27. 184 SU SMS UU a se act cette trast aes g esate ttteetna cetera E sean 185 OPIO lt ener ne ee E ne eee 185 CONU OS TAD e a A E E caceeqeeeersseecoeeneece 187 Ohi Ce gi 0 a E E 188 Control Options Seen 191 FOOF TAD a E 193 EY OO A A E AE E E A A A E aaensaunquanesanes 193 e016 2 oV Saee A ee ene eee 193 6 101 e e E S eee ee ee ee 194 GN PE eg acts 110 gt ee ee eee 196 Theme options for WordPress themes ccccccsscccececeeeceeeeeeeeceeeceusesaeecseeseueenaeenaees 196 Importing Templates with Content to CMSS ccccccceccneeeeeeeeeeeeeeeeeeeeseeeeeesaeeeesaaeeees 199 OO NM hase sees satan ee os cs see eens pe get eee 200 ALOT 20 ad LISIS ee ane nee 203 PUI Alec eeracetaletatatctaratatetatacatceahatesaictacesate E ateratatatatstaictacesate ata aietaiatala 205 DION GINDI 209 BOJO O aene E E tae eee cate ees 211 Eo e h A E eee E O A E ee E 213 GMS a E E eee ee ce eecee ee seecseeeeesceee ees 213 BIO eee tat cate AE EEEE E ait E E A E E E E A 213 ALELO CSS EEEE EIEE EE EEEE EEEE EE 213 JOOMA are nee eee ee ee eee 214 PD TUN Al EEA A A E AOE EAE 214 WIS WA Udo aana E ANEN 214 Codechalge SURO as oesarscis sete sacs wats ctyersctcrratonetdesvctosrass wstosic so watosetdeetos nets EENEN ENEE 214 COTO INOS csi sgstt ca a coieca yc teciuaatth ca cic bus saudsuece sei cayraeticiusontheaeheeseusesuroeeeie 214 ott Se er eee 216 Artisteer4 0 5 Artisteer 6 Web Design Revolution ace eee eo
28. 7 Clipboard Style and Font f Basic a Source Pages Row Options we xX _ Home 7 biog ee FT Posts VMenu b Margin 5 Post JE Spacing Pos Senne _ Border Radius tetur ap Menger Ep BD mage o T a F Teeure Poston ults gt HTML maur vitae Too Block lm TE v Enter content here b No Border Celis No Border Text Suspendisse pharetra auctor E Marg x R i Border Weight p SC i f re ggr Lorem ipsum dolor Nunc a sollicitudin est uiamcoper gravioa tens siri dna vena Text Text Donec vel neque in neque porta venenatis lens pas Jk spadng x oan sed sit amet lectus ve neque an neque porta vene Radius b oo 2 pwel Lis Curabitur ullamcorper gravida felis sit sed sit amet lectus Shape amet scelensque lorem iacules sed The All Pages options define the settings you want to apply to all of your web pages when a complementary content style is selected e g borders for the page You can override these options by changing the Row and Cell options There are six style sets Margin Padding Spacing Radius Border and Highlight Color so when you select a thumbnail option you are selecting which style set is part of your design not how the style appears Note Padding is an exception Padding is the spacing between the edges of your Cell and the content within the Cell The All Pages setting for padding applies to all Cells unless you override itin the Cell options That is all of the content st
29. 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 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 Artisteer4 0 27 Artisteer 28 Web Design Revolution There is only one platform release Mac or PC of the Artisteer software that you install on your system but the features avai
30. Artisteer4 0 202 Artisteer 203 Web Design Revolution To export and install the template 1 In Artisteer go to Export dialog select WordPress Theme and Include Content 2 Navigate Appearance Themes Manage Themes 3 Find the exported template in the list and click Activate You can also install a theme by uploading a theme archive When the template is activated the following message appears Do You want to import Content Add Content Replace imported Content Close lf you import content for the first time click Add Content The content from Artisteer will be added to Wordpress If you have decided to edit the articles in Artisteer project after exporting the template you can re export the template and select Replace Imported Content The previously imported content will be deleted and the new content will be added instead If you preview the website right after importing content you may see a mix of different menus and widgets This happens because Artisteer widgets do not disable other widgets like it happens in Joomla but they are just added to existing widgets in WordPress Therefore right after the content is installed the widget settings are opened Mew theme activated This theme supports widgets please visitthe widgets settings screen to configure them Now you can remove some of the widgets you do not need on the page If the widgets are displayed correctly just skip this part and configure the menu
31. FTP client to use their server Refer to the Export Options Dialog section for more information about the available options for your type of export Other export plug ins are available in the Artisteer Marketplace as free or commercial solutions provided by the Artisteer developers community The Moodle Weebly Codecharge Studio and Visual Studio plug ins are some of the free and available extensions Whenever there is a newer version of the plug in an Updates link will appear in the top right corner of the Artisteer program dialog To install a plug in go to Marketplace the link is located at the top right corner of the program dialog gv Suggest Mode Artisteer4 0 21 Artisteer 22 Web Design Revolution Click on the plug in and select Install Aa CodeCharge Studio Project p wll Free Moodle Theme Beta Free Weebly is a free online widget based website creator The official website is http www weebly com Updated 7 25 2012 Plugin 1 1 Version Category Content Management System CMS Theme License Free Open Source Artisteer4 0 22 Artisteer 23 Web Design Revolution When you install a new plug in the plug in name will appear in the list of available export templates in the Export dialog The Export dialog contains some basic options such as Folder name Path Zip Archive Include ARTX project Include Content as well as some additional options that appear in ce
32. Lightens or darkens the image depending on the color of the Texture Image Overlay Blends the layers together by changing the opacity darkness and lightness of the Texture Image k Set the amount of the Base Color applied to the header image The Base Color for the header is selected under Background gt Effects gt Color SCIEN WEET Supported values are from 0 to 100 Specify the Base Color Intensity The values range from 0 completely desaturated grey to 100 completely saturated full color intensity al Color Saturation Supported values are from 0 to 100 Gradient Change the gradient without leaving the Options panel Presets Specify the luminance difference between the starting and ending colors of i the gradient Supported values 100 solid color to 100 the most contrast m Gradient contrast gradient This option is not available if you have not selected a gradient Blocks gt Artisteer4 0 173 Artisteer 174 Web Design Revolution Block Styles gt Background gt Gradient lf you select a template with a shadow effect the Shadow option will provide the ability to change size angle and opacity of the block shadow as well as indicate the distance between the shadow and the block borders Just click on the More Shadow button in the Background gt Effects gt Shadow list Li hi Block Options Background Texture Gradient Header Texture Texture
33. O to 200 px Artisteer4 0 188 Artisteer 189 Web Design Revolution Width Type Width Size A Specify the Button Corners Supported values 0 100 Radius 0 Specify the Width of the Button Borders Supported values O 10 pixels Border width Specify the Contrast between the starting and ending colors in the button gradient Supported values 100 solid color to 100 the most contrast al gradient This option is not available unless you have selected a button Gradient contrast gradient Texture Texture Position The Texture settings are very similar to the same options you can set for the Texture Texture page background For detailed information on Texture settings see the Position subsections for Texture Options and Texture Position under the Background section described above Gradient Specify the Contrast between the starting and ending colors in the button m gradient Supported values 100 solid color to 100 the most contrast Gradient contrast gradient This option is not available unless you have selected a button gradient Artisteer4 0 189 Artisteer 190 Web Design Revolution shadow Specify the Blur Size of the shadow Supported values 0 20 pixels Blur a Specify the Shadow Transparency Transparency Supported values 0 fully transparent to 100 fully opaque 5 Specify the Shadow Offset in pixels Supported values 0 20 pixels Distance amp specify t
34. Options In the Controls group you select the style of controls that were added in the Edit tab The style galleries are available for input fields search boxes check boxes radio buttons and RSS links You can select an RSS icon from the gallery or insert a custom icon from file Select More Options for extra customization in the Options panel see Control Options The Style and Font group provides text styling options for the inserted controls The options are disabled when no controls are added in the Edit tab Artisteer4 0 187 Artisteer 188 Web Design Revolution Button Options Artisteer provides a wide variety of Button options you can use to customize your buttons Select the Custom Values icon under the Button group to open the panel Button Options Le a Texture Texture Position Gradient Shadow Ok Passive a Hovered ai Fressed I Horizontal Padding 21 gt px IL Vertical Padding E px Width ol Width Type Auto E Width Size E 10 3 px Radius 235 g Border Width o px Button m Specify the horizontal distance between the Button Caption and Button Horizontal padding Borders Supported values 0 50 pixels E Specify the vertical distance between the Button Caption and Button Borders Vertical padding Supported values 0 50 pixels z Specify the Width Type auto or fixed and or Width Size when fixed width type Width Size values range from
35. Options prt e Ea 4 Image Sf Header Icon Date E Edit E Email Icon presets Use original size No 4 Artisteer4 0 117 Artisteer 118 Web Design Revolution select the Custom Values icon to adjust the metadata options in the the Content Options dialog Metadata Header Metadata Footer Style Select one of the suggested styles Transparency Specify the Transparency of the metadata block Supported values are 0 to 100 Radius Specify the Radius of the metadata block This option is not available if you have selected a Layout for the header or footer that does not include a block Border Specify the top right bottom and left border of the metadata block in px Select the border style solid dotted etc Artisteer4 0 118 Artisteer 119 Web Design Revolution Background Tab The Background Tab manages the design of the area outside the active content of the web page the Sheet Backgrounds are usually filled with colors and they are often decorated with effects and images The Background Toolbar in Artisteer consists of four groups Ideas Background Texture or Image and Light Effect Each group has an additional dialog box for advanced customization These options provide a great deal of flexibility in designing your background e a Fill Color 7 oo From File B From File l Gradient E GF Options Suggest Background Options Background Ideas Ba
36. Right click the header area and select Slideshow Panel to enable the thumbnail preview Header Slides x New Slide 7 ul Delete Slide Options Slideshow i Specify the speed of the slide show with a slider from 100 to 1500 ms speed i Use the delay option to control how much time should pass before the next slide is displayed Available values 1 10 s Delay O Select yes to loop the slide show or no to let it play once Repeat Artisteer4 0 152 Artisteer 153 Web Design Revolution Navigator is Specify the color border color border width transparency gradient and contrast of the navigator area Area aa Set the size width height shape radius and distance spacing of bullets Item Specify the color border color border width transparency gradient and contrast of the bullets which are not being displayed at the moment Passive Specify the color border color border width transparency gradient and contrast of the bullet which is being displayed at the moment Active ee specify the color border color border width transparency gradient and contrast of the bullet which is hovered Hovered Clicking the Font Options button opens the Header Logo Name Slogan dialog where you can adjust the Font Settings such as the Font Family Font Style Font Size in pixels Effects and Character Spacing Artisteer4 0
37. Start Up Dialog New Project x ee e ae a pe eee E ae Category All Sort By Popular h Blank Blank Chie utp T Ea Templates can be exported to era ET A E Full list is available in Export Dialog 7 86 Show on Startup Artisteer4 0 10 Artisteer 11 Web Design Revolution Select a Blank project or one of the ready made Templates To disable the start up dialog uncheck the Show on Start up option If the Start up dialog is disabled the blank project will be opened automatically on start up The Preview Area displays Artisteer template that consists of Header Menu Vertical Menu Blocks Content area and Footer The options available for these layout elements are located in the appropriate tabs on the Ribbon Header Vertical Menu Pegs 1 You can also use the Preview Area to edit the text and style of Header Menu Content etc Hover over the layout element and select one of the icons or left click the highlighted area to edit the text Artisteer4 0 11 Artisteer Web Design Revolution Vertical Menu Page 1 Subpage 1 Subpage 2 Subpage 3 gt Page 2 12 Vee Over each layout element there is a mini toolbar with available features displayed as icons such as Suggest Position E7 Delete Block EX Pages F Width Sheet only and Hide Article Title Some of these features may be absent depending on the typ
38. a3 gt T oyot Q G3 video oe Pa LE il Ul t Hill eee IN iti Paste a Ar De CC Content Stylin ee HTML New i a ee Layout 7 els I Design S Controls Slide Clipboard Style and Font T Paragraph F Conte 2 Fill gt fsert Source cas bis Texture gt 2 Home Enter Site Titl o oc No Margin nter olte ite E raau i o N Posts Layout F Post 2 pees m No Margin E Post JE Spacing gt Margin VMenu Home JIL Separator gt B Edit 1 pixels gt Home aa Insert Row Before gt A Insert Row After gt Subpage 1 2 pixels Subpage 2 1 Bk Delete Subpage 3 h Columns gt Options m 3 pixels gt Blog D W Row Options Block p digr Enter content here Reg 7 pixels Text Suspendisse pharetra auctor pharetra p F Lorem ipsum dolor Nunc a sollicitudin est Donec vel neque in neque porta venenatis Lt 10 pixels TeaM C sed sit amet lectus Curabitur ullamcorper gravida felis sit 5 12 pixels amet scelerisque lorem iaculis sed e 4 More Margins You may notice that once you select a content style when you return to the Styling tab Artisteer does not show you the style you selected before This is because after you select a content style you may have completely changed the appearance of your page by changing any one of the other options e g Row and Cell Therefore the content style you selected before may not match your
39. all Drupal pages by default There are several ways to remove breadcrumbs One of the easiest ways is to include the custom CSS in Artisteer Export Options before exporting the template If you have already exported the Artisteer4 0 208 Artisteer 209 Web Design Revolution template you may just open your theme folder and add the following code in the bottom of the style css file sOreacdc rum display none Bcenert CSS Options a A S Dese oi CSS Prefix we Watermark _ Footnote DotNetNuke Before importing content you will need to export the skin from Artisteer and install it in DNN 1 In Artisteer Export window choose DotNetNuke select version 6 2 Pick Include ZIP Archive and Include Content Note that Artisteer allows importing content only to DotNeNuke 6 Artisteer4 0 209 Artisteer 210 Web Design Revolution Template DotNetNuke Skin See All Version 6 How to Install and Use DotNetNuke Skin File Name Path C Wsers msninchik Documents Artsteer Templates v ZIP archive Indude ARTX Project v Indude Content O Canal Options To install a template 3 Login to your website 4 Go to Admin Extensions Manage Install Extension Wizard and upload the skin 5 When the skin is installed go to Admin gt Skins and in the Skin Editor select the Skin and Container
40. and styling that corresponds to these options For example suppose you have several pages each with their own content layout Some pages are segmented with borders some without and some with highlighted panels If you define a border and Artisteer4 0 107 Artisteer 108 Web Design Revolution hightlight with the Content Styling options these attributes will apply only to those pages with a content layout that includes borders and hightlight colors Options To open the Content Options dialog click on the More button for example More Paddings below any list or select the Custom Values icon Content Options pil x i Fill and Transparency Shadow 7 Metadata Header Metadata Footer e Bullets C Quote Fill and Border i oe mx jia Text Padding E a px Shape Shape Radius 0 px Border width 0 px Shape b Specify the Margin of the Article content in pixels Supported values are Margin 0 50 pixels The margin is the space around each Article content area Artisteer4 0 108 is Padding Radius Border Width Artisteer 109 Web Design Revolution Specify the Padding of the Article in pixels Supported values 0 50 pixels The padding is the space around the content e g images and text within each Article Specify the Corner Radius curved corner of the in block content in pixels Supported values O to 40 pixels This is disabled if th
41. color than defined with the Content options You can add the table with an HTML encoded style e g lt table border 2 bordercolor 336699 directly in your content area Edit gt HTML Source and or also add a custom CSS style File gt Export gt Export Options gt CSS Options The rest of this section describes each of the style options you can apply to the content of your pages When you create your content either with a CMS or Artisteer these are the style attributes that will be applied to each element Headings are HTML headings in your article text When you create your content all HTML editors support Headings which are special text normally with a different font or style to highlight that section differently from the rest of the text Headings are normally designated H1 H2 H3 etc Artisteer allows you to select the default color font size font style and alignment associated with each of these heading styles Text is the actual content of your pages and posts You can adjust attributes such as color font family size and style as well as adjust the font in the Font Options dialog Quote elements refer to quotations you might add to your article content Like the other text elements you can select the default color font size font styling and alignment of your quoted text Apart from standard text settings the Quote settings let you define a distance around the quotation padding put the quote inside a fille
42. current design e g you selected a style with borders but then removed them now the content style you selected before doesn t match the page Remember any time you select a content style it resets the design of your page so normally unless you want to deliberately reset your design you choose a content style at the beginning of your workflow then refine your design by adjusting other options e g All Pages Row and Cell You don t select a content style again unless you want to reset your design Artisteer4 0 54 Artisteer 55 Web Design Revolution The Styling option on the ribbon bar displays content styles for your whole page When you only want to select a style for a specific Row select a style from the Current Row gallery With respect to how your styling options apply to the content this is the same as selecting a content style for the page except now it only applies to one Row For example as we mentioned before you have to define complementary settings using the All Pages options If you select a content style for a Row that includes borders your borders won t appear unless you also define a border under All Pages The All Pages option lets you define the style settings that apply if you select a content style for your page or Row Edit gt Styling Choose content style from gallery or Edit gt Styling gt Current Row Select from gallery By default the first basic content style is
43. from 0 to 15 px A custom padding may also be specified using the More Paddings option Fo Use the Columns option to define the number of columns of content on the Sheet You always have at least one column for the content of your Columns page e g text and images The only columns are used for the sidebars e g vertical menu search menu of links etc One column means a page with no sidebars Artisteer4 0 99 Artisteer 100 Web Design Revolution im Column width Column Style New Block Widgets Blocks Use the Column Width option to change the size of your sidebar columns If you only have 1 column this option is disabled You can choose between one of the preset fixed or fluid options or a custom width More Widths that the size of the sidebar is set to a of the total content width within Fixed means the sidebar has a fixed px width Fluid means the sheet Hint If the Sheet width is fixed you will not see any changes since the Sheet width does not change in size However if the Sheet width is fluid as the Sheet width is resized so is the column width if it is also fluid Use this option to define a style for the sidebars on your page This option is disabled if you only have one column Margin defines the space above the columns in the content area A Negative Margin may place the columns above the top of the content area i e overlapping the Header or Me
44. gt Border then you select a content style Edit gt Styling that includes borders Artisteer4 0 57 Artisteer 58 Web Design Revolution r D Filey G amp S Gd Undo Redo Export X Untitled Artisteer 4 Standard Edition Home Edit Colors amp Fonts Layout Content Background Sheet Header Menu Blocks Vertical Menu Controls Footer 2 Marketplace 5 RO Suggest Mode Q r dm Cut Arial 7 so a E 3j ed a E Video lt gt V4 ters i Add Image Play a A y E Table Py Add Shape Motion Paste 5 X x erlink Image HTML New lt RARE E MM TA Hyp OK Controls 7 Slide ee Background Navigator Clipboard Style and Font p Paragraph Basic al Source Slideshow Pages a gt Home E Blog Enter Site Title 4 e a 7 a HOME BLOG amp Post One Row VMenu Hon a Page content here gt Home All Rows Subpage 1 a ipsum dolor sit amet consectetur Subpage 2 mim mm cing elit Etiam pharetra tellus sit Subpage 3 congue vulputate nisi erat iaculis Ee Current Row f i f gt Blog itae feugiat sapien ante eget T AN Pages Aenean sollicitudin imperdiet Block Show Gridlines sitae dignissim est posuere id Enter content here Read more Text E Lorem ipsum dolor P GG Nunc a sollicitudin est Curabitur Text Text pharetra Nunc a sollicitudin est ullamcorper gravida felis sit EH Done
45. is 5 words and you can Artisteer4 0 197 Pages Comments Sidebars Footer Advertisement Headings for the posts page Headings for the single post or page Artisteer 198 Web Design Revolution change it to a custom value The Except Tag Filter blocks the display of certain tags that you don t want to see on your posts pages The default list of allowed tags does not include the lt img gt tag so the images are not displayed in posts on the posts pages Edit the list of allowed tags to expand or reduce the tag filter The Pages options help to configure the 404 page Page is not found If a visitor tried to open a link and the post was deleted you can enable the Show random posts on 404 page or Show tags on 404 page option type the title of posts tags and suggest the visitors other ways to view the blog You can enable or disable the display of the Leave a comment link and you can also block the use of smilies in comments You can apply a block style a post style or a simple text style to sidebars Separate styles can be assigned to primary sidebar secondary sidebar top sidebars bottom sidebars header and footer sidebars You can edit the Footer HTML content The following ShortTags are available bveciel beoe Less Locam liak Ustboc cxcle beacmill escl Use the ad short code to insert 1 5 ads into posts text widgets or footer Example ad code
46. maintain the same percentage of area When the Sheet Is resized the content within the sheet might also be resized This may change the orientation of the content in undesirable ways To prevent this you can set the minimum width that the Sheet can be resized When the window is resized the Sheet will only be resized to this minitumum amount and then afterwards the Sheet area is truncated Note the fluid and the minimum width should be set consistently otherwise you may not get the results you expected For example if you set the width to 20 but you set the minimum width to 800 px the values are inconsistent since you are not likely to have a Sheet that is both 800px wide and also occupies 20 of the window To avoid this problem select a width first then using the Preview area as a guide to select a minimum width that is narrower than the original fluid width If you need to select a Maximum Width then pick a number that is wider than the original fluid width Use this to set the maximum width that a fluid sheet can be resized Supported values 800 1920 px Maximum Width See also Minimum Width above Fluid Sheet width only E Top Margin Margin defines the distance of the sheet to the top of the page or the Artisteer4 0 130 Artisteer 131 Web Design Revolution bottom of the layout element above it e g Header or Menu that is outside the Sheet see Layout options m When turned Top Outlin
47. only be the same size as the Page or Sheet Transparent the Header is displayed with 100 transparency with or without a menu Overlapped the Sheet is displayed overlapping the Header using negative margins Fixed or Fluid This determines if the Sheet width is fluid or fixed Fluid means that the width is a percentage of the browser s window width As you resize the browser window the Sheet width maintains a defined percentage of the window width You select the percentage in the Sheet options e g 55 Fixed means the Sheet has a specific size in pixels lf the Header and or the Menu are inside the Sheet then their size depends on the Sheet width The Header and or the Menu can be located inside or outside the Sheet and have Page width instead of Sheet width When the same as the Page width the width is fluid For instance if you put the Header outside or inside the Sheet but make the Header width the same as the Page the Header ts fluid since the browser window determines the width of the Page a Sheet Width Page Width This option regulates the width of the Header which may be either the size of the Sheet or the size of the Page If Header Page width the Header width is fluid Position You can also select one of the following header positions e Without Header the template does not have a header e Outside Sheet the header is displayed separat
48. oo i Position Artisteer 140 Web Design Revolution when you first inserted the image For example suppose you enlarge your Header to fit the image If you accept your changes then use the Position tool and select Use original size you will not see any changes in the Preview area This is because the change to the Header size has already been made and now the Header is the same size as the image If you want to see the image displayed with the Header before the Header was resized you need to undo your change or resize the Header to start over Resize image to Header The image is scaled and cropped to fit the dimensions of the Header whether the image is larger by height or width or both This can be useful if you are using a fluid sheet width since the image will scale as the Header becomes larger or smaller Use Original size If the image is smaller either by height width or both the image is centered on the Header Where the image is larger the image is cropped to fit the dimension of the Header For example suppose the Header is 800px wide by 300px high If you add a 600x150 image the image is centered in the middle of the Header If you add a 900x150 image the image is cropped by width but centered by height If you add a 600x400 image the image is centered by width but cropped by height Use this tool to reorient the background image with the Header What you see in the
49. position tool is the original image with an overlay that shows you what part of the image will be displayed in the Header In the example below the image is larger than the header so what you see in the center of the window is that portion of the image that will be displayed Artisteer4 0 140 Artisteer 141 Web Design Revolution Background Area WY Preview You can drag amp drop the overlay area over different portions of the image until the portion of the image you want is in the header Hint you cant move the overlay beyond the borders of the image For instance suppose you want to remove some of the the blue sky in the image above You cannot do this with the Position tool but you can use the tool as a guide to cropping the image in another tool such as Micosoft s Paint The image below was also inserted using Use original size but now the original image dimensions are smaller than the Header area Artisteer4 0 141 Artisteer 142 Web Design Revolution Background Area YW Preview Since the image is smaller than the Header the Position tool shows the entire image since the image will fit entirely in the Header area The alignment slider to the right of the image can be used to scale the Header overlay and align the Header with the image to display whatever portion of the image you want to display For example if we use the first example above and use the slider t
50. so it appears to overlap the Sheet It may also cause the Footer to overlap the contents on your page e g text that appears on the Sheet To set the margin to 0 select No Outline Artisteer4 0 98 Artisteer 99 Web Design Revolution Artisteer provides both Fixed and Fluid absolute and relative sheet widths ranging from 600 1000px 60 100 A custom sheet width may Sheet Width also be specified using the More Sheet Widths option A fixed Sheet width means the Sheet is always this size A fluid sheet width means that the width is a percentage of the browser windows area If you resize the browser window the width of the Sheet will change so it always displays a certain of the width of the window Note if you specify a layout option that places the Header and or the Menu inside the sheet any settings you apply to the Sheet also apply to those elements e g Margin Padding etc a Margin defines the space from the top of the page the larger the margin the lower the Sheet appears relative to the top of the page You can select METIN a margin from 0 to 50 px A custom margin may also be specified using the More Top Margins option iB Padding defines the blank space around the content of the Sheet Padding can be used to create a border of whitespace around your Sele ING content which includes the Header and Menu if they are inside the Sheet You can select
51. t Padding A Border Radius E Width Transparency E Image or Texture cial Texture Position 64 after the Row you may not see this effect unless you make the Cell transparent Use this to add an image or texture to the Cell background The way the texture appears depends on the color and transparency against the Sheet underneath Use this to control how and where the texture is applied to the Row background This lets you assign an HTML id to the Row element This can be useful for instance if you add Javascript or CSS to your template and you need to refer to this specific Row Artisteer4 0 64 Artisteer 65 Web Design Revolution Cell Options Border Use this to individually adjust the edges of the Row top bottom left and right borders Padding Use this to individually adjust the spacing around the content e g text images etc and the edges of the Cell Border Radius Use this to change the corners of the borders The higher the radius the more curved the corners will appear Width Sets the width of the Cell relative to the overall size of the Row E g 75 means the Cell width is 3 4 the size of the whole Row Remember the Row width depends on the Sheet width the number of columns in your layout and the width of the columns Transparency Use this to define how opaque the Cell should be relative to the Row underneath If the Cell fill color is no fill this is the same as 100 tran
52. td gt lt br gt lt td gt lt KTAesar yay ha om m on Artisteer4 0 78 Artisteer 79 Web Design Revolution g i F A I AA m u i A ss p BWa 7 VV w FE VA fe w Vw WW W You can create a slideshow in your Header or Content in Artisteer using the Slideshow options In any area of your page where you can add an image you can define more than one image to occupy the same display space and then when your page is rendered you can direct the browser to transition from one image to the next to create a slideshow A slideshow only works with images so ordinarily the options in the Slideshow category are disabled until you select an image in the content area Once you have selected an image click on the New Slide icon 8 in the top right corner of the image or switch to the Edit tab and select New Slide El More Online PJ Blank Duplicate v From File wa Clip Art gt The new slide can be blank it can be a copy of the first image duplicate or a new image The following section describes the options you have to control how the Slideshow appears and plays to your viewers Try H AddImage E Play oe E Add Shape LA Motion New Slide a Background Slideshow A Use Add Image to insert an image from a file from on online collection or from the clip art gallery The added image overlays the slide background or the underlying image Drag and drop the image
53. the layout e g if your sidebar is on the left it moves to the right q Subsets are scripts Cyrillic Latin Greek etc provided by Google Web Fonts In Artisteer you can specify the Subset of the web font Google Fonts Subsets for the language of your website m Enable or disable responsive design Responsive Design RWD makes the website adapt to the particular screen resolution by Artisteer4 0 36 Artisteer Web Design Revolution Site Icon 37 positioning the page scaling the images changing its layout for comfortable scrolling and panning Artisteer uses the responsive responsive tablet and responsive phone device aware CSS classes as well as the a set of standards based technologies like fluid grids flexible images and CSS media queries Responsive templates in Artisteer are designed for the optimal viewing experience on desktops tablets Landscape and Portrait Layouts and smartphones Landscape and Portrait Layouts It was not designed for specific devices and requires that the browser Firefox Chrome Opera Safari Internet Explorer etc of the device supports HTML5 CCS3 Please note that foreground images slideshow and flash animations in Header are disabled in responsive design The layout and menu also change so a three column layout may be rearranged in two columns or even one column The content does not disappear but is just pushed down The RWD is enabled by default in Arti
54. to more blurring Hint The blur effect is useful if you want to add a depth of field to your Header That is when the image is blurred the other layout elements like text foreground image etc are not so they attract more focus Specify the background transparency value Use this to control how the Till color of the Header is blended with the background image This option is enabled only for background images with no color such as Abstract backgrounds in the gallery Supported values are Softlight Decreases the light effect of the image by decreasing the contrast between the lighter and darker areas Default Overlay Increases the light effect of the image by increasing the contrast between the lighter and darker areas Choose between JPEG or PNG formats for the exported image When you export your website or template this determines the image format for the file created This may or may not affect the performance of your website For example the second control JPEG Quality sets a quality level for JPEG compression The range goes from 0 to 100 Better image quality results in a larger file size but a larger size also means it takes longer to render and return your web page If performance is critical you need to Artisteer4 0 145 Artisteer 146 Web Design Revolution adjust these options to select an appropriate trade off between size and image quality
55. way of dealing with color than RGB Hue corresponds to the actual color saturation corresponds to the intensity and luminosity corresponds to lightness of the color See also Color Model Artisteer4 0 216 Artisteer 217 Web Design Revolution gam i E ma a f ma ft Ne I ta U l a G LA I l LALIVJI I Silent or quiet installation is one which does not display any indication of its progress and does not require user interaction Responsive Web Design or RWD is an approach to web design in which a designer intends to provide an optimal viewing experience easy reading and navigation with a minimum of resizing panning and scrolling across a wide range of devices from desktop computer monitors to mobile phones SEO Search Engine Optimization is the process of improving the visibility of a website or a web page in a search engine s natural or un paid organic or algorithmic search results In general the earlier or higher ranked on the search results page and more frequently a site appears in the search results list the more visitors it will receive from the search engine s users SEO may target different kinds of search including image search local search video search academic search news search and industry specific vertical search engines WYSIWYG Is an acronym for What You See Is What You Get The term is used to describe a system in which content text and graphics displayed onscr
56. width Similarly if the Sheet width was fluid before the Sheet is changed to a fixed size After you have added the image if you make the Sheet width fluid again the image is now resized to fit the Header see below lf the Header width is the same as the Page width the height of the image is cropped to fit the height of the Header The width of the image is unchanged however the sides of the Header are filled in where the Page area is wider than the image For example suppose the width of the image is 800px but the Page is resized until it is 1000px The image will be centered over the Header but then filled in on both sides to cover the areas of the Header where the image doesnt appear 100px on each side When you add a custom image it must be within a minimum and maximum width 500 1500 px and a minimum and maximum height 50 500 px When any image is outside that range this option is disabled i e you cannot resize the Header to fit the image When you resize the Header to the image the header area acquires a new dimension When you first insert your image you can see the effect of the option you select if you make the selection and then wait a moment for the Preview area to be updated If you accept the changes however you may not be able to return to a previous design unless you step thru undoing each of your changes That is the options using the Position tool may not work the same as Artisteer4 0 139
57. 4 align center The heading types of the headline slogan article and widgets on the posts page are arranged by default as lt H1 gt lt H2 gt lt H2 gt and lt H3 gt tags You can customize each heading by assigning lt H1 H6 gt tags or a lt div gt tag lt H1 H6 gt tags are generally used for high rank headings and the lt div gt tag will be analyzed by SEO agents as plain content You can customize each heading headline slogan article and widgets tags by assigning lt H1 H6 gt tags or a lt div gt tag Artisteer4 0 198 Oo Artisteer 199 Web Design Revolution Importing Templates with Content to CMSs Starting from Artisteer 4 0 Beta you can create templates with content and import them into your CMS Artisteer now supports importing content to Joomla WordPress Drupal Blogger and DotNetNuke 6 In this section explains how to import content into your CMS and adjust the modules and menus so the template in your CMS looks the same as a template in Artisteer template This option may be useful if you create a website or blog from scratch and want to export some content along with design In Artisteer you can now add pages posts and blocks and populate them with content You can use different content layouts e g a multi cell layout and then export content to your CMS Artisteer does not have restrictions as for the number of pages that can be created so you can create as many pages and posts as you
58. 480 height 385 wrode transparent gt lt embed gt Insert Video Options Supported values 1 1473 px Width E Supported values 1 1500 px Height Yes No Allow your viewers to display the video in full screen mode vs only within the dimensions you define in the page This option is sometimes turned off because in fullscreen mode the browser toolbars are not visible Allow Full Screen which can be confusing to beginner users not familiar with viewing videos in fullscreen To insert a table object in the content area position the cursor where you would like the table to appear and select the Table button on the Ribbon bar The basic Table options include inserting deleting amp moving columns and rows adjusting the border width and splitting cells These options only appear on the ribbon bar when you have selected the table in the preview area Eb Inset Border Width H Delete E Split Cells EJ Moves Options Edit Table The advanced options contain Table width margin cell padding and Column width settings Artisteer4 0 73 Artisteer 14 Web Design Revolution Table Options x Table C width ia Cell padding Table Options I Width of the table in pixels or as a of the width of the content cell where Table Width the table appears he Margin space around the table within the content cell where the table Table Margin appears tr Space ar
59. Adjust the texture position using Scale Texture Repeat Position Flip and Texture Position Rotate parameters Gradient set the contrast and angle of the gradient Artisteer4 0 83 Artisteer 84 Web Design Revolution Colors amp Fonts Tab The Color amp Fonts tab provides the ability to change the colors and fonts of the template Colors amp Fonts z From Image 2 p Ad Ar Al 9 B le Save Theme E Suggest Colors Color Themes O Adjust Suggest Fonts Font Sets Typography Font Scale Delete Theme r a Ideas Colors Paints F Ideas Fonts F Colors Click Suggest Colors to see some ready made color solutions for your template The design of each template is based on a Color Theme The Color Theme consists of three main colors named paints All paints in a color theme are selected by professional web designers to complement each other Artisteer will suggest a gallery of Color Themes with preview thumbnails You can choose a Color Theme directly from the gallery or use Filter to select from a specific Color Theme From Image O Adjust 7 Save Theme Contrast Dark Light Grayish Moanochrome Pastel Under Sail Blue Default Sea Breeze Green Orange Red ma a a ei ea _ lt lt _ lt a E a Ti a Erari limh E Fomml Flhiabkit Yellow
60. Artisteer Web Design Revolution Clicking on the More buttons in Styling lists will open the Block Options panel where you can adjust the layout options 170 EE Background ye a t m COl Header A a a al Content au SS aE Radius a No Radius 10 pixels 15 pixels r More Radiuses El Background Texture Gradient Shadow S Header Texture Texture Position E Block spacing px F Distance px Artisteer4 0 170 Artisteer 171 Web Design Revolution Layout A Specify the Radius of Block Corners shape Supported values 0 to 40 Radius pixels This option is not available if you have selected a block style that has no border hi Specify the Spacing around blocks in pixels Supported values 0 40 pixels Block spacing i Specify the vertical distance between the Header and Body sections of the Distance Block This option is not available if you have selected a block style without borders around one or more sidebar items in a sidebar with a border D p E An AN Backaround A wS The Background option is active if the block style selected includes a border around the entire sidebar You can change the inner padding background color border and transparency of the blocks as well as add different Effects to your blocks a Sle E He Shape ab Fill 10 pixels Ca Border b
61. Header That is when the image is blurred the other layout elements like text foreground image etc are not so they attract more focus Specify the background transparency value Use this to control how the Till color of the Header is blended with the background image This option is enabled only for background images with no color such as Abstract backgrounds in the gallery Supported values are Softlight Decreases the light effect of the image by decreasing the contrast between the lighter and darker areas Default Overlay Increases the light effect of the image by increasing the contrast between the lighter and darker areas Choose between JPEG or PNG formats for the exported image When you export your website or template this determines the image format for the file created This may or may not affect the performance of your website For example the second control JPEG Quality sets a quality level for JPEG compression The range goes from 0 to 100 Better image quality results in a larger file size but a larger size also means it takes longer to render and return your web page If performance is critical you need to adjust these options to select an appropriate trade off between size and image quality Artisteer4 0 137 Artisteer 138 Web Design Revolution Mask ss Adjust the mask repeat position flip rotate and scale parameters Glare a Specify the transparency blend
62. Home Edit Colors amp Font Layout Content Background Sheet Header Menu Blocks VerticalMenu Controis Footer e W Marketplace 5 v Suggest Mode laa z E one 2 0 se i e ed a yeas Q me 2 Mco EE 1 ola c n a Poste BLU x EAZ Content Styling _ Ha New Style and Font G Paragraph m onte E Fill E rature i w Controls Shde ser Source Siidernow le v X v p gt Home l ee Enter Site Title No mari Post2 pe ES Margin VMenu Home JIC Separator a Edit Subpage 1 Subpage 2 es lee Block 7 Enter content here i Text z A Suspendisse pharetaguctor pharetra B Levens Speen teh Nunc a sollicitudin est fm Text Text Donec vel neque in neque porta ve sed sit amet lectus Curabitur ullamcorper gravida felis sit amet scelerisque lorem iaculis sed But if you go back to the Styling options and select the same exact style you started with look what happens to the Margin and Spacing The Row Margin has been reset and now there is no margin space between the first and second row Artisteer4 0 53 Artisteer 34 Web Design Revolution x amp Lj Filey p ke Undo Redo Export 7 Untitled Artisteer 4 Standard Edition gt eh Home Edit Colors amp Fonts Layout Content Background Sheet Header Menu Blocks Vertical Menu Controls Footer lt E Marketplace 5 Le suggest Mode C a amp oe Vi F B do cut Paragraph Arial
63. L AccessKey attribute for a button Itis designed to 2 associate keys with particular buttons For more information about this attribute refer to www w3c org For example for Chrome if you enter B AccessKey here your viewers can type Alt B as a shortcut to selecting the button sometimes it is useful to look at or edit the HTML for the content on your page for instance if you would like to add custom HTML to blocks content rows and cells or modify the footer content The HTML button on the Edit tab toolbar is used to edit the HTML source for the content area you have selected on your page Select a Cell in the content area with the mouse and then the HTML Source icon on the Ribbon bar This only displays the HTML source for the content area you selected in the Preview area You can also use the HTML editor for blocks and footer Despite all of the options in Artisteer for designing your website you may find it useful and necessary to access and change the HTML source directly For example if you are adding an embed code to include a video on your web page the options for controlling the video can only be done directly in the code Edit HTML miii 1 2 lt p gt Enter Page content here lt p gt 3 lt table tlass art article border 0 cellepacing 0 cellpadding 0 style width 10057 gt lt thody gt Scr tlass even gt lt td gt lt bre gt lt td gt lt td gt lt bre gt lt td gt lt
64. Options Edit Shape EJ Use these options to style the text and adjust the shape area adding effects such as Fill Color Transparency Texture Gradient Glare Mask Align and Padding see Options gt Textblock Options For extra customization click the Options button or select the Custom Values icon The Controls option allows to insert Headline Slogan Search widget or an Rss button li Headline Slogan Search RSS Use the Edit Shape options to adjust the Headline and Slogan The design of the Search widget and RSS button is adjusted in the Controls tab a i ee JOTIONS Mises I es fw i i w The additional Image and Shape options can be accessed by selecting a Custom Values icon on the Edit Image or Edit Shape option groups Artisteer4 0 147 Artisteer 148 Web Design Revolution Photo Object Options om General E Shadow Textblock Options General E Mask dl Glare E Image or Texture Texture Position Gradient Specify the size width and height of the image scale an image to save the Original proportions or rotate an image using the Angle option This option is enabled when the Shadow effect is selected in the Effects menu of the Edit Image command group Specify the size transparency distance and angle values of the shadow Specify the size width and height angle transparency horizontal and vertical padding of the shape Adjust the m
65. Position Shadow presets 2 Blr o 3 px 5 Transparency 100 E Distance o px Specify the shadow options The options are disabled for no block styles selected in the Block Styles list Artisteer4 0 174 Artisteer 175 Web Design Revolution shadow a Specify the Shadow size Supported values 0 20 pixels ur eS specify the Shadow Opacity Supported values O fully transparent 100 Transparency fully opaque E Specify the Shadow Offset in pixels Supported values 0 20 pixels Distance E Specify the Shadow Angle starting from the edges of the block Supported Angle values 180 to 180 A A AN Ar Arn AN Ant oan a rmmCGdadGer dlld COPLlel TAL g di ld CIIL Using the Ribbon allows you to adjust the font icon and shape of the Block Headers You can also enhance the design by adding a texture and a gradient or by inserting a custom texture or a custom icon image The Ribbon for content are similar to those for the Header You can adjust the design of the content shape and add visual effects The unique feature of Block Content is control over text padding Content AL Text gt er Icon Shape Sr Fill ae Transparency Border g Border Effects zal Texture A Gradient Artisteer4 0 175 Artisteer 176 Web Design Revolution Clicking on the Texture Options or Gradient Options
66. Sheet the Menu is attached to the Sheet e Inside Header the Menu is embedded in the Header and located at the top or at the bottom of the Header Margin The Margin is the space above the horizontal menu Select one Artisteer4 0 97 Artisteer 98 Web Design Revolution of the top margin values positive or negative or set a custom margin value at More Top Margins 200 to 200 px A negative Margin value respositions the Menu which may cause the Menu to appear to overlap the area above it e g the Header The Margin option is disabled if the Menu is inside the Sheet since the Margin value must be specified for the Sheet not the Menu The Margin option is also disabled if the page has no Menu To set the margin to 0 and remove the rounded corners of the outline select No Outline im Inside Sheet The Footer is displayed as part of the Sheet with a margin space reserved below the footer Footer Sheet Width The Footer is displayed attached to the Sheet and with the same width as the Sheet but no margin space Is reserved at the bottom of the page Page Width The Footer is displayed with the same width as the Page and separated from the Sheet Margin The Margin is the space reserved above the Footer Select one of the top margin values positive or negative or set a custom margin value at More Top Margins 200 to 200 px A negative margin may resize the Footer
67. The exported template looks the same as in Artisteer Drupal To export a Drupal theme with content 1 Open the export window in Artisteer select Drupal and specify the Drupal version the theme name and the path to your theme under themes 2 Tick off Include Sample Data and press Export Artisteer4 0 205 Artisteer 206 Web Design Revolution O C ii Template Drupal Theme See All Version 7 oo fart pid F home Vocalhost www drupal 7 14 themes ZIP archive Indude ARTX Project v Indude Content Export Cancel Options To install the theme 3 Login to Drupal 7 14 Administration 4 Open Appearance find and enable the template This is a standard procedure to export a theme from Artisteer and install it in Drupal Installing content will require additional steps After export the content is archived and stored in your theme as the art_content zip file di images di templates art_content _ art_wik info a block tpl E block bannerl tpl 7 block banner2 tpl To add content to your website you should install the art_content zip as a module in Drupal and when the module is enabled import the content Please follow the steps below Artisteer4 0 206 Artisteer 207 Web Design Revolution Drupal 7 14 1 Go to Modules Install new module http your_site admin modules 2 Browse for your_theme a
68. WET Web Design Revolution Version 4 0 User s Manual Artisteer 2 Web Design Revolution lable ol nteni TapE 0 is 70 9 2 9 Cee 2 What IS Artisteer ccccccccccccceecccececeeeceeeeeeeeseeeseeeeaeeeseeeseueesaeesaeeseueesueeseeesaueeseeeseeeseuesaeeeas 7 MVS ING W I PISS ON A O a E E 8 Aristeer GUI a aciecrntncertonrcinansinnecineetianetecrndioncsieeecigerndeneticnanieomdicnatinentemmndeeeriaencecarionetinnedieomcenedieentecednestinentent 9 otar OD MNO areata testes star ecsaetesteeeectsaler cee eetacs ames sue ances raa aikanaa seovancushewanauatcmanseseerouceeeeeaee 10 FMS VNC PS rasa vedas gece A ce paca E OE EE A A AOA EA 11 FU Mages osc E E E ance E E E E 14 Cuek ACCESS TOODA aa ER ee A ee eee 14 Panel NOOO ee a E ee eee 15 POSS EE MSN E E N T A 16 Export Publish MENU cccccccceeccceececeececee cece esse eeeeeeeseeeeseaeeseeesseeeseeeseeeesseeesseeesaeeeeas 20 MN GMT ea E E E E E E 24 Downloading Artisteer ccccseccceecceseeseeeseeeseeeeeeeeseeeseueeseeseeeseueesueeseeeseueeseeeneeeseueeaeeenaes 27 Editions of Artisteer Home amp Academic vs Standard ccccsecceseeeeseeeeseeeeseeeeseeeeseeeesees 28 System Requirements cccccccccsescecseececeeececeeeeeseuceesauceeseuceeseeesseesesseeeessaueesseeessaeeesaneees 29 VS CMG AUSOO oee E E E EE 30 rANe Vc 1 a aida o eee ORW E EEE E E EE EEE EE eee 31 Creating a TEMplate cccccccccccsecccceeececeeececeeceseeeeeseeeesecesseeees
69. When skin and container are applied the import content message appears Would you like to import the content fromthe skin ot LSet Pages and blocks are exported to DNN automatically so you will not have to add blocks as modules Your skin in DNN will look the same as in Artisteer Artisteer4 0 210 Artisteer 211 Web Design Revolution Blogger Publishing or exporting a Blogger template with content is a standard procedure that repeats the same steps as publishing any template in general 1 First you go to Artisteer Export Dialog and select Blogger template 2 Check Include Content and click Publish or Export If you need to adjust the menu source disable the Home page item in menu edit the Home caption or disable the display of Navbar please go to Options before publishing For publishing please fill in your login and password in the appropriate field and check Include Content Publish Blogger Template Please enter your Blogger login and password to EA publish the template The currently used template will be backed up Username nemo ipsum Password Blog Indude Sample Data Publish Cancel Options By default your images will be uploaded to Picasa You can change this setting in Options Image Hosting Artisteer4 0 211 Artisteer 212 Web Design Revolution Blogger Template published successfully View your published website at Blogger com
70. You can also edit the source HTML for each content area As you more the cursor over the sheet the content areas you can edit are highlighted with a frame around them Clicking any one of these hightlighted areas enables the options on the Edit tab The Ribbon bar options are arranged in eight groups Clipboard Style and Font Paragraph Content Insert Source Slideshow Layout Content Background Sheet Header Menu Blocks Vertical Menu Controls Footer lt 4 ee pape ay I I oat E P eer J4 Layout G m 4 Video ts Pi la oy al 7 Home Edit Colors amp Fonts B pao Paragraph Arial 13 Ae Eq Row BEE Table F Faste E Z x x a ik T Gael TEES Ere Content Stylin Hyperlink Image _ HTML u x A a aS E A ES faire _ 3 B Cell da 29 ia Controls Layout Clipboard Style and Font Ta Faragraph a Content Insert Source n gt D a JE pE u m e LJ Aar mW i Y c y C E a p BS H i Vii www UM ma d d v Tr ae ml _ 5 _ linnnarn Cnant and NOLDORA m i E m i IC eal ERS RSS N i WA y L VJi it LA i i WA J The Clipboard provides standard cut copy amp paste options for embedding text in the content area Style and Font suggests basic typography settings such as font family size style quotes and effects to give the text a more professional look The font options apply only to the text you select within a cont
71. ader Tab U Play 2E Motion fas Navigator Blank Duplicate From File D Ob More Online In the New Slide Menu you select what kind of slide you would like to add to header Blank slides do not contain images shapes textures etc but repeat the header design For example if the Header is green half transparent with round edges and a shade the blank slide is also green half transparent and also has round edges Duplicate slides copy the parent slide This option is useful when you need two or more slides that look alike Using the From File option you can upload an image from your computer and the More Online option provides a gallery with free images that you can add as slide background To watch the slideshow press the Play button In the Motion menu you can adjust how each slide appears Select Fade Vetrical or Horizontal effect to see the slides fade in and out slide out from the top bottom or from the right or left side of the Artisteer4 0 151 Artisteer 152 Web Design Revolution header Select Options to set the speed and delay values and to enable or disable the slide show repeat option When a header consists of two or more slides the slides are shown as bullets in the navigator You can adjust the navigator design and position using the Navigator menu For extra customization press the Options button that opens the Navigator menu in the side panel
72. ader may also include several slides that make up a slide show The Header Tab controls all aspects of the Header The options are divided into the following groups Layout Background Background Image Insert Slide Show and Flash Header Bb E length aq Fil Color ae Positior i Shape Ery Pia Q E i Margi rE Transparency MT al B From File w ak Controls 2 Metio Suggest Header Position _ Image New Flash i IL Height ty Effects My Effed Stitte wai Navigatal E SSS SS eae r SS eee eee Layout This command group includes features which help to control the position of the Header on the page and the size of the Header Gi length E _E Margin Position IL Height Layout F Artisteer4 0 133 Artisteer 134 Web Design Revolution Position Assign the position of the Header outside Sheet inside Sheet without Header i e the page has no header Length Set the Header width to either the size of the Sheet Sheet Width or the size of the Page Page Width Margin Define the distance of the Header from the top of the page or from the bottom of the Menu if it is above the Header If the Header is inside the Sheet and the menu is below the Header this option is disabled adjust the space above the Header using the Sheet margin instead Height Set the height of the header from 100 to 300 px A Custom Height is available if you select
73. aearanasanunneseaneseeunsnesansneseanansnns 88 Color Selector Dialog More Colors ccccccccsseccsseceseeeeceeeseeeeseeeeseeeeeeeeeseeesaeeeseeesees 88 FONO sects aces acon ece scene EEEE E EE 91 AY OU e ccanandaancanccsaenaaeteuneaacosseatewapasagncsacpasaedeasaanccsacesacheanaanersanntaeagunagesateeeieeaaanaancusne 95 PS SI Ay OU eE E E A E E EAE E E E 95 Sheet Layout ce 99 CONS a ca oars soc esc oo pce esos ea sea ines pees onan euceceseeee sas caer ccueeeesart 99 EO Scarce ernest airs E E A E A 100 DO OMA aee E E 102 Content Tab 00 cece cccccceececeecece cece eeeeucesaeeeseueeeseeeeseeeeseeesseeeesaeeesaeeesaeeesaeeeseeeeseeeesaeeenees 106 RO ING a sceccn ce seca E E E E unas oeaeueeeneczeeeeeeeeeee eeeenes 106 6 2 6 eee EE ee ee ee 108 E aE O ea en nee ee eee ee ee 110 5 1 0 eaae et E E E E eee 112 FAQ AION EEEIEE tact otc nde E EEE EATS 113 OPUS meet ene eer tenner E ee A eee 114 NN Cet WOENE 114 ONS cea cece ce tece T 118 DACKO TAD eese vain cats E EEEE NEE EE ENESENN 119 OPIO es E N 121 See tall 6 E E ENA A E re 128 Artisteer4 0 3 Artisteer 4 Web Design Revolution OPON greir E E EE OE A E E A eee 129 Header Tab aap sienncenianeneaaictqatenehegeeeaehiaseneateneiauaheexeqatdeasaneauesaanhoasencakenehanataaeneauteeekanetanstaaater 133 12 OU a E 133 IPUON S esee E EEE 134 PACKI OUNO seee E 135 OPIO ener ee eee ee eee eee 136 BaCKGlOUNG NAO O cesectenscussteaseestxasacatacaceuseduosexeccuercanseua
74. and Item ial Specify the contrast between the starting and ending colors in the item gradient Supported values 100 solid color to 100 the most contrast Contrast gradient Artisteer4 0 160 Artisteer 161 Web Design Revolution Item m Specify the horizontal distance between the Item Text and Item Borders Horizontal padding Supported values 0 50 pixels IG Specify the top and bottom padding of the Menu Items Supported values 0 Vertical padding 50 pixels Al Specify the Corner Radius shape of the Menu Item Supported values 0 Radius 100 Layout Specify the Horizontal Margin Vertical Margin Item Distance and Border Width of menu items Separator Presets Use this option to change the separator without leaving the Menu Options panel Fill Select the color of the separator Supported colors Theme Colors Additional Colors Custom Color More Colors Shape and Coloring Shape Adjust the shape of items Classic Tabbed Buttons Coloring Use this option to select a color scheme for the menu area and the colors of the active and passive menu items Artisteer4 0 161 Artisteer 162 Web Design Revolution Active Passive Hovered Fill select the color of the active passive hovered item Passive state of the item when not selected Active state of the item when selected Hovered state of the item when the mouse cursor is hovering over the item Border Select the borde
75. and adjust how the submenu appears in smaller screen resolutions for example on mobile devices Artisteer4 0 163 Artisteer Web Design Revolution 164 In the Submenu Area list of options you can adjust the shape radius rounded corners top margin padding color transparency border weight color and style and add the glow effect In the Subitem menu the available options are size radius border weight border style distance separator gradient and font options You can also adjust the style of the passive and hovered subitem states in separate lists Use the color gradient border color transparency text color and underline options to enhance the style of subitems Options lf the default settings don t meet your needs use the Menu Options panel to adjust the option settings Submenu Options Levels T Submenu Area pie xx Subitem Gradient ET Passive i Hovered Glow presets Size GH Transparency mo Please note The options are disabled if No Subitems is selected in the Levels list Artisteer4 0 164 Artisteer Web Design Revolution Levels d Levels r 1 Submenu Options panel aM Open 165 Responsive Levels Use this option to change the display of subitems without leaving the under the menu items Submenu Area Adjust how the submenu appears in smaller screen resolutions for example on mobile devic
76. as Layout Styles Subitem gt Subitem Suhitern Block gt Area Menu Area F Item F Submenu F Pages Layout and Styles The options of these sections provide the ability to select the position of the Vertical Menu in the general layout of the page as well as to select one of the most popular vertical menu styles Open the Position list to choose the appropriate place for your Vertical Menu and look through the Styles gallery to find the type of Vertical Menu you prefer Artisteer4 0 180 Artisteer 181 Web Design Revolution active Sybitern Subitem Subitern y Subitem gt Subitem Suhitera a Styles i Menu Area Using the Menu Area options you can adjust the color and shape of the Menu Bar add such effects as texture gradient and shadow and manage the design of the vertical menu Header and Content S Background Header Menu Menu Block Area Content Menu Area F Menu Bar Contains menu block layouts The layouts are arranged into three groups Simple With header Without Header The layout you select determines Menu Block which other options are available to style the menu Select the appropriate Margin Radius and or Distance Menu Area Artisteer4 0 181 Background al Header B Content Artisteer 182 Web Design Revolution Adjust the Inner Padding Shape color b
77. ask repeat horizontally vertically no repeat position flip rotate and scale options Control the transparency blend mode position and size of the glare Adjust the blend mode transparency color weight color saturation and contrast of the image or texture Manage the sacale text repeat position flip and rotate options specify the contrast and angle parameters Artisteer4 0 148 Artisteer 149 Web Design Revolution Flash animations can make your web pages more appealing by visually enhancing the page Transparent Flash is light unobtrusive and produces an extraordinary Web 2 0 effect select a Flash animation from the gallery of ready made videos or insert your own custom swf file Use the Position option to resize the Header area to the size of your Flash video resize the Flash video area to the size of your Header area or use the original Flash video size You can also regulate the Flash size with the slider located at the right side of the dialog box Use the Align option to position the flash video in the center or in the left right side of the Header Press the Options button or a Custom Values icon for extra customization Options help to manage the play mode visual mode speed and quality of Flash videos You can also use Custom parameters to manually modify the Flash video some properties may be disabled depending on the Flash realization Flash Select yes to have the image pla
78. available in the Texture or Image menu on the Ribbon You can make a quick change without leaving the Options panel Pi Set how the background color and background texture image layers are blended into each other Blend Mode Normal No effect on the underlying layers Overlay Blends the two layers together by changing the opacity darkness and lightness of the top layer Soft Light This blend mode lightens or darkens the image depending on the color of the top layer If the top layer s pixel is dark then the bottom layer s pixel is darkened If the top layer s pixel is light then the bottom layer s pixel is lightened This option is not available if No Texture is selected in the Texture or Image gallery Artisteer4 0 123 Artisteer 124 Web Design Revolution F Set the texture transparency relative to the background The supported values are from 0 to 100 where 0 means without transparency This Vienepereney option is not available if No Texture is selected in the Texture or Image gallery R Recolor the image or texture so that it assumes the fill color for the background The weight determines what percentage the background Color Weight fill color should have when blended with the texture color For example suppose your color background is Red and you choose the balloons texture from the New Color Holiday group in the texture gallery where the balloons are in various colors Wh
79. be changed manually by directly entering values in the text boxes It may be Artisteer4 0 90 Artisteer 91 Web Design Revolution convenient when you copy the exact color value from some other graphic software and want to use it in Artisteer Option Description Hue Hue value of the color ranged from 0 to 360 Sat Saturation of the color ranged from 0 completely desaturated to 100 fully saturated Lum Luminosity of the color measured in percentage from O black to 100 white Red Decimal value for red color Green Decimal value for green color Blue Decimal value for blue color Hex A hexadecimal color code usually used in HTML code You can also use the transparency slider at the bottom of the dialog to adjust the color thickness Note transparency slider may be disabled for the template background fonts and some other elements that do not support transparency The Preview option makes it possible to see the page with the selected color applied to it Ok and Cancel buttons allow you to submit or discard the made changes select from a wide variety of font themes to match the overall look and content of the site T Al A Font Sets Typography Font Scale Fonts E The Fonts section includes such functions as Font Sets Typography and Font Scale Artisteer4 0 91 Artisteer 92 Web Design Revolution Font Sets allows you to change the text and heading fonts You can choose one of the Arti
80. bed and buttons You can regulate the margins and text alignment as well as add effects such as texture gradient and transparency Menu Ez E length Eo Fi Fil D amp rfi Q E pecencancis 3 7 EI Margin Active Passive Passive a f Bordel F Borde rA Border Suggest Menu Position Styling Colorin Menu Bar Item Subitem re z aine a eM A Tert rem A Text Ideas Layout Menu Styles F Menu Bar F Item F Subitem F The Menu options include an extra option Show In Menu Pages By default in Artisteer the menu items for the horizontal menu bar are the top level pages of your website but you can change which pages appear in the menu using the Show In Menu Pages option y Show In Menu Pages Menu Layout The Menu Layout helps to find the appropriate position length and top margin Length hil CH Margin Position T Layout F Note Artisteer supports only one horizontal menu and adding more menu items than can fit across the page will have unpredictable results Artisteer4 0 155 Artisteer 156 Web Design Revolution The Position option suggests two position types Inside Sheet and Outside Sheet The menu located inside the Sheet may be placed above and below the Header If you select Without Menu this removes the horizontal menu from your pages Use the Length option to to make the menu fit the sheet Sheet Width or the page Page Width
81. c vel neque in neque porta amet scelerisque lorem iaculis venenatis sed sit amet lectus sed Donec vel neque in neque Curabitur ullamcorper gravida felis sit porta venenatis sed sit amet amet scelerisque lorem iaculis sed lectus The content style rule says add a border around each Cell If you look at any given Cell you ll see that the Cell options reflect this rule 6px solid black border Fie BS kel Undo Redo Gh Export Untitled Artisteer 4 Standard Edition a Home Edit Colors amp Fonts Layout Content Background Sheet Header Menu Blocks Vertical Menu Controls Footer E Marketplace 5 le suggest Mode Cut e A yi Add Image X Pla B Cut Paragraph Arial Je EEr Be pekats 6 e G Video EF A Tisha ten Ade Copy Alm EE Row E Table Add Shape Motior Paste a gt Ee g 3 ES Content Stylin erlink Image HTML New i s BrUxx A a E ee eye KECE Hyp age Controis NeW E Backgrouns SERE Clipboard Style and Font F Paragraph p Conte Design Insert Source S X Home fe p Saes Enter Site Titl ao Ox q n er e e E Texture gt i Padding Te C sere gt ooren 7 Fc amp Post J Radius gt fa Bottom Border ig Width Layout Top Border 7 y ml Image or Texture Vidth 5 VMenu Home Left Border EE
82. ce around the quote H Specify the top right bottom and left Margin of the quote in pixels Margin Supported values are 0 50 pixels Use the Font Options dialog box to adjust the Font Family Font Style Font Size in pixels Text Effects and Character Spacing Artisteer4 0 112 Artisteer 113 Web Design Revolution aa Article Content Text Font Paragraph Font Family Default Font Default Style Default Size Theme Fonts 8 Arial Headings Arial Content Font Preview AaBbYyGgLlJj Note You can also modify the Paragraph settings including Alignment Indentation and Spacing Paragraph Use these options to align the text of the articles and adjust the style of the bulleted lists II 4 Paragraph a Artisteer4 0 113 Artisteer 114 Web Design Revolution Select the Custom Values icon to adjust the bullets options in the the Content Options dialog or go to the Font Options available in the Bullets menu to change the text settings of the text in the bulleted lists Bullets Specify the indent between the Bullet and the List Text Supported Offset values 0 20 pixels Normally Artisteer adjusts the size of the bullet image to fit the text If the option is set to Yes the original image size will be used This Use original size a Use this option to change the color of the bullet image Fill Specify whether the bullets should be re colored Nor
83. cessor 1500 Mhz or faster 150 MB free disk space 1 GB of RAM Microsoft Windows XP Windows Vista or Windows Seven Microsoft NET Framework 3 5 It can be obtained from the Microsoft website Not supported Browsers supported Internet Explorer 9 graceful gradation Firefox 4 0 Opera 9 Safari 4 0 Google Chrome 10 0 Standards supported HTML 5 CSS 3 section 508 partially PNG with transparency Technologies supported WordPress content management system Joomla 1 5 2 5 content management system Drupal 5 x 6 x 7 x content management system Blogger DotNetNuke 5 x 6 x Artisteer net Export plug ins supported PHP Template Ebay Template CodeCharge Studio Visual Studio C Project Visual Studio ASP NET MVC3 Weebly Moodle Artisteer4 0 29 Artisteer 30 Web Design Revolution f w i 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 e Log into Windows as a Power User or assume the Primary Administrator role e Double click the installation file This will launch a standard installation process e Select the language that you d like to use during the installation Click the Next button e Follow the instructions provided by the installation wizard e Carefully read the License Agreement If y
84. ckground M Texture or Image Light Effect Background oh You can apply theme colors custom colors or pick up a color from any spot on the template and add it to your custom color palette color Al Geto picker Your color selection can be enhanced with a gradient texture or light effect o Gradient produces smooth color transitions The gallery offers different gradients arranged according to the position direction and character of Gradient the color transition You can adjust the extent of the transition and the color contrast using the Gradient Options selection Texture or Image The Texture and Image Gallery offers different design patterns based on the style material theme and position of images and textures Texture or Image Texture refers to a special graphic that represents a type of design In Artisteer4 0 119 Artisteer Web Design Revolution Gallery From File Effects 120 the gallery there are many textures you can select from that are colorless These are displayed in different shades of blue Colorless textures acquire the color of the background fill color For example if your background is Red when the texture is applied the design will also appear in Red with the same saturation as the original thumbnail in the gallery In the gallery there are also several images and textures in color some are designs and some are picture images The colo
85. cking on the Custom Values icon The Sheet Options dialog is the same as selecting the Custom Values icon under the Sheet tab Please refer to the Sheet Tab section below for details about these options The Layout Options dialog can be accessed from the Columns menu and contains settings to adjust columns styling and glare Artisteer4 0 102 Artisteer 103 Web Design Revolution Layout Options pi x E Glare CI Top Margin 2 px m Top Outline Yes ka Column 1 width 200 px oum 2width 00 a Columns Use the Columns option to adjust the dimensions and alignment of the columns Top Margin This is the space above your content columns e g between the horizontal menu and your content A negative value will display the columns overlapping the layout element above e g Header This is disabled if the Header and Menu are outside the sheet Top Outline This adds a radius curved corners to the layout element above e g Header to highlight the separation of the two If you select No no radius is applied and the two sections may appear to be joined Hint this may be more visible if you temporarily increase the radius of the Sheet This is disabled if there is no layout element above the columns in the Sheet E g if the Header is outside the Sheet Also note the radius applies to the Artisteer4 0 103 Artisteer Web Design Revolution Styling
86. creen Tip Add or Edit Hyperlink A Tez This is how your hyperlink will appear on the page ex E Web address of the target link redirects the browser to the current page ag lt page name gt redirects the browser to the page on your website See ress Page gt Properties gt name URL Use this to determine what happens when your viewer clicks on the hyperlink e g Redirects the browser to a new window or tab or the current window or tab e _blank Open in a new window or tab Target e _ self Open in the same frame as the image e _ parent Open in the parent frameset e top Open in the full body of the window i e opens the link in the Artisteer4 0 75 Artisteer 76 Web Design Revolution current window Text that appears when you hover the cursor over the hyperlink on the web page screen Tip i T Button RSS Input Search DABE Checkbox i Radio button To insert controls in your content area position the cursor where you want the button to occur and select one of the controls on the Ribbon bar All controls except RSS are standard HTML control elements Checkboxes search boxes input fields and radio buttons are usually paired with some functionality on the server e g plugin for search and are not used independently like RSS and buttons In the Edit tab for Button you can specify the link title Text Address Target Frame Screen Tip and Access Key For RSS
87. d block with borders change the color of the block the quote appears in and or select a quote image You can also choose an Image from a variety of ready made images or insert your own custom image as well as change the color of the Quote image Table elements refer to HTML tables that you might include in your article content You can select the default border width border style and border color for tables you insert in your article content Artisteer4 0 111 Artisteer 112 Web Design Revolution Hyperlink elements refer to HTML hyperlinks that you might include in your article content Like other elements you can select the color font size and font styling applied to the hyperlink text You can also decide if the link should appear with an underline or not You can define these features for each of the states of the hyperlink Link normal unselected appearance on the page Visited Link appearance of the link after the link has been selected once Hovered Link appearance of the link when the cursor is moved over the link on the page select the Custom Values icon to adjust the quote options in the the Content Options dialog or go to the Font Options available in the Text and Quote menu to change the text settings of the articles or quotes Quote jist Specify the Padding of the Quote in pixels Supported values 0 50 Padding pixels The padding is the spa
88. dd the HTML code to define additional meta tags you want included These are important to the search engine rankings for your page lt meta name author content Bob Smith gt lt meta name contact content bsmith robertsmith us gt Description Check the box to have the page displayed in the Horizontal Menu or uncheck the box to exclude it from the menu You can also select what pages to display in Menu Check the box to have the page displayed in the Vertical Menu or uncheck the box to exclude it from the menu Use the Pages in Menu button to bring up a site map that you can also use to select from Artisteer4 0 19 Artisteer 20 Web Design Revolution j Y rpg pest 7 QT VJi Carr j T AD w XY 1 J Templates and websites created in Artisteer can be either exported or published When you export a CMS template or a website template it is saved in a specified folder on your computer In Artisteer you create content and style When you export your design Artisteer generates a format for your content style so it can be used in your website If your website is for a CMS like Wordpress or Joomla then the format created by Artisteer is a WordPress Theme or Joomla template You can choose to publish your generated files using Artisteer You can use Artisteer as an FTP client to move files You can also use a separate FTP client When you publish a CMS template or a website tem
89. e otate is selected in Image or Texture gallery Artisteer4 0 126 Artisteer Web Design Revolution Gradient eseis IL Height Contrast 127 This option shows the options available in the Gradient menu on the Ribbon You can make a quick change without leaving the Options panel Set the height for the selected gradient The supported values are from 1 to 1200 pixels This option is not available if No Gradient has been selected from the Gradient gallery The height determines the extent of the transition relative to the background of the page A small value means the transition starting from the top is fairly rapid and only covers a small area A large value means the transition extends over a longer area of the background Increase or decrease the luminosity of the initial and final colors of the gradient The smaller the value the less contrast between the top and bottom of the transition Conversely the larger the value the greater the contrast This option is not available if No Gradient has been selected in the Gradient gallery Artisteer4 0 127 Artisteer 128 Web Design Revolution Sheet Tab Use the Sheet tab to change the overall positioning and look of the Sheet area on the page For example you might prefer a sheet with rounded edges instead of square edges Or you may want to move the sheet down a bit from the top o
90. e border around the Row Use this to adjust the corners of the Row The greater the radius the more rounded the corners will appear Use this to select the spacing between this Row and adjacent Rows Use this to select the spacing between Cells within the Row Use this to add a separator line between Rows Add a row before the current Row Add a row after the current row Delete the current row Use this to change the number of Cells in the current Row Artisteer4 0 60 Artisteer Cell 7 Text Color Texture O Border Radius 61 Web Design Revolution This is the color you want to use to fill in the background of the Cell This option should be defined after selecting a content style since any time you select a style this may change the Fill color By default your Rows and Cells have no Fill color no fill which is the same as 100 transparent If you select a content style with highlighted Cells the Row fill color is set to no fill un highlighted Cells are set to no fill and highlighted Cells are set to the Highlight Color which is defined in the All Pages options lf your Cell contains any text this overrides the text color for the Cell That is it defines whatever style you created for Text with the Content tab Use this to add an image or texture to the Cell background The way the texture appears depends on the color and transparency again
91. e content you add later Hint to make it visually easier to work with content layouts and tables you should turn on Artisteer4 0 66 Artisteer 67 Web Design Revolution gridlines for both the layout Edit gt Styling gt Show Gridlines and any tables Edit gt Insert gt Table gt View Gridlines m G Video CA Table Hyperlink Image Q lok Controls Insert The Insert group on the Ribbon bar allows you to insert hyperlinks images video tables and controls such as buttons checkboxes RSS etc in your content area Position the cursor where you want to add the object and then click on the appropriate icon to insert your content To insert an image in your content area position the cursor where you want the image to appear and select the Image menu on the Edit tab When prompted select the image from your local computer from the Web from the Clip Art gallery or from an online collection of free images uploaded to Flickr From File From Url Clip Art gt More Online To add an image from the online gallery position the cursor in the content area select More Online and left click on the image in the gallery You can narrow the search by entering key words e g sport flowers in the search field Artisteer4 0 67 Artisteer Web Design Revolution 68 eol Search Show All gi K Btu e Y a i 7 p a T ta A
92. e details about textures Hint You can use any type of graphic file for a Texture Gradient Add a light transition effect to the Header See Background Gradient options above for more details about gradients Glare Add a glare effect to the Header See Background Glare options above for more details about glare effects The basic settings of the Header Background can be adjusted in the Background tab of the Header options panel Other options of extra customization appear when pressing the Options button in the Effects menu For more information about the radius and shadow options please switch to the Sheet Options section Depending on the selected image some background options may be disabled Background S Use this to adjust the percentage of color the Header fill color Header Fill Color will have when blended with the rest of the Header Color Weight Use this to adjest the color saturation amount of gray in the color of the Header fill color Header Fill Color when it is blended with the rest of the l Header Color Saturation Artisteer4 0 136 A Blur Transparency E Blend Mode a Image Format and JPEG Quality Artisteer 137 Web Design Revolution set the blur radius ranging from 0 to 30 pixels The Blur effect averages all pixels within the specified radius a larger radius leads to more blurring Hint The blur effect is useful if you want to add a depth of field to your
93. e following options e Language select a language of the Artisteer interface e Start up dialog this is the dialog you see when you start Artisteer without a project file e Panel mode preview the advanced options in the side panel e Auto preview Design when you make style changes in Artisteer such as changing colors etc your changes will appear in the Preview area e 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 displays special icons you can use to manipulate the area eg Suggest icon This can be distracting to some users e Online images in Suggest when you click Suggest images from Flickr can appear in the template Artisteer4 0 25 Artisteer 26 Web Design Revolution Cc Preferences ZP Language Show Quick Start dialog on startup 42 E Use panels for options view Auto preview Hy V Auto preview Design auto preview Delay ms Preview Highlights aa Highlight sections on mouse over Suggest 42 E Use online images oO Image download timeout 10000 ms Artisteer4 0 26 Artisteer 27 Web Design Revolution Downloading Artisteer You can download the Artisteer installation file from the official Artisteer Web site at http www artisteer com p downloads or http Awww artisteer com p news Please choose the release of
94. e of Artisteer project you are designing Layout Element Header Page Background sheet Menu Vertical Menu Block Sidebar Content Page Block Article Title Mini Toolbar Features E 5 Ej Suggest E Position 2 Add slide Suggest Suggest Siz Width Suggest Position Pages Suggest X Delete Block Pages Suggest X Delete Block Suggest Suggest Hide Title Artisteer4 0 12 Artisteer 13 Web Design Revolution Footer Suggest Use the Suggest option to see some design ideas for a layout element 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 lf 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 You can also use the Suggest Mode in the top right corner of the program dialog to see some alternative Header Content and other template designs El In the Preview area you can manage the Position of the Header and Menu Hover the mouse over the appropriate element and click the Position icon Ei The Pages option helps to link pages and the appropriate horizontal and
95. e rounds off the top corners i e applies the radius When turned off the corners are squared i e does not apply Tap suime the radius When the Top Margin is 0 the Sheet appears to be joined to the top of the page or the layout element above it e g Header or Menu When joined using a radius to round the corners helps differentiate and highlight where the Sheet top is located iB Set the padding for the sheet content in pixels Supported values 0 px to 50 px where 0 px means no padding Padding is the space between the aime content e g text and images and the edges of the Sheet Set the shape of the corners of the sheet corner radius in pixels Supported values 0 px 200 px where 0 px is equivalent to No Radius Radius lf there is no margin above the Sheet Sheet gt Margin gt No Outline the top edges will always be squared no matter what you set the radius to but the bottom corners will be curved Note the Menu Header and Sheet all share the same Radius value i e corner type Changing the radius for one changes it for all Artisteer4 0 131 Artisteer Web Design Revolution 132 Fill and Transparency Border Width kja Color Transparency Shadow Presets Blur Transparency Distance ee Angle Set the border width for the sheet in pixels Supported values are 0 px 20 px where 0 px is equivalent to No Border Select the border color from Th
96. e shape type is not in block Specify the Border Width of the in block content in pixels Supported values O to 10 pixels O corresponds to Without Border This is disabled if the shape type is not in block Fill and Transparency Fill and Transparency Shadow ii Size Opacity Distance Set the color border color and transparency of the content block The supported values are from 0 to 100 where 0 means without transparency This is disabled if the shape type is not in block Specify the Shadow Size of the Article block in pixels Supported values 0 20 pixels Specify the Shadow Opacity of the Article Block Supported values are 0 to 100 Specify the Offset Distance of the shadow in pixels Supported values 0 20 pixels where 0 indicates no offset Artisteer4 0 109 Artisteer 110 Web Design Revolution CE bk i a ae E um ft w k 1 f f i LA vata FANNI a 7 i i 7 if D Vv i 1 w Ge Y Bf Vii tf WA a i li H Headings Image A Text EA Table E3 Hyperlinks Quote Style and Font F Use this section to control the look of the following article elements e Headings e Text e Hyperlink e Image e Table e Quote You can change the font options quote style bullets image table border settings or image border settings to make your Article more unique lf you do not selct the Include Content option the image
97. e text wraps around the image on the left Use this to change the thickness of the border Use these options to add margin space around the image Note the amount of Space you can add on each side depends on the size of the content cell and adjacent cells For example normally you can add space above or below the cells because the adjacent rows can be moved down without affecting the appearance of the sheet However if you add space to the left or right adjacent cells may have to be shifted and or resized The maximum area you can work with is based on the sheet width Artisteer4 0 70 Artisteer TT Web Design Revolution Link Options URL address for the image i e clicking on the image redirects the browser to Address this address Use this to determine what happens when your viewer clicks on the image e g Redirects the browser to a new window or tab or the current window or tab e _ blank Open in a new window or tab Target e _self Open in the same frame as the image e _ parent Open in the parent frameset e _top Open in the full body of the window i e opens the link in the current window Screen Tip Text that appears when you hover the cursor over the image To insert a video in the content area position the cursor where you want the video to appear and select the Video button in the Ribbon bar This opens a dialog where you need to paste sp
98. e variants suggested in the gallery you can create your own content layout by selecting the Custom Content Layout option located at the bottom of the Content Layout menu and in the Layout menu Ta Layout In the dialog box click the down arrow icon and choose a Row layout Click the and icons to add or remove Rows You can also customize each Row by clicking on the Row and selecting one of the options shown to add or reduce the number of Cells in each Row Again the content e g text images etc in your Rows and Cells is automatically adjusted to your new layout Artisteer4 0 45 Artisteer 46 Web Design Revolution Layout Editor x Cancel Remember your Content area is divided into Rows and Cells Rows contain Cells Every Row has at least one Cell When you select a Cell for editing you are also selecting the Row where the Cell occurs When you click on any given Cell Artisteer highlights the area by temporarily adding a frame around the Cell Make sure to look for this frame before you start making any changes l aS A AN tA electing a Conte tyie Use the Styling tab to select a content style Selecting a content style is optional If you choose a style it only affects the current page not all pages By default when you create a new project the content layout for the Home page always uses the first basic style which is explained below The Styling tab suggests variou
99. ea or for the whole page For example if you have poorly formatted code e g missing an attribute or tag etc or if you insert the code somewhere on the page where it would invalidate the other HTML code e g the code is added within a tag definition you will not get the results you expect Insert Video x Video Copy embed HTML code From the page with video and paste here iframe width 425 height 349 src htkpe Sawa youtube comfenbed PAyLeschiayL Frameborder 0 allowrullscreen gt lt iframe gt C Width IL Height OK Cancel 5 Sometimes you may see embed code that uses the object tag lt object width 480 height 385 gt lt param name movie value http www youtube com y PMyLEXcNayU h en_Us ts L gt lt param gt lt param name allowFullScreen value true gt lt param gt lt param name allowsecriptaccess value always gt er par am lt param name wmode walue transparent gt lt embed ee a type application x shockwawe f lash allowscriptaccess always allowfullscreen true width 480 height 385 wmode transparent gt lt embed gt lt o0b ect gt Artisteer4 0 72 Artisteer 73 Web Design Revolution Or other times with an embed tag lt embed src http www youtube com v PayLkxXcNSyU amp h 1 en_Usats type application x shockwavwe f lash allowscriptaccess always allowfullscreen true wigth
100. ecial HTML code to ensure that the video appears embedded in the browser window and your viewers can play the video This is not done automatically by Artisteer because the code you need to embed the video depends on the source of the video e g youtube com the video type and version other characteristics of the actual video and the browser you are using The following section includes examples of embedding video in your pages but it is beyond the scope of this manual to explain everything about embedding media in your website First find the embed code that you need to insert the video Typically the source site will either have a way of copying the embed code or you can go to the video page and copy the HIML code from the page source For example with www youtube com depending on the video file source e g flash version you can often right click the mouse on the image and select Copy embed HTML Just make sure that you are on a page where the video is embedded in the web page and not a page where the video is displayed as a thumbnail image e g www youtube com Artisteer4 0 71 Artisteer 72 Web Design Revolution Note since you are working directly with the HTML source you need to careful that the code that you enter is valid for both the snippet of code you are inserting and within the context that the code is inserted e g the entire HTML source for the content ar
101. eeeesseeeessaeeesseeeesseeeesaeeees 32 HOMS TAD pern A R EAA A E ee 34 The Export Options Dialog ccccccccsecccceeececeeeeeceeeeeeeeceeseecesseeeesseeeessaeeessaeeesseeeesaeees 36 FG Vi ADD ee a E E E 43 Clipboard Font and Paragraph svecesereressccsevexeesnxertsnrerenirei ee eee eee 43 Content Layout and Styling cccccccccceecceceeeeceeeeeseeeeseeeeeseeeesseeeesseeeeseaeeesseeesaneeesaaes 44 oelecing a Coment o Yl Gasen eee ee 46 CGI TOW e A E E E E E E E 55 PAUPA aa ser nip enseesasioayicanioueerseiacynccmasneaineascca neha sis tuavioreeaiioueed 55 Row and Cell Options cccccccccceecccaeeeeceeeeeeeeeceseeeeeseeeeeseeeeseeeeeseeeessaeeesseeesseeeesaaes 57 Advanced Row and Cell Options ccccccccccsseeeceeeeeseeeeseeeeesseeeessaeeessaeeeseeeeseeeeeeas 62 Ee a S A E A E E A 65 Artisteer4 0 2 Artisteer 3 Web Design Revolution MOETE een eee nee eee ee 67 Insert a Video eee 71 MVS ONG TOONS a E E E 73 Mesen a FIY GNIAR ssssweverevvisunnsvesiviienerssinersr ors nE Mee ber ore E en EENE EEO E SEN 75 M SET GOT UU S ee E sane eanntiaemeaateaes 76 10101 6 5 a a A E E A E E 78 SS SNOW a a E E E E E 79 COLORS OMS Ta e 84 COO FS cacnainaeasrpaweseanauciatuanayanieeusneenunsuncesennaueinstannaneinersunaseanssseeeneauandersanansenteenatiannesntesrsusnresess 84 FUNG EEE EE AE EA EEE E A E A E EE E E 86 Fill CON OF viscoionsecdnanarannsnainenaeantnanuannesigusisaitnanunenalsansaceusanabasusanee
102. een during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product which might be a printed document web page or slide presentation Artisteer4 0 217
103. eer 4 Standard Edition Background Sheet Header Menu Blocks Vertical Men Controls Footer E Marketplace 5 Le suggest Mode g TE 7 is S E ee ga Layout es wa G3 Video o wry a i Elmo Mam 7 A EE Content Syin HTML le Layout 7 w Controls 7 i F Paragraph F Conte Fill gt sert Source Texture gt Enter Site Title J adius weg Layout Style gt OAE b mon gt a cour The as JE Spacing gt More Borders E p gr gngm VMenu Home 1 separator EERE ED on EEE gt Home E Insert Row Before gt nter age Additional Colors Subpag El Insert Row After Lorem ipsur BUSBBOU ur subpag Bk Delete adipiscing e _ I jit subpar Zi Columns amet congu More Colors z gt Blog Options i nibh vitae feugiat sapien ante eget V Ra Opis mauris Aenean sollicitudin imperdiet Block arcu vitae dignissim est posuere id Enter content here Read more Text Lorem ipsum dolor Suspendisse pharetra auctor Wu E EE Text Text pharetra Nunc a sollicitudin est Curabitur ullamcorper gravida Donec vel neque in neque porta felis sit amet scelerisque venenatis sed sit amet lectus lorem iaculis sed Donec vel Curabitur ullamcorper gravida felis sit amet scelerisque lorem iaculis neque in neque porta venenatis sed sit amet lectus sed You can undo this action Ctrl Z or Undo on the Quick Access Bar but you can t
104. eer 90 Web Design Revolution from any part of your template This is a simple technique you can use to accurately copy one color of your template layout to another area such as copying the color of your Header to your Sheet Color Selector Luminosity Hue There are Luminosity and Hue tabs available in the dialog Both tabs have a color selection area color palette where you can move a slider until you are satisfied with the color On the Luminosity tab there is a special luminosity slider This slider lets you increase or decrease the brightness of the color from zero at the bottom to 100 at the top With the luminosity selected you can go to the color palette and drag a small circle picker horizontally and vertically to change the hue and saturation of the color respectively The Hue tab contains a separate Hue adjustment slider Moving it all the way from red at the bottom through orange yellow green and blue up to purple allows you to select the desired hue of the color Having the Hue selected you may also move a palette color picker from left to right and from top to bottom to additionally set the saturation and luminosity values of the color Saturation can vary from 0 completely unsaturated to 100 completely saturated pure color Luminosity ranges from 0 black to 100 white The values displayed in the right set of boxes will change to indicate the exact color settings These values can also
105. eferences to the posts are listed on the same page Posts also have a header and footer which are metadata or metadata links to related content Static pages only have a headline e A special page called the frontend page or blog post page is used to list the post articles on your website Your viewers can navigate to the post articles by clicking on the post header that appears on the Blog Post page Every post page is a separate page on your site Viewers normally navigate the static pages on your website using the horizontal or vertical menu Unless you create one yourself there is no special page created to list the static pages on your site e Post articles have metadata associated with the post content Metadata refers to information about the post article that is pertinent to the article while not necessarily related to the content of the article For example the author and date the article was written is useful information about Artisteer4 0 115 Artisteer 116 Web Design Revolution the post since then you viewers know who wrote the article find articles written by the same author and determine how fresh the content is Static pages have no metadata It is considered that with the content you add to a static page it is not important to know who authored the page when the page was created or otherwise categorize the page Considering the differences then between a
106. ely from the sheet Artisteer4 0 96 Artisteer 97 Web Design Revolution You can regulate the distance between the two by setting different margin values e Inside Sheet the header is displayed inside the sheet Margin The Margin is the space above the Header If the menu appears above the Header this can be used to define the space between the Menu and the Header otherwise this is the space between the top of the Header and the top of the page select one of the top margin values positive or negative or set a custom margin value using More Top Margins 200 to 200 px Setting the margin to a negative value resizes the header area When the Header is inside the Sheet the Margin option is disabled because the Margin value needs to be defined for the Sheet not the Header The Margin option is also disabled if the page has no Header To place the header at the top of the page and remove the rounded corners of the outline select No Outline Sheet Width Page Width This option regulates the width of the Menu which may be set to the size of the Sheet or the size of the Page Menu Position You can also select one of the following Menu positions e Without Menu the template does not have a Menu e Outside Sheet the Menu is located above the sheet You can regulate the distance between the Menu and the Sheet by setting different margin values e Inside
107. eme Colors list the Additional Colors list or from the Custom Colors menu Set the sheet transparency Supported values are 0 to 100 where 0 is equivalent to No transparency Note the Sheet transparency also affects the border and shadow even though you may set the shadow transparency to none This option shows the options available in the Shadow menu on the Ribbon You can make a quick change without leaving the Options panel Set the shadow size for the sheet s shadow in pixels Supported values are from 0 px to 50 px where 0 px means without shadow Set the transparency for the sheet s shadow Supported values range from 0 fully transparent to 100 fully opaque Note if the shadow is completely transparent you wont see it no matter what you choose for the other settings set the shadow offset in pixels Supported values 0 px 60 px where 0 means no offset Set the shadow s offset direction The supported values are from 180 to 180 Artisteer4 0 132 Artisteer 133 Web Design Revolution Header Tab The Header is a layout object displayed at the top of every page of your site The Header has several layers which are combined to create one image e Headline and Slogan text e Header design coloring transparency texture gradients and glares e Background image e Foreground photo or image e Flash animation or video e Shape with textbox The He
108. en you increase the color weight the balloons will acquire more and more of a reddish shade That is whatever color saturation the balloons currently have is blended with Red and how much Red makes up the final color depends on the color weight At 100 the balloons are all some sort of reddish shade How Red they appears depends on the original color saturation of the image e g if pure Green then it would be pure Red This is only available for textures that have color Most of the textures in the texture gallery have no color i e the textures that are shaded in blue These textures automatically take on the color of the background If you select one of non color textures the Color Weight option is disabled E Make the lighter areas of the image texture lighter and the darker areas darker thus increasing the contrast of the image texture and making it Sonra more visible Hint this effect is more visible if you select a texture where the contrasts are more pronounced e g one of the textures from the Large group in the texture gallery Artisteer4 0 124 Artisteer 125 Web Design Revolution al Use this to control how saturated the background fill color should be when blended with the colors in the texture Use this with the color Color saturation weight option above The color weight determines what percentage the background fill color should have when blended
109. en you select a Highlight Color this changes the fil color It is either set to the Highlight Color or it is set to no fill Of course afterwards you can refine the design by changing either the Row and or Cell The Row and Cell options provide additional design layout and editing potential you can insert a texture choose from the gallery or insert the texture from a graphic file change the color transparency and borders customize the margin spacing separator s and columns of the selected rows insert and delete rows modify the width padding and vertical alignment of the cells Always remember to select a Cell which also selects a Row in the Preview area you want to change before making a selection The content style defines some of the design elements that are part of your Rows and Cells e g defines which Rows and Cells appear to be highlighted The All Pages options define how those design elements like borders and highlight colors are supposed to appear Whenever you change an option for a Row or Cell you are overriding whatever rule is defined by the content style you selected Once you make a change you cannot unchange or unselect an option unless you use the Undo action to undo your steps Also whenever you select a content style Edit gt Styling you reset any options you changed for a Row or Cell For example suppose you define how your borders should look Edit gt Styling gt All Pages
110. ent area not to all of the text in that portion of your page The Paragraph options let you adjust bulleted lists indentation and alignment The paragraph options apply to all the text in the content area you selected not just to any selected text The font and paragraph options override the same settings you may have defined in your design That is you can define the appearance of your content on your pages using the Content tab on the ribbon bar These changes are part of your design style for the template When you change the settings in the Edit tab you override the style settings you defined elsewhere e g Content tab For example if you decided that all of your web page text should be Red Content Text gt Color gt red any text you add directly to your pages or posts in the Preview area will be in Red You can override Artisteer4 0 43 Artisteer 44 Web Design Revolution the style however by selecting the text in the Preview area and then using the Edit tab to change the color for the selected text Edit gt Text Color gt black When you override your design like this your changes become part of the Content for your page not the design This is important depending on how you publish your content For example if you are building a web template for a CMS like Joomla you can choose to import the content you created in Artisteer when you install the template If you c
111. er from Artisteer when the content is installed Menus Menu Manager j 2m User Menu gt E Top b E About Joomla ns IE Australian Parks r a Main Menu n EW Fruit Shop p Ea Sample Horizontal Menu W P Wa Sample Vertical Menu F Artisteer4 0 201 Artisteer 202 Web Design Revolution lf you would like to turn off the pages with content exported by Artisteer simply select another menu and home page 1 Go to Administration Menus e g Main menu 2 Check the Home menu item and select the Home star above 3 Select Publish The modules which were installed on all pages are disabled on pages with imported content Modules that populate sidebar are assigned to certain positions Due to this the Artisteer blocks with content are located at the same position in Joomla as in Artisteer Details Title On This Day Show Title Show Hide Position posibon 7 S leci position Status Publshed x Access Fubbe m Ordering 2 Main Menu l Start Publishing 0000 00 00 00 00 00 S Finish Publishing 0000 00 00 00 00 00 2 Language Al Note ID 89 Custom HTML Site Module Description This Module allows you to create your own HTML Module using a WYSIWYG editor The content layout in Artisteer is also repeated in Joomla When you create a certain content layout for some pages in Artisteer Edit Content Layout it is converted to HTML mark up which applies to Joomla when content is being installed
112. es Supported styles One Level Expand with reload All One Level implies that subitems are not shown in the horizontal menu All open If the screen width is 480 px or less the subitems are displayed Expand with reload suggests that clicking a parent item opens up a list with subitems and loads the parent item page if the screen width is 480 px or less Submenu Top pixels Margin i Padding pixels A Radius a Fill hb Specify the distance from the menu in pixels Supported values 0 100 Border Color o Border E Specify the spacing around the submenu area Supported values 0 30 Select the radius of the rounded corners 0 15 px Specify the fill color of the submenu area Specify the border color of the submenu area Transparency Specify the border width 0 5 px Specify the transparency value 0 100 165 Artisteer 166 Web Design Revolution Subitem A Specify the horizontal padding in the Subitem drop down list in pixels Horizontal Padding Supported values 0 50 pixels iS Specify the top and bottom padding of the Menu Subitems Supported Vertical Padding values 0 50 pixels Jp Adjust the distance between the subitems 0 50 px Distance A Select the radius of the rounded corners 0 15 px Radius Q Specify the width of the Subitem Borders Supported values 0 10 pixels Border Width Gradient Presets Change the gradient without leav
113. ete vessel ede ee ode ac oe een ee doce sg eee eee 216 LO a eee O E A E E A 216 PE E E E E 216 SOFT EA SUA ON r A E E E EE an iva vo va oe va AE eae E E 217 RESPONSIVE Web Design ccccccssecceececeececeececeuceceuceceucecsueecsueessusessusessusessueensusensees 217 gt een eee ene 217 WV isaac E E E 217 Artisteer4 0 6 Artisteer l Web Design Revolution 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 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 Ar
114. evolution Joomla Joomla is a free open source content management system written in PHP It is used for publishing and managing content on the web and intranets and allows you to build powerful online applications The official Joomla website is http www joomla org Drupal Drupal is a free software package that allows an individual or a community of users to easily publish manage and organize a wide variety of content on a website It is an open source project written in PHP and distributed under the GPL The official Drupal website is htip drupal org Visual Studio Visual Studio is an integrated development environment IDE from Microsoft The official website is http www microsoft com visualstudio en us default mspx CodeCharge Studio CodeCharge Studio CCS is a Rapid Web Application Development Tool from YesSoftware CCS can be used to visually create dynamic database driven Web applications The official company website is http www yessoftware com Color Model 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
115. evolution e Font Family e Font Style e Font Size in pixels e Effects e Character Spacing And the Paragraph settings like Alignment Indentation and Spacing Font Style Font Size px Comic Sans MS Courier New Georgia A E Underline Aa E Small Caps A E Overline AA E All Caps A E Strikeout Character Spacing Sens Font Preview AaBbYyGgLlJj Artisteer4 0 179 Artisteer 180 Web Design Revolution Vertical Menu Tab Both Vertical and Horizontal Menus are the elements of navigation and design Vertical Menus are usually located at the top of the right or left sidebar column Designing Vertical Menus is a creative task Artisteer provides many settings which are arranged on the Ribbon bar in five main groups Layout Styles Menu Area Item and Submenu The Ideas group includes the Suggest Vetical Menu option Use this option to see some of the possible V menu designs The Pages group also includes the Show In Menu option Use this option to select which pages should be displayed in menu Vertical Menu l Backarounc J 1 a 6 Ea amp amp en my Sho Bee 6 eee im amp EN a gt o Co a i i 7 g z G E Header g Passive Passive Subitem gt Subitem Subitem i Menu Menu Item Coloring Levels Submenu Subitem Coloring Show In Content a Hovered m Hovered Menu Suggest Position Vertical Menu Ide
116. f the page add a shadow effect or change the width of the borders or change the background transparency or the color of the sheet Sheet Ej Width 4 Radius _ Border I Margin or Fill Shadow liz Padding BE Transparency Ideas Sheet F K Suggest Sheet The Ribbon options are arranged into one group called Sheet The group includes a Gallery with quick style templates and options to manage width margin padding radius shadow color transparency and border Hint If you use the gallery it can be difficult to distinguish between the thumbnail depictions of the settings Just move the cursor over one of the gallery settings and wait The Preview area will show you what the Sheet will look like if you select that option You can choose between a fixed or fluid Sheet width Fluid means the sheet width is a percentage of the display area in the browser Fixed px Flu d 94 600 pixels E gt 60 700 pixels 70 128 Artisteer4 0 Artisteer 129 Web Design Revolution IN p 1 iF Try rC OtLIONS YA I wf ww E l The sheet options can be customized by clicking on the appropriate button in the option list For example if you want to change the Padding value click on the More Paddings button Use the Sheet Options panel to edit the design of the sheet Change the Layout Fill and Transparency Border and Shadow parameters to achie
117. fic Features Theme options for WordPress themes Theme options are the extra settings designed for additional customization of the the installed Artisteer 4 0 WordPress themes The options are embedded in the Appearance bar and help to adjust the header navigation menu posts featured image excerpt pages comments sidebars footer advertisement and headings SEO These options override any similar Export options e g Show Home Item you set on the desktop before you exported your theme These options are also shared among all the Artisteer themes you install so even if you delete the theme in Wordpress when you reinstall the theme these options still override any Export options in your theme See Wordpress Export Options above for more details Em Theme Options Header r T Show headline ves Appearance TF Themes Show slogan Yes Widgets i Navigation Menu Menus Editor Show home item ves Home item caption Home Highlight active categories Yes Artisteer4 0 196 Artisteer 197 Web Design Revolution Theme Options Enable or disable the display of Headline and or Slogan by ticking the checkbox Header Enable or disable the use the Clickable Header option adjust the header link Home menu item Enable or disable the display of the Home menu item and or edit the caption of the Home menu item Categories enable o
118. footer with color and specify the transparency rate if needed Separator Separator is a horizontal border line between the Content and the Footer To remove the separator navigate Separator gt Weight gt No Separator Select the Weight Style and Color options to change the appearance of the separator Effects Select a texture or a gradient from the list insert a texture from file and manage the texture and gradient options see Footer gt Options Align Align the footer text right side centered left side Artisteer4 0 193 Text Padding Text font Hyperlink Text HTML editor Footnote Image Text Options Artisteer 194 Web Design Revolution Select a value that reflects the space around the footer text Adjust the text font style Define the font style for the active passive links visited links and hovered links Change the footer text in the opened HTML Editor dialog Edit HTML a Text 1 peda href gt Linkl lt a gt lt a href gt Linke lt a gt Reserved lt p gt Select a color for the footer text and footer link Adjust the image border and margin Specify the text and paragraph style settings such as right margin left margin line spacing and character spacing Adjust the bullets icon and style You can access the Options for the footer by clicking on the Custom Values icon The Options include Footer Texture Gradient Bullets and Image options Footer Options Li a Fill a
119. ge You can rename your new page by selecting the page title in the Pages Posts Panel and pressing F2 Artisteer4 0 34 t New Blog Post New Block Export K Options Artisteer 35 Web Design Revolution When you click on any of the content areas in the Preview area the Edit tab features on the Ribbon bar should be automatically enabled Use the Edit features much like a WYSIWYG editor to change the content on your page Use this option to add a new post article to your website There are some key differences between post articles and pages e Normally post articles are listed on a special page called the frontpage or blog post page where the articles or excerpts of the articles are listed e Viewers typically navigate the pages of your website using the horizontal or vertical menu Viewers typically navigate your post articles using the blog post page and special links in the header and footer of your posts You define which links appear using Content Metadata Icons e Posts can be grouped and categorized using categories and or tags that you define and associate with the post Posts can also be grouped and navigated using other attributes such as Author and date the post was created etc This makes it easier for your viewers to find the post articles they are interested in A new block appears in the sidebar Use the Edit tab and the Preview area to define the content of the bl
120. he Angle at which the shadow is cast from the button Supported Angle values 180 to 180 Passive Hovered Pressed c Specify the fill color of the passive hovered and pressed buttons Fill H Specify the border color of the passive hovered and pressed buttons Border Specify the transparency value of the passive hovered and pressed buttons Transparency A Specify the text color and style of the passive hovered and pressed buttons Text To finish the Button design you can change the overall Fill of the Buttons or change the Text settings The Text option allows you to change the color of Buttons and Hovered Buttons as well as adjust Font settings Artisteer4 0 190 Artisteer 191 Web Design Revolution a Hovered Button a Pressed Button Font P Font Family Size Style Font Options a More Colors Control Options The Control options appear in the Options panel when you select More Options in the Input Search CheckBox Radio button and RSS list Hom om om OO OO OO OO Dm mH I More Options Artisteer4 0 191 Options Input Options search Options CheckBox Options Radio Button Options RSS Artisteer 192 Web Design Revolution Adjust the Width Vertical Offset Radius and Text style in the Input section Also modify Gradient Border Shadow and Error styles in the appropriate sections Specify the Width Height Radius and Text parameters in t
121. he Search Control section Adjust the Icon Border Gradient and Shadow options in the appropriate sections Specify the Icon Shape and Text parameters in the CheckBox section Adjust the Color Transparency and Border of the Pressed Hovered and Passive styles Modify the Gradient and Shadow options in the appropriate sections Specify the Icon Shape and Text parameters in the RadioButton section Adjust the Color Transparency and Border of the Pressed Hovered and Passive styles Modify the Gradient and Shadow options in the appropriate sections Change the RSS icon Presets and adjust the icon size using the Scale option Artisteer4 0 192 Artisteer 193 Web Design Revolution Footer Tab The Footer tab is used to specify the style of the footer at the bottom of the page The options are arranged in two groups Layout and Footer Styles Let us look at each group in more detail Footer i Margins Fill S Align A Text Footnotes 33 s _l amp amp test a s i Separator JE Text Padding Hyperlink Hh Image 2 suggest Footer Length and l yan Position ba Effects Leg Text Ideas Layout Footer Styles Ma Layout Layout Length and Position Select on of the suggested footer layouts Inside Sheet Sheet Width and Page Width Margin Select No Outline or assign a positive negative margin value Footer Styles Shadow Fill Fill the
122. he backend or if you want to create all of your Content in Artisteer lf you re working with a CMS like Joomla or WordPress you need to decide if you just want to create a Design create all Content in the backend or if you want to create all of your Content in Artisteer If you only want to create a Design there s no need to customize the sample Artisteer4 0 32 Artisteer 33 Web Design Revolution Content If you want to create the Content in Artisteer you ll need to change all the sample Pages and Posts using the Pages Post Panel and the Edit tab 3 Export your project as a WordPress theme Website template or any other template format you like see Export Publish Menu and Export Options Enter Site Title Enter Site Slogan What We Do VMenu Search E Subpage 1 F1n r rin ae Login Form Subpage 3 Username Klog Password Blo C k Remember Me Enter content here Login i Forgot your password by Flickr mikecpeck i by Fliekr HandiLiv imaga by F Fei eee Pare triage by Flicker Han V Text E Erato pr Mauris metus at iaculis vitae vulputate tellus leo mi Iaculis E Lorem ipsum dolor Create an account phasellus et orci suspendisse placerat proin Purus luctus turpis Text Text Faucibus odio condimentum vivamus dui lacus mauris a Sake 1 hendrerit Mi eget eros felis placerat vel leo nune faucibus Send B OFT 0 Artisteer4 0 33 Artisteer 34 Web Desig
123. hoose to install the template without your content you wont see the style changes you made with the Edit tab since the style settings are embedded inline with your other content This isn t true of all style changes you can do with the Edit tab Many of the style changes you can make from the Edit tab become part of your template design not content See the section Source HTML below for more information The Content area of your template is divided into Rows and Cells The options of the Content group let you control the layout and design of your text images and other content You can arrange the content of your article in one Row split it into multiple Cells or divide the content into multiple Rows and Cells E a B zE EA Content Styling Layout Content When you create a new project Artisteer generates some sample content for you so you can easily see the layout of the page You may notice that as you select different layouts the text and images are automatically moved to the new layout If you reduce the number of Cells in your layout you may see some content disappear The content is not deleted If you add back more Cells or Rows to your layout the content will reappear automatically Artisteer4 0 44 Artisteer 49 Web Design Revolution One Column Columns Rows and Columns Table a Custom Content Layout Along with choosing one of th
124. hout leaving the Options panel Coloring Active Passive Hovered Adjust the background color the border color and text color of the Active passive and hovered subitems enable or disable the Underline option Artisteer4 0 186 Artisteer 187 Web Design Revolution Controls Tab Use the Controls tab to change the shape and style of buttons input fields search boxes check boxes radio buttons and RSS links on your website Controls Footer a Bity l ma W Fill Color O Border atl Input Radio button 7 Arial hha Button Button a Texture J Shadow R Search 7 R557 ui Suggest Buttons Shape B T x x z j aa SPE E Gradient A Text 7 CheckBox U Ank am Ideas Button Ta Controls Style and Font The options on the Controls tab are arranged into four groups Ideas Button Controls Style and Font Click the Suggest Buttons on the Ideas group to some of the possible button designs Select from a wide variety of button styles from the gallery on the Button group You can choose buttons with more rounded corners something in between or completely rectangular in shape Caton Buton The Button section also allows you to change the parameters of such button style options as Shape Color Texture Gradient Border Shadow and Text Click the Custom Values icon for more options in the Options panel see Button
125. htness is the relative lightness or darkness of the color usually measured as a percentage from 0 black to 100 white Artisteer4 0 215 Artisteer 216 Web Design Revolution Artisteer allows you to work with both HSL and RGB color schemes The desired color can be specified in the Color Selector dialog HTML HyperText Markup Language HTML is the predominant markup language for Web pages which provides a set of markup symbols or codes to specify the structure of documents for retrieval across the Internet using Web browser programs HTML is written in the form of tags surrounded by angle brackets The document can contain links headings paragraphs lists and text supplemented with interactive forms embedded images and other objects Cascading Style Sheets CSS is a style language that defines the presentation of a document written in a markup language CSS controls the overall layout text size style formatting and other design properties to let developers separate content from design RGB stands for the three primary colors of light Red Green and Blue The combination of these colors in different proportions produces any color in the visible spectrum RGB system is used for representing colors on computer display See also Color Model LJC HSL stands for Hue Saturation and Lightness It is a method for describing colors as they are perceived by a human eye HSL is considered a more intuitive
126. in the where you want it positioned The image height scale rate and angle can be adjusted in the Photo Object Options The scale option helps to proportionally resize the image and the Angle option allows Artisteer4 0 79 Artisteer 80 Web Design Revolution you to rotate an object Use the Position option to align an image and the Effects option to recolor an image add a shadow or flip an image i Position ry Gl AddImage E Play cao H Tabe Add Shaper El Motions 8 Effects Content Styling _ Hyperlin age AT PAL New i Erat i Cel Ge Contro Slide gal Background Paragraph onteni Insert Source Slideshow Tf EditIimage Mu Home a Photo Object Options I Height Shape is a text box that is added to a slide when Add Shape is selected You can use this option to add text or add a design over the image No Text Block a Artisteer4 0 80 Artisteer Web Design Revolution 81 Drag and drop the shape in the right location Use the Edit Shape Options and Textblock options to adjust the shape and text Sheet Header Menu Blocks Vertical Menu Contrals Footer ae Ses at Layout Video lt gt EE Row ata n 44 Table Content Stylin Hyperlink Imag HTML Layout r E Cell W Controls graph F Content Insert Source To edit the background go to Background options l E Image Fill Color Effects Recolor
127. ing the Options panel Specify the contrast between the starting and ending colors in the Subitem Gradient Supported values 100 solid color to 100 the most contrast Gradient contrast 9 0 en This option is disabled if you have not selected a gradient for the subitem Artisteer4 0 166 Artisteer 167 Web Design Revolution Passive Hovered a Specify the fill color of the passive hovered subitems Fill H Specify the border color of the passive hovered subitems Border A Specify the text color enable or disable text underline Text Artisteer4 0 167 Artisteer 168 Web Design Revolution Blocks Tab Blocks present additional content that is usually located around the main content area Things located in the blocks include links bookmarks search fields and the overall postings of the page Blocks and Vertical menu build the sidebar a vertical strip at the right or left side from the main content In Artisteer you can select from a range of block styles adjust the radius block spacing and distance Styling arrange manage and style the block background header and content The block style applies to all blocks on your website The options of the Blocks tab are united in three groups Block Ideas Block Styles and Block Content Let us look at them in more detail Blocks Background E Ls cau Header 3 Suggest Blocks Styling A Ge il Ee
128. isteer4 0 106 Artisteer 107 Web Design Revolution lf the default settings are not enough you can use the Content Options dialog to customize the settings To open the Content Options dialog click on the More button for example More Paddings below any list or select the Custom Values icon The Content Styling options help to adjust the margin padding spacing radius border and color of the filled cells te Margin E Padding i J Spacing E Radius Shape L Border Highlight Color gt These options are the same as the All Pages Options under the Edit tab Refer to the Edit tab section above for a description of these options The style options apply to any content layout you add to the content area Each static page or post article has one content area where you can add text images etc The Content tab is used to style how your content will appear on the page The Edit tab is used to actually add content e g text and the Content Layout options under the Edit tab are used to define the organization of your content in the content area and how each part of the layout should appear e g with or without borders highlighted or not etc The latter part is defined with the All Pages options under the Edit tab Edit gt Content Styling gt All Pages or they can also be defined with the Content Styling options but you will not see these options unless you pick a content layout
129. lable 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 Home amp Academic Version ee Standard Edition Free upgrades for 1 year v v Design Suggestions M Design Features v Export as XHTML CSS v y Export as Wordpress Theme y Export as Blogger Template 4 v Export as Joomla 1 5 2 5 Template v Export as Drupal 5 6 7 Theme y Export as DotNetNuke 4 9 Skin v Additional Export Plug ins Plug in Marketplace v Plug in Development Tools X Custom Values Dialogs Panel Mode v Library of Textures Glares and Gradients Partial 75 v Number of Color and Font Schemes 50 70 Custom Values Dialogs Panel Mode 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 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 Artisteer4 0 28 Artisteer Web Design Revolution 29 System Requirements Windows Mac Intel or AMD pro
130. lors which build a color theme are called paints The distribution of colors across the template is unique in every generated template You can change the colors by clicking on separate paints and selecting the appropriate color from the Main Color palette or from More Colors in the Color Selector dialog The Adjust option changes the luminosity and saturation also see Color Model of all paints making the colors lighter or darker softer or with more contrast Basic Normal Contrast Pastel modes Artisteer4 0 86 Artisteer 87 Web Design Revolution BEE cry T Adjust Options Clicking on the Adjust options will open the Colors option dialog where you can customize the luminosity and saturation Enter the values or drag the sliders to the right or left to increase or decrease values ee Luminosity lo m m Saturation 4 7 w Adjust Color Options Set the color luminosity Luminosity refers to the whiteness or intensity of a color Luminosity for any one color will range from pure white though to black Ulan The supported values are from 100 to 100 Where 100 and 100 refer to the highest and lowest of the RGB components al Set the color saturation Saturation refers to the amount of grey in a color Artisteer4 0 87 Artisteer 88 Web Design Revolution Saturation and determines how vivid it is The supported values are from 100 to 100 Whe
131. ls on the same Row Where there is only one Cell in a Row this can be used to add a margin between the edges of the Cell and the boundary of the Row Use this to adjust the corners of the Row The greater the radius the more rounded the corners will appear Note like the other options you have to select a content style that includes radius before you see this effect That is it doesn t apply just because you have a border You have to select an appropriate content style This is different from changing the radius on a Row or Cell which changes the border irrespective of the content style Use this to select the border thickness color and style Sometimes this affects the Row borders and sometimes the Cell borders it depends on which content style you select This is the color you want to apply to the background of a Cell to highlight the Cell This sets the fill color for the Row or Cell which one depends on the content style you select Unlike most places in Artisteer where you can select a color there isn t a no fill option since it wouldn t make any sense to have a transparent highlight color However remember changing this affects your Rows and Cells Remember Rows contain Cells Both have a background fill color Artisteer4 0 56 Artisteer af Web Design Revolution lf the fill color is no fill it means that the background is transparent Wh
132. ludes all of the style attributes like Color and Fonts and all of the rules that describe how elements are supposed to appear Your Design describes how your web pages appear but not what appears on the page The what is defined by your Content The Content is the Text Images Links etc that communicate your web page with your viewers Your templates always have a Design but Content is sometimes optional If you re using a Content Management System CMS like WordPress Joomla etc the content of your pages may exist in the backend of the CMS Using Artisteer you can create just a Design or you can optionally create all or part of your Content in Artisteer and then later import your Content in the backend 1 Find the design you like 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 work with as is or click the button again to see another design suggestion When you find a good design idea you may want to adjust some design elements like colors fonts or backgrounds separately The corresponding Suggest buttons will help you find what you want see Home tab 2 Customize the content When you start from a blank project what you see initially are sample Pages and Posts generated by Artisteer If you re using a CMS you need to decide if you just want to create a Design i e create the Content elsewhere such as in t
133. mally bullets not the List Text which also has a color option are ja Recoloring displayed in a default color You can change the color of the bullet image with Bullets gt Image gt Color If this option is set to No the bullet image appears in the default color otherwise the bullet image appears in the color you selected Use these options to customize the headline header footer of your articles posts Post Header Post Footer Headline m hl etadata F Artisteer4 0 114 Artisteer 115 Web Design Revolution To understand Metadata it is important to understand the pages of your website There are two types of pages static pages and post pages When you create a new project in Artisteer there is always one static Home and one post page Blog created automatically A static page has a title or headline and some content but there are no links to other parts of your website unless you add them to the content yourself You can hide the headline using the Hide Article Title icon Page 1 Hasard Tite The second type of page on your website is a post page Post pages are common to all blog websites They look very similar to a static page but differ in many different respects e A post page has a headline but you cannot hide the text This is because the headline is a short synopsis of the post which is often used when two or more posts are listed on the same page or r
134. mode position and size parameters Image or Texture E Use the blend mode transparency color weight color saturation and contrast options Texture Position Adjust scale texture repeat position flip and rotate parameters Gradient mm Use the contrast and angle options D Background Image The Background Image features help you find a suitable background image locate it on the Header and enhance it with various design effects Position a ey From File ty Effects 7 Background Image F Background Image s Use this option to select a background image for the Header The gallery has various themes and styles to choose from Abstract Color Abstract Wind Glass Background Nature Color Textile City Landscape and Clouds Image 9 You can also add your own background image from a file When you insert a background image from a file you have 3 options that determine how and what Artisteer4 0 138 Artisteer 139 Web Design Revolution portion of the image is displayed in the Header Resize header to image This will resize the width and height of the Header so it has the same dimensions as the image i e either shrink or enlarge the Header The Header does not have its own width setting The Header width is either the same width as the Sheet or the Page When the Header width is resized to the width of the image it also changes the Sheet
135. n Revolution Home Tab The Home tab is a great place to start designing your template You can choose a website design modify a desgin create content for your website and export the result The tab contains all the necessary options for creating a website Home Edit Colors amp Fonts Layout Content Background Sheet Header Menu Blocks Q H Suggest Colors saa Suggest Background W He t New Blog Post A Ya A Suggest Fonts 2 Suggest Header 5 New Block Suggest Design s les New Options Export nes Cy Suggest Layout Suggest Images i E EN Delete Page 2 J Design Id eas Website Export F The features of the Home tab are arranged in three groups Design Ideas Website adding content and Export The following tables describe each group in more detail Design Ideas The Suggest feature is best used at the beginning of your project It allows Q you to see the various designs possible and helps you determine which Suggest styles and themes you like best The Suggest option may be applied to the whole template or just parts of your template such as Colors and Fonts uF Use this option to narrow the range of options Artisteer will suggest l Styles Website Adding Content Use these icons to add new pages child pages posts and blocks Click the New Page icon to add a page or a child page The Pages Posts Panel located at the left side of the Preview area displays a site map of your By website New Pa
136. n te ngh E width Radius C borsen OP Mwgin Fu L hadra i hy Padding 5 Transparency oj Page 2 f r N Enter Site Title E a Menu Page 1 J EF Page peiie iE Parmy j oh take E latent hera Suspendtse Peels dao phe da Hunc a pollotuckn asi mun n ipeum dolor i Text Doner vel MaiS iN EGUE PTA x a m COo o E aM Panel Mode Mode File Menu contains project options New Open Save Save As template options Export Import Preview in Browser plug in development Activation settings and About Artisteer dialog You can also adjust the GUI settings in Preferences or exit Artisteer Artisteer4 0 9 Artisteer 10 Web Design Revolution Quick Access Toolbar contains Open Save Undo Redo and Quick Export options Ribbon contains the designer s tools Preview Area lets you see and edit your design using Preview Highlights Pages Posts Panel is a part of preview area It displays your website structure You can also add delete edit or rename pages and posts Panel Mode slides out in the Preview area As you work in the Preview area the panel options change depending on which elements you re working with e g menu bar header images etc so it s not necessary to go back and forth to change options from the Ribbon bar Window Mode The same options you can change in Panel Mode can also be changed from the Ribbon bar
137. n your pages In the Content tab you can find options to style text and control the space around the text in the content area as well as options to brighten up your article content with styled images quotes and metadata On the Ribbon bar there are several command groups Preview Image Styling Style and Font Paragraph and Metadata Content E a H Headings Image E e far o3 Header F la A Text HH Table Footer Suggest Shape Content p z S Headline Article Design Styling Sa Hyperlink Quote vy kons Ideas Styling Ma Style and Font Ma Paragraph a Metadata a Styling The styling options help to adjust the content area in general while the other groups such as Style and Font Paragraph and Metadata focus on providing options for particular objects like headings images article titles etc In the Shape group you can define the Article Content Shape Blockless or in Block change some style options In Block means the article appears in a block area of the display with a border The Shape button can be used to change the appearance of the block Blockless means there is no block area You can select the margins around the article and the text spacing padding around the text in the article but border features and block features are not available You choose the type of block by selecting the Styling button gt Shape gt Content Shape from the Ribbon bar Art
138. nd Transparency Texture Texture Position Gradient e Bullets ie Image i Top Margin 20 lt px m Top Outline Yes bi B Padding 25 3 px Artisteer4 0 194 Footer Options Footer Fill and Transparency Texture Texture Position Gradient Bullets Image Artisteer 195 Web Design Revolution The Footer options have the following settings Top Margin 200 200 px Top Outline Padding 0 50 px Adjust the footer background color Fill and Transparency 0 100 the Weight 0 20 px Style solid dotted etc Color and Transparency settings of the separator The Texture settings are very similar to the same options you can set for the page background For detailed information on Texture settings see the subsections for Texture Options and Texture Position under the Background section described above options see Footer gt Options Change the gradient Presets or adjust the Gradient Contrast 100 100 lf your footer text contains bulleted list you can assign an offset to bullets as well as enable disable the recolor option With enabled recolor option the grayscale bullets gain color that fits the footer style You can also adjust the color of the bullets and change the bullet icon Presets Set Margin 0 40 px Border Width 0 10 px and Color values Artisteer4 0 195 Artisteer 196 Web Design Revolution CMS Speci
139. nd set as default The content has not been installed though To install content 1 Open your template in Template Manager and click Install under the Basic Options Basic Options Headline Blog layout type Default Content The content imported from Artisteer does not delete pages and articles that were created in Joomla or other CMS New pages and posts are just added in the Article Manager The content previously imported with Artisteer will be replaced so it is recommended that the previously imported content is backed up Artisteer4 0 200 Artisteer 201 Web Design Revolution Import Content From Template This option will import articles extensions and menus and will create a new homepage Hote Previously imported content will he replaced therefore please back it Up if required 2 Click Import Artisteer assigns special categories for exported pages and posts All the exported pages are included in the Articles category and posts articles come as parts of Featured category You can change categories and edit the article in Joomla The featured category in Joomla is usually assigned to articles which are published on the Home page While content is being installed Artisteer creates an additional Home page which is set as default This page has Artisteer articles set as featured Besides an additional Sample horizontal menu and Sample vertical menu are added to Menu manag
140. nu Use these options to add a new block to your sidebar add a widget or change the position of a block or widget New Block This adds a new generic block to the sidebar The first line of text in the new block is the block name which you can change to anything you want To change the block name click on the first line until the yellow border appears J amp E MyWidget Below the block name is the block content To change the block content Artisteer4 0 100 Artisteer 101 Web Design Revolution click on the content area until the border appears You can use the options on the Edit tab to add any content you want MyWidget gt x El gt one Blocks Use this to change the position of a block you have added or to delete a block The names of the blocks are the same as the block titles on your page Widgets Use this to add or remove a Widget to your sidebar A Widget is a pre defined block function On the desktop there are six types of Widgets you can add Vertical Menu Search Login Form Blogroll Categories and Archives With a new block you can add any content you want For example you could define a block to display an image or a list of links Except for Vertical Menu you cannot edit the content for a widget block except for the Widget title You can change the style of the block but you cannot edit the content such as add delete change the
141. nu group You can control the color texture gradient border color transparency text color and also enable or disable the underline of menu items Use the Coloring option to select a color scheme for the menu area and the colors of the active and passive menu items To open the Menu Options click the More or Options buttons on the Ribbon or select a Custom Values icon under the Menu group The Menu Options are arranged into several tabs on the Menu Options panel Menu Options pit x mile Border Texture Texture Position Gradient E tem Texture OF Fil E DF Border EB k E Transparency Artisteer4 0 158 Menu Area Fill Border Color Transparency Border Top Right Bottom Left Artisteer 159 Web Design Revolution Select one of the theme colors additional clolors or use a custom color for the menu area and border Set the transparency value 0 100 fully transparent Specify the weight and style solid dotted etc of the top right bottom and left borders Texture Menu Area and Item Presets Blend Mode Transparency S Color Weight Use this option to change the texture without leaving the Menu Option panel Specify the way the colors of the texture and background blend Supported values are Softlight Decreases the light effect of the image by decreasing the contrast between the lighter and darker areas Default
142. o scale the size of the overlay area like this Artisteer4 0 142 From File my Effects Artisteer 143 Web Design Revolution Background Area WY Preview The Header area appears to get larger but not actually The Header dimensions stay the same but Artisteer crops and scales more of the image that appears in the Header You could use the slider to scale the size to the same size as the image which would be equivalent to inserting the image with the resize image to header option Conversely if you originally inserted the image with resize image and then scaled the Header overlay to as small as it could appear this would be equivalent to the use original size option Use this option to insert custom background files Use the effects option to recolor the image or add a blur effect Recolor The fill color for the Header is blended with the colors of the image The options you select from are where a different color weight and color saturation are Artisteer4 0 143 Artisteer 144 Web Design Revolution applied to the fill color before blending with the image e No Effect No color weight or color saturation is applied to the image e Tint Choose from options where color weight is increased for the Header fill color but the saturation is the same For example if the fill color is Red then the choices of the gallery are different images wi
143. ock Use the Blocks tab to style the way you want the Sidebar to look Adjust the Export Options text direction site icon css prefixes and styles description watermark footnote default page tags etc Additional options may appear depending on the type of export see he Export Options Dialog The current type of export is defined by the previously exported template So if you export a WordPress template then WordPress is your current template type If you export Joomla then Joomla is the current type Artisteer4 0 35 Artisteer 36 Web Design Revolution Export Use this option to export a template from your project The Export Options Dialog To open the Export Options Dialog select Options in the Export group on the Home tab press the Options button in the Export dialog or navigate File gt Export gt Options Options i General fS C55 Options eee 3 2 14 E aa Description A Text Direction lLefttoRiht oo o wa Watermark es Google Fonts Subset Latin T _ Footnote Site Icon E Default Page Tags ti E To FTP Server Site Icon Favicon From File ox Cancel General Tab Specify the text writing direction Artisteer supports both Left to Teal Right and Right to Left directions This determines not only how text Text Direction is displayed but also how text is inserted in Artisteer The change of text direction also affects
144. on For example if you do not want the Author of the post to appear in the header unselect Show Author This removes the Author link and viewers will not be able to navigate to the articles written by the same Author Artisteer4 0 116 Artisteer lt lt Ssti irrz Web Design Revolution Style E Date gt Show Author Style yl ey cat gt Color or Fill ae I icon Color z Radius No kon Pdf So Border b ja s m E Transparency Data lt is important to note that the metadata is still there but just not displayed in the header or footer For example if you are hosting your website in Wordpress you can elect to allow comments on the post by your viewers Each time a new comment is added the comment text is saved with the post text If you or another administrator reviews and publishes the comment then the comment text becomes part of your post page Normally if you include a comments link in the footer viewers can navigate to the comments by using the link but if you omit the link the comments are not deleted they are still part of the post By default Artisteer uses the original sizes of some icons You can turn off on this setting in the Content Options dialog Scroll down the list till you see the icon and set the Use Original Size option to No Yes Content
145. order transparency and add visual effects texture gradient shadow Adjust the Content text icon Shape color border transparency and add visual effects texture gradient Adjust the Content text padding Shape color border transparency and add visual effects texture gradient The Options for Background Header and Content are similar to those you can specify for other blocks in the sidebar For a detailed description of the Options see the previous section on Sidebar and Block Styles You can access the Options by clicking on the Custom Values icon Block Options for Vertical Menu Layout Background Header Texture Header Texture Specify the Radius Margin and Distance values Adjust the background of the Vertical Menu and set the Gradient Texture and Shadow values Specify the value of the Vertical Padding 0 25 px the Background color and Border color Transparency 0 100 Text Styling and the Width of the Block Header Border 0 10 px and Transparency 0 100 Within this section you can adjust the Transparency 0 100 Blend Mode overlay softlight normal Color Weight Color Saturation Contrast and Smart Invert This section contains the following settings Scale 10 130 Texture Repeat fill norizontally vertically Position top left center left bottom left Flip vertical horizontal and Rotate CW 90 CCW 90 Artisteer4 0 182 Ar
146. ou accept its terms check Accept the terms of the License Agreement option and proceed to the next step Otherwise quit the installation e Select the destination folder where you want to install the product e Indicate whether you want to create shortcut icons on the desktop and Quick Launch panel e Click Install button to start the installation e 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 Artisteer 4 0 46556 exe si1 lent Artisteer4 0 30 Artisteer 31 Web Design Revolution 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 all restrictions in the trial version such as the watermarks and automatically enables all of the features of Artisteer for the edition you have purchased Home vs Standard The license key is associated with the Artisteer release not the target platform Even though the installation file ma
147. ould be The first color is the fill color for the background and the second color is the one you select with the Color option from the effects menu Select this to further customize the Texture Options See the Page Background Options below for an explanation of these selections The Light Effect Gallery offers various glares you can use to enhance your design You can further customize the Light Effect by selecting Options see Glare in the Page Background Options below Hint you can visualize this better if you select no gradient and texture for the background use a lighter color and set the transparency to O for the background and glare Use this to insert a custom light effect from a file Hint the light effect may also be an image which may be useful if you want to overlay another image on the page background see Glare in the Page Background Options below The Page Background customization options may be entered from the Options button and from the Custom Values icon Artisteer4 0 121 Artisteer 122 Web Design Revolution General G Set whether a background image is fixed or scrolls with the rest of the page Scrolling Scroll When you resize the browser window or scroll the window the Sheet and the background texture appear to move together Fixed When you resize the browser window or scroll the window the Sheet appears to move over a fixed background Fill Color Selec
148. ound any content e g text within a table cell Table Cell Padding Column width of the selected column where the cursor is in pixels or as a 5 percentage of the total table width Note any content you have in the table Column Width cells affects how you can set the spacing and dimensions for the table and columns of the table This aligns the content within the table cell e g top aligned bottom aligned or centered Hint this can be hard to visualize if you don t have any content in your table To better see how this works add some temporary blank lines to an adjacent cell so the length height of the all the cells on the row are Vertical Align extended Then add one or two lines of text to one cell and adjust the aligment with the table options With top align the content should be oriented from the top of the cell With bottom align the content should be oriented to the bottom of the cell Artisteer4 0 74 Artisteer 19 Web Design Revolution lineman Liisjnnrlin Insert a Hyperlink To insert a hyperlink in your content area position the cursor where you want the link to occur and select the Hyperlink button on the Ribbon bar Specify the link title Text Address Target optional and Screen Tip optional To change hyperlink options right click on the hyperlink and select Hyperlink Options from the context menu Hyperlink A tos adress 5 TH Target m T S
149. page 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 Artisteer4 0 41 Artisteer Web Design Revolution Home Item Caption 42 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 unselect Show Home Item in my Theme options then it overrides this setting in my exported theme even if uninstall delete and reinstall the theme Specifies the caption of the menu item pointing to the home page if you have select Show Home Item above DotNetNuke Export Options iz DNN Version Show Login Tab in Menu Show User Tab in Menu Specify the version of DotNetNuke Supported versions 5x 6x Please note that exporting content Include Content option is compatible with version 6 x only Specify if you would like these items to appear as tabs in the Horizontal Menu Artisteer4 0 42 Artisteer 43 Web Design Revolution Using the Ribbon bar options under the Edit tab and the Preview area of Artisteer you can create and edit your content in WYSIWYG mode You can also add hyperlinks images video tables and buttons
150. part of your design For each set the settings are defined in the All Pages Artisteer4 0 48 Artisteer 49 Web Design Revolution options For example if you choose a thumbnail that includes a border the weight style color etc for the border is defined by the All Pages options All Pages means that wherever you selected a content style these are the settings that apply to the style Selecting a content style is optional and you decide the style page by page On any given page if you choose to create your design by changing Rows and Cells individually the All Pages options do not apply If you choose a content style then any of the All Pages options that are complementary to the style you selected apply to your content unless you override them by changing the Rows or Cells For instance if you choose a style with borders then how you define borders in All Pages is how the borders appear The All Pages options are completely independent of the content style you select That is you can select a content style and then define the setting values e g border or you can define the setting values and then select a content style However you won t see your changes unless you select complementary options That is you won t see a border unless you select both a style that includes borders and you define a border in the All Pages options Note when you create a new Artisteer projec
151. plate it is uploaded to host server such as Blogger com or Artisteer net lf you are developing an Artisteer plug in you can also publish it to the Marketplace see the Artisteer developers page Exporting a template is a three step procedure that involves 1 Selecting the type of export in the Export menu 2 Specifying the template name and destination folder in the Export Dialog you may need to provide some other data such as CMS version etc depending on the type of export 3 Configuring Export Options this step is optional The Export menu can be accessed from the File Menu from the Quick Access Toolbar or from the Home tab on the Ribbon Artisteer4 0 20 Artisteer 21 Web Design Revolution t Website Template a Blogger Template i DotNetNuke Skin 3 Drupal Theme re Joomla Template WW WordPress Theme Publish G FIP Server B Blogger com G9 Artisteer net 1 Marketplace Artisteer 4 0 templates can be exported to Joomla WordPress DotNetNuke Drupal and Blogger Note that exporting DotNetNuke skins with content is available only for version 6 You can also export an HTML website to your local computer or publish it to an FTP server Artisteer provides an FTP client to make it easy to move your website files to a remote host server however you can use any FIP client or service you want to move your files Your hosting service should provide you with instructions on how to configure your
152. r 4 Standard Edition Home Edit Colors amp I Layout Content Backgrou Sheet Header Menu Blocks Controls Footer Marketplace 5 Le Suggest Mode ee y Fill Color E From File I From File A 3 i Gradient 7 Be Effects W Options ugges 99 P Options Background Background A Texture or Image F Light Effect BLOG VMenu Enter Page content here gt Home Subpage 1 Lorem ipsum dolor sit amet consectetur Subpage 2 adipiscing elit Etiam pharetra tellus sit Subpage 3 amet congue vulputate nisi erat iaculis gt Blog nibh vitae feugiat sapien ante eget mauris Aenean sollicitudin imperdiet arcu vitae Block dignissim est posuere id Enter content here Read more Text Suspendisse pharetra auctor pharetra 6 Nunca sollicitudin est Curabitur Nunc a sollicitudin est ullamcorper gravida felis sit amet Donec vel neque in neque porta venenatis scelerisque lorem iaculis sed Donec sed sit amet lectus vel neque in neque porta venenatis Send Curabitur ullamcorper gravida felis sit sed sit amet lectus amet scelerisque lorem iaculis sed Lorem ipsum dolor Text Text Link1 Link2 Link3 Copyright 2012 All Rights Reserved You can change the row margin and cell spacing using the Row options Artisteer4 0 52 Artisteer 53 Web Design Revolution E ae waa L ruie i3 Wd undo credo Gexport Untitled Artisteer 4 Standard Edition
153. r color of the active passive hovered item fe Specify the transparency value 0 100 Transparency Text Adjust the item text color and style regular italic bold bold italic and enable or disable the text underline This section provides the ability to control the appearance of items in the submenus that appear when you select a menu from the menu bar E ar Passive ez ELN Hovered Levels Submenu Subitem T Area bd Submenu Ta You can adjust the following options e Enable or disable Multi level menu Levels option e Style of the Submenu Area e Style the Subitems Artisteer4 0 162 Artisteer 163 Web Design Revolution The Levels option provides a choice of multilevel menus A multilevel menu displays a list of menu sub items You can also select No Submenu if you would like a one level menu with menu items only HOME BLOG HOME BLOG SUBPAGE 1 SUBPAGE 2 SUBPAGE 3 One Level Menu Multilevel Menu Multilevel menus are arranged into one column and multi column layouts A menu with multi column layout is called Megamenu You can select a simple or extended menu style A simple Multilevel and Megamenu style displays a list of sub items in a separate submenu area while in the extended style the submenu area encloses the menu Item One column E Multilevel _ Extended Multi column Megamenu Extended TZ Options Click Options to open the Submenu Options
154. r disable the highlight of active categories Long menu items trim the long menu items and subitems by specifying the Navigation maximum number of characters that can be displayed If the whole word cannot be Menu displayed it will be automatically replaced with dots The default character limit of menu items is 45 and for subitems this value is 40 characters You can edit the character limit by typing custom values I f the saved options appeared to be inappropriate you can always return to the deault settings by clicking the Reset to Default button Default menu source select either pages or categories as a menu source The Post options allow you to display the navigation links at the top or at the bottom Posts of the post pages and single posts You can also trim the long navigation links by specifying the limit of characters You can use a featured image as thumbnail and specify its appropriate width and Featured Image height parameters The auto thumbnail option is also available thumbnails are generated by using the first image from the post gallery You can choose auto post excerpts when neither more tag nor post excerpt is used or manually specify the excerpt length number of words and the Excerpt E balance The default number of words which make up auto excepts is 40 xcerpt The Except Balance helps to avoid the undesired split of short posts that are slightly beyond the Except size The default except balance value
155. r weight and saturation for colored images and textures may be modified in the Page Background Options using the custom value dialog icon Use this option to insert custom images or textures Before pasting the image specify the image position and Blend Mode explained below Use this option to select different color effects for the textured background The effects you can apply depend on the texture or image lf you are using a colored image you can apply a color effect to change or offset the pattern of colors in the image e g tint recolor grayscale lf you are using a non colored texture you may or may not be able to change the color effects For example if you select the palm trees in the Horizontal Floral group you can invert the colors in the texture you are not really inverting the colors as much as changing which shade of color should be assigned to each area But if you choose the second horizontal bottom texture in the gallery the effects option is disabled you cannot invert colors for this texture With non colored textures you can invert the colors or you choose a two color layout E g if you select the first Flowers texture you can Artisteer4 0 120 Artisteer Web Design Revolution Options Light Effect Light Effect Gallery From File Options 121 choose what color the flowers should be and what color the background sh
156. radient Contrast 100 solid color to 100 i Adjust the Color Font Family Size Style and Alignment of the content and Text and Hyperlink Hype mas E Change the bullet icon using the Presets option adjust the Offset 0 20 px Bullets enable disable Recoloring and the use of the original bullet image size Me Adjust the Border Width and Margin of the Images in block content Image 4 S E 8 7 i po A Seer s F hd Block Content Within the Ribbon you can apply the following font options e Margin Left e Margin Right e Line Spacing e Character Spacing e Font Options e Link Options e Bullets e Image Options Artisteer4 0 177 Artisteer 178 Web Design Revolution The Font settings allow you to modify the font color font family font size font style and text alignment Baa a amp Color tp Font Family At Size Z Style Align You can also use the standard font settings to design how hyperlinks appear and create variants for visited and hovered links Link Visited Link ah Hovered Link The Image settings allow you to adjust the margin around the image and design the appearance of the image border Options Clicking on the Font Options button will open the Article Content Text options dialog where you can adjust such Font Settings as Artisteer4 0 178 Artisteer 179 Web Design R
157. re 100 means a large amount of the grey Fill Color Colors of the design elements such as Background Sheet and Menu may be adjusted in the tabs with the help of the Fill Color option The palette consists of Theme Colors Custom Colors and More Colors in the Color Selector dialog BEEBEGO EEE EGO BEBGGO Additional Colors E OOE a More Colors Color Selector Dialog More Colors The Color Selector dialog is displayed when you select the More Colors button in one of the color option dialogs Artisteer4 0 88 Artisteer 89 Web Design Revolution Color Selector P Luminosity Hue w E Sat 2 senn su Transparency 0 v Preview OR Cancel The Color Selector dialog lets you select the desired color you want and adjust the hue saturation and lightness of the color If you already have a color in your Artisteer template that you would like to use instead of finding a match using the Color Selector you can select the color directly from the template using the Color Picker tool The Color Picker tool i e eyedropper icon appears automatically when you move the cursor outside of the Color Selector dialog window current You can move the tool over any area of your template e g the Header and select a particular spot and color with the mouse With the help of the Color Picker tool you can extract and apply the colors Artisteer4 0 89 Artist
158. rt_content zip and install the art_content module 3 Go to Configuration Content Authoring Artisteer Content Import and import the content Home Administration Configuration Content authoring Artisteer Content Import o ARTISTEER CONTENT IMPORT Artisteer Content Import For Drupal 6 please follow the next steps 1 Go to Build Modules Install new module 2 Browse for your_theme art_content zip and install the art_content module 3 Go to Configuration Content Authoring Artisteer Content Import and import content some blocks may not appear on your website after import To enable blocks and menus 1 Navigate Structure Blocks 2 Scroll down to the bottom of the page and assign the appropriate regions to blocks and menus lf you would like to remove some blocks select None 3 Configure the region settings for each particular block or menu by selecting Configure Region Settings your_theme e g right sidebar Artisteer4 0 207 Artisteer 208 Web Design Revolution Right sidebar Search form Right sidebar l 4 Save the changes by pressing Save blocks You can also arrange the blocks by dragging and dropping them in the right location BLOCK Left sidebar On This Day Vertical Menu Brag to reorder However you need to specify the region for Main page content block before arranging the blocks in sidebar You may also need to delete breadcrumbs that are present on
159. rtain exports Joomla Template 2s How to Install and Use Joomla Template Erted O d 3 Artisteer Templates E ZIP archive Indude ARTX Project Include Content lf you change your template after export those changes may be overwritten the next time you export your template You cannot import templates into Artisteer even those that have been created by Artisteer To make changes to your template you need the Artisteer project file lf you sharing your project or you just want to create a backup of your project then use Include ARTX project Artisteer has a default folder for your projects but this may change if you are using resources e g images from somewhere else Artisteer4 0 23 Artisteer 24 Web Design Revolution The Include Content feature allows you to export content to Joomla and other CMSs For more information about exporting content from Artisteer please refer to the section Importing emplates with Content to CMSs File Menu fa Li Fite g3 m EK Undo Redo GF Export te Recent Projects New shaped my U Open CTRL O Save CTRL 5 S Save S E Export b Import Preview In Browser P rire Develop d _ Activation About Artisteer P P Preferences x Exit Artisteer In the File menu you can manage Artisteer projects New Open Save Save As export your template
160. s designs you can apply to the content such as adding borders or highlighting certain areas The Styling options can be used as a shortcut to styling your page That is there are many ways you can style your pages For instance you can style your Rows and Cells individually or you can select a content style or you can select a content style and then change your Rows and Cells individually Selecting a Style from the thumbnails is easier than changing each Row and Cell but as we explain below the style you select interrelates with other style settings and sometimes changes or resets other settings in Artisteer When you pick one of the thumbnails you re choosing a set of style settings that are part of your design The content style defines which set of style attributes are part of your design but not how they appear The style settings which define how they appear e g borders are configured with the All Pages option Artisteer4 0 46 Artisteer 47 Web Design Revolution amp Filey oF bd Undo Redo epor Untitled Artisteer 4 Standard Edition teta Home Eda Colors amp Fonts Layout Content Background Sheet Meader Menu Blocks Vertical Menu Controls Footer t Marketplace 5 A Suggest Mode B Arial a3 gt fr Ti Layout Nal G3 video gt 4 brs 4 EE Row co C Table 5 Paste BsU x x Ar A Y amp Content Hyperienk Image x HTML prar ma Layout v K w Controls
161. s in the articles are just placeholders for images in your CMS You decide if images you add later will have a border and what the spacing should be between the images and text Note the style you define here applies to the content you add to your website What you see in the Preview area of Artisteer is some sample text and images If you are creating a template for one of the supported CMSs like Joomla or Wordpress you will not see the effect of your selections until after you add the content in the CMS That is in Artisteer you design how you want your content to look but you add the content in the CMS However in Artisteer 4 0 you can create some content in Artisteer and then import it to your CMS using the Include Content option see Expori Publish Menu If you create your content with the Edit tab you can see your design immediately For example if you select all tables to have a Red border when you add a table to your page with the Edit tab it will appear with a Red border s Artisteer4 0 110 Artisteer 111 Web Design Revolution The selections you make here apply to all the pages and posts on your website For example if your tables have a Red border you can change them to be Black but you cannot define some pages to have tables with Red borders and other pages with tables that have a Black border If you want this effect you have to restyle the table for each page you want a different
162. s the same aspect ratio Artisteer4 0 69 Height Scale l Alt Text Preview Layout Options Position Border Margin Artisteer 70 Web Design Revolution This is the height of the image in px after insertion in the content cell If you change the height the image is scaled keeping the same aspect ratio When you insert the image in the content cell the image is scaled to fit the area of the cell If you change the scale the width and height is changed to keep the same aspect ratio Normally when an image cannot be displayed e g you disabled images in your browser the browser only displays an empty icon where the picture would appear Alt Text is meant to provide a text clue to describe what should have appeared at that position Also if the browser supports it Alt Text is also displayed when you hover the mouse over the image When enabled this option lets you preview the image in Lightbox style Your viewers can click on the image to see a larger version of the image overlaid on top of your page When you insert an image Artisteer automatically adds the class attribute art lightbox to your lt img gt tag to create a Lightbox style for your image e In Line with Text The text does not wrap around the text e In Left The image is positioned on the left and the text wraps around the image on the right e In Right The image is positioned on the right and th
163. selected for the Home page You won t see the changes you make to All Pages unless you select a content style that is complementary to your settings For instance you won t see any borders you define here unless you select a content style that includes borders These options can be overridden by changing the Row or Cell style options See Selecting a Content Style above for more information Styling gt All Pages Use this to adjust the spacing between adjacent Rows The larger the margin the more space between Rows Margin This applies to all rows in the layout This can be changed with the Margin option on the Row element i Use this to adjust the spacing around your content e g text within a Cell The cell and content e g text is reshaped to accommodate Padding the amount of spacing you want to reserve for your content This affects all Cells in the layout None of the content styles Edit gt Styling include a specific padding therefore this option Artisteer4 0 55 Artisteer Web Design Revolution Spacing Radius Border Highlight Color 56 applies to all cells Whenever you create a new page there is always a default content style applied to your page therefore this option adjust all cells even if you don t select a different style Use this to adjust the spacing between Cells in the same Row The larger the spacing the more space between Cel
164. sevacteasemssecaseestvarace ES 138 6 6 9 eee nee ene one nee enone ere ee ee ee eee 144 IVS E a eects E ote ete ec gras A ec ete beso ai eee eer ee sora teenie enero cuaeeee 146 ONS cece ce cece cate E 147 FS 0 eer eerie A E O S 149 OPIO ene ene a ene E N 149 S EEE ease EE ee ee ee eee ee ee ee ee 151 OS ae posse ted sapere pee sacs E T 152 KMENU T A Oeae st aueee cate E A E E E A E E 155 Menu Layout ccccccceeeceecccececeeeceucccaceceeeceueceaeesseeseuseeaeesseesueseeenseeteeeseueenseeseesseaeess 155 PUO ar E E eee 156 Menu Styles cece seeccceeececeeeeeceeeeeseeeeseeecesseeeesseeessaeeeseaeeeseeeesseeeeesegeesseeesseeeesaeeeesas 157 CRU ea 157 OG Sete teerge eget ek nenne EE EER EEEE EE EE EEE EE EEEE EEEE EE 158 UPEN e E N 162 6 2 6 9 eee EE EE EEES 164 BIOCKS EAD e 168 BIOCK A eee E E E E E E E ee RS 169 LALLE e EIEEEI EE EAEE EEE EEE EAEE E 169 PACK OUNO eree lesbisachevmisialcininiuiceiecalannieienmaiaes 171 Header and Content ccccccceccccesececeeececeeeeeceeeeeseeeeeseeeeeseeeesseeeessaeeessaeeesseeeesageeeeas 175 POG COMON eee T E 177 AMUONE osre ESEE E EEEE 178 Veruca Menu TaD esesten enee eere 180 Layo Uran y O eer EE 180 Artisteer4 0 4 Artisteer s Web Design Revolution MENU O Genser iE E E A E A E E O EE AEE E A E E ee 181 EO Stee atemnge gst er necesita alain niareelcmesahiamer E EEEE EE EEEE EE EEEE EE E EEEE EEEE EEE 182 KO e E E E E 183 6 2 0 gene eee E EE EEE
165. sparent Remember Rows contain Cells so Cells are rendered after the Row If the Row Is transparent then this is relative to the Sheet underneath the Row Image or Texture Use this to add an image or texture to the Cell background The way the texture appears depends on the color and transparency against the Row underneath Texture Position Use this to control how and where the texture is applied to the Cell background HTML This lets you assign an HTML id to the Cell element This can be useful for instance if you add Javascript or CSS to your template and you need to refer to this specific Cell The Show Gridlines option adds gridlines to the Preview area so you can see the organization of your content better The gridlines look like a set of dotted lines around the content on your page Artisteer4 0 65 Artisteer 66 Web Design Revolution amp File DF kd M Undo Rede Epot x Untitled Artisteer 4 Standard Edition a r Edit Colors amp Fonts Layout Content Background Sheet Blocks Vertical Menu Controls Footer Fs Marketplace 5 es uggett Mode W Hom i J A as bb Arial 2 J4 Layout Q b BA Video P a j y AIET Row oo C Table Paste B 7 ey r e oe Myperlink Image HTML lt A Cell d d 2s Controls Chipboard Style and Font a SOUN f l Pages t Row Options re x _ Home a A oy Pacii Oo o d Posts VMenu Home L Magn One Row Transparency cte
166. specify title Text Address Target Frame and Screen Tip To insert an Input field a search field a checkbox or Radio button simply position the cursor in the content area and select the appropriate control on the Ribbon bar The style of controls is adjusted in the Controls tab Artisteer4 0 76 Artisteer 77 Web Design Revolution Add or Edit Button x jon Button ie Address Inew page 2 Ey Target Frame Ey Screentlip Ey Accesskey Add or Edit Hyperlink Hyperlink AL Text MyRss ooo O E iee es m TE Target T Screen Tip Add or Edit Button ba This is how your button appears n The target address link of the page directed by the button If this page is Address within your website this should be specified as a filepath relative to your website e g my page see Page gt Properties gt name URL Use this to determine what happens when your viewer clicks on the button e g Redirects the browser to a new window or tab or the current window or a tab Target Frame e _ blank Open in a new window or tab e _ self Open in the same frame as the image e _parent Open in the parent frameset Artisteer4 0 77 Artisteer 78 Web Design Revolution e _ top Open in the full body of the window i e opens the link in the current window z Text that appears when you hover the cursor over the button on the web page Screen Tip This is the HTM
167. st the Row underneath This defines the thickness style and color of the border around the Cell If you choose a styling that includes borders all of the cells will have four borders If you choose a styling that uses separators between columns some Cells may have a left or right border You can use this option to add delete or change the borders around the Cell area i e top border bottom border etc Use this to adjust the corners of the Cell The greater the radius the more rounded the corners will appear Sets the width of the Cell relative to the overall size of the Row E g 75 means the Cell width is the size of the whole Row Remember the Row width depends on the Sheet width the number of columns in your layout and the width of the columns This controls the space around the content e g text in the Cell This may change the dimensions of the Cell as well as changing the Artisteer4 0 61 Artisteer Web Design Revolution Padding Ta Vertical Align 62 other Cells in the Row This aligns the content within the Cell e g align to the top of the Cell align to the bottom or centered Hint this can be hard to visualize if you already have content in the Cell To better see how this works add some temporary blank text rows to an adjacent Cell so the length of the all the Cells on the Row are extended Then add one or two lines to your selected Cell and adjust
168. static page and post page the options you can set in the Metadata group apply to post articles not static pages The exception is the Headline options You can use these to style the headline text and add an icon to appear next to the article headline The link options however such as Hovered and Visited only apply to the post articles listed on the frontend page i e blog post page since the headline is impressed as a hyperlink so viewers can navigate to a specific post article The Header Header Layout and Footer Footer Layout options let you select whether or not the header footer headline and metadata e g date author etc are placed inside a block i e panel The location inside the block allows controlling the border and color of the block Without a block these options are not available The Text option refers to any metadata included in the header or footer e g date The Link options refer to any metadata links to related content e g Author Comments etc Use the Icons option inside the menus to display or not display an icon with the metadata change the color of icons Color select an icon from the gallery or insert custom icons from a file You can select the appropriate metadata icon from the list Author Date Edit Email Pdf Print Data Post Header Category Comments Tags Post Footer If you do not want a particular type of metadata to appear with the post unselect the Show opti
169. steer standard font sets or create your own custom font scheme Just click on the Edit Font Set button in the Font Sets list The Typography option allows you to select one of our typography styles or create your own custom style design Just click on the Edit Typography button in the Typography list Typography Select style to edit Article Content A Default Ay Text Link F Visited Link h Hovered Link H Headings H1 Heading 1 H2 Heading 2 H3 Heading 3 H4 Heading 4 Hi Heading 5 He Heading amp Preview Modify l AaBbY yGgLlJj CoS Font Family Content font size 13px In the opened Typography dialog you can change any text object by selecting the object and clicking the Modify button The Modify dialog allows adjusting the following Font settings e Font Family e Font Style e Font Size in pixels e Add or remove Effects e Adjust Character Spacing Artisteer4 0 92 Artisteer Web Design Revolution 93 Site Default Text Font Font Family Font Style Font Size px Content Default Font a Arial engs Arial Arial Black Comic Sans MS Courier New g Regular 12 Default Style Default Size a 8 z Italic 9 Bold Bold Italic Effects A E Underline A E Overline A E Strikeout Aa E Small Caps AA E All Caps Character Spacing Normal z By Spacing Font Preview AaBbYyGgLlJj
170. steer To check it simply preview your template in browser and resize the browser window You can also use various device emulators like iP hone4 simulator or iPad emulator for websites published on the web with active url Choose a site icon from the gallery or insert a custom icon from a file Browsers that support favicons will display this icon next to the web address for your site in the browser s address bar and or the browser s bookmarks Artisteer4 0 37 Artisteer Web Design Revolution CSS Options Tab dai i CSS prefix ip Additional CSS styles Description Tab i Author Name Bs Author URL Template Version Template URL ge Tags P Description 38 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 You can enter custom CSS styles here They will be embedded in the CSS stylesheet generated by Artisteer Description Identifies the name of a person or organization creating the template Provides a reference to the Author s website Identifies the Version Number of the template Specifies the location of the template on the web Specifies the keywords associated with the theme Provides additional information about the theme Artisteer4
171. t there are default values assigned to All Pages so normally you don t need to define your style settings before you select a content style As we mentioned before when you select a content style the Rows and Cells are changed to reflect the style defined by All Pages Which options change depends on the content style you select e g this style says add a border around each Cell add Margins and Spacing Artisteer4 0 49 Artisteer 50 Web Design Revolution a Sag zs Current Row Ee All Pages H Show Gridlines This changes the Cell options for border Fill color set to no fill and Radius no radius It also changes the Row options Border no border Radius no radius Fill color set to no fill Margin to add space between rows and Spacing to add spaces between Cells But suppose you select this style ET i L Ine w All Rows lesa es ee oe oe E sac fisas Other OIC i s Current Row Ee All Pages Show Gridlines This style changes the Row border options top and bottom not the Cell options That is the border is defined by the Row not the Cell Artisteer4 0 50 Artisteer 31 Web Design Revolution i Filey pF kl 9 Undo Redo Export 7 Untitled Artisteer 4 Standard Edition Home Edit Colors amp Fonts Layout Content Background Shee
172. t Header Menu Blocks Vertical Menu Controls Footer E Marketplace 5 hI suggest Mode Enter content here Text Read more a Pe Era gt amp o gt vi E A Jt Paragraph Arial 13 v Z i Z ga Layout k amp Video oP wry G Cop cies SE Eg Ee Row J Table Paste J X X gt S S E Z Z Content Stylin erlink Image HTML New BIrUxx A a2 a a aire aad Layout ss z B cen p 39 aK Controls Clipboard Style and Font Paragraph Content Insert S eshow may Row Options pt x gt Home ae van iiiki Dee Posts T Margin gt Home i amp Post 2 Enter Page content here JE Spacing amp Post Subpage 1 Border Radius Subpage 2 Lorem ipsum dolor sit amet consectetur E Transparency Subpage 3 adipiscing elit Etiam pharetra tellus sit BS image or Texture gt Blog amet congue vulputate nisi erat iaculis nibh vitae feugiat sapien ante eget mauris Block Aenean sollicitudin imperdiet arcu vitae dignissim est posuere id Lorem ipsum dolor Text Text Suspendisse pharetra auctor pharetra Rani cs E oat imate Nunc a sollicitudin est Ham gravida felis sit amet Donec vel neque in neque porta venenatis scelerisque lorem iaculis sed Donec sed sit amet lectus vel neque in neque porta venenatis Curabitur ullamcorper gravida felis sit sed sit amet lectus amet scelerisque lorem iaculis sed
173. t the appropriate color to fill the background Glare Presets This option shows the options available in the Light Effect menu on the Ribbon You can make a quick change without leaving the Options panel Set the glare transparency relative to the Page background The supported values are 0 to 100 where 0 means without transparency This Transparency option is not available if No Glare is selected in the Light Effect gallery a Increase or reduce the size of the light effect scale A glare is a special type of texture pattern that emulates a lighting effect like the rays of the sun or light reflected from a surface Scale simply reduces the size of the graphic relative to the page background This option is not available if No Glare is selected in the Light Effect gallery Aligns the glare lighter areas of the glare texture Available options are Left Center and Right This option is not available if No Glare is selected Align in the Light Effect gallery Hint you can visualize this better if you pick a Artisteer4 0 122 Artisteer 123 Web Design Revolution glare with a light source on one side or the other of the image e g mostly on the left or mostly on the right ae Create a mirror reflection of the glare in vertical or horizontal directions This option is not available when No Glare is selected in Light Effect Flip gallery Texture Presets This option shows the options
174. tent icon separator and effects gradient of subitems The appearance and design of the Submenu Area is adjusted in a separate menu using the shape size shape radius fill fill transparency border color weight style and effects shadow options One of the most important design options for subitems is the way they are opened You can adjust the dynamics of subitems by opening Levels and selecting one of the following options One Level subitems are not displayed Expand with Reload clicking a parent item opens up a list with subitems and loads the parent item page Expand on Click clicking a parent item opens up a list with subitems but does not load the parent item page Expand on Hover hovering a parent item opens up a list with subitems but does not load the parent item page Popup on Hover a subitem list expands to the right of a parent item on hovering a parent item or All Open all subitems are shown in the menu A Coloring scheme helps highlight the difference between active passive and hovered subitems in the menu You can also adjust the design of the Active Passive and Hovered subitems by modifying the Fill fill gradient Border Color Transparency and Text text color underline options You can access the Options by clicking on the Custom Values icon Artisteer4 0 185 Artisteer Web Design Revolution 186 Submen
175. text links etc And even with a Vertical Menu you cannot define the menu items or their actions except to change which pages of your website should appear in the menu If you are using Artisteer net however you can define a menu in Artisteer net and use that menu as the content for the Vertical Menu you see on the desktop When you republish your website the content of your project is synchronized with the content on Artisteer net so whatever you defined for the Vertical Menu on the web will now appear on the desktop Artisteer4 0 101 Artisteer 102 Web Design Revolution For example if you add a Categories widget what you see in the Preview area in Artisteer is a sample list of categories that do not exist You cannot edit the block to change the links in the block If you export your project as an HTML website your web page is rendered with this sample list of links but since the referenced content does not exist this widget is not very useful for static HTML websites unless you edit the HTML after you export your website If however you were using Artisteer net you would instead see a list of categories created for your blog so the block would be very useful for navigating your website The Layout tab also contains two dialogs for extra customization These are Sheet Options within the Sheet Layout menu and Layout Options within the Columns menu You can access either of these by cli
176. th more and more reddish tint e Recolor Choose from options where the color weight is 100 but the saturation is different For example if the fill color is Red then the choices of the gallery are images where all the colors have been replaced by Red but the saturation amount of gray is different e Greyscale The color saturation is 0 All of color in the image has been replaced by gray i e the image now appears in gray with different levels of brightness The Background Image options such as Recolor and Blur can be also adjusted in the Background tab of the Header Options panel Background R Use this to adjust the percentage of color the Header fill color Header gt Fill Color will have when blended with the rest of the Header See color weight Color Weight for Texture options above for more information about color weight Use this to adjest the color saturation amount of gray in the color of the Header fill color Header gt Fill Color when it is blended with the rest of the Artisteer4 0 144 l Color Saturation Blur Transparency Blend Mode a Image Format and JPEG Quality Artisteer 145 Web Design Revolution Header See color saturation for Texture options above for more information about color saturation Set the blur radius ranging from 0 to 30 pixels The Blur effect averages all pixels within the specified radius a larger radius leads
177. the alignment with the Cell options Under the Row and Cell tabs if you select Row options or Cell options this will open dialogs which you give more specific customization For instance if you define a border the border applies to all sides of the Row but if you use these advanced Row options you can change the appearance of each side of the Row Normally you can also access these settings by selecting any of the More options e g More borders Artisteer4 0 62 Artisteer Web Design Revolution Row Options TE Margin _J Border Radius Transparency S Image or Texture c Texture Position E gt HTML Row Options Border Margin Spacing Border Radius Transparency Use this to individually adjust the edges of the Row top bottom left and right borders Use this to individually control the spacing around the edges of the Row Use this to change the horizontal and vertical spacing between Cells ina Row Use this to change the corners of the borders The higher the radius the more curved the corners will appear Use this to define how opaque the Row should be relative to the Sheet If the Row fill color is no fill this is the same as 100 transparent Remember Rows contain Cells so Cells are rendered Artisteer4 0 63 Artisteer Web Design Revolution Image or Texture Texture Position HTML Cell Options
178. tical Menu Source lim Home page menu item Show Home Item Home Item Caption Image Hosting Hosting Provider pages on your website Categories are arbitrary names you create and use to organize your posts Archive refers to the dated post archives Show Home Item determines if the caption should be shown Home ltem Caption specifies the caption of the menu item pointing to the home page You can choose a hosting provider for images Picasa Web Albums ImageShack Image Hosting or FTP server if you use another image hosting service WordPress Export Options s Show Home Item Normally when viewers visit your site the URL they use does not reference a specific page E g www mysite com The default page 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 front
179. tical Menu are similar to those of the Horizontal Menu Select the Custom Values Icon to enter the panel of advanced customization Menu Options for Vertical Menu ltem Texture Texture Position Specify the Height Distance and Radius values Adjust the Texture Texture position and Gradient Options see Backrouncd Options Gradient O Adjust the Border Width 0 5 px and Style solid dotted dashed double Beer groove ridge inset outset Seen Use the Shadow options Size Transparency Distance and Angle The adow Shadow options are active only when a shadow Is added amp Change the icon specify the Offset value distance between the image and the subitem text from 0 20 px and adjust the icon Fill color of the passive Icon active and hovered subitems Change a color scheme of the Subitems without leaving the Options panel Coloring Active Passive Hovered Adjust the background color the border color the transparency and text color of the Active passive and hovered subitems enable or disable the Underline option Artisteer4 0 184 Artisteer 185 Web Design Revolution D W w El J i U E few E i AA z E me Active 7 Passive Levels Submenu Subitem Coloring Zoa ea zi E Hovered submenu r The Ribbon bar options for Submenu are very similar to that for Items There are settings for adjusting the shape vertical offset height and distance con
180. tisteer 183 Web Design Revolution Position Gradient Specify the Gradient Contrast 100 100 Change the icon enable disable the use of the original icon size and specify the Offset value 0 20 px con i The Options for Block Content include Padding 0 50 px Fill Border Color Transparency and Border Width 0 10 px The Texture and Gradient options Content Texture include Blend Mode Transparency 0 fully opaque to 100 fully transparent Color Weight Color Saturation and Gradient Contrast 100 Gradient solid color to 100 H erR ive i Item Coloring ki 7 agi Hovered 7 Item F Menu Item options let you adjust the design of the menu item s shape shape distance height radius border border weight border style and content icon separator as well as to add visual effects texture gradient shadow and style the text font family size style Icons and separators add zest to your design while standard Fill Border and Text options are for adding finishing touches A Coloring scheme that helps highlight the difference between active passive and hovered items in the menu You can adjust the design of the Active Passive and Hovered items by modifying the Fill fill texture gradient Border Color Transparency and Text text color underline options Artisteer4 0 183 Artisteer 184 Web Design Revolution The Menu Item options of the Ver
181. tisteer4 0 7 Artisteer Web Design Revolution in Artisteer 4 0 Here is a list of Artisteer 4 0 features Please refer to Artisteer 4 0 Feature Overview for more information GUI Changes e No More Different Types of Templates e Panel Mode e Content Suggestions HTML5 and CSS3 Support New Header Designer with Visual Editing e Slide Show e New Selector Tool e Photo Collages e Texture Masks e Text Blocks Online Access to Flickr Images Google Web Fonts and Subsets New Image Options e Lightbox Style e Image Slide Show e More Source Options Footer Layout and Editing New Styling Options e Shadow Effect for Text e New Radius Options for Rows and Cells e Color options Black and White Colors and Transparency Slider e Magazine style Menus Mega menus e New Border Styles for Block Headers and Menu Bar Content Editing for All Templates Plug in SDK Artisteer4 0 8 Artisteer 9 Web Design Revolution Artisteer GUI The Artisteer interface consists of File Menu Quick Access Toolbar Ribbon Preview area and Pages Posts Panel Additional options can be displayed in Panel or Window Mode highlighted on the image below Pages Posts File Menu Quick Access Ribbon Preview Panel ol Toolbar d f p Ne Li Fite ial A Uncgurs Medani Expode on hirri Colan A Far Lipout Content Bethgrownd Sheet Reade 4 tas Bisig Vertical Aher
182. to select a color transparency value border color and style and effects such as texture and or gradient radius and shadow for the menu background You can choose one of the suggested textures or insert a custom texture You may access the advanced settings in the Menu Options panel by selecting More Radiuses More Borders or clicking Gradient Shadow Options or by selecting the Custom Values icon Texture options are also located within the Texture and Texture Position tabs of the Menu Options dialog Artisteer4 0 157 Artisteer 158 Web Design Revolution Within the Item area of the Menu group you can set the shape border and layout of menu items add effects such as texture and gradient and adjust the style of the menu item text Artisteer supports three most popular Web 2 0 menu item shapes classic rectangular with separators tabbed and buttons The size of menu items can be adjusted by selecting the appropriate icon in the list The menu area size changes depending on the size of menu items You can also control the distance between the items select a separator set a margin value and align the menu item text Item gt Layout Besides you can apply a Google Web font theme font and one of the web safe fonts for the menu item text Item gt Font Options gt Font Family gt Google Web Fonts The style parameters of the active passive and hovered menu items can be configured in the appropriate list within the Me
183. tur 4 rs sit i pn suls All Rows mauns vtae et scolonsque lorem iacuks sed The gridlines are not part of your webpages they only appear in Artisteer The gridlines are not the same as borders though sometimes it can be difficult to tell the difference sometimes so you should turn them off if you plan to add borders Show Gridlines is not the same as View Gridlines for a Table element Defining the content layout is not the same as adding a Table though visually it can be difficult to tell the difference The content layout is the physical division of your Content area In any given Cell you can also add a Table and visually it may appear as if you are refining the content layout but this is not the case The Table is part of the content you add to the content cell just like text images etc A Table has its own dimensions It can appear within a content Cell but it is not related in any way to the style options you can define for the content Cell such as defining the padding within the Cell Like other design elements like text you define the style i e the look of the Table using the Content tab When you add a Table to your content with the Edit tab the table will appear with the table style you defined e g red border but this is independent from your content layout When you select one of the content styling options you are defining how the content Rows and Cells appear regardless of th
184. u Options Apply one of the appropriate Subitem display modes One Level subitems are not displayed Expand with Reload clicking a parent item opens up a list with subitems and loads the parent item page Expand on Click clicking a parent item opens up a list with subitems but does not load the parent item page Expand on Hover hovering a parent item opens up a list with Levels subitems but does not load the parent item page Popup on Hover a subitem list expands to the right of a parent item on hovering a parent item or All Open all subitems are shown in the menu Er Submenu Area Shadow Subitem Gradient Adjust the Size 0 15 px Border Radius Fill and Transparency options of the Submenu Area Use the Shadow options Size Transparency Distance and Angle The Shadow options are active only when a shadow is added Specify the value of the Vertical Offseteight height of the submenu from 16 50 px Distance distance between subitems from 0 50 px Radius and Border Width Adjust the Gradient Contrast The Gradient options are active only when a gradient is added JIL Specify the Width and Color of the Separator Separator amp Change the icon specify the Offset value distance between the image and the subitem text from 0 20 px and adjust the icon Fill color of the passive Icon active and hovered subitems En Change a color scheme of the Subitems wit
185. u cannot edit the menu items directly in Artisteer unless you enable the Include Content Option lf the menu source is pages typically the Home item links to the frontpage of your site You dont create or edit this in Artisteer By convention the first item in the menu is the Home item You can define the caption for this You can optionally decide to omit the option entirely which means you can t navigate to the frontpage from the menu Both menus have pages as the default menu source but typically the vertical menu has a different set of navigation links This is all done by convention You can always choose to change the menus entirely by creating custom menus in the backend The important thing is that you create the style for the menu in Artisteer and the content in the backend Artisteer4 0 18 Artisteer Web Design Revolution Page Tags Option Z Description g r Keywords Custom Meta Tags Show in Menu Option Horizontal Menu Vertical Menu 19 Description Give a short description of the created page Your description becomes part of the meta tag description in the HIML code for this page lt meta name description content this is my separator page gt This is important to SEO Your keywords become part of the meta tag keywords in the HTML code for this page lt meta name keywords content sepkeyword gt Use this text box to a
186. undo a selection that has been saved That is you can t say remove this style rule for the Row and return the Row back to what it looked like before You have to change the settings for the Row e g remove the border or reselect a style e g reselect the style with borders again to reset the Row and Cell options Row Fill This is the color you want to use to fill in the background of the Row This option should be defined after selecting a content style since any time you select a style this may change the Fill color By default your Rows and Cells have no Fill color no fill which is the same as 100 transparent If you select a content style with highlighted Cells the Row fill color is set to no fill un highlighted Artisteer4 0 59 Artisteer Web Design Revolution SA Texture 0 Border e Radius JIL Separator 4 Insert Row Before Insert Row After ak Delete Columns 60 Cells are set to no fill and highlighted Cells are set to the Highlight Color which is defined in the All Pages options Note though Rows contain Cells and so Cells are rendered last Unless you make the Cell transparent you may not see the Row where they overlap Use this to add an image or texture to the Row background The way the texture appears depends on the color and transparency against the Sheet underneath Use this to select the thickness style and color of th
187. ve the desired result Sheet Options px rs E Sheet Layout Aa Fill and Transparency O Border Shadow presets 9 P aur jx LH Transparency 100 E Distance o px ange 45 Layout parameters include the width of the sheet and its borders the top margin and top outline the top round corners padding within the sheet and the corner radius values curved corners If you use a fluid Sheet width there are additional settings Minimum Width and Maximum Width You can set custom transparency and color values for the sheet background within the Fill and Transparency options Border parameters include width px style solid dotted etc color and transparency values Shadow parameters control the size angle and opacity of the shadow as well as its distance from the sheet borders Enter the values or drag the sliders to the left or right to decrease or increase the option values Artisteer4 0 129 Artisteer _ 130 Web Design Revolution Layout m Set the Sheet width in pixels or a percent of the screen width Supported values 200px or 20 the minimum width 1500px or 100 the wu ein maximum sheet width m Use this to set the minimum width that a fluid sheet can be resized Supported values 300 800 px Minimum Width A fluid sheet width maintains a certain percentage of the browser HUE Sea wain Caly window s width When you resize the window the sheet is resized to
188. 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 Select pages in menu x Fages v EJ New Page v EJ New Page 2 WYSIWYG Editing What You See Is What You Get WYSIWYG Editing is a simple and effective way to add new data to a website Click the highlighted text area delete the sample text and then add paste the new content Artisteer4 0 13 Artisteer 14 Web Design Revolution The website Headline Slogan Page Title Articles Posts Blocks and Footer text may be changed in Artisteer Horizontal and Vertical Menu item names may be altered in the Pages Posts Panel The Ribbon bar is divided into Tabs The Tabs contain options for designing the whole template Home Edit Colors and Fonts Layout or its parts Background Sheet Header Menu Content Blocks Vertical Menu Controls Footer Please refer to the appropriate section of this manual for more information about the options available in each tab Go O Fie gt undo oo Export GS Untitled Artisteer 4 Standard Edition Home Edit Colors amp Fonts Layout Content Background Sheet Header Menu Blocks Vertical Menu Controls Footer a Updates ET Le Suggest Mode E Suggest Colors sal Suggest Background ivf r de 2 New Blog Post Q r gt ae WE Ay Suggest Fonts ET Suggest Header New Block aii Suggest Design i Styles New Options Export ze
189. vides a choice of colors for the background You can select a color theme pick a color from the custom palette or add your own custom color with More Colors You can add transparency to the header by selecting a value from the list or adjusting the transparency in the Transparency options The transparency rate ranges from 0 to 100 The Effects option is used to adjust the basic design Note the radius and the shadow if specified are shared between the Sheet Header and Menu regardless of their position and orientation i e you cannot specify one type of rounded corners for the Sheet and a different type of corners for the Header Similarly if the Sheet has no Shadow this option is disabled In most cases changing the setting for one e g Header also changes it for the others e g Sheet however there may be situations where an option Is disabled for one but not the other e g if the Header and Menu are both inside the sheet but the Header is sandwiched between the Menu and the top of the Sheet the radius is disabled for Header but not Sheet Radius Set the shape of the corners of the Radius corner radius in pixels Artisteer4 0 135 Artisteer 136 Web Design Revolution Shadow Change the shadow effect for the Header Sheet and Menu This option is disabled if the Sheet does not have a shadow Texture Select a texture or insert a texture from a file See Background Texture options above for mor
190. want by copying amp pasting or typing the new content The content imported from Artisteer is just added to the previous content created with a CMS and does not replace the latter So you will not need to recover or restore the previous content Content cannot be imported from CMS products into Artisteer Content is exported when Include Content is turned on Export x Template Joomla Template hi See All Version en h Positions position 1 Pp How to Install and Use Joomla Template File Name Path 2 home ocalhost www joomla25 templates j a ZIP archive Indude ARTX Project Help Export Cancel l Options Artisteer4 0 199 Artisteer 200 Web Design Revolution Joomla To export the template 1 In Artisteer navigate File Export Joomla Template 2 Inthe Export window select Joomla 2 5 specify the template name and path and check Zip Archive and Include Content 3 Go to Options and check if you need to adjust some of them click Export To install the template in Joomla 2 5 4 Go to Extensions Extension Manager and upload the template archive 5 Navigate Template Manager find the template in the list and put a star next to it to make it the default template for more information about installing and using Joomla emplates see the Artisteer wiki page Now the template is installed a
191. with the texture color The color saturation determines how saturated the fill color should be when blended i e how much gray is in the color 0 means all of the color has been replaced 100 percent means that all of the gray has been removed For example suppose your color background is Red you set the color weight to 100 and you choose the balloons texture from the New Color Holiday group in the texture gallery When you increase the color saturation the Red color will become more saturated i e the balloons will appear more red while reducing the color saturation will gradually remove the color until the color is gray i e the balloons are gray The final appearance depends on the color saturation and luminosity of the colors in the original image Hint set the color weight to 100 This setting only affects the fill color when it is blended with the image If the color weight is 0 then no Red is added to the image therefore how saturated the Red fill color is doesn t matter This is only available for textures that have color Most of the textures in the texture gallery have no color i e the textures that are shaded in blue These textures automatically take on the color of the background If you select one of non color textures the Color Saturation option is disabled Artisteer4 0 125 Artisteer 126 Web Design Revolution Te
192. xture Position H Reduce or enlarge the image texture on the background When the image is set to more than 100 the image is stretched beyond its original size This option is not available when No Texture is selected in Image or Texture gallery Use this to set how your custom background texture or image will be repeated Use this if your custom texture or image is not the same size TEE REDO as the background Fill The background image will be repeated vertically and horizontally until it fills the entire background area Horizontally Default The background image will be repeated horizontally until it fills the width of the background area Vertically The background image will be repeated vertically until it fills the length of the background area No repeat The background image will be displayed only once This option is not available when No Texture is selected in the Image or Texture gallery Use this to set the starting position of your custom background texture or image This option is not available when No Texture is selected in TOSHGN Image or Texture gallery oe Create a mirror reflection of the image texture in vertical or horizontal directions This option is not available when No Texture is selected in Alle Image or Texture gallery de Rotate the image texture 90 degrees clockwise CW or E counterclockwise CCW This option is not available when No Textur
193. y be different the license key is the same for both Mac and PC To activate Artisteer select File gt 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 all of the features of Artisteer License Key 114114 4111 4111 1111 1111 e Installation code Auto activation through the Internet Activation Key Obtain Activation key at htto wiaw artisteer com p a5 O Han If you work off line use the following link to obtain an activation key from any other computer connected to the web hito www artisteer com p a2 In this case uncheck the Auto activation through the internet option and enter the activation key you obtained from the other computer Artisteer4 0 31 Artisteer 32 Web Design Revolution Se ee a A m Se Fs Le E 4 a a f E N N G Tw h A w BI E w i EE gt gm m Pt I l 1 p pma ea h O j k nm fj x d u L ae i ea A S cau Creating a template in Artisteer is as easy as 1 2 3 There are two parts to a template created by Artisteer the Design and Content The Design describes how your web pages will look It inc
194. yed automatically and no to enable another play mode Auto play select yes to loop the Flash or no to let it play once Repeat H Select one of three modes Transparent Opaque or Window In Transparent mode the background of the HTML page shows through all transparent Mode portions of the movie This option can slow animation performance In Artisteer4 0 149 i Transparency PTa Fai Speed Quality FS Variables Artisteer 150 Web Design Revolution Opaque mode the movie hides everything on the page behind it In Window mode the movie plays in its own rectangular window on a web page Specify the transparency of the Flash movie from 0 to 100 Specify the speed of the Flash movie with a slider from 50 to 150 select the quality type best high medium low Enter custom parameters to modify how the Flash file is played E g var 1 value1 var 2 value 2 Artisteer4 0 150 Artisteer 151 Web Design Revolution sa j j fi C I eae b ee C IN CNC FAZA VAJ SIIOeCSNOW Slide Show Headers are popular and attractive You can create a slideshow in your Header or Content in Artisteer using the Slideshow options Now you do not need to master Flash to create a live header and your visitors do not need to download a flash player to view your website To create a slide show right click the header area and select New Slide You can also use the New Slide menu on the He
195. yles include padding Also some of the thumbnails depict Separators For the purposes of this manual we don t make any distinction between separators and Borders For example if you want borders around your Cells you select one of the thumbnail images that include borders Artisteer4 0 47 Artisteer 48 Web Design Revolution Basic oan Ee Current Row b B All Pages gt M Show Gridlines Choosing this option however doesn t define how the border appears Use the All Pages options to decide how your borders should look Note for this style the borders are around the Cells not the Rows If you look at your Row options no border is defined If you look at each Cell the options have been changed automatically to include a border Here are some examples of what the thumbnails mean Borders and Margin No Spacing Radius or No Borders Margins Radius Highlighting Spacing or Highlighting Borders Margin Spacing and Radius No Highlighting a Current Row BP All Pages gt Show Gridlines Borders and Highlighting on alternate Cells Borders and Highlighting No Margin Spacing or Radius No Margin Spacing or Radius Selecting one of the content styles doesn t affect the style settings All Pages It only defines which set of attributes are

Artisteer User Manual

Contents

Download Pdf Manuals

Related Search

Related Contents