TUTORIAL
MEMBUAT WEB SEDERHANA
1. Buat design layout web di Photoshop
dengan ukuran layer 750x600 Pixels, contoh seperti berikut.
2. Kemudian pilih header dan footer
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.
Selanjutnya membuat koding index.html atau
tampilan awal dari web.
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
a) daftar akun di idhostinger.com
b) kemudian login dan order hosting baru
c) pilih paket hosting yang gratis
d) lalu masukkan data-data nya
e) jika sudah aktif pilih kelola
f) kemudian pilih, File Manajer 1 atau File
Manajer 2
Pilih salah satu, kemudian install. Jika
sudah selesai lalu akses file manager
g) kemudian upload semua file yang sudah
kita buat
Nah jika sudah, buka alamat web yang sudah
kita hosting tadi. Berikut ini adalah contoh file yang sudah di upload.
NAMA KELOMPOK 2IA12 :
EMYLIAH (52413901)
HAIRUL MUMININ OKTAVALIN (53413845)
KAMALUDIN (54413756)
*ALAMAT LINK DARI WEBSITE*
http://webnt.esy.es/
