واجهة بالفوتوشوب وتوزيعها في الفرونت بيج ...

[°·.·° KUWAITY ¤ M5RBHA °·.·°]

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


درس تقطيع واجهة بالفوتوشوب ومن ثم وضع الارتبطات التشعبية بالفرونت بيج

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

لنبدأ في الدرس :-

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

عن طريق برنامج الفوتوشوب انظر الصورة :-:icon30:




هذه الواجهة هي التي أريد أن أقطعها الى أجزاء وتركيبها على الفرونت بيج ومن ثم وضع الارتباطات:nosweat:

الان من صندوق الأدوات أختار أداة السكين للقطع كما في الصورة :-

ثم اعمل شكل التقطيع الذي تريده وقم بتقطيع الصورة الى شرائح كما في الصورة بالأسفل :-

وذلك بالضغط واستمرار الضغط وعمل القطعة التي تريدها استمر بالتقطيع الى أجزاء كما في الصور :-


واستمر في عمل المربعات حتى تصل الى النتيجة النهائية كالتالي :-

الان انتهينا من التقطيع بقي علينا حفظه وتحويله الى قطع اتبع الاتي :-

اذهب الى ( ملف ثم حفظ للنسيج العالمي)

الان نختار نوع الصورة وجودتها كما في الأعلى ثم انختار قوة الجودة كما في الصورة بالأسفل :-

ثم نكتب في مربع الجودة الرقم (100)

ثم نضغط موافق للحفظ ونختار كما في الصورة :-

ونختار النوع كما في العلى (هايبر تكست وصور)

ثم نسوي حفظ

راح ينتج لنا ملفين الأول صفحة انترنت والثاني ملف (images)

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

ثم ندخل برنامج الفرونت بيج ونعمل صفحة جديدة فارغة ثم نحفظها باسم index

ونحفظها في المجلد الذي يوجد به مجلد (images)

يعني راح يكون الناتج ملفين كما في الصورة :-

الان قم بعمل تحرير لصفحة (index) بالفرونت بيج

الان بقي علينا ترتيب الصور في الفرونت بيج واعطاؤها الروابط

الان أنت بداخل الفرونت بيج قم بعمل جدول كما في الصور :-

سيظهر لنا جدول الان نضغط على الجدول بزر الماوس الأيمن ثم نختار خصائص الجدول كما في الصورة :-

ثم نضع الخصائص كما في الصورة :-

الان نقوم بادراج الصور في الجداول كما في الصورة التالية :-


يعني في المربع رقم (1) نقوم بادراج الصورة رقم واحد وفي مربع رقم (2) ندرج الثانية وهكذا ...

ملاحظة : الصورة رقم (5) لاتقوموا بادراجها وانما اتركبوا المربع الخاص بها فارغا .

وراح يظهر لنا الناتج التالي :-

الان راح يظهر لنا التصميم تمام ما عدا الصورة رقم (5) سيظهر لنا فيها مربع أبيض فارغ

الان كل اللي عليك انك تفتح برنامج الفوتوشوب مرة أخرى وتقوم بفتح الصورة رقم (5)

ثم نذهب الى قائمة صورة ثم نختار حجم الصورة

الان سيظهر لك أبعاد الصورة ما يهمنا هو العرض والطول احفظ رقم العرض ورقم الطول

ثم اذهب الى برنامج فرونت بيج واضغط بزر الماوس الأيمن على الخلية رقم (5) ثم

اختار (خصائص الخلية)


ضع علامة صح في مربع العرض واختار البكس وكذلك في الطول

وضع في مربع العرض (عرض الصورة رقم خمسة)

وضع في مربع الطول (طول الصورة رقم خمسة)

ثم ضع علامة صح في خانة استخدام صورة خلفية واختار استعراض ثم اختار الصورة رقم خمسة .

الان انتهينا وراح يكتمل التصميم والحمد لله

الان بقي علينا وضع الروابط اتبع الاتي :-

حدد الصورة التي يوجد من ضمنها الأزرار وذلك بالضغط عليها ضغطة واحدة

الان سيظهر لك شريط أدوات الصور الان اختار أداة التحديد من شريط الصور وحدد الازرار كما في الصورة :-

ثم حدد الزر لوضع الارتباط التشعبي كما في الصورة :-


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

أن يفتحها بمجرد الضغط على الزر

ثم طبق نفس العملية في جميع الأزرار




منقوووول لعم الفائده

[::الأدهمـ::]

[align=center]ربي يعطيك الف عافية يارب

وتسلم على المجهود الرائع

ولاتحرمنا من جديدك

تقبل تحيات اخوك القيصر[/align]

[جرح الزمن]

[align=center]الله يعطيك العافية اخوي


جهد رائع منك


دمت بحفظ الرحمن[/align]