طريقة تصميم الاستايلات

[درس] طريقة تصميم الاستايلات

–[الجزء الثانى]–
تصدير العمل الى برنامج Front Page

من الافضل ان نقوم باستخدام Front Page 2003

عند فتح الصفحة نقوم بحذف جميع الاكواد الموجودة بداخل SPlit

(-1نقوم الان بعمل 6 صناديق

(-2وسوف يتم تقسيم الجداول بهذة الطريقة

(-3 نقوم بادراج الصور

4-) الشكل النهائى للصور ولاحظ ان الصور تم وضعها معكوسة

5-) ياتى الان دور نقاط التمدد فى الاستايل

نقوم بالوقوف على المربع المراد اضافة بة نقطة تمدد ثمRight Click

ثم نقوم باختيار صور التمدد الذتى ذكرناها فى الخطوة رقم 2 من الجزء الاول

ونقوم بتكرار نفس الامر مع المربعات 1 و 2 و 3 و 4

لينتج لدينا

6-) نقوم بحذف تحديد الجداول وذلك عن طريق الوقوف فى اى مربع ونضغط Right Click

وبعد ذلك

النتيجة النهائية

انتهى الجزء الثانى

[درس] طريقة تصميم الاستايلات

–[الجزء الثالث]–

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

اولاً ناتى صفحة الكود فى برنامج الـFront Page لنشرح ماهى هذة الاكواد

ونقوم بتجزئة الاكواد الى جزئين
الجزء الاول وهو ماسوف يوضع فى الهيدر
الجزء الثانى وهو ماسوف يوضع فى الفوتر

ناتى الان للتركيب

نفتح ملف overall_header.html ونقوم بالبحث عن

ونقوم بحذف مابعدة حتى نصل الى

ثم نقوم باستبدال هذا الكود بالجزء الاول من الكود الموجود فى الصورة الاولى من الجزء الثالث

ليصبح بهذا الشكل

ثم نقوم بفتح ملف overall_footer.html ونقوم بوضع الجزء الثانى من الكود قبل

لصبح بهذا الشكل

الان ناتى للخطوة الاخير الا وهى وضع الصور التى قمنا بتصميمها بداخل مجلد stylessubsilver2theme

ونقوم باستبدال روابط الصور بداخل ملفى overall_header.html و overall_footer.html بهذا الامتداد

{T_THEME_PATH}/images

الان الشكل النهائى

نلاحظ وجود بعض الفراغات فى الاستايل ولحل هذة المشكلة نقوم بفتح ملف stylesheet.css الموجود بمجلد stylessubsilver2theme
ونقوم بالبحث عن

td {
padding: 2px;

واستبدال القيمة 2px بـ 0px

انتهى الجزء الثالث بحمد الله ولم يتبقى سوؤ جزء بسيط الا وهو تنسيق التصميم وسوف يتم شرحها ان شاء الله[/b]

[درس] طريقة تصميم الاستايلات

–[الجزء الاخير]–
الان ياتى دور تنسيق الاستايل
اولاً يجب علينا نقوم بتحميل برنامج color cop لتحديد الالوان
ورابط التحميل من هنا
http://www.uploadak.com/files/ColorCop.rar

الان نقوم بفتح stylesheet.css الموجود بفولدر stylessubsilver2theme

ثم نتبيع الخطوات التالية

1-) لتغير لون روابط المنتدى نقوم بالبحث عن التالى

a:link {
color: #006597;

نقوم بتغير كود اللون الى اللون المراد وليكن الاسورد #262626

2-) لتغير خلفية الوصف [ساحة , مواضيع , مشاركات , اخر مشاركة] نقوم بالبحث عن

 background-image: url('./images/cellpic3.gif');

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

 background-color: #006699;

واستبدال كود اللون باللون الذى تريدة وليكن الرصاصى #c0c0c0

3-) الان ناتى اللى تغير لون [ساحة , مواضيع , مشاركات , اخر مشاركة]

قم بالبحث عن

th {
color: #FFA34F;

وتغير كود اللون وليكن الابيض#ffffff

4-) الان ناتى الى تغير خلفية الاقسام
نقوم بالبحث عن

 background-image: url('./images/cellpic1.gif');

اذا اردت استبدال الصورة بصورة من تصميمك فقم باستبدال مسمى الصورة
اما اذا كنت تريد ان تجعلها بلون فقم بالغاء السطر وابحث عن

 background-color: #C7D0D7;

وقم باستبدالها باللون المطلوب وليكن الرصاصى #c0c0c0

ولتكملة الخطوة السابقة
قم بالبحث عن

 background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;

فاذا اخترت فى الخطوة السابقة استبدالها بصورة فقم بتكرار نفس الصور
اما اذا اخترت لون فقم بحذف هذا السطر

.catdiv {
height: 28px;
margin: 0;
padding: 0;
border: 0;
background: white url('./images/cellpic2.jpg') repeat-y scroll top left;
}
.rtl .catdiv {
background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

وقم بالبحث عن

.tablebg {
background-color: #c0c0c0;

واضافة نفس اللون السابق

5-) ناتى الان لتغير خلفية صندوق المواضيع والمشاركات واخر مشاركة
نقوم بالبحث عن

.row2 {
background-color: #DCE1E5;

ونقوم بتغير كود اللون الى اللون المراد وليكن الرصاصى الفاتح #ececec

6-) ناتى الان بتغير لون روابط الموضوع بعد الزيارة اى لون رابط الموضوع بعد قرائتة والعودة الية مرة اخرى
نقوم بالبحث عن

a.topictitle:visited {
color: #c0c0c0;

ونقوم بتغير كود اللون الى اللون المراد وليكن الرصاصى الغامق #797979

7-) ناتى الان الى تغير لون الاقسام نقوم بالبحث عن

a.forumlink {
color: #069;

واستبدال كود اللون الى اللون المراد وليكن الاسود #000000

الشكل النهائى
لرؤية الصورة بحجمها الطبيعي

8- ) الان الى خطوة الاخيرة هى تغير اسم الاستايل وتسميتة بالاسم الذى نريدة
نقوم بفتح كل من
mageset.cfg الموجود بفولدر stylessubsilver2imageset
template.cfg الموجود بفولدر stylessubsilver2template
theme.cfg الموجود بفولدر stylessubsilver2theme
style.cfg الموجود بفولدر stylessubsilver2

ونقوم بالبحث عن

name = subsilver2

ونقوم بتغيرها الى اسم الاستايل وليكن gawad فنقوم بكتابتها بهذا الشكل

name = gawad

ثم نقوم بتغير فولدر الاستايل subsilver2 الى اسم الاستايل gawad

والان انتهى التنسيق واصبح لدينا استايل خاص
[/b]

[درس] طريقة تصميم الاستايلات

–[جزء اضافى]–
لوضع صورة فى الهيدر قم بفتح ملفى overall_header
وقم بوضع محتويتاتة فى الـFront Page

انتهى والحمد لله