25/4/2007
Örnek firmanın adı Dummy Firm. Site için şu şekilde bir tasarım hazırladım.
Bu tasarımı adım adım programcı arkadaşlarımızın kullanabileceği, kodlarını yazabileceği bir hale getireceğiz.
Bu ilk sitemizde EW’nin (Expression Web) özelliklerini incelerken bilhassa siteyi klasik table(tablo) sistemi ile hazırlayacağız. Bir başka makalede ise tamamen tablosuz, DIV’le, maximum CSS 2.0 desteği ile site yapımını anlatacağım.
Bir tasarımı kod için parçalarken ilk yapmamız gereken; tasarımı iyice kavrayıp, yapacağımız işlemlerin adımlarını çıkarmaktır..
Başlayalım. Site dört bölgeden oluşuyor.
1- Header (Sayfa Başlığı)
2- Sol navigasyon ve haber alanı
3- İçerik alanı
4- Footer (Sayfa Altlığı)
İlk amacımız bir master page oluşturmak. Bunu yaptığımızda, diğer sayfaları master page’den türeterek gitmek bize hem hız, hem kolaylık; hem de ileride gelebilecek bir değişiklik isteğini hızlıca tamamlamamızı sağlayacak. Aynı kolaylıkları sağlaması için siteyi maksimum düzeyde CSS ile oluşturmakta aklımızda bulundurmamız gereken bir diğer konu.
Peki, master page nedir? Master page sitenizde sabit olan alanları belirleyip oturttuğunuz iskelet sayfa yapısıdır. Bundan sonraki sayfalar, master page’i kullanarak oluşturulur.
Bu örnek için, header, sol navigasyon alanı ve footer; master page’de oluşturulacak. Ortadaki alan ise her sayfada değişecek içerik alanı olacak.
Başlayalım. İlk yapmamız gereken çalışacağımız siteyi EW’ye tanımlamak olacak.
File>New>Web Site
Gelen pencerede; Web Site sekmesindeki Empty Web Site’yi seçiyoruz. Browse ile sitenin duracağı klasörü tanımlıyoruz.
Sitemiz hazır. Folder List’teki klasörler benim daha önce belirlediğim klasörler. Images klasörüne siteyi oluşturacak grafik öğelerini koyacağım. Logovs ise benim yılardır edindiğim bir alışkanlık. Siteyi oluşturan kaynak dosyaları bu klasörde tutuyorum.
Şimdi yeni bir sayfa açacağız. File>New>Page
Karşımıza gelen New penceresinde açabileceğimiz yeni sayfa türlerini gösteren listeler mevcut. General listesinde, HTML, ASPX, CSS, Master Page, Dynamic Web Template, JavaScript, XML, Text File sayfa seçeneklerinin yanı sıra, hazırlamış olduğunuz şablonlardan da sayfa türetmenizi sağlayacak seçenekler mevcut.
Bu aşamada Master Page ve Dynamic Web Template konusuna biraz değinmekte fayda var. Eğer web tasarımı yapıyorsanız çok iyi bilirsiniz ki, hazırladığınız siteyi programcının kullanabileceği şekilde teslim etmelisiniz. Bu da genelde HTML, CSS ve JavaScript’ten oluşan sayfalar demektir. Programcının kod yazarken karşılaşacağı sayfaları yaratmak önemlidir. Bunu yaparken sitenin sayfaları üzerinde maksimum kontrole sahip olmalısınız. Eğer yüz sayfalık bir sitenin her sayfasını tek tek şablonsuz hazırlarsanız, header için istenecek bir değişiklik isteği, sizin bu sayfaları manüel olarak değiştirmeniz demektir. Bu zaman kaybına yol açacak istenmeyen bir durumdur. Sitenin sabit kısımlarını şablon ile bağlamanız önemlidir. Eğer site ASP.NET ile kodlanacak ise master page size büyük rahatlık sağlayacaktır. Peki ya site ASP.NET ile kodlanmayacak ise? Perl, PHP, ColdFusion ile kodlanacak bir sitede master page kullanamazsınız. Expression Web, bir web sitesi editörü olarak size bu olanağı sunmaktadır. ASP.NET dışındaki dillerle yazılacak sitede teslim edeceğiniz çalışma HTML ağırlık olmalıdır ve şablon olarak da kullanacağınız Dynamic Web Template’dir.
Devam edelim. New penceresinde Master Page’i seçiyoruz. Programcıların kullanacağı dile göre dil tercihimizi de yapıyoruz. Dillerde C#, VJ# ve VB bulunmakta. Biz C# seçip, OK’e basarak Master Page’imizi açıyoruz.
Untitled ismiyle açılan sayfayı istediğimiz isimle kaydediyoruz. Ben bu örnekte main.master olarak kaydettim sayfayı.
Sayfa iki adet ContentPlaceHolder ile açıldı. Biri HEAD’in, diğeri BODY’nin içinde. ContentPlaceHolder’lar Master Page’den yaratılacak sayfalarda değişiklik gösterecek içerik alanlarıdır. Diğer tüm alanlar sayfalarda sabit olacaktır.
Sıradaki adımımız, CSS sayfası açmak olacak.
File>New>Page.
Sitemizde mümkün olan her şeyi CSS ile belirlemek, büyük çaplı projelerde çok önemlidir. CSS’in büyük bir rahatlık olduğunu unutmayın. Yüzlerce sayfalık projenizde fontlarınızı, HTML içinde font taglarıyla belirlediyseniz ve proje bittiğinde, bu fontları büyütelim isteği gelirse çok zor anlar sizi bekliyor demektir. Oysa CSS bağlanmış kodları değiştirmek sadece iki satır değişikliğinden ibarettir.
Untitled açılan CSS’imi dummy.css olarak kaydediyorum.
Göreceğiniz gibi yarattığımız iki dosyada Folder List’teki yerlerini aldılar.
Sıradaki adım CSS’imizi Master Page’imize bağlamak. Bunu yaparken bir hata olup olmadığını anlamanın en kolay yolu CSS Body’sine geçici bir background rengi vermektir. Yapalım. CSS’e kod yazarken EW’nin çok yardımcı olduğunu fark edeceksiniz. Boş CSS’in içinde bir harfe bastığınız anda menü açılacaktır.
Body yazdırıp süslü parantezinizi “{” açtığınızda da tekrar menü açılacaktır.
background-color’u seçiyoruz. Tekrar menü.
Tamamen öylesine bir renk seçiyoruz. Amacımız CSS’imizi master page’e bağlamak ve bunu kontrol etmek.
body{
background-color: red;
}
CSS’imizi kaydedip Master Page’e dönüyoruz. Şimdi Master Page ile CSS’i bağlamalıyız. Manage Styles kutusundaki “Attach Style Sheet” linkine basıyoruz.
Gelen pencerede current page ve link işaretli olacak şekilde browse ile dummy.css’i bulup ekliyoruz.
Design görünüşünde sayfanız CSS’e verdiğiniz renge döndüyse CSS başarı ile bağlanmış demektir.
Master Page’in kodu şu anda bu durumda;
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<%@ Master Language=”C#” %>
<html dir=”ltr” xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled 1</title>
<asp:ContentPlaceHolder id=”head” runat=”server”>
</asp:ContentPlaceHolder>
<link rel=”stylesheet” type=”text/css” href=”dummy.css” />
</head>
<body>
<form id=”form1″ runat=”server”>
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Şimdi sitemizin dil ayarlarını yapalım. Desin görünümündeyken sayfada boş bir yere sağ tıklayarak “Page Properties”i seçiyoruz.
Açılan page properties penceresinde “Language” tabını seçiyoruz. Bu sitenin Türkçe bir site olduğunu var sayarak. “Mark current document as” ve Save the document as” için Turkish seçiyoruz.
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1254″ />
<meta http-equiv=”Content-Language” content=”tr” />
<title>Dummy Firm</title>
Ön ayarlamaları bitirdiğimize göre tasarımı aktarmaya başlayabiliriz. CSS’imizi açıp gerçek background rengimizi veriyoruz. Ayrıca BODY kuralında font özelliklerini de bildiriyoruz. Eğer font ile ilgili özellikleri CSS’de BODY’de belirtirseniz o font özellikleri tüm siteyi etkiler.
body{
background-color:#d4d4d4;
font-family:Arial, Helvetica,sans-serif;
font-size:12px;
color:black;
}
Sırada header var. Headerimiz sayfaya %100 yayılmış 3 kolonlu tek satırlı bir table (tablo) olacak. Table’ın genelinde header arka plan imajını x yönünde tekrar ettireceğiz. Ve tüm bunları ContentPlaceHolder’ın dışında yapacağız. İşe header’in CSS’ini yazarak başlıyoruz.
.header{
background-image:url(‘images/headerBack.jpg’);
background-repeat:repeat-x;
height:117px;
width:100%;
}
Standard toolbar’ından Insert Table ile master page’de 3’e 1’lik table yaratıyoruz. Ardından Master page’de table seçili iken Apply Styles kutusunda header kuralına tıklıyoruz. Böylece table’i header kuralına bağlamış oluyoruz.
<table >
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Table’ın üstündeyken sağ klik yapıp Table Properties’i seçiyoruz.Cell padding ve cell spacing’i sıfıra eşitliyoruz.
Table’ımız sol ve sağ kolonlarına imajlarımızı, Standard toolbar’daki “insert Picture from file” butonu ile giriyoruz. Table hücrelerinin varsayılan yatay doğrultusu sola yaslı olduğu için, sol kolonumuzda sorun yok fakat sağ kolondaki içeriği sağa yaslamamız gerekiyor. Sağ kolonun içindeyken sağ klik ile “Cell Properties” i seçiyoruz. “Horizontal alignment”i Right yapıyoruz
Header’in altına 1’e 1’lik %100 bir table daha ekliyoruz. Bu header ile içerik arasındaki boşluğu sağlayacak.
Header’ı tamamladığımıza göre şimdi navigasyon ve içerik alanına başlayabiliriz. Bu table’ın altına 2’ye 1’lik bir başka table ekliyoruz. Cell spacing ve paddingler sıfır. Bu table’ın sol kolonu navigasyonu, sağ kolonu içerik alanını barındıracak. Her iki kolonun içine tıkladıktan sonra sağ klik yapıp Cell Properties’i açıyoruz. İki kolonunda Vertical alignment’lerini Top yapıyoruz. Böylece kolon içerikleri biribirilerinden bağımsız çalışabilecekler. Biri fazla uzasa bile öteki her zaman yukarıda kalabilecek.
İlk önce sol navigasyon kolonu için CSS yazıyoruz ve bunu Apply Styles kutusunda TD’ye bağlıyoruz.
.navBack{
width:242px;
padding-left:14px;
padding-right:11px;
}
<table style=”width: 100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
Şimdi bu TD’nin (sol kolonun) içinde navigasyonumuzu oluşturacağız.
Navigasyonun background’u için 1’e 2’lik bir table’ı sol kolonunun içine oluşturuyoruz. Cell spacing ve paddingler sıfır. Navigasyonun başlığı için CSS’oluşturup üst satırı bu CSS’e bağlıyoruz.
.navTableHead{
background-image:url(‘images/tableHeadBack.jpg’);
background-repeat:no-repeat;
height:30px;
width:222px;
color:white;
font-weight:bold;
text-indent:10px;
}
<td >Menu</td>
Navigasyonun başlığını bitirdiğimize göre navigasyon background’unu yapmalıyız. Bunun için ilk önce bir CSS yazıyoruz. Daha sonra table’ın alt satırını bu CSS’e bağlıyoruz.
.navTableBack{
background-image:url(‘images/navBack.jpg’);
background-repeat: no-repeat;
width:222px;
height:290px;
}
<table cellspacing=”0″ cellpadding=”0″>
<tr>
<td >Menu</td>
</tr>
<tr>
<td > </td>
</tr>
</table>
Navigasyon table’mız hazır olduğuna göre artık menümüzü oluşturabiliriz. Menü için ilk önce CSS’imizi yazıyoruz. Bu tamamen CSS’den oluşan, hafif ve kullanışlı bir menü olacak.
#menu {
margin:0;
padding: 0;
font:bold 11px/24px Arial, Helvetica, sans-serif;
width:214px;
}
#menu ol, #menu li {
margin:4px 0 4px 0;
padding:0px;
list-style: none;
border:1px solid black;
background-color:white;
height:30px;
}
#menu a:link, #menu
a:visited {
color: black;
display: block;
text-decoration: none;
text-indent: 10px;
}
#menu a:hover {
padding:0px 0 6px 0;
color: #cc0000;
text-decoration: none;
border-left: #a7a7a7 2px solid;
background-color:#efefef;
text-indent: 8px;
}
Şimdi menümüzü navigasyonunun alt satırında oluşturuyoruz.
<td >
<ol id=”menu”>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum</a></li>
</ol>
</td>
Menümüz bittiğine göre, sol tarafta devam edebiliriz.
Navigasyon table’mızın altına boşluk vermesi amaçlı 1’e 1 bir table oluşturuyoruz. Cell spacing ve paddingler sıfır.
News için boşluk table’nın altına yine 1’e 1 table yaratıyoruz. Cell spacing ve paddingler sıfır. Şimdi bu table için CSS hazırlayalım.
.news{
background-color:#e9e9e9;
border:1px black solid;
padding:4px 4px 4px 4px;
width:217px;
margin-left:5px;
}
EW tableları varsayılan olarak %100 yaratıyor. Biz bundan başka bir uzunluk düşünüyorsak en hızlı şekilde Split görünümünde bu ifadeyi silebilir, istediğimiz uzunluğu CSS ile verebiliriz.
Table’ı CSS ile bağlıyoruz.
<table >
Yeni table’ın içindeyken imaj giriyoruz.
İmajın yazı bindirme ayarlarını yapmalıyız. İmaj için CSS yazıyoruz.
Not: CSS’deki “img” kuralıyla tüm imajları etkileyebiliriz. Ama örneğin bu proje için header’daki imajlarımızda bundan etkilenir. Biz burada imaj için kendimiz kural yazmayı uygun buluyoruz.
.newsImage{
float:left;
margin:0px 4px 1px 0px;
border:1px black solid;
}
Yazımızı da ekliyoruz.
Sol tarafı tamamladığımıza göre, şimdi footer’ı hazırlayacağız ama önce 1’e 1’lik bir table hazırlayıp, footer ile içerik alanı arasında boşluk bırakalım. Cell spacing ve paddingler sıfır.
Footer için tekrar 1’e 1’lik, cell spacing ve paddingleri sıfır olan bir table yaratıyoruz. Footer için CSS’imizi yazıyoruz.
.footer{
background-image:url(‘images/footerBack.jpg’);
background-repeat:repeat-x;
height:35px;
}
CSS’i table’ı bağlıyoruz.
<table style=”width: 100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
</tr>
</table>
Footer tablenın içinde sağ klik yapıp cell properties’i seçip Horizantal Alignment’i Center yapıyoruz.
Footer’in üstünde kendine özel linkleri olacak ama önce sitenin genel linklerini yazmamız iyi olur.
CSS’de BODY’nin altına link kurallarını ekliyoruz. Bunları BODY’nin altına yazmak zorunda değilsiniz, ama ileride size kolaylık sağması açısından siteyi genel olarak etkileyen kuralları CSS’nizin üst satırlarınızda tutmanız iyi olacaktır.
a:link{
color:blue;
text-decoration:underline
}
a:visited{
color:blue;
text-decoration:underline
}
a:hover{
color:blue;
text-decoration:none;
}
CSS’de link kurallarını yazarken sıralama önemlidir. Link, visited, hover şeklinde olmalıdır.
Şimdi Footer’ımız için link kurallarını yazacağız. Bu bize footer tablenın içindeki linklerin genel linklerden farklılaşmasını sağlayacak.
.footer a:link{
color:white;
text-decoration:underline;
}
.footer a:visited{
color:white;
text-decoration:underline;
}
.footer a:hover{
color:white;
text-decoration:none;
}
Şu ana kadar yaptıklarımızla Master Page’imizi oluşturduk. Baştan beri bunları yaparken ContentPlace Holder ile hiç ilgilenmedik. Şimdi ContentPlaceHolder’imizi yerleştireceğiz. Bu işlemleri Split görünümünde yapacağız. İlk önce ContentPlaceHolder’ı buluyoruz.
Split görünümünde ContentPlaceHolder kodunu kesip alıyoruz. Bu kodu doğru yere doğru şekilde koymamız gerekiyor. İçeriğin bulunduğu sağ kolonun TD sini içine alacak şekilde yapıştırıyoruz.
<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>
<td valign=”top”> </td>
</asp:ContentPlaceHolder>
Master Page’imiz hazır. Artık master page’den türeteceğimiz sayfalara geçebiliriz.
Bu makalede bir tane home page hazırlayacağız.
File>New>Page ile yeni dosya penceresini açıyoruz. Create from Master Page’i seçip OK diyoruz.
Karşımıza master page seçme penceresi geliyor. Browse ile hazırladığımız master page’i seçiyoruz ve OK diyoruz.
Yeni sayfamız Untitled olarak hazır.
Design görünümündeyken, ContentPlaceHolder’ın sağındaki oka tıklayıp Create Custom Content’e tıklıyoruz ve sayfamızı home.aspx olarak kaydediyoruz.
<%@ Page Language=”C#” masterpagefile=”main.master” title=”Menu” %>
<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″> <td valign=”top”> </td>
</asp:Content>
Artık home page’imize içeriğimizi girebiliriz. İmaj için CSS’e kural yazıyoruz. İmajımızı girip, yazımızı ekliyoruz.
.contentImage{
float:right;
border:1px black solid;
margin:0px 4px 4px 4px;
}
Her şeyi tamamladığımıza göre son bir işimiz kaldı. Tasarım üstten, soldan ve sağdan boşluk bırakmayacak şekilde hazırlanmıştı. Bunu rahat çalışabilmek için tüm süreç boyunca ihmal ettik. Şimdi bunu yapalım. Yapmanız gereken tek şey CSS’de BODY kuralına margin:0px; eklemek.
Sonuç
Bu makalemizde sıfırdan bir site hazırlamayı, bu siteyi hazırlarken master page, css kullanmayı anlattık.
İyi çalışmalar.
