ÜNİTE. İÇERİK YÖNETİM SİSTEMİ Okt. Mustafa AKBUĞA İÇİNDEKİLER HEDEFLER JOOMLA GÖRSEL ÖZELLEŞTİRME

Transkript

1 HEDEFLER İÇİNDEKİLER JOOMLA GÖRSEL ÖZELLEŞTİRME JOOMLA Görsel Özelleştirme JOOMLA'ya Hazır Tema Kurulumu Artisteer Programının Kurulumu Artisteer Programının Yönetimi Görsel Arayüz Hazırlama İÇERİK YÖNETİM SİSTEMİ Okt. Mustafa AKBUĞA Bu üniteyi çalıştıktan sonra; Joomla'ya hazır tema yükleyip yönetebilecek, Artisteer programının kurulumunu yapabilecek, Artisteer programına ait menülerin ne işe yaradığını öğrenebilecek, Web sistelerine özel şablonlar yapabileceksiniz. ÜNİTE 8

2 GİRİŞ Web sitelerini ziyaret edenler başlangıçta arama motoruyla arama yaptıkları için siteleri bulunca sadece sitenin içeriklerine bakarlar. Fakat zaman ilerledikçe ziyaretçilerin aynı siteyi tekrar tercih etmeleri için içeriğin var olmasının yanında nasıl sunulduğu da önem kazanır. Site tasarımcıları yaptıkları sitelerde genellikle aynı mimariyi (Joomla, Wordpress vb.) kullanırlar. Fakat bir avukatlık bürosuyla bir doktor muayenehanesi aynı site görünümünü genelde kabul etmez. Bu sebeple sitenin altyapısı aynı olmasına rağmen arayüzünün mutlaka değiştirilmesi gereklidir. Siteler, özelleştirilirken genellikle Tema(Şablon) değişiklikleri yapılır. Bu bölümde; Joomla ile kurulmuş bir web sistesine hazır tema yüklenerek sitenin nasıl özelleştirildiği ve ayrıca Artisteer arayüz tasarım programında yeni bir temanın nasıl geliştirildiği anlatılmıştır. JOOMLA GÖRSEL ÖZELLEŞTİRME Joomlanın hazır temalarının sürüm numarası, kurulan joomla sürümüyle uyumlu olmalıdır. Uyumsuz olan temalar hata vermeden kurulsa bile sitenin birçok bileşen ve özelliği çalışmayabilir. Web sitelerinin içeriğini yönetmek için çeşitli yöntemler vardır. Bazı tasarımcılar siteyi tümüyle yeniden kod yazarak geliştirirler. Bazılarıysa Joomla, Drupal veya WordPress gibi bir şirketin geliştirmiş olduğu eklenti, bileşen, tema, tasarım ve şablon sağlayan hazır bir yazılım paketini kullanır. Günümüzde tümüyle kod yazarak tasarım yapmak önemini kaybetmiştir. Bunun yerine web tasarımı yapılırken aynı mimariler kullanılır fakat şablon ve içerikler (fotoğraflar, görseller ve metin gibi) değiştirilir. Joomla kurulduğunda varsayılan olarak görüntülenen temayı değiştirmek için önce internetten konuya uygun hazır bir tema indirilmeli ya da bir arayüz programıyla ( Photoshop, Fireworks, Artisteer vb.) yeni bir tasarım yapılmalıdır. JOOMLA ya Hazır Tema (Şablon) Kurulumu: Site tasarımı için kurulan joomla da iki tasarım bölümü vardır. Bunlar "Site" ve "Yönetici" diye adlandırılır. Joomla için tema araştırması yaparken joomlanın sürüm numarasına ve hangi bölümle ilgili tema olduğuna dikkat edilmesi gerekir. Bu alanlara dikkat edilmeden indirilen temalar genelde joomla nın yapısına uygun olmayacağı için web sitesinin tasarımını bozabilir. Joomlanın resmi web sitesinde ücretsiz ya da ücretli birçok tema vardır. Ücretli Joomla Temaları için Şekil 8.1 de gösterilen adresini, ücretsiz joomla temaları için ise Şekil 8.2 de gösterilen adresini ziyaret etmek gerekir. Atatürk Üniversitesi Açıköğretim Fakültesi 2

