تصميم
شرح التصميم وتعديل الأنماط
أربط نفسك بنا
برجاء نسخ أحد الأكواد التالية إلى  العمود الجانبي في مدونتك .. لتساعد في نشر المدونة كي يستفيد منها أكبر قدر ممكن
 
تعلم تعديل التصميم
 
<a href="http://design88.jeeran.com/" target="_blank"><img src="http://img182.imageshack.us/img182/1420/12720475vw9.gif" border=0 alt="
تعلم تعديل التصميم"> </a>
******************
 
 
 
 <a href="http://design88.jeeran.com/" target="_blank"><img src="http://img114.imageshack.us/img114/5223/cvcvvq4.gif" border=0 alt="تعلم تعديل التصميم"> </a>
 
المقدمة
يعتبر تصميم المدونة من العوامل المهمة والجذابة لزوار مدونتك .. لذا كان من المهم أن تختار تصميماً يليق بما تطرحه في مدونتك من مواضيع
والتصميم محاولة لإكتشاف موهبتك وممارسته في حد ذاته متعة تشعر بها عندما تنتهي من وضع لمساتك الشخصية على مدونتك
وعندما كثرت الأسئلة عن كيفية التصميم وتعديل التصميم في جيران أنشأت الصديقة العزيزة جينا مدونة لشرح التصميم ودعتني لأكون مساهماً فيها حتى نضع شرحاً وافياً لكل من يبحث عن كيفية تعديل التصميم .. وبالفعل ساهمت في هذه المدونة بشرح رأس التصميم .. ثم لأسباب ما توقف نشاط تلك المدونة لأكثر من عام كامل .. ولكن مع كثرة الأسئلة قررت أن أضع شرحاً كاملاً لتعديل التصميم بالصور حتى تعم الفائدة للجميع
وهذه المدونة فكرة الصديقة العزيزة جينا
*****************
وسأعتمد في شرح تصميم المدونة على تصميم تكنو أزرق فهو أشمل تصميم تجري عليه تعديلا وإضافة اللمسات الشخصية
وطريق إختياره هكذا ...بعد تسجيل الدخول إلى حسابك في جيران إختار مدونات ثم خصائص ثم تصاميم ثم إختار من التصاميم العديدة (تكنو أزرق) .. ثم بعد ذلك إذهب إلى حرر التصميم ثم إلى عدل الأنماط لإضافة لمساتك
وشرح طريقة تعديل التصميم في الصفحة الرئيسية .. كل شئ على حدا
******************
يعتبر تعديل التصميم أو ما يسمى تعديل الأنماط أسهل شئ على الإطلاق .. فهي خطوات بسيطة وسهلة جداً قد شرحتها بالصورة حتى يكون الشرح أفضل
ولكن الشئ الذي يتطلب جهد هو كيفية التصميم .. وهذا كله بعيداً عن جيران وتعديل الأنماط .. فهو موهبتك التي تبرزها من خلال برامج التصميم وأشهرها الفوتوشوب والفوتوبروش .. وهناك مواقع عديدة تقدم دروس لكيفية التصميم .. وهو سهل وليس صعباً .. وسوف أضع بعض الدروس في الصفحة الرئيسية
*******************
هذه عشر نصائح لكي تكون مصمماً ناجحاً
( الألوان)
الألوان ، هي من أهم الأشياء في التصميم وهي ما يمكن أن تشكل فرقاً بين التصميم الجيد والتصميم السيئ ، وبين التصميم الجميل والتصميم القبيح . وبدون الاستعمال الجيد للألوان ، تصميمك لن يؤثر عليك كما كنت تتوقع .
(الدقة)
حاول ان تكون دقيقاً في جميع تفاصيل تصميمك مهما كانت صغيرة .
(الموضوعية)
من أهم مميزات التصميم موضوعيته ، فلا يمكن لك ان تضع خلفية تحتوي وروداً وقلوباً ثم تضع كلمة (الحاسب الآلي) .
يجب ان يكون هناك تناسق بين جميع عناصر التصميم .
(الخطوط)
وهي ما يميز اي نص في التصميم ، فحاول قدر المستطاع ان يكون الخط مقبولاً في التصميم .
(التنويع)
فلا تجعل جميع تصاميمك رومانسية أو تقنية ، وإنما من كل بحر قطرة .
(التوقيع)
قم بإنشاء رمز لك يعتبر كتوقيع لك في لوحاتك .
(النشر)
حاول ان تنشر تصاميمك في اكثر من مكان ، لتستفيد من النقد والتعليقات المختلفة .
(الأنتقادات)
تقبل أي انتقاد على عملك -مهما كان قاسياً- بوجه رحب . وحاول تطبيق كل الانتقادات .
(الخبرة)
عندما تقوم بصنع لوحة ، تكون قد اكتسبت نوع من الخبرة . لذا فحاول قدر الامكان ان تصنع العديد من اللوحات .
(حفظ الملف)
احفظ ملفك بحيث يمكنك التعديل عليه مستقبلاً ، في الفوتوشوب يمكنك حفظه بالامتداد .psd وفي الفلاش بالامتداد .fla ...
*******************
ولمن يجهل التصميم يمكنه أن يطلب تصميم وبأذن الله سأصنعه في أقرب وقت

تعديل رأس المدونة

تعتبر منطقة رأس المدونة(hedear) أهم جزء على الأطلاق في طريق تصميمك لمدونتك

فهي الواجهه والتاج الذي تزين به مدونتك

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

بسيطاًَ كان أفضل.
ويراعي تصميم هيدر عرضه 770 باكسيل وطوله كما تريد

طريقة تعديل رأس المدونة

بعد أن صممت هيدراً مناسباً لك .. إذهب إلى أحد مواقع رفع الصور على الأنترنت لترفع الهيدر وتأخذ الرابط .. مثل ذلك الموقع وهو يعتبر الأفضل
ثم إذهب الى عدل الأنماط في حسابك في جيران .. وضع الرابط مكان رابط رأس التصميم الحالي .. ولابد أن تضعه بين الأقواس ثم بعد ذلك ضع طول الهيدر الذي صممته
أنظر الشرح في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
 
إضغط على الصورة للرؤيتها بالحجم الطبيعي
يلاحظ في الصورة السابقة أن بإمكانك تغيير لون عنوان المدونة وحجم الخط ولون وصف المدونة وحجمه
 
 
 
 
تعديل خلفية المقالات
خلفية المقالات
وهي موجودة في منطقة البودي (main areas /body) هي لون الخلفية التي تكتب عليها المقالات والتعليقات والصور
وهي لها طريقتان لتغيرها
الطريقة الأولى :عن طريق وضع كود اللون المناسب لك مكان الكود المشار له في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
 
الطريقة الثانية : عن طريق وضع رابط لصورة خلفية بدلاً من كود الألوان
ولعمل ذلك إحذف كلمة backgroun-color :#DCDCDC
وضع مكانها الكود التالي (ضع الرابط هنا)background-image: urlلاحظ أن في الصورة السابقة يمكنك تكبير أو تصغير حجم خط المدونة
تعديل خلفية المدونة
خلفية المدونة
وهي توجد في منطقة البودي في بداية الأنماط .. وهي الخلفية الأولى للمدونة والتي تظهر بعد ذلك على أجناب المدونة
وهي كما في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
 إضغط على الصورة للرؤيتها بالحجم الطبيعي
وهي لها طريقتان لتغير ألوانها الى ما يناسبك
الطريقة الأولى : وهي عن طريق تغير رابط الخلفية التي تضعه بين الأقواس كما في الصورة التالية
ويكون أفضل كثيراً جداً إذا وضعنا خلفية صغيرة الحجم حتى تفتح الصفحة سريعاً لأن الخلفية تتمدد على كامل الصفحة لذا يفضل وضع خلفية صغيرة حتى لو كان أبعادها 20 في 20 باكسيل
أنظر الشرح في الصورة التالية
 
إضغط على الصورة للرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
يلاحظ من الصورة السابقة أيضاً أن بإمكانك تغير لون خط المدونة بشكل عام
الطريقة الثانية لوضع الخلفية
وهي عن طريق إستبدال الخلفية الصورة بأخرى ألوان كي تفتح أسرع كثيراً وهذا أفضل بكثير
والطريقة كالتالي
إحذف الأتي background-image: url (http://www.jeeran.com/im/blogs/templates/13/images/bg-outer.gif);
وضع مكانها كود النمط التالي مع تغير كود اللون الى ما يناسبك background-color: #ff0000
تعديل الفاصل بين المقالات
الفاصل بين المقالات (post-separator)
هو الخط الذي يفصل بين المقال والآخر .. ويكون أحياناً على شكل ورود أو حسب ما يناسب المصمم
الصورة التالية توضح مكان الفاصل
إضغط على الصورة لرؤيتها بحجمها الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
طريقة وضع الفاصل
أنسخ رابط الفاصل وضعه بين الأقواس مكان الفاصل القديم .. كما في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
يلاحظ من الصورة السابقة أنه بإمكانك التحكم في طول الفاصل وعرضه
ويفضل أن تجعل عرضه 350 وطوله حسب طول الفاصل حتى يظهر الفاصل كاملاً
تعديل الفاصل بين التعليقات
الفاصل بين التعليقات (post comments)
هو الفاصل الذي يفصل بين التعليقات
وهو ما في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بحجمها الطبيعي
وطريقة تغييره كالتالي
ضع رابط الفاصل بين الأقواس بدلاً من الفاصل القديم
كما في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
يلاحظ من الصورة السابقة أنه يمكنك تكبير أو تصغير صندوق التعليقات
تعديل أسفل الصفحة
أسفل الصفحة (footer)
وهي صورة أخرالصفحة كما في هذه الصورة
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بحجمها الطبيعي
 
طريقة تعديله
ضع رابط الفوتير الذي صممته بين الأقواس مكان الرابط القديم
أنظر الشرح الصورة التالية
أضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
يلاحظ من الصورة السابقة رابط علامة القسم الجانبي .. وهي التي تكون أمام أسامي المقالات والأرشيف ولابد أن تكون ضئيلة جداً إذا قررت أن تضعها .. أما الأفضل أن تحذف الرابط وتتركه فارغ
وأبعاده تكون عرض 770 باكسيل والطول حسب ما صممته ويراعى أن يكون صغيراً مثلاً 60 باكسيل أو أكثر أو أقل
 
 
الروابط
الروابط أو اللينكات (typography and link)
وهي لون جميع روابط المدونة .. وهي كما في الصورة التالية
أضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
وللروابط لونين .. اللون الذي يبدو لنا وهو كما في الصورة أزرق واللون الثاني عندما نقف بمؤشر الماوس على الرابط يتحول الى اللون الثاني
طريقة تعديل لون الرابط الأول والثاني
ضع كود اللون الذي تريده مكان الكود الحالي كما في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
 
 
العمود الجانبي
العمود الجانبي (blog sidebar)
وهو العمود الذي يحوي أسامي المقالات والأرشيف وروابط المفضلة
أنظر الشرح في الصورة التالية
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
 
 
 
تعديل التصميم
للوصول الى تعديل التصميم لإجراء التعديلات التي ترغبها على تصميمك .. وتذكر دائماً أننا نعدل على تصميم تكنو أزرق
بعد تسجيل دخولك إلى حسابك في جيران إذهب إلى مدونات ثم خصائص ثم حرر التصميم ثم تعديل الأنماط
الصور التالية توضح شكل المدونة ومسمياتها
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
إضغط على الصورة للرؤيتها بالحجم الطبيعي
 
والصور التالية توضح بشكل سريع طريقة تعديل الأنماط
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
إضغط على الصورة لرؤيتها بالحجم الطبيعي
 
 
 
 
أسئلة وأستفسارات
يمكنك طرح أي إستفسار أو سؤال عن التصميم والأنماط وأكواد الجافا
أترك إستفسارك في التعليقات
أو راسلني على الإيميل التالي
 
 
 
 
 
الطلبات
يمكنك هنا طلب تصميم أو أكواد جافا .. وبأذن الله سيتم عمل التصميم لمن يجهل التصميم في أسرع وقت
أترك طلبك في التعليقات
أو المراسلة على الإيميل التالي
 
 
 
 
 
 
أكواد الألوان
هذه كل أكواد الألوان تقريباً ..كل ما عليك نسخ كود اللون الذي يعجبك
فواصل للمدونة
هذه بعض الفواصل التي قد تحتاجها إن كنت لا تستطيع تصميم فواصل
 
 
دروس فوتو شوب
يعتبر برنامج الفوتو شوب أفضل برنامج للتصميم على الأطلاق .. وهو سهل جداً .. عكس ما يشاع عنه
لذلك سأطرح روابط لدروس البرنامج
 


<<الصفحة الرئيسية