يمكن أيضًا اعتبار تخطيط صفحة الويب الخاصة بـ CSS بمثابة عمل منهجي. قد يتم إكمال تطوير موقع DIVCSS بواسطة عدة أشخاص بالتعاون وفريق، وهذا يتضمن العديد من مشكلات التشغيل المعيارية، حتى لو تم تطويره بواسطة شخص واحد، بقدر معين المعرفة مطلوبة بشكل منظم وموحد، وهذا مقال أعيد طباعته من Blue، وهو فعال للغاية وقد لخص المؤلف الكثير من الخبرة العملية، ويمكن للجميع الرجوع إليه والتعلم منه. ملخص هذه المواصفات عبارة عن مواصفات تطوير ومرجع للغة البرمجة النصية. هذه المواصفات ليست شرطًا ثابتًا يجب مراعاته بدقة، ويجب استخدامها بمرونة وإجراء تعديلات معينة في ظل ظروف خاصة. ومع ذلك، يرجى عدم تغيير المواصفات حسب الرغبة. إذا كانت لديك أي أسئلة، فيرجى الاتصال بي في الوقت المناسب وسأقوم على الفور بتغيير عينات التعليمات البرمجية ذات الصلة والمستندات الخاصة بهذه المواصفات. المتطلبات الأساسية 1. افتح ثلاثة أدلة فرعية للصور العامة المؤقتة في الدليل الجذر لموقع الويب، ثم افتح دليلًا فرعيًا للوسائط حسب الحاجة. يحتوي دليل الصور على الصور العامة التي تستخدمها الصفحات في أعمدة مختلفة، مثل شعارات الشركة، واللافتات، والقوائم، والأزرار وما إلى ذلك؛ يحتوي الدليل الفرعي المشترك على ملفات عامة مثل CSS وJS وPHP وما إلى ذلك؛ ويحتوي الدليل الفرعي المؤقت على نصوص وصور ومواد أصلية أخرى يقدمها العملاء؛ ويحتوي الدليل الفرعي للوسائط على ملفات الوسائط المتعددة فلاش، افي، وقت سريع، الخ. 2. من حيث المبدأ، يجب فتح دليل لكل عمود في الدليل الجذر وفقًا لبنية عمود الصفحة الرئيسية، وإذا لزم الأمر، يجب فتح دليل فرعي للصور والوسائط في دليل كل عمود لوضع الصور والوسائط حصريًا لهذا العمود، إذا كان هذا العمود يحتوي على الكثير من المحتوى ومقسمًا إلى العديد من الأعمدة الثانوية، فيمكن فتح أدلة أخرى وفقًا لذلك. 3. غالبًا ما يكون هناك العديد من الملفات في الدليل المؤقت. يوصى بفتح دليل مسمى حسب الوقت لتصنيف وتنظيم المعلومات المقدمة من العملاء واحدًا تلو الآخر. 4. ما لم تكن هناك ظروف خاصة، يجب أن تستخدم أسماء الدلائل والملفات مزيجًا من الأحرف الإنجليزية الصغيرة والأرقام والشرطات السفلية. ويجب عدم تضمين الأحرف الصينية والمسافات والأحرف الخاصة. يرجى استخدام اللغة الإنجليزية كدليل عند التسمية لا تستخدم نظام pinyin إلا عند الضرورة القصوى كاسم دليل، فقد أثبتت التجربة أن المجلدات المسماة بنظام pinyin غالبًا ما يكون من الصعب فهمها حتى بعد مرور شهر. البرمجة النصية يجب أن يكون لدينا مفهوم متسق للأسلوب العام للسيناريو، مما يعني أن أسلوب السيناريو الذي كتبته بعد شهر واحد يتوافق مع أسلوب السيناريو الذي كتبته قبل شهر، وأن أسلوب السيناريو الذي كتبه يكون المطورون المختلفون في نفس مجموعة العمل متسقين، لأننا لا نستطيع التطوير بمعزل عن الآخرين إلى الأبد، فقد تتعاون مع نفسك منذ ثلاثة أشهر في أي وقت (يتطلب عميلك مراجعة)، وغالبًا ما يتعين عليك تطوير مشروع مع زملاء مختلفين في studio، وقد يُطلب منك أيضًا تعديل الأشخاص الذين استقالوا من البرامج النصية التي تم تطويرها، وبالطبع، يمكنك أيضًا ترك المشروع للزملاء اللاحقين. 1. القالب العالمي لملفات Html: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] العلامات الوصفية الأخرى div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] تحدد ورقة الأنماط تعريف وظيفة Javascript من جانب العميل وعملية التهيئة div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] تجديد: 2. بالنسبة للصفحات التي تسمح باسترجاع النص الكامل، ومن أجل تمكين الاسترجاع الفعال بواسطة محركات البحث على الإنترنت، يجب إضافة الكلمات الرئيسية والعلامات الوصفية الوصفية بين <head></head> لـ html في الصفحة الرئيسية للقناة ، على سبيل المثال: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] 3. نموذج التعليمات البرمجية لتنسيق ملف CSS: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] ما يحتاج إلى اهتمام خاص هنا هو أن ترتيب a:link a:visited a:hover a:actived يجب أن يكون متوافقًا تمامًا مع نموذج التعليمات البرمجية أعلاه، وإلا فستحدث مشاكل أكثر أو أقل. بالإضافة إلى ذلك، نشترط أن إعادة التعريف تأتي أولاً، والفئات الزائفة تأتي في المرتبة الثانية، ويأتي التخصيص أخيرًا، مما يسهل عليك وعلى الآخرين القراءة! من أجل ضمان اتساق حجم الخط في المتصفحات المختلفة، يوصى بتحديد حجم الخط بالنقاط pt والبكسل px. يستخدم pt عمومًا 9pt و11pt في عهد أسرة سونغ الصينية، ويستخدم px عمومًا 12px و14.7px في الصينية. Songti هو حجم خط محسّن، أو غامق أو عندما تكون خطوط Song غامقة، فإن أحجام الخطوط 11pt و14.7px تكون أكثر ملاءمة بشكل عام. عند كتابة <table> لتداخل بعضها البعض، اتبع بدقة المعيار بالنسبة إلى <table> واحد، فيجب محاذاة <table><tr>، ويجب وضع مسافة بادئة لـ <td> بمسافتين بنصف العرض، وإذا كان هناك أي مسافة بادئة. أخرى بالنسبة للجداول المتداخلة، يتم أيضًا وضع مسافة بادئة للجدول <table> بمسافتين بنصف العرض. إذا لم يكن هناك جدول متداخل في <td>، فيجب أن تكون علامة الإغلاق لـ </td> على نفس السطر مثل <td>، بدون سطر. فواصل. كما نلاحظ، لا ينبغي أن يكون هناك مثل هذا الكود في الكود المصدري: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] بدلا من ذلك يجب أن تبدو مثل هذا: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] وذلك لأن المتصفح يعتقد أن السطر الجديد يعادل مساحة نصف العرض. طريقة الكتابة غير المنتظمة المذكورة أعلاه تعادل إضافة مسافة نصف العرض عن غير قصد مكتوب مثل هذا: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com] يجب أن يكون <table> الذي ينتمي إلى نفس المستوى محاذاة إلى اليسار، بالإضافة إلى ذلك، لا يُسمح بوجود خلايا فارغة لا تحتوي على أي محتوى، ويجب كتابتها بين <td> و</td> يكون الارتفاع أقل من 12 بكسل، ويجب إدراج صورة gif شفافة مقاس 1*1 بين <td> و</td>، وذلك لأن بعض المتصفحات تعتبر الخلايا الفارغة غير قانونية ولن تفسرها. إذا كان ترتيب التعليمات البرمجية فوضويًا، فيمكنك إعادة ترتيبه من خلال الأمر->تطبيق تنسيق المصدر في DW3! 5. هناك أيضًا معايير موحدة لكيفية كتابة العرض والارتفاع. بشكل عام، بالنسبة للجداول التي تحتوي على عمود واحد فقط، يتم كتابة العرض في علامة <table>؛ أما بالنسبة للجداول التي تحتوي على صف واحد فقط، فيتم كتابة الارتفاع في علامة <table> بالنسبة للجداول التي تحتوي على صفوف متعددة وأعمدة متعددة، تتم كتابة الجدول والعرض والارتفاع في علامة <td> للصف أو العمود الأول. باختصار، اتبع مبدأ واحدًا: يجب ألا يكون هناك أكثر من ارتفاع وعرض واحد يتحكم في حجم نفس الخلية. تأكد من صحة أي عرض وارتفاع الكود، يجب أن يكون موجودًا في التغييرات التي تظهر في المتصفح. ليس من السهل القيام بذلك، فهو يتطلب وقتا طويلا من الممارسة والتفكير. المبادئ العامة 1. قبل ترتيب الجدول، يرجى التفكير مليًا في الحل الأفضل. حاول التحكم في تداخل الجداول ضمن ثلاثة مستويات، وحاول تجنب العلامتين <colspan> <rowspan> الكثير من المتاعب. 2. يجب أن تحاول صفحة الويب تجنب استخدام جدول كبير بالكامل. يتم تضمين كل المحتوى داخل هذا الجدول الكبير، لأنه عندما يفسر المتصفح عناصر الصفحة، فإنه يعرضها واحدة تلو الأخرى في وحدات الجداول إذا تم وضعه في جدول كبير، فإن النتيجة المحتملة هي أنه عندما يكتب الزائر عنوان URL، سيواجه أولاً مساحة فارغة لفترة طويلة، ثم سيظهر محتوى الويب بالكامل في نفس الوقت. إذا كان يجب عليك القيام بذلك، استخدم العلامة <tbody> بحيث يمكن عرض الجدول الكبير في أجزاء. 3. في التنضيد، غالبًا ما نواجه الحاجة إلى وضع مسافة بادئة في السطر الأول، ولا تستخدم مسافات كاملة العرض لتحقيق التأثير. تتمثل الطريقة القياسية في تحديد p { text-indent: 2em } في ورقة الأنماط ثم أضف علامة <p> لكل فقرة، يرجى ملاحظة أنه في الظروف العادية، يرجى عدم حذف علامة الإغلاق </p>. 4. من حيث المبدأ، نحظر استخدام <img width=? height=?> للتداخل بشكل مصطنع مع حجم عرض الصورة، ويوصى بعدم تضمين العرض والارتفاع في علامة <img> هناك سمتان لأنه أثناء عملية الإنتاج، غالبًا ما تحتاج الصور إلى التعديل بشكل متكرر، وهذا يمكن أن يتجنب التدخل البشري في حجم عرض الصورة ويزيد من وظائف المتصفح لم تقم الصفحة بتحميل الصورة، عند إضافة الصورة، لن يتم استبعاد حجم الصورة في الموقع، مما قد يتسبب في تغيير صفحة الويب الارتعاش أثناء التحميل (إذا تم إدراج الصورة في جدول بحجم ثابت فلن تحدث هذه الظاهرة)، خاصة عندما يكون حجم الصورة كبيرًا، ستكون هذه الظاهرة واضحة، لذلك عندما يتوقع أن يكون ذلك واضحًا عندما إذا حدث الموقف الذي يتسبب في اهتزاز صفحة الويب، يرجى التأكد من إرفاق العرض بـ <img> في النهاية. وسمة الارتفاع. 5. من أجل تعظيم وظيفة التنضيد التلقائي للمتصفح، يرجى محاولة عدم استخدام <br> للتدخل يدويًا في تجزئة النص الكامل. 6. يجب أن تكون هناك مسافة نصف العرض بين الكلمات في اللغات المختلفة، باستثناء ما قبل رمز الرأس وبعد رمز الذيل. يجب أن تكون علامات الترقيم بين الأحرف الصينية علامات ترقيم كاملة العرض، ويجب أن تستخدم الأقواس حول الحروف والأرقام الإنجليزية النصف. -أقواس العرض. 7. يجب تنفيذ جميع أحجام الخطوط باستخدام أوراق الأنماط، ويمنع ظهور علامات <font size=?> على الصفحة. 8. يرجى عدم وجود أكثر من مساحة متتالية في صفحة الويب واستخدام أقل قدر ممكن من المسافات ذات العرض الكامل (ضمن مجموعة الأحرف الإنجليزية، ستصبح المسافات ذات العرض الكامل أحرفًا مشوهة. استخدم المسافة البادئة للنص والحشو والهامش). وhspace وvspace والشفافية لتحقيق المساحة البيضاء لصور GIF. 9. عند المزج بين اللغة الصينية والإنجليزية، فإننا نبذل قصارى جهدنا لتعريف اللغة الإنجليزية والأرقام كخطوط verdana وarial. 10. يوصى بتحديد تباعد الأسطر بالنسبة المئوية، قيم تباعد الأسطر الشائعة الاستخدام هي ارتفاع الخط:120%/150%. 11. جميع المسارات في موقع الويب تستخدم مسارات نسبية بشكل عام، لا يلزم كتابة مسار الرابط إلى الملف الافتراضي في دليل معين بالاسم الكامل، على سبيل المثال، لا يتعين علينا القيام بذلك: <a href= ”aboutus/index.htm”> ولكن يجب أن يكون هكذا:<a href=”aboutus/”> 12. استخدم خطوطًا أكبر عند تضمين النص في الرسومات. يوصى بعدم تضمين النص في الرسومات. 13. يتم تعريف "حجم صفحة الويب" على أنه مجموع أحجام الملفات لجميع صفحات الويب، بما في ذلك ملفات HTML وجميع الكائنات المضمنة. يفضل المستخدمون المواقع السريعة وليس الجديدة. بالنسبة لمستخدمي المودم، من المناسب الاحتفاظ بحجم الصفحة أقل من 34 كيلو بايت. قواعد تسمية الملفات 1. يجب أن يحتوي كل دليل على ملف html افتراضي، ويجب أن يكون اسم الملف Index.htm. 2. يجب أن يستخدم اسم الملف مجموعة من الأحرف الإنجليزية الصغيرة والأرقام والشرطات السفلية. 3. تتمثل الأيديولوجية التوجيهية لمبدأ التسمية في تمكين نفسك وكل عضو في مجموعة العمل من فهم معنى كل ملف بسهولة. والثاني هو أنه عندما نستخدم أمر "الفرز حسب الاسم" في مجلد، يكون نفس المجلد كبيرًا يمكن ترتيب فئات الملفات معًا حتى نتمكن من البحث والتعديل والاستبدال وحساب التحميل وما إلى ذلك. 4. يستخدم ما يلي عمود "الأخبار" (بما في ذلك "الأخبار المحلية" و"الأخبار الدولية") لشرح مبدأ تسمية ملفات html: 5. تتبع مبادئ تسمية الصور المعايير التالية: ☆يُستخدم جزء الذيل للتعبير عن المعنى المحدد للصورة. ☆ فيما يلي بعض الأمثلة، يجب أن تكون قادرًا على فهم معنى الصور في لمحة: div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com]
<أتش تي أم أل>
<!–
المولد: استوديو التصميم الفرعي ( www.eastline.net.cn )
بيانات الإنشاء: 2000-8-1
الكاتب الأصلي : خط الشرق
->
<الرأس>
<title>عنوان الوثيقة</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<اسم التعريف = "المؤلف" المحتوى = "الخط الشرقي">
<link rel="stylesheet" type="text/css" href="style/style.css">
</الرأس>
<body bgcolor="#ffffff">
… …
</الجسم>
من أجل التأكد من أن موقع الويب متوافق مع الجيل التالي من معايير لغة الويب XML، يجب أن تكون جميع سمات علامة HTML محاطة بعلامات اقتباس مفردة أو علامات اقتباس مزدوجة، أي أنه يجب أن نكتب <a href="url"> بدلاً من < أ href=url>.
<meta name=”keywords” content=”شينكانسن الشرقي، سيارات، شراء سيارات”/>
<meta name=”description” content=”خط كانجين الشرقي الجديد، المحطة الأولى في العالم لمعلومات السيارات الصينية”/>
<نمط النوع = "نص/CSS">
<!—
ع { مسافة بادئة للنص: 2em }
body { عائلة الخط: "حجم الخط: 9pt؛ الهامش العلوي: 0px؛ الهامش السفلي: 0px"
الجدول { عائلة الخط: "حجم الخط: 9pt؛ ارتفاع الخط: 20 بكسل؛ اللون: #000000"
أ: الرابط { حجم الخط: 9pt اللون: #FFFFFF؛
أ: تمت الزيارة {حجم الخط: 9pt اللون: #99FFFF؛
أ:hover { حجم الخط: 9pt اللون: #FF9900؛
أ: نشط { حجم الخط: 9pt اللون: #FF9900؛
a.1: الرابط { حجم الخط: 9pt اللون: #3366cc؛
a.1: تمت الزيارة {حجم الخط: 9pt؛ اللون: #3366cc؛
a.1:hover { حجم الخط: 9pt اللون: #FF9900؛
a.1:active { حجم الخط: 9pt اللون: #FF9922؛
.blue { عائلة الخط: "宋体"؛ حجم الخط: 10.5 نقطة؛ ارتفاع الخط: 20 بكسل؛
->
</نمط>
<td><img src="../images/sample.gif">
</TD>
<td><img src=”../images/sample.gif”></td>
<td><img src="../images/sample.gif"> </td>
☆ قم بإنشاء دليل أخبار في الدليل الجذر ☆ يُسمى عنصر الأخبار الافتراضي الأول بـ Index.htm
☆ تم تسمية جميع الأخبار التابعة لـ "الأخبار المحلية" بالترتيب: china_1.htm، china_2.htm، ...
☆ جميع الأخبار التابعة لـ "الأخبار الدولية" مرتبة بالترتيب: internation_1.htm، internation _2.htm، ...
☆ إذا كان عدد الملفات مكونًا من رقمين، فيرجى تسمية الملفات التسعة الأولى: china_01.htm، china_02.htm لضمان إمكانية فرز جميع الملفات بشكل صحيح في المجلد.
☆ الاسم مقسم إلى جزأين، الجزء الأول والأخير، مفصولين بشرطة سفلية.
☆ يشير الجزء العلوي إلى الطبيعة العامة للصورة، مثل الإعلان والشعار والقائمة والزر وما إلى ذلك.
☆ بشكل عام:
نقوم بتسمية الصور المستطيلة مثل الإعلانات والأنماط الزخرفية الموجودة في أعلى الصفحة: لافتة
قمنا بتسمية الصورة الأيقونية: الشعار
نقوم بتسمية الصورة الصغيرة برابط غير مثبت على زر الصفحة
نقوم بتسمية صور أعمدة الارتباط التي تظهر بشكل مستمر في موضع معين بالصفحة ولها نفس الطبيعة: القائمة
قمنا بتسمية الصورة للزينة: الموافقة المسبقة عن علم
نقوم بتسمية الصورة بدون رابط للإشارة إلى العنوان: title
اتبع هذا المبدأ وما إلى ذلك.
banner_sohu.gif
banner_sina.gif
Menu_aboutus.gif
Menu_job.gif
title_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_hill.jpg