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 43400 Serdang, Selangor

Kenali Window FrontPage

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

Contoh Laman Web Utama Homepage

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

Elemen Dokumen Web

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

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

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

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

Latihan Penyediaan Laman Web

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

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

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

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

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

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)

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)

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 E-mail Address 4. Taipkan alamat e-mel | OK 5. Hasilnya adalah seperti berikut:

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:

Elemen Tambahan ► Bingkai (frame) ► Position absolutely ► Interactive button/hover button ► Hot spot ► Roll over effect ► Thumbnail ► Hit counter http://freelogs.com/

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

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 …

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.

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:

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

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

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

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

Hit Counter 1. Taipkan http://freelogs.com

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

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

Web Applications http://yourwebapps.com/WebApps/

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

Clocklink.com

Free Pictures http://www.webshots.com/

Slide Show http://www.slide.com/

Azan Software http://www.islamicfinder.org/athanDownload.php?lang=

Free Button Banners http://www.flashvortex.com/

Visual Slide Show http://visualslideshow.com/

Calender http://mycalendar.org/widget/

Calender http://www.calendarlabs.com/

Waktu Solat http://www.waktusolat.net/?mod=script

Hit Counters http://vinaora.com/home/

ImageLoop http://www.imageloop.com/en/setuplooop.htm

Slide http://www.slide.com/

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