Mengenal Lingkungan Kerja Dreamweaver MX

Lihat Gambar 1. Dreamweaver MX menawarkan dua layout view untuk dijadikan sebagai tampilan kerja saat Anda membuat halaman web. Setelah instalasi, Dreamweaver MX akan memberikan opsi: Macromedia Dreamweaver MX Workspace atau Macromedia Dreamweaver 4 Workspace. Anda dapat mengubah-ubah tampilan ini lewat menu preferences, Modify > Preferences > Change Workspace. Pilihan ini tentu saja terserah Anda, pada tutorial ini saya akan menggunakan Dreamweaver MX Workspace.

Fig 1. Lingkungan kerja Dreamweaver MX

Berikut ini penjelasan untuk elemen-elemen workspace seperti telah tertera pada gambar. Document Window adalah tempat di mana Anda dapat membuat halaman web secara visual, kode, atau keduanya. Insert panel adalah tempat Anda dapat memasukan image, Flash movie, table, atau elemen lain. Insert panel ini serupa dengan menu Insert pada menu bar. Untuk memunculkan panel ini, klik Windows > Insert atau tekan Ctrl-F2. Property Inspector berguna untuk melakukan pengeditan pada suatu elemen di Document Window. Document Toolbar berguna untuk mengubah tampilan dari disign/visual view, code view, atau keduanya sekaligus. Selain itu juga untuk memberi titel pada dokumen, melihat tampilan di browser. Panels Group merupakan kumpulan dari panel-panel Dreamweaver MX.

Pada bagian ini kita akan membuat halaman web sederhana dengan pemformatan dasar pada teks, link, anchor, dan Page Properties.

Bekerja dengan Teks

Pada dasarnya Dreamweaver tidak jauh berbeda dengan program pengolah kata dalam memformat teks. Namun terdapat sedikit perbedaan karena Dreamweaver menggunakan HTML. Untuk memformat teks dapat kita lakukan dengan menggunakan Property Inspector. Lihat Gambar 2.

Fig 2. Property Inspector

Heading

Heading (Gambar 3) digunakan untuk membuat judul dari dokumen atau sub-subjudul berbagai level. Misalnya Anda menggunakan Heading 1 untuk judul, Heading 2 untuk subjudul tingkat pertama, dan sebagainya. Anda juga dapat menggunakan insert panel, pada Insert Panel, klik Tab Text.

Fig 3. Heading

Paragraf dan Line Break

Bila kita menekan Enter pada pengolah kata, maka akan menghasilkan paragraf baru. Demikian pula pada Dreamweaver. Namun paragraf dalam HTML (<p>) secara default menghasilkan jarak lebih besar daripada jarak antarbaris. Jika kita ingin antarbaris tidak ada jarak, maka kita membutuhkan <br> di HTML. Untuk berpindah baris dan bukan paragraf kita menggunakan Shift-Enter, atau Insert > Line Breaks. Lihat Gambar 4.

Fig 4. Paragraf dan Line Breaks

Memformat Teks Dengan Property Inspector

Seperti yang sudah kita bahas sebelumnya, Propery Inspector berguna untuk melakukan pengeditan pada sebuah elemen HTML. Kita akan menggunakan Property Inspector ini untuk memformat teks, ukuran, warna, dan perataan paragraf. Untuk memunculkan Property Inspector yaitu dengan Window > Properties atau dengan menekan Ctrl-F3.

Anda dapat memilih jenis font sesuai dengan selera Anda, namun terdapat 5 jenis font yang yang umum digunakan untuk halaman web, karena hampir semua komputer memiliki jenis huruf ini: Arial, Times New Roman, Courier New, Georgia, dan Verdana. Untuk mengubah teks yang telah Anda ketik yaitu dengan memilih teks yang ingin diubah, kemudian pilih jenis font yang ingin Anda gunakan. Dalam pilihan font dari drop down Property Inspector terdapat beberapa jenis huruf lain yang dipisahkan dengan koma. Pertama-tama browser akan membaca font pertama untuk ditampilkan di browser, bila font pertama tidak terinstal di komputer maka akan dilanjutkan dengan font kedua, kemudian ketiga, dan seterusnya. Font default adalah Times New Roman. Lihat Gambar 5.

Fig 5. Mengubah format huruf

Membuat Link, Anchor, dan Target

