{"id":384,"date":"2010-06-24T09:41:25","date_gmt":"2010-06-24T09:41:25","guid":{"rendered":"http:\/\/www.erbugkaya.com\/?p=384"},"modified":"2014-01-16T23:52:05","modified_gmt":"2014-01-16T23:52:05","slug":"table-kullanmadan-div-ve-css-ile-site-hazirlamak","status":"publish","type":"post","link":"http:\/\/erbugkaya.com\/?p=384","title":{"rendered":"Table Kullanmadan, DIV ve CSS ile Site Haz\u0131rlamak."},"content":{"rendered":"

26\/4\/2007<\/em>
\nMerhaba bu makalemde Microsoft Expression Web ile DIV ve CSS kullanarak site yap\u0131m\u0131n\u0131 anlataca\u011f\u0131m. Ayn\u0131 zamanda ilk kez ASP.NET kontrollerini kullanmay\u0131, database\u2019den veri \u00e7ekmeyi bu makalede inceleyece\u011fiz.<\/p>\n

Neden tablosuz tasar\u0131m?<\/p>\n

Her \u015feyden \u00f6nce tablosuz site, y\u00fczde 25 ile 50 aras\u0131nda daha az boyutlu olu\u015fmaktad\u0131r. Bu da daha az y\u00fckleme s\u00fcresi demektir. Kullan\u0131c\u0131lar\u0131n 20 sn\u2019de bir site hakk\u0131nda kararlar\u0131n\u0131 verdiklerini d\u00fc\u015f\u00fcn\u00fcrsek, bu \u00e7ok iyi bir sebep.<\/p>\n

Arama motorlar\u0131nda tablosuz tasar\u0131mlar daha \u00fcst s\u0131ralarda yer almaktad\u0131r.<\/p>\n

Tamamen CSS ile ba\u011flanm\u0131\u015f bir sitenin bak\u0131m\u0131 daha kolayd\u0131r.<\/p>\n

Site daha esnek bir yap\u0131dad\u0131r.<\/p>\n

Bu sebeplerden dolay\u0131 CSS ile tablosuz bir tasar\u0131m\u0131n yararl\u0131 oldu\u011funu d\u00fc\u015f\u00fcn\u00fcyorum.<\/p>\n


\nBa\u015flayal\u0131m.<\/p>\n

Siteyi \u015fu \u015fekilde tasarlad\u0131m.<\/p>\n

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

Site i\u00e7in lokalimde a\u00e7t\u0131\u011f\u0131m klas\u00f6r\u00fcn i\u00e7inde \u00fc\u00e7 klas\u00f6r daha a\u00e7t\u0131m. Biri \u201cLogovs\u201d di\u011feri \u201cimages\u201d ve \u201cdb\u201d. Logovs al\u0131\u015fkanl\u0131\u011f\u0131m olarak her zaman a\u00e7t\u0131\u011f\u0131m bir klas\u00f6rd\u00fcr. Bu klas\u00f6rde sitenin yap\u0131m\u0131nda kulland\u0131\u011f\u0131m kaynak dosyalar\u0131n\u0131 tutuyorum. \u201cimages\u201d de ise sitenin kulland\u0131\u011f\u0131 imajlar bulunacak. \u201cdb\u201d\u2019de ise database bulunacak.<\/p>\n

Site i\u00e7in gerekli imajlar\u0131 \u00f6nceden haz\u0131rlay\u0131p images klas\u00f6r\u00fcne koydum.<\/p>\n

\u0130lk \u00f6nce yeni bir site a\u00e7arak i\u015fe ba\u015fl\u0131yoruz.<\/p>\n

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

General\u2019dan \u201cEmpty Web Page\u201di se\u00e7iyoruz. Browse ile sitemizin lokaldeki yerini g\u00f6sterip, OK ile i\u015flemi tamaml\u0131yoruz.<\/p>\n

Sitemizi EW\u2019ye tan\u0131tt\u0131\u011f\u0131m\u0131za g\u00f6re ilk i\u015fimiz yeni bir sayfa a\u00e7\u0131p tasar\u0131m\u0131 uygulamaya ba\u015flamak.<\/p>\n

Bu site i\u00e7inde Master Page kullanaca\u011f\u0131z. Header, navigasyon, navigasyon alt\u0131ndaki imaj alan\u0131, sol k\u0131s\u0131m ve footer, Master Page\u2019de bulanacaklar. Sa\u011f i\u00e7erik alan\u0131 ise her sayfada de\u011fi\u015fiklik g\u00f6sterecek. Bu benim \u00f6ng\u00f6rd\u00fc\u011f\u00fcm bir yerle\u015fim. \u0130stenir ise sol alanda, navigasyon alt\u0131ndaki alanda de\u011fi\u015febilir d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\n

H\u0131zl\u0131ca, yeni bir Master Page ve CSS sayfas\u0131 a\u00e7\u0131yoruz.<\/p>\n

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

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

Sayfalar\u0131 dummy.master ve dummy.css olarak kaydediyorum.<\/p>\n

dummy.css\u2019i dummy.master\u2019a ba\u011fl\u0131yorum.<\/p>\n

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

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

EW \u015fu \u015fekilde kod \u00fcretiyor<\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”dummy.css” \/><\/p>\n

Bunun d\u0131\u015f\u0131nda birde yapt\u0131klar\u0131m\u0131z\u0131 kontrol edebilmek i\u00e7in Master Page\u2019den t\u00fcretilmi\u015f bir aspx sayfas\u0131 yaratal\u0131m. Ben sayfay\u0131 draft.aspx olarak kaydettim. F12\u2019ye basarak tasar\u0131m\u0131z\u0131 browser\u2019\u0131n\u0131zda kontrol edebilirsiniz.<\/p>\n

Bu ba\u011flant\u0131y\u0131 do\u011fru kurduysak sitemize ba\u015flayabiliriz. \u0130lk ad\u0131m CSS’de BODY kural\u0131n\u0131 haz\u0131rlamak. dummy.css i\u00e7inde body\u2019yi yaz\u0131yoruz. EW, CSS yazarken size \u00e7ok b\u00fcy\u00fck kolayl\u0131klar sa\u011flayacakt\u0131r.<\/p>\n

\"\"<\/p>\n

Tasar\u0131m\u0131n background\u2019unu olabildi\u011fince ince ve uzun olarak kesip \u00e7\u0131kard\u0131\u011f\u0131m\u0131za g\u00f6re bununla CSS\u2019imizi yazabiliriz. Bu uzun imaj\u0131n boyundan daha uzun g\u00f6r\u00fcn\u00fcmler i\u00e7in imaj\u0131n en alt\u0131ndaki renk kodu da BODY\u2019mizde background-color olacak.<\/p>\n

body{
\nbackground-image:url(‘images\/back.jpg’);
\nbackground-repeat:repeat-x;
\nbackground-color:#f8f8f8;
\n}<\/p>\n

Sitemizde kullanaca\u011f\u0131m\u0131z font tipi Arial olacak ve en \u00e7ok da 12px boy ve gri rengi kullanaca\u011f\u0131z. Bu sebeple bunlar\u0131 BODY\u2019de yazabiliriz. Farkl\u0131l\u0131k g\u00f6sterecek fontlar i\u00e7in ba\u015fka CSS kurallar\u0131 yaratabiliriz.<\/p>\n

body{
\nbackground-image:url(‘images\/back.jpg’);
\nbackground-repeat:repeat-x;
\nbackground-color:#f8f8f8;
\nfont-family:Arial, Helvetica, sans-serif;
\nfont-size:12px;
\ncolor:#535353;
\nmargin-top:0px;
\n}<\/p>\n

\u015eimdi sitemizi oturtmaya yukar\u0131dan a\u015fa\u011f\u0131ya devam edebiliriz. Header\u0131n navigasyona kadar olan b\u00f6l\u00fcm\u00fcn\u00fc tek par\u00e7a halinde \u00e7\u0131kar\u0131yoruz. Ve CSS\u2019ni yaz\u0131yoruz.<\/p>\n

#header{
\nwidth:968px;
\nposition:relative;
\nbackground-image:url(‘images\/header.jpg’);
\nbackground-repeat:no-repeat;
\nheight:109px;
\nmargin-left:auto;
\nmargin-right:auto;
\n}<\/p>\n

CSS\u2019in haz\u0131r kurallar\u0131 d\u0131\u015f\u0131nda, kural isimlerini biz kendimiz belirliyoruz ama mant\u0131kl\u0131 isimler vermekte yarar var.<\/p>\n

CSS\u2019i inceleyelim biraz. E\u011fer CSS\u2019i id ile ili\u015fkilendireceksek ismin ba\u015f\u0131nda \u201c#\u201d kullan\u0131yoruz. B\u00f6ylece bir kez kullan\u0131lacak bir CSS yazm\u0131\u015f oluyoruz. E\u011fer yazaca\u011f\u0131m\u0131z CSS farkl\u0131 yerlerde kullan\u0131lacaksa class ile ba\u011flamam\u0131z gerekiyor. Bu tip durumlarda ismin ba\u015f\u0131nda \u201c.\u201d kullan\u0131yoruz. \u00d6rnekte oldu\u011fu gibi header\u2019\u0131 bir kez kullanaca\u011f\u0131z ve DIV\u2019e bunu id ile verece\u011fiz bu sebeple \u201c#\u201d kullan\u0131yoruz. Ama s\u0131k\u00e7a kullan\u0131lacak bir font i\u00e7in CSS yazacak olsayd\u0131k bunu \u201c.\u201d \u0130le ba\u015flatmal\u0131yd\u0131k.<\/p>\n

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

Sitillerinizi belirlerken elle yazmak zorunda de\u011filsiniz. CSS kutusunu kullanarak da CSS\u2019inizi kontrol edebilirsiniz.<\/p>\n

Header i\u00e7in CSS kural\u0131 haz\u0131r oldu\u011funa g\u00f6re bunu kullanaca\u011f\u0131m\u0131z DIV\u2019i olu\u015ftural\u0131m. ASP.NET i\u00e7in \u00e7al\u0131\u015f\u0131yorsak tasar\u0131m\u0131m\u0131z\u0131n kodlar\u0131 form tag\u2019\u0131n\u0131n i\u00e7inde yer almal\u0131.<\/p>\n

<body>
\n<form id=”form1″ runat=”server”>
\n<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”>
\n<\/asp:ContentPlaceHolder>
\n<\/form>
\n<\/body><\/p>\n

Bunu yapman\u0131n en kolay yolu Split g\u00f6r\u00fcn\u00fcm\u00fcndeyken, form tag\u2019\u0131n\u0131n alt\u0131na girmek;<\/p>\n

\"\"<\/p>\n

ve Toolbox>HTML>Tags alt\u0131ndaki \u201cdiv\u201di buraya s\u00fcr\u00fckleyip b\u0131rakmak.<\/p>\n

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

\u015eimdi CSS kural\u0131n\u0131 div\u2019e ba\u011flamal\u0131y\u0131z. Div se\u00e7iliyken Apply Styles kutusunda header kural\u0131na t\u0131klayarak div\u2019i CSS\u2019e ba\u011fl\u0131yoruz.<\/p>\n

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

Sonu\u00e7.<\/p>\n

<div id=”header”><\/div><\/p>\n

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

\u015eimdi navigasyonu olu\u015fturmaya ba\u015flayal\u0131m. Navigasyonun bulunaca\u011f\u0131 background\u2019u ile bir bir div haz\u0131rlayal\u0131m. Master Page\u2019de header\u2019in hemen alt\u0131na yeni DIV tag\u2019\u0131m\u0131z\u0131 ekliyoruz.<\/p>\n

<div id=”header”><\/div>
\n<div><\/div><\/p>\n

\u015eimdi bu yeni DIV i\u00e7in CSS kural\u0131 yaz\u0131yoruz.<\/p>\n

#navBack{
\nwidth:968px;
\nheight:36px;
\nbackground-image:url(‘images\/navBack.jpg’);
\nbackground-repeat:no-repeat;
\nposition:relative;
\nmargin-left:auto;
\nmargin-right:auto;
\npadding-right:4px;
\n}<\/p>\n

