عمل مجله] الدرس الاول تجهيز اعدادات الcss

[عاشق الحب]

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

كما وعدناكم اننا سوف نقوم بعمل شرح لعمل مجله وهذا اول دروسنا واهم شئ بكل سكربيت وهو عمل css

ليساعدنا في التعديل والتغيير


(طبعا احنا الان مجهزين الدريم ويفر ومجهزين منطقة العمل وكل شئ)

خلنا الان نعمل التالي:- وهو عباره عن تمبلت المجلة ويمكن القول انه يوضع به الستايل المراد عرضة بكل صفحات المجلة والتعديل على الستايل يكون من صفحة واحده فقط ويتم التعديل تلقائيا على باقي الصفحات بدون الرجوع الى اي صفحة.....انظر الصورة

بعد الضضغط على file - new

http://www.alfarh.com/mhamadalfarh/mk/css/1.jpg
والان نجهز هنا الستايل الخاص بنا وعند الحفظ يقول لنا :-

(للعلم عند تجهيز الستايل يمكنك الاكتفاء بفوتر وهيدر الستايل الخاص بالمنتدى لكن مع مسح الزياداة وابقاء الصور الخاصة بك

الان بعد تجهيز الصفحة ادخل هذا الموضوع فهو يوضح لك هذه النقطة بالتفصيل

تم حذف الرابط..... (http://تم%20حذف%20الرابط...../)

الان يلزمنا في هذه النقطة من الدرس الموجود اعلاه
ولكن سوف تلاحظ انه لايمكنك التعديل على الصفحه لماذا لأننا لم نقم باختيار المناطق التي يمكننا التعديل عليها فنحن في هذا التصميم لا نحتاج سوى منطقة الوسط للتعديل فماذا نفعل نقوم بالعودة للصفحة القالب sgltemp.dwt.html

ونقوم باضافة جدول في منطقة النص ونقوم بتحديده بالطريقة التالية :
http://www.alfarh.com/vb/imagehosting/1466ee0007d007.jpg
الان بعد تحديد الجول طبق عليه التالي :
http://www.alfarh.com/vb/imagehosting/1466ee000a9f84.jpg
سوف يظهر لك مربع اختيار لتسمية المنطقة وانا قمت بتسميتهاcenter

http://www.alfarh.com/vb/imagehosting/1466ee0015f67b.jpg

ان نقوم بتسمية بدل center
نضع body وفقط
...............................................
وهكذا ننتهي من الستايل الخارجي ويأتي لنا تجهيز الcss والتعديل عليها في درس القادم باذن الله

طبعا وبكل تأكيد الcss يحتاج الى التالي:-

اهم شئ في المجلة الخلفية ولونها ونقوم بعمل التالي:-

http://www.alfarh.com/mhamadalfarh/mk/css/2.jpg
http://www.alfarh.com/mhamadalfarh/mk/css/3.jpg

وهذه العملية خاصة لجسم الصفحة لذلك نضغط اي مكان خارج الجدول الخاص بالستايل ونقوم بعمل التالي:-

http://www.alfarh.com/mhamadalfarh/mk/css/4.jpg
وهكذا انتهينا من الخلفية وسوف نأتي كما قلت بالدرس القادم للتعديل على الخلفيه عن طريق صفحة معينه

الان بقي علينا شئ مهم وهو الجداول بكل تأكيد كل جدول يتكون من رأس ومحتوى بطن كما بالصورة (طبعا الصورة توضيحيه يعني بعد الانتهاء من العمل قم بحذف الجدول لا يهمنا في هذه الصفحة الا وضع اعداداتها)

http://www.alfarh.com/mhamadalfarh/mk/css/5.jpg

طيب الحين السؤال .... الجدول كيف بنقدر نعدل على لون حدوده الزرقه ؟
كبف اسم البلوك حجم الخط ولونة نستحكم فيه ؟
كيف محتويات البلوك نتحكم بخطها ولونها ؟

كل هذه الأسئله سوف نجيب عليها الان ...

اول الجدول كيف نقدر نعدل على حدودة نقوم بعمل التالي :-

http://www.alfarh.com/mhamadalfarh/mk/css/2.jpg
لكن مع تغير كلمة .body
الى .border1

http://www.alfarh.com/mhamadalfarh/mk/css/6.jpg

ونقوم بحفظ هذه الاعداادت لاننا سوف نقوم بعملها بكل ملف css
الأن نقوم بعمل التالي على الحدود فنجد انها تحول لونها الى اللون المطلوب http://www.traidnt.net/vb/images/smilies/cupidarrow.gif
مع قراءة الشرح على الصورة...

http://www.alfarh.com/mhamadalfarh/mk/css/7.jpg


الان خط ولون اسم البلوك نفس اعدادات هذي

http://www.alfarh.com/mhamadalfarh/mk/css/2.jpg

معتغيير اسمها الى .border2

ووضع الاعدادات التاليه

http://www.alfarh.com/mhamadalfarh/mk/css/6.jpg

والتالية

http://www.alfarh.com/mhamadalfarh/mk/css/8.jpg

الصح يعني انا عملناه واتتما border وهو مهم ان يكون ايضا في ملف border2

ثم نقوم بعمل التالي مع مراعة المكتوب على الصورة

الأن نقوم بحذف التلوين عن كلمة اسم البلوك ونطبق التالي وبعدين نشوف كيف راح تتغير الاعدادات للي موجودة في الاعلى ..

http://www.alfarh.com/mhamadalfarh/mk/css/9.jpg

الان نفس الشئ على محتوى البلوك لكن مع تسميه .border3

ونقوم بالتأكيد عمل اعدادات border
واعدادات type
وتنفيذ هذه الخطوة

مع تعديل انه المؤشر يكون على محتويات البلوك
وبدل border2
نختار border3
الان البرنامج لمن ليس لديه وهو نفس الاصدار 7 وهو الافضل لدي
برابط مباشر

http://www.alfarh.com/mhamadalfarh/D...averMX2004.rar (http://www.alfarh.com/mhamadalfarh/Dreamwever/DreamweaverMX2004.rar).

[max man]

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