Tutorial Membuat Web Sederhana (beserta source code + cara hosting)

Posted by : Vaiolin 6 Mei 2015

Itu adalah contoh web sederhana yang dibuat menggunakan Adobe Photoshop dan Dreamweaver.
Bagaimana cara membuatnya???

1. Buat design layout web di Photoshop dengan ukuran layer 750x600 Pixels, contoh seperti berikut.

2. Kemudian pilih header dan footer dari layout yang sudah kita buat tadi, menggunakan tool “Rectangular Marquee Tool atau shortcut M”, contohnya seperti berikut.

Kemudian klik menu Edit > pilih “Copy Merged”, lalu buat layer baru File > New / Ctrl + N > OK.

Lalu paste header atau footer tadi ke layer baru tersebut, kemudian Save dengan format header.jpg atau footer.jpg

3. Langkah selanjutnya adalah mengambil background menu atas (Home, Gallery, dan About) dan menu bawah/biru (Content, Link Partner, atau info).

Cara nya sama seperti langkah kedua, namun saat di save pilih File > Save For Web > Save… (hasilnya ber format .GIF)

Jika langkah kedua dan ketiga selesai, letakkan keempat file dalam 1 folder, seperti ini.

4. Selanjutnya adalah membuat koding html dan css dengan menggunakan Dreamweaver.

Pertama kita buat kodingan di style.css (untuk membuat layout seperti design awal). Kira-kira kodingan nya seperti ini.

style.css

Selanjutnya membuat koding index.html atau tampilan awal dari web.

index.html

Untuk koding isi dari menu lain, seperti isi dari menu Gallery atau About, cukup mengganti koding pada <div id=”isi”>. <div id=”bg_menu”> untuk mengganti judul dan <div id=”content_menu”> untuk mengganti isi/konten.

5. Langkah terakhir adalah hosting web kita. Berikut adalah tutorial hosting di idhostinger.com