Dua tips menerapkan style sheet CSS di DreamWeaver
Penulis：Eve Cole
Waktu Pembaruan：2009-05-31 21:17:47
1. Hapus garis bawah hyperlink dan ubah warnanya saat mouse mengarahkan kursor ke hyperlink:
Secara default, hyperlink di halaman web yang dirancang dengan DreamWeaver digarisbawahi, sehingga tidak terlihat terlalu indah. Untuk menghilangkan garis bawah yang mengganggu ini, metode yang diperkenalkan di banyak surat kabar dan majalah adalah dengan menambahkan sepotong kode ke kode sumber HTML secara manual. Faktanya, menghapus garis bawah pada tautan di DreamWeave sangatlah mudah. Pertama, buat tautan acak di Dokumen Windows DreamWeaver. Anda dapat melihat bahwa tautan ini akan digarisbawahi. Bagaimana cara menghilangkan garis bawah ini?
1. Klik "Teks" |. "Gaya CSS" |. "Edit Style Sheet..." pada bilah menu (atau langsung tekan tombol pintas Ctrl+shift+E) untuk membuka jendela dialog Edit Style Sheet.
2. Klik "Baru", lalu di kotak dialog "Gaya Baru", klik tombol "Gunakan Pemilih CSS".
3. Ketik a di kolom Selector, lalu klik OK.
4. Kemudian muncul kotak dialog "CSS Style Definition". Pada dekorasi kelas Type, centang none, lalu klik OK, lalu klik Done. Anda akan segera melihat bahwa garis bawah tautan telah hilang di Dokumen Windows. Jadi bagaimana Anda membuat tautan berubah warna ketika mouse diarahkan ke atasnya? Ulangi langkah satu dan dua di atas. Lalu klik panah drop-down di samping Selector, pilih "a:hover", dan klik OK. Di kotak dialog "Definisi gaya untuk: hover" yang muncul, pilih warna apa pun dalam warna kelas Tipe (misalnya, pilih merah), lalu klik OK, lalu klik Selesai untuk menyelesaikan. Tekan F12 untuk melihat pratinjau dan letakkan mouse pada tautan. Apakah tautannya berubah menjadi merah? Jika pada kotak dialog "Definisi gaya untuk a: hover" tadi, pada kelas Backgroud, Anda memilih warna backgroud menjadi hijau, maka ketika Anda meletakkan mouse pada hyperlink, tidak hanya link tersebut yang akan berubah menjadi merah, Dan disana juga akan menjadi latar belakang hijau. Faktanya, melalui kotak dialog definisi gaya CSS tadi, Anda juga dapat memperoleh lebih banyak efek khusus. Teman yang tertarik mungkin ingin memikirkannya.
2. Buat style sheet CSS eksternal yang dapat digunakan kembali. Setelah menggunakan DreamWeaver untuk membuat style CSS di halaman web tertentu, jika Anda ingin menerapkan style tersebut ke halaman web lain, Anda tidak perlu membuat ulang style CSS tersebut saat Anda membuat file lembar gaya CSS eksternal (lembar gaya CSS eksternal), Anda dapat memanggil gaya dalam file lembar gaya ini sesuka hati di masa mendatang. Untuk memudahkan pengelolaannya, pertama-tama buatlah folder baru di folder tempat situs tersebut berada, bernama CSS, yang khusus digunakan untuk menempatkan file style sheet eksternal (ekstensinya css).
1. Tekan Ctrl+shift+E di Jendela Dokumen untuk membuka jendela dialog Edit Style Sheet. 2. Klik "link".
3. Pada kotak dialog pop-up Link External Style Sheet, klik BROWSE dan temukan folder CSS yang baru saja Anda buat.
4. Pada kolom "File Name" pada jendela Select Stylesheet File, ketik *.css (*bisa nama apa saja). Perlu diketahui bahwa sebenarnya tidak ada file style sheet di folder CSS saat ini ketik di kolom "Nama File" akan menjadi nama file style sheet eksternal baru. Misalnya, ketik title.css, lalu klik Pilih |.
5. Pada jendela dialog Edit Style Sheet, title.css (link) akan ditambahkan, klik dua kali.
6. Di jendela pop-up "title.css", klik "Baru".
7. Pada kotak dialog “New Style”, klik tombol “Make Custom Style (class)”. 8. Ketikkan nama pada kolom Name, misalnya myheadline, lalu klik OK.
9. Pada kotak dialog "Definisi gaya untuk .myheadline in title.css" berikut, buat berbagai pengaturan seperti font dan warna, dan klik OK setelah selesai. Jika Anda ingin membuat style baru, klik "Baru" lagi, ulangi langkah 6, 7, 8, dan 9, dan terakhir klik "simpan" | "selesai", dan file style sheet eksternal title.css akan dibuat. Semua gaya di title.css akan dicantumkan di submenu "TEXT" |. "CSS Styles" pada bilah menu. Jika Anda ingin memanggil title.css ini di halaman web lain, cukup ulangi langkah 1 hingga 3 di atas, lalu masukkan title.css di kolom "Nama File" pada jendela Select Stylesheet File. Klik "pilih" |. "ok" |. "selesai", semua gaya di title.css akan muncul di submenu "Teks" |. "Gaya CSS" pada bilah menu halaman web, dan Anda akan dapat menerapkannya ke halaman web ini gaya ini.
