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.
Close
iya kang sama"...
ReplyDeleteKalau sudah memakai css, lebih bagus tidak usah memakai software semacam dreamweaver. Bagusnya langsung memaki notepad++. Dan tes case, buka-tutup browser dan notepad untuk melihat hasilnya. Desain sketsa awal di kertas terlebih dahulu. Kemudian rancang letak div dan masukan style cssnya.
ReplyDeletelombok design here
ReplyDeletetutorialnya bermanfaat mas, terimakasih.
ReplyDeletesalam kenal dari Maruu Design
makasih gan atas ilmunya, sekalian juga ya, mampir ke http://cyberbusinessinstitute.com/ yang mau belajar labih lanjut tentang dasar dasar pemograman :)
ReplyDeletesalam kenal kawan,,saya ingin kawan kawan mengajariku tentang pembuatan dasar dasar web, karena saya masih tahap pemula dan otodidak,,terima kasih
ReplyDeletetemakasih atas ilmunya semoga allah membalas kebaikan mu.....
ReplyDeletemas kalo dari drupal ada ngga yg gratis?
ReplyDeleteMakasih admin artikelnya bagus, jadi pengen praktek dreamwaver..
ReplyDeleteSalam kenal http://kursuswebinstan.com
Wihh manteb gan info nya, makasih gan
ReplyDeletewebsite nya gk rapih gan, background bikin pusing
kunjung balik gan
Golden Gamat
makasih kak artikelnya sangat membantu saya
ReplyDeletemonggo mampir kak
Belajar Web
Artikel yang sangat membantu untuk pemula dalam membuat website. mudah-mudahan bermanfaat tuk di kemudian hari. makasih gan
ReplyDeletemampir juga ke website kampus saya http://atmaluhur.ac.id dan
website saya https://misri.mahasiswa.atmaluhur.ac.id
https://bit.ly/2FqsPls
ReplyDeletehttps://bit.ly/2Fn6vKn
ReplyDelete