 |
|
|
|
|
|
|
Allah berfirman : "Aku telah mewajibkan ke atas umatKu sembahyang lima waktu dan berjanji kepada diriku, bahawa barang siapa rajin melakukannya tepat pada waktunya akan Aku masukkan ke dalam syurga".
Cara Membina Laman Web Menggunakan Microsoft Front Page
PENGENALAN
1. Microsoft FrontPage 98 ada dua; FrontPage Explorer dan FrontPage Editor.
2. FrontPage Explorer – satu website, atau ibarat sebuah rumah yang mempunyai pelbagai tools di dalamnya untuk membolehkan kerja-kerja penulisan, import bahan, export bahan dan proses uploading laman web dibuat.
3. FrontPage Editor – Aplikasi khusus untuk menulis dan mereka-cipta laman-laman anda.
4. Untuk permulaan, anda perlu lancarkan FrontPage Explorer terlebih dahulu.
5. Apabila sudah dicipta satu website dalam local hard-disk, barulah boleh anda lancarkan FrontPage Editor untuk menulis.
MEMULAKAN FRONTPAGE 98
A- Lancarkan FrontPage Explorer (Cipta Website)
B- Menulis di FrontPage Editor
A - Lancarkan FrontPage Explorer
1. Klik ikon FrontPage Explorer di Desktop atau di Program Files
2. Satu paparan window seperti rajah di bawah akan keluar.
3. Tick pada Create a New FrontPage Web, klik OK.
4. Kemudian, kotak dialog New FrontPage Web akan keluar. Pada langkah yang kedua (no. 2), isikan tajuk FrontPage Web anda seperti dalam contoh, klik OK.
5. FrontPage akan minta Name and Password. Masukkan username dan password yang anda pilih semasa proses installing Microsoft FrontPage 98.
6. Apabila nama dan kata laluan yang betul dimasukkan, paparan window seterusnya akan menjadi seperti rajah di bawah.
7. Dalam Navigation – Laman Web Mazuki Izani, terdapat kekotak yang dilabelkan sebagai Home Page, Interest, Photo Album dan Favorites.
8. Walau bagaimanapun, anda boleh tukarkan namanya kepada nama yang disukai. (Right-click pada kotak yang berkenaan, ambil arahan Rename dan namakannya)
9. Setiap kotak tersebut mewakili setiap halaman di FrontPage Editor.
10. Jika anda double-click salah satu daripada kotak-kotak tersebut, FrontPage Editor akan dilancarkan secara automatik.
11. Di bawah Navigation – Laman Web Mazuki Izani tadi, adalah Contents of ‘http://user/lamanwebmazuki/’ iaitu kandungan fail-fail dan folder yang terdapat dalam website Laman Mazuki Izani.
12. Dalam bahagian View di sebelah kiri window, terdapat ikon-ikon seperti Folder, All Files, Navigation, Hyperlinks, Hyperlinks Status, Themes dan Task. Anda boleh klik ikon-ikon tadi untuk melihatnya sepintas lalu.
13. Double-click kotak Home Page (main page) untuk memulakan penulisan.
Membuka FrontPage Editor
Apabila anda double-click pada Home Page tadi, window FrontPage Editor akan dibukakan untuk anda seperti rajah di bawah.
Paparan yang keluar adalah contoh yang diberi. Anda boleh ubahsuai kandungannya dengan kandungan anda sendiri.
Page tersebut menggunakan tema (theme) Global Marketing. Untuk mengubah tema tersebut, sila right-click dan pilih Themes… Di sana anda boleh pilih tema manakah yang paling disukai, klik OK dan lihat kesannya.
Jika tidak mahu menggunakan tema, pilih This Page Does Not Use Themes.
Dengan operasi right-click juga anda boleh ambil menu Shared Borders, kalau tidak mahu menggunakan Shared Border, tick Set For This Page Only, kemudian tick Top, Left.
Sebagai contoh, sila right-click, ambil menu Themes… dan pilih This Page Does Not Use Themes.
Right-click lagi, ambil menu Shared Borders, , tick Set For This Page Only, kemudian tick Top, Left.
Sekarang page tersebut menjadi kosong. Anda boleh mula menulis sekarang.
B - Menulis di FrontPage Editor
1. Tulis SELAMAT DATANG KE LAMAN WEB SAYA
2. Seperti dalam Composer, anda boleh ubahsuai fontnya, saiz, warna, kedudukan dan sebagainya dengan menggunakan menu Format.
3. Untuk memasukkan animasi, highlight perkataan yang berkenaan, ambil menu Format ? Animation.
4. Untuk melihat kesannya, klik tab Preview di kiri sebelah bawah.
5. Untuk melihat hasil kerja anda dalam bahasa HTML, klik tab HTML.
6. Jika anda inginkan background warna atau imej, ambil menu Format ? Background…
7. Jika anda inginkan background yang memakai tema tertentu, ambil menu Format ? Theme…
8. Ambil menu Format ? Bullets and Numbering jika anda inginkan satu-satu perenggan itu dalam bentuk list/senarai.
Menggunakan menu Insert
Line Break - Untuk mengurangkan jarak antara dua baris ayat/perkataan dengan menekan papan kekunci Shift+Enter
Horizontal Line – Garis Lintang. Highlight garis tersebut dan right-click untuk melihat propertiesnya yang membolehkan anda mengubahsuai ketebalannya, warnanya, kedudukannya dsb.
Symbol – Simbol-simbol yang disediakan oleh FrontPage adalah seperti rajah di bawah :
Timestamp – Untuk memasukkan tarikh terkini apabila satu-satu laman diedit atau diupdate. Ianya bekerja secara automatik. (lihat rajah di bawah)
File – Semua fail akan diconvert ke dalam bentuk HTML
Image – Untuk memasukkan imej. Kotak dialog akan keluar (seperti rajah di bawah). Klik pada ikon Windows Explorer untuk mencari lokasi imej di dalam komputer anda. Jika imej tersebut adalah Clip Art daripada Microsoft Office, klik pada Clip Art. Jika imej tersebut berada di remote location atau di internet, taipkan URLnya di ruang URL yang disediakan. Jika imej tersebut berada di scanner, klik Scan. Jika anda masih gagal, klik butang Help.
Clip Art – clip art daripada Microsoft Office.
Active Elements
Hover Button – Butang Link yang dibina menggunakan Java
Banner Ad Manager – Banner yang digunakan untuk iklan….gambarnya silih berganti mengikut kuantiti gambar yang diset dan masa yang ditentukan.
Marquee – Tulisan yang bergerak-gerak secara horizontal samada berbentu scroll, slide atau alternate. (aktif hanya dalam IE sahaja)
Search Form – Digunakan untuk mencari satu-satu perkataan dalam satu website.
Hit Counter – Kaunter pembilang yang membilang jumlah pengunjung ke satu-satu laman.
Video – boleh dimasukkan fail yang berbentuk video.
FrontPage Component
Form Field
On-Line Text Box
Scrolling Text Box
Check Box
Radio Button
Drop Down Menu
Push Button
Image
Label
Advanced
Java Applet
Plug-In
ActiveX Control
Script
Hyperlinks – atau Link dalam Netscape Composer
Membuat Image Map (Peta Imej)
1. Fungsi peta imej ini ialah menyambungkan sesebuah laman anda ke laman yang lain.
2. Lihat contoh imej di bawah :
3. frgtr
4. gftrv
5. gtf
6. Untuk membuatnya, hala kan cursor pada imej berkenaan dan klik satu kali.
7. Secara automatik Image Toolbar akan muncul di bahagian bawah window FrontPage.
8. Klik pada ikon hotspot, samada yang berbentuk empat segi, bulatan atau poligon.
9. Lakarkan di atas imej yang dikehendaki.
10. Selepas anda habiskan lakaran, secara automatik kotak dialog Create Hyperlink keluar.
11. Taipkan URL atau fail manakah yang akan dilinkkan kepada.
12. Klik OK.
13. Klik butang Preview dan klik imej tadi untuk mengujinya.
14. Jika dengan klikan itu membawa anda ke laman yang anda link kan sebelum ini, maka itu bermakna anda telah berjaya mencipta Image Map.
MENDAPATKAN TEMPAT / HOST / SERVER / FREE WEB SPACE
Terdapat banyak host yang menyediakan ruang percuma untuk laman web anda. Meskipun begitu mereka bebas meletakkan iklan mereka di laman web yang kita berdaftar dengannya. Anda boleh pilih laman web/ host mana yang anda suka. Antara laman web yang menyediakan space percuma ialah :
1. GEOCITIES http://www.geocities.com/ (11MB)
2. XOOM.COM http://www.xoom.com/ (tanpa limit MB)
3. TRIPOD.COM http://www.tripod.com/ (11 MB)
4. HYPERMART http://www.hypermart.net/ (10 MB)
5. VIRTUALAVE http://www.virtualave.net/ (10 MB)
6. ANGELFIRE http://www.angelfire.com/ (5 MB)
7. FSN.COM http://www.fsn.com/ (20 MB)
8. FORTUNECITY http://www.fortunecity.com/ (20 MB)
9. NETTAXI http://www.nettaxi.com/ (3 MB)
10. THEGLOBE.COM http://www.theglobe.com/ (6 MB)
11. WEBJUMP http://www.webjump.com/ (25 MB)
12. Lain-lain (seperti 50megs.com, FreeServers.com, TopCities.com, WebProvider.com, Internet Trash, MyNetCentral, Netcolony.com, HttpCity.com, Qwik Pages, CafeProgressive.com, Escalix Free Web Space, Dencity.com, 20m.com, Stas.Net, Bounceweb.com, InfoTeam, Ostriches On Line , ACMEcity, Spree.com, WebSpawner, ProHosting, FreeDrive, NAMEzero dll.)
* Pembelajaran di sini akan menggunakan host xoom.com sebagai contoh.
1. Lancarkan browser internet dan taip http://www.xoom.com/ di lokasi alamat.
2. Dalam laman Xoom, lihat di sebelah kiri window, terdapat kotak menu Members, klik pada Join Now, pilih Unlimited Webspace dan ikuti langkah-langkah (4 steps) yang ditetapkan (Anda akan diminta isikan e-mail anda, jadi sebolehnya-bolehnya anda telah pun mempunyai e-mail sendiri. Seboleh-bolehnya e-mail percuma seperti hotmail, yahoomail, mailcity, mesra.net dsb, bukannya tm.net sebagai untuk memudahkan kerja)
3. Apabila selesai melengkapkan semua borang, tunggu e-mail yang dihantar kepada anda.
4. E-mail tersebut amat penting kerana tanpanya akaun anda di xoom tidak akan dapat diaktifkan.
5. Sila ikuti arahan dalam e-mail tesebut, iaitu klik pada URL yang ditentukan untuk mengaktifkan akaun anda.
6. Setelah aktif, barulah anda boleh upload hasil kerja anda ke remote server.
UPLOAD / PUBLISH WEBPAGE
1. Buka FrontPage Explorer dan ambil menu File ? Publish FrontPage Web seperti dalam rajah di bawah.
2. Pada kotak dialog Publish, klik pada More Webs
3. Isikan tempat kosong yang disediakan dengan lokasi xoom dan username anda. Klik OK.
4. Isikan nama FTP server iaitu xoom.com ( seperti rajah di bawah ) dan tinggalkan kosong ruang Directory Path. Klik Next.
5. Kemudian akhir sekali, tuliskan username anda dan juga password. Klik Finish.
6. FrontPage sekarang bersedia untuk upload website anda ke xoom.com dan ini mungkin mengambil masa yang agak lama (kerana first upload), bergantung juga kepada PC anda.
SELAMAT MENCUBA
Disediakan oleh :
A. Aizat Zakaria
SMK Telok Datok
4 Mac 2002
*Nota Kursus Membina Laman Web bagi pensyarah-pensyarah Politeknik
Tutorial Tambahan :
1. Membina Laman Web Dengan Menggunakan Microsoft FrontPage 98 http://westwood.fortunecity.com/hermes/727/Melayu/index.htm
2. Cyberpage
http://www.userworld.com/users/Mhafiz/java.htm2. BroTech
http://www.geocities.com/Heartland/Ridge/2791/broilhamnewnet.htm3. Panduan Membina Laman Web http://www.geocities.com/TheTropics/5802/homepage.htm
4. IWDC
http://www.geocities.com/CollegePark/Field/7878/course/html.html
5. C Programming Page http://www.geocities.com/SiliconValley/Vista/2459/tutoridx.htm
Perhatian : Sebahagian data dalam tutorial ini sudah out of date. Misalnya contoh upload menggunakan server xoom. Ini adalah kerana server tersebut sudah pun ditutup (tutup kedai) beberapa bulan yang lalu. Perisian 'pindah-naik' yang saya syorkan ialah Cute FTP (yang saya gunakan sekarang) atau mana-mana FTP software. [Peringatan ini bertarikh 4 Disember 2001, memandangkan ramai yang menggunakan tutorial ini. Insya-Allah saya akan sediakan tutorial untuk FrontPage2000 tidak lama lagi, sebagai salah satu nota kertas-kerja saya untuk dibentangkan di Pusat Bahasa Shah Alam nanti.]