Web Tasarım Editörüne Giriş: 1. TEMEL İŞLEMLER

Bu bölümde web tasarımı editörünün ara yüzünü inceleyerek site tanımlama işlemlerini öğreneceğiz.
1.1. Çalışma Alanı
Bilgisayarımıza yüklediğimiz programı çalıştırmak için Başlat menüsündeki Programlar bölümünden kurduğumuz web tasarım editörüne tıklamamız gerekmektedir.
1.1.1. Editör Arayüzü

Şekil 1.1: Web tasarımı editörü karşılama ekranı

Web Tasarımı Editörünü açtığımız zaman ilk olarak karşımıza Şekil 1.1’de gördüğümüz karşılama ekranı gelir. Burada inceleyeceğimiz 5 bölüm bulunmaktadır.

1.Son açılan belgeler listelenir. Web tasarım editörünü ilk defa çalıştırıyorsanız bu bölüm boş gelir. Listede olmayan bir belgeyi açmak için aç düğmesine tıklamamız gerekmektedir. Buradan istediğimiz belgeyi açarak işlemimizi yapabiliriz.
2.Yeni dosya oluşturma seçenekleri görüntülenmektedir. Bu modülde daha önce öğrendiğimiz HTML ile çalışacağız.
3.Web tasarım editörünün yeni özellikleri ile ilgili eğitim videoları bulunmaktadır.
4.Web tasarım editörü ile ilgili hazırlanmış ayrıntılı yardım içeriğine ulaşabilirsiniz. Programı başlattığınızda karşılama ekranı yerine çalışma ekranının gelmesini istiyorsanız bir daha gösterme seçeneğini etkinleştiriniz. Karşılama ekranını geri getirmek için düzen menüsündeki tercihler seçeneğini tıklayınız. Daha sonra genel kategorisindeki karşılama ekranını göster seçeneğini işaretleyiniz.
5..Web tasarımı editörü güncellemelerine, yeni video yayınlarına, makalelere ve yeni ip uçlarına ulaşmak için bu bölüm kullanılır. Bu bölüm sayesinde son gelişmeleri takip edebilirsiniz.

1.1.2. Çalışma Ekranları

Web tasarım editöründe kodlarla ya da tasarımla çalışabiliriz. Bunun için uygulama araç çubuğunda yer alan mizanpaj sekmesi tıklanır. Karşımıza aşağıdaki menü gelir.

Şekil 1.2: Çalışma ekranları

Açık olan web sayfaları her zaman varsayılan olarak tasarım görünümünde görüntülenmektedir. Bu menü sayesinde hangi ekranda çalışacağımızı seçebiliriz. Web tasarım editöründe 4 tane çalışma ekranı vardır. Bunlar:

Kod: Web sayfasının sadece kodları görüntülenir.

Şekil 1.3: Kod görünümü

Bölünmüş Kod: Web sayfasının kodları iki sayfaya bölünmüş halde görüntülenmektedir.

Şekil 1.4: Bölünmüş kod görünümü

Tasarım: Web sayfasının tasarım hali görüntülenir

Şekil 1.5: Tasarım görünümü

Kod ve Tasarım: Web sayfasının tasarım görünümü ve kodları bir arada görüntülenir.

Web sayfasının tasarım durumunu ve kodlarını yatay değil de dikey durumda görüntülemek istiyorsak mizanpaj menüsünden dikey böl seçeneği aktif hale getirilmelidir.

Şekil 1.6: Kod ve tasarım görünümü

1.1.3. Araç Çubukları ve Paneller
Web tasarım editörü çalışma alanı belgeleri ve nesne özelliklerini görüntülememize olanak verir. Çalışma alanı, araç çubuklarına birçok özellik yerleştirerek daha hızlı çalışmamızı sağlar.

Web tasarım editöründe tüm pencere ve paneller tek bir büyük uygulama penceresine entegre edilmiş durumdadır.

Şekil 1.7: Araç çubukları ve paneller

Şimdi de çalışma alanında bulunan bu özellikleri açıklayalım

Uygulama Çubuğu: Çalışma alanının üst kısmında menüler, çalışma alanı değiştiricisi ve diğer uygulama alanı denetçisi bulunur.
Belge Penceresi: Düzenleme ve hazırlama sırasındaki dosyayı gösterir.
Belge Araç Çubuğu: Çalışma alanının farklı görünümleri (Kod görünümü, Tasarım görünümü), tarayıcıda ön izleme gibi sık kullanılan özelikler ve çeşitli görüntüleme özellikleri bulunur.
Çalışma Alanı Değiştiricisi: Oluşturduğumuz çalışma alanları ya da var olan çalışma alanları bulunur. Yeni çalışma alanları oluşturma ve düzenleme işlemleri bu menü altında bulunur.
Panel Grupları: Çalışmanızı değiştirmenize ve izlemenize yardımcı olur. Paneli genişletmek için kullanacağımız panel üzerinde çift tıklamamız yeterlidir.

