SlideShare a Scribd company logo
1 of 31
Download to read offline
Membina Laman Web Menggunakan 
FrontPage 2003 
1. Pengenalan Kepada FrontPage 2003 
FrontPage 2003 merupakan salah satu perisian yang boleh digunakan untuk membina laman web dengan cara yang mudah. Dengan menggunakan FrontPage 2003 rangka struktur atau layout laman web dapat dibina, boleh memasukkan tema grafik kepada laman web, serta boleh menguruskan fail dan folder yang dikehendaki. Selain itu fail-fail juga boleh diimport dan dieksport, diuji, serta membaiki pautan (hyperlinks), menentukan tugas dan merekabentuk serta mengemaskini kandungan laman web. Bagi web yang telah lengkap dibina, FrontPage 2003 boleh digunakan untuk menerbitkan (publish) laman web ke dalam komputer, intranet organisasi atau melalui World Wide Web. 
FrontPage 2003 akan memaparkan komponen tambahan seperti teks, imej dan borang sebagaimana ia direkabentuk dan diatur ke pelayar (browser) web. FrontPage 2003 mudah digunakan kerana ia sama seperti perisian pemprosesan perkataan (word processor). Untuk menggunakan perisian FrontPage 2003 tidak memerlukan untuk mempelajari bahasa Hypertext Markup Language (HTML) kerana FrontPage 2003 akan membinanya sendiri. Walaubagaimanapun bagi yang mengetahui HTML, kod-kod HTML masih boleh dibaiki dengan klik pada tab HTML di bahagian kiri bawah pada paparan Page View. Tab Normal adalah untuk format “What you see is what you get” (WYSIWYG). Manakala tab Preview adalah bagi membolehkan pengguna melihat hasil paparan laman web mereka yang akan kelihatan pada pelayar. 
1
2. Memulakan FrontPage 2003 
Untuk membuka program FrontPage 2003 ikuti langkah-langkah berikut: 
1. On kan komputer anda. 
2. Pada Windows Taskbar, klik pada Start, kemudian Programs dan klik pada program Microsoft Office FrontPage 2003. (lihat gambarajah 2.1). 
Gambarajah 2.1 : Ikon Microsoft Front Page yang digunakan untuk memulakan FrontPage. 
3. Tetingkap Microsoft FrontPage akan muncul. Ia adalah kosong kerana belum memuatkan tapak web. (lihat gambarajah 2.2). Pada kawasan halaman inilah pembangunan web akan dilakukan. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 2
Paparan Antaramuka Utama 
Gambarajah 2.2 : Paparan Antaramuka Utama pada Program FrontPage 2003. 
Mengenali Dan Memahami FrontPage 
Apabila membuka perisian FrontPage 2003 untuk kali pertama, terdapat tiga toolbar yang akan di paparkan pada paparan halaman (page view) iaitu menu toolbar, standard toolbar dan formatting toolbar. 
Menu toolbar 
Menu bar mengandungi senarai menu yang dapat membantu di dalam membina, mengemaskini dan memformat laman web di dalam FrontPage 2003. Jika anda klik pada setiap menu yang diberikan, terdapat pilihan lain yang boleh dicapai. Sekiranya pilihan menu kelihatan tenggelam (bewarna kelabu) ini bermaksud, pilihan tersebut tidak aktif atau tidak boleh digunakan bagi aktiviti tersebut. Jika anda melihat tanda chevron pada bahagian bawah menu, klik pada tanda 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 3
tersebut dan baki pilihan menu yang ditawarkan akan dipaparkan. Pilihan yang selalu digunakan akan diletakkan di bahagian atas menu. 
Meneroka Menu toolbar dengan klik pada setiap menu. Contoh, klik pada Insert untuk melihat pilihan di dalam menu Insert. 
Standard toolbar 
Standard toolbar mengandungi butang yang akan memberikan anda capaian yang pantas kepada fungsi-fungsi yang biasanya digunakan di dalam perisian FrontPage 2003 seperti membuka fail, menyimpan dan mencetak. 
Anak panah menandakan bahawa tetambahan pilihan untuk item menu ini. 
rdapat 
Chevron bermaksud terdapat banyak lagi pilihan yang ditawarkan. 
Klik untuk bina, buka, simpan atau sampaikan dokumen sebagai e-mail. 
Cetak dokumen, pratonton cetak atau semak ejaan. 
Membatal atau buat semula tindakan. 
Masukkan jalinan (hyperlink). 
Paparkan atau sembunyikan penanda. 
Paparkan senarai folder digunakan di dalam tapak web 
Potong, salin dan tampal objek, teks atau style. 
Tambah komponen, cipta jadual atau tambah grafik. 
Refresh halaman atau berhenti dari perlaksanaan. 
Tanya pada Answer Wizard untuk bantuan. 
Formatting toolbar 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 4
Formatting toolbar mengandungi butang yang membenarkan anda untuk memformat teks dan perenggan di dalam laman web. 
Format style perenggan dalam laman web anda. 
Tukar saiz font dalam laman web. 
Menyamakan teks ke kanan, tengah atau ke kiri. 
Highlight teks atau menukar warna font. 
Tukar font dalam laman web 
Format font sebagai bold, italic atau underlined. 
Format senarai teks sebagai nombor atau bullet dan menambah inden ke dalam atau ke luar. 
3. Membangunkan Web Yang Pertama 
1. Buka FrontPage 2003. Paparan Halaman (Page View) akan dipaparkan. 
2. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Page…. Kotak dialog Page Templates akan diaparkan. (lihat gambarajah 3.1). 
Gambarajah 3.1 : Kotak dialog New digunakan untuk membina web baru. 
3. Pilih jenis web yang anda ingin bina daripada senarai pilihan templat web yang disediakan. Anda akan mempelajari mengenai templat web ini 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 5
dengan lebih lanjut pada bab berikutnya. Untuk masa ini pilih Normal Page. 
Gambarajah 3.3: FrontPage memaparkan Web baru anda yang telah dibina. 
Menambah Halaman Baru Kepada Web 
1. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Page. Halaman baru akan dipaparkan (lihat gambarajah 3.4). 
Gambarajah 3.4 : Kotak Dialog Page Template untuk membina laman baru. 
Apabila anda membina laman baru, FrontPage akan memberi anda nama fail secara lalai seperti newpage_1.htm, newpage_2.htm dan seterusnya. Anda perlu menyimpan laman anda dengan nama lain yang lebih memberi makna untuk 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 6
memudahkan capaian fail. Jika terdapat ‘*’ di sebelah nama fail, ini bermaksud perubahan telah dibuat pada fail tersebut, dan fail itu belum disimpan. 
4. Penggunaan Templat 
Apa itu Templat? 
Templat adalah satu struktur pra format yang anda gunakan untuk membangunkan pelbagai jenis Web dan laman Web. Atau dengan lain perkataan ia adalah rangka yang boleh digunakan untuk memformatkan produk akhir. 
FrontPage menawarkan sepuluh (10) pilihan templat Web yang berbeza untuk anda pilih bagi membangunkan laman web. (lihat gambarajah 4.1). 
Gambarajah 4.1 : Pilihan templat Web pada FrontPage. 
• One Page Web – untuk membangunkan Web baru dengan halaman yang kosong. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 7
• Corporate Presence Wizard – wizard ini memberi panduan kepada anda langkah-langkah untuk membina web yang mempersembahkan perniagaan anda. 
• Customer Support Web - templat Web ini anda boleh gunakan untuk membina tapak Web yang dapat memperbaiki perkhidmatan sokongan pelanggan terutama bagi kompani perisian. 
• Database Interface Wizard – membina tapak web yang membolehkan anda berhubung dengan pangkalan data untuk melihat, mengemaskini, memadam dan menambah rekod. 
• Discussion Web Wizard – Membina kumpulan perbincangan dengan mudah, jadual isi kandungan, dan pencarian teks. 
• Empty Web – Membina Web baru tanpa mempunyai apa-apa isi. 
• Import Web Wizard – Membina Web yang telah mengandungi dokumen daripada direktori computer anda atau dari system remote file. 
• Personal Web – Membina laman Web personal yang mempunyai kaitamn dengan minat anda, gambar, dan Web kegemaran. 
• Project Web – Membina Web untuk projek yang mempunyai senarai ahli, jadual kerja (schedule), status projek, pencapaian dan perbincangan. 
• Sharedpoint-Based Team Web Site – Membina tapak Web kumpulan dengan kalender acara, perpustakaan untuk berkongsi dokumen, senarai tugasan, senarai hubung, dan banyak lagi. 
Menggunakan Templat Web Wizard 
1. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Web. Kotak dialog Web Site Template akan dipaparkan. 
2. Pilih jenis templat Web yang anda ingin gunakan seperti Personal Web Pilih direktori atau folder di mana anda mahu membina Web dan klik butang OK. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 8
3. Anda akan di beritahu untuk membuat direktori sekiranya folder masih belum terdapat pada computer anda. Jawab Yes, dan FrontPage mula membina templat tersebut. 
4. Dalam beberapa saat templat yang dipilih akan dibina. (lihat gambarajah 4.3) 
Gambarajah 4.3 : Web yang dibina menggunakan templat Personal Web. 
5. Menyimpan Fail Kali Pertama 
Untuk memastikan anda tidak kehilangan segala kerja yang dilakukan menggunakan FrontPage 2003, anda perlu mengikut prosedur yang betul untuk menyimpan fail anda. Caranya adalah seperti berikut: 
1. Simpan kerja anda dengan klik pada butang Save . 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 9
2. Sekiranya anda menambah laman baru pada Web anda anda akan di beritahu untuk memberi nama fail kepada laman yang anda bina. 
3. Untuk menamakan fail, taipkan nama di dalam kotak File Name. 
4. Pada menu File, klik exit. 
6. Membuka Fail Web Sedia Ada 
Jika anda telah menutup program FrontPage 2003 dan ingin mencapai kembali fail web Masjid yang telah dibina sebelum ini, anda perlu membuka Web Sedia Ada (existing Web) untuk menyambung kerja-kerja yang ditinggalkan. 
1. Buka program FrontPage 2003. 
2. Klik pada anak panah disebelah butang Open, dan klik pada Open Web. Kotak dialog Open Web akan membuka kerja-kerja Web yang terakhir dilakukan. Atau anda boleh memilih nama Web yang hendak dibuka kemudian klik butang Open. 
Klik anak panah di sebelah butang Open 
Kemudian, klik butang Open… 
3. Atau jika anda tidak terlibat dengan mana-mana pembinaan web, klik Open. 
- atau – 
Jika anda terlibat pada web yang lain, anda boleh mendapatkan web yang dikehendaki melalui folder web untuk mencari MasjidKU Home Page dan klik Open. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 10
7. Memasukkan Teks 
Memasukkan Teks pada Laman 
Bagi memasukkan teks ke dalam laman anda menggunakan FrontPage adalah semudah anda memasukkan teks pada program pemprosesan perkataan (word processing) iaitu anda hanya perlu menaip perkataan yang anda suka. 
1. Sekiranya anda belum mempunyai laman kosong, bina satu laman yang baru melalui capaian berikut. 
2. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak dialog Page Template akan dipaparkan. 
3. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK. 
4. Pada kursor yang ditunjukkan taipkan perkataan berikut: 
Membina Laman Web Menggunakan FrontPage 2003. 
5. Tekan ENTER dan sambung menaip perkataan berikut. Jangan tekan ENTER apabila anda telah sampai kepada huruf terakhir perkataan tersebut, hanya perlu menaip perkataan yang ditunjukkan di bawah dan biarkan perkataan tersebut ke baris berikutnya secara automatik. 
6. Tekan ENTER apabila selesai menaip perenggan teks di atas. Teks anda lebih kurang akan terhasil seperti gambarajah 7.1. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 11
Gambarajah 7.1 : Contoh teks yang dimasukkan ke dalam laman yang kosong. 
Mengubah Format Teks 
1. Highlightkan teks “Membina Laman Web Menggunakan FrontPage 2003”. 
2. Dengan teks masih terpilih, ubah saiz font dengan memilih 7 (36pt) daripada senarai drop-down Font Size. Atau pada menu Format, pilih Font untuk membuka kotak dialog Font Formatting. Pada bahagian Size, scroll ke bawah untuk memilih 7 (36 pt). Klik OK. Teks anda akan kelihatan seperti gambarajah 7.2. FrontPage memberi anda pilihan untuk memilih saiz yang anda suka dari 8 points hingga 36 points (lihat gambarajah 7.3). 
3. Klik pada Tab Preview. Di sini anda akan melihat bentuk laman web yang akan dipaparkan melalui pelayar. 
Menambah Warna dan Attribut 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 12
1. Highlightkan teks “Membina Laman Web Menggunakan FrontPage 2003”. 
2. Pada menu Format, pilih Font untuk membuka kotak dialog Font (lihat gambarajah 7.4). 
Gambarajah 7.4 : Kotak dialog Font Formatting. 
3. Pilih warna yang anda suka dengan klik pada anak panah disebelah Color untuk membuka Color Pallete. 
4. Pilih Red dan klik butang OK untuk menutup kotak dialog Font Formatting. Warna teks akan berubah menjadi warna merah. 
5. Selain itu anda juga boleh mengubah format teks anda menjadi tebal (Bold), condong (italic) atau bergaris bawah (underlined). 
Menebalkan Tulisan 
1. Highlightkan teks. 
2. Pilih ikon Bold pada toolbar. Teks yang dipilih akan menjadi tebal. 
Mencondongkan Tulisan 
1. Highlightkan teks. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 13
2. Pilih ikon Italic pada toolbar. Teks yang dipilih akan menjadi condong. 
Menggaris bawah Tulisan 
1. Highlightkan teks. 
2. Pilih ikon Underlined pada toolbar. Teks yang dipilih akan bergaris di bawah. 
3. Perenggan teks anda akan kelihatan seperti gambarajah 7.5. 
Gambarajah 7.5 : Teks selepas ditentukan beberapa attribut. 
8. Jadual 
Jadual adalah satu struktur grid bersegi yang boleh anda bina di dalam laman anda untuk dimasukkan teks atau imej. 
Membina Jadual 
1. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak dialog Page Template akan dipaparkan. 
2. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK. 
3. Pada menu Table pilih Insert, kemudian klik Table untuk membuka kotak dialog Insert Table. (lihat gambarajah 8.1). 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 14
Gambarajah 8.1 : Kotak dialog Insert Table. 
Anda boleh juga gunaka butang di tool bar. 
4. Saiz yang ditetapkan untuk jadual sekarang adalah dua lajur dan dua baris menjadikan ia sebagai empat cell. 
5. Pilih saiz tersebut. Juga teruskan sahaja menerima pilihan untuk Layout dan Width yang diberikan. Anda akan belajar bagaimana untuk menukar nilai ini kemudian. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 15
6. Klik butang OK. Jadual akan terbina pada laman anda. (lihat gambarajah 8.2). 
Gambarajah 8.2 : Jadual dengan saiz dua baris dan dua lajur. 
Memahami Saiz Jadual 
Satu perkara yang perlu anda ketahui mengenai jadual adalah bagaimana ia disaizkan. Kelebaran jadual di set sama ada menggunakan peratus atau pixel. 
Jika anda menerima kelebaran asal (tiada perubahan) untuk jadual yang anda buat di atas, ini bermaksud anda telah setkan jadual anda kepada 100 peratus daripada kawasan paparan. Sekiranya anda setkan kelebaran menggunakan pixels, ia akan dikira sebagai saiz jadual tersebut. 
Menukar Kelebaran Jadual 
1. Letakkan kursor di dalam jadual. 
2. Dari menu Table, pilih Select, Table. 
3. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. (lihat gambarajah 8.3). 
4. Pada bahagian Specify Width, pilih butang radio In Pixels dan setkan nilai 400. 
Gambarajah 8.3 : Kotak dialog Table Properties. 
5. Klik butang OK dan jadual anda akan disaizkan mengikut nilai yang baru. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 16
Mengubah Cell Padding 
Cell Padding merujuk kepada jumlah ruang antara kandungan cell jadual dengan kawasan dalaman cell. Cell padding juga diukur dengan ukuran pixel. 
1. Pilih Jadual yang anda bina. 
2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 
3. Pada bahagian Layout, tukar Cell Padding kepada 20. 
4. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. 
Mengubah Cell Spacing 
Cell Spacing merujuk kepada jumlah ruang antara setiap cell di dalam jadual. Cell spacing juga diukur dengan ukuran pixel. 
1. Pilih Jadual yang anda bina. 
2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 
3. Pada bahagian Layout, tukar Cell Spacing kepada 20. 
4. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. (sila lihat gambaajah 8.6). 
Warna Jadual 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 17
Selain setkan saiz jadual, anda juga boleh setkan warna sempadan dan latarbelakang jadual anda. Anda juga boleh setkan sempadan sahaja, atau membina kesan 3 dimensi dengan setkan apa yang dikatakan sempadan terang dan sempadan gelap. 
1. Pilih Jadual yang anda bina. 
2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 
3. Pada bahagian Border, pilih dropbox Color untuk membuka Border Color Pallete. 
4. Anda juga boleh memilih warna untuk latarbelakang atau menggunakan grafik/imej untuk gambar latarbelakang untuk jadual atau sel. 
5. Pilih Red untuk warna sempadan jadual anda. 
6. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. 
Menambah Baris dalam Jadual 
1. Pilih satu cell daripada jadual yang anda bina dengan klik pada cell yang anda ingini. 
2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan sepertib dalam rajah. (lihat gambarajah 8.8). 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 18
Gambarajah 8.8: Kotak dialog Insert Rows or Columns. 
3. Pilih Insert Rows, satu baris akan dimasukkan. (lihat gambarajah 8.9). 
Gambarajah 8.9: Jadual bersama baris baru. 
Membahagikan (Split) Cell 
1. Pilih salah satu cell daripada jadual yang anda bina untuk dipecahkan (split), dengan klik pada cell tersebut. 
2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan. (lihat gambarajah 8.10). 
Gambarajah 8.10: Kotak dialog Spllit Cells. 
3. Pilih sama ada anda ingin Split into Columns atau Split into Rows. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 19
4. Pilih bilangan baris atau lajur yang anda ingin cell itu di pecahkan. Secara lalai nilainya adalah 2; nilai maksimum adalah 100. 
5. Klik butang OK. Hasil paparan adalah seperti gambarajah 8.11. 
Gambarajah 8.11: Jadual dengan pecahan kepada 2 cell. 
Mencantumkan (Merging) Cells 
1. Pilih cell pertama yang anda mahu untuk memasukkan cantuman anda dan letakkan kursor pada cell tersebut. 
2. Tekan tanpa lepas kunci Shift dan pilih laras cell yang anda mahu untuk dicantumkan dengan cell yang dipilih sebelumnya. Dua cell yang dipilih akan dihighlightkan. Kemudian tekan butang kanan pada tetikus untuk memilih Merge Cells (lihat gambarajah 8.12). 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 20
Gambarajah 8.12: Highlight cell yang akan dicantumkan. 
3. Dua cell yang anda pilih akan dicantumkan menjadi satu. 
Memadam Cell 
1. Tentukan cell yang anda ingin padamkan atau baris atau lajur di dalam jadual anda. 
2. Pilih dengan klik di dalam cell, baris atau lajur yang ingin dipadam. 
3. Dari menu Table, pilih Select, Cell (atau Row atau Column, bergantung kepada apa yang anda ingin padam). 
4. Bersama dengan bahagian jadual yang ingin dipadamkan, buka menu Table dan pilih Delete Cells. Pilihan anda akan dipadamkan. 
9. Senarai 
Terdapat tiga jenis senarai iaitu senarai nombor (numbered list), senarai bulleted dan senarai bulleted imej (image bulleted list). 
Membuat Senarai Bernombor 
1. Bina satu senarai yang dapat menunjukkan langkah dalam membuat sesuatu atau susunan kemajuan. Gunakan numbering pada formatting toolbar. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 21
Membuat Senarai Bulleted 
1. Bina satu senarai barangan. 
2. Highlightlan semua teks yang akan dijadikan satu senarai. 
3. Klik pada Bullets pada formatting toolbar. 
Gambarajah 9.5: Contoh senarai Bulleted. 
10. Memasukkan Imej 
Memasukkan Imej dari Fail 
Anda boleh menggunakan imej anda sendiri untuk diletakkan pada lamina web dengan cara berikut. 
1. Pada menu Insert, klik Picture dan klik From File... 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 22
2. Pada kotak dialog Picture, pada kotak Look In, tentukan folder di mana fail imej disimpan (contohnya di dalam driver A:). Pilih nama fail yang dikehendaki kemudian klik OK. 
11. Pautan (Links) 
Membina Pautan (HyperLink) diantara laman web anda 
1. Taipkan sekolah pada akhir perenggan. Pilih perkataan sekolah tersebut. 
2. Klik pada butang kanan dan pilih Hyperlink . 
3. Klik teks.htm pada kotak dialog Create Hyperlink dan klik OK. Teks akan berubah warna dan mempunyai garisan bawah yang menandakan ia mempunyai pautan. 
Membina Pautan (HyperLink) kepada World Wide Web 
1. Pada paparan Page, dwi klik pada imej.htm. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 23
2. Taipkan teks yang anda mahu gunakan sebagai hyperlink dan pilih teks tersebut. Contoh taipkan “Perpustakaan Digital Islam”. 
3. Highlightkan teks yang ditaip tadi. Klik pada butang Hyperlink . 
4. Taip URL laman web tersebut pada ruangan Address dan klik OK. 
5. Atau anda boleh juga menggunakan cara ini: 
Klik pada butang Browse the web . Pada pelayar web anda, layarkan kepada laman yang anda kehendaki, kemudian tekan ALT+TAB untuk menukar balik ke FrontPage 2003. Lokasi laman web yang anda lawati akan dipaparkan di dalam kotal Address. 
Menambah Pautan Grafik kepada Web 
Selain menggunakan teks sebagai pautan kepada sesuatu laman web, anda juga boleh menggunakan grafik. Apabila menggunakan grafik anda boleh menggunakan teks ALT di mana ia dapat memberikan penerangan ringkas mengenai grafik tersebut yang dapat dilihat oleh pengguna sekiranya mereka melalukan cursor di atas grafik. Teks ALT membantu apabila pelawat tidak dapat melihat paparan grafik tersebut. 
Memasukkan Grafik 
1. Pada laman latihan_jadual.htm, letakkan kursor di kiri pautan Perpustakaan Digital Islam. 
2. Pada menu Insert, tunjukkan ke Picture dan klik pada Clipart. Pada kotak teks Search text taipkan Bullets. Pilih bullet yang anda suka, klik pada anak panah disebelah gambar tersebut dan klik pada butang Insert. 
13. Bingkai (frames) 
Bingkai akan membahagikan tetingkap (windows) kepada tetingkap yang lebih kecil. Pembahagian ini akan dapat memudahkan pengguna meluncur di laman web yang dibina. FrontPage 2003 mempunyai satu koleksi templat untuk 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 24
membina bingkai. Ia membenarkan anda untuk meletakkan banyak bingkai di dalam bingkai layout dokumen. Satu bingkai yang ringkas mengandungi dua bingkai, satu mengandungi pautan dan satu lagi memaparkan laman yang dijalinkan oleh pautan tadi. Dalam lain perkataan, apabila pelawat klik pada pautan di bingkai yang pertama, laman yang terpaut akan dipaparkan pada bingkai yang kedua. 
1. Pada toolbar Format, klik pada anak panah butang New dan klik Page. 
2. Pada kotak dialog Page Templat, klik tab Frames Pages dan pilih templat Banner and Contents. 
3. Klik OK untuk menutup kotak dialog Page Template dan hasil templat adalah seperti gambarajah 13.1. 
Gambarajah 13.1 : Laman yang menggunakan templat kandungan berbingkai. 
Membina Menu Yang Ringkas 
1. Pada bingkai di sebelah kiri, klik butang New Page. 
2. Taipkan teks berikut pada laman bingkai tersebut. 
Page 1 
Page 2 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 25
Page 3 
3. Pilih teks Page 1. Daripada menu Insert, pilih Hyperlink untuk membuka kotak dialog Create Hyperlink. 
4. Pada kotak teks Address, masukkan nama salah satu laman Web yang anda bina sebelum ini (pada pelajaran yang lepas – contohnya teks.htm). 
5. Klik butang Target Frame untuk membuka kotak dialog Target Frame. (lihat gambarajah 13.2). 
Gambarajah 13.2 : Kotak dialog Target Frame 
6. Kotak dialog Target Frame akan memaparkan bentuk bingkai laman anda. Pilih kawasan bingkai anda di sebelah kanan dengan klik di dalam bingkai tersebut. Di sini akan dipaparkan kandungan laman yang dipautkan. 
7. Klik butang OK untuk menutup kotak dialog Target Frame. Klik butang OK sekali lagi untuk menutup kotak dialog Hyperlink. 
8. Ulang langkah 3 – 7 dengan memilih teks Page 2 dan Page 3 serta pilih dua laman yang berbeza untuk setiap teks tersebut bagi membuat pautan sebagaimana pautan dalam Page 1. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 26
9. Bingkai anda telah sempurna. Apa yang anda perlukan sekarang cuma pilih laman yang akan memaparkan pautan pada bingkai sebelah kanan. 
10. Klik butang Set Initial Page pada bingkai sebelah kanan untuk membuka kotak dialog Hyperlink. 
11. Masukkan nama fail yang dipautkan dengan Page 1 pada langkah ke 4. 
12. Klik OK untuk menutup kotak dialog. 
Simpan laman bingkai 
Laman yang telah anda bina tadi sebenarnya mengandungi tiga laman HTML yang berasingan. Apabila menyimpan laman bingkai yang baru, anda akan diarahkan untuk menyimpan ketiga-tiga bingkai. 
1. Klik butang Save . 
2. Pada kotak File Name, taipkan Frame.htm. 
3. Klik Save. Kotak dialog Save hilang dari skrin dan anda akan diminta untuk menyimpan dua baki dokumen. 
4. Pada kotak File Name, taipkan left.htm. 
5. Klik Save. Preview untuk hasil paparan. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 27
SESI 1 : PENGENALAN KEPADA ANTARAMUKA WS_FTP LE 
OBJEKTIF : Membuat sambungan kepada pelayan FTP 
1. Perisian ini boleh dimuat turun menerusi laman web Kompleks Falak Al-Khawarizmi di muka surat Pertandingan Laman Web : http://www.al- azim.com/khawarizmi/maklumat/pertandingan.html. 
2. Muat turun fail tersebut dan jalankan proses Installation pada komputer masing-masing. Ikut arahan yang dinyatakan oleh sistem. 
3. Setelah proses Installation selesai, pengguna perlu mengaktifkan perisian ini dengan cara klik pada icon perisian di desktop komputer. 
4. Paparan di bawah akan kelihatan di komputer apabila pengguna mengaktifkan perisian. Rujuk Rajah 1.1. 
Rajah 1.1 : Antaramuka Kemasukan Data ke WS_FTP LE 
Penerangan : 
Profile Name : Membenarkan pengguna memberi nama kepada sambungan yang akan dibuat supaya memudahkan pengguna untuk mengingati tujuan sambungan 
Host Name/Address : Nama atau Alamat pelayan FTP 
User ID : ID pengguna bertujuan untuk mengenalpasti identiti pengguna yang akan memasuki pelayan FTP 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 28
Password : Kata laluan bertujuan memberi laluan hanya kepada pengguna yang diiktiraf oleh pentadbir sistem FTP. 
5. Setelah maklumat dipenuhkan, pengguna boleh klik butang OK. Sambungan akan dilaksanakan oleh sistem. Pastikan sambungan ke Internet wujud terlebih dahulu agar sambungan ke pelayan boleh dilaksanakan. 
SESI 2 : PENYELENGGARAAN FAIL DAN FOLDER. 
OBJEKTIF : Memindah fail dari komputer ke pelayan bagi membolehkan fail tersebut dicapai menerusi Internet. 
1. Paparan di bawah akan kelihatan setelah penyambungan berjaya. Terdapat 2 panel iaitu Local System dan Remote Site. Panel Local System merujuk kepada direktori yang terdapat di dalam ruang cakera keras manakala panel Remote Site merujuk kepada direktori yang terdapat di dalam pelayan. Folder public_html pula adalah folder para pengguna meletakkan kesemua fail-fail pembangunan laman web. Rujuk Rajah 2.1. 
Rajah 2.1 : Antaramuka yang menunjukkan senarai direktori dan folder 
2. Pilih folder yang mengandungi fail-fail laman web dalam cakera keras. Klik 2x pada folder tersebut yang terdapat di bahagian Local System. Klik 2x pada folder public_html yang terdapat pada panel Remote Site. Rujuk paparan Rajah 2.2 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 29
Rajah 2.2 : Antaramuka menunjukkan senarai folder dan nama fail 
3. Pengguna boleh memilih fail yang diperlukan untuk pembangunan laman web dan seterusnya boleh menghantar ke Remote Site dengan menekan butang anak panah ke folder public_html. 
4. Pastikan fail laman web utama bernama index.htm atau index.html. Ini kerana nama tersebut merupakan fail default untuk laman web utama. 
5. Adalah dinasihatkan supaya mengumpul kesemua bahan bergambar (imej grafik) di dalam satu folder yang sama untuk mengelakkan sebarang imej tertinggal dan tidak dihantar ke pelayan. Kaedah penghantaran folder juga adalah sama dengan kaedah nombor 3 di atas. 
6. Laman web anda boleh dilayari di * http://lamanweb.khawarizmiobs.com apabila kesemua fail telah di hantar ke folder public_html. 
* gantikan perkataan “lamanweb” dengan “User ID” anda bagi tujuan capai 
SELAMAT MAJU JAYA. 
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 30
Pertandingan Merekabentuk Laman Web Falak/Astronomi 
Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 31

More Related Content

Viewers also liked

רגיל בדיקת וידאו
רגיל בדיקת וידאורגיל בדיקת וידאו
רגיל בדיקת וידאוcloudcom092013
 
Highlightsportfolio 2014-
Highlightsportfolio 2014-Highlightsportfolio 2014-
Highlightsportfolio 2014-renee williams
 
Standar Pendidikan Bidan
Standar Pendidikan BidanStandar Pendidikan Bidan
Standar Pendidikan Bidanpjj_kemenkes
 
Pensumanalisis 140701080309-phpapp01
Pensumanalisis 140701080309-phpapp01Pensumanalisis 140701080309-phpapp01
Pensumanalisis 140701080309-phpapp01Ce DCyT
 

Viewers also liked (8)

רגיל בדיקת וידאו
רגיל בדיקת וידאורגיל בדיקת וידאו
רגיל בדיקת וידאו
 
Highlightsportfolio 2014-
Highlightsportfolio 2014-Highlightsportfolio 2014-
Highlightsportfolio 2014-
 
Cosas quevendo
Cosas quevendoCosas quevendo
Cosas quevendo
 
ciber cultura
ciber culturaciber cultura
ciber cultura
 
Capacitación comscore
Capacitación comscoreCapacitación comscore
Capacitación comscore
 
Standar Pendidikan Bidan
Standar Pendidikan BidanStandar Pendidikan Bidan
Standar Pendidikan Bidan
 
Chapter 1microorganism
Chapter 1microorganismChapter 1microorganism
Chapter 1microorganism
 
Pensumanalisis 140701080309-phpapp01
Pensumanalisis 140701080309-phpapp01Pensumanalisis 140701080309-phpapp01
Pensumanalisis 140701080309-phpapp01
 

Similar to Frontpage

Modul pembelajaran dreamweaver mx 2004 v1
Modul pembelajaran dreamweaver mx 2004 v1Modul pembelajaran dreamweaver mx 2004 v1
Modul pembelajaran dreamweaver mx 2004 v1zhafdiana
 
Nota ladap-chromebook & frogvle
Nota ladap-chromebook & frogvle Nota ladap-chromebook & frogvle
Nota ladap-chromebook & frogvle SKPA_2
 
1. frog vle ssi
1. frog vle ssi1. frog vle ssi
1. frog vle ssiCikgu Bibi
 
Nota Pembangunan Laman Web
Nota Pembangunan Laman WebNota Pembangunan Laman Web
Nota Pembangunan Laman WebFarah Waheda
 
Modulpembinaansitepanitia 130826074712-phpapp02
Modulpembinaansitepanitia 130826074712-phpapp02Modulpembinaansitepanitia 130826074712-phpapp02
Modulpembinaansitepanitia 130826074712-phpapp02Azlina Ramli
 
Bab 1 | PENGENALAN KEPADA PANGKALAN DATA
Bab 1 | PENGENALAN KEPADA PANGKALAN DATABab 1 | PENGENALAN KEPADA PANGKALAN DATA
Bab 1 | PENGENALAN KEPADA PANGKALAN DATAX-Komuniti Idbms
 
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)Panduan pengguna untuk sekolah rintis ki dt 2014 (3)
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)Tajulddin Muhammad
 
Oumh1103 topik 10
Oumh1103 topik 10Oumh1103 topik 10
Oumh1103 topik 10azman_awan9
 
Manual pengguna membuat sites
Manual pengguna membuat sitesManual pengguna membuat sites
Manual pengguna membuat sitesHajar Len
 
Nota ms powerpoint 2007 asas instun
Nota ms powerpoint 2007 asas instunNota ms powerpoint 2007 asas instun
Nota ms powerpoint 2007 asas instunRynnie Serojai
 
Tutorial 2 langkah share site
Tutorial 2   langkah share siteTutorial 2   langkah share site
Tutorial 2 langkah share sitejane nour
 
Memasang joomla! di komputer sendiri
Memasang joomla! di komputer sendiriMemasang joomla! di komputer sendiri
Memasang joomla! di komputer sendiriMohd Hazmi Kasmin
 

Similar to Frontpage (20)

Frontpage
FrontpageFrontpage
Frontpage
 
Frontpage
FrontpageFrontpage
Frontpage
 
Frontpage
FrontpageFrontpage
Frontpage
 
Modul pembelajaran dreamweaver mx 2004 v1
Modul pembelajaran dreamweaver mx 2004 v1Modul pembelajaran dreamweaver mx 2004 v1
Modul pembelajaran dreamweaver mx 2004 v1
 
Nota ladap-chromebook & frogvle
Nota ladap-chromebook & frogvle Nota ladap-chromebook & frogvle
Nota ladap-chromebook & frogvle
 
Nota ladap-1
Nota ladap-1Nota ladap-1
Nota ladap-1
 
Bengkel vle
Bengkel vleBengkel vle
Bengkel vle
 
1. frog vle ssi
1. frog vle ssi1. frog vle ssi
1. frog vle ssi
 
Bengkel frog vle smktls
Bengkel frog vle smktlsBengkel frog vle smktls
Bengkel frog vle smktls
 
Panduan Frog VLE
Panduan Frog VLE Panduan Frog VLE
Panduan Frog VLE
 
Nota Pembangunan Laman Web
Nota Pembangunan Laman WebNota Pembangunan Laman Web
Nota Pembangunan Laman Web
 
Modulpembinaansitepanitia 130826074712-phpapp02
Modulpembinaansitepanitia 130826074712-phpapp02Modulpembinaansitepanitia 130826074712-phpapp02
Modulpembinaansitepanitia 130826074712-phpapp02
 
Total Web Lite
Total Web LiteTotal Web Lite
Total Web Lite
 
Bab 1 | PENGENALAN KEPADA PANGKALAN DATA
Bab 1 | PENGENALAN KEPADA PANGKALAN DATABab 1 | PENGENALAN KEPADA PANGKALAN DATA
Bab 1 | PENGENALAN KEPADA PANGKALAN DATA
 
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)Panduan pengguna untuk sekolah rintis ki dt 2014 (3)
Panduan pengguna untuk sekolah rintis ki dt 2014 (3)
 
Oumh1103 topik 10
Oumh1103 topik 10Oumh1103 topik 10
Oumh1103 topik 10
 
Manual pengguna membuat sites
Manual pengguna membuat sitesManual pengguna membuat sites
Manual pengguna membuat sites
 
Nota ms powerpoint 2007 asas instun
Nota ms powerpoint 2007 asas instunNota ms powerpoint 2007 asas instun
Nota ms powerpoint 2007 asas instun
 
Tutorial 2 langkah share site
Tutorial 2   langkah share siteTutorial 2   langkah share site
Tutorial 2 langkah share site
 
Memasang joomla! di komputer sendiri
Memasang joomla! di komputer sendiriMemasang joomla! di komputer sendiri
Memasang joomla! di komputer sendiri
 

More from Nadya Olivia

More from Nadya Olivia (18)

Video editing@
Video editing@Video editing@
Video editing@
 
Frontpage
FrontpageFrontpage
Frontpage
 
Materi ke 4
Materi ke 4Materi ke 4
Materi ke 4
 
Materi html ke 3
Materi html ke 3Materi html ke 3
Materi html ke 3
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Bahasa pemrograman pascal
Bahasa pemrograman pascalBahasa pemrograman pascal
Bahasa pemrograman pascal
 
Pengenalan pascal asli
Pengenalan pascal asliPengenalan pascal asli
Pengenalan pascal asli
 
jaringan komputer
jaringan komputerjaringan komputer
jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Casing
CasingCasing
Casing
 
Pengenalan komputer mulok
Pengenalan komputer mulokPengenalan komputer mulok
Pengenalan komputer mulok
 
Sistem bilangan4
Sistem bilangan4Sistem bilangan4
Sistem bilangan4
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 

