tugas pw 20 dreamweaver cs3

5105 100 123 RENDRA SIRAJUL MUNIR 5106 100 002 ANDHIKA PANJI NUGRAHA

5106 100 174 SUGAR RAY VEREL M

Chapter 20 – Macromedia Dreamweaver CS3

20.1 Pendahuluan

• Dreamaweaver merupakan salah satu software dari dari Adobe yang banyak diguakan untuk mendesain situs web

• Dreamaweaver sendiri adalah sebuah HTML editor profesional yang berfungsi mendesain secara visual dan mengelola situs web maupun halaman web

20.2 Macromedia Dreamweaver CS3

• Common berisi tombol untuk membuat dan memasukan data, misal gambar dan tabel

• Layout berisi tombol untuk memasukan tabel, div tags dan spray widgets

• Forms berisi tombol untuk membuat form• Data memudahkan penggunaan Spray• Spry terdiri atas tomlo-tombol untuk membuat halaman web• Text untuk menambah dan modifikasi teks• Favorites mengelompokan elemen insert bar• Server code

20.2 Macromedia Dreamweaver CS3

20.2 Macromedia Dreamweaver CS3

Mengenal Panel Properties• panel properties digunakan untuk melihat dan

merubah berbagai properti objek dan teks yang dipilih

• Setiap objek memiliki properti yang berbeda – properti tabel– properti text– properti image

20.2 Macromedia Dreamweaver CS3

20.2 Macromedia Dreamweaver CS3

20.2 Macromedia Dreamweaver CS3

20.2 Macromedia Dreamweaver CS3

Toolbar codinguntuk membantu melakukan operasi pengkodean

20.2 Macromedia Dreamweaver CS3

Toolbar Style Renderingterdiri atas tombol yang berguna untuk melihat tampilan desain halaman web yang dibuatView -> Toolbars -> Style Rendreing

20.2 Macromedia Dreamweaver CS3

20.2 Macromedia Dreamweaver CS3

• Tabel berfungsi untuk mempermudah memodifikasi situs web

• Cara membuat table– siapkan file baru– Klik insert table pada insert bar atau klik

Insert -> Table– Selanjutnya akan muncul kotak dialog

Tabble seperti pada gambar berikut

20.3 Tabel

20.3 Tabel

Mengatur nilai properti tabelRows menentukan jumlah barisColumns menentukan jumlah kolomWidth menentukan ukuran lebar tabel dan satuan yang

akan dipakai, pixil atau persentaseBorder untuk mengatur ketebalan border atau garis

bingkaiCell Padding untuk mengatur jarak antara isi cell denan

batas tepi cell Cell Spacing untuk menentukan jarak antar cell pada

tabel

20.3 Tabel

Bagian header : berfungsi memberiketerangan teks pada bagian tabel denganpilihan yang tersediaNone tanpa menggunakan keterangan teksLeft menampilkan keterangan teks pada sebelah

kiriTop menampilkan keterangan teks pada sebelah

atasBoth menampilkan keterangan teks pada kolom

dan bari pertama

20.3 Tabel

Bagian Accessbility : memberikanketerangan judul tabel

Bagian property inspector : mengatur danmemodifikasi border

20.3 Tabel

• Memudahkan bekomunikasi didalam dunia web• Mengumpulkan informasi dari pengunjung• Form datap terdiri atas beberapa objek yang

disusun menjadi model• Beberapa objek yang ada dalam form antara lain

:text field, list box, check bok, menu pop-up, field password, image field, button dan radio button

20.4 Form

Menyisipkan form• Aktifkan tabulasi form pada insert bar• Klik tombol Form atau Insert ->Form• Tampil objek form dengan garis putus-

putus• Bagian property Inspector akan

menampilkan properti form sebagai berikut

20.4 Form

Form name : memberi nama formAction :menentukan lokasi atau path file yang akan di

gunakan untuk memproses formMethod : untuk menentukan metode pengiriman data

form ada 31. Default : sesuai seting defaulf browser2. GET.: Data form akan ditambahkan pada URL request3. POST : data form akan di simpan pada HTTP request

Target : menentukan frame yang menjadi tempat menampilkan target hyperlink

20.4 Form

Menyisipkan Text Field- Saranan memasukan tek ke form- Berfungsi menampung informasi,misal

alamat, e-mail dsb- Langkah-langkah menyisipkan Text Field

• Aktifkan pointer mouse di form yang sudah disediakan• Pilih menu Insert -> Form ->Text Field

- Property Inspector menampilkan properti Text Field seperti pada gambar berikut

20.4 Form

TextField : mengisi namaChar Widht : menentukan maksimum jumlah

karakter yang ditampilkanMax Chars : menentukan panjang mak

karakterInit val : mengisikan nilai default pada kotak

teks

20.4 Form

Menyisipkan Hidden FieldLankah:• Insert-> Form->Hidden Field atau tekan• Property Inspector akan menampilkan properti hiden

field

20.4 Form

3. Isikan nama pada HiddenField, dan isikan juga nilai pada Value

Menyisipkan CheckboxBerfungsi untuk membuat satu pilihan ataulebih bagi pengunjung dari informasi yangdisediakanCara : Insert > Form > Checkbok atau klik - Property inspector akan menmpilkan properti

Checkbok yang dapat diatur sesuai kebutuhan, berikut tampilan properti Checkbok

20.4 Form

CheckBox name : memberi nama, jika ada beberapa CheckBox pemberian nama cukup satu

Checked value : untuk memberi sebuah nilai pada saat Checbok terpilih, pemberian nilai berdasarkan informasi yang dibuat

Initia State : untuk menentukan apakah Checkbok secara default sudah terpilih atau belum

20.4 Form

Menyisipkan Radio Button- Fungsi sama dengan CheckBox yaitu

membuat daftar pilihan namun hanya dapat memilih satu pilihan

- Insert>Form>Radio Button atau klik - Properti radio button dapat di atur pada

Property Inspector berikut

20.4 Form

Menyisipkan Radio Group- Kumpulan dari beberapa Radio Button- Langkah Insert>Form>Radio Group

atau klik - Maka akan tampil kotak dialog

20.4 Form

Menyisipkan Radio Group- Name : isikan nama untuk Radio Group- Isi label dan value- (+) untuk menambah Radio button- (-) untuk menghapus daftar yang tidak dipakai- Line Breaks : untuk menempatkan Radio

Button pada baris baru di setiap Radio Button- Table : untuk menempatkan Radio Button

pada sebuah tabel

20.4 Form

Menyisipkan List/menu- Menampilkan pilihan dalam bentuk list- Insert>Form>List/Menu atau klik- Pada property List/Menu, pilih salah satu List

atau Menu

20.4 Form

Menyisipkan List/menu- Pemberian nama tidak boleh sama dengan nama

objek lainya- Tentukan jumlah baris yang akan ditampilkan pada

kotak teks Height- Selections: pengunjung dapat memilih pilihanlebih

dari satu, jika kotak centang Selections tidak aktif maka pilihan hanya satu

- List value : menambah atau mengurangi isi list- Item label : mengisikan item- (+) tambah item- (-) menghapus item- Item akan muncul pada Initialy Selected

20.4 Form

Menyisipkan File Field- Tampilan File Field

- Digunakan untuk meng-upload file ke server cont: file dokumen, file gambar dsb

- Insert>Form>File Field atau klik - Kemudian aturlah propertinya

20.4 Form

Menyisipkan Button- Tombol yang dapat digunakan melakukan

proses tertentu misal submit atau reset- Submit : mengrim data yang dimasukan ke

form yang selanjutnya akan diolah oleh server- Reset : me-reset data yang ada didalam form

ke nilai semula- Insert>Form>Button atau Klik- Atur sesuai kebutuhan dan pilih Action submit

atau reset

20.4 Form

20.4 Form

Contoh desain form feedback

• Adding JavaScript to a Web page– Window > Behaviors

• Select element• Click + button• Select action

20.5 Scripting in Dreamweaver

20.5 Scripting in Dreamweaver

Behaviors panel and add behaviors menu.

• Other supported languages– ASP– ColdFusion– PHP– JSP– Also found in Window menu

20.5 Scripting in Dreamweaver