|--*¨®¨*--|تعلمي فرونت بيج 2000 |--*¨®¨*--|

[khat2000]

برنامج فرونت بيج 2000 هو برنامج شهير وشائع الاستعمال لتصميم صفحات الانترنت .

والبرنامج يتكون من 3 اقسام تجديه اسفله وهي :

Normal : وهو القسم الذي سنقوم به بجميع عمليات التصميم كالكتابة واضافة الصور الخ..

HTML : وهو القسم الذي سيكتب به البرنامج كود ال HTML حيث انه كلما اضفتي شيئا في قسم normal يقوم البرنامج بكتابته بلغة HTML بقسم HTML .

Preview : وهو قسم المعاينة حيث ستشاهدي به طريقة ظهور الصفحة للمتصفح. يمكنك كلما اضفتي شيئا في قسم نورمل ان تعاينيه في قسم المعاينة لتشاهدي طريقة ظهوره.

http://www.pcpages.com/webweb/aqsam.gif

ادوات المسطرة في البرنامج :

http://www.pcpages.com/webweb/drs1.gif

http://www.pcpages.com/webweb/fp2.gif

بد انك تعرفين هذه الادوات فهي شبيهه للادوات في برنامج الورد والاكسل . فهي غير بحاجة الى الشرح كثير .

بالنسبة للادوات الاخرى الخاصة في الجدوال والنماذج ، فلا تقلقي سيأتي شرحها تحت اقسامها

تعرفي علي واجهة Front page

تنسيق الصفحة ( الخلفيات وشكل الصفحة ولون الوصلات )

وانتي في قسم نورمل انقري على زر الفارة الايمن واختاري Page Propeties كما هو مبين في الصورة

http://www.pcpages.com/webweb/drs3.gif

الان ستفتح لك هذه النافذه الكبيرة , انظري الى الصورة وظيفة كل قسم في هذه النافذة.

http://www.pcpages.com/webweb/fp4.gif

لتغيير لون خلفية الصفحة او اختيار صورة كخلفية للصفحة اضغطي على علامة التبويب الثانية ، ستظهر لك الشاشة الاتية :
دعينا نتعرف بماذا تفيدنا هذه الشاشة.


http://www.pcpages.com/webweb/fp5.gif

بهذا يمكنك تغيير الخلفية ولون الوصلات لتلائم موقعك . عند اختيارك صورة خلفية فان هذه الصورة ستكرر على امتداد الصفحة

تابع

[khat2000]

التعامل مع الصور:

لاضافة صورة في صفحتك ، ضعي مؤشر الفارة في المكان الذي تودين ان تدرجي الصورة واضغطي على الزر
http://www.pcpages.com/webweb/imag-add.gif
عند الضغط على هذا الزر ستفتح لك نافذة تطالبك بادراج موقع الصورة ، يمكنك استعمال زر Browse لاستعراض الصورة المراد اضافتها.

يمكنك ايضا اضافة صورة من الكليب ارت التابع لبرامج اوفيس بهذه الطريقة.

http://www.pcpages.com/webweb/clipart.gif

طبعا يمكنك التحكم بحجم الصورة بعد ادراجها لتلائم الموقع.

وضع عدة ارتباطات لصورة واحدة بواسطة الفرونت بيج:

لعمل ذلك اتبعي الخطوات الاتية:

1-ادرجي الصورة في الصفحة
2-اشري الى الصورة بالفارة ، سيظهر في اسفل شاشة الفرونت بيج شريط ادوات الصورة.
3- ما يهمنا الان من هذا الشريط هما الاشكال الثلاثة الاتية http://www.pcpages.com/webweb/imagecut.gif وهما لتحديد قسم من الصورة بثلاثة خيارات مختلفة ، اضغطي منها ما تريدي وحددي القسم من الصورة المراد جعله ارتباطا .
4- بعد ان تكملي التحديد سوف تفتح نافذة اختيار الارتباط ، قومي بتحديد الارتباط الذي تودين الذهاب اليه عند الضغط على الجزء من الصورة واضغطي موافق. هذا كل شي.

التعامل مع الارتباطات والوصلات:

المقصود بالارتباط او الوصلة هو وضع نص او صورة ينقلك الى مكان او الى صفحة او الى ملف في مكان اخر .

سنشرح في هذا الدرس وصلات بنص ووصلات بصورة ووصلات تنقلك الى مكان اخر في نفس الصفحة وكذلك التعامل مع الوصلات لارسال رسالة الى بريد الكتروني او انزال ملف الخ...

وصلة بنص او بصورة:

1- قومي بكتابة النص المراد جعله وصلة .
2- حددي النص واضغطي على Insert --->hyperlink ستظهر لك نافذه شبيه بهذه.دعينا نعرفك ماذا يمكن فعله من هذه الشاشة.
http://www.pcpages.com/webweb/fp6.gif

بعد تحديد الوصلة اضغطي على OK ، لفحص الوصلة توجهي الى قسم المعاينة.

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

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

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


تسمى هذه الطريقة البوك مارك bookmark ووظيفتها انشاء وصلة تنقلك الى مكان معين داخل نفس الصفحة.



تابع

[khat2000]

لمعرفة طريقة انشاء البوك مارك اتبعي الخطوات التالية:

حددي النص او الصورة التي تريدي الزائر ان ينتقل اليها عند الضغط على وصلة معينة. بعدها اذهبي الى Edit --->BookMark . ستفتح لك النافذه الاتية:
http://www.pcpages.com/webweb/book.gif

في خانة Bookmark Name عليك كتابة اسم لهذه المنطقة ثم اضغط على OK .

الان حددي النص او الصورة التي تريدي الزائر ان يضغط عليها لينقله الى المكان الذي حددناه سابقا.
الان اذهبي الى insert -->Hyperlink


هذا هو ما نحتاجه في هذه المرحلة من النافذة الكبيرة

ستجدي ان الاسم الذي كتبتيه في الخطوة 3 موجود هنا ، قومي بفتح القائمة المنسدلة بجانب كلمة Bookmark وحددي الاسم الذي كتبتيه في الخطوة الاولى واضغطي OK .
الان قومي بمعاينة الصفحة لفحص الوصلة.

كتابة نص متحرك:

لانشاء نص متحرك

1- اذهبي الى insert -->component -->Marquee كما هو مبين بالصورة

http://www.pcpages.com/webweb/fp8.gif

بعدها ستظهر لك هذه الشاشة .

دعينا نعرفك ماذا يمكننا فعله في هذه الشاشة
http://www.pcpages.com/webweb/fp9.gif

بعد الضغط على OK يظهر النص امامك محدد في اطار ، اضغطي ضغطة واحدة على الاطار حتى تتمكني من تغير لون وصيغة وحجم الخط المكتوب داخل الاطار ، لمعاينة الحركة توجهي الى قسم المعاينة Prewiew من اسفل الشاشة

تابع

[khat2000]

التعامل مع الجداول:

لبناء جدول توجهي الى رمز ادراج جدول في شريط الادوات والذي تم ذكره في الدرس الاول ( التعرف على ادوات البرنامج) واختاري عدد الاعمدة والصفوف التي تريديها .
يمكنك ايضا اضافة جدول بالتوجه الى table -->insert table ثم تحديد المقاسات الملائمة والضغط على OK .

الان يوجد عندك جدول في صفحتك ، لاعادة تخصيص وتغيير في اعدادت الجدول اضغطي في اي منطقة في الجدول بالزر الايمن واختر table properties . ستظهر لك الشاشة الاتية
http://www.pcpages.com/webweb/table1.gif

دعينا الان نعرفك ماذا يمكننا ان نستفيد من هذه الشاشة:

(1): لتحديد موضع الجدول في الصفحة .
(2): لتحديد المسافة بين الخلايا .
(3): من هذا الخيار يمكنك اخفاء حدود الجدول في المتصفح وذلك بوضع قيمة سمك الإطار Border=0 ، ويمكنك من هنا أيضاً زيادة سمك الإطار .
(4): لاختيار لون الإطار حول الخلايا .
(5): لاختيار لون خلفية للجدول .
(6): لاختيار صورة كخلفية للجدول .
(7): لاختيار عرض وارتفاع خلايا الجدول .
(8): باختيار لونين مناسبين من الخانتين Light border و Dark border يمكنك جعل خلايا الجدول وكأنها بارزة .. وهذا سيعطيها مظهر جميل .
قومي باختيار ما شئتي من خصائص واضغطي OK

الاعدادت التي تختاريها هنا تطبق على جميع خلايا الجدول . اما اذا اردتي تغيير خصائص خلية واحد في الجدول او مجموعة خلايا فقومي بالاتي:

حددي الخلية لو الخلايا المراد تغيير خصائصها واضغطي على زر الفارة الايمن واختاري Cell properties ستظهر لك النافذة الاتية :


http://www.pcpages.com/webweb/table2.gif

هذه الشاشة شبيهة بالشكل والاوامر وطريقة التعامل مع شاشة خصائص الجدول لذلك لا يلزم شرحها ثانية!!!

[khat2000]

بناء صفحة اطارات:

القصد بالاطارات هو تقسيم الصفحة الى اقسام كل منها يعد اطار خاص ومنفصل عن الاخر لا يتغير بتغيير الاخر .

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

الاطارات:

يمكنك الحصول على صفحة اطارات جاهزة لموقعك من برنامج الفرونت بيج وذلك باختيار File-->new-->page من ثم اختيار علامة التبويب frames وستظهر لك النافذة الاتية:
http://www.pcpages.com/webweb/f1.gif

ستظهر لك عدة أشكال للفريمات ، يمكنك معاينتها في القسم الأيمن السفلي من مربع الحوار بالتأشير على ما تريدي ، وبعد الاختيار اضغطي OK .
وإليك المثال التالي

http://www.pcpages.com/webweb/f2.gif

إذا أردتي أن تنشئي صفحة جديدة في أي إطار اضغطي NewPage .
- أما إذا كانت لديك صفحة جاهزة وتريدي ظهورها في أحد هذه الإطارات فاضغطي Set initial Page .
** بعد ذلك قومي بتحديد خصائص كل إطار على حده كالتالي :
أ-اضغطي بيمين الفأرة على الإطار الذي تريدي تحديد خصائصه .
ب- من القائمة اختر Frame Properties .
ج- سيظهر لك مربع خصائص هذا الفريم كالتالي :

http://www.pcpages.com/webweb/f3.gif

1- اسم هذا الفريم .
2- عنوان الصفحة التي ستدرجيها في هذا الفريم .
3- عرض هذا الفريم .
** ملاحظة : لكي لا يتشوه شكل الإطارات باختلاف دقة العرض اتبعي التالي :
كما في الشكل السابق هناك اطاران فقط ، أيمن وأيسر . إذا كانت القائمة في اليسار والصفحة الرئيسية في اليمين فسنقوم بتحديد عرض إطار القائمة بالبكسل ، ونترك الآخر يتغير تلقائياً حسب دقة العرض للمتصفح .
- مثلاً : نجعل عرض القائمة 150 بكسل ، وعرض إطار الصفحة الرئيسية نتركه 1 Relative .
4- ارتفاع الإطار ، وهذا لن تحتاجيه إلا إذا استخدمتي إطارات في الأعلى أو في الأسفل .
5- قومي بإزالة الإشارة من مربع التدقيق إذا كنتي لا تريدي لمن يتصفح موقعك أن يغير مقاسات الإطارات .
6- اضغطي هذا الزر واجعلي قيمة Frame Spacing صفراً ، لإخفاء حدود كل الإطارات .
7- هذا الخيار خاص بأشرطة التمرير الرأسية والأفقية حيث أن :
- If Needed : ظهور الشريط عند الحاجة له .
- Always : ظهوره باستمرار .
- Never : عدم ظهوره نهائياً .
[ وبنفس الطريقة يمكنك تحديد خصائص الفريم الآخر ]

http://www.pcpages.com/webweb/f4.gif

- اضغط يعلى على زر Target Frame ، سيظهر لك الشكل التالي :

http://www.pcpages.com/webweb/f5.gif

يمكنك اختيار مكان فتح الصفحة من الخانة (1) بالتأشير بالفأرة . أو من اختيار العبارة المناسبة من الخانة (2) ، حيث :
Page Default [main : لفتح الصفحة في الإطار الافتراضي المسمى main .
Same Frame : فتح في نفس الإطار .
Whole Page ,Parent Frame : فتح في إطار كامل ( صفحة كاملة ) .
New Window : فتح في نافذة جديدة ، بحيث تبقى الصفحة الأولى مفتوحة .
5_وأخيراً اضغطي OK

[هنـــد]

شيء راااااااااااااااااااااااائع

بس الصور مش طالعة :(

[ســارة]

بالفعل كنت بقول
بس خفت خات تزعل:(

[روائع]

مشكورررة كتكوتة ..
حتى انا مو طالعة عندي (وجه يبكي)

[ســارة]

الله يعين..اختى خات وينك؟
نفسي اتعلم فرونت بيج
حمليهم على مركز تحميل يعمل عندنا بالامارات
انتظرك:)

[دمعه]

مشكوره حبيبتي كاتي على البرنامج الرائع

والصور طالعه عندي ;)

[khat2000]

أختي سارة عادي ياعسل مابزعل بس غريبة الصور مو طالعة عندكم وطالعة عند الاخت دمعة ؟؟

[ليدي الامورة]

http://www10.0zz0.com/2011/11/25/04/568492164.gif