..:.. مرحباً بك في شبكة الشدادين الرسمية ، ضيفنا الكريم يسعدنا دعوتك للانضمام والمشاركة معنا .. اضغط هنا لتسجيل عضوية جديدة ..:..


العودة   شبكة الشدادين الرسمية > المنتديات التقنية > منتدى الكمبيوتر والانترنت وتبادل الخبرات
  [ 1 ]
قديم 26 Oct 2008, 10:25 AM
it*s hero

haitham غير متصل

تاريخ التسجيل : Jul 2006
رقم العضوية : 1618
الإقامة : latvia
الهواية :
المشاركات : 2,787
معدل التقييم : 25
الملف الشخصي للكاتب
إضافة تقييم
الرد على الموضوع
ارسال الموضوع لصديق
طباعه الموضوع
تبليغ عن الموضوع
طريقه توزيع صور الإستايل بواسطة css بدون جدوال "طريقة غربية رائعة"



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

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

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

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

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

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

**

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




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

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

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




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

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






رمز:
<style type="text/css">
<!--
#ahmed_all {
background: #0099FF;
}
.mona {
background: #FF66FF;
}
-->
</style>
<div id="ahmed_all">Here content</div>
<div class="mona">Here content</div>

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







رمز:
<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- التصميم اللى هانتمرن عليه هو التصميم التالي :




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

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




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

- متمدد وغير متمدد :
يلاحظ ان الكثير يشغل نفسه بهذا الأمر كثيرا ، ويظل يحسبها يمين وشمال كيف يتم تقطيع التصميم ليكون متمدد او يكون بدون نقطة تمدد ، والجواب ان اغلب التصاميم تصلح ان تكون متمدده وثابته فى نفس الوقت فالتصميم المتمدد لا يلزمة أكثر من 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# الهيدر الأوسط ، قم بوضع معرف جديد باسمه بالقيم التالية ..



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

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>



-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 التى تحتوى على المعرفات سوف توضع بقوالب الهيدر والفوتر كما يلي :






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


رمز PHP:
$spacer_open

$_phpinclude_output

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



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


## انتهى ... واللى فاهم يقول واى أخطاء حدثت اعذرونا وأتمنى ان تصححوا لي

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

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

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

تقبلوا التحيه جميعاً..
الشرح لكتوم :chkmk_ant



الملفات المرفقة
التعديل الأخير تم بواسطة haitham ; 26 Oct 2008 الساعة 10:28 AM سبب آخر: أضافة مرفق

رد مع اقتباس
قديم 26 Oct 2008, 10:33 AM [ 2 ]


تاريخ التسجيل : Oct 2007
رقم العضوية : 4022
الإقامة : saudi arabia
الهواية : كل شيء
مواضيع : 744
الردود : 18772
مجموع المشاركات : 19,516
معدل التقييم : 325بندر النايف is a jewel in the roughبندر النايف is a jewel in the roughبندر النايف is a jewel in the roughبندر النايف is a jewel in the rough

بندر النايف غير متصل


مـجـمـوع الأوسـمـة : 12
المشاركة في الاحتفالية السنوية

الكاتب المميز

التواصل

يوميات رمضانية

المشاركة في احتفال المنتدى

عضو مخلص

وسام أفضل تقديم للسفرة

فعالية أين الكرة؟

التواصل

العضو المميز




يا هلا والله بهيثم باشا فينك يا راقل

حياك الله ومشكور على الشرح الي ما فهمتش منه حاقه

هههههههههههههههههههه

<< ما تأخدتش بالك منه غشيم شويه


توقيع : بندر النايف
.
رحـــمكِ الله يا أمي وجعل الجنة مثواكِ
الأعلى رد مع اقتباس
قديم 26 Oct 2008, 07:21 PM [ 3 ]
عضو متألق


تاريخ التسجيل : Jul 2008
رقم العضوية : 9535
الإقامة : saudi arabia
مواضيع : 36
الردود : 83
مجموع المشاركات : 119
معدل التقييم : 25حمد البصيصي is on a distinguished road

حمد البصيصي غير متصل




شكــرا عــلــى الــمــوضــوء بــصــراحــه

مــــوضـــوء مــره روعـــه ان شــاء الــلــه نــســتــفــد مــن هــذا الـــمــوضــوء

مــــــــــــــــــــــــــع تــــــحـــــيـــاتـــــي
حــمــد الــكــبــودي


الأعلى رد مع اقتباس
قديم 26 Oct 2008, 07:29 PM [ 4 ]
عضو مرشح للإشراف


تاريخ التسجيل : Dec 2007
رقم العضوية : 4862
الإقامة : saudi arabia
مواضيع : 406
الردود : 11883
مجموع المشاركات : 12,289
معدل التقييم : 25حاتم الشدادي is on a distinguished road

حاتم الشدادي غير متصل


مـجـمـوع الأوسـمـة : 5
عضو مخلص

الاحتفال بالعام السابع

الاحتفال بالعام السابع

مسابقة تعرجات قلم

الإداري المميز




يعطيك العافية مشرفنا هيثم

وشكراً


توقيع : حاتم الشدادي


الأعلى رد مع اقتباس
قديم 26 Oct 2008, 08:05 PM [ 5 ]
عضو متميز


تاريخ التسجيل : Apr 2005
رقم العضوية : 139
الإقامة : saudi arabia
الهواية : كثيره ومنها الرياضة
مواضيع : 482
الردود : 8566
مجموع المشاركات : 9,048
معدل التقييم : 25الولهان is on a distinguished road

الولهان غير متصل






والله طريقه يبي لها شغل وتكتكه

لأنك مثلك عارف يا هيثوم كثير من اصحاب المواقع يعملون مع HTML بشكل كبير

ومع الفرونت بيج بشكل كبير ايضاً .. ويكفي انها تتوافق مع متصفحين او ثلاثه ع الأقل

ومع الكثير تتوافق مع جميع المتصفحات

الطريقه التي اتيت بها يا هيثم معقده نوعاً ما وبيستفيد منها اصحاب الأستايلات وتركيبها

ما عليك بطقطق عليها شوووي يمكن استفيد منها

هيثم .. استاذ كبير في هذه الأمور وخبير في مجال الدعم الفني بشكل عام

وايضاً في مجال الأستايلات وتركيبها وتصميمها ما قصرت يا مبدع ويعطيك العافيه

ودادي


الأعلى رد مع اقتباس
قديم 26 Oct 2008, 08:58 PM [ 6 ]
مؤسس شبكة الشدادين


تاريخ التسجيل : Jan 2005
رقم العضوية : 1
الإقامة : saudi arabia
الهواية : رياضة + كمبيوتر وبس
مواضيع : 1511
الردود : 82066
مجموع المشاركات : 83,577
معدل التقييم : 4458السلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond reputeالسلطان has a reputation beyond repute

السلطان غير متصل


مـجـمـوع الأوسـمـة : 8
فعالية ضوء عدسة

فعالية طلباتك أوامر

شكر وتقدير

فعالية مجموعات المنتدى

يوميات الأعضاء

التميز في دورة الفوتوشوب

شكر وتقدير

أجمل خط 1434 هـ




لا هنت يا مشرفنا العزيز هيثم

والله يسلم يديك ما قصرت

شح كافي ووافي


توقيع : السلطان




الأعلى رد مع اقتباس
قديم 04 Nov 2008, 03:51 AM [ 7 ]


تاريخ التسجيل : Oct 2008
رقم العضوية : 12713
مواضيع : 4
الردود : 50
مجموع المشاركات : 54
معدل التقييم : 25ღبــدرღالشداديღ is on a distinguished road

ღبــدرღالشداديღ غير متصل






الله لايهينك اخوي على مجهودك ارائع

دمت متميز بروعه طرحك


توقيع : ღبــدرღالشداديღ
الأعلى رد مع اقتباس
قديم 04 Nov 2008, 04:18 AM [ 8 ]
عضوة متميزة


تاريخ التسجيل : Oct 2008
رقم العضوية : 11735
الإقامة : saudi arabia
الهواية : COMPUTER
مواضيع : 44
الردود : 384
مجموع المشاركات : 428
معدل التقييم : 25shaimaa is on a distinguished road

shaimaa غير متصل







الأعلى رد مع اقتباس
قديم 07 Nov 2008, 04:39 AM [ 9 ]
كلامه يقوطر عسل


تاريخ التسجيل : Nov 2005
رقم العضوية : 626
الإقامة : turkey
الهواية : صيد السمك , وتقليم الأظافر
مواضيع : 200
الردود : 6613
مجموع المشاركات : 6,813
معدل التقييم : 64شــاهر will become famous soon enough

شــاهر غير متصل




هيثم شكراً عزيزي

والله يعطيك العافيه


توقيع : شــاهر
الله يرحمك يا ابو حسام عز الله انك علينا فقيدة
الأعلى رد مع اقتباس
إضافة رد
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
" القناص " و" السفاح " و" المايسترو ".. من الأفضل في أسيا .؟ الولهان عالم الرياضة 5 28 Nov 2007 10:20 PM
""تعرف على اللي حاذفك بالماسنجر بدون أي برنامج"" شروق الأمل قسم برامج الماسنجر وملحقاته 16 09 Oct 2006 02:52 AM
نجاة افغاني من موت محقق """"""" سبحان الله العالمي الشدادي11 القسم العام 5 03 Jun 2006 03:11 AM
""أبتعاااادااات"" .. و .. ""غااااياااات لوقائع صائب"" صويب الوله مرافئ البوح 22 25 Feb 2006 01:16 AM
أدوات الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

Loading
03:18 AM
Powered by vBulletin® developed by Tar3q.com

RSS For Network AlShdadeen official