مطور Mtwer

1-انشاء ملف index.html >> وبه كود تصميم الصفحة ككل مقسمة كبلوكات (هيدر-ناف بار-فوتر-قائمة جانبيه -قائمة المقالات)

2-انشاء ملف style.css >> وبه كود css اللى بواسطته راح نقسم صفحتنا الى هذه البلوكات السابقه.

3-انشاء مجلد images >> وبداخله صور التصميم للموقع

4-انشاء مجلد includes >>وبداخله الملفات الأتيه :

-ملف header.php >> وبه راح نقتطع كود الهيدر من ملف index ,ونضعه به , حتى يسهل التعديل عليه فيما بعد

-ملف nav.php >>وبه راح نقتطع كود الناف بار من ملف index,ونضعه به,حتى يسهل التعديل عليه فيما بعد

-ملف sidebar.php >> وبه راح نقتطع كود القائمة الجانبية من ملف index,ونضعه به , حتى يسهل التعديل عليه فيما بعد

-ملف footer.php >> وبه راح نقتطع كود الفوتر من ملف index ونضعه به , حتى يسهل التعديل عليه فيما بعد

5-انشاء مجلد variables >> وبداخله ملف أكواد php, التى راح نضعها حتى نجعل الموقع أكثر ديناميكيه وحركه أكثر

والملف هو

-ملف variables.php

-div للصفحة وكل واسمه wrapper

-بداخل div ال wrapper, راح نسوى div للاتى:

-div للهيدر واسمه header

-div للناف بار واسمه nav

-div للمقالات واسمه content

-div للقائمة الجانبية واسمه sidebar

-div للفوتر واسمه footer

<div id="wrapper">

<div id="header"></div>

<div id="nav"></div>

<div id="content"></div>

<div id="sidebar"></div>

<div id="footer"></div>


</div>

1-div الheader >>راح نضع به عنوان الموقع

2-div الnav >>راح نضع لنكات الموقع الرئيسية

3-div الcontent >>راح نضع به المقالات

4-div الsidebar >>راح نضع به لنكات القائمة الجانبيه

5-div الفوتر >>راح نضع به حقوق الموقع

<div id="wrapper">

<div id="header">

<h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2>

</div> 

<div id="nav">

<a href="#">الرئيسية</a>
<a href="#">المنتــدى</a>
<a href="#">الــصــور</a>
<a href="#">الاستضافة</a>
<a href="#">الريسلرات</a>
<a href="#">السيرفرات</a>
<a href="#">البرمجة</a>
<a href="#">اتـصـل بـنا</a>

</div> 

<div id="content">

<a href="#"><h3>||المقـالات المضافة حديثا||</h1></a>
<h3>مقابله شخصيه</h3>

<p>
مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...
</p>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>
<h3>مقابله شخصيه ثانيه</h3>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>

</div> 

<div id="sidebar">

<h3>القائــمــه الرئــيسيــه</h3>
<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>

<h3>الخدمـــات الخارجيه</h3>
<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>

<h3>الدعم الفــنى</h3>
<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>

</div> 

<div id="footer">
<p> <a href="http://advphp.com">تصميم وبرمجة vista-design &copy;</a></p>
</div> 
</div>

 body {
background-color:#fefbea;
font-family: "Tahoma", Times, serif;
font-size:14px;
color:black;
margin:0;
padding:0;
}

#wrapper {
width:960px;
background-image:url(images/bg.jpg);
margin:0 auto;
border-left:1px solid #ac8e33;
border-right:1px solid #ac8e33;
}

#header {
background-image:url(images/bg.jpg);
width:960px;
height:100px;
margin:0 auto 0 1PX;
margin-bottom:1px;
border-bottom:1px solid #ac8e33;
border-top:1px solid #ccc;
}

#header h2 {
direction:rtl;
padding:10px;

}

#nav {


width:960px;
height:40px;
border-bottom:1px solid #ac8e33;
}

#nav a {

font-weight:bold;
display: block;
float:right;
padding:10px;
text-decoration:none;
background-color: #fbf1d5;
}

#nav a:hover {
background-color:#fce18e;
height:20px;
}

#content {
direction:rtl;
width:675px;
float:left;
padding:10px;
}

#content a{
text-decoration:none;
}

#sidebar {
width:200px;
float:right;
margin-bottom:25px;
}

#sidebar a {
text-decoration:none;
}

#sidebar li {
list-style:none;
text-align:center;
}

#sidebar h3{
text-align:center;
}

#footer {

clear:both;
width:960px;
height:135px;
border-top:1px solid #ac8e33;
}

#footer p {

direction:rtl;
padding:10px;
}

#footer p a {
text-decoration:none;
}

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

margin: 2px 3px 4px 10px;

2-->هى بعد الحافة العلويه

3-->هو بعد الحافة اليمنى

4-->هو بعد الحافة السفليه

10-->هو بعد الحافه اليسرى

margin: 2px auto;

#header h2 {
direction:rtl;
padding:10px;

}

#nav a {

font-weight:bold;
display: block;
float:right;
padding:10px;
text-decoration:none;
background-color: #fbf1d5;
}

#nav a:hover {
background-color:#fce18e;
height:20px;
}

-header.php

-nav.php

-sidebar.php

-footer.php

<div id="header">

<h2>عالم مطورى الويب لتعليم البرمجة والتصميم</h2>

</div>

<?php

$heading='عالم مطورى الويب لتعليم البرمجة والتصميم';

$footer='تصميم وبرمجة vista-design';

?>

<?php include('variables/variables.php'); ?>

<div id="header">

<h2><?php echo $heading ?></h2>

</div>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<**** ************"content-type" content="text/html; charset=windows-1256" />

<**** name="description" content="" />

<**** name="keywords" content="" />

<**** name="author" content="" />

<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />

<title>عالم مطورى الويب لتعليم البرمجة والتصميم</title>

</head>

<body>

<div id="wrapper">

<?php include('includes/header.php'); ?>

<?php include('includes/nav.php'); ?>

<div id="content">

<a href="#"><h3>||المقـالات المضافة حديثا||</h1></a>
<h3>مقابله شخصيه</h3>

<p>
مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...
</p>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>
<h3>مقابله شخصيه ثانيه</h3>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>
<p>-------------------------------------------------------------------------------------------------------------------------</p>

<p>

مع افتتاح هذ القسم, أحببت ان أضع لكم نماذج اجتهدت فى تعلمها إلى ان وصلت لمرحلة أصبحت فيها من المشهورين فى عالم مطورى الويب, ومن منطلق هذا القسم لأقوم بتشجيعكم على التعلم , بأن أعرض لكم بعض النماذج الناجحة فى مجال البرمجة والتصميم, وكيف كانت مثابرتهم, ومدى الفوائد التى جنوها من ذلك من الحصول على وظائف فى كبرى الشركات وبمبالغ خيالية .وأحببت ان استعرض لكم المبرمجين الأجانب, لان لهم صدى أقوى وواضح , وان شاء الله أحاول بقدر الامكان أن الخص لكم كافة المقابلات الشخصية للمبرمجين , والحمدلله اللغة موجوده بأذن الله, يعنى ما تشيلوا هم...

</p>

</div>


<?php include('includes/sidebar.php'); ?>

<?php include('includes/footer.php'); ?>

</div>

</body>

</html>