عرب ويب ديازين

عودتي بعد مدة طويلة

2012-03-19T02:44:00.001-07:00

السلام عليكم
بعد مدة طويلة من عدم وضع اي مواضيع جديدة ان شاء الله ساكمل المشوار لاني انقطعت عن الكتابة لعدة ضروف ومنها عدم الردود على المواضيع لاني حسيت اني لا افيد بشيئ مع ان الردود هي التي يعرف بها المدون هل هو على صح ام العكس ولاسباب اخرى في الحياة الدنيوية واتمنى ان هده العودة تكون احسن من الاول ان شاء الله وساكمل الدورة تابعونا

حل مشكلة التعليق في مدونات بلوجر

2011-07-30T06:28:00.000-07:00

السلام عليكم
مند ان عرفت عالم البلوجر كنت اواجه مشكلة و هي عدم الرد على المدونات الاخرى او حتى في مدونتي

و قد بحت عن السبب ولم اجد حلا و ضننت ان المشكل لن اتخلص منه ولكن بالصدفة وجدت الحل وهو حل

بسيط مع اني فوجات بانني اصبحت ارد على المدونات التي اتبعها بدون مشاكل

الحل

هو تحميل متصفح جوجل كروم google chrome وتنصيبه على الجهاز 
عند الانتهاء من التنصيب ادخل على المتصفح جوجل كروم تم ادخل على حسابك في بلوجر تم ادهب لاي مدونة اخرى او مدونتك واكتب الرد واضغط على كتابة رد سيضاف ان شاء الله ممكن ادا لم يضف الرد اضغط على معاينة تم اضافة الرد هدا هو ما حصل معي بالتوفيق

نبدة مختصرة عن اهم وسوم html و تقنية css

2011-07-21T14:14:00.000-07:00

السلام عليكم اليوم ان شاء الله سنرى الجزء الاول من دورة تصميم واجهة مدونة بتقنية html/css لنبدا على بركة الله
قبل ان نبدا اشير الى هدين الموضوعين :

هل تود تعلم لغة html حقا

طريقك لتعلم لغة css2

لتعمق في اللغتين هده ستكون نبدة مختصرة هدا نضرا لوجود مصادر كتيرة على النت

اولا التعرف على html

هي لغة تستعمل لبناء الصفحات وهي اختصار لجملة Hyper Text Markup language وهي ليست
كباقي اللغات لا تحتاج الى مترجم او بالاحرى ليست لغة برمجة متل php و asp.net و .... الخ
والوسوم في Html تكون على الشكل التالي :

<tag>هنا الجزء الدي سيتاتر بالوسم tag</tag>

الان عرفنا كيف نكتب الوسوم في لغة html ادا لنتعرف عن اهم وسوم html التي لا يمكن كتابة اي صفحة بدون وهده الوسوم تكون على الشكل التالي :

<html>
<head>
<title>عرب ويب ديازين</title>
</head>
<body>
</body>
</html>

الان لنشرح لمادا تصلح هده الوسوم

اولا وسم <html> كما نلاحض لقد بدانا به واقفلناه ب </html> كما راينا سابقا

ان بداخل وسم html نضع محتويات الصفحة ودلك اما المحتوى الدي سيضهر لزائر الصفحة سنشرحها

في body او التي سيقراها المتصفح متل title و كما سنشرحه في head

الان وسم <head></head> هدا الوسم نضع بداخله وسم

<title> </title> الدي نضع بداخله عنوان الصفحة ادا كنت تتصفح المواقع لابد انك تلاحض اسماء الصفحات

في البار في الفوق من المتصفح وهدا عمل وسم title

الان الوسم <body> الدي يكون بداخله جميع محتوى الصفحة من فقرات

وصور و جداول ... الخ

اهم الوسوم المستعملة في لغة html

<p></p>

وهو وسم لفقرات في html

<br />

