تكويد هيدر بتقنية CsS

**jakeshan** · الخميس يوليو 17, 2014 6:55 pm

پسم آلله آلرحمن آلرحيم
وآلصلآه و آلسلآم على سيد آلمرسليين
و آلسلآم عليگم و رحمه آلله و پرگآته
.....
آلدرس آليوم پآلصور و آن شآء آلله يگون وآضح
نپدء پأسم آلله ..:

ملاحظة : الشرح من دورة في منتدى تبعي يعني مش منقول

--
أولآً ندخل آلفوتوشوپ
نفتح تصميم چديد پـ
File > New
نحتآر آلأپعآد آلمنآسپة و آنآ آخترت

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

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

http://im40.gulfup.com/VvKra.png

...
تصمم آلهيدر پشگل ألي يعچپگ و آنآ حپيت گذآ ..:

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

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

http://im40.gulfup.com/5OTva.png

و آلآن نتقطعه پأدآة آلتقطيع آلى 3 قطع يمين - تمدد - يسآر
و آنآ گمآن وضعت عآرضة للأزرآر رآح آشرحه قريپآً ..
...
گده آنتهت مهمة آلفوتو
ندخل پرنآمچ آگسپرشن ويپ ..
و هذه هي وآچهة آلپرنآمچ

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

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

http://im40.gulfup.com/PKOHB.png
...
آلآن دور آلتگويد آلهيدر
مم لآزم ترگز علشآن مآ تخطأ - آلدرس سهل مرررة
پسم آلله ..
__
آلآن نپدء پفتح آلـ

هي تنسيق آلگود و آسس آلترتيپ ..
نعمل 3 منهآ لگن
مش گده پس لآزم نضع لهآ آلتعريف
آلگلآس ...
مثلآً ..:
گلآس دي هي آسم آلطپقة
و هي مهمة چدآً
و آي حد يگود يستعملهآ
نعمل في آلـ
3 من آلـ div و گل وحدة آلگلآس تپعهآ يختلف عن آلأخر
گمآ موضح قپل .:
تكويد هيدر بتقنية CsS J7nIm

http://im40.gulfup.com/J7nIm.png

پعد

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

تكبير الصورة معاينة الأبعاد الأصلية.
تكويد هيدر بتقنية CsS 7Cdxa

http://im40.gulfup.com/7Cdxa.png
آلـ div آلأولى گلآس تپعهآ : h-Expansion
آلـ h
آختصآر للهيدر في آلـ EN
و آلـ : Expansion
تعني تمدد في آلـ EN
آلثآنية
آلـ right
تعني يمين
و آلـ
left
يسآر
.......
و تعني :

تعني سگر آلگود آي شئ يسگر تضع قپل أسمه
..:/:..
و آلآن آنتهى عمل آلطپقآت آلآن نچي للـ Css
نعمل في آلمگآن آلموضح

http://im40.gulfup.com/siEsg.png
..

گمآ موضح

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

http://im40.gulfup.com/ZU8OE.png
و آلآن تضع آلأگوآد آلـ Css
گمآ موضح ..

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

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

http://im37.gulfup.com/X7ZEy.png

---
قپل أسم آلطپقة تضع دوت (.)
آنت آول مآ تضع .
رآح يضهر لگ آسمآء آلطپقآت
--
آلآن آشرح لگم آلأگوآد آول وآحد
1-
background-image:url('images/,j,_04.png');

رآپط آلصورة

background-repeat:repeat-x;

هنآ يعني تمدد repeat-x

height:227px;

طول آلخلفية و لآزم تگون صح

...
في آلثآني

background-image:url('images/,j,_04.png');

مسآر آلصورة

background-repeat:no-repeat;
يعني مش تمدد no-repeat

float:right;
آمگآن آلصورة
يسآر آو يمين آنآ وضعت يمين لآن آلتصميم گذآ

height:227px;
width:311px;

آپعآد آلصورة
و آلثآلثة نفس آلثآنية

background-image:url('images/,j,_04.png');

مسآر آلصورة

background-repeat:no-repeat;
يعني مش تمدد no-repeat

float:right;
آمگآن آلصورة
يسآر آو يمين آنآ وضعت يمين لآن آلتصميم گذآ

height:227px;
width:311px;

آپعآد آلصورة

شرحته علشآن محدش يقول مآ شرح حآچة
هع
......
و آنتهى آول درس هو درس آلهيدر
آتمنى آن يگون وآضح و آسف لعدم آلتصوير فيديو
لآن مريض شوي و صوتي مش تمآم
و آلسلآم عليگم

تقييم الملف

**ابوهم** · الأربعاء نوفمبر 26, 2014 2:42 pm

تكويد هيدر بتقنية CsS

مشكووور حبي

**ameeraljn** · الأحد نوفمبر 30, 2014 4:05 pm

تكويد هيدر بتقنية CsS

ولـــــــــــــــــــــــــــــو يغالي