Dreamweaver Mx 2004 Tutorial

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

Memulai membangun website 1.

Buat folder baru di drive D: dengan nama webku, dimana folder ini adalah tempat menyimpan dan mengorganisasi file-file website yang kita bangun.

2.

Buka folder webku yang baru anda buat tersebut kemudian buat folder didalamnya dengan nama images.

3.

Buka program Dreamweaver MX 2004, kemudian klik [Site][Manage Sites]

4.

Setelah dialog box tampil, pilih [New][Site]

5.

Ketika pertama kali anda menggunakan dreamweaver, maka akan tampil “Basic Site Definiton” wizard, pilih [Advance]

6.

Pada Local Info Site name diisi: Mypage, kemudian Local root folder diarahkan ke folder yang anda buat di D:\webku\ dengan menekan icon folder yang ada tepat disebelah kiri textbox, HTTP image folder diarahkan ke

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

D:\webku\images, dimana seluruh image pada website kita akan disimpan di folder ini.

7.

Klik [Ok] kemudian pada Manage Site klik [Done], maka konfigurasi website yang akan anda buat telah siap digunakan.

8.

Klik kanan pada nama file Mypage yang anda pada tab Files, kemudian pilih [New File]

9.

Ubah nama file tersebut dengan index.htm

10.

Klik kanan pada file index.htm tersebut, pilih [Open], dan mulailah membuat layout website anda.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

11.

Pastikan anda telah mengaktifkan toolbar title diisi “Selamat Datang”.

pada document anda dan pada

11.

Buatlah tabel utama dari web anda melalui menu [Insert][Table], isikan Rows=1, Columns=1, Table Width=785 Pixels, Border Thickness=0 pixels, Cell padding=0, Cell spacing=0.

12.

Pastikan kursor anda aktif didalam table tersebut, kemudian buat table kembali didalam table utama tersebut, isikan Rows=3, Columns=2 Table Width=100 Percent, Border Thickness=0 pixels, Cell padding=0, Cell spacing=2.

13.

Blok baris pertama, kemudian klik kanan, pilih [Table][Merge Cells]

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

14.

Masukan banner yang telah anda buat pada baris yang telah anda merger tersebut dengan melalui menu [Insert][Image]

15.

Geserlah dengan kursor anda kolom pertama baris ke-2 hingga 20% kesebelah kiri(diperkecil), kemudian pada pada Properties yang terletak pada sisi bawah dokumen, ubahlah vertical align=”top” bgcolor=”Biru”.

16.

Kemudian buatlah table didalam kolom tersebut, isikan Rows=5, Columns=1, tekan [Ok]

17.

Pastikan kursor anda aktif pada baris pertama, kemudian masukan tombol menu dengan melakukan klik pada menu [Insert][Media][Flash Button].

18.

