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
منقول
سيظهر صندوق الحوار 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
منقول
: 
: 
: