Tutorial Desain Web memang saya akui sudah banyak tersebar di Internet, atau dengan kata lain sudah banyak Blogger yang sudah membagikan ilmunya tentang Desain Web menggunakan Dreamweaver. Namun tak ada salahnya saya juga ikut meramaikan tutorial desain web agar lebih banyak referensi yang bisa Anda pelajari.
Jujur jika ditanya mengenai Desain Web, ilmu saya belum terlalu tinggi atau bisa dibilang masih jauh dari kata Professional, tapi itu tidak menjadi masalah, karena kita punya aplikasi atau software yang sangat powerfull untuk mendesain web. Dan saya yakin sebagaian dari Anda sudah pernah menggunakan aplikasi ini. Dreamweaver, yap itulah aplikasi desain web yang saya rasa paling powefull saat ini. Meskipun Dreamweaver sekarang sudah mencapai versi CC atau versi diatasnya CS6, namun saya masih setia menggunakan Dreamweaver 8 atau biasa lebih dikenal dengan Macromedia Dreamweaver 8.
Namun jika Anda sudah menggunakan versi Dreamweaver yang lebih canggih, versi CS6 misalnya, tidak menjadi masalah, karena disini kita akan menggunakan fitur-fitur dasarnya saja.
Karena ada banyak sekali yang bisa dilakukan oleh Aplikasi Dreamweaver ini, maka saya 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 atau aliran Flat Design Web, jadi disini kita tidak akan menggunakan warna-warna yang tidak terlalu mencolok atau terang. Oke, kita mulai saja tutorial desain web yang pertama.
Tutorial Desain Header Web
Header web yang akan kita buat nanti berukuran 1343 x 70 px. Saya 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 yang sudah saya katakan diatas, disini saya menggunakan Macromedia Dreamweaver 8, untuk Anda yang 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 saya sediakan dibawah, bisa Anda download gratis. Ohya disini saya 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 atau semacamnya boleh dan sah-sah saja.
Tutorial Desain Content Web
Setelah kita mendesain header, saatnya kita masuk ke bagian Content. Caranya hampir sama, hanya saja disini kita akan memasukkan background yang 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 saya tambahkan height sebesar 417px karena memang ukuran tinggi gambar tersebut adalah 417px. - Tambahkan text, gambar atau video
Gunakan kreativitas Anda untuk membuat content web kita menjadi menarik. Sedikit informasi, untuk mengatur text agar berada di tengah gunakan Line-Height, seperti yang saya contohkan saat menuliskan nama Berguru SEO pada Header Web.
Tahap dua sudah selesai, selanjutnya kita akan menambahkan Footer.
Tutorial Desain Footer Web
Tidak jauh berbeda dengan sebelumnya, untuk mendesain footer web kita masih tetap akan menggunakan Background Gambar. Langsung Anda 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
Yang membedakan hanyalah pada bagian tinggi dan source dari gambarnya saja. Anda juga bisa menyelipkan gambar atau teks sebelum </div>. - Bagi Footer menjadi tiga kolom
Agar footer lebih menarik, kita bisa membaginya menjadi tiga kolom. Caranya adalah menggunakan Table. Script atau 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 Anda kembangkan saja sesuai kreatifitas Anda. Nah sesuai janji saya diatas, maka diakhir pembahasan ini saya akan membagikan source dari tutorial desain web yang baru saja kita buat tadi mulai dari gambar, sampai dengan kode css dan htmlnya.
Itu saja Tutorial Desain Web Professional dengan Dreamweaver yang bisa saya bagikan, semoga saja apa yang saya tulis ini bisa bermanfaat untuk Anda, khususnya yang sedang belajar untuk mendesain website.
Terima kasih telah membaca artikel tentang Tutorial Desain Web Professional dengan Dreamweaver di blog Tutorial Masa Kini jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.