5105 100 123 RENDRA SIRAJUL MUNIR  5106 100 002 ANDHIKA PANJI NUGRAHA  5106 100 174 SUGAR RAY VEREL M  Chapter 20 – Macrom...
20.1 Pendahuluan  <ul><li>Dreamaweaver merupakan salah satu software dari dari Adobe yang banyak diguakan untuk mendesain ...
20.2 Macromedia Dreamweaver CS3
<ul><li>Common  berisi tombol untuk membuat dan memasukan data, misal gambar dan tabel </li></ul><ul><li>Layout  berisi to...
20.2 Macromedia Dreamweaver CS3
<ul><li>Mengenal Panel Properties </li></ul><ul><li>panel properties digunakan untuk melihat dan merubah berbagai properti...
20.2 Macromedia Dreamweaver CS3
20.2 Macromedia Dreamweaver CS3
20.2 Macromedia Dreamweaver CS3
<ul><li>Toolbar coding </li></ul><ul><li>untuk membantu melakukan operasi pengkodean </li></ul>20.2 Macromedia Dreamweaver...
<ul><li>Toolbar Style Rendering </li></ul><ul><li>terdiri atas tombol yang berguna untuk melihat tampilan desain halaman w...
20.2 Macromedia Dreamweaver CS3
<ul><li>Tabel berfungsi untuk mempermudah memodifikasi situs web </li></ul><ul><li>Cara membuat table </li></ul><ul><ul><l...
20.3 Tabel
<ul><li>Mengatur nilai properti tabel </li></ul><ul><ul><li>Rows  menentukan jumlah baris </li></ul></ul><ul><ul><li>Colum...
<ul><li>Bagian header  : berfungsi memberi </li></ul><ul><li>keterangan teks pada bagian tabel dengan </li></ul><ul><li>pi...
<ul><li>Bagian Accessbility  : memberikan </li></ul><ul><li>keterangan judul tabel </li></ul><ul><li>Bagian property inspe...
<ul><li>Memudahkan bekomunikasi didalam dunia web </li></ul><ul><li>Mengumpulkan informasi dari pengunjung </li></ul><ul><...
<ul><li>Menyisipkan form </li></ul><ul><li>Aktifkan tabulasi form pada insert bar </li></ul><ul><li>Klik tombol  Form  ata...
<ul><li>Form name  : memberi nama form </li></ul><ul><li>Action  :menentukan lokasi atau path file yang akan di gunakan un...
<ul><li>Menyisipkan  Text Field </li></ul><ul><li>Saranan memasukan tek ke  form </li></ul><ul><li>Berfungsi menampung inf...
<ul><li>TextField  : mengisi nama </li></ul><ul><li>Char Widht  : menentukan maksimum jumlah karakter yang ditampilkan </l...
<ul><li>Menyisipkan  Hidden Field </li></ul><ul><li>Lankah: </li></ul><ul><li>Insert-> Form->Hidden Field  atau tekan </li...
<ul><li>Menyisipkan  Checkbox </li></ul><ul><li>Berfungsi untuk membuat satu pilihan atau </li></ul><ul><li>lebih bagi pen...
<ul><li>CheckBox name  : memberi nama, jika ada beberapa CheckBox pemberian nama cukup satu </li></ul><ul><li>Checked valu...
<ul><li>Menyisipkan  Radio Button </li></ul><ul><li>Fungsi sama dengan CheckBox yaitu membuat daftar pilihan namun hanya d...
<ul><li>Menyisipkan  Radio Group </li></ul><ul><li>Kumpulan dari beberapa Radio Button </li></ul><ul><li>Langkah  Insert>F...
<ul><li>Menyisipkan  Radio Group </li></ul><ul><li>Name  : isikan nama untuk Radio Group </li></ul><ul><li>Isi label dan v...
<ul><li>Menyisipkan  List/menu </li></ul><ul><li>Menampilkan pilihan dalam bentuk list </li></ul><ul><li>Insert>Form>List/...
<ul><li>Menyisipkan  List/menu </li></ul><ul><li>Pemberian nama tidak boleh sama dengan nama objek lainya </li></ul><ul><l...
<ul><li>Menyisipkan  File Field </li></ul><ul><li>Tampilan File Field </li></ul><ul><li>Digunakan untuk meng-upload file k...
<ul><li>Menyisipkan  Button </li></ul><ul><li>Tombol yang dapat digunakan melakukan proses tertentu misal  submit  atau  r...
20.4 Form Contoh desain form feedback
<ul><li>Adding JavaScript to a Web page </li></ul><ul><ul><li>Window > Behaviors </li></ul></ul><ul><ul><ul><li>Select ele...
20.5 Scripting in Dreamweaver Behaviors  panel and  add behaviors  menu.
<ul><li>Other supported languages </li></ul><ul><ul><li>ASP </li></ul></ul><ul><ul><li>ColdFusion </li></ul></ul><ul><ul><...
Upcoming SlideShare
Loading in …5
×

