دورة ال (css)

سلمان العلياني · #1 15-Jan-2008, 10:41 AM

مقدمة عامة حول ماهية الـCSS ..

الـCSS هي تقنية تهتم بتحديد شكل وتصميم المواقع ..

ما معنى كلمة CSS ؟

الكلمة CSS اختصار للجملة Cascading Style Sheets والتي معناها باللغة العربية ( أوراق الأنماط المتتالية ) .

ما الفائدة من هذه اللغة ؟
-----------------------------------------------

هل فكرت يومياً كيف يستطيع متصفح الانترنت (browser) فهم صفحات الـ يجب أن يكون لديك 3 مشاركات حتى تتمكن من مشاهدة الرابط بوجود وسوم أنت مخترعها ؟ فكيف يعرف مثلاً أن الكمات الموجودة داخل الوسم <books> تريد ظهورها بالخط المائل ؟
توجد عدة طرق لإخبار المتصفح بقيمة الوسوم وفي هذا الدرس نتعلم مبادئ أحد هذه الطرق والتي تدعى CSS وهي أسهل طريقة موجودة لإخراج ملفات لغة الـ XML لشبكة الانترنت .

ما هي مميزات هذه اللغة ؟

لو كنت تملك موقع وجميع صفحات هذا الموقع تريدها أن تكون بنفس التصميم ، سوف توفر لك هذه اللغة العناء الكبير الذي كنت سوف تفعله بدونها حيث يمكنك تحرير ملف واحد يعتبر مسؤلاً عن شكل جميع صفحات موقعك بحيث لو أردت تعديل التصميم يمكنك ذلك بواسطة تعديل ملف واحد ( لا تعديل جميع صفحات موقعك ) فهذا الملف سوف يقوم تلقائياً بتعديل جميع الصفحات .

لنبدأ العمل :

قم بنسخ هذا الكود :
<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="books.css"?>
<my-life>
<the-event>
My first File in CSS .
</the-event>
</my-life>

احفظ الملف باسم bader.xml .

قم بنسخ هذا الكود :
/*file Name:bader.css*/

my-life
{background-color:black; color:white}
the-event

احفظ الملف باسم bader.css .

حسناً لنقم بتشريح هذا العنصر

ضع مكان الكلمة books.css عنوان ملف الـ css .
أما معنى الجملة text/css ( نوع الملف المساعد ) فهي التي تدل على أن الملف بامتداد css وليس xsl أو أحدى اللغات الداعمة للغة الـXML .

سوف نبدأ الآن بترجمة الكلام الذي كتبته في ملف bader.css إلى اللغة العربية لكي تفهمه :

كود<my-life>
1- قم بتغيير لون جزء الصفحة الذي داخل وسم <my-life> إلى اللون الأسود ، قم بتغيير جميع ألوان الكلمات الموجودة داخله إلى اللون الأبيض .

كود<the-event>
2- قم بتنسيق جميع الكلمات التي داخل الوسم <the-event>بالخط المائل (italic) .

لقد قمت للتو بشرح كيفية فهم المتصفح (browser) للوسوم التي كتبناها في أول الصفحة .

القواعد الأساسية لكتابة ملفات CSS :

1- يجب أن يكون امتداد ملفات الـCSS هو .css .
مثال :
اسمينا أحد ملفات بـBADER حيث يحتوي الملف أصلاً على أكواد CSS نقوم بإتغيير اسم الملف ليصبح bader.css

2- إذا اردت تحديد أكثر من قيمة واحد لوسم محدد فيجب عليك أن تفصل بين القيمتين بفاصلة منقوطة ;
مثال:

{background-color:black; color:white}

3- يجب عليك وضع قوس{ قبل القيم وقوس } بعد القيم
مثال :

{font-style:italic}

4- يفضل أنت تضع في بداية الملف الكود التالي
/*file Name:bader.css*/

حيث تقوم بتغير الكلمة bader.css باسم الملف الذي أنت فيه ( ملف الـCSS الذي يوجد به الكود ).

5- لغة الـCSS غير حساسة لحالة الأحرف
مثال :
MYLIFE
{background-color:black; color:white}
Mylife
{Background-Color:Black; Color:White}
mylife

{BACKGROUND-COLOR-BLACK; COLOR:WHITE}

الدرس الاول
css بسهولة (1)

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

كما أسلفت هذه التقنية تهتم بتحديد شكل وتصميم الموقع، وهذا ينطبق على الألوان والخطوط الصور الخلفية (التي تستخدم في التصميم)، ربما سيقول البعض بأن لغة HTML تفعل ذلك، وهذا صحيح، لكن هناك مشكلة تسببها لغة HTML، وهي أن شكل الموقع لا ينفصل عن محتوياته، فإذا أردت أن تقوم بتعديل أي جزء من التصميم في موقعك فستقوم بتعديل كافة ملفات HTML، وهذه عملية متعبة للمواقع الكبيرة، وهناك مشاكل أخرى، وCSS تقدم الحل لها، دعونا ننظر إلى هذا المثال:
<head>
<title>عنوان</title>
</head>
<body>

<p><font face="Tahoma" color="#677393" size="2">عنوان أول</font></p>

<p><font face="Tahoma" color="#677393" size="2">عنوان ثاني</font></p>

<p><font face="Tahoma" color="#677393" size="2">عنوان ثالث</font></p>

</body>
</html>

هذه الصفحة تحتوي على ثلاث فقرات تحتوي ثلاث عناوين، حددنا لكل عنوان خط Tahoma بمقياس 2 وحددنا له لوناً، الآن ستدخل CSS لتغير بعض الأمور، لا تقلق، سنقوم بشرح أوامر CSS بالتفصيل في دروس قادمة:
<html>
<head>
<title>عنوان</title>

<style>
p {
font: 13px Tahoma;
color: #677393;
}
</style>

</head>
<body>

<p>عنوان أول</p>

<p>عنوان ثاني</p>

<p>عنوان ثالث</p>

</body>
</html>

حسناً، أول ملاحظة قد تلاحظها أن الصفحة أصبحت أكثر بساطة وتستطيع قراءتها بسهولة، الملاحظة الثانية هي أننا أضفنا أوامر CSS بين وسمي <style> في رأس الصفحة <head>، وتم تطبيق الأوامر على جميع فقرات الصفحة، هذا هو ما تفعله CSS، أن تحدد شكل الصفحة وتصميمها لمرة واحدة، ثم تطبق ذلك على جميع صفحات الموقع، الآن وقد عرفت ماذا تفعل CSS، لنتعرف على أساليب إضافتها في صفحات HTML، الطريقة الأولى وهي التي استخدمناها في المقال، وهي أن نضع الأوامر في رأس الصفحة:
<style type=”text/css”>
CSS styles here
</style>

الطريقة الثانية وهي أن تطبق CSS مباشرة في HTML وهذه الطريقة تسمى inline، وهذا مثال لها:
<p style="font: 13px Tahoma; color: #677393;">عنوان أول</p>

أما الطريقة الثالثة فهي أن تنشأ ملفاً نصياً وتسمه بأي اسم المهم أن يكون الامتداد css (مثال: mystyle.css) وتضع فيه أوامر CSS، ثم ومن خلال صفحة HTML تقوم بربط الصفحة بهذا الملف هكذا:
<html>
<head>
<title>عنوان</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<p>عنوان أول</p>

<p>عنوان ثاني</p>

<p>عنوان ثالث</p>

</body>
</html>

ما هي فائدة CSS؟

1) تقليل حجم الموقع الكلي بنسبة تصل إلى 50% مما يعني أن سعة الموجة (bandwidth) التي يحتاجها الموقع ستقل.
2) تقليل حجم صفحات الموقع، مما يعني أن المستخدم سيقضي وقتاً أقل لكي تظهر له صفحات الموقع بشكل كامل.
3) فصل المحتويات تماماً عن التصميم، والتحكم بالتصميم من خلال ملف واحد فقط.
4) فصل المحتويات عن التصميم يؤدي إلى أن يكون الموقع متوافقاً مع أجهزة أخرى كالحواسيب الكفية.

أذكر في النهاية أن تعلم CSS يعني أنك ستصمم المواقع بأسلوب مختلف تماماً عما تعلمته سابقاً، فأنت لن تستخدم الجداول أبداً في تصميم الموقع، فالجداول تستخدم فقط للبيانات التي تحتاج أن تكون في جداول، كأسماء الطلبة في مدرسة مثلاً، أما التصميم سيكون باستخدام css بالكامل، وقد يكون هذا في البداية صعباً، لكنك ستتعود عليه وتتعلمه بسهولة، وهذه هي المعايير التي وضعتها منظمة W3C لكي يكون الموقع قابلاً للاستخدام من قبل شريحة واسعة من المتصفحين كذوي الاحتياجات الخاصة، وإليك قائمة بمواقع تم تصميمها بلغة CSS ودون الاستعانة بأية جداول للتصميم (إذا كانت هناك أية جداول فهي فقط للبيانات ولا علاقة لها بالتصميم):
-----------------------------

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

والآن لننظر إلى ملف layout.css.

body {
margin: 0px;
direction: rtl;
}

في السطر الأول، حددنا الجزء المسمى body، وفي أوامر html هو المكان الأساسي للصفحة، أو هو الصفحة البيضاء التي تظهر لك في المتصفح، ثم فتحنا قوساً معقوفاً وفي داخل القوس هناك أولاً خاصية margin وهي تعني المساحة الفارغة بين جزء body والمتصفح، وبما أننا لا نريد أي مساحة فارغة فقد حددنا قيمة 0px للخاصية وبعد ذلك وضعنا فاصلة منقوطة وهذه الفاصلة ضرورية ويجب وضعها بعد كل قيمة، ثم هناك خاصية direction والتي تعني اتجاه الصفحة، وبما أننا عرب ومواقعنا عربية، فيجب أن يكون الاتجاه من اليمين إلى اليسار أي rtl (هذا مختصر لجملة right to left)، ثم بعد ذلك وضعنا أيضاً فاصلة منقوطة ثم أغلقنا القوس، وهكذا حددنا الخصائص التي نريد للجزء body.

تتكون أوامر CSS من ثلاث أجزاء:
selector {property: value;}

حسناً، أول ملاحظة قد تلاحظها أن الصفحة أصبحت أكثر بساطة وتستطيع قراءتها بسهولة، الملاحظة الثانية هي أننا أضفنا أوامر CSS بين وسمي <style> في رأس الصفحة <head>، وتم تطبيق الأوامر على جميع فقرات الصفحة، هذا هو ما تفعله CSS، أن تحدد شكل الصفحة وتصميمها لمرة واحدة، ثم تطبق ذلك على جميع صفحات الموقع، الآن وقد عرفت ماذا تفعل CSS، لنتعرف على أساليب إضافتها في صفحات HTML، الطريقة الأولى وهي التي استخدمناها في المقال، وهي أن نضع الأوامر في رأس الصفحة:
<style type=”text/css”>
CSS styles here
</style>
selector وهو الجزء الذي تريد تطبيق الخصائص عليه، فيمكن أن تختار أي وسوم للغة HTML، مثل body لجسم الصفحة، أو p للفقرات أو a للروابط، ثم تضع الخصائص (property) التي تريد التحكم بها، ولكل خاصية هناك قيمة (value)، هذه هي أوامر CSS وهي كما ترون بسيطة سهلة.

لنعد إلى ملفنا، ستلاحظ أن الملف يحوي على أمر جديد وهو علامة # وبعدها كلمة topbar وبالتأكيد ليس هناك أمر html بهذا الاسم، فما هو هذا الأمر؟ حسناً علامة # تعني أننا سنحدد معرفاً والمعرفات تستطيع أن تسميها كما تشاء، فقمت بتسميته topbar، وفيه عدة خصائص جديدة تحتاج إلى شرح بسيط: top: وهي تعني المسافة الفاصلة ما بين رأس الصفحة والمعرف الذي أسميناه هنا topbar، وقد حددنا هذه القيمة هنا بصفر بكسل 0px ويعني ذلك أن topbar سيكون ملاصقاً تماماً لرأس الصفحة.

right: تشبه top تماماً مع فارق أنها تحدد المسافة الفاصلة بين يمين الصفحة والمعرف.

width: عرض المعرف وقد حددناه هنا بالقيمة 100% أي أن المعرف سيكون بعرض الصفحة كاملة.

height: ارتفاع المعرف وقد حددنا ارتفاع المعرف topbar بخمسين بكسل 50px.

backgorund-color: هذه سهلة! خاصية تحديد لون المعرف، وقد حددناه بلون أزرق #4682B4.

position: هذه شرحها صعب قليلاً، وهي تعني أن المساحة الذي أنشأناه topbar سيكون موقعهت بالضبط محدد بمسافة من أعلى ويمين الصفحة، ولذلك حددنا لهت القيمة absolute والتي تعني أن topbar ستكون في مكانها المحدد والذي لن يتأثر بوجود أي عناصر أخرى قد تتداخل معه (تستطيع أن تضع عدة مساحات فوق بعضها البعض وتحدد لكل مساحة موقعها المحدد) أعلم أن هذه صعبة الشرح علي لكن فهمها يجب أن يكون بالممارسة العملية وربما أنا لا أعرف كيف أشرحها.

حسناً، هذه مساحة أو صندوق topbar قد تم تعريف، وإذا رأيت في الصورة الموجودة في الملف المضغوط ستجد أن هناك مساحة زرقاء أعلى الصفحة، هذه هي مساحة topbar، وفي ملف css هناك معرف topnav والذي يقع أسفل المساحة topbar وفيه عدة أوامر سبق أن شرحناها، لكن هناك أمر جديد وهو border-bottom، وهو يعني أن مساحة topnav لها إطار سفلي فقط، حددنا له عرض واحد بكسل 1px، وشكله solid أي أنه سيظهر على شكل خط متواصل، ولو وضعنا مثلاً القيمة dotted لوجدت أن الإطار السفلي سيظهر على شكل نقط، ثم حددنا له لوناً رمادياً #DCDCDC

ثم بعد ذلك قمنا بإنشاء معرف ثالث وأسميناه sidenav، وهو الجزء الأيمن وحددنا له لوناً رمادياً وإطاراً أيسراً وآخر سفلي، وهكذا نكون قد انتهينا من ملف layout.css، نذهب الآن لملف index.htm، وهو بسيط جداً لا شيء جديد فيه، الأمر link شرحناه في الدرس السابق، والآن الجديد هو ما يقع بين وسمي body:
<div id="topbar"></div>
<div id="topnav"></div>
<div id="sidenav"></div>

هنا حددنا المساحات الثلاث التي نريدها، topbar المساحة الزرقاء والتي سنضع فيها شعاراً للموقع في درس لاحق، ثم topnav وهو المساحة التي سنضع فيها روابط الموقع الرئيسية، ثم sidenav والذي سنضع فيه روابط فرعية، لاحظ أن المعرف id لا يجب أن تستخدمه إلا مرة واحدة فقط، لا يمكن أن تستخدم معرفاً في جزئين من الصفحة، المعرف يجب أن يكون متميزاً ويستخدم مرة واحدة فقط، ولذلك أنا شخصياً أستخدمه للأجزاء الرئيسية التي تحدد شكل الموقع، ثم استخدم الفئات في باقي أجزاء الموقع (سنشرح الفئات في درس لاحق).

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

انتهى الدرس الثانى
---------------------------

هذا التصميم الجديد مطور قليلاً عن التصميم السابق، قمت بحذف المساحة الجانبية sidenav والتي رأيناها في التصميم الأول، كانت هذه المساحة مجرد مثال فقط لا غير، الآن في هذا الدرس سنضع شعاراً في التصميم، وكذلك روابط لأربعة صفحات وفقرات تحتوي كل منها على رابط، وأخيراً مساحة أسفل الموقع لوضع ملاحظة "جميع الحقوق كحفوظة"، سنبدأ مع ملف layout.css، ونشرح الإضافات الجديدة فقط، أما الأوامر القديمة فإنها مشروحة في الدرس السابق.

أول إضافة جديدة هي معرف جديد قديم! وهو topnav a، وقد شرحنا بالتفصيل في الدرس الماضي خصائص topnav، فما الجديد في هذا المعرف؟ الجديد هو إضافة الحرف a، وهو الأمر الخاص بالروابط في html، نحن نخبر المتصفح بأن المساحة أو المعرف topnav سيحوي عدداً من الروابط، ولهذه الروابط خصائص معينة:

#topnav a {
font: bold 10px Tahoma;
text-decoration: none;
color: Gray;
}

font: تعني الخط! وهنا حددنا له أن يكون ثخيناً bold، بمقياس 10px، ونوع Tahoma، لاحظوا الترتيب الذي اتبع في وضع القيم، فلا يجوز مثلاً أن أضع نوع الخط قبل قياسه، بل يجب أن تكون مرتباً بهذا الترتيب، وبالطبع لا يجب أن تضع كل هذه القيم، يمكنك أن تضع القياس فقط أو الخط فقط أو القياس والخط معاً، لكن إن أردت أن تضع جميع الخصائص فيجب أن تضعها بهذا الترتيب. (المزيد من الشرح ستجدونه في مواقع أخرى متخصصة)

text-decoration: هذه الخاصية تقوم بعمل تأثيرات على النص، وتقبل هذه القيم:

none: لا تفعل شيئاً.

underline: تضع خطاً أسفل النص.

overline: تضع خطاً أعلى النص.

line-through: تضع خطاً على النص.

ونحن اخترنا القيمة none حيث لا نريد للروابط أن يكون تحتها أو فوقها خط.

color: وتعني لون الخط واخترنا القيم gray له وتعني الرمادي، ويمكن وضع قيم أخرى للون كالقيم الرقمية (مثال: #808080)

ثم نجد معرف topnav وقد أضفنا له ul و li ، وهذان أمران في html لعمل القوائم، وتم استخدامهما هنا لإنشاء الروابط، بحيث تعرض الروابط على خط واحد بدلاً من عدة خطوط، فإذا أردنا في المستقبل أن نقوم بوضع الروابط في مساحة جانبية ويكون كل رابط أسفل الآخر فيمكن عمل هذا بسهولة في ملف css دون الحاجة إلى فتح ملفات html وتعديلها .

#topnav ul, li {
text-indent: 50px;
display: inline;
margin-right: 20px;
}
text-indent: هذه خاصية تضيف مساحة فارغة للسطر الأول في الفقرات وقد استخدمتها هنا لكي أبعد الروابط عن طرف الصفحة لكي يسهل قراءتها أكثر.

display: هذه الخاصية تتحكم بأسلوب عرض العناصر فيhtml وتقبل هذه القيم:
none: وتعني أنها لن تعرض شيئاً، وهذه مفيدة في حالة رغبة المصمم أن ينشأ ملف css لطباعة المحتويات، حيث يجعل كل عناصر التصميم تختفي ما عدى المحتويات الرئيسية فقط، وهذا يوفر الوقت على المصمم ويوفر الوقت وحبر الطباعة على زوار الموقع، وكذلك يوفر الوقت على المبرمج حيث لا حاجة لإنشاء ملف خاص للطباعة.

inline: وتعني أنها ستعرض كل شيء في سطر واحد وبما أننا طبقناها على أوامر ul وli فإن هذه الأوامر تظهر عادة على شكل قوائم، وباختيار قيمة inline سنجبرها على أن تظهر في سطر واحد.

margin-right: شرحناها في الدرس الماضي، لكن هنا خصصنا خاصية margin للجهة اليمنى فقط، حتى تكون الروابط متباعدة عن بعضها البعض بمسافة تسهل عملية قراءتها.

ثم أضفنا معرف main، والذي سيكون في منتصف الصفحة وسيحوي المحتويات الرئيسية، ثم حددنا للمعرف p main كيف سيعرض الفقرات فاخترنا حجم الخط ونوعه، ثم حددنا للمعرف main a، كيف سيعرض الروابط واخترنا لون الخط والذي يجب أن يكون مختلفاً تماماً عن النص حتى يتم التعرف عليه، واخترنا عدم وضع خط أسفله، وفي النهاية أضفنا فئة جديدة وهذه تحتاج لشرح بسيط.

الفئات (class) في css يتم تحديدها بوضع نقطة قبلها، والمعرفات كما شرحنا في الدرس الماضي يتم وضع علامة # قبلها، الفئات يمكن استخدامها أكثر من مرة في نفس الصفحة، بينما لا يجوز استخدام المعرفات في نفس الصفحة أكثر من مرة، وتستطيع تسمية الفئات كما تشاء، وبما أن أن الفئة هنا خاصة بملاحظة "جميع الحقوق محفوظة" فإنني أسميتها copyright، واخترت لها عدة خصائص، كالإطار العلوي الرمادي المنقط، واخترت توسيط النص الذي ستحتويه.

ملف index.htm لا جديد فيه إلا أمر <p class="copyright">، وهو كيفية تحديد الفئة في html ، فالمعرفات نحددها باستخدام id، والفئات نحددها باستخدام class، طبعاً أضفت بعض الفقرات (منسوخة من موضوع لي في سوالف للجميع قسم السيارات ) وأضفت روابط في معرف topnav لاحظ كيف استخدمات أوامر ul وli، وغير في ملف css الأمر الخاص بعرضها display من inline إلى list-item وانظر ماذا سيحدث.
-----------------------

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

خطوات العمل
1) قمت أولاً بإنشاء ملف css للموقع، وفيه حددت الخطوط المستخدمه وسميته main_style.css
2) قمت بإنشاء نسخة من ملف main_style.css وسميته big_style.css
3) قمت بتعديل الخطوط في الملف الثاني لتكون كبيرة وواضحة.
4) في ملف index.htm قمت بتحديد ملف main_style.css كملف رئيسي للتصميم:

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

5) ثم قمت بتحديد ملف big_style.css كملف ثان للتصميم:
<link href="stylesheet/big_style.css" type="text/css" rel="alternate stylesheet" title="big" />

لاحظ أنني أضفت خاصية title وتعني العنوان وأعطيت للملف تسمية big،
) قمت بإضافة ملف جافاسكربت الخاص بتغيير الخط:

........................ src="styleswitcher.js" type="text/..............................">.................. ...............

7) قمت بإنشاء زرين لكي يستطيع المستخدم تغيير الخط كما يشاء:
< input class="selectorbutton" onclick="setActiveStyleSheet('default'); return false;" type="button" value="القياسي" />

<input class="selectorbutton" onclick="setActiveStyleSheet('big'); return false;" type="button" value="الواضح" />

إذا ضغط المستخدم على الزر الأول فإنه سيختار التصميم الأساسي، وإذا ضغط على الزر الثاني فإنه سيختار التصميم الذي أسميناه big، وهو التصميم الثاني، هذا ملخص أوامر html وجافاسكربت أعلاه، ولأنني ليست خبيراً في جافا سكربت فأعتذر عن شرحها

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

ملاحظة 1: يجب أن تقوم بإضافة ملف الجافاسكربت في كل صفحات الموقع.
ملاحظة 2: يمكنك استبدال الزرين بنصوص عادية، أو بصور، هذا يعتمد على مهارتك في html وجافا سكربت .

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
دورة إحتراف فلاش 8 Flash 8	سعيد بن عبدالعزيز	سـاحة التصميم والجرافيكس	7	28-Dec-2008 03:41 AM
دورة مجانية في الفوتوشوب للمبتدئين	ناصر الخثعمي	ساحة الفوتوشوب	10	03-Sep-2008 06:52 AM
دورة مجانية في الفوتوشوب	عامر القحطاني	ساحة الفوتوشوب	4	09-Jan-2008 05:10 AM
انتهاء دورة كوبا أمريكا....	&شـبـيـه الــريـح&	السـاحة الريـاضية	6	17-Jul-2007 01:59 PM
تقدر تدخل دورة المياة هذه؟ اتحداك	سارق القلوب	ســاحة صورتي	8	25-May-2007 09:12 PM