الدرس الثاني من تصميم المدونه (التقطيع وتصديرها للمدنه ) ^_^

[فارس قطر]

سلام عليكم

في المره السابقه نزلنا شرح تصميم مدونة وورد برس:bleh:
http://www.traidnt.net/vb/showthread...7#post10389527 (http://www.traidnt.net/vb/showthread.php?p=10389527#post10389527)

والان شرح طريقة التقطيع :icon31:


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

بسم الله نبدأ

1/ التقطيع

هذا هو التصميم الذي قمنا بتصميمه

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/1(1).jpg

لمشاهدة الستايل حياً (http://www.althari.com/wordpress)

نقوماً أولاً بإخفاء طبقات النصوص مثل عنوان الموقع ( عبدالملك الثاري ) وعناوين المقالات … ألخ

وذالك عن طريق نافذة الطبقات بالضغط على صورة العين لتختفي

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/1a.gif

طبعاً لجميع الطبقات النصية وكذالك صورة الـ RSS مثلاً لأننا سنقطع الخلفيه

قم بعمل ذالك حتى يصبح التصميم في النهايه ليصبح كالتالي :

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/2(4).jpg

الأن قم بإختيار أداة التقطيع

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/3.gif

بعد ذالك قم بتحديد الجزء العلوي في وسط الصفحة , كالتالي : ( ستلاحظ ان الفوتوشوب يساعدك في تسهيل عملية التحديد بإختيار المربع بشكل اتوماتيكي وسلس جداً )

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/4.gif

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

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/5.gif

دائماً في الخلفيات المتكرره يجب ان نراعي الحدود والزخارف والنقشات فمثلاً لدينا في هذه الخلفيه نقشه بسيطه فيجب علينا ان نراعي قطع هذه الصورة بالشكل الصحيح ولتوضيح الصوره انظر للصورة التالية :

http://www.ar-wp.com/images/statusicon/wol_error.gifاضغط هنا لمشاهدة الصورة كاملة.http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/6.gif

الأن سنأخذ جزء بسيط من التصميم يمثل خلفية المحتوى للصفحة حيث يحتوي على الحدود اليمنى واليسرى التي ستتمدد وتتكرر إلى أسفل التصميم على حسب طول صفحة الموقع وعلى حسب كثافة المحتوى , حيث سيكون ارتفاع هذه الصوره 1 بكسل فقط والعرض من بداية الحد حتى النهاية كالصورة التالية :

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/7.gif

ونحدد بقية الصور كذالك مثل صورة خلفية عنوان القائمة الجانبية

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/8.gif

ثم نحدد صورة الزخرفة الخاصة بخلفية عنوان المقالة

http://www.tech-wd.com/wd/wp-كلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعةكلمة ممنوعة/uploads/9.gif


يتبع:icon30: