İçerik düzeninin temelleri - kurs 3.900 RUB. Hexlet'ten, eğitim 18 saat, Tarih: 1 Aralık 2023.
Miscellanea / / December 04, 2023
Günümüzde stil sayfaları, bir sayfadaki metin ve blokların şekillendirilmesi için harika fırsatlar sunmaktadır: arka plan, renk, ses ve video kullanımı. Tüm bu unsurlar, kullanıcılar için renkli ve erişilebilir siteler oluşturmanıza olanak tanır. Yeni seçicileri, sözde sınıfları ve sözde elemanları öğrenmek için çok zaman harcandı. İçeriği olağanüstü bir şekilde stilize etmenize olanak tanır.
Testler
Bunlar kursu tamamladıktan sonra tamamlamanızı önerdiğimiz pratik görevlerdir. Ödevler, programlama konusunda ek deneyim kazanmanıza ve edindiğiniz becerileri pekiştirmenize yardımcı olacaktır. Genellikle 3-5 testi tamamlamanızı öneririz. Ancak işe yaramazsa umutsuzluğa kapılmayın. Daha sonra onlara geri dönün.
1. giriiş
İçerikle çalışmak bir proje oluştururken temel bir bölümdür. Güzel animasyonların, blokların ve resimlerin arkasında gizli içerik var. Kullanıcı siteye gelir veya bunun için bir uygulama açar. Bu dersimizde ders boyunca işlenecek konulara kısaca değineceğiz.
teori
2. Kutu Modeli ve CSS
Sayfada görüntülendiğinde öğelerin boyutunu hangi CSS özellikleri etkiler? Kutu modeli kavramını hatırlayalım ve bir öğenin dış/iç dolgusunu ve görünür sınırlarını ayarlamak için kenar boşluğu, dolgu ve kenarlık özelliklerinin nasıl çalıştığını inceleyelim. Kutu modelinin standart davranışını değiştiren box-sizing özelliğini tanıyalım
teori
3. Metin stilleri
Sayfa oluşturmak her şeyden önce metinle çalışmaktır. Tasarım ne kadar güzel olursa olsun, bilgilerin okunması zor veya imkansız ise kullanıcı sayfadan hızlı bir şekilde ayrılacaktır. Bu derste metin stilinin temel özelliklerini tanıyacağız.
teori
testler
egzersiz yapmak
4. Yazı tipleri ve onlarla çalışma
“Yazı tipleriyle oynamak” ifadesini duydunuz mu? Bunu yapmanın zamanı geldi. Yazı tiplerini CSS kullanarak bağlamayı, metin boyutunu kontrol etmeyi, tasarımı ve satır aralığını ayarlamayı öğreniyoruz. Dersin sonunda 6 farklı metin stilini aynı anda ayarlayabileceğiniz genelleştirilmiş yazı tipi özelliğini inceleyeceğiz.
teori
testler
egzersiz yapmak
5. Listeler
Listeler metnin ayrılmaz bir parçasıdır. İlgili parçaları anlamlarına göre birleştirerek gruplandırmanıza olanak tanır. Bu derste, HTML'deki mevcut liste türlerini inceleyeceğiz, iç içe yerleştirme listeleri üzerinde pratik yapacağız ve stil listesi işaretçileri konusuna değineceğiz.
teori
testler
egzersiz yapmak
6. Sütunlar
CSS kullanarak çok sütunlu bir dergi düzeni oluşturmak sorunluydu. CSS3 standardının ortaya çıkışıyla birlikte, otomatik içerik aktarımına sahip sütunlar oluşturmayı mümkün kılan yeni bir modül ortaya çıktı - CSS Çok Sütunlu Düzen. CSS Sütunları modülünün yeteneklerini ve bu metin şekillendirme yönteminin getirdiği sınırlamaları inceleyelim.
teori
testler
egzersiz yapmak
7. Birimler
Tıpkı gerçek dünyada olduğu gibi, düzen dünyası da öğe boyutlarını, dolguyu, metin boyutunu vb. belirtmek için ölçü birimlerini kullanır. Bu derste temel ölçü birimleri ve bunların sitedeki öğelerle ilişkileri hakkında bilgi sahibi olacağız. Göreli ve mutlak birimler kavramını inceleyelim ve em ile rem birimleri arasındaki farkı tanımlayalım
teori
testler
egzersiz yapmak
8. Medya öğeleri
Web sitesi ziyaretçileri yalnızca metin okumayı sevmez, aynı zamanda bilgileri medya öğeleri aracılığıyla da algılar: resimler, video, ses. Bunları doğru bir şekilde nasıl ekleyebilirim ve tarayıcı farklılıklarını nasıl dikkate alabilirim? Sitedeki görselin alt kısmında neden küçük bir girinti var? Bunu ve biraz daha fazlasını derste inceleyelim.
teori
testler
egzersiz yapmak
9. Tablolar
Tablolar bir tasarım tasarımcısının kabusudur. Bunları oluşturmak için çok sayıda etiket kullanılır ve küçük hatalar havayı bozabilir. Bu dersimizde adım adım basit ve karmaşık tabloların oluşturulmasını inceleyeceğiz, hataların nereden kaynaklanabileceğini ve nasıl önlenebileceğini anlayacağız. Dersin sonunda güvenle masa oluşturabilecek ve onlardan korkmayı bırakabileceksiniz.
teori
testler
egzersiz yapmak
10. Formlar
Formlar bir web sayfasının önemli bir etkileşimli öğesidir. Bağlantılar gibi formlar da kullanıcı ile sayfa arasında etkileşim sağlayarak veri göndermenize olanak tanır. Form oluşturmayı, metin alanları, seçim alanları, listeler ve düğmeler eklemeyi öğrenelim. Formların engelliler için erişilebilirliği konusuna da değinelim
teori
testler
egzersiz yapmak
11. Seçiciler
Bu derste öğeleri sınıfa, tanımlayıcıya veya etikete göre seçmemize olanak tanıyan basit seçicileri öğrendik ve test ettik. Sayfadaki bir öğeyi başka nasıl seçebilirsiniz? Bu derste ilgili ve komşu seçicileri analiz edeceğiz, seçicilerin özniteliklere göre nasıl kullanılacağını öğreneceğiz
teori
testler
egzersiz yapmak
12. Sözde sınıflar
CSS'de seçiciler konusuna devam edelim ve sözde sınıf kavramını tanıyalım. Çift veya tek öğeleri seçmek için bunları nasıl kullanacağımızı, yeni vurgulu stilleri nasıl ekleyeceğimizi öğrenelim Bir öğenin üzerinde fare ve yalnızca belirli bir öğe kullanıldığında neden öğelerin bile böyle olacağı sözde sınıf. Eleman durumlarını ve yapısal sözde sınıfları anlayalım
teori
testler
egzersiz yapmak
13. Sözde elementler
Sayfada eksik öğeler mi var? Sözde öğeler kurtarmaya gelir - CSS kullanılarak oluşturulan öğeler. Bu dersimizde sözde elemanların nasıl oluşturulduğuna, neden ihtiyaç duyulduğuna ve hangi özelliklere sahip olduklarına bakacağız. Liste işaretleyicilerinin CSS'de nasıl stillendirildiğini görelim
teori
testler
14. Taşma
Taşma, bir kabın içindeki içeriğin kabın boyutundan daha büyük olduğu bir durumdur. Bu durum deneyimli bir düzen tasarımcısı için bile düzeni bozabilir. Bu derste bununla ne yapacağımızı ve overflow özelliğini kullanarak içerik gizlemeyi nasıl yöneteceğimizi öğreneceğiz. Text-overflow özelliğine bakalım ve yeterli alan yoksa metinlere nasıl üç nokta ekleyeceğimizi öğrenelim
teori
testler
egzersiz yapmak
15. CSS Değişkenleri
Bir web sitesinde arka planı aynı renkte olan bir düzine bloğun bulunduğunu hayal edin. Bu renklerin hepsini değiştirmeniz gerekiyor. Her seçicideki rengi sürekli değiştirmeden bunu nasıl yapacağımızı ve değişkenlerin nasıl yardımcı olabileceğini bu derste öğreneceğiz. Değişkenlerin nasıl oluşturulduğuna ve kullanıldığına bakalım, kapsamı ve global değişkenlerin neden seçici başına değişkenlerden daha iyi olduğunu öğrenelim
teori
testler
16. Arka plan
Bir düzen tasarımcısı sıklıkla yalnızca tablolar, listeler, metin, medya öğeleri ve formlar gibi belirli öğeleri değil, aynı zamanda stillendirme ihtiyacıyla da karşı karşıya kalır. Bazen içinde bulundukları blokları da stilize etmeniz gerekir. Bunu yapmak için içerikli bloğun arka planını ayarlayabilirsiniz ve bu dersimizde bunu arka plan özelliğini kullanarak nasıl yapacağımızı öğreneceğiz. Renk ve görüntü ayarlama özelliklerini inceleyelim, arka planın nasıl konumlandırılacağını ve boyutunun nasıl ayarlanacağını öğrenelim
teori
testler
17. Degradeler
Bir bloğa stil vermenin tek yolu tek renkli bir arka plan veya resim değildir. Sanatçılar ve tasarımcılar arka planlar oluşturmak için genellikle degradeleri kullanırlar; yani bir renkten diğerine yumuşak geçişler. Bu derste doğrusal ve radyal degradelerin nasıl oluşturulacağını öğreneceğiz. Degradeleri ve püf noktalarını kullanarak renkler arasında keskin geçişler oluşturmayı inceleyeceğiz ve ayrıca renk tekerleğini ve onun yardımıyla degradeler için renk kombinasyonlarını nasıl bulacağımızı öğreneceğiz.
teori
egzersiz yapmak
18. Bağımsız iş
Edinilen teoriyi pekiştirmenize olanak tanıyan ek görevler
19. Ek materyaller
Hexlet ekibinin küratörlüğünü yaptığı makaleler ve videolar. Kursun konusuna daha derinlemesine dalmanıza yardımcı olacaktır