|
|
|
|
||||||
| دورات تعليم وتصميم الإستايلات قسم يهتم بتقديم دروس حول تصميم وتنسيق قوالب المنتديات المتكاملة Styles، كذلك لمناقشة الأفكار والأساليب الحديثة المتعلقة بالتصميم وطرق العرض. |
|
|
|
LinkBack | أدوات الموضوع | طرق العرض |
08 - 02 - 2009, 15:07
|
||||
|
في المره السابقه نزلنا شرح تصميم مدونة وورد برس  http://www.traidnt.net/vb/showthread...7#post10389527 والان شرح طريقة التقطيع  في هذا الدرس سنشرح طريقة تقطيع التصميم وتركيبه في مدونة ووردبريس ليكون ستايل جاهز للإستخدام بسم الله نبدأ 1/ التقطيع هذا هو التصميم الذي قمنا بتصميمه .jpg) لمشاهدة الستايل حياً نقوماً أولاً بإخفاء طبقات النصوص مثل عنوان الموقع ( عبدالملك الثاري ) وعناوين المقالات … ألخ وذالك عن طريق نافذة الطبقات بالضغط على صورة العين لتختفي  طبعاً لجميع الطبقات النصية وكذالك صورة الـ RSS مثلاً لأننا سنقطع الخلفيه قم بعمل ذالك حتى يصبح التصميم في النهايه ليصبح كالتالي : .jpg) الأن قم بإختيار أداة التقطيع  بعد ذالك قم بتحديد الجزء العلوي في وسط الصفحة , كالتالي : ( ستلاحظ ان الفوتوشوب يساعدك في تسهيل عملية التحديد بإختيار المربع بشكل اتوماتيكي وسلس جداً )  حيث هذه الصوره التي حددنها ستكون صوره مقطوعه في النهايه وتمثل صوره خلفيه للجزء العلوي , ولكن خلف هذه الصوره سيكون هناك خلفيه أخرى وهي الخلفية المتكررة أعلى الستايل لذالك نقص جزء بسيط من هذه الصورة حيث سنجعلها خلفيه متكرره في الأعلى  دائماً في الخلفيات المتكرره يجب ان نراعي الحدود والزخارف والنقشات فمثلاً لدينا في هذه الخلفيه نقشه بسيطه فيجب علينا ان نراعي قطع هذه الصورة بالشكل الصحيح ولتوضيح الصوره انظر للصورة التالية :  اضغط هنا لمشاهدة الصورة كاملة. الأن سنأخذ جزء بسيط من التصميم يمثل خلفية المحتوى للصفحة حيث يحتوي على الحدود اليمنى واليسرى التي ستتمدد وتتكرر إلى أسفل التصميم على حسب طول صفحة الموقع وعلى حسب كثافة المحتوى , حيث سيكون ارتفاع هذه الصوره 1 بكسل فقط والعرض من بداية الحد حتى النهاية كالصورة التالية :  ونحدد بقية الصور كذالك مثل صورة خلفية عنوان القائمة الجانبية  ثم نحدد صورة الزخرفة الخاصة بخلفية عنوان المقالة  يتبع 
|
|
:: عضو نشيط ::
 
  |
 ونفس ما عملنا بالجزء العلوي من التصميم نقوم بقص الخلفية المتكررة أفقياً كالتالي  ليصبح تقطيعنا في الأخير كالتالي  الأن راح نحفظ الصور اللي حددناها راح يقطعها لنا الفوتوشوب , هناك أجزاء من الصور راح يقطعها لنا الفوتوشوب كذالك مثل المربعات المنتشره في التصميم التي لم تحددها , لكن بعد ما نقوم بحفظ جميع الصور المقطعه سنقوم بإختيار الصور التي نريدها ومسح الصور التي لا نريدها بكل بساطه  نكمل الموضوع , اختر File ثم Save For Web Or Devices كما في الصورة التالية  ستظهر لنا نافذة كبيرة , يمكننا عن طريقها تحديد كل صورة تم تقطيعها واختيار الإعدادات المناسبة لها فمثلاً الصور الكبيرة والتي فيه ألوان كثيره وتدرجات كثيره يجب ان تكون ذات صيغة JPG وبجودة 100% اما الصور التي تحتوي على الوان بسيطه من دون تدرجات وصور صغيره نجعلها GIF بعدد ألوان بسيط هذه الخطوه خطوه مهمه جداً في تصميم المواقع تحديد اقل حجم ممكن مع طبعاً الحفاظ على الجودة كما في الصور التالية :     في الأخير نضغظ على Save ستظهر لنا هذه النافذة , ننشأ مجلد جديد يكون اسم مجلد الستايل الذي تبنيه  نفتح المجلد نكتب images ثم نضغظ Save  الان تم تقطيع الستايل نتجه إلى المجلد الذي أنشأناه  نفتحه لنجد صور الستايل مقطعه الان علينا ان نحدد الصور التي لا نريدها ونحذفها لتبقى لدينا فقط الصور التي نريد استخدامها في الستايل والتي حددناها سابقاً في الفوتوشوب  الان علينا ان نأتي بملفات ستايل ووردبريس لكي ننشأ الستايل الخاص بنا وذالك بنسخ مجلد Default داخل wp-content/themes/ يمكنك اخذها من مدونتك السابقه او تحميلها من ووردبريس http://ar.wordpress.org وننقل ملفات الستايل من دون images داخل المجلد الذي انشأناه NiceeeStyle  CSS & XHTML الان نحذف الملف rtl.css داخل المجلد NiceeeStyle لأننا لا نحتاجه حيث سيكون جميع عملنا على الـ CSS في ملف style.css  الأن نفتح ملف style.css بأي برنامج تحرير  ( فقط لكي نعمل إجراءات بسيطه وليس لكتابة الـ CSS ) هذه الإجراءات هي كتابة عنوان الستايل وبيانات تصميم الستايل , أولاً نقوم بحذف جميع أكواد الـ CSS  الأن بما اننا حذف الستايل بالكامل وسنبدأ بعمل تصميمنا الخاص سنقوم بتسمية التصميم بأسمنا هذه المعلومات ستكون موجوده في لوحة تحكم المدونة  الأن نحفظ الملف ونغلقه وننقل مجلدنا NiceeeStyle إلى المدونة داخل مجلد wp-content/themes ثم ننتقل إلى لوحة تحكم المدونة ونختار قسم التصميم من أعلى القائمة ليظهر لنا الستايل الذي قمنا بنقله تم تصغير هذه الصورة. اضغط هنا لمشاهدة الحجم الكامل. أبعاد الصورة الاصلي هو 550*608 و بحجم 38 كيلوبايت..gif) راح نغير صورته في الأخير لكن اضغط على اسمه ستايل نايس .gif) شكله حالياً Blank يعني فاضي بدون اي ستايل اضغط على تفعيل ستايل نايس عشان نفعله ثم اضغط تحرير القالب عشان نبدا نعدل على الـ CSS .gif) راح نجد اول ما تضغط على تحرير القالب ملف style.css مفتوح , وطبعاً فاضي حالياً نبي نعدل على الـ XHTML فنروح لملف أعلى الصفحة .gif) هذي الصورة للتوضيح .gif) في ستايلنا ما نحتاج الـ div اللي بالآي دي headerimg لذالك راح نمسحه , ووننقل الـ div اللي بالآي دي page اسفل الهيدر بحيث راح نستخدمه في خلفية المحتوى كما في الصورة التالية .gif) أحب اوضح لكم إذا فهمت التعامل مع الـ XHTML والـ CSS راح تقدر تصمم اي ستايل في العالم بكل سهوله نكمل شرحنا نروح لملف footer.php الخاص بأسفل الصفحة ونلقحه مثل الصوره التاليه اهم شي لا تنسون تسكيرة الـ div اللي بالآي دي page اللي سويناها في الهيدر وهي أول سطر في هذا الملف .gif) الان نفتح ملف index.php اللي هو الصفحة الرئيسية , ونغير مثل اللي في الصورة , مجرد تغيير اماكن عشان نضبطها في نفس التصميم اللي سويناه مثلاً التعليقات نخليها فوق وبدال بواسطة نكتب المدون مثل ما سوينا في تصميمنا ومثل ما تم التخطيط عليه .gif) بعد تنفيذ ما هو في الصورة السابقه سيصبح الكود كالتالي : .gif) الأن ننتقل إلى ملف الستايل style.css ملف التنسيق المشوار طويل وقد يكون معقد لبعض من لا يعرف الكثير عن CSS يتبع |
|
|
|
:: عضو نشيط ::
|
أولاً نكتب ستايل اول وسم لدينا وهو body كالتالي رمز PHP:
لكن بوجود margin:0px تعني ان المساحة غير موجوده بين اي عنصر وحدود المتصفحbackground: هو الخاصية المتعلقه بالخلفية سواء كان لون او صورة , في حالتنا هذه لون الخلفيه هو الأبيض فلن نكتب اي شي فقط سنضع خلفيه صوره بعنوان images/header_bg.jpg بعد ذالك اضفنا repeat-x هذا معناه ان التكرار أفقي فقط وليس أفقي وعمودي فلذالك ستكون الخلفية بالطول فقط الأن بعد حفظ الملف ستظهر لدينا خلفية علوية بالصورة التي اخترناها نكمل الكود المتعلق بالـ CSS انتهينا من الـ Body ننتقل إلى اللي بعده مثلاً نبي نخلص من الجزء العلوي اللي هو الهيدر نكتب الآي دي الخاص بالهيدر وهو رمز PHP:
رمز PHP:
لماذا وضعنا padding-right ? لكي نضبط مكان عنوان الموقع ويجب علينا وضع الإرتفاع لكي تظهر لنا صورة الخلفية كاملة وذالك بكتابة الـ Height هناك نقطه أخيرة في هذا الوسم وهو margin:0 auto هذا السطر يعني توسيط الوسم في وسط الصفحة, هناك طريقه كتابه اخرى لكن هذه افضلها بحيث انها من المعايير القياسيه المعتمده كتابةً وجميع ما كتبت لكم في اكود هي خصائص سليمه تعمل في الفايرفوكس والإكسبلورر ننتقل إلى الخطوة التالية وقبل ان ننتقل إلى الخطوة التالية أود ان اوضح شيء دائماً في مجال تقطيع وتركيب الستايل يجب عليك ان تنتقل بين كود الـ XHTML و الـ CSS لكي تعرف أسامي الوسوم والآي دي تبعها فمثلاً الجزء العلوي يحتوي على رمز PHP:
بالنسبة لـ h1 هو الوسم الذي يحتوي على عنوان الموقع وبالنسبه لكلاس description هو الوسم الذي يحتوي على النص الذي اسفل عنوان الموقع كجملة او شعار الموقع النصي ننتقل إلى الـ CSS بكتابة الخصائص المتعلقة بوسم الـ h1 و الدسكريبشن رمز PHP:
اول سطر هو وسم h1 الذي داخل #header لماذا وضعنا #header لماذا لم نستخدم h1 مباشرة كالتالي رمز PHP:
margin:0px كتبناها في h1 لان h1 بشكل إفتراضي يحتوي على مسافات كثيره ونحن لا نريد هذه المسافات المعقده فقط نريد المساحه التي نحددها فنكتب padding-top:25px لكي نظبط مكان عنوان الموقع ويكون هناك مسافه بين حدود المتصفح عنوان الموقع قد يسأل شخص ويقول لماذا لم نكتب هذا الكود في داخل header مباشره وليس في h1 فأجيبه وأقول لا بأس بذالك فهناك عدة طرق أهم شي ان نصل إلى المطلوب وبطريقه صحيحة لا تسبب اي مشاكل ننتقل إلى الجزء الثاني من h1 وهو الذي بجانبه الوسم a وهذا يعني الستايل الخاص بعنوان الموقع عندما يكون رابط او وصلة فسنحدد اللون بكتابة color: ثم رمز اللون المطلوب وبعدها الجزء الثالث يوجد الوسم a مع :hover وهذا يعني عند مرور الفأرة على الرابط نفذ هذا الستايل وهو تغيير اللون قليلاً فقط بعد تنفيذ هذا الكود وحفظه سترون بأن النتيجه اصبحت افضل لكن ليست كامله فلدينا مشوار طويل جداً جداً والله يكون بعونكم هناك بعض الستايلات التي تنفذ على جميع الوسوم المحدده في الستايل مثلاً في روابط ووصلات الستايل جميعها لديها خط اسفل النص من ضمنها عنوان الموقع فعندما نريد في جميع صفحات الستايل ان تكون الروابط بدون خط سفلي ننكتب هذا الكود رمز PHP:
هناك خاصيه اخرى نود ان نضيفها لوسم عام وهو وسم الصور img فعندما نضع على الوسم img رابط معين بشكل إفتراضي سيكون هناك حدود كبيره على الرابط وهي غير جميله نسبياً فنزيلها بشكل عام بكتابة الكود التالي رمز PHP:
رمز PHP:
كذا نكون خلصنا من الجزء العلوي بشكل اساسي ننتقل إلى الجزء السفلي رمز PHP:
فبعد كتابة الكود السابق الخاص بالفوتر كذا تكون انتهيت من الفوتر بشكل كامل كتصميم مثل ما احنا عملناه بالفوتوشوب ممكن تكون بالنسبه لك سهله كذا لكن لما تصمم ستايل خاص اخر ياخذ وقت على بال ما تحدد الخصائص اللي تبي تختارها عشان يضبط معك الستايل غير كذا يعتمد الـ CSS على حسب تعقيد التصميم او بساطته الأن تقريباً خلصنا الهيدر بشكل أساسي والفوتر بشكل نهائي ننتقل إلى محتوى الصفحة بداية بالخلفيه الخاصه بها وتوسيطها مثل ما تذكرون احنا نقلنا الـ div اللي له الآي دي page بعد الهيدر وينتهي قبل الفوتر فهو يعتبر الوسم الخاص بمحتوى المدونة فنكتب الكود رمز PHP:
انا قد واجهتني مشاكل غريبه مثلاً ستايل وسم معين ما رضى يشتغل اذا كتبته في مكان معين لكن اذا نقلته إلى مكان آخر في نفس الملف اشتغل ! عموماً نكمل الموضوع الان داخل المحتوى يوجد هنا المقالات والقائمة الجانبية , راح تلاحظ انها صايره تحت بعض واحنا نبيها تكون جمب يعض الطريقه كالتالي الوسم الخاص بالمقالات راح تلاحظ اسمه content في ملف الصفحة الرئيسية فنبدأ فيه بالتالي في ملف التنسيق رمز PHP:
حالياً أضفنا float على content وراح نضيف float على القائمه الجانبيه لكي تصبح المقالات والقائمة الجانبيه جنب بعض والكود الخاص بالقائمة الجانبية كالتالي : رمز PHP:
فمثلاً بعد الـ content وال sidebar نبي نوقف الـ float ونضع هذا الكود بعدهما , وافضل مكان هو في الفوتر بحيث انه قبل ما نسكر الوسم آي دي page نضع كود الـ clear كالتالي رمز PHP:
رمز PHP:
الخاص بعنوان القائمة رمز PHP:
رمز PHP:
رمز PHP:
كذا نكون خلصنا من المقالات برضوا التي في الصفحة الرئيسية الأن لننهي الجزء العلوي فهناك قائمة علوية تحتوي على ( الرئيسية | نبذه | اتصل بنا | سجل الزوار ) اي صفحات تضيفها عن طريق لوحة التحكم يجب علينا اولاً إضافة الوسم الخاص بالقائمة العلوية في الـ XHTML لذالك لنذهب إلى ملف أعلى الصفحة header.php لاحظ الفروقات في وسم header التي سنضيفها هنا في الكود وهي باللون الازرق رمز PHP:
لاحظ الكود المتعلق بعرض الصفحات مكتوب فيه sort_column=menu_order وهذا يعني ان ترتيب عرض الصفحات معتمداً على ترتيب الصفحات من لوحة التحكم , يمكنك ترتيب عرض القائمة حسب آخر تحديث بتاريخ الصفحة كالتالي sort_column=post_date ويمكنك كتابة ‘exclude=17,38′ اي لا تعرض هذه الصفحات في القائمة يمكنك معرفة جميع الأوامر في هذه الدالة عن طريق هذه الصفحة http://codex.wordpress.org/Template_Tags/wp_list_pages فمثلاً كتبنا depth=1 وذالك يعني انه يتم عرض فقط الصفحات الرئيسية وليس الفرعية و title_li= ولا شي لأننا لا نريد عنوان لهذه القائمه من الصفحات الان ستجد وسم الآي دي search قررت فجأه ان اضع صندوق البحث هنا لأنني في التصميم لم اضع له مكان وكان هذا المكان كأنه مخلوق عشانه فقلت فرصه حلوه بعد ما اضفنا الأكواد السابقه في XHTML الخاصه بملف أعلى الصفحة نرجع لملف التنسيق ونكتب الأكواد الخاصة بتنسيق القائمة وصندوق البحث كالتالي : رمز PHP:
في الهيدر باقي شيء واحد فقط وننتهي منه ومن الصفحة الرئيسية بشكل كامل والباقي هو زر الـ RSS نرجع لملف أعلى الصفحة header.php ونضيف الصورة كالتالي ( لاحظ الإضافات بالخط الازرق ) رمز PHP:
رمز PHP:
باقي اشياء بسيطه جداً راح اتركها لكم لأن أولاً وأخيراً التخطيط والتنسيق يمكن عمله بطرق كثيره على حسب جهدكم فيه هذا هو التصميم بعد الإنتهاء ويمكنكم تحميل الستايل كذالك هنا  لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الأزرق أضغط هنا قمت بتعديل بسيط في خلفية التصميم وتجهيز الستايل خاص للبنات باللون الوردي ما اخذ وقت كبير لان كل شي جاهز ( التقطيع والـ CSS ) فقط تغيير الوان بالفوتوشوب وألوان النصوص ليصبح كالتالي  لتحميل ستايل المدونة بعد الإنتهاء منها كامله باللون الوردي أضغط هنا تقبلوا اطيب تحياتي واتمنى ان الدرس يعجبكم وينال الفائدة المرجوة لمشاهدة الستايل حياً تحياتي للجميع المصدر http://www.ar-wp.com/showthread.php?p=39274#post39274 انتظرونـــــي على مدونتـــي DR.MOBD3 الف مبروووووووووووووك عليكم المدونه الله الله بالزين فيها لا مانبي شي يغضب الله  إذا كان الموضوع عاجبك عطنـي  ـ ++تقييم++لاتنسونا من الدعاء |
|
التعديل الأخير كان بواسطة Mr.Misho; 08 - 02 - 2009 الساعة 15:19
|
|
|
|
|
:: عضو نشيط ::
|
جارى التقطيع لى عوده بالاستايل حيا او ميتا
وشكرا ولك احلى +++ |
|
|
|
:: عضو نشيط ::
|
ههههههههههه
ما فهمت اى شئ من هذا الجزء  شوف تطبيقى  |
|
|
|
.:: عضو متألق ::.
  |
صراحه درس اعجبني تم الحفط وهذا ماكنت ابحث عنه بالفعل |
|
|
|
:: عضو نشيط ::
|
تنياتي لكم بالتوفيق |
|
|
|
:: عضو نشيط ::
|
بارك الله فيك وماقصرت الله لا يهينك وقريب ان شاء الله انزل قالب للورد بريس عربت كثير لكن بعد هالدرس ان شاء الله نصمم . |
|
|
|
:: عضو نشيط ::
|
|
|
|
|
.:: عضو متألق ::.
 |
تسلم |
|
|
|
| العلامات المرجعية |
| أدوات الموضوع | |
| طرق العرض | |
|
|
العرض العادي
