Working with HTML Directly

From Documentation
Jump to: navigation, search

Working with HTML Directly

In addition to adding content, links, and DHTML actions to your site using NetObjects Fusion tools, you can work directly with the code to insert HTML and scripts. For example, you can add META tags to index your site for search engines, power content with JavaScript or Visual Basic routines, center pages throughout your site, or do whatever else you can when coding raw HTML. You can t edit the HTML that NetObjects Fusion automatically generates, but you can add your own code virtually anywhere.

Before working with HTML directly, you should be familiar with HTML tags and page structure. If you re not familiar with HTML, you can still complete the tasks in Examples of Page and AutoFrame HTML. You can also insert code within link tags and add your own actions. See Adding HTML to a Link and [customizing_default_actions.htm Customizing Default Actions] NetObjects Fusion doesn't verify HTML you add, so be sure to use valid syntax, enclosing scripts within <SCRIPT> and </SCRIPT> tags, and so on. Also, assets referenced in your HTML aren't managed in Assets view. If you move the HTML or its assets in your directory structure, edit paths in the HTML accordingly.

Editing the Page's HTML

You can add HTML or script to the HTML code that NetObjects Fusion generates in the HTML Inspector or in the Object HTML dialog. The HTML Inspector allows you to edit code for pages of a site, while on the HTML Object dialog; you edit code only for objects on a page.

If the HTML Inspector Panel is not visible in Page View, follow these steps to make it visible:

  1. In Page View, click on the View Menu.
  2. Select More Panels > HTML Code editor.

To edit code in the Object HTML dialog, click on the HTML button on the Properties Panel of the object you want to change the code to.

These two HTML Code Editors have identical options. Using one of these HTML editors, you can add or edit code of a page. You cannot delete code either on the HTML Inspector or on the Object HTML dialog.

You can edit the HTML code by using the following buttons on the HTML Inspector:

  • fileStart
  • headInner
  • bodyAttrs
  • bodyStart
  • bodyEnd
  • fileEnd

Or, you may add new HTML content using the following options:

  • Insert Field
  • Insert Data Source
  • Insert File
  • Save

Clicking a button positions the mouse slider in the correspondent line in the HTML Editor.

For more control over where you insert HTML code, use the NetObjects Fusion internal HTML editor in HTML Source view.

HTML Code view displays all of the page's HTML code in one place, which makes it easier to insert and edit code. You can also use the Find, Cut, Copy, and Paste commands in this view. Code that you can edit appears on a white background. You cannot edit code that appears on a gray background.

Working in HTML Code View

HTML Code view combines advanced HTML editing features, such as color syntax highlighting and language element insertion, with familiar word processing features, including drag and drop, text editing, and text search.

In NetObjects Fusion, HTML code is either protected or unprotected. Protected code is the HTML that NetObjects Fusion generates when you publish your site. You cannot edit this code. Unprotected code is the code you insert. You can edit unprotected HTML code in Code view.

In HTML Code view you can:

  • Copy protected blocks of generated HTML and paste them in unprotected areas, but you cannot modify or delete them.
  • Drag and drop unprotected blocks of HTML.
  • Go to a specific place in the code using the Find command.
  • Add code between objects inside the <BODY> and </BODY> tags.
  • Add HTML code at various insertion points outside the <BODY> and </BODY> tags.
  • Insert a field such as the date and time the site was created or last modified. NetObjects Fusion includes several fields you can use and you can also define your own.
  • Insert an HTML, script, or other text file in an unprotected area.
  • Undo, redo, copy, cut, and paste unprotected code.
  • View and add frames in a frameset.
  • Set and change many HTML options such as formatting, whether to include HTML comments in your published code, and so on. See Setting HTML Options .

In HTML Code view you cannot:

  • Edit code generated by NetObjects Fusion.
  • Insert code inside:
  • text generated by NetObjects Fusion.
  • the <BODY> tag.
  • Insert code across a range of pages.

Use the Inspector HTML, Link HTML, or Object HTML dialog to insert code in those areas. See Using the Page HTML Dialog, and Accessing an Object's HTML.

Exploring HTML Source View

