membina laman web menggunakan dreamweaver cs3

Membina Laman Web Mudah Menggunakan Adobe Dreamweaver CS3

Oleh: Shamsuddin B Ahmad

Jabatan Teknologi Pendidikan IPG Kampus Sultan Mizan 22200 Besut, Terengganu

Emel: [email protected]

mailto:[email protected]

Membina Laman Web Menggunakan Dreamweaver CS3 - 20100615.docx :- Syamsuddin BA JTP, IPG KSM – m.s. 2; 15 June 2010

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


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


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

Properties Inspector

Ruang Kerja

Bar Title

Panel Group

Panel Files


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.

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

Klik ikon Design View untuk melihat paparan

“Design View”

Klik ikon Page Properties


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.


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


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,

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

1

2 3


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 tajuk @ 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:


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


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 kedua-dua 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,


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.


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


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 http://www.mizanis.net/jtp/. 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 [email protected] . Terima kasih. Shamsuddin Ahmad JTP, IPG Kampus Sultan Mizan, Besut

http://www.mizanis.net/jtp/

membina laman web menggunakan dreamweaver cs3

Documents