30 Nisan 2017 Pazar

2. METİN İŞLEMLERİ

  2.1. Metin Türleri ve Özellikleri

      Web tasarım editörüyle çalışırken metin içindeki yeni satırların görüntülenmesi için metin tercihlerinde düzenlemeler yapmamız gerekir. Bu ayarları Düzen menüsü altında bulunan Tercihler seçeneğini tıklayarak yapabiliriz. Açılan tercihler penceresinden kategori listesinden kod formatı seçip satır kesme türü alanında CR LF(Windows) seçeneğini aktif hale getirilmelidir.

Şekil 2.1: Metin tercihlerini ayarlama

   Yaptığımız bu seçim kullanılan işletim sistemine göre değişmektedir. Bu işlem ile ASCII dosyaları içindeki metinleri düzgün bir şekilde aktarabilir ve satır sonu biçimlendirmesini gerçekleştiririz.    

    Metin biçimlendirmesini yapmak için Metin menüsü altında bulunan düğmeler kullanılır.

Şekil 2.2: Metin özellikleri

   2.1.1. Satır Sonu Ekleme


     Oluşturduğumuz sayfada metinleri yazıp enter tuşuna bastığımızda bir sonraki satır geniş bir boşluktan sonra başlamaktadır. Bu boşluğa paragraf boşluğu denir. 

     Web tasarım editöründe satır boşluğu eklemek için bulunduğumuz noktadan Shift tuşu ile birlikte Enter tuşuna basmamız yeterlidir.

   2.1.2.Bölünmez Boşluk Ekleme 

     Web tasarım editörü aracılığıyla oluşturacağımız sayfa içinde bulunan metinlerin, aralarında boşluk olmasına rağmen ayrılmamasını sağlamak için iki metin arasına bölünmez boşluk eklememiz gerekmektedir.

     Bu işlem için imleci iki ifade arasına getirip Ctrl, Shift ve Boşluk tuşlarına birlikte basmamız yeterlidir.

Şekil 2. 3: Metinler arasına bölünmez boşluk ekleme

 2.1.3.Metin Hizalama ve Girinti Verme 
     Sayfa içinde bulunan metinlere girinti verme işlemlerini Özellikler penceresinde bulunan düğmeler yardımıyla yapabileceğimiz gibi Format menüsünde bulunan Girinti ve Çıkıntı düğmeleri yardımıyla da yapabiliriz. 

     Sayfamıza eklediğimiz metinleri hizalamak için Format menüsünde bulunan Hizala seçeneği ile kullanılır. 

Şekil 2.4: Metin hizalama

2.1.4. Karakter Biçimlendirme 

     Sayfa içinde bulunan metinleri Özellikler penceresinde bulunan biçimlendirme düğmeleri yardımıyla yapabiliriz. Bu düğmeler yardımıyla seçtiğimiz metinin kalın ya da italik olmasını sağlayabiliriz. 

Şekil 2.5: Karakter biçimlendirme düğmeleri

2.1.5. Yazı Tipi Değiştirme 

     Sayfa içindeki metinlere ait yazı tipini Format menüsündeki Font seçeneği ile yapabiliriz.

     Font Listesini Düzenle seçeneğini seçtiğimiz zaman yeni bir pencere açılacaktır. Bu pencere ile var olan listeden istediğimiz fontu silebilir ya da yeni font ekleyebiliriz.

