كيفية تقسيم الموقع

جدول المحتويات:

كيفية تقسيم الموقع
كيفية تقسيم الموقع

فيديو: كيفية تقسيم الموقع

فيديو: كيفية تقسيم الموقع
فيديو: تصميم مواقع HTML الدرس (8) ~ تقسيم الموقع بإستخدام Div 2024, يمكن
Anonim

يبدأ إنشاء موقع الويب الخاص بك دائمًا بتطوير رسم تخطيطي وتصميم مستقبلي ، وجزء لا يتجزأ من هذا التطوير هو تصور تصميم الموقع في Photoshop وتقطيع التصميم النهائي إلى كتل من أجل التخطيط اللاحق. تؤثر القدرة على قص صورة لتصميم الموقع بشكل مباشر على النجاح الإضافي للتخطيط والموضع الصحيح لملفات الرسوم على الخادم.

كيفية تقسيم الموقع
كيفية تقسيم الموقع

تعليمات

الخطوة 1

افتح مخطط التصميم الذي تم إنشاؤه في Photoshop ، وهو صورة صلبة للدقة المطلوبة. من شريط الأدوات في Photoshop ، حدد أداة Slice. قم بإيقاف تشغيل رؤية جميع طبقات النص وحقول الإدخال والأيقونات والعناصر المماثلة مؤقتًا.

الخطوة 2

ارسم بالأداة المختارة خطوط الإرشاد التي ستقطع عليها الموقع - ستكون هذه الخطوط على الصورة خضراء. قسّم التصميم المكون من قطعة واحدة بعناية إلى عناصر هيكلية بالحجم والكمية المطلوبين.

الخطوه 3

فكر في كيفية قص الصورة - يجب ألا يكون هناك الكثير من العناصر الفردية فيها. لإنشاء خطوط إرشادية ، ضع المؤشر على المسطرة العلوية فوق الصورة ، وانقر بزر الماوس الأيسر واسحب الدليل لأسفل. حرر زر الماوس.

الخطوة 4

بعد تعيين جميع الأدلة (الرأسية والأفقية) ، انتقل إلى تقسيم التخطيط.

الخطوة الخامسة

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

الخطوة 6

اضبط حدود الأجزاء عن طريق شدها يدويًا. لحفظ الأجزاء المقطعة من الصورة الإجمالية ، انقر فوق الخيار "حفظ لصفحات الويب" في قائمة "ملف" وحدد تنسيق JPEG. في نافذة الحفظ ، حدد "جميع الأجزاء".

الخطوة 7

بعد حفظ أجزاء الصورة المقطوعة بشكل منفصل ، احفظ جميع العناصر المرئية لتصميم الصفحة - الكتل النصية والأزرار والخطوط وما إلى ذلك.

موصى به: