المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css

والذي يحوي هذه الملفات:

• index.html – الملف الذي سيحوي التصميم.
• main_style.css – التصميم الأساسي.
• big_style.css – التصميم الثاني.
• styleswitcher.js – ملف الجافاسكربت الذي يتحكم بنوع التصميم.

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

بداية، أرجو أن تقوموا بتنزيل الملف التالي:
ملف مرفق للـ css

والذي يحوي هذه الملفات:

• layout.gif – صورة مصغرة للتصميم.
• logo.gif – صورة تمثل شعاراً.
• index.htm – ملف html الذي سيحوي التصميم.
• layout.css – ملف css والذي سنضع فيه تفاصيل التصميم.

هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة “جميع الحقوق محفوظة”.

بداية، أرجو من كل مهتم بهذه الدروس أن يقوم أولاً بتنزيل الملف:
ملف مرفق للـ css

والذي يحوي هذه الملفات:

• layout1.gif – صورة مصغرة لما يجب أن تكون عليه النتيجة النهائية للدرس.
• index.htm – ملف html والذي سيعرض الصفحة التي صممناها.
• layout.css – ملف css والذي سنضع فيه تفاصيل التصميم.

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

نصيحة قبل أن نبدأ : “إذا كنت جاداً في أنك تريد أن تبلغ الإحترافية في إنشائك لصفحات الويب فإن عليك أن تتعلم كيفية كتابة كود صفحاتك يدوياً”.

سأقول لك في البداية أنني أقوم بكتابة كود الصفحة بكامله يدوياً، طبعاً أنت حر في استخدامك لبعض أدوات الـWYSIWYG (ما تراه هو ما تحصل عليه What You See Is What You Get) و لكن يجب ألا يكون ذلك دون مراقبة الكود بعد كل أمر ثم تعديله يدوياً، طبعاً لا عذر للقيام بذلك إلا عند القيام بعمل بعض الأمور التي يصعب عملها يدوياً مثل الجداول المعقدة، لأنه لم يوجد بعد المحرر الذي يسمح لك بإنشاء مواقع ممتازة، فكلها و لا شك ستضيف أكواد تبطء الصفحة أو تقلل من قابلية الوصول أو من مطابقتها للمعايير القياسية أو أو …

مقدمة

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

هذه لائحة بأهم أوامر CSS وما يقابلها من أشباهها في JavaScript.

مثال:
لتحويل الـbackground-color في CSS إلى JavaSctript سنزيل علامة – ونكبّر الحرف الذي يليها لتصبح backgroundColor، وهذا حتى نتحكم بها من خلال الجافاسكريبت.

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