أذكار: microsoft expression web

‏إظهار الرسائل ذات التسميات microsoft expression web. إظهار كافة الرسائل

2015-07-05

13- مرحلة تخطيط الموقع | CSS Box Mode

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

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

كنا في الدرس العاشر ExpressionWeb -
قد تحدثنا على الكتلة التغليفية wrapper والتي تضم كتل أخرى , كل الكتل هذه عبارة عن أقسام توسم بـ div

الوسم ككل كان كالتالي :

<body>
<div id="wrapper">
<div id="top">
<div id="logo"> </div>
<div id="social-media"> </div>
</div>

<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>
</div>

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

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

<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>

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

<div id="footer">
<p>© copyright 2016 </p>
</div>
</div>
</body>

سأربط به صفحة منسقة بورقة الأنماط css :

CSS Box Modelهناك ما يُسمى بـ

أي نموذج صندوق ورقة الأنماط

إن ما يخص هذا الصندوق هو 3 أمور , نلخصها في كلمات مفتاحية ألا وهي:

border الحدود
margin الهامش

الـ padding :

- يحيط بالكائن object والذي يمكن أن يكون كتلة div , نص p , رأس heading , أي عنصر من عناصر html

- الـ padding يقع بين الكائن والحدود border

- الـ padding يصيغ خلفية الكائن

الـ margin :

وهو أخير يحيط بالحدود .

وهو المنطقة العازلة buffer حول الكائن.

لنقل أن لدينا

5px padding

5px margin

1px border

لنطبق :

سنقوم بتنسيق ورقة css لنطبق على الكتلة التغليفية wrapper ,

سنستخدم صفة العرض width

#wrapper { width:900px; }

إذا استخدمت قيمة واحدة على الهامش فإنه سيتطبق على كافة الحدود الأربعة من أعلى وأسفل, يمين ويسار.

مثلا:

margin:20px;

أما لو استخدمت قيميتن , مثلا:

margin:20px 10px;

فإن سيطبق القيمة الأولى على الأعلى والاسفل والثانية على اليسار واليمين.

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

مثلا:

margin:20px 10px 5px 30px;

أما إن أردت تعيين هامش محدد فقط وترك البقية على الـ default , مثلا نريد تعيين اليسار فقط- أو تعيين كل على حده

سيكون هكذا :

margin-left:30px;
margin-top:20px;
margin-right:5px;
margin-bottom:20px;

ما سبق يمكن تطبيقه أيضا على التبطين (الحاشية) padding .

إذا لم ترد أي حاشية في ( الأعلى والأسفل) فستكون القيمة صفر مثال:

#wrapper { width:900px; margin:0px; }

أما إن أردت تعيين اليمين واليسار بنفس المسافة ليكون الوضع متوسط فسنستخدم الصفة auto بدون قيمة

يبدو ذلك cryptic أي (خفي, مشفر, مبهم )

مثال:

#wrapper { width:900px; margin:0px auto;}

لاحظ أن كلمة auto لم تُسبق بفاصلة منقوطة .

تلك الكلمة ستقوم أوتوماتيكيا بضبط الهامش الأيمن والأيسر بنفس المسافة

لتلوين البانر :

#banner { background-color:#FFFF99; }

إذا أردنا جعل البانر أكبر , سنطبق الحشو padding

مثلا سيكون الأعلى والأسفل 30 بكسل , واليمين واليسار صفر

سنجد أن البانر أصبح أكبر

هكذا :

#banner { background-color:#FFFF99; padding:30px 0px; }

أما لتعيين بقية الجهات فكما تعلمنا كعقارب الساعة :

مثال:

#banner { background-color:#FFFF99; padding:30px 0px 100px 0px; }

ولتطبيق الحدود سيكون هكذا:

#banner { background-color:#FFFF99; padding:30px 0px 100px 0px;

border:1px #FF6600 solid; }

الحشو هو الحافة بين الكائن والحدود .. (يعني من الداخل ) ..

لنجرب الهامش margin بنفس الكود لكن نغير مفردة padding بـ margin :

هكذا :

#banner { background-color:#FFFF99; margin:30px 0px 100px 0px;

border:1px #FF6600 solid; }

وعليه فالهامش سيكون المنطقة من الخارج ..

22:5

2015-06-23

12- الطرق الثلاث لـتنسيق ورقة css ثلاثة أنواع لـ reset | ثلاثة أنواع لـ selectors

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

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

شرحنا في الدرس السابق ما هي ورقة الانماط المتتالية css وأنها للنتسيق وهكذا..

نتعلم هنا ..

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

إذا الطرق هي:
( طريقة تعريف ورقة css وربطها بصفحة html )

16:40
لماذا يظهر الخط مختلفا من متصفح لآخر؟
* كل متصفح له طريقة معدة افتراضيا defaults. قد تبدو مشكلة للمصممين. لذا تحتاج لجعل كل المتصفحات معدة بنشفس الشكل. reset .

تعين css :
إعادة التعيين له 3 أصناف :
hard reset
simple reset
full reset

التعيين هو أكواد جاهزة يمكن فقط وضعها في صفحة css مثل كود مشهور اسمه
Eric Meyer’s Reset CSS
أو من ( هنا )

يقوم البعض بما يُسمى hard reset لأنه يناسب كل المتصفحات
الطريقة
الوسم عبارة عن نجمة
ثم بين أقواس متعرجة نكتب الصفات
مثلا :

*
{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#000000;
    font-weight:normal;
    font-style:normal;
    margin:0;
    padding:0;
    border:0;
    }

نعمل حفظ ثم معاينة صفحة html على المتصفح لنجد الخط يظهر بطريقة عادية جدا يظهر تقريبا في كل المتصفحات بنفس الشكل.

/*Reset*/

html, body { margin:0; padding:0; border:0; background: transparent; font-size:10px; }
div, span, article, aside, footer, header, hgroup, section,
h1, h2, h3, h4, h3, h4, h6, p, blockquote, a, ol, ul, li,
table, tr, th, td, tbody, tfoot, thead,
{
     margin:0;
     padding:0;
     border:0;
     vertical-align:baseline;
     background:transparent;
     }

img {margin:0; padding:0; border:0; }

table, tr, th, td, tbody, tfoot, thead {
      margin:0; padding:0; border:0;
     vertical-align:baseline;
     background:transparent;
     }
table { border-collapse:collapse; border-spacing:0; }

input, textarea, form, fieldset {
     margin:0; padding:0; border:0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
     display:block; }
h1, h2, h3, h4, h3, h4, h6, p, li, blockqoute, td, th, a, caption, em, strong, stike {
      font-family:Arial, Helvetica, sans-serif;
      font-size:100%;
      font-weight:normal;
      font-style:normal;
      line-height:100%;
      text-indent:0;
      text-decoration: none;
      text-align:left;
      color:#000;
      }
ol, ul {list-style:none; }

/* Globe */
html { }
body { }

26:30
لنقل أن لدينا تنسيق نريد كتابته قبل التنسيق السابق :
مثلا للخط :

h1 { color:#FF0000; }

مع العلم أن الاعداد الاساسي يخبر بأن لون الخط يجب أن يكون أسود.

ماذا ستجد؟

ستجد أن الخط ذو الوسم h1 ليس أحمر وإنما أسود .

لان التنسيق المكتوب مؤخرا أبعد مما عرف (نسق ) في Reset

وعليه يجب أن يكون الـ reset هو أول ما تقوم به ليعمل الكود بشكل صحيح.

سأحذف الآن الإعداد reset سأجد صفحتنا المعتادة .

أنواع selectors :

1- الجماعي group selector

h1, h2, h3 {color:#FF0000; } مثال

2- الفردي individual selector

h1 {color:#FF0000; } مثال

3- المنحدر descendant selector

#block1 p {color:#FF0000; } مثال

طريقة تنسيق 3 وسوم بنفس الصفات :

هذه الطريقة المعتادة

h1 {color:#FF0000; }
h2 {color:#FF0000; }
h3 {color:#FF0000; }

ولكن بدلا من كتابتها بالشكل السابق سنعمل Group Selector مجموعة من الوسوم تفصلها فاصلة ثم الاقواس المتعرجة بداخلها الصفات.

هكذا:

h1, h2, h3 {color:#FF0000; }

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

h1, h2, h3 {color:#FF0000; }

h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px;}

كذلك يمكن إعطاء المجموعة المزيد من الصفات .مثلا:

h1, h2, h3 {color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-weight:bold }

ولاستثناء أحدها في وزن الخط فيمكن إدخال الصفة بشكل فردي:

هكذا :

h1, h2, h3 {color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-weight:bold }

h1 {font-size:30px;}
h2 {font-size:24px;}
h3 {font-size:18px; font-style:italic}

المنحدر descendant selector

يساعدك على استهداف تنسيق وسم محدد في قسم محدد

Parent Child Relationship سنستخدمه غالبا ويقوم على

حيث أن كل قسم (كتلة) هي الأب والوسوم داخلها هي الأبناء , وكذلك الحال مع الوسم ul فهو كالأب لوسم التعداد اسفله li

مثلا لدي وسم نص في الكتلة الاولى ووسم نص آخر في الكتلة الثانية

سأخبر الكود

جد لي كل وسوم النص في الكتلة الأولى وقم بصياغتهم format بالتنسيق كذا وكذا( اللون الاحمر )

مثلا ليكن الهدف الان هو وسم النص في الكتلة الاولى :

سيكون الوسم هكذا ..

#block1 p {color:#FF0000; }

عندما تذهب إلى ورقة html ستجد النص في الكتلة الاولى فقط أصبح باللون الاحمر, أما النص في الكتلة الثانية لم يتغير

يعني قمنا بـ

تعريف الوسم اعتمادا على أي كتلة وهي ما تسمى علاقة الاب والطفل.

مثال آخر للقوائم :

لو قمت بالتنسيق التالي

li {color:#FF0000; }

فإنه سينسق لي كل العناصر li في كل القوائم سواء ol أو ul

لكن إن اردت استهداف العناصر الواقعة القائمة المرقمة ol فيسكون الكود كالتالي :

ol li {color:#FF0000; }

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

ماذا لو أردت استهداف العناصر في القائمة ul في الكتلة الأولى ؟؟

ستكون هكذا :

#block1 ul li {color:#FF0000; }

2015-06-20

الأنواع الرئيسية الثلاثة لكتابة تنسيق في ورقة الأنماط css

Cascading Style Sheets

الأنواع الرئيسية لكتابة تنسيق في ورقة الأنماط css :
1- أسلوب الوسم tag
2- أسلوب الصنف class وهو يُسبق بنقطة ثم اسم الصنف
3- أسلوب الهوية id وهو يُسبق بعلامة هاشتاق ثم اسم الصنف

يطبق أسلوب الوسم مباشرة على صفحة html
لا يطبق اسلوبي الصنف والهوية مباشرة على الصفحة إلى بعد ذكرهما داخل الوسم المعني في صفحة html
وتكون الطريقة بذكر كلمة صنف , هوية ثم علامة مساواة ثم القيمة وهي اسم الصنف أو الهوية

ملاحظة :
- غالبا الهوية تطبق مع الكتل div و أقسام span .
مع العلم أننا نستطيع أن نطبق هوية على أحد الوسوم في صفحة html كما كنا نفعل مع class

11-هنا نتعلم عن ورقة تنسيق الأنماط css | الربط | التطبيق | أنواع تنسيق css | الوسم | الصنف | الهوية

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

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

- عليك أن تتعلم css لصياغة المخطط layout
ليست لغة صعبة لكن لابد منها.

الآن ..
- سننشيء صفحة html جديدة ونسيها test.html
- أيضا سننشيء صفحة في ملف css ونسميها styles.css

العمل على الصفحات :
سأكتب كود على صفحة html فقط للعمل عليه وتطبيق لغة css عليه وربطها به.

الكود سيكون في قسم الجسم body كالتالي:

<div id="الكتلة الأولى">
<h1> عناوين الأخبار </h1>
<p> هنا نص خبري </p>
<h2> عناوين الصحف </h2>
<p> هنا نص صحفي </p>

<ul>
<li> كريم </li>
<li> أسعد </li>
<li> مصطفى </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol>
<li> الإمارات </li>
<li> الكويت </li>
<li> قطر </li>
</ol>
<img src="../khaleej.jpg" />
</div>

<div id="الكتلة الثانية">
<h1> أخبار عالمية </h1>
<p> الهند</p>
<h2> أخبار محلية </h2>
<p> الرياض</p>

<ul>
<li> أسماء </li>
<li> لطيفة </li>
<li> جيهان </li>
</ul>

<a href="http://www.w3schools.com"> أذهب إلى هذاالموقع </a>

<ol>
<li> برتقال </li>
<li> تفاح </li>
<li> عنب </li>
</ol>
<img src="../fruit.jpg" />
</div>

مالذي يجب معرفته عن لغة css ؟
- يقوم الاختصار css على العبارة Cascading Style Sheets أي أوراق الأنماط المتتالية .
- لا نفعل كل شيء بـ css ولكن معظم الأشياء تقوم بها css
- عليك أن تتعلم في css كيف تربط صفحة css بـ صفحة html .
- css مثل html في كونه لا يهتم بوسع المساحات البيضاء أثناء كتابة الكود. يعني لا يهم إن كتبت التنسق هكذا:

{
font-size:12px;
}

أو
هكذا

{ font-size:12px; }

أيضا يمكن جعل كل الصفات على سطر واحد هكذا :

name { property:value; property:value; property:value; }

- css ليست حساسة لحالة الأحرف فلايهم إن كتبتها بحروف كبيرة أم صغيرة , لكن هناك استثناء فإسم الاسلوب يجب أن يُطابق الوسم المعني في صفحة html . فمثلا إذا كان اسم الصنف في صفحة html هو soso فيجب أن يكون نفس الاسم في صفحة css .
- عليك أن تعرف أين يُكتب ؟ 1- إما يُكتب في صفحة مستقلة أو في نفس الصفحة ويكون في قسم الرأس.
- وعليه فسيكون هناك وسم لربط الصفحتين , هذا الوسم يحتوي على أربعة سمات (خصائص) مختلفة.
الوسم هو : link وهو فردي وليس ثنائي .

السمات الأربعة وقيمها هي:

href

وهو كما نعرف للرابط (المسار ) كاسم ملف الصفحة وهنا سيكون ملف صفحة css , فالقيمة مثلا اسم ملف الصفحة التي سأربط بها
css/styles.css

rel

وهو اختصار relationship أي العلاقة بين ملف css والملف الذي نود ربطه به , فالقيمة مثلا نوع تنسيق الصفحة الأخرى التي سأربط بها
stylesheet

type

النوع : وهو نوع الورقة التي نستخدمه والتي ستكون ورقة تنسيق الأنماط المتتالية css فتكون القيمة هكذا:
text/css

media

وهي تعني على ماذا ستكون المخرجات , وهي بالطيع ستكون الشاشة

لانه هناك ما يسمى screen أو print وما سنستخدمه هو قيمة screen .

مثال:

انتبه فلقد واجهتني مشكلة في الكود حيث يظهر خطأ في كلمة link , واكتشفت أني وضعته داخل وسم الرأس ثم داخل وسم العنوان , لذا انتبه الصحيح أن تضعه داخل وسم الرأس ولكن ليس بداخل وسم العنوان , ليكون بشكله الصحيح كالتالي :

ماذا سأفعل الآن لأطبق ورقة الأنماط css على صفحة html ؟
- سأفتح ورقة الأنماط
- سأكتب فيها الكود التالي :

h1 {
color:fuchsia;
}

- سأعمل save
- سأذهب إلى ورقة html لأرى أن الخط بـ h1 قد تغير إلى اللون الفوشي (الزهري) لأني وكما ترون في ورقة الأنماط جعلت تنسيق خط h1 يكون دائما باللون الفوشي. بعد هذا ستجد أن أي نص توسمه في ورقة html بخط h1 يصبح بهذا اللون

* لاحظ أنه :
طريقة التنسيق في css :
1- تكتب الوسم مثلا h1
2- ثم تفتح أقواس متعرجة
3- تكتب السمة , ثم نقطتين رأسيتين , ثم القيمة , ثم الفاصلة المنقوطة

نتيجة ما سبق :


بعد تطبيق css على صفحة html

الآن سنقوم بتغيير بعض الإعدادات : (سنعرف لماذا في الشرح ) ..
tools - Page Editors Options - IntelliSense
نزيل علامة الصح من الخيار :
css selector closing brace

سنحذف التنسيق السابق في ورقة css

هناك 3 أنواع رئيسية من ورقة الأنماط : ( Cascading Style Sheets )
1- أسلوب الوسم tag
2- أسلوب الصنف class
3- أسلوب الهوية id

تكتب الأنواع السابقة بنفس الطريقة , لكن طريقة تطبيقهم تختلف من نوع لآخر.

ما الفرق بين أسلوب وسم tag و اسلوب class والهوية id ؟
أسلوب tag يصيغ وسم محدد في ورقة html كما فعلنا في وسم h1 وسينسق أي وسم يقابلة بهذا الاسم .
وإذا عملت حفظ ثم ذهبت لصفحة html ستجده تطبق مباشرة .
أما أسلوب class سيطبق التنسيق فقط على العنصر (الوسم ) في html الذي فقط يحمل ميزة class .
وإذا عملت حفظ ثم ذهبت لصفحة html سوف ( لن ) تجده قد تطبق حتى تنادي عليه بذكر اسمه في صفحة html .
أما الهوية id
تشبه class لكن غالبا الهوية id تتعلق بالكتلة div والقسم span

- الصنف ممكن يُطبق على وسم محدد دون الآخرين وإن كانت الوسم الاخرى مثلة مصاغة بلون واحد. حث يمكن للـ class تغيير ذلك الوسم دون غيره.

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

الصيغة الأساسية

name {

property:value;

}

المعنى بالعربي

الاسم {

الخاصية:القيمة;

}

مثال :

h1 {
color:fuchsia;
}

يعني الاسلوب بهذا الاسم name لديه هذه الخصائص مع قيمها.

قد يكون للأسلوب خاصية الخط أيضا مثلا :

p {
font-size:12px;
}

لننشيء أسلوبا الآن :

سأنسق ترويسة h1 :

سأكتب أسمها وافتح أقواس متعرجة . هكذا:

h1 {

}

سأكتب اسم التنسيق h1 والصفة الخاصة بنوع الخط وهي font-family

عليك أن تعرف أن بخصوص عائلة الخطوط , يجب أن يكون الخط غالبا معرفا في متصفح الزائر.

عندما تكتب صفة font-family فإن مايكروسوفت إكسبريشن ويب يعطيك خيارات لعائلة من الخطوط وليس فقط خط واحد.

لماذا عائلة ؟ احياط لتوافر أكثر من خط على متصفح الزائر.

هكذا:

font-family:Arial, Helvetica, sans-serif;

ثم سأنسق بـ حجم الخط فتكون الصفة font-size

بالنسبة للخط ممكن أن يكون بالبكسل px أو em
لكننا سنستخدم الـ بكسل , لكن الطابعات لا تتعامل عادة بالبكسل , تستخدم points النقاط.
سيكون التنسيق هكذا :

font-size:36px;

سأكتب تنسيق اللون :

سأجعل اللون أحمر , وليس أزرق , لان الأزرق غالبا للروابط . مع العلم أن بإمكاننا اختيارهـ .

في مايكروسوفت اكسبريشن عند كتابة الصفة color تظهر لك قائمة منسدلة من الألوان , وعند الضغط مرتين على المربع الأيسر ستظهر لك خلية الألوان , لتجد أن كل لون له صيغة رقمية أيضا.

حيث إن هناك ما يقارب 60 قيمة للألوان.

سيكون التنسيق هكذا :

color:#00CC00;

أما التنسيق الخاص بخط الترويسة h1 ككل فسيكون هكذا :

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:#00CC00;
}

لنعمل حفظ , ثم نذهب إلى صفحة html لنرى كيف أثر التنسيق عليها :

النتيجة تغير خط ولون عبارة ( عناوين الأخبار ) , و عبارة ( أخبار عالمية )

كيف نكتب أسلوب الصنفclass في ورقة الأنماط css ؟
- يجب أن يبدأ الصنف بنقطة.
- يجب أن يكون له اسم

مثال :
سأسمي الصنف (ريم ) , سجعل صفاته هي :
اللون الأزرق , ونوع الخط المائل
سيكون هكذا :

.reem {color: #6699FF; font-style:italic; }

سأذهب إلى صفحة html لأجد النتيجة :

سوف لن يكون هناك أي أثر لانه اسلوب صنف وليس اسلوب وسم

(كيف أطبقه إذا ؟)

بالذهاب إلى صفحة html ومناداته باسمه ووضعه كـ سمة في الوسم الذي أريد أن أطبقة عليه

مثلا أريده أن يتطبق على ما وسم بـ h2

إذهب إلى هذا الوسم , واكتب فيه اسم الصنف لكي أناديه من صفحة css .

كنا في صفحة css قد بدأناه بنقطة

لكن في صفحة html سنذكر كلمة class ثم علامة مساواة والقيمة بداخل التنصيص هي اسم الصنف وكما اسميناه (ريم )

هكذا :

<h2 class="reem"> عناوين الصحف </h2>

وبما أن الصنف لا يطبق إلا بمناداته فسأطبقه أيضا على أحد , وليس (كل) بل أحد فقرات التعداد غير الرقمي ,
هكذا:

وسأطبقه على النص في الكتلة الثانية بنفس الطريقة
هكذا :

<p class="reem"> هنا نص مقالي</p>

سأقوم الآن بتنسيق الكتلة div :
سأنسق في صفحة css خلفية الكتل كلها .
هكذا :

div {background-color:#FF9966; }

سأذهب إلى صفحة html لأرى النتيجة :

بتلك الطريقة تم التطبيق على كل الكتل, لكن ماذا إن أردت استهداف فقط خلفية الكلتة الثانية ؟

أها ..

هنا يأتي عمل الهوية id

- في ورقة css نقوم بتنسيق هوية يتم تطبيقها هلى الكتلة الثانية فقط

- لتطبيق الهوية يجب أن آخذ نفس اسم الكتلة الثانية

وكنت قد كتبت اسمها بالعربية ( الكتلة الثانية ) في صفحى html سأجعل اسمها بالانجليزية حتى لا يتلخبط الكود سأسميها

block2

- ثم سأعود إلى صفحة css والطريقة الصحيحة لكتابة اسم الهوية هو أن تبدأ بـ هاشتاق ثم الاسم المطابق

سأمسح كود الصنف السابق واستدبله بالكود التالي لنرى الفرق.

هكذا :

#block2 {background-color:#FF9966; }

النتيجة في صفحة html :

لاحظ أن الكتلة الأولى باللون الأبيض كما هي , والكتلة الثانية أصبحت ملونة لأننا طبقنا عليها الهوية.

نستطيع أن نطبق هوية على أحد الوسوم في صفحة html كما كنا نفعل مع class

هكذا في css :

#jojo { color:#990099; }

ونناديها في html , هكذا :

<h2 id="jojo"> أخبار محلية </h2>

ستكون النتيجة أن أحد العناوين أصبح باللون البنفسجي.

2015-06-19

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

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

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

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

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

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

الأدوات :

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

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

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

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

طريقة العمل:

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

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

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

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

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

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

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

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

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

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

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

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

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

<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 طول إنش.

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

النتيجة بعد إضافة صورة لـ كتلة البانر 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>

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