تعلم تصميم المواقع بالفرونت بيج بالصور

[center]2-1
هيـــا الى الـــعمـــل !!
* لنبدأ العمل الآن بأول خطوه وهي انشاء الملف الذي سيتضمن جميع صفحات موقعك ومايختص به
1- اولا قم بتشغيل برنامج فرونت بيج
2- من القائمه الرئيسيه اختر file>New>##################### أو بالعربيه اختر ملف < جديد
يعرض لك الان فرونت بيج مربع
قم باختيار one page ##################### أو (بالعربيه) اختر : موقع ويب ذو صفحة واحدة
بعد ذلك احذف النص المكتوب في الفراغ تحت
specify the location of the new ##################### او بالعربية : حدد موضع موقع ويب الجديد
وادخل مايلي C:/My #####################s/Cocktail
أو قم باستبدال Cocktail بالاسم الذي ترغب أن يكون اسم موقعك
بعد ذلك اضغط Ok. انظر الشكل 2-2.

2-2
* ملاحظه لقد قمنا بادخال Cocktail كمثال
ويمكنك ادخال بديل له كاسم موقعك الذي تريد انشاءه.
بهذا تكون قد أنشأت ملفا خاصا بصفحات موقعك سيتضمن بعد ذلك جميع الملفات والصور التي تخص موقعك. هيا بنا الآن الى الدرس الثاني.

* ملاحظه لقد قمنا بادخال Cocktail كمثال
ويمكنك ادخال بديل له كاسم موقعك الذي تريد انشاءه.
بهذا تكون قد أنشأت ملفا خاصا بصفحات موقعك سيتضمن بعد ذلك جميع الملفات والصور التي تخص موقعك.
يتبع...



الــدرس الثاني

ادراج الصفحات والنصوص

الآن وبعد أن أنشأنا ملفا خاصا للموقع ستتعلّم كيفية ادراج الصفحات وحفظها وتسجيلها لتنضم لباقي ملفات موقعك.
1- من القائمة File اختر New>Page
او بالعربيه اختر : جديد , ثم من القائمه اختر : صفحة فارغه
2- الان من أعلى القائمة اختر Save لحفظ أو تسجيل الصفحه
فيعرض لك فرونت بيج لوحه
ستجد فراغا مكتوبا أمامه File name . قم بحذف new_page_3 مثلا وادخل على سبيل المثال mypage
أو اسم الصفحه التي تريد حفظها
مع ملاحظه ان الصفحه الرئيسيه للموقع يجب أن تكون باسم
index
بعد ذلك اضغط save لحفظ الصفحه بالملف الخاص لموقعك.
ملاحظه ::: الفرونت بيج ينشيء صفحة الاندكس تلقائيا في مجلد الموقع يمكنك فتحها والتعديل عليها ان وجدتها في المجلد
انظر الشكل 2-4.










النــص وخصائصه
3- ستتعلم في هذه الخطوه كيفية ادراج النص وتغيير ألوانه وخصائصه.
4- في البدايه قم بكتابة نصك وليكن شبكة كوكتيل على سبيل المثال
5- حدد كل النص بالماوس أو بضغط Shift مع الضغط على السهم الأيمن بلوحه المفاتيح حتى تحدد النص كلية .
6-اختر الآن نوع الخط من القائمه المنسدله بالأعلى والتي موضحه بالشكل 2-5 وحدد حجمه ولونه وخصائصه كما هو موضح بالشكل التالي. أو اضغط هنا لتشاهد توضيح أكبر للنموذج.





2-5
* ملاحظه: يمكنك اللجوء لطريقه أسهل وذلك باتباع الخطوات التاليه
1- حدد النص ومن ثم انقر عليه بالزر الأيمن للماوس فتظهر لك قائمه
. أختر منها Font أو خط ومن ثم حدد لون النص وحجمه ونوع الخط من المربع الذي سيظهر لك كما هو موضّح بالشكل 2-6.






2-6
2- يمكنك اضافة العديد من الخصائص على النص من خلال هذا المربع الذي أمامك فلتغيير لون النص افتح القائمه المنسدله Color او اللون والتي تعرض لك العديد من الألوان المختلفه.اختر منها ماتشاء من ألوان.
3- ولجعل النص عريضا اختر Bold تحت قائمة Font style أو نمط الخط.
ويمكنك استعمال خاصيه تعريض الخط هذه من شريط الأدوات الموجود بأعلى قائمة البرنامج.
4- لجعل النص مائلا اختر Italic من القائمه نفسها.



الدرس الثالث

ادراج الصور والارتباطات والخلفيات

