SAYFAYA İÇERİK EKLEMEK DERS ❷ SAYFAYA İÇERİK EKLEMEK RABİA CANBAZ 61120000003 BİLGİSAYAR PROGRAMCILIĞI(İ.Ö.)

Bu derste farklı dosya formatlarında kaydedilmiş metinleri nasıl aktaracağımızı, farklı işletim sistemlerindeki materyali nasıl alacağımızı ve çoklu dil desteği içeren belgeleri kullanmayı öğreneceğiz. Metinleri biçimlendirerek, ziyaretçilerin Web sitesindeki bilgileri daha kolay okuyabilmesini sağlayacağız. SAYFAYA İÇERİK EKLEMEK

METİN AKTARMAK Metni Macromedia Dreamweaver Document penceresinde yazarak, Başka bir uygulamadaki metni kopyalayıp yapıştırarak, Metin dosyalarını doğrudan Dreamweaver’da açarak metinleri aktarabiliriz. SAYFAYA İÇERİK EKLEMEK

METİN AKTARMAK Dreamweaver ile çalışırken metin içindeki yeni satırların görüntülenmesi için metin tercihlerinde düzenlemeler yapmamız gerekmektedir. Bu düzenlemeler işletim sistemimizle uyumluluk göstermesi için yapılır. SAYFAYA İÇERİK EKLEMEK

METİN AKTARMAK Burada her tipe, karşılık gelen işletim sistemiyle birlikte gösterilir. Macintosh kullanıcıları için varsayılan seçenek: CR (Macintosh). Windows kullanıcıları için varsayılan seçenek: CR LF (Windows). Unix kullanıcıları için varsayılan seçenek: LF (Unix). SAYFAYA İÇERİK EKLEMEK

METİN AKTARMAK Bu ayarları, Edit-Preferences seçeneğine tıklayarak yapabiliriz. Açılacak Preferences penceresi içindeki Category listesinden Code Format’ı seçip Line break type alanında CR LF (Windows) seçeneğini aktif hale getirmemiz gerekmektedir SAYFAYA İÇERİK EKLEMEK

METİN AKTARMAK SAYFAYA İÇERİK EKLEMEK

İÇERİĞİN YAPISINI TANIMLAMAK İçerik yapısını tanımlamada ise sitemizde yazmış olduğumuz yazıların daha okunur daha anlaşılır ve daha gösterişli olmasını sağlayacağız. Burada büyüklük, boşluk bırakma, hizalama, paragraflar, listeler, yatay cetveller ve hizalama seçeneklerini sayabiliriz SAYFAYA İÇERİK EKLEMEK

İÇERİĞİN YAPISINI TANIMLAMAK Properties panelinde Format bölümün de Heading ‘1 den Heading 6 ya kadar konu başlığı düzeyi bulunur. Heading 1 en büyük puntoya, Heading 6 en küçük puntoya sahip seçenektir. Paragraph ise paragraf oluşturmak için kullanılır. Bunu entere basarakta oluşturabiliriz. SAYFAYA İÇERİK EKLEMEK

İÇERİĞİN YAPISINI TANIMLAMAK SAYFAYA İÇERİK EKLEMEK

SATIR SONU OLUŞTURMAK Önceki metin satırıyla arasında bir boşluk bulunmayan yeni bir satır oluşturabiliriz. Insert araç çubuğundaki Text kategorisini seçtikten sonra Characters açılır menüsüne tıklayıp LineBreak seçeneğini işaretleyerek de satır sonu ekleyebilirsiniz. Insert araç çubuğunda satırsonu simgesi olarak BR kulanılır. Shift+Enter satır sonu oluturmanın kısa yoludur. SAYFAYA İÇERİK EKLEMEK

SATIR SONU OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

BÖLÜNMEZ BOŞLUK EKLEMEK Metin kaydırma sonucunda bölünmemesi gereken iki sözcüğün arasında bir boşluk oluşturmamız gerektiğinde bölünemez boşluk adı verilen özel karakterden faydalanabiliriz. Araç çubuğundaki Text- Characters -Non-Breaking Space seçeneğini işaretleyerek bölünmez boşluğu ekleyebiliriz. Her bölünemez boşluk ekleyişimizde sözcüklerin arasındaki boşluk artar. SAYFAYA İÇERİK EKLEMEK

BÖLÜNMEZ BOŞLUK EKLEMEK HTML sadece tek bir standart boşluğu tanır birden fazla boşluğu tanımaz. Edit >Preferences (Windows’ta) komutunu seçin ve General kategorisine geçin. Allow Multiple Consecutive Spaces seçeneğini işaretleyin. Bu seçenek işaretliyken boşluk tuşuna birden fazla bastığınızda Dreamweaver bölünemez boşlukları kullanacaktır. SAYFAYA İÇERİK EKLEMEK

BÖLÜNMEZ BOŞLUK EKLEMEK SAYFAYA İÇERİK EKLEMEK

METNİ HİZALAMAK Sayfa içinde bulunan metinlerin hizalanması, Properties penceresinde bulunan hizalama düğmeleri aracılığıyla yapılmaktadır. Burada kulanabileceğiniz beş seçenek vardır. SAYFAYA İÇERİK EKLEMEK

METNİ HİZALAMAK Varsayılan (hizalama yok) Align Left (Sola hizala) Align Center (Ortala) Align Right (Sağa hizala) Justify (Her iki yana yasla) SAYFAYA İÇERİK EKLEMEK

METNİ HİZALAMAK SAYFAYA İÇERİK EKLEMEK

ALINTILARI TANIMLAMAK Outdent ve Indent bir metin girintileme yöntemi olarak değil, alıntıları göstermek için kulanmaları gerekir. İçerdiği metnin bir alıntı olduğunu gösteren bir blok düzeyi elemanıdır. Daha çok alıntılanan uzun metin parçaları için kullanılır. Blok alıntı, alıntının başına ve sonuna açılış ve kapanış tırnak işaretlerini eklemez, bunları metne bizim eklememiz gerekir. Alıntıları tanımlama işlemini Properties denetçisinde Text Outdent (alıntı gizlemek) ve Text Indent (alıntı göstermek)bölümünden yaparız. SAYFAYA İÇERİK EKLEMEK

ALINTILARI TANIMLAMAK SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK Dreamweaver’da üç temel liste tipi oluşturabilirsiniz. Oluşturduğumuz sayfa içindeki metinleri sıralı ya da sırasız şekilde listeleyebilir, tercihlerimize göre tanım listeleri oluşturabiliriz. SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK Sıralı liste, sayısal ya da alfabetik olarak sıralanmış öğelerden oluşur. Latin ya da Romen rakamlarını veya büyük ya da küçük harfleri kulanabilirsiniz. Sırasız listeler genellikle madde imli listeler olarak anılır. Her liste elemanının önünde bir madde imi bulunmaktadır. Dreamweaver’da madde imi için kul anılan varsayılan sembol değiştirilerek disk, yuvarlak ya da kare haline getirilebilir Tanım listeleri terimlerden ve bunların tanımlarından oluşur. SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK Text –List- Properties iletişim kutusunu kulanarak liste stillerinde değişiklik yapabiliriz. Aynı işlemi metnin üzerine fare işaretcisiyle sağ tıklayıp list seçeneğine oradanda properties e tıklayıp yapabiliriz. SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK List Properties iletişim kutusunda list type de bulunan özellikleri ise şu şekildedir. Bulleted list= madde işareti Numbered list= numaralı liste Directory =dizin listesi Menu list =menu listesidir SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK Style içerisinde ise seçmiş olduğumuz list typenın stiller belirlenir. Bulled listin sitillerinde; Bulled =içi dolu daire Suquare=kare şeklini verir. SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK Numbered listin stillerinde ise; number =numaralar roman small =küçük roma rakamları roman large= büyük roma rakamları alphabet small =küçük harf alphabet large= büyük harf stilini verir. Start count bölümünden başlangıç sayımızı belirliyoruz. SAYFAYA İÇERİK EKLEMEK

LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

TANIM LİSTESİ OLUŞTURMAK Bir tanım listesi bir dizi terim ve bunların tanımlarından oluşur. Tanımlanacak sözcük ya da terim sola hizalıdır, tanımı ise girintili olarak bir sonraki satıra yerleştirilir. Tanım listesini Text > List > Definition List komutunu seçerek oluşturabiliriz. SAYFAYA İÇERİK EKLEMEK

TANIM LİSTESİ OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

İÇ İÇE LİSTELER OLUŞTURMAK 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 List seçeneğinin içinde bulunan Indent / Outdent seçeneklerini işaretlememiz yeterlidir. SAYFAYA İÇERİK EKLEMEK

