Kepala halaman. Buat header monokromatik dengan petunjuk css langkah demi langkah. Header halaman Menetapkan properti font ke elemen
Pada artikel ini kita akan melihat cara membuat header situs, dan menempatkan judul serta deskripsi situs di atasnya.
Pertama-tama, Anda memerlukan gambar untuk header situs. Ini paling baik dilakukan di Photoshop.
Dan bagi yang belum memiliki editor ini, saya menyarankan cara termudah, di Paint, tersedia di semua Windows secara default.
Mari kita buat lebar gambar menjadi 900px, lebar situs, dan tinggi - 200px. Tentu saja Anda bisa memiliki dimensi sendiri, asalkan lebar gambar sesuai dengan lebar situs (wrapper), tingginya terserah Anda.
Segera setelah gambar siap dan ditempatkan di folder gambar, ambil gambar yang dibuat di halaman sebelumnya dan lanjutkan untuk memasang header di situs.
Di pemilih #header, hapus tinggi yang diberikan padanya, dan tentukan lebar dan tinggi gambar yang diambil.
#tajuk (
lebar: 900 piksel; - lebar
tinggi: 200 piksel; - tinggi
warna latar belakang : #25B33f ; - latar belakang
margin-bawah: 10 piksel; - lekukan bawah
}
Lalu kita masukkan gambar itu sendiri.
#tajuk (
lebar: 900 piksel;
tinggi: 200 piksel;
warna latar belakang : #25B33f ;
margin-bawah: 10 piksel;
gambar latar belakang : url(images/i8.png) - gambar
}
Properti warna latar belakang diindikasikan jika gambar tiba-tiba, di browser pengunjung mana pun, tidak ditampilkan.
Jika gambar ditempatkan dengan offset apa pun, dan Anda perlu memperbaikinya, maka properti ditambahkan di sini
Sekarang saatnya memberi judul dan deskripsi situs. Untuk melakukan ini, kita menulis blok div dengan pengidentifikasi id="header" di tag body, dan di dalamnya ada dua judul h1 dan h3, di mana kita memasukkan nama situs dan deskripsinya
Tajuk situs
Mari kita lihat apa yang bisa kita lakukan.
Sekarang, mari kita lihat judul dan deskripsinya. Kami membuat dua pemilih untuk mereka, dan menentukan properti berikut:
Untuk h3 kita akan mengatur lebarnya menjadi 200 piksel agar tidak melebar ke seluruh gambar. Indentasi dapat dimanipulasi tergantung di mana di header akan lebih mudah untuk menempatkan teks.
Mari kita lihat hasilnya.
Menurutku, itu sangat lucu.
Mari kita rangkum kode untuk halaman ini.
Dokumen tanpa judul
#pembungkus (
lebar: 900 piksel;
garis besar : 1px padat #787274 ;
bantalan: 10 piksel;
margin: 0 otomatis;
}
#tajuk (
lebar: 900 piksel;
tinggi: 200 piksel;
warna latar belakang : #25B33f ;
margin-bawah: 10 piksel;
gambar latar belakang : url(gambar/i8.png)
}
#bilah samping (
warna latar belakang : #2FF553 ;
margin-bawah: 10 piksel;
lebar: 180 piksel;
bantalan: 10 piksel;
mengapung: benar;
}
#isi (
warna latar belakang : #9EF5AF ;
margin-bawah: 10 piksel;
lebar: 670 piksel;
bantalan: 10 piksel;
}
#footer (
tinggi:80 piksel;
warna latar : #41874E ;
margin-bawah: 10 piksel;
}
.jernih(
jelas: keduanya;
}
jam1 (
warna : #ffee00 ;
jenis huruf: 40px Georgia;
margin-kiri : 300 piksel ;
}
jam3 (
lebar: 200 piksel;
warna : #ffee00 ;
gaya font: miring;
margin: 70 piksel 0 0 30 piksel;
}
Tajuk situs
Cara membuat header website dengan judul dan deskripsi
Halo para webmaster masa depan yang terkasih!
Saya berusia 55 tahun dan saya senang menyambutnya
Anda di situs web Anda.
Situs ini adalah yang pertama saya kembangkan sendiri.
dan sebelumnya saya hanya tahu cara mengakses Internet.
Namun bagi saya, mengingat usia dan “pengalaman” saya, hal itu tidaklah mudah
untuk memahami secara tepat nuansa ini, mereka mengambil
sebagian besar waktu.
Dan saya memutuskan untuk menulis materi saya sendiri, agar lebih mudah bagi orang lain
menavigasi arus informasi baru.
Semua detail kecil yang menyertai pembuatan situs web “dikunyah” di sini,
yang biasanya dilewati oleh penulis lain.
Ada opsi lain untuk memasukkan gambar ke header situs. Anda dapat menyisipkan alamat gambar di blok sebelum judul (misalnya alamat gambar saya
http://trueimages.ru/img/0b/d0/06bb1a05753316ac3c567d047ba.png ">
Dalam hal ini, di pemilih #header kami menghapus properti gambar latar: (../images/position.png); , dan tulis position: relative .
Dan di pemilih tag h1 dan h3, kami menentukan properti position: absolute; .
Dalam hal ini, Anda perlu mengubah indentasi judul. Anda dapat membaca lebih lanjut mengapa hal ini dilakukan di artikel
#tajuk (
lebar: 900 piksel;
tinggi t: 200 piksel;
warna latar belakang : #25B33f ;
margin-bawah: 10 piksel;
posisi:relatif;
}
jam1(
posisi: mutlak;
warna : #ffee00 ;
jenis huruf: 40px Georgia;
kiri: 300 piksel;
}
jam3(
posisi: mutlak;
lebar: 200 piksel;
warna : #ffee00 ;
gaya font: miring;
atas: 70 piksel;
kiri :30 piksel;
}
Segala sesuatu yang lain tetap tidak berubah.
Sekarang beberapa informasi untuk mereka yang websitenya terletak di CMS WordPress.
Tema yang sudah jadi diinstal di WordPress, dengan header yang sudah jadi, tetapi katakanlah Anda ingin menambahkan logo Anda sendiri atau gambar lain ke header yang sudah jadi ini.
Ini dilakukan sebagai berikut. Buka “Postingan - Tambah Baru” di konsol, alihkan editor ke mode HTML, dan unggah gambar yang kemudian akan ditambahkan ke header situs.
Setelah memuat, kode gambar akan muncul di editor; Anda perlu menyalinnya, dan “Rekam” dapat dihapus.
Lalu pergi ke "Penampilan - Editor" dan buka file header.php untuk diedit.
Di file ini, temukan barisnya, lalu tempelkan kode gambar yang disalin.
Setelah itu, kami memperbarui file dan melihat bagaimana gambar ditempatkan di header situs.
Jika Anda perlu memindahkannya ke suatu tempat, kembali ke editor file, dan tambahkan atribut style dengan properti margin ke kode gambar, di tag img
gaya="margin:0 0 0 0;"
Dan kami memindahkan gambar ke tempat yang kami butuhkan.
Jadi kami membuat halaman pertama situs tersebut. Setelah menyelesaikan header, dan beberapa modifikasi lain yang dijelaskan di bawah, Anda dapat memanggil file ini index.html dan mengunggahnya ke hosting. Kemudian, dengan menggunakan template yang sama, dibuat halaman lain, dibuat menu, dan seterusnya. Dan situs tersebut memulai kehidupannya di Internet.
P.S. Jika seseorang ingin mengubah gambar di header situs WordPress dan memanipulasi posisi header, maka ini ada di artikel
Saya berharap Anda sukses kreatif.
Tata letak halaman adalah proses pengembangan struktur dokumen HTML, yang hasilnya adalah halaman web. Struktur halaman web ditentukan oleh tag HTML yang sesuai. Tag - blok wadah persegi panjang untuk konten - tidak muncul di jendela browser. Mereka memberi tahu browser tentang jenis konten, dan browser, berdasarkan informasi ini, menampilkan kontennya - teks atau file media.
Cara membuat struktur halaman menggunakan blok (block layout) 1. Cara membagi tata letak halaman Anda menjadi beberapa bagianUntuk membuat tata letak halaman, Anda perlu memilih bagian utama (section) dokumen. Anda dapat membaca lebih lanjut tentang elemen bagian di artikel.
Halaman web standar berisi bagian berikut:
Beras. 1. Bagian utama halaman
Kami tidak akan menggunakan elemen tersebut karena tidak didukung oleh semua browser.
Elemen,
dan berbasis blok, sehingga mereka akan menempati seluruh lebar elemen blok kontainernya. Halaman dengan tata letak ini akan terlihat bagus di layar kecil, tetapi pada perangkat resolusi tinggi, teks pada halaman tersebut akan sulit dibaca. Oleh karena itu, Anda perlu menambahkan tag container untuk konten – konten setiap bagian: 
Beras. 2. Bagian utama halaman dengan tag penampung
dan atur lebar maksimumnya, padding internal, yang akan memisahkan konten dari tepi layar perangkat dengan resolusi rendah, serta padding eksternal, yang memungkinkan Anda menyelaraskan wadah di tengah blok induk:
Wadah ( lebar: 100%; lebar maksimal: 1024 piksel; /*lebar maksimum mungkin memiliki nilai berbeda*/ padding: 0 15 piksel; margin: 0 otomatis; )
Jadi, kami menerima bingkai untuk halaman kami (ketinggian bagian dalam hal ini adalah virtual, karena tanpa konten, bagian tersebut memiliki tinggi nol).
2. Tata letak header situs dan posisi elemen-elemennyaMari kita mulai menandai bagian pertama, yang disebut header halaman web. Elemen tersebut dirancang untuk mengelompokkan informasi pengantar dan alat bantu navigasi pada suatu halaman/situs. Mari tambahkan logo situs dan link navigasi di dalam tag:
Beras. 3. Header situs web dengan logo dan tautan tambahan Logo ( float: left; ) nav ( float: right; ) nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; /*salah satu cara untuk menempatkan elemen dalam a garis */ )
Ada beberapa cara untuk menempatkan elemen blok dalam satu baris. Semuanya diberikan dalam pelajaran.
Beras. 4. Efek runtuhnya blok kontainer Perhatikan bahwa setelah kita menerapkan bungkusnya, headernya menghilang. Hal ini terjadi karena elemen mengambang (yang memiliki kumpulan properti float) dikeluarkan dari aliran normal dan wadah induk tidak lagi melihat tingginya, sehingga elemen dan elemen di dalamnya dengan kelas .container diciutkan. Untuk memperbaiki situasi ini, mari gunakan pembersihan aliran untuk elemen dengan kelas .container:
Wadah:setelah ( konten: ""; tampilan: tabel; hapus: keduanya; )
Kami juga akan menambahkan padding vertikal ke dalamnya, memisahkan elemen di dalamnya dari tepi header. Hasilnya, gayanya akan terlihat seperti ini:
Wadah ( lebar: 100%; lebar maksimal: 1024 piksel; padding: 15 piksel; margin: 0 otomatis; ) 
Beras. 5. Pembersihan aliran sungai
Mari kita pertimbangkan situasi di mana gambar berfungsi sebagai logo. Itu dapat ditambahkan langsung di dalam tag atau sebagai gambar latar belakang. Gambar akan memiliki tinggi tersendiri, yang mungkin sangat berbeda dengan tinggi menu navigasi, sehingga kita akan dihadapkan pada masalah perataan vertikal elemen header.
Beras. 6. Gambar logo Dalam contoh kita, tinggi logo adalah 38px, jadi untuk menyelaraskan link menu ke tengah header, Anda perlu mengaturnya ke tinggi garis yang sesuai:
Nav a (dekorasi teks: tidak ada; tinggi garis: 38px; ) Gambar. 7. Penyelarasan link menu header
3. Buat grid untuk bagian utama halamanBagian utama halaman paling sering berupa kisi-kisi balok dengan lebar berbeda. Penempatan blok tersebut juga dilakukan menggunakan properti float. Kita akan membungkus setiap baris blok dengan blok tambahan dengan kelas .row :
Beras. 7. Grid bagian utama halaman.col-1-2 ( lebar: 50%; float: kiri; ) .col-1-3 ( lebar: 33.3333333333%; float: kiri; ) .col-1-4 ( lebar: 25%; float: kiri; .col-2-3 ( lebar: 66.6666666667%; float: kiri; )
Untuk elemen dengan kelas .row kami juga menerapkan pembersihan aliran:
Wadah:setelah, .baris:setelah ( konten: ""; tampilan: tabel; hapus: keduanya; )
Untuk memisahkan baris satu sama lain, Anda dapat menambahkan margin bawah:
Baris ( margin-bawah: 15px; )
Ketinggian balok kisi ditentukan oleh tinggi isinya, sehingga bisa berbeda-beda:
Beras. 8. Ketinggian elemen kisi yang berbeda Ketinggian blok dapat diperbaiki dengan menentukannya secara eksplisit, misalnya .row div (height: 100px) . Namun dalam kasus ini, Anda perlu memastikan bahwa saat menambahkan kemampuan beradaptasi pada tata letak, konten blok tidak akan melampaui tepi blok.
Jika Anda perlu mengatur warna latar belakang untuk blok suatu baris, maka ini dapat dilakukan sebagai berikut: untuk elemen dengan kelas .row, tambahkan kelas baru yang memungkinkan Anda memberi gaya pada baris ini saja (ternyata . baris baris-satu), tentukan untuk itu warna latar belakang balok yang lebih kecil tingginya, dan untuk balok tinggi kita akan mengatur warnanya sendiri, yaitu dengan cara ini kita akan membuat latar belakang latar belakang.
Lorem ipsum dolor duduk amet.
Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper di.
Baris-satu ( latar belakang: biru muda; ) .col-2-3 ( lebar: 66.6666666667%; float: kiri; latar belakang: kerang; ) 
Beras. 9. Latar belakang matte
Jika bagian utama halaman hanya berisi dua blok, maka baris pembungkus tambahan tidak dapat ditambahkan:
4. Tata letak footer halamanFooter halaman, atau footer, biasanya berisi informasi hak cipta, link tambahan, dll. Semua informasi ini juga ditempatkan dalam kolom, yang lebarnya bisa sama atau berbeda.
Saya pikir banyak dari Anda telah memperhatikan bahwa tren sekarang mencakup semakin banyak elemen desain melekat yang tetap terlihat saat pengguna menggulir halaman. Menurut pendapat saya, ini sangat nyaman, terutama jika itu adalah navigasi situs. Inilah contoh yang akan kita lakukan hari ini. Kita akan belajar cara membuat header website animasi menggunakan JQuery dan CSS3 dengan animasi.
Seperti biasa, hal ini dilakukan dalam baris kode minimal dan sangat sederhana, sekaligus sangat efektif. Baiklah, sekarang mari kita mulai pelajarannya.
Tapi pertama-tama saya ingin mengucapkan banyak terima kasih kepada http://www.webdesignerdepot.com dan sekarang mari kita mulai.
dan HTMLKode HTML-nya sangat-sangat sederhana, kita hanya perlu mengatur tag-tagnya, lalu menulis konten situs di antaranya:
Header situs terlampirKarena ini adalah contoh paling sederhana, di sini kami hanya menambahkan teks di antara tag h1, tetapi Anda juga dapat menggunakan gambar, atau, misalnya, navigasi situs.
kode jQueryCSS adalah cara terbaik untuk mengimplementasikan animasi dan transisi saat ini. Jadi kita akan menggunakan skrip minimal, dan hanya untuk menentukan pemicuan animasi saat menggulir halaman.
Jika nilai posisi gulir halaman lebih besar dari 1, berarti pengguna telah menggulir halaman dan Anda perlu menambahkan kelas “lengket” ke tag header situs. Beginilah cara header situs dipicu dan diperbaiki.
Dan ini kodenya sendiri:
$(jendela).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("lengket");
Penting untuk dicatat bahwa menggunakannya dalam contoh ini bukanlah ide yang baik, karena jika penggunaan skrip dinonaktifkan di browser, maka header situs akan diperbaiki dan hanya itu.
CSSKode CSS akan terdiri dari 2 bagian. Kode pertama akan bertanggung jawab atas header situs standar, yang berada pada posisi default. Kode kedua akan bertanggung jawab untuk menampilkan header saat pengguna menggulir halaman. Mari kita lihat seperti apa kode defaultnya:
Header( posisi: tetap; lebar: 100%; perataan teks: tengah; ukuran font: 72px; tinggi garis: 108px; tinggi: 108px; latar belakang: #335C7D; warna: #fff; font-family: "PT Sans ", Sans Serif; )
Sekarang bagian yang menarik: ketika pengguna menggulir halaman ke bawah, maka kelas .sticky akan diterapkan, yang mana kita dapat memberikan tampilan yang benar-benar berbeda yang hanya mampu dilakukan oleh CSS. Kami juga akan mengatur posisi tetap agar header situs kami selalu terlihat.
Dengan menggunakan aturan CSS di bawah ini, kami ingin memperkecil area header itu sendiri saat menggulir, mengubah warna dan tentu saja memperkecil font. Berikut kodenya sendiri:
Header.sticky ( ukuran font: 24px; tinggi garis: 48px; tinggi: 48px; latar belakang: #efc47D; perataan teks: kiri; padding-kiri: 20px; )
Ini adalah contoh paling sederhana yang dengannya Anda harus memahami esensi dari pekerjaan tersebut. Itu semua tergantung pada desain situs Anda.
Nah, sekarang mari kita tambahkan beberapa animasi pada transisi kita menggunakan. Berikut kodenya:
Transisi: semua kemudahan 0,4 detik;
Ι KesimpulanSaya berharap metode ini akan menyelesaikan banyak pertanyaan mengenai penerapan navigasi situs yang nyaman dan sederhana. Selain itu, implementasi ini sangat sederhana dan mudah dipahami.
Kesulitan utama dengan tata letak yang lancar adalah memastikan tampilan yang benar pada resolusi yang berbeda, dari tinggi hingga rendah. Karena kami membatasi lebar konten hingga 760 piksel, gambar header harus ditempatkan sedemikian rupa sehingga bagian gambar yang lebih penting sesuai dengan ukuran ini. Pada Gambar. 6.3 menunjukkan cara melakukan ini. Bagian tengah dengan lebar 760px disorot dalam warna gelap; huruf A menunjukkan sisa fragmen dengan lebar yang sama.
Beras. 6.3. Lebar tutup
Sebenarnya penambahan gambar pada header dilakukan melalui gambar latar belakang, yang harus disejajarkan dengan bagian tengah elemen.
Header ( tampilan: blok; /* Untuk browser lama */ tinggi: 405px; /* Tinggi header */ latar belakang: url(images/header-bg.png) bagian tengah bawah tidak boleh diulang; )
Idealnya, gambar harus memiliki lebar 2000 piksel, kemudian pada hampir semua resolusi monitor, gambar akan menampilkan bagian tengah, memotong semua yang tidak muat di jendela. Namun masalahnya adalah pada awalnya gambarnya tidak terlalu lebar, dan Anda tidak ingin menggambar garis-garis hitam yang membentang tanpa henti di sisinya. Salah satu solusinya adalah dengan mengaktifkan pengulangan latar belakang horizontal. Mereka yang memiliki resolusi lebar 1280 piksel atau kurang akan melihat satu gambar, sedangkan pemilik monitor lebar akan dapat mengagumi beberapa hewan dan matahari terbenam secara bersamaan. Di sini penting untuk mengedit gambar agar pas secara horizontal tanpa sambungan (Gbr. 6.4). Gradien disembunyikan untuk kejelasan.
Beras. 6.4. Menyelaraskan gambar secara horizontal
Pada gambar ini letak sambungan ditunjukkan dengan tanda panah dan spasi sehingga sambungan tersebut dapat terlihat. Jika Anda mengedit bagian kanan dan kiri gambar latar belakang dengan benar, gambar tersebut akan terulang secara horizontal tanpa sambungan yang terlihat, seperti satu pola yang berkesinambungan. Yang tersisa hanyalah sedikit mengoreksi gaya dengan mengganti nilai no-repeat (tidak ada pengulangan) dengan repeat-x (ulangi secara horizontal).
Header ( tampilan: blok; tinggi: 405px; latar belakang: url(images/header-bg.png) ulangi-x tengah bawah; )
Beras. 6.5. Gambar latar belakang untuk header
Dalam format PNG-24, file dengan ukuran latar belakang 1325x405 piksel berukuran sekitar 32 KB, dan dalam PNG-8 dengan palet 256 warna, di mana kualitas gradiennya sedikit lebih buruk, sekitar 15 KB. Anda dapat membagi latar belakang menjadi dua komponen - gradien dan gambar dan menyimpan setiap gambar dalam formatnya sendiri, yang akan meningkatkan kualitas tampilan gradien. Namun, 32 KB untuk gambar sebesar itu tidaklah banyak dan beberapa orang akan mempertimbangkan optimasi tambahan untuk “menghemat kecocokan.” Namun, beberapa orang mungkin menganggap pendekatan alternatif untuk membuat header situs web ini berguna, dan Anda dapat melewatinya jika mau.
Pengoptimalan tajukKarena gradien di header berulang secara horizontal, gradien tersebut dapat dipotong dari tata letak dan ditetapkan sebagai gambar latar belakang. Pada Gambar. Gambar 6.6 menunjukkan gradien tinggi 405 piksel yang disiapkan untuk tujuan ini. Format PNG-24 tidak mendistorsi gambar, dan memampatkan gradien dengan baik (volume akhir adalah 402 byte), jadi dalam hal ini Anda harus menggunakannya. Bingkai di sekeliling gambar ditambahkan untuk kejelasan.
Beras. 6.6. Gambar gradien (header-gradient.png)
Gambar dengan siluet hewan dibuat dengan latar belakang transparan dan tinggi 198 piksel; tidak ada gunanya menjadikannya seluruh tinggi header, karena hanya menempati sebagian. Sebuah fragmen gambar ditunjukkan pada Gambar. 6.7. Papan catur menandakan transparansi.
Beras. 6.7. Gambar latar belakang dengan transparansi (header-animal.png)
Karena gambar ini disimpan dalam format PNG-8, yang hanya memiliki satu tingkat transparansi, berbeda dengan 256 tingkat format PNG-24, penting untuk memastikan overlay yang benar pada latar belakang gradien. Untuk melakukan ini, saat menyimpan di Photoshop, Anda perlu menentukan warna tepi (Matte) di dekat bagian tengah gradien, tempat siluet dilapis. Ini kira-kira warna #9de1f0. Dalam hal ini, tidak akan ada garis kotor di sekitar pepohonan dan hewan, dan gambar, jika ditumpangkan pada gradien, akan dianggap sebagai satu kesatuan.
Dua gambar untuk background header sudah disiapkan, kita tuliskan kode HTMLnya.
Dan gaya untuk elemen dan lapisan header-bg.
Header ( latar belakang: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( latar belakang: url(images/header-animal.png) repeat-x tengah bawah; tinggi: 405px; )
Hasilnya, ukuran file menjadi 12,5 KB, bahkan lebih kecil dari yang diharapkan.
Nama situsJudulnya ditulis di atas awan dengan tepian berbulu, sehingga menyulitkan penerapan gradien. Ada dua cara untuk menyiasatinya.
Jelas sekali, metode kedua memiliki sejumlah kelemahan - gambar tidak dapat dipindahkan bahkan beberapa piksel, itu terikat pada gradien, dan jika gradiennya diubah, gambar harus diubah. Jadi kita simpan headernya dalam format PNG-24. Kode HTML akan tetap sama, namun gayanya akan diperluas.
Header ( latar belakang: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( background: url(images/header-animal.png) repeat-x tengah bawah; tinggi: 405px; /* Tinggi header */ perataan teks: tengah; /* Perataan tengah */ ) .header-bg img ( posisi: relatif; /* Posisi relatif */ atas: 40 piksel; /* Pindahkan gambar ke bawah */ )
Perataan tengah dilakukan melalui properti perataan teks yang ditambahkan ke induk tag , dan geser ke bawah melalui properti teratas. Agar properti ini berfungsi, Anda perlu mengatur posisi relatif untuk gambar menggunakan properti position dengan nilai relative .
Pada halaman utama situs, gambar dengan judul ditampilkan seperti biasa; pada halaman lain berfungsi sebagai link ke halaman utama. Untuk melakukan ini, cukup ubah sedikit kodenya:
Nilai /y dari atribut href menunjuk ke halaman beranda dan hanya berfungsi di server web, bukan secara lokal.
Kode akhir untuk header ditunjukkan pada Contoh 6.14.
Contoh 6.14. Tajuk situs
HTML5 CSS 2.1 YAITU Cr Op Sa Fx
Bagaimana cara menangkap singa di padang pasir?
Seringkali, tugas tata letak yang tampaknya sederhana memerlukan struktur markup HTML yang rumit dan penggunaan trik CSS. Memusatkan elemen atau menyelaraskan konten bisa sangat membosankan. Salah satu tugas tersebut adalah menyelaraskan elemen di bagian atas situs sehingga logo berada di kiri dan item menu berada di kanan. Anda dapat menggunakan float dan position:absolute, dan untuk perataan vertikal Anda dapat menambahkan margin dan padding ke elemen yang berbeda. Sepertinya tidak ada yang rumit. Namun jika situs tersebut harus ditampilkan dengan benar di perangkat seluler, banyak masalah yang muncul.
Di bawah ini adalah cara singkat untuk mengatasi masalah ini.
Markup HTML sesederhana mungkin:
Sangat buruk Tautan Pertama Tautan Kedua Tautan KetigaKetinggian header sudah diperbaiki, tambahkan perataan teks: ratakan, untuk elemen anak:
Header ( perataan teks: justify; spasi huruf: 1px; tinggi: 8em; padding: 2em 10%; latar belakang: #2c3e50; warna: #fff; )
Menambahkan tampilan: blok sebaris untuk semua elemen nav sehingga dapat ditempatkan bersebelahan:
Header h1, navigasi header ( tampilan: blok sebaris; )
Untuk mengatribusikan perataan teks: ratakan bekerja sesuai keinginan kita, kita perlu menggunakan sedikit trik dengan elemen semu, yang ditemukan di artikel Teknik grid CSS yang dibenarkan dengan sempurna menggunakan inline-block , oleh Jelmer de Maat:
Header::after ( konten: ""; tampilan: blok sebaris; lebar: 100%; )
Hasilnya adalah perataan horizontal, tanpa menggunakan mengambang Dan posisi: mutlak. Sekarang Anda perlu menyelaraskan elemen secara vertikal. Menggunakan perataan vertikal untuk elemen nav akan ada ketergantungan pada ketinggian blok induk - header. Dan ini tidak sepenuhnya benar. Contoh penggunaan vertical-align: top dan vertical-align: middle pada jsbin. Di bawah ini mungkin metode yang paling mudah untuk penyelarasan vertikal.
Mari kita gunakan elemen semu lagi. menggunakan contoh dari artikel Centering in the Unknown, yang disebutkan oleh Michał Czernow:
Header h1 ( tinggi: 100%; ) header h1::before ( konten: ""; tampilan: blok sebaris; perataan vertikal: tengah; tinggi: 100%; )
Hasilnya adalah apa yang Anda butuhkan:
Ada dua masalah yang harus dipecahkan: tampilan yang benar ketika ada banyak teks di header dan kemampuan beradaptasi. Jika judul situs terlalu panjang, tata letaknya akan mulai bergeser keluar:
Mari kita gunakan trik elemen semu pada header :
kode CSS
header ( perataan teks: justify; tinggi: 15em; padding: 2em 5%; latar belakang: #2c3e50; warna: #fff; ) header::after ( konten: ""; tampilan: blok sebaris; lebar: 100%; ) header > div, navigasi header, div header h1 ( tampilan: blok sebaris; perataan vertikal: tengah; ) header > div ( lebar: 50%; tinggi: 100%; perataan teks: kiri; ) header > div: :sebelum ( konten: ""; tampilan: blok sebaris; perataan vertikal: tengah; tinggi: 100%; )
Terlihat jauh lebih baik:
Sekarang mari kita beralih ke kemampuan beradaptasi. Ada beberapa cara untuk mengatasi masalah ini; Anda tidak bisa mengatur ketinggian header, dan semua elemen internal akan adaptif terhadap ketinggian. Ini tidak memerlukan trik kedua dengan elemen semu, contoh langsung di jsbin.
kode CSS
header ( perataan teks: justify; padding: 2em 5%; latar belakang: #2c3e50; warna: #fff; ) header::after ( konten: ""; tampilan: inline-block; lebar: 100%; ) header h1, navigasi header ( tampilan: blok sebaris; perataan vertikal: tengah; ) header h1 ( lebar: 50%; perataan teks: kiri; padding-top: 0,5em; ) navigasi header ( padding-top: 1em; )
Jika Anda perlu mengatur tinggi header, Anda harus menggunakan trik kedua dengan elemen semu dan menambahkan kueri media untuk layar dengan ukuran berbeda:
@layar media dan (lebar maksimal: 820px)( header ( tinggi: otomatis; ) header > div, header >
Hasilnya adaptif dan terlihat seperti ini di perangkat seluler:
Pada contoh, 820px digunakan untuk kejelasan; pada situs live, tentu saja nilainya harus berbeda, sesuai dengan kebutuhan. Untuk mendukung Internet Explorer 8, Anda harus menggunakan “:” dan bukan “::” untuk elemen semu.
Kode CSS terakhir
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( latar belakang: #1abc9c; font-family: "Lato", sans-serif; transformasi teks: huruf besar; spasi huruf: 1px;) header ( perataan teks: justify ; tinggi: 8em; bantalan: 2em 5%; warna: #fff; ) header::setelah ( konten: ""; lebar: 100%; ) tajuk > div, tajuk > div::sebelum, navigasi tajuk, tajuk > div h1 ( tampilan: blok sebaris; perataan vertikal: tengah; perataan teks: kiri; ) tajuk > div ( tinggi: 100%; ) tajuk > div::before ( konten : ""; tinggi: 100%; ) tajuk > div h1 ( ukuran font: 3em; gaya font: miring; ) header nav a ( padding: 0 0.6em; spasi putih: nowrap; ) header nav a:last -child ( padding-right: 0; ) @ layar media dan (lebar maksimal: 720 piksel)( header ( tinggi: otomatis; ) header > div, header > div h1, navigasi header ( tinggi: otomatis; lebar: otomatis; tampilan : blok; perataan teks: tengah;
Hasil:
Halo semua. Hari ini saya melihat statistik permintaan pencarian yang digunakan orang untuk mengunjungi blog dan menemukan bahwa ada beberapa yang sama sekali tidak relevan. Bukan, bukan blognya, tapi artikelnya.
Salah satunya bagaimana cara memperbaiki header situs? Saya segera memutuskan untuk memperbaiki situasi dan menulis artikel, karena topiknya relevan dan ada pertanyaan di bidang ini.
Secara umum, ada beberapa cara untuk menggulir halaman. Anda dapat menggunakan javascript, tetapi saya tidak terlalu mahir dalam topik ini dan saya baru mempelajarinya. Oleh karena itu, untuk saat ini, kita akan puas dengan CSS. Alhamdulillah, Anda dapat memperbaiki header situs (dan bukan hanya header, tetapi elemen lainnya) dengan “sedikit biaya” :)
Faktanya, metode memperbaiki elemen saat menggulir halaman sangat sederhana, dan Anda akan terkejut betapa mudahnya masalah ini diselesaikan.
Memperbaiki header saat menggulir halamanUntuk memperbaiki header, Anda harus membuat dua blok. Satu - agar dapat memusatkan tutupnya. Dan di dalamnya ada seorang anak yang akan dicatat. Mari kita mulai...
Ini adalah struktur html yang sederhana! Sekarang mari tambahkan gaya!
#headerMain ( lebar:920px; tinggi: 195px; margin:0px otomatis; z-index:0; ) #header ( lebar:920px; tinggi: 195px; latar belakang: url(../img/bg-header.jpg) tidak -ulangi; posisi: tetap; indeks-z: 9999;
Sekarang header akan dipasang di bagian atas layar dan tidak akan bergerak saat digulir.
Saya pikir banyak dari Anda telah memperhatikan bahwa tren sekarang mencakup semakin banyak elemen desain melekat yang tetap terlihat saat pengguna menggulir halaman. Menurut pendapat saya, ini sangat nyaman, terutama jika itu adalah navigasi situs. Inilah contoh yang akan kita lakukan hari ini. Kita akan belajar cara membuat header website animasi menggunakan JQuery dan CSS3 dengan animasi.
Seperti biasa, hal ini dilakukan dalam baris kode minimal dan sangat sederhana, sekaligus sangat efektif. Baiklah, sekarang mari kita mulai pelajarannya.
Tapi pertama-tama saya ingin mengucapkan banyak terima kasih kepada http://www.webdesignerdepot.com dan sekarang mari kita mulai.
dan HTMLKode HTMLnya sangat-sangat sederhana, kita hanya perlu mengatur tag untuk , lalu menulis konten situs di antara tag tersebut:
Header situs terlampir 
Karena ini adalah contoh paling sederhana, di sini kami hanya menambahkan teks di antara tag h1, tetapi Anda juga dapat menggunakan gambar, atau, misalnya, navigasi situs.
kode jQueryCSS adalah cara terbaik untuk mengimplementasikan animasi dan transisi saat ini. Jadi kita akan menggunakan skrip minimal, dan hanya untuk menentukan pemicuan animasi saat menggulir halaman.
Jika nilai posisi gulir halaman lebih besar dari 1, berarti pengguna telah menggulir halaman dan Anda perlu menambahkan kelas “lengket” ke tag header situs. Beginilah cara header situs dipicu dan diperbaiki.
Dan ini kodenya sendiri:
$(jendela).scroll(function() ( if ($(this).scrollTop() > 1)( $("header").addClass("sticky"); ) else( $("header").removeClass ("lengket");
Penting untuk dicatat bahwa menggunakannya dalam contoh ini bukanlah ide yang baik, karena jika penggunaan skrip dinonaktifkan di browser, maka header situs akan diperbaiki dan hanya itu.
CSSKode CSS akan terdiri dari 2 bagian. Kode pertama akan bertanggung jawab atas header situs standar, yang berada pada posisi default. Kode kedua akan bertanggung jawab untuk menampilkan header saat pengguna menggulir halaman. Mari kita lihat seperti apa kode defaultnya:
Header( posisi: tetap; lebar: 100%; perataan teks: tengah; ukuran font: 72px; tinggi garis: 108px; tinggi: 108px; latar belakang: #335C7D; warna: #fff; font-family: "PT Sans ", Sans Serif; )
Sekarang bagian yang menarik: ketika pengguna menggulir halaman ke bawah, maka kelas .sticky akan diterapkan, yang mana kita dapat memberikan tampilan yang benar-benar berbeda yang hanya mampu dilakukan oleh CSS. Kami juga akan mengatur posisi tetap agar header situs kami selalu terlihat.
Dengan menggunakan aturan CSS di bawah ini, kami ingin memperkecil area header itu sendiri saat menggulir, mengubah warna dan tentu saja memperkecil font. Ini kodenya sendiri.
Kesulitan utama dengan tata letak yang lancar adalah memastikan tampilan yang benar pada resolusi yang berbeda, dari tinggi hingga rendah. Karena kami membatasi lebar konten hingga 760 piksel, gambar header harus ditempatkan sedemikian rupa sehingga bagian gambar yang lebih penting sesuai dengan ukuran ini. Pada Gambar. 6.3 menunjukkan cara melakukan ini. Bagian tengah dengan lebar 760px disorot dalam warna gelap; huruf A menunjukkan sisa fragmen dengan lebar yang sama.
Beras. 6.3. Lebar tutup
Sebenarnya penambahan gambar pada header dilakukan melalui gambar latar belakang, yang harus disejajarkan dengan bagian tengah elemen.
Header ( tampilan: blok; /* Untuk browser lama */ tinggi: 405px; /* Tinggi header */ latar belakang: url(images/header-bg.png) bagian tengah bawah tidak boleh diulang; )
Idealnya, gambar harus memiliki lebar 2000 piksel, kemudian pada hampir semua resolusi monitor, gambar akan menampilkan bagian tengah, memotong semua yang tidak muat di jendela. Namun masalahnya adalah pada awalnya gambarnya tidak terlalu lebar, dan Anda tidak ingin menggambar garis-garis hitam yang membentang tanpa henti di sisinya. Salah satu solusinya adalah dengan mengaktifkan pengulangan latar belakang horizontal. Mereka yang memiliki resolusi lebar 1280 piksel atau kurang akan melihat satu gambar, sedangkan pemilik monitor lebar akan dapat mengagumi beberapa hewan dan matahari terbenam secara bersamaan. Di sini penting untuk mengedit gambar agar pas secara horizontal tanpa sambungan (Gbr. 6.4). Gradien disembunyikan untuk kejelasan.
Beras. 6.4. Menyelaraskan gambar secara horizontal
Pada gambar ini letak sambungan ditunjukkan dengan tanda panah dan spasi sehingga sambungan tersebut dapat terlihat. Jika Anda mengedit bagian kanan dan kiri gambar latar belakang dengan benar, gambar tersebut akan terulang secara horizontal tanpa sambungan yang terlihat, seperti satu pola yang berkesinambungan. Yang tersisa hanyalah sedikit mengoreksi gaya dengan mengganti nilai no-repeat (tidak ada pengulangan) dengan repeat-x (ulangi secara horizontal).
Header ( tampilan: blok; tinggi: 405px; latar belakang: url(images/header-bg.png) ulangi-x tengah bawah; )
Beras. 6.5. Gambar latar belakang untuk header
Dalam format PNG-24, file dengan ukuran latar belakang 1325x405 piksel berukuran sekitar 32 KB, dan dalam PNG-8 dengan palet 256 warna, di mana kualitas gradiennya sedikit lebih buruk, sekitar 15 KB. Anda dapat membagi latar belakang menjadi dua komponen - gradien dan gambar dan menyimpan setiap gambar dalam formatnya sendiri, yang akan meningkatkan kualitas tampilan gradien. Namun, 32 KB untuk gambar sebesar itu tidaklah banyak dan beberapa orang akan mempertimbangkan optimasi tambahan untuk “menghemat kecocokan.” Namun, beberapa orang mungkin menganggap pendekatan alternatif untuk membuat header situs web ini berguna, dan Anda dapat melewatinya jika mau.
Pengoptimalan tajukKarena gradien di header berulang secara horizontal, gradien tersebut dapat dipotong dari tata letak dan ditetapkan sebagai gambar latar belakang. Pada Gambar. Gambar 6.6 menunjukkan gradien tinggi 405 piksel yang disiapkan untuk tujuan ini. Format PNG-24 tidak mendistorsi gambar, dan memampatkan gradien dengan baik (volume akhir adalah 402 byte), jadi dalam hal ini Anda harus menggunakannya. Bingkai di sekeliling gambar ditambahkan untuk kejelasan.
Beras. 6.6. Gambar gradien (header-gradient.png)
Gambar dengan siluet hewan dibuat dengan latar belakang transparan dan tinggi 198 piksel; tidak ada gunanya menjadikannya seluruh tinggi header, karena hanya menempati sebagian. Sebuah fragmen gambar ditunjukkan pada Gambar. 6.7. Papan catur menandakan transparansi.
Beras. 6.7. Gambar latar belakang dengan transparansi (header-animal.png)
Karena gambar ini disimpan dalam format PNG-8, yang hanya memiliki satu tingkat transparansi, berbeda dengan 256 tingkat format PNG-24, penting untuk memastikan overlay yang benar pada latar belakang gradien. Untuk melakukan ini, saat menyimpan di Photoshop, Anda perlu menentukan warna tepi (Matte) di dekat bagian tengah gradien, tempat siluet dilapis. Ini kira-kira warna #9de1f0. Dalam hal ini, tidak akan ada garis kotor di sekitar pepohonan dan hewan, dan gambar, jika ditumpangkan pada gradien, akan dianggap sebagai satu kesatuan.
Dua gambar untuk background header sudah disiapkan, kita tuliskan kode HTMLnya.
Dan gaya untuk elemen dan lapisan header-bg.
Header ( latar belakang: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( latar belakang: url(images/header-animal.png) repeat-x tengah bawah; tinggi: 405px; )
Hasilnya, ukuran file menjadi 12,5 KB, bahkan lebih kecil dari yang diharapkan.
Nama situsJudulnya ditulis di atas awan dengan tepian berbulu, sehingga menyulitkan penerapan gradien. Ada dua cara untuk menyiasatinya.
Jelas sekali, metode kedua memiliki sejumlah kelemahan - gambar tidak dapat dipindahkan bahkan beberapa piksel, itu terikat pada gradien, dan jika gradiennya diubah, gambar harus diubah. Jadi kita simpan headernya dalam format PNG-24. Kode HTML akan tetap sama, namun gayanya akan diperluas.
Header ( latar belakang: #00b0d8 url(images/header-gradient.png) repeat-x; ) .header-bg ( background: url(images/header-animal.png) repeat-x tengah bawah; tinggi: 405px; /* Tinggi header */ perataan teks: tengah; /* Perataan tengah */ ) .header-bg img ( posisi: relatif; /* Posisi relatif */ atas: 40 piksel; /* Pindahkan gambar ke bawah */ )
Perataan tengah dilakukan melalui properti perataan teks yang ditambahkan ke induk tag , dan geser ke bawah melalui properti teratas. Agar properti ini berfungsi, Anda perlu mengatur posisi relatif untuk gambar menggunakan properti position dengan nilai relative .
Pada halaman utama situs, gambar dengan judul ditampilkan seperti biasa; pada halaman lain berfungsi sebagai link ke halaman utama. Untuk melakukan ini, cukup ubah sedikit kodenya:
Nilai /y dari atribut href menunjuk ke halaman beranda dan hanya berfungsi di server web, bukan secara lokal.
Kode akhir untuk header ditunjukkan pada Contoh 6.14.
Contoh 6.14. Tajuk situs
HTML5 CSS 2.1 YAITU Cr Op Sa Fx
Bagaimana cara menangkap singa di padang pasir? body ( margin: 0; ) header ( tampilan: blok; latar belakang: #00b0d8 url(images/header-gradient.png) repeat-x; /* Gradient */ ) .header-bg ( latar belakang: url(images/header- animal.png) ulangi-x tengah bawah; /* Hewan */ tinggi: 405px; /* Tinggi header */ perataan teks: tengah; /* Perataan tengah */ ) .header-bg img ( posisi: relatif; / * Posisi relatif */ atas: 40px; /* Pindahkan gambar ke bawah */ )
Seringkali, tugas tata letak yang tampaknya sederhana memerlukan struktur markup HTML yang rumit dan penggunaan trik CSS. Memusatkan elemen atau menyelaraskan konten bisa sangat membosankan. Salah satu tugas tersebut adalah menyelaraskan elemen di bagian atas situs sehingga logo berada di kiri dan item menu berada di kanan. Anda dapat menggunakan float dan position:absolute, dan untuk perataan vertikal Anda dapat menambahkan margin dan padding ke elemen yang berbeda. Sepertinya tidak ada yang rumit. Namun jika situs tersebut harus ditampilkan dengan benar di perangkat seluler, banyak masalah yang muncul.
Di bawah ini adalah cara singkat untuk mengatasi masalah ini.
Markup HTML sesederhana mungkin:
Sangat buruk Tautan PertamaTautan KeduaTautan Ketiga
Ketinggian header sudah diperbaiki, tambahkan perataan teks: ratakan, untuk elemen anak:
Header ( perataan teks: justify; spasi huruf: 1px; tinggi: 8em; padding: 2em 10%; latar belakang: #2c3e50; warna: #fff; )
Menambahkan tampilan: blok sebaris untuk semua elemen nav sehingga dapat ditempatkan bersebelahan:
Header h1, navigasi header ( tampilan: blok sebaris; )
Untuk mengatribusikan perataan teks: ratakan bekerja sesuai keinginan kita, kita perlu menggunakan sedikit trik dengan elemen semu, yang ditemukan di artikel Teknik grid CSS yang dibenarkan dengan sempurna menggunakan inline-block , oleh Jelmer de Maat:
Header::after ( konten: ""; tampilan: blok sebaris; lebar: 100%; )
Hasilnya adalah perataan horizontal, tanpa menggunakan mengambang Dan posisi: mutlak. Sekarang Anda perlu menyelaraskan elemen secara vertikal. Menggunakan perataan vertikal untuk elemen nav akan ada ketergantungan pada ketinggian blok induk - header. Dan ini tidak sepenuhnya benar. Contoh penggunaan vertical-align: top dan vertical-align: middle pada jsbin. Di bawah ini mungkin metode yang paling mudah untuk penyelarasan vertikal.
Mari kita gunakan elemen semu lagi. menggunakan contoh dari artikel Centering in the Unknown, yang disebutkan oleh Michał Czernow:
Header h1 ( tinggi: 100%; ) header h1::before ( konten: ""; tampilan: blok sebaris; perataan vertikal: tengah; tinggi: 100%; )
Hasilnya adalah apa yang Anda butuhkan:
Ada dua masalah yang harus dipecahkan: tampilan yang benar ketika ada banyak teks di header dan kemampuan beradaptasi. Jika judul situs terlalu panjang, tata letaknya akan mulai bergeser keluar:
Mari kita gunakan trik elemen semu pada header :
kode CSS
header ( perataan teks: justify; tinggi: 15em; padding: 2em 5%; latar belakang: #2c3e50; warna: #fff; ) header::after ( konten: ""; tampilan: blok sebaris; lebar: 100%; ) header > div, navigasi header, div header h1 ( tampilan: blok sebaris; perataan vertikal: tengah; ) header > div ( lebar: 50%; tinggi: 100%; perataan teks: kiri; ) header > div: :sebelum ( konten: ""; tampilan: blok sebaris; perataan vertikal: tengah; tinggi: 100%; )
Terlihat jauh lebih baik:
Sekarang mari kita beralih ke kemampuan beradaptasi. Ada beberapa cara untuk mengatasi masalah ini; Anda tidak bisa mengatur ketinggian header, dan semua elemen internal akan adaptif terhadap ketinggian. Ini tidak memerlukan trik kedua dengan elemen semu, contoh langsung di jsbin.
kode CSS
header ( perataan teks: justify; padding: 2em 5%; latar belakang: #2c3e50; warna: #fff; ) header::after ( konten: ""; tampilan: inline-block; lebar: 100%; ) header h1, navigasi header ( tampilan: blok sebaris; perataan vertikal: tengah; ) header h1 ( lebar: 50%; perataan teks: kiri; padding-top: 0,5em; ) navigasi header ( padding-top: 1em; )
Jika Anda perlu mengatur tinggi header, Anda harus menggunakan trik kedua dengan elemen semu dan menambahkan kueri media untuk layar dengan ukuran berbeda:
@layar media dan (lebar maksimal: 820px)( header ( tinggi: otomatis; ) header > div, header >
Hasilnya adaptif dan terlihat seperti ini di perangkat seluler:
Pada contoh, 820px digunakan untuk kejelasan; pada situs live, tentu saja nilainya harus berbeda, sesuai dengan kebutuhan. Untuk mendukung Internet Explorer 8, Anda harus menggunakan “:” dan bukan “::” untuk elemen semu.
Kode CSS terakhir
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic); * ( padding: 0; margin: 0; ) body ( latar belakang: #1abc9c; font-family: "Lato", sans-serif; transformasi teks: huruf besar; spasi huruf: 1px;) header ( perataan teks: justify ; tinggi: 8em; bantalan: 2em 5%; warna: #fff; ) header::setelah ( konten: ""; lebar: 100%; ) tajuk > div, tajuk > div::sebelum, navigasi tajuk, tajuk > div h1 ( tampilan: blok sebaris; perataan vertikal: tengah; perataan teks: kiri; ) tajuk > div ( tinggi: 100%; ) tajuk > div::before ( konten : ""; tinggi: 100%; ) tajuk > div h1 ( ukuran font: 3em; gaya font: miring; ) header nav a ( padding: 0 0.6em; spasi putih: nowrap; ) header nav a:last -child ( padding-right: 0; ) @ layar media dan (lebar maksimal: 720 piksel)( header ( tinggi: otomatis; ) header > div, header > div h1, navigasi header ( tinggi: otomatis; lebar: otomatis; tampilan : blok; perataan teks: tengah;
Hasil:
