Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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

Benzer bir sunumlar


... konulu sunumlar: "MIT505 İnternet ve Web Programlama: Web Şablonları ve Web düzenleme Yrd. Doç. Dr. Yuriy Mishchenko."— 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 14http://www.scinetcentral.com/~mishchenko/MIT504.html


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

Benzer bir sunumlar


Google Reklamları