Home
Introduction
Quick Start
Internet publishing
Interface
Licence agreement
 
InSite Designer home
Raycone home
 

Internet publishing

Although InSite Designer looks like a WYSIWYG editor (WYSIWYG - What You See Is What You Get), you must not forget that the Internet is not WYSIWYG at all. Surfers and potential customers will be using a wide variety of devices and browsers to view your pages.

Here is a list of information that can help you to become a good web designer.

General

One of the BIG mistakes is that "a professional web designer" creates a page which is "optimized for ... browser". They think the great majority of surfers use this browser so it does not matter, but an increasing number of surfers use "pocket-computers", mobile phones, BeIAs :-) etc. The information you want to give them will be scarcely legible for them (or won't be visible at all!) Remember that your pages will be viewed on very different screen resolutions, color spaces or without any graphics at all.

Not only surfers but also SEARCH ENGINE ROBOTS browse the Internet and these are very important for a webmaster because they draw traffic to the sites which are readable for them - they can only read text. An example of what you should never do: Put a big image map on the home page. It may look nice but the long download time will make the majority of the surfers stop the transfer and go somewhere else and search engine robots will not be able to understand the content of the page.

Always include some alternate text to your images. Always use WIDTH and HEIGHT specifiers for images. (InSite Designer does the last two for you. However if you want to change the standard alternate text from the file name of the image to something different, you must use the TAG settings window.)

Use titles for your pages, these are very important for search engines and the surfer can see where he is immediately. Include the name of the web site in the title because the surfer may have got to your page from another site through a link and may not know where he is. "Price list" is an example of a bad title. "Price list of ... Inc." says more.

Don't make your pages too long and try to say the most important thing at the beginning of the page. According to one serious survey only 10% of surfers scroll the contents of browser windows when they come to a site. The first page that the surfer comes to could be any, so put information about your site and link to "home" on all your pages. Try to write short paragraphs.

Background image

InSite Designer supports background images but you should use them wisely. A nice background image can improve the appearance of a page a bit but an unsuitable image can make the page absolutely illegible. The background image should always be in very strong contrast with the text.

Nonbreakable space

In HTML any number of white spaces (spaces, tabs, enters) means one space. That's why InSite Designer doesn't allow you to enter more than one space at one position because multiple spaces get truncated in a browser anyway. A line can break at any white space. It may be inconvenient in some cases when you want two or more words, images, etc. to remain next to each other, e.g. parts of date. In these cases you use nonbreakable spaces ("&nbsp;" in HTML). They appear as a normal space but the line does not break at them. Example in HTML:text&nbsp;which&nbsp;won't&nbsp;be&nbsp;broken This text will (almost) always stay on one line. 'Almost always' because in some cases such as when the text is longer than the width of the browser window - the browser may break it. Nonbreakable spaces are not considered to be white spaces so you can enter any number of them next to each other. In InSite Designer a nonbreakable space looks like a small rectangle (the same as if you press a key for which the current font does not have a character). You can enter them by pressing <SHIFT+SPACE>. InSite Designer automatically converts them to "&nbsp;" - HTML representation of a nonbreakable space - for you.

Heading

HTML recognizes 6 sizes of heading; H1 - the biggest - usually used for page headings, through H2, H3, H4, H5, used for less important headings, to H6 - the smallest - used for copyright notes, etc.
Examples:

This is H1 text

This is H2 text

This is H3 text

This is H4 text

This is H5 text
This is H6 text

Physical font

Physical fonts are fonts where you specify HOW they should APPEAR. You can use Bold text, Bold italic text, Italic text, Underlined text, Fixed text, Big text, Small text and Strike thru text, Sub text, Sup text. The last two currently appear as standard text in InSite Designer. Strike thru text was not supported by the last version of NetPositive available before the release of InSite Designer. We don't recommend you to use underlined text because surfers are used to the fact that links are underlined and it may confuse them.

Logical font

Logical fonts are fonts where you specify WHAT is WRITTEN in the font. You can use Emphasis or Strong emphasis, Definition, Code, Sample, Keyboard input, Variable or command or Cite. How it appears will then depend on the browser.

HyperText link/target

A HyperText link is a link which, when you click on it, transfers you to the target. The target may be on the same page, on a different page or it may be a page stored on a server on the other side of the Earth. When you create a link you must enter the address where the link leads to. If the target is a page the address is the path to that page. If the target is one particular position on a page the address is "path_to_the_page#name_of_the_target" e. g. "http://www.someserver.com/support/index.html#Drivers". If you want to point to a particular position on a page there must be a link target with the specified name ("Drivers" here) already put there. HyperText link/target can appear as a text or an image. In InSite Designer you enter the HyperText link/target from the menu or by pressing <ALT+H>. Then the TAG settings window is displayed. Now can you specify if you want to insert a link, a target or both. According to this you enter the link and/or the link target name. The link/target is created. Now you can enter a text to describe the target or you may insert an image <CTRL+ALT+I>.
Example: Contents

Image

First of all, a warning: DON'T USE LARGE IMAGES. If you need to use one, put a thumb-nail of it with a link to the big one on the page and if the surfer wants to see it full size, let him follow the link. Always include an alternate text to images so that even search engines and text based browsers can find out what's there. Use WIDTH and HEIGHT specifiers for all your images (you don't need to do it manually, InSite Designer does it for you). You can insert an image using the menu or by pressing <CTRL+ALT+I> and choosing the image file. The standard alternate text that InSite Designer assigns to a new image is its file name. You can change the name by right-clicking the image.

Fixed line break

Text is normally broken at the right margin of the window. If you want to break a line at a particular place insert a fixed line break - either from the menu or by pressing <ENTER>.
Example: text before fixed line break
text after fixed line break

Paragraph

Write your text in paragraphs and keep them short so that it is easy to read them. You can insert a new paragraph from the menu or by pressing <ALT+P>.
Example: text before end of paragraph

text after end of paragraph

Lists

Unordered list

An unordered list is used when you have a list of subjects which don't have any particular order. It is displayed with a wider left margin and before every item a mark is drawn. The mark differs according to the level of the list - several lists can be inside each other - and according to which browser you use, so don't rely on the appearance of the marks.
Example:
  • item
  • item
  • item

Ordered list

An ordered list is used when you have a list of subjects which have a particular order. It is displayed with a wider left margin too, but instead of marks there are numbers or letters. Also this list can contain other lists, even unordered ones.
Example:
  1. First item
  2. Second item
  3. Third item

Definition list

A definition list is used when you have a list of definitions and their explanations. Every item in a definition list has two parts - a name, phrase, etc. and its definition. The name appears at the left margin and the definition is displayed on the next line with a wider left margin. Definition lists can't contain any lists.
Example:
something I want to define
definition
something I want to define
definition

  • Others

    Horizontal rule
    Horizontal rule is exactly what it means. A gray horizontal line is usually used as a separator. You can enter a horizontal line from the menu or by pressing <CTRL+ALT+H>.
    If you want your pages to look good don't use it. Example: