 |  | |
 |  | |
 |  | |
 |  |
       |
|
| |||||||||||||||||||||
| ¤ نــادي [ أدوات ودروس التصميـم ] ¤ [ هذا القسم متخصص بدروس وأدوات برامج التصميم بأنواعها ] |
| مواقع النشر (المفضلة) |
 |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
14-02-2006, 03:17 AM
| ||||||
| ||||||
| صمم موقعك من الألف الى الياء . المستوى الأول... السلام عليكم و رحمة الله و بركاته ...  الآن أصبح الجميع تقريبا ً يمتلكون مواقع شبكية سواء كانت خاصة بهم شخصيا ً أو خاصة بطبيعة عملهم ... و هؤلاء الأشخاص اما لديهم خبرة في التصميم أو أنهم أوكلوا مهمة التصميم الى غيرهم من الخبراء بمقابل مادي غالبا ً ... و لكن أين البسطاء الذين لا يمتلكون القدرة على دفع تكاليف التصميم لبعض شركات التصميم الجشعة من كل هذا  ؟ و بالاضافة الى ذلك لا يمتلكون المهارة الكافية لتصميم موقع بسيط صغير ... و لكن لديهم الأمل في الحصول على موقع بسيط ينشر فكرهم في هذا العالم الكبير ... عالم الانترنت و الشبكات ... اليوم أقدم الفرصة لكل من يريد أن يحصل على موقع مجاني يصممه بنفسه و هذه الفرصة عبارة عن شرح لتصميم و بناء موقع شبكي كامل باستخدام برنامج الفرونت بيدج بالاضافة الى شرح بعض مفاهيم تصميم المواقع و شرح وافي لكيفية نشر الموقع بعد الانتهاء من تصميمه باستخدام برامج الـ FTP ...  شرحي ان شاء الله سيكون على برنامج الفرونت بيدج الموجود لدي ّ ألا و هو Microsoft Front Page XP و هو لا يختلف كثيرا ً عن Front Page 2003 أو 2002 أو 2000 ... و لكنه يختلف تماما ً عن الـ Front Page 98 و الذي لا أنصحكم باقتنائه ...  المستوى الأول سيتضمن ان شاء الله تصميم الموقع بالفرونت بيدج فقط دون استخدام أي برامج أخرى أو لغات برمجه ... المستوى الثاني سيتضمن ان شاء الله استخدام بعض لغات البرمجه لاضافة بعض اللمسات الجماليه للموقع ... المستوى الثالث سيتضمن ان شاء الله استخدام بعض برامج التصميم مثل الفوتوشوب و هذا سيكون بعد اتقانكم للمستويين الأول و الثاني أو الأول فقط فهو الأهم ... أكثر المستويات دروسا ً و أهمها : المستوى الأول أقل المستويات دروسا ً و قليل الأهمية لكنه مفيد : المستوى الثاني الموضوع ليس شرح فقط بل شرح و استفسار و أنا تحت أمركم في أي استفسار  ...أخوكم / محمد فؤاد (^_^)      |
| مواقع ننصح بزيارتها |
|
14-02-2006, 03:17 AM
| ||||||
| ||||||
| الدرس الأول ... هنا ان شاء الله سنقوم بانشاء موقع شبكي يقدم معلومات عن متجر وهمي لبيع الأنمي مثلا ً و لنطلق عليه مثلا ً اسم ThE BesT AnimE .. يحتوي على معلومات عن الأنمي المعروض في المحل و معرض صور لهذه المنتجات و المزيد من هذه الأشياء ...  أولا ً نقوم بفتح البرنامج ... لا تعرف كيف تفتح البرنامج اتبع التالي و هو لا يحتاج الى صور ... 1- قم بفتح قائمة ابدا StarT ... 2- قم بالوقوف بمؤشر الفأرة على Programs ... 3- اختر من القائمة الجديده التي ستظهر لك Microsoft FrontPage ... و بهذا يبدا البرنامج في التحميل ... ان كانت هذه هي أول مره تستخدم فيها البرنامج فسيفتح لك على صفحه بيضاء جاهزه للكتابة فيها ... و ان كنت قد استخدمته من قبل لتحرير او بناء أي موقع شبكي آخر فسيفتح الموقع الأخير تلقائيا ً و لاغلاقه اختر من قائمة File احتر الأمر Close ... و الآن الى شرح لبعض مهام و اشرطة البرنامج تابعوا الصوره لتعرفوا المصطلحات ثم انزلوا اسفلها لتروا الشرح الخاص بكل صغيرة و كبيره في الصوره ... [BiMg]http://members.lycos.co.uk/dcanb/frtpage/st/0001-01.jpg[/BiMg] لمشاهدة الصوره بحجمها الطبيعي يرجى الضغط عليها عنوان الصفحه Page title طريقة سهلة لاختيار الصفحة التي تريدها عندما تكون هناك عدة صفحات مفتوحه معا ً ... سطر العنوان Title bar يعرض اسم الصفحة الحالية و موضعها على موقعك ... سطر القوائم Menu bar يحوي قوائم البرنامج التي ستساعدنا في التصميم مثل File , Edit , View , Insert ... مربع توجيه الأسئلة Ask a question box للعثور على مزيد من المعلومات عن خطوة معينه اكتب سؤالا ً في هذا المربع و سيبدأ البرنامج بالمقارنه بين سؤالك و بين ما هو في ذاكرته و يعطيك عدة اجوبه تساعدك ... اغلاق الصفحة Close page لاغلاق الصفحه المعروضه حاليا ً ... أسطر الانزلاق أو الازاحه Scroll bars تسمح لك بالتحرك و التنقل بين جنبات الصفحه سواء لأعلى أو اسفل أو الى اليمين أو اليسار ... سطر الحالة Status bar يشرح وضع المهمة التي يقوم بها البرنامج في الوقت الحالي .. فمثلا ً قد يعرض هذا السطر رسالة مثل هذه Retrieving index.htm عندما نفتح الصفحة الرئيسية للموقع . أو يعرض المكان الذي ستنتقل اليه ان كنت تؤشر على وصلة ( رابط ) Link في وضع الـ Normal على وجه التحديد ... أوضاع عرض الصفحه Page View Panes هذه هي أوضاع العرض المختلفة التي ستمكننا من عرض مساحة العمل الذي نعمل عليه .. فمثلا ً وضع الـ Normal هو الذي نقوم فيه بالتصميم اليدوي .. بينما الوضع HTML يتضمن وضع أكواد خاصة بلغات البرمجه المتعدده ... بينما الوضع Preview خاص بعرض موقعك بعد الانتهاء منه ... مؤشر التقدم Progress Indicator يوضح مدى التقدم في تنفيذ عملية ما ... زمن التحميل المقدر Estimated Download Time يعطيك فكره عن الوقت الذي سيستغرقه تحميل هذه الصفحه داخل أي متصفح انترنت بالثواني ... لوحة المهام Task Pane لوحة توجد في جميع برامج الأوفيس و خاصة XP تقدم أشهر و أفضل الأدوات التي تساعدنا في التصميم و اخراج العمل بصورة جميله ... سطر الأدوات القياسيه Standrad Toolbar واحد من عدة أسطر يحتوي على العديد من التطبيقات الهامة و التي هي في الأصل اختصارات عن قوائم البرنامج ... سطر التنسيق Formating Toolbar الكثير من الأدوات التي يصبح من الملل ان نصل اليها عن طريق القوائم و تستخدم عادة في تحرير النصوص ... سطر الأوضاع الرأسي Views Bar ما تراه في نافذة البرنامج الرئيسية يعتمد على الوضع View الذي يتم اختياره تلقائيا ً غالبا ً .. و الأيقونات الموجودة عليه تمثل طرقا ً مختلفه للإطلاع على معلومات موقعك و شكله ... لانشاء صفحة رئيسية Home Page الصفحة الرئيسية هي أول صفحة في موقعك .. و هي تقدم معلومات عن محتوى أو موضوع موقعك لجذب الانتباه اليه .. كما تحتوي على وصلات الى صفحات الموقع الخرى ... 1- في الصفحه الخالية التي تجدها عند فتح البرنامج لأول مره في وضع Page اكتب مرحبا ً بكم في موقع أفضل الأنمي ثم اضغط Enter حتى ننزل بالمؤشر الى سطر جديد كما في الصورة و قم بالتعديل على هذه الجمله كما يحلو لك كأي برنامج كتابة عادي كما في الصوره ...  ثم بعد ذلك قم بكتابة هذه الجمله ... ان كنت تحلم بالحصول على الأنمي الذي تريد أينما تكون فلقد أحسنت الاختيار بدخولك موقعنا ... بامكانك ان تلقي نظرة على منتجاتنا و بعض الصور الخاصه بها في معرض الصور ... ثم اضغط Enter ... و الآن نريد أن نضيف صوره في هذه الصفحه ماذا نفعل يا ترى ؟! نتبع الآتي ... من قائمة Insert نختر Picture ثم From File ...  ستظهر لنا نافذة جديده نختار منها الصوره ثم نضغط على Insert ...  سنجد أن الصوره تم ادراجها في الماكن الذي تركنا فيه مؤشر الكتابه ...  الآن و قد أدرجنا الصوره نريد مثلا ً أن نجعل الزائر عندما يضغط عليها تفتح له صفحه جديده من موقعنا فيها محتوى جديد ما هو المطلوب منا لنقوم بذلك ... ؟! المطلوب هو انشاء صفحه جديده في البدايه و ذلك يتم كالتالي ... من شريط الأدوات نختار صورة الورقه البيضاء و نضغط عليها مرة واحده بزر الفأره الأيسر ...  سنجد ان الصفحه الجديده تم انشاءها و ظهرت في الـ Page tab و الذي يمكننا من التنقل بين الصفحات بمجرد الضغط على عنوان الصفحه ...  فلنفترض ان هذه الصفحه ستكون من أجل بعض المعلومات فقط لا غير ... نقوم بكتابة المعلومات التي نريدها ثم نقوم بحفظ الصفحه كالتالي ... نضغط من لوحة المفاتيح على Ctrl + S كونترول و إس ... ستظهر لنا نافذة مثل هذه ...  نقوم بتسمية الصفحه كما نريد و نضغط على الزر Save ... ملحوظه : نحن لم نقم بحفظ الصفحة الرئيسية لذا عندما نأتي لحفظ الصفحه الجديده سنجد ان هناك اسم افتراضي موجود لها الا و هو index و يجب ان لا نحفظها بهذا الاسم لأن هذا سيكون عنوان الصفحة الرئيسية ... نعود مره اخرى لصفحتنا الرئيسية ثم نضغط على الصوره بزر الفأرة الأيسر مرة واحده فقط على الصوره ... ثم نضغط من لوحة المفاتيح Ctrl + k و ذلك لاضافة الرابط للصوره ... بعد الضغط على Ctrl + K من لوحة المفاتيح ستظهر لنا نافذة مثل هذه ...  نضغط مرة واحده فقط على الصفحه ثم نضغط Ok ... و الان مبروك تم اضافة الرابط ... و الآن نريد أن نضيف رابط على نص ماذا نفعل ؟! أولا ً نقوم بتحديد النص ثم نقوم ببقية الخطوات السابقه و انتهى الأمر ... ^_^ و لكننا لا نتمكن من فتح الرابط عند الضغط على الصوره فما الحل ؟! الحل في الصوره التاليه ...  نقوم باضغط على الوضع Preview ثم نضغط على الصوره و نرى النتيجه ... بمجرد الوقوف على الصوره نجد ان شكل الماوس يتغير الى شكل يد كهذه و هذا يعني ان هذه الصورة تحتوي على رابط ...  و الآن لنعود الى وضع التصميم نضغط على الوضع Normal ... و لنحفظ الصفحه الرئيسيه كالتالي ... بالضغط على Ctrl+S من لوحة المفاتيح تظهر لنا نافذة جديده كهذه .. و سنجد ان اسم الصفحه جاهز الا و هو index و يجب ان لا نغيره طالما ان هذه هي الصفحة الرئيسية و نضغط على Save ...  بعد الضغط على save ستظهر لنا نافذة جديده كهذه و التي تطلب منا ان نحفظ الصور في مجلد آخر ... المهم نضغط على زر Change Folder ...  فتظهر لنا نافذة جديده ... نضغط منها على المجلد الموجود بعنوان images و في كل مرة نضيف فيها أي صوره يجب ان نقوم بحفظها في هذا المجلد ...  بعد ذلك ستظهر لنا هذه النافذه مرة أخرى نضغط منها على الزر OK ... أعلم ان الشرح سيء و به بعض النقاط المبهمهو الصعبة الفهم و لكن اعذروني فأنا أدرس و أعد الشرح معا ً ... و بالنسبة الى أي استفسار انا في خدمتكم ...الصور مرفوعه على سيرفري الخاص ... و انتظروا البقيه في وقت لاحق ان شاء الله ... أخوكم / محمد فؤاد (^_^) |
|
14-02-2006, 04:20 AM
| ||||||
| ||||||
| حسونو : وااااااااااااااااااااااااااااااااااااااااااااااااا ااو @×@ !!!!!!! يامي : ما شالله !!! و الله إنك نابغه يا آر إتش بي....ما شالله عليك !!!!!! @___@ حسونو : و الله من زمان كان بودي أسويلي موقع....و إنشالله بقرأ هالموضوع بدقة مع كوب من القهوة لتعديل المزاج >w<\ !!! يامي : الموقع عني آنا صح ؟؟؟؟؟ حسونو : مالك شغل...خلها مفاجأة <w< !!! ------- تسلم مرة ثانية أخوي على الموضوع الأكثر من حلو.....صراحة....يستحق علامة التميز ;) |
|
14-02-2006, 06:26 AM
| ||||||
| ||||||
و مشكور على ترشيحك للموضوع لعلامة التميز ... أخوك / محمد فؤاد (^_^) |
|
05-03-2006, 03:05 AM
| ||||||
| ||||||
| ما شاء الله عليك أخوي محمد فؤاد أشكرك جزيل الشكر على شرحك الرائع .. ما تتصور كيف الموضوع مفيد جداً حداً .. و أتمنى منك أمنية واحدة .. و هي أكمال هذا الدرس بمستوياته الأربعة !! و سوف يكون لي الشرف, أن تضع المواضيع في قسمي و سوف أطلب من الأخ Tomthy أن يقوم بنقل هذا الموضوع لقسم الجرافيكس و الأغاني و الكليب !! و شكراً جزيلاً لك !! |
