Trusted Windows (PC) download KompoZer 0.8b3. Virus-free and 100% clean download. Get KompoZer alternative downloads. With KompoZer, you can work on your web page using the graphical interface, or you can quickly switch to code view to make changes to the HTML code. Will have to download a program such as Fugu on.
Chapter 2: Adding Images, Changing Fonts / Colors and Linking
by Christopher Heng, thesitewizard.com
In the firstchapter of the KompoZer tutorial, you designed a rudimentary web page and uploaded it to the web host.
In this chapter, you will learn how to
- change font faces and point sizes;
- add section headers or titles;
- insert images;
- change the colour of the background and the text;
- and add a navigation bar and create links to other pages on your site.
By the end of this chapter you should have a working main page of your real web site.
If you missed the first chapter of this tutorial, please readHow to Design andPublish Your Website with KompoZer first.
How to Change Font Faces and Point Sizes
In the previous chapter, we typed the following text into KompoZer:
Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day,to the last syllable of recorded time; and all our yesterdays have lighted foolsthe way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player,that struts and frets his hour upon the stage and then is heard no more. It is a taletold by an idiot, full of sound and fury, signifying nothing.
Let's polish up the page. As it stands, we have not specified the font face that your web pageis to use. This means that your page will appear in the default font of the web browser yourvisitor is using, whatever that may be. For visitors using Internet Explorer on Windows, thisusually means that the 'Times New Roman' font face will be used, unless your visitor haschanged the default setting. Since the actual font face varies from system to system, andbrowser to browser, it is usually best to specify that a particular font be used by the browserevery time it displays your page, so that you have more control over the appearance of your web page.
To do this, select the text of the entire page. This can be done with the mouse by draggingthe mouse cursor from the first 'S' in 'Shakespeare' to the full stop (period) after thelast word. Alternatively, type Ctrl-A (type 'a' while holding down the key labelled 'Ctrl')in Windows to select everything.
From the 'Format Font' submenu, select either 'Helvetica, Arial', 'Times' or 'Courier'.I will assume that you selected 'Helvetica, Arial' in this tutorial. 'Helvetica, Arial'(actually 'Helvetica, Arial, sans-serif' although the menu does not say it)means that the browser will try to use a font named 'Helvetica' on the visitor's computer if available,otherwise it will use the 'Arial' font. If the latter is not available either,the browser will try to use another sans-serif typeface. For the curious:the Helvetica and Arial fonts are very similar in appearance. Arial is found by defaultin Windows systems, while Helvetica is available by default in a number of other systems.
The appearance of the text should instantly change. If you are running Windows, the Previewwindow will now show your text using the 'Arial' font.
You can also change the point size of the font on the page. For example, if you thinkthat the text of the 'Tomorrow, and tomorrow' paragraph is too small for your visitors (for example, yoursite caters to people who need large print such as the elderly or the visually impaired),select the 'Tomorrow, and tomorrow' paragraph, and go to the 'Format Size' menu. You can experiment withthe various sizes till the text of the page is to your liking. Be careful not to makethe text too small. What looks good on your computer with your particular monitor resolutionmay be unreadable on a different system with a high resolution monitor.
Do not change the point size of 'Shakespeare's Website'. We will do this next, using adifferent technique.
How to Specify Headers and Titles
In web design lingo, the text 'Shakespeare's Website' is actually regarded as the header of the paragraph, or perhaps of theentire page. By convention, both in print and on the web, headers are usually in boldand in a larger point size than the rest of the text on the page.
While it is possible to simply change the point size of the text using the techniquedescribed earlier, headers are usually specified in a different way.
Select the text 'Shakespeare's Website' at the top of the page. Go to the'Format Paragraph' menu and select 'Heading 1'. 'Shakespeare's Website' should now bein a large point size and in bold.
You may have noticed from that menu that there are a variety of header styles — 'Heading 1'to 'Heading 6'. Although KompoZer will not prevent you from doing so, you shouldonly use 'Heading 2' after you have used 'Heading 1', 'Heading 3' after you have used'Heading 2' etc. That is, 'Heading 1' is meant to be used as the topmost header in the hierarchy,with 'Heading 2' used for the lower level section headers, and so on.
Note that even though you're using 'Heading 1' for 'Shakespeare's Website', it is stillpossible to control or change the point size and font face using the method mentioned earlier.
Now save the page with 'File Save'. If the 'File Save' option is disabled, use 'File Save As'. KompoZer may ask you for the filename again.Simply choose the 'index.html' file, and click 'OK' to replace the existing version. Note that you must save your page before you go on to the next step,or KompoZer will disable certain features that you will need later.
How to Add Images
If you want to add an image to your web page, you must have a means of creating that image.For that, you either need to have access to a graphics drawing program, or if you alreadyhave the picture on paper that you can use (such as a logo that is printed on yourcompany's letterhead), you will need to scan that picture into the computer.
If you are creating your own pictures, you need a drawing program that can createeither PNG, GIF or JPG files. If you have no idea where to get such a drawing program,you can find a list of free programs on thefreecountry.com'sFree Drawing and Painting Software page.
A description of how to use a drawing program or a scanner is outside the scope of thistutorial. However, a basic guide to designing a logo for your site can be found in my other tutorial,How to Create a Logo for Your Site the Quick and Easy Way:Logo Making for the Graphically Challenged.
Place the image file into the same folder as your index.html page. Alternatively, you may create a subfolder named 'images' in the directorywhere you saved your index.html file in the last chapter, and copy your image file into it. If you don't know how to create a subfolder, justplace the image in the same folder as index.html.
For the purpose of this tutorial, I shall assume that your file is called 'logo.gif'. I recommend that you name your files using small letters (that is,lowercase letters) with no spaces in the name. This avoids avariety of problems that occurs when yourfilenames has capital letters (uppercase letters) and spaces.
To insert an image beside the words 'Shakespeare's Website', position your cursor to the left of the word 'Shakespeare' (or whatever word you have typedin the header). Select 'Insert Image..' from the menu. A dialog box will pop up asking youfor the location of the image. Click the 'Choose File' button (next to the box for 'Image Location') to select your image and click 'Open'.
Under the 'Image Location' box, which should now contain the name of your image file, the 'URL is relative to page location' box should havea tick in it. If not, click it to enable it. If the box is grayed out, it means that either you have not published your page before oryou have not saved your file since your last change or both. Click the 'Cancel' button and fix the error before returning to this step.For example, if you have not published it before, return tochapter 1 of the KompoZer tutorial for more informationon how to do this. If you have already published your page previously and still encounter this error, it means that you have not saved the file aftermaking some changes. Do it before returning here.
In the 'Alternate text' field, enter 'Logo for Shakespeare's Website'. The text you type here willbe displayed if the visitor uses a browser that does not display graphics or has thegraphics display deliberately disabled. It is also useful for people who are blind orvisually impaired, and rely on speech synthesizers to read web pages out aloud for them.As such, any time you add a picture, it is important that you add some sort of descriptive text in the 'Alternate text' field.As a side benefit, adding the alternate text alsoimproves your website's search engine friendliness, whichis an important part of website design if you want your site to have visitors.
Click the 'Appearance' tab in the dialog box. You can now change the alignment of the image. Click the down arrowin the box under the 'Align Text to Image' field to display a menuwith the options available for that item. Select the item 'Wrap to the right' on that drop down menu.This will cause any text that follows your picture to move to the right of the image.
Click the OK button. Your image should display to the left of the words 'Shakespeare'sWebsite'. Depending on the height of your image, it is possible that some of the wordsin the paragraph that follows are also aligned to the right of the image.
Move your cursor to the start of the main paragraph, that is, move it to the first 'T' in'Tomorrow, and tomorrow'. Select 'Insert Break Below Image(s)'. The paragraph should now startbelow the image and not wrap to the right of it as before. Note: You do not have to do this if your imagedid not affect your main paragraph. To undo what you just did, click 'Edit Undo' on the menu. You canalways use 'Edit Undo' to undo something that you just did, if you decide that it was a mistake.
Kompozer Templates Free Download
At this point, your page may or may not look good, depending on the size of your image.If your image is too large and the text too small, the alignment will not look good. Oneway to fix that is to adjust either the size of the image (use your drawing program) orthe size of your heading.
If putting the image to the left of your header does not work too well, you can insertthe image above your header. To do this, delete the existing image by clicking on it with yourmouse, and hitting the Delete key. Next, insert a blank line above your header and moveyour cursor upwards to the blank line. Insert the image as before,only this time, do not change the alignment of the image in the 'Appearance' tab (just leaveit set to the default).
If you insert an image in this way, you may want to centre ('center' inUS English) both the image and theheader 'Shakespeare's Website' on your web page. To do this, click on the image once to select it. Then select 'Format Align Center'.Similarly, to centre 'Shakespeare's Website', select the text, and then use 'Format Align Center' from the menu again.
Background Colour and Text Colour
There may be occasions that you need to change the colour of certain aspects of your web page.For example, you may wish to change the background colour of your page. To do this, select'Format Page Colors and Background' from the menu. Click 'Use custom colors', and thenthe colour button beside 'Background'. You will be presented with a dialog box with manycolours to choose from. Select your preferred colour then click OK to accept the changes.
If you are changing the colours of your background and text, be sure to select coloursthat will contrast well so that your text can be easily read.
How to Create a Link to Another Page
In the chapters to come, we will create a number of other pages. In order for your visitorsto reach those pages, you need to add links to those pages.
To create a series of links to the other pages on your site, do the following:
Move your cursor to the bottom of the page. Leave a blank line after the paragraph above.We will be creating a navigation bar for this site at the bottom of this page.
Select 'Insert Link' from the menu.
Enter 'Home' (without the quotes) in the box entitled 'Enter text to display for thelink'. This will be the underlined text that visitors will see.
For the 'Link Location' field, enter 'index.html'.
Click the OK button.
Using the same procedure, add links to the following pages as well:
- About Us (aboutus.html)
- Feedback Form (feedback.html)
- Reciprocal Links (links.html)
- Site Map (sitemap.html)
Separate the links using spaces and a vertical bar (see picture below).
Where's the Vertical Bar?
For those who don't know how to get the vertical bar (ie, ' '), you can find it on your keyboard.
The exact location, however, varies from keyboard to keyboard, which in turn varies from country to country, manufacturer tomanufacturer, and keyboard model to keyboard model. On many keyboards, it's the same key as the backslash (') character. If you use a US keyboard,look at the keys below or next to the backspace key. If you use a UK keyboard, check the key next to the left Shift key. If it's not there, youmay be using a different keyboard model (with a different layout) from those I'm accustomed to. In such a case, just go through your keyboard keyby key, in a systematic manner, to look for it.
At worst, if you really cannot find the character, use some other character (eg the colon, ':'). I'm using it merelyto separate the links visually. The exact character doesn't actually matter.
When you've finished putting up all the links, the bottom of your page should look like the following:HomeAbout UsFeedback FormReciprocal LinksSite Map
Select the entire line at the bottom, centre the line with 'Format Align Center', andif you wish, change the font to 'Helvetica, Arial' as before.
At this point, your page should look something like the following. Since I don't knowwhat picture you used nor its size, I've put a placeholder in the diagram below:
Writing the Real Content of Your Main Page
At this point, you have a working main page for your web site, except that the real textfor the page has not yet been written. You should now replace the header on the page (ifyou have not already done so) and the quote from Macbeth with the real content of your site.
Here are some tips on what you can put on your main page.
Replace the header 'Shakespeare's Website' with the real name of your website.
Visitors arriving at your site at the main page should be able to tell what your site isabout. The text and graphics in your site should work together to that end. This does notmean, though, that you have to write a long story on your front page describing the purpose ofyour site or company. However, simply putting a cryptic picture in place of the existingShakespearean text will not help your visitors figure out what your site or your companyis all about.
Your main page should also allow visitors to access the rest of the site. For the purposeof this tutorial, we have placed links to certain pages of the site that are found ona typical company website. If you intend to have other pages, for example a page listing yourproducts, you should create a link to that page as well. Important:when creating filenames for these other pages, create names that do not have any capital letters(ie, uppercase letters) or spaces in them. Spaces and capital letters in the names might lead toproblems in the future. See the articleHow toCreate Good Filenames for Your Web Pages if you want more information.
Once you've finished rewriting the text on the page with more appropriate content foryour site, save the page by clicking 'File Save'. Next, you will have to republish the updated page to your site.Select 'File Publish'. When the dialog box appears,put a check in the checkbox for 'Include images and other files' if it's not already there. If you don't do this, yourimages will not be uploaded to your website. Finally, click the OK buttonto allow KompoZer to upload your revised page to your web server.
Congratulations — you now have a functional main page for your website.
Next Chapter: Data Tables and Multi-Column Layouts
In the next chapter of this tutorial, you will learn how to use data tables as the firststep to learning how to create multiple column layouts for your website.
Next: KompoZer Tutorial 3:Creating Data Tables.
Copyright 2003-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/
thesitewizard.com's KompoZer Series
You are here:Top >Getting Started with Your Website >KompoZer Tutorial 2: Adding Images, Changing Fonts, Changing Colours, Creating Links, Writing Your Content
Do you find this article useful? You can learn of new articles and scripts that are published onthesitewizard.comby subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds athttps://www.thesitewizard.com/thesitewizard.xml.You can read more about how to subscribe toRSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 24 May 2018.
On this page:
KompoZer is an excellent tool for building web sites but, like almost any software package, it has a number of bugs and short-comings.
However, the Add-ons and external packages listed on this page can provide work-arounds and so improve the product that almost entirely overcome any concerns a new user will have.
This page describes where to obtain the additional software and how to install it into your working copy of KompoZer.
UK English Dictionary
The default download from both the KompoZer and PortableApps site provide a US English dictionary. British users will want a UK English dictionary. Obtain a copy from the KompoZer site's Download page.
KompoZer: British Dictionary
Once downloaded, launch KompoZer, then:
- Open the TOOLS menu and select ADD-ONS. (The Add-ons dialogue appears)
- On the top of the dialogue, ensure that EXTENSIONS is selected, then click the INSTALL button. (This opens a standard Open File dialogue with 'Select the extension to install' on the title bar)
- Navigate to the location to the file you downloaded, select it and open the file. (The Software Installation dialogue appears)
- On the dialogue, click the INSTALL NOW button. (A revised version of the Add-ons dialogue reappears.)
- Click the RESTART KOMPOZER button.
After relaunch the dictionary is installed, but not yet active. To activate the dictionary, manually start a spell check. When the spelling dialogue opens, drop down the Language list and select the dictionary to be used. Complete the choice by clicking the OK button. This then sets the default dictionary for further spell checking.
Kompozer Download For Mac
KompoZer is designed to hide the source code it generates, so that you can create and edit your site entirely through what KompoZer calls DESIGN view, it's default WYSIWYG interface. For beginners wanting to learn about HTML there's also a facility called SPLIT view, which allows you to view, and edit, small snippets (and more) of the code. However, if you plan to use KompoZer for more than the simplest of sites, or you know you will want to edit HTML (HyperText Markup Language) code from the beginning, then you should add a text editor to your installation.
Version 0.8 of KompoZer is still a work in progress. The developer acknowledges that its SOURCE view is less than ideal, especially for editing the code. Although Windows comes with the text editor 'Notepad', it's facilities are limited. It is recommended that you use an editor that includes, at least, the following features:
- Line numbering, (so it is easier to reconcile reports from an HTML validator)
- Syntax highlighting for HTML, CSS, PHP and perhaps other languages (so it is easier to find particular sections of code)
- Auto Indenting (to help in laying out the code to make it easier to read)
- A facility to launch further programs that will enable further processing of the code.
Feel free to use your preferred editor if it exceeds these minimum standards. I have opted to use Notepad2. This is free, open source, small, quick loading, and will run portably from a USB flash drive. (On my Win 7 computer, I have created a folder at: C:UsersMyUserNamePortableAppsNotepad2 and placed the .exe and .ini files for the program there. This overcomes some of the UAC controls and makes it easy to include the program and settings in my backup regime )
To enable KompoZer to recognise your preferred editor:
- Open the TOOLS menu and select PREFERENCES
(To open the OPTIONS dialogue)
- On the Options dialogue click the APPLICATIONS button
(To select the External Applications page on the dialogue)
- From the drop-down list select TEXT EDITOR, then the radio button, USE CUSTOM APPLICATION
- Complete the FILE PATH field. (It is easiest to use the Browse button to the right of the field to navigate to and select the application file and its full path name)
- Click the OK button
If you plan on developing anything other than the simplest sites and have installed an appropriate text editor, as suggested above, I regard it essential to add HTMLTidy to complete a KompoZer installation. HTMLTidy will reformat the somewhat untidy source code that KompoZer produces, making it easier to read. It will also correct a whole range of syntax errors that you may introduce when coding by hand (and some that, in very rare cases, KompoZer may produce).
Like Notepad2, HTMLTidy will run from a USB flash drive. On a Win 7 computer, I'd recommend placing the tidy.exe file in a folder at C:UsersMyUserNamePortableAppsHTMLTidy .
HTMLTidy is not a native Windows program and a full explanation of its features is beyond the scope of this site. To get the best from it you will need both a configuration file to set some of its many options and a further 'batch file' to launch it using those options.
Below, I offer a set of commands that may prove a useful starting point. Place the text below in a file named 'tidy.cfg' file and add it to your HTMLTidy folder:
(For an explanation of these settings see the HTMLTidy Quick Reference.)
Then create a file 'tidy.bat' which you'll use to launch HTMLTidy with the options in the configuration file. For the folder structure suggested above, this file should contain the text:
which must all be placed on a single line.
NOTE: There must be a space between tidy.exe and -config when the two lines above are joined and you will need to edit the path to the files to reflect your own installation.
For those using Notepad2 solely in connection with KompoZer I'd recommend placing this in a further sub-folder:
D&d best damage type. C:UsersMyUserNamePortableAppsHTMLTidyRunTidy
Then select this folder as the one to be used in the dialogue that appears when using the option FILE > LAUNCH > OPEN WITH (You'll use the keystroke ALT-L, of course, and then when you need to run HTMLTidy ALT-L, DOWNARROW, ENTER.)
Page updated: 10 December 2011