Creative-Blog

Ground Site Tasarim

Ground Oyun Sitesi Tasarımı

Elimde yaklaşık 10-15 farklı footer bulunduğu için bunlardan bir tanesini artık yararlı birşey için kullanmaya karar verdim. Bedava-Sitem'e yeni başlayan arkadaşların çoğu "Oyun Sitesi" açtığı için bende yeni bir oyun sitesi tasarımı yaptım. Güle güle kullanın. Tasarımın özellikleri;

- Kahverengi ve yeşil tonları bol olarak kullanılmıştır.

- Tasarım arkaplanında oyun sitesine yakışır bulutlar bulunmaktadır.

- Tasarımın üst kısmında site isminin ve site duyurularının gelebileceği alanlar konuldu.

- Tasarımın içerik ve menü bölümü Dreamweaverde güzel şekilde kodlandı.
- Tasarıma duvar efektli sol aç/kapa menüler eklendi.

- Alt kısmına sosyal paylaşım butonları, javascript efektleri ve fazladan bölme eklendi.

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

Css Bölümüne:

Tasarım Üzerine:

<table width="960" border="0" cellspacing="0" cellpadding="0">   <tr>     <td width="960" height="378" background="https://img.webme.com/pic/c/creative-blog/ples-come-design_01.png"><table width="960" border="0" cellspacing="0" cellpadding="0">       <tr>         <td height="213"><div id="Logo">Sitenizin İsmi</div></td>       </tr>       <tr>         <td height="30"><div id="Duyuru"><marquee direction="right" onmouseover_fckprotectedatt="%20onmouseover%3D%22this.stop()%3B%22" onmouseout_fckprotectedatt="%20onmouseout%3D%22this.start()%3B%22" >Duyurular buraya gelecek!!!</marquee></div></td>       </tr>     </table></td>   </tr>   <tr>     <td width="960" height="300" valign="top" background="https://img.webme.com/pic/c/creative-blog/ples-come-design_02.png"><table width="960" border="0" cellspacing="0" cellpadding="0">       <tr>         <td width="77"> </td>         <td width="220" valign="top"><div class="Allleft" id="Kutu1">           <table width="210" border="0" cellspacing="0" cellpadding="0">             <tr>               <td align="center"><div class="Menu-Baslik" id="Bas1"><a href="#" _fcksavedurl="#">Oyun Kategorileri</a></div></td>             </tr>             <tr>               <td><div id="Menu">                 <ul>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/beceri.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/beceri.png" /> Beceri Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/cocuks.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/cocuks.png" /> Çocuk Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/cizgis.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/cizgis.png" /> Çizgi Film Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="20" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/marios.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/marios.png" /> Mario Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/dovus.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/dovus.png" /> Dövüş Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/giydirme.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/giydirme.png" /> Giydirme Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/macera.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/macera.png" /> Macera Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/kizs.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/kizs.png" /> Kız Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/boyamas.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/boyamas.png" /> Boyama Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/nisan.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/nisan.png" /> Nişan Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/odas.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/odas.png" /> Oda Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="35" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/savas.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/savas.png" />Savaş Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/spors.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/spors.png" /> Spor Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="30" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/yarisss.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/yarisss.png" /> Yarış Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/yemeks.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/yemeks.png" /> Yemek Oyunları</a></li>                   <li><a href="#" _fcksavedurl="#"><img width="25" height="25" border="0" alt="" src="https://img.webme.com/pic/o/oyunlarbilecik/zekas.png" _fcksavedurl="https://img.webme.com/pic/o/oyunlarbilecik/zekas.png" /> Zeka Oyunları</a></li>                 </ul>               </div></td>             </tr>           </table>         </div>         <div class="Allleft" id="Kutu2">           <table width="210" border="0" cellspacing="0" cellpadding="0">             <tr>               <td align="center"><div class="Menu-Baslik" id="Bas2"><a href="#" _fcksavedurl="#" class="Menu-Baslik">Tavsiye Edilenler</a></div></td>             </tr>             <tr>               <td><div id="Tavsiyeler">                 <table width="210" height="63" cellspacing="0" cellpadding="0" border="0">                   <tbody>                     <tr>                       <td width="79" height="63" align="right"><a href="#" _fcksavedurl="#"><img width="65" height="45" class="tavsiyeimg" alt="" src="http://voxcast.oyunlar1.com/images/8617.jpg" _fcksavedurl="http://voxcast.oyunlar1.com/images/8617.jpg" /></a></td>                       <td width="135" align="center" valign="top"><table width="123" cellspacing="0" cellpadding="0" border="0">                         <tbody>                           <tr>                             <td width="123"><div id="tavsiyess3" class="tavsiyess"><a href="#" _fcksavedurl="#">Oyun İsmi</a></div></td>                           </tr>                           <tr>                             <td valign="middle" height="40"><div class="tavsiyektg" id="Tavsiyeler-Ktg">>Oyun Kategorosi</div></td>                           </tr>                         </tbody>                       </table></td>                     </tr>                   </tbody>                 </table>               </div>                 <div id="Tavsiyeler">                   <table width="210" height="63" cellspacing="0" cellpadding="0" border="0">                     <tbody>                       <tr>                         <td width="79" height="63" align="right"><a href="#" _fcksavedurl="#"><img width="65" height="45" class="tavsiyeimg" alt="" src="http://voxcast.oyunlar1.com/images/8613.jpg" _fcksavedurl="http://voxcast.oyunlar1.com/images/8613.jpg" /></a></td>                         <td width="135" align="center" valign="top"><table width="123" cellspacing="0" cellpadding="0" border="0">                           <tbody>                             <tr>                               <td width="123"><div id="tavsiyess3" class="tavsiyess"><a href="#" _fcksavedurl="#">Oyun İsmi</a></div></td>                             </tr>                             <tr>                               <td valign="middle" height="40"><div class="tavsiyektg" id="Tavsiyeler-Ktg">>Oyun Kategorosi</div></td>                             </tr>                           </tbody>                         </table></td>                       </tr>                     </tbody>                   </table>                 </div>                 <div id="Tavsiyeler">                   <table width="210" height="63" cellspacing="0" cellpadding="0" border="0">                     <tbody>                       <tr>                         <td width="79" height="63" align="right"><a href="#" _fcksavedurl="#"><img width="65" height="45" class="tavsiyeimg" alt="" src="http://voxcast.oyunlar1.com/images/8619.jpg" _fcksavedurl="http://voxcast.oyunlar1.com/images/8619.jpg" /></a></td>                         <td width="135" align="center" valign="top"><table width="123" cellspacing="0" cellpadding="0" border="0">                           <tbody>                             <tr>                               <td width="123"><div id="tavsiyess3" class="tavsiyess"><a href="#" _fcksavedurl="#">Oyun İsmi</a></div></td>                             </tr>                             <tr>                               <td valign="middle" height="40"><div class="tavsiyektg" id="Tavsiyeler-Ktg">>Oyun Kategorosi</div></td>                             </tr>                           </tbody>                         </table></td>                       </tr>                     </tbody>                   </table>                 </div> </td>             </tr>           </table>         </div>         <div class="Allleft" id="Kutu2">           <table width="210" border="0" cellspacing="0" cellpadding="0">             <tr>               <td align="center"><div class="Menu-Baslik" id="Bas2"><a href="#" _fcksavedurl="#" class="Menu-Baslik">Etiketler</a></div></td>             </tr>             <tr>               <td align="center"><div id="Etiketler"><a href="http://creative-fun.tr.gg/ana-sayfa.htm#" _fcksavedurl="http://creative-fun.tr.gg/ana-sayfa.htm#">oyunlar1, en süper oyunlar, oyun oyna, oyunlar oyna, süper oyunlar, macera oyunları, boyama oyunları, harika oyunlar, savaş oyunları, tamir oyunlarıi giysi oyunları, oyun, cenk oyun0, cenkoyun, kraloyun, oyunun kralı, ben10 oyunları, oyunlar burada, oyun oyun, kılıç kalkan oyna,</a></div> </td>             </tr>           </table>         </div></td>         <td width="15" align="center" valign="top"> </td>         <td width="574" align="center" valign="top"><div id="İcerik">

Tasarım Altına:

</div></td>         <td width="74"> </td>       </tr>     </table></td>   </tr>   <tr>     <td width="960" height="324" valign="top" background="https://img.webme.com/pic/c/creative-blog/ples-come-design_03.png"><table width="960" border="0" cellspacing="0" cellpadding="0">       <tr>         <td width="295" height="324" align="center" valign="top"><div id="Ekle-Sol">           <div align="center" id="sp2"><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/sp2-facebook.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/sp2-facebook.png" alt="" /></a> <a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/sp2-twitter.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/sp2-twitter.png" alt="" /></a><a href="#" _fcksavedurl="#"><img src="https://img.webme.com/pic/c/creative-blog/sp2-google.png" _fcksavedurl="https://img.webme.com/pic/c/creative-blog/sp2-google.png" alt="" /></a></div>         </div></td>         <td width="366" align="center" valign="top"><div id="Ekle-Alt">           <p>Bu alana reklam veya herhangi başka birşey eklenilebilir.</p>           <p>"Creative-Blog"</p>         </div></td>         <td width="299" valign="top"><div id="Ekle-Sag"><a href="javascript:history.back()" _fcksavedurl="javascript:history.back()" _fcksavedurl="javascript:history.back()"><img src="https://img.webme.com/pic/d/denenmek/mp-geri.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/mp-geri.png" alt="" border="0" _fcksavedurl="https://img.webme.com/pic/o/osmantalay/solot.png" /></a> <a href="javascript:history.forward()" _fcksavedurl="javascript:history.forward()" _fcksavedurl="javascript:history.forward()"><img src="https://img.webme.com/pic/d/denenmek/mp-ileri.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/mp-ileri.png" alt="" border="0" _fcksavedurl="https://img.webme.com/pic/o/osmantalay/sagot.png" /></a> <a href="javascript:location.reload()" _fcksavedurl="javascript:location.reload()" _fcksavedurl="javascript:location.reload()"><img src="https://img.webme.com/pic/d/denenmek/mp-yenile.png" _fcksavedurl="https://img.webme.com/pic/d/denenmek/mp-yenile.png" alt="" border="0" _fcksavedurl="https://img.webme.com/pic/o/osmantalay/yenleot.png" /></a></div></td>       </tr>     </table></td>   </tr> </table>

Tasarımın Önizlemesini Gör

Ground Site Tasarim