أرجو من كل مهتم بهذه الدروس أن يقوم أولاً بتنزيل الملف المرفق مع هذا الدرس والذي يحوي هذه الملفات:
1) layout1.gif - صورة مصغرة لما يجب أن تكون عليه النتيجة النهائية للدرس.
2) index.htm - ملف html والذي سيعرض الصفحة التي صممناها.
3) layout.css - ملف css والذي سنضع فيه تفاصيل التصميم.
التصميم هذا قمت بعمله خلال دقيقتين أو أقل، وهو بدون أية جداول، ولو افترضت أنني استخدمت جداولاً لعمل هذا التصميم، لاحتجت إلى جدولين، فيهما 6 أعمدة وصفوف، ثم سأحتاج إلى عمل جداول داخل هذان الجدولان لوضع المحتويات حيث أريد، CSS تقوم بهذه المهمة بشكل أسهل، ففي CSS تقوم بإنشاء صناديق (إن صح التعبير) تحدد أنت حجمها طولاً وعرضاً، وتحدد أين يجب أن تظهر في الصفحة، وتستطيع أن تحدد لونها ولون الإطار، ونوع الخط المستخدم في محتوياتها، وكل هذا في ملف واحد، تطبقه على جميع صفحات الموقع.
والآن لننظر إلى ملف layout.css.
في السطر الأول، حددنا الجزء المسمى body، وفي أوامر html هو المكان الأساسي للصفحة، أو هو الصفحة البيضاء التي تظهر لك في المتصفح، ثم فتحنا قوساً معقوفاً وفي داخل القوس هناك أولاً خاصية margin وهي تعني المساحة الفارغة بين جزء body والمتصفح، وبما أننا لا نريد أي مساحة فارغة فقد حددنا قيمة 0px للخاصية وبعد ذلك وضعنا فاصلة منقوطة وهذه الفاصلة ضرورية ويجب وضعها بعد كل قيمة، ثم هناك خاصية direction والتي تعني اتجاه الصفحة، وبما أننا عرب ومواقعنا عربية، فيجب أن يكون الاتجاه من اليمين إلى اليسار أي rtl (هذا مختصر لجملة right to left)، ثم بعد ذلك وضعنا أيضاً فاصلة منقوطة ثم أغلقنا القوس، وهكذا حددنا الخصائص التي نريد للجزء body.كود:body { margin: 0px; direction: rtl; }
تتكون أوامر CSS من ثلاث أجزاء:
selector وهو الجزء الذي تريد تطبيق الخصائص عليه، فيمكن أن تختار أي وسوم للغة HTML، مثل body لجسم الصفحة، أو p للفقرات أو a للروابط، ثم تضع الخصائص (property) التي تريد التحكم بها، ولكل خاصية هناك قيمة (value)، هذه هي أوامر CSS وهي كما ترون بسيطة سهلة.كود:selector {property: value;}
لنعد إلى ملفنا، ستلاحظ أن الملف يحوي على أمر جديد وهو علامة # وبعدها كلمة topbar وبالتأكيد ليس هناك أمر html بهذا الاسم، فما هو هذا الأمر؟ حسناً علامة # تعني أننا سنحدد معرفاً والمعرفات تستطيع أن تسميها كما تشاء، فقمت بتسميته topbar، وفيه عدة خصائص جديدة تحتاج إلى شرح بسيط:
top: وهي تعني المسافة الفاصلة ما بين رأس الصفحة والمعرف الذي أسميناه هنا topbar، وقد حددنا هذه القيمة هنا بصفر بكسل 0px ويعني ذلك أن topbar سيكون ملاصقاً تماماً لرأس الصفحة.
right: تشبه top تماماً مع فارق أنها تحدد المسافة الفاصلة بين يمين الصفحة والمعرف.
width: عرض المعرف وقد حددناه هنا بالقيمة 100% أي أن المعرف سيكون بعرض الصفحة كاملة.
height: ارتفاع المعرف وقد حددنا ارتفاع المعرف topbar بخمسين بكسل 50px.
backgorund-color: هذه سهلة! خاصية تحديد لون المعرف، وقد حددناه بلون أزرق #4682B4.
position: هذه شرحها صعب قليلاً، وهي تعني أن المساحة الذي أنشأناه topbar سيكون موقعهت بالضبط محدد بمسافة من أعلى ويمين الصفحة، ولذلك حددنا لهت القيمة absolute والتي تعني أن topbar ستكون في مكانها المحدد والذي لن يتأثر بوجود أي عناصر أخرى قد تتداخل معه (تستطيع أن تضع عدة مساحات فوق بعضها البعض وتحدد لكل مساحة موقعها المحدد) أعلم أن هذه صعبة الشرح علي لكن فهمها يجب أن يكون بالممارسة العمليةوربما أنا لا أعرف كيف أشرحها.
حسناً، هذه مساحة أو صندوق topbar قد تم تعريف، وإذا رأيت في الصورة الموجودة في الملف المضغوط ستجد أن هناك مساحة زرقاء أعلى الصفحة، هذه هي مساحة topbar، وفي ملف css هناك معرف topnav والذي يقع أسفل المساحة topbar وفيه عدة أوامر سبق أن شرحناها، لكن هناك أمر جديد وهو border-bottom، وهو يعني أن مساحة topnav لها إطار سفلي فقط، حددنا له عرض واحد بكسل 1px، وشكله solid أي أنه سيظهر على شكل خط متواصل، ولو وضعنا مثلاً القيمة dotted لوجدت أن الإطار السفلي سيظهر على شكل نقط، ثم حددنا له لوناً رمادياً #DCDCDC
ثم بعد ذلك قمنا بإنشاء معرف ثالث وأسميناه sidenav، وهو الجزء الأيمن وحددنا له لوناً رمادياً وإطاراً أيسراً وآخر سفلي، وهكذا نكون قد انتهينا من ملف layout.css، نذهب الآن لملف index.htm، وهو بسيط جداً لا شيء جديد فيه، الأمر link شرحناه في الدرس السابق، والآن الجديد هو ما يقع بين وسمي body:
هنا حددنا المساحات الثلاث التي نريدها، topbar المساحة الزرقاء والتي سنضع فيها شعاراً للموقع في درس لاحق، ثم topnav وهو المساحة التي سنضع فيها روابط الموقع الرئيسية، ثم sidenav والذي سنضع فيه روابط فرعية، لاحظ أن المعرف id لا يجب أن تستخدمه إلا مرة واحدة فقط، لا يمكن أن تستخدم معرفاً في جزئين من الصفحة، المعرف يجب أن يكون متميزاً ويستخدم مرة واحدة فقط، ولذلك أنا شخصياً أستخدمه للأجزاء الرئيسية التي تحدد شكل الموقع، ثم استخدم الفئات في باقي أجزاء الموقع (سنشرح الفئات في درس لاحق).كود:<div id="topbar"></div> <div id="topnav"></div> <div id="sidenav"></div>
هكذا نكون قد انتهينا من درسنا هذا الذي في اعتقادي كان كثيفاً لكنه غير صعب، وأنا أعتذر عن أي قصور في الشرح، لأنني أشعر بأنني لم أشرح الدرس بشكل جيد، أرجو ألا تخجلوا من طرح أية أسئلة وإن كانت بسيطة وصغيرة، الأسئلة ستفتح للجميع أبواباً مغلقة، صعب عليهم فهمها.
!!
