Hi Radar Neptunus...
Dreamweaver
tentang
Tekhnik Pembuatan Website yang Menarik
Adobe Dreamweaver adalah aplikasi desain dan pengembangan web yang
menyediakan editor WYSIWYG visual (bahasa sehari-hari yang disebut sebagai
Design view) dan kode editor dengan fitur standar seperti syntax highlighting,
code completion, dan code collapsing serta fitur lebih canggih seperti
real-time syntax checking dan code introspection untuk menghasilkan petunjuk
kode untuk membantu pengguna dalam menulis kode. Tata letak tampilan Design memfasilitasi
desain cepat dan pembuatan kode seperti memungkinkan pengguna dengan cepat
membuat tata letak dan manipulasi elemen HTML. Dreamweaver memiliki fitur
browser yang terintegrasi untuk melihat halaman web yang dikembangkan di
jendela pratinjau program sendiri agar konten memungkinkan untuk terbuka di web
browser yang telah terinstall. Aplikasi ini menyediakan transfer dan fitur
sinkronisasi, kemampuan untuk mencari dan mengganti baris teks atau kode untuk
mencari kata atau kalimat biasa di seluruh situs, dan templating feature yang
memungkinkan untuk berbagi satu sumber kode atau memperbarui tata letak di
seluruh situs tanpa server side includes atau scripting. Behavior Panel juga
memungkinkan penggunaan JavaScript dasar tanpa pengetahuan coding, dan integrasi
dengan Adobe Spry Ajax framework menawarkan akses mudah ke konten yang dibuat
secara dinamis dan interface. Dreamweaver dapat menggunakan ekstensi dari pihak
ketiga untuk memperpanjang fungsionalitas inti dari aplikasi, yang setiap
pengembang web bisa menulis (sebagian besar dalam HTML dan JavaScript).
Dreamweaver didukung oleh komunitas besar pengembang ekstensi yang membuat
ekstensi yang tersedia (baik komersial maupun yang gratis) untuk pengembangan
web dari efek rollover sederhana sampai full-featured shopping cart. Dreamweaver,
seperti editor HTML lainnya, edit file secara lokal kemudian diupload ke web
server remote menggunakan FTP, SFTP, atau WebDAV. Dreamweaver CS4 sekarang
mendukung sistem kontrol versi Subversion (SVN).
Jika Anda orang yang baru mulai belajar membuat website, maka akan
ada banyak hal yang perlu dipelajari dalam cara pembuatan website. Secara umum,
banyak orang memulai langkah pembuatan website dengan membuat sketsa atau
rencana kasar. Sketsa kasar biasanya dibuat dengan berbagai macam cara,
misalnya coretan atau gambar di atas kertas. Sketsa tersebut kemudian dibuat
menjadi gambar grafis dengan menggunakan software Desain Grafis seperti Adobe
Photoshop. Langkah selanjutnya adalah membuat halaman HTML dengan menggunakan Adobe
Dreamweaver. Dengan demikian, Adobe Photoshop berperan sebagai software untuk
merancang, sedangkan Dreamweaver menjadi software yang dipergunakan untuk
menata halaman. Kenyataannya, pembuatan situs besar maupun kecil bisa dikelola
dengan menggunakan Adobe Dreamweaver.
Langkah
Persiapan
Dalam dunia internet, sebuah situs dikenal karena memiliki
identitas yang berbeda dari situs lainnya. Ibaratnya sebuah barang yang
diproduksi oleh pabrik, maka situs tersebut memiliki merek, citra produk (brand
image), warna serta desain yang menjadi ciri khasnya. Dengan demikian, kita
dapat mengenal Google, Yahoo!, WordPress, Facebook, dan sebagainya sebagai
sebuah identitas dari alamat situs yang mereka miliki. Langkah permulaan
membuat situs adalah dengan menentukan hal-hal yang berhubungan dengan
identitas situs dan di mana situs tersebut akan ditempatkan. Berikut ini adalah
beberapa langkah yang bisa kita lakukan untuk menyiapkan sebuah situs baru :
1.Buka Adobe Dreamweaver CS4. Jika Anda
belum terbiasa, maka cara memulai Adobe Dreamweaver adalah dengan memilih
tombol Start > All Programs > Adobe Master Collection CS4 > Adobe
Dreamweaver CS4.
2.Anda akan dihadapkan pada Menu Pembuka
Adobe Dreamweaver CS4. Untuk memulai situs baru, klik pada menu Create New >
Dreamweaver Site.
3.Kotak dialog Site Definition akan segera
terbuka. Pada form isian pertama kita bisa menuliskan nama website yang akan
kita buat dan pada form kedua kita bisa mengisikan alamat online secara lengkap
website yang akan kita buat. Tapi, berhubung kita belum menggunakan alamat
server secara online, maka alamat ini sementara tidak perlu diisi. Klik pada tombol Next.
4.Selanjutnya adalah pilihan untuk
menggunakan Server Technology (yakni ColdFusion, ASP.NET, ASP, JSP, dan PHP)
atau tidak menggunakan Server Technology (web statis). Server Technology akan
menyebabkan file-file ditulis dalam format sesuai dengan jenis server.
Berhubung pada tahap awal ini belum menggunakan Server Technology, maka kita
bisa lanjutkan ke tahap berikutnya. Pastikan pilihan masih pada No, I do not
want to use a server technology. Kemudian, klik pada tombol Next.
5. Tahap berikutnya adalah menentukan di
mana lokasi file-file kerja kita akan disimpan. Pada Kotak dialog ini, gantilah
form isian di bagian bawah dengan lokasi folder di mana file-file website akan
disimpan.Pastikan pilihan tetap aktif pada Edit local copies in my machine…
Cara lain untuk menentukan lokasi folder adalah dengan browse. Anda bisa klik
pada ikon folder dan menentukan lokasi folder tersebut di harddisk.Selesai
menentukan folder kerja, kita bisa melanjutkan ke proses berikutnya. Klik pada
tombol Next. Penting untuk menyimpan semua file website pada folder yang
didaftarkan pada proses ini. Semua file yang akan di-upload ke server online
akan berhubungan dengan alamat relatif, sehingga harus diletakkan pada satu
folder induk, yakni folder yang didaftarkan.
6. Tahap selanjutnya adalah menentukan
bagaimana dan di mana file-file tersebut akan diletakkan pada Remote Server.
Proses ini sangat penting mengingat setelah website terbentuk, maka file-file
yang telah dibuat dapat dikirimkan ke Online Server. Cara yang terbaik untuk
mengirimkan file-file tersebut adalah dengan menggunakan FTP (File Transfer
Protocol).Jika Anda sudah pernah melakukan upload file melalui FTP, maka
form-form isian ini tidaklah terlalu sulit untuk dijelaskan. Anda tinggal
mengisi form-form isian mengenai alamat Web Server (hostname), Folder hosting,
FTP Login, dan FTP Password. Tapi jika Anda belum pernah melakukannya dan belum
memiliki alamat Remote Server, sementara bisa Anda kosongkan.
7. Nah, berhubung tahapan ini membutuhkan
Remote Server, maka untuk sementara kita bisa lewati. Jangan khawatir karena
Adobe Dreamweaver mengijinkan proses ini dapat dilakukan kemudian. Pengaturan
Remote Server dapat kita isi di lain waktu setelah semua file siap untuk
di-upload.Untuk mengabaikannya, pilih None pada pilihan Remote Server.
Lanjutkan dengan klik tombol Next.
8. Untuk sementara, tahap persiapan
pembuatan situs baru telah selesai. Namun, apabila semua file telah lengkap dan
Anda telah memiliki Hosting pada sebuah ISP (Internet Service Provider), proses
ini dapat Anda lengkapi.
9.Klik Done untuk mengakhiri.
Perhatikan bahwa di sebelah kanan sekarang
telah tersedia folder baru sesuai dengan yang telah didefinisikan pada tahap
sebelumnya.
Membuat Halaman Website Baru
Setelah proses persiapan selesai, kita bisa
memulai tahapan awal membuat website. Perlu diketahui, bahwa halaman website
dapat dibuat dengan menggunakan berbagai macam format. Sebagai contoh, banyak
halaman web dibuat dengan format table HTML. Namun, format CSS lebih dianjurkan
mengingat format CSS memiliki banyak kelebihan dan fleksibilitas yang lebih
baik.
Pada contoh latihan pertama ini kita akan
menggunakan format HTML mengingat format HTML adalah dasar dari bahasa yang
dipergunakan di web. Sekarang kita bisa mulai membuat halaman baru. Langkah-langkahnya adalah
sebagai berikut :
1.Klik More pada pilihan di bawah kolom
Create New. (Alternatif lain adalah dengan klik pada menu File > New).
2. Kotak dialog selanjutnya memperlihatkan
jenis dokumen yang akan dibuat, tipe file, dan template layout yang sudah siap
pakai tergantung pada jenis dokumen yang akan dibuat. Kita dapat mencoba-coba
memilih beberapa di antaranya. Jendela preview di bagian paling kanan akan
memperlihatkan tampilan template yang sedang dipilih.
Pada kolom Layout terdapat banyak bentuk
kolom yang dapat dipilih. Pada dasarnya bentuk kolom pada website masa kini
menggunakan metoda CSS, sehingga Dreamweaver menyiapkan layout kolom
menggunakan CSS.
Terdapat empat bentuk layout kolom sebagai
berikut :
Fixed ; kolom yang tidak dapat diubah,
tergantung pada setting pada browser di komputer pengguna. Lebar kolom
menggunakan ukuran piksel.
Elastic ; kolom dapat beradaptasi pada
setting text di komputer pengguna, tetapi tidak berubah ketika browser
diperbesar atau diperkecil. Lebar kolom menggunakan ukuran ems (ukuran pada
typography tradisional).
Liquid ; kolom dapat berubah jika browser
diperbesar atau diperkecil, tetapi tidak berubah ketika pengguna mengubah
setting text.
Hybrid ; kombinasi dari berbagai tipe
kolom.Untuk latihan pertama, kita bisa klik HTML pada pilihan Page Type dan
klik pada None pada pilihan Layout. Klik pada Tombol Create untuk menyelesaikan proses
pembuatan Dokumen baru.
3.Sampai pada tahap ini pembuatan halaman baru
dengan format HTML biasa telah selesai. Anda dapat mencoba menuliskan sebuah
kalimat pada bagian workspace design. Cobalah mengetikkan kalimat berikut :
Selamat Datang di Website Kami.
Tulisan yang telah diketik akan muncul
dalam dua jendela, yakni jendela Design dan jendela Code. Artinya, kita dapat
melihat preview website di jendela Design, dan dapat melihat bagaimana kodenya
dituliskan pada jendela Code.
Menyimpan Halaman Web
Pada aplikasi lain, seringkali tempat di
mana sebuah file diletakkan tidaklah menjadi masalah. Namun tidak demikian dengan halaman-halaman
website. File-file yang kita ciptakan akan berhubungan dengan file lain dalam
struktur website yang sama. Oleh karena itu, sangatlah penting untuk meletakkan
file-file yang kita buat pada satu folder yang sama.
1.Klik pada menu File > Save.
2.Pada kotak dialog Save As, pastikan Anda
meletakkan pada folder yang telah dibuat pada proses sebelumnya. Jika tidak,
carilah folder yang telah dibuat sebelumnya!
3.Ketikkan pada kotak File name : index.html
File :
index.html adalah nama file standar dalam dunia internet yang menjadi acuan
sebuah website. File ini adalah file yang pertama kali dibuka ketika browser
diarahkan untuk membuka alamat website tertentu.
Biarkan kotak Save as type : terisi All
Document. Dan pada kotak Unicode Normalization Form : pilih None.
-Klik pada tombol Save.
-Sampai di sini tahapan awal pembuatan file
utama index.html telah berhasil dilakukan. Dengan demikian kita dapat
melanjutkan ke tahap selanjutnya, yakni membuat format text dengan HTML.
Menambahkan Judul dan Tagline
Nah, sekarang kita berlatih lagi untuk memperkaya penguasaan kita terhadap
kode-kode HTML. Tag HTML jumlahnya cukup banyak, kita akan mencoba beberapa di
antaranya untuk membentuk halaman HTML sederhana.
1. Bukalah Adobe Dreamweaver CS4.
2. Pada menu awal, buatlah file HTML baru. Klik pada tombol
HTML
di bawah kolom
Create New.
3. Desktop Dreamweaver akan segera terbuka. Klik tombol
Split
untuk bekerja dengan dua jendela sekaligus, Code dan Design.
4. Pada jendela Design, ketiklah tulisan untuk judul website dan
semboyannya, misalnya sebagai berikut :
KURSUS KOMPUTER PRIVAT Kursus Komputer Paling Bermutu di Kota Anda HOME | PROFIL | LAYANAN | KONTAK Selamat Datang di Website Kami
5. Sekarang kita ubah format tulisan judul menjadi
Heading
1. Tempatkan kursor pada tulisan judul di jendela Design. Klik
tombol
HTML pada panel Properties. Gantilah Format-nya
menjadi
Heading 1.
6. Selanjutnya kita akan mengubah style pada tulisan judul tersebut. Kursor
masih berada pada tulisan judul, klik tombol
CSS pada
panel Properties. Gantilah Font-nya menjadi
Arial, Helvetica,
sans-serif.
7. Pada kotak dialog New CSS Rule, gantilah
Selector Type
menjadi Tag.
Selector Name akan berganti menjadi h1.
Klik
OK untuk mengakhiri.
8. Kembali ke tampilan sebelumya. Pada panel Properties, klik pada tombol
Align Center.
9. Selanjutnya kita akan mengubah format tulisan tagline-nya. Tempatkan
kursor pada tulisan baris kedua.
10. Klik tombol
HTML pada panel Properties.
Kemudian, gantilah
Format-nya dengan
Heading
3. Tulisan tersebut akan berukuran lebih besar dan tebal..
11. Untuk membuat tulisan rata tengah, klik pada tombol
CSS
pada panel Properties. Kemudian klik pada tombol
Align Center.
12. Kotak dialog New CSS Rule segera terbuka. Gantilah
Selector Type menjadi
Tag.
Selector
Name akan berubah menjadi
h3. Klik
OK
untuk mengakhiri.
13. Sekarang kita akan menambahkan garis horizontal sebagai pembatas bagi
menu utama pada halaman ini. Tempatkan dan klik kursor pada posisi terakhir
tulisan baris kedua, kemudian klik pada tombol
Horizontal Rule
pada panel Insert.
14. Lakukan hal yang sama untuk menambahkan garis horizontal di bawah menu
utama. Tempatkan kursor pada posisi terakhir tulisan baris ketiga, kemudian
klik pada tombol
Horizontal Rule pada panel
Insert.
Nah, pada contoh di atas kita telah berlatih membuat format Judul dan
Tagline untuk digunakan sebagai judul halaman website. Pada latihan selanjutnya
kita akan membuat hyperlink dan tulisan berjalan (marquee)
Membuat Hyperlink dan Tulisan Berjalan
Hyperlink adalah bagian paling penting dari website. Hyperlink menghubungkan
satu halaman web dengan halaman lainnya. Sebuah website tentu tidak hanya
berupa halaman tunggal semata, melainkan bisa terdiri atas beberapa sampai
puluhan atau bahkan ratusan halaman. Masing-masing halaman pada website diberi
hyperlink agar pengunjung dapat dengan mudah menemukan apa yang dicari. Dengan
demikian, perencanaan struktur menu pada sebuah website menjadi hal yang sangat
penting.
Hal lain yang biasanya ada dalam sebuah website adalah tulisan berjalan.
Tulisan berjalan atau marquee dipergunakan untuk menyampaikan pesan khusus yang
diperlihatkan dengan teks bergerak. Gerakan yang ditimbulkan oleh marquee akan
menarik perhatian pengunjung website. Hal inilah yang menyebabkan marquee
banyak dipakai oleh pemilik website untuk menuliskan pesan-pesan khusus tadi.
Kita lanjutkan latihan terakhir untuk menambahkan hyperlink sederhana dan
tulisan berjalan pada halaman web yang sudah kita buat.
1. Pada jendela Design, sorotlah tulisan
HOME yang
akan kita jadikan hyperlink.
2. Pada panel Insert, klik tombol
Hyperlink.
Kotak Dialog Hyperlink akan segera muncul memperlihatkan form
Text
yang sudah berisi tulisan
HOME.
Form
Link dapat kita isi dengan nama file. Khusus untuk
hyperlink HOME bisa kita isi dengan file
index.html.
Cara lain adalah dengan klik pada ikon folder di sebelah kanan drop-down menu,
lanjutkan dengan memilih file index.html.
Form
Target untuk sementara bisa kita tinggalkan.
Klik
OK untuk mengakhiri.
3. Nah, sekarang tulisan
HOME sudah menjadi hyperlink
yang dapat berlaku sebagai tombol menju ke halaman
index.html.
Perhatikan bahwa tulisan
HOME sekarang menjadi
berwarna biru sebagai tanda bahwa tulisan tersebut telah aktif sebagai
hyperlink.
4. Selanjutnya, kita dapat melakukan hal sama dengan langkah yang lebih
sederhana untuk tulisan
LAYANAN,
GALLERY,
dan
KONTAK. Caranya adalah sebagai berikut :
Sorot tulisan
LAYANAN, kemudian pada panel
Properties isilah form
Link secara manual, ketikkan
layanan.html.
Tekan
ENTER.
File
layanan.html belum ada karena belum kita buat,
jangan khawatir karena kita akan membuat file ini nanti.
Lakukan hal yang sama untuk tulisan
GALLERY, dan
KONTAK.
Nah, sekarang keempat hyperlink pada baris menu telah selesai dibuat.
5. Selanjutnya kita akan membuat tulisan berjalan atau marquee. Sorotlah
baris terakhir tulisan pada halaman website kita
“Selamat Datang di
Website Kami”
6. Klik tombol
Tag Chooser pada panel
Insert. Kotak dialog Tag Chooser akan segera terbuka memperlihatkan semua Tag
yang dapat kita pilih.
Klik pada folder
HTML tags. Subfolder
pada HTML tags akan terbuka.
Klik pada subfolder
Page Elements. Kolom di
sebelah kanan sekarang akan terisi dengan tag-tag yang dapat dipilih.
Klik pada
marquee yang terdapat di kolom sebelah kanan. Klik
tombol
Insert untuk memasukkan tag marquee ke dalam halaman
kerja kita.
Klik tombol
Close untuk mengakhiri.
7. Tulisan
“Selamat Datang di Website Kami”
sekarang telah menjadi marquee. Untuk melihat hasilnya kita dapat mengaktifkan
tombol
Live View.
8. Sekarang kita bisa menyimpan file hasil kerja kita. Klik pada menu
File
> Save As.
Pada kotak dialog Save As, ketik atau pilihlah file
index.html. Klik pada tombol
Save.
Pada kotak dialog overwrite, klik tombol
Yes untuk
mengganti file index.html yang telah ada.
Lebih Jauh tentang Hyperlink
Ketika kita berkunjung ke sebuah alamat website yang menarik, biasanya yang
kita buka adalah halaman utamanya (bisa berupa file: index.html). Halaman utama
tersebut biasanya dipergunakan untuk menyimpan segala macam informasi mengenai
“isi” website. Namun, tentu saja tidak semua informasi disiapkan pada halaman
utama. Hal ini disebabkan halaman tersebut akan menjadi terlalu besar untuk
dibuka, terlalu panjang dan menjadi tidak menarik lagi. Sebagai gantinya,
informasi yang banyak tersebut disebar dalam bentuk halaman-halaman tersendiri.
Hyperlink dipergunakan untuk membuat struktur halaman web yang lebih rapi.
Pengunjung yang memerlukan informasi yang lebih rinci dapat mencari pada
halaman-halaman lain dengan berpedoman pada menu yang disediakan. Dengan
demikian, menu yang disiapkan dalam bentuk hyperlink tersebut harus
direncanakan dengan baik. Dengan menu yang terstruktur baik, maka pengunjung akan
mudah mengakses informasi yang disediakan.
Hyperlink selain dipergunakan untuk membuka halaman lain di dalam website
itu sendiri, juga bisa dikaitkan ke alamat-alamat lain yang berada di luar
website, atau bisa juga dipergunakan untuk menunjukkan alamat email tertentu.
Perbedaan ketiganya ada pada cara penulisan hyperlink.
Alamat Relatif dan Alamat Absolut
Ketika kita akan mengirimkan surat kepada seseorang yang berada pada ruangan
yang sama, maka kita bisa menuliskan alamat tersebut cukup dengan nama orangnya
saja. Pada sampul surat kita tuliskan nama si A, maka surat tersebut akan
sampai pada orang yang dituju.
Penyebutan alamat tersebut akan sedikit berbeda jika orang yang kita kirimi
surat berada di ruangan lain pada gedung yang sama. Contohnya : si A di lantai
3.
Demikian halnya jika kita menyusun website terdiri atas beberapa halaman,
misalnya : index.html, layanan.html, gallery.html, dan kontak.html. Untuk
menuju ke halaman yang berbeda dari alamat sekarang, kita menuliskan alamat
tersebut secara langsung, yakni index.html, layanan.html, gallery.html, atau
kontak.html. Hal inilah yang kita lakukan pada latihan sebelumnya.
Lain halnya jika website yang kita kelola cukup besar, maka dalam struktur
direktori file sangat mungkin dibuatkan folder-folder untuk menyimpan file-file
menurut kelompoknya masing-masing. Nah, untuk membuka file HTML yang berada di
folder lain, kita dapat menuliskan nama folder di depan nama file. Contohnya
“gallery/product.html”
untuk membuka file
product.html yang berada di
dalam folder
gallery. Atau
“../index.html”
untuk membuka file
index.html yang berada di
folder yang lebih tinggi.
Penyebutan nama file tanpa menyertakan alamat website dinamakan dengan
Alamat Relatif. Disebut alamat relatif karena alamat yang dituju tidak mencerminkan
alamat yang sebenarnya. Apabila kita menyebutkan alamatnya adalah index.html,
maka dapat kita bayangkan bahwa index.html tersebut akan ada pada puluhan juta
bahkan sampai milyaran website di seluruh dunia.
Sebaliknya, jika kita akan menulis surat kepada seseorang yang jauh.
Pastikan alamatnya ditulis secara lengkap dan benar. Contohnya : si A di Lantai
6 gedung X di jalan Salemba, Matraman – JAKARTA. Maka surat tersebut akan
sampai pada si alamat, sekalipun dikirim dari luar negeri.
Sama halnya jika informasi yang dimaksud berada pada sebuah file di alamat
website tertentu di luar website kita, maka kita harus menuliskan alamatnya
secara lengkap dan benar, misalnya:
http://www.kursusprivat.com/tutorial/index.html. (Perhatikan bahwa penulisan
alamat website ditulis dengan alamat berupa http://… Diikuti dengan alamat
website dan file serta folder di mana file tersebut berada).
Alamat file secara lengkap beserta dengan alamat websitenya dinamakan dengan
Alamat Absolut. Disebut absolut karena file yang dituju tersebut hanya akan ada
satu di dunia.
Kedua cara penulisan alamat tersebut di atas diperbolehkan dan akan sering
kita gunakan. Pastikan kita menuliskan alamatnya secara jelas dan benar.
Perhatikan kode HTML yang dipergunakan untuk membentuk link :
<a href=”index.html”>HOME</a>
Tag <a>…</a> (singkatan dari anchor) mengapit teks yang
dijadikan hyperlink, atribut href=”namafile” diletakkan di dalam tag <a>
untuk menentukan nama file atau alamat file yang dituju oleh hyperlink.
Link ke Alamat e-mail
Alamat email seringkali diperlukan bagi pemilik website untuk memudahkan
komunikasi dengan pengunjungnya. Dengan membuat sebuah link ke alamat email
tentu akan lebih mempermudah proses komunikasi ini. Pengunjung dapat
menghubungi pemilik website dengan hanya klik pada link yang disediakan.
Berikut ini adalah langkah-langkah pembuatan link ke alamat email :
1. Tuliskan teks ini di bagian paling bawah halaman index.html :
Alamat email : info@kursusprivat.com
2. Sorotlah tulisan
info@kursusprivat.com.
Kemudian klik tombol Email Link pada panel Insert. Kotak dialog Email Link akan
segera terbuka memperlihatkan dua form yakni form Text dan form Email. Secara
otomatis dua form tersebut telah diisi dengan alamat email yang telah dibuat
sebelumnya. Form Text adalah untuk menuliskan teks yang dapat dibaca oleh
pengunjung. Form Email adalah untuk menuliskan alamat email.
3. Klik
OK untuk mengakhiri.
Alamat email sekarang menjadi berwarna biru sebagai tanda bahwa teks ini
sekarang aktif sebagai link.
Email link jika diklik akan mengaktifkan email client, yakni software yang akan
langsung terbuka untuk menuliskan email ke alamat yang ditulis pada email link.
Contoh email client yang banyak dipergunakan adalah Microsoft Outlook.
4. Sampai di sini kita bisa menyimpan hasil pekerjaan.
Demikian pembahasan mengenai Hyperlink. Kita lanjutkan ke topik berikutnya.
■
Menambahkan Judul dan Tagline
Nah, sekarang kita berlatih lagi untuk memperkaya penguasaan kita terhadap
kode-kode HTML. Tag HTML jumlahnya cukup banyak, kita akan mencoba beberapa di
antaranya untuk membentuk halaman HTML sederhana.
1. Bukalah Adobe Dreamweaver CS4.
2. Pada menu awal, buatlah file HTML baru. Klik pada tombol
HTML
di bawah kolom
Create New.
3. Desktop Dreamweaver akan segera terbuka. Klik tombol
Split
untuk bekerja dengan dua jendela sekaligus, Code dan Design.
4. Pada jendela Design, ketiklah tulisan untuk judul website dan
semboyannya, misalnya sebagai berikut :
KURSUS KOMPUTER PRIVAT Kursus Komputer Paling Bermutu di Kota Anda HOME | PROFIL | LAYANAN | KONTAK Selamat Datang di Website Kami
5. Sekarang kita ubah format tulisan judul menjadi
Heading
1. Tempatkan kursor pada tulisan judul di jendela Design. Klik
tombol
HTML pada panel Properties. Gantilah Format-nya
menjadi
Heading 1.
6. Selanjutnya kita akan mengubah style pada tulisan judul tersebut. Kursor
masih berada pada tulisan judul, klik tombol
CSS pada
panel Properties. Gantilah Font-nya menjadi
Arial, Helvetica,
sans-serif.
7. Pada kotak dialog New CSS Rule, gantilah
Selector Type
menjadi Tag.
Selector Name akan berganti menjadi h1.
Klik
OK untuk mengakhiri.
8. Kembali ke tampilan sebelumya. Pada panel Properties, klik pada tombol
Align Center.
9. Selanjutnya kita akan mengubah format tulisan tagline-nya. Tempatkan
kursor pada tulisan baris kedua.
10. Klik tombol
HTML pada panel Properties.
Kemudian, gantilah
Format-nya dengan
Heading
3. Tulisan tersebut akan berukuran lebih besar dan tebal..
11. Untuk membuat tulisan rata tengah, klik pada tombol
CSS
pada panel Properties. Kemudian klik pada tombol
Align Center.
12. Kotak dialog New CSS Rule segera terbuka. Gantilah
Selector Type menjadi
Tag.
Selector
Name akan berubah menjadi
h3. Klik
OK
untuk mengakhiri.
13. Sekarang kita akan menambahkan garis horizontal sebagai pembatas bagi
menu utama pada halaman ini. Tempatkan dan klik kursor pada posisi terakhir
tulisan baris kedua, kemudian klik pada tombol
Horizontal Rule
pada panel Insert.
14. Lakukan hal yang sama untuk menambahkan garis horizontal di bawah menu
utama. Tempatkan kursor pada posisi terakhir tulisan baris ketiga, kemudian
klik pada tombol
Horizontal Rule pada panel
Insert.
Nah, pada contoh di atas kita telah berlatih membuat format Judul dan
Tagline untuk digunakan sebagai judul halaman website. Pada latihan selanjutnya
kita akan membuat hyperlink dan tulisan berjalan (marquee)
Membuat Hyperlink dan Tulisan Berjalan
Hyperlink adalah bagian paling penting dari website. Hyperlink menghubungkan
satu halaman web dengan halaman lainnya. Sebuah website tentu tidak hanya
berupa halaman tunggal semata, melainkan bisa terdiri atas beberapa sampai
puluhan atau bahkan ratusan halaman. Masing-masing halaman pada website diberi
hyperlink agar pengunjung dapat dengan mudah menemukan apa yang dicari. Dengan
demikian, perencanaan struktur menu pada sebuah website menjadi hal yang sangat
penting.
Hal lain yang biasanya ada dalam sebuah website adalah tulisan berjalan.
Tulisan berjalan atau marquee dipergunakan untuk menyampaikan pesan khusus yang
diperlihatkan dengan teks bergerak. Gerakan yang ditimbulkan oleh marquee akan
menarik perhatian pengunjung website. Hal inilah yang menyebabkan marquee
banyak dipakai oleh pemilik website untuk menuliskan pesan-pesan khusus tadi.
Kita lanjutkan latihan terakhir untuk menambahkan hyperlink sederhana dan
tulisan berjalan pada halaman web yang sudah kita buat.
1. Pada jendela Design, sorotlah tulisan
HOME yang
akan kita jadikan hyperlink.
2. Pada panel Insert, klik tombol
Hyperlink.
Kotak Dialog Hyperlink akan segera muncul memperlihatkan form
Text
yang sudah berisi tulisan
HOME.
Form
Link dapat kita isi dengan nama file. Khusus untuk
hyperlink HOME bisa kita isi dengan file
index.html.
Cara lain adalah dengan klik pada ikon folder di sebelah kanan drop-down menu,
lanjutkan dengan memilih file index.html.
Form
Target untuk sementara bisa kita tinggalkan.
Klik
OK untuk mengakhiri.
3. Nah, sekarang tulisan
HOME sudah menjadi hyperlink
yang dapat berlaku sebagai tombol menju ke halaman
index.html.
Perhatikan bahwa tulisan
HOME sekarang menjadi
berwarna biru sebagai tanda bahwa tulisan tersebut telah aktif sebagai
hyperlink.
4. Selanjutnya, kita dapat melakukan hal sama dengan langkah yang lebih
sederhana untuk tulisan
LAYANAN,
GALLERY,
dan
KONTAK. Caranya adalah sebagai berikut :
Sorot tulisan
LAYANAN, kemudian pada panel
Properties isilah form
Link secara manual, ketikkan
layanan.html.
Tekan
ENTER.
File
layanan.html belum ada karena belum kita buat,
jangan khawatir karena kita akan membuat file ini nanti.
Lakukan hal yang sama untuk tulisan
GALLERY, dan
KONTAK.
Nah, sekarang keempat hyperlink pada baris menu telah selesai dibuat.
5. Selanjutnya kita akan membuat tulisan berjalan atau marquee. Sorotlah
baris terakhir tulisan pada halaman website kita
“Selamat Datang di
Website Kami”
6. Klik tombol
Tag Chooser pada panel
Insert. Kotak dialog Tag Chooser akan segera terbuka memperlihatkan semua Tag
yang dapat kita pilih.
Klik pada folder
HTML tags. Subfolder
pada HTML tags akan terbuka.
Klik pada subfolder
Page Elements. Kolom di
sebelah kanan sekarang akan terisi dengan tag-tag yang dapat dipilih.
Klik pada
marquee yang terdapat di kolom sebelah kanan. Klik
tombol
Insert untuk memasukkan tag marquee ke dalam halaman
kerja kita.
Klik tombol
Close untuk mengakhiri.
7. Tulisan
“Selamat Datang di Website Kami”
sekarang telah menjadi marquee. Untuk melihat hasilnya kita dapat mengaktifkan
tombol
Live View.
8. Sekarang kita bisa menyimpan file hasil kerja kita. Klik pada menu
File
> Save As.
Pada kotak dialog Save As, ketik atau pilihlah file
index.html. Klik pada tombol
Save.
Pada kotak dialog overwrite, klik tombol
Yes untuk
mengganti file index.html yang telah ada.
Lebih Jauh tentang Hyperlink
Ketika kita berkunjung ke sebuah alamat website yang menarik, biasanya yang
kita buka adalah halaman utamanya (bisa berupa file: index.html). Halaman utama
tersebut biasanya dipergunakan untuk menyimpan segala macam informasi mengenai
“isi” website. Namun, tentu saja tidak semua informasi disiapkan pada halaman
utama. Hal ini disebabkan halaman tersebut akan menjadi terlalu besar untuk
dibuka, terlalu panjang dan menjadi tidak menarik lagi. Sebagai gantinya,
informasi yang banyak tersebut disebar dalam bentuk halaman-halaman tersendiri.
Hyperlink dipergunakan untuk membuat struktur halaman web yang lebih rapi.
Pengunjung yang memerlukan informasi yang lebih rinci dapat mencari pada
halaman-halaman lain dengan berpedoman pada menu yang disediakan. Dengan
demikian, menu yang disiapkan dalam bentuk hyperlink tersebut harus
direncanakan dengan baik. Dengan menu yang terstruktur baik, maka pengunjung
akan mudah mengakses informasi yang disediakan.
Hyperlink selain dipergunakan untuk membuka halaman lain di dalam website
itu sendiri, juga bisa dikaitkan ke alamat-alamat lain yang berada di luar
website, atau bisa juga dipergunakan untuk menunjukkan alamat email tertentu.
Perbedaan ketiganya ada pada cara penulisan hyperlink.
Alamat Relatif dan Alamat Absolut
Ketika kita akan mengirimkan surat kepada seseorang yang berada pada ruangan
yang sama, maka kita bisa menuliskan alamat tersebut cukup dengan nama orangnya
saja. Pada sampul surat kita tuliskan nama si A, maka surat tersebut akan
sampai pada orang yang dituju.
Penyebutan alamat tersebut akan sedikit berbeda jika orang yang kita kirimi
surat berada di ruangan lain pada gedung yang sama. Contohnya : si A di lantai
3.
Demikian halnya jika kita menyusun website terdiri atas beberapa halaman,
misalnya : index.html, layanan.html, gallery.html, dan kontak.html. Untuk
menuju ke halaman yang berbeda dari alamat sekarang, kita menuliskan alamat
tersebut secara langsung, yakni index.html, layanan.html, gallery.html, atau
kontak.html. Hal inilah yang kita lakukan pada latihan sebelumnya.
Lain halnya jika website yang kita kelola cukup besar, maka dalam struktur
direktori file sangat mungkin dibuatkan folder-folder untuk menyimpan file-file
menurut kelompoknya masing-masing. Nah, untuk membuka file HTML yang berada di
folder lain, kita dapat menuliskan nama folder di depan nama file. Contohnya
“gallery/product.html”
untuk membuka file
product.html yang berada di
dalam folder
gallery. Atau
“../index.html”
untuk membuka file
index.html yang berada di
folder yang lebih tinggi.
Penyebutan nama file tanpa menyertakan alamat website dinamakan dengan
Alamat Relatif. Disebut alamat relatif karena alamat yang dituju tidak
mencerminkan alamat yang sebenarnya. Apabila kita menyebutkan alamatnya adalah
index.html, maka dapat kita bayangkan bahwa index.html tersebut akan ada pada
puluhan juta bahkan sampai milyaran website di seluruh dunia.
Sebaliknya, jika kita akan menulis surat kepada seseorang yang jauh.
Pastikan alamatnya ditulis secara lengkap dan benar. Contohnya : si A di Lantai
6 gedung X di jalan Salemba, Matraman – JAKARTA. Maka surat tersebut akan
sampai pada si alamat, sekalipun dikirim dari luar negeri.
Sama halnya jika informasi yang dimaksud berada pada sebuah file di alamat
website tertentu di luar website kita, maka kita harus menuliskan alamatnya
secara lengkap dan benar, misalnya:
http://www.kursusprivat.com/tutorial/index.html. (Perhatikan bahwa penulisan
alamat website ditulis dengan alamat berupa http://… Diikuti dengan alamat
website dan file serta folder di mana file tersebut berada).
Alamat file secara lengkap beserta dengan alamat websitenya dinamakan dengan
Alamat Absolut. Disebut absolut karena file yang dituju tersebut hanya akan ada
satu di dunia.
Kedua cara penulisan alamat tersebut di atas diperbolehkan dan akan sering
kita gunakan. Pastikan kita menuliskan alamatnya secara jelas dan benar.
Perhatikan kode HTML yang dipergunakan untuk membentuk link :
<a href=”index.html”>HOME</a>
Tag <a>…</a> (singkatan dari anchor) mengapit teks yang
dijadikan hyperlink, atribut href=”namafile” diletakkan di dalam tag <a>
untuk menentukan nama file atau alamat file yang dituju oleh hyperlink.
Link ke Alamat e-mail
Alamat email seringkali diperlukan bagi pemilik website untuk memudahkan
komunikasi dengan pengunjungnya. Dengan membuat sebuah link ke alamat email
tentu akan lebih mempermudah proses komunikasi ini. Pengunjung dapat
menghubungi pemilik website dengan hanya klik pada link yang disediakan.
Berikut ini adalah langkah-langkah pembuatan link ke alamat email :
1. Tuliskan teks ini di bagian paling bawah halaman index.html :
Alamat email : info@kursusprivat.com
2. Sorotlah tulisan
info@kursusprivat.com.
Kemudian klik tombol Email Link pada panel Insert. Kotak dialog Email Link akan
segera terbuka memperlihatkan dua form yakni form Text dan form Email. Secara
otomatis dua form tersebut telah diisi dengan alamat email yang telah dibuat
sebelumnya. Form Text adalah untuk menuliskan teks yang dapat dibaca oleh pengunjung.
Form Email adalah untuk menuliskan alamat email.
3. Klik
OK untuk mengakhiri.
Alamat email sekarang menjadi berwarna biru sebagai tanda bahwa teks ini
sekarang aktif sebagai link.
Email link jika diklik akan mengaktifkan email client, yakni software yang akan
langsung terbuka untuk menuliskan email ke alamat yang ditulis pada email link.
Contoh email client yang banyak dipergunakan adalah Microsoft Outlook.
4. Sampai di sini kita bisa menyimpan hasil pekerjaan.
Demikian pembahasan mengenai Hyperlink. Kita lanjutkan ke topik berikutnya.
■
Menu Utama
Sistem menu yang terdapat dalam
Dreamweaver sangatlah sederhana dan mudah untuk dipahami karena perintah
yang terdapat pada hampirsebagian besar fungsi menu terdapat juga dalam panel.
Anda tidak akanmenghabiskan waktu dengan perintah yang terdapat pada menu
tetapiakan lebih banyak bekerja dengan
panel.Di dalam sistem menu Dreamweaver terdapat beberapa komponen
yangdapat digunakan, yakni :
·
Menu file dan Menu edit
Berisi item menu standar untuk menu
file dan menu Edit sepertiNew, Open, Save, Save all, Cut, Copy, Paste, Undo dan
Redo.Menu file terdiri dari beberapa macam perintah untukmenampilkan atau
membuat dokumen baru, seperti Preview inbrowser dan Print code. Menu edit
berisi perintah untukpemilihan, seperti Select parent tag dan Find dan
Replace.
·
Menu View
Berisi perintah untuk menampilkan beberapa macam tampilan
daridokumen anda (seperti tampilam design view dan tampilan code)dan untuk
menampilkan dan menyembunyikan beberapa elemenhalaman dan tombol Dreamweaver
dan toolbar.
·
Menu Insert
Berisikan alternatif baris Insert untuk
menyisipkan obyek dalam dokumen.
·
Menu Modify
Berfungsi untuk melakukan perubahan
properti item atau halamanterpilih. Dengan menggunakan menu ini anda dapat
mengeditatribut tag, mengganti tabel dan elemen tabel dan bermacambentuk aksi
untuk item librari dan template.
·
Menu Text
Berfungsi untuk mempermudah dalam melakukan format teks .
·
Menu Command
Berisi akses ke beberapa perintah,
format kode yang sesuai denganformat pilihan anda. Membuat photo album, dan
melakukanpengeditan gambar.
·
Menu Site
Berisi item menu untuk mengelola situs
dan melakukan upload dandownload file
·
Menu window
Menyediakan akses ke seluruh panel, inspector
dan jendela dalamDream weaver
·
Menu Help
Akses menuju bantuan berupa dokumentasi
yang telah disediakan.