Microsoft Office Publisher 2007

Transcription

1 Microsoft Office Publisher 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. 1

2 6. Kita akan menggunakan folder ini untuk menyimpan segala kerja dan fail dalam pembinaan web. Memulakan Microsoft Office Publisher 2

3 1. Klik pada Start, All Programs, Microsoft Office dan klik pada Microsoft Office Publisher 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. 3

4 5. Klik pada template pilihan, kemudian klik pada butang Create. 6. Pada paparan di atas, klik butang OK. 4

5 7. Paparan di atas akan kelihatan. 8. Pada rajah di atas klik simbol pangkah untuk menutup tetingkap tepi. 5

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

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

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. 8

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. 9

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. 10

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 Kemaskini teks yang ada seperti langkah 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. 11

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. 12

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. 13

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. 14

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. 15

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

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. 17

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. 18

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. 19

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. 20

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. 21

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 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 : player.net/players/maxi/download/ 22

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" /> 23

24 Parameters Name Parameter name flv width height autoplay autoload <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> Parameter description Description The URL of the FLV video to be played. Forces the video width. Forces the video height. 1 to auto play 1 to automatically load buffer The number of seconds to buffer. By default set to 5. buffermessage buffercolor bufferbgcolor buffershowbg config configxml title The buffering message. By default Buffering _n_, _n_ shown in percent. The color of the buffering message The background color of the buffering message 0 to hide the background color of the buffering message The URL of the configuration text file, similar to flv_config_maxi.txt The URL of the configuration XML file, similar to flv_config_maxi.xml The title shown before loading the video titlesize The size of the title's font. By default set to 20. titlecolor margin srt srtcolor srtbgcolor The color of title. By default set to ffffff. The margin of the video with respect to the Flash object. (useful for skins). 1 to use SRT subtitles (the file must be at the same place as the video and have the same name, with.srt extension) The color of subtitles The background color of subtitles srtsize Size of the subtitle's font. By default set to 11. showstop showvolume showtime showplayer showloading showfullscreen showswitchsubtitles showmouse loop startimage 1 to show the STOP button. 1 to show the VOLUME button. 1 to show the TIME button, 2 to show the remaining time by default Player bar display mode : autohide, always or never. Loading bar display mode : autohide, always or never. 1 to show fullscreen button (requires Flash Player or newer) 1 to show the button showing/hiding subtitles Display of the mouse cursor : always, autohide, never. 1 to loop. The URL of the JPEG file (not progressive) to be shown before loading the 24

25 skin playercolor Name loadingcolor bgcolor bgcolor1 bgcolor2 buttoncolor buttonovercolor slidercolor1 slidercolor2 sliderovercolor loadonstop onclick onclicktarget ondoubleclick ondoubleclicktarget playertimeout videobgcolor video Description The URL of the JPEG file (not progressive) to load The background color of the player bar (not the flash) The color of loading bar The background color The first color of the background gradient The second color of the background gradient The color of the buttons Hover color of buttons The first color of the bar gradient The second color of the bar gradient Hover color of the bar 0 to stop the video loading by cliking on STOP button 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. The target of the URL when clicking on the video. By default _self. To open a new window set to _blank. Action on double click: none, fullscreen, playpause, or the URL to open. The target of the URL when double clicking on the video. By default _self. To open a new window set to _blank. The timeout in milliseconds before the player hides (when autohide mode is set). By default set to 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 srturl top1 netconnection showiconplay iconplaycolor iconplaybgcolor 1 to use php stream L'URL of the subtitles file (if you don't want the automatic detection) Load an image over the video and place it at the coordinate x and y (for example url x y) RTMP server url 1 to show the PLAY icon in the middle of the video. The color of the PLAY icon. 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. 25

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

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= 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> 27

28 28