في نافذة المستند، ضع نقطة الإدراج حيث تريد أن تظهر علامة div.
تاريخ آخر تحديث
25/09/2023
تعرف على كيفية استخدام علامات div لتوسيط كتل المحتوى، وإنشاء تأثيرات أعمدة، وإنشاء مناطق ألوان مختلفة، والمزيد.
يمكنك إنشاء تخطيطات الصفحات عن طريق إدراج علامات div يدويًا وتطبيق أنماط تموضع CSS عليها.علامة div هي علامة تُعرِّف التقسيمات المنطقية داخل محتوى صفحة ويب.يمكنك استخدام علامات div لتوسيط كتل المحتوى، وإنشاء تأثيرات الأعمدة، وإنشاء مناطق ألوان مختلفة، وأكثر من ذلك بكثير.
إذا لم تكن معتادًا على استخدام علامات div وأوراق الأنماط المتتالية (CSS) لإنشاء صفحات الويب، يمكنك إنشاء تخطيط CSS بناءً على أحد التخطيطات المُصممة مسبقًا التي تأتي مع Dreamweaver. إذا كنت غير مرتاح للعمل مع CSS، ولكنك معتاد على استخدام الجداول، يمكنك أيضًا تجربة استخدام الجداول.
إدراج علامات div
يمكنك استخدام علامات div لإنشاء كتل تخطيط CSS وتحديد مواقعها في مستندك. هذا مفيد إذا كان لديك ورقة أنماط CSS موجودة مع أنماط التموضع المُرفقة بمستندك.يُمكّنك Dreamweaver من إدراج علامة div بسرعة وتطبيق الأنماط الموجودة عليها.
قم بأحد الإجراءات التالية:
حدد Insert > HTML > Div.
في فئة HTML في لوحة الإدراج، انقر على Div.
قم بتعيين أي من الخيارات التالية:
إدراج
يتيح لك تحديد موقع علامة div واسم العلامة إذا لم تكن علامة جديدة.
Class
لعرض نمط الفئة المطبّق حاليًا على العلامة. إذا أرفقت ورقة أنماط، فإن الفئات المُعرَّفة في ورقة الأنماط تلك تظهر في القائمة.استخدم هذه القائمة المنبثقة لتحديد النمط الذي تريد تطبيقه على العلامة.
ID
يتيح لك تغيير الاسم المستخدم لتعريف علامة div. في حالة إرفاق ورقة أنماط، تظهر المعرّفات المعرّفة في ورقة الأنماط هذه بالقائمة. معرفات الكتل الموجودة بالفعل في مستندك غير مُدرجة.
ملاحظة
ينبهك Dreamweaver إذا أدخلت نفس المعرف لعلامة أخرى في مستندك.
New CSS Rule
لفتح مربع الحوار New CSS Rule.
انقر فوق OK.
تظهر علامة div كمربع في المستند مع نص عنصر نائب. عندما تحرك المؤشر فوق حافة المربع، يُبرزه Dreamweaver.
إذا كانت علامة div ذات تعيين مطلق للموضع، فإنها تصبح عنصر AP. (يمكنك تحرير علامات div التي لا تتسم بتعيين مطلق للمواضع.)
تحرير علامات div
بعد إدراج علامة div، يمكنك التحكم بها أو إضافة محتوى إليها.
ملاحظة
علامات Div التي تكون موضوعة بشكل مطلق تصبح عناصر AP.
عند تعيين حدود لعلامات div، أو عند تحديد CSS Layout Outlines، يكون للعلامات حدود مرئية. (يتم تحديد CSS Layout Outlines افتراضيًا في القائمة View > Visual Aids.) عند تحريك المؤشر فوق علامة div، يقوم Dreamweaver بتمييز العلامة. يمكنك تغيير لون التمييز أو تعطيل خيار التمييز.
عند تحديد علامة div، يمكنك عرض قواعد وتحريرها لها في CSS Designer يمكنك كذلك إضافة محتوى إلى علامة div ببساطة عبر وضع نقطة الإدراج داخل علامة div، ثم إضافة المحتوى مثلما تقوم بإضافة محتوى إلى صفحة.
قم بأحد الإجراءات التالية لتحديد علامة div:
- انقر على حدود علامة div.
ملاحظة
ابحث عن التمييز لرؤية الحد.
انقر داخل علامة div، ثم اضغط على Control+A (في نظام التشغيل Windows) أو Command+A (في نظام التشغيل Macintosh) مرتين.
انقر داخل علامة div، ثم حدد علامة div من محدد العلامات بأسفل النافذة Document.
حدد Window > CSS Designer لفتح لوحة CSS Designer إذا لم تكن مفتوحة بالفعل.
القواعد المُطبقة على علامة div تظهر في اللوحة.
قم بإجراء عمليات التحرير بحسب الضرورة.
تغيير لون تمييز علامات div
عندما تحرك المؤشر فوق حافة علامة div في عرض Design، يُبرز Dreamweaver حدود العلامة. يمكنك تمكين أو تعطيل التمييز حسب الضرورة، أو تغيير لون التمييز في مربع حوار Preferences.
حدد Edit > Preferences (في نظام التشغيل Windows) أو Dreamweaver > Preferences (في نظام التشغيل Macintosh).
حدد Highlighting من قائمة الفئات الموجودة على اليسار.
قم بإجراء أي من التغييرين التاليين ثم انقر فوق OK:
لتغيير لون التمييز لعلامات div، انقر فوق مربع اللون Mouse-Over، ثم حدد لون تمييز باستخدام Color Picker (أو أدخل القيمة السداسية العشرية للون التمييز في مربع النص).
لتمكين التمييز الخاص بعلامات div أو تعطيله، حدد خانة الاختيار Show لـ Mouse-Over أو قم بإلغاء تحديدها.
ملاحظة
تؤثر هذه الخيارات على جميع الكائنات، مثل الجداول، التي يبرزها Dreamweaver عند تحريك المؤشر فوقها.
مقاطع تخطيطات CSS
يمكنك عرض كتل تخطيط CSS أثناء العمل في عرض التصميم.كتلة تخطيط CSS هي عنصر صفحة HTML يمكنك وضعه في أي مكان على صفحتك.بشكل أكثر تحديداً، كتلة تخطيط CSS هي إما علامة div بدون display:inline، أو أي عنصر صفحة آخر يتضمن إعلانات display:block، position:absolute، أو position:relative لـ CSS.فيما يلي بعض الأمثلة على العناصر التي تعتبر كتل تخطيط CSS في Dreamweaver:
علامة div
صورة مع موضع مطلق أو نسبي مُعيّن لها
علامة a مع نمط display:block مُعيّن لها
فقرة مع موضع مطلق أو نسبي مُعيّن لها
ملاحظة
لأغراض العرض المرئي، لا تتضمن كتل تخطيط CSS العناصر المضمَّنة (أي العناصر التي يقع كودها ضمن سطر من النص)، أو عناصر الكتلة البسيطة مثل الفقرات.
يوفر Dreamweaver عدداً من المساعدات البصرية لعرض كتل تخطيط CSS.على سبيل المثال، يمكنك تمكين الخطوط الخارجية والخلفيات ونموذج الصندوق لكتل تخطيط CSS أثناء التصميم.يمكنك أيضاً عرض تلميحات الأدوات التي تعرض خصائص كتلة تخطيط CSS المحددة عند تحريك مؤشر الماوس فوق كتلة التخطيط.
تصف القائمة التالية لمساعدات كتل تخطيط CSS البصرية ما يعرضه Dreamweaver كمرئي لكل منها:
CSS Layout Outlines
لعرض المخططات التفصيلية لجميع كتل تخطيطات CSS بالصفحة.
CSS Layout Backgrounds
يعرض ألوان خلفية مُعيّنة مؤقتاً لكتل تخطيط CSS الفردية، ويخفي أي ألوان خلفية أو صور أخرى تظهر عادة على الصفحة.
كلما مكّنت المساعد البصري لعرض خلفيات كتل تخطيط CSS، يُعيّن Dreamweaver تلقائياً لكل كتلة تخطيط CSS لون خلفية مميز.(يختار Dreamweaver الألوان باستخدام عملية خوارزمية—لا توجد طريقة لك لتعيين الألوان بنفسك.)الألوان المُعيّنة مميزة بصرياً، ومصممة لمساعدتك على التمييز بين كتل تخطيط CSS.
CSS Layout Box Model
يعرض نموذج الصندوق (أي الحشو والهوامش) لكتلة تخطيط CSS المحددة.
عرض مقاطع تخطيطات CSS
تستطيع تمكين الأدوات المساعدة المرئية لمقاطع تخطيطات CSS أو تعطيلها بحسب الضرورة. لعرض جميع كتل تخطيط CSS، حدد View > Design View Options > Visual Aids.
يمكنك تمكين أو تعطيل خلفيات تخطيط CSS ونموذج صندوق تخطيط CSS وخطوط تخطيط CSS الخارجية.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
