تخصيص القوالب

إنشاء قالب

          يمكنك استخدام القوالب لإنشاء وثائق ذات بناء ومظهر مشترك ، القوالب مفيدة إذا كنت تريد التأكد أن كل الصفحات في الموقع تتشارك في الطابع الأساسي .   حالما تطبق قالب مفرد على مجموعة صفحات ، يمكنك تحرير المعلومات على مجموعة الصفحات بتحرير القالب ومن ثم تعيد تطبيقه على تلك الصفحات .   بينما العناصر الفريدة لكـل صفحة [ مثل نص يصف بند للبيع ] يبقى بلا تغيير ، عناصر القالب المشتركة [ مثل عمود التصفح ] سوف تتحدث على كل الصفحات التي تستخدم القالب .

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

     استعراض صفحة المنتج

          إبداء باستعراض صفحة المنتج قرص Scaal المضغوط في المتصفح .

1.  في نافذة الموقع في مجلد الموقع المحلي أنظر الرمز [ أيقونة ] الملف product_cd.html  ؛ وانقر عليه نقراً مزدوجاً لتفتح الملف في Dreamwaver3 .

2.     اضغط المفتاح F12 لاستعراض الصفحة في المتصفح .

3.     اغلق المتصفح عند الانتهاء من مشاهدة الصفحة .

4.     أغلق الملف product_cd.html .

إنشاء القالب

          سوف تنشئ قالب من صفحة القرص المدمج ، وبعدها سوف تستخدم هذا القالب لإنشاء صفحات لمنتجات أخرى .

1.  في صفحة الموقع ، في قائمة الملفات Local Folder ، انقر نقراً مضاعفاً على رمز [ أيقونة ] DW3_product_cd.html ؛ لتفتح الملف .

2.     أختر File ثم Save as Template .

  سيظهر مربع حوار حفظ كقالب

القالب الموجود product_page ؛ كان منشأ ومطبق لكامل صفحات منتجات موقع Scaal .  لذا ستنشئ إصدارتك من هذا القالب .

3.     في حقل Save as غير اسم قالب المنتج ، أكتب my_product_page ؛ ثم أنقر Save .

  ستظهر وثيقة جديدة في نافذة الوثيقة ، لاحظ أن القالب ينتهي بالامتداد dwt .

تعديل القالب

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

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

1-  في القالب my_product_page.html في نافذة الوثيقة ، حدد وأحذف صورة القرص المضغوط ثم أكتب في خلية الجدول insert image here أي أضف صورة هنا .

2-    حدد النص الذي كتبته للتو .

3-    أختر القائمة Modify ثم Templates ثم اضغط New Editable Region .

  سيظهر مربع حوار New Editable Region

4-    في الحقل Name أكتب Image كأسم لهذا القطاع التحريري من القالب .

5-    أنقر Ok .

  لاحظ النص الآن يبدو ملفت للانتباه . ليوضح أن هذه منطقة تحريرية من القالب .

6-  في نافذة الوثيقة حدد Scaal Sound ثم أختر القائمة Modify ثم Templates ثم اضغط New Editable Region  لجعله قسم تحريري في القالب .

7-    في الحقل Name في صندوق النص New Editable Region ؛ أكتب Name ؛ وأنقر Ok . 

  في نافذة الوثيقة القطاعات التحريرية تشد الانتباه كما تعرف بأسم القطاع الذي أعطيته لها

8- في نافذة الوثيقة حدد نص وصف المنتج ، ثم أختر القائمة Modify ثم Templates ثم اضغط New Editable Region  لجعله قسم تحريري في القالب .

9-    ي الحقل Name في صندوق النص New Editable Region ؛ أكتب Description ؛ وأنقر Ok . 

  في نافذة الوثيقة القطاعات التحريرية تشد الانتباه كما تعرف بأسم القطاع الذي أعطيته لها

10- أختر File ؛ ثم Save ؛ لحفظ قالبك .

  سيظهر صندوق حوار Update Pages ليسألك إن كنت تريد تحديث كل الوثائق في موقعك المحلي ، الخيار Yes لتحديث الصفحات في كل موقع Scaal ؛ والذي لا يفترض بك أن تفعله .

11- أنقر No ؛ وأنقر Close لإغلاق مربع الحوار Update Page .

12- أغلق القالب .

     تطبيق القالب

     الآن ستستعمل القالب لإنشاء صفحة منتج جديدة .

1-    أختر القائمة File ثم New from Template .

  سيظهر مربع حوار Select Template

2-    من القائمة Template ؛ أختر my_product_page ؛ كقالب لتطبيقه ثم أنقر Select .

  ستظهر وثيقة جديدة غير معنونة

المناطق الغامقة من الوثيقة مناطق يمكن تعديلها ، أما بقية المناطق من الوثيقة فمناطق مغلقة لا يمكن تعديلها .

3-    أحفظ وثيقتك ، وسم الملف my_product_mug.html .

تحرير الوثيقة

          بوجود وضع المناطق المفتوحة ، من السهل تحديث الصفحات .   سوف تستبدل نصوص مكان الحفظ بصورة وتضيف نص لإنشاء صفحة المنتج Commuter Mug s’Scaal .

1-    ضع نقطة الإدراج في منطقة الصورة .

2-  أختر القائمة Insert ؛ ثم Image ؛ وفي مربع الحوار الذي سيظهر لك أختر mug.jpg ؛ ثم أنقر Select لاختيار الصورة .

3-    أحذف نص مكان حفظ الصورة "Insert Image Here " .

4-    في نافذة الوثيقة وفي المنطقة Name أكتب اسم للمنتج مثلاً Commuter Mug ؛ وأحذف نص مكان الحفظ .

5-    في نافذة الوثيقة في المنطقة Description أكتب بعض الحمل لوصف الإبريق وأحذف نص حفظ المكان .

6-    أحفظ وثيقتك .

7-    أغلق الوثيقة .

  في القسم التالي من الجولة ، سوف تربط وثائق صفحات المنتجات للصفحة الرئيسية ، صفحات المنتجات التي ستربطها أنشأت باستخدام قالب مماثل .

إنشاء قائمة منبثقة

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

          قبل أن تنشئ قائمة منبثقة استعرض الصفحة المكتملة .

1-    في نافذة الموقع ، أنقر نقراً مضاعفاً على رمز [ أيقونة ] product_index.html ؛ لتفتحها .

2-    أضغط المفتاح F12 ؛ لاستعراض الصفحة في المتصفح .

3-    أنقر السهم يمين القائمة Select a Product لاستعراض قائمة اختيار المنتج ، أختر المنتج لمشاهدته .

4-    عند الانتهاء من مشاهدة الملف ، أغلق نافذة المتصفح .

5-    أغلق الملف Product_index .

إضافة قائمة منبثقة

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

1-    في نافذة الموقع ، أنقر نقراً مضاعفاً على رمز [ أيقونة ] الملف DW3_product_index لتفتحها .

2-    حدد وأحذف النص “Insert Image Here” .

3-    سيكون مؤشر الإدخال في خلية الجدول ، أختر القائمة Insert ؛ ثم Form Object ؛ ثم jump menu .

  سيظهر صندوق حوار Insert Jump Menu

4-    في الحقل Text أكتب Select a Product أي أختر منتجاً .

  هذا النص سيحث المشاهد على تجربته  

5-    تحت Options ؛ حدد الخيار Select First Item After .

  هذا يهيئ أول مدخل في القائمة ليعود كأول خيار في القائمة عند اختيار المستخدم خيار من القائمة .

6-    أنقر زر [+] ؛ لإضافة بند آخر للقائمة .

7-    في الحقل Text ؛ أكتب Compact disk .

8-  في الحقل When Selected, Go To URL ؛ أنقر Brows ثم Dw3_product_cd.html ؛ ثم أنقر Select لاختيار الملف الذي تريد أن يفتح عندما يتم اختيار البند من القائمة .

9-    أنقر زر [+] ؛ لإضافة بند آخر للقائمة .

10- في الحقل Text ؛ أكتب Compact disk ثم أنقر Brows ثم Dw3_product_mug.html ؛ ثم أنقر Select لاختيار الملف الذي تريد أن يفتح عندما يتم اختيار البند من القائمة .

 صندوق الحوار لقائمتك المدخلة يفترض أن يبدو كهذه

11- أنقر Ok لإغلاق مربع النص .

12- أحفظ وثيقتك .

  القائمة المنبثقة لن تعمل في نافذة الوثيقة ، يجب أن تستعرض الصفحة في المتصفح لتختبرها