sesamy
الاداره
  مُشآركاتيّ : 2395
دُعاآء اليومّ : اللهم اكفني بحلالك عن حرامك واغننى بفضلك عن من سواك
نقآطيّ : 10165
السٌّمعَة : 6
ُعُضويتيّ : 28/11/2008
الموقع : anty.banouta.net
الهوايه : 
♔ علمـ بلدي ♔ : 
✿ مزاجِې النـﻬاردهـ ✿ : 
الاضافات
ساعة المنتدى: Digital Clock HI, THE TIME IS
 |  موضوع: تطوير المواقع للمبتدئين ( التصميم والألوان )  السبت يناير 23, 2010 9:48 pm | |
| التصميم والألوان
في الجزء السابق تحدثنا عن HTML، ولعلك لاحظت أننا لم نتحدث عن
الألوان والخطوط وتنسيق النص، يمكنك إنشاء أي موقع باستخدام HTML فقط لكن
لكي تضيف بعض اللمسات الجمالية عليك أن تستخدم تقنية CSS.
لماذا CSS؟
تصور أن لديك موقعاً يحوي أكثر من خمسين صفحة HTML وأردت أن تغير لون
الصفحات فماذا ستفعل؟ في الماضي كان البعض يستخدم HTML نفسها لإضافة
الألوان لعناصر الصفحة وهذه ممارسة غير صحيحة، من المفترض ألا تستخدم HTML
إلا لوصف المحتويات كما شرحنا في الجزء السابق، ولو استخدمت هذه الطريقة
فعليك أن تغير الخمسين صفحة بنفسك، باستخدام تقنية CSS يمكنك أن تغير لون
خلفية الصفحات كلها من خلال تغيير ملف واحد فقط.
كيف؟ ببساطة عليك إنشاء ملف CSS ثم ربط كل صفحة HTML بهذا الملف، بعد ذلك
يمكنك أن تتحكم بتصميم كل الموقع من خلال تعديل ملف واحد، قد يبدو هذا
معقداً لكن لا تقلق، سنشرح كل هذا ونبسطه.
ملف CSS
لكي تقوم بإنشاء ملف CSS كل ما عليك فعله هو فتح ملف نصي جديد ثم
احفظه باسم مثل style.css، لاحظ أنني أضفت اللاحقة css لاسم الملف.
أعلم أن الملف الآن فارغ، سنعود له لاحقاً،
الآن قم بإنشاء ملف html وسمه مثلاً firstcss.html وضع فيه هذا القالب:
< ! DOCTYPE HTML PUBLIC “-/ /W3C//DTD HTML4.01 // EN ”
“http://www.w3.org/TR/html4/strict.dtd” >
< html dir="rtl">
< head>
< title>< /title>
< meta http-equiv="Content-type" content="text/html; charset=utf-8" >
< /head>
< body>
< /body>
< /html>< /html>طبعاً بدون فواصل
تذكر أن هذا القالب يجب أن يستخدم في كل الصفحات
التي تقوم بإنشاءها، الآن أضف هذا السطر إلى قسم رأس الصفحة:
...
< head >
< title>< /title>
< meta http-equiv="Content-type" content="text/html; charset=utf-8">
< link href="style.css" type="text/css">
< /head > وبرضه بدون فواصل
....
هل خمنت ما يفعله هذا العنصر؟ باستخدام عنصر link يمكننا أن نخبر المتصفح
بأن صفحة HTML التي يعرضها مرتبطة بملف آخر، وفي حالتنا هنا الصفحة مرتبطة
بملف CSS، وقد وضعنا خاصية جديدة تسمى type وقيمتها text/css وهذه القيمة
تخبر المتصفح عن نوع الملف، هكذا يفهم المتصفح أن عليه تطبيق أوامر CSS
الموجودة في الملف على صفحة HTML.
ضع محتويات مختلفة للصفحة، ضع عنواناً رئيسياً باستخدام h1،
ضع فقرات مختلفة وعناوين فرعية، المهم أن تحوي بضعة عناوين وفقرات.
استعراض ملف firstcss.html في متصفحك، وافتح بفتح ملف style.css في المحرر
النصي، ستضيف أوامر CSS للملف وتحفظه ثم عليك أن تعود للمتصفح وتعيد عرض
الصفحة أو الضغط على زر F5 لكي ترى تأثير أوامر CSS، وكلما أضفت أمراً
جديداً قم بتحديث الصفحة.
تشريح CSS
دعنا نضيف أمراً بسيطاً في ملف CSS أنقل السطر التالي للملف واحفظه وانظر إلى النتيجة في المتصفح:
body {bacground-color: black;}
ماذا وجدت في المتصفح؟ أصبحت الصفحة سوداء، يمكنك أن تفهم عناصر أمر CSS
بنفسك إن فكرت قليلاً، فالكلمة الأولى هي body وهذا هو اسم العنصر الذي
نستخدمه في ملف HTML، أليس كذلك؟ نحن نقول للمتصفح بأننا نريد تعديل شكل
العنصر body، ثم وضعنا قوس { والذي من بعده سنكتب الخصائص التي نريد
تغييرها وسنضع لكل خاصية قيمة.
لدينا هنا خاصية واحدة وهي background-color أي لون خلفية الصفحة،
وأعطيناها القيمة black أي اللون الأسود، ثم وضعنا فاصلة منقوطة، يمكن بعد
الفاصلة أن نضع خاصية أخرى، عدل المثال السابق كما يلي:
body {background-color: lightblue; color: darkblue;}
يمكن أيضاً أن تكتب نفس السطر بهذا الشكل:
body {
background-color: lightblue;
color: darkblue;
}
أليس المثال أكثر وضوحاً الآن؟ في بعض الأحيان قد تضع أكثر من خمسة خصائص،
وليس من العملي وضعها كلها في سطر واحد، لذلك بسط الأمر على نفسك وضع كل
خاصية في سطر لوحده.
الآن أعد استعراض الصفحة في المتصفح، تغير لون الخلفية والنص، الخاصية
color تغير لون النص، وقد اخترنا اللون darkblue للنص، أي الأزرق الغامق،
هناك أسماء عديدة للألوان، وهناك طرق مختلفة لوضع قيم الألوان مثل
الأرقام، ليس من الضروري أن تحفظ هذه الأسماء أو الأرقام لأن هناك مواقع
وبرامج تساعدك على اختيارها بسهولة.
يمكن أن نضع القيمة الرقمية للألوان بدلاً من أسماءها كما في المثال التالي:
body {
background-color: #ADD8E6;
color: #00008B;
}
لن يختلف أي شيء في الصفحة، وليس هناك ما يميز طريقة عن أخرى، بشكل عام
الأرقام تستخدم أكثر من الأسماء، وفي بعض الأحيان يمكن اختصار الأرقام،
فاللون الأسود مثلاً رقمه 000000 ويمكن اختصاره إلى 000، وأسماء الألوان
لا تقدم الكثير من الألوان، هناك ألوان لا يمكنك أن تضعها إلا باستخدام الأرقام.
هذه هي تقنية CSS باختصار، عليك أولاً أن تضع عنصر HTML الذي تريد تغيير
شكله، ثم تضع الخصائص ولكل خاصية قيمة، في هذا الكتاب لن نحتاج للحديث عن
معظم خصائص CSS، لذلك سأكتفي بشرح هذه الخصائص:
- الخطوط: font وtext-align وline-height
- الإطارات: border وpadding
- المساحة: width وheight
الخطوط
تقنية CSS تعطيك إمكانيات كبيرة للتحكم بالخطوط لكننا هنا سنكتفي
بحجم الخط ونوعه، كذلك بالمسافة بين السطور وبمحاذاة النص، ثلاثة خصائص
يتكرر استخدامها كثيراً ويمكنها أن تجعل أي نص سهل القراءة.
أفترض أن لديك في ملف firstcss.html فقرة واحدة أو أكثر،
سنتحكم بهذه الفقرات ونعدل خطوطها، دعنا أولاً نحدد حجم ونوع الخط:
p {font: 16px sans-serif;}
يمكنك أن تضع للخاصية font أكثر من أربعة قيم لكنني أكتفي هنا باثنتين،
الأولى هي لحجم الخط والثانية لنوعه، sans-serif ليس بالضرورة اسم خط محدد
بل نوع من الخطوط تسهل قراءته في شاشات الحواسيب، لنعدل القيم قليلاً:
p {font: 16px Tahoma, sans-serif;}
لدينا الآن نوعان من الخطوط، عندما يقرأ المتصفح ملف CSS سيبحث في الحاسوب
عن خط Tahoma لكي يعرض النص بهذا الخط، فإن لم يجده سيعرض الخط التالي وهو
sans-serif، يمكنك أن تضع عشرات الخطوط هنا إذا أرد، إفصل بين كل خط وآخر
بفاصلة، لكن أنصحك بأن تكتفي بثلاثة خطوط لا أكثر.
في بعض الأحيان قد ترغب بزيادة المسافة بين السطور لكي تجعل عملية القراءة
أكثر سهولة ولا تتعب عيني الزائر، لفعل ذلك أنت بحاجة لخاصية
line-height:
p {
font: 16px Tahoma, sans-serif;
line-height: 1.5;
}
أنظر إلى النتيجة في المتصفح بعد إضافة هذا السطر إلى ملف CSS، سترى أن
المسافة ازدادت بين سطور الفقرات لأننا وضعنا القيمة 1.5 لخاصية
line-height، جرب أن تزيد الرقم أو تنقصه، جرب مثلاً أن تضع القيمة صفر،
أو 0.5 أو 3.
أخيراً لدينا الخاصية text-align وهي مختصة بمحاذاة النص، ولها أربع قيم:
- اليمين: right
- اليسار: left
- التوسيط: center
- المحاذاة من الجانبين: justify
القيمة الأخيرة تحتاج إلى أن تشاهد تأثيرها لكي تفهمها، جرب أن تضع هذا السطر إلى ملف
css:
p {
font: 16px Tahoma, sans-serif;
line-height: 1.5;
text-align: center;
}
أنظر إلى النتيجة، ستجد أن نصوص الفقرات أصبحت في منتصف الصفحة،
غير القيمة من center إلى القيم الأخرى وشاهد الاختلاف.
الإطارات
يمكنك من خلال CSS أن تضع إطاراً حول كل عنصر في HTML، تخيل معي أن
كل عنصر في HTML هو عبارة عن صندوق، هذا الصندوق يمكنك أن تضع له إطاراً،
كيف؟ افترض أن لديك في ملف firstcss.html عنوان h1 واحداً على الأقل، كيف
يمكنك أن تضع له إطاراً؟ أضف السطر التالي إلى ملف
css:
h1 {border: 1px solid black;}
خاصية border تعني الإطار، ولها ثلاث قيم، بعض خصائص CSS تحتاج إلى أكثر
من قيمة واحدة، القيمة الأولى لدينا هي 1px وتعني أن سمك الإطار سيكون
بمقياس 1 بكسل، حرفي px هما اختصار pixel، ثم لدينا القيمة solid وهي تعني
أن خط الإطار سيكون بدون أي تأثير وبدون أي فراغات، يمكنك أن تضع قيماً
أخرى بدلاً من solid مثل:
جرب كل واحدة وانظر إلى النتائج، ثم لدينا القيمة black هي
تعني لون الإطار ويمكننا أن نضع القيمة الرقمية بدلاً من اسم اللون:
h1 {border: 1px solid #000;}
ماذا لو أردت أن تزيد المساحة بين العنوان والإطار؟
لعلك تريد مساحة فارغة أكبر، فكيف تفعل ذلك؟ لدينا الخاصية
padding:
h1 {
border: 1px solid black;
padding: 30px;
}
ضع هذا السطر في ملف CSS وانظر إلى النتيجة في متصفحك، ستجد أن العنوان
الآن يحوي مساحة أكبر بينه وبين الإطار، لكنك تستطيع أن تضيف المزيد من
القيم لخاصية padding فتتحكم بالمسافة بين العنوان والإطار العلوي، وكذلك
بالمساحة بين العنوان والإطار الأيمن، وبالتأكيد المسافة بين العنوان
والإطار السفلي والأيسر:
h1 {
border: 1px solid black;
padding: 0 10px 20px 30px;
}
ما فعلناه هو إضافة أربع قيم لخاصية padding، كل قيمة تتحكم بجانب ما من
المساحة بين العنوان والإطار، الأولى للجانب العلوي، والثانية للجانب
الأيمن، والثالثة للجانب السفلي والرابعة للجانب الأيسر، يمكنك أن تحفظ
هذا الترتيب بأن تتذكر دوران عقارب الساعة: الأعلى، الأيمن، الأسفل،الأيسر.
هذه القيم الأربع بهذا الترتيب ستتكرر مرات عديدة عندما تبدأ في تعلم المزيد من خصائص CSS.
المساحة
مع تعلمك المزيد من خصائص CSS ستحتاج إلى خاصية تحدد مساحة عناصر
HTML، فقد ترغب في أن يظهر النص في مساحة صغيرة بدلاً من أن يغطي كل
الصفحة، فكيف تفعل ذلك؟ لدنيا الخاصية width والتي تحدد عرض أي عنصر:
p {width: 400px;}
في المثال أعلاه وضعنا الخاصية width للعنصر p أي الفقرات، ووضعنا القيمة
400 بكسل للخاصية، أي أننا نريد أن يبلغ عرض الفقرة 400 بكسل، جرب أن تضع
هذا السطر في ملف CSS وانظر إلى النتيجة، يمكنك أن تزيد القيمة أو تنقصها
كما تشاء، لكن تذكر ألا تجعلها تزيد عن عرض نافذة المتصفح لديك.
هناك خاصية height التي تعمل بنفس الطريقة لكنها تتحكم بارتفاع العنصر، من
النادر أن تحتاج لاستخدام هذه الخاصية، لكن من الجيد أن تجربها وتتعلمها،
لست بحاجة إلى أن أريك كيف، فهي لا تختلف عن خاصية width.
المصدر | |
|
التسجيل 
