Pelajari cara membuat Web dengan Adobe Dreamweaver (Part 4)

Tambahkan CSS baru

Kami sekarang berlatih menerapkan gaya ke berbagai tag.

Klik tombol Split untuk menggunakan dua jendela secara bersamaan, jendela kode dan jendela desain.

Posisikan kursor dan klik pada paragraf kedua, yaitu paragraf dengan teks Desain Web berbunyi … “

Di jendela Properti, klik tombol CSS. Kemudian ganti Font dari menu drop-down dengan: Arial, Helvetica, Sans-Serif.

Kotak dialog Aturan CSS Baru akan segera terbuka. Di area Pilihan Jenis, pilih Tag.

Di bagian Nama Pemilih, p ditulis secara otomatis. Klik OK untuk menyelesaikan.

jasa pembuatan website

Kembali ke jendela Properties. Pada jendela Properties Anda akan melihat mode CSS dengan aturan target: p. Kami sekarang mengubah ukuran teks menjadi 16 px, warna ke # 333 (abu-abu gelap) dan perataan ke Justifiant (diratakan dari kiri ke kanan).

Hasilnya adalah bahwa kita sekarang melihat dua paragraf di jendela desain dalam artikel yang kita tulis, yang ditampilkan dalam font, ukuran, warna, dan orientasi yang berbeda, tergantung pada perubahan yang dilakukan pada panel Properties.

Di jendela kode kita juga melihat gaya-p di bawah gaya-h1:

Saat ini kita dapat menyimpan file ini. Klik menu File> Save.

Bekerja dengan kode CSS

Dalam penjelasan sebelumnya, kita tahu kode CSS dan HTML. Kita juga tahu bahwa menulis kode CSS berbeda dari kode HTML. CSS tidak menggunakan tanda kurung siku, sedangkan tanda kurung kotak digunakan untuk menulis tag HTML. contoh:

Perbedaannya adalah bahwa CSS sebenarnya adalah bagian atau bagian dari kode HTML. Kita dapat melihatnya di bagian kode CSS sebagai berikut:

Dalam kode CSS di atas, jelas bahwa penulisan kode tebal adalah tag HTML. Kode CSS dibuka dengan tag dan ditutup dengan tag. Menulis CSS seperti di atas disebut stylesheet internal. Kami sekarang berlatih mengubah kode CSS secara manual sebagai berikut:

Buka file: dengan Dreamweaver CS4.

Klik tombol Bagikan untuk menggunakan dua jendela secara bersamaan: Kode dan Desain.

Tempatkan kursor di jendela kode dalam kode CSS.

Kami akan mencoba membuat kode CSS secara manual untuk menyelaraskan judul di tengah. Pindahkan kursor hanya melewati kode warna untuk tag h1 (di belakang kode: warna: # 060;)

Tekan Enter untuk membuat garis baru.

Panduan Kode akan segera ditampilkan untuk mempermudah penulisan kode. Anda dapat menulis kode secara manual dengan mengetik langsung atau dengan memilih pemilih di Code Assist.

Tulis seperti ini:

Di jendela Properti, klik tombol Refresh untuk melihat perubahan pada kode tertulis.

Nah, di jendela desain, Anda akan melihat bahwa perubahan yang dilakukan pada judul artikel berada di tengah.

Simpan pekerjaan Anda. Klik menu File> Save.

Leave a Reply

Your email address will not be published. Required fields are marked *