بشكل عام ، فإن العمل الذي تم الانتهاء منه بواسطة تصميم الويب هو في الواقع: تحويل عروض PSD إلى صفحات قالب HTML+CSS. بشكل عام ، سنحصل على مديرية الأمن العام للفنان ، وسيكون لأشخاص مختلفين مناهج مختلفة:
1. فتح الألعاب النارية وتصدير الصورة إلى HTML.
2. استخدم أدوات مباشرة مثل DreamWeaver لسحب ووضع التصميم واستيراد الصور ذات الصلة وموارد الفلاش.
3. بعد الانتهاء من القطع في PS ، انظر أولاً إلى العروض في محرر النص وجعلها خطوة بخطوة.
ما ورد أعلاه هي الأساليب الأكثر استخدامًا ، لكن أيا منها جيد:
الطريقة الأولى هي الأسوأ ، لا يتم الحفاظ على مثل هذا الرمز أو قابلة للقراءة على الإطلاق.
الطريقة الثانية ليست جيدة أيضًا ، سيكون الكود لا محالة زائدة عن الحاجة ، والأشياء التي تصنعها تحتاج إلى التحقق.
الطريقة الثالثة ليست جيدة أيضًا ، لأنك تحتاج إلى إلقاء نظرة على العروض شيئًا فشيئًا ، أي عند كتابة علامة HTML ، فإنك تفترض باستمرار كيفية عرض هذه القطعة.
الطريقة الصحيحة للقيام بذلك:
1. بعد الحصول على PSD ، لا تفعل أي شيء آخر أولاً. اكتب إطار صفحة الويب مباشرة في محرر النصوص. لا تفترض كيفية تقديم هذه CSS في المستقبل. إنها علامة تجنس تمامًا دون إضافة أي CSS.
2. بعد الكتابة ، تأكد من عدم وجود مشكلة في تحديد المواقع الإجمالية بعد تشغيل كل متصفح.
3. اكتب CSS بشكل عام ، هنا CSS مسؤولة فقط عن وضع وأسلوب الكتل الكبيرة.
4. قم بقطع موارد الصورة المطلوبة ، وقم بإنشائها شيئًا فشيئًا في الإطار المكتوب ، وتصحيحها باستمرار ، وأخيراً أصبحت المنتج النهائي.
5. أخيرًا ، أضف تعليقات إلى الكود الخاص بك ، وأضف تعليقات إلى الكود الخاص بك بشكل مناسب في كل من CSS و HTML.
لا يزال هناك العديد من الأشياء التي يجب الانتباه إليها إذا كنا نريد إجراء مفتاح مرن لجعل الجلد والسماح CSS بالسيطرة على الأداء ، ولكن العملية العامة مثل هذا. بالطبع ، لا يمكننا كتابة HTML مباشرة في البداية ، ولكن على الأقل يجب أن يكون لدينا هذا الوعي والمضي قدمًا خطوة بخطوة. . .
قطع ملف PSD مواقع الويب من نقطتين رئيسيتين:
1. صفحة مستقلة
1. تحليل هذه الصفحة ووصف أولاً الهيكل العام في رأسك أو على مسودة الورق.
2. وفقًا لحالة مسودة التصميم ، قم بتحليل توزيع صور الخلفية ، وتوزيع صور ICO ، إلخ.
3. قم بقطع الصور المقابلة والتصدير ودمج الصور
4. اكتب هيكل XHTML البنية الكلية في المحرر ، بما في ذلك بنية جميع العناصر التي تظهر في الصفحة
5. اكتب رمز الوحدة النمطية بشكل عام في نمط CSS
6. تعديل التفاصيل
7. بعد العمل ، سيتحقق المتصفح ما إذا كان صحيحًا
2. موقع صغير أو كبير يتكون من صفحات متعددة
1. تصفح جميع مسودات التصميم وتوحيد توزيع وحدات الموقع والصور والملفات
2. ابدأ نقطة التشغيل الأولى ، ولكن من المهم التخطيط لتوزيع المحتوى للموقع.
الاعتبار العام:
1. دمج الصور لتقليل عدد الطلبات
2. العقلانية الهيكلية والندسة
3. بساطة الأسلوب تجعل من السهل الحفاظ عليها لاحقًا
4. في الغالب النظر في الصيانة وتطوير البرنامج اللاحقة ، كيفية تحقيق التأثير ببساطة.