كيفية تفطيع واجهة بسيطة باسهل الطرق

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

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

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

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

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

والصورة مقسمة الى قسمين نافدة ستظهر هي الاولى ومنها نختار حفظ
والتانية منها نختار خصائص الحفظ فنختار اسم index.html
وكدي طريقة الحفظ نختار html and images
ادا لم نقم بهده الطريقة فلن ننجع بعملنا لدلك يلزم القليل من التركيز
نحدد مكان حفة فينشئ لدينا صفحة html
ومجلد به الصور كما توضع الصورة التالية


والان نفتح برنامج الفرونت بيج
قبل البدا بالتعديل لابد ان اشير الى نقطة مهمة وهي خلفية الصفحة ان كان التصميم خلفيته مجرد لون معين
فاننا ناخد قيمة اللون ونضعها في خصائص الصفحة كما سيتم شرحه وان كانت كما هو هنا بهده الواجهة
فلابد من من انشاء صورة لخلفية وسنبدا بهده الخطوة اولا
من خلال برنامج الفوتوشوب وباداة rectangular marquee tools
نقوم بتحديد جزء من الخلفية ويستحسن يكون من اعلى الى اسفل الخلفية كما هو الشكل بالصورة

بعد تحديد الخلفية كليك من لوحة المفاتيح على ctrl+C
تم كليك بعد دلك على ctrl+N
فتضهر لنا نافدة بيضاء بنفس مقاس الجزء الدي اخدنا من الخلفية
الان كليك على ctrl+V
فيتم نسخ الخلفية فقم بحفضها بنفس مجلد صور التصميم (image)
ونعطيعها اسم مختلف عن اسم صور التصميم انا سميتها bgr
الان كل الاعدادات انتهينا منها نصل الى مرحلة التعديل ببرنامج الفرونت بيج
من قائدة === //ملف// نختار === //فتح// مع شوية //حماس// ولاشاطر يفهم خخخخخخ
تم نحدد مكان صفحة الاندكس الخاصة بنا
فتظهر لنا الصفحة بها تشوهات فنقوم بسحب الشريط المتقطع الاول كما هو مبين بالصورة

الان نقوم الى تحديد خصائص الصفحة فنتبع الشرح بالصور
كليك بالزر الايمن على المنطقة البيضاء الخالية من التصميم

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

تم


بهدا تكون انتهت اعدادت صفحتك باسهل الطرق وايسرها
وهده الطريقة انصح بها كل من
1/لايجبد لغات برمجة صفحات النت
2/الحصول على صفحة خفيفة مكونة فقط من روابط
3/تجنب تكرار نفس اشكال المواقع العربية
4/تجنب وضع اعلانات بصفحتك
5/اتتميز بفكرة بسيطة وتحفظ نقودك بجيبك

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