مقدمة للمحتوى المتعلق بالهيكل والأداء
هيكل HTML، أداء CSS، سلوك جافا سكريبت، يجب أن يأخذ تخطيط صفحة الويب في الاعتبار مبدأ الفصل بين الهيكل والأداء والسلوك، ركز أولاً على البنية والدلالات، ثم فكر في CSS وJS وما إلى ذلك لتسهيل الصيانة والتحليل لاحقًا...
فكرة الفصل بين البنية والتعبير
أفكار المطورين المبتدئين وطرق الإنتاج: تتداخل div طبقة تلو الأخرى؛ أفكار المطورين المتوسطين وطرق الإنتاج: إزالة div الزائدة عن الحاجة وتبسيطها؛ أفكار المطورين المتقدمة وطرق الإنتاج: تبسيط بنية html إلى أقصى حد، ثم استخدم CSS لإعداده لتقليل التوافق بين html وcss. تجاوز:
القيمة الافتراضية المرئية. لن يتم اقتطاع المحتوى وسيتم عرضه خارج مربع العنصر.
يتم قطع المحتوى المخفي ويكون المحتوى المتبقي غير مرئي.
التمرير سيتم قطع المحتوى، لكن المتصفح سيعرض أشرطة التمرير لعرض المحتوى المتبقي.
تلقائي إذا تم قطع المحتوى، فسيعرض المتصفح أشرطة التمرير لعرض المحتوى المتبقي.
يحدد المعامل inherit أن قيمة السمة الفائضة يجب أن تكون موروثة من العنصر الأصلي.
مسافة بادئة نصية يتم وضع مسافة بادئة للنص في الموضع المستهدف، وليست هناك حاجة لإضافة تسميات إضافية إلى النص. تقليل التعليمات البرمجية الزائدة عن الحاجة
عندما تحصل على رسم تصميم ويب، انتبه أولاً إلى المحتوى النصي لصفحة الويب والعلاقة بين وحدات المحتوى.
ركز على كتابة كود HTML الدلالي بدلاً من التفكير كثيرًا في أسلوب رسم التصميم.
انتظر حتى تتم كتابة HTML وفقًا للمحتوى، ثم فكر في تنفيذ النمط.
أكمل التأثيرات المرئية التي يتطلبها رسم التصميم دون تغيير الهيكل الحالي.
يمكن أن يكون الهامش قيمة سالبة، ومن خلال القيم السالبة يمكن نقل المحتوى! تحقيق الحركة في أربعة اتجاهات.
في البنية (HTML) والنمط (css)، يمكنك أولاً كتابة المحتوى بتنسيق HTML، ثم استخدام الهامش لتحريك الموضع لتحقيق التنضيد، وتقليل الاقتران بين النمط والبنية، وتقليل التعليمات البرمجية
سلخ صفحة الويب وملخصها
تقليل اعتماد HTML على CSS
تصميم صفحة الويب: نفس بنية html، وأنماط مختلفة من css
فيما يلي بعض المشاركات من طلاب Gray Niu WEB
عندما تعاملنا لأول مرة مع إنتاج صفحات الويب، علمنا أن html يمثل البنية، وcss يمثل النمط، وjavascript يمثل السلوك. في إنتاج صفحات الويب، أكدنا دائمًا على مبدأ الفصل بين البنية والأداء إلى HTML بالإضافة إلى ذلك، الفصل هو هل تتحدث عن كتابتها في ملفات مختلفة والرجوع إليها؟ بالطبع لا ومن الدراسة هنا تعلمت أن الفصل ليس مجرد طريقة ولكنه فكرة أيضًا، باختصار هو إحداثي ثنائي الأبعاد، حيث يمثل المحور السيني التطور التكنولوجي والمحور الصادي يمثل صفحة الويب يتم الانتهاء من الفصل وفقًا للتطور التكنولوجي واحتياجات إنتاج صفحات الويب لدينا!
على سبيل المثال: إذا قمنا ببناء منزل، فإن HTML يعادل بنية المنزل، وCSS يعادل الزخرفة اللاحقة. تعتمد جميع صفحات الويب على تأثير واحد عندما نتصفح صفحة الويب سيكون مختلفًا اعتمادًا على العرض، لذلك لدينا جميع أنواع الصفحات لتصفحها، فكيف نخطط لصفحات الويب؟ أولاً، لا تفكر كثيرًا في أنماط CSS، وحاول أن تجعل بنية HTML الخاصة بنا معقولة وموجزة ودلالية، ثم قم بإضافة أنماط CSS وتحسينها!
عندما حصلنا على الصفحة، كان لدى المنتجين المختلفين روابط مختلفة للأسلوب الهيكلي. بناءً على عمق الفهم المختلف للأسلوب الهيكلي، تم تقسيمه مبدئيًا إلى ثلاثة مستويات مختلفة: الابتدائي والمتوسط والمتقدم.
على سبيل المثال، يحتوي مربع الحوار المشترك هذا على ثلاث وحدات أولاً، نحتاج إلى إكمال وحدة واحدة وتنفيذ CTRL+V على الأخرى. إذا حصل منتج مبتدئ على الصفحة، فإنه عادةً ما يقوم بتقسيمها وفقًا للمربعات الكبيرة أعلاه يحتوي div على قسمين صغيرين، عائمين على اليسار واليمين، وimg على اليسار، وp، وh وعلامات أخرى على اليمين، أما بالنسبة لعامل الوقت، فسيتم تنفيذه من خلال تحديد موضع سمة الموضع.
<div class="demo1">
<div class="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>قبل 10 دقائق</span>
<h6>الابتعاد أكثر فأكثر عن الكتاب</h6>
<ص>
هل تراودك أفكار كثيرة عالقة في ذهنك كل يوم وتشعر أنك مشغول للغاية، إذا فكرت في الأمر بعناية، فإنك لا تعرف ما الذي أنت مشغول به حقًا، فقط من خلال تطوير العادات الجيدة، والعناية الجيدة بنفسك، وباتباع أحلامك، يمكنك زيادة الإنتاجية، مما يعني أيضًا تحسين علاقاتك مع العائلة والأصدقاء، لأنه عندما تتغير، يتغير كل شيء من حولك. ما هي عادات الأشخاص ذوي الفعالية العالية التي تستحق التعلم؟
</ص>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>قبل 10 دقائق</span>
<h6>الابتعاد أكثر فأكثر عن الكتاب</h6>
<ص>
هل تراودك أفكار كثيرة عالقة في ذهنك كل يوم وتشعر أنك مشغول للغاية، إذا فكرت في الأمر بعناية، فإنك لا تعرف ما الذي أنت مشغول به حقًا، فقط من خلال تطوير العادات الجيدة، والعناية الجيدة بنفسك، وباتباع أحلامك، يمكنك زيادة الإنتاجية، مما يعني أيضًا تحسين علاقاتك مع العائلة والأصدقاء، لأنه عندما تتغير، يتغير كل شيء من حولك. ما هي عادات الأشخاص ذوي الفعالية العالية التي تستحق التعلم؟
</ص>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">قبل 10 دقائق</span>
<h6>الابتعاد أكثر فأكثر عن الكتاب</h6>
<ص>
هل تراودك أفكار كثيرة عالقة في ذهنك كل يوم وتشعر أنك مشغول للغاية، إذا فكرت في الأمر بعناية، فإنك لا تعرف ما الذي أنت مشغول به حقًا، فقط من خلال تطوير العادات الجيدة، والعناية الجيدة بنفسك، وباتباع أحلامك، يمكنك زيادة الإنتاجية، مما يعني أيضًا تحسين علاقاتك مع العائلة والأصدقاء، لأنه عندما تتغير، يتغير كل شيء من حولك. ما هي عادات الأشخاص ذوي الفعالية العالية التي تستحق التعلم؟
</ص>
</div>
</div>=>3 عروض توضيحية مختلفة تمثل 3 هياكل مختلفة للصفحة ||. عرض الجزء العام من بنية صفحة الكتابة:
/*إعادة ضبط*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0; الحشو: 0؛ نمط القائمة: لا شيء؛ الخط: 12px/1.5 "Arial"، "sans-serif"، "Microsoft Yahei"، "宋体"، "تاهوما"}
/*الأسلوب العام*/
.demo1،.demo2 {
العرض: 600 بكسل؛
الهامش العلوي: 20 بكسل؛
الفائض: مخفي؛
الهامش السفلي: 20 بكسل؛
}
ص{
محاذاة النص: ضبط؛
مسافة بادئة للنص: 2em؛
ارتفاع الخط: 24 بكسل؛
}=>منتج مبتدئ CSS
/*أساسي*/
.ديمو1{
العرض: 600 بكسل؛
الهامش العلوي: 20 بكسل؛
الفائض: مخفي؛
}
.demo1 .FL{
العرض: 100 بكسل؛
تعويم: يسار؛
}
.demo1 .fl img{
الهامش الأيسر: 20 بكسل؛
الحشو: 10 بكسل؛
الحدود: 1 بكسل الصلبة #ccc؛
}
.demo1 .fr{
العرض: 488 بكسل؛
تعويم: حق؛
الحدود: 1 بكسل الصلبة #ccc؛
الموقف: نسبي؛
الحشو: 5 بكسل؛
}
.demo1 .fr تمتد {
الموقف: مطلق؛
اليمين: 18 بكسل؛
أعلى: 5 بكسل؛
}=> المنتج الوسيط لـ css، تم تبسيط البنية مقارنة بالمستوى الأولي، وإزالة div الموجود على اليسار، والاحتفاظ بالجزء الموجود على اليمين؛
/*متوسط*/
.demo2 .الاب {
العرض: 488 بكسل؛
تعويم: حق؛
الحدود: 1 بكسل الصلبة #ccc؛
الموقف: نسبي؛
الحشو: 5 بكسل؛
}
.demo2 .fr تمتد {
الموقف: مطلق؛
اليمين: 18 بكسل؛
أعلى: 5 بكسل؛
}
.ديمو2 إيمج {
الهامش الأيسر: 20 بكسل؛
الحشو: 10 بكسل؛
الحدود: 1 بكسل الصلبة #ccc؛
}=> منتج CSS المتقدم: قم أولاً بكتابة الكود وفقًا للبنية والدلالات، ثم قم بتعيين نمط CSS، مما يقلل من التوافق بين CSS وHTML (حركة المستند، حركة الصورة للخارج، سمات تحديد الموضع)
/*متقدم*/
.ديمو3{
الحدود: 1 بكسل الصلبة #ccc؛
العرض: 488 بكسل؛
الهامش الأيسر: 100 بكسل؛
الحشو: 5 بكسل؛
الموقف: نسبي؛
}
.ديمو3 إيمج {
تعويم: يسار؛
الهامش:-6px 0 0 -86px؛
الحشو: 10 بكسل؛
الحدود: 1 بكسل صلبة #CCCCCC؛
}
.ديمو3 فترة {
الموقف: مطلق؛
أعلى: 10 بكسل؛
اليمين: 20 بكسل؛
}الخلاصة: عندما تحصل على رسم تصميم ويب، يجب عليك أولاً ملاحظة العلاقة بين وحدات النص والمحتوى، والتركيز على كتابة كود HTML الدلالي، ولا تفكر كثيرًا في نمط تخطيط غرفة التصميم، انتظر حتى يصبح كود HTML تم تحريره بعد الانتهاء، فكر في كيفية تنفيذه، وحاول إكمال التأثيرات المرئية التي يتطلبها العمل الفني التصميمي دون تغيير بنية الصفحة الحالية (انقر لتنزيل الكود الأساسي للبنية الكاملة والأداء لتخطيط صفحة الويب البسيط!)
ما ورد أعلاه هو المحتوى التفصيلي الذي تمت مشاركته حول البنية ومبادئ الأداء للتخطيط البسيط لصفحة الويب. لمزيد من المعلومات حول البنية ومبادئ الأداء للتخطيط البسيط لصفحة الويب، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع downcodes.com!