Dreamweaver'i İndirin
Aşağıdaki bağlantıları kullanarak Dreamweaver CS5'in deneme sürümünü indirebilirsiniz. Dosya iki parçadan oluşmaktadır. İki parçayı indirdikten sonra Winrar programı ile kurulum dosyasını rar dosyasından çıkarıp Dreamweaver kurulumunu yapabilirsiniz.Dreamweaver indir: Birinci Parça ve İkinci parça
Website Şablonu ve Hazırlanması
Dreamweaver ile boş bir sayfadan başlayarak kendi web sitenizin tasarımını yapabilir veya hazır site şablonlarını kullanarak sitenizi inşa edebilirsiniz. Ben tasarım konusunda yetenekli olmadığım için hazır website şablonu kullanıyorum. Dreamweaver ile site yapımını anlatırken de hazır bir web sitesi şablonu kullanacağım. Profesyonel web tasarımcıların yeteneklerinden yararlanabilmeniz için hazır web sitesi şablonları kullanmanızı tavsiye ederim.Bu sayfada bir web sitesi şablonunun site yapımı için nasıl hazırlanacağını, web siteleri ve site dosyaları hakkında genel bilgileri paylaşacağım. Anlatımı hazırlamak için aşağıdaki şablonu kullanacağım. (Aynı şablonu Website Şablonları sayfasından indirebilirsiniz).
Şablon dosyalarını hazırlamak için dosyayı indirdim, rar dosyası içerisinden çıkardım ve çıkan dosyaları Websitem isimli bir klasör içerisine kopyaladım.
Resimlerde kullanacağım şablonun nasıl göründüğünü ve şablon dosyalarının nasıl olması gerektiğini görebilirsiniz.Yukarıdaki şablon site yapımının anlatılacağı bir site için uygun değil ama bazı küçük değişikliklerle uygun hale getirilebiliyor. Ben yukarıdaki şablonun logosunu değiştirerek ve sol tarafa menü ekleyerek kendi sitemi oluşturdum. Şimdi kısaca kök klasör ve içindekilerin ne olduğunu ve ne işe yaradığını açıklayayım.
Kök Klasör: Site dosyalarının tamamını içinde barındıran klasöre kök klasör denir. Sitede kullanılacak tüm resim, fotoğraf, video ve diğer dökümanların tamamının bu klasör içinde olması gerekir. Örneğin sitenize bir resim ekleyecekseniz önce resmi kök klasör içine kopyalamalı, sonra sayfanıza eklemelisiniz. Aksi halde sayfalara eklenen resimler ve diğer dökümanlar, sitenizi yayınladıktan sonra gösterilmez. Yukarıdaki resimde gösterilen Websitem klasörü hazırlayacağım sitenin kök klasörüdür.
index.html: Bu dosya bir web sayfasıdır ve anasayfa olarak kullanılır. Web tarayıcınıza bir adres yazdığınızda size index.html sayfası gösterilir. Örneğin bedavasiteyapmak.com sayfasına girdiğinizde tarayıcınız size index.html sayfasını gösterir. Bu nedenle bu dosyanın adını ve konumunu değiştirmememiz gerekiyor.
images klasörü: Bu klasör şablonumuzun kullandığı varsayılan resimler dosyasıdır. Site dosyalarının daha düzenli olması için bu klasör resimler klasörü olarak kullanılır. Bazı şablonlarda bu klasörün adı farklı olabilir.
Css klasörü: Bu klasör sayfa görünümünü ve yazı ayarlarını düzenleyen dosyaları içerir. Bu klasörü kullanmayacağız ancak sayfa tasarımında, düzeninde bir probleme neden olmaması için silmeyeceğiz.
templatemo_style dosyası: Bu dosya da bazı css kodları içerir. Bu dosyayı da kullanmayacağız ve silmeyeceğiz.
Dreamweaver'de Website Tanımlama
Dreamweaver programı ile site yapımına başlamamız için ilk yapmamız gereken şey, kullanacağımız şablonu Dreamweaver'e tanıtmaktır. Bu işlemi yapmadan site yapımına başlarsak sayfalara eklenecek kodlarda hata oluşur ve siteniz çalışmaz. Bu nedenle site tanımlama işlemini yapmadan önce kesinlikle site dosyalarında bir değişiklik yapmamalı ve dosyaların yerlerini değiştirmemelisiniz.Dreamweaver'de Site Nasıl Tanımlanır
Adım 1. Üstteki menüden Site>New Site... butonlarına tıklayın. Açılan pencereden siteniz için herhangi bir isim yazın, sitenizin kök klasörünü ve varsayılan resimler klasörünü seçin.Adım 2. OK butonuna tıkladıktan sonra siteniz tanımlanacak ve sitenizin dosya ve klasörleri dosya panelinde gösterilecektir. Bu aşamadan sonra Dreamweaver kullanarak site dosya ve klasörlerinin ad ve konumlarını değiştirebilirsiniz.
Eğer site şablonu kullanmayıp, sıfırdan kendi web sitenizi tasarlamak istiyorsanız, herhangi bir yere boş bir klasör açın ve içerisine resimler adında boş bir klasör ekleyerek yukarıdaki iki adımı uygulayın.
Dreamweaver'de Tabloları Kullanmak
Dreamweaver ile site yapmak istiyorsanız tabloları nasıl kullanacağınızı öğrenmeniz gerekir. Tabloları kullanmak çok kolay olmasına rağmen başta biraz zor gelebilir. Birkaç dakika tablolarla uğraşırsanız nasıl kullanmanız gerektiğini öğrenebilirsiniz. Bu sayfada tabloların temel olarak nasıl kullanıldığını anlatıp birkaç örnek göstereceğim.Günümüzde Dreamweaver gibi HTML düzenleyici programlarla hazırlanan sitelerde, tabloların yerini CSS dili ile düzenlenen div'ler almıştır. CSS basit ve öğrenmesi kolay bir dildir ama kafanızın karışmaması için CSS konusuna girmiyorum. Site yapımını öğrendikten sonra kendinizi geliştirmek isterseniz CSS konusunuda araştırmanızı tavsiye ederim.
Yatay Hizayı Ayarlamak
Dreamweaver'de bir metin resim veya videoyu sayfa ortasına veya yatay olarak istediğiniz hizaya getirmek için tabloları kullanmanız gerekir. Aşağıdaki örnekte text yazısı yatay olarak farklı hizalara tablo kullanılarak getirilmiştir. İlk örnekte tablo kullanılmıştır ancak köşe kalınlığı sıfır olarak ayarlandığından görülememektedir.
|
| ||||||||||||||||||
Daha İyi Tasarım
Tablo ve hücre arkaplan renklerini değiştirerek tasarımı daha iyi yapabilir ve içeriğin daha anlaşılabilir olmasını sağlayabilirsiniz.Arabalar | Satışlar | Fiyat |
| Ferrari | xyz | 123,456 |
| Porsche | xyz | 123,456 |
| BMW | xyz | 123,456 |
İçeriği Düzenleme
Tablolar farklı içerikleri beraber kullanabilmemizi sağlar. Aşağıdaki örnekte tablonun bir hücresine resim diğer hücresine ise yazı yerleştirilmiştir. Diğer örnekte ise tablo kullanılmadığında ne olduğu gösterilmiştir.| Tablo Kullanıldığında | Tablo Kullanılmadığında |
 |  |
Dreamweaver'de Taslak Uygulaması
Dreamweaver'de bulunan taslak uygulaması site yapımını son derece kolaylaştırmaktadır. Taslak uygulaması sayesinde aynı anda sitenizin yüzlerce sayfasında değişiklik yapabilir, diğer sayfalarla aynı tasarıma sahip bir sayfayı birkaç saniyede oluşturabilirsiniz. Kısaca taslak uygulamasının çalışma mantığına ve nasıl kullanacağınıza değinelim.Taslak Uygulaması Nasıl Çalışır?
Taslak uygulamasını kullanabilmeniz için tasarımı yapılmış ancak içerik (yazı, resim, video vb) eklenmemiş boş bir sayfa gerekir. Bu sayfa Dreamweaver ile taslak olarak tanımlanır ve bu taslakla yeni sayfalar oluşturulur. Taslak kullanılarak oluşturulan sayfalarda değişiklik yapmak için sadece taslakta bir defa değişiklik yapmak yeterli olur. Taslakta yapılan değişiklikler diğer sayfalarda otomatik olarak yapılır. Örneğin sitemin menüsüne Reklam adında bir buton eklemem gerektiğinde, tüm sayfalarda tek tek buton eklemek yerine sadece taslak dosyasında bağlantı eklemek yeterli olacaktır ki bu da hem daha az zaman harcamamı hem daha kolayca işlem yapmamı sağlayacaktır.Taslak olarak tanımlanan sayfaların sadece seçtiğiniz bölümlerinde değişiklik yapabilirsiniz. Bu sayede farkında olmadan site tasarımını değiştiremezsiniz ve tüm sayfalar birebir aynı olur.
Sayfaya Resim Flash ve Video Ekleme
Bu sayfada web sayfalarına Dreamweaver ile nasıl resim, flash dosyası ve video eklendiğini açıklayacağım.Öncelikle sayfaya ekleyeceğiniz tüm resim video ve diğer dökümanların tamamını kök klasör içine kopyalamalısınız. Bu tür dosyaları genellikle resimler klasörü oluşturup oraya kopyalamayı tercih ederim.
Resimleri sitenize eklemeden önce resim ekleyeceğiniz yere uyacak şekilde düzenlemeniz daha iyi olur. Resimlerin boyutlarını, ölçülerini düzenlemek için Paint, Fireworks veya PhotoShop kullanabilirsiniz. Ben kullanım kolaylığı nedeniyle Adobe Fireworks'u kullanıyorum, size de tavsiye ederim.
Sayfaya Resim Eklemek
Resim eklemek istediğiniz yere bir kere tıklayın. Üstteki menüden Insert>Image... butonlarına tıklayın ve açılan pencereden eklemek istediğiniz resmi seçin. Eklemek istediğiniz resmi dosyalar panelinden resim eklemek istediğiniz yere sürükleme metoduyla da resim ekleyebilirsiniz. Resim ekledikten sonra açılan pencereyi boş bırakabilir veya resme uygun kısa bir metin yazabilirsiniz.Sayfaya Flash Eklemek
Sayfaya flash dosyası eklemek resim ekleme yöntemiyle aynıdır ancak Insert butonuna tıkladıktan sonra Image yerine Media>SWF butonlarına tıklamanız gerekir.Sayfaya Video Eklemek
Sayfanıza video eklemek için önce videoyu flash dosyasına dönüştürmelisiniz. Flash dosyasına çevirdikten sonra yukarıda anlatıldığı gibi sitenize ekleyebilirsiniz. Videoları önce Youtube'ye yükleyip Youtube kodunu yardımıylada web sayfalarına video ekleyebilirsiniz. Ben Youtube aracılığıyla sitenize video eklemenizi tavsiye ederim ancak bunu nasıl yapacağınızı sayfaya kod ekleme sayfasında anlatacağım.Sayfaya Link Ekleme
Linkler (bağlantılar) site ziyaretçilerinin bir sayfadan diğerine gitmelerine imkan sağlar. Bir sayfa üzerinde link olmazsa, ziyaretçiler sitenin diğer sayfalarına gidemezler. Bu nedenle web sayfalarından diğer sayfalara gitmeye yarayacak linkler veya menüler olmalıdır.
Sayfaya Kod Ekleme
Web sayfalarına link, reklam, sayaç kodu gibi kodlar eklemeniz gerekebilir. Bu sayfada bir web sayfasına Dreamweaver kullanarak nasıl kod ekleyeceğinizi göstereceğim.
Sayfaya kod eklemek için kod eklemek istediğiniz yere bir kez sağ tıklayın ve menuden Insert HTML butonuna tıklayın. Küçük bir pencere açılacaktır. Pencerenin içindeki parantez işaretlerini sildikten sonra kodu bu bölüme kopyalayıp enter tuşuna basın.Kod eklemek için kullanacağınız diğer metod ise şudur: Kod ekleyeceğiniz yere herhangi birşey yazın ve fare ile bu yazıyı fosforlayıp sayfayı kod görünümünde gösterin. Kod görünümünde fosforladığınız yazıyı silip eklemek istediğiniz kodu yapıştırın.
0 yorum:
Yorum Gönder