PROSES PENGEMBANGAN WEBSITE

Wednesday, 31 August 2016

 

Pada bagian ini kita akan membahas tentang teknik pengembangan situs sesuai dengan sketsa yang telah dibuat sebelumnya.Proses pengembangan diawali dengan pembuatan layout halaman menggunakan AdobePhotoshop, kemudian diolah dalam Macromedia Dreamweaver untuk menambahkan isi (content) dan sedikit ambahan  menupop up (pull down) menggunakan Javascript.Untuk studi kasus, pertama kali kita akan mencoba membuat situspribadi. Dalam hal pemilihan warna, terserah para pembaca. Saya sebagai penulis hanya memberikan teknik membuat bentuk layout halaman website profesional. 



SITUS PRIBADI


  

Dengan melihat bentuk layout tersebut di atas, akan lebih mudahproses pengembangannya dalam Adobe Photoshop. Sebelummembuat dokumen baru, kita harus mengetahui bahwa tidak semuaresolusi monitor pengguna sama dengan yang kita miliki. Sebagaicontoh, resolusi monitor kita menggunakan ukuran 1024 x 768 pixelsedangkan pengguna (user) hanya memiliki resolusi 800 x 600 pixel.Apabila Anda membuat ukurandokumen 900 x 600 pixel makamenimbulkan ketidaknyamanan pengunjung karena harus sering menggulung halaman website akibatukuran dokumen terlalu lebar.Sebaiknya lebar tidak melebihi 800 pixel.


 MEMBUAT DOKUMEN BARU

Diasumsikan Anda menggunakan Adobe Photoshop CS maupunCS2. Jalankan program Adobe Photoshop kemudian ikuti beberapapetunjuk berikut ini:

1. Buatlah dokumen baru denganukuran 800 x 600 pixel. Modewarna RGB, resolusinya 72   mode warna RGB 8 bit dan latar belakang white. Beri nama dokumen baru tersebut (misal:

Situs Pribadi), setelah selesai klik OK. 

2.Untuk mempermudah proses pembuatan interface situs, ada

baiknya memasukkan gambar bentuk layout kedalam dokumenAdobe Photoshop. Anda dapat menduplikasi (copy dan paste)ke dalam dokumen tersebut. 

3. Klik Set Foreground color untuk memilih warna sebagai latar belakang.

4. Setelah kotak dialog ColorPicker muncul, masukkan kodewarna # 0066cc pada kotak kode. 

5. Tekan tombol Alt+Backspacesecara bersama-sama untukmemberi warna pada layer Background. 

6. Buatlah layer baru dengan nama “Up” kemudian aktifkanRectangle Marquee tool dan buatlah seleksi seperti nampakpada gambar berikut. 

7. tekan huruf D pada keyboard untukmengubah warna default Foreground dan Background (Hitam dan Putih) kemudian tekanhurufXuntuk membalik warna tersebut. Tekan tombol53 Alt+Backspacesecara bersama-sama untuk memberi warnaputih pada layer “Up”. Tekan Ctrl+D untuk membuang seleksi. 

Sekianlah artikel proses pengembangan website kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.