حدد File > New.
تاريخ آخر تحديث
25/04/2024
تعرف على البنية الأساسية لتخطيط CSS وكيفية تصميم الصفحات والمحتوى باستخدام CSS في Dreamweaver.
حول تخطيط صفحة CSS
تستخدم تخطيطات صفحات CSS تنسيق أوراق الأنماط المتتالية، بدلاً من جداول أو إطارات HTML التقليدية، لتنظيم المحتوى بصفحات الويب. تعد علامة div الكتلة الإنشائية الأساسية لتخطيط CSS، وهي عبارة عن علامة HTML تعمل في معظم الحالات كحاوية للنصوص، والصور، وعناصر الصفحة الأخرى. عند إنشاء تخطيط لـ CSS، يمكنك إدراج علامات div بالصفحة، وإضافة محتوى إليها، ووضعها في أماكن مختلفة. بخلاف خلايا الجداول، التي يقتصر وجودها على أماكن معينة في صفوف وأعمدة الجداول، قد تظهر علامات div في أي مكان بصفحة الويب. يمكنك تعيين مواضع علامات div على نحو مطلق (من خلال تحديد إحداثيات x وy)، أو على نحو نسبي (من خلال تحديد موقعها بالنسبة إلى موقعها الحالي). يمكنك كذلك تعيين مواضع علامات div عبر تحديد التعويم، والمساحات المتروكة، والهوامش، وهو الأسلوب المفضّل طبقًا لمعايير الويب الحالية.
حول بنية تخطيط صفحة CSS
قبل المتابعة مع هذا القسم، يجب أن تكون على دراية بمفاهيم CSS الأساسية.
وحدة البناء الأساسية لتخطيط CSS هي علامة div— علامة HTML تعمل في معظم الحالات كحاوية للنص والصور وعناصر الصفحة الأخرى.يوضح المثال التالي صفحة HTML تحتوي على ثلاث علامات div منفصلة: علامة "حاوية" واحدة كبيرة، وعلامتان أخريان—علامة الشريط الجانبي وعلامة المحتوى الرئيسي—داخل علامة الحاوية.
A. علامة div حاوية B. علامة div شريط جانبي C. علامة div محتوى أساسي
فيما يلي التعليمات البرمجية لجميع علامات div الثلاثة في HTML:
<!--علامة div الحاوية-->
<div id="container">
<!--علامة div الشريط الجانبي-->
<div id="sidebar">
<h3>محتوى الشريط الجانبي</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--علامة div المحتوى الرئيسي-->
<div id="mainContent">
<h1> المحتوى الرئيسي </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>
<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 بكسل، وخلفية بيضاء، وبدون هامش (من الجانب الأيسر للصفحة)، وحدود صلبة سوداء بسُمك بكسل واحد، ونص محاذاة إلى اليسار. نتائج تطبيق القاعدة على علامة 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 الخاص بالشريط الجانبي بـ float: left—وهي خاصية تدفع عنصر 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 الخاص بـ mainContent هي كما يلي:
تظهر التعليمات البرمجية الكاملة بالشكل التالي:
A. مساحة متروكة من الجانب الأيسر بمقدار 20 بكسل B. مساحة متروكة من الجانب الأيمن بمقدار 20 بكسل C. مساحة متروكة من أسفل بمقدار 20 بكسل
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>مستند بدون عنوان</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>
<!--علامة div للحاوية-->
<div id="container">
<!--علامة div للشريط الجانبي-->
<div id="sidebar">
<h3>محتوى الشريط الجانبي</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--علامة div للمحتوى الرئيسي-->
<div id="mainContent">
<h1> المحتوى الرئيسي </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 </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
في مربع حوار المستند الجديد، حدد فئة الصفحة الفارغة. (يعد هذا التحديد الافتراضي.)
بالنسبة لـ Page Type، حدد نوع الصفحة التي تريد إنشاءها.
ملاحظة
يجب تحديد نوع صفحة HTML للتخطيط. على سبيل المثال، يمكنك اختيار HTML أو ColdFusion® أو PHP، وما إلى ذلك. لا يمكنك إنشاء صفحة ActionScript™ أو CSS أو عنصر مكتبة أو JavaScript أو XML أو XSLT أو مكون ColdFusion بتخطيط CSS. أنواع الصفحات في فئة أخرى من مربع حوار المستند الجديد محظورة أيضًا من تضمين تخطيطات صفحات CSS.
بالنسبة لـ Layout، حدد تخطيط CSS الذي تريد استخدامه. يمكنك الاختيار من بين 16 تخطيطًا مختلفًا. تعرض نافذة المعاينة التخطيط وتقدم وصفًا مختصرًا للتخطيط المحدد.
توفر تخطيطات 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 in المنبثقة، أضف الملف الخارجي إلى مربع نص Attach CSS file بالنقر على أيقونة Add Style Sheet، وأكمل مربع حوار Attach External Style Sheet، وانقر على OK.عند الانتهاء، انقر على Create في مربع حوار New Document.
ملاحظة
عند تحديد خيار Link to Existing File، يجب أن يحتوي الملف الذي تحدده بالفعل على قواعد ملف CSS بداخله.
عندما تضع CSS الخاص بالتخطيط في ملف جديد أو تربط بملف موجود، يربط Dreamweaver الملف تلقائيًا بصفحة HTML التي تقوم بإنشائها.
ملاحظة
تعليقات Internet Explorer الشرطية (CCs)، التي تساعد في حل مشاكل العرض في IE، تبقى مضمنة في رأس مستند تخطيط CSS الجديد، حتى لو حددت New External File أو Existing External File كموقع لـ CSS الخاص بالتخطيط.
(اختياري) يمكنك أيضًا ربط أوراق أنماط CSS بصفحتك الجديدة (غير مرتبطة بتخطيط CSS) عند إنشاء الصفحة.للقيام بذلك، انقر على أيقونة Attach Style Sheet أعلى جزء Attach CSS file وحدد ورقة أنماط CSS.
للحصول على شرح مفصل لهذه العملية، راجع مقال David Powers، إرفاق ورقة أنماط تلقائياً بالمستندات الجديدة.
إضافة تخطيطات 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 بكسل
وارتفاع 193 بكسل.
ملاحظة
أعط صورة المعاينة نفس اسم ملف HTML الخاص بك حتى تتمكن من تتبعها بسهولة. على سبيل المثال، إذا كان ملف HTML يسمى myCustomLayout.htm، فسمّ صورة المعاينة myCustomLayout.png.
(اختياري) أنشئ ملف ملاحظات لتخطيطك المخصص عن طريق فتح مجلد Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes، ونسخ ولصق أي من ملفات الملاحظات الموجودة في نفس المجلد، وإعادة تسمية النسخة لتخطيطك المخصص.على سبيل المثال، يمكنك نسخ ملف oneColElsCtr.htm.mno، وإعادة تسميته إلى myCustomLayout.htm.mno.
(اختياري) بعد إنشاء ملف الملاحظات للتخطيط المخصص الخاص بك، يمكنك فتح الملف وتحديد اسم التخطيط ووصفه وصورة المعاينة.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
