İster klasik ister modern yapıda web projesi oluşturun tüm web proelerinde başlangıçta bir anasayfa yer almalıdır. Bu uygulamada web programlama ve grafik canlandırma derslerine ait uygulamaların yer aldığı bir web projesine ait anasayfayı oluşturacağız. Bu işlemleri gerçekleştirirken klasik asp.net kullanarak ağaç yapısından yararlanacağız.

Visual Studio programını açalım.

İsmi Temrinler olan bir klasik web projesi oluşturalım.

Web projelerinin ana sayfalarında sürekli tekrar eden bölümler bir yerde yer alır. Böylece bu tekrar eden bölümleri tüm web sayfalarında sürekli yazmak zorunda kalmayız. Klasik web projelerinde bu işlem için MasterPage şablonundan yararlanılır. Bu şablonu eklemek için proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add komut grubunu seçelim. Buradan Net item komutunu seçelim. Ekrana gelen şablonlardan Web forms Masterpage seçelim. Add diyerek masterpage safyasını projeye ekleyelim. Şablon ismi Site1.Master olarak belirlenir. 

Web sayfasının başlığını "Uygulama Örnekleri" olarak düzenleyelim.

Client-Side library özelliğini kullanarak bootstrap ve jquery kütüphanesini projeye ekleyelim. Gerekli kütüphaneleri masterpage sayfasına dahil edelim.

<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>

Masterpage sayfasında bir header bölümü oluşturalım. "Web Programlama ve Grafik Canlandırma Uygulamaları" başlığı oluşturalım. Arka plan rengi siyah, metin rengi beyaz, ekranın ortasında olmasını sağlayalım. Padding değerini 3 yaparak 4 taraftan boşluklar verelim.

<header class="bg-dark text-white p-3">
    <h1 class="text-center">Web Programlama ve 
Grafik Canlandırma Uygulamaları</h1>
</header>

Web sayfasını çalıştıralım. Masterpage sayfası yardımcı bir şablon olduğu için web sayfası çalışmayacaktır. Bu sayfayı referans alan bir web form sayfası oluşturmamız gerekir. Bunun için proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add komut grubunu, buradan new item komutunu seçelim. Ekrana gelen şablonlardan Web Form With Master page kısmını seçelim. Dosya ismi olarak default.aspx verelim. Add diyelim. Referans alınacak master page sayfasını seçelim. Ok diyerek işlemi tamamlayalım. 

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" 
AutoEventWireup="true" CodeBehind="default.aspx.cs" 
Inherits="Temrinler._default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" 
runat="server">
</asp:Content>

Artık web sayfasını çalıştırabiliriz. Masterpage tarafında yazdığımız başlık ekranda görüntülenecektir. Şimdi article etiketini kullanarak içerik kısmını oluşturalım. İçerik kısmında sol tarafta ağaç yapısını kullanarak bir menü oluşturacağız. Sağ tarafta ise masterpage sayfasını referans alan sayfalar görüntülenecektir. 

<article class="container mt-4">
    <div class="row">
        <div class="col-md-3">
        </div>

        <div class="col-md-9">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" 
runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
</article>

Sol tarafta acordion yapıda menü oluşturacağız. Menü başlığını Temrinler olarak verelim.

<nav class="nav flex-column bg-light p-3" style="height: 100vh;">
    <h5>Temrinler</h5>
    <div class="accordion" id="treeAccordion">

    </div>
</nav>

Şimdi Web Programlama ile ilgili uygulama başlıklarını yazalım. Biz şimdilik 3 uygulama için işlem yapacağız. 

<div class="accordion-item">
    <h2 class="accordion-header" id="headingWeb">
        <button class="accordion-button" type="button" 
data-bs-toggle="collapse" data-bs-target="#collapseWeb" 
aria-expanded="true" aria-controls="collapseWeb">
            Web Programlama
        </button>
    </h2>
    <div id="collapseWeb" class="accordion-collapse collapse show" 
aria-labelledby="headingWeb" data-bs-parent="#treeAccordion">
        <div class="accordion-body">
            <ul class="list-group">
                <li class="list-group-item">Uygulama1</li>
                <li class="list-group-item">Uygulama2</li>
                <li class="list-group-item">Uygulama3</li>
            </ul>
        </div>
    </div>
</div>

Grafik Canlandırma için acordion menü oluşturalım.

<div class="accordion-item">
    <h2 class="accordion-header" id="headingGrafik">
        <button class="accordion-button collapsed" type="button" 
data-bs-toggle="collapse" data-bs-target="#collapseGrafik" 
aria-expanded="false" aria-controls="collapseGrafik">
            Grafik Canlandırma
        </button>
    </h2>
    <div id="collapseGrafik" class="accordion-collapse collapse" 
aria-labelledby="headingGrafik" data-bs-parent="#treeAccordion">
        <div class="accordion-body">
            <ul class="list-group">
                <li class="list-group-item">Uygulama1</li>
                <li class="list-group-item">Uygulama2</li>
                <li class="list-group-item">Uygulama3</li>
            </ul>
        </div>
    </div>
</div>

Uygulamayı çalıştıralım. Sol tarafta menüleri görebiliriz. Masterpage sayfasında footer bölümünü yapalım.

<footer class="bg-dark text-white text-center p-3 mt-4">
    <p>© 2024 Tüm Hakları Saklıdır.</p>
</footer>

Masterpage tarafında gerekli işlemleri gerçekleştirdik. Sıra geldi bu sayfayı referans alan default.aspx sayfasını düzenlemeye.

<div class="container mt-5">
    <h2 class="text-center mb-4">Web ve Grafik Uygulamaları</h2>

    <div class="row">
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h3 class="card-title">Web Programlama</h3>
                    <p class="card-text">
                        Web programlama, internet üzerinde etkileşimli 
uygulamalar ve web siteleri geliştirmek için kullanılan bir süreçtir.
                        HTML, CSS, JavaScript gibi dillerle birlikte 
ASP.NET gibi framework'ler, dinamik içerikler oluşturmayı ve 
kullanıcılarla etkileşimde bulunmayı sağlar.
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-body">
                    <h3 class="card-title">Grafik Canlandırma</h3>
                    <p class="card-text">
                        Grafik canlandırma, verilerin görsel olarak 
sunulmasını ve anlaşılmasını kolaylaştıran bir tekniktir.
                        Çeşitli grafik ve görselleştirme araçları 
kullanılarak, veriler etkileyici ve anlaşılır biçimde temsil edilir.
                        Bu alan, özellikle veri analitiği ve sunumları 
için önemlidir.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

Uygulamayı çalıştıralım. Web sayfasının düzgün bir şekilde çalıştığından emin olalım.