Pencere menüsü altındaki seçenekler yardımıyla çalışma alanımıza istediğimiz paneli ekleyebiliriz.

Panelleri başlık kısmından tutup sürükleyerek çalışma alanı içinde herhangi bir yere bağımsız olarak taşıyabiliriz.

Bağımsızlaştırdığımız paneli tutup sürükleyerek tekrar panel grubunun içine dâhil edebiliriz.

Panel grubunun üst tarafında yer alan ok yardımıyla panelleri küçültebiliriz. Bu işlem sayesinde çalışma alanımızı genişletmiş oluruz.

CS Live: Web tasarım editörünün internetteki sitesine ulaşmamızı sağlar.
Etiket Seçici: Belge penceresinin en altında bulunur. O an bulunduğumuz noktanın çevresindeki etiketlerin hiyerarşisini gösterir.
Özellik Denetçisi: Seçili metin ya da resmin özelliklerini görüntülememizi ve değiştirmemizi sağlar. Her nesnenin kendine ait özelikleri vardır.
Dosyalar Paneli: Tanımladığınız site içindeki tüm dosya ve klasörleri yönetmenizi sağlar. Ayrıca yerel diskinizde bulunan tüm dosyalara erişmenizi sağlar.
Standart Araç Çubuğu: Varsayılan olan çalışma ekranımıza gelmez. Standart araç çubuğunu göstermek için Görünüm /Araç Çubukları/Standart’ı seçin. Bu araç çubuğunda Dosya ve Düzen menüsündeki sık kullanılan düğmeler bulunur.

1.2. Site Tanımlama
Web sitesi hazırlarken herhangi bir sayfayı yapmaya başlamadan önce siteye ait her şeyi içinde barındıracak bir klasör oluşturulmalıdır. Bu işlem site tanımlama anlamına gelir. Oluşturduğumuz bu klasör internet ortamında çalışacak sitemizin temsilini ifade eder.
Site için oluşturulacak tüm dosya ve belgelerin bir klasör altında toplanması sitemize işlevsellik ve süreklilik kazandıracaktır.

1.2.1. Site Tanımı
Web tasarım editöründe site tanımlama işlemi birden fazla yöntemlerle yapılabilir

Uygulama araç çubuğundaki site düğmesinden yeni site seçeneği ile yeni bir site tanımlanabilir.

Şekil 1.8.1: Site tanımlama

Ekranın üstündeki site menüsündeki yeni site seçeneği ile yeni bir site tanımlanabilir.

Şekil 1.8.2: Site tanımlama

Bir diğer yöntem ise ekranın sağ tarafında bulunan dosya panelinden masaüstü yazan açılır menüyü tıklayarak siteleri yönet seçeneğini tıklarız. Karşımıza yeni bir pencere açılacaktır (Şekil 1.7.4). Bu penceredeki yeni seçeneğinden yeni bir site tanımlayabiliriz.

Şekil 1.8.3: Site tanımlama

Şekil 1.8.4: Site tanımlama

Şekil 1.8.4’te bulunan;

Düzenle seçeneği ile tanımlanan site üzerinde düzenlemeler yapabiliriz.

Çoğalt seçeneği ile sitemizin yedeğini alabiliriz. Bu şekilde sitemizin orijinal halini koruyarak değişiklikler yapabiliriz.

Kaldır seçeneği ile oluşturduğumuz bir siteyi kalıcı olarak silebiliriz.

Dışa aktar seçeneği ile ise sitemizin başka bilgisayarlarda da çalışmasını sağlayabiliriz.

İçe aktar seçeneği ile ise sitenizi başka bir bilgisayarda çalışır hale getirebilirsiniz. Eğer sitenizi dışa aktar yöntemiyle başka bir bilgisayara aktardıysanız bu işlemi yapmanıza gerek yoktur.

Şu ana kadar yeni site tanımlama yöntemlerini öğrendik. Şimdi de sitemizi oluşturmaya devam edelim.

Yukarıdaki yöntemlerin biriyle yeni site seçeneğini tıkladığımız zaman karşımıza aşağıdaki gibi bir pencere gelecektir.

Şekil 1.9: Site yapısı

