مـنـتـديـات إسـتـضـافـة أحـبـاب الـمـغـرب.كـووم
اسم العضوكلمة المرور
التسجيل
   
 


-> قسم تصميم المواقع

2010/3/13 18:45 دورة تصميم الواجه لموقعك مقدمة من احباب المغرب كووم


ابو الخير
المشاركات: 202
المواقع:
الحلقة الأولى .. تصميم هيكل الواجهة + زخارف للواجهة






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

أهلا بكم إخواني الأعزاء في أول حلقة من حلقات تصميم واجهة موقع كاملة إن شاء الله منذ البداية خطوة بخطوة و حتى النهاية

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


::+: تصميم هيكل الواجهة :+::

افتح الفوتوشوب على المقاسات التالية :

Width العرض = 779 بكسل
Height الطول = 400 بكسل

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




و بعدها قم بإنشاء Layer (طبقة) جديدة بالضغط على Ctrl + Shift + N و من ثم Ok .. و من ثم قم باختيار أداة التحديد كما في الصورة و تأكد أنك على اللير الجديد في منطقة الطبقات (الليرات) :




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




الآن و بعد رسم التحديد قم بفتح قائمة Select و من ثم Modify ثم اختر Contract و ضع القيمة 9 و اضغط Ok و سيتم تصغير التحديد و ترك فراغ بحجم أكبر بين التحديد و حواف المنطقة ... الآن و من نفس قائمة Select ثم Modify اختر Smooth و ضع القيمة 4 و اضغط Ok .. الآن حواف التحديد أصبحت غير حادة و هذا التحديد المطلوب ... و الآن من قائمة Select اختر Inverse و أهم شي قبل هالخطوات كلها اللي سويناها من قائمة Select لازم تتأكد إنك مختار أداة التحديد و أنك على اللير اللي أنشأته .. الآن قم باختيار أداة التعبئة كما في الصورة :




الآن قم بتعبئة التحديد اللي سويناه و لا تضغط على أي منطقة و إنما اضغط بداخل التحديد المستطيل و قبل هذا عليك أن تختار لون يكون فاتح مثلا أنا اخترت لون وردي فاتح جدا و كود تبعه هو : FFD9D9 و إذا ما عرفت من وين تختار لون فالطريقة هي إنك تضغط على مربع الألوان الأمامي الموجود مع شريط الأداوات و اختيار لون يناسبك و الفاتح أفضل و في آخر التصميم بتعرف ليش اللون الفاتح بكون افضل و هذي صورة توضح لك مربع الألوان و الصورة اللي بعدها بتوضح لك مكان تعبئة اللون :

* صورة مربع الألوان :




1- اللون الأمامي اللي راح نستخدمه
2- اللون الخلفي

* صورة مكان تعبئة التحديد :




الآن و بعد تعبئة التحديد اضغط Ctrl + D من لوحة المفاتيح لإلغاء التحديد ... بعد ذلك اضغط على اللير (الطبقة) مرتين و لكن لا تضغط على اسم الطبقة و إنما في المكان الفارغ لأنك لو قمت بالضغط مرتين على اسمها فهذا لتغيير اسم الطبقة و ممكن يفيدك عشان تميز كل طبقة عن الأخرى و إنما اللي محتاجينه هو عمل تأثيرات على اللي سويناه لذلك اضغط مرتين على المربع الموجود بجانب اسم الطبقة و هو مربع صغير كما في الصورة :




الآن ستخرج لك نافذة لإضافة خصائص للإطار اللي سويناه و كل ما عليك هو اتباع خاصية خاصية كما في الصور و كل صورة قم باتباع ما فيها من قيم و خصائص و كل خاصية نريدها من الخصائص الموجودة بالنافذة على اليسار نضغط على اسمها و سيتم وضع علامة صح عليها و اختيارها و نقوم بعمل الخصائص كما في الصور الموضحة لك الآن :

أولاً : اختيار خاصية Outer Glow كما في الصورة :




ثانياً : اختيار خاصية Inner Glow كما في الصورة :




ثالثاً : اختيار خاصية Stroke كما في الصورة :




الآن نقوم بالضغط من منطقة الطبقات على طبقة الخلفية اللي اسمها Background و نختار أداة التعبئة و نختار لنا لون فاتح للخلفية أو اللي تحبه إنت أما عن نفسي فاخترت لون فاتح و نضغط على منطقة العمل لتعبئة الخلفية باللون اللي اخترناه و أنا اخترت اللون : FFF7F7 .. الآن أصبح عندنا خلفية و إطار و ما بقي علينا إلى بعض الحركات اللي بنسويها الآن ...... فاصل و نعود من جديد << كمل بدون كلام فاضي .... الآن نقوم باختيار أداة التحديد مرة أخرى و ننشئ طبقة جديدة أيضا و هالكلام عارفين كيف نسويه و قبل كل شيء نخلي طبقة الإطار اللي سويناه أول طبقة فوق في منطقة الطبقات يعني الآن أنشأنا إطار ممكن يكون فوقها و لازم نمسكها و نرفعها فوق و أهم شي لآخر العمل راح تبقى هذا الطبقة فوق و إن شاء الله بنذكركم كل شوي إنكم ترفعوها فوق ... بأداة التحديد نرسم مستطيل أفقي و مساحته صغيرة كما في الشكل :




الآن نقوم بتعبئة المستطيل بنفس اللون اللي عبأنا فيه الإطار و هو اللون الفاتح FFD9D9 و من ثم نقوم بنسخ خصائص طبقة الإطار عن طريق الضغط بزر الماوس الأيمن على طبقة الإطار و اختيار Copy Layer Style و من ثم نقوم بالضغط بزر الماوس الأيمن على طبقة المستطيل اللي سويناه جديد و اختيار Paste Layer Style و الآن أصبح عندنا مستطيل و بانر فارغ ... نقوم الآن و بالتأكد أننا على الطبقة الخاصة بالمستطيل نضغط Ctrl + J لتكرار طبقة المستطيل و نقوم بإنزالها تحت طبقة المتسطيل الأول الأصليه بسحبها أسفل منه و من ثم من أسهم الكيبورد نقوم بإنزال المستطيل المنسوخ بعض الشيء و لكن بعد اختيار السهم من الأدوات و هو السهم الأساسي الموجود بجانب أداة التحديد و هذا الشكل بكون عندنا :




الآن أصبح عندنا هذا الشكل :




الآن أصبح علينا صنع بعض الزخارف لإضافتها للتصميم و اللي سويناه قبل هذا فقط ما هو إلا هيكل بدائي للواجهة <<< لا يا شيخ كل هذا و بالأخير بدائي !! ... يجب عليك التأكد من أن طبقة الإطار هي الطبقة الأولى في الطبقات يعني تكون فوق كل الطبقات ....

::+: تصميم زخارف للواجهة :+::

الآن نقوم بتصميم بعض الزخارف لإضافة لمسات جميلة للواجهة و كل ما علينا هو اختيار أداة التحديد و إنشاء لير (طبقة) جديد و يكون تحت جميع الليرات (الطبقات) و فوق طبقة الخلفية يعني يكون الثاني و من ثم نرسم في وسط الواجهة أو أي مكان من الواجهة مستطيل صغير و محتواه يكون كبير نوعا ما كما في الشكل :





و من ثم بعد التأكد أننا على طبقة المستطيل الجديدة اللي أنشأناها و أننا مختارين أداة التحديد نضغط على المستطيل اللي رسمناه كلك يمين بزر الماوس الأيمن و نختار Transform Selection و من ثم سوف يتم تحديد المستطيل و قم بإعادة الضغط أيضا كلك يمين و اختر الأمر Skew و من ثم من الزاوية اليمنى السفلى للمستطيل نسحب بالماوس لليمين يعني نمسك الزاوية و نسحب لليمين شوي أو شويتين و من الزاوية اليسرى السفلى نسحب لليسار شوي أو شويتين أيضا و أكيد وصلتكم الفكرة اللي بدنا نوصل لها و بعد ما نسوي هالخطوات نضغط على زر علامة الصح الموجود في الفوتوشوب في أقصى اليمين في الزاوية العلينا اليمنى كما في الشكل :





و نستطيع الضغط على علامة الخطأ أو علامة المنع اللي تتسمى هذي لإلغاء اللي سويناه إذا طلع عندنا شي خطأ ... الآن أصبح عندنا مستطيع بشكل جميل و هذا ما يسمى بالزخارف و الأشكال اللي تضيف لمسات للواجهة و الآن هذا الشكل اللي سويناه نقوم بتعبئته باللون اللي نريده و أنا عبأته باللون الفاتح اللي عبأنا فيه الإطار في أول العمل و أضفت له بعض الخصائص مثل التدرج و كيفية إضافة التدرج كالتالي :
نقوم باختيار أداة التدرج كما في الصورة :





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





و من ثم بتطلع لك نافذة لاختيار ألوان التدرج و عمل تدرج على كيفك و أنا ما راح أقول لك و أحدد لك ألوان أو شيء بس حبيت أقلك اتبع ما في الصورة لمعرفة كيفية عمل تدرج و إضافة ألوان على كيفك :





الآن بعد ما سوينا التدرج و اخترنا الألوان نضغط Ok و نعمل تدرج للمستطيل من فوق لتحت يعني بزر الماوس الأيمن نرسم المستطيل عموديا من فوق لتحت و على حجم الشكل و تستطيع الضغط على زر Shift و ترسم من فوق لتحت عشان يطلع معك تدرج مستقيم من فوق لتحت و من ثم نضغط Ctrl + D لإلغاء التحديد و سيكون الشكل كما في الصورة :





الآن نقوم بالضغط مرتين على طبقة الشكل لإضافة بعض الخصائص له و عرفنا كيفية الضغط مرتين و إضافة خصائص و كل ما علينا هو نختار اللي يعجبنا من الخصائص و إضافتها للشكل و أنا أضفت له خصائص مثل Inner Glow و Outer Glow و Stroke و هي أفضل خصائص تعجبني في إضافة اللمسات للتصاميم ... و المهم بدون كثرة كلام نقوم باختيار السهم اللي عرفنا الموجود بجانب أداة التحديد و نحرك الشكل لتحت و نضعه في الوسط مثلا لأنه أفضل مكان له ينفع بالوسط تحت و سيكون عندنا هذا الشكل :





الآن ما علينا سوى إنشاء طبقة جديدة فوق طبقة الشكل تماما و رسم مستطيل صغير بأداة التحديد كما في الشكل :





و من ثم من قائمة Select ثم Modify نختار Smooth و نضع القيمة 4 و نضغط Ok .... الآن نقوم بتعبئة المستطيل المدور اللي سويناه بلون يعجبك و ليكن لون فاتح و من ثم نلغي التحديد Ctrl + D و من ثم نعطي المستطيل بعض الخصائص على كيفنا و اللي يعجبنا و نقوم بإنزاله تحت و يكون فوق الشكل اللي سويناه و هذا هو الشكل اللي راح يطلع لنا بعد كل اللي سويناه :





الآن نقوم لوحدنا بعمل أشكال على كيفنا مثلا نسوي نفس الشكل الأول و لكن نقلبه و طريقة قلبه هي إنه بعد ما نسويه له تدرج و كل شي و ننتهي من خصائصه و نتأكد إنه احنا على طبقته الخاصة نضغط Ctrl + T لتحديد و من ثم نضغط كلك يمين عليه و نختار Flip Vertical أي نقلبه رأسيا و من ثم نضغط على زر علامة الصح في الأعلى يمينا في الفوتوشوب كما تعلمنا في الأعلى و نحركه و نضعه في المكان اللي يعجبنا و أنا سويت بعض الأشكال و حطيتهم في أماكن مختلفة و هذا الشكل النهائي طلع معي :



2010/3/13 18:53 دورة تصميم الواجهات .. الحلقة الثانية .. تركيب الصور و دمجها مع الواجهة


ابو الخير
المشاركات: 202
المواقع:
السلام عليكم و رحمة الله و بركاته

بعد أن انتهينا و لله الحمد من تصيميم هيكل الواجهة و إضافة تأثيرات و أشكال جميلة عليها و زخرفتها نأتي الآن إلى إضافة صور للواجهة

و إضافة تأثيرات كذلك و يمكنك مراجعة قسم دروس التصميم لمعرفة كيفية إضافة التأثيرات و التعامل مع الصور :

http://www.traidnt.net/vb/forumdisplay.php?f=4

و الآن نبدأ باسم الله :

افتح الواجهة اللي سويناها و هي ملف PSD ... الآن يمكن تلاقي منطقة العمل صغيرة و لازم تصمم و هي على دقتها الأخيرة يعني 100% عشان ما يطلع التصميم مشوه و إنت بتصمم على الصغيرة و بعدين تكبرها يعني من القوائم في الأعلى اختر Window بعدين Navigator و راح تطلع لك منطقة بكون مكتوب فيها 50% أو أي رقم كان و إنت أكتب بدلا منه 100 و اضغط Enter .. الآن قم بإنشاء طبقة (لير) جديدة و خليها في منطقة الليرات بعد طبقة الخلفية يعني آخر شي تحت و بتكون الثانية من تحت و الكل عارف كيف ينشئ طبقة (ياشيخ قلنا كيف و اسكت ) Ctrl + Shift + N ... و بعد كل هذا نختار لون على حسب لون واجهتنا و يكون غامق شوي و بعدها نختار أداة الفرشاة و من هذا الدرس تستطيع رؤية جميع الأدوات و طريقة استخدامها و بعض مهام و أوامر الفوتوشوب :

http://www.traidnt.net/vb/showthread.php?t=1046299

الآن و بعد اختيار أداة الفرشاة و اللون نقوم بالتلوين بالماوس على المكان الفارغ في الواجهة في البانر طبعا لأن الصور سيتم إضافتها فقط في البانر يعني نلون المنطقة الفارغة بين أول الواجهة و المستطيلات اللي أنشأناهم للبانر في الأعلى و بكون اللون كما في الصورة (الفكرة بتوصلك عند مشاهدة الصورة) :




و تستطيع استخدام أداة التحديد و رسم مستطيل في الأعلى على المكان الفارغ كاملا و من ثم تعبئته باللون و هذه الطريقة أسرع طبعا و لكن حبيت أبسط لكم لمعرفة طرق أخرى .. الآن و بعد التلوين نقوم بفتح الصور التي نريدها في البانر و إضافة التأثيرات عليها و مثل ما قلتلكم عندكم دروس التأثيرات و درس الأوامر و التعرف على الأدوات أرجو منكم جميعا مراجعتها جيدا .. بعد إضافة التأثيرات على الصورة الأولى مثلا و الضغط على Ctrl + Shift + E نقوم بسحبها إلى منطقة العمل في الواجهة و أهم شي تكون فوق طبقة التلوين اللي أنشأناها قبل قليل يعني تكون الثالثة من تحت في منطقة الطبقات و من ثم نختار الـ Mode لطبقة هذه الصورة Luminosity من منطقة الطبقات كما في الصورة :





الآن إذا كانت الصورة كبيرة و شفناها في جميع أنحاء الواجهة إما أن نقوم بقص الزوائد بواسطة أداة التحديد يعني نحدد على المكان الزائد بعد المستطيلان يعني بعد البانر و نقوم بالضغط على زر Delete أو أن نقوم بالضغط على Ctrl + T لتصغير الصورة و جعلها في الاعلى فقط في البانر و من ثم نختار علامة الصح فوق على اليمين في الأعلى كما في الصورة :





الآن نقوم بإضافة باقي الصور و طبعا كلها نضيفها في البانر و نسوي نفس الطرق و لما نجمع الصور كلها نبدأ بالدمج بواسطة هذا الدرس التالي :

http://www.traidnt.net/vb/showthread.php?t=1049735

يعني بواسطة درس دمج الصور نستطيع الدمج بين الصور و الآن نكون قد انتهينا من البانر و أضفنا الصور و دمجناها و هذا الشكل النهائي بعد الدمج :





أتمنى أن يكون الدمج سهل و ركزوا على درس الدمج و إن شاء الله بتلاقوا كل شي سهل معاكم .. الآن نستطيع أن نضيف بعد الفرش على البانر مثل فرش النجوم التي تم إرفاقها في الأسفل و أكيد تعرفنا طريقة تركيب الفرش و كل شي عن الفرش و لما نختار أي فرشاة نقوم بإنشاء لير جديد أولا و من ثم نختار اللون الأبيض و قبل هالشيء لازم يكون اللير الجديد فوق لير الصور تماماً و من ثم نبدأ بوضع الفرش في البانر و أنصح بعدم الإكثار منها و هذا الشكل البسيط بعد إضافة بعض الفرش للبانر :





الآن اللي علينا إنه نكتب كلمة مثلا و تكون بشكل جميل و لدينا كثير من الدروس في قسم الدروس للتعامل مع الكتابة بأشكال مختلفة و متناسقة جميلة .. الآن نقوم بكتابة اسم موقعنا على البانر مثلا Allulu4Design و بيطلع معنا هذا الشكل :





و من ثم نكتب على الزخارف و الأشكال اللي سويناها اللي يعجبنا و من ثم بطلع معنا إن شاء الله هذا الشكل النهائي (تستطيع إضافة بعض الأشكال Shapes على التصميم) :





الآن نقوم بتخزين الواجهة بصيغة JPG

2010/3/13 19:5 دورة تصميم الواجهات .. الحلقة الثالثة .. تقطيع الواجهة


ابو الخير
المشاركات: 202
المواقع:
دورة تصميم الواجهات .. الحلقة الثالثة .. تقطيع الواجهة



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

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

باسم نبدأ :

افتح صورة الواجهة التي قمنا بتخزينها في آخر الحلقة الثانية على الفوتوشوب و من هذا الدرس (قم بمراجعته جيداً) ستتعرف على كيفية فتح الصورة أو العمل :

http://www.traidnt.net/vb/showthread.php?t=1046299

و المهم بعد ما نفتح الصورة و مثل ما خبرتكم تكون JPG و لما تفتحها بتلاقي في منطقة الطبقات قفل بجانب طبقة الواجهة اضغط مرتين عليه و من ثم اختر OK ... الآن نقوم باختيار أداة التحديد (المربع) و من ثم نحدد البانر بأكمله أي نبدأ بالتحديد من الزاوية العليا اليمنى و نسحب لأقصى اليسار للزاوية العليا اليسرى و ننزل لتحت عشان يتحدد معنا البانر و يكون مع البانر مناطق صغير من الأعمدة يعني بعد البانر ننزل شوي بالتحديد عشان يتحدد معنا مناطق صغيرة من الأعمدة بهذا الشكل :




الآن بعد ما حددنا البانر مع مناطق صغيرة من الأعمدة نضغط Ctrl + X عشان نقطعه و من ثم نفتح عمل جديد بدون تغيير أي شي و من ثم نضغط Ctrl + V و بطلع معنا صورة البانر اللي قطعناها و من ثم نخزنها بصيغة JPG أو على حسب ما بتحب إما GIF أو JPG ... نرجع للواجهة نقطع الفوتر مع مناطق صغيرة من الأعمدة بنفس الطريقة و نفتح عمل جديد و نلصقه بالداخل أي بنفس الطريقة و بطلع معنا البانر و الفوتر بهذا الشكل مقطعين :

البانر Banner :





الفوتر Footer :





الآن نرجع للواجهة و بنلاقي الأعمدة و أهم شيء نفتح قائمة Window و نختار منها Info عشان يطلع معنا نافذة حجم القطع و بنلاقي في النافذة أو المربع اللي طلع لنا علامة + نضغط عليها و نختار Pixels أول خيار كما في الصورة :





الآن و بنفس أداة التحديد نقوم بتحديد قطعة من العامود الأيمن كما في الصورة :





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





أنا طلع معاي عرض العامود الأيمن 14 بكسل .. الآن نقوم بالضغط على Ctrl + X لقطع التحديد و من ثم نفتح عمل جديد و نلصق التحديد فيه بالضغط على Ctrl + V ... الآن على العامود الأيسر نفس الخطوات و أهم شي تحدد بنفس عرض العامود الأيمن يعني أنا طلع معاي 14 بكسل لازم أحدد العامود الأيسر بعرض 14 بكسل يعني عرض متساو للعامودين و الطول لا يهم مهما كان و نقطعه و نلصقه بنفس الخطوات ... الآن هذه صور العامود الأيمن و الأيسر :

العامود الأيمن Right Column :





العامود الأيسر Left Column :





الآن انتهينا من التقطيع و تأكد من الأربع صور و خزنها في مجلد خاص بها ... أتمنى للجميع التوفيق في هذه الحلقة البسيطة و تابعونا في حلقات قادمة إن شاء و يوفقكم و يوفقنا جميعاً ... شكرا لكم ... مع أطيب التمنيات لكم بالنجاح في أعمالكم ...

2010/3/13 19:16 دورة تصميم الواجهات .. الحلقة الرابعة .. إنشاء الجداول و تركيب الواجهة


ابو الخير
المشاركات: 202
المواقع:

كيف حالكم يالغاليين ... كيف المعنويات ... أهم شي كاسة قهوة جنبك أو أقلكم عصير (راني) اللي يحبه قلبك ... المهم اشرب شربتين ... و ابدأ ... بسم الله نبدأ :

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




و من ثم ستظهر لك نافذة اختر منها Empty Web Site ويب فارغ و على اليمين في خانة استعراض مجلد الويب اختر المجلد الذي أنشأناه في البداية بالضغط على زر Browse استعراض لاختيار المجلد :





و من ثم اضغط Ok ليصبح المجلد مجلد ويب خاص بك ... الآن أنشئ صفحة بيضاء جديدة بالضغط على الصفحة البيضاء في الأعلى كما في الصورة :





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





الآن في منطقة التحرير نضغط كلك يمين بالماوس و نقوم باختيار خصائص الصفحة Page Properties كما في الصورة :





الآن نجعل اتجاه الصفحة من اليمين إلى اليسار كما في الصورة :





مع العلم أنك تستطيع اختيار الخيار الآخر من اليسار إلى اليمين و هذا يعود لك أهم شي يكون هالشيء في أول عملك ... و من ثم في نفس المكان Advanced في الأعلى و نصفر جميع الخانات كما في الشكل :





الآن نقوم بإنشاء جدول مكون من 3 أعمدة و 3 صفوف كما في الصورة :








في خانة الحجم بالبكسل وضعت 779 لأنه تم تصميم الواجهة التي نعمل عليها حالياً في الفوتوشوب بحجم (عرض) 779 بكسل في أول حلقة ... الآن اضغط Ok و بتلاقي جدول مكون من 3 أعمدة و 3 صفوف ... الآن في خلايا الهيدر (أول ثلاث أعمدة في الصف الأول) الثلاث و الفوتر أيضا نقوم بتظليل الخلايا الثلاث كما في الشكل بالسحب عن طريق الماوس من العامود الأيمن أو الأيسر للجهة المقابة لآخر عامود و من ثم نضغط عليهم كلك يمين و نقوم باختيار Merge Cells :




و نقوم بتطبيق نفس الطريقة مع الفوتر (أي آخر ثلاث أعمدة في الصف الثالث) و يصبح لدينا هذا الشكل :





الآن اذهب إلى الصور الأربعة المقطعة و الجاهزة للأكل (تفكيره كله بالأكل << دب) قصدي الجاهزة للتركيب اللي قطعناها في الحلقة السابقة و من ثم اختر صورة الهيدر (الأعلى) و انسخها Ctrl + C و من ثم اذهب إلى الجدول في الفرونت بيج في الأول أي الصف الأول اللي دمجنا فيه الثلاث أعمدة للهيدر و نلصق الصورة ... أو يمكننا فعل ذلك بوضع مؤشر الماوس (الفأرة) في الخلية الأولى في الأعلى (الهيدر) و نقوم بعمل توسيط و من ثم ندرج صورة من قائمة Insert نقوم باختيار Picture ثم From File كما في الشكل :





الآن نقوم بوضع صورة الفوتر (الأسفل) في الأسفل مع التوسيط أيضاً و كالخطوات السابقة ... و يصبح الشكل كالتالي :





الآن يجب علينا التركيز قليلاً (يالله خلص كاسة العصير و كمل) .... في الخلية اليمنى في الوسط (العامود الأيمن في الصف الثاني) نضغط كلك يمين بداخله و نقوم باختيار Cell Properties أي خصائص الخلية كما في الشكل :





و من ثم في النافذة التي تظهر لنا نقوم بوضع علامة (صح) على Use background picture أي اختيار صورة خلفية و من ثم نضغط على زر Browse استعراض لاختيار صورة العامود الأيمن المقطعة التي أنشأناها في الحلقة السابقة و من ثم نضغط Ok كما في الشكل :





و من ثم نقوم بتطبيق نفس الخطوات السابقة من الخلية اليسرى (العامود الأيسر في الصف الثاني) مع اختيار الخلفية صورة العامود الأيسر بالطبع ... الآن أصبح لدينا الشكل التالي :





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





و كما رأينا نقوم بنفس العمل مع العامود الأيسر بالسحب إلى اليسار إلى أن تتطابق الواجهة من جميع الجوانب مع الأعمدة .... الآن في الخلية الوسطى التي تبقت اضغط كلك يمين أو اضغط في أي مكان في الصفحة كلك يمين و من ثم اختر Page Properties كما فعلنا سابقاً و من ثم في النافذة التي تظهر لنا نقوم باختيار الأمر Formatting من الأعلى و من ثم في خانة Background نقوم باختيار نفس لون خلفية الواجهة اللي سويناه بالفوتوشوب كما في الشكل :





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





و من ثم نضغط على لون الخلفية من إحدى صور الواجهة و من ثم سنجد أن اللون أصبح عندنا جاهزاً ... الآن اضغط Ok في النوافذ ... و سيصبح لدينا الشكل النهائي التالي :





الآن نقوم بحفظ عملنا عن طريق الضغط على صورة الحفظ كما في الشكل في الجهة اليسرى العلوية :





ستظهر لنا نافذة الحفظ ... بالطبع سيكون اسم الصفحة index و لا نغيرها و هو اسم الصفحة الرئيسية و إذا أحببنا أن نضع عنوان الصفحة الذي يظهر في الأعلى في المتصفح نضغط على زر Change Title أي تغيير العنوان كما في الصورة :





و من ثم نكتب في النافذة التي تظهر لنا العنوان الذي نريده و نحفظ الصفحة و ستظهر لنا نافذة حفظ الصور نقوم بالضغط على زر Change Folder كما في الصورة :





و من ثم نقوم باختيار مجلد images و من ثم نحفظ العمل و سيحفظ كاملاً بإذن الله

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

2010/3/13 19:31 دورة تصميم الواجهات .. الحلقة الخامسة .. تصميم صور الأقسام (القوائم)


ابو الخير
المشاركات: 202
المواقع:
السلام عليكم و رحمة الله و بركاته

بعد أن قمنا بتصميم الواجهة بشكل عام و الانتهاء منها و تركيبها على الفرونت بيج نأتي لتجميلها و هو بتصميم صور الأقسام ... باسم الله نبدأ :

افتح الفوتوشوب (لا تنسى كاسة الشاي ) و من ثم اذهب لقائمة File و اختر New كما في الصورة :




و ضع القياسات التالية بالخصائص المبينة البارزة :





الآن ضع خلفية العمل بنفس لون خلفية الواجهة ... الآن أنا لون خلفية واجهتي بالكود FFF6F7 المهم إنت لون خلفية العمل بنفس لون خلفية الواجهة عن طريق أداة التعبئة :





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





بعد اختيار الأداة نضغط على خلفية الواجهة و ستجد اللون أصبح جاهزاً و قم بالذهاب إلى منطقة العمل للقائمة و اجعل الخلفية بنفس اللون بأداة التعبئة .... الآن نملك طرق كثيرة لعمل قائمة و هذا على حسب ذوق المصمم و لكن احنا سنقوم بتطبيق عمل مناسب بإذن الله للواجهة .... اختر أداة التحديد المربعة :





الآن ارسم تحديد في منطقة العمل بنفس حجم منطقة العمل و لكن قم بتصغيره بعض الشيء كما في الصورة :





الآن من قائمة Select اختر Modify و من ثم Smooth كما في الصورة :





اختر القيمة (4) بكسل و اضغط Ok و من ثم ستصبح حواف التحديد بشكل ملتوي (غير حادة) .... الآن و قبل كل شيء في منطقة الطبقات (Layers) على اليمين في الأسفل أنشئ طبقة جديدة بالضغط على Ctrl + Shift + N و من ثم Ok أو من منطقة الطبقات نفسها كما في الصورة :





اضغط على صورة الطبقة المحددة و سيتم إنشاء طبقة جديدة أعلى طبقة الخلفية و الآن و ما زال التحديد موجود بالطبع ... اضغط كلك يمين على التحديد و اختر Stroke كما في الصورة و لا تنسى أن التحديد ما زال موجود و الأداة هي أداة التحديد :





الآن اختر لون أغمق من لون الخلفية و يكون لون غامق كألوان أعمدة الواجهة عن طريق الضغط على مربع اللون و اختيار اللون المناسب و العرض = (1) بكسل كما في الصورة مع الخصائص المبينة البارزة :





الآن و بعد الانتهاء من هذه الخطوة ... نلغي التحديد بالضغط على Ctrl + D و من ثم نضغط مرتين على الطبقة (لا تضغط على اسمها) التي قمنا بإنشائها و هي طبقة التحديد الكلي للتصميم و من ثم ستظهر نافذة خصائص الطبقة ... على اليسار توجد خاصية باسم Outer Glow قم باختيارها و من ثم قم بعمل الخصائص المبينة و البارزة في الصورة التالية .. بالطبع اللون قم باختياره متناسق و غامق :





الآن قم بإنشاء طبقة (Layer) جديدة و لكن ضعها أسفل طبقة التحديد الكلي التي أنشأناها مسبقاً كما في الصورة :





الآن قم برسم مستطيل أفقي بأداة التحديد المربعة كما في الشكل :





أهم شيء ما يكون كبير كثير أفضل ... بعد ذلك اختر أداة التدرج :





إذا لم تجدها فهي موجودة مع أداة التعبئة اضغط على أداة التعبئة باستمرار (ضغطة ثابتة) و ستظهر لك أداة التدرج قم باختيارها ... الآن في الأعلى توجد منطقة التدرج كما في الصورة التالية :





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





في الصورة تم توضيح كيفية إضافة لون آخر او تعديل لون و هذا على حسب الأذواق ... بعد اختيار الألوان و إنشاء تدرج لوني بشكل يناسبك و يناسب التصميم بلون من ألوان التصميم المتناسقة نقوم بالضغط على زر Ok ... الآن و ما زال التحديد موجود و ما زلنا باختيار الطبقة الموجود أسفل طبقة التحديد الكلي و هي التي أنشأناها أخيراً نقوم بعمل التدرج داخل التحديد إما من الأعلى للأسفل أو العكس و أنا قمت برسمه من أسفل لأعلى عن طريق السحب من أول التحديد لآخر التحديد و لكن من الجهة السفلى و أصبح الشكل هكذا :





تستطيع السحب بعد الضغط على مفتاح Shift للسحب المستقيم حتى يكون التدرج مستقيم و مفتاح Shift استخداماته لجعل أي حركة نريدها مستقيمة ... الآن نضغط Ctrl + D لإلغاء التحديد ... أنشئ طبقة جديدة فوق طبقة التدريج و أسفل طبقة التحديد الكلي أي بينهم (قبل الأخيرة) ... نقوم باختيار أداة التحديد و نرسم مستطيل صغير أفقي كما في الصورة :





نقوم باختيار أداة التدرج مرة أخرى و نرسم تدرج بالألوان اللي تعجبنا و لو تكون أغمق بقليل من الألوان التي استخدمناها بالتدرج الأول ... نقوم برسم تدرج للمستطيل و نلغي التحديد و نضغط مرتين على طبقة المستطيل (لا تضغط على اسم الطبقة) و من ثم ستظهر لنا خصائص الطبقة و على اليسار نقوم باختيار خاصية Stroke و من ثم نقوم بعمل الخصائص التالية و اللون يكون غامق بعض الشيء أفضل :





و من ثم اضغط Ok ... الآن نقوم بتكرار طبقة المستطيل بالضغط على Ctrl + J ... و من ثم نضع الطبقة التي تظهر لنا أسفل الطبقة الأصلية أي تكون أسفل طبقة المستطيل الأول و أعلى طبقة المستطيل الكبير و نقوم بسحب المستطيل الأخير المكرر للأعلى بعض الشيء بمفاتيح الكيبورد (أعلى - أسفل - يمين - يسار) ... سيصبح الشكل هكذا :





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





أهم شي تكون الطبقة فوق طبقة المستطيلات جميعها الثلاثة ... الآن من قائمة Select اختر Modify و من ثم Smooth بقيمة (4) بكسل و اضغط Ok ... اختر أداة التعبئة و اختر لون فاتح مناسب و قم بتعبئة التحديد ... اضغط Ctrl + D لإلغاء التحديد ... الآن اضغط مرتين على طبقة هذا المستطيل لإظهار خصائصها و قم بعمل الخصائص التالية و جميعهم باختيار ألوان غامقة بعض الشيء و كما هو مبين و بارز بالصور التالية :

Stroke :



Outer Glow :



Inner Glow :



و من ثم نضغط Ok ... الآن أصبح لدينا العمل من الأعلى جاهزاً كما في الصورة :





بعد ذلك يمكننا إضافة بعض التأثيرات الجميلة كالصور الجاهزة عن طريق اختيار أداة النجمة (الخاصة بالصور) :





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





ستظهر لك نافذة اضغط على Ok ... الآن نقوم باختيار الشكل الذي نريده عن طريق الضغط على السهم كما وضحنا بالصورة السابقة و بعد اختيار شكل من الأشكال نقوم برسمه في المكان الذي يناسبنا و أنا قمت برسم الشكل في المنطقتين على اليمين و اليسار كما في الصورة :





بعد رسم الشكل ستظهر لك طبقة تلقائياً خاصة بالشكل لذلك اضغط عليها كلك يمين و اختر Resterize Layer ... و من ثم اضغط مرتين على الطبقة و أعطِ الشكل الخصائص التي تناسبك ... الآن نقوم بالضغط على طبقة الخلفية و هي أول طبقة في الأسفل و من ثم ننشئ طبقة جديدة و نبدأ بالعمل في الأسفل ... و الآن الدور عليكم للعمل في الأسفل على ذوقكم و هذا ما قمت بعمله في الأسفل :





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





الآن نقوم باختيار أداة التحديد دون إنشاء طبقة جديدة و نرسم مستطيل من الأعلى للأسفل كما في الشكل :





نقوم بتحريكه لليسار إلى أن يخرج خارج العمل و يبقى جزء منه على التحديد الكلي كما نرى في الصورة :





الآن و ما زال التحديد موجود نبدأ باختيار الطبقة الموجودة فوق طبقة الخلفية من الأسفل و من ثم نضغط مفتاح Delete و من ثم نقوم باختيار الطبقة التي تليها و نضغط مفتاح Delete إلى أن نصل إلى الطبقة الأخيرة و هي طبقة التحديد الكلي لا نقوم بالصغط على مفتاح Delete ... الآن نقوم بنقل التحديد إلى الجهة اليمنى و بنفس الطريقة إلى أن ينطبق على التحديد الكلي و نبدأ من الطبقة الموجودة فوق طبقة الخلفية مرة أخرى و نقوم بالضغط على مفتاح Delete و هكذا ... الآن ما قمنا بعمله هو حذف الزوائد الموجودة خارج التحديد و أصبح الشكل كالتالي :





الآن نلغي التحديد Ctrl + D ... بعد ذلك نرسم مستطيل أفقي كما في الصورة :





الآن نسحب المستطيل للأعلى إلى أن ينطبق على التحديد و نقوم بعمل نفس الطرق السابقة تماماً بواسطة الضغط على مفتاح Delete و من ثم نسحبه للأسفل و بنفس الطرق أيضاً ... أخيراً نضغط Ctrl + D لإلغاء التحديد ... الآن على حواف التحديد الكلي (الزوايا) و خاصة في الأسفل نجد زوائد مثل زوائد المستطيل كما ترى في الصورة التالية :





الآن نقوم باختيار طبقة المستطيل السفلي و من ثم نقوم باختيار أداة الممحاة :





و من ثم نقوم بمسح الزوائد ... و الزوائد صغيرة نوعاً ما لذلك انتبه بالمسح حتى لا تمسح المستطيل من الداخل ... الآن أصبح هذا هو الشكل النهائي :



يتبع

2010/3/13 19:32


ابو الخير
المشاركات: 202
المواقع:


الآن ما علينا سوى إنشاء طبقة جديدة بعد طبقة الخلفية مباشرة و اختيار أداة التحديد المربعة و من ثم رسم عامود بحجم بكسل واحد و بحيث يكون في نفس المكان المبين كما في الشكل :





الآن نقوم بالضغط على الزر الأيمن للماوس (كلك يمين) و من ثم اختر Stroke و اجعل الحجم (1) بكسل و اللون غامق بعض الشيء و اضغط Ok ... الآن قم بعمل تكرار للطبقة Ctrl + J و انقلها إلى الجهة المقابلة و سيصبح لدنيا هذا الشكل و هو الشكل النهائي للقائمة :



أتمنى أن أكون قد وفقت في هذا الشرح و إن كان هناك أي خطأ إملائي أو في الشرح فالعذر من الله ثم منكم إخواني ... أتمنى لكم التوفيق ... انتظرونا في حلقة جديدة ... شكراً لكم

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

2010/3/13 19:40 دورة تصميم الواجهات .. الحلقة السادسة .. تقطيع صور الأقسام (القوائم)


ابو الخير
المشاركات: 202
المواقع:
السلام عليكم و رحمة الله و بركاته

بعد أن انتهينا إخواني الكرام من تصميم صور الأقسام و التجميلات نأتي الآن إلى القيام بتقطيع هذه الصور عن طريق الفوتوشب و طريقة تقطيعها بنفس طريقة تقطيع الواجهة تماماً أي أن هذه الحلقة بسيطة و لكن نحتاج للتركيز ... باسم الله نبدأ :

ملاحظة : قم بمراجعة هذا الدرس جيداً :

http://www.traidnt.net/vb/showthread.php?t=1046299

أول شي نحضر القهوة عشان نصحصح ... الآن يجب أن تكون صورة القسم التي قمنا بتصميمها مخزنة في الفوتوشوب و من ثم نقوم بفتح الصورة عن طريق الفوتوشوب و هذه هي الصورة النهائية للقائمة :




الآن نقوم باختيار أداة التحديد و التقطيع كما في الصورة :





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





الآن نقوم بالضغط على المفتاحين Ctrl + X لقطع (قص) الجزء الذي قمنا بتحديده و نقوم بفتح عمل جديد و نضغط Ctrl + V لإدخال الجزء للعمل الجديد (لصق) و بالطبع تستطيع عمل أي حركة على الصور كإضاءة أو أي من الحركات التي تعجبك و من ثم قم بتخزين الصورة على حسب الامتداد الذي تريد JPG أو GIF و الآن نرجع للعمل الأساسي و نقوم بتحديد المنطقة السفلية من الزاوية اليمنى أو اليسرى السفلية إلى الزواية المقابلة لها و نسحب للأعلى مع جزء من الأعمدة بنفس الحركة السابقة كما في الشكل :





الآن بنفس الطريقة نقطع الجزء السفلي المحدد Ctrl + X و نلصقه في عمل جديد Ctrl + V و نقوم بتخزينه .. الآن نرجع للقائمة و بنلاقي الأعمدة و أهم شيء نفتح قائمة Window و نختار منها Info عشان يطلع معنا نافذة حجم القطع و بنلاقي في النافذة أو المربع اللي طلع لنا علامة + نضغط عليها و نختار Pixels أول خيار كما في الصورة :





الآن و بنفس أداة التحديد نقوم بتحديد قطعة من العامود الأيمن كما في الصورة :





في نافذة Info اللي خلينا فيها الحجم بالبكسل بطلع لنا عرض التحديد بالبكسل و أهم شي نعرفه كما في الصورة :





لاحظ عرض العامود طلع معي 11 بكسل ... بالطبع الطول ما راح نهتم فيه لإنه راح يتمدد معنا ... الآن نقوم بقطع الجزء اللي حددناه بنفس الطريقة Ctrl + X و من ثم نلصقه في عمل جديد و نقوم بتخزينه ... الآن أخر شيء نقوم بتحديد جزء أيسر من العامود بنفس الطريقة و بنفس عرض العامود الأيمن أنا قمت بتحديد 11 بكسل أي بنفس الحجم و من ثم نقوم بقطع الجزء و لصقه في عمل جديد و تخزينه و سنجد أنه أصبح لدينا 4 قطع للقائمة :

* المنطقة العليا :




* المنطقة السفلى :




* العامود الأيمن :




* العامود الأيسر :




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

2010/3/13 19:58 دورة تصميم الواجهات .. الحلقة السابعة .. تركيب الواجهة على الفرونت بيج


ابو الخير
المشاركات: 202
المواقع:
السلام عليكم و رحمة الله و بركاته

بعد أن انتهينا إخواني الكرام من تصميم و تقطيع الواجهة و أقسامها ... نأتي الآن لمعرفة كيفية تركيب الواجهة على برنامج الفرونت بيج ... باسم الله نبدأ :

ملاحظة هامة : الحلقة شبيهة بالحلقة الرابعة و لكنها بتفصيل أكثير و إعادة للتركيز بكيفية التركيب و التعامل مع الجداول و الفرونت بيج بشكل عام لنتمكن من تركيب الأقسام بشكل ملائم و بدقة أكثر

قم بتحميل برنامج الفرونت بيج 2003 من الرابط التالي :

اضغط هنا

الآن نقوم بتجهيز صور الواجهة التي تم تقطيعها و هي كالتالي :

up صورة البانر العلوي :




down صورة الفوتر السفلي :




right العامود الأيمن :




left العامود الأيسر :




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




<1> نضغط بزر الماوس الأيمن على الشاشة و من ثم نضع مؤشر الفأرة على New
<2> نقوم باختيار Folder

و من ثم سيتم إنشاء مجلد جديد و نقوم بكتابة اسم المجلد و يفضل باللغة الإنجليزية مثلاً Allulu Web و نضغط على مفتاح Enter ... و من ثم من الأفضل أن نقوم بإنشاء مجلد آخر داخل مجلد الموقع باسم images لتخزين الصور فيه .. و أهم خطوة هي أن ننقل جميع الصور التي سيتم استخدامها في الواجهة إلى مجلد الصور الذي تم إنشاؤه images لنستخدمها من المجلد الخاص بالموقع و ليس من المسار المخزنة عليه في الأصل .. الآن نقوم بفتح برنامج الفرونت بيج :





و من ثم ستفتح لنا صفحة بيضاء جاهزة للعمل باسم new_page_1.htm كما في الصورة :





و إذا لم يتم فتح الصفحة البيضاء فنستطيع إنشاء صفحة جديدة بالضغط على أيقونة الملف الأبيض في الخيارات أسفل القوائم كما في الصورة :





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





بعد مسح الكود بالكامل نقوم بالعودة و الدخول إلى منطقة العمل و التصميم Design الموجودة بجانب منطقة الأكواد ... و سنجد الصفحة بيضاء كما هي و ما علينا هو الضغط بزر الفأرة الأيمن على الصفحة و اختيار الأمر Page Properties أي خصائص الصفحة .. كما في الصورة :





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





و من ثم نقوم بالانتقال إلى الخيار Formatting و نتبع ما هو موضح على الصورة التالية :





هنالك خطوة هامة و هي اختيار لون خلفية الصفحة و مطابقته للون الواجهة .. فهنالك ألوان أساسية كالأبيض و الأحمر و لكن إذا كان اللون بني فاتح (بيج مثلا) كيف يمكننا اختياره مطابقاً للون الخلفية ؟! .. الحل هو فتح ملف الواجهة بالفوتوشوب و من ثم نقوم باختيار أداة تحديد اللون كما في الصورة :




و من ثم نضغط على لون الخلفية و سيتغير اللون إلى لون الخلفية في منطقة الألوان .. بعد ذلك نضغط على منطقة الألوان على مربع اللون الأمامي كما هو موضح :





و من ثم نقوم بنسخ كود اللون الظاهر لنا في نافذة اختيار الألوان كما هو موضح في الصورة التالية :





بعد ذلك نقوم بالانتقال إلى الفرونت بيج مرة أخرى و عند القيام باختيار لون الخلفية سنجد الأمر More Colors نقوم باختياره كما في الصورة :





و من ثم ستظهر لنا نافذة اختيار الألوان و ما علينا سوى لصق الكود الذي تم نسخه في خانة كود اللون كما هو موضح :





الآن نقوم بالانتقال إلى الخيار Advanced في نافذة خصائص الصفحة و نتبع ما هو موضح في الصورة التالية :





إذا قمنا بتفعيل خيار تغيير شكل الرابط الذي تم توضيحه بالصورة السابقة .. نقوم بالضغط على زر Rollover style و من ثم ستظهر لنا نافذة تعديل خصائص الرابط عند وضع مؤشر الفأرة عليه كما هو موضح و مشروح بالصورة التالية :





و بعد ذلك نقوم بحفظ الخصائص بالضغط على زر OK .. الآن سنجد أن الصفحة تم تغييرها على حسب الخصائص ، الأبعاد ، لون الخلفية و غيرها ... الآن نقوم بإنشاء جدول بثلاثة أعمدة و ثلاثة صفوف عن طريق اختيار الخيار Table من الخيارات في الأعلى و من ثم اختيار Insert ثم Table كما هو موضح في الصورة التالية :





الآن ستظهر لنا نافذة خصائص الجدول نقوم باتباع ما هو موضح في الصورة التالية :





الآن سيظهر لنا جدول بثلاثة أعمدة و ثلاثة صفوف ... نقوم بتظليل الصف الأول بالكامل كما هو موضح :





و من ثم نضغط عليه بزر الفأرة الأيمن و نقوم باختيار الخاصية Merge Cells كما في الصورة التالية :





و سنجد أن الصف الأول أصبح مكون من عامود واحد فقط ... نكرر العملية بتظليل الصف الثالث و دمجه بنفس الخاصية أيضاً ... الآن أصبح لدينا عامود واحد في الصف الأول و الثالث و ثلاثة أعمدة في الصف الثاني ... بعد ذلك نقوم بالضغط بزر الفأرة الأيمن على العامود الأيمن في الصف الثاني و نقوم باختيار Cell Properties كما هو موضح :





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





بعد ذلك نقوم بتكرار نفس العملية للعامود الأيسر و نضع عرض صورة العامود الأيسر لدينا و اختياره كخلفية و حفظ الخصائص ... و من ثم نقوم بالضغط بزر الفأرة الأيمن على منطقة العامود الوسط و اختيار الخاصية نفسها Cell Properties و من ثم نقوم فقط بتحديد العرض للعامود الأوسط و هو ناتج طرح مجموع عرض العامودين الأيمن و الأيسر من عرض الواجهة نفسها أي كالتالي ( أنا شايف احنا غيرنا رياضيات و مسائل و حسابات شو القصة ) :

779 عرض الواجهة - (28 ناتج مجموع عرض العامودين الأيمن و الأيسر) = 751 بكسل عرض العامود الوسط ... نقوم بوضع الناتج النهائي 751 في خانة العرض و نحفظ الخصائص ...

الآن كل شيء جاهز و ما علينا إلا الذهاب إلى مجلد الصور images الذي قمنا بإنشائه في مجلد الموقع Allulu Web و نسخ الصورة العليا up و من ثم ننتقل للفرونت بيج و نلصقها داخل العامود العلوي في الصف الأول .. و نكرر العملية بنسخ الصورة السفلية down و لصقها في الفرونت بيج داخل العامود السفلي في الصف الثالث .. و تصبح الواجهة مكتلمة كما في الصورة التالية :





الآن ما علينا سوى تخزين الصفحة و هي الصفحة الرئيسية index.htm الرئيسية للموقع .. نقوم بالضغط على أيقونة الحفظ في الأعلى كما هو موضح في الصورة التالية :





و من ثم ستظهر نافذة لاختيار مسار تخزين الصفحة و نقوم بتخزينها في مجلد Allulu Web الخاص بالموقع الذي تم إنشاؤه في أول عملنا ... و سيكون اسم الصفحة بالتأكيد index.htm كما هو موضح في الصورة التالية :