DIV\u2019imizi CSS ile ba\u011fl\u0131yoruz.<\/p>\n

<div id=”navBack” align=”right”><\/div><\/p>\n

\u015eimdi Men\u00fcm\u00fcz\u00fc olu\u015ftural\u0131m. Bu a\u015famada art\u0131k biraz ASP.NET kontrollerini kullanmaya ba\u015flayabiliriz. navBack DIV\u2019nin i\u00e7ine Toolbox>ASP.NET Controls>Navigation\u2019daki Menu kontrol\u00fcn\u00fc s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz.<\/p>\n

<div id=”navBack” align=”right”>
\n<asp:Menu runat=”server” id=”Menu1″>
\n<\/asp:Menu>
\n<\/div><\/p>\n

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

Desin g\u00f6r\u00fcn\u00fcm\u00fcndeyken Men\u00fc\u2019ye sa\u011f klik yap\u0131p Show Common Control Tasks\u2019\u0131 se\u00e7iyoruz.<\/p>\n

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

Men\u00fcm\u00fcz\u00fc statik veya dinamik olarak olu\u015fturabiliriz. Biz bu \u00f6rnekte statik \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n

Menu se\u00e7iliyken tab properties kutusundaki Layout se\u00e7ene\u011finde Orientation\u2019\u0131 Vertical\u2019dan Horizontal\u2019a \u00e7eviriyoruz.<\/p>\n

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

\u015eimdi Common Menu Tasks\u2019da Edit Menu Items\u2019a t\u0131kl\u0131yoruz.<\/p>\n

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

A\u00e7\u0131lan Menu Item Editor\u2019deki \"\" ikonuna t\u0131klayarak men\u00fcn\u00fcn elemanlar\u0131n\u0131 ekliyoruz.<\/p>\n

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

Menu tasar\u0131m\u0131nda imaj kulland\u0131\u011f\u0131m\u0131z i\u00e7in, her men\u00fc item\u2019\u0131n\u0131n \u201cText\u201d ve \u201cValue\u201d de\u011ferlerini silip \u201cImageUrl\u201d\u2019ye buton imajlar\u0131m\u0131z\u0131 giriyoruz. Bu i\u015flemleri alt alta her item i\u00e7in yap\u0131yoruz.<\/p>\n

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

Men\u00fc item\u2019lar\u0131 yan yana yerlerini ald\u0131klar\u0131nda aralar\u0131ndaki bo\u015fluklar bizim tasarlad\u0131\u011f\u0131m\u0131zdan farkl\u0131 g\u00f6r\u00fcn\u00fcyor. Bunu \u00e7\u00f6zmek i\u00e7in men\u00fcm\u00fcz\u00fcn t\u00fcm\u00fcne ger\u00e7ek boyunu veriyoruz. Bunu menu se\u00e7iliyken Tag Properties kutusundan yap\u0131yoruz. B\u00f6ylece men\u00fc bizim istedi\u011fimiz gibi s\u0131k\u0131\u015fm\u0131\u015f oluyor.<\/p>\n

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

Di\u011fer bir sorun ise men\u00fcn\u00fcn browserlardaki g\u00f6r\u00fcn\u00fc\u015f\u00fc. Firefox\u2019da sorunsuz \u00e7al\u0131\u015fan men\u00fc Internet Explorer 6.0\u2019da \u00fcstten 1 pixellik bo\u015fluk yarat\u0131yor.<\/p>\n

\"\"<\/p>\n

\u015eimdi bu sorunu \u00e7\u00f6zmek i\u00e7in CSS yazal\u0131m ve bu CSS\u2019i menu item\u2019a ba\u011flayal\u0131m.<\/p>\n

.menuItem{
\nmargin-top:0px;
\n_margin-top:-1px;
\n}<\/p>\n

Bu CSS kural\u0131nda \u015f\u00f6yle bir hile kulland\u0131k. IE i\u00e7in men\u00fcy\u00fc 1 pixel yukar\u0131 \u00e7ekmemiz gerekiyordu. Zaten s\u0131f\u0131rda oldu\u011fu i\u00e7in \u201c-1 px\u201d vermeliydik. Ama bu seferde Firefox bozulacakt\u0131. Margin\u2019in ba\u015f\u0131na \u201c_\u201d koyarak bunu Firefox\u2019un anlamas\u0131n\u0131 engelledik. B\u00f6ylece Firefox magrini s\u0131f\u0131r g\u00f6r\u00fcrken IE \u201c-1\u201d g\u00f6r\u00fcyor.<\/p>\n

\u015eimdi men\u00fcm\u00fcz\u00fcn alt basamaklar\u0131n\u0131 haz\u0131rlayabiliriz. \u0130lk \u00f6nce Menu Item Editor\u2019\u00fc a\u00e7\u0131yoruz. Men\u00fcye sa\u011f klik Edit Menu Items\u2019lada a\u00e7abilirsiniz. S\u0131ras\u0131yla alt menusu olanlar\u0131 ekliyoruz.<\/p>\n

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

EW alt men\u00fc g\u00f6r\u00fcnce varsay\u0131lan olarak bir ok koyuyor. Bunun \u00e7\u0131kmas\u0131n\u0131 istemiyorsan\u0131z Tag Properties kutusunda \u201cStaticEnableDefaultPopOutImage\u201d\u2019i False\u2019a \u00e7evireceksiniz.<\/p>\n

\"\"<\/p>\n

\u015eimdi bu alt men\u00fclerin g\u00f6r\u00fcn\u00fc\u015flerini ayarlamam\u0131z gerekiyor. Bence bunun en kolay yolu CSS. Normal g\u00f6r\u00fcn\u00fc\u015fleri ve mouse \u00fczerine geldi\u011findeki g\u00f6r\u00fcn\u00fc\u015fleri i\u00e7in iki CSS kural\u0131 yaz\u0131yoruz.<\/p>\n

.dynamicMenuItem{
\nbackground-color:#454545;
\nmargin:1px;
\nheight:30px;
\nwidth:100%;
\nfont-family:Arial, Helvetica, sans-serif;
\nfont-size:12px;
\ncolor:white;
\ntext-align:left;
\ntext-indent:10px;
\npadding-right:10px;
\n}<\/p>\n

.dynamicMenuItemHover{
\nbackground-color:#00acda;
\nmargin:1px;
\nheight:30px;
\nwidth:100%;
\nfont-family:Arial, Helvetica, sans-serif;
\nfont-size:12px;
\ncolor:white;
\ntext-align:left;
\ntext-indent:10px;
\npadding-right:10px;
\n}<\/p>\n

Men\u00fcn\u00fcn Tag Properties kutusunu kullanarak, CSS\u2019leri ba\u011fl\u0131yoruz. \u201cdynamicMenuItem\u201d\u2019\u0131 \u201cDynamicMenuItemStyle\u201d ile; \u201cdynamicMenuItemHover\u201d\u2019\u0131 \u201cDynamicHoverStyle\u201d ile ba\u011fl\u0131yoruz.<\/p>\n

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

T\u00fcm bunlar\u0131n sonunda EW\u2019nin bizim i\u00e7in \u00e7\u0131kard\u0131\u011f\u0131 kod alttaki gibidir.<\/p>\n

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

G\u00f6r\u00fcn\u00fc\u015f;<\/p>\n

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

Devam edelim s\u0131rada header\u2019in alt\u0131ndaki g\u00f6rsel alan var. Bunun i\u00e7in DIV yarat\u0131yorum ve bir CSS kural\u0131 yaz\u0131p ba\u011fl\u0131yorum.<\/p>\n

#altHeader{
\nbackground-image:url(‘images\/altHeader.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:968px;
\nheight:215px;
\nmargin-left:auto;
\nmargin-right:auto;
\n}<\/p>\n

<div id=”altHeader”><\/div><\/p>\n

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

S\u0131rada i\u00e7erik alan\u0131 var. Bu alan iki kolondan olu\u015fuyor. \u0130lk \u00f6nce bu iki kolonu i\u00e7inde tutacak DIV\u2019i yarat\u0131yorum ve bir CSS kural\u0131 yaz\u0131p ba\u011fl\u0131yorum.<\/p>\n

#mainContainer{
\nbackground-image:url(‘images\/containerBack.jpg’);
\nbackground-repeat:repeat-y;
\nwidth:968px;
\nmargin-left:auto;
\nmargin-right:auto;
\npadding-bottom:20px;
\n}<\/p>\n

<div id=”mainContainer”><\/div><\/p>\n

\u015eimdi i\u00e7erik alan\u0131n\u0131n sol ve sa\u011f kolonlar\u0131n\u0131 haz\u0131rlayaca\u011f\u0131z. Main Container\u2019in i\u00e7inde iki tane DIV yarat\u0131p bunlar i\u00e7in CSS\u2019lerini haz\u0131rl\u0131yoruz ve ba\u011fl\u0131yoruz.<\/p>\n

#leftContainer{
\nposition:relative;
\nwidth:306px;
\nmargin-left:10px;
\nleft:0px;
\ntop:10px;
\nfloat:left;
\n}<\/p>\n

#rightContainer{
\nposition:relative;
\nwidth:609px;
\nleft:30px;
\ntop:10px;
\n}<\/p>\n

<div id=”mainContainer”>
\n<div id=”leftContainer”><\/div>
\n<div id=”rightContainer”><\/div>
\n<\/div><\/p>\n

\u015eimdi sol taraf\u0131n i\u00e7eri\u011fini olu\u015ftural\u0131m. News ba\u015fl\u0131\u011f\u0131n\u0131 haz\u0131rl\u0131yoruz.<\/p>\n

#newsHeader{
\nbackground-image:url(‘images\/headerNews.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:52px;
\nheight:10px;
\n}<\/p>\n

<div id=”newsHeader”><\/div><\/p>\n

Ba\u015fl\u0131\u011f\u0131n alt\u0131nda haberler b\u00f6l\u00fcm\u00fcm\u00fcz olacak bunu database\u2019den dinamik alal\u0131m. Database olarak ben Microsoft Office Access 2003 kullanaca\u011f\u0131m. Access 2003 \u2018\u00fc a\u00e7\u0131yoruz. Yeni butonuna bas\u0131yoruz a\u00e7\u0131lan New File alan\u0131nda Blank Database\u2019i se\u00e7iyoruz.<\/p>\n

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

Database\u2019i lokale kaydeditoruz. Ben projenin klas\u00f6r\u00fcnde \u201cdb\u201d ismindeki klas\u00f6re \u201cdummy.mdb\u201d olarak kaydettim. Kar\u015f\u0131m\u0131za se\u00e7enek penceresi gelecek. Buradaki wizard\u0131 kullan\u0131yoruz.<\/p>\n

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

Bu projede tek ihtiyac\u0131m\u0131z olan ID ve yaz\u0131lar\u0131n olaca\u011f\u0131 alan. Bu sebeple ben personal\u2019da Guests\u2019de GuesID ve Notes\u2019u se\u00e7iyorum.<\/p>\n

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

\u0130sim verip bitiriyorum.<\/p>\n

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

Ba\u015fl\u0131klar\u0131 de\u011fi\u015ftirip haberlerimizi giriyoruz.<\/p>\n

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

Database ile i\u015fimiz bu kadar program\u0131 kapay\u0131p, \u00e7\u0131kabiliriz.<\/p>\n

EW\u2019ye geri d\u00f6n\u00fcyoruz. Database\u2019imize \u00f6rnek haberlerimizi yerle\u015ftirdi\u011fimize g\u00f6re \u015fimdi bunlar\u0131 \u00e7ekmemiz gerekiyor. Code g\u00f6r\u00fcn\u00fcm\u00fcne ge\u00e7iyoruz. BODY\u2019nin alt\u0131ndaki FORM tag\u0131n\u0131n hemen alt\u0131na Toolbox>ASP.NET Controls>Data alt\u0131ndaki \u201cAccessDataSource\u201d s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz.<\/p>\n

<form id=”form1″ runat=”server”>
\n<asp:AccessDataSource runat=”server” id=”AccessDataSource1″><\/asp:AccessDataSource>
\n<div id=”header”><\/div><\/p>\n

Design g\u00f6r\u00fcn\u00fcm\u00fcne d\u00f6n\u00fcyoruz. Art\u0131k sayfam\u0131z\u0131n \u00fcst\u00fcnde bir AccessDataSource kutucu\u011fu var. Ya bunun \u00fcst\u00fcne sa\u011f klik, \u201cShow Common Control Tasks\u201d a basarak ya da \u00fcst\u00fcne geldi\u011fimizde beliren oka t\u0131klayarak \u201cCommon AccessDataSource Tasks\u201d \u0131 a\u00e7\u0131yoruz.<\/p>\n

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

Configure Data Source\u2019a bas\u0131yoruz. A\u00e7\u0131lan pencerede Browse ile database\u2019imizi buluyoruz.<\/p>\n

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

Next ile devam edince database se\u00e7im ekran\u0131 geliyor News\u2019\u0131 se\u00e7ip devam ediyoruz.<\/p>\n

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

Se\u00e7im i\u00e7in test ekran\u0131 geliyor. Test Query ile se\u00e7imi kontrol ediyoruz ve finish ile i\u015flemi tamaml\u0131yoruz.<\/p>\n

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

EW \u015fu \u015fekilde kod \u00fcretti.<\/p>\n

<asp:AccessDataSource runat=”server” id=”AccessDataSource1″ DataFile=”db\/dummy.mdb” SelectCommand=”SELECT [News] FROM [News]”><\/asp:AccessDataSource><\/p>\n

\u015eimdi bu verileri tasar\u0131ma aktaraca\u011f\u0131z. Bunun i\u00e7in newsHeader DIV\u2019nin alt\u0131na, Toolbox>ASP.NET Controls>Data alt\u0131ndaki \u201cDataList\u201di s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz.<\/p>\n

<div id=”newsHeader”><\/div>
\n<asp:DataList runat=”server” id=”DataList1″><\/asp:DataList><\/p>\n

Design g\u00f6r\u00fcn\u00fcm\u00fcnde sa\u011f klik yap\u0131p \u201cShow Common Control Tasks\u201d a t\u0131klayarak \u201cCommon DataList Task\u201d\u0131 a\u00e7\u0131yoruz. Ayn\u0131 i\u015flemi DataList\u2019in \u00fcst\u00fcne geldi\u011finizde beliren oka t\u0131klayarak da yapabilece\u011finizi unutmay\u0131n. Choose Data Source\u2019dan database\u2019imizi se\u00e7iyoruz.<\/p>\n

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

Draft.aspx ile nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kontrol ediyoruz. (F12)<\/p>\n

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

Haberlerin ba\u015f\u0131na koydu\u011fu News ba\u015fl\u0131\u011f\u0131 d\u0131\u015f\u0131nda her \u015fey tamam g\u00f6z\u00fck\u00fcyor. Split g\u00f6r\u00fcn\u00fcm\u00fcne ge\u00e7iyoruz. DataList\u2019e t\u0131klayarak kodlar\u0131n se\u00e7ilmesini sa\u011fl\u0131yoruz ve oradaki News sat\u0131r\u0131n\u0131 siliyoruz.<\/p>\n

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

B\u00f6ylece haberler b\u00f6l\u00fcm\u00fcn\u00fc de bitirmi\u015f oluyoruz.<\/p>\n

\u015eimdi ana sayfa galeri b\u00f6l\u00fcm\u00fcn\u00fc olu\u015fturaca\u011f\u0131z. Bunun i\u00e7in DataList\u2019in hemen alt\u0131na bir DIV yerle\u015ftiriyoruz. Bu galeri ba\u015fl\u0131\u011f\u0131n\u0131 ta\u015f\u0131yacak olan DIV. Bunun i\u00e7in CSS yaz\u0131p DIV\u2019e ba\u011fl\u0131yoruz.<\/p>\n

#galleryHeader{
\nbackground-image:url(‘images\/headerGallery.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:73px;
\nheight:10px;
\nmargin-bottom:5px;
\n}<\/p>\n

<div id=”galleryHeader”><\/div><\/p>\n

Galeri thumbnaillerini haz\u0131rlarken imajlar\u0131n de\u011fi\u015febilece\u011fini d\u00fc\u015f\u00fcnerek, arka plan\u0131 ayr\u0131; imajlar\u0131 ayr\u0131 d\u00fc\u015f\u00fcnece\u011fiz. Thumbnail arka plan\u0131 i\u00e7in galleryHeader\u2019in alt\u0131na DIV yerle\u015ftiriyoruz. CSS yaz\u0131p bu DIV ile ba\u011fl\u0131yoruz.<\/p>\n

#thumbBack{
\nbackground-image:url(‘images\/thumbBack.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:142px;
\nheight:109px;
\nleft:2px;
\nfloat:left;
\npadding:6px 0 0 6px;
\n}<\/p>\n

<div id=”thumbBack”><\/div><\/p>\n

\u015eimdi ayn\u0131 \u015feyi sa\u011f imaj i\u00e7in yapaca\u011f\u0131z.<\/p>\n

#thumbBackRight{
\nbackground-image:url(‘images\/thumbBack.jpg’);
\nbackground-repeat:no-repeat;
\nposition:relative;
\nwidth:142px;
\nheight:109px;
\nleft:15px;
\npadding:6px 0 0 6px;
\n}<\/p>\n

<div id=”thumbBackRight”><\/div><\/p>\n

Bu iki DIV bir kez daha kopyalay\u0131p as\u0131llar\u0131n\u0131n alt\u0131na yap\u0131\u015ft\u0131raca\u011f\u0131z.<\/p>\n

<div id=”thumbBack”><\/div>
\n<div id=”thumbBackRight”><\/div>
\n<div id=”thumbBack”><\/div>
\n<div id=”thumbBackRight”><\/div><\/p>\n

Sonu\u00e7.<\/p>\n

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

Art\u0131k imajlar\u0131 girebiliriz. DIV\u2019lerin i\u00e7ine tek tek imajlar\u0131 giriyoruz.<\/p>\n

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

Sonu\u00e7.<\/p>\n

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

Art\u0131k footer\u2019a ba\u015fl\u0131yabiliriz. Main Container DIV\u2019nin alt\u0131na yeni bir DIV a\u00e7\u0131yoruz. Buraya footer\u2019\u0131n \u00fcst\u00fcndeki band\u0131 yerle\u015ftirece\u011fiz. CSS\u2019i yaz\u0131p DIV\u2019le ba\u011fl\u0131yoruz.<\/p>\n

#footerLine {
\nbackground-image:url(‘images\/footerLine.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:968px;
\nmargin-right:auto;
\nmargin-left:auto;
\nheight:13px;
\nmargin-bottom:-2px;
\n}<\/p>\n

<div id=”footerLine”><\/div><\/p>\n

FooterLine DIV\u2019nin alt\u0131na bir DIV daha ekliyoruz. Bu footer\u2019\u0131m\u0131z olacak.<\/p>\n

#footer{
\nbackground-image:url(‘images\/footerBack.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:968px;
\nheight:54px;
\nmargin-right:auto;
\nmargin-left:auto;
\ncolor:white;
\nletter-spacing:1px;
\npadding-top:2px;
\n}<\/p>\n

<div id=”footer” align=”center”>
\n<a href=”#”>home<\/a> | <a href=”#”>profile<\/a> | <a href=”#”>who is<\/a> | <a href=”#”>contact<\/a> | <a href=”#”>the day<\/a> | <a href=”#”>dolor sit<\/a> <br \/>
\nCopyright Dummy Firm
\n<\/div><\/p>\n

Footer\u2019\u0131m\u0131z\u0131 olu\u015fturdu\u011fumuza g\u00f6re \u015fimdi de footer linklerini olu\u015fturmam\u0131z gerekiyor. Bunun i\u00e7in ilk \u00f6nce BODY\u2019nin alt\u0131na sitenin genel link kurallar\u0131n\u0131 yaz\u0131yoruz.<\/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

\u015eimdi footer\u2019in linklerini yazabiliriz.<\/p>\n

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

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

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

Master Page\u2019imizi tamamlam\u0131\u015f olduk.<\/p>\n

Sonu\u00e7.<\/p>\n

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

\u015eimdi Master Page\u2019de ContentPlaceHolder ayarlar\u0131n\u0131 yapmam\u0131z laz\u0131m. ContentPlaceHolder\u2019i rightContainer DIV\u2019nin i\u00e7ine yerle\u015ftiriyoruz.<\/p>\n

<div id=”rightContainer”>
\n<asp:ContentPlaceHolder id=”ContentPlaceHolder1″ runat=”server”> <\/asp:ContentPlaceHolder>
\n<\/div><\/p>\n

Master Page bitti\u011fine g\u00f6re \u015fimdi sayfa \u00fcretmeye ba\u015flayabiliriz. Bu \u00f6rnekte de sadece ana sayfay\u0131 haz\u0131rlay\u0131p b\u0131rakaca\u011f\u0131z.<\/p>\n

Men\u00fcden File>New>Page. General>Create From Master Page>OK.
\nBrowse>dummy.master.
\n\u0130\u015flemleri sonucunda bir adet aspx sayfas\u0131 yarat\u0131yoruz. Bunu default.aspx olarak kaydedelim.<\/p>\n

Default.aspx\u2019de ContentPlaceHolder alan\u0131na t\u0131klayarak sa\u011f\u0131ndaki oku g\u00f6r\u00fcn\u00fcr yapal\u0131m.<\/p>\n

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

Create Custom Content\u2019e t\u0131klayarak d\u00fczenlenir alan\u0131m\u0131z\u0131 haz\u0131rlam\u0131\u015f oluyoruz.<\/p>\n

\"\"<\/p>\n

Split g\u00f6r\u00fcn\u00fcm\u00fcne ge\u00e7erek \u201c<%@ Page Language=”C#”\u201d sat\u0131r\u0131na t\u0131kl\u0131yoruz. Bu sat\u0131rdaki title alan\u0131n\u0131 \u201cDummy Firm Home Page\u201d ile de\u011fi\u015ftiriyoruz.<\/p>\n

<%@ Page Language=”C#” masterpagefile=”dummy.master” title=”Dummy Firm Home Page” %> <asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″> <\/asp:Content><\/p>\n

\u015eimdi default page\u2019i olu\u015fturmaya ba\u015flayabiliriz. Buradaki t\u00fcm \u00e7al\u0131\u015fmalar Content i\u00e7inde olacak.<\/p>\n

Welcome ba\u015fl\u0131\u011f\u0131 i\u00e7in CSS yaz\u0131yoruz ve bunu DIV\u2019e ba\u011fl\u0131yoruz.<\/p>\n

#welcomeHeader{
\nbackground-image:url(‘images\/headerWelcome.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:79px;
\nheight:10px;
\n}<\/p>\n

<asp:Content id=”Content1″ runat=”server” contentplaceholderid=”ContentPlaceHolder1″>
\n<div id=”welcomeHeader”><\/div>
\n<\/asp:Content><\/p>\n

\u015eimdi Welcome yaz\u0131 alan\u0131n\u0131 olu\u015fturaca\u011f\u0131z. Asl\u0131nda bu alan\u0131 galeri alan\u0131 gibi kolayca olu\u015fturabiliriz ama o zaman sabit bir alan olacak. Oysa bu alan\u0131n yaz\u0131s\u0131 zaman i\u00e7inde de\u011fi\u015febilir. Bu sebeple y y\u00f6n\u00fcnde uzayabilen bir \u00e7\u00f6z\u00fcm d\u00fc\u015f\u00fcnmeliyiz.<\/p>\n

Welcome Header DIV\u2019nin alt\u0131na \u00fc\u00e7 tane alt alta DIV a\u00e7\u0131yoruz. Her biri i\u00e7in CSS\u2019leri yaz\u0131p DIV\u2019lere ba\u011fl\u0131yoruz.<\/p>\n

.boxTop{
\nbackground-image:url(‘images\/box\/boxTop.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:603px;
\nheight:4px;
\nmargin-bottom:-11px;
\n}<\/p>\n

.boxMiddle{
\nbackground-image:url(‘images\/box\/boxMiddle.jpg’);
\nbackground-repeat:repeat-y;
\nwidth:603px;
\npadding:5px 0px 5px 10px;
\n}<\/p>\n

.boxBottom{
\nbackground-image:url(‘images\/box\/boxBottom.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:603px;
\nheight:4px;
\n}<\/p>\n

<div id=”boxTop”><\/div>
\n<div id=”boxMiddle”> <asp:Label runat=”server” Text=”Label” id=”Label1″ Width=”580px”><\/asp:Label> <\/div>
\n<div id=”boxBottom”><\/div><\/p>\n

Box CSS\u2019lerinde neden \u201c#\u201d de\u011fil de \u201c.\u201d kulland\u0131k? \u00c7\u00fcnk\u00fc bu CSS\u2019leri DIV\u2019lere id olarak de\u011fil class olarak vermek istiyoruz. B\u00f6ylece defalarca bu CSS\u2019leri kullanabiliriz. \u00d6rne\u011fin The Day kutusunu da bu CSS kurallar\u0131yla haz\u0131rlayaca\u011f\u0131z.<\/p>\n

Burada Label\u2019\u0131 programc\u0131 arkada\u015flar\u0131m\u0131za kolayl\u0131k olmas\u0131 sebebi ile kulland\u0131k. Label\u2019in i\u00e7ine yaz\u0131lar\u0131m\u0131z\u0131 yazabiliriz.<\/p>\n

\u015eimdi Welcome\u2019\u0131n alt\u0131ndaki imaj var s\u0131rada. Bir DIV daha a\u00e7\u0131yoruz. Bunun i\u00e7inde CSS\u2019i yaz\u0131p DIV\u2019i ba\u011fl\u0131yoruz.<\/p>\n

#homeImg{
\nbackground-image:url(‘images\/homeImg.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:603px;
\nheight:88px;
\nmargin-bottom:10px;
\n}<\/p>\n

<div id=”homeImg”><\/div><\/p>\n

Bu a\u015famada bir konuya de\u011finmek istiyorum. Tasar\u0131mlar\u0131m\u0131z\u0131 table ile html\u2019e ge\u00e7irirken bo\u015fluk b\u0131rakmak istedi\u011fimizde olduk\u00e7a de\u011fi\u015fik y\u00f6ntemlere ba\u015fvururduk. Fazladan sat\u0131rlar, kolonlar b\u0131rak\u0131r; 1×1 lik transparan bir gif kullan\u0131rd\u0131k. (spacer.gif) Ama CSS 2.0 ve DIV tasar\u0131m\u0131 ile bunlara gerek yok. Magrinler, paddingler, ya da koordinat \u00f6zellikleri ile istedi\u011fimiz bo\u015flu\u011fu b\u0131rakabiliyoruz. DIV ile tasar\u0131m table\u2019dan bu a\u015famada da \u00fcst\u00fcn.<\/p>\n

Son ad\u0131m\u0131m\u0131z \u201cThe Day\u201d kutusunu haz\u0131rlamak. Daha \u00f6nce yapt\u0131\u011f\u0131m\u0131z gibi, homeImg DIV\u2019nin alt\u0131na \u00fc\u00e7 tane DIV ekliyoruz. Bunlar\u0131 s\u0131ras\u0131yla box kurallar\u0131na ba\u011fl\u0131yoruz.<\/p>\n

<div ><\/div>
\n<div ><\/div>
\n<div ><\/div><\/p>\n

\u0130\u00e7erik yine boxMiddle\u2019a ba\u011fl\u0131 DIV tag\u2019\u0131n\u0131n i\u00e7inde olacak. \u0130lk \u00f6nce ba\u015fl\u0131k i\u00e7in DIV ve CSS yaz\u0131yoruz.<\/p>\n

#theDayHeader{
\nbackground-image:url(‘images\/headerTheDay.jpg’);
\nbackground-repeat:no-repeat;
\nwidth:60px;
\nheight:10px;
\n}<\/p>\n

<div id=”theDayHeader”><\/div><\/p>\n

Ba\u015fl\u0131k DIV\u2019nin alt\u0131na ASP.NET image ve Label kontrol\u00fc s\u00fcr\u00fckleyip b\u0131rak\u0131yoruz. Image\u2019in tag properties\u2019ini kullanarak imaj\u0131n URL\u2019sini veriyoruz. Label\u2019\u0131n i\u00e7ine \u00f6rnek yaz\u0131m\u0131z\u0131 koyuyoruz.<\/p>\n

<asp:Image runat=”server” id=”Image1″ ImageUrl=”images\/theDay01.jpg”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label2″> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque. Quisque sodales dapibus elit. Lorem ipsum dolor sit amet,
\n<\/asp:Label><\/p>\n

Sonu\u00e7.<\/p>\n

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

Yaz\u0131yla imaj\u0131n duru\u015funu d\u00fczeltmek i\u00e7in CSS yaz\u0131yoruz.<\/p>\n

.theDayImage{
\nfloat:left;
\nmargin:0px 6px 0px 0px;
\n}<\/p>\n

Label\u2019\u0131n boyunu tag properties\u2019den ayarl\u0131yoruz.<\/p>\n

<asp:Image runat=”server” id=”Image1″ ImageUrl=”images\/theDay01.jpg” CssClass=”theDayImage”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label2″ Width=”470px”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque.
\n<\/asp:Label><\/p>\n

Sonu\u00e7.<\/p>\n

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

Ayn\u0131 i\u015flemleri bir kez de ikinci resim i\u00e7in yap\u0131yoruz. Ama iki blok aras\u0131na bo\u015fluk b\u0131rakmas\u0131 i\u00e7in iki tane <br\/> koyuyoruz.<\/p>\n

<asp:Image runat=”server” id=”Image1″ ImageUrl=”images\/theDay01.jpg” CssClass=”theDayImage”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label2″ Width=”470px”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque. <\/asp:Label>
\n<br\/> <br\/>
\n<asp:Image runat=”server” id=”Image2″ ImageUrl=”images\/theDay02.jpg” CssClass=”theDayImage”><\/asp:Image>
\n<asp:Label runat=”server” Text=”Label” id=”Label3″ Width=”470px”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut lacus elit, fermentum vitae, aliquam sagittis, tincidunt ac, velit. Pellentesque ac augue at eros sodales iaculis. Etiam ac purus in nulla pretium aliquet. Curabitur vitae lorem. Etiam venenatis, risus accumsan ultrices condimentum, diam felis laoreet tellus, vitae blandit mauris elit tincidunt erat. Nunc pede ipsum, aliquet vitae, pharetra quis, cursus a, neque.
\n<\/asp:Label><\/p>\n

Hata;<\/p>\n

CSS\u2019e genel linkleri yaz\u0131nca menunun alt basamaklar\u0131ndaki linkler de bozuldu.<\/p>\n

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

Bunu \u00e7\u00f6zmek i\u00e7in CSS’e \u015fu kurallar\u0131 ekliyoruz.<\/p>\n

.dynamicMenuItem a:link{
\nfont-family:Arial, Helvetica, sans-serif;
\nfont-size:12px;
\ncolor:white;
\ntext-align:left;
\ntext-indent:10px;
\ntext-decoration:none;
\n}<\/p>\n

.dynamicMenuItem a:visited{
\nfont-family:Arial, Helvetica, sans-serif;
\nfont-size:12px;
\ncolor:white;
\ntext-align:left;
\ntext-indent:10px;
\ntext-decoration:none;
\n}<\/p>\n

Sonu\u00e7.<\/p>\n

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

Sitemizi tamamlam\u0131\u015f olduk. Art\u0131k elimizde programc\u0131lara teslim edebilece\u011fimiz bir master page ve ana sayfa var. \u00d6rnek sayfalar\u0131 daha da \u00e7o\u011faltabiliriz.<\/p>\n

Bu makalemde tablo olmadan DIV ve CSS ile site tasar\u0131m\u0131n anlat\u0131rken ASP.NET kontrollerini ve database ba\u011flant\u0131lar\u0131n\u0131 da incelemeye \u00e7al\u0131\u015ft\u0131m.<\/p>\n

Te\u015fekk\u00fcrler.<\/p>\n

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

26\/4\/2007 Merhaba bu makalemde Microsoft Expression Web ile DIV ve CSS kullanarak site yap\u0131m\u0131n\u0131 anlataca\u011f\u0131m. Ayn\u0131 zamanda ilk kez ASP.NET kontrollerini kullanmay\u0131, database\u2019den veri \u00e7ekmeyi bu makalede inceleyece\u011fiz. Neden tablosuz tasar\u0131m? Her \u015feyden \u00f6nce tablosuz site, y\u00fczde 25 ile 50 aras\u0131nda daha az boyutlu olu\u015fmaktad\u0131r. Bu da daha az y\u00fckleme s\u00fcresi demektir. Kullan\u0131c\u0131lar\u0131n 20 sn\u2019de […]<\/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-384","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\/384","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=384"}],"version-history":[{"count":4,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/384\/revisions"}],"predecessor-version":[{"id":2551,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=\/wp\/v2\/posts\/384\/revisions\/2551"}],"wp:attachment":[{"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=384"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/erbugkaya.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}