Kendi BedavA Web SiteniZi KuruN = Mukemmel Anlatım Alıntı Degıl (Sıtede Ilk Defa)+rep

mertcan9414

Katılımcı Üye
24 Tem 2007
929
42
115
Seni İzliyor ...
Web Sitesi Yapmak

Web site yapmak istiyorsanız ve nereden başlayacağınızı bilmiyorsanız doğru adresdesiniz. Web site yapmak için ihtiyaç duyacağınız programlar ve bilgilere bu sayfadan ulaşabileceksiniz. Uygulamalı olarak göstereceğim adımları izlediğiniz takdirde sizin de kaliteli bir web site sahibi olacaksınız. Ayrıca webmaster olmak için ilk adımları atacaksınız.



Site Tasarımı ve İçeriği

Sitenizin konusu, içeriği ve tasarımı ziyaretçi sayısını etkileyen en önemli etkendir. O yüzden konu, içerik ve tasarım belirlemek sanılandan daha ciddi bir iştir ve site yapmanın en önemli adımıdır.
Ön Hazırlık

Site yapımına başlamadan önce ne sitesi yapacağınıza karar verin ve yeterli içerik oluşturun. Kolay gibi görünse de web sitesi yapmak isteyenlerin çoğu hazırlık yapmadan site yapımına başladığı için zaman kaybediyor, zorluklar yaşıyor. O nedenle ön hazırlığınızı tamamlamanız, sitenizin planı, tasarımı ve içeriğini önceden oluşturmanız yararınızadır.
Site Konusu

İnternetteki binlerce websitesi birbirleri ile yarış halindeler. Her site arama motorlarındaki sıralamasını artırıp daha çok ziyaretçiye ulaşmaya çalışıyor. Bu durumda yeni açılan sitelerin üst sıraları alması ve ziyaretçi çekmesi zorlaşıyor. Üst sıralara çıkıp kolayca ziyaretçi çekmek istiyorsanız farklı konusu ve içeriği olan bir web sitesi açmalısınız. Örneğin arabalar hakkında site açmak yerine yerli arabalar veya modifiyeli arabalar gibi alt kategorilerden siteler açarsanız hedeflediğiniz ziyaretçilere daha kolay ulaşırsınız. Ayrıca çeşitli konular yerine tek konusu olan siteler daha başarılı olur. Örneğin hem download yapıp, hem bilgisayarlar hem arabalar hakkında bilgiler bulabileceğiniz web siteleri var. Ama download sitesi dendiği zaman akla sadece bir veya iki site gelir.
Hazır Web Sitesi Tasarımları - Şablonlar

Sitenizin tasarımına zaman harcamak istemiyorsanız veya iyi tasarım yapamayacağınızı düşünüyorsanız hazır site şablonlarını kullanabilirsiniz. Hazır site şablonları, iyi tasarım yapan kişilerin hazırladıkları site örnekleridir. Bu şablonları indirerek ve üzerinde değişiklikler yaparak sitenizi oluşturabilirsiniz. Şablonunuzu seçtikten sonra üzerinde ne gibi değişiklikler yapacağınızı düşünün. (Site Yapmak menüsü altındaki linki kullanarak Şablonlar sayfasına ulaşabilirsiniz.)
Site tasarımı ve içeriği ile ilgili hazırlığınızı tamamladıysanız kullanacağımız programları tanımak ve indirmek için Site Porgramları sayfasına geçebilirsiniz.

Site Programları

Web sitesi yapmak için iki çeşit programa ihtiyacımız olacak. Web sitemizin sayfalarını oluşturmak, sayfalarımızın tasarımını yapmak, sayfalarına resim müzik yazı, içerik eklemek için kullanacağımız bir html düzenleyici (html editör) ve hazırladığımız web sitesini internete bağlı bir sunucuya göndermek için kullanacağımız bir ftp programı. Şimdi web sitesi yapmak için en çok tercih edilen html editör programlarına bir göz atalım. (Sadece forum sitesi açmak istiyorsanız html editöre ihtiyacı olmayacak.)

HTML Editörler

Dreamweaver (Dw)

dwres.jpg
Webmasterlerin çoğu web sitesi yapmak için Dreamweaver'i tercih eder. Diğer html editörlere göre artılarının çok olması, yapımcısı Adobe firmasının diğer programları ile uyumlu çalışması ve WYSIWYG (What you see is what you get = Ne görürsen onu elde edersin) şeklinde çalışması nedeniyle en çok tercih edilen html editör programıdır. Belki çoğu özelliğini henüz keşfedemediğim için hak ettiği kadar övemiyorum ama Dreamweaver'i kullanmanızı tavsiye ederim.
Dreamweaver'in 30 günlük deneme sürümünü indirmek için tıklayın. Dreamweaver CS3 İndir Açılan sayfadan Free Trial linkine tıklayıp üye olduktan sonra deneme sürümünü indirebilirsiniz.
Microsoft FrontPage (FP)

fpres.jpg
Microsoft Office programı olan FrontPage, web sitesi yapmak için en çok tercih edilen html editörlerden biridir. Yeni başlayanlar için kullanımı kolay olması ve tasarımcıya kolaylık sağlayan araçlarının olması nedeniyle tercih edilen bir html editördür. Frontpage'de önce bir site haritası oluşturup bu haritaya sayfalar ekliyorsunuz. Daha sonra bu sayfalara içerik ekleyerek web sitenizi oluşturuyorsunuz. Sitenizin sayfalarını birbirine bağlamak gibi şeylerle uğraşmanıza gerek kalmıyor. Çünkü Frontpage, site haritasına göre sitenizin sayfalarını bağlıyor, menü oluşturuyor. Size sadece oluşturulacak menüdeki butonların şeklini seçmek kalıyor.
Fp, Office programları arasında kurulmuş olabilir. Başlat>Microsoft Office>Microsoft FrontPage yolunu izleyerek FP'yi çalıştırabilir, web sitesi yapımına başlayabilirsiniz.
FTP Programı

Web sitesi yapmak için ihtiyaç duyacağımız diğer program ise sitemizi internetteki bir sunucuya göndermek için kullanacağımız ftp programı. Ftp programı olarak Firefox'un bir eklentisi olan FireFtp'yi kullanacağız. Tamamen ücretsiz bir program olan FireFTP, bir Firefox eklentisi olduğu için önce Firefox'u bilgisayarımıza yüklemeliyiz. (Eğer bilgisayarınızda Firefox yüklü ise buraya tıklayarak FireFtp programını indirebilirsiniz.)
fire.jpg
Hala Internet Explorer kullanıyorsanız Firefox'u ücretsiz indirin ve size sağlayacağı kolaylıkları keşfedin derim. Firefox ile web sayfalarını daha hızlı ve güvenli bir şekilde dolaşabilirsiniz. Firefox, sayfaları seklemelerde açarak görev çubuğunda fazla yer kaplamıyor, çeşitli eklentiler sayesinde daha hızlı ve güvenli sörf yapmanızı sağlıyor, sık kullanılan sitelere daha kolay ulaşmanızı sağlıyor. Firefox'un iyi yönlerini Microsoft da görmezden gelmemiş ve Internet Explorer'in yeni versiyonlarını Firefox benzeri hale getirmiş. Ödüllü tarayıcı olan Firefox'un nasıl göründüğünü ve sağladığı kolaylıklardan bazılarını buraya tıklayarak görebilirsiniz.
Firefox'u buraya tıklayarak indirebilirsiniz. Ama Firefox ile Google Araç çubuğunu da indirmenizi tavsiye ederim. Böylece Firefox yanında Google Araç Çubuğu'nun da sağladığı kolaylıklardan faydalanabileceksiniz. Örn: Google aramalarınızı kolaylaştıracak, tek tık ile Gmail hesabınıza ulaşabilecek, web sitelerinin Page Rank değerini öğrenebileceksiniz. Aşağıdaki banner bağlantıyı kullanarak Google Araç çubuğu ile birlikte Firefox'u bilgisayarınıza indirebilirsiniz.

Firefox'u indirdiyseniz buraya tıklayarak FireFtp'yi indirebilirsiniz.​
Gerekli programları indirdikten sonra site yapımına başlayabilirsiniz. Her iki program ile nasıl site yapılacağını ve nasıl forum sitesi kurulacağını anlatmaya çalıştım. Tabiki bu sitedeki bilgilerle yetinmeyip zamanla programların diğer özelliklerini öğrenerek kendinizi geliştirebilirsiniz. http://www.bedavasiteyapmak.com%27u/www.bedavasiteyapmak.com'u[/URL] oluşturmak için aşağıdaki Dreamweaver anlatımı ve resimleri düzenlemek için biraz Fireworks bilgisi yeterli olmuştu.



Dreamweaver ile Site Yapımı


Webmasterlerin çoğu, site yapımı için Dreamweaver'i tercih eder. Bunun sebebi çok özelliği olması, tek başına yapabileceği çok şey olması ve web sitesi yapmak için kullanılan Adobe firmasının diğer programları ile uyumlu çalışmasıdır. Bu nedenle html editör dendiğinde akla gelen ilk program genellikle Dreamweaver olur. Bu, Dreamweaver'in rakiplerine oranla daha çok tercih edilmesini sağlar ancak bu kadar çok özelliği ve yeteneği olan bir program bir çok ayar gerektirdiğinden ve araç içerdiğinden çoğu kullanıcıya göre kullanımı zor veya karmaşık gelmektedir. Ben de ilk başta Frontpage ile başladığım site yapımına tavsiyeler üzerine Dreamweaver ile devam etmeye karar verdim. Öğrenmeye başladığım sıralarda yaşadığım zorlukların artık hiç birini yaşamıyorum. Ben de size Dreamweaver kullanmanızı tavsiye ederim. Lafı uzatmadan Dreamweaver ile sitemizi nasıl oluşturacağız beraber bakalım. :)
Dreamweaver'in çalışma alanı görünümü aşağıdaki gibidir. Lütfen resmi inceleyin.
dreamweaver.jpg
Aşağıda gördüğünüz şablonu kullanarak fıkralar ve komik resimler içeren bir web sitesi açacağım. Site yapımına başlamadan önce web siteme ekleyeceğim fıkraları ve komik resimleri hazırladım. Anasayfaya bir fıkra ve bir komik resim ekleyip altına fıkralar ve komik resimler sayfalarına giden linkler ekleyeceğim. Şablonun solundaki bölüme site sayfalarına giden linkleri sağındaki bölüme ise reklam kodlarını ekleyeceğim.
temp1.JPG
Şimdi bu şablonu kullanarak sitemizi hazırlayalım. (Sayfanın sağındaki şablonlar bağlantısını kullanarak yüzlerce şablon içerisinden seçtiğim hazır site şablonlarını indirebilir, beğendiğiniz bir tanesini kullanarak sitenizi oluşturabilirsiniz.) Şablonun içerisinde olduğu klasörü kopyalayıp C diskine yapıştırıyorum ve klasöre "Site" adını veriyorum. Bu klasör "kök klasör" olarak adlandırılır.(1) Kök klasörün içinde index.html dosyası ve images klasörü bulunur. (2) Sitemizi oluşturup yeni sayfalar oluşturdukça bu sayfaları kök klasöre, sitemizde kullanacağımız resimleri de images klasörüne koyacağız.
asa.jpg
1.Sitemizi Dreamweaver'e tanıtalım.

