Page view - Using CSS-Styles for designing content

Using Title-Tags H1, H2, H3

You have defined title tags in style view. Now turn to page view.

I use tables in NOF. However you can use H-Tags in the same manner for text objects that are not placed in cells.

Write the title in your cell. Set the chosen HTag (H3) in text properties:

using-htag

In my example the background, the padding and the font-size and colors have been previously defined in style view > manage styles > H3.

Now I only need to write the text and set the correct H-Tag in the properties palette. The cell will expand automatically according to my padding definition in H3 to properly show the background graphic.

How do we set individual CSS-Styles for table cells and text objects?

Since you are now familiar with the style settings in style view, it will be quite easy to create a class on page view:

css-style2

And this is how you create a CSS-class in NOF:

css-style3

Now set whatever you want, in my case I choose red as background color and white for characters:

css-style4

You now want to use this style setting – which I named cell_dark - for individual cells or text boxes? It’s very simple:

Draw a table or a text box in NOF > click a cell or mark the text. Now look at your properties palette > choose the right class in the CSS-style drop-down menu:
 

css-style5

Just try various settings. The experience will teach you when you have to chose the class for text or for cell format, or combine the two. You have various possibilities.

Something that you shouldn’t do!

It’s tempting to klick on format in the property palette and edit a text format there. But you shouldn’t do it. Try not to use this button:

css-style6

Whatever format you insert here will be written in your HTML-source code. At the end of your work you will have possibly hundreds of different formats and will not be able to remove them all at once to replace them with classes, since inline formats override css-style settings.

Conclusion

Before you start on a real project, play with the CSS-settings and make sure you have understood them.

 

1. Use CSS-styles and link them to your text or cell, depending on what you want to achieve.
2. Site settings override style settings
3. Using a style for text and one for a cell in a single cell will double padding.
4. Make sure you always use the same padding for every similar object

You want to know more? Check some basic tips on the following page:
 

Go ahead: Basic tips and an interesting exercise

 

 

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

Best regards
Barbara0701

www.nof-schule.de

Forum of NOF-Schule