Panduan Membuat Layout Minisite

 

Panduan membuat layout minisite menggunakan Adobe Photoshop dan KompoZer.

Adobe Photoshop boleh didownload di sini https://creative.adobe.com/products/download/photoshop

KompoZer boleh didownload di sini http://www.kompozer.net/download.php

 

Langkah-langkahnya:

  1. Buat satu New image menggunakan photoshop. Width dan Height image boleh ditentukan mengikut kehendak anda sendiri. Untuk contoh ini, image bersaiz 700px x 700px digunakan.

 

  1. Langkah kedua ialah mereka design minisite tersebut. Skip.

 

  1. Ini adalah contoh design yang telah siap:

 

  1. Langkah seterusnya ialah menggunakan Slice Tool untuk membahagikan design tersebut kepada beberapa bahagian yang membolehkan ia berfungsi sebagai minisite. Gambar di bawah menunjukkan di mana Slice Tool itu berada.

 

  1. Gunakan Slice Tool untuk membahagikan design itu kepada 3 bahagian, iaitu Header, Content, dan Footer seperti gambar di bawah:

 

  1. Kemudian savekan sliced image tersebut menggunakan fungsi Save for Web. Ini akan menghasilkan satu file .html yang telah siap sedia disusun menggunakan design tersebut.

 

  1. Dan tekan save. Nak ubah apa-apa pun boleh. Terpulang kepada anda.

 

  1. Buka file .html itu dengan KompoZer. Anda akan dapat melihat kotak-kotak merah yang membezakan bahagian Header, Content dan Footer.

 

  1. Untuk permulaan, tukar mode kepada Source editing dengan menekan butang Source di bahagian bawah.

 

  1. Tambahkan kod html <center></center> seperti yang ditunjukkan oleh anak panah oren dalam gambar di bawah, iaitu sebelum <table dan selepas </table>. Ini akan menjadikan design layout tersebut berada di tengah-tengah page. Cuba tekan butang Preview atau Normal untuk melihat perbezaannya.

 

  1. Langkah seterusnya ialah mengubah warna background. Klik pada menu Format > Page Colors and Background seperti gambar di bawah:

 

  1. Untuk mengubah warna background, tukarkan hex code seperti yang ditunjukkan oleh anak panah oren dalam gambar di bawah kepada warna yang bersesuaian dengan design anda. Color Detector boleh digunakan untuk mendapatkan hex code. Lebih mudah kalau anda menggunakan warna putih (#FFFFFF) atau warna hitam (#000000) sebagai background. Gambar juga boleh digunakan sebagai background.

 

  1. Langkah ketiga belas ialah mengubah bahagian Content untuk menjadikan ia boleh ditulis. Perhatikan gambar di bawah. Bahagian Content tidak dapat diisi dengan apa-apa tulisan kerana ia telah diisi oleh imej. Gerakkan mouse cursor anda ke bahagian Content untuk melihat nama imej tersebut. Hafal nama imej tersebut dengan menyebutnya beberapa kali sehingga anda benar-benar ingat.

 

  1. Tukar mode kepada Source editing. Cari bahagian yang menunjukkan nama imej bahagian Content tadi, seperti yang ditunjukkan dalam gambar berikut:

 

  1. Kemudian buat langkah berikut. Buang kod html ini
    <td><img src="images/Untitled-1_01_02.jpg" alt="" height="368" width="700"></td>
    seperti yang ditunjukkan dalam gambar di atas, dan gantikan dengan kod html seperti yang ditunjukkan dalam gambar di bawah
    <td background="images/Untitled-1_01_02.jpg" style="padding: 20px 40px;" align="left" valign="top">Tulisan di sini</td>
    Untitled-1_01_02.jpg adalah nama imej bahagian Content, jadi ubah kod html itu mengikut kesesuaian anda. Padding adalah jarak antara tulisan dengan pinggiran bahagian Content. Padding yang pertama (20px) adalah untuk bahagian atas dan bawah ruang Content, dan padding yang kedua (40px) adalah untuk bahagian kiri dan kanan ruang Content. Jadi anda boleh mengubah padding mengikut kesesuaian design.

    Sebab menggunakan Source editing untuk bahagian ini adalah kerana fungsi memasukkan gambar sebagai background kepada table cell dalam KompoZer tidak dijumpai. Ada tak sesiapa yang tahu?

    Perhatikan juga bahagian yang bertanda hijau dalam gambar di bawah. Ini akan digunakan dalam langkah seterusnya.

 

  1. Tukar mode kepada Normal editing. Perhatikan apa yang berlaku:

 

  1. Langkah seterusnya, sila right click di mana-mana ruang kosong di dalam kotak merah bahagian Header, dan bukan pada imej Header tersebut. Pilih menu Table Cell Properties.

 

  1. Masukkan ukuran pixel Height bahagian Header seperti yang ditunjukkan dalam gambar di bawah. Ukuran tersebut diambil daripada bahagian bertanda hijau dalam gambar di langkah ke 15 sebelum ini. Bagaimana untuk membezakan yang mana antara dua ukuran tersebut adalah untuk Header atau Footer? Jawapannya, bahagian Header berada di atas. Kemudian tekan OK.

 

  1. Ulangi langkah 17-18 untuk menetapkan saiz bahagian Footer. Hasilnya akan kelihatan seperti gambar di bawah. Contoh yang akan terpapar di browser anda boleh dilihat di sini

 

  1. Dan anda boleh mula menulis di tempat yang terpapar 'Tulisan di sini'.

 

Selamat berjaya.