Membina Laman Web Mudah Menggunakan Adobe Dreamweaver CS3

Transkripsi

1 Membina Laman Web Mudah Menggunakan Adobe Dreamweaver CS3 Oleh: Shamsuddin B Ahmad Jabatan Teknologi Pendidikan IPG Kampus Sultan Mizan Besut, Terengganu Emel: kbu2020@yahoo.com

2 A. Pengenalan Anda tentu beranggapan bahawa membina dan menerbit laman web di internet adalah sesuatu yang sukar dan memerlukan bayaran yang tinggi. Sangkaan anda itu tidak benar sama sekali. Membina laman web merupakan satu tugas yang mudah jika kita tahu cara dan teknik. Memang dahulu kita terpaksa menggunakan kod-kod HTML untuk membina laman web tetapi sekarang tidak perlu lagi menghafal kod HTML dan menaip kod dengan adanya perisian pembinaan laman web seperti FrontPage, Dreamweaver dan sebagainya. Secara umumnya berikut adalah proses ataupun perkara yang perlu dilakukan bagi membina laman web. Tidak kisahlah sama ada anda menggunakan perkhidmatan percuma mahupun berbayar, langkahnya sama sahaja. Yang membezakannya ialah anda perlu mengeluarkan duit atau tidak sahaja. Langkah-langkah pembinaan adalah mudah kecuali di bahagian Perancangan Awal. Berikut disenaraikan langkah-langkahnya: Memilih domain. Memilih web hosting. Perancangan awal Menetapkan objektif dan tujuan Menetapkan sasaran Membuat penyelidikan dan menyediakan bahan Melukis papan cerita contoh lakaran papan cerita Membina laman web. ( Untuk ini, kita akan menggunakan perisian pembinaan laman web iaitu Adobe Dreamweaver ) Memuat naik fail laman web ke web host. ( untuk ini kita akan menggunakan perisian ftp percuma iaitu filezilla.) Promosi laman web. B. Perancangan sebelum membina laman web Sebagaimana telah saya maklumkan di dalam kelas, pemilihan domain dan webhosting (tapak) tidaklah menjadi satu masalah yang besar. Perkara yang paling penting dalam membina laman web ialah langkah-langkah pra pembinaan. Kita perlu menjawab Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 2; 15 June 2010

3 beberapa persoalan seperti Apakah objektif dan tujuan pembinaan laman web berkenaan. Contohnya, jika kita ingin membina laman web tadika Kemas kampung kita. Jadi, apakah objektif dan tujuannya? Boleh jadi untuk membolehkan ibu bapa mendapat maklumat terkini tentang kelas kemas, tentang pencapaian anak-anak, tentang aktiviti anak-anak dsb. Selain daripada itu, kita mahu masyarakat setempat mengetahui aktivitiaktiviti yang dijalankan. Seterusnya, adakah kita mahu KEMAS daerah, KEMAS Negeri dan Kementerian yang berkaitan. tahu tentang pencapaian kita, tentang aktiviti kita dan... Itu dah sampai ke langkah menetapkan sasaran... siapa yang hendak melihat laman web kita... Jadi, kita kena buat penyelidikan tentang bagaimana menghasilkan laman web yang menarik untuk kumpulan sasar yang kita pilih. Seterusnya, kita perlu mencari (menyediakan) bahan-bahan yang perlu sama ada tentang kandungan yang akan disampaikan atau gambar-gambar, suara dan klip video yang bersesuaian. Dah ada semua tu, bolehlah kita ambil pen dan beberapa helai kertas untuk kita buat papan cerita iaitu layout laman-laman yang akan dibina... C. Pembinaan Laman Web Bahagian I Bagi pembinaan Laman Web Bahagian ini, kita akan fokuskan kepada pembinaan laman web bentuk statik. Sehubungan itu, kita tidak perlu membuat instalasi Web Server dan tidak perlu juga membina site sebagaimana yang perlu dilakukan jika jka hendak membina laman web dinamik. Kita akan menggunakan Dreamweaver kerana kemahiran yang akan diperolehi nanti akan memudahkan kita untuk membina laman web dinamik. Saya berharap agar semua sudah membuat instalasi Dreamweaver trial version. OK, kita boleh mulakan sekarang. Perkara pertama yang perlu dilakukan ialah membuat / membina satu folder di dalam MyDocument atau di mana-mana folder yang bersesuaian dengan nama websaya. Di dalam menamakan folder, subfolder dan fail-fail, anda perlu menggunakan huruf kecil. Jangan sesekali menggunakan ruang kosong dan lain-lain huruf (character) seperti koma, tanda sengkang dan sebagainya selain daripada huruf a hingga z!. Folder ini akan dikenali sebagai Local Root Folder. Folder ini akan digunakan untuk menyimpan semua fail html yang berkaitan dengan pembinaan laman web ini dan semua fail persembahan powerpoint, fail dokumen serta lain-lain fail yang akan dignakan untuk membuat pautan nanti. Seterusnya bina satu subfolder di dalam folder websaya dengan nama images. Masukkan (salin) semua fail mej dan gambar yang akan kita gunakan untuk membina laman web ke dalam folder images tadi. Pastikan bahawa gambar-gambar dan grafik yang hendak dimasukkan ke dalam laman web nanti disalin ke dalam folder ini bagi memastikan ianya dipaparkan apabila laman web anda di letakkan di server pelayan di internet nanti. Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 3; 15 June 2010