أتمنى أن تكون هذه الحلقة واضحة و الحلقة بالتأكيد تحتاج للتركيز ... فإن كان هناك خطأ بكلمة أو شرح خطوة فالعذر من الله إخواني ثم منكم ... و أتمنى لكم التوفيق .. انتظرونا بالحلقة القادمة ... و شكراً لكم و السلام عليكم و رحمة الله و بركاته

2010/3/13 20:16 دورة تصميم الواجهات .. الحلقة الثامنة .. تركيب أقسام الواجهة


ابو الخير
المشاركات: 202
المواقع:
السلام عليكم و رحمة الله و بركاته

أعتذر من الجميع أشد الاعتذار على التأخير من إدراج الحلقة الثامنة فأتمنى من الجميع قبول اعتذاري ...

بعد أن انتهينا من تركيب الواجهة على الفرونت بيج سنقوم في هذه الحلقة بتركيب الأقسام في الواجهة ... باسم الله نبدأ :

نقوم بتجهيز صور الأقسام التي تم تقطيعها و هي كالتالي :

up الصورة العلوية :




down الصورة السفلية :




right العامود الأيمن :




left العامود الأيسر :




الآن نقوم بنقل الأربع صور الخاصة بالأقسام إلى مجلد الموقع الذي قمنا بإنشائه في الحلقة السابقة بعنوان Allulu Web عن طريق إنشاء مجلد آخر بداخله بأي عنوان مثل menu و نضع الصور بداخله ... و من ثم نقوم بفتح برنامج الفرونت بيج و عن طريق البرنامج نقوم بفتح صفحة الموقع الرئيسية index.htm كما في الصورة :




و من ثم ستظهر لنا نافذة لاختيار الصفحة المراد فتحها و نحن بدورنا نقوم بالذهاب إلى مسار صفحة الموقع index.htm و نقوم باختيارها ... الآن بعد فتح صفحة الموقع index.htm و في منطقة التصميم Design نقوم بوضع مؤشر الفأرة في نصف الصفحة في الواجهة و نقوم بإدراج جدول متكون من صف أو عدة صفوف و ثلاثة أعمدة ليصبح كما في الصورة التالية :




و قد قمنا بشرح كيفية إدراج جدول مع خصائص كما في الصورة التالية :




و بالتالي نقوم بتطبيق نفس الخصائص على الجدول الذي تم إدراجه ... و من ثم إذا قمنا بإنشاء أكثر من صف واحد كما قمت أنا بإنشاء صفين فيجب علينا ترك الصف الأول بثلاثة أعمدة كما هو و نقوم بدمج الصف الثاني عن طريق تظليل خلاياه و استخدام خاصية Merge Cells كما تم شرحها في السابق كما في الصورة التالية :




و يصبح لدينا الشكل التالي :




الآن نضع مؤشر الفأرة على الخلية اليمنى في الصف الأول و نقوم بإنشاء جدول جديد مكون من ثلاثة صفوف و ثلاثة أعمدة و نقوم بإعطاءه نفس خصائص الجدول الأساسي كما في الصورة التالية :




مع ملاحظة مهمة كما هو مبين في الصورة أن يكون العرض بالبكسل و يساوي عرض التصميم عندما قمنا بتصميم صور الأقسام ... و لدي أنا العرض 175 بكسل ... و بعد ذلك نقوم بدمج أعمدة الصف الأول و من ثم أعمدة الصف الأخير و يصبح لدينا الشكل كما في الصورة التالية :




الآن في الصف الثاني نقوم بتعديل عرض الخلية اليسرى على حسب عرض العامود الأيسر لدينا في صور الأقسام حيث أنه لدي عرض العامود 11 بكسل و طريقة التعديل هي الضغط بزر الفأرة الأيمن بداخل الخلية اليسرى و اختيار Cell Properties خصائص الخلية كما في الصورة التالية :




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




و بعد ذلك نذهب للخلية اليمنى و نقوم بتعديل العرض بنفس الطريقة على حسب عرض صورة العامود الأيمن ... و من ثم نذهب للخلية الوسطى و نقوم بتعديل العرض لها على حسب الفرق بين العرض بالكامل و مجموع عرض العامودين الأيمن و الأيسر أي نقوم بجمع عرض العامودين 11+11=22 بكسل و بعد ذلك نقوم بطرحها من العرض الكامل لصورة الأقسام ... 175-22=153 بكسل عرض الخلية الوسطى في الجدول ... و من ثم نذهب للصف الأول و نقوم بتعديل طول الخلية على حسب طول الصورة العلوية كما في الصورة التالية :




و بعد ذلك يصبح لدينا الشكل التالي للجدول :




الآن نقوم بوضع الصورة العلوية خلفية للصف العلوي عن طريق الضغط بزر الفأرة الأيمن في الخلية العلوية و اختيار Cell Properties و من ثم في خانة الخلفية Background نقوم باختيار الصورة العلوية من مجلد الصور menu كما في الصورة التالية :




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




الآن نقوم بتظليل الجدول الخاص بالأقسام بالكامل و نسخه و لصقه في الخلية اليسرى للجدول الأساسي ... و بعد ذلك نقوم بتعديل عرض الخلية الوسطى للجدول الأساسي بنسبة 100% كما في الصورة التالية :




و بالنهاية يصبح لدينا الشكل النهائي :



نستطيع كتابة اسم كل قسم في الخلية العلوية لجدول الأقسام ... و نستطيع أيضاً إنشاء جدول من عدة صفوف في الخلية الوسطى لجدول الأقسام في المنطقة الفارغة و بالنهاية يصبح لدينا الشكل التالي :




بالنهاية أتمنى أن تكونوا قد استفدتم من الشرح و أتمنى أن يكون الشرح مبسطاً و مفهوماً للجميع ... و إن كان به أخطاء إملائية فالعذر من الله ثم منكم ... و شكراً لكم .. و السلام عليكم و رحمة الله و بركاته

ملاحظة : تم إرفاق ملف مضغوط بمحتوى الواجهة الذي تم شرحه للفائدة فقط
حمل المرفقات من هنا

http://www.wuw1.com/showthread.php?p=6269&posted=1#post6269

2010/3/13 23:26 واجهة جد مميزة و شرح دقيق


koom.ma
المشاركات: 2326
المواقع: ahlam.koom.ma
alwaha.koom.ma
atfal.koom.ma
atqs.koom.ma
drdcha.koom.ma
hifz.koom.ma
ihfaz.koom.ma
invest.koom.ma
loc.koom.ma
maghrib.koom.ma
quran.koom.ma
safar.koom.ma
sowar.koom.ma
taqs.koom.ma
upload.koom.ma
web.koom.ma
webring.koom.ma
www.koom.ma
www.koom.ma/md/index.pl

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

تسلم اياديك المباركة على هدا الجهد الطيب :):)
جعله الله في ميزان حسناتك
و نفع الله بك و بخبرتك, كل عبيده المسلمين
و السلام على من اتبع الهدى
1


   
 
الإدارة
استضافة المغرب.كووم © ربيع الأول 1431 ©