طريقه توزيع صور الإستايل بواسطة css بدون جدوال

السلام عليكم ورحمة الله وبركاته ..

طريقه التوزيع باستخدام css بدون جدوال ربما الكثير منكم يعرفها ، ولكن لم يحاول إستخدامها ومازال يعتمد في التقسيم على الجدوال ـ وسنشرح اليوم كيف نعتمد هذه الطريقه في التقسم على مثال مبسط وسهل .

* ولكن أولاً يجب توضيح بعض الأمور :
ـ الشرح التالي ماهو الا فتح المجال لك فقط ومقدمة لإكتشاف طرق جديدة في التوزيع بدلا من الطريقه المعتادة عن طريق الجدوال .

ـ التوزيع بـ css يصلح سواء كان تصميم موقع عادى او إستايل منتدى او مجلة .

ـ لا تتوقع ان تصبح خبير في التوزيع والتقسم بمجرد قراءة هذا الشرح ، وربما تخرج منه بدون ان تستوعب الكثير ـ وان اردت التعلم فعلاً أكمل جميلك بالبحث عن المعلومة بنفسك وأسأل كثيراً وحاول الإستفادة من اى موقع يتكلم عن css .

ـ المواقع العربيه التى تتكلم عن css قليله جدا وفقيرة بالمقارنه بالمواقع الأجنبيه فيكفي ان تكتب فقط css في جوجل لتشاهد كميه المواقع والدروس ـ وللاسف تأخرنا لان الكثير مازال لم يقتنع بأهميتها ويعيش على قديمه HTML بسبب التعود على برنامج FrontPage الذى لا يتعامل معها ولا يحاول التجديد ومعرفة طرق جديدة في التصميم والتوزيع ، ولهذا تجد الكثير من إستايلات المنتديات والمواقع العربية مخالفة للمعايير القياسية ولا تصلح للقراءة على كافة المتصفحات لان المصمم مازال يعمل مع HTML .

**

-1- نبدأ مع البرنامج المستخدم فى التوزيع Dreamweaver 8 ..
قم بفتحه وأختر كما بالصورة ..


http://www.traidnt.net/Portal/images/articles/97/1.gif
حددنا صفحه جديدة بلغه XHTML 1.0 Transitional وهى نفس لغه قوالب المنتدى

====
وينصح عند عمل اى تعديل على اى قالب من قوالب المنتدى ان تحدد صفحه جديدة بنفس الطريقه ثم تضع علامتين comment وبينهم تضع القالب وتعدل عليه سواء كنت ستضيف صورة او مسافة او جدول او اى شئ وبذلك سينتج لك قالب متوافق مع المعايير القياسيه بدون عناء لان الكود الذى ينتجه البرنامج سليم ـ وبعد ان تنتهي تنقل القالب المعدل بين العلامتين فقط .
====

بعد فتح البرنامج نتعرف على نافذة css التى سوف يتم التعامل معها في التوزيع ، وتوضيح الأزرار التى تهمنا فقط وتجدها على اليمين بالشكل التالي ( ويمكنك ان تظهرها عن طريق القائمة Windows > CSS Styles .


http://www.traidnt.net/Portal/images/articles/97/2.gif
-2- مصطلحات ستمر علينا :
div = وهو الوسم الذى سيتم التقسيم من خلالة .
id = معرف يتم تحديدة ويمكن تندرج تحدتها عنده فئات .
class = الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id .

وشاهد معي هنا كيف يتم تعريف كل من الـ id والـ calss وكيف يتم إستدعائهم من داخل الوسم div .


http://www.traidnt.net/Portal/images/articles/97/3.gif

رمز:
<style type="text/css">
<!--
#ahmed_all {
background: #0099FF;
}
.mona {
background: #FF66FF;
}
-->
</style>
<div id="ahmed_all">Here *******</div>
<div class="mona">Here *******</div>
لاحظ يتم تعريف الـ id بوضع هاش ( # ) في أوله ويتم تعريف الـclass بوضع نقطة ( . ) في اولة .
ويمكن أيضا للـ id والـ class ان يتضمنوا أكثر من تعريف او فئه جديدة بداخلة ـ وللتوضيح أكثر بالمثال التالي ..


http://www.traidnt.net/Portal/images/articles/97/4.gif


رمز:
<style type="text/css">
<!--
#ahmed_all {
background: #0066FF;
color: #FFFFFF;
}
#ahmed_all #abdel-rahman {
background: #0099FF;
}
#ahmed_all .ayman {
background: #0066CC;
}
.mona {
background: #FF66FF;
color: #FFFFFF;
}
.mona .zainab {
background: #FF33CC;
}
-->
</style>
<div id="ahmed_all">
<div class="ayman">xxx</div>
<div id="abdel-rahman">xxx</div>
xxx</div>

<div class="mona">
<div class="zainab">xxx</div>
xxx </div>
المعرف ahmed_all يحتوى بداخله على المعرف abdel-rahman والفئه ayman وتظهر قيم هذه المعرفات فقط إن كانت داخله في المعرف الأساسي وهو ahmed_all اى انه لا قيمه لها خارج هذا المعرف .

كما ان الفئه mona تندرج تحتها كذلك الفئه zainab ـ وكل منهم يمكن ان يحتوى على قيم مختلفة .

-3- التصميم اللى هانتمرن عليه هو التصميم التالي :


http://www.traidnt.net/Portal/images/articles/97/5.gif
يتكون كالمعتاد من هيدر وفوتر وجسم ، ولن اتكلم عن طريقه التصميم فيمكنكم مراجعه قسم التصميم او المواقع المتخصصه فى دروس التصميم .

- التقطيع او قص التصميم خطوة مهمه جدا سيتوقف عليها مصير التوزيع بعد ذلك ـ فلا تصعب عليك الامر بكثرة الأجزاء ـ ومن التصميم السابق سوف يتم التقطيع على هذا النحو .


http://www.traidnt.net/Portal/images...mage_12999.gif
على عكس الجدول فلا يشترط ان أجزاء التقطيع تكون متساويه فى الأبعاد بين الهيدر والفوتر فعند التوزيع سيكون كل جزء مستقل وحده .

- متمدد وغير متمدد :
يلاحظ ان الكثير يشغل نفسه بهذا الأمر كثيرا ، ويظل يحسبها يمين وشمال كيف يتم تقطيع التصميم ليكون متمدد او يكون بدون نقطة تمدد ، والجواب ان اغلب التصاميم تصلح ان تكون متمدده وثابته فى نفس الوقت فالتصميم المتمدد لا يلزمة أكثر من 1 بكسل حتى يستطيع ان يتمدد يمين ويسار او مثلاً يتمدد من جهه واحده فقط إذا كان التصميم يغلب عليه تموجات الباث .

- والحالات التى لا يصلح فيها التمدد مثلاً يكون الهيدر عبارة عن صورة واحده كبيرة لا يوجد مكان متماثل للتمدد او ان هناك تموجات او دوائر كثيرة به .

فحسب التصميم الذى صنعته يمكنك ان تحدد حينها اى جزء يمكن ان يتمدد ـ وعنها ستحدد كيف يتم القص ـ وفي المثال معنا قد حددنا الجزء رقم 2 و 8 مساحات للتمدد تكرر على اليمين واليسار من مجموع 10 أجزاء ...



-4- قلنا انه يتكون من ( هيدر ـ جسم ـ فوتر ) ، وتذكروا ماقيل في الخطوة رقم ( 2 ) وطريقه تعريف كل من الـ id والـ class .. سوف نصنع لكل جزء من التصميم معرف خاص به id ومن داخله سيتم وضع أجزاء التصميم داخل class فئات !
والشكل التالي يوضح ماأقصده :


http://www.traidnt.net/Portal/images/articles/97/6.gif
ولاحظ ايضا انه تم وضع معرف id للتصميم كله وذلك لسهوله للتحكم فى عرض المنتدى ككل .
ويترجم الشكل السابق داخل برنامج dreamweaver كما بالصورة التاليه :


