TP2543 - ADOBE DREAMWEAVER CS3

Makmal 1: Perisian Adobe Dreamweaver CS3

Pengenalan kepada Adobe Dreamweaver CS3

1. Adobe Dreamweaver CS3 (ADCS3) adalah satu aplikasi pembangunan web. Dahulunya ADCS3 dikenali sebagai Macromedia Dreamweaver sebelum Adobe mengambilalih syarikat Macromedia.

2. Versi AD terkini ialah CS5 (April 2010)

3. ADCS3 menyokong penggunaan teknologi web termasuklah: a. HTML/XHTML b. XML/XSLT c. Cascading Style Sheet (CSS) d. JavaScript (serta fungsi Behaviour) e. PHP/VB/ASP/ColdFusion

Untuk mematikan fungsi paparan ini, aktifkan checkbox “Don’t show again” di sebelah bawah kiri. Untuk memaparkannya semula, pilih Edit>Preferences pada Menu, pilih General dan kemudian aktifkan “Show Welcome Screen”.

1

TP2543 - ADOBE DREAMWEAVER CS3

Persekitaran Antaramuka ADCS3

1. Elemen-elemen pada antaramuka ADCS3: a. Menu Bar – fungsi arahan asas perisian b. Insert Bar – menambah elemen pada dokumen c. Document Toolbar – mod dan fungsi paparan dokumen d. Panels – pelbagai panel (Files, CSS, Application dll.) e. Properties Inspector – untuk edit atribut elemen pada dokumen f. Document Window – ruang utama yang menempatkan dokumen

a b

d

c

f

Untuk menutup atau memapar panel/toolbar, pilih Window>[nama panel/toolbar] pada Menu Bar.

e

2. ADCS3 berorientasikan WYSIWYG (what you see is what you get) hibrid untuk 3 jenis View yang boleh dipilih pada Document Toolbar:

a. Code View – paparan kod dokumen b. Design View – paparan dokumen seperti dalam pelayar c. Gabungan Code + Design View

a b c

3. Untuk menset semula Panel dan Tetingkap seperti asal, pilih pada Menu Bar item Window > Workspace Layout dan pilih jenis susunan yang dimahukan (Coder/Designer/Dual Screen).

2

TP2543 - ADOBE DREAMWEAVER CS3

Pengurusan Tapak Web (Site Management) dalam ADCS3

1. Untuk memulakan satu projek laman web, ADCS3 menyediakan fungsi untuk mencipta tapak web yang akan menempatkan kesemua fail-fail web seperti HTML, imej, multimedia, skrip seperti JavaScript, templat dan lain-lain. Ini memudahkan fail diurus/dipindahkan.

2. Untuk mereka tapak web baru, gunakan fungsi Site pada Menu Bar: a. Pilih Site dan kemudian New Site…

b. Isikan maklumat pada window Site Definition. i. Name – isikan nama tapak web

ii. HTTP Address – URL tapak web sekiranya ada

c. Pilih aplikasi atau teknologi pelayan (server technology) sekiranya perlu.

Sekiranya pelayan web menyokong teknologi seperti PHP atau ASP, anda boleh memasukkan maklumat tersebut di sini.

3

TP2543 - ADOBE DREAMWEAVER CS3

d. Pilih lokasi tapak web akan diwujudkan dalam komputer (atau pilihan untuk edit fail terus daripada pelayan web).

e. Pilih mod untuk berhubung dengan pelayan web, sekiranya perlu. Jika tiada, pilih None.

f. Sekiranya semua maklumat adalah betul pada Summary, klik butang Done.

g. Tapak web yang baru dibangunkan boleh dilihat menggunakan fungsi Site>Manage Sites… pada Menu Bar.

Untuk menukar atribut tapak web, klik pada butang Edit… Untuk memadam tapak web, gunakan butang Remove.

4

TP2543 - ADOBE DREAMWEAVER CS3

h. Senarai fail-fail (sekiranya ada) dalam tapak web boleh dilihat pada Panel Files.

Cipta, Simpan, Previu dan Padam Fail di ADCS3

1. Dokumen HTML/XHTML boleh dicipta, diedit, disimpan dan dipreviu di ADCS3. Dokumen akan disimpan di dalam folder site yang telah dicipta.

2. Untuk mencipta dan menyimpan fail HTML/XHTML baru: a. Pilih File > New… pada Menu Bar.

b. Pada tetingkap New Document, pilih Blank Page dan Page Type: HTML untuk membuat fail HTML baru.

c. Pada dokumen baru yang dipaparkan pada Document Window [a] dan Title [b], taipkan teks seperti dibawah.

b

Tanda bintang (asterisk) pada tab nama fail menandakan fail belum disimpan (save).

a

5

TP2543 - ADOBE DREAMWEAVER CS3

d. Simpan fail HTML yang telah diedit dengan memilih File > Save

e. Masukkan nama fail pada tetingkap Save As (contoh: cuba1)

f. Fail yang telah disimpan dipaparkan di Panel Files

3. Untuk previu fail HTML/XHTML pada pelayar web, tekan F12 atau klik pada butang Preview/Debug in Browser pada Document Toolbar dan pilih opsyen Pelayar Web:

Gunakan pilihan Edit Browser List… untuk menambah aplikasi pelayar web atau mengubah susunan pelayar sedia ada.

6

TP2543 - ADOBE DREAMWEAVER CS3

4. Untuk memadam/menghapus fail yang telah dicipta, tandakan fail pada Panel Files dan tekan kekunci Delete. ADCS3 akan mengeluarkan tetingkap amaran untuk mengesahkan operasi menghapus fail, dan pilih Yes untuk menghapuskan fail.

5. Fail-fail di dalam site boleh juga dialih (cut), dipadam (delete), disalin (copy), diberi nama baru (rename), diduplikasi (duplicate) dengan menanda dan mengklik kanan pada fail, dan pilih Edit.

7

TP2543 - ADOBE DREAMWEAVER CS3

8

Senarai Pautan Berkaitan [ADCS3]

1. Adobe Livedocs untuk ADCS3 - http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html 2. Tutorial 1 - http://www.vineyardesigns.com/resources/dreamweaver/ 3. Tutorial 2 - http://www.thesitewizard.com/gettingstarted/dreamweaver1.shtml

[HTML]

1. Tutorial interaktif HTML W3Schools - http://www.w3schools.com/html/default.asp