شرح توزيع صور الستايل بواسطة css بدون جداول

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

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

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

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

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

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

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

حددنا صفحه جديدة بلغه XHTML 1.0 Transitional وهى نفس لغه قوالب المنتدى

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

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

-2- مصطلحات ستمر علينا :
div = وهو الوسم الذى سيتم التقسيم من خلالة .
id = معرف يتم تحديدة ويمكن تندرج تحدتها عنده فئات .
class = الفئات وهى يمكن ان تكرر اكثر من مرة بنفس الصفحة ، على عكس المعرفات id .

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

كود:
<style type="text/css"></style><div id="ahmed_all">Here content</div><div class="mona">Here content</div>

لاحظ يتم تعريف الـ id بوضع هاش ( # ) في أوله ويتم تعريف الـclass بوضع نقطة ( . ) في اولة .
ويمكن أيضا للـ id والـ class ان يتضمنوا أكثر من تعريف او فئه جديدة بداخلة ـ وللتوضيح أكثر بالمثال التالي ..

كود:
كود:
<style type="text/css"></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- التصميم اللى هانتمرن عليه هو التصميم التالي :

يتكون كالمعتاد من هيدر وفوتر وجسم ، ولن اتكلم عن طريقه التصميم فيمكنكم مراجعه قسم التصميم او المواقع المتخصصه فى دروس التصميم .

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

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

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

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

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

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

ولاحظ ايضا انه تم وضع معرف id للتصميم كله وذلك لسهوله للتحكم فى عرض المنتدى ككل .
ويترجم الشكل السابق داخل برنامج dreamweaver كما بالصورة التاليه :

وهذه هى فقط الأكواد التى سيتم وضعها في قوالب المنتدى كما سنعرف لاحقــاً .

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

-5- نأتي للمرحلة التالية ، وهى تعريف قيم كل الفئات التى وضعناها في الوسوم div .

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

سيظهر
لك صندوق او محرر صغير وهو مايتميز به برنامج dreamweaver فيسهل عليك
كثيراً إدخال القيم مباشرة أفضل من حفظها وكتابتها يدوياً بالطريقه
العادية بالكود .

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

وستجده يظهر لك بالشكل التالي :

كود:
#content {
width: 85%;
margin: 0px auto;
}

header# المعرف الأب للهيدر ، وبه سوف يتم وضع قيم لتعريف الخلفيه وهى هنا للتدرج ( الجزء رقم 2 بالصورة الموضح بها طريقه التقطيع ) وكذلك الارتفاع الكلي للهيدر ( إذا كان التصميم ثابت لن نضع تعريف خلفيه ونكتفي بالارتفاع )

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

171 بكسل هنا ، هى إرتفاع الهيدر في المثال .

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

قم بحذف الجزء content# منها ليبقي فقط header .right# ثم Ok ، وان لم يظهر معك قم بكتابته بنفسك ـ وبه سوف نضع فيه قيم للصورة وابعادها كما هنا :

header .left# الجزء الأيسر من الهيدر ( الجزء رقم 4 بالصورة الموضح بها طريقه التقطيع ) .
سيتم وضع المعرف بنفس الطريقه السابقة ولكن مع الإختلاف في Float نجعله
يسار Left ولاحظ ايضا الابعاد إذا كان لكل منهم ابعاد مختلفة عن الآخر ..

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

[code][#header .middle {
background: url(images/top_h_middle.gif) no-repeat;
height: 171px;
margin-right: auto;
margin-left: auto;
width: 337px;
}/CODE]

shadowright. و shadowleft. قم بتعريف كل منهم كما بالصورة التالية .

ويوضع لهم القيم التاليه :

حيث ان 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>

(2) – الأوسمة div التى تحتوى على المعرفات سوف توضع بقوالب الهيدر والفوتر كما يلي :

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

كود:
$spacer_open

$_phpinclude_output

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

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

نقلته لكم من احد الدروس الموجوده عندي على السي دي .. CD LESSON

مــــــــــــشــــــــــكــــــــــــووووووووووور

» هاك تحميل الملفات والصور للمنتديات بدون مايسبب ضغط للمنتدى