تعـــــلم FrontPage XP مع العــــويد ..للتصميم

[العويد]

بما ان الاخ مشعااب طلب مني كيفية تدريس هالبرناامج فأنا ان شالله مستعد,,,,,

الدرس التاالي واللي هو قدامكم مسويه من زماان في منتدى سبيع الآخر,,,,,

ولكن لم يجد من يتاابعه وتووقفت لبعض الاسباب,,,,,

هالحين ان شالله اللي يبي شي ولا شي عن هالبرناامج انا تحت الخدمه,,,,,

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

وبالنسبه للبرناامج ال FrontPage Xp يجي مع ال Office يعني لازم تشرون ال اوفيس عشان البرنامج يجي معه طبعا ال اوفيس اكس بي,,,,,,

اللي بيحااول يدوره اكيد بيلقااه عند نااس كثيرين لأن يجي معه ال Word , Access and powerpoint

يعني حرام الواحد يشريه جديد ب 500 ريال على مااظن طبعاا اصلي,,,,,

يالله نبداا الدرس ورااح انقل اللي اناا سويته في المنتدى الآخر عشان ماابدأ من جديد واتعب نفسي مره ثاانيه,,,,,,

وعند انتهى نقلي للجزء اللي خلصته في المنتدى الآخر ,,,, راح ان شالله ابداا اكمل اللي انتو تبونه وراح اعلمكم ان الجزء اللي راح اشتغل عليه هناا واقول تراا هذي بداايتي للدرس في منتدانا الحاالي,,,,,

بالتوفيق ان شالله للجميع,,,,,



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

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

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

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



راح اوزع الشرح على كذا صفحه ..

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



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

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

1- افتح قائمة View .

2- قم بإلغاء تحديد خيار Views Bar لإزالة علامة الاختيار من أمامه ( أنظر الشكل التالي



سيختفي بذلك شريط العرض وهذا يفيد من أجل الحصول على عرض في برنامج فرونت بيج يماثل عرض متصفح الانترنت . يعني نفس عرض ال enternet explorer[HR]



هالحين كيفية انشاء موقع web :

قم بإنشاء أول موقع ويب خاص بك :

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

2-حدد خيار Empty Web ومن بين القوالب المتاحة حدد One Page Web .

3- حدد موقع مجلد الويب وضع اسماً لموقع الويب الذي تقوم بإنشائه .

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



l[HR]


كيف نقوم بإنشاء ملف HTML يجب معرفة هالنقطة لأهميتها :


لإضافة صفحة جديدة ( يعني امتداد الصفحه HTM OR HTML ) في موقعك ، قم بما يلي :

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

2- سوف يعرض لك المربع New قوالب متنوعة لصفحات ويب من خلال Page templates .

عندما تقوم بإنشاء الصفحات ستأخذ هذه الصفحات الأسماء الافتراضية للملفات مثل new page1.htm و new page2.htm لذا احفظ الصفحات بأسماء أخرى أكثر وضوحاً حتى يمكنك التعرف عليها بسهولة .


--------------------------------------------------------------------------------



خلصنا من الاساسياات ان شالله الدروس القادمه كيفية ادخال النصوص ,,الجداول ,,الصور وغيرها

يتبع ---------------------------->>>>>>

[العويد]

اللي مااتظهر معه الصور يسوي right click بالمااوس على الصوره ويختاار Show Picture او عرض صوره بالعربي,,,,,

ودمتم,,,,

[العويد]

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

البرناامج يمكنك من الخصائص التاليه :

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

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

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

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

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

6-تغيير الخط الظاهر على الشاشة . يعني تبيه يمشي يسار يمين فوق تحت
..
--------------------------------------------------------------------------------



هالحين كيفية اضافة نص الى WEB ويب :

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

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

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

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

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

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

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

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




h[HR]
إضافة الألوان والسمات :

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

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

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

2- من قائمة Format اختر أمر Font لتفتح مربع حوار Font كما في الشكل :




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

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

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

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

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

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

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

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

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

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

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

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

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 لحفظ وتطبيق التغييرات التي أجريتها على المسافة بين الأحرف .

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



--------------------------------------------------------------------------------




يتبع ----------------------->>>>

[العويد]

اسف للآطاله اخواني

نكمل معكم الشرح

اليوم نتكلم عن كيفية معالجة الصور ( تذكر مدرس الفنيه )

ماعلينا نبدا :



graphics : هذا يعني في الاده عنصر مرئي غير نصي يظهر على صفحات الويب . اما بالنسبه لمصطلح الصور في الغالب إلى الملفات الرسومية التي توجد في صيغتين هما gif and jpg >

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

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

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

حطوا هالنقطتين في رووسكم طيب لأنها مهمه جدا :

هالحين كيفية استخدام الصور بواسطة ال FrontPage program :

follow the instructions ( اخس يالانقليزي ) يعني اتبعوا التعليمات :

1- افتح صفحه جديده NEW ..

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

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

4-انقر زر OKEK وستظهر الصورة في الصفحه ...

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





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

7- احفظ الصوره بالنقر على okek ....


--------------------------------------------------------------------------------



هالحين كيفية تعديل الصور :

هناك عدة مميزاات يهيئها لك البرناامج ليسهل عملية تعديل الصور ومن اهمه هذه المميزات :

1-تتحكم في طول وعرض الصووره كماتريد في صفحة الويب ..

2-اضاافة ارتباط تشعبي الى الصوره contact to onther Link ياهووه ادعس

3-تتحكم في محاذاة النص على الصووره يعني في اي مكان على الصوره تبيه ..

طيب كيف تبي تعدل صوره ناخذ مثال <<----بالاكسنت السبيعي ) :

حدد مكان الصوره اول شي بعدين من قائمة Format ، حدد أمر Properties لتفتح مربع حوار Picture Properties يعني خصائص الصوره ..كمافي الشكل التالي :



لإضافة ارتباط تشعبيLink to إلى الصورة ، اكتب عنوان الخاص بالارتباط التشعبي الذي تريد ربطه مع الصورة يعني مثال http://www.sobe3.com/vb ، وذلك باستخدام Default Hyperlinks . في مربع الحوار قد يكون عنوان أحد المواقع الأخرى على الويب أو ملفاً أخر على الموقع الخاص بك ، ويمكنك استخدام Browse لتحدد عنوان الموقع الذي تريد إذا لم تستطع أن تتذكر العنووان URL.....

اذا تبي تعديل أبعاد الصورة حدد علامة تبويب Appearance لتفتح النافذة الخاصة بها . ....ثم قم بتغيير قيمتي العرض والارتفاع لتعدل أبعاد عرض الصورة .ثم اخيرا انقر زر ok لحفظ تغييراتك وإغلاق مربع حوار Picture Properties (خصائص الصوره ).....

يتبع ------------------------------>>>>>

[العويد]

اقووول واحد يجيبلي مويه ترا تعبت :

اقول ندخل للموضوع على طوول من دون اي مقدماااات <<---خربت الاخلاق ::

هالحين نتااابع موضووع الصور



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

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

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

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

هالحين كيفية انشااء مجمووعة نمااذج مصغره للصوره :

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





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

طيب نبي ننشئ نموذج مصغر لإي صوره مثلا :

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

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

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

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





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

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

2-حدد علامة تبويب Auto Thumbnail لتفتح اللوحة الخاصة بها كما هومبين في الصوووره :



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




طيب كيف تبي تسووي خلفيه لموووقعك :

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

طيب الخطووات اللي جايه كيف تسوي خلفيه بسيطه :

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

2-اضغط علامة تبويب Background ....

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

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

كيف نسوي وننشئ العلامه المائيه WATERMARK ::

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

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

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

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



Finally Done >>>خلالالاص اليووووم خلصنا ....



--------------------------------------------------------------------------------


يتبع بعدييييييييييييين ------------------------->>>>

[العويد]

خلاص اللي فووق هو بسس اللي اناا شرحته في المنتدى الاخر وان شالله راح ابدأ بدروس طاازه ;),,,,,


أتمنى من الأخ ابو عمر اقفاال هذا القسم على غير الأعضاااء حتى تتم حفظ الحقوق,,,,,

اخوكم العويد,,,

[خالد الشماسي]

ممتاز الله يوفقك يا العويد

بس لازم تعرف طلابك وتطلب منهم يطبقون الدرس ومن ثم تبدأ في الدرس الثاني

وأنا واحد منهم :)

[مشعاب]

ما شاء الله

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


يالله اطلب منا وحنا حاضرين

كيف نطبق يالعويد؟؟؟؟؟؟


قل وحنا حاضرين



شكرا لك ابو عمر على المزامله

[العويد]

ههههههههه ,,,

وش اللي قل وانتوا حااضرين,,,,,

ليش واللي فوق كله مهوب عااجبك :),,,,,

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

واذاا خلصت منهاا ان شالله ابداا بدرس ثااني,,,,,,

شوف البرناامج هذاا تصمم فيه الشكل اللي تبي لموقعك بس مهوب الموقع لأنك لازم تسويلك صفحه عشششان اذاا خلصت من التصميم تأخذ الكود و تلصقه في موقعك في القسم المخصص للتصميم,,,,,,

الفرونت بيج سهل شغلات كثيره,,,,

قبل كنت اسوي موقعي بال Html codes بس جااء هالبرناامج وريح العاالم ,,,,,

فيه طبعا برناامج ال Dearmwaver نفس الشي للتصميم بس احسن مميزاته اقوى بس صعب على المبتدئين,,,,,

مشعاب انت توكل على الله وطبق اللي فوووق واي مشششكله توواجهك اسألني ولا تستحي من شي حتى لو السؤال باايخ ماافيها شي ان الواحد يتعلم,,,,,,

بالتوفيق وفي انتظاار اسئلتكم,,,,,

[مشعاب]

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

ويش لون اخليكم تشوفونه؟


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