إضافة محتوى ديناميكي إلى الصفحات

تاريخ آخر تحديث 25 أبريل 2024

ملاحظة

تم تبسيط واجهة المستخدم في Dreamweaver والإصدارات الأحدث. ونتيجة لذلك، قد لا تجد بعض الخيارات الموضحة في هذه المقالة في Dreamweaver والإصدارات اللاحقة. للاطلاع على المزيد من المعلومات، راجع هذه المقالة.

نبذة عن إضافة المحتوى الديناميكي

بعد تحديد مصدر واحد أو أكثر للمحتوى الديناميكي، يمكنك استخدام المصادر لإضافة محتوى ديناميكي على الصفحة.يمكن أن تتضمن مصادر المحتوى عمود في مجموعة سجلات أو قيمة مرسلة بواسطة نموذج HTML أو القيمة المتضمنة في كائن خادم أو بيانات أخرى.

في Dreamweaver، يمكنك وضع المحتوى الديناميكي تقريبًا في أي مكان في صفحة الويب أو في كود المصدر HTML الخاص بها.يمكنك وضع المحتوى الديناميكي في نقطة الإدراج أو استبدال سلسلة نصية أو إدراجه كخاصية HTML.على سبيل المثال، يمكن للمحتوى الديناميكي تحديد خاصية src للصورة أو خاصية value لحقل النموذج.

يمكنك إضافة محتوى ديناميكي إلى صفحة عن طريق تحديد مصدر محتوى في لوحة Bindings.يدرج Dreamweaver نص برمجي من جانب الخادم في كود الصفحة يطلب من الخادم نقل البيانات من مصدر المحتوى إلى كود HTML الخاص بالصفحة عندما يطلب المتصفح الصفحة.

غالبًا ما تكون هناك أكثر من طريقة واحدة لجعل عنصر صفحة معين ديناميكي.على سبيل المثال، لجعل صورة ديناميكية يمكنك استخدام لوحة Bindings أو لوحة Property inspector أو أمر Image في قائمة Insert.

افتراضيًا، يمكن أن تعرض صفحة HTML سجلاً واحدًا في المرة. لعرض السجلات الأخرى في مجموعة السجلات، يمكنك إضافة رابط للتنقل عبر السجلات واحدًا تلو الآخر أو يمكنك إنشاء منطقة متكررة لعرض أكثر من سجل واحد على صفحة واحدة.

معلومات عن النص الديناميكي

يتبنى النص الديناميكي أي تنسيق نص مطبق على النص الموجود أو نقطة الإدراج.على سبيل المثال، إذا كان نمط Cascading Style Sheet (CSS) يؤثر على النص المحدد، فإن المحتوى الديناميكي الذي يحل محله يتأثر أيضًا بالنمط.يمكنك إضافة أو تغيير تنسيق النص للمحتوى الديناميكي باستخدام أي من أدوات تنسيق النص في Dreamweaver.

يمكنك أيضًا تطبيق تنسيق بيانات على نص ديناميكي. على سبيل المثال، إذا كانت بياناتك تتكون من تواريخ، يمكنك تحديد تنسيق تاريخ معين مثل 04/17/00 للولايات المتحدةأو 17/04/00 للزوار الكنديين.

تحويل النص إلى ديناميكي

يمكنك استبدال النص الموجود بنص ديناميكي أو يمكنك وضع نص ديناميكي في نقطة إدراج معينة على الصفحة.

إضافة نص ديناميكي

في طريقة العرض Design، حدد نصًا على الصفحة أو انقر حيث تريد إضافة نص ديناميكي.

في لوحة Bindings (Window > Bindings)، حدد مصدر محتوى من القائمة.إذا حددت مجموعة سجلات، حدد العمود الذي تريده في مجموعة السجلات.

يجب أن يحتوي مصدر المحتوى على نص عادي (نص ASCII). يتضمن النص العادي HTML. إذا لم تظهر مصادر محتوى في القائمة أو إذا كانت مصادر المحتوى المتاحة لا تلبي احتياجاتك، انقر فوق زر Plus (+) لتحديد مصدر محتوى جديد.

(اختياري) حدد تنسيق بيانات للنص.

انقر فوق Insert، أو اسحب مصدر المحتوى إلى الصفحة.

يظهر عنصر نائب للمحتوى الديناميكي. (إذا حددت نصًا على الصفحة، يحل العنصر النائب محل تحديد النص.)يستخدم العنصر النائب لمحتوى مجموعة السجلات بناء الجملة {RecordsetName.ColumnName}، حيث Recordset هو اسم مجموعة السجلات وColumnName هو اسم العمود الذي اخترته من مجموعة السجلات.

أحيانًا، يؤدي طول العناصر النائبة للنص الديناميكي إلى تشويه تخطيط الصفحة في نافذة Document.يمكنك حل المشكلة باستخدام أقواس متعرجة فارغة كعناصر نائبة، كما هو موضح في الموضوع التالي.

عرض عناصر نائبة للنص الديناميكي

حدد تحرير > التفضيلات > العناصر غير المرئية (Windows) أو Dreamweaver > التفضيلات > العناصر غير المرئية (Macintosh).

في قائمة إظهار النص الديناميكي كـ المنبثقة، حدد { }، وانقر فوق موافق.

تحويل الصور إلى صور ديناميكية

يمكنك جعل الصور في صفحتك ديناميكية. على سبيل المثال، افترض أنك تصمم صفحة لعرض العناصر المعروضة للبيع في مزاد خيري.ستتضمن كل صفحة نصًا وصفيًا وصورة لعنصر واحد.سيظل التخطيط العام للصفحة كما هو لكل عنصر، ولكن يمكن أن تتغير الصورة (والنص الوصفي).

مع فتح الصفحة في عرض التصميم (عرض > التصميم)، ضع نقطة الإدراج حيث تريد ظهور الصورة على الصفحة.

حدد Insert > Image.

يظهر مربع الحوار Select Image Source.

انقر فوق خيار مصادر البيانات (Windows) أو زر مصدر البيانات (Macintosh).

تظهر قائمة بمصادر المحتوى.

حدد مصدر محتوى من القائمة، وانقر فوق OK.

يجب أن يكون مصدر المحتوى مجموعة سجلات تحتوي على المسارات إلى ملفات الصور الخاصة بك.حسب بنية الملفات لموقعك، يمكن أن تكون المسارات مطلقة أو نسبية إلى المستند أو نسبية إلى الجذر.

ملاحظة

لا يدعم Dreamweaver حاليًا الصور الثنائية المخزنة في قاعدة بيانات.

إذا لم تظهر أي مجموعات سجلات في القائمة، أو إذا كانت مجموعات السجلات المتاحة لا تلبي احتياجاتك، حدد مجموعة سجلات جديدة.

جعل سمات HTML ديناميكية

يمكنك تغيير مظهر الصفحة ديناميكيًا من خلال ربط سمات HTML بالبيانات.على سبيل المثال، يمكنك تغيير الصورة الخلفية للجدول من خلال ربط سمة الخلفية الخاصة بالجدول بحقل في مجموعة سجلات.

يمكنك ربط سمات HTML باستخدام لوحة الارتباطات أو باستخدام مفتش الخصائص.

اجعل سمات HTML ديناميكية باستخدام لوحة الارتباطات

افتح لوحة Bindings عن طريق اختيار Window > Bindings.

تأكد من أن لوحة الربط تعرض مصدر البيانات الذي تريد استخدامه.

يجب أن يحتوي مصدر المحتوى على بيانات مناسبة لخاصية HTML التي تريد ربطها.إذا لم تظهر مصادر محتوى في القائمة، أو إذا كانت مصادر المحتوى المتاحة لا تلبي احتياجاتك، انقر فوق زر علامة الجمع (+) لتحديد مصدر بيانات جديد.

في طريقة العرض Design، حدد كائن HTML.

على سبيل المثال، لتحديد جدول HTML، انقر داخل الجدول وانقر فوق العلامة <table> في محدد العلامات أسفل يسار نافذة المستند.

في لوحة الارتباطات، حدد مصدر محتوى من قائمتك.

في مربع الربط إلى، حدد سمة HTML من القائمة المنبثقة.

انقر فوق Bind.

في المرة التالية التي تعمل فيها الصفحة على خادم التطبيق، سيتم تعيين قيمة مصدر البيانات إلى سمة HTML.

اجعل سمات HTML ديناميكية باستخدام Property inspector

في عرض التصميم، حدد كائن HTML وافتح فاحص الخصائص (نافذة > الخصائص).

على سبيل المثال، لتحديد جدول HTML، انقر داخل الجدول وانقر على علامة <table> في محدد العلامات أسفل يسار نافذة المستند.

كيفية ربط مصدر المحتوى الديناميكي بخاصية HTML يعتمد على مكان وجودها.

إذا كانت الخاصية التي تريد ربطها تحتوي على رمز مجلد بجانبها في Property inspector، انقر على رمز المجلد لفتح مربع حوار تحديد الملف؛ ثم انقر على خيار Data Sources لعرض قائمة بمصادر البيانات.
إذا كانت الخاصية التي تريد ربطها لا تحتوي على رمز مجلد بجانبها، انقر على علامة تبويب List (السفلى من العلامتين) على الجانب الأيسر من المفتش.
يظهر عرض القائمة في Property inspector.
إذا لم تكن الخاصية التي تريد ربطها مدرجة في عرض القائمة، انقر على زر Plus (+)؛ ثم أدخل اسم الخاصية أو انقر على زر السهم الصغير وحدد الخاصية من القائمة المنبثقة.

لجعل قيمة الخاصية ديناميكية، انقر على الخاصية؛ ثم انقر على رمز البرق أو رمز المجلد في نهاية صف الخاصية.

إذا نقرت على رمز البرق، تظهر قائمة بمصادر البيانات.

إذا نقرت على رمز المجلد، يظهر مربع حوار تحديد الملف. حدد الخيار Data Sources لعرض قائمة بمصادر المحتوى.

حدد مصدر محتوى من قائمة مصادر المحتوى، وانقر على "موافق".

يجب أن يحتوي مصدر المحتوى على بيانات مناسبة لخاصية HTML التي تريد ربطها. إذا لم تظهر مصادر محتوى في القائمة، أو إذا كانت مصادر المحتوى المتاحة لا تلبي احتياجاتك، حدد مصدر محتوى جديد.

في المرة القادمة التي تعمل فيها الصفحة على خادم التطبيق، ستُسند قيمة مصدر البيانات إلى خاصية HTML.

جعل معاملات ActiveX وFlash والكائنات الأخرى ديناميكية

يمكنك جعل معاملات تطبيقات Java والمكونات الإضافية ديناميكية، بالإضافة إلى معاملات كائنات ActiveX وFlash وShockwave وDirector وGenerator.

قبل البدء، تأكد من أن الحقول في مجموعة السجلات تحتوي على بيانات مناسبة لمعاملات الكائن التي تريد ربطها.

في عرض Design، حدد كائناً على الصفحة وافتح Property inspector (Window > Properties).

انقر فوق الزر Parameters.

إذا لم يظهر المعامل الخاص بك في القائمة، انقر على زر Plus (+) وأدخل اسم المعامل في عمود Parameter.

انقر على عمود Value الخاص بالمعامل، ثم انقر على رمز البرق لتحديد قيمة ديناميكية.

تظهر قائمة بمصادر البيانات.

حدد مصدر بيانات من القائمة، وانقر فوق OK.

يجب أن يحتوي مصدر البيانات على بيانات مناسبة لمعامل الكائن الذي تريد ربطه. إذا لم تظهر مصادر بيانات في القائمة، أو إذا كانت مصادر البيانات المتاحة لا تلبي احتياجاتك، حدد مصدر بيانات جديد.

المعرفة

تعلم من خلال مقاطع فيديو تعليمية خطوة بخطوة وإرشادات عملية مباشرة داخل التطبيق.

المجتمع

انضم إلى المناقشات، واعثر على الإجابات، وتعلم من الخبراء، وشارك معرفتك.

الصفحة الرئيسية لـ Adobe

تمكّن من الوصول إلى تطبيقات Creative Cloud وخدماتها المفضلة بالإضافة إلى إدارة الملفات وغيرها المزيد.