D3m-fny
11-Jan-2007, 12:12 AM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
اخواني احببت ان اقدم لكم طريقة عمل الاطارات المتضمنة واملي في الله ان تعم الفائدة لكم جميعا ً
واتمنى ايضا ًَ ان لايكون الدرس مكرر لاني بحثت ولم اجد هذا الدرس فقلت لما لا اطرح
هذه الطريقة التي طالما تسائل الكثيرين عنها لا احب ان اطيل عليكم ولكن اتمنى من استصعب عليه الدرس ان لا يتردد في السؤال
اولا ً المثال على الدرس يمكنكم مشاهدة المثال على الدرس
من خلال موقعي
www.shqawe.net (http://www.shqawe.net/)
وللعلم اقسم بالله انه ليس اشهاار او دعاية لموقعي فمن كان لديه موقع اخر فليخبر المشرفين او المراقبين ليحذفوا موقعي ويضعوا الموقع الاخر وانما لرؤية ما سوف نعمل عليه .
ثانيا ً البرامج المستخدمه هي
الفوتوشوب لتصميم الواجهه
الفرونت بيج وهو للعمل على الاطارات وهو الاهم
بسم الله نبدأ
اولا ً لنقول اننا صممنا هذا التصميم لواجهه بسيطه طبعا ً لا تدققون على التصميم مسويه على عجله يعني ما اخذ خمس دقايق فقط للشرح التصميم
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12251 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12251)
الان انتهينا من التصميم وحفظناه بصيغة gif او jpg وباقي علينا تقطيعه والتقطيع مهم وانتبهوا لي انا كيف قطت شفتوا المربع اللي في اليسار الكبير هذا بيكون مكان الاطار المتضمن يعني لازم تقطعونه بعناية ودقة فائقة يعني حتى الحدود والظل اذا كنتم حاطين ظل لازم تقطعونه معها . لاحظوا الصورة التاليه لمعرفة طريقة التقطيع
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12252 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12252)
هنا ممكن احد يجي يسألني ويقول ياخي انا ماعندي دقة في التقطيع يعني اذا جيت اقطع الحدود ما تطلع مضبوطه اقوله بكل بساطه كبر التصميم يعني اضغط زر
Ctrl مع زر علامة الجمع اللي هو + بحيث تكبر التصميم الى اكبر شيء 1200 بيكسل وبعدين تروح وبتلقى عندك الحدود طالعه وتقدر تحددها براحتك اتمنى الصورة وضحت .
الان نحفظ عملنا عن طريق
File >save for ***
ونحفظ العمل باسم index بما انه واجهه
الان قفل الفوتوشوب وانتقل للفرونت بيج ونفتح ملف الواجهه واللي اسمه index بواسطة الفرونت بيج
وراح بيكون كالشكل التالي
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12253 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12253)
والان كل اللي عليك انك تصمم الصفحات يعني مثلا ً الصور او القصائد تروح وتصمم لك صفحة خاصه غير صفحة الواجهه وتكون القصيدة في الوسط او تكون في جدول وتعطي الجدول عرض 100 % اوكي واحفظ الصفحه وخلها على جنب لاننا بنرجع لها .
الان شوف معي الواجهه نروح على المربع اللي في النص ونضغط عليه ضغطتين وناخذ مقاساته ونكتبها في ورقه يعني الطول والعرض وبعدين احذف الصور وبتكون مثل الشكل التالي بلون الخلفية :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12254 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12254)
الان نضع المؤشر داخل المربع اللي حذفنا صورته قبل شوي
ومن قائمة ادراج نختار اطار متضمن
راح يندرج معنا اطار متضمن بس بتلاحظون ان الاطار ماهوب جاي على كامل الخلية وش بنسوي الان مشكلة صح
لا مشكلة ولا شيء وسع صدرك انت وياه الدنيا ما تستاهل انا قلت في الخطوة السابقة انكم تحفظون مقاسات الصورة الطول والعرض صح والا انا غلطان
الان كل اللي عليك تضغط ضغطتين على الاطار المتضمن وتحط مقاساته نفس مقاسات الصورة وبيصير ممتلي على كل المربع ولاحظوا الصورة التالية بعداضافتي للاطار وتعديل مقاساته :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12255 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12255)
الان بتلاحظون ان الواجهه تلخبطت وطلعت فراغات ما عليكم منها لو اي واحد فيكم سوى عرض للتصميم راح يلاحظ ان التصميم متامسك ومافيه اي فراغ ولكن هذا خلل في لغة برمجة الفرونت بيج
طيب الان اضفنا الاطار وش باقي. باقي عاد نحط الصفحات طبعا ً المنتدى وما يجي في الاطار المتضمن لكن انا قلت لكم صمم صفحة فيها قصيدة مكتوبة صح
الان ننتقل الى زر القصائد ونضغط على الصورة اللي مكتوب عليها القصائد بالماوس الايمن ونختار ارتباط تشعبي وراح تفتح لنا الصفحه التالية
ركزوا معي في النقطه هذي لان هذي هي زبدة الموضوع اللي ماراح يفهمها ما راح يفهم الدرس كله
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12256 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12256)
الان تختارون الصفحة وانا هنا اخترت الصفحه المسماه q9a2d بس لا تقفلون دقيقه شفتوا المربع اللي مظلل بالاحمر اضغطوا عليه وبيفتح لكم الاطار هذا :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12257 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12257)
الان هنا الزبدة شفتوا المربع اللي مظلل على الحرف والرقم هذولي
I1 <<<< هذا هو اسم الاطار المتضمن اللي سوناه انت اختار هذا واضغط موافق
والان جرب عملك وشف راح تلاحظ عند الضغط على كلمة قصائد راح تفتح الصفحه داخل المربع اللي سويناه
انت عاد طبق الكلام هذا على باقي الازرار
وبكذا اقدر اقول الف مبروك عليكم الاطارات المتضمنه واعذروني يا اخواني ماادري احس الشرح ملخبط لكن هذا اللي قدرني لله عليه وانا تحت امركم بأي سؤال الين باذن الله توصل الفكره للجميع
وكل اللي اطلبه منكم الدعاء لي ولوالدي بالمغفرة والرحمة
وتقبلوا احترامي وتقديري
منقول طبعا
السلام عليكم ورحمة الله وبركاته
اخواني احببت ان اقدم لكم طريقة عمل الاطارات المتضمنة واملي في الله ان تعم الفائدة لكم جميعا ً
واتمنى ايضا ًَ ان لايكون الدرس مكرر لاني بحثت ولم اجد هذا الدرس فقلت لما لا اطرح
هذه الطريقة التي طالما تسائل الكثيرين عنها لا احب ان اطيل عليكم ولكن اتمنى من استصعب عليه الدرس ان لا يتردد في السؤال
اولا ً المثال على الدرس يمكنكم مشاهدة المثال على الدرس
من خلال موقعي
www.shqawe.net (http://www.shqawe.net/)
وللعلم اقسم بالله انه ليس اشهاار او دعاية لموقعي فمن كان لديه موقع اخر فليخبر المشرفين او المراقبين ليحذفوا موقعي ويضعوا الموقع الاخر وانما لرؤية ما سوف نعمل عليه .
ثانيا ً البرامج المستخدمه هي
الفوتوشوب لتصميم الواجهه
الفرونت بيج وهو للعمل على الاطارات وهو الاهم
بسم الله نبدأ
اولا ً لنقول اننا صممنا هذا التصميم لواجهه بسيطه طبعا ً لا تدققون على التصميم مسويه على عجله يعني ما اخذ خمس دقايق فقط للشرح التصميم
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12251 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12251)
الان انتهينا من التصميم وحفظناه بصيغة gif او jpg وباقي علينا تقطيعه والتقطيع مهم وانتبهوا لي انا كيف قطت شفتوا المربع اللي في اليسار الكبير هذا بيكون مكان الاطار المتضمن يعني لازم تقطعونه بعناية ودقة فائقة يعني حتى الحدود والظل اذا كنتم حاطين ظل لازم تقطعونه معها . لاحظوا الصورة التاليه لمعرفة طريقة التقطيع
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12252 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12252)
هنا ممكن احد يجي يسألني ويقول ياخي انا ماعندي دقة في التقطيع يعني اذا جيت اقطع الحدود ما تطلع مضبوطه اقوله بكل بساطه كبر التصميم يعني اضغط زر
Ctrl مع زر علامة الجمع اللي هو + بحيث تكبر التصميم الى اكبر شيء 1200 بيكسل وبعدين تروح وبتلقى عندك الحدود طالعه وتقدر تحددها براحتك اتمنى الصورة وضحت .
الان نحفظ عملنا عن طريق
File >save for ***
ونحفظ العمل باسم index بما انه واجهه
الان قفل الفوتوشوب وانتقل للفرونت بيج ونفتح ملف الواجهه واللي اسمه index بواسطة الفرونت بيج
وراح بيكون كالشكل التالي
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12253 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12253)
والان كل اللي عليك انك تصمم الصفحات يعني مثلا ً الصور او القصائد تروح وتصمم لك صفحة خاصه غير صفحة الواجهه وتكون القصيدة في الوسط او تكون في جدول وتعطي الجدول عرض 100 % اوكي واحفظ الصفحه وخلها على جنب لاننا بنرجع لها .
الان شوف معي الواجهه نروح على المربع اللي في النص ونضغط عليه ضغطتين وناخذ مقاساته ونكتبها في ورقه يعني الطول والعرض وبعدين احذف الصور وبتكون مثل الشكل التالي بلون الخلفية :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12254 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12254)
الان نضع المؤشر داخل المربع اللي حذفنا صورته قبل شوي
ومن قائمة ادراج نختار اطار متضمن
راح يندرج معنا اطار متضمن بس بتلاحظون ان الاطار ماهوب جاي على كامل الخلية وش بنسوي الان مشكلة صح
لا مشكلة ولا شيء وسع صدرك انت وياه الدنيا ما تستاهل انا قلت في الخطوة السابقة انكم تحفظون مقاسات الصورة الطول والعرض صح والا انا غلطان
الان كل اللي عليك تضغط ضغطتين على الاطار المتضمن وتحط مقاساته نفس مقاسات الصورة وبيصير ممتلي على كل المربع ولاحظوا الصورة التالية بعداضافتي للاطار وتعديل مقاساته :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12255 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12255)
الان بتلاحظون ان الواجهه تلخبطت وطلعت فراغات ما عليكم منها لو اي واحد فيكم سوى عرض للتصميم راح يلاحظ ان التصميم متامسك ومافيه اي فراغ ولكن هذا خلل في لغة برمجة الفرونت بيج
طيب الان اضفنا الاطار وش باقي. باقي عاد نحط الصفحات طبعا ً المنتدى وما يجي في الاطار المتضمن لكن انا قلت لكم صمم صفحة فيها قصيدة مكتوبة صح
الان ننتقل الى زر القصائد ونضغط على الصورة اللي مكتوب عليها القصائد بالماوس الايمن ونختار ارتباط تشعبي وراح تفتح لنا الصفحه التالية
ركزوا معي في النقطه هذي لان هذي هي زبدة الموضوع اللي ماراح يفهمها ما راح يفهم الدرس كله
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12256 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12256)
الان تختارون الصفحة وانا هنا اخترت الصفحه المسماه q9a2d بس لا تقفلون دقيقه شفتوا المربع اللي مظلل بالاحمر اضغطوا عليه وبيفتح لكم الاطار هذا :
http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12257 (http://www.traidnt.org/up/pic.php?u=875BU4FY&i=12257)
الان هنا الزبدة شفتوا المربع اللي مظلل على الحرف والرقم هذولي
I1 <<<< هذا هو اسم الاطار المتضمن اللي سوناه انت اختار هذا واضغط موافق
والان جرب عملك وشف راح تلاحظ عند الضغط على كلمة قصائد راح تفتح الصفحه داخل المربع اللي سويناه
انت عاد طبق الكلام هذا على باقي الازرار
وبكذا اقدر اقول الف مبروك عليكم الاطارات المتضمنه واعذروني يا اخواني ماادري احس الشرح ملخبط لكن هذا اللي قدرني لله عليه وانا تحت امركم بأي سؤال الين باذن الله توصل الفكره للجميع
وكل اللي اطلبه منكم الدعاء لي ولوالدي بالمغفرة والرحمة
وتقبلوا احترامي وتقديري
منقول طبعا