Frontpage

  • 1. Membina Laman Web Menggunakan FrontPage 2003 1. Pengenalan Kepada FrontPage 2003 FrontPage 2003 merupakan salah satu perisian yang boleh digunakan untuk membina laman web dengan cara yang mudah. Dengan menggunakan FrontPage 2003 rangka struktur atau layout laman web dapat dibina, boleh memasukkan tema grafik kepada laman web, serta boleh menguruskan fail dan folder yang dikehendaki. Selain itu fail-fail juga boleh diimport dan dieksport, diuji, serta membaiki pautan (hyperlinks), menentukan tugas dan merekabentuk serta mengemaskini kandungan laman web. Bagi web yang telah lengkap dibina, FrontPage 2003 boleh digunakan untuk menerbitkan (publish) laman web ke dalam komputer, intranet organisasi atau melalui World Wide Web. FrontPage 2003 akan memaparkan komponen tambahan seperti teks, imej dan borang sebagaimana ia direkabentuk dan diatur ke pelayar (browser) web. FrontPage 2003 mudah digunakan kerana ia sama seperti perisian pemprosesan perkataan (word processor). Untuk menggunakan perisian FrontPage 2003 tidak memerlukan untuk mempelajari bahasa Hypertext Markup Language (HTML) kerana FrontPage 2003 akan membinanya sendiri. Walaubagaimanapun bagi yang mengetahui HTML, kod-kod HTML masih boleh dibaiki dengan klik pada tab HTML di bahagian kiri bawah pada paparan Page View. Tab Normal adalah untuk format “What you see is what you get” (WYSIWYG). Manakala tab Preview adalah bagi membolehkan pengguna melihat hasil paparan laman web mereka yang akan kelihatan pada pelayar. 1
  • 2. 2. Memulakan FrontPage 2003 Untuk membuka program FrontPage 2003 ikuti langkah-langkah berikut: 1. On kan komputer anda. 2. Pada Windows Taskbar, klik pada Start, kemudian Programs dan klik pada program Microsoft Office FrontPage 2003. (lihat gambarajah 2.1). Gambarajah 2.1 : Ikon Microsoft Front Page yang digunakan untuk memulakan FrontPage. 3. Tetingkap Microsoft FrontPage akan muncul. Ia adalah kosong kerana belum memuatkan tapak web. (lihat gambarajah 2.2). Pada kawasan halaman inilah pembangunan web akan dilakukan. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 2
  • 3. Paparan Antaramuka Utama Gambarajah 2.2 : Paparan Antaramuka Utama pada Program FrontPage 2003. Mengenali Dan Memahami FrontPage Apabila membuka perisian FrontPage 2003 untuk kali pertama, terdapat tiga toolbar yang akan di paparkan pada paparan halaman (page view) iaitu menu toolbar, standard toolbar dan formatting toolbar. Menu toolbar Menu bar mengandungi senarai menu yang dapat membantu di dalam membina, mengemaskini dan memformat laman web di dalam FrontPage 2003. Jika anda klik pada setiap menu yang diberikan, terdapat pilihan lain yang boleh dicapai. Sekiranya pilihan menu kelihatan tenggelam (bewarna kelabu) ini bermaksud, pilihan tersebut tidak aktif atau tidak boleh digunakan bagi aktiviti tersebut. Jika anda melihat tanda chevron pada bahagian bawah menu, klik pada tanda Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 3
  • 4. tersebut dan baki pilihan menu yang ditawarkan akan dipaparkan. Pilihan yang selalu digunakan akan diletakkan di bahagian atas menu. Meneroka Menu toolbar dengan klik pada setiap menu. Contoh, klik pada Insert untuk melihat pilihan di dalam menu Insert. Standard toolbar Standard toolbar mengandungi butang yang akan memberikan anda capaian yang pantas kepada fungsi-fungsi yang biasanya digunakan di dalam perisian FrontPage 2003 seperti membuka fail, menyimpan dan mencetak. Anak panah menandakan bahawa tetambahan pilihan untuk item menu ini. rdapat Chevron bermaksud terdapat banyak lagi pilihan yang ditawarkan. Klik untuk bina, buka, simpan atau sampaikan dokumen sebagai e-mail. Cetak dokumen, pratonton cetak atau semak ejaan. Membatal atau buat semula tindakan. Masukkan jalinan (hyperlink). Paparkan atau sembunyikan penanda. Paparkan senarai folder digunakan di dalam tapak web Potong, salin dan tampal objek, teks atau style. Tambah komponen, cipta jadual atau tambah grafik. Refresh halaman atau berhenti dari perlaksanaan. Tanya pada Answer Wizard untuk bantuan. Formatting toolbar Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 4
  • 5. Formatting toolbar mengandungi butang yang membenarkan anda untuk memformat teks dan perenggan di dalam laman web. Format style perenggan dalam laman web anda. Tukar saiz font dalam laman web. Menyamakan teks ke kanan, tengah atau ke kiri. Highlight teks atau menukar warna font. Tukar font dalam laman web Format font sebagai bold, italic atau underlined. Format senarai teks sebagai nombor atau bullet dan menambah inden ke dalam atau ke luar. 3. Membangunkan Web Yang Pertama 1. Buka FrontPage 2003. Paparan Halaman (Page View) akan dipaparkan. 2. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Page…. Kotak dialog Page Templates akan diaparkan. (lihat gambarajah 3.1). Gambarajah 3.1 : Kotak dialog New digunakan untuk membina web baru. 3. Pilih jenis web yang anda ingin bina daripada senarai pilihan templat web yang disediakan. Anda akan mempelajari mengenai templat web ini Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 5
  • 6. dengan lebih lanjut pada bab berikutnya. Untuk masa ini pilih Normal Page. Gambarajah 3.3: FrontPage memaparkan Web baru anda yang telah dibina. Menambah Halaman Baru Kepada Web 1. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Page. Halaman baru akan dipaparkan (lihat gambarajah 3.4). Gambarajah 3.4 : Kotak Dialog Page Template untuk membina laman baru. Apabila anda membina laman baru, FrontPage akan memberi anda nama fail secara lalai seperti newpage_1.htm, newpage_2.htm dan seterusnya. Anda perlu menyimpan laman anda dengan nama lain yang lebih memberi makna untuk Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 6
  • 7. memudahkan capaian fail. Jika terdapat ‘*’ di sebelah nama fail, ini bermaksud perubahan telah dibuat pada fail tersebut, dan fail itu belum disimpan. 4. Penggunaan Templat Apa itu Templat? Templat adalah satu struktur pra format yang anda gunakan untuk membangunkan pelbagai jenis Web dan laman Web. Atau dengan lain perkataan ia adalah rangka yang boleh digunakan untuk memformatkan produk akhir. FrontPage menawarkan sepuluh (10) pilihan templat Web yang berbeza untuk anda pilih bagi membangunkan laman web. (lihat gambarajah 4.1). Gambarajah 4.1 : Pilihan templat Web pada FrontPage. • One Page Web – untuk membangunkan Web baru dengan halaman yang kosong. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 7
  • 8. • Corporate Presence Wizard – wizard ini memberi panduan kepada anda langkah-langkah untuk membina web yang mempersembahkan perniagaan anda. • Customer Support Web - templat Web ini anda boleh gunakan untuk membina tapak Web yang dapat memperbaiki perkhidmatan sokongan pelanggan terutama bagi kompani perisian. • Database Interface Wizard – membina tapak web yang membolehkan anda berhubung dengan pangkalan data untuk melihat, mengemaskini, memadam dan menambah rekod. • Discussion Web Wizard – Membina kumpulan perbincangan dengan mudah, jadual isi kandungan, dan pencarian teks. • Empty Web – Membina Web baru tanpa mempunyai apa-apa isi. • Import Web Wizard – Membina Web yang telah mengandungi dokumen daripada direktori computer anda atau dari system remote file. • Personal Web – Membina laman Web personal yang mempunyai kaitamn dengan minat anda, gambar, dan Web kegemaran. • Project Web – Membina Web untuk projek yang mempunyai senarai ahli, jadual kerja (schedule), status projek, pencapaian dan perbincangan. • Sharedpoint-Based Team Web Site – Membina tapak Web kumpulan dengan kalender acara, perpustakaan untuk berkongsi dokumen, senarai tugasan, senarai hubung, dan banyak lagi. Menggunakan Templat Web Wizard 1. Pada Standard toolbar, klik pada anak panah di sebelah butang New dan klik pada Web. Kotak dialog Web Site Template akan dipaparkan. 2. Pilih jenis templat Web yang anda ingin gunakan seperti Personal Web Pilih direktori atau folder di mana anda mahu membina Web dan klik butang OK. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 8
  • 9. 3. Anda akan di beritahu untuk membuat direktori sekiranya folder masih belum terdapat pada computer anda. Jawab Yes, dan FrontPage mula membina templat tersebut. 4. Dalam beberapa saat templat yang dipilih akan dibina. (lihat gambarajah 4.3) Gambarajah 4.3 : Web yang dibina menggunakan templat Personal Web. 5. Menyimpan Fail Kali Pertama Untuk memastikan anda tidak kehilangan segala kerja yang dilakukan menggunakan FrontPage 2003, anda perlu mengikut prosedur yang betul untuk menyimpan fail anda. Caranya adalah seperti berikut: 1. Simpan kerja anda dengan klik pada butang Save . Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 9
  • 10. 2. Sekiranya anda menambah laman baru pada Web anda anda akan di beritahu untuk memberi nama fail kepada laman yang anda bina. 3. Untuk menamakan fail, taipkan nama di dalam kotak File Name. 4. Pada menu File, klik exit. 6. Membuka Fail Web Sedia Ada Jika anda telah menutup program FrontPage 2003 dan ingin mencapai kembali fail web Masjid yang telah dibina sebelum ini, anda perlu membuka Web Sedia Ada (existing Web) untuk menyambung kerja-kerja yang ditinggalkan. 1. Buka program FrontPage 2003. 2. Klik pada anak panah disebelah butang Open, dan klik pada Open Web. Kotak dialog Open Web akan membuka kerja-kerja Web yang terakhir dilakukan. Atau anda boleh memilih nama Web yang hendak dibuka kemudian klik butang Open. Klik anak panah di sebelah butang Open Kemudian, klik butang Open… 3. Atau jika anda tidak terlibat dengan mana-mana pembinaan web, klik Open. - atau – Jika anda terlibat pada web yang lain, anda boleh mendapatkan web yang dikehendaki melalui folder web untuk mencari MasjidKU Home Page dan klik Open. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 10
  • 11. 7. Memasukkan Teks Memasukkan Teks pada Laman Bagi memasukkan teks ke dalam laman anda menggunakan FrontPage adalah semudah anda memasukkan teks pada program pemprosesan perkataan (word processing) iaitu anda hanya perlu menaip perkataan yang anda suka. 1. Sekiranya anda belum mempunyai laman kosong, bina satu laman yang baru melalui capaian berikut. 2. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak dialog Page Template akan dipaparkan. 3. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK. 4. Pada kursor yang ditunjukkan taipkan perkataan berikut: Membina Laman Web Menggunakan FrontPage 2003. 5. Tekan ENTER dan sambung menaip perkataan berikut. Jangan tekan ENTER apabila anda telah sampai kepada huruf terakhir perkataan tersebut, hanya perlu menaip perkataan yang ditunjukkan di bawah dan biarkan perkataan tersebut ke baris berikutnya secara automatik. 6. Tekan ENTER apabila selesai menaip perenggan teks di atas. Teks anda lebih kurang akan terhasil seperti gambarajah 7.1. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 11
  • 12. Gambarajah 7.1 : Contoh teks yang dimasukkan ke dalam laman yang kosong. Mengubah Format Teks 1. Highlightkan teks “Membina Laman Web Menggunakan FrontPage 2003”. 2. Dengan teks masih terpilih, ubah saiz font dengan memilih 7 (36pt) daripada senarai drop-down Font Size. Atau pada menu Format, pilih Font untuk membuka kotak dialog Font Formatting. Pada bahagian Size, scroll ke bawah untuk memilih 7 (36 pt). Klik OK. Teks anda akan kelihatan seperti gambarajah 7.2. FrontPage memberi anda pilihan untuk memilih saiz yang anda suka dari 8 points hingga 36 points (lihat gambarajah 7.3). 3. Klik pada Tab Preview. Di sini anda akan melihat bentuk laman web yang akan dipaparkan melalui pelayar. Menambah Warna dan Attribut Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 12
  • 13. 1. Highlightkan teks “Membina Laman Web Menggunakan FrontPage 2003”. 2. Pada menu Format, pilih Font untuk membuka kotak dialog Font (lihat gambarajah 7.4). Gambarajah 7.4 : Kotak dialog Font Formatting. 3. Pilih warna yang anda suka dengan klik pada anak panah disebelah Color untuk membuka Color Pallete. 4. Pilih Red dan klik butang OK untuk menutup kotak dialog Font Formatting. Warna teks akan berubah menjadi warna merah. 5. Selain itu anda juga boleh mengubah format teks anda menjadi tebal (Bold), condong (italic) atau bergaris bawah (underlined). Menebalkan Tulisan 1. Highlightkan teks. 2. Pilih ikon Bold pada toolbar. Teks yang dipilih akan menjadi tebal. Mencondongkan Tulisan 1. Highlightkan teks. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 13
  • 14. 2. Pilih ikon Italic pada toolbar. Teks yang dipilih akan menjadi condong. Menggaris bawah Tulisan 1. Highlightkan teks. 2. Pilih ikon Underlined pada toolbar. Teks yang dipilih akan bergaris di bawah. 3. Perenggan teks anda akan kelihatan seperti gambarajah 7.5. Gambarajah 7.5 : Teks selepas ditentukan beberapa attribut. 8. Jadual Jadual adalah satu struktur grid bersegi yang boleh anda bina di dalam laman anda untuk dimasukkan teks atau imej. Membina Jadual 1. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak dialog Page Template akan dipaparkan. 2. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK. 3. Pada menu Table pilih Insert, kemudian klik Table untuk membuka kotak dialog Insert Table. (lihat gambarajah 8.1). Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 14
  • 15. Gambarajah 8.1 : Kotak dialog Insert Table. Anda boleh juga gunaka butang di tool bar. 4. Saiz yang ditetapkan untuk jadual sekarang adalah dua lajur dan dua baris menjadikan ia sebagai empat cell. 5. Pilih saiz tersebut. Juga teruskan sahaja menerima pilihan untuk Layout dan Width yang diberikan. Anda akan belajar bagaimana untuk menukar nilai ini kemudian. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 15
  • 16. 6. Klik butang OK. Jadual akan terbina pada laman anda. (lihat gambarajah 8.2). Gambarajah 8.2 : Jadual dengan saiz dua baris dan dua lajur. Memahami Saiz Jadual Satu perkara yang perlu anda ketahui mengenai jadual adalah bagaimana ia disaizkan. Kelebaran jadual di set sama ada menggunakan peratus atau pixel. Jika anda menerima kelebaran asal (tiada perubahan) untuk jadual yang anda buat di atas, ini bermaksud anda telah setkan jadual anda kepada 100 peratus daripada kawasan paparan. Sekiranya anda setkan kelebaran menggunakan pixels, ia akan dikira sebagai saiz jadual tersebut. Menukar Kelebaran Jadual 1. Letakkan kursor di dalam jadual. 2. Dari menu Table, pilih Select, Table. 3. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. (lihat gambarajah 8.3). 4. Pada bahagian Specify Width, pilih butang radio In Pixels dan setkan nilai 400. Gambarajah 8.3 : Kotak dialog Table Properties. 5. Klik butang OK dan jadual anda akan disaizkan mengikut nilai yang baru. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 16
  • 17. Mengubah Cell Padding Cell Padding merujuk kepada jumlah ruang antara kandungan cell jadual dengan kawasan dalaman cell. Cell padding juga diukur dengan ukuran pixel. 1. Pilih Jadual yang anda bina. 2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 3. Pada bahagian Layout, tukar Cell Padding kepada 20. 4. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. Mengubah Cell Spacing Cell Spacing merujuk kepada jumlah ruang antara setiap cell di dalam jadual. Cell spacing juga diukur dengan ukuran pixel. 1. Pilih Jadual yang anda bina. 2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 3. Pada bahagian Layout, tukar Cell Spacing kepada 20. 4. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. (sila lihat gambaajah 8.6). Warna Jadual Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 17
  • 18. Selain setkan saiz jadual, anda juga boleh setkan warna sempadan dan latarbelakang jadual anda. Anda juga boleh setkan sempadan sahaja, atau membina kesan 3 dimensi dengan setkan apa yang dikatakan sempadan terang dan sempadan gelap. 1. Pilih Jadual yang anda bina. 2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties. 3. Pada bahagian Border, pilih dropbox Color untuk membuka Border Color Pallete. 4. Anda juga boleh memilih warna untuk latarbelakang atau menggunakan grafik/imej untuk gambar latarbelakang untuk jadual atau sel. 5. Pilih Red untuk warna sempadan jadual anda. 6. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan. Menambah Baris dalam Jadual 1. Pilih satu cell daripada jadual yang anda bina dengan klik pada cell yang anda ingini. 2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan sepertib dalam rajah. (lihat gambarajah 8.8). Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 18
  • 19. Gambarajah 8.8: Kotak dialog Insert Rows or Columns. 3. Pilih Insert Rows, satu baris akan dimasukkan. (lihat gambarajah 8.9). Gambarajah 8.9: Jadual bersama baris baru. Membahagikan (Split) Cell 1. Pilih salah satu cell daripada jadual yang anda bina untuk dipecahkan (split), dengan klik pada cell tersebut. 2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan. (lihat gambarajah 8.10). Gambarajah 8.10: Kotak dialog Spllit Cells. 3. Pilih sama ada anda ingin Split into Columns atau Split into Rows. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 19
  • 20. 4. Pilih bilangan baris atau lajur yang anda ingin cell itu di pecahkan. Secara lalai nilainya adalah 2; nilai maksimum adalah 100. 5. Klik butang OK. Hasil paparan adalah seperti gambarajah 8.11. Gambarajah 8.11: Jadual dengan pecahan kepada 2 cell. Mencantumkan (Merging) Cells 1. Pilih cell pertama yang anda mahu untuk memasukkan cantuman anda dan letakkan kursor pada cell tersebut. 2. Tekan tanpa lepas kunci Shift dan pilih laras cell yang anda mahu untuk dicantumkan dengan cell yang dipilih sebelumnya. Dua cell yang dipilih akan dihighlightkan. Kemudian tekan butang kanan pada tetikus untuk memilih Merge Cells (lihat gambarajah 8.12). Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 20
  • 21. Gambarajah 8.12: Highlight cell yang akan dicantumkan. 3. Dua cell yang anda pilih akan dicantumkan menjadi satu. Memadam Cell 1. Tentukan cell yang anda ingin padamkan atau baris atau lajur di dalam jadual anda. 2. Pilih dengan klik di dalam cell, baris atau lajur yang ingin dipadam. 3. Dari menu Table, pilih Select, Cell (atau Row atau Column, bergantung kepada apa yang anda ingin padam). 4. Bersama dengan bahagian jadual yang ingin dipadamkan, buka menu Table dan pilih Delete Cells. Pilihan anda akan dipadamkan. 9. Senarai Terdapat tiga jenis senarai iaitu senarai nombor (numbered list), senarai bulleted dan senarai bulleted imej (image bulleted list). Membuat Senarai Bernombor 1. Bina satu senarai yang dapat menunjukkan langkah dalam membuat sesuatu atau susunan kemajuan. Gunakan numbering pada formatting toolbar. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 21
  • 22. Membuat Senarai Bulleted 1. Bina satu senarai barangan. 2. Highlightlan semua teks yang akan dijadikan satu senarai. 3. Klik pada Bullets pada formatting toolbar. Gambarajah 9.5: Contoh senarai Bulleted. 10. Memasukkan Imej Memasukkan Imej dari Fail Anda boleh menggunakan imej anda sendiri untuk diletakkan pada lamina web dengan cara berikut. 1. Pada menu Insert, klik Picture dan klik From File... Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 22
  • 23. 2. Pada kotak dialog Picture, pada kotak Look In, tentukan folder di mana fail imej disimpan (contohnya di dalam driver A:). Pilih nama fail yang dikehendaki kemudian klik OK. 11. Pautan (Links) Membina Pautan (HyperLink) diantara laman web anda 1. Taipkan sekolah pada akhir perenggan. Pilih perkataan sekolah tersebut. 2. Klik pada butang kanan dan pilih Hyperlink . 3. Klik teks.htm pada kotak dialog Create Hyperlink dan klik OK. Teks akan berubah warna dan mempunyai garisan bawah yang menandakan ia mempunyai pautan. Membina Pautan (HyperLink) kepada World Wide Web 1. Pada paparan Page, dwi klik pada imej.htm. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 23
  • 24. 2. Taipkan teks yang anda mahu gunakan sebagai hyperlink dan pilih teks tersebut. Contoh taipkan “Perpustakaan Digital Islam”. 3. Highlightkan teks yang ditaip tadi. Klik pada butang Hyperlink . 4. Taip URL laman web tersebut pada ruangan Address dan klik OK. 5. Atau anda boleh juga menggunakan cara ini: Klik pada butang Browse the web . Pada pelayar web anda, layarkan kepada laman yang anda kehendaki, kemudian tekan ALT+TAB untuk menukar balik ke FrontPage 2003. Lokasi laman web yang anda lawati akan dipaparkan di dalam kotal Address. Menambah Pautan Grafik kepada Web Selain menggunakan teks sebagai pautan kepada sesuatu laman web, anda juga boleh menggunakan grafik. Apabila menggunakan grafik anda boleh menggunakan teks ALT di mana ia dapat memberikan penerangan ringkas mengenai grafik tersebut yang dapat dilihat oleh pengguna sekiranya mereka melalukan cursor di atas grafik. Teks ALT membantu apabila pelawat tidak dapat melihat paparan grafik tersebut. Memasukkan Grafik 1. Pada laman latihan_jadual.htm, letakkan kursor di kiri pautan Perpustakaan Digital Islam. 2. Pada menu Insert, tunjukkan ke Picture dan klik pada Clipart. Pada kotak teks Search text taipkan Bullets. Pilih bullet yang anda suka, klik pada anak panah disebelah gambar tersebut dan klik pada butang Insert. 13. Bingkai (frames) Bingkai akan membahagikan tetingkap (windows) kepada tetingkap yang lebih kecil. Pembahagian ini akan dapat memudahkan pengguna meluncur di laman web yang dibina. FrontPage 2003 mempunyai satu koleksi templat untuk Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 24
  • 25. membina bingkai. Ia membenarkan anda untuk meletakkan banyak bingkai di dalam bingkai layout dokumen. Satu bingkai yang ringkas mengandungi dua bingkai, satu mengandungi pautan dan satu lagi memaparkan laman yang dijalinkan oleh pautan tadi. Dalam lain perkataan, apabila pelawat klik pada pautan di bingkai yang pertama, laman yang terpaut akan dipaparkan pada bingkai yang kedua. 1. Pada toolbar Format, klik pada anak panah butang New dan klik Page. 2. Pada kotak dialog Page Templat, klik tab Frames Pages dan pilih templat Banner and Contents. 3. Klik OK untuk menutup kotak dialog Page Template dan hasil templat adalah seperti gambarajah 13.1. Gambarajah 13.1 : Laman yang menggunakan templat kandungan berbingkai. Membina Menu Yang Ringkas 1. Pada bingkai di sebelah kiri, klik butang New Page. 2. Taipkan teks berikut pada laman bingkai tersebut. Page 1 Page 2 Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 25
  • 26. Page 3 3. Pilih teks Page 1. Daripada menu Insert, pilih Hyperlink untuk membuka kotak dialog Create Hyperlink. 4. Pada kotak teks Address, masukkan nama salah satu laman Web yang anda bina sebelum ini (pada pelajaran yang lepas – contohnya teks.htm). 5. Klik butang Target Frame untuk membuka kotak dialog Target Frame. (lihat gambarajah 13.2). Gambarajah 13.2 : Kotak dialog Target Frame 6. Kotak dialog Target Frame akan memaparkan bentuk bingkai laman anda. Pilih kawasan bingkai anda di sebelah kanan dengan klik di dalam bingkai tersebut. Di sini akan dipaparkan kandungan laman yang dipautkan. 7. Klik butang OK untuk menutup kotak dialog Target Frame. Klik butang OK sekali lagi untuk menutup kotak dialog Hyperlink. 8. Ulang langkah 3 – 7 dengan memilih teks Page 2 dan Page 3 serta pilih dua laman yang berbeza untuk setiap teks tersebut bagi membuat pautan sebagaimana pautan dalam Page 1. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 26
  • 27. 9. Bingkai anda telah sempurna. Apa yang anda perlukan sekarang cuma pilih laman yang akan memaparkan pautan pada bingkai sebelah kanan. 10. Klik butang Set Initial Page pada bingkai sebelah kanan untuk membuka kotak dialog Hyperlink. 11. Masukkan nama fail yang dipautkan dengan Page 1 pada langkah ke 4. 12. Klik OK untuk menutup kotak dialog. Simpan laman bingkai Laman yang telah anda bina tadi sebenarnya mengandungi tiga laman HTML yang berasingan. Apabila menyimpan laman bingkai yang baru, anda akan diarahkan untuk menyimpan ketiga-tiga bingkai. 1. Klik butang Save . 2. Pada kotak File Name, taipkan Frame.htm. 3. Klik Save. Kotak dialog Save hilang dari skrin dan anda akan diminta untuk menyimpan dua baki dokumen. 4. Pada kotak File Name, taipkan left.htm. 5. Klik Save. Preview untuk hasil paparan. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 27
  • 28. SESI 1 : PENGENALAN KEPADA ANTARAMUKA WS_FTP LE OBJEKTIF : Membuat sambungan kepada pelayan FTP 1. Perisian ini boleh dimuat turun menerusi laman web Kompleks Falak Al-Khawarizmi di muka surat Pertandingan Laman Web : http://www.al- azim.com/khawarizmi/maklumat/pertandingan.html. 2. Muat turun fail tersebut dan jalankan proses Installation pada komputer masing-masing. Ikut arahan yang dinyatakan oleh sistem. 3. Setelah proses Installation selesai, pengguna perlu mengaktifkan perisian ini dengan cara klik pada icon perisian di desktop komputer. 4. Paparan di bawah akan kelihatan di komputer apabila pengguna mengaktifkan perisian. Rujuk Rajah 1.1. Rajah 1.1 : Antaramuka Kemasukan Data ke WS_FTP LE Penerangan : Profile Name : Membenarkan pengguna memberi nama kepada sambungan yang akan dibuat supaya memudahkan pengguna untuk mengingati tujuan sambungan Host Name/Address : Nama atau Alamat pelayan FTP User ID : ID pengguna bertujuan untuk mengenalpasti identiti pengguna yang akan memasuki pelayan FTP Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 28
  • 29. Password : Kata laluan bertujuan memberi laluan hanya kepada pengguna yang diiktiraf oleh pentadbir sistem FTP. 5. Setelah maklumat dipenuhkan, pengguna boleh klik butang OK. Sambungan akan dilaksanakan oleh sistem. Pastikan sambungan ke Internet wujud terlebih dahulu agar sambungan ke pelayan boleh dilaksanakan. SESI 2 : PENYELENGGARAAN FAIL DAN FOLDER. OBJEKTIF : Memindah fail dari komputer ke pelayan bagi membolehkan fail tersebut dicapai menerusi Internet. 1. Paparan di bawah akan kelihatan setelah penyambungan berjaya. Terdapat 2 panel iaitu Local System dan Remote Site. Panel Local System merujuk kepada direktori yang terdapat di dalam ruang cakera keras manakala panel Remote Site merujuk kepada direktori yang terdapat di dalam pelayan. Folder public_html pula adalah folder para pengguna meletakkan kesemua fail-fail pembangunan laman web. Rujuk Rajah 2.1. Rajah 2.1 : Antaramuka yang menunjukkan senarai direktori dan folder 2. Pilih folder yang mengandungi fail-fail laman web dalam cakera keras. Klik 2x pada folder tersebut yang terdapat di bahagian Local System. Klik 2x pada folder public_html yang terdapat pada panel Remote Site. Rujuk paparan Rajah 2.2 Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 29
  • 30. Rajah 2.2 : Antaramuka menunjukkan senarai folder dan nama fail 3. Pengguna boleh memilih fail yang diperlukan untuk pembangunan laman web dan seterusnya boleh menghantar ke Remote Site dengan menekan butang anak panah ke folder public_html. 4. Pastikan fail laman web utama bernama index.htm atau index.html. Ini kerana nama tersebut merupakan fail default untuk laman web utama. 5. Adalah dinasihatkan supaya mengumpul kesemua bahan bergambar (imej grafik) di dalam satu folder yang sama untuk mengelakkan sebarang imej tertinggal dan tidak dihantar ke pelayan. Kaedah penghantaran folder juga adalah sama dengan kaedah nombor 3 di atas. 6. Laman web anda boleh dilayari di * http://lamanweb.khawarizmiobs.com apabila kesemua fail telah di hantar ke folder public_html. * gantikan perkataan “lamanweb” dengan “User ID” anda bagi tujuan capai SELAMAT MAJU JAYA. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 30
  • 31. Pertandingan Merekabentuk Laman Web Falak/Astronomi Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Melaka dan Universiti Multimedia 31