برنامج Dreamweaver MX 2004 من الصفر(4)
الكاتب：Eve Cole
وقت التحديث：2009-05-31 21:02:51
استخدام الطبقات <BR> الطبقة هي مساحة من صفحة الويب، ويمكن أن تكون هناك طبقات متعددة في صفحة الويب. وأكبر سحر لها هو أن كل طبقة يمكن أن تتداخل، ويمكنك تحديد ما إذا كانت كل طبقة مرئية أم لا وفي الوقت نفسه، القدرة على تخصيص العلاقات الهرمية بين الطبقات. بعد إتقان تقنية الطبقة، يمكنك توفير إمكانات قوية للتحكم في صفحات الويب.
إنشاء طبقة
من أجل توضيح وظيفة الطبقة، نقوم أولاً بإنشاء تأثير مثال بسيط كما هو موضح في الشكل 1 (الشكل 1).
الشكل 1
الخطوة الأولى هي إنشاء صفحة جديدة في Dreamweaver MX 2004 وتشغيل أمر "Insert →Layer Objects →Layer" في هذا الوقت، سيظهر إطار مستطيل أسود في نافذة التحرير، وهو الطبقة المدرجة. عندما يتحرك الماوس فوق خط الإطار المستطيل، سيتغير شكل الماوس إلى شكل سهم متقاطع. عند النقر بالماوس، ستظهر 8 مربعات سوداء صلبة حول خط الإطار، ويوجد مربع فارغ في الزاوية اليسرى العليا، يشير إلى ذلك. أن يتم تحديد هذه الطبقة.
نصيحة: استخدم الماوس لسحب المربع الصلب لتغيير حجم الطبقة، واسحب المربع الفارغ في الزاوية اليسرى العليا لتغيير موضع الطبقة.
الخطوة الثانية هي النقر بالماوس في الطبقة وإدخال "China Computer Education News"، ثم ضبط النص على اللون الأزرق في نافذة لوحة الخصائص.
الخطوة الثالثة هي النقر فوق حدود الطبقة لتحديد الطبقة، ثم تشغيل الأمر "Edit→Copy" لنسخ الطبقة الحالية، ثم النقر بالماوس في المناطق الفارغة الأخرى من نافذة التحرير، وتشغيل "Edit→Paste" الأمر، بحيث تظهر طبقة أخرى في نافذة التحرير، ولكنها تتداخل حاليًا وتحتاج إلى نقل الطبقة قبل أن تتمكن من رؤية الطبقتين.
الخطوة الرابعة هي تغيير لون نص إحدى الطبقات إلى اللون الأسود، وتحريك موضع الطبقة بحيث تختلف مواضع الطبقتين ببضعة بكسلات، وبالتالي إنتاج تأثير الظل (الشكل 2).
الشكل 2
بعد الانتهاء من العمليات المذكورة أعلاه، اضغط على الزر "F12" للمعاينة، ويمكنك رؤية التأثير الموضح في الشكل 1 في متصفح IE.
طبقات متداخلة
تشير الطبقة المتداخلة المزعومة إلى طبقة تم إنشاؤها في طبقة أخرى، على سبيل المثال، ما يظهر في الشكل 3 هو طبقة متداخلة نموذجية (الشكل 3). في الواقع، يعد إنشاء هذا النوع من الطبقات المتداخلة أمرًا بسيطًا للغاية، ما عليك سوى إنشاء طبقة أصلية، والنقر داخل الطبقة باستخدام الماوس، وإدراج الطبقة مرة أخرى. ومع ذلك، لا تعني الطبقات المتداخلة أن الطبقة الفرعية يجب أن تكون داخل الطبقة الأصلية.
الشكل 3
تتمثل وظيفة الوراثة في الحفاظ على رؤية الطبقة الفرعية متسقة مع رؤية الطبقة الأصلية، نظرًا لأن العديد من التأثيرات الخاصة لصفحة الويب الديناميكية يتم تحقيقها من خلال التحكم في رؤية الطبقة، فعندما تتغير رؤية الطبقة الأصلية، فإن رؤية الطبقة الأصلية. تتغير الطبقة الفرعية أيضًا. علاوة على ذلك، يمكن أن تحافظ علاقة الميراث أيضًا على الموضع النسبي للطبقة الفرعية والطبقة الأصلية دون تغيير. على سبيل المثال، إذا قمنا بسحب الطبقة الأصلية للتحرك، فستتحرك الطبقة الفرعية معها أيضًا صفحات الويب.
ترتيب الطبقة Z
بالمقارنة مع الجداول، فإن أكبر ميزة للطبقات هي أنها يمكن أن تتداخل من أجل الإشارة إلى الطبقة الموجودة في الأعلى والطبقة الموجودة أدناه، يجب تعيين رقم تسلسلي لكل طبقة. هذا الرقم التسلسلي هو "الترتيب Z". ما يعنيه ذلك هو أنه بالإضافة إلى إحداثيات X وY للشاشة، تتم إضافة محور Z المتعامد مع الشاشة بشكل مصطنع.
كما هو موضح في الشكل 4، من الواضح أن الطبقات الأربع الموجودة في المنطقة اليسرى تختلف عن الطبقات الأربع الموجودة في المنطقة اليمنى، كما أنه من السهل جدًا ضبط ترتيب الطبقات، فقط استخدم الماوس للنقر عليها ووضعها في الأسفل والطبقة الوسطى والعليا ستفي بالغرض. ومع ذلك، تبدو طريقة التشغيل هذه مزعجة بعض الشيء عندما يكون هناك العديد من الطبقات، ومن غير المناسب تعديلها لاحقًا، حتى نتمكن من إجراء التعديلات من خلال لوحة الطبقات.
الشكل 4
قم أولاً بتشغيل أمر "Window →Layers" لتنشيط لوحة الطبقات، في هذا الوقت، يمكنك رؤية نافذة اللوحة الموضحة في الشكل 5 (الشكل 5)، ما عليك سوى تحديد الطبقة التي يحتاج رقمها التسلسلي إلى التغيير، ثم اضغط على الماوس واسحبه لأعلى أو لأسفل. اسحب الماوس وحرره عندما يظهر خط أفقي بين الطبقتين اللتين تريد إدراجهما، بحيث يمكنك تغيير "الترتيب Z" لكل طبقة.
الشكل 5
نصيحة: انقر مباشرة على قيمة المربع "Z" لتغييره إلى مستوى الطبقة المطلوبة.
إنشاء الجداول باستخدام الطبقات
على الرغم من أن استخدام الطبقات لتحديد عناصر صفحة الويب أكثر ملاءمة من استخدام الجداول، إلا أن متصفحات IE 4.0 وما فوق هي التي تدعم وظيفة الطبقة، لذلك، من أجل السماح للأصدقاء الذين يستخدمون المتصفحات الأقدم برؤية العمل الذي بذلت جهدًا كبيرًا في إنشائه. أفضل طريقة هي تحويل الطبقة إلى جدول.
الخطوة الأولى هي تحديد خانة الاختيار "منع التداخلات" في الجزء العلوي من النافذة الموضحة في الشكل 5، بحيث لا يمكن أن تتداخل كل طبقة مع بعضها البعض، وإلا ستكون هناك رسالة تحذير أثناء عملية التحويل.
الخطوة الثانية هي تشغيل الأمر "تعديل → تحويل → طبقات إلى جدول" في هذا الوقت، يمكنك رؤية النافذة الموضحة في الشكل 6 (الشكل 6)، في منطقة "تخطيط الجدول"، حدد "الأكثر دقة". "استخدام صور GIF شفافة" على التوالي، الخيار الأول يقوم بإنشاء خلية لكل طبقة من خلال التحويل الدقيق لضمان المسافة بين كل خلية؛ أما الخيار الأخير فسوف يملأ الصف الأخير من الجدول المحول بصورة GIF شفافة، مما يضمن ذلك جميع المتصفحات لها نفس المظهر.
الشكل 6
الخطوة الثالثة هي إكمال عملية التحويل من طبقة إلى جدول بعد الضغط على زر "موافق".
تلميح: يوفر Dreamweaver MX 2004 أيضًا وظيفة التحويل من الجداول إلى الطبقات، والخطوات متشابهة.
إذا كنت ترغب في جعل صفحات الويب الخاصة بك ملونة، فيجب عليك إتقان تقنية الطبقات، وإلا فسوف تواجه العديد من الصعوبات عند إنشاء صفحات الويب الديناميكية في المستقبل، لذلك يوصى بالدراسة المتعمقة من خلال المقدمة أعلاه إتقان الطبقات.
