إنشاء الصفحات باستخدام دريم ويفر

إعداد-رحاب زناتي rehab_zanaty@hotmail.com عزيزي القارئ···في الحلقة السابقة أنشأنا مجلداً على الكومبيوتر الخاص بنا، وأنشأنا داخله موقعاً، وفي هذا العدد سنبدأ في إنشاء صفحات هذا الموقع، فتابعنا· أولاً: إنشاء صفحة جديدة وحفظها سنقوم الآن بإنشاء الصفحة الرئيسة بالموقع، والتي سنسميها Index وكي نقوم بإنشائها تابع معنا ما يلي: ·1من قائمة ملف File اختر جديد New فيظهر مربع حوار بالشكل رقم (1): ·2تأكد أن تبويب General هو الظاهر كي يكون المربع كما بالشكل (1)· ·3لاحظ أن كل اختيار تختاره من قسم الفئات Category يتسبب في ظهور أنواع للصفحات في القسم المجاور له (تصميم الصفحة Page Design) ، وكل اختيار تختاره من هذا القسم تظهر صورته في قسم المعاينة Preview ، ويظهر وصفه تحتها في قسم (الوصف Description) ·4في هذا المربع وبالتحديد في قسم (الفئات Category) ستجد بعض الاختيارات التي تتيح لك إنشاء صفحة (فارغة Blank)، ومنها خيار Basic Page، أو Dynamic Page، أو Template Page، أو Other أو Framesets. وستجد خيارات أخرى تمكنك من إنشاء صفحات لها تصميم مسبق وهي باقي الاختيارات، حيث يمكنك إنشاء صفحة جديدة مستخدما نفس التصميم ، وهذا ما سنفعله الآن: ·5اختر Page Designs (CSS) ومن قسم التصميمات اختر Halo Right Nav ثم انقر زر (إنشاء Create) .سيظهر مربع حوار حفظ كما بالشكل رقم (2): ·6في خانة (حفظ في Save in) تأكد من تحديد المجلد الذي أنشأته وهو هنا (رحاب الإسلام) ·7في خانة (اسم الملف File name) اكتب Index لأن هذه هي الصفحة الرئيسة في الموقع، ثم انقر موافق، فيظهر مربع كما بالشكل (3): في هذا المربع يطلب منك البرنامج نسخ مجموعة ملفات مرتبطة بالتصميم، حيث صور الخلفية وبعض المكونات، وفي خانة (نسخ الملفات في Copy files to) يمكنك تغيير المجلد الذي سيتم النسخ إليه من خلال نقر المجلد الأصفر، ولكنا هنا سنجعله كما هو، ثم نضعط زر (نسخ Copy ) فتظهر النافذة كما بالشكل رقم (4): لاحظ الآتي في الشكل رقم (4): ·1ظهرت الصفحة بكامل تنسيقها، ولكنها طبعاً تحمل نصوصاً غير التي تريدها، وأجزاء كثيرة من حقك تعديلها كما سنعرف فيما بعد· ·2الصفحة تظهر كعلامة تبويب ويعلوها اسمها الذي حفظتها به وهو Index.htm . ·3في أعلى الصفحة توجد ثلاثة أزرار، أحدها اسمه (تصميم Design) وهو المضغوط حالياً، ونقره هو المسؤول عن رؤية الصفحة في وضع التصميم الظاهر بالشكل (4)· ·4وبجواره تجد زر آخر اسمه (كود Code) وعند عرضه تظهر الصفحة عبارة عن عدة أكواد هي تلك التي استخدمها دريم ويفر في إنشاء الصفحة ويعطيك بالطبع حق التعديل فيها إن أردت· ·5أما الزر الثالث وهو (انقسام Split) فهو يقسم مساحة العمل إلى قسمين أحدهما يُظهر التصميم، والآخر يظهر الكود، فانقر على المكون الذي تريده في قسم التصميم، ليظهر كوده في قسم الكود كما بالشكل رقم (5): لاحظ أيضاً في الشكل السابق أن لوحة الملفات، تعرض الصفحة والملفات المرتبطة بها كي تستطيع التعامل معها كما سنعرف فيما بعد· لاحظ أيضاً أن قسم الخصائص Properties في أسفل الصفحة يعرض خصائص الخط المستخدم في تنسيق العنوان لأني نقرت على العنوان في جزء التصميم· ثانياً: استعراض الموقع في (المتصفح ) الإكسبلورر الآن نريد استعراض الموقع لنعرف شكل الصفحة كما سيراها المستخدم قبل أن نبدأ في تعديل محتوياتها، ولكي يتم ذلك لا بد من استخدام متصفح إنترنت مثل Internet Explorer وذلك كالتالي: ·1من لوحة الملفات Files الموجودة بيمين النافذة، اختر اسم الصفحة وهو هنا Index.htm ليتم عرضه في مساحة العمل· ·2من أعلى الصفحة (في مساحة العمل) ستجد رمز الكرة الأرضية ، انقره فتظهر قائمة اختر منها أمر (عرض في المستعرض View in Iexplore ) أو اضغط مفتاح F21 من لوحة المفاتيح· فتظهر الصفحة في المستعرض كما بالشكل رقم (6): ·3لاحظ أن الصفحة في المستعرض ليس لها عنوان أي أن عنوانها Untitled Document وذلك لأننا لم نكتب لها عنواناً بعد، إنما كتبنا لها اسماً كي نحفظها به Index، ولكتابة عنوانها وعمل تعديلات أخرى كثيرة فيها مثل تعديل النصوص المكتوبة، والرسوم والخلفيات، وإضافة صفحات وارتباطات وغير ذلك من المهارات تابعنا العدد القادم·