1  

Microsoft Office Publisher 2007 

1. Microsoft Office Publisher boleh digunakan untuk membangunkan halaman web secara mudah dan cepat. 

2. Sebelum anda mula membangunkan halaman web, sila ikut langkah‐langkah berikut terlebih dahulu. 

3. Bina satu Folder di Desktop komputer anda dengan nama Tugasan. 4. Tunjukkan tetikus pada ruang kosong Desktop, klik kanan tetikus, pilih New dan klik Folder. 5. Namakan Folder tersebut sebagai Tugasan. 

 

2  

 

6. Kita akan menggunakan folder ini untuk menyimpan segala kerja dan fail dalam pembinaan web. 

Memulakan Microsoft Office Publisher 

 

3  

1. Klik pada Start, All Programs, Microsoft Office dan klik pada Microsoft Office Publisher 2007. 

2. Paparan Utama MS Office Publisher 2007 akan kelihatan seperti rajah bawah. 

 

3. Klik pada ikon Web Sites untuk memulakan pembinaan halaman web. 4. Pilih reka bentuk “template” yang digemari. Dalam tutorial ini kita akan memilih 

Summer sebagai template bagi halaman web yang akan dibina. 

 

4  

   5. Klik pada template pilihan, kemudian klik pada butang Create. 

 

6. Pada paparan di atas, klik butang OK. 

 

5  

7. Paparan di atas akan kelihatan.  

 

8. Pada rajah di atas klik simbol pangkah untuk menutup tetingkap tepi. 

6  

 

9. Ruang sebelum kiri merupakan hubungan ke halaman‐halaman. Tukarkan nama Home kepada Halaman Utama. 

 

 

 

7  

 

10. Untuk menambah halaman berikutnya, sila klik pada Insert, pilih Page dan klik. 

 

11. Pilih jenis halaman yang anda kehendaki, dalam tutorial ini klik pada General Information dan kemudian klik pada butang OK. 

8  

 

12. Anda akan mendapati terhadap satu halaman tambahan di ruang tepi kiri. Selian itu anda juga mendapati terdapatnya nombor halaman 1 dan 2 di sebelah bawah paparan. Cuba klik pada nombor 1, anda akan mendapati paparan akan beralih ke halaman utama. 

13. Teruskan dengan langkah 10 bagi menambah 10 halaman seperti rajah di bawah. 

 

 

 

 

9  

Menyimpan Fail Microsoft Office Publisher 

 

1. Klik pada ikon Diskette untuk menyimpan hasil kerja anda. 2. Pastikan anda menyimpannya dalam folder yang bernama Tugasan di Desktop Komputer 

anda. 

Memapar Hasil Dalam Bentuk Web 

 

1. Klik pada File, pilih Web Page Preview, kemudian klik. 

 

10  

Memasukkan Teks Ke Dalam Halaman Web 

 

1. Pastikan anda berada di paparan 1, iaitu Halaman Utama. 2. Klik pada perkataan Home, dan ubahkan perkataan tersebut kepada Tajuk Halaman Web. 

Contohnya : Literasi Maklumat 3. Dengan menggunakan sumber dokumen yang ada pada Microsoft Word. Anda boleh 

menggunakan fungsi copy dan paste ke dalam ruang teks yang disediakan. 

 

11  

 

4. Bagi membolehkan anda memasukkan teks pada halaman 2 dan seterusnya. Klik pada nombor halaman 2 di bar bawah, dan anda akan dipaparkan dengan halaman 2. 

5. Kemaskini teks yang ada seperti langkah 3. 6. Anda juga boleh memadam gambar serta ruangan teks yang anda tidak kehendaki. 7. Klik pada gambar atau ruang teks yang anda tidak kehendaki, kemudian tekan butang Delete 

pada papan kekunci. 

 

12  

 

8. Untuk mengubah saiz ruangan teks, klik pada ruangan teks yang ingin diubahsuai, kemudian tunjukkan pada titik tepi bahagian tengah ruangan teks. Kemudian heret tetikus ke kanan untuk membesarkan ruangan teks. 

 

13  

Memasukkan Gambar / Imej atau Grafik Ke Dalam Halaman Web 

 

1. Klik pada ikon gambar, klik pada Picture from File. 

 

2. Gerakkan mouse pointer pada ruangan yang hendak dimasukkan gambar. Anda akan dapati ada tanda pangkah. Heretkan saiz gambar yang dikehendaki. 

 

3. Pilih gambar yang dikehendaki, kemudian klik pada butang Insert. 

14  

 

 

Memasukkan Video Ke Dalam Halaman Web 

1. Bagi memasukkan video ke dalam halaman web. Anda perlu mengakses internet terlebih dahulu. 

2. Dapatkan video melalui internet. Terdapat dua kaedah untuk memasukkan video. 

 

15  

3. Langkah Pertama, halaman web video yang terdapat dalam internet. Cari symbol atau perkataan Embed yang terdapat pada video tersebut, kemudian klik pada ikon Embed. 

 

4. Klik pada ruangan embed code. Klik kanan tetikus, kemudian klik pada Copy. 5. Kemudian kembali semula ke MS Office Publisher. 

