WTK212U-WEB GRAFİK TASARIMI
Ünite 4: InDesign ve Dreamweaver ile Web Tasarım
Giriş
İnternet ve beraberinde getirdiği yeni teknolojiler, bireylerin yaşamında dijitalleşmenin de yolunu açmıştır. Bilgisayarlar ve akıllı telefonlarla her yaştan bireyin internet kullanabiliyor olması, internete erişimin daha kolay hâle gelmesi, dijitalleşmenin farklı sektörlerde hızlanmasında etkili olmuştur. Örneğin; basılı kitaplar, broşürler, kataloglar, Cv’ler, portfolyolar, gazete ve dergiler yerini dijital formatına bırakmaya başlamıştır. İnternet siteleri ve internet reklamları ise tanıtım ve pazarlama amaçlı olarak yoğun şekilde kullanılmaktadır. Çünkü basılı materyallerin kapsayabileceği tasarım unsurları, etki açısından internet siteleri ve dijital materyallerle kıyaslanamayacak kadar yetersiz kalmaktadır.
Dijital platformlarda kitlelere ulaşabilmek ve dikkat çekebilmek; renkli, etkileşimli ve çok boyutlu profesyonel tasarımlarla mümkündür. Bu tür tasarımları geliştirmek de bir o kadar profesyonel yazılımlar kullanmayı gerektirir. Bu bölümde, profesyonel ve etkili dijital tasarımlara imza atmanızı kolaylaştıracak, keyifli hâle getirecek InDesign ve Dreamweaver yazılımları hakkında temel bilgiler aktarılacaktır.
InDesign ile Web Tasarımı
InDesign Yazılımının Kullanım Alanları, Genel Özellikleri ve Kısa Tarihçesi
InDesign, Adobe şirketinin basılı ve elektronik masaüstü yayıncılık için geliştirdiği bir yazılımdır. Dergi, gazete, kitap, broşür, katalog gibi çok sayfalı eserlerle davetiye, poster, kartvizit ve afiş gibi tek sayfadan oluşan eserlerin tasarımı ve yayınlanmasında kullanılmaktadır. Piksel kalitesinde kontrol sağlanabildiğinden hassas tasarımlar yapmak mümkündür. Adobe Creative Cloud’un bir parçası olduğundan Adobe’un birçok ürünüyle entegre çalışabilmektedir. Bu sayede farklı türlerden dosya çıktılarının oluşturulmasına olanak tanıması, InDesign’ın öne çıkan özelliklerinin başında gelmektedir. Ayrıca bulut tabanlı ve iş birliğine dayalı yapısı, OpenType yazı tiplerini desteklemesi de (Noble Desktop, 2022) unutulmaması gereken özelliklerindendir. Bu özelliklere, oluşturulan tasarımların html sayfasına dönüştürülebilmesi de eklendiğinde, yazılımın tasarımcılar, yayıncılar, reklamcılar, pazarlamacılar ve web sitesi geliştiricileri tarafından tercih edilirliği günden güne artmaktadır.
InDesign tasarımlarına videolar, animasyonlar, yazılar, çok boyutlu resimler ve html sayfaları eklenebilmektedir. Bu tasarım unsurları genellikle InDesign yazılımında hazırlanmaz. Bunlar başka yazılımlarla hazırlanır, InDesign’a aktarılır ve hazır olarak kullanılır. InDesign yazılımının iş birliği içinde çalışabildiği çok sayıda dosya uzantısı mevcuttur (bkz: s. 90-91).
InDesign CC sürümlerini InDesign CS sürümlerinden ayıran en belirgin özellik; CS’nin tek seferlik ödeme ile satın alınan ve istenildiği kadar kullanılan bir ürün olmasına
karşılık, CC sürümünün aylık ya da yıllık aboneliğe dayalı olarak kullanılabilmesidir. Eğer Creative Cloud paketinde yer alan diğer yazılımlar kullanılmak istenmiyorsa, Windows ya da MacOS için bağımsız olarak InDesign lisanslanabilmektedir. Bu noktada unutulmaması gereken bir diğer özellik de CS sürümlerinden biriyle hazırlanmış bir tasarım CC sürümlerinde rahatlıkla açılabilmekteyken, tersinin söz konusu olmadığıdır. InDesign CS ve CC sürümleri Windows ve MacOS işletim sistemleri altında çalışabilmektedir ancak CC sürümleri Windows’un güncel versiyonlarında çok daha başarılıdır. CC’nin bir diğer özelliği de Adobe Stock gibi içinde telif ücreti ödemeye gerek olmayan milyonlarca fotoğraf, video, çizim ve şablonu barındıran hizmetleri de kullanmaya olanak tanımasıdır (American Graphic Institute, 2022). Tüm lisanslı ürünlerde olduğu gibi InDesign da satın alınmak suretiyle kullanılması gereken bir yazılımdır. Satın almaya karar verme sürecini kolaylaştırmak adına, Adobe tarafından deneme sürümünü temin etme imkânı sağlanmaktadır.
InDesign Başlangıç ve Çalışma Ekranları
InDesign CC 2020 yazılımını cihazınıza indirdikten sonra Id simgesine çift tıklama yapıldığında, öncelikle Resim 4.1’deki Giriş Ekranı, yazılım tasarım yapmaya hazır olduğunda ise Resim 4.2’deki Başlangıç ekranı görüntülenir.
Başlangıç Ekranı, InDesign ilk çalıştırıldığında ya da henüz bir dosya açılmamışken görüntülenir. Başlangıç Ekranında yer alan sekmeler ve düğmelerin görevleri şöyledir:
• 1 numaralı alan menü çubuğudur. InDesign yazılımına ait komut kümeleri bu menüde yer alan sekmelerin altında yer almaktadır. • 2 numaralı alan Giriş; üzerinde çalışılmış olan dosyaları görüntülemek için bir kısayol sunar. Yazılım ilk kez çalıştırıldığında bu alan pasif durumdadır. • 3 numaralı alan Yeni Oluştur; yeni bir InDesign dosyası oluşturmak için kullanılır. • 4 numaralı alan Aç; daha önce üzerinde çalışılmış ve kaydedilmiş dosyaları açmak için kullanılır. • 5 numaralı alan Yeni Oluştur; 3 numaralı düğme ile aynı görevi yerine getirir.
Başlangıç Ekranında yer alan Yeni Oluştur butonlarından herhangi biri seçildiğinde, InDesign tasarımı yapmak üzere ilk adım atılmış olur. Açılan Yeni Belge İletişim Kutusu, üzerinde çalışılacak tasarımın genel ayarları için kullanılır. Bu kutuda yer alan bileşenler Resim 4.3’te gösterilmiştir. Bu bileşenler ve görevlerini özetlemek gerekirse:
• 1 numaralı alan; üzerinde en son çalışılmış olan dosyayı ve sonraki çalışmalarda kullanılmak üzere kaydedilmiş dosya şablonlarını görüntülemek için kullanılan sekmelerle, hazırlanacak tasarımın çalışma alanının seçimi için alternatif sekmeleri kapsamaktadır. Eğer basılı bir ürün (kitap, gazete, dergi vb.) için tasarım yapılacaksa Basılı, internet
sitesi için bir tasarım yapılacaksa Web, mobil cihazlarda açılacak bir tasarım (e-Katalog vb.) yapılacaksa Mobil sekmesine tıklanır. Seçime göre 3 numaralı alanda yer alan seçenek, sekme ve butonlar değişecektir. • 2 numaralı alan; Baskı, Web ve Mobil sekmelerinden her biri için farklı sayfa ebatlarında alternatifler sunar. Resim 4.3’te Baskı sekmesi işaretlendiğinden farklı kâğıt ebatları alternatifleri sunulmuştur. İstenilen ebat tercih edilerek çalışmaya başlanabilir. • 3 numaralı alan; üzerinde çalışılacak tasarım dosyasına isim verilebilmesini sağlar. Ayrıca, dosyanın genişlik ve en değerlerini istenilen uzunluk ölçüsü birimi üzerinden belirlenebilir. Sayfanın yatay veya dikey olarak yönünü değiştirebilir. Yapılacak tasarımda yer alacak sayfa sayısı ve başlangıç sayfasının numarası belirlenebilir. Birincil Metin Çerçevesi” kutucuğu işaretli olduğunda, her sayfada otomatik olarak bir metin kutusu oluşturulur. Sayfanın kenar boşluklarına ait sayısal değerler de bu alanda belirlenir. Eğer farklı kenarlarda farklı değerler kullanılmak istenirse, zincir ikonuna tıklanarak boşluk değerleri bağlantısı açılmalıdır. Aynı şekilde, basılı bir materyal tasarımında taşma payı ve bilgi alanları için de sayısal değerler girilmesi gerekebilir. Eğer kenarlarda değişik taşma payı ve bilgi alanı değerleri belirlenmek istenirse, yine zincir ikonu ile bağlantının açılması gerekir. Bu alanda “Ön izleme” seçeneğine ait kutucuğun işaretlenmesi önerilmektedir. Bu işaretleme, yapılan tasarımın sürekli kontrolü ve izlenebilmesi için önemlidir. Değerlerin belirlenmesinden sonra bu alanda yer alan Oluştur butonuna tıklanarak çalışmaya başlanabilir.
Üzerinde çalışmaya başlanacak yeni tasarım dosyasının ayarları bu pencerede yapılabileceği gibi, ana çalışma ekranında (Resim 4.4.) da yapılması mümkündür. Ya da önceden belirlenmiş ayarlar üzerinde değişiklikler yapılabilir.
Çalışma ekranında yer alan;
1 numaralı alandaki Publish Online butonu, yapılan tasarımın çevrimiçi bir ortamda yayınlanması için kullanılır. Bu butonunun sağında yer alan ve Resim 4.4’te Esaslar yazılı olarak görülen sekmeye ait yön işaretine tıklandığında Resim 4.5’teki liste açılacaktır. Hazırlanacak tasarımın türü bu listeden seçilerek değiştirilebilir.
2 numaralı alan ise Araç Kutusu’dur. Tasarımlarda ihtiyaç duyulan tüm araçlara buradan erişilebilir. Araçlar Kutusu temelde 4 bölüme ayrılır (Adobe, 2022b):
1. Seçim Araçları 2. Yazma ve Çizme Araçları 3. Dönüştürme Araçları 4. Değiştirme ve Gezinti Araçları
3 numaralı alan; Özellikler, Sayfalar ve CC Libraries sekmelerinden oluşmaktadır. Özellikler sekmesi aktifken; üzerinde çalışılacak dosya ve sayfaya ilişkin tüm mizanpaj ayarları yapılabilir. Ayrıca, Cetveller ve Izgaralar alanındaki üç buton ile ekrana cetvel ve ızgara eklenip eklenmemesi tercihi yapılmasına olanak tanınır. Izgaralar, satırlar için ya da sayfaya eklenecek nesnelerin hizalanması için kullanılmaktadır. Dosyayı İçe Aktar butonu, hazırlanan dosyanın InDesign’ın desteklediği dosya türlerinden biri seçilerek içe aktarılmasını sağlar. Üzerinde çalışılan tüm sayfaların ön izleme modunda görüntülenmesi ve sayfaların yerlerinin sürüklenerek değiştirilmesi Sayfalar sekmesi yardımıyla sağlanır. Aynı sekme; dosyaya yeni sayfa ekleme, sayfa silme ve sayfa boyutunun değiştirilmesi işlemleri için gerekli butonları da içermektedir. Adobe Stock’tan indirilen şablonlar Creative Cloud kitaplığına Stock Şablonları adıyla kaydedilir. Tasarım yaparken bu şablonlara CC Libraries sekmesinden ulaşılabilir.
Dreamweaver ile Web Tasarımı
Günümüzde birçok kurum, kuruluş veya şahıs, internet ortamında yer alabilmek ve kendilerini tanıtabilmek için web tasarımı gerçekleştirmektedir. Web tasarım sektörünün popülerliğinin ve yazılım teknolojilerine gösterilen ilginin günden güne artması sebebiyle bu durum daha da önemli bir hâl almaya başlamıştır. Bu nedenle web tasarımı yapılabilecek yazılımlar, ilgili kesimler tarafından titiz bir şekilde takip edilmektedir. Web tasarım yazılımlarından biri olan Dreamweaver, ilk olarak 1997 yılında Macromedia şirketi tarafından piyasaya sunulan ve daha sonra Adobe firmasının Macromedia’yı satın almasıyla Adobe tarafından geliştirilmeye devam edilen bir uygulama olarak dikkat çekmektedir (Alastyr, 2021). Süreç içerisinde birçok sürümü yayınlanan Dreamweaver’ın geçmişten günümüze kadar sunulmuş tüm sürümlerine sayfa 106’da yer verilmiştir (Adobe, 2022c).
Adobe firması Dreamweaver programını sürekli olarak güncellemekte ve kullanıma sunmaktadır. Bunun yanı sıra, Dreamweaver’ın lisanslı (ücretli) bir program olduğu da unutulmamalıdır. Bir başka ifadeyle, bu programı kullanabilmek için lisans ücreti ödemeniz gerekmektedir. Ancak, birçok programda olduğu gibi Dreamweaver’ı satın almadan önce deneme sürümünü kullanma imkânı bulunmaktadır. Deneme sürümünün ardından istenildiği takdirde lisans ücreti ödenerek Dreamweaver kullanılmaya devam edilebilir.
Dreamweaver’ın en önemli özelliklerinden biri; HTML, PHP, CSS ve JavaScript dillerini desteklemesidir. Böylece, tasarımcıları sadece tek bir dil ile sınırlamamakta ve tasarımcılara esneklik sunmaktadır. Bunun yanı sıra, web tasarımı esnasında yapılan işlemlerin canlı bir şekilde görüntülenmesini sağlaması da bir başka önemli özelliğidir. Elbette Dreamweaver dışında web tasarımı yapılabilecek lisanslı ve açık kaynak kodlu platformlar da bulunmaktadır. Ancak barındırdığı kolaylıklar, sağladığı esneklikler ve Adobe firmasının ihtiyaç anlarında sunduğu destekler nedeniyle Dreamweaver tercih edilirlik oranı yüksek bir
uygulamadır denilebilir. Diğer uygulamalarla kıyaslandığında, Dreamweaver’ın özellikle yeni başlayanlar için çeşitli hazır şablonlar sunması önemli bir artıdır. Aynı zamanda yapılan tasarımın bilgisayar, tablet ve akıllı telefonlarda nasıl görüntüleneceğine dair alanları barındırması da tercih edilme nedenlerinden biridir. Böylelikle, ek bir programa ihtiyaç duymadan çeşitli ortamların arayüzlerine uygun tasarımlar hazırlama olanağı sunulmaktadır. Bunun yanı sıra, birden çok dil desteği sunması da en önemli tercih sebeplerinden biridir.
Dreamweaver Arayüzü ve Bileşenleri
Dreamweaver programı çalıştırıldığında karşımıza varsayılan olarak Resim 4.23’te gösterilen Başlangıç Ekranı gelmektedir. Bu ekran, kullanıcıları yönlendirmek için kullanılmaktadır. Fakat istenildiği takdirde program başlatıldığında bu ekranın açılmaması sağlanabilir. Bunun için, “Düzen-Tercihler” yolunun izlenmesi ve “Başlangıç Ekranını Göster” seçeneğinin işaretinin kaldırılması yeterlidir.
Başlangıç Ekranı incelendiğinde temelde 4 bölümün bulunduğu görülmektedir (Resim 4.23). 1 numaralı alan, Dreamweaver tarafından HTML, CSS, Bootstrap gibi çalışma dosyalarının tek tık ile açılmasını sağlayan alandır. 2 numaralı alan ile gösterilen Başlangıç Şablonları menüsü, kullanıcıların Dreamweaver tarafından sunulan basit ve hazır şablonlara ulaşabilmesini sağlamaktadır. 3 numaralı alanda belirtilen Yeni Oluştur butonuna basılması ile birlikte açılan ekran, 1 ve 2 numaralı alanlarda yapılan işlemlerin daha ayrıntılı bir şekilde gerçekleştirilmesini sağlamaktadır. 4 numaralı alanda bulunan Aç butonu ile daha önce hazırlanmış Dreamweaver projelerine erişim sağlanabilmektedir.
Hazır şablonları kullanmak yerine boş bir şablon oluşturulduğunda karşımıza Resim 4.24’teki gibi bir ekran gelmektedir. Bu ekran, temelde 7 bölümden oluşmaktadır. Bu bölümler aşağıdaki şekilde ifade edilebilir:
• 1 numaralı alan: Çeşitli işlemler için kullanılan menüleri temsil etmektedir. Uygulama çubuğu olarak da ifade edilmektedir. Bu bölümde yer alan Dosya menüsü sayesinde yeni dosya oluşturma, hazırlanmış olan eski çalışmaları açma, çalışma dosyasına içerik aktarma, çalışma dosyasındaki verileri dışa aktarma işlemleri gerçekleştirilebilir. Ayrıca yazılan kodların sadece program içerisinde değil, tarayıcılar üzerinde görüntülenmesini sağlamak için de kullanılmaktadır. Benzer şekilde Düzen menüsü ile çalışma alanı ve kodlarla ilgili çeşitli düzenlemeler yapılabilir. Görünüm menüsü ile 4 numaralı alanda ifade edilen geçişler kullanılabilir. Bir diğer ifade ile kod yazarken aynı anda tasarımın görüntülenmesi, kod yazımı esnasında yapılan değişikliklerin canlı bir şekilde görüntülenmesini sağlamak gibi ayarlara bu menü altından da erişilebilir. Ekle menüsü ile header, article, navigation, hyperlink gibi çeşitli HTML bileşenleri çalışmaya dahil edilebilir. Site menüsü
ile Dreamweaver üzerinde yeni bir site oluşturmak, var olan siteleri yönetmek gibi işlemler gerçekleştirilebilir. Pencere menüsü ile çalışma alanında bulunan pencerelerin kaldırılması veya çalışma alanında bulunmayan pencerelerin alana dahil edilmesi sağlanabilir. • 2 numaralı alan: Araç çubuğudur. Bu çubuk sayesinde açık olan projeler arasında hızlı bir şekilde geçiş yapılabilir. Tasarımcının veya başka kişilerin yazılan kodları anlamasını sağlamak üzere yorum satırları eklenebilir veya eklenmiş olan yorumlar hızlı bir şekilde kaldırılabilir. • 3 numaralı alan: Web tasarımı yapabilmek için ihtiyaç duyulan kodların yazıldığı bölümdür. Ayrıca 4 numaralı alanda belirtilen geçişler yapıldığı takdirde bu alanda yazılan kodların anlık görüntüleri de görüntülenebilir. • 4 numaralı alan: Çalışmanın farklı görünümlerde incelenebilmesini sağlar. Ekranda sadece kodlarla çalışmak veya kod yazarken canlı olarak görünüm elde etmek istenildiği takdirde bu bölümdeki ayarlar kullanılabilir. • 5 numaralı alan: Çalışma alanı ile ilgili ek ayarların yapıldığı bölümdür. Bu bölümden kod yazılan dil değiştirilebilir ve böylece Dreamweaver’ın seçilen dilin kurallarına uygun bir şekilde denetim yapması sağlanabilir. Bunun yanı sıra yazılan kodların ekran görüntülerinin tarayıcılarda görüntülenmesini sağlayan alan da bulunmaktadır. • 6 numaralı alan: Çalışma alanının değiştirilebilmesi için kullanılan paneldir. Bir başka ifade ile mizanpaj paneli de denebilir. Bu panel kullanılarak Dreamweaver uygulamasının arayüzü varsayılan ayarlar ile değiştirilebilir. Varsayılan olarak Standart ve Geliştirici seçenekleri yer almaktadır. Ancak istendiği takdirde kullanıcılar çalışma alanını kendilerine uygun bir şekilde belirleyebilir ve bu alanı kaydedebilir. • 7 numaralı alan: Panel bölümüdür. Bu bölüm üzerinde sitelere yönelik klasörlere hızlı bir şekilde erişim imkânı sunulmaktadır. Ayrıca DOM panelinde web sitelerindeki Site Haritaları’na benzer şekilde otomatik olarak site ağaçları oluşmaktadır. Böylece çalışmada kullanılan HTML etiketlerine tek bir tık ile ulaşım mümkün hâle gelmektedir. Benzer şekilde aynı alan içerisinde yer alan Parçacıklar menüsü ile kod alanına mail, favicon, navigation gibi bileşenlere ait hızlı kodlar eklenebilir. Benzer işlemler CSS, Javascript, PHP gibi diller için de gerçekleştirilebilir.
Dreamweaver ile Web Tasarım Alanları
Bir web tasarım yapılmadan önce bilinmesi gereken en temel bilgi, hazırlanacak siteye ait tüm dosyaların bir klasörde toplanması gerektiğidir. Çünkü web siteye ait
dosyaların farklı klasörlerde yer alması, tasarlanacak sitenin istenilen şekilde kodlanmasını ve görüntülenmesini engelleyebilir. Bunun yanı sıra uzak sunuculara yükleme yapıldığı esnada da benzer sorunlar yaşanabilir. Bunun için site içeriklerinin tek bir klasörde toplanması gerektiği unutulmamalıdır. Dreamweaver yazılımında bu işleme Site Tanımlama ismi verilmektedir. Belirtilen sebeplerden dolayı tasarım işlemine başlamadan önce mutlaka site tanımlaması yapılmalıdır. Site tanımlaması yapmak için Uygulama Çubuğu’ndaki Site menüsü altında yer alan Yeni Site seçeneği kullanılmalıdır. Açılan pencerede oluşturulacak site için bir site adı ve siteye ait dosyaların bilgisayarda toplanacağı klasör belirlenmelidir (Resim 4.25). Ancak dosyaları direkt olarak web sunucunuza yüklemek ve orada toplamak istediğiniz takdirde ekranda yer alan Sunucular menüsü kullanılmalı ve web sunucu şirketi tarafından size verilen FTP uzak bağlantı bilgilerini kullanarak site tanımlaması gerçekleştirilmelidir.
Gerekli ayarlar yapılıp site tanımlaması tamamlandığında Dosya-Yeni yolu izlenmeli, ardından tasarım için kullanılacak dil seçimi (HTML, CSS, PHP vb.) yapılmalıdır. Seçimin ardından oluşan sayfa, Dosya- Kaydet yolu izlenerek site dosyalarının toplanacağı klasöre kaydedilmelidir. Dosya kaydedildiğinde çalışma alanındaki görüntü Resim 4.26’da belirtildiği gibi olacaktır. Gösterilen alan üzerinden dosyalar arasında geçişler de yapılabilir. Web sitelerin temelinde HTML işaretleme dili yer aldığı için bu örnek çalışma HTML dosyaları ile oluşturulmuştur.
Bir web sitesi temelde Resim 4.27’de gösterildiği şekilde dizayn edilir. Örnek çalışmamızda kullanacağımız bileşenleri çalışmamıza eklemenin iki farklı yöntemi bulunmaktadır. Bunlardan ilki kod ekranında iken kullanmayı istediğimiz HTML etiketini direkt olarak kod ekranına yazmaktır. İkinci seçenek ise bu bileşenleri Ekle menüsü kullanılarak kod alanına eklemektir. Bu örnek çalışmanın hazırlanabilmesi için Ekle menüsü kullanılacaktır. Unutulmamalıdır ki sitemizde görüntülenmesi istediğimiz her türlü içerik, gövde anlamına gelen <body></body> etiketleri arasına eklenmelidir. Ancak bu bilgi, <head></head> etiketleri arasına ek kodlar yazılamayacağı anlamına gelmemektedir. Bu doğrultuda çalışma alanına bileşenler eklenmeden önce hem kod hem de tasarım ekranını aynı anda görüntüleyebilmek için GörünümBöl yolu izlenmiş ve Kod-Canlı seçeneği seçilmiştir. Böylece ekranlar arası geçiş yaparak vakit kaybetmek yerine değişimlerin anlık olarak ekranda görüntülenebilmesi sağlanmıştır.