4 Buka perisian Dreamweaver dengan cara mengklik pada ikon dreamweaver pada Desktop atau Klik ikon Start, pilih All Programs dan klik pada ikon Adobe Dreamweaver CS3. Sepatutnya perisian akan membuka fail baru apabila ianya dibuka. Jika tidak, buka fail baru dengan cara mengklik pada menu FILE dan pilih NEW. Tetingkap New Document sebagaimana di bawah akan muncul. Pilih Blank Page, klik HTML dan klik Create Anda akan dipaparkan dengan satu laman baru dengan nama Untitled-x sebagaimana di bawah. Mari kita terlebih dahulu mengenali antaramuka Dreamweaver CS3. Selain daripada yang ditunjukkan, ada beberapa lagi komponen yang akan dijelaskan kemudian. Bar Menu Bar Title Ruang Kerja Panel Group Properties Inspector Panel Files Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 4; 15 June 2010

5 Terdapat tiga pilihan jenis paparan view yang boleh anda pilih iaitu Code View, Design dan Split View. Code View membolehkan anda menaip arahan-arahan pengaturcaraan coding manakala Design View membolehkan anda membina laman web tanpa menaip arahan-arahan pengaturcaraan coding. Code View Design View Tetapan Page Properties perlu dilakukan untuk mengubah bentuk atau format sesuatu laman. Untuk membuat Tetapan Page Properties, pastikan anda tidak membuat highlight/ terpilih pada mana-mana komponen yang telah diselit seperti TABLE, grafik dan teks. Paparan Properties Inpector sebagaimana di bawah akan dipaparkan di bawah kawasan ruang kerja. Klik pada ikon Page Properties untuk membuat tetapan muka surat atau laman semasa. Klik ikon Page Properties Klik ikon Design View untuk melihat paparan Design View Tetingkap Page Properties sebagaimana di bawah akan muncul. Perkara paling utama yang patut dibuat tetapan ialah Margin Kiri dan Margin Atas serta Background Colour atau Background Image. Di bawah kategori Title/Encoding, anda juga boleh memberi tajuk title laman web/ muka laman ini dengan menaipkan di dalam kekotak teks di sebelah kanan title menggantikan perkataan Untitled Document. Tajuk yang diberi hendaklah bersesuaian Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 5; 15 June 2010

6 dengan kandungan laman berkenaan. Tajuk laman juga boleh dimasukkan melalui kekotak teks title yang berada di bahagian atas ruang kerja dan disebelah kanan ikon Design View. Walau pun anda hanya membina suatu laman web yang ringkas, anda masih perlu membuat lakaran bentuk paparan laman web anda. Buatlah keputusan di mana anda ingin meletakkan tajuk-tajuk, gambar-gambar, butang-butang navigasi dan teks yang akan dipaparkan. Kebanyakan laman web mempunyai bentuk paparan yang sama untuk setiap laman. Contohnya tajuk utama web biasanya diletakkan di ruangan atas sebelah kiri atau tengah pada setiap laman manakala butang navigasi diletakkan secara menegak disebelah kiri atau secara mendatar di bawah tajuk utama. Selain daripada membuat lakaran storyboard paparan laman web, anda juga perlu menetapkan berapa laman yang diperlukan. Perancangan yang teliti bukan sahaja memudahkan proses pembinaan laman web malah ianya perlu untuk memperolehi laman web yang menarik. Ruang kerja Dreamweaver tidak mengizinkan anda memasukkan/ meletakkan apa jua komponen seperti teks dan grafik di mana-mana lokasi yang anda suka. Bagi membolehkan anda meletakkan sesuatu komponen ditempat yang dipilih, anda perlu menggunakan jadual TABLE yang tidak memaparkan garisan-garisan. Penggunaan TABLE akan memudahkan anda untuk membuat format paparan sebagaimana yang diinginkan.semua kandungan yang hendak dimasukkan ke dalam setiap laman hendaklah dimasukkan ke dalam satu TABLE yang besar. Penggunaan TABLE membantu anda membahagikan ruang-ruang di laman web anda. Untuk memasukkan TABLE, klik pada menu insert dan pilih Table. Tetingkap Table akan muncul sebagaimana di bawah. Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 6; 15 June 2010

7 Berpandukan lakaran (storyboard) di atas, masukkan satu TABLE besar (utama) yang mempunyai 1 lajur dan 3 baris. Oleh kerana kita akan membina laman web yang mempunyai kelebaran yang tetap, tukarkan TABLE width kepada pixel dan masukkan kedalam kekotak TABLE width angka 980. Lebar 980 sesuai untuk resolusi skrin 1024x768. Masukkan ke dalam Border thickness nilai kosong untuk tidak memaparkan garisangarisan TABLE. Seterusnya kita perlu masukkan satu TABLE kecil di dalam baris ketiga yang mempunyai 2 lajur dan 1 baris. Tetapkan TABLE width kepada 100 percent. Akhirnya, masukkan satu TABLE dengan 1 lajur dan 2 baris ke dalam sel sebelah kanan bagi TABLE yang kedua tadi. Hasilnya ialah sebagaimana paparan di bawah: Garis biru: Table pertama Garis Hijau: Table kedua yang terletak dalam baris ketiga TABLE pertama Garis merah: Table ketiga yang dimasukkan kedalam lajur kedua TABLE kedua Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 7; 15 June 2010

8 Paparan ketiga-tiga TABLE yang telah dimasukkan Anda boleh menukar tetapan untuk mana-mana sel di dalam suatu TABLE dengan mengklik pada <td>. Untuk memilih baris dan menukar tetapan baris row, klik pada <tr> manakala untuk menukar tetapan pada suatu TABLE, klik pada <TABLE>. Untuk memilih TABLE yang paling dalam, - letak kursor dalam mana-mana sel bagi TABLE berkenaan. - Untuk memilih TABLE ketiga iaitu peringkat paling dalam, klik pada <TABLE> yang berada pada tempat ketiga dari kiri. Table berkenaan terus di highlight dan tetingkap PROPERTIES INSPECTOR memaparkan properties untuk TABLE yang dipilih Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 8; 15 June 2010

9 Langkah paling penting yang perlu dilaksanakan awal-awal lagi ialah menyimpan fail yang sedang diedit. Klik pada menu File dan pilih Save. Tetingkap Save As akan dipaparkan sebagaimana disebelah. Laman utama biasanya dinamakan dengan nama index.html jadi, namakan fail dengan nama index.html. Ingat, nama fail haruslah dengan huruf kecil dan tidak ada ruang kosong atau apa-apa character selain daripada huruf a hingga z. Simpan fail berkenaan dalam folder websaya yang telah dibina dalam langkah 01. Langkah seterusnya ialah memasukkan header. Saya telah membina satu grafik (header) yang mempunyai kelebaran sebanyak 980 piksel. Saya namakan sebagai header.jpg dan meletakkannya di dalam sub-folder images. Jika anda tidak mahir dengan perisian grafik untuk membuat header atau title, buat lakaran header yang anda kehendaki dan anda boleh meminta tolong rakan guru yang mahir mana-mana perisian grafik untuk membuatnya. Pastikan lebar atau width grafik header berkenaan ialah 980 piksel. Untuk memasukkan header pada baris pertama TABLE paling luar, letakkan kursor di dalam sel berkenaan. Klik menu INSERT dan pilih Image. Tetingkap Select Image Source dipaparkan. Klik pada folder images dan pilih fail header.jpg. Klik butang OK. Tetingkap Image Tag Accessibility... muncul. Klik OK. Paparan laman web adalah sebagaimana di bawah: Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 9; 15 June 2010

10 Langkah seterusnya ialah memasukkan menu dalam baris kedua. Buat permulaan, kita akan memasukkan menu bentuk teks. Apabila anda mahir nanti, bolehlah anda gantikan menu bentuk teks kepada bentuk lain seperti rollover images atau Navigation Bar atau Flash. Untuk memasukkan menu bentuk teks ke dalam baris kedua TABLE paling luar, kita perlu memasukkan satu TABLE yang mempunyai 1 baris dan 7 lajur. Letakkan kursor dalam sel pada baris kedua, klik menu INSERT dan pilih TABLE. Tetapkan nilai Rows=1, Column=7, Table Width=100 percent dan Border thickness=0 pixel. Seterusnya taipkan kedalam ketujuh-tujuh sel teks menu sebagaimana lakaran storyboard. Untuk menukar font teks Home, highlight teks Home. Tukar font kepada Verdana, Size=small, warna=#0000ff (biru), Horz=Center, Vert=Middle. Lakukan langkah di aas untuk kesemua menu yang ada. Kali ini, anda tidak perlu menukar satu persatu Font, Size dan Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 10; 15 June 2010

11 sebagainya. Anda hanya perlu highlight pada teks Tentang Saya pilih style1 iaitu style untuk teks Home. Walaubagaimanapun, anda masih perlu menetapkan Horz=Center dan Vert=Middle. Hasilan sebagaimana di bawah. Jika diperhatikan pada lakaran storyboard, lajur untuk ruangan teks adalah lebih besar daripada lajur yang akan dimasukkan gambar tentang saya. Oleh itu, untuk membesarkan lajur kiri dan seterusnya mengecilkan lajur kanan, anda perlu tunjukkan kursor pada garis menegak di antara keduadua lajur berkenaan. Kursor akan bertukar bentuk kepada imej anak panah ke-kiri dan ke-kanan yang dipisahkan oleh dua garis menegak. Untuk membesarkan lajur sebelah kiri, seret kursor kesebelah kanan. Semasa membuat seretan, perhatikan angka yang membesar nilainya disebelah atas lajur sebelah kiri, manakala angka di sebelah atas lajur sebelah kanan mengecil. Berhenti menyeret apabila angka pada atas lajur sebelah kanan mencecah nilai lebih kurang 348 yang bermaksud lebar lajur sebelah kanan ialah 348 piksel. Ianya akan secara otomatik membesarkan lajur sebelah kiri dan mengecilkan lajur sebelah kanan. Seterusnya kita akan memasukkan imej atau gambar tentang saya ke dalam sel sebelah atas bagi TABLE ketiga (paling dalam). Letakkan kursor ke dalam sel berkenaan, klik menu INSERT, pilih image. Dwiklik pada subfolder images dan pilih fail imej yang akan diselit. Dalam kes saya, imej yang akan diselit mempunyai lebar sepanjang 600 piksel. Ini dapat diketahui dengan cara menunjukkan kursor ke atas fail berkenaan, Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 11; 15 June 2010

12 satu tetingkap kecil akan dipaparkan yang memberitahu tentang Dimension (panjang x lebar), Type (jenis) dan size (saiz) fail yang dihighlight. Dalam keadaan sebenar, kita harus mengecilkan dimensi fail kepada kurang daripada 348 piksel kerana itulah lebar lajur yang akan dimasukkan fail gambar berkenaan. Setelah fail dihighlight, anda boleh menekan kekunci ENTER atau klik OK. Klik OK sekali lagi untuk memasukkan gambar. Jika diperhatikan, lajur sebelah kanan kembali membesar. Untuk mengecilkan kembali, kita harus mengecilkan dimensi gambar. Klik pada gambar dan seret pepenjuru ke dalam untuk mengecilkan gambar. Gambar mungkin akan distort sama ada orang di dalam gambar mengurus atau menggemuk. Cara mengecilkan gambar sebegini tidak disyorkan kerana selain daripada masalah distortion, saiz fail yang besar juga akan melambatkan laman web berkenaan untuk dibuka. Anda mungkin perlu seret sekali lagi lajur untuk mengecil atau membesarkan lajur. Hasil sepatutnya sebagaimana di bawah. Untuk memasukkan teks penerangan di bawah gambar, klik pada gambar, tekan kekunci panah arah kanan dan tekan kekunci ENTER serentak dengan kekunci SHIFT atau ringkasnya tekas kekunci SHIFT+ENTER.Taipkan teks penerangan tentang gambar. Highlight teks dan ubah PROPERTIES teks di ruangan PROPERTIES INSPECTOR Apabila kekunci ENTER ditekan, kursor akan ke bawah DUA langkau, manakala apabila kekunci SHIFT+ENTER ditekan, kursor akan ke bawah SATU langkau. Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 12; 15 June 2010

