Bagaimana Menyediakan Dokumen dengan CSS3 - dummies

Menggunakan CSS3 untuk membuat garis besar dokumen berguna bila halaman berisi banyak materi dan Anda ingin pengguna menavigasi dengan mudah. Garis besar bergantung pada berbagai tag yang Anda berikan. Metode pembuatan dokumen saat ini adalah menggunakan tag

sampai

.

Pendekatan ini sangat bagus bila materi berasal dari halaman yang sama atau Anda memiliki kontrol terhadap pemformatan konten. Ini tidak berjalan dengan baik saat konten berasal dari lokasi lain, itulah sebabnya mengapa kelompok standar harus menemukan cara baru untuk melakukan sesuatu.

Prosedur berikut menunjukkan teknik untuk menambahkan garis besar ke halaman yang sudah berisi menu. Anda menggunakan Navigasi sebagai titik awal.

1. Buka Navigasi. File HTML dan tambahkan kode berikut sampai akhir bagian (setelah menu yang ada).

   
   Kepala Utama 1
   
   Kepala Pos 1
   Kepala Pos 2
   
   
   Kepala Utama 2
   
   Sub Pos 3
   Sub Pos 4
   
   
   
   
   
   
   
   
   
   
   
   Pos Utama 1
   Bahan Pengantar
   
   Sub Pos 1
   Artikel
   
   Sub Pos 2
   Artikel
   
   Pos Utama 2
   Bahan Pengantar > Sub Heading 3
   
   
   Artikel
   Sub Heading 4
   
   
   Artikel
   Entri terdiri dari garis besar dokumen dan konten yang terkait. Garis besar secara khusus mengikuti objek
   

   dan

   dalam contoh ini. Ada metode untuk menghasilkan konten semacam ini secara otomatis, namun semuanya memerlukan pengkodean.

   Ini adalah satu kasus di mana menggunakan CSS memang melibatkan beberapa pengkodean manual yang tidak perlu Anda lakukan saat menggunakan teknik lain, seperti memasukkan JavaScript. Namun, kelebihannya adalah contohnya akan bekerja dengan baik dengan browser yang mendukung CSS.

   Simpan file HTML.

2. Buka Navigasi. CSS dan ketik gaya berikut di akhir file.

3. #DocOutline {font-family: Arial, Helvetica, sans-serif; ukuran huruf: 14px; lebar: 145px; tinggi: 800px;} #DocOutline ul {margin-bottom: 20px; daftar-gaya: tidak ada; margin-left: -40px;} #DocOutline ul ul {margin-left: -20px;} #DocContent {margin-top: -800px; margin-left: 150px;}

   Fokus utamanya adalah pada garis besar dokumen di mana Anda perlu menyediakan tautan terformat ke konten yang ditemukan di sisa halaman. Perhatikan bahwa garis besar diatur ke ketinggian tertentu. Alasan untuk pengaturan ini adalah untuk mempermudah memposisikan konten dokumen begitu tautan ditampilkan.
   

   Contohnya mengatur properti gaya daftar #DocOutline ul dengan gaya tidak ada. Anda bisa dengan mudah menggunakan angka, huruf, atau indeks garis besar lainnya yang Anda inginkan.

   Daftar ini secara otomatis akan indent setengah dari jarak elemen menu individu yang Anda buat tadi. Untuk menempatkan tautan di sisi kiri halaman, Anda harus membalikkan lekukan daftar dengan menetapkan margin-left ke -40px, yang merupakan separuh lebar 80px dari elemen menu individual.

   Setiap tingkat akan memerlukan beberapa tambahan jumlah lekukan sehingga pengguna dapat melihat tingkat relatif setiap entri. The #DocOutline ul ul mengubah indentasi untuk judul tingkat dua. Jika Anda memiliki judul ketiga, Anda akan membuat style ulos ulos ulos #DocOutline untuk memformatnya.

   Isi dokumen akan dimulai setelah garis besar dokumen kecuali satu dari dua hal yang terjadi. Pertama, Anda bisa menggunakan kolom sebenarnya. Namun, fungsi ini membutuhkan CSS3. Kedua, Anda bisa menggunakan pseudo-columns. Anda menetapkan nilai properti margin-atas sama dengan tinggi garis besar dokumen.

   Teknik yang ditunjukkan dalam contoh ini akan bekerja dengan browser yang sepenuhnya mendukung CSS. Perhatikan bahwa Anda juga harus menetapkan margin-left ke nilai yang sama dengan lebar garis besar dokumen (ditambah beberapa piksel untuk spasi.

   Simpan file CSS.

4. Muat ulang contoh Navigasi.

5. Anda melihat garis besar dokumen dan konten yang terkait. Garis besar ini benar-benar bekerja - Anda bisa mengklik link untuk menuju ke berbagai header yang disajikan dalam garis besar.