STEP-BY STEP MEMBUAT TOKO ONLINE
Assalamualaikum Wr. Wb..
Bersamaan dengan pengalaman saya yang lalu, ketika saya diminta untuk membuat website toko online
agar perusahaannya dapat dipublikasikan di internet, saya akan membagi sedikit
pengalaman dan sedikit pengetahuan sekedar menambah pengetahuan anda apalagi
bagi anda yang masih ragu-ragu dan belum
berani untuk membuat website sendiri dikarnakan merasa belum bisa samasekali
atau awam dalam pembuatan website. Dengan mengikuti tutorial yang akan saya
sampaikan insyaAllah anda akan mulai berani dan mencoba untuk membuat website
anda sendiri, karna cara membuat web ternyata tidak sesulit yang kita
bayangkan, untuk pengembangannya anda bisa belajar lebih lanjut dari
master-master web yang sudah berpengalaman dan professional yang bisa anda cari
di internet. Baiklah cukup dengan basa-basinya, sekarang kita akan mulai
membuat website secara bertahap dari awal sampai akhir dan website siap untuk
dipublikasikan.
STEP I : Membuat gambar tampilan web dengan Adobe Photoshop
CS kenapa? Karna dengan merancang tampilan dengan photoshop, halaman web kita
akan lebih menarik dan terlihat cantik seperti bidadari, eh maap g nyambung y,
hehe.. bcanda dikit boleh kan?!.. OK serius lagi y.
1.
Persiapkan software-software yang diperlukan
contohnya seperti yang saya gunakan software Adobe Photoshop CS, Macromedia
Dreamweaver 8, dan software pendukung lainnya yang akan diperlukan nanti
setelah web jadi dan siap dipublikasikan (akan saya bahas nanti pada pembahasan
akhir). Untuk software-software tersebut anda bisa download disini (Adobe
Photoshop CS) dan disini (Macromedia Dreamweaver).
2.
Buka Adobe Photoshop, lalu pilih menu NEW dan
masukan nama file, ukuran dan type background
3.
Buatlah
gambar tampilan yang akan dijadikan template pada halaman web anda
nanti, tampilan bebas sesuai dengan yang anda inginkan (pembahasan tutorial
membuat gambar pada photoshop bisa dibaca pada artikel
TUTORIAL & TRIK PHOTOSHOP).
4.
Buat slice pada gambar yang telah jadi dengan
memilih gambar icon bentuk pisau pada taskbar sebelah kiri supaya nanti pas di
save gambar terbagi menjadi potongan-potongan gambar sesuai dengan slice yang
kita buat.
5.
Pilih menu SAVE FOR WEB…
6.
Lalu klik tombol SAVE (simpan dengan nama
TEMPLATE1 pada folder tempat proyek anda misalnya saya buat folder baru dengan
nama proyek toko.
7.
Selesai, gambar calon template web anda telah
siap.
8.
STEP II : Sekarang kita akan mulai membuat halaman web
dengan bantuan software Dreamweaver agar pembuatan halaman web menjadi lebih
mudah, karna anda tidak perlu repot-repot membuat kode HTML dan untuk
mempersingkat waktu. OK, kita mulai pembahasan step kedua
1.
Buka Dreamweaver 8
2.
Pilih menu open buka folder proyek toko (disana
otomatis akan ada file html dengan nama TEMPLATE1) , pilih dan klik open, maka
akan tampil seperti dibawah ini.
3.
Kita tentukan mana bagian-bagian yang akan
dijadikan template dan mana yang akan dijadikan tempat konten atau isi yang
akan berubah pada setiap halamannya, contohnya pada bagian menu dan header atau
logo perusahaan yang terdapat di bagian atas yang akan dijadikan template,
karena bagian-bagian itu akan selalu ditampilkan pada semua halaman. Pada
bagian tengah akan kita jadikan bagian isi untuk meletakan konten-konten yang
nantinya berisi segala macam yang akan kita ungkapkan mulai dari promosi,
gallery foto-foto barang, halaman pesan dan lain0lain.
4.
Klik kanan pada bagian tengah tersebut pilih
TEMPLATE -> NEW EDITABLE REGION.
5.
Setelah itu simpan dengan format template, pilih
menu FILE -> SAVE AS TEMPLATE.
6.
Template sudah jadi dan siap digunakan pada
setiap halaman, file template tadi extensionnya berubah jadi .DWT (template1.dwt)
1.
Pilih menu NEW -> TEMPLATE
2.
Klik tombol CREATE
3.
Masukan apa yang akan anda tampilkan pada daerah
yang bisa di edit pada kotak EditRegion1, dan kotak EditRegion4
4.
Halaman pertama sudah jadi, lalu anda simpan
dengan nama index.html.
5.
Selanjutnya buat halaman baru untuk menu
“tentang” dengan cara yang sama, terus edit dan simpan dengan nama
tentang_kami.html
6.
Buka kembali file template1.dwt lalu klik pada
gambar menu tentang lalu pada tab properties
yang terdapat di bawah layar, masukan file tentang_kami.html html (atau anda
bisa juga dengan cara memilih file tentang_kami.html dengan memilih tombol
“browse” sebelah kanan kotak teks link).
7.
Simpan template
8.
Untuk melihat hasilnya, buka kembali file index.html
lalu pilih menu FILE -> PREVIEW IN BROWSER -> pilih browser , atau anda
bisa juga klik gambar bola dunia untuk preview halaman dan akan ditampilkan
pada browser default computer anda.
9.
Setelah halaman index.html tampil pada browser,
coba anda klik menu tentang maka akan tampil halaman tentang_kami.html yang
telah kita buat.
10.
STEP III selesai, dan sekian dulu pembahasannya
nanti akan dilanjutkan kembali untuk STEP selanjutnya.
Wassalam..
