عرب ويب ديازين: تقنية css

‏إظهار الرسائل ذات التسميات تقنية css. إظهار كافة الرسائل

نبدة مختصرة عن اهم وسوم html و تقنية css

السلام عليكم اليوم ان شاء الله سنرى الجزء الاول من دورة تصميم واجهة مدونة بتقنية html/css لنبدا على بركة الله
قبل ان نبدا اشير الى هدين الموضوعين :

طريقك لتعلم لغة css2

لتعمق في اللغتين هده ستكون نبدة مختصرة هدا نضرا لوجود مصادر كتيرة على النت

اولا التعرف على html

هي لغة تستعمل لبناء الصفحات وهي اختصار لجملة Hyper Text Markup language وهي ليست
كباقي اللغات لا تحتاج الى مترجم او بالاحرى ليست لغة برمجة متل php و asp.net و .... الخ
والوسوم في Html تكون على الشكل التالي :

<tag>هنا الجزء الدي سيتاتر بالوسم tag</tag>

الان عرفنا كيف نكتب الوسوم في لغة html ادا لنتعرف عن اهم وسوم html التي لا يمكن كتابة اي صفحة بدون وهده الوسوم تكون على الشكل التالي :

<html>
<head>
<title>عرب ويب ديازين</title>
</head>
<body>
</body>
</html>

الان لنشرح لمادا تصلح هده الوسوم

اولا وسم <html> كما نلاحض لقد بدانا به واقفلناه ب </html> كما راينا سابقا

ان بداخل وسم html نضع محتويات الصفحة ودلك اما المحتوى الدي سيضهر لزائر الصفحة سنشرحها

في body او التي سيقراها المتصفح متل title و كما سنشرحه في head

الان وسم <head></head> هدا الوسم نضع بداخله وسم

<title> </title> الدي نضع بداخله عنوان الصفحة ادا كنت تتصفح المواقع لابد انك تلاحض اسماء الصفحات

في البار في الفوق من المتصفح وهدا عمل وسم title

الان الوسم <body> الدي يكون بداخله جميع محتوى الصفحة من فقرات

وصور و جداول ... الخ

اهم الوسوم المستعملة في لغة html

<p></p>

وهو وسم لفقرات في html

<br />

وسم لرجوع الى السطر يعمل كعمل entrer في الكيبورد هدا الوسم من الوسوم المفردة ويمكن
كتابته <br></br> ويستحسن كتابته هكدا <br />

<img src="هنا عنوان الصورة" alt="هنا وصف الصورة وهده هامة لكسب صداقة محركات البحت " />

لاضافة صورة الى الصفحة

<pre></pre>

لكتابة النص كما كتبته اي ادا ضغطت على enter تحتسب رجوع الى السطر ولا تحتاج لوسم <br /> ليس متل الوسم <p>

<a href ="هنا عنوان الرابط"></a>

وسم الروابط هدا الوسم هام جدا لاضافة روابط لصفحة

<ul></ul>

هدا الوسم للقوائم الغير متسلسلة متال

html

css

html/css

<ol></ol>

هدا للقوائم المتسلسلة اي مرقمة متال

html

css

html/css

الى هنا نتوقف الى الجزء التاني وهو css ان شاء الله سيكون في نفس الموضوع

دورة تصميم واجهة مدونة بتقنية html/css

السلام عليكم
اخواني اخواتي الكرام ان شاء الله ساضع دورة تصميم واجهة مدونة بتقنية html/css تتكون من ثلات اجزاء كما موضح في الاسفل وهدف هده الدورة هي معرفة كيف تنشئ صفحات الويب و ساستعمل بعد تقنيات css3 وهده الدورة بداية لدورات احترافية قادمة

لمن هده الدورة

للجديد في عالم تصميم صفحات الويب
لمن اراد معرفة بعض تقنيات css3 الحديثة

اجزاء الدورة

الجزء الاول من دورة تصميم واجهة مدونة : نبدة مختصرة عن اهم وسوم html و تقنية css
الجزء التاني من دورة تصميم واجهة مدونة : وضع محتوى التصميم ب html
الجزء الثالت من دورة تصميم واجهة مدونة : تنسيق الواجهة بتقنية css

لقد فتحت هدا الموضوع لمعرفة عدد المهتمين لدورة وان شاء الله سيكون اول درس 23 من يوليوز.

طريقك لتعلم لغة css2

السلام عليكم
الكثير من يتساءل من اين اتعلم html لقد وضعت موضوع هل تود تعلم لغة html حقا و css اليوم ساضع المصادر لتعلمها اخي ان اللغتين سهلتين في التعلم يجب ان تركز قليلا مع الاستمرار في كتابة الاكواد لتتعود على كتابتهم وتطبيق دروس من هنا وهناك.

css2

مصادر

اقوى موقع لتعلم لغة css وبطريقة سهلة وهو www.w3schools.com به ميزات رائعة
وهدا كتاب بالعربية رائع لتعلم css اضغط هنا لتحميل الكتاب
وهناك موقع عربي لتعلم وبطريقة رائعة ar.html.net
وطبعا مننساش جوجل في محرك البحت اكتب اساسيات css يطلعلك كتير من النتائج واختر انت ما تريد

وفي الاخير اتمنى التوفيق للجميع

عزيزي زائر لاتقرا وترحل شاركنا بارائك

مقدمة للغة CSS3

السلام عليكم ورحمة الله تعالى وبركاته

1 - ماهي CSS3

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

Internet Explorer 9 - Firefox - Safari - Opera

و مازالت CSS3 قيد التطوير من طرف w3c ان شاء الله .
2 - اهم خصائص CSS3

Border-raduis

text-shadow

@font-face Rule

CSS3 2D Transforms

CSS3 3D Transforms

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

اخي الكريم شاركنا ان اعجبك الموضوع وتريد معرفة جديد المدونة اضف بريدك في صندوق اشترك معنا

تعرف على خاصية الخطوط في 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;
}

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

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

درس تصميم قائمة افقية بتقنية 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>

نبدة مختصرة عن اهم وسوم html و تقنية css

هل تود تعلم لغة html حقا

طريقك لتعلم لغة css2

اولا التعرف على html

اهم الوسوم المستعملة في لغة html

دورة تصميم واجهة مدونة بتقنية html/css

طريقك لتعلم لغة css2

مقدمة للغة CSS3

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

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

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

نموذج الاتصال

Link List