Module 5 A - Creating Web Site

7/29/2019 Module 5 A - Creating Web Site

1/16

KEMENTERIAN PELAJARAN MALAYSIAKEMENTERIAN PELAJARAN MALAYSIA

Self Access LearningSelf Access LearningModuleModule

Creating WebsiteCreating Website

PUSAT PERKEMBANGAN KURIKULUM

ICT Literacy forICT Literacy forSecondary SchoolSecondary School

ProgrammProgramm


2/16

KEMENTERIAN PELAJARAN MALAYSIA


3/16

ICTL For Secondary School - WebsiteModule

MODULE 5

DEVELOPE SCHOOL WEBSITE (TEMPLATE)

USINGPAGE BREEZE HTML EDITOR

Curriculum Development CentreMinistry of Education Malaysia

1


4/16


1. Name of Module : Develop School Website Using Page Breeze HTML

Editor

2. Learning Outcomes : The students should be able to

a. Creating Website by using a template

3. Knowledge and Skills

a. Create Main Page

b. Create Web Pages

c. Insert textd. Insert Images

e. Insert Hyperlink

f. Save Web Page

4. Module Summary

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

2


5/16


3


6/16


Activity 1: Creating Main Page by using Template

1. Launch Page Breeze HTML Editorfrom the START menu.

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

4


7/16


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

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

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

Step 1

Step 2

5


8/16


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

6


9/16


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

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

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 beautomatically one line spacing.

12. Save your project and exit.

7


10/16


A ctivity 2 : Creading the ABOUT webpage.

1. Notes for teachers, make sure all the source picturesare in the MY SCHOOL WEB folder.

2. Launch Page Breeze HTML Editor using the STARTmenu.

3. Make sure you open your previous folder.

4. Go to menu bar and choose Insert Graphic.

5. Browse and get your picture folder. Choose block.jpg and click OK. The screen isshown as below.

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

7. In the dialogue box, type ABOUT in the Page Title area.

8. Choose BlueBlank.htm Template. Click OK.

9. Highlight the Heading 2 and retype text as HOME.

10. Move the cursor at the end ofHOME text. Click enterto assure the cursor on thenext line.

8


11/16


11. Insert Graphic and choose logo_sdm.jpg Click OK.

12. Highlight the logo graphic, then choose the center alignment.

13. In the given box, type the text as shown on the screen below.

14. Highlight Normal and on the menu bar choose Table, Insert Table.

15. Change Row to 4 and Column to 2. Click OK.

16. In the given box, type the text as shown on the screen below

17. The screen is shown as below.

9


12/16


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 pagewill appear.

3. In the dialogue box, type TEACHER in the Page Title area.


10


13/16



6. Highlight Body Text Here and retype text as SMKDM TEACHERS.

7. Click Enterto go for the next line.

8. On the menu bar choose Table, Insert Table.



11. Put the cursor at the end ofSMKDM TEACHERS. Click Enterto go for the nextline.

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

11


14/16


13. Let the cursor on the Row 1 and type First row, from left : Pn Sh. FaridahHanim, 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 bWan Abdullah, Pn Nursylawaty bt Abdullah, Pn Rosnani bt Sembok, Cik LimGuat Bee, Pn Sh Juliana bt Syed Abd Rahman, Pn Noraiza bt Zubir, Pn WanNor Halina bt Wan Hassan, Pn Norliza bt Saidin, Cik Sarina bt Ibrahim, PnJohana bt Muhammad, En Mohd Norhisyam Bakori

15. Save your project and exit

Activity 4 : Creating the STUDENT webpage


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

12


15/16


3. In the dialogue box, type STUDENT in the Page Title area.



6. Highlight Body Text Here and retype text as SMKDM STUDENTS.

7. Click Enterto go for the next line.

8. On the menu bar choose Table, Insert Table.



11. Put the cursor at the end ofSMKDM STUDENTS. Click Enterto go for the nextline.

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

13. Let the cursor on the Row 2 and type Assembly Day.


Activity 5 : Creating Hyperlink


2. Open the index.html file.

13


16/16


3. Highlight the word ABOUT.

4. On the menu bar choose Table, Insert Hyperlink. The hyperlink dialog box willappear. In the hyperlink dialog box, choose ABOUT.htm file and click OK.

5. Repeat step 4 to complete another hyperlink forTEACHER, 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 Barand choose Hyperlink. In the hyperlink dialog boxchoose index.html file and click OK.

9. Double click TEACHER.htm and highlight HOME.


11. Double click STUDENT.htm and highlight HOME.



14

Documents

Module 5 A - Creating Web Site