Merencanakan situs web
Pertama Anda perlu merencanakan situs web. Tutorial ini akan mengambil gambar berikut sebagai contoh untuk membangun sebuah situs web.
Gambar 1
ditunjukkan di bawah ini:
Gambar 2
terutama terdiri dari lima bagian:
1. Bilah navigasi Navigasi Utama, dengan efek tombol.
Lebar: 760 piksel Tinggi: 50 piksel
2. Header Ikon header website berisi logo dan nama website.
Lebar: 760 piksel Tinggi: 150 piksel
3. Konten Konten utama website.
Lebar: 480px Tinggi: Berubah tergantung konten
4. Batas sidebar, beberapa informasi tambahan.
Lebar: 280px Tinggi: Berubah tergantung pada
5. Kolom bawah Footer website berisi informasi hak cipta, dll.
Lebar: 760 piksel Tinggi: 66 piksel
1. Membuat template html dan direktori file, dll.
Kodenya adalah sebagai berikut:
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Simpan sebagai index.html, dan buat folder css dan gambar. Struktur websitenya adalah sebagai berikut:
Gambar 3
2. Membuat kotak besar untuk website :
Buat kotak selebar 760px yang akan memuat semua elemen situs web.
Tulis
Gambar 4
Sekarang untuk memusatkan kotaknya, tuliskan margin:auto;, sehingga file cssnya adalah:
#penampung halaman {
lebar: 760 piksel;
margin: otomatis;
latar belakang: merah;
}
Sekarang Anda dapat melihat ada celah lebar 8px antara bagian atas kotak dan browser. Hal ini disebabkan oleh padding dan batas default browser. Untuk menghilangkan kesenjangan ini, Anda perlu menulis di file css:
html, isi {
margin: 0;
bantalan: 0;
}
Bagilah situs web menjadi lima div
1. Masukkan lima bagian yang disebutkan pada "Langkah 1" ke dalam kotak dan tulis dalam file html:
berperilaku sebagai berikut:
Gambar 5
2. Untuk membedakan kelima bagian tersebut, kita tandai kelima bagian tersebut dengan warna background yang berbeda dan tulis pada file css:
#nav-utama {
latar belakang: merah;
tinggi: 50 piksel;
}
#tajuk {
latar belakang: biru;
tinggi: 150 piksel;
}
#bilah samping-a {
latar belakang: hijau tua;
}
#isi {
latar belakang: hijau;
}
#footer {
latar belakang: oranye;
tinggi: 66 piksel;
}
Kinerjanya adalah sebagai berikut:
Gambar 6
Tata letak halaman web dan div mengambang, dll.
1. Mengambang: Pertama, biarkan batas melayang di sebelah kanan konten utama. Gunakan css untuk mengontrol mengambang.
#bilah samping-a {
mengapung: benar;
lebar: 280 piksel;
latar belakang: hijau tua;
}
Kinerjanya adalah sebagai berikut:
Gambar 7
2. Tulis beberapa teks ke dalam kotak konten utama. Tulis di file html:
Gambar 8
Namun Anda dapat melihat bahwa kotak konten utama memenuhi seluruh lebar penampung halaman, dan kita perlu mengatur batas kanan #content menjadi 280px. agar tidak bertentangan dengan perbatasan.
Kode cssnya seperti berikut:
#isi {
margin-kanan: 280 piksel;
latar belakang: hijau;
}
Pada saat yang sama, tuliskan beberapa teks pada pembatas. Tulis di file html:
berperilaku sebagai berikut:
Gambar 9
Ini bukan yang kita inginkan. Bingkai bawah situs web telah berada di bawah batas. Hal ini karena kita mengapungkan perbatasan ke kanan. Karena mengambang, dapat dipahami bahwa perbatasan tersebut berada pada lapisan lain di atas keseluruhan kotak. Oleh karena itu, kotak bawah dan kotak konten sejajar.
Jadi kami menulis di css:
#footer {
jelas: keduanya;
latar belakang: oranye;
tinggi: 66 piksel;
}
Kinerjanya adalah sebagai berikut:
Gambar 10
Tata letak dan penyajian struktur tambahan di luar bingkai utama halaman web. Penyajian (Layout) struktur tambahan di luar bingkai utama halaman web, antara lain sebagai berikut:
1. Bilah navigasi utama;
2. Judul, meliputi nama website dan judul konten;
3. Konten;
4. Informasi footer, termasuk hak cipta, sertifikasi, dan bilah sub-navigasi (opsional).
Saat menambahkan struktur ini, agar tidak merusak kerangka asli, kita perlu menambahkan di bawah tag "body" (TAG) dari file css:
.tersembunyi {
tampilan: tidak ada;
}
".hidden" adalah kelas yang kita tambahkan. Kelas ini dapat membuat elemen apa pun di halaman milik kelas tersembunyi tidak ditampilkan. Ini akan digunakan nanti, jadi lupakan saja untuk saat ini.
Sekarang kita tambahkan headingnya:
Pertama kembali ke kode HTML,
Berikutnya adalah bilah navigasi :
Kode css yang mengontrol kinerja bilah navigasi relatif rumit. Kami akan memperkenalkannya secara rinci pada langkah kesembilan atau kesepuluh. Sekarang tambahkan kode navigasi ke file html: