Kompozernotes

How to build a website using KompoZer. Websites are formed of multiple files that reside in a server. To keep websites organized, itʼs important that all the files related to the website are located inside the same folder. For larger websites, you may need to create subfolders to keep files easy to find, but in the end, all of this subfolders should be inside the same folder or directory. It is recommended to plan the website in advance so you can decide how to organize your folders from the beginning. If you move files or folders around after you have created hyperlinks, this links could stop working. The first step to creating a website, is to create the folder that will hold all the files needed for the site, defining the site and saving your main page. 1. Create a folder on your desktop by right clicking on it and selecting “Create New” “Folder” and call it “My Website”

How to build a website using KompoZer. 2. Open Kompozer. The program is located in the main menu, under the category “Development”, and it reads “Web Page Creation”.

To define the site, click on the Edit Sites icon under the Site Manager. A "Publish Page" dialog box will appear asking you for more details.

•

"Site Name" is the name that you want to give your website. Use the name that you gave to your website (ie, "Shakespeare's Website" or "XYZ Company" or

How to build a website using KompoZer. whatever). This name is only used by KompoZer internally, to refer to your site, but it's probably best to use the real name you ultimately wish to give to your site to minimize any confusion later.

•

The "HTTP address of your homepage" field specifies the actual web address (or URL) of your website. If you registered a domain like "example.com" for your site, enter "http://www.example.com/" into this box. This field is required because KompoZer will use this information to form links on your site. Be sure to enter the "http://" prefix as well.

•

"Publishing server" is a bit more complicated to explain. For the purpose of this tutorial, I will assume that your “Publishing Server” is the folder we created before.

•

The "User name" and "Password" fields in the dialog box refers to user name (or login name) and password that your web host assigned to you. It is needed so that KompoZer can connect to your FTP account and upload (publish) your pages. (f.or this example, this are not needed since we are not publishing to the web)

When you've finished completing the information, click the "OK" button. The name of your site should now be listed in the Site Manager. Now you can start Building your first page. Type a title at the top and add some text to the page. Formating and alignment work the same way as in a word processor, with the exception that you canʼt align text by using the spacebar, it has to be done with the alignment tools.

Now is time to save your first page. Click on the Save Icon (remember: the main page of a site is always saved as “index”) make sure you are saving the file inside the folder we created for your website.

How to build a website using KompoZer. Add images to your Web Page 1. Move the images you want to add into your “My Website” folder. Make sure that the name of the image contains the corresponding extension (.jpg, .gif, .png, etc.)

2. From KompoZer, refresh the “Site Manager” Window. The names of the images should appear on the window.

How to build a website using KompoZer. 3. Drag the name of the image you want from the site manager into your page.

4. Once the image is on your page, you can adjust the size, alignment with the text, etc from the Image properties menu (1) -Click on the appearance tab, here you can choose to apply a margin between the image and the text. (2) You can also change the way the image aligns with the text (3). Try the different ways so you can see how they work.

1

2 3

Below you can see the different alignments:

How to build a website using KompoZer.

Wrap to the Right





Wrap to the Left

Align Top





Align Bottom



How to build a website using KompoZer. Add a Hyperlink. Links provide the main means of navigating web sites. They allow you to move quickly from one place to either another on the same page, a different page on the same site or a page on an external site. Links may be attached to any element on a page, in fact almost any part of a page content can form the basis of a link. Usually however we use a few words of text or an image which we click on to activate the link.

To create a link Link to a file. 1 Select (highlight) a few words of text 2 On the Composition toolbar click on the ʻLinkʼ button, alternatively Right-click and select ʻCreate Linkʼ. The ʻLink Propertiesʼ window opens

3 Click on ʻChoose Fileʼ and browse to the file that you want to link to 4 Click OPEN 5 Click OK

How to build a website using KompoZer.

In Normal or Preview mode you will now find your text underlined and in a different color (probably blue) Instead of linking to a file it is possible to insert an email address. The result will be that, in use, when the link is clicked the email client on the visitor's machine will be opened with the correct address selected. To do so, when the Link Properties window opens (or if Image Properties click the Link tab) enter the email address and check the box ʻThe above is an email addressʼ.

How to build a website using KompoZer. Using Tables Tables allow data – images, links, forms, form fields, text, etc. – to be arranged into rows and columns of cells. A table is basically a rectangular grid forming an array of boxes into which the data are placed. The 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 colored. 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. To insert a table 1 On the Composition Toolbar click the Table button. The ʻInsert tableʼ window appears 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.

Formatting tables Table size 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 possible to adjust the size of a table using the sizing boxes. When you do this the size is specified in pixels. Coloring, adding deleting and merging cells, rows and columns

How to build a website using KompoZer. 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 color of the complete table or any cell to be set. Table Insertʼ provides means of adding rows, columns, individual cells or even tables into a cell. Table deleteʼ provides the opposite. A cell can be joined with the cell on its right, 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 manipulation 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