13 Dalam membina suatu laman web, ia seharus nampak simple yang bermaksud tidak crowded. Untuk itu, kita tidak seharusnya meletakkan semua kandungan ke dalam satu laman. Perkara paling istimewa berkenaan laman web ialah kebolehannya untuk membuat pautan. Jadi, kita harus pisahkan kandungan kepada kategori/ bahagian tertentu dan membuat pautan. Dalam lakaran storyboard, saya telah membuat menu dalam baris kedua selepas tajuk. Apabila HOME di klik, laman web akan membuka laman HOME yang mana dalam kes saya, ianya fail index.html. Oleh itu, untuk membuat pautan hyperlink pada teks HOME, SELECT atau HIGHLIGHT teks HOME dan pada ruangan PROPERTIES INSPECTOR, taipkan index.html ke dalam kekotak teks links. Sudah semestinya anda telah membuat lakaran STORYBOARD untuk kesemua laman. Bagi saya, laman Tentang Saya akan disimpan ke dalam fail tentangsaya.html. Fail-fail berkenaan saya namakan tanpa ada ruang kosong. Seterusnya, untuk membuat pautan pada menu Tentang Saya, saya highlight teks menu Tentang Saya dan seterusnya saya isikian kekotak teks LINK dalam PROPERTIES INSPECTOR dengan nama fail tentangsaya.html. Jika diperhatikan, teks yang mempunyai pautan dipaparkan dengan garis bawah. Lakukan untuk semua menu yang ada di baris ke dua. Seterusnya, anda bolehlah masukkan semua maklumat seperti yang telah anda lakarkan dalam STORYBOARD. Apabila selesai, dan disimpan fail berkenaan, anda bolehlah menggunakan fail berkenaan sebagai templat untuk membina fail-fail lain. Pastikan fail yang anda buat sebagai templat betul-betul baik kerana pembetulan kemudian akan menyebabkan kesusahan untuk menyunting kesemua laman. Untuk menyimpan fail dengan nama lain, anda klik pada menu FILE dan pilih SAVE AS. Taipkan nama fail baru dan klik OK. Membuat Preview laman web yang telah anda buat adalah sangat mudah. Buka folder websaya dan dwiklik pada fail index.html. Laman web anda akan dipaparkan menggunakan Default Explorer. Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 13; 15 June 2010

14 Itulah pengakhiran untuk Bahagian I. Untuk Bahagian II nanti, kita akan teruskan pembelajaran dengan mempelajari cara-cara untuk mengindahkan lagi laman web termasuk juga dengan penggunaan CSS dan templat sedia ada dalam Adobe Dreamweaver. Juga akan ditunjukkan cara-cara untuk memasukkan rollover images dan sebagainya. Anda juga boleh dapatkan nota yang telah saya buat tentang bagaimana untuk muatnaik laman web ke internet menggunakan perisian FTP iaitu filezilla di laman web JTP iaitu di Sekian. Semoga segala ilmu dan kemahiran yang diperolehi dapat digunakan sebaik mungkin. Jika ada cadangan pembetulan, atau kemusykilan (masalah) atau ucapan terima kasih, sila emelkan kepada Terima kasih. Shamsuddin Ahmad JTP, IPG Kampus Sultan Mizan, Besut Membina Laman Web Menggunakan Dreamweaver CS docx :- Syamsuddin BA JTP, IPG KSM m.s. 14; 15 June 2010