سلسلة دروس تعليم الفرونت بيج...(13 درس)...بالصور و

السلام عليكم ورحمة الله وبركاته
مجموعة من الدروس حبيت ان انشرها في
المنتدى لتكون مرجع للمبتدئين في تصميم
المواقع كما ممكن ان تفيد
المتقدمين...مبدئيا قمت بعمل 14 درسا وان شاء
الله يزدادوا واتمنى لكم
الاستفادة جميعا
الدرس الاول


شرح اساسيات التعامل مع برنامج الفرنت بيج
شرح الامور الاساسية في برنامج الفرنت بيج وهي
شرح للازرار في برنامج الفرنت بيج
واهمية هذه الازرار انها تسهل العمل
عليكم وتعطيكم سرعة في التعامل مع
برنامج الفرنت بيج






1-صفحة جديدة
2-فتح صفحة
3-حفظ صفحة
4-البحث
مثلا اذا اردت ادراج صورة ولا تعرف مكانها فيمكنك من خلال هذه الاداة ان تبحث عنها
5-لتحميل صفحات النت الى الموقع فبعد ان تضغط عليها
سيظهر لك مربع ضع فيه
عنوان موقعك ومن ثم سيظهر مربع اخر ضع فيه اسم
المستخدم وكلمة السر وسيبدء التحميل
6-يقوم هذا الزر باظهار جميع
الملفات والمجلدات الموجودة في مجلد my webs
الخاص بالصفحات التي
تعملها فيظهرهم هلى شمال الصفحة بحيث يمكنك من فتح الملفات بسرعة
دون الحاجة الى الضغط على زر فتح صفحة ومن ثم البحث
7-طباعة صفحة
8-استعراض الصفحة في متصفح قبل ما تحفظ الصفحة
9-المدقق الاملائي
10-قص
11-نسخ
12-لصق
13-زرعمل جميل جدا اذا مثلا قمت بكتابة نص وحددت نوع الخط وحجمه ولونه ومن

ثم كتبت نص اخر فبدل ما تقوم بعمل التنسيقات مرة اخرى فهذا الزر هو الحل قم
اولا بتحديد النص السابق الجاهز ومن ثم اضغ طعلى هذا الزر مرتين ومن ثم اذهب الى
النص الجديد واضغط على النص مرة واحدة
14-زر الرجوع عن امر ما اذا قمت بامر ولا تريده قم بالضغظ عليه
15-زر اعادة عمل اذا قمت بامر ولم تريده فاضغظ على زر الرجوع ولكن غيرت
رايك واردت ان ترجع الى الامر السابق فاضغط على زر الاعادة
16-مكونات الويب:زر يحتوى على الكثير من العمليات التزيينية للنصوص والصور
17-ادراج جدول
18-ادراج صورة
19-اظهار شريط الرسم الموجود في اسفل البرنامج
20-اضافة رابط
21-عمل
تحديث للصفحة:يمكنك استخدامه فقط في وضع ال preview
22-عمل توقيف
للتحميل:يمكنك استخدامه فقط في وضع ال preview
23-عمل بنط للنص يعني تضخيم الكلام
24-عمل الكلام مائل
25-اضافة خط تحت الكلام
26-وضع النص في اليسار
27-توسيط النص
28-وضع النص في اليمين
29-اتجاه النص:من اليسار الى اليمين للكلام الاجنبي
30-اتجاه النص:من اليمين الى اليسار للكلام العربي
31-اعتبار الكتابة كلغة انكليزية
32-يستخدم هذا الزر في حال كنت تكتب بلغتين في سطر واحد حيث قد تظهر
الكتابة بشكل غير مرتب هذا الزر سيرتب النص وهو على عكس الزر السابق
33-تكبير النص
34-تصغيرالنص
35-ترقيم السطور
36-تحديد السطور بنقاط او اشكال مختلفة
37-تحريك النص الى اليسار
38-تحريك النص الى اليمين
39-اضافة اشكال معينة ام
اطار للنص او خط ...الخ
------------
اما بالنسبة للازرار الموجودة
داخل المستطيل الاحمر فهذه قمت بتحديدها داخل مستطيل
لانها لا تظهر دائما وهي خاصة بالصور فقط
ساشرح الازرار من اليسار الى اليمين تماما كالشرح السابق
1-اضافة صورة من ملف
2-للكتابة على الصور بحيث عند الضغ طعلى هذا الزر يظهر مربع على الصور
فاكتب فيه ما تريد ويمكنك
وضع المربع اينما تريد ولكن نوع الصورة يجب ان يكون gif
3-تصغير النص
تلقائيا thumbnail
4-زر تحريك الصورة بحيث يمكنك وضعها اينما تريد
5-جلب الصورة الى الامام بحيث تغطي ما تحتها
6-وضع الصورة في الخلف بحيث يصبح كل شيء فوقها
7-تدوير الصورة الى الشمال
8-تدوير الصورة الى اليمين
9-قلبها افقيا
10-قلبها عاموديا
11-التعديل على الالوان زيادة
12-عكس السابق
13-تفتيح الوان الصورة
14-عكس السابق
15-قص منطقة معبنة من الصوة فاضغط اولا على الزر ومن ثم سيظهر مربع على الصورة اختار الجزء
الذي تريد ومن ثم اضغط على الزر مرة اخرى حتى يتم قص الجزء الذي اخترته
الزرين المطفئين لا دخل لهم بالتاثيرات على الصور اتركوهم
16-جعل الصورة شفافة احيانا تكون الصورة لها خلفية مثلا ابيض فبهذه الاداة تختفي
الخلفية للصورة طبعا الخلفية بلون واحد اما الخلفية المعقدة بالوان كثيرة فلن تتمكن من
نزعها بهذه الاداة ويجب ان تستخدم برنامج الفوتوشوب
17-تاثيرات على الوان الصورة فمثلا grayscale يعني جعل الوان الصورة بالابيض والاسود
18-اضافة اطار للصورة
19-تغيير بحجم الصورة
20-جعل الماوس بوضعه الطبيعي يعني مثلا قمت بالضغظ على زر تحديد الشفافية فاذا
لم ترد ان تغير الشفافية فاضغط على هذا الزر
21-لاضافة رابط على كلام موجود على الصورة
22-نفس السابق ولكن شكل الاداة مختلف
23-نفس السابق ولكن شكل الاداة مختلف
24-تحديد منطقة معينة في الصورة التي تعمل عليها والقسم السابق سيختفي وبعدان
تنتهي اضغط على الزر مرة
اخرى حتى تظهر المنطقة الهدف من ذلك للتركيز على عملك
25-زر كما كان
يعني بعد ما تعدل على الزر واضفت كلام واضفت روابط اذا لم يعجبك ما
عملته فاضغط على هذا الزر حتى ترجع الصورة كما كانت في الاساس
انتهى الدرس الاول

الدرس الثاني
طريقة
اضافة رزنامة الى موقعك
اولا اذهب الى:
1-insert
2-web component
ومن ثم اتبع الشرح كما في
الصور








انتهى الدرس الثاني

الدرس الثالث
طريقة
اضافة عداد زوار الى
موقعك
اولا
ادخل الى :
1-insert
2-web component
ومن اتبع الشرح كما في
الصور






طبعا العداد لن يعمل الا
لما
تحمله على النت على موقعك ومن ثم
بعد ما
يدخل الزوار موقعك
رح يبدا العداد بالعمل








انتهى الدرس الثالث

انتهى الدرس الرابع

الدرس الخامس
اضافة
تاثيرات على
الصور(تاثيرات DHTML)
اولا
نعمل ادراج لصورة
وبعدين نختار:
1-format
2-Dynamic HTML Effects

فاولا تاثير click(الضغط
مرة واحدة بالماوس)
عندنا خياران في apply الاول وهو fly out(طيران الكلام او
الصور)
وهو نفس التطبيق على
الكلام كما
اما الخيار الثاني فهو
swap
picture(تغيير الصورة)
ولعمل هذا الخيار اتبع الشرح كما في الصور

نختار click
ومن ثم

اما choose settings فما فيه الا خيار واحد
choose picture
بعدين اختار الصورة التي
تريد ان تتغير اليها الصورة الاولى
عند الضغط عليها بالماوس
ثانيا تاثير double click
خيار واحد في apply وهو
fly out
والثاتثر الثالث وهو mouse
over عندنا خيار واحد وهو swap picture و
التاثير
الرابع وهو page
load
نفس الشرح على الكلام


انتهى الدرس الخامس

الدرس السادس
اضافة اضاءة على الازرار
اولا ندخل الى :
1-insert
2-web component
ومن ثم اتبع كما في الصور










ويمكن ان تغير لون
اللاضاءة من خلال تغيير
Effect color الى اللون التي تريد
ويمكن اضافة تاثيرات اخرى
وهي كالتالي:
color fill يتغير لون الزر كاملا
color average يتغير لون
الزر كاملا ولكن بلون ابهت من
التاثير السابق
Glow ليضيء الزر بالوسط
Reverse glow ليضيء من
الاطراف
Light
glow اضاءة خافتة
Bevel out حتى يميل الخط للخارج
Bevel in حتى يميل الخط
للداخل
لا
يمكنك ان ترى التاثير الا بعد ان تحفظ الملف وبعد ان
اتحفظه سيتم اضافة
ملفين,الاول اسم
fphover.class
والثاني باسم
fphoverx.class
هذين
المفلين لازم ايضا ترفعهم الى موقعك بنفسم المسار للملف الموجود فيه
الزر

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

نقوم باختيار اداة التحديد وهناك ثلاثة انواع :
1-تحديد
كمربع
2-تحديد كدائرة
3-تحديد باي شكل تريد

بعد تحديد المنطقة التي تريد ان تضيف اليها الرابط


رح تطلع لك نافذة لتحديد الرابط





انتهى الدرس السابع

الدرس الثامن
طريقة اضافة مشغل الميديا
الى موقعك(windows media player)
ومن ثم عرض مقاطع موسيقية او افلام

اولا اذهب الى:
1-insert
2-web component
ومن
ثم اتبع الشرح كما في الصور



اذا لم تجد
هذا الخيار
فاضغط على customize وابحث عن windows media player
ومن ثم شيك المربع
اللي بجانبه واضغط على ok وبعدين تختاره كما في الصورة
السابقة






واخيرا تضغط على ok
ومن ثم اضغط
على preview في الفرنت بيج
انتهى الدرس الثامن

الدرس التاسع
طريقة اضافة نص متحرك
1-insert
2-web component
ومن ثم اتبع الشرح كما في الصور






مثال

انتهى الدرس التاسع

الدرس العاشر
طريقة اضافة تاثيرات على
الروابط
لاضافة تاثير على الروابط
عند
مرور الماوس عليها مثلا تكبير الخط او تغير لون الخط او اضافة او اخفاء
الرابط الخ
اولا نعمل الرابط وبعدين نذهب الى:
1-format
2-background

ومن ثم تطلع عنا مثل هذه الصورة

من هنا يمكننا ان نضيف التاثيرات فمثلا اذا اردنا ان يكبر
الخط
عند مرور الماوس على الرابط فنغير بحجم الخط فقط او لتغيير اللون عند
مرور
الماوس على الروابط نغير اللون ...الخ

انتهى الدرس العاشر

1-insert
2-web component
ومن ثم اتبع الشرح كما في
الصور