دوره مبسطه في ال Front Page ( شرح + صور )

الدرس السادس :

عمل نسخة مصغرة من الصورة

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

حدد الصورة التي تريد عمل نسخة مصغرة لها



ثم اختر الأداة ( صورة مصغرة تلقائية )
لاحظ كيف تم تصغير الصورة



عند حفظ موقع ويب سيقوم الفرونت بيج تلقائيا بحفظ الصورة المصغرة كجزء من الصفحة

توفير نص بديل للصورة :

سيظهر هذا النص كبديل للصورة إذا لم تظهر على الصفحة كما انه يوفر للزائرين الذين لا يرون الصور معلومات عن الصورة المفقودة كما تفيد الزائرين الذين يوقفون عرض الصور في مستعرضاتهم لكي يتمكنوا من استعراض الويب بصورة أسرع

حدد الصورة التي تريد عمل نص بديل لها
من قائمة تنسيق => خصائص



لاحظ النتيجة :

بسم الله الرحمن الرحيم



يختلف أسلوب التصميم من مصمم لآخر حسب الذوق وحسب الفكرة وحسب برنامج التصميم ..

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

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

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

يمكنك تصميم الموقع على صفحات كاملة إما بطريقة الإطارات Fram أو بأسلوب الجداول Table ..

وسنبدأ من الأخير لسهولة التحكم بالجداول وسهولة تنسيق الموقع بواسطتها.

في البداية هذه صورة توضح طريقة تحديد الجدول حسب أعداد الصفوف:



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


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


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

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


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



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

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

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

القسم رقم 2 :
هذا المربع المنسدل يعطينا حرية تحديد إتجاه الكتابة في الجدول من اليمين لليسار والعكس .

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

كلمة -اللون- هي تختص بلون الحد إذا كان الحجم أكبر من (1) وفي حالتنا هذه لايظهر اللون لأن الحد شفاف أو بدون لون ..

الحد الفاتح والحد الغامق أيضاً تأخذ نفس الأسلوب عندما تكون الحدود للجدول (0) وإذا اردت إكتشاف ذالك قم بتغير حجم الحد وإختار الألوان التي تريد لترى النتيجة .

القسم 5 :
هذا القسم هو بالأساس قسم الخلفية مع القسم 6 وهذا القسم يقوم بتغير خلفية الجدول حسب اللون المحدد من القائمة المنسدلة ..

القسم 6 :
يمكنك تغير خلفية الجدول بصورة ما أن تحددها من جهازك .

===نأتي الآن للتعرف على خصائص الخلية من جدول ما ===

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

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



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

بسم الله الرحمن الرحيم



نستكمل ما بدأناه ..

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

طبعاً من أهم العوامل التي تجذب الزائر للموقع هي حسب الأولوية كما يلي:

1- المعلومة المفيدة.
2- سهولة التنقل بين صفحات الموقع.
3- سرعة تصفح الموقع.
4- المظهر الجميل.

العامل الأول وهو المعلومة المفيدة يرجع للمصمم والتخصص الذي يرغب بناء الموقع على أساسه وبالتالي طبيعة الزوار لموقعه.

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

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

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

==== لنبدأ الآن بعمل المشروع ===

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

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

التشكيل الأساسي للصفحة الرئيسية لموقع يهتم بالبرامج وعتاد الحاسب الآلي هو (ليس من الضروري هذا التقسيم) :

1- قسم البرامج Software
2- قسم العتاد Hardware
3- قسم الدعم الفني
4- الأسئلة المتكررة AFQs
5- المساعدة

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


في البداية للتنفيذ نفتح ونختار (ملف > جديد > صفحة أو ويب.. )

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

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

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

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

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

......................مشكور ......................... .....................مشكو ر............
.................مشكور... ......مشكور.............. .........مشكور.........مشكور.....
...............مشكور..... ..........مشكور...............مشكور..... ........... مشكور.....
...............مشكور..... ....................مشكور ......................... .....مشكور.....
.................مشكور... ......................... ......................... .....مشكور.......
...................مشكور. ......................... ......................... ...مشكور.....
......................مشك ور....................black Kngith.................. مشكور.......
......................... مشكور.................... ....................مشكور ......
......................... ...مشكور................. ................مشكور.... ....
......................... ......مشكور.............. ............مشكور........
......................... .........مشكور........... .......مشكور...........
......................... ............مشكور.......مشكور........... .....
......................... ....................مشكور .......................