To go to HTML Code view:

  1. In Page view, click the HTML Code tab.

HTML Code view appears.

Code view is divided into the Document Map pane on the right and the HTML Code Editor pane on the left. You can resize the panes by dragging the divider bar.

The Document Map displays the hierarchy of HTML components and language elements on the current page. It provides you with quick access to code for NetObjects Fusion objects.

  • To expand a tag's code in the Document Map, click the plus sign.
  • To collapse a tag's code, click the minus sign or right-click and choose Collapse Item from the shortcut menu. To collapse all tags, choose Collapse Map from the shortcut menu.
  • Double-click a tag to highlight the corresponding code in the HTML Code Editor.
  • To hide the Document Map, choose Hide from the shortcut menu. To restore the Document Map display, choose Document Map from the HTML Code Editor's shortcut menu.

The HTML Code Editor displays the source code for the current page.

  • Protected code is displayed on a gray background. You cannot edit this code.
  • Unprotected code is displayed on a white background. You can edit this code or add code anywhere there is a white background.
  • Language elements are differentiated by text color:
  • Blue: HTML tag
  • Green: HTML attribute names
  • Maroon: HTML attribute values
  • Black: Text that appears on the page
  • Gold: HTML and SCRIPT comments
  • Purple: SCRIPT tags
  • Teal: SCRIPT tags
  • Red: Unknown tags
  • SCRIPT keywords appear in bold text.
  • If the page contains frames, a tab for each frame appears at the bottom of the HTML Code Editor. See Working in the HTML Source Editor.
  • Blocks of code can be expanded and collapsed by clicking its plus or minus sign respectively.

Adding and Editing HTML and Scripts in HTML Code View

  1. In Page view, click the HTML Code tab.
  2. Edit the source code as necessary. You can:
    • Add or edit code anywhere there is a white background.
    • Copy blocks of protected code and paste them in unprotected areas.
    • Drag and drop unprotected blocks of code. See Moving Text Using Drag and Drop.
    • Insert the contents of an HTML, script, or other text file.
    • Insert fields such as the date and time.
  3. To save your edits, from the File menu, choose Save Site. If you switch to another view before saving your changes, the Save Files dialog appears.
  4. When you switch to another view, the Save Files dialog appears.
  5. Select each file and frame you want to save, and click Save. Click Cancel to undo all changes you made in HTML Source view since the last save.

Moving Text Using Drag and Drop

You cannot drag and drop protected code; you can only do this with your own code.

To select a block of text:

  1. Move the pointer into the selected block and hold down the mouse button. A rectangle appears under the tail of the pointer, indicating that the text can be moved.
  2. Without releasing the mouse button, move the pointer to the text block's new location, indicated by the blinking text insertion point.
  3. Release the mouse button to complete moving the text block.

Finding Text

  1. Go to Site view or Page view.
  2. From the Edit menu, choose Find.

The Find and Replace dialog appears.

  1. In the Find in field, select a scope for the search.

The options vary depending on the current view and the selected object.

  • Entire site to search all text in the site.
  • Selected pages to search text on the pages selected in Site view.
  • Current page to search text on the page currently displayed in Page view.
  1. In the Find what field, type the word, letters, or phrase you want to find.
  2. Select options to narrow the search.
  3. Click Find Next.

NetObjects Fusion searches for the text.

Inserting a File

You can insert the contents of an HTML, script, or other text file.

  1. Click in a white area in the HTML Source Editor.
  2. Choose Insert File from the Text menu.
  3. In the Open dialog, select a file to insert.
  4. Click Open.

Inserting a Field

You can insert fields that contain variable text such as the date and time the site was created or last modified, the site name and author, and so on. NetObjects Fusion includes several fields you can use; you can also define your own. To insert a field into your source code, choose Insert Field from the Text menu. See Creating and Editing Fields for details on inserting fields..

To use the author META tag, you must specify the name of the author in the Meta Tag tab of the Page Properties panel.

Using the Object HTML Dialog

In Page View, select the area of the page you want to access the Layout area to access the current page's HTML, or a MasterBorder to access the HTML of several pages. Then use the Page HTML dialog to add code between the <HEAD> tags, inside the <BODY> tag, or at the beginning of the <BODY>.

To find out how to add HTML or script to pages that use AutoFrames, see Accessing an AutoFrame's HTML.

  1. In Page Design view, click in an empty spot in the Layout area or MasterBorder. To select a ZeroMargins MasterBorder, click outside the page layout.
  2. Click the HTML button on the Properties panel.

The Page HTML dialog appears.

  1. Click a tab to indicate where in the HTML you want to add tags or script. Unlike the HTML Code view, this dialog only lets you enter your HTML or script code into one of six locations.
  • fileStart. Adds code before the <HTML> tag.
  • headInner. Adds code to the <HEAD> content, inserting it just before the </HEAD> tag.
  • bodyAttrs. Adds code just below the <BODY> tag.
  • bodyStart. Adds code inside the <BODY> tag, as in <BODYattribute=value>, where attribute=value is your code.
  • bodyEnd. Adds code just above the </BODY> tag.
  • fileEnd. Adds code after the </HTML> tag.

Giving you the following options:

  • Insert Field. Adds a field to the code. See Managing Variables.
  • Insert Data Source. Adds the content of a data source to the code.
  • Insert File. Adds content of an HTML, script, or other text file.
  • Save. Saves the changes you make to the code.
  1. Enter your code on the field.

You can click the Insert File button to insert contents of an HTML, script, or other text file. Click the Insert Field button to insert a field. See Managing Variables.

Note: To be able to insert files, fields or data sources to the HTML code, you must first specify the location of the new inserted code/ information by selecting one of the six locations. available: fileStart, headInner, bodyAttrs, bodyStart, bodyEnd, fileEnd.

  1. Click OK.

Preview the site to test your code, and view the source from your browser to see the resulting HTML. To edit your code, open the Page HTML dialog again, click the tab containing the code, and make your changes.

Accessing an AutoFrame's HTML

If your site uses AutoFrames, you can add HTML or script to the frameset file that gets generated, for example, to include a <NOFRAMES> tag for browsers that don t support frames or to modify the size or layout of your frames. You can also add code to any content page the frames display, for example, to center the frame's contents.

Working in the Page HTML Dialog

In Page view:

  • To access the frameset's HTML, click in the MasterBorder or AutoFrame, then click the HTML button on the General tab of the Properties panel. Or right-click in the MasterBorder or AutoFrame, and choose Master HTML from the context menu. The code is applied to the frameset instead of across a range of pages.
  • To add code to a frame's HTML page, click the AutoFrame label and then click the HTML button on the Frame Properties panel. Or right-click in the AutoFrame, and choose Frame HTML from the shortcut menu.

In each case, the Page HTML dialog appears, where you can add code between the <HEAD> tags, inside the <BODY> tag, or at the beginning of the <BODY>, as described in Editing the Page's HTML.

If you remove theAutoFrame from a MasterBorder, code added to the frame's content HTML is deleted.

Working in the HTML Code Editor

You can also add or edit a frameset in the HTML Code Editor. When a page contains frames, tabs appear at the top of the HTML Code Editor, one for each frame in the frameset, one for the page Layout (the Body frame), and one for the frameset.

The names of frames are assigned by default when you choose a frame on the AutoFrames tab of the MasterBorder Properties panel. The frame names display as framename_pagename.html for all frames that must change from page to page and as framename_masterbordername for all frames that do not change.

The default names are Left Frame, Right Frame, Top Frame, and Bottom Frame, depending on which type of frame you selected. Additionally, there are two other tabs: Body Frame and Frameset Page. The Body_Frame tab displays the code for the page Layout. The Frameset_Page tab specifies information about the frameset such as the names and attributes for each frame in the frameset and META tags for the page.

To edit a frame:

  1. Click the HTML Code tab in Page view.
  2. Click the tab with the name of the frame you want to edit. See Editing the Page's HTML.

Examples of Page and AutoFrame HTML

Even if you are not familiar with HTML, you can work through the following examples:

Indexing Pages for Search Engines

To give your content the best chance of being found and ranked by search engines, you can add META tag descriptions and keywords to your pages <HEAD> content. Site visitors don't see this information, but search engines require it to index your site.

