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:
Tutorial dreamweaver Tinjauan html dasar secara umum sekali 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 di atas misalnya. Elemen tersebut diawali dengan tanda “”, kemudian ditutup dengan “”. 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. Tinjauan html dasar secara umum sekali Kemudian bandingkan hasilnya jika dilihat di browser
5
Gambar 2. 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 sendirisendiri. 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. Jendelajendela 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 tooltool 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 kode dan bandingkan dengan tampilannya. . Pelajarilah setiap
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 “ ” 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 elemenelemen 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 diinginkan. yang terdapat pada insert bar menuju ke tempat yang
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 paragrafparagraf 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 terblok, 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 gambargambar 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 kesatu 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 ( ) untuk membuatnya lebih menjorok ke kiri.
67
</div><br />
<!-- google_ad_section_end -->
<script type="text/javascript"><!--
google_ad_client="pub-3704690542215302";
google_ad_host="pub-7343870454215956";
google_ad_width=728;
google_ad_height=90;
google_ad_format="728x90_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="005279";
google_color_url="999999";
google_color_text="333333";
google_ui_features="rc:0";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
</div>
</div>
<script type="text/javascript">
getEl('viewer-area').style.width = getEl('doc-info').clientWidth + 'px';
</script>
<div class="rCol">
<div class="user-box-header">Shared by: <a href="/profile/indrasdi">didiek indrasdhi</a>
</div>
<div class="user-box">
<div class="user-info">
<div class="owner-photo">
<div class="shadowContainer">
<div class="shadowWrap1">
<div class="shadowWrap2"><a href="/profile/indrasdi" title="click here to view user's profile"><img src="http://content1.docstoc.com.s3.amazonaws.com/images/indexpagephoto/indrasdi10233743.jpg" alt="user photo" /></a></div>
</div>
</div>
</div>
<div class="user-details">
<div class="owner-fullname">didiek indrasdhi</div>
<div class="owner-title">A.Md</div>
<div class="owner-company">Depok</div>
</div>
<a class="contact" onclick="openContact()">contact me</a>
<div id="contactPane">
<textarea id="txtContactMe" name="txtContactMe" class="txt-contactme" rows="4" cols="25" disabled="true">In order to send a message you need to be logged in.</textarea>
<a href="#" id="btnSendMsg" onclick="return false;" ><img src="http://i.docstoccdn.com/doc/theme1/btn-submit.png" alt="submit" disabled="true"/></a>
<a href="#" onclick="return false;" ><img src="http://i.docstoccdn.com/doc/theme1/btn-clear.png" alt="clear" disabled="true" /></a>
</div>
</div>
</div>
<div class="docs-box-header">Other docs by <a href="/profile/indrasdi">didiek indrasd...</a></div><div class="docs-box">
<div class="doc">
<a href="/docs/10058230/AdSense-Black-Hat-Edition" class="thumb" title="10058230"></a>
<div class="titleStats"><a class="title" href="/docs/10058230/AdSense-Black-Hat-Edition">AdSense Black Hat Edition</a>
<div class="stats">
Views: 129 | Downloads: 14</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/10058169/Sekilas-Forex" class="thumb" title="10058169"></a>
<div class="titleStats"><a class="title" href="/docs/10058169/Sekilas-Forex">Sekilas Forex</a>
<div class="stats">
Views: 88 | Downloads: 9</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9782803/Muka-Muda-Menjadi-Tua-dgn-Photoshop" class="thumb" title="9782803"></a>
<div class="titleStats"><a class="title" href="/docs/9782803/Muka-Muda-Menjadi-Tua-dgn-Photoshop">Muka Muda Menjadi Tua dgn Photoshop</a>
<div class="stats">
Views: 283 | Downloads: 27</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9699226/Pengumuman-PLPG-Tahun-2009" class="thumb" title="9699226"></a>
<div class="titleStats"><a class="title" href="/docs/9699226/Pengumuman-PLPG-Tahun-2009">Pengumuman PLPG Tahun 2009</a>
<div class="stats">
Views: 5046 | Downloads: 62</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9699046/Ketentuan-PLPG-2009" class="thumb" title="9699046"></a>
<div class="titleStats"><a class="title" href="/docs/9699046/Ketentuan-PLPG-2009">Ketentuan PLPG 2009</a>
<div class="stats">
Views: 1141 | Downloads: 7</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9696504/Photo-Manipulate-a-Falling-Angel" class="thumb" title="9696504"></a>
<div class="titleStats"><a class="title" href="/docs/9696504/Photo-Manipulate-a-Falling-Angel">Photo Manipulate a Falling Angel</a>
<div class="stats">
Views: 74 | Downloads: 6</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9692310/Pengumuman-Hasil-Penilaian-Portofolio-Tahun-2009--Kab-Sleman" class="thumb" title="9692310"></a>
<div class="titleStats"><a class="title" href="/docs/9692310/Pengumuman-Hasil-Penilaian-Portofolio-Tahun-2009--Kab-Sleman">Pengumuman Hasil Penilaian Portofolio Tahun 2009 Kab Sleman </a>
<div class="stats">
Views: 1832 | Downloads: 37</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/9662143/Create-sexy-cyborg" class="thumb" title="9662143"></a>
<div class="titleStats"><a class="title" href="/docs/9662143/Create-sexy-cyborg">Create sexy cyborg </a>
<div class="stats">
Views: 345 | Downloads: 6</div></div>
<div class="clr"></div>
</div>
</div>
<script type="text/javascript"><!--
google_ad_client="pub-3704690542215302";
google_ad_host="pub-7343870454215956";
google_ad_width=250;
google_ad_height=250;
google_ad_format="250x250_as";
google_ad_type="text";
google_color_border="FFFFFF";
google_color_bg="FFFFFF";
google_color_link="005279";
google_color_url="999999";
google_color_text="333333";
google_ui_features="rc:0";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<!-- google_ad_section_start -->
<div class="docs-box-header">Related docs</div><div class="docs-box">
<div class="doc">
<a href="/docs/20336857/caad-modul-dreamweaver" class="thumb" title="20336857"></a>
<div class="titleStats"><a class="title" href="/docs/20336857/caad-modul-dreamweaver">caad-modul dreamweaver</a>
<div class="stats">
Views: 0 | Downloads: 0</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/3351820/Flash-MX-Action-Script-For-NewBe" class="thumb" title="3351820"></a>
<div class="titleStats"><a class="title" href="/docs/3351820/Flash-MX-Action-Script-For-NewBe">Flash MX Action Script For NewBe</a>
<div class="stats">
Views: 1845 | Downloads: 248</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/10499390/MODUL-PEMBELAJARAN-FIQIH---DIYAT" class="thumb" title="10499390"></a>
<div class="titleStats"><a class="title" href="/docs/10499390/MODUL-PEMBELAJARAN-FIQIH---DIYAT">MODUL PEMBELAJARAN FIQIH - DIYAT</a>
<div class="stats">
Views: 504 | Downloads: 27</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/8884704/EGS-Modul-45-Systeme" class="thumb" title="8884704"></a>
<div class="titleStats"><a class="title" href="/docs/8884704/EGS-Modul-45-Systeme">EGS. Modul 45-Systeme</a>
<div class="stats">
Views: 28 | Downloads: 1</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/11016427/Networking" class="thumb" title="11016427"></a>
<div class="titleStats"><a class="title" href="/docs/11016427/Networking">Networking</a>
<div class="stats">
Views: 108 | Downloads: 24</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/6050086/Modul" class="thumb" title="6050086"></a>
<div class="titleStats"><a class="title" href="/docs/6050086/Modul">Modul</a>
<div class="stats">
Views: 1804 | Downloads: 146</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/8428784/modul-merencanakan-kebutuhan-dan-spesifikasi" class="thumb" title="8428784"></a>
<div class="titleStats"><a class="title" href="/docs/8428784/modul-merencanakan-kebutuhan-dan-spesifikasi">modul merencanakan kebutuhan dan spesifikasi</a>
<div class="stats">
Views: 2329 | Downloads: 181</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/3360915/modul" class="thumb" title="3360915"></a>
<div class="titleStats"><a class="title" href="/docs/3360915/modul">modul</a>
<div class="stats">
Views: 339 | Downloads: 54</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/20489574/PRAKTIKUM-JARINGAN-KOMPUTER-Modul-5-(-QMail-)-Kelompok" class="thumb" title="20489574"></a>
<div class="titleStats"><a class="title" href="/docs/20489574/PRAKTIKUM-JARINGAN-KOMPUTER-Modul-5-(-QMail-)-Kelompok">PRAKTIKUM JARINGAN KOMPUTER Modul 5 ( QMail ) Kelompok</a>
<div class="stats">
Views: 5 | Downloads: 3</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/18777990/ccna-1-–-modul-6-by-ijaa" class="thumb" title="18777990"></a>
<div class="titleStats"><a class="title" href="/docs/18777990/ccna-1-–-modul-6-by-ijaa">ccna 1 – modul 6 by ijaa</a>
<div class="stats">
Views: 25 | Downloads: 1</div></div>
<div class="clr"></div>
</div>
<div class="doc">
<a href="/docs/2011674/MODUL-WORD" class="thumb" title="2011674"></a>
<div class="titleStats"><a class="title" href="/docs/2011674/MODUL-WORD">MODUL WORD</a>
<div class="stats">
Views: 611 | Downloads: 90</div></div>
<div class="clr"></div>
</div>
</div>
<!-- google_ad_section_end -->
<div class="img-ad"><a href="/docs/AdTracker.ashx?adID=337&docID=9696828&url=http%3a%2f%2fwww.docstoc.com%2fupload" rel="nofollow" onclick="adClick('Docstoc, Inc. [en] ','Docstoc Multi-lingual Upload Ad','9696828')" ><img src="http://i.docstoc.com/ads/doccash ad document - final version.jpg" alt=""></a></div>
</div>
</div>
</div>
<div class="cls"></div><br />
<!-- google_ad_section_start(weight=ignore) -->
<div id="footer-wrap">
<div id="footer">
<div class="l-cap"></div>
<div class="inner">
<dl>
<dt>About:</dt>
<dd><a href="/about/" rel="nofollow">What is Docstoc?</a> | <a href="javascript:void window.open('/popterm.aspx?page_id=15','TC','width=800,height=500,menubar=0,location=0,resizable=1,scrollbars=1,status=0')" rel="nofollow">Docstoc Terms of Service</a> | <a href="javascript:void window.open('/popterm.aspx?page_id=102','TC','width=800,height=500,menubar=0,location=0,resizable=1,scrollbars=1,status=0')" rel="nofollow">DocStore Terms of Service</a> | <a href="javascript:void window.open('/popterm.aspx?page_id=22','TC','width=800,height=500,menubar=0,location=0,resizable=1,scrollbars=1,status=0')" rel="nofollow">Privacy Policy</a> | <a href="/FAQ/" rel="nofollow">FAQs</a></dd>
</dl>
<dl>
<dt>Links:</dt>
<dd><a href="http://blog.docstoc.com/" onclick="outbound('blog.docstoc.com')">Docstoc Blog</a> | <a href="https://www.docstoc.com/pro/" rel="nofollow">Join Pro</a> | <a href="/requests/" rel="nofollow">Requests</a> | <a href="/docsters/">Docsters</a> | <a href="/upload/" rel="nofollow">Upload</a> | <a href="/User/cmsstatic.aspx?page_id=100" rel="nofollow">DMCA Guidelines</a> | <a href="/DMCA/" rel="nofollow">DMCA Notification</a> | <a href="http://platform.docstoc.com/" rel="nofollow">Docstoc API</a> | <a href="/feeds/rssfeed.aspx" rel="nofollow">RSS Feeds</a> <a href="/feeds/rssfeed.aspx" rel="nofollow"><img src="/i/ico/rss-sm.gif" alt="RSS Feeds" /></a></dd>
</dl>
<dl>
<dt>Contact:</dt>
<dd><a href="/contact/" rel="nofollow">Contact Us</a> | <a href="http://docstoc.suggestionbox.com/" rel="nofollow">Suggest Features</a> | <a href="/jobs/" rel="nofollow">Join Our Team</a></dd>
</dl>
<dl>
<dt>Share:</dt>
<dd><a href="/Embed-Documents/">Embed Documents</a> | <a href="/OneClick/">Docstoc OneClick</a> | <a href="/Sync/">Docstoc Sync</a> </dd>
</dl>
</div>
<div class="r-cap"></div>
<div class="copyright">© Docstoc 2009. All rights reserved.</div>
</div>
</div>
<!-- google_ad_section_end -->
<br />
</div>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker ='';
if (_gat && _gat!=null && _gat!=undefined){
pageTracker = _gat._getTracker("UA-1289929-1");
pageTracker._trackPageview();
}
</script>
<script type="text/javascript"> recordEndTime(); makeDD('ddTarget', 'ddDocuments', 'top'); makeDD('ddTargetMyDocs', 'ddMyDocs', 'top'); makeDD('ddTargetMyColl', 'ddMyColls', 'top');</script>
<script type="text/javascript">
//<![CDATA[
var CurrentUsername = '';
var CurrentUserID = '-10';
DocumentID = 9696828;DocumentUrl='http://www.docstoc.com/docs/9696828/Modul-Dreamweaver-MX';DocumentOwnerID='1159305';DocumentOwnerUsername='indrasdi';DocumentFilename='moduldreamweaverMX.doc';DocumentType='doc';DocumentTitle='Modul Dreamweaver MX';DocumentCategoryID=5;DocumentSubCategoryID=0;DocumentError=0;DocumentRotation=0;DocumentSubSubCategoryID=0;//]]>
</script>
<!-- Revenue Science API -->
<script src="http://js.revsci.net/gateway/gw.js?csid=K08784"></script>
<script>
DM_addEncToLoc("pid","DOCS");
DM_addEncToLoc("category","5");
DM_addEncToLoc("sc_id","0");
DM_addEncToLoc("sc2_id","0");
DM_tag();
</script>
<!-- Revenue Science API -->
<script type="text/javascript">
//<![CDATA[
adView('Docstoc, Inc. [en] ','Docstoc Multi-lingual Upload Ad','9696828');
//]]>
</script>
</form>
</body>
</html>