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

شبكة ابن الخليج

Sitemap | Archive | Tag Could
التسجيلالبحثمشاركات اليوماجعل جميع المنتديات مقروءةالأرشيفاعلن معنا





الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

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

العودة منتدى ابن الخليج> منتديات تعليمية> دروس برمجة مواقع

{ مِنَ الْمُؤْمِنِينَ رِجَالٌ صَدَقُوا مَا عَاهَدُوا اللَّهَ عَلَيْهِ فَمِنْهُم مَّن قَضَى نَحْبَهُ وَمِنْهُم مَّن يَنتَظِرُ وَمَا بَدَّلُوا تَبْدِيلاً } الأحزاب23

حادثة الإفك - تفسير ابن كثير وشرح عثمان الخميس



صوتي شرح الشيخ عثمان الخميس لمختصر منهاج السنة النبوية لشيخ الإسلام ابن تيمية كتاب ألفه للرد على الإمامية وهو أشهر كتاب في الرد على الشيعة

رد
 
LinkBackأدوات الموضوعطرق مشاهدة الموضوع
قديم 06-10-2009, 01:48 صباحاً   #1 (permalink)
عضــو
 
الصورة الرمزية MrLs
 
تاريخ التسجيل: Dec 2007
المشاركات: 30
معدل تقييم المستوى: 22MrLs يستاهل ترحيبMrLs يستاهل ترحيب
افتراضيالجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

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

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

تعلم CSS عملية ممتعة، وأنت تقرأ هذا الدرس تذكر أ ن تأخذ وقتاً لتجري بعض التجارب وترى ماذا تعلمت من كل درس.

استخدام CSS يتطلب معرفة أساسيات HTML،إذا لم تكن تعرف HTML فيمكنك أن تبدأ بدرس HTML قبل أن تتعلم CSS.

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

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

مثلاً مايكروسوفت ويندوز يأتي مع برنامج يسمى Notepad (المفكرة)، وهو غالباً ما يوضع في قسم Accessories (أدوات) الذي تجده في قسم Programs (برامج)، وبإمكانك استخدام برامج مماثلة في أنظمة التشغيل الأخرى مثل Pico في لينكس وSimple text لنظام ماك.

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

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

متصفح ومحرر نصي، هذا كل ما تحتاجه.

لنبدأ!



من مواضيع MrLs في المنتدى
__________________
مقبل سوركتي
Prgrammer
Delphi , Html , CSS , Php and Action-Script 2 & 3
Designer
CINEMA 4D , Adobe Photoshop , Adobe Flash , Corel Draw , PhotoDex ProShow
MrLs غير متواجد حالياً   رد مع اقتباس
قديم 06-10-2009, 01:49 صباحاً   #2 (permalink)
عضــو
 
الصورة الرمزية MrLs
 
تاريخ التسجيل: Dec 2007
المشاركات: 30
معدل تقييم المستوى: 22MrLs يستاهل ترحيبMrLs يستاهل ترحيب
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

درس 1: ما هي تقنية CSS؟
لعلك سمعت عن CSS من قبل لكن لا تعرف حقاً ما هي، في هذا الدرس ستتعلم المزيد عن CSS وماذا يمكن لهذه التقنية أن تقدم لك.

CSS هي اختصار لي Cascading Style Sheets.

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

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

بعد أجزاء قليلة في هذا الدرس ستتمكن من إنشاء ملف CSS الأول لكي تعطي موقعك مظهراً رائعاً.

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

حسناً، قد يبدو هذا مربكاً لكن أكمل القراءة وستفهم ما قرأته قريباً.

في الماضي القريب اخترع رجل اسمه تيم بيرنرز لي شبكة الويب، في ذلك الوقت كانت HTML تستخدم فقط لإضافة هيكلية للنص، الكاتب يمكنه أن يقوم بإضافة معنى للنص بأن يقول مثلاً "هذا عنوان" أو "هذه فقرة" ويستخدم وسوم HTML مثل <h1> و<p>.

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

أدى ذلك إلى أن تستخدم وسوم هيكلية مثل <table> بشكل خاطئ، حيث استخدام هذا الوسم لتحديد تصميم الصفحة بدلاً من إضافة معنى للنص، والكثير من الوسوم التي اخترعت مثل <blink> كانت فقط مدعومة من قبل متصفح واحد، أصبحت جملة "ستحتاج إلى المتصفح الفلاني لرؤية هذه الصفحة" مألوفة في مواقع الشبكة.

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

كيف ستفيدني CSS؟
تعتبر CSS ثورة في عالم تصميم المواقع، وفوائدها الأساسية هي:

التحكم بالتصميم من خلال ملف واحد.
إمكانية أكبر وأدق للتحكم بتفاصيل التصميم.
إنشاء تصاميم خاصة لمختلف وسائل عرض الموقع مثل الشاشات والطابعات والهواتف النقالة .. إلخ
العديد من التقنيات والأساليب المتقدمة في التحكم بالتصميم .



من مواضيع MrLs في المنتدى
__________________
مقبل سوركتي
Prgrammer
Delphi , Html , CSS , Php and Action-Script 2 & 3
Designer
CINEMA 4D , Adobe Photoshop , Adobe Flash , Corel Draw , PhotoDex ProShow
MrLs غير متواجد حالياً   رد مع اقتباس
قديم 06-10-2009, 01:54 صباحاً   #3 (permalink)
عضــو
 
الصورة الرمزية MrLs
 
تاريخ التسجيل: Dec 2007
المشاركات: 30
معدل تقييم المستوى: 22MrLs يستاهل ترحيبMrLs يستاهل ترحيب
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

درس 2: كيف تعمل تقنية CSS؟
في هذا الدرس ستتعلم كيف تقوم بإنشاء ملف التصميم الأول، ستتعلم أساسيات CSS وما هي الوسوم اللازمة لتستخدم CSS في وثيقة HTML.

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

القواعد الأساسية لكتابة CSS
لنقل أننا نريد اللون الأحمر ليكون خلفية للصفحة:

باستخدام HTML يمكننا أن ننجز ذلك بهذه الطريقة:

كود:
<body bgcolor="#FF0000">
مع CSS يمكن تحقيق نفس النتيجة بكتابة هذه الأوامر:

كود:
body {background-color: #FF0000;}
كما تلاحظ، أوامر CSS تتشابه كثيراً مع HTML، والمثال أعلاه يوضح لك الأسلوب الأساسي لكتابة CSS:

الخامس, الجزء, الجزء الخامس من دورة php من الصفر حتي الإحتراف css, السفر, الإحتراف, css, يبي, دورة, php
لكن أين نضع أوامر CSS؟ هذا هو ما سنتعلمه الآن.

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

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

كود:
<html>
  <head>
    <title>Example<title>
  </head>
  <body style="background-color: #FF0000;">
    <p>This is a red page</p>
  </body>
</html>
الطريقة 2: ضمت ملف HTML باستخدام وسم style
هذه طريقة مختلفة بأنها تستخدم وسم <style>، وهذا مثال لكيفية تطبيق هذه الطريقة:

كود:
<html>
  <head>
    <title>Example<title>
    <style type="text/css">
      body {background-color: #FF0000;}
    </style>
  </head>
  <body>
    <p>This is a red page</p>
  </body>
</html>
الطريقة 3: ملف خارجي
هذه هي الطريقة الأفضل، وهي أن تقوم بوضع رابط لملف خارجي يحوي أوامر CSS، خلال هذا الدرس سنقوم باستخدام هذه الطريقة لجميع الأمثلة.

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

مثلاً، لنقل أن ملف التصميم لديك اسمه style.css وهو موجود في مجلد اسمه style، هذه الحالة يمكن توضيحها أكثر من خلال هذا الرسم

الخامس, الجزء, الجزء الخامس من دورة php من الصفر حتي الإحتراف css, السفر, الإحتراف, css, يبي, دورة, php

المهم هنا هو إنشاء رابط بين ملف HTML وملف التصميم (style.css)، مثل هذا الرابط يمكن إنشاءه من خلال سطر واحد في HTML:

كود:
<link rel="stylesheet" type="text/css" href="style/style.css" />
لاحظ كيف أن مسار الملف حددناه باستخدام خاصية href.

هذا الأمر يجب أن يوضع في قسم رأس الصفحة، أي بين وسمي <head> و</head> كما في المثال الآتي:

كود:
<html>
  <head>
    <title>My document</title>
    <link rel="stylesheet" type="text/css" href="style/style.css" />
  </head>
  <body>
هذا الرابط يخبر المتصفح بأن عليه استخدام التصميم من ملف CSS عندما يقوم بعرض ملف HTML.
الجميل هنا أنك تستطيع ربط العديد من ملفات HTML بملف تصميم واحد، بمعنى آخر يمكن لملف تصميم واحد أن يستخدم للتحكم بتصميم العديد من ملفات HTML.

الخامس, الجزء, الجزء الخامس من دورة php من الصفر حتي الإحتراف css, السفر, الإحتراف, css, يبي, دورة, php

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

لنتدرب على ما تعلمناه حتى الآن.

جرب بنفسك
قم بتشغيل برنامج المفكرة (Notepad) أو أي محرر نصي، وقم بإنشاء ملفين، أحدهما HTML والآخر CSS وضع فيهما هذه المحتويات:

default.htm
كود:
<html>
  <head>
    <title>My document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <h1>My first stylesheet</h1>
  </body>
</html>
style.css
كود:
body {
  background-color: #FF0000;
}
الآن قم بوضع الملفين في نفس المجلد، تذكر أن تحفظ الملفين باستخدام اللاحقة الصحيحة لكل ملف.

قم بفتح ملف default.htmفي متصفحك وانظر إلى الصفحة وهي تحوي اللون الأحمر كخلفية، تهانينا! لقد قمت بإنشاء ملف التصميم الأول!

تحياتي



من مواضيع MrLs في المنتدى
__________________
مقبل سوركتي
Prgrammer
Delphi , Html , CSS , Php and Action-Script 2 & 3
Designer
CINEMA 4D , Adobe Photoshop , Adobe Flash , Corel Draw , PhotoDex ProShow
MrLs غير متواجد حالياً   رد مع اقتباس
قديم 06-10-2009, 03:29 صباحاً   #4 (permalink)
:: مراقب ::
:: قسم اللغة العربية ::
 
الصورة الرمزية بكري البكري
 
تاريخ التسجيل: Jul 2007
المشاركات: 2,349
معدل تقييم المستوى: 53573بكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيطبكري البكري نشيط
إرسال رسالة عبر مراسل MSN إلى بكري البكري
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

مجهود عظيم تنفع به اخوانك ويثيبك الله أجراً
أشكرك حد الشكر



من مواضيع بكري البكري في المنتدى
__________________
توضيح هام
بكري البكري غير متواجد حالياً   رد مع اقتباس
قديم 08-01-2009, 05:35 مساءً   #5 (permalink)
عضو مستمر
 
الصورة الرمزية aminenima
 
تاريخ التسجيل: Jul 2009
الدولة: مدينة البرمجة
المشاركات: 54
معدل تقييم المستوى: 16aminenima يستاهل ترحيب
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

بارك الله فيك على الموضوع الممتاز



من مواضيع aminenima في المنتدى
__________________
aminenima غير متواجد حالياً   رد مع اقتباس
قديم 08-01-2009, 05:36 مساءً   #6 (permalink)
عضو مستمر
 
الصورة الرمزية aminenima
 
تاريخ التسجيل: Jul 2009
الدولة: مدينة البرمجة
المشاركات: 54
معدل تقييم المستوى: 16aminenima يستاهل ترحيب
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

بالتوفيق



من مواضيع aminenima في المنتدى
__________________
aminenima غير متواجد حالياً   رد مع اقتباس
قديم 08-22-2009, 08:19 صباحاً   #7 (permalink)
اسرة ابن الخليج
 
الصورة الرمزية محمد مراجع
 
تاريخ التسجيل: Aug 2007
الدولة: -: EgypT-AleX :-
العمر: 22
المشاركات: 982
معدل تقييم المستوى: 9998محمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيطمحمد مراجع نشيط
إرسال رسالة عبر مراسل MSN إلى محمد مراجعإرسال رسالة عبر مراسل Yahoo إلى محمد مراجع
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

عمل ممتاز جداً



من مواضيع محمد مراجع في المنتدى
__________________




محمد مراجع غير متواجد حالياً   رد مع اقتباس
قديم 10-14-2009, 03:17 مساءً   #8 (permalink)
عضو جديد
 
تاريخ التسجيل: Dec 2006
المشاركات: 1
معدل تقييم المستوى: 16arijshair يستاهل ترحيب
افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

بالتوفيق اخي



من مواضيع arijshair في المنتدى
    arijshair غير متواجد حالياً   رد مع اقتباس
    قديم 10-15-2009, 04:35 مساءً   #9 (permalink)
    عضو فعــال
     
    الصورة الرمزية opreator
     
    تاريخ التسجيل: Aug 2007
    المشاركات: 190
    معدل تقييم المستوى: 34opreator يستاهل ترحيب
    افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

    مجهود مميز وشرح وافى

    واتمنى من الله ان يستفيد جميع الاعضاء والزوار من هذا الشرح



    من مواضيع opreator في المنتدى
    __________________
    أسم الشركـــه : شركات Opreator للاستضافة والبرمجيات
    صاحب ومدير الشركه : دكتــور / كمال محمد محمد
    دكتوراة فى علوم البرمجيات من جامعة حسين بن طلال بمعان بالاردن
    داء الشركـــه : استضافة - تصميمات - دردشة - ريسلرات -
    سيرفرات - برمجيات
    www.straic.com
    www.arbseo.co.cc

    opreator غير متواجد حالياً   رد مع اقتباس
    قديم 10-16-2009, 03:38 صباحاً   #10 (permalink)
    Gulfson.com

     
    الصورة الرمزية كرم العربي
     
    تاريخ التسجيل: Apr 2006
    الدولة: Egypt
    المشاركات: 15,092
    معدل تقييم المستوى: 53كرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيطكرم العربي نشيط
    إرسال رسالة عبر مراسل MSN إلى كرم العربي
    افتراضيرد: الجزء الخامس من دورة php من الصفر حتي الإحتراف CSS

    بيض الله وجهك ومشكور على جهدك MrLs



    من مواضيع كرم العربي في المنتدى
    __________________
    Im Back

    كرم العربي غير متواجد حالياً   رد مع اقتباس
    رد

    العبارات الدلالية
    الخامس, الجزء, الجزء الخامس من دورة php من الصفر حتي الإحتراف css, السفر, الإحتراف, css, يبي, دورة, php


    أدوات الموضوع
    طرق مشاهدة الموضوع

    تعليمات المشاركة
    لا تستطيع إضافة مواضيع جديدة
    لا تستطيع الرد على المواضيع
    لا تستطيع إرفاق ملفات
    لا تستطيع تعديل مشاركاتك

    BB code is متاحة
    كود [IMG]متاحة
    كود HTML معطلة
    Trackbacks are متاحة
    Pingbacks are متاحة
    Refbacks are متاحة

    المواضيع المتشابهه
    الموضوعكاتب الموضوعالمنتدىمشاركاتآخر مشاركة
    الجزء الثاني من دورة php من الصفر حتي الإحتراف htmlMrLsدروس برمجة مواقع601-21-2010 09:27 صباحاً
    الجزء الرابع من دورة php من الصفر حتي الإحتراف htmlMrLsدروس برمجة مواقع206-10-2009 01:46 صباحاً
    الجزء الثالث من دورة php من الصفر حتي الإحتراف htmlMrLsدروس برمجة مواقع205-17-2009 04:27 صباحاً
    دورة php من الصفر حتي الإحترافMrLsدروس برمجة مواقع905-17-2009 04:11 صباحاً
    حصريا دورة كاملة لكيفية تصميم ستايل منتدى من البداية إلى الإحترافnassim mohamedقسم ستايلات vBulletin512-23-2008 03:45 مساءً


    منتديات شبكة ابن الخليج

    ثقافة اوروبية قصائد حب ابن منظور كتاب عرب جرائم العاب رياضة اناشيد روحانية فساتين صيف و ربيع 2008 موضة 2007 Pediatery سلاسل أقراط مرق باميه صور ديكور فساتين صيف و ربيع 2008 برامج حماية برامج كمبيوتر طلبات المساعدة وتبادل الخبرات العاب البلاي ستشين العاب كرة قدم full الدريم كاست مستودع الاسلحة ترافيان فرش حيوانات صور افلام سيمنس فساتين صيف و ربيع 2008 دروس مبادئ الطباعة باستخدام لوحة المفاتيح دروس فوتوبرش دروس فوتوشوب للمبتدئين دروس ايميج ريدي Adobe ImageReadyدروس افتر افكت Adobe After Effect برنامج adobe premiere دروس الستريتر لايت ويف دروس ابعاد ثلاثية دروس سويتش مبدئة دروس JSP دروس بوربوينت دروس هاردوير لينكس وندوز WINDOWS دروس Visual Basic فساتين صيف و ربيع 2008 هاك جديد هاكات 364 اضافات قسم ستايلات vBulletinمجلة المنتديات mkPortalقسم ستايلات مجلة المنتديات mkPortal Stylesسكربتات وادوات تطوير المواقعمشاكل وحلول الـ مواقعتبادل الاعلانات آراءفوتوشوبCinema 4Dخامات فوتوشوبفرش فوتوشوباكشن فوتوشوباشكال فوتوشوبدليل مواقعاكتشف شخصيتكاخبارموسوعة الأطفالبوربوينتtorrentاختصار الروابطPageRankتوقيع لاميلكصانع القليترGlitterبرامج


    الساعة تعتمد على توقيت جرينتش +3. الساعة الآن 06:22 مساءً.
    Search Engine Optimization by vBSEO 3.1.0

    Valid XHTML 1.0 Transitional Valid CSS!Powered by vBulletin® Version 3.7.1,
    Copyright ©2000 - 2012, Jelsoft Enterprises Ltd
    شبكة و منتديات حبيبى نت  |  شبكة العربي  |   Feeds:   XML   JS   RSS   RSS Feed