1 Modul 5 Desain dengan Dreamweaver II 1.1 Tujuan a. Mahasiswa dapat membuat web dengan dreamweaver b. Mahasiswa dapat mengenal komponen dreamweaver l...
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 sebelumny a 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 det ail 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 dan elemen . Elemen 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 s atu tag dalam elemen y ang penting adalah <meta> yang berfungsi untuk menampilkan informasi dari sebuah halaman. Tag ini penting sebagai pemberi informasi bagi search engine untuk mengkat alog-kan situs. Dalam dreamweaver kita tidak perlu mengetik kode ini secara manual. Kita bisa membuatnya dengan object .
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 y ang 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 kat a 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 key words dan description ada beberapa kat a yang sama. Walaupun sebenarnya google.com tetap akan melist situs kita walaupun tidak ada tag metany a, namun belum tentu bagi search engine yang lain.
Refre sh Digunakan apabila kita ingin me-refres h atau me-redirect halaman (dipaksa menuju ke halaman /alamat lain) kita setelah selang waktu tertentu. Base Tag 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 dengan content:
Maka setiap script yang t erdapat link “images/gambar.gif” t ersebut 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 menggunak an ini karena akan terbent ur juga mas alah kompatibilitas browser. Link Ini berguna untuk menghubungk an dok umen 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 Setelah anda menentukan isi dari elemen head ada, sekarang kita belajar pada daerah yang berhubungan dengan masalah tampilan. Yang akan kita pelajari nantinya adalah tentang: − Text − Gambar − List − Tabel − Hyperlink − Image maps Namun s ebelum it u, mungkin muncul pert anyaan bagaimana saya bisa mengatur property dari tag itu sendiri?... caranya gampang. Sek arang coba anda rubah tampilan kerja menjadi code and design view dengan mengklik Pada jendela code, klik kanan pada tag dan pilih edit tag 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 menggunak an tampilan code view dan design view bersamaan dengan mengk lik icon tampilannya.
. Pelajarilah setiap k ode dan bandingk an dengan
TIPS: Untuk mempercepat belajar html, anda bis a menggunakan tampilan code view dan design view bersamaan. Pelajarilah setiap kode dan bandingkan dengan tampilannya. Text
Apabila kita bekerja dengan dreamweaver, mak a 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 ak an 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 pert ama 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 s udah 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
2.
Gambar 25. Memasukkan title dok umen ketik tulisan pada paragraf pertama baris pertama kemudian shift + enter. Lanjutkan sampai pada baris terakhir. Ketika baris terakhir sudah selesai, langsung tekan enter.
3. 4.
5.
Ketika anda menekan shift+ent er, berarti anda membuat baris baru, sedangkan jika anda hanya menek an ent er berarti anda membuat paragraf baru. Cont oh html di bawah ini akan menjelaskan pernyataan di atas:
Ini baris pertama paragraf pertama< br> 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 t erbentuk baris dan/at au paragraf. tulis kalimat pada paragraf ke dua kemudian tekan enter. sebelum kita menulis k ata 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 s pasi dengan keyboard maka yang tertampil hanya satu s pasi saja. Hal ters ebut bisa diak ali 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 ins ert bar. Dan menekannya beberapa kali
Gambar 26. memasukkan spasi dalam desain kita. Kemudian lanjutkan dengan menulis isi paragraf ke tiga tersebut. 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.
6.
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 penjelasanny a. dengan cara seperti langkah 5 diatas, silahkan merubah property text -text lain. Yang perlu anda rubah t entu saja “J. David Irwin” menjadi bold berwarna merah, “Auburn University” menjadi italic, dan paragraf 1 align= center. Dibawah ini mungkin bisa dijadikan referensi unt uk bisa mengubah hal tersebut.
Image(gambar) format gambar untuk grafis web Ada tiga format gambar yang dapat digunakan dalam s ebuah website, yaitu GIF, JPEG, d an P NG. Masing-masing mempunyai k arakter dan kemampuan sendiri-sendiri. Untukk bisa mambuat situs yang efisien, dalam artian mempunyai sedikit waktu download tanpa mengorbank an 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 y ang 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 unt uk file dangan ribuan warna. Biasa digunakan untuk gambar-gambar fot o. 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 berikut nya. Memasukkan gambar ke dalam dokumen Untuk memasukkan gambar ke dalam dokumen, ad beberapa cara yang dapat kita lakukan, yaitu: 1. dengan meletakkan curs or pada tempat yang ingin kita taruh gambar, kemudian dalam menu bar kita pilih insert > image 2. dengan meletakkan curs or pada tempat yang ingin kita tempati gambar kemudian ctrl + alt + I 3. 4.
klik pada seret icon yang terdapat pada insert bar menuju ke tempat yang diinginkan. mencari gambar di site panel kemudian mny eret nya 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 k omput er anda walaupun tidak berada dalam folder situs yang kita definisikan sebelumnya.
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 menggunak an 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 mengat ur kedua-duanya. Peringatan! : disarank an untuk tidak mengatur uk uran gambar k arena dapat mengak ibatk an tampilannya menjadi pecah. Tips : untuk bisa mengatur uk uran gambar menggunak an mouse dengan proporsional, tek anlah tombol shift k etik a menyeret tanda panah hijau. Sedangk an untuk mengembalik an uk uran sebenarnya anda bisa menggunak an tombol “reset size” V Space dan H space digunakan untuk mengatur jarak tepi gambar Border digunak an 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. Usahak an 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 ters ebut 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 ters ebut kemudian baru kita klik icon bullet pada property inspector. Peringatan: yang dapat dibentuk menjadi list hanyalah paragraf, yaitu sesuatu yang berada pada tag < p>. itulah k enapa untuk membuat list berik utnya k ita menek an enter buk an shift + enter.
Ada beberapa model tampilan unt uk bullet (titik) anda bisa mengubah nya pada code view kemudian klik kanan pada kode tag
kemudian pilih edit tag
. 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 curs or pada s alah satu list kemudian mengklik tombol li st 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 masing masing jenis list di atas. Perhatikan contoh berikut:
Tabel Tabel merupak an 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. E fisiensi 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
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 Colum s : 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 sat uan persen, maka tabel kita bisa berubah-ubah panjangnya menurut browser. S edangkan jika kita memilih satuan pixel, maka panjang tabel kita tetap menurut yang kita isikan. Border adalah bingk ai dari tabel kita (tanda panah hitam) Cell padding : adalah jarak antara dinding sel dengan sesuatu yang diisikan dalam s el ters ebut (tanda warna biru) Cell spacing : jarak antar sel (t anda warna merah)
Menyeleksi elemen dalam tabel Untuk menjelaskan bab ini silahkan buat tabel 3 x 3 dengan property default. Berikut ini cont oh 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 melakuk annya dengan mengklik pada daerah di luar t abel k emudian meny eret nya 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 s elector yang t erdapat di kiri bawah di atas property inspector berubah menjadi beberapa t ombol dengan t ulisan tag-tag tertentu. Dalam pekerjaan saya terlihat seperti ini:
3.
Tombol tersebut merupakan alat untuk mempermudah kita memilih tag -tag yang terdapat pada tampilan. Coba klik tombol ters ebut dari yang paling kanan, maka yang terseleksi adalah tampilan hasil dari tag
, begitu seterus nya klik pada
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 Untuk Untuk Untuk Untuk
mengubah ukuran tabel kita bisa menggunakan kotak “W” dan “H” mengubah warna background kita bisa gunakan “Bg Color” mengubah warna bingkai (border) kita bisa gunakan “B rdr color” memberik an background dengan obyek tertentu kita bisa menggunakan “Bg Image”. mengatur penempatan tabel kita bisa gunak an “Align”
Hyperlink Link merupakan elemen terpenting dalam sebuah situs. Elemen ini merupakan jembatan untuk berpindah dari satu halaman ke halaman yang lain dari t opik satu ke topik yang lain dalam satu halaman, at au bahkan ke halaman web yang lain atau ke alamat email. Di bawah ini adalah sintak penulisan html untuk membuat link text atau gambar Misalkan untuk membuat link menuju ke halaman kontak.html pada text tertentu mak a htmlya adalah: text tertentu Sedangkan untuk memberikan link pada gambar t entu saja didalam tag terdapat tag 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: link menuju ke googlemengirim email ke [email protected] Sedangkan untuk membuka alamat link ke jendela browser yang baru kita bisa menggunakan target=”_blank ” link menuju ke google Untuk membuat link di dreamweaver s angatlah 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 ak an 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 unt uk menuju ke t empat 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 berik ut: 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 gunak an klik target seret dan arahkan ke tanda . 4. sekarang anda telah mempunyai link menuji ke tempat tertentu dalam halaman anda. Tekan F12 untuk melihatny a 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 uk uran sama dengan gambar buk an? Nah dengan image maps kita bisa membuat area link tidak hanya kotak, namun bisa berupa elips atau bangun tak beraturan. Selain kemampuan t ersebut, 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 mas ukkan 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 membant u mewujudkan cita-cita lembaga tersebut. Aplikasikanlah semua yang sudah dipelajari sebelumnya. 2. Buatlah web dengan lyaout sebagai berikut :
