Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



2. CONTOH DESIGN ATAU TEMPLATE
December 28, 2009
Posted by: Fauzie


Dibawah ini ialah contoh design atau template yang akan kita bina. Objektif kita ialah membina satu template yang menggunakan XHTML, CSS dan juga memasukkan beberapa image.


Sebagai permulaan, kita hendaklah mengenalpasti struktur elemen (structural element) design ini. Tujuannya ialah untuk memudahkan kita mengstruktur dokumen HTML. Jika diperhatikan, semua web layout berlandaskan kotak atau rectangle dan dibina dengan tag <div> dan dalam tag <div> inilah kita akan meletakkan kod-kod CSS.

Untuk contoh dalam tutorial ini 4 elemen telah dikenalpasti:

Header
Di mana image atau nama syarikat/nama web diletakkan.
Lebar (width): 450px
Tinggi (height): 150px

Bahagian Navigation
Lebar (width): 450px
Tinggi (height): 50px

Isi atau Content
Ini ialah bahagian dimana isi website diletakkan
Lebar (width): 450px
Tinggi (height): Bergantung kepada jumlah isi yang dimuatkan

Footer
Mengandungi maklumat seperti copyright, penghargaan dan lain-lain
Lebar (width): 450px
Tinggi (height): 66px

Site ini akan diletakkan di bahagian tengah browser (centered).

Sekarang kita telah pun mempunyai maklumat ringkas berhubung dengan template yang akan kita bina.