الفرق بين البرمجة الإجرائية و البرمجة المسيرة بالأحداث :

النسخ

1 طرق كتابة HTML محرر النصوص Text Editor مثل Notepad محرر بطريقة واجهة المستخدم الرسومية GUI Editor وهو محرر يكتب كود بلغة Dream تلقائيا باستخدام القوائم الموجودة فيه مثل برنامج Weaver 8.0 HTML 2 انواع محررات GUI 1 محررات الصفحة Page Editor وهو الذي يقوم بتصميم كل صفحة بطريقة منفصلة وتكون مهمة تنظيم الملفات والصور من مسئولية المصمم مثل MS FrontPage Express 2 محررات ادارة الموقع Site Management Editors وهو المحرر الذي يقوم بتصميم كل صفحة من صفحات الموقع وتكون مهمة تنظيم الملفات والصور من مسئولية البرنامج مثل Dream Weaver 8.0 تحميل وتشغيل برنامج Dream Weaver 8.0 Start ALL Programs Macromedia Macromedia DreamWeaver 8.0 Design or تظهر شاشة Workspace Setup Code لالختيار بين مساحة العمل لل 2 يعرض البرنامج الشاشة االبتدائية له كاالتي الجزء العلوي 3 اقسام وهي من اليسار األول لفتح الملفات السابق تخزينها والثاني انشاء نوعيات مختلفة من الملفات والثالث عينات Samples وهي ملفات سابقة التجهيز الجزء السفلي هو Help او فتح موقع شركة ماكروميديا للتعرف علي العديد من افكار وحيل البرنامج 2 والعكس التحويل من شاشة Design ال شاشة Code Windows قائمة Workspace Layout انشاء ملف جديد باختيار HTML من العمود الثاني في الجزء العلوي للشاشة االبتدائية

2 واجهة برنامج Dream Weaver القوائم < تحتوي علي الوظائف التي تتيح لنا التعامل مع البرنامج 2 االلواح < Panels توفر لنا مجموعة من الوظائف الموجودة في قائمة Windows 3 شريط ادوات االدخال < Insert Tool Bar يحتوي علي جميع المكونات التي يستطيع البرنامج ادخالها في الصفحة 4 شريط ادوات الصفحة Document ToolBar وهو لالختيار بين شاشة كل من code or split or design 5 شريط ادوات الكود Coding ToolBar وهو يظهر االدوات التي تتيح لنا التحكم في طريقة كتابة HTML 6 شريط االدوات القياسي Standard ToolBar وفيه االوامر الشائعة في القوائم 7 شاشة الكود Code Window لكتابة الكود بال HTML 8 شاشة التصميم Design Window يظهر فيها شكل التصميم 9 شريط الحالة Status Bar يحتوي علي بعض خصائص الصفحة 11 لوحة الخصائص Properties Panel لضبط الخصائص الخاصة بمكونات الصفحة انشاء موقع باستخدام Dream Weaver يقوم البرنامج بانشاء موقع اوال ثم بعد ذلك نضيف الملفات الي هذا الموقع والينشئ البرنامج ملفات منفصلة ادخال تظهر شاشة New Site Site Definition For قائمة Site Next اسم الموقع ثم اسم الموقع علي االنترنت 1 تظهر شاشة لتحديد التكنولوجيا التي سنقوم باستخدامها في الموقع النشاء الجزء الديناميكي الذي يتعامل مع قواعد البيانات < Next 2 تظهر شاشة لتحديد اذا كنا سنقوم بالتعديل في الموقع علي الجهاز وهو االختيار االفضل ام سنقوم بنقل الملفات الي الجهاز المسئول عن عرض الموقع علي االنترنت والتعديل من عليه 3 اختيار المجلد الذي سنقوم بحفظ الملفات فيه < Next 4 تظهر شاشة لتحيد الوسيلة المستخدمة لنقل الملفات علي الجهاز المسئول عن عرض الموقع علي االنترنت < Next 5 تظهر شاشة تقدم ملخص لكافة االختيارات التي تم تحديدها 6 بعد ذلك يقوم البرنامج بانشاء مجلد للموقع يظهر في لوحة الملفات باالسم الذي تم اختياره استخدام العينات في Dream Weaver 1 يتم استخدام العينات Samples النشاء الملفات بطريقة سريعة 2

3 File قائمة New General Starter Page من الجزء األيسر AS Saveيتم فتح شاشة Creat اختيار الصفحة المطلوبة من الجزء األوسط نختار اسم الملف Save 2 بعد ذلك نقوم بنسخ الصور الموجودة مع العينة لوضعها ضمن الموقع فنختار Copyمن الشاشة التي تظهر امامنا 3 تظهر لوحة الملفات وفيها اسم الموقع والمسار الخاص به واسم الملف واسماء الصور 4 في صفحة Design يظهر شكل الملف المختار ويظهر كود الصفحة بلغة HTML في شاشة الكود Code Window انشاء المجلدات ادخل اسم المجلد New Folder علي المكان المطلوب انشاء المجلد فيه CLKR انشاء الملفات ادخل اسم الملف New Folder علي المكان المطلوب انشاء المجلد فيه CLKR تنسيق النصوص 1 يتم تنسيق النصوص Text Formatting عن طريق لوحة الخصائص Properties Panel 2 بعد عمل التسيقات علي الملف يتم حفظه من قائمة File ثم الضغط علي F12 لفتح الملف في برنامج Internet Explorere تغيير عنوان الصفحة Page Title 1 فتح الملف ثم تغيير العنوان من المربع الموجود امام كلمة Title في Document ToolBar ادخال الصور ثم اختيار 2 عن طريق قائمة Imagesويفضل Insert وضع الصورة في نفس مسار صفحة الويب انواع الصور ) GIF Graphic Interchange Format ( ويستخدم عند تصميم الصور المتحركة او الصور بخلفيات شفافة Transparent 3

4 ) JPEG Joint Picture for Expert Group ( وهو اكثر االنواع استخداما لعرضه تنوع كبير وحجم الملف يكون صغير وهو انسب عند تصميم الصفحات ) PNG Portable Network Graphics ( وهو احدث انواع الصور وهو ملف صغير الحجم ويدعم خاصية الصور ذات الخلفيات الشفافة مثل النوع GIF 2 3 خطوات ادخال الصور انشاء مجلد يحتوي علي ملفات الصور بالضغط بالزر االيمن للماوس علي اسم الموقع ثم اختيار New Folder وكتابة اسم المجلد انشاء ملف جديد داخل المجلد CLKRاسم المجلد < File new < اسم الملف. HTML الضغط مرتين علي اسم الملف فتح الملف في Design Mode او الضغط علي زر Design من قائمة Insert اختار Images وحدد مسار الصورة وفي حالة اختيار صورة ليست في مجلد الموقع تظهر رسالة تفيد عمل نسخة من الصورة في مجلد الموقع بالضغط علي Yes ادخال بعض االعدادات للصورة تظهر الصورة في الملف المفتوح حاليا عرض الملفات Internet Explorer حفظ الملف من File Save 2 الضغط علي F12 لعرض الملف في برنامج محاذاة الصورة Image Alignment يتم وضع الصورة في يسار او يمين او وسط الصفحة من خالل لوحة الخصائص Properties Panel وذلك باختيار الصورة ثم استخدام االداة المطلوبة ابعاد الصورة Image Dimensions يمكن عرض الصورة بابعاد مختلفة عن ابعادها االصلية من لوحة الخصائص اسفل الصورة ثم استخدام (w) Widthلتغيير العرض والصفة ) H Hightلتغيير ( االرتفاع تغيير خلفية الصفحة Background Modify خلفية الصفحة اما لون او صورة لتغيير لون الخلفية فتح خصائص الصفحة Pageمن Properties قائمة اختيار اللون Background Color لتغيير خلفية الصفحة بصورة ثم الضغط علي زر 4

5 فتح خصائص الصفحة Pageمن Properties قائمة Modify ثم الضغط علي background Image ثم اختيار الصورة ثم نسخها الي ملفات الموقع تغيير مصدر الصورة Image Source من لوحة الخصائص Propertiesنقوم Panel بتغيير Source وكتابة اسم الصورة الجديدة او اختيار مكانها او الضغط علي عالمة Point to File واختيار الصورة وسحبها من لوحة الملفات الي المربع SCR رابط انشاء Link بين صفحة واخري فتح ملف في Design Mode وكتابة نص فيه ثم تظليله ثم من لوحة الخصائص يمكنننا تحديد الصفحة المراد فتحها عند الضغط علي هذا النص عن طريق كتابة اسم الصفحة امام المربع Link External Links انشاء رابط Link بين صفحة وموقع اخر فتح ملف في Design Mode وكتابة نص فيه مبتدأ ب http// امام المربع Link ثم تظليله ثم من لوحة الخصائص كتابة اسم الموقع Links انشاء رابط Link بين صفحة وبريد الكتروني فتح ملف في Design Mode وكتابة نص فيه ثم تظليله ثم من لوحة الخصائص كتابة اسم البريد االلكتروني مع كتابة قبله Mailto امام المربع Link استخدام الصورة كرابط Link فتح ملف به صورة ثم من لوحة الخصائص كتابة اسم الصفحة المراد االرتباط اليها ولتكن مثال ) Link المربع امام ( Link في الصفة info.html انشاء الجداول Tables يتم انشاء الجداول Tables عن طريق القائمة Insert ثم اختيار Table مع استخدام بعض الصفات Attributes مثل الصفوف واالعمدة وعرض الجدول وحد الجدول وهامش الخلية والمسافة بين الخاليا والعنوان والتعليق ومحاذاة التعليق والملخص ولون الخلفية ولون الحد وصورة الخلفية كذلك تستخدم ايضا بعض العالمات Tags النشاء الجداول انشاء جدول <Table> انشاء عنوان للجدول < Caption> انشاء صف في الجدول <TR> انشاء عنوان للبيانات في الجدول <TH> 5

6 انشاء نص عادي في الخلية <TD> خطوات انشاء جدول في ملف 1 انشاء ملف في الموقع 2 فتح الملف باضغط علي اسمه مرتين 3 الضغط علي زر Design وتأكد ان نقطة االدخال Insertion Point في اول الملف 4 فتح قائمة Insert ثم Table فيتم اظهار شاشة الجدول لتحديد خصائص الجدول 5 يمكننا ادخال او حذف صف او عمود جديد بعد تصميم الجول عن طريق قائمة Modify ثم اختيار Table 6 يمكن بالضغط علي الخلية Cell الدخال صف جديد قبل الصف الموجودة فيه ثم ايضا من قائمة Modify نختار Table ثم Insert Row او للحذف نختار Delete Row فيتم مسح الصف الموجود فيه االن 7 يكرر ماسبق بالنسبة لالعمدة مجموعة االطارات Frameset هي عبارة عن ملف منفصل كل مهمته هو انه يحتوي علي االوامر الخاصة بتحميل كل اطار Frame في الصفحة تقوم االطارات بتقسيم الصفحة الي اجزاء منفصلة عدد الملفات المطلوبة النشاء صفحة تحتوي علي اطارات يكون اكبر من عدد االطارات بواحد بحيث يكون هناك ملف لكل اطار وملف منفصل يكون بمثابة مجموعة االطارات Frameset انشاء صفحة ويب تحتوي علي اطارين Two Frams 1 انشاء ملف داخل مجلد الموقع كما سبق 2 فتح الملف في وضع Design 3 تحديد شكل الصفحة لتحتوي علي اطارين واحد علي اليمين واالخر علي الشمال اي الصفحة مقسومة جزئين ويتم ذلك عن طريق اختيار Layout من شريط االدخال Insert ToolBar 4 الضغط علي السهم الصغير الموجود بجانب عالمة االطارات ليتم اظهار اشكال االطارات الجاهزة في البرنامج 5 اختيار اسم مميز لكل اطار من االطارين يفترض البرنامج االسم Mainframe لالطار االيمن واالسم Leftframe لالطار االيسر 6 الضغط علي OK فيتم تقسيم الصفحة الي جزئين خصائص االطارات Frame Properties من خصائص مجموعة االطارات Frameset من لوحة الخصائص يمكن تغيير كل من 6

7 1 حدود االطار Frame Border عن طريق الصفة FrameBoarder وتحديد الحدود بال Pixels 2 لون االطار عن طريق الصفة Bordercolor 3 منع المستخدم من تغيير عرض االطارات عن طريق الصفة Noresize SHEET 7

8 )1( اشرح خطوات انشاء جدول في صفحة ويب مع عمل هامش للخلية ومسافة بين الخاليا... اسم الطالب التوقيع 8