F3026 – WEB AUTHORING 1 1.1 Pengenalan kepada World Wide Web (WWW) 1.2 Rekabentuk laman web 1.3 Jenis-jenis penyunting HTML (HTML editors) 1.4 Pelayan Web * Klik pada tajuk untuk keterangan selanjutnya* PENGENALAN PENGENALAN KEPADA LAMAN WEB KEPADA LAMAN WEB
30
Embed
PENGENALAN KEPADA LAMAN WEB - projek.nurlianamusa.netprojek.nurlianamusa.net/SAP4B/LA1/LNP1.1 - f30261.pdf1.1 Pengenalan kepada World Wide Web (WWW) 1.2 Rekabentuk laman web ... sebagai
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
F3026 – WEB AUTHORING 1
1.1 Pengenalan kepada World Wide Web (WWW)
1.2 Rekabentuk laman web
1.3 Jenis-jenis penyunting HTML (HTML editors)
1.4 Pelayan Web
* Klik pada tajuk untuk keterangan selanjutnya*
PENGENALANPENGENALAN KEPADA LAMAN WEBKEPADA LAMAN WEB
F3026 – WEB AUTHORING 2
Objektif
• Memperkenalkan sejarah World Wide Web (WWW) dan
istilah-istilah yang berkaitan dengan World Wide Web.
• Memberi panduan dalam merekabentuk laman web yang baik.
• Mendedahkan kepada para pelajar elemen-elemen rekabentuk
laman web yang baik.
• Memperkenalkan kepada para pelajar ciri-ciri bentuk laman
peribadi, semasa, komersil dan hiburan.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 3
WORLD WIDE WEB WORLD WIDE WEB
(WWW)(WWW)
Di kenali
sebagai WEB,
WWW atau W3
1 rangkaian sejagat
dan maya yang
dihubungkan melalui
sistem pautan
Menggunakan
internet
sebagai alat
hubungan
Dicipta pada tahun 1989
di institut penyelidikan
CERN- The European
Laboratary for Particle
Physics
Bergantung
kepada pelayar
web dan http
Pelayar web
pertama
yang popular
ialah Mosaic
Kebanyakan
dokumen web
dibangunkan
menggunakan
HTML
Satu medium
komersil
1.1 Pengenalan Kepada World Wide Web
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 4
Istilah :
Beberapa istilah atau konsep yang berkaitan dengan World Wide Web (WWW):
Tapak web (web site): Satu set halaman yang dihubungkan antara satu sama lain.
Laman web (web page): Dokumen elektronik yang mempunyai kombinasi teks,
bunyi dan grafik.
Home page: Halaman permulaan laman web dimana pelawat memulakan pencarian
di tapak web tersebut.
Hyperlink: Pautan diantara perkataan atau grafik di pelayar web yang aktif yang
memaparkan laman web kepada fail lain di World Wide Web.
Pemetaan imej (image map): Grafik yang mempunyai lebih daripada satu pautan.
Pelayar web (web browsers): pelanggan perumah (hosted clients) seperti
NetScape, Mosaic, dan lain-lain, yang membaca fail
yang dibangunkan dengan menggunakan HTML dan
memaparkan halaman yang interaktif kepada
pengguna.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 5
1.2 Rekabentuk Laman Web
1.2.1 Elemen-elemen rekabentuk halaman web yang baik
Elemen-elemen yang
perlu dipertimbang
dalam merekabentuk
halaman web yang baik
ElemenElemen--elemenelemen yang yang
perluperlu dipertimbangdipertimbang
dalamdalam merekabentukmerekabentuk
halamanhalaman web yang web yang baikbaik
Warna Stail
Grafik
Saiz halamanNavigasi
Teks
Kekonsistenan
*Klik pada perkataan untuk penerangan selanjutnya*
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 6
WarnaWarna
Penggunaan warna yang salah akan memusnahkan rekabentuk laman web.
Gunakan warna putih atau pastel untuk latarbelakang.
Warna teks mesti berlawanan dengan warna latarbelakang.
Bezakan warna pautan untuk membezakan pautan yang telah dilawati atau
belum.
Jenis-jenis pautan : belum dilawati, telah dilawati dan pautan yang aktif.
Contoh :- biru tua untuk pautan yang belum dilawati, ungu untuk
pautan yang sudah dilawati dan merah untuk pautan
yang aktif.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 7
TeksTeks
Atribut yang boleh ditambah pada teks : tebal, condong, bergaris dan
berkelip.
Teks yang ditebalkan – untuk memberi penekanan kepada teks.
Teks yang berkelip – menunjukkan amaran atau kesalahan.
Tulisan dan saiz tulisan penting kepada rekabentuk. Gunakan tag di
dalam HTML untuk setkan tulisan dan saiznya.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 8
StailStail
Terdapat 3 generasi dalam merekabentuk stail laman web :
1. Halaman generasi yang pertama.
2. Halaman generasi yang kedua.
3. Halaman Generasi yang ketiga.
*Klik pada jenis generasi untuk penerangan selanjutnya*
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 9
1. Halaman generasi yang pertama
Linear.
Turutan teks dan imej dari atas-ke-bawah,
kiri-ke-kanan diasingkan dengan tanda
kembali dan pemisah aliran data.
Mempunyai headline banner dan tersusun.
Direkabentuk oleh orang-orang teknikal.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 10
2. Halaman generasi kedua
Ciri-ciri sama seperti halaman generasi
pertama tetapi ikon menggantikan perkataan.
Imej menggantikan latarbelakang kelabu.
Terdapat butang dengan beveled edge.
Banner menggantikan tajuk utama.
Menggunakan model atas_bawah, senarai
bullet dan model berpandukan menu untuk
mempersembahkan maklumat secara berhieraki
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 11
3. Halaman generasi yang ketiga
Kombinasi typografi dan susunatur secara
visual yang kreatif.
Gunakan tema visual untuk menarik perhatian
serta sebagai panduan kepada pengguna.
Cenderung menjadikan tapak yang ramah-
pengguna dan mudah dikemudikan, isi kandungan
yang berkualiti serta nilai pengeluaran yang tinggi.
Direkabentuk oleh beberapa orang dalam kumpulan.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 12
SaizSaiz halamanhalaman
Pastikan halaman pendek.
Panjang halaman yang dicadangkan kurang dua muatan-skrin di mana
terdapat pautan di halaman pertama dan terakhir.
Grafik tidak melebihi 30K bagi memudahkan proses muatan.
Dimensi Halaman Cetakan Paparan
Kelebaran Maksimum 535 piksel 595 piksel
Ketinggian Masimum (satu skrin) 295 piksel 295 piksel
Dimensi Halaman
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 13
GrafikGrafik
Grafik dikurangkan kerana ia akan mengganggu perhatian pengguna dan
memperlahankan proses navigasi.
Majoriti grafik di web dalam format GIF atau JPEG.
Fail GIF untuk imej bergambarajah bagi ikon dan animasi.
Fail JPEG untuk imej yang besar dan kompleks.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 14
KonsistensiKonsistensi
Gunakan pendekatan yang konsisten untuk susunatur, latarbelakang, dan
rekabentuk supaya pengguna dapat menyesuaikan diri dengan rekabentuk
anda.
Rekabentuk, grafik dan latarbelakang yang bercampur aduk akan
memperlahankan masa pindah turun serta mengelirukan pelawat tapak anda.
Contoh rekabentuk susunan yang konsisten
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 15
NavigasiNavigasi
Sediakan alat navigasi seperti butang, secara konsisten di lokasi yang
sama di keseluruhan laman web.
Butang navigasi perlulah jelas dan logik.
Setiap halaman mesti mempunyai pautan untuk kembali ke halaman
pertama atau ke mana-mana titik navigasi di dalam tapak web.
Pengenalan Kepada Laman Web
F3026 – WEB AUTHORING 16
1.2.1 Soalan yang perlu diambil kira semasa membentuk laman web