يمكن أيضًا اعتبار تخطيط صفحة الويب الخاصة بـ CSS بمثابة عمل منهجي. قد يتم إكمال تطوير موقع DIVCSS بواسطة عدة أشخاص بالتعاون وفريق، وهذا يتضمن العديد من مشكلات التشغيل المعيارية، حتى لو تم تطويره بواسطة شخص واحد، بقدر معين المعرفة مطلوبة بشكل منظم وموحد، وهذا مقال أعيد طباعته من Blue، وهو فعال للغاية وقد لخص المؤلف الكثير من الخبرة العملية، ويمكن للجميع الرجوع إليه والتعلم منه.
نظرة عامة
هذه المواصفات عبارة عن مواصفات تطوير ومرجع للغة البرمجة النصية. هذه المواصفات ليست شرطًا ثابتًا يجب مراعاته بدقة، ويجب استخدامها بمرونة وإجراء تعديلات معينة في ظل ظروف خاصة. ومع ذلك، يرجى عدم تغيير المواصفات حسب الرغبة. إذا كانت لديك أي أسئلة، فيرجى الاتصال بي في الوقت المناسب وسأقوم على الفور بتغيير عينات التعليمات البرمجية ذات الصلة والمستندات الخاصة بهذه المواصفات.
المتطلبات الأساسية
1. افتح ثلاثة أدلة فرعية للصور العامة المؤقتة في الدليل الجذر لموقع الويب، وافتح دليلًا فرعيًا للوسائط حسب الحاجة. يحتوي دليل الصور على الصور العامة التي تستخدمها الصفحات في أعمدة مختلفة، مثل شعارات الشركة واللافتات والشعارات القوائم والأزرار وما إلى ذلك؛ يحتوي الدليل الفرعي المشترك على ملفات عامة مثل CSS وJS وPHP والتضمين وما إلى ذلك؛ ويحتوي الدليل الفرعي المؤقت على نصوص وصور ومواد أصلية أخرى يقدمها العملاء؛ avi، وقت سريع، الخ. ملفات الوسائط المتعددة.
2. من حيث المبدأ، يجب فتح دليل لكل عمود في الدليل الجذر وفقًا لبنية عمود الصفحة الرئيسية، وإذا لزم الأمر، يجب فتح دليل فرعي للصور والوسائط في دليل كل عمود لوضع الصور والوسائط حصريًا لهذا العمود، إذا كان هذا العمود يحتوي على الكثير من المحتوى ومقسمًا إلى العديد من الأعمدة الثانوية، فيمكن فتح أدلة أخرى وفقًا لذلك.
3. غالبًا ما يكون هناك العديد من الملفات في الدليل المؤقت. يوصى بفتح دليل باسم الوقت لتصنيف وتنظيم المعلومات المقدمة من العملاء واحدًا تلو الآخر.
4. ما لم تكن هناك ظروف خاصة، يجب أن تستخدم أسماء الدلائل والملفات مزيجًا من الأحرف الإنجليزية الصغيرة والأرقام والشرطات السفلية. ويجب عدم تضمين الأحرف الصينية والمسافات والأحرف الخاصة. يرجى استخدام اللغة الإنجليزية كدليل عند التسمية لا تستخدم نظام pinyin إلا عند الضرورة القصوى، فقد أثبتت التجربة أن المجلدات التي تحمل اسم نظام pinyin غالبًا ما تكون غير مفهومة بالنسبة لك بعد مرور شهر واحد،
عند كتابة النصوص البرمجية
،يجب أن يكون لدينا مفهوم متسق للنمط العام للبرنامج النصي. مما يعني أنك كتبته بعد شهر واحد وقبل شهر واحد، يظل أسلوب البرمجة النصية ثابتًا، وكذلك أسلوب البرمجة النصية الذي كتبه مطورون مختلفون في نفس مجموعة العمل، لأننا لا نستطيع التطوير بمعزل عن الآخر إلى الأبد، وربما تعمل دائمًا. مع نفسك قبل ثلاثة أشهر (طلب عميلك المراجعة)، غالبًا ما يتعين عليك المشاركة في تطوير مشروع مع زملاء مختلفين في الاستوديو، وقد يُطلب منك تعديل النصوص التي طورها الأشخاص الذين استقالوا، بالطبع، يمكنك أيضًا ذلك ترك المشروع للزملاء اللاحقين.
1. قالب عالمي لملفات Html:
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">
<meta name="author" content="eastline">
العلامات الوصفية الأخرى
div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com]
<link rel="stylesheet" type="text/css" href="style/style.css">
عميل تعريف ورقة الأنماط تعريف وظيفة Javascript وعملية التهيئة
div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css com ]
</الرأس>
<body bgcolor="#ffffff">
… …
</body>
تمت الإضافة:
من أجل التأكد من أن موقع الويب متوافق مع الجيل التالي من معايير لغة الويب XML، يجب أن تكون جميع سمات علامة HTML محاطة بعلامات اقتباس مفردة أو علامات اقتباس مزدوجة، أي أنه يجب أن نكتب <a href="url"> بدلاً من < a href=url >.
2. بالنسبة للصفحات التي تسمح باسترجاع النص الكامل، من أجل تمكين الاسترجاع الفعال بواسطة محركات البحث على الإنترنت، يجب إضافة الكلمات الرئيسية والعلامات الوصفية بين <head></head> في html. في الصفحة الرئيسية للقناة، على سبيل المثال:
div css xhtml xml مثال كود المصدر مثال كود المصدر [www.52css.com]
<meta name=”keywords” content=”شينكانسن الشرقي، سيارات، شراء سيارات”/>
<meta name=”description” content=”Oriental New Kanjin Line، أول محطة في العالم لمعلومات السيارات الصينية”/>
3. نموذج كود تنسيق ملف CSS:
div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css com ]
<نمط النوع = "نص/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 بكسل؛
->
</style>
ما يجب ملاحظته بشكل خاص هنا هو أن ترتيب 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]
<td><img src="../images/sample.gif">
</td>
يجب أن يكون هكذا:
div css xhtml xml مثال على كود المصدر مثال على كود المصدر [www.52css.com]
<td><img src=”../images/sample.gif”></td>
وذلك لأن المتصفح يعتقد أن السطر الجديد يعادل مساحة نصف العرض. طريقة الكتابة غير المنتظمة المذكورة أعلاه تعادل الإضافة عن غير قصد مسافة نصف العرض إذا كان من الضروري بالفعل إضافة مسافة نصف العرض، ويجب كتابتها على النحو التالي:
div css xhtml xml مثال على رمز المصدر مثال على رمز المصدر [www.52css.com]
<td><img src=”../images/sample.gif”> </td>
<table> الذي ينتمي إلى نفس المستوى يجب أن يكون محاذاة إلى اليسار، ولا يُسمح بوجود خلايا فارغة بدون أي محتوى يجب كتابة ارتفاع أكبر من أو يساوي 12 بكسل بين <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:
☆ قم بإنشاء دليل أخبار في الدليل الجذر ☆ يُسمى عنصر الأخبار الافتراضي الأول بـ Index.htm
☆ تم تسمية جميع الأخبار التابعة لـ "الأخبار المحلية" بالترتيب: china_1.htm، china_2.htm، ...
☆ جميع الأخبار التابعة لـ "الأخبار الدولية" مرتبة بالترتيب: internation_1.htm، internation _2.htm، ...
☆ إذا كان عدد الملفات مكونًا من رقمين، فيرجى تسمية الملفات التسعة الأولى: china_01.htm، china_02.htm لضمان إمكانية فرز جميع الملفات بشكل صحيح في المجلد.
5. تتبع مبادئ تسمية الصور المعايير التالية:
☆ الاسم مقسم إلى جزأين، الجزء الأول والأخير، مفصولين بشرطة سفلية.
☆ يشير جزء الرأس إلى الطبيعة العامة للصورة، مثل الإعلان والشعار والقائمة والزر وما إلى ذلك.
☆ بشكل عام:
نقوم بتسمية الصور المستطيلة مثل الإعلانات والأنماط الزخرفية الموجودة في أعلى الصفحة: لافتة
قمنا بتسمية الصورة الأيقونية: الشعار
نقوم بتسمية الصورة الصغيرة برابط غير مثبت على زر الصفحة
نقوم بتسمية صور أعمدة الارتباط التي تظهر بشكل مستمر في موضع معين بالصفحة ولها نفس الطبيعة: القائمة
قمنا بتسمية الصورة للزينة: الموافقة المسبقة عن علم
نقوم بتسمية الصورة بدون رابط للإشارة إلى العنوان: title
اتبع هذا المبدأ وما إلى ذلك.
☆يُستخدم جزء الذيل للتعبير عن المعنى المحدد للصورة.
☆ فيما يلي بعض الأمثلة، يجب أن تكون قادرًا على فهم معنى الصور في لمحة سريعة:
div css xhtml xml مثال لرمز المصدر مثال لرمز المصدر [www.52css.com]
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