بداية، أرجو أن تقوموا بتنزيل الملف التالي: lesson3.zip
والذي يحوي هذه الملفات:
هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة "جميع الحقوق محفوظة".
سنبدأ مع ملف layout.css، ونشرح الإضافات الجديدة فقط، أما الأوامر القديمة فإنها مشروحة في الدرس السابق.
أول إضافة جديدة هي معرف جديد قديم! وهو topnav a، وقد شرحنا بالتفصيل في الدرس الماضي خصائص topnav، فما الجديد في هذا المعرف؟ الجديد هو إضافة الحرف a، وهو الأمر الخاص بالروابط في html، نحن نخبر المتصفح بأن المساحة أو المعرف topnav سيحوي عدداً من الروابط، ولهذه الروابط خصائص معينة:
- font: تعني الخط! وهنا حددنا له أن يكون ثخيناً bold، بمقياس 10px، ونوع Tahoma، لاحظوا الترتيب الذي اتبع في وضع القيم، فلا يجوز مثلاً أن أضع نوع الخط قبل قياسه، بل يجب أن تكون مرتباً بهذا الترتيب، وبالطبع لا يجب أن تضع كل هذه القيم، يمكنك أن تضع القياس فقط أو الخط فقط أو القياس والخط معاً، لكن إن أردت أن تضع جميع الخصائص فيجب أن تضعها بهذا الترتيب. (المزيد من الشرح ستجدونه في مواقع أخرى متخصصة).
- text-decoration: هذه الخاصية تقوم بعمل تأثيرات على النص، وتقبل هذه القيم:
- color: وتعني لون الخط واخترنا القيم gray له وتعني الرمادي، ويمكن وضع قيم أخرى للون كالقيم الرقمية (مثال: #808080).
ثم نجد معرف topnav وقد أضفنا له ul و li، وهذان أمران في html لعمل القوائم، وتم استخدامهما هنا لإنشاء الروابط، بحيث تعرض الروابط على خط واحد بدلاً من عدة خطوط، فإذا أردنا في المستقبل أن نقوم بوضع الروابط في مساحة جانبية ويكون كل رابط أسفل الآخر فيمكن عمل هذا بسهولة في ملف css دون الحاجة إلى فتح ملفات html وتعديلها
- text-indent: هذه خاصية تضيف مساحة فارغة للسطر الأول في الفقرات وقد استخدمتها هنا لكي أبعد الروابط عن طرف الصفحة لكي يسهل قراءتها أكثر.
- display: هذه الخاصية تتحكم بأسلوب عرض العناصر فيhtml وتقبل هذه القيم:
none: وتعني أنها لن تعرض شيئاً، وهذه مفيدة في حالة رغبة المصمم أن ينشأ ملف css لطباعة المحتويات، حيث يجعل كل عناصر التصميم تختفي ما عدى المحتويات الرئيسية فقط، وهذا يوفر الوقت على المصمم ويوفر الوقت وحبر الطباعة على زوار الموقع، وكذلك يوفر الوقت على المبرمج حيث لا حاجة لإنشاء ملف خاص للطباعة.
- inline: وتعني أنها ستعرض كل شيء في سطر واحد وبما أننا طبقناها على أوامر ul وli فإن هذه الأوامر تظهر عادة على شكل قوائم، وباختيار قيمة inline سنجبرها على أن تظهر في سطر واحد.
- margin-right: شرحناها في الدرس الماضي، لكن هنا خصصنا خاصية margin للجهة اليمنى فقط، حتى تكون الروابط متباعدة عن بعضها البعض بمسافة تسهل عملية قراءتها.
ثم أضفنا معرف main، والذي سيكون في منتصف الصفحة وسيحوي المحتويات الرئيسية، ثم حددنا للمعرف p main كيف سيعرض الفقرات فاخترنا حجم الخط ونوعه، ثم حددنا للمعرف main a، كيف سيعرض الروابط واخترنا لون الخط والذي يجب أن يكون مختلفاً تماماً عن النص حتى يتم التعرف عليه، واخترنا عدم وضع خط أسفله، وفي النهاية أضفنا فئة جديدة وهذه تحتاج لشرح بسيط.
الفئات (class) في css يتم تحديدها بوضع نقطة قبلها، والمعرفات كما شرحنا في الدرس الماضي يتم وضع علامة # قبلها، الفئات يمكن استخدامها أكثر من مرة في نفس الصفحة، بينما لا يجوز استخدام المعرفات في نفس الصفحة أكثر من مرة، وتستطيع تسمية الفئات كما تشاء، وبما أن أن الفئة هنا خاصة بملاحظة "جميع الحقوق محفوظة" فإنني أسميتها copyright، واخترت لها عدة خصائص، كالإطار العلوي الرمادي المنقط، واخترت توسيط النص الذي ستحتويه.
ملف index.htm لا جديد فيه إلا أمر
، وهو كيفية تحديد الفئة في html، فالمعرفات نحددها باستخدام id، والفئات نحددها باستخدام class، طبعاً أضفت بعض الفقرات وأضفت روابط في معرف topnav لاحظ كيف استخدمات أوامر ul وli، وغير في ملف css الأمر الخاص بعرضها display من inline إلى list-item وانظر ماذا سيحدث.
هذا كل شيء
أرجو أن يكون الشرح جيداً ومفهوماً.
منقول بتصرف من سوالف نت, وسردال الى مجمع مطورى المواقع, الى منتديات الدعم العربى
تحياتى
والذي يحوي هذه الملفات:
- layout.gif - صورة مصغرة للتصميم.
- logo.gif - صورة تمثل شعاراً.
- index.htm - ملف html الذي سيحوي التصميم.
- layout.css - ملف css والذي سنضع فيه تفاصيل التصميم.
هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة "جميع الحقوق محفوظة".
سنبدأ مع ملف layout.css، ونشرح الإضافات الجديدة فقط، أما الأوامر القديمة فإنها مشروحة في الدرس السابق.
أول إضافة جديدة هي معرف جديد قديم! وهو topnav a، وقد شرحنا بالتفصيل في الدرس الماضي خصائص topnav، فما الجديد في هذا المعرف؟ الجديد هو إضافة الحرف a، وهو الأمر الخاص بالروابط في html، نحن نخبر المتصفح بأن المساحة أو المعرف topnav سيحوي عدداً من الروابط، ولهذه الروابط خصائص معينة:
PHP كود :
#topnav a {
font: bold 10px Tahoma;
text-decoration: none;
color: Gray;
}
- font: تعني الخط! وهنا حددنا له أن يكون ثخيناً bold، بمقياس 10px، ونوع Tahoma، لاحظوا الترتيب الذي اتبع في وضع القيم، فلا يجوز مثلاً أن أضع نوع الخط قبل قياسه، بل يجب أن تكون مرتباً بهذا الترتيب، وبالطبع لا يجب أن تضع كل هذه القيم، يمكنك أن تضع القياس فقط أو الخط فقط أو القياس والخط معاً، لكن إن أردت أن تضع جميع الخصائص فيجب أن تضعها بهذا الترتيب. (المزيد من الشرح ستجدونه في مواقع أخرى متخصصة).
- text-decoration: هذه الخاصية تقوم بعمل تأثيرات على النص، وتقبل هذه القيم:
- none: لا تفعل شيئاً.
- underline: تضع خطاً أسفل النص.
- overline: تضع خطاً أعلى النص.
- line-through: تضع خطاً على النص.
- color: وتعني لون الخط واخترنا القيم gray له وتعني الرمادي، ويمكن وضع قيم أخرى للون كالقيم الرقمية (مثال: #808080).
ثم نجد معرف topnav وقد أضفنا له ul و li، وهذان أمران في html لعمل القوائم، وتم استخدامهما هنا لإنشاء الروابط، بحيث تعرض الروابط على خط واحد بدلاً من عدة خطوط، فإذا أردنا في المستقبل أن نقوم بوضع الروابط في مساحة جانبية ويكون كل رابط أسفل الآخر فيمكن عمل هذا بسهولة في ملف css دون الحاجة إلى فتح ملفات html وتعديلها
PHP كود :
#topnav ul, li {
text-indent: 50px;
display: inline;
margin-right: 20px;
}
- text-indent: هذه خاصية تضيف مساحة فارغة للسطر الأول في الفقرات وقد استخدمتها هنا لكي أبعد الروابط عن طرف الصفحة لكي يسهل قراءتها أكثر.
- display: هذه الخاصية تتحكم بأسلوب عرض العناصر فيhtml وتقبل هذه القيم:
none: وتعني أنها لن تعرض شيئاً، وهذه مفيدة في حالة رغبة المصمم أن ينشأ ملف css لطباعة المحتويات، حيث يجعل كل عناصر التصميم تختفي ما عدى المحتويات الرئيسية فقط، وهذا يوفر الوقت على المصمم ويوفر الوقت وحبر الطباعة على زوار الموقع، وكذلك يوفر الوقت على المبرمج حيث لا حاجة لإنشاء ملف خاص للطباعة.
- inline: وتعني أنها ستعرض كل شيء في سطر واحد وبما أننا طبقناها على أوامر ul وli فإن هذه الأوامر تظهر عادة على شكل قوائم، وباختيار قيمة inline سنجبرها على أن تظهر في سطر واحد.
- margin-right: شرحناها في الدرس الماضي، لكن هنا خصصنا خاصية margin للجهة اليمنى فقط، حتى تكون الروابط متباعدة عن بعضها البعض بمسافة تسهل عملية قراءتها.
ثم أضفنا معرف main، والذي سيكون في منتصف الصفحة وسيحوي المحتويات الرئيسية، ثم حددنا للمعرف p main كيف سيعرض الفقرات فاخترنا حجم الخط ونوعه، ثم حددنا للمعرف main a، كيف سيعرض الروابط واخترنا لون الخط والذي يجب أن يكون مختلفاً تماماً عن النص حتى يتم التعرف عليه، واخترنا عدم وضع خط أسفله، وفي النهاية أضفنا فئة جديدة وهذه تحتاج لشرح بسيط.
الفئات (class) في css يتم تحديدها بوضع نقطة قبلها، والمعرفات كما شرحنا في الدرس الماضي يتم وضع علامة # قبلها، الفئات يمكن استخدامها أكثر من مرة في نفس الصفحة، بينما لا يجوز استخدام المعرفات في نفس الصفحة أكثر من مرة، وتستطيع تسمية الفئات كما تشاء، وبما أن أن الفئة هنا خاصة بملاحظة "جميع الحقوق محفوظة" فإنني أسميتها copyright، واخترت لها عدة خصائص، كالإطار العلوي الرمادي المنقط، واخترت توسيط النص الذي ستحتويه.
ملف index.htm لا جديد فيه إلا أمر
، وهو كيفية تحديد الفئة في html، فالمعرفات نحددها باستخدام id، والفئات نحددها باستخدام class، طبعاً أضفت بعض الفقرات وأضفت روابط في معرف topnav لاحظ كيف استخدمات أوامر ul وli، وغير في ملف css الأمر الخاص بعرضها display من inline إلى list-item وانظر ماذا سيحدث.
هذا كل شيء
أرجو أن يكون الشرح جيداً ومفهوماً.
منقول بتصرف من سوالف نت, وسردال الى مجمع مطورى المواقع, الى منتديات الدعم العربى
تحياتى
