دروس الفرونت بيج من الالف الى الياء - نادي الهلال السعودي - شبكة الزعيم

ولـد السلطان · #1 22/09/2005, 07:16 AM

[align=center]الدرس الأول

البدايه والأدوات

الخطوة الاولى لكي تنشىء موقعا فارغا بعد ان تفتح برنامج فرونت بيج اذهب الى القوائم واختر قائمة (file) ثم اختر (new)

ثم اختر (web).

كما في الصورة التالية

سيظهر لك النموذج التالي

اختر one page web إذا كنت تريد بناء موقعك بنفسك وإذا كنت تريد أن تصمم موقعا شخصيا فاخترpersonnel web

و هنالك خيارات أخرى ولكني افضل أن تستخدم الخيار الافتراضي أي الخيار الأول

وسوف افترض انك اخترت الخيار الأول

folder list سوف تظهر لك في المجلدات

index.htm الصفحة

انقر نقرة مزدوجة بعد ذلك سوف تفتح الصفحة الرئيسية في موقعك ولابد من ابقاء هذه الصفحة بنفس الاسم وعدم تغييره

Fileولكي تنشيء صفحة جديدة اذهب الى القوائم ثم اختر

كما في الصورة التالية

عندها سيظهر لك النموذج التالي

ok اختر الخيار الاول ثم انقر على

هذا اذا كنت تريد ان تنشيء صفحة خالية ولك ان تجرب الخيارات الاخرى

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

file ثم اختر

save as ثم اختر

سيظهر لك النموذج التالي

saveغير اسم الصفحة للاسم الذي تريده ثم انقر على

اتمني من الاعضاء عدم الرد على الموضوع الى ان يتم الانتهاء من الموضوع [/align]

ولـد السلطان · #2 22/09/2005, 07:25 AM

[align=center][mark=FF0000]خلفيات الصفحه[/mark]

من البديهي عندما تصمم صفحة ما تريد أن تجعل لها خلفية مناسبة وكي تعمل خلفية مناسبة لصفحتك عليك بالتالي مع افتراض انك مازلت في الصفحة الرئيسية

كما في الصورة السابقةpage propertiesانقر على زر الماوس الأيمن ثم اختر الخيار

اذا كنت تريد أن تضع صورة كخلفيةbackground pictureسيظهر لك النموذج السابق ثم علم على

Watermark و إذا كنت تريد أن تكون هذه الصورة ثابتة علم بالماوس على

سوف يظهر لكBrowseثم انقر على زر

اذا كانت الصورة الهدف موجودة خارج فرونت بيج اختر

سيظهر لك النموذج التالي

ستعود الى النوذج السابق انقر okاختر الصورة التي تريدها كخلفية ثم انقر على

سوف تجد الصورة مكررة مكونة خلفية لصفحتكOKايضا على

اذا كنت تريد ان تجعل خلفية الصفحة بلون معين من غير صورة فبدلا من ان

background colorا ختر Background pictureتختار

اختر اي لون تريده مع تغيير لون الخط كما تريد من خلال

ويمكنك أن تضع خلفية لصفحتك أيضا من خلال القوائم كما في التالي

سوف يظهر لك النموذج الثاني في هذه الصفحة ثم قم بالعمليات السابقة

إضافة خلفية صوتية للصفحة

قد ترغب في إضافة صوت لصفحتك لكي يعمل عند فتح الصفحة مرة او عدة مرات او عدد غير منتهي من المرات ولكي تعمل ذلك انقر بزر الماوس الأيمن وانت في نفس الصفحة ثم اختر الخيار

Page properties

ثم سيظهر لك هذا النموذج

ستجد في النموذج شرحا لكيفية إضافة الصوت وتحديد عدد مرات تشغيل الصوت

Browseفإذا نقرت بالماوس على

سيظهر لك نموذج كما في إضافة صورة كخلفية للصفحة اختر مكان الملف الصوتي على القرص الصلب ثم انقر على زر الموافقة ولكن سوف يعمل الصوت دائما دون توقف ولكي تحدد عدد مرات تشغيل الصوت عليك قبل النقر على زر الموافقة بمحو العلامة كمافي الصورة ثم تحديد عدد مرات تشغيل الصوت[/align]

ولـد السلطان · #3 22/09/2005, 07:30 AM

[align=center][mark=FF0066]لخلفية الصفحةthemeاستخدام[/mark]
لكي تضفي منظرا جميلا لخلفية صفحتك يمكنك استخدام المواضيع الجاهزة في فرونت بيج وذلك بالنقر على زر الماوس الأيمن وسوف يظهر لك النموذج التالي واختر كما في الصورة ولكن يجب ان تكون في الصفحة المرادة

سوف يظهر لك النموذج التالي

غيرها إلى اي موضوع تشاء من قائمة المواضيع وسوف تجد No Themeستجد

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

okاي جميع الصفحات وإذا كنت تريد تطبيق الموضوع على صفحة واحدة اختر الخيار الثاني ثم اختر

سوف تجد الموضوع مطبقا على صفحتك

و تستطيع اضافة موضوع أيضا من خلال القوائم كما في التالي

سوف يظهر لك النموذج الثاني في هذه الصفحة ثم قم بالعمليات السابقة[/align]

ولـد السلطان · #4 22/09/2005, 07:50 AM

[align=center][mark=FF0066]الروابط والوصلات[/mark]

كيف تضيف ارتباطا تشعبيا إلى صفحتك؟

اذا كنت في الصفحة المرادة اكتب اسم الموقع الذي تريدالارتباط به أو الصفحة التي في موقعك ثم علم عليها بالماوس

اذهب إلى شريط القوائم كما في الصورة أعلاه وانقرعلى هذا الرمز

سيظهر لك النموذج التالي

اكتب الارتباط الذي تريده و ليكن ياهو مثلا أو اذا كنت تريد الارتباط بصفحة داخل الموقع فعليك بالتعليم عليها بالماوس كما في التالي

okثم انقر

ولكن سأفترض انك اخترت ان تضيف لصفحتك ارتباطا الى ياهو سوف تكون النتيجة كالتالي

الان اختبر ما عملته وذلك بالنقر بالماوس على

preview
الامر الاول يعني تجريبه كما لو كان في الانترنت

HTML
الامر الثاني يعني عرض الكود

Normal
الامر الثالث العرض العادي

و تسطيع أيضا أن تضيف ارتباطا تشعبيا من خلال القوائم

الراعي الرسمي للموقع هذا الشهر

الروابط والوصلات

(486 مجموع الكلمات في هذا النص)
(1022 قراءة)

الدرس الرابع

كيف تضيف ارتباطا تشعبيا إلى صفحتك؟

اذا كنت في الصفحة المرادة اكتب اسم الموقع الذي تريدالارتباط به أو الصفحة التي في موقعك ثم علم عليها بالماوس

اذهب إلى شريط القوائم كما في الصورة أعلاه وانقرعلى هذا الرمز

سيظهر لك النموذج التالي

اكتب الارتباط الذي تريده و ليكن ياهو مثلا أو اذا كنت تريد الارتباط بصفحة داخل الموقع فعليك بالتعليم عليها بالماوس كما في التالي

okثم انقر

ولكن سأفترض انك اخترت ان تضيف لصفحتك ارتباطا الى ياهو سوف تكون النتيجة كالتالي

الان اختبر ما عملته وذلك بالنقر بالماوس على

preview
الامر الاول يعني تجريبه كما لو كان في الانترنت

HTML
الامر الثاني يعني عرض الكود

Normal
الامر الثالث العرض العادي

و تسطيع أيضا أن تضيف ارتباطا تشعبيا من خلال القوائم

ثم سيظهر لك النموذج الثاني في هذه الصفحة وقم بالعمليات السابقة

لكن افرض انك تريد ان تحرر ارتباطا ببريد الكتروني

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

في هذه الصفحة انقر على هذا الرمز

سوف يظهر لك النموذج التالي

okاكتب البريد الالكتوني الذي تريده داخل المستطيل ثم انقر على

و لجعل الارتباط يفتح في نافذة جديدة اضغط عليه بزر الماوس الايمن ثم اختر

hyperlink properties

target fram سيظهر لك نموذج اضافة ارتباط السابق اذهب الى أسفل النموذج عند

و اضغط على صورة القلم ثم سيظهر لك النموذج التالي

new windowاختر

ثم اضغط على زر الموافقة[/align]

ولـد السلطان · #5 22/09/2005, 08:04 AM

[align=center][mark=FF0066]اللغه والصور[/mark]

كيف تغير لغة الصفحة إلى اللغة العربية؟

page properies انقر على زر الماوس الأيمن وأنت في نفس الصفحة ثم اختر

languageسوف يظهر لك النموذج التالي اختر

page language تعني لغة الصفحة اختر
arabic(saudi arabi)

HTML encoding اختر
arabic

ثم إبدأ بتحرير النص العربي داخل صفحتك

كيف تدرج صورة في صفحتك؟

كما في الصورة التاليةinsertاذهب الى القوائم ثم اختر

clip artاذا كنت تريد صورة من

from fileفاختر ه واذا كانت الصورة مثلا في المستندات فاختر

clip artولكن سافترض انك تريد ان تدرج صورة من

سوف يظهر لك النموذج التالي

المتاحةclip artاختر أحد

سأفترض انك اخترت إشارات

اختر الصورة التي تريدها وسافترض انك اخترت علامة استفهام مرر الماوس

عليها ثم انقر بزر الماوس الأيمن واختر ادراج كما في الصورة التالية

ثم بعد ذلك ستجد الصورة مدرجة في صفحتك كما في التالي

إذا كنت تريد أن تغير موضع الصورةمثلا في الوسط أو اليمين أو الشمال

انقر على الصورة بزر الماوس الأيسر ثم اذهب إلى اشرطة القوائم واختر

الاتجاه الذي تريده وهذا يستخدم ايضا عندما تريد تحديد اتجاه تحرير

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

كيف تدرج صورة من ملف؟

كيف تدرج صورة في صفحتك؟

كما في الصورة التاليةinsertاذهب الى القوائم ثم اختر

سيظهر لك النموذج التالي

اذا كانت الصورة موجودة داخل سجل الصور في موقعك فاختر الصورة التي تريد

okثم انقر عليها بزر الماوس الأيسر ثم اختر

ستجدها مدرجة في صفحتك ولكن لو كانت الصورة موجودة على القرص الصلب أو في

المستندات اذاكان الحال كما اسلفت فاختر الرمز

سيظهر لك النموذج التالي

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

الصور في المستندات اختر الصورة التي تريدها ثم ستجدها مدرجة في صفحتك

ولكي تتحكم في موضع الصورة وسطا او يمينا او شمالا فعليك بما سبق شرحه وعليك بمراجعته[/align]

ولـد السلطان · #6 22/09/2005, 08:11 AM

[align=center][mark=FF0033]تأثيرات الأزرار[/mark]
كيف تضيف زرا بتأثير خاص؟

قد يعجبك أن تضيف لصفحتك أزرارا للتنقل بين صفحات موقعك المختلفة

وتريد أن تكون هذه الأزرار ذات تأثير خاص كأن يضيء عند تمرير الماوس عليه

للحصول على ذالك عليك بالتالي

insert اذهب الى القوائم واختر

كما في الصورة التالية

بعد ذلك سيظهر لك النموذج التالي

button الان اكتب النص الذي تريده داخل

link to واكتب الارتباط الذي تريده داخل

واذا كنت تريد أن تستعرض الارتباطات الموجودة في موقعك فانقر على

سيظهر لك النموذج التالي

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

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

بكتابة اسم الموقع داخل المستطيل واذا كنت تريد استعراض الارتباطات فانقر على

افترض اننا ربطنا هذا الزر بصفحة قائمة الدروس من هذا الموقع

انظر الى النموذج التالي

button color يمكنك تغيير لون الزر من خلال

effect color و تغيير لون التأثير من خلال

effect و تغيير نوع التأثير من خلال

width height و أيضا تستطيع تغيير حجم الزر من خلال

و الان لاحظ النتيجة عندما غيرت لون الزر للاسود ولون التأثير للرمادي

مرر الماوس على الزر سيضيء بضوء رمادي ثم انقر عليه للانتقال الى قائمة الدروس[/align]