Pilih tombol yang paling cocok menurut anda pada menu Style (ingat anda harus menggunakan tombol yang sama untuk menu yang lain!, kemudian

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

ubahlah Button Text: “Home”, untuk sementara Link: tidak usah diisikan karena kita belum membuat halaman untuk link tersebut.

19.

Lakukan langkah ke-18 untuk membuat menu “Profile”, “News”,”Product”, ”Contact Us”, sehingga layoutnya tampak sebagai berikut:

20.

Pastikan kursor anda aktif pada kolom ke-2 yang akan menjadi area utama dari website kita, ubahlah vertical align=”top”, tambahkan gambar dan pada properties ubahlah Align=”left”, selanjutnya tulislah paragraph “kata pengantar” pada area tersebut, minimal 2 minimal 10 baris.

Vertical Align

21.

Ujilah website anda di browser dengan menekan F12 pada keyboard.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

22.

Lakukan merger pada baris terakhir dari website anda dengan cara blok baris dengan 2 kolom tersebut, klik kanan kemudian pilih [Table][Merge Cell].

23.

Gantilah background dari baris yang telah dimerger tersebut dengan warna #CCCCCC, kemudian tuliskan “Website ini dibuat Oleh: ”.

24.

Gandakan file index.htm yang ada pada tab Files dengan cara klik kanan pada index.htm, kemudian pilih [Edit][Duplicate]

25.

Ganti file hasil duplikasi tersebut dengan cara klik kanan pada file Copy of index.htm, kemudian pilih [Edit][Rename], ganti dengan nama: profile.htm, kemudian Enter.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

26.

Double klik file profile.htm tersebut dan pastikan terbentuk tab profile.htm setelah index.htm, hal ini menandakan bahwa content dari file profile.htm siap diedit. Terbentuk tab dengan nama file profile.htm

27.

Kemudian gantilah isi(Content) dari kolom utama pada profile.htm tersebut. Isilah dengan nama perusahaan anda, Visi-Misi, dll, dan lengkapilah dengan foto-foto yang berkaitan dengan perusahaan tersebut.

28.

Gandakan kembali file index.htm dengan cara seperti langkah ke-24 dan 25, kemudian ubahlah nama hasil duplikasi tersebut menjadi product.htm sehingga anda kini memiliki 3 file .htm.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

29.

Double Klik pada file product.htm tersebut, kemudian hapus isi sebelumnya. Buat table baru didalam kolom utama tersebut isi Rows=5, Column=5, Table width=100%, tekan [Ok].

30.

Kemudian pada masing2 kolom tersebut isilah dengan gambar/Foto product yang anda tawarkan, isilah 1 kolom dengan 1 buah product yang terdiri dari foto dan deskripsi singkat tentang product tersebut.

31.

Gandakan kembali file index.htm dengan cara seperti langkah ke-24 dan 25, kemudian ubahlah nama hasil duplikasi tersebut menjadi contact.htm sehingga anda kini memiliki 4 file .htm.

32.

Double klik file contact.htm kemudian hapuslah isi (content) dari file contact.htm tersebut, sehingga siap untuk diisi dengan isi baru.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

33.

Tulislah kalimat “Silahkan Isi Komentar Anda :” halaman tersebut. Kemudian buat table baru dibawah teks tersebut, isi rows=6, Column=2, klik [Ok]

34.

Lengkapilah kolom dan baris tersebut dengan formulir isian yang terlihat seperti gambar, semua properties form dapat anda temukan melalui menu [Insert][Form], buatlah seperti gambar dibawah ini.

[Insert][Form][Text Field] [Insert][Form][List/Menu] [Insert][Form][Radio Button] [Insert][Form][Textarea] [Insert][Form][Button]

35.

Untuk mengisi

List/Menu, agar tampak seperti berikut.

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

Maka anda harus mengisinya dari tgl 1 hingga 31, melalui menu yang ada pada properties List/Menu.

Lakukan hal yang sama seperti langkah ke-35 untuk mengisi bulan Januari hingga Desember dan tahun 1980 hingga 2006. 35.

Aktifkan file index.htm dengan melakukan double klik pada file tersebut, kemudian klik menu button HOME yang ada disebelah kiri halaman, pilih tombol [Edit] yang ada pada properties, sehingga properties box untuk button tersebut tampil.

36.

Pada Properties button, klik tombol [Browse] pada Link kemudian arahkan ke file index.htm yang ada pada folder web anda, kemudian tekan [Ok].

Browse

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

Tekan [Ok] kembali agar kembali ke halaman index.htm web anda. 37.

Lakukan kembali langkah ke-35 dan 36 untuk menu button PROFILE diarahkan ke profile.htm, menu button PRODUCT diarahkan ke product.htm, menu button CONTACT US diarahkan ke contact.htm.

38.

Aktifkan file profile.htm dengan melakukan double klik pada file tersebut, kemudian link-kan seluruh menu button yang ada pada file tersebut seperti yang dilakukan pada index.htm.

39.

Lakukan langkah ke-38 untuk file product.htm dan juga file contact.htm.

40.

Pastikan seluruh file, yaitu index.htm, profile.htm, product.htm dan contact.htm, telah di link-kan, dan ceklah link-link website anda apakah sudah berjalan sempurna dengan menekan F12. Maka akan tampil Index.htm

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

Profile.htm

Product.htm

Contact.htm

Dreamweaver MX 2004 Tutorial Created By masmalik at ymail dot com “Tutorial ini dibuat bersambung sehingga anda harus mengikutinya dari awal! 

Latihan : Kalau anda perhatikan tutorial diatas melupakan 1 buah menu yaitu NEWS, nah tugas anda adalah “Membuat halaman NEWS tersebut dan link-kan menu button ke file news.htm yang anda buat”.