المساعد الشخصي الرقمي

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


fastgroup
07-02-2007, 12:06 PM
ما تلميح الشاشة؟
إن تلميح الشاشة (والمعروف أيضًا بتلميح الأدوات) هو إطار صغير منبثق يحتوي على نص يكون مرئيًا عند وضع المؤشر على منطقة معينة، ثم يختفي عند نقل المؤشر بعيدًا عن تلك المنطقة.

تعد تلميحات الشاشة طريقة جيدة لتوفير مزيد من المعلومات دون أن تؤدي لتكدس الشاشة. وهي عادًة ما تصف أو توفر مزيدًا من التفاصيل حول الكائن (كلمة أو زر أو صورة، على سبيل المثال) الذي يتحرك المؤشر فوقه.

ترميز تلميحات الشاشة يدويًا
لقد كانت تلميحات الشاشة قبل FrontPage 2003 تتطلب ترميزًا أو تشفيرًا يدويًا. على سبيل المثال، لإنشاء تلميح شاشة باستخدام JavaScript، فقد تحتاج لإنشاء وظيفتين في رأس المستند: واحدة لعرض التلميح والأخرى لإخفائه. وكنت ستحتاج عندئذٍ إلى ترميز ارتباط تشعبي في الجزء الذي تريد ظهور تلميح الشاشة فيه والذي كان يتضمن حدث "onmouseover" وكذلك حدث "onmouseout".

إنشاء تلميحات الشاشة في FrontPage 2003
باستخدام ميزة "الطبقات" بالاقتران مع جزء المهام "السلوك" في FrontPage 2003، يمكنك إضافة تلميحات شاشة إلى صفحة ويب دون أن تعرف أي رمز أو برنامج نصي.

يمكنك إنشاء تلميح شاشة بسرعة بواسطة إنشاء طبقة على صفحة ويب الخاصة بك، ثم إدراج نص في الطبقة. يمكنك التحكم في إمكانية رؤية الطبقات من خلال جزء المهام طبقات، والأسلوب المقترن بتلك الطبقة من خلال جزء المهام أساليب.

إنشاء نموذج لتلميح الشاشة
لغرض التوضيح، سنقوم بإنشاء طبقة تحتوي على تعريف لكلمة. عند وضع المؤشر فوق الكلمة، سيتم عرض التعريف. عند تحريك المؤشر بعيدًا عن الكلمة، سيتم إخفاء التعريف.

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

http://www.alastorh.com/vb/attachment.php?attachmentid=671&stc=1&d=1183376916

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

http://www.alastorh.com/vb/attachment.php?attachmentid=672&stc=1&d=1183376916

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

http://www.alastorh.com/vb/attachment.php?attachmentid=673&stc=1&d=1183376916

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

http://www.alastorh.com/vb/attachment.php?attachmentid=674&stc=1&d=1183376916

تنسيق الكلمة كارتباط تشعبي
إننا نريد أن يصبح التعريف مرئيًا عند وضع المؤشر فوق الكلمة تلميح الشاشة. لإعلام المستخدمين بأن شيئًا ما سيحدث إذا تم وضع المؤشر فوق الكلمة، فإننا سنقوم بتنسيق الكلمة كارتباط تشعبي.

لإنشاء ارتباط تشعبي
حدد الكلمة تلميح الشاشة بالنقر المزدوج فوقها.
انقر بزر الماوس الأيمن فوق الكلمة المحددة، ثم انقر فوق ارتباط تشعبي.
في مربع الحوار إدراج ارتباط تشعبي ، في مربع العنوان ، اكتب javascript:; ثم انقر فوق موافق. يجب أن تكون الكلمة تلميح الشاشة الآن منسقة كارتباط تشعبي.
تعيين السلوك
يؤدي تعيين السلوك إلى عرض layer1 عند وضع مؤشر المستخدم على النص تلميح الشاشة .

لتعيين السلوك
حدد الارتباط التشعبي الذي قمنا بإنشائه أعلاه.
في القائمة تنسيق، انقر فوق سلوك.
في جزء المهام سلوك، انقر فوق إدراج ثم انقر فوق تغيير الخاصية من القائمة.
في مربع الحوار تغيير الخاصية ، انقر فوق تحديد عنصر. تعد الطبقة عنصر "تقسيم"، ويتم تمثيلها بالعلامة <div>، لذا في القائمة نوع العنصر ، انقر فوق div.
تأكد من أن اسم الطبقة التي تريد اقترانها بهذا السلوك موجود في مربع معرف العنصر. في هذه الحالة، يكون معرف العنصر هو layer1.
انقر فوق الزر إمكانية الرؤية . في مربع الحوار إمكانية الرؤية، انقر فوق مرئي، ثم انقر فوق موافق.
أسفل مربع الحوار تغيير الخاصية، حدد خانة الاختيار الاستعادة عند خروج الماوس ، ثم انقر فوق موافق.
في جزء المهام سلوك، في عمود الأحداث، سترى الأحداث onclick وonmouseout. ولأننا نريد أن تكون الطبقة مرئية عند وضع مؤشر الماوس فوق الكلمة المحددة، انقر فوق الحدث onclick واستبدله بالحدث onmouseover بواسطة النقر فوق onmouseover في قائمة الأحداث.
http://www.alastorh.com/vb/attachment.php?attachmentid=675&stc=1&d=1183376916

تعيين خصائص الطبقة
الخطوة الأخيرة هي تعيين خصائص layer1 بحيث تكون مخفية بشكل افتراضي.

لتعيين خصائص الطبقة
انقر بزر الماوس الأيمن فوق layer1 وحدد خصائص الطبقة.
في جزء المهام طبقات، انقر فوق الناحية اليمنى من layer1 أسفل العمود إمكانية ظهور الطبقة ، والمشار إليه برمز العين. انقر مرة أخرى لاستبدال العين المفتوحة بالعين المغلقة.
http://www.alastorh.com/vb/attachment.php?attachmentid=676&stc=1&d=1183376916

يمكنك الآن النقر فوق معاينة أسفل إطار المستند لاختبار النتائج. قم بتحريك مؤشر الماوس فوق الارتباط التشعبي للنص "تلميح الشاشة"، وسوف يظهر تعريف تلميح الشاشة.

انتهي ادرس

عاشقة الرشاقه
07-02-2007, 03:56 PM
الله يعطيك لعافيه