تخطيط التكيف Notml5 و CSS3. إنشاء صفحة تكيفية في HTML5 و CSS3 للمبتدئين لمدة ستة خطوات! تخطيط التكيف على HTML5 و CSS3

من المؤلف: منذ أن بدأت على الشبكة تظهر مقالات تظهر خصائص جديدة من HTML5 و CSS3، كان لدي فكرة إنشاء إنشاء موقع بدون صور. أخذ تحسين HTML5 و CSS3 للدرج (مقارنة مع مواصفات البريد السابقة)، فليس من الصعب للغاية مطاردة موقع ويب يستحق المظهر لا يلزم الاعتماد على الصور كعناصر من العلامات.

فيما يلي صورة الموقع الذي سيتم نقله على HTML5 و CSS3:

قبل أن ننتقل إلى الخطوات العملية، أوصي بك لعرض العمل التجريبي.

يمثل Header Element (Header) مجموعة تمهيدية أو وسيلة مساعدة للملاحة.

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

عنصر hgroup

الأول داخل عنصر الرأس هو علامة جديدة جديدة - Hgroup. سوف نستخدمه لعرضه وفقا لشعار موقعنا ورجمه في العلامات H1 و H2.

يستخدم عنصر HGROUP لتجميع عناصر H1-H6 التي تم تعيينها عندما يحتوي العنوان على مستويات متعددة، مثل الإشعاحات البيانية، أسماء بديلة أو ترجمات.

يمكن أن يكون عنصر HGROUP غير ضروري حتى يتم غلافه، كالمعتاد، عناوين الصحف في عنصر DIV من أجل اسم أو إرسال شرعية حسب الخلفية أو النمط العادي. ومع ذلك، في مخطط وثيقة HGROUP يلعب دورا مهما. خوارزمية المخطط تحقق من صفحتك وإنتقال هيكل الرأس. تحقق من رسم عملك باستخدام أداة Outliner. عندما يواجه خوارزمية المخطط عنصر HGROOP، فإنه يتجاهل كل شيء باستثناء عنوان أعلى مستوى (عادة H1).

الآن لدينا مشكلة: خوارزمية المخطط ليست بلا عيوب وغير مكتملة. على سبيل المثال، العنصر التالي الذي سنناقشه هو عنصر NAV، وعلامات العلامات بعلاماتها ك "قسم بلا عنوان" (منطقة Unnamed). تلقى مطورو العلامات طلبات التغيير في خوارزمية المخطط من أجل عنصر NAV باسم "الملاحة". على أي حال، يوفر لك عنصر HGROOP طريقة لمجموعة عناوينك، وبالتالي، تنظم كل من النيكلية وذات الشكل.

NAV Element

نذهب إلى عنصر HTML5 - NAV التالي. في NAV، سنقوم بتشغيل الملاحة الرئيسية للموقع، ملفوفة في قائمة غير مرتبة.

يمثل عنصر NAV قطاع الصفحة الذي يشير إلى صفحات أو مناطق أخرى داخل الصفحة: منطقة مع روابط التنقل.

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

المنشورات ذات الصلة.

وفقا للمواصفات، قد تكون هذه حالات مناسبة أو غير مناسبة من استخدام عنصر NAV. المواصفات ليست واضحة جدا، والأمثلة المقدمة ليست مساعدة للغاية. لذلك في حين أن المواصفات ليست نهائية وأكثر تحديدا، لتحديد الطريقة الصحيحة يمكن ضبط استخدام عنصر NAV فقط لمجتمع المطور.

عنصر المادة

العنصر التالي الذي أريد تخيله - المادة. تحتوي المنطقة الرئيسية في صفحة التوضيحية لدينا على ثلاثة اقتباسات من المشاركات، وكل منهم سوف نتفوت في مقال العلامة.

XHTML.

2010

16apr.

نموذج آخر 1.

38

Curabitur UT Congue Hac، Diam Turpis [...]

2010 16 أبريل نموذج آخر 1. 38 Curabitur UT Congue Hac، Diam Turpis [...]

هنا هو تعريف W3C لمقال:

المادة هي مقال في تكوين المستندات المعيارية [...]، وبالتالي، فمن المقصود أن تصبح موزعة بشكل مستقل أو تستخدم مرارا وتكرارا، على سبيل المثال، عند التعليق (محتوى نشر في وقت واحد على عدة مواقع الويب).

هذه المرة المواصفات أكثر فهم والنشر في المدونة (أو مرورها) أفضل بكثير ( الانتباه إلى ذكر السقوط) مناسبة للمقال. بالطبع، يمكننا وضعها في الصفحة العديد من عناصر المقالات.

لقد لاحظت بلا شك أن داخل المقالة وضعنا عناصر الرأس وتذييل الصفحة. يمكن استخدام كل من الرأس والتذييل أكثر من مرة في صفحة HTML منفصلة. نظرا لأن رأسه هو "مجموعة تمهيدية أو عنصر ملاحة مساعد"، فإننا تضمننا التاريخ والاسم وعدد التعليقات. بعد ذلك، لدينا فقرة مع مقتطف من المنصب، تليها تذييل (تذييل).

عنصر تذييل الصفحة

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

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

تحتوي صفحة التجريبية لدينا على أربعة عناصر تذييل: واحد لكل عنصر من عناصر المقالات الثلاث والتذييل الكلي للصفحة بأكملها. يحتوي تذييل الصفحة في عنصر المقالة على اسم مؤلف المنشورات والعلامات والروابط إلى الرابط النسخة الكاملة المشاركة في بلوق.

يحتوي تذييل التذييل الإجمالي على ثلاثة عناصر من الأقسام وإشعار حقوق النشر. كلا الخيارين لاستخدام عنصر التذييل مشروع ومطلوب توصيات W3C.

قسم العنصر.

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

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

عنصر القسم هو ماكرة إلى حد ما، لأنه في تعريف المواصفات يبدو مشابها للغاية لعنصر DIV. اشتعلت في هذا الفخ عندما بدأت كتابة التعليمات البرمجية للحصول على صفحة تجريبية؛ أنا نشرت داخل عنصر القسم ثلاثة عناصر المادة. قريبا فهمت مغالطة أساليبي. الطريقة الوحيدة لتحديد ما إذا كنت تريد استخدام القسم هي معرفة ما إذا كنت بحاجة إلى المنطقة التي تريد التفاف عنصر القسم، الاسم (العنوان). من التعريف، من الواضح أن عنصر القسم عادة ما يكون له رأس.

سؤال آخر مفيد لتحديد تأسيس صحة استخدام عنصر القسم هو: هل تضيفها حصريا للأساليب؟ تضيفها ببساطة لأنك تحتاج إلى تسليط الضوء على هذا القسم باستخدام JavaScript، أو لأنك تحتاج إلى تطبيق النمط المعتاد لذلك، وأنت بدلا من استخدام عنصر DIV.

سيتم تبرير التفاف في قسم عناصر المقالة الثلاث من صفحة العرض التوضيحي لدينا إذا تضمن القسم عنوان النوع "أحدث المشاركات في المدونات". من المنطقي؛ خلاف ذلك، توجد العلامة، داخل أي عناصر المادة - إنها مجرد أنماط تدعم - شيء يساعدنا في تحقيق ذلك مساعدة جافا سكريبت أو CSS.

عنصر جانبا

هذا الأخير يستخدم لعنصر الصفحة التجريبي HTML5 - جانبا؛ استخدمناها كحاوية عمود جانبي.

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

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

لقد وضعنا قسمين ونقل واحد. يحتوي قسم القسم الأول على روابط إلى Twitter و RSS، والثاني يمثل التغريد الأخير (إدخال المستخدم في Twitter). قسم العنصر الثاني، إلى جانب ذلك، واحدة من الحالات النادرة عندما لا يكون لها رأس. يمكن أن يكون له اسم، شيء مثل: "التغريدة الأخيرة"، لكنني أعتقد أنه اختياري، لأن القراء اعتادوا على رؤية الكتل مثل هذا، ولكن تسمية Twitter تحت الاقتباس يمكن التعرف عليها للغاية. يستخدم عنصر NAV من مكبر الصوت الخاص بنا لتعكس قائمة المدونات، وعلى عكس الملاحة الرئيسية، فإنه يحتوي على رأس.

الكلمة الأخيرة

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

شكرا على القراءة ولا تفوت الجزء الثاني من المقالة، حيث سنناقش خصائص CSS3 المستخدمة لتزيين العلامات.

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

الافتتاحية: قرن فيكتور وأندريه برنانسكي. أمر WebFormyself.

بدون HTML5 و CSS3 بعيدا عن الإجازة

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

هل تعرف أن...

الآن في نتائج البحث (في الأعلى 10) ياندكس 55٪ هي مواقع ذات تصاميم تكيفية يمكن أن تتكيف مع الأجهزة المحمولة. هذا يشير إلى أن ياندكس (وجوجل أيضا) يعطي تفضيل أكبر للمواقع ذات التصميم التكيفي. أولئك. أولئك الذين يعد المستخدم مريحة.
و HTML5 و CSS3 أضف إلى الموقع ميزات إضافيةالتي يمكننا أن نجعل الموقع أكثر ملاءمة.
لكل من المستخدمين والروبوتات.
الصفحة المقصودة ( الصفحة المقصودة, الصفحة المقصودة) يخدم تحويل الزوار إلى المشتركين أو العملاء.
كما أنها تستخدم في بعض الأحيان لحركة المرور المجزأة.
صفحة الهبوط يمكن أن تكون مثل واحد صفحة منفصلة على المجال وكجزء من موقع ويب كامل.
في هذه الحالة، يتحرك الموقع في البحث، ويستخدم الهبوط للإعلان في Yandex.Direct، Google ADWOD، الهدف VKontakte، إلخ.
مثل هذه المجموعة تسمح الحد الأقصى لاستخدام الكثير من أدوات التسويق عبر الإنترنت.
أصبح من الممكن الآن التعلم بسرعة وتطبيق كل هذا في أنشطتك.

