KEMENTERIAN PELAJARAN MALAYSIA

Self Access Learning Module

ICT Literacy for Secondary School

Programm e Creating Website

PUSAT PERKEMBANGAN KURIKULUM

KEMENTERIAN PELAJARAN MALAYSIA

ICTL For Secondary School - Website Module

MODULE 5

DEVELOPE SCHOOL WEBSITE (TEMPLATE) USING PAGE BREEZE HTML EDITOR

Curriculum Development Centre Ministry of Education Malaysia

ICTL For Secondary School - Website Module

1. Editor 2.

Name of Module

: Develop School Website Using Page Breeze HTML

Learning Outcomes : The students should be able to

a.
3.

Creating Website by using a template

Knowledge and Skills a. Create Main Page

b. Create Web Pages

c. Insert text d. Insert Images e. Insert Hyperlink f. 4. Save Web Page

Module Summary At the end of the module students should be able to produce web pages.

ICTL For Secondary School - Website Module

ICTL For Secondary School - Website Module

Activity 1: Creating Main Page by using Template

1. Launch Page Breeze HTML Editor from the START menu.

2. The Page Breeze HTML Editor window will appear as below.

ICTL For Secondary School - Website Module

3. To create a new project, double click directory C (Step 1) and then click Folder button
(Step 2)

Step 1 Step 2

4. This dialogue box will appear, type MY SCHOOL WEB in folder name box then click
ok.

5. MY SCHOOL WEB folder will appear in directory C.

ICTL For Secondary School - Website Module

6. Click new page button on the toolbar

and a dialogue box will appear as below.

6.1. Type MY SCHOOL WEB in the Page Title area.

6.2. Click on CheckBox

6.3. Choose LinkOnTheLeftplusBackground.htm Template 6.4. Click OK button

ICTL For Secondary School - Website Module

7. Highlight Link to Page 1 and retype your own text example HOME. Repeat for the
same step by changing Link to Page 2 to ABOUT, Link to Page 3 to TEACHER, Link to Page 4 to STUDENT.

8. Highlight Heading 2 and change to WELCOME TO SMK DATO MUSTAFFA WEB

PAGE

9. Highlight Text and change to Jalan Sekolah, 45400 Sekinchan, Selangor

10. To align text, use the center alignment icon on the toolbar.

11. While editing, to go to the next line, use SHIFT ENTER key, or else your line will be
automatically one line spacing.

12. Save your project and exit.

ICTL For Secondary School - Website Module

Activity 2 : Creading the ABOUT webpage.

1. 2.
3. 4.

Notes for teachers, make sure all the source pictures are in the MY SCHOOL WEB folder. Launch Page Breeze HTML Editor using the START menu. Make sure you open your previous folder.

Go to menu bar and choose Insert Graphic. Browse and get your picture folder. Choose block.jpg and click OK. The screen is shown as below.

5.

6.

Click File on menu bar and choose New. The dialogue box for creating a new page will appear.

7. 8. 9. 10.

In the dialogue box, type ABOUT in the Page Title area. Choose BlueBlank.htm Template. Click OK. Highlight the Heading 2 and retype text as HOME. Move the cursor at the end of HOME text. Click enter to assure the cursor on the next line.

ICTL For Secondary School - Website Module

11.
12.

Insert Graphic and choose logo_sdm.jpg Click OK. Highlight the logo graphic, then choose the center alignment.

13.

In the given box, type the text as shown on the screen below. Highlight Normal and on the menu bar choose Table, Insert Table.

14.

15.
16. 17.

Change Row to 4 and Column to 2. Click OK. In the given box, type the text as shown on the screen below The screen is shown as below.

ICTL For Secondary School - Website Module

18.

Save your project and exit.

Activity 3 : Creating the HOME webpage

1. Launch Page Breeze HTML Editor using the START menu. 2. Click File on menu bar and choose New. The dialogue box for creating a new page
will appear.

3. In the dialogue box, type TEACHER in the Page Title area. 4. Choose BlueBlank.htm Template. Click OK.

10

ICTL For Secondary School - Website Module

5. Highlight the Heading 2 and retype text as HOME. 6. Highlight Body Text Here and retype text as SMKDM TEACHERS.

7. Click Enter to go for the next line. 8. On the menu bar choose Table, Insert Table. 9.
Change Row to 2 and Column to 1. Click OK.

10. The screen is shown as below.

11. Put the cursor at the end of SMKDM TEACHERS. Click Enter to go for the next
line.

12. Insert Graphic and choose teacher.jpg Click OK.

11

ICTL For Secondary School - Website Module

13. Let the cursor on the Row 1 and type First row, from left : Pn Sh. Faridah
Hanim, Pn Rasidah bt Hj Omar, Pn Kamariah bt Ismail, En Choo Keng Fook, En Hassan b Wahid, Dr. Hjh. Hajar bt Mohd Nor, En Mohd Azmi b Sulaiman, En Mohd Silmi b Ali, En Za Asmadi b Ahmad, En Rusli b Mat Nor

14. Let the cursor on the Row 2 and type Second row, from left : En Wan Hassan b
Wan Abdullah, Pn Nursylawaty bt Abdullah, Pn Rosnani bt Sembok, Cik Lim Guat Bee, Pn Sh Juliana bt Syed Abd Rahman, Pn Noraiza bt Zubir, Pn Wan Nor Halina bt Wan Hassan, Pn Norliza bt Saidin, Cik Sarina bt Ibrahim, Pn Johana bt Muhammad, En Mohd Norhisyam Bakori 15. Save your project and exit

Activity 4 : Creating the STUDENT webpage

1. Launch Page Breeze HTML Editor using the START menu. 2. Click File on menu bar and choose New. The dialogue box for creating a new page
will appear.

12

ICTL For Secondary School - Website Module

3. In the dialogue box, type STUDENT in the Page Title area. 4. Choose BlueBlank.htm Template. Click OK. 5. Highlight the Heading 2 and retype text as HOME. 6. Highlight Body Text Here and retype text as SMKDM STUDENTS. 7. Click Enter to go for the next line. 8. On the menu bar choose Table, Insert Table. 9.
Change Row to 2 and Column to 1. Click OK.

10. The screen is shown as below.

11. Put the cursor at the end of SMKDM STUDENTS. Click Enter to go for the next
line.

12. Insert Graphic and choose student.jpg Click OK. 13. Let the cursor on the Row 2 and type Assembly Day.
14. Save your project and exit

Activity 5 : Creating Hyperlink

1. Launch Page Breeze HTML Editor using the START menu. 2. Open the index.html file. 13

ICTL For Secondary School - Website Module

3. Highlight the word ABOUT. 4. On the menu bar choose Table, Insert Hyperlink. The hyperlink dialog box will
appear. In the hyperlink dialog box, choose ABOUT.htm file and click OK.

5. Repeat step 4 to complete another hyperlink for TEACHER, STUDENT, HOME. 6. Highlight Body Text Here and retype text as SMKDM STUDENTS. 7. Double click ABOUT.htm and highlight HOME. 8. Click Insert from the Menu Bar and choose Hyperlink. In the hyperlink dialog box
choose index.html file and click OK.

9. Double click TEACHER.htm and highlight HOME. 10. Click Insert from the Menu Bar and choose Hyperlink. In the hyperlink dialog box
choose index.html file and click OK.

11. Double click STUDENT.htm and highlight HOME. 12. Click Insert from the Menu Bar and choose Hyperlink. In the hyperlink dialog box
choose index.html file and click OK. 13. Save your project and exit

14