3 Şekil 8.1. Ücretli joomla tema yükleme sitesinin görüntüsü Şekil 8.2. Ücretsiz joomla tema yükleme sitesinin görünümü Ücretsiz Temalar içerisinden Şekil 8.3 te gösterilen Greengield temasını seçerek bilgisayara indirin. Atatürk Üniversitesi Açıköğretim Fakültesi 3

4 Şekil 8.3. Seçilen ücretsiz bir temanın indirme ekranı Şekil 8.4. Greenfield temasının yükleme dosyası Şekil 8,4 te Joomla için tasarlanan Eklenti ve Temalar genellikle site arayüzü için tasarlanır ve zip uzantılı dosyalardır. Bu dosyaların joomlaya yüklenmesi Eklenti yöneticisiyle sağlanır. Eklenti yöneticisini açıp kullanabilmek için önce joomlanın yönetim paneline girmek gerekir. Şimdi bu işlemleri adımlar hâlinde gösterelim. 1.Adım: WampServer programını çalışır hâle getirin. 2.Adım: WampServer sunucu programı çalışıyor ve icon rengi yeşil ise internet tarayıcısının adres çubuğuna adresini yazarak joomlanın yönetim paneline giriş ekranını açın. 3.Adım: Joomlanın Şekil 8.5 te gösterilen yönetim paneline giriş ekranına Kullanıcı adı, Parola yazarak yönetim panelini açın. Şekil 8.6 da gösterilen ekrandan Eklentiler>Eklenti yöneticisini seçin. Bu bölümdeki Dosya Dil paketi yükle bölümünden Şekil 8.7 de gösterilen tema dosyasını seçerek yükleyin. Atatürk Üniversitesi Açıköğretim Fakültesi 4

5 Joomlanın yönetici bölümündeki dil yöneticisinden English seçeneği silinirse Yönetim paneli, tercih yapmaya gerek kalmadan Türkçe açılacaktır. Şekil 8.5. Joomla nın yönetim paneline giriş ekranı Şekil 8.6. Joomlanın yönetim panelinden Eklenti yöneticisinin seçilmesi Şekil 8.7. Eklenti yöneticisinden Dosya paketi yükleme ekranı 4.Adım: Joomla Eklenti yöneticisi ile yüklenen temaların site üzerinde etkili olabilmeleri için Şekil 8,8 de gösterilen Şablon (Tema) yöneticisini açın. Atatürk Üniversitesi Açıköğretim Fakültesi 5

6 Şekil 8.8. Joomlanın yönetim panelinden Şablon yöneticisinin seçilmesi Şekil 8.9. Şablon yöneticisinin genel görünümü Joomlanın yönetici bölümündeki şablon değişikliği ayar seçeneklerinin yerini değiştirdiği için tercih edilmez. 5.Adım: Şekil 8.9 da görüntülenen ekran, Joomla kurulumuyla birlikte gelen temaların listesini gösterir. "Konum" başlığı altında yazan "Site" ve "Yönetici" ifadeleri, o temanın kullanıcı arayüzünden mi yoksa yönetim panelinde mi kullanılacağını gösterir. 6.Adım: İlk olarak kullanıcı arayüzündeki temayı değiştirin. Varsayılan başlığı altındaki renkli yıldızlar yönetici ve kullanıcı ekranlarında hangi temaların geçerli olduğunu gösterir. Şekil 8.10 da Kullanıcı arayüzündeki kullanılan tema "protostar" olarak görünür. "Varsayılan-siteground-j16-41" seçeneğinin karşısında bulunan yıldıza bir kez tıklayın. Atatürk Üniversitesi Açıköğretim Fakültesi 6

7 Şekil Varsayılan site arayüz temasının değiştirilmesi 7.Adım: Şekil 8,10 da gösterildiği gibi renkli yıldız yer değiştirir. Şu an sitede kullanıcı arayüzü teması değişti. Sitenin temasının değişip değişmediğini kontrol etmek için "Site Görünümü" butonuna tıklayın. Şekil 8.11 de görüldüğü gibi site teması değişmiştir. Şekil Yüklenen temanın site görüntüsü 8.adım: Şekil 8.10 daki ekranda Joomla sistemimizde yüklü temalar görüntülenmektedir. Tema isimlerinin karşısında yazan "Yönetici" ibareleri, o temaların Yönetim Paneli'ne uygulanabileceğini göstermektedir. Varsayılan olarak gelen "isis-default " seçeneğini değiştirmek için. "Hathor" isimli temanın karşısında bulunan yıldıza bir kez tıklayınca. Şekil 8.12 de gösterildiği gibi Yönetim Paneli hemen değişecektir. Atatürk Üniversitesi Açıköğretim Fakültesi 7

8 Şekil Joomla içindeki yönetim temasının değiştirilmesi sonrası görünümü Artister programının demo verisyonu ile her türlü tasarım yapmak mümkündür fakat tasarımların şablon olarak paketlenmesi tam sürümüyle sağlanır. Joomla tabanlı web siteleri için görsel arayüz hazırlamada kullanılan birçok program bulunmaktadır. Artisteer programı, kullanımı kolay, üretken ve her içerik yönetim sistemine uygun tema üretebildiği için bu bölümde anlatılacaktır. Joomla web sitesine birçok tema kurdunuz fakat denediğiniz hiçbir tasarım sitenin arayüzüne yakışmadıysa kendi şablonunuzu yapmanın zamanı gelmiştir. Şablon tasarımı yapmak için önce Artisteer yazılımını bilgisayara kurmak gereklidir. ARTİSTEER PROGRAMININ KURULUMU Joomla arayüz tasarımı için kullanılan Artisteer programını indirmek için internet tarayıcısının adres bölümüne adresini yazıp Download sayfasından programı bilgisayara indirin (Şekil 8.13). Şekil Artisteer yazılımının web sitesi Atatürk Üniversitesi Açıköğretim Fakültesi 8

9 Şekil Siteden indirilen Artisteer kurulum dosyası Şekil Kurulumda dil seçiminin yapılması Programın Türkçe diline henüz desteği bulunmamaktadır. Kurulumu yapılan programda Şekil 8.15 te gösterildiği gibi İngilizce dil tercihini yapın ve Next butonu ile ilerleyerek sözleşmeyi kabul edip kurulumu başlatın. Atatürk Üniversitesi Açıköğretim Fakültesi 9

10 Şekil Artisteer dosyalarının disk üzerine kurulması Şekil 8.16 da gösterilen Kurulum işlemimiz tamamlandıktan sonra bitir (Finish) butonuna bastığında programın kurulumu bitmiş ve tasarım editörü çalışma yapmaya hazır hâle gelmiştir. ARTİSTEER PROGRAMININ YÖNETİMİ Artisteer programınına arabirimi Şekil 8.17 de gösterilmiştir. Artisteer programı, dosyalarını (.artx) ve (zip) formatında kaydeder ve aynı zamanda yapılan site tasarımlarının mobil sürümlerini de otomatik olarak hazırlar. Aşağıda gösterilen Menülerin açıklamalarını dikkatli bir şekilde inceleyin. Çünkü bu açıklamalar kullanılarak kolaylıkla bir arayüz tasarımı yapılabilir. Şekil Artisteer yazılımının genel görünümü Atatürk Üniversitesi Açıköğretim Fakültesi 10

11 Şekil Home menüsünün kisayol araçlarının görünümü Home: Bölümünde otomatik olarak programın bize stiller önermesini isteyeceğimiz menüler bulunur (Şekil 8.18). 1.Suggest colors: Renk önerisinde bulun. 2.Suggest fonts: Yazı tipi önerisinde bulun. 3.Seggest layout: Frame önerilerinde bulun. 4.Suggest background: Arkaplan önerisinde bulun. 5.Suggest header: Başlık bölümü önerisinde bulun. 6.Suggest Images: Resim önerisinde bulun. 7.Style: Web Sitesinin arayüz dizayn stilini seç. 8.New Page: Yeni bir sayfa açmanızı sağlar. 9.Option: Arayüz oluşturulmadan önce tasarımın arkaplan ayarlarını yapar. 10.Export: Oluşturduğunuz temayı kullanıma hazır biçime aktarır. Şekil Edit menüsünün kisayol araçlarının görünümü Edit: Bölümünde Microsoft Office programının kullandığınız yazılan yazıları biçimlendirme, link ve resim ekleme menüleri bulunur (Şekil 8.19). 1.Content Layout: Temanız için içerik ekleme bölümü düzeni yapmanızı sağlar. 2.Styling: Temanız için içerik ekleme bölümü düzeninin stilini ayarlar. 3.Hyperlink: Yazılı veya görsel bir alanın farklı bir adrese gitmesini ayarlar. 4.İmages: Resim Ekleme 5.Video: Video Ekleme 6.Controls: Facebook, Twiteer, vb. kontrol butonları ekler. 7.Html: Bölüm içerisinde Html Editörü kullanılır. 8.New Slide: Farklı görsel öğelerin sıralı olarak sergilenmesini ve duyuru paneli oluşturulmasını sağlar. Atatürk Üniversitesi Açıköğretim Fakültesi 11

12 Şekil Color menüsünün kisayol araçlarının görünümü Colors & Fonts: Bölümünde tema için kullanılan resimleri ve yazı tipini ayarlayabilir (Şekil 8.20). 1.Color Themes: Temalar için hazır renk kalıpların kullanabilir. 2.Paints Bölümü: Sunulan üç adet renk ile temaların rengi ayarlanır. 3.Fonts Bölümü: Yazı tipi ile ilgili ayarlar buradan ayarlanır. Şekil Layout menüsünün kisayol araçlarının görünümü Layout: Bölümünde tamaların frameleri ayarlanır (Şekil 8.21). 1.Design Layout: Banner ve menü blokların nerede olacağını ayarlar. 2.Sheet Layout: Blokların En ve Boy oranı buradan ayarlanır. 3.Coloums: Blokların yeri buradan ayarlanır. 4.Blocks: Yeni bir blok oluşturup içeriklerinin belirlenmesi buradan ayarlanır. Şekil Content menüsünün kisayol araçlarının görünümü Content: Sitenizde oluşturulacak makale veya görsel ögelerin dizaynının yapıldığı alan bu bölümdür (Şekil 8.22). 1.Sytle: İçerik alanı, makale ve resim ekleme bölümünün stilini düzenler. 2.Style and Font: Başlık, Yazı Fontları, Link, Resim, Tablo gibi bölümlerin biçimini ayarlar. 3.Paragraf: Yazıların dizim şeklini belirler. 4.Metadata: İçerik alanının üst ve alt başlık bölümlerinin şekillendirilmesini ayarlar. Atatürk Üniversitesi Açıköğretim Fakültesi 12

13 Şekil Background menüsünün kisayol araçlarının görünümü Background: Bu alandan Arkaplan ayarları çokkolay ayarlanabilir. Tasarıma Renk ve Efektler bu alandan verilir(şekil 8.23). 1.Texture or İmage: Arkaplan resmi buradan seçilir. 2.Light Effect: Arkaplanda resim yerine koyudan açığa doğru giden renk stili kullanmak istersek bu seçenek kullanılır. 3.From file: Arka planı bir dosyadan aktarabilir. 4.Options: Arkaplan için ince ayarlamalar yapabilir. Şekil Sheet menüsünün kisayol araçlarının görünümü Sheet: Ana katmanı ayarlamak için kullanılır (Şekil 8.24). 1.Width: Genişlik ayarlanır. 2.Margin: Ana katmanın üstten uzaklığı ayarlanır. 3.Padding: Katman içersindeki katman veya metinlerin sınıra olan uzaklığı ayarlanır. 4.Radius: Kenarların yuvarlaklığı ayarlanır. 5.Fill: Katmanın rengi ayarlanır. 6.Transparency: Katmana saydamlık verilir. 7.Border: Kenarlıklar ayarlanır. 8.Shadow: Katmana gölge vermek için kullanır. Şekil Header menüsünün kisayol araçlarının görünümü Header: Banner bölümünü kolaylıkla hazırlayabilen seçenekler bulunur (Şekil 8.25). 1.Layout bölümü: Bannerın konumu, genişliği, yüksekliği, çerçevesi gibi tasarımlar yapılır. Atatürk Üniversitesi Açıköğretim Fakültesi 13

14 Programımızda iki adet Menu tasarım bölümü bulunmaktadır. Biri Yatay Menü (Menu), diğeri ise Dikey Menü (Vertical Menu) 2.Background ve Background Images: Banner alanının tabanına resim eklemek ve eklenen resmi biçimlendirmek için kullanılan bölümdür. 3.Insert: Banner alanına resimler, şekiller ve kontrol butonları eklemekte kullanılır. Text block: Site adı ve sloganının yeri belirtilir. 4.New Slide: Farklı görsel öğeleri sıralı olarak sergilemeyi ve duyuru paneli oluşturmayı sağlar. 5.Flash: Eklenen banner üzerinde flash animasyonu eklemenizi sağlar. Şekil Menü menüsünün kisayol araçlarının görünümü Menu: Menüye ait özellikler ayarlanır(şekil 8.26). 1.Layout: Menülerin konumu, en ve boy oranı ayarlanır. 2.Menu Styles: Menülerin görüntü stili ayarlanır. 3.Menu: Menü alanın renk ayarlarını, arka fon tasarımını, buton biçimlerinin tasarımını değiştirmekte kullanılan bölümdür. 4.Sub Menü: Ana Menüye bağlı alt menüleri biçimlendirir. 5.Show in Menu Pages: Menüde web sitesinin hangi bölümlerinin gösterileceğini ayarlar. Şekil Bloks menüsünün kisayol araçlarının görünümü Bloks: Bloklarımızın görünüm ayarları buradan ayarlanır (Şekil 8.27). 1.Block Styles: Blok görünümümüzü, kenarlık, başlık konumu ve diğer görüntü biçimlerini ayarlar. 2.Background: Arkaplan ayarları yapılır. 3.Header: Başlık bölümünün ayarları yapılır. 4.Content: İçeriklerin listelendiği bölümü ayarlar. Şekil Vertical menüsünün kisayol araçlarının görünümü Atatürk Üniversitesi Açıköğretim Fakültesi 14

15 Vertical Menu: Dikey menüye ait özellikleri ayarlanır (Şekil 8.28). 1.Layout: Menümüzün konumunu, en ve boy oranını ayarlar. 2.Styles: Menümüzün görüntü stilini ayarlar. 3.Menu Area: Menü alanının tasarımında kullanılan başlık arkaplan ve içerik kısımlarının ayarlandığı bölümdür. 4.Item: Dikey Menümüzün renk, dizayn ve fare ile menü üzerinde gezdiğimizde aktif ve pasif durumlarının ayarlandığı bölüm. 5.Sub Menü: Ana Menüye bağlı alt menüler biçimlendirilir. 6.Show in Menu Pages: Menüde web sitesinin hangi bölümlerinin gösterileceğini ayarlar. Şekil Controls menüsünün kisayol araçlarının görünümü Controls: Tüm sayfalarımızda bulunan butonların biçimlerini ayarlar (Şekil 8.29). 1.Button: Butonun şeklini, fare ile üzerine geldiğimizde aktif ve pasif durumları gibi özelliklerin belirlendiği alandır. 2.Control: Sitemizde olmasını düşündüğümüz veri girişi, checkbox, arama vb. butonların tasarımları yapılır. 3.Social Icons: Sosyal medya ikonlarının hazır olarak çeşitli biçimlerinin yer aldığı bölümden sitenize en uygun modelin seçildiği bölümdür. Şekil Footer menüsünün kisayol araçlarının görünümü Footer: Sayfa altında sitenin hangi kuruluş veya kişiye ait olduğunu belirten bölümdür (Şekil 8.30). 1.Layout: Arayüz tasarımının alt kısmının konumunu ve genişlik oranını ayarlar. 2.Footer Styles: Arayüz tasarımımızın alt bölümünde bulunan alanın renk, efekt, konum, başlık, şekil, link, yazı biçimi vb. gibi özelliklerin tasarımını ayarlar. Buraya kadar programda kullanılabilen tüm menülerin özellikleri ve hangi amaçla kullanılanıldıkları anlatıldı. Şimdi Joomla şablonları nasıl yapılır bir uygulamayla gösterelim. Atatürk Üniversitesi Açıköğretim Fakültesi 15

16 GÖRSEL ARAYÜZ HAZIRLAMA Artister programında iki tür yöntemle arayüz tasarımı yapılabilir. 1. Herşeyin Program tarafından sunulan öneriler ile gerçekleştirilmesi 2. Tasarımın tamamen programda var olan araçları kullanarak yapılması 1.Suggest Design (Tasarım Önermek): Bu yöntem program yapımcılarının önermiş olduğu tasarımlar çerçevesinde programda bulunan Home menü başlığında Suggest butonları ile yapılabilmektedir (Şekil 8.31). Şekil Home menüsünden şablon önerilerini kullanmak 2. Kendine Özgü Tasarım Yapmak: Artisteer programı ile çok zengin içeriklere sahip web sitesi tasarımları yapabilir. Bunları Web Sitesi formatında, Joomla, Wordpress, Blogger, DotNetNuke gibi siteler ile bütünleşmiş bir şekilde kaydederek kendi şablonumuzu oluşturabiliriz. Bu bölümde pratik yöntemle basit bir Joomla Template i nasıl oluşturulacağını adımlar hâlinde gösterelim. 1.Adım: File menüsünden Şekil 8.31 de gösterilen New Project ile yeni bir proje açın. Açılan menüden ister boş bir şablon, isterseniz hazır şablon seçip üzerinde değişiklikler yapabilirsiniz. Atatürk Üniversitesi Açıköğretim Fakültesi 16

17 Şekil Yeni Proje ekran görüntüsü 2.Adım: Background Menüsüne gelip sırası ile Arka plan resmi veya renk seçimi yaptıktan sonra da isterseniz Light Effect ile daha iyi görünebilecek biçimleri seçerek devam edin (Şekil 8.33). Şekil Tasarımda yazı ve fontların düzenlenmesi 3.Adım: Colour & Fonts bölümünden yazı fontu setleri veya istenen renk şablonlarını kullanarak arayüz tasarımlarına farklı biçimler ekleyin (Şekil 8.34). Atatürk Üniversitesi Açıköğretim Fakültesi 17

18 Şekil Tasarımda renkı ve fontların düzenlenmesi 4.Adım: Layout menüsüne gelerek Design Layout alanından sayfada Banner ve menü bloklarının nerede olacağını ayarlayın (Şekil 8.35). Şekil Layout ekranından düzenleme yapılması 5.Adım: Sheet With ile şablon genişliğini Columns ile de yan menü alanın konumunu belirleyin (Şekil 8.36). 6.Adım: Edit menüsünde içerik bölümünden yazı fontlarını isteğe göre değiştirin. Ayrıca bu bölümde bulunan Content Layout ve Styling bölümlerinden tasarım şablonunun içerik bölümünün alan sayısını ve biçimini belirledikten sonra Content menüsüne giderek tasarıma göre içerik alanlarına farklı ayarlar yapın (Şekil 8.37). Şekil Sheet Width ve Columns ekranından düzenleme yapmak Atatürk Üniversitesi Açıköğretim Fakültesi 18

19 Şekil Content ekranından düzenleme yapmak 7.Adım: Header başlık bölümünü kullanarak banner dizaynına başlayın. Kendi belirlediğiniz bir resim var ise From File bölümünden ekleyin, yok ise Background Image alanından istediğiniz herhangi bir resmi seçin.eğer Başlık, Altbaşlık, Resim, Buton, Şekil eklemek istiyorsanız Insert grubundan faydalanabilirsiniz (Şekil 8.38). Şekil Header ekranından düzenleme yapmak Atatürk Üniversitesi Açıköğretim Fakültesi 19

20 Şekil Flash ekranından düzenleme yapmak 8.Adım: Eklemiş olduğunuz banner alanına Flash bölümünden animasyonlarını, From File alanına girerek ekleyin (Şekil 8.39). 9.Adım: Sitede menü alanı olacak ise ilk olarak hangi menü çeşidini kullanacağınızı belirleyin. Eğer kullanacağınız menü yatay ise Menu bölümünü, dikey menü ise Vertical Menü alanını tercih ederek buralarda bulunan menü stili ve konumlarını Menu Style ve Position alanlarından belirleyin (Şekil 8.40). Şekil Menü ekranından düzenleme yapmak Şekil Menü Styles ekranından düzenleme yapmak Atatürk Üniversitesi Açıköğretim Fakültesi 20

