• 0
bastr3

الدرس الأول : بنية التصميم هتمل

سؤال

بسم الله الرحمن الرحيم

في البدايه وقبل كل شيء علينا فهم أفضل بنيه لتصميم موقعنا الإلكتروني بحيث لا نحتاج للتعديل عليها تقريبا مهما كان محتوى الموقع

وجدت ان أفضل بنيه أو البنيه الدارجه هي مايلي :

الجسم , الترويسه , المحتوى , الذيل

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

هذه البنيه التي قمت بتجربتها على عدة مواقع دون أي تعديل عليها وكل موقع كان مختلف عن الآخر وبمحتويات مختلفه



<!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>

سنقوم بزيادة البنيه أكثر وأكثر ولكن بعد فهم كل وسم ماهيته وما أهميته

عند تنفيذ الصفحة كما هي سنرى مثل هذه الصورة

post-21336-056956400 1337988062_thumb.pn

الآن نحتاج إلى شيفرة الستايل حتى تتضح معالم موقعنا لذلك سنحتاج إلى إضافه شيفرة تضمين ملف الستايل في وسم الترويسه كما يلي :


<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

الدرس مرفق

l1.rar

إلى الدرس التالي أتركك بحفظ الله ...

العودة إلى قائمة الدروس

تم تعديل بواسطه بسام العيساوي
5

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

5 إجابة على هذا السؤال .

  • 0

السلام عليكم

ممتاز أستاذنا بسًّام فى إنتظار المزيد .

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

وفقك الله تعالى لما يحب ويرضى

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

أمممممممممم

ملاحظه رائعه وفي محلها ولكنها مقلقه بالنسبه لي :( , صحيح أن عنوان الموضوع عن أحدث التقنيات ولكن ربما سندخل قليلا في html5 نظرا لأن معظم المصممين المحترفين والذين خالطتهم من خلال نظرتي للقوالب والتصاميم التي يقومون بإنشائها لم يتطرقوا كثيرا إلى html5

لايوجد مشاكل من ذكر بعض الأفكار وربما قلب التصميم في نهايه الدوره إلى html5 في حال لم أجد مشاكل فعليه يمكن أن تواجه المصمم مثل مشاكل المتصفحات فهنا نريد مصممي مواقع حقيقيين وليست دوره للمعرفه

شكرا على المداخله أخي الكريم وسنتطرق أكيد بإذن الله ل css3 و جي كويري بدون شرح معمق على أساس إللي مش فاهم يبحث عن الشرح أو يسأل

بالتوفيق

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

----------------------------

شكرا أستاذنا بسام على هذا الدرس.

طلب إذا كام ممكن , كتابة الكلمات التقنية داخل الدروس ( مثل جسم , الترويسه , المحتوى , الذيل , شيفره .... ) عربي - إنجليزي .

----

بالتوفيــــق

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

السلام عليكم

----------------------------

شكرا أستاذنا بسام على هذا الدرس.

طلب إذا كام ممكن , كتابة الكلمات التقنية داخل الدروس ( مثل جسم , الترويسه , المحتوى , الذيل , شيفره .... ) عربي - إنجليزي .

----

بالتوفيــــق

سيتم أخذ هذا بعين الإعتبار إن شاء الله

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

شكرا أستاذنا بسام على هذا الدرس.جزاك الله خيرا

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .