Page View Tips

By Matthew Legare and Phil Garrett

Howdy - Matthew Legare, Senior Technical Support Specialist and Workbench Guy for NetObjects here... over the coming weeks I'll be sharing some tips, tricks and other cool stuff you can do with NetObjects Fusion with you through eFuse.com.

If you like what you see here, and are interested in checking out more stuff on Fusion, check out the Workbench (an "officially unofficial" NetObjects Fusion tip site).

Summary

• Nudge, Nudge: moving objects one pixel at a time the easy way
• (Japo-Norweigan) Font substitute: if the ones you select for your page aren't on the reader's computer, this tells the computer what other fonts to use
• Major Tom to NavBar Font Control: Want to control the font and size of your text navbars? You can.
  No hable CGI? No problemo: want forms but don't want to have to muck about with CGI? Get a load of this!
• Forms: No hable CGI? No problemo! Want forms but don't want to have to muck about with CGI? Get a load of this!
• Keyboard Shortcuts: let your fingers do the walking
• Color me Custom: creating your own color palettes
  Avanti means forward: automatically forwarding a site visitor from one page to another.
• Keyboard Shortcuts: let your fingers do the walking
• Color me Custom: creating your own color palettes
• Avanti means forward: automatically forwarding a site visitor from one page to another.

Nudge, nudge

NetObjects Fusion can place any object on a Web page with pixel precision. But sometimes it's hard to move your mouse in single pixel increments. To nudge an object one pixel at a time, select the object and use the cursor keys to nudge it up, down, left, or right, pixel by pixel. To nudge an object 10 pixels at a time, select the object, hold down the shift key and press the cursor key in the direction you want to nudge.

Substitute fonts

If you specify a particular font, the viewer's computer must also have that font or the browser will automatically substitute a different font. You can control which "substitute" fonts are used by editing a file called ''fontmap.txt'' in the NetObjects System folder. If you were to open the file in a text editor, you would see the following first line:

Arial,Helvetica,Univers,Zurich BT

The first font listed is the font you plan to use on your page. The fonts that follow are the fonts the browser will substitute if the first font is not available.

An example of this would be if  I wanted to use the Treefrog font. Not everyone who visits my site is going to have Treefrog installed, but I can set up some alternative font types to be displayed instead. I might choose to make the following entry in my ''fontmap.txt'' file:

Treefrog,Arial,Helvetica—This would result in the following FONT tag:

<FONT SIZE="+1" FACE="Treefrog,Arial,Helvetica">

The browser then attempts to display the text in the first font listed in the FACE attribute. If it cannot find that font on the user's system, it moves on to the next one on the list. For more information about fonts on the Web, click here.

Navbar text font control

NetObjects Fusion's automatically generated text navbars are great because they automatically keep the navigation on your site up-to-date. But unlike other text in Fusion, you can't just swipe over them and set their font and size. You can , however, set the font and size pretty easily.

• Right Click on the text nav bar
• Select Object HTML from the pop-up menu
• The Before Tag tab will be selected
• Enter the following HTML code into the box:
  <font face=verdana,tahoma,arial,helvetica,sans><font size=-1> (naturally, you can enter any typeface or size you want here, but you'll want to enter a font you're sure your site viewer will have on their computer. To read more about fonts on the web, click here.)
• Click on OK

The font and size change will not appear in NetObjects Fusion. But they will appear when you preview or publish your site.

Easier forms

Want forms but don't want to fool around with CGI? Response-O-Matic is a free form processor service that will take form information and send it to an e-mail address you specify without making you mess around with CGI scripts on your own server. Here's how to use it with NetObjects Fusion:

• Create a form on a page in NetObjects Fusion.
• Place your form fields and name them in a manner that makes sense to you. (Be aware that your customer will see the names you give  to these fields in the response page,  so be careful.)
• Place a Submit button using the Form Button Tool– Do *not* use the AutoForms  component on this page.
• Make sure the check box labeled "Layout / Text Box / Table is a form" is checked.
• Set the form to access Response-O-Matic.
• Click on the Settings button next to the "Layout / Text Box / Table is a form" check box.
• In the Form Settings window, type the following text into the Action field:
  http://www.response-o-matic.com/cgi-bin/rom.pl
• Make sure the Method is set to Post.
• Click the "+" key below the Hidden Fields window and create a hidden field with these settings:
  Name:your_email_address
  Value: (type in your full e-mail address)
  
  This is the *only* hidden field you *must* create  for Response-O-Matic to work with this form.

There are several other hidden fields you can create that will control other aspects of how Response-O-Matic will behave when it sends your form information to you. Check out the usage note on Hidden Fields at for full details.

Keyboard Shortcuts

Is there a complete list of the keyboard shortcuts for NetObjects Fusion? Yes, there are listed below.

• Site View ctrl+1
• Page View ctrl+2
• Style View ctrl+3
• Assets View ctrl+4
• Publish View ctrl+5
• Preview alt+p
• Preview toggle alt+ctrl+p
• Preview tables alt+shift+p
• Preview tables/toggle alt+shift+ctrl+p
• Create New ctrl+n
• Search ctrl+g
• Create New Site ctrl+shift+n
• Open Site ctrl+o
• Save Site ctrl+s
• Save Site as ctrl+shift+s
• Exit alt+F4
• Go to Next page ctrl+rightarrow
• Go to Previous page ctrl+leftarrow
• Go to Parent ctrl+uparrow
• Go to first child ctrl+downarrow
• Select/deselect objs shift+click
• Select All ctrl+a
• Select Layout properties F9
• Select MB properties F10
• Select page properties F11
• Select Next object tab
• Select Previous object shift+tab
• Hide object ctrl+h
• Show All objs ctrl+shift+a
• Size Layout to objs ctrl+shift+l
• Size MB to objs ctrl+shift+m
• Show/hide rulers/guides ctrl+u
• Show/hide grid ctrl+d
• Snap to guides ctrl+shift+u
• Snap to grid ctrl+shift+d
• Undo crtl+z
• Redo ctrl+y
• Line Break shift+enter
• Link object/selected text ctrl+k
• Follow link ctrl+shift+k
• Copy object ctrl+drag
• Restore Image size ctrl+shift+i
• Constrain image proportions ctrl+drag handle
• Insert HTML ctrl+t
• Bold format ctrl+b
• Italic format ctrl+i
• Center Selected Text ctrl+e
• Left justify text ctrl+l
• Right justify text ctrl+r
• Indent text tab in text edit mode
• Unindent text shift+tab in text edit mode
• Find ctrl+f
• Replace ctrl+j
• Spell Check F7
• Nudge an object a single pixel - select the object and use the cursor keys.
• Nudge an object 10 pixels - select the object, hold down the shift key and press the cursor keys

Color palettes

I created a custom palette in Adobe Photoshop and would like to use it in NetObjects Fusion 3.x. Is this possible?

Yes, you can load your Photoshop-generated palettes into NetObjects Fusion 3 or higher. This can be done any time you can access the Color Picker. One example is in Page view:

• Go to Page view, click in the Layout of the page, and click the Background tab of the Properties palette.
• Click the Solid Color radio button, and then the Color button. The Color Picker will appear.
• Click the Load button to load any Photoshop palette (.act) files you've created.

Note: You can also Save any custom palette you may have created in Fusion by clicking the Save button and saving the file as an .act file.

Automatic page forwarding

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 palette. The Page HTML dialog appears.
    
2. Click the Between Head Tags tab and type:
   
   <META HTTP-EQUIV="REFRESH" CONTENT="seconds; URL=http://server.domain.com/page.htm">
   
   where seconds is the number of seconds you want the transition page to appear, and http://server.domain.com/page.htm is the URL of the page you want to link to.
    
3. Click OK.

Preview the site to test the transition, and view the HTML source in your browser to see your code.
 

NetObjects
Fusion:
TIPS & TRICKS

Site

Page

Style

Assets

Publish