Modul 5 Desain dengan Dreamweaver II

Transkripsi

1 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 alem en <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

2 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. Refre sh 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= >

3 Maka setiap script yang terdapat link images/gambar.gif tersebut dianggap berada pada 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 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 mengklik icon tampilannya.. Pelajarilah setiap kode dan bandingkan dengan TIPS: Untuk mempercepat belajar html, anda bisa menggunakan tampilan code view dan design view bersamaan. Pelajarilah setiap kode dan bandingkan dengan tampilannya. Text

4 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.

5 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: Ini baris pertama paragraf pertama Ini baris ke dua paragraf pertama Sedangkan ini adalah paragraf ke dua Secara otomatis dreamweaver akan membuat tag ketika anda menekan enter saja, dan akan membuat tag 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 memblok 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.

6 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. 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

7 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.

8 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 Drag and drop 5. menggunakan a ssets 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.

9 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.

10 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. 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 . itulah kenapa untuk membuat list berikutnya kita 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.

11 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 at as atau bahkan kombinasi style dari masingmasing 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 s angat 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

12 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:

13 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.

14 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 memberik an 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 . 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 tertentu. Di bawah ini adalah contoh html untuk beberapa jenis alamat tersebut: <a href= >link menuju ke google</a> <a href= mailto:zero@unair.ac.id >mengirim ke zero@unair.ac.id </a> Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa menggunakan target= _blank <a href= 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.

15 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 discroll, 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 silahkan mulai menggambar maps pada gambar anda.

16 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 :