10- ملئ محتويات الكتل div | صورة الشعار | صور أزرارالمواقع الاجتماعية | الشريط الأعلى والفرعي والجانبي | الفوتر | محتوى المقالات - #ExpressionWeb

 فهرس الدروس  ( Microsoft Expression Web )

 الدرس السابق (  Microsoft Web  )

في الدرس السابق قمنا بعمل الأقسام باستخدام الوسم الثنائي div بـ سمة الهوية التي تعرف كل قسم.

نقوم هنا بمليء الأقسام بالمحتويات من الصور :

لاحظ أننا سنحتاج وبشدة وسم التعداد غير الرقمي لأنه يُساعد على صف المعلومات ..

الأدوات : 

أولا علينا نجد من الانترنت صور لتحميل وجعلها في ملف والصور التي سنحاجها هي :

1- صورة شعار الموقع مثلا بعض 200 و طول 75 بكسل

2- صور المواقع الإجتماعية سأختار 3 (يوتيوب , تويتر, فيسبوك )

هذه الصورة التي استخدمتها, يمكنكم حفظها والتطبيق بها : 

طريقة العمل: 

1- نضيف الشعار داخل قسم logo :

<div id="wrapper">  
              <div id="top">    
              <div id="logo">    <img src="../ويب/Logo.jpg" />     </div>

              <div id="social-media">    </div>
              </div>
<div id="topnav">    </div>
<div id="banner">    </div>
<div id="subbanner">    </div>
<div id="content">    </div>
<div id="rightside">    </div>
<div id="footer">   
</div>

لو ضغطت على مشهد design فستكون النتيجة بهذا الشكل: 

 لا تقلق حول شكل الصيغة , فنحن نطبق الأساسيات أولا. 

2- نصيف أزرار المواقع الاجتماعية داخل social-media مع جدنا على المواقع الاجتماعية : 

بما أننا نطبق الاساسيات ففي البداية يجب أن لا نقلق من شكل ظهورها , فالمهم الآن هو إضافة هذه الأزرار في كتلتها الخاصة. 

- على الأرجح أننا سنحتاج إلى css للتنسيق ولكن دعك من هذا الآن ..

سنحتاج إلى وسم قائمة غير مرتبة وهو ul وللعناصر بداخلة il والسبب أننا سندرج أزرار المواقع الاجتماعية على شكل قائمة. 

وبما أنها 3 أزرار فسيكون كود القائمة بهذا الشكل : 

  <ul> 
<li>   </li>
<li>   </li>
<li>   </li>
 </ul>

في كل وسم il سنضيف صورة خاصة بالموقع الاجتماعي المعني وهذه الصورة هي (الزر) .

ليكون شكل الكود هكذا:

  <ul> 
<li> <img src="../ويب/مواقع اجتماعية/facebook.jpg" />   </li>
<li> <img src="../ويب/مواقع اجتماعية/Youtube.jpg" />  </li>
<li> <img src="../ويب/مواقع اجتماعية/twitter.jpg" /> </li>
<li>   </li>
 </ul>

سأكتب تحت قائمة الازرار اتصل بنا على الرقم 0000000

 لذا سأستخدم وسم p 

ليكون بهذا الشكل :

  <ul> 
<li> <img src="../ويب/مواقع اجتماعية/facebook.jpg" />   </li>
<li> <img src="../ويب/مواقع اجتماعية/Youtube.jpg" />  </li>
<li> <img src="../ويب/مواقع اجتماعية/twitter.jpg" /> </li>

<p> اتصل بنا على الرقم 000000 </p>
<li>   </li>
 </ul>

سأحول على مشهد التصميم لأرى النتيجة. ستكون بهذا الشكل : 

 3- سنملئ كتلة الـ شريط العلوي top navgation : 

سنحتاج أيضا إلى وسم القائمة غير الرقمية وبما أن الشريط يحتوي على روابط نصية فإننا سنحتاج إلى وسم a و السمة الجالبة للرابط href سواء ربطناه بصفحة من صفحات الموقع أو رابط خارجي

الروابط النصية هي ( أهلا , عن الموقع , المنتجات , الخدمات , اتصل ) 

سيكون الكود هكذا : 

<div id="topnav">  
<ul> 
<li><a href="index.html">  أهلا وسهلا </a>   </li>
<li><a href="about.html">  عن موقعنا </a>   </li>
<li><a href="products.html">  المنتجات </a>   </li>
<li><a href="services.html">  الخدمات </a>   </li>
<li><a href="contact.html"> اتصل بنا  </a>   </li>

 </ul>

أما إذا حولت على مشهد التصميم فسنجده أصبح هكذا : 

 4- سنملئ كتلة العنوان banner :

سنحتاج إلى صورة , الصورة التي لدي هي بعرض 700 في 200 طول إنش. 

الكود بعد إضافة الصورة هو : 

<div id="banner">
<li> <img src="../ويب/صورة العنوان/Banner.jpg" />   </li>
   </div>

النتيجة بعد إضافة صورة لـ كتلة البانر banner :

5- سنملأ كتلة الـ العنوان الفرعي: 

كل ما احتاجه هنا هو فقط كتابة نص. 

سأكتب النص بداخل وسم الترويسة الثنائي وهو h2 أو إن شئت h3

الكود : 

<div id="subbanner">  
<h3>  العلم نـور وفي الأجواء منتشر والفخر بالعلم لا بالمال نفتخـرُ   </h3>
 </div>

شكل النص في مشهد التصميم : 

6- سنملأ كتلة المحتويات content وهي عادة تخص المقالات والمواضيع والصور  :

للعنوان سأحتاج الوسم h2

للمقال أو أي نص سأحتاج الوسم p

للصورة سأحتاج الوسم  img

لن نستخدم وسم التعداد كما استخدمناه في أزرار المواقع الاجتماعية. 

سأضيف نصا أخر له عنوان : أيضا سأستخدم الوسمين السابقين h2 و  p 

كود كتلة المحتويات هكذا : 

<div id="content"> 
<h2>  فوائد القراءة </h2>
<p>  إن القراءة ترفع الجهل, وتطرد الحزن والهم , وتنور العقل, وتُكسب القارئ التجارب.</p>

<img src="book%201.jpg" />
<img src="book%202.jpg" />
<img src="book%203.jpg" />

<h2> من أقوال الدكتور سوس عن القراءة  </h2>
<p>  كلما قرأت أكثر كلما عرفت أشياء أكثر،كلما تعلمت أكثر كلما حققت إنجازات أكثر </p>
  </div>

بعد  التحويل إلى مشهد التصميم : 

7- سنملأ كتلة الشريط الأيمن الجانبي rightsidebar : 

عادة في المواقع تجد في الشريط الجانبي كالندر (التقويم ) , آخر المقالات, حكم.. الخ. 

سنستخدم وسم ترويسة كما فعلنا وهو h2 , وسم نص p , ووسم صورة img

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

شكل الكود : 

<div id="rightside"> 
<h2 class="auto-style1">  حكمة اليوم </h2>
<p> العلم نور والجهل ظلام </p>
<img src="صورة%20تقويم.jpg" />

  </div>

بعد التحويل إلى مشهد التصميم : 

8- وضع نص في قسم الأسفل من الصفحة footer: 

 غالبا يُكتب في الـ footer حقوق الموقع كتاريخ الإنشاء واسمه ..الخ

رمز كتابة الحقوق هو دائرة بداخلها حرف الـ c والكود الخاص به هو

 علامة حرف الواو ثم كلمة copy ثم فاصلة منقوطة

&copy;

 سيكون الكود هكذا :

<div id="footer">   
<p>&copy; copyright 2016  </p>

</div>

الشكل بعد التحويل إلى مشهد التصميم : 

كل ما سبق هو طريقة سليمة نموذجية لبناء الموقع, حيث تساعد محركات البحث وقوقل على إيجاد موقعك ..

لكن لحظة .. نسينا أن نربط أزرار المواقع الاجتماعية بروابط..

الحل هو أن نضع وسم الصورة داخل وسم a الخاص بالروابط مع سمته href

سيكون كود أحد الأزرار هكذا :

<li> <a href="https://twitter.com/millionmagazine">  

         <img src="images/twitter.jpg" />  

         </a> 

</li>

 حيث حصرت كود صورة تويتر بداخل كود الرابط a