Membuat Web Sederhana

Pada postingan sebelumnya saya telah menjelaskan pengertian tentang  Web. Nah pada kesempatan kali ini saya akan menjelaskan bagaimana Membuat Web Secara Sederhana.  Banyak cara yang dapat digunakan untuk membuat sebuah web. Misalnya saja dengan menggunakan Joomla, aplikasi online (Wix), mengedit Template yang sudah ada dan masih banyak lagi. Tetapi pada kesempatan kali ini saya akan membuatnya dengan  menggunakan Adobe Photoshop dan Dreamweaver. Mengapa saya menggunakan aplikasi ini, karena kita akan membuat Web yang dimana desainnya akan sesuai dengan keinginan kita. Pada pembuatan web pertama ini saya membuat tema Gothic, sebenernya setelah selasai  mengerjakannya saya sempat bingung untuk mengisi web ini dengan apa. Tetapi akhirnya saya memutuskan isinya bertemakan Band Rock Indonesia.

Sebelum kita memulai tutorial cara membuat website sederhana dengan menggunakan photoshop dan dreamweaver ini, tentunya terlebih dahulu anda harus menginstal aplikasi Photoshop dan Dreamweaver.

Membuat Desain Menggunakan Photoshop (Adobe Photoshop CS5)

Disini saya tidak akan menjelaskan bagaimana cara membuat desainnya, karena saya pikir anda sudah cukup mengerti akan hal ini. Intinya adalah buatlah tampilan halaman yang anda ingini.  Misalnya seperti ini.

Selanjutnya yaitu dengan memotong-motong bagian atau slice web sesuai dengan kebutuhan. Pilih View -> Rulers untuk menampilkannya. Lalu tarik garis dari rulers tersebut ke bagian yang ingin dipotong. Kemudian klik Slice From Guides Bisa dilihat seperti dibawah ini.

Setelah itu pilih File -> Save For Web and Devices. Akan muncul popup. Kemudian pilih Save, pilih Folder tempat untuk menyimpan hasilnya, beri nama file (Index) dan pada bagian Format pilih HTML dan Image.

Sampai sini design untuk layout dengan menggunakan photoshop sudah selesai dan selanjutnya anda tinggal melakukan modifikasi atas file index.html yang telah kita save tadi dengan Dreamweaver.

Memodifikasi HTML dengan Dreamweaver (Adobe Dreamweaver CS5)

Langsung saja jalankan aplikasi Dreamweavernya. Kemudian buka file Index yang kita buat tadi. Pada tampilan awal kita akan melihat isi secara Design. Tetapi anda dapat menambahkan beberapa kode HTML, CSS atau lainnya pada web dengan memilih Show Code View.

 

Selanjutnya jika kita ingin menambahkan background kita dapat melakukannya dengan memilih Page Properties pada bagian bawah layar. Kemudian pada bagian Backgroung Image pilih background gambar yang ingin digunakan. Maka hasilnya akan seperti ini. 

 

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 Profil.html pada folder yang sama, save as lagi dengan nama file Artikel.html, save as lagi dengan nama file Download.html dan yang terakhir Contact.html. Sehingga kini anda memiliki 5 (lima) 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, Profil, Artikel, Download dan Contact. 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 klik kanan pada mouse, pilih make link ,  seperti dapat dilihat pada gambar dibawah.

Lakukan hal yang sama pada yang lainnya. Dan sekarang website yang kita inginkan kita sudah jadi.

Note : Maaf jika hasilnya kurang memuaskan, misalnya saja terdapat garis putih pada template. Hal ini disebabkan karena kesalahan pada waktu Slice. Disini saya masih pemula, jadi kita sama-sama dalam proses belajar. Semoga tulisan ini bermanfaat.