ما هي أفضل طريقة للانتقال من نموذج Photoshop بالحجم الطبيعي إلى HTML وCSS الدلالي؟

Question

أستخدم بشكل عام عملية يدوية:

1. انظر إلى الصفحة واكتشف العناصر الدلالية وقم ببناء HTML
2. قم بتقطيع الصور التي أعتقد أنني سأحتاجها
3. البدء في كتابة CSS
4. قم بتعديل وتكرار الخطوات المختلفة حسب الضرورة

هل لديك نهج أفضل أم أداة؟

Answer 1

لدي طريقة طبيعية إلى حد ما للترميز.المفتاح هو التعامل مع الصفحة كمستند أو مقال.إذا فكرت في الأمر بهذه الطريقة يصبح الأمر واضحًا منطقيًا:

1. عنوان الصفحة هو عنوان المستوى الأعلى

   • سواء قمت بإنشاء عنوان الموقع أو عنوان الصفحة الفعلي، فإن h1 متروك لك - شخصيًا سأجعل About Us هو h1 بدلاً من Stack Overflow.

2. التنقل عبارة عن جدول محتويات، وبالتالي قائمة مرتبة - يمكنك أيضًا استخدام ol على ul.

3. رؤوس الأقسام هي h2، والأقسام الموجودة داخل هذه الأقسام هي h3s وما إلى ذلك.كومة لهم.

4. استخدم علامات الاقتباس والاقتباسات حيثما أمكن ذلك.لا تحيط به فقط ".

5. لا تستخدم b وi.استخدم قوي و م.وذلك لأن HTML عبارة عن ترميز هيكلي وليس عرضيًا. قوي و ميجب استخدام علامات الطور حيث يتم التركيز على الكلمة.

6. <label> عناصر النموذج الخاص بك.

7. يستخدم <acronym>رمل <abbr>حيثما أمكن ذلك، ولكن فقط في المقام الأول.

8. الأسهل:دائماً، دائماً أعط صورك بعض النص البديل.

9. هناك الكثير من علامات HTML التي يمكنك استخدامها والتي ربما لم تستخدمها - عنوان العناوين البريدية، ومخرجات رمز الشاشة.القي نظرة على HTML الكلب بالنسبة للبعض، هو مرجعي المفضل.

هذه مجرد بعض المؤشرات، وأنا متأكد من أنه يمكنني التفكير في المزيد.

أوه، وإذا كنت تريد التحدي، فاكتب XHTML أولاً، ثم اكتب CSS.عند استخدام CSS، لا يُسمح لك بلمس HTML.إنه في الواقع أصعب مما تعتقد (لكنني وجدت أنه جعلني أسرع).

Answer 2

حسنًا، عندما أقوم بإنشاء موقع ويب، أميل إلى محاولة نسيان التصميم تمامًا أثناء كتابة HTML.أفعل هذا حتى لا ينتهي بي الأمر بأي علامات خاصة بالتصميم وحتى أتمكن من التركيز على المعنى الدلالي للعناصر.

بعض المؤشرات حول كيفية ترميز الأشياء:

• القائمة - استخدم عنصر UL (قائمة غير مرتبة)، لأن هذا هو بالضبط ما هي القائمة.قائمة غير مرتبة من الاختيارات.مثال:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>
  

  إذا كنت تريد قائمة أفقية يمكنك القيام بذلك:

  #menu li {
      display: block;
      float: left;
  }
  

• الشعار - استخدم عنصر H1 (العنوان) للشعار بدلاً من الصورة. مثال:

  <div id="header">
      <h1>My website</h1>
  </div>
  

  وCSS (يمكن تطبيق نفس الأسلوب على القائمة أعلاه إذا كنت تريد قائمة تحتوي على عناصر رسومية):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }
  

• المعرفات والفئات - استخدم المعرفات لتحديد العناصر التي لديك مثيل واحد فقط لها.استخدم الفصل لتحديد العناصر التي حصلت على عدة مثيلات لها.

• استخدم متصفحًا نصيًا (على سبيل المثال، الوشق).إذا كان من المنطقي التنقل بهذه الطريقة، فقد قمت بعمل جيد عندما يتعلق الأمر بإمكانية الوصول.

آمل أن يساعد هذا :)

Answer 3

أنا أفعل نفس الشيء الذي يفعله جون، ولكن إليك بعض الأفكار الأخرى:

1. استخدم الأدلة في Photoshop (واقفلها).اكتشف جميع الأبعاد الخاصة بك لكل صندوق/منطقة مسبقًا.

2. اجمع كل الأبعاد والقيم السداسية للألوان في ملف معلومات (أستخدم ملف txt) يمكنك الرجوع إليه بسهولة.سيؤدي هذا إلى تقليل ضريبة علامة التبويب البديلة واختيار الألوان في Photoshop عدة مرات.

3. بعد وضع جميع الأدلة الخاصة بي، أقوم بتقطيع موقع الويب بالكامل إلى مجلد الصور الخاص بي، بدءًا من الصور والعناصر المجمعة، وانتهاءً بمربعات/صور الخلفية المتنوعة، في حالة وجودها.(نصيحة:يستخدم كنترول-انقر على معاينة الطبقة لتحديد محتوى تلك الطبقة).

ملاحظات حول استخدام الفوتوشوب:

• استخدم الأدلة أو الشبكة.
• استخدم ميزة الملاحظات للحصول على أي معلومات ذات صلة
• استخدم دائمًا مجموعات الطبقات للعناصر المشابهة.يجب أن نكون قادرين على إيقاف تشغيل مناطق بأكملها بنقرة واحدة.ضع كل محتوى "الرأس" في مجموعة طبقات واحدة.
• قم دائمًا بتسمية طبقاتك.
• يمكنك وضع كل قالب صفحة في ملف PSD واحد واستخدام مجموعات الطبقات المتداخلة لتنظيمها.بهذه الطريقة لا يتعين علينا إعداد كافة الأدلة والملاحظات لكل قالب صفحة على الموقع.

Answer 4

لا توجد اختصارات :) ولكن الجميع يعمل بشكل مختلف قليلا.

هذا البرنامج التعليمي الذي ظهر في قارئ التغذية الخاص بي بالأمس يُظهر العملية من البداية إلى النهاية وقد يساعد الأشخاص الذين لم يفعلوا ذلك من قبل، ولكن بما أنك خبير، فإن الأمر يتعلق فقط بتبسيط أساليبك الخاصة.

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

Answer 5

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

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

سيساعدك ذلك أيضًا على اكتشاف المشكلات المحتملة التي ربما لم تكن لتدرك أنها ستكون مشكلات حتى تتعمق في CSS.

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

Answer 6

عادةً ما يستخدم بعض المصممين الذين أعرفهم برنامج Illustrator لإنشاء عناصر التصميم.

Answer 7

هذه الصفحة يوضح كيفية القيام بذلك بشكل آلي أكثر قليلاً.

Answer 8

تعرف أيضًا على ميزة "Layer Comps".أنا استخدم هذا لتغيير حالات الزر.

1. قم بإنشاء تركيبات طبقة للوضع العادي والتمرير والنشط.
2. في كل واحدة منها، قم بإعداد التأثيرات/تراكبات الألوان والطبقات المرئية التي تنتمي إلى تلك الحالة.
3. حفظ للويب:انتقل إلى مجلد مختلف لكل حالة، ما لم يكن من الأسهل إعادة تسمية كل شريحة (وإلا ستحل شرائح زر التمرير محل الشرائح العادية).