ورشة عمل تتحدث حول تصميم المواقع الإلكترونية ورشة لبرنامج الدريم ويفر لتصميم المواقع الاحترافي تتحدث الورشة عن أساسيات البرنامج للانطلاق لعالم الإحتراف أقيمت الورشة لمدة 3 أيام بجامعة الإمام وقدمتها أختكم منيره النفيسي

1. ‫1‬ ‫المدربة : منيره صلح النفيسي‬ ‫الحد ، 163341هـ‬

2. ‫الحد ،‬
‫163341هـ‬
‫2‬ ‫المدربة : منيره صلح النفيسي‬
‫10:00‬

3. ‫3‬ ‫الحد ، 163341هـ‬
‫ماور ورشة العمل :‬
‫شرح الواجهة .‬ ‫‪‬‬
‫القوائم .‬ ‫‪‬‬
‫النصوص .‬ ‫‪‬‬
‫إدراج الجداول .‬ ‫‪‬‬
‫إدراج الصور‬ ‫‪‬‬
‫الخرائط الصورية .‬ ‫‪‬‬
‫الروابط التشعبية .‬ ‫‪‬‬
‫إدراج فيديو و صوت .‬ ‫‪‬‬
‫إدراج الفلش .‬ ‫‪‬‬
‫نماذج البيانات .‬ ‫‪‬‬
‫الطارات .‬ ‫‪‬‬
‫تطبيق عملي .‬ ‫‪‬‬
‫المدربة : منيره صلح النفيسي‬
‫10:00‬

4. ‫4‬ ‫الحد ، 163341هـ‬
‫المدربة : منيره صلح النفيسي‬

5. ‫5‬ ‫الحد ، 163341هـ‬
‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬
‫: الطريقة الثانية‬ ‫: الطريقة الولى‬
‫المدربة : منيره صلح النفيسي‬

6. ‫6‬ ‫الحد ، 163341هـ‬
‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬
‫و ما ستكتبه عن اسم الصورة :‪Image name‬‬
‫وهيا الصورة الصلية التي ستظهر بالبداية :‪Original Image‬‬
‫وهي الصورة التي بمجرد مرور السهم عليها ستظهر مباشرة :‪Rollover Image‬‬
‫المدربة : منيره صلح النفيسي‬

7. ‫7‬ ‫الحد ، 163341هـ‬
‫الصور ‪) image‬صور متعددة ف صوره (:‬
‫: الطريقة الثانية‬ ‫: الطريقة الولى‬
‫المدربة : منيره صلح النفيسي‬

8. ‫8‬ ‫الحد ، 163341هـ‬
‫الصور ‪) image‬صور متعددة ف صوره (:‬
‫لتحميل الصور كلها عند فتح المتصفح‬ ‫.1‬
‫مباشرة حتى يسهل عملية مرور السهم‬
‫لتسريع اظهار الصور .‬
‫لوضع الصورة الثالثة تظهر بالمقدمة‬ ‫.2‬
‫حين فتح الصفحة .‬
‫بجانبها قائمة منسدلة لختيار بين‬ ‫.3‬
‫ظهور شريط الصور بالشكل العمودي‬
‫أم الفقي .‬
‫1‬ ‫لرفاق الصورة داخل جدول وعند‬ ‫.4‬
‫2‬ ‫اختيارك لهذا المر ستلحظ ظهور‬
‫خصائص الجدول اسفل البرنامج .‬
‫3‬ ‫4‬
‫المدربة : منيره صلح النفيسي‬

9. ‫9‬ ‫الحد ، 163341هـ‬
‫الخرائط الصورية :‬
‫لعمل ارتباط تشعبي للمساحة‬
‫المحددة في الصورة أختر ما‬
‫تريد الرتباط به و ربطه عن‬
‫: طريق‬
‫‪Link‬‬
‫المدربة : منيره صلح النفيسي‬

10. ‫01‬ ‫الحد ، 163341هـ‬
‫الروابط‪: links‬‬
‫•‬ ‫: ‪Target‬‬
‫ستظهر نافذة منسدلة لتحديد عند الضغط على النص المرتبط بصفحة اخرى هل تفضل فتح الرابط بصفحه‬
‫مستقله أم بنفس الصفحة ام بأعلى الصفحة أم بصفحه جديدة مستقله .‬
‫: ‪• Title‬‬
‫كتابة النص الرشادي للمتصفح .‬
‫المدربة : منيره صلح النفيسي‬

11. ‫11‬ ‫الحد ، 163341هـ‬
‫الروابط‪: links‬‬
‫بطريقة أسهل نظلل النص و كليك لنجعله رابط .‬
‫أيضا من الروابط نستطيع إضافة اليميل .‬
‫المدربة : منيره صلح النفيسي‬

12. ‫21‬ ‫الحد ، 163341هـ‬
‫الروابط‪) links‬قوائم القفز)‪: Jump Menu‬‬
‫المدربة : منيره صلح النفيسي‬

13. ‫31‬ ‫الحد ، 163341هـ‬
‫إدراج الصوت ‪: Sound‬‬
‫المدربة : منيره صلح النفيسي‬

14. ‫41‬ ‫الحد ، 163341هـ‬
‫إدراج الفيديو ‪: video‬‬
‫المدربة : منيره صلح النفيسي‬

15. ‫51‬ ‫الحد ، 163341هـ‬
‫الفلش ‪: Flash‬‬
‫ستظهر لك نافذة أختر منها ملفك‬
‫الفلشي بامتداد ‪SWF‬‬
‫سيتم إدراجه داخل صفحتك .‬
‫المدربة : منيره صلح النفيسي‬

16. ‫61‬ ‫الحد ، 163341هـ‬
‫الفلش ‪ ) Flash‬إضافة أيقونات( :‬
‫1‬ ‫شاشة معاينة العمل .‬ ‫.1‬
‫تلقائيا سيتم تحديد أسم الملف الفلشي‬ ‫.2‬
‫أو بإمكانك كتابة السم واختيار مكان‬
‫حفظ الملف الفلشي من بإمكانك‬
‫حفظ عملك وتجربة الزر الفلشي.‬
‫2‬
‫المدربة : منيره صلح النفيسي‬

17. ‫71‬ ‫الحد ، 163341هـ‬
‫الفلش ‪ ) Flash‬خصائص إضافة أيقونات( :‬
‫• ‪ : Quality‬لتحديد دقة الزر الفلشي وسرعته ستظهر قائمة منسدلة اختر ما تريد :‬
‫( ‪ : Low‬سرعة العمل .(‬
‫(‪ : High‬بدقة الزر.(‬
‫(‪: Auto Low‬يعمل على سرعة ظهور الزر الفلشي (‬
‫(‪ : Auto High‬يعمل بسرعة ودقة الزر الفلشي والفضل اختيار ‪)High‬‬
‫:‪ Flash Button‬لكتابة أسم الزر الفلشي .‬ ‫•‬
‫:‪ Scale‬بجانبه قائمة منسدلة لثلث خيارات :‬ ‫•‬
‫(‪: Default‬جعل النص كما هو دون التعديل (‬
‫: ‪ ) No Border‬سيتم ظهور النص بعرض الزر الفلشي مما يؤدي الى قلة دقة (‬
‫(‪ : Excat Fit‬سيقوم بجعل النص يتمدد على حسب طول الزر الفلشي مما يفقد جودته (‬
‫:‪ Play‬لتشغيل الزر الفلشي بصفحتك في البرنامج ثم اضغط ‪ Stop‬ليقافه .‬ ‫•‬
‫المدربة : منيره صلح النفيسي‬

18. ‫81‬ ‫الحد ، 163341هـ‬
‫فلش نص ‪: Flash Text‬‬
‫لتحديد لون: ‪• Rollover color‬‬
‫النص الذي سيظهر عند مرور‬
‫. السهم علي النص‬
‫المدربة : منيره صلح النفيسي‬

19. ‫91‬ ‫الحد ، 163341هـ‬
‫الطبقات ‪: Layers‬‬
‫تستخدم لضبط مواقع العناصر داخل المستند ويمكن ان تحتوي الطبقات ، على‬ ‫•‬
‫نماذج أو صور أو كتابات أو غير ذلك كما يمكن ان تحتوي على طبقات أخرى‬
‫بداخلها ، بمجرد إدراج العناصر داخل الطبقات سوف تتمكن من التحكم في‬
‫ظهورها واختفائها ، وايضا في ترتيب ظهورها بالضافة إلى امكانية تحريك‬
‫الطبقات باستخدام نافذة الشريط الزمني ‪ ، ( (Time lines‬و تستخدم الطبقات في‬
‫أغلب الحيان لتصميم وتخطيط المستند وذلك لمرونتها ، ويمكن أن نحول الطبقات‬
‫إلى جداول بعد النتهاء من التصميم لكي يتم عرضها داخل المتصفحات التي ل‬
‫تدعم الطبقات .‬
‫المدربة : منيره صلح النفيسي‬

20. ‫02‬ ‫الحد ، 163341هـ‬
‫الطبقات ‪: Layers‬‬
‫: الطريقة الثانية‬ ‫: الطريقة الولى‬
‫المدربة : منيره صلح النفيسي‬

21. ‫12‬ ‫الحد ، 163341هـ‬
‫الطبقات التداخلة ‪: Nested Layers‬‬
‫المدربة : منيره صلح النفيسي‬

22. ‫22‬ ‫الحد ، 163341هـ‬
‫الطبقات ‪) Layers‬خصائصه(:‬
‫3‬
‫1‬
‫2‬
‫لعمل حركة ‪Time lines‬‬
‫معينة على الطبقات‬
‫ومن أهم هذه الخواص هي الخانة )‪ ( ID‬وتستخدم لتسمية الطبقة .‬ ‫.1‬
‫لتحديد مساحة الظهور للطبقة .‬ ‫.2‬
‫تستخدم لعطاء الطبقة رقم يرتب ظهورها داخل المتصفح بالنسبة للطبقات الخرى . فالطبقة‬ ‫.3‬
‫ذات الرقم الصغير تكون خلف الطبقة ذات الرقم الكبير .‬
‫المدربة : منيره صلح النفيسي‬

23. ‫32‬ ‫الحد ، 163341هـ‬
‫الطبقات ‪) Layers‬القوائم ‪: ( Menu‬‬
‫المدربة : منيره صلح النفيسي‬
‫‪file:///C:/Users/LG/Desktop/Site/menu.html‬‬

24. ‫42‬ ‫الحد ، 163341هـ‬
‫الطبقات ‪) Layers‬تحوليها إل جداول ( :‬
‫المدربة : منيره صلح النفيسي‬

25. ‫52‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪:Form‬‬
‫تتكون من 3 أجزاء رئيسية :‬
‫.1 ‪ : Form‬يحتوي على العنوان ‪ CGI script‬الذي يستخدم لمعالجة نموذج البيانات ، و يتضمن‬
‫‪ Method‬التي تستخدم لرسال البيانات للسيرفر .‬
‫.2 الحقول أو خانات نموذج البيانات : و تتضمن حقول الكتابات و القوائم و خانات الختيار‬
‫.‪Check box – Radio Button‬‬
‫.3 ‪ : Submit‬الذي يستخدم لرسال البيانات إلى السيرفر .‬
‫المدربة : منيره صلح النفيسي‬

26. ‫62‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪:Form‬‬
‫الحقول النصية . ‪Text field‬‬ ‫.1‬
‫حقول كلمات السر ‪. Passwords field‬‬ ‫.2‬
‫مفاتيح الختيار .‪Check box – Radio Button‬‬ ‫.3‬
‫القوائم المتنوعة .‬ ‫.4‬
‫مفاتيح الصور .‬ ‫.5‬
‫المدربة : منيره صلح النفيسي‬

27. ‫72‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ )Form‬إنشاء مساحة للنمذج ( :‬
‫تم وضع اليميل لرسال‬
‫نتائج النماذج إليه‬
‫المدربة : منيره صلح النفيسي‬

28. ‫82‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ )Form‬النصوص ‪: (Text‬‬
‫‪: TextField‬اسم الحقل .‬ ‫.1‬
‫‪ : Char width‬حجم الحروف .‬ ‫.2‬
‫‪ : Num Lines‬عدد السطر المتاحة للكتابة في النصوص الطويلة أما القصيرة ‪Max‬‬ ‫.3‬
‫‪ : char‬العدد القصى من الحروف .‬
‫‪ : Init val‬قيم افتراضية .‬ ‫.4‬
‫المدربة : منيره صلح النفيسي‬

29. ‫92‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪: (Form( Check Box‬‬
‫لتسمية الحقل وهو مفيد في الجافا‬ ‫.1‬
‫سكريبت .‬
‫إعطاء قيم وهي الصح .‬ ‫.2‬
‫إعطاء إحدى الخانات قيمة‬ ‫.3‬
‫افتراضيه أما تكون ب ‪check or‬‬
‫‪unchecked‬‬
‫2‬ ‫3‬
‫1‬
‫المدربة : منيره صلح النفيسي‬

30. ‫03‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪: (Form(Radio Button‬‬
‫نفس طريقة ال ‪Checkbox‬‬
‫المدربة : منيره صلح النفيسي‬

31. ‫13‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪)Form‬مفاتيح ناذج البيانات( :‬
‫‪ : Submit‬الذي يستخدم لرسال البيانات إلى السيرفر .‬
‫‪ : Rest‬لمسح جميع الجابات و إرجاعها لوضعها الفتراضي .‬
‫المدربة : منيره صلح النفيسي‬

32. ‫23‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬
‫يساعدنا في التأكد من صحة البيانات‬
‫المرسلة ، بالضافة يحدد البيانات التي‬
‫يجب إدخالها عن طريق‬
‫‪Requirement‬‬
‫المدربة : منيره صلح النفيسي‬

33. ‫33‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬
‫ظللنا جميع ال ‪ Form‬ثم نختار من لوحة‬
‫‪Behaviors – validate Form‬‬
‫المدربة : منيره صلح النفيسي‬

34. ‫43‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬
‫المدربة : منيره صلح النفيسي‬

35. ‫53‬ ‫الحد ، 163341هـ‬
‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬
‫في حالة الخطأ سيظهر لنا شاشة تحذير .‬
‫المدربة : منيره صلح النفيسي‬

36. ‫63‬ ‫الحد ، 163341هـ‬
‫الطارات ‪: Frames‬‬
‫المدربة : منيره صلح النفيسي‬

37. ‫73‬ ‫الحد ، 163341هـ‬
‫الطارات ‪ ) Frames‬خصائصه ( :‬
‫1و2‬
‫3‬ ‫4‬
‫5‬
‫للسماح بإظهار خطوط الطارات أو ل .‬ ‫.1‬
‫تحديد عرض الطار .‬ ‫.2‬
‫لون الطار‬ ‫.3‬
‫لمعاينة الطارات .‬ ‫.4‬
‫لتحديد حجم الطارات .‬ ‫.5‬
‫المدربة : منيره صلح النفيسي‬

38. ‫83‬ ‫الحد ، 163341هـ‬
‫الطارات ‪ ) Frames‬خصائصه ( :‬
‫لظهار خصائص كل‬
‫إطار على حده .‬
‫المدربة : منيره صلح النفيسي‬

39. ‫93‬ ‫الحد ، 163341هـ‬
‫الراجع :‬
‫عمي قوقل ! :‪P‬‬ ‫‪‬‬
‫موقع ‪free learn‬‬ ‫‪‬‬
‫‪http://www.freelearn110.com/baseArtecles/dreamweaver.html‬‬
‫كتاب اللكتروني ) صمم موقعك باستخدام البرنامج الحترافي دريم ويفر(‬ ‫‪‬‬
‫لمحمد علي الناشري .‬
‫قناة نوره الجلد على اليوتيوب‬ ‫‪‬‬
‫‪http://www.youtube.com/watch?v=j3YQsZDeCQw‬‬
‫المدربة : منيره صلح النفيسي‬

40. 40 ‫الحد ، 163341هـ‬
: ‫للتواصل عل‬
Email :
muneera.salah@hotmail.com
My blog :
www.Muneerasalah.wordpress.com
‫المدربة : منيره صلح النفيسي‬