ياريت تعطوني رايكم في موقعي الجديد

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

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

أخي الكريم سأحاول أن أشرح بشئ من التفصيل المدعم بالصور ..

أولا أولا اضبط أبعاد الوضوح لتصبح 1024x768 لتسهيل العمل

اذهب الي الفرونت بيج .. وكما أري فانت قد أدرجت جدول رئيسي يتكون من 4 صفوف (4 rows)

الصف العلوي للبانر والثاني لأزرار القوائم (القائمة الرئيسية ، سجل الزوار ،...) والثالث لهيكل الصفحة ..والاخير للتوقيع وحقوق النشر

الان تأكد من أن عرض هذا الجدول =100% وارتفاعة 100% ولنبدأ بالعمل على صف صف من هذا الجدول ..

وعملنا الان سيكون بالصف العلوي الذي يحتوي البانر الرئيسي للصفحة

دعنا نلقي نظره على شكل البانر وجزء من الصفحة عندما يكون وضوح الشاشة 1024x768

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

وعملنا الان سيكون بالصف العلوي الذي يحتوي البانر الرئيسي للصفحة

لذلك اذهب الي الصف العلوي (row) وادرج جدول بداخله مكون من صف وثلاث أعمدة .. وليكن عرض الجدول = 100% وطوله 100%

الان لنأتي لأعمدة هذا الجدول ..

اضبط عرض الخلية (2)بالوسط ليصبح عرضها مساوي لعرض البانر أى يساوي 768 بيكسل وتجاهل عرض العموديين (1,3) المتبقيين

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

الان انتقل لبرنامج الفوتوشوب وقم بقص 3 بيكسل من الجهة اليسري للبانر ومن ثم حدد الجزء المتبقي وقم بنقله لصفحة جديده وقم بحفظها لاستخدامها بدل البانر القديم ..

عد الان الى الفرونت بيج و ادرج البانر في الخليه رقم 2

الان انتقل لبرنامج الفوتوشوب وافتح صورة البانر الجديد داخله وخذ نسخة منها للعمل عليها ..

قم بتحديد عرض خلية واحدة من الشبكه التي بالبانر من الجهة اليمني كما بالشكل التالي ..

قم بنسخ الجزء المحدد الى صفحة جديدة بالفوتوشوب ومن ثم قم بحفظها بامتداد gif

كرر الخطوة السابقة للحصول على شريحة من البانر للجهة اليسرى بنفس الطريقة واحفظها ..

الان نعود الي الفرونت بيج ..

كرر الخطوة السابقة للحصول على شريحة من البانر للجهة اليسرى بنفس الطريقة واحفظها ..

الان نعود الي الفرونت بيج ..

اذهب الى خواص الخليه رقم 1 اليمني .. واختر تحديد صورة للخلفيه ومن استعراض اختر الشريحة التي حصلنا عليها من الفوتوشوب للجهة اليمني من البانر ..

لتحصل على ما يلي ..

كرر ذلك للجهة اليسري (الخليه رقم 3) 

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

واليك البانر بوضوح 1024x768

اما ان عرض المستخدم الصفحة بوضوح 800x600 فسيكون حال البانر كما يلي ..

هكذا نكون أتممنا بحمد الله تعديل البانر ..

للنتقل للصف الثاني الذي يحوي أزرار القوائم ولنسميه سطر القوائم

فكما رأيت بالصورة الأولى انه مزاح لجهي اليسار .. سنحاول أن نحل هذة المشكله ..

سنقوم بتقسيم سطر القوائم الى 3 أقسام .. والسبب أننا لو ابقيناه جزء واحد وحاولنا تعديله كما بالبانر فان المشكله التي ستظهر هي أن الاطراف لها شكل معين بسبب الانحناء لذا لا يمكننا أن نأخذ من الأطلراف مقطع للتكرار سيكون شكلها ليس كما يجب ..

الان انتقل للفوتوشوب لنقوم بعملية التقسيم ..

حدد جزء مناسب من الجهة اليمني وليكن 30 بيكسل

قم بقص الجزء المحدد ومن ثم الصقه بصفحة جديده واحفظة ..

كرر العمليه للجزء الأيسر من سطر القوائم ..

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

ومن ثم قم بقص هذا الجزء واحفظة بصفحة جديده لاستخدامه لاحقا في صفحتك ..

لنعود الأن الى الفرونت بيج ..

ادهب للصف المخصص لسطر القوائم وأدرج به جدول من 5 أعمدة وسطر واحد ..

وتأكد من أن عرص الجدول الجديد = 100% وان طوله = 100%

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

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

وكذلك اذهب للخلية الوسطي ( الثالثة من جهة اليمين ) وحدد عرضها بالعرض المتبقي من سطر الأوامر .. وهو لدي 711(771-30 – 30)

سيصبح لديك الشكل التالي ..

الأن علينا ملئ الخلايا الفارغة ..

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

نقوم بعمل نسخة من الصورة للعمل عليها

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

وكذلك نكرر ما سبق لاخذ شريحة من الطرف الأيسر لسطر القوائم لنملأ به الخلية الرابعة ..

ومن ثم عند ملئ الخلية الثانية والرابعة بالشرائح المحفوظه سيكون لدينا شريط قوائم لا تتغير معالمه عند تغير وضوح الشاشة

سطر القوائم عند وضوح 1024x768

ننتقل الأن للجزء الأخير وهو هيكل الصفحة ..( الصف الثالث)

داخل خليه هيكل الصفحة ادراج جدول من 7 أعمدة و صف واحد بعرض 100 % وطول 100%

الخلية الاولى من جهة اليمين تضع فيها القائمة اليمني بعد تثبيت عرض الخليه ب 130 بيكسل كما أشرت في مشاركاتي السابقة والأمر ذاته للعمود السابع( الاخير)في الجهة اليسري ..

الأن بقي لدينا 5 أعمدة للعمل عليها ..

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

الأن بقي لدينا العمودين الثالث والخامس وهما سيحويان مواضيع الموقع ..

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

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

كان الله بعونك اخي عليك فتح كل صورة على حدا .. لا اعرف سبب عدم ظهور الصور بالشرح !!

والله شرح رائع ومجهود كبير اختى فلسطينية

بالنسبة للصور لا أعرف هل السبب ان IMG بحروف capital رغم انها طبيعية هكذا .. عموما محلولة إن شاء الله

شكرا لك اخت فلسطينية كتيييييييييييييييييييييييييييييييييييييير إحنا تعبناكي معنا .

والله شرحك حلو وانا إن شاء الله في اقرب وقت ساحاول ان انفذة.

ابو علاء

شكرا للجميع بدون استثناء

ابو علاء