Search engines index frameset files, so if your site uses AutoFrames or scripted frames, be sure to access Master HTML so your tags are added to the frameset file.

  1. In Page view, click in the Layout area of the page you want indexed, or in the MasterBorder or AutoFrame to index a set of pages.
  2. Click the HTML button on the General tab of the Properties panel.

The Page HTML dialog appears.

  1. Click the headInner button and enter META tags that describe your content. For example, type:
<METANAME="DESCRIPTION" CONTENT="Large selection of valuable, high quality antiques and collectibles for any budget.">

where the content is a one-sentence description containing the most important keywords site visitors might search for. Then type:

<METANAME="KEYWORDS" CONTENT="antiques, quality antiques, valuable antiques, low-cost antiques, collectibles, jewelry, furniture, novelties">

where the content lists all important keywords.

You can also enter META keywords in the Meta Tags tab of the Page Properties panel.

  1. Click OK.

For further information see Creating a Site Map for Search Engines.

To see the resulting HTML, publish the site and view the source in your browser. To test the tags you added, publish the site and search for keywords using the various search engines. Be patient, as it can take days or weeks for indexers to find your site.

Auto-Forwarding from a Transition Page

You can create a transition page that appears for a few seconds, for example, to display a product logo, and then forwards site visitors automatically to another page. You do this by inserting a META tag in the page's <HEAD>.

  1. In Page view, click in the Layout area of the transition page, and click the HTML button on the Layout Properties panel.

The Page HTML dialog appears.

  1. Click the head Inner button and type:
<METAHTTP-EQUIV="REFRESH" CONTENT="seconds; URL=http://server.domain.com/page.html">

where seconds is the number of seconds you want the transition page to appear, and http://server.domain.com/page.html is the URL of the page you want to link to.

  1. Click OK.

Preview the site to test the transition, and go to HTML Source view to see your code.

Accommodating Browsers that Don't Support Frames

Some older browsers don t support frames. To prevent site visitors using these browsers from being greeted with a blank page or error message when they access your site, add alternate content for them using the HTML <NOFRAMES> tag.

You add the <NOFRAMES> tag and your alternate content to the frameset file generated when you publish. Your content can include text, pictures, and links, using standard HTML tags.

  1. In Page view, right-click in the MasterBorder and choose Master HTML.

The Page HTML dialog appears.

  1. Click the bodyAttrs button and enter:
<NOFRAMES>
<H1>Thanks for visiting our site!</H1>
We re sorry you haven't had a chance to upgrade your browser yet and can't see our framed site. We think the frames make it easier to find what you want.
<P>If you want to obtain a more current browser, check out either Microsoft's <A HREF="http://www.microsoft.com">Internet Explorer</A> or Mozilla's <A HREF="http://www.mozilla.org/en-US/">Firefox</A> products!
</NOFRAMES>
  1. Click OK to close the dialog.

Creating a Default Target Frame

If you code your own frames, and one content page contains a lot of links that target the same frame, you can make that frame the default target. That way you don't have to script a target attribute for each link. The default target for the contents of a frame that displays navigational buttons, for example, might be a frame that displays the primary content those buttons point to. Unless you add a target attribute specifying differently, all links on that page display their contents in the default frame.

  1. In Page view, open the content page to be targeted.
  2. Click the HTML button on the Layout Properties panel.

The Page HTML dialog appears.

  1. Select the headInner button and enter:
<base target="framename">

where framename is the name of the frame as defined in the frameset file that you want to be the default target.

  1. Click OK to close the Page HTML dialog.

Create several links on the content page using the Link dialog. Don t add any HTML specifying a target frame. Preview the site and test the links. They should all display contents in the default target frame.

Accessing an Object's HTML

You can add HTML or script to pictures, media, a text box, or any other object, to modify or control that object. You can enclose the object in HTML tags, or add HTML or script inside the object's tag. You can add code before and after a text box's HTML as described here. To insert code inside a text box, see Inserting HTML in a Text Box.

  1. In Page view, select the object you want to add code to, and click the HTML button on the Properties panel. Or from the Object menu, choose HTML.

