المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : دورة كاملة في برنامج FrontPage لتصميم المواقع ... موضوع رائع جدا يستحق الدخول وبالصور



7oodaa
11-06-2005, 01:45 PM
دورة كاملة في برنامج FrontPage لتصميم المواقع ... موضوع رائع جدا يستحق الدخول وبالصور


السلام عليكم ورحمة الله وبركاته

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

معلومات عامة :

قبل البدء في شرح رموز البرنامج وأدواته نورد هذه المعلومة عن صفحة الويب :

* تبدأ صفحة html أو الإتش تي ام ال بـالوسم وتنتهي بـالوسم .
* تنقسم الصفحة إلى منطقتين هما :
1- منطقة الرأس : وتبدأ بـالوسم وتنتهي بـالوسم وتحتوي على عنوان الصفحة .
2- منطقة الجسم : وتقع بين الوسمين و .. وكل ما سيظهر في الصفحة سيكون موجود في هذه المنطقة .

نفتح الفرونت بيج2000 ، سنجد أن الإطار أسفل البرنامج يحتوي على ثلاث قسام هي Normal / HTML / Preview .
* القسم Normal : هو منطقة العمل التي سيتركز فيها شرحنا .
* القسم HTML : لمشاهدة الكود الذي يكتبه البرنامج خلف الصفحة .
* القسم Preview : لمشاهدة الصفحة كما ستظهر للمتصفح .. لذلك بعد أن نضيف شيء للصفحة في قسم Normal نقوم بمشاهدة طريقة ظهوره في منطقة Preview .

------------------------------------------------------------------
شرح أهم رموز أشرطة أدوات فرونت بيج 2000 :




http://members.lycos.co.uk/loverommanceworld/FrontPage1.gif





http://members.lycos.co.uk/loverommanceworld/FrontPage2.gif


------------------------------------------------------------------
بعد أن تعرفنا على واجهة فرونت بيج 2000 دعونا نبدأ بالتنفيذ :

أولاً : نحدد خصائص الصفحة ... في أي مكان فارغ في الصفحة اضغط يمين الفارة واختر من القائمة المنسدلة Page Properties ستظهر لنا النافذة التالية :




http://members.lycos.co.uk/loverommanceworld/FrontPage3.gif




نحدد ما نريد... بعد ذلك نضغط في الأعلى على علامة التبويب Background ستظهر لنا النافذة التالية :




http://members.lycos.co.uk/loverommanceworld/FrontPage4.gif




[color=darkblue]الخطوه التي تليها : نحدد ما نريد ثم نضغط OK
------------------------------------------------------------------
ثانياً : نبدأ بتحرير الصفحة وإدراج الصور وعمل الارتباطات بين الصفحات ....

* لإدراج نص في الصفحة : نضع المؤشر في أي سطر نريد وفي أي جههة ( وسط أويمين أو يسار ) ثم ندأ بالكتابة .

[ ملاحظة : عند الكتابة في الفرونت بيج وأردنا الانتقال للسطر التالي لإكمال الجملة السابقة بالضغط على Enter ستكون المسافة كبيرة بين السطور ولكن نضغط ( Shift+Enter ) . ]

* لإدراج صورة : نفتح القائمة Insert ثم نختار Picture ستفتح قائمة نختار منها From File بعد ذلك نختار الصورة التي نريدها ونضغط OK .
* لوضع وصلة أو ارتباط أو لنك ، تنقلنا لصفحة أخرى أو لصورة أو لمستند وورد أو لأي ملف عند الضغط عليها :
1- نكتب اسم الارتباط :مثلاً .. لمشاهدة صفحتي الشخصية "اضغط هنا" .

2- نظلل "اضغط هنا " .. وهي الجملة التي تريدها أن تصبح ارتباط لصفحتك الشخصية .
3- نفتح القائمة Insert ونختار منها Hyperlink أو نضغط Ctrl+K في لوحة المفاتيح .. ستظهر لنا النافذة التالية




http://members.lycos.co.uk/loverommanceworld/FrontPage5.gif





1) : في هذه المساحة ستظهر الصفحات التي قمنا بحفظها .. وهذا سيسهل عمل ارتباط إلى هذه الصفحات .. فقط نأشر بالماوس على الصفحة التي نريد ربطها بجملة " اضغط هنا " وستكتب مباشرة في الخانة (2) ، ثم اضغط OK .

(2) : في هذه الخانة يمكننا كتابة اسم الصفحة مباشرة مع امتدادها وهو (htm.) .

(3) : بالضغط على هذا الرمز ستفتح لنا نافذة جديدة يمكننا من خلالها أن نستعرض مجلدات وملفات جهازنا واختيار ما شئنا لنربطه بالجملة المظللة في الصفحة .

(4) : بالضغط على هذا الرمز ستفتح لنا نافذه لعمل ارتباط إلى بريد إلكتروني .. عند الضغط على الوصلة في المتصفح يفتح برنامج البريد الإلكتروني الافتراضي للشخص المتصفح ليرسل لك رسالة على العنوان التي ستكتبه في هذه النافذة .
بعد أن نختار نوع الملف الذي سنربطه بجملة " اضغط هنا " اضغط OK .
سنلاحظ أن جملة "اضغط هنا" أصبح تحتها خط أي أنها أصبحت ارتباط لصفحة أخرى أو لملف آخر .
[ وبنفس الطريقة نقوم بعمل جميع الارتباطات في موقعنا !!] .
** نلاحظ أن الارتباط يجب ان يكتب فيه الاسم مع امتداد الملف ... فمثلاً البرامج تكون عادة بامتداد exe أو zip لذا يجب علينا كتابة هذا الامتداد اذا رغبنا عمل صفحة برامج مجانية ... فمثلاً لو اردنا عمل ارتباط لتحميل برنامج باسم mIRC وامتداده هو exe يجب ان يكون الارتباط كالتالي : mIRC.exe ، وهكذا لبقية الملفات باختلاف امتداداتها .


ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــ




شرح طريقة إدراج فلم في الصفحة
عباره عن ملف: rm
على سبيل المثال: Dragon-Ball.rm


الطريقة كالآتي



http://members.lycos.co.uk/loverommanceworld/FrontPage6.gif





ثم ننتقل لنافذة التالية:
1- نختار عناصر تحكم متقدمة
2- دبل كلك على توصيل




http://members.lycos.co.uk/loverommanceworld/FrontPage7.gif




من النافذة التالية نختار التالي:
1- نضع مسار الملف
2- الرسالة اللي تظهر لشخص اللي ماعنده نفس البرنامج المستخدم
3- العرض والارتفاع
ثم موافق




http://members.lycos.co.uk/loverommanceworld/FrontPage8.gif




بيطلع لنا الشكل التالي نضغط على زر التشغيل
حتى يتم عرض الفلم




http://members.lycos.co.uk/loverommanceworld/FrontPage9.gif




العرض بيكون بالشكل التالي:




http://members.lycos.co.uk/loverommanceworld/FrontPage10.gif



ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــ





شرح خاصية البوك مارك



توضيح:
البوك مارك وضع رابط في أي مكان في الصفحة
وعند الضغط عليه يتم نقلك إلى أعلى مثلاً
أو إلى أي نقطة يتم تحديدها



http://members.lycos.co.uk/loverommanceworld/FrontPage11.gif




في النافذة التالية:
1- ضع إسم لنقطة أو صورة
2- إضغط موافق




http://members.lycos.co.uk/loverommanceworld/FrontPage12.gif





ثم نذهب إلى النص اللي احنا عايزينه ينقلنا للأعلى
رايت كلك ونختار إرتباط ( كليك يمين )



http://members.lycos.co.uk/loverommanceworld/FrontPage13.gif




ثم نضع الرابط #top ثم نضغط موافق




http://members.lycos.co.uk/loverommanceworld/FrontPage14.gif



ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــ




شرح طريقة إنشاء شريط متحرك بالفورنت بيج




الطريقة كالتالي




http://members.lycos.co.uk/loverommanceworld/FrontPage15.gif





نضغط دبل كلك على : شاشة إسمية




http://members.lycos.co.uk/loverommanceworld/FrontPage16.gif




ننتقل للنافذة التالية:
1- النص المطلوب
2- إتجاه مسار النص
3- سرعة حركة النص
4- ذهاب وإياب أم ذهاب والظهور من نفس نقطة البداية
5- حركة الشريط بشكل مستمر ام تحديد عدد المرات




http://members.lycos.co.uk/loverommanceworld/FrontPage17.gif



ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــ






إنشاء ألبوم صور رائع


صورة توضيحيه للألبوم + شرح توضيحي لأقسام الألبوم




http://members.lycos.co.uk/loverommanceworld/FrontPage18.gif




زي ما شفتوا الألبوم بيتكون من شريط علوي يتم فيه استعراض
جميع الصور على شكل مصغّرات .. وعند اختيار إحداها يتم عرضها
بحجمها الطبيعي فوسط الشاشه .. + عنوان للصوره فأسفلها ..





لإنشاء الألبوم نفتح صفحه جديدة فالفرونت بيج و نتبع التالي :




نذهب إلى Insert -->web component

ومثل ماهو موضح بالصور تحت .. :
1- نختار من القائمه اليسرى PhotoGallery .
2- نختار من القائمة اليمنى شكل الألبوم الذي نرغب به .. وهنيه انا
اخترت Slideshow layout لأنه أحلى واحد فيهن ..طبعا
كلن يختار اللي يعيبه .. الأفقي ولا الرأسي ولا العشوائي ..
3- نضغط على Finish .




:: Insert PhotoGallery ::




http://members.lycos.co.uk/loverommanceworld/FrontPage19.gif




بتطلع لنا web gallery properties window فنقوم بالخطوات التاليه :

1- نضغط على Add ونختار Add from file ومنها نقوم بتنزيل جميع
الصور المرغوب بضمها للألبوم .... (من ملف بجهازك).

2- لتنسيق النص تحت كل صوره .. ( *إختياري).
3- هنا تتم كتابة رقم الصوره .. وشرح تفصيلي عنها .. (* إختياري).
4- OK




:: Add Photos ::





http://members.lycos.co.uk/loverommanceworld/FrontPage20.gif




ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــ
ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــ
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــ
ـــــــــــــــــــــــــــــــ





إدراج ملف صوتي في الصفحة بدون ظهور الشكل




بمجرد دخول الصفحة نستمع لملف الصوت
الملف بصيغة: mid
وهذا الملف الصوتي لتجربة: miozc.zip
الشرح
نفتح الصفحة اللي راح نضيف لها ملف الصوت
رايت لك في الصفحة ونختار التالي: خصائص الصفحة




http://members.lycos.co.uk/loverommanceworld/FrontPage21.gif





بيطلع لنا النافذة التالية:
1- الخيار( عام )
2- نستعرض الملف من الجهاز والافضل نضع مسار الملف في الموقع
3- هذا الخيار يخلي ملف الصوت بعد ماينتهي يرجع يعيد من جديد لو حبيت او تقدر تعطل الخيار او تحدد عدد مرات التكرار ثم يتوقف الملف الصوتي
4- نختار موافق




http://members.lycos.co.uk/loverommanceworld/FrontPage22.gif





الآن لمشاهدة كود الملف الصوتي نضعط على




http://members.lycos.co.uk/loverommanceworld/FrontPage23.gif





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




http://members.lycos.co.uk/loverommanceworld/FrontPage24.gif





الكود:




CODE
<bgsound src="../فرونت/miozc.mid" loop="-1">





يجب تعديل التالي إلى مسار الموقع:





http://members.lycos.co.uk/loverommanceworld/FrontPage25.gif





ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــ


إدراج ملف فلاش في الصفحة




نفتح الصفحة اللي هنحط فيها ملف الفلاش
ثم نحدد مكان الفلاش بالماوس




