[درس] مميز: درس: تصميم واجهة بكامل الصفحة [ملء الشاشة] وتتوافق مع جميع المتصفحات.

محروم.كوم · #1 05-13-2009, 10:40 AM

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

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

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

اضغط هنا لمشاهدة نتائج الدرس كـ مثال

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

بسم الله نبدأ الدرس:

نقوم بفتح عمل جديد على برنامج الفوتوشوب، ولتكن الابعاد:

العرض: 600 بكسل

الارتفاع: 500 بكسل

وذلك لاننا سنعتمد على نقاط التمدد في هذا الدرس.

اليكم الشكل مبسط بعد التصميم والتقطيع:

بعد كذا نصدر الواجهه الى سطح المكتب، او الى المجلد اللذي نرغب بحفظها به:

نلاحظ النتائج معا:

نعيد تسمية الصفحة من msmmy الى index

ثم نحررها بالفرونت بيج:

بعد ذلك..

نقوم بالانتقال الى (تعليمات برمجة) ونحذف الكود كاملا..

....

ومن ثم نعود الى نافذة التصميم مره اخرى:

ندرج جدول:

3× 3

كما في الصورة التالية:

ومن ثم نذهب الى خصائص الجدول كما في الصورة التالية:

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

الان قم بتحميل الجزء الاهم، بالفيديو بالضغط على الايقونة التالية:

نقوم الان بتصميم قائمة بسيطة:

العرض: 200 بكسل

الارتفاع: 400 بكسل

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

بعد تحميلك للجزء السابق، قم بتحميل التكملة له، بالضغط على الايقونة التالية:

الان نقوم بتصميم نموذج بسيط، او اطار بسيط.. لنضع بداخلة مثلا:

كلمة الادارة

مع ملاحظة انك تستطيع مثلا اضافة منافذ الشات، أو روابط لبرامج!

الخ الخ الخ الخ...

الان.. نصمم اطار بالابعاد التالية:

العرض: 400 بكسل [المهم لا يزيد العرض عن 600]

الاتفاع: 300 بكسل [الارتفاع ليس مهماً لاننا سنعتمد على التمدد]

وهذا مثال بسيط على الناتج:

الان حمل الجزء التالي بالفيديو:

لنتعلم طريقة توزيع الصور، ومن ثم ادراجها داخل الجدول، اللذي ادرجناه في منتصف الصفحة.

...

قد يسأل البعض الان ويقول:

كيف يمكنني اخفاء الحدود التي باللون الابيض، على اطراف الصفحه؟

والطريقة..

هي الضغط بالزر الايم للفأرة، ومن ثم الانتقال الى (خصائص الصفحة)

والذهاب الى [خيارات متقدمة] ونضع القيمة [صفر] لهوامش الصفحة!

كما في الصورة التالية:

كذلك لا بد من الانتقال الى اللغة، وتحديد الخيارات التالية:

كما ننصح، باستخدام الخط:

Tahoma

لتفادي مشاكل الترميز مع المتصفحات مثل:

Mozilla Firefox

.........

هكذا انتهينا من الدرس، وتمنياتي ان ينال رضاكم واستحسانكم

وتقبلوا فائق احترامي وتقديري لكم

وكونوا بخير

المصدر:

مميز: درس: تصميم واجهة بكامل الصفحة [ملء الشاشة] وتتوافق مع جميع المتصفحات.

__DEFINE_LIKE_SHARE__

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
اظهار صورة المتصل بكامل الشاشة	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	03-31-2010 04:10 AM
لعبة الدامة بكامل الشاشة	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	01-17-2010 01:00 AM
[ طلب برمجه ] : طلب برجمه مجلة مع تركيب تصميم الخاص عليها ليكن متوافق مع جميع المتصفحات	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	07-09-2009 04:00 PM
[ تعديل تصميم ] : تقطيع ستايلك + تنسيق ccs + توافق مع جميع المتصفحات + وتأطير جميع المتصفحات 50 ري	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	04-30-2009 01:40 AM
كيف تصميم ستايل متوافق مع جميع المتصفحات	محروم.كوم	منتدى أخبار المواقع والمنتديات العربية والأجنبية	0	04-27-2009 07:20 PM