اذهب الي المحتوي
أوفيسنا
بحث مخصص من جوجل فى أوفيسنا
Custom Search

كيف تصمم وتبني موقعا خاصا


الردود الموصى بها

السلام عليكم ورحمة الله

حتى تتعلم كيف تصمم موقعا لك بتصميم له بصمة خاصك بك ، يجب عليك اولاً ان تتعرف على بعض الاساسيات في لغة HTML

حيث هي - للحق - تتسم بالسهولة فضلا انك تستطيع دمجها في لغات اخرى مثل PHP

اولاً : حتى يظهر موقعك - طبعاً بعد رفعه إلى الاستضافات - لا بد من انشاء اول صفحة - خطو ضرورية - ان تسمي هذه الصفحة باسم

index.htm

إذن :

1- افتح برنامج فرونت بيج

ستظهر الصفحة كما يلي :

1.gif

2- اضغط على File ثم Save As

2.gif

3- ولنفترض اننا قمنا بفتح ملف جديد اسمه MyHome

4- وستكون الصفحة الاولى كما يظهر في اسفل الشباك الظاهر لنا هو : index.htm

اتركها كما هي وقم بحفظ هذه الصفحة الاولى في ملف موقعك المسمى MyHome

4.gif

الآن وبعد فتح الصفحة الرئيسية ( الضرورية للموقع ) الاندكس

ننتقل لخطوة برمجية مهمة ( اتمنى الانتباه من الجميع )

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

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

5.gif

وتستطيع ان تختار الشكل الذي تريد

او ان تقوم انت بانشاء الجدول حسب الرغبة كما هو مبين بالصورة التالية :

6.gif

2- ستظهر الصفحة لك تبدو كأنها مقسمة إلى ثلاث أقسام

7.gif

3- الان نقوم بدمج الخلايا الثلاث العلوية لتصبح خلية واحدة وذلك حتى يتسنى لنا وضع عنوان الموقع او ما يسمى الهيدر Header

ونظلل الخلايا الثلاث بالماوس ثم نضغط الزر الايمن فتظهر الصورة التالية

8.gif

  • Like 2
رابط هذا التعليق
شارك

  • 7 months later...
  • 3 months later...
  • 4 weeks later...
  • 4 years later...

اخى العزيز  يمكن ان تراجع هذا الربط وبه شرح كامل لبرنامج الفرونت بج لعمل موقع شخصى

http://www.sadaagroup.com/FrontPageXP/LearnFrontpagXP.htm

 

ايضا راجع هذا الرابط هنا فى المنتدى وهو لتحميل كتب لشرح البرنامج وعمل المواقع

http://www.officena.net/ib/index.php?showtopic=49695&hl=

 

ايضا راجع هذا الرابط هنا فى المنتدى لشرح البرنامج فيديو

http://www.officena.net/ib/index.php?showtopic=49602&hl=

رابط هذا التعليق
شارك

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

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

 
download.php?img=4091
 
في الجانب الأيسر ستجد شريط العرض Views Bar . هذا الشريط يتيح لك سرعة تغيير طرق العرض الخاصة بصفحات الويب فضلاً عن تغيير الخصائص المتنوعة في البرنامج . ومن طرق العرض Navigation والذي يتعلق بإنشاء أشرطة التحرك ، وأيضاً عرض المهام Tasks .
 
نظراً لأنك ستقضي معظم وقتك في استخدام فرونت بيج كمحرر لصفحات الويب ، فمن المفضل أن تقوم بإزالة شريط العرض ، كما يلي :
 
1- افتح قائمة View .
 
2- قم بإلغاء تحديد خيار Views Bar لإزالة علامة الاختيار من أمامه ( أنظر الشكل 2 - 2 ) ، سيختفي بذلك شريط العرض وهذا يفيد من أجل الحصول على عرض في برنامج فرونت بيج يماثل عرض متصفح الانترنت .
 
download.php?img=4092
 
بعد إخفائك شريط العرض يمكنك أيضاً الوصول إلى خيارات العرض الأخرى الخاصة بالموقع الذي أنشأته , وذلك من خلال قائمة View .
 
في فرونت بيج يمكنك الوصول إلى أكثر الخصائص استخداماً من خلال أشرطة الأدوات القياسية التسعة
 
