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