HEDEFLER İÇİNDEKİLER METİN İŞLEMLERİ 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 WEB EDİTÖRÜ Prof. Dr. Muhammet Dursun KAYA 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. ÜNİTE 2
Dreamweaver da metin üzerinde işlem yapabilmek için metnin seçilmesi gerekir. Metin seçme işlemine bloklamak da denir. 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. 1 2 3 4 5 6 7 8 9 10 11 12 Şekil 2.1.: HTML düğmesinin seçilmesi durumunda özellikler panelinin görünümü 1 Format 7 Girintiyi azalt Dreamweaver CS6 programının tüm özelliklerini görüntüleyen pencere çalışma alanı olarak isimlendirilir. 2 3 4 5 6 Sınıf Kalın veya değil İtalik veya değil Madde işareti ekle veya kaldır Numaralandırma ekle veya kaldır 8 9 10 11 12 Girintiyi artır Başlık Kimlik Bağlantı 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 Atatürk Üniversitesi Açıköğretim Fakültesi 2
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çerisine 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. Atatürk Üniversitesi Açıköğretim Fakültesi 3
A B C D E F G H Dreamweaver CS6 programının tüm özelliklerini görüntüleyen pencere çalışma alanı olarak isimlendirilir. A B C D E F G ŞEKİL 2.3.: ÖZELLİKLER PANELİNİN CSS DÜĞMESİNİN SEÇİLMİŞ HÂLİ Stil açılır listesi Yazı tipi grupları açılır listesi Kalın veya değil İtalik veya değil Sola hizala Ortala Sağa hizala I J K L M N H I J K L M N İki yana hizala Stil kuralını düzenle CSS panelini aç Metin boyutu Metin boyutu biçimi açılır listesi Metin renk kutusu Metin renk kodu WEB sayfası tasarlarken kullanmayı düşündüğünüz fontun WEB ve dünya standartlarına uygun fontlardan olmasına özen gösteriniz. 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 Atatürk Üniversitesi Açıköğretim Fakültesi 4
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 Sistemde tanımlı ancak ziyaretçinin sisteminde olmayan fontlar için metinler standart yazı tipleri ile görüntülenir. 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, Atatürk Üniversitesi Açıköğretim Fakültesi 5
Bir başlık seçin. Metin Rengini Ayarlama Şekil 2.5.: Metne başlık ekleme iletişim penceresi Sayfaya eklediğiniz metinler varsayılan olarak siyah rengi kullanır. 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. Atatürk Üniversitesi Açıköğretim Fakültesi 6
Ş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. Atatürk Üniversitesi Açıköğretim Fakültesi 7
Tablo 2.1.: Metin stil çeşitleri Stil Adı HTML Kodu Görevi Kalın (bold) <b>veya <strong> Metni koyu yapar. İtalik (italic) <l> veya <em> Metni yatık yapar. Altı Çizgili (Underline) <u> 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) <em> Metnin vurgulu yazılmasını sağlar. Güçlü (Strong) <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 Metnin değişkenleri ifade eden bir stil ile <var> (Variable) 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 Sayfa içerisinde herhangi bir tanımı göstermek <dfn> (Definition) için kullanılır. Sayfada önceden mevcut bulunan, fakat sonradan Silindi (Deleted) <del> 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. Metin biçimlendirme işlemleri için genellikle Özellikler (Properties) penceresinden faydalanılmaktadır. 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. Paragraf boşluğu Satır boşluğu Ş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. Atatürk Üniversitesi Açıköğretim Fakültesi 8
Metni Listeleme Dreamweaver da sıralı, sırasız ve tanım listeleri olmak üzere üç temel liste tipi oluşturulabilir. 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. Sırasız listeler Şekil 2.10: Sıralı liste oluşturma 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 Atatürk Üniversitesi Açıköğretim Fakültesi 9
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 Listesi, önce bir terimin yazıldığı ve ardından tanımının yapıldığı liste türü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. İç İçe Listeler Oluşturma Şekil 2.12: Tanım (açıklama) listesi 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. Atatürk Üniversitesi Açıköğretim Fakültesi 10
Liste özelliklerini değiştirme Şekil 2.13.: İç içe liste oluşturma 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 komutunu 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. Liste Özellikleri iletişim kutusunda yer alan seçenekler kullanılarak liste biçimi ayarlanabilir. Ş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. Atatürk Üniversitesi Açıköğretim Fakültesi 11
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 Özel karakterler, hatırlanması zor alternatif klavye kısayollarına ya da özel HTML kodlarına sahip olan karakterlerdir. 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 Atatürk Üniversitesi Açıköğretim Fakültesi 12
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 Sol Tırnak İşareti Sağ Tırnak İşareti Uzun Tire Tire Sterlin Avro Yen Telif Hakkı Tescilli Ticari Marka Ticari Marka 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. 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. 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. Sayfa içerisine uzun tire karakterini ekler. Bu karakter tire karakterinin üç katı büyüklüğe sahiptir. Sayfa içerisine tire karakterini ekler. Sayfa içerisine karakterini ekler. Bu karakter İngiliz para birimini ifade eder. Sayfa içerisine karakterini ekler. Bu karakter Avrupa ülkelerinin ortak para birimini ifade eder. Sayfa içerisine karakterini ekler. Bu karakter Japon para birimini ifade eder. Sayfa içerisine karakterini ekler. Bu karakter kullanılan materyallerin çoğaltmaya karşı yasal olarak korunduğunu ifade eder. Sayfa içerisine karakterini ekler. Bu karakter kayıtlı ticaret markalarının ismi üzerinde gösterilir. 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. Atatürk Üniversitesi Açıköğretim Fakültesi 13
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 Atatürk Üniversitesi Açıköğretim Fakültesi 14
Tarih ve Saat Ekleme Hazırladığınız WEB sayfasındaki tarih ve saati otomatik olarak güncellemeniz mümkündür. 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 Atatürk Üniversitesi Açıköğretim Fakültesi 15
Özet Metin İşlemleri 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. Atatürk Üniversitesi Açıköğretim Fakültesi 16
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 Atatürk Üniversitesi Açıköğretim Fakültesi 17
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. Atatürk Üniversitesi Açıköğretim Fakültesi 18
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. Atatürk Üniversitesi Açıköğretim Fakültesi 19