كيفية إنشاء موقع ويب :
 
عندما تقوم بإنشاء مجموعة صفحات للويب لوضعها في موقع على الويب . فإن فرونت بيج يتيح لك تجميع تلك الصفحات في وحدة واحدة ليطلق عليها في النهاية " ويب " Web . رغم أننا نستخدم فرونت بيج إنشاء وتعديل الصفحات الفردية دون القيام بإنشاء موقع ويب ، فإنك ستجد تحفيزاً قوياً على إنشاء موقع ويب يجمع الصفحات التي أنشأتها . وذلك للأسباب التالية :
 
يحتوي فرونت بيج على عدة خصائص لفحص سلامة الصفحات التي تقوم بإنشائها وسلامة الارتباطات في تلك الصفحات .
 
فرونت بيج مصمم ليتيح لك إرسال الصفحات التي تنشئها إلى أحد أجهزة خادم الويب وذلك كوحدة واحدة .
 
عند إنشاء أحد المواقع يمكنك استخدام أداة التحرك التلقائية في فرونت بيج لإنشاء أشرطة تحرك خاصة بموقعك .
 
الاحتفاظ بصفحات الويب التي تنشئها داخل موقع واحد يتيح لك استخدام المجلدات Folders لتنظيم الملفات .
 
أيضاً يتيح لك ذلك استخدام التقارير Reports لتسهيل فحص موقعك .
 
إذا قمت بإنشاء موقع ويب جديد ، ينشئ فرونت بيج مجلد جديد مستخدماً اسم الموقع ثم تستطيع تخزين ملفاتك أو إضافتها إلى موقعك داخل هذا المجلد أو مجلدات فرعية أخرى .
 
قم بإنشاء أول موقع ويب خاص بك :
 
1- من قائمة File ، حدد خيار New ثم Page or Web لتفتح مربع حوار يمين الشاشة ( انظر الشكل 3 - 3 ) .
 
2- حدد خيار Empty Web ومن بين القوالب المتاحة حدد One Page Web .
 
3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .
 
4- انقر زر OK في حالة عدم وجود مجلد الويب ، سيطلب منك إنشاؤه في هذه الحالة انقر زر yes لإنشاء المجلد والموقع

 
download.php?img=4093

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

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


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

أنواع القوالب المتاحة في فرونت بيج :
القوالب نوعان هما قوالب الصفحات page templates وقوالب المواقع web templates .

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

 

هناك تشكيلة مكونة من عشرة قوالب للمواقع يمكنك اختيار ما تريد منها حسب ما يناسبك ( انظر الشكل 1-2 )

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




download.php?img=4094

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

2- حدد نوع القالب الذي تريد استخدامه ، كأن تختار قالب Customer Support Web مثالاً

3- حدد المجلد أو الدليل الذي تريد أن تنشئ فيه موقع الويب ثم انقر زر ok .

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

5- بعد بضع ثوان ، سيتم إنشاء القالب .

يقوم فرونت بيج بإضافة صفحة آو أكثر إلى موقع الويب بعد تحديد أي قالب من القوالب ما عدا قالب Empty Web .

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

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

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

 

download.php?img=4095

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

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

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

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 ) .


download.php?img=4569


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

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

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

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



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

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

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

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

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

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

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

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

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

 

download.php?img=4096

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

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

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

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

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

4- مثلاً حدد خياري Caps Small و *********** . انقر زر 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 ) .

 

download.php?img=4162

 

الحجم الافتراضي لأي جدول جديد هو أربع خلايا تتألف من عمودين وصفين ،استخدم أيضا القيم الافتراضية لخيارات مجموعة Layout وكذلك خيار Specify width . انقر زر ok سيتم إنشاء الجدول ويظهر في الصفحة .

 

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

 

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

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

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

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

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

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

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

3- من قائمة Table ، حدد خيار Table Properties ثم Table لتفتح مربع حوار Table Properties ( انظر الشكل 2-4 ) .



download.php?img=4163


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 )

 

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

 

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

 

download.php?img=4165

3 – 4

 

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

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

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

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

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

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



download.php?img=4166

يمكنك أيضاً استخدام خاصية المسافة بين الخلايا cell spacing .

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

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

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

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

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


download.php?img=4570


مزيد من العمل مع الجداول

 

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

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

 

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

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

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

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

download.php?img=4571


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

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

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

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



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

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

 

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

 

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

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

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

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

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

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





download.php?img=4622
 

download.php?img=4623

5-5

دمج الخلايا :

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

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

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

3- من قائمة Table اختر أمر Merge Cells وسيتم دمج الخلايا التي حددتها في خلية واحدة ( انظر الشكل 7 - 5 )

download.php?img=4624


download.php?img=4625
حذف الخلايا :

 

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

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

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

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

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

 

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

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

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

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

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

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

download.php?img=4626

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

 

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

 

يشير مصطلح الرسومات 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


download.php?img=4628

6 – 1

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

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



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

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

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

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

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

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

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

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

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



download.php?img=4629


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

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

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

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

 

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

 

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

 

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

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

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

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

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

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

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


download.php?img=4630



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

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

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

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

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

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


download.php?img=4631



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

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

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



download.php?img=4632


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 حدد موقع الصفحة التي تريدها أن ترتبط إلى هذه الكلمات ثم اضغط على موافق .


download.php?img=4633

1 - 8



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

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

 

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

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

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

حدد الكلمات .

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

4- في خانة Address ، اكتب النص التالي : www.subject.com ( انظر الشكل 2 - 8 ) .

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

 

رابط هذا التعليق
شارك

لـ إنشاء ارتباط إلى بريد الكتروني :

قم بالخطوات 1 و 2 و 3 السابقة وبعد أن تفتح مربع الحوار Insert Hyperlink اذهب إلى E-mail Address فيفتح لك مربع حوار اكتب في خانة E-mail address عنوان الإيميل الذي ترغب .

وأخيراً إنشاء ارتباط داخل نفس الصفحة :

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

2 - اكتب النص الذي ترغب به ثم حدده .

3 - من قائمة Insert اختر bookmark ( انظر الشكل 3 - 8 ) .

download.php?img=5063


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

التعرف على الخرائط المصورة :

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

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

1- قم بإدراج ملف الصورة في صفحة الويب التي ستضم الخريطة المصورة .

2- حدد الصورة التي قمت بإدراجها في الصفحة .

3- تأكد من ظهور شريط أدوات الصورة في في النافذة الرئيسية لفرونت بيج من شريط أدوات الصورة ، انقر رمز Polygonal Hotspot . يجب أن يظهر المؤشر على شكل قلم رصاص .

4- ستستخدم المؤشر في تتبع الحواف الخارجية لأحد الكائنات في الصورة كل كائن تقوم بتحديده سيكون واحدة من البقاع الساخنة التي تعينها داخل الخريطة المصورة . انقر في أحد أركان الكائن وستظهر نقطة إرساء ( مربعة ) .

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

5- استمر في تتبع الكائن وإنشاء نقاط الإرساء إلى أن تصل إلى النقطة التي بدأت منها . انقر نقطة الإرساء الأولى مرة أخرى لتنهي عملية تتبع الكائن ، وسيظهر على الفور مربع حوار Create Hyperlink .

6- في مربع نص Address ، اكتب عنوان الصفحة التي تريد أن تنشئ الارتباط إليها . انقر زر OK لتحفظ الارتباط وتغلق مربع الحوار .

7 - كرر الخطوات من 3 إلى 6 مع عدة كائنات أخرى تريد أن تحولها إلى نقاط ساخنة داخل الخريطة المصورة .

أنقر أداة البقعة التي تريد استخدامها مع تحديد المناطق التي تريد تحويلها إلى بقاع ساخنة داخل الصورة

معاينة الخريطة المصورة :

ينبغي أن تستخدم علامة تبويب PREVIEW التي توجد في النافذة الرئيسية لفرونت بيج ( في الجانب الأيسر السفلي ) لتختبر الخريطة المصورة التي أنشأتها .

لمعاينة الخريطة المصورة :

1- تأكد من أنك مازلت تعرض الصفحة التي قمت بإنشائها .

2- تأكد من تحديد علامة تبويب Normal الموجودة في الجزء السفلي من نافذة الصفحة .

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

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

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

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

