pengenalan macromedia dreamweaver mx
TRANSCRIPT
BAB I
PENGENALAN MACROMEDIA
A. Macromedia Dreamweaver MX
Macromedia Dreamweaver MX adalah program aplikasi web editor terpopuler
saat ini (penulis : versi terbaru adalah Macromedia Dreamweaver MX 2004). Selain
tampilannya yang lebih menarik, kamampuan dan fitur-fitur baru akan memudahkan
para pemakainya untuk menciptakan halaman web dengan cepat dan mudah tanpa harus
berlama-lama menuliskan baris-baris kode HTML. Salah satu kelebihan Dreamweaver
MX adalah memiliki kemampuan yang mendukung pemrograman Script Server Side
seperti Active Server Page (ASP), Java Server Page (JSP) dan PHP. Selain itu,
Dreamweaver juga mendukung pemrograman Client Side seperti HTML dan Java
Script.
Mendesain website dengan Macromedia Dreamweaver (selanjutnya disingkat
MacDream), kita dapat menggunakan obyek yang dibuat dengan Macromedia Flash dan
Macromedia Fireworks yang kemudian kita impor ke MacDream sehingga
mendapatkan hasil yang optimal.
Ada banyak cara yang digunakan untuk membuat suatu website. Kita dapat
mulai dengan menentukan strategi atau tujuan dari website. Jika membuat aplikasi,
maka kita harus membuat database yang diperlukan dan setelah itu baru merancang
tampilan website. Setelah rancangan selesai, buatlah website dan kode HTML-nya,
tambahkan isi dan hal-hal yang interaktif, kemudian buat link (hubungan) antar halaman
web dalam website itu. Kemudian lakukan pengujian atas fungsi web untuk mengetahui
apakah sudah memenuhi tujuan yang ingin dicapai. Langkah terakhir adalah
menerbitkan website tersebut pada sebuah server. Beberapa pembuat website juga
melakukan tahapan perawatan (maintenance) untuk menjaga agar website itu tidak
ketinggalan jaman (up to date).
Jadi singkatnya, langkah-langkah pembuatan website adalah :
1. Merencanakan website
2. Membuat struktur dasar
3. Membuat website
4. Menguji website
5. Menerbitkan website
6. Memperbarui/Merawat website
B. Kebutuhan Sistem
Agar MacDream MX berjalan secara optimal, spesifikasi hardware dan software
yang harus dipenuhi adalah :
1. Prosesor komputer minimal Intel Pentium III 600MHz atau yang setara (tapi
sebaiknya menggunakan Intel Pentium IV atau yang setara)
1
2. Sistem Operasi sebaiknya Windows 2000/XP/Vista
3. RAM minimal 256MB
4. Ruang Harddisk yang tersisa minimal 1 GB (dianjurkan lebih dari 1GB)
5. Resolusi monitor 1024 x 768 pixel atau lebih
6. Sebuah CD-ROM drive
C. Memulai Program
Setelah MacDream MX kita install ke dalam komputer, untuk menjalankan
program caranya (dengan Windows XP) : Klik Start, pilih All Program, pilih
Macromedia, lalu klik MacDream MX. Apabila program MacDream baru pertama kali
kita jalankan, akan tampil Workspace Setup.
Pada Workspace Setup tersebut, ada dua pilihan interface yang harus kita pilih,
yaitu Designer dan Coder. Interface Designer menampilkan ruang kerja secara visual,
sedangkan Interface Coder menampilkan ruang kerja secara coding yaitu dengan
menuliskan scriptnya.
Interface Designer banyak dipakai oleh mereka yang tidak menguasai atau tidak
suka menulis bahasa pemrograman web yang panjang. Dengan tampilan kerja visual,
kita akan lebih mudah merancang dan mendesain web page tanpa harus menulis script
yang panjang.
Untuk mengganti tampilan Workspace dengan menekan tombol Ctrl-U, lalu
klik tombol Change Workspace, pilih workspace, lalu klik OK. Perubahan Workspace
dilakukan setelah kita menutup MacDream, dan memanggil kembali.
D. Starting Page
Saat mulai program MacDream MX, halaman yang pertama kali muncul adalah :
(maaf tidak ada contoh gambarnya)
2
BAB 2
RUANG KERJA MACROMEDIA DREAMWEAVER MX
A. Workspace Dreamweaver
MacDream MX tampil dengan ruang kerja yang menarik, seperti gambar ini :
Title Bar Menu Bar Panel Group
Insert
Nama File HTML
Tag Selection Document Window
Keterangan :
Title Bar, adalah baris yang menampilkan nama program dan nama dokumen
yang sedang aktif
Menu Bar, berisi perintah-perintah untuk merancang dan mengolah dokumen
website
Insert Bar, berisi tombol-tombol untuk memasukkan berbagai jenis objek ke
dokumen website yang sdg kita buat, agar lebih cepat, mudah dan praktis
Document Toolbar, terdiri dari tool-tool untuk menentukan model tampilan
dan judul halaman website
Panel Group, berisi panel-panel dari berbagai fungsi Dreamweaver spt :
Design, Code, Application, Tag Inspector, Files, Frames, dan History
Tag Selection, menampilkan informasi tag-tag yang sedang aktif
Property Inspector, berisi pengaturan-pengaturan untuk diterapkan pada
suatu objek, sehingga isi dari Property Inspector ini akan berubah sesuai
dengan objek yang sedang aktif
3
Property Inspector
Document Window, merupakan ruang kerja Dreamweaver sebagai tempat
untuk membuat halaman website
B. Icon-Icon Insert Bar
Pada Insert Bar terdapat icon-icon yang berfungsi untuk memasukkan berbagai
macam objek ke dalam halaman website. Icon-icon tersebut dikelompokkan kedalam
tab-tab, yaitu : Common, Layout, Forms, Text, HTML, Application, Flash elements,
dan Favorites.
Tab Common, terdiri dari : Hyperlink, email link, Named Anchor, Table, Image, Flash,
Date, Comment, Template, dan Tag Chooser.
Tab Layout, terdiri dari : Table, Insert Div Tag, Draw Layer, Layout Table, Draw
Layout Cell, Insert Row Above, Insert Row Below, Insert Column to the
left, Insert Column to the right, Frame, dan Tabular data.
Tab Form, terdiri dari : Form, Text Field, Hidden Field, Text Area, Check Button,
Radio Button, Radio Group, List/Menu, Jump Menu, Image Field, File Field,
Button, Label, dan Field Set.
Tab Text, terdiri dari : Font Tag Editor, Bold, Italic, Strong, Emphasis, PRE, Heading 1,
Heading 2, Heading 3, Unordered List, Ordered List, List Item, Definition
List, Definition Term, Definiton Description, dan Characters.
Tab HTML, terdiri dari : Horizontal Rule, Head Content, Table, Frame, Script dll.
C. Property Inspector
Property Inspector adalah bagian ruang kerja MacDream yang berfungsi untuk
mengatur property objek yang sedang aktif. Property ini berada pada bagian paling
bawah Workspace Dreamweaver, yaitu dibawah Tag Selection. Tampilan dan isi
Property Inspector akan berubah sesuai dengan objek yang sedang aktif.
D. Panel Group
Panel Group adalah bagian ruang kerja Dreamweaver yang berisi panel-panel
yang terletak pada satu jendela. Panel Groups standarnya berada dibagian paling kanan
Workspace Dreamweaver.
Masing-masing panel berisi menu-menu yang ditampilkan dalam bentuk tab.
Apabila kita membuka salah satu panel tersebut, misalnya panel file, maka terlihat file-
file yang kita gunakan dalam suatu website.
E. Document Window
Document Window adalah ruang kerja Dreamweaver yang digunakan sebagai
tempat untuk membuat halaman web. Ada tiga model tampilan pada Document
Window, yaitu : Code, Split, dan Design.
Code View menampilkan dokumen web dalam bentuk kode. Split View
menampilkan dokumen web dalam bentuk kode dan desain. Sedangkan Design View
menampilkan dokumen web dalam bentuk desain.
4
BAB 3
MEMBUAT WEBSITE
A. Merencanakan Website
Membuat website adalah proses yang rumit. Biasanya diperlukan suatu team
yang terdiri dari banyak orang dengan berbagai peran untuk memastikan bahwa website
itu berisi informasi yang akurat, tampilannya menarik dan kerjanya lancar.
Agar suatu website dapat diakses di internet, website harus dimasukkan ke suatu
web server dengan alamat IP (Internet Protocol) yang permanent. Alamat IP adalah
serangkaian angka yang menjadi alamat di Internet (penulis : untuk penjelasan IP dapat
mengikuti kuliah Sistem Jaringan/Internet). Untuk mengakses suatu website, dapat
mengetik alamat IP (yang tidak lazim) atau nama domainnya. Nama domain adalah
alamat web yang sudah mewakili alamat IP (IP public) dan biasanya nama usaha yang
diwakili oleh website itu.
Merencanakan website adalah hal penting dari suatu proyek pembuatan website.
Untuk memulainya, buatlah daftar pertanyaan dan jawaban mengenai website itu.
Contoh daftar pertanyaan dan jawaban :
NO PERTANYAAN JAWABAN
1. Siapa target penggunanya ?Orang dewasa, remaja, anak-anak atau semua umur
2.Bagaimana cara website dapat menjangkau target ?
Kata-kata, gambar, animasi, gabungan dll.
3. Apa tujuan website/situs ini ?Menjual produk, menyediakan informasi
4.Bagaimana cara mengumpulkan informasi
Menggunakan dokumen yang ada, mencari informasi diluar, merekrut karyawan yang kompeten
5.Dari mana bahan/materi untuk situs multimedia ?
Perusahaan sendiri atau dari luar
6. Berapa anggarannya ? Terbatas, cukup, sangat banyak
7.Berapa lama waktu untuk membuat website
1 bulan, 2 bulan, 1 tahun
8. Siapa yang masuk dalam timSendiri, 1 orang, 2 orang atau banyak orang dan disesuaikan dengan kebutuhan
9. Seberapa sering situs harus diperbaruiSetiap hari/minggu/bulan/per periodic a/t tergantung kebutuhan
10.Siapa yang bertanggungjawab merawat situs ini
Sendiri atau anggota tim
5
Bagian lain dari perencanaan adalah membuat rancangan struktur dasar website
(sketsa). Sketsa menunjukkan berapa halaman web yang diperlukan dalam website itu.
Contoh sketsa :
B. Membuat Website
Setelah membuat sketsa, kita mulai mempersiapkan file-file yang akan
digunakan untuk membuat halaman web, seperti : teks, gambar, animasi, video.
Beberapa file mungkin dari software lain atau dari dreamweaver. Halaman web yang
terlalu banyak gambar dan animasi akan membutuhkan waktu lama untuk muncul
dilayar, sehingga pengunjung website mungkin akan meninggalkan web tersebut.
C. Membuat Folder gambar
Setelah membuat situs/web, lalu kita membuat folder untuk menampung file-file
gambar. Misal nama foldernya adalah assets. Kemudian folder tsb. kita jadikan default
untuk menyimpan gambar. Kita juga dapat membuat subfolder pada folder assets untuk
menyimpan file-file tertentu, seperti file animasi, grafik, dan suara/sound.
6
HOME PAGE
ABOUT US CONTACT US PRODUCTS CUSTUMER SERVICE
KOMPUTER PRINTER
BAB IV
MEMBUAT DOKUMEN WEBSITE
Setelah kita membuat situs (nama, dan folder untuk menyimpan file-file web).
Langkah berikutnya kita membuat halaman-halaman web untuk mengisi website.
Pertama adalah membuat file baru, yaitu klik menu File dan pilih New kemudian
pilih HTML dan klik tombol Create. Jika baru pertama kali kita membuka Macromedia,
muncul menu Starting Page seperti gambar dibawah ini :
Gambar 1 : Starting Page
Berikutnya adalah membuat Home Page. Home page adalah halaman web yang
pertama kali dilihat oleh pengunjung web. Halaman web ini biasanya diberi nama
index.htm. Dari sinilah kita memulai membuat isi web. Berikutnya anda tentukan
sendiri isi atau konten pada halaman ini, kita bisa menentukan objeknya seperti teks,
gambar, animasi, sound, navigation bar (untuk link ke halaman lain) dan propertiesnya
untuk masing-masing objek tersebut.
Lebih jelasnya, ikuti contoh pembuatan Home Page sederhana berikut ini :
Gambar 2 : Home Page
7
Untuk membuat tampilan Home Page diatas, lakukan langkah berikut ini :
1. Klik icon draw layer sebanyak 3x untuk membuat layer yang terbagi menjadi
3 bagian, yaitu kiri atas, kiri bawah, dan kanan.
2. untuk layer kiri atas beri warna background sesuai dengan selera anda, yaitu
klik layer dan tentukan warna (bgcolor) pada properties layer (disebelah
kiri bawah). Ketik “Welcome to website” pada bagian dalam layer dan
tentukan warna text tsb. sesuai selera pada properties text.
3. dan tentukan untuk layer dikiri bawah (langkah sama dengan pembuatan
layer pada kiri atas)
4. untuk layer disebelah kanan, klik Icon Image, dan pilih gambar yang ingin
anda tampilkan di home page ini (gambar dapat diambil dari sembarang
folder yang ada file gambar dan secara otomatis akan tersimpan di folder
Assets (folder untuk menyimpan gambar) sebagai folder default.
5. terakhir anda simpan file ini dengan klik menu File dan Klik Save (Ctrl-S).
Ket. : umumnya home page ini disimpan dengan nama index.htm apabila akan
dipublish ke Internet
Berikutnya kita akan menambah halaman web, dengan cara klik menu File dan
klik New lalu akan muncul seperti menu Starting Page dan pilih button Create.
Langkah berikutnya buat tampilan untuk halaman web yang baru, sesuai gambar
dibawah ini :
Gambar 3 : Halaman 2 Web
Untuk menghubungkan home page anda dengan halaman 2 web ini, maka kita harus
membuat link. Perintah Link akan dibahas pada BAB IX & BAB X.
8
BAB V
MENGATUR TEKS
Teks merupakan unsur yang paling dominan pada sebuah halaman web. Ada
beberapa cara untuk menuliskan teks pada dokumen web, yaitu : langsung diketik di
layar, dicopy dari software Word Processor, atau mengkonversi file lain menjadi file
HTML, kemudian dikonversikan ke Dreamweaver. Jika kita mengcopy file dari
software lain, maka format teks tidak sama dengan format aslinya. Berikut ini beberapa
hal tentang pengaturan teks.
A. Mengatur Ukuran Font
Dalam HTML untuk mengatur ukuran huruf ada beberapa cara. Dengan Style
Sheet sama dengan Microsoft Word. Dalam HTML terdapat ukuran dasar dengan skala
absolur 1 s/d 7 atau skala relatif +1 s/d +7 dan -1 s/d -7. Ukuran 3 sama dengan 12 point
pada Ms-Word.
Cara mengatur ukuran huruf ada 2 sbb. :
1. blok teks yang akan kita ubah ukurannya. Kemudia klik Menu Text, lalu klik
Size kemudian pilih angka 1 s/d 7, atau
2. klik tanda panah pada kotak Size di Property Inspector, lalu pilih ukuran
hurufnya.
B. Menggunakan Text Style
Text style yang umum adalah Bold (tebal), Italic (miring), dan Underline (garis
bawah) selain style lainnya seperti superscript, subscript dll. Pada dreamweaver bisa
dengan klik Text dan pilih Style atau pada Tab Insert pilih Panel Text atau pilih pada
Properties Text.
C. Menyisipkan Karakter Khusus
Untuk menyisipkan karakter khusus, lakukan langkah-langkah berikut :
1. letakkan kursor di posisi untuk menyisipkan karakter khusus tersebut.
2. klik Insert, dan klik Special Characters
3. berikutnya pilih dan klik karakter yang akan digunakan, lalu klik OK.
D. Menambah Spasi antar kata
Ketika kita mengetik teks pada dokumen web, jarak standar spasi antar kata
adalah satu kali spasi. Kita tidak bisa menambah jarak spasi tersebut walaupun kita
menekan tombol Spacebar berulang-ulang. Cara menambah jarak spasi antar kata pada
dokumen web : klik menu Insert, klik Special Characters lalu klik Non-Breaking Space
atau tekan tombol Ctrl+Shift+Spacebar.
9
BAB VI
MENGATUR PARAGRAF
Paragraf pada HTML adalah unit teks di antara dua tag <p>..</p>. Untuk
membuat paragraf baru, setelah mengetik satu paragraf, tekan tombol Enter di keyboard,
satu baris kosong akan disisipkan. Untuk membuat baris baru tanpa perlu menyisipkan
satu baris kosong, cukup tekan tombol Shift+Enter.
A. Membuat Heading
Heading atau header sama dengan judul (berita/bab/buku dll). umumnya, header
lebih besar daripada teks lainnya. Header biasanya dicetak tebal. Dreamweaver
menyediakan 6 ukuran header, yaitu : Heading 1 (header terbesar ) s/d Heading 6
(header terkecil).
Cara mengubah teks menjadi heading :
Blok teks yang akan dirubah
Klik Text, klik Paragraph Format, klik ukuran Heading yang sesuai atau pilih
heading di menu Text pada Insert Bar atau klik kotak Format di Property
Inspector lalu pilih heading yang sesuai.
Teks akan menjadi heading, ukuran teks berubah, tebal, dan ada baris kosong
setelah baris heading tersebut.
B. Menggunakan List
List adalah fasilitas untuk membuat penomoran pada Macromedia Dreamweaver.
Ada 2 macam list yang dapat kita gunakan, yaitu Ordered List (untuk membuat
nomor urut) dan Unordered List (untuk membuat bullet).
Membuat Nomor Urut
1) Letakkan kursor diposisi yang kita inginkan, kemudian klik menu Text, pilih
List, lalu klik Ordered List. Atau klik langsung Ordered list pada Property
Inspector.
2) Untuk mengatur list, klik List Item pada Property Inspector, maka tampil
kotak dialog List Properties seperti dibawah ini :
3) Lakukan pengaturan terhadap property yang diperlukan.
List Type, untuk memilih type list yang akan digunakan, yaitu :
penomoran atau bullet.
Style, untuk memilih model penomoran atau bullet yang akan digunakan
10
Start Count, isilah dengan angka untuk memulai penomoran. Pilihan ini
hanya aktif jika List Type-nya adalah Numbered List.
New Style, untuk memilih format yang sudah ada.
Reset Count to, untuk mengulang penomoran mulai dari angka tertentu.
4) Setelah melakukan pengaturan yang diperlukan, klik OK.
5) Berikutnya ketiklah teks.
Membuat Bullet
1) Letakkan kursor diposisi yang kita inginkan, kemudian klik menu Text, pilih
List, lalu klik Unordered List. Atau klik langsung Unordered list pada
Property Inspector.
2) Langkah berikutnya sama dengan membuat Nomor Urut.
Membuat Definition List
Cara membuat definition list :
1) Bloklah teks yang akan dibuat definition list. Tiap baris teks harus berupa
paragraf
2) Klik kanan pada teks yang diblok tersebut, klik List, lalu klik Definition List.
C. Mengatur Perataan Teks
Dreamweaver memiliki fasilitas perataan teks seperti MS-Word, yaitu : left, right,
center dan justify (rata kiri dan kanan). Cara untuk melakukan perataan teks, sbb. :
1) Blok teks yang akan diatur perataannya.
2) Klik menu Text, klik Align, lalu pilih dan klik jenis perataan atau klik icon
alignment di Property Inspector.
D. Membuat Indentasi
Dalam HTML, tidak ada tab biasa, tidak ada alinea yang baris pertamanya dimulai
setelah lima ketukan, tetapi yang ada hanya indentasi untuk satu blok paragraf.
Seperti hasil penggunaan Definition List yaitu dengan menggunakan icon indent di
Property Inspector.
Cara melakukan indentasi, yaitu :
1) Blok teks yang akan di indentasi
2) Klik Text, lalu klik Indent..
3) Untuk menghilangkan indentasi, klik Text, klik Outdent. Atau klik icon outdent
di Property Inspector
E. Menyisipkan Horizontal Rule
Horizontal Rule adalah garis horizontal yang memisahkan bagian-bagian dokumen.
Caranya adalah :
1) Letakkan kursor ditempat garis horizontal akan diletakkan
2) Klik Insert, klik Horizontal Rule atau klik icon Horizontal Rule di menu
Common pada Insert Bar.
11
BAB VII
MENGATUR LAYOUT WEB
Layout adalah tampilan atau tata letak dari suatu halaman web. Agar dapat
membuat website dengan tampilan rapih dan menarik, kita harus menguasai teknik
layout ini. Oleh karena itu, layout menjadi hal penting yang harus kita cermati sebelum
mulai membuat website. Layout sebuah website umumnya terdiri dari beberapa bagian,
yaitu :
Identitas Website mencakup : Nama dan logo perusahaan atau instansi pemilik
website, gambar-gambar pendukung, slogan dan lainnya.
Menu Website biasanya terletak dibawah identitas atau disebelah kiri halaman web.
Menu website berisi menu-menu untuk navigasi atau mengakses isi dari sebuah web
Isi Website merupakan bagian utama dari halaman web yang berisi informasi yang
ingin disampaikan kepada pengunjung website. Isi sebuah web berupa teks atau
gambar.
Hak Cipta biasanya terletak di bagian paling bawah halaman web, berisi hak cipta
kepemilikan sebuah website.
Merancang dan Membuat layout web
A. Menggunakan Tabel
Cara membuat tabel pada dokumen web sbb. :
Klik menu Insert, lalu klik Tabel, maka tampil kotak dialog Table
Ketik jumlah baris (row) dan kolom (column)
Tentukan lebar tabel yang kita inginkan
Tentukan ketebalan border (minimal angka 1), untuk menghilangkan border,
masukkan angka 0.
Untuk menentukan ketebalan sel, masukkan angka pada cell padding. Untuk
menentukan jarak antar sel, masukkan angka pada cell spacing. Defaultnya
kosong.
Untuk manipulasi tabel, kita juga dapat menambah baris/kolom, menghapus
baris/kolom, dan juga menggabungkan baris/kolom.
12
Identitas Website
Menu Isi Website
Hak Cipta
B. Menggunakan Frame
Frame adalah kerangka untuk merancang layout web. Untuk membuat frame pada
Macromedia ada beberapa cara, yaitu :
Menggunakan kotak dialog New Document
Menggunakan menu Modify
Menggunakan Tab Frames dari Insert Bar
C. Menggunakan Tracing Image
Tracing Image adalah gambar yang akan kita gunakan sebagai dasar untuk membuat
layout sebuah web. Berbeda dengan gambar untuk background web, tracing image
tidak kelihatan ketika ditampilkan pada browser. Gambar ini hanya digunakan untuk
membantu kita menentukan posisi layout saja agar isi website mengikuti tampilan
gambar pada tracing image.
D. Menggunakan Layer
Layer termasuk bagian penting dalam membuat layout web. Layer, artinya lapisan
yang digunakan untuk meletakkan berbagai macam objek, seperti : teks, gambar,
animasi dan lain-lain. Layer dapat ditempatkan dibagian mana saja sehingga
memudahkan kita untuk menata layout halaman web.
Untuk membantu menempatkan objek gambar yang akan kita atur mengikuti tracing
image, maka gunakan layer sebagai media penempatan objek gambar, sehingga
penempatan objek gambar menjadi mudah dan flexible.
13
BAB VIII
MENGGUNAKAN FORM
Sebuah website umumnya memiliki form pada halaman webnya. Form ini
berfungsi sebagai media interaksi antara pengunjung dengan pemilik web. Salah satu
contoh penggunaan form adalah fasilitas Buku Tamu. Melalui buku tamu ini, para
pengunjung website mengisi identitas serta menyampaikan apa saja untuk pemilik
website. Seperti menyampaikan pesan, kritik dan saran, pendapat dan lain-lain.
Sebenarnya form ini hanya berfungsi sebagai input data saja, sedangkan data
selanjutnya akan diproses menggunakan script pemrograman server, misalnya : PHP
atau ASP.
Buatlah form seperti dibawah ini : Layer Form
Gunakan icon-icon pada tab Forms dari Panel Insert untuk membuat form
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Keterangan :
1. Insert Form2. Insert Text Field3. Insert Hidden Field4. Insert Text Area 5. Insert CheckBox6. Insert Radio Button7. Insert Radio Group
8. Insert List/Menu9. Insert Jump Menu10. Insert Image Field11. Insert File Field12. Insert Button13. Insert Label14. Insert Fieldset
Untuk membuat form, klik Insert Form sehingga terbentuk kotak gridlines dilayar dokumen.
14
Nama : NIM :
Umur : List/Menu TextField
TextArea
Saran anda tentang situs ini :
Submit Reset Button
SELAMAT DATANG DI SITUS KAMI
Isi data diri anda dalam form ini :
▼
BAB IX
MENYISIPKAN FILE
A. Icon Rollover Image
Fasilitas Rollover Image memproses tiga hal di halaman web, yaitu :
1) Gambar ditampilkan ketika halaman web dibuka
2) Jika user menggerakkan mouse melewati gambar tersebut, maka gambar kedua
akan tampil dan gambar pertama hilang
3) Jika user menjauhkan pointer mouse dari gambar tersebut, maka gambar
pertama kembali tampil.
Fasilitas ini akan membuat kedua gambar yang digunakan tampil dengan ukuran
sama, sesuai ukuran gambar pertama.
Cara membuat tombol rollover image :
Klik menu Insert, lalu klik Interactive Image dan pilih Rollove Image, muncul
Kotak Dialog seperti dibawah ini :
Gambar 9.1 : Rollover Image
Ketik nama Image pada kotak Image Name
Klik Browse untuk mencari lokasi Gambar 1 pada kotak Original Image
Klik Browse untuk mencari lokasi Gambar 2 pada kotak Rollover Image
Ketik Text sebagai Tool Tip di kotak Alternate Text
Jika ingin membuat link dengan web lain, ketik alamat web pada kotak When
Clicked, Go To URL
B. Icon Navigation Bar
Icon Navigation Bar untuk membuat gambar menjadi tombol link antar halaman
web dalam satu situs. Cara menggunakannya adalah :
1. Klik menu Insert, lalu klik Interactive Image dan pilih Navigation Bar, maka
muncul Kotak dialog seperti dibawah ini :
15
Gambar 9.2 : Insert Navigation Bar
2. Masukkan nama pada kotak Element Name, untuk Bar yang pertama. Nama ini
otomatis akan merubah nama pada kotak Nav Bar Elements
3. Masukkan gambar pada kotak Up Image, Over Image, Down Image, dan Over
While Down Image bila perlu, dengan klik tombol Browse
4. Ketik teks sebagai tool tip pada kotak Alternate Text
5. Kotak isian When Clicked, Go To URL untuk menuju situs lain apabila gambar
di klik.
C. Menyisipkan File Flash
File flash dapat disisipkan pada dokumen (sebelumnya kita sudah punya file flash)
dengan cara :
1. letakkan kursor pada halaman web yang akan disisipkan file flash
2. klik menu Insert, klik Media dan klik Flash atau klik icon Flash
3. Muncul kotak dialog Select File, carilah file flash (ekstensi swf atau fla) yang
ingin kita sisipkan.
D. Menyisipkan Flash Button
Flash button adalah file-file kecil yang dapat berisi teks dan link maupun efek
rollover. Flash button merupakan template yang menawarkan berbagai bentuk dan
efek visual yang sudah tersedia. Langkah-2 sbb. :
1. letakkan kursor pada halaman web yang akan disisipkan flash button
2. klik menu Insert, klik Interactive Images dan klik Flash button, maka tampil
kotak dialog Insert Flash Button. (lihat gambar 9.3)
3. Pilih Style tombol flash button dari kotak style.
4. tulis teks untuk tombol flash dikotak Button Text
5. Atur bentuk dan ukuran tulisan pada kota Font dan Size
6. untuk link dengan halaman web lain, tuliskan nama web/situs dikotak Link atau
klik tombol Browse untuk cari lokasi file tersebut.
7. jika selesai, klik OK.
16
Gambar 9.3 : Insert Flash Button
E. Menyisipkan Flash Text
Flash Text adalah cara tercepat dan termudah untuk membuat teks dengan efek
rollover otomatis. Untuk menyisipkannya, lakukan langkah-2 sbb. :
1. letakkan kursor pada baris web yang akan disisipkan. (halaman web harus
disimpan terlebih dahulu)
2. Klik menu Insert, klik Media, lalu klik Flash Text, atau klik icon Flash Text
pada panel Insert dan tab Media.
3. tampil kotak dialog Insert Flash Text (seperti gambar 9.4)
4. ketik Flash Text pada kotak Text.
5. untuk link ke web lain ketik nama web pada kotak Link atau Browse dan cari
nama web lain.
6. kita juga dapat mengganti font, size dan warna atau background.
7. jika sudah yakin, klik OK.
Gambar 9.4 : Insert Flash Text
17