Dinamik Web Sitesi – Bölüm 01- Tasarımı Oluşturma

3/5/2007
Dinamik bir web sitesi oluşturma makale serisinin bu ilk bölümünde, tasarımı master page’e oturtma ve CSS kuralları oluşturmayı inceleyeceğiz. Bu sürecin, önceki makalelerden farkı bu işlemleri değişik yollar izleyerek yapacak olmamız. Daha çok Expression Web araçlarını kullanarak oluşturacağımız bu site örneğinin, web tasarımına yeni başlayanlar ve CSS’e tam hakim olmayanlar için yararlı olacağını düşünüyorum. Bu makalede de siteyi table kullanmadan oluşturacağız.

Oluşturacağımız site basit bir FRP(Fantasy Role Playing) kitap sitesi. Bu sitede kitapların tanıtımları, listesi, yazarlar, mesajlar gibi bölümler olacak ve bunların hepsi dinamik olarak oluşturulacak.

İlk önce site için lokalde bir klasör yarattım. “Doc” da site için dokümanlar, “Logovs” de sitenin kaynak dosyaları, “images”de ise sitenin imajları bulunacak.

Hazırlayacağımız siteyi şu şekilde tasarladım. Header, footer ve sol navigasyon alanı Master Page’de oluşturulacak. Sağ kısım ise değişen içerik alanı olacak.

Siteyi EW’ye (Expression Web) tanıtmak ile başlıyalım.

File>New>Web Site ile New penceresini açıyoruz.

Web Site tabında, General, Empty Web Site’yi seçiyoruz.

Browse ile sitenin duracağı klasörü seçiyoruz ve Open’a basıyoruz.

Daha sonra sitemizin ismini klasörlerin devamına elle yazıyoruz.Bu örnekte “FRP Kitap Sitesi”ni kendimiz yazdık. OK’e basıp işlemi tamamladık.

EW lokaldeki klasörün içinde ismini bizim belirlediğimiz bir klasör yarattı. Tüm çalışmalar, bu klasörün içinde gerçekleştirilecek.

Fark ettiyseniz “images” klasörü “FRP Kitap Sitesi” klasörünün dışında kaldı. Oysa biz o imajları sitede kullanacağız. Bu sebeple o klasörü site klasörünün içine almamız gerekiyor.

File>Import>File

Açılan Import penceresinde, “Add Folder” a basarak images klasörümüzü bulup ekliyoruz ve OK diyerek işlemi bitiriyoruz.

Şimdi Master Page’i oluşturalım. Daha önceki makalelerimde Master Page’in ne olduğunu açıklamaya çalışmıştım. Kısaca değinmek gerekirse, master page bir şablondur. Sitenizin değişmeyen alanlarını master page’de oluşturur, tüm sayfaları bundan türetirsiniz. Daha önceki makalelerimde Dynamic Web Template ile Master Page arasındaki farkları anlatmıştım ama burada bir şey daha eklemek isterim. Master Page’nizde bir değişiklik yaptığınızda, master page’den yaratılmış sayfalar hiç bir şey sormadan otomatik değişir. Bunu yanında Dynamic Web Template’de değişiklik yaparsanız Dynamic Web Template ile yaratılmış sayfaları update etmek isteyip istemediğinizi soran bir ekran gelir.

Master Page için File>New>Page

Açılan New penceresinde Page tabında General’dan Master Page’i seçiyoruz. Programming Language aslında tasarımcıyı pek ilgilendiren bir seçenek değil. Bu daha çok sitenin kodlamasını, programcı arkadaşlarınızın hangi dille yapacağına ya da programcı iseniz hangi dili kullanıyor olduğunuza bağlı. Biz C# seçip OK ile işlemi tamamlıyoruz.

ContentPlaceHolder’lı Master Page’imiz açılıyor.

ContentPlaceHolder’ı seçip siliyoruz. Tasarımı sonlandırana kadar buna ihtiyacımız olmayacak. En sonunda biz kendimiz ContentPlaceHolder ekleyeceğiz. Bu işlemi tagların göründüğü barda, tagın yanındaki oka tıklayıp açılan menüden yapabileceğiniz gibi (Remove Tag), direk Delete tuşuyla da yapabilirsiniz. Tagları barındıran bar iç içe girmiş tagları seçmenizde de size çok yardımcı olacaktır.

Artık Master Page’imizi kaydedebiliriz. İsim verip kaydetmek istediğimizde bir uyarı alıyoruz. Bu uyarı ContentPlaceHolder’ı silmemizden kaynaklanıyor. Biz sonra Content alanı ekyeceğiz. Yes’e basıp uyarıyı geçiyoruz.

Bu makalede diğerlerinin aksine external CSS sayfası açmayacağız. Tüm bu işleri bizim için Expression Web yaptıracağız. Şimdi tasarımımızı master page’e oturtmaya başlayabiliriz.

File>Properties ile veya sayfanın boş bir yerine sağ klik “Page Properties” ile Page Properties penceresini açıyouz. General tabında title ile Keywords’leri yazıyoruz

Language tabında sitemizi Türkçe olarak ayarlıyoruz.

Şimdi BODY, CSS’ini oluşturacağız. Bu makalede bunu yaparken değişik ve daha kolay bir yol izleyeceğiz. Manage Styles kutucuğundaki New Style… linkine tıklıyoruz. (Manage Styles eğer çalışma ekranınızda değilse menüden Task Pane ile açabilirsiniz.)

Karşımıza CSS kurallarını kolayca yazabileceğiniz, New Style penceresi geliyor.

Selector alanına istediğimiz ismi verebiliriz. Ama hazır CSS kuralları için bir listede mevcut. Bu listeden “body”yi seçiyoruz. (Bu liste ayrıca hazır CSS kurallarını bir arada görmeniz açısından da güzel bir fırsat). “body”‘yi seçtikten sonra font sitillerimizi oluşturuyoruz.

Her şeyi belirlemeniz New Style penceresi ile oldukça kolay. Şimdi “background” u oluşturalım. background-color rengi için “More Colors…”ı seçiyorum.

Gelen pencerede Value kutusuna “3F3F3F” renk kodunu yazıp Enter’a basınca alttaki alttaki şekle geliyor. OK deyip çıkıyorum.

Değerleri seçmek yerine elle girebileceğinizi de unutmayın. Sırada “background-image” ve onun repeate’i var. Bunları da giriyorum. (Arka plan imajını girerken tam yol gelip gelmediğine dikkat edin. Eğer bu olursa kutunun içine tıklayıp silerek düzeltmenizi yapabilir, linkinizi göreceli hale getirebilirsiniz.)

Peki bu ana kadar arka planda neler oldu. Expression Web neler yaptı. Sol altta yer alan görünüm butonlarıyla bunu kontrol edebilirsiniz.

Şu ana kadar  yaptıklarımızın sonucunda EW’nin ürettiği kod aşağıdaki gibidir. Burada kırmızı olan koda dikkat edin. Bu daha önce external CSS dosyalarına yazdığımız, CSS’den başka bir şey değil. Ama sayfanın HEAD tagının içinde yer alıyor. Peki yüzlerce satır CSS yazacaksak, zaten kod içinde olan sayfaların üstüne CSS yazmak biraz kötü bir şey değil mi? Bunu hiç dert etmeyin. Biz devam edelim. EW zamanı geldiğinde bu düzenlemeyi sizin için yapacak.

Biz tasarımı uygulamaya devam edelim.

Design görünümündeyken, FORM tagının içine tıklayıp Toolbox>Tags altındaki <div> objesine çift tıklıyoruz. Bu bizim header DIV’imiz olacak.

