Merhaba arkadaģlar ben YbsSoftware adına Güven AYDOĞDU. Bu dersimizde hazır Ģablonumuzu Visual studio ortamına nasıl aktaracağız onu göreceğiz. Öncelikle yapmak istediğimiz siteye göre Ģablon buluyoruz. Tabiki Ģablonumuzun.psd dosyası olması gerekiyor.(eğer Ģablonumuz.html dosyası Ģeklinde ise psd dosyası yok ise dersimizde Photoshop ile yaptığımız adımları atlayıp projenize devam edebilirsiniz.) ġablonumuzu Photoshop programında açıyoruz. Ben Ģablon üzerinde değiģiklik yapmadım siz isterseniz değiģiklik yapıp daha sonra kaydedebilirsiniz. Şekil 1 : Şablonumuzun Photoshopda açılmış hali ġablonumuzu Photoshop programında açıyoruz. Kendi isteklerimize göre değiģikliklerimizi yapıyoruz ve dilimliyoruz. (Ben değiģiklik ve dilimleme yapmadım.) Sıra
geldi dosyamızı kaydetmeye. Kaydetme iģlemi için Ģu adımları izliyoruz. File- Save for Web komutunu veriyoruz. Gelen kaydetme ekranında değiģiklik yapmadan save diyoruz. Şekil 2 : Photoshop save for web Bu ekranda Save dedikten sonra karģımıza baģka bir pencere açılıyor. Gelen pencerede ise projemizi nereye kaydedeceğimizi seçiyoruz. Önemli bir nokta da Ģu Kayıt türünü Html and image olarak seçmemiz gerekiyor ki hem resim dosyalarımız hemde html dosyamız kaydedilsin. Diğer ayarları aģağıdaki resimdeki gibi ayarlıyoruz.
Şekil 3: Kaydetme ayarları Evet arkadaģlar Ģablonumuzu düzenledik, dilimledik ve kaydettik Ģimdi sıra hazırladığımız Ģablonu Visual Studio ortamına aktarmaya geldi. Bunun için Visual Studiomuzu açıyoruz ve yeni bir web projesi oluģturuyoruz. ( Visual Studio 2010 kullananlar Asp.net Empty Web Application ı seçmeleri gerekir. Aksi halde Visual Studionun hazır Ģablonu yüklenir. BoĢ bir proje oluģturduktan sonra add- new item komutuyla projemıze yeni bir sayfa ekliyoruz ve ismini Default.aspx olarak belirliyoruz.). Projemizi oluģturduk. ġimdi kaydettiğimiz html dosyasının kaynak kodlarını almamız gerekiyor. Bunun için aģağıdaki adımları izliyoruz ;
Şekil 4: Html dosyasından kaynak kodları alma. kopyalıyoruz. Html dosyamızı not defterinde açtık. Buradan <table> </table> tagları arasını
Şekil 5: <table>...</table> tagını kopyalıyoruz. Kopyaladığımız <table></table> taglarını Default.aspx dosyamızın Source kısmındaki <div></div> arasına yapıģtırıyoruz. Projemiz aģağıdaki Ģekilde olacaktır.
Html dosyamızdan body tagımızı kopyalıyoruz. Çünkü html dosyamızdaki body tagımızın özellikleri farklı. ġablonumuzun aynı Ģekli alması için bu özellikleri body tagımıza vermemiz lazım. AĢağıdaki adımları izliyoruz. Kopyaladığımız kısmı aspx dosyamızda source kısmında bulunan <body> tagımızla değiģtiriyoruz. Aynı Ģekilde <meta> tagını kopyalıyoruz ve source kısmında <title></title> taglarının altına yapıģtırıyoruz.
Bu iģlemi yaptıktan sonra <body> ve <meta> taglarımız aģağıdaki Ģekli alıyor. Source kısmında yapmamız gereken değiģiklikler bu kadar arkadaģlar. Design kısmına geçiyoruz. Ve projemiz Ģu Ģekilde açılıyor.
Resimlerimiz gözükmüyor. Bunun nedeni image klasörünün projemizin dizininde yer almamasından kaynaklanıyor. Bunun için Photoshopta düzenlediğimiz Ģablonu kaydederken image adında bir klasörde kaydettik. Bu klasörü kopyalayıp projemize eklememiz lazım.
Bu Ģekilde image klasörümüzü kopyalıyoruz. Visual Studio yu açıyoruz ve projemize image klasörünü yapıģtırıyoruz.
Resimlerimizin bulunduğu klasorü projemize ekledik. YapıĢtırdıktan sonraki görüntümüz Ģu Ģekilde olmalıdır.
Evet arkadaģlar tüm iģlemlerimizi yaptık. Bakalım Ģablonumuz resimleriyle birlikte geldimi. Projemizi çalıģtırıyoruz. (F5) Evet Ģablonumuz gayet güzel bir Ģekilde geldi. Bu dersimiz bu kadar bir sonraki derste görüģmek üzere. Ġyi çalıģmalar.