دورة برمجة مواقع الانترنت - لغة 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



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



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

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

    

        
1
        
2
    
    

        
3
    
    

        
4
    
    

        
5
    

النتيجة:

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

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

    

        
1
        

    
    

        
3
    
    

        
4
    
    

        
5
    

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

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

الكود كاملاً لحد هذه الخطوة :

    

        

        

    
    

        

    
    

        
4
    
    

        
5
    

في الخلية رقم 4 نضع الصورة red كخلفية مع ضبط الأبعاد بنفس الطريقة السابقة

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

والنتيجة :


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

أو نضع ملف 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 يحوي :

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

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

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

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