1..
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.
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.
2..
Hazırladığımız şablonda yapacağımız değişikliklerin sorunsuz çalışması için şablonumuzu Frontpage'ye tanıtmamız gerekiyor. Bu sayfada sitemizi nasıl Frontpage'ye tanıtacağımıza değineceğiz.
Frontpage'yi açalım ve en sütteki menüden Dosya>Site Aç... butonlarına tıklayalım. Yeni bir pencere açılacak ve buradan sitemizin kök klasörünü seçeceğiz. Aşağıdaki resimde de gördüğünüz gibi kök klasöre kadar şablonu açın ve Aç butonuna tıklayın.
Aç butonuna tıkladıktan sonra yeni bir pencere daha açılacak. Frontpage'nin gerekli bilgileri sitenize eklemesine izin vermek için bu penceredeki Evet butonuna tıklayın.
Yukarıdaki resimde de görüldüğü gibi Frontpage sitemize iki yeni klasör ekledi. Frontpage bu klasörlerden images klasörünü varsayılan resim klasörü olarak kullanıyor. Bir önceki dersten hatırlayacağınız gibi bizim şablonumuzda kullanılan resimler img klasöründeydi. İsterseniz img klasöründeki resimleri images klasörüne taşıyabilirsiniz veya hiç bir değişiklik yapmadan her iki klasörü kullanabilirsiniz. Ancak resimleri taşımayı seçtiyseniz, taşıma işlemini Frontpage'den yapmanız gerekiyor. Eğer C diskine girerek sitemizin dosyalarını açarsak ve img klasöründeki resimleri images klasörüne taşırsak, sayfalarda yapılması gereken kod değişiklikleri yapılamaz. Ancak Frontpage ile resimleri taşırsak, sayfalardaki gerekli kod değişiklikleri yapılır ve resimler sorunsuz çalışır. Frontpage ile resimleri taşımak için sol taraftaki Klasör Listesi bölümünden img klasörünün solundaki + işaretine tıklayın. Buradaki resimlerin tamamını fare ile seçerek images klasörü üzerine sürükleyin.
Sitemizi Frontpage'ye tanıtma işlemini tamamladık. Artık biz sitemizde değişiklik yaparken veya sitemize resim video, flash eklerken, Frontpage gereken html kodlarını sayfalarımıza ekleyecek.
3...
Bu derste web sayfalarına Frontpage ile resim eklemeyi öğreneceğiz. Resimleri web sayfamıza eklemeden önce, ekleyeceğimiz resimleri, flash ve video dosyalarını kök klasöre veya kök klasör içindeki bir klasöre kopyalayalım.
index.html sayfasına çift tıklayarak sayfamızı açalım. Resim eklemek için Frontpage'nin sol tarafındaki Klasör Listesi bölümünden eklemek istediğiniz resmi bulalım ve fare sol tuşu ile üzerine basılı tutarak eklemek istediğiniz yere sürükleyip bırakalım. Resmi şu şekilde de ekleyebilirsiniz: Resim eklemek istediğiniz yere bir kere tıklayın. En üstteki menüden Ekle>Resim>Dosyadan... menü butonlarına tıklayalım ve eklemek istediğimiz resmi seçip Ekle butonuna tıklayalım.
Flash dosyalarını veya video dosyalarını da benzer şekilde sayfalarınıza ekleyebilirsiniz. Flash veya video dosyasını Klasör Listesi bölümünden sayfaya sürükleyip bırakarak veya Flash eklemek için Ekle>Resim>Flash Biçiminde Film... menü butonlarını, video eklemek için ise Ekle>Resim>Video menü butonlarını tıklayarak da sitenize flash veya video ekleyebilirsiniz
4...
Bu sayfada web sitelerinde kullanılan tablolara, nasıl kullanıldıklarına ve tablo kullanmanın ne gibi faydaları olduğuna değineceğiz.
Tabloları kullanarak sayfalardaki içeriği daha kolay yönetebiliriz. Örneğin bu sayfa tamamen tablolar üzerine kurulmuştur. Tabloları görebilmek için buradaki sayfayı ziyaret edin.
Tabloları kullanarak yazının yatay olarak başlama noktasını belirleyebiliriz.
Tabloları kullanarak bilgilerin daha kolay anlaşılmasını sağlayabiliriz
|
Arabalar
|
Satışlar
|
Fiyat
|
| Ferrari |
123 |
123,456 |
| Porsche |
123 |
123,456 |
| BMW |
123 |
123,456 |
Tablolar sayesinde farklı içerikleri birlikte kullanabiliriz.
| Tablo ile |
Tablosuz |
 |
 |
Tablo Nasıl Eklenir?
Tablo eklemek için eklemek istediğimiz yere bir kere tıklayalım ve en üstteki menüden Tablo>Ekle>Tablo... butonlarına tıklayalım. Tıkladıktan sonra aşağıdaki pencere açılacak ve tablomuzun ayarlarını belirleyebileceğiz. Bu pencereden tablomuzda kaç satır, sütun olacakğını, kenarlıkların boyutu, rengi gibi çeşitli ayarları değiştirebileceğiz.
Tablomuzu ekledikten sonra tablo ayarlarını değiştirmemiz gerekirse, tablo üzerine sağ tıklayıp açılan listeden Tablo Özellikleri butonuna tıklayarak tekrar aynı pencereyi açabilir ve tablo özelliklerini değiştirebiliriz. Tablo araç çubuğunu kullanarak da tablolarda değişiklik yapabiliriz. Örneğin eklediğimiz tablonun bazı hücrelerini birleştirebiliriz. Aşağıdaki resimde de görüldüğü gibi siteme bir tablo ekledim ve tablonun üst hücrelerini birleştirdim. Hücreleri birleştirmek için fare ile hücreleri seçiyorum ve araç çubuğundan hücreleri birleştir butonuna tıklıyorum.
Frontpage ile sitemize nasıl resim, video, flash ve tablo ekleyeceğimizi öğrendik. Artık sitemizin anasayfasını oluşturabiliriz. Ben sitemin anasayfasına 6 satırlı ve 3 sütunlu bir tablo ekledim ve 1,3 ve 5. satırlardaki hücreleri birleştirdim. Diğer hücrelere küçük resimler ekleyerek ve kategori sayfalarını yazarak anasayfamı oluşturdum. Aşağıdaki resimde hazırladığım sitenin anasayfasını görebilirsiniz. İlerleyen derslerde bu resimlere, ait oldukları kategorilerin anasayfalarına açılan linkler ekleyeceğiz.
.
5...
Bu derste sitemize nasıl yeni sayfalar ekleyeceğimizi ve site haritası oluşturacağımızı öğreneceğiz. Sitemize yeni sayfalar eklemek için index.html sayfasının kopyasını kullanacağız. Örneğin index.html sayfasını kopyalayıp adını arabalar.html olarak değiştireceğiz. Böylece adı farklı ancak tasarımı ve içeriği index.html ile aynı olan bir sayfa elde edeceğiz. Daha sonra sayfa içeriğini silip yerine araba resimleri ekleyerek yeni sayfamızı oluşturacağız.
Sitemize yeni sayfalar eklerken aynı zamanda site haritasını da oluşturmuş olacağız. Site haritasını sitemize menü eklemek için kullanacağız. Bu menüler sayesinde ziyaretçiler, sitemizin tüm sayfalarını dolaşabilecekler. Aşağıdaki resim bir site haritası örneğidir. Resimde gördüğünüz gibi anasayfa altına beş tane sayfa eklenmiş. Fotograf galerisi sayfasına ise iki tane alt sayfa eklenmiş. Bu hiyerarşik düzene göre, sitemize menüler ekleyebileceğiz veya menülerde gösterilmesini istediğimiz sayfaları belirleyebileceğiz.
Şimdi sitemize yeni sayfalar ve site haritası ekleyelim. Böylece site haritalarının nasıl kullanıldığını da daha iyi anlayacağız. Sırayla Web Sitesi ve Gezinti sekmekelerine tıklayarak sitemizin haritasını açıyoruz. Burada gördüğünüz gibi sadece index.html sayfası var.
Sayfa başlığını değiştirmek için üzerine sağ tıklıyorum ve açılan listeden Yeniden Adlandır butonuna tıklayarak Duvar Kağıtları yazıyorum. Sayfayı kopyalamak için tekrar sayfa üzerine sağ tıklıyorum ve Kopyala butonuna tıklıyorum. Yapıştırmak için ise tekrar index.html sayfası üzerine sağ tıklayıp Yapıştır butonuna tıklıyorum. Böylece sayfa index.html yani anasayfanın altına eklenmiş oluyor.
Aynı işlemi üç kere tekrarlayarak Arabalar, Oyunlar ve Çizgi Filmler sayfalarını oluşturdum ve sayfa başlıklarını değiştirdim.
Artık sayfalar sitemize eklendi. Dikkat ettiyseniz Frontpage yeni oluşturulan dosyalara index1.html, index2.html şeklinde isimler verdi. Şimdi bu dosya adlarını arabalar.html cizgi-filmler.html şeklinde değiştirelim. (Değiştirmemiz şart değil ancak değiştirirsek arama motorlarında sıralamamız artabilir) Hangi dosyanın hangi sayfaya ait olduğunu anlamak için bir sayfaya çift tıklayalım. Ben başlığı Arabalar olan sayfaya tıkladım ve index1.html sayfası açıldı. Şimdi Klasör listesindeki index1.html dosyasına sağ tıklayarak Yeniden Adlandır butonuna tıklıyorum ve sayfa adını arabalar.html olarak değiştiriyorum.
Aynı şekilde diğer sayfaların da isimlerini değiştirdim. Sayfa isimlerini değiştirirken ç,ş,ğ,ö,ü gibi Türkçe karakterler, özel karakterler ve boşluk kullanmamaya dikkat edin.
Yeni eklediğimiz sayfalardan arabalar.html sayfasının içeriğini silip yerine 3x3 bir tablo ekledim ve tablo hücrelerine küçük resimler ekledim. Bir sonraki dersimizde bu resimlere tıklandığında nasıl büyük resimlerin açılacağını öğreneceğiz. İşte arabalar.html sayfasının son hali:
6..
Bu dersimizde Frontpage ile menü ve link eklemeyi öğreneceğiz. Menü eklemek için önce sayfanın solundaki menü şablonunu siliyoruz. Sonra menü eklemek istediğimiz yere bir kere tıklayarak Ekle>Gezinti... butonlarına tıklıyoruz.
Yeni bir pencere açılıyor ve buradan ekleyeceğimiz menünün ayarlarını seçiyoruz. İleri butonuna tıklayarak ekleyeceğimiz menünün temasını ve dikey, yatay gibi ayarlarını seçip Son butonuna tıklıyoruz.
Son butonuna tıkladığımızda yeni bir pencere daha açılıyor ve buradan hangi linklerin gösterileceğini belirliyoruz.
Anasayfaya ekleyeceğim menü için Alt düzey seçeneğini işaretledim. Menüye anasayfanın da eklenmesi için sağdaki Giriş sayfası butonuna tıkladım. Bu ayarlar oluşturduğumuz site haritasına göre değişebilir. Örneğin arabalar.html sayfası index.html nin alt sayfası olduğundan, oraya ekleyeceğimiz menünde Aynı düzey ve Giriş sayfası seçeneklerini işaretlememiz gerekiyor.
Aşağıdaki resimde sitemize eklediğimiz menüyü görebilirsiniz. Bu menüde Anasayfa için Giriş Sayfası butonu eklenmiş. Bu butondaki yazıyı Araçlar>Site Ayarları>Gezinti butonlarına tıklayarak değiştirebilirsiniz.
Linkler
Şimdi sayfamıza nasıl link ekleyeceğimize değinelim. Yazıları veya resimleri link olarak kullanabiliriz. yapmamız gereken yazıyı veya resmi seçip üzerine sağ tıklayarak Köprü... butonuna tıklamak ve link vermek istediğimiz sayfayı seçmek veya web sitesinin adresini yazmak.
Bu şekilde web sayfalarına veya dosyalara link verebiliriz. Örneğin bir linke tıklandığında resmin açılmasını istiyorsak sayfa yerine resim dosyası seçmemiz gerekir. Bir dosyanın sitemizden download edilmesini istiyorsak dosyayı Winzip veya Winrar programı ile zipleyin ve zip dosyasına link verin. Link verdiğimiz sitenin veya sayfanın yeni pencerede açılmasını istiyorsak linke hedef (target) özelliği atamamız gerekiyor. Hedef çerçeve... butonuna tıklayıp açınan pencereden Yeni Pencere seçeneğini işaretleyerek, link verdiğiniz sayfaların yeni pencerede açılmasını sağlayabilirsiniz.
YAPTIĞIMIZ SİTEYİ İNTERNETTE YAYINLAYALIM..
Başlarken...
İnternette ücretli ve tamamen ücretsiz hizmet veren siteleri kullanarak sitenizi yayınlamanız mümkün. Eğer uzun süre yayında kalacak bir site yapmak istiyorsanız ücretli domain ve hosting kullanmanızı tavsiye ediyoruz. Özellikle Joomla, SMF ve phpBB gibi veritabanı kullanan siteler ücretsiz hosting paketlerinde sürekli hata veriyor, sitenizi başka bir sunucuya taşımak istediğinizde veritabanını kopyalayamıyorsunuz ve tüm emekleriniz boşa gidiyor. Öğrenmek amacıyla bedava hosting veren siteleri kullanabilirsiniz ancak sitenizin uzun süre, hata vermeden, problemsiz ve hızlı bir şekilde açılmasını istiyorsanız ücretli ve kaliteli hizmet veren siteleri kullanmanızı tavsiye ederiz. Biz de bedava site yapımını anlattığımız sitemiz için ücretli domain ve hosting kullanıyoruz.
Bu sayfada google.com, youtube.com gibi sonu genellikle com, net, org ile biten domainleri nasıl alıp kullanacağımıza değineceğiz. Bu domainleri ücretsiz almanız ve kullanmanız mümkün değildir. Ücretli domain almamanız durumunda sitenizin adresi siteadi.awardspace.com veya siteadi.hostsitesi.com şeklinde olur. Eğer ücretli domain almak istemiyorsanız bu dersi atlayabilirsiniz ancak yinede ne olduğunu daha iyi anlamak için okumanızı tavsiye ediyoruz.
Domain (Alan Adı) Nedir?
Web sitelerine girmek için kullandığımız google.com youtube.com gibi sonu genellikle com, net, org, info, name ile biten adreslere domain (alan adı) denir.
Web sitelerine girmek için IP numaralarını kullanırız. Örneğin 66.249.93.104 IP numarası ile Google'ye girebiliriz. Numaraları ezberlemek veya hatırlamak zor olduğu için IP numaraları yerine domainler kullanılır. Yani domainler IP numaraları yerine kullanılan isimlerdir. Tarayıcımıza bir domain yazdığımızda domain bizi bir IP numarasına yönlendirir. Cep telefonlarındaki telefon defterleri de aynı şekilde çalışır. Mesela telefon defterine Hüseyin adında bir kişiyi kaydettiğimizi düşünelim. Telefon defterine girip Hüseyin'i aradığımızda, telefonumuz Hüseyin'in numarasını çevirir. Aynı şekilde tarayıcımıza bir domain yazdığımızda, domainin kayıtlı olduğu IP numarasına yönlendiriliriz.
Domain Nasıl Alınır?
Alan adı alabileceğiniz onlarca web sitesi var. Bu sitelerden com, net, org ve bunun gibi uzantılara sahip domainleri 5-15 dolar arası ücret ödeyerek bir yıllığına kullanabilirsiniz. Bu uzantılara sahip domainleri ücretsiz bulmanız malesef mümkün değil. Alan adı kaydı denince akla gelen ilk sitelerden birisi GoDaddy.com'dur. GoDaddy, milyonlarca domain kaydederek alan adı kaydı piyasasında en büyük paya sahip şirkettir. Ben de domain kaydetmek için Godaddy.com'u kullanıyorum ve size de Godaddy kullanmanızı tavsiye ederim.
www.GoDaddy.com (Eğer nasıl üye olacağınızı bilmiyorsanız
Godaddy'den Domain Almak sayfasından yardım alabilirsiniz.
Hosting Nedir?
Hosting, kelime anlamı olarak ev sahipliği yapma, barındırma anlamına gelir. Web hosting ise web sitelerinin sürekli ve yüksek hızda internet erişimi olan bilgisayarlarda depolanmasına denir. Web siteleri bu bilgisayarlarda depolanarak internet kullanıcılarının siteleri ziyaret etmeleri sağlanır. Biz de bir hosting hesabı açıp sitemizi yollayacağız ama öncelikle yüzlerce hosting paketi içerisinden bir seçim yapmamız gerekecek. Çünkü her hosting hesabı aynı özelliklerde ve sitemizin ihtiyacını karşılayacak özelliklerde olmayabilir. Hosting hesaplarında çeşitli kotalar veya sınırlamalar olur. En önemli kısıtlamalar web alanı ve bandwidthdir.
Limitler
Web Alanı: Hosting paketlerinin alanı sınırlıdır. Örneğin 200 mb limiti olan bir hosting hesabına 300 mb boyutundaki web sitesini gönderemezsiniz.
Bandwidth: Sitemizden bir ayda download edilebilecek dosya boyutudur. Limitli ADSL paketlerindeki kota ile aynı şeydir. Örneğin 4 gb limitli adsl paketini kullanan bir kişi bir ayda 4 gb dosya indirebilir. Bu limiti aştığında fazladan para öder. Bandwidth ise indirme yerine gönderme boyutuna sınırlama getirir ve bu limit aşıldığında sitemizde Bandwidth Limit Exceeded hatası verir ve sitemiz açılmaz.
Bunlara ek olarak ücretsiz hosting sitelerine özgü bazı kotalar vardır. Bunlar ise genel olarak:
Dosya Boyutu: Sunucuya göndereceğiniz en büyük dosya boyutunu belirler. Örneğin dosya boyutu limiti 5 mb ise 6 mb büyüklüğündeki dosyayı sunucunuzda yeterli yer olsa bile gönderemezsiniz.
PHP Send Mail: Bazı bedava hosting paketlerinde mail gönderme fonksiyonu kapalıdır. Bu hosting paketlerinde forum kurarsanız, üyelere gönderilmesi gereken aktivasyon maili gönderilemez.
Hosting Hesabı Açalım
Bedava hosting hizmeti veren yüzlerce site var ancak bunlardan çok azı aradığımız özelliklere sahip. Aşağıdaki tabloda bulabildiğimiz en iyi bedava hosting hizmeti veren siteleri yazdık. Bunlardan bir tanesine veya sizin bildiğiniz daha iyi özelliklere sahip bedava hosting veren site varsa oraya üye olarak hosting hesabı açın. Biz sitemizde awardspace.com'un verdiği ücretsiz hosting ile site yayınlamayı anlatacağız. awardspace.com'a üye olmakta zorluk çekiyorsanız buradan detaylı anlatımına ulaşabilirsiniz.
Bedava hosting ile site açtıktan sonra sitemizin adresi http://abc.xyz.com şeklinde olacak. Örneğin siteforum.awardspace.com veya http://ornekforum.freezoka.com gibi.
Domain Yönlendirme
Bu sayfada domain ile hosting arasındaki bağlantıyı nasıl kuracağımızı anlatacağız. Domain yönlendirme işlemini tamamlamak için iki üründe de bazı ayarlar yapmamız gerekiyor. Domainde yapmamız gereken değişikliklerle başlayalım.
Domain Ayarları
Hosting paketi açtığımızda, paketin kullanıcı adı, parolası, ftp adresi gibi bilgiler e-postamıza gönderilir. Bu bilgilerin yanında genellikle ns1.hostsitesi.com şeklinde olan nameserver adresleri de gönderilir. Domain yönlendirme işlemini yapmamız için aldığımız domainin nameserver bölümüne, hosting hesabımızım nameserver adreslerini yazmamız gerekir. Aşağıdaki resimde alan adına ait nameserver ayarlarını ns1.hostsitesi.com olarak değiştirdiğimi görebilirsiniz.
Nameserver adreslerini yazıp kaydettikten sonra domainde yapmamız gerekeni tamamlamış oluyoruz. Ancak bu işlemin tamamlanması bazen zaman alabiliyor Yaptığınız değişikliklerin tam olarak çalışması için 1-2 gün beklemeniz tavsiye ediliyor.
Eğer nameserver adreslerini içeren maili sildiyseniz, hosting sağlayıcınıza sorarak öğrenebilirsiniz. Ayrıca bu bilgiler sıkça sorulan sorular bölümlerinde veya hosting hesabınızın kontrol panelinde büyük ihtimalle yazıyordur.
(Bedava) Hosting Paketi Ayarları
Domainin nameserver ayarlarını değiştirdikten sonra hosting hesabımızdan domaini eklememiz gerekiyor. Bu işlemi yapmak için hosting paketinin yönetim panelinden Domain Manager veya Add-On Domains bölümüne girerek alan adını yazmamız ve kaydetmemiz gerekir. Her hosting paketinde kontrol paneli farklı olduğu için örnek olarak awardspace.com'da alan adı eklemeyi gösterelim. Aşağıdaki resimde de görüldüğü gibi önce Website Manager daha sonra da Domain Manager linkine tıklıyoruz.
Açılan sayfadaki bölümealan adını yazarak Add Domain butonuna tıklıyoruz ve domain yönlendirme işlemini tamamlamış oluyoruz.
VE SON OLARAK HAZIRLAMIŞ OLDUĞUMUZ SİTEYİ HOSTİNGİMİZE NASIL GÖNDERECEĞİMİZ
ALTTAKİ SİTEDE VİDEO OLARAK ANLATILMIŞTIR....
http://www.bedavasiteyapmak.com/site-yayinlama/site-gonderme2.html
,