16  

 

6. Klik pada Insert, klik pada HTML Code Fragment. 

17  

 

7. Pada paparan ruang kosong, tekan kekunci Ctrl + V atau paste. 8. Anda boleh mengubah suai saiz video yang hendak dipaparkan. Ubahkan saiz 640 kepada 

320 dan 382 kepada 240. Kod yang telah diubah adalah seperti berikut. 

 

9. Setelah selesai klik pada butang OK. 

18  

 

10. Alihkan kedudukan video tersebut di paparan halaman web anda. 11. Langkah kedua untuk memasukkan video.  

 

12. Tunjukkan pada video dalam internet. Klik kanan tetikus, klik pada Copy embed code. Kemudian ikuti langkah 6 diatas. 

19  

Memasukkan Gambar berbentuk Animasi 

1. Dapatkan grafik animasi daripada internet. 

 

2. Taipkan perkataan free animated gif pada ruang carian. 3. Klik pada Images dan Image Search. 

 

4. Tunjukkan tetikus pada grafik animasi yang dikehendaki. 

 

5. Klik kanan tetikus, kemudian pilih Save Picture As dan klik. Pastikan anda menyimpan fail ke dalam folder Tugasan. Kemudian menggunakan kaedah yang telah anda pelajari lepas untuk memasukkan gambar tersebut. 

20  

Menyimpan Fail Halaman Web Untuk Dimuat Naik ke Pelayan (Server) 

 

1. Klik pada File, pilih Publish to the Web, kemudian klik. 

 

2. Klik butang OK. 

21  

 

3. Pastikan anda simpan dalam Folder bernama Tugasan di Desktop computer anda. Dan File name sebagai index yang telah diset sebagai default. Kemudian klik pada butang Save. 

 

   

22  

Memasukkan Video Yang Dibina Ke Dalam Halaman Web 

1. Untuk membolehkan video yang dirakamkan oleh kita dimasukkan ke dalam halaman web. Langkah‐langkah berikut perlu diikuti :‐ 

a. Tukarkan format video yang dirakamkan ke format .flv b. Muat‐naik video dalam format flv (movie1.flv) tersebut ke server. c. Muat‐naik fail flash player (player_flv_maxi.swf) ke server. d. Wujudkan fail .xml dengan bernama (movie1.xml). e. Taipkan kod untuk memasukkan video pada MS Office Publisher 2007. 

 

2. Tukarkan format video yang dirakamkan ke format .flv. Ini dapat dilakukan dengan menggunakan video converter (Namakan fail tersebut sebagai movie1.flv). 

3. Dapatkan fail (player_flv_maxi.swf) dan muat‐naik ke server, fail tersebut digunakan untuk membuka fail video flv. Fail tersebut boleh diperolehi dengan memuat‐turun daripada url di bawah : 

http://flv‐player.net/players/maxi/download/ 

 

23  

4. Wujudkan fail .xml dengan menggunakan Notepad. Buka Notepad dan copy & paste coding seperti di bawah ke dalam ruang notepad. 

<?xml version="1.0" encoding="UTF‐8"?> <config>   <param name="flv" value="movie1.flv" />   <param name="width" value="480" />   <param name="height" value="360" />   <param name="autoplay" value="0" />   <param name="autoload" value="0" />   <param name="buffer" value="5" />   <param name="buffermessage" value="" />   <param name="buffercolor" value="ffffff" />   <param name="bufferbgcolor" value="3d60a5" />   <param name="buffershowbg" value="1" />   <param name="title" value="movie" />   <param name="titlesize" value="20" />   <param name="titlecolor" value="ffffff" />   <param name="margin" value="0" />   <param name="srt" value="0" />   <param name="srtcolor" value="ffffff" />   <param name="srtbgcolor" value="3d60a5" />   <param name="srtsize" value="11" />   <param name="showstop" value="1" />   <param name="showvolume" value="1" />   <param name="showtime" value="1" />   <param name="showplayer" value="autohide" />   <param name="showloading" value="autohide" />   <param name="showfullscreen" value="1" />   <param name="showswitchsubtitles" value="0" />   <param name="showmouse" value="autohide" />   <param name="loop" value="0" />   <param name="startimage" value="start_frame.jpg" />   <param name="playercolor" value="3d60a5" />   <param name="loadingcolor" value="bbbbbb" />   <param name="bgcolor" value="3d60a5" />   <param name="bgcolor1" value="3a5b9e" />   <param name="bgcolor2" value="3d60a5" />   <param name="buttoncolor" value="ffffff" />   <param name="buttonovercolor" value="dbdbdb" />   <param name="slidercolor1" value="ffffff" />   <param name="slidercolor2" value="bbbbbb" />   <param name="sliderovercolor" value="dbdbdb" />   <param name="loadonstop" value="0" />   <param name="onclick" value="playpause" />   <param name="onclicktarget" value="_blank" />   <param name="ondoubleclick" value="fullscreen" />   <param name="ondoubleclicktarget" value="_blank" />   <param name="playertimeout" value="1500" />   <param name="videobgcolor" value="000000" />   <param name="volume" value="100" />   <param name="shortcut" value="1" />   <param name="playeralpha" value="100" />   <param name="phpstream" value="0" />   <param name="srturl" value="video.srt" />   <param name="top1" value="0" /> 

24  

  <param name="showiconplay" value="1" />   <param name="iconplaycolor" value="ffffff" />   <param name="iconplaybgcolor" value="dddddd" />   <param name="iconplaybgalpha" value="25" />   <param name="showtitleandstartimage" value="0" /> </config> 

 

Parameters Name  Description

Parameter name  Parameter description

flv  The URL of the FLV video to be played.

width  Forces the video width.

height  Forces the video height.

autoplay  1 to auto‐play 

autoload  1 to automatically load

buffer  The number of seconds to buffer. By default set to 5.

buffermessage  The buffering message. By default Buffering _n_, _n_ shown in percent.

buffercolor  The color of the buffering message

bufferbgcolor  The background color of the buffering message

buffershowbg  0 to hide the background color of the buffering message 

config  The URL of the configuration text file, similar to flv_config_maxi.txt 

configxml  The URL of the configuration XML file, similar to flv_config_maxi.xml 

title  The title shown before loading the video

titlesize  The size of the title's font. By default set to 20.

titlecolor  The color of title. By default set to ffffff.

margin  The margin of the video with respect to the Flash object. (useful for skins).

srt  1 to use SRT subtitles (the file must be at the same place as the video and have the same name, with .srt extension) 

srtcolor  The color of subtitles

srtbgcolor  The background color of subtitles

srtsize  Size of the subtitle's font. By default set to 11.

showstop  1 to show the STOP button.

showvolume  1 to show the VOLUME button.

showtime  1 to show the TIME button, 2 to show the remaining time by default 

showplayer  Player bar display mode : autohide, always or never. 

showloading  Loading bar display mode : autohide, always or never. 

showfullscreen  1 to show fullscreen button (requires Flash Player 9.0.16.60 or newer)

showswitchsubtitles  1 to show the button showing/hiding subtitles

showmouse  Display of the mouse cursor : always, autohide, never. 

loop  1 to loop. 

startimage  The URL of the JPEG file (not progressive) to be shown before loading the 

25  

Name  Description

video 

skin  The URL of the JPEG file (not progressive) to load

playercolor  The background color of the player bar (not the flash) 

loadingcolor  The color of loading bar

bgcolor  The background color

bgcolor1  The first color of the background gradient

bgcolor2  The second color of the background gradient

buttoncolor  The color of the buttons

buttonovercolor  Hover color of buttons

slidercolor1  The first color of the bar gradient

slidercolor2  The second color of the bar gradient

sliderovercolor  Hover color of the bar

loadonstop  0 to stop the video loading by cliking on STOP button

onclick The destination URL when clicking on the video. By default playpause, meaning that the video is played/paused on click. To remove events, set to none. 

onclicktarget  The target of the URL when clicking on the video. By default _self. To open a new window set to _blank. 

ondoubleclick  Action on double click: none, fullscreen, playpause, or the URL to open. 

ondoubleclicktarget  The target of the URL when double clicking on the video. By default _self. To open a new window set to _blank. 

playertimeout  The timeout in milliseconds before the player hides (when autohide mode is set). By default set to 1500. 

videobgcolor  Background color of the flash, when no video is shown. 

volume  The initial volume, between 0 and 200.

shortcut  0 to deactivate keyboard shortcuts.

playeralpha  The transparency of the player bar, between 0 and 100. 

phpstream  1 to use php stream

srturl  L'URL of the subtitles file (if you don't want the automatic detection) 

top1  Load an image over the video and place it at the coordinate x and y (for example url|x|y) 

netconnection  RTMP server url

showiconplay  1 to show the PLAY icon in the middle of the video.

iconplaycolor  The color of the PLAY icon.

iconplaybgcolor  The background color of the PLAY icon.

iconplaybgalpha  The transparency of the PLAY icon between 0 and 100. 

showtitleandstartimage 1 to show the title and the startimage at the same time. 

26  

  

5. Simpan fail tersebut dengan menamakannya sebagai movie1.xml.  

 

27  

6. Buka fail project yang telah anda bina dengan menggunakan perisian MS Office Publisher.  

7. Dengan menggunakan kaedah Insert HTML Code Fragment seperti yang ditunjukkan dalam rajah di bawah. 

 

  

8. Copy dan Paste kod di bawah ke dalam kotak kosong yang disediakan.  

<object id="Object1" type="application/x‐shockwave‐flash" data="player_flv_maxi.swf" width="480" height="360"> <noscript><a href=http://www.dvdvideosoft.com/products/dvd/Free‐YouTube‐Download.htm>youtube download</a></noscript> <param name="movie" value="player_flv_maxi.swf" /> <param name="allowFullScreen" value="true" /> <param name="wmode" value="opaque" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="quality" value="high" /> <param name="menu" value="true" /> <param name="FlashVars" value="configxml=movie1.xml" /> </object> 

 

28