* ستتعلم بهذا الدرس كيفية وضع الصور والارتباطات لمواقع أخرى أو لصفحات موقعك, أيضا ستقوم بوضع صور الخلفيات لصفحاتك والتي ستزيد من جمال الصفحه. لنبدأ بالخطوه الأولى وهي وضع الارتباط أو مايسمى بــ Link.
كيف تدرج ارتباط تشعبي لصفحه أخرى
1- اكتب النص الذي تريد ان تضع له ارتباط من موقعك. سنضع على سبيل المثال كوكب كوكتيل.
2- لوضع الارتباط حدد كامل النص بالماوس ومن ثم اضغط على النص بالزر الأيمن للماوس فتظهر لك قائمه اختر منها Hyperlink أو ارتباط تشعبي.
انظر الشكل2-7.








* ملاحظه: الطريقه مختصره اضغظ من لوحة المفاتيح المفتاحين CTRL+K . ويمكنك مشاهدة نموذج التعرف على محتويات الفرونت بيج بالدرس الأول والذي يوضح لك بالشكل طريقه أكثر اختصارا لادراج ارتباط .
3- يعرض لك فرونت بيج الآن مربع حواري.
4- اذا كنت تود انشاء ارتباط لصفحه أخرى سبق وأن أنشأتها وتريد وضع ارتباط لها بموقعك فقم باختيار الصفحه الذي تريد ربطها من مجموعه الملفات المعروضه في هذا المربع. أما اذا أردت الربط بصفحه خارجيه من الويب. شبكة كوكتيل على سبيل المثال, فضع عنوان الموقع في الفراغ المخصص لوضع الرابطه واضغط OK.
انظر الشكل 2-8.






2-8
* لاحظ بأن كلمة شبكة كوكتيل قد أصبحت مسطّره الآن وهذا يعني انها مرتبطه بالموقع وستنقلك الى هذا الموقع مباشره بمجرّد الضغط عليها بالمتصفح وستبدو لك على هذا النحو:
شبكة كوكتيل
كيف تدرج صوره
بعد أن تعلمنا كيفية ادراج ارتباط سننتقل الآن الى الخطوه التي تليها وهي ادراج الصور.
1- حدد الموضع الذي تريد وضع الصوره به ثم من أعلى القائمه الرئيسيه اختر Insert>Picture>From File. أو اتبع الطريقه السهله بالضغط على رمز الصوره من أعلى القائمه.راجع الدرس الأول ونموذج التعرف على محتويات برنامج الفرونت بيج.
خصائص الصوره
2- قم بتحديد الصوره الآن بعد أن قمت بادراجها ومن ثم انقر عليها بالزر الأيمن للماوس لاضافة بعض الخصائص والارتباطات لها.
3- اختر من القائمه التي ظهرت لك Picture Properties أو خصائص الصورة.

4- يعرض لك فرونت بيج الآن مربع .اختر عام من التبويب بالاعلى, لاحظ بأن عنوان الصوره هو تحت مسمى Picture source.أو الصورة
انظر الشكل 2-10.
** وهذا يعني انه بامكانك تعديل عنوان هذه الصوره اذا كنت تريد استبدال عنوانها بآخر من الوب مباشره فقم بتغييره من هذا الخيار**
وقم بالضغط على Browse أو استعراض اذا كنت ترغب في اختيار صوره أخرى






2-10
4- ولاضافة تأثير للصوره أي بمجرد الاشاره عليها بالماوس سيظهر وصف لها أو تعليق. فقم بكتابة ذلك امام مايسمى بــ ############################ أو النص.
5- لاضافة رابطه من هذه الصوره لموقع وب او صفحه أخرى أدخل عنوان الموقع أمام مايسمى بـ Location أو الموقع. أو قم باختيار صفحه من صفحات موقعك لربطها من خلال النقر على الزر الموجود أمام هذا الفراغ مباشره وهو Browse أو استعراض. سيعرض لك مربع ملفات أختر منه الصفحه التي تود ربطها. وقد قمنا بكتابة عنوان موقع شبكة كوكتيل كمثال.
http://www.××××.net
6- في الخيار الذي يليه ستجد مايسمى بـ Target Frame أو الاطار الهدف وأمامه رمز يشبه صورة القلم. هذه الخاصيه تمكن الارتباط لعنوان الموقع الذي وضعته على الصوره من أن يظهر في صفحه جديده تفتح غير الصفحه الرئيسيه التي عليها الصوره ولاختيار هذه الخاصيه اضغط على الرمز الموجود أمام Target Frame أو الاطار الهدف ومن القائمه اختر New Window أو اطار جديد.
كما هو موضح لك بالشكل 2-10.
كيف تدرج خلفيه
1- من القائمه الرئيسيه اختر Format>Background أو اختر تنسيق < خلفيه
2- سيظهر لك مربع حواري.
3- في لسان التبويب Background . ستجد مستطيلا فارغا أمامه Browse أو استعراض. اضغط Browse أو استعراض واختر من القائمه التي ستظهر لك بالمربع ملف صورة الخلفيه التي تود وضعها بصفحتك.
انظر الشكل 2-






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