الجزء الأول - كيف تصمم قالب لموقعك (( الشرح لمجلة جوملا ))

[abohmam]

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

.
الجزء الأول - كيف تصمم قالب لموقعك (( الشرح لمجلة جوملا ))

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

اولا وقبل كل شئ قم بتحميل الادوات التالية اذا لم تكن لديك !!

أداة خاصة باضافة الاكواد لجملا joomlasolutions1.0.mxp (http://www.joomlasolutions.com/joomla_dreamweaver/joomla_dreamweaver_extension_1.0.mxp)

~¤§[ برنامج Photoshop CS-ME بواجهة وقوائم عربية على السيرفر]§¤~ (http://www.abc4web.net/vb/showthread.php?t=352)

أو النسخة الأحدث

العملاق بالنسخة الداعمة للعربية Adobe Photosop CS3 Extended ME (http://www.abc4web.net/vb/showthread.php?t=140)

«®»تصميم المواقع Portable Adobe Dreamweaver CS3 v9«®» (http://www.abc4web.net/vb/showthread.php?t=363)


http://www.abc4web.net/vb/imgcache/901.png (http://www.abc4web.net/vb/uploaded/1/teat.zip) قالب جاهز من مسام

الحين نسمي بالله ونبداء

الجزء هذا خاص ببرنامج الفوتوشوب

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


نحتاج في درسنا هذا الى برنامج الفوتوشوب و الدريم ويفر


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

http://www.abc4web.net/vb/imgcache/902.png

هذا ملف البي اس دي التابع لهذا الدرس (www.msamm.net/download/psd_file/msamm_web.rar)

اذا اعجبك الدرس متعنا بردك لتكمله


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


http://www.abc4web.net/vb/imgcache/903.png

كيف نكون دقيقين يوجد في الفوتوشوب نافذة اسمها INFO

http://www.abc4web.net/vb/imgcache/904.png

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

نقوم بتحديد الاماكن التي نريد عمل تقطيع لها

http://www.abc4web.net/vb/imgcache/905.png

1- للقائمة الرئيسية 2- للقائمة العلوية 3- للهيدر 4-للمحتوى 5- للفوتر


الان نقطع نبداء لرقم 1

http://www.abc4web.net/vb/imgcache/906.png

مهم جدا تطابق التقطيع لكي لا يوجد فرغات

نكمل التقطيع

http://www.abc4web.net/vb/imgcache/907.png

الان قمت بتقطيع العمل كامل وسوف اشرح ما تم

http://www.abc4web.net/vb/imgcache/908.png

لاحظ الاسهم الان بالاحمر هو ما قمنا بتقطيعة

http://www.abc4web.net/vb/imgcache/909.png

المعلم عليها بقلم رصاص هي المهمه جدا فيجب عليك الدقة بالتقطيع

http://www.abc4web.net/vb/imgcache/910.png

هذه الاماكن سوف تعمل عمل الامتداد للصفحة


الان نذهب الى قائمة File ثم نختار Save For Web

http://www.abc4web.net/vb/imgcache/911.png

نضغط على Save ستفتح نافذة للحفظ

http://www.abc4web.net/vb/imgcache/912.png

نذهب الى Setting ونختار Other

http://www.abc4web.net/vb/imgcache/913.png

ثم نختار

http://www.abc4web.net/vb/imgcache/914.png

بعد الاختيار نذهب الى

http://www.abc4web.net/vb/imgcache/915.png

هنا اذا كان التصميم لجملا اكتب في المستطيل ما يلي

Templates/msamm_com_2/images

هذا مسار حفظ الصور في القالب

msamm_com_2 هذا يتغير حسب التصميم عنوان القالب

http://www.abc4web.net/vb/imgcache/916.png

ثم تضغط على Ok

نرجع للصفحة السابقة

ونكتب index

http://www.abc4web.net/vb/imgcache/917.png

ونحفظ


سيتم الحفظ ولاحظ الصور ومسارها

http://www.abc4web.net/vb/imgcache/918.png

الان صفحة الـ Index على المتصفح

http://www.abc4web.net/vb/imgcache/919.png

الى هذه المرحلة نكون اتممنا عملنا في الفوتوشوب و صنعنا صفحة انترنت

يتبع ان شاء الله.
.
نقـ(عن موقع مسام جزاه الله خيرا)ـــلا
أبو هــــMـــام
.