كل شيء عن برنامج ال«دريم ويفر»(2)

استخدم خيار خريطة الموقع في Dreamwaver3 لتحصل على صورة مرئية من مستوى عال لهيكل الموقع المحلي. يمكنك أيضاً أن تستخدم خريطة الموقع لإضافة ملفات للموقع لإضافة ملفات للموقع أو لإضافة أو تغيير أو إزالة الارتباطات، ولإنشاء ملف رسومي للموقع يمكن تصديره وطباعته من أي برنامج لتحرير الصور في نافذة خريطة الموقع الصفحة الرئيسية للموقع تظهر دائماً في أعلى خريطة الموقع، وتحت الصفحة الرئيسية يمكنك أن ترى أي ملفات مرتبطة بها سوف تضع DW3_scaal_home.html كصفحة رئيسية للموقع my_scaal . هذه الصفحة مماثلة للصفحة الرئيسية التي أنشأتها . (هي حقيقة نفس صفحة my_scaal_home ؛ ولكن الصور وتنسيق النصوص مضافة مسبقاً) انقر قضيب العنوان لنافذة الموقع إذا كانت مرئية لجعلها نشطة، أو أختر Window ثم Site files في نافذة الموقع ومن القائمة Local Folder ابحث عن DW3_scaal_home.;html وأنقر بالزر الأيمن للفأرة على رمز (أيقونة) الملف DW3_scaal_home.html ستظهر قائمة أختر منها Set as Home Page انقر رمز (أيقونة) خريطة الموقع Site Map في المنطقة اليسرى العليا لنافذة الموقع تعرض نافذة الموقع الآن مشهدين للموقع المحلي في الجهة اليسرى خريطة الموقع والتي تظهر في تصوير رسومي للهيكل الحالي للموقع، وفي المنطقة اليمنى نرى قائمة بالملفات التي يحتويها الموقع. الصفحة الرئيسية الحالية لا تحتوي على أي ارتباطات، سوف تضيف الارتباطات في القسم التالي من هذه الجولة. دع نافذة الموقع مفتوحة لكي ترى كيف أن خريطة الموقع تتحدث كلما أضفت رابطاً للصفحة الرئيسية. انشاء الارتباطات ملاحظة: يشتمل الحقل Link على علامة الترقيم # ؛ والتي أنشأت عندما ربطت السلوك Swap Image بالصورة، لا تزل علامة الترقيم، سوف تستبدل باسم الملف الوثيقة الذي سترتبط به في لوحة مراقبة الخصائص، انقر رمز (أيقونة) الملف يمين الحقل Link في صندوق النص اختيار ملف استعرض للملف my_ourstory.html ؛ وأنقر Select لاختيار الملف سيظهر أسم الملف في الحقل Link في لوحة مراقبة الخصائص، الآن ستضيف ارتباط للصورة Products باستخدام لوحة مراقبة الخصائص ونافذة الموقع انقر قضيب العنوان لنافذة الموقع لجعلها فعالة، أو أختر Window ثم Site File أعد تحجيم نافذة وثيقتك إذا كان ذلك ضرورياً يمكنك جعل الجهة اليسرى لنافذة الوثيقة ونافذة الموقع في الجهة المجاورة. في نافذة الوثيقة أنقر الصورة Product لتحديدها في لوحة مراقبة الخصائص، أنقر ثم أسحب رمز (أيقونة) التأشير للملف (ستجدها مجاورة للحقل Link ) لنافذة الموقع، وأشر على الملف DW3_product_index.html سيظهر اسم الملف وحقل Link في لوحة مراقبة الخصائص للصورة Products. أنقر رمز (أيقونة) خريطة الموقع في نافذة الموقع، خريطة الموقع ستتحدث لتعكس اللنك الذي أضفته. إشارة الزائد (+) بجانب أي ملف في خريطة الموقع تشير إلى أن الملف يحتوي وصلات إلى وثائق أخرى، أنقر إشارة الزائد لتوسع شجرة خريطة الموقع وترى الوثائق التي تتضمنها، لإلغاء ظهورها أنقر إشارة السالب (-) في نافذة الوثيقة انقر على الصورة This Week بزر الفأرة الأيمن، وأختر Change Link هذه الصورة مرتبطة بالسلوك الذي يبدل الصورة الظاهرة عندما يمرر المستخدم مؤشر الفأرة على الصورة .سوف تغير الارتباط وبذلك سيفتح الملف ما أن ينقر المستخدم على الصورة في صندوق النص اختيار ملف حدد DW3_thisweek.html وأنقر Select لاختيار الملف لفتحه لاحظ أن لوحة مراقبة الخصائص تظهر أسم الملف في حقل Link . والآن ستضيف رابط من نص في نافذة الوثيقة أختر الكلمة Products في الفقرة الثانية انقر بزر الفأرة الأيمن ؛ ومن القائمة المنبثقة أختر Make Link في صندوق الحوار اختيار ملف حدد DW3_products_index.html ؛ وانقر Select لاختيار الملف أختر File ثم Save لحفظ كل التغييرات التي أجريتها على الصفحة الرئيسية أختر File ثم Close لإغلاق الصفحة. تخصيص القوالب إنشاء قالب يمكنك استخدام القوالب لإنشاء وثائق ذات بناء ومظهر مشترك، القوالب مفيدة إذا كنت تريد التأكد أن كل الصفحات في الموقع تتشارك في الطابع الأساسي. حالما تطبق قالب مفرد على مجموعة صفحات، يمكنك تحرير المعلومات على مجموعة الصفحات بتحرير القالب ومن ثم تعيد تطبيقه على تلك الصفحات . بينما العناصر الفريدة لكل صفحة (مثل نص يصف بنداً للبيع) يبقى بلا تغيير، عناصر القالب المشتركة (مثل عمود التصفح) سوف تتحدث على كل الصفحات التي تستخدم القالب صفحة منتجات Scaal مرتبطة بالعديد من صفحات المنتجات التي تصف عروض منتجات Scaal . سوف تستخدم صفحة المنتج الموجود لإنشاء قالب . استعمل القالب يضمن أن صفحات منتجك تمتلك تصميما وتنسيقا متماثلا. في هذا القسم ستنشئ قالبا من صفحة المنتج الموجودة ومن ثم استخدام القالب لإنشاء صفحات لمنتجات جديدة استعراض صفحة المنتج إبداء باستعراض صفحة المنتج قرص Scaal المضغوط في المتصفح في نافذة الموقع في المحلي أنظر الرمز ( أيقونة ) الملف html product_cd. ؛ وانقر عليه نقراً مزدوجاً لتفتح الملف في Dreamwaver3 اضغط المفتاح F12 لاستعراض الصفحة في المتصفح. اغلق المتصفح عند الانتهاء من مشاهدة الصفحة أغلق الملفhtml product_cd. إنشاء القالب سوف تنشئ قالباً من صفحة القرص المدمج، وبعدها سوف تستخدم هذا القالب لإنشاء صفحات لمنتجات أخرى في صفحة الموقع، في قائمة الملفات Local Folder ، انقر نقراً مضاعفاً على رمز (أيقونة) html DW3_product_cd. ؛ لتفتح الملف أختر File ثم Save as Template سيظهر مربع حوار حفظ كقالب. القالب الموجود product_page ؛ كان منشأ ومطبقاً لكامل صفحات منتجات موقع Scaal . لذا ستنشئ إصدارتك من هذا القالب في حقل Save as غير اسم قالب المنتج، أكتب my_product_page ؛ ثم أنقر Save ستظهر وثيقة جديدة في نافذة الوثيقة، لاحظ أن القالب ينتهي بالامتداد dwt. تعديل القالب عند هذه النقطة، قالبك الجديد يبدو مثل الصفحة التي حفظت كقالب، الهيكل و المظهر تسمى القطاعات الثابتة للصفحة والتي تحتاج أن تكون متشابهة في كل صفحات المنتجات . صورة المنتج واسمه ووصفه وسعر المنتج ستكون متغيرة من صفحة إلى أخرى ولهذا تسمى قطاعات تحرير، سوف ترى كيف تضع قطاعات التحرير في قالبك كل قالب يحتوي على كل القطاعات الثابتة وقطاعات التحرير . القطاعات الثابتة يمكن أن تعدل بداخل القوالب نفسها فقط، وتظهر بلون أكثر وضوحاً في كل صفحة يطبق عليها القالب . قطاعات التحرير مكان حفظ للمحتويات الفريدة لكل صفحة يطبق عليها القالب في القالب html my_product_page. في نافذة الوثيقة، حدد وأحذف صورة القرص المضغوط ثم أكتب في خلية الجدول insert image here أي أضف صورة هنا حدد النص الذي كتبته للتو. أختر القائمة Modify ثم Templates ثم اضغط New Editable Region سيظهر مربع حوار New Editable Region في الحقل Name أكتب Image كأسم لهذا القطاع التحريري من القالب .SCAAL Okأنقر لاحظ النص الآن يبدو ملفتاً للانتباه. ليوضح أن هذه منطقة تحريرية من القالب في نافذة الوثيقة حدد Scaal Sound ثم أختر القائمة Modify ثم Templates ثم اضغط New Editable Region لجعله قسما تحريريا في القالب في الحقل Name في صندوق النص New Editable Region ؛ أكتب Name ؛ وأنقر Ok في نافذة الوثيقة القطاعات التحريرية تشد الانتباه كما تعرف بأسم القطاع الذي أعطيته لها في نافذة الوثيقة حدد نص وصف المنتج، ثم أختر القائمة Modify ثم Templates ثم اضغط New Editable Region لجعله قسماً تحريرياً في القالب في الحقل Name في صندوق النص New Editable Region ؛ أكتب Description ؛ وأنقر Ok في نافذة الوثيقة القطاعات التحريرية تشد الانتباه كما تعرف بأسم القطاع الذي أعطيته لها أختر File ؛ ثم Save ؛ لحفظ قالبك سيظهر صندوق حوار Update Pages ليسألك إن كنت تريد تحديث كل الوثائق في موقعك المحلي، الخيار Yes لتحديث الصفحات في كل موقع Scaal ؛ والذي لا يفترض بك أن تفعله أنقر No ؛ وأنقر Close لإغلاق مربع الحوار Update Page أغلق القالب تطبيق القالب الآن ستستعمل القالب لإنشاء صفحة منتج جديدة أختر القائمة File ثم New from Template سيظهر مربع حوار .select tamplate من القائمة ;Template أختر my_product_page ؛ كقالب لتطبيقه ثم أنقر Select ستظهر وثيقة جديدة غير معنونة. المناطق الغامقة من الوثيقة مناطق يمكن تعديلها، أما بقية المناطق من الوثيقة فمناطق مغلقة لا يمكن تعديلها أحفظ وثيقتك، وسم الملف my_product_mug html تحرير الوثيقة. بوجود وضع المناطق المفتوحة، من السهل تحديث الصفحات . سوف تستبدل نصوص مكان الحفظ بصورة وتضيف نص لإنشاء صفحة المنتج Commuter Mugs Scaal ضع نقطة الإدراج في منطقة الصورة أختر القائمة Insert؛ثم;Image وفي مربع الحوار الذي سيظهر لك أختر mug.;jpg ثم أنقر Select لاختيار الصورة أحذف نص مكان حفظ الصورة Insert Image Here في نافذة الوثيقة وفي المنطقة Name أكتب اسم للمنتج مثلاً Commuter Mug ؛ وأحذف نص مكان الحفظ في نافذة الوثيقة في المنطقة Description أكتب بعض الحمل لوصف الإبريق وأحذف نص حفظ المكان أحفظ وثيقتك أغلق الوثيقة في القسم التالي من الجولة، سوف تربط وثائق صفحات المنتجات للصفحة الرئيسية، صفحات المنتجات التي ستربطها أنشئت باستخدام قالب مماثل إنشاء قائمة منبثقة القائمة المنبثقة قائمة تبرز عند الطلب تحتوي على خيارات من الروابط، سوف تضع قائمة منبثقة تسمح للزبائن بالقفز بسرعة من صفحة فهرس المنتجات إلى صفحة منتج محددة في موقع Scaal قبل أن تنشئ قائمة منبثقة استعرض الصفحة المكتملة في نافذة الموقع، أنقر نقراً مضاعفاً على رمز (أيقونة) product_indexhtml. ؛ لتفتحها أضغط المفتاح F12 ؛ لاستعراض الصفحة في المتصفح. أنقر السهم يمين القائمة Select a Product لاستعراض قائمة اختيار المنتج، أختر المنتج لمشاهدته عند الانتهاء من مشاهدة الملف، أغلق نافذة المتصفح Product_index أغلق الملف إضافة قائمة منبثقة القائمة المنبثقة التي ستنشئها تتضمن الحث على الاختيار لتخبر المشاهدين عن الخيارات، سوف تنشئ أيضاً أمرين للقائمة التي ترتبط بصفحات المنتج في نافذة الموقع، أنقر نقراً مضاعفاً على رمز (أيقونة) الملف DW3_product_index لتفتحها حدد وأحذف النص Insert Image Here سيكون مؤشر الإدخال في خلفية الجدول، أختر القائمة Insert ؛ ثم Form Object ؛ ثم jump menu سيظهر صندوق حوار Insert Jump Menu. في الحقل Text أكتب Select a Product أي أختر منتجاً هذا النص سيحث المشاهد على تجربته تحت Options ؛ حدد الخيار Select First Item After هذا يهيئ أول مدخل في القائمة ليعود كأول خيار في القائمة عند اختيار المستخدم خيار من القائمة أنقر زر (+) ؛ لإضافة بند آخر للقائمة في الحقل Text ؛ أكتب Compact disk في الحقل When Selected, Go To URL ؛ أنقر Brows ثم Dw3_product_cd.html ؛ ثم أنقر Select لاختيار الملف الذي تريد أن يفتح عندما يتم اختيار البند من القائمة أنقر زر (+) ؛ لإضافة بند آخر للقائمة في الحقل Text ؛ أكتب Compact disk ثم أنقر Brows ثم Dw3_product_mug.html ؛ ثم أنقر Select لاختيار الملف الذي تريد أن يفتح عندما يتم اختيار البند من القائمة صندوق الحوار لقائمتك المدخلة يفترض أن يبدو كهذه. أنقر Ok لإغلاق مربع النص أحفظ وثيقتك القائمة المنبثقة لن تعمل في نافذة الوثيقة، يجب أن تستعرض الصفحة في المتصفح لتختبرها. فحص الموقع الآن وقد أضفت كل التعديلات الضرورية لملفات شبه مكتملة استعرض الموقع في المتصفح لترى كيف يبدو افتح صفحة DW3_scaal_home ؛ ثم أضغط المفتاح F12 ؛ لفتح الصفحة في المستعرض أنقر على الصور This Week, Product, Our Story ؛ لتشاهد بقية الصفحات التي حررتها لهذا الموقع، وحاول اختبار بنود القائمة المنبثقة في صفحة المنتجات Product عندما تنتهي من فحص الموقع الذي بنيته أغلق نافذة المتصفح، ثم أرجع لـ Dreamwaver3 ؛ وأختر القائمة File ؛ ثم Close لإغلاق الصفحة الرئيسية بهذا تكون قد تعلمت الكثير من خصائص التي تأهلك لبناء موقعك على الشبكة العنكبوتية، كما بقي بعض الخصائص لتقوم بتجربتها بنفسك، وبذلك نكون قد أنهينا جولتنا لهذا البرنامج ولم يتبق إلا موضوع واحد هو كيف يمكن إضافة الخطوط العربية للبرنامج، أنصحك بعد ذلك بأخذ جولة في برنامج Fireworks3 ، البرنامج الذي صنعت به الصور المستخدمة في هذه الجولة وتعلم أيضاً الكثير من اللمسات الجمالية التي يمكن أن تضيفها لموقعك باستخدام Fireworks3 .. الكتابة بالعربي في البرنامج الآن وقد أنهينا الجولة التعليمية واصبح بالإمكان إنشاء موقع خاص بنا باستخدام برنامج Dreamwaver3 ، لم يتبق إلا عائق واحد وهو كيف يمكن الكتابة باللغة العربية في هذا البرنامج من القائمة Edit ؛ أختر Preferences سيظهر صندوق الحوار Preferences. من القائمة Category حدد Fonts / Encoding لتظهر خيارات الخط والترميز من القائمتين Default Encoding ؛ و Font Setting ؛ حدد الخيار Other و في القوائم Proportional Font ؛ و Fixed Font ؛ و HTML Inspector ؛ أختر أي خط عربي Okأنقر أغلق برنامج Dreamwaver3 ؛ وقم بتشغيله مرة أخرى، الآن بإمكانك أن تكتب باللغة العربية، ولكن تذكر أن تضغط المفتاحين Alt+Shift الموجودين في الجهة اليمنى من لوحة المفاتيح للكتابة باللغة العربية، ونفس المفتاحين ولكن الموجودين في الجهة اليسرى للكتابة باللغة الإنجليزية الآن يمكنك الكتابة باللغة العربية ولكن هل يمكنك الكتابة بغير هذه الخطوط؟ هل يمكن إضافة المزيد من الخطوط العربية للبرنامج. من لوحة مراقبة الخصائص أنقر السهم الصغير المجاور لكلمة Default Font ؛ و أختر الخيار الأخير Edit Font List سيظهر صندوق حوار Edit Font List. عليك الآن الاختيار من الخطوط المتوفرة في جهازك و المبينة في القائمة Available Fonts ؛ وذلك بتحديد الخط ثم نقر السهم الأيسر لنقله لقائمة Chosen Fonts لتكون مجموعة خطوط. ولكن تذكر أن كل مجموعة لا يمكن أن تزيد على خمسة أنواع من الخطوط، كما يفضل استخدام خطوط متشابهة أو أجعل كل مجموعة مكونة من خط واحد لضمان ظهور الكتابة بالخط الذي تريده بالضبط بعد عمل المجموعة أنقر زر الزائد (+) ؛ لإضافة مجموعة الخطوط لقائمة الخطوط لتتمكن من استخدامها في التنسيق والكتابة في البرنامج، وكل ما عليك عمله مستقبلاً هو اختيار الخط الذي تريد استخدامه من لوحة مراقبة الخصائص