Tutorial Desain Web memang saya akui sudah banyak tersebar di Internet, atau dengan kata lain sudah banyak Blogger yang sudah membagikan ilmunya wacana Desain Web memakai Dreamweaver. Namun tak ada salahnya saya juga ikut meramaikan tutorial desain web biar lebih banyak rujukan yang dapat Anda pelajari.
jujur bila ditanya terkena Desain Web, ilmu saya belum terlalu tinggi atau dapat dibilang masih jauh dari kata Professional, tapi itu tidak menjadi masalah, sebab kita punya aplikasi atau software yang sangat powerfull untuk mendesain web. Dan saya yakin sebagaian dari Anda sudah pernah memakai aplikasi ini. Dreamweaver, yap itulah aplikasi desain web yang saya rasa paling powefull ketika ini. Meskipun Dreamweaver kini sudah mencapai versi CC atau versi diatasnya CS6, namun saya masih setia memakai Dreamweaver 8 atau biasa lebih dikenal dengan Macromedia Dreamweaver 8.
Namun bila Anda sudah memakai versi Dreamweaver yang lebih canggih, versi CS6 misalnya, tidak menjadi masalah, sebab disini kita akan memakai fitur-fitur dasarnya saja.
Karena ada aneka macam yang dapat 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 anutan Flat Design Web, jadi disini kita tidak akan memakai 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 kini ialah 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 memakai Macromedia Dreamweaver 8, untuk Anda yang sudah memakai Dreamwever CS silahkan disesuaikan.
- Masuk ke Mode Split
Di potongan bawah arahan <body> isikan arahan 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, dapat Anda download gratis. Ohya disini saya memakai Background dari template Creative Juice dari Themefuse sejujurnya ini ialah template premium.
Header sudah selesai kita buat, selanjutnya silahkan dimodifikasi, contohnya ingin menambahkan halaman About, Contact, Sitemap, Privacy, Disclaimer atau semacamnya boleh dan sah-sah saja.
Tutorial Desain Content Web
Sesudah kita mendesain header, saatnya kita masuk ke potongan Content. Tekniknya hampir sama, spesialuntuk saja disini kita akan memasukkan background yang tidak sama yaitu background berwarna merah.
- Letakkan arahan ini <div style="background-image:url(file:///D|/Downloads/Body.jpg); height:417px;"></div> sempurna dibawah arahan div header tadi.
Sengaja saya menambahkan height sebesar 417px sebab memang ukuran tinggi gambar tersebut ialah 417px.
- Tambahkan text, gambar atau video
Gunakan kreativitas Anda untuk membuat content web kita menjadi menarikdanunik. Sedikit informasi, untuk mengatur text biar berada di tengah gunakan Line-Height, ibarat yang saya contohkan ketika menuliskan nama Berguru SEO pada Header Web.
Tahap dua sudah selesai, selanjutnya kita akan menambahkan Footer.
Tutorial Desain Footer Web
Tidak jauh tidak sama dengan sebelumnya, untuk mendesain footer web kita masih tetap akan memakai 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 spesialuntuklah pada potongan tinggi dan source dari gambarnya saja. Anda juga dapat menyelipkan gambar atau teks sebelum </div>.
- Bagi Footer menjadi tiga kolom
Agar footer lebih menarikdanunik, kita dapat membaginya menjadi tiga kolom. Tekniknya ialah memakai Table. Script atau Kode untuk membuat tabel tiga kolom ialah ibarat 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 arahan tersebut di tengah div footer tadi.
Selesai sudah, tinggal Anda kembangkan saja sesuai kreatifitas Anda. Nah sesuai komitmen saya diatas, maka diakhir pembahasan ini saya akan membagikan source dari tutorial desain web yang gres saja kita buat tadi mulai dari gambar, hingga dengan arahan css dan htmlnya.
Itu saja Tutorial Desain Web Professional dengan Dreamweaver yang dapat saya bagikan, semoga saja apa yang saya tulis ini dapat bermanfaa untuk Anda, khususnya yang sedang berguru untuk mendesain website.
Tag :
Web Design
0 Komentar untuk "Tutorial Desain Web Professional Dengan Dreamweaver"