Lisanslı Web Yayıncılık Araçları

Adobe Dremweaver yazılımı masaüstü, dizüstü, tablet, akıllı telefon gibi farklı platformlara yönelik web içerikleri oluşturmak ve düzenlemek amacıyla geliştirilen oldukça güçlü özelliklere sahip görsel bir tasarım editörüdür. 

İlk sürümü Aralık 1997 yılında piyasaya sürülen Dreamweaver yazılımının zaman içerisinde çok farklı sürümleri piyasaya sürülmesine karşın 2022 yılı itibarıyla en güncel sürümü Adobe Dreamweaver CC sürümüdür.

Adobe Dreamweaver yazılımı ile hem HTML kodları hem de HTML kodlarını kullanmadan sadece görsel araçlar yardımıyla web içerikleri oluşturulabilmektedir. Bir başka ifadeyle, Adobe Dreamweaver yazılımı ile web sayfasını oluşturan HTML kodlarını yazmak yerine görsel nesneleri sayfaya ekleyerek web sayfaları oluşturulabilmektedir. Yazılım, eklenen ve özelliği ayarlanan her görsel nesneye ait HTML kodunu otomatik olarak kendisi oluşturur. Bu yönüyle Adobe Dreamweaver yazılımı web sayfasının tasarım sürecini kullanıcıya bırakırken HTML kodlarının oluşturulması sürecini kendisi üstlenmektedir. Böylelikle kullanıcılar bir metin editöründe çalışıyor gibi web sayfalarını görsel olarak tasarlayabilir.

Hyper Text Markup Language kelimelerinin kısaltması olan HTML, web sayfaları oluşturmak için kullanılan standart bir işaretleme dili anlamına gelmektedir.

Adobe Dreamweaver CC yazılımının arayüzünün üst kısmında menülere, çalışma alanı yerleşim seçeneklerine (Standart, Geliştirici) ile pencere araçlarına (simge durumu, önceki boyut/ekranı kapla ve kapat) yer verilmiştir. Dreamweaver yazılımında yapılacak işlemlere göre kategorize edilmiş dokuz adet menü bulunur ve menüler yardımıyla yazılımdaki tüm işlemler gerçekleştirilir. 

Arayüz ekranında menülerin altındaki “Belge” araç çubuğu üzerinde üç adet yerleşim seçeneği bulunur. Bunlar; “Kod”, “Böl” ve seçilen duruma göre “Canlı” veya “Tasarım” yerleşim seçeneğidir. Bu yerleşim seçenekleri kullanıcıların web tasarımı sürecinde tercih ettikleri tasarım seçenekleridir. Yazılım aracılığıyla kullanıcılar HTML kodlarıyla tasarım yapabileceği gibi görsel nesnelerle de tasarım yapabilmektedir. Bu nedenle yerleşim seçeneklerinde sadece HTML kodlarıyla tasarımın yapıldığı kod bölmesinin görüntülendiği “Kod” yerleşim seçeneği, görsel nesnelerle tasarımın yapıldığı tasarım bölmesinin görüntülendiği “Tasarım” yerleşim seçeneği ve her iki tasarım bölmesinin bir arada görüntülendiği “Böl” yerleşim seçenekleri seçilebilir. “Canlı” yerleşim seçeneği ise hazırlanan tasarımların bir web tarayıcısında nasıl görüntüleneceğinin anlık olarak izlenebildiği seçenektir.

Adobe Dreamweaver CC arayüz ekranının sol kısmında “Ortak” araç çubuğu yer alır. Bu araç çubuğu ile belgeler arası geçiş ve dosya yönetim işlemleri yapılmaktadır.

Dreamweaver yazılımında tüm işlemler menüler altındaki seçenekler yardımıyla yapılabileceği gibi açılır kapanır paneller ve araç çubuklarında yer alan seçenekler yardımıyla da yapılabilir. Bu nedenle farklı işlemler için tasarlanmış birçok panel bulunur. Yapılacak tasarımın özelliklerine göre kullanıcılar gereksinim duydukları panelleri “Pencere” menüsü altından aktif hâle getirerek ekranda görüntülenebilir, arayüz ekranında istenilen noktaya hareket ettirebilir, daraltılıp genişletilebilir ve isterse arayüz ekranının kenarlarına sabitleyebilir. Bu şekilde kullanıcı tercihlerine göre özelleştirilmiş çalışma alanı mizanpajları oluşturulmaktadır.

Web tasarımı sürecine başlamadan önce web sayfalarının, web ağına bağlı bilgisayarların web tarayıcıları tarafından görüntülenen hipermetin belgeleri olduğu unutulmamalıdır. Bu nedenle bir web sitesi oluşturularak web ağında yayınlanabilmesi üç unsurun bir araya getirilmesi gerekir. Bunlar; web sitesine ait domain (alan adı) alınması, web sitesine ait tüm dosyaların oluşturulması ve oluşturulan tüm dosyaların hosting (kiralama) hizmeti alınan bir web sunucusu üzerine aktarılmasıdır. Bu işlemler tamamlandıktan sonra tasarımı yapılan web sitesi web ağı içerisinde görüntülenebilir. Bu nedenle oluşturulacak web sitesinin adresinin bir başka ifadeyle alan adının alınması ve web sunucusu kiralama işleminin tamamlanması web tasarım süreciyle birlikte yapılması önerilir. Domain ve hosting hizmeti alındıktan sonra sıra web sitesinin tasarımına gelmektedir.

Dreamweaver yazılımı ile web sitesi oluşturulmak istendiğinde öncelikle site yapılandırılmasının yapılması gerekir. Bir web sitesi kök klasör içerisindeki birden çok klasör ve bunların altında bulunan dosyalardan oluşur. Kök klasör içerisindeki dosyalar HTML belgeleri olabileceği gibi resim, ses, video, CSS, JavaScript belgeleri de olabilir.

Uniform Resource Locator kelimelerinin kısaltması olan URL, internette bir kaynağa ait benzersiz adres yapısı olarak tanımlanır.

Site yapılandırılmasının farklı yolları olmasına karşın en kolay yöntem “Site” menüsü altında bulunan “Yeni Site” seçeneğinin seçilmesidir. Bu pencerede Dreamweaver web sitesinin adı ve yerel site klasörünün tanımlanması yapılır. Site adı, Dreamweaver yazılımında tasarımı yapılan siteye verilen isimdir. Yerel site klasörü ise oluşturulacak web sitesine ait tüm dosyaların kaydedileceği kök klasörün neresi olduğunu gösterir.

Web tasarımı sürecinde en çok yararlanılan tasarım bileşeni metinlerdir. Metinler HTML kodlarına doğrudan eklenebilir. Bu nedenle metinler, metin editörlerinde (Örneğin, Microsoft Word) olduğu gibi çalışılan belgenin tasarım bölmesi üzerinde görüntülenen imlecin bulunduğu noktaya eklenir. Yine metin editörlerinde olduğu gibi satırlar ve paragraflar hâlinde metinler yazılabilir, sıralı ve sırasız listeler oluşturulabilir, paragraf girintileri yapılabilir veya özel karakterler kullanılabilir. Klavye üzerinde bulunan tüm karakterler metin olarak eklenebilir.

Dreamweaver yazılımında bir tablo oluşturma için öncelikle tablonun oluşturulacağı yer fare ile işaretlenmelidir. Daha sonra “Ekle” panelinde bulunan “Table” seçeneği seçilir.  Bu pencerede “Satırlar” (1) seçeneği ile oluşturulacak tablonun satır sayısı, “Sütunlar” (2) seçeneği ile oluşturulacak tablonun sütun sayısı girilir. Tablo genişliği ayarlanmak isteniyorsa “Tablo genişliği” (3) seçeneği ile oluşturulacak tablonun genişliği piksel veya yüzde olarak yazılır. Oluşturulacak tabloya kenarlık eklenmek isteniyorsa “Kenarlık kalınlığı” (4) seçeneği kullanılarak tablonun kenarlık kalınlığı piksel cinsinden yazılır. Eğer tablo kenarlığı istenmiyorsa bu değer 0 (sıfır) olarak ayarlanmalıdır. Tablo oluşturma penceresinde bulunan “Hücre dolgusu” (5) seçeneği hücre kenarı ile hücre içindeki nesne arasındaki uzaklığı “Hücre boşluğu” (6) ise hücreler arasındaki uzaklığı ifade etmektedir. Oluşturulacak tablo ile ilgili seçenekler girildikten sonra “Tamam” düğmesine basılır.

