Upload
haffizan
View
1.247
Download
3
Embed Size (px)
DESCRIPTION
how to use kompozer
Citation preview
KompoZer
Learning Outcomes:
1. Design web page using KompoZer software.
2. Make a hyperlink.
3. Make a link using anchor.
4. Create site manager.
5. Preview web page.
6. Using Script HTML to insert flash media and song file.
7. Publish web page.
8. Define what is Internet.
9. Define what is World Wide Web (WWW)
10. Define what are web browsers, search engines
Interface of KompoZer
1
Before starting create web page:
1. Copy ALL file from Folder SOURCE > KOMPOZER as stated below into
Folder GROUP > WEB
Define Site Manager
1. Press F9 to open site manager on your left screen.
2. Click on Edit site button
3. Type Internet in the site name field > click on Select Directory
4. Click Select GROUP > WEB > OK
2
5. Click OK in Publish Setting box.
Starting new page
1. Click New button in toolbar.
Page 1 :index.html (size page 640 X 480)
Insert Background image
1. Click Format > Page Color and Background.
2. Click on Browser > folder GROUP > WEB > choose Background1
3. Click OK.
4. To edit again , just repeat step 1.
Insert and Format Text
1. Click File > New
3
2. Type Internet on page area.
3. Highlight the Internet text. Click on Format Toolbar2 ,
4. Change the font colour, size and style.
Figure 2: Format Toolbar 2
To open Format Toolbar2, just click View > Show /Hide > Format Toolbar2 .
5. Press Enter > Type Definition
6. Press Enter.
Insert Script HTML (Flash media image)
1. Click Insert > HTML
2. Type the data given below in the HTML box.
3. Click your cursor besides the object.
4. Press Enter.
4
<div style="textalign: center;"><object height="200" width="640"><param name="movie" value="banner.swf"><embed src="banner.swf" height="200" width="640"></object></div>
Insert Song
1. Click Insert > HTML
2. Type :
<div style="textalign: center;"><br>
<embed src="songhave.mp3" height="72" width="363"><br>
</div>
3. Once completed, Click Insert.
4. Press Enter.
Insert Image
1. Click Insert > Image
2. Click on choose file button
3. Select GROUP >WEB > Internet.jpg (image file).
4. Type Internet on Alternate text label, Then click OK
Save File
5
1. Click File > Save > OK
2. Save in: GROUP > WEB , File name : index , Save as type : HTML file
Create more web page (Refer Apendix A and B)
1. Click New icon
Insert Table
1. Click Table icon,
2. Click Precisely tab, Change Rows : 8, Column : 5, Width : 100% window,
Click Ok
3. Highlight table > right click > Table Cell properties
4. Click Table tab and change the information as in figure C .
6
Figure C
Height : 480 pixelsWidth : 640 pixelsBorder : 0Spacing : 2Padding : 2Table Alignment : Center Background Color : Orange
5. Now your table should be like this.
A1 A2 A3 A4 A5B1 B2 B3 B4 B5C1 C2 C3 C4 C5D1 D2 D3 D4 D5E1 E2 E3 E4 E5F1 F2 F3 F4 F5G1 G2 G3 G4 G5H1 H2 H3 H4 H5
Join Selected Cell
1. Highlight A2 until A5 > right click > Join selected cell.
2. Repeat step 1 until you get the result as shown below.
7
3. Fill in the table as below. Save your file : definition.html
8
Click A to delete Column or row.Click B to insert column and row.Click C in ruler to resize column and row.D is to merge cell, Select cell > right click > Join selected cell. To split cell, Select cell > Right click > Split cell
A
B
C
Notes :
D
Format Text in the table
1. Highlight row A , row B
2. Click Format > Align > Center
3. Highlight column A1 until A8, repeat step 2.
Format Paragraph.
1. Highlight cell below
9
2. Click Format Toolbar2 > Body text > Paragraph.
10
i ii iii iv
v vi vii
Insert Image
1. Click on cell i, Click Insert > Image
2. Choose file GROUP > WEB > ie.jpg
3. Type ie on Alternate Text
4. Repeat step 1 – 3 for the according cell as in table below
Cell Image Alternate Textii. Mozilla.jpg mozillaiii. Safari.,jpg safariiv. Opera.jpg operav. Google.jpg www.google.comvi. msn.jpg www.msn.comvii. Yahoo.jpg www.yahoo.com
11
Make hyperlink
1. Highlight Home text, Click Link button
2. Click Choose File in Link Properties box.
3. Select file in your GROUP > WEB > index.html
4. Click on image google,
5. Click link and type www.google.com in the box.
6. Repeat step 4, for the
a) image msn , link : www.msn.com
b) image yahoo, link : www.yahoo.com
7. Double click file index on site manager, Highlight Definition text, Make
hyperlink to definition.html
Use Anchor as link in same file.
You need to do 2 Steps as the following.
A. To define anchor for your object :
12
1. Highlight Search Engine (text on the first column, last row)., Click on
Anchor button.
2. Type Search Engine for under anchor name, Click OK.
3. The text will have yellow symbol on its left.
B. Make a link
1. Highlight Search Engine (text on top of the document).
2. Click link button.
3. Select #target Search engine in Link Properties box. Then OK.
4. Repeat the step A and B for Internet, World Wide Web, Web Browser text
on the first column. Anchor name : Same as highlighted text
Preview your web page
1. Click Browse > Launch Application
Publish Website in local host
1. Click File > Publish
2. Click on Include image and other files
3. Wait until it published your web site using browser.
13
PUBLISH WEB SITES
Publish your web site using Xampp.
1. Install Xampp_win32
2. Open Xampp Control Panel, make Apache, MySQL, FileZilla running
3. Copy Your WEB Folder in Folder C:\Xampp\htdocs
4. Open Browser (Internet Explorer or Mozilla firefox)
5. Type http://localhost/web at the address field, and then press Enter.
Publish your web site using GeoCities
1. Type in www.yahoo.com at the address field.
2. Find geocities text and click on it. Page http://geocities.yahoo.com/home/
14
3. Click sign in , then answer questions given.
Welcome to Yahoo! GeoCities
We just sent you a confirmation email explaining everything you need to know to
build your very own web site. Be sure to write down your Yahoo! ID and
password for future reference.
Your Yahoo! ID and Home Page Information
Your Yahoo! ID is: pnzurai
Your home page URL shortcut is: http://www.geocities.com/pnzurai
Build your web site now!
4. Click Build your web site now.
5. Click Create and Update tab > Easy upload
6. Do this
a) Click Browse button> Select file
b) Repeat process A until all file done
7. Click Add more files button .
8. Click UploadFile button
9. To open your web page, just type http;//www.geocities.com/username on
the address field in Internet Explorer.
15
Publish using server
1. You have to install software winscp.
2. You need to know ip server, username and password
How to publish :
1. Double click on the Winscp program on desktop
2. Type host, username and password, then click Login button.
3. Then, the screen below appeared.
4. To upload web into server
16
If your screen cannot show two side of directory, go to Options menu > Preferences. Click on Interface > Click Norton Commander.Restart winscp program
R
SERVER DIRECTORY
COMPUTER / CLIENT
DIRECTORY
a) You need to click and drag all file of your web in GROUP/ WEB into /root/
user/local/www/web
5. To update web :
b) In the directory, select index.html and drag into desktop
c) Open index.html in Kompozer or Dreamweaver software.
d) Change your data ,text or picture in the software and save.
e) Click and drag index.html file also with your image file and related file
into the server directory.
6. Now you already update your web
17