التعرف على الإطارات :

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

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

هل يجب استخدام الإطارات ؟

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

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

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

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

2- انقر علامة تبويب Frames Page لتعرض اللوحة الخاصة بها ( انظر الشكل 1 - 9 ) .



 

download.php?img=5064

3- حدد الإطار الذي تريد استخدامه في صفحتك ، في مثالنا حدد قالب Contents الذي يتيح لك إنشاء صفحة بداخلها إطاران .

4- انقر ok لإغلاق مربع الحوار وإنشاء صفحة الويب باستخدام القالب الذي حددته ( انظر الشكل 2 - 9 )

 

download.php?img=5065

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

سنقوم بإنشاء قائمة بسيطة في الإطار الصغير الموجود في يسار الصفحة كما يلي :

1- في الإطار الأيسر ، انقر زر New Page وسيتم إنشاء صفحة جديدة في الإطار .

2- اكتب النص التالي في الصفحة المؤطرة :

Page1

صفحة 1

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

4- في مربع Address اكتب اسم إحدى الصفحات التي أنشأتها من قبل في الدروس السابقة أو حدد إحداها بـ أي طريقة تودها .

5- في مربع حوار Insert Hyperlink ، انقر زر Target Frame لتفتح مربع حوار Target Frame ( انظر الشكل 9 - 3 ).


 

download.php?img=5066

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

7- انقر زر ok لإغلاق مربع الحوار Target Frame . انقر زر ok مرة أخرى لإغلاق مربع حوار Insert Hyperlink .

8- كرر الخطوات من 3 إلى 7 مع نصي صفحة 1و مع تحديد صفحتين مختلفتين لعرضهما في هذين الارتباطين .

9- تم الانتهاء من إنشاء صفحتك المؤطرة تقريباً ، الآن تحتاج إلى إلى تحديد الصفحة التي سيتم عرضها وغالباً ما تكون نفس الصفحة التي تمت تسميتها بواسطة ارتباط Page1 انقر زر Set Initial Page الموجود في اللوحة اليمنى لتفتح مربع حوار Insert Hyperlink .

10-اكتب اسم الملف الذي يحتوي على ارتباط إلى Page1 الذي أنشأته في الخطوة 4 .

11-انقر زر ok لإغلاق مربع الحوار .

12-من قائمة File ، حدد أمر Save لحفظ ملفاتك . سيطلب منك حفظ كل الملفات التي أنشأتها . ونظراً لأنك أنشأت الملف الظاهر في الإطار الأيسر ، سيطلب منك حفظه إلى جانب حفظ الملف المسمى بـ " مجموعة الإطارات " frameset file وهو الملف الذي يتحكم في الصفحة المؤطرة .

13-بعد الانتهاء من حفظ ملفاتك ، حدد علامة تبويب Preview لعرض الصفحات المؤطرة ( أي ذات الإطارات ) واختبر أدوات التحكم في الإطارات.

ما تزال الإطارات مثيرة للجدل رغم ظهورها من بضع سنوات ، لكن لا تنس ألا تبالغ باستخدامها .

نشر موقع الويب وإدارته

الاستعداد لنشر موقع الويب الخاص بك :

هناك العديد من الطرق من أجل نشر مواقع الانترنيت منها عن طريق فرونت بيج ومنها عن طريق file manager وأيضاً منها عن طريق برنامج ws_ftp .

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

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

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

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

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

إرسال موقع الويب إلى الخادم :

لنشر موقعك على خادم الويب :

1- حدد وافتح موقع الويب الذي تريد نشره .

2- من قائمة File اختر أمر publish Web لتفتح مربع حوار publish Web ( انظر الشكل 1 - 10 ) .


3- في مربع نص Enter publish destination ، اكتب عنوان URL الخاص بخادم الويب الذي ستنشر عليه موقعك . تستطيع أن تحدد في هذا المربع بروتوكول HTTP أو FTP . إذا كنت – على سبيل المثال – ستنشر على أحد أجهزة خادم الويب في مجال My Company.com ، فلك أن تكتب عنوان URL بهذا الشكل http://www.mycompany.com أو ftp://ftp.mycompany.com طبعاً حتى تكتب http يجب أن يكون الخادم عندك يدعم فرونت بيج أما إذا لم يكن يدعم فرونت بيج فاستخدم ftp
طبعاً سيطلب منك كتابة اسم المستخدم + كلمة المرور وهاتان الكلمتان تحصل عليهما من الخادم المضيف


 

download.php?img=5067


- انقر زر publish لتبدأ إرسال موقعك إلى الخادم .

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

6- سوف يظهر عند الانتهاء وصلة لمعاينة الموقع الذي تم نشره ، انقر ارتباط published web site .

7- انقر زر Done لإغلاق مربع حوار publish web .

مهام إدارة موقع الويب :

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

1- تأكد من أن الموقع الذي تريد تحديثه قد تم فتحه .

2- من قائمة File ، اختر أمر publish web لتفتح مربع حوار publish web .

3- في مربع نص Enter publish destination ، اكتب عنوان URL الخاص بخادم الويب الذي نشرت عليه موقعك . تأكد بعد ذلك من تحديد مربع العلامة publish changed pages only .

4- انقر زر publish لبدء إرسال الصفحات الجديدة و/ أو المحدثة إلى الخادم . يتمتع فرونت بيج بذكاء يجعله يقارن بين موقع الويب المنشور وبين الموقع الموجود على جهازك ، ثم يقوم بإرسال الصفحات الجديدة أو التي طرأ عليها أي تغييرات فقط

الحصول على تقارير عن موقع الويب :

للحصول على تقارير عن موقع الويب :

1- افتح موقع الويب الذي تريد أن تحصل على تقرير عنه .

2- من شريط view ، انقر رمز reports سيظهر بعد ثوان على الشاشة تقرير يضم معلومات عن الموقع الذي فتحته (انظر الشكل 2 - 10).


 

download.php?img=5069

إضافة تعدد الوسائط والصور المتحركة إلى موقع الويب

تعريف تعدد الوسائط :

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

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

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

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

لإضافة أحد ملفات MIDI – أو أي نوع آخر من ملفات الصوت – إلى موقع الويب الخاص بك :

1- حدد وافتح الصفحة التي تريد أن تضيف إليها ملف الصوت .

2- من قائمة File ، اختر أمر Properties لتفتح مربع حوار Page Properties ( انظر الشكل 1 - 11 ) .


 

download.php?img=5070

3- في جزء Background Sound ، اكتب اسم الملف الصوتي في مربع نص ******** ، استخدم زر Browse . إذا لم تستطع تذكر الموقع المحفوظ فيه الملف .

4- في جزء Loop ، حدد عدد المرات التي تريدها لتشغيل الملف الصوتي تستطيع تحديد خانة Forever ، مما يعني أن تشغيل الملف الصوتي سيدوم طيلة عرض الصفحة التي تضم هذا الملف .

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

6- لمعاينة الصفحة مع الخلفية الصوتية الخاصة بها ، انقر علامة تبويب preview داخل النافذة الرئيسية لفرونت بيج .

إضافة لقطات الفيديو إلى صفحات الويب :

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

لإضافة إحدى لقطات الفيديو إلى موقع الويب :

1- حدد وافتح الصفحة التي تريد أن تضيف إليها لقطة الفيديو .

2- من قائمة Insert ، حدد أمر Picture ثم Video لتفتح مربع Video وبالتالي يمكنك تحديد ملف لقطة الفيديو المراد إلى الموقع ( شكل 2 - 11 ) .

 

download.php?img=5071

3- في الوضع الافتراضي ، يجعل فرونت بيج كافة لقطات الفيديو تبدأ التشغيل تلقائياً عندما يتم إدراجها في الصفحة المحددة . إذا لم ترغب في أن تبدأ لقطات الفيديو التشغيل تلقائياً عندما تكون صفحة الويب التي تضم تلك اللقطات مفتوحة ، قم بعد ذلك بتحديد أمر Properties من قائمة Format لتفتح مربع Picture Properties . إذا لم تكن علامة تبويب video محددة ، قم بتحديدها لتعرض اللوحة الخاصة بها ( انظر الشكل 3 - 11) .

 

download.php?img=5072


4- توجد خيارين لبدء تشغيل لقطات الفيديو لديك تلقائياً أو عند تمرير مؤشر الفأرة فوق لقطة الفيديو حدد طريقة البدء التي تريد استخدامها بالتحديد على مربع العلامة .

5- بكتابة رقم في خانة Loop ، تستطيع تحديد عدد المرات التي تريدها لتشغيل لقطة الفيديو .

6- بعد إنهاء التعديلات الخاصة بعدد مرات تشغيل اللقطة ، انقر زر Save لحفظ تلك التعديلات وإغلاق مربع الحوار .

7- لمعاينة لقطة الفيديو بعد إدراجها في الصفحة ، انقر علامة تبويب preview داخل النافذة الرئيسية لفرونت بيج

صفحات الأنماط والعناصر النشطة

التعرف على العناصر النشطة

العناصر النشطة active elements مجموعة من الأدوات التي تضيف قدراً من الإثارة إلى صفحة الويب، وهي على سبيل المثال لا الحصر الأزرار المتحركة hover buttons و عداد الزيارة hit counter والنص المتحرك marquee . أما الأزرار المتحركة فهي عبارة عن أزرار لها تأثيرات خاصة وأما عداد الزيارة فهو عبارة عن وسيلة عرض تبين عدد الزوار لموقعك . والنص المتحرك هو عنوان نصي قابل للحركة .

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

من أجل إضافة أزرار متحركة :

1- من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Dynamic Effects ومن Choose an effect اختر Hover Button ( الشكل 1 - 12 ) .


 

download.php?img=5073
 

 

 


 

رابط هذا التعليق
شارك

 أضف ما تراه مناسباً من التأثيرات من حيث اسم الزر والرابط الذي سيربط إليه الزر ولون الزر و التأثير الحركي للزر ... ألخ من التأثيرات ( الشكل 2 - 12 ) .

 

download.php?img=5074

ثانياً عداد الزيارة : من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Hit Counter ومن Choose a counter style اختر شكل العداد الذي ترغب به ( الشكل 3 - 12 ) .







download.php?img=5075

ثالثاً النص المتحرك : من Insert اختر Web Component لتفتح مربع حوار Insert Web Component اختر من Component Type أمر Dynamic Effects ومن Choose an effect اختر Marquee .

وهنا يفتح مربع حوار Marquee properties الذي تستطيع من خلاله إضافة النص المتحرك إضافة إلى تطبيق التأثيرات الحركية واللونية المختلفة عليه ( الشكل 4 - 12 )

 

download.php?img=5076

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

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

تطبيق الأفكار العامة على موقع الويب :

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

لتطبيق فكرة عامة على موقع الويب الخاص بك :

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

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


 

download.php?img=5077

3- لتطبيق الفكرة العامة على موقع الويب بأكمله ، حدد زر الخيار All Pages الذي يوجد في جزء Apply Theme To لكن لتطبيقها على صفحات معينة ، فانقر زر الخيار Selected Page(s) l كما تستطيع أن تجعل الفكرة نطبق بكاملها أو بعض أجزائها من خلال الخيارات الموجودة أسفل أنواع الأفكار .

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

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

6- عندما ينتهي فرونت بيج من تطبيق الفكرة العامة الجديدة ، ستظهر الصفحة التي حددتها لتطبيق الفكرة العامة عليها

تعديل الفكرة العامة في فرونت بيج :

لتحديد فكرة وتبدأ في تعديلها ، لعمل ذلك ، اتبع الخطوات التالية :

1- اختر أمر Themes من قائمة Format لتفتح مربع Themes .

2- حدد الفكرة العامة التي تريد تعديلها من بين الأفكار العامة المتاحة . ستظهر الفكرة العامة داخل نافذة Sample of Theme .

3- انقر زر Modify وستظهر في مربع الحوار ثلاثة أزرار إضافية ، وهي Colors و **** و Graphics . انقر أحد الأزرار الثلاثة بحسب العنصر الذي تريد تعديله في الفكرة العامة . إذا أردت تعديل أكثر من عنصر في النص ، فانقر زر **** . سيظهر لك مربع حوار Theme Modify ليعرض عناصر النص التي يمكن تعديلها .

