Dinamik Web Sitesi – Bölüm 01- Tasarımı Oluşturma | ERBUĞ KAYA
Published on 24 Haziran 2010 16 Ocak 2014 By Erbuğ Kaya
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.
İ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.
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.
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.
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.
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
Ş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.)
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.)
Ş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.
<html dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”><head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″ />
<meta http-equiv=”Content-Language” content=”tr” />
<meta name=”keywords” content=”FRP, kitap, yazar” />
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.
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.
<img alt=”FRP Kitap Merkezi” src=”images/header.jpg” width=”960″ height=”228″ />
Ş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.
Ş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.
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.
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.
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.
<li><a href=”default.aspx”>Ana Sayfa</a></li>
<li><a href=”bookLists.aspx”>Kitap Listesi</a></li>
<li><a href=”frp.aspx”>FRP Nedir?</a></li>
Ş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.
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.
Ş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.
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 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.
Ş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.
<link rel=”stylesheet” type=”text/css” href=”CSS/main.css” />
<img alt=”FRP Kitap Merkezi” src=”images/header.jpg” width=”960″ height=”228″ /></div>
<a href=”default.aspx”>Ana Sayfa</a> ::
<a href=”bookLists.aspx”>Kitap Listesi</a> ::
<a href=”writers.aspx”>Yazarlar</a> ::
<a href=”messages.aspx”>Mesajlar</a> ::
<a href=”frp.aspx”>FRP Nedir?</a> ::
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.
<asp:ContentPlaceHolder runat=”Server” id=”main”>
Ş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.
<%@ Page masterpagefile=”main.master” language=”C#” title=”FRP Nedir?” %>
<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”main”>
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.
Önceki PostCSS ile Hazırlanan Sitede Firefox Probleminin Çözülmesi ve Site Bakımı.
Sonraki PostDinamik Web Sitesi – Bölüm 02- Database ve Database bağlantısı
SharePoint 2010 İçin Tasarım Hazırlamak | ERBUĞ KAYA Nis 4, 2011
[…] sizin hazırlayacağınız bunun yerine geçecektir. (MasterPage hakkında bilginiz yoksa sizi şu makalemi okumaya davet edeyim.) MasterPage’i giydirmeyecek, sadece tasarımı hazırlayacak olsanız bile şunlara dikkat […]
hasan taner Oca 13, 2013
Expression web ile dinamik site anlatımlarınızın videosu/interaktif eğitimi var mı. Yazıları,resimleri takip ederek uygulama yapmak çok zor. Eğitim setiniz varsa satın alıp kendi dinamik/yönetim panelli sitemi yapmak istiyorum.
Erbuğ Kaya Oca 17, 2013
Üzgünüm:( Maalesef bildiğim ya da hazırlamış olduğum bir eğitim seti videosu yok.