مدونة وليدوف التطويرية » دروس CSS http://www.walidov.com تطوير المواقع والتجارة الإلكترونية وتطوير الذات ودردشات أخرى. Mon, 23 Nov 2009 05:57:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver http://www.walidov.com/css-tutorials/html-css-dreamwaver.html http://www.walidov.com/css-tutorials/html-css-dreamwaver.html#comments Sun, 02 Sep 2007 15:23:43 +0000 وليدوف http://www.walidov.com/web-development/css-tutorials/html-css-dreamwaver.html بسم الله الرحمن الرحيم

متابعة لسلسة دروسنا في لغة CSS صفحات الأنماط الانسيابية والتي قطعنا منها حلقتين حتى الآن والثالثة سأنشرها خلال اليومين القادمين ، ولكن أحببت أن أثبت بعض المعلومات السابقة الهامة بهذا الدرس التطبيقي السريع حتى ترسخ في أذهاننا بعض الأوامر المهمة والتي سنستخدمها كثيرا أثناء استخدامنا لهذه اللغة.

سنقوم في هذا الدرس التطبيقي بعمل صفحتين HTML وعمل صفحة CSS ، ثم نقوم بربط صفحتي الـ HTML بصفحة الـ CSS ونقوم بالتحكم بلون الخلفية ولون الخط.

أولا قم بفتح برنامج Dreamweaver ستظهر لك الشاشة الأولية ، قم باختيار انشاء ملف HTML :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

والآن سنتوجه لصفحة تحرير الكود ، وذلك بالضغط على الزر Code الموضح بالصورة :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

أضف الآن الكود التالي ، وهو عبارة عن صفحة html عادية فيها نص :

?View Code XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!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>كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.</title>
</head>
 
<body>
<h1>الصفحة الرئيسية</h1>
<p>سنتعلم لغة CSS صفحات الأنماط الانسيابية إن شاء الله تعالى مع وليدوف.
 هذا الدرس يشرح كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.</p>
</body>
</html>

والآن قم بحفظ الصفحة في مجلد جديد اسمه css قم بتسمية الملف page1.html :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

قم بإنشاء ملف آخر أيضا وسمه page2.html :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

ضع الكود التالي فيه :

?View Code XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!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>كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<h1>الصفحة الرئيسية</h1>
<p>سنتعلم لغة CSS صفحات الأنماط الانسيابية إن شاء الله تعالى مع وليدوف.
 هذا الدرس يشرح كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.</p>
</body>
</html>

والآن قم بإنشاء ملف css جديد وسمه style.scc :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

والآن ضع الكود التالي في الصفحة :

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11

body {
   background:#3300FF;
}
 
h1 {
   color:#FFFF00;
}
 
p {
   color:#FFFFFF;
}

والآن اصبح لدينا ثلاث صفحات ، احرص ان تكون كلها في نفس المجلد ، والآن اضغط على لسان التبويب page2.html كما هو موضح بالصورة :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

والآن سنقوم بربط صفحة page2.html بالملف style.css :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

والآن ستلاحظ أنه تم إضافة سطر الربط في صفحة الـ HTML :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

كرر نفس العلمية للملف page1.html ..

والآن في حال أردت تغيير لون الخلفية توجد هناك عدة طرق ، إما أن تعدلها نصيا وذلك بكتابة الكود الخاص باللون.

أو من خلال مربع أكواد css اضغط على الزر ALL وستجد اسم الملف المربوط ألا وهو style.css وبجانبه علامة زائد (+) قم بالضغط عليه ستفتح لك قائمة الأوامر أو المحددات التي يتم التحكم بها ، قم بالنقر على أي محدد ثم ضغط زر القلم :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

والآن يمكنك تعديل كل الخواص الممكن تعديلها من خلال المربع الذي ظهر :

كيف تربط صفحات HTML بملف CSS بواسطة Dreamwaver

إلى هنا أتمنى أن أكون قد قمت بعمل مراجعة سريعة لما مضى ..

إلى لقاء قريب في أمان الله

ودمتم بود ،،



]]> http://www.walidov.com/css-tutorials/html-css-dreamwaver.html/feed 11 كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟ http://www.walidov.com/css-tutorials/css-cascading-style-sheets.html http://www.walidov.com/css-tutorials/css-cascading-style-sheets.html#comments Tue, 31 Jul 2007 16:53:53 +0000 وليدوف http://www.walidov.com/web-development/client-side-coding/css-cascading-style-sheets.html بسم الله الرحمن الرحيم

بعد أن قمنا بشرح تقنية CSS صفحات الانماط الانسيابية ، وبينا أهميتها وفوائدها من خلال هذا الموضوع:

http://www.walidov.com/web-development/client-side-coding/what-is-css.html

سنتعلم معا في هذا الدرس كيف تعمل تقنية صفحات الأنماط الانسيابية “CSS” أو Cascading Style Sheets ، وسنقوم معا بإنشاء أول صفحة انماط انسيابية ، حيث سأشرح لكم أساسيات هذه اللغة وكيف نربط بينها وبين صفحات HTML.

إن أغلب أكواد (CSS) شبيهة جدا بأكواد HTML ، لذلك إذا كانت لديك خلفية في لغة HTML ستكون أكواد CSS مألوفة جدا لديك ، لأنه كما ذكرنا بموضوعنا السابق ، فإن لغة CSS هي لغة موازية للغة HTML أي أنها طريقة ثانية أكثر تقدما لتطبيق أوامر HTML على الصفحات.

  • البنية الأساسية للغة CSS :

على فرض أننا نود عمل صفحة لون خلفيتها أزرق ، سنقوم بعملها بلغة HTML ولغة CSS لتروا الفرق بينهما :

في حال استخدمنا لغة HTML سيكون الكود شكله كما يلي :

?View Code XML
1

<body bgcolor="#0000FF">

ولكن في حال استخدمنا لغة CSS سيكون الكود شكله كما يلي :

?View Code CSS
1

body { background-color: #0000FF; }

كما تلاحظون فإن الأكواد متشابهة إلى حد كبير ، والمثال السابق يظهر البنية الأساسية للغة CSS ، أي الطريقة التي يتم فيها كتابة أكواد CSS وسنشرحها في المخطط التالي :

?View Code CSS
1

selector { property: value; }
  1. المحدد “selector” :
    وهو الذي يحدد أي جزء من كود HTML سيتم التحكم به وتغييره بواسطة الملف CSS ، لأنه كما قلنا فإن أكواد CSS تكون عادة مكتوبة في ملف مستقل ، ثم نربطها بعدد لا نهائي من ملفات HTML ، حتى نقوم بتغيير خصائص جميع هذه الصفحات بواسطة تعديل ملف CSS.
    في مثالنا السابق : المحدد هو الـ”body” أي جسم الصفحة ، يعني أننا قمنا بتحديد جسم الصفحة “body” لكي نقوم بتغيير خصائصه.
  2. الخاصية “property” :
    هي خصائص الجزء المحدد بواسطة “المحدد” والتي سنقوم بتغيير قيمها حتى يظهر الجزء المحدد بالشكل المطلوب.
    في مثالنا السابق : الخاصية كانت لون خلفية الصفحة “background-color” ، أي أننا سنقوم بتغيير لون الخلفية لجسم الصفحة “body”.
  3. القيمة “value” :
    وهي قيمة الخاصية التي سنقوم بتعديلها ، في مثالنا السابق : قمنا بتحديد القيمة “#0000FF” وهو رمز اللون الأزرق.

ملخص ماسبق ، أننا نقوم بتحديد جزء لنقوم بالتحكم بخصائصه ، ثم نضع داخل أقواس معقوفة {} الخصائص وكل خاصية نحدد قيمتها ، دائما توضع نقطتين فوق بعض “:” بين الخاصية والقيمة تنتهي كل خاصية بفاصلة منقوطة “;” في حالة تعديل أكثر من خاصية كما في المثال التالي :

?View Code CSS
1
2
3
4

body {   
   font-size: 14px;
   background-color: #0000FF;
}

في هذا المثال قمنا بتعديل خاصيتين ، لون الخلفية وحجم الخط ، لاحظ أنه وضعنا كل خاصية في سطر مستقل ، هذا أفضل للقراءة في حال أردت التعديل لاحقا ، ولكنه ليس ضروري أي أنه يمكنك وضع جميع الخصائص في سطر واحد كما يلي :

?View Code CSS
1

body { font-size: 14px; background-color: #0000FF; }
  • كيف نربط ملف CSS بصفحات HTML؟

توجد هناك 3 طرق لربط ملفات CSS بصفحات HTML إلا أنه طريقة واحدة فقط منها هي الفعالة وهي الوحيدة التي تحقق لنا فوائد استخدام التقنية ، سنشرح لكم الطرق الثلاثة :

الطريقة الأولى : الطريقة المباشرة “In-Line” أو كما تسمى (the attribute style)

هذه الطريقة تعتمد على إضافة كودات CSS مباشرة على كودات HTML ، أشبه ما تكون مزج بين HTML و CSS باستخدام الخاصية “style” ، الأمور ستكون أوضح بعد مشاهدة المثال التالي :

how-css-works-1

كما تشاهدون أننا استخدمنا كود CSS داخل كود HTML ، وذلك باستخدام الخاصية style و يكون كود CSS هو القيمة لهذه الخاصية.

الطريقة الثانية : الداخلية أو ما يسمى (the tag style)

هذه هي الطريقة الثانية ، وهي أيضا تكتب داخل ملف HTML ولكن بشكل مستقل عن أكواد HTML وذلك بكتابتها في وسم مستقل ألا وهو : <style></style> يوضع في الهيدر <head></head> الخاص بالصفحة ، كما يلي :

how-css-work-2

فكما نرى ، اننا نكتب كود CSS كامل ومستقل ، ولكن نضعه ضمن هيدر الصفحة ، ومشكلة هذه الطريقة أننا لا نستطيع التحكم سوى بالصفحة المكتوب فيها الكود.

الطريقة الثالثة : الخارجية أو ما يسمى (link to a style sheet)

وهي الطريقة الصحيحة والمثلى لتطبيق تقنية CSS والاستفادة من جميع مميزاتها ، وهي تعتمد على كتابة كود CSS في ملف مستقل ينتهي بنسق .css على سبيل المثال : style.css ، هذا الملف سنكتب في الكود الذي سيتحكم في خصائص صفحات الـHTML ، ثم بعد ذلك نربط هذا الملف بجميع صفحات HTML بواسطة كود الربط التالي :

?View Code XML
1

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

هذا السطر يجب كتابته في أي صفحة HTML نود أن نربط بها ملف الـCSS بحيث يتم تطبيق جميع الخصائص المكتوبة في ملف الـCSS على صفحة HTML ، لاحظ ان اسم ملف الـCSS هو : style.css ، فلو غيرت اسم ملف الـCSS عليك تغيير الاسم أيضا في سطر الربط.

ويجب أن يتم وضع سطر الربط في صفحة HTML بين الوسمين <head></head> أي في هيدر الصفحة كما يلي :

how-css-work-3

بهذه الطريقة يمكن ربط عدد لانهائي من ملفات HTML بنفس ملف الستايل style.css ، ومن ثم نستطيع تعديل شكل جميع صفحات الـHTML بواسطة تعديل ملف واحد فقط ألا وهو ملف الـCSS ، كما هو موضح بالصورة :

css-network

إلى هنا انتهى درسنا ، دعونا نقم بعمل تطبيق سريع لهذا الدرس ..

أولا : أنشئ صفحة index.html
قم بعمل صفحة HTML وضع فيها الكود التالي ، وانتبه إلى سطر الربط ، والذي سيربط ملف الستايل CSS الذي سنقوم بعمله بهذه الصفحة :

?View Code XML
1
2
3
4
5
6
7
8
9

<html>
  <head>
    <title>Walidov</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>هذه هي الصفحة الرئيسية</h1>
  </body>
</html>

ثانيا : أنشئ صفحة content.html
هذه صفحة أخرى ولكن فيها محتوى مختلف عن الصفحة الأولى ، ولكن الشيء المشترك الوحيد هو أننا سنربط نفس ملف الستايل CSS بهذه الصفحة أيضا :

?View Code XML
1
2
3
4
5
6
7
8
9

<html>
  <head>
    <title>Walidov</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>هذه هي الصفحة الفرعية للمحتويات الثانوية</h1>
  </body>
</html>

أخيرا : أنشئ ملف style.css
والآن سنقوم بكتابة كود CSS وحفظه في ملف مستقل :

?View Code CSS
1
2
3

body {
   background-color: #0000FF;
}

تأكد أن تضع الملفات الثلاثة في نفس المجلد ، سيكون مخطط الصفحات كما يلي :

files-chart

قم الآن بفتح الصفحات index.html و content.html وشاهد أول تطبيق عملي لتقنية CSS ، مبروك لقد نجحت !!

قم بتغيير اللون من صفحة style.css ، وشاهد أن اللون تغير في الصفحتين معا ، أليس ذلك مذهلا ؟!؟ نعم إنه سحر لغة CSS.

يمكنك تحميل ملفات المثال :
[download=1]



]]> http://www.walidov.com/css-tutorials/css-cascading-style-sheets.html/feed 21 مقدمة في لغة صفحات الانماط الانسيابية CSS-Cascading Style Sheets http://www.walidov.com/css-tutorials/what-is-css.html http://www.walidov.com/css-tutorials/what-is-css.html#comments Sat, 28 Jul 2007 09:30:13 +0000 وليدوف http://www.walidov.com/web-development/client-side-coding/what-is-css.html بسم الله الرحمن الرحيم

إن عصر تصميم المواقع بلغة HTML قد ولى ، والآن من يصمم المواقع بدون استخدام صفحات الانماط الانسيابية CSS هو باعتقادي “أمّي” في علم تصميم المواقع ، لذلك على جميع مصممي المواقع بالطريقة التقليدية تعلم هذه التقنية لمواكبة التطور السريع في علم تصميم المواقع.

ماهي لغة CSS؟

إن كلمة CSS قادمة من الحروف الأولى للجملة : Cascading Style Sheets ، والتي تعني باللغة العربية : صفحات الانماط الانسيابية ، تم اختراع لغة CSS عام 1995 لكن كان أول ظهور رسمي للغة CSS عام 1996 عبر منظمة W3C وهي الإصدارة CSS1 ، ثم في عام 1998 أصدرت الإصدارة CSS2 ، ثم صدرت آخر إصدارة عام 2003 وهي CSS2.1 وهي اللغة المتداولة الآن ..

توجد هناك إصدارة جديدة تحت الإنشاء ولا يعرف موعد إطلاقها وهي CSS3.

إن لغة CSS هي لغة موازية للغة HTML مبدأ عملها بسيط جدا ومعروف ، وهو تحديد شكل افتراضي وحفظه في صفحة مستقلة ، ويتم تطبيق هذا الشكل على عدد لا نهائي من صفحات HTML والهدف الرئيسي منه هو تعديل شكل عدد كبير من صفحات HTML من خلال تعديل ملف واحد فقط.

باختصار ، لغة CSS هي مجموعة من الأوامر المكتوبة في ملف مستقل-عادة-تتحكم بخصائص HTML والتي تحدد مظهر الصفحة المصممة ، كلون الخط ونوعه وخلفية الصفحة وشكل الجداول والإطارات، إلخ..

ماذا تعني صفحات الانماط الانسيابية؟

انظر إلى الصورة التالية :
cascading

يمكن بسهولة أن تفهم الجملة “صفحات الانماط الانسيابية” أو “Cascading Style Sheets” إذا عرفت الأنواع الثلاثة للـ CSS ألا وهي :

  1. صفحة نمط المتصفح :
     وهي الشكل الإفتراضي لظهور صفحات HTML في المتصفحات ، على سبيل المثال : لون الخلفية أبيض ، لون الخط أسود ، لون الروابط أزرق ، لون الروابط المزارة بنفسجي ، إلخ ..
  2. صفحة نمط المستخدم :
    وهي الشكل الافتراضي للمستخدم ، يعني مثلا لو قمت بتحميل ثيم معين للويندوز ، سوف تعرض صفحات المواقع بشكل مختلف
  3. صفحة نمط المحرر :
    ؤهي الشكل الذي يقوم مصمم الموقع بتحديده وحفظه على شكل صفحة .css ويتحكم بشكل الموقع من خلاله.

والآن نأتي للمصطلح (صفحات الانماط الانسيابية) لنقم بشرحه .. إن الأنواع الثلاثة السابقة لها أولوية للظهور ، فالنوع الثالث (صفحة نمط المحرر) له الأولوية الأولى للظهور ، فمهما كان نمط المستخدم والمتصفح ، سيظهر الشكل المحدد في (صفحة نمط المحرر) ، ولكن ماذا لو كانت هناك خيارات لم يقم مصمم الموقع بتحديدها في (صفحة نمط المحرر) ، سيقوم المتصفح بالقفز إلى (صفحة نمط المستخدم) وعرض الشكل المحدد فيها بغض النظر عن نمط المتصفح ، لأن للمستخدم الأولوية الثانية بعد المحرر ، ويأتي أخيرا (صفحة نمط المتصفح) فلو كانت هناك خيارات غير محددة في أنماط المحرر والمستخدم ، ستعرض خيارات نمط المتصفح.

ولذلك سميت (صفحات الانماط الانسيابية) ، لأن الشكل الصفحة المعروضة تأخذ الشكل المحدد في الصفحات الثلاث المذكورة بشكل متعاقب ، تأخذ خيارات (صفحة نمط المحرر) فإن لم تكن محددة تأخذ (صفحة نمط المستخدم) فإن لم تكن محددة تأخذ (صفحة نمط المتصفح).

ماهي فوائد لغة CSS؟

هناك خمسة أسباب رئيسية تجبرك على التصميم بتقنية CSS:

  1. سهولة التعديل والصيانة :
    إن أهم ميزة لـcss هي أنك تستطيع تعديل أو صيانة عدد كبير جدا من ملفات HTML من خلال تعديل ملف واحد فقط هو ملف css.
  2. سهولة الوصول :
    إن استخدام css يسهل عملية الوصول للمعلومة أو النقطة المرغوبة في صفحة HTML على الطرفين ، المستخدم والمتصفح ، فصفحات html ستكون تقريبا شبه خالية من الوسوم لأنها ستكون مخزنه في ملف css ممايجعل الصفحة تحتوي على المحتوى والمعلومات فقط ، فيصبح أسهل على الكمبيوتر أو المتصفح الوصول وعرض الملعومات.
  3. تغيير بيئة العرض :
    أعني بذلك أن بيئة المتصفح تختلف عن بيئة الطباعة وتختلف عن بيئة الكمبيوتر الكفي ، فأنت تحتاج لعرض نفس الصفحة والمحتويات ولكن في عدة بيئات مختلفة ، فبدلا من تغيير محتويات html يمكنك تغيير فقط طريقة العرض لتوائم البيئة المستهدفة.
  4. تقليل حجم الملفات :
    إن استخدام ملف css يغنيك عن استخدام اكواد كثيرة جدا في ملفات html كشكل الخط ولونه ولون الخلفية وصورة الخلفية والجداول وصورة الإزاحة والكثير الكثير من أكواد html كلها تكون محفوظة في ملف واحد ألا وهو css ، مما يتسبب في هبوط حاد في حجم ملفات html مما يقلل الضغط على السيرفر ويسرع العرض بشكل كبير.
  5. سيطرة أكثر على الكتابة :
    يمكنك التحكم بالكتابة والنصوص في صفحات html بشكل أوسع من خلال css ، فيمكنك التحكم بالفراغات بين السطور والكلمات والحروف ، وتغيير أنماط الحروف من كبيرة إلى صغيرة والعكس.

ودمتم بود ،،

انتقل الآن للدرس الثاني :

كيف تعمل تقنية صفحات الأنماط الانسيابية CSS-Cascading Style Sheets؟
]]> http://www.walidov.com/css-tutorials/what-is-css.html/feed 17