Basic tips and an interesting background exercise

Centering your webpage

Use a single entry in Master border HTML to center your website on the screen:


Open your master border properties palette (F10) and insert the following code at “body start”:
 

<div align="center">


and insert the following code at “Body End”:
 

</div>


Important information: This code works in all versions with HTML-output: HTML4 with tables. If you use either XHTML or HTML5 (NOF2013) please center each page by using the tickbox in layout-properties (F9).

How to force the browser scroll bar to be always visible

If you website has shorter and longer pages, the browser will only show its scroll bar on longer pages. The pages shift lightly to the right and to the left when visitors browse through them, because the scroll bar disappears on short pages. This can and should be corrected.

Just insert the following code in your master border HTML.

Press F10 to open the master border properties palette. Press HTML. Insert the following code “between head tags”:
 

<style type="text/css">
html {
overflow-y: scroll;
}
</style>

How to insert images in NOF

Please make sure that you have reduced the size of your images before inserting them in NetObjects. Use any image editing programm to scale down the size of your pictures before using them on your website.

How to use a gradient image as a website background.

Basically all you need is a vertical snippet:

BGblauverlauf

With your colour picker (it’s available also in NOF) pick the lowest colour grade on the snippet. In this case: # 5F709E

Now have a look at the dialogue box described on this page under the heading:
 

Graphic background for the whole website - Body

Insert the graphic snippet as background image, and the color as background color. repeat: horizontal.

That’s all, you have already achieved a beautiful gradient background for your website.

On page view you will have to use draw a table with e.g. a white background in order to separate the content from the website background
 

Here is a .zip-file with many gradient backgrounds in different colors for free download, so you can choose one and use it freely on your website:
 

Gradient backgrounds for free use

 

Have fun with this tutorial and ask your questions at forums.netobjects!

Best regards
Barbara0701

www.nof-schule.de

Forum of NOF-Schule