MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme

... konulu sunumlar: "MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme"— Sunum transkripti:

1 MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme
Yrd. Doç. Dr. Yuriy Mishchenko

2 Web Sayfa geliştirilmesi
Web sayfalarının geliştirilmesi üç olasılık var Görsel editörü kullanmak (Front Page, Dreamweaver gibi yazılım) Şablonları kullanmak Özel tasarımı düzenlemek

3 Görsel editörleri (Visual Editors)
Görsel editörü kullanma, en kolay yöntemdir Görsel editörü kullanarak web sayfası click-and-drop şekilde oluşturulabilir, değişikleri hemen incelenebilir, ve birçok teknik beceri ve bilgi gerekmez

4 Görsel editörleri Görsel editörü kullanılmasının disavantajları şudur:
Görsel editörler HTML kodu standart parçalar kullanarak web sayfasını parça parça yazar; sonuç olarak HTML kodu en iyi bir kodu sağlanmayabilir HTML kodunda gerekmeyen parçalar bulunabilir ve dosya çok fazla büyük olabilir, daha yavaş indirilebilir HTML kodu daha sonra günceleştirilmesi daha zor olabilir Görsel editörler, daha standart ve daha basit eylemlere odaklanmış olduğu yüzden birçok durumda özel tasarımların özellikleri gerçekleştiremez Görsel editörler tarafından üretilmiş web sayfaları çok standart ve profesyonel olmayan görünebilir, bu özellikle şirketler için kötü imaj hemen oluşturabilir

5 Web şablonları (Web Templates)
Bırçok durumda, bir amaçlı web sayfasını geliştirmek için belli bir dizayn yok, ve şartnameler sadece genel şekilde bilinmektedir Örneğin, şirket web sitesi, belli bilgi içermeli, formatı aşağı yukarı serbesttir Örneğin, kişisel web sayfası, belli bilgi içermeli, formatı sadece yaklaşık olarak bilinir

6 Web şablonları Bu durumda, web sitesi İnternette var olan birçok şablon kullanarak daha hızlı geliştirilebilir Şablonları belli tasarımlar uygulayıp genel değiştirilebilir bilgi ve metin içermektedir Şablonları, aynı yada yakın format ve tasarım kullanarak, özel bilgi içeren web sitesine yada web sayfasına çevirilebilir Şablonları, yada ucretsiz yada ucretli şekilde birçok İnternetteki web sitelerinden bulunup satın alınabilir

7 Web şablonları Şablonlarla çalışma bu adımlar içerir
Belli bir amaçlı var olan şablonları inceleyip uygun tasarım ve formatı seçmek Şablon dosyalarını satın almak Şablonun HTML dosyalarını anlamak, ve değiştirilecek kısımları belirtmek Şablonun CSS dosyalarını anlamak, ve değiştirilecek kısımları belirtmek Web sayfaları için gereken grafik kaynakları hazırlamak İsteyen şekilde HTML içerikleri ve stil tanımları değiştirmek

8 Web düzenleme (Web layout)
En ileri ve en zor web sayfa/sitesi geliştirilme yaklaşımı, özel bir grafik tasarımı satın alıp yada geliştirip web sayfaları sıfırdan düzenlemek Sonuç olarak, bu yaklaşım en yüksek kaliteli web siteleri geliştirmeye fırsat sunar Aynı zamanda en çok vakit ve en çok beceriler gerekmektedir

9 Web düzenleme Bu yaklaşımdaki adımlar şudur
Belli bir amaçlı uygun tasarım seçip onun için grafik olarak geliştirmek yada grafik tasarımcıdan satın almak Tasarıma göre HTML sayfaların yapısı ve içerikleri belirtmek Tasarıma göre stil tanımları belirtmek Web sayfaları HTML ve CSS kullanarak uygulamak

10 Web düzenleme Web sayfaların grafik tasarımları genellikle bir grafik dosya, bütün web sayfasını gösteren şekilde gelir Bütün gereken grafik kaynaklarının, yani logolar, düğmeler, arka plan ve diğer resimler gibi, ayrı dosyalar olarak gelmesi lazım Bütün grafik elemanlarının, yani font ve arka plan renği, kullanılmış font tip, büyükleri, vb. Belli şekilde belirtmiş gelmesi lazım Bu işi grafik tasarımcı yapar, ve bütün çıktı bir paket olarak vermek zorundadır

11 Web düzenleme Tasarıma göre HTML sayfaların yapısı ve içerikleri belirtmek için, var olan tamamlanmış web sayfası tasarımı dörtgen blok şekilde temsil edilir Bu bloklar bir mantığa göre belirtilir – örneğin, logo bölüm, üst menü bölüm, sol menü bölüm, splaş-resmi, metin parçası, vb. Bu blokların hepsi, HTML sayfası içinde “div”-blok olarak uygulanabilir Sonuç olarak, HTML sayfası birkaç “div” sırası şeklinde oluşturulur

12 Web düzenleme Bu şekilde belirtilmiş sayfa-bloklarının tasarıma göre yerleştirilmesi gerekiyor Bunun için, var olan tamamlanmış web sayfası tasarımından bütün blokların özellikleri belirtilir, yani pozisyon, rengi, kullanılacak resimler, kullanılacak font, padding, margin bölümler, vb. Bu özellikleri herhangi grafik editörü ile belirtilebilir, örneğin paint kullanarak belirtilebilir Bu özellikleri, CSS sayfası içinde ilişkili sayfa bloklarına uygulanır

13 Web düzenleme Açılan menü gibi dinamik davranma gerekirse, o CSS yada javascript kullanarak uygulanmış HTML ve CSS sayfası üstüne eklenir

14 HTML ve CSS pratik çalışma
İki HTML ve CSS kullanan web şablonu var, onların üstünde yeni iki web sayfası geliştireceğiz Kaynaklar Çalışma – calisma.txt + google-translate + google-translate