درس تصميم موقع شخصي حصريا علي ترايدنت







           

بسم الله الرحمن الرحيم مساء صباح الورد للجميع , قبل كل شئ نتذكر ( سبحان الله وبحمده سبحان الله العظيم ) ,, عنوان الدرس : شرح تصميم موقع رسمي , البرنامج المستخدم : الفوتوشوب + الفرونت بيج الملحقات للدرس : يتطلب برنامج الاف تي بي مستوى الدرس للمبتدئين : وسط , مستوى الدرس للمحترفين : سهل ,

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

 اضغط علي الصور للرؤية بشكل مكبر :

اهم شي التركيز ثم التركيز ثم التركيز , , ثم التركيز , طيب نفتح ملف بالمقاسات هذي , >> احفظ المقاسات بالمفكره اهم شي العرض احفظة ترى تحتاجه بالفرونت بيج ظروري مو تقول سعود نسيت , انت يالغالي ويالغاليه سووا مثلي , عشان الانجاز بعدين احترفوا براحتكم , انا صممت شي خفيف يعني حطيت مستطيل طويل وكتبت تحته القوائم وفوق اسم الموقع وحطيت رابط موقعي , وطلع معاي كذا

نروح طال عمرك لسطح المكتب ونسوي مجلد وحط اسمه مثلا >> az انت بإمكانك وضع الاحرف اللي تبيها بس انتبه ظروري انجليزيه تكون ولاتكون طويله يعني حرف ولا حرفين افضل لك , , نرجع للفوتوشوب ونحفظ الهيدر بالمجلد هذا وخل اسمه >> h طريقة الحفظ من file ثم save for web ,, طيب سعود الشمري ممكن سؤال فديتك !! طيب اسعل , قصدي اسال !! ليه الهيدر ماقطعته !؟. لانه غير متمدد فديتك وانا راح اسوي درس مستقبلا للتصميم موقع رسمي لهيدر متمدد , ,,, نرجع لمحور حديثنا , الان نرجع للفوتوشوب ونسوي قوائم , افتح المقاسات التالية

الحين ياطول العمر ركز معاي , لابد من التركز ولا تفهي ,

بعدين طال عممرك ارسم على نفس طول وعرض الملف اللي فتحناه الجديد , لاحظ كيف

طبعا اسود مو زين , او بالاصح غير لائق لابد من اننا نغير خلفيته بالعلم ان هذا الشكل اللي رسمناه يكون ايطار لنفس القائمة اللي راح نسويها , قصدي كذا لاحظ شوف كيف بتصير القائمة مستقبلا ,

طبعا اللون الاحمر غامق هذا الشكل الاول اللي راح نسويه , اللون الاخظر الجدددا فاتح هذا الشكل الثاني , طريقة تغيير الخلفية من هنا

اللي صندوق الليرات مو طالع عنده فقط يضغط f7

اكيد تغير اللون عندكم , , ذالحين > قلبت دوسري هههه ونعم فيكم ابك عاني كيف بشرح > عتيبي >> لايزعلون علينا ونعم فيكم كلكم , الحين ننسخ الشكل السابق من صندوق الليرات , طريقة النسخ لاحظ من هنا

لاحظ الحين صار عندنا ليرين متشابهه ,

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

طبعا الان التلاعب يصير بالشكل الجديد اللي نسخناه لابد اننا نصغرة حبتين عشان يطلع القائمة احترافيه , لاحظ كيف !!

 لمشاهدة الشرح عملي علي اليوتيوب :

 لتحميل التطبيق العملي

الان نحذف لير الخلفيه البيظاء اللير المقفل , ظروري نحذفة لان مانحتاجة ,

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

لاحظ كيف صار معاي , حاول تسوي مثلي وغير لونه الى اللون اللي تبيه

الان ندمج الليرات مع بعض بالضغط على shift + ctrl + e لو تلاحظ صندوق الليرات صار لير واحد , ,, الان مابقى الا خطوات بسيطة نروح بأداة التول لـ تقطيع القائمة ثلاث قطع فقط

انا سويت لكم شرح فيديو افضل لكي التقطيع والتحديد يجي تمام , وتصير عندك خلفية مرة وحدة طبعا التقطيع بيكون ثلاث قطع تسهيلا لكم كـ مبتدئين , قطعه ( فوق + وسط + تحت )

 لمشاهدة الشرح عملي علي اليوتيوب :

 لتحميل التطبيق العملي

الان احفظ الملف كله بصيغة gif طريقة الحفظ من file ثم save for web وحط اسمه رقم 1 طبعا احفظه بنفس المجلد حقنا اللي سويناه اول , وهو لحاله راح يتقطع , ,,,’’,,, الان نروح الى file ونفتح ملف خارجي يعني من file ثم open ثم اذهب الى المجلد الخاص فيك بالنسبه لي انا az بعدين ادخل على مجلد images ثم تختار القطعة العلوية ,

