الموضوع: طريقة توزيع الستايل css

ابي الطريقة شلون اوزعهم css

والبرامج المستخدمة الموجودة عندي

مايكرو سوفت اكسبيرينس ويب2
والفرونت بيج ولو المطلوب برنامج ثاني
حطو الرابط وانزلة بشرط تواجد شرح له
وشكراً لكم

تحياتي محمد المولاني
- البحرين -

ماذا تقصد بالتوزيع؟ هل تقصد تقسيم الصفحة؟

لما تسوي استايل
في بي تحط الصور عبر القوالب الافتراضي
بس انا ابيهم css هو يصير بس انا ما اعرف

شوف فيه طريقه سهله

هي استخدام

مايكرو سوفت اكسبيرينس ويب2

فقط صمم وضع الصور

وهو يقسم الcss

تحصل css فوق ومقسم


------------------------------------

اما تبيه كل شي css

فأبحث في بعض مواضيعي تحصل فيها الي تبي

Converting a Design From PSD to HTML - NETTUTS

شرح فيديو انجليزي لكنه قوي
سأبحث لك عن غيره

مادري شقول لك

لكن بصراحة التقطيع والتوزيع بيجنني

انا قاعد اشتغل على استايل

وطلع لي مخي من راسي

وابي شرح عربي لو موجود ضروري

انا بحاول اركز في هذا الشرح الاجنبي

الله يوفقك ياربّ

تبي تستخدم الـ DIV ?
او جداول عادية ؟

لأنه تختلف الطريقة والـ DIV اصعب + افضل

بص ياباشا الـ css مش مجرد طريقة او شـرح الـ css اكبر من كدا لكن دى طريقة انا مستخدمها فى الاستايل دا جايز تنفـعك او تحط رجلك على أول السـلم ..
للمعاينة : Arab Designers - Powered by vBulletin

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


الهـيدر : الأكواد ابسط مما تتخيـل .. طبعا انته صممت الاستايل على الفوتوشوب ورعيت نقطة التمدد فى الهيدر .. واتقـطع الهيدر كالتالى ... صورة فى الشمال (مثلا لوجو الموقع) - صورة فى اليمين (عليها اى كلام او اى حاجة) - نقـطة التمدد ..
هنستخدم <div> ... هنمسح كل حاجة من الهيـدر (هيدر الاستايل الافتراضى)

كود:

<a name="top"></a>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td>

<!-- /logo -->


<!-- content table -->
$spacer_open

$_phpinclude_output

هتتحط الصور بتاعتك على الترتيب التالى ..

كود:

<div class="mid">
<div class="left">
<div class="right">

فيصـبح الهيدر بالكامل كالتالى ..

كود:

<a name="top"></a>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td>
<div class="mid">
<div class="left">
<div class="right">

$spacer_open

$_phpinclude_output

اما عن أوامر css فهي كالتالى ..

من لوحة تحكم المنتدى >> اعدادا الاستايلات >>>css رئيسى ..

وتحت هذا المسمى .. تعاريف CSS الإضافية/Additional CSS Definitions أضـف التالى

كود:

.left{ background: url(left.gif) top left no-repeat ; height:150px }
.mid { background: url(mid.gif) top left repeat-x ; height:150px }
.right { background: url(right.gif) top right no-repeat ; height:150px }

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

كود:

</td>
</tr>
</table>

هذه الطريقة التى استخدمتها فى توزيع هيدر وفوتر الاستايل المشار اليه فى الرابط أعلاه .. ولكل تصميم طريقته المختلفة تماما عن الأخر ولكن هذه طريقة وجدتها رائعة ولو لاحظت ستجد ان الاستايل متوافق تماما مع كل المتصـفحات بما فيهم المتصفح العقـيم IE6 ..

أرجو أن أكون وفقت فى الشـرح وأى استفسار انا جاهز ..
أسألك الدعاء ..

طريقه روعه أخي lionhurt

بارك الله فيك ...

ياليت لو تكمل جميلك .. وتشرح التركيب كله ..

أو تشرح التركيب من البدايه لنهايه

ونكون شاكرين لك ..

أتمنى ..

DESIGN-ROMANCY

الف شكر يا أخى على مرورك الكريم .. ولكنى لا أعدك فى الوقت الحالى بالشـرح الكامل لأنشغالى الشديد .. لكن ان شـاء الله اتم هذا الشـرح فى القريب العاجل ..

المشاركة الأصلية كتبت بواسطة lionhurt

بص ياباشا الـ css مش مجرد طريقة او شـرح الـ css اكبر من كدا لكن دى طريقة انا مستخدمها فى الاستايل دا جايز تنفـعك او تحط رجلك على أول السـلم ..
للمعاينة : Arab Designers - Powered by vBulletin

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


الهـيدر : الأكواد ابسط مما تتخيـل .. طبعا انته صممت الاستايل على الفوتوشوب ورعيت نقطة التمدد فى الهيدر .. واتقـطع الهيدر كالتالى ... صورة فى الشمال (مثلا لوجو الموقع) - صورة فى اليمين (عليها اى كلام او اى حاجة) - نقـطة التمدد ..
هنستخدم <div> ... هنمسح كل حاجة من الهيـدر (هيدر الاستايل الافتراضى)

كود:

<a name="top"></a>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td>

<!-- /logo -->


<!-- content table -->
$spacer_open

$_phpinclude_output

هتتحط الصور بتاعتك على الترتيب التالى ..

كود:

<div class="mid">
<div class="left">
<div class="right">

فيصـبح الهيدر بالكامل كالتالى ..

كود:

<a name="top"></a>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td>
<div class="mid">
<div class="left">
<div class="right">

$spacer_open

$_phpinclude_output

اما عن أوامر css فهي كالتالى ..

من لوحة تحكم المنتدى >> اعدادا الاستايلات >>>css رئيسى ..

وتحت هذا المسمى .. تعاريف CSS الإضافية/Additional CSS Definitions أضـف التالى

كود:

.left{ background: url(left.gif) top left no-repeat ; height:150px }
.mid { background: url(mid.gif) top left repeat-x ; height:150px }
.right { background: url(right.gif) top right no-repeat ; height:150px }

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

كود:

</td>
</tr>
</table>

هذه الطريقة التى استخدمتها فى توزيع هيدر وفوتر الاستايل المشار اليه فى الرابط أعلاه .. ولكل تصميم طريقته المختلفة تماما عن الأخر ولكن هذه طريقة وجدتها رائعة ولو لاحظت ستجد ان الاستايل متوافق تماما مع كل المتصـفحات بما فيهم المتصفح العقـيم IE6 ..

أرجو أن أكون وفقت فى الشـرح وأى استفسار انا جاهز ..
أسألك الدعاء ..

أخي الفاضل مع أحترام طريقة توزيعك هذه خاطئة الهدف من css أنك تستخدمها بشكل قوي بكل شئ حتي التخطيط ذاته أي تعمل كائن حاوي ..wrap or rap or conatiner وتضع بيهم العناصر المطلوبة ..

مثال هيدر مكون من 3 صور فقط وبهم صورة متمدد ..للتخطيط نعمل الآني

<div id="header">
<div id="logo"></div>
<div id="header-l"></div>
</div>

صورة التمدد ستكون خلفية للهيدر ..id="header"
logo صورة الشعار
header-l صورة الجزء الشمال مثلا
وبذلك تصنع هيدر متمدد مكون من 3 صور ..
شعار يمين وصورة تمدد وصورة يسار

وشكـرا

رائع يعطيك العافية .. اخوي
lionhurt
=================
تفضل أخي شرح توزيع الأستايل من نوع vBulletin
.:: تصميم وتوزيع الإستايلات بإستخدام CSS ::.

[...] وداعا لنقط التمدد .. شرح كيفية تمديد الاستايل بواسطة css ـ
[...] اسهل طريقة لإحاطة وتأطير جميع القوالب بإستخدام Css
[...] طريقه صنع زر نشط يتغير عند مرور الماوس عليه بسهولة
[مميز] لأول مرة ـ طريقه توزيع صور الإستايل بواسطة css بدون جدوال
[...] تصميم الجداول العلوية والسفلية بإستخدام css ... حصريا
[...] الطريقة الصحيحة لحفر جدوال المنتدى المتوافقه مع كل المتصفحات بواسطة الـ css
[...] خلفية للمواضيع والردود ومعلومات العضو بقالب الـ postbit
[...] شرح تقطيع تصميم وتصديره بملف Css من برنامج فايروركس !!

نقلتها لك من ترايدنت
دمت بخير

eg_arnous

والله ياأخى أعلم ان طريقتى بدائية لكنها أدت المطلوب تماما ... وانا لم أكن اشـرح طريقة ولكنها تجربه خضتها من سنة أو اكثر ...


علي الرويلي
رائع ياأخى انه مرجع جميل وكلنا سنستفيد منه بإذن الله ..

ابحث عن مواضيع للاخ
ca2oom في ترايدنت
وقم بقرائتها جميعآ وتفهمها
سوف تصبح جيد في الCSS