‫‪OpenElement‬‬

‫‪Tutorial‬‬

‫توتوريال لبرنامج‬
‫‪OpenElement‬‬
‫• مساق‪ :‬تصميم برامج التعلم الذاتي‬
‫باستخدام الحاسوب‬
‫• باعداد الطالبة‪ :‬مريم مصطفى‬
‫• ‪201410032‬‬
‫• باشراف الدكتور‪ :‬اسامة الداللعة‬
‫• فصل االول ‪2018/2019‬‬
‫عن برنامج ‪OpenElement‬‬

‫هو برنامج لتصميم مواقع‬ ‫•‬

‫مجاني‪ ,‬سهل االستخدام‬ ‫•‬
‫يدعم البرنامج جميع أحدث التقنيات ‪ ،‬مثل ‪HTML5 ،‬‬ ‫•‬
‫‪ ، CSS3 ، jQuery‬التصميم المتجاوب‪.‬‬
‫يمكن العمل من قالب مصمم بطريقة احترافية أو من‬ ‫•‬
‫الصفر‪.‬‬
‫تم تطوير ‪ openElement‬من قبل المتخصصين في الويب‬ ‫•‬
‫لمحترفي الويب كأداة مرئية لزيادة اإلنتاجية من خالل‬
‫تبسيط المهام وتحسين سير العمل‪.‬‬
‫في هذا التوتوريال سنقوم ب‪:‬‬

‫سنتعرف على كيفية فتح مشروع جديد ومشروع‬ ‫•‬

‫موجود‬
‫كيفية فتح صفحة جديدة‬ ‫•‬
‫التعرف على مكونات شريط ادوات البرنامج‬ ‫•‬
‫التعرف على عناصر البرنامج‬ ‫•‬
 ‫تحميل البرنامج‬
‫• لتحميل البرنامج اذهب الى الموقع الرسمى للبرنامج‪:‬‬
‫‪/https://www.openelement.com‬‬

‫انقر هنا لتحميل‬

‫البرنامج‬
 ‫‪-1‬انقر هنا لتحميل البرنامج‬

‫‪-2‬انقر على ‪ Save File‬لحفظ‬

‫الملف‬
‫‪-3‬بعد انهاء من التحميل انقر على ملف التحميل لنبدا‬
‫االعداد‬

‫‪-4‬لنبدا االعداد‪ :‬اختر اللغة (هناك لغتان للعداد االنجليزية و‬

‫الفرنسية)‬
 ‫‪-5‬انقر‬
‫‪-6‬انقر انا اوافق ثم انقر‬
‫تالي‬
‫تالي‬
‫‪-8‬انقر تثبيت‬
‫‪-7‬حدد اين تريد حفظ مجلد البرنامج ثم‬
‫انقر تالي‬
 ‫اذا كنت تريد ان يفتح البرنامج مباشرة بعد‬
‫االنتهاء من التثبيت‪ ,‬تاكد من وجود عالمة صح‬
‫في هذا المربع‬

‫‪-10‬انقر انهاء‬ ‫‪-9‬سيقوم االن البرنامج بالتثبيت على‬

‫جهازك‬
 ‫لفتح البرنامج‪:‬‬
‫يمكنك فتح البرنامج من خالل العثور على ايقونة ‪ OpenElement‬على سطح‬
‫المكتب‬

‫او يمكنك العثور عليه من خالل بحثه في شريط البحث‬

‫واجهة البرنامج عندما تفتحه‬
 ‫استيراد مشروع من‬
‫االنترنت‬

‫واجهة البرنامج عندما‬

‫تفتحه‬ ‫سنقوم نحن بالعمل على مشروع‬
‫جديد‪ ,‬و لفتحه انقر على هذا الزر‬
‫فتح مشروع موجود في‬
‫جهازك الخاص‬

‫فتح مشروع جديد‬

 ‫بعد النقر على‪ ,New Project‬ستظهر لك هذه النافذة‬

‫فراغ لكتابة اسم‬