4- من قائمة Item ، حدد العنصر الذي تريد تغييره . فمثلاً ، حدد Heading1 لتعرض الخط المستخدم في عناوين Heading1 .

5- حدد خطاً مختلفاً يستخدم في Heading1 ، وسيحدد هذا الخط الجديد الشكل الذي ستظهر به كافة رؤوس Heading1 .

6- إذا أردت تغيير أي إعدادات خاصة بحجم بقية الرؤوس الأخرى ، فقم بهذه التغييرات مثلما فعلت في الخطوات من 4 إلى 6 ثم انقر بعد ذلك زر ok .

7- كي تتأكد من أنك لم تحذف الفكرة العامة الموجودة لديك ، انقر زر Save As لتحفظ التغييرات باسم جديد . في الوضع الافتراضي سيقدم فرونت بيج اسماً للفكرة العامة الجديدة هو Copy of theme . تستطيع أن تقبل هذا الاسم أو تقوم بتغييره ، انقر ok مرة أخرى لإغلاق مربع حوار Themes .

إدراج ملف الفلاش في صفحة ويب

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

أدراج ملف الفلاش في الفرونت بيج :

1 - قم بعمل فيلم فلاش .

2 - من القائمة الرئيسية للفلاش أختر File>Export Movie احفظ الملف في القرص الصلب باسم sadaa على سبيل المثال وبصيغة swf اضغط Save ثم OK ثم OK مرة أخرى .

لاحظ بأن البرنامج قد قام بتصدير الفيلم على هيئة Flash Player باسم sadaa.swf الملفات ذات الامتداد swf هي التي يمكن أن تدرج في صفحات الويب وتعرض في الإنترنت .

3 - الآن نقوم بفتح برنامج الفرونت بيج ثم نفتح الصفحة اللي سنصدر العمل إليها ثم نختار من القائمة الرئيسة insert > web component > advansed > Plug-in

أما بالنسبة لمستخدم فرونت بيج باللغة العربية يختار من القائمة الرئيسية إدراج > مكون ويب > عناصر تحكم متقدمة > توصيل الشكل ( 1 ) .

 

download.php?img=5078

download.php?img=5079

إدراج ملف الفلاش عن طريق لغة html :

طبعاً أولاً عليك القيام بالعمليتين السابقتين 1 , 2 حتى تقوم بحفظ الملف بصيغة swf .

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

إنشاء سجل الزوار

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

أنشئ موقعاً جديداً كما تعلمت في الدروس السابقة , ومن ثم من جديد اختر صفحة أو ويب ومن ثم قوالب الصفحة , من قوالب الصفحة اختر دفتر الضيوف أو guestbook بالنسبة للفرونت بيج باللغة الإنكليزية . الشكل ( 14 - 1 ) .


 

download.php?img=5080

الشكل ( 14 - 1 )

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

وهكذا تعلمنا كيفية إنشاء سجل زوار بسيط في فرونت بيج .

إنشاء فورم بريدي

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

أنشئ موقعاً جديداً كما تعلمت في الدروس السابقة , ومن ثم من جديد اختر صفحة أو ويب ومن ثم قوالب الصفحة , من قوالب الصفحة اختر نموذج المعلومات أو formmail بالنسبة للفرونت بيج باللغة الإنكليزية ومن ثم موافق , الشكل ( 15 - 1 )



الشكل ( 15 - 1 )

download.php?img=5083

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

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


 

download.php?img=5084

شرح برنامج ws_ftp

مقدمة:

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

سوف تتعلم الآن كيفية الاتصال مع موقعك عن طريق إدخال كلمة المرور واسم المستخدم وهذه العملية تتم بسهولة تامة .

عند فتح البرنامج سوف تظهر لك هذه النافذة :


 

download.php?img=5085

ضع هنا ftp موقعك.

في الغالب يكون كالتالي:

ftp.sitename.com

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

2- ضع هنا اسم المستخدم لموقعك.

3- ضع هنا كلمة المرور لموقعك.

4- استخدم هذا الخيار لحفظ كلمة المرور.

قم بالضغط عل زر OK بعد التعبئة البيانات.

سوف يبدأ البرنامج الآن بالاتصال مع الموقع، انتظر بعض الوقت إلى أن تظهر لك ملفات موقعك.

