تعلم تصميم الموقع من الالف الى الياء

[بشاير آل عبدالله]

اخواني واخواتي

من أعضاء ومشرفين
يسعدني ان اقدم لكم لكم شرح كامل عن كيفية تصميم الموقع من الالف الى الياء

بسم الله نبدأ

اولا ماهي البرامج التي سوف نستخدمها

البرامج كثيره ولكن سيكون الشرح على برنامج الفرونت بيج xp العربي

كي يسهل عليك فهم الدرس

نقاط هامه قبل البدء بالتصميم

من اهم مايسهل عليك تصميم الموقع هو دراسة ما ستقوم بوضعه من محتويات لموقعك

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

كيف يمكننا الحصول على برنامج الفرونت بيج xp العربي

يمكننا الحصول على البرنامج من محلات الخاصة بالكمبيوتر اما بشراء البرنامج

او بأخذ الجهاز الى احد هذا المحلات وتطلب منهم تحميل البرنامج

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



http://www.alzaker.com/vb/uploaded/fro1.gif

سنبدأ بالشرح مباشرة بدون شرح الاوامر لاننا سنتطرق اليها جميعها

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

الضغط على رمز الصفحة http://albakr.net/images/fro2.gif
بعد الضغط ستظهر لنا الصفحة بيضاء كما في الصوره التالية
http://www.alzaker.com/vb/uploaded/fro3.gif

الان نريد وضع خلفية للصفحة نذهب الى قائمة تنسيق ثم نختار خلفية
http://www.alzaker.com/vb/uploaded/fro4.gif
بعد اختيار خلفية سيظهر لنا كما في الاسفل

http://www.alzaker.com/vb/uploaded/fro5.gif
طريقة التعامل مع هذا المربع

اذا اردنا وضع الخلفية صوره نقوم بوضع صع عن صوره خلفية عند الرقم 1

بعد ذلك ستلاحظ ان الخانه رقم 2 اصبت نشطه

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

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

واستعراض الخلفية من الجهاز

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

نقوم بختيار الون من الوان الخلفية عند الرقم 4

بعد تحديد الخلفية المناسبة نقوم بالضغط على موافق عند رقم 5

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

http://www.alzaker.com/vb/uploaded/fro6.gif


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

الان قم بالذهاب الى برنامج اكسل Microsoft Excel

بعد تشغيله سيظهر لنا كما في الشكل التالي


http://www.alzaker.com/vb/uploaded/fro7.gif

في الصف 1 ثم اسحب الماوس الى اسفل بتجاه اليسارA قم بالضغط على العمود

في الصف الخامس ليصبح بهذا الشكل L الى ان تصل العمود

http://www.alzaker.com/vb/uploaded/taman8.gif

بعد التحديد نقوم بنسخ الخليه وذلك بالضغط بالماوس بالزر الايمن ونختار نسخ

الان نرجع الى برنامج الفرونت بيج ونضع الؤشر في اعلى الصفحة في الوسط

ونضغط بالزر الايمن ونختار امر لصق سترى ان الصفحة اصبحت بهذا الشكل

http://www.alzaker.com/vb/uploaded/fro9.gif

الان نقوم بالضغط في اعلى الصفحة باليمين ونضع صح عند جداول كما في الصوره

http://www.alzaker.com/vb/uploaded/fro10.gif
ستجد انه ظهر لنا شريط جديد وغالباً مايظهر اسفل الصفحة كما في الصوره التالية

http://albakr.net/images/fro11.gif
من خلال هذا الشريط نستطيع التحكم بالخلية التي قمنا بوضعها في الصفحة

الان سنقوم بوضع شعار للموقع في اعلى الصفحة

اولا نقوم بالضغط على زر الممحاة التي في شريط الجدوله http://albakr.net/images/fro12.gif


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


http://www.alzaker.com/vb/uploaded/fro13.gif

بعد ذلك نقوم بوضع المؤشر داخل الخليه التي قمنا بمسحها ثم نضغط على زر ادارج http://albakr.net/images/fro14.gif


ستلاحظ انه فتح لك مربع استعراص الصور من جهازك ابحث عن اي صوره ثم اضغط

على زر ادراج كما في الصوره التالية

http://www.alzaker.com/vb/uploaded/fro15.gif
بعد ذلك ستجد ان الصوره قد ظهرت في الصفحة كما في الصوره التالية

http://www.alzaker.com/vb/uploaded/fro16.gif


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

اولا نذهب الى المكان الذي نريد وضع الرابطه فيه ونختار الممحاة http://albakr.net/images/fro12.gif
ونمسح خط واحد من الخلية اي ندمج خليتنان مثال الصوره اسفل


http://www.alzaker.com/vb/uploaded/fro17.gif
الان في الخلية التي قمنا بعملها نضع المؤشر فيها ونقوم بكتابة اي شي نريد مثال منتديات الزاخر

وقبل ان نبدء بالعمل سنقوم بشرح عمل بعض الازرار


http://www.alzaker.com/vb/uploaded/fro18.gif

الان نكمل الدرس

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

زر توسيط كما موضح في الصوره اعلى ونقوم بالضغط على زر اداة الربط

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


http://www.alzaker.com/vb/uploaded/fro19.gif
ذكرنا نقوم بتضليل ماكتبناه كما عند الرقم 1

عند الرقم 2 ستشاهد ان ظهر لك الكلام الذي قمت بكتابته

