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

مشاهدة النسخة كاملة : صمم استايل لمدونتك بشكل احترافي (فقط لاصحاب وورد برس)


اشراق العالمrss
02-22-2009, 09:40 PM
<div>سلاااام عليكم

ـــــــــــــــــــــــــــــــــــ
العـــضويه مستعارهـ
ـــــــــــــــــــــــــــــــــــ

انا واجهتني مشكلة تصميم استايل للمدونه ونزلة موضوع فيها http://www.traidnt.net/vb/showthread.php?t=1119563

ولقيت الحل والحمد لله...:shiny01:

وقلت يارجال لاخير في كاتم علم مير اقوم وادور على الدرس الي حصلته وهذا هوو


سنبدأ في هذا الجزء بتصميم الموقع أو المدونة.

هناك أمور يجب ان نحددها في تصميم الموقع مثل لون الموقع وتنسيق الموقع وأن نحدد العرض المناسب للموقع,

هل نريده متمدد بنسبة 100% او نريده ثابت بمقاس واحد ؟ أغلب المواقع المشهورة تستخدم تصاميم ذات عرض ثابت مثل Yahoo, Wordpress, Facebook, YouTube وطبعاً الموقع الشهير عالم التقنية

لذالك سنقوم بعمل تصميم ذات عرض مقاس ثابت , مقاسات العرض الثابته يفضل أن يكون أقصى عرض 1003px لكي تكون مناسبه لأكثر الشاشات المستخدمه حالياً وهذا ما يتم عمله لأكثر المواقع الشهيره, سابقاً كانت تستخدم مقاسات العرض 779px لكي تتناسب مع دقة الشاشة 800*600 لجميع المستخدمين لكن بدأت هذه الظاهره تنقرض وهذا لأن أغلب اذا ما كان كل المستخدمين يستخدمون حالياً مقاس دقة شاشة اكبر من 800*600 مثل 1280*800.

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

http://www.tech-wd.com/wd/wp-content/uploads/tech-wd_web_style_thumb.jpg
أضغط على الصورة لتكبيرها (http://www.tech-wd.com/wd/wp-content/uploads/tech-wd_web_style.jpg)


وطبعاً بعد ما نخلص من عمل وتقطيع الموقع راح أطرح الستايل مجاناً للجميع وكذالك مصدر الفوتوشوب موجود في هذا الموضوع

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

الأن بسم الله نبدأ

نفتح الفوتوشوب

نفتح صفحة جديدة بالضغط من القائمة العلوية ( File -> New ) أو ( ملف -> جديد )

http://www.tech-wd.com/wd/wp-content/uploads/tech-wd-web/1.gif

اكتب اسم الملف الجديد