DREAMWEAVER MX

oleh arismawan
dk_arismawan@yahoo.com
 Pengantar
Beberapa dekade terakhir perkembangan informasi melalui internet sangat
pesat. Internet bukan lagi menjadi sebuah barang baru di masyarakat kita, namun
sudah bergeser menjadi sebuah kebutuhan. Internet sepertihalnya sebuah
perpustakaan raksasa dengan website sebagai bukunya. Website tidak hanya dapat
dijadikan sebagai media informasi, namun dapat juga digunakan sebagai media
entertainment. Dari beberapa hal tersebut, kemampuan untuk dapat membangun
sebuah situs web dirasa sangat perlu.
Modul ini dibuat untuk membantu pembaca dalam memahami dan dapat
mengaplikasikan cara-cara pembuatan website menggunakan software macromedia
dreamweaver. Setiap bagian disusun langkah demi langkah mulai dari tingkat dasar
seperti penjelasan bagaimana sebuah situs bisa diaksies melalui internet, jenis situs,
pengenalan lingup kerja dreamweaver, bagaimana bekerja dengan dreamweaver dan
lain-lain sampai pada tingkat menengah yaitu bagaimana mendesain situs tingkat
lanjut, metode layouting, dan css dasar. Yang diajarkan dalam modul ini masih pada
pendesainan situs statis sampai pada tingkat menengah. Untuk pendesainan situs
dinamis dengan dreamweaver tentu saja diperlukan beberapa pengetahuan tentang
server side scripting, sehingga akan diajarkan pada sub pembelajaran yang lain.
Materi-materi pembelajaran dalam modul ini beberapa diantaranya diambil
dari pengalaman penulis dalam pendesainan situs menggunakan dreamweaver dan
beberapa software penunjang lainnya, seperti adobe photoshop.

Semoga berguna.

Malang, 27 Desember 2005

Penulis,

DK. Arismawan
dk_arismawan@yahoo.com

3
Pendahuluan
Bagaimana Halaman web bekerja?
Halaman web dapat diakses melalui internet apabila halaman tersebut sudah ditaruh
pada server web yang terhubung internet. Server yang terhubung dengan internet
tersebut dinamakan sebagai “web hosting” . Ada banyak penyedia jasa hosting di
internet. Untuk dapat membuka halaman yang telah kita taruh pada web hosting
tertentu, maka kita memerlukan alamat khusus. Alamat ini kita sebut dengan nama
domain. Sebagai contoh misalnya, ketika kita mengetik http://www.google.com maka
secara otomatis kita bisa melihat halaman google pada browser kita. www.google.com
inilah yang kita sebut dengan alamat domain.
Langkah-langkah berikut diharapkan bisa memberikan gambaran lebih jelas:
− Pertama tama saya membuat halaman web. Dalam hal ini saya membuat 3
buah halaman berbeda
− Kemudian halaman web tersebut saya taruh (hosting) di server web tertentu.
Ada banyak perusahaan penyedia hosting di internet, bahkan sebagian ada
yang gratis seperti geocities.com, pandela.com, dll yang tentu saja mempunyai
service yang berbeda-beda. Proses pengiriman dari komputer saya menuju ke
komputer server biasa disebut dengan istilah upload. Untuk tutorial kali ini saya
upload di server web mesin brawijaya pada folder latihan dengan nama file
hal1.html, hal2.html, dan hal3.html.
− Setelah semuanya terkirim, berarti 3 halaman tersebut sudah bisa dilihat lewat
internet,...asal tahu alamatnya!. Web teknik mesin brawijaya mempunyai
alamat domain http://mesin.brawijaya.ac.id , sehingga karena 3 halaman yang
kita buat tadi berada pada folder “latihan”, maka untuk bisa melihat halaman 1
kita bisa mengetik http://mesin.brawijaya.ac.id/latihan/hal1.html , berikut
penjelasananya:

Informasi: jika anda hanya menulis http://mesin.brawijaya.ac.id saja, maka hal itu
berarti halaman yang dibaca adalah file yang mempunyai nama “index.html” atau
mungkin index.php, tergantung setting dari server web itu. Biasanya yang dibaca
adalah index.html.

Jenis web berdasarkan teknologinya

Web statik
Adalah jenis website yang mana pengguna tidak bisa mengubah content dari web
tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara
pengguna dan server hanyalah seputar pemrosesan link saja.
Jenis web ini menggunakan client side script, yaitu script-script yang dapat dimengerti
oleh komputer klien saja (dalam hal ini browser) seperti html, javascript, dhtml, css,
dan lain-lain.

4
Web Dinamis
Dalam web dinamis, interaksi yang terjadi antara pengguna dan server sangat
kompleks. Seseorang bisa mengubah content dari halaman tertentu dengan
menggunakan browser. Request yang dikirimkan oleh pengguna dapat diproser oleh
server untuk kemudian ditampilkan dalam isi yang berbeda-beda menurut alur
programnya.
Jenis web ini menggunakan server side script, yaitu bahasa pemrograman yang dapat
diproses oleh server untuk kemudian ditampilkan di browser pengguna dengan client
side script.
Contoh dari web dinamis misalnya adalah forum-forum yang ada di internet. Disitu kita
bisa mengisi content dari web tersebut, mengubah data diri, dan mengirimkan pesan.

Dasar HTML (tinjauan secara umum)

HTML (HyperText Markup Language) merupakan bahasa dasar yang digunakan untuk
bisa menampilkan sebuah situs web pada komputer klien (Client side script). Hal
tersebut berarti untuk bisa menampilkan halaman web seesuai yang kita inginkan di
browser maka kita harus menulisnya dalam bahasa html.
Untuk memahaminya silahkan perhatikan contoh dibawah:
<html>
<head>
<title>Tutorial dreamweaver</title>
</head>

<body>
<strong>Tinjauan <em>html</em></strong><font color="#CC0000">
dasar secara <font size="7"><strong>umum</strong></font>
sekali </font>
</body>
</html>
Dari contoh sederhana di atas dapat dilihat susunan bahasa html pada umumnya. Kita
sebut setiap sintak yang berada dalam tanda “<” dan “>” sebagai elemen. Setiap
elemen selalu ditutup dengan tag “</......>”. perhatikan elemen <body> di atas
misalnya. Elemen tersebut diawali dengan tanda “<body>”, kemudian ditutup dengan
“</body>”. Tag-tag yang ada dalam elemen tersebut berarti menjadi bagian dari
elemen body.
Mari kita bongkar contoh lainnya. Perhatikan elemen yang berada pada elemen body
di atas.
<strong>Tinjauan <em>html</em></strong><font color="#CC0000">
dasar secara <font size="7"><strong>umum</strong></font> sekali
</font>
Kemudian bandingkan hasilnya jika dilihat di browser

5
 Gambar 2. <Title> ditampilkan pada title bar internet explorer

Perhatikan pada kata “tinjauan html” terlihat bahwa dua suku kata tersebut mempunyai
property bold, sehingga dalam bahasa html kedua suku kata tersebut masuk ke dalam
element <strong> yang berfungsi untuk merubah property text menjadi bold.
Sedangkan suku kata “html” mempunyai property miring, sehingga suku kata tersebut
kita masukkan dalam element <em> yang berfungsi merubahnya menjadi text miring.
<strong>Tinjauan <em>html</em></strong>
Sekarang coba pelajari bahasa di bawah ini dengan membandingkannya dengan
tampilan pada gambar 2.
<font color="#CC0000"> dasar secara <font
size="7"><strong>umum</strong></font> sekali </font>

Ada dua elemen dasar dalam sebuah dokumen html (perhatikan script yang tercetak
tebal diatas), yaitu elemen head dan elemen body.
Elemen <head> berisi informasi-informasi mengenai dokumen html anda. Elemen ini
seperti halnya kepala surat dalam surat-surat resmi. Didalamnya anda dapat
menemukan informasi seperti nama pemilik, judul, deskripsi tentang isi dokumen, Judul
dokumen, dan lain-lain.
Perhatikan dalam contoh di atas, dalam elemen head, yaitu antara <head> sampai
</head> terdapat elemen <title>. Elemen title berfungsi untuk memberikan judul
pada dokumen anda. elemen ini akan terlihat pada jendela browser bagian atas
(bagian yang dilingkari warna merah pada gambar 2).
Sedangkan elemen <body> merupakan penampung dari elemen-elemen yang
langsung ditampilkan dalam halaman web. Silahkan lihat kembali dalam contoh diatas,
mengapa kata “tinjauan html dasar secara umum sekali” berada pada element body?...
Baiklah, kita sudah mempunyai bekal yang cukup untuk bisa membuat website dengan
dreamweaver, sebab anda tidak perlu menghafalkan semua element-elemen atau tag
html. Yang penting adalah kita tahu susunan umum html dan cara kerjanya, untuk
selanjutnya kita serahkan dreamweaver untuk membantu kita.

6
 Berkenalan dengan Dreamweaver
Dreamweaver merupakan salah satu software pembuat website yang mempunyai
banyak sekali kemudahan dalam pengoperasiannya namun juga sangat powerful
dalam pembuatan website. Salah satu keunggulannya adalah kemudahannya dalam
berinteraksi dengan macromedia flash, sebuah tool animasi yang sangat populer di
internet.
Memulai dreamweaver
Pertama kali dreamweaver dibuka, setelah anda instal sebelumnya, maka akan
tertampil jendela yang menanyakan kepada kita untuk memilih jenis layout yang
diinginkan.

Gambar 3. Jendela dialog ketika pertama kali dreamweaver di-start

Ada dua pilihan model layout kerja, yaitu model dreamweaver mx, atau model
dreamweaver 4. Pada model dreamweaver 4, setiap jendela kerja berdiri sendiri-
sendiri. Dalam tutorial ini kita menggunakan layout kerja standart dreamweaver mx
karena model layout kerja ini dirasa paling optimal. Checkbox homesite/codebuilder
merupakan pilihan untuk mengoptimalkan kerja kita apabila kita lebih banyak bekerja di
script. Sangat cocok untuk tingkat lanjut.
Klik OK
Jendela tersebut hanya muncul pada saat pertama kali program dreamweaver
dijalankan. Apabila kita menginginkan layout kerja yang berbeda setelah beberapa kali
menjalankan dreamweaver, maka kita bisa memunculkan lagi jendela tersebut dengan
mengklik:
edit > preferences atau menggunakan shortcut ctrl+U
jendela preferences akan tertampil:

7
 Gambar 4. Tombol untuk menampilkan kembali jendela model layout kerja
dreamweaver

Kemudian klik tombol Change Workspace

Fungsi dari preferences ini adalah untuk mengatur semua hal mengenai dreamweaver.
Mungkin kita akan memerlukannya nanti ketika dihadapkan pada sebuah masalah
pendesainan situs tertentu, namun untuk kali ini kita biarkan pada kondisi default saja.
Hal tersebut sudah mencukupi untuk pengerjaan website secara umum.
Setelah itu akan muncul layout kerja dreamweaver. perhatikan gambar 4

8
Pengenalan interface dreamweaver
Gambar di bawah merupakan gambaran layout kerja dreamweaver mx. Jendela-
jendela pembantu yang terdapat pada menu window dikelompokkan pada panel
bagian kanan. Seluruh panel bisa disembunyikan dengan mengklik tombol yang
ditunjukkan oleh tanda panah.

Document toolbar

Insert bar

menus

panels

Property inspector

Design & code view

Gambar 5. Bagian-bagian utama tempat kerja dreamweaver

Design view bekerja layaknya kanvas bagi pelukis. Bagian ini merupakan tempat kita
bekerja dalam membentuk sebuah halaman situs. Disini, dengan menggunakan
document toolbar kita bisa menampilkan code saja, desain saja atau kedua-duanya.

9
 Gambar 6. Document toolbar. Bisa digunakan untuk mengatur tampilan kerja. Dalam
tampilan script saja, tampilan script dan desain, ataukan hanya desain saja.

Insert bar membantu kita untuk memasukkan berbagai berbagai elemen-elemen

pembentuk halaman web, seperti gambar, script php, simbol-simbol, shockwave, dan
lain-lain. Elemen-elemen tersebut direpresentasikan dalam bentuk icon.
Document toolbar memberikan kita kemudahan untuk melakukan perintah-perintah
yang memberikan efek pada seluruh dokumen, seperti halnya judul dokumen.
Property inspector menampilkan berbagai property yang dipunyai elemen tertentu. Kita
bisa langsung mengubah properti dari elemen tersebut dengan tool ini, misalnya
merubah warna text, memberikan background pada elemen tabel, menggabungkan
kolom, dan lain-lain.
Anda bisa membuka atau membuat lebih dari satu dokumen. Dokumen-dokumen yang
sudah anda buka akan diurutkan pada bagian bawah design view. Anda tinggal
mengklik tombol tersebut untuk berpindah antar halaman. Ditunjukkan oleh tanda
panah warna biru pada gambar 5.
Setiap dokumen yang anda buka masing-masing dapat anda minimize, maximize atau
anda tutup. Dapat anda lihat pada keterangan di gambar 5.

10
 Me-minimize, me-restore, dan
menutup salah satu dokumen Me-minimize, me-restore, dan
menutup dreamweaver

Gambar 7. Masing-masing halaman baru dreamweaver dipisah ke dalam tab-tab

tertentu. Masing-masing tab bisa ditutup, dikecilkan, atau disembunyikan tampilannya.
Sambil jalan, secara otomatis kita akan mengetahui fungsi dari toolbar-toolbar yang
tidak dijelaskan dalam subbab ini.
Setelah anda mulai terbiasa dengan layout kerja dreamweaver, kita lanjutkan dengan
bagaimana memulai kerja dengan dreamweaver.

11
 Memulai mendesain web dengan
dreamweaver
Pengantar web design
Diperlukan sebuah perencanaan yang matang dalam pembuatan sebuah situs web
karena sebuah website tidak hanya terdiri dari satu file teks saja. Disitu terdapat
beberapa halaman yang saling berhubungan (hyperlink), file-file gambar, file css,
javascript, belum lagi file multimedia seperti flash dan video yang kesemuanya harus
diupload ke server hosting dengan tempat yang jelas. Dengan semakin kompleksnya
komponen penyusun web, maka struktur pemilahan file-file pun juga harus jelas.
Misalnya, untuk semua gambar-gambar yang tertampil di website saya buatkan folder
sendiri dengan nama “images”, untuk file jenis pdf saya taruh di folder “pdf”, atau
mungkin halaman-halaman tentang profil perusahaan saya sendirikan dalam folder
“profil”. Hal tersebut akan membantu kita ketika memaintenance sebuah situs.
Dalam merencanakan sebuah situs, ada beberapa hal yang patut menjadi perhatian,
yaitu:
− Tentukan apa yang ingin kita sampaikan dalam website yang kita buat. Hal ini
akan berkaitan nantinya bagaimana kita membuat jenis informasi tersebut
gampang dicerna oleh audience.
− Untuk siapa website ini nantinya? Ketika saya ingin membuat website untuk
sebuah situs anak-anak, maka saya akan membuat tampilan situs saya dengan
warna2 cerah dan sedikit cartoon karena memang begitulah dunia anak-anak
pada umumnya, sebaliknya, apabila saya ingin membuat situs instansi
misalnya, maka yang ada dalam bayangan saya adalah desain yang resmi, dan
navigasi yang mudah dipahami, karena memang target audiencenya adalah
bagi orang umum.
− Resource yang meliputi ketersediaan data, waktu, tenaga, dan dana perlu juga
dijadikan pertimbangan dalam menentukan desain sepoerti apa yang bakal kita
buat nantinya. Saya rasa tidak perlu ada penjelasan untuk ini.
− Dan NAVIGASI. Navigasi tentu saja sangat penting karena merupakan kemudi
untk bisa menjelajah sebuah situs. Buatlah navigasi sejelas-jelasnya dan
semudah-mudahnya bagi target audience anda. Untuk mempermudah,
gambarkan secara diagram peta situs anda.
Dalam beberapa literatur yang saya dapat, ada beberapa pilihan navigasi yang umum.
Mungkin hal ini bisa memberikan anda gambaran seperti apa model navigasi yang
akan anda buat nantinya.
1. model linear

Gambar 7. Pada model linear kita bisa mengatur urutan halaman yang dibuka
pengguna.

12
 Medel ini biasanya dipakai untuk situs-situs training online atau buku
multimedia. Dengan model seperti ini kita dapat mengontrol langkah-langkah
yang harus dilalui audience
2. model Hirarki

Gambar 8
Desain ini dapat mempermudah audience menemukan informasi yang dia cari.
3. model terpusat

13
 Dengan model seperti ini maka akan mempercepat navigasi menuju ke topik
yang diinginkan dengan 2 klik, namun kekurangannya adalah untk berpindah
harus menuju ke halaman depan dahulu

4. Model FULL-WEB-DESIGN
Merupakan gabungan dari ketiga model di atas. Dengan penggabunagn
tersebut maka diharapkan akan meningkatkan efisiensi dari navigasi web.
Setiap halaman mempunyai navigasi ke halaman lainnya yang dirasa paling
perlu untuk dikoneksikan. Sebagai contoh website http://oke.or.id ,
http://macromedia.com dan lain-lain.

Macromedia dreamweaver mempermudah berbagai tahap di atas. Agar kita tidak

dipusingkan dengan kemungkinan terpencarnya file-file yang sudah kita buat
sebagaimana yang dijelaskan pada paragraf pertama subbab sebelumnya, maka kita
perlu mendefinisikan situs yang akan kita buat. Pendefinisian ini berguna untuk
menempatkan website kita yang mungkin kompleks ke tempat khusus tertentu
sehingga nantinya akan mempermudah dalam peng-upload-an ke server hosting.

14
Mendefinisikan situs
OK, sekarang anda telah mempunyai peta situs dengan segala persiapannya. Hal
selanjutnya adalah menentukan ditampung dimana pekerjaan pembuatan website ini,
dan mau dikirim ke server mana pekerjaan itu nanti sekaligus menentukan parameter
dasar lainnya. Hal tersebut yang dimaksud dengan “mendefinisikan situs”. Hal ini
sangat penting ketika kita memulai sebuah proyek.
Sebelumnya kita harus tahu dulu jenis situs yang akan kita buat nantinya itu seperti
apa. Situs statiskah? Atau situs dinamis?. Masing-masing jenis tersebut mempunyai
jalan yang berbeda dalam pendefinisiannya. Karena tutorial ini khusus membahas
tentang website statis sampai tingkat lanjut, maka disini kita akan mempelajari
pendefinisian situs statis saja.
Silahkan ikuti langkah-langkah berikut:
1. Klik menu site > New Site. Kemudian akan muncul jendela dialog site definition

Gambar 10. Langkah awal pendefinisian sebuah situs

Pastikan tab basic terpilih (perhatikan panah merah). Kemudian isi textbox
tersebut dengan nama situs yang anda inginkan. Nama situs anda boleh
menggunakan spasi. Buat sesimpel mungkin namun sejelas mungkin.
Kemudian klik tombol next

15
 2. Kemudian anda akan dihadapkan pada jendela dialog yang menanyakan
apakah anda ingin menggunakan server technology atau tidak. Kita akan
mmbangun situs statis, sehingga pastikan option button “No, i dont want to use
server technology” terpilih sebagaimana gambar di bawah. Klik tombol next

Gambar 11. Pilihlah opsi pertama jika anda tidak menggunakan teknologi server

3. Pada jendela berikutnya anda akan ditanya mengaenai bagaimana nantinya

anda bekerja dengan file-file anda ketika sedang membuat website.
Pilihan pertama adalah “Edit Local Copies on My Computer Then Upload to
Server When Ready”, pilihan kedua adalah “Edit Directly on Server Using Local
Network”, dan pilihan yang terakhir adalah “Edit Directly on Server Using FTP
or RDS”.
− Jika anda memilih pilihan pertama, berarti situs anda nantinya akan
dibuat pada tempat tertentu pada harddisk anda, kemudian jika dirasa
sudah memenuhi syarat baru kita bisa menguploadnya ke server web.
tentukan tempat pada harddisk anda dengan mengisi textbox yang
disediakan
− Pilihan kedua berarti anda nantinya akan langsung menempatkan
pekerjaan anda pada server yang terhubung dalam sebuah jaringan,
Isikan direktory pada server anda pada textbox yang disediakan.
− Pilihan terakhir berarti anda akan langsung bekerja pada server melalui
koneksi FTP, tentukan folder pada harddisk anda sebagai tempat untuk
salinan situs anda. Checkbox dibawahnya merupakan pilihan apakah
nantinya ketika kita save akan langsung dikirim ke server atau tidak.
Disini kita memilih pilihan pertama karena model ini yang paling
direkomendasikan.
Klik next

4. Jendela berikutnya yang muncul adalah dialog sharing file. Disiini anda
menentukan bagaimana anda terkoneksi dengan server anda. Anda bisa
melihat masing-masing penjelasan di bagian help dreamweaver. Silahan
mengisi textbox-textbox yang muncul berdasarkan pilihan anda. Apabila anda
tidak yakin pilih none saja sebagaimana dalam tutorial ini. Jangan khawatir
karena kita bisa mengisinya lagi nanti.
NB : jendela dialog ini tidak akan muncul apabila sebelumnya anda memilih
“edit directly on server using local network”
Klik next

5. Jendela yang muncul berikutnya adalah ringkasan dari settingan yang kita buat
sebelumnya. Check satu-satu. Apabila perlu perbaikan anda bisa kembali
dengan tombol back.
Silahkan klik done jika sudah selesai

Sekarang pendefinisian situs, untuk sementara selesai. Perhatikan pada panel file di
bagian site panel bagian kanan. Sekarang anda sudah dibuatkan tempat untuk

16
menampung semua situs anda menurut settingan yang anda isi pada kotak dialok
pendefinisian situs. Perhatikan tanda panah merah di bawah. Nantinya semua file yang
anda buat akan terlihat di panel tersebut. Contoh situs yang sudah terisi dapat anda
lihat pada gambar bagian kanan.

Gambar 12. Lihatlah perbedaan antara situs yang sudah diisi dengan dokumen dan
situs yang belum diisi dengan dokumen

Mungkin dalam situs yang kita buat nantinya kita perlu mengelompokan file-file ke
dalam folder-folder tertentu maka ada baiknya kita membuat folder itu terlebih dahulu
dengan mengklik file > New folder (lihat lingkaran biru pada gambar kanan) kemudian
isikan nama folder.
Selanjutnya setelah kita mendefinisikan proyek situs web kita, kita akan belajar
bagaimana memulai kerja dengan dreamweaver, termasuk di dalamnya adalah
membuat file baru, dan melihatnya melalui browser.

17
Membuat dokumen, menyimpan, dan menampilkannya pada
browser
Pada umumnya untuk memulai dokumen baru di sistem operasi windows sama saja.
kita tinggal mencari kata new. Benar,.. tekan file > new maka sebuah jendela dialog
akan muncul:

Gambar 13. Disini kita menentukan jenis halaman apa yang akan kita buat.

Disitu banyak sekali terdapat pilihan halaman yang akan kita buat nantinya. Kita pilih
Basic page | HTML kemudian klik tombol create.
Nah sekarang anda bebas mau mendesain apa. Isikan sembarang kata pada design
view, kemudian isi title pada Document toolbar dengan sembarang judul disini saya isi
dengan “tutorial dreamweaver”

18
 Gambar 14. kita coba membuat halaman baru sembarang

Kemudian simpan pekerjaan anda file > save atau ctrl + S. Kemudian akan muncul
kotak dialog save as. Perhatikan bahwa secara otomatos dreamweaver akan memilih
direktori yang kita definisikan sebelumnya. Klik save

Gambar 15. Kita coba save Halaman Baru tersebut dengan nama index.html
Perhatikan juga bahwa seketika itu juga pada panel file akan terlihat tambahan file
baru

19
Gambar 16. Secara otomatis halaman baru akan tertampil dalam panel file.
Sekarang anda juga bisa melihat hasil pekerjaan anda langsung pada browser dengan
mengklik icon preview in browser pada document toolbar atau dengan mengklik
tombol F12

Gambar 17. Pilihan utnuk melihat sementara hasil pekerjaan kita di browser.

Nah, hasil kerjaan anda sekarang tertampil di browser internet explorer. Setelah ini
yang kita lakukan adalah menguploadnya ke server web. Akan saya jelaskan pada bab
akhir nanti tentang bagaimana mengupload proyek kita yang sudah jadi ke server web.

rangkuman
Sebelum masuk ke bab berikutnya, dapat dirangkum bahwa untuk mendesain situs
dengan efisien kita bisa meggunakan urutan langkah-langkah sebagai berikut:
1. menetapkan kerangka kerja termasuk didalamnya menentukan jenis desain,
menentukan target audience, menentukan model navigasi situs, dan tak kalah
pentingnya adalah membuat diagram peta situs.
2. mendefinisikan situs sehingga file-file proyek kita akan lebih terkoordinir dan
mudah dalam peng-upload-annya nanti.
3. mulai bekerja membuat situs, termasuk didalamnya membuat folder-folder
untuk menampung gambar atau file-file lain sehingga lebih terstruktur,
membuat dokumen, menyimpan dokumen, melihatnya pada browser,
membuat tampilan menarik, membuat hubungan antar halaman (hyperlink), dll.
Bab berikutnya akan membahas tentang masalah ini.
4. setelah situs selesai, kita tinggal menguploadnya ke server web dengan tool-
tool yang disediakan oleh dreamweaver. Ini akan dibahas pada bab sendiri.

20
 Membuat Website (Bagian I)
Sebelum masuk lebih detail ke masing-masing elemen, ada baiknya dulu kita
mereview ulang tentang struktur HTML situs. Kita sudah tahu bahwa ada dua bagian
besar dalam html, yaitu alemen <head> dan elemen <body>.

Elemen <head>
Elemen <head> didalamnya memuat berbagai informasi mengenai situs dan juga bisa
dijadikan informasi bagi browser bagaimana sebuah dokumen ditampilkan nantinya,
misalkan apakah menggunakan kharakter / huruf cina atau yang lain.
Salah satu tag dalam elemen <head> yang penting adalah <meta> yang berfungsi
untuk menampilkan informasi dari sebuah halaman. Tag ini penting sebagai pemberi
informasi bagi search engine untuk mengkatalog-kan situs. Dalam dreamweaver kita
tidak perlu mengetik kode ini secara manual. Kita bisa membuatnya dengan object
<head>.

Gambar 18. Tool yang digunakan untuk memodifikasi element head dalam file html

Masing-masing obyek dapat dijelaskan sebagai berikut:

Meta.
Berfungsi untuk mengisikan berbagai meta tag yang kita inginkan. Ini merupakan tool
untuk membantu kita memasukkan meta tag. Ada banyak informasi melalui <meta>
selain yang sudah diediakan dreamweaver seperti keyword, description, refresh, base,
dan link, sehingga untuk mengisikan tag selain yang saya sebutkan di atas kita bisa
menggunakan tool meta tersebut. Lihat contoh di bawah:

21
 Gambar 19. Jendela yang digunakan untuk mengubah-ubah tag meta.
Perhatikan bahwa “creator” tidak disediakan dreamweaver. Dengan object meta kita
bisa membuat informasi tersebut. Pembahasan mengenai meta tag banyak tersedia di
internet.
Keyword
Berfungsi untuk memberikan informasi kepada search engine mengenai kata kunci apa
yang bisa digunakan untuk menampilkan situs kita. Penulisannya harus konsisten
dengan isi dari website kita sehingga akan mempermudah pencarian melalui search
engine.

Gambar 20. Jendela yang berfungsi mengubah-ubah tag keywords

Description
Berfungsi untuk memberikan informasi mengenai deskripsi dari situs kita. Sebagai tips,
untuk mempercepat dan mempertinggi ranking dalam search engine, hendaknya
antara keywords dan description ada beberapa kata yang sama. Walaupun
sebenarnya google.com tetap akan melist situs kita walaupun tidak ada tag metanya,
namun belum tentu bagi search engine yang lain.

Gambar 21. Jendela yang berfungi untuk mengubah-ubah tab description

22
Refresh
Digunakan apabila kita ingin me-refresh atau me-redirect halaman (dipaksa menuju ke
halaman /alamat lain) kita setelah selang waktu tertentu. Gambar di bawah berarti
setelah lima detik secara otomatis halaman yang dibuka akan berpindah menuju
http://mesin.brawijaya.ac.id.

Gambar 22. Dengan Jendela ini kita bisa me-refresh sebuah halaman atau me-redirect
sebuah halaman yang baru dibuka.

Base
Tag <base> berhubungan dengan link. Akan saya jelaskan secara langsung. Apabila
kita mempunyai sebuah link menuju ke images/gambar.gif, maka hal tersebut berarti
gambar.gif berada pada folder images dalam server web kita. Namun apabila saya
mempunyai tag <base> dengan content:
<base href=”http://www.situs.com/contoh/”>
Maka setiap script yang terdapat link “images/gambar.gif” tersebut dianggap berada
pada www.situs.com/contoh/images/gambar.gif. bukan lagi berada pada folder images
di server kita. Namun karena basenya sudah diubah ke alamat yang lain maka alamat
tersebut-lah yang dijadikan dasar dari setiap alamat link.
Saya rasa kita tidak perlu menggunakan ini karena akan terbentur juga masalah
kompatibilitas browser.

Link
Ini berguna untuk menghubungkan dokumen kita dengan script luar. Biasanya css.
Salah satu hal yang menarik seputar penggunaan tag link adalah favicon. Favicon
adalah icon yang tampil pada menu favorit apabila adnda mem-bookmark sebuah
halaman. Icon ini juga tampil pada address bar di browser anda. Untuk contohnya
anda bisa buka halaman yahoo.com. perhatikan gambar y di address bar tersebut
Anda bisa membuatnya di alamat http://www.favicon.com.

Elemen <body>
Setelah anda menentukan isi dari elemen head ada, sekarang kita belajar pada
daerah <body> yang berhubungan dengan masalah tampilan. Yang akan kita pelajari
nantinya adalah tentang:
− Text
− Gambar

23
 − List
− Tabel
− Hyperlink
− Image maps
Namun sebelum itu, mungkin muncul pertanyaan bagaimana saya bisa mengatur
property dari tag <body> itu sendiri?... caranya gampang. Sekarang coba anda rubah
tampilan kerja menjadi code and design view dengan mengklik
Pada jendela code, klik kanan pada tag <body> dan pilih edit tag <body> maka akan
muncul kotak dialog baru yang bisa anda gunakan untuk menambah property baru
pada tag body anda, misalnya background image, warna background, dll.

Gambar 23. Jendela yang digunakan untuk meng-edit tag-tag html secara grafis
Cara tersebut berlaku juga untuk tag-tag yang lain.

TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view
dan design view bersamaan dengan mengklik icon . Pelajarilah setiap
kode dan bandingkan dengan tampilannya.

TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view
dan design view bersamaan. Pelajarilah setiap kode dan bandingkan dengan
tampilannya.

TENTANG TEXT
Apabila kita bekerja dengan dreamweaver, maka perintah-perintah standart windows
seperti cut, copy, paste, undo, redo masih bisa dijalankan. Demikian juga apabila kita
menulis text.

24
Disini kita akan mempelajari tentang bagaimana merubah property-property text seperti
warna, ketebalan, alignment, ukuran, kemudian kita juga belajar bagaimana membuat
paragraf dan baris baru, dan yang tak kalah pentingnya adalah bagaimana mengisikan
karakter-karakter unik ke dalam dokumen kita.
Untuk menjelaskannya, kita buat tampilan seperti di bawah ini:
NB: kita akan bekerja pada situs yang telah kita definisikan. Perhatikan juga bahwa
sebelumnya kita sudah membuat folder images pada tempat situs kita.

Gambar 24. Tampilan yang akan kita buat dalam bab ini

Sebelum kita masuk ke langkah pembuatannya, perhatikan bahwa ada beberapa hal
yang perlu diperhatikan agar kita bisa secara efisien membuat tampilan seperti itu.
1. dokumen tersebut berjudul “latihan seputar text”. Bisa anda lihat di bagian pojok
kiri atas
2. nama file dokumen tersebut adalah text.htm
3. tampilan tersebut dapat kita bagai menjadi 3 paragraf
4. paragraf pertama memiliki 4 baris text dengan baris pertama berhuruf tebal
dengan ukuran besar, baris ke tiga text tebal berwarna merah, dan baris ke
empat text miring
5. paragraf kedua adalah paragraf biasa
6. paragraf ke tiga baris pertama lebih menjorok beberapa “spasi”

25
OK, mungkin anda sudah mempunyai gambaran bagaimana membuat tampilan seperti
contoh di atas. Berikut ini adalah langkah-langkahnya:
1. pada document toolbar kita isi kotak title dengan “latihan seputar text”. Tekan
enter

Gambar 25. Memasukkan title dokumen

2. ketik tulisan pada paragraf pertama baris pertama kemudian shift + enter.
Lanjutkan sampai pada baris terakhir. Ketika baris terakhir sudah selesai,
langsung tekan enter.
Ketika anda menekan shift+enter, berarti anda membuat baris baru, sedangkan
jika anda hanya menekan enter berarti anda membuat paragraf baru.
Contoh html di bawah ini akan menjelaskan pernyataan di atas:
<p>
Ini baris pertama paragraf pertama<br>
Ini baris ke dua paragraf pertama<br>
</p>
<p>
Sedangkan ini adalah paragraf ke dua
</p>
Secara otomatis dreamweaver akan membuat tag <p></p> ketika anda
menekan enter saja, dan akan membuat tag <br> jika anda menekan
shift+enter sehingga akan terbentuk baris dan/atau paragraf.
3. tulis kalimat pada paragraf ke dua kemudian tekan enter.
4. sebelum kita menulis kata pertama, kita beri spasi dulu agar kelihatan menjorok
ke dalam. Hal ini tidak bisa secara langsung kita menekan spasi beberapa kali
karena seberapapun kita memberkian spasi dengan keyboard maka yang
tertampil hanya satu spasi saja. Hal tersebut bisa diakali dengan memberikan
karakter blank. Anda bisa memasukkan “&nbsp;” pada code html anda
beberapa kali, namun ada cara yang lebih gampang yaitu dengan
menggunakan insert non break space pada insert bar. Dan menekannya
beberapa kali

Gambar 26. memasukkan spasi dalam desain kita.

Kemudian lanjutkan dengan menulis isi paragraf ke tiga tersebut.
5. pekerjaan anda akan tampak seperti berikut ini:

26
Gambar 27. Tampilan sementara yang telah kita buat
Sekarang kita tinggal mengaplikasikan style pada pekerjaan kita. Dimulai dari
judul “Academic press series in Engineering” tersebut yang mempunyai
property ukuran font 6pt dengan jenis font arial. Untuk mengubah property
dari text tertentu kita tinggal mem-blok bagian text yang ingin kita ubah
kemudian kita tinggal mengubah parameter yang terdapat pada “property
inspector”. Cara seperti ini berlaku juga untuk pengubahan property elemen-
elemen yang lain.

27
 Gambar 28. Cara-cara pengubahan Properties dari elemen-elemen situs
Untuk mengubah judul menjadi bertipe arial, dengan ukuran 6, dan tebal,
silahkan perhatikan tanda panah biru di atas. Saya rasa gambar tersebut sudah
mewakili sebagai penjelasannya.
6. dengan cara seperti langkah 5 diatas, silahkan merubah property text-text lain.
Yang perlu anda rubah tentu saja “J. David Irwin” menjadi bold berwarna
merah, “Auburn University” menjadi italic, dan paragraf 1 align= center.
Dibawah ini mungkin bisa dijadikan referensi untuk bisa mengubah hal tersebut.

Gambar 29. Berbagai tool yang digunakan untuk mengubah property text

28
Tentang image (gambar)
format gambar untuk grafis web
Ada tiga format gambar yang dapat digunakan dalam sebuah website, yaitu GIF,
JPEG, dan PNG. Masing-masing mempunyai karakter dan kemampuan sendiri-sendiri.
Untukk bisa mambuat situs yang efisien, dalam artian mempunyai sedikit waktu
download tanpa mengorbankan estetika, kita perlu untuk bisa secara tepat
menentukan format apa yang tepat untuk gambar tertentu. Berikut ini secara singkat
saya jelaskan mengenai karakteristik masing-masing format gambar.
1. gif
 mempunyai kedalaman warna maksimal sebesar 255
 bisa digunakan untuk gambar transparan
 dapat digunakan untuk animasi
 mempunyai ukuran yang sangat kecil untuk gambar dengan warna yang
sedikit, misalnya gambar tanpa gradasi, untuk garis, gambar text, logo,
atau kartun.
Perhatikan gambar berikut:

Gif 64 warna 32 kb

Gif 7 warna 1,2 kb

2. jpeg
 mempunyai ukuran file lebih kecil daripada gif untuk file dangan ribuan
warna.
 Biasa digunakan untuk gambar-gambar foto.
Berikut ini contohnya:

29
 Jpeg 60% compresi, 19 kb

Jpeg 100% kompresi, 20 kb

3. png
 merupakan format baru yang bisa dipakai di dunia web. beberapa
browser lama memerlukan plugins untuk bisa melihatnya.
 Mempunyai kemampuan kompresi sebagus gif, namun juga mempunyai
kedalaman warna yang tinggi.

Gunakanlah format gif apabila dalam gambar anda hanya terdapat sedikit warna, dan
gunakanlah jpg apabila gambar anda melibatkan banyak warna. Hal ini akan dibahas
lebih detail dalam pendesainan situs tingkat lanjut pada bab berikutnya.
Memasukkan gambar ke dalam dokumen
Untuk memasukkan gambar ke dalam dokumen, ad beberapa cara yang dapat kita
lakukan, yaitu:
1. dengan meletakkan cursor pada tempat yang ingin kita taruh gambar,
kemudian dalam menu bar kita pilih insert > image
2. dengan meletakkan cursor pada tempat yang ingin kita tempati gambar
kemudian ctrl + alt + I

3. klik pada seret icon yang terdapat pada insert bar menuju ke tempat yang
diinginkan.
4. mencari gambar di site panel kemudian mnyeretnya ke tempat yang ingin
ditempati gambar

30
 Drag and drop

Gambar 30. Untuk memasukkan gambar pada desain kita bisa menggunakan
metode klik dan seret dari panel files menuju ke tempat yang diinginkan dalam
desain

5. menggunakan assets panel. Akan dibahas lebih lanjut pada bab tersendiri

Tampilan di berikut ini akan muncul ketika anda ingin mengisikan gambar ke website
anda. Anda boleh mengambil gambar dari mana saja dari direktori-direktori di
komputer anda walaupun tidak berada dalam folder situs yang kita definisikan
sebelumnya.

31
Gambar 31. Jendela yang muncul setelah kita men-drag&drop gambar

Pilihan “relative to:” digunakan untuk menentukan alamat file yang kita ambil nantinya
dicari dari alamat dokumen ini ataukah dicari dari root.
Misalkan saya mempunyai dokumen dalam folder gambar, kemudian saya juga ingin
memasukkan bebek.jpg yang juga berada pada folder tersebut, maka ada dua cara
untuk mencari alamat file gambar tersebut, yaitu:
<img src=”bebek.jpg”> ----> relative to document
<img src=”/images/bebek.jpg”> ---->relative to site root
Pada relative to document saya langsung menggunakan alamat “bebek.jpg” karena
gambar bebek.jpg berada pada hirarki yang sama.
Pada relative to site root, maka bebek.jpg tersebut dicari mulai dari root, sehingga
harus ditulis “/images/bebek.jpg” tanda “/” sebelum “images” menandakan
menggunakan relative terhadap site root.

Karena gambar yang saya ambil berada di luar site root (perhatikan bahwa alamatnya
adalah alamat local file:///I/work/proyek luar/NGAJAR/transparan.jpg) maka jika saya
ok akan muncul peringatan sebagai berikut:

32
Gambar 32. peringatan yang muncul karena gambar berada di luar folder yang sudah
didefinisikan sebagai tempat situs.

Dreamweaver mengingatkan bahwa karena file gambar berada di luar site root dari
situs yang kita definisikan, maka nantinya gambar tersebut tidak bisa diakses ketika
kita upload karena alamatnya menggunakan local address.
Untuk menghindari hal tersebut, dengan meng-klik yes maka dreamweaver akan
meng-copy file tersebut dan memasukkannya pada folder yang kita definisikan. Kita
bisa menentukan mau ditaruh dimana file tersebut dalam situs kita. Karena
sebelumnya kita sudah membuat folder images, kita taruh saja gambar yang ingin kita
masukkan ke dalamnya.

Memodifikasi gambar
Sebagaimana text, kita juga bisa menggunakan property inspector untuk mengubah
atau memodifikasi gambar.

33
Gambar 33. beberapa cara untuk mengubah ukuran gambar
Untuk mengatur ukuran gambar, kita bisa mengisikan langsung pada kotak “W” dan
“H” dengan satuan pixel atau persen. Atau dengan mennyeret tanda yang ditunjukkan
tanda panah di atas. Tanda yang ditunjukkan oleh:
 Tanda panah merah digunakan untuk mengatur lebar gambar
 Tanda panah kuning untuk mengubah panjang gambar
 Tanda panah hijau digunakan untuk secara bebas mengatur kedua-duanya.
Peringatan! : disarankan untuk tidak mengatur ukuran gambar karena dapat
mengakibatkan tampilannya menjadi pecah.
Tips : untuk bisa mengatur ukuran gambar menggunakan mouse dengan proporsional,
tekanlah tombol shift ketika menyeret tanda panah hijau. Sedangkan untuk
mengembalikan ukuran sebenarnya anda bisa menggunakan tombol “reset size”
V Space dan H space digunakan untuk mengatur jarak tepi gambar
Border digunakan untuk membuat bingkai pada gambar anda.
Alt digunakan untuk membuat deskripsi singkat dari gambar kita. Walaupun sepele,
tag alt akan sangat berguna terhadap validitas sebuah halaman html. Usahakan selalu
mengisi alt! apabila memang tidak ada yang perlu dideskripsikan, anda bisa memilih
”empty” pada dropdown alt tersebut.

34
Tentang list
ada tiga jenis list yang dapat kita buat menggunakan list, yaitu:
− unordered list
untuk membuatnya, kita bisa mengaktifkan dulu menu tersebut dengan
mengklik icon bullet pada property inspector kemudian mulai mengetik.
Untuk menambah list kita bisa tekan enter. Sedangkan bila kita ingin merubah
beberapa paragraf menjadi berbentuk list, maka kita tinggal mem-blok paragraf-
paragraf tersebut kemudian baru kita klik icon bullet pada property inspector.
Peringatan: yang dapat dibentuk menjadi list hanyalah paragraf, yaitu sesuatu
yang berada pada tag <p></p>. itulah kenapa untuk membuat list berikutnya
kita menekan enter bukan shift + enter.

Gambar 34. Cara yang digunakan untuk membuat list

Ada beberapa model tampilan untuk bullet (titik) anda bisa mengubahnya pada
code view kemudian klik kanan pada kode tag <ul> kemudian pilih edit tag
<ul>. Maka jendela dialog akan muncul.

35
 Gambar 35. cara untuk mengubah tampilan list
Pada dropdown type anda bisa memilih tampilan dari bullet anda. Cobalah.

− ordered list
ordered list berarti list yang berurutan. Setiap list ddari atas sampai ke bawah
diurutkan berdasarkan nomor. Hal ini sama dengan numbering, jika kita pernah
menggunakan microsoft word.
Pembuatan jenis list ini sama dengan unordered list. Kita tinggal meng-klik icon
ordered list pada property inspector. Selanjutnya sama dengan unordered list.

Gambar 36. Cara yang digunakan untuk membuat list yang berurutan
Ordered list sendiri mempuyai beberapa style. Anda bisa penomorannya bisa
anda ubah menjadi alfabet (a, b, c,...), atau angka romawi (i, ii, iii, ...). caranya
adalah dengan menempatkan cursor pada salah satu list kemudian mengklik
tombol list item yang ditunjukkan tanda panah biru pada gambar di atas.

− Nested list
Merupakan kombinasi dari kedua model di atas atau bahkan kombinasi style
dari masing-masing jenis list di atas. Perhatikan contoh berikut:

36
 Cara membuatnya dapat anda lihat pada ilustrasi di bawah:

Gambar 37. Cara yang digunakan untuk membuat berbagai variasi list

1. Pertama kita aktifkan dulu tombol ordered list. Kemudiann ketik urutannya. Kita
tidak perlu menuliskan hirarki yang tinggi dulu. Tulis saja berurutan tanpa
mempedulikan hirarki.
2. Blok pada hirarki yang lebih rendah. Perhatikan gambar di atas, nomor 3
sampai nomor 8 saya blok
3. Klik pada tombol indent, maka secara otomatis bagian yang anda blok akan
membuat penomoran sendiri. Karena pada contoh tersebut hirarki yang ke dua
mempunyai style romawi, kita ubah stylenya dengan mengklik sembarang
tempat pada hirarki yang kedua kemudian menekan tombol “list item”. Dan
merubahnya menjadi romawi
4. Ulangi langkah diatas untuk hirarki yang ke-tiga, kemudian ketika masih ter-
blok, klik padatombol unordered list.

37
Tentang tabel
Tabel merupakan bagian yang sangat sangat penting dalam pendesainan web. dengan
tabel, kita dapat membuat tampilan web lebih bervariasi. Namun tabel bukannya tanpa
kekurangan. Penyusunan tabel yang terlalu rumit, bertumpuk, akan menyebabkan
pembacaan yang lebih lama oleh browser. Efisiensi dalam penggunaan tabel sangat
penting disini. Kita mulai dengan property-property dasar tabel.
Memasukkan tabel
Kita dapat membuat tabel dengan tiga cara, yaitu:
 Menggunakan tombol tabel pada insert bar di tab common atau di tab table

Gambar 38. icon yang digunakan untuk memasukkan tabel

 Menggunakan menu insert > table
 Menggunakan shortcut ctrl + alt + T

Pertama kali jendela yang muncul ketika anda memasukkan tabel adalah seperti di
bawah:

Gambar 39. Jendela yang pertama kali muncul ketika memasukkan table.
Rows : disini kita isikan jumlah baris yang diinginkan
Colums : disini kita isikan jumlah kolom yang diinginkan
Width : panjang tabel. Secara default nilainya adalah 75 persen. Hal tersebut berarti
lebar tabel yang kita buat adalah 75 persen dari panjang tampilan. Jika kita memilih
satuan persen, maka tabel kita bisa berubah-ubah panjangnya menurut browser.
Sedangkan jika kita memilih satuan pixel, maka panjang tabel kita tetap menurut yang
kita isikan.
Border adalah bingkai dari tabel kita (tanda panah hitam)
Cell padding : adalah jarak antara dinding sel dengan sesuatu yang diisikan dalam sel
tersebut (tanda warna biru)
Cell spacing : jarak antar sel (tanda warna merah)

38
Gambar 40. Penjelasan mengenai bagian-bagian tabel

Menyeleksi elemen dalam tabel

Untuk menjelaskan bab ini silahkan buat tabel 3 x 3 dengan property default. Berikut
ini contoh tabel yang sudah saya beri notasi:

Misalkan kita ingin menyeleksi kolom bagian tengah saja kita bisa kita bisa
melkukannya dengan:
 menempatkan cursor pada sel nomor 2 kemudian klik dan seret ke bawah
sampai nomor 8.
 Menekan ctrl kemudian mengklik sel yang diinginkan.
Sedangkan untuk menyeleksi seluruh tabel kita bisa melakukannya dengan mengklik
pada daerah di luar tabel kemudian menyeretnya melewati tabel atau dengan mengklik
bordernya. Tapi bila menggunakan cara tersebut kita akan dapat kesulitan ketika tabel
kita berada dalam tabel yang lain yang semuanya tidak mempunyai border seperti
contoh di bawah:

39
Gambar 41. jika table kita bertumpuk-tumpuk, bisa sangat sulit untuk menyeleksi table
tertentu. Untuk mempermudahnya gunakanlah tag selector.

Untuk dengan mudah menyeleksi “tabel a” caranya adalah:

1. tempatkan cursor pada tabel a
2. perhatikan bagian tag selector yang terdapat di kiri bawah di atas property
inspector berubah menjadi beberapa tombol dengan tulisan tag-tag tertentu.
Dalam pekerjaan saya terlihat seperti ini:

Tombol tersebut merupakan alat untuk mempermudah kita memilih tag-tag

yang terdapat pada tampilan. Coba klik tombol tersebut dari yang paling kanan,
maka yang terseleksi adalah tampilan hasil dari tag <td>, begitu seterusnya
3. klik pada <table> maka tabel yang berada pada kolom tersebut akan terseleksi

Setelah anda seleksi, maka property-property dari elemen tersebut akan tertampil pada
property inspector. Dari situ kita bisa merubah property dari obyek yang kita buat.
Property dari setiap apa yang kita seleksi akan tertampil di property inspector.

Mengubah property tabel

Sama dengan mengubah ukuran gambar, kita bisa mengubahnya melalui property
inspector atau langsung dengan menggunakan cursor.

40
 Gambar 42. cara untuk mengubah property tabel

 Untuk mengubah ukuran tabel kita bisa menggunakan kotak “W” dan “H”
 Untuk mengubah warna background kita bisa gunakan “Bg Color”
 Untuk mengubah warna bingkai (border) kita bisa gunakan “Brdr color”
 Untuk memberikan background dengan obyek tertentu kita bisa menggunakan
“Bg Image”.
 Untuk mengatur penempatan tabel kita bisa gunakan “Align”

Tentang hyperlink
Link merupakan elemen terpenting dalam sebuah situs. Elemen ini merupakan
jembatan untuk berpindah dari satu halaman ke halaman yang lain dari topik satu ke
topik yang lain dalam satu halaman, atau bahkan ke halaman web yang lain atau ke
alamat email.
Di bawah ini adalah sintak penulisan html untuk membuat link
<a href=”alamat_link”>text atau gambar</a>
Misalkan untuk membuat link menuju ke halaman kontak.html pada text tertentu maka
htmlya adalah:
<a href=”kontak.html”>text tertentu</a>
Sedangkan untuk memberikan link pada gambar tentu saja didalam tag <a> terdapat
tag <img>

41
<a href=”alamat_link”><img src=”kontak.gif” alt=”kontak”></a>
Dijelaskan di atas bahwa kita bisa membuat link yang menuju ke halaman tertentu,
situs tertentu, dan bahkan alamat email tertentu. Di bawah ini adalah contoh html untuk
beberapa jenis alamat tersebut:
<a href=”http://www.google.com”>link menuju ke google</a>
<a href=”mailto:dk_arismawan@yahoo.com”>mengirim email ke
dk_arismawan@yahoo.com</a>
Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa
menggunakan target=”_blank”
<a href=”http://www.google.com” target=”_blank”>link menuju ke
google</a>

Untuk membuat link di dreamweaver sangatlah mudah. Kita tinggal menyeleksi text
atau gambar mana yang ingin digunakan sebagai hyperlink kemudian tinggal
mengisikan alamat yang ingin dituju pada kotak “link” pada property inspector.

Gambar 43. Cara memasukkan link pada text

Cara kedua adalah dengan meng-klik icon folder (panah merah) kemudian mencari file
yang kita tuju. Jika file kita berada di luar root site yang telah kita definisikan maka
dreamweaver akan mengcopy file tersebut ke root site kita sehingga nantinya tidak
akan terjadi kesalahan alamat.

42
Cara yang ketiga adalah dengan megklik icon target (tanda panah biru) kemudian
menyeretnya pada file yang terdapat pada site panel kita. Ini merupakan cara paling
unik yang mempermudah kita membuat situs dengan cepat

Gambar 44. menentukan target link menggunakan target, kita hanya perlu mengklik
kemudian drag ke dokumen yang dituju pada panel file.

Link untuk menuju ke tempat tertentu dalam satu dokumen

Kita dapat memberikan link untuk menuju ke tempat tertentu dalam satu dokumen. Link
jenis ini sering disebut sebagai anchors. Tempat tertentu dalam sebuah dokumen kita
beri named anchor sebagai target untuk link.
Untuk lebih jelasnya silahkan ikuti lagkah berikut:
1. pertama kita buat halaman baru pada situs kita yang mempunyai banyak teks
dan paragraf. Disini kita buat saja tiga paragraf yang mempunyai banyak isi.
Buat juga tulisan “paragraf 2” pada bagian paling atas dokumen.
2. posisikan cursor anda pada awal paragraf ke dua. Kemudian menu insert >
named anchor atau dengan shortcut ctrl + alt + A. Maka akan kelihatan tanda
.
3. blok tulisan “paragraf 2” di bagian paling atas. Kemudian gunakan klik target
seret dan arahkan ke tanda .

43
 Gambar 45. dengan anchor point kita bisa menuju ke tempat tertentu dalam satu
halaman ketika sebuah link di-klik.
4. sekarang anda telah mempunyai link menuji ke tempat tertentu dalam halaman
anda. Tekan F12 untuk melihatnya di browser kemudian klik link anda. Apa
yang terjadi?
NB : jika ingin melihat perbedaannya maka halaman anda harus panjang
sampai bisa di-scroll, atau dengan mengecilkan windows borowser.

Tentang image maps

Jika anda membuat link pada sebuah gambar, maka sudah pasti bahwa area yang
bisa anda klik berupa kotakan dengan ukuran sama dengan gambar bukan? Nah
dengan image maps kita bisa membuat area link tidak hanya kotak, namun bisa
berupa elips atau bangun tak beraturan.
Selain kemampuan tersebut, dengan image maps kita juga bisa membuat area link
lebih dari satu buah sehingga kita tidak perlu memecah gambar tersebut menjadi
beberapa bagian untuk bisa diberi link yang berbeda.
Untuk bisa membuatnya ikuti langkah berikut ini :
1. Buat halaman baru kemudian masukkan gambar yang besar di dalamnya.
Masukkan saja image “imagemaps.gif” yang ada pada cd rom.
2. seleksi gambar yang kita masukkan kemudian silahkan mulai menggambar
maps pada gambar anda.

44
Gambar 46. dengan imagemaps kita bisa membuat lebih dari satu area link pada
sebuah gambar.

Untuk “link 1” kita gambar dengan menggunakan icon yang ditunjukkan tanda
panah kuning. Untuk “link 2” kita gambar menggunakan icon yang ditunjukkan
tanda panah hijau. Untuk “link 3” kita menggunakan icon yang ditunjukkan
tanda panah biru.
Jika kita ingin menyeleksi map yang kita buat, maka kita bisa menggunakan
icon yang ditunjukkan oleh tanda panah merah.
Untuk memberikan nama map, gunakanlah textbox yang ditunjukkan oleh tanda
panah hitam.
Nah, masing-masing map yang kita buat dapat kita masuki alamat link. Untuk
melakukannya, alamat link kita masukkan ke dalam textbox yang ditunjukkan
oleh tanda panah warna ungu. Setelah selesai silahkan lihat di browser dan klik
link yang telah kita buat (F12). Perhatikan area yang bisa di klik.

45
 LATIHAN 1
Sebuah Lembaga Bimbingan Belajar ingin memperkenalkan dirinya ke dunia melalui
internet dengan harapan mendapatkan murid yang lebih banyak. Cobalah membuat
situs lengkap untuk membantu mewujudkan cita-cita lembaga tersebut.
Aplikasikanlah semua yang sudah dipelajari sebelumnya.

46
 Desain web tingkat lanjut dengan dreamweaver

Menggunakan tabel untuk mengatur tampilan

Table tidak hanya dapat berfungsi sebagai penampil data-data saja, namun dapat juga
dipakai untuk mengatur tampilan situs yang lebih rumit. Kita ambil contoh beberapa
situs http://oke.or.id berikut:

Dapat anda lihat bahwa dalam situs tersebut berbagai text ditempatkan pada koordinat
tertentu dengan baground tertentu pula, belum lagi penempatan gambar-gambar yang
ada disitu. Penempatan-penempatan ini nantinya dapat kita atur melalui table.
Untuk tutorial ini kita akan membuat layout web yang umum. Setelah anda
mempelajarinya, cara-cara yang diajarkan dapat juga diaplikasikan untuk berbagai
jenis website
Sebelumnya kita perlu tahu dulu tentang apa itu seperti apa web layout yang umum.
Gambar di atas merupakan contoh yang bagus untuk layout web yang umum. Disana
terdapat header, isi dan footer. Header web umumnya diisi dengan nama web dan
navigasi umum web. Sedangkan bagian isi dibagi lagi menjadi tiga kolom, yaitu bagian
kiri yang biasanya sebagai tempat link-link tertentu, bagian tengan adalah untuk isi dari
halaman web tertentu, dan bagian kiri dapat digunakan untuk menampilkan beberapa
isi dari halaman yang lainnya. Sedangkan bagian footer biasanya digunakan untuk
menampilkan link-link pembantu dan tulisan hak cipta.
Tentu saja tidak sekaku itu dalam membuat website. Kita harus juga melihat kebutuhan
dari klien dan juga jenis web yang akan dibuat. Namun apabila anda perhatikan pada
kebanyakan website, mereka menggunakan jenis layout yang menyerupai contoh di
atas.

47
Dalam sebuah situs web, kita sering mendengar kata “homepage”. Ini artinya adalah
halaman muka, atau halaman yang pertama kali dilihat oleh user. Halaman muka
biasanya berbeda dengan halaman-halaman yang lain. Halaman muka tersebut
dirancang untuk mewakili isi keseluruhan dari situs. Perhatikan situs http://cnn.com
lihatlah bahwa halaman utamanya berbeda dengan halaman isinya.
Halaman utama situs cnn:

48
Halaman isi situs cnn

Perhatikan layoutnya mirip dengan yang kita bicarakan tadi bukan?.

Sekarang kita mulai saja membuat situs umum yang mirip dengan desain di atas. Yang
tertulis disini merupakan pengalaman penulis yang dirasa cukup efisien dalam
pembuatannya. Tutorial ini menggabungkan dua software, yaitu photoshop dan
dreamweaver. Namun disini kita tidak akan membahas bagaimana membuat tampilan
di dalam photoshop, sehingga kita gunakan file gambar yang sudah disediakan dalam
CD ROM.
Di folder “table desain” dalam CD ROM anda terdapat gambar tampilan situs yang
akan kita buat dengan nama file “mock up.gif”. Mock up.gif tersebut sebelumnya kita
buat di photoshop, kemudian kita potong-potong kemudian digabung lagi dalam
dreamweaver dengan menggunakan table. Jadi disini intinya adalah, jika kita
mendesain situs dengan tampilan yang kompleks, sebelumnya kita buat tampilannya
dalam photoshop. Aturlah komponen-komponen web seperti link, gambar, dan lain-lain
sampai membentuk tampilan yang kita inginkan. Aplikasikan dasar-dasar dalam
mendesain situs disini. Buatlah tampilan semenarik mungkin dengan tanpa
membingungkan user ketika melihat situs kita. Setelah selesai, kita potong gambar-
gambar yang diperlukan untuk membuat tampilan seperti itu. Sekarang kita pelajari
teknisnya.

49
Bukalah file mockup.jpg.

Kita akan membuat tampilan yang kompleks seperti halaman di atas dengan
menggunakan bantuan table.
Ketika desain dalam photoshop anda sudah selesai, sekarang anda menentukan
bagian mana yang harus dimasukkan dalam bentuk gambar dan bagian mana yang
bisa dibuat background.
Pertama kali kita bagi desain kita menjadi tiga bagian, yaitu bagian header, body, dan
footer. Hal ini dilakukan untuk mempermudah kita dalam meng-edit situs nantinya.

50
Setelah kita menentukan bagian-bagian tersebut, kemudian kita tentukan bagian mana
yang harus dijadikan gambar dalam sebuah website. Saya ambil contoh bagian body.

Perhatikan bagian yang dilingkupi warna merah. Kita tidak perlu memasukkan gambar
sebesar (15px x 539px) dalam halaman web kita. Kita hanya perlu menggunakan
gambar sebesar (15px x 1px) kemudian menempatkannya sebagai background pada
baris table sepanjang 539px.

Kita kerjakan bagian header dulu:

Bagian header saya bagi menjadi seperti gambar di bawah:

Bagian 1 dan 3, karena mempunyai warna yang banyak saya simpan dalam bentuk
jpeg. Sedangkan bagian tengah tidak mempunyai banyak warna sehingga format gif
merupakan pilihan yang baik untuk mengurangi ukuran file.
Bagian 4 tidak perlu saya save dalam bentuk gambar karena dapat diwakili dengan
membuat baris table dengan background warna seperti tersebut. Bagian yang perlu
untuk disimpan dalam file gambar adalah icon rumah disamping tulisan “home”.
Sedangkan nomor 5 dan 6 kita hanya perlu membuat gambar dengan ukuran panjang
23x1 pixel kemudian menjadikannya background dari table.
Berikut ini rancangan table yang akan digunakan:

Disini kita membuat table dengan tiga kolom (lihat warna merah) kemudian kolom
tengah kita isi table baru dengan pembagian antar cellnya seperti gambar hijau. Hal ini
dilakukan untuk menghindari pecahnya tampilan jika kita menggunakan satu table
dengan banyak cell yang tidak simetris. Dengan membaginya dengan table baru di
dalam table, maka jika salah satu sel bertambah ukurannya, maka tidak akan
mengganggu table yang lain.
Sebelum memulai bekerja, ada baiknya kita review ulang mengenai bagaimana
mengubah property table menggunakan property inspector. Anda bisa membaca pada
bagian pertama (berkenalan dengan dreamweaver)
Sekarang kita mulai menyusun ganmbar tersebut dalam dreamweaver. Copy dan
paste folder images dalam CD ROM ke dalam folder baru dalam hardisk anda. Kita
namakan folder baru tersebut “situs baru”. Kemudian definisikan situs dalam folder
tersebut sebagaimana cara yang sudah kita pelajari pada bab sebelumnya.

51
1. Buatlah table dengan tiga kolom dengan ukuran 770px tepat seperti
panjang desain yang kita buat di photoshop. Tabel yang kita buat harus
mempunyai border=0, cellpadding=0, cellspacing=0 sehingga tidak akan
kelihatan jika dilihat dalam browser.

2. Klik pada kolom pertama kemudian ubah panjang kolom tersebut menjadi
sama seperti gambar “header left” yaitu 23 pixel. Kemudian isi
backgroundnya dengan gambar “header_left”.

3. Sekarang ulangi langkah nomor 2 untuk kolom paling kiri. Gunakan gambar
“header_left” untuk backgroundnya.
4. Sekarang kita masukkan table baru pada kolom yang ditengah. Klik pada
kolom di tengah kemudian masukkan table dengan width 724px. Table
tersebut mempunyai properties seperti di bawah ini: Row = 3, Column = 3,
Border=0, Left padding = 0, Right padding=0
5. sekarang kita akan mengisi masing-masing kolom pada baris satu dengan
gambar-gambar yang sudah disediakan. Isi kolom kiri dengan “header1.jpg”
kemudian kolom tengah dengan “header2.gif”, dan kolom kanan dengan
“header3.jpg”. Nah, kini tampilan header sudah selesai. Kita tinggal
meletakkan table tampilan tersebut tepat di tengah tampilan. Caranya dengan
mengubah align dari table paling luar menjadi “center”. Untuk menyeleksi table
bagian luar kita bisa menggunakan bantuan tag selector sebagaimana gambar
dibawah hanya kita tinggal klik sembarang di kolom. Kemudian kita pilih tombol
<table> paling kiri.
6. Sekarang kita akan menggabungkan tiga kolom pada baris ke dua table
tersebut. Caranya seleksi ketiga kolom tersebut. Tekan control terus klik pada
cell yang diinginkan. Kemdian tekan icon yang ditunjukkan oleh tanda panah.

52
7. Ubah warna background baris tersebut menjadi #A3ADA2 anda bisa
mengisikan langsung angka tersebut dalam kolom warna seperti yang
ditunjukkan gambar di bawah. Kemudian ubah horizontal alignment-nya
menjadi right.

8. Secara umum tampilan header kita telah selesai, kita tinggal mengisi bagian
text. Silahkan isi text seperti tampilan yang diinginkan pada baris kedua bagian
table yang dalam. Seperti ditunjukkan oleh gambar. Jangan lupa memasukkan
juga icon home yang sudah disediakan.

53
OK untuk sementara bagian header selesai. Masalah warna dan jenis font kita
setting nanti. Sekarang kita beranjak ke bagian body. Bagian ini akan sedikit rumit.
Pertama kita bagi bagian body tersebut menjadi seperti bagian di bawah:

Gambar di atas memperlihatkan pembagian dari gambar. Masing-masing warna

garis di atas dapat dianggap sebagai calon table yang akan kita buat. Berarti nanti
kita akan buat tiga table. Dari situ kira mendapat gambaran tentang gambar mana
yang bisa dijedikan background dan bagian mana yang harus disimpan dalam
bentuk gambar utuh.
Sekarang kita mulai membuat tabelnya.
1. Di bawah table yang kita buat sebelumnya, kita buat table yang mempunyai 5
kolom (perhatikan warna merah gambar di atas). Untuk bisa membuat table di
bawah. Masukkan property table berikut: width=770px, cellpadding=0,
cellspacing=0, boder=0.
2. Klik pada kolom 1, kemudian masukkan properties berikut ini: width=23px,
background=”header_left.gif”.
3. klik kolom ke-dua kemudian ubah propertynya sebagai berikut: width=151,
bgcolor=”#D2DCD1”, vertical alignment = top.

4. klik kolom ketiga, ubah propertynya jadi sebagai berikut: width=33px,

background=”body3.gif”, vertical alignment = top. Kemudian isi kolom
tersebut dengan gambar “body3img.gif”.

5. klik pada kolom 4 kemudian masukkan property sbb: width=540px, bgcolor=”

F6F8F4”, vertical alignment = top.

54
 6. klik pada kolom ke lima kemudian masukkan property sbb: width=23,
background=”header_right.gif”.
nah kita sudah membuat base untuk bagian bodynya. Sekarang kita kerjakan
bagian menu. Bagian menu tersebut terletak pada kolom ke dua pada table yang
telah kita buat sebelumnya, sehingga kita klik terlebih dahulu kolom kedua
tersebut sehingga nantinya kolom yang kita buat terletak di situ.
Untuk lebih jelasnya kita langsung aplikasikan cara di atas. Klik pada kolom kedua
kemudian shift + enter terlebih dahulu.
1. Buat table dengan property: width = 151, bgcolor=”# C8D3C7”, column=2,
rows=15, cellpadding = 0, cellspacing = 0.’
2. seleksi kolom ke dua, kemudian merger semua baris pada kolom tersebut,
kemudian ubah bgcolor= DEE5DD. Masukkan image 1px.gif kemudian ubah
widthnya menjadi 1px.
3. Klik pada kolom pertama baris paling atas kemudian isi dengan gambar
headmenu.gif
4. Klik pada kolom pertama baris ketiga. Kemudian isi dengan property berikut:
width=”150px”, bgcolor= DEE5DD. Kemudian isi baris tersebut dengan gambar
1px.gif. dengan begitu maka lebarnya akan berubah menjadi 1 px, mengkuti
ukuran dari gambar yang kita masukkan.
5. Ulangi langkah nomer 4 untuk baris yang ganjil (5,7,9,dst).
6. klik pada baris ke dua, kemudian ubah horizontal alignmentnya menjadi right.
Isi baris ini sesuai dengan menu yang disediakan.
7. Ulangi langkah nomor 6 untuk baris-baris genap.

Sekarang kita membuat table bagian kanan.

Klik pada kolom ke empat table yang berukuran 770 kemudian masukkan table
dengan panjang 100% dengan 1 kolom dan 1 baris. Pada baris pertama isi
dengan gambar “atasisi.gif” kemudian isi backgroundnya dengan gambar itu juga.
Tekan tab kemudian masukkan tulisan seperti yang ada di tampilan anda. Terserah
anda ingin memasukkan tulisan apapun di situ. Masukkan juga gambar “isi.gif”
Sekarang anda mempunyai tampilan yang mirip dengan desain kita sebelumnya,
hanya font dan peletakan isinya yang tidak sama. Anda tidak perlu merisaukan hal
ini. Nantinya hal tersebut akan kita ubah tampilannya menggunakan beberapa
cara.
Kita lanjutkan saja dengan membuat bagian footernya.
Di bagian footer kita hanya perlu membuat table dengan empat kolom dengan
background=”footer.gif”. Kolom yang pertama berukuran 23 pixel dan
mempunyai background “header_left.gif”.
Klik pada kolom kedua dan ubah panjangnya menjadi 10px
Klik pada kolom ke tiga kemudian ubah panjangnya menjadi 714px, dengan
horizontal alignment = center.
Klik pada kolom ke empat kemudian ubah panjangnya menjadi 23px dan dengan
background=header_right.gif.
Untuk bagian menunya, kita bisa masukkan sembarang link. Gunakan saja tanda
“#” untuk mewakili link.

55
 Sekarang pekerjaan anda akan tertampil seperti di bawah:

Hal terakhir yang kita lakukan adalah mengubah jenis font dan mengatur
penempatanya. Ada dua cara yang bisa kita lakukan untuk mengubah gambar
tersebut. Cara yang pertama adalah dengan menggunakan property inspector untuk
mengubah property dari text. Caranya kita hanya tinggal memblok teks yang akan kita
ubah kemudian kita ubah propertynya menggunakan property inspector. Pada desain
di atas kita menggunakan jenis font Tahoma 11 px dengan ukuran 11 px. Di property
inspector property tersebut tidak tertampil, maka kita harus menulis “Tahoma” pada
jenis font dan mengubah ukurannya menjadi 2pt.

Jika diperlukan font bold, kita hanya perlu meng-klik tombol B saja.

Sedangkan cara yang berikutnya adalah dengan menggunakan CSS (Cascading Style
Sheet). Dengan CSS kita bisa mengellompokkan settingan-settingan dari property font
di atas pada tempat tersendiri bahkan pada file lain. Karena fleksibilitas dan
kemudahannya, kita akan menggunakan cara ini untuk mengatur teks dan properties
yang lain.
Bagian yang perlu dirubah untuk bisa memenuhi tampilan desain sebelumnya adalah
sbb:

56
Sekarang kita akan men-setting teks yang telah kita buat menggunakan CSS. Hal
pertama yang dilakukan adalah mebuat CSS terlebih dahulu. Caranya adalah dengan
menggunakan panel css. Ditunjukkan pada gambar di bawah:

gambar. Untuk membuat css klik pada icon yang ditunjukkan oleh tanda panah

setelah anda klik maka akan muncul jendela dialog seperti di bawah:

Gambar Kotak dialog pembuatan css

Kotak nama digunakan untuk menentukan nama dari elemen css yang nantinya kita
load dalam desain kita.
Pada bagian type terdapat 3 pilihan, yaitu
Make custom style sheet
Digunakan apabila kita ingin membuat konfigurasi style baru.
Redefine HTML Tag digunakan apabila kita langsung ingin mengatur konfigurasi
tampilan darji tag-tag html kita. Sehingga setelah kita buat css untuk tag <p>, maka
dalam html nantinya setiap tag <p> akan diaplikasikan konfigurasi tampilan yang kita
definisikan dalam css tadi
Use CSS Selector digunakan apabila kita ingin memasukkan atau memodifikasi
tampilan link.
Bagian Define in digunakan untuk menentukan apakah css kita nantinya dibuat dalam
html itu sendiri (dalam elemen head) ataukan dipisah ke file lain.
Sekarang kita akan memperbaiki tampilan situs kita sebelumnya menggunakan css.
Beberapa property yang kita atur adalah:

57
 1. Bagian tag body mempunyai property : semua margin = 0, dan tidak
mempunyai padding, sehingga tampilan kita akan berhimpit ke batas atas
kanvas browser.
2. Bagian link menu mempunyai jenis font Tahoma bold, jika mouse dilewatkan,
warna font akan berubah menjadi merah.
3. Bagian isi (yaitu tiap paragrafnya) sedikit menjorok ke kanan sekitar 10 pixel.
4. Bagian link pembantu (kanan atas) mempunyai property warnanya putih, jenis
font verdana 10px, dan jika mouse dilewatkan akan berubah menjadi hitam.

Sekarang kita mulai membuat CSS untuk memenuhi criteria yang saya sebutkan di
atas. Ikutilah langkah-langkah berikut:
Sekarang kita buat css untuk mengatur elemen body.
1. Klik pada “New CSS Style” pada bagian kanan bawah panel design kemudian
jendela dialog akan muncul. Pilih pada “redefine html tag” kemudian klik pada
dropdown dan pilih <body>. Maka jendela baru akan muncul.

Kotak dialog untuk memasukkan style.

Perhatikan juga pada bagian “Define In” saya memilih This Document Only. Hal
tersebut berarti Style kita dikelompokkan pada elemen head dokumen kita. Setelah kita
klik OK, kotak dialog di bawah akan muncul:

58
 Dalam Kotak Dialog ini kita memilih property apa saja yang ingin kita masukkan
2. Pilih pada Background kemudian masukkan #374948 pada kotak Background
Colornya.
3. Pilih pada box kemudian masukkan angka 0 pada margin dan padding.
Pastikan checkbox same for all tercentang. Klik apply, perhatikan
perbedaannya. Gini tampilan table yang kita buat berhimpit pada bagian atas.
Hal tersebut karena kita mengatur property dari body yang secara default
mempunyai margin dan padding sekarng tidak (margin=0 padding=0).
Sekarang masuk ke bagian link menu (bagian kiri). Pada bagian menu tersebut berarti
kita akan mengatur tampilan dari link. Untuk membuatnya silahkan ulangi langkah ke-
satu di atas, namun dengan property seperti yang ditunjukkan gambar berikut:
1. Klik pada “New CSS Style”

Pilih Use CSS Selector Untuk mengatur tampilan link

Jika anda memilih Use CSS Selector maka anda akan menjumpai tiga jenis css
yang bisa diaplikasikan ke link, yaitu:
A:link  Digunakan untuk mengubah tampilan link
A:visited  Digunakan untuk mengubah tampilan link yang telah dikunjungi

59
A:hover  Digunakan untuk mengubah property link ketika cursor melewatinya
A:active  Digunakan untuk mengubah property link ketika kita mengkliknya.
Dari sini masukkan property masing-masing jenis style link di atas.
Berikut ini property-property yang saya masukkan ke dalam masing-masing
jenis di atas:
Untuk a:link :

Untuk a:visited:

60
 Untuk a:hover

Untuk a:active

Nah sekarang tampilan setiap link akan memenuhi CSS yang kita buat. F12 untuk
melihat aksinya
Perhatikan bahwa Style yang kita buat sebelumnya tersebut mempunyai efek pada
semua tag link yang ada dalam dokumen, padahal jika kita melihat desain yang kita
buat sebelumnya, pada bagian link pembantu kanan atas linknya berwarna putih.
bagaimana membuat link yang berbeda tersebut adalah dengan membuat custom style

61
sheet untuk link di atas. Kita tidak perlu repot-repot mengulangi langkah-langkah
seperti sebelumnya. Kita hanya perlu memodifikasi scriptnya secara langsung. Hal ini
dirasa jauh lebih efisien jika dibandingkan dengan membuat css baru satu per satu.
Sekarang masuklah ke tampilan code kemudian perhatikan dalam elemen <head>
terdapat script sebagai berikut:
<style type="text/css">
<!--
body {
background-color: #374948;
margin: 0px;
padding: 0px;
}
a:link {
font-family: tahoma;
font-size: 11px;
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #666666;
text-decoration: none;
}
a:hover {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #CC6600;
}
a:active {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #990000;
text-decoration: none;
}

62
-->
</style>
Nah script di atas adalah script CSS yang sudah kita buat sebelumnya. Sekarang kita
akan membuat css sendiri untuk bagian link kanan atas.
Siahkan copy paste script link yang ada di atas kemudian ubah scriptnya seperti di
bawah:
<style type="text/css">
<!--
body {
background-color: #374948;
margin: 0px;
padding: 0px;
}
a:link {
font-family: tahoma;
font-size: 11px;
color: #000000;
font-weight: bold;
text-decoration: none;
}
a:visited {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #666666;
text-decoration: none;
}
a:hover {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #CC6600;
}
a:active {
font-family: tahoma;
font-size: 11px;
font-weight: bold;
color: #990000;

63
 text-decoration: none;
}
.kananatas a:link {
font-family: tahoma;
font-size: 11px;
color: #ffffff;
text-decoration: none;
}
.kananatas a:visited {
font-family: tahoma;
font-size: 11px;
color: #666666;
text-decoration: none;
}
.kananatas a:hover {
font-family: tahoma;
font-size: 11px;
color: #CC6600;
}
.kananatas a:active {
font-family: tahoma;
font-size: 11px;
color: #990000;
text-decoration: none;
}
-->
</style>
Sekarang anda sudah membuat style khusus untuk link kanan atas. Yang kita lakukan
sesudahnya adalah memanggil code CSS yang kita buat tersebut ke dalam link
pembantu. Caranya adalah:
Klik pada salah satu link pembantu kemudian dengan code selector klik pada tag <td>
kemudian aplikasikan style tersebut dengan memilih css yang sudah kita buat
sebelumnya dalam property inspector perhatikan gambar di bawah:

64
Sedangkan kalau kita lihat pada bagian isi, tulisannya masih dalam bentuk standart.
Kita ingin mengubahnya menjadi Tahoma 11 px. Perhatikan juga dalam isi tersebut
mempunyai beberapa paragraph. Untuk mempersingkat pekerjaan kita bisa
mengaplikasikan style baru pada tag paragraph <p>.
Silahkan buat style baru untuk P:

Pilih redefine HTML tag dan pilih p

Masukkan property font

65
 Masukkan property box

Klik apply dan kemudian OK. Maka sekarang tampilan anda akan terlihat seperti
berikut ini:

66
Hal terakhir yang kita lakukan adalah mengubah align dari semua table dasar menjadi
center.
Sedangkan bagian link kiri anda lihat masih berhimpit pada table. Anda bisa
menggunakan karakter spasI (&nbsp;) untuk membuatnya lebih menjorok ke kiri.

67