Mendesain Web menggunakan Dreamweaver (1)

Mendesain Web menggunakan Dreamweaver
(1)
Sejak kelahiran world wide web (WWW) pada tahun 1989, perkembangan internet
mejadi sangat pesat, hingga sekarang ini internet telah menjadi kebutuhan sehari-hari.
WWW yang semula dirancang sebagai media inetrent untuk bertukar informasi dan
menghubungkan sumber daya yang tersedia di internet lewat sarana hyperlink, ternyata
berkembang sebagai sarana hiburan, komersial, sampai promosi. Bahkan, internet
sekarang identik dengan web, yang berwarna-warni dan gemerlap. Tidak terlalu salah
anggapan tersebut, karena WWW dirancang kompatibel dengan semua teknologi internet
terdahulu, seperti e-mail, gopher, FTP, bahkan IRC. Berkembang pesatnya WWW
membuat semua hal yang berhubungan dengan internet dikenal dengan awalan web,
seperti web server, web design, webmaster, dan web programmer. Bidang desain web
terus berkembang seiring berkembangnya penggunaan web sebagai sarana kehadiran
seseorang, sebuah organisasi, atau satu perusahaan di internet. Jika dulu, spesifikasi
HTML sebagai bahasa pemrograman web hanya mencakup paragraf, gambar, dan link,
kini telah mencakup pengaturan style, font, warna, pemrograman script dan multimedia,
serta animasi yang membuat web semakin hidup.
Pembuatan situs web identik dengan HTML, walaupun sekarang ada beberapa teknologi
alternatifnya, naumn hanya HTML yang mempunyai standar yang baku dan cukup
dipatuhi oleh semua pihak. Teknologi HTML dikembangkan dan distandarisasi oleh
organisasi nirlaba W3C (World Wide Web Consortium), dengan standar terakhir versi
4.01. Untuk ke depannya, HTML perlahan-lahan akan digantikan oleh standar baru,
XML, yang lebih fleksibel. Sebagai proses transisi, W3C menetapkan standar XHTML
1.0 sebagai jembatan antara HTML dan XML. Standar-standar lain untuk membuat situs
web adalah :
a. Java, yang dibuat oleh Sun Microsystems (http://www.sun.com)
b. Flash, yang dibuat oleh Macromedia (http://www.macromedia.com)
Kedua teknologi tadi bisa membuat situs web tanpa HTML/XML sama sekali, namun
diperlukan program tambahan (plugin) untuk mengaksesnya melalui browser web. Ada
juga teknologi lain yang bersifat melengkapi HTML, yaitu :
a. JavaScript, yang dikembangkan Netscape bersama Sun Microsystems
b. ActiveX, ASP, dan Windows Media yang dikembangkan Microsoft
(http://www.microsoft.com)
c. RealMedia, yang dikembangkan RealSystems (http://www.real.com)
d. PHP (http://www.php.net) dan Perl (http://www.perl.com), yang dikembangkan
komunitas open source
e. ColdFusion, buatan Macromedia
Teknologi di atas bersifat melengkapi HTML dengan menambahkan kemampuan
interaktif/dinamik situs web yang dibuat dengan HTML.
Pemrograman HTML sama saja dengan pemrograman dengan bahasa pemrograman
seperti Basic, Pascal, atau C. Yang dibutuhkan hanya editor teks murni dan
kompiler/interpreter untuk menerjemahkannya ke dalam format yang dipahami komputer.
Untuk HTML, interpreter/kompiler yang dibutuhkan adalah browser web yang
mendukung standar HTML terakhir, yaitu versi 4.01 (CSS level 1/2) dan XHTML versi
1.0. Beberapa browser yang populer antara lain:
a. Internet Explorer, buatan Microsoft, dipakai oleh hampir 90% pengguna internet.
Tersedia untuk platform Windows dan Mac.
b. Netscape/Netscape Communicator (http://www.netscape.com), buatan AOL
(http://www.aol.com), pernah menjadi browser terpopuler sampai tahun 1998.
Tersedia untuk platform Windows, Mac, Unix,dan Unix/ Linux.
c. Mozilla (http://www.mozilla.org), browser open source yang disponsori Netscape,
dikembangkan sejak tahun 1997. Tersedia untuk platform Windows, Mac, dan
Unix/Linux.
d. Opera (http://www.opera.com), buatan Opera Software, browser kuda hitam yang
cepat dan lincah. tersedia untuk platform Windows, Mac, Unix/Linux, Symbian,
dan BeOS.
e. Konqueror (http://www.kde.org), merupakan bagian dari KDE (K Desktop
Environment), tampilan desktop di Linux. Tersedia untuk platform Linux.
f. Lynx, browser berbasis teks yang cepat (karena tidak menampilkan
gambar/multimedia), tersedia untuk platform DOS/Windows dan Unix/Linux.
Browser yang baik untuk keperluan pembuatan desain web adalah yang mendukung
standar terakhir (HTML 4.01, CSS level 1/2, XHTML 1.0, XML 1.0) dan tersedia untuk
platform-platform yang dominan, dalam hal ini Windows, Mac, dan Linux.
Kita bisa mendesain situs web menggunakan editor teks biasa, seperti Notepad
(Windows) atau vi (Unix/Linux), namun untuk mendesain situs web modern, dengan tata
letak grafik dan aliran teks nonstandar, diperlukan program desain web khusus. Bagi
yang lebih menyukai pemrograman manual, tersedia program editor yang lebih baik,
dilengkapi highliting kode (pengodean warna), browser internal, shortcut untuk
pengetikan tag, sampai pengecek sintaks kode. Program-program editor yang cukup
populer antara lain :
a.
b.
c.
d.
e.
f.
Macromedia Homesite (Windows)
Arachnophilia (Windows) (http://www.arachnoid.com)
Evrsoft 1st Page 2000 (Windows) (http://www.evrsoft.com)
BareBone Editor (Mac) (http://www.barebone.com)
BlueFish (Linux) (http://bluefish.openoffice.nl)
Quanta/Quanta Plus (Linux) (http://quanta.sourceforge.net)
Bagi yang menginginkan lebih, tersedia program dengan tampilan grafik (WYSIWYG)
yang berangkat dari konsep desktop publishing. Kita mengatur tata letak kata dan gambar
di halaman web tanpa menyentuh kode HTML. Program inilah yang akan
membangkitkan kode HTML untuk rancangan kita. Program-program semacam ini lebih
mahal dan memakan resource hardware lebih besar dibandingkan editor. Program-
program jenis ini yang populer antara lain :
a.
b.
c.
d.
Microsoft FrontPage (Windows)
Macromedia Dreamweaver (Windows/Mac)
Adobe GoLive! (Windows/Mac) (http://www.adobe.com)
NetObjects Fusion (Windows) (http://www.netobjects.com)
Program-program ini ada yang menyediakan template siap pakai bagi pengguna pemula.
Tinggal pilih salah satu template yang tersedia, lalu mengisi data-data yang diperlukan,
dan situs web sudah siap dalam sekejap. Ada cara lain untuk membuat situs web, yaitu
menggunakan HTML converter yang terdapat dalam program pengolah kata. Hampir
semua program pengolah kata populer menyediakan fasilitas ini. KIta tinggal membuat
dokumen di program itu seperti biasa, menambahkan hyperlink, menyisipkan gambar
atau grafik lain di dalamnya, lalu menyimpannya sebagai file berformat HTML. Program
pengolah kata yang menyediakan fasilitas ini antara lain:
a.
b.
c.
d.
Microsoft Word versi 97 ke atas (Windows/Mac)
StarOffice Writer versi 5.1 ke atas (Windows/Unix/Linux)
Corel WordPerfect versi 7 ke atas (Windows/Mac, versi 8 tersedia untuk Linux)
OpenOffice.org Writer (Windows/Unix/Linux)
Dreamweaver adalah program desain web berbasis WYSIWYG yang sangat populer.
Program ini mula-mula dikembangkan untuk platform Apple Macintosh, sedangkan
untuk Windows Macromedia mengembangkan program Backstage Designer. Karena
Backstage Designer gagal, macromedia kemudian mem-port Dreamweaver ke Windows
dan ternyata sukses, bahkan berhasil menyaingi Microsoft FrontPage di kalangan
profesional dan pengguna mahir. Keunggulan Dreamweaver antara lain :
a. Sinkronisasinya dengan standar kode HTML, sehingga kode HTML yang
dihasilkannya dapat dibaca dan diedit oleh program lain. Dalam paket
penjualannya, Dreamweaver dilengkapi program editor HTML Homesite
(Windows) atau Barebone Editor (Mac) untuk menyunting kode HTML lebih
lanjut.
b. Kemampuan HTML dinamiknya serta JavaScriptnya mampu mengatasi dualisme
browser IE/Netscape, sehingga bisa dibaca di kedua browser itu. Berbeda dengan
FrontPage yang cuma bisa dibaca di Internet Explorer saja (maklum, satu pabrik)
c. Integrasinya dengan Flash (satu pabrik juga) membuat penyisipan objek Flash ke
dalam desain web menggunakan Dreamweaver sangat mudah dan langsung bisa
diedit.
d. Tidak banyak menggunakan ekstensi yang aneh-aneh (seperti FrontPage
extension) yang membutuhkan server khusus (Windows NT atau Linux/Unix
ditambah modul FrontPage). Sebaliknya, Dreamweaver mendukung semua
pemrograman web seperti ColdFusion (satu pabrik lagi), JSP, ASP, PHP,
CGI/Perl, bahkan WML. Untuk pengembangan situs e-commerce berbasis ASP,
tersedia program Dreamweaver Ultradev.
e. Dengan Macromedia Extensions Manager dan dukungan komunitas Macromedia
Exchange, kita bisa mendownload banyak program tambahan dan plugin secara
gratis dari internet.
Tentu saja semua itu tidak didapat dengan gratis. Harga program ini cukup mahal untuk
ukuran program sejenisnya, sekitar US$ 300, sedangkan FrontPage cuma US$ 179, dan
tersedia dalam paket Microsoft Office (mulai edisi Small Business). Namun, untuk versi
terbarunya, Dreamweaver MX, tersedia dalam satu paket Macromedia Studio MX, yang
berisi program-program Dreamweaver, Flash, Fireworks, ColdFusion Studio, Homesite,
dan Freehand dengan harga ekonomis (dibandingkan beli satu-satu).
Prinsip penggunaan Dreamweaver sebenarnya sederhana, yaitu :
a. Jangan mengharapkan template built-in. Dreamweaver tidak mengemas template
siap pakai, kecuali Anda mau mendownloadnya dari internet
b. Sebaliknya, Anda dibebaskan membuat template sendiri dengan memanfaatkan
fasilitas Dreamweaver
c. Sebelum membuat halaman web, buat dulu situs web anda, di bagian server. BUat
folder khusus untuk menampung situs web anda, misalnya di c:\My
Documents\My Webs\Namasitus
d. Buatlah template terlebih dahulu dengan pendekatan mudah. Anggaplah halaman
web sebagai kliping, dengan layer sebagai potongan-potongan koran/majalah
yang akan ditempel
e. Buatlah layer kosong, isi dengan gambar/teks/grafis lain yang ingin Anda
tempatkan dalam halaman web Anda
f. Atur ukuran dan penempatan layer dalam halaman web, dengan patokan lebar
halaman harus sesua resolusi layar yang digunakan (640x480, 800x600, atau
1024x768). Gunakan patokan dalam preferences untuk mengatur lebar halaman
(sekitar 620 untuk resolusi 640x480 atau 760 untuk resolusi 800x600)
g. Sesuaikan pengaturan ukuran dan penempatan layer, lalu simpan sebagai template
(save as template)
h. Jika menginginkan tampilan yang berbeda antarhalaman, langsung saja simpan
sebagai halaman web, dengan memberi judul pada page properties
i. Untuk penyesuaian lebih lanjut, editlah kode HTML yang tersedia secara
langsung (melalui codeview) atau menggunakan Homesite
j. Berhubung layer hanya didukung browser versi 4 ke atas, Anda bisa mengonversi
layer ke tabel, untuk memastikan kompatibilitasnya dengan browser kuno
menggunakan menu convert layer to table. Anda bisa mengonversinya kembali ke
layer dengan menu convert table to layer
k. Gunakan Link validation untuk mengontrol link antarhalaman web yang Anda
buat, jika ada link yang rusak (broken links), perbaiki link di halaman tersebut
l. Gunakan fasilitas HTML validation untuk mengecek sintaks kode HTML
m. Gunakan browser favorit Anda untuk melihat tampilan situs web Anda
n. Ada beberapa fasilitas tambahan yang bisa dimanfaatkan, seperti image map,
image swap (gambar berubah jika didekati mouse), dan flash button untuk
menambah cantik tampilan web Anda
o. Jika komputer Anda terhubung ke internet/web hosting, Anda bisa melakukan
administrasi situs web Anda lewat FTP server yang tersedia
p. Jika kurang jelas, tersedia banyak bantuan di Dreamweaver. Ada help, tutorial,
dan juga referensi HTML dari O'Reily
q. Tersedia juga opsi untuk penggunaan CSS, yang sangat dianjurkan untuk
memisahkan tampilan dari konten, di tab styles
r. Asset Manager mendaftar semua sumber daya yang digunakan di situs web yang
sedang dibuat, seperti gambar, movie, audio, script, link, dan template