WEB EDİTÖRÜ METİN İŞLEMLERİ İÇİNDEKİLER HEDEFLER. Prof. Dr. Muhammet Dursun KAYA

(1)

ÜNİTE

2

METİN İŞLEMLERİ

WEB EDİTÖRÜ

Prof. Dr. Muhammet Dursun KAYA

HEDE FL ER

• Bu üniteyi çalıştıktan sonra;

• WEB tasarım editörü araçlarını kullanarak sayfa içine metinler ekleyebilecek,

• Metin biçimlendirme işlemlerini yapabilecek,

• Sayfaya yatay çizgi, tarih ve saat ekleyebileceksiniz.

İÇİ NDEKİLE R • Metin biçimlendirme

• Sayfaya WEB fontları ekleme

• Metne paragraf/başlık stili uygulama

• Metnin rengini ayarlama

• Metnin stilini belirleme

• Metni listeleme

• WEB sayfasına özel karakter ekleme

• Sayfaya yatay çizgi ekleme

• Tarih ve saat ekleme

(2)

Metin İşlemleri

Atatürk Üniversitesi Açıköğretim Fakültesi 2

Dreamweaver’da metin üzerinde işlem yapabilmek için metnin seçilmesi gerekir. Metin

seçme işlemine bloklamak da denir.

Dreamweaver CS6 programının tüm özelliklerini görüntüleyen

pencere çalışma alanı olarak isimlendirilir.

GİRİŞ

Bu ünitede; farklı formatlardaki metinleri Dreamweaver gibi bir editör ortamına nasıl aktaracağınızı, metin eklemeyi, taşımayı, çoğaltmayı,

biçimlendirmeyi ve silmeyi öğreneceksiniz. Ayrıca belgelerin varsayılan ayarlarını yapmayı, metni farklı liste tiplerine göre biçimlendirmeyi ve sayfadaki metni ayarlamak için fontların ve font boyutlarının nasıl kullanıldığını görecek ve sayfaya ihtiyaç hâlinde özel karakter, yatay çizgi, tarih ve saat ekleyebileceksiniz. Metin biçimlendirme, web sayfalarının ziyaretçiler tarafından kolayca okunmasını sağlamanın, görsel bir çekicilik yaratmanın önemli bir kısmını oluşturur.

METİN BİÇİMLENDİRME

Biçimlendirme işlemi Özellikler (Properties) panelinde yapılır. Metin parçasını seçtiğinizde Özellikler çubuğu HTML ve CSS olmak üzere iki kısımdan oluşur. Sol taraftan HTML düğmesine tıklatınca HTML özellikleri, CSS düğmesine tıklatınca CSS özellikleri görüntülenir.

Aşağıda HTML düğmesinin tıklanması ile görüntülenen Özellikler paneli yer almaktadır.

Şekil 2.1.: HTML düğmesinin seçilmesi durumunda özellikler panelinin görünümü

Format Girintiyi azalt

Sınıf Girintiyi artır

Kalın veya değil Başlık

İtalik veya değil Kimlik

Madde işareti ekle veya kaldır Bağlantı Numaralandırma ekle veya kaldır Hedef Bu paneldeki bazı ögeler aşağıdaki gibidir;

 Format: Daha önce WEB Tasarımının Temelleri dersinde anlatılan HTML biçimleri olarak Heading, Paragraph.... kısımlarına denk gelmektedir.

 Bağ: Bu ise seçili durumdaki metin veya metin grubuna bir link atamaya yarar. Buraya direkt adres veya dosya ismi yazarak ya da yanındaki klasör simgesine tıklayarak (Dosyaya Gözat) link ile bağlanacak dosya seçilebilir. Bu kısmı doldurduktan sonra yanındaki Hedef alanı da aktif hâle gelecektir. Hedef ise Çerçeveler ile çalışan tasarımcılar için 1

2 3 4 5 6

7 8 9 10 11 12

1 2 3 4 5 6 7 8 9

10 11 12

(3)

Metin İşlemleri

Birçok editör programlarında bilinen

yerleşim seçenekleri Dreamweaver içinde

geçerlidir.

bağlanan linkin hangi çerçeve içinde açılacağını belirtmeye yarayan

"hedef" kısmıdır(Ekle / Etiket).

 Sırasız Liste: Madde işaretleri kullanarak liste oluşturmaya yarar. Basılan her Enter da yeni bir liste ögesi oluşturulur (Format / Liste /

Sıralanmamış Liste).

 Sıralı Liste: Numaralandırma yaparak liste oluşturmaya yarar. Basılan her Enter’ da yeni bir liste ögesi oluşturulur (Format / Liste / Sıralanmış Liste).

 Kalın: Kalın yazmak için kullanılır (Format / Stil / Kalın (Ctrl+B)).

 İtalik: Eğik yazmak için kullanılır (Format / Stil / İtalik (Ctrl+I)).

Metnin sayfa içerisinde sağa, sola, ortaya veya her iki yana yerleşimini sağlayan yerleşim seçenekleri mevcuttur. Metinleri sayfada hizalamak için (Format>Hizala) komutlarını kullanabilirsiniz. Dreamweaver hizalama seçeneklerinin yanı sıra sayfa içerisinde yer alan metinlerin belli bir düzen içerisinde yerleşmesini sağlamak için paragraf seçeneklerini kullanır. Sayfa içerisi- ne eklediğiniz bir metnin paragraf girintileri içermesi için Indent (Girinti) seçene- ğini tıklayın. Outdent (Çıkıntı) seçeneği ise metni dışa doğru çeker.

 Blok Alıntıyı Kaldır: Paragrafı bir sekme (Tab) dışarı kaydırır (Format / Çıkıntı (Ctrl+Alt+Shift+ü)).

 Blok Alıntı: Paragrafı bir sekme (Tab) içeri kaydırır (Format / Girinti (Ctrl+Alt+Shift+ğ)).

Şekil 2.2.: Metni hizalama paneli

Özellikler panelinde CSS düğmesinin tıklanması durumunda görüntülenen panel aşağıda yer almaktadır.

(4)

Metin İşlemleri

WEB sayfası tasarlarken kullanmayı düşündüğünüz

fontun WEB ve dünya standartlarına uygun fontlardan olmasına özen

gösteriniz.

Dreamweaver CS6 programının tüm özelliklerini görüntüleyen

pencere çalışma alanı olarak isimlendirilir.

ŞEKİL 2.3.: ÖZELLİKLER PANELİNİN CSS DÜĞMESİNİN SEÇİLMİŞ HÂLİ

Stil açılır listesi İki yana hizala Yazı tipi grupları açılır listesi Stil kuralını düzenle

Kalın veya değil CSS panelini aç

İtalik veya değil Metin boyutu

Sola hizala Metin boyutu biçimi açılır listesi

Ortala Metin renk kutusu

Sağa hizala Metin renk kodu

Sisteme ait yazı fontlarını, tasarladığınız sayfa için kullanabilirsiniz.

Dreamweaver, kullanmak istediğiniz yazı fontlarını seçme imkânı sağlar. Bu şekilde sadece seçtiğiniz fontların kullanılmasını sağlamış olursunuz. Diğer yazı fontları ihtiyaç hâlinde font listesine eklenebilir. Sayfa içerisine yazılan metnin yazı tipini değiştirmek için Değiştir > Sayfa Özellikleri seçeneği tıklanarak Sayfa Özellikleri penceresinde de Sayfa Fontu alanından bir font grubu seçilebilir.

Metinler içinde bulunan karakterlerin boyutunu değiştirmek için (CSS düğmesi seçilmesi hâlinde) fare ile seçim yapıldıktan sonra özellikler

penceresindeki boyut seçeneğini kullanmak yeterlidir.

Şekil 2.4. Yazı tipi düzenleme iletişim penceresi

A H

C D E F G

B I

J K L M N

A B C D E F G H

I J K L M N

(5)

Metin İşlemleri

Sistemde tanımlı ancak ziyaretçinin sisteminde olmayan fontlar için metinler standart yazı tipleri ile görüntülenir.

Ayrıca Değiştir paneli altında yer alan "Font Aileleri" sekmesinden de ilave fontlar eklemek mümkündür. Mevcut bir font grubunu değiştirmek ya da yeni bir font gurubu oluşturmak için Font Listesini Düzenle… seçeneğini tıklayabilirsiniz.

Açılan Font Listesini Düzenle iletişim kutusunda yeni font listesi oluşturulabilir.

Font Listesini Düzenle bölümünde yer alan + işareti tıklanarak her font için farklı bir liste alanı tanımı yapılabilir. Sistem fontlarından seçilen bir fontu listeye eklemek için Ekle («) düğmesi tıklanmalıdır. Eğer listeden kaldırmak istediğiniz bir font var ise, fontu seçerek Kaldır (») düğmesini tıklayabilirsiniz.

Sayfaya WEB Fontları Ekleme

Web sayfalarında kullanılan metinler tanımlandığında sistem fontları ile gösterilir. Başka bir ifadeyle, siteyi ziyaret eden kişinin sisteminde tanımlı olan ve yaygın olarak kullanılan fontlar kullanılarak metinlerin gösterimi sağlanır. Bunun yanı sıra web sayfalarında farklı fontlar kullanarak metinler görüntülenebilir.

Sistemde tanımlı ancak ziyaretçinin sisteminde olmayan fontlar için metinler standart yazı tipleri ile görüntülenir. Bunun önüne geçmek için site içerisinde yerleşik olarak kullanabileceğiniz web fontları tanımlayabilirsiniz.

Site klasörü içerisine kopyaladığınız bir yazı tipini Web Fontu olarak tanımlayabilmek için şu adımları takip etmelisiniz:

 1. Adım: Font Listesini Düzenle iletişim penceresinden Web Fontları…

düğmesini tıklayın.

 2. Adım:Web Fontları Yöneticisi iletişim penceresinden Font Ekle düğmesini tıklayın.

 3. Adım: Web Fontu Ekle iletişim penceresinde Font Adı alanına font için bir isim yazın.

 4. Adım: Web Fontu olarak tanımlamak istediğiniz fontun türüne göre klasör simgesini tıklayın ve fontu bulunduğu konumdan seçin.

 5. Adım: Fontun web sitesinde kullanılmak üzere tarafınızdan lisanslı olduğuna dair onay seçeneğini işaretleyin. (Lisanslamadığımız fontları sitenizde kullanmanız yasal olarak problem teşkil edebilir.)

 6. Adım: Tamam düğmesini tıklayın.

 7. Adım: Bitti düğmesini tıklayın.

Tanımladığınız web fontu, font listesi içerisinde gösterilir. Listeden seçerek sayfanızda kullanabilirsiniz. Siteyi yayımlarken web fontunu da sunucuya

göndermeniz gerekir. Bu şekilde font, site içerisinde yerleşik olarak kullanılır.

Metne Paragraf / Başlık Stili Uygulama

Sayfa içerisindeki paragraflara ve başlıklara ortak bir standart getirmek mümkündür. Sayfa içerisindeki paragraf metinleri ve başlıklar için tanımlanan biçim özelliklerini seçerek hızlıca metinlere uygulayabilirsiniz.

Metinlere paragraf ve başlık biçimlerini uygulamak için:

 Paragraf ya da başlığın bulunduğu satırı tıklayın,

 Format > Paragraf Formatı seçeneğini tıklayın,

(6)

Metin İşlemleri

Sayfaya eklediğiniz metinler varsayılan olarak siyah rengi

kullanır.

 Bir başlık seçin.

Şekil 2.5.: Metne başlık ekleme iletişim penceresi

Metin Rengini Ayarlama

Hazırlayacağınız WEB sayfasındaki metnin rengini değiştirebilirsiniz.

Dreamweaver, metnin rengini değiştirmek için sisteme ait renk paletini kullanır.

Palet içerisinden bir rengi seçerek metne uygulayabilirsiniz.

Sayfadaki metnin rengini değiştirmek için:

 Rengini değiştirmek istediğiniz metni seçin,

 Format > Renk seçeneğini tıklayın,

 Renk paletinin sol tarafından temel renklerden birini seçin ya da sağ taraftan istediğiniz bir renk üzerine tıklayın.

 Tamam düğmesini tıklayın.

Şekil 2.6.: Metne renk özelliği verme iletişim penceresi

Tamam, düğmesini tıkladığınızda Yeni CSS Kuralı iletilişim penceresi açılır.

Bu pencerede seçtiğiniz rengin hangi seçiciye uygulanacağını belirleyin ve seçici için bir isim yazın. Tamam, düğmesini tıklayın.

(7)

Metin İşlemleri

Şekil 2.7.: Metne renk verirken “Yeni CSS Kuralı” tanımlama iletişim penceresi

Metnin Stilini Belirleme

Sayfa içerisinden seçtiğiniz bir metne çeşitli yazı tipi stili özellikleri

kazandırabilirsiniz. Normal bir metin editöründe metne verdiğiniz kalın, italik, altı çizgili, üstü çizgili gibi metin stilleri ve daha birçok stil özelliğini sayfa içerisindeki metinlere kazandırabilirsiniz.

Şekil 2.8.: Metnin stilini belirleme iletişim penceresi Metne, metin stillerini uygulamak için:

 Stili uygulayacağınız metni seçin,

 Format > StiI seçeneğini tıklayın,

 Bir stil seçin.

(8)

Metin İşlemleri

Metin biçimlendirme işlemleri için genellikle

Özellikler (Properties) penceresinden faydalanılmaktadır.

Tablo 2.1.: Metin stil çeşitleri

Stil Adı HTML Kodu Görevi

Kalın (bold) veya

 Metni koyu yapar.

İtalik (italic) <l> veya  Metni yatık yapar.

Altı Çizgili

(Underline)  Metnin altını çizer.

Üstü Çizgili

(Strikethrought) <strike> Metnin ortasını çizer.

Teleyazıcı

(Teletype) <tt> Metnin daktilo ile yazılmış gibi gösterimini sağlar.

Vurgu (Emphasis)  Metnin vurgulu yazılmasını sağlar.

Güçlü (Strong)  Metnin daha güçlü hatlarla yazılmasını sağlar.

Kod (Code) <code> Metnin bilgisayar kodlarına benzer bir stil ile yazılmasını sağlar.

Değişken

(Variable) <var> Metnin değişkenleri ifade eden bir stil ile yazılmasını sağlar.

Örnek (Sample) <samp> Metni örnek yazımları ifade eden bir stil ile yazılmasını sağlar.

Klavye (Keyboard) <kbd> Metnin klavye ile yazılmış normal biçimsiz bir metin gibi gösterir.

Alıntı (Citation) <cite> Alıntı metinleri yazmanız için sunulan özel bir stildir.

Açıklama

(Definition) <dfn> Sayfa içerisinde herhangi bir tanımı göstermek için kullanılır.

Silindi (Deleted) <del>

Sayfada önceden mevcut bulunan, fakat sonradan kaldırılan bir metni belirtmek için kullanılır. Metnin üstünü çizer.

Ekli (Inserted) <ins>

Sayfaya bir metin parçasının sonradan dâhil edildiğini göstermek için kullanılan stildir. Metnin altını çizerek bunu belirtir.

Dreamweaver editörü aracılığıyla oluşturulan sayfalar içinde bulunan metinler yine editör menüleri aracılığıyla düzenlenebilmektedir. Oluşturulan sayfa içinde metinler yazılıp Enter tuşuna basıldığında bir alt satır geniş bir boşluktan sonra başlamaktadır. Bu boşluğa paragraf boşluğu adı verilir. Satır boşluğu bırakmak için ise satır sonu oluşturulmalıdır.

Şekil 2.9.: Paragraf ve satır boşlukları

Dreamweaver’da oluşturulan sayfalar içindeki metinler arasında satır boşluğu oluşturmak için istenen noktada klavyeden Shift tuşu ile birlikte Enter tuşuna basılması gerekir.

Paragraf boşluğu Satır boşluğu

(9)

Metin İşlemleri

Dreamweaver’da sıralı, sırasız ve tanım listeleri olmak üzere üç temel liste tipi oluşturulabilir.

Metni Listeleme

Sayfa içindeki metinleri sıralı, sırasız şekilde listeleyebilir, tercihe göre tanım listeleri oluşturabilirsiniz. Başka bir ifade ile sayfa içerisinde listeli metinler

oluşturmanız gerekebilir. Bu tür işlemler için Dreamweaver, çeşitli listeleme seçeneklerini metne uygulamanızı sağlar. Metni listeli bir şekilde göstermek için, sıralı sayılar kullanabileceğiniz gibi özel karakter ya da isimler de kullanabilirsiniz.

Sıralı listeler

Sıralı listeler birbirini takip eden sayısal veya alfabetik olarak sıralanmış elemanlardan oluşmaktadır (i-ii-iii; 1-2-3; a-b-c ….). Latin ya da Romen rakamlarını veya BÜYÜK ya da küçük harfleri kullanabilirsiniz. Sıralı listeler, adımlardan oluşan bir listeyi sunarken olduğu gibi ögeleri açık bir şekilde düzenlemeyi ve etiketlemeyi gerektiren durumlarda idealdir.

Şekil 2.10: Sıralı liste oluşturma

Sırasız listeler

Sırasız listeler madde imli listeler olarak da adlandırılır. Her liste elemanının önünde bir madde imi bulunmaktadır (•,-, · …).

Şekil 2.11: Sırasız liste oluşturma

(10)

Metin İşlemleri

Tanım Listesi, önce bir terimin yazıldığı ve ardın-

dan tanımının yapıldığı liste türüdür.

Dreamweaver’da madde imi için kullanılan varsayılan sembol değiştirilerek disk, yuvarlak ya da kare haline getirilebilir. Sırasız listeler, her öğenin birbirinden ayrılması gerektiği, fakat rakamlarla veya harflerle etiketlemenin gerekmediği durumlarda kullanışlıdır.

Tanım (Açıklama) listeleri

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, Format -> Liste -> Açıklama Listesi seçeneğinin dışında, 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 hâle getirilerek de yapılabilmektedir.

Şekil 2.12: Tanım (açıklama) listesi oluşturma

İç İçe Listeler Oluşturma

Dreamweaver editöründe çalıştığımız sayfa içinde iç içe listeler oluşturmak için liste elemanlarının üzerinde sağ tuşla tıklayarak açılan menülerden Liste seçeneğinin içinde bulunan Girinti / Çıkıntı seçeneklerini işaretlememiz yeterlidir.

Bunun dışında çok düzeyli liste oluşturmak istediğimizde listede yer alan satırları seçip özellikler panelindeki Çıkıntı / Girinti düğmelerinden duruma göre uygun olanını seçmek gerekir.

(11)

Metin İşlemleri

Liste Özellikleri iletişim kutusunda yer alan seçenekler kullanılarak liste biçimi ayarlanabilir.

Şekil 2.13.: İç içe liste oluşturma

Liste özelliklerini değiştirme

Bir liste oluşturduktan sonra, listenin özelliklerini değiştirmek mümkündür.

Liste özelliklerini değiştirmek için Liste Özellikleri iletişim kutusu kullanılır. Liste Özellikleri iletişim kutusunu açmak için aşağıdaki yöntemlerden herhangi biri uygulanabilir:

 Metot 1: Öncelikle özelliği değiştirilmesi istenen liste elemanlarından biri tıklanır. Daha sonra Özellikler panelinin alt tarafındaki

düğmesine tıklatılır,

 Metot 2: Format menüsünden Liste komutunu seçip Özellikler… ko- mutunu tıklatılır,

 Metot 3: Çalışma alanında fare sağ tuşuna tıklatıp gelen kısayol menüsünden Liste komutunu seçip Özellikler… komutunu tıklatılır, Listenin özelliklerini değiştirmek için aşağıdaki yolu takip edin:

 Değiştirmek istediğiniz listenin herhangi bir noktasına imlecinizi konumlandırın.

 Yukarıdaki yöntemlerden herhangi birini (Örneğin Format menüsünden Liste komutunu seçip Özellikler… komutunu tıklatın) uygulayarak Liste Özellikleri… iletişim kutusunu açın.

Şekil 2.14.: Liste özellikleri iletişim penceresi

 Liste Özellikleri… iletişim kutusundaki ayarları aşağıdaki açıklamalar ışığında istediğiniz gibi değiştirebilirsiniz.

 Liste türü: Liste tiplerinin yer aldığı açılır listedir. İstediğiniz liste tipini seçebilirsiniz.

(12)

Metin İşlemleri

Özel karakterler, hatırlanması zor alternatif

klavye kısayollarına ya da özel HTML kodlarına sahip

olan karakterlerdir.

 Stil: Sırasız listeler için madde işareti stilini, sıralı listeler için de sayı biçimini seçebilirsiniz.

 Sayım başlat: Sıralı liste için başlangıç sayısını seçebilirsiniz.

 Yeni Stil: Stil seçeneğinin benzeridir ancak tek bir ögeye uygulanır.

 Sayım düzeyi: Sayım başlat seçeneğinin aynısıdır ancak bir ögeye uygulanır.

 İstediğiniz seçenekleri belirledikten sonra Tamam düğmesine tıklatıp iletişim kutusunu kapatarak değişiklikleri listeye uygulamış olursunuz.

Metin girintisini ayarlama

Metin girintisini artırmak veya azaltmak için de Özellikler panelindeki Girinti / Çıkıntı düğmelerinden faydalanılabilir. Metin girinti işlemi ile paragrafları içerden başlatabilirsiniz. Bunun için girintilerini ayarlamanız gerekir. Paragraf girintilerini ayarlamak için Indent (Girinti) ve Outdent (Çıkıntı) komutları kullanılır.

Paragraf girintisini artırmak veya azaltmak için ekleme noktasını paragrafın herhangi bir noktasına konumlandırıp aşağıdaki adımları uygulayın:

 Özellikler çubuğunda HTML seçeneğine tıklatın,

 Metot 1: girinti ve çıkıntı düğmelerini kullanın,

 Metot 2: Format menüsünden Girinti ve Çıkıntı Azalt komutlarını kullanın,

 Metot 3: Çalışma alanında fare sağ tuşuna tıklatıp gelen kısayol menüsünden Liste komutunu seçip Girinti ve Çıkıntı komutlarını kullanın.

WEB Sayfasına Özel Karakter Ekleme

WEB sayfasına normal karakterlerin dışında özel karakterleri de eklemek mümkündür. Dreamweaver editörü ile oluşturulan sayfalar içinde özel karakterler kullanmak için Ekle araç çubuğu içindeki Ortak menü grubunda yer alan karakter seçeneği aktif hale getirilmelidir.

Şekil 2.15.: Özel karakter ekleme iletişim penceresi

Ayrıca Ekle menü grubu içindeki karakter seçeneği tıklanarak da açılan listeden istenilen özel karakter seçilebilir veya aynı listeden daha fazla özel karakter listesine erişmek için Diğer… seçenek seçilebilir.

Şekil 2.16.: Özel karakter eklenmiş metin

(13)

Metin İşlemleri

Tablo 2.2.: En yaygın kullanılan özel karakter çeşitleri Özel Karakter Açıklama

Satır Kesmesi Sayfada bir alt satıra geçerken Enter tuşuna basıldığında iki satır alta geçtiği görülür. Satır Sonu seçeneği aktif satırın bir altına geçiş yapmak için kullanılır. Aynı işlemi

Shift+Enter tuşlarına basılarak da yapılabilir.

Kesmesiz Aralık Dreamweaver ile web sayfası hazırlarken sayfaya metin girişlerinde satır içerisinde Space (Boşluk) tuşu ile boşluk bırakmak istenildiğinde sadece bir boşluk karakteri bırakır.

Birden fazla boşluk karakteri oluşturmak için Non-Breaking Space (Bölünemez boşluk) düğmesini tıklamak gerekir.

Sol Tırnak İşareti Sayfa içerisine sol tırnak işareti karakterini ekler. Klavyeden tırnak karakterine basıldığında düz tırnak işareti çıkar.

Özellikle dil bilgisi kurallarını ihlal etmemek için sol ve sağ tırnak karakterlerinin kullanılması uygun olmaktadır.

Sağ Tırnak İşareti Sayfa içerisine sağ tırnak işareti karakterini ekler. Klavyeden tırnak karakterine basıldığında düz tırnak işareti çıkar.

Özellikle dil bilgisi kurallarını ihlal etmemek için sol ve sağ tırnak karakterlerinin kullanılması uygun olur.

Uzun Tire Sayfa içerisine uzun tire karakterini ekler. Bu karakter tire karakterinin üç katı büyüklüğe sahiptir.

Tire Sayfa içerisine tire karakterini ekler.

Sterlin Sayfa içerisine £ karakterini ekler. Bu karakter İngiliz para birimini ifade eder.

Avro Sayfa içerisine € karakterini ekler. Bu karakter Avrupa ülkelerinin ortak para birimini ifade eder.

Yen Sayfa içerisine ¥ karakterini ekler. Bu karakter Japon para birimini ifade eder.

Telif Hakkı Sayfa içerisine © karakterini ekler. Bu karakter kullanılan materyallerin çoğaltmaya karşı yasal olarak korunduğunu ifade eder.

Tescilli Ticari Marka

Sayfa içerisine ® karakterini ekler. Bu karakter kayıtlı ticaret markalarının ismi üzerinde gösterilir.

Ticari Marka Sayfa içerisine ™ karakterini ekler. Bu karakter ticaret markalarının ismi üzerinde gösterilir.

Daha fazla özel karakter eklemek için hangi yönteme başvurulursa vurulsun aşağıdaki “Başka Karakter Ekle” iletişim penceresi ekrana gelecektir.

(14)

Metin İşlemleri

Başka Karakter Ekle iletişim kutusunda bir

karakter seçildiğinde iletişim kutusunun sol üst

köşesinde yer alan metin kutusunda buna karşılık

gelen HTML kodu belirecektir.

Şekil 2.17.: Özel karakter ekleme iletişim penceresi

Sayfaya Yatay Çizgi Ekleme

Yatay çizgi, sayfa içeriğini bölümler hâlinde ayırmaya yardımcı olan bir araçtır. Diğer bir ifade ile yatay çizgi, sayfa boyunca yer alan bir çizgidir ve içeriğin bölümlerini görsel olarak ayırmaya yarar. Ekleme noktasını şekil 2.16’daki telif hakkı satırının önüne yerleştirip, Ekle araç çubuğu içindeki Ortak menü grubunda yer alan Yatay Çizgi seçeneği aktif hâle getirilmelidir.

Şekil 2.18: Yatay çizgi

Sayfaya yatay çizgi eklendiğinde ve daha sonra yatay çizgiye tıklatıp seçildiğinde Özellikler çubuğunda yatay çizgi seçenekleri görüntülenir.

 Gen: Kutusuna çizginin genişliği girilir. Hemen sağ tarafındaki açılır listeden genişlik için kullanmak istenilen birim sistemi seçilebilir.

 Yük: Kutusuna çizginin yüksekliği girilir.

 Hizala: Açılır listesinden çizginin yatay hizalanması seçilir.

 Gölgeleme: Onay kutusu işaretlenirse yatay çizgiye gölgeleme uygulanır.

Şekil 2.19: Yatay çizgi özellikler iletişim penceresi

(15)

Metin İşlemleri

Hazırladığınız WEB sayfasındaki tarih ve saati

otomatik olarak güncellemeniz

mümkündür.

Tarih ve Saat Ekleme

Bazen geliştirilen WEB sayfalarından birine ait son değişiklik tarihini takip etmek gerekebilir ya da ziyaretçilerin sayfadaki bilgilerin en son ne zaman güncellendiğini görebilmesi istenebilir. Dreamweaver bu bilgilerin izlenebilmesi için sayfaya tarih ve saat eklemeyi mümkün kılar. Her kaydedilişte Dreamweaver tarihi ve saati otomatik olarak güncelleyebilir, böylece bu işlemi elle yapmak zorunda kalınmaz.

Sayfaya güncel tarih bilgisini eklemek için:

 Metot 1: Ekle -> Tarih seçeneğini tıklayın veya

 Metot 2: Ekle araç çubuğu içindeki Ortak menü grubunda yer alan tarih seçeneğini seçin, daha sonra

 Tarih Ekle iletişim kutusunda gün, tarih, saat formatını seçin,

 Tamam, düğmesini tıklayın.

Şekil 2.20: Tarih ekle iletişim penceresi

Eklenmiş tarih ve saatin otomatik olarak güncellenmesini istiyorsanız şekil 2.20’de görülen “Kaydetmede otomatik olarak güncelleştir” onay kutusunu işaretlemeniz gerekir.

Şekil 2.21: Tarih ve saatin eklenmesi

(16)

Metin İşlemleri

Ö ze t

•Metin biçimlendirme işlemleri Özellikler paneli ile yapılır. Bu paneldeki tüm ayarlar, Format menüsünde yer alan alt menüler ile de yapabilmektedir.

Metin içinde bulunan karakterler Özellikler penceresindeki HTML seçeneği seçildikten sonra kalın veya italik düğmeler aracılığıyla yapılabilir.

Dreamweaver’da oluşturulan sayfalar içindeki metinler arasında paragraf boşluğu için Enter tuşuna basılırken, satır boşluğu oluşturmak için ise istenen noktada klavyeden Shift tuşu ile birlikte Enter tuşuna basılması gerekir. Sayfa Özellikleri... penceresindeki Kategori listesinden Görünüm (CSS) tıkladıktan sonra Sayfa fontu menüsünden yazı tipi belirlenebilir. Benzer şekilde metin boyutu, boyut ile belirlenir. Metin rengi de Metin rengi düğmesi aracılığı ile yapılır.

•Sayfa içindeki metinler; sıralı, sırasız ve tanım listeleri şeklinde de düzenlenebilir. Ayrıca sıralı ve sırasız listeler ihtiyaç hâlinde iç içe liste şeklinde de oluşturulabilir. Dreamweaver editörü ile sayfalar içinde özel karakterler kullanmak için Ekle araç çubuğu içindeki Karakter menü grubundan yararlanılır. Bazı durumlarda sayfa içeriğini bölümler hâlinde ayırmak için yatay çizgiye ihtiyaç duyulur. Bu durumda Ekle araç çubuğundaki Ortak menü grubundaki Yatay Çizgi düğmesini tıklamak gerekir. Sayfaya tarih ve saat eklemek için Ekle araç çubuğundaki Ortak menü grubundaki Tarih düğmesine tıklamak yeterlidir.

(17)

Metin İşlemleri

Değerlendirme sorularını sistemde ilgili ünite başlığı altında yer alan “bölüm sonu testi”

bölümünde etkileşimli olarak

cevaplayabilirsiniz.

DEĞERLENDİRME SORULARI

1. Dreamweaver uygulamasında metin biçimlendirme işlemleri hangi panelden (pencereden) yapılır?

a) Davranışlar b) Özellikler c) Dosyalar d) Tasarım

e) Dosya Oluşturma

2. Seçili durumdaki metin veya metin grubuna bir link atamaya yarayan metin biçimlendirme paneli ögesi aşağıdakilerden hangisidir?

a) Format b) ID c) Sınıf d) Başlık e) Bağ

3. Metinleri sayfada hizalamak için Dreamweaver içerisinde hangi komut zinciri kullanılabilir?

a) Format > Girinti b) Format > Çıkıntı c) Format > Stil d) Format > Renk e) Format > Hizala

4. Sayfa içerisine yazılan metnin yazı tipini değiştirmek için “Değiştir > Sayfa Özellikleri” seçeneği tıklandıktan sonra hangi alanda değişiklik yapılır?

a) Sayfa Fontu b) Boyut c) Metin Rengi d) Yinele

e) Arka plan görüntüsü

5. Sayfa Özellikleri penceresinde, mevcut bir font grubunu değiştirmek ya da yeni bir font gurubu oluşturmak için hangi seçenek tıklanmalıdır?

a) Bağlar (CSS) b) Görünüm (HTML) c) Font Listesini Düzenle d) Sol kenar boşluğu e) Üst kenar boşluğu

(18)

Metin İşlemleri

6. Sistemde tanımlı ancak ziyaretçinin sisteminde olmayan fontlar için metinler standart yazı tipleri ile görüntülenir. Bunun önüne geçmek için site içerisinde yerleşik olarak kullanılabilecek font türlerine ne ad verilir?

a) Standart Fontlar b) Kayıtlı Fontlar c) Sistem Fontları d) Sayfa Fontları e) Web Fontları

7. Metinlere paragraf ve başlık biçimlerini uygulamak için; paragraf ya da başlığın bulunduğu satırı tıkladıktan sonra hangi komut zinciri izlenmelidir?

a) Format > Stil b) Format > CSS Stilleri c) Format > Hizala

d) Format > Paragraf Formatı e) Format > Liste

8. Dreamweaver CS6’da seçili bir metnin rengini değiştirmek için hangi komut zinciri uygulanır?

a) Format > Hizala b) Format > Renk c) Format > Girinti d) Format > Çıkıntı

e) Format > Paragraf Formatı

9. Bir metni koyu yapmak için hangi metin stil çeşidi kullanılabilir?

a) Kalın b) İtalik c) Altı Çizili d) Üstü Çizili e) Kod

10. Sayfaya bir metin parçasının sonradan dâhil edildiğini göstermek için kullanılan ve metnin altını çizerek bunu belirten stil çeşidi aşağıdakilerden hangisidir?

a) Örnek (Sample) b) Klavye (Keyboard) c) Ekli (inserted) d) Silindi (Deleted) e) Açıklama (Definition)

Cevap Anahtarı 1.B, 2.E, 3.E, 4.A, 5.C, 6.E, 7.D, 8.B, 9.A, 10.C.

(19)

Metin İşlemleri

YARARLANILAN VE BAŞVURULABİLECEK DİĞER KAYNAKLAR

Çelikbilek, İ. (2013). HTML5 Geleceğin WEB Standartları, İstanbul: KODLAB Yayın Dağıtım Yazılım ve Eğitim Hizmetleri San. ve Tic. Ltd. Şti.

Çiçek, Musa (2013). Web Tasarım Temelleri, İstanbul, Kodlab Yayın Dağıtım.

Duckett, J. (2011). HTML and CSS: Design and Build Websites, John Wiley and Sons Inc.

Gümüştepe, Yavuz (2013). Dreamweaver, İstanbul, Kodlab Yayın Dağıtım.

Gürkan, O. (2009). HTML ve XHTML, Ankara: Nirvana Sinemis Yayın Grup.

Gürkan, Osman (2012). Adobe Dreamweaver CS6, Ankara, Nirvana Yayıncılık.

Page, Khristine A. (2004). (Çeviren: Günay İnkaya), İstanbul, Macromedia Dreamweaver MX 2004, Medyasoft Yayınları.

Wempen, F. (2008). (Çeviren: Dalcı, M.), Adım Adım HTML ve XHTML, Ankara:

Arkadaş Yayınevi.