1. Reklam


    1. joysro
      ledas
      jungler
      keasro
      zeus
      karantina

Dreamweaver ile Site Yapımı


  1. Spare_

    Spare_ Bilgiliyim rank8

    Kayıt:
    24 Kasım 2008
    Mesajlar:
    2.811
    Beğenilen Mesajlar:
    0
    Ödül Puanları:
    0
    Meslek:
    Programmer , Desanatör.
    Şehir:
    ^^ T.C / İST ^^
    Site Şablonunu Hazırlama
    Bu sayfada web sitesi şablonunda değişiklikler yaparak sitemizi oluşturmak için website şablonunu nasıl hazırlayacağımızı ve statik web siteleri hakkında genel bilgileri öğreneceğiz.

    Öncelikle zip halindeki web şablonunu zip dosyası içerisinden çıkarıp C diskinde açtığımız bir klasörün içine kopyalıyoruz. Bu klasörün adını Websitem olarak değiştiriyoruz. Aşağıdaki resimde gördüğünüz gibi şablon dosyalarını C diskindeki Websitem klasörüne kopyaladım.


    [​IMG]


    Buradaki Websitem klasörü kök klasör olarak adlandırılır. Diğer bir ifadeyle web sitemizin dosyalarını barındıran en üst seviyedeki klasöre kök klasör veya kök dizin denir. Web sitemiz için kullanacağımız resimler, videolar, müzikler ve diğer dosyalar kök klasör içinde olmalıdır. Eğer sayfalarımıza kök klasör içinde olmayan bir resmi eklersek, sitemizi yayınladığımız zaman düzgün çalışmaz. Çünkü sunucuya sadece kök klasörü göndereceğiz. Şimdi şablondaki dosyalar hakkında kısa bilgiler verelim.

    index.html (veya index.htm) dosyası, .html uzantısı olduğu için web sayfasıdır. Bu web sayfasını yapacağımız sitenin ana sayfası olarak kullanacağız. Çünkü bir siteyi ziyaret ettiğimizde, tarayıcımız (Internet Explorer, Firefox gibi) bize o sitenin index.html sayfasını gösterir. Örneğin bedavasiteyapmak.com adresini ziyaret ettiğinizde bedavasiteyapmak.com/index.html sayfasını ziyaret etmiş olursunuz. O nedenle bu sayfanın adını ve yerini kesinlikle değiştirmeyeceğiz. Sitemizin ana sayfasının sorunsuz açılması için kök dizinde mutlaka bir tane index.html olmalı.

    img: Bu websitesi şablonunu hazırlayan kişi, img klasörünü varsayılan resim klasörü olarak kullanılmış. Şablonda kullandığı resimleri bu klasöre eklemiş. Biz de sitemize ekleyeceğimiz resimleri önce bu klasöre, daha sonra web sayfamıza ekleyeceğiz. İlerleyen derslerde bu klasörün adını resimler olarak değiştireceğiz ama önce sitemizi Dreamweaver'e tanıtmamız gerekiyor. Nedenini ilerleyen derslerde açıklayacağız.

    Source: Bu klasör, şablonda kullanılan logonun yazısız olanını içeriyor. Bu logoyu kullanarak ve üzerine kendi sitemizin adını ve sloganını yazarak web sitemiz için logo oluşturabileceğiz.

    style.css: Bu dosya sitedeki yazı stillerini düzenlemek için kullanılıyor. Biz bu dosyada değişiklik yapmayacağız, bu dosyayı kullanmayacağız. Ancak şablonu hazırlayan kişi bu dosyayı kullanmış olabilir. O nedenle bu dosyayı silmeyeceğiz.​



    Site Tanımlama


    Web sitemizde değişiklik yapabilmek için ve yaptığımız değişikliklerin sorunsuz çalışması için sitemizi Dreamweaver'de tanımlamamız gerekiyor. Bu derste sitemizi nasıl Dreamweaver'e tanıtacağımızı ve bunun ne gibi faydaları olacağını öğreneceğiz.

    Dreamweaver'i açıp en üstteki menüden Site>New Site... butonlarına tıklayalım. Yeni bir pencere açılacak ve buradan sitemizi seçebileceğiz.


    [​IMG]

    Yukarıdaki resimde gördüğünüz gibi ilk olarak pencerenin üstündeki Advanced sekmesine tıklıyoruz (1). Site name bölümüne web sitemiz için bir isim yazıyoruz (2), Local root folder bölümüne sitemizin kök klasörünün olduğu yeri yazıyoruz. (Bu işlemi 3 numaralı klasör simgesine tıklayarak ve sitemizin kök klasörü açıp Select butonuna tıklayarak yapabilirsiniz.) Sitemizin resim klasörünü tanımlamak için 4 nolu klasör simgesine tıklayarak şablonumuzun resim klasörünü seçiyoruz. Ben bu örnekte img klasörünü seçtim. Son olarak OK butonuna tıklıyoruz ve şablonumuzun dosyaları Files Panel'de (dosyalar panelinde) gösteriliyor. Dosya panelinden index.html sayfasına çift tıklayarak sayfayı açıyoruz.

    Türkçe Karakter Ayarı


    Şimdi sitemizdeki ç,ş,ğ,ö gibi Türkçe karakterlerin düzgün çalışması için gerekli ayarları yapalım. En üstteki menüden Edit>Preferences>New Document>Default Encoding>Türkçe(windows) seçip Ok butonuna tıklayalım.​

    [​IMG]


    __________________________________________________________________________


    Şimdi site tanımlamanın ne gibi faydaları olduğuna kısaca değinelim. Web sayfaları html kodlardan oluşur. Bu kodlar sayfanın nasıl görüneceğini belirler. Sayfamıza bir resim eklediğimizde veya sitemizin dosyalarında değişiklik yaptığımızda, Dreamweaver gerekli kodları sayfalara ekler veya gerekli kodlarda değişiklik yapar. Mesela şablonumuzda kullanılan companylogo yazan logo için sayfaya aşağıdakine benzer bir kod eklenmiş.

    <img src="img/templogo.jpg" width="587" height="123">

    Bu kod, logonun img klasöründe olduğunu ve yüksekliği ile genişliğini belirtiyor. Eğer img klasörünün adını resimler olarak değiştirirsek bu kodda da değişiklik yapmamız gerekir. Kodun aşağıdaki gibi olması gerekir.

    <img src="resimler/templogo.jpg" width="587" height="123">

    Eğer img klasörünün adını resimler olarak değiştirirsek ve kodda değişiklik yapmazsak, img adında bir klasör olmadığı için resim bulunamaz, bulunamadığı için de resim gösterilmez. Sitemizi Dreamweaver'e tanıtırsak, dosya isimlerini değiştirdiğimizde bu tür kod değişiklikleri otomatik olarak yapılır ve sitemizdeki resimler sorunsuz bir şekilde gösterilir. Şimdi img klasörünün adını resimler olarak değiştirelim. Dosyalar panelinden img klasörü üzerine bir kere tıklayıp F2'ye basarak veya img klasörüne sağ tıklayıp Edit>Rename seçeneklerine tıklayalım ve klasörün yeni adını yazalım.​


    [​IMG]

    Klasör adını değiştirdiğimizde Dreamweaver gerekli kodlarda değişiklik yapıp yapmayacağını soracak. Update butonuna tıklayarak kodlarda gerekli değişikliğin yapılmasını onaylayabilirsiniz.​


    Yeni Sayfa Oluşturma

    Şimdiye kadar bir sayfayı nasıl değiştireceğimizi öğrendik. Tabloları kullanarak sitemize nasıl içerik ekleyeceğimizi biliyoruz. Şimdi sitemize nasıl yeni sayfalar ekleyeceğimizi öğreneceğiz.

    Yeni bir sayfa oluşturmak için index.html sayfasının bir kopyasını kullanacağız. index.html sayfasının bir kopyasını farklı bir isimle sitemize ekleyeceğiz ve içeriğini değiştireceğiz. Böylece sitemize diğer sayfalarla aynı tasarıma sahip olan ama içeriği farklı olan bir sayfa eklemiş olacağız.

    Yeni sayfa oluşturmak için Files Panel'deki index.html dosyasına sağ tıklayalım ve açılan menüden Edit>Duplicate seçeneğine tıklayalım. Duplicate butonuna tıkladıktan sonra copy of index.html adında yeni bir sayfa sitemize eklenecek. Şimdi yeni sayfanın üzerine sağ tıklayıp Edit>Rename seçeneğine tıklayıp sayfanın adını değiştirelim. Sayfa adında ç,ş,ğ,ö,ü gibi Türkçe karakterler veya boşluk kullanmamaya dikkat edin. Ayrıca sayfa adına .html uzantısı eklemeyi unutmayın. Ben sitemde arabalar.html, cizgi-filmler.html ve oyunlar.html olmak üzere üç tane yeni sayfa oluşturdum.​


    [​IMG]

    Şimdi yapmamız gereken bu sayfaları teker teker açarak index.html sayfası için eklediğimiz içeriği silip yerine yeni içerik eklemek. index.html sayfasında yaptığımız gibi sayfaya yeni tablo ekledim ve tablo hücrelerine küçük resimler ekledim. İşte arabalar.html sayfasının son hali.​


    [​IMG]

    Link Ekleme


    Bir önceki dersimizde sitemize yeni sayfalar eklemiştik. Bu derste ise ziyaretçilerin sayfalarını dolaşabilmesi için link (bağlantı) eklemeyi öğreneceğiz.

    Öncelikle sitenin sol tarafındaki menüyü değiştirerek kategori sayfalarının adlarını yazıyorum. Daha sonra Anasayfa yazısını seçerek (1) Property panelindeki link bölümünde klasör simgesine (2) tıklıyorum. Yeni pencere açılıyor ve buradan link vermek istediğim sayfayı seçiyorum(3). Son olarak OK butonuna tıklıyorum ve böylece linki eklemiş oluyoruz.​


    [​IMG]

    Aynı işlemi tekrarlayarak Arabalar, Çizgi Filmler ve Oyunlar sayfaları için de link ekliyorum. Şimdi yapmamız gereken diğer sayfalara da aynı linkleri eklemek. Aksi halde ziyaretçiler anasayfadan diğer sayfalara gidebilir ancak diğer sayfalara link eklemediğimiz için sitemizi dolaşamazlar. Diğer sayfalara tek tek link eklemek yerine, index.html sayfasındaki menüyü kopyalayıp diğer sayfalara yapıştırabiliriz. (Bu yöntemi sadece aynı klasör içinde bulunan sayfalar için uygulayabilirsiniz. Örneğin resimler klasöründe bir sayfa varsa ve bu linkleri o sayfaya kopyalarsanız, farklı dizinde olduğu için linkler çalışmaz.) Aşağıdaki resimde görüldüğü gibi index.html deki menüyü kopyalayarak diğer sayfalardaki menünün üzerine kopyalayabilirsiniz.

    [​IMG]

    Resim dosyalarını da aynı şekilde link haline getirebiliriz. Link yapmak istediğimiz resmin üzerine bir defa tıklayalım ve Property paneldeki Link bölümüne site adresini yazalım (1) veya klasör simgesini (2) kullanarak link vermek istediğimiz sayfayı seçelim.

    [​IMG]

    Eğer link verdiğimiz sayfanın yeni bir pencerede açılmasını istiyorsak linke target (hedef) özelliği atamamız gerekir. Linki ekledikten sonra Target (3) bölümünden _blank seçersek link eklediğimiz sayfalar yeni pencerede açılır. Küçük resimlere tıklandığında büyük resimlerin açılması için, küçük resimlerden büyük resimlere link verdim ve bu linklere _blank target özelliği atadım. Böylece küçük resimlere tıklandığında büyük resimlerin yeni pencerede açılmasını sağlamış oldum.​


    Evet arkadaşlar bu dersimizde sizlere dreamweaver'le az birşey site yapımını öğrettik umarım yardımcı olmuşumdur.

    DreamWeaver Download​

    Piyasada pek fazla bulunmayan ve yüklenmesi için adobe ana sitesinde üyelik isteyen bu program extraloob farkı ile 37 mb olarak sizlerle, normalde daha fazla boyutu olması lazım fakat dosyayı portable sadece dreamweaver'i verdiğim için ek dosyalara gerek duymadan site tasarlayabilirsiniz.


    Download


    Saygılarımla,
    [​IMG]
     
  2. ozan160

    ozan160 Tanınıyorum rank8

    Kayıt:
    29 Ağustos 2007
    Mesajlar:
    454
    Beğenilen Mesajlar:
    0
    Ödül Puanları:
    0