HTML5 + CSS3 + القدرة على التكيف + الصفحة الهبوط
مع هذه الدورة، يمكنك:

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

ملخص الدورة

جزء المدخلات

ميزات جديدة في HTML5 و CSS 3، والتي تبسيط وتسهيل عملية وضعها وتسهيلها.
العلامات الدلالية - أسرارها وما هو مطلوب ل.
إدراج كائنات الوسائط - كيفية إدراج الصوت والفيديو دون لاعب.

جزء عملي

التخلص التدريجي الخلق صفحة الهبوط.
من تخطيط التخطيط، تخطيط كل كتلة من تعقيد مختلف، قبل توصيل البرامج النصية و محاولات PHP. للنموذج
دائري / منزلق، التمرير السلس، أزرار، CSS Sprites.، التحقق من النماذج، إلخ.

إضافي. مواد

في مواد إضافية، هناك جميع البرامج النصية والمصادر التي سنعمل بها + أسرة مع رمز يمكن نسخها وإدراجها في المكان المناسب.
وكذلك مصادر مفيدة أخرى.
عدد دروس الفيديو: 23

ماذا يمكن أن يكون بعد اجتياز هذه الدورة؟

قيد التحضير

استيقظ تخطيط PSD مع Photoshop
قطع الصور المرجوة من تخطيط PSD
تجد تصاميم جميلة الصفحة الرئيسية والمواقع
كتل تصميم ومراحل الطبقات
الجمع بين الرموز في CSS العفاريت
العمل مع برنامج PHPDesigner

من حيث Worski

الاتصال الخطوط الجميلة من مستودع جوجل
استخدام بفعالية pseudoclass.
تكييف الموقع تحت جميع الأجهزة المحمولة
استخدام 2 والمزيد من الخلفية للكتلة، الرسوم المتحركة، التحول، RGBA، إلخ.
العمل مع طلبات @
خرائط ياندكس التفاعلية
قم بإنشاء Sprites CSS وسرعة تحميل الصفحة
استخدام الأساليب قبل التفكير (عن طريق القياس مع الأطر، مثل bootstrap)

من حيث التحسن

إنشاء تأثيرات تحوم ("تنشيط" عند تحوم)
قم بالتمرير السلس للمكتلات والزر "UP"
إجراء التحقق من صحة ردود الفعل ل jQuery
إنشاء نماذج ملاحظات الذكية مع علامات انتقال UTM
توصيل وتكوين الأهداف في Y.Metric باستخدام الأحداث
تسهيل الصفحات مما يجعلها تحميل أسرع
تحقق والقضاء على العيوب على الصفحات

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

تستخدم محركات البحث عددا من المعايير لتقييم إمكانية تكيف الموقع عند العرض أجهزة محمولةأوه. يحاول Google تبسيط استخدام الإنترنت لأصحاب الهواتف الذكية والأجهزة اللوحية، مشاريع في إصدار الأجهزة المحمولة المضيفة بموجب مواقع الأجهزة المحمولة من الأجهزة المحمولة.وبعد تعمل Yandex أيضا الخوارزمية التي تفضل المواقع بنسخة متنقلة / تكيفية للمستخدمين في بحث متنقل.

يمكنك التحقق من عرض الصفحة على الأجهزة المحمولة على الخدمات و.

تين. 1. ياندكس المحمول وإصدار جوجل مع ملاحظة حول الود في الموقع إلى الأجهزة المحمولة

ما هو تخطيط التكيف

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

يتم تقديم التقنيات الرئيسية لإنشاء موقع متكيف في المقال. ل الرسم المتجاوب يتم تعيين عرض الحاوية الرئيسية للموقع في٪، في حين أنه يمكن أن يساوي عرض 100٪ من نافذة المتصفح وأقل. يتم تعيين عرض أعمدة الشبكة أيضا في٪. في التصميم التكيفي تم إصلاح عرض الحاوية الرئيسية وأعمدة الشبكة باستخدام القيم في PX.

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

خزانة الصفحة الرئيسية

تتكون الصفحة من ثلاث كتل رئيسية: تذييل التذييلات (CAP)، حاوية المجمع للمحتوى الرئيسي و SAGBAR، وتذييل (تذييل). كقطة تحول نقاط التصميم، تأخذ 768px و 480 بكسل.

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

تين. 2. مثال على التخطيط التكيفي

1. Metagelet والقسم

1) أضف إلى القسم الملفات المطلوبة هي رابط للخطوط المستخدمة، ومكتبة مسج، بالإضافة إلى البرنامج المساعد البادئة (عدم الكتابة خصائص بادئات المتصفحات):

2. غطاء صفحة

في رأس الصفحة

ضع حاويات العناصر التالية:
شعار ;
زر لعرض / إخفاء القائمة الرئيسية

;
القائمة الرئيسية

