دليل المستخدم إلغاء

حول استخدام CSS لتخطيط صفحاتك

بحث

تاريخ آخر تحديث 6 مايو 2021

تعرف على البنية الأساسية لتخطيط CSS، وتعرف على كيفية تصميم الصفحات، والمحتوى باستخدام CSS في Dreamweaver.

حول تخطيط صفحة CSS

تستخدم تخطيطات صفحات CSS تنسيق أوراق الأنماط المتتالية، بدلاً من جداول أو إطارات HTML التقليدية، لتنظيم المحتوى بصفحات الويب. تعد علامة div الكتلة الإنشائية الأساسية لتخطيط CSS، وهي عبارة عن علامة HTML تعمل في معظم الحالات كحاوية للنصوص، والصور، وعناصر الصفحة الأخرى. عند إنشاء تخطيط لـ CSS، يمكنك إدراج علامات div بالصفحة، وإضافة محتوى إليها، ووضعها في أماكن مختلفة. بخلاف خلايا الجداول، التي يقتصر وجودها على أماكن معينة في صفوف وأعمدة الجداول، قد تظهر علامات div في أي مكان بصفحة الويب. يمكنك تعيين مواضع علامات div على نحو مطلق (من خلال تحديد إحداثيات x وy)، أو على نحو نسبي (من خلال تحديد موقعها بالنسبة إلى موقعها الحالي). يمكنك كذلك تعيين مواضع علامات div عبر تحديد التعويم، والمساحات المتروكة، والهوامش، وهو الأسلوب المفضّل طبقًا لمعايير الويب الحالية.

حول بنية تخطيط صفحة CSS

قبل متابعة قراءة هذا القسم، يجب أن تتعرف على مفاهيم CSS الأساسية.

وتعد علامة div الكتلة الإنشائية الأساسية لتخطيط CSS، وهي عبارة عن علامة HTML تعمل في معظم الحالات كحاوية للنصوص، والصور، وعناصر الصفحة الأخرى. يوضح المثال التالي صفحة HTML تحتوي على ثلاث علامات div منفصلة: علامة "container" كبيرة، وعلامتان أخريتان - علامة شريط جانبي، وعلامة محتوى أساسي - ضمن علامة الحاوية.

A. علامة div حاوية B. علامة div شريط جانبي C. علامة div محتوى أساسي

فيما يلي التعليمات البرمجية لجميع علامات div الثلاثة في HTML:

<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

في المثال الموضح أعلاه، لا يوجد "نمط" مرفق بأي من علامات div. دون تعريف قواعد CSS، تندرج كل علامة من علامات div ومحتوياتها ضمن موقع افتراضي بالصفحة. ولكن، إذا كانت كل علامة من علامات div تتسم بمعرّف فريد (على النحو الوارد في المثال أعلاه)، يمكنك استخدام المعرّفات لإنشاء قواعد CSS تقوم، في حالة تطبيقها، بتغيير النمط ومواضع علامات div.

تقوم قاعدة CSS التالية، التي قد توجد بعنوان المستند أو في ملف CSS خارجي، بإنشاء قواعد أنماط لعلامة div الأولى أو "الحاوية" بالصفحة:

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

توفر القاعدة #container نمطًا لعلامة div الحاوية يتميز بعرض 780 بكسل، وخلفية بيضاء، بلا هامش (من الجانب الأيسر للصفحة)، وحد أسود خالص بعرض 1 بكسل، ونص محاذاته إلى اليسار. تكون نتائج تطبيق القاعدة على علامة div الحاوية كما يلي:

A. نص محاذاته إلى اليسار B. خلفية بيضاء C. حد أسود خالص بعرض 1 بكسل

تقوم قاعدة CSS التالية بإنشاء قواعد أنماط لعلامة div الخاصة بالشريط الجانبي:

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

توفر القاعدة #sidebar نمطًا لعلامة div الخاصة بالشريط الجانبي يتميز بعرض 200 بكسل، وخلفية رمادية، ومساحة متروكة من أعلى وأسفل بمقدار 15 بكسل، ومساحة متروكة من اليمين بمقدار 10 بكسل، ومساحة متروكة من اليسار بمقدار 20 بكسل. (الترتيب الافتراضي للمساحة المتروكة هو من أعلى، ثم من اليمين، ثم من أسفل، ثم من اليسار.) علاوة على ذلك، تقوم القاعدة بوضع علامة div الخاصة بالشريط الجانبي مع تعويم: إلى اليسار، وهي خاصية تدفع علامة div الخاصة بالشريط الجانبي إلى جهة اليسار من علامة div الخاصة بالحاوية. تكون نتائج تطبيق القاعدة على علامة div الخاصة بالشريط الجانبي كما يلي:

علامة div الخاصة بالشريط الجانبي، تعويم إلى اليسار

A. عرض 200 بكسل B. المساحة المتروكة من أعلى وأسفل، 15 بكسل

وأخيرًا، تقوم قاعدة CSS لعلامة div الخاصة بالحاوية الأساسية بإنهاء التخطيط:

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

توفر القاعدة #mainContent نمطًا لعلامة div الخاصة بالحاوية الأساسية يتميز بهامش أيسر بعرض 250 بكسل، بمعنى أنها تقوم بإدراج مسافة بمقدار 250 بكسل بين الجانب الأيسر من علامة div الخاصة بالحاوية، والجانب الأيسر من علامة div الخاصة بالحاوية الأساسية. علاوة على ذلك، توفر القاعدة تباعدًا بمقدار 20 بكسل بالجوانب اليمنى، والسفلى، واليسرى لعلامة div الخاصة بالحاوية الأساسية. تكون نتائج تطبيق القاعدة على علامة div الخاصة بالمحتوى الأساسي كما يلي:

تظهر التعليمات البرمجية الكاملة بالشكل التالي:

علامة div الخاصة بالحاوية الأساسية، هامش أيسر بمقدار 250 بكسل

A. مساحة متروكة من الجانب الأيسر بمقدار 20 بكسل B. مساحة متروكة من الجانب الأيمن بمقدار 20 بكسل C. مساحة متروكة من أسفل بمقدار 20 بكسل

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div id="container"> 
    <!--sidebar div tag--> 
    <div id="sidebar"> 
    <h3>Sidebar Content</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div id="mainContent"> 
    <h1> Main Content </h1> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h2>H2 level heading </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

ملاحظة:

تعد التعليمات البرمجية الواردة في المثال أعلاه إصدارًا مبسطًا من التعليمات البرمجية التي تقوم بإنشاء تخطيط الشريط الجانبي الأيسر الثابت المكون من عمودين عند إنشاء مستند جديد باستخدام التخطيطات المصممة مسبقًا المرفقة ببرنامج Dreamweaver.

إنشاء صفحة باستخدام تخطيط CSS

عند إنشاء صفحة جديدة في Dreamweaver، يمكنك إنشاء صفحة تحتوي بالفعل على تخطيط CSS. برنامج Dreamweaver مزود بعدد 16 تخطيط CSS مختلف يمكنك الاختيار من بينها. علاوة على ذلك، يمكنك إنشاء تخطيطات CSS الخاصة بك وإضافتها إلى مجلد التكوين بحيث تظهر كخيارات تخطيطات في مربع الحوار New Document.

إنشاء صفحة باستخدام تخطيط CSS

حدد File > New.
في مربع الحوار New Document، حدد الفئة Blank Page. (يعد هذا التحديد الافتراضي.)
بالنسبة لـ Page Type، حدد نوع الصفحة التي تريد إنشاءها.

ملاحظة:

يجب تحديد نوع صفحة HTML للتخطيط. على سبيل المثال، يمكنك تحديد HTML، وColdFusion‎®، وPHP، وما إلى ذلك. يتعذر إنشاء صفحة ActionScript‎™، أو CSS، أو Library Item، أو JavaScript، أو XML، أو XSLT، أو ColdFusion Component باستخدام تخطيط CSS. لا يمكن كذلك تضمين تخطيطات صفحات CSS في أنواع الصفحات الموجودة بالفئة Other بمربع الحوار New Document.
بالنسبة لـ Layout، حدد تخطيط CSS الذي تريد استخدامه. يمكنك الاختيار من بين 16 تخطيطًا مختلفًا. تعرض النافذة Preview التخطيط وتوفر وصفًا موجزًا للتخطيط المحدد.

توفر تخطيطات CSS المصممة مسبقًا أنواع الأعمدة التالية:

Fixed

يتم تحديد عرض العمود بوحدات البكسل. لا يتم تغيير حجم العمود استنادًا إلى حجم المستعرض أو الإعدادات النصية لزائر الموقع.

Liquid

يتم تحديد عرض العمود كنسبة مئوية من عرض المستعرض الخاص بزائر الموقع. تتم مواءمة التصميم في حالة قيام زائر الموقع بتوسيع المستعرض أو تضييقه، ولكن لا يتم تغييره استنادًا إلى الإعدادات النصية لزائر الموقع.
حدد نوع مستند من القائمة المنبثقة DocType.
حدد موقعًا لـ CSS الخاصة بالتخطيط من Layout CSS في القائمة المنبثقة.

Add To Head

لإضافة CSS الخاصة بالتخطيط إلى عنوان الصفحة التي تقوم بإنشائها.

Create New File

لإضافة CSS الخاصة بالتخطيط إلى ورقة أنماط CSS خارجية جديدة وإرفاق ورقة الأنماط الجديدة بالصفحة التي تقوم بإنشائها.

Link To Existing File

يتيح لك تحديد ملف CSS موجود يحتوي بالفعل على قواعد CSS اللازمة للتخطيط. يفيد هذا الخيار لا سيما عند الرغبة في استخدام تخطيط CSS نفسه (توجد قواعد CSS للتخطيط في ملف واحد) عبر عدة مستندات.
قم بأحد الإجراءات التالية:
- إذا كنت قد قمت بتحديد Add to Head من Layout CSS في القائمة المنبثقة (الخيار الافتراضي)، انقر فوق Create.
- إذا كنت قد قمت بتحديد Create New File من القائمة المنبثقة Layout CSS، انقر فوق Create، ثم حدد اسمًا للملف الخارجي الجديد في مربع الحوار Save Style Sheet File As.
- إذا كنت قد قمت بتحديد Link to Existing File من Layout CSS في القائمة المنبثقة، قم بإضافة الملف الخارجي إلى مربع النص Attach CSS file عبر النقر فوق الرمز Add Style Sheet، وإكمال مربع الحوار Attach External Style Sheet، ثم النقر فوق OK. عند الانتهاء، انقر فوق مربع الحوار Create in the New Document.
ملاحظة:

عند تحديد الخيار Link to Existing File، يجب أن تكون القواعد الخاصة بملف CSS موجودة بالفعل بالملف الذي تقوم بتحديده.

عند إدراج CSS الخاصة بالتخطيط في ملف جديد أو ارتباط لملف موجود، يقوم Dreamweaver تلقائيًا بربط الملف بصفحة HTML التي تقوم بإنشائها.

ملاحظة:

تظل التعليقات الشرطية لمستعرض Internet Explorer، والتي تساعد على حل مشكلات عرض IE، مضمنة بعنوان مستند تخطيط CSS الجديد، حتى في حالة تحديد New External File أو Existing External File بوصفه موقع CSS للتخطيط الخاص بك.
(اختياري) يمكنك أيضًا إرفاق أوراق أنماط CSS بصفحتك الجديدة (غير المتعلقة بتخطيط CSS) عند إنشاء الصفحة. لإجراء ذلك، انقر فوق الرمز Attach Style Sheet الموجود بأعلى الجزء Attach CSS file، ثم حدد ورقة أنماط CSS.

للاطلاع على شرح تفصيلي لهذه العملية، اقرأ مقالة ديفيد باورز، Automatically attaching a style sheet to new documents.

إضافة تخطيطات CSS مخصصة إلى قائمة الاختيارات

يمكنك إنشاء صفحة HTML تحتوي على تخطيط CSS الذي تريد إضافته إلى قائمة الاختيارات في مربع الحوار New Document. يجب وجود CSS الخاصة بالتخطيط بعنوان صفحة HTML.

ملاحظة:

لجعل تخطيط CSS المخصص الخاص بك متناسقًا مع التخطيطات الأخرى المرفقة ببرنامج Dreamweaver، يجب حفظ ملف HTML بالامتداد .htm.
قم بإضافة صفحة HTML إلى المجلد Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.
(اختياري) قم بإضافة صورة معاينة للتخطيط (على سبيل المثال ملف .gif أو .png) إلى المجلد Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. الصور الافتراضية المرفقة ببرنامج Dreamweaver هي عبارة عن ملفات PNG بعرض 227 بكسل x ارتفاع 193 بكسل.

ملاحظة:

امنح صورة المعاينة نفس اسم الملف الخاص بملف HTML لكي يمكنك تعقبها بسهولة. على سبيل المثال، إذا كان ملف HTML يحمل الاسم myCustomLayout.htm، قم بتسمية صورة المعاينة myCustomLayout.png.
(اختياري) يمكنك إنشاء ملف ملاحظات للتخطيط المخصص لديك عبر فتح المجلد Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes، ونسخ أي من ملفات الملاحظات الموجودة في نفس المجلد ولصقها، وإعادة تسمية النسخة للتخطيط المخصص لديك. على سبيل المثال، يمكنك نسخ الملف oneColElsCtr.htm.mno، وإعادة تسميته myCustomLayout.htm.mno.
(اختياري) بعد قيامك بإنشاء ملف ملاحظات للتخطيط المخصص لديك، يمكنك فتح الملف وتحديد اسم التخطيط، ووصفه، وصورة المعاينة له.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟

حول استخدام CSS لتخطيط صفحاتك

حول تخطيط صفحة CSS

حول بنية تخطيط صفحة CSS

إنشاء صفحة باستخدام تخطيط CSS

إنشاء صفحة باستخدام تخطيط CSS

إضافة تخطيطات CSS مخصصة إلى قائمة الاختيارات

المزيد مثل هذا

احصل على مساعدة بشكل أسرع وأسهل

طرح سؤال على المجتمع

اتصل بنا