Di bagian ini kita akan mengekplorasi lebih jauh tentang kehebatan dreamweaver dan manfaat optimal stylesheet. Di Seri II kamu sudak merasakan bagaimana mudahnya membuat tabel dengan Dreamweaver. Hanya dengan drag and drop sebuah struktur tabel yang sulit bisa kamu buat dalam sekejap (kalau kamu memang sudah menguasai). Pada bagian ini saya akan menjelaskan bagaimana membuat link dan menu dengan mudah, dan bagaimana mengambil objek dari jendela lain menggunakan fasilitas Copy and Paste.
Di Seri II kamu juga telah mengenal stylesheet sebagai alternatif penulisan property tag. Kali ini kamu akan merasakan bagaimana nikmatnya menggunakan stylesheet untuk menyingkat dan memudahkan pembuatan property.
Membuat Menu
OK. Kita akan melanjutkan pekerjaan sebelumnya yang belum tuntas. Kali ini kita akan menambahkan menu dan isi dari halaman. Di seri sebelumnya kita sudah membuat header halaman. Dan header itu kamu buat dengan menggunakan bingkai tabel. Menu dan isi halaman yang akan kita buat juga dibingkai dalam tabel. Jadi, langkah pertama untuk melakukan hal tersebut adalah dengan membuat tabel persis di bawah tabel header. Tabel ini hanya memiliki satu baris dengan dua kolom. Kolom pertama widhtnya diberi nilai 180 px dan kolom kedua deberi nilai 100%. Kolom pertama akan kita gunakan untuk memuat menu, dan kolom kedua yang ada di sebelah kanannya akan kita gunakan untuk menemapatkan isi halaman. Paham,kan, keinginan saya?
Caranya gimana? Caranya, ya, sama dengan cara membuat header di seri sebelumnya. Kamu lihat lagi, kemudian praktikkan untuk membuat tabel yang sekarang. Mungnkin yang masih menjadi pertanyaan adalah, berapakah nilai height tabel ini. OK. Sebenarnya nggak penting berapa nilainya. Karena height tabel akan secara otomatis mengikuti jumlah baris terbanyak dari kolom yang ada. Tetapi saya menyarankan, bikin heightnya 150, untuk memudahkan kerja kamu pada tampilan desain. Sebab kalau tabelnya terlalu sempit, kamu akan kesulitan membuat cell di dalam tabel itu. Sebagai panduan, bandingkan hasil drag and drop kamu dengan kode HTML di bawah. Kalau sudah cocok berarti langkah kamu sudah sukses.
<table> <!– bingkai halaman dan terletak persis setelah </body> –>
<tr>
<td>
<!– di sini letak table header kamu –>
</td>
</tr
<tr>
<!—ini baris bau yang dibuat secara otomatis untuk menampung tabel yang kamu buat –>
<td>
<table> <!—tabel dua kolom yang kamu buat –>
<tr>
<td width=”180”>
</td>
<td width=”100%”>
</td>
</tr>
<tr>
<!—baris spacer untuk memastikan bahwa lebar kolom pertama bernilai tetap, yaitu 180 px. Masih ingat fungsi spacer kan? –>
<td width=”180” height=”1”><img bla bla ada Spacer.gif>
</td>
<td width=”100%”>
</td>
<tr>
</table> <!—akhir tabel dua kolom –>
</td>
</tr>
</table> <!– akhir tabel bingkai halaman –>
Perlu saya ingatkan bahwa sebaiknya kamu menggunakan fasilitas drag and drop dalam membuat tabel ini. Sebab, kalau kamu membuatnya dengan menulis kode di atas, akan sia sia kamu menggunakan Dreamweaver. Persingkat dan permudah kerja kamu dengan Dreamweaver, dan periksa kebenaran tag dengan modal pengetahuan HTML kamu.
Membuat Menu
Ada banyak cara untuk membuat menu, dari yang sangat mudah sampai yang njelimet. Dreamweaver memberikan banyak alternatif untuk membuat menu, baik dengan melibatkan javascript, file flash, image atau tanpa melibatkan apapun. Sebenarnya saya ingin mengajak anda bermain dengan javascript. Tetapi setelah saya pertimbangkan masak-masak, tampkanya melibatkan makhluk baru yang bernama javascript akan memperpanjang pertemuan kita. Jadi, saya putuskan untuk memilih file flash, karena sifatnya yang instan tetapi tidak mengurangi keindahan. Tentang javasript, lupakan aja dulu. Lain waktu, kalau ada sumur di ladang ajalah kita oprek oprek sepuasnya.
Rencannya menu akan kita letakkan di kolom pertama tabel terkahir yang kamu buat. Sekarang perhatikan Insert Toolbar di jendela Dreamweaver kamu dan ikuti langkah berikut:
- Aktifkan tampilan Desain
- Tempatkan cursor kamu di bagian paling kolom pertama tabel yang kamu baru saja kamu buat.
- Aktifkan pilihan “Common”. Kalau “Common” dalam keadaan aktif, seharusnya di situ ada icon “Media”, tepatnya di sebelah icon “Date”, yang salah satu sub pilihannya adalah “Button Flash”. Kalau sudah ketemu, klik “Button Flash dan jendela dialog akan ditampilkan.
- Isi masing masing kolom di jendela itu seperti ini:
- Style : pilih model mana yang kamu suka. Contoh button (tombol ) yang kamu pilih akan ditampilkan di kolom “Sample”.
- Button Text : isi dengan tulisan “Beranda”. Teks ini akan ditampilkan di atas tombol.
- Font & Size : isi sesuai dengan keinginan kamu. Yang penting tampak proprosional.
- Link : isi dengan tanda pagar “index.htm”. Kamu masih ingat latihan HTML di Seri I, kan. Di situ kamu menghubungkan file latihan1.htm dengan file latihan2.htm melalui link. Nah, maksud link ini juga demikian: kalau kamu klik tombol beranda, maka halaman index.htm akan ditampilkan
- Target : ini masih berkaitan dengan link atau tag <a>. coba tengok lagi tutorial pertama kamu. Kalau sudah ingat, isi sesuka kamu. Kalau saran saya, sich, sebaiknya pilih “_self”.
- BG color : sebaiknya dikosongkan, kecuali kamu bisa membuat warna selaras antara tombol dengan background.
- Save as : isi dengan “B_Beranda”. Teks ini akan menjadi nama file swf kamu.
- Klik tombol OK, dan sebuah tombol cantik sudah tersedia di halaman web kamu.
Saya akan menjelaskan tentag kebaikan hati Dreamweaver. Tanpa bantuan “beliau”, seharusnya kamu membuat file flash dulu dengan menggunakan aplikasi Flash MX. Setelah itu baru kamu masukkan file tersebut ke dalam halaman HTML. Dengan bantuan Dreamweaver, satu pekerjaan melelahkan bisa kita lakukan dengan cara just one click. Untuk membuktikan kebaikan hati Dreamweaver, lihat di File Panels dan kamu akan menemukan file bernama. “B_Beranda.swf”.
Buat satu lagi tombol yang sama dan beri teks “Mauqufah”. Agar dua tombol berjajar vertikal beri jarak antara tombol pertama dengan tombol kedua dengan tag <br>. Jangan buru buru ke tampilan kode. Karena kamu bisa membuat tag <br> dengan menggunakan shortcut Shift+Enter. Caranya letakkan cursor persisi di sebelah kanan tombol pertama, kemudian tekan Shift+Enter.
Periksa kode HTML kamu, dan seharusnya seperti ini:
<table> <!– tabel menu dan isi halaman –>
<tr>
<td> <!– kolom menu –>
<br> <!– pemisah dua tombol –>
<!– mungkin punya kamu berbeda. Tetapi intinya di situ ada tambahan dua tag <object> dan dengan property sesuai yang kamu isikan pada jendela dialog. Tiap pasang <object> dan mewakili tombol flash yang kamu buat. –>
</td>
<td> <!– kolom isi yang masih kosong –>
</td>
</tr> <!– Akhir baris menu dan isi –>
disini <tr> spacer
<!– akhir tabel menu dan isi –>
Sebenarnya ada dua tag baru yang anda kenal yaitu <object> dan . Tag <object> digunakan untuk mendaftarkan object COM dan digunakan untuk memanggil object tersebut. Object COM adalah konsep yang rumit. Jadi sebaiknya kamu tidak tertarik untuk memahaminya.
Pendeknya dalam kasus di atas <object> dipakai untuk mendaftarkan aplikasi yang bisa memainkan file flash ke dalam komputer browser. Dan memanggil aplikasi tersebut untuk memainkan file yang kamu inginkan. Biar nggak penasaran ikuti langkah berikut:
- kopikan file apapun yang berekstensi avi, “namafile.avi”, ke folder latihan.
- tulis kode berikut di kolom sebelah kanan tabel menu dan isi.
- tekan F12 untuk melihat hasilnya. Seharusnya di halaman web kamu ada aplikasi pemutar file avi.yang siap dimainkan.
- Setelah yakin dengan hasil hapus lagi tag tersebut.
Lebih jauh dengan stylesheet
Kita akan mengisi kolom sebelah kanan dari tabel terakhir dengan objek teks dan objek lain yang sebagai isi utama dari halaman. Tetapi sebelumnya kita akan membuat beberapa predefined style, atau layout yang didefinisikan di depan, dengan maksud pekerjaan kita selanjutnya menjadi lebih mudah dan ringan. Tuliskan kode berikut diantara tag <style>:
<style>
……
……
p.dropcap:first-letter {
font-size: 300%;
float: left;
font-weight: bold;
padding-right:0.15em;
color:#003300;
font-family:”Times New Roman”, Times, serif;
}
.teks_a {
font-size:9pt;
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
}
.bsubjudul {
font-weight:bold;
font-size:12pt;
color:#A43413;
}
.barabhead {
direction:rtl;
color:#A43413;
text-align:justify;
font-size: 16pt;
font-weight:bold;
font-family: Arabic Transparent, Simplified Arabic;
}
.barabcont {
direction:rtl;
text-align:justify;
font-size: 14pt;
font-family: Arabic Transparent, Simplified Arabic;
}
.barabmar {
direction:rtl;
text-align:justify;
font-size: 13pt;
font-family: Arabic Transparent, Simplified Arabic;
}
.barabref {
direction:rtl;
text-align:justify;
font-size: 14pt;
font-family: Arabic Transparent, Simplified Arabic;
margin-left:4em;
margin-right:4em;
}
.bsail {
text-align:right;
font-style:italic;
font-weight:bold;
}
.article_heading {
font-size:14pt;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
padding-top:0.25em;
padding-bottom:0.5em;
color:#A43413;
margin-left:1.5em;
display: block;
clear:both;
}
.sub_heading {
font-size:10pt; color:#003366
}
.article_section_color_bar {
border-top: 2px solid #660099;
margin-left:2.5em;
margin-right:1em;
padding-top:0.5em;
padding-bottom:0.5em;
color:#003300;
font-size:9pt;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:justify;
}
ul.angka {
list-style-type:decimal;
font-weight:bold;
font-size:10pt;
}
ul.huruf_k, ul.huruf_b {
font-weight:normal;
font-size:9pt;
}
ul.huruf_k{
list-style-type:lower-alpha;
}
ul.huruf_b {
list-style-type:upper-alpha;
}
ul.huruf_b_1 {
list-style-type:upper-alpha;
font-weight:bold;
}
table.article td {
background-color:#F8F8F8;
}
table.article_top {
background-color:#933;
}
Di Seri II kamu telah berkenalan dengan aturan penulisan tag <style>. Sekarang akan menjelaskan aturan dan property lain berkaitan dengan kode di atas.
Pertama, kalau kamu menulis “ P { text-align:center} maka seluruh tag <p> yang ada di seluruh halaman akan memiliki layout rata tengah. Kalau kamu tulis
“ .dropcap {text-align:center}, maka semua tag yang memiliki property class “dropcap” saja yang dikenai layout rata tengah. Misalnya, kamu mempunyai 3 tag masing-masing adalah:
- <p class=”dropcap”></p>
- <div class=”dropcap”></div>
- <p></p>
maka hanya tag pertama dan kedua saja yang dikenai layout rata tengah.
Kalau kedua model style kamu gabungkan menjadi “P.dropcap {text-align:center}”, maka hanya tag <p> yang berclass dropcap saja yang dikenai layout rata tengah. Tag <p> yang tidak berkelas dropcap dan tag <div> meskipun berkelas dropcap, keduanya tidak akan dikenai layout rata tengah.
Dengan demikian seharusnya kamu sudah paham bahwa penulisan item style yang tidak diawali dengan titik (“.”) akan menunjuk langsung pada nama tag secara spesifik. Sedangkan item style yang diawali dengan titik (“.”) menunjuk pada nama kelas, dan bisa digunakan oleh tag apapun sepanjang tag tersebut memiliki property “style”. Dan item style yang tidak diawali nama tag, diikuti titik serta nama kelas, berarti item style tersebut hanya berlaku bagi tag spsifik yang memiliki kelas spesifik.
Ada satu lagi penulisan item style yang belum pernah kamu pelajari sebelumnya, yaitu “ table .article td “ : tag – titik – class – sub tag. Kamu masih ingat kan, bahwa tag <table> selalu diikuti minimal satu tag <tr> dan satu <td>. Andaikan kamu tulis hanya
“ table . article “ tanpa sub tag, maka seperti contoh “ p .dropcap “, layout akan dikenakan pada tag tabel yang memiliki class article. Ketika kemudian kamu menambahkan td setelah nama class maka layout akan dikenakan kepada semua tag <td> yang ada di dalam tag <table> yang memiliki class article.
Ini contoh penerapannya :
<table class=”article”>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
dalam contoh di atas layout dari class article akan dikenakan pada empat tag <td> yang ada di dalam tag <table>, dan bukan pada tag <table> itu sendiri.
Ini adalah cara lain untuk menerapkan layout yang sama pada suatu sub tag. Contoh di atas bisa kamu ganti dengan cara membuat class item style “ .article “, kemudian menerapkan class tersebut pada tiap-tiap <td> :
<table>
<tr>
<td class=”article”> </td>
<td class=”article”> </td>
</tr>
<tr>
<td class=”article”> </td>
<td class=”article”> </td>
</tr>
</table>
Dapat kamu bayangkan, kalau <td> yang ada di dalam <table> itu berjumlah 30, maka kamu harus mengulang penulisan “class=”article” sebanyak 30 kali. Tetapi dengan cara pertama kamu hanya cukup menuliskannya sekali.
Hanya itu bahasa yang saya punya untuk bisa memahamkan kamu. Sorry, kalau masih tetap tidak paham.
Kegunaan masing-masing style pada objek yang akan kita buat nanti adalah seperti tertera dalam tabel di bawah:
| Nama | Kegunaan |
| p.dropcap:first-letter | Digunakan untuk membuat efek dropcap pada huruf pertama paragraf pertama, seperti yang ada di MS Word |
| .teks_a | Digunakan sebagai default font pada seluruh objek teks |
| .bsubjudul | Layout untuk sub judul |
| .barabhead | Layout untuk sub judul dalam teks arab |
| .barabcont | Layout untuk paragraf sub judul dalam teks arab |
| .barabmar | Untuk paragraf yang memiliki footnote |
| .bsail | Untuk layout rata kanan, italic, bold |
| .article_heading | Untuk judul artikel |
| .sub_heading | Sub judul Artikel |
| .article_section_color_bar | awal dari paragraf artikel |
| ul.angka | list menggunakan angka |
| ul.huruf_k, ul.huruf_b | kamu masih ingat arti tanda koma dalam penulisn item style kan? Berarti layout ini dikenakan pada dua item, yaitu list angka dan list alphabet kecil |
| ul.huruf_k | list menggunakan alphabet kecil |
| ul.huruf_b | list menggunakan alphabet besar |
| ul.huruf_b_1 | list menggunakan alphabet besar bold |
| table.article td | layout tabular data bagian dalam |
| table.article_top | layout tabular data bagian luar atau bingkai |
Copy & Paste
Ini berita gembira buat kamu bahwa Dreamweaver bisa mengimport objek dari luar menggunakan Copy & Paste. Oleh karena itu dalam latihan ini kamu harus sudah memiliki file doc, yang kelak akan kita impor ke dalam halaman web kita.
Sekarang buka file doc kamu à highlight seluruh objek dengan menekan Ctrl+A à copy dengan menekan Ctrl+C. Beralih ke jendela Dreamweaver. Aktifkan tampilan desain à letakkan cursor di tempat yang akan menerima objek import à paste dengan menekan Ctrl+V. Kalau muncul jendela konfirmasi yang intinya memberitahukan bahwa objek yang kamu impor terlalu besar dan menanyakan apakah kamu tetap ingin melanjutkan, tekan aja tombol “yes”.
Alhamdulillah, sekarang semua objek yang berada di file doc sudah berhasil kamu masukkan dalam halaman web. Dan coba periksa kode HTML kamu. Semua objek dari file doc secara otomatis diterjemahkan dalam tag HTML yang sesuai. Misalnya ada cetak tebal di file doc, maka dreamweaver akan menerjemahkan dengan tag <strong>. Bahkan misalnya di file doc ada objek gambar, dreamweaver tidak hanya membuat tag <img>, tetapi juga membuat file gambar berformat gif dan diletakkan di folder Gambar.
Tunggu dulu. Tugas kamu belum selesai. Mungkin, bahkan hampir pasti, ada layout yang belum sesuai keinginan kamu. Bisa jadi yang bikin file doc kurang pengalaman, sehingga ketika diterjemahkan ke dalam format lain akan mengakibat layout yang acak-acakan. Atau bisa jadi, memang sejak semula layout yang kita inginkan di dalam halaman WEB tidak sama dengan layout yang ada di file doc.
Oleh karena itu kamu harus menata ulang seluruh objek dengan menggunakan stylesheet yang sudah kamu bikin dan dengan bekal pengetahuan HTML yang kamu miliki. Hanya ada dua langkah yang perlu kamu lakukan: membuang tag kosong atau tag yang tidak berguna sepeti <p> </>; dan menerapkan layout pada objek sesuai dengan yang kita inginkan. Cara menerapkan layout dalam tampilan desain adalah:
- highlihgt objek yang kamu inginkan
- klik-kanan pada objek yang dihighlight à pilih CSS Style à klik layout yang kamu inginkan
Kalau kesulitan menggunakan tampilan desain, kamu bisa melakukannya dalam tampilan kode dengan cara: tambahkan properti “class” pada tag yang kita inginkan. Contoh: anda memiliki tag <p> yang ingin dijadikan dropcap, maka tuliskan kode berikut:
<p class=”dropcap>S</p> <p>etiap bla bla bla </p>
dan hasilnya adalah tulisan “setiap bla bla bla” dengan huruf “s” berukuran 300%.
Jika seluruh penataan ulang sudah kamu tuntaskan, berarti kamu sudah berhasil membuat satu halaman WEB. Mudah, kan, membuat halaman WEB? Saya harap kamu menganggukkan kepala tanda sudah paham.
Save As
Kita akan membuat halaman kedua yang memiliki layout sama dengan halaman sebelumnya. Gambar layout halaman kita seperti ini:
File halaman kedua ini kita beri nama “mauqufah.htm”. Caranya:
- Dari Menubar pilih file à Save As.
- Di jendela dialog Save as tuliskan “mauqufah.htm” pada kolom “File name”
- Buang semua objek yang ada di bagian “isi halaman”, dan ganti dengan objek lain yang kamu inginkan.
Setelah ketiga langkah di atas kamu lakukan dengan sempurna, seharunya kamu sudah memiliki dua halaman WEB yang berbeda.
Mengedit Button Flash
Masih ingat Button Flash?. Salah satu tombol, yaitu yang bernama mauqufah belum memiliki property link. Kita akan mengisinya dengan “mauqufah.htm”. caranya : klik ganda pada button flash yang bernama mauqufah kemudian tuliskan “mauqufah.htm” pada kolom link à klik tombol OK.
***
Moh Najib Buchori 