مكتبة الدروس التعليمية

Archive for the ‘دروس برنامج الفرونت بيج’ Category

==الصف الأول==نبدأ العمل على الصف الأول ووضع شعار الموقع ولنفرض أن الشعار هو عالم الرومانسيه:هذا الـشعار حجمه 272X98 Pix ونريد إدراجه مع المحافظة على المساحة المتبقية من الخلية .. الحل هو رسم جدول آخر داخل هذا الصف (الخلية) مكون من خليتين عموديتين كالتالي :

ستشاهد عند استعراضك لخصائص إحدى الخليتين أن النسبة المئوية لعرض الخلية هو 50% والطول غير موجود:

وعند إدراج الشعار سنخسر من مساحة الخليتين الشيء الكثير لذلك ستحدد العرض بوحدة ( البكسل ) ونضع في الخانة العرض 272 كمقاس الشعار الذي لدينا و نحدد الارتفاع بعد تحديد المربع الفارغ بـ 98 بكسل كما هو ارتفاع الشعار :

سنجد الآن أن الخلية زادت في الارتفاع والعرض كما هو والمؤشر انحرف ناحية المركز قليلاً الحل هو التغيير من حجم الخلية الثانية لأن مساحتها الآن هو 50% كما كانت الخلية التي أجرينا عليها التعديل .. سنستخدم حيلة صغيره مع الخلية الأخرى وهي إلغاء التحديد الموجود أمام العرض ونضغط موافق ونلاحظ أن خليتنا الأولى أخذت حجمها الطبيعي والخلية الأخرى أخذت المساحة المتبقية وهي المساحة الكبيرى مثل ماهو بالصورة :

الآن يمكننا أن ندرج الشعار في الخلية اليمنى ذات الحجم المناسب وإدراج الشعار (إدراج > صورة > من ملف > “تحديد الشعار من ملفات الجهاز).لم يبقى علينا هنا سوى إخفاء حدود هذا الجدول ذو الخليتين والانتقال للعمل على الصف الثاني من جدولنا الرئيسي .==الصف الثاني==كما ذكرنا سابقاً فإن هذا الصف سنستخدمه لعمل بنر إعلاني للموقع .. لنفرض أن المساحة التي سنستخدمها للبنر هي 500X70 ويجب أن تكون في منتصف المساحة للجدول ..طبعاً من الضروري أن لا يكون هناك تلاصق بين البنر والشعار في الصف الأول وشريط التصفح الذي سنعمله في الصف الثالث وذلك للحفاظ على شكل الموقع والمظهر ..سنقوم بالدخول لخصائص هذا الصف (الخلية) وتغير حجم الارتفاع لـ 80 بكسل وضبط المحاذاة العمودية لهذه الخلية للوسط وترك بقية العدادات كما هي:

نجد أن ارتفاع الخلية قد زاد حسب الحجم الذي وضعناه ..الآن نريد تحديد مكان البنر الإعلاني في هذه الخلية حسب الحجم الذي حددناه مسبقاً بشرط أن يتوسط خليتنا ..كيف؟الطريقة سهلة جداً وهو بوضع جدول جديد داخل هذه الخلية ويكون الجدول بمقاس 1×1 أي صف واحد وعامود واحد كما هو موضح:

أي جدول جديد يأخذ المقاس الافتراضي للعرض وهو 100% من حجم المتصفح ولتحجيم هذا الجدول ليناسب مقاسات البنر ندخل على خصائص الجدول ونعطي الأحجام المطلوبة من ارتفاع وطول كما نريد ولا ننسى وضع المحاذاة على توسيط ليظهر في منتصف الخلية:

سيكون ناتج عملنا كما يلي:

يمكن أن نعطي البنر لون محدد بحيث يتناسب مع موقعنا والألوان التي نختارها .. سأختار اللون الموجود في شعار الموقع وهو اللون الأزرق المائل للبنفسجي بالطريقة التاليةخصائص الجدول(جدول البنر أقصد) ==> الخلفية:

سنختار ألوان إضافية وسيظهر لنا لوحة ألوان أخرى:

نختار تحديد .. سيتبدل شكل الماوس كما هو على الزر لنتمكن من تحديد اللون وذالك بالذهاب على النقطة الموجودة بالشعار .. كما ترى اللون رقمه الست عشري في FrontPage هو (90,94,B0) انتهت العملية .. موافق وسنجد اللون قد ملأ المساحة المخصصة للبنر:

الحدود لهذا الجدول لا يهم إخفاءها أو إظهارها فهي لن تؤثر على الشكل العام ..

في البداية يجب أن أوضح ميزة التصميم بالجداول عن الأساليب الأخرى..طبعاً من أهم العوامل التي تجذب الزائر للموقع هي حسب الأولوية كما يلي:1- المعلومة المفيدة.2- سهولة التنقل بين صفحات الموقع.3- سرعة تصفح الموقع.4- المظهر الجميل.العامل الأول وهو المعلومة المفيدة يرجع للمصمم والتخصص الذي يرغب بناء الموقع على أساسه وبالتالي طبيعة الزوار لموقعه.العامل الثاني يرتبط بشكل أساسي بالعاملين الثالث والرابع بمعنى أن سهولة التنقل بين صفحات الموقع يكون بوضع عناوين رئيسية وعناوين فرعية تجعل من الوصول للمعلومة من قبل الزائر أكثر متعة بأقل جهد ممكن أن يبذلة الزائر بالبحث عن ما يريد .. وسهولة التنقل ترتبط بسرعة تصفح الموقع بمعنى أن الزائر عندما يجد الموقع المناسب فإنه يحاول تصفح أكبر قدر من الصفحات بأسرع وقت ممكن وبالتالي سيكون للمصمم الدور الأكبر في رجوع هذا الزائر مرة أخرى للموقع !!العامل الرابع وهو المظهر الجميل بإضافة الجرافكس واختيار الألوان المناسبة للخط والخلفية والتنسيق المتقن للصفحات .. طبعاً إضافة الجرافكس لصفحات الويب يزيد من حجم الصفحة عند فتحها من المتصفح ولذالك قمت بربط العوامل الثلاث الأخيرة ببعضها لنتمكن من فهم التصميم بالجداول ومزاياه المفيدة جداً.==== لنبدأ الآن بعمل المشروع ===قبل البدأ بتنفيذ موقع ما يجب علنا أن نعطي تخيل مبدئي للصورة النهائية التي نطمح لإنجاز موقعنا عليها .. وأفضل طريقة لفعل ذالك هو رسم الشكل للصفحة الرئيسية للموقع بقلم رصاص على ورقة بيضاء وتعديل الأفكار الأولية قبل البدأ بالتنفيذ ..لنفرض مثلاً أن الموقع يختص بالبرامج وعتاد الحاسب الآلي .. هذا يتطلب توزيع أقسام الموقع بعناية ودقة لنسمح للزوار بالوصول إلى الأقسام بيسر وسهولة ..التشكيل الأساسي للصفحة الرئيسية لموقع يهتم بالبرامج وعتاد الحاسب الآلي هو (ليس من الضروري هذا التقسيم) :1- قسم البرامج Software2- قسم العتاد Hardware3- قسم الدعم الفني4- الأسئلة المتكررة AFQs5- المساعدةاخترت هذا التخصص لسهولة تطبيق المشروع علية و لتنوع الأقسام مما يسمح لنا بتجربة الجداول بشكل أكثر سهولة ومرونة .في البداية للتنفيذ نفتح ونختار (ملف > جديد > صفحة أو ويب.. )

سيظهر لنا مع XP نافذة على اليسار نختار صفحة ويب فارغة .. تظهر لنا نافذة أخرى:

هذه النافذة هي نافذة قوالب مواقع ويب .. ما يهمنا هنا هو صفحة ويب ذات صفحة واحدة واسم المشروع الذي ننوي تنفيذه .. كما هو موضح فقد اخترت C4Arab كعنوان للمشروع .. يقوم FrontPage بعد اختيار الاسم وضغط موافق بحفظ المشروع تلقائياً في المجلد الافتراضي الموجود على المسار (C:My DocumentsMy Webs……..) طبعاً هذا المسار افتراضي إذا لم يكن قد تم اختيار مسار آخر ..فتحت الآن صفحة بيضاء فارغة باسم Index.htm إذا لم تكن ظاهرة اضغط على هذه الأيقونة : نريد الآن البدأ برسم الخطوط العريضة لموقعنا على هذه الصفحة البيضاء بواسطة الجداول .. نحدد جدول من عامود واحد وخمسة صفوف كما يلي :

لماذا هذا الحجم بالتحديد ؟ السبب هو لأن التنسيق لبناء الصفحة سيكون :الصف الأول من الجدول لشعار الموقع .. الصف الثاني لوضع بنر إعلاني أو أي شيء من هذا القبيل .. الصف الثالث لعمل شريط تصفح للصفحات الرئيسية .. الصف الرابع لتنسيق الروابط الفرعية للصفحة و تخصيص مساحة لكتابة المعلومات .. الصف الخامس لكتابة جملة حقوق الملكية أو عمل أي شيء آخر بها ..طبعاً يوجد حدود سوداء اللون للجدول المرسوم وهذا يشوه مستقبلاً من مظهر الصفحة .. يمكن إخفاء الحدود بطريقتين الطريقة الأولى موضحة في بداية الموضوع عن طريق (خصائص الجدول) والطريقة الأخرى هي عن طريق الشريط القياسي والضغط على الأيقونة الموضحة بالصورة :

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

بسم الله الرحمن الرحيميختلف أسلوب التصميم من مصمم لآخر حسب الذوق وحسب الفكرة وحسب برنامج التصميم ..أسلوب التصميم بالـ HTML مباشرة صعب للمبتدئين الذين يطمحون إنجاز مواقعهم الشخصية بسرعه وسهولة مع رغبتهم بإظهار الموقع بالصورة اللائقة بين المواقع الأخرى ..سنبدأ هنا بالتعلم على FrontPage XP وهو آخر إصدار من محرر التصميم المرئي والذي يعطي للمصمم الحرية بإختيار الطريقة والكيفية التي تناسبة لتحرير صفحات الموقع أو المشروع الذي يرغب به ..أحب أن أعطي فكرة بسيطة عن طرق التصميم على فرونت بيج ..يمكنك تصميم الموقع على صفحات كاملة إما بطريقة الإطارات Fram أو بأسلوب الجداول Table ..وسنبدأ من الأخير لسهولة التحكم بالجداول وسهولة تنسيق الموقع بواسطتها.في البداية هذه صورة توضح طريقة تحديد الجدول حسب أعداد الصفوف:

طبعاً بعد أن نضغط بالماوس على هذه الأيقونة سنجد مساحة 4*4 من الصفوف والأعمدة وإذا أردنا زيادة الأعمدة كل ماعلينا هو الضغط على زر اليمين من الكيبورد وكذالك في حال زيادة الصفوف كما هو بالصورة:

وفي هذه الصورة نجد عدد الأعمدة عامود واحد بينما الصفوف هي:

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

تتكون خصائص الجدول من التالي:

القسم رقم 1 :هي ماتهتم بعملية التخطيط للجدول على الصفحة وضبط خصائص هذا الجدول بمحذات الجدول للصفحة أو إتجاه الكتابة بالجدول ..ففي المحاذات الأولى أربع حالات لوضع الجدول على الصفحة الحالية وهي (الإفتراضي – اليسار – اليمين – الإفتراضي) قم بتجربة كل خيار ستجد أن الإفتراضي سيقوم بوضع الجدول في وضعه الحلي والذي في حالتنا هذه يتوسط المسافة بين اليمين واليسار ..ستلاحظ التغير عن المحذات ناحية اليسار أو ناحية اليمن وتكتشف الفرق -جرب بنفسك- وبهذا تستطيع أن تغير محاذات الجدول حسب رغبتك في تنسيق الصفحة بعد ذالك ..القسم الثاني من التخطيط هو عملية الإتجاة للكتابة كما ذكرنا وهو إما الإفتراضي أو اليسار أو اليمين , عند التغير هنا ستلاحظ تحرك المؤشر حسب الوضع الذي قمت بإختياره -جرب ولاحظ المؤشر- وهذه الحالات تعطي لمستخدم الجداول المرونه عند إضافة جداول أخرى داخل الجداول السابقة بحيث تتطابق الحدود عند تحديد الإتجاه .القسم رقم 2 :هذا المربع المنسدل يعطينا حرية تحديد إتجاه الكتابة في الجدول من اليمين لليسار والعكس .القسم 3 :هذا الجزء هام جداً في تنسيق الصفحة وطريقة عرضها .. عند رسم الجدول تكون المقاسات بالعادة كما هو موضح أي 100% بكسل حسب عرض الصفحة وهذا الحجم يسمح بعرض الصفحة على أي متصفح بنفس التسيق الذي يظهر بة الجدول عند تصميمك الأول .. ما أقصده هنا أن ترك العرض 100% يظهر نفس التصميم على جميع مقاسات عرض الشاشة -600*800 أو اي مقاس أصغر أو أكبر من ذالك ..وطول الجدول غير مهم إذا اردنا تشكيل جداول أخرى داخل خلايا الجدول الأساسي لأن الطول يأخذ المقاس الأخر للجداول أو حتى لأسطر الكتابة -سنتعرف على ذالك أثناء تنفيذ مشروعنا الصغير القسم 4 :هنا كما هو موضح فإن الحجم هو صفر (0) أي أن حدود الجدول غير ظاهرة وبذالك فعند عرض التصميم على المتصفح ستكون هذه الحدود الشفافة غير موجودة وما سيظهر هو ما يحوي الجدول من صورة أو كلام أو أي شي آخر .. كلمة -اللون- هي تختص بلون الحد إذا كان الحجم أكبر من (1) وفي حالتنا هذه لايظهر اللون لأن الحد شفاف أو بدون لون ..الحد الفاتح والحد الغامق أيضاً تأخذ نفس الأسلوب عندما تكون الحدود للجدول (0) وإذا اردت إكتشاف ذالك قم بتغير حجم الحد وإختار الألوان التي تريد لترى النتيجة . القسم 5 :هذا القسم هو بالأساس قسم الخلفية مع القسم 6 وهذا القسم يقوم بتغير خلفية الجدول حسب اللون المحدد من القائمة المنسدلة ..القسم 6 :يمكنك تغير خلفية الجدول بصورة ما أن تحددها من جهازك .===نأتي الآن للتعرف على خصائص الخلية من جدول ما ===إذا أردت تطبيق تنسيق ما على خلية كل ماعليك هو تضليل هذه الخلية بواسطة وضع الماوس على طرف الخلية المراد تنسيقها أو اذا اردت تنسيق عدد محدد من الخلايا قم بتضليلها بالماوس بواسطة السحب ..بعد تحديد خلية أو عدة خلايا قم بإظهار الخصائص لهذه الخلية بنفس طريقة خصائص الجدول (كلك يمين خصائص الخلية) ستجد التالي:

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

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

يوفر Microsoft FrontPage أنماط عديدة من العدادات، لكن يمكنك تزويد رسومات رقمية بنفسك بإنشاء صورة مخصصة بتنسيق GIF (‏GIF: تنسيق ملف رسومي (الملحق ‎.gif في Windows) يستخدم لعرض الرسومات بالأون المفهرسة على World Wide Web. ويعتمد 256 لوناً على الأكثر ويستخدم ضغطاً دون فقدان، بمعنى أنه لا تفقد بيانات من الصورة عند ضغط الملف.). يجب أن تحتوي الصورة على الأرقام من صفر (0) إلى تسعة (9), بحيث تكون المسافة بين الأرقام متساوية.بعد إضافة عداد دخول إلى الصفحة، يمكنك إعادة تعيين العداد لأي رقم. على سبيل المثال، يمكنك اختبار موقع ويب بعد نشره للتأكد من أنه يعمل بشكل صحيح، ثم تجد أن عداد الدخول قد امتلأ بالزيارات التي تقوم بها بنفسك. يمكنك إعادة تعيين العداد إلى الصفر لبدء تشغيله من جديد أو لتسجيل عدد زوار الموقع فقط. ملاحظة يجب نشر موقع ويب الذي تستخدمه إلى ملقم ويب يستخدم ملحقات ملقم FrontPage (ملحقات ملقم FrontPage: عبارة عن مجموعة من البرامج والبرامج النصية التي تدعم التأليف في FrontPage وتزيد من وظيفية ملقم ويب. ) أو SharePoint Team Services موفر من قبل Microsoft. اسأل مسؤول ويب أو موفر خدمات إنترنت (ISP: شركة توفّر الوصول إلى إنترنت لغايات مثل البريد الإلكتروني، أو غرف المحادثة، أو استخدام World Wide Web. وتكون بعض هذه الشركات دولية، تؤمن الوصول إلى إنترنت في عدة أماكن، وبعضها الآخر محدد بمنطقة معيّنة.) ما إذا كان هذا البرنامج مثبتاً على ملقم ويب الذي تستخدمه أم لا. فور نشر موقع ويب، انقر فوق معاينة في المستعرض

لاختبار عداد الدخول.إضافة عداد دخول إلى صفحة ويبفي طريقة العرض الصفحة، قم بوضع نقطة الإدراج حيث تريد وضع عداد الدخول (المكون “عداد الدخول”: هو مكون في FrontPage يتتبع عدد زوار موقع معين على ويب.). من القائمة إدراج، انقر فوق مكون صفحة ويب. في الجزء الأيمن، انقر فوق عداد دخول

قم بأحد الإجراءات التالية: اختيار نمط عداد موجودفي الجزء الأيسر، تحت اختيار نمط العداد، انقر نقراً مزدوجاً فوق أحد أنماط العدادات. استخدام صورة مخصصة كنمط عداد2. في الجزء الأيسر، انقر نقراً مزدوجاً فوق أحد أنماط عدادات الدخول. 3. في مربع الحوار خصائص عداد الدخول، حدد صورة مخصصة

(شكل رقم 004).4. اكتب محدد موقع المعلومات لملف GIF. على سبيل المثال، إذا كان GIF موجود في مجلد الصور الذي تستخدمه، سيكون مساره /images/yourgif.gif لتعيين العداد إلى رقم معين، حدد المربع إعادة تعيين العداد إلى، ثم اكتب الرقم. لعرض عدد محدد من الأرقام في عداد الدخول، حدد المربع عدد ثابت من الأرقام، ثم اكتب الرقم. على سبيل المثال، لعرض 005 بدلاً من 5، حدد هذا الخيار واكتب 3. انقر فوق موافق. يظهر [عداد الدخول] في الصفحة كعنصر نائب لعداد دخول. لمشاهدة كيفية ظهور عداد الدخول إلى زوار الموقع، انقر فوق علامة التبويب معاينة، أو انقر فوق معاينة في المستعرض . ملاحظة يجب نشر موقع ويب الذي تستخدمه إلى ملقم ويب يستخدم ملحقات ملقم FrontPage (ملحقات ملقم FrontPage: عبارة عن مجموعة من البرامج والبرامج النصية التي تدعم التأليف في FrontPage وتزيد من وظيفية ملقم ويب. ) أو SharePoint Team Services موفر من قبل Microsoft. اسأل مسؤول ويب أو موفر خدمات إنترنت ما إذا كان هذا البرنامج مثبتاً على ملقم ويب الذي تستخدمه أم لا. فور نشر موقع ويب، انقر فوق معاينة في المستعرض لاختبار عداد الدخول.إعادة تعيين عداد الدخولفي طريقة العرض الصفحة، انقر نقراً مزدوجاً فوق [عداد الدخول]. حدد المربع إعادة تعيين العداد إلى، ثم اكتب أي رقم تريده في المربع. إضافة طابع زمني لصفحة ويبيعرض الطابع الزمني وقت إنشاء الصفحة وآخر التغييرات التي أجريت عليها أو تاريخ حدوث ذلك أو كلاهما. على سبيل المثال، يسمح الطابع الزمني لزائري الموقع بمعرفة ما إذا كانت المعلومات الموجودة في الموقع قد تم تغييرها منذ آخر زيارة لهم. في طريقة العرض الصفحة، قم بوضع نقطة الإدراج في المكان المراد وضع الطابع الزمني به. من القائمة إدراج، انقر فوق التاريخ و الوقت. حدد نوع الطابع الزمني المراد عرضه

حدد تنسيقاً للتاريخ وآخر للوقت إظهار تمييز العناصر الحيوية أو إخفاؤه عند إضافة تأثير HTML حيوي (DHTML) لعنصر صفحة في الجزء عادي, يتم إضافة خلفية وحد زرقاوين إلى العنصر ليمكنك التعرف عليه أثناء تحرير الصفحة. لإظهار التمييز أو إخفائه، قم بالإجراءات التالية: من القائمة عرض, أشر إلى أشرطة الأدوات، ثم حدد تأثيرات DHTML. لإظهار التمييز، من شريط الأدوات تأثيرات DHTML, انقر فوق تمييز تأثيرات DHTML .لإخفاء التمييز، تأكد من عدم تحديد تمييز تأثيرات DHTML

