Info Niv3 Cours8 Ar

‫© جامعة قسنطينة ‪2‬‬ ‫‪2018-2017‬‬ ‫إعالم آلي – مستوى ‪3‬‬
‫جامعة عبد الحميد مهري – قسنطينة ‪2‬‬

‫خلية التعليم عن بعد‬
‫آل – مستوى ‪3‬‬

‫إعالم ي‬
‫آل متقدم‬
‫إعالم ي‬
‫– الدرس ‪– 8‬‬
‫صفحات الويب باستعمال ‪(4/4) MS Expression Web 4‬‬
‫لغة ‪ CSS‬وتنسيق صفحات الويب‬
‫األساتذة المسؤولين‬
‫البريد اإللكتروني‬ ‫الكلية‬ ‫الرتبة‬ ‫االسم واللقب‬
‫‪ameur.bennaoui@univ-constantine2.dz‬‬ ‫علوم اقتصادية‬ ‫‪MAA‬‬ ‫بن ناوي عامر‬
‫الطلبة المعنيين‬
‫السداسي ‪1‬‬
‫تخصص‬ ‫السنة‬ ‫القسم‬ ‫الكلية ‪/‬المعهد‬
‫جذع مشترك‬ ‫ليسانس ‪2‬‬ ‫جذع مشترك‬ ‫علم المكتبات والتوثيق‬
‫السداسي ‪2‬‬
‫تخصص‬ ‫السنة‬ ‫القسم‬ ‫الكلية ‪/‬المعهد‬
‫جذع مشترك‬ ‫ليسانس ‪2‬‬ ‫علم النفس‬ ‫علم النفس‬
‫كل التخصصات‬ ‫ليسانس ‪2‬‬ ‫كل األقسام‬ ‫علوم اقتصادية‬
‫أهداف الدرس ‪8‬‬

‫معرفة أساسيات لغة ‪CSS‬‬
‫تنسيق صفحات الويب بلغة ‪CSS‬‬
‫انشاء صفحة ويب شخصية‬
‫صفحة ‪ 1‬من ‪6‬‬

2 ‫© جامعة قسنطينة‬ 2018-2017 3 ‫إعالم آلي – مستوى‬
)Feuilles de style CSS( ‫ أوراق االنماط‬.1

.XML ‫ أو‬HTML ‫ هي لغة برمجية تستخدم لتصميم ووصف مظهر وتنسيق مستندات‬Cascading Style Sheets ‫ او‬CSS
،‫ والمحاذاة‬،‫ تتضمن هذه القواعد وضع العناصر‬.HTML ‫تسمح لك األنماط بتعريف القواعد المطبقة على واحد أو أكثر من مستندات‬
.‫ وما إلى ذلك‬،‫ وصور الخلفية‬،‫ والحدود‬،‫ والهوامش والمباعدة‬،‫ واأللوان‬،‫والخطوط‬
)Feuille de style de base( ‫ ورقة انماط األساسية‬.2

:‫ نحتاج إلى ملفين‬،ً‫ أوال‬.".css" ‫ وتحمل االمتداد‬،)Notepad( ‫ خارجية باستخدام المفكرة البسيطة‬CSS ‫يمكن عمل ورقة أنماط‬
index.html ‫ يحمل االسم‬HTML ‫ملف‬
style.css ‫ نسميها‬CSS ‫ورقة أنماط‬
:MS Expression Web ‫ باستخدام‬،‫قم بإنشاء هذين الملفين في نفس المجلد على جهازك‬
Fichier → Nouveau → HTML ou CSS
:‫ التعليمات التالية‬index.html ‫وينبغي أن يتضمن‬

<!DOCTYPE html <!DOCTYPE html>
<HTML>
<HEAD>
<LINK href="style.css" rel="stylesheet" type="text/css">
<META CHARSET="utf-8"/>
<TITLE> Mon essai avec CSS</TITLE>
</HEAD>
<BODY>
<P>Ceci est mon premier paragraphe. <BR/> J’apprends comment
insérer un paragraphe avec deux méthodes : depuis
la vue « Code HTML » et depuis la vue « Conception »
sous Microsoft Expression Web 4.</P>
<H4>Depuis la vue « Code HTML »</H4>
<P>Je dois insérer ce paragraphe délimité par les balises ...</P>
<H4> Depuis la vue « Conception » </H4>
<P>Je dois me mettre sur cette dernière et ...</P>
</BODY>
</HTML>
6 ‫ من‬2 ‫صفحة‬
‫يجب أن تحتوي ‪ style.css‬على القاعدة التالية‪:‬‬

‫{ ‪P‬‬
‫;‪color: red‬‬
‫}‬
‫لكي يعمل هذا‪ ،‬يجب عليك تطبيق ‪ CSS‬على مستند ‪ ،HTML‬وإال لن يؤثر التنسيق الموضح في ملف ‪ CSS‬على عرض صفحة‬
‫‪ HTML‬في المتصفح (‪.)navigateur‬‬
‫إلرفاق ورقة أنماط (‪ )style.css‬إلى ملف ‪ :(index.html) HTML‬افتح ملف ‪ index.html‬وانسخ السطر التالي في داخل‬
‫عنصر ‪( head‬أي‪ ،‬بين عالمة >‪ <head‬و>‪) </head‬‬
‫>"‪<link href="style.css" rel="stylesheet" type="text/css‬‬
‫قم بحفظ هذين الملفين ثم افتح ‪ index.html‬بفضل المتصفح الخاص بك‪ ،‬يمكنك عندئذ مالحظة هذه النتيجة‪:‬‬
‫بدون‪CSS‬‬ ‫مع ‪CSS‬‬
‫‪ .3‬بنية ورقة ‪CSS‬‬

‫يوضح الرسم البياني التالي العناصر المختلفة لتصريح ‪:CSS‬‬
‫‪Sélecteur‬‬
‫‪Propriétés‬‬ ‫‪Valeur‬‬
‫‪Déclaration‬‬
‫‪ .1.3‬المحدد (‪)Sélecteur‬‬
‫سيسمح لنا المحدد باستهداف عنصر ‪ HTML‬أو أكثر لتطبيق نمط معين‪ .‬هناك أنواع مختلفة من المحددات تسمى محددات "بسيطة"‬
‫أو "معقدة"‪.‬‬
‫صفحة ‪ 3‬من ‪6‬‬

‫تسمى أيضًا محددات ‪ CSS‬البسيطة "محددات العناصر"‪ ،‬ببساطة ألنها تأخذ اسم نوع عنصر ‪ HTML‬المطلوب استهدافه‪.‬‬
‫على سبيل المثال‪ ،‬إذا كنت ترغب في تطبيق نمط معين على جميع فقرات صفحة الويب الخاصة بنا‪ ،‬فسوف نستخدم محدد ‪CSS‬‬
‫» }…{ ‪« P‬‬
‫‪ .2.3‬خصائص (‪)Propriétés‬‬
‫تسمح لنا الخصائص باختيار اي الجوانب (أواالساليب) لعنصر ‪ HTML‬الذي نرغب في تعديله‪.‬‬
‫» ; ‪« color : ...‬‬ ‫على سبيل المثال‪ ،‬سنتمكن من تغيير لون النص وتطبيق اللون الذي نريده بفضل الخاصية‬
‫قيمة الخاصية (‪)Valeur de la propriété‬‬

‫ترافق الخاصية دائما قيمة واحدة أو أكثر التي تحدد سلوك هذه الخاصية‪.‬‬
‫على سبيل المثال ‪ ،‬قد تحتوي خاصية اللون (‪ )color‬على قيمة » ‪( « red‬أحمر) ‪ ،‬وسيتم عرض النص الموجود داخل‬
‫عناصر ‪ HTML‬التي يتم تطبيق هذه الخاصية عليها باللون األحمر‪.‬‬
‫‪ .3.3‬مثال‬
‫‪Code CSS‬‬ ‫النتيجة‬
‫في المثال أعاله‪ ،‬نستخدم محدد ‪ CSS‬البسيط » ‪ « P‬الذي سيستهدف جميع فقرات صفحة ‪ HTML‬الخاصة بنا‪.‬‬
‫تالحظ أننا نستخدم خاصيتين ‪ color‬و ‪( font-size‬اللون وحجم الخط) لتعديل الفقرات‪.‬‬
‫تظهر فقراتنا اآلن باللون األزرق )‪ (blue‬وسيحتوي نصنا على حجم خط يساوي ‪ 14‬بكسل )‪.(14px‬‬
‫مالحظة‪:‬‬
‫يجب فصل كل تصريح عن أخرعن طريق "؛ " (الفاصلة المنقوطة)‪.‬‬
‫يتم وضع كافة التصريحات داخل محدد "{‪( "}...‬زوج من األقواس)‪ .‬يسمح هذا لـ ‪ CSS‬بمعرفة على أي محدد يجب‬
‫أن يطبق األنماط الموافقة‪.‬‬
‫في كل تصريح‪ ،‬يجب استخدام "‪( ":‬نقطتان) لفصل الخاصية عن قيمتها‪.‬‬
‫صفحة ‪ 4‬من ‪6‬‬

‫‪ .4‬تنسيق النص (‪)Mise en forme du texte‬‬

‫ينقسم تنسيق النص إلى مكونين‪ :‬الخط وتخطيط النص‪ .‬يمكن تعديل خطوط النص وتكييفها مع خصائص ‪ CSS‬التالية‪:‬‬
‫مثال عن القيم‬ ‫االستعمال‬ ‫خصائص ‪CSS‬‬
‫‪red; blue; brown; gold‬‬ ‫تغيير لون الخط‬ ‫‪color‬‬
‫"‪"Times New Roman‬‬

‫تغيير الخط المستخدم‬ ‫‪font-family‬‬
‫;‪Georgia; serif‬‬
‫‪12px; 14px; 16px‬‬ ‫تغيير حجم الخط‬ ‫‪font-size‬‬
‫‪normal; italic; oblique‬‬ ‫التبديل من خط مائل إلى خط عادي‬ ‫‪font-style‬‬
‫‪normal; bold‬‬ ‫يسمح لك بإدارة ثخانة الخط‬ ‫‪font-weight‬‬
‫يسمح لك بضبط تباعد الحروف ‪ ،‬بغض النظر عن‬

‫‪3px; 4px; 6px‬‬ ‫‪letter-spacing‬‬
‫خيارات تقنين الخط األصلي‬
‫‪underline red; underline‬‬ ‫يسمح لك بعرض خط مزخرف ‪ ،‬فوق ‪ ،‬أسفل ‪ ،‬أو في‬
‫‪text-decoration‬‬
‫;‪wavy red‬‬ ‫منتصف النص‬
‫‪left; right; center‬‬
‫يصف كيفية محاذاة النص للكتلة الخاصة به‬ ‫‪text-align‬‬
‫;‪justify‬‬
‫يحدد المساحة المضافة إلى يسار النص قبل بدء السطر‬

‫‪40px; 3mm‬‬ ‫‪text-indent‬‬
‫األول من النص‬
‫‪ .5‬تنسيق العناصر المجمعة (‪)Mise en forme d’un bloc‬‬

‫سنكتشف هنا الخصائص الرئيسية لألنماط التي تسمح لنا بتهيئة عناصر ‪ HTML‬الخاصة بنا بطريقة دقيقة جدًا‬
‫مثال عن القيم‬ ‫االستعمال‬ ‫خصائص ‪CSS‬‬
‫إضافة حد على كل جانب من الكتلة اومجموعة العناصر‪ .‬في‬
‫;‪1px solid Red‬‬ ‫‪border‬‬
‫كل مرة تقوم فيها بتحديد سمك نوع ولون الخط‬
‫;‪2px dotted blue‬‬ ‫يضيف لون الخلفية إلى الكتلة اومجموعة العناصر المجمعة معا‬ ‫‪background-color‬‬
‫;‪1px dashed brown‬‬ ‫إضافة صورة إلى الخلفية لمجموعة العناصر‬ ‫‪background-image‬‬
‫;‪red; #6699cc‬‬ ‫‪ background-repeat‬توضيح كيفية تكرار صورة الخلفية نفسها‬
‫يحدد عرض الكتلة بالبكسل أو كنسبة مئوية من الكتلة األصلية‬

‫)‪url(cours/bg.jpg‬‬ ‫‪width‬‬
‫(أي الكتلة التي تحتوي عليها)‬
‫;‪repeat-x; repeat-y‬‬
‫يحدد ارتفاع الكتلة اومجموعة العناصر المجمعة معا‬ ‫‪height‬‬
‫;‪repeat; no-repeat‬‬
‫يحدد المساحة حول الكتلة اومجموعة العناصر المجمعة معا‬

‫;‪250px; 70%‬‬ ‫‪Margin‬‬
‫عادة بالبكسل‬
‫صفحة ‪ 5‬من ‪6‬‬

‫‪ .6‬األلوان (‪)Couleurs‬‬
‫تقبل المتصفحات ‪ 3‬طرق ممكنة للتصريح بلون‪:‬‬
‫مالحظة‬ ‫مثال‬ ‫الطريقة‬
‫يتم تعيين اللون من خالل اسمها‪.‬‬ ‫;‪background-color: grey‬‬ ‫االلوان معرفة باالسم‬
‫يتم تعيين اللون برمزه السداسي العشري‬

‫;‪background-color: #808080‬‬ ‫االلوان معرفة بالرقم السداسي العشري‬
‫(متبوعًا بـ ‪ 6‬أرقام)‪.‬‬
‫يتم تعريف اللون بثالثة أرقام عشرية من‬

‫‪ 0‬إلى ‪ 255‬تشير على التوالي إلى نسبة‬ ‫‪background-color:‬‬
‫االلوان المركبة‬
‫اللون األحمر و نسبة اللون األخضر و‬ ‫;)‪RGB(128,128,128‬‬
‫نسبة اللون االزرق‪.‬‬
‫مثال‪:‬‬
‫التركيبة(احمر‪.‬اخضر‪,‬ازرق)‬
‫اسم اللون‬ ‫مثال‬
‫السداسي العشري‬ ‫العشري‬
‫‪Hexadécimal‬‬ ‫‪Décimal‬‬
‫‪Blue‬‬ ‫‪#0000FF‬‬ ‫)‪RGB( 0, 0,255‬‬
‫‪Orange‬‬ ‫‪#FF4500‬‬ ‫)‪RGB(255, 69,255‬‬
‫‪Gold‬‬ ‫‪#FFD700‬‬ ‫(‪RGB‬‬ ‫)‪0,255, 15‬‬
‫‪Green‬‬ ‫‪#FFD700‬‬ ‫(‪RGB‬‬ ‫)‪0,255,215‬‬
‫‪ .7‬عمل تطبيقي (‪)TP‬‬

‫إنشاء موقع شخصي‪ ،‬والذي سيتم استخدامه لتقديمك وتقديم مهاراتك وخبراتك‪.‬‬
‫سيحتوي الموقع على أربع صفحات‬
‫الصفحة الرئيسية‬
‫صفحة تصف تجاربك المهنية‬
‫صفحة تصف هواياتك‬
‫صفحة االتصال‬
‫المراجع‬
‫يمكن للطالب االطالع على هذه المراجع لتعميق معرفتهم في هذا المجال‪:‬‬
‫‪Engels, J., (2012), HTML5 et CSS3 Cours et exercices corrigés, Paris : Eyrolles.‬‬
‫المواقع‬
‫‪https://developer.mozilla.org/fr/docs/Web/CSS/‬‬
‫‪http://formation.upyupy.fr/style-css/‬‬
‫‪http://pierre-giraud.com/html-css/‬‬
‫صفحة ‪ 6‬من ‪6‬‬

Info Niv3 Cours8 Ar

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Info Niv3 Cours8 Ar

Uploaded by

Copyright:

Available Formats

‫© جامعة قسنطينة ‪2‬‬ ‫‪2018-2017‬‬ ‫إعالم آلي – مستوى ‪3‬‬

‫جامعة عبد الحميد مهري – قسنطينة ‪2‬‬

‫آل – مستوى ‪3‬‬

‫أهداف الدرس ‪8‬‬

‫صفحة ‪ 1‬من ‪6‬‬

)Feuilles de style CSS( ‫ أوراق االنماط‬.1

)Feuille de style de base( ‫ ورقة انماط األساسية‬.2

:‫ التعليمات التالية‬index.html ‫وينبغي أن يتضمن‬

‫يجب أن تحتوي ‪ style.css‬على القاعدة التالية‪:‬‬

‫‪ .3‬بنية ورقة ‪CSS‬‬

‫صفحة ‪ 3‬من ‪6‬‬

‫قيمة الخاصية (‪)Valeur de la propriété‬‬

‫صفحة ‪ 4‬من ‪6‬‬

‫‪ .4‬تنسيق النص (‪)Mise en forme du texte‬‬

‫"‪"Times New Roman‬‬

‫‪12px; 14px; 16px‬‬ ‫تغيير حجم الخط‬ ‫‪font-size‬‬

‫‪normal; italic; oblique‬‬ ‫التبديل من خط مائل إلى خط عادي‬ ‫‪font-style‬‬

‫‪normal; bold‬‬ ‫يسمح لك بإدارة ثخانة الخط‬ ‫‪font-weight‬‬

‫يسمح لك بضبط تباعد الحروف ‪ ،‬بغض النظر عن‬

‫يحدد المساحة المضافة إلى يسار النص قبل بدء السطر‬

‫‪ .5‬تنسيق العناصر المجمعة (‪)Mise en forme d’un bloc‬‬

‫;‪red; #6699cc‬‬ ‫‪ background-repeat‬توضيح كيفية تكرار صورة الخلفية نفسها‬

‫يحدد عرض الكتلة بالبكسل أو كنسبة مئوية من الكتلة األصلية‬

‫يحدد المساحة حول الكتلة اومجموعة العناصر المجمعة معا‬

‫صفحة ‪ 5‬من ‪6‬‬

‫يتم تعيين اللون برمزه السداسي العشري‬

‫يتم تعريف اللون بثالثة أرقام عشرية من‬

‫‪ .7‬عمل تطبيقي (‪)TP‬‬

‫صفحة ‪ 6‬من ‪6‬‬

You might also like