زهير طه

55

9,003

دورة برمجة مواقع الانترنت - لغة css - الدرس 6 - طريقة تقطيع صورة قالب إلى صفحة انترنت image slicing


السلام عليكم ورحمة الله وبركاته
من خلال ما تقدم من دروس في Html,css فقد اصبح لدينا معلومات مفيدة لإمكانية عمل صفحة انترنت وذلك بطريقة التقطيع slicing
ولعل درسنا اليوم من أهم الدروس في مجال الحياة العملية في رحلة برمجة وتصميم المواقع ولابد من معرفة جيدة بما سلف من دروس وبشيء من الإلمام بالتعامل مع برنامج الفوتوشوب Photoshop
- من الخطوات الأولى التي يقوم بها مصمم موقع الانترنت هي تصميم شكل الصفحة في برنامج الفوتوشوب ومن ثم تحويل هذا التصميم إلى صفحة انترنت بالاعتماد على html,css حتى تتحول من صورة إلى صفحة انترنت

ليكن لدينا الصورة التالية قد تم تصميها بالفوتوشوب ونريد تحويلها لصفحة انترنت :



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

نفتح الصورة باستخدام برنامج photoshop

خلينا نبدأ بالجزء العلوي :


عملية التقطيع تحتاج إلى ممارسة وانتباه إلى طبيعة التصميم
إذا أمعنا النظر في الصورة السابقة فإننا نجد أنها تتكون من أربعة صفوف
وفي الصف الأول يوجد لدينا الشعار وبقية الصف عبارة عن تدرج أما في بقية الصفوف يوجد لدينا تدرج ثابت على طول الخط , ومن المهم جداً جداً استيعات هذه الفكرة حيث أن الجزء من الصورة الذي يكون متماثلاً نأخذ منه صورة صغيرة ولو كانت بعرض 1 بكسل فقط ونضعها كخلفية للصفحة حتى تكون صفحة الانترنت متمددة
ومع الممارسة ستصبح روتينية
وبالنسبة لعلمية التقطيع قمت بعمل مقطع فيديو لسهولة المتابعة :
التحميل :
ميديا فاير : download
رابط مباشر : download
الحجم : 3.8 م ب

بعد متابعة مقطع الفيديو لعملية التقطيع فإننا سنحصل على الصور التالية :

logl: العرض 462 بكسل والارتفاع 119 بكسل



red : الارتفاع 31 بكسل (لايهمنا العرض لأنه جزء متكرر )



shadow: الارتفاع :23 بكسل



up : الارتفاع : 119 بكسل

black : الارتفاع 31 بكسل



سنقوم الآن بعمل الجدول المكون من أربعة صفوف و نقسم الخلية الأولى إلى خليتين كما تعلمنا في دروس الجداول في دورة html



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



والكود الخاص بالجدول هو :




tahasoft.com دورة برمجة مواقع الانترنت في






















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




tahasoft.com دورة برمجة مواقع الانترنت في


















1 2
3
4
5




النتيجة:

الآن في الخلية التي تحوي رقم 2 سنضع الصورة الأولى ( الشعار )
وذلك باستخدم وسم Img
أي نضع بدلاً من رقم 2 داخل الكود السابق ما يلي :

ونجعل عرض الخلية التي تحوي الصورة في الجدول بعرض أصغر أو يساوي عرض الصورة
فيصبح الكود كما يلي :
(ملاحظة : يتم استخدام مسار الصورة المرفوع على الانترنت في الكود التالي كي تستطيع تجربة الكود على محرر الأكواد )




tahasoft.com دورة برمجة مواقع الانترنت في


















1
3
4
5






في الخلية التي تحوي رقم 1 سنضع لها خلفية الصورة ذات الاسم up.png
و ذلك كصورة متكررة على المحور x كما تعلمنا في الدرس السابق:

ولا ننسى ضبط أبعاد الخلايا دوماً وهذه نقطة مهمة يجب التركيز عليها دائماً من أجل توافق الصفحة مع كافة متصفحات الانترنت
في الخلية رقم 3 سنضع الصورة blackكخلفية مع ضبط أبعاد td ( نضبط الارتفاع فقط )
الكود كاملاً لحد هذه الخطوة :




tahasoft.com دورة برمجة مواقع الانترنت في


















4
5





في الخلية رقم 4 نضع الصورة red كخلفية مع ضبط الأبعاد بنفس الطريقة السابقة
وفي الخلية رقم 5 سنضع الصورة shadow كخلفية أيضاً كما سبق مع ضبط الارتفاع:
الآن نضع أبعاد الجدول على صفر فيكون الكود النهائي :
 


tahasoft.com دورة برمجة مواقع الانترنت في



















والنتيجة :


وبفصل جزء css عن html يصبح الكود كما يلي :
 



tahasoft.com دورة برمجة مواقع الانترنت في


















أو نضع ملف css مستقل اسمه style.css و يحوي الكود التالي:
.first{
background-image:url('http://img852.imageshack.us/img852/5584/60550878.png');
background-repeat: repeat-x;
}
#logo{
width:426px;
heigh:119px;
}
.black{
background-image:url('http://img863.imageshack.us/img863/6083/blackf.png');
background-repeat: repeat-x;
height:30px;
}
.red{
background-image:url('http://img560.imageshack.us/img560/5581/redaw.png');
background-repeat: repeat-x;
height:31px;
}
.shadow{
background-image:url('http://img215.imageshack.us/img215/5473/shadowod.png');
background-repeat: repeat-x;
height:23px;
}
وملف html يحوي :
 



tahasoft.com دورة برمجة مواقع الانترنت في


















في النهاية أضع لكم ملف يحوي التطبيق السابق
حيث أننا وضعنا في الأمثلة روابط الصور المرفوعة على الانترنت ( على Imageshuck )
أما بشكل عملي فيكون كما ذكرنا كملفات متجاورة
تحميل التطبيق العملي
download رابط آخر : download

الوظيفة :
إكمال الجزء المتبقي من الصورة :

أي إكمال صفحتي html,css السابقتين ليكتمل التصميم
وذلك بعد تقطيع الصور

سلاااااااااام

التعليقات (6)

صمت العواصف     
بالإمكان تحميل المقطع من الرابط التالي:
http://www.fileden.com/files/2010/8/17/2944804//slicing_tahasoft.com.rar


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

زهير طه     

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



بالإمكان تحميل المقطع من الرابط التالي:
http://www.fileden.com/files/2010/8/17/2944804//slicing_tahasoft.com.rar
صمت العواصف     

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

حسن صحارى     
درس رهيب ومن اساسيات لغة الــcss لعمل واجهات المواقع
مشكوور يغالي وبارك الله فيك وتابع ونحن معك
قد نكون غائبين بحضورنا في الموقع ولكن حاضرين بقلوبنا فيه
mher90     
شكراً
jalal_4e     

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