kompozernotes

Upload: alex-hc

Post on 30-May-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/14/2019 KompoZerNotes

    1/10

    Websites are formed of multiple les that reside in a server. To keep websitesorganized, it s important that all the les related to the website are located inside thesame folder. For larger websites, you may need to create subfolders to keep les easyto nd, 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 organizeyour folders from the beginning. If you move les or folders around after you havecreated hyperlinks, this links could stop working.

    The rst step to creating a website, is to create the folder that will hold all the lesneeded for the site, dening 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.

  • 8/14/2019 KompoZerNotes

    2/10

    2. Open Kompozer. The program is located in the main menu, under the category Development, and it reads Web Page Creation.

    To dene 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.

  • 8/14/2019 KompoZerNotes

    3/10

    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" eld species the actual web address (orURL) of your website. If you registered a domain like "example.com" for your site,

    enter "http://www.example.com/" into this box. This eld is required because

    KompoZer will use this information to form links on your site. Be sure to enter the

    "http://" prex 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" elds 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 nished 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 rst 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 rst page. Click on the Save Icon (remember: the main page of

    a site is always saved as index) make sure you are saving the le inside the folder we

    created for your website.

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    4/10

    Add images to your Web Page

    1. Move the images you want to add into your My Website folder. Make sure that thename of the image contains the corresponding extension (.jpg, .gif, .png, etc.)

    2. From KompoZer, refresh the Site Manager Window. The names of the imagesshould appear on the window.

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    5/10

    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, etcfrom the Image properties menu (1)-Click on the appearance tab, here you can choose to apply a margin between theimage 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.

    3

    2

    1

    Below you can see the different alignments:

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    6/10

    Wrap to the Right Wrap to the Left

    Align Top Align Bottom

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    7/10

    Add a Hyperlink.

    Links provide the main means of navigating web sites. They allow you to move quicklyfrom 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 factalmost any part of a page content can form the basis of a link. Usually however we usea few words of text or an image which we click on to activate the link.

    To create a link

    Link to a le. 1 Select (highlight) a few words of text

    2 On the Composition toolbar click on the

    Link

    button, alternatively Right-click andselect Create Link . The Link Properties window opens

    3 Click on Choose File and browse to the le that you want to link to

    4 Click OPEN5 Click OK

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    8/10

    In Normal or Preview mode you will now nd your text underlined and in a different color(probably blue)

    Instead of linking to a le 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 openedwith the correct address selected. To do so, when the Link Properties window opens (orif Image Properties click the Link tab) enter the email address and check the box Theabove is an email address .

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    9/10

    Using Tables

    Tables allow data images, links, forms, form elds, text, etc. to be arranged intorows 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, maybe either visible or invisible. The boxes are called cells' and may be colored. The gridlayout does not have to be regular - the rst row may have one cell the second four, thethird three; however,when rst inserted, it will always be regular.

    To insert a table

    1 On the Composition Toolbar click the Table button. The Insert table window appears2 Leave the Quickly tab selected and drag out a matrix then click the bottom right cellto dene the table arrangement3 The cells appear on the screen with narrow outlines

    Note If later the table border is set to zero these outlines disappear but KompoZer innormal view replaces them with a red outline. This does not appear in Preview or in abrowser.

    Formatting tables

    Table size

    Tables at full window width give the maximum available space for data. The widthaccommodates to screen or window size.It is possible to set the width to a smaller percent age of window size or to a xed size inpixels. Fixed sized tables are inexible in use and could result in the user having toscroll 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 thesize is specied in pixels.

    Coloring, adding deleting and merging cells, rows and columns

    How to build a website using KompoZer.

  • 8/14/2019 KompoZerNotes

    10/10

    Right-Click in a table or cell and several menu options appear which allow the table orcell 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 beset.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 besplit 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 circleswith x inside),these provide a rapid method of inserting or deleting rows and columns ofcells as shown in the gure

    How to build a website using KompoZer.