Buradasın
ASP.NET ve Bootstrap ile Dinamik Web Sitesi Oluşturma Eğitimi
youtube.com/watch?v=P5044vA4EtMYapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan web geliştirme eğitimidir. Eğitmen, izleyicilere ASP.NET ve Bootstrap kullanarak dinamik bir web sitesi nasıl oluşturulacağını adım adım göstermektedir.
- Video, Visual Studio 2015 kullanarak boş bir web projesi oluşturma ile başlayıp, Bootstrap ve jQuery kütüphanelerinin projeye eklenmesi, master page oluşturma, menü ve footer tasarımı, jumbotron eklemesi ve kart görünümü oluşturma gibi konuları kapsamaktadır. Ayrıca Bootstrap'un 12 birimlik grid sistemini kullanarak sayfayı düzenleme, responsive tasarım ve stil verme teknikleri de detaylı olarak anlatılmaktadır.
- Eğitim, temel web geliştirme tekniklerini öğrenmek isteyenler için hazırlanmış olup, ilerleyen aşamalarda veritabanı oluşturma, verileri çekme ve admin paneli yapımı gibi konuların da işleneceği belirtilmektedir.
- 00:01ASP.NET ile Dinamik Web Sitesi Oluşturma
- Video, ASP.NET ile dinamik bir web sitesi nasıl yapılacağını anlatmayı amaçlıyor.
- Visual Studio 2015 kullanılarak, posttan faydalanılacak ve lokal veritabanı (Local DB) kullanılacak.
- Lokal DB 2014 yüklü değilse kurulması gerekiyor.
- 00:52Proje Oluşturma ve Bootstrap Ekleme
- Visual Studio'da yeni bir web projesi oluşturuluyor ve C# dil seçeneği belirtiliyor.
- Bootstrap dosyaları indirilerek CSS klasörüne, jQuery dosyası ise JS klasörüne ekleniyor.
- Master page (şablon sayfası) oluşturuluyor, bu sayfa diğer sayfalara giydirecek.
- 05:36Master Page Tasarımı
- Bootstrap'ın dökümantasyonundan navbar (menü) örneği kopyalanarak master page'e ekleniyor.
- Menüde "Home" yerine "Anasayfa" yazısı değiştiriliyor ve açılır menü ekleniyor.
- Jumbotron eklenerek ana sayfaya görsel olarak daha hoş bir görünüm veriliyor.
- 12:11Bootstrap Özelliklerinin Kullanımı
- Bootstrap'ın container özelliği kullanılarak jumbotron'un etrafında boşluk oluşturuluyor.
- Ana sayfaya alt tarafına üç resim, başlık ve açıklama eklemek için kart tasarım örneği inceleniyor.
- Üç farklı renkli (yeşil, yeşil2, mavi) 600x400 piksel boyutunda resimler oluşturulup projeye img klasörüne ekleniyor.
- 16:11Bootstrap ile Kart Yapısı Oluşturma
- Deve class'lı bir kart oluşturuluyor, içine img etiketi ile bir resim ekleniyor.
- Kartın altına div class="kart-body" ekleniyor, içinde h5 başlığı ve 200 karakterlik açıklama paragrafu bulunuyor.
- Kartın altına ASP butonu yerleştiriliyor ve "Detay" yazısı veriliyor.
- 17:52Bootstrap'un 12 Kolon Sistemi
- Bootstrap sayfayı mantıksal olarak 12'ye bölmüş ve bu bölümleri kullanabilmemizi sağlıyor.
- Sayfada üç kart oluşturmak için 12 birimi dört'e bölerek üç parçaya ayırma işlemi yapılıyor.
- Row div'i oluşturularak içinde kolon div'i ekleniyor ve orta büyüklükteki ekran için "col-md-4" sınıfı kullanılarak 12'den 4 birim kullanılıyor.
- 19:38Responsive Tasarım Örneği
- Aynı mantıkla iki tane daha kart eklenerek toplam üç kart oluşturuluyor.
- Bootstrap'un esneklik özelliğinden yararlanılarak sayfa mobil görünümünde de resimlerin altında yazıların tam oturduğu görülmüyor.
- Responsive bir tasarım yapılmış oluyor.
- 21:07Farklı Bir Satır Örneği
- Sayfanın 4 birimlik kısmına resim, 8 birimlik kısmına yazı koymak için aynı mantık kullanılıyor.
- Row div'i oluşturulup içinde "col-md-4" sınıfıyla resim ve "col-md-8" sınıfıyla yazı yerleştiriliyor.
- Resmin boyutunu ayarlamak için "img-thumbnail" sınıfı kullanılıyor.
- 23:19Footer Bölümü Oluşturma
- Sayfanın alt tarafında değişmeyen footer alanı oluşturuluyor.
- Footer için "text-center" sınıfı kullanılarak yazılar ortalanıyor.
- Footer'ın arka plan rengi siyah, yazı rengi beyaz olarak ayarlanıyor ve padding değeri verilerek görünüm iyileştiriliyor.
- 25:30Gelecek Aşamalar
- Bir sonraki aşamada veritabanı oluşturulup bilgiler eklenecek.
- Veritabanındaki bilgiler sayfaya çekilecek.
- Admin paneli oluşturulacak ve veriler panel üzerinden eklenebilecek.