TP2543 – ADOBE DREAMWEAVER CS3

Makmal 4: Rekaletak CSS dengan ADCS3 

Rekaletak Web  

1. Rekaletak web ditentukan oleh faktor seperti jenis kandungan, komposisi kandungan, hierarki dan kategori kandungan, pengguna sasaran dan lain‐lain. Rekaletak boleh dirancang dengan mudah dengan membuat lakaran asas bahagian pada laman web yang akan dibangunkan: 

           

 

Rekaletak web juga boleh diperolehi  atau  diedit  menggunakan  templat CSS  yang  boleh  dimuat  turun daripada Internet. 

2. Lakaran atau fail imej screen capture laman web yang lain boleh dijadikan panduan untuk mereka rekaletak web menggunakan fungsi Tracing Image: 

a. Klik kanan pada dokumen dan pilih Page Properties…         

b. Pilih Tracing Image daripada Category. Muatnaik fail imej menggunakan fungsi upload pada tetingkap, dan pilih nilai transparency yang sesuai.   

     Imej  yang  digunakan  hanya 

dipaparkan dalam ADCS3 dan  tidak pada hasil akhir dokumen web. 

    

1

   TP2543 – ADOBE DREAMWEAVER CS3

Apa itu CSS?  

1. CSS (Cascading Style Sheet) ialah tag arahan untuk menentukan format dan gaya teks, objek dan rekaletak satu dokumen web.  

2. CSS memudahkan pembangunan dan penstailan dokumen web dengan cara: a. Menjimatkan masa pembangunan – satu fail CSS boleh dihubungkan pada banyak fail 

HTML/XHTML, dan sebarang perubahan yang dibuat pada fail CSS akan diaplikasi kepada semua fail 

b. CSS memudahkan dokumen diedit – Pemisahan antara kandungan dan persembahan/rekaan memudahkan proses pengeditan 

c. Meningkatkan kelajuan muat‐turun dokumen  

3. Namun, CSS memerlukan pengetahuan pengaturcaraan. Di samping itu, pengaturcaraan CSS untuk hasil yang seragam pada pelbagai jenis pelayar web memerlukan kemahiran.  

4. Rekaletak CSS boleh dibangunkan sendiri atau menggunakan templat percuma CSS yang boleh dimuat turun daripada internet secara percuma.  

Rekaletak CSS dalam ADCS3  

1. Kaedah mudah untuk mencipta dokumen dengan rekaletak CSS dalam ADCS3 ialah dengan menggunakan rekaletak sedia ada. Apabila dokumen baru dicipta di ADCS3 menggunakan pilihan New… pada Menu Bar, terdapat banyak pilihan Layout yang boleh digunakan [a]. Pastikan pilihan “Create New File” dipilih pada Layout CSS untuk memudahkan kerja pengeditan [b].                   

a 

b 

    

2

   TP2543 – ADOBE DREAMWEAVER CS3

2. Untuk mengedit satu halaman yang direka menggunakan layout CSS sedia ada dalam ADCS3: a. Pada panel Properties, klik pada butang CSS [a]. Atribut CSS akan dipaparkan pada panel 

CSS. Pada bahagian [b], butang Current memaparkan atribut tag yang ditanda, manakala butang All memaparkan keseluruhan atribut CSS dokumen.                         

b 

a 

b. Untuk menukar warna atau saiz teks Main Content dalam dokumen misalnya, tandakan teks pada dokumen [a]. Kemudian pilih Current untuk melihat atribut CSS untuk bahagian yang dipilih [b]                

b 

a 

    

3

  

    

TP2543 – ADOBE DREAMWEAVER CS3

c. Klik pada ikon Pensel di panel CSS untuk mengedit teks [a]. Tetingkap CSS Rule Definition akan dipaparkan [b]. Atribut CSS boleh diubah pada tetingkap ini: jenis font, saiz, stail, warna, dekorasi dan lain‐lain.                        

b 

a 

d. Pilihan Background daripada Category membolehkan atribut lain diedit seperti warna latar, imej latar, manipulasi imej latar untuk ulangan, kedudukan dan scrolling effect.   

 

 

4