Untuk membuat link antarhalaman, selain diperlukan halaman link sumber—Source Link—juga diperlukan link tujuan—Destination Link. File contoh halaman Web sederhana di atas saya simpan dengan nama file index.htm. Halaman ini yang akan menjadi link sumber kita. Mari kita buat halaman baru untuk dilink:

Buatlah halaman baru untuk link tujuan, File > New, pada kotak dialog pilih Kategori Dynamic Page, dan Basic Page HTML. Lihat Gambar 6. Setelah selesai membuat file baru, kemudian simpanlah file tersebut dengan nama file tentangsaya.htm. Pada contoh, saya memasukkan horizontal Rule, Insert > Horizontal Rule untuk memisahkan konten dari halaman tersebut. Kemudian simpan di folder yang sama dengan index.htm.

Fig 6. Membuat dokumen baru

Pada index.htm, pilihlah teks “Tentang Saya”, kemudian pada Property Inspector ketikan tentangsaya.htm pada kotak link. Atau gunakan Browse For File untuk memilih file tentangsaya.htm lewat kotak dialog. Lihat Gambar 7. Cek dengan menggunakan browser, bukalah file index.htm (Gambar 8).

Fig 7. Memasukkan Link

Fig 8. Tampilan index.htm di browser

Untuk membuat link ke situs lain, setelah teks dipilih, ketik langsung pada kotak link alamat yang dituju, misalnya http://www.mwmag.com (Jangan lupakan http://).

Target

Target (Gambar 9) adalah perintah atau opsi pada link yang memberitahukan di window mana link tersebut akan dibuka. Setiap window atau frame di HTML dapat kita beri nama dan browser akan memuat halaman ke window/frame sesuai yang ditunjukkan oleh link. Sesuai aturan di HTML, terdapat nama-nama target khusus yang berarti spesial. _Self adalah pilihan default, bila Anda tidak menentukan target, link akan dibuka pada window browser atau frame yang sama. _top memuat ke window terluar (di luar semua frame yang ada). _Blank membuka link pada browser window baru. _Parent membuka link pada frame induk (kita akan membahas tentang hal ini pada bagian Frame nanti).

Fig 9. Target pada Property Inspector

Named Anchors

Bila halaman web Anda memungkinkan pengunjung menscroll window browser karena isi dari halaman tersebut panjang dan terdiri dari beberapa halaman, Anda dapat menggunakan Named Anchors ini untuk menentukan titik-titik tertentu pada halaman dengan tujuan memudahkan navigasi pengunjung mencari sesuatu dalam halaman dengan cepat. Pada halaman yang saya buat tentangsaya.htm terdapat beberapa menu yang langsung menuju ke topic tertentu pada halaman tersebut, setelah itu pengunjung dapat kembali ke atas halaman.

Untuk membuat Named Anchor, pertama kita tandai bagian khusus dari halaman: klik Insert > Named Anchors, atau tekan Ctrl-Alt-A. Setelah kotak dialog muncul masukan nama anchor. Pada file ini saya memberi nama kesukaan. Setelah itu klik OK. Pada bagian yang ditandai akan tampak tanda/icon buku terbuka. Lihat Gambar 10.

Fig 10. Named anchor

Setelah itu kembali ke halaman atas pilih teks yang akan di buat link pada bagian atas dokumen yang akan dihubungkan dengan Anchor tersebut, pada kotak link di Property Inspector ketikkan #kesukaan. Untuk mengembalikan ke atas halaman buat link baru pada bagian tersebut misal: kembali ke atas. Lihat Gambar 11. Kemudian masukkan di kotak link tanda # dan pilih _top untuk target dari link tersebut. Lihat di browser dengan menekan F12.

Fig 11. Membuat link ke bagian atas dokumen

Page Properties

Page Properties adalah fasilitas untuk mengubah properti dasar sebuah dokumen Web, seperti judul halaman, warna-warna link, dsb. Untuk membuka Page Properties klik Modify > Page Properties. Lihat Gambar 12. Title untuk menentukan judul dokumen. Background Image tempat memasukkan gambar sebagai latar belakang. Background menentukan warna latar. Text untuk menentukan warna teks. Links mengubah warna link. Visited Link mengubah warna link yang telah dikunjungi. Active Link mengubah warna link yang sedang diklik. Margin menentukan margin halaman. Semua elemen ini memiliki padanannya di dalam kode HTML, yaitu dalam atribut elemen <body>. Selain mengubah format tampilan melalui Page Properties, kita juga dapat melakukannya dengan CSS (Cascading Style Sheet) yang akan kita bahas pada tutorial bagian lain. Setelah selesai, Anda dapat melihat tampilannya di browser (Gambar 13).

Fig 12. Page Properties

Fig 13. Tampilan akhir tentangsaya.htm

Java dan JavaScript

Java merupakan sebuah bahasa pemrograman yang mirip dengan bahasa C. Tetapi dengan Java kita bisa membuat tampilan halaman sebuah web menjadi lebih menarik. Contoh penggunaan Java adalah pada fungsi Mouseover, scrolling marquees, tampilan tanggal dan waktu, kalkulator, dan lain-lain. Terdapat dua tupe Java yaitu Java applet dan Java Script.

JAVA APPLETS

Java merupakan bahasa pemrograman yang dikembangkan oleh Sun Microsystems dan merupakan bahasa pemrograman yang berorientasi obyek. Java bisa digunakan untuk membuat suatu aplikasi yang berdiri sendiri atau pun sebuah aplikasi mini yang biasa disebut applet. Applet biasa digunakan pada halaman web supaya terlihat lebih dinamis. Terdapat banyak sekali aplikasi/applet yang ada.

JAVA SCRIPT

JavaScript dikembangkan oleh Netscape, yang merupakan bahasa pemrograman yang “sederhana” karena tidak bisa digunakan untuk membuat suatu aplikasi atau pun applet. Java Script merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif. Program Java Script dituliskan pada file HTML (*.htm atau *.html) dengan menggunakan tag kontainer <SCRIPT>. Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah (walaupun Anda juga bisa melakukannya).

Contoh JavaScript Sederhana

IndoGlobalWeb menawarkan rancangan desain website baik statis, maupun dinamis yang simpel, menarik, dan elegan. Web programming dengan database, Intranet service. Setiap website akan langsung didaftarkan ke 900 lebih search engine dan direktori, menjamin website anda dapat dicari dan ditemukan dengan mudah oleh pengunjung / (calon) pelanggan anda.

Web Solution dengan Domain dan Hosting Gratis di IndoGlobal Web selama satu tahun juga layanan SEO (Search Engine Optimization) dari patner kami yang juga kami berikan secara gratis adalah solusi paling tepat bagi Anda yang tidak mau direpotkan dengan segala urusan website namun membutuhkan keberadaan adanya informasi Anda tersaji di dunia tanpa batas ini. Berikut beberapa website klien IndoGlobalWeb hasil kerja Team IndoGlobalWeb Programming And Design.

DOMAIN REGISTRATION

Nama domain adalah merupakan asset yang sangat berharga di dunia internet, tentu saja jika domain tersebut itu telah diregistrasikan oleh pihak lain maka kesempatan anda untuk memperoleh nama domain tersebut sangatlah langka. Kami selaku penyedia layanan domain menawarkan jasa registrasi nama domain dengan biaya ringan anda sudah bisa memiliki domain sendiri.

Keuntungan melakukan registrasi nama domain melalui IndoGlobalWeb :

• GRATIS domain control panel untuk pengaturan nama-nama domain anda
• GRATIS fitur Modify Name Server untuk mengatur name server hosting
• GRATIS fitur lock/unlock untuk menjaga keamanan domain anda
• GRATIS fitur Privacy Protection untuk menjaga keamanan data registran anda
• GRATIS fitur Registrant Modification untuk merubah data registran anda
• GRATIS fitur Manage Child Name Server untuk domain anda
  example : ns1.namadomainanda.com & ns2.namadomainanda.com
• Bila diperlukan, tersedia fitur tambahan (manage DNS, URL forwarder, e-mail forwarder)
• Full support 24 X 7

WEB HOSTING

“If you want to go online, you will need a powerfull faster and reliable web server. You can host your web site to our web server so your web can be accessed via internet.”

World Wide Web adalah bisnis yang membutuhkan webhosting handal, layanan sesuai kebutuhan, tetapi dengan harga terjangkau. IndoGlobal Web hadir dan siap melayani Anda secara profesional tanpa mengabaikan kenyamanan dan kebutuhan Anda. Juga siap menjadi Partner terbaik Anda di dunia Internet dengan menjadi penyedia layanan Hosting Terpercaya Anda. Hosting Murah Rp 3.500,- / bulan anda sudah bisa mendapatkan hosting yang handal,

Semua paket webhosting kami telah dilengkapi dengan fitur-fitur e-commerce serta semua tools untuk keperluan website anda.
Untuk memudahkan pilihan bagi anda, kami telah membagi paket-paket berdasarkan kebutuhan website anda. Dari paket yang sederhana sampai yang terbesar, semua dapat anda tentukan disini. Dan paket tersebut nantinya bisa di upgrade sesuai kebutuhan anda.

Memproses Dokumen RSS dengan XML_RSS

Belakangan ini banyak situs di internet yang menawarkan fasilitas sindikasi data dengan mpenggunakan RSS. Dengan menggunakan RSS ini, kita dapat dengan mudah mengambil data dari situs lain dan menampilkannya di situs kita sendiri. Namun pembacaan dan pemrosesan format RSS itu dapat menjadi masalah tersendiri jika kita tidak tahu cara yang mudahnya.
PHP memiliki suatu repositori kelas-kelas yang dapat digunakan oleh kita selaku developer PHP yang disebut dengan PEAR (The PHP Extension and Application Repository). Salah satu paket yang ada dalam PEAR adalah XML_RSS yang dapat mempermudah hidup kita dalam memproses format RSS.

Persyaratan
Untuk menggunakan XML_RSS tentunya Anda harus sudah memiliki paket XML_RSS tersebut. Buatlah script di bawah ini untuk mengecek apakah Anda sudah memiliki paket XML_RSS atau belum

<?

include(’XML/RSS.php’);

?>

Jalankan script tersebut dan lihat apa keluaran yang dihasilkan. Jika script tersebut mengeluarkan pesan kesalahan, berarti Anda belum memiliki paket XML_RSS. Mintalah kepada administrator komputer yang Anda gunakan untuk menginstallkan paket XML_RSS tersebut.
Jika Anda menggunakan komputer sendiri yang sudah terhubung dengan Internet, gunakanlah perintah di bawah ini untuk menginstall paket XML_RSS pear install XML_RSS

Perlu diperhatikan bahwa paket XML_RSS tersebut memiliki ketergantungan dengan beberapa paket lain, sehingga Anda juga harus menginstall paket-paket tersebut terlebih dahulu. Anda akan diberitahu oleh script instalasi paket PEAR jika Anda membutuhkan paket lain untuk diinstall terlebih dahulu.

Pembacaan dokumen RSS
Ada tiga cara untuk menentukan dokumen yang akan dibaca oleh XML_RSS, yaitu dengan menyebutkan nama file yang berisi dokumen RSS, memberikan file handler untuk suatu dokumen RSS, dan memasukkan sebuah string yang berisi dokumen RSS.
Kondisi yang menyebabkan cara pertama atau kedua harus digunakan tidak berbeda jauh. Cara pertama atau kedua dapat digunakan jika Anda memiliki dokumen RSS yang terletak pada file lain (atau bahkan ada di sebuah situs web yang terpisah). Cara ketiga digunakan jika Anda memiliki sebuah variabel yang mengandung sebuah dokumen RSS yang ingin Anda proses.

Contoh penggunaan cara pertama

$rss = new XML_RSS(’namafile.xml’);
$rss->parse();

Contoh penggunaan cara kedua

$f = fopen(’namafile.xml’, ‘r’);
$rss = new XML_RSS($f);
$rss->parse();

Contoh penggunaan cara ketiga
$rss = new XML_RSS(”);
$rss->setInputString($data_rss);
$rss->parse();

Setelah salah satu dari tiga cara di atas dilakukan, dokumen RSS Anda telah diproses dan siap untuk ditampilkan.
Menampilkan data dari dokumen RSS
Kelas XML_RSS memiliki 5 buah method yang dapat digunakan untuk menampilkan data dari dokumen RSS, yaitu getStructure(), getChannelInfo(), getItems(), getImages(), dan getTextInputs(). Dari kelima method tersebut, kita hanya akan menggunakan dua buah method, yaitu getChannelInfo() dan getItems().
Method getChannelInfo() digunakan untuk mendapatkan informasi umum mengenai dokumen RSS (data dari elemen channel pada dokumen RSS). Method ini akan mengeluarkan sebuah associative array yang berisi data-data yang dapat Anda gunakan, antara lain title, description, dan link.
Method getItems() digunakan untuk mendapatkan data-data yang ada dalam dokumen RSS. Method ini akan menghasilkan array yang masing-masing elemennya adalah suatu accosiative array yang berisi data title, link, pubDate, dan description.
Contoh implementasi
Script berikut akan membaca dokumen RSS dari http://fajran.net/blog/rss.php dan menampilkannya dalam bentuk HTML.

<?
include(’XML/RSS.php’);

$rss = new XML_RSS(’http://fajran.net/blog/rss.php’);
$rss->parse();

$channel = $rss->getChannelInfo();
$items = $rss->getItems();

?>
<html><head>
<title><?=$channel[’title’];?></title>
</head><body>

<h1><a href=”<?=$channel[’link’];?>”><?=$channel[’title’];?></a></h1>

<p><?=$channel[’description’];?></p>

<?

for ($i=0; $i<count($items); $i++) {

?>

<h2><a href=”<?=$items[$i][’link’];?>”><?=$items[$i][’title’];?></a></h2>

<p><?=$items[$i][’pubDate’];?></p>

<?=$items[$i][’description’];?>

<?

}

?>

Source code di atas dapat Anda lihat hasilnya melalui dengan membuka file memproses-rss.php

Untuk memudahkan dan memperjelas, mulai sekarang saya hanya akan menuliskan apa yang ada di antara tag <BODY>. Saya tidak akan menuliskan tag <HTML>, <HEAD> & <TITLE>. Tentu saja anda harus tetap menuliskannya di dalam dokumen anda.

<BODY>
</BODY>

Tuliskan sesuatu yang menarik.

<BODY>
Sesuatu yang menarik
</BODY>

Sesuatu yang menarik

Setiap kali anda mengubah dokumen anda, simpanlah, kemudian tekan tombol Reload di browser anda untuk menampilkan perubahan tersebut. Kadang-kadang cara ini kurang berhasil…. untuk itu tekan tombol Reload sambil menekan tombol SHIFT.

<BODY BGCOLOR=”#CCFFCC”>
Sesuatu yang menarik
</BODY>

Sesuatu yang menarik

CCFFCC adalah kode untuk warna hijau muda. Masih ada beberapa lagi.
Dalam mode 256 warna, Netscape menampilkan segala sesuatu sesuai warna-warna ini. Jika warna latar belakang yang kita gunakan bukan salah satu dari ini, Netscape biasanya akan memilih warna terdekat.

<BODY BACKGROUND=”swirlies.gif”>
Sesuatu yang menarik
</BODY>

Inilah gambar latar belakangnya.

Agar gambar tadi bisa tampil, browser harus dapat menemukannya. Untuk saat ini, kita ingin menempatkannya di direktori yang sama dengan file HTML anda (hal1.html). Cara termudah untuk itu adalah dengan meng-klik kanan gambar di atas dan memilih Save Image As (kurang lebih seperti itu). Cari direktori yang berisi hal1.html dan simpan gambar tersebut di sana. Nanti kita akan membahas hal ini lebih rinci lagi.

<BODY BACKGROUND=”bluebar.gif”>
Sesuatu yang menarik
</BODY>

Ini adalah gambar latar belakang tersebut

(Ukuran sebenarnya 1700×4, tetapi saya ubah menjadi 564×4 agar bisa tampil utuh di layar)

<BODY>
Sesuatu yang menarik
</BODY>

Sesuatu yang menarik

<BODY>
Sesuatu yang <B>menarik</B>
</BODY>

Sesuatu yang menarik

Yang kita katakan pada browser (kurang lebih) adalah: pada tag <B> mulai tampilan tebal, dan pada </B> mengakhiri tampilan tebal tersebut.

<BODY>
Sesuatu <I>yang</I> <B>menarik</B>
</BODY>

Sesuatu yang menarik

<BODY>
<U>Sesuatu</U> <I>yang</I> <B>menarik</B>
</BODY>

Sesuatu yang menarik

<BODY>
Sesuatu yang menarik
</BODY>

Sesuatu yang menarik

<BODY>
Sesuatu yang <I><B>menarik</B></I>
</BODY>

Sesuatu yang menarik

Ini adalah contoh tag bersusun (nested tags). Jika anda ingin menggunakan gabungan beberapa tag (yang mungkin akan anda lakukan beberapa kali), maka agar tidak membingungkan browser, pasangan tag tersebut harus bersusun secara benar (nested), tidak bersilangan (overlapping). Lihat contoh berikut….

   <INI><ITU></INI></ITU>    Tag bersilangan…. jangan
   <INI><ITU></ITU></INI>    Tag bersusun…. bagus