![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000001319_01.jpg\")
<\/p>\n3\/5\/2007
\nDinamik bir web sitesi olu\u015fturma makale serisinin bu ilk b\u00f6l\u00fcm\u00fcnde, tasar\u0131m\u0131 master page’e oturtma ve CSS kurallar\u0131 olu\u015fturmay\u0131 inceleyece\u011fiz. Bu s\u00fcrecin, \u00f6nceki makalelerden fark\u0131 bu i\u015flemleri de\u011fi\u015fik yollar izleyerek yapacak olmam\u0131z. Daha \u00e7ok Expression Web ara\u00e7lar\u0131n\u0131 kullanarak olu\u015fturaca\u011f\u0131m\u0131z bu site \u00f6rne\u011finin, web tasar\u0131m\u0131na yeni ba\u015flayanlar ve CSS’e tam hakim olmayanlar i\u00e7in yararl\u0131 olaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyorum. Bu makalede de siteyi table kullanmadan olu\u015fturaca\u011f\u0131z.<\/p>\n
\nOlu\u015fturaca\u011f\u0131m\u0131z site basit bir FRP(Fantasy Role Playing) kitap sitesi. Bu sitede kitaplar\u0131n tan\u0131t\u0131mlar\u0131, listesi, yazarlar, mesajlar gibi b\u00f6l\u00fcmler olacak ve bunlar\u0131n hepsi dinamik olarak olu\u015fturulacak.<\/p>\n
\u0130lk \u00f6nce site i\u00e7in lokalde bir klas\u00f6r yaratt\u0131m. “Doc” da site i\u00e7in dok\u00fcmanlar, “Logovs” de sitenin kaynak dosyalar\u0131, “images”de ise sitenin imajlar\u0131 bulunacak.<\/p>\n
<\/p>\n
Haz\u0131rlayaca\u011f\u0131m\u0131z siteyi \u015fu \u015fekilde tasarlad\u0131m. Header, footer ve sol navigasyon alan\u0131 Master Page’de olu\u015fturulacak. Sa\u011f k\u0131s\u0131m ise de\u011fi\u015fen i\u00e7erik alan\u0131 olacak.<\/p>\n
Siteyi EW’ye (Expression Web) tan\u0131tmak ile ba\u015fl\u0131yal\u0131m.<\/p>\n File>New>Web Site ile New penceresini a\u00e7\u0131yoruz.<\/p>\n Web Site tab\u0131nda, General, Empty Web Site’yi se\u00e7iyoruz.<\/p>\n Browse ile sitenin duraca\u011f\u0131 klas\u00f6r\u00fc se\u00e7iyoruz ve Open’a bas\u0131yoruz.<\/p>\n Daha sonra sitemizin ismini klas\u00f6rlerin devam\u0131na elle yaz\u0131yoruz.Bu \u00f6rnekte “FRP Kitap Sitesi”ni kendimiz yazd\u0131k. OK’e bas\u0131p i\u015flemi tamamlad\u0131k.<\/p>\n EW lokaldeki klas\u00f6r\u00fcn i\u00e7inde ismini bizim belirledi\u011fimiz bir klas\u00f6r yaratt\u0131. T\u00fcm \u00e7al\u0131\u015fmalar, bu klas\u00f6r\u00fcn i\u00e7inde ger\u00e7ekle\u015ftirilecek.<\/p>\n Fark ettiyseniz “images” klas\u00f6r\u00fc “FRP Kitap Sitesi” klas\u00f6r\u00fcn\u00fcn d\u0131\u015f\u0131nda kald\u0131. Oysa biz o imajlar\u0131 sitede kullanaca\u011f\u0131z. Bu sebeple o klas\u00f6r\u00fc site klas\u00f6r\u00fcn\u00fcn i\u00e7ine almam\u0131z gerekiyor.<\/p>\n File>Import>File<\/p>\n A\u00e7\u0131lan Import penceresinde, “Add Folder” a basarak images klas\u00f6r\u00fcm\u00fcz\u00fc bulup ekliyoruz ve OK diyerek i\u015flemi bitiriyoruz.<\/p>\n \u015eimdi Master Page’i olu\u015ftural\u0131m. Daha \u00f6nceki makalelerimde Master Page’in ne oldu\u011funu a\u00e7\u0131klamaya \u00e7al\u0131\u015fm\u0131\u015ft\u0131m. K\u0131saca de\u011finmek gerekirse, master page bir \u015fablondur. Sitenizin de\u011fi\u015fmeyen alanlar\u0131n\u0131 master page’de olu\u015fturur, t\u00fcm sayfalar\u0131 bundan t\u00fcretirsiniz. Daha \u00f6nceki makalelerimde Dynamic Web Template ile Master Page aras\u0131ndaki farklar\u0131 anlatm\u0131\u015ft\u0131m ama burada bir \u015fey daha eklemek isterim. Master Page’nizde bir de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, master page’den yarat\u0131lm\u0131\u015f sayfalar hi\u00e7 bir \u015fey sormadan otomatik de\u011fi\u015fir. Bunu yan\u0131nda Dynamic Web Template’de de\u011fi\u015fiklik yaparsan\u0131z Dynamic Web Template ile yarat\u0131lm\u0131\u015f sayfalar\u0131 update etmek isteyip istemedi\u011finizi soran bir ekran gelir.<\/p>\n Master Page i\u00e7in File>New>Page<\/p>\n A\u00e7\u0131lan New penceresinde Page tab\u0131nda General’dan Master Page’i se\u00e7iyoruz. Programming Language asl\u0131nda tasar\u0131mc\u0131y\u0131 pek ilgilendiren bir se\u00e7enek de\u011fil. Bu daha \u00e7ok sitenin kodlamas\u0131n\u0131, programc\u0131 arkada\u015flar\u0131n\u0131z\u0131n hangi dille yapaca\u011f\u0131na ya da programc\u0131 iseniz hangi dili kullan\u0131yor oldu\u011funuza ba\u011fl\u0131. Biz C# se\u00e7ip OK ile i\u015flemi tamaml\u0131yoruz.<\/p>\n ContentPlaceHolder’l\u0131 Master Page’imiz a\u00e7\u0131l\u0131yor.<\/p>\n ContentPlaceHolder’\u0131 se\u00e7ip siliyoruz. Tasar\u0131m\u0131 sonland\u0131rana kadar buna ihtiyac\u0131m\u0131z olmayacak. En sonunda biz kendimiz ContentPlaceHolder ekleyece\u011fiz. Bu i\u015flemi taglar\u0131n g\u00f6r\u00fcnd\u00fc\u011f\u00fc barda, tag\u0131n yan\u0131ndaki oka t\u0131klay\u0131p a\u00e7\u0131lan men\u00fcden yapabilece\u011finiz gibi (Remove Tag), direk Delete tu\u015fuyla da yapabilirsiniz. Taglar\u0131 bar\u0131nd\u0131ran bar i\u00e7 i\u00e7e girmi\u015f taglar\u0131 se\u00e7menizde de size \u00e7ok yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n Art\u0131k Master Page’imizi kaydedebiliriz. \u0130sim verip kaydetmek istedi\u011fimizde bir uyar\u0131 al\u0131yoruz. Bu uyar\u0131 ContentPlaceHolder’\u0131 silmemizden kaynaklan\u0131yor. Biz sonra Content alan\u0131 ekyece\u011fiz. Yes’e bas\u0131p uyar\u0131y\u0131 ge\u00e7iyoruz.<\/p>\n Bu makalede di\u011ferlerinin aksine external CSS sayfas\u0131 a\u00e7mayaca\u011f\u0131z. T\u00fcm bu i\u015fleri bizim i\u00e7in Expression Web yapt\u0131raca\u011f\u0131z. \u015eimdi tasar\u0131m\u0131m\u0131z\u0131 master page’e oturtmaya ba\u015flayabiliriz.<\/p>\n File>Properties ile veya sayfan\u0131n bo\u015f bir yerine sa\u011f klik “Page Properties” ile Page Properties penceresini a\u00e7\u0131youz. General tab\u0131nda title ile Keywords’leri yaz\u0131yoruz<\/p>\n Language tab\u0131nda sitemizi T\u00fcrk\u00e7e olarak ayarl\u0131yoruz.<\/p>\n \u015eimdi BODY, CSS’ini olu\u015fturaca\u011f\u0131z. Bu makalede bunu yaparken de\u011fi\u015fik ve daha kolay bir yol izleyece\u011fiz. Manage Styles kutucu\u011fundaki New Style… linkine t\u0131kl\u0131yoruz. (Manage Styles e\u011fer \u00e7al\u0131\u015fma ekran\u0131n\u0131zda de\u011filse men\u00fcden Task Pane ile a\u00e7abilirsiniz.)<\/p>\n Kar\u015f\u0131m\u0131za CSS kurallar\u0131n\u0131 kolayca yazabilece\u011finiz, New Style penceresi geliyor.<\/p>\n Selector alan\u0131na istedi\u011fimiz ismi verebiliriz. Ama haz\u0131r CSS kurallar\u0131 i\u00e7in bir listede mevcut. Bu listeden “body”yi se\u00e7iyoruz. (Bu liste ayr\u0131ca haz\u0131r CSS kurallar\u0131n\u0131 bir arada g\u00f6rmeniz a\u00e7\u0131s\u0131ndan da g\u00fczel bir f\u0131rsat). “body”‘yi se\u00e7tikten sonra font sitillerimizi olu\u015fturuyoruz.<\/p>\n Her \u015feyi belirlemeniz New Style penceresi ile olduk\u00e7a kolay. \u015eimdi “background” u olu\u015ftural\u0131m. background-color rengi i\u00e7in “More Colors…”\u0131 se\u00e7iyorum.<\/p>\n Gelen pencerede Value kutusuna “3F3F3F” renk kodunu yaz\u0131p Enter’a bas\u0131nca alttaki alttaki \u015fekle geliyor. OK deyip \u00e7\u0131k\u0131yorum.<\/p>\n De\u011ferleri se\u00e7mek yerine elle girebilece\u011finizi de unutmay\u0131n. S\u0131rada “background-image” ve onun repeate’i var. Bunlar\u0131 da giriyorum. (Arka plan imaj\u0131n\u0131 girerken tam yol gelip gelmedi\u011fine dikkat edin. E\u011fer bu olursa kutunun i\u00e7ine t\u0131klay\u0131p silerek d\u00fczeltmenizi yapabilir, linkinizi g\u00f6receli hale getirebilirsiniz.)<\/p>\n Peki bu ana kadar arka planda neler oldu. Expression Web neler yapt\u0131. Sol altta yer alan g\u00f6r\u00fcn\u00fcm butonlar\u0131yla bunu kontrol edebilirsiniz.<\/p>\n \u015eu ana kadar\u00a0 yapt\u0131klar\u0131m\u0131z\u0131n sonucunda EW’nin \u00fcretti\u011fi kod a\u015fa\u011f\u0131daki gibidir. Burada k\u0131rm\u0131z\u0131 olan koda dikkat edin. Bu daha \u00f6nce external CSS dosyalar\u0131na yazd\u0131\u011f\u0131m\u0131z, CSS’den ba\u015fka bir \u015fey de\u011fil. Ama sayfan\u0131n HEAD tag\u0131n\u0131n i\u00e7inde yer al\u0131yor. Peki y\u00fczlerce sat\u0131r CSS yazacaksak, zaten kod i\u00e7inde olan sayfalar\u0131n \u00fcst\u00fcne CSS yazmak biraz k\u00f6t\u00fc bir \u015fey de\u011fil mi? Bunu hi\u00e7 dert etmeyin. Biz devam edelim. EW zaman\u0131 geldi\u011finde bu d\u00fczenlemeyi sizin i\u00e7in yapacak.<\/p>\n <form id=”form1″ runat=”server”> <\/body><\/p>\n <\/html><\/p>\n<\/div>\n Biz tasar\u0131m\u0131 uygulamaya devam edelim.<\/p>\n Design g\u00f6r\u00fcn\u00fcm\u00fcndeyken, FORM tag\u0131n\u0131n i\u00e7ine t\u0131klay\u0131p Toolbox>Tags alt\u0131ndaki <div> objesine \u00e7ift t\u0131kl\u0131yoruz. Bu bizim header DIV’imiz olacak.<\/p>\n Manage Styles kutusundaki New Style… a tekrar t\u0131klay\u0131p New Style penceresini a\u00e7\u0131yoruz. Selector’un ismini bu sefer biz veriyoruz. \u0130smin \u00f6n\u00fcne neden “#” ekledi\u011fimizi veya ne zaman “#” ne zaman “.” ekleyece\u011fimizi \u00f6nceki makalelerimde anlatm\u0131\u015ft\u0131m. DIV i\u00e7in Position’da “Width” ve “height” yaz\u0131yoruz. Ard\u0131ndan position’da margin right ve left’i auto yap\u0131yoruz. Bu D\u0130V’imizi her zaman sayfaya ortalayacak. Biz sitilleri yazd\u0131k\u00e7a alttaki description alan\u0131nda yaz\u0131lanlar\u0131n g\u00f6sterildi\u011fine dikkat edin.<\/p>\n CSS kural\u0131m\u0131z haz\u0131r.<\/p>\n Yapmam\u0131z gereken DIV’i se\u00e7ip, Apply Styles kutusunda “#header” kural\u0131na t\u0131klamak. Peki DIV i se\u00e7menin en kolay yollar\u0131 nelerdir? HTML’e hakimseniz, Split g\u00f6r\u00fcn\u00fcm\u00fcnde DIV’i se\u00e7ebilirsiniz. Ya da DIV’inde i\u00e7ine Design g\u00f6r\u00fcn\u00fcm\u00fcnde t\u0131klayarak, Taglar\u0131n g\u00f6r\u00fcnd\u00fc\u011f\u00fc barda DIV’e t\u0131klayarak se\u00e7ebilirsiniz. CSS’i DIVe ba\u011fl\u0131yoruz. Sonu\u00e7.<\/p>\n \u015eimdi DIV’in i\u00e7ine header imaj\u0131n\u0131 giriyoruz. L\u00fctfen imajlar\u0131n\u0131za “alternate text” vermeyi unutmay\u0131n.<\/p>\n \u015eimdi imaja ana sayfaya d\u00f6nmek i\u00e7in link verece\u011fiz. \u00dcst\u00fcne t\u0131kl\u0131yoruz. Ya menu’den Insert>Hyperlink’e ya da bar’dan Hyperlink k\u0131sa yoluna t\u0131klayarak, \u015eimdi i\u00e7eri\u011fin bulunaca\u011f\u0131 alan\u0131 olu\u015fturaca\u011f\u0131z. Header DIV’nin hemen alt\u0131na bir ba\u015fka DIV tag\u0131 a\u00e7\u0131yoruz. Bu DIV se\u00e7iliyken Manage Styles’dan New Style bas\u0131yoruz.\u00a0 ismi “#container” olarak belirliyoruz. Widht,i 960px, right ve left marginleri auto yap\u0131yoruz. Burada dikkat edece\u011fimiz \u015fudur. E\u011fer New Style’a bir tag’\u0131 (burada DIV) se\u00e7erek basarsan\u0131z ve “Apply new style to document selection” kutucu\u011funu i\u015faretleyerek OK bas\u0131p i\u015fleminizi bitirirseniz, se\u00e7ti\u011finiz DIV ile CSS kural\u0131n\u0131z\u0131 ba\u011flanm\u0131\u015f olarak i\u015finizi bitirirsiniz.<\/p>\n Asl\u0131nda #container’a arka plan resmide ekleyecektik ama ilk seferde bunu unuttuk. \u015eimdi container kural\u0131n\u0131 d\u00fczenleyelim. \u0130lk \u00f6nce Manage Styles ve Apply Styles kutular\u0131nda kurallar\u0131n \u00fczerinde mouse imlecini bekletince, o kural ile ilgili t\u00fcm sitilleri g\u00f6rebilece\u011fimizi s\u00f6ylemeliyim. G\u00fczel bir \u00f6zellik.<\/p>\n D\u00fczenlemek iste\u011fimiz CSS kural\u0131na sa\u011f klik yap\u0131p Modify Style t\u0131klay\u0131nca\u00a0 a\u00e7\u0131lan pencereden CSS’imizi d\u00fczenleyebiliyoruz.<\/p>\n container kural\u0131na background imaj\u0131 ekliyoruz.<\/p>\n \u015eimdi footer’\u0131 olu\u015fturaca\u011f\u0131z. \u0130lk \u00f6nce container DIV’in alt\u0131na bir DIV daha giriyoruz. Bu DIV se\u00e7iliyken New Style’a bas\u0131yoruz.Marginlerimizi, backgroundumuzu, uzunluklar\u0131 belirliyoruz. Apply new style to document selection se\u00e7iliyken OK deyip \u00e7\u0131k\u0131yoruz.<\/p>\n \u015eimdi container’in i\u00e7inde bulunacak alanlar\u0131 olu\u015ftural\u0131m. \u0130lk \u00f6nce navigasyon. Container DIV’nin i\u00e7inde bir DIV yarat\u0131yorum. Bu navigasyonu i\u00e7inde tutacak DIV olacak. DIV se\u00e7iliyken New Style ile sitilleri belirliyorum.<\/p>\n More Colors penceresinde Select ile renk \u00e7alabilirsiniz.<\/p>\n Tekrar container DIV’nin i\u00e7ine bir DIV daha giriyorum bu da bizim i\u00e7erik alan\u0131m\u0131z\u0131 olu\u015fturacak. New Style ile CSS kural\u0131n\u0131 haz\u0131rl\u0131yoruz.<\/p>\n \u015eimdi container i\u00e7ine son bir DIV ekliyoruz. Bu DIV container ve navBox DIV’lerinin alt\u0131nda yer almal\u0131. A\u00e7aca\u011f\u0131m\u0131z bu son DIV ile Firefox uyumlulu\u011funu sa\u011flayaca\u011f\u0131z. Bu DIV i\u00e7in alttaki kural\u0131 New Style ile olu\u015fturuyoruz.<\/p>\n \u015eimdi sitenin linklerini olu\u015ftural\u0131m. New Style’a bas\u0131yoruz ve Selector men\u00fcs\u00fcnden a:link’i se\u00e7erek linkimizi haz\u0131rl\u0131yoruz.<\/p>\n \u015eimdi visited ve hover’\u0131da haz\u0131rlayaca\u011f\u0131z ama bunu yaparken farkl\u0131 bir yol izleyece\u011fiz. Manage Styles’da “a:link”e sa\u011f klik yap\u0131p a\u00e7\u0131lan men\u00fcden “New Style Copy”ye t\u0131kl\u0131yoruz. New Style penceresi a\u00e7\u0131l\u0131yor. Yeni olu\u015fturaca\u011f\u0131m\u0131z sitilin Selector’den ismini ve \u00f6zelliklerini de\u011fi\u015ftirdi\u011fimizde yepyeni sitilimiz haz\u0131r oluyor. Bir birine benzeyen CSS kurallar\u0131 yazma a\u015famas\u0131nda bu \u00f6zellik i\u015finizi \u00e7ok kolayla\u015ft\u0131racakt\u0131r.<\/p>\n Link kurallar\u0131m\u0131z\u0131 olu\u015fturdu\u011fumuza g\u00f6re \u015fimdi navigasyona ge\u00e7ebiliriz. \u0130lk \u00f6nce DOC klas\u00f6r\u00fcnde word’de yazd\u0131\u011f\u0131m navigasyonu kopyal\u0131yorum.<\/p>\n navBox DIV’nin i\u00e7ine yap\u0131\u015ft\u0131rma i\u015flemi i\u00e7in Edit>Paste Text’i se\u00e7iyorum.<\/p>\n A\u00e7\u0131lan Paste Text penceresinde “Normal paragraphs without line breaks” i se\u00e7ip OK’e bas\u0131yorum.<\/p>\n Men\u00fcn\u00fcn <p> taglar\u0131yla geldi\u011fini Split g\u00f6r\u00fcn\u00fcm\u00fcnden g\u00f6rebilirsiniz.<\/p>\n Design g\u00f6r\u00fcn\u00fcm\u00fcndeyken sol kli\u011fe bas\u0131l\u0131 tutarak men\u00fcy\u00fc se\u00e7iyoruz ve men\u00fcden Formt>Bullets and Numbering’e t\u0131kl\u0131yoruz.<\/p>\n A\u00e7\u0131lan Bullets and Numbering penceresinde Plain Bullets tab\u0131na t\u0131klay\u0131p, sol \u00fcstteki g\u00f6r\u00fcn\u00fcm\u00fc se\u00e7iyoruz.<\/p>\n Bu i\u015flemin sonucunda men\u00fcn\u00fcz\u00fcn alttaki \u015fekilde tagland\u0131\u011f\u0131n\u0131 g\u00f6receksiniz.<\/p>\n Bu i\u015flemlerin sonucunda men\u00fcn\u00fcn ald\u0131\u011f\u0131 g\u00f6r\u00fcn\u00fc\u015f istedi\u011fimiz bir g\u00f6r\u00fcnt\u00fc de\u011fil. Elbette bunu de\u011fi\u015ftirece\u011fiz ama \u00f6nce men\u00fc elemanlar\u0131na linklerini verelim.<\/p>\n Tek tek men\u00fc elamanlar\u0131n\u0131 se\u00e7ip “Insert Hyperlink” butonuyla gelen ekrana ileride olu\u015fturaca\u011f\u0131m\u0131z sayfa isimlerini veriyoruz. Sayfalar\u0131 olu\u015ftururken T\u00fcrk\u00e7e karakter kullanamayaca\u011f\u0131n\u0131z\u0131 unutmay\u0131n.<\/p>\n \u015eimdi <ul> ve <li> taglar\u0131n\u0131 kullanarak men\u00fcm\u00fcz\u00fc d\u00fczenleyece\u011fiz. \u0130lk \u00f6nce UL i\u00e7in CSS kural\u0131 olu\u015fturuyoruz.<\/p>\n \u015eimdi LI i\u00e7in CSS kural\u0131 olu\u015fturaca\u011f\u0131z. New Style’a bas\u0131p gelen pencerede LI i\u00e7in sitilleri belirliyoruz.<\/p>\n Bunu yapt\u0131\u011f\u0131n\u0131zda g\u00f6receksiniz ki linkler istedi\u011fimiz ye\u015fil rengi alamad\u0131 . \u00c7\u00fcnk\u00fc bu linkler genel <a> tag\u0131ndan etkileniyor. Bu sebeple navBox’a \u00f6zel <a> CSS’i haz\u0131rlayaca\u011f\u0131z. LI CSS’inden sa\u011f klik “New Style Copy” ile bir tane daha CSS \u00e7\u0131kar\u0131p, bunun ismini “#navBox a” olarak de\u011fi\u015ftirip margin sitillerini silece\u011fiz. B\u00f6ylece navBox’a \u00f6zel bir <a> kural\u0131 belirlem\u015f olduk.<\/p>\n Navigasyon bitti\u011fine g\u00f6re, footer’\u0131n alt\u0131na alternatif navigasyonumuzu yaratarak devem edebiliriz. Footer DIV’nin alt\u0131na bir DIV daha a\u00e7\u0131yoruz ve bunun i\u00e7in CSS kural\u0131n\u0131 haz\u0131rl\u0131yoruz.<\/p>\n Asl\u0131nda \u015fu anda master page’e tasar\u0131m\u0131 oturtma i\u015fini bitirdik. Ama her \u015feyi tamamlamadan \u00f6nce yapmam\u0131z gereken bir iki i\u015f daha var. \u00d6ncellikle ileride i\u015fimize yarayaca\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm\u00fcz iki CSS kural\u0131 daha olu\u015fturaca\u011f\u0131z. Bunlar site i\u00e7inde kullanaca\u011f\u0131m\u0131z imajlar\u0131 kontrol edecek kurallar. Sola yaslanm\u0131\u015f imajlar i\u00e7in New Style’a bas\u0131yoruz ve kurall\u0131m\u0131z\u0131 yarat\u0131yoruz.<\/p>\n Sa\u011fa yasl\u0131 imajlar i\u00e7in ise imageLeft kural\u0131ndan \u00e7o\u011falt\u0131yorum.<\/p>\n De\u011fi\u015fiklikleri yap\u0131yorum.<\/p>\n Evet art\u0131k CSS’lerimizi tamamlad\u0131\u011f\u0131m\u0131za g\u00f6re bunlar\u0131 external(harici) CSS dosyalar\u0131na ta\u015f\u0131yabiliriz. Altta ge\u00e7erli sayfada yarat\u0131lm\u0131\u015f CSS kurallar\u0131n\u0131n listesi g\u00f6r\u00fcn\u00fcyor.<\/p>\n Sitillerinizin s\u0131ralamas\u0131n\u0131\u00a0 Manage Style kutucu\u011fu i\u00e7inde s\u00fcr\u00fckleyip b\u0131rakarak ayarlayabilirsiniz.<\/p>\n \u015eimdi site klas\u00f6r\u00fcm\u00fczde CSS isminde bir klas\u00f6r a\u00e7al\u0131m. E\u011fer klas\u00f6r\u00fc windows’da a\u00e7arsan\u0131z. Bu klas\u00f6r\u00fcn projenizin Folder List’inde g\u00f6r\u00fcnmedi\u011fini fark edersiniz. Yapman\u0131z gereken tek \u015fey Folder List i\u00e7ine t\u0131klayarak refresh(F5) yapmak.<\/p>\n \u015eimdi \u00fc\u00e7 adet CSS dosyas\u0131 yarat\u0131yoruz.<\/p>\n Ve bunlar\u0131 CSS klas\u00f6r\u00fcne kaydediyoruz.<\/p>\n main.master sayfan\u0131za d\u00f6n\u00fcp Manage Style kutusundaki “Attach Style Sheet” i kullanarak format.css ve layout.css dosyalar\u0131n\u0131 sayfan\u0131za ekleyin.<\/p>\n \u015eimdi formata ve tasar\u0131ma ait olan CSS kurallar\u0131n\u0131 bu harici CSS dosyalar\u0131na da\u011f\u0131taca\u011f\u0131z. Bunun inan\u0131lmaz kolay bir yolu var yapman\u0131z gereken tek \u015fey, CSS kural\u0131na t\u0131klay\u0131p (\u00f6rnek .imageLeft) bunun s\u00fcr\u00fckleyip harici CSS dosyas\u0131n\u0131n isminin \u00fcst\u00fcnde b\u0131rakmak (\u00f6rnek format.css) Bununla haz\u0131rlam\u0131\u015f oldu\u011fumuz CSS kurallar\u0131 CSS dosyalar\u0131na yaz\u0131lm\u0131\u015f oluyorlar.<\/p>\n \u015eimdi ileri ve g\u00fczel bir teknik kullanaca\u011f\u0131z. CSS’lerimizi format ve layout olarak ay\u0131rd\u0131k ama sayfam\u0131zda bir CSS linki olsun di\u011fer sayfalar bu tek linkten referans als\u0131n istiyoruz. Bunun i\u00e7in master pagedeyken harici CSS dosyam\u0131z\u0131n ismine sa\u011f klik yap\u0131yoruz ve “Remove Link’e” bas\u0131yoruz.<\/p>\n CSS linkleri gidince sitemizin geldi\u011fi durum.<\/p>\n Art\u0131k yapmam\u0131z gereken tek \u015fey master page’e main.css linkini eklemek. Master page’de olu\u015fan t\u00fcm kod alttaki gibidir.<\/p>\n <form id=”form1″ runat=”server”> <div id=”footer”> <div id=”altNav”> <\/form><\/p>\n <\/body><\/p>\n <\/html><\/p>\n<\/div>\n Master Page’i tamamlamak i\u00e7in gereken son \u015fey conten alan\u0131. content DIV’ine sa\u011f klik yap\u0131yoruz ve a\u00e7\u0131lan men\u00fcde “Manage Microsoft ASP.NET Content Regions”a t\u0131kl\u0131yoruz.<\/p>\n A\u00e7\u0131lan pencerede content alan\u0131m\u0131z i\u00e7in Region name’e bir isim yaz\u0131yoruz. Bunu add butonu ile ekleyip Close ile pencereyi kap\u0131yoruz.<\/p>\n ContentPlaceHolder’da eklendi\u011fine g\u00f6re master page haz\u0131r.<\/p>\n \u015eimdi master page’den statik olan sayfam\u0131z\u0131 “FRP Nedir?” sayfas\u0131n\u0131 olu\u015ftural\u0131m. File>Create from Master Page<\/p>\n Gelen pencerede Browse’a bas\u0131p master page’imizi bulup OK ile \u00e7\u0131k\u0131yoruz.<\/p>\n Evet master page’den ilk sayfam\u0131z\u0131 t\u00fcrettik. \u015eimdi bu sayfay\u0131 men\u00fcdeki link ismi ile ayn\u0131 olacak \u015fekilde isimlendirip kaydedelim. (frp.aspx)<\/p>\n![\"\"](\"http:\/\/www.yazgelistir.com\/Makaleler\/Resimler\/1000001319_02.jpg\")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/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”><head runat=”server”>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=windows-1254″ \/>
\n<meta http-equiv=”Content-Language” content=”tr” \/>
\n<title>FRP Kitap Merkezi<\/title>
\n<asp:ContentPlaceHolder id=”head” runat=”server”>
\n<\/asp:ContentPlaceHolder>
\n<style type=”text\/css”>
\nbody {
\nfont-family: Arial, Helvetica, sans-serif;
\nfont-size: 12px;
\ncolor: #FFFFFF;
\nbackground-color: #3f3f3f;
\nbackground-image: url(‘images\/backImg.jpg’);
\nbackground-repeat: repeat-x;
\n}
\n<\/style>
\n<meta name=”keywords” content=”FRP, kitap, yazar” \/>
\n<\/head><body><\/p>\n
\n<\/form><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<div id=”header”>
\n<img alt=”FRP Kitap Merkezi” src=”images\/header.jpg” width=”960″ height=”228″ \/>
\n<\/div><\/div>\n<\/a><\/p>\n hyperlink penceresini a\u00e7\u0131yoruz. Address b\u00f6l\u00fcm\u00fcne linkimizi elle yaz\u0131yoruz \u00e7\u00fcnk\u00fc hen\u00fcz b\u00f6yle bir sayfa yok.<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n#navBox {
\nborder: 1px solid #3F3F3F;
\nfloat: left;
\nbackground-color: #B9B8AE;
\nwidth: 228px;
\nmargin-left:5px;
\n}<\/div>\n<\/a><\/p>\n#content {
\nmargin-left: 10px;
\nfloat: right;
\nwidth: 690px;
\nmargin-right: 10px;
\n}<\/div>\n.clear {
\nclear: both;
\nheight: 1px;
\nfont-size: 1px;
\nline-height: 1px;
\nmargin-bottom: -1px;
\n}<\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<div id=”navBox”>
\n<p>Ana Sayfa<\/p>
\n<p>Kitap Listesi<\/p>
\n<p>Yazarlar<\/p>
\n<p>Mesajlar<\/p>
\n<p>FRP Nedir?<\/p>
\n<\/div><\/div>\n<\/a><\/p>\n<\/a><\/p>\n<div id=”navBox”>
\n<ul>
\n<li>Ana Sayfa<\/li>
\n<li>Kitap Listesi<\/li>
\n<li>Yazarlar<\/li>
\n<li>Mesajlar<\/li>
\n<li>FRP Nedir?<\/li>
\n<\/ul>
\n<\/div><\/div>\n<\/a><\/p>\n<div id=”navBox”>
\n<ul>
\n<li><a href=”default.aspx”>Ana Sayfa<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”writers.aspx”>Yazarlar<\/a><\/li>
\n<li><a href=”messages.aspx”>Mesajlar<\/a><\/li>
\n<li><a href=”frp.aspx”>FRP Nedir?<\/a><\/li>
\n<\/ul>
\n<\/div><\/div>\n<\/a><\/p>\n<\/a><\/p>\n#navBox a {
\nfont-family: Verdana;
\nfont-size: 14px;
\ncolor: #003300;
\ntext-decoration: none;
\nfont-weight: bold;
\nlist-style-type: none;
\n}<\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n.imageLeft {
\nfloat: left;
\nmargin-right: 10px;
\nmargin-bottom: 10px;
\n}
\n.imageRight {
\nfloat: right;
\nmargin-bottom: 10px;
\nmargin-left: 10px;
\n}<\/div>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a>
\n\u015eimdi main.css’i a\u00e7\u0131yoruz ve bu css’deyken Attach Style Sheet ile di\u011fer CSS’leri (format.css, layout.css) main.css’e ekliyoruz.<\/p>\n@import url(‘format.css’);
\n@import url(‘layout.css’);<\/div>\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”><head runat=”server”>
\n<meta http-equiv=”Content-Type” content=”text\/html; charset=windows-1254″ \/>
\n<meta http-equiv=”Content-Language” content=”tr” \/>
\n<title>FRP Kitap Merkezi<\/title>
\n<asp:ContentPlaceHolder id=”head” runat=”server”>
\n<\/asp:ContentPlaceHolder>
\n<meta name=”keywords” content=”FRP, kitap, yazar” \/>
\n<link rel=”stylesheet” type=”text\/css” href=”CSS\/main.css” \/>
\n<\/head><body><\/p>\n
\n<div id=”header”>
\n<img alt=”FRP Kitap Merkezi” src=”images\/header.jpg” width=”960″ height=”228″ \/><\/div>
\n<div id=”container”>
\n<div id=”navBox”>
\n<ul>
\n<li><a href=”default.aspx”>Ana Sayfa<\/a><\/li>
\n<li><a href=”bookLists.aspx”>Kitap Listesi<\/a><\/li>
\n<li><a href=”writers.aspx”>Yazarlar<\/a><\/li>
\n<li><a href=”messages.aspx”>Mesajlar<\/a><\/li>
\n<li><a href=”frp.aspx”>FRP Nedir?<\/a><\/li>
\n<\/ul>
\n<\/div>
\n<div id=”content”>
\n<\/div>
\n<div><\/div>
\n<\/div><\/p>\n
\n<\/div><\/p>\n
\n<a href=”default.aspx”>Ana Sayfa<\/a> ::
\n<a href=”bookLists.aspx”>Kitap Listesi<\/a> ::
\n<a href=”writers.aspx”>Yazarlar<\/a> ::
\n<a href=”messages.aspx”>Mesajlar<\/a> ::
\n<a href=”frp.aspx”>FRP Nedir?<\/a> ::
\n<\/div><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<asp:ContentPlaceHolder runat=”Server” id=”main”>
\n<div id=”content”>
\n<\/div>
\n<\/asp:ContentPlaceHolder><\/div>\n<\/a><\/p>\n<\/a><\/p>\n
\nfrp.aspx sayfas\u0131nda main alan\u0131n\u0131n yan\u0131ndaki ok’a t\u0131klayarak Create Custom Content’e t\u0131klayarak i\u00e7erik alan\u0131m\u0131z\u0131 kullan\u0131ma haz\u0131r hale getiriyoruz.<\/p>\n