Netobjects Fusion 2013 Download

Posted on by admin



  • 2CSS Basics
  • 3Using CSS in Style View
  • 4Working in the Selectors View
  • 5Working in the CSS Code View

NetObjects Fusion Essentials, the newest member of the NetObjects family. Fusion Essentials is a free web site design software that offers many core features found in Fusion 10. Free downlaod netobjects fusion 2015 download software at UpdateStar - Plain and simple, NetObjects Fusion is different. Most HTML editors provide you a design-preview interface, but without some web knowledge, you end up lost and frustrated. NetObjects Fusion helps companies advertise and share information, enhance their company’s image, and better compete against other businesses. As the originator of the intuitive, site-wide approach to building websites, NetObjects Fusion lets users map out an entire site in minutes while automatically creating and updating navigation and links. Netobjects: download Netobjects related software. NetObjects Web Calendar 1.0 Create great looking calendars for your website with NetObjects Web Calendar. Easy-to-use interface and familiar calendar application tools, you can create your first calendar in minutes. Easily add events. Display them by week, month or year. Fusion 2013 Download link I purchased from NetObjects, Fusion 13 some time ago, on the email than was sent me, was a link for me to download the s'ware, install it and then key in my licence number which ends -39446.

Working with CSS and SiteStyles

In NetObjects Fusion, CSS is an integral part of advancing the design elements of SiteStyles. Using the new features such as CSS Panels, Selectors, and Code View, NetObjects Fusion offers Web designers the ability to create amazing results with easy to use tools that promote learning CSS design techniques in a learn as you grow manner. Now it is easy to modify and update the entire website or a selected page with just a few clicks.The next section offers an introduction into the world of CSS and how you can utilize the power of CSS within NetObjects Fusion.

CSS Basics

Cascading Style Sheets (CSS) offer Web developers a powerful tool that helps simplify the complex task of maintaining websites, and provides sophisticated layout and design features for web pages without the need for plug-ins, long download times, and expensive tools.

Cascading Style Sheets provide a means for Web authors to separate the appearance of Web pages from the content of Web pages, so that the look of HTML documents is organized in an efficient manner.

Among the benefits of using CSS is that the design and development time are reduced, as well as the time spent on updating and maintaining the site is reduced. Making a change to one rule could result in thousands of pages changing their look. Traditional methods would require every page to be edited, but using CSS it is much easier. In this way, you can improve the management of large, sophisticated sites. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.

Using CSS, you can define a style for each HTML element and apply it to one or more Web pages all at once. To make a global change, all that is required is to change the specific CSS rule and elements using this rule will be updated throughout the website automatically.

There are multiple ways possible for information to be specified in a style sheet. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. More than one external style sheet can be referenced inside a single HTML document. Multiple styles will cascade into one sheet according to the following rules, where the last item on the list has the highest priority:

  1. Browser default, set by the user.
  2. External style sheet, which is a separate document containing CSS rules that will be relevant to elements across the website.
  3. Internal style sheet, which is contained inside the <head> tag of a page of your website. This type of style sheets should be used if you have a style that that is relevant only in a page.
  4. Inline style, which is located inside a HTML element. This inline style has the highest priority, meaning that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser's a default value.

Explaining CSS Syntax

CSS stylesheets contain rules that describe how document elements should be displayed. A rule in CSS consists of two parts:

  • Selector, which can be applied in three different ways:
    • HTML elements, such as <P> tags, <H1> tags, etc.
    • elements with a specific CLASS, such as an element with the class 'content' (<P>)
    • elements with a specific ID, such as an element with the ID 'warning1' (<P>)
  • Declaration, which contains sequences of properties followed by values.

In this example, body is the selector, while everything within the brackets {color:black} is the declaration.If the value is expressed in multiple words, it is necessary to place quotes around the value:

If you wish to specify more than one property, you must separate each property with a semicolon.

To make the style definitions more clear, you can describe each property on a separate line, like this:

Working with the Class Selector

With Cascading Style Sheets you can create selectors that are associated with a specific type or class of element. Class selectors are used to give specific parts of a page a specific appearance.In your HTML page, to create a paragraph of class 'question', you create a paragraph as usual, using the <p></p> tags. In addition, you add the class attribute to the opening tag as you would add any other attribute:

<p>

Any paragraphs on the page that contain the class selector with an attribute of 'question' will be used by either of these selectors: .question or p.question.There are two types of class selectors:

  • Solitary Class Selectors, which select any kind of element of a particular class (will select both paragraphs and tables of that class, as well as any other element with the same class.)

This selector selects any element on a page with a class of 'question'.

  • Class Selectors, which selects only a specific type of element of that class - for instance, it will select only paragraphs of that class, not tables or any other element of that class. The form of this type of selector is element.class-name, which is the name of the element, followed by a dot, followed by the name of the class.

Paragraph specific class selectors can be created as following:

This selector only selects paragraphs with a class of 'question'. It does not select any other kind of element with a class of 'question', nor does it select any paragraphs other than those of class 'question'.

A class name should consist only of alphanumeric characters and hyphens. Class names cannot include underscores and other characters or spaces. A class cannot begin with a numeral.

Inserting a Style Sheet

When a browser reads a style sheet, it will format the document according to that style sheet. There are three ways of inserting a style sheet: external, internal, and inline.

  1. External Style Sheet

Typically, an external style sheet is used when the same style is applied to multiple pages. In order to change the style for all these pages, you only need to change the CSS syntax in the external style sheet. To link to the style sheet, each page should contain the <link> tag included in the <head> section of the Web page. For example:

<head>
<link rel='stylesheet' type='text/css' href='myexternalstyle.css' />
</head>

The browser will read the style definitions from the file myexternalstyle.css, and apply the formatting to the pages linked to it accordingly.An external style sheet can be edited in any text editor. The file needs to contain CSS definitions only. HTML tags should not be included in the style sheet. Once you have created the style sheet with your definitions, save the file with the .css extension. Below is an example of the syntax contained in an external style sheet:

hr {color:red}
p {margin-left:10px}body {background-color:yellow)}
  1. Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. Internal styles will be defined in the <head> section of the page by using the <style> tag.

<head>
<style type='text/css'>
hr {color:red}
p {margin-left:10px}
body {background-color:yellow)}
</style></head>

The browser will now read the style definitions and display the contents of the Web pages, based on the formatting options listed in the style sheet.

  1. Inline Styles

This method should be used when a style is to be applied to a single occurrence of an element in the Web page. To use inline styles, you use the style attribute within the tag. The style attribute can contain any CSS property. The example below shows the syntax to change the color and the left margin of a paragraph:

<pstyle='color: red; margin-left: 10px'>This paragraph is formatted using inline styles</p>

Understanding Inheritance in Cascading Style Sheets

In CSS there is an order of precedence that is followed when a CSS style sheet is applied. Take for example when both an external style sheet is referenced on a Web page that also includes style definitions internally on the Web page.As we learned from the Basics of CSS section, the external style sheet will be applied to any style definitions it finds until it meets an internal style definition of the same selector. From the example below, you can see that the h2 selector will apply the style definition from the external style sheet and then apply the internal style sheet definition when a matching property is found.

External style sheet

h2
{
color:blue;
text-align:left;
font-size:10pt}
Internal style sheet:
h2
{
text-align:right;
font-size:20pt
}
The following properties will be applied to the h2 selector:
color:red;
text-align:right;
font-size:20pt

Notice the color is inherited from the external style sheet, and the text-alignment and the font-size are used from the internal style sheet.

Using CSS in Style View

CSS is now easier than ever to work with in NetObjects Fusion's Style View.

  • By combining the power of CSS with the visual environment of NetObjects Fusion , you can change the look of your Site with just a few clicks of your mouse.
  • By adding new CSS files to your site structure and specifying where they will be applied and the order in which they will be imported, you can master in-depth styling of your website. See Adding a CSS File.
  • NetObjects Fusion also allows you to interactively add new CSS rules to your SiteStyles so that you can use advanced CSS syntax to add flexibility, richness and accessibility to your SiteStyles. See Adding a CSS rule.
  • Using the new Selectors View and the CSS panels from within the Style View, you can visualize, preview, add and modify the CSS rules of your SiteStyle. See Working in the Selectors View.
  • To edit directly the CSS code, make use of the new CSS Code View from within the Style View, which is available for experienced CSS users who prefer having full control of their CSS code. See Working in the CSS Code View.

Adding a CSS File

In NetObjects Fusion you can add your own CSS file and specify if the Stylesheet should be applied throughout the entire website, in a specific MasterBorder, or even a specific page.You import CSS files and then use the CSS rules contained in them by either overwriting existing HTML tags or by manually applying CSS classes (listed under the Custom Styles dialog in the Properties inspector) to objects that support CSS.

