اساسيات برنامج front page اتصميم صفحات Web

[net_man]

بسم الله القوى

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

ويلا بقى على الشرح ... ( شوية جد ) (sml4)


يعد فرونت بيج من أهم البرامج استخداماً في إنشاء صفحات الويب وتبين الصورة التالية واجهة المستخدم الأساسية التي ستراها عند العمل في فرونت بيج .

[net_man]

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

[net_man]

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

[net_man]

بينما الصورة التالية كافة اجزاء العرض وبعض اشرطة الأدوات التسعة .

[net_man]

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

وللبدايه ....
1- من قائمة File ، حدد خيار New ثم Webلتفتح مربع حوار New ( انظر الصورة الاولى)
2- من بين القوالب اختر الموقع الذي تريد إنشائه ومبدئياً حدد خيار One Page Web .
3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .
4- إنقر زر OK في حالة عدم وجود مجلد الويب ، سيطلب منك إنشاؤه في هذه الحالة انقر زر yes لإنشاء المجلد والموقع . ( الصورة الثانية فى هذه المداخله )

[net_man]

كيفية إنشاء ملف HTML
بعد أن تعلمت كيفية إنشاء موقع الويب الخاص بك ستتعلم الآن كيفية إنشاء صفحات داخل موقعك حيث أن للموقع أن يحوي عدد من الصفحات .
لإضافة صفحة جديدة في موقعك ، قم بما يلي :
1- من قائمةFile حدد خيار New ثم Page حتى تفتح مربع حوار New ثم انقر علامة تبويب General ( ( انظر الصورة التالية )
2- سوف يعرض لك المربع New قوالب متنوعة لصفحات ويب . قم بتحديد خيار Normal Page ثم انقر زر OK . ستظهر لك صفحة فارغة .
عندما تقوم بإنشاء الصفحات ستأخذ هذه الصفحات الأسماء الافتراضية للملفات مثل new page1.htm و new page2.htm لذا احفظ الصفحات بأسماء أخرى أكثر وضوحاً حتى يمكنك التعرف عليها بسهولة .
كانت هذه البداية ..

[Arpetnot]

شكرا نت مان و بانتظار المزيد

[net_man]

موضوع درس اليوم عن
استخدام القوالب في فرونت بيج


استخدام القوالب في فرونت بيج

بدء استخدام القوالب في فرونت بيج

ما القوالب ؟

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

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

أنواع القوالب المتاحة في فرونت بيج

القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .

قوالب المواقع

هناك تشكيلة مكونة من ثمانية قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك

[net_man]

وتكون هذه القوالب على شكل هياكل فارغة يمكنك من إنشاء أنواع معينة من مواقع الويب ، كما يحتوي فرونت بيج على المعالجات 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.

استخدام القوالب لإنشاء أنواع مختلفة من صفحات الويب

وكقوالب المواقع ، تمثل قوالب الصفحات أيضاً هياكل فارغة يمكنك استخدامها لإنشاء صفحات الويب داخل موقعك ، أيضاً يمكنك إنشاء أي عدد من صفحات الويب باستخدام القوالب الخاصة بها .

[net_man]

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

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

لإنشاء صفحة ويب باستخدام أحد القوالب قم بما يلي :

1- من قائمة File حدد خيار New ثم خيار Page لتفتح مربع حوار New حدد علامة تبويب General إذا لم تكن محددة

[net_man]

2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب – Left ، Narrow aligned Bodyمثلاً ( انظر الصورة )

[net_man]

سيقوم القالب الذي حددته بعرض نموذج مصغر له في مربع المعاينة .

3- انقر زر ok بعد ثوان معدودة ، سيتم إنشاء الصفحة الجديدة من القالب الذي حددته
( انظر الصورة التالية )
عند استخدام القوالب ستلاحظ أن فرونت بيج يقوم بإنشاء مواقع وصفحات الويب باستخدام بعض هذه القوالب

[net_man]

أساسيات النص

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

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

+ تعديل حجم النص .

+ ضبط وضع النص ، كأن يكون منخفضاً sub****** أو مرتفعاً super******عن السطر .

+ إضافة سمات إلى النص ، كأن تجعله عريضاً أو مائلاً أو أسفله سطر ، أو حتى الجمع بين هذه السمات .

+ توسيط النص على الشاشة .

+ إضافة ألوان أو أي تأثيرات أخرى ، مثل تأثير النص الوامض .

+ تغيير الخط الظاهر على الشاشة .

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

[net_man]

إضافة النص إلى صفحة الويب

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

لتبدأ بكتابة أي فقرة تريدها :

1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة بفتح قائمة Fileثم تحديد خيار New ثم Page ، في مربع حوار New ، حدد خيار Normal Page ، ثم انقر زر ok لتفتح صفحتك الجديدة .

2- عند الموضع الذي يظهر فيه مؤشر الكتابة ، اكتب ما يلي :

بسم الاب والابن والروح القدس
الاله الواحد
امين

3- اضغط مفتاح الإدخال Enter واستمر في كتابة اى نص . لا تضغط مفتاح الإدخال Enterعندما تصل إلى نهاية السطر ، فقط واصل الكتابة وسيتم لف النص تلقائياً إلى السطر التالي ،

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

[net_man]

ثم أنه لابد أن تحدد النص الذي تريد تغييره أو إضافة أي سمة إليه ، مثلاً لتغيير حجم النص الذي كتبته ، قم بما يلي :

1- حدد نص منتدى منظمة الاقباط الامريكية .

2- من قائمة Format ، حدد أمر Font . في مجموعة Size ، استخدم شريط التمرير حتى تصل إلى خيار 7 ثم حدده ، انقر بعد ذلك زر ok ، لا بد أن يظهر النص لديك بنفس الحجم الموجود في الشكل .

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



قائمة مختصرة : لست مضطراً لاستخدام قائمة Format حتى تفتح مربع حوار Fontيمكنك أيضاً أن تنقر بزر الفأرة الأيمن بعد تحديد النص لتفتح قائمة مختصرة ، من هذه القائمة حدد أمر Font Properties لتفتح مربع حوار Font .

[net_man]

إضافة الألوان والسمات

والآن ، قم بإضافة بعض السمات إلى النص ، ابدأ بتغيير لون العنوان :



ولتغيير لون النص :

1- حدد عنوان النص .

2- من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الصورة التالية ) .
3- افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .

4- حدد خيار Red ثم انقر زر ok لتغلق مربع حوار Font لتفتح مربع حوار Fontيجب الآن أن يظهر عنوان الفقرة باللون الأحمر .

أيضاً يمكنك جعل النص عريضاً أو مائلاً أو أسفله خط .




لجعل النص عريضاً :

1- حدد الكلمات التى ترغب بتعريضها او توضيحها بزيادة سمك الخط .

2- انقر رمز Bold ( يحمل هذا الرمز حرف B ) الموجود على شريط الأدوات .



لجعل النص مائلاً :

1- حدد الكلمات اي من الكلمات .

2- انقر رمز Italics ( يحمل هذا الرمز حرف I المائل ) الموجود على شريط الأدوات .


ولإضافة سطر أسفل النص :

1- حدد كلمة منظمه جلاله .

2- انقر رمز Underline ( يحمل هذا الرمز حرف U ) الموجود على شريط الأدوات .

[net_man]

أنماط الخط والتأثيرات

1- حدد كلمة اي كلمة من النص.

2- من قائمة Format ، حدد أمر Font لتفتح مربع حوار Font .

3- في جزء Effects ، يمكنك أن ترى التأثيرات المتنوعة التي يتيحها لك ، كما يتيح لك مربع المعاينة Preview رؤية الشكل الذي يظهر عليه النص بعد تطبيق أي تأثير من تلك التأثيرات .

لا حظ السطرين الظاهرين في مربع المعاينة يتيحان لك رؤية النص بالنسبة للتأثيرات التي تغير من الوضع الرأسي ، مثل تأثير انخفاض sub****** وارتفاع super****** النص عن السطر

4- مثلاً حدد خياري Caps Small و Super****** . انقر زر ok لتغلق مربع الحوار وترى التغييرات التي أجريتها على النص .

يعد تغيير المسافة بين الأحرف Character Spacing من التأثيرات التي تستطيع استخدامها لإبراز النص .

هذه بعض الخيارات التي يمكنك تطبيقها فيما يتعلق بتأثير المسافة بين الأحرف :

1- حدد الكلمات اي من الكلمات بالحروف الانجليزية او اكتب مثلاcopts.com

2- افتح مربع حوار Font .

3- انقر علامة التبويب Character Spacing لتفتح اللوحة الخاصة بتأثير المسافة بين الأحرف .

4- من مربع القائمة المنسدلة Spacing ، حدد خيار Expanded وفي مربع القائمة الذي يجاوره By ، حدد خيار 10

5- من مربع القائمة المنسدلة Position ، حدد خيار Raised . وفي مربع القائمة الذي يجاوره By ، اكتب 5 .

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