نقل الملفات :

ملاحظة مهمة جداً : نشر الملفات يجب أن يتم إلى المجلد public_html وليس على الجذر الرئيسي , أي جميع ملفات الموقع يجب أن تكون ضمن هذا المجلد .

بعد أن تكون قد أنهيت الاتصال مع موقعك، تظهر لك ملفات موقعك إلى يمين البرنامج كما هو مبين في الصورة التالية


 

download.php?img=5086

هنا توجد ملفات جهازك والتي سوف تقوم بتحميلها إلى موقعك .

2- هنا توجد ملفات موقعك .

3- يستخدم هذا الزر لنقل أي ملف من موقعك إلى جهازك بعد أن تكون قمت بتعيين الملف أو الملفات التي ترغب بنقلها ثم الضغط عليه.

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

الأزرار :


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

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

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

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

4- يستخدم هذا الزر لتحديث صفحات الموقع ويتم ذلك فقط بالنقر على هذا الزر.


 

download.php?img=5087

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

التراخيص :

التراخيص ثلاث مجموعات وهي :
1 - المالك ( Owoer )
2 - المجموعة ( Group )
3 - العالم ( World أو Other )

كيفية إعطاء التراخيص :

1- قم بتحديد الملف الذي ترغب بإعطائه الترخيص.

2- انقر بالزر الأيمن بالفأرة على الملف المعين ، تظهر لك مثل هذه القائمة المجاورة :

اختر من القائمة chmod UNIX كما هو مبين في الصورة السابقة .



3- ثم قم بإعطاء التراخيص حسب ما طلب منك في البرنامج الذي ترغب بتركيبه.

وهذا بيان للتراخيص وكيفية وضع الأسهم في كل منها:

الترخيص 755:

image052.gif


download.php?img=5089

التحكم بصيغة الملف الذي ترغب بنقله:

كل ملف من الملفات التي ترغب بنقلها يجب نقله بصيغة معينة ، ولمعرفة كيفية التحكم بصيغة الملف الذي ترغب بنقله أنظر إلى الصورة التالية :


هذه الصورة تبين أنواع الصيغ التي يمكن نقل الملفات أو الصور بها ، وهي تنقسم إلى نوعين ، وهما :

1- ASCII : وهذه الصيغة تستخدم لنقل جميع الملفات النصية.

2-Binary : وهذه الصيغة تستخدم لنقل الصور من كل الأنواع (gif , jpg , png , bmp , tif , wmf .... ) وكذلك باقي الملفات ماعدا الملفات النصية.

ملاحظة : قم بوضع سهم على Auto إذا كنت ترغب أن يقوم البرنامج تلقائيا بتغيير صيغة الملف حسب نوعه .

كيفية التحكم بملف نرغب بنقله :

1- قم بتعيين الملف الذي سوف نضع نوع الخاصية له.

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

3- إضغط على زر نقل الملفات




 

تم تعديل بواسطه قنديل الصياد
رابط هذا التعليق
شارك

إضافة شريط متحرك لصفحة الويب

1- نفتح الفرونت بيج ونضيف جدول من صف واحد وعمود واحد ..
2- من إدراج >> مكونات الويب web component

webb11.jpg

3- نختار شاشة إسمية بالضغط عليها مرتين ، بتظهر لنا هذه النافذة

webb123.jpg

من هنا نقدر نضبط إعدادات الشريط المتحرك :

توجد أيضًا أيقونة ( نمط ) :
بعد كتابة النص نختار نمط >> تنسيق
ونضبط إعدادات النص الفنية ( لونه - نوع الخط ......... )

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

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

 

تم تعديل بواسطه قنديل الصياد
رابط هذا التعليق
شارك

  • 1 month later...
  • 1 year later...

رائغ

رابط هذا التعليق
شارك

  • 5 months later...
  • 4 weeks later...
  • 2 months later...
  • 4 years later...
  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

زائر
اضف رد علي هذا الموضوع....

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • تصفح هذا الموضوع مؤخراً   0 اعضاء متواجدين الان

    • لايوجد اعضاء مسجلون يتصفحون هذه الصفحه
×
×
  • اضف...

Important Information