صمم موقع خاص بك شرح برنامج الفرونت بيج لتصميم المواقع

<table style="border: 8px ridge rgb(239, 157, 203); background-color: rgb(254, 246, 248); color: rgb(249, 242, 236);" border="0" cellpadding="3" cellspacing="0"> <tr> <td> <table> <tr> <td style="border: 7px solid rgb(255, 222, 243);"> [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
كما يعرض فرونت بيج نموذجاً بسيطاً
لكل قالب صفحة قبل أن تقوم بإنشائها على عكس قوالب المواقع .

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

1- من قائمة File حدد خيار New ثم خيار Page or Web لتفتح مربع حوار New
اختر منه Page Templates

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

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

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

عند استخدام القوالب ستلاحظ أن فرونت بيج يقوم بإنشاء مواقع وصفحات الويب
باستخدام بعض هذه القوالب

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

التعامل مع النص

أساسيات النص :

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

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



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

ضبط وضع النص ، كأن يكون منخفضاً subscript أو مرتفعاً superscript عن
السطر

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

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

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

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

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

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



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

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

1- إذا لم تكن لديك الآن صفحة فارغة على الشاشة ، فلتقم بإنشاء واحدة .

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



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

لاحول ولا قوة إلا بالله



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

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

1- حدد نص بسم الله الرحمن الرحيم .

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

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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



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

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

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

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

2-من قائمة Format اختر أمر Font لتفتح مربع حوار Font ( انظر الشكل 2-3 ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



3-افتح القائمة المنسدلة Color حتى تظهر لوحة الألوان .

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

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

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



1- حدد الكلمات لاحول ولا قوة إلا بالله.

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

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

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

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

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

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

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

3- الآن ينبغي أن تشبه الفقرة لديك ما هو مبين في الشكل (3 - 3 ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
أنماط
الخط والتأثيرات :

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 .

5- انقر زر ok لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين
الأحرف .

وكما ترى فإن تأثير المسافة بين الأحرف يعطيك قدراً من الحرية في التعديل
في وضع النص .



إنشاء واستخدام الجداول



التعرف على الجداول :

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

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

تسمى مجموعة الخلايا الأفقية بـ " صف " ، في حين تسمى مجموعة الخلايا
الرأسية بـ " عمود

انشاء الجداول :

لإنشاء جدول :

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

2- من قائمة Table ، حدد أمر Insert ثم Table لتفتح مربع حوار Insert
Table ( انظر الشكل 1 - 4 ) .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين
،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout وكذلك خيار Specify
width . انقر زر ok سيتم إنشاء الجدول ويظهر في الصفحة .



التعرف على أحجام الجداول :



يجب أن تعرف كيفية تحديد حجم الجدول لأن عرض الجدول وفق النسبة المئوية
لحجم الشاشة أو عدد البكسلات .

بكسلات Pixels عناصر الصورة أو البكسلات هي أصغر وحدات تستخدم معاً لعرض
المعلومات على الشاشة ، ومن المرجح أنك سمعت المصطلح المستخدم لوصف درجة
وضوح العرض على الشاشة . على سبيل المثال ، من درجات الوضوح الشائعة درجتا
640X 480 و 800X 600. هذه الدرجة تشير إلى عدد البكسلات ( أفقياً X رأسياً )
المعروضة على الشاشة التي تستخدمها .

عندما تحدد عرض الجدول وفق نسبة مئوية معينة ، فإن العرض سيكون نسبياً ، أي
وفق نسبة عرض الشاشة .

أما إذا حددت الجدول وفق عدد معين من البكسلات فإنك تحدد عرضاً مطلقاً
للجدول .

لتغيير عرض الجدول :

1- ضع مؤشر الكتابة داخل الجدول .

2- من قائمة Table ، حدد خيار Select ثم Table .

3- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties ( انظر الشكل 2-4 ) .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



4- في جزء Specify width ، حدد خيار In Pixels ثم اضبط القيمة على 400 .


5- انقر زر ok وسيتم تغيير حجم الجدول الذي أنشأته من قبل .





ارتفاع الجدول :



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

التعامل مع تخطيط الجداول

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

لتغيير حجم الحد في الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties .

3- في جزء Borders ، غير الحجم Size إلى 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حجم الحد في
الجدول ( انظر الشكل3 - 4 )



حدود غير مرئية :

:

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

3 – 4



أيضاً يكنك الاستعانة بحشو الخلايا cell padding .

لتغيير حشو الخلايا :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell padding على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على حشو الخلايا (
انظر الشكل 4 - 4) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
(4-4)
يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .

لتغيير المسافة بين الخلايا :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties .

3- في جزء Layout ، اضبط خانة Cell spacing على 20 .

4- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على المسافة بين
الخلايا ( انظر الشكل 5 - 4 ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

5 - 4



التعامل مع ألوان الجداول :



يمكنك أن تحدد للجدول حدوداً عادية ، أو تنشئ تأثيراً ثلاثي الأبعاد من
خلال الحدود الفاتحة light border والحدود الداكنة dark border.

لتحديد لون حدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties .

3- في جزء Border ، انقر سهم القائمة المنسدلة Color لتفتح لوحة
الألوان .

4- حدد خيار Red لتظهر حدود الجدول باللون الأحمر .

5- انقر زر ok لتطبيق ورؤية اللون الذي حددته لحدود الجدول .

يمكنك أيضاً تحديد ألوان ثلاثية الأبعاد لحدود الجدول

لتحديد ألوان ثلاثية الأبعاد لحدود الجدول :

1- حدد الجدول الذي أنشأته من قبل .

2- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع
حوار Table Properties .

3- في جزء Border ، انقر سهم القائمة المنسدلة light Border لتفتح لوحة
الألوان الخاصة بها .

4- حدد خيار Red لتظهر الحد الفاتح للجدول بهذا اللون .

5- ومن نفس الجزء انقر سهم القائمة المنسدلة Dark Border لتفتح لوحة
الألوان الخاصة بها .

6- حدد خيار Maroon ليظهر الحد الداكن للجدول بهذا اللون .

7- انقر زر ok لتطبيق ورؤية التغيير الذي أجريته على لون الحدود
الفاتحة والداكنة للجدول ( انظر الشكل 6 - 4 ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
6-مزيد من العمل مع الجداول



معالجة الخلايا في الجدول :

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



إضافة الخلايا :



لإضافة صف جديد إلى الجدول :

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

2- حدد إحدى خلايا الجدول بالنقر داخلها .

3- من قائمة Table ، حدد خيار Insert ثم Rows or Columns لتفتح مربع حوار
Rows or Columns Insert ( انظر الشكل 1 - 5 ) .


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

1 – 5



4- حدد زر الخيار Rows لإدراج صف أو أكثر في الجدول .

5- حدد عدد الصفوف التي تريد إضافتها إلى الجدول . يمكنك إضافة من 1
إلى 1000 صف .

6- أسفل جزء Location ، حدد إذا ما كنت تريد إضافة الصفوف إلى أعلى أو
أسفل الخلية التي يوجد بها مؤشر الكتابة حالياً .

7- انقر زر ok لإنهاء عملية الإضافة وإغلاق مربع الحوار ، سيظهر الجدول
كما في ( الشكل 2 - 5 ) .



إضافة جدول داخل جدول :

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
2 – 5

تقسيم الخلايا :



قد ترغب أحياناً بتقسيم الخلية إلى عدة خلايا ويبين ( الشكل 3 - 5 ) مثالاً
على ذلك .

لتقسيم الخلية الواحدة إلى خليتين أو أكثر :

1- حدد الخلية التي تريد تقسيمها بالنقر داخلها .

2- من قائمة Table ، اختر أمر Split Cells لتفتح مربع حوار Split Cells
( انظر الشكل 4 - 5 ) .

3- حدد نوع التقسيم الذي تريده ، إلى أعمدة Columns أو صفوف Rows .

4- حدد عدد الأعمدة أو الصفوف الذي تريد أن تنقسم إليه الخلية المحددة ،
في الوضع الافتراضي ، يتم تحديد 2 ، وأقصى عدد يمكنك تحديده هو 100 .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

3-5

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
4-5

5- انقر زر ok لإغلاق مربع الحوار وبدء التقسيم ( انظر الشكل 5 - 5 ) .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
5-5

دمج الخلايا :

لدمج خليتين أو أكثر :

1- حدد الخلية الأولى التي تريد أن تدمج فيها بقية الخلايا ثم ضع مؤشر
الكتابة بداخلها .

2- احتفظ بمفتاح Shift مضغوطاً ثم حدد الخلية المجاورة التي تريد أن
تدمجها بالخلية السابقة المحددة ستظهر الخليتان بلون مميز ( انظر الشكل 6 -
5 ) .

3- من قائمة Table اختر أمر Merge Cells وسيتم دمج الخلايا التي حددتها في
خلية واحدة ( انظر الشكل 7 - 5 ) .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
6-5
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
7-5
حذف الخلايا :



لحذف خلية أو أكثر من الجدول :

1- قرر أولاً إذا ما كنت تريد حذف خلية أم عمود أم صف من الجدول .

2- حدد الخلية أو العمود أو الصف الذي تريد حذفه من الجدول .

3- من قائمة Table ، حدد خيار Select ثم Cell ( أو Column أو Rows ،
وذلك بحسب ما تريد حذفه ) .

4- بتحديد الجزء الذي تريد حذفه من الجدول ، افتح مرة أخرى قائمة Table ثم
اختر أمر Delete Cells . سيتم حذف ما قمت بتحديده من الجدول .



توزيع الصفوف والأعمدة بالتساوي :

إذا كان لديك جدول يشبه المعروض في ( شكل 8 - 5 ) فلك أن تعيد توزيع
الخلايا الموجودة في الصف الثاني حتى تبدو جميعها في أحجام متساوية .

لإعادة توزيع أحد الصفوف غير المتساوية :

1- حدد الجدول الذي يحوي الصفوف أو الأعمدة التي تريد إعادة توزيعها
بالتساوي .

2- من قائمة Table ، حدد أمر Distribute Rows Evenly ، ستتم إعادة توزيع
الأعمدة أو الصفوف لتبدو بشكل متساوي .

في حالة قيامك بإعادة توزيع الصفوف والأعمدة في جدولك لكن دون حدوث تلك
العملية بالصورة الدقيقة التي تريدها ، فإنه يمكنك استخدام أمر التراجع
undo من قائمة Edit للرجوع للحالة السابقة .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
8-5

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



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



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

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

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

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

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

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

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



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

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

2- من قائمة Insert ، حدد خيار Picture ثم From File لتفتح مربع حوار
Picture .

3- حدد ملف الصورة التي تريد إدراجها في صفحتك .

4- انقر زر ok وستظهر الصورة في صفحة الويب انظر الشكل .

5- من قائمة File ، حدد أمر save لتفتح مربع حوار save as ( انظر الشكل 1 -
6 ) لتتأكد من أن ملف الصورة قد تم حفظه مع موقع الويب إلى جانب حفظه في
مجلد /IMAGES

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

6 – 1

6- إذا لم يكن المجلد المحدد لحفظ ملف الصورة هو مجلد IMAGES ، فانقر زر
Changes ثم حدد مجلد IMAGES ثم انقر زر ok .

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



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

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

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

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

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

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

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

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

2- من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture
Properties ( انظر الشكل 6 - 2 )

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
6-2

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

4- لتعديل أبعاد الصورة ، حدد علامة تبويب Appearance لتفتح النافذة
الخاصة بها .

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

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



التحكم في الصور داخل فرونت بيج



التحكم في الصور باستخدام الجداول :



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

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

2- قم بإنشاء جدول داخل صفحة بحيث يتكون من خليتين.

3- أدرج صورتك في الخلية اليسرى

إنشاء نماذج مصغرة للصور :

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

تستخدم النماذج المصغرة للصور عندما يكون عندك عدة صور كبيرة وتريد أن
تعرضها في صفحة الويب ، وتريد أن يكون استعراضها سريعاً أو تتفادى استهلاك
مساحة كبيرة على الشاشة .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
1 - 7



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

لإنشاء نموذج مصغر لإحدى الصور :

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

2- أدرج أي صورة في الصفحة .

3- تأكد من ظهور شريط أدوات الصورة داخل النافذة الرئيسية لفرونت بيج ، إن
لم يكن هذا الشريط ظاهراً ، فحدد خيار Toolbars من قائمة View وتأكد من
تحديد أمر Picture .

4- حدد الصورة التي أدرجتها في الصفحة ، ثم انقر رمز Auto Thumbnail
الموجود على شريط أدوات الصورة سيتم على الفور استبدال نموذج مصغر بالصورة
الأصلية ( انظر الشكل 2 - 7 ) .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
2 – 7

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

1- من قائمة Tools ، حدد أمر Page Options لتفتح مربع حوار Page
Options.

2- حدد علامة تبويب Auto Thumbnail لتفتح اللوحة الخاصة بها ( انظر
الشكل 3 - 7 ) .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
3 – 7

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





إنشاء الخلفيات :

توجد طريقتان لاستخدام ملفات الصور كخلفيات . الأولى هي استخدام الصورة
لإنشاء خلفية عادية ، والثانية هي إنشاء ما يسمى بـ " العلامة المائية "
watermark .



إنشاء خلفية عادية :

لإنشاء خلفية :

1- اختر أمر Properties من قائمة File لتفتح مربع حوار Properties Page
.

2- انقر علامة تبويب Background .

3- حدد مربع العلامة Picture Background ، ثم أدخل إسم ملف الصورة التي
تريد استخدامها كخلفية . إن لم تتذكر جيداً اسم ملف الصورة ، فاستخدم زر
Browse للبحث عنه وتحديد موقعه .

4- انقر زر ok ، وستظهر الصورة التي حددتها كخلفية للصفحة التي تتعامل
معها حالياً .

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



إنشاء العلامة المائية :

لتعيين صورة الخلفية كعلامة مائية :

1- من قائمة File ، حدد أمر Properties لتفتح مربع حوار Properties
Page .

2- انقر علامة تبويب Background لتفتح اللوحة الخاصة بها .

3- حدد مربع العلامة watermark .

4- انقر زر ok ، لتصبح بذلك الصورة التي حددتها للخلفية علامة مائية
لصفحة الويب التي تصممها



إنشاء الارتباطات

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

كيف تعمل الارتباطات :

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

يتيح لك فرونت بيج إنشاء الارتباطات التي تريدها في صفحات الويب الخاصة بك .




أنواع الارتباطات :



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

ولنبدأ أولاً بـ الارتباطات إلى صفحات داخل الموقع :



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

2- اكتب النص التالي :

صدى لـ تصميم مواقع الانترنيت وحجز الأسماء والمساحات أو أي نص آخر تريد أن
تنشئ له ارتباطاً .

حدد الكلمات .

3- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Insert
Hyperlink .

اضغط على الأيقونة التي تحمل شكل مجلد فوقه سهم منحني ( انظر الشكل 1 - 8 )
فيفتح لك مربع حوار , من Look in حدد موقع الصفحة التي تريدها أن ترتبط
إلى هذه الكلمات ثم اضغط على موافق .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
1 - 8



وهكذا تكون قد حصلت على ارتباط إلى صفحة داخل الموقع

لـ انشاء ارتباط إلى مواقع أخرى :



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

2- اكتب النص التالي :

صدى لـ تصميم مواقع الانترنيت وحجز الأسماء والمساحات أو أي نص آخر تريد أن
تنشئ له ارتباطاً .

حدد الكلمات .

3- من قائمة Insert ، اختر أمر Hyperlink لتفتح مربع حوار Insert
Hyperlink .

4- في خانة Address ، اكتب النص التالي : [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ( انظر الشكل 2 - 8 ) .

5- انقر زر ok لإغلاق مربع الحوار وحفظ الارتباط .



[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
2 – 8
</td></tr></table>
</td></tr></table>