Creative-Blog

Grass Site Tasarim

Grass Site Tasarımı

Uzun zamandır paylaşım yapamadığım için güzel bir tasarımla açılışımı yapıyım dedim ve böyle bir çalışma ortaya çıktı. Tasarımı kimseye özel olmadan sadece siz yani ziyaretçiler için yaptım. Tasarımın özellikleri aşağıda belirtienlerdin.

- Yeşil ve Mavi tonları ağırlıklı kullanılmıştır.

- Tasarım arkaplanında beyaz noktalarla süslenmiş hoş bir gri rengi kullanıldı.

- Tasarımın üst menüsü animasyonlu bir menü kullanılarak ilgi çekici hale getirildi.

- Tasarımın üst menüsü altı ve içerik bölümü arasına güzel bir slideshow getirilerek tasarıma özellik kazandırıldı.

- Alt kısmına link takas bölümü eklenerek sitede link takas olanağı sağlandı.

- Tasarıma sağ bölmeli menüler eklendi. Ayrıca bunların dışında 90x90 reklam, haftanın videosu bölümü konuldu.

Not: Önizleme için resmin üstüne yada kodların altındaki yazıya tıklayanız.

İçerik Bölümü Üstündeki:

Css Bölümüne:

Tasarım Üzerine:

<table width="960" cellspacing="0" cellpadding="0" border="0">     <tbody>         <tr>             <td width="960" valign="top" height="168" background="https://img.webme.com/pic/c/creative-blog/g-s-t_01.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="144" height="105" align="left">                         <div id="yer">Sitemize<br />                         Hoş<br />                         Geldiniz...</div>                         </td>                         <td width="816" valign="top" align="right">                         <div id="sitead">Buraya Sitenizin Adı Veya 300x50 Boyutlarındaki Logonuz Gelebilir.</div>                         </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" valign="top" height="49" background="https://img.webme.com/pic/c/creative-blog/g-s-t_02.png">             <div id="tabaka">             <ul id="grimenu">                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>                 <li><a href="#" _fcksavedurl="#">Eklenecek</a></li>             </ul>             </div>             </td>         </tr>         <tr>             <td width="960" valign="bottom" height="103" background="https://img.webme.com/pic/c/creative-blog/g-s-t_03.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="180" height="101"> </td>                         <td width="603" valign="top" height="101">                         <div id="slideshow">                         <div id="container2">                         <div id="content2">                         <div id="slider">                         <ul>                             <li><a href="#" _fcksavedurl="#">      <img width="580" height="95" alt="" src="https://img.webme.com/pic/c/creative-blog/g-s-t-ss1.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-ss1.png" /></a></li>                             <li><a href="#" _fcksavedurl="#">      <img width="580" height="95" alt="" src="https://img.webme.com/pic/c/creative-blog/g-s-t-ss2.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-ss2.png" /></a></li>                             <li><a href="#" _fcksavedurl="#">      <img width="580" height="95" alt="" src="https://img.webme.com/pic/c/creative-blog/g-s-t-ss3.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-ss3.png" /></a></li>                             <li><a href="#" _fcksavedurl="#">      <img width="580" height="95" alt="" src="https://img.webme.com/pic/c/creative-blog/g-s-t-ss4.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-ss4.png" /></a></li>                             <li><a href="#" _fcksavedurl="#">      <img width="580" height="95" alt="" src="https://img.webme.com/pic/c/creative-blog/g-s-t-ss5.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-ss5.png" /></a></li>                         </ul>                         </div>                         </div>                         </div>                         </div>                         </td>                         <td width="177"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" height="37" background="https://img.webme.com/pic/c/creative-blog/g-s-t_04.png"> </td>         </tr>         <tr>             <td width="960" valign="top" height="150" background="https://img.webme.com/pic/c/creative-blog/g-s-t_05.png">             <table width="960" cellspacing="0" cellpadding="0" border="0">                 <tbody>                     <tr>                         <td width="50"> </td>                         <td width="640" valign="top" align="center">                         <div id="icerik">

Tasarım Altına:

</div>                         </td>                         <td width="10"> </td>                         <td width="210" valign="top" align="center">                         <table width="203" cellspacing="0" cellpadding="0" border="0">                             <tbody>                                 <tr>                                     <td><br />                                     <table width="201" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="27" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_01.png" align="right">                                                 <div id="menbas">Reklam Alanı</div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="64" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_02.png" align="center">                                                 <div id="reklamalan">                                                 <table width="180" cellspacing="2" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td><a href="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" alt="" /></a></td>                                                             <td><a href="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" alt="" /></a></td>                                                         </tr>                                                         <tr>                                                             <td><a href="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" alt="" /></a></td>                                                             <td><a href="#" _fcksavedurl="#"><img border="0" src="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-reklam.jpg" alt="" /></a></td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" height="25" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="201" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="27" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_01.png" align="right">                                                 <div id="menbas">Menü Başlığı</div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="64" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_02.png" align="center">                                                 <table width="195" cellspacing="0" cellpadding="0" border="0">                                                     <tbody>                                                         <tr>                                                             <td valign="top" height="131">                                                             <div id="designmenu">                                                             <ul>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                             </ul>                                                             </div>                                                             </td>                                                             <td valign="top" align="center">                                                             <div id="designmenu">                                                             <ul>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                                 <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/menu-ok-yesil.png" alt="" /> Eklenecek</a></li>                                                             </ul>                                                             </div>                                                             </td>                                                         </tr>                                                     </tbody>                                                 </table>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" height="25" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="201" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="27" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_01.png" align="right">                                                 <div id="menbas">En Çok Okunan</div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="64" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_02.png" align="center">                                                 <div id="okunan">                                                 <ul>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                     <li><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/g-s-t-yildiz.png" alt="" /> Buraya Yazı Eklenecek.</a></li>                                                 </ul>                                                 </div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" height="25" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td><br />                                     <table width="201" cellspacing="0" cellpadding="0" border="0">                                         <tbody>                                             <tr>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="27" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_01.png" align="right">                                                 <div id="menbas">Haftanın Videosu</div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" valign="top" height="64" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_02.png" align="center">                                                 <div id="haftavideo"><iframe width="195" height="125" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/WgKExOneYqs"></iframe></div>                                                 </td>                                             </tr>                                             <tr>                                                 <td width="201" height="25" background="https://img.webme.com/pic/c/creative-blog/g-s-t-menu_03.png"> </td>                                             </tr>                                         </tbody>                                     </table>                                     </td>                                 </tr>                                 <tr>                                     <td> </td>                                 </tr>                             </tbody>                         </table>                         </td>                         <td width="50"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" valign="bottom" height="90" background="https://img.webme.com/pic/c/creative-blog/g-s-t_06.png">             <table width="960" cellspacing="0" cellpadding="0" border="0" align="center">                 <tbody>                     <tr>                         <td width="363"> </td>                         <td width="256" valign="middle">                         <table width="256" cellspacing="0" cellpadding="0" border="0">                             <tbody>                                 <tr>                                     <td width="80" height="25">                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                     <td width="10">                                     <div style="text-align: center; "><span style="color: rgb(29, 134, 53); "><span style="font-family: Tahoma; ">|</span></span></div>                                     </td>                                     <td width="80">                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                     <td width="10">                                     <div style="text-align: center; "><span style="color: rgb(29, 134, 53); "><span style="font-family: Tahoma; ">|</span></span></div>                                     </td>                                     <td width="76">                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                 </tr>                                 <tr>                                     <td height="25">                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                     <td>                                     <div style="text-align: center; "><span style="color: rgb(29, 134, 53); "><span style="font-family: Tahoma; ">|</span></span></div>                                     </td>                                     <td>                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                     <td>                                     <div style="text-align: center; "><span style="color: rgb(29, 134, 53); "><span style="font-family: Tahoma; ">|</span></span></div>                                     </td>                                     <td>                                     <div style="text-align: center;" id="linkekle"><a href="#" _fcksavedurl="#"> Siteni Ekle</a></div>                                     </td>                                 </tr>                             </tbody>                         </table>                         </td>                         <td width="341"> </td>                     </tr>                 </tbody>             </table>             </td>         </tr>         <tr>             <td width="960" height="29" background="https://img.webme.com/pic/c/creative-blog/g-s-t_07.png"><a href="http://creative-blog.tr.gg/" _fcksavedurl="http://creative-blog.tr.gg/">             <div id="oblink"> </div>             </a></td>         </tr>     </tbody> </table>

Tasarımın Önizlemesini Gör

Grass Site Tasarim