حياكم الله في موقع عرب ووردبريس المتخصص في سكربت التدوين الشهير (ووردبريس)
|
|
||||||
 |
|  |
 |
|
|
LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
02-02-2008, 11:53 PM
|
|||
|
|||
[شرح] ابسط طريقة لتصميم قالب ووردبريس
بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته اليوم حبيت اعرض لكم طريقتي في تصميم قوالب الووردبريس مادري إذا كانت مكررة بس الله يشهد اني ما اخذتها من درس او شي بس استوت معاي بالغلط هي شوي بدائية بس جداً سهلة ومابها اي صعوبة عيبها انها ماتدعم الـwidget والقوائم الجانبية تكون كتابتها يدوية راح احاول اشوف حل بس انا مو محترفة في تصميم قوالب الووردبريس وبهذي الطريقة اكون اشرح لكم اول قالب كامل من تصميمي من الصفر وليس بالإعتماد على القالب الرئيسي طريقتي يكون فيها ملفين فقط اللي هم الـmain index والـstyle.css إضغط على الصور لتكبيرها الخطوة الأولى.. نفتح الصور المرغوب بإستخدامها في التصميم  نضيف بعض التأثيرات على التصميم  حتى نصل إلى النتيجة المرغوبة  يجب أن يكون التصميم يمكن تقطيعه بحيث لا يتشوه عند التقطيع شوفوا كيف قطعت تصميمي  هذي الـslices بدون الخلفية الخطوة الثانية.. بعد كذا نحفظ التصميم ونفتح صفحة الـHTML عشان نبدأ بإضافة الأكواد بما انه التصميم اللي صممته انا جدول table فحبيته يكون متوسط نضغط باليمين على الجدول ونفتح خيارات الجدول  نغير الخيارات المظللة  Alignment لتوسيط الجدول Specify width لوضع عرض معين للجدول (إذا اردت أن يتمدد التصميم بنسبه معينة قم بتغير اللازم شرط ان يكون التصميم قابل للتمدد إما إذا لم يكن فقم بوضع عرض التصميم كما هو.. عادة يكون موجوداً منذ البداية) Use Background picture لإختيار خلفية الجدول المتمددة بعد الإنتهاء من الاكواد نفتح ملف text ونبدأ بكتابة الـstyle.css يتبع.. All Rights Reserved © TenshiMon & ar-wp.com 
|
|
#2
02-03-2008, 04:24 AM
|
|||
|
|||
|
اولا اود ان اشكرك على هذا الجهد الاكثر من رائع اختي الكريمة ... وما ودي اقلل من وقتج وجهدج اللي قضيتيهم في اعداد هذا الشرح .. لكن لدي ملاحظه بسيطه ... وهي حاليا الكثير تركوا استخدام الجداول في التصميم .. واتجهوا الى استخدام div بدلا من table ويمكننا من خلال الفوتوشوب سي اس 3 تصدير التصميم على هيئة CSS وسوف اقوم بشرح الطريقة ان شاء الله ...
شكرا لكِ اختي الكريمه .. وجزاج الله الف خير
|
|
#4
02-03-2008, 07:27 PM
|
|||
|
|||
|
اقتباس:
اخي زلزال اشكر مرورك الكريم.. انا شرحت على الـtables لانه الأغلبية تفضل ان تكون الصفحة متوسطة بينما الـdiv فيكون التصميم في اتجاه معين.. موقادرة اشرح الموضوع بس هذا مايعني انك قللت من جهدي او شي بالعكس وانا انتظر شرحك اخوي على احر من الجمر ومعلومة جديدة بالنسبة للفوتوشول لاني ما استخدمت النسخة الاخيرة حتى الآن غن شاء الله احملها واجربها ويعطيك العافية على المعلومة اقتباس:
شكراً على مرورك الكريم
|
|
#5
02-03-2008, 08:38 PM
|
|||
|
|||
|
اقتباس:
اولا شكرا لك على كلامك الطيب .. كلنا هنا نتعلم من بعضنا البعض .. ولا شك في ذلك .. بالنسبة لي .. احب التصميم اكثر من البرمجة .. لكن في الآونه الاخيرة .. يعني قبل شهرين .. احسست بأن لدي نقص .. ولهذا بدأت بقراءة بعض المواضييع عن السي اس اس .. اختي تعالي نتعلم سوياً من اجل الاستفادة .. ولنشئ جدول div كالتالي : كود:
<div> </div> <div class="header"> ثم نغلق وسم ديف كود:
</div> الحين نعمل ملف سي اس اس .. مادام المعرّف مسمينه header راح نكتبه كالتالي : كود:
#header بسم الله نبدأ كود:
#header {
كود:
width: 650px; الحين راح نضيف خاصية المحاذاة والمسؤول عنها هنا margin .. وهنالك اكثر من طريقة للحاذاة في margin على سبيل المثال : margin-top وهو المسؤول عن المحاذاه العلوية . ويكون الكود كالتالي كود:
margin-top:auto; margin-right وهو المسؤول عن المحاذاة في جهة اليمنى margin-bottom وهو المسؤول عن المحاذاة السفلى margin-left وهو المسؤول عن المحاذاة اليسرى . ومن الطرق الاخرى يمكن كتابة المحاذاة margin بإختصار الكود على سبيل المثال : كود:
margin: 1px 4px 0 3px; رقم 4 المحاذاة اليمنى رقم 0 المحاذاة السفلى رقم 3 المحاذاة اليسرى .. يعني تكون المحاذاة دائما : اعلى - يمين - اسفل - يسار وبإمكاننا كتابته بالمحاذاة التلقائية : كود:
margin: auto auto 0 auto; كود:
#header {
width: 650px;
margin-top: auto;
margin-right: auto;
margin-left: auto;
}
كود:
#header {
width: 650px;
margin: auto auto 0 auto;
}
اتمنى من الله انني قدرت ان اوصل المعلومه .. والسموحه على القصور التعديل الأخير تم بواسطة زلزال ; 02-03-2008 الساعة 08:58 PM.
|
|
#6
02-06-2008, 03:37 AM
|
|||
|
|||
|
اختى شكرا على الموضوع الرائع جدا جزائك الله كل خير بانتظار بقيه الموضوع توبيك جميل ومنظم
__________________
أنا بس
|
|
| الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه
|
||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| شرح برنامج الارتيستير لتصميم قالب وورد بريس وتعريبه واستخدامه | أنس | قوالب ووردبريس - عام | 76 | 06-15-2011 11:45 AM |
| طريقة تركيب ووردبريس المتعدّدة | albahrain | تركيب / ترقيّة المدونّة | 21 | 05-01-2011 06:44 PM |
| شرح طريقة تعريب قوالب ووردبريس | رشيد بيدوسي | قوالب ووردبريس - عام | 58 | 08-29-2010 04:34 AM |
| [طلب] طريقة دمج التسجيل بين ووردبريس والمنتديات | احمد حمودة | الدعم الفني المتقدّم | 3 | 09-25-2008 04:42 AM |
| [طلب] شرح طريقة تعريب إضافات ووردبريس | hamido2008 | طلبات الإضافات / طلبات تعريب الإضافات | 7 | 07-23-2008 03:15 PM |
دليل مواقع | انمي | منتديات
العرض العادي
