Cara membuat CSS dengan Dreamweaver CS6

Cara membuat CSS dengan Dreamweaver CS6

Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver. cara yang termudah diantaranya adalah :
1. Mengetikkan langsung kode css pada bagian layar code view (kalau sudah banyak hafal perintah dan atributnya cara ini recomended)
css-1
Dengan cara ini kita akan dibantu dengan auto complete sehingga walaupun tidak sepenuhnya hafal tinggal memilih perintah yang sesuai.
2. Menambahkan css dengan menggunakan fitur tab css yang ada dikanan layar dreamweaver, lihat gambar dengan lingkaran merah.
css-2
Pada lingkaran merah ke 2, ada beberapa tombol kecil yang dapat digunakan untuk mengelola css. Klik gambar rantai jika anda ingin melampirkan file css yang sudah jadi, klik gambar yang ada tanda  plus (+) untuk menambah css baru, gambar pensil untuk mengedit dan gambar tong sampah untuk menghapus.
Untuk menambahkan css, kita harus menekan tombol +, nanti akan muncul seperti gambar berikut :
css-3
Di layar tersebut kita diminta memilih jenis css yang akan dibuat. Pilihan pertama untuk membuat css class yang dapat digunakan oleh banyak objek/tag (silahkan nanti cari referensi tentang css class), pilihan kedua jika anda ingin menempelkan css pada tag html, dan pilihan ketiga untuk membuat ID khusus sesuai dengan nama objek yang nanti dibuat. Trus ada pilihan define in, pilih yang pertama (New Style..) jika ingin cssnya tersimpan di file tersendiri, atau pilihan kedua This document only jika anda ingin cssnya diletakkan dalam bagian header (<head>) dokumen yang aktif.
Saya akan pandu untuk membuat dengan pilihan selector type yang kedua yaitu tag.
Kita akan coba menambahkan pada tag H1, dan This documen only.
css-4
Kemudian tekan oke, maka akan muncul tampilan seperti gambar berikut :
css-5
Semua isian tidak harus diisi, jika tidak perlu boleh dibiarkan kosong. Karena contoh ini membuat css untuk tag H1 maka diantaranya yang diubah adalah jenis font, dan ukuran. Jika anda ingin menambahkan yang lainya seperti kotak, warna latar, silahkan buka tab pilihan selanjutnya. Setelah semuanya selesai, tekan tombol ok.
Hasil cssnya bisa anda lihat di bagian code view seperti berikut :
css-6
3. Menambahkan css lewat page properties, ini standard penggunaan css di dreamweaver versi 8 sd CS 6. Pada saat kita mengubah pengaturan halaman melalui page properties dreamweaver otomatis menambahkan css pada halaman yang kita buat. Page Properties bisa dibuka dimenu Modify atau Tombol Page Properties pada bagian bar properties dibagia bawah layar. Lihat gambar :
css-7
Cara membuat CSS dengan Dreamweaver CS6 Cara membuat CSS dengan Dreamweaver CS6 Reviewed by nurrohmahomah.blogspot.com on 23.45 Rating: 5

Tidak ada komentar: