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

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

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

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

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

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

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

^?View Code XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
>
http-equiv="Content-Type" content="text/html; charset=utf-8" />
>كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.>
>

>
>الصفحة الرئيسية>
>سنتعلم لغة CSS صفحات الأنماط الانسيابية إن شاء الله تعالى مع وليدوف.
هذا الدرس يشرح كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.>
>
>

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

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

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

^?View Code XML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
>
http-equiv="Content-Type" content="text/html; charset=utf-8" />
>كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.>
href="style.css" rel="stylesheet" type="text/css" />
>

>
>الصفحة الرئيسية>
>سنتعلم لغة CSS صفحات الأنماط الانسيابية إن شاء الله تعالى مع وليدوف.
هذا الدرس يشرح كيف تقوم بربط صفحات HTML بصفحة CSS بواسطة المحرر Dreamweaver.>
>
>

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

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

^?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 كما هو موضح بالصورة :

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

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

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

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

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

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

منتديات طلاب النيلين مركز الحرية
affraid

» شرح: عمل serverلشبكه محليه بواسطة windows server 2003

لمعرفة نتيجة جامعة النيلين حاسوب الفرقة الثانية تقانة معلومات للعام 2011 _2012اضغط هنا

للدخول للموقع الحيمو لتصميم المواقع اضغط هنا

للدخول للدردشة داخل المنتدى قم بتسجيل اذا لم تكن مسجل من بعد واذا كنت مسجل يرجى منك تسجيل الدخول ومن ثم الضغط على هذا الرابط وشكرا

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

لمشاهدة كل مواضيع المنتدى يرجى الضغط هنا

للتعلم اللغة الانجليزية والتحدث بطلاقة لكل عربى وعربية يرجى الضغط على هذا الرابط

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

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