Dasar - Dasar Belajar Web Desain

Duh blog tetangga sebelah keren banget ya sobat... Pasti ngiri deh liat nya, ya kan??

Nah di sini gw mau share nih buat elo semua (gw juga baru nyoba sih) cara belajar web design yg dasar nih. Kalo ada yg gak ngerti, komen aja yaa, kalo gw nya ngerti ya gw jawab, tapi kalo yg nanya nya lebih pinter dari gw ya gw berguru lagi sama yg diatas gw deh (atas gw berarti genteng ya -,-).

oke, kita capcuss aja deh yuuk...

Apa saja hal dasar yang perlu dipelajari dalam web design?

Ada 4 bahasa pemrograman standar dalam web design:

HTML, CSS, JavaScript dan PHP.

 Langkah pertama adalah Sobat perlu bisa membedakan cara penulisan dan tag dasar dari keempat bahasa tersebut, agar sobat tidak rancu saat mengedit skrip coding dari theme blog yang sobat gunakan.

Untuk PHP cukup pelajari cara penulisan tag sesuai dengan CMS blog yang Sobat pakai. dalam bahasa PHP yang langsung bisa sobat gunakan tanpa perlu susah payah membuat perintahnya sendiri. Nah, sekarang pertanyaanya pelajari yang mana dulu? jawabannya adalah..

eng ing eng...

HTML → CSS → PHP → JavaScript HTML ada diurutan pertama karena merupakan bahasa pemrograman utama yang WAJIB dipelajari dalam membangun sebuah halaman blog/website.

Setelah halaman dasar dibangun, CSS digunakan untuk memberikan “makeup” pada halaman. Sebagai langkah awal gunakan saja tag PHP standar bawaan dari theme blog yang sudah ada. JavaScript bisa Sobat pelajari untuk membuat halaman blog lebih interaktif, tapi tidak mutlak.

Bagaimana dengan proses belajarnya?

Modifikasi → Merancang → Membuat

Tidak ada salahnya untuk terlebih dahulu mempelajari coding dari theme buatan orang lain. Jika tahap modifikasi sudah tidak lagi sulit, sudah saatnya merancang desain theme buatan sendiri.

Dalam tahap ini, corat-coret layout blog diatas kertas sangat membantu designer untuk membuat desain yang memiliki konsep dengan gambaran yang jelas dari pada sekedar langsung menggambar imajinasi yang ada dikepala ke layar monitor. Pelajari hingga 50% Jika semangat belajar lagi tinggi, semua modul pelajaran bisa dilahap sampai kenyang habis dalam sekali waktu. Ya, bisa saja dalam satu waktu sobat mempelajari semua bahasa keempat pemrograman desain web, namun itu tidak efektif. Banyak senior menyarankan untuk mempelajari sebuah bahasa hingga 50%, lalu pelajari bahasa baru lainnya.

Jadi ketika sebuah bahasa pemrograman sudah sobat kuasai hingga 50%, anda bisa melanjutkannya ke bahasa lain sehingga setahap demi setahap sobat akan menguasai semuanya karena saling berkaitan, dan begitu seterusnya. Bagi kebanyakan orang, cara ini lebih efektif ketimbang mempelajari semuanya secara bersamaan. Selain pemrograman, anda juga perlu belajar untuk membuat desain grafisnya. Tahap awal bisa juga untuk mengambil elemen-elemen grafis dari Internet, yang gratis pastinya :) Banyak kok website yang menyediakan desain header, tombol, dan pernak-pernik gambar untuk blog sobat.

Untuk Membuat Desain Sobat bisa pergunakan software bantuan seperti photoshop ataupun Dreamweaver. Berikut sedikit tutorialnya :

Sekarang saatnya kita melakukan sedikit modifikasi dengan menggunakan Dreamweaver. dreamweaver yang saya gunakan adalah dreamweaver versi 8 padahal sekarang sudah ada lho yang versi high end, hihi. Langsung saja jalankan aplikasi buatan Macromedia ini dan Anda akan melihat tampilan seperti gambar dibawah ini:

 buka file index.htm yang telah kita save pada sesi photoshop dengan cara pilih File->Open setelah file index.html dibuka pada dreamweaver delete gambar slice yang 6 keenam atau gambar dengan nama index_06.png, yaitu gambar yang digunakan untuk isi content. Jadi kita rancang dulu tuh gambar web nya mau kayak gimana di photoshop.

Jangan Heran bila tampilan layout website menjadi hancur seperti gambar dibawah, atur tabel HTML sehingga tampilan web menjadi normal lagi.

Setelah anda mengatur tata letak gambar pada tabel, pindahkan opsi view ke show code view sehingga anda dapat melihat Tag-tag Mark-up HTML seperti berikut :

Nah selanjutnya kita Modif tag HTML dengan menambahkan Cascading Style Sheets (CSS), caranya tambahkan tag yang berwarna merah pada tag berikut kedalam tag HTML Sobat.

    <html>

<head>

<title>Untitled-1</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

.content {

    background:url(images/index_06.png) bottom;

    padding:20px 20px 40px 20px;

}

</style>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" align="center" width="700" height="377" border="0" cellpadding="0" cellspacing="0">

<tr>

<td height="94">

<img src="images/index_01.gif" width="281" height="94" alt=""></td>

<td rowspan="4">

<img src="images/index_02.gif" width="419" height="328" alt=""></td>

</tr>

<tr>

<td height="76">

<img src="images/index_03.gif" width="281" height="76" alt=""></td>

</tr>

<tr>

<td height="64">

<img src="images/index_04.gif" width="281" height="64" alt=""></td>

</tr>

<tr>

<td height="94">

<img src="images/index_05.gif" width="281" height="94" alt=""></td>

</tr>

<tr>

<td colspan="2" class="content" ></td>

</tr>

</table>

</body>

</html>

Dengan demikian maka kerangka website Sobat sudah jadi. Langkah selanjutnya kembalikan tampilan dreamweaver ke design view "Show Design View" kemudian isi bagian kolom content dengan hal-hal yang ingin anda publikasikan pada website Sobat. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.html pada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhir link.html. Sehingga kini anda memiliki 4 (empat) file html yang berbeda (semuanya harus dalam folder yang sama).

Isi kolom content pada masing-masing file yang sudah Sobat buat sesuai dengan tema masing-masing file, yakni isi halaman utama website, tentang kita, galeri dan link. saya contohkan dibawah merupakan isi halaman utama

Langkah terakhir setelah mengisi semua file adalah menghubungkan/melink-an file yang satu dengan yang lain. caranya mudah saja. click setiap menu link pada website kita lalu pada properties pilih link dan click icon folder seperti dapat dilihat pada gambar dibawah :

pilih file yang ingin di hubungkan

Lakukan hal yang sama dan hubungkan semua file... selesailah project Sobat, kini Sobat mempunyai website yang Sobat rancang sendiri...

 Catatan Penting : Pembuatan website diatas merupakan salah satu cara perancangan web yang berbasis Table. selain menggunakan table sebetulnya ada cara lain yaitu dengan menggunakan Div atau campuran keduanya Div+Table. kedua cara memiliki plus minus masing-masing dan anda akan mengerti dengan sendirinya seiring dengan pengetahuan dan pengalaman anda dalam membuat website.
gimana? agak puyeng sih, tapi penasaran kan pengen nyoba?

Jangan takut buat nyoba yaa, kalo mau bisa ya harus coba..

TALK LESS DO MORE yaa Sobat :)