Membuat Web Sederhana dengan Dreamweaver (2)

Masih tutoial bagaimana cara membuat web sederhana menggunakan software dreamweaver kelanjutan dari post yang sebelumnya yaitu : Membuat Web Sederhana dengan Dreamweaver .

Disini kita akan membuat web online shop sederhana menggunakan insert Text Field dan Button.

Masuk ke software dreamweaver pilih HTML

Setelah masuk kelembar kerja. Pilih File -> New -> dijendela General pilih Framesets -> pilih frame yang diinginkan -> Create

Maka jendela Frame Tag Accessibility Attributes akan muncul seperti dibawah ini, klik OK

Atur Borders yang ada pada jendela properties paling bawah pada lembar kerja. Dapat mengatur ketebalan borders (Borders Width), memberi warna, dan lainnya. jangan lupa pada kolom borders pilih Yes agar borders-nya terlihat.

1. Pengaturan borders (terlihat atau tidak)
2. Memberi warna borders

Untuk memberikan warna atau gambar pada frame, letakkan kursor ditempat yang diinginkan, apabila ingin menginputkan gambar : klik properties -> pada background image pilih browse, setelah didapatkan gambar yang diinginkan pilih OK

Untuk memberi warna pada bakground, klik properties pilih background color, lalu OK

Setelah selesai mengatur borders untuk frame yang telah dipilih, ketikkan codingan:

Atur tulisan pada jendela properties.

• <marquee behavior="alternate"> untuk teks berjalan dan bolak-balik

Maka frame yang telah di custom akan tampak seperti ini

Letakkan kursor di "Home" atau pada jendela frame sebelah kiri

 Atur tulisan sesuai selera.

1. Link = isi link sesuai nama folder yang dibuat dengan format namafolder.html
2. Target = gunanya saat menjalankan program, gambar atau apapun yang diinputkan didalamnya keluar dijendela frame sebelah kanan.

Untuk menge-link ke home, login dan setting yang telah dibuat pada frame, buat jendela baru dengan mengikuti langkah seperti dibawah ini:

1. Klik File -> New
2. Pilih Basic Page
3. HTML
4. Create

Simpan nama folder dengan format namafolder.html, ketikkan program seperti dibawah ini:

Buat folder baru untuk login dan setting dengan langkah yang sama seperti membuat folder baru untuk home. Simpan dengan nama file login.html

Lalu untuk membuat username dan password pada tampilan login, ikuti langkah berikut:

1. Insert
2. Form
3. Text Field

Untuk membuat button:

1. Insert
2. Form
3. Button

Maka tampilannya seperti dibawah ini:

Buat folder baru lagi untuk membuat jendela Setting. Simpan dengan nama folder Setting.html

Masukkan kodingan seperti dibawah ini:

Maka akan tampak seperti dibawah ini:

Setelah web sederhana yang dibuat dirasa cukup, jalankan program dengan klik F12

• Saat diklik Home maka gambar yang telah di insert-kan akan tampak disebelah kanan, itulah fungsinya main frame pada target frame diatas.

• Pada saat login yang diklik, tampilannya seperti dibawah ini

• Begitu juga saat Setting yang diklik, dia akan menuju ke jendela yang telah di-link sebelumnya

**Semoga bermanfaat :)