BAB II

5
Untuk mengetahui apakah suatu teks atau gambar tersebut merupakan
tanda link adalah dengan melihat perubahan bentuk penunjuk mouse jika
penunjuk mouse berubah bentuk menjadi gambar tangan yang sedang menunjuk,
berarti teks atau gambar merupakan suatu link yang menghubungkan anda ke
informasi lain dalam World Wide Web.
2.3.
HTML
HTML kepanjangan dari Hypertext Markup Language. HTML berasal dari
SGML (Standar internasional untuk merepresentasikan teks dalam bentuk
elektronik yang dapat digunakan untuk mengubah dokumen menjadi independent.
Fungsi dari HTML adalah me-markup teks, gambar, dan me-link beberapa
dokumen bersamaan. Hyperlink merupakan salah satu kelebihan HTML yang
memungkinkan untuk berpindah dari halaman ke halaman dalam satu site atau di
luar site tersebut.
2.4.
MENGENAL APLIKASI DESAIN WEB MACROMEDIA
MX
Dewasa ini merupakan salah satu sarana alternative bagi suatu perusahaan
untuk mempromosikan produk yang dihasilkannya. Situs sebagai saran promosi
memberikan beberapa nilai plus pada bidang promosi produk perusahaan, yaitu
keluasan jangkauan pasar hingga lingkup internasional dan biaya promosi yang
sangat rendah disbanding srana promosi lainnya yang menggunakan media
televise atau media cetak.
Sebagai saran promosi yang menggunakan jaringan internet, atau bias juga
disebut brosur dalam bentuk HTML, harus diediakan informasi yang jelas disertai
sistem navigasi yang baik karena situs tersebut tidak hanya diakses oleh kalangan
lokal, tetapi juga internasional. Dengan demikian, pengunjung akan dimudahkan
saat mencar informasi yang diinginkan.
Sebuah situs, selain berisi informsi yang berguan bagi para pengunjung,
juga harus memiliki tampilan grafis yang atraktif. Untuk menghadirkan sebuah
6
tampilan grafis yang atraktif, seorang desainer memerlukan manipulasi pada
image, mengingat sebuah halaman web terdiri dari teks, image dan suara.
Setiap situs harus dibangun dengan menajemen yang baik dan desain yang
menarik sehingga fungsi situs sebagai saran promosi untuk meningkatkan omzet
penjualan dapat tercapai. Pembuatan sebuah situs, yang pada akhirnya
menghasilkan manajemen yang baik dan desain yang menarik, tidak hanya
mempergunakan sebuah software manajemen pembuatan situs, tetapi juga
memerlukan adanya kombinasi antara penggunaan software desain grafis dengan
software manajemen pembuatan situs.
Sebelum mempelajari lebih jauh aplikasi program yang digunakan untuk
membangun sebuah situs, sebaiknya dapat dipahami dahulu pengertian situs dan
home page. Situs adalah sekumpulan dokumen yang dipublikasi melalui jaringan
internet maupun intranet sehingga dapat diakses oleh user malalui web browser.
Adapun home page adalah halaman utama dari suatu situs yang
menghubungkan halaman atau situs lainnya dengan menggunakn hyperlinks.
Sebuah situs dapat terdiri dari satu atau beberapa home page.
2.5.
APLIKASI PROGRAM YANG DIGUNAKAN
Banyak sekali aplikasi program situs yang diluncurkan untuk mendukung
pembuatan sebuah situs. Di antara beberapa program yang digunakan untuk
membuat situs, ada sebuah program yang merupakan aplikasi pengembangan situs
yang paling populer dan banyak digunakan untuk membuat situs karena aplikasi
tersebut mudah dioperasikan dan memberikan hasil yang optimal.
Program tersebut adalah Macromedia Studio MX, yang memilki beberapa
aplikasi pendukung untuk pembuatan situs yang atraktif. Aplikasi pendukung
yang terdapat pada Macromedia Dreamweaver, Macromedia Flash, Macromedia
Fireworks, Macromedia FreeHand, Macromedia ColdFusion.
Pada tugas ini, akan dibahas dua program untuk membuat desain web.
Ketiga software tersebut saling melengkapi sehingga desain web dapat menjadi
lebih sempurna, terutama dalam hal kecepatan waktu yang diperlukan untuk mendownload halaman web.
7
 Macromedia Dreamweaver MX merupakan software utama yang
digunakan oleh Web desainer maupun Web programmer dalam
mengembangkan suatu situs. Hal ini disebabkan ruang kerja, fasilitas dan
emampuan Dreamweaver yang mampu meningkatkan produktivitas dan
efektivitas dalam desain maupun pembangunan situs. Dreamweaver juga
dilengkapi dengan fasilitas untuk manajemen situs yang cukup lengkap.
 Macromedia Fireworks MX adalah suatu program pilihan yang
mendukung pengolahan dan pembuatan grafik untuk halaman Web.
Dapat pula diartikan bahwa program ini merupakan program aplikasi
yang dapat digunakan untuk membuat, mengedit dan mengoptimal-kan
grafik untuk Web secara cepat.
2.6.
PENGGOLONGAN SITUS
Dilihat dari isinya, sebuah situs dapat digolongkan menjadi dua jenis,
yaitu:
 Situs Statis, yaitu situs yang isinya bersifat statis. Situs ini sangat cocok
untuk erusahaan berskala kecil yang ingin memberikan informasi
singkat tentang perusahaannya. Kelemahan situs jenis ini adalah isi situs
yang bersifat statis sehingga perubahan isi situs atau penambahan umlah
halaman situs harus dilakukan secara manual.
 Situs Dinamis, yaitu situs yang isi dan tampilannya disimpan dalam
suatu database sehingga untuk melakukan perubahan atau penambahan
halaman situs tidak perlu melakukannya secara manual. Kelebihannya
adalah isinya yang akan menjadi semakin lengkap seiring berjalannya
waktu.
2.7.
MANAJEMEN SITUS
Membuat Situs memang mudah. Kita tak perlu menyisihkan banyak waktu
untuk menguasai suatu program pembuat situs. Saat ini telah banyak software
yang dapat membantu anda untuk membuat sebuah situs secara instan, uaitu
tinggal memilih model situs diikuti beberapa kali klik, situs anda sudah jadi.
8
Sebetulnya, dalam pembuatan sebuah situs dibutuhkan suatu kreativitas
dan jiwa seni sehingga situs yang dibuat itu tidak hanya anda tiru seutuhnya dari
software yang sudah ada sehingga terlalu kaku, melainkan memiliki suatu rasa.
Anda dapat menggunakan software pendukung untuk membuat tampilan dari situs
anda menjadi lebih menarik sehingga pengunjung situs anda bisa berlama-lama
menjelajahinya.
2.8.
MERENCANAKAN SITUS
Sebelum membuat sebuah situs, sebaiknya anda melakukan sebuah
perencanaan matang agar situs anda dapat benar-benar dapat dinikmati oleh para
pengunjung.
Langkah yang dapat anda ambil untuk merencanakan sebuah situs adalah sebagai
berikut:
 Tujuan situs
Suatu perencanaan selalu diawali dengan menentukan tujuan perusahaan
atas pembuatan situs. Dengan mengetahui tujuan pembuatan situs
tersebut, anda dapat memperkirakan komponen-komponen yang nantinya
anda pasang di halaman situs. Setiap web mempunyai tujuan masingmasing sehingga memiliki tampilan desain dan navigasi yang berbeda
pula.
 Pengunjung situs
Menentukan pengunjung situs sangatlah sulit. Kesulitan itu timbul
karena setiap pengunjung mengakses situs menggunakan sistem operasi,
web browser, koneksi internet dengan kecepatan yang berbeda. Selain
itu, pengunjung juga menggunakan resolusi monitor yang berbeda pula.
Sebagai
informasi,
sebagian
besar
pengunjung
situs
di
dunia
menggunakan sistem operasi Microsoft Windows 95-XP Edition, web
browser Microsoft Internet Ecplorer dan Netscape Navigator, dengan
kecepatan koneksi Dial-up Connection (55,6 kbps) dan menggunakan
resolusi monitor 800 x 600 dan 1024 x 768.
9
 Struktur situs
Pembuatan struktur sangat berguna untuk mempermudah pengaturan dan
penambahan homepage baru jika memang dimungkinkan untuk
menambahkan beberapa topik baru pada situs anda.
Pembuatan struktur yang konsisten akan menjadikan situs anda sebuah
situs yang terorganisir secara tepat, baik pada navigasi maupun isinya.
 Mendesain tampilan situs
Perencanaan tampilan situs sebelum anda membangunnya akan
menghemat waktu dalam proses pembangunan situs. Anda dapat
membuat satu atau beberapa contoh situs lengkap beserta isinya anda
dapat memilih salah satu contoh yang cocok sehingga hasil situs tersebut
memiliki tampilan desain visual yang konsisten.
 Membuat skema navigasi situs
Sama halnya dengan membuat desain situs, anda juga harus membuat
sebuah perencanaan skema navigasi untuk situs anda. Skema navigasi ini
digunakan agar dalam membuat sebuah situs, anda dapat menambahkan
navigasi secara konsisten sehingga pengunjung situs anda tidak
kebingungan saat menjelajahi situs anda.
2.9.
MENDESAIN SITUS
Setelah membuat keputusan untuk membuat situs, perlu dipertimbangkan
pula desain yang baik untuk situs itu. Makin cantik situs anda, maka makin betah
pula pengunjung untuk berlama-lama berselancar di dalamnya. Bukan itu saja,
situs yang menawan pun akan menggoda pengunjung untuk membeli produk yang
anda jual pada situs anda, malah dapat membujuknya untuk kembali ke situs anda
dan membeli lebih banyak lagi.
Desain web yang baik bertumpu pada dua prinsip pokok, yaitu
kesederhanaan serta kinerja yang tetap cepat saat dikunjungi. Pengunjung tidak
ingin kebingungan ketika berkunjung ke situs anda. Mereka tidak ingin
10
dibombardir oleh informasi yang terlalu berlebihan. Lebih-lebih lagi, mereka pun
tidak ingin menunggu terlalu lama ketika membuka halaman web anda karena
hanya akan memboroskan uang dan waktu mereka. Untuk membuat situs yang
apik dan menarik, tentu saja diperlukan pemikiran dan sedikit sentuhan rasa seni.
Hal-hal yang perlu diperhatikan di dalam mendesain sebuah situs dapat
anda simak dalam ulasan berikut:
 Tempatkan teks di dalam tabel
Teks jauh lebih mudah dibaca dan enak diliht jika tidak terlalu melebar
pada layar komputer. Lebar teks dapat dikontrol dengan meletakkannya
pada suatu tabel. Hal ini mempermudah pengaturan lebar teks. Lebar
terbaik untuk teks adalah sekitar 350 sampai 400 piksel, kira-kira sama
dengan lebar teks pada sebuah halaman buku.
 Penggunaan huruf
Agar pengunjung dapat membaca teks halaman web anda dengan mudah,
gunakan huruf (font) standar untuk web. Huruf standar untuk web adalah
Times New Roman, Arial, Helvetica dan Verdana. Verdana adalah font
yang khusus dikembangkan Mecrosoft agar teks web lebih mudah dibaca
pada layar komputer.
 Penggunaan warna
Penggunaan warna adalah cara yang terbaik untuk mempercantik situs
anda, tetapi jangan berlabihan. Pilih 3 atau 4 warna, dan gunakan secara
konsisten untuk seluruh halaman situs agar terlihat sebagai suatu
kesatuan. Putih masih merupakan warna terbaik untuk latar belakang
(background) karena teks jadi mudah dibaca.
2.10.
MENGENAL RUANG KERJA FIREWORKS MX 2004
Macromedia Fireworks adalah suatu program yang digunakan untuk
mengolah dan membuat desain grafis untuk halaman Web. Dapat pula diartikan
bahwa programini merupakan program aplikasi yang dapat digunakan untuk
membuat, mengedit dan mengoptimalkan desain grafis untuk web secara cepat.
11
Sebuah halaman web yang ideal tidak hanya berisi informasi yang berguna
bagi para pengunjungnya, tetapi juga memiliki kemampuan grafis yang atraktif.
Software tersebut diberi nama Fireworks yang dan masih di bawah produk
Macromedia.
Pada saat kita membuka dokumen di dalam program Macromedia
Fireworks untuk pertama kalinya, area kerja akan diaktifkan dengan menampilkan
panel Tools, Property Inspector, Menu dan panel-panel lainnya.
Gambar 2.1
Tampilan jendela program Fireworks MX 2004
Pada bagian tengah layar monitor, terdapat jendela dokumen. Adapun
pada bagian tengah dari jendela dokumen terdapat kanvas. Kanvas ini berfungi
menampilkan dokumen Fireworks dan beberapa objek grafis yang kita buat.
Pada bagian sebelah atas layar terdapt menu bar. Semua perintah pada
program Fereworks diambil dari menu bar.
Pada bagian sebelah kiri layar terdapat panel Tools. Jika panel Tools tidak
ditampilkan, kita dapat memilih (select), membuat (create) dan mengedit (edit)
beberapa objek grafis dan objek web.
Pada bagian bawah layar terdapat Property Inspector, apabila Property
Inspector tidak ditampilkan, pilih perintah menu Window Properties. Property
Inspector menampilkan property dari objek terpilih. Anda dapat melakukan
12
beberapa penggantian property objek atau tombol melalui property ini. Jika tidak
ada objek atau tombol yang terpilih, Property Inspector akan menampilkan isi dari
property dokumen.
•
Mengenal Toolbar
Toolbar merupakan baris perintah yang terdapat di bawah Menu Bar,
berisikan shortcut perintah-perintah yang sering digunakan di dalam
pengeditan.
Program Fireworks MX dilengkapi dengan dua buah toolbar, yaitu toolbar
Main dan Modify. Kita dapat menampilkan maupun menymbunyikan
kedua toolbar ini dengan cara mengklik menu Window Toolbar kemudian
pilih nama toolbar yang diinginkan.
New
Save
Open
Export
Import
Gambar 2.2
•
Undo
Print
Cut
Redo
Paste
Copy
Tampilan Toolbar Main
Mengenal Panel Tools
Panel Tools berisi grup tombol yang digunakan untuk mengedit image.
Panel Tools dibagi menjadi enam menjadi enam kategori, yaitu Sales,
Bitmap, Vektor, Web, Colors dan View.
Pada beberapa tombol terdapat tanda segitiga warna hitam yang
menunjukkan adanya tombol lai yang sifatnya serupa dengan tombol yang
ditampilkan. Kita dapat menampilkannya dengan memilih segitiga
tersebut.
13
Gambar 2.3
•
Tampilan dari Panel Tools
Select Tool (Tombol Select)
Tombol Select digunakan untuk memilih objek yang akan dimanipulasi.
Kita dapat menggerakkan, mengubah skala, memutar atau memotong
objek yang kita pilih.
Tombol select terdiri dari beberapa tombol dengan fungsi yang berbeda.
Untuk melakukan pemilihan ataupun melakukan memanipulasi ibjek yang
lain, kita harus mengaktifkan salah satu fungsi tombol yang kita inginkan.
Nama dan fungsi tombol Select adalah:
Nama Tombol
Fungsi
Memilih objek pada gambar bitmap dan vektor
untuk pengeditan
Pointer tool
Memilih objek yang berada di belakang gambar
bitmap dan vektor untuk pengeditan
Select Behind tool
Memilih bagian dari sebuah group objek gambar
bitmap atau memilih titik edit pada gambar vektor
Subselection tool
Mengubah ukuran atau skala pada objek terpilih
14
Scala tool
Mengubah ukuran atau skala pada objek terpilih
Skew tool
Menggeser sudut atau sisi pada objek terpilih
Distort tool
Memotong bagian dari objek
Crop tool
Mengekspor bagian objek yang diinginkan
Export Area tool
Tabel 2.1 Fungsi Select Tool
•
Bitmap Tool (Tombol Bitmap)
Tombol Bitmap digunakan untuk memanipulasi objek bitmap, seperti
melakukan pembuatan sebuah objek bitmap, melakukan pengeditan dan
memberi warna sebuah ovjek bitmap. Semua objek yang dibuat dengan
tombol Bitmap akan menjadi objek dengan format bitmap.
Nama dan fungsi pada tombol Bitmap antara lain:
NamaTombol
Fungsi
Memilih objek bitmap dengan bentuk persegi
Marquee tool
Memilih objek bitmap dengan bentuk oval
Oval
Memilih objek bitmap berdasarkan kesamaan pada
warna
Magic Wand
Memilih objek bitmap secara bebas
Lasso tool
Memilih objek bitmap dengan sudut banyak
15
Poligon Lasso
tool
Membuat objek bitmap dengan efek cat semprot
Brush tool
Membuat garis bebas pada objek bitmap
Pencil tool
Menghapus bagian tertentu pada objek bitmap
Erase tool
Memberikan efek kabur atau mengurangi fokus pada
bagian bagian objek bitmap
Blur tool
Memberikan efek fokus bagian tertentu pada objek
Sharpen tool
bitmap
Memberikan efek terang bagian tertentu pada objek
bitmap
Dodge tool
Memberikan efek gelap pada bagian tertentu pada objek
bitmap
Burn tool
Memberikan efek noda pada bagian tertentu pada objek
bitmap.
Smudge tool
Menduplikasi atau menggandakan bagian tertentu dari
Rubber Stamp
Objek bitmap.
tool
Mengganti warna.
Replace Color
tool
16
Melakukan penggantian pada efek mata merah pada
Red Eye
gambar photografi.
Removal tool
Memilih warna pada objek bitmap dan menyimpannya
Eyedropper
pada color option.
tool
Memberikan warna pada objek bitmap berdasarkan
kesamaan warna yang terhubung.
Paint Bucket
tool
Memberikan efek warna gradasi pada objek bitmap.
Gradient tool
Tabel 2.2 Fungsi Bitmap Tool
•
Vector Tool (Tombol Vektor)
Tombol Vektor digunakan untuk melakukan pengeditan pada objek
vektor. Manipulasi yang dapat kita lakukan anatar lain membuat garis atau
kurva, mengedit garis atu kurva, membuat tulisan, dan memotong garis
pada bidang kerja. Semua objek yang dibuat dengan menggunakan tombol
Vektor akan menjadi objek dengan mode vektor.
Nama dan fungsi pada tombol Vektor adalah:
Menggambar bentuk persegi pada objek vektor
Rectangle
tool
Menggambar bentuk persegi dengan sudut tumpul pada
objek vektor
Rounded
Rectangle
tool
17
Menggambar bentuk bundar pada objek vektor
Ellipse tool
Menggambar bentuk segi banyak pada objek vektor
Poligon tool
Menggambar sebuah objek vektor dengan pengatur,
Arrow
seperti bagian kepala panah, bagian belakang panjang
dan lebar, dan ujung lengan
Tombol gambar dengan bentuk seperti kotak dengan
Beveled
Rectangle
pojik suku untuk membuat objek bevel. Gunakan titiktitik pengatur untuk mengedit sejumlah siku pojik secara
bersama atau mengganti siku tiap pojok
Tombol ini digunakan untuk membuat objek kotak yang
sudutnya melengkung
Chamfer
Handle berbentuk wajik di setiap sudut objek digunakan
Rectangle
untuk mengedit bentuk objek
Tombol Connector Line digunakan untuk membuat garis
penghubung satu objek dengan objek yang lain
Connector
Line
Tombol Doughnut digunakan untuk menggambar objek
dengan tampilan seperti cincin. Dengan menggunakan
Doughnut
L-Shape
titik pengatur, kita dapat mengatur garis lingkaran
Tombol L-Shape digunakan untuk menggambar objek
berbentuk siku atau bentuk L. Dengan menggunakan titik
pengatur, kita dapat mengedit sudut
Tombol Pie digunakan untuk menggambar objek
lingkaran
Pie
grafik
Pie.
Dengan
menggunakan
titik
pengatur, kita dapat membagi lingkaran sehingga
lingkaran tersebut tidak utuh 180 derajat
Tombol Smart Polygon digunakan untuk menggambar
18
Smart
objek dengan banyak sudut mulai dari 3 sampai 25 sudut.
Polygon
Dengan
menggunakan
titik
pengatur,
kita
dapat
mengubah ukuran dan memutar, menambah atau
menghapus bagian-bagian, menambah atau mengurangi
nilai pada sisi, atau menambah bagian dalam segi banyak
ke suatu bentuk
Tabel 2.3 Fungsi Vector Tool
•
Web Tool (Tombol Web)
Tombol Web digunakan untuk membuat suatu objek interaktif pada
halaman web. Pada tombol web, terdapat dua fungsi yang sangat penting
di dalam membuat objek interaktif, yaitu hotspot dan slice. Hotspot
digunakan untuk membuat hyperlink pada gambar, sedangkan Slice
digunakan untuk memotong gambar yang akan dipergunakan di dalam
web untuk mengurangi waktu download.
Nama dan fungsi pada tombol Web adalah:
Membuat hotspot dengan bentuk kotak pada objek web
Rectangle
Hotspot tool
Membuat hotspot dengan bentuk lingkaran pada objek
web
Circle Hotspot tool
Membentuk hotspot dengan bentuk persegi banyak
Polygon
pada objek web
Hotspot tool
Memotong gambar dengan bentuk persegi pada objek
Slice tool
web
Memotong gambar dengan bentuk persegi banyak pada
Polygon Slice
tool
objek web
19
Menyembunyikan potongan gambar dan hotspot pada
objek web
Hide slices and
hotspots
Menampilan potongan gambar dan hotspot pada objek
web.
Show slices and
hotspots
Tabel 2.4 Fungsi Web Tool
•
Color Tool (Tool Color)
Tombol Color (warna) digunakan untuk mengubah warna pada objek
terpilih. Fungsi utama tombol Color ini adalah mengatur warna stroke dan
fill pada objek gambar.
Nama dan fungsi tombol Color adalah:
Memilih warna Stroke atau garis tepi
Stroke colors
option
Memilih warna pada Fill atau isi
Fill colors
option
Mengembalikan tatanan warna default Stroke dan warna
Fill
Set Default
Stroke/Fill
Colors
Menghapus warna pada Stroke dan Fill
No Stroke or
Fill
Menukar warna antara warna Stroke dan Fill
Swap
20
Stroke/Fill
Colors
Tabel 2.5 Fungsi Color Tool
•
View Tool (Tombol View)
Tombol View digunakan untuk mengatur besaran tampilan pada bidang
kerja. Selain itu juga untuk melakukan pengeditan secara mendetail.
Tombol ini digunakan ketika kita bekerja pada halaman web yang besar.
Tombol View ini tidak akan mengubah karakteristik gambar yang diedit.
Nama dan fungsi pada tombol View adalah:
Menampilkan seting default pada tampilan jendela
Standart Screen
dokumen.
mode
Menampilkan seting tampilan penuh dengan menampilkan
Full Screen
with Menus
menu bar, toolbar dan titlebar pada tampilan jendela
dokumen.
mode
Menampilkan seting tampilan penuh tanpa menampilkan
Full Screen
menu bar, toolbar dan titlebar.
mode
Menggeser objek gambar yang melebihi batas kanvas atau
lembar kerja.
Hand tool
Memperbesar tampilan objek.
Zoom tool
Tabel 2.6 Fungsi View Tool
•
Mengenal Property Inspector
21
Property Inspector merupakan sebuah panel yang berfungsi menampilkan
informasi properti pada objek yang terpilih. Selain itu, Property Inspector
juga menampilkan tatanan dari objek yang terpilih.
Secara default, letak panel Property Inspector ini berada di bagian bawah
jendela kerja. Kita dapat mengatu letak panel Property Inspector tersebut
dengan menggeser gripper (yang berada di bagian kiri atas panel) ke
tempat yang kita inginkan.
Gambar 2.4 Tampilan Property Inspector
•
Mengenal Grup Panel
Grup panel terdiri dari beberapa panel yang terdapat di bagian sebelah
kanan. Panel-panel tersebut diposisikan secara mengambang sehingga kita
dapat mengelompokkan panel tersebut dalam satu grup panel. Grup panel
yang terdapat pada Fireworks MX dapat disebut panel fungsi editing.
Panel fungsi editing ini terdiri dari 4 buah panel, antara lain Optimize,
Assets, Layers, dan Frames and History.
Setiap panel pada grup panel mempunyai fungsi mengatur property objek
yang berbeda pada halaman kerja. Misalnya pada Panel Layers, panel ini
digunakan untuk mengatur struktur dokumen, serta berisikan pilihanpilihan untuk membuat, menghapus dan mamanipulasi layer dan frame.
22
Gambar 2.5 Tampilan Panel Grup
Panel Optimize, digunakan untuk mengatur properti ukuran objek dan tipe
file. Selain itu, juga digunakan untuk mengatur pewarnaan dan mengekspor
gambar yang sudah terpoting-potong.
Panel Assets, terdiri dari tiga tabulasi panel, yaitu Style, URL dan Library.
Panel Styles, digunakan untuk menyimpan dan menggunakan kembali kombinasi
karakteristik objek atau menggunakan style yang sudah ada. Panel URL,
digunakan untuk mengatur link ke alamat URL tertentu. Panel Library, berisikan
simbol grafis, tombol dan animasi.
Panel Frames and History; Panel Frame digunakan untuk membuat
animasi pada frame yang sedang diedit. Panel History digunakan untuk
menampilkan perintah yang pernah digunakan. Dengan panel ini, kita melakukan
pembatalan perintah maupun pengulangan secara cepat.
2.11.
MENGENAL RUANG KERJA DREAMWEAVER MX 2004
Macromedia Dreamweaver adalah HTML editor professional untuk
mendesain secara visual dan mengelola situs maupun halaman web.
23
Dreamweaver merupakan software utama yang digunakan oleh web
desainer maupun web programmer dalam mengembangkan suatu situs. Hal ini
disebabkan ruang kerja, fasilitas dan kemampuan Dreamweaver yang mampu
meningkatkan produktivitas dan efektivitas dalam desain maupun membangun
suatu situs. Dreamveaver juga dilengkapi dengan fasilitas untuk manajemen situs
yang cukup lengkap
Saat pertama kali kita mulai menjalankan Dreamweaver, tampil sebuah
kotak dialog Workspace Setup yang digunakan untuk memilih tampilan ruang
kerja.
•
Designer
workspace
adalah
sebuah
penggabungan
ruang
kerja
menggunakan MDI (Multiple dovument Interface), di mana semua jendela
dokumen dan panel-panel tergabung di dalam satu jengdela aplikasi yang
besar, dengan sisi panel group di sebelah kanan. Tampilan ini telah diakui
oleh banyak pengguna.
•
Coder workspace adalah ruang kerja yang tergabung sama, tetapi letak sisi
panel group berada di sebelah kiri, tampilan serupa yang juga digunakan
oleh Macromedia Homesite dan Macromedia ColdFusion Studio, dan
jendela dokumen menampilkan tampilan Code secara default. Tampilan
ini sudah diakui untuk pengguna HomeSite atau ColdFusion Studio dan
pengguna kode lainnya yang ingin mengenal tampilan ruang kerja.
Ketika kita memulai Dreamweaver tanpa membuka sebuah dokumen,
tampil halaman awal Dreamweaver pada lembar kerja. Halaman awal
memberikan kita kemudahan dalam maengaksis tutorial Dreamweaver, memilih
file yang sudah terbuka, membuat halaman baru, membuat halaman dari contoh
dan Dreamweaver tanpa membuaka sebuah dokumen. Halaman awal, jalankan
langkah berikut:
1. Jalankan dreamweaver tanpa membuka sebuah dokumen. Halaman awal
akan ditampilkan pada layar monitor kita.
2. Klik Don’t Show Again.
24
Gambar 2.6 Tampilan awal Dreamweaver mx 2004
Ruang kerja pada Dreamweaver MX 2004 memiliki komponen-komponen yang
memberikan fasilits dan ruang untuk menuangkan kreasi kita dalam bekerja,
seperti yang terlihat pada gambar diatas. Komponen-komponen yang disediakan
oleh ruang kerja Dreamweaver MX 2004 antara lain adalah Insert Bar, Document
Toolbar, Document Window, Grup Panel, Tag Selector, Property Inspector dan
Site Panel. Penjelasan dari komponen-komponen yang terdapat di dalam ruang
kerja Dreamweaver MX 2004 adalah:
25
Gambar 2.7 Tampilan ruang kerja Dreamweaver MX 2004
 Document Window berfungsi untuk menampilkan dokumen di mana kita
sekarang bekerja.
 Insert Bar mengandung tombol-tombol untuk menyisipkan berbagai
macam objek seperti image, tabel dan layer ke dalam dokumen.
 Document Toolbar berisikan tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari Document Window.
 Grup Panel adalah kumpulan panel yang saling berkaitan satu sama
lainnya yang dikelompokkan di bawah satu judul.
 Tag Selector berfungsi menampilkan hierarki tag di sekitar pilihan yang
aktif pada Design view
 Property Inspector digunakan untuk melihat dan mengubah berbagai
properti objek atau teks.
 Site Panel digunakan untuk mengatur file-file dan folder-folder yang
membentuk situs kita.
Apabila kita memilih Dreamweaver MX 2004 Workspace dengan cara
memberi tanda centang pada kotak Code, yang akan tampil ruang kerja seperti di
bawah ini. Pada ruang kerja tipe code ini, kita bisa bekerja dengan menggunakan
26
kode=kode HTML ataupun kode pemrograman Web. Jadi, apabila kita ingin
bekerja menggunakan kode-kode, kita bisa menggunakan tampilan tipe ini.
2.11.1. KOMPONEN RUANG KERJA DREAMWEAVER MX 2004
Di dalam ruang kerja Dreamweaver MX 2004, terdapat beberapa
komponen utama yang membentuk suatu ruang kerja. Ruang kerja Dreamweaver
MX 2004 ini memberikan kesatuan tampilan antara menu utama, panel, property
inspector serta toolbar.
 Menu Utama
Sistem menu yang terdapat pada Dreamweaver MX 2004 sangat sederhana
dan mudah untuk dipahami karena perintah-perintah yang terdapat pada
hampir sebagian besar fungsi menu terdapat juga dala panel. Dengan
demikian, kita tak akan banyak menghabiskan waktu dengan melakukan
perintah yang terdapat pada menu, melainkan lebih banyak bekerja dengan
menggunakan perintah-perintah yang terdapat pada panel.
Di dalam sistem menu Dreamweaver MX, terdapat beberapa komponen yang
dapat kita gunakan, yaitu:
•
Menu File dan menu edit
Berisikan item menu standar untuk menu File dan menu Edit, seperti
New, Open, Save, Save All, Cut, Copy, Paste, Undo, dan Redo.
Menu File terdiri dari beberapa macam perintah untuk menampilkan
atau memperlakukan dokumen baru, seperti Preview in Browser dan
Print Code. Menu Edit berisikan perintah untuk pemilihan seperti
Select Parent Tag, serta Find dan Replace.
•
Menu View
Berisikan perintah untuk menampilkan beberapa macam tampilan
dari dokumen kita (seperti tampilan Design view atau tampilan code),
menampilkan dan menyembunyikan beberapa elemen halaman,
tombol-tombol Dreamweaver, toolbar dan lain-lain.
27
•
Menu Insert
Berisikan alternatif baris Insert untuk menyisipkan objek di dalam
dokumen.
•
Menu Modify
Berfungsi melakukan perubahan properti pada item atau halaman
terpilih. Dengan menggunakan menu ini, kita dapat melakukan
pengeditan atribut-atribut tag, mengganti tabel dan elemen tabel, dan
bermacam bentuk aksi untuk item library dan template.
•
Menu Text
Berfungsi mempermudah dalam melakukan format text.
•
Menu Commands
Berisikan akses ke beberapa perintah, format kode yang sesuai
dengan format pilihan kita, membuat photo album, dan melakukan
pengeditan gambar dengan menggunakan Macromedia Fireworks.
•
Menu Site
Berisikan 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 dokumen Dreamwweaver, membuka lembar
kerja Help untuk membantu kita dalam menggunakan Dreamweaver,
dan menyediakan bahan referensi untuk beberapa bahasa.
 Baris Standard
Pada saat kita membuka jendela Dreamweaver MX, secara default hanya
menampilkan Document Bar tanpa menampilkan Standard Bar.
28
Gambar 2.8 Tampilan Baris Standard
Untuk menambahkan atau mengaktifkan Standard Bar, kita dapat melakukan
langkah-langkah berikut:
1. Membuat dokumen baru.
2. Memilih perintah menu View ► Toolbars sehingga akan tampil
submenu Document dan Standard.
3. Klik pilihan Standard untuk menampilkan Standard Bar.
4. Menggunakan perintah yang sama untuk menyembunyikan tampilan
Standard Bar. Untuk menyembunyikan, kita bisa mengklik pilihan
yang sudah terpilih.
Berikut ini adalah tabel fungsi-fungsi tombol perintah yang terdapat di
dalam Standard Bar:
Nama tombol
Keterangan
Berfungsi membuat halaman web baru
New
Berfungsi membuka halaman web yang sudah ada
Open
Berfungsi menyimpan halaman web yang sedang aktif
Save
Berfungsi menyimpan seluruh halaman web yang sedang
Save all
dibuka
berfungsi menghapus objek yang dipilih
Cut
Berfungsi menyalin objek yang dipilih
Copy
Berfungsi menempelkan/meletakkan objek hasil salinan
29
Paste
Berfungsi membatalkan perintah yang terakhir kali
dilakukan
Undo
Berfungsi mengulang kembali perintah yang terakhir kali
dibatalkan
Redo
Tabel 2.7 Fungsi-fungsi tombol perintah dalam Standard Bar
 Baris Tombol Dokumen
Document Toolbar berisikan tombol-tombol dan menu pop-up yang
menyediakan tampilan berbeda dari document window. Kita bisa mengatur
tampilan Document Window dalam bentuk Design view atau Code view atau
kedua-duanya. Kita juga dapat memberikan judul document window pada
bagian Title.
Gambar 2.10 Tampilan Document Toolbar
Nama Tombol
Show Code View
Keterangan
Menampilkan mode pengetikan kode HTML dalam
jendela Code View
Menampilkan jendela Code View dan jendela
Design View.
Show Code and
design Views
Menampilkan jendela Design View. Pada tampilan
Show Design View
ini, apa yang kita lihat akan sama seperti pada
jendela browser
30
Melakukan pengecekan kesalahan pada dokumen
web
No Browser Check
Errors
Memberikan judul pada dokumen web
Document Title
Menjalankan proses upload dan download file
File Management
Melihat hasil dalam browser, mencari kesalahan
Preview/Debug in
Browser
Refresh Site List
script dalam dokumen dan untuk memasukkan
browser dalam daftar browser yang dikenali oleh
Dreamweaver MX
Melakukan pembaharuan terhadap daftar isi situs
kita
Mengatur pilihan pada tampilan ruang kerja kita
View Options
Tabel 2.9 Fungsi-fungsi tombol Dokumen
 Baris Insert
Baris Insert terdiri dari tombol-tombol untuk membuat dan menyisipkan
objek seperti tabel, layer dan gambar. Ketika kita menggulung pointer
melewati sebuah tombol, tampil sebuah kotak keterangan dengan
menampilkan nama tombol.
Tombol-tombol tersebut mengatur beberapa kategori. Kita dapat berganti
kategori dengan menekan tombol pada bagian kiri Insert bar. Kategori
tambahan akan kelihatan ketika sebuah dokumen sekarang berisi kode
server, seperti dokumen ASP atau CFML. Ketika kita mulai menjalankan
program Dreamweaver, kategori yang ditampilkan sama seperti pada waktu
kitabekerja terakhir kalinya.
Catatan:
Jika kita lebih menyukai tampilan kategori seperti tabulasi yang berada di
atas baris Insert, kita dapat mengganti tampilan baris Insert tersebut.
31
Gambar 2.11 Tampilan Insert Bar sebelum diganti
Gambar 2.12 Tampilan Baris insert Bar setelah diganti
Beberapa kategori mempunyai tombol dengan menu melayang. Ketika kita
memilih sebuah pilihan dari menu melayang, hal tersebut akan menjadikan aksi
default dari sebuah tombol. Sebagai contoh, jika kita memilih Image Placeholder
dari tombol menu melayang Image, di lain waktu ketika ita menekan tombol
Image, Dreamweaver akan menyisipkan sebuah image placehoder. Setiap waktu
kita memilih sebuah opdi baru dari menu melayang, aksi default pada tombol
akan berubah.
Baris Insert digunakan untuk mengatur beberapa kategori pilihan berikut:
•
Kategori Common memungkinkan kita untuk membuat dan
menyisipkan beberapa penggunaan objek biasa, seperti gambar dan
tabel.
•
Kategori Layout memungkinkan kita untuk menyisipkan tabel, div
tag, layer, dan frame. Kita juga dapat memilih salah satu dari tiga
tampilan tabel: Standard (default), Expanded Tables, dan Layout.
Ketika mode tampilan terpilih, kita dapat menggunakan tombol
layout dreamweaver: Draw Layout Cell dan Draw Layout Table.
•
Kategori Forms berisikan tombol-tombol untuk membuat form dan
menyidipkan elemen form.
•
Kategori Text memungkinkan kita menyisipkan beberapa teks dan
daftar format tag, seperti b, em, p, hl, dan ul.
32
•
Kategori HTML memungkinkan kita untuk menyisipkan beberapa
tag HTML untuk mistar horizontal, head content, tabel, frame,dan
script.
•
Kategori Server-code hanya tersedia untuk halaman-halaman yang
menggunakan bahasa khusus server, termasuk di dalamnya ASP,
ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP, dan
PHP. Selain itu, kategori ini menyediakan objek-objek server-code
yang dapat kita sisipkan di dalam tampilan Code.
•
Kategori Application memungkinkan kita untuk menyisipkan elemen
dinamis seperti recordset, repeated region, dan record insertion dan
update form.
•
Kategori Flash Elements memungkinkan kita untuk menyisipkan
elemen Flash
•
Kategori Favorites memungkinkan kita untuk mengelompokkan dan
mengatur tombol-tombol baris Insert yang kita gunakan dalam satu
wadah.
 Jendela Dokumen (Dokument Window)
Document Window merupakan bagian yang digunakan untuk mendesain
halaman situs. Dalam Document window, kita dapat menyisipkan teks,
image serta objek lain yang mendukung pembuatan situs atau tempat untuk
membuat desain Web.
Tidak seperti pada versi sebelumnya, Dreamweaver MX memuat dokumendokumen yang sedang dibuka dalam jendela yang sama. Jika kita perhatikan,
dokumen yang terbuka dalam jendela yang sama akan disimpan dalam
tab0tab seerti lembar kerja pada Microsoft Excel. Dengan demikian, kita
dapat dengan mudah berpindah antar dokumen tapa harus menutup tampilan
jendela yang sudah terbuaka dengan jalan mengklik tab dokumen yang kita
inginkan.
33
Gambar 2.13 Document Window
 Grup Panel
Grup Panel adalah kumpulan panel yang saling berkaitan satu sama lain,
yang dikelompokkan bersama di bawah satu judul. Kalau kita perhatikan
pada bagian Grup Panel, di situ terdapat beberapa panel yang tersusun secara
rapi pada bagian sebelah kanan window. Grup Panel tersebut antara lain:
Design, Code, Application, Giles dan Answer. Pada setiap bagian dari Grup
Panel, terdapat beberapa panel lagi. Misalnya Grup Panel Design berisikan
panel HTML Style, CSS Style dan Behaviour. Pada bagian Grup Panel Files
terdapat panel Site dan Assets. Untuk menguraikan Grup Panel, kita bisa
mengklik panah expander di sebelah kiri nama grup.
Kita juga dapat memisahkan Grup Panel yang tersusun tersebut dengan cara
menggeser mouse pada bagian pojok kiri dari judul Grup sampai Panel
tersebut terlepas dari Panel.
34
Gambar 2.14 Grup Panel dan Grup Panel Files
 Files Panel
Files panel merupakan bagian dari Grup Panel Files selain panel Assets.
Bagian ini berfungsi mengatur file dan folder yang membentuk situs kita.
Panel ini memiliki fungsi lain yang cukup penting karena memungkinkan
kita untuk bekerja dan mengatur file-file dari situs dengan efisien.
Gambar 3.15 Files Panel di dalam Grup Panel Files
Pada bagian Files panel ini, kita dapat melakukan beberapa aktvitas antara
lain manajemen file, melakukan koneksi ke remote server atau testing serber,
menempatkan file ke server, atau menyalin file dari server ke situs lokal.
 Snippets Panel
35
Snippets panel merupakan kode yang sering digunakan dan disisipkan pada
dokumen. Kita dapat mengambil kode snappet builtin yang ada di dalam
bagian snippet dengan cara menentukan terlebih dahulu kode apa yang akan
disisipkan ke dalam dokumen. Misalnya, apabila ingin membuat sebuah
judul beserta menu, maka kita harus memilih Headers. Selajutnya, kita bisa
menentukan bentuk Headers tersebut. Selain Headers, kita juga bisa
menggunakan kode lainnya seperti footer, layout navigasi, fungsi JavaScript
dan masih banyak lagi yang dapat dilihat pada hirarki.
Gambar 2.16 Snippets panel
Kita juga dapat menambahkan atau mengubah kode snippet yang sudah ada
sesuati kebutuhan kita.
 Tag Inspector
Tag Inspector merupakan salah satu fasilitas terbaru dari Dreamweaver MX.
Dalam Tag inspector, kita dapat melihat struktur hirarki tag dan atributatribut yang dapat ditambahkan atau diedit.
 Tag Selector
Tag Selector merupakan pada bagian bawah document window atau pada
bagian status bar. Fungsi tag selector adalah menampilkan kirarki tag pada
36
design view yang aktif. Secara otomatis, saat kita mengaktifkan jendela
document window, indikator <body> akan muncul pada bagian status bar.
 Property Inspector
Property Inspector digunakan untuk melihat dan mengubah berbagai properti
objek dan teks yang terpilih. Setiap objek maupun teks mempunyai properti
yang berbeda-beda. Misalnya, teks yang terpilih akan menampilkan propertiproperti teks seperti yang tampak pada di bawah ini.
Gambar 2.17 Property Inspector Text
Pada bagian properti, terdapat beberapa pengaturan format untuk jenis font,
ukuran font, perataan dan lain sebagainya. Adapun pada properti image
akan ditampilkan pengatur ukuran image, nama image dan sebagainya,
seperti pada gambar di bawah ini.
Gambar 2.18 Property Inspector Image
2.12.
SWISH MAX
Swish max adalah suatu program yang menggunakan teknologi adobe
flash untuk menciptakan penyajian-penyajian program silang yang cocok yang
dikembangkan dan disalurkan oleh swish zone.com pty. Ltd yang berbasis di
sidney Australia. Swish max menggandakan effect yang tersedia dalam software
adobe flash.
Effect ini terpasang pada swish max dan hasilnya banyak orang
mendapatkannya, tidak hanya banyak orang mendapatkannya tetapi juga lebih
37
cepat daripada the flash software swish max sedapat mungkin juga lebih murah
daripada macromedia software. Produk-produk swish max terutama untuk
format .swf tercipta oleh macromedia sekarang adobe untuk kegunaan tampilan isi
mereka pada web di dalam parameter disimpan oleh the.w3c informasi swish
dapat digabungkan .asp. nu. Php. Sql yang membuatnya sangat berguna seperti
GUI untuk sistem database. Swish max menggunakan sebuah variasi dari action
script untuk tulisan atau naskah ada banyak dari sumber forum terbuka yang
membantu pemula-pemula untuk mengerti bagaimana kerjanya flash. Forum ini
juga mendorong batas-batas bagaimana swish max dapat dipergunakan untuk
ciptaan flash dan diperbaharui secara teratur. Swish max direncanakan untuk
sistem operasi windows seluruh versi dan berjalan terus pada pc dengan pentium 3
, 300Mhz, proseccor 64mb, ram, monitor dengan kapasitas dari 800 x 600 screen
resolution dan 256 tampilan warna.
2.13.
Teori Struktur Navigasi
Struktur Navigasi adalah struktur atau alur cerita dari sebuah program
yang biasanya digunakan untuk menghubungkan halaman-halaman web yang
berdasarkan elemen-elemen yang digunakan dalam aplikasi web. Ada empat
macam bentuk dasar struktur navigasi, yaitu: Struktur Navigasi Hirarki, Struktur
Navigasi Linier, Struktur Navigasi Non Linier dan Struktur Navigasi Campuran.
2.13.1. Struktur Navigasi Hirarki
Struktur yang mengandalkan percabangan untuk data atau gambar pada
layar dengan kriteria tertentu. Menu utama (master page) memiliki percabangan
yang disebut halaman pendukung (Slave page).
Homepage
38
Gambar2.19 Contoh Struktur Navigasi Hirarki
2.13.2. Struktur Navigasi Linier
Struktur navigasi linier (satu arah) adalah struktur yang mempunyai satu
rangkaian alur cerita yang berurutan. Dalam struktur navigasi ini tidak
diperkenankan adanya percabangan.
Gambar2.20 Contoh Struktur Navigasi Linier
2.13.3. Struktur Navigasi Non Linear
Struktur navigasi non linear adalah pengembangan dari struktur navigasi
linier
dalam
struktur
navigasi
ini
dimungkinkan
Percabangan ini berbeda dengan struktur
adanya
percabangan.
hirarki karena tiap-tiap tampilan
mempunyai kedudukan yang sama yaitu tidak adanya menu utama dan tampilan
pendukung.
39
Gambar2.21 Contoh Struktur Navigasi Non Linear
2.13.4. Struktur Navigasi Komposit
Merupakan gambaran dari ketiga struktur sebelumnya yaitu navigasi
hirarki, navigasi linier dan navigasi non linier.
Gambar2.22 Contoh Struktur Navigasi Komposit