في السلاسل الثلاث السابقة من المقالات، قدمت مقدمة تفصيلية لتخطيط الشبكة ذات المربعات التسعة. لنبدأ بالتخطيط الأساسي ونشرح المشكلات التي تمت مواجهتها أثناء عملية الإنتاج واحدة تلو الأخرى. هذه المقالات الثلاثة كلها تفسيرات للمبادئ الأساسية، ولا توجد حالة تطبيق قوية لإثبات صحة هذا المبدأ. قد يكون بعض الأصدقاء غير صبورين بعض الشيء، وقد طلب مني بعض مستخدمي الإنترنت تقديم الحالات. لذلك، في هذه المقالة، سأقدم حالة Jiugongge - لاعب رائع جدًا.
في مقالتي الثالثة "شبكة Nine-Gong المثالية ذات ثلاث طبقات من الفصل"، قدمت استخدام JS لتغليف علامات html لتقليل الهياكل الزائدة عن الحاجة، ولكن هذه الطريقة معيبة أيضًا إذا قام المستخدم بتعطيل JS، فسيؤدي ذلك إلى فشل البنية لا يتم عرضها على الإطلاق، بالطبع، في ظل ظروف الإنترنت الحالية، لا ينبغي أن تكون هذه مشكلة كبيرة، ولكن بالنظر إلى بعض تصميمات صفحات الويب الأجنبية، فإن هذا الاعتبار ضروري. يتطلب هذا تخفيضًا أنيقًا وإضعافًا وظيفيًا، لكن النتيجة هي نفسها عدم استخدام تغليف JS. لذلك، لا يمكنك الحصول على كعكتك وتناولها أيضًا. مرحبًا، هذه كلها استطرادات، دعنا نلقي نظرة على كيفية تصميم أحد لاعبينا الرائعين!
الانطباعات الأولى تأتي أولاً، الجميع يريد أن يرى النتائج أولاً، حسناً، لنعرض لقطات الشاشة أولاً:
الشكل 1
بشكل عام، بالنسبة لمثل هذا اللاعب الملون، يلزم ضبط قيم العرض والارتفاع ديناميكيًا، لذلك يعد استخدام شبكة مكونة من تسعة مربعات لمثل هذه الرسومات خيارًا مناسبًا للغاية.
بالطبع، لن أكرر هذا المبدأ، يرجى الرجوع إلى " تخطيط شبكة Nine-Gong غير القابل للكسر " في سلسلة مقالاتي التي تعتمد عليها حالة التطبيق هذه. وبطبيعة الحال، لا تزال هناك بعض التقنيات في الإنتاج التي يمكن أن تساعدنا على إكمال المهمة بشكل أفضل. على سبيل المثال، يمكن أن تقلل تقنية CSS Sprites (يمكنك الاطلاع على مقالتي الأخرى " تقنية تحسين خلفية الصورة CSS Sprites ") بشكل مفيد من عدد طلبات الصور، بشكل عام، بالنسبة للتطبيقات ذات تخطيط الشبكة المربعة التسعة، هناك المزيد من الصور، لأنه ويتطلب الأمر ما لا يقل عن ثماني صور لتزيين الزوايا الأربع والجوانب الأربعة. لذلك، فإن كيفية تقليل عدد الصور أمر يجب على المصممين أخذه بعين الاعتبار.
في هذا المثال، قمت بدمج صور الزوايا الأربع في صورة واحدة، بحيث تبدو كما يلي:
الشكل 2
في الصورة أعلاه، لكي يتمكن الجميع من الرؤية بعناية أكبر، قمت برسم تقاطعات عدة صور بخطوط مساعدة وقمنا بتطبيق مبدأ تحديد موضع الصورة لتثبيتها في الزوايا الأربع. تم تعريفها في ورقة الأنماط على النحو التالي:
.t_l{ الخلفية:url(../image/round.gif) الجزء العلوي الأيسر بدون تكرار؛}
/*الزاوية اليسرى العليا*/
.t_r{background:url(../image/round.gif) عدم تكرار أعلى اليمين؛}
/*الزاوية اليمنى العليا*/
.b_l{background:url(../image/round.gif) عدم تكرار الجزء السفلي الأيسر؛}
/*الزاوية السفلية اليسرى*/
.b_r{ الخلفية:url(../image/round.gif) عدم تكرار الجزء السفلي الأيمن؛}
/*الزاوية السفلية اليمنى*/