1 Bab 1 Pendahuluan Macromedia Dreamweaver merupakan sebuah HTML editor Profesional untuk mendesain secara visual dan mengelola situs web beserta halaman web. Saat ini terdapat software dari group Macomedia yang banyak digunakan untuk mendesain situs web. Macromedia Dreamweaver 3 merupakan versi lama yang menjadi web authoring terbaik pada tahun 2000. Di tahun 2001, Macromedia meluncurkan Macromedia Dreamweaver 4 yang lebih baik dan lebih canggih. Setahun kemudian muncul release terbaru dengan sebutan Macromedia Dreamweaver 2002 atau dikenal dengan Dreamweaver MX dan MX 2004. Pada saat ini, sudah beredar update yang terbaru yakni Macromedia Dreamweaver 8. Pada Dreamweaver 8 terdapat beberapa kemampuan bukan hanya sebagai software untuk desain web saja tetapi juga untuk menyunting kode serta pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman web base, antara lain PHP, JSP, ASP dan ColdFusion. Dreamweaver merupakan software populer yang digunakan oleh web designer maupun web programmer guna mengembangkan sebuah situs web. Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan produktivitas dan efektivitas dalam desain dan maintain sebuah web. Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap. Fasilitas penyuntingan secara visual dari Dreamweaver 8 membuat anda dapat menambah desain dan fungsionalitas halaman web tanpa perlu menulis satu baris kodepun. Anda dapat membuat dan mengedit image dalam Adobe Photoshop. Anda juga dapat menambahkan objek Flash secara langsung dalam Macromedia 8.
Transcript
1
Bab 1
Pendahuluan
Macromedia Dreamweaver merupakan sebuah HTML editor Profesional
untuk mendesain secara visual dan mengelola situs web beserta halaman web.
Saat ini terdapat software dari group Macomedia yang banyak digunakan untuk
mendesain situs web. Macromedia Dreamweaver 3 merupakan versi lama yang
menjadi web authoring terbaik pada tahun 2000. Di tahun 2001, Macromedia
meluncurkan Macromedia Dreamweaver 4 yang lebih baik dan lebih canggih.
Setahun kemudian muncul release terbaru dengan sebutan Macromedia
Dreamweaver 2002 atau dikenal dengan Dreamweaver MX dan MX 2004. Pada
saat ini, sudah beredar update yang terbaru yakni Macromedia Dreamweaver 8.
Pada Dreamweaver 8 terdapat beberapa kemampuan bukan hanya sebagai
software untuk desain web saja tetapi juga untuk menyunting kode serta
pembuatan aplikasi web dengan menggunakan berbagai bahasa pemrograman
web base, antara lain PHP, JSP, ASP dan ColdFusion.
Dreamweaver merupakan software populer yang digunakan oleh web
designer maupun web programmer guna mengembangkan sebuah situs web.
Ruang kerja, fasilitas dan kemampuan Dreamweaver mampu meningkatkan
produktivitas dan efektivitas dalam desain dan maintain sebuah web.
Dreamweaver juga dilengkapi dengan fasilitas untuk manajemen situs yang
cukup lengkap. Fasilitas penyuntingan secara visual dari Dreamweaver 8
membuat anda dapat menambah desain dan fungsionalitas halaman web tanpa
perlu menulis satu baris kodepun. Anda dapat membuat dan mengedit image
dalam Adobe Photoshop. Anda juga dapat menambahkan objek Flash secara
langsung dalam Macromedia 8.
2
1.1 Requirement
Berikut ini spesifikasi hardware dan software untuk menjalankan
Dreamweaver.
System requirements untuk Microsoft Windows:
• Processor Intel Pentium III 600 MHz atau lebih cepat.
• Windows 98, Windows 2000, Windows XP, or Windows .NET Server 2003
• Setidaknya RAM 128 MB (rekomendasi 256 MB)
• Setidaknya sisa space 275 MB
• A16-bit monitor dengan resolusi 1024 x 768 pixel atau yang lebih baik.
1.2 Fasilitas
User Interface pada Dreamweaver 8 lebih baik dari versi sebelumnya.
Karena didalamnya memuat peningkatan kemampuan tooolbar, dimana bisa
digunakan untuk memodifikasi toolbar yang sudah ada atau menambahkan
fungsi baru. Selain user interface baru, Dreamweaver 8 memiliki kemampuan
untuk menyunting kode dengan lebih baik. Dapat melakukan print kode pada
jendela Code View, selain itu juga memiliki fasilitas Code Hints yang membantu
dalam urusan tag, serta Tag Inspector yang sangat berguna dalam menangani
Tag HTML. Dreamweaver 8 memiliki panel baru, yaitu panel Snippets yang
memberikan fasilitas untuk menyunting dan menyimpan blok kode yang sering
digunakan. Kemampuan baru lainnya adalah fasilitas untuk menangani dokumen
- dokumen baru seperti XHTML, Extension Manager ditingkatkan
kemampuannya, kemampuan validasi dan debug di browser serta fasilitas untuk
menangani aplikasi database yang sebelumnya hanya ada di Macromedia 8
Ultradev.
1.3 Memulai Dreamweaver 8
Sama dengan program-program lainnya, untuk menjalankan sebuah
program yang diinginkan, terlebih dahulu anda harus mengaktifkan komputer.
Dari tampilan program Windows, pilih START yang berada di pojok kiri bawah,
3
kemudia pilih ALL PROGRAMS untuk menampilkan semua program aplikasi yang
terpasang pada komputer. Pilih folder MACROMEDIA >> MACROMEDIA
DREAMWEAVER 8. Pada saat anda memanggil pertama kali, akan ditampilkan
kotak dialog yang menanyakan pilihan layout ruang kerja yang ingin anda
gunakan.
1.4 Ruang Kerja
Saat Anda pertama kali mulai menjalankan Dreamweaver 8, akan tampil
sebuah kotak dialog Workspace Setup yang digunakan untuk memilih tampilan
ruang kerja.
Gambar 1.1 Tampilan kotak dialog tipe ruang kerja Dreamweaver 8
• Designer workspace : adalah sebuah penggabungan ruang kerja
menggunakan MDI (Multiple Document Interface), di mana semua jendela
dokumen dan panel tergabung di dalam satu jendela aplikasi yang besar, dengan
sisi panel group di sebelah kanan. Tampilan ini paling disukai beberapa
pengguna.
• Coder workspace : adalah ruang kerja yang tergabung dengan letak sisi panel
group berada di sebelah kiri. Tampilan yang sama digunakan oleh Macromedia
HomeSite dan Macromedia ColdFusion Studio, dan jendela dokumen
menampilkan kode secara default. Tampilan ini sudah diakui kemudahannya
4
oleh pengguna Homesite atau Coldfusion Studio dan pengguna kode lain yang
ingin mengenal tampilan ruang kerja.
Ketika Anda memulai Dreamweaver tanpa membuka sebuah dokumen,
makan akan tampil halaman awal Dreamweaver pada lembar kerja. Halaman
awal akan memudahkan pengguna dalam mengakses tutorial, memilih file yang
pernah dibuka, membuat halama baru, membuat halaman dari contoh dan
Dreamweaver Exchange, dimana anda dapat menambahkan kemampuan baru
dari beberapa tampilan Dreamweaver. Gunakan halaman awal seperti halaman
web. Untuk menghilangkan tampilan awal, lakukan langkah:
Gambar 1.2 Tampilan jendela awal
1. Jalankan Dreamweaver tanpa membuka dokumen. Halaman awal
akan ditampilkan pada layar monitor anda.
2. Klik Don’t Show Again
Ruang kerja pada Dreamweaver 8 memiliki komponen – komponen yang
memberikan fasilitas dan ruang untuk menuangkan kreasi anda dalam bekerja,
seperti dalam gambar dibawa ini. Komponen - komponen yang disediakan oleh
ruang kerja Dreamweaver 8 antara lain adalah insert bar, Document toolbar,
5
Document window, Kelompok panel, tag selector, Property inspector dan Site
panel.
Gambar 1.3 Tampilan ruang kerja
• Document window : berfungsi untuk menampilkan dokumen di mana anda
sekarang bekerja
• Insert Bar : mengandung tombol-tombol untuk menyisipkan berbagai macam
objek seperti image, tabel dan layer ke dalam dokumen.
• Document toolbar : berisi tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari Document window.
• Files panel : memperlihatkan group file berdasrkan site yang sedang
dikerjakan.
• Tag Selector : berfungsi menampilkan hirarki tag di sekitar pilihan yang aktif
pada desin view.
• Property Inspector : digunakan untuk melihat dan mengubah berbagai
properti objek dan teks.
• Site panel : digunakan untuk mengatur file dan folder yang membentuk situs
web anda.
6
1.5 Komponen Ruang Kerja
Pada ruang kerja Dreamweaver 8 terdapat beberapa komponen utama
yang membentuk suatu ruang kerja. Ruang kerja tersebut memberikan kesatuan
tampilan antara menu utama, panel, property inspector serta toolbar.
Menu Utama
Sistem menu yang terdapat dalam Dreamweaver 8 sangatlah sederhana
dan mudah untuk dipahami karena perintah yang terdapat pada hampir sebagian
besar fungsi menu terdapat juga dalam panel. Anda tidak akan menghabiskan
waktu dengan perintah yang terdapat pada menu tetapi akan lebih banyak
bekerja dengan panel. Pada sistem menu Dreamweaver 8 terdapat beberapa
komponen yang dapat digunakan, yakni :
• Menu file dan Menu edit
Berisi item menu standar untuk menu file dan menu Edit seperti New,
Open, Save, Save all, Cut, Copy, Paste, Undo dan Redo. Menu file terdiri dari
beberapa macam perintah untuk menampilkan atau membuat dokumen baru,
seperti Preview in browser dan Print code. Menu edit berisi perintah untuk
pemilihan, seperti Select parent tag dan Find dan Replace.
• Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan dari
dokumen anda (seperti tampilam design view dan tampilan code) dan untuk
menampilkan dan menyembunyikan beberapa elemen halaman dan tombol
Dreamweaver dan toolbar.
• Menu Insert
Berisikan alternatif baris Insert untuk menyisipkan obyek dalam
dokumen.
7
• Menu Modify
Berfungsi untuk melakukan perubahan properti item atau halaman
terpilih. Dengan menggunakan menu ini anda dapat mengedit atribut tag,
mengganti tabel dan elemen tabel dan bermacam bentuk aksi untuk item librari
dan template.
• Menu Text
Berfungsi untuk mempermudah dalam melakukan format teks.
• Menu Command
Berisi akses ke beberapa perintah, format kode yang sesuai dengan format
pilihan anda. Membuat photo album, dan melakukan pengeditan gambar.
• Menu Site
Berisi item menu untuk mengelola situs dan melakukan upload dan
download file.
• Menu window
Menyediakan akses ke seluruh panel, inspector dan jendela dalam
Dreamweaver.
• Menu Help
Akses menuju bantuan berupa dokumentasi yang telah disediakan.
Baris Standar
Pada saat anda membuka jendela Dreamweaver 8, secara default hanya
menampilkan Document Bar tanpa menampilkan Standard Bar.
Gambar 1.4 Standard Bar
8
Untuk menambahkan atau mengaktifkan Standard Bar, langkah – langkahnya
sebagai berikut:
1. Buatlah dokumen baru
2. Pilih perintah menu View > Toolbars sehingga tampil submenu Document
dan Standard
3. Klik pilihan Standard untuk menampilkan standard bar
4. Gunakan perintah yang sama untuk menyembunyikan tampilan Standar bar.
Untuk menyembunyikan, anda bisa mengklik pilihan yang sudah terpilih.
Baris Tombol Dokumen
Document Toolbar berisi tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari document window. Anda dapat memberikan
judul document window pada bagian Title.
Gambar 1.5 Document Toolbar
9
Baris Insert
Terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek
seperti tabel, layer dan gambar. Ketika anda menggulung pointer melewati
sebuah tombol, tampil sebuah kotak keterangan dengan menampilkan nama
tombol.
Gambar 1.6 Tampilan Insert Bar sebelum diganti
(Untuk mengganti tampilan Insert Bar, Anda dapat memilih Show as Tabs pada
menu tarik. Selanjutnya tampilan Insert Bar akan berubah menjadi Tabulasi
diatas Insert Bar)
10
Gambar 1.7 Tampilan Insert Bar setelah diganti
Baris Insert digunakan untuk mengatur beberapa kategori pilihan sebagai
berikut:
Common memungkinkan untuk membuat dan menyisipkan beberapa
penggunaan obyek biasa, seperti gambar dan tabel di atas.
Layout memungkinkan untuk menyisipkan tabel, div tag, layer, dan frame.
Kita dapat memilih 3 tampilan tabel : Standard (default), Expanded Tables
dan Layout. Ketika mode tampilan dipilih. Kita dapat menggunakan tombol
layout dreamweaver : Draw Layout Cell dan Draw Layout Table.
Forms berisi tombol-tombol untuk membuat form dan menyisipkan elemen
form.
Text memungkinkan kita untuk menyisipkan beberapa teks dan daftar.
Format tag, seperti b, em, p, h1 dan ul.
HTML menyediakan fasilitas untuk menyisipkan tag HTML untuk mistar
horizontal, head content, tabel, frame dan script.
Server-code disediakan untuk halaman-halaman yang menggunakan bahasa
khusus seperti : ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP
dan PHP. Selain itu juga disediakan obyek - obyek server code yang dapat
disisipkan dalam tampilan code.
Application memungkinkan kita untuk menyisipkan elemen dinamis seperti
recordset, repeated region dan record insertion dan update form.
Flash Elements untuk menyisipkan objek flash.
Favorites untuk mengelompokkan dan mengatur tombol - tombol baris
insert yang anda gunakan dalam satu wadah.
11
Jendela Dokumen
Document Window merupakan bagian yang digunakan untuk mendesain
halaman web. Dalam Document Window dipakai untuk menyisipkan teks, image
serta objek lain yang mendukung pembuatan situs web. Tidak seperti versi
sebelumnya, Dreamweaver 8 memuat dokumen - dokumen yang sedang dibuka
dalam jendela yang sama. Jika anda perhatikan untuk dokumen yang terbuka
dalam jendela yang sama, akan disimpan dalam tab-tab seperti lembar kerja pada
Microsoft Excel.
Dengan demikian anda dapat dengan mudah berpindah antar dokumen
tanpa harus menutup tampilan jendela yang sudah terbuka, yaitu dengan
mengklik tab dokumen yang anda inginkan.
Gambar 1.8 Document Window
Panel Group
Merupakan kumpulan panel yang saling berkaitan satu sama lain yang
dikelompokkan bersama dibawah satu judul. Kalau diperhatikan pada bagian
panel group, disitu terdapat beberapa panel yang tersusun secara rapi pada
12
bagian sebelah kanan window. Kelompok panel tersebut antara lain : Design,
Code, Application, Files dan Answer.
Pada setiap bagian dari panel group terdapat beberapa macam panel lagi,
misalnya pada panel group Design berisikan panel HTML, Style, CSS Style dan
Behaviour. Pada bagian panel group Files terdapat panel Site dan Assets. Untuk
menguraikan panel group, anda bisa klik panah expander di sebelah kiri nama
group.
Kita juga dapat memisahkan panel group yang tersusun tersebut dengan
menggeser mouse pada bagian pojok kiri dari judul group sampai panel tersebut
terlepas dari panel group.
Gambar 1.9 Panel Group (Geser pada pojok kiri atas judul panel sehingga panel akan terlepas dari group)
File Panel
Merupakan bagian dari panel group selain panel Assets. Bagian ini
berfungsi untuk mengatur file dan folder yang akan membentuk situs Anda.
13
Panel ini memiliki fungsi lain yang cukup penting karena memungkinkan untuk
mengatur dan bekerja terhadap file-file tersebut dengan efisien.
Gambar 1.10 Files panel didalam panel group files
Pada bagian ini, kita dapat melakukan beberapa aktivis, antara lain
manajemen file, koneksi ke remote server, menempatkan file ke server atau
menyalin file dari server ke situs lokal.
Snippet Panel
Panel ini merupakan kode yang sering digunakan dan disisipkan pada
dokumen. Kita bisa mengambil kode snappet built-in yang ada di dalam bagian
snippet dengan menentukan terlebih dahulu kode apa yang akan disisipkan ke
dalam dokumen.
Misalnya: apabila kita ingin membuat sebuah judul beserta menu, maka
anda harus memilih Headers, selanjutnya anda bisa menentukan bentuk dari
Headers tersebut. Selain Headers, anda juga bisa menggunakan kode lainnya,
seperti footer, layout navigasi, fungsi javascript dan masih banyak lagi seperti
yang dapat Anda lihat pada hirarki.
14
Gambar 1.11 Snippets panel
Anda juga bisa menambah atau mengubah kode snippet yang sudah ada sesuai
dengan kebutuhan.
Tag Inspector
Salah satu fasilitas terbaru dari Dreamweaver 8. Dalam hal tag Inspector
anda dapat melihat struktur hirarki tag dan atribut - atribut yang dapat
ditambahkan atau di edit.
15
Gambar 1.12 Tag Body dalam panel group tag Inspector
Tag Selector
Terdapat pada bagian bawah document window atau pada bagian status
bar. Fungsi dari Tag selector adalah untuk menampilkan hirarki tag pada design
view yang aktif. Pada saat anda mengaktifkan jendela document window, secara
otomatis pada bagian status bar akan muncul indikator <body>.
Gambar 1.13 Tag Selector
Property Inspector
Digunakan untuk melihat dan mengubah berbagai properti objek dan teks
yang terpilih. Setiap objek maupun teks mempunyai properti yang berbeda -
beda. Contoh Properti Teks : jenis font, ukuran, perataan dsb. Untuk Image :
nama image, ukuran image, dan sebagainya.
16
Gambar 1.14 Property Inspector Text
Gambar 1.15 Property Inspector Image
17
Bab 2
Dasar – Dasar Dreamweaver
Sebelum kita memulai membangun situs web. Kita harus mengetahui
pengertian situs web. Situs web adalah suatu kesatuan dari halaman - halaman
yang terhubung dengan atribut sama. Sebuah web memiliki banyak komponen
web seperti image, text, media dan objek yang saling berhubungan.
2.1 Web Server
Sebelum kita melangkah untuk mendesain Web, kita diwajibkan untuk
menyediakan Personal Web Server, hal ini dibutuhkan untuk mengetes hasil
disain yang sudah dihasilkan lewat browser lokal atau lewat jaringan. Ada
beberapa produk software Web Personal Server yang bisa kita gunakan yakni :
Aphace Web Server, Personal Web Server (PWS) atau Internet Information
Services (IIS).
Install PWS
Berikut langkah-langkah untuk menginstal PWS dalam Sistem Operasi
Window 95/98/Me atau NT Workstation :
1. Double-click File source progran PWS yang ada dalam Windows 98 CD atau
download lewat internet.
2. Ikuti installasi wizardnya.
3. Ketika menanyakan untuk directori Home Default-nya, ikuti saja sesuai
default-nya seperti berikut C:\Inetpub\wwwroot
4. Klik Finish untuk menyelesaikan Installasinya.
18
Install IIS
Berikut langkah-langkah untuk menginstal IIS dalam Sistem Operasi
Window 2000/XP:
1. Pada Window 2000, Pilih Start > Settings > Control Panel > Add/Remove
Programs.
2. Pada Window XP, Pilih Start > Control Panel > Add/Remove Programs.
3. Pilih Add/Remove Windows Components.
4. Pilih IIS dan Ikuti Instruksi Installasinya dan persiapkan master CD sistem
operasinya.
Testing Web Server
Setelah semuanya beres untuk memastikan apakah web server kita
berjalan dengan baik maka cobalah dengan cara berikut ini:
1. Buka Notepad.
2. Ketikan seperti ini “ <p> Server berjalan dengan Baik</p>”.
3. setelah itu Save ke file C:/inetpub/wwwroot/test.html (ingat!jangan lupa
untuk memberikan Extensi .html atau .htm.
4. kemudian klik internet explorer, kemudian ketikan:
5. Kalau benar akan muncul Tulisan “Server berjalan dengan Baik”
6. Berarti anda telah sukses memasang web server pada komputer anda
2.2 Membuat Situs Lokal
Situs lokal memiliki pengertian bahwa seluruh file yang digunakan untuk
membangun sebuah web tersebut secara fisik berada dalam dalam
komputer/server yang berdiri sendiri. Kita bisa menempatkan dalam folder yang
sudah ditentukan.
Dalam Dreamweaver, untuk membuat sebuah situs web kita perlu
mendefinisikan situs dengan menggunakan Kotak Dialog Site Definition. Dalam
proses pendefinisia, ada 2 cara yang dapat kita pilih. Yakni : Basic dan Advance.
19
Adapun langkah untuk mengatur pendefinisian site dengan versi Basic sebagai
berikut :
1. Pilih perintah menu Site > Manage Sites
Gambar 2.1 Tampilan kotak dialog Manage Sites
Dalam menu diatas terdapat beberapa tombol New, Edit, Duplicate,
Remove, Export dan Import. Ketika kita memilih New maka akan muncul menu
melayang yakni:
• Site, jika file-file web pekerjaan kita akan ditaruh di folder lokak
• FTP & Server, ini dipilih bila file-file situs web kita ada di jaringan atau
komputer lain.
Kemudian pilih langkah termudah dengan menu Basic
20
Gambar 2.2 Langkah ke-1 Site Definition
2. Klik Next untuk masuk pada kotak dialog berikutnya. Anda ditanya apakah
akan membuat halaman statis atau membuat halaman dinamis dengan bahasa
web programming.
Gambar 2.3 Langkah ke-2 Site Definition
3. Klik untuk melakukan browse dan meletakkan hasil pekerjaan web
kita.
21
Gambar 2.4 Langkah ke-3 Site Definition
4. Pilih Local/Network dan masukkan alamat folder situs kita
Gambar 2.4 Langkah ke-4 Site Definition
22
Gambar 2.5 Langkah ke-5 Site Definition
5. Klik Done untuk mengakhiri proses.
Gambar 2.6 Langkah ke-6 Site Definition
Selanjutnya akan muncul dalam Files Panel root folder lokal, sebagai bukti bahwa
langkah-langkah diatas telah sukses dilakukan.
23
Gambar 2.7 Langkah ke-7 Site Definition
2.3 Membuat Halaman Baru
Untuk membuat halaman web baru, gunakan perintah menu File > New
atau dengan shorcut Ctrl + N
Gambar 2.8 Membuat Halaman Baru
24
2.4 Melihat Situs Lokal
Anda dapat melihat file-file yang ada pada situs lokal maupun situs remote
(pada server), karena site panel memiliki kemampuan untuk koneksi ke server
dengan menggunakan protokol FTP, LAN, WebDav, RDS maupun Source Safe
Database.
Gambar 2.9 Tampilan Situs Lokal
Sedangkan prosedur untuk melihat struktur dan file situs adalah:
1. Pastikan aktif dalam Files Panel
2. Klik Kotak Site Files View > Site Map
• Teks dengan warna Merah berarti mempunyai link yang rusak.
• Teks dengan warna Biru dan dengan ikon Globe sebagai tanda file dari site lain
atau mempunyai link khusus.
• Sebuah tanda cek Hijau berarti file tersebut sedang dipilih.
• Sebuah tanda cek Merah mempunyai arti file tersebut sedang dipilih orang lain.
• Sebuah ikon yang mempunyai tanda kunci merupakan file yang mempunyai
sifat Read-Only.
25
Gambar 2.10 Tampilan Situs Lokal secara Site Map
Toolbar pada Files Panel
Toolbar merupakan sekumpulan tombol perintah yang terletak dalam
sebuah bidang garis.
Gambar 2.11 Toolbar Files Panel
26
Bab 3
Mendesain Halaman Web
Mendesain merupakan perpaduan dari seni, iptek dan keterampilan.
Kriteria Situs yang baik salah satunya adalah mempunyai kesamaan tema dalam
halaman-halamannya. Sistem Navigasi yang mudah dan dimengerti akan
membuat pengunjung merasa puas dan akan kembali lagi. Font, warna, layout
dan image merupakan inti dari kesesuaian sebuah desain halaman web.
3.1 Mengatur Properti Halaman
User Interface pada Dreamweaver 8 sedikit berbeda dengan versi
sebelumnya. Telah mengalami peningkatan kemampuan pada toolbar sehingga
mudah dimodifikasi atau menambahkan fungsi baru. Membuka page properties
dilakukan dengan cara:
1. Pilih perintah menu Modify+Page Properties atau Ctrl+J sehingga akan
muncul gambar
Gambar 3.1 Kotak Dialog Page Properties
27
• Appearance
Mengatur jenis, style, ukuran dan warna font kemudian warna latar
belakang dan ukuran margin halaman.
• Link
Mengatur jenis, style dan warna font untuk link ketika tampil, rollover atau
kondisi setelah dikunjungi.
• Headings
Menentukan sendiri style yang digunakan untuk teks naskah anda.
• Title/Encoding
Memberikan judul halaman pada bagian title.
• Tracing Image
Fasilitas untuk membuat latar belakang dari sebuah image dan bisa diatur
tingkat ketajamannya.
3.2 Menambah Judul Halaman Web
Title digunakan untuk memberikan judul halaman web. Selain kotak
dialog Page Properties.
Gambar 3.2 Toolbar Document
3.3 Membuat Latar Belakang dengan Gambar
Langkah-langkah untuk mengambil gambar dan menggunakannya sebagai
latar belakang, adalah:
1. Klik kanan lembar kerja Document Window, pilih Page Properties.
2. Pada kotak dialog, klik tombol Browse.
Gambar 3.3 Kotak Teks Background Image
28
3.4 Mengisi Latar Belakang dengan Warna
Dengan mengklik dropdown pada bagian Background.
Gambar 3.4 Tampilan pilihan warna untuk background
3.5 Menentukan Warna untuk Teks Link
Selain warna default untuk teks pada halaman web. Ada beberapa jenis
teks yang lainnya, seperti:
• Links, Warna yang akan digunakan pada semua teks dan email link yang
mengandung hyperlink.
• Visited Links, Warna yang akan digunakan pada link yang sudah pernah
dikunjungi.
• Active Links, Warna yang akan digunakan pada link yang sedang ditunjuk atau
pada saat pointer mouse masih dalam keadaan ditekan pada teks link.
• Rollover Links, Warna yang akan digunakan pada link saat pointer mouse
melewati teks tersebut.
3.6 Menentukan Ukuran Margin
Untuk menentukan batas margin pada lembar kerja Dreamweaver. Anda
dapat memasukkan nilai pada kotak teks margin, yakni : Left Margin, Top Margin,
Right Margin dan Bottom Margin.
29
3.7 Memberikan Gambar untuk Tracing
Pada kotak dialog Page Properties bagiab bawah terdapat properti
Tracing Image. Tracing Image adalah sebuah gambar bertipe JPEG, GIF atau
PNG. Caranya sebagai berikut:
• Klik Kanan pada lembar kerja dan pilih menu Page Properties. Klik tombol
Browse disamping pilihan Tracing Image.
Gambar 3.5 Tampilan Slide Transparancy
30
Bab 4
Tabel
Dalam Macromedia Dreamweaver 8, tabel yang digunakan ada 2 jenis,
yaitu tabel biasa dan layout tabel
4.1 Membuat Tabel
Tabel biasa adalah sebuah tabel sederhana yang biasa anda buat melalui
program Word dan tabel biasa ini merupakan inti dari tabel layout yang anda
buat. Langkah membuat sebuah tabel biasa, sebagai berikut:
1. Letakkan kursor pada lembar kerja document window.
2. Gunakan menu Insert+Table (Ctrl+Alt+T)
Gambar 4.1 Kotak Dialog Tabel
31
3. Contoh jika kita masukkan nilai Rows :3 dan Columns :5 dengan border :1
Gambar 4.2 Contoh Tabel
4. Tampilkan Properti Tabel dengan cara Window+Properties atau Ctrl+F3
Gambar 4.3 Property Inspector Tabel
Keterangan Tabel
• Table id, Untuk pemberian nama Tabel selanjutnya digunakan dalam
pemrograman.
• Rows, Menentukan Jumlah Baris
• Cols, Menentukan jumlah Kolom
• CellSpace, Memberikan jarak antar sel dalam Tabel
Gambar 4.4 Tabel dengan nilai Cellspace yang berbeda
CellPad, Mengatur jarak antar isi sel dengan batas tepi sel.
32
Gambar 4.5 Tabel dengan nilai Cell Padding yang berbeda
4.2 Mengubah Properti Tabel
Beberapa istilah dalam perubahan dalam sebuah Tabel, yakni :
• Merge, Menggabungkan dua atau lebih sel yang bersebelahan
Gambar 4.6 Tampilan beberapa cell setelah digabung
• Splits, Untuk memecah sel menjadi beberapa baris atau kolom.
Gambar 4.7 Kotak Dialog Split Cell
33
Gambar 4.8 Tampilan cell setelah dipecah
• No Wrap, Digunakan untuk mencegah agar teks yang dimasukkan tidak
berlipat atau berpindah baris sehingga akan berada dalam satu baris yang sama.
Gambar 4.9 Tampilan Teks menggunakan No Wrap
4.3 Menggunakan Format Tabel
Format Tabel juga bisa dilakukan dengan memakai model yang telah
disediakan Dreamweaver, dengan cara:
1. Pilih Tabel yang akan anda format
2. Pilih menu Command – Format Table
34
Gambar 4.10 Tampilan Kotak Dialog Format Table
4.4 Contoh Pembuatan Halaman Web
Lakukan langkah-langkah berikut:
1. Tambahkan satu buah document window baru.
2. Atur Propertinya.
3. Buat Tabel dengan 19 Baris dan 6 kolom, width 100% dan border 1.
4. Gabungkanlah beberapa Cell.
5. Ubah Border menjadi 0 ubah pula Cellpad dan Cellspace menjadi 0.
6. Gunakan Warna dan imajinasi anda.
35
Gambar 4.11 Tampilan Layout dengan Tabel dan Warna
36
Bab 5
Layer
Layer adalah fasilitas yang penting dalam proses pendesainan. Berbeda
dengan Tabel, layer dapat diatur dan tidak terkesan kaku. Anda dapat
meletakkan tabel, form, teks, image di dalam sebuah layer. Anda juga dapat
mengatur objek gambar secara bertumpuk. Secara Umum Layer diartikan
sebagai sebuah lapisan tembus pandang yang lebih mirip dengan plastik. Fungsi
utamanya adalah sebagai penambah kemampuan kontrol dan fleksibilitas tata
letak sebuah web.
Hanya saja, ketika anda akan memakai layer. Perlu diperhatikan bahwa
layer tidak support dengan browser yang lama (contoh: IE 4 kebawah), sehingga
perlu dipikirkan siapa saja calon pengakses web tersebut.
5.1 Menyisipkan Layer
Untuk menyisipkan layer ke dalam jendela dokumen anda tidak ada
ketentuan khusus. Langkah-langkahnya sebagai berikut:
1. Pilih menu Insert – Layout Objects – Layer.
2. Klik tombol Layer yang ada pada kategori Layout.
Setelah anda mengaktifkan layer, buatlah sebuah objek layer dalam jendela
dokumen. Langkahnya adalah:
1. Tempatkan pointer mouse pada area yang akan dimuat layer.
2. Buatlah sebuah kotak.
3. Atur lebar dan tinggi, kemudia lepaskan tombol mouse.
4. Anda dapat menyisipkan beberapa layer dengan lebih mudah dengan meng-
klik tombol layer dan tekan tombol Ctrl. Kemudian geser ikon layer yang berada
di Insert Bar pada jendela dokumen sebanyak yang anda inginkan.
37
Gambar 5.1 Kotak Layer
5.2 Properti Layer
Anda dapat mengatur layer dari Properti Inspector.
Gambar 5.2 Tampilan Properti Layer
Keterangan :
Z-Index, Untuk mengatur urutan Layer
Vis, Mengatur visibilitas sebuah layer
Overflow, Digunakan untuk menentukan kondisi isi layer yang melampaui
ukuran sebenarnya.
• Visible, mengubah sesuai ukuran isi layer
• Hidden, menyembunyikan layer sehingga isi tidak kelihatan
• Scroll, menampilkan penggulung pada layer
• Auto, mengaktifkan batang penggulung pada saat isi melampui batas layar
38
5.3 Mengatur Layer
Pertama yang perlu dilakukan adalah memilih layer tersebut terlebih
dahulu. Setelah itu baru memberikan perintah modifikasi, memindah, mengubah
ukuran, meratakan dsb.
Memilih Layer
Bisa dilakukan dengan beberapa cara, yaitu :
1. Memakai panel layer
Gambar 5.3 Tampilan Panel Layer
2. Menggunakan mouse, tekan Shift untuk memilih lebih dari satu layer
Menyembunyikan Tampilan Layer
Jika ingin menyembunyikan layer yang tampak pada layar dengan cara
sebagai berikut :
1. Aktifkan panel layer pada panel group
2. Klik tombol mata yang terletak pada panel group, atau dengan cara
menggunakan Properti Inspector yaitu dengan memilih hidden pada kotak vis.
Menghindari Overlaping layer
Untuk menghindari layer yang bertumpuk atau overlapping.
39
Gambar 5.4 Tampilan Layer sebelum dan setelah pilihan prevent overlaps
Mengatur Perataan Layar
Selain teks dan objek gambar, perataan juga dapat dilakukan terhadap
layer.
Langkah-langkahnya sebagai berikut:
1. Pilih beberapa layer yang akan diatur perataannya
2. Pilih menu Modify > Align kemudian pilih salah satu perintah perataan :
Left, Right, Top, Bottom.
Membuat Layer Bertingkat
Layer adalah sebuah media yang digunakan untuk meletakkan abjek
didalamnya. Selain dapat berdiri sendiri, layer juga dapat diisi dengan layer.
Pilih salah satu cara di bawah ini :
• Pilih perintah menu Insert > Layout Objects > Layer
• Geser tombol dari insert bar pada kategori Common kemudian letakkan
didalam layer induk.
• Klik tombol sambil menekan tombol Alt.
40
Bab 6
Image
Gambar memegang peranan dalam pembuatan user interface, presentasi,
katalog produk dsb. Ada beberapa tipe file gambar yang bisa digunakan dalam
halaman web, antara lain JPEG, GIF dan PNG.
6.1 Memasukkan Gambar
Sebelum memasukkan gambar ke dalam halaman web anda. Anda harus
membiasakan untuk menyimpan file kedalam folder web. Ini dilakukan untuk
mencegah munculnya File://... Sehingga dapat menyebabkan gambar tidak
ditampilkan sewaktu dijalankan pada browser secara online.
41
Gambar 6.1 Tampilan konfirmasi penyalinan gambar
Beberapa Langkah memasukkan gambar :
1. Pada kategori Common di Insert bar, klik pada ikon image , atau geser ikon
image ke document window.
2. Pilih menu Insert > Image
3. Geser sebuah gambar ke dalam lembar kerja anda, sehingga anda akan ditanya
tentang penyalinan file. Klik OK jika anda jadi memilihnya.
6.2 Mengatur Properti Gambar
Setelah image terpasang, akan terlihat Properti Insperctor.
Gambar 6.2 Properti sebuah gambar
Mengatur Jarak Gambar
Mengatur jarak gambar dengan teks sekitarnya. Ini penting dalam sebuah
desain. Anda dapat memasukkan nilai ke dalam kotak teks V Space dan H Space.
42
Gambar 6.3 Properti untuk mengatur jarak spasi gambar
6.3 Membuat Link Pada Gambar
Membuat link pada gambar tidaklah sulit, sama seperti pembuatan link
pada teks. Kita tinggal menghubungkan gambar dengan alamat halaman atau
situs.
Langkah-langkahnya adalah :
1. Sisipkan sebuah gambar ke dalam document window.
2. Jika sudah terpilih, lakukan salah satu perintah ini :
• Pilih Modify > Make Link, tentukan alamat yang dituju kemudian OK
• Isikan alamat halaman pada properti Link di bagian Property Inspector
3. Tentukan Target pada kotak target.
Membuat Image Map
Image Map adalah gambar yang memiliki beberapa daerah tertentu, pada
daerah tersebut dapat diberi link. Fasilitas yang diberikan untuk membuat image
map ada tiga, adalah :
• (Rectangular Hotspot Tool) , membuat daerah link berbentuk kotak.
• (Oval Hotspot Tool) , membuat link dengan bentuk oval/lingkaran
• (Polygon Hotspot Tool) , membuat link berbentuk poligon/bebas.
Gambar 6.4 Contoh pemakaian Image Map
43
Bab 7
Frame
Frame adalah cara untuk menggabungkan beberapa halaman menjadi satu
halaman web yang utuh. Atau dengan frame merupakan sarana membagi
halaman web menjadi beberapa bagian. Kelebihan Frame daripada Tabel atau
Layer adalah : kita dapat menampilkan beberapa halaman web sekaligus dalam
document window. Secara teknis juga mengurangi beban server dalam
menjalankan pemrosesan karena server hanya perlu bekerja sekali saja.
Kemudian dapat menampilkan halaman baru yang bukan permanen dengan
lebih cepat.
7.1 Menyisipkan Frame
Untuk menyisipkan sebuah frame atau beberapa frame sekaligus, anda
dapat melakukan dengan 2 cara, cara pertama yakni:
1. Pastikan tidak ada dokumen aktif yang dibuka.
2. Pilih File > New sehingga tampil kotak dialog New Document.
3. Aktifkan tabulasi General kemudian pilih kategori Frameset. Maka akan
muncul beberapa pilihan yang sudah disediakan.
44
Gambar 7.1 Tampilan Frameset pada kotak dialog
4. Pilih dan kemudian pilih tombol Create.
Cara kedua adalah :
1. Aktifkan kursor pada document window.
2. Aktifkan tabulasi Layout dan tekan tombol Frames pada Insert Bar.
Gambar 7.2 Ikon Frameset pada insert bar
3. Pilih menu Insert > HTML > Frames, kemudian pilih salah satu frameset yang
tersedia pada submenu Frames. Dan ulangi seperlunya.
7.2 Mendesain Frameset Sendiri
Saat membuat frameset sendiri, anda harus mengaktifkan Frame Border.
Frame borders sangat membantu dalam pendesainan frameset karena anda
dapat melihat batas frame pada documnet window sehingga memudahkan untuk
mengatur.
45
Caranya sebagai berikut:
1. Aktifkan document window.
2. Pilih menu View > Visual Aids > Frame Borders untuk mengaktifkan
tampilan border frame.
Sedangkan langkah-langkah untuk membuat frameset sendiri adalah sebagai
berikut :
1. Pastikan anda aktif pada document window.
2. Pilih perintah menu Modify > Frameset.
3. Selanjutnya pilih frameset yang sudah disediakan:
• Splite Frame Left dan Splite Frame Right untuk membagi frame dengan pola
vertikal.
• Splite Frame Up dan Splite Frame Down untuk membagi frame dengan pola
horisontal.
4. Untuk menggeser border frame, anda dapat menggunakan pointer mouse.
5. Membuat frame baru dari frame yang sudah ada gunakan kombinasi Alt+drag.
6. Untuk memilih dan modifikasi Frame, kita dapat mengaktifkan Frame panel
dengan Shift+F2.
Gambar 7.3 Tampilan Frame pada Frame panel
Menyimpan Frame
Setelah membuat frame. Anda harus menyimpan frame tersebut agar bisa
ditampilkan di browser. Anda diminta untuk menyimpan frame dan frameset
tersebut terlebih dahulu.
46
Caranya sedikit berbeda, jika ada 5 buah frame maka harus disimpan 5
buah file dan 1 buah frameset untuk menampung file-file tersebut. Langkahnya
adalah :
1. Aktifkan salah satu bagian dalam frame untuk mengaktifkan frame yang akan
disimpan.
2. Pilih perintah menu File > Save Frame
3. Ketik nama frame pada bagian file name dan tekan tombol Save
4. Terakhir, simpan dengan menu File > Save Frameset
Menghapus Frame
Lakukan langkah berikut :
1. Arahkan pointer mouse pada border frame yang ingin dihapus.
2. Geser border tersebut keluar dari area document window.
7.3 Mengatur Properti Frame dan Frameset
Frameset adalah induk yang dapat menampung beberapa frame lain
didalamnya dan dapat memiliki beberapa frameset lainnya.
Mengatur Properti Frame
Untuk mengaktifkan frame. Lakukan dengan Alt+Klik sehingga akan
muncul properti pada Properti Inspector.
Gambar 7.4 Properti Frame
47
Mengatur Properti Frameset
Lakukan dengan meng-klik salah satu border framenya atau dengan
memilih border frame terluar pada panel frame. Sehingga akan muncul Properti
Inspector seperti dibawah ini.
Gambar 7.5 Properti Frameset
7.4 Contoh Pembuatan Frame
Dengan langkah-langkah sebagai berikut:
1. Buat halaman web baru pada jendela program anda
2. Tambahkan sebuah frame Top and Nest Left Frame
3. Atur lebar frame sesuai dengan imajinasi anda
4. Tambahkan beberapa frame lagi.
5. Beri nama untuk masing-masing frame :
• Frame paling atas : bannerframe
• Frame kedua : topframe
• Frame Bagian ketiga : leftframe
• Frame bagian keempat : mainframe
• Frame bagian kelima : rightframe
6. Tambahkan warna sesuai imajinasi pada setiap frame.
7. Simpan dengan nama Frameku.htm
8. Buka jendela browser dengan F12.
48
Gambar 7.6 Tampilan frame setelah diberi warna
49
Bab 8
Form
Fasilitas form memudahkan user untuk berinteraksi dengan web. Dengan
menggunakan form dapat dikumpulkan informasi dari pengunjung dan
melakukan interaksi dengan mereka. Forma disusun dari beberapa objek yang
disusun seperti sebuah model pengisian formulir.
Berikut gambar beberapa objek yang terdapat pada form, antar lain:
Gambar 8.1 Insert form dalam insert bar
8.1 Menyisipkan Form
Dalam membuat form terlebih dahulu menyediakan wadah untuk
menampung objek-objek form. Agar ketika informasi didapatkan, semua bisa
terkirim untuk diprose.
Langkah-langkahnya sebagai berikut :
1. Pastikan aktif dalam document window
2. Aktifkan tabulasi Form pada Insert Bar
3. Atau dengan menu Insert > Form
4. Pada halaman akan terlihat garis putus-putus
Gambar 8.2 Tampillan objek form
5. Pada bagian Property Inspector akan tampil properti form
50
Gambar 8.3 Properti Form
Agar memudahkan dalam membuat form yang rapi, dibutuhkan tabel
untuk meletakkan masing-masing objek. Dengan Tabel maka akan lebih mudah
mengatur dan akan membuat user lebih mudah mengisinya.
8.2 Menyisipkan Text Field
Text Field merupakan sarana yang sering dipakai, karena akan memuat
informasi berupa teks dan karakter. Langkahnya sebagai berikut :
Lakukan salah satu langkah berikut :
• Pilih menu Insert > Form > Text Field
• Klik tombol ikon pada Insert Bar
Berikut adalah gambar properti Text filed
Gambar 8.4 Properti text Field
Menyisipkan Text Area
Langkahnya sebagai berikut :
• Pilih menu Insert > Form Object > Textarea
• Klik tombol ikon pada Insert Bar
51
Berikut gambar properti Textarea
Gambar 8.5 Properti textarea
Menyisipkan Checkbox
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > Check Box
• Klik tombol ikon pada Insert Bar
Berikut gambar properti Checkbox
Gambar 8.6 Properti Checkbox
Menyisipkan Radio Button
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > Radio Button
• Klik tombol ikon pada Insert Bar
Berikut gambar properti Radio Button
Gambar 8.7 Properti Radio Button
52
Menyisipkan Radio Group
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > Radio Group
• Klik tombol ikon pada Insert Bar
Gambar 8.8 Kotak Dialog Radio Group
Menyisipkan List/Menu
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > List Menu
• Klik tombol ikon pada Insert Bar
Berikut gambar List/Menu
Gambar 8.9 Kotak Dialog List/Menu
53
Menyisipkan File Field
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > File Field
• Klik tombol ikon pada Insert Bar
Gambar 8.10 Tampilan File Field
Menyisipkan Button
Langkahnya sebagai berikut :
• Pilih menu Insert > Form > Button
• Klik tombol ikon pada Insert Bar
2. Memberi nama button, ketikkan pada kotak teks Label
3. Tentukan aksinya, pilih Submit atau Reset
8.3 Contoh Pembuatan Form
Lakukan langkah berikut ini untuk membuat tampilan form isian :
1. Buka sebuah document window dan beri judul : Form Isian
2. Atur Propertinya, sebagai berikut :
• Warna Latar belakang : #fffcc
• Teks beri warna #000000
• Left margin : 0
• Top Margin : 0
• Margin Width : 0
• Margin Height : 0
3. Tambahkan teks “Form Isian” sebagai judul dari form.
4. Atur teks dengan menggunakan Bank Gothic Lt Bt, ukuran font : 4 dan beri
warna font : #000099
5. Tambahkan teks dibawahnya dengan ”Isikan identitas Anda pada form berikut
ini :
54
6. Atur format teks tersebut dengan font Georgia, Times New Roman, Times,
Serif dengan ukuran font 4 dan warna : #000099
7. Atur perataan teks dengan Text Indent agar posisi dari teks tidak terlalu ke
kiri.
Gambar 8.11 Tampilan Hasil Form Isian yang sudah jadi
55
Bab 9
Membuat Navigasi/Link
Navigasi merupakan sarana utama di dalam sebuah web. Navigasi
membantu user agar mudah menemukan dan tidak tersesat di dalam web
dengan cepat. Navigasi memegang peran penting terhadap keberhasilan sebuah
situs. Navigasi yang benar, indah dan mudah dimengerti akan memudahkan user
internet sehingga akan membuat daya tarik bagi pendatang baru.
9.1 Membuat Link
Sebenarnya sebuah Link hanyalah menambahkan perintah tag <a
href=””></a>. Anda dapat menambahkan tag <a name> pada lokasi yang
diinginkan. Tag ini merupakan semacam pemberi alamat atau penanda bagian
halaman supaya dapat dikenali dan menjadi target link.
Beberapa target link :
• Link ke Halaman lain
• Link ke Situs lain
• Link ke file lain
• Link ke lokasi lain
• Link ke email
• Link null/kosong
9.2 Membuat Link Anchor
Link Anchor digunakan untuk membuat link ke lokasi tertentu dalam
dokumen. Biasanya dipakai jika dokumen sebuah halaman panjang sekali. Agar
tidak perlu malakukan scroll dan langsung kepada tulisan yang diinginkan.
56
Langkah-langkahnya sebagai berikut :
1. Siapkan teks data yang diinginkan
2. Tempatkan kursor pada bagian yang akan diisi dengan Anchor
3. Klik tombol Named Anchor pada Insert Bar kategori Common untuk
membuka kotak dialog Named Anchor.
Gambar 9.1 Tampilan Named Anchor
4. Isikan nama untuk Anchor
5. Klik Ok jika sudah selesai
Setelah Anchor yang dibuat sudah selesai. Kita tinggal menghubungkan
teks dengan tanda yang sduah ada. Lakukan langkah berikut :
1. Pilih teks yang akan dijadikan link
2. Pada Property Inspector, isikan pada kotak link tanda pagar # diikuti nama
Anchor yang sudah dibuat.
Gambar 9.2 Pemberian link pada teks
3. Jika ingin melihat hasil, silahkan dilihat di browser
9.3 Membuat Link Email
Tujuan membuat link email agar saat di klik, maka akan terbuka sebuah
jendela untuk membuat sebuah message baru dari program yang telah di set,
57
seperti Microsoft Outlook atau Outlook Express dan secara otomatis
menampilkan alamat email dalam link di bagian To.
Langkah-langkahnya sebagai berikut :
1. Tempatkan kursor pada tempat dimana akan disisipkan sebuah email.
2. Pilih email Insert > Email link atau dengan menekan tombol pada Insert Bar
kategori Common.
Gambar 9.3 Kotak dialog Email link
Gambar 9.4 Tampilan Property Inspector dengan alamat email
9.4 Membuat Link dengan Flash
Untuk membuat teks flash, lakukan langkah-langkah berikut :
1. Tempatkan kursor di document view
2. Klik tombol sehingga akan muncul kotak dialog
58
Gambar 9.5 Tampilan kotak Dialog Insert Flash Text
9.5 Membuat Link dengan Flash Button
Berbeda dengan flash text, Flash Button merupakan sebuah tombol yang
dapat diisi dengan teks dengan tampilan yang lebih variatif.
Caranya sebagai berikut :
1. Tempatkan kursor di document view
2. Klik tombol sehingga akan muncul kotak dialog. Atau dengan cara pilih
menu Insert > interactive image > Flash Button
59
Gambar 9.6 Tampilan Insert Flash Button
9.6 Membuat Navigasi
Navigasi bar merupakan suatu cara lain untuk membuat link dengan
menggunakan sebuah atau beberapa sumber yang menjadi satu dalam navigasi
utama.
Langkah-langkahnya sebagai berikut :
1. Pilih menu Insert > Image Objek > Navigation Bar atau dengan mengklik
tombol Navigation Bar .
Beberapa keterangan :
• Up Image, menampilkan gambar awal di browser
• Over Image, menampilkan gambar saat mouse diarahkan ke gambar.
• Down Image, menampilkan gambar saat terjadi klik pada gambar
60
• Over While Down Image, menampilkan gambar sewaktu mouse mengarah
kapada gambar.
Gambar 9.7 Kotal Dialog Insert Navigation Bar
Membuat Jump Menu
Jump menu merupakan fasilitas Dreamweaver 8 yang menampilkan menu
pull-down dalam suatu form dan mampu menyediakan link dengan tempat
terbatas. Ada 2 jump yakni jumap yang lanagsung dan jump memakai tombol.
Langkahnya adalah :
• Klik tombol Jump Menu pada Insert Bar kategori Form atau dengan
memakai menu Insert > Form > Jump Menu
61
Gambar 9.8 Kotak doalog Insert Jump Menu (Jika ingin menambahkan button GO maka pada option ’Insert go button after menu’ di isi)
Membuat Pop-Up Menu
Pop-up banyak dipakai dalam membuat menu terutama bila isi web
berstruktur cukup banyak. Selain tidak memakan tempat dan bertingkat, kita
tidak perlu bingung dalam menempatkan menu ini. Kita dapat menggunakan teks
atau gambar dalam hal ini.
Sebelum mebuat pop-up, kita harus membuat sebuah teks penghubung.
Adapaun langkah-langkahnya adalah sebagai berikut :
1. Pilih teks yang akan dijadikan penghubung
2. Buatlah sebuah lenk kosong untuk teks tersebut pada Properti Inspector
dengan memberikan tanda # pada kotak Link. Link kosong ini berfungsi untuk
menampilkan pop-up menu.
62
Gambar 9.9 Tampilan link kosong pada teks sebagai menu
3. Pilih menu Window > Behaviors dan aktifkan panel Behaviour atau anda
juga dapat menggunakan kombinasi Ctrl+F3.
4. Aktifkan pada teks pertama, Klik tanda pada panel Behaviour. Kemudian pilih
submenu Show Pop-up Menu pada tampilan yang ada sehingga tampil kotak
dialog Show Pop-up Menu, seperti gambar di bawah ini.
Gambar 9.10 Tampilan kotak dialog Show Pop-Up Menu
63
5. Pastikan anda aktif pada tabulasi Contents. Pada bagian ini, isi dan pilih
beberapa ketentuan berikut :
• Masukkan nama menu pada kotak teks
• Tentuka alamat URL pada kotak Link. Jika akan difungsikan sebagai label saja,
maka kosongkan saja.
• Tentukan target linknya pada kotak target
• Anda dapat menambahkan menu lagi dengan klik tombol .
• Tombol Indent Item digunakan untuk membuat isi menu, sehingga item
tambahan akan masuk. Jika ingin mengembalikan ke posisi semula. Silahkan klik
.
• Tombol panah atas atau bawah digunakan untuk menaikkan atau
menurunkan posisi item.
6. Aktifkan tab Appearance untuk mengubah tampilan menu pop-up.
Gambar 9.11 Tab Appearance
64
Aktifkan tab Advanced. Berfungsi untuk mengubah tampilan kotak menu pop-
up.
Gambar 9.12 Tab Advanced
7. Klik tab Position untuk mengatur posisi pop-up menu.
Gambar 9.13 Tab Position
8. Untuk mengakhiri pembuatan menu Pop-Up, klik OK.
65
Gambar 9.14 Tampilan Pop-Up Menu pada jendela browser
Mengatur Validasi pada Form
Aksi behaviour ini berfungsi untuk melakukan validasi form. Jika anda
menggunakan form pengisian, aksi behaviour ini akan sangat membantu
mengingat di dalam sebuah form pasti akan mempunyai proses validasi. Ada 2
buah validasi yang sering digunakan, yaitu validasi client side dan server side.
Sebuah form pengisian biasanya menggunakan validasi client side.
Untuk menggunakan behaviour validation form, ikutilah langkah berikut :
1. Buat form pada document window.
Gambar 9.15 Contoh tampilan form
66
2. Aktifkan tombol Submit, kemudian klik tombol plus pada panel Behaviour.
Pilih aksi Validation Form pada menu yang muncul untuk membuka kotak
dialog Validation Form.
Gambar 9.16 Tampilan kotak dialog Validation Form
Setelah selesai klik OK, dan kemudian tes dengan browser.
Gambar 9.17 Hasil validasi.
Mengatur Tampilan Layer
Behaviour ini sangatlah menarik untuk meningkatkan interaktif dan daya
tarik sebuah halaman web. Dengan menggunakan behaviour Show-Hide Layers
dapat membuat menu, gambar dan informasi tersembunyi yang ditampilkan
hanya pada saat dibutuhkan saja. Untuk lebih jelasnya, silahkan ikuti langkah-
langkah berikut :
1. Aktif pada halaman document window anda
2. Tambahkan sebuah tabel dengan teks dan desainlah tabel dengan bentuk
seperti dibawah ini.
67
Gambar 9.18 Tabel untuk Show-Hide Layer.
3. Selanjutnya buat 2 buah layer dengan nama yang berbeda.
Gambar 9.19 Layer untuk Show-Hide Layer.
4. Atur tampilan dari kedua layer tersebut menjadi hidden (tersembunyi)
5. Buatlah link kosong untuk teks Makanan dan Minuman
6. Aktifkan teks Makanan kemudia klik tanda plus pada panel Behaviour untuk
menambahkan aksi Show-Hide Layers sehingga akan tampak sebuah kotak
dialog Show-Hide Layers.
Gambar 9.20 Tabel untuk Show-Hide Layer.
7. Pada bagian layer ‘Makanan’ kemudian klik Show dan kemudian OK.
8. Pada panel Behaviour, ubah onCLick menjadi onMouseOver.
9. Ulangi langkah yang sama terhadap ‘makanan’.
10.Pada bagian layer ‘Makanan’ kemudian klik Hide dan kemudian OK.
11.Pada panel Behaviour, ubah onCLick menjadi onMouseOout.
68
12.Ujilah dalam browser.
Gambar 9.21 Hasil tampilan Show-Hide Layer
9.7 Efek Transisi
Efek Transisi digunakan untuk membuat animasi pada halaman web. Ini
bisa dinikmati dengan IE. 4 keatas. Yang dibutuhakan hanyalah sebuah elemen
yang ada pada <meta> di HTML.
Ada 24 macam efek transisi yang disediakan Dreamweaver.
69
Menyisipkan Efek Transisi
Berikut ini cara menyisipkan efek transisi dengan menggunakan meta tag.
1. Tampilkan halaman web yang akan disisipi efek transisi.
2. Pilih menu Insert > HTML > Head Tags > Meta.
Gambar 9.22 Tampilan kotak dialog Meta
3. Pada bagian Attribute, pilih HTTP-Equivalent.
4. Pilih bagian Value, pilihlah item sesuai yang anda inginkan.
• Page-enter : Saat masuk halaman lain dalam suatu situs.
70
• Page-Exit : Saat keluar dari sebuah halaman situs.
• Site-Enter : Saat masuk ke sebuah website.
• Site-Exit : Saat keluar dari website.
5. Di bagian Content, isikan RevealTrans(Duration=15, Transition=23)
sehingga hasilnya akan tampak.
• Duration, Menentukan waktu yang diperlukan untuk menjalankan sebuah efek
sampai efek tersebut selesai dimainkan.
• Transition, Menentukan jenis trannsisi dengan mencantumkan nilainya.
Gambar 9.23 Contoh tampilan efek transisi
71
Bab 10
Cascading Style Sheet (CSS)
CSS (Cascading Style Sheet) merupakan salah satu cara yang sangat
populer dalam teknologi web untuk melakukan optimasi atau efisiensi dalam
menyimpan setting tampilan baik warna, font atau gambar.
Dalam Dreamweaver sendiri menyediakan fasilitas template untuk membuat
CSS. Dengan cara File > New > CSS Style Sheets sehingga akan muncul gambar
di bawah ini:
Gambar 10.1 Template CSS
72
Jika anda ingin membuat CSS sendiri maka ikuti langkah-langkah berikut ini :
1. Pada Menu Window > pilih satu file HTML.
2. Pilih menu Window > CSS style, untuk menampilkan Panel CSS style.
3. Diatas Panel CSS style, klik tombol radio button Edit Style untuk menampilkan
style yang telah tersedia. Dan perlu anda ingat jika anda sebelumnya belum
mendefinisikan stylenya pada dokumen anda, maka akan ada pesan no style
