Cara Mengedit Styles dalam Tata Letak CSS di Dreamweaver - dummies

Setelah membuat halaman baru dengan tata letak CSS di Dreamweaver, Anda memiliki sejumlah pilihan yang tampaknya tak terbatas untuk mengeditnya, tapi pertama-tama Anda harus menentukan gaya dalam style sheet yang sesuai dengan elemen yang ingin Anda edit.

Seperti yang mungkin bisa Anda bayangkan, Anda dapat mengedit gaya dalam tata letak CSS dengan berbagai cara untuk membuat desain Anda sendiri.

Setelah Anda menyesuaikan gaya yang ada untuk mendapatkan desain halaman dasar sesuai keinginan Anda, Anda dapat menciptakan gaya tambahan sebanyak yang Anda inginkan.

Bagaimana cara memeriksa gaya yang tersedia dan membuat suntingan dasar

Anda dapat menggunakan petunjuk dasar yang sama dengan tata letak CSS yang disertakan dalam Dreamweaver. Untuk mengedit gaya dalam tata letak CSS, ikuti langkah-langkah ini:

1. Buka file halaman yang berbasis pada tata letak Dreamweaver CSS, dan pilih Window → CSS Styles (atau klik tab CSS Designer untuk memperluas panel).

   Panel Perancang CSS terbuka atau meluas.

2. Klik untuk memilih nama style sheet di panel Sumber di bagian atas CSS Designer.

   Semua gaya yang terkait dengan halaman baru tercantum di panel Selectors.

   

3. Pilih nama gaya apa pun yang ada di panel Desainer CSS Designer.

   Aturan CSS yang sesuai yang ditentukan untuk gaya ditampilkan di panel Properties, di bagian bawah panel Perancang CSS. Mengklik daftar gaya dan meninjau ulang peraturan yang sesuai adalah cara yang baik untuk mendapatkan ikhtisar ringkas tentang desain dan untuk melihat di mana berbagai opsi pemformatan halaman tersimpan.

Header HTML5,. nav, dan tag footer mengontrol bagian utama halaman. Misalnya, gaya header termasuk aturan yang membuat warna latar hijau menjadi hijau. Dengan demikian, untuk mengubah warna area header di bagian atas halaman, Anda mengubah pengaturan warna latar belakang pada aturan header.

Cara mengedit pengaturan seluruh halaman

Untuk mengedit pengaturan keseluruhan halaman - seperti warna latar belakang halaman atau wajah utama, ukuran, dan warna teks yang digunakan di seluruh halaman - ikuti langkah-langkah ini:

1. Pada panel Perancang CSS CSS, pilih gaya yang dinamai body.

   Properti yang didefinisikan dalam aturan gaya yang dipilih ditampilkan di panel Properties.

   

2. Klik ikon T di bagian atas panel Properties, dan ubah atau tambahkan font yang diinginkan dan pengaturan teks lainnya.

   Anda dapat mengubah wajah, ukuran, gaya, dan berat font. Untuk mengubah ruang antar baris teks, ubah tinggi garis.

3. Gulir ke bawah ke area Latar Belakang panel Properties dan gunakan warna dengan baik di kolom Background-Color untuk menentukan warna untuk keseluruhan latar belakang halaman.

   Atau, Anda dapat memasukkan kode warna heksadesimal apa pun di bidang Warna Latar Belakang atau gunakan alat bantu mata untuk memberi contoh warna apa pun. Untuk menambahkan gambar latar belakang, klik di bidang URL di bagian Latar Belakang dan kemudian klik tombol Browse yang muncul dan pilih gambar yang ingin Anda gunakan sebagai latar belakang. Gunakan ikon Background-Repeat untuk menentukan bagaimana gambar latar belakang harus diulang pada halaman.

4. Buat perubahan atau penambahan lain pada aturan gaya.

Perubahan pada aturan gaya di panel Properties secara otomatis disimpan dan diterapkan pada konten yang diformat dengan aturan.

Cara menyesuaikan area konten

Untuk mengubah lebar atau pengaturan area konten utama lainnya, yang mengontrol keseluruhan ukuran halaman dan header, footer, dan sidebar, ikuti langkah-langkah ini:

1. Untuk mengubah lebar seluruh area desain utama:

   1. Klik tombol. gaya kontainer di panel Selectors pada panel Perancang CSS.

      Sifat-sifat dari. Aturan gaya kontainer ditampilkan di panel Properties, di mana Anda juga dapat mengedit gaya.

   2. Ubah ukuran di bidang Lebar atau ketik angka baru untuk lebar halaman yang Anda inginkan.

      Lebar desain halaman diubah secara otomatis berdasarkan ukuran yang Anda masukkan. Bila Anda mengubah lebar. Gaya kontainer, Anda mengubah lebar keseluruhan desain karena semua tag dan elemen lainnya terdapat dalam format dengan. gaya kontainer - dan mereka siap untuk memperluas untuk mengisi. wadah.

2. Untuk mengubah ukuran area konten halaman, pilih gaya yang dinamai. isi dan tentukan ukuran dan pilihan lain yang Anda inginkan di panel Properties.

   Jika Anda mengubah lebar area konten dalam tata letak yang menyertakan bilah sisi, Anda harus mengubah lebar sidebar juga.

3. Untuk mengubah warna latar belakang gaya apapun pada halaman, klik nama gaya yang sesuai dan ubah pengaturan di bagian Background pada panel Properties.

   Misalnya, dalam layout CSS di Dreamweaver, sidebar didefinisikan dengan gaya yang dinamai. sidebar1. Dengan demikian, untuk mengubah warna latar belakang, Anda akan klik. sidebar1 di panel Selectors, pilih kategori Background di panel Properties, dan pilih warna yang Anda inginkan. Begitu pula untuk mengganti warna latar belakang header, pilih style yang diberi nama header di panel Selectors dan gunakan warna dengan baik.

   

4. Untuk menambahkan gambar ke header:

   1. Pilih gambar placeholder yang diberi label Insert Logo dan tekan tombol Delete atau Backspace.

   2. Pilih Insert → Image → Image dan pilih gambar menggunakan kotak dialog Select Image Source.

5. Ganti teks dan sisipkan gambar di sidebar dan area konten utama.

   Anda dapat menambahkan atau mengganti teks dan menyisipkan gambar di halaman manapun yang dibuat dari tata letak CSS, sama seperti yang Anda lakukan di halaman web lainnya.

6. Pilih File → Save All untuk menyimpan halaman dan style.