Contoh Desain Web

Baik disini saya akan menunjukan cara desain web sederhana versi saya sendiri, kalau ada kesalahan  mohon petunjuknya.

Pertama-tama saya buka aplikasi yang seperti gambar dibawah ini

Setelah itu saya pilih HTML

Sebelumnya saya akan tunjukan Contoh Desain apa yang akan saya buat, coba lihat gambar di bawah ini.

Yap seperti gambar di atas, disana ada beberada bagian, ada header, sidebar kiri dan kanan, ada gambar yang tepat di tengah, ada menu, konten, dan juga footer, seperti ini detail nya:
gambar di bawah ini saya gunakan untuk header,

Gambar yang ini untuk Sidebar yang kanan atas,

Untuk yang ini saya gunakan untuk Sidebar yang kiri atas,

Untuk yang ini saya gunakan mengisi ruang tengah dari contoh desain web,

dan yang di bawah ini bukan gambar melainkan link hidup, jadi saya buat dari font dan saya kasih background dan saya print screen untuk di tampilkan disini,

Ini untuk contoh kontennya,

 dan ini footer nya,

sehingga keseluruhan tampilannya nampak seperti ini,

ok saya akan memulai langkah pembuatannya menurut versi saya,
pertama saya akan buat tabel, 1 kolom dan 1 baris untuk tempat saya meletak kan gambar yang telah buat untuk Header

Pilih Insert >>Table, dan akan muncul gambar seperti di bawah ini,

Setelah itu saya ganti nilai di Rows dan Columns menjadi 1, dan Klick Ok. Ingat dalam Toturial kali ini saya akan melakukan beberapa Insert tabel jadi di ingat ingat proses dalam menambahkan tabel,
ok lanjut, Setelah itu akan muncul hasil dari proses diatas, seperti gambar di bawah ini,

yang di blok biru dalam gambar itu adalah Script dari tabel yang ada di bawahnya, dan disini saya akan mengatur tabel itu agar lebar dan posisi nya sesuai keinginan saya,
maka saya akan men centerkan tabel tersebut dan membuat lebar nya menjadi "870" saya ganti pada tulusan yang di blok biru di gambar di tulisan "200".

Pilih Align dan Pilih Center, maka tabel akan berubah posisi ke tengah, dan kini tinggal mengatur lebar nya,

Yap posisi dan lebaar tabel sudah sesuai keinginan saya dan kini tinggal memasukkan gambar yang telah di siapkan untuk Header,
langkah nya Pilih Insert >> Image dan akan muncul Pop Up seperti gambar di bawah ini,

Klick Ok dan jika berhasil akan berubah seperti ini,

Kini masukan lagi 1 tabel dengan 1 baris dan 3 kolom, caranya tidak perlu saya ulangi karna cara memasukkan tabel sudah saya beritahu di atas tadi, dan apabila sudah di tambahkan saya akan atur lagi posisi ke tangah dan lebarnya "870", di tabel ini ada 3 kolom, kolom kanan dan kiri saya setting lebarnya menjadi "222" dan sisanya "426" saya gunakan sebagai kolom tengah.
tabel ini saya gunakan untuk tempat gambar yang telah saya desain untuk mengisi bagian sidebar kiri dan kanan, dan gambar di tengah nya, oh iya untuk mengganti lebar nilainya geser dulu secara manual kolom kolom tersebut sehingga akan nampak Script tambahan,

yaaa dan inilah tampilannya tinggal memasuk masukan gambar nya,

dan seperti gambar diatas itu lah tampilan nya, dan kini saya akan masukan 1 tabel dengan 1 baris dan 4 kolom sebagai Menu, lebar keseluruhan 870, karena 4 kolom saya masukan "217" per kolom dan saya atur posisinya ke tengah, dengan men centerkannya.

Tampilannya seperti gambar diatas, dan kini saya akan sesuai kan hingga menjadi sebuah menu dengan link aktif, pada tutorial ini saya tidak menjelaskan bagaimana cara membuat link karena dalam tutorial ini hanya membahas desainnya.

ya hasilnya seperti gambar diatas dan kini saya masukan lagi 1 tabel dengan 1 baris 1 kolom dengan lebar "870" dan posisi di tengah,

dan gambar diatas itu sudah akir dari tutorial ini, untuk footer saya gunakan cara seperti membuat menu di atas, jangan lupa simpan dengan format Html,
sekian terima kasih

Tugas tentang      :Web Design
Guru                    :

1. Sucipto, S.Kom, M.Kom
2. Habib Marzuki, A.Md
3. Agustianda, A.Md