Ünite 5: Lisanslı Masaüstü Web Yayıncılık Araçları

Giriş

Web teknolojisinin güçlenip yaygınlaşması, oldukça karmaşık HTML kodlarına sahip web sayfalarının hızlıca oluşturulabilmesi gibi bir ihtiyaç doğurmuştur. Web sayfası oluşturulması sürecini kolaylaştıracak araçlardan en güçlülerinin Adobe firması tarafından üretilen Dreamweaver, diğerinin ise Microsoft firması tarafından üretilen Expression Web olduğu söylenebilir.

Adobe Dreamweaver CC

Adobe Dreamweaver CC; web tasarımcıları ve arayüz tasarımcıları tarafından web sitelerinin ve mobil içeriklerin tasarlanması, kodlanması ve yönetilmesinde kullanılan bir araçtır. Türkçe dahil olmak üzere on dokuz farklı dilde kullanılabilen Dreamweaver, HTML, C#, VB (Visual Basic), CSS (Cascading Style Sheets), ASP (Active Server Pages) ve XML (Extensible Markup Language) gibi farklı web dillerini ve programlama dillerini desteklemektedir. Bootstrap entegrasyonu ile boyutu, ekran çözünürlüğü ve sayfa yönlendirmesinden bağımsız olarak herhangi bir tarayıcıya uyarlanabilir tepkisel (responsive) web siteleri tasarlanabilir. Bootstrap, açık kaynak kodlu, ücretsiz bir CSS çerçeve (framework) dir. Bir site için gerekli olan tüm elementleri içermektedir ve bu hazır elementleri kullanarak farklı boyutlardaki cihazlara uygun tepkisel web sitesi tasarımları geliştirilebilir. Adobe Dreamweaver CC yazılımının lisansı ücretli olarak temin edilebilmektedir. Ücretsiz deneme sürümü ise bir ay süreyle kullanılabilmektedir. Yazılımı edinebilmek için ilk olarak bir “Adobe ID”’nin alınmış olması gerekmektedir. Adobe ID ve şifre ile giriş yapıldıktan sonra Creative Cloud masaüstü uygulaması ve Dreamweaver indirilir. Ücretli yazılım için bunlara ek olarak Adobe ID ve şifre ile giriş yapıldıktan sonra satın alma işlemlerinin tamamlanması gerekir. Uygulamayı başlatmak için Creative Cloud masaüstü uygulamasının Apps sekmesinde Dreamweaver uygulamasının simgesi bulunur ve “Aç” etiketli düğme tıklanır.

Adobe Dreamweaver CC yazılımı kurulduktan ve çalıştırıldıktan sonra, ekranda Dreamweaver çalışma alanını isteğe göre kişiselleştirmek için üç soru soran bir Hızlı Başlatma menüsü görünür. Arayüz kullanıcının alışkanlıklarına göre özelleştirilebilmektedir. Dreamweaver yazılımı çalışma alanında şunlar bulunur;

• Uygulama çubuğu; Dosya, Düzen, Görünüm, Ekle, Değiştir, Format, Komutlar, Site, Pencere ve Yardım menülerinden oluşmaktadır.
• Belge araç çubuğu; belge penceresinin farklı görünümleri için seçenekler sunan kod görünümü, canlı görünüm, tasarım görünümü, bölünmüş görünüm düğmelerini içermektedir.
• Belge penceresi, hazırlama ve düzenleme sırasında üzerinde çalışılan belgeyi gösterir.
• Çalışma alanı değiştiricisi; uygulama çubuğunun sağ tarafında, farklı çalışma alanlarına geçiş yapmak için kullanılır.
• Paneller; çalışmanın izlendiği ve değiştirildiği bölümdür. Ekle paneli, bir belgeye görüntü, tablo ve medya öğesi gibi çeşitli nesne türleri eklemeyi sağlayan düğmeler içermektedir.
• Durum çubuğu; Belge penceresinin altındaki durum çubuğu, üzerinde çalışılan belge hakkında ek bilgi sağlar.
• Etiket seçici; belge penceresinin en altındaki durum çubuğunda bulunur. Geçerli seçimin çevresindeki etiketlerin hiyerarşisini gösterir.
• Araç çubuğu

Web sitesi için gereken tüm öğeler yerel klasörlerde ya da Adobe Creative Cloud Kütüphanelerinde toplanır ve bir araya getirilir. Dosyalar ve öğeler ile bir klasör yapısı oluşturulur. Bilgiler organize edildikten ve bir yapı belirlendikten sonra, site oluşturmaya başlanır. Bir Dreamweaver sitesi yerel klasör, uzak klasör ve test klasörü olmak üzere üç parçadan oluşabilir. Yerel klasör; çalışma dizinidir ve genellikle sabit sürücüdeki bir klasördür. Dreamweaver, bu klasörü yerel site kökü olarak ifade eder. Uzak klasör; dosyaların, web sunucusunu çalıştıran bilgisayarda depolandığı yerdir. Web sunucusu, genellikle (ancak her zaman değil) siteyi web üzerinde kullanıma açan bilgisayardır. Test klasörü, Dreamweaver’ın dinamik sayfaları işlediği klasördür. Dinamik formlar ve PHP içeriği varsa test klasörü oluşturulabilir. Dreamweaver sitesini tanımlamak için, yalnızca bir yerel klasör oluşturulması yeterlidir. Dosyaları bir web sunucusuna aktarmak veya web uygulamaları geliştirmek için uzak klasör ve test klasörü için de bilgi eklenmesi gereklidir. Birçok web sitesi, ziyaretçilerin veritabanlarında depolanan bilgileri görmelerine izin veren dinamik sayfalar içerir ve genellikle bazı ziyaretçilerin veritabanlarında yeni bilgi eklemelerine ve bilgi düzenlemelerine izin verir. Bu tür sayfalar oluşturmak için öncelikle bir web sunucusu ve uygulama sunucusu kurulması, Dreamweaver sitesinin oluşturulması veya değiştirilmesi ve bir veritabanına bağlanması gerekir. Sayfalar oluşturulurken web sitesinin tasarıma uygun ilerlediğini görmek için önizleme yapmak gerekebilir. Adobe Dreamweaver CC ile bazı temel öğeleri içeren genel bir web sayfası tasarımındaki işlemler şu şeklidedir;

• İlk olarak siteye eklenecek öğeleri saklamak üzere yerel diskte bir klasör oluşturulur
• Site oluşturulduktan sonra, bir HTML belgesi oluşturulur
• Tasarlanan web sayfasına yeni öğelerin eklenmesi için uygulama çubuğundaki ekle menüsü kullanılır.
• Başlık stilini düzenlemek için Değiştir menüsündeki “Sayfa Özellikleri...” kullanılır
• Tablo eklenecekse, ekle menüsünden “Table” seçilir ve tablo işlemleri tamamlanır.
• Resim eklenecekse önce eklenmek istenen resimlerin yerel klasörde yer alması gerekmektedir.
• Eklenen tüm öğelerin düzenlenmesinde araç çubuğu kullanılır.
• Bootstrap öğesi eklencekse ekle menüsünden “Bootstrap Bileşenleri” seçilir ve gerekli işlemler tamamlanır.
• Web sitesi tasarlanırken, birden fazla sayfa tasarlanarak bu sayfalar arasında bağlantılar kurulabilmektedir. Bunun için yeni bir HTML belgesi tanımlamak gerekmektedir.
• Yapılan her bir işlemden sonra dosya menüsü altında “Kaydet” tıklanması, yapılan çalışmaların kaybedilmemesi açısından oldukça önemlidir.
• Dosya menüsü altında “Tarayıcıda Önizleme” seçeneği farklı tarayıcılarda hazırlanan sayfaların nasıl göründüğüne bakılır.

Microsoft Expression Web

2012 yılına kadar desteklenmeye devam eden Microsoft Expression Web adlı araç, söz konusu yıl itibariyle Microsoft Visual Studio adlı platformun bir parçası haline getirilmiş olsa da, bağımsız sürümü ile ücretsiz olarak halen yayınlanmakta ve yaygın sayılabilecek bir kullanım bulmaktadır. Expression Web, Visual Studio platformunun altına benzer bir arayüzle ve benzer işlevlerle geçmiştir. Microsoft Expression Web’in dördüncü sürümü https://www.microsoft.com/enus/download/details.aspx?id =36179 adresi ziyaret edilerek ücretsiz olarak edinilebilir. Yazılımın indirilen kurulum dosyasının çift tıklanması ve kurulum yönergelerinin izlenmesi, kolay bir kurulum gerçekleştirilmesini sağlayacaktır. Microsoft Expression Web menü çubuğunda şunlar yer alır:

• File (Dosya): Oluşturulan projelerin kaydedilmesi, açılması ve yazdırılması gibi işlevleri barındırır.
• Edit (Düzenle): Kopyalama, yapıştırma ve geri alma gibi içerik düzenleme işlevlerinin yanı sıra içerik arama ve değiştirme işlevlerini barındırır.
• View (Görünüm): Web geliştirme arayüzünün görünümünü ve işlevselliğini düzenlemek için gereken işlevleri barındırır.
• Insert (Ekle): Düzenlenen web içeriğine kodarın ve çeşitli formatlardaki içeriklerin eklenmesini sağlar.
• Format (Biçim): Düzenlenen web içeriğinin stil, çerçeve, maddeleme gibi biçimsel özelliklerinin düzenlenmesini sağlayan işlevleri barındırır.
• Tools (Araçlar): Düzenlenen web sayfalarına ilişkin inceleme ve raporlama araçlarını barındırır.
• Table (Tablo): Web içeriğine çeşitli özelliklere sahip tabloların eklenmesini sağlar.
• Site (Site): Web içeriğinin yayınlanmasını sağlayacak site tanımlarının oluşturulmasını ve düzenlenmesini sağlar.
• Data View (Veri Görünümü): Web sitesini besleyen veri kaynaklarının oluşturulmasını ve düzenlenmesini sağlar.
• Panels (Paneller): Arayüzde yer alan panellerin görünüm özelliklerinin düzenlenmesini sağlar.
• Window (Pencere): Microsoft Expression Web’in içinde yer alan çalışma pencerelerinin düzenlenmesini sağlar.
• Help (Yardım): Microsoft Expression Web’in kendisine ve kullanımına ilişkin bilgilere ulaştırır.

Menü çubuğunun hemen altında yer alan araç çubuğu, sık kullanılan menü öğelerine kolayca ulaşmayı sağlar. Arayüzün en altında, durum çubuğu görüntülenmektedir. Bu çubuk, düzenleme sürecinde gerekebilecek hatırlatmaların görüntülendiği yerdir. Araç çubuğu ile durum çubuğunun arasında kalan büyük alan kullanışlı özellikler bulunduran panellerle doludur. Varsayılan görünümün sol üstünde yer alan “Folder List” sekmeli panel, web sayfasını oluşturan dizin yapısını, dosyalarıyla birlikte görüntüler Dosya taşıma, ekleme ve silme gibi işlemler bu panel üzerinden gerçekleştirilebilir. Dizin panelinin altında yer alan iki sekmeli panel, web içeriğinde kullanılan HTML ve CSS etiketlerinin özelliklerinin kolayca düzenlenmesini sağlar. Varsayılan arayüzün sağ üst kısmında görüntülenen “Toolbox” ve “Snippets” başlıklı iki sekmeyi içeren panel, düzenlenen web içeriğine hızlıca öğe ve işlev eklenmesini sağlar. Arayüzün sağ alt kısmında kalan panel ise, web sayfasının stil düzenlemelerine ilişkin araçlar barındırır. Menü çubuğundaki “View” ve “Panels” menüleri kullanılarak, varolan kontrol öğeleri kaldırılabileceği gibi, yeni kontrol öğeleri de eklenebilir. Microsoft Expression Web ile web tasarımı yapmak için gerekli işlemler şu şekilde genellenebilir;

• Expression Web’in “File” menüsüne bulunan “New” alt menüsündeki “Page” komutu, HTML kategorisi seçilerek yeni bir web sayfası oluşturulur
• Yeni bir HTML sayfası oluşturulduktan sonra yapılması gereken şey, içeriği oluşturmak için kullanılacak metin kutusu, resim, form elemanı, CSS özelliği gibi nesnelerin menü ve panellerden bulunup oluşturulan sayfaya eklenmesi ve özelliklerinin içeriğe yönelik olarak düzenlenm esidir.