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

... konulu sunumlar: "Web Editörü Gamze KÜÇÜÇÜKORHAN"— Sunum transkripti:

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

2 BAĞLANTI OLUŞTURMA Web siteleri, metinleri ve resimleri diğer belgelerle bağlama becerilerine sahiptir. Web tarayıcısı, bağlantı olduklarını göstermek için bu bölgeleri belirli bir renkle ya da altçizgiyle vurgulayabilir.

3 BAĞLANTI OLUŞTURMA HTML’de bağlantılar iki parçadan oluşur:
Kendisine bağlanılacak olan dosyanın adı Ve yolu ( URL - Uniform Resource Locator) ile tıklanabilir alan olarak görev yapan metin ya da resimdir.

4 1.Bağlantı Rengini ve Biçimlendirme Özelliklerini Ayarlamak
Sayfanızdaki metin tabanlı bağlantıların varsayılan rengini belirleyebilirsiniz. Belgenizin varsayılan bağlantı özellikleri Page Properties iletişim kutusunda belirtilir. Bağlantıların kolayca okunabilmesi için, seçtiğiniz renklerin arka planla ve diğer elemanlarla kontrast oluşturması gerekir.

5 Modify > Page Properties (Ctrl+J) > Links kategorisini seçeriz
Modify > Page Properties (Ctrl+J) > Links kategorisini seçeriz. Bu uygulamada Link font seçeneğini varsayılan ayarında (Same as page font) bırakmanız gerekiyor.

6 Kullanıcının davranışına göre değişen dört farklı bağlantı durumu için renk tanımlayabilirsiniz:
Link Color: Bağlantının, üzerine tıklanmadan önceki yani başlangıçtaki rengidir. Bağlantılar için kullanılan standart Web tarayıcısı rengi mavidir. Visited Links: Kullanıcı bir bağlantıya tıkladığında bağlantının aldığı renktir. Tıklanmış bir bağlantı için kullanılan standart Web tarayıcısı rengi mordur.

7 Rollover Links: Kullanıcı imleci bir bağlantının üzerinde bir süre tuttuğunda bağlantının aldığı renktir. Bu, bir öğenin tıklanabilir olduğunu gösteren ikinci bir işaret olarak tanımlanabilir.Bu seçenek boş bırakılırsa rollover kullanılmaz. Active Links: İmleç üzerindeyken farenin düğmesine basıldığında bağlantının aldığı renktir.. Bu seçenek boş bırakılırsa etkinlik durumunu göstermek için bir etkin renk kullanılmaz.

8 Onaltılık Tabanlı Renk Kodları
HTML’de renkler RGB (Red/Green/Blue – Kırmızı/Yeşil/Mavi) kullanılarak onaltılık kodlarla tanımlanır. Onaltılık sistemde rakamlar (0-9) ve harfler (A-F) kullanılır.

9 Page Properties iletişim kutusunun Links bölümündeki son seçenek Underline Style’dır. Bu seçeneği, sayfanızda kullanacağınız altçizgi stilini tanımlamak için kullanırsınız.Buradaki uygulamada varsayılan ayar olan Always Underline’ı (Her zaman altını çiz) değiştirmeyin.

10 Bu menüdeki diğer seçenekler Never Underline (Asla altını çizme), Show Underline Only On Rollover (Altçizgiyi sadece rollover durumunda göster) ve Hide Underline On Rollover (Rollover durumunda altçizgiyi gizle). Bütün bağlantılarda görünen varsayılan alt çizgiyi kaldırmak isterseniz Never Underline seçeneğini kullanabilirsiniz.

11 2.Hipermetin Bağlantıları Oluşturmak
Hipermetin bağlantıları (hypertext links) ziyaretçileri, Web sitenizin içindeki belgelere ya da Internet’teki başka sayfalarına yönlendirmenizi sağlar.

12 Properties denetçisinde Link metin alanının sağında yer alan Browse For File düğmesine tıklayın. Link metin alanı Browse For File düğmesiSelect File iletişim kutusu açı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ı çizili olarak ve biraz önce yaptıqımız bağlantılar için seçtiğimiz renkte görünecektir.Bu bağlantı, belgeye bağlı olan ara bir örnektir.

15 3.Bağlantılar ve Dosya Yapısı
Oluşturduğunuz bağlantılar, sitenizin dosya ve klasör yapısına bağlıdır. ../ karakter grubu aslında Web tarayıcısına geçerli konumun bir üstündeki klasör düzeyine gitmesi gerektiğini söyleyen bir komuttur. Geçerli dizinin iki klasör düzeyi üstünde yer alan bir belgeye ait bağlantıda ../../dosyaadı.html şeklinde bir ifade kullanılabilir.

16 4.Bir Siteye Yeni Klasörler ve Dosyalar Eklemek
Site yapısının başlangıçtaki temelini oluşturmak için bir dizi yeni sayfa ve klasör oluşturmanız gerekecektir. Bu işlemi, bir sitenin dosya ve klasör yapısını oluşturmanızı sağlayan Files panelini kullanarak hızlı ve kolay bir şekilde yapabilirsiniz.

17 Files panelindeki Files paneli araç çubuğunda bulunan Expand düğmesine tıklayın. Eğer panellerin arasında Files panelini göremiyorsanız, Window > Files komutunu seçmeniz gerekebilir. Expand düğmesi Yerel ve uzak siteleri görüntülemek için Expand düğmesine tıklayın.

18

19

20 Çeşitli seçenekler içeren bir bağlam menüsü açılacaktır
Çeşitli seçenekler içeren bir bağlam menüsü açılacaktır.Bu menüde sunulan seçenekler, seçilen öğeye bağlı olarak farklılık gösterir. Bağlam menüsünden New Folder komutunu seçin.Links klasörünün içine başlıksız yeni bir klasör eklenecektir.

21

22

23 Eğer istemeden yanlış klasörde bir dosya oluşturduysanız, bağlam menüsünü kullanarak ve Edit > Delete komutunu seçerek bu dosyayı silebilirsiniz. Windows kullanıcıları ayrıca bağlam menüsü dışında Files panelinin üst kısmındaki menüleri de kullanabilir.Bağlam menüsünden New File komutunu seçin.

24 Bağlam menüsünden New File komutunu seçin
Bağlam menüsünden New File komutunu seçin. About klasörünün içinde isimsiz yeni bir belge oluşturulacaktır. İsim alanı vurgulu olarak görüntülenecektir.Bu, söz konusu belge için bir isim girmeniz gerektiğini gösterir. Yeni dosyayı ?.html olarak adlandırın. Files panelinde yeni klasörler oluşturduğunuzda, içlerinde dosya olmadığı sürece bu klasörler açılmayacaktır.

25

26 Projesindeki her sayfa için yer tutucu oluşturma işlemini tamamladınnız.

27 5.Bir Site Haritası Oluşturmak
Site haritası (site map), sitenizin seçilen belirli bir kısmının görsel bir temsilini sunar.Sitenizdeki tüm sayfaları göstermez; ana sayfa (home page) olarak tanımlanan sayfayla başlar ve bu ana sayfanın bağlı olduğu tüm sayfaları gösterir. Bağlantı hiyerarşisinde aşağıya doğru inerek bağlantısı olmayan bir sayfaya ulaşana kadar devam eder.

28 Files panelinde,klasörünüzde yeralan
Files panelinde,klasörünüzde yeralan ?.html dosyasına sağ tıklayın ve açılan bağlam menüsünden Set as Home Page komutunu seçin.(Ana sayfa olacak olan belgeyi seçeriz.)

29 Site haritasını etkinleştirene kadar bu komutun sonucunu göremezsiniz
Site haritasını etkinleştirene kadar bu komutun sonucunu göremezsiniz. Artık ana sayfayı tanımladığınızda göre site haritası görünümüne geçebilirsiniz.Site haritasına bir başlangıç noktası göstermek için bir ana sayfa oluşturmak gerekir.

30

31 Araç çubuğundaki Site Map düğmesine tıklayın.
Files paneli genişletilmiş görünümdeyken Files panelinin menüsünden ya da Files panelinin Options menüsünden View > Site Map Options > Layout komutunu seçerek Map görünümünü ayarlayabilirsiniz.

32 Siz bu komutu seçtikten sonra Site Definition iletişim kutusu açılacaktır.Site Map Layout seçeneklerini görüntülemek için Advanced sekmesine tıklayın.Varsayılan durumda Dreamweaver site haritasını yatay olarak görüntüler.

33 6.Site Haritası Görünümünde Bağlantılarla Çalışmak
Site Haritası Görünümünde Bağlantılarla Çalışmak Files panelindeki site haritası görünümü aracılığıyla bağlantı ekleyebilir ve mevcut bağlantılardan istediklerinizi silebilirsiniz.

34 Bağlı durumdaki bir dosyayı gizlemek ya da görüntülemek için değişiklik yapmak istediğiniz dosyaya sağ tıklayın ve Show/Hide Link komutunu seçin

35 Files panel menüsünden ya da Files panelinin Options menüsünden View > Show Hidden Files komutunu seçerek bütün gizli dosyaları görünür hale getirebilirsiniz

36 Gizli bağlantıları belirtmek için bu dosyaların isimleri italik olarak görüntülenir.Daha sonra gizli dosyalara sağ tıklayarak Show>Hide Link komutunu seçebilirsiniz

37

38 Site Map menüsünden Map and Files komutunu seçin
Site Map menüsünden Map and Files komutunu seçin. Map görünüm panelindeki index.html dosyasını simgesini seçin, Point To File simgesine tıklayın ve Point To File simgesini about klasöründeki index.html dosyasına ait simgenin üzerine sürükleyir.

39

40 Doğru index bağlantısını doğru (kendisine karşılık gelen) bölüme uygulamak için bağlantıları kopyalarken Properties denetçisinde yer alan Link metin alanındaki bağlantı konumunu kontrol ettiğinizden emin olun.

41

42 7.Sitenin Bir Alt Bölümünü Görüntülemek
Hazırladığınız siteler büyüdükçe ve karmaşıklaştıkça site haritası da Files panelinde görüntülenemeyecek kadar büyüyebilir. Bu görüntüyü sadece seçilen sayfa ve bu sayfaya ait bağlantılar görünecek şekilde düzenleyebilirsiniz

43 Files paneli site haritası görünümünde about klasörünün içinde yer alan index. html sayfasını seçin. about klasöründeki index.html belgesini bir alt bölüm olarak görüntülemek, başlangıç noktası olarak about/index.html dosyası kullanılarak erişilebilen bütün sayfalara odaklanmanızı sağlar.

44 Büyük bir siteniz varsa bu yaklaşım işinize yarayabilir.
Files panel menüsünü ya da Files panelinin sağ üst tarafında yer alan Options menüsünü kullanarak View > Site Map Options >View as Root komutunu seçin.

45

46 8.Site Haritasını Kaydetmek
Files panel menüsünü ya da Files panelinin sağ üst kısmında yer alan panel Options menüsünü kullanarak File > Save Site Map komutunu seçin.Save Site Map iletişim kutusu açılacaktır. Böylece site haritasını bir resim olarak kaydedebilirsiniz

47 9.Bağlantı Hedefini Ayarlamak
Kullanıcılar bir bağlantıya her tıkladıklarında, bağlı sayfa genellikle tarayıcıdaki geçerli sayfanın yerini alır. Web tarayıcısına bağlantının nerede görüneceğini bildiren talimat hedef (target) olarak adlandırılır

48 blank: Bağlı belgeyi adlandırılmamış yeni bir tarayıcı penceresinde açar.
parent: Bağlı belgeyi, ebeveyn frameset’te ya da bağlantıyı içeren frame’in penceresinde açar.

49 self: Bağlı belgeyi bağlantıyla aynı pencerede ya da aynı frame’de açar. Bu hedef seçeneği varsayılan seçenekle aynıdır. Bu yüzden çoğunlukla bu seçeneği belirtmeniz gerekmez. top: Bağlı belgeyi tam büyüklükte bir tarayıcı penceresinde açar.Tüm frame’leri siler.

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

51 Bir belge çok uzunsa ya da birden fazla bölümden oluşuyorsa, kullanıcının belge içindeki belirli yerlere atlamasını sağlayan çeşitli bağlantılar oluşturmanız gerekebilir.

52 Bu teknik, kullanıcıları uzun metin pasajlarıyla dolu bir ekranı sürekli kaydırma zorunluluğundan kurtarır. Modify > Page Properties komutunu seçin ve Page Properties iletişim kutusundaki Links kategorisini seçin.

53 Ekleme noktasının belgenin alt kısmında yer alan istediqin bir sözcüğün önüne getirin. Insert araç çubuğundaki Common kategorisinde yer alan Named Anchor düğmesine tıklayın.

54 Named Anchor Named Anchor iletişim kutusu açılacaktır
Named Anchor Named Anchor iletişim kutusu açılacaktır. Insert > Named Anchor komutunu ya da Option+Command+A (Macintosh’ta) veya Ctrl+Alt+A (Windows’ta) klavye kısayolunu kullanarak da isimli bir yer imi ekleyebilirsiniz. Anchor name metin alanına istediğiniz bir kelime yazın ve OK düğmesine tıklayın.

55 İsimde boşluk, noktalama işareti veya özel karakter (telif hakkı sembolü, diyez işareti vs gibi) kullanmayın. Aynı belgede aynı isme sahip birden fazla isimli yer imi asla kullanılmamalıdır.Aksi takdirde Web tarayıcısı kullanıcıyı doğru yer imine götüremez.

56 İsimli yer imi simgesi İsimli yer imi (Named Anchor) simgesini göremiyorsanız View > Visual Aids >Invisible Elements komutunu seçerek Invisible Elements seçeneğinin etkin durumda olduğundan emin olun.

57 Preferences iletişim kutusundaki Invisible Elements kategorisinde Named anchors seçeneğinin de işaretli olması gerekir.Edit > Preferences komutunu seçerek ve Invisible Elements kategorisini işaretleyerek hangi seçeneklerin etkin durumda olacağını belirleyebilirsiniz. Named Anchors kutusunun işaretli olması gerekir.

58

59 Link metin alanına #vinyasa yazın
Link metin alanına #vinyasa yazın.Diyez işaretini (#) kullanmak, Web tarayıcısına bu bağlantının dahili olduğunu bildirmek için gereklidir. Dahili bağlantı kul anıcıyı aynı sayfadaki bir konuma götürür.Diyez işaretinden sonra yazdığınız ismin yer iminin ismiyle tamamen aynı olduğundan emin olun

60

61

62 11.E-posta Bağlantıları Eklemek

63 Bağlantı atanmış bir e-posta adresi vererek ziyaretçilerinizin size bir Web sayfası üzerinden kolayca erişmelerini sağlayabilirsiniz. Her zaman ziyaretçilerin çalıştığınız organizasyondan birileriyle yazışmasını ya da etkileşime girmesini sağlayan bir yöntemdir.

64 Insert araç çubuğundaki Common kategorisinde bulunan Link düğmesine tıklayın ya da Insert > Link komutunu seçin. Link Metin (Text) ve e-posta ( ) seçeneklerini içeren Link iletişim kutusu açılacaktır. Insert araç çubuğu varsayılan durumda açık olmalıdır.

65 Eğer görünmüyorsa bu araç çubuğunu açmak için Window > Insert komutunu seçin ya da panelleri, denetleyicileri ve araç çubuklarını varsayılan konumlarına getirmek için Window > Arrange Panels komutunu seçin.

66 Text metin alanına adınızı yazın
Text metin alanına adınızı yazın. metin alanına e-posta adresinizi yazın ve OK düğmesine tıklayın. Metin sayfada bir bağlantı olarak belirecektir. Siz ekleme noktasını bağlantının içine yerleştirdiğinizde Properties denetçisindeki Link metin alanında “mailto:” ifadesi ve hemen sonra da e-posta adresi görüntülenecektir.

67 12.Bağlantılarla Tek Başınıza Çalışın
Gezinti bağlantıları içeren bir test sitesi oluşturarak site içinde belirli yerlere tıklayıp ziyaretçilerin sitede takip ettikleri yolların çalışıp çalışmadığını görebilirsiniz. Gezinti öğelerini bu aşamada test etmek, geliştirme anlamında çok ilerlemeden gereken ayarlamaları yapmanızı sağlar.