{"id":368,"date":"2010-06-24T08:59:08","date_gmt":"2010-06-24T08:59:08","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=368"},"modified":"2014-01-16T23:52:35","modified_gmt":"2014-01-16T23:52:35","slug":"expression-web-kullanarak-site-hazirlamak-klasik-yontem","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=368","title":{"rendered":"Expression Web Kullanarak Site Haz\u0131rlamak (Klasik Y\u00f6ntem)"},"content":{"rendered":"

25\/4\/2007<\/em>
\n\u00d6rnek firman\u0131n ad\u0131 Dummy Firm. Site i\u00e7in \u015fu \u015fekilde bir tasar\u0131m haz\u0131rlad\u0131m.<\/p>\n

\"\"<\/a><\/p>\n

Bu tasar\u0131m\u0131 ad\u0131m ad\u0131m programc\u0131 arkada\u015flar\u0131m\u0131z\u0131n kullanabilece\u011fi, kodlar\u0131n\u0131 yazabilece\u011fi bir hale getirece\u011fiz.<\/p>\n

Bu ilk sitemizde EW\u2019nin (Expression Web) \u00f6zelliklerini incelerken bilhassa siteyi klasik table(tablo) sistemi ile haz\u0131rlayaca\u011f\u0131z. Bir ba\u015fka makalede ise tamamen tablosuz, DIV\u2019le, maximum CSS 2.0 deste\u011fi ile site yap\u0131m\u0131n\u0131 anlataca\u011f\u0131m.<\/p>\n


\nBir tasar\u0131m\u0131 kod i\u00e7in par\u00e7alarken ilk yapmam\u0131z gereken; tasar\u0131m\u0131 iyice kavray\u0131p, yapaca\u011f\u0131m\u0131z i\u015flemlerin ad\u0131mlar\u0131n\u0131 \u00e7\u0131karmakt\u0131r..<\/p>\n

Ba\u015flayal\u0131m. Site d\u00f6rt b\u00f6lgeden olu\u015fuyor.<\/p>\n

1- Header (Sayfa Ba\u015fl\u0131\u011f\u0131)
\n2- Sol navigasyon ve haber alan\u0131
\n3- \u0130\u00e7erik alan\u0131
\n4- Footer (Sayfa Altl\u0131\u011f\u0131)<\/p>\n

\u0130lk amac\u0131m\u0131z bir master page olu\u015fturmak. Bunu yapt\u0131\u011f\u0131m\u0131zda, di\u011fer sayfalar\u0131 master page\u2019den t\u00fcreterek gitmek bize hem h\u0131z, hem kolayl\u0131k; hem de ileride gelebilecek bir de\u011fi\u015fiklik iste\u011fini h\u0131zl\u0131ca tamamlamam\u0131z\u0131 sa\u011flayacak. Ayn\u0131 kolayl\u0131klar\u0131 sa\u011flamas\u0131 i\u00e7in siteyi maksimum d\u00fczeyde CSS ile olu\u015fturmakta akl\u0131m\u0131zda bulundurmam\u0131z gereken bir di\u011fer konu.<\/p>\n

Peki, master page nedir? Master page sitenizde sabit olan alanlar\u0131 belirleyip oturttu\u011funuz iskelet sayfa yap\u0131s\u0131d\u0131r. Bundan sonraki sayfalar, master page\u2019i kullanarak olu\u015fturulur.<\/p>\n

Bu \u00f6rnek i\u00e7in, header, sol navigasyon alan\u0131 ve footer; master page\u2019de olu\u015fturulacak. Ortadaki alan ise her sayfada de\u011fi\u015fecek i\u00e7erik alan\u0131 olacak.<\/p>\n

Ba\u015flayal\u0131m. \u0130lk yapmam\u0131z gereken \u00e7al\u0131\u015faca\u011f\u0131m\u0131z siteyi EW\u2019ye tan\u0131mlamak olacak.<\/p>\n

File>New>Web Site<\/p>\n

\"\"<\/a><\/p>\n

Gelen pencerede; Web Site sekmesindeki Empty Web Site\u2019yi se\u00e7iyoruz. Browse ile sitenin duraca\u011f\u0131 klas\u00f6r\u00fc tan\u0131ml\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

Sitemiz haz\u0131r. Folder List\u2019teki klas\u00f6rler benim daha \u00f6nce belirledi\u011fim klas\u00f6rler. Images klas\u00f6r\u00fcne siteyi olu\u015fturacak grafik \u00f6\u011felerini koyaca\u011f\u0131m. Logovs ise benim y\u0131lard\u0131r edindi\u011fim bir al\u0131\u015fkanl\u0131k. Siteyi olu\u015fturan kaynak dosyalar\u0131 bu klas\u00f6rde tutuyorum.<\/p>\n

\u015eimdi yeni bir sayfa a\u00e7aca\u011f\u0131z. File>New>Page<\/p>\n

\"\"<\/a><\/p>\n

Kar\u015f\u0131m\u0131za gelen New penceresinde a\u00e7abilece\u011fimiz yeni sayfa t\u00fcrlerini g\u00f6steren listeler mevcut. General listesinde, HTML, ASPX, CSS, Master Page, Dynamic Web Template, JavaScript, XML, Text File sayfa se\u00e7eneklerinin yan\u0131 s\u0131ra, haz\u0131rlam\u0131\u015f oldu\u011funuz \u015fablonlardan da sayfa t\u00fcretmenizi sa\u011flayacak se\u00e7enekler mevcut.<\/p>\n

\"\"<\/a><\/p>\n

Bu a\u015famada Master Page ve Dynamic Web Template konusuna biraz de\u011finmekte fayda var. E\u011fer web tasar\u0131m\u0131 yap\u0131yorsan\u0131z \u00e7ok iyi bilirsiniz ki, haz\u0131rlad\u0131\u011f\u0131n\u0131z siteyi programc\u0131n\u0131n kullanabilece\u011fi \u015fekilde teslim etmelisiniz. Bu da genelde HTML, CSS ve JavaScript\u2019ten olu\u015fan sayfalar demektir. Programc\u0131n\u0131n kod yazarken kar\u015f\u0131la\u015faca\u011f\u0131 sayfalar\u0131 yaratmak \u00f6nemlidir. Bunu yaparken sitenin sayfalar\u0131 \u00fczerinde maksimum kontrole sahip olmal\u0131s\u0131n\u0131z. E\u011fer y\u00fcz sayfal\u0131k bir sitenin her sayfas\u0131n\u0131 tek tek \u015fablonsuz haz\u0131rlarsan\u0131z, header i\u00e7in istenecek bir de\u011fi\u015fiklik iste\u011fi, sizin bu sayfalar\u0131 man\u00fcel olarak de\u011fi\u015ftirmeniz demektir. Bu zaman kayb\u0131na yol a\u00e7acak istenmeyen bir durumdur. Sitenin sabit k\u0131s\u0131mlar\u0131n\u0131 \u015fablon ile ba\u011flaman\u0131z \u00f6nemlidir. E\u011fer site ASP.NET ile kodlanacak ise master page size b\u00fcy\u00fck rahatl\u0131k sa\u011flayacakt\u0131r. Peki ya site ASP.NET ile kodlanmayacak ise? Perl, PHP, ColdFusion ile kodlanacak bir sitede master page kullanamazs\u0131n\u0131z. Expression Web, bir web sitesi edit\u00f6r\u00fc olarak size bu olana\u011f\u0131 sunmaktad\u0131r. ASP.NET d\u0131\u015f\u0131ndaki dillerle yaz\u0131lacak sitede teslim edece\u011finiz \u00e7al\u0131\u015fma HTML a\u011f\u0131rl\u0131k olmal\u0131d\u0131r ve \u015fablon olarak da kullanaca\u011f\u0131n\u0131z Dynamic Web Template\u2019dir.<\/p>\n

Devam edelim. New penceresinde Master Page\u2019i se\u00e7iyoruz. Programc\u0131lar\u0131n kullanaca\u011f\u0131 dile g\u00f6re dil tercihimizi de yap\u0131yoruz. Dillerde C#, VJ# ve VB bulunmakta. Biz C# se\u00e7ip, OK\u2019e basarak Master Page\u2019imizi a\u00e7\u0131yoruz.<\/p>\n

Untitled ismiyle a\u00e7\u0131lan sayfay\u0131 istedi\u011fimiz isimle kaydediyoruz. Ben bu \u00f6rnekte main.master olarak kaydettim sayfay\u0131.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Sayfa iki adet ContentPlaceHolder ile a\u00e7\u0131ld\u0131. Biri HEAD\u2019in, di\u011feri BODY\u2019nin i\u00e7inde. ContentPlaceHolder\u2019lar Master Page\u2019den yarat\u0131lacak sayfalarda de\u011fi\u015fiklik g\u00f6sterecek i\u00e7erik alanlar\u0131d\u0131r. Di\u011fer t\u00fcm alanlar sayfalarda sabit olacakt\u0131r.<\/p>\n

S\u0131radaki ad\u0131m\u0131m\u0131z, CSS sayfas\u0131 a\u00e7mak olacak.<\/p>\n

File>New>Page.<\/p>\n

Sitemizde m\u00fcmk\u00fcn olan her \u015feyi CSS ile belirlemek, b\u00fcy\u00fck \u00e7apl\u0131 projelerde \u00e7ok \u00f6nemlidir. CSS\u2019in b\u00fcy\u00fck bir rahatl\u0131k oldu\u011funu unutmay\u0131n. Y\u00fczlerce sayfal\u0131k projenizde fontlar\u0131n\u0131z\u0131, HTML i\u00e7inde font taglar\u0131yla belirlediyseniz ve proje bitti\u011finde, bu fontlar\u0131 b\u00fcy\u00fctelim iste\u011fi gelirse \u00e7ok zor anlar sizi bekliyor demektir. Oysa CSS ba\u011flanm\u0131\u015f kodlar\u0131 de\u011fi\u015ftirmek sadece iki sat\u0131r de\u011fi\u015fikli\u011finden ibarettir.<\/p>\n

Untitled a\u00e7\u0131lan CSS\u2019imi dummy.css olarak kaydediyorum.<\/p>\n

\"\"<\/a><\/p>\n

G\u00f6rece\u011finiz gibi yaratt\u0131\u011f\u0131m\u0131z iki dosyada Folder List\u2019teki yerlerini ald\u0131lar.<\/p>\n

\"\"<\/a><\/p>\n

S\u0131radaki ad\u0131m CSS\u2019imizi Master Page\u2019imize ba\u011flamak. Bunu yaparken bir hata olup olmad\u0131\u011f\u0131n\u0131 anlaman\u0131n en kolay yolu CSS Body\u2019sine ge\u00e7ici bir background rengi vermektir. Yapal\u0131m. CSS\u2019e kod yazarken EW\u2019nin \u00e7ok yard\u0131mc\u0131 oldu\u011funu fark edeceksiniz. Bo\u015f CSS\u2019in i\u00e7inde bir harfe bast\u0131\u011f\u0131n\u0131z anda men\u00fc a\u00e7\u0131lacakt\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

Body yazd\u0131r\u0131p s\u00fcsl\u00fc parantezinizi “{” a\u00e7t\u0131\u011f\u0131n\u0131zda da tekrar men\u00fc a\u00e7\u0131lacakt\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

background-color\u2019u se\u00e7iyoruz. Tekrar men\u00fc.<\/p>\n

\"\"<\/a><\/p>\n

Tamamen \u00f6ylesine bir renk se\u00e7iyoruz. Amac\u0131m\u0131z CSS\u2019imizi master page\u2019e ba\u011flamak ve bunu kontrol etmek.<\/p>\n

body{
\nbackground-color: red;
\n}<\/p>\n

CSS\u2019imizi kaydedip Master Page\u2019e d\u00f6n\u00fcyoruz. \u015eimdi Master Page ile CSS\u2019i ba\u011flamal\u0131y\u0131z. Manage Styles kutusundaki \u201cAttach Style Sheet\u201d linkine bas\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

Gelen pencerede current page ve link i\u015faretli olacak \u015fekilde browse ile dummy.css\u2019i bulup ekliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Design g\u00f6r\u00fcn\u00fc\u015f\u00fcnde sayfan\u0131z CSS\u2019e verdi\u011finiz renge d\u00f6nd\u00fcyse CSS ba\u015far\u0131 ile ba\u011flanm\u0131\u015f demektir.<\/p>\n

Master Page\u2019in kodu \u015fu anda bu durumda;<\/p>\n

<!DOCTYPE html PUBLIC “-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN” “http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd”>
\n<%@ Master Language=”C#” %>
\n<html dir=”ltr” xmlns=”http:\/\/www.w3.org\/1999\/xhtml”>
\n<head runat=”server”>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=utf-8″ \/>
\n<title>Untitled 1<\/title>
\n<asp:ContentPlaceHolder id=”head” runat=”server”>
\n<\/asp:ContentPlaceHolder>
\n<link rel=”stylesheet” type=”text\/css” href=”dummy.css” \/>
\n<\/head>
\n<body>
\n<form id=”form1″ runat=”server”>
\n<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>
\n<\/asp:ContentPlaceHolder>
\n<\/form>
\n<\/body>
\n<\/html><\/p>\n

\u015eimdi sitemizin dil ayarlar\u0131n\u0131 yapal\u0131m. Desin g\u00f6r\u00fcn\u00fcm\u00fcndeyken sayfada bo\u015f bir yere sa\u011f t\u0131klayarak \u201cPage Properties\u201di se\u00e7iyoruz.<\/p>\n

\"\"<\/a><\/p>\n

A\u00e7\u0131lan page properties penceresinde \u201cLanguage\u201d tab\u0131n\u0131 se\u00e7iyoruz. Bu sitenin T\u00fcrk\u00e7e bir site oldu\u011funu var sayarak. \u201cMark current document as\u201d ve Save the document as\u201d i\u00e7in Turkish se\u00e7iyoruz.<\/p>\n

\"\"<\/a><\/p>\n

<meta http-equiv=”Content-Type” content=”text\/html; charset=windows-1254″ \/>
\n<meta http-equiv=”Content-Language” content=”tr” \/>
\n<title>Dummy Firm<\/title><\/p>\n

\u00d6n ayarlamalar\u0131 bitirdi\u011fimize g\u00f6re tasar\u0131m\u0131 aktarmaya ba\u015flayabiliriz. CSS\u2019imizi a\u00e7\u0131p ger\u00e7ek background rengimizi veriyoruz. Ayr\u0131ca BODY kural\u0131nda font \u00f6zelliklerini de bildiriyoruz. E\u011fer font ile ilgili \u00f6zellikleri CSS\u2019de BODY\u2019de belirtirseniz o font \u00f6zellikleri t\u00fcm siteyi etkiler.<\/p>\n

body{
\nbackground-color:#d4d4d4;
\nfont-family:Arial, Helvetica,sans-serif;
\nfont-size:12px;
\ncolor:black;
\n}<\/p>\n

S\u0131rada header var. Headerimiz sayfaya %100 yay\u0131lm\u0131\u015f 3 kolonlu tek sat\u0131rl\u0131 bir table (tablo) olacak. Table\u2019\u0131n genelinde header arka plan imaj\u0131n\u0131 x y\u00f6n\u00fcnde tekrar ettirece\u011fiz. Ve t\u00fcm bunlar\u0131 ContentPlaceHolder\u2019\u0131n d\u0131\u015f\u0131nda yapaca\u011f\u0131z. \u0130\u015fe header\u2019in CSS\u2019ini yazarak ba\u015fl\u0131yoruz.<\/p>\n

.header{
\nbackground-image:url(‘images\/headerBack.jpg’);
\nbackground-repeat:repeat-x;
\nheight:117px;
\nwidth:100%;
\n}<\/p>\n

Standard toolbar\u2019\u0131ndan Insert Table ile master page\u2019de 3\u2019e 1\u2019lik table yarat\u0131yoruz. Ard\u0131ndan Master page\u2019de table se\u00e7ili iken Apply Styles kutusunda header kural\u0131na t\u0131kl\u0131yoruz. B\u00f6ylece table\u2019i header kural\u0131na ba\u011flam\u0131\u015f oluyoruz.<\/p>\n

\"\"<\/a><\/p>\n

<table >
\n<tr>
\n<td>&nbsp;<\/td>
\n<td>&nbsp;<\/td>
\n<td>&nbsp;<\/td>
\n<\/tr>
\n<\/table><\/p>\n

\"\"<\/a><\/p>\n

Table\u2019\u0131n \u00fcst\u00fcndeyken sa\u011f klik yap\u0131p Table Properties\u2019i se\u00e7iyoruz.Cell padding ve cell spacing\u2019i s\u0131f\u0131ra e\u015fitliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Table\u2019\u0131m\u0131z sol ve sa\u011f kolonlar\u0131na imajlar\u0131m\u0131z\u0131, Standard toolbar\u2019daki \u201cinsert Picture from file\u201d butonu ile giriyoruz. Table h\u00fccrelerinin varsay\u0131lan yatay do\u011frultusu sola yasl\u0131 oldu\u011fu i\u00e7in, sol kolonumuzda sorun yok fakat sa\u011f kolondaki i\u00e7eri\u011fi sa\u011fa yaslamam\u0131z gerekiyor. Sa\u011f kolonun i\u00e7indeyken sa\u011f klik ile \u201cCell Properties\u201d i se\u00e7iyoruz. \u201cHorizontal alignment\u201di Right yap\u0131yoruz<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Header\u2019in alt\u0131na 1\u2019e 1\u2019lik %100 bir table daha ekliyoruz. Bu header ile i\u00e7erik aras\u0131ndaki bo\u015flu\u011fu sa\u011flayacak.<\/p>\n

Header\u2019\u0131 tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re \u015fimdi navigasyon ve i\u00e7erik alan\u0131na ba\u015flayabiliriz. Bu table\u2019\u0131n alt\u0131na 2\u2019ye 1\u2019lik bir ba\u015fka table ekliyoruz. Cell spacing ve paddingler s\u0131f\u0131r. Bu table\u2019\u0131n sol kolonu navigasyonu, sa\u011f kolonu i\u00e7erik alan\u0131n\u0131 bar\u0131nd\u0131racak. Her iki kolonun i\u00e7ine t\u0131klad\u0131ktan sonra sa\u011f klik yap\u0131p Cell Properties\u2019i a\u00e7\u0131yoruz. \u0130ki kolonunda Vertical alignment\u2019lerini Top yap\u0131yoruz. B\u00f6ylece kolon i\u00e7erikleri biribirilerinden ba\u011f\u0131ms\u0131z \u00e7al\u0131\u015fabilecekler. Biri fazla uzasa bile \u00f6teki her zaman yukar\u0131da kalabilecek.<\/p>\n

\"\"<\/a><\/p>\n

\u0130lk \u00f6nce sol navigasyon kolonu i\u00e7in CSS yaz\u0131yoruz ve bunu Apply Styles kutusunda TD\u2019ye ba\u011fl\u0131yoruz.<\/p>\n

.navBack{
\nwidth:242px;
\npadding-left:14px;
\npadding-right:11px;
\n}<\/p>\n

<table style=”width: 100%” cellspacing=”0″ cellpadding=”0″>
\n<tr>
\n<td><\/p>\n

\u015eimdi bu TD\u2019nin (sol kolonun) i\u00e7inde navigasyonumuzu olu\u015fturaca\u011f\u0131z.<\/p>\n

Navigasyonun background\u2019u i\u00e7in 1\u2019e 2\u2019lik bir table\u2019\u0131 sol kolonunun i\u00e7ine olu\u015fturuyoruz. Cell spacing ve paddingler s\u0131f\u0131r. Navigasyonun ba\u015fl\u0131\u011f\u0131 i\u00e7in CSS\u2019olu\u015fturup \u00fcst sat\u0131r\u0131 bu CSS\u2019e ba\u011fl\u0131yoruz.<\/p>\n

.navTableHead{
\nbackground-image:url(‘images\/tableHeadBack.jpg’);
\nbackground-repeat:no-repeat;
\nheight:30px;
\nwidth:222px;
\ncolor:white;
\nfont-weight:bold;
\ntext-indent:10px;
\n}<\/p>\n

<td >Menu<\/td><\/p>\n

<\/p>\n

Navigasyonun ba\u015fl\u0131\u011f\u0131n\u0131 bitirdi\u011fimize g\u00f6re navigasyon background\u2019unu yapmal\u0131y\u0131z. Bunun i\u00e7in ilk \u00f6nce bir CSS yaz\u0131yoruz. Daha sonra table\u2019\u0131n alt sat\u0131r\u0131n\u0131 bu CSS\u2019e ba\u011fl\u0131yoruz.<\/p>\n

.navTableBack{
\nbackground-image:url(‘images\/navBack.jpg’);
\nbackground-repeat: no-repeat;
\nwidth:222px;
\nheight:290px;
\n}<\/p>\n

<table cellspacing=”0″ cellpadding=”0″>
\n<tr>
\n<td >Menu<\/td>
\n<\/tr>
\n<tr>
\n<td >&nbsp;<\/td>
\n<\/tr>
\n<\/table><\/p>\n

\"\"<\/a><\/p>\n

Navigasyon table\u2019m\u0131z haz\u0131r oldu\u011funa g\u00f6re art\u0131k men\u00fcm\u00fcz\u00fc olu\u015fturabiliriz. Men\u00fc i\u00e7in ilk \u00f6nce CSS\u2019imizi yaz\u0131yoruz. Bu tamamen CSS\u2019den olu\u015fan, hafif ve kullan\u0131\u015fl\u0131 bir men\u00fc olacak.<\/p>\n

#menu {
\nmargin:0;
\npadding: 0;
\nfont:bold 11px\/24px Arial, Helvetica, sans-serif;
\nwidth:214px;
\n}<\/p>\n

#menu ol, #menu li {
\nmargin:4px 0 4px 0;
\npadding:0px;
\nlist-style: none;
\nborder:1px solid black;
\nbackground-color:white;
\nheight:30px;
\n}<\/p>\n

#menu a:link, #menu
\na:visited {
\ncolor: black;
\ndisplay: block;
\ntext-decoration: none;
\ntext-indent: 10px;
\n}<\/p>\n

#menu a:hover {
\npadding:0px 0 6px 0;
\ncolor: #cc0000;
\ntext-decoration: none;
\nborder-left: #a7a7a7 2px solid;
\nbackground-color:#efefef;
\ntext-indent: 8px;
\n}<\/p>\n

\u015eimdi men\u00fcm\u00fcz\u00fc navigasyonunun alt sat\u0131r\u0131nda olu\u015fturuyoruz.<\/p>\n

<td ><\/p>\n

<ol id=”menu”><\/p>\n

<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li>
\n<li><a href=”#” title=”Lorem Ipsum”>Lorem Ipsum<\/a><\/li><\/p>\n

<\/ol><\/p>\n

<\/td><\/p>\n

\"\"<\/a><\/p>\n

Men\u00fcm\u00fcz bitti\u011fine g\u00f6re, sol tarafta devam edebiliriz.<\/p>\n

Navigasyon table\u2019m\u0131z\u0131n alt\u0131na bo\u015fluk vermesi ama\u00e7l\u0131 1\u2019e 1 bir table olu\u015fturuyoruz. Cell spacing ve paddingler s\u0131f\u0131r.<\/p>\n

News i\u00e7in bo\u015fluk table\u2019n\u0131n alt\u0131na yine 1\u2019e 1 table yarat\u0131yoruz. Cell spacing ve paddingler s\u0131f\u0131r. \u015eimdi bu table i\u00e7in CSS haz\u0131rlayal\u0131m.<\/p>\n

.news{
\nbackground-color:#e9e9e9;
\nborder:1px black solid;
\npadding:4px 4px 4px 4px;
\nwidth:217px;
\nmargin-left:5px;
\n}<\/p>\n

EW tablelar\u0131 varsay\u0131lan olarak %100 yarat\u0131yor. Biz bundan ba\u015fka bir uzunluk d\u00fc\u015f\u00fcn\u00fcyorsak en h\u0131zl\u0131 \u015fekilde Split g\u00f6r\u00fcn\u00fcm\u00fcnde bu ifadeyi silebilir, istedi\u011fimiz uzunlu\u011fu CSS ile verebiliriz.<\/p>\n

Table\u2019\u0131 CSS ile ba\u011fl\u0131yoruz.<\/p>\n

\"\"<\/a><\/p>\n

<table ><\/p>\n

Yeni table\u2019\u0131n i\u00e7indeyken imaj giriyoruz.<\/p>\n

\"\"<\/a><\/p>\n

\u0130maj\u0131n yaz\u0131 bindirme ayarlar\u0131n\u0131 yapmal\u0131y\u0131z. \u0130maj i\u00e7in CSS yaz\u0131yoruz.<\/p>\n

Not: CSS\u2019deki \u201cimg\u201d kural\u0131yla t\u00fcm imajlar\u0131 etkileyebiliriz. Ama \u00f6rne\u011fin bu proje i\u00e7in header\u2019daki imajlar\u0131m\u0131zda bundan etkilenir. Biz burada imaj i\u00e7in kendimiz kural yazmay\u0131 uygun buluyoruz.<\/p>\n

.newsImage{
\nfloat:left;
\nmargin:0px 4px 1px 0px;
\nborder:1px black solid;
\n}<\/p>\n

Yaz\u0131m\u0131z\u0131 da ekliyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Sol taraf\u0131 tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re, \u015fimdi footer\u2019\u0131 haz\u0131rlayaca\u011f\u0131z ama \u00f6nce 1\u2019e 1\u2019lik bir table haz\u0131rlay\u0131p, footer ile i\u00e7erik alan\u0131 aras\u0131nda bo\u015fluk b\u0131rakal\u0131m. Cell spacing ve paddingler s\u0131f\u0131r.<\/p>\n

Footer i\u00e7in tekrar 1\u2019e 1\u2019lik, cell spacing ve paddingleri s\u0131f\u0131r olan bir table yarat\u0131yoruz. Footer i\u00e7in CSS\u2019imizi yaz\u0131yoruz.<\/p>\n

.footer{
\nbackground-image:url(‘images\/footerBack.jpg’);
\nbackground-repeat:repeat-x;
\nheight:35px;
\n}<\/p>\n

CSS\u2019i table\u2019\u0131 ba\u011fl\u0131yoruz.<\/p>\n

<table style=”width: 100%” cellspacing=”0″ cellpadding=”0″>
\n<tr>
\n<td>&nbsp;<\/td>
\n<\/tr>
\n<\/table><\/p>\n

Footer tablen\u0131n i\u00e7inde sa\u011f klik yap\u0131p cell properties\u2019i se\u00e7ip Horizantal Alignment\u2019i Center yap\u0131yoruz.<\/p>\n

Footer\u2019in \u00fcst\u00fcnde kendine \u00f6zel linkleri olacak ama \u00f6nce sitenin genel linklerini yazmam\u0131z iyi olur.<\/p>\n

CSS\u2019de BODY\u2019nin alt\u0131na link kurallar\u0131n\u0131 ekliyoruz. Bunlar\u0131 BODY\u2019nin alt\u0131na yazmak zorunda de\u011filsiniz, ama ileride size kolayl\u0131k sa\u011fmas\u0131 a\u00e7\u0131s\u0131ndan siteyi genel olarak etkileyen kurallar\u0131 CSS\u2019nizin \u00fcst sat\u0131rlar\u0131n\u0131zda tutman\u0131z iyi olacakt\u0131r.<\/p>\n

a:link{
\ncolor:blue;
\ntext-decoration:underline
\n}<\/p>\n

a:visited{
\ncolor:blue;
\ntext-decoration:underline
\n}<\/p>\n

a:hover{
\ncolor:blue;
\ntext-decoration:none;
\n}<\/p>\n

\"\"<\/a><\/p>\n

CSS\u2019de link kurallar\u0131n\u0131 yazarken s\u0131ralama \u00f6nemlidir. Link, visited, hover \u015feklinde olmal\u0131d\u0131r.<\/p>\n

\u015eimdi Footer\u2019\u0131m\u0131z i\u00e7in link kurallar\u0131n\u0131 yazaca\u011f\u0131z. Bu bize footer tablen\u0131n i\u00e7indeki linklerin genel linklerden farkl\u0131la\u015fmas\u0131n\u0131 sa\u011flayacak.<\/p>\n

.footer a:link{
\ncolor:white;
\ntext-decoration:underline;
\n}<\/p>\n

.footer a:visited{
\ncolor:white;
\ntext-decoration:underline;
\n}<\/p>\n

.footer a:hover{
\ncolor:white;
\ntext-decoration:none;
\n}<\/p>\n

\u015eu ana kadar yapt\u0131klar\u0131m\u0131zla Master Page\u2019imizi olu\u015fturduk. Ba\u015ftan beri bunlar\u0131 yaparken ContentPlace Holder ile hi\u00e7 ilgilenmedik. \u015eimdi ContentPlaceHolder\u2019imizi yerle\u015ftirece\u011fiz. Bu i\u015flemleri Split g\u00f6r\u00fcn\u00fcm\u00fcnde yapaca\u011f\u0131z. \u0130lk \u00f6nce ContentPlaceHolder\u2019\u0131 buluyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Split g\u00f6r\u00fcn\u00fcm\u00fcnde ContentPlaceHolder kodunu kesip al\u0131yoruz. Bu kodu do\u011fru yere do\u011fru \u015fekilde koymam\u0131z gerekiyor. \u0130\u00e7eri\u011fin bulundu\u011fu sa\u011f kolonun TD sini i\u00e7ine alacak \u015fekilde yap\u0131\u015ft\u0131r\u0131yoruz.<\/p>\n