The Object HTML dialog appears.

  1. Click the tab to indicate where you want to insert HTML or script.
  • before. Adds code just before the object's tag, as in your_code <IMG SRC=>, if the object is a picture.
  • inside. Adds code inside the object's tag, as in <IMG SRC="Image.gif"attribute>, where attribute is your code. This tab appears only if you can add something inside the object's tag.
  • after. Adds code just after the object's tag; for example, to insert a closing HTML tag for any opening tag inserted before the object.
  1. Enter your code on the tab.

You can click the Insert File button to insert contents of an HTML, script, or other text file. Click the Insert Field button to insert a field. See Managing Variables.

  1. Click OK.

The object is marked with an HTML icon.

Preview the site to test your code, and view the source from your browser to see the resulting HTML. To edit the code, open the Object HTML dialog again, click the tab containing your code, and make changes.

Displaying a Message on Mouse Click

You can display a message when site visitors click an image or text link. One way to do this is by creating a Blank link and inserting an onClick JavaScript in the link's opening <A HREF> tag.

You cannot add or edit HTML forlinks in HTML Code view. You can only do this in the Link HTML dialog.

  1. In Page view, select the image or exact text site visitors are to click, and click the Link button on the Properties panel.

The Link dialog appears.

  1. Select Smart Link from the Link type drop-down list and select Blank in the Name column.
  2. Click the HTML button in the Link dialog.

The Link HTML dialog appears.

  1. Click the Inside Link tab and type:

onClick="alert(your message)"

where your message is the text of your message.

  1. Click OK in the Link HTML dialog, then click Link in the Link dialog.

Preview the page and click the image or text to see the message.

View the HTML code in HTML Code view to see the resulting HTML.

Another way to add this JavaScript to a picture or text link is to create a custom link. In the Link dialog, select External Link as the Link type, choose javascript from the New link drop-down list, and type the onClick script in the New link field.

Inserting HTML in a Text Box

You can insert HTML or script inside the contents of a text box at the insertion point, for example, to add text attributes or comments to the HTML. Note that you cannot do this in HTML Code view.

  1. In Page view, double-click in the text box to get an insertion point.
  2. From the Text menu, choose Insert HTML.

The Insert HTML dialog appears.

  1. Enter your HTML or script.

The Insert HTML dialog can contain up to 255 characters. To insert more than 255 characters, use the HTML Code Editor or Object HTML dialog or reference an external HTML file.

  1. Click OK.

Preview the page to test your code, and view the source from your browser to see the resulting HTML.

Coding Your Own Objects

You can create an object, such as a Java applet or a table you want to code yourself, by entering HTML or script in an empty text box.

  1. In Page view, draw a text box where you want the object to go.

The box marks the object's position when you publish, but it can grow vertically or horizontally depending on the object. To approximate the published size in your Layout area, select Lock height on the Text Box tab of the Text Properties panel.

  1. Right-click in the text box and choose Text HTML from the shortcut menu.

The Object HTML dialog appears.

  1. On the before button tab, type, paste, or insert the HTML or script.
  2. Press Enter after the script and type <!--
  3. On the After Tag tab, type -->
  4. Click OK.

You defined a space on the page for a text item, inserted the HTML or script, and told NetObjects Fusion to put the HTML or script in place of the text.

Preview the page to test your code, and view the source from your browser to see the resulting HTML. If necessary, go back and adjust the box's position in Page view to get the actual spacing you want.

Coding Your Own Frames

You can create HTML frames in any part of the MasterBorder without coding HTML by using AutoFrames. But if you want to put frames in the body of your page, you can script them, just as with any HTML editor. Here's an example of accessing HTML to create a section of a site that uses two horizontal frames one body frame that scrolls, and a footer frame that doesn't. Navigation buttons in the footer open each of two pages in the body, while a Home Page button links out of the frames section to the site's Home page.

  1. In Site view, create a new page for the frameset the page where your frames begin. Name the page Frames.
  2. Beneath this page, create three content pages for the frames to display, named Footer, One, and Two.
  3. Display the Frames page in Page view, and add HTML that defines it as a frameset, setting the size and position of each frame, and the content it initially displays.

