Membuat Web Sederhana

Web Sederhana menggunakan Photoshop dan Dreamweaver

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

2. Style

Untuk membuat bagian About, Download, Contact, Profile, dan Faqs bisa di tambahkan di bagian Content Menu dengan membuat file baru  di HTML. Tampilan atau hasil yang lebih jelas dari percobaan dan langkah-langkah di atas, bisa di lihat melalui link saya http://holotekno.hol.es/ setelah mengHosting Web yang telah kita buat untuk di publikasikan.

Kelompok :

Reza Wisnu Wardhana (57413521)
Dini Razana Hanifa (52413583)
Muhammad Wildan Willy (55413551)

Link Web : http://holotekno.hol.es/