شرح برنامج Dreamweaver4

    تمر دردشة الساحة الخاصة بالمتصفح والموبايل بفترة صيانة دورية هذا ونعتذر للجميع على الإنقطاع المؤقت بإمكانكم المشاركة في المنتدى لحين عودتها :)

    • شرح برنامج Dreamweaver4

      1. من القائمة Edit ؛ أختر Preferences .

      سيظهر صندوق الحوار Preferences






      . من القائمة Category حدد Fonts / Encoding لتظهر خيارات الخط والترميز من القائمتين Default Encoding ؛ و Font Setting ؛ حدد الخيار Other .

      3. و في القوائم Proportional Font ؛ و Fixed Font ؛ و HTML Inspector ؛ أختر أي خط عربي .

      4. أنقر Ok .

      5. أغلق برنامج Dreamwaver3 ؛ وقم بتشغيله مرة أخرى ، الآن بإمكانك أن تكتب باللغة العربية ، ولكن تذكر أن تضغط المفتاحين Alt+Shift الموجودين في الجهة اليمنى من لوحة المفاتيح للكتابة باللغة العربية ، ونفس المفتاحين ولكن الموجودين في الجهة اليسرى للكتابة باللغة الإنجليزية .

      الآن يمكنك الكتابة باللغة العربية ولكن هل يمكنك الكتابة بغير هذه الخطوط ؟ ، هل يمكن إضافة المزيد من الخطوط العربية للبرنامج


      .

      6. من لوحة مراقبة الخصائص أنقر السهم الصغير المجاور لكلمة Default Font ؛ و أختر الخيار الأخير Edit Font List .

      سيظهر صندوق حوار Edit Font List .



      عليك الآن الاختيار من الخطوط المتوفرة في جهازك و المبينة في القائمة Available Fonts ؛ وذلك بتحديد الخط ثم نقر السهم الأيسر لنقله لقائمة Chosen Fonts لتكون مجموعة خطوط . ولكن تذكر أن كل مجموعة لا يمكن أن تزيد على خمسة أنواع من الخطوط ، كما يفضل استخدام خطوط متشابهة أو أجعل كل مجموعة مكونة من خط واحد لضمان ظهور الكتابة بالخط الذي تريده بالضبط.

      8. بعد عمل المجموعة أنقر زر الزائد [+] ؛ لإضافة مجموعة الخطوط لقائمة الخطوط لتتمكن من استخدامها في التنسيق والكتابة في البرنامج ، وكل ما عليك عمله مستقبلاً هو اختيار الخط الذي تريد استخدامه من لوحة مراقبة الخصائص




      بهذا نكون قد انتهينا من كل ما يتعلق ببرنامج Dreamwaver3 ؛ آمل أن تكونوا قد استفدتم من هذه الدروس التعليمية وكلي أمل أن تكون هذه الجولات مفيدة لكم في الاستفادة المثلى من هذه البرامج ، فإلى اللقاء في جولة أخرى مع برنامج آخر
      الملف Tutorial لصفحة صفحة Our Story يحتوي على وثيقة أنشأت في برنامج Microsoft Word وحفظت كوثيقة HTML . سوف تستورد هذه الوثيقة لـ Dreamwaver3 ؛ وتتخلص من أي شفرة HTML غير قياسية باستخدام خاصية جديدة في Dreamwaver3 تسمى Clean Up Word HTML .

      الخاصية Clean Up Word HTML تزودك بخيارات لتنظيف و إصلاح بيانات HTML ؛ وعناصر CSS [Cascading Style Sheets ] وإعدادات لون خلفية الصفحة و تغيير أحجام الخط والعناوين إلى حجم مناسب لـ HTML .

      1. في الصفحة الرئيسية Scaal أختر File ثم New لفتح ملف جديد .

      2. أختر File ثم Import ثم Import Word HTML لاستيراد وثيقة Word HTML .

      3. في صندوق النص Select Word HTML File to Import أخترDW3_ourstory_word.html ، واضغط Select لاختياره .

      ستظهر رسالة تحثـك على حفظ وثيقتك



      اضغط Ok .

      ستفتح الوثيقة Our Story في الخلفية وسيظهر في المقدمة مربع حوار Clean Up Word HTML



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

      5. في مربع النص Clean Up Word HTML يفترض أن كل الخيارات محددة مسبقاً . تأكد من ذلك ثم أضغط Ok .

      سيظهر سجل الأداء لـ Clean Up Word HTML مفصلاً نتائج التنظيف



      . أنقر Ok .

      سترى وثيقة خالية ، هذه هي الوثيقة الجديدة التي أنشأتها قبل استيراد وثيقة الـ Word HTML ، أما الوثيقة المستوردة فموجودة خلفها .

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

      8. أنقر في الوثيقة Our Story لجعلها النافذة الفعالة .

      9. أختر File ثم Save as لحفظ الوثيقة Our Story وقم بتسميتها my_ourstory ؛ لاحظ أن الوثيقة Our Story مازالت تحتفظ بنفس التنسيق والخط الموجود في الوثيقة الأصلية

      الآن وقد استوردت الوثيقة Our Story ؛ سوف تضيف بعض التغييرات لتنسيق النص ، الطريقة الأسهل لتنسيق النص هي استخدام سمات HTML . سمات HTML تتكون من واحد أو أكثر من تأثيرات HTML ويمكن أن يشمل الألوان ، الخطوط ، الأحجام ، وهذا .

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

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

      تطبيق سمة HTML

      في هذه الجولة ، ستستخدم سمات HTML لتنسيق النص في وثيقة Our Story .

      1. أختر Window ثم HTML Style ستظهر لوحة HTML Style .




      لاحظ أن السمات في هذه اللوحة لموقع my_tutorial ، هناك ثلاث سمات في اللوحة .

      o أول بندين هما أوامر Dreamwaver3 : Clear Selection Style و Clear Paragraph Style . استخدم هذه الأوامر لتنقية السمات الموجودة من النص الذي حددته في الوثيقة .

      o البند الأخير هو سمة فقرة HTML وتسمى body أنشأت من أجلك لتستخدمها في هذه الجولة .

      2. تأكد من تحديد الخيار Apply في الزاوية اليسرى السفلية من اللوحة HTML Style .

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

      4. من اللوحة HTML Style أنقر السمة body .

      النص في الفقرة الأولى أعيد تنسيقها إلى السمة الجديدة .

      5. طبق السمة body للفقرات المتبقية في الوثيقة

      إنشاء سمة HTML

      الآن ستنشئ سمة HTML لتضيف التشديد على كلمة Scaal في الوثيقة .

      1. أنقر رمز سمة جديدة New Style في أسفل اللوحة New Style




      سيظهر مربع حوار تعريف السمة Define HTML Style




      في الحقل Name أكتب Scaal .

      3. ومن Apply to أختر Selection .

      هذا سيطبق السمة على جزء محدد من النص بدلاً من كامل الفقرة .

      4. اترك When Applying على الخيار المحدد Clear Existing Style لإزالة أي سمة مطبقة على النص عند تطبيق السمة الجديدة .

      5. و لخاصية النص Font أختر النص المناسب لك و إليك بعض الاقتراحات :

      Font : Arial, Helvetica, sans-serif

      Size : 3

      [ أو أختر القطارة لاختيار اللون الذهبي ] Color : #CC9933

      اضغط Other ؛ ثم أختر Emphasis : Style

      6. أنقر Ok .


      أضفت السمة الجديدة للوحة سمات HTML . لاحظ الحرف a الذي يسبق السمة Scaal هذا الرمز يعني أن السمة سمة تحديد Selection ؛ وليست سمة فقرة Paragraph .



      يجب أن تحدد النص قبل أن تطبق عليه سمة التحديد Selection .

      7. في نافذة الوثيقة حدد الكلمة Scaal في الفقرة الأولى .

      8. أختر السمة Scaal في لوحة سمات HTML .

      سيظهر النص بالسمة الجديدة في الوثيقة .



      9. طبق سمة Scaal على كلمة scaal في بقية الفقرات ثم أغلق لوحة HTML Style .

      10. أختر File ثم Save لحفظ التغييرات التي أجريتها على وثيقة my_ourstory .

      11.أختر File ثم Close لإغلاق الوثيقة .



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

      أفتح هذه المكونات إذا لم تكن مفتوحة مسبقاً :

      o لوحة الكائنات [ أختر Object من القائمة Window ] التي ستستخدمها لإضافة الكائنات لوثيقتك .

      o مراقب الخصائص [ أختر Properties من القائمة Window ] الذي ستستخدمه لتضع خصائص ومواصفات الكائنات في وثيقتك .

      حفظ الوثيقة

      احفظ وثيقتك الخالية التي أُنشأت عند تشغيل Dreamwaver3 .

      1- أختر Save من القائمة File .

      2- في صندوق الحوار Save as أختر المجلد Site\scaal_site لحفظ الملف فيه .

      3- في الحقل أسم الملف File Name أكتب my_scaal_home.html .

      4- أنقر Save .

      تعريف عنوان الصفحة

      تعريف عنوان الصفحة لوثيقة الـ HTML تساعد المستخدمين للتعرف عليها ولتسهيل الوصول إليها ، عنوان الصفحة يظهر في قضيب عنوان المتصفح عند عرض الصفحة في المتصفح .

      عند إضافة الصفحة إلى المفضلة فإن عنوان الصفحة يظهر في المتصفح في قائمة المفضلة . إذا أنشأت الصفحة بدون عنوان للصفحة فإن الوثيقة ستظهر في المتصفح بهذا العنوان : Untitled Document .

      1- في نافذة الوثيقة النشطة أختر Modify ثم Page Properties لترى خصائص الصفحة .

      2- في حقل العنوان Title من صندوق الحوار Page Properties أكتب Scaal Gourmet Coffee .





      أنقر Ok .

      سيظهر العنوان في قضيب عنوان نافذة الوثيقة في Dreamweaver4


      منقول :)