Select the Layout, click the HTML button on the Layout Properties panel, and type the following in the headInner button area of the Page HTML dialog:

<frameset rows="*,70"><br/><frame name="main" src="./html/one.html"><br/><frame name="footer" src="./html/footer.html"><br/></frameset>

Or, if you re publishing the site using the Flat directory structure rather than the by Asset Type structure, type the following for the second and third lines:

<frame name="main" src="./one.html"><br/><frame name="footer" src="./footer.html">

This HTML creates two horizontal frames one called "main" that occupies the bulk of the page, and a 70-pixel-high frame called "footer" at the foot of the page.

Click OK in the dialog when you're done.

The src attribute is a relative path name to a content page that must match exactly the path name generated when you publish the page. The path depends on the directory structure selected in Publish view (from the Publish menu, choose Arrange Files, and then choose one of the submenu options). The file name is the page's name in Site view, all lowercase, with an .html extension and an underscore in place of spaces and other special characters. So One in Site view becomes one.html in the resulting HTML. If you re not sure where a content file is relative to your frameset page, or what its HTML name is, look in Publish view.

  1. Open the Footer page in Page view.
  2. On the MasterBorder Properties panel, select ZeroMargins in the Name field.
  3. Click in the Layout area and enter 110 in the Height field on the Layout Properties panel.
  4. Add three text boxes to the Layout, containing the text One, Two, and Home.
  5. Select the text One, click Link, select the Internal Link type, and select the One page. In the Target section of the Link dialog, click New and type main in the text field next to the New button. Click Link to close the dialog.
  6. Select the text Two and create an Internal link to the Two page. In the Target section of the Link dialog, click Existing and select main from the drop-down list. Click Link to close the dialog.
  7. Select the text Home and create an Internal link to the Home page. In the Target section of the Link dialog, click Existing and select _top from the drop-down list. Click Link to close the dialog.
  8. Open the One and Two pages in Page view, choose the ZeroMargins MasterBorder on theMasterBorder Properties panel, and add whatever content you want to appear in the main frame for each page. Add content to the Home page.

You can't preview to see scripted frames, so publish the site and test your frames. Click each button in the bottom frame. The One button should display the contents of the One page in the top frame, the Two button should display the Two page in the top frame, and the Home button should exit the frames altogether and display the Home page in the whole browser window.

Working with the HTML attributes

The Properties Grid is an HTML editing panel, containing a property grid with HTML attributes and values. Using the Properties grid, you can customize the properties of the selected object just by modifying the attributes of the HTML code.

The changes you make in the Properties Grid will automatically update the HTML code of the page.

The Properties Grid panel contains two options to help organize and work with the HTML attributes that you need:

  • Categorized, where the grid contains a categorized list of all the HTML properties available.
  • Alphabetic, which contains a list of all the available properties in alphabetical order.

Displaying the Properties Grid Panel

By default, the Properties Grid panel is docked on the left side together with the Properties panel.

If the Properties Grid panel is not available on your workspace, follow these instructions:

  1. Display a page of your site in Page View.
  2. From the View menu, select the Grid Inspector option, if it is not already selected.

The Properties Grid panel appears.

Note: If the Properties Grid option is selected, the Page Properties Grid will be automatically visible when you click on the Layout of the page or on the MasterBorder.

Changing an Object's Properties Using the Properties Grid Panel

To assign a new value to an object, choose an HTML property from the Properties column on the left and set the value for that property on the Values column on the right. If you have previously set up a database recordset or an XML dataset, you can also specify dynamic values for HTML attributes.

Categorized HTML Properties

To set new values to properties:

  1. In the Categorized section, expand a category on the left by clicking the corresponding '+' sign.
  2. On the Properties column, select a property from the expanded category. When applying a value to a property, you will have the option to type the value or select a value from the options displayed in the drop-down list, if available.
  3. Type or select the corresponding value if a drop-down list is available.

Alphabetized HTML Properties

The Alphabetic section displays all HTML properties arranged alphabetically. You can perform the same actions of setting new values to HTML properties, as in the Categorized section.

