في هذا الدرس سنقوم
بعمل صفحة ويب ونضيف لها اكواد باستخدام css وكذلك نقوم بانشاء مجلدات
خاصة لوضع ادواتنا التي نستخدمها مثل الصور وغيرها في مجلد خاص يمكننا
التعامل معه بسهولة
باديء
الامر نقوم بانشاء مجلد views لوضع الصفحات الخارجية التي سنستدعيها فيما
بعد باستخدام الراوترات , وايضا نقوم بانشاء مجلد ثانِ باسم public نقوم
فيه بخزن الميديا المختلفة من صور وملفات فيديو او صوتيات ويمكننا ان نضيف
داخل هذا المجلد مجلد للصور او مجلد للفيديو ... الخ وكل هذه المجلدات
سيضمها مجلد اعم هو ما اسميناه sinatra ..
 |
| انشاء المجلدات |
الان نقوم بانشاء الراوترات داخل ملف ونسميه main.rb
 |
| انشاء الراوترات |
ومن ثم نقوم بانشاء الملفات المدمجة وخزنها في مجلد views
الان نقوم بانشاء ملف الصفحة الرئيسية home.erb كما هو مبين في الصورة التالية:-
 |
| home.erb |
كما نلاحظ في السطر السابع قمنا باضافة صورة موجودة في مجلد image الذي انشاناه داخل مجلد public الذي انشأناه مسبقا .
الان ننتقل لانشاء الملفات الاخرى ...
 | |
| about.erb |
ومن ثم نقوم بعمل الملف الاخر
 |
| contact.erb |
بعدها نقوم بانشاء ملف inline views داخل ملف main.rb
 |
| inline views |
بعد اكمال الملفات والاكواد البرمجية , دعونا الان ننتقل الى المتصفح لنرى النتيجة..
 |
| عرض الصفحة الرئيسية |
عادة نحتاج في عمل صفحة ويب الى انشاء تنسيقات توحد ظهور بعض الفقرات والعناوين بتنسيق موحد, لهذا سنحتاج الى
استخدام لغة الانماط الانسيابية css التي ستمكننا من التحكم بالتنسيقات بشكل عام .
نقوم اولا بانشاء الكود باستخدام محرر النصوص الذي نستخدمه وخزنه بامتداد css في المجلد public باسم style.css
 |
| style.css |
بعد
انشاء هذا الملف نذهب الى ملف main.rb ونقوم بعمل ربط لـ style.css مع ملف
inline views كما هو موضح في السطر العشرون من ملف main.rb وكما مبين في
الصورة ادناه .
 |
| استدعاء style.css في main.rb |
وبالتالي سنحصل على النتيجة التالية :-
 |
| نتيجة اضافة تنسيقات css |
ويمكنكم استخدام تنسيقات اوسع واستدعائها بهذه الطريقة التي تعلمناها ..
ليست هناك تعليقات:
إرسال تعليق