|
Internet publishingAlthough 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. GeneralOne 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 imageInSite 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 spaceIn 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 (" " in HTML). They appear as a normal space but the line does not break at them. Example in HTML:text which won't be 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 " " - HTML representation of a nonbreakable space - for you.
HeadingHTML 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 textThis is H2 textThis is H3 textThis is H4 textThis is H5 textThis is H6 textPhysical fontPhysical 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 andLogical fontLogical 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/targetA 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 ImageFirst 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 breakText 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 ParagraphWrite 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 ListsUnordered listAn 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:
Ordered listAn 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:
Definition listA 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:
|