تقنيات إعادة بناء الويب وحلول المشكلات الشائعة

تقنيات إعادة بناء الويب وحلول المشكلات الشائعة

1. مهارات xhtml+CSS

●الأعمال التحضيرية التي يجب القيام بها قبل إعادة البناء:

1. احصل على عرض PSD، ويجب أن يكون PSD، حتى تتمكن من تقطيعه بحرية أكبر بنفسك؛

2. قم أولاً بإنشاء صفحة ويب دون تقطيع ملف PSD، وقم بتسميتها بـ Index_psd.html (هذه الصفحة كمرجع)؛

3. قم بإعداد العديد من المجلدات الضرورية: الصور (للصور)، وcss (لملفات نمط css)، وjs (لملفات js)؛

●بعد الانتهاء من الاستعدادات، قم أولاً بتحليل بنية الصفحة بأكملها. لتحليل بنية الصفحة، انظر أولاً إلى الكل ثم إلى الأجزاء، وانظر أولاً إلى كيفية ارتباط الأجزاء الأكبر من الصفحة، سواء كانت متجاورة لأعلى ولأسفل أو مقسمة إلى اليسار واليمين. بعد رؤية بنية القسم الكبير من الصفحة بوضوح، يمكنك إنشاء الكتل الأساسية للصفحة. على سبيل المثال، إذا كانت صفحتنا تحتوي على بنية علوية ووسطية وسفلية، فيمكننا كتابة:

<div id=”header”></div>// ضع الرأس والتنقل، وما إلى ذلك.

<div id="content"></div>// محتوى موضوع الصفحة

<div id=”footer”></div>//بيان حقوق الطبع والنشر لتذييل الصفحة، وما إلى ذلك.

●عند كتابة CSS، تحتاج إلى استخدام ملف Index_psd.html. افتح هذا الملف باستخدام DW وحدد وضع العرض. يمكنك قياس طول وعرض كل كتلة عن طريق سحب الخطوط المساعدة لتوفير مرجع لإعداد CSS ميزة ذلك هي أن الصفحة المعاد بناؤها يمكن أن تكون دقيقة حتى 1 بكسل.

●في كل مرة تكتب فيها كتلة، تحتاج إلى استخدام IE وff لاختبار التأثير بحيث يمكن اكتشاف المشكلات وحلها على الفور. عندما لا تحتوي كل كتلة على محتوى، فمن الأفضل إضافة لون خلفية لها.

●بعد كتابة القسم الكبير، قم بتحليل المحتوى في القسم الكبير. نفس المبدأ هو البدء بالكل ثم بالأجزاء. على سبيل المثال، تبدو صفحة المحتوى كما لو أن هناك قسمين على اليسار واليمين الوقت، يمكننا كتابة الكود على النحو التالي:

<div id=”header”></div>// ضع الرأس والتنقل، وما إلى ذلك.

<div id="content">// محتوى موضوع الصفحة

<div class="content-2-1"></div>//Left

<div class="content-2-2"></div>//right

</div>

<div id=”footer”></div>//بيان حقوق الطبع والنشر لتذييل الصفحة، وما إلى ذلك.

ينقسم الجدول 2 في المحتوى-2-1 إلى عمودين، ويمثل 2-1 العمود الأيسر، ويمثل 2-2 العمود الأيمن. يمكن أن تجعلك طريقة تقسيم الأعمدة هذه أكثر سهولة عند عرض رمز الصفحة الأعمدة، هذه المزايا أكثر وضوحا.

● من الأفضل استخدام قوائم الأخبار وقوائم المقالات وما إلى ذلك:

<ul>

<li>عنوان الخبر 1< >

<li>عنوان الخبر 2< >

…………

<li>عنوان الأخبار< >

</ul>

●من الأفضل استخدام قائمة الأعمدة بالإضافة إلى الوصف:

<دل>

<dt>العمود 1</dt>

<dl>وصف العمود 1</dl>

<dt>العمود 2</dt>

<dl>وصف العمود 2</dl>

</دل>

●من الأفضل إضافة العبارة التالية في بداية تعريف ملف CSS

الجسم، أتش تي أم أل { الارتفاع: 100٪ }

*{ الهامش: 0 بكسل؛

●من الأفضل ضبط السعة الفائضة::مخفية للكتل الكبيرة، وذلك لضمان عدم تمدد الحاوية، وبالتالي تدمير تخطيط الصفحة بأكملها.

2. قضايا DIV+CSS

1. مشكلة فارغة غير متوقعة في IE6:

عندما يتم وضع عدة كتل صغيرة جنبًا إلى جنب في كتلة كبيرة، فإن مجموع عرض الكتل الصغيرة يساوي عرض الكتلة الكبيرة، ولا توجد مشكلة في المتصفحات الأخرى مثل FF، ولكن في IE6 لا توجد مشكلة إلا كتلة واحدة إذا لم يتم عرضها، سيتم دفعها إلى الأسفل. في هذا الوقت، يمكنك ضبط CSS للكتلة الصغيرة للعرض: مضمّن. إذا لم ينجح هذا، قم بتقليل عرض كل كتلة بمقدار 1 أو 2 بكسل.

2. مشكلة الظلال في IE6:

في بعض الأحيان في IE6، تظهر بضعة أحرف في نهاية محتوى div متكررة أسفل DIV كبير، وهو ما لا يظهر في المتصفحات الأخرى مثل FF. هناك طريقتان لحل هذه المشكلة: 1) حذف التعليق 2) أضف <div class="clear"></div> بعد DIV هذا وحدد نمط CSS الواضح على النحو التالي:

.واضح {

حجم الخط: 1 بكسل؛

واضح: كلاهما؛

الرؤية: مخفية؛

العرض: 1 بكسل؛

}

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

3. مشكلة في IE6 غير قادر على المركز:

بشكل عام، طالما قمت بتعيين نمط CSS لقسم (اضبط معرفه على 1): هامش:0px تلقائي؛، يمكنك توسيط div في الحاوية التي تحتوي عليه (اضبط معرفه على 0). على النحو التالي:

<div معرف = "0">

<div id="1"> … </div>

</div>

ولكن IE6 لا يعمل في هذا الوقت، يمكنك تعيين CSS لـ div0: text-align: center;

4. تظهر حدود غير متوقعة على الصور المرتبطة في IE6

في IE6، تحتوي الصور المرتبطة في بعض الأحيان على حدود قبيحة، وهو ما يحدث بسبب <a>، ويمكن إزالة ذلك عن طريق تعيين { border:0px;} في CSS.

5. لقد خرج المحتوى الموجود داخل DIV في FF عن مساره

في بعض الأحيان، يمكن رؤية المحتوى الذي يبدو طبيعيًا في IE في FF ولكن المحتوى الموجود داخل DIV قد خرج إلى الخارج. ويكون هذا الموقف واضحًا بشكل خاص عندما يكون لـ div حدود. وذلك لأنه بعد تعيين ارتفاع div في IE، إذا كان المحتوى الموجود داخل div أعلى من div، فسيزيد ارتفاع div تلقائيًا. لكن FF ليس مرنًا جدًا، طالما أن الارتفاع محدود، فلن يتغير من تلقاء نفسه. في هذا الوقت، يمكنك حل هذه المشكلة عن طريق إعادة ضبط الارتفاع، أو يمكنك ضبط الارتفاع على الوضع التلقائي.

6. تختفي المنطقة بشكل غير متوقع في FF

اختفى التخطيط العادي في IE في FF. تحدث هذه المشكلة غالبًا في كتلة حقوق الطبع والنشر في الركن السفلي من الصفحة. يمكن حل هذه المشكلة عن طريق إضافة: Clear:كلاهما؛

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