21 10.Adım: Footer bölümüne geçerek sayfamızın alt kısmının tasarımına başlayın. İlk olarak Length and Position bölümünden alt bölümün konumunu Margin den ise genişliğini belirleyin. Text alanından belirlediğiniz yazıyı düzenleyebilir footnote bölümünden ise dipnot alanına istediğiniz bir bilgiyi girebilirsiniz (Şekil 8.41). Şekil Footer ekranından düzenleme yapmak 11.Adım: Control menüsü yardımıyla sitede yer alan butonları, veri giriş alanlarını, checkbox, radio buton, pager (sayfa numaralama), arama kutucuğu ve sosyal medya ikon biçimleri gibi bölümleri yeniden düzenleyebilirsiniz (Şekil 8.42). Control menüsünde ne gibi değişiklikler yapıldığını programın sol kısmında bulunan Styling alanındaki Controls kısmı seçilirse görebilir. Şekil Controls ekranından düzenleme yapmak 12. Adım: Tüm tasarım işlemlerimiz bittikten sonra Home menüsüne girip Option bölümüne gelerek sitenin icon, mobil version desteği tema sürümü, css, metatags vb bilgileri düzenleyin (Şekil 8.44). 13. Adım: Tasarımın son aşamasında, Home menüsü veya File menüsü içerisinde bulunan Şekil 8.46 da göstilen Export seçeneğini kullanarak, Sitenin Atatürk Üniversitesi Açıköğretim Fakültesi 21

22 tamalanan arayüzünü şablon olarak yükleyebilecek şekilde paketleyip tasarım işlemini tamamlayın. 14. Adım: Ünitenin başında anlatılan Eklenti yöneticisinden Şekil 8.46 daki gösterilen tema dosyasını joomla içerisine yükleyerek Şablon yöneticisiyle web sistesine uygulayın (Şekil 8.7). Şekil Option seçenekleri ve yapılan düzenlemeler Şekil Tasarlanan şablonun yükleme paketi olarak yayınlanması Atatürk Üniversitesi Açıköğretim Fakültesi 22

23 Şekil Temanın joomlaya yüklenebilir dosyası Atatürk Üniversitesi Açıköğretim Fakültesi 23

24 Özet Joomla Görsel Özelleştirme Site tasarımı için kurulan joomla da iki tasarım bölümü vardır. Bunlar "Site" ve "Yönetici" diye adlandırılır. Joomla için tema araştırması yaparken joomlanın sürüm numarasına ve hangi bölümle ilgili tema olduğuna dikkat edilmesi gerekir. Günümüzde web tasarımı yapılırken içerik yönetim sistemleri kullanılır fakat şablon ve içerikler siteye özel olarak değiştirilir. Joomlanın resmî web sitesinde ücretsiz ya da ücretli birçok tema vardır. Ücretli Joomla Temaları için adresini, ücretsiz joomla temaları için ise adresini ziyaret etmek gerekir. Joomla için tasarlanan Eklenti ve Temalar site ara yüzü için tasarlanır. Bu dosyaların joomlaya yüklenmesi Eklenti yöneticisiyle sağlanır. Eklenti yöneticisini açıp kullanabilmek için önce joomlanın yönetim paneline girmek gerekir. Şablon yöneticisi; Joomla kurulumuyla birlikte gelen temaların listesini gösterir. "Konum" başlığı altında yazan "Site" ve "Yönetici" ifadeleri, o temanın kullanıcı arayüzünden mi yoksa yönetim panelinde mi kullanılacağını gösterir. Joomla arayüz tasarımı için kullanılan Artisteer programını internet tarayıcısının adres bölümüne adresini yazıp Download sayfasından bilgisayara indirin. Artisteer programı, dosyalarını (.artx) ve (.zip)formatında kaydeder ve aynı zamanda yapılan site tasarımlarının mobil sürümlerini de otomatik olarak hazırlar. Artisteer yazılımında aşağıdaki menüler kullanılarak tasarım yapılır. Home: Bölümünde otomatik olarak programın bize stiller önermesini isteyeceğimiz menüler bulunur. Edit: Yazıları biçimlendirme, link ve resim ekleme menüleri bulunur. Colors & Fonts: Bölümünde tema için kullanılan resimler ve yazı tipi ayarlanabilir. Layout: Bölümünde temaların frameleri ayarlanır. Content: Sitenizde oluşturulacak makale veya görsel ögelerin dizaynının yapıldığı alan bu bölümdür. Background: Bu alandan Arkaplan ayarları çok kolay yapılabilir. Tasarıma Renk ve Efektler bu alandan verilir. Sheet: Ana katmanı ayarlamak için kullanılır. Header: Banner bölümünü kolaylıkla hazırlayabilen seçenekler bulunur. Menu: Menüye ait özellikler ayarlanır. Bloks: Bloklarımızın görünüm ayarları buradan ayarlanır. Vertical Menu: Dikey menüye ait özellikler ayarlanır. Controls: Tüm sayfalarımızda bulunan butonların biçimlerini ayarlar. Footer: Sayfa altında sitenin hangi kuruluş veya kişiye ait olduğunu belirten bölümdür. Atatürk Üniversitesi Açıköğretim Fakültesi 24

25 DEĞERLENDİRME SORULARI Değerlendirme sorularını sistemde ilgili ünite başlığı altında yer alan bölüm sonu testi bölümünde etkileşimli olarak cevaplayabilirsiniz. 1. İçerik yönetim sistemlerinde tek bir dosya ile web sitelerinin görünümünü değiştiren eklentilere ne ad verilir? a) Fotorgraf b) Grafik c) Şablon d) Nesne e) Görsel 2. Aşagıdaki adreslerden hangisinde joomla siteler için ücretli temalar yer alır? a) b) c) d) e) 3. Aşağıdakilerden hangisi kullanılırsa joomla siteye temalar yüklenir? a) Modül yöneticisi b) Eklenti yöneticisi c) İçerik yöneticisi d) Dil yöneticisi e) Uyumlu Ek Yöneticisi 4. Aşağıdakilerden hangisinde temaların geçerli olmasını sağlayan renkli yıldızlar bulunur? a) Biçim b) Varsayılan c) Konum d) Şablon e) Kimlik 5. Artisteer programının hangi menüsünde otomatik olarak stiller öneren bölümler yer alır? a) Home b) Edit c) Color&Font d) Content e) Bacgraound Atatürk Üniversitesi Açıköğretim Fakültesi 25

26 6. Artisteer programında Banner bölümünü hazırlamak için hangi menü kullanılır? a) Menü b) Controls c) Header d) Bloks e) Bacgraound 7. Artisteer programında web sitelerinin kimin tarafından hazırlandığını gösteren bölüm aşağıdakilerden hangisidir? a) Layout b) Sheet c) Slider d) Footer e) Bacgraound 8. Arka plan ayarlamasında kullanılan Background menüsünde aşağıdakilerden hangisi yer alamaz? a) From File b) Insert c) Option d) Light Effect e) Texture of image 9. Artisteer yazılımında yer alan Sheet menüsünden hangisi yapılamaz? a) Genişlik b) Katmanın rengi c) Kenarlık d) Şeffaflık e) Paragraf 10. Artisteer programıyla hazırlanmış tasarım dosyaları hangi dosya uzantısıyla kaydedilir? a).doc b).php c).asp d).exe e).artx Cevap Anahtarı: 1.C,2.D,3.B,4.B,5.A,6.C,7.D,8.B,9.E,10.E Atatürk Üniversitesi Açıköğretim Fakültesi 26

27 YARARLANILAN VE BAŞVURULABİLECEK DİĞER KAYNAKLAR AKBUĞA. Mustafa, (2011), Atatürk Üniversitesi, Uzaktan Eğitim Merkezi, İçerik Yönetim sistemleri, Ders Notları [Erişim tarihi: 20 Aralıkk 2014]. [Erişim tarihi: 02 Ocak 2015]. joomlatr.org, [Erişim tarihi: 08 Aralık 2014]. [Erişim tarihi: 08 Aralık 2014]. [Erişim tarihi: 12 Ocak 2015]. Atatürk Üniversitesi Açıköğretim Fakültesi 27