Dreamweaver’da Basit Web Sitesi Yapımı



WeBeyn Mobil Platformlarda
Android uygulamamız Windows Phone uygulamamız Yakında!
Dreamweaver -

Merhabalar.
Dreamweaver’da basitinden bir web sitesi yapımını göreceğiz. Bunun için çerçeveleri (frameset) kullanacağız.

– Dreamweaver’ı açtıktan sonra, yukarıdaki menüden File – > New seçiyoruz.
– General bölümüne geliyoruz.
– Framesets yazısına tıklayıp yandaki çerçevelerden hoşumuza gideni seçiyoruz.
– Çerçevelerimiz oluştu.
– Çerçeve çizgilerinden herhangi bir tanesine tıklayıp, Properties’ten border’ını ve kalınlığını ayarlayabilirsiniz.
– Temel ayarları yaptıktan sonra yani resimlerimizi vs. ayarladıktan sonra, File menüsünden Save All diyoruz.
– İsmine index.html diyoruz.
– Arkasından bir daha kayıt etme penceresi gelecek. Hangi çerçeveyi kaydetmenizi söylüyorsa o çerçevenin etrafı seçili olur. Mesela sol taraftaki çerçeveyi kaydetmeyi soruyorsa sol çerçevenin etrafı seçili olur. Sol.html diye kaydedin..
– Sağ taraftakini ise sag.html , üst taraftakini ust.html alt taraftakini alt.html yazın. Ortası için ise orta.html yazın.(Eğer çerçevenizde sol, sağ, üst ve alt bölümlerden hangileri varsa tabi..)
– Diyelim ki menünüzü sol tarafa eklediniz. Üst tarafada logo eklediniz. Orta alanda sayfaları göstermek istiyorsunuz, yani sayfaların orada değişmesini istiyorsunuz diyelim.
– Bunun için, orta.html dosyasını dreamweaver’da açmamız gerek.
– Orta.html yi açtığınızda diğer çerçeveler gözükmez çünkü hepsi birbirinden bağımsız yani ayrı.
– Sayfanızda gözükecekleri orta.html ye ayarladıktan sonra File menüsünden Save As yani Farklı Kaydet ile başka bir isimle kaydedin. Örneğin fazladan iletisim sayfası oluşturacaksınız, iletisim.html olarak kaydedin..
– Ve index.html dosyasını dreamweaver’da açın, menünüzde iletişim butonu için iletisim.html sayfasına link vereceksiniz diyelim. İletisim butonuna tıklayıp Properties’ten verebilirsiniz..

Aşağıda videoda yaptığımız örnek çalışmayı görebilirsiniz.

Ayrıca aynı mantık ile oluşturduğumuz siteyi görmek için: buraya tıklayarak simsekfidancilik.com ‘ u görebilirsiniz.

Videolu Anlatım

Bu videoyu bilgisayarınıza indirmek için buraya tıklayın.

Yorumlar

  1. Bu şekilde anlatılanları yapamıyosanız bu işle uğraşmayın zaten 🙂 (tahaburak)
    Gerçekten güzel ve yararlı işler yapmaktasınız. Teşekkürler.

    Thumb up 0 Thumb down 0

  2. AloneDesigner

    Teşekkürlerde tr.gg İçin ‘Tasarımın Üzerindeki Kod’ ‘Tasarımın Altındaki Kod’ Ve ‘Css Koduna’ Yazıyor Bunları Nasıl Ayırıcağız.?

    Thumb up 0 Thumb down 0

  3. AloneDesigner

    Merhaba Yine Ben 😀
    Yha Sen Buton2’yi Tıklayınca Başka Sayfa Açılıyor Yha Orayı Yaptım Ama Bu İnternete Koydumu Gözükmüyor. Çünkü Benim Pcde olan Dosyayı Net Görmüyor Fotoda Öle Ama Fotoyu Siteye Upload Ediyorum Böylelikle Resmi Görüyor Peki Yha Dosyayı Ne Yapacam?
    Şimdiden Teşekkürler.

    Thumb up 0 Thumb down 0

    • Merhaba.
      Olmaması gayet normal çünkü internete verince sizin bilgisayarınızdaki bir dosyayı nasıl bulsun ki? 🙂 Onun için; buton resminin yolunu ayarlarken pc’den değilde upload edip aldığınız linki yazın.

      Thumb up 3 Thumb down 0

    • Merhaba,
      Bu daha farklı, facebook sayfalarındaki 🙂 Bunu nasıl dreamweaver’da yapabiliriz pek bilgim yok.

      Thumb up 3 Thumb down 1

  4. Merhaba webeyn sakinleri 😀
    Yine yine ben ama bu sefer derslerle ilgili değil bu sizin temayı nerden indirebilirim? 😀
    Görüşleriniz benim için değerlidir. 😀

    Thumb up 0 Thumb down 0

  5. Selamlar , bilmeyenler için hakikaten güzel bilgiler . Bundan sonra buralarda takılıyorum . Senide bana beklerim kardeş 🙂 .

    Cresta r10 .

    Thumb up 0 Thumb down 0

  6. Web tasarımı dersimiz var ve hoca hiç bir şey anlatmadı kendiniz öğrenin dedi. Bende nereden başlayacağımı bilemiyordum. Uzun aramalar sonucunda bu videoyu izledim ve moralim yerine geldi. En azından nereden başlayacağımı biliyorum. Çok teşekkürler, emeğinize sağlık…

    Thumb up 0 Thumb down 0

  7. Uğraş verip böyle bir video yayınladığınız için teşekkürler. Yeni başlayanlar için böyle basit pratik bilgiler veren videolar yayınlarsanız çok memnun olurum. Kolay gelsin.

    Thumb up 0 Thumb down 0

  8. hocam merhaba,
    Bu şekilde bir tasarım yaptıktan sonra bunu blogger da kullandığım bir siteye enteğre edebilirmiyim. Edebiliyorsam biraz bilgi verirseniz sevinirim.

    İyi Çalışmalar…

    Thumb up 0 Thumb down 0

    • Atakan

      Merhaba,
      Blogger ile ilgili maalesef bilgimiz yok.
      İyi çalışmalar, yorumunuz için teşekkürler.

      Thumb up 1 Thumb down 0

  9. gerçekten faydalı bi site bana hocalarım bu konuyu 3 ay boyunca anlattı hocaları sevmediğimden üzerine olmadım ben sevmedıgım ıcın hocada benı sevmedı dersten bıraktı yazında sınavlara gırmedım 😀
    şimdi lise sondayım yarın ki sınavda bu örnekle okulun sitesini yapıp göz boyuyacagım ve benı geçirecek
    yaşadıklarımı anlatmamın sebebi şurda cektıgınız 10 dk lık vıdeo nun ne kadar faydalı oldugunu göstermekti
    gerçekten teşekkürler 🙂

    Thumb up 0 Thumb down 0

    • Properties’teki “Page Properties” bölümüne girerek arkaplan ile ilgili ayarları yapabilirsiniz.

      Thumb up 1 Thumb down 0

  10. direk veri tabanıundan yapmak yerine bunu kullanmak çok daha iyi bence . ve sitede kasma sorununu azaltacağından eminim elinize sağlık.

    Thumb up 0 Thumb down 0

  11. çok sağolun işime çok yaradı ama biz bilgisayarcıyız ve daha fazlasını istiyoruz eğer varsa daha fazlası sizde yayınlarmısınız:)

    Thumb up 0 Thumb down 0

    • İşinize yaramasına sevindik. Maalesef şu sıralar Dreamweaver ile ilgili içerik yayınlamıyoruz 🙂 Mevcut içeriklerimize her zaman ulaşabilirsiniz.
      Teşekkürler.

      Thumb up 1 Thumb down 0

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.