Download - Modul Dreamweaver

Heri Susanta, S.Pd.T SMA Negeri 8 Yogyakarta

1

MACROMEDIA DREAMWEAVER MX 2004 I. MENGENAL MACROMEDIA DREAMWEAVER MX 2004

Software DreamWeaver ini merupakan salah satu software untuk mendesain website atau homepage, selain software FrontPage yang sering kita dengar. Untuk memahami cara bekerja dengan DreamWeaver paling tidak ada tiga komponen yang perlu dimengerti pengguna software ini: • Halaman utama: untuk desain website itu sendiri (tampilan web maupun kode HTML) • Obyek / Tool: terdiri dari common, layout, text, frames, forms, templates,character,

head, script dan application. Fungsinya adalah memasukan obyekatau sifat obyek yang Anda inginkan, misalnya memasukan table dan segala sifat-sifatnya, atau membubuhkan sifat text.

• Properties: berfungsi sebagai alat pengedit obyek yang sedang Anda olah. Proporties akan berubah sesuai dengan obyek yang sedang Anda olah. Bila object atau properties tidak tampak pada layar Anda, klik Windows -> properties.

DreamWeaver menyediakan tiga metode dalam mendesain website. Pertama, mendesain dengan menggunakan kode HTML (bahasa dasar dalam membuat website). Metode pertama ini tentunya bagi pendesain yang sudah mahir kode HTMLnya. Kalau kita memilih metode pertama ini, maka layar di tampilan utama ini murni kode-kode HTML. Sekali lagi ini cukup merepotkan bagi pemula. Karenanya tidak dianjurkan bagi pemula menggunakan metode pertama ini.

Kedua, kita bisa desain juga dengan visualisasinya seperti kita mengetik melalui editor word prosesor (MS WORD, misalnya). Metode kedua ini cocok bagi pemula. Karena pendesain tidak perlu repot-repot memikirkan kode HTML. Anda cukup klik tool yang Anda perlukan, DreamWeaver akan membuat sendiri HTML kodenya. Jadi pada dasarnya tool hanya membuat HTML kode. Berbeda dengan metode pertama, layar tampilan yang nampak sama seperti di website. Dalam dunia Desktop Publishing disebut WYSIWYG (What you see is what you get = Apa yang Anda lihat itulah tampilan sebenarnya).

Atau metode yang ketiga, yaitu perpaduan keduanya, mendesain secara visual tapi juga bisa mengedit dengan kode HTML. Metode ini sebetulnya lebih tepat daripada hanya mengandalkan WYSIWYG. Sebab koreksi akan lebih tepat dilakukan dengan kode HTML daripada sekedar tools.

Fasilitas dalam Dreamweaver MX 2004 : Lebih baik dari yang sebelumnya seperti: • Ada peningkatan kemampuan toolbar (dapat memodifikasi toolbar yang ada atau

menambahkan fungsi baru) • Memiliki kemampuan untuk menyunting kode dengan lebih baik • Dapat melakukan print kode pada jendela code view. • Memiliki fasilitas code Hints yang membantu dalam urusan tag serta Tag Inspector yang

sangat berguna dalam menangani tag HTML. • Memiliki panel baru, yaitu panel Snippets yang memberikan fasilitas untuk menyunting

dan menyimpan blok kode yang sering digunakan. • Memiliki fasilitas untuk menangani dokumen baru seperti XHTML, Extension Manager

yang telah ditingkatkan kemampuannya. • Memiliki fasilitas penanganan aplikasi database

Memulai Dreamweaver MX 2004 Start > All Program > Macromedia > Macromedia Dreamweaver MX 2004


2

Ruang Kerja Dreamweaver MX 2004 Pertama kali mulai menjalankan Dreamweaver MX 2004, akan tampil kotak dialog

Workspace Setup yang digunakan untuk memilih tampilan ruang kerja. Ada 2 pilihan ruang kerja yaitu: Designer workspace : sebuah penggabungan ruang kerja menggunakan MDI (multiple

document interface), dimana semua jendela dokumen dan panel tergabung di dalam satu jendela aplikasi yang besar, dengan sisi panel group di sebelah kanan.

Coder workspace : ruang kerja yang tergabung dengan letak sisi panel group berada di seblah kiri.

Komponen-komponen yang disediakan oleh ruang kerja Dreamweaver MX antara lain adalah Insert Bar, Document Toolbar, Document window, kelompok panel, Tag Inspector, Property Inspector dan site panel.

1. Document window berfungsi untuk menampilkan dokumen dimana anda sekarang

bekerja. 2. Insert Bar mengandung tombol-tombol untuk menyisipkan berbagai macam objek

seperti image, table dan layer ke dalam dokumen. 3. Document Toolbar berisi tombol-tombol dan menu pop-up yang menyediakan tampilan

berbeda dari document window. 4. Kelompok panel adalah kumpulan panel yang saling berkaitan satu sama lain, yang

dikelompokkan di bawah satu judul. 5. Tag Selector berfungsi untuk menampilkan hirarki tag di sekitar pilihan yang aktif pada

design view. 6. Property Inspector digunakan untuk melihat dan mengubah berbagai property objek

atau teks. 7. Site panel digunakan untuk mengatur file dan folder yang membentuk situs web anda.

Komponen Ruang Kerja Di dalam ruang kerja Dreamweaver MX 2004 terdapat beberapa komponen utama yang membentuk suatu ruang kerja. Ruang kerja Dreamweaver ini memberikan kesatuan tampilan antara menu utama, panel, property inspector, serta toolbar.

1

2 3

4

5

6

7


3

Menu Utama Di dalam system menu Dreamweaver MX terdapat komponen yang dapat anda gunakan

yaitu: • Menu File dan menu Edit

Berisi item menu standar untuk menu File dan Edit, seperti New, Open, Save, Save all, Cut, Copy, Paste, Undo, dan Redo.

• Menu View Berisi perintah untuk menampilkan beberapa macam tampilan dari dokumen anda (seperti tampilan Design view dan tampilan Code), dll

• Menu Insert Berisikan alternative baris Insert untuk menyisipkan obyek di dalam dokumen.

• Menu Modify Berfungsi untuk melakukan perubahan property pada item atau halaman terpilih.

• Menu Text Berfungsi untuk mempermudah dalam melakukan format teks.

• Menu Commands Berisi akses ke beberapa perintah, format kode yang sesuai dengan format pilihan anda.

• Menu site Berisi item menu untuk mengelola situs dan melakukan upload dan download file.

• Menu Window Menyediakan akses ke seluruh panel, inspector, dan jendela di dalam Dreamweaver.

• Menu Help Menyediakan akses ke doukumen dreamweaver, membuka lembar kerja Help untuk membantu anda dalam menggunakan Dreamweaver.

Baris Standar Saat membuka jendela Dreamweaver, secara default hanya menampilkan Document

Bar tanpa menampilkan Standar Bar.

Untuk mengaktifkan Standard Bar: View > Toolbars > Document dan Standard. > Standard Bar.

Baris Tombol Dokumen Document toolbar berisi tombol-tombol dan menu pop-up yang menyediakan

tampilan berbeda dari document window.

No Nama Keterangan

1 Show code view To menampilkan mode pengetikan kode html dalam jendela code view

2 Show code and design view To menampilkan jendela code view dan design view 3 Show design view To menampilkan jendela design view

4 No browser check errors To melakukan pengecekan kesalahan pada document web

5 Document title To memberikan judul pada dokumen web 6 File management To proses upload dan download file 7 Preview/debug in browser To melihat hasil dalam browser. 8 Refresh site list To melakukan pembaharuan terhadap daftar isi situs anda 9 View options To mengatur pilihan pada tampilan ruang kerja anda


4

Baris Insert Baris Insert terdiri dari tombol-tombol untuk membuat dan menyisipkan obyek seperti

table, layer dan gambar. Jika anda lebih menyukai tampilan kategori seperti tabulasi yang berada di atas baris Insert anda dapat mengganti tampilan baris Insert tersebut dengan cara memilih Show as Tabs pada Insert Bar

Baris Insert digunakan untuk mengatur beberapa kategori pilihan sbb:

• Kategori Common untuk membuat dan menyisipkan beberapa penggunaan obyek biasa, seperti gambar dan table.

• Kategori Layout untuk menyisipkan table, div tag, layer, dan frame. • Kategori Forms berisi tombol-tombol untuk membuat form dan menyisipkan elemen

form. • Kategori Text menyisipkan beberapa teks dan daftar format tag. • Kategori HTML untuk menyisipkan tag HTML, mistar horizontal, head content, table,

frame, dan script. • Kategori Server-code hanya tersedia untuk halaman-halaman yang menggunakan bahasa

khusus server. • Kategori Application untuk menyisipkan elemen dinamis seperti recordset, repeated

region, dan record insertion dan update form. • Kategori Flash Elements untuk menyisipkan elemen Flash. • Kategori Favorites untuk mengelompokkan dan mengatur tombol-tombol baris Insert

yang anda gunakan dalam satu wadah. Jendela Dokumen

Document Window merupakan bagian yang digunakan untuk mendesain halaman situs web. Dalam document window, anda dapat menyisipkan teks, image, serta objek lain yang mendukung pembuatan situs web atau tempat untuk membuat desain web.

Panel Group Panel Group adalah kumpulan panel yang saling berkaitan satu sama lain yang

dikelompokkan bersama di bawah satu judul Files Panel

Files Panel merupakan bagian dari panel group file selain panel Assets. Bagian ini berfungsi untuk mengatur file dan folder yang membentuk situs Web anda. Pada panel ini anda dapat melakukan beberapa aktivitas, antara lain manajemen file, melakukan koneksi ke remote server atau testing server, menempatkan file ke server atau menyalin file dari server ke situs local.

Snippets Panel Snippets Panel merupakan kode yang sering digunakan dan disisipkan pada dokumen.

Anda dapat mengambil kode snippets built-in yang ada di dalam bagian snippets dengan menentukan terlebih dulu kode apa yang akan disisipkan ke dalam dokumen.

Tag Inspector Merupakan salah satu fasilitas terbaru dari Dreamweaver MX. Dalam tag inspector

anda dapat melihat struktur hirarki tag dan atribut-atribut yang dapat ditambahkan atau diedit. Tag Selector

Tag selector terdapat pada bagian bawah document window atau pada bagian status bar. Fungsinya adalah untuk menampilkan hirarki tag pada design view yang aktif.

Property Inspector Property Inspector digunakan untuk melihat dan mengubah berbagai property objek

dan teks yang terpilih. Setiap objek maupun teks mempunyai property yang berbeda-beda.


5

II. MEMBUAT SITUS WEB Sebelum memulai membuat situs web, ada baiknya anda mengetahui pengertian dari

sebuah situs web itu sendiri. Situs web : suatu kesatuan dari dokumen-dokumen yang terhubung dengan atribut yang sama. Jadi sebuah situs web memiliki banyak dokumen yang disebut halaman web, serta dilengkapi dengan komponen lain, seperti image, media dan objek yang saling berhubungan. Selain itu juga harus mengerti tentang konsep ruang kerja yang ada di Dreamweaver MX.

Membuat Situs Lokal Situs Lokal : memiliki pengertian bahwa seluruh file yang digunakan untuk

membangun situs web tersebut berada dalam computer yang berdiri sendiri. Dalam Dreamweaver, untuk membuat sebuah situs web perlu mendefinisikan situs

dengan menggunakan kotak dialog Site Definition. Ada 2 cara yang dapat dikerjakan yaitu: • Basic : pilihan yangmemberikan kemudahan bagi anda dalam menyiapkan situs. • Advance : pilihan bila sudah paham betul akan konsep yang berlaku dalam

Dreamweaver. Langkah-langkah pengaturan untuk mendefinisikan site dengan versi Basic sbb: 1. Pilih menu Site > Manage Sites, akan muncul kotak dialog Manage Sites. 2. Untuk membuat situs baru pilih tombol New lalu akan muncul menu melayang Site dan

FTP &RDS Server. Pilihan Site untuk membuat situs local, sedangkan pilihan kedua bekerja dengan FTP.

3. Masukkan nama situs pada kotak teks yang disediakan. 4. Klik Next, muncul kotak dialog kedua diminta untuk memilih tipe dokumen,

No : memilih situs statis tanpa halaman dinamis. Yes: memilih dokumen dinamis (contoh dok dinamis: Microsoft Active Server Pages/ASP, JSP, PHP)

5. Klik Next, anda dapat memilih pilihan pertama, Edit local copies on my machine,…….. Setelah itu tentukan tempat penyimpanan file pada harddisk anda bisa mengetikkan foldernya atau mengklik ikon folder.

6. Klik Next, pada bagian kotak dialog ini anda diminta untuk menentukan web server, bila menggunakan situs local dan belum terkoneksi dengan web server maka pilih Local/Network.Klik Next, lalu klik Done

7. Sekarang Files panel menampilkan root folder local untuk situs anda Membuat Dokumen Baru

Untuk membuat dokumen HTML baru gunakan perintah File > New (Ctrl + N). Akan muncul kotak dialog New Document, pastikan pada tab General. Kategori diberikan pilihan dalam membuat dokumen yang diinginkan. Sedangkan pada Basic Page berisi pilihan-pilihan dokumen kosong sesuai dengan tipenya.

• Kategori Dynamic Page anda bisa membuat dokumen dengan fasilitas ASP, PHP, JPS.. • Kategori Template Page anda bisa membuat dokumen template • Kategori Framesets untuk membuat hal web dengan menggunakan fasilitas frame • Kategori Page Designs membuat dokumen dengan tampilan yang sudah disediakan


6

Mengelola Situs Setelah anda menentukan pilihan dokumen serta tipe yang akan dibuat, anda juga perlu

memahami bagaimana melakukan penyuntingan situs, penghapusan situs, dan menduplikasikan situs.

Mengedit Situs Langkahnya:

1. Pastikan aktif di jendela program Dreamweaver 2. Pilih menu Site > Manage Sites 3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan diedit lalu

tekan tombol Edit. Jika sudah selesai pengeditan klik Done. Menghapus Situs

1. Pastikan aktif di jendela program Dreamweaver 2. Pilih menu Site > Manage Sites 3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan dihapus lalu

tekan tombol Remove. Lalu pilih Yes untuk menghapusnya. Membuat Duplikasi Situs

1. Pastikan aktif di jendela program Dreamweaver 2. Pilih menu Site > Manage Sites 3. Selanjutnya akan muncul kotak dialog Manage Sites. Pilih situs yang akan diduplikasi

lalu tekan tombol Duplicate. Mengenal Files Panel

Files Panel yang disediakan merupakan fasilitas untuk mengorganisasi file-file dalam situa, menangani hubungan antara situs local dan situs remote (file-file situs yang ada pada server web) dan untuk melihat atau menangani struktur situs, anda bisa menggunakan situs map. Window > Files (F8). Melihat Situs Lokal

File-file yang berada pada situs local anda dapat ditampilkan sebagai daftar file, map, atau kedua-duanya. Sedangkan situs remote hanya dapat ditampilkan sebagai daftar file. Prosedur untuk melihat file-file di situs local:

1. Pastikan anda aktif pada Files Panel 2. Klik kanan Select > Newer Remote.

Prosedur untuk melihat struktur dan file situs : 1. Pastikan aktif pada Files Panel 2. Klik kotak Site Files View > Site Map

Pada site map menampilkan hubungan antar halaman, dimana hubungan link tersebut dihubungkan pada kode HTML sumber, seperti:

• Teks berwarna merah mempunyai arti link rusak. • Teks berwarna biru dengan ikon globe mempunyai link khusus. • Sebuah tanda cek hijau artinya sebuah file telah anda pilih. • Sebuah tanda cek merah artinya sebuah file telah dipilih oleh orang lain. • Sebuah ikon yang mempunyai tanda kunci merupakan file yang mempunyai sifat Read

Only (window)


7

Bekerja dengan toolbar pada Files Panel Toolbar merupakan sekumpulan tombol perintah yang terletak dalam sebuah bidang

baris.

Keterangan:

1. Menu pop-up Site : menampilkan nama-nama situs yang telah didefinisikan. 2. Menu pop-up view : menampilkan lokasi atau tempat situs anda berada. 3. Connect/Disconnect : melakukan koneksi atau diskoneksi dari situs remote. 4. Refresh : digunakan untuk melakukan refresh secara manual daftar file dari situs local

dan remote. 5. Get File : untuk menyalin file yang dipilih dari situs remote atau testing ke situs local. 6. Put File : untuk menyalin file dari situs local ke situs remote. 7. Check Out File : untuk transfer copy dari file situs remote ke situs local. 8. Check In File : untuk transfer copy file local ke remote server dan membuat file dapat

diedit oleh yang lain. File local menjadi read-only. 9. Expand/Collapse : untuk mengatur ukuran tampilan site panel.

III. MENDESAIN HALAMAN WEB

Mendesain halaman web merupakan perpaduan dari seni, ilmu pengetahuan, dan ketrampilan. Suatu situs yang baik memiliki kesatuan desain, atau dapat juga dikatakan mempunyai kesamaan tema dalam halaman-halamannya. Hal ini dimaksudkan agar pengunjung dapat dengan mudah memahami isi halaman situs. Kesamaan tema dalam setiap halaman mempunyai nilai penting dalam segi estetika maupun navigasi.

Dalam pendesainan halaman web, kesamaan yang perlu dipertahankan meliputi jenis font dan warna yang digunakan, baik warna halaman maupun pada bagian tertentu.

Mengatur Properti halaman web Properti halaman ini akan ikut menentukan bagus tidaknya desain yang dihasilkan.

Anda dapat mengatur judul halaman, latar belakang warna dan gambar halaman, warna teks dan link serta margin halaman web. Untuk menampilkan page properties : Modify > Page Properties (Ctrl + J)

Dalam page properties ada 5 kategori :

1. Appearance : untuk mengatur jenis font untuk halaman, menentukan style font, ukuran font, warna font, warna latar belakang, menampilkan gambar untuk latar belakang, serta dapat menentukan ukuran margin halaman.

2. Links : untuk menentukan jenis font untuk teks link, ukuran font, mengubah warna untuk teks link, mengubah warna untuk teks yang telah dikunjungi (Visited Links), warna


8

yang akan digunakan pada link yang sedang ditunjuk (Active Links), warana yang digunakan pada link saat pointer mouse melewati teks links (Rollover Links).

3. Headings : untuk menentukan sendiri style yang digunakan untuk teks naskah anda. 4. Title/Encording : untuk memberikan judul halaman pada bagian Title. 5. Tracing Image : untuk menampilkan tampilan gambar sementara pada latar belakang.

Menggunakan Fasilitas Tabel Dalam membuat sebuah tampilan halaman web, anda dapat membuatnya dengan

menggunakan beberapa alternative, antara lain menggunakan media cetak dan media web. Pada media cetak pembuatannya menggunakan software seperti Adobe PageMaker, CorelDraw, dan Quark Xpress.

Sedangkan pada media web anda bisa menggunakan tabel sebagai desainnya, dalam Dreamweaver tabel yang yang digunakan ada dua jenis yaitu tabel biasa dan layout tabel. Membuat tabel

Tabel biasa adalah sebuah tabel sederhana yang biasa anda buat melalui program Ms. Word dan tabel biasa ini merupakan inti dari tabel layout yang akan anda buat. Langkah untuk membuat tabel biasa sbb:

1. Pastikan aktif di jendela Dreamweaver 2. Letakkan kursor pada lembar kerja document window. 3. Pilih menu Insert > Table. Akan muncul kotak dialog tabel

• Tabel size : untuk menentukan jumlah baris dan kolom, lebar tabel, border tabel, spasi

antar sel, spasi antara sel dengan batas tepi sel. • Header : untuk memberikan keterangan teks pada bagian tabel sesuai dengan pilihan

yang tersedia. • Accessbility : untuk memberikan keterangan judul tabel pada kotak teks Caption. Untuk

perataan teksnya dapat memilih Align Caption. Biasanya tabel yang digunakan untuk keperluan layout memiliki tabel border 0 supaya

tidak tampak pada saat dijalankan. Untuk mengatur dan memodifikasi border dan lainnya anda dapat mengaturnya melalui property tabel pada Property Inspector (Window > Properties) yang terletak di bawah document window.


9

Membuat Tabel di dalam Tabel Di dalam mengatur halaman web, anda dapat menggunakan tabel. Agar kelihatan rapi,

tidak salahnya anda memasukkan sebuah tabel ke dalam tabel yang sudah dibuat. Langkahnya : 1. Buatlah sebuah tabel. 2. Letakkan pointer mouse di salah satu sel. 3. Pilih menu Insert > Tabel. Tentukan baris dan kolom yang ingin disisipkan.

Menggunakan Format Tabel Langkah untuk menggunakan format tabel sbb:

1. Pilih tabel yang ingin diformat. 2. Pilih menu Commands > Format Table sehingga muncul kotak dialog Format Table.

Pada kotak tersebut akan tampil pilihan tipe format tabel.

Mengurutkan Isi Tabel

Pengurutan isi tabel hanya dapat dijalankan jika tabel tersebut utuh, tidak mengandung sel gabungan, baik pada baris pertama maupun baris terakhir. Langkahnya sbb:

1. Pilih tabel yang akan diurutkan 2. Pilih menu Command > Sort Table akan muncul kotak dialog Sort Table.


10

IV. BEKERJA DENGAN TEKS Teks memegang peran yang sangat penting dalam situs web. Setiap situs web pasti

memiliki unsur teks. Oleh karena itu pengelolaan dan pengaturan tampilan teks sangat penting untuk diperhatikan. Anda dapat memformat teks di dreamweaver dengan kode HTML maupun dengan CSS. Anda dapat memformat teks sama seperti anda melakukannya pada program MS. Word.

Menyisipkan Teks Anda dapat menyisipkan teks pada halaman web, tabel maupun layer. Langkahnya: 1. Pastikan aktif pada document window. Letakkan kursor pada lembar kerja document

window. 2. Ketik teks yang diinginkan. 3. Untuk mengatur jarak antar paragraph, ada 2 cara, yaitu dengan Enter atau Shift +

Enter. Enter memberi jarak lebih lebar dibanding Shift + Enter. Memformat Teks

Anda dapat memformat teks yang sudah anda sisipkan dengan Property Inspector. Pada property tersebut anda dapat mengubah jenis font, warna, atau ukuran font.

Membuat List

List digunakan untuk memformat tampilan untuk daftar item. List ada 3 macam, yaitu list yang berurutan, list tidak berurutan dan list definisi. Untuk membuat list baru langkahnya: 1. Pastikan aktif pada jendela document window. 2. Tempatkan kursor pada lembar kerja yang diinginkan. 3. Untuk membuat list pilih menu Text > List. 4. Ketik daftar pertama yang anda inginkan pada kursor aktif 5. Tekan enter untuk menampilkan item berikutnya. Setelah daftar terakhir selesai ditulis,

lalu tekan enter 2 kali untuk mengakhiri. Untuk mengatur property list pilih menu Text > List > Properties.

Menyisipkan karakter khusus Karakter khusus yang dimaksud di sini adalah karakter yang memiliki kode khusus

dan karakter ini tidak ditemukan pada tombol keyboard. Caranya : pilih menu Insert > HTML > Special Character.

Memasukkan Tanggal ( Insert > Date ) Membuat sebuah Link pada Teks.

Link adalah suatu teks atau gambar yang dipakai dalam dokumen HTML untuk melompat dari satu dokumen ke dokumen atau ke tempat lain pada dokumen yang sama. Anda dapat menggunakan teks yang ada di dalam halaman web dan juga dapat membuat teks khusus untuk digunakan membuat link. Menggunakan link pada teks yang sudah ada, langkahnya : 1. Pilihlah teks yang ingin anda buat link 2. Masukkan alamat halaman atau situs di dalam kotak teks pada property Link di Property

Insepctor. 3. Tentukan tempat penampilan halaman web anda setelah melakukan link dengan memilih

pada kotak list Target.


11

V. BEKERJA DENGAN GAMBAR Gambar merupakan elemen penting dalam sebuah halaman web. Dengan

menggunakan gambar, tampilan halaman web menjadi lebih menarik dan komunikatif. Gambar memegang peranan dalam pembuatan user interface, presentasi, catalog produk, dsb. Gambar yang digunakan untuk user interface sering disebut sebagai button atau tombol. Tombol ini juga dapat membentuk navigation bar yang sangat penting sebagai alat navigasi dalam situs web.

Ada 3 tipe gambar yang digunakan di halaman web, yaitu JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), dan PNG (Portable Network Group). File gambar PNG hanya dapat ditampilkan pada browser versi 4 ke atas

Memasukkan Gambar

Sebelum memasukkan gambar ke dalam halaman web, ada baiknya anda membiasakan untuk menyimpan file gambar yang akan dimasukkan untuk mencegah penggunaan path file:// pada gambar yang dapat menyebabkan gambar tidak ditampilkan sewaktu dijalankan di browser secara online. Selain itu anda juga harus menyimpannya ke dalam folder gambar pada direktori di mana situs web dibuat. Untuk menyisipkan gambar ke document window caranya : Pilih menu Insert > Image, akan muncul kotak dialog. Pilih File System untuk memilih file grafik/gambar atau pilih Data Source untuk memilih sumber data gambar.

Mengatur Properti Gambar

Setelah gambar disisipkan dalam halaman web, akan tampil sebuah Property Inspector jika gambar dalam keadaan terpilih.

Membuat Link pada Gambar

Menbuat link pada gambar tidaklah sulit, sama seperti pembuatan link pada teks. Anda tinggal menghubungkan gambar dengan alamat halaman atau situs. Caranya isikan


12

alamat halaman atau situs di dalam kotak teks pada property Link di bagian Property Inspector. Lalu tentukan Target dengan memilih kotak Target

Membuat Image Map Image Map adalah suatu gambar yang memiliki daerah tertentu, dimana pada daerah

tersebut dapat diberi link. Dalam satu gambar dapat memberikan link lebih dari 2, tergantung kebutuhan. Dreamweaver menyediakan piranti khusus yang digunakan untuk membuat image map. Ada 3 image map yang dapat digunakan yaitu: 1. Rectangular hotspot tool, digunakan untuk membuat daerah link dengan bentuk

rectangular atau kotak. 2. Oval hotspot tool, digunakan untuk membuat daerah link dengan bentuk oval atau

lingkaran.. 3. Polygon hotspot tool, digunakan untuk membuat daerah link dengan bentuk polygon

atau bentuk tak beraturan. Untuk membuat area image map, lakukan langkah berikut: 1. Sisipkan sebuah gambar sebagai media untuk meletakkan image map. 2. Pada property gambar, tampilkan kotak property lanjutan untuk gambar yang

menampung image map dengan mengklik tombol panah kecil di ujung kanan bawah property gambar.

3. Pilih salah satu tombol image map yang sudah disediakan pada bagian property lanjutan gambar.

4. Pada saat anda klik salah satu image map, pointer mouse akan berubah menjadi tanda +. Arahkan pointer mouse anda pada gambar yang tersedia dan geser pada salah satu bagian gambar tersebut.

5. Setelah anda membuat area image map, akan tampil kotak property baru yang disebut dengan Property Hotspot. Pada kotak property ini anda dapat menentukan link ke alamat halaman atau situs, menentukan target tampilan dan memberikan keterangan untuk hotspot.

6. Untuk mengatur area image map, klik tombol pointer hotspot tool . Setelah itu anda

dapat memindah atau menggeser area image map atau mengatur besar kecil area image map dengan menggeser handle pada area image map.


13

VI. BEKERJA DENGAN FRAME Frame merupakan sebuah teknologi yang biasa dipakai untuk menggabungkan

beberapa halaman web menjadi satu halaman web yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian.

Frame mempunyai kelebihan yang tidak ditemukan pada tabel maupun layer. Dengan menggunakan frame anda dapat menampilkan beberapa halaman web sekaligus dalam document window. Anda dapat juga menampilkan halaman web permanent, tidak berubah-ubah, seperti pada halaman judul, menu, logo dan banner.

Dengan menggunakan frame sebagai pembagi halaman, anda dapat mengurangi beban server dalam menjalankan pemrosesan karena server hanya perlu bekerja sekali saja dalam menampilkan halaman web tersebut.

MENYISIPKAN FRAME

1. Aktifkan kursor pada document window. 2. Pilih menu Insert > HTML > Frames, pilih salah satu frameset yang tersedia pada

submenu Frames. 3. Untuk menambahkan frameset lagi, ulangi perintah penyisipan di atas.

MENDESAIN FRAMESET SENDIRI Untuk membuat frameset sendiri, anda harus mengaktifkan Frame Borders ( View >

Visual Aids > Frame Borders ). Langkah-langkah untuk membuat frameset sendiri: 1. Pastikan aktif pada document window. 2. Pilih menu Modify > Frameset. 3. Selanjutnya anda dapat memilih Frameset yang tersedia:

• Split Frame Left dan Split Frame Right untuk membagi frame dengan pola vertical. • Split Frame Up dan Split Frame Down untuk membagi frame dengan pola

horizontal. 4. Untuk menggeser border frame, anda dapat menggunakan pointer mouse. 5. Untuk membuat frame baru dari frame yang sudah ada, gunakan kombinasi tombol

Alt+drag. 6. Untuk memilih dan memodifikasi frame, anda dapat mengaktifkan Frame Panel

(Shift+F2)

MENYIMPAN FRAME Setiap frame yang anda buat harus anda simpan satu per satu lalu menyimpan

framesetnya. Untuk menyimpan frame dan frameset, lakukan langkah berikut: 1. Aktifkan salah satu bagian di dalam frame. 2. Pilih menu File > Save Frame. 3. Ketik nama lalu tekan tombol Save. 4. Ulangi kembali langkah di atas sampai frame yang anda buat tersimpan semua. 5. Penyimpanan yang terakhir adalah penyimpanan untuk framesetnya. Pilih border terluar

dari frame sehingga yang terpilih adalah framesetnya. 6. Pilih menu File > Save Frameset.

MENGHAPUS FRAME.

1. Arahkan pointer mouse pada border frame yang ingin dihapus. 2. Geser border frame keluar dari area document window.

MENGATUR PROPERTI FRAME DAN FRAMESET Untuk membedakan antara frame dan frameset, aktifkan Frames panel. Frameset

adalah suatu frame induk yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya. Sedangkan frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya.


14

Mengatur Properti Frame Untuk memilih frame melalui document window, anda dapat melakukannya dengan

menggunakan kombinasi Alt + Klik pada frame yang diinginkan.. Selanjutnya akan tampil property frame pada Property Inspector.

Properti Nama Keterangan

Frame name Frame name

Digunakan untuk mengisikan nama frame. Pemberian nama sangat penting karena untuk referensi script dan target hyperlink. Di dalam pemberian nama frame, tidak ada spasi, dan harus merupakan kata tunggal, tidak boleh mengandung tanda minus dan titik, nama harus diawali dengan huruf, bukan angka.

Src Frame source Digunakan untuk menentukan sumber dokumen frame.

Scroll Frame scrollbars Digunakan untuk menampilkan scroll atau batang penggulung pada frame.

No Resize Disable frame resize

Digunakan untuk menonaktifkan perubahan ukuran pada frame. Jika pilihan ini dalam keadaan tercentang, anda tidak dapat mengubah ukuran frame pada browser.


Borders 3D border Digunakan untuk mengatur border pada frame.

Border Color Frame border color Digunakan untuk mengatur warna pada border

Margin Width Margin width in pixels

Digunakan untuk mengatur batas kanan dan kiri margin

Margin Height Margin height in pixels

Digunakan untuk mengatur jarak margin atas dan bawah pada frame.

Mengatur Properti Frameset

Setelah selesai mengatur property frame, anda dapat mengatur property frameset. Untuk mengatur property frameset, sebelumnya aktifkan dulu frameset-nya. Anda dapat langsung memilih pada document window dengan mengklik salah satu border framenya. Selanjutnya akan tampil property frameset pada Property Inspector.


15


Border 3D border Digunakan untuk mengatur tampilan border frameset, apakah untuk ditampilkan atau disembunyikan.

Border Width Border width in pixels Digunakan untuk mengatur lebar smua border pada frameset.

Border Color Frameset color Digunakan untuk mengatur warna pada border frameset.

Column Row/column size Digunakan untuk mengatur tinggi baris atau lebar kolom yang dipilih.

Pixels Row/column size units Digunakan untuk mengatur ukuran lebar dan tinggi frame.

RowCol Selection

Digunakan untuk memilih bagian kolom atau bagian baris dengan klik bagian tabulasi di bagian atas dan samping tampilan.

MENGATUR PROPERTI HALAMAN FRAME

Sudah dijelaskan di atas bahwa setiap frame terdiri dari file dokumen htm/html sehingga anda dapat mengatur property halaman untuk setiap frame. Anda dapat mengaturnya seperti anda mengatur jendela dokumen, yaitu: 1. Pastikan anda aktif pada frame yang diinginkan. 2. Pilih menu Modify > Page Properties atau klik kanan pada halaman frame dan pilih

Page Properties. 3. Dari tampilan Page Properties, lakukan beberapa perintah format yang anda inginkan. 4. Untuk menyetujui, klik OK.

VII. BEKERJA DENGAN FORM Fasilitas Form memudahkan anda dalam berkomunikasi di dalam dunia web. Dengan

menggunakan form anda dapat mengumpulkan informasi dari pengunjung dan melakukan beberapa interaksi dengan mereka. Form dapat terdiri dari beberapa objek yang disusun menjadi sebuah model pengisian atau dapat juga disebut sebagai formulir online.

Ketika pengunjung memasukkan informasi ke dalam sebuah model form di dalam situs web dan menenkan tombol submit, informasi tadi akan terkirim ke server dan akan diproses. Server akan merespon pengiriman tadi dengan membalas atau melakukan tindakan lain sesuai dengan apa yang diinginkan pengunjung. Biasanya informasi ini diproses dengan menggunakan script Common Gateway Interface (GGI), halaman ColdFusion, JavaServer Page (JSP), atau dengan Active Server Page (ASP).

Beberapa objek yang terdapat pada form antara lain adalah text field, list box, check box, menu pop-up, field password, image field, button, dan radio button.

MENYISIPKAN FORM

Untuk menempatkan objek form yang ingin anda sisipkan, terlebih dahulu anda harus menyiapkan sebuah wadah untuk menampung objek form tersebut. Wadah yang dimaksud adalah form itu sendiri. Jika anda menyisipkan objek tanpa menempatkannya ke dalam wadah, maka informasi yang anda masukkan di dalam form tersebut tidak akan dapat terkirim. Lakukan langkah berikut untuk membuat sebuah form: 1. Pastikan anda aktif pada document window.


16

2. Aktifkan tabulasi Form pada Insert Bar. 3. Klik ikon Form atau geser ikon tersebut ke dalam document window. 4. Anda juga dapat menyisipkan form dengan menu Insert > Form. 5. Pada document window akan tampil sebuah objek form dengan tampilan garis putus-

putus berwarna merah. 6. Pada bagian Property Inspector akan tampil property form.

Berikut ini penjelasan atas masing-masing bagian dari property form: • Form name digunakan untuk memberi nama form. • Action digunakan untuk menentukan lokasi atau path file yang akan digunakan untuk

memproses form. • Method digunakan untuk menentukan metode pengiriman data form. Di dalam property

Method terdapat beberapa pilihan, yaitu: Default: jika anda memilih default, maka metode pengiriman data form akan

disesuaikan dengan setting default browser. GET: untuk pilihan GET, metode pengiriman data form akan ditambahkan pada

URL request. POST: pada metode pengiriman POST, data form anda akan disisipkan pada

HTTP request. • Target digunakan untuk menentukan frame atau window yang menjadi tempat untuk

menampilkan target hyperlink. • Enctype digunakan untuk menentukan tipe MIME encoding yang diinginkan. Biasanya

digunakan untuk file upload. Jika anda menginginkan tampilan form yang rapi, ada baiknya anda menambahkan

tabel di dalam form sebagai tempat meletakkan objek form. Menyisipkan Text Field

Text Field merupakan sarana untuk memasukkan teks ke dalam form. Text Field ini untuk menampung infromasi yang berupa teks atau karakter lainnya, seperti nama seseorang, alamat, e-mail, komentar, dsb. Langkah untuk menyisipkan sebuah text field : 1. Aktifkan pointer mouse anda di dalam form yang sudah disediakan. 2. Pilih menu Insert > Form > Text Field atau klik tombol ikon text field pada Insert Bar. 3. Pada Property Inspector tampil property Text Field.

Ada 3 tipe Text Filed, yaitu:

Single Line Secara default saat menyisipkan Text Field, yang akan ditampilkan adalah tipe

pertama, yaitu Single Line. Tipe ini berupa kotak teks satu baris yang biasa digunakan untuk menampung nama, alamat, e-mail, dsb. Untuk property Text Field, tipe Single Line dan Password mempunyai property yang sama, yaitu:


17

Properti Keterangan TextField Untuk memasukkan nama dari text field.

Char width Untuk menentukan jumlah karakter maksimum yang dapat ditampilkan pada kotak teks.

Max chars Untuk menentukan panjang maksimum karakter yang dapat ditampung di dalam kotak teks.

Type Pada property text field secara default akan terpilih Single Line.

Init Val Untuk memasukkan nilai default kotak teks sehingga saat dijalankan di browser akan berisi nilai yang dimasukkan.

Multi Line

Tipe Text Field yang menyediakan kotak teks dengan beberapa baris di dalamnya. Anda dapat memasukkan keterangan yang panjang pada kotak teks ini, misalkan untuk keterangan, komentar, dsb. Properti pada Multi Line berbeda dengan yang ada pada property Single Line :

Properti Keterangan Num Lines Untuk menentukan jumlah baris pada kotak teks.

Wrap Untuk menentukan tipe pelipatan teks. Ada 3 jenis, yaitu: Off dan Default, Virtual, dan Physical.

Initial Value Untuk memasukkan nilai default kotak teks sehingga saat dijalankan di browser akan berisi nilai yang dimasukkan.

Password

Tipe Text Field ini biasanya dipakai pada suatu halaman web yang memerlukan suatu pengaman agar hanya orang tertentu saja yang dapat mengakses halaman tersebut.

Menyisipkan Hidden Field

Sebetulnya Hidden Field ini banyak dipergunakan. Biasanya Hidden Field ini digunakan untuk mengumpulkan informasi tentang pengunjung. Saat anda membuat sebuah Hidden Field akan tampil tanda ikon yang menyatakan adanya sebuah Hidden. Pada saat anda jalankan di browser, Hidden Field tidak akan ditampilkan. Untuk menyisipkan Hidden Field: 1. Tempatkan form ke dalam document window. 2. Pilih menu Insert > Form > Hidden Field. 3. Pada property Inspector akan ditampilkan property Hidden Field. 4. Isikan nama Hidden Field, kemudian isikan juga nilai pada bagian Properti value.

Menyisipkan Text Area

Bentuk tampilan dari text area sama persis dengan tampilan text field tipe Multi Line atau dapat juga dikatakan bahwa TextArea merupakan nama lain dari Text Field tipe Multi Line. Untuk menyisipkan TextArea, pilih menu Insert > Form Objects > TextArea.

Menyisipkan Checkbox Checkbox adalah sebuah kotak dimana pengunjung dapat memilih salah satu

informasi yang disediakan. Cara menyisipkan checkbox sbb:


18

1. Pilih menu Insert > Form > CheckBox 2. Sebuah kotak kecil akan ditampilkan pada document window, tepat di mana

menempatkan pointer mouse. 3. Anda dapat menyisipkan beberapa Checkbox sesuai kebutuhan. Jika anda menggunakan

beberapa checkbox sebagai pilihan, tempatkan checkbox ke dalam sebuah tabel agar tersusun rapi.

Pada Property Inspector akan tampil property Checkbox.

Properti Keterangan CheckBox Untuk memberikan nama pada field checkbox

Checked Value Untuk memberikan sebuah nilai pada Checkbox pada saat checkbox terpilih.

Initial State Untuk menentukan apakah Checkbox tersebut secara default sudah terpilih atau belum.

Menyisipkan Radio Button

Radio Button mempunyai fungsi yang sama dengan Checkbox yaitu untuk menentukan pilihan dari suatu daftar pilihan. Bedanya, pada radio button kita hanya dapat memilih satu pilihan saja. Cara penyisipan radio button: 1. Tempatkan pointer mouse pada form yang sudah disiapkan. 2. Pilih menu Insert > Form > Radio Button. Akan tampil sebuah lingkaran kecil pada

bagian form dan kemudian isikan sebuah informasi yang akan digunakan sebagai keterangan pada bagian kanan radio button

3. Anda dapat menyisipkan kembali beberapa radio button sesuai kebutuhan. Anda dapat mengatur property radio button lewat Property Inspector. Tampilan

property radio button sama seperti property Checkbox. Anda dapat memasukkan nama untuk field radio button pada kotak teks RadioButton, kemudian ketik nilai Radio Button pada bagian Checked Value dan tentukan pilihan untuk Initial State, Checked atau Unchecked.

Menyisipkan Radio Group

Radio Group merupakan kumpulan dari beberapa Radio Button. Dalam proses pembuatannya, anda tidak perlu menyisipkan radio button satu per satu ke dalam document window. Anda cukup memasukkan label dan nilai dari radio button tersebut pada bagan yang sudah tersedia. Caranya :


19

Pilih menu Insert > Form > Radio Group. Selanjutnya akan tampil sebuah kotak dialog untuk mengisikan parameter.

Langkah untuk mengisikan parameter sbb: 1. Yang pertama isikan nama untuk Radio Button pada bagian Name. 2. Lalu isikan label dan value. Klik bagian radio dan kemudian anda ketikan sebuah kata di

dalamnya. 3. Jika anda ingin menambah lagi, gunakan tombol + yang terletak pada bagian atas daftar

parameter. Apabila ingin menghapus gunakan tombol -. 4. Pada bagian Lay Out Using, pilih Line Break [<br> Tags] untuk menempatkan Radio

button pada baris baru, atau pilih Table untuk menempatkan radio button pada sebuah tabel.