To add a CSS file to the Styles tree:

  1. Right-click on the Active Styles folder in the Styles Tree.
  2. Select Add CSS file from the context menu.

The Open dialog will appear.

  1. Browse for the CSS file you want to add. Click Open.
  2. The CSS Scope dialog will open. Here you will have to choose where the CSS file should be applied in this site.

The CSS Scope dialog displays the following options:

Netobjects Fusion 2015 Trial

  • Site-wide. If you select this option, when you publish the site, each page of the site will include the added CSS file.
  • MasterBorder specific. If you select this option, when you publish the site, all the pages that contain the selected MasterBorders will include the added CSS file.

To select the MasterBorder:

  1. Click the Select button. The Select MasterBorder dialog will appear.
  2. Choose one or more of the existing MasterBorders on the list.
  3. Click OK.

The CSS file will be applied to the selected MasterBorders.

Netobjects Fusion 2013 Download
  • Page Specific. If you select this option, when you publish the site, only the selected pages will include the added CSS file.

To select the pages:

  1. Click the Select button. The SiteStructure - Select Pages dialog will appear.
  2. Select one or more pages from the SiteStructure.
  3. Click OK.

The newly added CSS file will appear in the Active SiteStyles section on the Styles tree. All the CSS rules contained by that CSS file will become visible in the Styles tree.The content of the CSS file will appear in the Selectors and CSS Code View. On the Styles tree, you can move a CSS rule from one CSS file to another by dragging and dropping it to its destination CSS file.Clicking on a rule from the Styles Tree opens the CSS Code View for editing.

Removing a CSS file

CSS files that have been added to the Styles Tree can also be removed.To remove an external CSS file from the Styles Tree:

  1. In the Styles Tree, right-click on the CSS file name. A context menu will appear, containing three commands: Add CSS rule..., Delete CSS file, and Include CSS file to....
  2. Select Delete CSS file.

The CSS file will be removed from the Styles Tree.

Using the CSS Library

NetObjects Fusion offers a new extensive CSS Library that contains a collection of external Cascading Style Sheets that can be used for implementing a variety of styling solutions with your projects.The folders from within the CSS Lib tree contain a variety of Cascading Style Sheets that can be used to incorporate typographical changes to your website projects fast.

To add a CSS file from the CSS Lib to your Active SiteStyles:

  1. Expand the CSS Lib folder on the Styles Tree and then expand the CSS style folder of choice. For example, expand the City Blue style folder and select the forms.css Style Sheet.
  2. The Styles Tree will now display the pre-defined CSS rules contained in the forms.css Style Sheet.
  3. Drag forms.css and place it on the Active SiteStyles folder.
  4. The CSS Scope dialog will appear. Here you will select the scope of the CSS file as it is applied to your project.

The CSS Scope dialog displays the following options:

  • Site-wide. If you select this option, when you publish the site, each page of the site will include the added CSS file.
  • MasterBorder specific. If you select this option, when you publish the site, all the pages that contain the selected MasterBorders will include the added CSS file.
  • Page Specific. If you select this option a dialog will appear that will allow you to select which pages the CSS file will be applied to.

Applying a Style Sheet to Specific MasterBorders

  1. Click the Select button. The Select MasterBorder dialog will appear.
  2. Choose one or more of the existing MasterBorders on the list.
  3. Click OK.

The CSS file will be applied to the selected MasterBorders.

Applying a Style Sheet to Specific Pages

  1. Click the Select button. The SiteStructure - Select Pages dialog will appear.
  2. Select one or more pages from the SiteStructure.
  3. Click OK.

The newly added CSS file will appear in the Active SiteStyles section on the Styles Tree and will be applied to the specific pages you selected.

Adding a CSS Rule

CSS defines formatting in a particular class or redefines the formatting for a particular HTML tag (p, body, h1, etc.).

You can create new CSS rules to automate the formatting of HTML tags or a text object identified by a class attribute. When adding a new CSS rule, you will be prompted to choose whether to define a new custom style or to redefine an existing HTML tag. By selecting to create a new custom style, the CSS rule will appear on the Custom Style drop-down list in the Properties panel in Page View and can be applied to any object in Page View. The new CSS rule will also become visible on the Selectors column in the Selectors View, and its content will be displayed in the CSS Code View (with the exception of site-specific CSS rules).

You can add a new CSS rule:

  • to the Active SiteStyle in Styles Tree (either in Page View, or in Style View). The CSS rule will be available site-wide regardless of the applied style (NetObjects Fusion will generate the Site.css file which contains all the CSS rules).
  • to a SiteStyle. The CSS rule will be available for that SiteStyle. The rule will be included in the Styles.css file for that SiteStyle.
  • to a CSS file. The CSS rule will be available only in that CSS file.

To add a CSS rule to the Active SiteStyle:

  1. Right-click on the Active SiteStyles folder in the Style Tree.
  2. Select the Add CSS Rule option from the context menu. The Add CSS Rule dialog will appear.
  3. From the Type drop-down box, select one of the two options:
    • To create a custom style that can be applied as a class attribute to an object, select Named Style and enter the name for the style in the Name field.
    • To redefine the default formatting of an existing HTML tag, select Redefine HTML Tags and, in the Name field, select an HTML tag from drop-down list.
  1. For advanced definition of formatting, click the Builder button and use the options from the drop-down menu:
    • ID (#), preceded by a hash mark (#), then the ID name and the declaration. With the ID selector, you identify an element to be a unique instance in a document. You assign this element a name; it can be applied only once in a document. The CSS rule with the ID selector can only apply to one single element.
    • Class (.), preceded by a period, then the class name followed by the declaration. You can apply this class to all elements multiple times within the same document or page. With classes you can redefine HTML tags.
    • Pseudo-classes, which offer the ability to change the style of a page's links, based on whether the links have been visited or how the visitor is interacting with the page. Available options are:
      • :first-child. Adds style to an element that is the first child of another element.
      • :link. Adds style to an unvisited link.
      • :visited. Adds style to a visited link.
      • :hover. Adds style to an element when you move the mouse over it.
      • :active. Adds style to an activated element.
      • :focus. Adds style to an element while the element has focus.
      • :lang. Allows the author to specify a language to use in a specified element.
    • Pseudo-element, which allow you to set a style on a subpart of an element, (for example, the first line of a paragraph). Regardless of how the visitor resizes the window, the first line will be styled. Available options are:
      • :first-line. Adds special style to the first line of a text.
      • :first-letter. Adds special style to the first letter of a text.
      • :before. Inserts content before an element.
      • :after. Inserts content after an element.
    • New group (,), creating a new group of selectors, useful for ensuring that any sets of elements that are supposed to share the same properties, in fact do so. This minimizes the possibility of assigning the wrong properties or values. Any number of identical definitions may be grouped by using a comma to separate them.
    • Universal Tag Selector (*), which selects any tag or element type.
    • Descendant (space), giving a fine-tuned control over the appearance of a page. It can be used, for example, when a selected element is going to be contained by another element, and you may want it to have a particular appearance. It applies the style to any element which is contained within, or is a descendant of, the element x. It is a list of other selectors, each separated by a space.
    • Child (>), providing finer control over the selection of elements than the one provided by descendant selectors. Applies a style to any element that is a child of another element. It is formed by listing the parent, then the child element separated by a '>'.
    • Sibling (+), formed by listing the elements that must be adjacent in the order in which they must appear. Elements are separated by a '+'.
    • Tag Attribute ([name='value']), providing a more sophisticated version of the class and ID selectors. It applies a style to any element that has a specified attribute. It consists of two parts: a selector that identifies an element and a condition for the attributes of the element.
  2. Click OK.

The added CSS rule will be visible in the Selectors View and in CSS Code View.

The newly created CSS rule will now be available in the Selectors and CSS Code View. You can also edit the rule via the Manage Styles dialog or assign the rule to an object via the Custom Style combo-box of the object properties panel.

CSS Importing Order

When working with multiple style sheets you may find it necessary to define the order in which the style sheet is referenced.Generally, the import order for the CSS files in NetObjects Fusion is:

  1. Styles.css. The CSS Rules defined using the Add CSS Rule dialog from the Style selected in the Styles Tree and all the CSS Rules that NetObjects Fusion generates or uses for the NetObjects Fusion styles and style elements.
  2. Site.css. The CSS Rules defined using the Add CSS Rule dialog from the ActiveStyles volume in Styles Tree or using the Manage Styles dialog and specifying a Site-wide rule.
  3. Site-specific External CSS files.
  4. MasterBorder-specific External CSS files. The order through which these files are imported may be changed in the CSS Importing Order section on the MasterBorder Properties panel.
  5. Page-specific External CSS files. The order in which these files are imported may be changed in the CSS Importing Order section on the Layout Properties panel.

To change the order in which CSS files are imported:

  1. Select the CSS Importing Order button on the Layout or MasterBorder Properties panel.
  2. Select the CSS file.
  3. Use the up and down arrow buttons to change the import order. The CSS file from the first position on the files list will be imported first.

Removing a CSS Rule

You can remove existing CSS rules by either deleting their content in the CSS Code View, or using the Manage Styles dialog.To remove an existing CSS rule in CSS Code View:

  1. Switch to CSS Code View.
  2. Delete the syntax of the CSS rule you want to remove.

To remove an existing CSS rule from the Managements dialog:

Download
  1. In Style View, select Manage Styles from the Style menu.
  2. Select the CSS style that you want to remove.
  3. Click Delete.

Removing the CSS rule from Code View and the Manage Styles dialog will effectively remove the CSS rule from the Selectors View.

Working in the Selectors View

The Selectors View is a more advanced view in which to display and edit CSS rules, allowing you the capability to choose a selector and use the CSS panels to modify the CSS rule behind the scenes.

The CSS style sheet related to the selected item in the Style Tree will be displayed in the Selectors View. In this view, CSS selectors are displayed in a column on the left, while a preview of the selected selector is displayed on the right. Each element from the Selectors column may be edited using any of the three CSS panels (CSS Common, CSS Property Grid, and CSS Code).

The Selectors View displays all the CSS rules belonging to the selected style or CSS file in the Styles Tree. The CSS rules displayed in the Selectors View are:

  • CSS rules auto-generated by NetObjects Fusion. These auto-generated rules belong to the styles that are included with NetObjects Fusion . These CSS rules are easily recognized by the .nof selector name.
  • CSS rules added by the user. The preview will be simple text displayed using the chosen selector as an inline element for a block element.
  • Components predefined CSS rules. These CSS rules have predefined structures. For example, for the Forms Handler Component, the CSS selector begins with .nof_formsHandler_. Selecting a form element from the preview area, you can modify the associated CSS rule using the CSS Panels.

The Selectors view can contain predefined CSS rules to use with tablesand a few of the NetObjects Fusion components. These rules have hard-coded names and are used as default styles for the corresponding elements.

The Selectors View edits an entire style sheet at once. It can edit either an external style sheet that you wish to use, or a built-in Fusion style sheet.

If the CSS rule corresponding to the selected preview does not appear in the Selectors list, NetObjects Fusion will add it automatically when you start editing it.

Selecting parts of the preview will be available only for a part of components.

Before editing CSS rules, make sure that the Read-only attribute is removed. In the Selectors view, you can do that by right-clicking inside the view and un-checking the Read-only option from the context menu that appears. You can also remove the Read-only attribute in Graphic View. To do that, see Removing the Read-Only Setting.

To edit a CSS rule in the Selectors View:

  1. Choose a selector from the Selectors column.
  2. Review the selector in the Preview area.
  3. Using the CSS panels, edit the content of the CSS rule.

You cannot remove CSS rules in the Selectors View. To remove a CSS rule, go to CSS Code View and delete the CSS rule from there or remove the CSS rule from the Manage Styles dialog.

Using the CSS Panels in the Selectors View

In the Selectors View, the CSS panels allow you to modify the selectors individually.

By default, NetObjects Fusion displays the three CSS panels grouped together and docked on the right side. The CSS Common panel is visible; in order to display the other two panels, you will need to click their corresponding tabs on the group panel.

  • CSS Common. It is a visual environment where you can set CSS properties for the currently selected item.
  • CSS Property Sheet. It displays a property grid with CSS properties and values, more than the ones contained in the CSS Common panel.
  • CSS Code Editor. It is a code editor similar to the CSS Code View.

For an extensive description of the CSS Panels, see Using the CSS Panels.

To work more easily with the CSS Panels, group them together. To learn how to move and dock panels within your NetObjects Fusion workspace, see Optimizing your Workspace. To style an element using the CSS Panels:

  1. Select an element in the preview area. For example, the Normal(P) element.
  2. Change its properties in the CSS panel of your choice. For example, using the CSS Common Panel,change the Font color to red and set the Trebuchet MS for Font Family, 20px for Font Size, Italic, and Bold.

The preview will be updated with every change you make to the style of the selected element.

The changes in style will be visible in the CSS Property Sheet panel and in the CSS Code Editor panel as well.

Netobjects

Editing the Text Elements of SiteStyles in the Selectors View

The BODY selector displays the preview of text-related selectors. You can change the style of the selectors using the CSS Panels on the right: CSS Common, CSS Property Sheet and CSS Code.

To modify the style of text elements:

  1. In the preview area, click on one of the available text element previews. For example, click the preview of the Normal(P) selector. The properties of the Normal(P) selector will be available for change in the CSS panels.
  2. If the chosen selector (Normal(P)) has not been previously added to the Selectors column, NetObjects Fusion will add it now, because you have edited it. After you start editing it, you will see (Normal(P)) added to the Selectors column.
  3. Use the CSS panels to change the attributes of the chosen selector, in our case, (Normal(P)). See Using the CSS Panels in the Selectors View.

Styling Forms in the Selectors View

You can change the pre-defined style of forms within a SiteStyle in the Selectors View by choosing the form selector in the Selectors column and working with the form properties in the Preview area to give them the values you want.

To do that:

  1. Click the FORM selector listed in the Selectors column. A preview of it will appear in the preview area to the right.
  2. Now you can style the form elements using the CSS panels available next to the preview.

You can change, for example, the properties of all labels within the form. To do that:

2015
  1. In the preview area, select one of the form's text labels. The text label's properties will appear on the CSS panels.
  2. Using the CSS Common panel, change the font color to brown, Bold, using the Color palette.
  3. Since the label selector has not been previously part of the Selectors column, NetObjects Fusion will add it now.
  4. The label selector is now visible in the Selectors column and all text labels are brown, Bold in the preview area.

Working in the CSS Code View

The CSS Code View displays all the CSS rules of a selected style, element, or style sheet. You can display and modify entire style sheets, such as the Style.css file that accompanies the NetObjects Fusion style or custom stylesheets you have created and imported into Style View.

The CSS Code view displays the CSS definitions of the currently selected SiteStyle in the Style Tree.

In CSS Code View, you can add and edit CSS rules by directly typing in the code editor. Any modifications you make to the existing CSS rules of a SiteStyle will automatically update the Style.css file that accompanies the style.

In Code View you can edit and remove CSS rules that are pre-developed rules in NetObjects Fusion, or you can create custom created CSS rules.

Do not edit or delete pre-developed NetObjects Fusion CSS rules, if you are not familiar with CSS coding and the structure of SiteStyles within NetObjects Fusion. These actions cannot be undone.

The CSS Code view includes a context menu that appears on right-click inside the content of this view.

Using the CSS Code Context Menu

The context menu offers basic functionality and configuration for the CSS Code View. You can perform basic editing operations, and set display and coding options as well as importing and exporting CSS files directly from within the CSS Code View, using the context menu.

  • Editing options. Editing operations can be performed on the CSS file displayed: cut, copy and paste, clear, and find and replace code.
  • Inserting Font and Color. Inserting new CSS definitions or changing the existing ones is possible in a few simple steps.

Right-click inside the CSS Code View, and from the context menu, select Insert -> Font or Color.

If you select the Font option, the Font select window appears and you will be able to select the font attributes that will be inserted into the CSS definitions.

If you select the Color option, the Color picker panel appears, where you can select basic colors, that will be inserted into the CSS definition.

Formatting code content

You can format the existing CSS code in the CSS Code view using the Format command on the context menu. You have three options for formatting the code: Indent, Outdent, and Autoformat.

  1. Highlight a section of the code you would like to work with and right-click inside the CSS Code View window.
  2. From the context menu, select:
    • Format->Indent, to indent the code one tab space at a time. Repeat this action to obtain the desired format.
    • Format->Outdent, to outdent the code one tab space at a time. Repeat this action to obtain the desired format.
    • Format->Autoformat, to have the default format applied.

Working with CSS Code View Sections

You can perform several display actions on the code sections displayed in CSS Code view to help focus on the sections you are working on at a particular time. These options are available from the right-click context menu in CSS Code View by selecting Sections from the menu.

  1. Highlight a definition section and right-click inside the CSS Code View window.
  2. From the context menu, select Sections -> Toggle Outlining to expand the content of a definition.

To hide the content of a displayed section:

Netobjects Fusion 2015 Templates

  1. Highlight a definition section and right-click inside the CSS Code View window.
  2. Select Sections -> Toggle Outlining from the context menu.

The following additional options are available via the Sections menu:

  • Toggle All Outlining option to show/hide all the sections of the CSS file. To display the content, select the Toggle All Outlining option from the context menu.
  • Stop Outlining option, to automatically expand all the definition sections.
  • Collapse to Definitions to display only the definition names.

Display Options

You can customize the code editing options of CSS Code View to enable syntax checking, code hinting and the display of line numbers in the editor.The Show Line Numbers option, will display the line numbers on the left of the CSS Code View window.

To show line numbers:

  1. Right-click anywhere inside the content of the CSS Code view. The context menu will appear.
  2. Select Display -> Show Line Numbers.

Line numbers will now appear in the CSS Code view.

To hide the line numbers, uncheck the Display -> Show Line Numbers from the context menu.

The Show Code Hinting option allows you to complete writing or editing definitions in the following manner:

  • A tooltip hint containing the CSS definition will be displayed, when the mouse is positioned over that CSS rule.
  • A drop-down box will appear when editing CSS code, suggesting the common set of values for a CSS property.

Code hinting may be enabled or disabled. To show code hinting:

  1. Right-click anywhere inside the content of the CSS Code view. The context menu will appear.
  2. Select Display -> Show Code Hinting.
  3. Hover your mouse over an existing CSS definition and wait for a few seconds. The CSS rule definition will appear.

NetObjects Fusion also offers a way to eliminate errors when typing in code with the Check Syntax As You Type option. When selected, syntax errors will appear grayed inside the code definition, until corrected. While typing a CSS definition, the syntax will appear on a grayed background, until it is correct.

The editing option in the CSS Code View would not be complete without having the ability to change sections of your code to comments for informational purposes or testing new definitions. You can convert a selected piece of code to comment by following the next steps:

  1. Select the piece of code that you want to convert to comment.
  2. Right-click and select the Convert To Comment option from the context menu.

The selected line now appears as a comment.

Importing and Exporting a CSS File

To allow full flexibility for designers to create their CSS style sheets, NetObjects Fusion provides the ability to Import and Export style sheets directly from within CSS Code View using the commands on the right-click context menu.

Importing an external CSS file into the CSS Code editor will overwrite the Style.css of the active SiteStyle.

To import a CSS file in the CSS Code view:

  1. Select Import from the context menu. The Open dialog appears.
  2. Browse and select the CSS file that you need.

The imported CSS file will now display the definitions of the imported style sheet in the CSS Code View and represent the new Style.css file for the selected SiteStyle.

To export a CSS file from the CSS Code view:

  1. Select Export from the context menu. The Save As dialog appears.
  2. Type the name and select the destination location for the CSS file to be saved.

You can now work on the Style.css file with your favorite CSS Editor and import the style sheet back into NetObjects Fusion using the import instructions mentioned above.

Printing the CSS File

You can print the content of the CSS file displayed in the CSS Code View by selecting the corresponding Print command from the context menu.

Working with the Styles Tree in Page View

In NetObjects Fusion, applying SiteStyles by switching views is a thing of the past. The new Styles Tree now makes it possible to work with SiteStyles directly from Page View using the same flexible panels that can be manipulated for optimum workspace as needed. Using the Styles Tree in Page View offers you the ability to preview styles, create new styles, and even apply a new style to your website without taking your eye off your page design.

To switch to the Style View, click the Maximize button.

To create a new SiteStyle, see Creating a New SiteStyle.

The following additional actions are available on the Styles Tree right-click menu:

Using the right-click context menu allows you to select from a variety of actions to apply, delete and modify SiteStyles displayed in the Styles Tree.

Creating a New SiteStyle

It is possible to create a new SiteStyle in Page View using the right-click context menu.

To create a new SiteStyle in Page View:

  1. Right-click on Active SiteStyle. The context menu appears.
  2. Select the New Blank SiteStyle.
  3. Complete the editable text box with the new SiteStyle name.

The new SiteStyles appears in the Active SiteStyles list.

Retrieved from 'http://wiki.netobjects.com/index.php?title=Working_with_CSS_and_SiteStyles&oldid=3490'