Pagi
sobat, saya harap akan selalu baik. Ada request dari salah satu sahabat
kita. Katanya gimana kalau hari ini kita membahas tentas desain web.
Mudah ga sih mendesain web itu ? dalam konteks ini saya harapkan sobat
sudah mengerti cara membuat website.
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 Kamu 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 Kamu 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..
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 CS 4, 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.
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 anda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <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"> <!-- ImageReady Slices (Untitled-1.psd) --><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><!-- End ImageReady Slices --></body></html> |
Dengan demikian maka kerangka website anda 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 anda. setelah selesai save index.html, lalu save as dengan nama file yang berbeda about.htmlpada folder yang sama, save as lagi dengan nama file gallery.html dan yang terakhirlink.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 anda 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
anda, kini anda mempunyai website yang anda 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 Divatau 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.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon