تصميم صفحة ويب المفكرة التي تم إنشاؤها باستخدام CSS

01 من 10

قم بإنشاء ورقة أنماط CSS

بنفس الطريقة التي أنشأنا بها ملف نصي منفصل لـ HTML ، ستقوم بإنشاء ملف نصي لـ CSS. إذا كنت بحاجة إلى عناصر مرئية لهذه العملية ، فالرجاء الاطلاع على البرنامج التعليمي الأول. فيما يلي خطوات إنشاء ورقة أنماط CSS في Notepad:

1. اختر File> New in Notepad للحصول على نافذة فارغة
2. احفظ الملف بتنسيق CSS بالنقر فوق ملف <حفظ باسم ...
3. انتقل إلى مجلد my_website على محرك الأقراص الثابت الخاص بك
4. تغيير "حفظ بنوع:" إلى "جميع الملفات"
5. قم بتسمية الملف "styles.css" (اترك علامات الاقتباس) وانقر فوق حفظ

02 من 10

اربط ورقة أنماط CSS بـ HTML الخاص بك

بمجرد الحصول على ورقة أنماط لموقع الويب الخاص بك ، ستحتاج إلى إقرانها بصفحة الويب نفسها. للقيام بذلك ، استخدم علامة الرابط. ضع علامة الرابط التالية في أي مكان ضمن علامات في ملف pets.htm الخاص بك:

03 من 10

أصلح هوامش الصفحة

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

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

html ، الجسم {
الهامش: 0 بكسل ؛
الحشو: 0px؛
الحد: 0 بكسل ؛
left: 0px؛
العلوي: 0 بكسل ؛
}

04 من 10

تغيير الخط على الصفحة

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

عادة ، يمكنك تغيير الخط في الفقرات ، أو أحيانًا على المستند بأكمله نفسه. بالنسبة إلى هذا الموقع ، سنحدد الخط في مستوى الرأس والفقرة. أضف ما يلي إلى مستند styles.css الخاص بك:

p، li {
font: 1em Arial، Helvetica، sans-serif؛
}
h1 {
font: 2em Arial، Helvetica، sans-serif؛
}
h2 {
font: 1.5em Arial، Helvetica، sans-serif؛
}
h3 {
font: 1.25em Arial، Helvetica، sans-serif؛
}

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

05 من 10

جعل الروابط الخاصة بك أكثر إثارة للاهتمام

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

رابط {
font-family: Arial، Helvetica، sans-serif؛
اللون: # FF9900 ؛
زخرفة النص: تسطير؛
}
a: زار {
اللون: # FFCC66.
}
a: hover {
الخلفية: #FFFFCC؛
font-weight: bold؛
}

أقوم بإعداد ثلاثة أنماط للارتباط ، وهي: الرابط الافتراضي ، وهو: تمت زيارته عندما تمت زيارته ، وقمت بتغيير اللون ، و: hover. مع: hover لدي الرابط الحصول على لون الخلفية والذهاب جريئة للتأكيد على أنه رابط ليتم النقر.

06 من 10

تصميم قسم الملاحة

بما أننا نضع قسم التنقل (id = "nav") أولاً في HTML ، فلنقم أولاً بالأسلوب. نحتاج إلى الإشارة إلى مدى اتساعها ووضع هامش أعرض على الجانب الأيمن حتى لا يصدم النص الرئيسي ضدها. كما أضع حدودًا حوله.

أضف CSS التالي إلى مستند styles.css الخاص بك:

#nav {
العرض: 225 بكسل ؛
الهامش الأيمن: 15 بكسل ؛
border: medium solid # 000000؛
}
#nav li {
نمط القائمة: لا شيء ؛
}
.تذييل {
حجم الخط: .75em ؛
واضحة على حد سواء؛
العرض: 100 ٪.
محاذاة النص: مركز؛
}

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

07 من 10

وضع القسم الرئيسي

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

ضع ما يلي في مستند styles.css الخاص بك:

#الأساسية {
العرض: 800 بكسل ؛
العلوي: 0 بكسل ؛
الموقع: مطلقة
اليسار: 250 بكسل ؛
}

08 من 10

تصميم فقراتك

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

ضع ما يلي في مستند styles.css الخاص بك:

.السطر العلوي {
قمة الحدود: سميك صلب # FFCC00.
}

قررت أن أقوم به كصف دراسي يسمى "topline" بدلاً من مجرد تعريف جميع الفقرات بهذه الطريقة. بهذه الطريقة ، إذا قررت أنني أريد فقرة بدون خط أصفر أعلى ، يمكنني ببساطة ترك الفئة class = "topline" في علامة الفقرة ولن يكون لها الحد العلوي.

09 من 10

تصميم الصور

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

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

ضع ما يلي في مستند styles.css الخاص بك:

#main img {
تعويم: اليسار؛
الهامش الأيمن: 5 بكسل ؛
الهامش السفلي: 15 بكسل ؛
}
.ليس لها حدود {
الحد: 0 بكسل.
}

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

10 من 10

انظر الآن إلى الصفحة المكتملة

بمجرد حفظ CSS لديك ، يمكنك إعادة تحميل صفحة pets.htm في متصفح الويب الخاص بك. يجب أن تبدو صفحتك مشابهة للصفحة الموضحة في هذه الصورة ، مع محاذاة الصور والتوجيه الموضوعة بشكل صحيح على الجانب الأيسر من الصفحة.

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