قالب velle الرائع معرب

 السلام عليكم
اليكم قالب velle  الرائع المعرب يتميز بلونه الاسود والبرتقالي والابيض ويتميز بعمود ايسر ويمكنك تحميله بعمود ايسر اوبعمود ايمن

 للمعاينة

لتحميل القالب بعمود ايسر

لتحميل القالب بعمود ايمن

تعرف على خاصية الخطوط في css

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

لتحميل المثال للمعاينة

•      Font-familyهي تساعدنا على تحديد نوع الخطوط وتكون بترتيب نوع الخط اي نوع الخط الاول هو الدي يكون الافتراضي وادا لم يجد المتصفح الخط الاول يلجئ لتاني وهكدا متال :

Body {

     Font-family : tahoma,arial,sans serif ;

}

H3 {

     Font-family : arial,serif ;

}

• Font-size   هده الخاصية نتحكم بحجم الخطوط لاتحتاج لشرح هي سلهة للغاية وهدا بوحدات وسنتناول الوحدات كتيرة الاستعمال : px    -    pt   -     em    -    %

Body {

       Font-size : 12px ;

}

• Font-wheight    وهي خاصية تحدد سماكة الخط وتتكون من قيمتين وهما bold و normal 

H2 {

       Font-wheight : bold ;

}  

Body {

       Font-wheight : normal ;

}

• Font-style   وهي خاصية تحدد شكل الخطوط ولها تلات قيم    normal  ,  italic  ,  oblique

H3 {

       Font-style : italic ;

}

الان تعرفت على خاصية تمكنك بتغير الخطوط في القوالب كما تشاء و الخطوط المفضلة هي tahoma لنصوص والعناوين arial وادا كانت هناك ملاحضات على الدرس لاتجنب اخطاء في الدرس القادم ان شاء الله الى هنا السلام عليكم

درس تصميم قائمة مسندلة بتقنية css

كان درسنا السابق على درس تصميم قائمة افقية بتقنية css ان شاء الله في هدا الدرس سنصمم قائمة مسندلة بتقنية    css بدون  استعمال  jqeury    وسنستعين ب   display block   و  none لاضهار واخفاء القائمة و    position rlolative و absolute  لتحكم بشكل القائمة واضهارها بدون مشاكل ادا كنت من محبي البساطة في التصميم بنتائج رائعة ان شاء الله ستجد ماتريد تابع لتعرف الطريقة واترككم مع الدرس 

لتحميل القائمة للمعاينة

وهده نتيجة الدرس :

للمشاهدة             لتحميل

1 – كود html :

• ننشئ div نعطيه id=nav
• نضع قائمة ul وبداخلها li وهدا سهل
• نضع داخل li قائمة ul وهي القائمة الفرعية
• واخيرا داخل القائمة الفرعية ul نضع li

وهده صورة توضيحية بما قمنا بيه : 

 

وهدا هو الكود:

<div id="nav">
 <ul>
      <li><a href="http://ar-webdesign.blogspot.com/"> دروس</a>
           <ul>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس css</a></li>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس html</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> مدونة</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> برامج</a>
           <ul>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج التصميم</a></li>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج الحماية</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> من نحن</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> تعديل</a></li>
 </ul>
</div>

 

2 – لننتقل لكود css  وشرحه خطوة خطوة :

#nav{
  margin: 0 auto;
  padding: 0;
  height: 32;
  width: 750px;
  background: #3B5997;
}

الآن قمنا بإعطاء nav ارتفاع القائمة 32px و عرضها 750px ولون الخلفية وجعلنا الابتعادين 0 مع توسيط القائمة ب auto

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-family: tahoma;
}

قمنا باعطاء القائمة الابتعادين 0 و ازلنا نقاط القائمة وحددنا نوع الخط وحجمه وللمزيد عن خاصية الخطوط في css

#nav ul  li {
  float: right;
  position: relative;
}

لقد قمنا بجعل عناصر القائمة افقية في سطر واحد وقمنا باعطاء الوضع        relative لكي لا تحصل مشاكل عند مرور الماوس على الرابط ليكون تناسق مع القائمة الفرعية

#nav ul  li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}

قمنا بإعطاء الرابط لون الأبيض و أزلنا الخط تحت الرابط والابتعاد الداخلي اعطيناه 8px وأعطينا للخلفية لون وأعطيناه   display: block  ;    لكي تظهر الروابط بدون مشاكل وأعطيناها عرضا تم جعلنا الرابط في الوسط

#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}

اعطيناه display: none; لاخفاء القائمة الفرعية  اي عدم ظهور والابتعادين جعلناها صفر واعطيناها الوضع   absolute    لكي تضهر تحت العنصر li     بدون اي مشاكل أى ثابتة لا تتحرك واعطيناه اطار بسمك 1px وجعلناه   solid   واعطيناه نفس لون خلفية القائمة والباقي لايحتاج لشرح

#nav li:hover ul{
    display: block;
}

الان عند مرور الماوس على عنصر  li    ستضهر القائمة الفرعية ودالك باعطائه   display: block;

#nav li ul li a{
    color:#463C47;
    background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
    width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
    color: #36599D;
}

الان لانحتاج لشرح ما قمنا به في الخطوة الاخيرة  لان كل اكواد واضحة ومشروحة

وهدا هو كود css كامل

#nav{
  margin: 0 auto;
  padding: 0;
  height: 32;
  width: 750px;
  background: #3B5997;
}
#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-family: tahoma;
}
#nav ul  li {
  float: right;
  position: relative;
}
#nav ul  li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}
#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}
#nav li:hover ul{
    display: block;
}
#nav li ul li a{
    color:#463C47;
    background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
    width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
    color: #36599D;
}

أرجو ان اكون قد اوصلت المعلومة كما يجب .

عزيزي الزائر ان كانت هناك اضافة فلتتفضل بها او ملاحضة عن الدرس لكي أتفاداها في المرة المقبلة بالتوفيق للجميع .

قالب doc البسيط معرب

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

للمعاينة

لتحميل

درس كيفية قلب الصور لتعريب القوالب

السلام عيكم ورحمة الله تعالى وبركاته
اليوم طرحت هدا الموضوع لأني وجدت الأغلبية يسالون عنه لان قلب الصور شيئ أساسي في تعريب القوالب انه عملية سهلة من ألان وداعا لتساؤل إن شاء الله تستفيدون من هدا الدرس
ما سنحتاجه هو برنامج فوتوشوب او اي برنامج محرر الصور كجيمب الان لنبدأ ندخل لبرنامج فوتوشوب ونتبع الخطوات
ندهب ل File تم Open لجلب الصورة من الحاسوبك وختصار هدا الامر الضغط على Ctrl+O
الان بعد جلب الصورة نضغط على     Image تم     Image Rotation  تم Flip Canvas Horizontal
وهده صورة توضيحية :

والان لقد قلبنا الصورة بقية علينا حفضها نتبع الاتي
نضغط على File تم  Save For Web & Devices   تم  تبع الخطوات في الصورة ولابد من حفضها بصيغة PNG. تم نضغط على
 Save

وما تبقى هو تسمية الصورة وحفضها  قد انتهينا من قلب الصورة

ادا كان هناك استفسار او اي سوال انا رهن الاشارة والى هنا السلام عليكم

درس تصميم قائمة افقية بتقنية css

السلام عليكم ورحمة الله تعالى وبركاته
اليوم سيكون الدرس عن صنع قائمة افقية بسيطة وساضع في اخر الموضوع تحميل المتال وان شاء الله في المرة القادمة ستكون قائمة احترافية وان كان اي غموض انا مستعد لتوضيحه ولن اطيل الى  الشرح:

<html>
<head>
<title>menu</title>
<style type=”text/css”>
body{
direction: rtl;/* لتحويل المحتوى من اليمين الى اليسار */
}
#navbar {
margin: 0 auto;/* الابتعاد الخارجي للقائمة جعلناه صفر وauto لتوسيط القائمة */
padding: 0;/*الابتعاد الداخلي جعلناه صفر */
width: 750px;/* عرض القائمة جعلناه 750px*/
background-color: #ccc;/* لون الخلفية القائمة */
height: 30px;/* ارتفاع القائمة*/
}
#navbar ul{
overflow: hidden;/* اعطينا اوفرفلو هيدن لكي لايحصل مشكل في التعويم ملاحضة لابد ان تعطي اوفرفلو هيدن لاي عنصر الدي تريد عمل تعويم بداخله*/
list-style: none;/*حدفنا النقاط التي تضهر في القائمة*/
background-color: #ccc;
margin: 0;
padding: 0;
}
#navbar ul li{
float: right;/*لقد قمنا بجعل القائمة افقية ودلك بالتعويم الى اليمين*/
width: 100px;
text-align: center;/*جعلنا الروابط في الوسط*/
}
#navbar ul li a{
text-decoration: none;/*ازلنا الخط الدي يضهر تحت الروابط*/
color: #000;/*لون الرابط*/
display: block;/*لاضهار الروابط */
padding: 6px;/*الابتعاد الداخلي جعلناه 6 من كل اتجاهات */
}
#navbar ul li a:hover{
text-decoration: underline;/*الاضهار الخط الدي يكون في القائمة عند مرور الماوس */
background-color: #555;
color: #fff;
border-bottom: 2px solid #000;/*استعملنا خاصية بوردر في الاسفل لاضافة لمسة خفيفة وجعلنا سمكه 2 وجعلنا الخط بدون تقطع واعطيناه اللون الاسود  */
}
</style>
</head>
<body>
<div id=”navbar”>
<ul>
<li><a href=”">الرئيسية</a></li>
<li><a href=”">دروس</a></li>
<li><a href=”">اتصل بنا</a></li>
<li><a href=”">من نحن</a></li>
</ul>
</div>
</body>

</html>