الـSCC إختصار لجملة(stands for Cascading Style Sheet)
اي لغة تحديد شكل وثيقة.
برنامج الدريم ويفر (Adobe Dreamweaver cs6):
يعتبر برنامج الدريم ويفر من اهم البرامج المستخدمة في تصميم صفحات مواقع الويب الإلكترونية سواء صفحات الـphp وعمل الاكواد الخاصه بـhtml وايضاً الاكواد الخاصه بالـcss وغيرها,ويمكن تحميل البرنامج من موقعه الرسمي او شراء إسطوانة تحتوي على برامج Adobe c6. للتحميل إنقر هنا.
الصورة توضح الواجهة برنامج الدريم ويفر حيث عند فتح البرنامج تظهر نافذة ضمن البرنامج تعطيك آخر الملفات التي كنت تعمل عليها أو ان تقوم بإنشاء جديد.
من خلال التبويب (File) يمكننا إنشاء ملف جديد ,فنح ملف,فتح آخر الملفات التي تم العمل عليها,الحفظ,الحفظ بإسم أو بأي صيغة.
التبويب (Edit) يمكننا التعديل على الملف الذي نعمل علية سواء من حيث النسخ و اللصق والقص او البحث عن كود معين او اكواد مكررة وغيرها من العمليات.
التبويب (View) يمكننا التعديل على نوافذ البرنامج نفسه او عرض نوافذ التنفيذ و غيرها.
التبويب (Insert) من هنا يمكننا إدخال أي عنصر مع الكود بشكل جاهز سواء لصور او فيديوهات او جداول وغيرها من الإحتياجات التي تضيفها لموقعك.
ما هي لغة او تقنية الـSCC:
هي لغة تصميم وتنسيق تحدد شكل صفحة الموقع HTML , ومن خلالها يمكنك تحديد شكل صفحة الويب وتنسيقها من حيث الشكل و المقاسات و المساحة و الوات الخلفيات بكل دقة وإحتراف.
الفرق بين الـCSS و الـHTML:
طرق عمل لغة الـCSS:
-طريقة السطر الواحد Inline Style Sheet.
-طريقة الربط الداخلي Internal Style Sheet.
-طريقة الملف الخارجي External Style Sheet.
طريقة السطر الواحد Inline Style Sheet:
من خلال هذه الطريقة يمكنك عمل كود الـCSS في نفس السطر الذي تريد عمل له تنسيق وضبط.
مثال:
<p/>هنا نص معين < ";p style="color:#ff0000;font-size:px>
كمت تشاهدون المثال تنسيق نص معين حيث تم تحديد لون النص وحجمة بواسطة كود بسيط سنتعمق في ذلك في الشروحات القادمة.
طريقة الربط الداخلي Internal Style Sheet:
في هذه الطريقة يمكنك عمل الكود داخل منطقة الراس <head> </head> تنشئ الكود الخاص بتنسيق في داخل الصفحة في الاسفل والجزء الذي تريد تنسيقة تقوم بإستدعاء الكود.
من السطر6-8 يخص كود الـ CSS حيث بداية السطر السادس هو إشعار المتصفح بأن الكود التالي هو كود يتبع لغة الـCSS , السطر السابع يمكننا عمل أكواد منفصلة كل كود له خواص معينة لاننا سنتحاج لكل جزء في الموقع كود معين ولن نطبق كود واحد لكل الموقع.
-طريقة الملف الخارجي External Style Sheet:
هي الطريقة الشائعه والاكثر حرفية و التي ستقوم باستخدامها لعمل المواقع الكبيرة او موقع مؤسستك الخاصة ,وهي ان تقوم بعمل ملف خاص بكود الـCSS وفي هذا الملف تضع جميع اكواد لغة الـCSS الخاصة بالموقع ويمكنك عمل عدة ملفات من اكواد الـCSS حسب حجم عمل و طريقة ترتيب الموقع , ويكون الملف بصيغة css. مثلا لدينا ملف css باي اسم سيكون شكله كتالي style.css ملف الCSS اسمه style وال css. ترمز ان نوع المف من نوع css.
الشكل العام لهذه الطريقة :
في السطر السادس طريقة إستدعاء الملف الذي يحتوي على كود ال css وكان الاكواد كلها موجودة في صفحة موقعك ويمكن استدعائها مثل طريقة الربط الداخلي.
عناصر هامة تستخدم الـcss في الـhtml الوسمين(span-div):
استخدمنا في دروس الـHTML الجداول لبناء الموقع هنا سنبني موقع بدون استخدام الجداول الا اذا اقتضت الحاجة اليها وقبل ان نتعلم حول ماهو وسم <div> سنسرد بعض اسبا تفضيل المبرمجين له عن الجداول:
-مرونة الاستخدام وسهولة التعديل والتحكم به باحترافية.
-يعتبر كصديق لمحركات البحث.
=الجداول تعطي مظهر سيئ عند تحميل الصفحات ببطئ.
كود او وسم الـDIV الـ(Divisions TAG):
هو عبارة عن وحدة احتواء لعناصر صفحة الويب وبطريقة اخرى كبسولة العناصر وتقسيم محتوى صفحة الويب الى اقسام ويكتب داخل صفحة الويب سواء الـHTML او الـPHP بالشكل التالي:
في السطر العاشر هو بداية فتح كود الـDIV وفي السطر 13اغلنا الكود وما بينهما العناصر التي ستحتويها الـDIV , وسوف نتوسع اكثر في الشروحات القادمة.
كود او وسم الـSPAN الـ(SPAN TAG):
هو كود أو وسم يتم إستخدامة للنصوص والتحكم في خصائصها , في الغالب يستخدم الـdiv يدلا عنها ولاختصار الوقت والعمل يعمل الكود ويكتب كالتالي:
