2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق

[loulou ange]

http://www.dzbatna.com/images/icons/iconrote.gif 2 / طھظ‚ط·ظٹط¹ ط§ظ„ط§ط³طھط§ظٹظ„ ط´ط±ط* ظ…طµظˆط± , ظپظٹط¯ظٹظˆ , ط§ظ„ط§ط³ظ‡ظ„ ط¹ظ„ظ‰ ط§ظ„ط§ط·ظ„ط§ظ‚ (http://www.dzbatna.com/t2195265/)



<div align="center">2 / تقطيع الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق




http://upload.dzbatna.net/upfiles/mi372123.png

,
,
,





اليوم يااخوان راح نبدأ بالدرس مفصل الثاني , وهو تقطيع الهيدر header والفوتر والفروم هوم




1 / تصميم الاستايل style شرح طريقة مصور , فيديو , الاسهل على الاطلاق (http://www.dzbatna.com/t2192575/)



http://upload.dzbatna.net/upfiles/mJD72695.png


طيب السؤال هنا : لماذا يتم تقطيع الاستايل style وماتكون صورة وحدة ؟

الجواب ببساطة : لاختلاف احجام الشاشات , فهناك احجام عديده للشاشات

لاهنت يا اخ تركي وضح اكثر , وش الشاشات ترى مافهمت ؟؟

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

حلو يامستر تركي فهمت ايش تقصد بمعنى الشاشات ولكن وش نقطة التمدد دي !!

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

يعني تبي تقولي ان الصورة الـ تقول عنها نقطة التمدد هذه بتوصل الى كامل اي شاشه ؟؟

بالظبط وبيتم ذلك طبعا بالتكويد والتوزيع باننا بنعمل لها تكرار افقي من بداية اليمين الى اقصى اليسار .

طيب لو تسمح ابدا بالدرس مفصل لانه بصراحة شوقتني ..


http://upload.dzbatna.net/upfiles/mJD72695.png



في الدرس مفصل الماضي يااخوان عملنا كروكي للتصميم وكيفية عمل هيدر وفوتر وو , وفي هذا الدرس مفصل سنقدم ونطرح لكم كيفية تقطيع الاستايل style .

طبعا سيتم عمل الدروس شرح طريقة مصور , فيديو . لتتضح الفكرة بشكل كلي .


نفتح التصميم الخاص والـ تم حفظة بصيغة psd بنا والـ تم ارفاقه بالدرس مفصل الماضي .

بعد ذلك يتوجب علينا نظهر المسطرة (Ruler)

لدينا طريقتين :

من الكيبورد نضغط على زر Ctrl + R
او من خلال الضغط على عرض + مسطرة & View + Ruler

كما هو مبين

http://upload.dzbatna.net/upfiles/hOn21231.png




---------------------



بعد ذلك نرى انه تم اظهار مسطره اعلى ويمين التصميم كما بالصورة الموضحة




http://upload.dzbatna.net/upfiles/A7n21333.png





---------------------



يمكننا الان استخدام المسطره في خروج خطوط تحد المنطقه المراد تقطيعها , الصورة متحركه

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




http://upload.dzbatna.net/upfiles/dwe21502.gif







---------------------




الان نقوم بتحديد منطقة الهيدر header (رأس الصفحة)



http://upload.dzbatna.net/upfiles/o3c21563.png





---------------------


نختار الان اداةslice tool


http://upload.dzbatna.net/upfiles/FsT21718.png




---------------------




ونحدد المنطقة التي تم عمل لها حدود مسبقا , وبعد ذلك نضغط بالزر الايمن ونختار Edit slice options



http://upload.dzbatna.net/upfiles/UDQ21919.png





---------------------



ونغير المسمى الخاص بالصورة , مثلا , الصورة اليمنى في منطقة الهيدر header , بهذه الطريقة


http://upload.dzbatna.net/upfiles/xTr21977.png





---------------------



والان نرى بعد الانتهاء من تحديد النقاط الـ وجب تقطيعا , المنطقة العلوية توضح بالاصفر



http://upload.dzbatna.net/upfiles/b4U22042.png



---------------------


والان نعمل بالفوتر نفس ماعملنا بالهيدر header , ولكن نلاحظ ان الفوتر (تذييل الصفحة ) , فقط صورتين , نقطة تمدد + الصورة اليسار


http://upload.dzbatna.net/upfiles/5dT22126.png



---------------------

ليصبح بالشكل التالي

http://upload.dzbatna.net/upfiles/zsF22371.png





---------------------

الان انتهينا من كلا الهيدر header والفوتر , نجي الان لمنطقة الفروم هوم (الاطار)











اول شيء , بنعمل الحدود الخارجية , كما هو مبين


http://upload.dzbatna.net/upfiles/cHy22445.png





---------------------

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

كما مبين

http://upload.dzbatna.net/upfiles/jiv22538.png





---------------------


الان تم عمل الحدود الداخليه والخارجة وشبه انتيهنا , نوضح الان الصور الـ بيتم استخدامها من الفروم هوم

http://upload.dzbatna.net/upfiles/N1u22620.png



||||||||||||||| : الصور الثابتة وتحتوي على اربعة صور يمين , يسار (علوي) يمين , يسار (سفلي)

||||||||||||||| : صور التمدد وتحتوي على اربعة صور ايضا , عامودين (افقي) , عامودين (عمودي)





---------------------


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

http://upload.dzbatna.net/upfiles/5Z722924.png


ولصورة واتضاح اكثر بامكانك متابعة الفيديو




---------------------


الان نجي لطريقة حفظ العمل
من File + save for web & Devices

http://upload.dzbatna.net/upfiles/wMs23201.png







---------------------

تظهر لنا هذه النافذة

http://upload.dzbatna.net/upfiles/WhE23288.png




نعمل الاعدادات كما بالصورة

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

http://upload.dzbatna.net/upfiles/mJD72695.png


ثانيا : الشرح طريقة فيديو (صوت وصورة)

لاتنسى ان تغير الجودة بهذه الطريقه ليظهر بشكل اوضح
http://upload.dzbatna.net/upfiles/2LM75314.gif

,


,
,



المشاهدة والتحميل




http://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png

http://upload.dzbatna.net/upfiles/gMO58738.png
http://upload.dzbatna.net/upfiles/gMO58738.pnghttp://upload.dzbatna.net/upfiles/gMO58738.png











اليوتيوب ~ youtube .................................................. ..هنا (http://www.youtube.com/watch?v=Et11MlGcn5Q)
فور شيرد ~ 4shared .................................................. هنا (http://www.4shared.com/zip/FexCOMj-/Cuting_-_dzbatna.html)

زد شيــــر ~ Z share............................................. ..... ...هنا (http://www2.zshare.ma/uobzj66t283o)

ابـــلـــودز~ Up loades............................................ ...هنا (http://www.uploades.net/do.php?id=1946)

مــخـــزن ~ M5zn.............................................. ................هنا (http://www.m5zn.com/d/?13b7bb3f5b9cab9)
عـرب شير ~ Arab share........................................هنا (http://arabsh.com/files/0e3e454a63f7/cuting-dzbatna-zip.html)
الخليج ~ gulfup .................................................. ..........هنا (http://www.gulfup.com/?oTAFAN)





http://upload.dzbatna.net/upfiles/mJD72695.png


يوجد في المرفقات

ملف وورد يحتوي على الشرح طريقة المصور لمن يريد الاحتفاظ به على جهازه .


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


http://upload.dzbatna.net/upfiles/Qil76159.png








الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif الشرح المصور.zip (http://www.traidnt.net/vb/attachments/674920d1353777102-الشرح-المصور.zip) (2.35 ميقابايت, عدد مرات المشاهدة 294 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©