;
نموذج بحث الموقع
.

3. كتلة مع ملخص المقال

مقالات الإعلان التفاف العنصر

:



تصميم

ربيع

غني جدا باللغة الروسية مع الكلمات المتعلقة بوقت السنة والظواهر الطبيعية، معهم ذات الصلة.

أكمل القراءة

...

4. العمود الجانبي

في العمود الجانبي

5. تذييل nution

في الطابق السفلي من الصفحة، ضع معلومات حول نسخ وأزرار الشبكات الاجتماعية وربطها بريد إلكتروني:

6. أنماط CSS المشتركة

أنماط عامة، إعادة تعيين نمط المتصفح الافتراضي:

*، *: بعد ذلك، *: من قبل (تحجيم مربع: مربع الحدود؛ الحشو: 0؛ الهامش: 0؛ الانتقال: .5S سهولة الخروج؛ / * إضافة نعومة التحولات لجميع عناصر الصفحات * /) UL (نمط القائمة: لا شيء؛) أ (نصية النصية: لا شيء؛ الخطوط العريضة: لا شيء؛) img (العرض: كتلة؛ العرض: 100٪؛) H1، H2، H3، H4، H5، H6 (font-family: "عرض Playfair"؛ Font-Winal: طبيعي؛ تباعد الرسالة: 1PX؛) هيئة (Font-face: "Open Sans"، Arial، Sans-Serif؛ Font-Size: 14PX؛ خط الارتفاع: 1؛ # اللون: # اللون: 373737؛ خلفية: # F7F7F7؛) / * إضافة تدفق التنظيف لجميع الحاويات، من الداخل التي يتم تعيينها على التدفق حول عناصر الأطفال * / الرأس: بعد، .container: بعد، تذييل الصفحة: بعد، قائمة المشاركات : بعد، #SubScribe: بعد (المحتوى: "؛ عرض: جدول؛ واضح: كلاهما؛) / * فئة النمط، والتي تتحكم في عرض حاوية الشبكة * / .container (الهامش: 0 السيارات؛ العرض: 100٪؛ ماكس العرض: 960 بكسل؛ الحشو: 0 15px؛)

7. أنماط لغطاء ومحتوياتها

رأس (العرض: 100٪؛ خلفية: أبيض؛ مربع الظل: 3PX 3PX 1PX RGBA (0،0،0، 0.05)؛ الحشو: 15px 0؛ الهامش أسفل: 30px؛ الموقف: قريب؛) / * logo * / .logo (العرض: كتلة؛ تعويم: اليسار؛) .logo span (اللون: أبيض؛ عرض: كتلة مضمنة؛ العرض: 30px؛ الارتفاع: 30px؛ خط الارتفاع: 30px؛ دائرة نصف قطرها: 50٪؛ الهامش: 5px 0؛ نص محاذاة: مركز؛ نص-الظل: 2PX 2PX 1PX RGBA (0،0،0، .4)؛) .logo span: nth-child (groad) (الخلفية) #) NTH- الطفل (حتى) ( 111؛ تحويل النصوص: الأحرف الكبيرة؛ خطاب تباعد: 1px؛ خط الوزن: 600؛ عرض: كتلة؛ خط الارتفاع: 40px؛) #Menu a: hover (اللون: # EF5A42؛) #menu li: الطفل الأخير (الهامش اليمين: 0؛) / * نموذج البحث * / #Searchform (تعويم: اليمين؛ الهامش يسارا: 46px؛ عرض: مضمنة كتلة؛ الموقف: النسبي؛ الإدخال (العرض: 170px؛ تعويم: اليسار؛ الحدود: لا شيء؛ الحشو اليسار: 10 بكسل؛ الارتفاع: 40px؛ تجاوز: مختفي؛ الخطوط العريضة: لا شيء؛ اللون: # 9E9C9C؛ نمط الخط: مائل. ) # rearchform زر (خلفية: شفافة؛ الارتفاع: 40 بكسل؛ موقف: مطلق؛ الحق: 10 بكسل؛ اللون: # EF5A42؛ المؤشر: مؤشر؛ font-size: 18PX؛ الإدخال: التركيز (الخطوط العريضة: 2PX الصلبة # EBEBE3؛) / * زر التبديل الظهور مع عرض 768PX * / .NAV-Toggle (العرض: لا شيء؛ الموقف: قريب؛ تعويم: اليمين؛ العرض: 40PX؛ الارتفاع: 40PX؛ الهامش اليسار: 20 بكسل؛ الخلفية: # EF5A42؛ المؤشر: مؤشر؛) .NAV-Toggle SPAN (العرض: بلوك؛ الموقف: مطلق؛ أعلى: 19 بكسل؛ اليسار: 8 بكسل؛ اليمين: 8px؛ الارتفاع: 2px؛ خلفية: أبيض؛) .NAV-Toggle SPAN: قبل ، .NAV-Toggle span: بعد (المحتوى: "؛ الموقف: مطلق؛ عرض: كتلة؛ اليسار: 0؛ العرض: 100٪؛ الارتفاع: 2px؛ الخلفية: أبيض؛) .NAV-Toggle span: قبل (top: -10 بكسل؛) .NAV-Toggle span: بعد (أسفل: -10px؛) / * سيتم إضافته إلى القائمة العلوية عند الضغط على الزر وإظهار القائمة المخفية * / # Menu.active (أقصى ارتفاع: 123px؛)

8. أنماط كتلة مع المحتوى الأساسي

/ * حاوية اليسار * / .posts- قائمة (الهامش أسفل: 30px؛ العرض: 64٪؛ تعويم: اليسار؛) / * كتلة للمادة * / .Post (الهامش أسفل: 35px؛). poost المحتوى p ( خط الارتفاع: 1.5؛ قاع الحشو: 1EM؛) .POST الصورة (أسفل الهامش: 30PX؛). الفئة (الهامش أسفل: 15 بكسل؛). الفئة A (اللون: # F8B763؛ تحويل النص: الأحرف الكبيرة؛ ) .Post العنوان (الهامش أسفل: 12px؛ حجم الخط: 26 بكسل؛) / * كتلة مع زر "متابعة القراءة" وأزرار الشبكات الاجتماعية * / .Post-تذييل الصفحة (الحدود الحدودية: 1PX الصلبة # Ebebe3؛ الحد من الحدود: 1PX الصلبة # EBEBE3؛ الموقف: قريب؛ هامش أعلى: 15 بكسل؛). المزيد رابط (الوظيفة: النسبية؛ عرض: كتلة مضمنة؛ خط الحجم: 10px؛ تحويل النص: أبيض؛ اللون: أبيض؛ Line -Height: 44px؛ الحشو: 0 22 بكسل؛ خلفية: # 3C3D41؛ مساحة الحرف: 0.1EM؛ المساحة البيضاء: NowRAP؛). المزيد من الرابط: بعد (المحتوى: "؛ عرض: كتلة؛ الموقف: مطلق؛ العرض: 0؛ الارتفاع: 0؛ أعلى: 0؛ صحيح: 0؛ الحدود: شفاف صلب؛ عرض الحدود: 22px 18px؛ الحدود اليسارية اللون: # 3C3D41؛ تحويل: translatex (100٪ ) ) .Post الاجتماعي (الموقف: مطلق؛ اليسار: السيارات؛ أعلى: 50٪؛ اليمين: 0؛ نص محاذاة: الحق؛ تحويل: ترترلي (-50٪)؛ الحشو: 0؛ font-size: 12px؛). بعد الاجتماعية أ (عرض: كتلة مضمنة؛ الهامش اليسار: 8 بكسل؛ اللون: # F8B763؛ العرض: 25 بكسل؛ الارتفاع: 25 بكسل؛ خط الارتفاع: 23px؛ محاذاة النص: مركز؛ حدود نصف قطرها: 50٪؛ الحدود : 1px الصلبة؛)

9. أنماط العمود الجانبي

/ * الحاوية الصحيحة * / جانبا (العرض: 33٪؛ تعويم: اليمين؛) / * كتلة للحاجيات * / .widget (الحشو: 20px 15px؛ خلفية: أبيض؛ الخط الحجم: 13px؛ الهامش أسفل: 30 بكسل؛ مربع -Shadow: 3PX 3PX 1PX RGBA (0،0،0، 0.05)؛) .widget العنوان (الخط الحجم: 18px؛ الحشو: 10px؛ الجزء السفلي الهامش: 20px؛ نص محاذاة: مركز؛ الحدود الصلبة # F8B763. - الفئة - قائمة LI: الطفل الأخير (أسفل الحدود: لا شيء؛) .widget-فئة - قائمة LI A (اللون: # 626262؛ الهامش الأيمن: 6PX؛ نمط الخط: طبيعي؛). قائمة LI A: قبل (المحتوى: "\\ f105"؛ عرض: كتلة مضمنة؛ font-face: "fontawesome"؛ الهامش الحق: 10 بكسل؛ اللون: # C6C6C6؛) .widget-المشاركات - قائمة LI (أعلى الحدود: 1px الصلبة # ebebe3؛ الحشو: 15px 0؛) .widget- المشاركات - قائمة Li: Nth-child (1) (أعلى الحدود: لا شيء؛). post-image-small (العرض: 30٪؛ تعويم: اليسار؛ الهامش صحيح: 15 بكسل؛) .widget-العنوان (تعويم: اليسار ؛ . : 0 0 10 بكسل؛ الارتفاع: 40 بكسل؛ الموقع؛ الخطوط العريضة: لا شيء؛ اللون: # 9E9C9C؛ خطط الخط: مائل؛) # إضافي زر (الحشو: 0 15px؛ خلفية: شفافة؛ ارتفاع: 40 بكسل؛ الحدود: لا شيء؛ الموقف: مطلق؛ اليمين: 0؛ اللون: # EF5A42؛ المؤشر: مؤشر؛ الخط الحجم: 18 بكسل؛) #Spscribe المدخلات: التركيز + زر (الخلفية: # EF5A42؛ اللون: أبيض؛

10. أنماط لتذييل التذييل

يتم تقسيم الطابق السفلي الموقع إلى ثلاثة أعمدة متساوية:

تذييل (الحشو: 30px 0؛ خلفية: # 3C3D41؛ اللون: أبيض؛) .footer-col (العرض: 33.3333333333٪؛ تعويم: اليسار؛) .Footer-col a (اللون: الأبيض؛) .footer-col: last- الطفل (محاذاة النص: اليمين؛). شريط التفاف (محاذاة النص: المركز؛). شريط التفاف ألف (الحشو: 0 7px؛ fon-size: 18px؛)

11. طلبات وسائل الإعلام

@ media (الحد الأقصى العرض: 768px) (/ * إظهار الزر لتبديل الملاحة العليا * / .nav-Toggle (عرض: حظر؛) رأس (الحشو: 10px 0؛) / * إخفاء القائمة العلوية، سنقوم بالإلغاء التدفق، وضع موقفه، خلطها، خلطها إلى ارتفاع قبعات الموقع * / #Menu (الحد الأقصى الارتفاع: 0؛ خلفية: أبيض؛ تعويم: لا شيء؛ الموقف: مطلق؛ تجاوز: مخفي؛ أعلى: 63px؛ اليمين: 0؛ اليسار : 0؛ الهامش: 0؛ الحشو: 0؛ z- الفهرس: 3؛) / * نصنع عناصر كتلة القائمة بحيث تكون موجودة في بعضها البعض * / #Menu LI (عرض: كتلة؛ نص محاذاة: مركز؛ الحدود أسفل: 1PX الصلبة # EBEBE3؛ الهامش اليمين: 0؛) / * نلغي التدفق حول المتكلمين الأيسر واليمين، وضعنا عرض 100٪ * / .POSTS، جانبا (العرض: 100 ٪؛ تعويم: لا شيء؛) .widget-العنوان (خط الحجم: 1.5EM؛) @ media (الحد الأقصى العرض: 480 بكسل) (/ * نلغي التدفق حول الشعار ومحاذاة في المركز * / .logo (تعويم: لا شيء؛ الهامش: 0 السيارات 15px؛ عرض: الجدول؛) .logo span (الهامش: 0 2px؛) / * ضع القائمة على زيادة ارتفاع الرأس * / #Menu (أعلى: 118px؛ ) / * ضع نموذج البحث على الحافة اليسرى * / #Searchform (تعويم: اليسار؛ الهامش يسارا: 0؛) / * قم بإزالة الحدود العلوية والسفلية ومحاذاة الزر في المركز * / .Post-تذييل التذييل (الحدود أعلى: بلا حدود أسفل: لا شيء؛ محاذاة النص: المركز؛) / * نحن نلغي وضع أزرار الشبكة الاجتماعية * / .POST-Social (الوضع: ثابت؛ نصي محاذاة: المركز؛ تحويل: لا شيء؛ الهامش -Top: 20px؛) .widget- العنوان (حجم الخط: 1.2 متر؛) / * نحن نلؤلاء التدفق حول أعمدة الطابق السفلي من الصفحة * / .Footer-colt (تعويم: لا شيء؛ أسفل الهامش: 20px؛ العرض: 100٪؛ نص محاذاة: مركز؛). FOODER-COL: الطفل الأخير (النص المحلي: المركز؛ الهامش أسفل: 0؛))

12. البرنامج النصي لقائمة الجوال

بالنسبة للقائمة العلوية المختبئة بالختبس عند النقر فوق الزر (تبديل ارتفاع القائمة - من الصفر إلى المحتوى المتساوي) يتوافق مع رمز مسج، والتي تم إضافتها مسبقا إلى علامة الصفحة قبل علامة الإغلاق :

لقد أصدرنا كتاب جديد "تسويق المحتوى في الشبكات الاجتماعية: كيفية الجلوس في رأس المشتركين والسقوط في الحب مع علامتهم التجارية. "

على وجه الخصوص، تستخدم هذه التكنولوجيا بنشاط في الموقع المعروض على قدم المساواة أنواع مختلفة الأجهزة: أجهزة الكمبيوتر / أجهزة الكمبيوتر المحمولة والهواتف الذكية / الأجهزة اللوحية مع عروض مختلفة.

يتم إنشاء الموقع التكيفي اليوم باستخدام لغة تخصيص HTML5 والجداول المتتالية لأساليب CCS3. ولكن حتى تصبح التقنيات ذات الصلة المعيار لجميع المتصفحات الشائعة، تم استخدام لغة برمجة JavaScript لأغراض مناسبة. حتى في وقت سابق (حتى عام 2010)، اضطررت إلى إنشاء العديد من الخيارات لنفس الصفحات، ولكن مع علامات مختلفة، إلى الموقع الذي تم تطويره بواسطةها عرضا بشكل صحيح على شاشات مختلفة.

ما هو مطلوب تخطيط التكيف للصفحة

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

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

لماذا ومتى يظهر التصميم التكيفي؟

بحلول بداية العقد الثاني من القرن الحادي والعشرين، حاجة صارمة لإنشاء التقنيات، مما يسمح بتطوير صفحات الويب العالمية. مع وجود المتطلبات الأساسية الرئيسية التي أثارت إنشاء وتطوير التصميم التكيفي:

• تدفق كبير على المستخدمين الآخرين عبر الإنترنت؛
• ظهور أجهزة متعددة مع دقة شاشة مختلفة؛
• الضغط من محركات البحث التي بدأت في تطبيق العقوبات على المواقع التي كانت فيها العديد من المتغيرات الصفحات موجودة بنفس المحتوى.

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

بعد بعض الوقت، اقترح شخص آخر وشهيرة إضافات إلى المفاهيم التي أخبرها زميله.

مع ماذا وكيف يخطط التكيف؟

قبل المتابعة للنظر في القضية، التي تتعلق بكيفية التصميم التكيفي، من الضروري النظر لفترة وجيزة في التقنيات الرئيسية المستخدمة. الآن هناك اثنان منهم: HTML5 و CSS3. حتى وقت قريب، تم استخدام HTML4 و CSS2، ولكن حتى تتمكن من إنشاء تصميم عالمي باستخدامها، ويجب استخدام جافا سكريبت.

CSS3 هو جيل جديد من أوراق النمط المتتالية. هذه التكنولوجيا الغرض منه هو إنشاء قواعد لعرض عناصر الصفحة في مستعرض المستخدم. بمساعدة ذلك، يمكنك تحديد، على سبيل المثال، ما حجم يجب أن يكون العنصر بدقة معينة لشاشة المستخدم، أو لتعيين القاعدة التي يجب أن تأخذ دائما نسبة مئوية معينة من الفضاء (100٪ - ملء مساحة العمل بأكملها في المتصفح).

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

لحظة مهمة جدا!

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

بالنسبة إلى HTML5، يتم تمييزه مباشرة بمراكز الصفحة، I.E، يشار إلى حيث يجب وضع بعض العناصر. من أجل السماح بالكائنات، يتم تحديد معلمات علامة HTML مسبقا تم إنشاؤها باستخدام فئات CSS3.

مثال بسيط للتخطيط التكيفي

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

في البداية، مع HTML، سيتم وضع العنصر نفسه في الصفحة:

تشير علامة DIG إلى أن كل ما يتم إبرامه فيه وحدة منفصلة. عندما يكون هناك العديد من هذه الكتل في الصفحة، يتم تحديد سمة "فئة". من الضروري أن يفهم المتصفح كيفية التقدم بطلب للحصول على كتلة معينة.

الآن من الضروري إنشاء القاعدة مباشرة نفسها، ما يسمى

CSS حاوية:

DIV (العرض: 100٪؛ نص محاذاة: مركز؛) DIV IMG (Wight: 100٪؛ الارتفاع: السيارات؛)

يتم طرح هذا الرمز على أذونات التخطيطات التكيفية. على وجه الخصوص، يشير إلى أن العرض (Wight) يجب أن يكون دائما 100٪ من عرض منطقة العمل في متصفح الويب، في حين يتم ضبط الارتفاع (الارتفاع) تلقائيا.

تحقق تخطيط التكيف

هناك أدوات خاصة للتحقق من التصميم التكيفي. على سبيل المثال، في متصفح Googlechrome، يمكنك النقر فوق المفتاح "F12"، ثم، في اللوحة المفتوحة، انقر على الرمز مع صورة الهاتف الذكي والكمبيوتر اللوحي. بعد ذلك، ستظهر عدد قليل من اللوحات التي تريد تحديد التصريح.

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

الأدوات التي تبسط تخطيط التصميم التكيفي

تخطيط التصميم التكيفي - المهمة تستغرق وقتا طويلا. لذلك، لتقليل الوقت لتنفيذ جميع هذه الإجراءات، من الأفضل استخدام الأدوات الخاصة. كواحد من هؤلاء، يمكن استدعاء إطار bootstrap * الشهير *.

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

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

* bootstrap مفتوحة مصدر الرمزطورتها Twitter Inc. إنه ينطبق مجانا وله مجتمع واسع يمكن طلبه دائما أن نسأل.


قال الزعيم الفنزويلي نيكولاس مادورو في برنامج رافائيل كوريا بشأن RT إن الرئيس الأمريكي دونالد ترامب كان له هاجس بفكرة الشعوب الأمريكية اللاتينية. "أنا أتحدث بصراحة ...

ترامب يسمى الحرب مع إيران "الخيار المتطرف"
نحن نتحدث عن الحرب مع إيران في ضوء الهجوم على المنشآت النفطية في المملكة العربية السعودية، وهناك العديد من الخيارات، كما قال الرئيس الأمريكي دونالد ترامم يوم الأربعاء. "هناك العديد من الخيارات. هناك متطرفة ...

zelensky قضى المحادثات الهاتفية مع الأقلام
عقد رئيس أوكرانيا فلاديمير زيلنسكي محادثات هاتفية مع نائب الرئيس الأمريكي مايك بيز. يتم الإبلاغ عنها "البلد". الرئيس الأوكراني شكر بنس في اتصال مع تمديد ...

ودعا البنتاجون روسيا أكبر تحدي للولايات المتحدة في مجال الأمن
وقال رئيس البنتاغون مارك إسباس إن روسيا هي التحدي الأكبر للولايات المتحدة في مجال الأمن في المستقبل القريب. "لا تزال روسيا هي أكبر تحد لنا ...

الهجوم ليس من اليمن: المملكة العربية السعودية تتهم إيران في هجوم على المصفاة
قدمت سلطات المملكة العربية السعودية بشكل جماعي جزء الكسور وغيرها من الطائرات، والتي تم إطلاق سراحها في مصفاة الدولة ليلة السبت 14 سبتمبر. في وزارة الدفاع عن المملكة ...

استجاب ترامب للانخفاض في المعدل الأساسي ل FRAs الفيدرالية الأمريكية
ظل الرئيس الأمريكي دونالد ترامب مرة أخرى غير راضية عن عمل مجلس الاحتياطي الفيدرالي الأمريكي بعد أن أصبح معروفا لتقليل المعدل الأساسي. لقد كتب عن ذلك على تويتر. وأشار إلى أن رئيس المدير ...

أوكرانيا مرة أخرى وضعت ظروف لتنفيذ "صيغة شتاينموير"
وضع الوفد الأوكراني في اجتماع منتظم لمجموعة الاتصال التي عقدت يوم الأربعاء في مينسك مرة أخرى الظروف الصارمة لتنفيذ النقاط السياسية لاتفاقات مينسك. هذا مؤكد ...

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

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

Smuncher انتقدت البلجيكيين المتهمين بالسكر
طالب رؤساء مدينتي في بلجيكا من رئيس المفوضية الأوروبية لجان كلود جينغر بالاعتذار رسميا عن البيان الذي ينتمي إليه في المدن البلجيكية بهذه البرتقال إلى الناطقين بالفرنسية ...

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

"Formula SteinMayer": ذهب كييف في تنازلات ل Donbass
وافق رئيس وزارة خارجية أوكرانيا فاديم كاميسكو على استخدام صيغة الصيغة لحل النزاع في دونباس. تنص هذه المبادرة على توفير منطقة خاصة ...

عودة الولايات المتحدة إلى روسيا مراسيم المختطف من نيكولاس الثاني
نقلت الولايات المتحدة إلى الجانب الروسي من 16 مراسمة وقعت من قبل الإمبراطور نيكولاس الثاني خلال الحفل الرسمي في مقر السفير الأمريكي في موسكو. تم اختطاف الوثائق التاريخية ...

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

وسائل الإعلام: ألغت نتنياهو رحلة إلى الجمعية العامة للأمم المتحدة بسبب الوضع السياسي في البلاد
لن يذهب رئيس الوزراء الإسرائيلي بنيامين نتنياهو إلى نيويورك للمشاركة في المناقشة السياسية العامة للدورة السابعة والعشرين للجمعية العامة للأمم المتحدة بسبب الوضع السياسي في البلاد ...

قررت أوكرانيا على الوضع الخاص في Donbass
تحدث رئيس وزارة خارجية أوكرانيا فاديم بارزكو عن الاتفاق الذي تم التوصل إليه من قبل المشاركين "نورمان أربعة" على ما يسمى "صيغة فينيمايير" بشأن توفير وضع خاص من دونباس. حوله...

وجدت ترامب بديل بولتون
سيكون المستشار الجديد للرئيس الأمريكي بشأن الأمن القومي روبرت سين برين، الذي يمسك حاليا بموقف ممثل خاص لرئيس الرهائن ...

أوكرانيا أعدت لفيل القوات في دونباس
أعلن قائد تشغيل القوات المتحدة (OOS)، فلاديمير كرافتشينكو، إعداد الأسلحة في خط التمييز في دونباس. قال عن ذلك خلال اجتماع مع ...

المصطلحات و "خرائط الطريق": خطط دمج روسيا وبيلاروسيا
يمكن اعتماد خطة دمج روسيا وبيلاروسيا من قبل الرؤساء فلاديمير بوتين وألكساندر لوكاشينكو بحلول 8 ديسمبر. تم تطوير "خرائط الطريق" في 31 منطقة. حتى 1 نوفمبر موسكو ...

الفائز لا يقرر: من سيشكل حكومة إسرائيل؟
لم تكشف الانتخابات البرلمانية الاستثنائية في إسرائيل عن فائز واضح في السباق، على الرغم من أن البيانات الأولية للسكك الحديدية، فإن الكتلة اليمنى "الليكود" هي قبل خصمه - ...