Rekabentuk Laman Web MS FrontPage

Presentasi berjudul: "Rekabentuk Laman Web MS FrontPage"— Transcript presentasi:

1 Rekabentuk Laman Web MS FrontPage
Disediakan oleh: Assoc. Prof. Dr Bahaman Abu Samah Jabatan Pemajuan Profesional dan Pendidikan Lanjutan Fakulti Pengajian Pendidikan Universiti Putra Malaysia Serdang, Selangor

2 Kenali Window FrontPage

3 Window FrontPage Ruang Reka bentuk Dokumen baru Save Cetak Jadual
Masuk grafik Ruang Reka bentuk Hyperlink Paparan design Preview

4 Contoh Laman Web Utama Homepage

5 Contoh Laman Utama Akan diguna dalam latihan penyediaan laman Web
Teks marquee Teks Grafik Latar belakang Capaian dokumen Capaian URL Garis lurus Capaian eMel

6 Elemen Dokumen Web

7 Elemen Asas Dokumen Web
► Teks ► Grafik (gif, jpg/jpeg) ► Jadual (Table) ► Hiperpautan (Hyperlink) – Dokumen – Uniform Resource Locator (URL) – e-Mel – Dalam dokumen - Bookmark

8 Properties Jadual Untuk mempaparkan kotak dialog properti Jadual:
► letak kursor atas jadual dan klik butang kanan tetikus ► Pilih Table Properties Anda boleh menukar: ► Penjajaran ► Saiz sempadan ► Latarbelakang

9 Page Properties Pada kotak dialog Page properties, anda boleh:
► Masukkan musik latar ► Latar belakang/Formating – Warna – Grafik ► Advanced tab: Kesan rollover

10 Elemen Tambahan  Interactive button (Butang Hover)  Teks marquee
 Bingkai/Frame  Thumbnail  Hot spot  Position absolutely  Kesan Dynamic HTML  Layers  Behavior – Go to URL – Pop-up message – Set text of status bar

11 Latihan Penyediaan Laman Web

12 Langkah 1. Penyediaan jadual (table) ► Jadual 1 (2x2) – Teks marquee – Logo dan tajuk ► Jadual 2 (2x3) – Capaian dokumen – Capaian URL Masukkan teks Masukkan grafik – UPM Logo – e-Mel 4. Garis lurus 5. Semakan dan e-mel

13 6. Sediakan teks marquee 7. Masukkan grafik latar 8. Sediakan dokumen capaian – Profil Peribadi – Maklumat Penyelidikan – Pengalaman Kerjaya – Koleksi Gambar 9. Sediakan capaian kepada: – Dokumen – URL – e-Mel – Dalam dokumen

14 Penyediaan Jadual Anda akan meyediakan satu jadual berukuran 3x3 Cara:
1. Letakkan insertion point di mana anda ingin masukkan jadual 2. Klik butang Table dan pilih saiz 3x3 3. Ubahsuai saiz kolum. Letakkan kursor pada pembahagi kolum (tukar bentuk ↔). Drag mengikut saiz yang diperlukan 4. Remove table border. Letakkan kursor di mana-mana bahagian jadual, klik butang kanan tetikus | Table Properties 5. Pada kotak dialog Table Properties, tukarkan Border size kepada 0 | OK

15 Teks Marquee Teks marquee adalah elemen teks bergerak dalam laman Web
Cara: 1. Letakkan insertion point di mana anda ingin masukkan teks marquee 2. Klik menu Insert | Web Components 3. Pada kotak dialog, Klik Dynamic Effects | Marquee

16 Hiper capaian Penyediaan hiper capaian kepada:  Dokumen  URL  e-Mel
 Dalam dokumen

17 Hiper capaian − Dokumen
Anda boleh membuat hiper capaian kepada dokumen anda. Boleh hiper capaian kepada teks atau grafik. Cara: 1. Taipkan tiga (3) teks capaian (Anda mesti menyediakan tiga dokumen terlebih dahulu) 2. Blok teks pertama − Maklumat peribadi, Klik butang kanan tetikus | Hyperlink… 3. Pada kotak dialog, pilih dokumen yang hendak dihiper capaikan | klik OK 3. Pada kotak dialog, pilih dokumen yang hendak dihiper capaikan | klik OK 4. Hasilnya adalah seperti berikut (perhatikan teks diunderline dan bertukar warna biru)

18 Hiper capaian − URL Hiper capaian kepada laman Web pilihan. Cara:
1. Taipkan tiga (3) teks capaian kepada laman Web pilihan 2. Blok teks pertama − Maklumat peribadi, Klik butang kanan tetikus | Hyperlink… 3. Pada kotak dialog, taipkan URL di kotak Address | klik OK 3. Pada kotak dialog, taipkan URL di kotak Address | klik OK 4. Hasilnya adalah seperti berikut (perhatikan teks diunderline dan bertukar warna biru)

19 Hiper capaian − e-Mel Hiper capaian kepada e-mel anda. Cara:
1. Masukkan grafik e-mel sebagai hiper capaian yang akan digunakan 2. Klik pada grafik tersebut | Klik butang kanan tetikus | Hyperlink… 3. Pada kotak dialog, Klik butang Address 4. Taipkan alamat e-mel | OK 5. Hasilnya adalah seperti berikut:

20 Hiper capaian − dalam dokumen
Hiper capaian dalam sesuatu dokumen Web. Cara: 1. Taipkan tajuk utama di awal artikel 2. Sediakan bookmark untuk kandungan tajuk utama. Blok tajuk 1 | Klik menu Insert | Boolmark 3. Dalam kotak dialog, taipkan nama bookmark | OK 4. Sediakan capaian ke tajuk 1. Blok tajuk utama 1 | Klik butang kanan | Hyperlink… 5. Pada kotak dialog, klik butang Place in This Document 6. Klik Bookmark Principle 1 | OK 7. Hiper capaian berikut terhasil:

21 Elemen Tambahan ► Bingkai (frame) ► Position absolutely
► Interactive button/hover button ► Hot spot ► Roll over effect ► Thumbnail ► Hit counter

22 Roll over effect Kesan roll over terhasil sekiranya anda menggerakkan kursor tetikus di atas capaian teks. Untuk menyediakan kesan roll over ini: 1. Klik butang kanan tetikus 2. Klik option “Page properties” 3. Pada kotak dialog Page properties, klik tab Advanced 4. Klik kotak teks “Enable hyperlink roll over effect” 5. Klik butang OK

23 Interactive Button Butang interaktif yang boleh digunakan sebagai hipercapaian kepada dokumen/URL Cara penyediaan: 1. Klik menu Insert | Interactive Button 2. Pada kotak dialog Interactive Button, pilih jenis butang 3. Taipkan teks pada butang 4. Klik pada tab Image untuk tukar saiz butang 5. Buangkan tanda pilihan pada kotak teks Maintain proportions & besarkan lebar butang 6. Klik OK. Butang terhasil …

24 Position Absolutely Fungsi ini digunakan untuk meletakkan grafik pada lokasi pilihan (tidak tertakluk kepada penjajaran. Sebagai contoh anda hendak letakkan burung hampir dengan merry-go-round Cara penyediaan: 1. Masukkan gambar 2. Klik pada gambar burung 3. Klik pada butang Position Absolutely di Toolbar Pictures. 4. Perhatikan kotak biru terpapar. Letakkan kursor dalam kotak sehingga kursor bertukar kepada simbol + 5. Heret kotak ke lokasi pilihan anda.

25 Hit Counter ► Anda boleh mendaftar untuk mendapatkan perkhidmatan hit counter daripada pelbagai pembekal perkhidmatan seperti FastCounter, Geocities dan Freelogs ► Anda perlu mendaftar dan mendapatkan kod counter daripada pembekal ► Masukkan kod dalam laman Web ► Contoh counter:

26 Thumbnail Gunakan fungsi ini untuk menyediakan gambar kecil daripada gambar asal yang lebih besar Cara: 1. Masukkan gambar asal 2. Klik pada gambar 3. Klik butang AutoThumb- nail pada Toolbar Picture 4. Secara otomatik thumbnail disediakan

27 HotSpot Anda boleh gunakan hotspot untuk menyediakan hiper capaian pada keseluruhan atau sebahagian gambar Cara penyediaan: 1. Masukkan gambar 2. Klik pada gambar 3. Klik pada Polygonal hotspot pada toolbar Picture 5. Lakarkan sempadan P34 (Hulu Selangor) 6. Setelah selesai lakaran, secara otomatik kotak dialog berikut terpapar. Masukkan capaian dokumen berkenaan 7. Klik pada butang Screen Tip & taipkan teks yang sesuai. Klik butang OK | OK

28 Bingkai (Frame) 1. Klik File | New
2. Pada paparan berikut, klik option “More page templates …” 3. Pada paparan kotak dialog page template, klik tab ‘Frames Pages’ 4. Pilih daripada beberap option bingkai yang disediakan: − Banner and contents − Contents − Footer − Fotnotes − Lain-lain

29 Anda mempunyai dua option:
1. Pilih dokumen Web sdiaada Gunakan dokumen yang telah dibangunkan sebelum ini sebagai bahan dalam bingkai 2. Taipkan bahan baru dalam bingkai

30 Hit Counter 1. Taipkan

31 2. Klik pada hiper capaian “Click here …”
3. Lengkapkan borang pendaftaran yang terpapar. 4. Klik pada butang “Create Counter” 5. Sekiranya pendaftaran anda berjaya, mesej berikut akan dipaparkan di skrin anda 6. Blok teks dalam kotak dan copy. (digalakkan savekan teks ini dalam Notepad sebagai fail teks) 7. Gunakan teks ini untuk dimasukkan dalam laman web

32 Hit Counter dalam Laman Web
Setelah mendaftar dan mendapatkan kod, anda perlu memasukkan kod ini dalam laman Web Cara: 1. Klikkan insertion point di mana anda hendak letakkan counter 2. Klik menu Insert | Web Components 3. Pada kotak dialog Insert Web Components, pilih option Advanced Control | HTML (paparan kanan) 4. Paste kod ke dalam kotak dialog HTML Markup 5. Klik butang OK

33 Web Applications

34 Skrip Java Anda juga dengan mudah boleh memasukkan objek berasaskan skrip java. Antara objek yang boleh dimasukkan: – Kalendar – Jam – Scroll text

35 Clocklink.com

36 Free Pictures

37 Slide Show

38 Azan Software

39 Free Button Banners

40 Visual Slide Show

41 Calender

42 Calender

43 Waktu Solat

44 Hit Counters

45 ImageLoop

46 Slide

47 Pop-up Message <script type="text/javascript">
myWindow = window.open('pop.htm', 'theWindow', 'width=300,height=200'); </script>

48