<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>
\n<td valign=”top”>&nbsp;<\/td>
\n<\/asp:ContentPlaceHolder><\/p>\n

Master Page\u2019imiz haz\u0131r. Art\u0131k master page\u2019den t\u00fcretece\u011fimiz sayfalara ge\u00e7ebiliriz.<\/p>\n

Bu makalede bir tane home page haz\u0131rlayaca\u011f\u0131z.<\/p>\n

File>New>Page ile yeni dosya penceresini a\u00e7\u0131yoruz. Create from Master Page\u2019i se\u00e7ip OK diyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Kar\u015f\u0131m\u0131za master page se\u00e7me penceresi geliyor. Browse ile haz\u0131rlad\u0131\u011f\u0131m\u0131z master page\u2019i se\u00e7iyoruz ve OK diyoruz.<\/p>\n

\"\"<\/a><\/p>\n

Yeni sayfam\u0131z Untitled olarak haz\u0131r.<\/p>\n

\"\"<\/a><\/p>\n

Design g\u00f6r\u00fcn\u00fcm\u00fcndeyken, ContentPlaceHolder\u2019\u0131n sa\u011f\u0131ndaki oka t\u0131klay\u0131p Create Custom Content\u2019e t\u0131kl\u0131yoruz ve sayfam\u0131z\u0131 home.aspx olarak kaydediyoruz.<\/p>\n

\"\"<\/a><\/p>\n

<%@ Page Language=”C#” masterpagefile=”main.master” title=”Menu” %>
\n<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″> <td valign=”top”>&nbsp;<\/td><\/p>\n

<\/asp:Content><\/p>\n

Art\u0131k home page\u2019imize i\u00e7eri\u011fimizi girebiliriz. \u0130maj i\u00e7in CSS\u2019e kural yaz\u0131yoruz. \u0130maj\u0131m\u0131z\u0131 girip, yaz\u0131m\u0131z\u0131 ekliyoruz.<\/p>\n

.contentImage{
\nfloat:right;
\nborder:1px black solid;
\nmargin:0px 4px 4px 4px;
\n}<\/p>\n

Her \u015feyi tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re son bir i\u015fimiz kald\u0131. Tasar\u0131m \u00fcstten, soldan ve sa\u011fdan bo\u015fluk b\u0131rakmayacak \u015fekilde haz\u0131rlanm\u0131\u015ft\u0131. Bunu rahat \u00e7al\u0131\u015fabilmek i\u00e7in t\u00fcm s\u00fcre\u00e7 boyunca ihmal ettik. \u015eimdi bunu yapal\u0131m. Yapman\u0131z gereken tek \u015fey CSS\u2019de BODY kural\u0131na margin:0px; eklemek.<\/p>\n

Sonu\u00e7<\/p>\n

\"\"<\/a><\/p>\n

Bu makalemizde s\u0131f\u0131rdan bir site haz\u0131rlamay\u0131, bu siteyi haz\u0131rlarken master page, css kullanmay\u0131 anlatt\u0131k.<\/p>\n

\u0130yi \u00e7al\u0131\u015fmalar.<\/p>\n","protected":false},"excerpt":{"rendered":"

25\/4\/2007 \u00d6rnek firman\u0131n ad\u0131 Dummy Firm. Site i\u00e7in \u015fu \u015fekilde bir tasar\u0131m haz\u0131rlad\u0131m. Bu tasar\u0131m\u0131 ad\u0131m ad\u0131m programc\u0131 arkada\u015flar\u0131m\u0131z\u0131n kullanabilece\u011fi, kodlar\u0131n\u0131 yazabilece\u011fi bir hale getirece\u011fiz. Bu ilk sitemizde EW\u2019nin (Expression Web) \u00f6zelliklerini incelerken bilhassa siteyi klasik table(tablo) sistemi ile haz\u0131rlayaca\u011f\u0131z. Bir ba\u015fka makalede ise tamamen tablosuz, DIV\u2019le, maximum CSS 2.0 deste\u011fi ile site yap\u0131m\u0131n\u0131 anlataca\u011f\u0131m.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[29],"class_list":["post-368","post","type-post","status-publish","format-standard","hentry","category-teknik-yazi","tag-expression-web"],"_links":{"self":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=368"}],"version-history":[{"count":8,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":2554,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions\/2554"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}