Laman web jualan adalah jenis rekaan laman web yang biasa digunakan untuk menyampaikan penjualan produk yang bersifat tunggal. Seperti jika anda ingin menjual produk-produk digital seperti ebuku, perisian, atau skrip, laman web jualan adalah yang paling sesuai untuk melakukannya.

Laman web jualan juga kalau anda kenal memiliki beberapa nama lain dalam bahasa inggeris terutamanya seperti minisite dan landing page. Ia adalah benda yang sama. Dan kadang kala pula Minisite akan direka dalam bentuk LEBIH mini lagi yang dipanggil sebagai Squeeze Page.

Squeeze page pula adalah laman web mini yang bertujuan untuk mengumpulkan mailing list sahaja. So, dah berkenalan dengan laman web jualan? Jom kita teruskan sesi tutorial kita pada hari ini iaitu bagaimana caranya untuk membentuk design asas laman web jualan. Tanpa rekaan pada bahagian Header & Footer.

Buka canvas baru 800 x 600

01 Buka canvas baru dengan saiz 800 x 600 pixel.

02 Dengan menggunakan Rounded Rectangle Tool, tetapkan Radius >> 20 pixel dan buat bentuk seperti di atas. Lakukan sehingga ke hujung setiap bucu. Pilih warna putih iaitu #FFF.

Warnakan latar belakang #C2C2C2

03 Beralih kepada warna latar belakang, tetapkan warna pada kod #C2C2C2. Klik kekunci Shift + F5 untuk mengaktifkan tetingkap ini.

Jadi, warna latar belakang kita sudahpun bertukar kepada kelabu tahi ayam~

Kesan khas pada layer body

04 Enter Blending Options bagi Shape 1 (body minisite). Lakukan tetapan untuknya seperti di bawah.

Dan hasilnya setelah anda klik butan OK adalah…

Wow.. mudahnya! Dah nampak body untuk minisite anda? Hohoooo… panjang lagi ni.

Membina header laman web jualan

05 Aktifkan Rectangular Marquee Tool.

06 Selepas memilih bentuk segi empat tepat dari bucu atas kiri ke bawah (ikut kesukaan anda) bahagian kanan canvas, buat 1 layer baru (layer 1).

07 warnakan pilihan anda dengan warna kelabu yang lebih gelap lagi #333333. Klik kekunci Shift + F5 untuk aktifkan tetingkap ini.

Hasilnya setelah warna kelabu diaplikasikan.

08 Klik kekunci Alt dan tanpa melepaskannya, klik pada garisan di antara Layer 1 dengan Shape 1. Hasilnya apabila anda klik, Layer 1 akan dimasukkan ke dalam Shape 1 dengan ikon berbentuk anak panah ke bawah.

Hasilnya seperti ini… Bahagian tepinya cantik sama saiz dengan bentuk luaran design Shape 1.

Kesan khas pada layer header

Enter Blending Options Layer 1 (Header). Aplikasikan Layer Style di bawah padanya.

Dan hasilnya…

Header anda kelihatan lebih menarik dengan warna gradient yang berton.

Membina layer footer laman web jualan

09 Duplicate Layer 1 (header) dengan klik kekunci Alt dan tarik Layer 1 ke bawah.

10 Resize Layer 1 copy agar menjadi lebih kecil dengan klik kekunci Ctrl + T (Free Transform) dan masukkan nilai 50% (sebelum ini 100%) pada bahagian High (H).

Hasilnya seperti di atas. Saiznya akan berkurangan kepada setengah daripada ketinggian asal. Ini akan kita gunakan sebagai Footer! Pastikan Layer 1 copy ini juga blend masuk ke dalam Shape 1 (ada ikon anak panah pada layer tersebut)

Adjust kedudukan footer ke bahagian bawah dan voila! Hasilnya body yang hampir siap! Minisite ringkas anda.

Membina layer Navigation Bar

11 Beralih kepada komponen seterusnya iaitu Navigation Bar. Nav bar ini adalah berfungsi menempatkan link-link asas laman web jualan anda seperti Home, Affiliates, Contact Us dan bermacam-macam lagi.

12 Dengan menggunakan Rectangular Marquee Tool, bina satu pilihan Marquee di bawah header kelabu. Pastikan width / lebarnya betul-betul sama seperti lebar Shape 1 (body keseluruhan).

Warnakan pilihan dengan warna kelabu #C2C2C2 (Shift + F5).

Memberi kesan khas pada Nav bar

Hasilnya, satu garisan tebal berwarna kelabu wujud. Seterusnya, berikan kesan khas Layer Style pada Nav bar ini seperti di bawah.

Selesai, klik OK. dan lihat hasilnya.

13 Kecilkan sedikit saiz lebarnya dengan klik Ctrl + T (Free Transform) dan ubah peratus saiz lebar kepada 98% (daripada 100%).

Adjust kedudukan rekaan navigation bar ke bawah sedikit dan betul-betul di bawah header. Voila sekali lagi! Inilah hasilnya~

Boleh tambahkan tulisan sebagai guideline. Saya masukkan beberapa pautan supaya anda dapat lihat dengan jelas, apakah fungsi nav bar ini.

Hide layer tulisan ini semula untuk meneruskan tutorial kita. Klik ikon mata layer tersebut.

Memotong canvas design anda

14 Aktifkan Slice Tool untuk memulakan proses MEMOTONG! "Anda dah potong?"

15 Ringkasnya, saya potong seperti di atas. Drag sahaja cursor anda dari penjuru ke penjuru. Cuba banyak kali dan ia akan menghasilkan potongan seperti di atas.

Garisan ini mungkin nampak kecil dan tak berfungsi, tetapi jika anda menyimpan imej ini dalam format untuk kegunaan WEB, maka anda akan melihat hasilnya bagaimana ia memainkan peranan yang sangat besar.

Menyimpan imej untuk kegunaan web

16 Simpan dalam bentuk web dengan memilih menu >> File >> Save for Webs & Devices (Alt + Ctrl + Shift + S) untuk mengaktifkannya.

Ingat, hanya dengan cara ini sahaja, anda dapat melakukan pemotongan menggunakan slice tool. Cara simpanan imej lain akan menyebabkan imej disimpan kepingan yang besar.

17 Sesi tutorial kali ini, saya memilih untuk menyimpan dalam format HTML and images dan menamakannya sebagai minisite.html.

Komponen utama laman web jualan

Saya savekan dalam folder minisite di bahagian desktop. Ikut pilihan anda di mana anda ingin menyimpannya. Klik 2 kali pada folder tersebut untuk melihat hasilnya.

Anda akan mendapati satu fail format .html dengan nama minisite (kerana saya memilih nama ini) dan 1 folder lagi dinamakan images. Yang menyimpan potongan-potongan imej kita tadi.

Mengubahsuai fail HTML design

18 Buka fail minisite.html menggunakan perisian Adobe Dreamweaver CS4 atau jika tiada, anda boleh menggunakan mana-mana perisian pengubahsuai HTML dan PHP lain samada percuma atau berbayar.

Tempatkan body laman web jualan ‘center’

Pilih keseluruhan table design anda.

19 Pada bahagian tab di bawahmya terdapat satu fungsi yang membolehkan anda menempatkannya di bahagian tengah design. Tatapkan Align >> Center.

Klik pada ikon preview seperti di atas. Dan pilih browser pilihan anda yang mana satu ingin ia dipaparkan.

Voila! Inilah hasilnya. Namun kelihatan sedikit cacat kerana sepatutnya latar belakang kita dalah warna kelabu dan bukannya PUTIH #FFF.

Menukar warna backcround keseluruhan

20 Klik pada Page Properties di dalam Dreamweaver CS4 anda dan tetapkan Background Color >> #C2C2C2. Warna kelabu yang telah kita pilih sejak awal tadi.

Sekali lagi, Refresh sahaja browser anda untuk melihat hasilnya.

Inilah hasilnya… Tahniah! Tahniah! Hee…

Dan untuk langkah terakhir, mari kita belek-belek apa yang ada di dalam folder Images. Seperti di dalam imej di atas, saya telah memotongnya kepada 4 bahagian sebelum ini bukan. Maka inilah hasilnya.

minisite_01 >> header, minisite_02 >> Nav bar, minisite_03 >> body, minisite_04 >> footer. Cheers!

Selamat berjumpa lagi dalam sesi tutorial seterusnya. Anda bakal dipaparkan dengan teknik ringkas bagaimana untuk mereka grafik header anda dengan begitu mantap sekali!