Yrd. Doç. Dr. Doğan AYDOĞAN

... konulu sunumlar: "Yrd. Doç. Dr. Doğan AYDOĞAN"— Sunum transkripti:

1 Yrd. Doç. Dr. Doğan AYDOĞAN
Adobe Muse Yrd. Doç. Dr. Doğan AYDOĞAN

2 Sayfaya Yazı Eklemek Ana Menü – Dosya – Yerleştir – komutu ile bilgisayarımızdan bir .txt dosyası seçip sayfamıza ekleyebiliriz. Word dosyalarını doğrudan sayfalara yerleştiremeyiz, bunun için kopyala- yapıştır yöntemi ile yazıyı sayfanın içine kopyalamak gerekir. Word yazılarının kendi stilleri olduğunda web sayfasında sorun yaratabilir, bu nedenle yazıları Word programında da oluştursak txt dosyası olarak kaydetmek daha kullanışlı olacaktır.

3 Yazıları Düzenlemek Ekranda bir yazı seçildiğinde ayarlar paneli, yazı ayarlarını gösteren sekmelere dönüşür. Buradan istediğimiz ayarları yapabiliriz. Office uygulamalarındaki simgelerle neredeyse aynıdır. Paneldeki «metin» ikonuna tıklayarak gelişmiş yazı ayarlarını gösteren paneli açabiliriz. Buradan satırlar ve karakterler arası mesafe. Paragraftan önce ve sonra boşluk miktarı ayarlanabilir.

4 WEB güvenlikli fontlar ve sistem fontları
Web tarayıcılar bütün fontları desteklemez. Bu nedenle sitemizi yaparken kullandığımız ilginç fontlar değişik tarayıcılarda farklı görünebilir ve sorun oluşturabilir. Web safe font: Bütün tarayıcılar tarafından desteklenen ve güvenli olan fontlardır. Sistem fontları: Bilgisayarımızda yüklü olan fontlardır. Sitemizi yaparken sistem fontlarını kullanırsak sorun çıkmaması için muse programı bu yazıları görsel olarak dışa aktaracaktır. Bu hem sitemizin açılmasını geciktirecek hem de Google gibi arama motorlarının yazı içeriğini index’lemesini engelleyecektir. Bu nedenle font seçerken web safa fonts kategorisinden seçim yapmalıyız.

5 TypeKit fontları eklemek
Bir web sitesi tasarlarken web güvenlikli fontlar dışında fontlar kullanmak isteyebiliriz. Adobe firmasının TypeKit uygulaması ile sitemize güvenli web fontları ekleyebiliriz. (Bu fontlar Türkçe karakterleri desteklemeyebilir..) Yazı karakteri seçerken web font ekle sekmesi ile TypeKit panelini açıp, kullanmak istediğimiz fontu seçebiliriz.

6 Paragraf ve karakter stilleri oluşturmak
Web sitelerindeki yazı büyüklükleri, renkleri ve düzenleri her seferinde tek tek ayarlanmaz. Web tarayıcılar CSS kodlarını okuyarak, yazıların düzenini anlar ve gösterirler. Böylece yüzlerce sayfada aynı stille adlandırılmış nesne aynı şekilde gösterilir ve sitemizde görsel bütünlük bozulmaz. Muse programında CSS kodu yazmadan karakter ve paragraf stili oluşturabiliriz. Menü – pencere- paragraf stilleri sekmesini tıklayarak ilgili paneli açarız. Düzenlediğimiz paragrafı seçip stil oluştur sekmesinden yeni bir stil oluşturur ve anlaşılır bir isim koyarız. Bir başka paragrafı seçip oluşturduğumuz stili tıkladığımızda paragraf ilgili stile göre düzenlenir. Aynı işlemler karakter stilleri panelinden karakterler için uygulanabilir. Bir stille düzenlenmiş paragrafı seçip, değişiklik yaptığımızda stil ismi yanında (+) işareti belirir. Stil ismini sağ tıklayıp yeni düzenin, yeni bir stil olarak kaydedilmesini sağlayabiliriz ya da var olan stilin yeni düzene göre düzenlenmesini sağlayabiliriz. Seçili paragraftan yeni bir stil oluşturur.

7 Yazım Denetimini Kullanmak
Muse programı yazılardaki hataları denetleyebilir ve hatalı olanların altını kırmızı çizgi ile gösterir. Düzenle – Yazım Denetimi – Dinamik Yazım Denetimi sekmesini aktif hale getirerek programın yazıların hatalarını denetlemesini sağlayabiliriz. Bazı kelimeler, program sözlüğünde yer almayabilir. Örneğin kendi ismimiz. Bu tip kelimeleri Düzenle – Yazım Denetimi – Kullanıcı sözlüğü sekmesini seçerek, sözlüğe ekleyebiliriz.

8 Renk Örnekleri Eklemek
Tasarım programlarında çalışırken renklerin aynı olması için renk örneklerini kullanır ve sık kullanılan renkleri bir panelde tutarız. Böylece aynı rengi değişik unsurlara eklemek kolay hale gelir. (Her rengin binlerce tonu vardır ve el ile ayarlamak zaman alıcıdır. Renk örnekleri panelinde sık kullandığımız renkler tutulur. Yeni ekle sekmesi ile panele yeni renk ekleyebiliriz. Adobe kuler uygulamasından RGB kodlarını yada hexkodunu buraya kopyalayarak renkleri ekleyebiliriz. RGB değerleri Yeni renk ekler Hexkodu

9 Degrade Renkler oluşturmak
Tasarımlarımızda geçişli renk ögeleri kullanmak istediğimizde «degrade» özelliğini kullanırız. Nesneyi seçip, ayarlar panelinde dolgu sekmesini seçerek açılan panelde degrade özelliğini seçer ve ilgili ayarları yaparız. Degrade aktif İlk renk ve son renk görünürlük oranı İlk renk ve son renk Degrade yönü

10 Nesnelere Link (Köprü) Eklemek
Kişilerin web sitemizde etkin bir şekilde gezinmesi için nesnelere link veriririz. Bir nesneyi seçtiğimizde ayarlar panelinde köprüler sekmesinden nesnelere köprü ekleyebiliriz. Burada açılan panel ile, sitemizde yer alan sayfalara, bir dosyaya ya da el ile yazacağımız bir adrese köprü ekleyebiliriz. El ile adres yazma: Siteden bir sayfaya link verme Bilgisayardaki bir dosyaya link verme

11 Köprü stilleri oluşturmak
Varsayılan olarak, bir yazıya link verince altı çizili ve mavi hale gelir. Biz tasarımımıza uygun link düzenleri oluşturmak isteriz. Köprüler / bağlantı stillerini düzenle sekmesinden düzenlenebilir. Burada köprü rengi, imleç üzerinde rengi, ziyaret edilmiş link rengi gibi özellikler belirlenir. Yaratılan stil, nesne seçildikten sonra köprüler sekmesi tıklanarak, seçili nesneye uygulanır. Nesneye link stili uygulamak Yeni link stili oluşturmak ya da düzenlemek

12 Yer tabancası (Anchor Link) Eklemek
Tek sayfalı sitelerde ya da kullancıyı sitedeki belirli bir alana (sayfaya değil) göndermek istediğimizde anchor link ekleriz. Yer tabancası ile sayfalarda yer belirler ve yerlere isim veririz. Ardından bir nesneye köprü eklerken, köprüler sekmesinde bu yerler görünür olacaktır. Linki bu yere vererek kullanıcının o alana gidişini sağlarız. Yer Tabancası Alan adı atanan alan