Frontpage

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 Front003

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

a Gambarajah 2.2 : Paparan

Mengenali Dan Memahami FApabila membuka perisian Fro

toolbar yang akan di paparkan

toolbar, standard toolbar dan f

Menu toolbar

Menu bar mengandungi senar

mengemaskini dan memforma

klik pada setiap menu yang dib

Sekiranya pilihan menu keliha

pilihan tersebut tidak aktif atau

anda melihat tanda chevron

Pertandingan Merekabentuk Laman Web Falak/Astron Jabatan Mufti Negeri Melaka, Jabatan Pelajaran Mela

Paparan Antaramuka Utam

Antaramuka Utama pada Program FrontPage 2003.

rontPage ntPage 2003 untuk kali pertama, terdapat tiga

pada paparan halaman (page view) iaitu menu

ormatting toolbar.

ai menu yang dapat membantu di dalam membina,

t laman web di dalam FrontPage 2003. Jika anda

erikan, terdapat pilihan lain yang boleh dicapai.

tan tenggelam (bewarna kelabu) ini bermaksud,

tidak boleh digunakan bagi aktiviti tersebut. Jika

pada bahagian bawah menu, klik pada tanda

omi ka 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


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


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.


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

kaitam\n 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.


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 .


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.


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.


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


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.


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


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.


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.


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.




3. Pada bahagian Layout, tukar Cell Spacing kepada 20.


perubahan. (sila lihat gambaajah 8.6).

Warna Jadual


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.




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.


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


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.


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


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.


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


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


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

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


28

http://www.al-azim.com/khawarizmi/maklumat/pertandingan.html

http://www.al-azim.com/khawarizmi/maklumat/pertandingan.html

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


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.


30


31

Frontpage

Healthcare

Transcript of Frontpage