Şekil 2.16: Font listesini düzenleme

   Artı  düğmesini tıkladığımız zaman font listesinde (Aşağıdaki listeye font ekle) seçeneği gelecektir. Kullanılabilir fontlardan birini seçip oklar yardımıyla Seçilmiş Fontlara aktarıp tamam düğmesine tıkladığımız zaman seçtiğimiz fontun artık font listesinde olduğunu göreceksiniz.

  Eksi  düğmesine tıkladığımız zaman ise seçili olan fontun listeden kaldırıldığını göreceksiniz.

  Aynı işlemi özellikler penceresinde bulunan sayfa özellikleri seçeneğinden de yapabiliriz

   Sayfa özellikleri penceresinde bulunan seçenekler yardımıyla bir çok biçimlendirme işlemini yapabiliriz. Bunlar; 

  •  Boyut: Sayfamıza eklediğimiz metinlerin boyutlarını ayarlarız. 
  •  Metin rengi: Metnimizin rengini ayarlarız. 
  •  Arka plan rengi: Sayfamızın arka plan rengini ayarlarız. 
  •  Arka plan görüntüsü: Sayfamızın arka planına istediğimiz resmi ekleyebiliriz.
 2.2. Listeler  

   Oluşturduğumuz sayfa içindeki metinleri sıralı ya da sırasız olarak listeleyebiliriz. 

   Sıralı Listeler; sayısal veya alfabetik olarak sıralanmış elemanlardan oluşmaktadır. (a-b-c , i-ii-iii; 1-2-3; ….). 

  Sırasız listeler; madde imli listelerdir. 

   Liste oluşturmak için metni seçip farenin sağ tuşuna tıkladığımız zaman açılan menüden Liste seçeneğini içinde bulunan elemanlar yardımıyla ekleyebiliriz. Aynı işlemi sayfanın alt tarafında bulunan özellikler penceresindeki düğmeler yardımıyla da yapabiliriz. 

   Oluşturulan listelere ait düzenlemeleri listenin herhangi bir elemanı üzerinde iken farenin sağ tuşuna tıklayarak açılan menüden Liste seçeneği içinde bulunan Özellikler seçeneğine tıklayarak karşımıza gelen Liste Özellikleri penceresinden yapabiliriz.

   Tanım listeleri, terimlerden ve bunlara ait tanımlardan oluşmaktadır. Tanımlanacak terim sola hizalıdır, tanım ise girintili olarak bir sonraki satırda bulunur. Sıralı veya sırasız listelerdeki gibi, ifadeden önce herhangi bir işaret bulunmaz.

   Tanım listesi oluşturmak için, sayfa içinde bulunan metnin istenen parçası seçildikten sonra farenin sağ tuşu tıklanarak açılan menülerden Liste seçeneği içindeki Açıklama Listesi seçeneği aktif hale getirilmelidir.

   İç içe liste oluşturmak için liste elemanlarının üzerinde sağ tıklayarak açılan menüden Liste seçeneği içinde bulunan girinti / çıkıntı seçeneklerini işaretlemeliyiz. 

   2.3. Harici Metinler

      Herhangi bir internet sayfasından ya da kelime işlemci programından metin kopyalayıp düzen menüsündeki yapıştır seçeneği ile sayfamıza metni kopyaladığımızda metindeki paragraf konumları, satır araları, yazı tipi gibi özelliklerin kaybolduğunu göreceksiniz. 

     Yazı içeriğini tekrar düzenlemek çok vakit alacaktır, bunun yerine metin kopyalama seçeneklerini düzenleyebiliriz. Bunun için Düzen menüsünde bulunan Tercihler seçeneğini tıkladığımızda karşımıza tercihler penceresi çıkacaktır. Açılan pencerede Kategori sekmesinden Kopyala/Yapıştır Seçeneği seçilir. Buradaki özellikler yardımıyla gerekli ayarlamalar yapılır.




27 Nisan 2017 Perşembe

3. TABLOLAR

   3.1. Tablolar İle Çalışmak

     Tablolar, web sayfalarını satırlara/sütunlara bölmek amacıyla ya da resimlerin veya grafiklerin sayfada sabit bir noktada durması amacıyla kullanabileceğimiz en önemli araçlardan biridir. Kısacası sayfa içindeki elemanların yerleşimi konusunda söz sahibi olmamızın en kolay yoludur.

     Tablolar satır (row) ve sütunlardan (column) oluşmaktadır. Satır ve sütunların kesiştiği nokta ise hücre (cell) olarak adlandırılmıştır.

     Tablo eklemek için Ekle menüsünden Tablo seçeneği seçilir. Açılan pencereden gerekli düzenlemeler yapılır.

Şekil 3.1: Tablo ekleme

   Şekil 3.1.’de görülen tablo özeliklerinin açıklaması aşağıdaki gibidir.

Satırlar: Tablonun kaç satırdan oluşacağını belirleriz. 
Sütunlar: Tablomuzun kaç sütundan oluşacağını belirleriz. 
Tablo genişliği: Tablonun boyutunu pixel ya da yüzde cinsinden belirleriz. 
Kenarlık kalınlığı: Tablonun kenar çizgisinin kalınlığı belirlenir. 
Hücre dolgusu: Hücrelerin boyutu belirlenir. 
Hücre boşluğu: Hücrelerin birbirinden ve tablo kenarlığından uzaklığı belirlenir.
Üstbilgi: Tablo başlığının nerede olacağı seçilir. 
Resim yazısı: Tabloya başlık bilgisi eklenir.
Özet: Tablo içeriği hakkında açıklama yazsısı eklenir

   Şekil 3.1’de görülen özellikleri uyguladığımız zaman aşağıdaki Şekil 3.2’deki gibi bir tablo oluşmaktadır. Tablonun içine veri girişi yapmak için ilgili hücrenin içine bir defa tıklandıktan sonra metin yazılır. 

Şekil 3.2: Tablo genişliği kılavuzu

   Tablo genişlikleri kılavuzunun tablonun etrafında görünmesi için, tablo seçildikten sonra sağ tıklayarak Tablo seçeneğinden Tablo genişliği özelliği seçilmelidir.

   3.2. Tablosal Veriler 

   Farklı bir programda hazırlanmış olan metin ya da tabloları Web tasarım editöründe düzenlediğimiz sayfalar içine aktarabiliriz. Bu işlem için dikkat edilecek en önemli şart, aktarılacak dosya içindeki verilerin belirli bir ayırıcı (sekme, virgül) ile ayrılmış olmasıdır.
 
   Harici dosyada bulunan verileri tablo şeklinde sayfamıza eklemek için Ekle menüsünden Tablo Nesneleri seçeneğindeki Sekmeli Verileri İçe Aktar seçilmelidir. Karşımıza Sekmeli Verileri İçe Aktar penceresi çıkar.

   Sekmeli Verileri İçe Aktar penceresinde bulunan Veri dosyası seçeneği ile web sayfamızın içine aktaracağımız tablo verilerinin olduğu dosya belirtilmelidir. Göz at seçeneğini tıklayarak dosyamızı seçebiliriz.

   Sınırlayıcı listesinden aktarımı yapılacak dosya içinde kullanılan ayırıcı türü seçilir.

   Tablo genişliği seçenekleri ile oluşturulacak tablonun genişliğinin otomatik olarak (verilere sığdır) ayarlanması ya da kullanıcı tarafından (Buna ayarla) girilmesi gerekir.

Hücre dolgusu ile hücrelerin genişliği ayarlanır.
Hücre boşluğu ile hücrelerin birbirinden ve tablo kenarlığından uzaklığı belirlenir.
En üst satırı formatla seçeneği ile en üst satırın kalın ya da italik olmasını sağlarız.
Kenarlık ile de tablonun kenar çizgisinin kalınlığı belirlenir.

   Web tasarım editöründe hazırladığımız tabloları dışa aktarmak için ise tablomuzu seçtikten sonra Dosya menüsünden Dışa aktar seçeneği seçilir. Karşımıza aşağıdaki gibi bir pencere gelecektir

   Bu pencerede sınırlayıcı seçeneği ile ayırıcı seçilir. Satır kesmeleri ile de kullanılan işletim sistemi seçilir ve Dışa Aktar düğmesi tıklanır. Yeni açılan pencerede dosyanın nereye ve hangi isimle kaydedileceği belirlendikten sonra kaydet düğmesine tıklanır.

   3.3. Sayfa Düzeninde Tablo Kullanımı 

     Sayfamızın daha düzenli ve kullanışlı olması için sayfa düzeninde tablolarla çalışmak gerekmektedir.

   3.3.1. Tablo Hücrelerini Seçme ve Kopyalama / Taşıma

     Tablolar ile ilgili yapacağımız tüm işlemlerde tablonun seçili olması gerekmektedir.

     Tablonun tümünü seçmek için fare, tablonun dışında herhangi bir noktadayken farenin sol tuşuna basılı tutularak tabloya doğru hareket ettirdiğimizde tüm tablonun seçildiğini göreceksiniz.

     Hücreyi seçmek için ise, ilgili hücrenin içine gelinir. Farenin sol tuşuna basılı tutularak seçilmek istenen yöne doğru sürüklenir.

     Tablonun belirli bölümündeki hücreleri seçmek için shift tuşu basılı tutularak seçilecek grubun başlangıç ve bitiş hücreleri tıklanır.

    Tablo içinde birbirinden farklı yerde olan hücreleri tek tek seçmek için Control tuşu kullanılır. Bunun için Control tuşu basılı tutularak, seçilecek hücrelerin üzerine fare ile tıklamak yeterlidir.

    Kopyalama işlemi yapmak için, yukarıda anlatılan seçim işlemleriyle ilgili hücreler seçildikten sonra Düzen menüsünden kopyala seçeneği seçilmelidir. Bu işlemle kopyalanacak hücreler belleğe alınır. Fare ile kopyalama yapacağımız yere gelinir. Düzen menüsünden Yapıştır seçeneği tıklanır. Seçmiş olduğumuz hücrelerin imlecin bulunduğu yere kopyalandığını göreceksiniz.

    Taşıma işlemi yapmak için ise Hücreler seçildikten sonra Düzen menüsünde bulunan Kes seçeneği tıklanır. Fare taşıma işleminin yapılacağı yere getirilir. Dosya menüsünden Yapıştır seçeneği tıklanır. Seçili olan hücreler imlecimizin bulunduğu noktaya taşınır.

    3.3.2. Tablo Hücrelerini Biçimlendirme 

     Seçilen hücreleri biçimlendirmek için Özellikler penceresinden faydalanılır.

     Seçili hücrelerin metin biçimlendirmesi (Hizalama, kalın, italik yapma) aşağıdaki düğmeler yardımıyla yapılır.

   
Şekil 3.3: Tablo hücrelerinin biçimlendirilmesi

   Hücre özellikleri yukarıdaki panel yardımıyla yapılır. Bu paneldeki araçların işlevlerini şöyle sıralayabiliriz.

Hücreleri birleştir: Seçili olan birden fazla hücrenin birleştirilip tek hücre halini almasını sağlar. Hücreleri böl: Seçili olan hücrenin birden fazla satıra ya da sütuna bölünmesini sağlar.
Yatay/ Dikey: Seçili hücrenin yatay ve dikey hizalanmasını ayarlar.
Gen/ Yük: Seçili hücrenin genişlik ve yükseklik boyutunu ayarlar.
Sarma yok: Hücre içindeki metinlerin tek satıra yerleşmesini sağlar.
Üst bilgi: Seçili olan hücrenin tablo üst bilgisi olarak ayarlanmasını sağlar.
Bg: Seçili olan hücreye arka plan rengi atar.

   3.3.3. Tabloda Değişiklik Yapma

      Sayfamızdaki tabloda bulanan satır ve sütunlar üzerinde değişiklik yapabiliriz. Tablo içinde bulunan hücreleri birleştirebilir ya da hücreleri satır/sütunlara bölebiliriz. Bunun için Özellikler penceresinde bulunan düğmelerden faydalanabiliriz.

      Hücreleri birleştirmek için ilgili hücreler seçildikten sonra Özellikler penceresinde bulunan Hücreleri böl düğmesine tıklanmalıdır.

