DERS ❷

1. DERS ❷ SAYFAYA İÇERİK EKLEMEK RABİA CANBAZ 61120000003 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

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

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. METİN AKTARMAK SAYFAYA İÇERİK EKLEMEK

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). METİN AKTARMAK SAYFAYA İÇERİK EKLEMEK

6. Bu ayarları, Edit-Preferencesseç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 METİN AKTARMAK SAYFAYA İÇERİK EKLEMEK

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

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 İÇERİĞİN YAPISINITANIMLAMAK SAYFAYA İÇERİK EKLEMEK

9. Properties panelindeFormat 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 paragrafoluşturmak için kullanılır. Bunu entere basarakta oluşturabiliriz. İÇERİĞİN YAPISINITANIMLAMAK SAYFAYA İÇERİK EKLEMEK

10. İÇERİĞİN YAPISINITANIMLAMAK SAYFAYA İÇERİK EKLEMEK

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. SATIR SONU OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

13. Metin kaydırmasonucunda 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şlukekleyişimizdesözcüklerin arasındaki boşluk artar. BÖLÜNMEZ BOŞLUK EKLEMEK SAYFAYA İÇERİK EKLEMEK

14. HTML sadecetek bir standartboşluğutanırbirdenfazlaboşluğutanımaz. Edit>Preferences (Windows’ta)komutunuseçin ve General kategorisinegeçin. Allow Multiple Consecutive Spaces seçeneğiniişaretleyin. Bu seçenek işaretliykenboşluktuşunabirdenfazlabastığınızda Dreamweaver bölünemezboşluklarıkullanacaktır. BÖLÜNMEZ BOŞLUK EKLEMEK SAYFAYA İÇERİK EKLEMEK

15. BÖLÜNMEZ BOŞLUK EKLEMEK SAYFAYA İÇERİK 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. METNİ HİZALAMAK SAYFAYA İÇERİK EKLEMEK

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

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

19. Outdent ve Indentbir 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. ALINTILARI TANIMLAMAK SAYFAYA İÇERİK EKLEMEK

20. ALINTILARI TANIMLAMAK SAYFAYA İÇERİK EKLEMEK

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. LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

22. Sıralıliste, sayısal ya da alfabetikolaraksıralanmışöğelerdenoluşur. Latin ya da Romenrakamlarınıveya büyük ya da küçük harflerikulanabilirsiniz. • Sırasız listeler genelliklemaddeimli listeler olarakanılır. Her liste elemanının önünde bir madde imi bulunmaktadır. Dreamweaver’da maddeimi için kulanılan varsayılan semboldeğiştirilerek disk, yuvarlak ya da karehalinegetirilebilir • Tanımlisteleriterimlerden ve bunlarıntanımlarındanoluşur. LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

23. Text –List- Properties iletişimkutusunukulanaraklistestillerindedeğişiklikyapabiliriz. Aynıişlemimetninüzerine fare işaretcisiylesağtıklayıp list seçeneğineoradandaproperties e tıklayıpyapabiliriz. LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

25. Style içerisinde ise seçmiş olduğumuz list typenın stiller belirlenir. Bulled listinsitillerinde; • Bulled =içidoludaire • Suquare=kareşekliniverir. LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

26. Numbered listinstillerindeise; • number =numaralar • roman small =küçük romarakamları • roman large= büyük romarakamları • alphabet small =küçük harf • alphabet large= büyük harfstiliniverir. Start count bölümündenbaşlangıçsayımızıbelirliyoruz. LİSTE OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

28. Bir tanımlistesi bir diziterim ve bunların tanımlarından oluşur. Tanımlanacaksözcük ya da terim sola hizalıdır, tanımı ise girintili olarak bir sonrakisatırayerleştirilir. Tanım listesiniText > List > Definition List komutunuseçerek oluşturabiliriz. TANIM LİSTESİOLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

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 / Outdentseçeneklerini işaretlememiz yeterlidir. İÇ İÇE LİSTELER OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

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. SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

33. Seçilenmetnekalın ve italikbiçimlendirmeuygulamak için Text > Style > Bold(kalın) / italic(eğik)komutunuuygularız. Ya da Properties penceresindentıklarız. • Kısayolları ise kalınCtrl+B ,EğikCtrl+Idır SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

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

35. Çoğukezen son yaptığınızişlemi,diğerbir paragrafta ya da başka bir seçilimetindetekrarlamakistersenizRedokomutuile yapabiliriz. Editmenüsünde ilk iki sıradayeralan iki komut Undo ve Redo’dur SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

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

37. Sıksıktekrarladığınızişlemlerihızlandırmak için History panelinikullanabilirsiniz. Bunu da Window > History komutunu seçip Historypaneliniaçarız. sonra paneldekiarkaarkaya gelen bir dizieylemi seçip panelin sağ alt köşesindekiSave Selected Steps As Command düğmesinetıklayarakgerçekleştirebilirsiniz SATIR İÇİ KARAKTER BİÇİMLENDİRME SAYFAYA İÇERİK EKLEMEK

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

39. Dreamweaver’da çalışırkenbazen doğrudan klavyedenerişemediğimizkarakterlervardır. Bu özel karakterler, hatırlanmasızoralternatifklavyekısayolarına ya da özel HTML kodlarınasahiptir. Özel karakterler kullanmak için Insert araç çubuğu içindeki Text menü grubu aktif hale getirilmelidir. ÖZEL KARAKTER EKLEME SAYFAYA İÇERİK EKLEMEK

40. Text menu grubuiçindekiCharactersdüğmesinetıklanarakaçılanlistedenistediğimiz özel karakterisayfamıza ekleyebiliriz. Eğerkullanmakistediğinizkarakter Character menüsündeyoksa,menününalt kısmındakiOther Characters seçeneğine tıklayarak ya da Insert >HTML > Special Characters > Other komutunuseçereksözkonusukarakteribulabilirsiniz. ÖZEL KARAKTER EKLEME SAYFAYA İÇERİK EKLEMEK

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

42. Çokludildesteğine sahip belgeleroluşturmak için her sayfanınkodlamasınıayarlamanız ve sayfanız için hangikarakterkümesiningerektiğinibilmeniz gerekir. Karakterkümesibelirli bir amaç için bir arayagetirilenkarakterlerdenoluşan bir karaktergrubudur. ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

43. Kodlamasistemiböyle bir kümedekikarakterlerinkendilerinitemsiledenveribitleriylenasıleşleneceğinitanımlayanyöntemidir. Modify > Page Properties komutunu ve ardındanTitle/Encoding kategorisini seçin. Encoding açılır menüsünden Unicode (UTF-8)’i seçin. OK düğmesinetıklayarak iletişim kutusunukapatın.İletişimkutusundakidiğerseçenekleri varsayılan ayarlarındabırakabilirsiniz. ÇOKLU DİL DESTEĞİ İÇEREN BELGELER OLUŞTURMAK SAYFAYA İÇERİK EKLEMEK

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

45. Yatay cetvel, sayfaiçeriğimizibölümlerhalindeayırmamızayardımcıolan bir araçtır. Yatay cetveleklemek için imlecimizieklemenoktasının üzerine getirdiktensonraInsertaraççubuğundaki html menu grubunda bulunan HorizontalRule düğmesinetıklamamız gerekir. Yatay cetveliekledikten sonra seçilidurumdaikenPropertiesdenetleyicisinde, genişlik ve yükseklik, ölçübirimi (piksel ve yüzde), gölge, yatay hizalama ve Class menüsüaracılığıyla CSS uygulamaseçenekleriyeralır. YATAY CETVEL EKLEMEK SAYFAYA İÇERİK EKLEMEK

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

47. Oluşturduğumuzsayfa için son güncellemetarihininotomatik olarak eklenmesinisağlayabiliriz. Bu işlem için InsertaraçubuğundakiCommon menu grubuiçindekiDatedüğmesinetıklamamızyeterlidir. Geçerligün, tarih ve saatgörüntülenecek ve sizbelgeyi her kaydettiğinizdebubilgideğişecektir. OTOMATİK TARİH EKLEMEK SAYFAYA İÇERİK EKLEMEK

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

49. UYGULAMA SAYFAYA İÇERİK EKLEMEK