Menyisipkan List/Menu

Selain dalam bentuk tombol, seperti Checkbox atau Radio Button, anda juga dapat menampilkan pilihan dalam bentuk list atau menu. • Menggunakan List sebagai Pilihan

List digunakan untuk menampilkan banyak pilihan, baik pilihan tunggal maupun ganda. Dengan menggunakan list, anda dapat memilih beberapa pilihan sekaligus seperti pada Checkbox. Untuk memilih lebih dari satu pilihan, anda dapat menggunakan tombol Shift atau Ctrl. Langkah untuk menyisipkan list sbb:

1. Pilih menu Insert > Form > List/Menu. 2. Pada property list/menu, pastikan pilihan type berada pada Type List.

3. Isikan nama untuk List pada kotak List/Menu. 4. Kemudian tentukan jumlah baris yang akan ditampilkan pada kotak teks Height. 5. Jika anda menginginkan agar pengunjung dapat memilih lebih dari satu pilihan,

aktifkan kotak centang Selections. 6. Untuk menambah atau mengurangi isi list, tampilkan kotak dialog List Values dengan

mengklik tombol List Values.

7. Anda dapat memasukkan pilihan pada bagian kolom item label dan nilai pada bagian

value. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected.


20

• Menggunakan Menu sebagai Pilihan Sama halnya dengan List, menu merupakan sebuah objek yang digunakan untuk

menampung beberapa pilihan dalam bentuk drop-down. Untuk menu ini hanya dapat memilih satu pilihan saja. Menu mempunyai fungsi yang sama seperti Radio Button. Anda dapat menyisipkan menu dengan langkah sbb: 1. Pilih menu Insert > Form > List/Menu. 2. Pada property List/Menu pastikan pilihan Type berada pada Type Menu. 3. Isikan nama menu pada kotak teks List/Menu. Namanya harus unik. 4. Untuk menambahkan atau mengurangi isi list, dapat tampilkan kotak dialog List Values

dengan klik tombol List Values. 5. Anda dapat memasukkan item ke dalam pilihan pada bagian kolom item label dan ketik

nilai pada bagian value. Tombol + untuk menambah item dan tombol – untuk menghapus item.

6. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected. Menyisipkan File Field

File field digunakan untuk meng-upload suatu file ke server. File yang dapat di-upload melalui File Field ini antara lain file dokumen, file gambar, dan juga file-file lainnya. Anda dapat menggunakan method Post atau IIS untuk action dari form.

Tampilan File field ini mirip dengan Text Field. Hanya saja di sebelah kanan objek file field terdapat sebuah tombol bernama Browse. Tombol ini berfungsi untuk mencari file yang akan di-upload. Namun demikian anda juga dapat langsung mengetikkan nama file tersebut langsung pada kotak teks. Untuk menyisipkan objek File Field : 1. Tempatkan mouse pointer dalam form yang sudah disiapkan. 2. Pilih menu Insert > Form > File Field. 3. Kemudian aturlah propertinya.

4. Masukkan nama file field pada kotak teks filefieldname 5. Tentukan jumlah karakter yang dapat ditampilkan dalam kotak teks Char width. 6. Tentukan juga jumlah karakter yang dapat ditampilkan ke dalam kotak teks Max Chars.

Menyisipkan Button

Button merupakan sebuah tombol yang dapat digunakan untuk melakukan proses tertentu, misalkan untuk submit atau reset. Kedua tombol tersebut digunakan untuk sebuah proses di dalam form. Tombol submit untuk mengirimkan data yang dimasukkan ke dalam form selanjutnya dan diolah di dalam server. Sedangkan tombol reset untuk mereset atau mengosongkan data yang ada di dalam form hingga kembali ke nilai default. Untuk menyisipkan sebuah Button: 1. Pilih menu Insert > Form > Button. 2. Ketik nama button pada bagian button name. 3. Untuk memberikan nama button, ketikkan pada kotak teks label. Nama tersebut akan

ditampilkan pada button. 4. Tentukan pula actionnya, pilih Submit atau Reset.


21

VI. BEKERJA DENGAN FRAME Frame merupakan sebuah teknologi yang biasa dipakai untuk menggabungkan

beberapa halaman web menjadi satu halaman web yang utuh. Dapat juga dikatakan bahwa frame merupakan sarana untuk membagi halaman web menjadi beberapa bagian.

Frame mempunyai kelebihan yang tidak ditemukan pada tabel maupun layer. Dengan menggunakan frame anda dapat menampilkan beberapa halaman web sekaligus dalam document window. Anda dapat juga menampilkan halaman web permanent, tidak berubah-ubah, seperti pada halaman judul, menu, logo dan banner.

Dengan menggunakan frame sebagai pembagi halaman, anda dapat mengurangi beban server dalam menjalankan pemrosesan karena server hanya perlu bekerja sekali saja dalam menampilkan halaman web tersebut.

MENYISIPKAN FRAME

1. Aktifkan kursor pada document window. 2. Pilih menu Insert > HTML > Frames, pilih salah satu frameset yang tersedia pada

submenu Frames. 3. Untuk menambahkan frameset lagi, ulangi perintah penyisipan di atas.

MENDESAIN FRAMESET SENDIRI Untuk membuat frameset sendiri, anda harus mengaktifkan Frame Borders ( View >

Visual Aids > Frame Borders ). Langkah-langkah untuk membuat frameset sendiri: 1. Pastikan aktif pada document window. 2. Pilih menu Modify > Frameset. 3. Selanjutnya anda dapat memilih Frameset yang tersedia:

• Split Frame Left dan Split Frame Right untuk membagi frame dengan pola vertical. • Split Frame Up dan Split Frame Down untuk membagi frame dengan pola

horizontal. 4. Untuk menggeser border frame, anda dapat menggunakan pointer mouse. 5. Untuk membuat frame baru dari frame yang sudah ada, gunakan kombinasi tombol

Alt+drag. 6. Untuk memilih dan memodifikasi frame, anda dapat mengaktifkan Frame Panel

(Shift+F2)

MENYIMPAN FRAME Setiap frame yang anda buat harus anda simpan satu per satu lalu menyimpan

framesetnya. Untuk menyimpan frame dan frameset, lakukan langkah berikut: 1. Aktifkan salah satu bagian di dalam frame. 2. Pilih menu File > Save Frame. 3. Ketik nama lalu tekan tombol Save. 4. Ulangi kembali langkah di atas sampai frame yang anda buat tersimpan semua. 5. Penyimpanan yang terakhir adalah penyimpanan untuk framesetnya. Pilih border terluar

dari frame sehingga yang terpilih adalah framesetnya. 6. Pilih menu File > Save Frameset.

MENGHAPUS FRAME.

1. Arahkan pointer mouse pada border frame yang ingin dihapus. 2. Geser border frame keluar dari area document window.

MENGATUR PROPERTI FRAME DAN FRAMESET Untuk membedakan antara frame dan frameset, aktifkan Frames panel. Frameset

adalah suatu frame induk yang dapat menampung beberapa frame lain di dalamnya dan dapat memiliki beberapa frameset yang lainnya. Sedangkan frame adalah dokumen yang terdapat di dalam frameset dengan border yang mengelilinginya.


22

Mengatur Properti Frame Untuk memilih frame melalui document window, anda dapat melakukannya dengan

menggunakan kombinasi Alt + Klik pada frame yang diinginkan.. Selanjutnya akan tampil property frame pada Property Inspector.


Frame name Frame name

Digunakan untuk mengisikan nama frame. Pemberian nama sangat penting karena untuk referensi script dan target hyperlink. Di dalam pemberian nama frame, tidak ada spasi, dan harus merupakan kata tunggal, tidak boleh mengandung tanda minus dan titik, nama harus diawali dengan huruf, bukan angka.

Src Frame source Digunakan untuk menentukan sumber dokumen frame.

Scroll Frame scrollbars Digunakan untuk menampilkan scroll atau batang penggulung pada frame.

No Resize Disable frame resize

Digunakan untuk menonaktifkan perubahan ukuran pada frame. Jika pilihan ini dalam keadaan tercentang, anda tidak dapat mengubah ukuran frame pada browser.


Borders 3D border Digunakan untuk mengatur border pada frame.

Border Color Frame border color Digunakan untuk mengatur warna pada border

Margin Width Margin width in pixels

Digunakan untuk mengatur batas kanan dan kiri margin

Margin Height Margin height in pixels

Digunakan untuk mengatur jarak margin atas dan bawah pada frame.

Mengatur Properti Frameset

Setelah selesai mengatur property frame, anda dapat mengatur property frameset. Untuk mengatur property frameset, sebelumnya aktifkan dulu frameset-nya. Anda dapat langsung memilih pada document window dengan mengklik salah satu border framenya. Selanjutnya akan tampil property frameset pada Property Inspector.


23


Border 3D border Digunakan untuk mengatur tampilan border frameset, apakah untuk ditampilkan atau disembunyikan.

Border Width Border width in pixels Digunakan untuk mengatur lebar smua border pada frameset.

Border Color Frameset color Digunakan untuk mengatur warna pada border frameset.

Column Row/column size Digunakan untuk mengatur tinggi baris atau lebar kolom yang dipilih.

Pixels Row/column size units Digunakan untuk mengatur ukuran lebar dan tinggi frame.

RowCol Selection

Digunakan untuk memilih bagian kolom atau bagian baris dengan klik bagian tabulasi di bagian atas dan samping tampilan.

MENGATUR PROPERTI HALAMAN FRAME

Sudah dijelaskan di atas bahwa setiap frame terdiri dari file dokumen htm/html sehingga anda dapat mengatur property halaman untuk setiap frame. Anda dapat mengaturnya seperti anda mengatur jendela dokumen, yaitu: 1. Pastikan anda aktif pada frame yang diinginkan. 2. Pilih menu Modify > Page Properties atau klik kanan pada halaman frame dan pilih

Page Properties. 3. Dari tampilan Page Properties, lakukan beberapa perintah format yang anda inginkan. 4. Untuk menyetujui, klik OK.

VII. BEKERJA DENGAN FORM Fasilitas Form memudahkan anda dalam berkomunikasi di dalam dunia web. Dengan

menggunakan form anda dapat mengumpulkan informasi dari pengunjung dan melakukan beberapa interaksi dengan mereka. Form dapat terdiri dari beberapa objek yang disusun menjadi sebuah model pengisian atau dapat juga disebut sebagai formulir online.

Ketika pengunjung memasukkan informasi ke dalam sebuah model form di dalam situs web dan menenkan tombol submit, informasi tadi akan terkirim ke server dan akan diproses. Server akan merespon pengiriman tadi dengan membalas atau melakukan tindakan lain sesuai dengan apa yang diinginkan pengunjung. Biasanya informasi ini diproses dengan menggunakan script Common Gateway Interface (GGI), halaman ColdFusion, JavaServer Page (JSP), atau dengan Active Server Page (ASP).

Beberapa objek yang terdapat pada form antara lain adalah text field, list box, check box, menu pop-up, field password, image field, button, dan radio button.

MENYISIPKAN FORM

Untuk menempatkan objek form yang ingin anda sisipkan, terlebih dahulu anda harus menyiapkan sebuah wadah untuk menampung objek form tersebut. Wadah yang dimaksud adalah form itu sendiri. Jika anda menyisipkan objek tanpa menempatkannya ke dalam wadah, maka informasi yang anda masukkan di dalam form tersebut tidak akan dapat terkirim. Lakukan langkah berikut untuk membuat sebuah form: 1. Pastikan anda aktif pada document window.


24

2. Aktifkan tabulasi Form pada Insert Bar. 3. Klik ikon Form atau geser ikon tersebut ke dalam document window. 4. Anda juga dapat menyisipkan form dengan menu Insert > Form. 5. Pada document window akan tampil sebuah objek form dengan tampilan garis putus-

putus berwarna merah. 6. Pada bagian Property Inspector akan tampil property form.

Berikut ini penjelasan atas masing-masing bagian dari property form: • Form name digunakan untuk memberi nama form. • Action digunakan untuk menentukan lokasi atau path file yang akan digunakan untuk

memproses form. • Method digunakan untuk menentukan metode pengiriman data form. Di dalam property

Method terdapat beberapa pilihan, yaitu: Default: jika anda memilih default, maka metode pengiriman data form akan

disesuaikan dengan setting default browser. GET: untuk pilihan GET, metode pengiriman data form akan ditambahkan pada

URL request. POST: pada metode pengiriman POST, data form anda akan disisipkan pada

HTTP request. • Target digunakan untuk menentukan frame atau window yang menjadi tempat untuk

menampilkan target hyperlink. • Enctype digunakan untuk menentukan tipe MIME encoding yang diinginkan. Biasanya

digunakan untuk file upload. Jika anda menginginkan tampilan form yang rapi, ada baiknya anda menambahkan

tabel di dalam form sebagai tempat meletakkan objek form. Menyisipkan Text Field

Text Field merupakan sarana untuk memasukkan teks ke dalam form. Text Field ini untuk menampung infromasi yang berupa teks atau karakter lainnya, seperti nama seseorang, alamat, e-mail, komentar, dsb. Langkah untuk menyisipkan sebuah text field : 1. Aktifkan pointer mouse anda di dalam form yang sudah disediakan. 2. Pilih menu Insert > Form > Text Field atau klik tombol ikon text field pada Insert Bar. 3. Pada Property Inspector tampil property Text Field.

Ada 3 tipe Text Filed, yaitu:

Single Line Secara default saat menyisipkan Text Field, yang akan ditampilkan adalah tipe

pertama, yaitu Single Line. Tipe ini berupa kotak teks satu baris yang biasa digunakan untuk menampung nama, alamat, e-mail, dsb. Untuk property Text Field, tipe Single Line dan Password mempunyai property yang sama, yaitu:


25

Properti Keterangan TextField Untuk memasukkan nama dari text field.

Char width Untuk menentukan jumlah karakter maksimum yang dapat ditampilkan pada kotak teks.

Max chars Untuk menentukan panjang maksimum karakter yang dapat ditampung di dalam kotak teks.

Type Pada property text field secara default akan terpilih Single Line.

Init Val Untuk memasukkan nilai default kotak teks sehingga saat dijalankan di browser akan berisi nilai yang dimasukkan.

Multi Line

Tipe Text Field yang menyediakan kotak teks dengan beberapa baris di dalamnya. Anda dapat memasukkan keterangan yang panjang pada kotak teks ini, misalkan untuk keterangan, komentar, dsb. Properti pada Multi Line berbeda dengan yang ada pada property Single Line :

Properti Keterangan Num Lines Untuk menentukan jumlah baris pada kotak teks.

Wrap Untuk menentukan tipe pelipatan teks. Ada 3 jenis, yaitu: Off dan Default, Virtual, dan Physical.

Initial Value Untuk memasukkan nilai default kotak teks sehingga saat dijalankan di browser akan berisi nilai yang dimasukkan.

Password

Tipe Text Field ini biasanya dipakai pada suatu halaman web yang memerlukan suatu pengaman agar hanya orang tertentu saja yang dapat mengakses halaman tersebut.

Menyisipkan Hidden Field

Sebetulnya Hidden Field ini banyak dipergunakan. Biasanya Hidden Field ini digunakan untuk mengumpulkan informasi tentang pengunjung. Saat anda membuat sebuah Hidden Field akan tampil tanda ikon yang menyatakan adanya sebuah Hidden. Pada saat anda jalankan di browser, Hidden Field tidak akan ditampilkan. Untuk menyisipkan Hidden Field: 1. Tempatkan form ke dalam document window. 2. Pilih menu Insert > Form > Hidden Field. 3. Pada property Inspector akan ditampilkan property Hidden Field. 4. Isikan nama Hidden Field, kemudian isikan juga nilai pada bagian Properti value.

Menyisipkan Text Area

Bentuk tampilan dari text area sama persis dengan tampilan text field tipe Multi Line atau dapat juga dikatakan bahwa TextArea merupakan nama lain dari Text Field tipe Multi Line. Untuk menyisipkan TextArea, pilih menu Insert > Form Objects > TextArea.

Menyisipkan Checkbox Checkbox adalah sebuah kotak dimana pengunjung dapat memilih salah satu

informasi yang disediakan. Cara menyisipkan checkbox sbb:


26

1. Pilih menu Insert > Form > CheckBox 2. Sebuah kotak kecil akan ditampilkan pada document window, tepat di mana

menempatkan pointer mouse. 3. Anda dapat menyisipkan beberapa Checkbox sesuai kebutuhan. Jika anda menggunakan

beberapa checkbox sebagai pilihan, tempatkan checkbox ke dalam sebuah tabel agar tersusun rapi.

Pada Property Inspector akan tampil property Checkbox.

Properti Keterangan CheckBox Untuk memberikan nama pada field checkbox

Checked Value Untuk memberikan sebuah nilai pada Checkbox pada saat checkbox terpilih.

Initial State Untuk menentukan apakah Checkbox tersebut secara default sudah terpilih atau belum.

Menyisipkan Radio Button

Radio Button mempunyai fungsi yang sama dengan Checkbox yaitu untuk menentukan pilihan dari suatu daftar pilihan. Bedanya, pada radio button kita hanya dapat memilih satu pilihan saja. Cara penyisipan radio button: 1. Tempatkan pointer mouse pada form yang sudah disiapkan. 2. Pilih menu Insert > Form > Radio Button. Akan tampil sebuah lingkaran kecil pada

bagian form dan kemudian isikan sebuah informasi yang akan digunakan sebagai keterangan pada bagian kanan radio button

3. Anda dapat menyisipkan kembali beberapa radio button sesuai kebutuhan. Anda dapat mengatur property radio button lewat Property Inspector. Tampilan

property radio button sama seperti property Checkbox. Anda dapat memasukkan nama untuk field radio button pada kotak teks RadioButton, kemudian ketik nilai Radio Button pada bagian Checked Value dan tentukan pilihan untuk Initial State, Checked atau Unchecked.

Menyisipkan Radio Group

Radio Group merupakan kumpulan dari beberapa Radio Button. Dalam proses pembuatannya, anda tidak perlu menyisipkan radio button satu per satu ke dalam document window. Anda cukup memasukkan label dan nilai dari radio button tersebut pada bagan yang sudah tersedia. Caranya :

Pilih menu Insert > Form > Radio Group. Selanjutnya akan tampil sebuah kotak dialog untuk mengisikan parameter.


27

Langkah untuk mengisikan parameter sbb: 1. Yang pertama isikan nama untuk Radio Button pada bagian Name. 2. Lalu isikan label dan value. Klik bagian radio dan kemudian anda ketikan sebuah kata di

dalamnya. 3. Jika anda ingin menambah lagi, gunakan tombol + yang terletak pada bagian atas daftar

parameter. Apabila ingin menghapus gunakan tombol -. 4. Pada bagian Lay Out Using, pilih Line Break [<br> Tags] untuk menempatkan Radio

button pada baris baru, atau pilih Table untuk menempatkan radio button pada sebuah tabel.

Menyisipkan List/Menu

Selain dalam bentuk tombol, seperti Checkbox atau Radio Button, anda juga dapat menampilkan pilihan dalam bentuk list atau menu. • Menggunakan List sebagai Pilihan

List digunakan untuk menampilkan banyak pilihan, baik pilihan tunggal maupun ganda. Dengan menggunakan list, anda dapat memilih beberapa pilihan sekaligus seperti pada Checkbox. Untuk memilih lebih dari satu pilihan, anda dapat menggunakan tombol Shift atau Ctrl. Langkah untuk menyisipkan list sbb:

1. Pilih menu Insert > Form > List/Menu. 2. Pada property list/menu, pastikan pilihan type berada pada Type List.

3. Isikan nama untuk List pada kotak List/Menu. 4. Kemudian tentukan jumlah baris yang akan ditampilkan pada kotak teks Height. 5. Jika anda menginginkan agar pengunjung dapat memilih lebih dari satu pilihan,

aktifkan kotak centang Selections. 6. Untuk menambah atau mengurangi isi list, tampilkan kotak dialog List Values dengan

mengklik tombol List Values.

7. Anda dapat memasukkan pilihan pada bagian kolom item label dan nilai pada bagian

value. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected. • Menggunakan Menu sebagai Pilihan


28

Sama halnya dengan List, menu merupakan sebuah objek yang digunakan untuk menampung beberapa pilihan dalam bentuk drop-down. Untuk menu ini hanya dapat memilih satu pilihan saja. Menu mempunyai fungsi yang sama seperti Radio Button. Anda dapat menyisipkan menu dengan langkah sbb: 1. Pilih menu Insert > Form > List/Menu. 2. Pada property List/Menu pastikan pilihan Type berada pada Type Menu. 3. Isikan nama menu pada kotak teks List/Menu. Namanya harus unik. 4. Untuk menambahkan atau mengurangi isi list, dapat tampilkan kotak dialog List Values

dengan klik tombol List Values. 5. Anda dapat memasukkan item ke dalam pilihan pada bagian kolom item label dan ketik

nilai pada bagian value. Tombol + untuk menambah item dan tombol – untuk menghapus item.

6. Item yang anda masukkan akan ditampilkan pada bagian Initially Selected. Menyisipkan File Field

File field digunakan untuk meng-upload suatu file ke server. File yang dapat di-upload melalui File Field ini antara lain file dokumen, file gambar, dan juga file-file lainnya. Anda dapat menggunakan method Post atau IIS untuk action dari form.

Tampilan File field ini mirip dengan Text Field. Hanya saja di sebelah kanan objek file field terdapat sebuah tombol bernama Browse. Tombol ini berfungsi untuk mencari file yang akan di-upload. Namun demikian anda juga dapat langsung mengetikkan nama file tersebut langsung pada kotak teks. Untuk menyisipkan objek File Field : 1. Tempatkan mouse pointer dalam form yang sudah disiapkan. 2. Pilih menu Insert > Form > File Field. 3. Kemudian aturlah propertinya.

4. Masukkan nama file field pada kotak teks filefieldname 5. Tentukan jumlah karakter yang dapat ditampilkan dalam kotak teks Char width. 6. Tentukan juga jumlah karakter yang dapat ditampilkan ke dalam kotak teks Max Chars.

Menyisipkan Button

Button merupakan sebuah tombol yang dapat digunakan untuk melakukan proses tertentu, misalkan untuk submit atau reset. Kedua tombol tersebut digunakan untuk sebuah proses di dalam form. Tombol submit untuk mengirimkan data yang dimasukkan ke dalam form selanjutnya dan diolah di dalam server. Sedangkan tombol reset untuk mereset atau mengosongkan data yang ada di dalam form hingga kembali ke nilai default. Untuk menyisipkan sebuah Button: 1. Pilih menu Insert > Form > Button. 2. Ketik nama button pada bagian button name. 3. Untuk memberikan nama button, ketikkan pada kotak teks label. Nama tersebut akan

ditampilkan pada button. 4. Tentukan pula actionnya, pilih Submit atau Reset.

X1. MEMBUAT ANIMASI WEB

Tampilan web yang statis membuat pengunjung cepat bosan karena tidak variatif. Web perlu animasi pendukung agar menarik untuk dikunjungi. Untuk membuat tampilan yang lebih interaktif, anda dapat memanfaatkan fasilitas yang ada pada Dreamweaver.


29

Konsep web dinamis ini muncul setelah adanya teknologi Dynamic HTML (DHTML), yaitu suatu teknologi web yang menggabungkan antara HTML,CSS dan Script. Salah satu fasilitas yang menarik yang disediakan oleh Dreamweaver adalah kemampuan menambahkan behavior pada halaman web. Dengan behavior halaman web akan terlihat lebih interaktif, variatif dan menarik untuk dikunjungi.

Behavior

Behavior adalah sebuah fasilitas yang menggunakan JavaScript, yang mengkombinasikan antara event dan aksi yang dihasilkan dari event tsb. Sedangkan event adalah suatu peristiwa tertentu dalam browser yang memicu terjadinya suatu aksi behavior.

Mengenal Panel Behavior

Panel ini merupakan tempat di mana anda dapat memberikan suatu aksi pada elemen halaman web dan tempat untuk mengubah parameter dari behavior yang telah anda gunakan. Langkah untuk menampilkan panel Behavior: 1. Pastikan aktif pada halaman web. Pilih menu Window > Behaviors. 2. Pada bagian panel Design akan ditampilkan panel behavior. 3. Pada panel tsb anda dapat mengatur beberapa pilihan antara lain:

• Tombol Add Behavior +, digunakan untuk menambahkan behavior baru pada suatu elemen.

• Tombol Remove Event -, digunakan untuk menghapus aksi behavior suatu elemen dari daftar behavior.

• Tombol panah atas dan panah bawah digunakan untuk mengatur urutan aksi behavior. • Tombol Event, digunakan untuk menampilkan menu pop-up yang berisi seluruh aksi.

Memberikan Behavior pada Elemen

Anda dapat menggunakan behavior hamper pada semua elemen web, seperti gambar, link frame, form bahkan sebuah dokumen sekalipun. Untuk teks, anda tidak dapat menambahkan sebuah aksi, tapi dapat menggunakan teks sebagai behavior dengan menambahkan link kosong pada teks tsb. Langkah menambahkan behavior pada elemen: 1. Pastikan aktif pada document window. 2. Pilih elemen yang akan diberi behavior, baik gambar, link maupun body. Untuk membuat

behavior pada seluruh halaman, dapat mengklik tag body yang terletak pada bagian kiri bawah document window.

3. Tampilkan panel Behavior pada panel Design (Shift + F3). Klik tanda plus untuk menampilkan menu pop-up, kemudian tentukan aksi yang diinginkan.

4. Setelah memilih salah satu aksi, sebuah kotk dialog akan tampil, menunjukkan parameter serta instruksi aksi. Masukkan parameter yang diminta lalu tekan Ok.

Membuat Behavior pada teks

Anda dapat menampilkan suatu behavior pada sebuah teks asalkan teks tsb diubah menjadi sebuah null link atau link tanpa target dengan menambahkan tanda pagar (#) di dalam kotak teks Link pada Property Inspector. Anda dapat menghilangkan pengaruh garis bawah dan alamat URL pada teks yang digunakan. Langkah untuk menghilangkan pengaruh null link adalah sbb: 1. Pilih teks dan buatlah sebuah link kosong pada teks tsb. 2. Pilih menu Text > CSS Styles > New. Akan tampil kotak dialog.


30

3. Pilih Use CSS Selector padaType. Masukkan a:link pada kotak teks Selector. 4. Pilih This Document Only pada Define in. tekan Ok. Akan muncul kotak dialog lagi.

5. Beri tanda centang pada None di Decoration. Tanda centang ini akan menghilangkan

tanda garis bawah pada link teks Menggunakan Aksi

Ada banyak sekali aksi behavior yang disediakan oleh Dreamweaver mx. Tak kurang dari 20 aksi. Jika anda ingin menambah jumlah aksi behavior, anda dapat mencarinya di situs Macromedia.

Pesan Melayang

Saat browsing di internet mungkin anda pernah mendapati sebuah pesan begitu anda masuk pertama kali membuka sebuah situs. Sebetulnya pesan tsb juga merupakan sebuah behavior.

Anda dapat membuat sebuah pesan yang tampil pada layer browser dengan menggunakan behavior Popup Message. Untuk menambahkan pesan tsb, lakukan langkah berikut: 1. Aktifkan document window dan kemudian tampilkan panel Behavior pada panel Design. 2. Klik tombol plus untuk menampilkan daftar aksi behavior, kemudian pilih Popup

Message sehingga tampil kotak dialognya. 3. Ketikkan sebuah pesan pada bagian kotak teks Message, di mana pesan tsb akan

ditampilkan pada saat halaman web dimuat di browser. Klik ok, untuk melihat hasilnya simpan file tsb lalu jalankan di browser.

Mengganti Image

Behavior Swap Image mempunyai fungsi yang sama dengan Rollover Image, yaitu mengganti suatu gambar dengan gambar yang lain. Langkahnya: 1. Aktifkan document window anda. 2. Tambahkan satu buah gambar sebagai gambar utama yang ditampilkan pada jendela

browser. 3. Pilih gambar tsb dan kemudian klik tombol plus pada panel Behavior. 4. Pada menu yang muncul, pilih Swap Image sehingga muncul kotak dialog.


31

5. Pilih gambar yang ingin digunakan pada kotak pilihan Images. 6. Tentukan gambar pengganti yang dapat anda ambil dari file gambar, yaitu dengan

menggunakan tombol Browse. 7. Untuk menampilkan gambar anda ke dalam cache browser, aktifkan pilihan kotak cek

Preload Image. 8. Jika anda ingin gambar kembali ke tampilan awal pada saat mouse pointer keluardari

gambar, aktifkan pilihan kotak cek Restore Image onMouseOut. Lalu tekan tombol OK. EFEK TRANSISI

Efek transisi digunakan untuk membuat animasi pada halaman web. Tapi saying belum banyak desainer yang memanfaatkan Transition effect ini untuk memukau pengunjungnya. Efek yang sangat menarik ini hanya dapat dinikmati pengunjung yang menggunakan IE versi 4 atau versi yang terbaru.

Pembuatan Transition effect tidak serumit yang anda bayangkan. Anda tidak perlu memasukkan script yang panjang di dalam jendela Code. Yang anda butuhkan adalah sebuah elemen yang ada di dalam HTML, yaitu <meta>. Efek ini akan bekerja pada saat pengunjung sedang masuk atau keluar situs. Atau pada saat memasuki sebuah halaman, di mana akan muncul sebuah efek yang menarik.

Macam Efek Transisi

Ada sekitar 24 macam efek transisi yang disediakan oleh Dreamweaver. Setiap jenis efek akan menghasilkan efek yang berbeda-beda dan hal itu tergantung pada nilai yang anda berikan. Berikut ini adalah berbagai efek yang dapat anda pilih beserta nilai valuenya:

Nama Efek Transisi Value Nama Efek Transisi Value Box In 0 Random Dissolve 12 Box Out 1 Split Vertical In 13 Circle In 2 Split Vertical Out 14 Circle Out 3 Split Horizontal In 15 Wipe Up 4 Split Horizontal Out 16 Wipe Down 5 Strips Left Down 17 Wipe Right 6 Strips Left Up 18 Wipe Left 7 Strips Right Down 19 Vertical Blinds 8 Strips Right Up 20 Horizontal Blinds 9 Randoms Bars Horizontal 21 Checkerboard Across 10 Randoms Bars Vertical 22 Checkerboard Down 11 Randoms 23

Menyisipkan Efek Transisi

Dreamweaver Mx memiliki dua cara untuk menyisipkan efek transisi. Yang pertama adalah dengan menggunakan fasilitas Dreamweaver meta tag. Sedangkan yang kedua dengan menggunakan script.

Berikut ini cara menyisipkan efek transisi dengan menggunakan meta tag: 1. Tampilkan halaman web yang ingin disisipi efek transisi.


32

2. Pilih menu Insert > HTML > Head Tags > Meta sehingga tampil kotak dialog Meta.

3. Pada bagian Attribute, pilih HTTP-Equivalent. 4. Pada bagian Value anda dapat mengisikan nilai-nilai berikut:

• Page-Enter, efek yang akan terjadi saat anda masuk ke halaman lain dalam suatu situs.

• Page-Exit, efek yang akan terjadi saat anda keluar dari sebuah halaman dalam suatu situs.

• Site-Enter, efek yang akan terjadi saat anda masuk ke sebuah wesite. • Site-Exit, efek yang akan terjadi saat anda keluar dari sebuah wesite.

5. Di bagian Content, isikan RevealTrans(Duration=15, Transition=23) sehingga hasilnya akan tampak sbb:

• Duration, digunakan untuk menentukan waktu yang diperlukan untuk menjalankan

sebuah efek sampai efek tsb selesai dimainkan. • Transition, digunakan untuk menentukan jenis transisi. Anda dapat mengisikan

transisi dengan mencantumkan nilai transisinya. 6. Untuk mengakhirinya tekan tombol OK. Untuk melihat hasilnya, jalankan jendela

browser. XII. MEMPUBLIKASIKAN SITUS WEB

Tujuan dari publikasi adalah untuk menampilkan desain web anda ke pengunjung web local atau dunia. Dalam hal ini anda membutuhkan suatu akses ke remote web server. Untuk melakukan akses tsb anda harus mempunyai server ISP atau intranet server dari sebuah perusahaan. Jika anda belum mempunyai akses menuju server tsb, anda harus menghubungi salah satu penyedia ISP atau system administrator.

Sebelum melakukan publikasi terhadap web anda, terlebih dahulu anda harus menguji situs untuk melihat apakah ada kesalahan di dalam desain web anda. Jika ada kesalahan, anda dapat melakukan pembetulan terlebih dulu sehingga penginjung web dapat mengakses tanpa harus mengalami masalah.

MENGUJI SITUS WEB

Pengujian situs bertujuan untuk mengetahui apakah situs yang dibuat dapat diakses oleh umum dan dapat bekerja sesuai yang diinginkan. Selain itu juga untuk mengetahui apakah link yang dibuat dapat berfungsi dengan betul dan untuk mengetahui kecepatan proses download halaman pada saat dibuka.

Untuk melakukan serangkaian uji situs, anda dapat melakukannya secara local dahulu. Hal ini dilakukan agar nanti jika ada suatu kesalahan dalam situs anda, dapat melakukan pembetulan.


33

Ada beberapa hal yang perlu anda ketahui dalam melakukan pengujian situs, antara lain: • Anda dapat melakukan pengetesan terhadap tampilan dari tiap tipe browser. Ini sangat

berguna untuk mengetahui perbedaan tampilan, warna, huruf maupun format lainnya. • Perhatikan juga setiap link yang dibuat. Jika ada kesalahan anda dapat membetulkannya. • Perhatikan pula untuk kecepatan download suatu halaman. Jika membutuhkan waktu

yang lama, pengunjung akan enggan untuk meneruskannya. Perhatikan ukuran file halaman.

• Yang tidak boleh ditinggalkan adalah melakukan pengetesan situs secara keseluruhan, untuk mengetahui dokumen yang ada di dalam halaman situs anda.

CHECK TARGET BROWSER

Fasilitas Check Target Browser digunakan untuk melakukan pengujian atau pengecekan halaman HTML di dalam dokumen dan digunakan juga untuk melihat atribut-atribut yang tidak didukung oleh target browser.

Langkah untuk menguji Target Browser sbb: 1. Aktifkan sebuah halaman yang ingin diuji.

2. Klik tombol untuk menampilkan menu melayang. 3. Pilih Setting untuk menampilkan kotak dialog Target Browser.

4. Pilih salah satu target browser yang ditampilkan pada daftar target browser pada tampilan

kotak dialog tersebut dan akhiri dengan menekan tombol OK. 5. Pilih menu File > Check Page > Check Target Browser sehingga tampil sebuah jendela

Results di bawah jendela Properties. 6. Klik tombol Check Target Browser untuk melihat laporan pada jendela Target Browser

Check. Jika pada panel Target Browser Check tidak terdapat keterangan yang menampilkan kesalahan pada halaman, maka akan dikosongkan tanpa keterangan.

7. Tetapi jika panel Target Browser terdapat keterangan yang menunjukkan kesalahan,

maka anda harus mengecek halaman tsb. 8. Jika anda ingin melakukan pengecekan terhadap keseluruhan situs, dapat menekan

tombol panah hijau yang terdapat pada panel Target Browser Check. Pada saat ditampilkan sebuah menu melayang, pilih Check Target Browser For Entire Site.


34

9. Setelah kotak dialog Check Target Browser ditampilkan, anda dapat memilih salah satu target browser pada daftar pilihan untuk mengetahui kesalahan pada setiap halaman situs anda.

10. Untuk melihat lebih jelas informasi kesalahan pada setiap halaman, anda dapat memilih salah satu laporan yang terdapat pada jendela Target Browser, kemudian tekan tombol More Info. Kotak dialog Discription berisi informasi yang menunjukkan kesalahan pada halaman yang anda pilih.

11. Jika anda ingin mengecek halaman sekaligus menampilkan laporan dalam jendela browser, klik tombol Browser Report yang tedapat pada panel Target Browser Check.

12. Untuk menyimpan laporan yang muncul dapat mengklik tombol Save Report yang terletak pada panel Target Browser Check.

MENGOREKSI LINK

Fasilitas Check Links digunakan untuk mengoreksi masalah link dalam suatu situs. Selain itu juga berfungsi sebagai pencari file yang tidak terpakai di dalam suatu situs. Yang dimaksud dengan file yang tidak terpakai adalah file yang ada dalam suatu situs yang tidak mempunyai link dengan file lainnya.

Untuk melakukan Check Links langkahnya sbb: 1. Pilih menu File > Check Page > Check Links. Pada bagian jendela Results akan tampil

Links Checker. 2. Dari tampilan yang ada, akan terlihat file-file dan link-link yang mengalami kerusakan. 3. Untuk mengecek seluruh link di dalam situs anda, tekan tombol panah berwarna hijau

yang terdapat pada panel Link Checkers kemudian pilih Check Links For Entire Situs. 4. Selanjutnya akan tampil laporan keseluruhan link yang memiliki masalah link yang tidak

berfungsi. 5. Selain dapat mengetahui link yang rusak, anda juga dapat mengetahui file yang tidak

terpakai. Untuk menampilkan file tsb, klik tanda panah pada menu Show yang terdapat pada panel Link Checker, pilih Orphaned Files.

MENYUNTING BROKEN LINKS DAN ORPHANED LINKS

Setelah anda mengecek link, anda dapat memperbaiki link yang tidak berfungsi. Anda dapat menggunakan fasilitas Check Links untuk menemukan link yang rusak. Selanjutnya lakukan langkah berikut: 1. Pastikan jendela Link Checker menampilkan beberapa link yang rusak dengan memilih

Broken Links pada kotak pilihan Show. 2. Pilih link yang ingin diedit dengan mengklik file link pada kolom Broken links. 3. Anda dapat mengganti file dengan mengklik folder dan tentukan file link sebagai

pengganti file link lama. Lalu tekan Enter. 4. Setelah file link tsb diganti maka file tsb tidak akan ditampilkan lagi pada laporan

Broken links. 5. Sedangkan untuk menghapus file yang tidak terpakai, anda dapat mengaktifkan

Orphaned Files pada pilihan Show sehingga akan tampil file-file yang tidak terpakai. Pilih file yang ingin dihapus kemudian tekan Delete.

6. Akan tampil konfirmasi apakah anda yakin ingin menghapus file terpilih, pilih yes untuk menghapusnya.

7. Setelah anda membenahi file link dan file yang tidak terpakai, anda dapat melakukan penyimpanan dengan menekan tombol Save Report pada panel Link Checkers.

KONEKSI PADA REMOTE SERVER Setelah anda melakukan pengecekan pada situs dan juga melakukan perbaikan,

selanjutnya anda dapat mempublikasikan situs tsb. Sebelumnya anda harus mengakses


35

remote web server untuk mengupload file situs anda ke remote wed server sehingga situs anda dapat dipublikasikan. Lakukan langkah berikut ini untuk membuat koneksi pada Remote Server: 1. Pilih menu Site > Manage Sites sehingga akan tampil kotak dialog Edit Situs.

2. Pada daftar nama situs, pilih salah satu nama situs yang ingin anda koneksikan ke remote

server. 3. Klik Edit yang terletak pada baris tombol di sebelah kanan daftar nama situs sehingga

tampil kotak dialog Situs Definition.

4. Jika anda ingin mengganti nama dari situs, lakukan pada bagian ini. Klik Next untuk

melanjutkan proses. 5. Pada bagian tampilan kotak dialog kedua, anda diminta menentukan aplikasi web yang

ingin digunakan, misalnya ASP Javascript, PHP, dsb. Tetapi jika tidak ingin menggunakan aplikasi web, anda dapat memilih No, I do not want to use a server technology.

6. Tekan tombol Next untuk melanjutkan ke proses berikutnya. Pada tampilan kotak dialog ketiga, anda diminta untuk menentukan tempat untuk mengedit file sebelum anda melakukan koneksi ke remote server. Tentukan pula di mana file akan disimpan. Anda dapat langsung mengisikan ke dalam kotak teks atau tekan ikon folder.


36

7. Klik Next untuk melanjutkan ke proses berikutnya. Anda diminta untuk menentukan

koneksi remote situs. Kemudian pilih salah satu pilihan yang disediakan,FTP, Loca;/Network, RDS, WebDave atau SourceSafe Database. Pada umumnya untuk melakukan koneksi ke remote situs di dalam server digunakan FTP atau File Transfer Protocol.

8. Selanjutnya anda dapat mengisikan Hostname server atau alamat FTP sebagai

penghubung antara Web dengan remote server, missal: 192.168.0.239 9. Tentukan folder yang berisi situs yang akan di-upload. Isi kotak teks root folder FTP

dengan root folder remote situs. Anda dapat mengkosongkan kotak teks tsb jika anda tidak yakin dengan path yang anda isikan.

10. Pada bagian Login, isikan nama user yang sudah terdaftar di dalam remote server, dan isikan juga password pada bagian Password.


37

11. Sebelum anda melanjutkan proses selanjutnya, anda dapat melakukan Test Connection. Tes koneksi ini berfungsi untuk menguji hubungan antara situs anda dengan remote server.

12. Apabila proses tes koneksi telah berjalan, Dreamweaver mx akan menampilkan kotak dialog konfirmasi yang menyatakan tes koneksi telah berhasil.

13. Setelah melakukan tes koneksi, anda dapat melanjutkan prosesnya dengan menekan tombol Next. Pada kotak dialog berikutnya pilih No, do not enable check in and check out. Hal ini dimaksudkan untuk menghindari tumpang tindihnya file jika ada lebih dari satu orang yang menangani pembuatan situs.

14. Tekan tombol Next untuk melanjutkan ke proses berikutnya. Pada tampilan kotak dialog yang terakhir akan ditampilkan informasi dari pengaturan yang telah anda lakukan.

15. Klik tombol Done untuk menyetujui pengaturan yang telah dilakukan, kemudian klik tombol Done sekali lagi untuk menyelesaikan proses pengeditan situs.