Tugas Pw 20 Dreamweaver Cs3
-
Upload
sugar-ray -
Category
Technology
-
view
1.944 -
download
1
description
Transcript of 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 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
20.2 Macromedia Dreamweaver CS3
• Tabel berfungsi untuk mempermudah memodifikasi situs web
• Cara membuat table1. siapkan file baru
2. Klik insert table pada insert bar atau klik Insert -> Table
3. 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 : 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
1. Aktifkan tabulasi form pada insert bar
2. Klik tombol Form atau Insert ->Form
3. Tampil objek form dengan garis putus-putus
4. 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
1. Aktifkan pointer mouse di form yang sudah disediakan
2. 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 FieldLankah:1. Insert-> Form->Hidden Field atau tekan2. 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