http://members.lycos.co.uk/loverommanceworld/FrontPage26.gif




ثم نختار التالي:
1- إدراج
2- مكون ويب




http://members.lycos.co.uk/loverommanceworld/FrontPage27.gif





بيطلع لنا النافذة التالية:
1- نختار أخر خيار في جهة اليمين (عناصر تحكم متقدمة)




http://members.lycos.co.uk/loverommanceworld/FrontPage28.gif




في نفس النافذة بعد إختيار عناصر تحكم متقدمة
بيطلع لنا في اليسار التالي:
1- نختار( توصيل)
2- نضغط على توصيل دبل كلك بالزر اليسار للماوس




http://members.lycos.co.uk/loverommanceworld/FrontPage29.gif




بعد الضغط على (توصيل )
بيطلع لنا الشكل التالي:
1- نبحث عن ملف الفلاش في الجهاز
2- التحكم بالعرض والارتفاع للملف
3- موافق




http://members.lycos.co.uk/loverommanceworld/FrontPage30.gif




كذلك يوجد طريقة أخرى إسنخدام الكود التالي:




CODE
<embed width="173" height="200" src="http://www.alamuae.com/top_left.swf"type="application/x-shockwave-flash">


للتجربة بإمكانكم نسخ الكود السابق
ومشاهدته في الفرونت بيج



ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــــــــــ


تابع

7oodaa
11-06-2005, 01:48 PM
إستخدام القوالب الجاهزة للتصميم




[/color]شرح استخدام القوالب المتوفرة في البرنامج بهدف تصميم واجهة أو صفحة للموقع ..
الشرح
إفتح البرنامج ثم إختار التالي:
1- نضغط على السهم
2- نضغط على صفحة




http://members.lycos.co.uk/loverommanceworld/FrontPage31.gif




بيطلع لنا النافذة التالية:
1- نختار صفحات إطارات
2- من اليمين نختار القالب المطلوب
3- نضغط موافق






http://members.lycos.co.uk/loverommanceworld/FrontPage32.gif




بعد إختيار أحد القوالب بيطلع لنا الشكل هذا:
عباره عن قالب يحتوي على اربع صفحات
الاعلى + اليمين + الوسط + الاسفل
1- اللون الاحمر يفصل كل صفحة عن الاخر
2- اللون الازرق حيث العبارة التالية ( تعين الصفحة الاولية )
بإمكانك إستخدام صفحة جاهزة من قبل
3- اللون الاصفر حيث العبارة التالية ( صفحة جديدة )
بإمكانك العمل من جديد وتكون الصفحة فاضيه من الصفر




http://members.lycos.co.uk/loverommanceworld/FrontPage33.gif




الان حتى نتحكم بأكواد كل صفحة بشكل مستقل
نختار التالي من الاسفل:




http://members.lycos.co.uk/loverommanceworld/FrontPage34.gif




بعد إختار الخيار السابق بيطلع معانا الشكل التالي:




http://members.lycos.co.uk/loverommanceworld/FrontPage35.gif



ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــ




شرح طريقة إضافة روابط على الكلمات




روابط مختلفة الأنواع :
قبل بداية الشرح للعلم عند الكتابة باللغة العربيه في الفرونت بيج بعض الأحيان عند إستعراض كود الـhtml نجد الكلام تحول للغة غريبه او رموز
الحل كالتالي:
نفتح الفرونت بيج ونذهب لأسفل الصفحة نجد التالي:
نضغط على html




http://members.lycos.co.uk/loverommanceworld/FrontPage36.gif




ثم نجد الكود التالي:
1- نقوم بتغير رقم 2 إلى رقم 6




http://members.lycos.co.uk/loverommanceworld/FrontPage37.gif





ثم نعود للوضع العادي



http://members.lycos.co.uk/loverommanceworld/FrontPage38.gif





ونرجع نضغط على الـhtml




http://members.lycos.co.uk/loverommanceworld/FrontPage39.gif



سوف نجد أن مشكلة الرموز اتحلت




http://members.lycos.co.uk/loverommanceworld/FrontPage40.gif



الآن شرح إضافة الروابط على الكلمات
في المثال التالي راح نضيف الروابط على الكلمات التالية:-
1- نظلل على الكلمة المطلوبة
2- نضغط رايت كلك راح يطلع لنا الخيارات التالية:
نختار (إرتباط تشعبي)





http://members.lycos.co.uk/loverommanceworld/FrontPage41.gif




بعد إختيار إرتباط تشعبي بيطلع لنا الصفحة التالية:
1- نضع الرابط المطلوب
2- نختار( الإطار الهدف )
لكي نختار نوع الرابط



http://members.lycos.co.uk/loverommanceworld/FrontPage42.gif





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





http://members.lycos.co.uk/loverommanceworld/FrontPage43.gif




ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــــــــــــــــــــــــ





إنشاء جداول بأشكال مختلفة



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





http://members.lycos.co.uk/loverommanceworld/FrontPage44.gif




الجدول السابق جدول إفتراضي

الآن نجرب نعمل جدول بخطوط منقطة
1- داخل الجدول نضغط رايت كلك بالماوس
بيطلع لنا الشكل التالي نختار (خصايص الجدول)




http://members.lycos.co.uk/loverommanceworld/FrontPage45.gif





بيطلع لنا النافذة التالية الخاصة بتنسيق الجدول
نختار الخيار الموجود بالأسفل (نمط)




http://members.lycos.co.uk/loverommanceworld/FrontPage46.gif





بيطلع لنا النافذة التالية:
نختار (تنسيق) ثم نختار (حدود)




http://members.lycos.co.uk/loverommanceworld/FrontPage47.gif




بيطلع لنا النافذة التالية:
1- نختارنوعة الجدول (منقط)
2- راح نلاحظ تغير شكل الجدول في اليسار
3- نختار لون الخط المنقط للجدول
4- نعتمد التعديل




http://members.lycos.co.uk/loverommanceworld/FrontPage48.gif





ثم نضغط موافق





http://members.lycos.co.uk/loverommanceworld/FrontPage49.gif





ثم نضغط موافق





http://members.lycos.co.uk/loverommanceworld/FrontPage50.gif





بيطلع معانا الجدول التالي:





http://members.lycos.co.uk/loverommanceworld/FrontPage51.gif





نقدر نجرب جميع الخيارات المتاحة ونطلع بالأشكال المناسبة
أما لو حبينا نعمل جدول شفاف اتبع الخطوات التالية:

1- رايت كلك داخل الجدول ونختار التالي:





http://members.lycos.co.uk/loverommanceworld/FrontPage52.gif





بيطلع لنا النافذة التالية:
1- نختار إتجاه الجدول مثلاً توسيط
2- نختار صفر حجم الخط في الجدول
3- نختار اللون تلقائي
4- نعتمد التعديب
للعلم نقوم بتغبر اللون قبل تغير حجم خط الجدول




http://members.lycos.co.uk/loverommanceworld/FrontPage53.gif




بيطلع معانا الشكل التالي:





http://members.lycos.co.uk/loverommanceworld/FrontPage54.gif





وبذلك أكون انتهيت من شرح برنامج FrontPage لتصميم المواقع


ومعذرة عن إعطاء كل الدروس في موضوع واحد


وإذا امكن تقسيمها فلتقسم على فصول وأتمنى ان تستفيدوا ان شاء الله

سمسمة
13-06-2005, 11:48 AM
انا حفظت الموضوع عندى وقريته كمان
كان فيه بعض المعلومات عارفاها والباقى كله جديد:d

*101**102*

7oodaa
13-06-2005, 06:12 PM
الحمد لله إن فيه حاجات جديدة
وأتمني إنها تكون أفادتك

أحمد المليجي
20-06-2005, 04:29 PM
الف شكر علي الشرح الممتاز دي يا حوده

7oodaa
20-06-2005, 06:58 PM
شكرا علي ردك احمد
وأتمني الموضوع عجبك