Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan teknik bir eğitim içeriğidir.
- Video, MVC uygulamasında layout kavramının nasıl kullanılacağını ve CSS ile web sayfalarının arka planının nasıl değiştirileceğini anlatmaktadır. İlk bölümde layout kavramının değişmeyecek kısımları (menü, logo, linkler) ve değişecek kısımları (render body) nasıl ayırdığı açıklanırken, ikinci bölümde CSS kodlarını düzenleyerek sayfa arka planını değiştirme süreci adım adım gösterilmektedir.
- Eğitim, teorik bilgilerin yanı sıra uygulama üzerinde pratik örnekler içermekte, Chrome geliştirici aracının kullanımı ve önbelleği temizleme yöntemleri de gösterilmektedir. Bu sayede, CSS ve JavaScript değişikliklerinin tek bir yerde yapılabildiği ve bu değişikliklerin tüm sayfalara nasıl uygulanabileceği anlatılmaktadır.
- 00:01MVC Uygulamasında Layout Kavramı
- Önceki derste Bansov isimli tema MVC uygulamasına aktarılmış ve gerekli givler oluşturulmuştu.
- Her içerik ayrı sayfalara aktarılırken, menü, logo, linkler ve gerekli CSS, JavaScript içerikleri her sayfaya tekrar tekrar eklendi.
- Bu yöntem işleri zorlaştırırken, layout kavramı ile değişmeyecek kısımlar layout'ta, değişecek kısımlar ise render body olarak işaretlenebilir.
- 01:53Layout Kavramının Avantajları
- Render body eklenen alanlar değiştirilebilir alan olarak işaretlenir ve sadece bu alanlara içerik eklenir.
- CSS veya JavaScript üzerinde değişiklik yapmak istendiğinde, her sayfada tek tek değişiklik yapmak yerine, layout'ta yapılan değişiklik tüm sayfalarda etkili olur.
- Layout kavramı sayesinde tek bir CSS dosyası kullanılarak tüm sayfalarda menü, logo gibi sabit içerikler yönetilebilir.
- 04:12Layout'ı Uygulamaya Ekleme
- Layout'ı uygulamaya eklemenin iki yolu vardır: view klasörüne shared isminde bir klasör ekleyip MVC 5 layout page'i eklemek veya view oluştururken layout seçeneğini kullanmak.
- Layout sayfası eklendiğinde, arka tarafta Bootstrap içeriği otomatik olarak uygulamaya kurulur.
- Layout sayfasında navbar ve render body gibi temel bileşenler bulunur.
- 05:43Layout'ı Uygulama Sayfalarına Uygulama
- Index sayfasında menü, alt kısım ve footer sabit kalırken, orta kısım render body olarak işaretlenir.
- Diğer sayfalar (kontakt, servis, blok) için de benzer şekilde layout uygulanır ve sadece değişen içerikler render body'ye eklenir.
- Layout'a bağlandıktan sonra, her sayfada layout'tan gelen CSS ve JavaScript içerikleri otomatik olarak çalışır.
- 11:28Layout'ın Kullanımı
- Layout'ta yapılan değişiklikler (örneğin navbar arka plan rengi) tüm bağlı sayfalarda etkili olur.
- Layout'ta yapılan CSS değişiklikleri, tüm bağlı sayfalarda otomatik olarak uygulanır.
- 12:09CSS Stil Değişikliği
- CSS stilini bulmak için "banzo içerisinden cssing stil" araması yapılıyor.
- "Inverse" stilinin background color değeri değiştiriliyor.
- Değişikliğin hemen etkili olması için F12 tuşuna basıp Chrome geliştirici aracında önbelleği boşaltma işlemi yapılıyor.
- 13:27Layout Avantajları
- CSS değişikliği sadece layout içerisinde tanımlandığı için tüm sayfalara aynı etki kazandırıyor.
- Her sayfada sadece orta kısımlar, üstteki menü ve alttaki footer kısmı hariç olan her şey layout'tan geliyor.
- Layout, CSS değişikliklerini tek bir yerden yaparak tüm sayfalara uygulama imkanı sunuyor.