Pengenalan Macromedia Dreamweaver MX

Click here to load reader

  • date post

    04-Aug-2015
  • Category

    Documents

  • view

    263
  • download

    3

Embed Size (px)

Transcript of Pengenalan Macromedia Dreamweaver MX

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. 2. 3. 4. 5. 6. Merencanakan website Membuat struktur dasar Membuat website Menguji website Menerbitkan website 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

Property Inspector

Nama File HTML Tag Selection Keterangan : Title Bar, adalah baris yang menampilkan nama program dan nama Menu Bar, berisi perintah-perintah untuk merancang dan mengolah Insert Bar, berisi tombol-tombol untuk memasukkan berbagai jenis objek Document Toolbar, terdiri dari tool-tool untuk menentukan model Panel Group, berisi panel-panel dari berbagai fungsi Dreamweaver spt : Tag Selection, menampilkan informasi tag-tag yang sedang aktif Property Inspector, berisi pengaturan-pengaturan untuk diterapkan pada dokumen yang sedang aktif dokumen website ke dokumen website yang sdg kita buat, agar lebih cepat, mudah dan praktis tampilan dan judul halaman website Design, Code, Application, Tag Inspector, Files, Frames, dan History Document Window

suatu objek, sehingga isi dari Property Inspector ini akan berubah sesuai dengan objek yang sedang aktif 3

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 filefile 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 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. PERTANYAAN Siapa target penggunanya ? Bagaimana cara website dapat menjangkau target ? Apa tujuan website/situs ini ? Bagaimana cara mengumpulkan informasi Dari mana bahan/materi untuk situs multimedia ? Berapa anggarannya ? Berapa lama waktu untuk membuat website Siapa yang masuk dalam tim Seberapa sering situs harus diperbarui Siapa yang bertanggungjawab merawat situs ini JAWABAN Orang dewasa, remaja, anak-anak atau semua umur Kata-kata, gambar, animasi, gabungan dll. Menjual produk, menyediakan informasi Menggunakan dokumen yang ada, mencari informasi diluar, merekrut karyawan yang kompeten Perusahaan sendiri atau dari luar Terbatas, cukup, sangat banyak 1 bulan, 2 bulan, 1 tahun Sendiri, 1 orang, 2 orang atau banyak orang dan disesuaikan dengan kebutuhan Setiap hari/minggu/bulan/per periodic a/t tergantung kebutuhan 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 : HOME PAGE

ABOUT US

CONTACT US

PRODUCTS

CUSTUMER SERVICE

KOMPUTER

PRINTER

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

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 (CtrlS). 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. 2. blok teks yang akan kita ubah ukurannya. Kemudia klik Menu Text, lalu klik tanda panah pada kotak Size di Property Inspector, lalu pilih klik Size kemudian pilih angka 1 s/d 7, atau 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. 2. 3. letakkan kursor di posisi untuk menyisipkan karakter khusus tersebut. klik Insert, dan klik Special Characters 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 ... 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.

10

digunakan 4) 5) 1)

Style, untuk memilih model penomoran atau bullet yang akan Start Count, isilah dengan angka untuk memulai penomoran. New Style, untuk memilih format yang sudah ada. Reset Count to, untuk mengulang penomoran mulai dari Setelah melakukan pengaturan yang diperlukan, klik OK. Berikutnya ketiklah teks. Letakkan kursor diposisi yang kita inginkan, kemudian klik menu

Pilihan ini hanya aktif jika List Type-nya adalah Numbered List.

angka tertentu.

Membuat Bullet 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 1) 2) Bloklah teks yang akan dibuat definition list. Tiap baris teks harus Klik kanan pada teks yang diblok tersebut, klik List, lalu klik

Cara membuat definition list : berupa paragraf 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 : 11

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.

12

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

Menu

Isi Website

Hak Cipta

Identitas Website mencakup : Nama dan logo perusahaan atau instansi pemilik Menu Website biasanya terletak dibawah identitas atau disebelah kiri halaman

website, gambar-gambar pendukung, slogan dan lainnya. 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 Untuk menentukan ketebalan sel, masukkan angka pada cell padding.

border, masukkan angka 0. Untuk menentukan jarak antar sel, masukkan angka pada cell spacing. Defaultnya kosong.

13

Untuk manipulasi tabel, kita juga dapat menambah baris/kolom, menghapus baris/kolom, dan juga menggabungkan baris/kolom. 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.

14

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 : SELAMAT DATANG DI SITUS KAMI Isi data diri anda dalam form ini : Nama : Umur : List/Menu NIM : TextField TextArea Saran anda tentang situs ini : Layer Form

S ubm i t

R e se t

Button

Gunakan icon-icon pada tab Forms dari Panel Insert untuk membuat form

1

2 1. 2. 3. 4. 5. 6. 7.

3

4

5

6

7

8

9

10

11 12 8.

13 14 Insert List/Menu Insert Jump Menu Insert Image Field Insert File Field Insert Button Insert Label Insert Fieldset

Keterangan : Insert Form Insert Text Field Insert Hidden Field Insert Text Area Insert CheckBox Insert Radio Button Insert Radio Group

9. 10. 11. 12.13. 14.

Untuk membuat form, klik Insert Form sehingga terbentuk kotak gridlines dilayar dokumen.

15

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 :

16

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.

17

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

18