Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Guia de uso do Kompozer - editor HTML e PHP
Tipologia: Notas de estudo
Compartilhado em 17/09/2009
4.6
(22)148 documentos
1 / 58
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Timeline The original Nvu User Guide was available in both HTML and pdf formats. At version 0.7.10 KompoZer started diverging from Nvu, in particular in the improvements introduced in the CaScadeS CSS editor. This necessitated de- scribing two different methods if both products were to be covered. The HTML version of the User Guide did this and was renamed KompoZer and Nvu User Guide. With the passage of time during the preparation of a pdf version the need to describe methods specific to Nvu has diminished. This pdf version includes only methods which are specific to KompoZer but, at date of issue, the content is otherwise identical to the HTML version. Once again the title has been changed
KompoZer is a complete Web Authoring System which integrates web page development and web file management. KompoZer is basically the same product as Nvu but has been developed further removing some of the faults found in Nvu and improving the user interface. It provides a web page editor which has a simple graphical (WYSIWYG - what you see is what you get) interface. With KompoZer, newcomers will quickly and easily be able to produce new web pages. Alternative editing ‘views’ of the pages are provided right down to detailed code level. The output code is compliant to a high extent with the latest issues of the appropriate web language specifications and pages may be checked for validity directly from Nvu using the official W3C validator. KompoZer incorporates a Site Manager; this gives rapid access to the files on both local machines and remote servers. It can cater for several sites and switch rapidly between them. From within KompoZer pages and associated files may be uploaded to a remote server. KompoZer supports the use of “Styles” through Cascading Style sheets (CSS) both embedded and external. It has an editor which generates CSS code conforming with CSS 2.1 specifications.
KompoZer is suitable for anyone wishing to have a modern, free of charge, program for developing small web sites and who would like to learn modern web design techniques such as the use of CSS.
The guide has been written from the point of view of the Windows Operating system so details may differ for other systems. It is intended as a reference docu- ment although in a few places it uses a tutorial ap- proach. Although web pages can appear on screen, in print or in audio the emphasis in this guide is on-screen uses.
The approach taken by the guide attempts to satis- fy the needs both of the comparative novice who has little knowledge of web design tools, and those making the transition from other tools and who may have considerable knowledge of the field. Although the Guide is not intended for the com- plete beginner, concepts are introduced progressively and gradually added to. To avoid being too repetitive I have, in a number of places, referred to subjects yet to come. This applies, in particular to the use of styles in which KompoZer is strong. I suggest that these refer- ences are disregarded at first reading and returned to later. This will not prevent understanding later parts.
Navigate around the ten sections of the Guide and the appendices using the menu pane on the left hand side. In each section the menu expands to show more detail within that section. Cross references throughout are hyperlinked. The buttons at the top of each page give access to some supplementary aids and information. The ‘Site map’ contains a detailed table of contents of the whole guide while the ‘Quick index’ gives access by subject. [This pdf version of the Guide lacks these facilities but compensates by having a comprehensive subject index.]
The development of Nvu was completed with the release of version 1 in June 2005. No further develop- ment is expected though the developer Daniel Glaz- man of Disruptive Innovations http://disruptive-innovations.com/ is working on a newer product which will probably supersede it. After version 1 release a number of shortcomings were revealed and an independent developer using the name of Kazé worked on several of these and released an enhanced product as KompoZer. Early versions of KompoZer operated almost identi- cally to Nvu but with version 0.7.10 a number of significant enhancements were introduced, most of them related to the use of the CSS editor CaScadeS, and the majority of Nvu users have probably trans- ferred to using this version. The program is completely free and can be downloaded from KompoZer’s web site http://kompozer.sourceforge.net/. You can install both Nvu and KompoZer on the same machine. From version 0.7.10 it is possible and safe to run both programs simultaneously. This User Guide is written around the latest ver- sion of KompoZer at time of writing (see footer).
When KompoZer starts the window carries a menu bar across the top (File, Edit, View etc). Below this are three ‘Toolbars’. To ensure that everything is visible, on the Menu bar select View > Show/Hide and see that each of the following is checked: Composition Toolbar, Format Toolbar 1, Format Toolbar 2, Edit Mode Tool- bar, Status bar, Rulers, Site Manager. The three toolbars across the top of the window carry buttons (represented by icons). Hover on any to find its function. If any are greyed out they are not functional in the current mode as they are context sensitive. Note Not all buttons are installed initially. The full list is given in section 9.3 Customising tool- bars Across the centre of the window are two panes: the ‘Site Manager’ on the left and a blank web page on the right. The Site Manager is a powerful tool which is covered in section 8. Since it is not needed yet it may be closed by clicking on its close button or pressing F9. At the top of the Page area there is a Page tab which carries the name of the page (‘Untitled’). (KompoZer Help refers to this as the ‘Tab Browser’ toolbar.) If you had several pages open, as shown in the figure, this tab would allow you to select one them rapidly. At the bottom of the page area is the ‘Edit Mode Toolbar’ which carries four tabs which select one of four ‘Viewing modes’ for a page (‘Normal’, ‘HTML Tags’, ‘Source’, ‘Preview’.) For details of viewing modes see section 3.15. At the bottom of the window is the ‘Status Bar’. This is a very powerful tool. Once a page is populated, by clicking any item in the page area its structure appears on the status bar. Any class or id applied to an element is shown and any bearing an inline style is indicated in italic type. Hovering reveals the style declaration. Additionally clicking an element marker highlights the element in both normal view and, on changing view, in source view thus simplifying naviga- tion in source view. Note The figure shows the buttons as they appear when KompoZer is first installed. They may be customised to different arrangements (see section 9.3). If this has been done some of the following may be difficult to follow. To re- store defaults click View > Show/Hide > Cus- tomize Toolbar > Main Toolbar > Restore Default Set and repeat similarly for the Format Toolbar. Using KompoZer right-click any toolbar to custom- ise it.
A new page can be created either from a blank page or by opening any pre-existing page. Note There are often several ways of getting KompoZer to do something. This guide will use the button on the Composition toolbar if that is available. For menu equivalents see section 9. Menu alternatives
Web pages use the Hypertext Markup Language (HTML). There are number of variants of the basic language some details of which are outlined in Appen- dix 3. KompoZer is capable of creating and editing four variants but for simplicity of explanation I recom- mend that users create the Strict HTML variant. I also recommend that you go the menu item Tools > Options > General and check the box ‘Use CSS Styles instead of HTML Elements ...’ this will give you the maximum functionality. You can edit docu-
ments which have been originated in other variants and again ‘Use CSS Styles ...’ gives maximum func- tionality. Note If you find a button or menu item disabled it is likely to be a because ‘Use CSS Styles ...’ is not set but could be because of the context of the action.
There are several ways to start new pages or open existing ones. To start a new blank page. On the menu bar click File > New. A window headed ‘Create a new document or tem- plate’ appears. Check the boxes ‘A blank document’ and ‘Strict DTD’ and clear ‘create a XHTML document’. (Without Strict DTD checked the document would have Transitional DTD.) Note If you wish to make these your defaults which are offered every time you create a new page click Tools > Options > Advanced and check the boxes Markup Language: ‘HTML 4’ and DTD: ‘Strict’. The use of templates is covered in section 7. To open an existing page. Either:
KompoZer supports all the standard Windows edit- ing commands and short- cut keys. e.g. Copy Ctrl+C, Paste Ctrl+V etc. There are other KompoZer specifics. These are great time sav- ers. In ‘HTML Tags’ view KompoZer supports drag and drop editing for block items. (Select an item by pressing the Control key while clicking on the Tag.) An extreme time saver is KompoZer's double click response. In several cases, such as links, images and tables, a very useful editing window is opened. KompoZer supports many levels of Undo and Redo, however changes made in ‘Source’ view cannot be undone after you have changed the view.
HTML stands for Hypertext Markup Language. It is the publishing language of the World Wide Web on which KompoZer is based. Ideally it should be possible to use KompoZer without any knowledge of this lan- guage and certainly without a knowledge of the details. As a precaution however a limited understanding is desirable. This tutorial covers a minimum of detail while introducing some useful features of KompoZer. Start a new blank page as described above. On the status bar click on the ‘<> Source’ tab. You will see a number of terms enclosed within angle <> brackets. These are HTML ‘ Tags’. Everything starting from the and finishing with will ap- pear on your web page. Note In most cases tags occur in pairs - opening tags and closing tags - Closing tags always start with a forward slash. All the page consists of now is a
tag which is a line break and which is, of course, invisible. Later as a page builds up many more tags will be added. For the most part the pairs of tags enclose ‘contents’ from which the page is built up - items like Paragraphs, Headings, Tables, Images. The tags plus the contents are called ‘ elements’. The tag names are usually either the same as element names or abbrevi- ations of them. Some examples are ‘table’, ‘img’ for image, ‘p’ for paragraph, 'br' for line break (which is unusual in having no closing tag). Nothing between the < head > and tags will appear on the screen but may have quite useful func- tions nonetheless. For instance, between the < title > and tags there isn't anything. Go for it, be- tween them type “My first page” or something like that. Click the tab for ‘Normal’ view, now the tab at the top carries your page title and you've edited raw HTML. Well done! If you were too timid to do this all is not lost. There is no need to use source view at all. Go to Format > Page Title and Properties, here you can enter various parameters including the title and the language you are writing in. These will be entered in the HEAD area for you. In some circumstances they can be important; the Title and Description, for instance, can be used by search engines to index the page. Back to '<> Source'. Notice the first tag is and the last . All web pages must carry these in these positions. Actual- ly the case doesn't matter for any tag though it's good practice to use lower case. (For XHTML lower case is mandatory.) The first line, in a dif- ferent colour, specifies the ‘ Doctype’. This is a refer- ence to the type of HTML document. KompoZer de- termines the Doctype ac- cording to the options selected on starting a page. Finally, give the docu- ment a name and save it.
Go to File > Save as. You are offered a ‘Save Page as’ window which al- lows you to browse to the folder you want to use. You will find the file name already completed with your page title. You will probably want to change Tip: The plus sign (+) means that you must press two keys surround- ing the plus sign at the same time. Tip : Filenames should generally be composed of unaccented letters, num- bers and the underscore character. Some others are permissible but the rules for incorporating them are more complex. Tip : Web pages are stored (hosted) on serv- ers which usually run ei- ther a version of Windows or UNIX operating sys- tems. UNIX filenames are case-sensitive while Win- dows are not. For this rea- son if you use mixed cases in filenames you must be very rigorous. A site which runs perfectly in your local Windows en- vironment or on a host running Windows if trans- ferred to a UNIX system might require extensive and time-consuming changes.
to refine presentation but, if we over constrain it, we may run into problems of getting it to fit on the screen. We really should allow the browser as much freedom as possible.
KompoZer allows you to constrain the width of paragraphs. (The same applies to headings.) Try this. Set the window size so that it is somewhat narrower than the full screen width i.e. so that you have space either to narrow it more or to widen it. Take two longish but similar paragraphs which fill about half of the window. Click in one, you will see the rulers both across the top and down the side. Grab the left edge of the ruler and draw it half way across the window. Do the same for the other paragraph but take the right edge of the ruler and drag it half way to the centre but in the opposite direction. You probably think that you've achieved a rather elegant layout and discovered a flexible tool. Drag the window to be wider then narrower. Do you still think so? What you have done is to set the text to be in a fixed position and of fixed width. It no longer re-flows. Consider that visitors who view your pages may have smallish or very large screens. Will they all see what you want them to? Supposing that you don't like what you have just done – you can just Undo it – press the Undo button or click Ctrl+Z. However if you leave it to later you would first have to undo all later work. You can re- or de-format a paragraph directly and individually. This allows you precise control rather than relying on dragging the ruler. Go to ‘HTML Tags’ view, click on the yellow ‘p’ marker for a paragraph, on the status bar right-click on the high- lighted ‘p’ area and select ‘Inline styles’. In the gener- al tab that appears just delete the text and click ‘OK’. Alternatively select ‘Box Properties’. This allows precise editing of the paragraph within the ‘box’ in which it is contained.
KompoZer can format a list of items giving each item a sequential number in any of several formats (HTML calls these ordered lists ) or presenting them bulleted (unordered lists ). To start a list from scratch 1 Click one of the list buttons (Numbered List or Bulleted list) on the Format toolbar. 2 Type the first item. 3 Press Enter and type the next item. 4 To finish, on the last (blank) item press Enter. To change existing text into a list 1 Select the text required. 2 Click one of the list buttons on the Format Toolbar. The text will be changed into a list, a new item starting for each paragraph or other block item en- countered. To add items to a list 1 Click at the end of the last item in the list. 2 Press Enter and type the new item. Numbering and format will continue from the pre- vious item.
To change the formatting for a list click in the list and, on the menu bar, select Format > List > List properties and choose the preferred option. Alterna- tively List properties is accessible by right-clicking in the list. For numbered lists the numbering style may be selected, for bulleted lists the type of bullet may be changed.
Lists can be nested. To start a new level of list within an existing list 1 Click at the end of the line preceding the new list to be generated. 2 Press Shift+Enter. 3 Click a list button on the format toolbar. 4 Type the content of each list item followed by Enter. Each level of list in a nested set may have either the same or different format which may be set as above. KompoZer sets no format by default. Browsers normal- ly by default render all numbered lists with decimal number format but each level of bulleted lists using a different bullet symbol.
The menu selection FORMAT offers many ways of formatting text. In some cases you can simply click within the text region in others you must select the section of text involved. Some of the effects may be repeated several times for more effect, some will re- verse on a second application. The options offered include indenting text. Those unfamiliar with web design may look, in vain, for a tab option. HTML does not support tabs although the List feature does produce a tabbed effect. KompoZer substitutes for this in that pressing the Tab key introduces several spaces - of course these do not produce the alignment effects that real tabbing would. The spaces introduced by the Tab key are technically known as non-breaking spaces. Pressing the space bar more than once also introduces non- breaking spaces.
Strictly KompoZer does not support importing text from other applications but it is possible to copy and paste text. In normal view content from other web pages may be copied reliably. The result will be rendered accord- ing to any styling applied in your document; any reliance on external styles in the original document will be lost. See section 4 for more on styles. Text from word processors such as Microsoft Word or OpenOffice.org in rtf or doc format or from text editors such as Windows notepad may also be copied and pasted. When such text is pasted into KompoZer most formatting is lost. Numbered lists will be retained. Tip : Instead of using HTML Tags view it is quicker just to click in the paragraph and click the corresponding
mark- er on the status bar. This will highlight the para- graph. After that just right click as described.
Tabs will be rendered as three non-breaking spaces. The contents of tables may be pasted, individual cells will be separated as if by tabs. **Warning** Word processor data should be copied in .doc or .rtf form. Word processors can also save pages in html form but this is unsatisfac- tory because the code is of poor quality. It will be almost impossible to alter the formats in KompoZer. To use such code first copy to a text editor, which removes all formatting, and then copy from the text editor to KompoZer. Apply any required formats from scratch.By special characters we refer to characters which do not have an equivalent keyboard key. HTML uses a system of characters known as 'Unicode'. This includes a large range of characters including all the international currency symbols and many thousands of others, though the fonts supplied on computers will support only a subset. A number of the more common, including accented ones, may be inserted using Insert > Characters and Symbols. KompoZer does not directly support ‘smart quotes’ but text which has been copied from applications like Microsoft Word or OpenOffice.org which include smart quotes will retain these details and they will be cor- rectly rendered in browsers. If you need a character which is unobtainable by these methods there are several alternatives available. 1 Using the Windows Character Map - Find, copy and paste a character. 2 Directly from the keyboard – while pressing the ALT key input a zero followed by the three digit decimal code for the character. This code is shown for a number of characters at the bottom right of the Windows Character Map. 3 By editing the file in Source view. See section 3.16. Characters may be inserted either using the decimal code for the character or using a mnemonic ‘entity’. Precede the decimal code with &# and the entity with & and follow both with a semicolon. Use no spaces. The HTML specification (see appendix 2) in section 24 lists the codes. Some useful examples are shown in the box. There is more on special characters in appendix 6 sections A6.3.7 and A6.3. Character Entity Decimal nrule – – – mrule — — — ellipsis ... … … left single quote ‘ ‘ ‘ right single quote ’ ’ ’ left double quote “ “ “ right double quote ” ” ” infinity ∞ ∞ tilde ˜ ˜ ˜ capital Alpha Α Α lower case alpha α α and so on for other Greek letters
Simplicity itself. In any view, other than Source, click on the ‘Spell’ button. The spell checker will work sequentially through the page. You will be offered one dictionary but you can add your own words to it. If the Spell button is not installed see Section 9. By first highlighting a section of a page only that section will be checked. It is also possible to run the spell checker all the time. Any mis-spelled words underlined in red. To set this option on the Menu Bar select Tools > Options. In the window which opens select the ‘Advanced’ button and set ‘Underline misspelled words’ - OK. Warning This setting must be made after the page is opened. Otherwise cancel and re-set. Note Spell checking uses enormous processor resources. Open only one document at a time when spell checking. When working on long documents, if your system grinds to a halt, disable this when not required.
If you add words to the spell checker you create a custom dictionary. The spell checker will mark words as errors if they do not appear in either the standard or custom dictionaries. The custom dictionary is saved as a text file as persdict.dat in the chrome folder in your profiles folder. Refer to Appendix 4.2 for the location of profiles.
If you use a language other than that of the default dictionary or prefer a dictionary customised to regional spellings it is possible to install alternatives to cater for this. With alternative dictionaries installed you can se- lect which to use. To select a dictionary. 1 Click the ‘Spell’ button. 2 In the ‘Check spelling’ window that opens click the drop down arrow in the ‘Language’ box. 3 Select the language required. The language selected will become the default until intentionally changed. Spelling will use this selected dictionary plus any custom dictionary. If you have more than one profile in use the diction- ary settings must be made, as required, for each profile. You can find details of profiles in Appendix 4.2. Acquiring dictionaries Dictionaries may be available from a variety of sources one of which is at http://dictionaries.mozdev.org/installation.html Dictionaries are formatted with xpi extensions. To acquire a dictionary first identify a source then
rules, between cells, and the border, around the out- side of the table, may be either visible or invisible. The boxes are called ‘cells' and may be coloured. The grid layout does not have to be regular - the first row may have one cell the second four, the third three; however, when first inserted, it will always be regular. W3C recommends: Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimise these problems, authors should use style sheets to control layout rather than tables. (HTML 4.01 Specification Section 11.1)
To insert a table 1 On the Composition Toolbar click the Ta- ble button. The ‘Insert table’ window ap- pears 2 Leave the ‘Quickly’ tab selected and drag out a matrix then click the bottom right cell to define the table arrangement 3 The cells appear on the screen with narrow outlines Note If later the table border is set to zero these outlines disappear but KompoZer in normal view replaces them with a red outline. This does not appear in Preview or in a browser. Tables have resizing boxes similar to those used with images. Alternatively for more control 1 On the Composition Toolbar click the Table button. The ‘Insert table’ window appears 2 Click the ‘Precisely’ tab 3 Specify the number of rows and columns re- quired 4 Specify the width of the table either in pixels or as a per- centage of window size. Alternatively clear the ‘width' box. This will give ‘fluid' width which will automatically adjust to the con- tents 5 If a border is re- quired around the table enter the width in pixels otherwise enter ‘0’. If a border is specified each cell will also have a border but narrow Note CSS styles give fuller control of borders. See section 4.2.1.3. For more options Right-click the table and select ‘Table Cell proper- ties'. The Table properties window opens. This has two tabs ‘Table' and ‘Cells' which allow overall control of several aspects of either the table or individual cells. This includes a Alignment of text within cells b Wrapping of text c Cell spacing – the gap between cells d Cell padding – the gap between the edge of the cell and the text within it e Size of table and cells f Background colour g Selection of cells as ‘Normal’ or ‘Header’ (Cells which are headings to rows or columns should be selected as ‘Header’. Normally this results in them being rendered in bold type.)
Tables at full window width give the maximum available space for data. The width accommodates to screen or window size. It is possible to set the width to a smaller percent- age of window size or to a fixed size in pixels. Fixed sized tables are inflexible in use and could result in the user having to scroll horizontally to read the content so must be used with caution. It is also possible to leave the width unspecified. This is likely to result in the best presentation as the browser will set the width to the optimal value. To adjust table size, with the cursor in the table, click the table button (or double-click the table). In the Table Properties window select the ‘Table’ tab. The width can be set either as a percentage of window width or in pixels. To leave it unspecified clear any number in the width box. It is possible to adjust the size of a table using the sizing boxes. When you do this the size is specified in pixels.
Right-Click in a table or cell and several menu options appear which allow the table or cell to be formatted as desired. Some of the options are context sensitive. ‘Table or cell background color’ allows the colour of the complete table or any cell to be set. ‘Table Insert’ provides means of adding rows, col- umns, individual cells or even tables into a cell. ‘Table delete’ provides the opposite. A cell can be joined with the cell on its right, thus merging two cells. Virgin cells cannot be split but joined cells can. If adjacent cells (whether within a row or column) are selected together they can be joined. Each cell, when clicked, reveals a set of six manip- ulation symbols (triangles and circles with x inside), these provide a rapid method of inserting or deleting rows and columns of cells as shown in the figure. Setting the cell back- ground col- our for adjacent cells to a dark colour reveals gaps between the cells. This may be convenient if the cells are to be filled with text as it avoids two items of text abutting each other. Tip. Once you have creat- ed a table using the ‘Precisely’ tab any table created subsequently us- ing the ‘Quickly’ tab will default to using the same width and border. If you delete the content of the width box the table will be created without a de- fined width. This setting will not however persist to tables created later.
At other times it is a problem. The gap is controlled by the ‘Cellspacing’ attribute.
It is possible to set a background image for a table or cell. The CSS Specification in section 14.2.1 recom- mends When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image). The image appears behind the contents of the table. If the image is larger than the table the table is unaffected i.e. does not grow to accommodate the image, as much of the image as will fit is displayed. If the image is smaller than the table several options are offered e.g. the image may be centred or tiled horizon- tally, or vertically or in both directions until it fills the table. To apply a background image
Right-click in a table, select ‘Table Cell Properties’ and the ‘Table Properties’ window appears. By select- ing the 'Table' Tab the spacing is revealed as defaulting to 2 pixels between cells. If this is set to zero the gaps referred to in the previous paragraph disappear. Note The ‘Table Properties’ window can also be accessed from within a table by clicking the ‘Table’ button. The ‘border’ defaults to 1 pixel. This border appears around the edge of the table and rules appear around each cell rendering the outlines easily visible. If the border is set to zero both border and rules disappear. If the border is set to a value greater than 1 pixel the rules re-appear and the border appears in the wider value specified. The exact appearance of the table border depends on the browser used. Other aspects of these lines e.g. colour or sup- pressing rules when table border is selected cannot be controlled using these methods. Note For full control of borders use a Stylesheet (see section 4.2.1 especially 4.2.1.3). (To set a border for the table/ normal cells/ header cells set the style for the table/ td/ th element as appropriate.) The ‘Table Properties’ window also allows the ‘padding’ to be set. Padding is the distance between the cell content, e.g. text, and the edge of the cell. This provides an alternative way of establishing space be- tween the content of adjacent cells. Padding applies to all four edges of a cell and to all the cells in a table. Once again use a style for fuller control.
This has already been referred to in section 3.6.2.2. KompoZer however provides several routes to colour- ing tables or cells. These include: Right-click on table and select Table Cell Prop- erties. Use Table button to open Table Properties win- dow. Right-click in table and select ‘Table or Cell. Background Color’.
As you work on a table the sizes of the cells may keep on changing. It is useful to understand how browsers treat tables. Unless the size of a table or cell is constrained in some way a browser will expand the cell in an attempt to accommodate any text inserted. Other cells in the same column will have the same width. This will tend to reduce the space available for any adjacent column of cells. Eventually the browser will attempt to balance the allocation to each column by wrapping the text. The overall effect will probably minimise the total height of the table. Tables can have their width completely unspecified, specified to be a particular width in pixels or some percentage of window width. When a table is started, the Insert Table automati- cally selects the ‘Quickly’ tab. This allows KompoZer to make the decisions. If the ‘Precisely’ tab is selected the user can make selections specifying the width in pixels or as a percentage and specifying the border width. Tables specified as percentage or unspecified are more accommodating to differing window or screen sizes and are recommended. Browsers do not have to slavishly follow instruc- tions. If a table specification is too narrow to accom- modate the cell contents the table will grow beyond its specified limit. This can occur if a large image is inserted or a long word like 'Antidisestablishmentarianism'.
The table properties window opens when you Click a table and click the table button Right click anywhere in a table and select ‘Table cell properties’. Tables and cells can be re-formatted in many ways. This means that you don't have to plan everything in advance before you start your table as settings can be adjusted later. The table properties window provides an option to insert a caption which can be positioned on any edge. For those familiar with them, the ‘Advanced Edit’ button gives direct access to inline styles.
Inserting text into a ta- ble cell is one of the sim- plest of tasks. Inserted text will be formatted as a TD element but may be re-formatted as a paragraph or using styles. Even the simplest of can tasks become tedious if carried out repetitively possibly copying and pasting from pre-prepared text. After selecting a piece of text KompoZer offers a useful facility via Tables > Create table from selection. Tip: Use HTML Tags view to see where to input the text.
file use the drop down list. Your anchor name should appear there preceded by a “#”. Click it and OK. That’s it! If you test your page on a browser when you click the link the view should move to show the position of the anchor. Note If your page is short you may not notice this. You need to test with a long page with the link towards the bottom and the anchor to- wards the top. With most browsers the anchor should be sit on the top visible line.
You can jump directly to the position of named anchors in other pages. KompoZer does not make this quite so easy to achieve. Proceed as in ‘Linking to another file’ above. Af- ter you have chosen the file and clicked ‘Open’ you will see the name of the file in the box, immediately after this type “#” immedi- ately followed by the name of the anchor. Thus, if your file was called ‘pagetwo.html’ and the anchor was called ‘p2anchor’ the com- plete entry should read ‘pagetwo.html#p2anchor’ (without the quotes). Be very careful to get the case of the text right. With some systems it doesn't matter but with others your link will fail if the case is wrong. (I recommend always using lower case for filenames and anchors.) Note The anchor name is ‘p2anchor’ NOT ‘#p2anchor’. The number symbol merely tells a browser that the following text is an anchor. You can also, and extremely usefully, jump to pages or places on other web sites. All you have to do is the enter the full URL (Web address) into the box. Again be very careful about getting the case correct. Make sure that the check box (‘URL is relative to page location’ is cleared (you may have no option). While you can link to named anchors on other sites I suggest that you don't do this. Confine yourself to linking to the home page (usually ending /index.html). To link to other pages or anchors presupposes that the webmaster will not re-arrange the structure of the site
Links are normally underlined and in blue text. If you look carefully you may see the colour change and wonder why. Links can exist in several states the principal are: unvisited links the initial state visited links have been visited in the past hovered cursor now hovering over While these probably appear in different colours it is the browser which determines this. Note For Transitional doctypes KompoZer offers a means of altering the colours via Tools > Options > New Page Settings. All new pages should use the new selections (they don't affect the currently open page). A better way to gain full, reliable control is to clear ‘Use custom, colors’ and set link colours using styles. See section 4.2.5.2.
The techniques and possibilities are very similar to those used with text. To create a link 1 Click on the image 2 On the Composition toolbar click on the ‘Link’ button, alternatively Right-click and select ‘Create Link’. The ‘Image Properties’ window opens 3 Click on ‘Choose File’ and browse to the file that you want to link to. (The box ‘URL is relative to page location’ is checked. This means that if you move your page to a new folder you should move the image to a corresponding new folder. If you clear this box the absolute address of the image on the hard drive is given in full. If you move your page now it will look there for the image. As you start to organise a web site you will find that this is not a good arrangement and potentially disastrous when you upload the page to a server.) 4 Click OPEN 5 Click OK
To change the file to which a link refers, in Normal, Tags or Preview mode double-click on the link. The ‘Link properties’ window opens (for an image the ‘Image Properties’ window opens - click the Link tab). Edit the link. To remove the link delete the link reference in the box.
If you don’t know what frames are read no further
Forms provide a mechanism by which a visitor to a site may send data to as sever for processing. This may be as simple as a box to write a message for e-mailing or as complex as looking up items from a catalogue and sending an order to a supplier. Forms collect data typed in or collected from check boxes or lists and pass them to the server. It follows that forms can be used only in association with compatible software running on the server. Forms may be placed on standard web pages and act as block level elements. In normal view KompoZer shows forms surrounded by a dotted cyan box. Forms may contain other standard block level elements (paragraphs, headings …) as well as several specific elements known as ‘form controls’ which are designed for data collection. Since these form controls are es- sentially inline elements they must be laid out inside block level elements (typically paragraphs though divs would be equally suitable). Each item of data sent to the server is tagged with information about which control has sent it. This is done by naming each control. Thus designers must give a unique name to each control to be used. The data collected by a form will be sent to a URL specified in an element ‘action’ which KompoZer will add to the form. This URL is often on the server that hosts the web page but does not have to be. The data will be processed using one of two methods known as ‘GET’ or ‘POST’ which also need to be specified. These details will be available from the provider of the asso- ciated software.
1 Click the form button. 2 In the Form properties window give the form a name of your choosing 3 Complete the Action box with the correct URL and select the appropriate method 4 ‘Encoding’ and ‘Target Frame’ will frequently not be required but, if they are, select ‘More Proper- ties’ and complete the boxes 5 Click OK 6 On the form place any headings, paragraphs and images ensuring that there is a placeholder for any controls needed. (If blank placeholders are needed it is probably sensible to put some dum- my text in now and delete it later.) 7 Where controls are needed click the correspond- ing placeholder and using the drop down box beside the Form button select the required con- trol 8 Give each control a unique name 9 Each control has specific information which needs to be entered. Enter it into the box in the window which appears Note Since this is a guide to using KompoZer and not to designing forms this is as far as we go.
If the standard form styles do not appeal it is possible by the use of styles to customise them to personal preferences. For those familiar with using styles some specific details are given in section 4.2.5.3.
One of KompoZer's ‘Tip of the day’ says “Did you know that ... you can move elements? Just place the caret in the block you'd like to move and click once on the Layer button to make the block movable.” Items forming layers are taken out of the normal document flow and placed in positions defined on the page absolutely e.g. in positions fixed relative to the page boundary. While layers introduce a level of flexibility to page design they also involve complexities that newcomers may wish to avoid. This section is therefore for those who wish to delve further.
To create a layer. 1 Click in the block that you want to format as a layer. 2 Click the layer button on the Format (2) toolbar. The block becomes a ‘Layer’. Layers have sizing boxes which allow the size to be altered. At the top of the layer is a positioning handle (denoted by a four-way arrow). To move the layer click and drag the handle. Layers do not have to consist of a single block – any sequence of elements that can be selected together can be converted into a layer. This may be several para- graphs with or without head- ings, images and tables. Layers allow items to be placed on a page so that the absolute position, relative to the page, is defined. This provides a facility common in drawing and desk top publishing programs and allows items to be overlaid on top of each other. As such it is a very powerful tool. Text items normally have transparent background so when overlaid become confused. By formatting them with a background colour they become solid. Similarly tables with solid background and non-trans- parent images may be overlaid on each other to pro- duce clear effects.
Items converted to layers have several characteris- tics which differ from ‘normal' items. Layers in KompoZer are contained in ‘div’ ele- ments. (For more on ‘div’ see section 4.5) Layers break out of the normal flow in which each block follows the previous and precedes the next. Layers, as created by KompoZer, have defined width so do not accommodate to narrowing or widening the viewing window. Layers do not however have defined height so will accommodate to changes in text size select- ed in the browser. Layers, as created, are characterised by three parameters ‘top’, ’left’, and ‘width’. These define, in pixels, how far the top left hand corner of the layer is from the top left hand origin of the page and how wide the layer is.
There is one further method which is very easy to apply and which is applicable not only to single ele- ments (e.g. Table (and/or cells), Image, Heading, Para- graph, Form) but also to a group opf elements. The method uses the full border capabilities of CSS which provides complete control of Colour of the border Thickness (width) of the border Style – Solid, dotted, dashed, double etc. Different choices for each side The method does not cover other options which are sometimes available elsewhere e.g. Padding. To apply a border select a block or highlight a group of blocks, then and click the ‘Borders’ button. Note The Borders button is not installed by default. To access it customise the Format Tool- bar. See section 9. Leave the check box ticked and set the style, width and colour for the top border. If all borders are to be the same click ‘OK’ otherwise clear the box and edit the settings for the other sides.
This is the background on which the whole page sits. The Body may be thought of as the Page itself. Normally it is of little concern to the designer but there are a few situations when it is. The body can carry a background colour or image which lies behind everything else on the page in HTML documents (in XHTML documents, the background content for the body element defines only the back- ground for the body element).Thus the overall appear- ance of a page can be significantly determined by this content. To set a background 1 On the Status bar click the marker. All the contents of the page will be highlighted. 2 Right-click and select ‘Inline Styles’ and ‘Background properties’. 3 Make the desired selections and click OK. The ‘Inline Styles’ allows you to set several other properties for the whole page. This includes Text, Border and Box properties. This can be a quick way of styling a whole page since Text properties, for in- stance, will trickle down (technically they are ‘inherit- ed’) to everything on the page for which they are not otherwise specifically stated. Border and box proper- ties are not inherited. Stylesheets (see section 4.4) often set several gen- eral properties for the body to avoid having to repeat them several times. Inline styles may set the body width to be less than the full window width. In this case it may be desired to centre the page in the window. To centre a page in the window 1 On the Status bar click the marker. All the contents of the page will be highlighted 2 Right-click and select ‘Inline Styles’ and ‘Box properties’ 3 In the ‘Width’ box select the width desired for the page 4 In the ‘Margins’ area in both ‘Left’ and ‘Right’ boxes type ‘auto’ 5 Click OK
If you have a long document with sections headed using heading formats Heading 1, Heading 2 etc Kom- poZer can generate a Table of Contents (ToC) automat- ically. The table reflects the structure of the page, the content of the headings forming the text of the table. By default the entries in the ToC will be linked to the heading to which they refer thus facilitating navi- gation around the page. If required, the ToC can be numbered so that the Heading 1 levels are numbered from 1 upwards, Head- ing 2 levels are numbered from 1 upwards but this numbering restarts each time the level 1 number is incremented. Similarly for lower levels. It is not necessary to list all heading levels in the ToC; for example it is possible to select only first and second levels. More importantly it is not necessary for the page to include any particular heading level so, if the page formatting uses Heading 5 and Heading 6 only, these may form the basis of the ToC; thus the use of Table of Contents imposes little restraint on the document structure. If the headings in the page do not provide a satis- factory structure for the ToC it is possible to include short paragraphs specifically for this purpose. These may be included at any level in the ToC. The selected paragraphs are identified by applying a named class style (section 4.2.3) generated for the purpose (unless fortuitously pre-existing). Alternatively a (section 4.5) to which a named class style has been applied may be used. Generating and using a ToC in this way has the considerable advantage that it can be automatically maintained ensuring that changes to the page are accurately reflected. A ToC works only within the page in which it resides. Links to other pages must be entered and maintained manually.
To insert a ToC 1 Place the cursor where the table is required 2 Click Insert > Table of Contents > Insert 3 The ‘Table of Contents’ window appears 4 In the column headed ‘Tag’ select the tag for each level e.g. against level 1 select h3 and against level 2 select h4 and for all the others select ‘--’ 5 If, instead of using headings you wish to use classed paragraphs or a div, instead of selecting a heading tag select ‘p’ or ‘div’ and in the box in the column headed ‘Class’ enter the class re- quired. (It is, of course, also possible to select headings by allocating a class.) 6 If you wish the contents to be numbered check the box ‘Number all entries ...’ 7 Click OK The Table of Contents will be created. Note The box ‘Make the table of contents read- only’ does not work. To update a ToC after changes have been made to a page. There is no need to place the cursor. 1 Click Insert > Table of Contents > Update
2 The ‘Table of Contents’ window appears showing the selections previously made 3 If desired, changes may be made to the selections 4 To update the ToC click OK To delete a ToC. There is no need to place the cursor.
KompoZer builds the ToC using Ordered or Unor- dered lists. (section 3.4.4). These lists have to be nested to produce the structure required. The result is that each level of the contents is indented relative to the previous. The indentation may be altered using styles and specifying the OL or UL and LI elements. The changes required will be to the margin and pad- ding (section 4.2.1.4). Any changes made will apply to all lists on the page (not only ToC). In order to make links work, each tag listed in the table will have a named anchor added automatically when the table is created or updated. Deleting a ToC also deletes all these anchors.
Every HTML document starts with a ‘Head’ area. This provides information to browsers, search engines etc but is invisible on the page. Items included on the head are gathered from a number of sources. These may include: Items dependent on the Doctype as set when creating the page (section 3.2.1). Items collected from New Page Settings (section 9.1). Includes Author, Language. Items set by the Format > Page Title and proper- ties menu. Includes Title, Author, Description, Language, Writing direction Character set. Links to stylesheets (section 4.1.3.3) Definitions for internal styles (section 4.1.3.2) Source view allows advanced users to add further information as desired.
KompoZer provides four ways of viewing a page - ‘Normal’, ‘HTML Tags’, ‘Source’, ‘Preview’. These are selected using the tabs on the Edit mode Toolbar. All provide full editing facilities. Preview mode offers almost the same view as in a browser with the addition of rulers and sizing boxes. The main differences are that scripts do not run (so their effects will not be seen), links do not operate and the style for links does not respond to any class set. Tooltips do work how- ever. Normal view is very similar but here table out- lines show and markers for named anchors ap- pear. HTML Tags view assists those familiar with HTML. There is a yellow marker for the start tag for all elements (end tags are omitted). Clicking on a marker selects and highlights the whole of the element. Note If clicking an element does not select it press the control key while clicking. You will also see the element highlighted on the Status Bar (see figure). If you switch to Source view the element remains highlighted, Note It will be on the screen but possibly right at the bottom. This is of great assistance in editing. Marker names correspond with the HTML tag name with a few excep- tions. Note Named anchors are shown with a symbol whereas linked anchors are denoted by ‘A’, The marker ‘Span’ is used when certain changes are made inline with text – for instance if the colour is changed for a single word. Span in HTML has a more restricted use being confined to changes implemented using styles. This may be confusing. In HTML Tags view background images do not appear. Source view shows all detail of the HTML code. All except the DOCTYPE may be edited. An additional view is provided via the ‘Browse’ button. This opens your default brows- er and gives full browser functionality and display to a page. Warning If your default browser is Internet Explorer the page may open in source view instead of page view.
This mode is intended for those confident in coding in HTML. In this mode KompoZer is not simply a text editor. On switching to a different mode KompoZer carries out checks to ensure that the code is valid. If not it ‘fixes’ it. It will have made its best guess at what was intended – if it gets it wrong there is no going back
