الويب العربي - شرح تقطيع وتركيب التصميم متمدد بطريقة سهله جدا للمبتدين (الجزء الاول) !!

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

اقدم لم لكم
شرح تقطيع وتركيب التصميم على الاستايلات

وان شاء الله من خلال الشرح راح تتضح لكم فكره بشكل سليم جدا

طبعنا درسنا هذا بيعتمد على برنامج غير (فوتوشب , فرنت بيج)

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

نقول اول شي بسم الله وتوكلنا على الله

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

افتح التصميم على برنامج فايروركس سوى كان PSD من فوتوشب او كان تصميم من نفس برنامج فايروركس

الحين نبدء بالهيدر :

الحين نروح الى الادوات ونختار اداة Slice tool من اداوات Web
صورة توضيحيه:

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

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

الحين مثل مو موضح تمسك الطبقة وتنزلها تحت الى مكان محدد عليه سهم ليتم تكرير الطبقة

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

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

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

نحدد مكان الان بشكل هذا

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

نكملها

نورح الى الاعمود الاول ونحدد بنفس مقاس حق الهيدر

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

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

فقط لا تروح الى الطبقات كلك يمين وتكرر لها بشكل هذا

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

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

الحين اقول لك مبروك تم تحديد اماكن التقطيع بشكل صحيح ورائع

كيفيت اخرجها من برنامج عندك 3 طرق اما تصدير مباشرة من فايروركس الى دريم ويفر من خلال:

او من قائمة File>>Export

راح يظهر لكم مربع وفيه خيارات

انا فكيت لك نوع التصجير وحدد لكم على انه يكون صور

يمكنكم ايضا اختيار وضع HTML and Images
يعني ان برنامج راح يصدر لك الصور مدموجة مع ملف HTML ويكون الوضعها بشكل التالي:

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

Images/im_yousef.jpg

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

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