Belajar Desain Web dengan CSS (Praktek Langsung)


monzaaulia@outlook.com  (19 Juni 2016) -  Ini adalah ilmu mahal, kebanyakan mereka yang belajar ini perlu ikut kursus atau belajar di bangku kuliahan. Beruntungnya sekarang ini, internet telah membuka kesempatan bagi kita yang jauh dari bangku kuliah IT untuk juga bisa menikmati ilmu ini. Maka jangan sia-siakan kesempatan anda untuk belajar ilmu mendesain web.

Sebelum kita benar-benar lanjut ke pembahasan CSS, saya harap anda sudah mengerti dan memahami tentang HTML yang sebelumnya sudah saya paparkan pada panduan membuat website seri pertama. Jika belum, anda boleh belajar HTML dulu sebelum belajar CSS, karena pembahasan CSS ini adalah kelanjutan dari pembahasan pertama. (Baca: Cara Efektif Belajar HTML dengan Praktek Langsung)

Jika anda memang sudah memahami tentang ilmu HTML yang sudah saya paparkan sebelumnya, nah waktunya bagi anda untuk naik kelas belajar CSS.

Pernah saya singgung sebelumnya, bahwasanya CSS ini ibaratkan kulit pada manusia, dialah yang berfungsi memberikan tampilan cantik, mewarnai, atau mengatur struktur antar muka. Jadi CSS ini sama pentingnya dengan HTML. Kalau memang sama penting, berarti anda wajib mempelajari CSS layaknya HTML.

Rasanya sangat membosankan kalau anda mempelajari CSS dengan cara per-tag, saya lebih tertarik untuk berbagi ke anda tentang CSS dengan cara langsung dengan cara mempraktekkan mendesain sebuah web. Dalam perjalanan desain, nanti baru saya jelaskan tentang fungsi-fungsi CSS yang saya gunakan ketika mempraktekkan men-desain web.

Belajar CSS tidak perlu tergesa-gesa, santai saja. Jika memang tidak selesai dalam sehari, maka lanjutkan esok hari. Atur waktu belajar anda, tidak perlu lama-lama, cukup satu jam saja sehari.
Bagaimana, sudah siap untuk belajar CSS?

Dalam mendesain web, saya hanya butuh dua software powerfull, yaitu Macromedia Dreamweaver dan Adobe Photoshop. Saya harap anda sudah memiliki kedua software ini di laptop/pc anda. Jika anda mengikuti pembahasan HTML, sudah saya tekankan betapa pentingnya memiliki Macromedia Dreamweaver. Sedangkan Adobe Photoshop saya tekankan di seri ini, anda juga wajib memilikinya.

A. Persiapan desain

Sebelum memulai desain web, yang perlu anda miliki adalah sebuah inspirasi, ide desain. Anda perlu menggambarkan ide desain web ke secarik kertas A4 (kertas putih), buatlah blueprint desain web sementara menggunakan pensil. Hal ini penting, supaya anda tahu yang mana duluan perlu anda kerjakan.

Saya sering mencari inspirasi desain dengan cara masuk ke situs pinterest, stumbleupon, atau berselancar bebas di internet. Beberapa situs-situs keren pernah menjadi inspirasi saya dalam mencari ide desain web. Saya harap anda juga begitu. Saya sendiri menyukai desain web yang flat, simple dan fresh. Karena desain seperti itu lebih terkesan elegan dan enak dipandang.

Karena ini belajar, saya ingin mengajak anda untuk praktek langsung mendesain sebuah web. Karena untuk praktek tidak melewati tahap blueprint, kita langsung saja ambil contoh salah satu web terkenal. Ada dua situs yang terbayang oleh saya sebagai contoh, yakni tokopedia dan digg.

Keduanya adalah situs yang sangat terkenal, apalagi digg yang namanya sudah mendunia. Sepertinya digg lebih cocok kita jadikan objek belajar ketimbang tokopedia, pertimbangannya supaya ketika nantinya kita masuk kedalam tahap CMS, kita bisa menggunakan hasil desain ini untuk dijadikan theme yang benar-benar bisa digunakan.

Disini saya tidak bermaksud mengajarkan anda mencuri desain atau menjiplak, ini hanya sebagai bahan pembelajaran saja. Jadi, nanti kalau anda sudah bisa mendesain web, jangan pernah gunakan lagi cara ini, karena ini jelas pelanggaran. Tolong pahami dengan bijak.


Oke, sudah lihatkan tampilan digg? Yap, keren dan elegan. Seperti inilah desain yang saya sukai. Nah, kita akan coba membuat desain seperti dig, tentu dengan sedikit penambahan sana sini, supaya tidak terlalu menjiplak konsep desain milik orang.

Mungkin materi ini agak sedikit membingungkan kalau di-ikuti, bisa jadi karena belum terbiasa dengan CSS atau dari saya nya yang kurang pandai menyampaikan materi. Jadi saya pikir supaya mudah, terlebih dahulu anda download hasil prakteknya dulu sebagai pegangan anda. Jadi nanti kalau kira-kira tidak paham atau atribut CSS tidak bekerja karena ada kesalahan, anda bisa contek di hasil prakteknya. Silahkan download disini.

Nah kalau sudah kita mulai belajarnya, sekarang bukalah Macromedia Dreamweaver!. Kalau sudah, buatlah sebuah file HTML baru dan save dengan nama index.html.

Perlu diketahui, kode CSS dapat disimpan dengan 2 cara, yaitu secara internal (langsung disimpan dalam file yang sama dengan HTML/PHP) atau eksternal (file CSS terpisah). Supaya mudah, kita buat file CSS terpisah, karena nantinya file ini dapat dihubungkan ke banyak file HTML atau PHP lainnya.

Kita lanjut, dibagian kanan Dreamweaver ada menu CSS style, nah pilih New CSS Rule (icon warna putih). Jika di Dreamweaver anda tidak ada, tekan Shift+F11.


Lalu pilih Tag dan isikan dengan “body”, setelah itu simpan file css dengan nama “style” pada direktori yang sama dengan file index.html. Setelah itu, akan muncul menu pengaturan CSS untuk tag body. Website akan membaca tag body sebagai perintah dasar untuk keseluruhan tampilan desain web, disini kita akan mengatur jenis font yang kita gunakan, warna font dan juga batas atas-bawah dan kiri-kanan sebuah website.



Pada type, ini yang berhubungan dengan tulisan di website.

Pada box, ini berhubungan dengan batas atas-bawa dan kiri-kanan. Padding isikan “0” dan Margin isikan “0”.



Selanjutkan, kita akan membuat warna link. Nah, untuk linknya perlu tempelkan kode dibawah ini ke file style.css:
a {

                color: #000000;
                text-decoration: none;
}
a:hover {
                color: #0066FF;
}

Tag “a” artinya untuk style link, sedangkan “a:hover” fungsinya link hidup yang berubah warna ketika disentuh pointer. Warna link tetap hitam dan text-decoration: none artinya link tidak ada garis dibawahnya. Sedangkan link hovernya warna biru, sesuai dengan desain digg.

B. Header

Kita sekarang membuat headernya, tempelkan kode dibawah ini ke index.html:

<div id=”header”></div>
Artinya kita sedang memanggil header untuk muncul di index.html, sekarang giliran kita untuk membuat desain header di style.css.

Pada box kita pilih panjang 100% dan lebar auto. Padding atas 10px dan bawah 10px, margin bawah 25px. Anda akan mengerti seiring waktu mengenai fungsi-fungsi pada box ini jika anda sudah terbiasa.

Selanjutnya kita buat garis bawah warna abu-abu.


Kalau sudah, silahkan di save dan lihat perubahannya di browser.

Sekarang di bagian Header kita perlu membuat div yang menunya lalu dalam div menu dibagi menjadi 3 bagian layaknya digg, yaitu kiri (untuk menu kiri), tengah (untuk logo), dan kanan (untuk bagian kolom pencarian). Masing-masing bagian kita beri ukuran 33%.

Kita beri nama div #menu. Coba buatkan div baru di css:

#menu {
}

Lalu, isikan div tersebut dengan settingan dibawah ini:

Setelah itu tempelkan <div id=”menu”></div> diantara <div id=”header”> dan </div>. Contohnya begini:

<div id=”header”> <div id=”menu”></div> </div>
Nah, sekarang buat div satu lagi dengan ukuran 33%. Beri nama div submenu:

#submenu {
}

Dengan settingan dibawah ini:

Setelah itu tempelkan div submenu dalam div menu.  Buatkan 3 submenu di html, contohnya begini:

<div id="menu">
<div id="submenu"></div>
<div id="submenu"> </div>
<div id="submenu"> </div>
</div>


Sekarang anda perlu membuat list menunya, nah untuk membuat list menu perlu menggunakan <ul><li></li></ul>. Jadi copy dan paste code ini ke css anda:

#submenu ul {
padding: 0px;
float: left;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#submenu li {
margin: 0px;
float: left;
display: block;
padding-top: 0px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
list-style-type: none;
font-size: 13px;
text-transform: uppercase;
}

Lalu, copy dan paste code ini ke file html di dalam div submenu:

<ul>
<li>Beranda</li>
<li>Blog</li>
<li>Shop</li>
</ul>

Jika anda mengikuti langkahnya dengan benar, seharusnya hasilnya seperti ini:


Sekarang waktunya membuat logo untuk website. Kebanyakan orang menggunakan Coreldraw, namun saya lebih menyukai Photoshop ketimbang Coreldraw. Untuk logo, anda boleh kreasi sendiri, tidak perlu mengikuti petunjuk dari saya, asalkan logonya dengan ukuran lebar 30px, panjangnya terserah (yang penting tidak lebih dari 340px).

Setelah anda membuat logonya, tampilkan logo di submenu (file html) yang kedua dengan tag html dibawah ini:

<center> <img src=”logo.png”> </center>
Sekarang waktunya kita membuat kolom pencarian. Untuk membuatnya, perlu sisipkan kode form html ke bagian submenu terakhir, setelah itu baru kita bentuk dengan CSS. Masukkan kode ini di dalam div submenu ketiga:

<form action="#" method="get"><input name="search" type="text" value="search" size="30" maxlength="100" class="search" /></form>
Supaya lebih menarik, di div submenu tambahkan perintah align ke kanan, lengkapnya seperti ini:


Lalu di CSS, tambahkan class ini:

.search {
padding: 5px;
border: 1px solid #aaaaaa;
}

Jika sudah, maka hasilnya akan seperti ini:


Nah, anda sudah menyelesaikan bagian headernya. Kini giliran anda untuk membuat bagian body dari sebuah website.

C. Body

Kita sudah menyelesaikan bagian header, sekarang waktunya kita mempraktekkan bagian body. Untuk membangun bagian body, anda perlu membuat layout dasarnya dulu, nama div boleh terserah anda. Saya lebih sudah memberi nama div untuk body dengan nama wrapper.

CSS nya seperti ini:

#wrapper {
padding: 0px;
width: 1020px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Kenapa marginnya “0 auto 0 auto”? ini perlu di set supaya posisi div berada di tengah tengah.
Setelah anda membuat div wrapper, anda perlu temple <div id=”wrapper”></div> di bawah div header.

Oke, sekarang kita perlu membuat list artikelnya. Karena kita mencontohkan digg, maka kita akan membuat kolom artikel seperti digg.

Yang pertama kita ingin membuat artikel stiky. Buat dulu div nya, misalnya nama div top-article.

#top-article {
padding: 0px;
width: 1020px;
margin: 0px;
float: left;
}
#thumbnail-top-article {
padding: 0px;
width: 661px;
margin: 0px;
float: left;
height: 360px;
}
#body-top-article {
width: 329px;
float: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
}

Lalu tambahkan atribut div tadi ke html:


Dan hasilnya seperti ini:


Nah, sudah tampak bagus bukan? Maaf untuk gambarnya agak vulgar.

Sekarang kita harus buat bagian artikel bawahnya. Untuk artikel bawah akan kita buat berdasarkan tiga kolom, maka kita cukup buat satu div yang mana div tersebut jika dikali tiga ukurannya 1020px (ukuran wrapper).

Tapi sebelum membuat kolom artikel, kita perlu buat fondasi dasar dulu, kita beri nama div bottom-article:

#bottom-article {
padding: 0px;
width: 1020px;
float: left;
margin-top: 30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

Oke, tempelkan dibawah div top-article. Harus selalu saya ingatkan, karena anda ingin posisi bottom-article tepat dibawah top-article, maka tempelkan setelah </div> milik top-article. HTML nya seperti ini:

<div id="bottom-article"></div>
Sekarang kita buat kolom artikelnya:

#list-bottom-article {
padding: 0px;
width: 320px;
float: left;
margin: 10px;
height: auto;
}

Oke, setelah atribut itu dimasukkan ke html dan kita isikan gambar beserta contoh tulisan, maka hasilnya akan seperti ini:


Bagaikan kembaran digg bukan? Hehehe. Tenang saja kalau anda masih bingung mensinkronkan antaran css dan html, karena hasil praktek kita ini bisa anda download dan oprek sendiri supaya lebih paham.

D. Footer

Sentuhan akhir, kita perlu membuat bagian footernya, nah copy css ini:

#footer {
width: 1020px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#body-footer {
width: 1010px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #dddddd;
padding-top: 20px;
padding-right: 5px;
padding-bottom: 30px;
padding-left: 5px;
font-size: 12px;
color: #666666;
margin: 0px;
float: left;
}

Jangan lupa untuk tambahkan juga ke HTML:

<div id="footer">
<div id="body-footer">
Hak Cipta digg.com
</div>
</div>

Tambahkan tepat diatas </body>

Akhirnya selesai juga praktek belajar CSS dengan cara langsung membuat webnya. Akan lebih baik lagi jika anda men-download hasil praktek kita ini supaya bisa langsung anda belajar oprek di laptop anda sendiri.

Mungkin agak sedikit bingung dan kelihatan sulit ya? Sebenarnya ini tidaklah sulit jika nantinya anda sudah terbiasa, ini karena anda masih belajar saya makanya tampak sulit.

Kalau seandainya anda bingung dan jenuh, anda istirahat dulu, tidak perlu dipaksakan harus bisa sehari. Lanjutkan belajarnya besok pagi atau diwaktu senggang lainnya. Jika anda masih belum paham, silahkan bertanya melalui kolom komentar atau langsung via email.

Inilah hasil praktek kita:

Sedangkan ini digg.com:


Seri ketiga: Teknik Memilih Domain agar Berhasil Memenangkan Halaman 1 Google

Artikel ini bermanfaat? Share ke Jejaring Sosial Anda.

Artikel lain:

3 Komentar untuk "Belajar Desain Web dengan CSS (Praktek Langsung)"

  1. CSS bikin asik... lebih asik dibandingkab maen game...

    ReplyDelete
  2. Mantap bang, langsung mahir saya

    ReplyDelete