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

مشاهدة النسخة كاملة : دورة تصميم المواقع على الفرونت بيج (1/4) مقدمة.



م.صالح
31-May-2008, 02:05
بسم الله الرحمن الرحيم.
أرحب مجدداً بالإخوة المتطوعين والذين سجلوا أسمائهم من أجل المشاركة في هذا المشروع: مشروع تصمصم مواقع الجمعيات واسضافتها

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

وسيتم التطرق في هذه الدورة إلى أهم الأمور التي تساعدنا على بناء مواقع تعريفية، وكيف نستخدم التصميم الذي تم تقطيعه في الدورة السابقة (جرافكس تصميم المواقع) وذلك تسهيلاً للدرس حتى يستوعبه المبتدئون واختصاراً للوقت، وذلك من خلال الدروس التالية:

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


قبل البدء في الدرس أرجو مراجعة الدرس الأول من دورة جرافكس تصميم المواقع.
http://www.arabvolunteering.org/corner/avt12880.html

تذكرون أننا ذكرنا أن رأس الصفحة في الموقع عبارة عن صور مقطعة وبينا كيف نكتشف ذلك، وهناك طريقة أخرى لمعرفة ذلك .. وهي كالتالي:

افتح موقع عالم التطوع العربي ثم اذهب إلى ملف --> حفظ باسم واحفظ الملف
بالنقر على الملف بزر الفأرة الأيمن ثم اختر تحرير. يفتح معك الموقع في الفرونت بيج وحاول معرفة فكرة التصميم ..


http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/intro01.jpg

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

http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/intro02.jpg

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

http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/Sample.jpg

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

طبعاً يجب أن تكون أسما ملفات الصور باللغة الانجليزية وبدون مسافات.

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

http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/images_prots01.jpg

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

http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/images_prots02.gif

سنعرف على أهمية أبعاد الصور في الدرس القادم -بإذن الله تعالى- ومن لديه أي استفسار فلا يتردد في السؤال.

وكتبه..
م.صالح

إبراهيم المطرفي
01-Jun-2008, 05:38
جزاك الله خيرا أخي الكريم

بصراحة شرح جميل ورائع بروعة الألوان وعطر الفواكه

في رعاية الله

م.صالح
01-Jun-2008, 09:57
أشكر لك مرورك أخي إبراهيم .. وتهمني تعليقاتك إذ أن بها أحياناً استدراكاً على ما قد أغفل عنه أثناء طرح الدرس .. مما يحسن من قوة الدروس .. نفع الله بك ..

,,)@&**( Mona ) **&@(,,
04-Jun-2008, 06:08
يعطيك العافيه م /صالح

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

م.صالح
05-Jun-2008, 02:47
أهلاً أستاذة Mona.
أشكر لك مشاركتك معنا في هذا الدرس ، وكبداية فهي مشاركة موفقه..

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

أما بالنسبة لتحليل الموقع المصمم حالياً .. فهو مصمم بالطريقة التالية:

http://t1.arabvol.net/saleh_img/courses/frontpage2003/lesson1/answer01.jpg

وهو عبارة عن جدولين الأسود (وبداخله جدول أزرق)، والأخضر( وبداخله جدولين أصفر ووردي).
وهذه الجداول إيضاح حدودها من خلال برنامج الفرونت بيج نفسه، والذي قمت به هو النقر بزر الفأرة الأيمن في أي مكان في الجدول واختيار أمر خصائص الجدول، ثم زيادرة حدود الجدول واختيار لون لها، وستتضح بعد ذلك معالمه، وهكذا الذي بعده.

وكما أشرت في أحد الدروس أن الأفكار قد تختلف من شخص لآخر، ولكن سنصل في النهاية إلى نفس النتيجة إذا تم فهم أساسيات التصميم التي أحاول أيضاحها وتسهيلها في هذه الدورة.

وفي الدرس القادم سيتم شرح موضوع خصائص الجداول بشيء من التفصيل -بإذن الله تعالى-.

لواحظ
22-Jun-2008, 07:24
الله يجازيك كل خير
انا لست متخصصة ولكنى اتعلمت على الجهاز مباشرة بدون دورات
عن طريق البحئ والفهم
وانا الحمد لله استفدت من هذا الدرس كثيرا لاننى اعرف كل هذة المعلومات
بدون تعلم كما قلت ولكن الان عرفتها اكثر مما سبق
ولك شكرى ةتقديرى مهندس صالح
اشكرك جدا

سعد السعد
23-Jun-2008, 11:00
رائع اخي الكريم .. سدد الله خطاك

م.صالح
24-Jun-2008, 01:47
الله يجازيك كل خير
انا لست متخصصة ولكنى اتعلمت على الجهاز مباشرة بدون دورات
عن طريق البحئ والفهم
وانا الحمد لله استفدت من هذا الدرس كثيرا لاننى اعرف كل هذة المعلومات
بدون تعلم كما قلت ولكن الان عرفتها اكثر مما سبق
ولك شكرى ةتقديرى مهندس صالح
اشكرك جدا
أ. لواحظ ..
الحمد لله الذي يسر عرضها بأسلوب نافع يساعد على ترسيخ المعلومة ...



رائع اخي الكريم .. سدد الله خطاك
أخي سعد السعد ...
أهلا بك معنا في عالم التطوع العربي ...

وأسأل الله لك التوفيق والسداد ...

مغترب
05-Oct-2008, 12:38
السلام عليكم

وين بقيت الدروس:mad:

الصراحة ما سجلت في المنتدى الا عشان هالدورة

الشرح واضح وبسيط ومميز

في انتظار الرد

سعد السعد
05-Oct-2008, 03:39
السلام عليكم

وين بقيت الدروس:mad:

الصراحة ما سجلت في المنتدى الا عشان هالدورة

الشرح واضح وبسيط ومميز

في انتظار الرد

هلا بيك اخوي ..

صراحة ما احب اتقدم على الأخوان ..

لكن احب المساعدة ..

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

م.صالح
06-Oct-2008, 05:04
السلام عليكم

وين بقيت الدروس:mad:

الصراحة ما سجلت في المنتدى الا عشان هالدورة

الشرح واضح وبسيط ومميز

في انتظار الرد

أهلا بك أخي "مغترب" في عالم التطوع العربي..

أحمد الله أن وفقني لتيسير هذا الدرس.

وللأسف فلم أتمكن من إكمالها في تلك الفترة لبعض الانشغالات ..

وبإذن الله أتمها خلال الأسبوع القادم ..

وفقك الله ..

م.صالح
06-Oct-2008, 05:08
الأخ سعد السعد ..
السلام عليكم ورحمة الله وبركاته ..

حياك الله وبياك في عالم التطوع العربي ..

سعدتُ بمداخلتك ..

والطريقة التي تتبعها هي طريقة ممتازة لمن لديهم أساس ومعرفة سابقة بالبرنامج .. وأظنك لديك معرفة جيدة به..

وفقك الله...

الفكر والرسالة
06-Oct-2008, 05:50
شكراً لك على الدرس الجميل

بس هل يحق لي المتابعه لأني ما سجلت من البداية :confused:

دمتم بخير

م.صالح
06-Oct-2008, 06:02
نعم يحق لك المتابعة ..
وفقك الله ..

أرجوان
07-Oct-2008, 01:17
سددالله خطاك والى الامام

مغترب
07-Oct-2008, 04:45
شكرا لك اخي سعد السعد على ردك

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


وشكرا ل م.صالح واتمنى ان تستكمل الدروس في القريب العاجل


بالتوفيق للجميع

حنين البحر
13-Oct-2008, 10:02
بارك الله فيك ونفع بعلمك وجهدك الطيب ..

أستغفر الله
13-Jul-2009, 09:48
جزاكم الله خيرا

dark angel
06-Jan-2010, 04:57
السلام عليكم
ارجوا اكمال الدورة لانني مهتم بها كثيرا و شكرا لك

فريال علاء
01-Mar-2010, 09:01
يوجد دورات تصميم مواقع اون لاين علي هذا الموقع


http://www.etbcenter.com/webdesign.html

شكرا

فريال علاء
03-Mar-2010, 05:40
يوجد دورات تصميم مواقع اون لاين علي هذا الرابط


http://www.etbcenter.com/webdesign.html


شكرا