أذكار: tutorials

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

2017-03-27

شرح Go Daddy

شرح شركة استضافة المواقع قو دادي Go Daddy | How To - Tutorials

كيف أضبط إعدادات الدفع التلقائي على استضافة قو دادي | Turn on Automatic renewal

2016-08-30

كيف أضبط إعدادات الدفع التلقائي على استضافة قو دادي | Turn on Automatic renewal

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

- نسجل الدخول لموقع Go daddy
- اضغط على اسمك في الزاوية
- إعدادات الحساب Account Settings
- انزل بالماوس قليلا لتظهر لك العديد من التبويبات من ضمنها التجديد والفواتير Renewals & Billing
* ستظهر لك تفاصيل الفوترة
- من الضروري جدا جدا أن تضع علامة صح على اسم النطاق لكي تتمكن من التحكم بالخيارات
- بعد أن تضع علامة صح على اسم النطاق, اختر Auto renew on/off

set these products to auto renew, go daddy

- لرؤية حالة الدفع
- تضغط على اسمك في الزاوية
- منتجاتي My products
- من النطاقات تختار Manage
- ضع الماوس على النجمة ثم Domain Settings
- إن كنت قد وضعت الإعدادات على الوضع التلقائي فستظهر لك جملة تفيديك بأن التاريخ القادم الفلاني سيتم الدفع تلقائيا.

Go dady, my products, domains, auto renewal,

Domain Setting, go daddy, Auto renew, Domain Name Renewal, GoDaddy

شرح شركة استضافة المواقع قو دادي Go Daddy | How To - Tutorials

تُعد شركة قو دادي , go daddy إحدى شركات الاستضافة التي تؤجرك اسم نطاق. يعني تتيح لك
أو .org وغيرها .com
, والتي عادة لا توجد في النطاقات المجانية.
يوجد في هذه الشركة العديد من المميزات نشرح لكم ما تعرفنا عليه منها لحد الآن.

- طريقة ربط دومين مدفوع من Go Daddy بمدونة بلوجر blogger
- طريقة الدفع التلقائي على قو دادي Auto Renewal

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

Pages

ابحث في مواضيع المجلة

Translate

2017-03-27

شرح Go Daddy

كيف أضبط إعدادات الدفع التلقائي على استضافة قو دادي | Turn on Automatic renewal

2016-08-30

كيف أضبط إعدادات الدفع التلقائي على استضافة قو دادي | Turn on Automatic renewal

شرح شركة استضافة المواقع قو دادي Go Daddy | How To - Tutorials

2015-07-05

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

2015-06-23

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

AdServe

التسميات

الأرشيف