MENGENAL APLIKASI DESAIN WEB MACROMEDIA

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