التعليم والتعلم: تصميم مواقع

header ads new

Hot

Post Top Ad

Your Ad Spot
‏إظهار الرسائل ذات التسميات تصميم مواقع. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات تصميم مواقع. إظهار كافة الرسائل

الأربعاء، 11 يوليو 2018

تعريفات الالوان في لغة css

يوليو 11, 2018

الالوان هي روح صفحات الويب وهي ماتعطيه الحيوية والمرونة لشكل صفحة الويب

ومن خلال هذا الموضوع سنرى 

ماهي طريقة تحديد الالوان على الرغم من وجود العديد من الطرق حتى نقوم بذلك
المقصود بمعجم الالوان وبعض المفردات اليت ينحصر دورها في كيفية اختيار الالوان
ماهي الالوان الخلفية سواء لكامل الصفحة او جزء منها
دروس لغة css ,الصندوق ,Boxes ,برمجة , تصميم مواقع ,width ,height ,كود , code ,دورة ,تعلم ,تعليم ,صفحة ويب ,موقع الكترونى ,تكنولوجيا ,انترنت ,text ,حجم الخط font-size ,pixel ,تزيين الخط ,الروابط Links ,الخط ,كمبيوتر ,الشفافية Opacity

الالوان الامامية او forground colors

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

قيمة RGB

تعني مثلا كمية اللون الاحمر , الاخضر ثم الازرق المستخدم حتى نصنع ذلك اللون على سبيل المثال
 rgb(100,100,90)

اكواد HEX

والتي تتكون من عدد 6 اكواد والتي تقوم بتقديم كمية الاحمر والخضر والازرق في ذلك اللون ويكتب بعد ذلك رمز هاش
على سبيل المثال
#ee3e80

اسماء الالوان

ومن الجدير بالذكر انه يوجد 147 من الألوان التي ىتم تحديدها بالاسم على سبيل المثال
DarkCyan
/* إسم اللون */
h1 {
color: DarkCyan;}
/* hex كود */
h2 {
color: #ee3e80;}
/* rgb قيمة */
p {
color: rgb(100,100,90);}

الالوان الخلفية Background colors

من الممكن تحديد لون الخلفية كما تم في الاعلى وبنفس الطريقة
body {
background-color: rgb(200,200,200);}
h1 {
background-color: DarkCyan;}
h2 {
background-color: #ee3e80;}
p {
background-color: white;}

الشفافية Opacity

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

p.one {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.two {
background-color: rgb(0,0,0);
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

الاثنين، 9 يوليو 2018

الهيكل من خلال دورة تصميم المواقع

يوليو 09, 2018

من الجدير بالذكر ان درسنا اليوم عن دورة تصميم المواقع بلغة html و css ولابد ان نعرف ان العناصر المطلوبة منا لتصميم اي صفحة ويب هي :
صفحة الويب ,html ,لغة برمجة , تعليم ,تعلم ,تصميم ,انشاء ,عناصر , وسوم , صفحة ,تقسيم ,دروس ,elements ,class ,inline,div ,دورة ,كورس ,css ,الهيكل ,layout ,FLOAT ,HTML

Block

وهي التي تظهر على السطر لوحدها وذلك مثل العناوين والفقرات.

Inline

وهو مايمكن لعناصر أخرى الظهور بجانبها وذلك مثل الصور.

Boxes

1وهي تلك العناصر التي يمكن من خلالها احتواء بعض العناصر الاخرى على سبيل المثال يمكن وضع صورة وفقرة نصية داخل نفس الصندوق

التحكم في توجيه العناصر


التوجيه العادي

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

التوجيه النسبي

لابد من استخدام تلك القاعدة التالية:
يمكن التحكم في نسبة العنصر والذي يوجد هذا العنصر بداخله 
على سبيل المثال فقرة P داخل صندوق div وذلك بعد اختيار القيم للتحكم للاعلى وكذلك اليمين او اليسار

p.example {
position: relative;
top: 10px;
left: 100px;}

التوجيه المطلق

  ومن خلال هذه القاعدة سيكون لديك السماح بتوجيه ذلك العنصر لاي مكان في الصفحة مما يعني ذلك عدم الاهتمام بالعناصر الاخرى الموجودة بل يمكن الذهاب لاي مكان بدون الاهتمام ببقية العناصر ومكانها
p.example {
position: absolute;
top: 10px;
left: 100px;} 


التوجيه الثابت

وهو بقاء الجزء ثابتا في مكانه وذلك حين النزول لاسفل الصفحة .
.example {
position: fixed
} 
التحكم في الداخل
وذلك حين استخدام القواعد الموجودة في الاعلى تقوم العناصر بالتداخل فيما بينها ولذلك وجب اختيار الاجزاء التي لديها كل الاولوية في الظهور اعلىة العنوان مما يعني ذلك انه سيظهر فوق نفس الفقرة  z-index

h1 {
position: fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 10px;
width: 100%;
background-color: #efefef;
z-index: 10;}
p {
position: relative;
top: 70px;
left: 70px;}

التعويم

يمكن استعمال تلك القاعدة المعروفة FLOAT ليتم توجيه تلك العناصر يمينا ويسارا 
ومن الجدير بالذكر ان تلك العناصر تأخذ نفس مكان العنصر المعوم
 
img{
float: right:
}

قاعدة Clear هي القاعدة التي يتم استخدامها لاخلاء العناصر حينما لاتريد احاطة العنصر المعوم بالعناصر الاخرى

من خلال هذه الصورة لن يتم القبول بوجود اي عنصر آخر على اليسار
img{
float: right:
clear: left;
}
 يمكنك استخدام التعويم كذلك لتقوم بانشاء مربعات بجانب بعضها البعض

يمكن استعمال قاعدة

كود css:

.column, .column2, .column3 {
width: 300px;
float: left;
margin: 10px;}

كود html:

<h1>The Evolution of the Bicycle</h1>
<div class="column1">
<h3>نص نص</h3> ...
</div>
<div class="column2">
<h3>نص نص</h3> ...
</div>
<div class="column3">
<h3>مص مص</h3> ...
</div>

ولكن مع ذلك لا ننصح باستخدام الطريقة السابقة لأن inline-block تعمل بشكل افضل

هيكل الصفحة باستخدام HTML5

 ولقد تم إضافة عناصر جديدة لتقوم بتنظيم محتوى الصفحة معHTML 5 ويذكر انها:
  • header  وهو ذلك الجزء العلوي والذي يحتوي في الاغلب على الشعار ويليه القائمة nav
  • main ويعد ذلك الجزء الرئيسي حيث يوجد به محتوى الصفحة
  • article وهي المواضيع
  • section وهو عبارة عن جزء من المحتوى
  • aside وهو ذلك الجزء الجانبي
  • footer ويعني الجزء السفلي
 
 
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

الجمعة، 6 يوليو 2018

درس مهم جدا عن النصوص في لغة css

يوليو 06, 2018

من خلال موضوعنا اليوم سوف نعرض اليكم النصوص text من خلال حجم الخط ونوعه وكذلك الخط العريض والمائل وأيضا الفراغ بين السطور والكلمات والحروف

دروس لغة css ,الصندوق ,Boxes ,برمجة , تصميم مواقع ,width ,height ,كود , code ,دورة ,تعلم ,تعليم ,صفحة ويب ,موقع الكترونى ,تكنولوجيا ,انترنت ,text ,حجم الخط font-size ,pixel ,تزيين الخط ,الروابط Links ,الخط ,كمبيوتر



كيفية تحديد نوع الخط وحجمه 

font-family هذه هي الخاصية التي يتم استخدامها ليتم تحديد نوع الخط المستخدم 
وهنا قد قمنا باختيار نوع الخط Arial ليتم تطبيقه على تلك الفقرة 
p{
font-family: Arial;
}
 هنا تم استخدام أكثر من خط:
حيث يقوم هنا المتصفح بتجربة خط Arial
وذلك حينما لا يكون الامر موجودا في حاسوب المستخدم و يقوم بالمرور للخط الثاني وهو Times New Roman
p{
font-family: Arial, Times New Roman;
}

حجم الخط font-size

من الجدير بالذكر انه يتم تحديد الخط بثلاث طرق وهي
pixel :
ويتم اختيار تلك القيمة بعدد يتبعه حروف pxكالتالي
h1{
font-size: 20px;
}

percentages : 
 يتم استخدام النسبة المئوية ومن الجدير بالذكر ان الخط العشوائي على المتصفح حينما لايتم تحديد الخط بنسبة 75 في المائة او مايعادل 12 px


h1{
font-size: 100%;
}

ومن الجدير بالذكر ان طريقة عمل النسبة المئوية مرتبطة بحجم الخط فمثلا لو افترضنا حجم الخط هو 16px
لو مثلا اخترنا نسبة 100 في المائة لكل العناوينh1 h2
سيكون الخط 16 px

Ems:
وهي ماتعادل حرف m او ام
يمنكم فهم العلاقة بين مختلف طرق قياس الخط من خلال هذه الشارة

استيراد الخطوط

 يتم توفر الخطوط التي يتم اختيبارها بشكل خاص في المتصفح الموجود بالحاسوب الخاص بك ولكن يمكنك تحميل خط غير موجود عن طريق قاعدة font-face@
والتي تكون عناصرها كالتالي


Src
format

الكود
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfive.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}

ومن خلال الجزء الاول يتم استرداد ذلك الخط ليتم تطبيقه على العناوين في الجزء الثاني

شكل النص 

يحتمل احدى القيمتين  Bold  أو Normal

p{
font-weight: bold;
}

p{
font-weight: normal;
}

تزيين الخط او Text Decoration

يمكنك اختيار تلك القيمة لهذه الخصوصية كما هو موضح :

p{
text-decoration: underline;
}
none
- لا يتم استخدام أي تزيين
underline
وهو عبارة عن اضافة خط تحت النص
overline
عبارة عن اضافة خط فوق النص
line-through
هو عبارة عن خط عبر النص

أسلوب النص Font-style

وهنا يحتمل ثلاث قيم Normal Italic Oblique كما هو موضح
p{
font-style: normal;
}

Line-height
p{
line-height: 1.5em;
}
اتجاه النص Text-align
وهو يحتمل ثلاث قيم عبارة عن
right بمعنى يمين
left بمعنى يسار 
center بمعنى وسط

p{
text-align: right;
}

المساحة بين الحروف والكلمات

Letter-spacing  و word-spacing
p{
letter-spacing: 1em;
word-spacing: 2em;
}

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

فراغ بداية الفقرة Text-indent

ومن المعروف ان هذه القاعدة تقوم بالمساعدة سواء في اضافة فراغ أو  اضافة مساحة في بداية السطر الأول من كل فققرة.

p{
text-indent: 10px;
}

الروابط Links

يمكنك التحكم في مظهر اوشكل الروابط عبر خيارات عدة وهي
link :
وهو عبارة عن التحكم في الروابط التي لم تقم بزيارتها بعد
visited:
وهي تلك الروابط التي يتم النقر عليها
hover:
ويحدث ذلك عنما يتم تمرير فأرة الحاسوب على رابط
focus:
ويكون عندما تحديد رابط أو استمارة ما
active:
ويحدث ذلك حينما تبقى في صفحة الرابط


روابط ذات صله


طريقة التحكم في الصور بلغة css
اهم دروس لغة css نظام الصندوق CSS Boxes


تعريفات الالوان في لغة css
اقرأ المزيد
مرسلة بواسطة في
التسميات: , ,

Post Top Ad

Your Ad Spot
-رفع الصور-