قم بتحديد الصفحة اذا كانت في جهازك كما عند الرقم 4

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

الان قم بالضغط على المستندات عند الرقم 1

بعد تديد الخلفية اضغط على الزر موافق عند الرقم 6

الان قم بحفظ الصفحة وطريقة حفظها كتالي

اذهب الى ملف ثم اختر حفظ بأسم شاهد الصوره التالية

http://albakr.net/images/fro20.gif
سيظهر لك المربع التالي


http://www.alzaker.com/vb/uploaded/fro21.gif
بعد ذلك سيظهر لك عددة مجلدات في المستندات ما يهمنا هو مجلد my webs

نقوم بفتحه ستجد باداخله مجلدين شاهد الصوره ورقم 2

عند الرقم 3 نقوم بتغيير اسم العنوان الذي سيظهر في اعلى الصفحة

وعند الرقم 4 نقوم بكتابة اسم الصفحة index كما عند الرقم 4

ثم نظغط حفظ عند الرقم 5

كما عند الرقم 4 index وعند الرقم 4 نقوم بكتابة اسم الصفحة

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

انظر الى الصور

http://albakr.net/images/fro22.gif
انظر الى الصور عند الرقم 1شاهد الصور التي طلب منا حفظها

الان اضغط على تغيير المجلد عند رقم2 ستجد مجلدين قم بحفظها في مجلد images



تحياتي
وللشرح بقية
لاتنسونا من صالح دعائكم

[النجم الساطع]

روعة جداً أشكر لك الشرح الجيد أختي الغالية بشائرالعبدالله
يعطيك الف الف الف عافية
ونتمنى لك دوام التوفيق
جزاك الله خير الجزاء

لك منّي خالص الدعــاء أختي الغالية
http://www.tawqe3.com/images/da3wa_26.gif

[بشاير آل عبدالله]

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

قم بفتح الصفحة التي قمنا بعملها

قم بتضليل الخلية التي قمنا بكاتبة فيها شبكة البكرنت كما في الصورة

ويفضل تكبير الخط الى مقاس 14

الان قم بالضغط على الخلية التي قمت بتضليلها بالزر الايمن

واختار خصائص الخلية كما موضح
http://www.alzaker.com/vb/uploader.php?do=doupload/for31.gif

سيظهر لك كما في الشكل التالي اختر منها نمط
http://www.alzaker.com/vb/uploaded/for32.gif

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

http://www.alzaker.com/vb/uploaded/fo34.gif

سيظهر لك الشكل التالي تابع معي بالارقام
http://www.alzaker.com/vb/uploaded/fo35.gif

عند الرقم (1) اجعل الخيار على مزدوج

عند الرقم (2) اجعل اللون ازرق او اي لون تريد

عند الرقم (3) اجعل العرض 7

بعد ذلك اضغط على موافق عند الرقم 4

واضغط موافق الى ان تغلق جميع المربعات

ستجد الان ان الخلية اصبحت لها برواز ولا تنسى توسيط الخط في الخلية

وبعد ذلك اضغط على معاينة كما في الصوره
http://www.alzaker.com/vb/uploaded/for36.gif

بعد الضغط على معاينة ستظهر لك الصفحة كما في الشكل التالي
http://www.alzaker.com/vb/uploaded/for37.gif

الان بعد ان عرفنا طريقة وضع برواز على الخلية التي يوجد بها الرابطة لصفحة اخر

نستنتج ان يمكننا عمل ذلك في اي مكان في الخلية واخيار اي شكل من البراويز



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

اجعل صفحتك كما في الصفحة التالية
http://www.alzaker.com/vb/uploaded/for38.gif

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

نقوم بدمج اكثر من خلية كما في الشكل التالية وطريقة دمج الخلية تم شرحها سابقاً
http://www.alzaker.com/vb/uploaded/for39.gif

الان ضع مؤشر الماوس في الخلية التي قمت بدمجها

ثم من قائمة ادراج اختر مكون ويب كما في الصورة
http://albakr.net/images/for40.gif
سظهر لك مربع اختر منه تأثيرات حيوية وفي اليسار اختر شاشة اسمية كما موضح
http://www.alzaker.com/vb/uploaded/for41.gif

بعد الضغط على انهاء عند الرقم 3

سيظهر لك المربع التالي اتبع الشرح بالارقام

http://albakr.net/images/for42.gif

رقم (1) اكتب النص الذي تريد ان يتحرك

عند الرقم (2) اجعل الاختيار على يمين

بعد ذلك اضغط على موافق

بعد الضغط على موافق اضغط على تكبير الخط كما في الصورة اجعله 14

http://www.alzaker.com/vb/uploaded/for43.gif

الان اضغط على معاينة ستجد ان النص يتحرك

http://www.alzaker.com/vb/uploaded/for44.gif

[al7zn]

روعة الشرح أشكر لك الشرح الجيد أخي الغالي بشائرالعبدالله
يعطيك الف الف الف عافية
ونتمنى لك دوام التوفيق
ممكن اطلب منك طلب يصغير انا عندكم عضو جديد ابي منك تسويلي واجهت موقع اذا ماعليك امر او تضيفني علي الايميل MN_@hotmail.com

[امي اليمن]

يسلمووو وإن شاء يستفيدو من يريد بتصميم موقع يعطيك الف عافيه

[بشاير آل عبدالله]

للتصميم بقية

سوف اكمل الشرح لاحقاً
شكرا لمروركم الكريم
دمتم بخير