Burada site adı yazan kısma sitemize vereceğimiz ismi yazıyoruz. Yerel site klasörü kısmında ise dosya simgesine tıklayarak sitemizi nereye kaydedeceğimizi belirtiyoruz. Daha sonra kaydet düğmesine tıkladığımızda web sitemiz için site tanımlama işlemini gerçekleştirmiş oluyoruz. Şimdi sağ taraftaki dosya paneline baktığımızda kaydettiğimiz sitenin bu panelde yer aldığını göreceksiniz.

1.2.2. Sunucu Türleri

Yeni bir site eklerken ya da var olan siteyi düzenlerken Sunucular kategorisi, uzak sunucuları ve test sunucularını belirtmenize olanak sağlar.

Sunucular kategorisinde bulunan artı simgesine tıklayarak yeni bir sunucu tanımlayabiliriz. Karşımıza sunucu özelliklerini ayarlayabileceğimiz bir pencere gelir.

Şekil 1.10: Sunucu türleri

Bu pencerede Sunucu Adı alanına yeni sunucu için bir ad belirtilir.
Şunu kullanarak bağlan alanında sunucumuza nasıl bağlanacağımızı seçeriz.

Bu alanda karşımıza 5 tane seçenek çıkmaktadır. Bunlar :

FTP: Web sunucusuna FTP kullanarak bağlanılıyorsa bu ayar kullanılır. FTP, dosya transfer protokolüdür.

SFTP: Proxy yapılandırması güvenli FTP kullanılmasını gerektiriyorsa, Güvenli FTP (SFTP) kullanılır. SFTP, test sunucunuza yapılan bir bağlantıyı güvenli duruma getirmek için şifreleme ve genel anahtarlar kullanır.

Yerel/Ağ: Ağ klasörüne bağlanmak için ya da dosyalarınızı yerel bilgisayarda depoluyorsanız veya test sunucunuzu yerel bilgisayarda çalıştırıyorsanız bu ayar kullanılır.

WebDAV: Web sunucunuza Web Tabanlı Dağıtılmış Yazma ve Sürüm Oluşturma (WebDAV) protokolünü kullanarak bağlanıyorsanız bu seçeneği seçiniz. WebDAV ayrı farklı bilgisayarlar kullanan farklı yazarların uzaktan internet aracılığı ile birlikte çalışmalarına (dosya düzenleme, yayımlama, yönetme) olanak veren HTTP 1.1 ile ilişkili bir protokoldür.

RDS: Web sunucunuza RDS (Remote Development Services) kullanarak bağlanıyorsa bu ayar kullanılır. Merkezi sunucular üzerinden bağlanılır.

Sunucu Klasörü alanında site klasörlerini depoladığımız dizin seçilir.
Web URL’si alanında Web sitemizin adresi yazılır

Temel ekranı kapatmak için Kaydet'i tıklarız. Daha sonra Sunucular kategorisinde, eklediğimiz veya düzenlediğimiz sunucunun uzak sunucu mu, test sunucusu mu yoksa ikisi birden mi olduğunu belirtiriz.

1.3. Ön İzlemede Kullanılacak Web Tarayıcılarının Belirlenmesi

Web Sayfaları farklı tarayıcılarda değişiklikler gösterebilir. Bu yüzden web sayfalarımızın değişik tarayıcılarda nasıl göründüğüne bakarak gerekli düzenlemeleri yapmamız gerekir.

Ön izlemede kullanılacak tarayıcıya ait tanımlamaları Dosya menüsündeki Tarayıcıdaki ön izleme seçeneğinin altında bulunan Tarayıcı Listesini Düzenle alanı tıklanmalıdır.

Şekil 1.11: Önizlemede kullanılacak tarayıcının belirlenmesi

Karşımıza tercihler penceresi gelecektir. Bu pencere içinde bulunan kategori listesindeki Tarayıcı ön izleme alanında bulunan artı simgesine tıklayarak yeni tarayıcılar ekleyebiliriz. Eksi düğmesine tıklayarak da seçmiş olduğumuz tarayıcıyı silebiliriz.

Varsayılanlar alanında birincil ve ikincil tarayıcıyı belirleyebiliriz.

1.4. Yeni Bir Sayfa Oluşturma ve Kaydetme

Yeni bir sayfa oluşturmak için Dosya menüsü altında bulunan Yeni seçeneği tıklanmalıdır. Karşımıza Yeni Belge penceresi gelecektir.
Yeni belge penceresinde Boş sayfa alanı seçilip Sayfa türü listesinden HTML seçeneğini seçip Oluştur düğmesine tıklanmalıdır.

Oluşturduğumuz sayfayı kaydetmek için yine Dosya menüsü içindeki Farklı Kaydet seçeneği seçilmelidir.