أهم الأوامر الموجودة في برنامج دريم ويفر وكيفية عمل الموقع
فيظهر مربع حوار ندخل فيه اسم لهذه الصفحة ويكون هذا الاسم للدلالة على عمل الصفحة حيث يستفاد منه في محركات البحث يمكننا أن نختار اللون للصفحة أو وضع صورة لأرضية المستند واختيار لون النص ولون الروابط التشعبية ولون الروابط التي قمنا بزيارتها . والمربع Margin لتعيين أبعاد الصفحة والأسهل تعيين الأبعاد من شريط window size وذلك في الصفحة الرئيسية للبرنامج . والأمر tracing image هو لوضع صورة استرشادية فقط لا تظهر في المتصفح.
الروابط: ولها أنواع
· الروابط الداخلية 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
وهو عبارة عن شريط يحتوي على عدة مفاتيح للتنقل بين أجزاء وصفحات الموقع المختلفة
وتتكون هذا الشريط من مجموعة من الصور التي يتغير مظهرها حسب استخدام المستخدم
ولإنشائه:
نضغط في الصفحة في المكان الذي نريد إدراج الشريط navigation bar إليه نضغط على الأمر insert navigation bar من لوحة الأوامر common
فيظهر مربع حوار ثم نقوم بإدخال اسم المفتاح أو العنصر الأول في الشريط ويظهر في الخانات الأخرى مسار ملفات الصور التي قد تم إنشاءها مسبقا والتي ستظهر تباعا لما يلي
في الخانة الأولى up image وهي الصورة التي تظهر على المفتاح في وضعه الطبيعي قبل الضغط عليه بالمؤشر
في الخانة الثانية over image وهي الصورة التي ستظهر على المفتاح عند تحريك المؤشر فوقه
وفي الخانة الثالثة down image وهي الصورة التي ستظهر عند الضغط على المفتاح
وفي الخانة الرابعة over while down image وهي الصورة التي ستظهر عند تحريك المؤشر على المفتاح بعد الضغط عليه
وليس من الضروري استخدام جميع الخانات السابقة.
وهي طريقة لتعيين جزء محدد من الصورة وذلك لأجل ربطة بصفحة أخرى أو موقع آخر
ويتم ذلك عن طريق الضغط على الصورة فيظهر في الخصائص مربعات تعطيك إمكانية رسم عدة أشكال هندسية أو حرة وذلك لحديد أي موضع من الصورة وتدعى هذه الأدوات hotspot
وبعد تحديد الموضع يظهر لنا خصائص جديدة فيجب علينا كتابة اسم ما في الخانة map ويجب أن يكون له علاقة بهذا الموضع , وأيضا يجب الكتابة في الخانة Alt حيث أن هذه الكتابة ستظهر في المتصفح في حال تمرير المؤشر على الصورة , و أخيرا يجب كتابة اسم الصفحة الذي نريد الانتقال إليها في الخانة link
وفي حال وجود عدة أماكن محددة بالـ hotspot فانه يظهر عندنا بعض الخصائص الأخرى كالمحاذاة وغيرها, وهناك بعض الخصائص نأخذها من القائمة السريعة أي الزر اليميني فيجب التنبه لذلك
وتسمى بقوائم القفز وهي عبارة عن قوائم تحتوي على عدة خيارات تستخدم للتنقل بسهولة بين صفحات الموقع
حيث يتم عمل 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 داخل الكود.
<form name="form1" method="post" action="mailto:info@homearab.com">
Method وهي لتحديد الطريقة التي سيتم بها تناول بيانات نموذج البيانات, فالاختيار Post يستخدم لإرسال القيم التي يتم إدخالها في نموذج البيانات عن طريق رسالة, أما Get فيستخدم لإرسال البيانات وقيم نماذج البيانات ملحقة بعنوان الـ URL إلى السير فر, ولا يفضل استخدام الطريقة Get مع نماذج البيانات الطويلة إذ إن العناوين URL محدودة بعدد معين من الحروف فمن الممكن حذف جزء من تلك البيانات, كما يجب أن لا نستخدمها مع البيانات التي تتطلب درجة عالية من السرية كبيانات كروت الائتمان لأن هذه الطريقة غير مؤمنة سرياَ,
كما يجب تحديد نوع البيانات التي سيتم إرسالها إلى السير فر من خلال نموذج البيانات ليتم إرسالها بشكل سليم, ويتم ذلك عن طريق تحديد القيم للخاصية enctype , ونقوم بكتابة هذه الخاصية في الكود في لغة الـ HTML ضمن السطر Form
<form name="form1" method="post" action="mailto:info@homearab.com" enctype="">
وفي نماذج البيانات العادية عندما تكون القيمة الموجودة في الخانة method هي post فان القيمة الافتراضية للحقل enctype هي true أي صحيحة
أما إذا كانت القيمة الموضوعة داخل الخانة action عبارة عن عنوان للبريد الإلكتروني الذي سيتم إرسال قيم نموذج البيانات إليه فانه في الحالة الافتراضية سيتم إرسال هذه القيم ضمن ملف منفصل مرفق مع الرسالة فإذا أردنا إرسال هذه القيم ضمن الرسالة نفسها فنقوم بكتابة text/plain للخاصية enctype
<form name="form1" method="post" action="mailto:info@homearab.com" enctype="text/plain">
15. حقول نماذج البيانات: بعد إضافة العنصر form إلى المستند فانه بإمكاننا البدء في إضافة عناصر نماذج البيانات بداخله إذ لا يمكننا إضافة عناصر نماذج البيانات بدون الـ form ويجب أن تكون الإضافة بداخل العنصر form .
· والآن لإنشاء حقل لكتابة الاسم بداخله نضغط على الأمر insert text field من لوحة الأوامر form ويوجد لهذا الأمر عدة خصائص يجب اختيارها بدقة, ويمكننا أن نستعين بالجداول للترتيب
· List & Menu يضاف هذا الأمر من لوح العناصر Form, وتستخدم لتمكن المستخدم لعمل خيار واحد من بين العديد من الخيارات
وتستخدم List عندما نريد التحكم في عدد الخيارات التي نريد التحكم بعرضها بالقائمة حيث يمكننا تحديد ارتفاع هذه القائمة وعندما يزداد عدد الخيارات التي نقوم بإضافتها فيظهر شريط تمرير على الجانب, وتمكننا القائمة List من عمل عدة اختيارات في وقت واحد.
أما Menu فتستخدم عند عمل خيارات محدودة أي لاختيار عنصر واحد فقط ولاضافة الخيارات للقائمة نضغط على المفتاح List value فنقوم بكتابة النص الذي نريد اظهاره داخل القائمة في حقل الـ item lable وفي الحقل value نقوم بكتابة القيمة التي سترسل إلى السيرفر.
لعمل الـ radio buttons نقوم باختياره من لوح الاوامر forms ويجب اعطائه الخصائص المناسبة فيجب ادخال اسم معين في حقل الاسم ضمن مربع الخصائص, والكتابة في الحقل check value القيمة التي سترسل إلى السيرفر, واختيار الوضعية الافتراضية لمربع الاختيار (ويجب الانتباه إلى انه يجب إعطاء الاسم ذاته إلى جميع مربعات الاختيار حتى يتم ادراجهم في نفس المجموعة التي سيتم الاختيار منها).
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 .
ومن 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 وهي لاستمرار العرض بدون توقف.
عندما نريد اخفاء جميع الطبقات الفرعية في المستند ما عدا الطبقة الفرعية التي نمر عليها في مؤشر الماوس نقوم بالتالي, نختار الطبقة الرئيسية للطبقة الفرعية التي نريدها ان تظهر في حال مرور الماوس عليها ثم نفتح لوح الأوامر 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 .
new editable region ونعطيها اسم معين.
وتوجد ثلاثة انواع من 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 عمل إطار تحديد Border للطبقات كما يمكننا تلوين هذا الاطار بألوان مختلفة وتعيين سماكته والطريقة هي نفس الطريقة السابقة ولكن باختيار Border.
كما تمكننا الـ CSS من تغيير شكل المؤشر عند المرور على عنصر معين داخل المستند, والطريقة هي نفس الطرق السابقة ولكن باختيار Extension .
أما بالنسبة لـ 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 .
تم بعونه تعالى
|
الدرس التالي |