Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

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

Benzer bir sunumlar


... konulu sunumlar: "DERS ❷ SAYFAYA İÇERİK EKLEMEK RABİA CANBAZ 61120000003 BİLGİSAYAR PROGRAMCILIĞI(İ.Ö.)"— Sunum transkripti:

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

2 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 2

3 •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 3 METİN AKTARMAK

4 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 4 METİN AKTARMAK

5 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 5 METİN AKTARMAK

6 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 6 METİN AKTARMAK

7 SAYFAYA İÇERİK EKLEMEK 7 METİN AKTARMAK

8 İç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 8 İÇERİĞİN YAPISINI TANIMLAMAK

9 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 9 İÇERİĞİN YAPISINI TANIMLAMAK

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

11 Ö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 11 SATIR SONU OLUŞTURMAK

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

13 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 13 BÖLÜNMEZ BOŞLUK EKLEMEK

14 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 14 BÖLÜNMEZ BOŞLUK EKLEMEK

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

16 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 16 METNİ HİZALAMAK

17  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 17 METNİ HİZALAMAK

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

19 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 19 ALINTILARI TANIMLAMAK

20 SAYFAYA İÇERİK EKLEMEK 20 ALINTILARI TANIMLAMAK

21 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 21 LİSTE OLUŞTURMAK

22 1.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. 2.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 3.Tanım listeleri terimlerden ve bunların tanımlarından oluşur. SAYFAYA İÇERİK EKLEMEK 22 LİSTE OLUŞTURMAK

23 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 23 LİSTE OLUŞTURMAK

24 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 24 LİSTE OLUŞTURMAK

25 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 25 LİSTE OLUŞTURMAK

26 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 26 LİSTE OLUŞTURMAK

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

28 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 28 TANIM LİSTESİ OLUŞTURMAK

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

30 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 30 İÇ İÇE LİSTELER OLUŞTURMAK

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

32 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 32 SATIR İÇİ KARAKTER BİÇİMLENDİRME

33 •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 33 SATIR İÇİ KARAKTER BİÇİMLENDİRME

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

35 Ç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 35 SATIR İÇİ KARAKTER BİÇİMLENDİRME

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

37 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 37 SATIR İÇİ KARAKTER BİÇİMLENDİRME

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

39 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 39 ÖZEL KARAKTER EKLEME

40 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 40 ÖZEL KARAKTER EKLEME

41 SAYFAYA İÇERİK EKLEMEK 41 ÖZEL KARAKTER EKLEME

42 Ç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 42 ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK

43 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 43 ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK

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

45 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 45 YATAY CETVEL EKLEMEK

46 SAYFAYA İÇERİK EKLEMEK 46 YATAY CETVEL EKLEMEK

47 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 47 OTOMATİK TARİH EKLEMEK

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

49 SAYFAYA İÇERİK EKLEMEK 49 UYGULAMA


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

Benzer bir sunumlar


Google Reklamları