ما هي أدوات CSS (إطار العمل، نظام الشبكات، IDE،..) التي أحتاجها لبدء تصميم الويب؟

Question

أقوم بإنشاء موقع ويب جديد يعتمد على تقنية Grails.

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

لقد قرأت من خلال موقع stackoverflow.com ولكن لم أستطع اتخاذ قراري.إليكم ما اكتشفته:كيف تختار إطار عمل CSS ما هو أفضل إطار عمل لشبكة CSS؟ هل يمكن لشخص ما أن يوصي بإطار عمل أجراس وصفارات CSS ما هو أفضل إطار عمل CSS وهل يستحق هذا الجهد؟

ولكن لسوء الحظ هناك العديد من الإجابات المتناقضة.أولاً، يقول البعض أن استخدام إطار عمل CSS هو تأليف عكسي وليس أمرًا جيدًا.وينصح آخرون بـ YUI Grids وBluePrint و960 gs وYAML... ويقول الكثيرون أن Compass تسمح بتطوير تخطيطات CSS بسهولة وقابلة لإعادة الاستخدام.

لذلك مع الأخذ في الاعتبار أن:

• أنا جديد في عالم CSS ولا أنوي أن أصبح مصمم ويب
• يجب أن يكون تخطيطي سهل الاستخدام (ولكن ليس من الضروري أن يكون L&F رائعًا)
• يجب أن تكون قابلة للصيانة وقابلة للتحسين بسهولة (بواسطة مصمم ويب محترف)
• سهل التنفيذ (من أجل الحصول على شيء بسرعة)

ما هي نصيحتك لي للبدء في تصميم موقع الويب الخاص بي؟

شكرا لنصائحك.

فابيان

Answer 1

أولاً، إذا كنت لا تنوي أن تصبح مصمم ويب، أقترح الاستعانة بمصادر خارجية لـ CSS الخاص بك.هناك العديد من المواقع حيث يمكنك توفير HTML أو تصميم Photoshop وترميزه حتى أقل من ألف كبير (1 كيلو).أو احصل على تصميمات HTML/CSS مجانًا.

ثم هناك شيء واحد تحتاج إلى معرفته وشيئين آخرين تحتاج إلى العمل عليهما:

1. يجب كتابة كل HTML بطريقة دلالية وصحيحة:الدلالي = العناوين والقوائم مرتبة بشكل صحيح، ولا توجد أقسام زائدة وما إلى ذلك؛صالح = سوف يجتاز اختبارات التحقق من صحة WC3.لا يعتبر أي من هذا علم الصواريخ، ولكنه لا يزال مهارة يجب تعلمها.آندي كلارك تجاوز CSS هو كتاب عظيم عن HTML/CSS الدلالي.لسهولة الصيانة، يجب أن يكون HTML وCSS مرتبين ومتباعدين باستمرار، وما إلى ذلك.

2. تحتاج إلى تحديد ما إذا كنت ستحتاج إلى واجهة خلفية إدارية وقاعدة بيانات لإدارة المحتوى، أو إذا كنت تقوم فقط بإنشاء موقع يتكون من صفحات ثابتة (أي صفحات ثابتة).ملفات html وcss والصور والوسائط الأخرى وما إلى ذلك).إذا كان الأمر الأول، فهذا منحنى تعليمي آخر تمامًا :-)

3. ما هي أفضل مهاراتك؟إذا كنت مصممًا جيدًا، فاطلب من أشخاص آخرين كتابة HTML/CSS، أو استخدم قالبًا جاهزًا (يوجد الكثير منه على الويب) وقم بتخصيصه.هنا بداية جيدة للتخطيطات متعددة الأعمدة.إذا كنت مبرمجًا، فتعلم كيفية استخدام إطار عمل مثل جانغو (بايثون)، التيتانيوم (بيرل)، شيء أصغر في روبي (لأن لغة Ruby on Rails كبيرة بعض الشيء في البداية) أو واحدة بلغتك المفضلة.

CSS الجيد هو حرفة، والبساطة هي جوهرها، ولكن إذا كنت تريد أن تتعلم ما يكفي للبدء، فإن نصيحتي هي:

1. فهم الميراث ("التتالي" في CSS) وحقيقة ذلك أي شئ يمكن أن يكون "كتلة"، لذا لا تستخدم الكثير من عناصر div المتداخلة فقط لتطبيق النمط.بدلاً من ذلك، قم بتطبيق النمط على عنصر HTML نفسه، أو على العنصر فقط عندما يظهر في كتلة أصل (مثل قائمة غير مرتبة موجودة في div الشريط الجانبي)؛

2. تعلم حول عناصر الكتلة والمضمنة (تصميم مواقع الإنترنت من الصفر هو مصدر تعليمي رائع وأوصي به)، وأن CSS يمكنه تغيير هذا السلوك؛

3. اختبار في فايرفوكس، ثم اختبار في إنترنت إكسبلورر.>= IE7 ليس سيئًا للغاية (ولكن ابحث عن HasLayout).ما لا يمكنك تعديله للحصول عليه بشكل صحيح في IE، استخدمه تعليقات مشروطة لإضافة CSS الذي يمكن لـ IE فقط رؤيته - أبداً استخدام اختراقات CSS - ملفات .htc التي تضيف وظائف IE المفقودة (على سبيل المثال.تتوفر أنماط التمرير على أي عنصر؛

4. تعلم حول تحديد المواقع CSS, ، واستخدم كلمة "ثابت" باعتدال؛

5. ضع كل ملفات CSS الخاصة بك في ملف واحد (للمبتدئين)، ولا تستخدم CSS المضمّن في HTML؛

6. أشكال التصميم وحقول النموذج تكاد تكون مهارة منفصلة :-)

استخدم صور الخلفية لإضافة نمط، ولكن افهم أيضًا أنه يمكنك إزاحة الصور وتداخلها باستخدام تحديد الموضع.ستحتاج إلى استخدام PNGs للحصول على شفافية جيدة.أوه نعم و العتامة تبدو جميلة، ولكن يتطلب CSS غير قياسي في الوقت الراهن.على الرغم من أنها أكثر مرونة rgba طريقة (a=alpha) تحظى بدعم واسع النطاق.كما زوايا مدورة, ولكن كلاهما يستحق الاستخدام.

سأتجنب أطر عمل CSS وعمليات إعادة التعيين في الوقت الحالي - فهي ستعقد الأمور في هذه المرحلة عن طريق إضافة DSL آخر للتعلم (ولكن قراءة الحجج و ال إيجابيات وسلبيات).لتجنب الهوامش والحشوات الافتراضية المزعجة، أقوم دائمًا بإعادة ضبط كل شيء عن طريق العمل html *, body * {margin: 0; padding 0;} ثم أنشئ الحشو والهوامش مرة أخرى حيثما دعت الحاجة - لم تكن هناك مشكلة حتى الآن :-)

Answer 2

ما هي نصيحتك لي للبدء في تصميم موقع الويب الخاص بي؟

يحصل فايربوغ البرنامج المساعد لمتصفح فايرفوكس الآن!

استخدامات CSS الأساسية:

• تعرف على قواعد CSS التي تنطبق
• قم بتغيير CSS في الوقت الفعلي وشاهد التأثير
• قم بفحص مواقع الويب الأخرى لمعرفة كيفية قيامهم بالأشياء

لن أتمكن من تطوير CSS (والتقنيات الأخرى ذات الصلة بالويب) بدون هذه الأداة

Answer 3

ألقِ نظرة على إعادة ضبط/قاعدة/خط/شبكة YUI CSS

http://developer.yahoo.com/yui/3/cssreset/

ويحتوي Grid 960 أيضًا على بعض التخطيطات الرائعة (ابحث عن موقعهم في Google)

Answer 4

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

تحرير (Mac فقط) يعد حلاً جيدًا لكتابة أوراق Cascade، وهو سهل الاستخدام وغير مكلف وذو ميزات كثيرة.

العاب ناريه:أعتقد أنه برنامج رائع لصياغة تخطيطاتك وإجراء بعض الأعمال الرسومية الجيدة!

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

كودا (Mac فقط) يعد بديلاً جيدًا جدًا لبرنامج Dreamweaver، حتى لو لم يسمح لك بإدارة ملفات .htaccess وتحريرها!

لتشفير موقع الويب الخاص بك، أقترح Dreamweaver أو Coda، ولكن هناك بديل جيد آخر تحرير (ماك فقط).

Answer 5

Bootstrap، إنه أفضل إطار عمل CSS يمكنني اقتراحه، وهناك إطار آخر يسمى Foundation أيضًا ولكني أفضل bootstrap أكثر لأنه يحظى بشعبية كبيرة بين المطورين وقابل للتوسيع.هناك عدد قليل من الأطر الأخرى، لقد كتبت مدونة حول ذلك، هنا اقرأها أيضًا إذا أردت http://www.andwecode.com/freebies/5-response-css-frameworks :)