|
|
|
|
||||||
|
|
LinkBack | أدوات الموضوع | طرق العرض |
14 - 07 - 2006, 01:58
|
||||||||||||||||||||||||||||||||||||||
|
بسم الله الرحمن الرحيم ...
السلام علكيم ورحمة الله وبركاته .. اخواني .. الكرام ... طبعا اخواني قبل كل شيء .. الاستايل الذي سوف نقوم بتصميمه وتركيبه في جميع سلسلة الدروس .. ملحوظه مهمه :- أخواني احب انوه اني تعبت على الشرح و الصور ..الخ لا اريد الا كلمه شكر والدعاء لوالدينا .. لا اكثر من هذا نحن نحاول نوصل قدر الامكان فهم تصميم الاستايلات بطريقه بسيطه واحترافيه .. وأن كان احد سبقنا بنفس النمط فالعذر والسموحه .. || الدرس || هو مجرد مثال حي ومباشر للتصميم .. فلذلك وجب علي اعلامكم بهذا الشأن ... وبإذن الله في اخر سلسة الشروحات راح يتم طرح الاستايل لمجرد الاستفاده من التعديلات ورؤية الاستايل وكيفية تصميمه ... بسم الله نبدأ الدرس ... اول شي ابيكم تروحون للمجلد images الموجود بداخل مجلد المنتدى الرئيسي .. بعدها تسوون فيه مجلد جديد بالاسم اللي يعجبكم ... وانا راح تكون شروحي على مجلد اسمه mystyle بعدها ابيكم تضيفون وسط هالمجلد اللي سويتوه مجلد جديد وتسمونه misc .. الان اذهب الى لوحة التحكم ومن قائمة الستايلات اذهب الى ضبط الاستايلات ... الان سوف ترى الاستايلات .. اذهب الى الاستايل الذي تريد ان تعدل عليه لكي تقوم بالتصميم فوقه .. واختار من القائمه المنسدله خيارات الاستايل .. ثم اضغط اذهب .. الان اذهب الى خيار images path او مسار مجلد الصور .. بعدها غير مسار هذا المجلد (' images/misc ') الى هذا المسار ('images/mystyle/misc') كما بالصوره التالية :  طبعا mystyle هو اسم المجلد الذي انشأناه سابقا في مجلد images .. واللي عملناه الان هو اننا عدلنا على مسار الصور القديم الى المسار الجديد ... طبعا باقي المسارات اختياريه بالتعديل كل مسار له مجلد مختص به فقط لتعرف المزيد عنها اقرأ المكتوب بالجانب الايمن .. وان لم تفهم المقصود .. او المضمون ..اذهب الى مجلد images الموجود في مجلد المنتدى الرئيسي بعدها اذهب الى كل مجلد ترا مساره وتفحص ماذا يحتوي من صور ........ الان نبتدي الدرس  . . .اليوم راح نبتدي باول سلسلة دروس تصاميم الاستايل ... وراح نبتدي نصمم جزء من الاستايل وهو البنر ... ملاحظه مهمه (" ماهو لازم انك تتقيد بنفس التصميم اللي انا مسويه .. ولكن تقيد بالطريقه نفسها ") اولا افتح الفوتوشوب .. الان نبتدي بتصميم اول شي بالاستايل وهو البنر ... ثم افتح صفحه جديدة بهذه المقاسات : العرض : 474 px الطول : 95 px (" بالنسبه للحجم صفحة البانر يجب ان لايتعدى عرضها 474 بيكسل ... واما بالنسبة الى طولها فبراحتك .. اهم شي يكون مناسب لتصميمك .. ولكن انصح بانك تحاول تقلل من الطول بقدر الامكان ..") وبعدها قم بتصميم البنر اللي يعجبك ... وطبعا انا صممت لكم بنر بسيط جدا .. صوره للبنر  وطبعا لتصميم البنر قواعد ثابته ... الا وهي ان البنر يكون متوسط الحجم .. له نقطة تمدد ... وان يكون قليل الصور .. وبنفس الوقت كلما كان خفيف الحركات وافكاره جميله كلما كان البنر اجمل .. بالنسبه لنا هنا ماراح الزمكم باحد هذه القواعد ولكن راح نستخدم قاعده وحده الا وهي نقطة التمدد ... بتقولون وشو نقطة التمدد ؟ راح اجاوبكم على سؤالكم ... نقطة التمدد هي النقطه التي تكون فيه الصوره خلفيه للجدول بحيث ان هذا الجدول هو الذي يتمدد ويتقلص مع تمدد وتقلص الشاشه .. بمعنى اصح انه يكون متدد على حجم الشاشه كليا .. بحيث انه يكون مناسب لجميع انواع احجام الشاشه سواء كانت 800×600 او 1024×768 اوغيرها من احجام شاشه ... وطريقة وضع نقطة تمدد هي كالاتي ... بعد تصميم البنر .. يجب عليك ان تقوم بتحديد نقطة التمدد ... وقصها .. تعالوا معي نقصص البنر ونحدد نقطة التمدد فيه .... واللي مافهم شي الى الان راح يفهم المقصود لما يتابع ويكمل الدرس .. طبعا طريقة القص هينا راح تختلف كليا عن باقي الدروس .. لاننا راح نقصص ببرنامج الفوتوشوب نفسه .. ونختصر الطريق .. اولا وقبل التقصيص .. لازم نعرف وشهي الاداه اللي بنستخدمها .. والاداه اسمها Slice Tool  وهذي الاداه وظيفتها تقسم لك التصميم لصفحات الويب ... وللوصول الى هذه الاداه اضغط من الكيبورد حرف K الان كل ماعليك هو تقصيص التصميم بشكل منسق ومتساوي ... مع تحديد نقطة التمدد .. انظر الى الصور للتوضيح اكثر ...  الان يجب علينا حفظ التصميم بتقسيماته ... وطريقة حفظه هي كالتالي ... اذهب الى قائمة File ("ملف") بعدها اذهب الى Save For Web (" حفظ للموقع ") الان سوف تظهر لك الصفحة التاليه ...  عند الضغط على Save سوف تأتي نافذه كما بالشكل التالي : 
وراح تحصل معه مجلد اسمه images وهذا المجلد اللي فيه الصور اللي قسمتها ... الان اذهب للفرنت بيج وقم بالذهاب الى قائمة ملف بعدها اختار فتح .. الان قم بإختيار ملف bnr.html الان سوف يظهر معك البنر ... كل اللي عليك تسويه فيه هي كم شغله .. تعديلات بسيطه اول ماتدرج الملف راح يظهر لك الشكل التالي :  اضغط على الجدول بالزر الايمن واختار خصائص الجدول وافعل كما هو موضح لك بالصوره التاليه :  بعدها اضغط موافق ... سوف يظهر لك الان الجدول بهذا الشكل ..  الان امسح الصوره التي بمنتصف الجدول واذهب الى الصوره التي سوف تجعلها نقطة التمدد ... واضغط عليها دبل كليك وسوف تأتيك خصائص الصوره اذهب الى تبويب عام .. بعدها انسخ رابط الصوره واضغط موافق ... كما هو موضح لك بالصوره ..  بعد ما نسخت رابط صورة نقطة التمدد .. عليك الان بالذهاب الى الجدول وفي منتصف الجدول ، اي في الخانه الفاضيه ، تضغط الزر الايمن بعدها تختار خصائص الخلية ... كما هو موضح لك بالصوره :  الان عليك فقط ان تفعل كما هو موضح لك بالصوره :  بعدها اضغط موافق ... الان سوف ترى ان البنر قد اكتمل .. والان البنر في حالة تمدد وتقلص على حسب حجم الشاشه التي يستخدمها الغير ... دون ان يؤثر على التصميم .. اممم حتى الان كل شيء يسير على مايرام ... الان بقي عليك تقريبا شغلتين لكي يكون البنر جاهز .. اولا من الفرنت بيج اذهب الى عرض التعليمات البرمجيه او HTML وستجدها في اسفل شاشة البرنامج بالجهة اليمنى لمستخدمين الاصدار العربي والجهة اليسرى لمستخدمين الاصدار الانجليزي ... صوره للتوضيح ..  الان اريدك ان تحذف بعض الاكواد التي لانحتاجها ... وسوف اوضح لكم ماهي هذه الاكواد ... اولا نحدد من بداية كود رمز PHP:
رمز PHP:
ثم بعد ذلك نقوم بالتحديد من : رمز PHP:
رمز PHP:
صوره للتوضيح :  الان باقي علينا شغله .. وهي تغيير روابط الصور ... وطريقة تغييرها بسيطه .. كل ماعليك فعله هو الضغط من الكيبورد على Ctrl + H وسوف تأتيك نافذة الاستبدال .. او تذهب الى قائمة تحرير بعدها تختار استبدال ... الان اكتب في خانة البحث التالي : رمز Code:
images/ رمز Code:
$stylevar[imgdir_misc]/
نرجع لمحور حديثنا ... الان بقي علينا شغلتين الاولى .. انك تنقل الصور الموجوده بمجلد images ... تنقل الصور الى مجلد misc الموجود في مجلد mystyle اللي في مجلد الصور الرئيسي في المنتدى بعدما نقلت الصور ... الان اذهب الى المنتدى وخش لوحة التحكم بعدها روح الى ضبط الاستايلات بعدها خش على التمبلتس بعدها خش على تمبلت Header ...  لا تسوي ذكي وتمسح اللي فيه وتحط الكود اللي بالفرنت بيج وتسبقني بالكلام وتجيب العيد في نفسك ...باقي شغله لازم نسويها علشان يكون الشغل سليم ... ابيك تنسخ الكود هذا من تمبلت الهيدر رمز PHP:
يعني يجي بالشكل هذا :  الان سو تحديد للكل عن طريق الضغط على Ctrl +A بعدها قم بنسخ الكود كامل عن طريق الضغط على Ctrl + C اللحين رح طال عمرك للتمبلت الهيدر بعدها امسح كل اللي فيه والصق اللي نسخته عن طريق الضغط على Ctrl + V واضغط على حفظ ... الان رح شوف البنر الى درس أخر ان شاء الله الا وهو الفوتير ..  اخوكم في الله :- ابو عبدالعزيز العريني ..
التعديل الأخير كان بواسطة D 1 r k; 14 - 07 - 2006 الساعة 03:52
السبب: تعديل احد من روابط الصور ..
|
|
:: عضو نشيط ::
 
 |
الله يعطيك العافية |
|
:: عضو فعال ::
|
ومشكور على ردك أخي المشجع .. أخوك :- أبو عبدالعزيز العريني .. |
|
:: عضو نشيط ::
|
الله يعطيك العافية.... |
|
:: عضو فعال ::
|
أخوك :- ابو عبدالعزيز العريني |
|
:: عضو نشيط ::
|
وبنتظار باقي دروسك تحياتي |
|
:: عضو فعال ::
|
أخوكم :- ابو عبدالعزيز |
|
:: عضو نشيط ::
   |
|
|
:: عضو فعال ::
|
اخوكم :- ابو عبدالعزيز العريني .. |
|
:: عضو فعال ::
|
اخوك :- ابو عبدالعزيز العريني |
|
:: عضو نشيط ::
 |
|
|||||||||||||||||||||||
|
:: عضو فعال ::
|
أخيك :- ابو عبدالعزيز |
| العلامات المرجعية |
| أدوات الموضوع | |
| طرق العرض | |
|
|
العرض العادي
