مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
موقع الويب Website عبارة عن صفحة ويب Web Pageأو أكثر مترابطة مع بعضها ،لها اسم معين وعنوان انترنت ،Web Address ويمكن زيارته عن طريق الكمبيوتر أو الهاتف المحمول صفحة الويب Webpage هي مستند به محتوى إلكتروني ينشر على االنترنت ويتم عرضه عن طريق برنامج مستعرض انترنت الصفحة الرئيسية Homepage هي أول صفحة بموقع الويب والتي من خاللها يتم االنتقال إلى باقي صفحات الموقع عناصر صفحة الويب صور
فيديو
نصوص
ارتباط تشعبي :Hyperlinkاالرتباط التشعبي هو نص أو صورة يحتوي على رابط عند الضغط عليه ينقلك إلى هذا الرابط أنواع صفحات الويب
صفحات الويب الثابتة :Static Webpagesمحتواها معد مسبقا ويظل هذا المحتوى ثابتا وتستخدم لعرض المعلومات للقراءة فقط وال يمكن إجراء معالجة من الزائرين لمحتواها وتستخدم أوامر HTMLفي تصميم هذا النوع من الصفحات. مكونات صفحة الويب الثابتة :نصوص -صور -فيديو -ارتباطات تشعبية صفحات الويب التفاعلية :Interactive Webpagesصفحة تعرض محتوى يتيح التفاعل معه ومعالجته ويستخدم لتصميم هذا النوع من الصفحات أوامر HTMLباإلضافة للغات أخرى مثل لغة Java Scriptولغة .PHP مكونات صفحة الويب التفاعلية :هي صفحة تستقبل بيانات وتقوم بمعالجتها وإخراج نتائج للمستخدم
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
1
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
عمل رسم تخطيطي بسيط على الورق به صفحة
يتم حجز عنوان للموقع وتخصيص مساحة تخزينية للموقع على أحد أجهزة الخوادم ونشر الموقع على االنترنت
الويب الرئيسية للموقع وصفحات الويب المرتبطة بها تحديد البيانات والمعلومات التي في صفحات الويب كمعلومات وخدمات تقدم من خالل الموقع التخطيط
وهي أهم المراحل ويتم فيها: تصميم شكل الصفحة الرئيسية للموقع تحديد التنسيقات المختلفة لصفحات الويب مثل:
2 التصميم
1
النشر
5
مراحل تصميم وإنشاء موقع ويب
3
4
اإلعداد والتجهيز
إعداد وتجهيز البيانات النصية وحفظها داخل ملف نصي ووضعه داخل مجلد إعداد وتجهيز ملفات الصور وحفظها داخل مجلد
تحديد االرتباطات التشعبية داخل الصفحة الرئيسية وصفحات الموقع
إعداد أ /محمد عبد العزيز
التنفيذ
تحويل التصميم الورقي بالمراحل السابقة إلى صفحات ويب يمكن عرضها ببرامج المتصفحات إضافة البيانات ( نصوص - صور -صوت -فيديو ) في صفحات الويب إنشاء ارتباطات تشعبية بين صفحات الويب ليسهل التنقل بينها من خالل أوامر HTML
إعداد وتجهيز ملفات الصوت والفيديو وحفظها داخل مجلد
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
2
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
مرحلة اإلعداد والتجهيز إلنشاء ملف صوتي
مرحلة التنفيذ إلنشاء ملف صوت تحميل أحد برامج إنشاء ومعالجة الصوت مثل برنامج Audacityويمكن تحميله من: http://audacity.sourceforge.net/ بدء تسجيل الصوت بالضغط على زر التسجيل
.Record Button
قراءة البيانات التي جمعها في الملف النصي بواسطة الميكروفون. االنتهاء من التسجيل الصوتي بالضغط على زر إيقاف الضغط على زر Play
.Stop
لالستماع للصوت من خالل السماعات.
التعديل في الصوت أو بمقطع صوتي إضافة تأثير على مقطع صوتي :من قائمة Effectيتم اختيار أحد التأثيرات المطلوبة مثلRepeat - Reverse :
قص ولصق مقطع صوتي :نحدد المقطع الصوتي ومن قائمة Editنختار Cutونحرك مؤشر الفأرة للمكان المطلوب على الشريط الزمني ومن قائمة Editنختار .Paste حذف مقطع صوتي :نحدد المقطع الصوتي ومن قائمة Editنختار .Delete
تصدير ملف صوتي :من قائمة Fileنختار ،Export Audioنختار االمتداد المطلوب ونكتب اسم الملف ونحفظه في مجلد. أنواع امتداد ملفات الصوت
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
3
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
برامج معالجة وإنشاء الفيديو هي برامج تمكن المستخدم من إنشاء وتعديل ملفات الفيديو من خالل احتوائها على العديد من األدوات والوسائل والتأثيرات التي تساعد المستخدم في إنشاء ومعالجة لقطات الفيديو بطريقة سهلة وسريعة. أمثلة لهذه البرامج: برنامج :Movie Makerبرنامج مغلق المصدر يعمل على نظام تشغيل .Windows مميزات برنامج Openshot
يمكن انتاج فيديو ذات جودة عالية من الصور والخلفيات وإضافة مقاطع صوتية. واجهة تشغيل سهلة االستخدام يمكن من خاللها إضافة الصور والتأثيرات الصوتية بسهولة. إضافة تأثيرات للفيديو والمراحل االنتقالية كفواصل بين الصور بيسر وسهولة. إضافة نصوص للمشاهد. تحميل برنامج Openshot نحمل البرنامج من خالل الرابطwww.openshot.org : واجهة برنامج Openshot الشريط الرئيسي Main Toolbar
ملفات المشروع معاينة الفيديو
Project Files
Preview Window
التصغير والتكبير Zoom Slider
تبويب الوظائف Function Tabللتنقل بين: ملفات المشروع – المراحل االنتقالية –التأثيرات
شريط التحرير Edit Toolbar الشريط الزمني Timeline
إعداد أ /محمد عبد العزيز
رأس القراءة والمسطرة Play head/Ruler
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
4
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
الشريط الزمني Timeline رأس القراءة :Play Head يقرأ الكليب الحالي الذي يقف عليه في الشريط الزمني ليظهر في نافذة معاينة الفيديو
المسطرة :Ruler تظهر المدى الزمني الحالي بالشريط الزمني
الكليب الحالي: قد يكون صوت أو صورة أو لقطة فيديو
المسارات :Tracks تشبه الطبقات Layersحيث يتم وضع صورة أو صوت أو لقطة فيديو على المسار ويمكن استخدام عدد غير محدود من المسارات بالمشروع ويجب مالحظة أن المسار األعلى له األولوية في القراءة ليظهر ما به في الفيديو ثم المسار الذي أسفله وهكذا
خطوات إنشاء فيديو
استيراد ملفات الصور داخل البرنامج :بالضغط على
بالشريط الرئيسي Main Toolbarأو افتح قائمة File
واختر منها Import Filesلتظهر بعد ذلك في تبويب .Project Files ترتيب الصور على الشريط الزمني :بالضغط مع السحب للصور من نافذة ملفات المشروع Project Filesيتم وضع كل صورة في المسار Trackالخاص بها مع ترتيبها على حسب الرغبة في الظهور لتظهر في نافذة المعاينة. استيراد ملفات الفيديو داخل البرنامج :بنفس طريقة إضافة الصور ويتم إدراج ملف الصوت المدرج على أحد المسارات. معاينة الفيديو :بالضغط على الزر
في نافذة معاينة الفيديو ومشاهدة الفيديو.
مالحظات هامة يمكن إضافة أي عدد من المسارات بالضغط على زر
Add Trackبشريط التحرير.
يمكن إعادة ترتيب وضع مشاهد الفيديو (الصور/الصوت) بالمسارات من خالل الضغط عليها والسحب وإعادة ترتيبها على المسارات حسب الرغبة في أولوية الظهور. تحديد بدء االستماع لملف الصوت بالضغط مع السحب للصوت في مساره الزمني وتحديد موضعه. حفظ مشروع الفيديو
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
5
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول طريقة عمل اقتران للملف بالبرنامج Association )1الضغط بزر الفأرة األيمن على رمز الملف إلظهار القائمة الفرعية. )2من القائمة نختار Propertiesثم Changeثم .More Options )3اختيار Look for another app on this PCوالبحث عن مجلد تثبيت برنامج .Open Shot )4اختيار اقتران الملف Associationبالملف التنفيذي للبرنامج والحظ تغير رمز الملف
تعديل مشاهد الفيديو
التحكم في الفترة الزمنية لمشاهدة الفيديو يتم الضغط على الكليب الخاص بالصوت في المسار الخاص به بزر الفأرة األيمن في المكان الذي نريد تقسيم الصوت عنده. من القائمة المختصرة نختار األمر Slice Clipونختار إحدى الخيارات الثالث اآلتية:
إضافة تأثيرات Effectsلمشاهد الفيديو يتم إضافة التأثيرات على مشاهد الفيديو من تبويب Effectsبالضغط مع السحب على أحد مشاهد الفيديو في المسارات ويمكن التحكم في الفترة الزمنية لها. يظهر رمز التأثير على مشهد الفيديو ويظهر اسم التأثير إذا تم التأشير بالفأرة على رمز التأثير. كما يمكن حذف التأثير باختيار األمر Remove Effectمن القائمة المختصرة. إضافة مراحل انتقالية Transitionsلمشاهد الفيديو
يتم إضافة المراحل االنتقالية على مشاهد الفيديو من تبويب Transitionsبالضغط مع السحب على أحد مشاهد الفيديو في المسارات ويمكن التحكم في الفترة الزمنية لها.
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
6
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
إضافة نص للفيديو ( )1من قائمة Titleنختار األمر .Title
( )2اختيار قالب الخط من .Select a template
( )3تغيير نوع الخط .Change Font
( )4تغيير لون الخط .Text Color
( )5تغيير لون الخلفية .Background Color
( )6حفظ النص في ملف .Save
ملحوظة :الحظ انه يمكن وضع النص في بداية الفيديو أو بين المشاهد أو في نهاية الفيديو تصدير الفيديو ( )1الضغط على زر تصدير الفيديو Export Video
في الشريط الرئيسي أو من قائمة Fileنختار هذا األمر.
( )2يظهر المربع الحواري لتصدير الفيديو. ( )3حدد اسم الملف في File Nameومكان حفظ الملف في .Folder Path ( )4تحديد نوع امتداد ملف الفيديو في Targetوفيها نحدد جودة الملف (عالية -متوسطة -منخفضة) من .Quality ( )5الضغط على زر تصدير الفيديو. أنواع ملفات الفيديو ذات االمتدادات المختلفة توجد العديد من أنواع ملفات الفيديو ذات االمتدادات المختلفة مثل MP4 :و .AVI تختلف أنواع الفيديو ذات االمتدادات المختلفة من حيث -1 :المساحة التخزينية يتم تحديد امتداد ملف الفيديو على حسب االستخدام:
-2الجودة والنقاء.
ملفات :MP4حجمه متوسط ودرجة وضوحه أعلى من 3gpوتسطيع التصوير بأحجام مختلفة. ملفات :AVIحجمه كبير وجودة الفيديو أعلى من MP4ويناسب أجهزة الكمبيوتر وكاميرات الفيديو. الفرق بين حفظ مشروع الفيديو وتصدير الفيديو
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
7
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
تعريف لغة HTML أوامر لغة :HTMLتستخدم إلنشاء صفحات ويب وتسمى Tagsويقوم مستعرض االنترنت بتنفيذها. القواعد األساسية لكتابة األوامر بـ HTML ( )1إنشاء ملف نصي باستخدام أحد برامج محررات النصوص لكتابة أوامر HTMLوتعديلها. ( )2كتابة أوامر HTMLحيث يتم وضعها بين العالمتين > <. ( )3معظم األوامر لها بداية > < ولها نهاية > .</ ( )4حفظ الملف باالمتداد .htmأو .html ( )5فتح الملف المحفوظ باستخدام برنامج مستعرض انترنت لعرض صفحة الويب ومشاهدة نتيجة تنفيذها. ( )6ال يشترط كتابة أوامر HTMLبحروف كبيرة Capitalأو حروف صغيرة .Small التركيب البنائي للغة HTML ><html ><head المنطقة الخاصة بكتابة المعلومات للمتصفح حول الصفحة مثل عنوان الصفحة ></head ><body المنطقة الخاصة بكتابة المحتوى الذي سيظهر في الصفحة ></body ></html
باستخدام األمر ><title
إضافة نص لصفحة الويب
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
8
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
تغيير اتجاه الصفحة من اليمين لليسار والعكس وذلك عن طريق الخاصية dirالتي تستخدم مع األمر bodyوتأخذ قيمة من القيمتين rtlأو :ltr لتغيير اتجاه الصفحة من اليمين لليسار:
>"<body dir="rtl
لتغيير اتجاه الصفحة من اليسار لليمين (الحظ أن هذه هي القيمة االفتراضية التجاه الصفحة):
>"<body dir="ltr
توسيط النص في صفحة الويب باستخدام األمر ><center مثال :لكتابة كلمة مدرستي في منتصف الصفحة نكتب األمر:
> </centerمدرستي ><center
الكتابة بداية من سطر جديد باستخدام األمر ><br مثال :لكتابة كلمة "وزراة" في سطر و في سطر آخر "التربية والتعليم" نكتب:
وزارة > <brالتربية والتعليم
عمل مسافات بين الكلمات باستخدام األمر ;&nbsp
تنسيق الخط في صفحة الويب باستخدام األمر ><font مثال :لكتابة "الكمبيوتر وتكنولوجيا المعلومات" بخط نوعه andalusولونه أحمر وحجمه 5نكتب: > </fontالكمبيوتر وتكنولوجيا المعلومات ><font face="andalus" color="red" size=5 بعض التنسيقات األخرى لوضع خط تحت النص (مسطر )undelineنستخدم األمر > ،<uمثال: لجعل النص عريض (سميك أو مثقل) نستخدم األمر > ،<bمثال: لجعل النص مائل ( )italicنستخدم األمر > ،<iمثال:
> </uالصف الثاني اإلعدادي ><u
> </bالصف الثاني اإلعدادي ><b
> </iالصف الثاني اإلعدادي ><i
الخاصية bgcolor
الخاصية background هي خاصية تابعة لألمر bodyلوضع صورة كخلفية لصفحة الويب. عند كتابة اسم الصورة يجب كتابة امتدادها ايضا. يفضل حفظ الصورة التي نريدها كخلفية لصفحة الويب في نفس المجلد المحفوظ فيه صفحة الويب. مثال :لوضع صورة اسمها school.jpgكخلفية لصفحة الويب نكتب<body background="school.jpg"> :
إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
9
مادة الكمبيوتر وتكنولوجيا المعلومات 2 -ع -الترم األول
إدراج صورة كمحتوى في صفحة الويب باألمر > <imgوالخاصية src يتم ذلك باستخدام األمر > <imgمع الخاصية srcالتي تكون قيمتها اسم الصورة المراد إدراجها في صفحة الويب. يفضل حفظ الصورة التي نريد إدراجها في صفحة الويب في نفس المجلد المحفوظ فيه صفحة الويب. مثال :إلدراج صورة اسمها computer.pngداخل صفحة الويب نكتب<img src="computer.png"> : نستطيع التحكم في أبعاد الصورة من خالل الخاصية heightلتحديد طول الصورة والخاصية widthلتحديد العرض مع مالحظة أن وحدة قياس أبعاد الصورة هي البكسل .Pixel مثال:
>"<img src="computer.png" height="300" width="350
يمكن تحديد محاذاة الصورة داخل صفحة الوييب بالخاصية alignوالتي تأخذ القيم: :rightمحاذاة الصورة ألقصى يمين صفحة الويب
:leftمحاذاة الصورة ألقصى يسار صفحة الويب
:middleالنص يقع بمحاذاة منتصف الصورة
:bottomالنص يقع بمحاذاة الحافة السفلى للصورة
:topالنص يقع بمحاذاة الحافة العليا للصورة مثال:
>"<img src="computer.png" align="middle
إدراج صوت كخلفية صوتية لصفحة الويب باألمر > <bgsoundوالخاصية src
مثال :إلدراج ملف صوتي egypt.mp3كخلفية صوتية لصفحة الويب نكتب<bgsound src="egypt.mp3"> : يجب مالحظة أن برنامج Internet Explorerهو المستعرض الوحيد الذي يدعم تنفيذ األمر >.<bgsound يفضل حفظ ملف الصوت الذي نريد إدراجه كخلفية صوتية لصفحة الويب في نفس المجلد المحفوظ فيه صفحة الويب. إدراج فيديو داخل صفحة الويب باألمر > <embedوالخاصية src
مثال :إلدراج فيديو tech.aviداخل صفحة الويب نكتب<embed src="tech.avi"> :
هذا األمر يدعم ملفات الفيديو من النوع ).(.mp4 - .swf - .avi - .mov يفضل حفظ ملف الفيديو الذي نريد إدراجه داخل صفحة الويب في نفس المجلد المحفوظ فيه صفحة الويب. إدراج ارتباط تشعبي بصفحة الويب باألمر > <aوالخاصية href االرتباط التشعبي :Hyperlinkعبارة عن نص أو صورة مرتبط بعنوان وعند الضغط عليه ينتقل إلى هذا العنوان. هذا العنوان يمكن أن يكون داخل نفس الصفحة أو في صفحة أخرى داخل نفس الموقع أو في موقع آخر. الخاصية hrefيحدد من خاللها العنوان الذي يتم االنتقال إليه بعد الضغط على االرتباط التشعبي الذي تم إنشاؤه. مثال :إلدراج ارتباط تشعبي من خالل النص "وزارة التربية والتعليم" ينتقل عند الضغط عليه لموقع وزارة التربية والتعليم نكتب: > </aوزارة التربية والتعليم ><a href="http://www.moe.gov.eg مثال :إلدراج ارتباط تشعبي من خالل الصورة moe.jpgينتقل عند الضغط عليها لموقع وزارة التربية والتعليم نكتب: ><a href="http://www.moe.gov.eg"> <img src="moe.jpg"> </a إعداد أ /محمد عبد العزيز
مشرف مادة الحاسب اآللي بمدارس الهدى والنور
ت01115289259 :
10