مديرية التربية والتعليم بالدقهلية ا دارة منية النصر التعليمية توجيه الكمبيوتر مقدمة عن : Microsoft Expression Web الصف الخامس الابتداي ي العام الدراسي ١٤٣٠ ه - ٢٠١٠/٢٠٠٩ م ١٤٣١/ : حامد كيوان ا عداد ١ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
: مقدمة *يعتبر برنامج Expression Web من البرامج الجديدة حيث ا نه بديل لبرنامج Front Page ويطلق عليه Front Page الجديد *تعريفه : هو برنامج جاهز يستخدم في ا نشاء صفحات ويب لتصميم موقع بالكامل. فبرنامج Expression web هو الخليفه لبرنامج التصميم الشهير Front page و الذي اعتمدته ميكروسوفت سابقا كمنتجها لتصميم المواقع. *فواي ده: ١- السرعة في تصميم الموقع مما يوفر الجهد والوقت ٢- مجموعة القوالب الجاهزة ٣ -تحتوي واجهة البرنامج على العديد من المكونات التي تساعدك في التمام ا عمالك بصورة ممتازة. - *مميزات البرنامج : Panes Task ا نشاء صفحات على البرنامج -قدرة بشكل جذاب من خلال ا شرطة الا دوات ٢- سهولة الاستخدام ٣- ا نشاء موقع ويب كامل *التعرف على النافذة الافتتاحية لبرنامج :- Expression Web * لابد ا ن نلاحظ جيد ا ا ن طريقة تشغيل البرنامج لا تختلف عن باقي البرامج الا خرى ولكن بالنسبة لواجهة البرنامج تختلف بشكل ملحوظ من حيث ظهور صفحة ويب ) منطقة التصميم) والتي تتكون من : ٢ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
<body>-١: -٢-٣ التبويب Code التبويب Spilt جسم الصفحة وبها يظهر محتوى الصفحة : عند الضغط عليه يقوم بعرض الا وامر ) الا كواد التعليمات ( الخاصة بمحتوى الصفحة وتسمى هذه الاوامر بلغة XML CSS- HTML : عند الضغط عليه يظهر انقسام للصفحة جزءين جزء للكود والا خر للتصميم -تبويب تحرير الصفحات:- Design وبها محتويات الصفحة ا و الموقع الحالي وهي ا ول مايتم تنشيطه بنافذة البرنامج ويطلق عليها نافذة التصميم حيث تسمى التبويب Design ٤ **ا قسام المهام ال Task Panes تشبه في فكرتها ا شرطه الا دوات... و هناك العديد من ال Task Panes المفيده المدرجه مع البرنامج منها مثلا: List Task Pane Folder* وضعها الافتراضي في اعلي يسار البرنامج... و بها تظهر جميع الملفات التي تقوم بادراجها في موقعك... و تساعدك في ترتيبها و تنسيقها بشكل منظم Tool box Task Pane* و ضعها الافتراضي في اعلي يمين البرنامج... بها تظهر مجموعه من الادوات التي يمكنك اضافتها لموقعك مثل ال Frame و ال Layer و ال " Buttons سنري ٣ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
م* **البحث: تستخدم هذه الا مكانية في البحث عن كود ا و سطر في الصفحات ويتم ا دراج نافذة البحث من قاي مة Task Panes نختار find1 ا و find2 فتظهرا لنافذة ا سفل منطقة الكتابة وللتعامل مع النافذة نضغط فتظهر نافذة لكتابة النص المراد البحث عنه الزر على : **قبل ا نشاء صفحة لابد من التعرف على الويب ومكوناته الويب :يمثل *تعريفه Web كافةالمحتويات التي يتم مشاركتها ا و الانترنت. خلال عليها من الا طلاع وضعها ا و كونات الويب : النصوص -:Text هي العنصر الاساسي لتكوين محتويات مواقع الويب وعندما نقوم با عداد -١ الموقع على الويب فا نه با مكانك تنسيق النص كما في برنامج.word علم ا با ن المواقع في البداية كانت تعتمد على النصوص فقط. الصورImages :- وفق ا لتطور الويب ا صبحت الصور من العناصر الا ساسية في موقع ويب -٢ وعادة ماتكون الصور الموجودة في صفحات الويب من نوع GIF,JPG حيث ا ن هذه الا نواع من.Photoshop الصور تا خذ مساحة تخزينية صغيرة وفترة ا قل عند التحميل. ومن البرامج الروابط : تعتبر الراوبط هي الفكرة الا صلية في انشاء الويب حيث يتم من خلالها Links -٣ استعراض صفحات الويب بالتنقل من صفحة ا لى ا خرى ولاتخلو صفحة ويب من الروابط. الجداول ٤- Tables :تستخدم الجداول ا ساس ا في صفحات الويب لتنظيم البيانات الاطارات :Frames هي طريقة من طرق تصميم صفحات الويب وتعتمد على تقسيم نافذة المستعرض -٥ النماذج :Forms النماذج هي ا جزاء في شكل مستطيل الهدف منها تجميع بيانات من -٦ زاي ري موقع ويب وبعد ذلك يتم ارسال البيانات. ٤ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
النماذج الوساي ط المتعددة :مثل تسجيلات صوتية ا و لقطات فيديو ا وبث مباشر حيث Multimedia -٧ ا صبحت من العناصر الشاي عة في المواقع وقوى الجذب التعامل مع صفحات الويب :من قاي مة ويب ا نشاء صفحة ا ولا نختار ومنها Page تظهر نافذة بعنوان New File : One Page نختار منها التبويب نختار General تظهر عدة اختيارات نختار Website New ثم نحدد مكان لحفظ الصفحة من خلال الزر Browse وفي عدم تحديد مكان للحفظ فسوف Website يقوم البرنامج بحفظ الصفحة في المجلد ثم نضغط OK.My Documents/My Web Site تظهر word الصفحة Default.htm يتم الضغط عليها ضغطتين فنشاهد صفحة فارغة تمام ا وكا نها مستند عبارة قم الكتابة يمكنك الا ن الحبيبة مصر" في منتصف الصفحة وفي بداية السطر التالي نكتب علينا ا ن نخلص " العبادة الله " و نجتهد ونجد من ا جل ا ن يمن علينا االله بالنصر والتا ييد والا ن نقوم بحفظ ثم نقوم الصفحة " بمعاينة الصفحة من قاي مة File نختار Preview فنجد ا نه تم عرض الصفحة في المستعرض ونلاحظ ا ن عنوان الصفحة عبارة جسم ا و هيكل الصفحة ويقصد < body > Internet Explorer به محتوى الصفحة ونجد ا سفل الصفحة كما علمنا من قبل ما يسمى و Code و Spilt Design ٥ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
التعرف على الكود Code نلاحظ الكود التالي: هي مجموعةمن ا وامر لغة فهي HTML تشير ا لى الاختصار Language Hyper Text Markup وهذه الا وامر ا كثر أولا مما ساعد تسمى :إضافة الكود ) Tags فهي المسي ولة عن عرض البيانات على شكل صفحات في المستعرض ( الا وسمة على سرعة تصميم المواقع.وتم تطوير هذه اللغة ا لى الا تي في فتم اضافة XHTML -: XHTML حيث تتميز بتطوير <?xml version="1.0" encoding="utf-8"?> White space تكون اعلى آل صفحة قبل بداية الاخراج ويجب الا يكون قبلها مسافات ) تصدر عن بعض المحررات ثانيا تحديد نوع الصفحة والمصحح لها : من خلال الكود التى قد xhtml يعمل على اخبار المتصفح ان نوع هذه الصفحة هو DOCTYPEالذى والذى يساعده على محاولة تصحيح بعض الاخطاء اثناء العرض لذا يجب الا تخلو اى صفحة منها الكود التالي خاص باالاطارات :Frames DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head> </head> الكود التالي خاص باالرأس والتذييل Header and Footer <body> </body> ٦ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
ا نشاء موقع Web باستخدام القوالب Templates من قاي مه File اختر الا مر New ثم اختر Web Site. مربع حوار New تجد به تبوبين.. احدهما لا نشاء ا و ا دراج صفحه جديدة ا ما الا خر فهو لا نشاء موقع جديد اضغط علي Web كما في الشكل...الاختيار General به تجد ٣ ا نواع من المواقع يمكنك ا نشاي ها One Page Web Site سيقوم البرنامج با نشاء موقع يحتوي علي صفحه وحيده يمكنك قطعا ا ضافة ما تريد من صفحات بعد ذلك Empty Web Site يقوم البرنامج با نشاء موقع فارغ تماما Front يمكنك استخدام هذا الخيار ا ن كنت بدا ت تصميم موقعك علي برنامج Import web site Page و تريد الا ن تكملة تصميمه علي برنامج web Expression حيث سيساعدك هذا المعالج في ا تمام عمليه التحويل و النقل بين البرنامجين ا ما الاختيار Template فستجد به مجموعه من التصميمات الجاهزة التي يمكن التعديل فيها لتتناسب مع احتياجك الا ن من الجزء General اختر One Page Web Site حدد المكان الذي تريد حفظ موقعك به من الخيار Specify the location of the new web site بشكل افتراضي ا ذا لم تقم بتغير هذا الخيار سيتم حفظ الموقع في مجلد My Web Site الموجود داخل المجلد الشهير My document ٧ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
..... اضغط Ok ليبدا البرنامج في انشاء موقع من صفحه واحده كما يلي تلاحظ ا ن البرنامج قام بتسميه الصفحة ب Defualt.htm ملحوظة... يجب ا ن يحتوي موقعك علي صفحه واحده فقط بعنوان Defualt.htm او... Index.htm و هذه الصفحه ) يجب ( ان تكون هي الصفحه الري يسيه للموقع... حيث انه عندما تقوم برفع الموقع علي مساحه الاستضافه الخاصه بك يقوم السيرفر بتحميل اي من هاتين الصفحتين بشكل افتراضي في البدايه معتبرا انها هي الصفحه الري يسيه... ولا يمكن تغير هذا الاختيارالان لتبدا في الكتابة داخل صفحه موقعك الري يسية يكفي ا ن تضغط مرتين Double Click علي اسم الصفحة _ كما هو موضح في الشكل السابق برنامج اكسبريشن ويب هو احد برامج تصميم المواقع التي تستخدم تقنيه WYSIWUG و التي هي اختصار...What You See Is What You Get تترجم.. " ما تراه هو ما تحصل عليه " و المقصود بها... ا ن ما تراه ا مامك في مرحله التصميم هو نفس ما سيراه الزاي ر في مرحله التشغيل لهذا فان مرحله التعديل ا و بدء الكتابة في صفحتك الري يسية لا تختلف في كثير عن الكتابة داخل ا ي مستند من مستندات برنامج Word للغاية مهمة هناك خطوه يجب ان نتذكرها داي ما قبل البدء في الكتابه او تعديل الصفحه... و هي ضبط الصفحة قياس يمكننا ضبط قياس با ي الصفحة مساحه ا و من الطريقتين التاليتين:... ا ولا من شريط الحاله ا سفل في Status bar الصفحة كما يلي.. ٨ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
٦٠٠x ٩٥٥... Page Size ثانيا من قاي مه View اختر بشكل عام المناسبة المساحة ثم اختر و هي المكافي ه لدقه سطح مكتب ٧٦٨x ١٠٢٤Resolution Desktop هي الانسب و هي الشاي عه الان في معظم صفحات المواقع... ا ضف لصفحتك لها جمله الترحيب Hello World لعلك تريد ان تري صفحتك في وضع العرض.. ا ي كما سيراها الزاي ر من قاي مه File اختر الا مر Preview in Browser ثم اختر المساحة التي تريد المعاينة عليها كما يمكنك بسهوله الضغط علي ١٢F لو لم تكن قد قمت بحفظ صفحتك حتي الان سيقوم البرنامج بسو الك عما اذا كنت ترغب في حفظ الصفحه قبل معاينتها ام لا... بالطبع ستختار نعم **اضافه صفحات جديدة لموقعك... هناك طريقتين لا ضافه صفحات جديده للموقع.. من قاي مه File اختر الامر New ثم منه اختر الامر... Page كما تري هناك الكثير انواع الصفحات التي يمكنك انشاي ها... سنتحدث ا ن شاء االله عن كل نوع ا ما الا ن فا ختر HTML و التي تسمح لك باضا فه صفحه فارغة جديدة يجب ا ن يكون الشكل ا مامك مشابها لما يلي ٩ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
و كما هو واضح في الشكل تري صفحتك قد ظهرت في الجزء الخاص ب Folder List Task Pane بل يجب عليك ا ولا ان تقوم بحفظها لتظهر... اضغط Ctrl + S ا و اختر الا مر Save من قاي مه File ١٠ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
في الحالتين سيظهر ا مامك مربع الحوار التالي يمكنك بالتا كيد ا عطاء ا ي اسم تريد لصفحتك.. لكن من المفضل ا ن تحدد اسم يعكس محتوي الصفحة ا يضا لا يفضل استخدام المسافات في تسميه الصفحة كما لا يفضل ا ن تستخدم اللغة العربية في تسميه الصفحة بعد تحديد اسم لصفحتك... اضغط... Save و لاحظ ظهورها في الجزء الخاص ب Task Pane Folder List حفظ الموقع و ا نهاء العمل لاحظ انه يجب ا ن تقوم بحفظ كل صفحه علي حدا... و الا ن لا غلاق الموقع اختر الا مر Close Site من القاي مه File لاحظ ان الامر Close يقوم با غلاق الصفحه الحاليه فقط و لا يقوم با غلاق الموقع كاملا كذلك الامر Open حيث يقوم بفتح صفحه واحده و ليس كامل ملفات الموقع ضبط خواص الصفحه ١١ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
Properties يمكن الوصول لمربع حوار خصاي ص الصفحه Page Properties عن طريق الامر من قاي مه File page Properties ا و عن طريق اختيار الا مر بعد الضغط كليك يمين في الصفحة مكان علي ا ي في التبويب General... Title لكتابه عنوان الصفحه كما سيظهر في شريط العنوان title bar وقت التنفيذ Page Description و Keywords كان يتم استخدامهم قديما عندما كانت محركات البحث تراجع القيم الموجوده بهم.. لكن الان لم تعد محركات البحث تعمل بهذه الطريقه لذلك لم يعد من المهم ١٢ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
Page direction Background Sound لضبط ا تجاه الصفحه سواء من اليمن الي اليسار او العكس... لتضع خلفيه موسيقيه تعمل عند تحميل الصفحه. عدد مرات تكرار هذه المقطوعه او جعلها تعمل بلا انتهاء و ذلك من الخيار في التبويب كما يمكنك التحكم في ( Loop ( Forever Formatting... Background Picture لا ضافه صوره كخلفيه للصفحه تحت مجموعه الخيارات الخاصه بالالوان Colors Background لتغير اللون في خلفيه الصفحة Text لتغير اللون الافتراضي للنصوص... Hyperlink لتغير اللون الافتراضي لاي روابط موجوده في الصفحه... Visited hyperlink لتغير لون الروابط التي تم زيارتها سابقا Active hyperlink لتغير لون الروابط التي يتم الضغط عليها... Hovered hyperlink تغير لون الروابط عندما يتم الوقوف فوقها بالماوس بدون ضغط يعتبر التبويبين General و Formatting هما الاكثر شيوعا. التعامل مع النصوص تعرفنا فيما سبق علي كيفيه بدء مشروع جديد و كيفيه حفظه و استدعاي ه مره ا خري لاستكمال التعديل عليه كيفيه تنسيق النصوص داخل الموقع... نتعلم ١٣ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
بشكل عام لا تختلف مهارة تنسيق النصوص في برنامج Expression web عن مثيلتها في برنامج Word و ا ن كنا لابد ا ن نتذكر ا ن Expression web هو في الا ساس برنامج لا نشاء المواقع و ليس لتحرير النصوص مما يعني ا ن ا مكانياته في هذه النقطة ليست بالتا كيد مثل ا مكانيات برنامج ال.Word تنسيق الفقرات formatting Paragraphs :من قاي مه format اختر الا مرParagraph يمكنك من الخيار Alignment ضبط محاذاة النص ) يمين يسار توسيط... الخ ( و من الخيار Direction ضبط اتجاه النص سواء من اليمين ا لي اليسار Right to left ا و من اليسار ا لي اليمين left to right ا ما مجموعه خيارات Indentation فهي المسي ولة عن ا زاحة النص مسافة محدده سواء لليمين ا و اليسار كما يمكنك ا زاحة السطر الا ول فقط عن طريق الخيار First Line مجموعه خيارات Spacing هي ا لمسي وله عن المسافات بين كل Paragraph و الذي يليه.. حيث يمكنك ضبط المسافة بين ال Paragraph الحالي و الذي يسبقه من الخيار Before او المسافة بينه و بين الذي يليه من الخيار After كما يمكنك ضبط المسافات بين سطور ال Paragraph نفسه من الخيار Line Spacing ا و المسافات بين الكلمات نفسها و ذلك من الخيار Word لاحظ ا ن جميع القيم التي تدخلها ستظهر نتيجتها في الجزء الخاص ب Preview حيث يمكنك مشاهده نتيجة تعديلاتك قبل تطبيقها. تنسيق الخطوط Font Format من قاي مه format اختر الا مر font ١٤ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
يمكنك من صندوق الحوار هذا ضبط الخطوط المستخدمة في الصفحة و ذلك من الخيار Font كما يمكنك اختيار شكل الخط (تقيل Bold ا و ماي ل... Italic الخ ( من الخيار Font Style و ا يضا حجم الخط يمكنك اختياره من Font Size من الخيار Color يمكنك ضبط لون الخط ا ما مجموعه خيارات Effects فهي لا ضافه مجموعه من المو ثرات علي النص المحدد..في الجزء الخاص ب Preview ستري تا ثير جميع التا ثيرات التي تختارها و ذلك قبل التنفيذ. ا ضافة الترقيم الرقمي و النقطي اختر الا مر Bullets and Numbering من قاي مه Format تستطيع من خلال التبويبات Picture Bullets و Plain Bullets و Numbers اختيار ا سلوب من بين ٣ ا ساليب ا ساسيه ) صوره نقطي رقمي ( حيث يمكنك اختيار صوره معينه تستخدمها للترقيم في حاله استخدمت التبويب Picture Bullets ا و اختيار احد الرموز التي يوفرها لك البرنامج في حاله استخدمت التبويب Plain bullets ا و اختيار ا سلوب الترقيم الرقمي من التبويب Numbers ا ضافة الا طارات و التظليل: اختر الا مر Borders and Shading من قاي مه Format الترقيم الذي تريده ١٥ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
من الخيار يمكنك اختيار بين مجموعه للا طار الا شكال من مختلفة الذي ترغب بوضعه Style الا طارات بعض ا ن و لاحظ الا طار لون لاختيار لا يمكن تغير لونها Color الا طارات ا نواع بعض ا يضا و الا طار لتغيير سمك لا يمكن تغير سمكها الجزء ا ما Padding بين المسافة Width النص الداخلي و بين المحيط به الا طار و يختلف عن ال و النص الا طار بين المسافة هو الا خير ا ن في Margin التالية للصورة لننظر الخارجي حيث توضح بشكل ا سهل الفرق بين الاثنان Formatting ا وامر معظم ا ن ننوه ا ن بقي تنسيق النصوص يمكن الوصول ا ليها مباشره من شريط التنسيق ا دوات التنسيق اختر ا دوات شريط لا ظهار الا مر من القاي مه ثم منها اختر الا مر View Toolbars Toolbar Formatting خيارات النسخ و اللصق Copy / Past Properties عندما تقوم بنسخ نص من مصدر ا خر سواء كان هذا المصدر احد ملفات النصوص ا و موقع انترنت و تريد Copy ١٦ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
Expression Web لصق Past هذا النص في الصفحة التي تقوم بتصميمها علي ال يظهر لك مجموعه من الخيارات كما في الشكل Match Destination Formatting يحتفظ بجميع التنسيقات للنص الذي تم نسخه كما كان قي صفحته الاصليه Keep Source Formatting يقوم بتحويل تنسيق النص بما يتناسب مع تنسيق الصفحة المنسوخ ا ليها Remove Formatting حذف كافه التنسيقات من النص Keep HTML Only يحتفظ بكود ال HTML الموجود في النص مثل الروابط مثلا Keep Text Only تشبه Remove Formatting مع الفرق انه يتبع هذا الخيار ظهور Dialog Box يسمح لك بالتحكم في طريقه نسخ النص التعامل مع الصور ١- إضافة الصور ٢- تنسيق الصور ٣- شريط أدوات الصور ٤- تحويل الصور ألي Thumbnail ٥- أضافه روابط علي أجزاء محدده من الصورة )Hotspot البقعة الفعالة) الصور من أآثر العوامل التي تميز و تضيف لصفحة موقعك... لذا فمن المهارات الهام إتقانها هي آيفيه اضافه و تنسيق النصوص و التعامل مع خصاي صها. معظم من يجيدون التعامل مع برنامج تنسيق النصوص Microsoft Word لن يجدوا سوي خلافات بسيطة ما يبن التعامل مع الصور في برنامج..Expression Web و برنامج Word اضافه الصور ١٧ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
لا ضافة صورة إلي صفحه موقعك... من قاي مة Insert اختر الا مر Picture ثم From File " لاحظ انه لا يوجد Clip Art في برنامج "Expression Web أختر الا ن الصورة التي تريد إضافتها ثم اضغط Insert تلاحظ ظهور المربع الحواري التالي حيث الخيار... Alternate text يمكنك هنا أن تكتب جمله مختصره ستظهر مكان الصورة في حالة لم يتم عرض الصورة أثناء التصفح لا ي سبب من الا سباب....Long description هنا يمكنك وضع وصف مطول عن الصورة و ماذا تعبر أو ما لزوم وضعها في الصفحة... أيضا سيظهر هذا الوصف في حالة عدم عرض الصورة لا ي سبب. Show this prompt when inserting images في حالة إلغاء هذا الخيار لن يتم عرض هذا السو ال مره أخري عند إضافة الصور. الا ن تري الصورة و قد تم إضافتها للصفحة... اضغط الا ن لحفظ الصفحة الا مر Save من القاي مه File أو احفظ الصفحة با ي طريقه تفضلها. عند محاولتك حفظ الصفحة هذه المرة تلاحظ ظهور الصندوق الحواري التالي حيث يسا لك البرنامج عن طريق هذه النافذة عن المكان الذي تريد حفظ الصورة فيه... لاحظ أن الصورة لن تظل في المكان الذي إضافتها منه ) المكان المخزنة فيه علي الهارد ديسك ( بل سيتم نقلها ضمن ملفات الموقع و لذلك يسا لك البرنامج عن المكان الذي تريد حفظها فيه حيثRename... لتغير اسم الصورة قبل حفظها... Change Folder لتغير مكان حفظ الصورة "المكان الافتراضي يكون مع الصفحة التي أضفت الصورة فيها" Action Picture File Type Set ١٨ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
اضغط الا ن... Ok و قم بمعاينه الصفحة لتري الصورة آما إضافتها. تنسيق الصور تغير أبعاد الصورة... يمكنك ببساطه الضغط مره واحده علي الصورة... تلاحظ انه تم تحديد الصورة.. الا ن باستخدام مربعات التحجيم يمكنك الضغط و السحب Click and Drag لتغير حجم الصورة آما تريد... لاحظ الشكل أيضا تلاحظ وجود مربع حواري صغير به خيارين...Only Modify Size Attributes هذا الخيار يغير أبعاد الصورة فقط عند عرضها بدون حدوث أي تعديلات في ملف الصورة نفسه... Resample Picture to Match Size بالا ضافة لتغير أبعاد الصورة أثناء العرض يمتد التغير ليشمل التعديل في ملف الصورة نفسها محاذاة الصور يمكنك الضغط يمين Right Click علي الصورة و اختيار... Picture Properties أو ببساطه الضغط مرتين علي الصورة... Double Click أي آانت الطريقة فسيتم عرض صندوق حوار Picture Properties نبدأ مع التبويب General ١٩ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
من الخيار Picture ستري المسار الذي تم تخزين الصورة به... آما يمكنك استبدال الصورة بصوره أخري عن طريق الضغط علي Browse و اختيار الصورة الجديد ه من الخيار Accessibility يمكنك تعديل ال Alternate Text الذي قمت با دخاله عند إضافتك للصورة من الخيار Hyper Link يمكنك تحويل الصورة لرابط عند الضغط عليه يتم تحميل صفحه أخري و ذلك عن طريق الضغط علي Browse حيث سيتم فتح الصندوق الحواري الخاص ب Insert Hyperlink التبويب Appearance... Wrapping Style تستخدم لضبط المحاذاة الا فقية با حد الخيارات الثلاثة...None لا توجد محاذاة...Left محاذاة لليسارRight... محاذاة يمين أما الخيار Layout فيحتوي علي مجموعه من الخيارات منها Alignment و هو خالص بالمحاذاة الري يسية و يشمل علي مجموعه من الخيارات... Top و فيها يتم رفع الصور ليتساوي الحد العلوي لها مع السطر الذي وضعت في سياقه... Middle يصبح السطر الموضوع به الصورة في منتصفها تماما... Bottom يصبح السطر الموضوع به الصورة محاذي لحدها السفلي أما باقي الخيارات في هذه القاي مه فلم تعد ذات تا ثير مع برامج التصفح الحديثة نا تي للخيار Size حيث يمكنك منه تعديل مساحه الصورة آما تريد... لاحظ أن لكل حجم اختيارين... In Pixel حيث ستدخل قيمة مطلقه للعرض أو للارتفاع... In Percent ستدخل قيمة تتراوح بين ١ إلي... ١٠٠ مثلا إذا آنت تريد أن يظل داي ما عرض الصورة هو ٤٠% من عرض الصفحة مهما آانت الدقة Resolution التي تعرض فيها الصفحة ٢٠ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
... Keep aspect ratio عند تنشيط هذا الخيار في حالة قمت بتعديل الارتفاع مثلا ستجد البرنامج يعدل عرض الصورة اتوماتيكيا وضع أطار للصفحة أضغط مره واحده علي الصورة لتنشيطها ثم من قاي مه Format أختر الا مر Borders and Shading... تلاحظ ظهور المربع الحواري التالي يمكنك من هذه النافذة التبديل بين أآثر من شكل للا طار و ذلك من الا مر Style آما تستطيع اختيار لون محدد للا طار من الا مر Color أيضا سمك خط الا طار من الممكن التعديل به من الا مر Width أما الجزء Preview فسيعرض لك مباشره جميع التا ثيرات التي تختارها و لكن ماذا عن الا مر Padding الموجود في أسفل الصفحة ال Padding هو المسافة بين الصورة و الا طار الموضوع حولها...لاحظ أن ال Padding يختلف عن الهامش Margin فالهامش هو المسافة بين الا طار و بين الكلام المحيط بالصورة دعونا نلقي نظره علي هذه الصورة للتوضيح أآثر View من قاي مه Toolbar شريط أدوات الصور Picture Toolbox يمكنك أظهار أو إخفاء شريط أدوات الصور و ذلك باختيار الا مر شريط الا دوات Pictures ثم تحديد ٢١ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
هيا نتعرف علي الا وامر الموجودة في شريط أدوات الصور ( و وظاي فهم علي الترتيب : إضافة صورة من ملف تحويل الصورة إلي ) Thumbnail سيتم شرح ال Thumbnail تدوير الصورة جهة اليمين أو اليسار عكس الصورة في الاتجاه الا فقي أو الراسي زيادة / إنقاص التباين في الصورة زيادة / إنقاص السطوع في الصورة لقص جزء من الصورة لتحويل لون معين في الصورة إلي شفاف لتحويل الصورة إلي ) ابيض / اسود ( أو إلي ) شفاف ( في الفقرة التالية ٢٢ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
إضافة تا ثير ) بروز ( للصورة تغير مساحة الصورة في الملف إلي الحجم الحالي في الصفحة إضافة ) Hotspot سيتم توضيحها بعد فقرتين ( أعاده الصورة إلي وضعها قبل التعديلات إضافة Thumbnail ما هو ال Thumbnail... هو وضع نسخه مصغره من الصورة عند الضغط عليها يتم فتح الصورة الاصليه في صفحه جديدة و متي نحتاج لوضع الصورة آ... Thumbnail مثلا أنت تنشي صفحه آا لبوم صور... حيث سيتم عرض عدد آبير من الصور في هذه الصفحة.. لو انك وضعت الصور بحجمها و مساحاتها الحقيقية سيصبح تحميل هذه الصفحة عبا حقيقي يحتاج لوقت طويل آما ان تنسيقها سيكون صعب للغاية...لهذا تلجا إلي تحويل الصور إلي Thumbnail بالتا آيد أ تن رأيت أمثله آثيرة لهذه الصفحة... مثلا في مواقع الا هداء و إرسال آروت التهني ة.. تجد الكثير من الكروت معروض في صفحه واحده بشكل مصغر و عند الضغط عليه يتم فتح الكارت بحجمه الحقيقي في صفحه منفصلة أيضا في مواقع الصور و الخلفيات و في مواقع التعارف يتم عرض صور المشترآين بهذا الشكل آيف يمكن إنشاء ال Thumbnail ببساطه اضغط بالزر الا يمن الماوس Right Click علي الصورة المطلوب تحويلها ثم اختر الا مر Auto Thumbnail من القاي مه المختصرة أمامك.. لاحظ الشكل ستجد البرنامج قد قام بتصغير الصورة... قم الا ن بمعاينه الصفحة ) اضغط ١٢F للمعاينة ( و جرب أن تضغط علي الصورة المصغرة.. تجد المتصفح قد قام بفتح صفحه جديدة تحوي الصورة الاصليه بحجمها الحقيقي هل يمكنني التحكم في طريقه عرض الصورة ألا صليه... آلا لا يمكنك هذا في هذه المرحلة.. في المراحل المتقدمة من البرنامج سنتعلم معا آيف يمكننا فعل هذا أنشاء ال Hotspot أعتقد أنكم جميعا ستحبون هذه المهارة... ال Hotspot هو تحديد جزء من الصورة عند الضغط عليه يتم تحميل صفحه جديدة هو يختلف قليلا عن الرابط.. Link حيث انك في ال Hotspot تحدد جزء صغير من الصورة.. بمعني انه يمكنك تحديد عدة أجزاء علي الصورة تنقلك إلي عدة صفحات مختلفة لكي نستوعب المعني بشكل أعمق سنقوم في البداية باضا فه صورة آما تعلمنا في البداية ثم نظهر شريط أدوات الصور Picture Toolbox آما تعلمنا منذ قليل ستجد ٣ أيقونات تمكنك من تنفيذ ال Hotspot موجودة علي شريط الا دوات اختر الا داة الا ولي علي شكل مستطيل.. قم الا ن برسم مستطيل حول ) مصر ( عند الانتهاء من رسم المستطيل يفتح البرنامج لك مربع حوار Insert Hyperlink الذي تعرفنا عليه في المحاضرة السابقة.. قم بتحديد الصفحة التي تريدها و يمكنك إعادة نفس الخطوات لمجموعه من الا ماآن المختلفة علي الصورة تلاحظ ان البرنامج يوفر لك ٣ أدوات لا نشاء ال Hotspot و ذلك حتى تستطيع تحديد أي منتظمة أو غير منتظمة بسهولة منطقه سواء ٢٣ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
فالشكل المستطيل و الداي ري للا شكال المنتظمة أما الشكل الثالث فيمكنك من تحديد أشكال غير منتظمة ا ي تا تي قوة بمنتهي اليسر ما هي الروابط... موقع من مدي سهولة التنقل بين مختلف صفحاته و ا مكانيه الوصول لا ي من مواضيعه و الروابط هي تلك الخاصيه التي تمكنك من الا نتقال بين صفحات الموقع بسهولة ا و الروابط هي من العناصر الا ساسيه في اي موقع حتي الا نتقال لا ي صفحات خارج الموقع.... حيث يتم داي ما ربط صفحات الموقع ببعضها البعض حتي يسهل علي المستخدم الا نتقال بين ا قسام الموقع و الا ستفاده من كافه خدماته بكل يسر و سهوله. ا نشاء الروابط هناك عدة ا نواع من الروابط و لكن يتم ا نشاء اغلبها بنفس الطريقه ا نشاء رابط داخل ا نشي صفحه با ضافة قم الا ن ا لي ذلك جديدة نبدا الصفحة موقع جديد من صفحه واحده......... بعنوان About_us.htm بعض المعلومات عنك في صفحه About_us.htm نضع رابط في ا ن نحن نريد الصفحة الاسم مثل الري يسية default.htm About_us.htm جمله عند الضغط عليه... " من القاي مه "About Us المختصرة لاحظ ظهور مربع حوار باستخدام الا مر اختر هيا لنري كيف سنتمكن من ذلك هيا نستعرض معا كيف يمكننا و السن و تاريخ الميلاد و ما في بحيث يقوم بتحميل صفحه الصفحة الماوس قم بتحديد هذه الجمله ثم اضغط كليك يمين اصف الري يسية Right Click Hyperlink Insert Hyperlink كما بالشكل ٢٤ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
... الا ن نحن نريد ا ضافه رابط لصفحه About_us.htm التي تم اشاي ها فعليا في الخطوه السابقه ستلاحظ أن الصفحات التي قمت با نشاي ها ضمن موقعك بالكامل موجودة اختر منها صفحه Ok اختيار الصفحة اضغط About_us.htmبعد الا ن لتجربه الرباط الذي قمت با نشاي ه قم بمعاينه الصفحة الري يسيه عن طريق ضغط ١٢F لاحظ انه لتجربه الرابط يجب عليك الا نتقال لمعاينه الصفحه حيث لن يعمل الرابط في وضع التصميم الان نحن نريد ا نشاء رابط اخر في الصفحه الري يسيه لينقل المستخدم لصفحه بعنوان Contact_us.htm تذكر ا ننا لم ننشي صفحه Contact_us.htm بعد.. فهل يمكن ا نشاء رابط لصفحه في الموقع لم تنشي بعد ام اننا يجب ان ننشي ها اولا كما فعلنا مع صفحه About_us.htm كلا يمكنك ا نشاء رابط لصفحه لم يتم انشاي ها بعد.. هيا لنري كيف ا ضافه رابط لصفحه داخل الموقع لم يتم انشاي ها بعد... في الصفحة الري يسية قم باضافه جمله Contact US و التي سيقوم المستخدم بالضغط عليها باستخدام الماوس قم بتحديد هذه الجمله و اضغط كليك يمين Right Click من القاي مه اختر الا مر Hyperlink سيقوم البرنامج بفتح مربع حوار... Insert hyperlink و لكن كيف يمكننا اخباره ان الصفحه التي نريد الربط عليها لم تنشي بعد... من الجزء علي اليسار و المسمي :Link to ا ختر Create New Document ثم ا تبع الخطوات كما بالشكل ٢٥ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
بعنوان Contact_us.htm البرنامج قام ا ن الا ن لاحظ با نشاء صفحه جديدة... با نشاء كما قام الرابط في الصفحه الري يسيه الصفحة بمعاينه الا ن قم الري ييه و تا كد من ان الرابط الجديد يعمل جيدا صفحه Contact_us.htm يتم استخدامها في المواقع للتواصل بين زاي ري الموقع و بين فريق الا عداد... الخاص بالموقع.. سواء للا بلاغ عن مشكله او لطلب معين او لا بداء الراي الي اخره E-Mail الا ن نري دعنا كيف يمكن ا نشاء رابط يستخدمه الزاي ر لا رسال بريد الي فريق اداره الموقع ا ضافة... رابط للتراسل... For Your Feedback Click Here في صفحه Contact_us.htm قم با ضافه جمله قم بتحديد جملة Click here با ستخدام الماوس... ثم اضغط كليك يمين Right Click Hyperlink لاحظ ظهور مربع حوار insert Hyperlink من الجزء الخاص ب :Look in اختر و اختر الامر E-mail Address لاحظ الشكل ٢٦ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
الا ن يمكنك ا ضافه عنوان الا يميل الذي ترغب في استقبال الرساي ل من زاي ري الموقع عليه كما يمكنك تحديد عنوان الرساله ايضا في الجزء الخاص ب Subject بعد الانتهاء اضغط... Ok قم بحفظ الصفحه ثم معاينتها و لاحظ عند الضغط علي جمله Click here يتم تشغيل برنامج الا يميل الموجود بالجهاز ملاحظه... هناك طرق ا كثر تقدما يمكن بها التواصل بين الزاي رين و اداره الموقع ا لا ا نها مبنيه كليا علي استخدام الا كواد و لغه جافا... و سنتعرض ان شاء االله لها بالتفصيل في مرحله متقدمه من تصميم المواقع في نفس الدوره الحاليه حتى الا ن استطعنا ا ن ننشي ٣ انواع من الروابط و لكن كلها داخل موقعنا... تري هل يمكن انشاء رابط لموقع اخر... تابع معنا اضافه روابط لصفحات خارجية لنفترض الا ن انك تريد ا نشاء جزء خاص في موقعك تسميه "مواقعي المفضله " مثلا.. حيث ستضع به اسماء المواقع المفضله عندك كما يمكن للزاي ر ان يضغط علي اسم الموقع لنتقل اليه.. لنعود الا ن للصفحة الري يسية في الموقع الذي نعمل عليه حاليا.. و دعنا نضيف بها هذه الفقره ٢٧ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
hyperlink..... كلمة قم بتحديد الا ن Click here باستخدام الماوس ثم اضغط كليك يمين و اختر تماما كما فعلنا في المرتين السابقتين ثم من مربع حوار Insert Hyperlink تابع الخطوات كما بالشكل قم بحفظ ثم معاينه الصفحه و اختبر الرابط لتتا كد من عمله... ا ضافه روابط لجزء داخل نفس الصفحه ا ذا كانت الصفحة تحتوي علي مقال علمي او موضوع طويل مقسم الي مجموعه العناوين... سترغب في وضع فهرس في بدايه الصفحه ينقل الزاي ر عند الضغط علي اي عنصر من عناصره الي هذا العنصر ٢٨ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
مباشره دون الحاجه اللي قراءة الموضوع كاملا في في البدايه دعنا ننشي صفحه جديده و ليكن اسمها Subject.htm الصفحة هذه بداية سننشي فهرس كما بالشكل.دعنا نري سويا كيف يمكننا اضافه مثل هذا الرابط بعد كتابه ٤Chapter ا ضغط Enter بشكل متكرر لا ضافه مجموعه من السطور الفارغه... ستظل تضغط Enter حتي تختفي السطور السابقه تماما من امامك ثم اكتب جملة ١Beginning of Chapter او يمكنك كتابه اي جمله تعبر بها عن بدايه الفصل الاول سنقوم الان بتعريف هذه الجمله و اعطاي ها عنوان مميز حتي يمكننا الربط عليها... و تسمي هذه العمليه ال Bookmark قم بتحديد جمله ١Beginning of Chapter باستخدام الماوس... ثم من قاي مه Insert اختر الامر Bookmark ولاحظ ظهور مربع الحوار التالي.. في خانه Bookmark name اكتب ١Chapter الا ن انتهينا من ا عداد الجزء الذي سنقوم بالربط عليه.. نعود الان لبدايه الصفحه... قم بتحديد كلمة ١Chapter التي كتبتها في الفهرس... ثم كليك يمين و اختر الامر Hyperlink و تابع الخطوات كما بالشكل ٢٩ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر
الصفحة بمعاينه الا ن قم بعد حفظها و تا كد من ان الرابط يعمل... ٣٠ من ٣٠ حقوق الطبع والنشر محفوظة إدارة منية النصر التعليمية توجيه الكمبيوتر