كما نعلم جميعًا، يتضمن إنتاج مواقع الويب جوانب مختلفة من المعرفة، بما في ذلك التصميم الجرافيكي، وإنتاج صفحات HTML، وتعريف نمط CSS، والبرمجة النصية من جانب العميل (JavaScrfipt/VBScript)، والبرمجة النصية من جانب الخادم (Asp/Asp.Net/PHP/JSP) الخ المحتوى. في هذا العدد، يبدأ المؤلف بالأساسيات، مع التركيز على كيفية إنشاء موقع ويب بسيط بتنسيق HTML، ويختبر المتعة في البداية.
1. أداة إنشاء صفحة الويب التي يستخدمها المؤلف هنا هي Dreamweaver. قم أولاً بتشغيل Dreamweaver، وحدد القائمة "ملف" ← "جديد"، وستظهر النافذة الموضحة في الشكل 1.
2. هناك سبعة خيارات ضمن علامة التبويب "الصفحة الأساسية" في هذه النافذة. بعد أن نختار عنصر "HTML" ونضغط على الزر "إنشاء"، ستصبح مساحة عمل الإنشاء فارغة، مما يعني أنه تم إنشاء صفحة HTML بنجاح. انقر على عرض الكود وسيظهر المحتوى الموضح في الشكل 2.
3. تجاهل المعنى المحدد لرموز صفحات HTML المعروضة، حيث نقوم أولاً بتغيير "مستند بدون عنوان" إلى "الظهور الأول لصفحة الويب"، ثم نحدد عرض التصميم. انقر على "القائمة" ← "إدراج" ← "HTML" ← "إطار" ← "أعلاه" لإدراج إطار في أعلى صفحة الويب. في هذا الوقت، يتم تقسيم صفحة الويب إلى إطارين، وهما الإطار العلوي والإطار السفلي. بعد أن نحدد الإطار، حدد الأمر "القائمة" ← "إدراج" ← "HTML" ← "الإطار" ← "يسار"، الذي يقوم بإدراج إطار على الجانب الأيسر من صفحة الويب.
4. انقر فوق "Ctrl+S" لحفظ كل إطار (top.htm، left.htm، right.htm). ثم حدد الإطار الأيسر وانقر فوق أمر "القائمة" ← "إدراج" ← "ارتباط تشعبي"، وسيظهر مربع الحوار الموضح في الشكل 3. أدخل عناصر مختلفة في مربع الحوار هذا، حيث "النص" هو النص المعروض في الرابط، و"الرابط" هو عنوان الصفحة الذي ينتقل إليه بعد النقر، و"الهدف" هو الإطار الذي يتم عرضه فيه. نختار هنا "الهدف" باعتباره الإطار الرئيسي (أي الإطار الأيسر)، ونتبع هذه الخطوة لمواصلة إدراج الارتباطات التشعبية. بعد ذلك، أدخل عرض التعليمات البرمجية للإطار الأيمن (right.htm) وأدخل <marqueedirection=left align=middle>مرحبًا بك في موقع الويب الخاص بي!!!</marquee> في <body></body> يمكن للمؤثرات الخاصة أن تجعل النص يتحرك لليسار واليمين ولأعلى ولأسفل. تغيير الاتجاه إلى (أعلى، أسفل، يسار، يمين) يمكن أن يغير اتجاه حركة النص.
5. الآن بعد أن أنشأنا صفحة HTML بإطار، سنضيف شعارًا إلى الإطار العلوي (top.htm). يمكن لـ Banner القيام ببعض تأثيرات JavaScript الديناميكية ويمكن عرض الكود المحدد لتأثيرات التبادل الديناميكي في الكود المصدري لصفحة Top.Htm. يقدم المؤلف رمز المفتاح فقط هنا:
bannerAD[0]=pic173.gif;
bannerADlink[0]=http://www.sina.com;
bannerAD[1]=pic1732.gif;
bannerADlink[1]=http://www.sohu.com;
شرح الكود: ما ورد أعلاه عبارة عن مصفوفة JavaScript تقوم بتخزين الصور، ويقوم موقعbannerADlink بتخزين الروابط بعد النقر على الصورة، ويمكنك إضافة أو طرح الصور وفقًا لاحتياجاتك.
6. استمر في إنشاء صفحات للارتباطات التشعبية في الإطار الصحيح ويمكن تخصيص المحتوى المحدد بنفسك. اختر قائمة "ملف"، ثم اضغط على "جديد"، ثم اختر HTML لإنشاء سلسلة من الصفحات، ويجب أن تكون أسماء الصفحات متوافقة مع الأسماء المكتوبة عند إدراج الرابط. قام المؤلف بعمل مثالين (آخر الأخبار والمشاهير المشهورين) في المستند الأصلي، ويمكن للقراء محاولة إضافة المزيد من المحتوى بأنفسهم. بهذه الطريقة يتم إنشاء النموذج الأولي لموقع ويب بتنسيق HTML، كما هو موضح في الشكل 4 هو التأثير النهائي للصفحة.
لا ينعكس التأثير الديناميكي في لقطة الشاشة. يمكن للقراء فتح ملف Index.htm مباشرةً في الملف المصدر في IE. بعد الفتح، ستظهر رسالة مطالبة عند النقر بزر الماوس الأيمن، ستظهر قائمة المطالبة "السماح بالمحتوى المحظور". لأعلى (الشكل 5).
ملخص: في هذا العدد، نقدم لك كيفية استخدام Dreamweaver لإنشاء موقع HTML بسيط، والذي يستخدم بعض JavaScript وإطار عمل HTML والارتباط التشعبي والتقنيات الأخرى. بالإضافة إلى ذلك، فإن مطالبة حظر المحتوى التي رأيناها أعلاه ترجع إلى عدم نشر صفحة الويب على الموقع. في العدد القادم، سيقدم لك المؤلف محتوى أكثر إثارة.