تكلمنا سابقا عن الوسم div وتحدثنا انه يستخدم فى تصميم صفحة الويب لأنه يسهل التحكم فيه بواسطة css
فى هذه المشاركة سنوضح كيفية عمل تصميم بسيط لصفحة الويب
سنقوم أولا: بتقسيم صفحة الويب إلى عدة أقسام رئيسية حتى يسهل التعامل معها هذه الأقسام هى:-
فى هذه المشاركة سنوضح كيفية عمل تصميم بسيط لصفحة الويب
سنقوم أولا: بتقسيم صفحة الويب إلى عدة أقسام رئيسية حتى يسهل التعامل معها هذه الأقسام هى:-
- header
- navigation
- section
- footer
وسنقوم بعمل div لكل قسم من هذه الاقسام حتى نستطيع تنسيقه بcss
مثال:
<html>
<head>
<style>
</style>
</head>
<body >
<div id="header">
Header
</div>
<div id="nav">
navigation
</div>
<div id="section">
section
</div>
<div id="footer">
footer
</div>
</body>
</html>
فيظهر ناتج المثال بالشكل الطبيعى نظرا لعدم استخدام التنسيق حتى الأن
ثم نقوم بتنسيق هذه الاقسام من خلال css
أولا: نقوم بتنسيق عنصر Header وذلك كالتالي:-
#header{
font-size:36px;
text-align:center;
color:#Fff;
background:#333;
padding:20px;
}
نلاحظ أنه قد تطبيق التنسيق على عنصر الهيدر وأصبح شكل الصفحة كالتالي:-
ثم نقوم بتنسيق عنصر navigation وذلك كالتالي:-
}
#nav{
background:#eee;
width:300px;
height:150px;
float:left;
padding:10px;
line-height:30px;
}
ونقوم بكتابة العناصر المختلفة فى قسم nav وكذلك نغير عنوان الصفحة بحيث يكون العنوان المناسب للمحتوى
فتظهر الصفحة كما يلي:-
والأن نقوم بضبط عناصر القوائم وتنسيقها .
المشاركات
ليست هناك تعليقات:
إرسال تعليق