‫المشروع‬
‫فراغ الختيار مكان‬
‫لحفظ المشروع‬
‫الختيار قالب جاهز من‬
‫مكتبة البرنامج انقر هنا‬

‫شكل القالب الذي‬

‫قمت باختياره‬

‫اذا كنت ال تريد‬

‫استخدام قالب‪ ,‬و اردت‬
‫ان تعمل على مشروع‬
‫فارغ‪ ,‬فانقر هنا‬
‫ستظهر لك هذه القائمة‪ ,‬اختر القالب الذي تريده‬
‫بعد اختيارك للقالب سيقوم البرنامج باظهار لك كيف سيكون القالب في‬
‫مختلف االجهزة‪ ,‬تابلت‪-‬هاتف محمول‪-‬جهاز الحاسوب‬
 ‫اذا كنت راض عن‬
‫شكل القالب‪ ,‬اذهب‬
‫الى اخر الصفحة و‬
‫انقر هنا‬
‫سيقوم البرنامج االن بتحميل‬
‫القالب‬
‫شكل البرنامج بعد ان يتم تحميل القالب‬
‫نحن سنقوم العمل على مشروع جديد فارغ‪,‬‬
‫فقم بفتح مشروع جديد و ادخل البيانات‬
‫الالزمة و تاكد من وجود عالمة صح في هذا‬
‫المربع‬
‫واجهة البرنامج عندما تفتح مشروع جديد و فارغ‬

‫و االن لنتعرف على شريط‬

‫االدوات‬
1 2 3 4 5 7 8 11
6

10
 ‫‪1‬‬

‫خيار لفتح مشروع جديد‬ ‫‪New‬‬ ‫‪1‬‬

‫فتح مشروع موجود على جهازك الخاص‬ ‫‪Open‬‬ ‫‪2‬‬

‫يقوم بالخروج من المشروع التي تعمل عليه و لكن ال يخرج من البرنامج‬ ‫‪Close‬‬ ‫‪3‬‬

‫تحتوي على ما ياتي‪:‬‬ ‫‪Other‬‬ ‫‪4‬‬

‫استرجاع مشروعك بعد حفظ االحتياطي‬ ‫)‪Import (restore‬‬

‫لفتح مجلد المشروع الذي تعمل عليه حاليا‬ ‫‪Open the project folder‬‬

‫حفظ االحتياطي للمشروع (بشكل مضغوط)‬ ‫‪Back up Project‬‬

‫خيار لكتابة المالحظات (يفتح برنامج المدونة‬
‫‪Notes‬‬
‫تلقائيا)‬
 ‫فتح صفحة جديدة في المشروع الذي تعمل به حاليا‬ ‫‪New‬‬ ‫‪5‬‬

‫حفظ جميع الصفحات المفتوحة حاليا في البرنامج‬ ‫‪Save All‬‬ ‫‪6‬‬

‫اغالق جميع الصفحات المفتوحة حاليا في البرنامج‬ ‫‪Close All‬‬ ‫‪7‬‬

‫يفتح نافذة تظهر لك جميع المواد الموجودة في مشروعك ( التي اضفتها انت‬
‫بنفسك)‬
‫‪Resources‬‬ ‫‪8‬‬

‫تسمح لك باضافة ايقونات خاصة بك‬ ‫‪FavIcon‬‬ ‫‪9‬‬

‫سلة المهمالت‪ ,‬و تعمل تماما كسلة المهمالت الموجودة في جهاز الحاسوب‬ ‫‪Recycle Bin‬‬ ‫‪10‬‬

‫نشر المشروع على االنترنت (يجب عليك ادخال المعلومات الالزمة للنشر مسبقا)‬ ‫‪Publish to Web‬‬ ‫‪11‬‬
 ‫لفتح صفحة جديدة‪ :‬اذهب الى قائمة ‪ Project :‬ثم اختر‬

‫ثم يظهر لك هذا المربع‪ ,‬قم بتعبئته ثم انقر‬

‫على ‪Create‬‬
‫اسم الصفحة الذي سيظهر‬
‫في شريط العنوان‬
‫المتصفح‬

‫اسم الصفحة الذي سيظهر‬

‫خيار يسمح لك بتحديد شكل‬ ‫في تاب المتصفح و االسم‬
‫الصفحة ( من حيث ترتيب‬ ‫الذي سيتعرف عليه محرك‬
‫الطبقات)‬ ‫البحث‬

‫حجم‬
‫الصفحة‬
1 2 3 6 7 12 13

10
4
8
5
9 11
 ‫‪1‬‬
‫خيار للصق العناصر التي قمت بنسخها‬ ‫‪Paste‬‬ ‫‪1‬‬

‫حفظ ما تعمل عليه حاليا‬ ‫‪Save‬‬ ‫‪2‬‬

‫يقوم باعادة تحديث ما تعمل عليه حاليا‬ ‫‪Refresh‬‬ ‫‪3‬‬

‫يقوم بتحويل الصفحة التي تعمل عليها حاليا الى‬
‫‪Convert‬‬ ‫‪4‬‬
‫طبقة‬
‫يقوم بتكبير او تصغير ما تعمل عليه‬ ‫‪Zoom‬‬ ‫‪5‬‬
‫تحدد اشكال ما ياتي‪( :‬عندما تضغط و تحدد الخيار المناسب حسب احتياجاتك)‬ ‫‪Styles‬‬ ‫‪6‬‬

‫تحدد اشكال الخلفية‬

‫تحدد اشكال اطار‬
‫تحدد اشكال االرتباط‬ ‫الصفحة‬
‫التشعبي‬
‫خيار يسمح لك برؤية كيف سيكون موقعك في مختلف االجهزة االلكترونية (تابلت‪,‬‬
‫الهواتف النقالة‪)....‬‬
‫‪Responsive‬‬ ‫‪7‬‬

‫تفتح لك نافذة بكتابة مشروعك بلغة البرمجة‬ ‫‪Source Code‬‬ ‫‪8‬‬

‫تسمح لك باختيار لغة البرمجة التي تريد الكتابة بها مشروعك‬ ‫‪Server Scripts‬‬ ‫‪9‬‬
‫حماية الصفحة بعد نشرها من خالل وضع كلمة مرور (يجب عليك ادخال المعلومات الالزمة‬
‫للنشر مسبقا)‬
‫‪Secure‬‬ ‫‪10‬‬

‫ازالة الحماية التي وضعتها مسبقا‬ ‫‪Unsecure‬‬ ‫‪11‬‬

‫نشر الصفحة على االنترنت (يجب عليك ادخال المعلومات الالزمة للنشر مسبقا)‬ ‫‪Publish to Web‬‬ ‫‪12‬‬

‫عرض تجريبي لمشروعك بشكل نهائي في احدى المتصفحات‬ ‫‪Preview‬‬ ‫‪13‬‬

1

3
 ‫خيار لتحديد شكل الصفحة (من حيث ترتيب الطبقات)‬ ‫‪Page Background‬‬ ‫‪1‬‬

‫خيار الختيار صورة للخلفية من جهازك الخاص‪ ,‬و ذلك من خالل الخطوات الالتية‬ ‫‪Background Image‬‬ ‫‪2‬‬

‫انقر على ‪ Background Image‬و ثم انقر على ‪ Add‬و ستظهر لك هذه النافذة‬

‫انقر على ‪ Add Files‬و اختر الصورة التي‬

‫تريدها من جهازك الخاص ثم انقر على‬
‫‪Select‬‬

‫الختيار لون للخلفية‬ ‫‪Color‬‬ ‫‪3‬‬

‫اطار الموقع‪ ,‬و الذي‬
‫ال يمكننا ادخال عليه‬
‫عناصر و لكن يمكن‬
‫تغيير شكله كما‬
‫سنرى الحقا ‪ ,‬كما‬ ‫هذه محطة العمل‪ ,‬يمكننا اضافة عليها‬
‫انه سيظهر في‬ ‫العناصر و تعديلها الجقا و ستظهر هذه‬
‫الشكل النهائي‬ ‫العناصر في شكل النهائي للمشروع‬
‫للموقع‬

‫هذا هو حجم محطة العمل التلقائي‪ ,‬و لكن يمكن توسيعها‪ ,‬من خالل تحديد الحدود و سحب‬
‫المربعات الصغيرة‬
‫لتغيير لون االطار‪ ,‬انقر على االطار‪ ,‬ثم انقر على قائمة ‪ Styles‬ثم اختر ‪ Style Presets‬ثم اختر‬
‫اللون المناسب لمشروعك‬
‫و االن لنبدا العمل على العناصر الموجودة في البرنامج‪ .‬حيث سيكون معظم عملنا‬
‫من خالل هذه العناصر‬

‫معظم عملنا سيكون من خالل هذه القائمة‪ ,‬و هي العناصر التي سيتكون‬
‫منها موقعنا‬
 ‫هذه الخطوط تستخدم كزينة او كفاصل حيث ال يمكن‬
‫الكتابة فيها و ال يمكن وضع فيها اي عنصر و لكن يمكن‬
‫الخط االفقي‬
‫وضع هذه الخطوط في عناصر اخرى كما سنرى الحقا‬ ‫الخط العمودي‬

‫خصائص الخطوط من‬

‫قائمة ‪ Properties‬تمكنك من‬
‫تغيير حجمها و موقعها كما‬
‫يمكنك فعل ذلك من سحب‬
‫الخطوط و سحب المربعات‬
‫اللصغيرة الموجودة في‬
‫االطراف‬

‫مالحظة‪ :‬جميع العناصر توضع على محطة العمل من خالل سحبها‬

‫على محطة العمل‬
 ‫يكمنك تغيير هوامش الخطوط الداخلية و‬
‫الخارجية‬

‫يمكنك تغيير شكل الخطوط من خالل قائمة‬

‫و ضيفة هذا القفل عندما يكون مغلق فانه يسلب‬
‫‪ Styles‬ثم اختر ‪ Style Presets‬ثم اختر الشكل‬
‫امكانياتنا التعديل عليه‪ ,‬و هذا القفل موجود في‬
‫المناسب‬
‫جميع عناصر البرنامج‬
‫تغيير شكل الخارجي‬ ‫خيار لتغيير لون‬
‫للخطوط‬ ‫الخطوط‬

‫هذه الخصائص تكون موجودة عند معظم العناصر في‬

‫البرنامج‬
 ‫االطار‬
‫تعمل نفس مبدا الخطوط لكن االطار ياتي بحجم اكبر و يمكن تكبيره‬
‫على كامل الصفحة‬
 ‫الربط الى موقع ‪OpenElemet‬‬

‫يكمنك وضع ايقونة او سطر تسمح لمستخدم موقعك من الدخول الى موقع ‪OpenElement‬‬
‫(موقع البرنامج)‬
 ‫الصور‬
‫حذف صورة‬
‫عندما تسحب خيار الصورة الى محطة العمل سيظهر لدينا‬
‫الموجودة في القائمة‬
‫هذا المربع‪:‬‬

‫اضافة مجلد جديد‬

‫الى القائمة‬
‫اضافة صور الى‬
‫لقائمة من جهازك‬
‫الخاص بك‬
‫تغيير حجم‬ ‫خصائص الصور‬
‫الصورة‬

‫تغيير الصورة‬
‫االرتباط التشعبي‬
‫للصورة‬
‫يمكنك تغيير شكل النص من خالل قائمة ‪Style‬‬ ‫النصوص‬
‫‪Presets‬‬

‫هناك نوعين من النصوص‪,‬‬

‫النصوص ذو السطر الواحد‬

‫و النصوص ذو االسطر‬
‫المتعددة‬
‫يمكنك تغيير شكل جدول النص و شكل النص من خالل الذهاب الى قائمة ‪ Styles‬و من ثم اختر‬
‫‪Style Presets‬‬
‫النصوص ذو سطر واحد تستخدم للعناوين و االشياء ذو اهمية‪ ,‬اما النصوص ذو‬
‫االسطر المتعددة لكتابة الفقرات و محتوى الموقع‬
 ‫تعمل نفس مبدا اي جدول في‬
‫اي برنامج‬
‫الجداول‬

‫حذف العمود‬ ‫اضافة عمود جديد بعد العمود‬

‫المحدد‬ ‫المحدد‬

‫اضافة سطر‬
‫جديد‬

‫حذف سطر المحدد‬

‫اضافة سطر جديد بعد السطر‬
‫اضافة عمود‬
‫المحدد‬
‫جديد‬

‫ادخال‬
‫يمكنك تغيير شكل الجدول من خالل الذهاب الى قائمة ‪ Styles‬و من ثم اختر ‪Style‬‬
‫‪Presets‬‬
‫من عيوب هذا البرنامج ان ال تستطيع تغيير حجم الخانة‪ ,‬لكنها تتغير حسب حجم‬
‫النص وشكله‬
 ‫قائمة االكرديون‬
‫الشكل النهائي للقائمة‪ ,‬فالقوائم‬
‫الفرعية تظهر بعد لمس مؤشر‬ ‫لفتح قائمة تحتها قائمة ثانية (متفرعة منها)‪ ,‬حدد اوال‬
‫الفارة للقائمة الرئيسية‬ ‫القائمة الرئيسية ثم انقر على ‪Add a Link‬‬
‫يرتبط بالعادة عمل هذا العنصر مع عنصر القائمة المنبعثة‪ ,‬و هذا خاصة مفيدة جدا و‬
‫فاعلية اكثر عندما يكون لديك صفحات طوبلة جدا‪ ,‬حيث يقوم هذا العنصر بتسهيل‬ ‫المرساة المسمى‬
‫الوصول الى مكان معين من صفحة‬
‫قم بوضع المرساة في اماكن التي تريدها في‬
‫موقعك (يمكن ايضا وضعها في صفحات‬
‫مختلفة في نفس المشروع‬

‫قم باختيار الرابط الذي تريد ربطه‬

‫مع المرساة‬
 ‫اذا لم تستطع ايجاد المرساة‪ ,‬قم بايجاد‬
‫الصفحة التي توجد فيها المرساة و انقر على‬
‫المثلث الصغير بجانب اسم الصفحة‬
‫بعد اختيار رابط المرساة انقر على ‪Complete‬‬
‫لالنهاء‬
 ‫هذه النافذة خاصة بخصائص‬ ‫االرتباط التشعبي للصورة‬
‫االرتباط التشعبي‬

‫ربط العنصر بالصفحة‬

‫التي تعمل بها حاليا‬
‫ربط العنصر بملف‬
‫موجود على جهازك‬
‫او موجودة على‬
‫االنترنت‬
‫العنصر باحدى‬ ‫ربط‬
‫صفحات مشروعك‬
‫(التي انت بفتحها)‬
‫ربط العنصر بصفحة‬
‫موجودة على‬
‫االنترنت‬
 ‫بعد اختيار االرتباط التشعبي هذا ما سيظهر‬
‫بعد ذلك‪:‬‬

‫خيار الختيار الصورة‬

‫االصلية‪ ,‬اي الصورة‬
‫التي ستظهر عندما‬
‫ال يوجد عليها اي‬ ‫خيار لتعديل على‬
‫تاثير‬ ‫االرتباط التشعبي‬
‫خيار اختيار صورة‬
‫التي ستظهر عندما‬
‫تحوم مؤشر الفارة‬
‫فوق الصورة االصلية‬
 ‫القائمة المتشعبة‬
‫يشبه عمل هذا العنصر بعنصر قائمة االكرديون‪ ,‬الفرق هو ان القوائم الفرعية تظهر بعد النقر على الشارة‬
‫الموجب و تختفي بعد النقر على اشارة السالب‬
 ‫تستخدم علم اللغات ليرى مستخدم موقعك اللغات المتاحة‬ ‫علم اللغات‬
‫في موقعك‬

‫قائمة علم‬
‫اللغات‬

‫اللغة‬
‫الموجودة‬ ‫انقر هنا لتغيير اعدادات‬
‫اللغات‬
‫خيار الختيار اذا كنت تريد اظهر اللغة ام‬
‫ال‬
‫الضافة لغات اخرى‪ ,‬اختر خيار ‪ Prefrence‬من شريط ادوات ‪ Project‬ثم اختر خيار‬
‫‪Translations‬‬

‫خيار لحذف‬
‫اللغة‬

‫علم‬ ‫اللغة‬
‫اللغة‬ ‫اللغة المتاحة‬
‫لغة البرنامج‬
‫في مشروعك‬

‫خيار للتحديد كيفية كتابة اللغة (من اليمين الى‬

‫اليسار)‬
 ‫االرتباط التشعبي للنصوص‬

‫تعمل نفس مبدا االرتباط التشعبي للصورة‪ ,‬باختالف ان هذا الخيار‬

‫مخصص للنصوص‬

‫على الرغم من النصوص له ارتباط تشعبي‪,‬فان بامكاننا تغيير خصائص النص‪,‬‬

‫كما تعلمنا سابقا‬
 ‫تقوم هذه القائمة بالظهور بعد النقر او لمس مؤشرة‬
‫الفارة لعنصر معين‬
‫القائمة المنبعثة‬

‫بعد سحبك للعنصر الى محطة العمل ستظهر لك هذه‬

‫النافذة‪:‬‬

‫قم باختيار العنصر الذي تريد‬

‫ان تنبعث منه القائمة (يجب‬
‫ان يكون هذا العنصر موجود‬
‫على محطة العمل)‬

‫كيف تريد ان تظهر هذه‬

‫القائمة؟( من خالل النقر ام‬
‫باللمس المؤشر للعنصر ام‬
‫كليهما)تريد اي عنصر ثاني اخر‬
‫هل‬
‫ان تنبعث منه هذه القائمة ؟‬
‫قم بتحديد القوائم و الروابط‬
‫التي تريدها‬
 ‫‪-‬هذا هو الشكل النهائي‪ ,‬حيث تظهر القائمة بعد النقر على عنصر معين (او‬
‫حسب اختيارك انت)‬

‫‪-‬عندما تقوم بتحرير الموقع‪ ,‬العنصر نفسه غير موجود على محطة العمل فاذا اردت التعديل على العنصر‪ ,‬اذهب الى شريط‬
‫صغير يقع مباشرة فوق محطة العمل فستجد العنصر هناك‬
 ‫زر االرتباط التشعبي‬
‫تعمل نفس مبدا ارتباط التشعبي للنص و الصورة‪ ,‬باختالف انه بامكنك وضع شكل للزر من خالل‬
‫قائمة ‪ Styles‬ثم ‪Style Presets‬‬
 ‫ملفات التحميل‬

‫يسمح لك هذا العنصر باختيار‬

‫ملفات من جهازك الخاص‬
‫تسمح لمستخدم موقعك‬
‫تنزيلها على جهازه الخاص به‬
 ‫ادخال النص لملف‬
‫التحميل‬

‫ادخال اطار لشكل‬

‫العنصر‬
‫اختيار ملف التحميل‬ ‫اختيار صورة الخارجية لملف‬
‫التحميل‬
‫)‪Code Block (Visual‬‬
‫)‪Code Block (Source‬‬
‫يسمح لك هذا العنصر بكتابة موقعك من خالل الكود‪ ,‬و هناك نوعين له في هذا الموقع‪ ,‬و هذا العنصر‬
‫مفيد لمن يعرف لغة الكود‬
 ‫مجموعات األكورديون‬
‫هذا العنصر يجمع بين العنصرين التاليتين‪ ,‬عناصر مجموعة و لوحة قابلة لالنهيار‪ ,‬و يسمح لنا هذا‬
‫العنصر بوضع داخله مجموعة من العناصر االخرى‬
 ‫لوحة قابلة لالنهيار‬

‫هذا العنصر يسمح لنا بوضع مجموعة من العناصر داخله من خالل سحبها الى داخل العنصر(مثل‬
‫صور‪ ,‬نصوص‪)...‬‬
 ‫عناصر مجموعة‬
‫يشبه هذا العنصر كاطار يسمح لنا بوضع مجموعة من العناصر‬
‫داخله‬
 ‫عجلة الصور االفقية‬
‫عجلة الصور العمودية‬
‫‪ -1‬قم باختيار الصور التي تريده و‬
‫وافق عليها‬

‫‪-2‬لن تظهر العجلة اثناء عملك في البرنامج و لكنها‬

‫تظهر في العرض التجريبي في المتصفح‬
 ‫مالحظة‪ :‬عند عرض التجريبي لموقعك و بعض‬
‫العناصر بم تظهر‪ ,‬تاكد من انك قمت بحفظ‬ ‫‪ HTML5‬فيديو‬
‫مشروعك‬

‫اختيار فيديو بصيغ‬

‫مختلفة‬
‫خيار الختيار فيديو‬
‫اخر‬
 ‫معرض الصور‬

‫لعمل معرض صور اختر الصور‬

‫التي تريدها ثم انقر على ‪Save‬‬
‫المعرض ال يظهر عندما تحرر مشروعك‪ ,‬و لكنها تظهر عندما تعرض مشروعك في‬
‫المتصفح الخاص بك‬

‫البوم الصور في‬ ‫البوم الصور في اثناء التحرير في‬

‫البرنامج‬
 ‫ادخال صيغ فيديو‬
‫اخرى‬

‫ادخال رسوم متحركة ‪ Flash‬الى موقعك‬

‫ادخال فيديو الى موقعك من ‪Dailymotion‬‬

‫ادخال فيديو الى موقعك من ‪YouTube‬‬

 ‫يستخدم مربع االختيار بالعادة مع عناصر اخرى مثل‬ ‫مربع االختيار‬
‫النصوص‬

‫عندما تنقر على خصائص العنصر فانه بامكانك كتابة رسالة خطا‪ ,‬اذا استخدامك للمربع‬
‫في صيغة اختبار‬
 ‫قائمة منسدلة‬
‫خيار اذا تم تحديده فسيكون‬
‫هذا الخيار االول (الظاهر)‬

‫نص‬
‫الخيار‬ ‫خصائص‬ ‫خصائص‬
‫العنصر‬ ‫الشروط‬
 ‫قائمة الخيارات‬

‫تشبه كثيرا بخصائصها القائمة‬

‫المنسدلة‬

‫تحديد كيف سيكون‬

‫شكل القائمة‬
‫خصائ‬
‫ص‬
 ‫تقديم النموذج‬
‫يسمح هذا العنصر لمستخدم الموقع لتعبئة نموذج و تسليمه للموقع‪ ,‬ولكن يجب عليك انت‬
‫كمصمم تحديد ما هو النموذج و شروطه‪ ,‬و يتم ذلك من خالل هذا المربع‬

‫الموقع الذي سيتم استالم‬

‫النموذج‬
‫الطريقة‪ :‬الحصول او االرسال‬

‫مكان ظهور النموذج‪ ,‬داخل او خارج‬

‫المتصفح‬
‫محتويات النموذج‪ :‬نص‪ ,‬صورة‪,‬‬
‫مدمج‪...‬‬
‫طريقة ارسال‬
‫النموذج‬
‫طريقة الغاء ارسال النموذج‬
‫حقل االدخال لمتعددة االسطر و ذو سطر الواحد‬

‫تستخدم لسماح مستخدمي موقعك لكتابة شيء معين‬

‫(مثل الشكاوي)‬

‫خصائص شروط‬
‫الكتابة‬
 ‫حمل ملف‬

‫يستخدم هذا العنصر من اجل سماح مستخدمي موقعك لتحميل ملفات‬

‫من خالل موقعك‬
 ‫حروف تحقق‬

‫يتم تفعيل هذا العنصر فقط بعد نشر الموقع على‬

‫االنترنت‬
 ‫زر ارسال النموذج‬
‫يستخدم هذا الزر ليسمح مستخدم موقعك ارسال ما هو يدخله الى‬
‫موقعك ( مثل النماذج)‬

‫اشكال مختلقة للزر‬ ‫خصائص الزر‬

 ‫يسمح لك هذا الخيار بوضع ‪ Google Maps‬في‬
‫‪Google Maps‬‬ ‫موقعك‬
‫و اذا كنت تريد تحديد موقع (مكان) معينة فاتبع خطوات االتية‬

‫‪-1‬اذهب الى موقع ‪ Google Maps‬و حدد الموقع الذي تريده ثم انقر‬
‫على ‪Share‬‬
 ‫‪-3‬بعد سحب العنصر الى محطة العمل‬ ‫‪-2‬قم بنسخ هذا‬
‫سيظهر لك هذا المربع‪ ,‬قم بلصق الرابط في‬ ‫الرابط‬
‫هذا الفراغ‬
 ‫‪RSS Feed‬‬ ‫يسمح لك هذا العنصر بربط موقعك بال‪RSS‬‬
‫‪Feed‬‬

‫عنوان ال‪RSS Feed‬‬

‫الوصف‬
‫الرابط االلكتروني ل‪S Feed‬‬
 ‫تعطيل الكبسة اليمنى من الفارة‬

‫يقوم هذا العنصر بمنع مستخدمي موقعك من امكانية الضغط الكبسة اليمنة من الفارة (اي انها‬
‫تفقد فعاليتها)‪ ,‬و يتم ذلك من خالل فقط سحب العنصر الى محطة العمل‪ .‬و تعرف انه تم تفعيله‬
‫من خالل ظهوره في هذا الشريط‬
 ‫ادخال موقع خارجي الى موقعك‬

‫تعمل نفس مبدا االرتباط التشعبي بفرق انه يجب عليك اختيار موقع خارجي‪ ,‬حيث يسمح‬
‫لك هذا العنصر امكانية اضافة موقع خارجي الى موقعك او عنصر منه‪ ,‬و سيظهر ذلك في‬
‫هذا الشكل على موقعك‬
‫يسمح لك هذا العنصر بتكبير صورة معينة عن غيرها من‬ ‫مكبر الصورة‬
‫الصور االخرى‬
‫ثم ستظهر لك هذه القائمة و‬ ‫انقر هنا الختيار الصورة التي‬
‫انقر على الصورة التي تريدها‬ ‫تريدها‬

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

 ‫بعد اختيار الصورة االصلية‪ ,‬اختر الصورة التي ستظهر‬
‫في التكبير‬

‫اختر الصورة التي‬

‫ستظهر في‬
‫التكبير‬
‫عنوان‬
‫الصورة‬
‫رابط الصو‬
‫رة‬
‫وصف‬
‫الصورة‬
 ‫يمكنك ربط موقعك بمواقع التواصل‬ ‫مواقع التواصل االجتماعي‬
‫االجتماعي‬

‫اختر المواقع الذي‬

‫سيظهر امام زائر موقعك‬

‫اختر الموقع الذي تريده‬

‫ادخل صفحة ‪Facebook‬‬

‫ادخل اسم المستخدم‬

‫في ‪Twitter‬‬
 ‫يقوم هذا العنصر بعد عذ الزائرين‬
‫الذين يقومون بدخول الى موقعك‬
‫عداد الدخول الى الموقع‬

‫نوع العداد‬

‫الرقم االبتدائي الذي سيبدا به‬

‫العداد‬
‫اكبر عدد من الخانات مسموح‬
‫به‬

‫عد دخول زائرين‬

‫محددين‬
 ‫مستند‬
‫الشكل النهائي للمستند ( الذي سيظهر في الموقع‬
‫يعمل هذا العنصر كمستند خارجي (محرر النصوص)‪,‬‬
‫امام الزائرين)‬
‫حيث تظهر لك هذه النافذة و تكتب بها ما تشاء‬

‫تحرير المستند‬