وسم لرجوع الى السطر يعمل كعمل entrer في الكيبورد هدا الوسم من الوسوم المفردة ويمكن
كتابته <br></br> ويستحسن كتابته هكدا <br />

<img src="هنا عنوان الصورة" alt="هنا وصف الصورة وهده هامة لكسب صداقة محركات البحت " />

لاضافة صورة الى الصفحة

<pre></pre>

لكتابة النص كما كتبته اي ادا ضغطت على enter تحتسب رجوع الى السطر ولا تحتاج لوسم <br /> ليس متل الوسم <p>

<a href ="هنا عنوان الرابط"></a>

وسم الروابط هدا الوسم هام جدا لاضافة روابط لصفحة

<ul></ul>

هدا الوسم للقوائم الغير متسلسلة متال

html

css

html/css

<ol></ol>

هدا للقوائم المتسلسلة اي مرقمة متال

html

css

html/css

الى هنا نتوقف الى الجزء التاني وهو css ان شاء الله سيكون في نفس الموضوع

دورة تصميم واجهة مدونة بتقنية html/css

2011-07-17T13:11:00.000-07:00

السلام عليكم
اخواني اخواتي الكرام ان شاء الله ساضع دورة تصميم واجهة مدونة بتقنية html/css تتكون من ثلات اجزاء كما موضح في الاسفل وهدف هده الدورة هي معرفة كيف تنشئ صفحات الويب و ساستعمل بعد تقنيات css3 وهده الدورة بداية لدورات احترافية قادمة

لمن هده الدورة

للجديد في عالم تصميم صفحات الويب
لمن اراد معرفة بعض تقنيات css3 الحديثة

اجزاء الدورة

الجزء الاول من دورة تصميم واجهة مدونة : نبدة مختصرة عن اهم وسوم html و تقنية css
الجزء التاني من دورة تصميم واجهة مدونة : وضع محتوى التصميم ب html
الجزء الثالت من دورة تصميم واجهة مدونة : تنسيق الواجهة بتقنية css

لقد فتحت هدا الموضوع لمعرفة عدد المهتمين لدورة وان شاء الله سيكون اول درس 23 من يوليوز.

قوالب بلوجر معربة - قالب Twit Plus معرب

2011-07-03T19:25:00.000-07:00

حصريا لمحبي شكل تويتر قالب تويتر معرب يتميز القالب بلونه السماوي متل واجهة تويتر وخفيف صراحتا قالب احترافي و اضمه لافضل قوالب بلوجر يمكنك التعديل عليه ببساطة وان شاء الله ساشرح كيف تعدل على اهم الخصائص المميزة في هدا القالب

1 - مميزات القالب :

عمود ايمن
خاصية اقرا المزيد
ملف تعريف في الرئيسية

للمعاينة

لتحميل القالب

2 - اعدادات القالب
قبل ان ابدا للبحت عن الاكود يجب ان تدهب الى تصميم --> تحرير html --> توسيع القالب --> Ctrl+f وفي خانة البحت انسخ الكود وعدل كما تشاء وما لون بالازرق هو ما يجب تغيره لنبدا بسم الله الرحمان الرحيم

عنوان المدونة

ابحث عن هدا الكود

<div class='logo'><a expr:href='data:blog.homepageUrl'><h2>Twit Plus</h2></a></div>

ملف التعريف

ابحث عن هدا الكود

<div class='authorimg'>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96Gzd7Ue9ser_jXYCOmmv13TucHtemtlNy7JR06WElwHqV0uKbi7bbeCxCJBalm63ZtwtfPIrSLXVJZQf0YbpmpFuWgISIjhBsWB55NWEz8mcVa2SVuGDCVvBgt9xxO88xNflpZFd3VWR/s1600/default_pic.png'/>
</div>
<div class='authorinfo'>
     <span class='name'><h3>عرب ويب ديازين</h3></span>
     <span class='location'><h4>ايوب ميدان</h4></span>
     <span class='bio'>هي مدونة تهتم بتصميم المواقع و كل ما يتعلق بتقنية CSS وhtml وقوالب بلوجر معربة ودروس تتعلق بتعريب القوالب وكل ما جد في ويب ديازين.</span>
</div>

مشاركة عبر البريد و الفيسبوك وتويتر

ابحث عن هدا الكود

<div id='follow'>
<div class='twitter'><a href='http://twitter.com/#!/ayoubmido'><b>299</b></a><span class='bot'>Followers</span></div>
<div class='facebook'><a href='http://www.facebook.com/pages/%D8%B9%D8%B1%D8%A8-%D9%88%D9%8A%D8%A8-%D8%AF%D9%8A%D8%A7%D8%B2%D9%8A%D9%86/177567075632873?sk=wall'><b>299</b></a><span class='bot'>Fans</span></div>
<div class='feedburner'><a href='http://feeds.feedburner.com/blogspot/NvDLL'><b>299</b></a><span class='bot'>Subscribers</span></div>
</div>

ادا اعجبك الموضوع تسجل اخي في اشترك معنا ليصلك الجديد

قوالب بلوجر - قالب Oustine معرب

2011-06-29T11:23:00.000-07:00

السلام عليكم
قالب Oustine معرب الرائع سريع التصفح دو قائمة جانبية في اليمين به اضافة اقراء المزيد ويتميز بالسلايدشو سهلة التعديل وقائمة افقية رائعة ويتميز بالوانه الهادئة صراحتا من اروع قوالب بلوجر

للمعاينة

لتحميل

التعديل على السلايدشو

من لوحة تحكم المدونة ادهب الى تصميم تم تحرير html تم توسيع القالب وابحت عن هدا الكود

<div id='myGallery'>

ملحوضة : لتسهيل عملية البحت اضغط على Ctrl+F ستضهر قائمة بالاسفل واكتب الكود في مكان البحت
ستجد تحته هدا الكود مباشرة وهدا الكود هو الدي يهمنا الان

<div class='imageElement'>
<h3>عنوان الموضوع</h3>
<p>ضع وصف الموضوع هنا متال هدا نص تجربي هدا نص تجربي هدا نص تجربي هدا نص تجربي هدا نص تجربي هدا نص تجربي هدا نص تجربي .</p>
<a class='open' href='http://ar-webdesign.blogspot.com/' title='This is featured post 1'/>
<img alt='' class='full' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfNI_f_tKFql9KI9nn33AX-ANpEnjpvQ9Lt7RTiBrsc1Mid0CE_82dRvpnlRa1-AXa6x3-gCbqf0IgKWTexTIBLVMaJB5pR3zWIGVTQbLg0V_MvTfCWbdbJ71OkDmXgoUGnhmaHOmQAkk/s1600/1.jpg'/>
</div>

اللون الاحمر : غيره بعنوان الموضوع
اللون الازرق : غيره بوصف لموضوعك او مقتطف صغير من موضوعك
اللون البنفسجي : غير رابط مدونتي برابط الموضوع
اللون الوردي : غيره بعنوان رابط صورة الموضوع

لاحضتم سهولت تعديل السلايدشو, لا تحرمونا من ردودكم

الى هنا السلام

قوالب بلوجر معربة - قالب Dnotebook معرب

2011-06-20T10:04:00.000-07:00

السلام عليكم

قالب Dnotebook رائع غني عن التعريف

Dnotebook

المميزات

دو عمود ايمن
تلات اعمدة بالاسفل
دو الوان رائعة مريحة للعين

للمعاينة

لتحميل القالب

طريقك لتعلم لغة css2

2011-06-17T08:32:00.000-07:00

السلام عليكم
الكثير من يتساءل من اين اتعلم html لقد وضعت موضوع هل تود تعلم لغة html حقا و css اليوم ساضع المصادر لتعلمها اخي ان اللغتين سهلتين في التعلم يجب ان تركز قليلا مع الاستمرار في كتابة الاكواد لتتعود على كتابتهم وتطبيق دروس من هنا وهناك.

css2

مصادر

اقوى موقع لتعلم لغة css وبطريقة سهلة وهو www.w3schools.com به ميزات رائعة
وهدا كتاب بالعربية رائع لتعلم css اضغط هنا لتحميل الكتاب
وهناك موقع عربي لتعلم وبطريقة رائعة ar.html.net
وطبعا مننساش جوجل في محرك البحت اكتب اساسيات css يطلعلك كتير من النتائج واختر انت ما تريد

وفي الاخير اتمنى التوفيق للجميع

عزيزي زائر لاتقرا وترحل شاركنا بارائك

مقدمة للغة CSS3

2011-06-09T14:39:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته

1 - ماهي CSS3

CSS3 هي لغة تكمل لغة CSS2 ودالك باضافات جديدة رائعة متل الضلال والحواف الدئرية التي بدورها تمكننا من استغناء عن الفتوشوب و الصور الخ.... والعديد من الخصائص التي تم تنفيدها على اغلبية المتصفحات ومن اهمها :

Internet Explorer 9 - Firefox - Safari - Opera

و مازالت CSS3 قيد التطوير من طرف w3c ان شاء الله .
2 - اهم خصائص CSS3

Border-raduis

text-shadow

@font-face Rule

CSS3 2D Transforms

CSS3 3D Transforms

وهناك المزيد من الخصائص اتمنى ان ينال الموضوع اعجابكم واي نقطة لم اتطرق لها و تود عزيزي الزائر باضافتها اهلا وسهلا لتكون ان شاء الله مناقشة مفيدة

اخي الكريم شاركنا ان اعجبك الموضوع وتريد معرفة جديد المدونة اضف بريدك في صندوق اشترك معنا

قوالب بلوجر - قالب Hybrid gallery معرب

2011-06-07T18:40:00.000-07:00

السلام عليكم
قالب Hybrid gallery من اروع قوالب بلوجر للميديا او الالعاب معرب

مميزاته

قالب دو عمود ايسر
يمتاز باللون الرمادي والوان منسقة في الهيدر والفوتر
القالب يمتاز بتلات اعمدة في الفوتر

للمعاينة

لتحميل القالب

هل تود تعلم لغة html حقا

2011-06-05T08:42:00.000-07:00

اقدم لكم كتاب رائع لتعلم لغة html بالعربية حقا لمن يود دخول هدا العالم الشيق لك هدا الكتاب وللامانة هدا الكتاب ليس من تاليفي ولكن اعجبني تسلسل الدروس وترتيب الكتاب مما يسهل توصيل الفكرة لهدا اردت مشاركتكم الكتاب اتمنا لكم التوفيق

لتحميل الكتاب

قالب Newplus الانيق معرب

2011-06-05T06:53:00.000-07:00

قالب رائع وانيق سريع التصفح دو عمود ايمن وبلونه الازرق الفاتح والابيض منسق تنسيق جيد

للمعاينة

لتحميل القالب

تحريك الادوات عن طريق اكواد html

2011-06-04T12:28:00.000-07:00

هل عندك قالب جميل أو وجدت قالب مميز وأعجبك فسارعت في تحميله فعندما ركبته على مدونتك تفاجات بعدم مقدرتك على التحكم في أدوات التي توجد في الشريط الجانبي لمدونتك لاتقلق اخي الحل ان شاء الله بسيط تتبع الخطوات التالية ستنجح بادن الله

- الطريقة

ندهب إلى لوحة تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي

<b:section class='sidebar' id='sidebar' preferred='yes'>

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

متال

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>
</b:section>
</div>

الان يممكننا الازاحة متلا انا ساضع الارشيف اسفل واضع المتابعون فوق ودلك سيتم تحديد على الكود التالي

<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>

واقوم بعمل cut واسفل الكود مباشرة

<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>

سنقوم ب paste وهكدا سنعمل مع المتابعون

<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>

سنضع الكود هده المرة فوق

<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>

سيصبح الكود هكدا

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Membres' type='Followers'/>
<b:widget id='Profile1' locked='false' title='Qui êtes-vous ?' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Archives du blog' type='BlogArchive'/>
</b:section>
</div>

المصدر مدونة فرنسية

السلام عليكم.

عزيزي الزائر ادا اعجبك الموضوع فضع بريدك ليصلك الجديد وتسرني زيارتك لمدونتي ممكن تشاركني ادا كان هناك ما تضيفه او ادا كان اي غموض في الموضوع انا رهن الاشارة.

قالب velle الرائع معرب

2011-05-31T13:31:00.000-07:00

السلام عليكم
اليكم قالب velle الرائع المعرب يتميز بلونه الاسود والبرتقالي والابيض ويتميز بعمود ايسر ويمكنك تحميله بعمود ايسر اوبعمود ايمن

للمعاينة

لتحميل القالب بعمود ايسر

لتحميل القالب بعمود ايمن

تعرف على خاصية الخطوط في css

2011-05-29T06:30:00.000-07:00

تمكننا تقنية css بوضع انواع الخطوط واحجامها وشكلها بطريقة رائعة وسلسة وهي خاصية font هده الخاصية مهمة في تعريب القوالب لنبدا

لتحميل المثال للمعاينة

Font-familyهي تساعدنا على تحديد نوع الخطوط وتكون بترتيب نوع الخط اي نوع الخط الاول هو الدي يكون الافتراضي وادا لم يجد المتصفح الخط الاول يلجئ لتاني وهكدا متال :

Body {
Font-family : tahoma,arial,sans serif ;
}
H3 {
Font-family : arial,serif ;
}

Font-size هده الخاصية نتحكم بحجم الخطوط لاتحتاج لشرح هي سلهة للغاية وهدا بوحدات وسنتناول الوحدات كتيرة الاستعمال : px - pt - em - %

Body {
Font-size : 12px ;
}

Font-wheight وهي خاصية تحدد سماكة الخط وتتكون من قيمتين وهما bold و normal

H2 {
       Font-wheight : bold ;
}
Body {
       Font-wheight : normal ;
}

Font-style وهي خاصية تحدد شكل الخطوط ولها تلات قيم normal , italic , oblique

H3 {
Font-style : italic ;
}

الان تعرفت على خاصية تمكنك بتغير الخطوط في القوالب كما تشاء و الخطوط المفضلة هي tahoma لنصوص والعناوين arial وادا كانت هناك ملاحضات على الدرس لاتجنب اخطاء في الدرس القادم ان شاء الله الى هنا السلام عليكم

درس تصميم قائمة مسندلة بتقنية css

2011-05-28T10:22:00.000-07:00

كان درسنا السابق على درس تصميم قائمة افقية بتقنية css ان شاء الله في هدا الدرس سنصمم قائمة مسندلة بتقنية css بدون استعمال jqeury وسنستعين ب display block و none لاضهار واخفاء القائمة و position rlolative و absolute لتحكم بشكل القائمة واضهارها بدون مشاكل ادا كنت من محبي البساطة في التصميم بنتائج رائعة ان شاء الله ستجد ماتريد تابع لتعرف الطريقة واترككم مع الدرس

لتحميل القائمة للمعاينة

وهده نتيجة الدرس :

للمشاهدة لتحميل

1 – كود html :

ننشئ div نعطيه id=nav
نضع قائمة ul وبداخلها li وهدا سهل
نضع داخل li قائمة ul وهي القائمة الفرعية
واخيرا داخل القائمة الفرعية ul نضع li

وهده صورة توضيحية بما قمنا بيه :

وهدا هو الكود:

<div id="nav">
<ul>
      <li><a href="http://ar-webdesign.blogspot.com/"> دروس</a>
           <ul>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس css</a></li>
                <li><a href="http://ar-webdesign.blogspot.com/"> دروس html</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> مدونة</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> برامج</a>
           <ul>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج التصميم</a></li>
                 <li><a href="http://ar-webdesign.blogspot.com/"> برامج الحماية</a></li>
           </ul>
      </li>
      <li><a href="http://ar-webdesign.blogspot.com/"> من نحن</a></li>
      <li><a href="http://ar-webdesign.blogspot.com/"> تعديل</a></li>
</ul>
</div>

2 – لننتقل لكود css وشرحه خطوة خطوة :

#nav{
margin: 0 auto;
padding: 0;
height: 32;
width: 750px;
background: #3B5997;
}

الآن قمنا بإعطاء nav ارتفاع القائمة 32px و عرضها 750px ولون الخلفية وجعلنا الابتعادين 0 مع توسيط القائمة ب auto

#nav ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 13px;
font-family: tahoma;
}

قمنا باعطاء القائمة الابتعادين 0 و ازلنا نقاط القائمة وحددنا نوع الخط وحجمه وللمزيد عن خاصية الخطوط في css

#nav ul li {
float: right;
position: relative;
}

لقد قمنا بجعل عناصر القائمة افقية في سطر واحد وقمنا باعطاء الوضع relative لكي لا تحصل مشاكل عند مرور الماوس على الرابط ليكون تناسق مع القائمة الفرعية

#nav ul li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}

قمنا بإعطاء الرابط لون الأبيض و أزلنا الخط تحت الرابط والابتعاد الداخلي اعطيناه 8px وأعطينا للخلفية لون وأعطيناه display: block ; لكي تظهر الروابط بدون مشاكل وأعطيناها عرضا تم جعلنا الرابط في الوسط

#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}

اعطيناه display: none; لاخفاء القائمة الفرعية اي عدم ظهور والابتعادين جعلناها صفر واعطيناها الوضع absolute لكي تضهر تحت العنصر li بدون اي مشاكل أى ثابتة لا تتحرك واعطيناه اطار بسمك 1px وجعلناه solid واعطيناه نفس لون خلفية القائمة والباقي لايحتاج لشرح

#nav li:hover ul{
display: block;
}

الان عند مرور الماوس على عنصر li ستضهر القائمة الفرعية ودالك باعطائه display: block;

#nav li ul li a{
    color:#463C47;
    background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
    width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
    color: #36599D;
}

الان لانحتاج لشرح ما قمنا به في الخطوة الاخيرة لان كل اكواد واضحة ومشروحة

وهدا هو كود css كامل

#nav{
margin: 0 auto;
padding: 0;
height: 32;
width: 750px;
background: #3B5997;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 13px;
font-family: tahoma;
}
#nav ul li {
float: right;
position: relative;
}
#nav ul li a {
   color: #fff;
   text-decoration: none;
   padding: 8px;
   background: #3B5997;
   display: block;
   width: 120px;
   text-align: center;
}
#nav ul li ul{
   display: none;
   margin: 0;
   padding: 0;
   position: absolute;
   background: #fff;
   border: 1px solid #3B5997;
   border-top: 1px solid #fff;
}
#nav li:hover ul{
    display: block;
}
#nav li ul li a{
    color:#463C47;
   background: #fff;
    border-bottom: 1px solid #DCDDE1;
    margin: 0;
    padding: 8px;
    text-align:right;
   width: 120px;
}
#nav li ul li a:hover{
    background: #EBF0F6;
   color: #36599D;
}

أرجو ان اكون قد اوصلت المعلومة كما يجب .

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

قالب doc البسيط معرب

2011-05-24T11:44:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته
لا مزيد من التعقيد قالب doc الرائع
يمتاز ببساطته وتلات اعمدة بالاسفل وعمود اسفل للاعلانات اترككم مع القالب

للمعاينة

لتحميل

درس كيفية قلب الصور لتعريب القوالب

2011-05-22T07:02:00.000-07:00

السلام عيكم ورحمة الله تعالى وبركاته
اليوم طرحت هدا الموضوع لأني وجدت الأغلبية يسالون عنه لان قلب الصور شيئ أساسي في تعريب القوالب انه عملية سهلة من ألان وداعا لتساؤل إن شاء الله تستفيدون من هدا الدرس
ما سنحتاجه هو برنامج فوتوشوب او اي برنامج محرر الصور كجيمب الان لنبدأ ندخل لبرنامج فوتوشوب ونتبع الخطوات
ندهب ل File تم Open لجلب الصورة من الحاسوبك وختصار هدا الامر الضغط على Ctrl+O
الان بعد جلب الصورة نضغط على Image تم Image Rotation تم Flip Canvas Horizontal
وهده صورة توضيحية :

والان لقد قلبنا الصورة بقية علينا حفضها نتبع الاتي
نضغط على File تم Save For Web & Devices تم تبع الخطوات في الصورة ولابد من حفضها بصيغة PNG. تم نضغط على
Save

وما تبقى هو تسمية الصورة وحفضها قد انتهينا من قلب الصورة

ادا كان هناك استفسار او اي سوال انا رهن الاشارة والى هنا السلام عليكم

درس تصميم قائمة افقية بتقنية css

2011-05-21T20:16:00.000-07:00

السلام عليكم ورحمة الله تعالى وبركاته
اليوم سيكون الدرس عن صنع قائمة افقية بسيطة وساضع في اخر الموضوع تحميل المتال وان شاء الله في المرة القادمة ستكون قائمة احترافية وان كان اي غموض انا مستعد لتوضيحه ولن اطيل الى الشرح:

<html>
<head>
<title>menu</title>
<style type=”text/css”>
body{
direction: rtl;/* لتحويل المحتوى من اليمين الى اليسار */
}
#navbar {
margin: 0 auto;/* الابتعاد الخارجي للقائمة جعلناه صفر وauto لتوسيط القائمة */
padding: 0;/*الابتعاد الداخلي جعلناه صفر */
width: 750px;/* عرض القائمة جعلناه 750px*/
background-color: #ccc;/* لون الخلفية القائمة */
height: 30px;/* ارتفاع القائمة*/
}
#navbar ul{
overflow: hidden;/* اعطينا اوفرفلو هيدن لكي لايحصل مشكل في التعويم ملاحضة لابد ان تعطي اوفرفلو هيدن لاي عنصر الدي تريد عمل تعويم بداخله*/
list-style: none;/*حدفنا النقاط التي تضهر في القائمة*/
background-color: #ccc;
margin: 0;
padding: 0;
}
#navbar ul li{
float: right;/*لقد قمنا بجعل القائمة افقية ودلك بالتعويم الى اليمين*/
width: 100px;
text-align: center;/*جعلنا الروابط في الوسط*/
}
#navbar ul li a{
text-decoration: none;/*ازلنا الخط الدي يضهر تحت الروابط*/
color: #000;/*لون الرابط*/
display: block;/*لاضهار الروابط */
padding: 6px;/*الابتعاد الداخلي جعلناه 6 من كل اتجاهات */
}
#navbar ul li a:hover{
text-decoration: underline;/*الاضهار الخط الدي يكون في القائمة عند مرور الماوس */
background-color: #555;
color: #fff;
border-bottom: 2px solid #000;/*استعملنا خاصية بوردر في الاسفل لاضافة لمسة خفيفة وجعلنا سمكه 2 وجعلنا الخط بدون تقطع واعطيناه اللون الاسود */
}
</style>
</head>
<body>
<div id=”navbar”>
<ul>
<li><a href=”">الرئيسية</a></li>
<li><a href=”">دروس</a></li>
<li><a href=”">اتصل بنا</a></li>
<li><a href=”">من نحن</a></li>
</ul>
</div>
</body>
</html>

فهرس المدونة

2008-07-02T02:21:00.000-07:00