Web sitemizin sorunsuz çalışması için sitemizi Dreamweaver'e tanıtmamız gerekir. Site>New Site>Advanced yolunu izleyelim ve aşağıdaki resimde gördüğünüz gibi ilk satıra sitenizin adını, ikinci satıra da sitenizin kök klasörünü, son olarak üçüncü satıra ise kök klasörünüzün içinde bulunan images klasörünü yazın ve Ok'a basın. Böylece sitemizi Dreamweaver'e tanıtmış olduk.
asa2.jpg
2. Türkçe Karakter Ayarını Yapalım

Şimdi Dreamweaver'in Türkçe karakterleri sorunsuz göstermesi için gereken ayarları yapalım.​
Ana menü yardımıyla Edit>Preferences>New ********>Default Encoding>Türkçe(windows) seçip Ok butonuna tıklayarak işlemi tamamlayalım.
asa1.jpg
Yaptığımız son işlemle ç,ş,ö gibi Türkçe karakterlerin sitemizde sorunsuz görünmesini sağladık. Şimdi şablonumuzu açalım ve sitemizdi oluşturmaya başlayalım.
File>Open yolunu izleyerek (veya files panelindeki index.html'ye çift tıklayarak) index.html dosyasını açalım.
Web sayfalarının uzantısı html dir. Örneğin müzik dosyalarının uzantısı genellikle mp3, resim dosyalarının uzantısı genellikle jpeg olur. Web sayfalarının uzantısı da genellikle html veya htm olur. Hazırlayacağımız her sayfanın sonuna .html ekleyeceğiz. Örn: fikralar.html
index.html dosyasını anasayfanız olarak tasarlayın ve sayfa adını değiştirmeyin. Çünkü bir siteye girdiğinizde, tarayıcınız size o sitenin index.html sayfasını gösterir. Örneğin Internet Explorer'de www.siteadi.com yazarsanız tarayıcınız www.siteadi.com/index.html adresini açar. Daha sonra oluşturacağınız sayfalarınız için farklı isimler yazacaksınız örneğin: sayfaadi.html gibi... Oluşturduğunuz sayfalara isim verirken veya site içerisinde kullandığınız resimlerin adlarında Türkçe karakter veya boşluk kullanmamaya dikkat edin. Örneğin ödev.html isimli bir sayfa yaparsanız bu sayfa görüntülenemez.
3. Tabloları Kullanmak

Daha önce de belirttiğim gibi hazırladığımız sayfalar html formatındadır. Html dilinde her satıra sadece bir içerik ekleyebilirsiniz. Ekleyeceğiniz iki farklı içerik hataya sebep olabilir. Örneğin bir satıra hem yazı hem resim ekleyemezsiniz. Eklemek istediğinizde aşağıdaki resimde görülen problem ile karşılaşırsınız.
hata.jpg
Bu problemi aşmak için bir bir satıra resim ve yazı eklemek yerine, bir tane tablo ekleyeceğim. Ama bu tablonun iki tane sütunu olacak. Tablonun sol sütununa resmi, sağ sütununa ise yazıyı ekleyeceğim. Bu yöntemle bir satıra sadece bir tablo ekleyerek hem resim hem yazıyı yanyana koyabileceğim.​
hata2.jpg
Yukarıda gördüğünüz gibi tablo kullanarak resim ile yazıyı yanyana ekleyebildim. Bu örnekte tablonun görülebilmesi için çerçevelerin kalınlığını artırdım ve rengini beyaz yaptım. Siz çerçeve kalınlığını sıfır yaparak tabloları gizleyebilirsiniz. Sayfaların sorunsuz çalışması için tabloları kullanmalısınız. Çoğu web sitesi tablolar üzerine kuruludur. Bu sitelerde sayfa görünümü ile ilgili hatalar en az seviyededir. Örneğin tablolar üzerine kurulmamış bir site, farklı çözünürlük ayarlarına sahip bilgisayarlarda sorun yaratabilir. Örn: resimlerle yazıların iç içe geçmesi gibi..
Ekleme menüsünü (veya Insert>Table yolunu) kullanarak tablo ekleyebilirsiniz. Tablo eklemek istediğinizde açılan sayfadan tablodaki satır sayısını, sütun sayısını ve benzeri diğer özellikleri ekleyebilirsiniz.
tablo.jpg
Fare yardımı ile eklediğiniz tablonun uzunluk ve genişliğini ayarlayabilirsiniz. Ayrıca eklediğiniz tablonun üzerine tıkladığınızda özellikler panelinde tablonun özellikleri çıkacaktır. Buradan da değişikler yapabilir, tabloyu yeniden düzenleyebilirsiniz.
4. İçerik Ekleyelim

index.html sayfasını yani sitemizin anasayfasını açtık. Şimdi şablondaki yazıları silelim ve yerine bir tane fıkra ekleyelim. Fare ile yazıları seçerek ve klavyenizdeki Delete tuşunu kullanarak yazıları silebilirsiniz. Yazarak veya kopyala yapıştır yöntemi ile fıkrayı anasayfaya yazıyorum. (Resmi orjinal boyutunda görmek için üzerine tıklayın.)
Çalışmalarınızı kaydetmek için File>Save butonuna tıklayın.
Yaptığınız değişiklikleri F12'ye basarak kaydedebilir ve görüntüleyebilirsiniz.
5. Resim Ekleyelim

Fıkranın hemen altına bir tane komik resim ekleyelim. Ekleyeceğimiz resmi sitemizin kök klasörü içindeki images klasörüne koymamız gerekiyor. Aksi halde bilgisayarımızda sitemizi açtığımızda resim görünür ama sunucuya gönderdiğimizde görünmez. Sitemizin sorunsuz çalışması için eklediğimiz her video, resim flash vb. kök klasör içerisinde olması gerekir.
Resim eklemeden önce fıkralar ve komik resimler bölümünü ayıralım. Eklediğimiz fıkranın sonuna fare ile 1 kere tıklayalım ve Insert>HTML>Horizontal Rule yolunu izleyelim. Böylece fıkradan sonra yatay bir çizgi ile sayfayı bölmüş olduk.
Şimdi resim eklemek istediğimiz yere fare ile tıklayalım. Insert>Image yolunu izleyelim (Aynı işlemi aşağıdaki resimde işaretli olan butona tıklayarak veya Ctrl+Alt+ I tuşlarına basarak da yapabilirsiniz.) ve eklemek istediğimiz resmi seçip OK butonuna tıklayalım. (Resmin üstüne tıklayarak orjinal boyutuna ve detaylı anlatımıyla ulaşabilirsiniz.)
res1.jpg
Sayfalarınıza video veya flash eklemek için benzer yöntemi kullanabilirsiniz. Ancak Insert'e tıkladıktan sonra Image yerine Media'ya tıklamanız gerekiyor.
6. Farklı Sayfalar Oluşturup Bağlantılarını Yapalım

Anasayfamızı oluşturduk. Şimdi farklı sayfalar oluşturalım ve ziyaretçilerin bir sayfadan diğerine gidebilmeleri için bağlantılar (linkler) ekleyelim. Fıkralar ve resimler ekleyeceğimiz sayfalar oluşturalım. Kolaylık olması amacıyla index.html dosyasını farklı bir isimle kaydedip tekrar düzenleyeceğiz. index.html dosyası açıkken File>Save as.. yolunu izleyerek fikralar.html yazıp Save butonuna basalım. Böylece görünümü index.html ile aynı ancak adı fikralar.html olan ikinci bir sayfa elde ettik. (Aynı işlemi kök klasörünüzdeki index.html dosyasını kopyalayıp tekrar aynı yere yapıştırarak ve adını fikralar.html olarak değiştirerek de yapabilirsiniz.)
Şimdi fikralar.html sayfasını açalım ve anasayfamız için yazdıklarımızı silip yerine yayınlayacağımız fıkraları ekleyelim. Böylece sayfayı baştan inşa etmek yerine index.html dosyasında birkaç değişiklik yaparak Fıkralar sayfasını oluşturmuş olacağız.
Sayfamıza fıkraları ekleyip kaydediyoruz. Aynı yöntemle komik resimler sayfasını da oluşturdum. Bunun gibi komik haberler, komik olaylar gibi sayfalar oluşturarak da sitemi zenginleştirebiliriz. Şimdi sayfalarımızı birbirine bağlayalım. index.html yi açıp soldaki link menüsüne sayfa isimlerimizi yazıp link (bağlantı, köprü) ekleyelim. Hazırladığımız sitede üç tane sayfa var. Anasayfa, Fıkralar ve Komik Resimler. Bu üç sayfayı şablonun sol bölümündeki Menü yazısının hemen altına yazıyorum ve fazlalıkları siliyorum.
menu.jpg
Sitemiz için menü oluşturduk. Şimdi bu menüye link ekleyelim. Yapmamız gerekenler sırasıyla:
1. Soldaki menüden link vermek istediğiniz sayfanın adına çift tıklıyoruz.
2. Klasör simgesine tıklıyoruz ve sayfalarımızın listesi açılıyor.
3. Açılan pencereden link vermek istediğiniz sayfayı seçiyoruz.
4. Ok'a basıyoruz ve çalışmanızı kaydediyoruz. Bu işlemi tekrarlayarak Fıkralar ve Resimler sayfaları için de link ekledim. Böylece Anasayfadan Fıkralar ve Komik Resimler sayfasına açılan bir kapımız oldu.
Yalnız Fıkralar veya Komik Resimler sayfasına giden bir ziyaretçinin tekrar anasayfaya dönmesi mümkün değil. Çünkü diğer sayfalarda link eklemedik. Aynı yöntemle diğer sayfalarda da link eklememiz gerekiyor. Daha kısa olan yöntem ise oluşturduğumuz menünün tamamını kopyalayıp diğer sayfalarda aynı bölüme yapıştırmak. index.html yi açalım ve menüdeki Anasayfa yazısı üzerine seri şekilde üç defa tıklayalım. Tüm yazılar seçili haldeyken fare ile üzerine sağ tıklayıp Copy seçeneğine tıklayalım. Şimdi Fıkralar sayfasını açıp sol bölümdeki Menu ve link yazılarını temizleyelim. Sağ tıklayarak Paste seçeneğine tıklayalım. Böylece daha önce index.html için oluşturduğumuz menüyü Fıkralar sayfasına kopyalamış olduk ve tek tek link eklememize gerek kalmadı. Aynı işlemi Komik Resimler sayfası için de tekrarlayarak sayfaların birbiri ile bağlantısını tamamlıyoruz ve sitemiz yayına hazır hale geliyor.
lkn.jpg

Dreamweaver bölümünün son sözleri:
Tabiki Dreamweaver'in yapabilecekleri bunlarla sınırlı değil. Programın içinde yüzlerce sayfalık yardım kitabı var ancak tamamına burada veya başka bir sitede değinilmesi mümkün değil. Zamanla programların yeteneklerini keşfederek veya kullanmayı bilenlerden yardım alarak seviyenizi ilerletebilir daha iyi siteler kurabilirsiniz. bedavasiteyapmak.com'u oluşturmak için bu bilgiler dışında sadece bir resim düzenleyici program ve bir flash programı kullanmak yeterli oldu.
Artık site açmak için yapmamız gereken tek şey sitemizi internetteki bir sunucuya (hosting hesabına) göndermek. Böylece siteniz ziyarete açılmış olacak. Sayfalarınızda yaptığınız değişikliklerin ziyaretçilere yansıması için değişiklik yaptığınız sayfayı tekrar sunucuya göndermeniz gerektiğini hatırlatırım. Şimdi bedava hosting veren firmalardan birine üye olalım ve sitemizi sunucuya yollayalım.. Bedava Hosting
 
Son düzenleme:

mertcan9414

Katılımcı Üye
24 Tem 2007
929
42
115
Seni İzliyor ...
Frontpage ile Site Yapımı


Frontpage, web sitesi yapımı için tercih edilen kullanımı en kolay html düzenleyicilerden birisidir. İçeriğindeki hazır butonlar, seyir çubukları ve hazır siteler ile sitenizi dakikalar içinde oluşturabilirsiniz. İçeriğindeki hazır araçları kullanarak sitenize saat sayaç gibi çeşitli araçlar ekleyebilirsiniz. Ancak Frontpage'ye özgü bu araçların sorunsuz çalışması için web sitenizin Frontpage eklenti paketinin kurulu olduğu bir sunucuda depolanması gerekir.
Frontpage, bir site haritasına dayalı olarak çalışır. Önce sitenizin sayfaları arasındaki bağlantılara göre bir harita oluşturursunuz, daha sonra oluşturduğunuz haritadaki sayfaları açıp düzenlersiniz. Aşağıdaki resim, FP site haritasına bir örnektir.
Resimde görüldüğü gibi bir ana sayfa ve ana sayfaya bağlı diğer sayfalar siteyi oluşturuyor. Fotoğraf galerisi ise iki ayrı sayfaya açılıyor. Bu yapı ileride sayfalarımız için seyir çubuğu oluşturmakta işimize yarayacak. Örneğin 3. seviyedeki sayfaların sadece Fotograf galerisi sayfasında görüntülenebilmesi gibi ayarlamaları yapabileceğiz. Frontpage'nin nasıl çalıştığını ve özelliklerini kısaca açıklamaya çalıştım. Şimdi site yapımına başlayabiliriz.
fp1.jpg
1. Sitemizi Frontpage'ye ekleyelim

Bu anlatımda fıkralar ve komik resimler içeren basit bir web sitesi yapacağım. Anasayfaya bir tane fıkra ve bir tane komik resim koyacağım. Ben aşağıdaki şablonu kullanmayı seçtim. Siz dilerseniz farklı bir şablon kullanabilir veya sitenizi kendiniz tasarlayabilirsiniz. Ayrıca Frontpage'nin kendi şablonlarını da kullanarak bir kaç değişiklik ile sitenizi yapabilirsiniz.
frontpage1.gif
Şablon içerisinden çıkan dosyaları, C diskinde Websitem adında bir klasör açıp içine kopyaladım. Buradaki websitem klasörüne (yani sitemizin içerisinde olduğu klasöre) kök klasör denir. Sitenizde kullandığınız içeriğin (resim, müzik, video vb.) kök klasörünüz içerisinde olması gerekir. Aksi halde siteniz bilgisayarınızda sorunsuz çalışır ancak sunucuya gönderdiğinizde kök klasör içinde olmayan içerik görüntülenemez.
Şimdi bu şablonu Frontpage'ye ekleyelim. Frontpage'yi açalım ve sol üst köşedeki menüden Dosya>Site Aç'a tıklayalım. Açılan pencereden sitemizin içinde olduğu klasörü (yani websitem klasörünü) açalım.
frontpage2.gif
Aç butonuna tıkladıktan sonra Frontpage sitenize dosya eklemek için izin isteyecek. Evet seçeneğine tıklayalım ve sitemizin sorunsuz çalışması için gerekli dosyaların eklenmesine izin verelim. Yaptığımız son işlemle sitemizi Frontpage'ye eklemiş olduk. Artık sitemizin sayfalarında değişiklik yapabiliriz. index.html dosyasına çift tıklayarak açalım.
2. Tabloları Kullanmak

Sitemize içerik eklemeden önce tablo ekleyeceğiz ve içeriği bu tabloların sütun ve satırlarına ekleyeceğiz. Çünkü html sayfalarda her satıra sadece bir farklı içerik eklenebilir. Ayrıca tablo ekleyerek içeriğin konumunu sabitlemiş oluruz. Böylece farklı çözünürlükteki bilgisayarlar sitemizi görüntülediğinde sayfalarda hata oluşmaz. Tablo kullanmazsak resimler ve yazılar iç içe geçebilir. Aşağıdaki resimde tabloların nasıl kullanıldığını görebilirsiniz. Tabloların görülebilmesi için rengini kırmızı yaptım ama siz tabloların kalınlığını sıfır yaparak görünmemesini sağlayabilirsiniz. Her sitede mutlaka tablo kullanılır. Kaliteli siteler tablolar üzerine kuruludur.
frontpage3.gif
Tabloların nasıl kullanıldığını ve faydalarını öğrendik. Şimdi sayfadakileri temizleyip bir tablo ekleyeceğim. Tabloda site başlığı, fıkralar sayfası ve komik resimler sayfası için birer satır olacak. Tablo eklemek için üstteki menüden Tablo>Ekle>Tablo'ya tıklıyorum. Tablonun özelliklerini ayarlayacağım pencere açılıyor. Tablo ekledikten sonra üzerine sağ tıklayarak da ayarlarını değiştirebilirsiniz.
frontpage4.gif
Tamam butonuna tıkladıktan sonra tablo sayfaya ekleniyor. Fareyi kullanarak tablonun ve hücrelerin genişliğini ve yüksekliğini değiştirebilirim. Şimdi en üst satıra sitenin başlığını ekleyip diğer iki satırı ikiye böleceğim ve her sütuna resim veya yazı ekleyeceğim. Yaptığım işlemi aşağıdaki resimden görebilirsiniz.
frontpage5.gif
Aynı yöntemle Eğlence Merkezi yazısı altındaki iki hücreyi de böldüm. Şimdi bu hücrelere resim ve yazı ekleyelim.
3. Resim Ekleme

Resim eklemek için ilk önce ekleyeceğimiz resimleri site klasörümüzün içine kopyalamamız gerekecek. Anasayfaya koyacağım resmi kök klasör içindeki img klasörüne kopyalıyorum. Önce resmi eklemek istediğim yere bir kere tıklıyorum sonra üstteki menüden Ekle>Resim>Dosyadan... yolunu izliyorum. Açılan sayfadan resmi seçip ekle butonuna tıklıyorum.
Aynı yöntem ile ama Ekle>Resim linklerine tıkladıktan sonra dosyadan... seçeneği yerine video veya flash seçerek video veya flash ekleyebilirsiniz.
Eklediğiniz resimlerin adında boşluk, özel karakter ve ç,ş,ğ,ü gibi Türkçe karakterler olmadığından emin olun. Adında boşluk ve özel karakter bulunan dosyalar bilgisayarınızda açılır ama sitenizi sunucuya gönderdiğinizde açılmayabilir.
Bu yöntem ile sayfaya eklediğim tablolara resimler ekledim ve yanındaki hücrelere yazılar ekledim. Böylece anasayfamızı tamamlamış olduk. Önizleme sekmesine tıklayarak sitenizin tarayıcıda nasıl görüneceğine bakabilirsiniz. Ayrıca Dosya>Kaydet yolunu izleyerek (veya Ctrl+S tuşlarına basarak) çalışmalarınızı kaydetmeyi unutmayın.
frontpage7.gif
Şimdi sitemize fıkralar ve komik resimler için iki farklı sayfalar eklemek için ikinci derse geçelim.
Ders 1 Ders 2
Frontpage ile Site Yapımı 2


4. Yeni Sayfalar Oluşturalım

Sitemize yeni sayfalar eklemek için site haritasına yeni sayfalar eklememiz gerekiyor. Ancak bu yöntemi kullanırsak içi tamamen boş bir sayfa elde ederiz. Biz farklı bir yöntem kullanarak daha kısa sürede yeni sayfalar ekleyeceğiz. Sitemizin anasayfasının bir kopyasını alıp tekrar sitemize ekleyeceğiz ve adını Fıkralar olarak değiştireceğiz. Daha sonra da kopyaladığımız bu sayfanın içeriğini silip fıkralar ekleyeceğiz. Bunu yapmak için web sitesi sekmesine tıklayarak sayfanın altındaki Gezinti sekmesine gelelim. Burada görülen sayfa anasayfamızdır. Üzerine sağ tıklayarak yeniden adlandır seçeneğine tıklayalım ve adını Eğlence Merkezi olarak değiştirelim.
frontpage8.gif
Şimdi anasayfa üzerine sağ tıklayarak Kopyala seçeneğine tıklayalım. Tekrar anasayfa üzerine sağ tıklayarak Yapıştır seçeneğine tıklayalım. Böylece sitemizin anasayfası altında farklı bir sayfa oluşturmuş olduk. Aynı işlemi bir kez daha tekrarlayarak 2. alt sayfamızı oluşturalım.
frontpage9.jpg
Resimde gösterilen değişiklikleri yaptıktan sonra Klasörler sekmesine (4) gelelim. Burada sitenizin dosyalarını görebilirsiniz. Yeni oluşturduğumuz sayfalar index1.html ve index2.html adında kaydedilmiştir. Bu isimleri fikralar.html ve komik_resimler.html olarak (yani sayfa içeriği ile alakalı kelimeler ile) değiştirmeniz arama motorlarındaki sıranızı olumlu yönde etkiler. Dosya üzerine sağ tıklayıp yeniden adlandır seçeneğine tıklayarak dosya isimlerini değiştirebilirsiniz. Sayfaları yeniden isimlendirirken boşluk bırakmamaya, özel karakter ve ç,ş,ö,ğ gibi Türkçe karakterler kullanmamaya dikkat edin. Sayfa isimlerini de değiştirdikten sonra buradan sitenizin sayfalarını açabilirsiniz. Anasayfayı oluşturduğumuz gibi Fıkralar ve Komik Resimler sayfalarını düzenleyebilir; tablolar, resimler ve yazılar ekleyerek sayfalar oluşturabilirsiniz. Şimdi sitemize seyir çubuğu ekleyerek ziyaretçilerin bir sayfadan diğerine gitmesini sağlayalım.
Web sayfalarının uzantısı html dir. Örneğin müzik dosyalarının uzantısı genellikle mp3, resim dosyalarının uzantısı genellikle jpeg olur. Web sayfalarının uzantısı da genellikle html veya htm olur. Hazırlayacağımız her sayfanın sonuna .html ekleyeceğiz. Örn: fikralar.html
index.html dosyasını anasayfanız olarak tasarlayın ve sayfa adını değiştirmeyin. Çünkü bir siteye girdiğinizde, tarayıcınız size o sitenin index.html sayfasını gösterir. Örneğin Internet Explorer'de www.siteadi.com yazarsanız tarayıcınız www.siteadi.com/index.html adresini açar. Daha sonra oluşturacağınız sayfalarınız için farklı isimler yazacaksınız örneğin: sayfaadi.html gibi... Oluşturduğunuz sayfalara isim verirken veya site içerisinde kullandığınız resimlerin adlarında Türkçe karakter veya boşluk kullanmamaya dikkat edin. Örneğin ödev.html isimli bir sayfa yaparsanız bu sayfa görüntülenemez.
5. Sayfalara Bağlantılar Ekleyelim

Şimdi sayfalara bağlantılar ekleyerek ziyaretçilerin sitemizin sayfalarını dolaşabilmesini sağlayalım. Linkler için ayrılmış bölümün altında boş bir yere tıklıyorum ve Ekle>Gezinti butonuna tıklıyorum. Açılan pencereden gezinti yapısında çubuk seçeneğini işaretleyip İleri butonuna tıklıyorum.
frontpage10.jpg
Diğer iki adımda seyir çubuğu stilini ve şeklini seçip Son butonuna tıklıyorum. Açılan sayfadan hangi linklerin gösterileceğini seçiyorum. Burada link eklerken site haritası esas alınır. Hangi kademedeki sayfaların linklerinin gösterileceği burada seçilir. Deneme yanılma yöntemi ile linkler düzgün açılana kadar deneyebilirsiniz :)
frontpage11.jpg
Seyir çubuğunu ekledikten sonra kırmızı kare içinde kalan bölümü silebilirsiniz. Diğer sayfalara da seyir çubuğu eklemeyi unutmayın. Aksi halde diğer sayfaya giden bir ziyaretçi anasayfaya veya diğer sayfalara ulaşamaz.
Seyir çubuğu eklediğinizde anasayfa için verilen linkte Giriş Sayfası yazacaktır. Bunu değiştirmek için Araçlar>Site Ayarları seçeneğine tıklayın. Açılan pencereden Gezinti sekmesine gelin. Buradaki Giriş Sayfası yazısı yanındaki bölümü Anasayfa veya sitenizin adı şeklinde değiştirebilirsiniz.
 
Son düzenleme:

mertcan9414

Katılımcı Üye
24 Tem 2007
929
42
115
Seni İzliyor ...
6. Link Ekleme

Şimdi sitemize nasıl link (bağlantı, köprü) ekleyeceğimizi öğrenelim. Link ekleyeceğimiz yazıyı veya resmi seçelim. Ekle>Köprü yolunu izleyerek açılan pencereden link vermek istediğimiz sayfayı seçelim. Başka bir siteye link vermek istiyorsanız adres bölümüne link vermek istediğiniz siteyi yazın.
frontpage12.gif
7. Sayfamıza kod ekleyelim

Ssayfamıza herhangi bir yerden aldığımız kodu ekleyebiliriz. Bu herhangi bir yerden aldığımız sayaç kodu da olabilir, reklam kodu da olabilir, site linki de olabilir.
Kod eklemek istediğiniz yere sağ tıklayarak kodu yapıştırın. Kod önce yazı halinde sitenize eklenecektir ve kodun bittiği yerde klasör resmi çıkacaktır. Bu klasöre tıklayarak "Html etiketi gibi davran" seçeneğine tıklayalım. Böylece kod eklenecektir. Aşağıdaki resimde eklediğim Extreme sayaç kodunu görebilirsiniz.
frontpage15.gif
Kod eklemek için şu yöntemi de kullanabilirsiniz:​
Kod eklemek istediğiniz yere "Kodu ekle" yazın. Bölünmüş ekran sekmesine tıklayarak sayfayı hem kod hem tasarlama penceresi ile açın. Tasarlama penceresindeki kodu ekle yazısına çift tıklayarak yazıyı fosforlu hale getirin. Böylece kod ekranında "kodu ekle" yazısının nerede olduğunu görebileceksiniz. Artık yapmanız gereken kod ekle yazısını silip buraya kodu yapıştırmak.
frontpage16.gif
8. Sayfa Özellikleri

Şimdi sayfa özelliklerine göz atalım. Sayfanın herhangi bir yerine sağ tıklayarak Sayfa Özellikleri seçeneğine tıklayın.​
frontpage13.gif
Buradaki bilgiler arama motoru sıralamanıza olumlu yönde etki edebilir. Siteniz arama motoru sonuçlarında listelendiğinde site başlığı ve açıklaması olarak yukarıdaki bölüme yazdıklarınız çıkacaktır. Anahtar kelime olarak sitenizin içeriğini özetleyen kelimeleri seçin. Yirmi kelimeden fazla yazmamaya dikkat edin. Arama motorlarında daha iyi sonuçlar alabilmek için arama motoru optimizasyonu sayfasını ziyaret etmeyi ihmal etmeyin.
9. Logoyu Değiştirelim

Son olarak sitemizin logosunu değiştirelim. Sitemizin logosunda Company Logo yazısı resim olduğu için yazıyı değiştiremeyiz. Ama şablonlarda genellikle bu logoların yazısız olanı veya yazısı değiştirilebilen formatta bir resim olur. Logonun yazısız olanı şablon içerisindeki sources klasöründen çıktı. Bu logoya bir resim düzenleyici ile yazı ekleyeceğim.
Şimdi yapmam gereken tek şey yeni logoya eski logonun adını verip eski logonun olduğu yere koymak. Böylece sayfalarda hiç bir değişiklik yapmadan yenisi ile eskisini yer değiştirmiş olacağım.
Frontpage ile web sitesi yapımını anlaşılır ve en kısa şekilde anlatmaya çalıştım. Aklınıza takılan bölümleri veya anlatımda eksik gördüğünüz yerleri forumumuz aracılığı ile paylaşırsanız hem sorularınıza cevap bulur hem diğer ziyaretçilerin aynı sorunları yaşamaması için katkıda bulunmuş olursunuz.
Şimdi web sitenizi yayınlamak için [URL="https://tik.lat/1Aswg"] Bedava Hosting [url]https://tik.lat/KM9xq
yi açacağım. Siz kendi aldığınız hosting adresini kullanın.) Kurulum için install.php sayfası açılacaktır. Bu sayfada değiştireceğiniz bölümler:
Forum ismi: Bu bölüme kuracağınız forumun adını yazın
MySQL kullanıcı adı: Hosting hesabınızda oluşturduğunuz veritabanının kullanıcı adı
MySQL parolası: Veritabanınızın şifresi
MySQL veritabanı adı: Hosting hesabınızda oluşturduğunuz veritabanı adı.
Diğer bölümleri değiştirmenize gerek yoktur. awardspace.com dışında bir hosting sitesi kullanıyorsanız MySQL sunucu adresi farklı olabilir veya sadece "localhost" olabilir.
 

neber

Katılımcı Üye
15 Kas 2007
946
15
mertcan kardesim paylasim icin saol ama burda eminim pek okuyan yoktur konuyu uzun ya biraz(ben sahsen okudum)
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.