Tutorial Desain Web memang Aku akui sudah banyak tersebar di Internet, or dengan kata lain sudah banyak Blogger untuk sudah membagikan ilmunya tentang Desain Web menggunakan Dreamweaver. Namun tak ada salahnya Aku juga ikut meramaikan tutorial desain web agar lebih banyak referensi untuk bisa Kamu pelajari.
Jujur jika ditanya mengenai Desain Web, ilmu Aku belum terlalu tinggi or bisa dibilang masih jauh dari kata Professional, tapi itu tak menjadi masalah, karena kita punya aplikasi or software untuk sangat powerfull untuk mendesain web. Dan Aku yakin sebagaian dari Kamu sudah pernah menggunakan aplikasi ini. Dreamweaver, yap itulah aplikasi desain web untuk Aku rasa paling powefull saat ini. Meskipun Dreamweaver sekarang sudah mencapai versi CC or versi diatasnya CS6, namun Aku masih setia menggunakan Dreamweaver 8 or biasa lebih dikenal dengan Macromedia Dreamweaver 8.
Namun jika Kamu sudah menggunakan versi Dreamweaver untuk lebih canggih, versi CS6 misalnya, tak menjadi masalah, karena disini kita akan menggunakan fitur-fitur dasarnya saja.
Karena ada banyak sekali untuk bisa dilakukan oleh Aplikasi Dreamweaver ini, maka Aku akan membagi tutorial ini menjadi 3 Bagian.
- Tutorial Desain Header Web
- Tutorial Desain Content Web
- Tutorial Desain Footer Web
Ohya tutorial kali ini akan mengadopsi gaya or aliran Flat Design Web, jadi disini kita tak akan menggunakan warna-warna untuk tak terlalu mencolok or terang. Oke, kita mulai saja tutorial desain web untuk pertama.
Tutorial Desain Header Web
Header web untuk akan kita buat nanti berukuran 1343 x 70 px. Aku rasa ukuran tersebut sudah cukup pas, mengingat resolusi dari layar kebanyakan notebook sekarang adalah 1366 x 768. Oke untuk membuat Header Web ikuti saja langkah dibawah ini.
- Buka Dreamweaver > File > New > HTML Template
Seperti untuk sudah Aku katakan diatas, disini Aku menggunakan Macromedia Dreamweaver 8, untuk Kamu untuk sudah menggunakan Dreamwever CS silahkan disesuaikan. - Masuk ke Mode Split
Di bagian bawah kode <body> isikan kode ini<div style="background-image: url(file:///D|/Downloads/Header.jpg); height:70px; line-height:70px; padding-left:30px; color:#FFFFFF; font-family:Bebas Neue; font-size:36px">Berguru SEO</div>
Tenang saja untuk filenya nanti Aku sediakan dibawah, bisa Kamu download gratis. Ohya disini Aku menggunakan Background dari template Creative Juice dari Themefuse sejujurnya ini adalah template premium.
Header sudah selesai kita buat, selanjutnya silahkan dimodifikasi, misalnya ingin menambahkan halaman About, Contact, Sitemap, Privacy, Disclaimer or semacamnya boleh dan sah-sah saja.
Tutorial Desain Content Web
sesudah kita mendesain header, saatnya kita masuk ke bagian Content. Caranya hampir sama, hanya saja disini kita akan memasukkan background untuk berbeda yaitu background berwarna merah.
- Letakkan kode ini <div style="background-image:url(file:///D|/Downloads/Body.jpg); height:417px;"></div> tepat dibawah kode div header tadi.
Sengaja Aku tambahkan height sebesar 417px karena memang ukuran tinggi gambar tersebut adalah 417px. - Tambahkan text, gambar or video
Gunakan kreativitas Kamu untuk membuat content web kita menjadi menarik. Sedikit informasi, untuk mengatur text agar berada di tengah gunakan Line-Height, seperti untuk Aku contohkan saat menuliskan nama Berguru SEO untuk Header Web.
Tahap dua sudah selesai, selanjutnya kita akan menambahkan Footer.
Tutorial Desain Footer Web
tak jauh berbeda dengan sebelumnya, untuk mendesain footer web kita masih tetap akan menggunakan Background Gambar. Langsung Kamu ikuti langkah-langkah untuk menambahkan Footer dibawah ini.
- Tambahkan <div style="background-image:url(file:///D|/Downloads/Footer.jpg); height:442px"></div> dibawah div content
untuk membedakan hanyalah untuk bagian tinggi dan source dari gambarnya saja. Kamu juga bisa menyelipkan gambar or teks sebelum </div>. - Bagi Footer menjadi tiga kolom
Agar footer lebih menarik, kita bisa membaginya menjadi tiga kolom. Caranya adalah menggunakan Table. Script or Kode untuk membuat tabel tiga kolom adalah seperti dibawah ini.<table style="width:100%; color:white; text-align:center; line-height:40px;"><tr><td width="33%">Text / Gambar 1</td><td width="33%">Text / Gambar 3</td><td width="33%">Text / Gambar 3</td></tr></table>
Letakkan kode tersebut di tengah div footer tadi.
Selesai sudah, tinggal Kamu kembangkan saja sesuai kreatifitas Kamu. Nah sesuai janji Aku diatas, maka diakhir pembahasan ini Aku akan membagikan source dari tutorial desain web untuk baru saja kita buat tadi mulai dari gambar, sampai dengan kode css dan htmlnya.
Itu saja Tutorial Desain Web Professional dengan Dreamweaver untuk bisa Aku bagikan, semoga saja apa untuk Aku tulis ini bisa bermanfaat untuk Kamu, khususnya untuk sedang belajar untuk mendesain website.
Terimakasih Kamu baru saja telah membaca
Tag :
