Langkah 1: Sebelum Memulakan Dreamweaver 1. Hasilkan satu direktori baru dalam My Document dan namakannya sebagai My Web Page. 2. Dalam direktori My Web Page hasilkan satu subdirektori yang diberi nama sebagai Image.
Direktori My Web Page akan menyimpan kesemua file html manakala subdirektori Image akan menyimpan kesemua file image yang akan dimuatkan ke dalam laman web.
Langkah 2: Untuk Memulakan Dreamweaver 1. Klik pada start menu > all program > macromedia > macromedia dreamweaver. 2. Seterusnya klik pada menu create html.
3. Window Macromedia Dreamweaver seperti berikut akan dipaparkan.
Disediakan oleh: Roswan Ismail
Dreamweaver
2
4. Pada menu insert bar, klik
dan pilih option show as tabs.
Langkah 3: Tentukan Jenis View Terdapat 3 jenis view pada dokumen dreamweaver iaitu Code, Split dan Design. Sila pilih jenis Design.
Show Code View Show Code and Design View Show Design Views
Langkah 4: Tentukan Jenis Mode Ada beberapa cara yang diboleh digunakan untuk menghasilkan laman web dengan menggunakan Dreamweaver. Salah satu daripadanya adalah dengan menggunakan Layout Mode.
1. Untuk mengaktifkan layout mode anda, pilih tab Layout dan klik pada Layout mode
Disediakan oleh: Roswan Ismail
Dreamweaver
3
2. Pop up windows bagi Layout mode akan dibuka dan klik butang OK
3. Klik pada Layout Table dan buat satu table yang berukuran 955x600 pixel pada document window. (Anda boleh menentukan saiz table anda mengikut saiz pilihan masing-masing)
Disediakan oleh: Roswan Ismail
Dreamweaver
4
4. Klik pada Layout Cell dan lukiskan Layout Cell pada document window seperti dalam rajah di bawah.
Hasilkan Layout cell bagi Header, Kandungan, Laman Utama, Sejarah, Matlamat dan Tenaga Pengajar. Kini templet laman web anda telah siap dibina. Seterusnya anda boleh memasukkan imej ke dalam ruangan Header dan juga Kandungan.
Langkah 5: Memasukkan Imej/Grafik Sebelum memasukkan sesuatu imej/grafik, anda hendaklah menyediakan dan menyimpan failfail tersebut ke dalam direktori Image dalam direktori My Web Page terlebih dahulu. Ini bagi memastikan lokasi fail-fail imej/grafik yang dirujuk adalah relatif terhadap lokasi di mana failfail html anda disimpan.
Disediakan oleh: Roswan Ismail
Dreamweaver
5
1. Klib tab Common di Insert Bar dan klik pada ikon Image
2. Apabila ikon Image diklik, tetingkap Select Image Source akan dipaparkan seperti dalam gambarajah di bawah. Dwiklik pada direktori Image dan seterusnya klik pada fail grafik yang ingin dimasukkan ke dalam helaian.
Disediakan oleh: Roswan Ismail
Dreamweaver
6
3. Setelah selesai, klik butang OK dan kelihatan imej dari fail banner.gif akan dipaparkan di dalam helaian tersebut seperti di bawah.
Hanya format fail grafik seperti .gif, .jpg, .jpeg dan .png boleh digunakan untuk memasukkan terus grafik ke dalam sesuatu helaian dengan menggunakan Dreamweaver. Walaubagaimanapun
Disediakan oleh: Roswan Ismail
Dreamweaver
7
format fail grafik yang lain seperti .bmp, .tiff dan sebagainya masih boleh dimasukkan ke dalam laman web yang dibina dengan menggunakan Dreamweaver secara pautan.
Langkah 6: Mengedit Grafik Menggunakan Tetingkap Properties Seterusnya, sila klik pada imej tersebut untuk mengaktifkan tetingkap properties untuk mengedit imej yang dimasukkan tadi. Anda boleh menamakan imej, membesarkan dan mengecilkan saiz imej, menetapkan alignment imej dan menambah saiz garis tepi (border).
Meletakkan align center bg imej W(Width) – lebar imej =1240 H(Height) – tinggi imej = 182
Ketebalan saiz garis tepi imej ialah 2
Imej dinamakan sebagai banner_ssiII
Disediakan oleh: Roswan Ismail
Dreamweaver
8
Langkah 7: Mengedit Paparan Laman Web 1. Klik pada Layout Cell untuk menentukan saiz dan warna latar belakang cell. Saiz cell bagi laman web ini ditentukan sebagai 240x42 dan bg (background cell) warna kelabu.
2. Highlight pada tulisan dalam Layout Cell untuk menentukan warna, jenis dan saiz tulisan.
Disediakan oleh: Roswan Ismail
Dreamweaver
9
Langkah 8: Membina Helaian-Helaian HTML 1. Seterusnya, anda perlu menyediakan beberapa helaian html. Sebagai contoh, anda boleh menyediakan helaian untuk paparan utama seperti berikut.
2. Helaian tersebut kemudiannya hendaklah disimpan di dalam folder My Page yang telah anda wujudkan sebelum ini. Sila klik File > Save As > dan namakan fail tadi sebagai LamanUtama.html
Disediakan oleh: Roswan Ismail
Dreamweaver
10
3. Seterusnya anda boleh membina beberapa helaian html yang lain mengikut kehendak masing-masing. Berikut adalah paparan gambarajah bagi setiap helaian yang telah siap dibina iaitu sejarah.html, matlamat.html dan tenagaPengajar.html.
Disediakan oleh: Roswan Ismail
Dreamweaver
11
Langkah 9: Menghasilkan Pautan (Hyperlink) Langkah-langkah untuk menghasilkan pautan adalah seperti berikut:1. Buka helaian LamanUtama.html 2. Highlightkan perkataan Laman Utama pada helaian tersebut, kemudian lihat pada properties dan pilih icon
untuk memilih fail pautan iaitu LamanUtama.html.
3. Ulang langkah 2 untuk menghasilkan pautan pada menu yang seterusnya iaitu Sejarah, Matlamat dan Tenaga Pengajar pada helaian tersebut. 4. Ulang langkah-langkah di atas untuk menghasilkan pautan pada menu di setiap helaian yang ada iaitu sejarah.html, matlamat.html dan tenagaPengajar.html
Disediakan oleh: Roswan Ismail
Dreamweaver
12
5. Anda seterusnya boleh menguji laman web yang telah siap dibina dengan mengklik pada icon Preview/Debug in browser.
