تخطيط موقع على شبكة الإنترنت
تحتاج أولاً إلى تخطيط موقع على شبكة الإنترنت. سيأخذ هذا البرنامج التعليمي الشكل التالي كمثال لإنشاء موقع على شبكة الإنترنت.
يظهر
التخطيط الأساسيللشكل 1
أدناه:
الشكل 2
بشكل رئيسي من خمسة أجزاء:
1. شريط التنقل الرئيسي، مع تأثيرات الزر.
العرض: 760 بكسل الارتفاع: 50 بكسل
2. الرأس: تحتوي أيقونة رأس موقع الويب على شعار الموقع واسمه.
العرض: 760 بكسل الارتفاع: 150 بكسل
3. المحتوى المحتوى الرئيسي للموقع.
العرض: 480 بكسل الارتفاع: يتغير حسب المحتوى
4. حدود الشريط الجانبي، بعض المعلومات الإضافية.
العرض: 280 بكسل الارتفاع: يتغير حسب
5. يحتوي العمود السفلي لموقع التذييل على معلومات حقوق الطبع والنشر وما إلى ذلك.
العرض: 760 بكسل الارتفاع: 66 بكسل
1. قم بإنشاء قوالب HTML وأدلة الملفات، وما إلى ذلك.
الرمز هو كما يلي:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<أتش تي أم أل>
<الرأس>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>اسم الشركة - اسم الصفحة</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name = "description" content = "Description" />
<meta name = "keywords" content = "الكلمات الرئيسية" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</الرأس>
<الجسم>
</الجسم>
</html>
احفظه كـ Index.html، وقم بإنشاء مجلدات CSS وصور. هيكل الموقع هو كما يلي:
الشكل 3
2. قم بإنشاء مربع كبير لموقع الويب :
قم بإنشاء مربع بعرض 760 بكسل يحتوي على جميع عناصر موقع الويب.
اكتب <div id="page-container"> بين <body> و </body> في ملف html
مرحبا بالعالم.
</div>
قم بإنشاء ملف CSS، وقم بتسميته master.css، واحفظه في المجلد /css/. يكتب:
#حاوية الصفحة {
العرض: 760 بكسل؛
الخلفية: أحمر؛
}
عرض المربع الذي يتم التحكم في معرفه هو حاوية الصفحة هو html هو 760 بكسل، والخلفية حمراء.
الشكل 4
الآن من أجل توسيط المربع، اكتب هامش: تلقائي؛، بحيث يكون ملف CSS هو:
#حاوية الصفحة {
العرض: 760 بكسل؛
الهامش: تلقائي؛
الخلفية: أحمر؛
}
يمكنك الآن أن ترى أن هناك فجوة بعرض 8 بكسل بين الجزء العلوي من المربع والمتصفح. ويرجع ذلك إلى الحشو والحدود الافتراضية للمتصفح. للقضاء على هذه الفجوة، تحتاج إلى الكتابة في ملف CSS:
أتش تي أم أل، الجسم {
الهامش: 0;
الحشو: 0؛
}
قسم الموقع إلى خمسة أقسام
1. ضع الأجزاء الخمسة المذكورة في "الخطوة 1" في مربعات واكتب في ملف html:
<div id="page-container">
<div id="main-nav">التنقل الرئيسي</div>
<div id="header">الرأس</div>
<div id="sidebar-a">الشريط الجانبي أ</div>
<div id="content">المحتوى</div>
<div id="footer">التذييل</div>
</div>
يتصرف كما يلي:
الشكل 5
2. من أجل التمييز بين الأجزاء الخمسة، نضع علامة على هذه الأجزاء الخمسة بألوان خلفية مختلفة ونكتبها في ملف CSS:
# التنقل الرئيسي {
الخلفية: أحمر؛
الارتفاع: 50 بكسل؛
}
#الرأس {
الخلفية: أزرق؛
الارتفاع: 150 بكسل؛
}
#الشريط الجانبي-أ {
الخلفية: أخضر داكن؛
}
#محتوى {
الخلفية: أخضر؛
}
#تذييل {
الخلفية: برتقالي؛
الارتفاع: 66 بكسل؛
}
الأداء كما يلي:
الشكل 6:
تخطيط صفحة الويب وعائم div، وما إلى ذلك.
1. عائم: أولاً، دع الحدود تطفو على يمين المحتوى الرئيسي. استخدم CSS للتحكم في العائمة.
#الشريط الجانبي-أ {
تعويم: حق؛
العرض: 280 بكسل؛
الخلفية: أخضر داكن؛
}
الأداء كما يلي:
الشكل 7
2. اكتب بعض النص في مربع المحتوى الرئيسي. اكتب في ملف html:
<div معرف = "المحتوى">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Nullam gravida enim ut risus.
Praesent sapien Purus، ultrices a، varius ac، suscipit ut، enim maecenas in lectus.
Donec in sapien in nibh rutrum gravida Sed ut mauris
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede Nam augu lorem، semper at، porta eget، placerat eget،.
Purus Suspendisse mattis nunc ligula في هاك الموطن لوحة القول.
</div>
الأداء على النحو التالي:
الشكل 8
ولكن يمكنك أن ترى أن مربع المحتوى الرئيسي يشغل عرض حاوية الصفحة بالكامل، ونحن بحاجة إلى ضبط الحد الأيمن لـ #content على 280 بكسل. حتى لا تتعارض مع الحدود.
كود CSS هو كما يلي:
#محتوى {
الهامش الأيمن: 280 بكسل؛
الخلفية: أخضر؛
}
وفي الوقت نفسه، اكتب بعض النص في الحدود. اكتب في ملف html:
<div معرف = "الشريط الجانبي">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit Nullam gravida enim ut risus.
Praesent sapien Purus، ultrices a، varius ac، suscipit ut، enim maecenas in lectus.
Donec in sapien in nibh rutrum gravida Sed ut mauris
euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede Nam augu lorem، semper at، porta eget، placerat eget،.
Purus Suspendisse mattis nunc ligula في هاك الموطن لوحة القول.
</div>
يتصرف كما يلي:
الشكل 9:
ليس هذا ما نريده، فقد أصبح الإطار السفلي للموقع أسفل الحدود. وذلك لأننا نطفو الحد على اليمين، وبما أنه عائم، فيمكن أن نفهم أنه موجود على طبقة أخرى فوق الصندوق بأكمله. ولذلك، تتم محاذاة المربع السفلي ومربع المحتوى.
لذلك نكتب في CSS:
#تذييل {
واضح: كلاهما؛
الخلفية: برتقالي؛
الارتفاع: 66 بكسل؛
}
الأداء كما يلي:
الشكل 10
تخطيط وعرض الهياكل الإضافية خارج الإطار الرئيسي لصفحة الويب. عرض (تخطيط) الهياكل الإضافية خارج الإطار الرئيسي لصفحة الويب، بما في ذلك ما يلي:
1. شريط التنقل الرئيسي؛
2. العنوان، بما في ذلك اسم موقع الويب وعنوان المحتوى؛
3. المحتوى؛
4. معلومات التذييل، بما في ذلك حقوق النشر والشهادة وشريط التنقل الفرعي (اختياري).
عند إضافة هذه الهياكل، حتى لا يتم تدمير الإطار الأصلي، نحتاج إلى إضافة علامة "body" (TAG) لملف CSS:
.مختفي {
العرض: لا شيء؛
}
".hidden" هي الفئة التي أضفناها. يمكن لهذه الفئة عدم عرض أي عنصر في الصفحة ينتمي إلى الفئة المخفية. سيتم استخدام هذه الأشياء لاحقًا، لذا انسَ الأمر الآن.
الآن نضيف العنوان:
عد أولاً إلى كود HTML، <h1> إلى <h6> هي أكواد عناوين html شائعة الاستخدام. على سبيل المثال، نستخدم بشكل عام <h1>اسم موقع الويب</h1>، و<h2>العنوان الفرعي لموقع الويب</h2>، و<h3>العنوان الرئيسي للمحتوى</h3>، وما إلى ذلك. نضيف ما يلي إلى طبقة الرأس (Div) لملف html:
<div معرف = "رأس">
<h1>تصاميم تنوير</h1>
</div>
قم بتحديث الصفحة ويمكنك رؤية العنوان الضخم والمساحة البيضاء حول العنوان، ويرجع ذلك إلى الحجم والهامش الافتراضيين للعلامة <h1>> لإزالة هذه المسافات البيضاء أولاً، تحتاج إلى إضافة:
ح1 {
الهامش: 0;
الحشو: 0؛
}
التالي هو شريط التنقل :
إن كود CSS الذي يتحكم في أداء شريط التنقل معقد نسبيًا، وسنقدمه بالتفصيل في الخطوة التاسعة أو العاشرة. أضف الآن رمز التنقل إلى ملف html:
<div معرف = "التنقل الرئيسي">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > حول</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > الخدمات</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > المحفظة</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > اتصل بنا</a></li>
</ul>
</div>
(ملاحظة: البرنامج التعليمي الأصلي يستخدم dl وdt، ويستخدم jorux علامتي ul وli الأكثر استخدامًا هنا)
في الوقت الحالي، أداء شريط التنقل ضعيف نسبيًا، ولكن سيتم تقديم أدائه الخاص في البرامج التعليمية المستقبلية، لذا من الضروري إخفاء شريط التنقل مؤقتًا، لذلك أضفت:
<div معرف = "التنقل الرئيسي">
<dl class="hidden">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > حول</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > الخدمات</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > المحفظة</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > اتصل بنا</a></dt>
</دل>
</div>