مطور Mtwer

1-شرح عمل background للصفحة
2-شرح عمل background للمقالات داخل wrapper
3-شرح اعادة توزيع الهيدر وعمل تصميم له
4-شرح عمل ناف بار بcss بشكل جذاب
5-شرح عمل قائمة رئيسية جانبية ب css بشكل جذاب
6-شرح طريقة عرض المقالات وجلبها من صفحاتها بدون تحميل الصفحة مرة أخرى ب jquery
7-انهاء الشكل النهائى لكود php استعداد للتطوير الثالث لعمل لوحة تحكم بالمقالات

background-image:url(images/back.jpg) ;

background-image:url(images/bg.jpg);

background-image:url(images/header.jpg);

<ul id="nav">
	<li><a href="index.php">الرئيسية</a></li>
	<li><a href="pages/portfolio.html">المنتــدى</a></li>
	<li><a href="pages/about.html">الــصــور</a></li>
	<li><a href="pages/contact.html">الاستضافة</a></li>
	<li><a href="pages/terms.html">الريسلرات</a></li>
	<li><a href="pages/about.html">السيرفرات</a></li>
	<li><a href="pages/about.html">البرمجة</a></li>
	<li><a href="#">اتـصـل بـنا</a></li>
</ul>

	
ul#nav{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:40px;
	text-transform:uppercase;
	font-size:13px;
	background:transparent url("images/black.jpg") repeat-x top left;
	font-family:tahoma,Arial,Verdana,sans-serif;
}
ul#nav li{
	display:block;
	float:right;
	margin:0;
	pading:0;
	border-right:1px solid #ffffff;
	}
ul#nav li a{
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	padding:12px 20px 0 20px;
	height:24px;
	height:40px;
	}
ul#nav li a:hover{
	background:transparent url("images/blue.jpg") repeat-x top left;	
	}

<div class="outer" id="sidebar">
<div id="menu">
<ul>
<li><a style="color:#02aaf8" href="#">القائــمــه الرئــيسيــه</a></li>
	<li><a href="#">الرئيسية</a></li>
	<li><a href="#">المنتـدى</a></li>
	<li><a href="#">الاستفـسارات</a></li>
	<li><a href="#">المكتبـة</a></li>
	<li><a href="#">الصـور</a></li>

<li><a style="color:#02aaf8" href="#">الخدمـــات الخارجيه</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>

<li><a style="color:#02aaf8" href="#">الدعم الفــنى</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	<li><a href="#">أضف لنك</a></li>
	</ul>
</div>
</div>

.outer{
	list-style:none;
	margin:0px;
	padding:0px;
}

	
#menu {
	width: 200px;
	border-style: solid solid none solid;
	border-color: #94AA74;
	border-width: 1px;

	}
#menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}
	
#menu li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	font-weight:normal;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	background: url(images/v6.gif);
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}
	
#menu li a:hover {
	color: #666666;
	background: url(images/v6.gif) 0 -32px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}
	
#menu li a:active {
	color: #666666;
	background: url(images/v6.gif) 0 -64px;
	background-repeat:no-repeat;
	padding: 8px 0 0 50px;
	}

<ul id="nav">

<li><a href="#">الرئيسية</a> </li>

</ul>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>

var toLoad = $(this).attr('href')+' #content';

$('#content').hide('fast',loadContent);

#load {
	display: none;
	position: absolute;
	left: 30px;
	
	/*distance from top edge of image till top edge of  wrapper div */
	top: 10px;
	/*right:30px; distance from rt edge of image till rt border of wrapper div */
	background: url(images/ajax-loader.gif);
	width: 54px;
	height: 55px;
	text-indent: -9999em;
}

$('#load').remove();

$('#wrapper').append('<span id="load">LOADING...</span>');

$('#load').fadeIn('normal');