[size=18]كيف تصمم موقع بالفرونت بيج
صفحات فرونت بيج جاهزة طريقة عمل موقع بالفرونت بيج مشاريع جاهزة فرونت بيج مشاريع فرونت بيج جاهزة مشروع فرونت بيج جاهز
أساسيات فرونت بيج
يعد فرونت بيج من أهم البرامج استخداماً في إنشاء صفحات الويب .ولهذا السبب ستنفق وقتاً طويلاً في تعلمه والتعرف عليه . ويبين الشكل 3-1 واجهة المستخدم الأساسية التي ستراها عند العمل في فرونت بيج .
3-1
في الجانب الأيسر ستجد شريط العرض Views Bar . هذا الشريط يتيح لك سرعة تغيير طرق العرض الخاصة بصفحات الويب فضلاً عن تغيير الخصائص المتنوعة في البرنامج . ومن طرق العرض Navigation والذي يتعلق بإنشاء أشرطة التحرك ، وأيضاً عرض المهام Tasks .
نظراً لأنك ستقضي معظم وقتك في استخدام فرونت بيج كمحرر لصفحات الويب ، فمن المفضل أن تقوم بإزالة شريط العرض ، كما يلي :
1- افتح قائمة View .
2- قم بإلغاء تحديد خيار Views Bar لإزالة علامة الاختيار من أمامه ( أنظر الشكل 3-2 ) ، سيختفي بذلك شريط العرض .
2-3
بعد إخفائك شريط العرض يمكنك أيضاً الوصول إلى خيارات العرض الأخرى الخاصة بالموقع الذي أنشأته , وذلك من خلال قائمة View .
في فرونت بيج يمكنك الوصول إلى أكثر الخصائص استخداماً من خلال أشرطة الأدوات القياسية التسعة . يعرض شريط الأدوات القياسي Standard وشريط التنسيق Formatting .
يعرض عليك الشكل 3-3 النافذة الرئيسية وبداخلها شريط الأدوات القياسي وشريط التنسيق ، بينما يعرض الشكل 3-4 كافة اجزاء العرض وبعض اشرطة الأدوات التسعة .
3-3
3-4
كيفية إنشاء موقع ويب
عندما تقوم بإنشاء مجموعة صفحات للويب لوضعها في موقع على الويب . فإن فرونت بيج يتيح لك تجميع تلك الصفحات في وحدة واحدة ليطلق عليها في النهاية " ويب " Web . رغم أننا نستخدم فرونت بيج إنشاء وتعديل الصفحات الفردية دون القيام بإنشاء موقع ويب ، فإنك ستجد تحفيزاً قوياً على إنشاء موقع ويب يجمع الصفحات التي أنشأتها . وذلك للأسباب التالية :
يحتوي فرونت بيج على عدة خصائص لفحص سلامة الصفحات التي تقوم بإنشائها وسلامة الارتباطات في تلك الصفحات .
فرونت بيج مصمم ليتيح لك إرسال الصفحات التي تنشئها إلى أحد أجهزة خادم الويب وذلك كوحدة واحدة .
عند إنشاء أحد المواقع يمكنك استخدام أداة التحرك التلقائية في فرونت بيج لإنشاء أشرطة تحرك خاصة بموقعك .
الاحتفاظ بصفحات الويب التي تنشئها داخل موقع واحد يتيح لك استخدام المجلدات Folders لتنظيم الملفات .
أيضاً يتيح لك ذلك استخدام التقارير Reports لتسهيل فحص موقعك .
إذا قمت بإنشاء موقع ويب جديد ، ينشئ فرونت بيج مجلد جديد مستخدماً اسم الموقع ثم تستطيع تخزين ملفاتك أو إضافتها إلى موقعك داخل هذا المجلد أو مجلدات فرعية أخرى .
قم بإنشاء أول موقع ويب خاص بك .
1- من قائمة File ، حدد خيار New ثم Web لتفتح مربع حوار New ( انظر الشكل 3-5 ) .
2- من بين القوالب اختر الموقع الذي تريد إنشائه ومبدئياً حدد خيار One Page Web .
3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .
4- إنقر زر OK في حالة عدم وجود مجلد الويب ، سيطلب منك إنشاؤه في هذه الحالة انقر زر yes لإنشاء المجلد والموقع . ( انظر الشكل 3-6 )
3-5
3-6
كيفية إنشاء ملف HTML
بعد أن تعلمت كيفية إنشاء موقع الويب الخاص بك ستتعلم الآن كيفية إنشاء صفحات داخل موقعك حيث أن للموقع أن يحوي عدد من الصفحات .
لإضافة صفحة جديدة في موقعك ، قم بما يلي :
1- من قائمةFile حدد خيار New ثم Page حتى تفتح مربع حوار New ثم انقر علامة تبويب General ( انظر الشكل 3-7 ) .
3-7
2- سوف يعرض لك المربع New قوالب متنوعة لصفحات ويب . قم بتحديد خيار Normal Page ثم انقر زر OK . ستظهر لك صفحة فارغة .
عندما تقوم بإنشاء الصفحات ستأخذ هذه الصفحات الأسماء الافتراضية للملفات مثل new page1.htm و new page2.htm لذا احفظ الصفحات بأسماء أخرى أكثر وضوحاً حتى يمكنك التعرف عليها بسهولة .
تعلمت في هذا الدرس بعض الأساسيات في فرونت بيج عن كيفية إنشاء المواقع وإضافة الصفحات إلى هذا الموقع . في الدرس القادم ستتعلم كيفية استخدام قوالب وصفحات الويب .
ستخدام القوالب
بدء استخدام القوالب في فرونت بيج
ما القوالب ؟
القوالب templates عبارة عن هياكل جاهزة يمكنك استخدامها في إنشاء أنواع مختلفة من مواقع وصفحات الويب . وإلى جانب كونها هياكل جاهزة ، تأتي القوالب في شكل هياكل فارغة .
إن طبيعة القالب يمكنك تخيلها في أنك تريد بناء بيت صغير ، هل الأفضل لك أن تبدأ في بنائه من فراغ ، أو أن تشتري هيكلاً جاهزاً له ؟ بالتأكيد من الأسهل شراء هيكل جاهز بأعمدة وأساسات ثم تبدأ في بنائه , المقصود – أن الهيكل أو ( القالب ) يعمل بمثابة الأساس الذي ينبني عليه موقع أو صفحة الويب ، الأمر الذي يتيح لك إظهار العمل بالشكل الذي تريد .
أنواع القوالب المتاحة في فرونت بيج
القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .
قوالب المواقع
هناك تشكيلة مكونة من ثمانية قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك ( انظر الشكل 4-1 )
4-1
وتكون هذه القوالب على شكل هياكل فارغة يمكنك من إنشاء أنواع معينة من مواقع الويب ، كما يحتوي فرونت بيج على المعالجات Wizards ، هذه المعالجات عبارة عن قوالب تلقائية تستفيد منها في إنشاء مواقع ويب أكثر تعقيداً .
هذا وصف لقوالب ومعالجات مواقع الويب في فرونت بيج :
× Corporate Presence Wizard : هذا المعالج يرشدك إلى خطوات إنشاء موقع ويب خاص بأعمالك التجارية .
× Customer Support Web : يمكنك هذا المعالج من إنشاء موقع ويب خاص بدعم المستهلكين ، يصلح هذا القالب لشركات البرامج التي تقوم بإنشاء مواقع دعم المستهلكين .
× Discussion Web Wizard : يرشدك هذا المعالج إلى عملية إنشاء موقع مناقشة يشبه مجموعات الأخبار .
× Import Web Wizard : يمكنك هذا المعالج من إنشاء أرشيف على الويب يحتوي على ملفات من كمبيوترك الخاص بك . كما يمكنك من استيراد أحد مواقع الويب إلى موقع آخر داخل فرونت بيج .
× Project Web : يقوم هذا المعالج بإنشاء موقع ويب يتم تأسيسه وفق مشروع معين يحوي الجدول الخاص بهذا المشروع وحالته وعدده وملفات الأرشيف والمناقشات .
× Personal Web : يكنك من إنشاء موقع ويب شخصي يعكس أنشطتك واهتماماتك الخاصة .
× One Page Web : يحوي هذا القالب صفحة ويب واحدة .
× Empty Web : لا يحوي أي صفحة ويب بداخله .
استخدام قالب معالج الويب
لاستخدام قالب بسيط في إنشاء موقع ويب ، قم بما يلي :
1- من قائمة File ، حدد الخيار New ثم Web حتى تفتح مربع حوار New وبداخله علامة تبويبWeb Site محددة .
2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب Customer Support Web مثالاً
3- حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر زر ok .
4- في حالة عدم وجود هذا المجلد بالفعل ، سيسألك البرنامج إن كنت تريد إنشاءه . في هذه الحالة انقر زر yes وسيقوم فرونت بيج بعد ذلك بإنشاء القالب طالما انتهيت من إنشاء المجلد الخاص به .
5- بعد بضع ثوان ، سيتم إنشاء القالب .
يقوم فرونت بيج بإضافة صفحة آو أكثر إلى موقع الويب بعد تحديد أي قالب من القوالب ما عدا قالب Empty Web .
استخدام القوالب لإنشاء أنواع مختلفة من صفحات الويب
على غرار قوالب المواقع ، تمثل قوالب الصفحات أيضاً هياكل فارغة يمكنك استخدامها لإنشاء صفحات الويب داخل موقعك ، أيضاً يمكنك إنشاء أي عدد من صفحات الويب باستخدام القوالب الخاصة بها .
3-4
رغم أن عدد القوالب ثمانية فقط إلا أنه يحتوي على 36 قالباً للصفحات . ويبين الشكل 4-4 معظم قوالب الصفحات التي يمكنك اختيار ما يناسب احتياجك منها .
كما يعرض فرونت بيج نموذجاً بسيطاً لكل قالب صفحة قبل أن تقوم بإنشائها على عكس قوالب المواقع .
لإنشاء صفحة ويب باستخدام أحد القوالب قم بما يلي :
1- من قائمة File حدد خيار New ثم خيار Page لتفتح مربع حوار New حدد علامة تبويب General إذا لم تكن محددة .
4-4
2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب – Left ، Narrow aligned Body مثلاً ( انظر الشكل 4-5 ) .
5-4
سيقوم القالب الذي حددته بعرض نموذج مصغر له في مربع المعاينة .
3- انقر زر ok بعد ثوان معدودة ، سيتم إنشاء الصفحة الجديدة من القالب الذي حددته ( انظر الشكل 4-6 ) .
6-4
عند استخدام القوالب ستلاحظ أن فرونت بيج يقوم بإنشاء مواقع وصفحات الويب باستخدام بعض هذه القوالب
تعلمت في هذا الدرس كيفية إنشاء مواقع وصفحات الويب باستخدام القوالب في فرونت بيج .
التعامل مع النصوص
أساسيات النص
سوف تتعلم كيفية إضافة النص إلى صفحاتك وإذا كنت قد أمضيت وقتاً طويلاً داخل الويب فلعلك قد لاحظت أن معظم مواقع الويب يتم إعدادها بغرض توصيل أنواع مختلفة من المعلومات ، ومازال النص من أكثر الوسائل فعالية في أداء هذه المهمة .
أيضاً يتيح لك فرونت بيج تزيين النص وتنسيقه بالإضافة إلى وضع النص الأصلي في الصفحة ، يمكنك باستخدام فرونت بيج :
× تعديل حجم النص .
× ضبط وضع النص ، كأن يكون منخفضاً subscript أو مرتفعاً superscript عن السطر .
× إضافة سمات إلى النص ، كأن تجعله عريضاً أو مائلاً أو أسفله سطر ، أو حتى الجمع بين هذه السمات .
× توسيط النص على الشاشة .
× إضافة ألوان أو أي تأثيرات أخرى ، مثل تأثير النص الوامض .
× تغيير الخط الظاهر على الشاشة .
هذا كله يمثل عينة بسيطة من الطرق التي يمكنك بها تعديل النص ، وسوف ترى أثناء تعاملك مع فرونت بيج أن معظم ما يتم إضافته إلى صفحات ويب التي تنشأها يأتي على شكل نصوص وستلاحظ أن فرونت بيج يوفر لك مرونة هائلة في طريقة القيام بتلك العملية .
إضافة النص إلى صفحة الويب
يتعامل فرونت بيج مع إضافة النص بنفس سهولة برامج معالجة الكلمات ، كل ما عليك هو أن تكتب وسوف يتم لف النص تلقائياً إلى السطر التالي بمجرد أن تصل إلى نهاية السطر الذي تكتبه .
لتبدأ بكتابة أي فقرة تريدها :
1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة بفتح قائمة File ثم تحديد خيار New ثم Page ، في مربع حوار New ، حدد خيار Normal Page ، ثم انقر زر ok لتفتح صفحتك الجديدة .
2- عند الموضع الذي يظهر فيه مؤشر الكتابة ، اكتب ما يلي :
بسم الله الرحمن الرحيم
لاحول ولا قوة إلا بالله
3- اضغط مفتاح الإدخال Enter واستمر في كتابة اى نص . لا تضغط مفتاح الإدخال Enter عندما تصل إلى نهاية السطر ، فقط واصل الكتابة وسيتم لف النص تلقائياً إلى السطر التالي ،
4- اضغط مفتاح الإدخال Enter بعد أن تنتهي من كتابة هذه الفقرة ينبغي أن يبدوا النص لديك بنفس الشكل التالي في ( الشكل 5-1 ) .
5-1
ثم أنه لابد أن تحدد النص الذي تريد تغييره أو إضافة أي سمة إليه ، مثلاً لتغيير حجم النص الذي كتبته ، قم بما يلي :
1- حدد نص بسم الله الرحمن الرحيم .
2- من قائمة Format ، حدد أمر Font . في مجموعة Size ، استخدم شريط التمرير حتى تصل إلى خيار 7 ثم حدده ، انقر بعد ذلك زر ok ، لا بد أن يظهر النص لديك بنفس الحجم الموجود في الشكل .
بشكل عام ، يمنحك فرونت بيج قدراً معقولاً من حرية الاختيار في تحديد حجم النص الذي تكتبه ، ويبين الشكل 5-3 المدى المتاح لك في تغيير حجم النص حيث يبدأ من 8 إلى 36 نقطة .
5-3
قائمة مختصرة : لست مضطراً لاستخدام قائمة Format حتى تفتح مربع حوار Font يمكنك أيضاً أن تنقر بزر الفأرة الأيمن بعد تحديد النص لتفتح قائمة مختصرة ، من هذه القائمة حدد أمر Font Properties لتفتح مربع حوار Font .
إضافة الألوان والسمات
والآن ، قم بإضافة بعض السمات إلى النص ، ابدأ بتغيير لون العنوان :
ولتغيير لون النص :
1- حدد عنوان النص .
2- من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الشكل 5-4 ) .
5-4
3- افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .
4- حدد خيار Red ثم انقر زر ok لتغلق مربع حوار Font لتفتح مربع حوار Font يجب الآن أن يظهر عنوان الفقرة باللون الأحمر .
أيضاً يمكنك جعل النص عريضاً أو مائلاً أو أسفله خط .
لجعل النص عريضاً :
1- حدد الكلمات لاحول ولا قوة إلا بالله.
2- انقر رمز Bold ( يحمل هذا الرمز حرف B ) الموجود على شريط الأدوات .
لجعل النص مائلاً :
1- حدد الكلمات اي من الكلمات .
2- انقر رمز Italics ( يحمل هذا الرمز حرف I المائل ) الموجود على شريط الأدوات .
ولإضافة سطر أسفل النص :
1- حدد كلمة الله جل جلاله .
2- انقر رمز Underline ( يحمل هذا الرمز حرف U ) الموجود على شريط الأدوات .
3- الآن ينبغي أن تشبه الفقرة لديك ما هو مبين في الشكل (5-5 ) .
أنماط الخط والتأثيرات
5-5
1- حدد كلمة اي كلمة من النص.
2- من قائمة Format ، حدد أمر Font لتفتح مربع حوار Font .
3- في جزء Effects ، يمكنك أن ترى التأثيرات المتنوعة التي يتيحها لك ، كما يتيح لك مربع المعاينة Preview رؤية الشكل الذي يظهر عليه النص بعد تطبيق أي تأثير من تلك التأثيرات .
لا حظ السطرين الظاهرين في مربع المعاينة يتيحان لك رؤية النص بالنسبة للتأثيرات التي تغير من الوضع الرأسي ، مثل تأثير انخفاض subscript وارتفاع superscript النص عن السطر
4- مثلاً حدد خياري Caps Small و Superscript . انقر زر ok لتغلق مربع الحوار وترى التغييرات التي أجريتها على النص .
يعد تغيير المسافة بين الأحرف Character Spacing من التأثيرات التي تستطيع استخدامها لإبراز النص .
هذه بعض الخيارات التي يمكنك تطبيقها فيما يتعلق بتأثير المسافة بين الأحرف :
1- حدد الكلمات اي من الكلمات بالحروف الانجليزية او اكتب مثلاsaudint.com.
2- افتح مربع حوار Font .
3- انقر علامة التبويب Character Spacing لتفتح اللوحة الخاصة بتأثير المسافة بين الأحرف .
4- من مربع القائمة المنسدلة Spacing ، حدد خيار Expanded وفي مربع القائمة الذي يجاوره By ، حدد خيار 10
7-5
5- من مربع القائمة المنسدلة Position ، حدد خيار Raised . وفي مربع القائمة الذي يجاوره By ، اكتب 5 .
6- انقر زر ok لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين الأحرف ( انظر الشكل 5-8 ) .
وكما ترى فإن تأثير المسافة بين الأحرف يعطيك قدراً من الحرية في التعديل في وضع النص .
5-8
(انشاء واستخدام الجداول)
--------------------------------------------------------------------------------
الرئيسية
مكتبة البرامج
جديد البرامج
الكتب الالكترونية
دليل المواقع
مواقع جديدة
دروس مفيدة
مقالات واخبار
صفحة الافضل
لمراسلة الموقع
اخبر صديقك
اضف للمفضلة
البحث الشامل
صفحة البداية
للإعلان في الموقع
استضافة محمية
· منتدى المشاغب للبرامج
· القسم العام لمنتدى البرامج
· التصميم والجرافيكس
· قسم الهاردوير والصيانة
· منتدى الشبكات وأنظمة التشغيل
· تطوير المواقع والمنتديات
· قسم الالعــاب
· قسم البرامج المشروحة
· قسم البرامج المعربة
· قسم الاقتراحات والشكاوي
· برامج ادارة الفنادق و القرى السياحية
· شرح البرنامج Intruder Alert '99
· ( الانترنت اكسبلورر 7 نسخه نهائيه ) شرح بالصور ( تركيب + اعدادات خاصه للغة العربيه )
· أسرار البحث في جوجل
· الشرح الوافي بالصور لبريد الجوجل
· شرح لوحة التحكم للمجلة الخاصة للمجلة حتي الأصدارة 7.4
· درس طريقة تعريب المجلة
· تركيب مجلة النيوك علي الموقع
· شبكات اللان LAN الدرس السابع
· شبكات اللان LAN الدرس السادس
· شبكات اللان LAN الدرس الخامس
· شبكات اللان LAN الدرس الرابع
· شبكات اللان LAN الدرس الثالث
· شبكات اللان LAN الدرس الثانى
· شبكات اللان LAN الدرس الاول
· كل ماتريد معرفته عن اجهزة الشبكات
· الشبكة الافتراضية الخاصة Virtual Private Network - VPN
· درس في استخدام الصفحات الديناميكية
· شرح طريقة إستقبال بريد الياهو عن طريق الأوتلوك اكسبرس
· كيف تحصل على معلومات نظام التشغيل بالتفصيل
· موضوع شامل ( كيفية إضافة صورة في المنتدى وفي التوقيع )
· الكتابة بقطرات الندى
· شرح تصميم توقيع للمبتدئين
· درس عمل لمعه بالفوتوشوب
· درس تأثير على الصور - للمحترفين
· درس جعل التوقيع يرفرف كالعلم
· درس عمل علم بالفوتوشوب
· درس الكتابة بخلفية مشعة بالفوتوشوب
· درس التلاعب بالخطوط سهل :: فوتوشوب ::
· التكامل التــام بين الفوتوشوب والفلاش | إستيراد ، تصدير |
كراهية تمني الموت لضر نزل بالإنسان
لايدعون أحدكم بالموت لضر نزل به ولكن ليقل : اللهم أحيني ماكنت الحياة خيراً لي ، وتوفني إذا كانت الوفاة خيراً لي
أصغر طابعة
دودة Sober
أداة إزالة القيود
أداة إزالة الفايروس
بطاقات ذاكرة متطورة
المحادثات الفورية
صفحات شخصية
محرك بحث
أصغر جهاز
تخفيض
[ المزيد في أخبار الأقسام الخاصة ]
انشاء واستخدام الجداول
(2205 مجموع الكلمات في هذا النص)
(13080 قراءة)
التعرف على الجداول
إذا أجدت استخدام الجداول في صفحات الويب يتيح لك قدراً هائلاً من التحكم في وضع الصور والنصوص داخل الصفحات . والجداول عبارة عن هياكل شبكية مستطيلة ، تستطيع إنشاءها لتحوي بداخلها صوراً أو نصوصاً . يعرض ( الشكل 6-1 ) بعض الأمثلة على الجداول .
1-6
تسمى مجموعة الخلايا الأفقية بـ " صف " ، في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .
إنشاء الجداول
لإنشاء جدول :
1- قم بإنشاء صفحة جديدة فارغة .
2- من قائمة Table ، حدد أمر Insert ثم Table لتفتح مربع حوار Insert Table ( انظر الشكل 6-2 ) .
2-6
الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين ،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout وكذلك خيار Specify width . انقر زر ok سيتم إنشاء الجدول ويظهر في الصفحة ( انظر الشكل 6-3 )
3-6
التعرف على أحجام الجداول
يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات .
بكسلات Pixels عناصر الصورة أو البكسلات هي أصغر وحدات تستخدم معاً لعرض المعلومات على الشاشة ، ومن المرجح أنك سمعت المصطلح المستخدم لوصف درجة وضوح العرض على الشاشة . على سبيل المثال ، من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600. هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً ) المعروضة على الشاشة التي تستخدمها .
عندما تحدد عرض الجدول وفق نسبة مئوية معينة ، فإن العرض سيكون نسبياً ، أي وفق نسبة عرض الشاشة .
أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً للجدول .
لتغيير عرض الجدول :
1- ضع مؤشر الكتابة داخل الجدول .
2- من قائمة Table ، حدد خيار Select ثم Table .
3- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 6-4 ) .
4-6
4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .
5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .
ارتفاع الجدول :
تستطيع أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار Table Properties رغم أن معظم مصممي صفحات الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه . ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود داخل الجدول أو الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول ، يمكنك فقط أن تجري تعديلات مطلقة وفق عدد معين من البكسلات . حدد خيار Specify height ثم اكتب عدد البكسلات الذي تريد أن تحدده لارتفاع الجدول .
التعامل مع تخطيط الجداول
حدد قيم تخطيط الجدول بأرقام أعلى من القيم العادية . فالمبالغة في تعيين قيم الخصائص تساعد على فهم طبيعة تلك الخصائص .
لتغيير حجم الحد في الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Borders ، غير الحجم Size إلى 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في الجدول ( انظر الشكل 6-5 ) .
حدود غير مرئية :
توجد أيضاً طريقة تنفذها في تغيير حجم حد الجدول ، اضبط الحجم على صفر ، وسيصبح حد الجدول غير مرئي عند عرضه في مستعرض الويب . تظهر فائدة هذه الخاصية عندما تستعين بالجدول في ضبط مكان الصور والنصوص داخل صفحات الويب بدقة .
5-6
أيضاً يكنك الاستعانة بحشو الخلايا cell padding .
لتغيير حشو الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell padding على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 6-6 ) .
6-6
يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .
لتغيير المسافة بين الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell spacing على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على المسافة بين الخلايا ( انظر الشكل 6-7 ) .
6-7
التعامل مع ألوان الجداول
يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة light borders والحدود الداكنة dark borders.
لتحديد لون حدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .
4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .
5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .
يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول
لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة light Border لتفتح لوحة الألوان الخاصة بها .
4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .
5- ومن نفس الجزء انقر سهم القائمة المنسدلة Dark Border لتفتح لوحة الألوان الخاصة بها .
6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .
7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6-8 ) .
8-6
معالجة الخلايا في الجدول
يمكنك إضافة أو إزالة الخلايا من الجدول في أي وقت تشاء ، بل وبوسعك أن تقسم الخلية إلى خليتين أو أكثر ، أيضاً يمكنك دمج خليتين أو أكثر في خلية واحدة .
إضافة الخلايا
لإضافة صف جديد إلى الجدول :
1- قم بإنشاء جدول بسيط يحوي صفين وعمودين مستخدماً في ذلك القيم الافتراضية .
2- حدد إحدى خلايا الجدول بالنقر داخلها .
3- من قائمة Table ، حدد خيار Insert ثم Rows or Columns لتفتح مربع حوار Rows or Columns Insert ( انظر الشكل 7-1 ) .
1-7
4- حدد زر الخيار Rows لإدراج صف أو أكثر في الجدول .
5- حدد عدد الصفوف التي تريد إضافتها إلى الجدول . يمكنك إضافة من 1 إلى 1000 صف .
6- أسفل جزء Location ، حدد إذا ما كنت تريد إضافة الصفوف إلى أعلى أو أسفل الخلية التي يوجد بها مؤشر الكتابة حالياً .
7- انقر زر ok لإنهاء عملية الإضافة وإغلاق مربع الحوار ، سيظهر الجدول كما في ( الشكل 7-2 ) .
إضافة جدول داخل جدول : علاوة على إمكانية إضافة خلايا أو أعمدة أو صفوف إلى الجدول ، يتيح لك فرونت بيج إضافة جدول جديد إلى الجدول الحالي ، قم ببساطة بتحديد الخلية التي تريد أن تضيف إليها الجدول الجديد ثم اتبع الخطوات السابق ذكرها .
2-7
تقسيم الخلايا
قد ترغب أحياناً بتقسيم الخلية إلى عدة خلايا ويبين ( الشكل 7-3 ) مثالاً على ذلك .
لتقسيم الخلية الواحدة إلى خليتين أو أكثر :
1- حدد الخلية التي تريد تقسيمها بالنقر داخلها .
2- من قائمة Table ، اختر أمر Split Cells لتفتح مربع حوار Split Cells ( انظر الشكل 7-4 ) .
3- حدد نوع التقسيم الذي تريده ، إلى أعمدة Columns أو صفوف Rows .
4- حدد عدد الأعمدة أو الصفوف الذي تريد أن تنقسم إليه الخلية المحددة ، في الوضع الافتراضي ، يتم تحديد 2 ، وأقصى عدد يمكنك تحديده هو 100 .
3-7
4-7
5- انقر زر ok لإغلاق مربع الحوار وبدء التقسيم ( انظر الشكل 7-5 ) .
دمج الخلايا
لدمج خليتين أو أكثر :
1- حدد الخلية الأولى التي تريد أن تدمج فيها بقية الخلايا ثم ضع مؤشر الكتابة بداخلها .
2- احتفظ بمفتاح Shift مضغوطاً ثم حدد الخلية المجاورة التي تريد أن تدمجها بالخلية السابقة المحددة ستظهر الخليتان بلون مميز ( انظر الشكل 7-6 )
3- من قائمة Table اختر أمر Merge Cells وسيتم دمج الخلايا التي حددتها في خلية واحدة ( انظر الشكل 7-7 ) .
6-7
7-7
حذف الخلايا
لحذف خلية أو أكثر من الجدول :
1- قرر أولاً إذا ما كنت تريد حذف خلية أم عمود أم صف من الجدول .
2- حدد الخلية أو العمود أو الصف الذي تريد حذفه من الجدول .
3- من قائمة Table ، حدد خيار Select ثم Cell ( أو Column أو Rows ، وذلك بحسب ما تريد حذفه ) .
4- بتحديد الجزء الذي تريد حذفه من الجدول ، افتح مرة أخرى قائمة Table ثم اختر أمر Delete Cells . سيتم حذف ما قمت بتحديده من الجدول .
توزيع الصفوف والأعمدة بالتساوي
إذا كان لديك جدول يشبه المعروض في ( شكل 7-8 ) فلك أن تعيد توزيع الخلايا الموجودة في الصف الثاني حتى تبدو جميعها في أحجام متساوية .
لإعادة توزيع أحد الصفوف غير المتساوية :
1- حدد الجدول الذي يحوي الصفوف أو الأعمدة التي تريد إعادة توزيعها بالتساوي .
2- من قائمة Table ، حدد أمر Distribute Rows Evenly ، ستتم إعادة توزيع الأعمدة أو الصفوف لتبدو بشكل متساوي .
في حالة قيامك بإعادة توزيع الصفوف والأعمدة في جدولك لكن دون حدوث تلك العملية بالصورة الدقيقة التي تريدها ، فإنه يمكنك استخدام أمر التراجع undo من قائمة Edit للرجوع للحالة السابقة .
8-7
اساسيات الصور والرسومات
أساسيات الصور والرسومات
يشير مصطلح الرسومات graphics عادة إلى أي عنصر مرئي غير نصي يظهر على صفحة الويب . في حين يشير مصطلح الصور في الغالب إلى الملفات الرسومية الساكنة التي توجد في صيغتين هما GIF و JPEG .
من أهم القواعد التي يجب أن تنتبه لها عند استخدام الصور في الويب وهي :
1- استخدم صوراً صغيرة الحجم : الصور كبيرة الحجم تأخذ وقتاً عند تحميلها أما الصور صغيرة الحجم فتكون سريعة وتؤدي إلى استعراض صفحاتك بشكل سريع .
2- اجعل كل صفحة ويب لديك تحتفظ بأقل عدد من الصور : وجود عدد كبير من الصور في صفحة الويب أمر سيء ، لأنه يؤدي إلى بطء التحميل كثيراً .
3- لا تضف الصور إلى صفحة الويب لمجرد أنك تملك صوراً كثيرة : تأكد من أن الصور التي تضيفها إلى صفحاتك سوف تضيف شيئاً ما إلى محتواها .
" ثمة طريقة تسهل عليك إنشاء صفحات الويب الخاصة بك ، تقوم هذه الطريقة على إنشاء مجلد للصور – اسمه -/ IMAGES داخل مجلد Web الخاص بك حيث تخزن فيه كل ملفات الصور لديك فعند إنشاء موقع ويب يتم في الوضع الافتراضي إنشاء مجلد -/ IMAGES ليستخدم في تخزين ملفات الصور الخاصة بك .
إضافة الصور باستخدام فرونت بيج
لإضافة صورة إلى صفحة الويب :
1- في فرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .
2- من قائمة Insert ، حدد خيار File ثم Picture لتفتح مربع حوار Picture ( انظر الشكل 9-1 )
1-9
3- حدد ملف الصورة التي تريد إدراجها في صفحتك .
4- انقر زر ok وستظهر الصورة في صفحة الويب ( انظر الشكل 9-2 ) .
5- من قائمة File ، حدد أمر save لتفتح مربع حوار save as ( انظر الشكل 9-3 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد /IMAGES .
6- إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر Changes ثم حدد مجلد IMAGES ثم انقر زر ok .
7- انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .
2-9
3-9
تعديل ملفات الصور لديك
من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :
× التحكم في أبعاد الصورة داخل الصفحة
× التحكم في طريقة محاذاة النص بالنسبة للصورة
× تحديد إذا ما كان سيتم عرض الصورة داخل الحدود
× إضافة ارتباط تشعبي إلى الصورة
ولتعديل طريقة عرض الصورة داخل صفحة الويب :
1- حدد الصورة التي تريد تعديلها .
2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture Properties ( انظر الشكل 9-4 )
3- لإضافة ارتباط تشعبي إلى الصورة ، اكتب عنوان URL الخاص بالارتباط التشعبي الذي تريد ربطه مع الصورة ، وذلك باستخدام جزء Default Hyperlinks . في مربع الحوار قد يكون عنوان URL أحد المواقع الأخرى على الويب أو ملفاً أخر على الموقع الخاص بك ، ويمكنك استخدام Browse لتحدد عنوان URL إذا لم تستطع أن تتذكره .
4- لتعديل ابعاد الصورة appearance حدد علامة تبويب لتفتح النافذة الخاص بك (انظر الشكل 9-5) .
4-9
5-9
5- قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .
6- انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties .
المثال التالي يساعدك على فهم دور المحاذاة وفائدتها عندما يتفاعل النص مع الصورة داخل صفحة ويب :
1- قم بإنشاء صفحة جديدة .
2- اكتب الجملة التالية في الصفحة :
الدرة دمه في رقاب المسلمين او اكتب ما تشاء مع الصورة التي ستختارها نحن اخترنا صورة الدرة والعبارة السابقة
3- ضع مؤشر الفأرة قبل كلمة المسلمين ثم أدخل الصورة . إذا كان حجم الصورة يزيد عن 150 بكسل عرضاً ، فقم بتعديل هذا الحجم بحيث لا يزيد عن 150 بكسل . ينبغي أن تبدو الصورة لديك كما هو مبين في الشكل 9-6 .
4- حدد الصورة التي قمت بإدراجها ثم افتح مربع حوار Picture Properties . حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها .
5- لكي ترى كيف ان تغيير المحاذاة يؤدي الى التاثير على تدفق النص المجاور default ستاخذ الصورة المحاذاة الافتراضية للصورة قم بتغيير المحاذاة ثم لاحظ التغيير الذي يطرا على الصورة والنص
6-
أنواع القوائم التي يمكنك إنشاؤها
يتيح لك فرونت بيج خياراً لإنشاء القوائم النقطية bulleted lists ( انظر الشكل 8-1 ) أو القوائم الرقمية ( انظر الشكل 8-2 ) .
1-8
2-8
الغرض من القوائم هو تجميع العناصر المتشابهة معاً في مكان واحد أو إيضاح نوع معين من التدرج
إنشاء القوائم
فرونت بيج يتيح لك خياراً بثلاثة أنواع مختلفة من القوائم :
× القائمة الرقمية
× القائمة النقطية
× قائمة نقطية باستخدام الصور
إنشاء قائمة رقمية
إليك طريقة إنشاء قائمة رقمية في فرونت بيج :
1- 1- قم بإنشاء قائمة تعرض الخطوات اللازمة لتنفيذ مهمة معينة ، اكتب – مثلاً – طريقة الوضوء بالترتيب خطوة خطوة، كما في ( شكل 8-3 ) .
3-8
2- حدد النص الذي ستشكل من القائمة .
3- من قائمة Format ، اختر أمرNumbering Bullets and لتفتح مربع حوار Numbering Bullets and ( انظر الشكل 8-4)
4-8
4- حدد علامة تبويب Numbers لتفتح اللوحة الخاصة بها ( انظر الشكل 8-5 )
5-8
5- حدد نوع الترقيم الذي تريد استخدامه في تنسيق القائمة .
6- إذا أردت أن تبدأ القائمة الرقمية بأي رقم خلاف 1 ( أو خلاف حرف A ) فحدد من خانة start at القيمة التي تريد أن تبدأ منها القائمة .
7- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة الرقمية ( انظر الشكل 8-6 ) .
6-8
إنشاء قائمة نقطية
يطلق على القوائم النقطية أحياناً " غير المرتبة " أو " غير المرقمة " وهناك نوعين تنشأها من القوائم النقطية ، قوائم نقطية عادية وقوائم نقطية باستخدام الصور .
يتيح لك فرونت بيج أيضاً إنشاء قوائم باستخدام ملفات الصور . كما يحتوي على ملفات صور صغيرة .
لإنشاء قائمة نقطية عادية :
1- قم بإنشاء قائمة من عدة عناصر .
2- حدد النص الذي تتشكل منه القائمة .
3- من قائمة Format ، اختر أمر Numbering Bullets and لتفتح مربع حوار Numbering Bullets and .
4- حدد علامة تبويب plain bullets لفتح اللوحة الخاصة بها .
5- حدد نوع النقاط الذي تريد استخدامه لتنسيق القائمة .
6- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة .
أما لإنشاء قائمة نقطية باستخدام الصور :
1- قم بإنشاء قائمة من عدة عناصر .
2- حدد النص الذي تتشكل منه القائمة .
3- من قائمة Format ، اختر أمر Numbering Bullets and لتفتح مربع حوار Numbering Bullets and .
4- حدد علامة Picture Bullets لتفتح اللوحة الخاصة بها .
5- حدد الصورة التي تريد استخدامها كنقاط في القائمة . إذا كنت تستخدم فكرة عامة سائدة theme في القائمة ، فلك أن تحدد صورة مرتبطة بهذه الفكرة . في هذه الحالة ، حدد خيار Use picture from Current Theme . أما إذا لم تكن تستخدم فكرة عامة في القائمة ، فحدد الصورة التي تريد ثم حدد زر Specify Picture ، ثم اكتب اسم ملف الصورة التي تريد استخدامها . وإذا لم تكن متأكداً من اسم الملف أو موقعه ، فانقر زر Browse لتحدد موقع ملف الصورة المراد استخدامها من مربع الحوار الذي سيظهر لك .
6- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة النقطية باستخدام الصور ( انظر الشكل 8-8 ) .
8-8
كيفية وضع الصور
وضع الصور باستخدام فرونت بيج
ضع في اعتبارك أن إنشاء صفحات الويب يعد فناً أكثر منه علماً .
التحكم في الصور باستخدام الجداول
لكي يتضح لك كيف تساعدك الجداول على سهولة التحكم في وضع الصور والنص داخل صفحة الويب :
1- قم بإنشاء صفحة جديدة .
2- قم بإنشاء جدول داخل صفحة بحيث يتكون من خليتين.
3- أدرج صورتك في الخلية اليسرى .
4- بتغيير عرض الجدول ليصبح بمقدار 400 بكسل ، تستطيع أن تحصل على نتيجة تشبه المبينة في الشكل 10-1 .
1-10
التحكم في وضع الصورة باستخدام القوالب
تم تصميم العديد من القوالب بحيث توفر تشكيلة متنوعة من أنماط الجمع بين الصور والنصوص داخل صفحات الويب ( انظر الشكل 10-2 ) .
2-10
إنشاء نماذج مصغرة للصور
النماذج المصغرة عبارة عن نسخ صغيرة لصور كبيرة الحجم ، إلى جانب كونها ارتباطات للصور الكبيرة ، وكمثال على النماذج المصغرة للصور وكيفية استخدامك لها تشغيل المستعرض الخاص بك ، انتقل إلى العنوان او تنسيقها ( انظر الشكل 10-3 ) .
تستخدم النماذج المصغرة للصور عندما يكون عندك عدة صور كبيرة وتريد أن تعرضها في صفحة الويب ، وتريد أن يكون استعراضها سريعاً أو تتفادى استهلاك مساحة كبيرة على الشاشة .
3-10
عند تصميم صفحات الويب ضع في اعتبارك أن معظم المستخدمين مازالوا يستعرضون الويب باستخدام مودم سرعته 28.8 كيلوبت في الثانية . لذلك عليك أن تراعي في تصميم الصفحات سرعة تحميلها عند استعراضها .
لإنشاء نموذج مصغر لإحدى الصور :
1- قم بإنشاء صفحة جديدة .
2- أدرج أي صورة في الصفحة .
3- تأكد من ظهور شريط أدوات الصورة داخل النافذة الرئيسية لفرونت بيج ، إن لم يكن هذا الشريط ظاهراً ، فحدد خيار Toolbars من قائمة View وتأكد من تحديد أمر Picture .
4- حدد الصورة التي أدرجتها في الصفحة ، ثم انقر رمز Auto Thumbnail الموجود على شريط أدوات الصورة سيتم على الفور استبدال نموذج مصغر بالصورة الأصلية ( انظر الشكل 10-4 ) .
4-10
تستطيع أيضاً تعديل طريقة ظهور النماذج المصغرة للصور داخل الصفحة . للقيام بهذا الإجراء :
1- من قائمة Tools ، حدد أمر Page Options لتفتح مربع حوار Page Options.
2- حدد علامة تبويب Auto Thumbnail لتفتح اللوحة الخاصة بها ( انظر الشكل 10-5 ) .
5-10
3- هنا تستطيع التحكم في حجم النماذج المصغرة للصورة إلى جانب التحكم في حجم ونوع الحدود التي تظهر حول هذه النماذج داخل صفحات الويب .
إنشاء الخلفيات
توجد طريقتان لاستخدام ملفات الصور كخلفيات . الأولى هي استخدام الصورة لإنشاء خلفية عادية ، والثانية هي إنشاء ما يسمى بـ " العلامة المائية " watermark .
إنشاء خلفية عادية
لإنشاء خلفية :
1- اختر أمر Properties من قائمة File لتفتح مربع حوار Properties Page .
2- انقر علامة تبويب Background ( انظر الشكل 10-6 ) .
6-10
3- حدد مربع العلامة Picture Background ، ثم أدخل إسم ملف الصورة التي تريد استخدامها كخلفية . إن لم تتذكر جيداً اسم ملف الصورة ، فاستخدم زر Browse للبحث عنه وتحديد موقعه .
4- انقر زر ok ، وستظهر الصورة التي حددتها كخلفية للصفحة التي تتعامل معها حالياً ( انظر الشكل 10-7 ) .
لا ينبغي أن تستخدم صورة خلفية تتفوق على النص والصور التي تعرضها في صفحة الويب .
7-10
إنشاء العلامة المائية
لتعيين صورة الخلفية كعلامة مائية :
1- من قائمة File ، حدد أمر Properties لتفتح مربع حوار Properties Page .
2- انقر علامة تبويب Background لتفتح اللوحة الخاصة بها .
3- حدد مربع العلامة watermark .
4- انقر زر ok ، لتصبح بذلك الصورة التي حددتها للخلفية علامة مائية لصفحة الويب التي تصممها .
انشاء الارتباطات
كيف تعمل الارتباطات ؟
عند عرض أي صفحة ويب بواسطة مستعرض الويب الخاص بك ، يقوم المستعرض بتفسير الارتباطات على أنها توصيلات إلى ملفات أو موارد أخرى على الإنترنت . إذا كنت من مستخدمي نيتسكيب أو إنترنت إكسبلورر ، فسيتحول المؤشر بعد وضعه على الارتباط إلى يد بها إصبع مرفوع هذا المؤشر يدل على وجود ارتباط إلى مورد آخر على الإنترنت .
يتيح لك فرونت بيج إنشاء الارتباطات التي تريدها في صفحات الويب الخاصة بك .
لإنشاء ارتباط داخل صفحة الويب الخاصة بك :
1- قم بإنشاء صفحة جديدة .
2- اكتب النص التالي :
ساودينت مكتبة الكمبيوتر العربية
اضغظ هنا لزيارة الموقع
حدد الكلمات/ اضغظ هنا لزيارة الموقع.
3- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink ( انظر الشكل 14-2 ) .
2-14
4- في خانة URL ، وبعد http:/ ، اكتب النص التالي :
www.saudint.com
5- انقر زر ok لإغلاق مربع الحوار وحفظ الارتباط .
6- 1- حدد كلمة ساودينت وكرر الخطوتين 4 و 5 ، ولكن مع كتابة www.saudint.com في الخطوة الاخيرة. ينبغي أن تظهر الصفحة لديك كما هو مبين في ( الشكل 14-3 ) .
الارتباطات الداخلية والخارجية
عند إنشاء أحد الارتباطات إلى صفحة ويب أخرى ، يمكنك استخدام فرونت بيج لإنشاء ارتباط داخلي أو خارجي . والارتباط الداخلي هو ارتباط إلى صفحة أخرى داخل موقع الويب الخاص بك . أما الخارجي فهو ارتباط إلى صفحة أخرى داخل موقع ويب آخر .
3-14
إذا استطاع مستعرض الويب الخاص بك عرض ارتباط ما ، فلك أن تنشئ ارتباطاً إلى هذه الصفحة .
إشارة نسبية ومطلقة
تستطيع إنشاء نوعين من الارتباطات الداخلية :
× ارتباطات داخلية تستخدم إشارة مطلقة absolute .
× ارتباطات داخلية تستخدم إشارة نسبية relative .
وإليك سيناريو يوضح لك الاختلافات بين هذين النوعين من الإشارات . لنفترض أنك أنشأت موقع الويب الخاص بك وسميته mysite.com .
ولنفترض أيضاً أنك أنشأت ملفاً باسم personal .htm وحفظته داخل مجلد /saudi . لإنشاء ارتباط إلى هذا الملف من ملف index.htm ، تستطيع إنشاء الارتباط بإحدى الطريقتين :
ارتباط مطلق : http://www.mysite.com/saudi/personal.htm
ارتباط نسبي : pers/personal.htm/
سيعمل الارتباط النسبي لأن كلا الملفين محفوظان على نفس الكمبيوتر .
تضمين الارتباطات في ملفات الصور
عندما تريد تضمين ارتباط في ملف صورة ، اتبع نفس القواعد التي ألممت بها عند تضمين ارتباط في نص .
إنشاء الإشارات المرجعية
تستخدم الإشارات المرجعية عادةً في الصفحات التي تقسمها إلى مقاطع في هذه الحالة ، تحتاج إلى إنشاء ارتباط إلى بداية كل مقطع من هذه المقاطع .
لإنشاء إشارة مرجعية :
1- ضع المؤشر على بداية كل مقطع تريد أن تضع عنده الإشارة المرجعية .
2- من قائمة Insert ، حدد أمر Bookmark لتفتح مربع حوار Bookmark ( انظر الشكل 14-5 ) .
3- في مربع نص Bookmark Name ، اكتب إسماً فريداً للإشارة المرجعية التي تنشئها . عند إنشاء إشارات مرجعية أخرى ، فستظهر داخل مربع Bookmark on the page other .
4- انقر زر ok لإنشاء الإشارة المرجعية وإغلاق مربع الحوار . سترى رمز الإشارة المرجعية ظاهراً في المكان الخاص بها داخل الصفحة ( انظر الشكل 14-6 ) .
تم إنشاء الإشارة المرجعية لديك . والآن ، عندما تريد إنشاء ارتباط إلى هذه الصفحة وإلى الإشارة المرجعية الموجودة فيها ، فستخدم الصيغة التالية :
#
5-14
6-14
أنواع مختلفة من الارتباطات
يمكنك إنشاء ارتباطات إلى الملفات الموجودة على خادم FTP بنفس الطريقة المتبعة في إنشاء الارتباطات داخل صفحات الويب .
لإنشاء ارتباطا على FTP :
3- قم بإنشاء صفحة جديدة .
4- اكتب النص الذي تريد إظهاره كارتباط .
5- حدد النص الذي تريد جعله ارتباطاً إلى الملف الموجود على خادم FTP .
4- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink .
5- داخل مربع نص URL ، احذف الحروف http:// واكتب ftp:// بعد هذه الحروف ، اكتب عنوان URL الخاص بالملف الذي تريد إنشاء الارتباط له
6- انقر زر OK لإغلاق مربع الحوار .
تستطيع أيضاً إنشاء بريد إلكتروني ستقضي وقتاً طويلاً في إنشاء بريد إلكتروني لموقعك .
إليك كيفية إنشاء ارتباط بريد إلكتروني :
1- قم بإنشاء صفحة جديدة .
2- اكتب النص الذي تري إظهاره كارتباط ، تستطيع أيضاً إنشاء ارتباط بريد إلكتروني إلى ملف صورة إذا كان هذا الملف متاحاً لك , مثل الصورة التي توجد في صفحة http://www.saudint.com ( انظر الشكل 14-7) .
7-14
3- حدد النص الذي تريد تعيينه كارتباط بريد إلكتروني .
4- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink .
5- في مربع نص URL ، امسح http:// واكتب ما يلي :
mailto:
6- انقر زر ok لإغلاق مربع الحوار .
التعرف على الخرائط المصورة
التعرف على الخرائط المصورة
عندما تنشئ عدة ارتباطات في صورة واحدة ، فإنك تنشئ ما يسمى بالخريطة المصورة . وللخرائط المصورة فائدة عظيمة في صفحات الويب حيث أنها تمثل تصويراً رسومياً يمكن للمستعرضين استخدامه في التنقل داخل موقع الويب .
إنشاء الخرائط المصورة باستخدام فرونت بيج .
أول خطوة في عملية إنشاء الخريطة المصورة هي تحديد الصورة التي تنوي استخدامها ، إذاً عليك أن تختار ملفاً بإحدى هاتين الصيغتين GIF أو JPEG عليك حفظ تلك الصور بصيغة GIF أو JPG . ثم انتقل إلى خطوات تحويلها إلى خريطة مصورة وإليك هذه الخطوات .
1- قم بإدراج ملف الصورة في صفحة الويب التي ستضم الخريطة المصورة ( انظر الشكل 15-1 )
1-15
2- حدد الصورة التي قمت بإدراجها في الصفحة .
3- تأكد من ظهور شريط أدوات الصورة في في النافذة الرئيسية لفرونت بيج من شريط أدوات الصورة ، انقر رمز Polygonal Hotspot . يجب أن يظهر المؤشر على شكل قلم رصاص .
4- ستستخدم المؤشر في تتبع الحواف الخارجية لأحد الكائنات في الصورة كل كائن تقوم بتحديده سيكون واحدة من البقاع الساخنة التي تعينها داخل الخريطة المصورة . انقر في أحد اركان الكائن وستظهر نقطة إرساء ( مربعة ) .
حرك المؤشر إلى الركن الثاني في الخط الذي يوجد حول الكائن وسترى البقعة الساخنة وهي محيطة بالكائن ( 15-2 ) .
5- استمر في تتبع الكائن وإنشاء نقاط الإرساء إلى أن تصل إلى النقطة التي بدأت منها . انقر نقطة الإرساء الأولى مرة أخرى لتنهي عملية تتبع الكائن ، وسيظهر على الفور مربع حوار Create Hyperlink ( انظر الشكل 15-3 ) .
6- في مربع نص URL ، اكتب عنوان الصفحة التي تريد أن تنشئ الارتباط إليها . انقر زر OK لتحفظ الارتباط وتغلق مربع الحوار .
كرر الخطوات من 3 إلى 6 مع عدة كائنات أخرى تريد أن تحولها إلى نقاط ساخنة داخل الخريطة المصورة ( انظر الشكل 15-4 ) .
2-15
3-15
4-15
أنقر أداة البقعة التي تريد استخدامها مع تحديد المناطق التي تريد تحويلها إلى بقاع ساخنة داخل الصورة ( انظر الشكل 15-5 ) .
معاينة الخريطة المصورة
ينبغي أن تستخدم علامة تبويب PREVIEW التي توجد في النافذة الرئيسية لفرونت بيج ( في الجانب الأيسر السفلي ) لتختبر الخريطة المصورة التي أنشأتها .
5-15
لمعاينة الخريطة المصورة :
1- تأكد من أنك مازلت تعرض الصفحة التي قمت بإنشائها .
2- تأكد من تحديد علامة تبويب Normal الموجودة في الجزء السفلي من نافذة الصفحة .
3- لمعاينة الصفحة والخريطة المصورة اللتين انتهيت من إنشائهما ، انقر علامة تبويب PREVIEW وسترى الصفحة بنفس هيئتها عند استعراضها بواسطة أحد مستعرضات الويب .
4- ضع المؤشر فوق المناطق التي حولتها إلى مناطق ساخنة داخل الصورة . إذا كانت الارتباطات الموجودة لديك تعمل ، فلابد أن يتحول المؤشر إلى شكل يد صغيرة بمجرد أن يمر فوق أحد الارتباطات ( انظر الشكل 15-6 ) .
[/size]
صفحات فرونت بيج جاهزة طريقة عمل موقع بالفرونت بيج مشاريع جاهزة فرونت بيج مشاريع فرونت بيج جاهزة مشروع فرونت بيج جاهز
أساسيات فرونت بيج
يعد فرونت بيج من أهم البرامج استخداماً في إنشاء صفحات الويب .ولهذا السبب ستنفق وقتاً طويلاً في تعلمه والتعرف عليه . ويبين الشكل 3-1 واجهة المستخدم الأساسية التي ستراها عند العمل في فرونت بيج .
3-1
في الجانب الأيسر ستجد شريط العرض Views Bar . هذا الشريط يتيح لك سرعة تغيير طرق العرض الخاصة بصفحات الويب فضلاً عن تغيير الخصائص المتنوعة في البرنامج . ومن طرق العرض Navigation والذي يتعلق بإنشاء أشرطة التحرك ، وأيضاً عرض المهام Tasks .
نظراً لأنك ستقضي معظم وقتك في استخدام فرونت بيج كمحرر لصفحات الويب ، فمن المفضل أن تقوم بإزالة شريط العرض ، كما يلي :
1- افتح قائمة View .
2- قم بإلغاء تحديد خيار Views Bar لإزالة علامة الاختيار من أمامه ( أنظر الشكل 3-2 ) ، سيختفي بذلك شريط العرض .
2-3
بعد إخفائك شريط العرض يمكنك أيضاً الوصول إلى خيارات العرض الأخرى الخاصة بالموقع الذي أنشأته , وذلك من خلال قائمة View .
في فرونت بيج يمكنك الوصول إلى أكثر الخصائص استخداماً من خلال أشرطة الأدوات القياسية التسعة . يعرض شريط الأدوات القياسي Standard وشريط التنسيق Formatting .
يعرض عليك الشكل 3-3 النافذة الرئيسية وبداخلها شريط الأدوات القياسي وشريط التنسيق ، بينما يعرض الشكل 3-4 كافة اجزاء العرض وبعض اشرطة الأدوات التسعة .
3-3
3-4
كيفية إنشاء موقع ويب
عندما تقوم بإنشاء مجموعة صفحات للويب لوضعها في موقع على الويب . فإن فرونت بيج يتيح لك تجميع تلك الصفحات في وحدة واحدة ليطلق عليها في النهاية " ويب " Web . رغم أننا نستخدم فرونت بيج إنشاء وتعديل الصفحات الفردية دون القيام بإنشاء موقع ويب ، فإنك ستجد تحفيزاً قوياً على إنشاء موقع ويب يجمع الصفحات التي أنشأتها . وذلك للأسباب التالية :
يحتوي فرونت بيج على عدة خصائص لفحص سلامة الصفحات التي تقوم بإنشائها وسلامة الارتباطات في تلك الصفحات .
فرونت بيج مصمم ليتيح لك إرسال الصفحات التي تنشئها إلى أحد أجهزة خادم الويب وذلك كوحدة واحدة .
عند إنشاء أحد المواقع يمكنك استخدام أداة التحرك التلقائية في فرونت بيج لإنشاء أشرطة تحرك خاصة بموقعك .
الاحتفاظ بصفحات الويب التي تنشئها داخل موقع واحد يتيح لك استخدام المجلدات Folders لتنظيم الملفات .
أيضاً يتيح لك ذلك استخدام التقارير Reports لتسهيل فحص موقعك .
إذا قمت بإنشاء موقع ويب جديد ، ينشئ فرونت بيج مجلد جديد مستخدماً اسم الموقع ثم تستطيع تخزين ملفاتك أو إضافتها إلى موقعك داخل هذا المجلد أو مجلدات فرعية أخرى .
قم بإنشاء أول موقع ويب خاص بك .
1- من قائمة File ، حدد خيار New ثم Web لتفتح مربع حوار New ( انظر الشكل 3-5 ) .
2- من بين القوالب اختر الموقع الذي تريد إنشائه ومبدئياً حدد خيار One Page Web .
3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .
4- إنقر زر OK في حالة عدم وجود مجلد الويب ، سيطلب منك إنشاؤه في هذه الحالة انقر زر yes لإنشاء المجلد والموقع . ( انظر الشكل 3-6 )
3-5
3-6
كيفية إنشاء ملف HTML
بعد أن تعلمت كيفية إنشاء موقع الويب الخاص بك ستتعلم الآن كيفية إنشاء صفحات داخل موقعك حيث أن للموقع أن يحوي عدد من الصفحات .
لإضافة صفحة جديدة في موقعك ، قم بما يلي :
1- من قائمةFile حدد خيار New ثم Page حتى تفتح مربع حوار New ثم انقر علامة تبويب General ( انظر الشكل 3-7 ) .
3-7
2- سوف يعرض لك المربع New قوالب متنوعة لصفحات ويب . قم بتحديد خيار Normal Page ثم انقر زر OK . ستظهر لك صفحة فارغة .
عندما تقوم بإنشاء الصفحات ستأخذ هذه الصفحات الأسماء الافتراضية للملفات مثل new page1.htm و new page2.htm لذا احفظ الصفحات بأسماء أخرى أكثر وضوحاً حتى يمكنك التعرف عليها بسهولة .
تعلمت في هذا الدرس بعض الأساسيات في فرونت بيج عن كيفية إنشاء المواقع وإضافة الصفحات إلى هذا الموقع . في الدرس القادم ستتعلم كيفية استخدام قوالب وصفحات الويب .
ستخدام القوالب
بدء استخدام القوالب في فرونت بيج
ما القوالب ؟
القوالب templates عبارة عن هياكل جاهزة يمكنك استخدامها في إنشاء أنواع مختلفة من مواقع وصفحات الويب . وإلى جانب كونها هياكل جاهزة ، تأتي القوالب في شكل هياكل فارغة .
إن طبيعة القالب يمكنك تخيلها في أنك تريد بناء بيت صغير ، هل الأفضل لك أن تبدأ في بنائه من فراغ ، أو أن تشتري هيكلاً جاهزاً له ؟ بالتأكيد من الأسهل شراء هيكل جاهز بأعمدة وأساسات ثم تبدأ في بنائه , المقصود – أن الهيكل أو ( القالب ) يعمل بمثابة الأساس الذي ينبني عليه موقع أو صفحة الويب ، الأمر الذي يتيح لك إظهار العمل بالشكل الذي تريد .
أنواع القوالب المتاحة في فرونت بيج
القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .
قوالب المواقع
هناك تشكيلة مكونة من ثمانية قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك ( انظر الشكل 4-1 )
4-1
وتكون هذه القوالب على شكل هياكل فارغة يمكنك من إنشاء أنواع معينة من مواقع الويب ، كما يحتوي فرونت بيج على المعالجات Wizards ، هذه المعالجات عبارة عن قوالب تلقائية تستفيد منها في إنشاء مواقع ويب أكثر تعقيداً .
هذا وصف لقوالب ومعالجات مواقع الويب في فرونت بيج :
× Corporate Presence Wizard : هذا المعالج يرشدك إلى خطوات إنشاء موقع ويب خاص بأعمالك التجارية .
× Customer Support Web : يمكنك هذا المعالج من إنشاء موقع ويب خاص بدعم المستهلكين ، يصلح هذا القالب لشركات البرامج التي تقوم بإنشاء مواقع دعم المستهلكين .
× Discussion Web Wizard : يرشدك هذا المعالج إلى عملية إنشاء موقع مناقشة يشبه مجموعات الأخبار .
× Import Web Wizard : يمكنك هذا المعالج من إنشاء أرشيف على الويب يحتوي على ملفات من كمبيوترك الخاص بك . كما يمكنك من استيراد أحد مواقع الويب إلى موقع آخر داخل فرونت بيج .
× Project Web : يقوم هذا المعالج بإنشاء موقع ويب يتم تأسيسه وفق مشروع معين يحوي الجدول الخاص بهذا المشروع وحالته وعدده وملفات الأرشيف والمناقشات .
× Personal Web : يكنك من إنشاء موقع ويب شخصي يعكس أنشطتك واهتماماتك الخاصة .
× One Page Web : يحوي هذا القالب صفحة ويب واحدة .
× Empty Web : لا يحوي أي صفحة ويب بداخله .
استخدام قالب معالج الويب
لاستخدام قالب بسيط في إنشاء موقع ويب ، قم بما يلي :
1- من قائمة File ، حدد الخيار New ثم Web حتى تفتح مربع حوار New وبداخله علامة تبويبWeb Site محددة .
2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب Customer Support Web مثالاً
3- حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر زر ok .
4- في حالة عدم وجود هذا المجلد بالفعل ، سيسألك البرنامج إن كنت تريد إنشاءه . في هذه الحالة انقر زر yes وسيقوم فرونت بيج بعد ذلك بإنشاء القالب طالما انتهيت من إنشاء المجلد الخاص به .
5- بعد بضع ثوان ، سيتم إنشاء القالب .
يقوم فرونت بيج بإضافة صفحة آو أكثر إلى موقع الويب بعد تحديد أي قالب من القوالب ما عدا قالب Empty Web .
استخدام القوالب لإنشاء أنواع مختلفة من صفحات الويب
على غرار قوالب المواقع ، تمثل قوالب الصفحات أيضاً هياكل فارغة يمكنك استخدامها لإنشاء صفحات الويب داخل موقعك ، أيضاً يمكنك إنشاء أي عدد من صفحات الويب باستخدام القوالب الخاصة بها .
3-4
رغم أن عدد القوالب ثمانية فقط إلا أنه يحتوي على 36 قالباً للصفحات . ويبين الشكل 4-4 معظم قوالب الصفحات التي يمكنك اختيار ما يناسب احتياجك منها .
كما يعرض فرونت بيج نموذجاً بسيطاً لكل قالب صفحة قبل أن تقوم بإنشائها على عكس قوالب المواقع .
لإنشاء صفحة ويب باستخدام أحد القوالب قم بما يلي :
1- من قائمة File حدد خيار New ثم خيار Page لتفتح مربع حوار New حدد علامة تبويب General إذا لم تكن محددة .
4-4
2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب – Left ، Narrow aligned Body مثلاً ( انظر الشكل 4-5 ) .
5-4
سيقوم القالب الذي حددته بعرض نموذج مصغر له في مربع المعاينة .
3- انقر زر ok بعد ثوان معدودة ، سيتم إنشاء الصفحة الجديدة من القالب الذي حددته ( انظر الشكل 4-6 ) .
6-4
عند استخدام القوالب ستلاحظ أن فرونت بيج يقوم بإنشاء مواقع وصفحات الويب باستخدام بعض هذه القوالب
تعلمت في هذا الدرس كيفية إنشاء مواقع وصفحات الويب باستخدام القوالب في فرونت بيج .
التعامل مع النصوص
أساسيات النص
سوف تتعلم كيفية إضافة النص إلى صفحاتك وإذا كنت قد أمضيت وقتاً طويلاً داخل الويب فلعلك قد لاحظت أن معظم مواقع الويب يتم إعدادها بغرض توصيل أنواع مختلفة من المعلومات ، ومازال النص من أكثر الوسائل فعالية في أداء هذه المهمة .
أيضاً يتيح لك فرونت بيج تزيين النص وتنسيقه بالإضافة إلى وضع النص الأصلي في الصفحة ، يمكنك باستخدام فرونت بيج :
× تعديل حجم النص .
× ضبط وضع النص ، كأن يكون منخفضاً subscript أو مرتفعاً superscript عن السطر .
× إضافة سمات إلى النص ، كأن تجعله عريضاً أو مائلاً أو أسفله سطر ، أو حتى الجمع بين هذه السمات .
× توسيط النص على الشاشة .
× إضافة ألوان أو أي تأثيرات أخرى ، مثل تأثير النص الوامض .
× تغيير الخط الظاهر على الشاشة .
هذا كله يمثل عينة بسيطة من الطرق التي يمكنك بها تعديل النص ، وسوف ترى أثناء تعاملك مع فرونت بيج أن معظم ما يتم إضافته إلى صفحات ويب التي تنشأها يأتي على شكل نصوص وستلاحظ أن فرونت بيج يوفر لك مرونة هائلة في طريقة القيام بتلك العملية .
إضافة النص إلى صفحة الويب
يتعامل فرونت بيج مع إضافة النص بنفس سهولة برامج معالجة الكلمات ، كل ما عليك هو أن تكتب وسوف يتم لف النص تلقائياً إلى السطر التالي بمجرد أن تصل إلى نهاية السطر الذي تكتبه .
لتبدأ بكتابة أي فقرة تريدها :
1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة بفتح قائمة File ثم تحديد خيار New ثم Page ، في مربع حوار New ، حدد خيار Normal Page ، ثم انقر زر ok لتفتح صفحتك الجديدة .
2- عند الموضع الذي يظهر فيه مؤشر الكتابة ، اكتب ما يلي :
بسم الله الرحمن الرحيم
لاحول ولا قوة إلا بالله
3- اضغط مفتاح الإدخال Enter واستمر في كتابة اى نص . لا تضغط مفتاح الإدخال Enter عندما تصل إلى نهاية السطر ، فقط واصل الكتابة وسيتم لف النص تلقائياً إلى السطر التالي ،
4- اضغط مفتاح الإدخال Enter بعد أن تنتهي من كتابة هذه الفقرة ينبغي أن يبدوا النص لديك بنفس الشكل التالي في ( الشكل 5-1 ) .
5-1
ثم أنه لابد أن تحدد النص الذي تريد تغييره أو إضافة أي سمة إليه ، مثلاً لتغيير حجم النص الذي كتبته ، قم بما يلي :
1- حدد نص بسم الله الرحمن الرحيم .
2- من قائمة Format ، حدد أمر Font . في مجموعة Size ، استخدم شريط التمرير حتى تصل إلى خيار 7 ثم حدده ، انقر بعد ذلك زر ok ، لا بد أن يظهر النص لديك بنفس الحجم الموجود في الشكل .
بشكل عام ، يمنحك فرونت بيج قدراً معقولاً من حرية الاختيار في تحديد حجم النص الذي تكتبه ، ويبين الشكل 5-3 المدى المتاح لك في تغيير حجم النص حيث يبدأ من 8 إلى 36 نقطة .
5-3
قائمة مختصرة : لست مضطراً لاستخدام قائمة Format حتى تفتح مربع حوار Font يمكنك أيضاً أن تنقر بزر الفأرة الأيمن بعد تحديد النص لتفتح قائمة مختصرة ، من هذه القائمة حدد أمر Font Properties لتفتح مربع حوار Font .
إضافة الألوان والسمات
والآن ، قم بإضافة بعض السمات إلى النص ، ابدأ بتغيير لون العنوان :
ولتغيير لون النص :
1- حدد عنوان النص .
2- من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الشكل 5-4 ) .
5-4
3- افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .
4- حدد خيار Red ثم انقر زر ok لتغلق مربع حوار Font لتفتح مربع حوار Font يجب الآن أن يظهر عنوان الفقرة باللون الأحمر .
أيضاً يمكنك جعل النص عريضاً أو مائلاً أو أسفله خط .
لجعل النص عريضاً :
1- حدد الكلمات لاحول ولا قوة إلا بالله.
2- انقر رمز Bold ( يحمل هذا الرمز حرف B ) الموجود على شريط الأدوات .
لجعل النص مائلاً :
1- حدد الكلمات اي من الكلمات .
2- انقر رمز Italics ( يحمل هذا الرمز حرف I المائل ) الموجود على شريط الأدوات .
ولإضافة سطر أسفل النص :
1- حدد كلمة الله جل جلاله .
2- انقر رمز Underline ( يحمل هذا الرمز حرف U ) الموجود على شريط الأدوات .
3- الآن ينبغي أن تشبه الفقرة لديك ما هو مبين في الشكل (5-5 ) .
أنماط الخط والتأثيرات
5-5
1- حدد كلمة اي كلمة من النص.
2- من قائمة Format ، حدد أمر Font لتفتح مربع حوار Font .
3- في جزء Effects ، يمكنك أن ترى التأثيرات المتنوعة التي يتيحها لك ، كما يتيح لك مربع المعاينة Preview رؤية الشكل الذي يظهر عليه النص بعد تطبيق أي تأثير من تلك التأثيرات .
لا حظ السطرين الظاهرين في مربع المعاينة يتيحان لك رؤية النص بالنسبة للتأثيرات التي تغير من الوضع الرأسي ، مثل تأثير انخفاض subscript وارتفاع superscript النص عن السطر
4- مثلاً حدد خياري Caps Small و Superscript . انقر زر ok لتغلق مربع الحوار وترى التغييرات التي أجريتها على النص .
يعد تغيير المسافة بين الأحرف Character Spacing من التأثيرات التي تستطيع استخدامها لإبراز النص .
هذه بعض الخيارات التي يمكنك تطبيقها فيما يتعلق بتأثير المسافة بين الأحرف :
1- حدد الكلمات اي من الكلمات بالحروف الانجليزية او اكتب مثلاsaudint.com.
2- افتح مربع حوار Font .
3- انقر علامة التبويب Character Spacing لتفتح اللوحة الخاصة بتأثير المسافة بين الأحرف .
4- من مربع القائمة المنسدلة Spacing ، حدد خيار Expanded وفي مربع القائمة الذي يجاوره By ، حدد خيار 10
7-5
5- من مربع القائمة المنسدلة Position ، حدد خيار Raised . وفي مربع القائمة الذي يجاوره By ، اكتب 5 .
6- انقر زر ok لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين الأحرف ( انظر الشكل 5-8 ) .
وكما ترى فإن تأثير المسافة بين الأحرف يعطيك قدراً من الحرية في التعديل في وضع النص .
5-8
(انشاء واستخدام الجداول)
--------------------------------------------------------------------------------
الرئيسية
مكتبة البرامج
جديد البرامج
الكتب الالكترونية
دليل المواقع
مواقع جديدة
دروس مفيدة
مقالات واخبار
صفحة الافضل
لمراسلة الموقع
اخبر صديقك
اضف للمفضلة
البحث الشامل
صفحة البداية
للإعلان في الموقع
استضافة محمية
· منتدى المشاغب للبرامج
· القسم العام لمنتدى البرامج
· التصميم والجرافيكس
· قسم الهاردوير والصيانة
· منتدى الشبكات وأنظمة التشغيل
· تطوير المواقع والمنتديات
· قسم الالعــاب
· قسم البرامج المشروحة
· قسم البرامج المعربة
· قسم الاقتراحات والشكاوي
· برامج ادارة الفنادق و القرى السياحية
· شرح البرنامج Intruder Alert '99
· ( الانترنت اكسبلورر 7 نسخه نهائيه ) شرح بالصور ( تركيب + اعدادات خاصه للغة العربيه )
· أسرار البحث في جوجل
· الشرح الوافي بالصور لبريد الجوجل
· شرح لوحة التحكم للمجلة الخاصة للمجلة حتي الأصدارة 7.4
· درس طريقة تعريب المجلة
· تركيب مجلة النيوك علي الموقع
· شبكات اللان LAN الدرس السابع
· شبكات اللان LAN الدرس السادس
· شبكات اللان LAN الدرس الخامس
· شبكات اللان LAN الدرس الرابع
· شبكات اللان LAN الدرس الثالث
· شبكات اللان LAN الدرس الثانى
· شبكات اللان LAN الدرس الاول
· كل ماتريد معرفته عن اجهزة الشبكات
· الشبكة الافتراضية الخاصة Virtual Private Network - VPN
· درس في استخدام الصفحات الديناميكية
· شرح طريقة إستقبال بريد الياهو عن طريق الأوتلوك اكسبرس
· كيف تحصل على معلومات نظام التشغيل بالتفصيل
· موضوع شامل ( كيفية إضافة صورة في المنتدى وفي التوقيع )
· الكتابة بقطرات الندى
· شرح تصميم توقيع للمبتدئين
· درس عمل لمعه بالفوتوشوب
· درس تأثير على الصور - للمحترفين
· درس جعل التوقيع يرفرف كالعلم
· درس عمل علم بالفوتوشوب
· درس الكتابة بخلفية مشعة بالفوتوشوب
· درس التلاعب بالخطوط سهل :: فوتوشوب ::
· التكامل التــام بين الفوتوشوب والفلاش | إستيراد ، تصدير |
كراهية تمني الموت لضر نزل بالإنسان
لايدعون أحدكم بالموت لضر نزل به ولكن ليقل : اللهم أحيني ماكنت الحياة خيراً لي ، وتوفني إذا كانت الوفاة خيراً لي
أصغر طابعة
دودة Sober
أداة إزالة القيود
أداة إزالة الفايروس
بطاقات ذاكرة متطورة
المحادثات الفورية
صفحات شخصية
محرك بحث
أصغر جهاز
تخفيض
[ المزيد في أخبار الأقسام الخاصة ]
انشاء واستخدام الجداول
(2205 مجموع الكلمات في هذا النص)
(13080 قراءة)
التعرف على الجداول
إذا أجدت استخدام الجداول في صفحات الويب يتيح لك قدراً هائلاً من التحكم في وضع الصور والنصوص داخل الصفحات . والجداول عبارة عن هياكل شبكية مستطيلة ، تستطيع إنشاءها لتحوي بداخلها صوراً أو نصوصاً . يعرض ( الشكل 6-1 ) بعض الأمثلة على الجداول .
1-6
تسمى مجموعة الخلايا الأفقية بـ " صف " ، في حين تسمى مجموعة الخلايا الرأسية بـ " عمود " .
إنشاء الجداول
لإنشاء جدول :
1- قم بإنشاء صفحة جديدة فارغة .
2- من قائمة Table ، حدد أمر Insert ثم Table لتفتح مربع حوار Insert Table ( انظر الشكل 6-2 ) .
2-6
الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين ،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout وكذلك خيار Specify width . انقر زر ok سيتم إنشاء الجدول ويظهر في الصفحة ( انظر الشكل 6-3 )
3-6
التعرف على أحجام الجداول
يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض الجدول وفق النسبة المئوية لحجم الشاشة أو عدد البكسلات .
بكسلات Pixels عناصر الصورة أو البكسلات هي أصغر وحدات تستخدم معاً لعرض المعلومات على الشاشة ، ومن المرجح أنك سمعت المصطلح المستخدم لوصف درجة وضوح العرض على الشاشة . على سبيل المثال ، من درجات الوضوح الشائعة درجتا 640X 480 و 800X 600. هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً ) المعروضة على الشاشة التي تستخدمها .
عندما تحدد عرض الجدول وفق نسبة مئوية معينة ، فإن العرض سيكون نسبياً ، أي وفق نسبة عرض الشاشة .
أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً للجدول .
لتغيير عرض الجدول :
1- ضع مؤشر الكتابة داخل الجدول .
2- من قائمة Table ، حدد خيار Select ثم Table .
3- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 6-4 ) .
4-6
4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .
5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .
ارتفاع الجدول :
تستطيع أيضاً أن تعدل ارتفاع الجدول من خلال مربع حوار Table Properties رغم أن معظم مصممي صفحات الويب لا يهتمون بارتفاع الجدول قدر اهتمامهم بعرضه . ويتم عادة ضبط ارتفاع الجدول تلقائياً بحسب المحتوى الموجود داخل الجدول أو الخلايا الفردية ، وإذا قررت تغيير ارتفاع الجدول ، يمكنك فقط أن تجري تعديلات مطلقة وفق عدد معين من البكسلات . حدد خيار Specify height ثم اكتب عدد البكسلات الذي تريد أن تحدده لارتفاع الجدول .
التعامل مع تخطيط الجداول
حدد قيم تخطيط الجدول بأرقام أعلى من القيم العادية . فالمبالغة في تعيين قيم الخصائص تساعد على فهم طبيعة تلك الخصائص .
لتغيير حجم الحد في الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Borders ، غير الحجم Size إلى 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في الجدول ( انظر الشكل 6-5 ) .
حدود غير مرئية :
توجد أيضاً طريقة تنفذها في تغيير حجم حد الجدول ، اضبط الحجم على صفر ، وسيصبح حد الجدول غير مرئي عند عرضه في مستعرض الويب . تظهر فائدة هذه الخاصية عندما تستعين بالجدول في ضبط مكان الصور والنصوص داخل صفحات الويب بدقة .
5-6
أيضاً يكنك الاستعانة بحشو الخلايا cell padding .
لتغيير حشو الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell padding على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا ( انظر الشكل 6-6 ) .
6-6
يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .
لتغيير المسافة بين الخلايا :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Layout ، اضبط خانة Cell spacing على 20 .
4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على المسافة بين الخلايا ( انظر الشكل 6-7 ) .
6-7
التعامل مع ألوان الجداول
يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من خلال الحدود الفاتحة light borders والحدود الداكنة dark borders.
لتحديد لون حدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة الألوان .
4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .
5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .
يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول
لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :
1- حدد الجدول الذي أنشأته من قبل .
2- من قائمة Table ، حدد خيار Properties ثم Table لتفتح مربع حوار Table Properties .
3- في جزء Border ، انقر سهم القائمة المنسدلة light Border لتفتح لوحة الألوان الخاصة بها .
4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .
5- ومن نفس الجزء انقر سهم القائمة المنسدلة Dark Border لتفتح لوحة الألوان الخاصة بها .
6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .
7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون الحدود الفاتحة والداكنة للجدول ( انظر الشكل 6-8 ) .
8-6
معالجة الخلايا في الجدول
يمكنك إضافة أو إزالة الخلايا من الجدول في أي وقت تشاء ، بل وبوسعك أن تقسم الخلية إلى خليتين أو أكثر ، أيضاً يمكنك دمج خليتين أو أكثر في خلية واحدة .
إضافة الخلايا
لإضافة صف جديد إلى الجدول :
1- قم بإنشاء جدول بسيط يحوي صفين وعمودين مستخدماً في ذلك القيم الافتراضية .
2- حدد إحدى خلايا الجدول بالنقر داخلها .
3- من قائمة Table ، حدد خيار Insert ثم Rows or Columns لتفتح مربع حوار Rows or Columns Insert ( انظر الشكل 7-1 ) .
1-7
4- حدد زر الخيار Rows لإدراج صف أو أكثر في الجدول .
5- حدد عدد الصفوف التي تريد إضافتها إلى الجدول . يمكنك إضافة من 1 إلى 1000 صف .
6- أسفل جزء Location ، حدد إذا ما كنت تريد إضافة الصفوف إلى أعلى أو أسفل الخلية التي يوجد بها مؤشر الكتابة حالياً .
7- انقر زر ok لإنهاء عملية الإضافة وإغلاق مربع الحوار ، سيظهر الجدول كما في ( الشكل 7-2 ) .
إضافة جدول داخل جدول : علاوة على إمكانية إضافة خلايا أو أعمدة أو صفوف إلى الجدول ، يتيح لك فرونت بيج إضافة جدول جديد إلى الجدول الحالي ، قم ببساطة بتحديد الخلية التي تريد أن تضيف إليها الجدول الجديد ثم اتبع الخطوات السابق ذكرها .
2-7
تقسيم الخلايا
قد ترغب أحياناً بتقسيم الخلية إلى عدة خلايا ويبين ( الشكل 7-3 ) مثالاً على ذلك .
لتقسيم الخلية الواحدة إلى خليتين أو أكثر :
1- حدد الخلية التي تريد تقسيمها بالنقر داخلها .
2- من قائمة Table ، اختر أمر Split Cells لتفتح مربع حوار Split Cells ( انظر الشكل 7-4 ) .
3- حدد نوع التقسيم الذي تريده ، إلى أعمدة Columns أو صفوف Rows .
4- حدد عدد الأعمدة أو الصفوف الذي تريد أن تنقسم إليه الخلية المحددة ، في الوضع الافتراضي ، يتم تحديد 2 ، وأقصى عدد يمكنك تحديده هو 100 .
3-7
4-7
5- انقر زر ok لإغلاق مربع الحوار وبدء التقسيم ( انظر الشكل 7-5 ) .
دمج الخلايا
لدمج خليتين أو أكثر :
1- حدد الخلية الأولى التي تريد أن تدمج فيها بقية الخلايا ثم ضع مؤشر الكتابة بداخلها .
2- احتفظ بمفتاح Shift مضغوطاً ثم حدد الخلية المجاورة التي تريد أن تدمجها بالخلية السابقة المحددة ستظهر الخليتان بلون مميز ( انظر الشكل 7-6 )
3- من قائمة Table اختر أمر Merge Cells وسيتم دمج الخلايا التي حددتها في خلية واحدة ( انظر الشكل 7-7 ) .
6-7
7-7
حذف الخلايا
لحذف خلية أو أكثر من الجدول :
1- قرر أولاً إذا ما كنت تريد حذف خلية أم عمود أم صف من الجدول .
2- حدد الخلية أو العمود أو الصف الذي تريد حذفه من الجدول .
3- من قائمة Table ، حدد خيار Select ثم Cell ( أو Column أو Rows ، وذلك بحسب ما تريد حذفه ) .
4- بتحديد الجزء الذي تريد حذفه من الجدول ، افتح مرة أخرى قائمة Table ثم اختر أمر Delete Cells . سيتم حذف ما قمت بتحديده من الجدول .
توزيع الصفوف والأعمدة بالتساوي
إذا كان لديك جدول يشبه المعروض في ( شكل 7-8 ) فلك أن تعيد توزيع الخلايا الموجودة في الصف الثاني حتى تبدو جميعها في أحجام متساوية .
لإعادة توزيع أحد الصفوف غير المتساوية :
1- حدد الجدول الذي يحوي الصفوف أو الأعمدة التي تريد إعادة توزيعها بالتساوي .
2- من قائمة Table ، حدد أمر Distribute Rows Evenly ، ستتم إعادة توزيع الأعمدة أو الصفوف لتبدو بشكل متساوي .
في حالة قيامك بإعادة توزيع الصفوف والأعمدة في جدولك لكن دون حدوث تلك العملية بالصورة الدقيقة التي تريدها ، فإنه يمكنك استخدام أمر التراجع undo من قائمة Edit للرجوع للحالة السابقة .
8-7
اساسيات الصور والرسومات
أساسيات الصور والرسومات
يشير مصطلح الرسومات graphics عادة إلى أي عنصر مرئي غير نصي يظهر على صفحة الويب . في حين يشير مصطلح الصور في الغالب إلى الملفات الرسومية الساكنة التي توجد في صيغتين هما GIF و JPEG .
من أهم القواعد التي يجب أن تنتبه لها عند استخدام الصور في الويب وهي :
1- استخدم صوراً صغيرة الحجم : الصور كبيرة الحجم تأخذ وقتاً عند تحميلها أما الصور صغيرة الحجم فتكون سريعة وتؤدي إلى استعراض صفحاتك بشكل سريع .
2- اجعل كل صفحة ويب لديك تحتفظ بأقل عدد من الصور : وجود عدد كبير من الصور في صفحة الويب أمر سيء ، لأنه يؤدي إلى بطء التحميل كثيراً .
3- لا تضف الصور إلى صفحة الويب لمجرد أنك تملك صوراً كثيرة : تأكد من أن الصور التي تضيفها إلى صفحاتك سوف تضيف شيئاً ما إلى محتواها .
" ثمة طريقة تسهل عليك إنشاء صفحات الويب الخاصة بك ، تقوم هذه الطريقة على إنشاء مجلد للصور – اسمه -/ IMAGES داخل مجلد Web الخاص بك حيث تخزن فيه كل ملفات الصور لديك فعند إنشاء موقع ويب يتم في الوضع الافتراضي إنشاء مجلد -/ IMAGES ليستخدم في تخزين ملفات الصور الخاصة بك .
إضافة الصور باستخدام فرونت بيج
لإضافة صورة إلى صفحة الويب :
1- في فرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .
2- من قائمة Insert ، حدد خيار File ثم Picture لتفتح مربع حوار Picture ( انظر الشكل 9-1 )
1-9
3- حدد ملف الصورة التي تريد إدراجها في صفحتك .
4- انقر زر ok وستظهر الصورة في صفحة الويب ( انظر الشكل 9-2 ) .
5- من قائمة File ، حدد أمر save لتفتح مربع حوار save as ( انظر الشكل 9-3 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد /IMAGES .
6- إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر Changes ثم حدد مجلد IMAGES ثم انقر زر ok .
7- انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .
2-9
3-9
تعديل ملفات الصور لديك
من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :
× التحكم في أبعاد الصورة داخل الصفحة
× التحكم في طريقة محاذاة النص بالنسبة للصورة
× تحديد إذا ما كان سيتم عرض الصورة داخل الحدود
× إضافة ارتباط تشعبي إلى الصورة
ولتعديل طريقة عرض الصورة داخل صفحة الويب :
1- حدد الصورة التي تريد تعديلها .
2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture Properties ( انظر الشكل 9-4 )
3- لإضافة ارتباط تشعبي إلى الصورة ، اكتب عنوان URL الخاص بالارتباط التشعبي الذي تريد ربطه مع الصورة ، وذلك باستخدام جزء Default Hyperlinks . في مربع الحوار قد يكون عنوان URL أحد المواقع الأخرى على الويب أو ملفاً أخر على الموقع الخاص بك ، ويمكنك استخدام Browse لتحدد عنوان URL إذا لم تستطع أن تتذكره .
4- لتعديل ابعاد الصورة appearance حدد علامة تبويب لتفتح النافذة الخاص بك (انظر الشكل 9-5) .
4-9
5-9
5- قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .
6- انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties .
المثال التالي يساعدك على فهم دور المحاذاة وفائدتها عندما يتفاعل النص مع الصورة داخل صفحة ويب :
1- قم بإنشاء صفحة جديدة .
2- اكتب الجملة التالية في الصفحة :
الدرة دمه في رقاب المسلمين او اكتب ما تشاء مع الصورة التي ستختارها نحن اخترنا صورة الدرة والعبارة السابقة
3- ضع مؤشر الفأرة قبل كلمة المسلمين ثم أدخل الصورة . إذا كان حجم الصورة يزيد عن 150 بكسل عرضاً ، فقم بتعديل هذا الحجم بحيث لا يزيد عن 150 بكسل . ينبغي أن تبدو الصورة لديك كما هو مبين في الشكل 9-6 .
4- حدد الصورة التي قمت بإدراجها ثم افتح مربع حوار Picture Properties . حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها .
5- لكي ترى كيف ان تغيير المحاذاة يؤدي الى التاثير على تدفق النص المجاور default ستاخذ الصورة المحاذاة الافتراضية للصورة قم بتغيير المحاذاة ثم لاحظ التغيير الذي يطرا على الصورة والنص
6-
أنواع القوائم التي يمكنك إنشاؤها
يتيح لك فرونت بيج خياراً لإنشاء القوائم النقطية bulleted lists ( انظر الشكل 8-1 ) أو القوائم الرقمية ( انظر الشكل 8-2 ) .
1-8
2-8
الغرض من القوائم هو تجميع العناصر المتشابهة معاً في مكان واحد أو إيضاح نوع معين من التدرج
إنشاء القوائم
فرونت بيج يتيح لك خياراً بثلاثة أنواع مختلفة من القوائم :
× القائمة الرقمية
× القائمة النقطية
× قائمة نقطية باستخدام الصور
إنشاء قائمة رقمية
إليك طريقة إنشاء قائمة رقمية في فرونت بيج :
1- 1- قم بإنشاء قائمة تعرض الخطوات اللازمة لتنفيذ مهمة معينة ، اكتب – مثلاً – طريقة الوضوء بالترتيب خطوة خطوة، كما في ( شكل 8-3 ) .
3-8
2- حدد النص الذي ستشكل من القائمة .
3- من قائمة Format ، اختر أمرNumbering Bullets and لتفتح مربع حوار Numbering Bullets and ( انظر الشكل 8-4)
4-8
4- حدد علامة تبويب Numbers لتفتح اللوحة الخاصة بها ( انظر الشكل 8-5 )
5-8
5- حدد نوع الترقيم الذي تريد استخدامه في تنسيق القائمة .
6- إذا أردت أن تبدأ القائمة الرقمية بأي رقم خلاف 1 ( أو خلاف حرف A ) فحدد من خانة start at القيمة التي تريد أن تبدأ منها القائمة .
7- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة الرقمية ( انظر الشكل 8-6 ) .
6-8
إنشاء قائمة نقطية
يطلق على القوائم النقطية أحياناً " غير المرتبة " أو " غير المرقمة " وهناك نوعين تنشأها من القوائم النقطية ، قوائم نقطية عادية وقوائم نقطية باستخدام الصور .
يتيح لك فرونت بيج أيضاً إنشاء قوائم باستخدام ملفات الصور . كما يحتوي على ملفات صور صغيرة .
لإنشاء قائمة نقطية عادية :
1- قم بإنشاء قائمة من عدة عناصر .
2- حدد النص الذي تتشكل منه القائمة .
3- من قائمة Format ، اختر أمر Numbering Bullets and لتفتح مربع حوار Numbering Bullets and .
4- حدد علامة تبويب plain bullets لفتح اللوحة الخاصة بها .
5- حدد نوع النقاط الذي تريد استخدامه لتنسيق القائمة .
6- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة .
أما لإنشاء قائمة نقطية باستخدام الصور :
1- قم بإنشاء قائمة من عدة عناصر .
2- حدد النص الذي تتشكل منه القائمة .
3- من قائمة Format ، اختر أمر Numbering Bullets and لتفتح مربع حوار Numbering Bullets and .
4- حدد علامة Picture Bullets لتفتح اللوحة الخاصة بها .
5- حدد الصورة التي تريد استخدامها كنقاط في القائمة . إذا كنت تستخدم فكرة عامة سائدة theme في القائمة ، فلك أن تحدد صورة مرتبطة بهذه الفكرة . في هذه الحالة ، حدد خيار Use picture from Current Theme . أما إذا لم تكن تستخدم فكرة عامة في القائمة ، فحدد الصورة التي تريد ثم حدد زر Specify Picture ، ثم اكتب اسم ملف الصورة التي تريد استخدامها . وإذا لم تكن متأكداً من اسم الملف أو موقعه ، فانقر زر Browse لتحدد موقع ملف الصورة المراد استخدامها من مربع الحوار الذي سيظهر لك .
6- انقر زر ok لإغلاق مربع الحوار وإنشاء القائمة النقطية باستخدام الصور ( انظر الشكل 8-8 ) .
8-8
كيفية وضع الصور
وضع الصور باستخدام فرونت بيج
ضع في اعتبارك أن إنشاء صفحات الويب يعد فناً أكثر منه علماً .
التحكم في الصور باستخدام الجداول
لكي يتضح لك كيف تساعدك الجداول على سهولة التحكم في وضع الصور والنص داخل صفحة الويب :
1- قم بإنشاء صفحة جديدة .
2- قم بإنشاء جدول داخل صفحة بحيث يتكون من خليتين.
3- أدرج صورتك في الخلية اليسرى .
4- بتغيير عرض الجدول ليصبح بمقدار 400 بكسل ، تستطيع أن تحصل على نتيجة تشبه المبينة في الشكل 10-1 .
1-10
التحكم في وضع الصورة باستخدام القوالب
تم تصميم العديد من القوالب بحيث توفر تشكيلة متنوعة من أنماط الجمع بين الصور والنصوص داخل صفحات الويب ( انظر الشكل 10-2 ) .
2-10
إنشاء نماذج مصغرة للصور
النماذج المصغرة عبارة عن نسخ صغيرة لصور كبيرة الحجم ، إلى جانب كونها ارتباطات للصور الكبيرة ، وكمثال على النماذج المصغرة للصور وكيفية استخدامك لها تشغيل المستعرض الخاص بك ، انتقل إلى العنوان او تنسيقها ( انظر الشكل 10-3 ) .
تستخدم النماذج المصغرة للصور عندما يكون عندك عدة صور كبيرة وتريد أن تعرضها في صفحة الويب ، وتريد أن يكون استعراضها سريعاً أو تتفادى استهلاك مساحة كبيرة على الشاشة .
3-10
عند تصميم صفحات الويب ضع في اعتبارك أن معظم المستخدمين مازالوا يستعرضون الويب باستخدام مودم سرعته 28.8 كيلوبت في الثانية . لذلك عليك أن تراعي في تصميم الصفحات سرعة تحميلها عند استعراضها .
لإنشاء نموذج مصغر لإحدى الصور :
1- قم بإنشاء صفحة جديدة .
2- أدرج أي صورة في الصفحة .
3- تأكد من ظهور شريط أدوات الصورة داخل النافذة الرئيسية لفرونت بيج ، إن لم يكن هذا الشريط ظاهراً ، فحدد خيار Toolbars من قائمة View وتأكد من تحديد أمر Picture .
4- حدد الصورة التي أدرجتها في الصفحة ، ثم انقر رمز Auto Thumbnail الموجود على شريط أدوات الصورة سيتم على الفور استبدال نموذج مصغر بالصورة الأصلية ( انظر الشكل 10-4 ) .
4-10
تستطيع أيضاً تعديل طريقة ظهور النماذج المصغرة للصور داخل الصفحة . للقيام بهذا الإجراء :
1- من قائمة Tools ، حدد أمر Page Options لتفتح مربع حوار Page Options.
2- حدد علامة تبويب Auto Thumbnail لتفتح اللوحة الخاصة بها ( انظر الشكل 10-5 ) .
5-10
3- هنا تستطيع التحكم في حجم النماذج المصغرة للصورة إلى جانب التحكم في حجم ونوع الحدود التي تظهر حول هذه النماذج داخل صفحات الويب .
إنشاء الخلفيات
توجد طريقتان لاستخدام ملفات الصور كخلفيات . الأولى هي استخدام الصورة لإنشاء خلفية عادية ، والثانية هي إنشاء ما يسمى بـ " العلامة المائية " watermark .
إنشاء خلفية عادية
لإنشاء خلفية :
1- اختر أمر Properties من قائمة File لتفتح مربع حوار Properties Page .
2- انقر علامة تبويب Background ( انظر الشكل 10-6 ) .
6-10
3- حدد مربع العلامة Picture Background ، ثم أدخل إسم ملف الصورة التي تريد استخدامها كخلفية . إن لم تتذكر جيداً اسم ملف الصورة ، فاستخدم زر Browse للبحث عنه وتحديد موقعه .
4- انقر زر ok ، وستظهر الصورة التي حددتها كخلفية للصفحة التي تتعامل معها حالياً ( انظر الشكل 10-7 ) .
لا ينبغي أن تستخدم صورة خلفية تتفوق على النص والصور التي تعرضها في صفحة الويب .
7-10
إنشاء العلامة المائية
لتعيين صورة الخلفية كعلامة مائية :
1- من قائمة File ، حدد أمر Properties لتفتح مربع حوار Properties Page .
2- انقر علامة تبويب Background لتفتح اللوحة الخاصة بها .
3- حدد مربع العلامة watermark .
4- انقر زر ok ، لتصبح بذلك الصورة التي حددتها للخلفية علامة مائية لصفحة الويب التي تصممها .
انشاء الارتباطات
كيف تعمل الارتباطات ؟
عند عرض أي صفحة ويب بواسطة مستعرض الويب الخاص بك ، يقوم المستعرض بتفسير الارتباطات على أنها توصيلات إلى ملفات أو موارد أخرى على الإنترنت . إذا كنت من مستخدمي نيتسكيب أو إنترنت إكسبلورر ، فسيتحول المؤشر بعد وضعه على الارتباط إلى يد بها إصبع مرفوع هذا المؤشر يدل على وجود ارتباط إلى مورد آخر على الإنترنت .
يتيح لك فرونت بيج إنشاء الارتباطات التي تريدها في صفحات الويب الخاصة بك .
لإنشاء ارتباط داخل صفحة الويب الخاصة بك :
1- قم بإنشاء صفحة جديدة .
2- اكتب النص التالي :
ساودينت مكتبة الكمبيوتر العربية
اضغظ هنا لزيارة الموقع
حدد الكلمات/ اضغظ هنا لزيارة الموقع.
3- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink ( انظر الشكل 14-2 ) .
2-14
4- في خانة URL ، وبعد http:/ ، اكتب النص التالي :
www.saudint.com
5- انقر زر ok لإغلاق مربع الحوار وحفظ الارتباط .
6- 1- حدد كلمة ساودينت وكرر الخطوتين 4 و 5 ، ولكن مع كتابة www.saudint.com في الخطوة الاخيرة. ينبغي أن تظهر الصفحة لديك كما هو مبين في ( الشكل 14-3 ) .
الارتباطات الداخلية والخارجية
عند إنشاء أحد الارتباطات إلى صفحة ويب أخرى ، يمكنك استخدام فرونت بيج لإنشاء ارتباط داخلي أو خارجي . والارتباط الداخلي هو ارتباط إلى صفحة أخرى داخل موقع الويب الخاص بك . أما الخارجي فهو ارتباط إلى صفحة أخرى داخل موقع ويب آخر .
3-14
إذا استطاع مستعرض الويب الخاص بك عرض ارتباط ما ، فلك أن تنشئ ارتباطاً إلى هذه الصفحة .
إشارة نسبية ومطلقة
تستطيع إنشاء نوعين من الارتباطات الداخلية :
× ارتباطات داخلية تستخدم إشارة مطلقة absolute .
× ارتباطات داخلية تستخدم إشارة نسبية relative .
وإليك سيناريو يوضح لك الاختلافات بين هذين النوعين من الإشارات . لنفترض أنك أنشأت موقع الويب الخاص بك وسميته mysite.com .
ولنفترض أيضاً أنك أنشأت ملفاً باسم personal .htm وحفظته داخل مجلد /saudi . لإنشاء ارتباط إلى هذا الملف من ملف index.htm ، تستطيع إنشاء الارتباط بإحدى الطريقتين :
ارتباط مطلق : http://www.mysite.com/saudi/personal.htm
ارتباط نسبي : pers/personal.htm/
سيعمل الارتباط النسبي لأن كلا الملفين محفوظان على نفس الكمبيوتر .
تضمين الارتباطات في ملفات الصور
عندما تريد تضمين ارتباط في ملف صورة ، اتبع نفس القواعد التي ألممت بها عند تضمين ارتباط في نص .
إنشاء الإشارات المرجعية
تستخدم الإشارات المرجعية عادةً في الصفحات التي تقسمها إلى مقاطع في هذه الحالة ، تحتاج إلى إنشاء ارتباط إلى بداية كل مقطع من هذه المقاطع .
لإنشاء إشارة مرجعية :
1- ضع المؤشر على بداية كل مقطع تريد أن تضع عنده الإشارة المرجعية .
2- من قائمة Insert ، حدد أمر Bookmark لتفتح مربع حوار Bookmark ( انظر الشكل 14-5 ) .
3- في مربع نص Bookmark Name ، اكتب إسماً فريداً للإشارة المرجعية التي تنشئها . عند إنشاء إشارات مرجعية أخرى ، فستظهر داخل مربع Bookmark on the page other .
4- انقر زر ok لإنشاء الإشارة المرجعية وإغلاق مربع الحوار . سترى رمز الإشارة المرجعية ظاهراً في المكان الخاص بها داخل الصفحة ( انظر الشكل 14-6 ) .
تم إنشاء الإشارة المرجعية لديك . والآن ، عندما تريد إنشاء ارتباط إلى هذه الصفحة وإلى الإشارة المرجعية الموجودة فيها ، فستخدم الصيغة التالية :
#
5-14
6-14
أنواع مختلفة من الارتباطات
يمكنك إنشاء ارتباطات إلى الملفات الموجودة على خادم FTP بنفس الطريقة المتبعة في إنشاء الارتباطات داخل صفحات الويب .
لإنشاء ارتباطا على FTP :
3- قم بإنشاء صفحة جديدة .
4- اكتب النص الذي تريد إظهاره كارتباط .
5- حدد النص الذي تريد جعله ارتباطاً إلى الملف الموجود على خادم FTP .
4- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink .
5- داخل مربع نص URL ، احذف الحروف http:// واكتب ftp:// بعد هذه الحروف ، اكتب عنوان URL الخاص بالملف الذي تريد إنشاء الارتباط له
6- انقر زر OK لإغلاق مربع الحوار .
تستطيع أيضاً إنشاء بريد إلكتروني ستقضي وقتاً طويلاً في إنشاء بريد إلكتروني لموقعك .
إليك كيفية إنشاء ارتباط بريد إلكتروني :
1- قم بإنشاء صفحة جديدة .
2- اكتب النص الذي تري إظهاره كارتباط ، تستطيع أيضاً إنشاء ارتباط بريد إلكتروني إلى ملف صورة إذا كان هذا الملف متاحاً لك , مثل الصورة التي توجد في صفحة http://www.saudint.com ( انظر الشكل 14-7) .
7-14
3- حدد النص الذي تريد تعيينه كارتباط بريد إلكتروني .
4- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Create Hyperlink .
5- في مربع نص URL ، امسح http:// واكتب ما يلي :
mailto:
6- انقر زر ok لإغلاق مربع الحوار .
التعرف على الخرائط المصورة
التعرف على الخرائط المصورة
عندما تنشئ عدة ارتباطات في صورة واحدة ، فإنك تنشئ ما يسمى بالخريطة المصورة . وللخرائط المصورة فائدة عظيمة في صفحات الويب حيث أنها تمثل تصويراً رسومياً يمكن للمستعرضين استخدامه في التنقل داخل موقع الويب .
إنشاء الخرائط المصورة باستخدام فرونت بيج .
أول خطوة في عملية إنشاء الخريطة المصورة هي تحديد الصورة التي تنوي استخدامها ، إذاً عليك أن تختار ملفاً بإحدى هاتين الصيغتين GIF أو JPEG عليك حفظ تلك الصور بصيغة GIF أو JPG . ثم انتقل إلى خطوات تحويلها إلى خريطة مصورة وإليك هذه الخطوات .
1- قم بإدراج ملف الصورة في صفحة الويب التي ستضم الخريطة المصورة ( انظر الشكل 15-1 )
1-15
2- حدد الصورة التي قمت بإدراجها في الصفحة .
3- تأكد من ظهور شريط أدوات الصورة في في النافذة الرئيسية لفرونت بيج من شريط أدوات الصورة ، انقر رمز Polygonal Hotspot . يجب أن يظهر المؤشر على شكل قلم رصاص .
4- ستستخدم المؤشر في تتبع الحواف الخارجية لأحد الكائنات في الصورة كل كائن تقوم بتحديده سيكون واحدة من البقاع الساخنة التي تعينها داخل الخريطة المصورة . انقر في أحد اركان الكائن وستظهر نقطة إرساء ( مربعة ) .
حرك المؤشر إلى الركن الثاني في الخط الذي يوجد حول الكائن وسترى البقعة الساخنة وهي محيطة بالكائن ( 15-2 ) .
5- استمر في تتبع الكائن وإنشاء نقاط الإرساء إلى أن تصل إلى النقطة التي بدأت منها . انقر نقطة الإرساء الأولى مرة أخرى لتنهي عملية تتبع الكائن ، وسيظهر على الفور مربع حوار Create Hyperlink ( انظر الشكل 15-3 ) .
6- في مربع نص URL ، اكتب عنوان الصفحة التي تريد أن تنشئ الارتباط إليها . انقر زر OK لتحفظ الارتباط وتغلق مربع الحوار .
كرر الخطوات من 3 إلى 6 مع عدة كائنات أخرى تريد أن تحولها إلى نقاط ساخنة داخل الخريطة المصورة ( انظر الشكل 15-4 ) .
2-15
3-15
4-15
أنقر أداة البقعة التي تريد استخدامها مع تحديد المناطق التي تريد تحويلها إلى بقاع ساخنة داخل الصورة ( انظر الشكل 15-5 ) .
معاينة الخريطة المصورة
ينبغي أن تستخدم علامة تبويب PREVIEW التي توجد في النافذة الرئيسية لفرونت بيج ( في الجانب الأيسر السفلي ) لتختبر الخريطة المصورة التي أنشأتها .
5-15
لمعاينة الخريطة المصورة :
1- تأكد من أنك مازلت تعرض الصفحة التي قمت بإنشائها .
2- تأكد من تحديد علامة تبويب Normal الموجودة في الجزء السفلي من نافذة الصفحة .
3- لمعاينة الصفحة والخريطة المصورة اللتين انتهيت من إنشائهما ، انقر علامة تبويب PREVIEW وسترى الصفحة بنفس هيئتها عند استعراضها بواسطة أحد مستعرضات الويب .
4- ضع المؤشر فوق المناطق التي حولتها إلى مناطق ساخنة داخل الصورة . إذا كانت الارتباطات الموجودة لديك تعمل ، فلابد أن يتحول المؤشر إلى شكل يد صغيرة بمجرد أن يمر فوق أحد الارتباطات ( انظر الشكل 15-6 ) .
[/size]