Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
‫1‬   ‫المدربة : منيره صلح النفيسي‬   ‫الحد ، 163341هـ‬
‫الحد ،‬            ‫163341هـ‬        ‫2‬           ‫المدربة : منيره صلح النفيسي‬‫10:00‬
‫3‬                 ‫الحد ، 163341هـ‬        ‫ماور ورشة العمل :‬                    ‫شرح الواجهة .‬          ‫‪‬‬        ...
‫4‬            ‫الحد ، 163341هـ‬    ‫المدربة : منيره صلح النفيسي‬
‫5‬            ‫الحد ، 163341هـ‬   ‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬‫: الطريقة الثانية‬                ‫: الطريقة ا...
‫6‬                      ‫الحد ، 163341هـ‬         ‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬                          ‫و ما...
‫7‬            ‫الحد ، 163341هـ‬     ‫الصور ‪) image‬صور متعددة ف صوره (:‬‫: الطريقة الثانية‬                ‫: الطريقة ال...
‫8‬                         ‫الحد ، 163341هـ‬            ‫الصور ‪) image‬صور متعددة ف صوره (:‬                          ‫ل...
‫9‬             ‫الحد ، 163341هـ‬                                ‫الخرائط الصورية :‬‫لعمل ارتباط تشعبي للمساحة‬‫المحددة في...
‫01‬                        ‫الحد ، 163341هـ‬                                                                 ‫الروابط‪: l...
‫11‬                        ‫الحد ، 163341هـ‬                   ‫الروابط‪: links‬‬     ‫بطريقة أسهل نظلل النص و كليك لنجعل...
‫21‬                 ‫الحد ، 163341هـ‬‫الروابط‪) links‬قوائم القفز)‪: Jump Menu‬‬                       ‫المدربة : منيره ص...
‫31‬                 ‫الحد ، 163341هـ‬     ‫إدراج الصوت ‪: Sound‬‬          ‫المدربة : منيره صلح النفيسي‬
‫41‬                 ‫الحد ، 163341هـ‬     ‫إدراج الفيديو ‪: video‬‬          ‫المدربة : منيره صلح النفيسي‬
‫51‬                ‫الحد ، 163341هـ‬         ‫الفلش ‪: Flash‬‬     ‫ستظهر لك نافذة أختر منها ملفك‬             ‫الفلشي با...
‫61‬                     ‫الحد ، 163341هـ‬        ‫الفلش ‪ ) Flash‬إضافة أيقونات( :‬    ‫1‬                      ‫شاشة معا...
‫71‬                          ‫الحد ، 163341هـ‬     ‫الفلش ‪ ) Flash‬خصائص إضافة أيقونات( :‬  ‫• ‪ : Quality‬لتحديد دقة ال...
‫81‬                  ‫الحد ، 163341هـ‬                                    ‫فلش نص ‪: Flash Text‬‬‫لتحديد لون: ‪• Rollover...
‫91‬                    ‫الحد ، 163341هـ‬                                                  ‫الطبقات ‪: Layers‬‬   ‫تستخدم ...
‫02‬              ‫الحد ، 163341هـ‬                         ‫الطبقات ‪: Layers‬‬‫: الطريقة الثانية‬                   ‫: ا...
‫12‬                 ‫الحد ، 163341هـ‬‫الطبقات التداخلة ‪: Nested Layers‬‬                  ‫المدربة : منيره صلح النفيسي‬
‫22‬                        ‫الحد ، 163341هـ‬                                           ‫الطبقات ‪) Layers‬خصائصه(:‬      ...
‫32‬            ‫الحد ، 163341هـ‬                              ‫الطبقات ‪) Layers‬القوائم ‪: ( Menu‬‬                     ...
‫42‬                ‫الحد ، 163341هـ‬‫الطبقات ‪) Layers‬تحوليها إل جداول ( :‬                     ‫المدربة : منيره صلح الن...
‫52‬                       ‫الحد ، 163341هـ‬                                                  ‫ناذج البيانات ‪:Form‬‬     ...
‫62‬                      ‫الحد ، 163341هـ‬                    ‫ناذج البيانات ‪:Form‬‬               ‫الحقول النصية . ‪Tex...
‫72‬                        ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ )Form‬إنشاء مساحة للنمذج ( :‬                ‫تم وضع اليميل ...
‫82‬                       ‫الحد ، 163341هـ‬                      ‫ناذج البيانات ‪ )Form‬النصوص ‪: (Text‬‬                ...
‫92‬                          ‫الحد ، 163341هـ‬    ‫ناذج البيانات ‪: (Form( Check Box‬‬                   ‫لتسمية الحقل وه...
‫03‬                ‫الحد ، 163341هـ‬‫ناذج البيانات ‪: (Form(Radio Button‬‬                  ‫نفس طريقة ال ‪Checkbox‬‬    ...
‫13‬                      ‫الحد ، 163341هـ‬‫ناذج البيانات ‪)Form‬مفاتيح ناذج البيانات( :‬               ‫‪ : Submit‬الذي ي...
‫23‬                    ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬                           ‫يساع...
‫33‬                     ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬     ‫ظللنا جميع ال ‪ Form‬ثم ن...
‫43‬                 ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬                              ‫المد...
‫53‬                    ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬                         ‫في حال...
‫63‬               ‫الحد ، 163341هـ‬     ‫الطارات ‪: Frames‬‬        ‫المدربة : منيره صلح النفيسي‬
‫73‬                       ‫الحد ، 163341هـ‬          ‫الطارات ‪ ) Frames‬خصائصه ( :‬‫1و2‬          ‫3‬         ‫4‬      ‫...
‫83‬                  ‫الحد ، 163341هـ‬ ‫الطارات ‪ ) Frames‬خصائصه ( :‬‫لظهار خصائص كل‬   ‫إطار على حده .‬                ...
‫93‬                        ‫الحد ، 163341هـ‬                                                                   ‫الراجع :‬...
40                 ‫الحد ، 163341هـ‬                                 : ‫للتواصل عل‬Email :muneera.salah@hotmail.comMy blog...
Upcoming SlideShare
Loading in …5
×

ورشة عمل لبرنامج الدريم ويفر لتصميم المواقع اليوم الثاني

2,462 views

Published on

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

Published in: Design

ورشة عمل لبرنامج الدريم ويفر لتصميم المواقع اليوم الثاني

  1. 1. ‫1‬ ‫المدربة : منيره صلح النفيسي‬ ‫الحد ، 163341هـ‬
  2. 2. ‫الحد ،‬ ‫163341هـ‬ ‫2‬ ‫المدربة : منيره صلح النفيسي‬‫10:00‬
  3. 3. ‫3‬ ‫الحد ، 163341هـ‬ ‫ماور ورشة العمل :‬ ‫شرح الواجهة .‬ ‫‪‬‬ ‫القوائم .‬ ‫‪‬‬ ‫النصوص .‬ ‫‪‬‬ ‫إدراج الجداول .‬ ‫‪‬‬ ‫إدراج الصور‬ ‫‪‬‬ ‫الخرائط الصورية .‬ ‫‪‬‬ ‫الروابط التشعبية .‬ ‫‪‬‬ ‫إدراج فيديو و صوت .‬ ‫‪‬‬ ‫إدراج الفلش .‬ ‫‪‬‬ ‫نماذج البيانات .‬ ‫‪‬‬ ‫الطارات .‬ ‫‪‬‬ ‫تطبيق عملي .‬ ‫‪‬‬ ‫المدربة : منيره صلح النفيسي‬‫10:00‬
  4. 4. ‫4‬ ‫الحد ، 163341هـ‬ ‫المدربة : منيره صلح النفيسي‬
  5. 5. ‫5‬ ‫الحد ، 163341هـ‬ ‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬‫: الطريقة الثانية‬ ‫: الطريقة الولى‬ ‫المدربة : منيره صلح النفيسي‬
  6. 6. ‫6‬ ‫الحد ، 163341هـ‬ ‫الصور ‪) image‬صورة متغية ‪:(Rollover‬‬ ‫و ما ستكتبه عن اسم الصورة :‪Image name‬‬ ‫وهيا الصورة الصلية التي ستظهر بالبداية :‪Original Image‬‬‫وهي الصورة التي بمجرد مرور السهم عليها ستظهر مباشرة :‪Rollover Image‬‬ ‫المدربة : منيره صلح النفيسي‬
  7. 7. ‫7‬ ‫الحد ، 163341هـ‬ ‫الصور ‪) image‬صور متعددة ف صوره (:‬‫: الطريقة الثانية‬ ‫: الطريقة الولى‬ ‫المدربة : منيره صلح النفيسي‬
  8. 8. ‫8‬ ‫الحد ، 163341هـ‬ ‫الصور ‪) image‬صور متعددة ف صوره (:‬ ‫لتحميل الصور كلها عند فتح المتصفح‬ ‫.1‬ ‫مباشرة حتى يسهل عملية مرور السهم‬ ‫لتسريع اظهار الصور .‬ ‫لوضع الصورة الثالثة تظهر بالمقدمة‬ ‫.2‬ ‫حين فتح الصفحة .‬ ‫بجانبها قائمة منسدلة لختيار بين‬ ‫.3‬ ‫ظهور شريط الصور بالشكل العمودي‬ ‫أم الفقي .‬ ‫1‬ ‫لرفاق الصورة داخل جدول وعند‬ ‫.4‬ ‫2‬ ‫اختيارك لهذا المر ستلحظ ظهور‬ ‫خصائص الجدول اسفل البرنامج .‬‫3‬ ‫4‬ ‫المدربة : منيره صلح النفيسي‬
  9. 9. ‫9‬ ‫الحد ، 163341هـ‬ ‫الخرائط الصورية :‬‫لعمل ارتباط تشعبي للمساحة‬‫المحددة في الصورة أختر ما‬‫تريد الرتباط به و ربطه عن‬ ‫: طريق‬ ‫‪Link‬‬ ‫المدربة : منيره صلح النفيسي‬
  10. 10. ‫01‬ ‫الحد ، 163341هـ‬ ‫الروابط‪: links‬‬‫•‬ ‫: ‪Target‬‬ ‫ستظهر نافذة منسدلة لتحديد عند الضغط على النص المرتبط بصفحة اخرى هل تفضل فتح الرابط بصفحه‬ ‫مستقله أم بنفس الصفحة ام بأعلى الصفحة أم بصفحه جديدة مستقله .‬‫: ‪• Title‬‬ ‫كتابة النص الرشادي للمتصفح .‬ ‫المدربة : منيره صلح النفيسي‬
  11. 11. ‫11‬ ‫الحد ، 163341هـ‬ ‫الروابط‪: links‬‬ ‫بطريقة أسهل نظلل النص و كليك لنجعله رابط .‬ ‫أيضا من الروابط نستطيع إضافة اليميل .‬ ‫المدربة : منيره صلح النفيسي‬
  12. 12. ‫21‬ ‫الحد ، 163341هـ‬‫الروابط‪) links‬قوائم القفز)‪: Jump Menu‬‬ ‫المدربة : منيره صلح النفيسي‬
  13. 13. ‫31‬ ‫الحد ، 163341هـ‬ ‫إدراج الصوت ‪: Sound‬‬ ‫المدربة : منيره صلح النفيسي‬
  14. 14. ‫41‬ ‫الحد ، 163341هـ‬ ‫إدراج الفيديو ‪: video‬‬ ‫المدربة : منيره صلح النفيسي‬
  15. 15. ‫51‬ ‫الحد ، 163341هـ‬ ‫الفلش ‪: Flash‬‬ ‫ستظهر لك نافذة أختر منها ملفك‬ ‫الفلشي بامتداد ‪SWF‬‬ ‫سيتم إدراجه داخل صفحتك .‬ ‫المدربة : منيره صلح النفيسي‬
  16. 16. ‫61‬ ‫الحد ، 163341هـ‬ ‫الفلش ‪ ) Flash‬إضافة أيقونات( :‬ ‫1‬ ‫شاشة معاينة العمل .‬ ‫.1‬ ‫تلقائيا سيتم تحديد أسم الملف الفلشي‬ ‫.2‬ ‫أو بإمكانك كتابة السم واختيار مكان‬ ‫حفظ الملف الفلشي من بإمكانك‬ ‫حفظ عملك وتجربة الزر الفلشي.‬‫2‬ ‫المدربة : منيره صلح النفيسي‬
  17. 17. ‫71‬ ‫الحد ، 163341هـ‬ ‫الفلش ‪ ) Flash‬خصائص إضافة أيقونات( :‬ ‫• ‪ : Quality‬لتحديد دقة الزر الفلشي وسرعته ستظهر قائمة منسدلة اختر ما تريد :‬ ‫( ‪ : Low‬سرعة العمل .(‬ ‫(‪ : High‬بدقة الزر.(‬ ‫(‪: Auto Low‬يعمل على سرعة ظهور الزر الفلشي (‬ ‫(‪ : Auto High‬يعمل بسرعة ودقة الزر الفلشي والفضل اختيار ‪)High‬‬ ‫:‪ Flash Button‬لكتابة أسم الزر الفلشي .‬ ‫•‬ ‫:‪ Scale‬بجانبه قائمة منسدلة لثلث خيارات :‬ ‫•‬ ‫(‪: Default‬جعل النص كما هو دون التعديل (‬ ‫: ‪ ) No Border‬سيتم ظهور النص بعرض الزر الفلشي مما يؤدي الى قلة دقة (‬‫(‪ : Excat Fit‬سيقوم بجعل النص يتمدد على حسب طول الزر الفلشي مما يفقد جودته (‬ ‫:‪ Play‬لتشغيل الزر الفلشي بصفحتك في البرنامج ثم اضغط ‪ Stop‬ليقافه .‬ ‫•‬ ‫المدربة : منيره صلح النفيسي‬
  18. 18. ‫81‬ ‫الحد ، 163341هـ‬ ‫فلش نص ‪: Flash Text‬‬‫لتحديد لون: ‪• Rollover color‬‬ ‫النص الذي سيظهر عند مرور‬ ‫. السهم علي النص‬ ‫المدربة : منيره صلح النفيسي‬
  19. 19. ‫91‬ ‫الحد ، 163341هـ‬ ‫الطبقات ‪: Layers‬‬ ‫تستخدم لضبط مواقع العناصر داخل المستند ويمكن ان تحتوي الطبقات ، على‬ ‫•‬ ‫نماذج أو صور أو كتابات أو غير ذلك كما يمكن ان تحتوي على طبقات أخرى‬ ‫بداخلها ، بمجرد إدراج العناصر داخل الطبقات سوف تتمكن من التحكم في‬ ‫ظهورها واختفائها ، وايضا في ترتيب ظهورها بالضافة إلى امكانية تحريك‬‫الطبقات باستخدام نافذة الشريط الزمني ‪ ، ( (Time lines‬و تستخدم الطبقات في‬‫أغلب الحيان لتصميم وتخطيط المستند وذلك لمرونتها ، ويمكن أن نحول الطبقات‬ ‫إلى جداول بعد النتهاء من التصميم لكي يتم عرضها داخل المتصفحات التي ل‬ ‫تدعم الطبقات .‬ ‫المدربة : منيره صلح النفيسي‬
  20. 20. ‫02‬ ‫الحد ، 163341هـ‬ ‫الطبقات ‪: Layers‬‬‫: الطريقة الثانية‬ ‫: الطريقة الولى‬ ‫المدربة : منيره صلح النفيسي‬
  21. 21. ‫12‬ ‫الحد ، 163341هـ‬‫الطبقات التداخلة ‪: Nested Layers‬‬ ‫المدربة : منيره صلح النفيسي‬
  22. 22. ‫22‬ ‫الحد ، 163341هـ‬ ‫الطبقات ‪) Layers‬خصائصه(:‬ ‫3‬ ‫1‬ ‫2‬ ‫لعمل حركة ‪Time lines‬‬ ‫معينة على الطبقات‬ ‫ومن أهم هذه الخواص هي الخانة )‪ ( ID‬وتستخدم لتسمية الطبقة .‬ ‫.1‬ ‫لتحديد مساحة الظهور للطبقة .‬ ‫.2‬‫تستخدم لعطاء الطبقة رقم يرتب ظهورها داخل المتصفح بالنسبة للطبقات الخرى . فالطبقة‬ ‫.3‬ ‫ذات الرقم الصغير تكون خلف الطبقة ذات الرقم الكبير .‬ ‫المدربة : منيره صلح النفيسي‬
  23. 23. ‫32‬ ‫الحد ، 163341هـ‬ ‫الطبقات ‪) Layers‬القوائم ‪: ( Menu‬‬ ‫المدربة : منيره صلح النفيسي‬‫‪file:///C:/Users/LG/Desktop/Site/menu.html‬‬
  24. 24. ‫42‬ ‫الحد ، 163341هـ‬‫الطبقات ‪) Layers‬تحوليها إل جداول ( :‬ ‫المدربة : منيره صلح النفيسي‬
  25. 25. ‫52‬ ‫الحد ، 163341هـ‬ ‫ناذج البيانات ‪:Form‬‬ ‫تتكون من 3 أجزاء رئيسية :‬‫.1 ‪ : Form‬يحتوي على العنوان ‪ CGI script‬الذي يستخدم لمعالجة نموذج البيانات ، و يتضمن‬ ‫‪ Method‬التي تستخدم لرسال البيانات للسيرفر .‬ ‫.2 الحقول أو خانات نموذج البيانات : و تتضمن حقول الكتابات و القوائم و خانات الختيار‬ ‫.‪Check box – Radio Button‬‬ ‫.3 ‪ : Submit‬الذي يستخدم لرسال البيانات إلى السيرفر .‬ ‫المدربة : منيره صلح النفيسي‬
  26. 26. ‫62‬ ‫الحد ، 163341هـ‬ ‫ناذج البيانات ‪:Form‬‬ ‫الحقول النصية . ‪Text field‬‬ ‫.1‬ ‫حقول كلمات السر ‪. Passwords field‬‬ ‫.2‬‫مفاتيح الختيار .‪Check box – Radio Button‬‬ ‫.3‬ ‫القوائم المتنوعة .‬ ‫.4‬ ‫مفاتيح الصور .‬ ‫.5‬ ‫المدربة : منيره صلح النفيسي‬
  27. 27. ‫72‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ )Form‬إنشاء مساحة للنمذج ( :‬ ‫تم وضع اليميل لرسال‬ ‫نتائج النماذج إليه‬ ‫المدربة : منيره صلح النفيسي‬
  28. 28. ‫82‬ ‫الحد ، 163341هـ‬ ‫ناذج البيانات ‪ )Form‬النصوص ‪: (Text‬‬ ‫‪: TextField‬اسم الحقل .‬ ‫.1‬ ‫‪ : Char width‬حجم الحروف .‬ ‫.2‬‫‪ : Num Lines‬عدد السطر المتاحة للكتابة في النصوص الطويلة أما القصيرة ‪Max‬‬ ‫.3‬ ‫‪ : char‬العدد القصى من الحروف .‬ ‫‪ : Init val‬قيم افتراضية .‬ ‫.4‬ ‫المدربة : منيره صلح النفيسي‬
  29. 29. ‫92‬ ‫الحد ، 163341هـ‬ ‫ناذج البيانات ‪: (Form( Check Box‬‬ ‫لتسمية الحقل وهو مفيد في الجافا‬ ‫.1‬ ‫سكريبت .‬ ‫إعطاء قيم وهي الصح .‬ ‫.2‬ ‫إعطاء إحدى الخانات قيمة‬ ‫.3‬ ‫افتراضيه أما تكون ب ‪check or‬‬ ‫‪unchecked‬‬ ‫2‬ ‫3‬‫1‬ ‫المدربة : منيره صلح النفيسي‬
  30. 30. ‫03‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪: (Form(Radio Button‬‬ ‫نفس طريقة ال ‪Checkbox‬‬ ‫المدربة : منيره صلح النفيسي‬
  31. 31. ‫13‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪)Form‬مفاتيح ناذج البيانات( :‬ ‫‪ : Submit‬الذي يستخدم لرسال البيانات إلى السيرفر .‬ ‫‪ : Rest‬لمسح جميع الجابات و إرجاعها لوضعها الفتراضي .‬ ‫المدربة : منيره صلح النفيسي‬
  32. 32. ‫23‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬ ‫يساعدنا في التأكد من صحة البيانات‬ ‫المرسلة ، بالضافة يحدد البيانات التي‬ ‫يجب إدخالها عن طريق‬ ‫‪Requirement‬‬ ‫المدربة : منيره صلح النفيسي‬
  33. 33. ‫33‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬ ‫ظللنا جميع ال ‪ Form‬ثم نختار من لوحة‬ ‫‪Behaviors – validate Form‬‬ ‫المدربة : منيره صلح النفيسي‬
  34. 34. ‫43‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬ ‫المدربة : منيره صلح النفيسي‬
  35. 35. ‫53‬ ‫الحد ، 163341هـ‬‫ناذج البيانات ‪ ) Form‬التأكد من صحة البيانات(:‬ ‫في حالة الخطأ سيظهر لنا شاشة تحذير .‬ ‫المدربة : منيره صلح النفيسي‬
  36. 36. ‫63‬ ‫الحد ، 163341هـ‬ ‫الطارات ‪: Frames‬‬ ‫المدربة : منيره صلح النفيسي‬
  37. 37. ‫73‬ ‫الحد ، 163341هـ‬ ‫الطارات ‪ ) Frames‬خصائصه ( :‬‫1و2‬ ‫3‬ ‫4‬ ‫5‬ ‫للسماح بإظهار خطوط الطارات أو ل .‬ ‫.1‬ ‫تحديد عرض الطار .‬ ‫.2‬ ‫لون الطار‬ ‫.3‬ ‫لمعاينة الطارات .‬ ‫.4‬ ‫لتحديد حجم الطارات .‬ ‫.5‬ ‫المدربة : منيره صلح النفيسي‬
  38. 38. ‫83‬ ‫الحد ، 163341هـ‬ ‫الطارات ‪ ) Frames‬خصائصه ( :‬‫لظهار خصائص كل‬ ‫إطار على حده .‬ ‫المدربة : منيره صلح النفيسي‬
  39. 39. ‫93‬ ‫الحد ، 163341هـ‬ ‫الراجع :‬ ‫عمي قوقل ! :‪P‬‬ ‫‪‬‬ ‫موقع ‪free learn‬‬ ‫‪‬‬‫‪http://www.freelearn110.com/baseArtecles/dreamweaver.html‬‬ ‫كتاب اللكتروني ) صمم موقعك باستخدام البرنامج الحترافي دريم ويفر(‬ ‫‪‬‬ ‫لمحمد علي الناشري .‬ ‫قناة نوره الجلد على اليوتيوب‬ ‫‪‬‬ ‫‪http://www.youtube.com/watch?v=j3YQsZDeCQw‬‬ ‫المدربة : منيره صلح النفيسي‬
  40. 40. 40 ‫الحد ، 163341هـ‬ : ‫للتواصل عل‬Email :muneera.salah@hotmail.comMy blog :www.Muneerasalah.wordpress.com ‫المدربة : منيره صلح النفيسي‬

×