[net_man]

أساسيات الصور والرسومات

يشير مصطلح الرسومات graphics عادة إلى أي عنصر مرئي غير نصي يظهر على صفحة الويب . في حين يشير مصطلح الصور في الغالب إلى الملفات الرسومية الساكنة التي توجد في صيغتين هما GIF و JPEG .

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

1- استخدم صوراً صغيرة الحجم : الصور كبيرة الحجم تأخذ وقتاً عند تحميلها أما الصور صغيرة الحجم فتكون سريعة وتؤدي إلى استعراض صفحاتك بشكل سريع .

2- اجعل كل صفحة ويب لديك تحتفظ بأقل عدد من الصور : وجود عدد كبير من الصور في صفحة الويب أمر سيء ، لأنه يؤدي إلى بطء التحميل كثيراً .

3- لا تضف الصور إلى صفحة الويب لمجرد أنك تملك صوراً كثيرة : تأكد من أن الصور التي تضيفها إلى صفحاتك سوف تضيف شيئاً ما إلى محتواها .

" ثمة طريقة تسهل عليك إنشاء صفحات الويب الخاصة بك ، تقوم هذه الطريقة على إنشاء مجلد للصور – اسمه -/ IMAGES داخل مجلد Web الخاص بك حيث تخزن فيه كل ملفات الصور لديك فعند إنشاء موقع ويب يتم في الوضع الافتراضي إنشاء مجلد -/ IMAGESليستخدم في تخزين ملفات الصور الخاصة بك .

[net_man]

إضافة الصور باستخدام فرونت بيج

لإضافة صورة إلى صفحة الويب :

1- في فرونت بيج ، افتح صفحة جديدة داخل الموقع الخاص بك .

2- من قائمة Insert ، حدد خيار File ثم Picture لتفتح مربع حوار Picture
3- حدد ملف الصورة التي تريد إدراجها في صفحتك .

4- انقر زر ok وستظهر الصورة في صفحة الويب
5- من قائمة File ، حدد أمر save لتفتح مربع حوار save as (انظر الصورة الثالثة)
لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في مجلد /IMAGES .
6- إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر Changesثم حدد مجلد IMAGESثم انقر زر ok .

7- انقر زر ok لتحفظ ملف الصورة مع موقع الويب الخاص بك .

[net_man]

تعديل ملفات الصور لديك

من الإعدادات التي يمكنك القيام بها لتعديل ملفات الصور ما يلي :

× التحكم في أبعاد الصورة داخل الصفحة

× التحكم في طريقة محاذاة النص بالنسبة للصورة

× تحديد إذا ما كان سيتم عرض الصورة داخل الحدود

× إضافة ارتباط تشعبي إلى الصورة

ولتعديل طريقة عرض الصورة داخل صفحة الويب :

1- حدد الصورة التي تريد تعديلها .

2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture Properties ( الصورة الاولى المرفقه هنا)

3- لإضافة ارتباط تشعبي إلى الصورة ، اكتب عنوان URL الخاص بالارتباط التشعبي الذي تريد ربطه مع الصورة ، وذلك باستخدام جزء Default Hyperlinks . في مربع الحوار قد يكون عنوان URLأحد المواقع الأخرى على الويب أو ملفاً أخر على الموقع الخاص بك ، ويمكنك استخدام Browse لتحدد عنوان URLإذا لم تستطع أن تتذكره .

4-

لتعديل أبعاد الصورة ، حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها ( الصورة الثانية المرفقه هنا) .

[net_man]

5- قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .

6- انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties .

المثال التالي يساعدك على فهم دور المحاذاة وفائدتها عندما يتفاعل النص مع الصورة داخل صفحة ويب :

1- قم بإنشاء صفحة جديدة .

2- اكتب الجملة التالية في الصفحة :

الدرة دمه في رقاب المسلمين او اكتب ما تشاء مع الصورة التي ستختارها نحن اخترنا صورة الدرة والعبارة السابقة

3- ضع مؤشر الفأرة قبل كلمة المسلمين ثم أدخل الصورة . إذا كان حجم الصورة يزيد عن 150 بكسل عرضاً ، فقم بتعديل هذا الحجم بحيث لا يزيد عن 150 بكسل . ينبغي أن تبدو الصورة لديك كما هو مبين في الصورة المرفقه
4- حدد الصورة التي قمت بإدراجها ثم افتح مربع حوار Picture Properties . حدد علامة تبويب Appearanceلتفتح النافذة الخاصة بها .

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

[net_man]

up

(sml16)