İNTERNET PROGRAMLAMA 2 A S P. N E T. Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

Transkript

1 İNTERNET PROGRAMLAMA 2 A S P. N E T Marmara Teknik Bilimler MYO / Hafta 4 MasterPage

2 Bir web sitesi birden fazla sayfadan oluşur. Bu sayfalarda içerik değişirken her sayfada tekrarlanan ögeler ve özellikler vardır. Web sitesi hazırlanırken bir şablon oluşturarak şablon üzerinde içerik değişikliği ile sayfalar kolaylıkla hazırlanabilir. Ancak sayfa sayısı arttıkça web sitesinde güncelleme yapma bütün sayfaların tek tek elden geçirilerek değiştirilmesi anlamına gelmektedir. Bu durum zaman konusunda tasarımcılara çeşitli sıkıntılara sebep olacaktır. 2

3 CSS ile; web sitesinin sayfalarının özelliklerine doğrudan müdahale edilebilir. Bu şekilde sitenin tüm sayfalarının stil özellikleri tek bir yerden kontrol edilerek kolaylıkla güncelleme yapılabilir. Ancak tüm sayfalarda yer alan menü, resim, logo vb. içerik değişikliğinde bu yöntem işe yaramayacaktır. ASP.NET in yeni sürümleri ile gelen Anasayfa (MasterPage) özelliği, bu ihtiyacın karşılanması için büyük kolaylık sağlamaktadır. 3

4 MasterPage kullanımı ile birlikte sitenin tasarımı oluşturulmaktadır. MasterPage üzerinde sabit kalması ve değişmesi istenen alanlar belirlenir. MasterPage üzerinde yapılan bir değişiklik programlama yazılımı ile MasterPage kullanılan tüm sayfalarda otomatik olarak güncellenmektedir. Sonuç 4

5 Sabit Alanlar İçerik Alanı 5

6 MasterPage sayfaları standart ASP.NET sayfaları ile benzerlik göstermektedir. Dosya uzantısı.master dır. ASP.NET direktifi ile başlarken MasterPage direktifi ile başlamaktadır. Temel bu iki fark haricinde tasarımı, standart ASP.NET sayfaları ile aynıdır 6

7 Master Page Oluşturma Solution Explorer alanında proje adı seçiliyken; Website / Add New Item Master Page tıklanır. 7

8 Master Page Oluşturma MasterPage sayfasında tüm sayfalarda görüntülenmesi istenen alanlar belirlenebilir. Sayfalara özgü alanlar ise ContentPlaceHolder kontrolü ile belirlenir. ContentPlaceHolder kontrolü, MasterPage sayfalarından türeyen sayfalarda içeriği değişen alanları ifade eder. 8

9 Master Page Oluşturma Visual Studio, yeni eklenen MasterPage sayfasına 2 tane ContentPlaceHolder kontrolü ekler: Sayfa tanımlamaların yapılması için; head etiketi içinde, İçeriğin eklenmesi için body etiketi içindedir. 9

10 Master Page Oluşturma 10

11 İçerik Sayfası Oluşturma / Metot-1 Website / Add Content Page 11

12 İçerik Sayfası Oluşturma / Metot-1 Her eklenen Content Page, Default.aspx adıyla eklenir. Bu isim, Solution Explorer alanında ilgili sayfa üzerinde sağ tıklanarak açılan menüde gelen Rename seçeneğiyle değiştirilebilir. 12

13 İçerik Sayfası Oluşturma / Metot-1 13

14 İçerik Sayfası Oluşturma / Metot-1 default.aspx hakkimizda.aspx iletisim.aspx 14

15 İçerik Sayfası Oluşturma / Metot-2 Website / Add New Item Web Form Select Master Page seçeneği işaretlenmelidir. 15

16 İçerik Sayfası Oluşturma / Metot-2 Açılacak pencereden içerik sayfasının bağlanacağı MasterPage seçilir. Bir web projesinde birden fazla MasterPage kullanılabilir. 16

17 İçerik Sayfası Oluşturma / Metot-2 Bu metodun ilk metottan en önemli farkı; sayfa isminin, Add New Item penceresinde tanımlanabiliyor olmasıdır. 17

18 İçerik Sayfası Oluşturma MasterPage sayfasına bağlı olarak eklenen içerik sayfasının direktifi ile başlayan satırda, içerik sayfasının hangi MasterPage sayfasından türetildiği belirtilmektedir. 18

19 İçerik Sayfası Oluşturma MasterPage sayfasında Form etiketi kullanıldığı için içerik sayfasının kodlarında Form etiketi yer almaz. MasterPage sayfaları tarayıcıda tek başlarına görüntülenmez. Görüntülenmek istenmesi durumunda MasterPage sayfasına bağlı olarak oluşturulan bir içerik sayfası ile görüntülenmelidir. 19

20 ö r n e k u y g u l a m a HTML CSS JS kullanılarak hazırlanmış bir web sayfasını ASP.NET yapısı içinde MasterPage kullanarak düzenleyiniz. 20

21 ö r n e k u y g u l a m a Adım1 site adı: 03_bolumsonu_ornekuygulama Yeni bir web sitesi tanımlanır. File / New / Web Site ASP.Net Empty Web Site 21

22 ö r n e k u y g u l a m a Adım2 Site içine MasterPage sayfası eklenir. WebSite / Add new Item Master Page 22

23 ö r n e k u y g u l a m a Adım3 arackiralama klasörü içindeki dosyalar web sitesine ait klasör içine (03_bolumsonu_ornekuygulama) kopyalanır. 23

24 ö r n e k u y g u l a m a Adım4 index.html sayfası web editöründe açılır. head aralığı içindeki harici stil sayfası çağırma kodu, MasterPage içindeki head aralığına kopyalanır. 24

25 ö r n e k u y g u l a m a Adım5 index.html sayfası body aralığı içindeki üst kısım div tanımlamaları, MasterPage içindeki body başlangıç etiketinin hemen altına kopyalanır. 25

26 ö r n e k u y g u l a m a Adım6 MasterPage kaydedilir. Yeni içerik sayfası eklenir (WebSite / Add Content Page). 26

27 ö r n e k u y g u l a m a Adım7 WebSite / Add Content Page seçeneğiyle MasterPage e bağlı yeni içerik sayfaları eklenir ve bu sayfa/içerik düzenlemesi yapılır. İçerik alanına ait stil tanımlamaları; MasterPage içinden yapılır. 27

28 ö r n e k u y g u l a m a Ana Sayfa Araçlarımız Ofislerimiz İletişim sayfaları hazırlanmıştır. 28

29 U Y G U L A M A MasterPage yapısını kullanarak 5 sayfalı bir web sitesi oluşturunuz. Web sitesinin yayın alanı sizin tarafınızdan belirlenecektir. Site içinde; Sunucu kontrolleri Doğrulama kontrolleri CSS biçimlendirmeleri CSS menü yapısı (dikey veya yatay) bulunacaktır. Yapılan çalışma, ekran görüntüleriyle birlikte rapor haline getirilip çıktısı alınacaktır. 29