http://www.traidnt.net/Portal/images/articles/97/7.gif
وهذه هى فقط الأكواد التى سيتم وضعها في قوالب المنتدى كما سنعرف لاحقــا
-5- نأتي للمرحلة التالية ، وهى تعريف قيم كل الفئات التى وضعناها في الوسوم div .

*******# وهو الوعاء الكبير الذى يحتوى على التصميم ككل ومنه سوف نتحكم في عرض التصميم وطريقه ظهورة .
أرجع للمرحله رقم ( 1 ) وقم بإضافة معرف css جديد بإسم ******* كما بالصور .


http://www.traidnt.net/Portal/images/articles/97/8.gif
سيظهر لك صندوق او محرر صغير وهو مايتميز به برنامج dreamweaver فيسهل عليك كثيراً إدخال القيم مباشرة أفضل من حفظها وكتابتها يدوياً بالطريقه العادية بالكود .

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


http://www.traidnt.net/Portal/images/articles/97/9.gif
وستجده يظهر لك بالشكل التالي :


http://www.traidnt.net/Portal/images/articles/97/10.gif

رمز:
#******* {
width: 85%;
margin: 0px auto;
}
header# المعرف الأب للهيدر ، وبه سوف يتم وضع قيم لتعريف الخلفيه وهى هنا للتدرج ( الجزء رقم 2 بالصورة الموضح بها طريقه التقطيع ) وكذلك الارتفاع الكلي للهيدر ( إذا كان التصميم ثابت لن نضع تعريف خلفيه ونكتفي بالارتفاع )

قم إضافة معرف css جديد id بإسم header وإدخل فيه القيم التاليه :


http://www.traidnt.net/Portal/images/articles/97/11.gif
171 بكسل هنا ، هى إرتفاع الهيدر في المثال .

header .right# الجزء الأيمن من الهيدر ( الجزء رقم 1 بالصورة الموضح بها طريقه التقطيع ) .
حاول ان تقوم بالوقوف بمؤشر الفارة داخل الوسم div اسفل معرف الهيدر مباشرة ثم إذهب الى لوحه css التى تعرفت عليها بالمرحلة رقم ( 1 ) وإدرج معرف جديد ستجد عند فتح النافذة ان بها إمتداد ذلك المعرف الذى وقفت عليه والى اى جزء ينتمي مثال :


http://www.traidnt.net/Portal/images/articles/97/12.gif
قم بحذف الجزء *******# منها ليبقي فقط header .right# ثم Ok ، وان لم يظهر معك قم بكتابته بنفسك ـ وبه سوف نضع فيه قيم للصورة وابعادها كما هنا :


http://www.traidnt.net/Portal/images/articles/97/13.gif
header .left# الجزء الأيسر من الهيدر ( الجزء رقم 4 بالصورة الموضح بها طريقه التقطيع ) .
سيتم وضع المعرف بنفس الطريقه السابقة ولكن مع الإختلاف في Float نجعله يسار Left ولاحظ ايضا الابعاد إذا كان لكل منهم ابعاد مختلفة عن الآخر ..

header .middle# الهيدر الأوسط ، قم بوضع معرف جديد باسمه بالقيم التالية ..


رمز:
#header .middle {
background: url(images/top_h_middle.gif) no-repeat;
height: 171px;
margin-right: auto;
margin-left: auto;
width: 337px;
}
shadowright. و shadowleft. قم بتعريف كل منهم كما بالصورة التالية .


http://www.traidnt.net/Portal/images/articles/97/14.gif
ويوضع لهم القيم التاليه :


http://www.traidnt.net/Portal/images/articles/97/15.gif
حيث ان 8 بكسل هو عرض الإطار او الظل الجانبي مع مراعاه تغير الإتجاهات مع اليمين واليسار ـ

in_container# بالنسبه لهذا المعرف لا نحتاج ان نضع فيه اى قيم حيث انه المكان الذى سيظهر فيه المنتدى ، اما في حاله تصميم المواقع ستوضع تعريف للخلفيه والخط ..

يبقي لنا الفوتر ويتم تعريقه ووضع القيم له بنفس الطريقه التى فعلناها مع الهيدر لان كل منهم متشابه في طريقه العرض والأجزاء المقطعه .

-6- مصطلحات مرت علينا في المثال :

Background : هو التعريف العام للخلفيه سواء كانت صورة او لون فقط ويمكن من خلاله ان يستخدم لأكثر من وظيفه .
background-color : لون الخلفية .
background-image : صورة الخلفية .
background-repeat : تكرار الخلفية .
background-attachment : كيفية معالجة الخلفية .
background-position : وضع الخلفية .

Height : الطول .

Width : العرض .

Float : محاذاة العنصر .

Padding : وهى تعرف بالعربيه ( الحواشي ) اى انها لعمل حاشية للعنصر او مسافة مـا ـ ويأثرعلى العنصر من الداخل .

Margin : الهوامش وتؤثر على العنصر من الخارج بالنسبه للعناصر الأخري المجاورة .


مع التعود ستتمكن من فهم طريقه التوزيع بسرعه ، ويمكنك ان تستغنى عن النافذة التى تضع عن طريقها القيم وتكتبها بنفسك لانك ستكون حفظت الأوامر من التكرار .


-7- طريقه وضع الاكواد الناتجه :

1- كل مانتج من أكواد css سيتم وضعه بالإستايل فى تعاريف css الإضافية وتجدها بـ إعددات css رئيسي بلوحة تحكم المنتدى ـ وتحصل هذه الأكواد داخل الـ dreamweaver بين الوسمين <style>


-6- مصطلحات مرت علينا في المثال :

Background : هو التعريف العام للخلفيه سواء كانت صورة او لون فقط ويمكن من خلاله ان يستخدم لأكثر من وظيفه .
background-color : لون الخلفية .
background-image : صورة الخلفية .
background-repeat : تكرار الخلفية .
background-attachment : كيفية معالجة الخلفية .
background-position : وضع الخلفية .

Height : الطول .

Width : العرض .

Float : محاذاة العنصر .

Padding : وهى تعرف بالعربيه ( الحواشي ) اى انها لعمل حاشية للعنصر او مسافة مـا ـ ويأثرعلى العنصر من الداخل .

Margin : الهوامش وتؤثر على العنصر من الخارج بالنسبه للعناصر الأخري المجاورة .


مع التعود ستتمكن من فهم طريقه التوزيع بسرعه ، ويمكنك ان تستغنى عن النافذة التى تضع عن طريقها القيم وتكتبها بنفسك لانك ستكون حفظت الأوامر من التكرار .


-7- طريقه وضع الاكواد الناتجه :

1- كل مانتج من أكواد css سيتم وضعه بالإستايل فى تعاريف css الإضافية وتجدها بـ إعددات css رئيسي بلوحة تحكم المنتدى ـ وتحصل هذه الأكواد داخل الـ dreamweaver بين الوسمين <style>


http://www.traidnt.net/Portal/images/articles/97/16.gif
(2) – الأوسمة div التى تحتوى على المعرفات سوف توضع بقوالب الهيدر والفوتر كما يلي :


http://www.traidnt.net/Portal/images/articles/97/17.gif

في قالب الهيدر يوضع مباشرة قبل الكود ..

رمز PHP:
$spacer_open

$_phpinclude_output

ويم حذف كل الأكواد الأخري فوقها ـ وفي قالب الفوتر يوضع بعد أخر سطر منه مباشرة



===============================


## انتهى ... واللى فاهم يقول http://www.traidnt.net/vb/images/smilies/cupidarrow.gif واى أخطاء حدثت اعذرونا وأتمنى ان تصححوا لي

(( وبالمرفق ستجدوا الدرس كاملاً للتحميل مع الصفحه التى تحتوى على المثال الموجود بالدرس ))

الطريقه التى تم الشرح بها ليست قياسية اى لا تطبق على كل التصاميم فكل تصميم له حاله خاصة وقد تختلف او تزيد او تقل الأوسمه div وطريقه توزيعها والقيم التى تأخذها كلما كان التصميم معقد وبه الكثير من الصور ..

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

تقبلوا التحيه جميعاً ,, ca2oom