Oluşturulan hipermetin belgesi içerisindeki bir noktadan başka bir hipermetin belgesine, farklı türdeki bir belgeye, belge içerisinde bir noktaya, internet adresine veya e-posta adresine bağlantı verilebilir. Bu bağlantılarla birlikte belgeler birbirlerine bağlanarak kullanıcıların bir sayfadan başka bir sayfaya erişimi bir diğer ifadeyle sayfalar arası gezinti sağlanabilir.

Bağlantılar, farklı yöntemleri olmasına karşın Dreamweaver yazılımında en kolay biçimde “Özellikler” paneli kullanılarak oluşturulur. Bağlantı verilecek nesne (metin, resim vb.) işaretlendikten sonra “Özellikler” panelinde bulunan “Bağ” seçeneğine bağlantının adresi, “Hedef” seçeneğine ise bağlantının açılma şekli (yeni bir tarayıcı penceresi, aynı tarayıcı penceresi, üst pencere vb.) tanımlanır. Eğer bağlantının açılma şekli tanımlanmaz ise varsayılan olarak bağlantı aynı tarayıcı penceresinde açılır. Bağlantı adresi, adres giriş alanına yazılabileceği gibi adres giriş alanının yanında bulunan “Dosyaya İşaret Et” seçeneği “Dosyalar” panelinde görüntülenen bağlantı verilecek dosyanın üzerine sürüklenerek veya “Dosyaya Gözat” seçeneği ile bağlantı verilecek dosya seçilerek verilebilir.

Dreamweaver yazılımı ile çalışılan belgeye resim, fare üzerine geldiğinde değişen resim (rollover resim), HTML 5 ses veya video, Flash video veya animasyon, eklenti ve animasyonlu kompozisyon eklenebilir.

Dreamweaverda çokluortam nesneleri “Ekle” panelinde bulunan seçenekler veya “Ekle” menüsündeki seçenekler yardımıyla belgeye eklenir. Belgeye eklenen çokluortam nesnelerinin düzenlenmesine yönelik tüm işlemler yine “Özellikler” paneli yardımıyla yapılır.

Belgeye eklenen resme ait “Özellikler” paneliyle resmin fiziksel olarak konumu (1), resme verilen bağlantı adresi (2) ve bağlantının açılma şekli (3), resmin genişliği (4) ve yüksekliği (5), resmin ID değeri (6) ayarlanabilir. Ayrıca yine “Özellikler” panelinde bulunan “Düzenle” (7) seçeneği ile yüklü olan Adobe firmasına ait grafik tasarım yazılımları ile resim düzenleme işlemleri yapılabilir. Son olarak “Özellikler” panelinde bulunan etkin nokta aracı seçenekleri (8) ile resim üzerinde belirlenen bir noktaya bağlantı verilebilir.

Belgeye eklenen videoya ait “Özellikler” paneliyle videonun fiziksel olarak konumu (1), videonun indirilene veya oynatılana kadar gösterilen görüntü (2), videonun genişliği (3) ve yüksekliği (4), videonun ID değeri (5) ayarlanabilir. Ayrıca yine “Özellikler” panelinde bulunan “Controls” (6) seçeneği ile oynat, duraklat ve sessiz gibi video denetimlerinin gösterilmesi, “AutoPlay” (7) seçeneği ile videonun yüklenir yüklenmez oynatılması, “Loop” (8) seçeneği ile videonun sürekli oynatılması ve “Muted” (9) seçeneği ile video sesinin kapatılması işlemleri yapılabilir. Son olarak “Özellikler” panelinde bulunan “Alternatif Kaynak 1” (10) ve “Alternatif Kaynak 2” (11) seçenekleri ile web tarayıcısında görüntülenmeyen videoya ait alternatif video formatları tanımlanabilir.

Web tasarımında stiller HTML kodlarıyla yapılamayan biçimlendirme, yerleşim ve görünüm işlemlerinin yapılması için kullanılmaktadır. Web sayfalarında stiller kullanılarak metinler, tablolar, resimler gibi sayfa içi ögelerin biçimlendirilmesi yapılabilir. Bunun için CSS (Cascading Style Sheets) adı verilen stil sayfaları kullanılır. CSS, metinler ve diğer sayfa içi ögelerin web sayfasında nasıl görüntüleneceğinin tanımlandığı stil sayfalarıdır. 

Belgeye eklenen sese ait “Özellikler” paneliyle ses dosyasının fiziksel olarak konumu (1), sesin ID değeri (2) ayarlanmaktadır. Ayrıca yine “Özellikler” panelinde bulunan “Controls” (3) seçeneği ile oynat, duraklat ve sessiz gibi ses denetimlerinin gösterilmesi, “AutoPlay” (4) seçeneği ile sesin yüklenir yüklenmez oynatılması, “Loop (5)” seçeneği ile sesin sürekli oynatılması ve “Muted” (6) seçeneği ile sesin kapatılması işlemleri yapılabilir. Son olarak Özellikler panelinde bulunan “Alternatif Kaynak 1” (7) ve “Alternatif Kaynak 2” (8) seçenekleri ile web tarayıcısı tarafından desteklenmeyen ses dosyalarının alternatif formatlarına ait kaynaklar tanımlanabilir.

Microsoft Expression Web yazılımı farklı platformlara yönelik web içerikleri oluşturmak ve düzenlemek amacıyla geliştirilen çok dili bir başka tasarım editörüdür. Microsoft firmasının 1996 yılında Windows işletim sistemleri için HTML düzenleyicisi olarak sunduğu ve uzun yıllar Microsoft Office paketinin bir parçası olan Frontpage yazılımının sonraki sürümü olarak ele alınmaktadır.

Yazılımın farklı sürümleri olmasına karşın 2022 yılı itibariyle bağımsız olarak yayınlanan en güncel sürümü 2010 yılında piyasaya sürülen Microsoft Expression Web 4 sürümüdür.

Microsoft Expression Web 4 yazılımının arayüz ekranının en üstünde yazılımdaki tüm işlemlerin gerçekleştirildiği 12 adet menü bulunur.

Belge penceresinin alt kısmında ise, Dreamweaver yazılımında olduğu gibi üç adet yerleşim seçeneği bulunur. “Design”
yerleşim seçeneği ile görsel nesnelerle web tasarımı yapılabilirken, “Code” yerleşim seçeneği ile HTML kodlarıyla web tasarımı yapılabilir. “Split” yerleşim seçeneği ise belge penceresinde tasarım ve kod yerleşim seçeneklerini bir arada gösterir. Kullanıcılar bunları kullanarak tercihlerine göre web tasarımında istedikleri yerleşim seçeneğine geçiş yapabilir.

Belge penceresinin sağ ve sol tarafında açık olan paneller görüntülenir. Paneller, başlık kısmının sağ üst tarafında bulunan kapat sembolü tıklanarak kapatılabilir, başlığından tutup sürüklenerek arayüz ekranında hareket ettirilebilir ve istenirse arayüz ekranındaki tanımlı bölgelere sabitlenebilir. Yapılacak işlemlere göre birçok panel bulunduğu ve bu panellerin “Panels” menüsü altından görüntülenip gizlendiği unutulmamalıdır. Varsayılan olarak arayüz ekranında açık olarak görüntülenen paneller; çalışılan web sitesine ait yerel site klasöründeki dosyaların görüntülendiği ve yönetildiği “Folder list” paneli, HTML etiketlerinin özellikleriyle ilgili işlemlerin yapıldığı “Tag Properties” paneli, görsel tasarım sürecinde sayfa içerisine ögeleri eklemek için kullanılan “Toolbox” paneli ve CSS biçimlendirme işlemlerinin yapılabildiği “Manage Styles” panelidir.

Expression Web yazılımında metinleri kullanmaya başlamadan önce yazılım üzerinden boş bir HTML belgesi  oluşturulmalıdır. Bunun için “File” menüsünde “New” seçeneği ve bu seçeneğin alt seçeneği olan “Page” seçeneği seçildikten sonra belge türü (HTML, ASPX, ASP, PHP, CSS vb.) seçilerek “Ok” düğmesine basılır. Oluşturulan belgenin yerel site klasörüne kaydedilmesi için “File” menüsünden “Save” seçeneğine tıklanır. Açılan pencereden dosyanın kaydedileceği yerel site klasöründeki konum, dosyanın adı ve uzantısı belirlenir. Ayrıca pencerenin altında bulunan “Page title” seçeneği ile oluşturulan web sayfasının tarayıcıdaki ismi “Özgeçmişim” olarak düzenlenir ve “Save” düğmesine basılır. Böylelikle web tasarımı için kullanılacak bir HTML belgesi oluşturulur.

Web tasarımı sürecinde kullanılacak resim (BMP, JPG, PNG, JPEG, GIF vb.), ses (WAW, WMA, MP3 vb.), video (AVI, MPEG, MPG, MPA vb.), animasyon (SWF) gibi farklı çokluortam nesneleri Expression Web yazılımı ile tasarlanan sayfaya eklenebilir. Bu işlemler en kolay biçimde “Insert” menüsü altındaki seçenekler yardımıyla yapılmaktadır. Örneğin, belgeye bir resim eklenmek istendiğinde “Insert” menüsü altındaki “Picture” seçeneğinin “From file” alt seçeneği kullanılır. Bu pencerede yerel site klasöründe bulunan dosyalar ve klasörler görüntülenir. Sayfaya eklenmek istenen resim ilgili pencereden seçildikten sonra “Open” düğmesine basılır. Bu işlem yapıldıktan sonra eklenecek resimle ilgili alternatif metnin ve uzun açıklamanın yapılabileceği erişim özellikleri penceresi gelir. Yeni pencerede eklenecek resimle ilgili erişim özellikleri belirlendikten sonra “Ok” düğmesine basılır.

CSS kuralı oluşturma penceresinde bulunan kategoriler şunlardır:

• Font 
• Block
• Background
• Border
• Border radius 
• Box
• Position
• Layout
• List 
• Table

Adobe Dreamweaver CC bölümünde anlatılan tüm CSS kural tipleri Expression Web yazılımı ile de oluşturulabilir. Expression Web yazılımında yeni bir CSS kuralı tanımlanmak istendiğinde, “Manage Styles” paneli altındaki “New Style” seçeneği ya da “Format” menüsü altındaki “New Style” seçeneği seçilmelidir. Açılan pencere üzerinden oluşturulacak olan CSS kuralının ismi “Selector” (1) seçeneği ile belirlenir. CSS kuralı olarak sınıf (class), kimlik (ID), etiket (tag) veya bileşik (compound) türlerinin hepsi kullanılabilir. “Define in” (2) seçeneği ile tanımlanan CSS kuralının sayfa içi veya harici bir CSS dosyası olarak oluşturulması seçilmelidir. Ardından “Category” (3) seçenekleri altında bulunan kategoriler kullanılarak ilgili biçimlendirme kuralı oluşturulmalıdır.

Adobe Dreamweaver CC yazılımı web tasarımı sürecinin hem grafik hem de kod desteği ile yapılabilmesini sağlar. Kod yazım sürecinde kodların kolay ve hatasız yazılması için kod tamamlama (seçilen bir HTML kodunun parametrelerinin listelenmesi), renklendirme (HTML kodlarının farklı renklerle görüntülenmesi) ve hata mesajları (hatanın türü ve hatanın gerçekleştiği kod satırı) özellikleri bulunmaktadır. Ayrıca yazılım, web sitesi oluşturmak için özelleştirilebilir başlangıç şablonları sunmaktadır. Böylelikle kullanıcılar şablonlar üzerinden birini seçerek kendi gereksinimlerine göre sayfayı özelleştirebilir. Sayfa tasarımına görsel ögeleri eklemeyi sağlayan görsel düzenleme özellikleri bulunur ve panellerden sürükle bırak özelliği ile ögeler sayfa içerisine yerleştirilebilir. Ayrıca web sayfasının yayınlandığı zamanki gerçek görüntüsü canlı olarak izlenebilir. Web sitesinin yayınlanması için hosting hizmeti alınan uzak sunucuya yerel site klasöründeki web sitesine ait dosyaları göndermek veya uzak sunucudaki web sitesine ait dosyaları yerel site klasörüne almak için FTP desteği de bulunmaktadır.

Microsoft Expression Web 4 yazılımında form elemanları “Toolbox” paneli altında bulunan “Form Controls” kategorisindeki seçenekler sayfaya sürüklenerek kolaylıkla eklenebilir. Bu kategoriler altındaki seçenekler ile bir form sayfasında gereksinim duyulan tüm ögeler kullanılarak form sayfası tasarlanabilir. Düğmeler, açılır listeler, radyo düğmesi, radyo düğmesi grubu, onay kutusu, onay kutusu grubu, metin alanı, etiket, alan kümesi, dosya gibi farklı form ögeleri sayfaya eklendikten sonra “Tag Properties” panelindeki seçenekler yardımıyla form elemanlarının özellikleri ayarlanabilir veya CSS stilleri kullanılarak biçimlendirilir.