Professional Documents
Culture Documents
Web Designing 3
Web Designing 3
12
Media Query
12
الصغية العامة لتعريف @media
تعريف أكثر من استايل 19
24
استخدام الصور )(images
30
استخدام الفيديو )(video
37
استخدام الجداول )(tables
تصميم صفحة ويب متكاملة 45
48
استخدام ))(RWDاه(D
السئلة 49
2
ما هو )Responsive Web Design(RWD
3
مقدمة عن Viewport
قبل ظهور ال)ه Dاللوحية والهواتف الذكيCCة تCCم تصCCميم صCCفحات الCويب
لتكون ملئمة لشاشات الحواسيب فقط .وعند ظهCCور ال)ه (DCCالتCCابلت
والهواتف الذكية كانت صفحات الويب ذات حجم كCCبير للتتناسCCب علCCى
Viewportولحل هCCذه المشCCكلة يجCCب تقليCCص حجCCم صCCفحات الCCويب
)تصغير حجم صفحات الويب إن صCCح المعنCCى( للتتناسCCب مCCع شاشCCة
الهCCاتف أو التCCابلت رغCCم أن الحCCل ليCCس )يCCداً بمCCا فيCCه الكفايCCة ولكنCCه
سريع.
ماهو Viewport
4
حيث أن :
-1تم تعريف وسم أو عنصر و <metaوهذا العنصر تم شرحه في الجDء
الول من كتاب مملكCCة تصCCميم المواقCCع) (HTML, CSSوقلCCت أن هCCذا
العنصر يستخدم بين وسميو <head><head/أو رأ< الصفحة
:name -2لتحديد اسم) (meatdataأو البيانات الوصفية
:content-3لعطائها قيمة مCCن أ)CCل ربطهCCا مCCع الخاصCCية ) (nameأو )
(http-equivحيCCث القيمCCة الولCCى كCCانت ) (width=device-widthأي يعنCCي
إعرض الصCCفحة أو الصCفحات للتتناسCCب مCع حجCم الشاشCCة .والقيمCCة
الثانيCCة هCCي ) (initial-scale=1.0أي أنCCه يقCCوم بتحديCCد مسCCتوى تكCCبير
الصفحة) (zoom levelللمر( الولى عند تحميلها من قبل المتصفح
5
بدون استخدام Veiwport
6
Veiwport باستخدام
7
الخاصية box-sizing
box-sizing الخاصية
تسCCمح لCCك هCCذه الخاصCCية بتضCCمين ) (paddingو) (borderللمجمCCوb
الكلCCي للعCCرض)(widthوالرتفCCا (height)bللعناصCCر أو الوسCCوم وهCCي
مهمة في عملية )(responsive
8
9
فCCي هCCذا المثCCال ) (div2أكCCبر مCCن ) (div1السCCبب لن ) (div2لCCديها
الخاصية ). (padding
السؤال الن كيف سوف نجعل كل مCCن )(div1و) (div2لCCديهم نفCCس
العرض ؟
10
11
هل لحظت الفرق الن؟
فCCي السCCطر 5قمCCت بتعريCCف شCCيء )ديCCد وهCCي علمCCة )*( هCCذه العلمCCة
وظيفتها أنها تطبق )ميع الخصائص على )ميع العناصCCر دون اسCCتثناء أي انهCCا
سوف تطبق خاصية ) (box-sizingعلى كل من العنصر) (div1و)(div2
في السطر 6قمت بتعريف الخاصية ) (box-sizingحيث القيمة كCCانت )border-
(boxأي سوف تعمل على تضCCمين ) (paddingو) (borderمCCع العCCرض والرتفCCاb
وبالتالي أصبح كل من ) (div1و) (div2بنفس العرض
Media Query
حيث :
:@media-1تكتب كما هي عند التعريف
:not | only -2وهي ترتبط مع ) (mediatypeحيث أن ) (notتعني في حال لم تكن/يكن
و) (onlyتعني في حال كانت/كان
:mediatype -3وتأخذ اربعة قيم وهي)(screen, print, all, speech
:and (expressions)-4هنا يكتب الشرط وفي حال تحقق الشرط ينفذ CSS
12
13
كل ما يهمنا في هذا المثال هما السCCطرين 4و 21امCCا بCCاقي السCCطر فهCCي
مفهومة .
الجواب:
معنى هذا السطر هو أن ك أخ برت المتص فح ف ي ح ال ك انت )(only
ع رض) (widthالdا hة) (phone,tablet,..etcه و ) (768pxأو أص غر نف ذ
خص ائص CSSوه ي أن تجع ل ) (width=100%للعناص ر ال تي ت م
اعطائه ا ه ذا )(classوأن تجع ل الل ون الخ sر)(background=green
للعناصر التي تم اعطائها هذا )(id
الن عند التنفيذ في حال كان عرض الشاشة أكبر من 768pxلن ينفذ السCCطر
21كما هو موضح في الصور( التي فوق
14
وفي حال كان عرض الشاشة 768pxأو أصغر سوف ينفذ السCCطر 21كمCCا هCCو
موضح في الصور( التي فوق
15
في الس طر 21أخ برت المتص فح ف ي ح ال ل م يك ن ) (notع رض)
(widthالdا hة) (phone,tablet,..etcه و)(768pxأو أك بر نف ذ خص ائص
CSSوهي أن تجعل ) (width=100%للعناصر ال تي ت م اعطائه ا ه ذا )
(classوأن تجعل اللون الخsر) (background=greenللعناصر ال تي ت م
اعطائها هذا )(id
16
الن عند التنفيذ في حال كان عرض الشاشة لم يسCCاوي 768pxأو أكCCبر مCCن
القيمة سوف ينفذ السطر 21كما هو موضح في الصور( التي فوق
17
في حال كان عرض الشاشة يساوي 768pxأو أصغر لن ينفذ السطر 21كما
هو موضح في الصور( التي فوق
18
تعريف أكثر من استايل
19
20
شاشة كمبيوتر
21
شاشة تابلت
22
شاشة هاتف
23
استخدام الصور )(images
24
25
26
شاشة )هاز كمبيوتر
27
شاشة )هاز التابلت
28
شاشة )هاز الهاتف
29
استخدام الفيديو )(video
30
31
32
33
شاشة )هاز كمبيوتر
34
شاشة )هاز التابلت
35
شاشة )هاز الهاتف
36
استخدام الجداول )(tables
37
38
39
40
41
شاشة )هاز الكمبيوتر
42
شاشة )هاز التابلت
43
شاشة )هاز الهاتف
44
تصميم صفحة ويب متكاملة
قمت بتصميم صفحة ويب متكاملة حيث أنها متوافقة مع شاشات كCCل
ال)ه (Dوسوف أقوم بإرفاق الملف مع الكتاب حتى يستفيد الكCCل مCCن
هذا التصميم .
45
شاشة )هاز تابلت
46
شاشة )هاز هاتف
47
استخدام ))(RWDاه(D
إذا كنت تريد أن تختصر علCCى نفسCCك الCCوقت فCCي تصCCميم الموقCCع ول
تريد أن تدخل في الكثير من التفاصCCيل فCCي عCCالم ). (RWDإذا يمكنCCك
تحميل )) (frameworksاه (Dلجعل موقعك متوافق مCCع ال)ه .(DCCفقCCط
كل ما عليك فعله هو تحميCCل ) (frameworkعلCCى الموقCCع واسCCتدعائه
على العناصر أو الوسوم في موقعك
(http://www.w3schools.com/lib/w3.css)-1
(/http://getbootstrap.com/getting-started )-2
النهاية
48
السئلة
-1ما هو تعريف )(RWD؟
-2ما هو )(viewport؟
49
-5قم بتصميم صفحة متكاملة تتكلم عن السير( الذاتية
الخاصة بك
50
المرا)ع
تCCم السCCتعانة بموقCCع /http://www.w3schools.comلتسCCهيل المCCاد(
على القارئ وهناك إضافات وأمثلة كثير( في الكتاب غير مو)ود( في
الموقع
ي( ي
الع َعالَم َ الَ عمد ليله يه َرب )و ي
آخر َد عع َواه عم أَ عن ع َ
وصل ل وسلم وبارك على ممد وعلى أله وصحبه أجعي
51