RAINBOW!!: Mei 2015

Pada kesempatan kali ini saya akan menjelaskan cara membuat web sederhana dengan software Photoshop untuk mendesain layout web nya, kemudian di lanjutkan dengan software Dreamweaver untuk membuat web nya berfungsi dan bisa di jalankan.

Pertama, buka photoshop kemudian pilih New File untuk lembar baru dan tentukan sizenya seperti berikut :

Setelah lembar baru tampil, buat header, footer, menu atas dan bagan-bagan di dalam nya sesuai yang anda inginkan :

Cara membuat header dan footer seperti diatas yaitu kita ketik tool yang bernama Rectacngles Tool nya di menu sebelah kiri lalu akan terbentuk Layer 1 dan Layer 2 di menu sebelah kanan. Disitu kita klik kanan Layenya kmudian pilih Blending Options dan ubah warnanya selera kita pada pilihan Gradient Overplay. Begitu pula saat membuat Daftar Menu nya dan bagan-bagan isi masing-masing Menunya seperti berikut.

Jika ingin menambahkan Teks kita bisa memilih tool yang bernama Horizontal Type Tool dan memberinya logo, symbol, atau foto dengan cara mendragnya ke tampilan tersebut hingga menjadi seperti berikut :

Setelah layout terbentuk kita akan membuat File baru untuk Header da Footernya agar dapat tampil saat di hosting. Pertama kita blok Header dan Footernya dengan menggunakan tool yang bernama Rectangular Marquee Tool, lalu pilih Menu Edit dan pilih Copy Merged. Setelah di Copy Merged kita buat dua File barunya kemudian Paste kan Header dan Footer nya di masing-masing File tersebut. Jika sudah selesai Save File nya dengan format JPG atau JPEG.

Berikut adalah tampilan Header dan Footer dalam bentuk Images :

Selanjutnya kita akan membuat kodingannya menggunakan Bahasa CSS sebagai Style nya dan Bahasa HTML sebagai Index,About, Contact, Profile, Download, dan Faqs nya, berikut adalah tampilan program kodingan HTML dan CSS :

1. Index