Tugas Pw 20 Dreamweaver Cs3

2,373 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,373
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
81
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tugas Pw 20 Dreamweaver Cs3

  1. 1. 5105 100 123 RENDRA SIRAJUL MUNIR 5106 100 002 ANDHIKA PANJI NUGRAHA 5106 100 174 SUGAR RAY VEREL M Chapter 20 – Macromedia Dreamweaver CS3
  2. 2. 20.1 Pendahuluan <ul><li>Dreamaweaver merupakan salah satu software dari dari Adobe yang banyak diguakan untuk mendesain situs web </li></ul><ul><li>Dreamaweaver sendiri adalah sebuah HTML editor profesional yang berfungsi mendesain secara visual dan mengelola situs web maupun halaman web </li></ul>
  3. 3. 20.2 Macromedia Dreamweaver CS3
  4. 4. <ul><li>Common berisi tombol untuk membuat dan memasukan data, misal gambar dan tabel </li></ul><ul><li>Layout berisi tombol untuk memasukan tabel, div tags dan spray widgets </li></ul><ul><li>Forms berisi tombol untuk membuat form </li></ul><ul><li>Data memudahkan penggunaan Spray </li></ul><ul><li>Spry terdiri atas tomlo-tombol untuk membuat halaman web </li></ul><ul><li>Text untuk menambah dan modifikasi teks </li></ul><ul><li>Favorites mengelompokan elemen insert bar </li></ul><ul><li>Server code </li></ul>20.2 Macromedia Dreamweaver CS3
  5. 5. 20.2 Macromedia Dreamweaver CS3
  6. 6. <ul><li>Mengenal Panel Properties </li></ul><ul><li>panel properties digunakan untuk melihat dan merubah berbagai properti objek dan teks yang dipilih </li></ul><ul><li>Setiap objek memiliki properti yang berbeda </li></ul><ul><ul><ul><li>properti tabel </li></ul></ul></ul><ul><ul><ul><li>properti text </li></ul></ul></ul><ul><ul><ul><li>properti image </li></ul></ul></ul>20.2 Macromedia Dreamweaver CS3
  7. 7. 20.2 Macromedia Dreamweaver CS3
  8. 8. 20.2 Macromedia Dreamweaver CS3
  9. 9. 20.2 Macromedia Dreamweaver CS3
  10. 10. <ul><li>Toolbar coding </li></ul><ul><li>untuk membantu melakukan operasi pengkodean </li></ul>20.2 Macromedia Dreamweaver CS3
  11. 11. <ul><li>Toolbar Style Rendering </li></ul><ul><li>terdiri atas tombol yang berguna untuk melihat tampilan desain halaman web yang dibuat </li></ul><ul><li>View -> Toolbars -> Style Rendreing </li></ul>20.2 Macromedia Dreamweaver CS3
  12. 12. 20.2 Macromedia Dreamweaver CS3
  13. 13. <ul><li>Tabel berfungsi untuk mempermudah memodifikasi situs web </li></ul><ul><li>Cara membuat table </li></ul><ul><ul><li>siapkan file baru </li></ul></ul><ul><ul><li>Klik insert table pada insert bar atau klik Insert -> Table </li></ul></ul><ul><ul><li>Selanjutnya akan muncul kotak dialog Tabble seperti pada gambar berikut </li></ul></ul>20.3 Tabel
  14. 14. 20.3 Tabel
  15. 15. <ul><li>Mengatur nilai properti tabel </li></ul><ul><ul><li>Rows menentukan jumlah baris </li></ul></ul><ul><ul><li>Columns menentukan jumlah kolom </li></ul></ul><ul><ul><li>Width menentukan ukuran lebar tabel dan satuan yang akan dipakai, pixil atau persentase </li></ul></ul><ul><ul><li>Border untuk mengatur ketebalan border atau garis bingkai </li></ul></ul><ul><ul><li>Cell Padding untuk mengatur jarak antara isi cell denan batas tepi cell </li></ul></ul><ul><ul><li>Cell Spacing untuk menentukan jarak antar cell pada tabel </li></ul></ul>20.3 Tabel
  16. 16. <ul><li>Bagian header : berfungsi memberi </li></ul><ul><li>keterangan teks pada bagian tabel dengan </li></ul><ul><li>pilihan yang tersedia </li></ul><ul><li>None tanpa menggunakan keterangan teks </li></ul><ul><li>Left menampilkan keterangan teks pada sebelah kiri </li></ul><ul><li>Top menampilkan keterangan teks pada sebelah atas </li></ul><ul><li>Both menampilkan keterangan teks pada kolom dan bari pertama </li></ul>20.3 Tabel
  17. 17. <ul><li>Bagian Accessbility : memberikan </li></ul><ul><li>keterangan judul tabel </li></ul><ul><li>Bagian property inspector : mengatur dan </li></ul><ul><li>memodifikasi border </li></ul>20.3 Tabel
  18. 18. <ul><li>Memudahkan bekomunikasi didalam dunia web </li></ul><ul><li>Mengumpulkan informasi dari pengunjung </li></ul><ul><li>Form datap terdiri atas beberapa objek yang disusun menjadi model </li></ul><ul><li>Beberapa objek yang ada dalam form antara lain : </li></ul><ul><li>text field, list box, check bok, menu pop-up, field password, image field, button dan radio button </li></ul>20.4 Form
  19. 19. <ul><li>Menyisipkan form </li></ul><ul><li>Aktifkan tabulasi form pada insert bar </li></ul><ul><li>Klik tombol Form atau Insert ->Form </li></ul><ul><li>Tampil objek form dengan garis putus-putus </li></ul><ul><li>Bagian property Inspector akan menampilkan properti form sebagai berikut </li></ul>20.4 Form
  20. 20. <ul><li>Form name : memberi nama form </li></ul><ul><li>Action :menentukan lokasi atau path file yang akan di gunakan untuk memproses form </li></ul><ul><li>Method : untuk menentukan metode pengiriman data form ada 3 </li></ul><ul><ul><ul><li>Default : sesuai seting defaulf browser </li></ul></ul></ul><ul><ul><ul><li>GET.: Data form akan ditambahkan pada URL request </li></ul></ul></ul><ul><ul><ul><li>POST : data form akan di simpan pada HTTP request </li></ul></ul></ul><ul><li>Target : menentukan frame yang menjadi tempat menampilkan target hyperlink </li></ul>20.4 Form
  21. 21. <ul><li>Menyisipkan Text Field </li></ul><ul><li>Saranan memasukan tek ke form </li></ul><ul><li>Berfungsi menampung informasi,misal alamat, e-mail dsb </li></ul><ul><li>Langkah-langkah menyisipkan Text Field </li></ul><ul><ul><ul><li>Aktifkan pointer mouse di form yang sudah disediakan </li></ul></ul></ul><ul><ul><ul><li>Pilih menu Insert -> Form ->Text Field </li></ul></ul></ul><ul><li>- Property Inspector menampilkan properti Text Field seperti pada gambar berikut </li></ul>20.4 Form
  22. 22. <ul><li>TextField : mengisi nama </li></ul><ul><li>Char Widht : menentukan maksimum jumlah karakter yang ditampilkan </li></ul><ul><li>Max Chars : menentukan panjang mak karakter </li></ul><ul><li>Init val : mengisikan nilai default pada kotak teks </li></ul>20.4 Form
  23. 23. <ul><li>Menyisipkan Hidden Field </li></ul><ul><li>Lankah: </li></ul><ul><li>Insert-> Form->Hidden Field atau tekan </li></ul><ul><li>Property Inspector akan menampilkan properti hiden field </li></ul>20.4 Form 3. Isikan nama pada HiddenField, dan isikan juga nilai pada Value
  24. 24. <ul><li>Menyisipkan Checkbox </li></ul><ul><li>Berfungsi untuk membuat satu pilihan atau </li></ul><ul><li>lebih bagi pengunjung dari informasi yang </li></ul><ul><li>disediakan </li></ul><ul><li>Cara : Insert > Form > Checkbok atau klik </li></ul><ul><li>- Property inspector akan menmpilkan properti Checkbok yang dapat diatur sesuai kebutuhan, berikut tampilan properti Checkbok </li></ul>20.4 Form
  25. 25. <ul><li>CheckBox name : memberi nama, jika ada beberapa CheckBox pemberian nama cukup satu </li></ul><ul><li>Checked value : untuk memberi sebuah nilai pada saat Checbok terpilih, pemberian nilai berdasarkan informasi yang dibuat </li></ul><ul><li>Initia State : untuk menentukan apakah Checkbok secara default sudah terpilih atau belum </li></ul>20.4 Form
  26. 26. <ul><li>Menyisipkan Radio Button </li></ul><ul><li>Fungsi sama dengan CheckBox yaitu membuat daftar pilihan namun hanya dapat memilih satu pilihan </li></ul><ul><li>Insert>Form>Radio Button atau klik </li></ul><ul><li>Properti radio button dapat di atur pada Property Inspector berikut </li></ul>20.4 Form
  27. 27. <ul><li>Menyisipkan Radio Group </li></ul><ul><li>Kumpulan dari beberapa Radio Button </li></ul><ul><li>Langkah Insert>Form>Radio Group atau klik </li></ul><ul><li>Maka akan tampil kotak dialog </li></ul>20.4 Form
  28. 28. <ul><li>Menyisipkan Radio Group </li></ul><ul><li>Name : isikan nama untuk Radio Group </li></ul><ul><li>Isi label dan value </li></ul><ul><li>(+) untuk menambah Radio button </li></ul><ul><li>(-) untuk menghapus daftar yang tidak dipakai </li></ul><ul><li>Line Breaks : untuk menempatkan Radio Button pada baris baru di setiap Radio Button </li></ul><ul><li>Table : untuk menempatkan Radio Button pada sebuah tabel </li></ul>20.4 Form
  29. 29. <ul><li>Menyisipkan List/menu </li></ul><ul><li>Menampilkan pilihan dalam bentuk list </li></ul><ul><li>Insert>Form>List/Menu atau klik </li></ul><ul><li>Pada property List/Menu, pilih salah satu List atau Menu </li></ul>20.4 Form
  30. 30. <ul><li>Menyisipkan List/menu </li></ul><ul><li>Pemberian nama tidak boleh sama dengan nama objek lainya </li></ul><ul><li>Tentukan jumlah baris yang akan ditampilkan pada kotak teks Height </li></ul><ul><li>Selections : pengunjung dapat memilih pilihanlebih dari satu, jika kotak centang Selections tidak aktif maka pilihan hanya satu </li></ul><ul><li>List value : menambah atau mengurangi isi list </li></ul><ul><li>Item label : mengisikan item </li></ul><ul><li>(+) tambah item </li></ul><ul><li>(-) menghapus item </li></ul><ul><li>Item akan muncul pada Initialy Selected </li></ul>20.4 Form
  31. 31. <ul><li>Menyisipkan File Field </li></ul><ul><li>Tampilan File Field </li></ul><ul><li>Digunakan untuk meng-upload file ke server cont: file dokumen, file gambar dsb </li></ul><ul><li>Insert>Form>File Field atau klik </li></ul><ul><li>Kemudian aturlah propertinya </li></ul>20.4 Form
  32. 32. <ul><li>Menyisipkan Button </li></ul><ul><li>Tombol yang dapat digunakan melakukan proses tertentu misal submit atau reset </li></ul><ul><li>Submit : mengrim data yang dimasukan ke form yang selanjutnya akan diolah oleh server </li></ul><ul><li>Reset : me-reset data yang ada didalam form ke nilai semula </li></ul><ul><li>Insert>Form>Button atau Klik </li></ul><ul><li>Atur sesuai kebutuhan dan pilih Action submit atau reset </li></ul>20.4 Form
  33. 33. 20.4 Form Contoh desain form feedback
  34. 34. <ul><li>Adding JavaScript to a Web page </li></ul><ul><ul><li>Window > Behaviors </li></ul></ul><ul><ul><ul><li>Select element </li></ul></ul></ul><ul><ul><ul><li>Click + button </li></ul></ul></ul><ul><ul><ul><li>Select action </li></ul></ul></ul>20.5 Scripting in Dreamweaver
  35. 35. 20.5 Scripting in Dreamweaver Behaviors panel and add behaviors menu.
  36. 36. <ul><li>Other supported languages </li></ul><ul><ul><li>ASP </li></ul></ul><ul><ul><li>ColdFusion </li></ul></ul><ul><ul><li>PHP </li></ul></ul><ul><ul><li>JSP </li></ul></ul><ul><ul><li>Also found in Window menu </li></ul></ul>20.5 Scripting in Dreamweaver

×