Bagaimana Menggunakan Panel Teks di Panel Properti CSS Dreamweaver - dummies

Panel Teks Dreamweaver menampilkan kumpulan opsi yang mengontrol tampilan teks di halaman Anda. Anda dapat mengakses opsi Text panel dengan menggulir panel Properti sampai Anda berada di bawah pilihan Layout, atau dengan mengklik ikon T di bagian atas panel.

Panel Teks berisi pilihan pemformatan berikut:

• Warna: Atur warna teks. Anda bisa mengklik warna dengan baik dan memilih warna, gunakan eyedropper untuk mencicipi warna apapun di layar, atau masukkan kode warna heksadesimal di kolom warna. Jika Anda memasukkan kode warna heksadesimal, sertakan tanda pound awal (#).

• Font-Family: Tentukan keluarga font atau rangkaian keluarga. Anda dapat menambahkan font dari hard drive lokal Anda atau dari Adobe TypeKit dengan memilih Manage Fonts di bagian bawah daftar drop-down dan meluncurkan kotak dialog Manage Fonts.

  

• Font-Style: Masukkan Normal, Italic, atau Oblique. Namun, miring dan miring jarang terlihat di browser web, jadi tetap miring dengan huruf miring kecuali Anda punya alasan khusus untuk tidak melakukannya.

• Font-Varian: Ubah teks menjadi huruf kecil. Uji desain Anda dengan hati-hati karena atribut ini tidak didukung oleh semua browser.

• Font-Weight: Buat teks tampak tebal dengan memilih Bold atau Bolder dari daftar drop-down. Anda juga bisa memasukkan angka antara 100 dan 900 untuk lebih tepat mengontrol seberapa tebal teks itu muncul. Untuk menghapus format tebal, pilih Normal atau Lighter.

• Font-Size: Tentukan ukuran teksnya. Anda dapat memilih ukuran numerik tertentu atau ukuran relatif. Pilihan ukuran adalah pixel (px), titik (pt), pica (pc), persen (%), em, rem, ex, dan ch. Pixel, ems, dan persentase adalah opsi yang paling umum digunakan untuk ukuran teks.

• Garis-Tinggi: Tentukan tinggi garis tempat teks ditempatkan. Sama seperti ukuran teks, Anda dapat menentukan tinggi garis dengan berbagai cara, termasuk piksel, piksel, dan persentase. Ini adalah praktik yang baik di web untuk menambahkan tinggi garis karena menambah ruang di sekitar teks Anda membuatnya lebih mudah dibaca di layar komputer.

• Text-Align: Kiri sisipkan, kanan sejajar, tengah, atau membenarkan teks Anda dengan mengklik ikon yang sesuai. Ikon pertama, untuk Inherit, adalah defaultnya. Misalnya, Anda dapat memusatkan teks di footer halaman web Anda dengan menyertakan Text-Align set to Center dalam definisi gaya yang Anda terapkan pada tag di bagian bawah halaman.

• Text-Decoration: Tentukan apakah teks digarisbawahi, digarisbawahi, ditampilkan dengan strikethrough, atau ditampilkan dengan efek kedip.Anda juga dapat memilih None, yang sering digunakan untuk menghapus garis bawah dari teks yang terhubung.

• Text-Indent: Tentukan jumlah teks yang akan diindentasikan dari sisi kiri halaman dengan memasukkan nomor di salah satu opsi ukuran, seperti piksel, ems, atau persentase.

Mengapa begitu banyak font?

Anda mungkin pernah mendengar bahwa Anda sekarang dapat menggunakan font yang Anda inginkan di halaman web Anda, berkat versi terbaru dari Cascading Style Sheets, CSS3. Pernyataan ini benar namun dengan beberapa batasan: Anda harus memiliki hak legal untuk menerbitkan font, dan fontnya harus dihosting di server web.

Untuk membantu memastikan bahwa teks Anda muncul seperti yang Anda inginkan, Dreamweaver menyertakan koleksi font yang paling umum di komputer Windows dan Macintosh. Font ini dikelompokkan dalam keluarga, seperti

• Gotham, Helvetica Nue, Helvetica, Arial, sans serif

• Cambria, Teks Hoefler, Liberation Serif, Times, Times New Roman, Times, dan serif

Anda dapat membuat koleksi font Anda sendiri menggunakan kotak dialog Manage Fonts, yang dapat diakses dengan memilih opsi Manage Fonts di bagian bawah daftar drop-down Font-Family di panel Teks di panel Perancang CSS.

Bagian Text-Shadow pada panel teks

Bagian Text-Shadow pada panel Teks menyediakan alat untuk menambahkan bayangan teks, salah satu properti CSS terbaru yang termasuk dalam definisi CSS3. Pilihan yang paling populer adalah sebagai berikut:

• H-shadow: Tambahkan bayangan ke teks Anda pada sumbu horizontal. Pertama pilih opsi ukuran, lalu masukkan nomor di kolom. Misalnya, masukkan 2px, untuk menambahkan bayangan horizontal yang lebar 2 pixel.

• V-shadow: Tambahkan bayangan ke teks Anda pada sumbu vertikal. Pertama pilih opsi ukuran, lalu masukkan nomor di kolom.

• Blur: Kontrol jumlah blur di bawah bayangan. Semakin besar jumlahnya, semakin banyak bayangan yang terbentang, atau kabur.

• Warna: Masukkan kode warna heksadesimal untuk menentukan warna bayangan, atau gunakan eyedropper untuk mencicipi setiap warna pada layar.

  

Fitur di bagian bawah panel Teks, yang tidak umum seperti pilihan panel Teks lainnya, adalah sebagai berikut:

• Text-Transform: Ubahlah huruf besar teks Anda. Pilihan adalah Capitalize, huruf besar, dan huruf kecil. Klik ikon yang sesuai untuk menyetel properti ini.

• Letter-Spacing: Mendefinisikan jumlah spasi putih yang disisipkan di antara huruf. Pilihan ukuran adalah pixel (px), titik (pt), pica (pc), persen (%), em, rem, ex, dan ch.

• Word-Spacing: Mendefinisikan jumlah spasi putih yang disisipkan di antara kata-kata. Pilihan ukuran adalah pixel (px), titik (pt), pica (pc), persen (%), em, rem, ex, dan ch. (Lihat sidebar sebelumnya "Membandingkan opsi ukuran CSS.")

• White-Space: Beritahu browser bagaimana menangani jeda baris dan spasi di blok teks. Pilihan Anda adalah Inherit, Normal, Nowrap, Pre, Pre-line, atau Pre-wrap. Nowrap sangat berguna karena mencegah unsur dipisahkan jika harus membungkus agar sesuai dengan jendela browser atau wadah lainnya.

• Vertikal-Sejajarkan: Sejajarkan elemen garis-garis, seperti teks dan gambar, sehubungan dengan elemen yang mengelilinginya. Anda dapat menetapkan nilai numerik atau memilih Baseline, Sub, Super, Top, Text-Top, Middle, Bottom, dan Text-Bottom.