أهم الأوامر الموجودة في برنامج دريم ويفر وكيفية عمل الموقع

أهم الأوامر الموجودة في برنامج دريم ويفر وكيفية عمل الموقع

1. أول شيء يجب عمله هو رسم مخطط للموقع الذي نريد عمله بالنسبة للصفحات والروابط وطرق التنقل
2. أول
خطوة لإنشاء موقع نفتح القائمة Site > new site ثم نكتب الاسم المناسب
للموقع مع العلم أن هذا الاسم لا يظهر في نافذة المتصفح.
3. لإنشاء
صفحة html نعطي الأمر new < ثم نقوم باختيار خصائص تلك الصفحة عن طريق
الضغط على الزر اليميني واختيار page properties
فيظهر مربع حوار ندخل
فيه اسم لهذه الصفحة ويكون هذا الاسم للدلالة على عمل الصفحة حيث يستفاد
منه في محركات البحث يمكننا أن نختار اللون للصفحة أو وضع صورة لأرضية
المستند واختيار لون النص ولون الروابط التشعبية ولون الروابط التي قمنا
بزيارتها . والمربع Margin لتعيين أبعاد الصفحة والأسهل تعيين الأبعاد من
شريط window size وذلك في الصفحة الرئيسية للبرنامج . والأمر tracing
image هو لوضع صورة استرشادية فقط لا تظهر في المتصفح.

4. لإدراج صورة في المستند نختار إدراج صورة من لوح الأوامر Common .
5. يتم البدء في عمل الصفحة باستخدام Layout tables & cells وذلك لتخطيط الصفحة ولترتيبها
6. الأمر
Rollover وهو لتحميل صورتين في نفس الوقت حيث أننا عندما تضع المؤشر على
الصورة فتظهر الصورة الثانية وهذا الأمر موجود في لوح الأوامر common
7. يمكن أيضا إضافة أفلام فلاش وأزرار فلاش كلا الأمرين موجود في لوح الأوامر common
8. كما
يمكن أيضا إضافة نص من الفلاش مما يعطينا إمكانية التلوين عند تمرير
الماوس فوقه وإمكانية الارتباط إلى صفحة أخرى وذلك عن طريق أمر flash text
الموجود في لوح الأوامر common
9. URL: Uniform Recourse locators
الروابط: ولها أنواع

· الروابط الداخلية internal links or local links

وهو الربط بين مستندات وصفحات الموقع الموجودة على نفس جهاز الخادم المحلي

الطريقة: نعين النص أو العنصر الذي نريد إجراء الارتباط له ثم نذهب لمربع الارتباط الموجود في مربع الخواص ونعين الملف المرتبط

· روابط القفز Anchor

وتستخدم للقفز والتنقل بين المواضع المختلفة داخل نفس الصفحة, كما تستخدم للانتقال إلى موضع محدد داخل صفحة أخرى في نفس الموقع

الطريقة: تتم هذه العملية على مرحلتين

-
أولا إنشاء موضع الذي نريد القفز إليه في الصفحة حيث نضع المؤشر في المكان
الذي نريد القفز إليه ونذهب للأمر named anchor الموجود ضمن لوح الأوامر
في التفريعة invisible فيظهر لنا مربع يطلب منا إدخال الاسم الموضع فندخل
الاسم مع مراعاة عدم ترك مسافات بين الأحرف ثم نضغط موافق فيتم إنشاء هذا
الموضع

- ثانيا نذهب إلى العنصر الذي نريد القفز منه إلى
الموقع السابق الذي أنشأناه ونختاره (نص مثلا) ثم نذهب إلى خصائص العنصر
الموجود في الأسفل في الخانة Link ونكتب بالطريقة التالية

#name of anchor

ويجب الانتباه إلى دقة كتابة اسم الموضع الذي أنشأناه مسبقا

أما
إذا كنا نريد إنشاء ربط بمكان في صفحة أخرى فيجب علينا القيام بما سبق
وإضافة اسم الصفحة إلى الموضع الذي أنشأناه ...
مثال index.htm#name of anchor

· الروابط الخارجية External Links

وهي للربط بمواقع أخرى

الطريقة:

لإنشاء
الروابط الخارجية يكون كما عملنا في الروابط الداخلية ولكن الفرق في أننا
نكتب العنوان كاملا في شريط العنوان مثال: http//:www.yahoo.com

· روابط الايميل e-mail links

نقوم
باختيار أو تحديد العنصر الذي نريد بالضغط عليه أن يفتح لنا نافذة البريد
الإلكتروني ثم نضغط على المفتاح insert e-mail link من لوحة الأوامر
common فنكتب العنوان بشكل كامل فيتم إنشاء رابطة ايميل

· روابط Nul links & script links

تستخدم لإعطاء العناصر خواص معينة لتشغيل كود معين باستخدام جافا سكريبت

الطريقة بالنسبة للـ Nul link : وهي بوضع العلامة # في المربع link

10. Navigation bar
وهو عبارة عن شريط يحتوي على عدة مفاتيح للتنقل بين أجزاء وصفحات الموقع المختلفة

وتتكون هذا الشريط من مجموعة من الصور التي يتغير مظهرها حسب استخدام المستخدم

ولإنشائه:

نضغط في الصفحة في المكان الذي نريد إدراج الشريط navigation bar إليه نضغط على الأمر insert navigation bar من لوحة الأوامر common

فيظهر
مربع حوار ثم نقوم بإدخال اسم المفتاح أو العنصر الأول في الشريط ويظهر في
الخانات الأخرى مسار ملفات الصور التي قد تم إنشاءها مسبقا والتي ستظهر
تباعا لما يلي

في الخانة الأولى up image وهي الصورة التي تظهر على المفتاح في وضعه الطبيعي قبل الضغط عليه بالمؤشر

في الخانة الثانية over image وهي الصورة التي ستظهر على المفتاح عند تحريك المؤشر فوقه

وفي الخانة الثالثة down image وهي الصورة التي ستظهر عند الضغط على المفتاح

وفي الخانة الرابعة over while down image وهي الصورة التي ستظهر عند تحريك المؤشر على المفتاح بعد الضغط عليه

وليس من الضروري استخدام جميع الخانات السابقة.

11. image map
وهي طريقة لتعيين جزء محدد من الصورة وذلك لأجل ربطة بصفحة أخرى أو موقع آخر

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

وبعد تحديد الموضع يظهر لنا خصائص جديدة فيجب علينا
كتابة اسم ما في الخانة map ويجب أن يكون له علاقة بهذا الموضع , وأيضا
يجب الكتابة في الخانة Alt حيث أن هذه الكتابة ستظهر في المتصفح في حال
تمرير المؤشر على الصورة , و أخيرا يجب كتابة اسم الصفحة الذي نريد
الانتقال إليها في الخانة link

وفي حال وجود عدة أماكن محددة بالـ
hotspot فانه يظهر عندنا بعض الخصائص الأخرى كالمحاذاة وغيرها, وهناك بعض
الخصائص نأخذها من القائمة السريعة أي الزر اليميني فيجب التنبه لذلك

12. Jump Menu
وتسمى بقوائم القفز وهي عبارة عن قوائم تحتوي على عدة خيارات تستخدم للتنقل بسهولة بين صفحات الموقع

حيث يتم عمل link مع صفحات أخرى من نفس الموقع أو من خارج الموقع

كما تمكننا تلك القوائم من عمل رسالة إلكترونية

الطريقة:
نضع المؤشر في المكان الذي نريد الإنشاء فيه ثم نذهب إلى اللوحة الفرعية
forms من لوحة الأوامر ونضغط الامر jump menu فيظهر لنا مربع حواري فنكتب
فيه ألواح تلو الآخر

وعادة يكون الخيار الأول غير فعال وهو عبارة عن توضيح.

13.إدراج جدول:

يتم عن طريق الأمر Insert table من لوح الأوامر common

فيظهر لنا عدة خصائص للجدول

Cell padding وهي المسافة التي تحدد بين المكونات التي يتم إدراجها في الخلية والإطار المحيط بالخلية

Cell spacing تستخدم لتحديد المسافات بين خلايا الجدول

الأمر Bg Image وهو لتحديد صورة كخلفية للجدول

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

14. نماذج البيانات Forms " جميع الأوامر تؤخذ من اللوحة الفرعية form من لوح الأوامر"

· إنشاء
نماذج البيانات: يجب أولا إدراج نموذج البيانات form إلى المستند, فنضع
المؤشر في المكان الذي نريد إدراج النموذج فيه ثم نضغط على المفتاح insert
form من لوحة العناصر, فيظهر إطار متقطع احمر اللون داخل المستند,
وبالنسبة إلى الخصائص نجد أولا form name وهذا يفيدنا في إعطاء اسم
للنموذج لاستخدامه داخل كود جافا سكريبت بي بي سكريبت عند إضافة أوامر
التحكم إليه, ويجب أن يكون هذا الاسم غير مستخدم من قبل.

وتستخدم Action لتحديد عنوان الكود أو التطبيق المستخدم لمعالجة نموذج البيانات,

ولإرسال
بيانات النموذج كرسالة بريد إلكتروني نقوم بكتابة الكلمة mailto: متبوعة
بعنوان البريد الإلكتروني الذي سيتم إرسال بيانات النموذج إليه, فيتم
إضافة العنوان كقيمة للخاصية Action داخل الكود.




Method
وهي لتحديد الطريقة التي سيتم بها تناول بيانات نموذج البيانات, فالاختيار
Post يستخدم لإرسال القيم التي يتم إدخالها في نموذج البيانات عن طريق
رسالة, أما Get فيستخدم لإرسال البيانات وقيم نماذج البيانات ملحقة بعنوان
الـ URL إلى السير فر, ولا يفضل استخدام الطريقة Get مع نماذج البيانات
الطويلة إذ إن العناوين URL محدودة بعدد معين من الحروف فمن الممكن حذف
جزء من تلك البيانات, كما يجب أن لا نستخدمها مع البيانات التي تتطلب درجة
عالية من السرية كبيانات كروت الائتمان لأن هذه الطريقة غير مؤمنة سرياَ,

كما
يجب تحديد نوع البيانات التي سيتم إرسالها إلى السير فر من خلال نموذج
البيانات ليتم إرسالها بشكل سليم, ويتم ذلك عن طريق تحديد القيم للخاصية
enctype , ونقوم بكتابة هذه الخاصية في الكود في لغة الـ HTML ضمن السطر
Form



وفي نماذج البيانات العادية عندما تكون القيمة
الموجودة في الخانة method هي post فان القيمة الافتراضية للحقل
enctype هي true أي صحيحة

أما إذا كانت القيمة الموضوعة داخل
الخانة action عبارة عن عنوان للبريد الإلكتروني الذي سيتم إرسال قيم
نموذج البيانات إليه فانه في الحالة الافتراضية سيتم إرسال هذه القيم ضمن
ملف منفصل مرفق مع الرسالة فإذا أردنا إرسال هذه القيم ضمن الرسالة نفسها
فنقوم بكتابة text/plain للخاصية enctype



15. حقول
نماذج البيانات: بعد إضافة العنصر form إلى المستند فانه بإمكاننا البدء
في إضافة عناصر نماذج البيانات بداخله إذ لا يمكننا إضافة عناصر نماذج
البيانات بدون الـ form ويجب أن تكون الإضافة بداخل العنصر form .

· والآن
لإنشاء حقل لكتابة الاسم بداخله نضغط على الأمر insert text field من لوحة
الأوامر form ويوجد لهذا الأمر عدة خصائص يجب اختيارها بدقة, ويمكننا أن
نستعين بالجداول للترتيب

· List & Menu يضاف هذا الأمر من لوح العناصر Form, وتستخدم لتمكن المستخدم لعمل خيار واحد من بين العديد من الخيارات

وتستخدم
List عندما نريد التحكم في عدد الخيارات التي نريد التحكم بعرضها بالقائمة
حيث يمكننا تحديد ارتفاع هذه القائمة وعندما يزداد عدد الخيارات التي نقوم
بإضافتها فيظهر شريط تمرير على الجانب, وتمكننا القائمة List من عمل عدة
اختيارات في وقت واحد.

أما Menu فتستخدم عند عمل خيارات محدودة أي
لاختيار عنصر واحد فقط ولاضافة الخيارات للقائمة نضغط على المفتاح List
value فنقوم بكتابة النص الذي نريد اظهاره داخل القائمة في حقل الـ item
lable وفي الحقل value نقوم بكتابة القيمة التي سترسل إلى السيرفر.

Radio
Buttons & check boxes وتستخدم لتسهيل عملية الاختيار اثناء ملىء
نموذج البيانات والفرق بينهما هو في طريقة العمل فالـ radio buttons
تستخدم لاختيار خيار واحد من بين عدة اختيارات اما check boxes فتسمح
فاختيار عدة خيارات وذلك باختيار المربع المطلوب
لعمل الـ radio
buttons نقوم باختياره من لوح الاوامر forms ويجب اعطائه الخصائص المناسبة
فيجب ادخال اسم معين في حقل الاسم ضمن مربع الخصائص, والكتابة في الحقل
check value القيمة التي سترسل إلى السيرفر, واختيار الوضعية الافتراضية
لمربع الاختيار (ويجب الانتباه إلى انه يجب إعطاء الاسم ذاته إلى جميع
مربعات الاختيار حتى يتم ادراجهم في نفس المجموعة التي سيتم الاختيار
منها).

إنشاء مفاتيح نماذج البيانات وتستخدم للتحكم في العمليات
التي تتم على نماذج البيانات ويمكننا استخدام هذه المفاتيح لارسال
البيانات التي قام المستخدم بادخالها في النموذج إلى السيرفر, كما تستخدم
مفاتيح نماذج البيانات لاعادة حقول النماذج إلى الوضعية الافتراضية أو
استخدامها بمهام أخرى يتم تعريفها بكتابة كود معين مثل جافا سكريبت (
ويمكن إنشاء مفتاح معين وذلك عن طريق إدراج صورته من لوح الاوامر forms
وبالتالي يجب كتابة الامر بالجافا اسكريبت ).
16. بعد ان قمنا
بانشاء نموذج البيانات وادراج الحقول بداخله يتبقى ان نقوم ببعض الخطوات
للتاكد من ان البيانات التي يقوم المستخدم بادخالها تتم بشكل سليم, كأن
يكون قد ادخل عنوان البريد الالكتروني بالصيغة الصحيحة, ويتم ذلك عن طريق
الأمر Validate form من Behaviors inspector التي نصل إليها عن طريق الـ
Launcher ثم نضغط على form من الشريط Tag selector لاختيار كل اماكن
الادخالات , ومن اللوحة Behaviors نضغط على المفتاح + لاظهار اوامر التحكم
ونختار الامر validate form ثم يتم اختيار خصائص كل حقل بيانات بحسب اسمه
من القائمة named field .

17. الإطارات: تستخدم الاطارات
Frames لتخطيط صفحات الويب وتقسيمها إلى عدة أجزاء, وبهذه الطريقة نستطيع
ان نفتح عدة صفحات في نفس النافذة أو بالاحرى في اطار واحد مع ابقاء
الاطارات الأخرى على حالها, ويتم تنسيق تلك الاطارات معا بما يسمى frame
set حيث يتم عن طريقه تعريف التركيب الداخلي والخواص والمعلومات اللازمة
عن هذه الصفحات مثل عدد الاطارات التي ستظهر في هذه الصفحة وابعاد
الاطارات وملف المصدر الذي يتم فتحه داخل كل إطار والعديد من البيانات
الأخرى, ولا يتم عرض Frame set داخل المتصفح لأنه عبارة عن ملف تعريف لحفظ
بيانات عن كيفية عرض الاطارات داخل المستند, أما الاطارات Frames فهي
عبارة عن مناطق معرًّفة داخل المستند وكل اطار في الصفحة يستخدم لعرض صفحة
html, وللبدء بعمل إنشاء الاطارات نختار من لوحة العناصر التفرع Frame
فنجد عدة مجموعات من الاطارات الجاهزة نبدأ بالانشاء عن طريقها حيث يمكننا
التعديل عليها ايضا, ولاختيار أحد الاطارات نقوم بالضغط أولا على الزر
alt من لوحة المفاتيح ثم الضغط على الاطار الذي نريد اختياره ومن ثم نحدد
خصائص هذا الاطار عن طريق مربع الخصائص الذي يظهر بالضغط على ctrl + f3.
ويجب الانتباه إلى عملية الحفظ لأن البرنامج يقوم بحفظ كل اطار في ملف
مستقل, ونستطيع ان نعرف أي اطار يقوم البرنامج بحفظه الان وذلك بأن
البرنامج يحدد الاطار الذي سيحفظه باطار اسود.

18. أوامر التحكم Behaviors وهي عبارة عن خليط من الأحداث events والأفعال actions

والأفعال
actions هي عبارة عن كود جافا سكريبت لإنجاز مهام معينة أما الحدث
event فهو الشرط الذي يجب أن يحدث لتنفيذ الفعل actions .

وعند
إضافة behavior إلى عنصر من مستند فانه يتم تعيين الفعل action والحدث
event الذي سيقوم ببدء هذا الفعل, ويمكن البدء بتنفيذ عدة أفعال بواسطة
نفس الحدث كما يمكن ترتيب هذه الافعال.

وتستخدم اللوحة behaviors
inspector لإضافة أو لتعديل الاوامر الخاصة بأوامر التحكم behaviors
ولإظهار هذه اللوحة نضغط على ايقونة behaviors من الشريط launcher,
وتحتوي هذه اللوحة على عدة مفاتيح تستخدم لإضافة أو لتعديل أوامر التحكم,
وعند الضغط على المفتاح "+" تظهر قائمة بالافعال actions المتاحة,
والقائمة الفرعية show events for تستخدم لإختيار أوامر التحكم المتاحة
تبعاً للمتصفح.

ومن أوامر التحكم behaviors التي يمكن ان تتحكم في
عرض البيانات داخل الاطارات الأمر set txt of frame ويعمل هذا الأمر
بتغيير محتويات الاطار بمحتويات أخرى يتم تحديدها ككتابة نص معين ضمن هذا
الامر ليظهر عند حدث معين, ويمكن التحكم بالبيانات التي تعرض بداخل الاطار
عن طريق الامر go to url حيث يعمل هذا الامر على فتح مستند آخر في نفس
النافذة أو داخل إطار معين ويتم استخدامه عندما نريد تغيير محتويات عدة
اطارات في نفس الوقت, حيث يعطينا الامكانية لفتح ملف html مختلف في كل
اطار من الاطارات.

19. الطبقات Layers : تستخدم لضبط مواقع العناصر
داخل المستند ويمكن ان تحتوي الطبقات على نماذج أو صور أو كتابات أو غير
ذلك كما يمكن ان تحتوي على طبقات أخرى بداخلها, وبمجرد إدراج العناصر داخل
الطبقات سوف نتمكن من التحكم في ظهورها واختفائها وايضا في ترتيب ظهورها
بالاضافة إلى امكانية تحريك الطبقات باستخدام نافذة الشريط الزمني Time
lines وتستخدم الطبقات في اغلب الاحيان لتصميم وتخطيط المستند وذلك
لمرونتها, ويمكن ان نحول الطبقات إلى جداول بعد الانتهاء من التصميم لكي
يتم عرضها داخل المتصفحات التي لا تدعم الطبقات, ويتم إنشاء الطبقات عن
طريق الامر insert layer من لوح الاوامر common .

الطبقات
المتداخلة Nested layers وهي عبارة عن طبقة يتم رسمها داخل طبقة أخرى وذلك
عن طريق وضع المؤشر داخل الطبقة ومن ثم اختيار الامر layer من القائمة
المنسدلة insert ويمكننا الرسم مباشرة داخل الطبقات دون الحاجة لاستخدام
القائمة المنسدلة insert ولكن أولا يجب تعديل خاصية في البرنامج وذلك عن
طريق فتح القائمة المنسدلة edit ومن ثم اختيار preferences ومن ثم اختيار
layers ومن ثم تفعيل المربع nesting.
خواص الطبقات: عند اختيار أي
طبقة يظهر عندنا خواص جديدة في لوح الخصائص ومن اهم هذه الخواص هي الخانة
id وتستخدم لادخال اسم للطبقة وهذا يفيدنا عند الكتابة في لغات البرمجة
كجافا سكريبت, والخانة left و top تستخدم لتعيين المسافة بين الطبقة
والطرف الأعلى والأيسر للصفحة,
ومن Bg image يمكننا اختيار صورة
لخلفية الطبقة, والخانة clip تستخدم لتحديد مساحة معينة للظهور من الطبقة,
والخانة Z-index تستخدم لاعطاء الطبقة رقم يرتب ظهورها داخل المتصفح
بالنسبة للطبقات الأخرى وهذه القيمة يمكن ان تكون موجبة أو سالبة,
وبالنسبة للطبقات المتوضعة فوق بعضها في المستند فان الطبقات التي لها
Z-index صغيرة ستظهر خلف الطبقات التي z-index كبيرة.

ويمكننا التحكم بظهور الطبقات واختفائها عن طريق اللوح layers panel "اضغط F2 اذا لم يكن ظاهرا"

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

والخانة
overflow تستخدم لتحديد ما سيحدث للطبقة في حال كبر المحتويات الموجودة
بداخلها عن ابعاد الطبقة, أما الخيار Tag فيستخدم لتحديد نوع العنصر
لانشاء الطبقة .

الشريط الزمني Timeline يمكن من خلاله عمل تحريك
للطبقات بما تحتوي من عناصر, كما يمكن تغيير الملف المصدر لصورة معينة أو
تشغيل أمر تحكم behavior بعد فترة زمنية معينة ولا يمكن تحريك صورة أو نص
داخل المستند إلا من بعد وضعهم داخل الطبقات, وتعتمد المتصفحات هذه الميزة
ابتداء من الإصدار الرابع, ولإظهار لوحة التحكم time line نضغط على
الاختصار shift + F9 .

ولعمل حركة لطبقة ما نقوم بوضع الطبقة في
المكان الذي نريد البدء منه, ثم نضيف الطبقة إلى احد قنوات الحركة في
الشريط الزمني وذلك بالضغط والسحب للطبقة ووضعها في الشريط الزمني, فيتم
إضافة شريط يحمل اسم الطبقة التي قمنا باضافتها إلى قناة الحركة, ونلاحظ
انه قد تم اضافة key frame في اول القناة وآخرها, ولإنشاء الحركة نضغط على
مفتاح الحركة الأخير ثم نقوم بسحب الطبقة ووضعه في المكان الذي نريد,
فنلاحظ انه قد تم إضافة خط يعبر عن مسار الحركة, ويمكننا التحكم بالحركة
باستخدام اكثر من شريط زمني ويتم إضافة الأشرطة الزمنية بالضغط على الزر
اليميني واختيار add time line.

ويوجد أيضا خيارات أخرى كـ قنوات
الحركة, وتستخدم لعرض الطبقات والصور التي يطبّق عليها التحريك داخل
المستند, ولدينا أيضا شرائط التحريك Animation bar التي تستخدم لتحديد
المدة الزمنية أو فترة عرض كل عنصر داخل الشريط الزمني وكل قناة من قنوات
الحركة يمكن أن تحتوي على اكثر من عنصر مختلف.

ويمكننا ايضا اضافة
الحركة إلى شريط التحريك بالشكل الذي نريد, فمثلا اذا اردنا ان تكون
الحركة لطبقة ما بشكل منحني بدل من ان تكون بشكل مستقيم نقوم باضفة الحركة
key frame إلى شريط الحركة عن طريق الزر الايمن للماوس , كما يتم ذلك عن
طريق الضغط على المفتاح Ctrl وتعيين المكان الذي نريد على شريط الحركة,
ولنجعل الحركة بشكل منحني نختار مفتاح الحركة الذي اضفناه ثم نضغط مع
السحب للطبقة في الاتجاه الذي نريده فنلاحظ تحول مسار الطبقة من مستقيم
إلى منحني.

اما قناة التحكم Behaviors وتستخدم لإظهار أوامر التحكم
behaviors التي يجب تشغيلها عند وقت معين, ويمكن تعديلها بالضغط عليها
ضغطا مزدوجا.

وتستخدم الخانة FPS “Frame per second” لتحديد معدل
العرض أو عدد اللوحات التي يتم عرضها في الثانية, والخانة auto play
يستخدم للعرض المباشر عند تحميل الصفحة داخل المتصفح, والخانة loop وهي
لاستمرار العرض بدون توقف.

حالة ظهور الطبقات:Show - Hide layers
عندما
نريد اخفاء جميع الطبقات الفرعية في المستند ما عدا الطبقة الفرعية التي
نمر عليها في مؤشر الماوس نقوم بالتالي, نختار الطبقة الرئيسية للطبقة
الفرعية التي نريدها ان تظهر في حال مرور الماوس عليها ثم نفتح لوح
الأوامر Behavior inspector ونضغط على الإشارة + لإضافة الأمر

show
hide layers ومن الجزء named layers نقوم باختيار الطبقة الفرعية التي
نرغب في ان تظهر عند مرور الماوس عليها ونعطيها الامر show وبعدها نقوم
باخفاء hide باقي الطبقات الفرعية فقط

وبعد الانتهاء من ذلك نقوم بغيير الحدث الذي سينفذ فيه التطبيقات التي قمنا بها سابقا إلى

on mouse over وبذلك نكون قد اخفينا كل الطبقات الفرعية في المستند ما عدا التي تمر عليها الماوس,

ولكن
يوجد مشكلتين في ذلك وهي انك عندما تفتح المتصفح فان القوائم الفرعية
ستكون ظاهرة إلى حين تحريك الماوس إلى احدى القوائم الرئيسية فيبدأ الأمر
hide الذي قمنا به سابقا بالتفعيل, والحل لهذه المشكلة هي فتح اللوحة
layers واخفاء جميع الطبقات الفرعية عن طريق العين, أما المشكلة الثانية
وهي انك من بعد تحريك مؤشر الماوس من فوق القائمة الرئيسية إلى أي جزء آخر
من الصفحة فان آخر قائمة فرعية ستظل ظاهرة, ولحل تلك المشكلة: هي بانشاء
طبقة شفافة جديدة أسفل الطبقات الفرعية وتكون ممتدة بشكل عرضي بحيث تمتد
اسفل كل الطبقات الفرعية, ثم نقوم بادراج أمر show hide من اللوح
behavior ونقوم باخفاء جميع الطبقات الفرعية, ثم نعين الحدث on mouse
over.

ومن الجدير بالذكر أننا نستطيع أن نقوم بتحويل الـ
layers إلى جداول وبالعكس, لأن ذلك يمكن أن نحتاجه عند العمل مع متصفحات
لا تدعم استخدام الطبقات كما في الاصدار الثالث.

وهناك أنواع من
المستندات لا تسمح لك بأن تحول الطبقات إلى جداول وهي التي تكون مبنية على
نماذج سابقة الاعداد template , كما لا يمكن تحويل المستند الذي يحتوي على
طبقات متداخلة nested layer حيث انه لا يمكن ان يوجد في الجدول خليتان
متداخلتان, وطريقة التحويل إلى جداول وبالعكس هي بفتح القائمة المنسدلة
modify واختيار convert .

النماذج Template : يمكن عمل النماذج عن
طريق حفظ المستند كصيغة نموذج ويجب وضعه داخل المجلد template وعدم تغيير
مكانه, والنماذج تكون غير قابلة للتعديل, إلا عن طريق تحديد المناطق التي
نريدها وذلك عن طريق فتح النافذة Assets ومن ثم فتح النموذج عن طريقها
بضغط المفتاح edit ومن ثم نضغط على الصورة أو نحدد المكان الذي نريد
التعديل فيه, وعن طريق القائمة السريعة نأخذ الأمر
new editable region ونعطيها اسم معين.

المكتبة
library : حيث أنها تمكننا من حفظ عنصر ما فيها ومن ثم ادراجه في أي مستند
آخر, ونستفيد من هذه الخاصية هي اننا عندما نعدل الملف الاساسي في المكتبة
فانه سوف يتعدل في جميع المستندات المستخدم فيها, ونصل إلى هذه الخاصية عن
طريق النافذة Assets .
تنسيق الكتابات باستخدام HTML styles : تعطينا
هذه الخاصية امكانية حفظ تنسيقات للكتابات بحيث يمكننا تطبيقها مرة ثانية
في نفس المستند أو في مستندات أخرى, وتتم تلك العملية عن طريق فتح النافذة
HTML styles من الشريط Launcher ثم الضغط في أي مكان في المستند ثم اختيار
الأمر new style من أسفل النافذة Html Styles فيظهر لنا المربع الحواري
Define HTML style ونقوم بعمل الخيارات التي نريدها كأن نختار هل نريد
التطبيق على النص الذي حددناه أم على الفقرة بالكامل وذلك من Apply to,
ويستخدم الجزء when applying لتحديد ما سيتم عمله عن تطبيق التنسيق على
الكتابات أو الفقرة المختارة داخل المستند, فعند اختيار add to existing
style فانه سوف يتم تطبيق التنسيق الجديد دون حذف التنسيق الموجود على
النص مسبقا ولكن ان وجد تشابه بين الخصائص فان الأولوية للتنسيق الجديد,
اما clear existing style فانه سوف يتم حذف أي تنسيق قديم ووضع الجديد
بدلا منه, وهكذا يتم اختيار التنسيقات الأخرى. واذا صادفنا في احد
المستندات تنسيق ما لنص أو لفقرة وأردنا تطبيق هذا التنسيق في اماكن أخرى
فما علينا سوى تحديد ذلك النص أو الفقرة ثم اختيار new style فيظهر لنا
مربع حواري ويوجد فيه جميع التنسيقات المطبقة على ذلك النص فعندها نغير
الاسم فقط ونقوم بحفظه وبعد ذلك نستطيع تطبيق ذلك التنسيق بمجرد الضغط
عليه.
تنسيق الكتابات باستخدام CSS styles ////Csascading style
sheet: وهي عبارة عن مجموعة من الخواص أو التنسيقات التي تستخدم في التحكم
بجزء معين من النص داخل المستند الواحد أو في التحكم بخواص الكتابات لعدة
مستندات في نفس الوقت وهي عبارة عن ملفات نصية تحتوي على اساليب ومعايير
خاصة بتنسيق الكتابات وتتميز CSS style عن HTML Styles بانه يمكن ربطها
بعدة مستندات في نفس الوقت كما انه بمجرد تعديل هذا التنسيق فانه سيتم
تعديله في جميع الملفات المرتبطة بهذا التنسيق تلقائيا (خاصية CSS styles
لا تعمل مع اصدارات المتصفحات التي هي قبل الاصدار الرابع).
وتوجد
ثلاثة انواع من CSS Styles الأول external /linked/ style sheet وفي هذه
الطريقة يتم كتابة التنسيقات والمعايير في ملف نصي منفصل وياخذ هذا الملف
الامتداد CSS ولتطبيق مثل هذه الملفات على المستند فاننا نفتح النافذة CSS
styles الموجودة في الـ Launcher ثم نضغط على attach style sheet ونختار
الملف الذي نريد تطبيقه, واذا اردنا التعديل في خاصياته فاننا نستطيع ذلك
عن طريق الملف ذاته وذلك بفتحه ببرنامج الـ note pad أو عن طريق النافذة
CSS styles وهي على النحو التالي: نضغط على edit style sheet ومن ثم نختار
الملف الذي نريد تعديله ومن ثم نختار التنسيق الذي نريد التعديل فيه.

الثاني
Embedded style sheet وفي هذا النوع يتم كتابة الرموز والمعايير الخاصة
بالتنسيق داخل المستند نفسه وهي على النحو التالي: نضغط على new style من
النافذة CSS style فيظهر مربع حواري يمكننا فيه من عمل ثلاثة أنواع مختلفة
وهي

Custom style (class)- يستخدم لتطبيق تنسيقات مختلفة على بعض
الفقرات في المستند دون الفقرات الأخرى, ولانشائه نضغط على المفتاح new
style ومن ثم نختار (class) ونختار من define in فيما اذا كنا نريد حفظ
هذا التنسيق ضمن هذا المستند فقط أو في حفظه في ملف منفصل لنتمكن من
استخدامه عدة مرات, ومن ثم نختار التنسيقات التي نريدها, ونجد بجانب بعض
التنسيقات العلامة * وتلك العلامة تعني ان هذا التنسيق ربما لن يظهر في
Explorer .

Redefine HTML Tag- يستخدم لإعادة تنسيق أي عنصر من
عناصر اللغة HTML المستخدمة لتنسيق المستندات ولا ننسى اختيار الـ Tag
الذي نريد أن نعدل عليه, ونختار الخانة this document only ليتم حفظ
التنسيق الجديد داخل المستند.

- Use CSS Selector يستخدم لتنسيق تركيب معين من تركيبات اللغة HTML .

الثالث inline style هذه الطريقة لا يتم انشاؤها داخل البرنامج ولكن يجب كتابة الكود الخاص بها داخل الجزء body الخاص بالمستند.

التحكم
في خلفية المستند باستخدام CSS :إن تنسيق العناصر بلغة الـHTML محدود
الامكانيات ولذلك نستخدم CSS لتنسيق العناصر لأنها توفر درجة تحكم أعلى
ودقة أكبر في تنسيق العناصر, فعلى سيبل المثال اذا أردنا اضافة صورة
للخلفية فان الطريقة هي وضع صورة في خصائص الصفحة والنتيجة ستكون صورة
مكررة في خلفية الصفحة ولا يوجد أي تنسيقات لها, أما عن طريق CSS فالطريقة
هي أن تحدد الـ body ثم تختار new style ومن ثم نختار redefine html tag
ونختار this document only ثم ok ثم نختار background من القائمة ونختار
التنسيقات التي نريدها حيث أننا نستطيع أن نوسّط الصورة وبدون تكرار كما
يمكننا تثبيتها في المنتصف وغير ذلك.
التحكم بالطبقات والكتابات بـ
CSS: تمكننا CSS من التحكم بالكتابات والطبقات بشكل دقيق, مثال: عند
اختيارنا لجزء معين من الكتابات داخل فقرة فاننا لا نستطيع تعيين خلفية له
عن طريق أوامر لغة الـ HTML , بينما يمكننا عمل ذلك عن طريق الـ CSS ولعمل
ذلك نقوم بالضغط على new style من نافذة الـ CSS ثم نختار Make custom
style ولاننسى أن نعطيه اسماً, ثم ok فيظهر مربع نختار منه الـ Background
ونعطي للخلفية اللون الذي نبغاه, ويمكننا أيضا إعطاء خيارات أخرى غيرها//
ويجب ان نتذكر بان الخيارات التي بجانبها علامة * يمكن أن لا تظهر في
المتصفح//, ثم ok فيتكون لدينا تنسيق جديد يظهر في نافذة الـ CSS فنقوم
بتحديد النص الذي نريده ونضغط على اسم التنسيق الذي قمنا بانشائه من
النافذه . وكذلك يمكن ان نقوم بتغيير المسافات بين الحروف و الأسطر
والكلمات بنفس الطريقة السابقة ولكن باختيار Block بدلا من Background .
والآن
يمكننا أيضا عن طريق الـ CSS عمل إطار تحديد Border للطبقات كما يمكننا
تلوين هذا الاطار بألوان مختلفة وتعيين سماكته والطريقة هي نفس الطريقة
السابقة ولكن باختيار Border.

