الســــــلام عليــــكم ورحمه الله وبــــــــركاتة
اخواني اخواتي الاعزاء بمنتديات هاني نت
ضمن سلسلة الدروس الاحترافية في منتدى تصميم وتطويرالموقع بقيادة الاستاذ / عبادي
الله يرجعه لنا بالسلامة اللهم امين ،،،
والذي حاب انني اشرح برنامج الفرونت بيج لعدم التاخير في طرح الدروس لكي تعم الفائدة المرجوة،،
هذا هو الدرس الأول من سلسلة دروس تعليم برنامج الفرونت بيج 2000
والآن افتح الفرونت بيج2000 ، ستجد أن الإطار أسفل البرنامج يحتوي على ثلاث أقسام هي
Normal /
HTML /
Preview .
* القسم Normal : هو منطقة العمل التي سيتركز فيها شرحنا .
* القسم HTML : لمشاهدة الكود الذي يكتبه البرنامج خلف الصفحة .
* القسم Preview : لمشاهدة الصفحة كما ستظهر للمتصفح ..
لذلك بعد أن تضيف شيء للصفحة في قسم Normal قم بمشاهدة طريقة ظهوره
في منطقة Preview .
* إليك الآن شرح أهم رموز أشرطة أدوات فرونت بيج 2000 :
بعد أن حددت موضوع موقعك وتعرفت على واجهة فرونت بيج 2000 ابدأ التنفيذ الآن :
أولاً : حدد خصائص الصفحة ... كيف ؟
في أي مكان فارغ في الصفحة اضغط يمين الفارة واختر من القائمة المنسدلة Page Properties
ستظهر لك النافذة التالية :
حدد ما تريد... بعد ذلك اضغط في الأعلى
على علامة التبويب Background ستظهر لك النافذة التالية :
حدد ما تريد ثم اضغط OK .
ـــــــــــــــــــــــــــــــــــــــــــــ
ثانياً : ابدأ بتحرير الصفحة وإدراج الصور وعمل الارتباطات بين الصفحات .... كيف ؟
* لإدراج نص في الصفحة : ضع المؤشر في أي سطر تريد وفي أي جههة ( وسط أويمين أو يسار ) ثم ابدأ بالكتابة .
[ ملاحظة : عند الكتابة في الفرونت بيج وأردت الانتقال للسطر التالي لإكمال الجملة السابقة بالضغط على Enter ستكون المسافة كبيرة بين السطور ولكن اضغط ( Shift+Enter ) . ] * لإدراج صورة : افتح القائمة Insert ثم اختر Picture ستفتح قائمة اختر منها From File بعد ذلك اختر الصورة التي تريدها واضغط OK .
* لوضع وصلة أو ارتباط أو لنك أو حسب ما تسميها ، تنقلك لصفحة أخرى أو لصورة أو لمستند وورد أو لأي ملف عند الضغط عليها :
1- اكتب اسم الارتباط : مثلاً .. لمشاهدة صفحتي الشخصية "اضغط هنا" .
2- ظلل "اضغط هنا " .. وهي الجلة التي تريدها أن تصبح ارتباط لصفحتك الشخصية .
3- افتح القائمة Insert واختر منها Hyperlink أو اضغط Ctrl+K في لوحة المفاتيح .. ستظهر لك النافذة التالية
(1) : في هذه المساحة ستظهر الصفحات التي قمت بحفظها ..
وهذا سيسهل عمل ارتباط إلى هذه الصفحات ..
فقط أشر بالماوس على الصفحة التي تريد ربطها بجملة " اضغط هنا " وستكتب مباشرة في الخانة (2) ، ثم اضغط OK .
(2) : في هذه الخانة يمكنك كتابة اسم الصفحة مباشرة مع امتدادها وهو (htm.) .
(3) : بالضغط على هذا الرمز ستفتح لك نافذة جديدة يمكنك من خلالها
أن تستعرض مجلدات وملفات جهازك واختيار ما شئت لتربطه بالجملة المظللة في الصفحة .
(4) : بالضغط على هذا الرمز ستفتح لك نافذه لعمل ارتباط إلى بريد إلكتروني .. عند الضغط على الوصلة في المتصفح يفتح برنامج البريد الإلكتروني الافتراضي للشخص المتصفح ليرسل لك رسالة على العنوان التي ستكتبه في هذه النافذة .
بعد أن تختار نوع الملف الذي ستربطه بجملة " اضغط هنا " اضغط OK .
ستلاحظ أن جملة "اضغط هنا" أصبح تحتها خط أي أنها أصبحت ارتباط لصفحة أخرى أو لملف آخر .
[ وبنفس الطريقة تقوم بعمل جميع الارتباطات في موقعك .. جرب عمل وصلة أخرى لملف من نوع آخر !!] .
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــ
كيف سأحفظ صفحاتي وبقية ملفاتي في الجهاز ؟؟؟
1- قم بحفظ الصور التي ستستخدمها في موقعك بأحد الامتدادين jpg أو gif .
* حيث ستستخدم امتداد jpg للمناظر الطبيعية أو الصور التي لا تقبل تقليل ألوانها حتى لا تفسد دقتها .
* أما امتداد gif فهو للجرافيك التي ستقوم بعملها في برنامج الرسم لديك .
2- يجب حفظ جميع ملفاتك من صفحات وصور .. إلخ في مجلد واحد وبعد ذلك قم بعمل ارتباطات إليها .. وذلك حتى لا تحدث مشاكل في ظهورها عند ارسالها إلى الشبكة ... كيف ؟؟؟؟
[ يفترض فرونت بيج حفظ جميع صفحاتك في المجلد التالي C:\mydocument\my*** .. لذلك يجب عليك أن تضع جميع
ملفاتك التي ستستخدمها في مجلد my*** قبل عمل اي ارتباط لها . أما بالنسبة للصور فيفترض فرونت بيج لها مجلد داخل مجلد my*** وهو images لذلك يفضل أن تضع الصور والجرافيك فيها خاصة اذا كان موقعك به عدد كبير منها .. أي ستحفظها في c:\mydocument\my***\images وبعد ذلك تقوم بإدراجها في الصفحة أو تصنع لها ارتباط كما
تعلمت في السابق .. وبذلك يكون مسار استخدامها صحيح وتظهر عند ارسالها للشبكة بدون مشاكل بمشيئة الله ] .
* طريقة حفظ الصفحة في الجهاز بعد عملها :
افتح القائمة File واختر Save ستفتح لك النافذة التالية :
في الخانة File name اكتب اسم الصفحة .. كما يمكنك تغيير عنوان الصفحة الذي حددته
مسبقا في خصائص الصفحة من هذه النافذة وذلك بالضغط على Change فوق اسم الصفحة بعد ذلك اضغط Save ستلاحظ أن البرنامج حفظها في مجلد my*** كما ذكرنا سابقناااااا
.
** ملاحظات مهمة **
1- يجب أن يكون اسم الصفحة الرئيسية Index وذلك حتى تظهر مباشرة
عند كتابة عنوان موقعك في المتصفح دون الحاجة إلى كتابة اسم هذه الصفحة .
2- يجب أن تستخدم الحروف اللاتينية لكتابة اسم الصفحة أو أي رمز من الرموز المعروفة
والموجودة في لوحة المفاتيح ولا تستخدم حروف عربية أو رموز غريبة ـــــــــــــــــــــــــــــــــــــــ
* كيف سيكون مسار ملفاتي في الشبكة ؟؟؟
أنت في جهازك قمت بحفظ ملفاتك في مجلد my*** الذي مساره c:\mydocument\my*** هذا المسار سيستبدل باسم موقعك أي سيصبح مثلا
www.hani50.com، وستنقل ملفاتك إلى الشبكة بنفس ترتيبها في جهازك ..
فمثلاً أنت لديك مجلد تحفظ فيه جميع صور موقعك وهو باسم images ..
لذلك ستقوم بإنشاء مجلد بنفس الاسم في موقعك في الشبكة وتضع فيه جميع الصور المستخدمة .
أما بالنسبة للملفات الأخرى مثل صفحات الويب التي قمت بعملها والتي تتميز بامتداد (htm.) ،
أو مستند وورد ، أو غيرها فأنت وضعتها في جهازك في مجلد my*** جنباً إلى جنب مع مجلد images ..
لذلك سترسلها إلى الشبكة بجانب مجلد images ..
وبذلك لن تحدث مشاكل في فتح الارتباطات على الشبكة بمشيئة الله
ـــــــــــــــــــــــــــــــــــــــ
كيف تتعامل مع الجداول في فرونت بيج 2000
استخدام الجداول في صفحتك يجعل منها اكثر تنظيماً واحترافاً ...
فمن غير الجداول لن تستطيع توسيط نص بجانب صورة أو تضع نصوص
على شكل أعمدة متجاورة أو تضع خط رأسي أو أو ... إلخ .
لذلك نحن نصحك باستخدام الجداول في صفحتك واتقانها !!
*** والآن ابدأ باستخدام الجداول :
اضغط على رمز ادراج جدول في شريط الأدوات العلوي
( راجع شرح الرموز في الخطوة الأولى ) واختر عدد الأعمدة والصفوف التي تريدها .
أو استخدم insert>table وحدد عدد الخلايا .
* ستلاحظ أن حدود الجدول الداخلية والخارجية بارزة ..
فماذا لو كنت تريد حدود الجدول مخفية في (Preview) وظاهرة في قسم (Normal) للتعامل معها وتدرج ما تريد ؟؟ ... بسيطة !!
ضع المؤشر في أي خلية داخل الجدول وانقر يمين الفارة
ستفتح قائمة اختر منها Table Propeties ستفتح لك نافذة توضح خصائص الجدول وهي كالتالي :
(1): لتحديد موضع الجدول في الصفحة .
(2): لتحديد المسافة بين الخلايا .
(3): من هذا الخيار يمكنك اخفاء حدود الجدول في المتصفح وذلك بوضع قيمة سمك الإطار Border=0 ، ويمكنك من هنا أيضاً زيادة سمك الإطار .
(4): لاختيار لون الإطار حول الخلايا .
(5): لاختيار لون خلفية للجدول .
(6): لاختيار صورة كخلفية للجدول .
(7): لاختيار عرض وارتفاع خلايا الجدول .
(
: باختيار لونين مناسبين من الخانتين Light border و Dark border يمنكنك جعل خلايا الجدول وكأنها بارزة .. وهذا سيعطها مظهر جميل .
قم باختيار ما شئت من خصائص واضغط OK .
** ملاحظة **
( أي اختيار ستختاره من خصائص الجدول سينطبق على جميع خلايا الجدول ) .
ولكن ماذا لو أردت تطبيق خصائص معينة على خلية واحدة أو مجموعة من الخلايا دون البقية ؟؟ الأمر بسيط ..!! 1- لخلية واحدة ضع المؤشر بداخلها .. ولعدة خلايا قم بتحديد هذه الخلايا .
2- اضغط يمين الفارة واختر Cell Properties ستظهر لك النافذة التالية التي توضح خصائص الجدول
ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــ
**اضافة عناصر فعاله لصفحة الانترنت
سنتعلم في هذا الدرس اضافة بعض العناصر الفعاله التي تجعل الصفحه اكثر جاذبيه
في البدايه نود ان نعرف عن كيفيه اضافه كبسات في الصفحه وفي الدروس القادمه
سنشرح كيفية التنقل بها .. في البدايه نتحرك كما موضح في الشكل التالي:
سيظهر لنا المربع التالي الذي من خلاله سنتحكم بشكل الكبسه ولونها والكلام الذي بداخلها الان من هذه الشاشه يمكنك ان تغير الكلام الذي تود ان يكون مكتوبا بداخل الكبسه وكذلك اللون والتغيير الذي يحدث للون عند مرور الماوس فوق الكبسه بالاضافه الى حجم الكبسه فامكانك تغيير الطول والعرض والاهم من ذلك في داخل المربع الصغير الثاني بامكانك ان تختار اسم الصفحه التي تود عند الضغط على الكبسه الذهاب اليها اي صفحة اخرى
الان نود مثلا ان نضيف نص متحرك من اليمين نحو الشمال او بالعكس بالوان مختلفه ..
في البدايه نتجه كما هو في الشكل التالي
الان ستظهر لديك هذه الشاشه التي من خلالها بالامكان ان تضع الجمله التي تريدها وتتحكم بسرعة
حركتها سواء من اليمين الى اليسار او بالعكس وكذلك التحكم بلون الخلفيه او لون الخط
والاهم من ذلك عدد المرات التي يراد فيها الحركه ام تظل مستمره وذلك بأختيار اعدادت Repeat
ـــــــــــــــــــــــــــــــــ
**اضافة ملفات فيديو
في هذا الدرس سنتعلم كيفية اضافة فيلم فيديو او مقطع من صور متحركة في صفحة الانترنت
في البدايه يجب ان تضع المؤشر في المكان الذي تود ان يظهر فيه الفيلم ثم اتجه بالماوس
كما هو موضح بالشكل التالي
ستظهر لديك الشاشه التاليه لكي تحدد موقع الملف اوالفيلم المراد اضافته للصفحه
مع ملاحظه انه يجب ان يكون احد الامتدادات المستخدمه في البرنامج
حيث لايدعم برنامج الفرونت بيج غيرها من افلام فيديويه والامتدادات المستخدمه هي
avi , ra , ramوالان وبعد ان قمت باختيار الموقع للملف سيظهر في الصفحه مستطيل اسود اللون الان مرر الماوس
من فوقه واضغط على الكبسه اليمنى لتحدد خصائص عمل هذا الفيلم في صفحتك
فتظهر لك قائمه بالشكل التالي
الان قم بتحديد عدد المرات التي تود ان يظل الفيلم يعمل اي عند انتهاء الفيلم
هل تود ان يظل اعاده العرض مرة اخرى اوتوماتيكيا لعدد محدد ام بدون عدد مرات محدده كذلك
تحدد متى يبدأ هل عند بداية ضهور الصفحه او عند مرور الماوس فوق الفيلم
لتشاهد الفلم اضغط على استعراض
ـــــــــــــــــــــــــــــــــــــــــــــ
**اضف عداد لصفحتك
في هذا الدرس سوف نتعرض الى اضافة عداد الى صفحتك يقوم بعرض عدد مرات الوصول الى صفحتك حيث يسجل
عددالزيارات التي تلقاها موقع الويب مع ملاحظة ان العداد لا يعتبر ذو مصداقيه مؤكده
حيث يمكنك جعل العداد يبداء من اي عدد وليس من القيمة صفر بل بامكانك
ان تجعله يبدأ من رقم معين ولكن يستفيد منه المصمم لتعقب فاعلية الموقع
ولادراج العداد في صفحتك اتبع الخطوات كما هو في الشكل التالي
في هذا الشكل يظهر لديك شكل العداد الذي تود ان يكون في اسفل الصفحه طبعا التي
تريد ان تضع فيها العداد مع ملاحظة الخيارات المتوفره وهما الاول الرقم الذي تود ان يبدأ العداد
بالعد منه عادة يكون صفرا وبامكانك كما ذكرنا ان تجعله يبدأ من الرقم الف مثلا اما الخيار الثاني
فهو عدد الخانات التي تود ان يتكون منها العداد
الان وبعد ان قمت باختيار شكل العداد الذي تريده ستظهر لديك هذه الجمله في صفحتك
لاتقلق حتى لو ذهبت الى شاشه العرض ايضا لن يظهر العداد حيث سيظهر فقط عند عمله
على الانترنت بعد عملية تسكينه وهذا ما سنعرفه في الدروس القادمه ان شاء الله
ـــــــــــــــــــــــــــــــــــــــــــــــــ
**استخدام خلفيات جاهزه
يتوفر في برنامج الفرونت بيج مكتبه جاهزه للخلفيات والاطارات والكبسات الجاهزه
ذات الوان وأشكال مختلفه كما بالامكان عن طريق الانترنت الحصول على العديد من هذه المكتبات
سنتعرف في هذا الدرس على كيفية استخدام المكتبه المتوفره مع نسخه البرنامج
وذلك باتباع الخطوات التاليه
ستظهر لديك الشاشه التاليه التي يتوفر فيها لديك العديد من الخلفيات الجاهزه
اختر جميع الاعدادات لكي تتعرف على جميع التنسيقات الجاهزة ولتعرف ايها يناسبك ، الان وبعد ان قمت بالاختيار تكون قد انتهيت من هذه العمليه مع ملاحظه انه يتوفر على الانترنت في موقع الفرونت بيج العديد من المكتبات التي تحتوي على خلفيات وبأعداد كثيره من الثيمات والتلمبات،،،
ـــــــــــــــــــــــــــــــــــــــــــــ
يتبــــــــع>>>>>