Tutorial Desain Web Professional Dengan Dreamweaver
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 acuan yang dapat Anda pelajari.
Jujur jikalau ditanya mengenai Desain Web, ilmu saya belum terlalu tinggi atau dapat dibilang masih jauh dari kata Professional, tapi itu tidak menjadi masalah, alasannya yaitu 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 dikala 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 jikalau Anda sudah memakai versi Dreamweaver yang lebih canggih, versi CS6 misalnya, tidak menjadi masalah, alasannya yaitu disini kita akan memakai fitur-fitur dasarnya saja.
Karena ada berbagai 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 fatwa 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 yaitu 1366 x 768. Oke untuk menciptakan 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 bab bawah isyarat <body> isikan isyarat 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 yaitu 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
Setelah kita mendesain header, saatnya kita masuk ke bab Content. Caranya hampir sama, hanya saja disini kita akan memasukkan background yang berbeda yaitu background berwarna merah.
- Letakkan isyarat ini <div style="background-image:url(file:///D|/Downloads/Body.jpg); height:417px;"></div> sempurna dibawah isyarat div header tadi.
Sengaja saya tambahkan height sebesar 417px alasannya yaitu memang ukuran tinggi gambar tersebut yaitu 417px.
- Tambahkan text, gambar atau video
Gunakan kreativitas Anda untuk menciptakan content web kita menjadi menarik. Sedikit informasi, untuk mengatur text biar berada di tengah gunakan Line-Height, menyerupai yang saya contohkan dikala 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 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 hanyalah pada bab tinggi dan source dari gambarnya saja. Anda juga dapat menyelipkan gambar atau teks sebelum </div>.
- Bagi Footer menjadi tiga kolom
Agar footer lebih menarik, kita dapat membaginya menjadi tiga kolom. Caranya yaitu memakai Table. Script atau Kode untuk menciptakan tabel tiga kolom yaitu menyerupai 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 isyarat tersebut di tengah div footer tadi.
Selesai sudah, tinggal Anda kembangkan saja sesuai kreatifitas Anda. Nah sesuai kesepakatan 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 isyarat css dan htmlnya.
Itu saja Tutorial Desain Web Professional dengan Dreamweaver yang dapat saya bagikan, semoga saja apa yang saya tulis ini dapat bermanfaat untuk Anda, khususnya yang sedang mencar ilmu untuk mendesain website.
Komentar
Posting Komentar