كما تمكننا الـ CSS من تغيير شكل
المؤشر عند المرور على عنصر معين داخل المستند, والطريقة هي نفس الطرق
السابقة ولكن باختيار Extension .

استخدام المتصفحات لاختبار
الموقع: قبل نشر الموقع يجب التأكد من أنه يعمل بشكل سليم على المتصفحات
شائعة الاستخدام كما يجب التأكد من ان الارتباطات تعمل بشكل سليم, وقبل
البدء بهذه الاختبارات يجب اولا ان نكون قد قمنا بتعريف الموقع المحلي
Local site //كما هو مشروح في المستوى الأول//, ومن القائمة file نطلب
الامر check target browsers ونعين من المربع احد هذه المتصفحات التي نريد
ان نقوم بالفحص عن طريقها ونضغط ok فيظهر عندنا تقرير يتضمن الأخطاء
الموجودة في هذه الصفحة او بعض الميزات التي لا يدعمها هذا المتصفح, فيظهر
سبب الخطأ والى جانبه رقم سطره والكود الذي توجد فيه المشكلة, ولاجراء هذا
الاختبار على مجلد داخل الموقع أو على الموقع المحلي Local site نقوم بفتح
الموقع بالضغط على show site من الشريط launcher فنختار المجلد الرئيسي
للموقع لاختبار جميع صفحاته ثم نأخذ الأمر Check target browsers.
اختبار
الارتباطات داخل الموقع: يستخدم الأمر check links للبحث عن الروابط
المنفصلة في الموقع أو في جزء منه,//نصل لهذا الأمر عن طريق القائمة
ملف//, كما يستخدم هذا الأمر لإعطاء تقرير عن الملفات غير المرتبطة مع أي
مستند html داخل الموقع بالكامل, ويختبر البرنامج الارتباطات الداخلية
فقط.
تعديل الارتباطات: على الرغم من أن البرامج يقوم بتحديث الروابط
للمستندات التي نقوم بتغيير موضعها أو تغيير اسمها إلا أننا نحتاج أحيانا
للقيام بتعديل يدوي على الروابط, مثال: نريد تغيير صفحة بأخرى, فنقوم بطلب
show site من الشريط Launcher ثم نختار القائمة site ثم change link site
wide فيظهر لنا مربع نكتب فيه اسم المستند القديم الذي نريد استبداله,
والخانة الثانية نكتب فيها اسم المستند الجديد, وبذلك أيضا يتم تلقائيا
تعديل الارتباطات في كل الصفحات تبعاً للتعديل الجديد. وبنفس الطريقة يمكن
استبدال البريد الالكتروني بآخر جديد, فنكتب في الخانة الأولى من المربع
الحواري عنوان البريد القديم بالشكل التالي //mailto:
info@homearab.com// ونكتب العنوان الجديد بنفس الصيغة السابقة في المربع
الحواري الآخر.
يعطينا هذا البرنامج امكانية فتح احدى صفحتين بحسب
المتصفح الذي نستخدمه فاذا لم تكن الصفحة الأولى متوافقه مع المتصفح فانها
ستفتح الصفحة الثانية, ويتم ذلك عن طريق الأمر behavior ونختار check
browser .
استخدام العناصر Meta Elements : تستخدم لغرضين الأول هو
تقديم معلومات عن صفحات معينة لكي تتعرف محركات البحث على شبكة الانترنت,
والغرض الثاني هو ارسال أوامر للمتصفح لانجاز مهام معينة مثل اعادة تحميل
أو عمل تحديث أو استبدال الصفحة الحالية بصفحة اخرى بعد فترة زمنية معينة
او منع المتصفح من عمل نسخة من الصفحة الحالية داخل الكاش على جهاز
المستخدم, ويوضع العنصر Meta داخل الراس head للمستند, وتوجد طريقتان لعمل
العناصر meta إما بفتح القائمة المنسدلة insert ثم اختيار احد العناصر
الموجودة head tags او فتح لوح الأوامر واختيار التفرع head ثم نضغط
insert meta, فيظهر مربع حواري ومن attribute نحدد منه اذا كان عنصر meta
يحتوي على معلومات وصفية عن الصفحة الحالية وفي هذه الحالة نختار name, أو
أنه يحتوي على معلومات خاصة بارسال أوامر الى السيرفر من خلال المتصفح وفي
هذه الحالة يتم اختيار http equivalent, وفي الخانة value نقوم بتحديد نوع
البيانات المستخدمة مع هذا العنصر وهناك بعض القيم المعرفة داخل البرنامج
والتي لها شريط property inspector منفصل مثل (key word, refresh,
description), وفي الخانة content يتم كتابة المعلومات المرتبطة بالقيمة
التي تم تحديدها في الخانة value, وعلى سبيل المثال اذا اردنا اعطاء امر
للمتصفح navigator بعدم حفظ الصفحة الحالية بالكاش عندما يقوم الستخدم
بعرض الصفحة عن طريق هذا المتصفح فنقوم باختيار http equivalent من الخانة
attribute وفي الخانة value نكتب pragma وفي الخانة content نكتب no cash
ثم ok فيتم اضافة الكود الخاص لهذا العنصر داخل الجزء head.
أما
بالنسبة لـ key word & description تستخدمان لزيادة عدد زوار الموقع
الذين يقومون بعمليات البحث عن طريق محركات البحث والعثور على هذا الموقع
الذي يحتوي على كلمات معينة سنقوم باضافتها باستخدام العنصر key word,
ولاضافة الـ key words نضغط عليه من لوح الأوامر head فيظهر مربع نكتب فيه
كلمات تصف الموقع الذي قمنا بإنشائه ومن الافضل ان تكون كلمات محدودة
ومختارة بعناية وذلك لأن بعض محركات البحث لها عدد أحرف معين.

ولعمل الـ description نضغط عليه من لوح الأوامر head فيظهر مربع نكتب فيه وصف موجز للصفحة.

والآن
لعمل العنصر refresh ووظيفته اعادة تحميل أو تحديث الصفحة الحالية بعد
فترة زمنية محددة, وعن طريقه يمكننا عمل slid show or animation أو تغيير
المحتويات المعروضة داخل المتصفح , وعلى سبيل المثال سنعمل الآن slide
show لعرض ثلاثة ملفات على التوالي وكل ملف من هذه الملفات يحتوي على صورة
بداخله واردنا عرض هذه الملفات بتتابع كل ثانيتين, فنضغط على الأمر
refresh من لوح الأوامر ومن المربع delay نكتب الفترة الزمنية, ومن الخانة
refresh this document سيتم اعادة تحميل نفس الصفحة بحسب الوقت الذي
حددناه سابقا, وعندما نريد فتح مستند آخر بعد الوقت الذي حددناه فاننا
نقوم بتحديد مساره من الخانة go to URL كما فعلنا سابقا عن طريق الأمر
refresh من لوح الأوامر head, ونكرر تلك العملية في حال أننا نريد لفتح
ملفات أخرى وبذلك نحصل على slid show .

في النهاية يجب ان نقوم باعداد الموقع Remote site لتحميله على السيرفر .
تم بعونه تعالى

منقول عن

http://lessons.bdr130.net/2264.html


---------------------------------------------------


عمل موقع ويب في دريم ويفر

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

1. لعمل موقع ويب في دريم ويفر اتبع الآتي:
Site>Manage Sites

2. من النافذة Manage Sites اضغط New، ومن القائمة المنسدلة اختر Site.
ملاحظة: في النسخة الأقدم من MX سيكون ذلك هكذا: Site>New Site

3. لديك في أعلى النافذة Site Definition لديك خياران Basic و Advanced سنختار هنا Basic.

4. في مربع الإسم أكتب اسم موقعك وسيكون عنوان موقعنا هنا My Web.

5. اضغط Next.

6. الآن سيسألك إذا ما كنت تريد استخدام لغة برمجة معينة في حالتنا طبعا لن نستخدم ذلك اختر No.

7. اضغط Next.

8. في هذه النافذة يعطيك خياران:

الأول: عمل الموقع محليا ثم رفعه إلى سيرفر

الثاني: عمل الموقع على السيرفر حالا

9. اختر الخيار الأول لأننا سنتعلم كيف نرفع الموقع لاحقا.

10. واختر أين ستضع مجلد الموقع، في حالتنا سنستخدم المجلد الذي قمنا بإنشاءه وهو myweb، وهذا عندي:
D:My Documentsmyweb

11. اضغط Next.

12. كيف تتصل بموقعك يعطيك خيارات:

None لا شيء.

FTP عن طريق بروتوكول FTP.

Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.

RDS إذا كنت تتصل بموقعك عن طريق RDS.

SourceSafe Database إذا كنت تتصل بموقعك عن طريق SourceSafe Database.

WebDAV إذا كنت تتصل بموقعك عن طريق WebDAV.

a. في حالتنا سنستخدم FTP (لمن لديه موقع يدعم الـFTP) وعليه يجب ملء البيانات التي سيطلبها البرنامج كما تعطيك الشركة المستضيفة.
b.
وأيضا سنستخدم Local/Network لرفع موقعنا على سيرفر موجود في الجهاز (لمن
ليس لديه موقع) لكن أيضا في حالتنا سنخزنه في مجلد آخر بجانب الأول باسم
lacal_myweb:
D:My Documentslacal_myweb

13. اضغط Next

14.
سيسألك عما إذا كنت تريد عمل دخول وخروج للملف اختر No هذه الوظيفة مهمة
لمن يعمل مع مجموعة على الإنترنت للتأكد من عدم دخول أكثر من شخص للملف
الواحد.

15. اختر No كما قلنا و اضغط Next

16. سيعرض لك معلومات موقع اضغط Done

17. ثم Done

18. ماذا لو أننا نريد تعديل بعض المعلومات في موقع الوب الذي أنشأناه؟

19. لعمل ذلك إذهب إلى Site>Manage Sites ومنها حدد My Web إذا كان هناك أكثر من موقع.

20. اضغط على زر Edit

21. عدل المعلومات المطلوبة (في حالتنا لن نعدل على الموقع شيء).

22. ثم Done


نم مهاراتك في استخدام دريم ويفر

لنجر بعض التمارين السريعة لننم مهارتنا في استخدام هذا البرنامج ولنشعر بالحرية عند تحرير صفحات مواقعنا فيه.
لنقم
بعمل صفحة في موقع الوب الذي أنشأناه، نغير خصائصها، ونضع فيها بعض
العناصر من كتابة وصور، لحظة! لا تنشئ الصفحة كما تعلمت سابقا.. سنتعلم
طريقة جديدة، لنتابع الخطوات التالية:
1. من نافذة الملفات Files تأكد أنك في الموقع المطلوب (My Web).
2. وهناك اضغط بيمين الفأرة في أي مساحة فاضية ومن القائمة المنسدلة اختر New File
3. سمها page.htm
4. افتحها عن طريق النقر المزدوج عليها، أو بز الفأرة اليمين ومنها Open
5. أسفل البرنامج هل ترى لوحة الخصائص؟ هناك نعم.. اضغط على Page Properties
6. غير المعلومات حسب الصورة التالية:



7. ثم OK
8. أكتب أي نص بعنوان كما قمنا به سابقا
9. حدد العنوان وغيره إلى H2 كما تعلمت سابقا.
10. حدد النص وغير اللون إلى #006666، والحجم إلى 14 px، والنوع إلى Times New Roman
11. أسفل النص ضع الصورة التي قمت بوضعها في صفحة index.htm ولكن هذه المرة قم بنسخها إلى مجلد images داخل مجلد myweb.
هذا المجلد لحفظ الصور بداخله.
12. احفظ الصفحة واستعرضها.. ثم أغلقها