İÇ İÇE LİSTELER OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME Metin içinde bulunan karakterleri Properties penceresinde bulunan biçimlendirme düğmeleri aracılığıyla düzenleyebiliriz. Bu düğmeler aracılığıyla seçilen karakterlerin Bold (kalın) veya italic (eğik) görünmesini sağlayabiliriz. SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME Seçilen metne kalın ve italik biçimlendirme uygulamak için Text > Style > Bold(kalın) / italic(eğik) komutunu uygularız. Ya da Properties penceresinden tıklarız. Kısa yolları ise kalın Ctrl+B ,Eğik Ctrl+I dır SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME Çoğu kez en son yaptığınız işlemi, diğer bir paragrafta ya da başka bir seçili metinde tekrarlamak isterseniz Redo komutu ile yapabiliriz. Edit menüsünde ilk iki sırada yer alan iki komut Undo ve Redo’dur SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME Sık sık tekrarladığınız işlemleri hızlandırmak için History panelini kullanabilirsiniz. Bunu da Window > History komutunu seçip History panelini açarız. sonra paneldeki arka arkaya gelen bir dizi eylemi seçip panelin sağ alt köşesindeki Save Selected Steps As Command düğmesine tıklayarak gerçekleştirebilirsiniz SAYFAYA İÇERİK EKLEMEK

SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

ÖZEL KARAKTER EKLEME Dreamweaver’da çalışırken bazen doğrudan klavyeden erişemediğimiz karakterler vardır. Bu özel karakterler, hatırlanması zor alternatif klavye kısayolarına ya da özel HTML kodlarına sahiptir. Özel karakterler kullanmak için Insert araç çubuğu içindeki Text menü grubu aktif hale getirilmelidir. SAYFAYA İÇERİK EKLEMEK

ÖZEL KARAKTER EKLEME Text menu grubu içindeki Characters düğmesine tıklanarak açılan listeden istediğimiz özel karakteri sayfamıza ekleyebiliriz. Eğer kullanmak istediğiniz karakter Character menüsünde yoksa, menünün alt kısmındaki Other Characters seçeneğine tıklayarak ya da Insert > HTML > Special Characters > Other komutunu seçerek söz konusu karakteri bulabilirsiniz. SAYFAYA İÇERİK EKLEMEK

ÖZEL KARAKTER EKLEME SAYFAYA İÇERİK EKLEMEK

ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK Çoklu dil desteğine sahip belgeler oluşturmak için her sayfanın kodlamasını ayarlamanız ve sayfanız için hangi karakter kümesinin gerektiğini bilmeniz gerekir. Karakter kümesi belirli bir amaç için bir araya getirilen karakterlerden oluşan bir karakter grubudur. SAYFAYA İÇERİK EKLEMEK

ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK Kodlama sistemi böyle bir kümedeki karakterlerin kendilerini temsil eden veri bitleriyle nasıl eşleneceğini tanımlayan yöntemidir. Modify > Page Properties komutunu ve ardından Title/Encoding kategorisini seçin. Encoding açılır menüsünden Unicode (UTF-8)’i seçin. OK düğmesine tıklayarak iletişim kutusunu kapatın. İletişim kutusundaki diğer seçenekleri varsayılan ayarlarında bırakabilirsiniz. SAYFAYA İÇERİK EKLEMEK

ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

YATAY CETVEL EKLEMEK Yatay cetvel, sayfa içeriğimizi bölümler halinde ayırmamıza yardımcı olan bir araçtır. Yatay cetvel eklemek için imlecimizi ekleme noktasının üzerine getirdikten sonra Insert araç çubuğundaki html menu grubunda bulunan Horizontal Rule düğmesine tıklamamız gerekir. Yatay cetveli ekledikten sonra seçili durumda iken Properties denetleyicisinde, genişlik ve yükseklik, ölçü birimi (piksel ve yüzde), gölge, yatay hizalama ve Class menüsü aracılığıyla CSS uygulama seçenekleri yer alır. SAYFAYA İÇERİK EKLEMEK

YATAY CETVEL EKLEMEK SAYFAYA İÇERİK EKLEMEK

OTOMATİK TARİH EKLEMEK Oluşturduğumuz sayfa için son güncelleme tarihinin otomatik olarak eklenmesini sağlayabiliriz. Bu işlem için Insert araçubuğundaki Common menu grubu içindeki Date düğmesine tıklamamız yeterlidir. Geçerli gün, tarih ve saat görüntülenecek ve siz belgeyi her kaydettiğinizde bu bilgi değişecektir. SAYFAYA İÇERİK EKLEMEK

OTOMATİK TARİH EKLEMEK SAYFAYA İÇERİK EKLEMEK

UYGULAMA SAYFAYA İÇERİK EKLEMEK