Web Editörü Gamze KÜÇÜÇÜKORHAN

1. BAĞLANTI OLUŞTURMA Web Editörü Gamze KÜÇÜÇÜKORHAN

2. BAĞLANTI OLUŞTURMA • Web siteleri, metinleriveresimleridiğerbelgelerlebağlamabecerilerinesahiptir. • Web tarayıcısı, bağlantıolduklarınıgöstermekiçinbubölgeleribelirlibirrenkleyadaaltçizgiylevurgulayabilir.

3. BAĞLANTI OLUŞTURMA • HTML’debağlantılarikiparçadanoluşur: • Kendisinebağlanılacakolandosyanınadı • Ve yolu ( URL - Uniform Resource Locator) iletıklanabiliralanolarakgörevyapanmetinyadaresimdir.

4. 1.BağlantıRenginiveBiçimlendirmeÖzellikleriniAyarlamak • Sayfanızdakimetintabanlıbağlantılarınvarsayılanrenginibelirleyebilirsiniz. • BelgenizinvarsayılanbağlantıözellikleriPage Propertiesiletişimkutusundabelirtilir. • Bağlantılarınkolaycaokunabilmesiiçin, seçtiğinizrenklerinarkaplanlavediğerelemanlarlakontrastoluşturmasıgerekir.

5. Modify > Page Properties(Ctrl+J) >Linkskategorisiniseçeriz. Bu uygulamadaLink font seçeneğinivarsayılanayarında (Same as page font)bırakmanızgerekiyor.

6. Kullanıcınındavranışınagöredeğişendörtfarklıbağlantıdurumuiçinrenktanımlayabilirsiniz:Kullanıcınındavranışınagöredeğişendörtfarklıbağlantıdurumuiçinrenktanımlayabilirsiniz: • Link Color:Bağlantının, üzerinetıklanmadanöncekiyanibaşlangıçtakirengidir. Bağlantılariçinkullanılanstandart Web tarayıcısırengimavidir. • Visited Links:Kullanıcıbirbağlantıyatıkladığındabağlantınınaldığırenktir. Tıklanmışbirbağlantıiçinkullanılanstandart Web tarayıcısırengimordur.

7. Rollover Links:Kullanıcıimlecibirbağlantınınüzerindebirsüretuttuğundabağlantınınaldığırenktir. Bu, biröğenintıklanabilirolduğunugösterenikincibirişaretolaraktanımlanabilir.Buseçenekboşbırakılırsa rollover kullanılmaz. • Active Links:İmleçüzerindeykenfarenindüğmesinebasıldığındabağlantınınaldığırenktir.. Bu seçenekboşbırakılırsaetkinlikdurumunugöstermekiçinbiretkinrenkkullanılmaz.

8. OnaltılıkTabanlıRenkKodları • HTML’derenkler RGB (Red/Green/Blue – Kırmızı/Yeşil/Mavi) kullanılarakonaltılıkkodlarlatanımlanır. Onaltılıksistemderakamlar (0-9) veharfler (A-F) kullanılır.

9. Page Properties iletişimkutusununLinks bölümündeki son seçenekUnderline Style’dır.Bu seçeneği, sayfanızdakullanacağınızaltçizgistilinitanımlamakiçinkullanırsınız.BuradakiuygulamadavarsayılanayarolanAlways Underline’ı (Her zamanaltınıçiz) değiştirmeyin.

10. Bu menüdekidiğerseçeneklerNever Underline(Aslaaltınıçizme), Show Underline Only On Rollover(Altçizgiyisadece rollover durumundagöster) veHide Underline On Rollover(Rollover durumundaaltçizgiyigizle). Bütünbağlantılardagörünenvarsayılan alt çizgiyikaldırmakistersenizNever Underlineseçeneğinikullanabilirsiniz.

11. 2.Hipermetin BağlantılarıOluşturmak • Hipermetinbağlantıları (hypertext links) ziyaretçileri, Web siteniziniçindekibelgelereyadaInternet’tekibaşkasayfalarınayönlendirmenizisağlar.

12. Properties denetçisinde Link metinalanınınsağındayeralanBrowse For Filedüğmesinetıklayın. Link metinalanı Browse For File düğmesiSelect File iletişimkutusuaçılacaktır.

13. Birde çok daha detaylı linkler yaratabilmek için; Insert / Hyperlink menüsünü kullanabilirsiniz. Açılan iletişim penceresinden bir link için yapabileceğiniz en detaylı ayarları gerçekleştirebilirisiniz. (kendi web sayfalarında yine kendi web sitelerine gitmek.) • Gelişmiş link ekleme iletişim penceresi.

14. Bağlantıaltıçiziliolarakvebiraz önce yaptıqımızbağlantılariçinseçtiğimizrenktegörünecektir.Bubağlantı, belgeyebağlıolanarabirörnektir.

15. 3.Bağlantılar veDosyaYapısı • Oluşturduğunuzbağlantılar, sitenizindosyaveklasöryapısınabağlıdır. • ../ karaktergrubuaslında Web tarayıcısınageçerlikonumunbirüstündekiklasördüzeyinegitmesigerektiğinisöyleyenbirkomuttur. • Geçerlidizininikiklasördüzeyiüstündeyeralanbirbelgeyeaitbağlantıda ../../dosyaadı.html şeklindebirifadekullanılabilir.

16. 4.Bir SiteyeYeniKlasörlerveDosyalarEklemek • Site yapısınınbaşlangıçtakitemelinioluşturmakiçinbirdiziyenisayfaveklasöroluşturmanızgerekecektir. Bu işlemi, birsitenindosyaveklasöryapısınıoluşturmanızısağlayanFilespanelinikullanarakhızlıvekolaybirşekildeyapabilirsiniz.

17. Files panelindeki Files paneliaraççubuğundabulunanExpanddüğmesinetıklayın. Eğerpanellerinarasında Files panelinigöremiyorsanız, Window > Files komutunuseçmenizgerekebilir. Expand düğmesiYerelveuzaksitelerigörüntülemekiçin Expand düğmesinetıklayın.

20. Çeşitliseçenekleriçerenbirbağlammenüsüaçılacaktır.Bumenüdesunulanseçenekler, seçilenöğeyebağlıolarakfarklılıkgösterir. Bağlammenüsünden New Folder komutunuseçin.Linksklasörününiçinebaşlıksızyenibirklasöreklenecektir.

23. Eğeristemedenyanlışklasördebirdosyaoluşturduysanız, bağlammenüsünükullanarakveEdit > Deletekomutunuseçerekbudosyayısilebilirsiniz. • Windows kullanıcılarıayrıcabağlammenüsüdışında Files panelininüstkısmındakimenüleri de kullanabilir.BağlammenüsündenNew Filekomutunuseçin.

24. BağlammenüsündenNew Filekomutunuseçin. About klasörününiçindeisimsizyenibirbelgeoluşturulacaktır. İsimalanıvurguluolarakgörüntülenecektir.Bu, sözkonusubelgeiçinbirisimgirmenizgerektiğinigösterir. Yenidosyayı?.html olarakadlandırın. Files panelindeyeniklasörleroluşturduğunuzda, içlerindedosyaolmadığısürecebuklasörleraçılmayacaktır.

26. Projesindeki her sayfaiçinyertutucuoluşturmaişleminitamamladınnız.

27. 5.Bir Site Haritası Oluşturmak • Site haritası (site map), sitenizinseçilenbelirlibirkısmınıngörselbirtemsilinisunar.Sitenizdekitümsayfalarıgöstermez; anasayfa (home page) olaraktanımlanansayfaylabaşlarvebuanasayfanınbağlıolduğutümsayfalarıgösterir. Bağlantıhiyerarşisindeaşağıyadoğruinerekbağlantısıolmayanbirsayfayaulaşanakadardevameder.

28. Files panelinde,klasörünüzdeyeralan?.html dosyasınasağtıklayınveaçılanbağlammenüsünden Set as Home Page komutunuseçin.(Ana sayfa olacak olan belgeyi seçeriz.)

29. Site haritasınıetkinleştirenekadarbukomutunsonucunugöremezsiniz. Artıkanasayfayıtanımladığınızdagöre site haritasıgörünümünegeçebilirsiniz.Siteharitasınabirbaşlangıçnoktasıgöstermekiçinbiranasayfaoluşturmakgerekir.

31. AraççubuğundakiSite Map düğmesinetıklayın. • Files paneligenişletilmişgörünümdeyken Files panelininmenüsündenyadaFilespanelininOptionsmenüsündenView > Site Map Options > Layoutkomutunuseçerek Map görünümünüayarlayabilirsiniz.

32. SizbukomutuseçtiktensonraSite Definitioniletişimkutusuaçılacaktır.Site Map LayoutseçeneklerinigörüntülemekiçinAdvancedsekmesinetıklayın.Varsayılandurumda Dreamweaver site haritasınıyatayolarakgörüntüler.

33. 6.Site Haritası Görünümünde Bağlantılarla Çalışmak • Site HaritasıGörünümündeBağlantılarlaÇalışmak Files panelindeki site haritasıgörünümüaracılığıylabağlantıekleyebilirvemevcutbağlantılardanistediklerinizisilebilirsiniz.

34. BağlıdurumdakibirdosyayıgizlemekyadagörüntülemekiçindeğişiklikyapmakistediğinizdosyayasağtıklayınveShow/Hide Linkkomutunuseçin

35. Files panel menüsündenyada Files panelinin Options menüsündenView > Show Hidden Files komutunuseçerekbütüngizlidosyalarıgörünür hale getirebilirsiniz

36. Gizlibağlantılarıbelirtmekiçinbudosyalarınisimleriitalikolarakgörüntülenir.DahasonragizlidosyalarasağtıklayarakShow>Hide Linkkomutunuseçebilirsiniz

38. Site Map menüsünden Map and Files komutunuseçin. Map görünümpanelindeki index.html dosyasınısimgesiniseçin, Point To File simgesinetıklayınve Point To File simgesini about klasöründeki index.html dosyasınaaitsimgeninüzerinesürükleyir.

40. Doğru index bağlantısınıdoğru (kendisinekarşılıkgelen) bölümeuygulamakiçinbağlantılarıkopyalarken Properties denetçisindeyeralan Link metinalanındakibağlantıkonumunukontrolettiğinizdeneminolun.

42. 7.Sitenin Bir Alt Bölümünü Görüntülemek • Hazırladığınızsitelerbüyüdükçevekarmaşıklaştıkça site haritasıda Files panelindegörüntülenemeyecekkadarbüyüyebilir. Bu görüntüyüsadeceseçilensayfavebusayfayaaitbağlantılargörünecekşekildedüzenleyebilirsiniz

43. Files paneli site haritasıgörünümünde about klasörününiçindeyeralan index. html sayfasınıseçin. about klasöründeki index.html belgesinibir alt bölümolarakgörüntülemek, başlangıçnoktasıolarak about/index.html dosyasıkullanılarakerişilebilenbütünsayfalaraodaklanmanızısağlar.

44. Büyükbirsitenizvarsabuyaklaşımişinizeyarayabilir. • Files panel menüsünüyada Files panelininsağüsttarafındayeralan Options menüsünükullanarak View > Site Map Options >View as Root komutunuseçin.

46. 8.Site Haritasını Kaydetmek • Files panel menüsünüyada Files panelininsağüstkısmındayeralan panel Options menüsünükullanarakFile > Save Site Mapkomutunuseçin.Save Site Map iletişimkutusuaçılacaktır. Böylece site haritasınıbirresimolarakkaydedebilirsiniz

47. 9.Bağlantı Hedefini Ayarlamak • Kullanıcılarbirbağlantıya her tıkladıklarında, bağlısayfagenellikletarayıcıdakigeçerlisayfanınyerinialır. • Web tarayıcısınabağlantınınneredegörüneceğinibildirentalimathedef (target) olarakadlandırılır

48. blank: Bağlıbelgeyiadlandırılmamışyenibirtarayıcıpenceresindeaçar. • parent: Bağlıbelgeyi, ebeveynframeset’teyadabağlantıyıiçerenframe’inpenceresindeaçar.

49. self: Bağlıbelgeyibağlantıylaaynıpenceredeyadaaynıframe’deaçar. Bu hedefseçeneğivarsayılanseçenekleaynıdır. Bu yüzdençoğunluklabuseçeneğibelirtmenizgerekmez. • top: Bağlıbelgeyi tam büyüklüktebirtarayıcıpenceresindeaçar.Tümframe’lerisiler.

50. 10.İsimli Yer İmleri Eklemek ve Bunlara Bağlantı Atamak