Şekil 3.4: Hücreleri birleştirme

     Hücreyi satır/ sütuna bölmek için ilgili hücre seçildikten sonra Özellikler penceresinde bulunan Hücreleri böl düğmesine tıklanmalıdır. Karşımıza Hücreyi böl penceresi gelecektir.

     Bu pencerede ilgili düzenlemeyi yaptığımızda hücremizin satır veya sütunlara bölündüğünü göreceksiniz.

     Tabloda hücreleri birleştirip satır/sütunlara bölebildiğimiz gibi tablomuza yeni satır ya da sütun da ekleyebiliriz. Bu işlemi yapmanın birden fazla yolu vardır. Bunlar:  
  • Ekle menüsündeki Tablo nesneleri seçeneğinin altında bulunan özeliklerle satır/sütun ekleyebiliriz. 
  • Tablomuzun içinde değişiklik yapacağımız yerde fare ile sağ tıklayarak açılan menüde Tablo seçeneğinin altında bulunan özeliklerle satır/sütun ekleyebiliriz. 

   Aynı zamanda bu menüden satır ya da sütun silme işlemini de gerçekleştirebiliriz. 

   Mizanpaj menü grubu altında bulunan düğmeler yardımıyla satır/sütun ekleme işlemini gerçekleştirebiliriz.

   3.3.4. Tablolarda Resim Kullanma

   Sayfamıza resim eklerken tablolardan faydalandığımız zaman birden fazla resmi birleştirebiliriz ya da resmin konumunu istediğimiz şekilde düzenleyebiliriz.
   Tablomuza resim eklemeden önce kullanacağımız tabloyu resim eklenecek şekilde düzenlemek tasarımı kolaylaştıracaktır.
   Tablo içerisine resim eklemek için Ortak menü grubu içindeki Görüntüler açılır menüsünün altında bulunan görüntü seçeneği tıklanmalıdır. Açılan pencereden tabloya eklenecek resim seçilerek tamam düğmesi tıklanmalıdır.

   Resim, oluşturduğumuz site klasörünün içinde kayıtlı değilse resim klasörün içine kaydedilsin mi diye uyarı gelecektir. Buna izin vermemiz gerekir.

   3.3.5. Tabloları İç İçe Yerleştirme 

   Tabloları iç içe yerleştirme işlemi çok karışık tablolarda kullanılmaktadır.

   İçeride oluşturacağımız tabloyu imleç var olan tablonun içindeyken yapabileceğimiz gibi tabloyu dışarıda oluşturup daha sonra diğer tablonun içine de aktarabiliriz. Tabloyu dışarıda oluşturmak tasarım için daha kullanışlıdır.

   Küçük tablo, ana tablonun dışında hazırlandıktan sonra fare ile seçilerek ilgili noktaya sürüklenerek taşınmalıdır. Aynı işlem kes/kopyala yöntemiyle de yapılabilir.


   3.4. Expanded Modu

     Sayfamıza eklediğimiz tablolar üzerinde daha kolay işlem yapmak için Expanded görünüm modunda çalışmalıyız. Bu görünüm modunda tablomuz genişletilmiş halde görünecektir. Bu sayede küçük tablolarda bile işlem yapmak çok daha kolay olacaktır.

     Expanded görünüm moduna geçiş yapmak için mizanpaj menüsü altında bulunan genişletilmiş seçeneğine tıklamamız yeterlidir.

     Tablo içindeki gerekli düzenlemeleri yaptıktan sonra standart görünüm moduna geçerek tasarımımıza devam edebiliriz.

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ı       Bilgisaya...