makmal 3: html/xhtml menggunakan adcs3 2 · kedudukan table header 1 tp2543 –adobe dreamweaver...
TRANSCRIPT
TP2543 – ADOBE DREAMWEAVER CS3
Makmal 3: HTML/XHTML menggunakan ADCS3 2
Jadual (Table) HTML/XHTML
1. Jadual boleh dicipta untuk tujuan paparan data atau sebagai asas untuk rekaletak dokumen HTML/XHTML. Jadual dicipta dengan menggunakan tag asas <table>…</table>.
2. Jadual boleh dimasukkan ke dalam dokumen menggunakan fungsi dalam ADCS3: a. Pilih Insert > Table
b. Setkan tetapan pada tetingkap Table (rujuk tambahan untuk elemen Jadual)
Lajur dan baris jadualLebar jadual
Tebal border jadual
Padding dan Spacing
Kedudukan Table Header
1
TP2543 – ADOBE DREAMWEAVER CS3
c. Untuk menambah/menggabung/memadam sel Jadual, tandakan sel, klik kanan dan pilih Table>
3. Selepas Jadual dihasilkan, atribut boleh diubah dengan cara menanda keseluruhan jadual dan mengubah nilai yang terdapat pada panel Properties:
e d
b a
c a. Warna dan ketebalan border Jadual b. Warna latar Jadual c. Fungsi untuk meletakkan imej sebagai latar Jadual d. Lebar Jadual serta nilai Cellpadding dan Cellspacing e. Jajaran Jadual dalam dokumen
4. Untuk mengubah atribut sel, tandakan sel, kemudian ubah atribut pada panel Properties:
c d a b
2
TP2543 – ADOBE DREAMWEAVER CS3
a. Warna dan ketebalan border sel b. Warna latar sel c. Fungsi untuk meletakkan imej sebagai latar sel d. Jajaran horizontal dan vertikal untuk objek/teks di dalam sel
Tambahan
Atribut untuk satu Jadual HTML/XHTML:
Sumber imej: Adobe Education –Adobe Web Tech Curriculum (http://www.adobe.com/education/instruction/webtech/CS2/unit_site_dev2/tab_components.htm)
Kod HTML/XHTML yang dijana untuk satu Jadual:
3
TP2543 – ADOBE DREAMWEAVER CS3
Jadual HTML/XHTML boleh digunakan sebagai asas rekaletak laman web seperti contoh di bawah:
4
TP2543 – ADOBE DREAMWEAVER CS3
Borang (Form) HTML/XHTML
1. Borang dicipta untuk mendapatkan input daripada pengguna dan menghantar data ke pelayan (server). Borang HTML/XHTML menggunakan tag asas <form>…</form>.
2. Terdapat beberapa elemen input yang utama yang boleh diletakkan pada satu borang dan boleh
dicipta menggunakan tag <input>: a. Ruang teks (Text fields) b. Checkboxes c. Radio buttons d. Submit buttons
3. Gambar dibawah menunjukkan satu contoh borang HTML/XHTML. Item 4, 5 dan 6 akan menerangkan langkah untuk membina borang ini.
4. Untuk mencipta ruang teks pada borang: a. Pilih Tab Form pada Insert Bar
5
TP2543 – ADOBE DREAMWEAVER CS3
b. Klik pada butang Form [a] dan satu kotak merah akan dipaparkan pada Design View dokumen [b] menandakan ruang di antara tag form. Elemen‐elemen perlu dimasukkan didalam kotak merah yang ditandakan.
a
b
c. Cipta tajuk borang [a], dan kemudian label item pertama [b]. Kemudian klik butang Text Field [c] untuk mencipta satu ruang teks. Tetingkap Input Tag Accessibility Attributes akan dipaparkan [d].
c
a
b
d
d. Pada Tetingkap Input Tag Accessibility Attributes, masukkan ID ruang teks (contohnya: “input_nama”). ID ini digunakan untuk menghantar data ke server‐side scripting (atau JavaScript). Label dibiarkan kosong memandangkan label ruang teks sudah dibuat secara manual. Untuk Style, pilih “No label tag” kerana tiada label dibuat.
6
TP2543 – ADOBE DREAMWEAVER CS3
e. Ruang teks akan dicipta dalam borang. Sekiranya ditanda, panel Properties akan memaparkan ID ruang teks [a], lebar ruang teks [b], jumlah maksimum aksara [c] dan jenis ruang teks [d].
b a d
c
f. Ulangi langkah a‐e untuk mencipta ruang teks kedua (No KP)
5. Untuk mencipta radio buttons pada borang, gunakan elemen Radio Group. : a. Radio Group adalah beberapa Radio Button yang dijadikan dalam satu kumpulan. Ini
membolehkan pilihan dibuat hanya pada salah satu Radio Button dalam kumpulan tersebut.
b. Pada Tab Form di Insert Bar, klik pada Radio Group [a] setelah menanda kedudukan radio buttons yang mahu dicipta pada dokumen [b]. Tetingkap Radio Group akan dipaparkan [c].
a
c
b
7
TP2543 – ADOBE DREAMWEAVER CS3
c. Masukkan data mengikut keperluan Radio Buttons.
Fungsi untuk menambah pilihan
Nama Radio GroupFungsi susunan
pilihan
Senarai pilihan
Pilihan rekaletak dengan tag <br> atau jadual
d. Radio buttons akan dipaparkan pada borang.
6. Akhir sekali, untuk mencipta butang pada borang, gunakan elemen input Button: a. Pada Tab Form di Insert Bar, klik pada Button [a] setelah menanda kedudukan butang
yang mahu dicipta pada dokumen [b]. Tetingkap Input Tag Accessibility Attributes akan dipaparkan [c].
a
b c
8
TP2543 – ADOBE DREAMWEAVER CS3
b. Pada Tetingkap Input Tag Accessibility Attributes, masukkan ID butang (contohnya: “butang_submit”). Label dibiarkan kosong dan pilih “No label tag”.
c. Butang akan dipaparkan pada dokumen [a]. Sekiranya butang ditanda, panel Properties akan memaparkan nama butang [b], label teks pada butang [c] dan jenis serta fungsi butang [d]. Butang “Submit” adalah untuk menghantar data, “Reset” untuk set semua nilai‐nilai di dalam borang dan “None” untuk interaktiviti lain.
a
b
c d
d. Ulangi langkah sama untuk mencipta butang Reset. Pilih “Reset Form” untuk Action pada panel Properties.
9