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

[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