Showing posts with label أساسيات. Show all posts
Showing posts with label أساسيات. Show all posts

Monday, 18 November 2013

اختصارات لوحة المفاتيح في بلوجر Blogger keyboard shortcuts

21:14  Unknown  لا يوجد تعليقات

بلوجر تدعم اختصارات الكيبورد أثناء التدوين بالفعل وهذه الميزة مفعلة 100 % مع أغلب المتصفحات واليوم أقدم لكم أهم الاختصارات الأكثر استخدامًا فى مجال التدوين فى بلوجر 


♥ ملحوظــــــــة ♥  : الاختصارات تعمل فقط في اثناء التدوين

( الخط عريض)       control + b = Bold 
( الخط مائل)          control + i = Italic 
 ( الاقتباس)      ( control + l = Blockquote (when in HTML-mode only
 ( خطوة الى الخلف ) ( تراجع عن أمر )     control + z = Undo
( خطوة الى الامام )    control + y = Redo 
 ( رابط )   control + shift + a = Link
( معاينة )   control + shift + p = Preview 
 ( حفظ كمسودة )   control + d = Save as Draft
( نشر التدوينة )   control + p  = Publish Post 
 ( الحفظ التلقائي والحفاظ على التدوينه )   control + s = Autosave and keep editing
دمتم فى رعاية اللـــه 

اقرء المزيد

Thursday, 13 June 2013

أفضل مواقع لتنسيق الالوان لمصممين مواقع الويب

15:18  Unknown  لا يوجد تعليقات




بسم الله الرحمن الرحيم 
اليوم سنعرض عليكم بعض مواقع تنسيق الالوان لصممين مواقع الويب 
إذا كنت تبحث عن موقع مناسب لتنسيق الألوان css فلا تقلق سأعرض عليكم 
أفضل موقع تنسيق الألوان 

الموقع الأول
الموقع الثانى
الموقع الثالث
الموقع الرابع
الموقع الخامس ويقدم فرش وتدريجات
الموقع السادس ويقدم ميزة إختيار الألوان من أى صورة

اقرء المزيد

Monday, 25 February 2013

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

03:42  Unknown  لا يوجد تعليقات




بسم الله الرحمن الرحيم

أهلا بكم إخوانى زوار ومتابعين مدونتكم مدونة مدون 
اليوم هو راندر للـ اللاعب المعروف والمحبوب كرستيانو رونالدو-Cristiano-Ronaldo
الصورة تم قصها بواسطتى وأتمنى أنها تعجبكم وتفيدكم إن شاء الله الصورة بدقة عالية 
حجم الصورة 2560x1600 px ستفيدكم كثيراً إن شاء الله لأصحاب التصميمات 
الرياضية 







اقرء المزيد

Saturday, 2 February 2013

حصريا صمم بدون تحميل برنامج الفوتوشوب - فوتوشوب على النت

00:58  Unknown  لا يوجد تعليقات

 حصريا صمم بدون تحميل برنامج الفوتوشوب - فوتوشوب على النت

صورة فوتشوب pc 
صمم كل الا انت عايزوا بدون تحميل الفوتوشوب
فوتوشوب على الانترنت
 بدون ماتحميل البرنامج وتتعب جهازك
ادخل وصمم حالا 


  http://cutt.us/mdwanblog-GmE



برعاية mR.pro

اقرء المزيد

Tuesday, 15 January 2013

طريقة إستخدام الألوان والخلفيات بالـ css شرح مفصل

19:30  Unknown  لا يوجد تعليقات







تعلم معنا فى هذة التدوينة عن طريقة تفعيل خاصية الـ color فى موقعك أو قالبك وطريقة 
إستخدامها بالـ css


لون المقدمة: خاصية 'color'

خاصية color تصف لون عنصر HTML.
فمثلاً تصور أنك تريد أن تكون كل العناوين في الصفحة ملونة بلون أحمر داكن، كل العناوين رمزت باستخدام وسم <h1>، المثال أدناه سيقوم بتوضيح كيفية تحويل كل <h1> إلى اللون الأحمر:
 
 h1 {
  color: #ff0000;
 }
الألوان يمكن أن تحدد باستخدام نظام الأرقام الست عشري كما في المثال أعلاه، أو بأن تختار اسم اللون "red"، أو من خلال قيمة RGB والتي تعني Red وGreen وBlue، مثال: (rgb(255,0,0)).

خاصية 'background-color'

خاصية background-color تحدد لون خلفية أي عنصر.
العنصر <body> يضم كل محتويات وثيقة HTML، لذلك لتغيير خلفية الصفحة بأكملها يجب أن نفعل خاصية background-color على العنصر <body>.
يمكنك أيضاً تفعيل خاصية لون الخلفية على عناصر أخرى مثل العناوين والنصوص، في المثال أدناه قمنا باختيار ألوان خلفية لعنصري <body> و <h1>.
 
 body {
  background-color: #FFCC66;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
لاحظ أننا قمنا بتفعيل خاصيتين للعنصر <h1> وقمنا بالفصل بين الخاصيتين باستخدام فاصلة منقوطة.

الصورة كخلفية "background-image"

خاصية background-image تستخدم لوضع صورة كخلفية لأي عنصر.
فمثلاً قمنا باستخدم صورة فراشة في المثال أدناه، يمكنك إنزال الصورة لتجرب بنفسك على حاسةبك، قم بالضغط على الصورة بالزر الأيمن واحفظها في جهازك، أو يمكنك استخدام أي صورة تناسبك.
فراشة
لإدخال صورة الفراشة كخلفية للصفحة قم بتفعيل خاصية background-image للعنصر <body> وحدد مسار الصورة:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }
انتبه: لاحظ كيف حددنا مسار الصورة بهذا الشكل url("butterfly.gif")، هذا يعني أن الصورة وضعت في نفس المجلد مع ملف التصميم، يمكنك أن تحدد مسار الصور في مجلدات أخرى باستخدام url("../images/butterfly.gif") أو حتى العنوان الكامل للملف: url("http://www.do-by.blogspot.com.net/butterfly.gif").

تكرار صورة الخلفية "background-repeat"

هل لاحظت في المثال أعلاه أن صورة الفراشة تتكرر رأسياً وأفقياً لتغطي كامل الصفحة؟ الخاصية background-repeat تتحكم بتكرار الصورة.
في الجدول أدناه ملخص لأربع قيم يمكن أن تضعها للخاصية background-repeat.
القيمةالوصف
Background-repeat: repeat-xالصورة ستتكرر أفقياً
background-repeat: repeat-yالصورة ستتكرر عمودياً
background-repeat: repeatالصورة ستتكرر أفقياً وعمودياً
background-repeat: no-repeatلن تتكرر بأي شكل
مثلاً لتجنب تكرار صورة الخلفية يجب أن تكتب الأوامر بهذا الشكل::
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

تثبيت صورة الخلفية "background-attachment"

الخاصية background-attachment تحدد ما إذا كانت صورة الخلفية ثابتة أو متحركة مع محتويات العنصر.
الصورة الثابتة لن تتحرك مع النص عندما يقوم القارئ بتحريك الصفحة، بينما الصورة المتحركة ستتحرك مع الصفحة بمحتوياتها.
في الجدول أدناه ملخص للقيم التي يمكنك وضعها لخاصية background-attachment، شاهد الأمثلة ولاحظ الاختلاف بين الصورة الثابتة والمتحركة.
القيمةالوصف
Background-attachment: scrollالصورة ستتحرك مع الصفحة
Background-attachment: fixedالصورة ستبقى ثابتة
المثال ادناه يبين كيفية اختيار القيمة المناسبة لتثبيت صورة الخلفية:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

مكان صورة الخلفية "background-position"

تلقائياً توضع صورة الخلفية في أعلى يسار الصفحة، الخاصية background-position تسمح لك بتغيير هذه القيمة التلقائية ووضع الصورة في أي مكان تريده من الشاشة.
هناك طرق مختلفة لتحديد قيمة background-position، لكن كلها تنظم على نسق واحد، فمثلاً القيمة '100px 200px' تضع الصورة الخلفية على بعد 100 بكسل من يسار نافذة المتصفح و200 بكسل من أعلى نافذة المتصفح.
هذا النسق يمكن تحديده أيضاً بالنسبة المؤية من عرض الشاشة وكذلك مقاييس محددة مثل البكسل والسنتيميتر، أو من خلال استخدام كلمات مثل top وbottom وcenter وleft وright.

الجدول أدناه يوضح بالمزيد من الأمثلة
القيمةالوصف
background-position: 2cm 2cmهذه الصورة وضعت على بعد 2 سنتم من يسار الشاشة و2 سنتم من أعلى الشاشة
background-position: 50% 25%هذه الصورة وضعت في منتصف المسافة من يسار الشاشة وربع المسافة من أعلى الشاشة
background-position: top rightهذه الصورة وضعت في أعلى يمين الصفحة
المثال أدناه يوضح كيفية وضع صورة الخلفية في أعلى يمين الشاشة:
 
 body {
  background-color: #FFCC66;
  background-image: url("butterfly.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right bottom;
 }

 h1 {
  color: #990000;
  background-color: #FC9804;
 }

جمع كل الخصائص "background"

الخاصية background هي اختصار لكل خصائص خلفية العناصر التي قرأتها في هذا الدرس.
باستخدام background يمكنك جمع عدة خصائص وبالتالي تقليل عدد الأسطر التي تكتبها في ملف التصميم وهذا يجعل الملف أسهل للقراءة.
فمثلاً يمكن اختصار هذه الأسطر:
 
 background-color: #FFCC66;
 background-image: url("butterfly.gif");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;
باستخدام background يمكن تحقيق نفس النتيجة باستخدام سطر واحد فقط:
 
 background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
القائمة ترتب بهذا الشكل - من اليسار إلى اليمين:
background-color | background-image | background-repeat | background-attachment | background-position
إذا لم تكتب خاصية ما سيقوم المتصفح بوضع القيمة التلقائية لهذه الخاصية، فمثلاً لم نضع الخاصية background-attachment وbackground-position في المثال:
 
 background: #FFCC66 url("butterfly.gif") no-repeat;
الخاصيتين لم تحددا وسيقوم المتصفح بوضع القيمة التلقائية لهما والقيم هي كما تعرف scroll وtop left.



اقرء المزيد

Monday, 14 January 2013

شرح التعامل مع الـ class و id

20:17  Unknown  لا يوجد تعليقات




id : هو معرّف يتم تحديدة ويمكن أن يندرج تحته عنده فئات ، ويعرّف بوضع علامة [ # ] قبله ويمكن أن يوضع له أى اسم ، ويتم تطبيقه على عنصر واحد فقط داخل الصفحه. 

class : يمكن أن تتكرر أكثر من مرة بنفس الصفحة على عكس المعرّفات id ، وتعرّف بوضع نقطه [ . ] قبلها ويمكن أن تضع لها أي إسم. متال للتوضيح أكتر :
 
 
 
#do-by {
 background-color: #15g5d;
 padding: 5px;
}
.blogger {
 color: red;
 font-size: 16px;
}



الفئات class


يوضع بالصيغه التالية داخل أوسمة html المختلفة


<p class="you">الفئات يمكن تتكررها بنفس الصفحة</p>
 

تابع معى المثال التالي متعدد الفقرات..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS الأنماط الإنسابية</title>

<style type="text/css">
<!--
p.blue { color:blue; }
-->
</style>

</head>
<body>

<h1 class="blue">فوائد إستخدام الأنماط الإنسابية</h1>
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>

</body>
</html>
 
 

المعرّفات id

المعرفات id لها نفس قواعد الفئات class ولكن مع إختلاف ان المعرف يتم تطبيقه مرة واحده فقط في الصفحه أى لا يمكنك تطبيق نفس المعرّف على أكثر من وسم بذات الصفحه .. وشاهد معي نفس المثال السابق ولكن مع إضافة معرف جديد خاص بالعنوان


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="rtl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS الأنماط الإنسابية</title> <style type="text/css"> 
<!-- p.blue { color:blue; } h1#red { color: red; } --> </style> 
</head>
<body> 
<h1 id="red">شروحات أساسيات اللغه من مدون</h1> 
<p class="blue">فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد</p>  
<p class="blue">ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى</p>  
<p>إضافة مزيد من الأحترافية والسهولة لتصميم المواقع</p>  
</body>
</html>


أتمنى إنى أكود قد أفدتكم

اقرء المزيد

Sunday, 13 January 2013

ما هى css وطريقة إستخدامها شرح مفصل

09:23  Unknown  لا يوجد تعليقات



تعلم معنا كيف يتم إستخدام css وكيف تعدل عليها شرح مفصل لمدونة مدون

CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية صفحات الأنماط الإنسابية وهي "ليست لغه برمجه" ولكنها تقنية تتهتم بتحديد شكل وتصميم المواقع ، وينطبق ذلك على الألوان والخطوط والصور والخلفيات التى تستخدم فى الصفحات ، بمرونة وسهولة تامه.
وهذه التقنيه تساعدك جدا على إنشاء وإدارة صفحات المواقع بشكل فريد يتميز عن من يعتمد في التصميم على html التى تسبب مشكله وهى ان الموقع لا ينفصل عن محتوياته ..
وتعال نتخيل سوياً على أنك قبلت تنفيذ موقع متوسط الحجم لأحد العملاء ، و بطبيعة الحال تحتاج لبرمجة ما يزيد عن العشر صفحات ـ وفرضاً أيضاً أنك انتهيت من الموقع بعد عمل متواصل ـ وعرضت الموقع على العميل وتعتقد أنه أصبح جاهز للاستخدام الآن . ماذا لو فاجأك العميل بطلب تغيير حجم الخط من القيمة "2" إلى القيمة "3" مثلاً هل ستضطر لفتح كل صفحة و التعديل في كل فقرة من فقراتها لتغير هذه القيمة!...

ماذا لو كان الموقع مكوناً من 50 صفحة ؟!
و ماذا لو كان يعمل على المشروع أكثر من شخص بشكل منفصل ؟
في الواقع هذه القصة والعملية المتعبة جدا فى التعديل ستواجهك كثيراً عند التعامل مع عملاءك وتجعلك تفكر في الإنتقال من استخدام لغة html وحدها إلى أخرى تعطيك مرونة أكبر وتقدم لك الحل وتوفر الجهد.
فكرة: ملف تنسيق منفصل
الفكرة باختصار تكمن في فصل التنسيق عن المحتوى و من ثم وضع التنسيق في ملف منفصل يمكنك التعديل عليه لتغيير شكل صفحات موقعك بسهولة بعد ذلك دون الرجوع اليها مرة أخرى.

فوائد إستخدام تقنية CSS

  • فصل محتويات الموقع عن التصميم ، والتحكم بجميع الصفحات من خلال ملف واحد بإمتداد css.
  • إضافة مزيد من الأحترافية والسهولة لتصميم المواقع والحريه في تصميم مواقع تزيد عن العشرة والعشرين صفحة.
  • لن ترهقك بعد اليوم طلبات العملاء والتعديلات الكثيرة التى يطلبوها ويروها سهله ولكنك تراها مرهقه مع كثرة الأعمال.
  • تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
  • تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة bandwidth التي يحتاجها الموقع ستقل.
  • ضمان ظهور الموقع بشكل واحد على كافة المتصفحات والأجهزة أخرى كالحواسيب الكفية وذلك بفضل فصل المحتوى عن ملف التصميم.

كيف يتعرف متصفح الإنترنت على هذه التقنية ؟

1- Browser Defaults..في الحقيقة إننا نستخدم نوعاً من أنواع الأنماط الانسيابية في صفحاتنا دون أن ندري . و لنأخذ هذا المثال:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
هذا الوسم يستخدم لتسمية الصفحة
<title>عنوان الصفحة</title>
</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>
لاحظ فلم يتم تحديد أي تنسيق للنص و مع ذلك فإنه عند فتح الصفحة بإستخدام المتصفح ستجد تنسيقاً معيناً لنوع الخط و حجمه و لونه ـ وهذا التنسيق قد يختلف من جهاز لآخر بحسب الإعدادات الافتراضية للعرض لدى الزائر.
هنا كأننا نقول بأن المتصفح يحتفظ بملف يحتوي أنماط معينة من التنسيق يستخدمها إذا لم تحدد التنسيق بشكل واضح في صفحتك او موقعك .
وتقنية css تعتمد نفس المبدأ . وتقريباً لن تكتب أي تنسيق في الصفحة الأساسية لكنك ستحدد في ملف خارجي واحد التنسيق مفصلاً ـ وبعدها يربط ذلك الملف بالموقع حتى يأخذ المتصفح تنسيق الصفحات منه دون الاعتماد على إفتراضياته هو ويطبق على جميع الصفحات مما يضمن ظهور الموقع بنفس الشكل على كل الأجهزة.

طرق تعريف CSS داخل الصفحات

2- External ملف منفصل بإمتداد css تسمية بإي أسم يحتوى على كافة تنسيقات الموقع ومن ثم تربط به جميع صفحات الموقع كما في المثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>
الوسم <link /> يكتب فيه مسار ملف css سواء كان بمجلد خاص أو بنفس مكان الصفحات ومن ثم يوضع الكود بالكامل برأس كل الصفحات بين الوسم <head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
وهذا الملف المنفصل المربوط به الصفحات تكتب فيه أكواد css مباشرة داخل ملف txt ومن ثم تحفظ بإمتداد css. كما ذكرنا ولو شاهدنا هذا الملف ستجدة يحتوى على الأكواد فقط كالتالي:
.me {
 color: #FFFFFF;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 100px;
}
p.you {
 color: #EAEAEA;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 50px;
}
3- Internal فيها يتم إضافة جميع قيم css برأس الصفحه بين وسمين <style> لتعريفهم على المتصفح ومن ثم توضع ايضا داخل برأس الصفحة بين الوسم <head> كما في الحالة السابقة ومنه تطبق هذه الأوامر على جميع فقرات الصفحه.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>

<style type="text/css">
<!--
p.you {
 color: #FFFFFF;
 background-color: #333;
 border: 2px solid #666;
 font-family: Tahoma;
 width: 100px;
}
-->
</style>

</head>
<body>

<p>تقنية تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>
الوسم <style> وهو الوسم الذى من خلالة يتعرف المتصفح على قيم css المختلفة المكتوبة بداخله ويكتب بهذا الشكل برأس الصفحة.
<style type="text/css">

CSS styles here

</style>
المتصفحات القديمة لا تفهم الوسم style ولا تدعم تقنيه CSS لذا فهى عادة تتجاهلة وتعرض مابين هذا الوسم من أوامر على أنه محتوى ضمن الصفحة! ولتفادى هذه العملية في تلك المتصفحات التعيسة نقوم بوضع جميع أوامر css داخل تعليق comment element حتى إن حدث لا قدر الله وظهر موقعك لأحد مستخدمي هذه المتصفحات لا تظهر له الأوامر كمحتويات بالصفحة.
<style type="text/css">
<!--

CSS styles here

-->
</style>
4- in-line وفيها تطبق أوامر الـ css مباشرة داخل اوسمه html كما بالمثال التالي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit
ional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان الصفحة</title>
</head>
<body>

<p style="font:normal 12px Tahoma; color:#FF0000; background:#FFDDFF;">تقنية 
تتهتم بتحديد شكل وتصميم المواقع</p>

</body>
</html>


المصدر|html free code

اقرء المزيد