Modul BSI Web Programming II Pertemuan 3

Modul BSI Web Programming II Pertemuan 3


Pertemuan 3
Mengenal Dreamweaver

Pengertian Dreamweaver
Dreamwweaver MX (MX 6, MX 7, MX 2004 dan MX 8) adalah suatu bentuk program editor web yang dibuat oleh Macromedia dengan alamat Web site www.macromedia.com. Dengan menggunakan program ini, seorang programmer web dapat dengan mudah membuat dan mendesain webnya, karena bersifat WYSIWYG (What You See Is What You Get).

Modul BSI Web Programming II

Mengenal Bagian Dreamweaver
Sebelum mempelajari tool bar dan pembuatan aplikasi web baik statis maupun dinamis, ada baiknya dengan mengenal halam kerja yang disediakan oleh Dreamweaver, terutama versi 8

Modul BSI Web Programming II


Halaman Kerja Dreamweaver
Kemudahan yang disediakan oleh editor Dreamweaver adalah dengan ketersediaan dua buah halaman yaitu halaman kode dan halaman desain.

Modul BSI Web Programming II


Properti Pengaturan Data Objek
Untuk mengaktifkan halaman atau jendela properties dapat melaui menu Windows ? Properties. Jendela properti akan ditampilkan pada halaman desain bagian bawah. Secara standar jendela Properties akan ditampilkan untuk mendukung data teks, berikut tampilannya:

Modul BSI Web Programming II

Gambar properti di atas akan selalu berubah saat mengaktifkan objek web yang berbeda. Untuk membuktikannya, cobalah untuk melihat perubahan saat mengaktifkan komponen table, komponen form dan semua komponen yang didukung oleh Dreamweaver MX atau 8. Berikut adalah contoh perubahan ikon saat objek tabel diaktifkan.

Modul BSI Web Programming II


Tools dalam dreamweaver
Untuk mengaktifkan tool bar dapat melalui menu Windows ? Insert. Bentuk – bentuk komponen yang disediakan untuk membantu dalam menggunakan objek web seperti frame, form, dan tabel. Komponen tersebut dikelompokkan dalam deretan Panel Ikon/ Menu Ikon/ Tool Bar yang berada pada barisan menu bagian atas. Untuk menampilkannya dapat dengan cara mengklik dropt list yang ada di bawah menu File. Lihat gambar berikut:

Modul BSI Web Programming II

Mengenal Tool Bar Common

Modul BSI Web Programming II

Modul BSI Web Programming II

 Mengenal Tool Bar Layout

Modul BSI Web Programming II


Modul BSI Web Programming II

Mengenal Tool Bar Frame
Frame digunakan untuk membuat halaman web yang terlihat terbelah menjadi beberapa bagian, dalam pembuatannya Dreamweaver MX & Dreamweaver 8 ini telah memberikan pengelompokkan yang menjadi satu dalam tool bar Layout. Berikut adalah gambarnya:

Modul BSI Web Programming II


Mengenal Tool Bar Form
Dalam Dreamweaver Anda dapat dengan mudah mengimplementasikan bentuk – bentuk formulir manual ke dalam formulir yang beruba website aplikasi. Perhatikan gambar tool bar Form berikut:

Modul BSI Web Programming II

Modul BSI Web Programming II

Mengenal Tool Bar Text
Tool Bar Text digunakan untuk memformat teks yang ada di dalam halaman desain serta untuk membuat heading dan karakter khusus. Untuk mempermudah dalam mendesain, Dreamweaver menyediakan sekumpulan ikon pengaturan teks yang tergabung dalam tool baru Text seperti gambar berikut:

Modul BSI Web Programming II

Modul BSI Web Programming II

Mengenal Tool Bar PHP
Fungsi dari tool bar PHP adalah membantu dalam menuliskan beberapa kode PHP

Modul BSI Web Programming II

Modul BSI Web Programming II

Script html sederhana dalam dreamweaver
Script html sederahana yang akan digunakan adalah, bagaimana cara membuat table.
1. Dengan menggunakan editor Dreamweaver, buatlah halaman baru menggunakan tipe HTML.
2. Pada halaman desain, tambahkan objek table    ),  dengan ketentuan berikut

Modul BSI Web Programming II

3. Setelah table dibuat, desainlah kerangka table tersebut sebagai berikut:

Modul BSI Web Programming II
 File di atas simpan C:\xampp\htdocs\nim\coba.html.

Modul BSI Web Programming II Pertemuan 3

Untuk Download Latihan Soal dan Kunci Jawaban BSI klik Disini
Ketika membuka link klik "SKIP AD" pada pojok kanan atas

0 komentar " Modul BSI Web Programming II Pertemuan 3 ", Baca atau Masukkan Komentar

Posting Komentar