modul 5 desain dengan dreamweaver ii -...
TRANSCRIPT
Modul 5
Desain dengan Dreamweaver II
1.1 Tujuan a. Mahasiswa dapat membuat web dengan dreamweaver b. Mahasiswa dapat mengenal komponen dreamweaver lebih lanjut
1.2 Materi
a. Membuat Website
b. Text, Tabel c. Image d. List
e. Hyperlink 1.3 Alat dan Bahan
a. Macromedia Dreamweaver b. Page, Image
1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumnya b. Instruktur menerangkan dan menjelaskan teori dan cara kerja
c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan
1.5 Teori Membuat Website 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>.
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:
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.
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.
Refresh
Digunakan apabila kita ingin me-refresh atau me-redirect halaman (dipaksa menuju ke halaman /alamat lain) kita setelah selang waktu tertentu.
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.fav icon.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
− List − Tabel − Hyperlink
− Image maps Namun sebelum itu, mungkin muncul pert anyaan 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.
TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan design view
bersamaan dengan mengk lik 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.
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.
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.
Sebelum kita masuk ke langkah pembuatannya, perhatikan bahwa ad a 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”
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 “ ” 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:
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.
Untuk mengubah judul menjadi bertipe arial, dengan ukuran 6, dan tebal, silahkan perhatikan
tanda panah bi ru 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.
Image(gambar) format gambar untuk grafis web Ada tiga format gambar yang dapat digunakan dalam sebuah website, yaitu GIF, JPEG, d an 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 u ntuk 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:
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
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.
Drag and drop
Pilihan “relative to:” digunakan untuk menentukan alamat file yang kita ambil nantinya dicari dari
alamat dokumen ini ataukah dicari dari root. Memodifikasi gambar
Sebagaimana text, kita juga bisa menggunakan property inspector untuk mengubah atau memodifikasi 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 mengak ibatkan 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. 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 k ita menekan enter bukan
shift + enter.
Ada beberapa model tampilan untuk bullet (titik) anda bisa mengubah nya pada code view kemudian klik kanan pada kode tag <ul> kemudian pilih edit tag <ul>. Maka jendela dialog
akan muncul.
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.
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: 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
Menggunakan menu insert > table
Menggunakan shortcut ctrl + alt + T Pertama kali jendela yang muncul ketika anda memasukkan tabel adalah seperti di bawah:
Row s : 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)
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:
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.
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” 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> <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:[email protected]”>mengirim email ke [email protected] </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.
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.
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
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 .
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.
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 s ilahkan mulai menggambar maps pada
gambar anda.
1.6 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. 2. Buatlah web dengan lyaout sebagai berikut :