Dasar-Dasar Situs Web Berbasis Div: 7 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:59

Instruksi ini akan menunjukkan kepada Anda dasar-dasar bagaimana membangun situs web dengan div. Karena tabel yang digunakan untuk tata letak itu jahat!:pUntuk memahami instruksi ini, Anda harus mengetahui html dan css dasar. Jika Anda tidak memahami sesuatu, jangan ragu untuk bertanya. Beranda pribadi saya juga menggunakan struktur div semacam ini.

Langkah 1: Buat File Dasar

Pertama buat file html Anda. Kami akan menambahkan dasar-dasarnya. File css akan kosong untuk now.html file sekarang berisi: test Simpan file html Anda sebagai something.html. Anda dapat memilih nama sendiri. File css Anda harus disimpan sebagai.css. Pastikan Anda memberikan nama yang sama seperti yang disebutkan dalam file html. Dalam hal ini "style.css". Kami sekarang memiliki halaman html kosong biasa ketika dipratinjau di browser kami.

Langkah 2: Edit Tag Tubuh untuk Warna Dasar, Font, …

Kami akan membiarkan file html apa adanya, dan hanya mengedit file css. Tambahkan kode berikut ke file css Anda: body { background: #444444; font-family: verdana, arial, sans-serif; warna: #444444; ukuran font: 12px; margin: 0px;}Dengan sedikit kode ini kita akan mendefinisikan semua properti dari tag body. Karena semua konten ada di tag badan, pengaturan ini akan memengaruhi seluruh halaman. Latar belakang dan warna font (warna), telah disetel ke abu-abu gelap. Keluarga font (font-family) telah disetel ke verdana. Jika komputer yang digunakan untuk melihat website kami tidak memiliki font "verdana", maka akan menampilkan situs kami dengan font "arial". Anda dapat menambahkan lebih banyak font ke daftar. "sans-serif" adalah tipe umum yang akan digunakan ketika tidak ada font yang Anda sediakan. Ukuran font (ukuran font) telah diatur ke 12 piksel. Ini adalah nilai mutlak. Jika Anda ingin mengedit ukuran font lain (seperti header, paragraf, item menu, …) Anda dapat menggunakan unit relatif "em" sebagai ganti "px". Dengan cara ini, jika Anda ingin mengubah ukuran situs web Anda, Anda hanya perlu mengubah ukuran font body. Margin telah diatur ke 0px untuk keempat sisi tag body. Ini dilakukan untuk memastikan situs akan menempel di bagian atas jendela.

Langkah 3: Menambahkan Wadah Dengan Header dan Konten

Kami sekarang akan menambahkan wadah. Ini hanyalah div terpusat yang akan berisi seluruh situs web kita. Dalam wadah ini, kita akan menambahkan dua div lagi; div konten dan div header. File html kita sekarang akan terlihat seperti ini: test Content Header Kami akan menambahkan kode berikut ke file css kami:div#container { width: 800px; margin: 0px otomatis; latar belakang: #FFFFFF; padding: 0px;}div#content { lebar: 800px; padding-top: 100px; latar belakang: kuning;}div#header { lebar: 800px; tinggi: 100 piksel; latar belakang: biru; posisi: mutlak; atas: 0px;}.clearfix:setelah {konten:"."; tampilan: blok; tinggi: 0; jelas: keduanya; visibility:hidden;}.clearfix {display:inline-block;}/* Sembunyikan dari IE Mac \*/.clearfix {display:block;}div#container berarti kita memiliki tag div dengan id "container". Kami akan menambahkan beberapa warna dan "margin: 0px auto;" untuk memastikan wadah kita berada di tengah halaman. Kita harus memberi konten padding-top dan header nilai absolut dengan "top: 0px" untuk memastikan header diposisikan di atas konten lain. Jangan keberatan warna-warna jelek. Ini hanya untuk mempermudah membaca warna dan melihat div yang berbeda. Kita memerlukan kode clearfix yang aneh ini untuk memastikan navigasi dan div konten (ditambahkan pada langkah berikutnya) tidak jatuh dari div sekitarnya.

Langkah 4: Buat Dua Div di Div Konten untuk Navigasi dan Konten Aktual

Sekarang kita akan menambahkan dua div lagi di div konten. Satu untuk navigasi dan satu untuk konten sebenarnya. Di antara tag konten; Anda akan menambahkan kode baru:

Navigasi Konten utama Kami akan menambahkan beberapa kode css untuk menampilkan navigasi dan konten utama divs;div#nav { width: 200px; mengapung: kiri; background: orange;}div#maincontent { lebar: 600px; mengapung: benar; background: pink;}Perhatikan fakta bahwa kedua div ini mengambang. Jika kita tidak memasukkan kode clearfix tambahan pada langkah sebelumnya, div akan melayang di luar div sekitarnya. Dengan metode clearfix, kami akan memastikan itu tidak terjadi.

Langkah 5: Tambahkan Beberapa Div Ekstra untuk Struktur di Navigasi

Sekarang kita akan menambahkan beberapa div tambahan ke div "nav" untuk membuat semacam struktur di halaman web kita. Ubah sedikit kode berikut:

• Foo
• Batang

Sekarang kita akan memasang potongan kode untuk menentukan bagaimana div "navblock" harus ditampilkan. Perhatikan bahwa navblock memiliki kelas, bukan id. Alasannya sederhana; div dengan id hanya ditampilkan sekali (blok navigasi, header, footer, …). Div dengan kelas dapat ditampilkan lebih dari sekali. Di sini kita akan menggunakan kelas. Untuk berjaga-jaga jika kita ingin menambahkan blok navigasi lain nanti on.div.navblock { width: 180px; margin: 5px otomatis; border: 1px solid red;}Jika kita ingin menambahkan blok navigasi lain, Anda hanya perlu menambahkan struktur baru …. Kode Anda sekarang akan terlihat seperti ini;

• Foo
• Batang
• Huuu
• Jauh

Langkah 6: Tambahkan Beberapa Div Ekstra untuk Struktur di Konten Utama

Sekarang kita akan melakukan hal yang sama untuk div maincontent. Kodenya sekarang terlihat seperti ini:

Lorem ipsum dolor sit amet,…

Sekali lagi, kita akan menambahkan sepotong kode ke file css kita untuk menentukan bagaimana div harus ditampilkan:div.contentblock { width: 580px; margin: 5px otomatis; border: 1px solid white;}Kita sekarang dapat menambahkan blok konten lain dengan menambahkan " … " lain di div konten utama seperti ini;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Langkah 7: Jadikan Situs Sedikit Kurang Jelek

Sekarang bagian yang menyenangkan; warna. Sekarang kita memiliki struktur div utama, kita dapat mengubah warna menjadi sesuatu yang sedikit kurang kacau/jelek/…Bermain-main dengan warna dalam file css. Berikut adalah file html lengkap dari halaman web yang ditampilkan pada gambar: tes

• Foo
• Batang
• Huuu
• Jauh

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum, …

Header Dan ini file css lengkapnya:body { background: #444444; font-family: verdana, arial, sans-serif; warna: #444444; ukuran font: 12px; margin: 0px;}div#container { lebar: 800px; margin: 0px otomatis; latar belakang: #FFFFFF; padding: 0px;}div#content { lebar: 800px; padding-top: 100px; latar belakang: #FFFFFF;}div#header { lebar: 800px; tinggi: 100 piksel; latar belakang: #888888; posisi: mutlak; atas: 0px;}div#nav { lebar: 200px; mengapung: kiri; latar belakang: #FFFFFF;}div#maincontent { lebar: 600px; mengapung: benar; background: #DDDDDD;}div.navblock { lebar: 180px; margin: 5px otomatis; perbatasan: 1px solid #DDDDDD;}div.contentblock { lebar: 580px; margin: 5px otomatis; border: 1px solid #FFFFFF;}.clearfix:after {content:"."; tampilan: blok; tinggi: 0; jelas: keduanya; visibility:hidden;}.clearfix {display:inline-block;}/* Sembunyikan dari IE Mac \*/.clearfix {display:block;}Jadi sekarang Anda sudah mendapatkan dasar-dasarnya. Tentu saja masih banyak yang harus diedit seperti warna, ukuran font, blok navigasi yang terlihat lebih baik, … Tapi instruksi ini hanya tentang struktur div. Jika Anda ingin melihat instruksi terkait lainnya, Anda selalu dapat bertanya. Saya akan melihat apakah saya dapat menemukan waktu.