عند تصميم المواقع ، غالبًا ما يتعين عليك حل سؤال أساسي: ما هو سلوك الصفحة عند فتحها بدقة شاشة مختلفة؟ هناك خياران هنا - "المطاط" (تمتد) صفحات الموقع أو ثابت. سيتم مناقشة الخيار الأول. مهما كان ما تفضله للتخطيط ، فإن المبدأ الرئيسي لتصميم الامتداد هو قابلية التوسع النسبية.
انه ضروري
- - معرفة HTML.
- - برنامج لتحرير كود html.
تعليمات
الخطوة 1
حدد الملف الرئيسي لقالب الموقع الخاص بك ، والذي سيعكس الترميز الرئيسي. يمكن أن يكون ملف index.html أو index.php. يعد Macromedia Dreamweawer أحد أفضل برامج تحرير قوالب المواقع المرئية. سيتم إجراء التحرير اللازم على أساس هذا البرنامج.
افتح ملف القالب أو أنشئ ملفًا جديدًا عن طريق الأمر "ملف" - "جديد" ، أو الفئة - "الصفحة الأساسية" - "HTML" أو الفئة "صفحة ديناميكية" - "PHP". هنا نأخذ في الاعتبار الحالة العامة عندما يتم تسجيل بنية الموقع في أحد الملفين بالضبط.
الخطوة 2
لم يكن سراً منذ فترة طويلة أن هناك أنواعًا مختلفة من التخطيطات - على الجداول وعلى كتل div ومجتمعة (الجداول والكتل في نفس الوقت). علامة html مسؤولة عن تخطيط الجدول
حدد نسبة (100٪) لكل خاصية. سيحقق هذا تأثير تمديد خلايا الجدول تلقائيًا على الشاشات بأي شكل هندسي. يمكن أن تكون شاشة مقاس 19 بوصة أو هاتفًا ذكيًا - كل واحد منهم سيعيد إنتاج المحتوى بشكل صحيح.
الخطوه 3
إذا كنت بحاجة إلى تحديد المراسلات بالضبط بين خلايا الجدول ، فاستخدم المثال التالي:
| … … محتويات الخلية 1. … | … … محتويات الخلية 2. … |
هنا سترى أن إحدى الخلايا محددة بعرض 30٪ من كل ما تم تعريفه للجدول نفسه. تظهر عملية حسابية بسيطة أن 100٪ -30٪ = 70٪ متبقية للخلية الثانية. تذكر أنه في هذه الحالة ، يجب ألا تحتوي إحدى خلايا الجدول على سمة العرض المحددة. سيقوم المتصفح بإجراء جميع العمليات الحسابية بمفرده وسيقوم بتمديد الجدول بالخلايا بشكل صحيح. سوف يمتد المحتوى الموجود داخل الجداول ويتقلص بشكل صحيح عبر الشاشات المختلفة.
الخطوة 4
في حالة وجود تخطيط div ، يتم تمديد كتل العلامات افتراضيًا إلى العرض الكامل للشاشة وتتبع واحدة تلو الأخرى من اليسار إلى اليمين ، من أعلى إلى أسفل. لتحسين هندستها ، قم بإنشاء فئة CCS أو معرف (ID) ، تحدد فيه ، على سبيل المثال ، السمات و / أو لفئة الحجم وموضع المربع (Box). لا تنس ربط النمط المحدد بملف ترميز الموقع وربط الفئة (ID) بالعلامة المطلوبة. عادةً ما يتم وضعها في بداية البرنامج النصي ، مع تحديد كل هندسة الموقع المستقبلية:
… … محتوى الموقع. …
او مثل هذا:
… … محتوى الموقع. …
سيكون رمز قاعدة CSS كما يلي:
… صفي {
العرض: 30٪؛
الارتفاع: 50٪؛
}
#myID {
العرض: 30٪؛
الارتفاع: 50٪؛
}
