بسم الله الرحمن الرحيم
في البدايه وقبل كل شيء علينا فهم أفضل بنيه لتصميم موقعنا الإلكتروني بحيث لا نحتاج للتعديل عليها تقريبا مهما كان محتوى الموقع
وجدت ان أفضل بنيه أو البنيه الدارجه هي مايلي :
الجسم , الترويسه , المحتوى , الذيل
في حال أردنا المحتوى فقط نقوم بإخفاء باقي الطبقات الأخرى , ولكن حتى الآن هذه البنيه تحتاج إلى تفصيل أكثر , ماذا لو أردت الموقع بعرض ألف بكسل وعلى اليسار ؟ إذن سنقوم بإنشاء بنيه مفصله ومجربه حتى لاتكون الدوره بدون فائدة عمليه فنحن هنا نريد أن نصبح مصممي مواقع إنترنت بعد دراسة هذه الدورة فورا ونريد كل الخبرات والتجارب ولا نريد أن نبدأ من الصفر !
هذه البنيه التي قمت بتجربتها على عدة مواقع دون أي تعديل عليها وكل موقع كان مختلف عن الآخر وبمحتويات مختلفه
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>UrOrbit Theme</title>
</head>
<body>
<div id="body_theme">
<div class="wrapper_header">
<div id="header">
<div class="container_menu">
<div class="menu-container">
<ul class="menu">
<li class="current"><a >Home</a></li>
<li ><a >Services</a></li>
<li><a >Products</a></li>
<li><a >Gallery</a></li>
<li><a >Portfolio</a></li>
</ul>
</div>
</div>
</div>
</div><!-- end header -->
<div class="wrapper_content">
<div id="content">
<div class="main_content">
Content here....
</div>
</div>
</div><!-- end Content -->
<div class="wrapper_footer">
<div id="footer">
Footer here!
</div>
</div><!-- end Footer -->
</div>
</body>
</html>سنقوم بزيادة البنيه أكثر وأكثر ولكن بعد فهم كل وسم ماهيته وما أهميته
عند تنفيذ الصفحة كما هي سنرى مثل هذه الصورة
الآن نحتاج إلى شيفرة الستايل حتى تتضح معالم موقعنا لذلك سنحتاج إلى إضافه شيفرة تضمين ملف الستايل في وسم الترويسه كما يلي :
<link media="screen" href="style.css" type="text/css" rel="stylesheet"/> </head>
نقوم بإنشاء ملف الستايل
style.css
ونكتب داخل الملف شيفره لتوضيح معالم الموقع كما ذكرنا
أولا وسم الجسم نقوم بتلوينه
body{
background: #333;
}أرجو أن تقوم بحفظ الملف وتطبيق ذلك في كل خطوه لتدرك التغييرات التي تحدث في الموقع ويصبح لديك إلمام فيما تكتب
الآن نريد وضع الموقع في المنتصف ويكون بعرض ألف بكسل وهذا يعتمد على الوسم الرئيسي أو الطبقه الرئيسيه بعد الجسم وهي
body_theme
نكتب الشيفره التاليه
#body_theme{
background: #555;
width:1000px;
margin-left: auto;
margin-right: auto;
}ماذا لو أردنا الموقع في الجهه اليمنى أو اليسرى ؟
الامر واضح :) نجعل قيمة المحاذاه الخارجية اليمنى صفر لتحويله للجهه اليمنى وصفر لليسار إلى أردنا توجيهه للجهه اليسرى ,,, المحاذاه الخارجية هي
margin
الدرس مرفق
إلى الدرس التالي أتركك بحفظ الله ...
