layouts:كيفية تخطيط الصفحة تمهيدا لتكويدها وتصميمها

شرح كيفية تخطيط وتقسيم صفحة الويب تمهيدا لتصميمها layout


<<السابق الحالى التالى>>
كافة الدروس

<style type="text/css">
#wrapper{
width:640px;
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;    
    
    }
#header{
    height:200px;
    border:1px solid#ccc;
    background:#c9f;    
    }    
#search {
    margin-left:10px;
    margin-top:10px;
    }    
#navbar ul {
list-style-type:none;    
    }    
#navbar li {
position:relative;
float:right;
margin-left:10px;    
    }    
#navbar li:hover{
color:#00f;    
    }    
</style>

<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" width="32" height="32"></div>
<div id="search">
<form action="" method="post">
<input type="text" name="search" value="بحث" />
</form>
</div>
<div id="social"></div>
</div>
<div id="navbar">
<ul id="navul">
<li>الرئيسية</li>
<li>المنتدى</li>
<li>المجلة</li>
<li>الدورات</li>
<li>اتصل بنا</li>
</ul>
</div>
<div id="container">
<div id="left">
<p>
بعد التخطيط الطويل لدراسة تنفيذ أكبر مشروع عربى لتعليم البرمجة,تم البدء ببرمجة هذا المشروع
</p>
</div>
<div id="right">
<ul id="rightul">
<li>الرئيسية</li>
<li>المنتدى</li>
<li>المجلة</li>
<li>الدورات</li>
<li>اتصل بنا</li>
</ul>
</div>
</div>

</div>