may be inherited by text within that table or division. For instance, if a div has font size set to 150% and a paragraph within the div has font size set to 1em then the text will actually be rendered at 1.5em due to it inheriting the scale from the div. Note A division is formed using the
element. See section 4.5 An example of how this can work is given in the next figure. Text sits in table cells, which sit within a table which sits within a division.
Showing content, padding, borders and margin Note The spin buttons beside each box allow fine adjustments to be made easily. In most cases the effect can be sen in real time on the screen. Float allows blocks to be treated rather like images and to float them to the right or left hand side of a page (or to the edge of the enclosing block). Other elements may therefore appear to wrap around them. Position, Offset and z-index are parameters related to the use of layers. These have been covered in section 3.
od simply select the ticked class, this deselects it. Using the class selector box select the style again, this should cancel it. Alternatively, after selecting the element, right-click on the highlighted tag on the status bar and select ‘Advanced properties’. The selected class will be listed select it and click ‘Remove’. 4.2.4 External styles There are three ways to start working with external style sheets External style sheets are created in almost exactly the same way as internal sheets. 4.2.4.
3 Click ‘Choose file’ and browse to the file that you need. 4 Click ‘Open’ 5 Click ‘Create stylesheet’ 6 Click ‘OK’ You can now close CaScadeS, but, of course you can work on the stylesheet in the usual way. 4.2.4.4 Saving stylesheets Once you edit a stylesheet in KompoZer its name is marked by a red symbol indicating that it has not been saved. When you close CaScadeS changed sheets are saved immediately.
8 Click ‘Create Style rule’ 9 You are now presented with a window headed ‘Selector’ followed by the tag for the element. The window actually lists the style declarations for that is now blank. Tip: id names must start with a letter otherwise they may use the same characters as class names. id, but of course that To apply an ID While, in principle, ids are similar to classes it is not possible to apply an id via the class selector box but the method is still easy.
4.5.2 Styles within a div 4.5.3 Creating a layer using a div A div is a useful way of applying a different set of styles within a limited region on a page. Of course a set of classes could be designed and applied to the elements within the region but this is laborious and bloats the code. A simpler way is to establish a set of styles for the elements in the div and to tag them in such a way that they apply only within the div. This is done using an appropriate selector.
6 Inserts The menu command Insert provides several options. Templates See section 7. Image See section 3.5.1. HTML Allows you to insert some hand-coded HTML code at any point on a page. (If you want to add code in the HEAD area you'll have to use ‘Source’ view instead.) Table See section 3.6.1. Form See section 3.9. Link See section 3.7. Named anchor See section 3.7.1.3. Horizontal line Inserts a horizontal line across the width of a block at the point selected.
7 Templates 7.1 What are templates? 7.4 Create a template from a page Templates are basically pages having some content (e.g. a letter head) which can be re-used to create other pages which will have the same underlying page structure and, often, the same graphical layout. Templates are not altered in use and can be used over and over again. The simplest template is probably a blank sheet which links to a stylesheet for use throughout a site.
7.6 Using templates To base a page on a template first ensure that the template itself has been saved and closed – a page cannot be based on an open template. Note All pages which KompoZer creates which are based on templates are created as HTML documents using the Transitional doctype. It is not possible to create XHTML documents or those with Strict doctypes from templates. To create a page 1 Click File > New > A new document based on a template > Choose File.
8 Site Manager 8.1 Overview The site manager allows you to navigate your site or between sites easily. To toggle the Site Manager on or off either press F9 or use View > Show/Hide > Site Manager. Site Manager can deal with sites irrespective of whether they reside on a local machine or on a remote server. In the latter case, if you are on a dial-up network, Site Manager will dial and make the connection for you.
9 Setting preferences 9.1 Preferences You can set up a number of features in KompoZer according to personal preferences. Several of the options are grouped under the Tools > Optons menu. In addition you can customise toolbars via the View > Show/hide menu. Defaults The defaults set by KompoZer will generally be found satisfactory.
Always show publish dialog when publishing pages If checked, KompoZer always displays the Publish Page dialog box when you Publish a page. If not checked, KompoZer only displays the dialog box if it needs more information in order to publish the page. Maintain table layout when inserting or deleting cells Tables are normally created as a regular matrix i.e. every row has the same number of cells. With this box checked inserting a cell in one row should also insert cells in other rows to maintain regularity.
9.3 Toolbars Customising Toolbars The list below shows the buttons, and the corresponding icons, available on KompoZer toolbars. The buttons are normally located on the toolbar indicated. A button may not be installed by default in which case the bar may be customised to make it available. You can view or hide the toolbars. On the Menu Bar select View > Show/hide then check which toolbar you wish to display. You cannot hide the menu bar. You can customise the toolbars to change which items appear on them.
Menu alternatives Since the Composition Toolbar is often the simplest way of carrying out a function this guide has generally assumed that buttons available for that bar are visible. If you have disabled the Composition or Format toolbar or a button, functions may be still accessed via the Menu bar. The corresponding selections are shown in the table. If there is a shortcut key (with control key) it is also listed.
10 Publishing 10.2.3 Formal validation 10.1 Introduction Publishing a site means transferring the site, i.e. the pages, images and stylesheets involved, to a web server from which they may be accessed, usually but not necessarily, by the public. This process is called ‘Uploading’. Prior to publishing there are a few checks which should be carried out. 10.2 Validating the site. Validating simply means checking that the page or site operates as intended.
10.3.2 Uploading Open the page that you want to upload. An easy way to do this is from the Site Manager. 1 Click the ‘Publish’ button. 2 On the ‘Publish Page’ window on the ‘Publish’ tab, if it is not your default, in the ‘Site name’ box select the site to which you want to publish. The ‘Page title’ and ‘File name’ should already be completed. 3 If the page is to be uploaded to a sub-directory, rather than the root directory, enter the name of a sub-directory and any of the other data if required.
Appendix 1 – Glossary This Glossary defines terms as used in this docu- Non-breaking space A space character which, though invisible, acts as a ment. As far as possible, when terms used also occur normal character in that a ‘word’ which includes a in the HTML or CSS specifications, they have the same non-breaking space will not be split to wrap a line. meanings as in those specifications. In such cases more precise definitions may be obtained there.
Appendix 2 – References HTML 4.01 Specification CSS2.1 Specification W3C HTML Validator CSS Validator http://www.w3.org/TR/html4/cover.html http://www.w3.org/TR/CSS21/ http://www.w3.org/ http://validator.w3.org/ http://jigsaw.w3.org/css-validator/ Appendix 3 – Doctypes A3.1 Introduction Doctype abbreviates ‘Document type Declaration’ which tells a browser which ‘Document type definition’ (DTD) to use to interpret a page. The Doctype also includes the URL of a file containing the DTD details.
http://www.webdevout.net/articles/beware_of_ xhtml.php Sending XHTML as text/html Considered Harmful from Ian Hickson, author of Web Hypertext Application Technology, Applications 1.0. http://www.hixie.ch/advocacy/xhtml XHTML is dead from Tommy Olsson. http://www.autisticcuckoo.net/archive.php?id =2005/03/14/xhtml-is-dead XHTML's Dirty Little Secret from Mark Pilgrim http://www.xml.com/pub/a/2003/03/19/dive -into-xml.html XHTML - What's the point? from Henri Sivonen http://hsivonen.iki.
Appendix 4 Installing KompoZer and extensions A4.1 Installing KompoZer The program may be downloaded from KompoZer's web site http://kompozer.sourceforge.net/. The site does not offer an installer but J C Steele has provided one for KompoZer 0.7.10. It is available from http://ww2.coastal.edu/jcsteele/kompozer/ With an installer available: 1 Download the Windows full installer from the downloads page 2 Save the program wherever you wish.
1 Right click the shortcut icon which you use to start the program. 2 Click 'Properties'. 3 On the shortcut tab .`Target' will show some- in thing like "C:\Program Files\Kompozer\kompozer.exe". 4 Change this by adding a space followed by -p to read something like "C:\Program Files\Kompozer\kompozer.exe" -p If you use more than one shortcut route you have can set others in the same way. When you launch the program you will now get a window like that shown in the figure.
Appendix 5 – Revision History 17-December-2007 At the date of issue this version contained the same information, with one exception, as the HTML version of that date. The difference is that this document omits all methods which are specific to Nvu (as distinct from KompoZer) because these are now of historical interest only. KompoZer User Guide — 17 December 2007 Based on version 0.7.
Appendix 6 – Character Encoding A6.3.2 ISO-8859 A6.1 Introduction Encoding refers to the details of how the characters in the source file for a web page are coded for transmission over the web. For the most part the author can leave all the details to be handled by KompoZer or the browser. This leaves a few options available to the author these generally provide a means of optimising a file only in rare cases do they affect functionality. A6.
means that, in principle, any character in the UCS may be used in any HTML document. In practice support for the complete character range is uneconomic and systems provide support for subsets only. A6.3.4 Character Encoding Table A6.3.
A6.3.6 UTF encodings ISO-8859 is fine when using one language at a time but becomes clumsy and slow when languages are mixed. UTF coding releases us from this restriction and provides a mechanism for addressing the full range of Unicode characters quickly. KompoZer allows coding in either UTF-8, UTF-16 or UTF-32 formats which are based on units of 8, 16 or 32 bits respectively. UTF-32 is not usually used for coding web pages. UTF-8 uses 1 to 4 bytes to represent a character.
Note A font list lists fonts the first of which will be used if available. It does not check that the character required is supported by the font. So even if support is provided by a font lower in the list that may not be accessed. Check the rendering of a page on as many different browsers as possible.
The output code for ASCII characters is the character code, for all characters for which an entity exists is the entity else it is a decimal numeric character reference. Final option The final option should output decimal numeric character reference for all non-ASCII characters but has a bug so that it uses a mixture of character codes (for ASCII characters) and entities or numeric references for others.
Full details of URL encoding are covered in RFC 3986 [Ref 14], Wikipedia [Ref 11] provides a simpler explanation. Authors often note that the names of saved files appear with spaces replaced by %20. As explained this is quite safe and indeed some operating systems prohibit unencoded spaces in file names. It is always preferable to avoid spaces when naming files. Use the underscore as an alternative. It is actually possible to use percentage encoding for any character in the Latin 1 set.
Appendix 7 - Making pages Printable A7.1 Preliminary A7.1.1 Introduction When web pages are printed the results are sometimes unsatisfactory. Using CSS, authors can often improve this significantly though browser support for some print rules is still somewhat limited. Although web pages are most commonly viewed on screen site visitors sometimes wish to print them to hard copy.
A7.2.1 Dimensions A7.2.1.3 Other dimensions The first thing to consider is probably whether the dimensions and units of measurement in the style sheet are appropriate for printing. The CSS Specification provides specific methods for specifying the characteristics of the printed page which includes size and margin and allows different margins for first, left- and right-hand side pages and even allows classes to be applied to different parts of a document to allow these to be changed.
The print stylesheet is loaded later and includes the rule .extlink { display: inline; text-decoration: underline; } Underlining the links makes them stand out and you may like to consider printing them in blue. The order of loading the sheets is important because, if the print stylesheet were loaded first and the unspecific ('all') sheet loaded subsequently this would override the print sheet. See section 7.3.1 A7.2.2.
tered though this may be modified using page-breakbefore. This is usually satisfactory but may not be optimal for lists and material in table cells however page-break-inside is unsupported there is little you can do about it. A7.3.3.2 Images Images are the one element that require the statement just made to be modified a little. Images are not normally broken so, when they will not fit in the space remaining on a page, a page break will be thrown and the image will appear on the following page.
Index Charset................................... 48 Classes............................ 22, 26 applying.............................. 26 applying to div.................... 29 removing............................ 27 Colour Hex and RGB values......... 25 names................................ 25 specifying........................... 25 Comments.............................. 31 Create a page.......................... 8 CSS........................................ 22 @ @media..................................
Markup Cleaner..................... 39 Markup Language.................... 7 Media types............................ 53 Menu bar.................................. 7 Merge cells............................. 13 Multiple IE.............................. 39 Shortcuts................................ 38 Site Manager.......................... 34 Smart quotes.......................... 11 Snapping................................ 18 Source view........................... 20 Special characters.....