حول تأثيرات HTML حيوي (DHTML)ُيعتبر HTML حيوي (DHTML) تحسيناً قدمته Microsoft على HTML الإصدار 4.0، وهو يمكّنك من إنشاء تأثيرات بصرية أو تحسين التخطيط لصفحة ويب.على سبيل المثال، قد يكون التأثير المرئي تأثير حركي يظهر فيه النص كما لو كان يخرج من الصفحة كلمة بعد الأخرى. قد يأخذ تحسين تخطيط الصفحة شكل أسلوب يوفر المساحة عن طريق تقديم تخطيط مفصل سهل الطي. تم تصميم الارتباطات زرقاء اللون الموجودة أدناه باستخدام DHTML بحيث يمكنك النقر فوقها لإظهار المزيد من المحتويات.تشغيل DHTML أو إيقاف تشغيلهإذا كان عدد كبير من زوار موقعك يستخدمون برامج استعراض قديمة (Microsoft Internet Explorer 3.0 أو إصدار سابق أو Netscape Navigator 3.0 أو إصدار سابق)، يمكنك إيقاف تشغيل ميزات DHTML باستخدام إعدادات توافق مستعرض Microsoft FrontPage.في حالة تعطيل DHTML، أو في حالة قيامك بتصميم موقع ويب ليكون متوافقاً مع مستعرض لا يدعم DHTML، لن تكون الأوامر التي تستخدم DHTML متوفرة (بمعنى أنها ستظهر خافتة) في قوائم FrontPage.تكون الأوامر والإعدادات التالية متوفرة أثناء تعطيل DHTML:تأثيرات HTML حيوي (القائمة “تنسيق”) انتقالات الصفحة (القائمة “تنسيق”) تمكين طي المخططات التفصيلية (مربع الحوار”تعداد نقطي وتعداد نقطي”) تمكين تأثيرات التمرير فوق الارتباط التشعبي (مربع الحوار “خصائص الصفحة”، علامة التبويب “الخلفية ” ) ملاحظة في حالة اختيار تحديد توافق مع مستعرض لا يعتمد DHTML، ولكن يستخدمه على أي حال، قد لا تتمكن من عرض صفحاتك بشكل صحيح، أو قد تحتوي على أخطاء.إصدارات برامج الاستعراض التي تدعم DHTML في حين أن تأثيرات DHTML تعمل مع Microsoft Internet Explorer الإصدار 4.0 أو أحدث و Netscape Navigator الإصدار 4.0 أو أحدث، فإن معظم هذه التأثيرات تظهر ثابتة (غير متحركة) عند عرضها باستخدام برامج استعراض ويب الإصدار 3.تمكين DHTML أو تعطيلهمن القائمة أدوات، انقر فوق خيارات الصفحة، ثم انقر فوق علامة التبويب توافق. لتمكين DHTML أو تعطيله، ضمن تكنولوجيا قم بتحديد خانة الاختيار HTML حيوي أو إلغاء تحديدها

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

بسم الله الرحمن الرحيمهذا الدرس مفيد جداً و مهم ، و في نفس الوقت بسيط إن شاء الله ..مقدمةأظن أغلبكم رأى مواقع يتمدد تصميمها مع تصغير و تكبير المتصفح ، فهل سألت نفسك يوماً ، كيف يمكن فعل ذلك ؟!هذا ما سنتعلمه في هذا الدرس بإذن الله ، و هو كيفية جعل تصميم الموقع يتمدد تلقائياً ليتناسب مع متصفح الزائر ..سنحتاج في تطبيق هذا الدرس إلى برنامجين :1- الفوتوشوب ..2- الفرونت بيج ..—مصطلحات يجب معرفتها قبل البدايةHeader : الهيدر ، هو البانر العلوي الذي في أعلى الموقع .Footer : الفوتر ، هو البانر السفلي الذي في أسفل الموقع .—خطوات برنامج الفوتوشوبنقوم بتصميم الهيدر و الفوتر (الأفضل أن يكون كل واحد لحاله) .و سنكتفي في هذا الدرس بالشرح على الفوتر ، لأنك إذا عرفت التطبيق على الفوتر فالتطبيق على الهيدر لا يختلف عنه ..صمم الفوتر على ذوقك و بما يناسب موقعك ، و بعد الانتهاء من تصميم الفوتر نقوم باختيار الأداة التالية لنقوم بتقطيع الصورة ..و نقطع الفوتر على الشكل التالي

تنبيهاجعل القطعة اليمنى مساوية للقطعة اليسرى ..(للدقة في القياس بإمكانك الاستعانة بالمسطرة عن طريق الضغط على Ctrl+r)الأجزاء التي نحتاجها من الصورة السابقة هي 1 و 3 و 5اضغط كلك يمين على رقم 1 ، ثم اختر Edit Slice Options ، و اكتب في خانة Name التالي : footer_left ،،، ثم اضغط على OK ..و نفس الطريقة لرقم 3 ، و قم بتسميته footer_c ، ثم اضغط على OKو كذلك نفس الطريقة لرقم 5 ، و قم بتسميته footer_right ، ثم اضغط على OKالآن من قائمة File اختر Save for web ،،، ثم اضغط على saveو بالنسبة لخيار Save as type فاجعله Images Only

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

بسم الله الرحمن الرحيم الدرس الاولاهلا : في البداية بنشرح الواجة الرئيسية==قائمة فايل >>>>>> file >>>>>

أكيد تسألو شو المهم فيها .. فيها شي مهم جداً وهو فتح الموقع أو بروجكت جديد 1- هو فتح موقع جديد ..كيفنروح في المكان الي يعجبك في السي او الدي او ماي دكيومنت او اي مكان المهم سوي فلدر جديد و سميه و بعدين روح واختار open siteوختار الفلدر الي سويته بتلاحظ انة ستوى شي بالفلدر الانة الفرنت بيج اختارة كمشروع موقعك الي بتصممةو بضيف له فلدرين او تو ماتك الي هو _private و imagesو بصير شكل الفولدر

ملاحظة : نحن لا نحتاج لهذة الخطوة الا اذا كنت تعمل على أكثر من موقع … لذا ستجد فلدر بأسم My Web Sites في My Documentsالفرنت بيج يقوم بأنشائه فور تثبيتك له =======================2- Publish site و هو خاص بنشر الموقع على شبكة الانترنت وسنشرحة لاحقاً بالتفصيل الممل أن شاء الله —————————————–

الشكل رقم 3 يبين الديزاين وspilt :وهو يضهر الديزاين مع الكود ..code :وهي تحتوي على لغة ترميز النص التشعبي أتش تي ام ال المستخدمة و بنشرحا بعدين أما البرفيو يعني تجربة الموقع —

الشكل رقم 4 يبين اسم المف و أن شاء الله بالدروس اللمتقدمة بتعلم كيف نسمي هل الملفات_________________________________قم بفتح برنامج الفرنت بيج و فتح صفحة جديدة ثم إذهب الى file >>> save as وسمية index ..ليش سميناه بهل اسم … : بختصار عشان يكون الصفحة الرئيسية للموقع .. الحين ضع مؤشر الماوس بص الصفحة وضغط على الزر اليمين لها و ختار page properties====

1- هو تسمية عنوان الصفحة 2- شرح محتوايات الصفحة ( أختياري ) وهو مهم عند نشر الموقع في محركات البحث حيث تستخدم هذا الشرح لمحتوا الصفحة 3- لوضع ملف صوتي كخلفيه لصفحة ==============

هذا الشكل مهم و بشرحة الحين 1- وضع خلفيه للموقع (صورة )================ألوان الصفحو مهم جداً 2- خلفية الصفحة ( لون)3- لون النصوص 4- لون الارتباطات التشعبية ( ) 5- لون الارتباطات التشعبية عند الزيارة 6- لون الارتباطات التشعبية ( النشيطة ) ..(عند تكرار الزيارة ) ==================————————-

هذي الصورة لختيار اللغة .. و نحن يهمنا 1 و 2 و بعد 3 مهم ,,

الدرس التنفيذي 1من أهم شيء في تصميم المواقع هو الجداول الانها تساعد في تنسيق الموقع و وضع المعلومات الصحيحة في المكان الصحيح . كما انك لا تستطيع ان تزين الموقع بـ برواز أو ديزاين بدون استخدام الجداوللهذا يجب عليك أتقانها جيدا ً

الصورة رقم 1 ============تضهر الصورة المكان المخصص الإدراج الجدول و كما هو موضع بالصورة من الممكن التحكم بعدد الجداول ” صفوف العرض والطول ” أتبع الخطوات التاليه قم بإدراج جدول 4 صفوف عرض 4 صفوف طول ثم … تابع الدرس

صورة رقم 2 كما هو مبيت في الصورة رقم 2 أضافة صف بطول 1 2أضافة صف بالعرض 3مسح الجدول المضلل 4 دمج الجداول المضلله 5 خيار لمضاعفة عدد الصفوف

لستخدام الجداول في التنسيق يجب علينا ان نجعلها مخفيه كيف ؟؟ تابع ————قم بتضليل الجداول التي قمت بإدراجها سابقا ثم أضغط على الزر اليمين و أختر table propertiesخيارات الجدولو كما هو مبين على الصورة رقم 3 1- حجم المساحة الداخيلف في الجدول داخل الخانات 2- حجم إيطار الجدول 3- حجم الايطار الخارجي 4- لوضع خلفيه للجدول صورة او لون أجعل الخيارات في الرقم 1 و 2 و 3 تساوي 0 بتلاحض

ان الجاول صارت مخفيه —————————-الواجب حاول تنسيق الجداول مثل المرفق بستخدام جميع ما تعلمت بمهارتك الخاصه

إضافة لقطات الفيديو إلى صفحات الويباستخدام لقطات الفيديو يكلف مقابلاً مادياً . واعلم أن لقطات الفيديو تميل إلى استخدام ملفات كبيرة الحجم وتستلزم تحميلها بالكامل قبل أن يتمكن المستخدمون من مشاهدتها .لإضافة إحدى لقطات الفيديو إلى موقع الويب :1- حدد وافتح الصفحة التي تريد أن تضيف إليها لقطة الفيديو .2- من قائمة Insert ، حدد أمر Picture ثم Video لتفتح مربع Video وبالتالي يمكنك تحديد ملف لقطة الفيديو المراد إلى الموقع .3- في الوضع الافتراضي ، يجعل فرونت بيج كافة لقطات الفيديو تبدأ التشغيل تلقائياً عندما يتم إدراجها في الصفحة المحددة . إذا لم ترغب في أن تبدأ لقطات الفيديو التشغيل تلقائياً عندما تكون صفحة الويب التي تضم تلك اللقطات مفتوحة ، قم بعد ذلك بتحديد أمر Properties من قائمة Format لتفتح مربع Picture Properties . إذا لم تكن علامة تبويب video محددة ، قم بتحديدها لتعرض اللوحة الخاصة بها .4- توجد ثلاثة خيارات لبدء تشغيل لقطات الفيديو لديك تلقائياً : عند تمرير مؤشر الفأرة فوق لقطة الفيديو أو عند إظهار أدوات تحكم للمستخدم على الشاشة حدد طريقة البدء التي تريد استخدامها بالتحديد على مربع العلامة .5- بكتابة رقم في خانة Loop ، تستطيع تحديد عدد المرات التي تريدها لتشغيل لقطة الفيديو .6- بعد إنهاء التعديلات الخاصة بعدد مرات تشغيل اللقطة ، انقر زر Save لحفظ تلك التعديلات وإغلاق مربع الحوار .7- لمعاينة لقطة الفيديو بعد إدراجها في الصفحة ، انقر علامة تبويب preview داخل النافذة الرئيسية لفرونت بيج.

اولا وقبل أن نبدأ في شرح كيفية إنشاء مواقع الويب من خلال FrontPage 2000 تعالى معي نتعرف على كيفية إنشاء موقع جديد استنادا إلى أحد القوالب Templates أو المعالجات Wizards التي يوفرها البرنامج لنتعرف على أساسيات العمل من خلاله.ابدأالان بإنشاء موقعك استنادا إلى القالب Personal Web, واتبع الخطوات التالية:1- افتح قائمة File2- اختر New ثم Web3- انقر بالفأرة فوق القوالب و المعالجات التي تظهر أمامك للتعرف على وصف لها4- انقر فوق القالب Personal Web5- اكتب اسم المجلد الذي سيحتوي ملفات موقعك6- انقر بالفأرة فوق الزر OK7- انقر بالفأرة فوق أحد الملفات وليكن favorite.htm8- أكتب النص الذي تريده داخل الصفحة ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــنافذة برنامج FrontPage 2000 ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــعندما تبدأ في إنشاء موقع جديد أو تقوم بفتح موقع قمت بإعداده سابقا, فإن نافذة برنامج FrontPage 2000 ستجدها تنقسم إلى الأقسام التالية:- شريط Views: في أقصى الجانب الأيسر من نافذة برنامج FrontPage 2000 يوجد شريط Views الذي يحتوي على ستة أزرار تستخدم لعرض محتويات موقعك بطرق مختلفة, على سبيل المثال النقر فوق الزر Page في شريط Views سيعرض لك صفحة الويب التي تقوم بإنشائها أو تعديلها حاليا, إما إذا قمت بالنقر فوق الزر Folders فسيعرض لك محتويات موقعك من مجلدات و ملفات, و سنتعرف على عمل تلك الأزرار لاحقا.- قائمة الملفات و المجلدات: تظهر إلى يمين شريط Views وتعرض لك ملفات موقعك وتستخدم هذه القائمة للتنقل ما بين صفحات الموقع أثناء العمل, فالنقر بالفأرة نقرا مزدوجا فوق أي من أسماء الصفحات الموجودة في هذه القائمة سيؤدي إلى فتح هذه الصفحة في الجزء الأيمن من نافذة البرنامج , ولإلغاء عرض قائمة المجلدات و الملفات أنقر فوق الزر Folder List في شريط الأدوات الموجود في أعلى نافذة البرنامج ولإظهارها مرة أخرى انقر فوق نفس الزر.-منطقة العمل الرئيسية: تقع في الجزء الأيمن من نافذة البرنامج و تحتل معظم مساحتها و ما تراه في هذه المنطقة يعتمد على نوع العرض الذي قمت باختياره من خلال شريط Views.-في الجزء العلوي من نافذة برنامج FrontPage 2000 يوجد شريط القوائم الذي تستطيع من خلاله الوصول إلى جميع وظائف البرنامج, ثم يقع أسفله شريط الأدوات القياسي الذي يحتوي على مجموعة من الأزرار تستطيع من خلالها الوصول إلى الوظائف الشائعة في البرنامج مثل إنشاء صفحة جديدة أو حفظ التعديلات التي أجريت على الصفحة و ما إلى ذلك, ثم يأتي شريط أدوات التنسيق الذي تقوم من خلاله بإجراء عمليات التنسيق الشائعة مثل تغيير الخطوط و اختيار حجمها و ما إلى ذلك و هو يشبه إلى حد كبير شريط أدوات التنسيق الموجود في برنامج Microsoft Word.الآن اتبع الخطوات التالية:ــــــــــــــــــــــــــــــــــــ1- قم بإنشاء موقع جديد كما رأينا سابقا أو2- افتح قائمة File3- اختر Recent Webs4- اختر الموقع الذي قمنا بإعداده سابقا5- انقر فوق اسم إحدى الصفحات لفتحها6- انقر فوق الأزرار الموجودة في شريط Views واحدا تلو الآخر لتتعرف على الأشكال المختلفة لعرض محتويات موقعك أسلوب العرض Foldersـــــــــــــــــــــــــــــــــــــــإذا قمت بالنقر فوق الزر Folders في شريط Views ستظهر لك قائمة بالمجلدات و الملفات التي يحتويها موقعك حيث تظهر لك أسماء الملفات أو المجلدات و عناوينها و أحجامها و ما إلى ذلك منظمة على شكل أعمدة, فإذا قمت بالنقر بالفأرة فوق أي من رؤوس تلك الأعمدة سيتم عرض قائمة الملفات و المجلدات مرتبة استنادا إلى رأس العمود الذي قمت بالنقر فوقه, على سبيل المثال إذا قمت بالنقر فوق رأس العمود Name فسيتم ترتيب الملفات و المجلدات أبجديا بحسب اسم الملف أو المجلد, و إذا قمت بالنقر فوق رأس العمود Title سيتم ترتيبها أبجديا بحسب عنوان الصفحات من فوائد أسلوب العرض Folders أيضا أنه في حالة إذا ما قمت بنسخ أحد الملفات إلى المجلد الذي يحتوي ملفات موقعك ( أحد ملفات الصور على سبيل المثال ) , يجب أن تنتقل إلى أسلوب العرض Folders و تقوم بالنقر فوق الزر Refresh في شريط الأدوات ليتم إدراج هذا الملف ضمن ملفات موقعك و بالتالي تستطيع استخدامه في تصميم صفحاتك. ولعمل ذلك اتبع الخطوات التالية:1- أنقر فوق الزر Folders في شريط Views2- أنقر فوق رؤوس الأعمدة في قائمة الملفات و المجلدات لترى كيف يتم ترتيبها استنادا إلى رأس العمود الذي تقوم بالنقر فوقه3- أنقر بالفأرة نقرا مزدوجا فوق أي ملف لفتحه4- أنقر فوق الزر Folders في شريط Views مرة أخرى لتعود إلى أسلوب العرض Folders 5- أنقر فوق الزر Refresh في شريط الأدوات للحصول على أحدث قائمة للملفات و المجلدات بموقعك انظر الشكل رقم 3 .أسلوب العرض Hyperlinksـــــــــــــــــــــــــــــــــــــــــــــــــيعد أسلوب العرض Hyperlinks أحد أهم المميزات التي يتمتع بها برنامج FrontPage 2000 , فإذا قمت بالنقر فوق الزر Hyperlinks في شريط Views و قمت بالنقر فوق إحدى الصفحات سيظهر لك شكل يوضح هيكلية موقعك بالكامل استنادا إلى الروابط التي توجد داخل صفحات موقعك, و تظهر الروابط على شكل أسهم من صفحة إلى أخرى فالأسهم التي تظهر داخلة إلى الصفحة تعني الروابط الموجودة في الصفحات الأخرى وتؤدي إلى هذه الصفحة و الأسهم التي تظهر خارجة من الصفحة تعني الروابط التي تحتويها هذه الصفحة وتشير إلى صفحات ( أو مواقع ) أخرى, و أية صفحة تظهر في الركن العلوي الأيسر لها علامة (+) فمعنى ذلك أنها هي الأخرى تحتوي على روابط فإذا قمت بالنقر فوقها ستظهر لك الروابط التي تؤدي إليها و الروابط التي توجد داخلها و تشير إلى صفحات أخرى. ولعمل ذلك اتبع الخطوات التالية:1- أنقر فوق الزر Hyperlinks في شريط Views2- أنقر فوق علامة (+) لتظهر لك روابط تلك الصفحة3- انقر فوق علامة (-) لإخفاء الروابط4- أنقر فوق أي صفحة في قائمة الملفات والمجلدات .5- أنقر بزر الفأرة الأيمن فوق أي صفحة و اختر البند Move to Center لتظهر لك الروابط التي تؤدي إلى هذه الصفحة و الروابط التي توجد داخلها و تشير إلى صفحات أخرى أسلوب العرض Pageـــــــــــــــــــــــــــــــــــــــــــــأسلوب العرض Page هو الذي ستقضي داخله أغلب وقتك أثناء العمل في برنامج FrontPage 2000 , لأنه الأسلوب الذي يتيح لك فتح الصفحات التي قمت بإنشائها ثم تعديلها أو فتح أي صفحة على القرص الصلب بجهازك , أو إنشاء صفحات جديدة لإضافتها إلى الموقع الذي تقوم بإنشائه. ولعمل ذلك اتبع الخطوات التالية:أولا : لفتح صفحة:ـــــــــــــــــــــــــــــ1- أنقر فوق الزر Page في شريط Views2- أنقر بالفأرة نقرا مزدوجا فوق اسم الصفحة التي تريد فتحها في قائمة المجلدات والملفات.3- اختر البند Open من قائمة File ليظهر لك مربع الحوار Open File4- قم بتحديد الملف الذي تريد فتحه5- انقر فوق الزر Openثانيا : لإنشاء صفحة جديدة:1- اختر البند New من قائمة File2- اختر القالب المناسب للصفحة التي تريد إنشائها3- انقر فوق الزر OK ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــحفظ الصفحات:ــــــــــــــــــــــــــــــحفظ صفحات الويب يختلف عن حفظ أنواع الملفات الأخرى , لأن صفحة الويب عادة تحوي داخلها عناصر أخرى مثل الصور أو لقطات الفيديو أو غيرها, تلك العناصر يجب أن يتم حفظها هي الأخرى داخل المجلد الذي يحتوي على ملفات موقعك.فإذا قمت على سبيل المثال بإدراج صورة من أي ملف موجود على القرص الصلب بجهازك داخل صفحة من صفحات الموقع الذي تقوم بإعداده سيقوم برنامج FrontPage 2000 بإعلامك بأن تلك الصورة يجب أن تقوم بحفظها عند قيامك بحفظ صفحة الويب نفسها.ولعمل ذلك اتبع الخطوات التالية:1- أختر البند Save As من قائمة File2- اكتب اسم الملف3- أنقر فوق الزر Change4- اكتب اسم الصفحة ثم انقر فوق الزر OK5- أنقر فوق الزر Save6- إذا كانت الصفحة التي تقوم بحفظها تحتوي على عناصر من ملفات أخرى سيقوم FrontPage 2000 بسؤالك عما إذا كنت تريد حفظ تلك الملفات, في هذه الحالة أنقر فوق الزر OK اختيار الألوان و خلفية الصفحةــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــتستطيع بسهولة تغيير لون خلفية الصفحة أو لون الخطوط أو الروابط. ولعمل ذلك اتبع الخطوات التالية:1- انقر بزر الفأرة الأيمن في أي مكان من الصفحة التي تقوم بإعدادها لتظهر لك قائمة مختصرة اختر منها البندPage Properties ليظهر لك مربع الحوار Page Properties2- أنقر فوق زر التبويب Background3- أنقر فوق الزر الذي يشير إلى أسفل و الموجود بجانب أي من البنود الموجودة داخل مربع الحوار و ليكن البند Background لتغيير لون خلفية الصفحة 4. اختر اللون الذي تريده لخلفية الصفحة5. انقر فوق البند More Color ليظهر لك عدد أكبر من الألوان لتختار من بينها6. كرر العملية مع البنود الأخرى مثل Text لتغيير لون الخطوط, أو Hyperlink لتغيير لون الروابط, ثم انقر فوق الزر OKبدلا من أن يكون لصفحة الويب خلفية ملونة بلون معين يمكن أن تكون خلفية الصفحة عبارة عن صورة, و قد تكون هذه الصورة كبيرة بحيث تحتل خلفية الصفحة بالكامل و قد تكون صورة صغيرة يتم تكرارها بحيث تغطي خلفية الصفحة بالكامل بنفس الطريقة التي تعمل بها خلفيات سطح المكتب في نظام ويندوز, و بالطبع استخدام الصور الصغيرة أفضل لأنها تستغرق وقتا أقل لتظهر عند استعراض الصفحة من خلال مستعرض الويب.ولعمل ذلك الآن اتبع الخطوات التالية:1- افتح مربع الحوار Page Properties2- انقر فوق زر التبويب Background3- انقر فوق البند Background picture4- انقر فوق الزر Browse5- انقر فوق الزر Clip Art لتختار خلفية لصفحتك من الصور الموجودة ضمن مجموعة Clip Art التي تأتي مع FrontPage 20006- اختر الصورة التي تريدها ثم انقر فوق الزر okاستعراض الصفحةـــــــــــــــــــــــــــــعلى الرغم من أن برنامج FrontPage 2000 يتميز بأنه يعرض الصفحة أثناء إنشائك لها بنفس الشكل الذي ستظهر عليه عند استعراضها من خلال مستعرض الويب, إلا أنه في الواقع ستجد بعض الاختلافات الطفيفة لذا يفضل أن تشاهد صفحتك من خلال مستعرض الويب. ولعمل ذلك الآن اتبع الخطوات التالية:1- من قائمة File اختر البند Preview in browser2- اختر المستعرض الذي تستخدمه3- اختر مساحة نافذة المستعرض… و هنا من الأفضل أن تجرب استعراض صفحتك في جميع المساحات المتاحة لتستطيع معرفة الشكل الذي ستظهر عليه صفحتك من خلال أجهزة زوار موقعك, لأنه كما هو معروف ليس بالضرورة أن يستخدم زوار موقعك نفس الإعدادات التي تستخدمها4- اختر البند Automatically save page ليتم حفظ الصفحة قبل استعراضها5- انقر فوق الزر Preview أسلوب العرض Reportsــــــــــــــــــــــــــــــــــأسلوب العرض Reports يعد من المميزات التي ينفرد بها برنامج FrontPage 2000 , فإذا قمت بالنقر فوق الزر Reports في شريط Views فسيتم عرض محتويات موقعك على شكل مجموعة من التقارير, تلك التقارير تمثل أهمية كبرى في طريقك لإنشاء موقع محترف من مواقع الويب, حيث ستجد تقارير تعرض لك عدد الملفات الموجودة في موقعك و الحجم الكلي لها, عدد الصور الموجودة في موقعك و الحجم الكلي لها, الصفحات الكبيرة التي تستغرق وقتا طويلا عند تحميلها من خلال مستعرض الويب و تجعل موقعك بطيئا, الروابط المقطوعة و هي الروابط التي توجد داخل صفحات موقعك و تشير إلى ملفات أو مواقع غير موجودة, و غيرها من التقارير الأخرى الهامة. ولعمل ذلك الآن اتبع الخطوات التالية:1- أنقر فوق الزر Reports في شريط Views2- أنقر بالفأرة نقرا مزدوجا فوق أي تقرير لتشاهد محتوياته مفصلة3- للعودة مرة أخرى إلى ملخص تقارير الموقع , اختر البند Reportsمن قائمة View ثم اختر البند Site Summary و ماذا بعد?؟؟؟؟؟تعرفنا في هذه الحلقة على برنامج FrontPage 2000 , و رأينا كيف يمكننا إنشاء موقع جديد استنادا إلى إحدى القوالب أو المعالجات التي يوفرها البرنامج, كما تعرفنا على أساليب العرض المختلفة في FrontPage 2000رأينا كيف يمكن تغيير ألوان الصفحة أو اختيار صورة لخلفيتها, كما تعلمنا كيفية حفظ الصفحة واستعراضها من خلال مستعرض الويب.في الحلقة القادمة سنتعرف على كيفية التعامل مع الخطوط والرسوم أثناء تصميم صفحات الويب من خلال برنامج FrontPage 2000النصوص:ـــــــــــــــــــــــــالتعامل مع النصوص في FrontPage 2000 يشبه إلى حد كبير أسلوب برنامج Microsoft Word في كثير من الأمور, فشرائط الأدوات واختصارات لوحة المفاتيح متشابهة إلى حد كبير, كذلك معظم عمليات التنسيق و التحرير وفتح الملفات و حفظها والقص والنسخ و اللصق للنصوص متشابهة, و كذلك محاذاة النص وغيرها من العمليات الأخرى على سبيل المثال يمكن استخدام مفتاحي Ctrl + X لقص النص ومفتاحي Ctrl + C لنسخ النص ومفتاحي Ctrl + V للصق النص وهكذا.العناوين و أحجام الخطوط:ــــــــــــــــــــــــــــــــــــيوفر FrontPage 2000 سبعة أحجام للخطوط تبدأ ب- 7 و هو أكبر حجم و تنتهي ب- 1 و هو أصغر خط.بالنسبة للعناوين يوفر FrontPage 2000 ستة تنسيقات سابقة التجهيز لأحجام العناوين تبدأ بالتنسيق Heading1 و هو أكبر حجم للعنوان و تنتهي بالتنسيق Heading 6 و هو أصغر حجم للعنوان الآن اتبع الخطوات التالية: لتطبيق تنسيق العناوين:1- أنقر بالفأرة فوق أي جزء من السطر الذي يحتوي على العنوان.2 – أنقر بالفأرة فوق السهم الذي يشير إلى أسفل بجانب قائمة Style المنسدلة3 – أختر تنسيق الذي تريده. لتغيير حجم الخط لأي نص:4 – أختر النص الذي تريد تغيير حجمه.5 – أختر حجم الخط من قائمة Font Size المنسدلة الخطوط:ـــــــــــــــــــــــالخط الافتراضي الذي يستخدمه برنامج FrontPage 2000 هو Times New Roman , ولكن يمكن استخدام جميع خطوط تروتايب True Type الموجودة بجهازك, ولكن لاحظ أنه يجب عليك عدم استخدام خطوط غير شائعة في كتابة النصوص التي تقوم بإعدادها لأن زوار موقعك إذا لم تتوافر ليهم تلك الخطوط على أجهزتهم فستظهر النصوص أمامهم بالخط الافتراضي.ألوان الخطوط :ــــــــــــــــــــــــــــــــأي جزء من النص سواء كان فقرة كاملة أو كلمة أو حتى حرف واحد يمكن أن يظهر بلون مختلف , لأداء ذلك اتبع الخطوات التالية:1 – أختر النص الذي تريد تغيير لونه.2 – أنقر بالفأرة فوق السهم الذي يشير إلى أسفل بجانب قائمة Fonts المنسدلة.3 – أختر الخط الذي تريده.4 – أنقر بالفأرة فوق السهم الذي يشير إلى أسفل بجانب الزر Font Color في شريط الأدوات.5 – أنقر فوق الزر .More Colors6 – أختر اللون الذي تريده ثم انقر فوق الزر OK التنسيقات الخاصة للخطوطإذا قمت بتحديد أي جزء من النص ثم قمت باختيار البند Font من قائمة Format سيظهر لك مربع الحوار Font الذي تستطيع من خلاله إجراء كل العمليات الممكنة على الخطوط إضافة إلى اختيار نسيقات خاصة للنص مثل Strikethrough الذي يؤدي إلى رسم خط يمر في منتصف النص و Blink الذي يؤدي إلى ظهور النص و اختفائه بشكل متتابع و غيرها من التنسيقات الأخرى, لأداء ذلك الخطوات التالية:1 -أختر النص الذي تريد إجراء تنسيق عليه.2 – أختر البند Font من قائمة .Format3 – أختر التنسيق المطلوب.4 – قم بإجراء التنسيقات الأخرى التي تريدها على النص .5 – أنقر فوق الزر OKالمحاذاة و القوائمــــــــــــــــــــــمحاذاة النصــــــــــــــــــــــنفس الطريقة التي تستخدمها لمحاذاة النص في برنامج Microsoft Word يمكنك استخدامها في برنامج FrontPage 2000 , فقط انقر بالفأرة داخل أي مكان من الفقرة ثم انقر فوق الزر Align Left لمحاذاة النص ناحية اليسار أو الزر Center لتوسيط النص أو الزر Align Right لمحاذاة النص ناحية اليمين, القوائمــــــــــــــــــــــــــــالقوائم هي إحدى الأساليب الشائعة لتنسيق النصوص, و توفر طريقة جيدة لعرض المعلومات بشكل سريع و واضح ,و يمكنك إنشاء القوائم بطريقة تشبه إلى حد كبير الطريقة المستخدمة في برنامج Microsoft Word, اتبع الخطوات التالية:1 – أنقر فوق الزر Numbering أو Bullets في شريط الأدوات2 – أكتب البند الأول من القائمة ثم اضغط مفتاح Enter في لوحة المفاتيح , ثم اكتب البند الثاني بنفس الطريقة ثم الثالث  تغيير التنسيق3 – أنقر بزر الفأرة الأيمن فوق أحد بنود القائمة ثم اختر البند List Properties4 – أختر التنسيق الذي تريده لشكل القائمة.5 – أو انقر فوق الزر Picture Bullets ثم Browse ثم ClipArt ثم اختر صورة لتكون بديلة للنقاط التي تظهر في بداية كل بند من بنود القائمةالقوائم متعددة المستوياتالقوائم متعددة المستويات هي القوائم التي تضم بنود فرعية ضمن بنودها و يمكن إنشاء مثل هذه النوعية من القوائم باستخدام التنسيقين Defined Terms لبنود القائمة الرئيسية, و Definitionلبنود القائمة الفرعية, إدراج صورة:ـــــــــــــــــــــــــبلا شك سيحتوي موقعك على صور, و يوفر FrontPage 2000 طريقة بسيطة لإدراج الصور داخل الصفحات, اتبع الخطوات التالية:1- أختر البند Picture من قائمة Insert ثم اختر .From File 2 – أو انقر فوق الزر .Insert Picture From File لإدراج صورة من الصور الموجودة داخل الموقع الذي تقوم بإعداده:3 – أختر المجلد الذي يحتوي على الصور.4 – أنقر فوق ملف الصورة ثم انقر فوق الزر .OK لإدراج صورة من الصور الموجودة على القرص الصلب بجهازك:5 – أنقر فوق الزر Select a file on your Computer أو الزر .Clip Art6 – أنقر فوق ملف الصورة ثم انقر فوق الزر .OK لإدراج صورة من إنترنت:ـــــــــــــــــــــــــــــــ7 – أنقر فوق الزر Use your Web Browser to select a page or File ليبدأ مستعرض الويب لديك العمل.8 – قم بالدخول إلى الموقع الذي يحتوي على الصورة التي تريد إدراجها.9 – أنقر بزر الفأرة الأيمن فوق الصورة التي تريد إدراجها و اختر البند .Copy Image Location01 – أنقر بالفأرة داخل صندوق URL في مربع الحوار Picture ثم اضغط مفتاحي Ctrl +V في لوحة المفاتيح للصق موقع الصورة. نسخ و لصق الصور:ــــــــــــــــــــــــــــــــــــــــمن الجميل أيضا أنه يمكنك استخدام النسخ و اللصق لإدراج الصور داخل الصفحات, فمن داخل أي برنامج لإنشاء و تحرير الصور يمكنك استخدام الأمر نسخ Copy داخل هذا البرنامج لنسخ الصورة إلى الحافظة, ثم استخدم الأمر لصق Paste لإدراج الصورة داخل الصفحة في FrontPage .2000سحب و إفلات الصورمن الخصائص الجيدة في FrontPage 2000 أنه يمكنك سحب أي ملف لصورة من خلال Windows Explorer أو حتى باستخدام خاصية Find في ويندوز ثم إفلاته داخل الصفحة التي تقوم بإعدادها داخل FrontPage 2000ليتم إدراج تلك الصورة داخل الصفحة, اتبع الخطوات التالية:1 – أنقر فوق الزر Start ثم اختر Find ثم Files or Folders2 -أبحث عن اسم ملف الصورة التي تريد إدراجها.3 – قم بتغيير حجم نافذة مربع الحوار Find لتستطيع رؤية الصفحة التي تقوم بإعدادها في برنامج .FrontPage 20004 – أنقر بالفأرة فوق اسم الملف.5 – قم بسحب الملف من نافذة مربع الحوار Find إلى الموقع الذي تريد إدراج الصورة فيه في الصفحة التي تقوم بإعدادها في برنامج FrontPage 2000 خصائص الصورة:ــــــــــــــــــــــللصور التي يتم إدراجها داخل الصفحات التي تقوم بإعدادها داخل برنامج FrontPage 2000 خصائص يمكن تعديلها, بعض منها يخص الشكل الذي تظهر عليه مثل حجم الصورة والإطار الخاص بها, والبعض الآخر يخص العلاقة التي تربط الصورة بالنص الموجود بالصفحة مثل المحاذاة وغيرها, الآن اتبع الخطوات التالية:1 -أنقر بزر الفأرة الأيمن فوق الصورة التي تريد تعديل خصائصها و اختر البند .Picture Properties 2 – أنقر فوق زر التبويب .Appearance3 – أختر البند .Specify Size4 – قم بتحديد عرض الصورة و ارتفاعها سواء بالبيكسل أو بالنسبة المئوية.5 – إذا كنت تريد وضع إطار للصورة فقم بتحديد سماكة هذا الإطار محاذاة الصورة:ــــــــــــــــــــــالتباعد الأفقي Horizontal Spacingو التباعد الرأسي Vertical Spacing يحددان البعد ببين حدود الصورة و النص الموجود حولها بوحدة البيكسل Pixel المحاذاة Alignment : تحدد الكيفية التي تظهر بها النصوص المحيطة بالصورةالنص البديل و الصورة البديلة:ــــــــــــــــــــــــــــــــــــــــــبعض زوار موقعك يقومون بإلغاء عرض الصور ضمن خيارات مستعرضات الويب التي يستخدمونها من أجل أن يتم تحميل الصفحات بشكل أسرع, في هذه الحالة من المفضل أن يظهر نص يوضح محتويات الصورة ليمكنهم تحديد ما إذا كانت الصورة تستحق العرض أم لا, و يمكن أيضا أن تقوم بتحديد صورة بديلة للصورة الأصلية هذه الصورة تكون أصغر حجما أو أقل في دقة العرض Resolution لنفس السبب, لأداء ذلك اتبع الخطوات التالية:1 – في مربع الحوار Picture انقر فوق زر التبويب .General2 – في صندوق Text أكتب النص البديل الذي يعبر عن محتوى الصورة3 – أنقر فوق الزر Browse الموجود بجانب صندوق Low Res و قم بتحديد موقع الصورة البديلة.4 – أنقر فوق الزرOK

السلام عليكم ورحمة الله وبركاته شرح طريقة إدراج فلم في الصفحة عباره عن ملف: rmعلى سبيل المثال: Dragon-Ball.rm

ثم ننتقل لنافذة التالية:1- نختار عناصر تحكم متقدمة2- دبل كلك على توصيل

من النافذة التالية نختار التالي:1- نضع مسار الملف 2- الرسالة اللي تظهر لشخص اللي ماعنده نفس البرنامج المستخدم3- العرض والارتفاع ثم موافق

بيطلع لنا الشكل التالي نضغط على زر التشغبل حتى يتم عرض الفلم

العرض بيكون بالشكل التالي:

بالتوفيق للجميع مصدر الدرس : : منتديات ألم الإمارات