Buat efek teks dengan Dreamweaver MX

Penulis：Eve Cole Waktu Pembaruan：2009-05-31 21:03:30

Alat pembuatan halaman web kami yang umum digunakan, Dreamweaver MX, tidak hanya dapat membuat halaman web, tetapi juga menggunakan filter CSS untuk melakukan efek khusus sederhana pada teks atau gambar. Mari kita lihat beberapa contoh untuk melihat cara membuat teks efek khusus di Dreamweaver.

kata halo

Pertama mulai Dreamweaver, masukkan tabel 1x1 ke dalam dokumen baru, atur batas ke 0, lalu masukkan teks yang perlu diubah.

Klik "Desain→Gaya CSS" di panel mengambang di sebelah kanan untuk membuka panel mengambang ini.

Empat tombol di sudut kanan bawah panel adalah: menambah, membuat, mengedit, dan menghapus gaya CSS.

Catatan: Di Dreamweaver, filter CSS hanya dapat digunakan pada objek dengan batasan area, seperti tabel, sel, gambar, dll, tetapi tidak dapat digunakan langsung pada teks, jadi kita perlu meletakkan teks yang perlu ditambahkan dengan spesial efek di tabel terlebih dahulu, lalu terapkan gaya CSS ke tabel untuk membuat efek khusus pada teks.

Gambar 1 Gaya CSS baru

Klik tombol New CSS Style untuk memunculkan kotak dialog seperti pada Gambar 1.

Pilih "Buat gaya khusus" untuk item "Jenis", pilih "Hanya untuk dokumen ini" untuk "Ditentukan dalam", dan klik OK untuk memunculkan kotak dialog definisi gaya CSS (Gambar 2). tentukan font, ukuran font, Warna dan konten lainnya, dalam contoh ini kita memilih font menjadi skrip resmi, ukurannya menjadi 50 piksel, dan warnanya menjadi putih.

Gambar 2 Untuk menentukan gaya CSS

untuk menghasilkan efek teks, yang paling penting adalah pengaturan di panel ekstensi (Gambar 3). Semua filter CSS tercantum dalam filter di bawah "Efek Visual". teks memiliki efek tepi bercahaya. Format sintaksis filter Cahaya adalah: Cahaya(Warna=?, Kekuatan=?), yang memiliki dua parameter: Warna menentukan warna lingkaran cahaya. Anda dapat menggunakan kode heksadesimal seperti ffffff, atau kata-kata seperti Merah dan Kuning. Mewakili; Kekuatan mewakili intensitas cahaya, mulai dari 0 hingga 255. Dalam contoh ini kita mengatur warna menjadi Merah, intensitas cahaya menjadi 8, dan kemudian OK.

Gambar 3 Menyiapkan filter Glow

Selanjutnya kita terapkan gaya CSS ini ke tabel. Pindahkan kursor ke sel, klik label di sudut kiri bawah jendela dokumen untuk memilih sel, lalu klik gaya yang baru dibuat di panel gaya CSS. Saat ini, label berubah untuk menunjukkan gaya CSS tersebut telah diterapkan pada sel. Kita tidak dapat melihat perubahan di jendela dokumen. Tekan tombol F12 untuk melihat pratinjau di IE, dan efeknya akan muncul (Gambar 4).

Gambar 4 Efek kata Halo

Bagaimana dengan itu? Tidak kalah dengan efek filter di photoshop. Menempatkan beberapa kata efek khusus ini pada halaman web akan membuat halaman web jauh lebih indah, dan kita juga dapat menggunakan tombol PrintScreen untuk menangkap layar, lalu menempelkan dan menyimpannya dalam program menggambar untuk menjadikannya gambar terpisah.

kata bayangan

Ada dua filter CSS yang dapat menghasilkan efek bayangan pada teks yaitu Drowshadow dan Shadow. Efek yang dihasilkannya sedikit berbeda.

Langkah-langkah membuat shadow word pada dasarnya sama dengan membuat halo word. Anda hanya perlu memilih ulang filter pada style CSS.
Sintaks filter Drowshadow adalah sebagai berikut: DropShadow(Warna=?, OffX=?, OffY=?, Positif=?).

Diantaranya, Warna mewakili warna bayangan, dinyatakan sebagai angka heksadesimal; OffX dan OffY masing-masing mewakili jumlah penyimpangan bayangan dari posisi teks, dalam piksel; Positif adalah nilai logis, 1 mewakili penciptaan bayangan untuk semua buram elemen, 0 Mewakili penciptaan bayangan yang terlihat untuk semua elemen transparan.

Gambar 5 Efek kata bayangan

Misalnya, jika filter disetel ke DropShadow(Color=6699cc, OffX=2, OffY=2, Positive=1), efeknya akan seperti yang ditunjukkan pada Gambar 5.

Kata-kata topeng

Filter CSS juga memberi kita fungsi topeng, yang dapat mengolah bagian teks menjadi topeng. Jika gambar yang sesuai digunakan di latar belakang, efek teks berongga yang indah dapat dihasilkan.

Masukkan tabel 1x1 ke dalam jendela dokumen, klik label di sudut kiri bawah jendela dokumen untuk memilih seluruh tabel, pilih gambar yang sesuai di gambar latar belakang pemeriksa properti (seperti yang ditunjukkan pada Gambar 6), dan lalu masukkan teks yang diperlukan.

Gambar 6 Menyisipkan gambar latar belakang ke dalam tabel

Selanjutnya kita menambahkan filter Mask ke sel, langkahnya mirip dengan dua contoh sebelumnya. Pilih Mask (Color=?) di filter. Parameter ini menentukan warna mask.

Catatan: Pemilihan warna teks dalam contoh ini tidak penting, karena efek akhir teks akan berlubang dan warna tidak akan ditampilkan.

Gambar 7 Setelah efek kata topeng

diatur, terapkan gaya CSS ini ke sel, lalu tekan tombol F12 untuk melihat efeknya (Gambar 7).

Catatan: Gambar latar belakang ditambahkan untuk seluruh tabel, sesuai dengan tag <table>, sedangkan gaya CSS ditambahkan ke sel, yaitu tag <td>.

Kata-kata yang dinamis

Untuk membuat kata-kata dinamis, kita perlu menggunakan filter Blur, yang digunakan untuk menghasilkan efek blur. Format sintaksisnya adalah Blur(Add=?, Direction=?, Strength=?). Parameter Tambah adalah nilai Boolean. Secara umum, ketika filter digunakan untuk gambar, dibutuhkan 0, dan ketika digunakan untuk teks, dibutuhkan 1; Arah mewakili arah buram, dan satuannya mewakili Kekuatan nilai gerakan blur, dan satuannya adalah piksel. Misalnya, jika kita mendefinisikan Blur(Tambah=1, Arah=90, Kekuatan=150), Anda dapat melihat efeknya seperti yang ditunjukkan pada Gambar 8 di pratinjau.

Gambar 8 Efek Kata Dinamis Teman

Faktanya, banyak filter di CSS yang juga bisa digunakan untuk memodifikasi gambar. Misalnya saja filter Blur yang bisa menghasilkan efek blur pada gambar. Jika kita dapat menerapkan filter ini dengan terampil, terkadang kita dapat membuat efek gambar yang cukup bagus tanpa perangkat lunak pengolah gambar profesional.