STEP BY STEP MEMBUAT TOKO ONLINE

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)

STEP III  : Mulai membuat halaman utama yang akan jadi halaman awal website kita, atau biasa disebut Home page :

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..