�ݺ�ߣ

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

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

Toolbar coding untuk membantu melakukan operasi pengkodean 20.2 Macromedia Dreamweaver CS3

Toolbar Style Rendering terdiri atas tombol yang berguna untuk melihat tampilan desain halaman web yang dibuat View -> Toolbars -> Style Rendreing 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

Mengatur nilai properti tabel Rows menentukan jumlah baris Columns menentukan jumlah kolom Width menentukan ukuran lebar tabel dan satuan yang akan dipakai, pixil atau persentase Border untuk mengatur ketebalan border atau garis bingkai Cell 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 memberi keterangan teks pada bagian tabel dengan pilihan yang tersedia None tanpa menggunakan keterangan teks Left menampilkan keterangan teks pada sebelah kiri Top menampilkan keterangan teks pada sebelah atas Both menampilkan keterangan teks pada kolom dan bari pertama 20.3 Tabel

Bagian Accessbility : memberikan keterangan judul tabel Bagian property inspector : mengatur dan memodifikasi 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 form Action :menentukan lokasi atau path file yang akan di gunakan untuk memproses form Method : untuk menentukan metode pengiriman data form ada 3 Default : sesuai seting defaulf browser GET.: Data form akan ditambahkan pada URL request 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 nama Char Widht : menentukan maksimum jumlah karakter yang ditampilkan Max Chars : menentukan panjang mak karakter Init val : mengisikan nilai default pada kotak teks 20.4 Form

Menyisipkan Hidden Field Lankah: 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 Checkbox Berfungsi untuk membuat satu pilihan atau lebih bagi pengunjung dari informasi yang disediakan Cara : 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

�ݺ�ߣ

Tugas Pw 20 Dreamweaver Cs3

Convert to study guideBETA

More Related Content

Tugas Pw 20 Dreamweaver Cs3