Ana Menü

Web Tasarım Ücretsiz Web Sitesi Nasıl Yapılır?

İnternet sektörünün bu kadar geliştiği ve gelişmeye devam ettiği şu zamanlarda web sitesi sahibi olmak zorunlu hale geldi. Evet ama nasıl web sitesi sahibi olacağız?

Bununla ilgili pek çok makale yazdım. Web sitesinin nasıl yapılacağı konusu gün geçtikçe daha kolay hale gelmesi nedeniyle devamlı yeni makale yazmak zorunda kalıyorum. Geçenlerde denk geldiğim bir hizmet var. Weebly “Bedava web sitesi hizmeti”. Girip deneme sürüşleri yaptım beğendim. Kullanımı kolay ve çok hızlı.

Size web alanı, domain ve web sitesi yapma hizmeti veriyor. Microsoft Word kullanabiliyorsanız bu işi sizde yapabilrisiniz. Sitenizi sistemle birlikte tasarlıyorsunuz. Size hazır şablonlar da veriyor. Sizin yapmanız gereken neyin nereye geleceğini belirlemek.

Bu sistemde hazırlanmış bir kaç ten web sitesi örneği,

Örnek 1
Örnek 2

İşe başlamak için bir adet e-mail adresine ihtiyacınız. Bunu temin ederseniz tasarım işimize başlayabiliriz.

1. http://www.weebly.com/ adresine giriş yapalım ve ana sayfada bulunan kayıt formunu dolduralım.

 

 

Buraya isminizi

Buraya e-mail adresinizi

Buraya şifremizi yazalım

Sing Up. It’s Free tuşuna basalım.

 

 

 

 

 

Gelen bu sayfa güvenlik tedbiri olarak bize bir işlem yaptıracak.

Bize yanyana iki tane ingilizce kelime verecek biz bu kelimeleri hemen altta ki alana gireceğiz.

Kelimeleri girdikten sonra OK, let’s go! tuşuna basıyoruz.

 

 

 

”Site
Yeni gelen pencerede sitemizin ismini ve türünü belirliyoruz.

Yukarda resimde gördüğünüz gibi sitemin ismini “Delinetciler Emlak” olarak belirledim.

Type of Site yazan yerin karşısından sitemin türünü seçtim. (İş amaçlı)
Hemen altından Category yazan yerden de sitemin emlak sitesi olduğunu seçtim.

Son olarak Continue tuşuna bastım.

”URL
Yeni gelen ekranımız url belirleme ekranıdır. Yani sitemizin adresi nasıl olacak. İsteseniz sistemin size verdiği bedava domaini (domain:Site adresi. Örnek:www.delinetcileremlak.weebly.com)alabilirsiniz. İsterseniz ücretiyle domain alıp kullanabilirsiniz.

Ücretli domain ile ücretsiz domain arasında ki fark nedir?

Ücretsiz domain de domainin sonunda bir firmanın kısa ismi olur. 
Şu şekilde : www.delinetcileremlak.weebly.com (Kırmızı ile belirttiğim isim bize verilen hizmet karşılığında bizde onların reklamını yapmış oluyoruz.)

Bu seçenek bedava. İstediğimiz url’yi yazıyoruz.

Bu seçenek ücretli.

Eğer hali hazırda domainniniz varsa buraya yazarak kullanabilirsiniz.

Bu işlemi yaptıktan sonra Continue tuşuna basıyoruz.

”Dizayn
Sayfamızı dizayn edeceğimiz kontrol panelimiz açıldı. Yukarda belirttiğim işlemlerde sorun çıkmadıysa aşağıda gösterdiğim sayfanın açılmış olması gerekmektedir.

Bu ekran tasarım ekranımızdır. Sonraki sayfada bu ekranın nasıl kullanılacağını, simgelerin ve araç çubuklarının ne işe yaradıkalarını anlatacağım.

”Tasarım
Tasarım ekranımız ilk bakışta biraz karışık gelse de aslında çok kolay biğr kullanımı var. Tek tek bölümleri inceleyelim.


İlk kısım burası. Bu bölümde 4 seçenek bulunmakta.

Basic, Multimedia, Revenue,More
Web sitemizi yaparken kullanacağımız resim, yazı, animasyon,form,video içeriklerinin her birine kompenent diyoruz. Komponentlerin bir arada bulundukları çubuklara da araç çubuğu diyoruz.

İşte bu bölümde 4 adet araç çubuğumuz var. İlk basic. Resim,yazı,video gibi kompenentlerimiz var. 

Basic araç çubuğundaki kompenentler

İkincisi Multimedia araç çubuğu. Bu araç çubuğunda biraz daha gelişmiş kompenentler var.
Multimedia araç çubuğundaki kompenentler

Gördüğünüz gibi bu araç çubuğunda youtube video, slide show, fotoğraf galerisi gibi gelişmiş kompenentler bulunmakta.

Diğer iki çubuk şuan işimize yaramayacağı için geçiyorum. Siz ilk iki araç çubuğunu tam olarak öğrendiğinizde diğer ikisinde kullanmaya başlayabilirsiniz.

”Tasarım
Tasarım ekranımızı incelemeye devam edelim.

Diğer bölüm sayfanın en yukarısındaki araç çubuğu.

Bu bölümün kısımlarını inceleyelim.

Elements: Araç çubuklarının bulunduğunu kısım.
Design: Hazır şablonların bulunduğu kısım. Bu kısımda hazır şablonlar bulunmaktadır. Bunlardan birini seçip web sayfamızı bu şablonun üzerine kurabiliriz. Girip incelediğinizde tam olarak anlayacaksınız.

Örnek görüntü

Pages: Bu bölümden web sitemize yeni sayfalar ekleyebiliyoruz. 

Sağ tarafta bulunan Add Page tuşuna basarsanız sol tarafa yeni sayfa gelir sizden sayfanın ismini sorar. İsim girip Save tuşuna bastığınız web sayfanızın ana menüsünde bu sayfanın linki görünür. İlerde bu bölüme tekrar gireceğiz.

Editörs: Bu kısımdan web sayfanıza editör ekleyebilirsiniz. Admin, yazar, okuyucu gibi. Yani sitenizi iki arkadaş yapabilirsiniz. İstediğiniz kişiye yöneticilik (adminlik) vereiblirsiniz.

Settings: Bu kısımdan sitenizin ana ayarlamalarını yapabilirsiniz. Site ismi, alt kısım açıklaması, şifre, e-mail vs ayarlamaları buradan yapacaksınız.

”Şablon
Design kısmına gelelim ve yukarda bulunan hazır şablonlardan birini seçelim. Zamanımız bol olduğu için hepsini tek tek kontrol edebilirsiniz. 

Örnek görüntü


Gördüğünüz gibi Design kısmına girdiğimde Design yazısının hemen altında ufak kareler halinde bir sürü resim çıktı. Bunlar hepsi ayrı ayrı şablondur. Üzerlerine tıkladığınızda hemen altta bulunan web sayfanızın önizleme resminin değiştiğini göreceksiniz. Buradan beğendiğiniz web sitesi şablonunu seçip sitemizi bu şablon üzerine kuracağız.

Şuan boş olmaları sizi yanıltmasın. Sitemizi yaptıkça içerik ekledikçe çok güzel bir görüntüye sahip olacak bu şablonlar.

Şimdi bir şablon seçelim. Seçtiğimiz şablonun gövde resminin üzerinin üzerine faremizi getirdiğimizdeEdit Image butonunun çıktığını göreceksiniz. Bu butona basarsanız şöyle bir ekran geldiğini göreceksiniz.

Bu ekranı kullanarak gövde resminin boyutlarını ayarlayabilirsiniz. Resmi değiştirebilirsiniz. Resme efekt verebilir, yazı ekleyebilir, evirip çevirebilrisiniz.

Yeni resim eklemek için sayfanın sol üstünde bulunan Add Image
butonuna tıklayın.

Yeni bir pencere açılacak. Açılan bu pencereyi kullanarak web sitemize resim ekleyebileceğiz.

”Resim
Bu sistemde resim ekleme işini çok kolay hale getirmişler. Add Image resim ekleme butonudur. Bu butona tıkladığımız şu pencere karşımıza çıkacak.

Bu pencerede buluna seçenekleri tek tek yazıyorum

My Computer : Bu seçeneğe tıkladığınızda pencereninin ortasında Click to upload a file forum your computer yazar. (Yukarda göründüğü gibi). Bu tuşa tıkladığınızda bilgisayarınızdaki bir resmi sisteme yükleyebilirsiniz.

Search: Sistemde hazır yüklü olan bir resmi kullanabilrisiniz.

Image Url: Url si yazdığınız bir resmi sistem kendi içine yükler. 

İşlem bitince Save tuşuna basıp kayıt ediyoruz.

”Kompenentleri
Şablonuzumu seçtik. Şimdi kompenentleri yerleştirelim. Ben şimdilik ana gövde resmini değiştirmiyorum. Çünkü emlak sitesi için uygun sablon seçtiğimden resimde emlak işiyle ilgili çıktı.

Elements kısmına geliyorum Basic araç çubuğunda “Two Column Layout” kompenentine tıkladım sürekleyip gövde resmini altına yerleştirdim. Bu sayede iki adet kolonum oldu.


Sol kolona “Paragraph with Picture” yerletirdim. 

Görünüşü şu şekildedir. 

Buraya “Misyonumuz” yazdım.

Sample Image
Click Here to Edit
Yazan mavi rekli bölüm resim bölümüdür. Üzerine tıkladığımda resim ekleme paneli çıkar. Yukarda anlattığım resim ekleme penceresi.

O penrecereyi kullanarak bir resim ekledim. Sağınada kısa bir yazı ekledim. 

Sonuç olarak şu görüntüye kavuştum. 

Siz başka yazı başka resim kullanabilirsiniz.

Kolonumun sol tarafına video olarak youtube yüklediğim tanıtım videom ekleyeceğim.

Bunun için Multimedia araç çubuğumdan Youtube Video kompenentini farem ile tutup sürekleyip sol kolonuma yerleştiriyorum.

Görüntü şu şekilde olacak

Gördüğünüz gibi sol tarafa youtube videsu geldi.

Peki kendi videomuzu nasıl göstereceğiz?

Ekranda ki videonun üzerine bir kere tıklayın sayfanın üst ortasında şu çubuk çıkacak.

Yukarda gördüğünüz çubuk çıkınca şu işlemi yapacaksınız.

Youtube.com sitesine girip kendi videonuzun yotube linkini koplayayıp çubuğun üzerindeki Youtube Video URL yazan yere yapıştırcaksınız.

Sonuç olarak web sayfamınızın görünümü şöyle olacak,

”Sitemize
Ana sayfamızın tasarımı bu kadar. Siz daha fazla kompenent ekleyebilirsiniz. Benim sitemin ana sayfası bu şekilde. Sol yukarda bulunan “Home” yazısınıda “Pages” bölümüne girip “Ana Sayfa” olarak değiştirdim.

Şimdi web sitemize İletişim sayfası ekleyelim.

Bunun için “Pages” bölümğne girelim Sol bölümden “Add Page” tuşuna basalım. “New Page” yazan yeri “İletişim” olarak değiştirelim “Save Setting” tuşuna basalım.

Ana menümüze “İletişim” linkinin eklendiğini göreceksiniz.

İletişim linkine tıkladığımızda sadece gövde resmi olan bir sayfa açılacaktır.

Gövde resminin altına “Contact Form” kompenentini ekleyeniz. 

Aşağıda göründüğü gibi olacak.

Kompenentin üzerine çift tıklarsanız “Contact Form” kompenentinin özellikleri açılır. Buradan “Name, Email, Comment, Submit” tüm yazıları türkçeye çevirebilirsiniz.

Bu sayfayı dileğinizi gibi tasarlayabilirsiniz.

Tasarımınız bitince sağ üstte bulunan “Publish” tuşuna basarak web sayfanızı yayınlayabilrisiniz.

Sayfanızı tekrar tasarlamak istediğinizde yada yeni sayfa eklemek istediğinizde www.weebly.com girin,Login In kısmından kontrol panelinize giriş yapın.

Bu şekilde istediğiniz kadar sayfa ekleyebilirsiniz. Hazırladığım örnek sayfayı görmek isterseniz buraya tıklayınız.

Yorum Yap