pengenalan macromedia dreamweaver mx

27
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 1

Upload: heri-wibowo

Post on 04-Aug-2015

294 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: 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. 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

Page 2: Pengenalan Macromedia Dreamweaver MX

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

Page 3: Pengenalan Macromedia Dreamweaver MX

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

Page 4: Pengenalan Macromedia Dreamweaver MX

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

Page 5: Pengenalan Macromedia Dreamweaver MX

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

Page 6: Pengenalan Macromedia Dreamweaver MX

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

Page 7: Pengenalan Macromedia Dreamweaver MX

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

Page 8: Pengenalan Macromedia Dreamweaver MX

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

Page 9: Pengenalan Macromedia Dreamweaver MX

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

Page 10: Pengenalan Macromedia Dreamweaver MX

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

Page 11: Pengenalan Macromedia Dreamweaver MX

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

Page 12: Pengenalan Macromedia Dreamweaver MX

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

Page 13: Pengenalan Macromedia Dreamweaver MX

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

Page 14: Pengenalan Macromedia Dreamweaver MX

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 :

Page 15: Pengenalan Macromedia Dreamweaver MX

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

Page 16: Pengenalan Macromedia Dreamweaver MX

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

Page 17: Pengenalan Macromedia Dreamweaver MX

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