طبعا اللير مقفل تقفيل جيزاني , والمفتاح دافنه بقبر يعني مافي امل نفتح القفل , روح طال عمرك بإداة التحديد ,

ثم حدد علي الشكل الكامل

بعد ماتحدد اضغط ctrl و حرف الــــc يعني حرف ؤ بالعربي , بعدين ملف جديد file ثم new بدون ماتغير المقاسات , على طول وبعد مايفتح الملف اضغط ctrl ثم حرف z وراح القطعه تصير بالملف الجديد , الان احذف اللير المقفل من الليرات وراح تبقى القطعه لحالها , والقطعه السابقه اللي مقفلها الجيزاني احذفها نهائيا , طيب , الحين فديتك يانظر عيني اكتب اسم القوائم لاحظ وش قصدي الحين

طبعا احفظها بمجلد az وليس داخل مجلد images احفظها داخل مجلد az وضع اسمها رقم 1 طريقة الحفظ من file ثم save for web ............. ثم راجع للفوتوشوب واحذف اسعاري وضعط مثلا اعمالي وهكذا , للي تبيه واحفظ وضع رقم 2 ثم 3 بالتتالي , ,,,, الان تقريبا خلصنا جزء كبير من الفوتوشوب , نروح ننتقل الى برنامج الفرونت بيج

الان ندرج جدول للهيدر

بعد مايدرج الجدول , يمين الماوس داخل الجدول يمين الماوس ثم خصائص الجدول وطبق التالي

, راح يصبح الجدول منقط , الان ادرج صورة الهيدر داخل الجدول

راح تصبح كذا بعد الادراج

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

وطبق نفس الشرح السابق لكن يختلف العرض

الان ندرج الصورة العليـــــا اللي حطيت اسمها اسعاري ثم السفلىآ طبعا ضع الماوس داخل الخليه العليـــــا ثم من ادراج الصور ادرج الصورة العليــــــــا ثم ضع الماوس داخل الخليه السفلىآ وادرج الصورة السفلية تلاقيها داخل مجلد images الموجود داخل مجلد az تلاقي اسمها h_03 لاحظ كيف الحين حاول تسوي لهم توسيط , تضغط على الصورة وتوسيط ونفس الشي للي تحت ,

الان يمين الماوس على الخليه التي بالوسط ثم اختار خصائص الخلية ثم طبق التالي

لو تلاحظ الحين صارت القائمة تمام , ...................... الحين طال عمرك نروح ونسوي جدول اخر ولكن هالمره يتكون من 6 خلايا , حاول ان يكون زر الماوس اسفل الجدول القائمة عشان يكون تحته , ونفس الطريقة يمين الماوس على الجدول وطبق التالي :

الان , اذهب الى الصندوق القديم اللي سويناه حق القائمة وحددة كله وسوي له قص

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

الان خليك ذكي القوائم اللي كتبتها الاسعار اعمالنا استبدلها هي الحين كلها >> اسعاري خل وحده اسعاري والباقي استبدلها , امسح الموجوده واضف صورة بدل منها وهكذا

الان ان شاء الله مابقى شي , نضع الماوس داخل القائمة الاولى

ثم ندرج جدول فيه ثلاث خلايا طبعه لازم يكون داخل الجدول , يمين الماوس على الجدول ثم خصائص الجدول

طبعا انا حطيت العرض 160 , انت شوف اذا كبيره صغر شوي واضا صغير كبر العرض شوي , بس اهم شي لايطلع برا حدود التصميم , ومن ثم طبق الشرح هذا على جميع القوائم الاربعه انا طبقتها على ( التصميم + الاحصائيات + اعمالنا + اسعاري ) لاحظ الان كيف صار

الان اكتب النصوص داخل القوائم شوف وش قصدي

طبعا بإمكانك تظليل النصوص وتنسيقها لون وغيره من التنسيقات , مثل توسيط حرف b تغير اللون وهكذا ,, لو ماكفتك الـ ثلاث خلايا ضع الماوس ع الخليه الاخيره ثم اضغط caps lock >> زر تلاقيه بالكيبورد يسار اسفل tap تقريبا وراح تفتح خليه جديده ولو تبي تسترجع سوي تراجع , وهكذا , الان انا بعد ماخلصت من جميع الخلايا لاحظ الان , سويت معاينه من تحت وشوف

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

ولكن عريضه شوي نرجع لتصميمنا الاول هذا

ثم نضغط عليه ctrl و حرف z اضغطه اربع مرات عشان يرجع بدون تحديد وتفكك الليرات لانه كان لير واحد

حدد عليه كلك

حيث تصبح هكذا

 لمشاهدة الشرح عملي علي اليوتيوب :

 لتحميل التطبيق العملي

دمج الليرات طبق كذا shift و ctrl و حرف e بعدين قطعها نفس طريقة التقطيع الاولى , بالفيديو المرفق سبق لكن يالله عشان خاطر عنونكم بشرح لكم من جديد ,

 لمشاهدة الشرح عملي علي اليوتيوب :

 لتحميل التطبيق العملي

طبعا بعد ماتحدد بالتول تذهب الى مجلد az وتسوي مجلد فيه جديد عشان القطع تصير فيه تحط اسم المجلد gg طبعا هالمجلد gg يكون داخل مجلد az وتحفظ فيه الملف طريقة الحفظ من file ثم save for web ثم احفظه داخل gg وحط اسمه 1 وهو يتقطع لحاله داخل الحين لو تدخل مجلد gg تلاقي في مجلد اسمه images وتلاقي داخله الصور انسخ الصور كلها وارجع الى مجلد gg والصقها داخل gg عشان تحذف مجلد images فهمت علي .؟ الزبده عشان نتخلص من كثرة المجلدات , ........................ الحين نروح للفرونت بيج

بعد ماتسحبه في اداة الممحاه هذي

لاحظ كيف صار

لـ التخلص من الممحاه اضغط على زر الممحاه مرة ثانيه من جديد ,,, الان نسوي جدول من ثلاث خلايا نفس اول ثم يمين الماوس وخصائص الجدول وطبق التالي

طبعا عرض الجدول لاتحط من راسك اذهب الى المجلد اللي سويناه gg عشان تعرف عرض القائمة

ثم ضع العرض , لانه امر مهم جدا وظروري , ,,, الان اضف الصور العليا ثم السفلىآ الجدول اللي بالوسط يمين الماوس عليه ثم خصائص الخليه

لاحظ كيف صارت

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

طبعا نفس اول قلت لكم جيزاني مقفلها وحاط المفتاح داخل قبر , فـ سوي تحديد انسخ كونترول + c افتح ملف جديد بدون تغيير مقاسات بعدين لصق , ثم احذف اللير المقفل اللي بنفس عملك الجديد , وحق الجيزاني احذفه نهائيا بأقرب بلدية , ,,, , بإمكانك كتابة كلمة خاصة فيك انك صاحب الموقع , مع التنسيق وتغيير اللون

الان نبي نسوي ارتباطات تشعبية طبعا انتهينا من الفوتوشوب نهائيـــا الان يبي لنا تركيز والله ودي اسجل صوتي عشان توصل لكم المعلومة صصصصح !!! لان كذا ماضنتي يفهم المبتدئي , ,, حبيبي قلبي عيوني تكفااااااااااااا ركز ورب الكون هالنقطه لازم تكون متفتح , يابعد راسي ركز >> وده يبكي بس عشان تركزون , , طيب اسمعني فوق مكتوب الرئيسية بالهيدر صح ؟ طيب افتح مفكره جديده واكتب الرئيسية وخذ مسافه شوي وحط عندها رقم 1 وشو الشي اللي جنبه ؟ مكتوب اخر التصاميم >> حط جنبه رقم 2 وهكذا شوف وش قصدي

عشان ماتلخبط , واذا كنت رافع ملفات على موقعك صفحات فرونت بيج برقم 1 و 2 بإمكانك تحط الرئيسية مثلا > a واللي بعدها b وهكذا , الحين الى قائمة الفرونت بيج اضغط على عرض ثم شريط ادوات ثم اختر صور راح تطلع لك هالقائمة هذي

ثم حدد على كلمة الرئيسية الموجوده بالهيدر بعد ماتحدد تطلع لك قائمة اجبارية ضع فيها الرقم اللي كتبناه بالمفكره اللي هو رقم 1 طبعا بعد رقم واحد اكتب htm. حيث تصبح هكذا

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

طبعا طبقها على جميع الصفحات الرئيسية اكتب مثلا فيها موقع فلان الفلاني او موقع تطوير ... اخر اعمالنا مثلا > امسح السابق > اسم الموقع واكتب اخر اعمالنا وهكذا , ,, الحين اذهب الى تعليمات برمجية عشان نستخرج ونعدل مسارات الصور من تحت يمين اضغط على تعليمات برمجيه

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

بعد ماتعدل احفظ الملف على سطح المكتب برقم 2 وهكذا , بعدين عدل وسو وضبط لـ الكلمة اللي بعدها وهي الاسعار , واحفظ الملف برقم 3 على سطح المكتب , وهكـــــــــــــــــــــــــــــــــــــذا > ان شاء الله وصلت لك المعلومة يارب ,

انتهي


http://www.traidnt.net/vb/traidnt1938332


  :

انشر الدرس في فيس بوك أرسل الدرس لجوجل انشر الدرس علي تويتر RSS انشر الدرس في ماي سبيس انشر الدرس في ياهو أرسل الدرس لاصدقائك ثبت الدرس