عذب القوافي
09-07-08, 04:38 AM
السلام عليكم ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
درس بسيط لكل مبتدئ في التعامل مع الهيدر وطريقة تقطيعه مع محاكات التمدد
علما بان درسنا لن يختلف عن دروس بدون تمدد الا في بعض الخطوات الهامه واماكن التوزيع والتقطيع
نبدأ الدرس
العمل سيكون على استايل ظناني لما يحتويه من مثاليه في التمدد الوسطي
صوره للبانر قبل التقطيع واماكن اختيار التقطيع لمحاكات التمدد
إضغط على الصوره لمشاهدتها بالحجم الطبيعي
http://www.3deeel.com/drs/drs4/drs4-01.jpg
سيتم التعامل في الدرس حرفيا لمستوى التقطيع لعدد خمس صور هي تاتج تقطيع البانر اعلاه
الخطوه الاولى
افتح برنامج الفرونت بيج وهنا نتعامل مع البرنامج الاكثر شعبيه فرونت بيج 2003
امسح جميع الاكواد التي بداخل الصفحه عدا السطر الاول كما هو مبين لك بالصوره التاليه الشكل رقم 1
شكل 1
http://www.3deeel.com/drs/drs4/drs4-03.jpg
الخطوه الثانيه
اختيار الجداول الرئيسيه لمحاكات التمدد
اضغط من الاسفل كما هو موضح بالشكل 2 المرحله الاولى (1) وبعدها انتقل للمرحله رقم (2) وأختر عدد ثلاثة جداول للمرحله (3) كما هو موضح بالتفصيل بالصوره التاليه
شكل 2
http://www.3deeel.com/drs/drs4/drs4-04.jpg
الخطوه الثالثه
بعد اختيار عدد الجداول المراد العمل عليها
ادخال الخصائص للجدول حتى يتناسب التصميم مع المستعرضات بإخفاء الحواف كما تشير اليه الصوره التاليه (شكل 3) لتصبح الخلايا ذات خطوط وهميه
شكل 3
http://www.3deeel.com/drs/drs4/drs4-05.jpg
الخطوه الرابعه
اجعل جميع الخيارات كما تشير اليها الاسهم في الصوره التاليه (شكل 4) مع مراعات جميع الخيارات لتطابق الصوره
شكل 4
http://www.3deeel.com/drs/drs4/drs4-06.jpg
الخطوه الخامسه
استدعاء الصور
بعد تنفيذ الخطوه السابقه الرابعه ستجد الجدول مقسم الى 3 خلايا قم بالضغط على الخليه التي باليسار والمشار اليها برقم (1) اولا وتابع العمل حرفياً كما هو موضح بالشكل 5 من العملية الاولى وحتى الثالثه
شكل 5
http://www.3deeel.com/drs/drs4/drs4-07.jpg
الخطوه السادسه
استدعاء الصوره الخاصه بنقطة التمدد
في شروحات سابقه اشرنا لاهمية هذه النقطه والان سنجد قيمة مراعات نقطية التمدد تابع الشرح في الشكل 6 وستجد طريقة الحاجه لعمل نقطة تمدد لجميع التصاميم ومنفذ استدعاء صورة التمدد بالشكل 7 والذي يحتوي على جميع خواص الخليه اتركها افتراضيه
شكل 6
http://www.3deeel.com/drs/drs4/drs4-08.jpg
شكل 7
http://www.3deeel.com/drs/drs4/drs4-09.jpg
صورة التمدد المراد استخدامها هنا هي بالطبع الاصغر بالصور شكل 8 وعادة ً تكون بهذا الحجم لترك باقي التصميم لعمل المصمم اختر حفظ بعد الضغط على الصوره المطلوبه
شكل 8
http://www.3deeel.com/drs/drs4/drs4-10.jpg
الخطوه السابعه
هي خطوه مهمه جدا لسحب التصميم وترويضه لكافة احجام المتصفحات بحيث يقبل مستعرض الشاشه من حجم 800 وما فوق واعتقد الكثير يستخدم حجم 1024 وهو الافضل والمثالي
عليك متابعة الشرح المصور شكل 9 بدقه من المرحله الاولى وحتى الثانيه باستخدام المؤشر وسحب الخط الوهمي للنهايه من اليمين واليسار ليصبح التصميم جاهزا للتمدد
شكل 9
http://www.3deeel.com/drs/drs4/drs4-11.jpg
الخطوه الثامنه
تقسيم خلايا الجدول لاستقبال باقي الصور
طبعا الحين انتهينا من التمدد والارضيه باقي نركب الصور على الهيدر ويجب ان نستحدث خلايا داخليه لنوزع الصور عليها شكل 10 وتأخذ الحجم الافتراضي لها بأستخدام المؤشر كليك يمين على الجدول وتابه الصوره التاليه مع مراعات عدد الخلايا المختاره ويجب ان تناسب عدد الصور الباقيه
شكل 10
http://www.3deeel.com/drs/drs4/drs4-12.jpg
يجب ان نلتزم بالخطوه شكل 11 حرفيا بطريقة الضغط بالمؤشر على الخليه واستخدام التنسيق قبل استدعاء الصور حتى تأخذ الصوره الطرف المناسب لها وهذه العمليه اسهل من طريقه اخرى طويلة الشرح ويجب ان ننسق قبل استدعاء الصوره في الخليه المناسبه
شكل 11
http://www.3deeel.com/drs/drs4/drs4-13.jpg
الخطوه التاسعه
تغيير مسار روابط صور الاستايل
كل صوره يجب ان يكون لديها مسار فما تم تركيبه في الدرس مسار الصوره شكل 12 مستمد منه وعليك ان تقوم بتغيير مسار الصوره الى المسار المناسب للتصميم
شكل 12
http://www.3deeel.com/drs/drs4/drs4-14.jpg
اتمنى انني وفقت في الشرح لطريقة تقطيع الهيدر المتمدد العادي مع توضيح استخدام هذا التقطيع بواسطة الفرونت بيج وارجو ان يستمر التعامل مع هذا البرنامج لانه بداية كل مصمم او مبرمج
عند النقل يرجى ذكر المصدر
بالتوفيق
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
درس بسيط لكل مبتدئ في التعامل مع الهيدر وطريقة تقطيعه مع محاكات التمدد
علما بان درسنا لن يختلف عن دروس بدون تمدد الا في بعض الخطوات الهامه واماكن التوزيع والتقطيع
نبدأ الدرس
العمل سيكون على استايل ظناني لما يحتويه من مثاليه في التمدد الوسطي
صوره للبانر قبل التقطيع واماكن اختيار التقطيع لمحاكات التمدد
إضغط على الصوره لمشاهدتها بالحجم الطبيعي
http://www.3deeel.com/drs/drs4/drs4-01.jpg
سيتم التعامل في الدرس حرفيا لمستوى التقطيع لعدد خمس صور هي تاتج تقطيع البانر اعلاه
الخطوه الاولى
افتح برنامج الفرونت بيج وهنا نتعامل مع البرنامج الاكثر شعبيه فرونت بيج 2003
امسح جميع الاكواد التي بداخل الصفحه عدا السطر الاول كما هو مبين لك بالصوره التاليه الشكل رقم 1
شكل 1
http://www.3deeel.com/drs/drs4/drs4-03.jpg
الخطوه الثانيه
اختيار الجداول الرئيسيه لمحاكات التمدد
اضغط من الاسفل كما هو موضح بالشكل 2 المرحله الاولى (1) وبعدها انتقل للمرحله رقم (2) وأختر عدد ثلاثة جداول للمرحله (3) كما هو موضح بالتفصيل بالصوره التاليه
شكل 2
http://www.3deeel.com/drs/drs4/drs4-04.jpg
الخطوه الثالثه
بعد اختيار عدد الجداول المراد العمل عليها
ادخال الخصائص للجدول حتى يتناسب التصميم مع المستعرضات بإخفاء الحواف كما تشير اليه الصوره التاليه (شكل 3) لتصبح الخلايا ذات خطوط وهميه
شكل 3
http://www.3deeel.com/drs/drs4/drs4-05.jpg
الخطوه الرابعه
اجعل جميع الخيارات كما تشير اليها الاسهم في الصوره التاليه (شكل 4) مع مراعات جميع الخيارات لتطابق الصوره
شكل 4
http://www.3deeel.com/drs/drs4/drs4-06.jpg
الخطوه الخامسه
استدعاء الصور
بعد تنفيذ الخطوه السابقه الرابعه ستجد الجدول مقسم الى 3 خلايا قم بالضغط على الخليه التي باليسار والمشار اليها برقم (1) اولا وتابع العمل حرفياً كما هو موضح بالشكل 5 من العملية الاولى وحتى الثالثه
شكل 5
http://www.3deeel.com/drs/drs4/drs4-07.jpg
الخطوه السادسه
استدعاء الصوره الخاصه بنقطة التمدد
في شروحات سابقه اشرنا لاهمية هذه النقطه والان سنجد قيمة مراعات نقطية التمدد تابع الشرح في الشكل 6 وستجد طريقة الحاجه لعمل نقطة تمدد لجميع التصاميم ومنفذ استدعاء صورة التمدد بالشكل 7 والذي يحتوي على جميع خواص الخليه اتركها افتراضيه
شكل 6
http://www.3deeel.com/drs/drs4/drs4-08.jpg
شكل 7
http://www.3deeel.com/drs/drs4/drs4-09.jpg
صورة التمدد المراد استخدامها هنا هي بالطبع الاصغر بالصور شكل 8 وعادة ً تكون بهذا الحجم لترك باقي التصميم لعمل المصمم اختر حفظ بعد الضغط على الصوره المطلوبه
شكل 8
http://www.3deeel.com/drs/drs4/drs4-10.jpg
الخطوه السابعه
هي خطوه مهمه جدا لسحب التصميم وترويضه لكافة احجام المتصفحات بحيث يقبل مستعرض الشاشه من حجم 800 وما فوق واعتقد الكثير يستخدم حجم 1024 وهو الافضل والمثالي
عليك متابعة الشرح المصور شكل 9 بدقه من المرحله الاولى وحتى الثانيه باستخدام المؤشر وسحب الخط الوهمي للنهايه من اليمين واليسار ليصبح التصميم جاهزا للتمدد
شكل 9
http://www.3deeel.com/drs/drs4/drs4-11.jpg
الخطوه الثامنه
تقسيم خلايا الجدول لاستقبال باقي الصور
طبعا الحين انتهينا من التمدد والارضيه باقي نركب الصور على الهيدر ويجب ان نستحدث خلايا داخليه لنوزع الصور عليها شكل 10 وتأخذ الحجم الافتراضي لها بأستخدام المؤشر كليك يمين على الجدول وتابه الصوره التاليه مع مراعات عدد الخلايا المختاره ويجب ان تناسب عدد الصور الباقيه
شكل 10
http://www.3deeel.com/drs/drs4/drs4-12.jpg
يجب ان نلتزم بالخطوه شكل 11 حرفيا بطريقة الضغط بالمؤشر على الخليه واستخدام التنسيق قبل استدعاء الصور حتى تأخذ الصوره الطرف المناسب لها وهذه العمليه اسهل من طريقه اخرى طويلة الشرح ويجب ان ننسق قبل استدعاء الصوره في الخليه المناسبه
شكل 11
http://www.3deeel.com/drs/drs4/drs4-13.jpg
الخطوه التاسعه
تغيير مسار روابط صور الاستايل
كل صوره يجب ان يكون لديها مسار فما تم تركيبه في الدرس مسار الصوره شكل 12 مستمد منه وعليك ان تقوم بتغيير مسار الصوره الى المسار المناسب للتصميم
شكل 12
http://www.3deeel.com/drs/drs4/drs4-14.jpg
اتمنى انني وفقت في الشرح لطريقة تقطيع الهيدر المتمدد العادي مع توضيح استخدام هذا التقطيع بواسطة الفرونت بيج وارجو ان يستمر التعامل مع هذا البرنامج لانه بداية كل مصمم او مبرمج
عند النقل يرجى ذكر المصدر
بالتوفيق