Kişisel Web Sayfası Tasarım Sistemi

Transkript

1 Kişisel Web Sayfası Tasarım Sistemi Kullanım Kılavuzu Faik Demirbaş Ankara 2010

2 2 Kişisel Web Sayfası Tasarım Sistemi İçindekiler Giriş... 3 Kişisel Web Sayfası Tasarım Sistemine Giriş... 3 Menü İşlemleri... 4 Yeni Menü Oluştur... 4 Araya Menü Elemanı Ekleme... 5 Alt Menü Elemanı Ekleme... 6 Menü Elemanı Düzenle... 7 Menü Elemanı Silme... 9 Sayfa İşlemleri... 9 Bağımsız Sayfa Oluştur Sayfaya Başlık Ekleme Word den Editöre Yazı Aktarmak Resim Ekleme Köprü (Link) Ekleme Yazı Türü ve Boyutu Sayfa Düzenle Duyuru İşlemleri Duyuru Oluştur Duyuru Düzenle... 19

3 Kişisel Web Sayfası Tasarım Sistemi 3 Giriş Kişisel Web Sayfası Tasarım Sistemi, personelimizin web sayfalarını tasarlamaları için oluşturulmuştur. Sayfa görüntüsü üniversitemizin belirlemiş olduğu şablon dikkate alınarak gerçekleştirilmiştir. Bu sistemde sayfa tasarlamak için web arayüzü kullanılmaktadır. Bu kılavuzun sizlere web sayfanızı oluştururken yol gösterici olmasını umut ediyorum. Kişisel Web Sayfası Tasarım Sistemine Giriş Sayfa oluşturma alanına girmek için herhangi bir tarayıcı (Internet explorer, Firefox, Opera vb.) kullanılacaktır. Bu kılavuzda uygulamalar İnternet Explorer tarayıcısında anlatılacaktır. İnternet Explorer tarayıcısını çalıştırıp adres alanına ( girip enter tuşuna basalım. Karşımıza kullanıcı adı ve şifremizi isteyen ekran gelecektir. Kullanıcı adımızı ve şifremizi (Öğrenci Bilgi Sistemindeki kullanıcı adı ve şifreniz) ilgili alanlara girip Giriş butonuna tıklayınız. Ekranda kişisel web sayfası tasarım sistemi görüntülenecektir. Bu bölümde ekranın solunda bulunan menü yardımı ile web sayfanızda kullanacağınız menünüzü, sayfalarınızı ve duyurularınızı oluşturabilir ya da var olan bilgilerinizde düzenlemeler yapabilirsiniz. Yapmış olduğunuz işlemlerin sonucunu Web Sitemi Göster butonuna tıklayarak anında görebilirsiniz.

4 4 Kişisel Web Sayfası Tasarım Sistemi Menü İşlemleri Menü işlemlerine tıkladığımızda açılan alanda menü ile ilgili yapabileceğimiz işlemler gözükmektedir. Bu bölümde yeni menü oluşturabiliriz, oluşturulan menüde düzenlemeler yapabiliriz ya da menü elemanlarında istediklerimizi silebiliriz. Yeni Menü Oluştur Bu bölümde sayfanızda görüntülenecek Türkçe ve İngilizce menünüzü oluşturabilirsiniz. Ekrana gelen görüntüde Türkçe menü oluşturma seçili olarak gelecektir. İngilizce düğmesine tıklarsanız ekranda İngilizce menü oluşturma alanı görüntülenecektir. Sol tarafta oluşturduğunuz menünün hiyerarşik yapısını izleyebilirsiniz. Bu alana Anasayfa ve Home seçenekleri otomatik olarak gelmektedir. Kullanıcının bu seçenekler üzerinde işlem yapması engellenmiştir. Köşeli parantez içerisindeki rakamlar menü elemanlarının listedeki yerini göstermektedir.

5 Kişisel Web Sayfası Tasarım Sistemi 5 Ekranın sağında bulunan bölümde oluşturacağınız menü elemanının yerini ve ismini belirleyebilirsiniz. Oluştur butonuna tıkladığınızda izleme alanında oluşturduğunuz menü elemanı gözükecektir. Örnek olarak Hakkımda diye bir menü elemanı oluşturmak için Listedeki yeri 1 seçip, menü ismi alanına da Hakkımda yazalım ve Oluştur butonuna tıklayalım. Ekrana aşağıdaki görüntü gelecektir. 2. sıraya Dersler diye bir menü elemanı yerleştirmek için (Ana Menü seçili iken) listedeki yeri 2 yapıyoruz ve menü ismi alanına Dersler yazıp oluştur butonuna tıklıyoruz. Araya Menü Elemanı Ekleme Eğer Hakkımda ile Dersler arasına bir menü seçeneği yerleştirilecekse (örneğin Yayınlar) o zaman bu ekranda (Ana Menü seçili iken) listedeki yeri 2 seçip menü ismine Yayınlar girip oluştur butonuna tıkladığımızda Yayınlar 2. sıraya yerleşecek, Dersler 3. sıraya kayacaktır.

6 6 Kişisel Web Sayfası Tasarım Sistemi Alt Menü Elemanı Ekleme Örneğin Yayınlar menüsü altına Makalelerim ve Kitaplarım diye iki menü elemanı eklenecekse, Yayınlar üzerine tıklandıktan sonra listedeki yeri 1 seçip menü ismine Makalelerim yazılır ve oluştur butonuna tıklanırsa Makalelerim Yayınların altında 1. sırada yer alır. Kitaplarımı da Yayınlar altına yerleştirmek için Yayınlar tıklandıktan sonra

7 Kişisel Web Sayfası Tasarım Sistemi 7 listedeki yeri 2 seçip menü ismine Kitaplarım yazılır ve oluştur butonuna tıklanırsa Kitaplarım Yayınların altında 2. sırada yer alır. Yeni Menü Oluştur başlığı altında anlatılan bilgilerin tamamı İngilizce menü oluşturmak içinde aynı şekilde kullanılır. Not : Web şablonu alt alta iki kademeye izin verdiği için Makalelerim ya da Kitaplarım altında yeni bir menü elemanı tanımlanamaz. Bu yüzden o seçenekler seçilemez yapılmıştır. Menü Elemanı Düzenle Bu bölümde oluşturduğunuz menüler üzerinde (Türkçe ya da İngilizce) düzeltmeler yapabilirsiniz. Bu işlemler Menü elemanının yerini değiştirme ve ismini değiştirme ile sınırlıdır. Örnek olarak Makalelerim ifadesini Makaleler olarak değiştirmek istersek, sol tarafta Makalelerim seçildikten sonra, sağ tarafta yeni menü ismini girip düzenle butonuna basmamız yeterlidir.

8 8 Kişisel Web Sayfası Tasarım Sistemi Düzenle butonuna basıldığında değişikliğin yapıldığını sol tarafta izleyebiliriz. Şimdi de Kitaplarım ismini Kitaplar yapıp Makaleler den önce gözükmesini isteyelim. Bunun için sol taraftan Kitaplarım seçelim ve sağ taraftan yeni yeri 1 yapıp isim alanına da Kitaplar yazalım ve düzenle butonuna basalım. Bu işlemde hem menü elemanının yerini hem de ismini değiştirmiş olduk. Düzenle butonuna basıldıktan sonra görüntü aşağıdaki gibi olacaktır. Eğer Yayınlar ın yeri değişirse altındaki menü elemanları da otomatik olarak taşınacaktır. Bu işlemi görmek için Yayınlar seçilip sağ taraftan yeni yer olarak 3 seçilir ve düzenle butonuna basılırsa yeni görüntü aşağıdaki şekilde olacaktır. Dersler 2. sıraya Yayınlar ise 3. sıraya yerleşmiştir.

9 Kişisel Web Sayfası Tasarım Sistemi 9 Menü Elemanı Silme Menü elemanlarından herhangi birini silmek için (Türkçe ya da İngilizce) sol taraftan silinecek menü elemanı seçilip sağ taraftaki sil butonuna tıklamak yeterlidir. Not : Anasayfa ya da Home silinemez. Sayfa İşlemleri Sayfa işlemlerine tıkladığımızda açılan alanda sayfa ile ilgili yapabileceğimiz işlemler gözükmektedir. Bu bölümde bağımsız sayfa oluşturabiliriz ve var olan sayfalar üzerinde düzenlemeler yapabiliriz.

10 10 Kişisel Web Sayfası Tasarım Sistemi Bağımsız Sayfa Oluştur Menü elemanlarına ait olmayan (menüden bağımsız) sayfalar oluşturmak için kullanılan alandır. Bağımsız sayfa oluştur tıklandığında ekrana dosya oluşturmamız için bir alan açılacaktır. Sayfa oluşturmak için ilk önce sayfanın dilini seçiyoruz. Daha sonra oluşacak sayfaya bir isim veriyoruz. Sayfa ismi yazarken Türkçe karakterler ve büyük harfler kullanılamaz. Zaten bu karakterlerin girilmesine sistem izin vermeyecektir. Dosya ismi belirlendikten sonra alttaki gözüken editörde sayfanızı oluşturabilirsiniz. Bu editör kullandığımız Word uygulamasına çok benzemektedir. Dolayısı ile kullanımı oldukça kolaydır. Editörü kullanırken karşılaşabileceğiniz sorunlar ile ilgili bazı örnekleri burada anlatmaya çalışacağım. Sayfaya Başlık Ekleme Sayfanıza başlık vermek için (web sayfamızda kullanılan mavi bant içinde), önce başlığınızı yazıyorsunuz. Daha sonra araç çubuğunda ki Biçem alanından Başlık seçiyoruz. Bu işlemden sonra Ekrandaki görüntü sağdaki şekilde olacaktır.

11 Kişisel Web Sayfası Tasarım Sistemi 11 Word den Editöre Yazı Aktarmak Web sayfamıza koyacağımız yazılar çoğunlukla bir Word belgesi olacaktır. Dolayısıyla Word den yazıların kopyalanıp editöre yapıştırılması gerekecektir. Bu işlem için izlenecek yol, ilk önce Word belgemiz açılıp istenen alan seçilerek kopyala komutu ile panoya alınır ve editörde Word den Yapıştır butonuna tıklanır. Ekrana gelen diyalog kutusunda Ctrl+V tuşuna basılarak panodaki metin bu alana yapıştırılır. Tamam butonuna tıkladığınızda kopyaladığınız Word belgesi editöre aktarılmış olacaktır. Eğer normal yapıştır butonuna tıklarsanız ekrana aşağıdaki uyarı mesajı gelecektir. Bu ekranda Erişime izin ver butonuna tıklanarak belge yapıştırılır.

12 12 Kişisel Web Sayfası Tasarım Sistemi Resim Ekleme Oluşturduğunuz sayfaya resim ekleyebilirsiniz. Resim Ekle/Düzenle butonuna tıkladığınızda ekrana resim eklemeniz için aşağıdaki diyalog kutusu görüntülenecektir. Sunucuyu Gez butonuna basılır. Ekrana sunucuyu gösteren ekran gelecektir. Eğer sağ tarafta herhangi bir resim dosyası gözükmüyorsa sizin için ayrılan alanda henüz dosyanız bulunmamaktadır. Kendi bilgisayarınızda bulunan bir resim dosyasını sunucuya aktarabilirsiniz.

13 Kişisel Web Sayfası Tasarım Sistemi 13 Bu işlem için Gözat butonuna basılır. Ekrana gelen diyalog kutusunu kullanarak istediğiniz resim dosyasını seçiniz. Aç butonuna bastığınızda ekrana aşağıdaki görüntü tekrar gelecektir. Bu ekranda Upload butonuna tıklanarak seçmiş olduğunuz resim sunucuya aktarılacaktır.

14 14 Kişisel Web Sayfası Tasarım Sistemi Seçtiğimiz dandalion.jpg dosyası artık sunucuya aktarılmıştır. Bu ekranda dandalion.jpg dosyasının üzerine tıklandığında ekrana aşağıdaki görüntü gelecektir. Yüklemiş olduğumuz resim dosyası çok büyük olduğu için Ön İzleme alanında tam olarak gözükmüyor. Resmimizin ekranda ne büyüklükte görüntüleneceğini Genişlik ve Yükseklik özelliklerini kullanarak ayarlayabilirsiniz. Eğer kilit kapalı gözüküyorsa Genişliği değiştirdiğiniz zaman Yükseklikte otomatik olarak değişecektir. Bu da resmin orantılı olarak küçülmesini sağlar. Bu örnek için Genişliği 200 yaptığımızda oluşan görüntü aşağıdaki gibidir.

15 Kişisel Web Sayfası Tasarım Sistemi 15 Kenar : Resmin etrafında kenarlık vermek için kullanılır. Yatay Boşluk : Resmin sağında ve solunda bırakılacak boşluk için kullanılır. Dikey Boşluk : Resmin üstünde ve altında bırakılacak boşluk için kullanılır. Hizalama : Resmin satırdaki yerini belirlemek için kullanılır. En çok sol yada sağ kullanılır. Gerekli düzenlemeler yapılıp tamam butonuna basıldığında resim editöre yerleştirilecektir. Resim özelliklerini değiştirmek için resim üzerinde bir kez tıkladıktan sonra (Resmin kenarlarında küçük kutucuklar gözükür) tekrar Resim Ekle/Düzenle butonuna tıklanır. Ekrana gelen Resim Özellikleri penceresinde gerekli düzenlemeler yapılır.

16 16 Kişisel Web Sayfası Tasarım Sistemi Köprü (Link) Ekleme Köprü vermek istediğiniz kelime grubunu ya da resmi seçtikten sonra Köprü Ekle/Düzenle butonuna tıklanır. Ekrana aşağıdaki diyalog kutusu gelecektir. Eğer verilecek köprü bir web sitesi adresi ise URL alanına yazmadan adres girilir ve Tamam butonuna tıklanır. Eğer vereceğiniz köprü sizin bilgisayarınızda olan bir belge ise (pdf, Word, Excel vb.) Sunucuyu Gez butonuna basılarak sunucu görüntüsü ekrana getirilir. Resim eklemede anlatıldığı gibi dosya upload edilir ve seçilir. Seçtiğiniz dosya URL alanına gelecektir. Tamam butonuna basılarak köprü oluşturulur.

17 Kişisel Web Sayfası Tasarım Sistemi 17 ÖNEMLİ Eğer vereceğiniz köprü sizin oluşturduğunuz Bağımsız Sayfa ise bu sayfa seçildikten sonra URL alanında gözüken bölümde bir değişiklik yapmanız gerekmektedir. Örneğin yayinlar.html dosyasına bir link vermek istersek dosya seçildiğinde yukarıdaki seçilen alan silinerek yerine?d= yazılmalıdır. Aşağıdaki şekilde Bu düzenleme yapıldıktan sonra Tamam butonuna basılarak işlem tamamlanır. Eğer bu düzenleme yapılmaz ise köprüye tıklandığında sayfa boş bir ekrana açılacaktır. Yani sayfa şablonu bozulacaktır. Yazı Türü ve Boyutu Yazı Türü Verdana ve Boyut x-small seçilmesi sayfanızda bulunan metinlerinin en iyi şekilde görüntülenmesini sağlayacaktır.

18 18 Kişisel Web Sayfası Tasarım Sistemi Sayfa Düzenle Daha önceden oluşturduğunuz sayfaların düzenlenmesi ya da silinmesi için bu bölüm kullanılır. Bu bölümde daha önceden oluşturduğunuz menüye bağlı sayfalar ya da bağımsız sayfalarınız (kırmızı renkte) açılır liste kutusunda görüntülenecektir. Sayfalarınızın Türkçe veya İngilizce olduğu isimlerinin yanında parantez içerisinde belirtilmiştir. Bu bölüme ilk girdiğiniz zaman Anasayfa otomatik olarak görüntülenecektir. Açılır liste kutusundan düzenlemek istediğiniz sayfayı seçtiğinizde bu sayfa otomatik olarak editöre gelecektir. Bağımsız dosyada anlatılan işlemlerin aynısı bu alanda da geçerlidir. Düzenleme işleminiz bittikten sonra Kaydet butonuna tıklayarak yaptığınız değişiklikleri kaydedebilirsiniz. Not : Eğer kaydet butonuna basmadan bu bölümden çıkarsanız düzenlemeleriniz kaybolacaktır. Açılır liste kutusundan seçtiğiniz sayfayı silmek isterseniz sağ tarafta bulunan Sayfa Sil butonunu kullanabilirsiniz.

19 Kişisel Web Sayfası Tasarım Sistemi 19 Duyuru İşlemleri Duyuru işlemlerine tıkladığımızda açılan alanda duyurularınızla ilgili yapabileceğimiz işlemler gözükmektedir. Bu bölümde duyuru oluşturabilir veya duyurularınızda düzenlemeler yapabiliriz. Duyuru Oluştur Web sayfanızda ziyaretçileriniz için vermek istediğiniz duyuruları oluşturacağınız alandır. Bu alanda duyurunuzun dilini, yayından kaldırılma tarihini, başlığını ve duyuru metnini girebilirsiniz. Bu alanda yayından kaldırılma tarihi bölümüne tıkladığınızda takvim görüntülenecektir. Buradan tarihi seçebilirsiniz. Yayından kaldırılma tarihi ve Duyuru Başlığı alanlarının doldurulması zorunludur. Bu alanları doldurmadan duyurunuzu kaydedemezsiniz. Duyuru Düzenle Daha önceden oluşturduğunuz duyurularınızı düzenlemek ya da silmek için kullanılan bölümdür.