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

مشاهدة النسخة كاملة : شرح بالصور على كيفية تصميم موقع كامل ببرنامج front page



سقرط
09-09-2009, 10:09 PM
تصميم المواقع بواسطة Front page.
وفرونت بيج يمكنك الحصول عليه من خلال البحث في المنتدى, هذه الدورة ستكون عبارة عن مجموعة دروس لتصميم مواقع تفيدنا نحن المستخدمين, يعني موقع للعمل البسيط مثل موقع برنامج موقع شروحات موقع طبخ وما الى ذلك.

سأبدأ أولا بالتحدث عن فرونت بيج, وهو برنامج من ضمن برامج Microsoft office 2003, لكن لا يوجد لها نسخة 2007 انما هناك برامج اخرى مثل Web developer & SharePoint 2007 و برنامج فرونت بيج يستخدم لغة HTML لتصميم المواقع, مع العلم أن جميع المواقع التي تتصفحها بشكل يومي تترجم الى لغة HTML من خلال المتصفح, للتأكد من ذلك :

- زر يمين على أي مكان من الموقع واختر View source وستلاحظ أن اللغة المستعملة هي لغة HTML حتى ولو كان الموقع تم بناءه باستخدام لغة أخرى مثل PHP.


لتشغيل فرونت بيج :

1- Start
2- Microsoft office 2003
3 - Microsoft office front page 2003

في بداية تشغيل البرنامج سيكون لديك ظاهرا علامة تبويب اسمها Web Site وهي الصفحات التي قمت بانشائها مسبقا حيث يمكنك انهاء المشروع لديك والتعديل عليها متى ما تريد.


لانشهاء صفحة جديدة :

1- File

2- New...

ويمكنك انشاء الصفحة حسب النوع

عندك صفحة خالية, وصفحة من خلال القوالب الموجودة في البرنامج

http://images.upload2world.com/get-6-2009-upload2world_com_xkvibuk.png

لكنك لست مستعدا لتصميم موقع بعد, لأنك ستحاج أولا الى التخطيط والتصميم الخارجي, لا تقلق سأشرح كل شيءhttp://www.absba.org/images/smilies/smile.gif


تسلسل الدروس كالتالى



1- تخطيط موقع وبدء التصميم على الورق. (http://absba.org/vb/showpost.php?p=7454730&postcount=3)
2- فهم لغة HTML. (http://absba.org/vb/showpost.php?p=7454846&postcount=4)
3 - إضافة إرتباط بوصلة Hyperlink (http://absba.org/vb/showpost.php?p=7455127&postcount=6). (مهم)
4 - (http://absba.org/vb/showpost.php?p=7456598&postcount=10)تنسيق الصفحة لبدء العمل (http://absba.org/vb/showpost.php?p=7456598&postcount=10)

سقرط
09-09-2009, 10:22 PM
تخطيط موقع وبدء التصميم على الورق


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

وقبل التصميم على الورق تحتاج أيضا الى معرفة هدف الموقع؟ على سبيل المثال:
هل هو موقع برامج , موقع تعليمي , موقع رسم , موقع افلام , موقع فيديو ,موقع طبخ , موقع أطفال , موقع ألعاب.

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

وأيضا ضع أهدف الموقع في مفكرة بسيطة, مثلا :

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

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

http://office.microsoft.com/global/images/default.aspx?AssetID=ZA060503601033

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

http://office.microsoft.com/global/images/default.aspx?AssetID=ZA060503621033


أما هذه فهي توصح للتخطيط الرئيسي.

بعد قراءتك هذه المقالة انت جاهز للتعرف على البرنامج وبدء رحلتك.

سقرط
09-09-2009, 10:25 PM
فهم لغة HTML


لا توجد قاعدة ثابتة لفهم لغة HTML مثل بقية اللغات ( فيجوال بيسك ) لكنك تستطيع فهم اللغة بسهولة تامة من خلال هذه الدورة ان شاء الله.


اذهب الى فرونت بيج واعمل الاتي


http://images.upload2world.com/get-6-2009-upload2world_com_sdppooj.png


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



http://images.upload2world.com/get-6-2009-upload2world_com_nusjkm.png


ما ستتعمله هنا هي مجموعة أكواد مهمة في لغة HTML

أضف في السطر 13 الكود الاتي

كود بلغة HTML:
<p>مرحبا بك في دورة تعلم فرونت بيج</p>
والان انتقل الى واجهة Design يجب أن يظهر لك كتابة فيها

اقتباس:
مرحبا بك في دورة تعلم فرونت بيج
ماحدث هنا هو الاتي

قمت أنا بكتابة الكود <p> فقام البرنامج بنفسه كتابة الكود مرة اخرى ووضع المؤشر في الوسط

كود بلغة HTML:
<p></p>
لكن لاحظ الفرق بينهما.

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

جرب بنفسك...

سقرط
09-09-2009, 10:35 PM
إضافة إرتباط بوصلة Hyperlink



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


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


1- ظلل الكلمة التي تريدها أن تنقل المستخدم الى الموقع.


2 - زر يمين واختر Hyperlink.


3- في صندوق النص اكتب عنوان الموقع http://www.google.com (http://www.google.com/)


ثم توجه الى واجهة الكود, ستلاحظ أن تمت اضافة كود جديد


كود بلغة HTML:
<a href="http://www.google.com">الدخول للموقع</a>



ستلاحظ أنه بين >< يتم دائما كتابة النص وبين "" يتم كتابة الموقع المراد التوجهة اليه.

توجه الان الى صفحة Preview واضغط على الكلمة, ستلاحظ انتقالك الى صفحة Google.

سقرط
09-09-2009, 10:48 PM
(http://www.rwa2an.net/vb/member.php?u=262306) تنسيق الصفحة لبدء العمل


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

والتنسيق يساعد في الحفاظ على ترتيب الصفحة والموقع.

سنرسم هنا جدول التنسيق Layout table.

1- اضغط على قائمة Table

2- اختر Layout tables and cells...

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

http://images.upload2world.com/get-6-2009-upload2world_com_dhdrrsl.jpg

اختر منه Insert Layout table

وغير الخصائص كما في الصورة Properties :

http://images.upload2world.com/get-6-2009-upload2world_com_prcuiw.jpg

يجب أن يكون المربع كالشكل الاتي :

http://images.upload2world.com/get-6-2009-upload2world_com_phzis.png

والان تابع الفيديو التالي لأنه سيوفر الكثير من الكلمات

http://www.4shared.com/file/11386694...ureLayout.html (http://www.rwa2an.net/vb/member.php?u=262306)

Black Samurai
09-14-2009, 12:11 PM
http://www8.0zz0.com/2009/09/14/08/844542211.gif

devil koko
11-22-2009, 04:55 PM
http://www.nawasreh.com/welcome/up/11874673916518.gif

MR.MoneM
04-13-2010, 07:43 PM
شكرااااااااااا

MR.MoneM
04-13-2010, 07:44 PM
يا سلام عليك

MR.MoneM
04-13-2010, 07:44 PM
100 100 شكرااااااااااااااااا

MR.MoneM
04-13-2010, 07:45 PM
جزاك الله خير

MR.MoneM
04-13-2010, 07:45 PM
شكرااااا شكرااااا

محمد الحازمي
05-31-2010, 10:32 PM
تسلم يدك
الله يعطيك العافيه

وردة زابلة
10-30-2010, 12:46 PM
جزاك الله خيرا

:opk:

sioqqnbhzts
10-02-2011, 10:37 PM
أإسـ عٍ ـد الله أإأوٍقـآتَكُـم بكُـل خَ ـيرٍ
دآإئمـاَ تَـبهَـرٍوٍنآآ بَمَ ـوٍآضيعكـمٍ
أإلتي تَفُـوٍح مِنهآ عَ ـطرٍ أإلآبدآع وٍأإلـتَمـيُزٍ
دُمتَمْ بِهذآ الع ـطآء أإلمستَمـرٍ
يُسع ـدني أإلـرٍد على مـوٍأإضيعكًـم
وٍأإألتلـذذ بِمـآ شآهـدتْ
تـقبلـوٍ خ ـآلص احترامي
لآرٍوٍآح ـكُم أإلجمـيله
مـوٍدتـي~
+