Manage Styles kutusundaki New Style… a tekrar tıklayıp New Style penceresini açıyoruz. Selector’un ismini bu sefer biz veriyoruz. İsmin önüne neden “#” eklediğimizi veya ne zaman “#” ne zaman “.” ekleyeceğimizi önceki makalelerimde anlatmıştım. DIV için Position’da “Width” ve “height” yazıyoruz. Ardından position’da margin right ve left’i auto yapıyoruz. Bu DİV’imizi her zaman sayfaya ortalayacak. Biz sitilleri yazdıkça alttaki description alanında yazılanların gösterildiğine dikkat edin.

CSS kuralımız hazır.

Yapmamız gereken DIV’i seçip, Apply Styles kutusunda “#header” kuralına tıklamak. Peki DIV i seçmenin en kolay yolları nelerdir? HTML’e hakimseniz, Split görünümünde DIV’i seçebilirsiniz. Ya da DIV’inde içine Design görünümünde tıklayarak, Tagların göründüğü barda DIV’e tıklayarak seçebilirsiniz. CSS’i DIVe bağlıyoruz. Sonuç.

Şimdi DIV’in içine header imajını giriyoruz. Lütfen imajlarınıza “alternate text” vermeyi unutmayın.

Şimdi imaja ana sayfaya dönmek için link vereceğiz. Üstüne tıklıyoruz. Ya menu’den Insert>Hyperlink’e ya da bar’dan Hyperlink kısa yoluna tıklayarak, hyperlink penceresini açıyoruz. Address bölümüne linkimizi elle yazıyoruz çünkü henüz böyle bir sayfa yok.

Şimdi içeriğin bulunacağı alanı oluşturacağız. Header DIV’nin hemen altına bir başka DIV tagı açıyoruz. Bu DIV seçiliyken Manage Styles’dan New Style basıyoruz.  ismi “#container” olarak belirliyoruz. Widht,i 960px, right ve left marginleri auto yapıyoruz. Burada dikkat edeceğimiz şudur. Eğer New Style’a bir tag’ı (burada DIV) seçerek basarsanız ve “Apply new style to document selection” kutucuğunu işaretleyerek OK basıp işleminizi bitirirseniz, seçtiğiniz DIV ile CSS kuralınızı bağlanmış olarak işinizi bitirirsiniz.

Aslında #container’a arka plan resmide ekleyecektik ama ilk seferde bunu unuttuk. Şimdi container kuralını düzenleyelim. İlk önce Manage Styles ve Apply Styles kutularında kuralların üzerinde mouse imlecini bekletince, o kural ile ilgili tüm sitilleri görebileceğimizi söylemeliyim. Güzel bir özellik.

Düzenlemek isteğimiz CSS kuralına sağ klik yapıp Modify Style tıklayınca  açılan pencereden CSS’imizi düzenleyebiliyoruz.

container kuralına background imajı ekliyoruz.

Şimdi footer’ı oluşturacağız. İlk önce container DIV’in altına bir DIV daha giriyoruz. Bu DIV seçiliyken New Style’a basıyoruz.Marginlerimizi, backgroundumuzu, uzunlukları belirliyoruz. Apply new style to document selection seçiliyken OK deyip çıkıyoruz.

Şimdi container’in içinde bulunacak alanları oluşturalım. İlk önce navigasyon. Container DIV’nin içinde bir DIV yaratıyorum. Bu navigasyonu içinde tutacak DIV olacak. DIV seçiliyken New Style ile sitilleri belirliyorum.

More Colors penceresinde Select ile renk çalabilirsiniz.

Tekrar container DIV’nin içine bir DIV daha giriyorum bu da bizim içerik alanımızı oluşturacak. New Style ile CSS kuralını hazırlıyoruz.

Şimdi container içine son bir DIV ekliyoruz. Bu DIV container ve navBox DIV’lerinin altında yer almalı. Açacağımız bu son DIV ile Firefox uyumluluğunu sağlayacağız. Bu DIV için alttaki kuralı New Style ile oluşturuyoruz.

Şimdi sitenin linklerini oluşturalım. New Style’a basıyoruz ve Selector menüsünden a:link’i seçerek linkimizi hazırlıyoruz.

Şimdi visited ve hover’ıda hazırlayacağız ama bunu yaparken farklı bir yol izleyeceğiz. Manage Styles’da “a:link”e sağ klik yapıp açılan menüden “New Style Copy”ye tıklıyoruz. New Style penceresi açılıyor. Yeni oluşturacağımız sitilin Selector’den ismini ve özelliklerini değiştirdiğimizde yepyeni sitilimiz hazır oluyor. Bir birine benzeyen CSS kuralları yazma aşamasında bu özellik işinizi çok kolaylaştıracaktır.

Link kurallarımızı oluşturduğumuza göre şimdi navigasyona geçebiliriz. İlk önce DOC klasöründe word’de yazdığım navigasyonu kopyalıyorum.

navBox DIV’nin içine yapıştırma işlemi için Edit>Paste Text’i seçiyorum.

Açılan Paste Text penceresinde “Normal paragraphs without line breaks” i seçip OK’e basıyorum.

Menünün <p> taglarıyla geldiğini Split görünümünden görebilirsiniz.

Design görünümündeyken sol kliğe basılı tutarak menüyü seçiyoruz ve menüden Formt>Bullets and Numbering’e tıklıyoruz.

Açılan Bullets and Numbering penceresinde Plain Bullets tabına tıklayıp, sol üstteki görünümü seçiyoruz.

Bu işlemin sonucunda menünüzün alttaki şekilde taglandığını göreceksiniz.

Bu işlemlerin sonucunda menünün aldığı görünüş istediğimiz bir görüntü değil. Elbette bunu değiştireceğiz ama önce menü elemanlarına linklerini verelim.

Tek tek menü elamanlarını seçip “Insert Hyperlink” butonuyla gelen ekrana ileride oluşturacağımız sayfa isimlerini veriyoruz. Sayfaları oluştururken Türkçe karakter kullanamayacağınızı unutmayın.

Şimdi <ul> ve <li> taglarını kullanarak menümüzü düzenleyeceğiz. İlk önce UL için CSS kuralı oluşturuyoruz.

Şimdi LI için CSS kuralı oluşturacağız. New Style’a basıp gelen pencerede LI için sitilleri belirliyoruz.

Bunu yaptığınızda göreceksiniz ki linkler istediğimiz yeşil rengi alamadı . Çünkü bu linkler genel <a> tagından etkileniyor. Bu sebeple navBox’a özel <a> CSS’i hazırlayacağız. LI CSS’inden sağ klik “New Style Copy” ile bir tane daha CSS çıkarıp, bunun ismini “#navBox a” olarak değiştirip margin sitillerini sileceğiz. Böylece navBox’a özel bir <a> kuralı belirlemş olduk.

Navigasyon bittiğine göre, footer’ın altına alternatif navigasyonumuzu yaratarak devem edebiliriz. Footer DIV’nin altına bir DIV daha açıyoruz ve bunun için CSS kuralını hazırlıyoruz.

Aslında şu anda master page’e tasarımı oturtma işini bitirdik. Ama her şeyi tamamlamadan önce yapmamız gereken bir iki iş daha var. Öncellikle ileride işimize yarayacağını düşündüğümüz iki CSS kuralı daha oluşturacağız. Bunlar site içinde kullanacağımız imajları kontrol edecek kurallar. Sola yaslanmış imajlar için New Style’a basıyoruz ve kurallımızı yaratıyoruz.

Sağa yaslı imajlar için ise imageLeft kuralından çoğaltıyorum.

Değişiklikleri yapıyorum.

Evet artık CSS’lerimizi tamamladığımıza göre bunları external(harici) CSS dosyalarına taşıyabiliriz. Altta geçerli sayfada yaratılmış CSS kurallarının listesi görünüyor.

Sitillerinizin sıralamasını  Manage Style kutucuğu içinde sürükleyip bırakarak ayarlayabilirsiniz.

Şimdi site klasörümüzde CSS isminde bir klasör açalım. Eğer klasörü windows’da açarsanız. Bu klasörün projenizin Folder List’inde görünmediğini fark edersiniz. Yapmanız gereken tek şey Folder List içine tıklayarak refresh(F5) yapmak.

Şimdi üç adet CSS dosyası yaratıyoruz.

Ve bunları CSS klasörüne kaydediyoruz.

main.master sayfanıza dönüp Manage Style kutusundaki “Attach Style Sheet” i kullanarak format.css ve layout.css dosyalarını sayfanıza ekleyin.

Şimdi formata ve tasarıma ait olan CSS kurallarını bu harici CSS dosyalarına dağıtacağız. Bunun inanılmaz kolay bir yolu var yapmanız gereken tek şey, CSS kuralına tıklayıp (örnek .imageLeft) bunun sürükleyip harici CSS dosyasının isminin üstünde bırakmak (örnek format.css) Bununla hazırlamış olduğumuz CSS kuralları CSS dosyalarına yazılmış oluyorlar.

Şimdi ileri ve güzel bir teknik kullanacağız. CSS’lerimizi format ve layout olarak ayırdık ama sayfamızda bir CSS linki olsun diğer sayfalar bu tek linkten referans alsın istiyoruz. Bunun için master pagedeyken harici CSS dosyamızın ismine sağ klik yapıyoruz ve “Remove Link’e” basıyoruz.

CSS linkleri gidince sitemizin geldiği durum.

Şimdi main.css’i açıyoruz ve bu css’deyken Attach Style Sheet ile diğer CSS’leri (format.css, layout.css) main.css’e ekliyoruz.

Artık yapmamız gereken tek şey master page’e main.css linkini eklemek. Master page’de oluşan tüm kod alttaki gibidir.

Master Page’i tamamlamak için gereken son şey conten alanı. content DIV’ine sağ klik yapıyoruz ve açılan menüde “Manage Microsoft ASP.NET Content Regions”a tıklıyoruz.

Açılan pencerede content alanımız için Region name’e bir isim yazıyoruz. Bunu add butonu ile ekleyip Close ile pencereyi kapıyoruz.

ContentPlaceHolder’da eklendiğine göre master page hazır.

Şimdi master page’den statik olan sayfamızı “FRP Nedir?” sayfasını oluşturalım. File>Create from Master Page

Gelen pencerede Browse’a basıp master page’imizi bulup OK ile çıkıyoruz.

Evet master page’den ilk sayfamızı türettik. Şimdi bu sayfayı menüdeki link ismi ile aynı olacak şekilde isimlendirip kaydedelim. (frp.aspx)

frp.aspx sayfasında main alanının yanındaki ok’a tıklayarak Create Custom Content’e tıklayarak içerik alanımızı kullanıma hazır hale getiriyoruz.

frp.aspx’in tüm kodu alttaki gibidir. Title alanını Split görünümünde ben elle değiştirdim.

FRP nedir? yazısını kopyalayıp content DIV’nin içine yapıştırıyorum. Artık sayfamızı kontrol edebiliriz. File>Preview in Browser>Preview in Multiple Browsers ile bilgisayarınıza yüklü olan tüm tarayıcılarda sitenizi kontrol edebilirsiniz.

Sitemiz Internet Explorer’da da Firefox’da da hatasız çalışıyor.

Bu makalemde  tablo kullanmada DIV ve CSS ile site tasarımını anlattım. Bu makalenin diğer makaleden farkı bu siteyi oluştururken maksimum düzeyde Expression Web araçlarını kullanmamızdır. Bundan sonraki makalelerde bu makalenin devamı niteliğinde, şu anda tasarımını oturttuğumuz siteyi adım adım dinamik hale getireceğiz.

Teşekkürler

İyi çalışmalar