For example, to set the object's height, select height on the Properties column and enter a value to the Values column.

Each attribute is an abbreviation of a property of the object. For the definitions of the most used attributes, see the Customize Tags section.

The Grid Inspector makes your work much easier, because now you can change the properties of an object from a single section of the Properties Panel.

Customize Tags

Each type of object has different attributes listed in the Properties Grid panel, according to the properties it comprises.Next, you will find a list with explanations for the most commonly used attributes.

  • General
    • CenterIn Browser
    • FileExtension.
    • Title. A text to display in a tool tip.
    • Height. Defines the height of an object.
    • Width. Sets the width of an object.
    • Alt. Defines a short description of an object.
    • Border. Defines a border around an image.
    • Src. Defines the URL of the image to display.
    • Name. Connects the content attribute to a name.
  • Style - Common
    • BackgroundImage.
    • BackgroundSound.
    • BackgroundColor.
  • HTML - CSS
    • Class. The class of the element.
    • Id. A unique ID for the element.
    • Style. An inline style definition.
    • Title. A text to display in a tool tip.

Note: To customize the Meta Tags HTML attributes, see Setting the Meta Tags Properties.

Working with script files

Script Importing Order

The Script Importing Order section helps you import new scripts, but also organizes the embedded scripts that can be client-side or server-side.

Adding a Script File

In NetObjects Fusion, you can add your own script files and specify if the script should be applied throughout the entire Web site, in a specific MasterBorder, or even a specific page.

To add a script file:

  1. Select the Scripts Importing Order button on the Layout or MasterBorder Properties panel.
  2. Click the "+" button to add a new script file.
  3. Select the script file you want to add.
  4. Click the Open button. The Scripts Settings dialog appears.
  5. In the Script Side section, select one of the following two options:
    • Client Side. Script is run by the Web browser. Client-side scripts allow greater interactivity in a document by responding to user events. The clientside scripts are added to the HEAD section of the HTML page between the Scripts tags.
    • Server Side. The script is run directly on the Web server generating dynamic HTML pages. Server-side scripting offers you the ability to highly customize the response based on the user's requirements, access rights, etc. The server-side scripts generate a server-side code that is embedded at the beginning of the generated HTML code. The server-side code might be PHP or ASP.

Note: In the Site Options dialog, you may change the type of the server-side code for the entire site.

  1. If you have previously selected the client-side script option, you also have to select the MIME type of the script from the Select Type drop-down list, or you may enter a new MIME type of the script. By default, the text/javascript type is selected.
  2. In the Script Scope section, you will have to choose where the script file should be applied in this site:
  • Site-wide. If you select this option, when you publish the site, each page of the site will include the added Script 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 Script file.
  • Page Specific. If you select this option, when you publish the site, only the selected pages will include the added Script file.
  1. Click the OK button.

The added script file is displayed in the tree displayed within the Script Importing Order section.

Changing the Scripts Files Importing Order

When working with multiple scripts you may find it necessary to define the order in which the script is referenced.Generally, the import order for the Scripts files in NetObjects Fusion is:

  1. Site-specific External Script files.
  2. MasterBorder-specific External Scripts files. The order through which these files are imported may be changed in the Scripts Importing Order section on the MasterBorder Properties panel.
  3. Page-specific External Scripts files. The order in which these files are imported may be changed in the Scripts Importing Order section on the Layout Properties panel.

To change the order in which scripts files are imported:

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

Note: You can only change the order of the scripts of the same scope. You cannot change the scope of an imported script file.

Removing an External Script File

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

  1. In the Scripts Tree, select the Script file by clicking on it.
  2. Click the "-" button. The Script file will be removed from the Scripts Tree.

Working with Internal Script Files

Internal Script files cannot be deleted, but you can change their content.

To change the content of an existing internal script file:

  1. Select the Scripts Importing Order button on the Layout or MasterBorder Properties panel.
  2. Select the internal script file you want to change.
  3. Click the Replace content button.

The Open dialog appears.

  1. Open the folder that contains the script file with the new content.
  2. Select the script file and click Open.

The name of the file doesn't change; only the content of the internal script file is replaced with the content of the opened file.