ﻊﻗﻮﻣ ﻦﻣ ﻒﻠﻤﻟﺍ ﻞﻴﻤﺤﺗ ﻢﺗ ﺔﻠﺻﻮﺒﻟﺍ …kenanaonline.com/files/0097/97409/expression_web.pdf · ) ﺖﻧﺎآ ءاﻮﺳ ﺎﻬﻴﻠﻋ

موقع من الملف تحميل تم التقنية البوصلة

http://www.boosla.com

http://www.boosla.com/

http://www.boosla.com/

Chapter 1 Web Design Using Expression Web

- ٢ -

مدخل إلي تصميم المواقع

Web Developer و الـ Web Designerالفرق بين الـ

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

Web Designer مصمم المواقع

مسئول عن تنسيق الصفحات ووضع ... Web Layoutهو الشخص المسئول عن وضع الشكل العام للموقع

هو المسئول عن تعديالت التصميم اللي بيحتاجها الموقع الضافه أيضا... االستايل الخاص لكل صفحه ..يه اقسام او ابواب جديده ل

Expression Webبيعتمد في عمله علي احد برامج تصميم المواقع الشهيره مثل anguageLarkup Mext Typer H (HTML (بيفضل دوما انه يكون علي علم بلغه

دارة إتواصل بين الزائر و بها ال يوجد المواقع اللي عند بتنتهيحدود قدرات مصمم المواقع ... بسهوله اآتر

دراه رسال بيانات إلمحتوي اللي فيها فقط بدون حاجه إل الءو المواقع اللي الزائر بيحتاج يدخل يقراأ.. الموقع او التفاعل مع محتويات الموقعالموقع او التسجيل في الموقع

نذآر منها علي ، المختصه بتصميم المواقع واحد من البرامج قنتتانت بحاجه لتكون مصمم مواقع لكي سيبيل المثال

Expression Web - Front Page -Dream weaver

Flash و الـ Photoshopتكون مصمم مواقع متميز محتاج تنمي مهاراتك في استخدام الـ أما لكي animation

Web Developerمطور الموقع

مثال علي آده.. وظيفته اضافه مجموعه االآواد المختلفه اللي بيحتاجها الموقع

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

لمصممبرمجه النموذج ده هي مسئوليه المطور مش ا.. غير مناسبه في حاله تم ادخالها بشكل خاطئ

...مثال تاني و بتالقي انك اغنيه فقط في اليوم٢٠ فيه موقع مشهور لتحميل االغاني بيحدد قدرتك علي التحميل بـ

الكود المسئول عن .. بمقدار واحد عداد التحميل الخاص بك غنيه بيتم زياده قيمة أفعال آل ما بتحمل الموضوع ده هو مسئوليه مطور الموقع و ليس المصمم

مجموعه من لغات البرمجه المخصصه للعمل علي محتاج تتعلم Web Developerتكون مطور مواقع لكي و

PHP و Java النت

مهارة التصميم و يمتلك ال يشترط ان مطور الموقع • ..العكس ايضا صحيح

Guestبعض الخدمات الشهيره مثل دفتر الزوار •

Book ا بشكل يتم توفير األآواد الخاصه بهبمثاليمكن مصمم المواقع من اضافتها لموقعه بسهوله

سنتحدث بتفاصيل اآثر عن هذه النقطه في ... ان شاء اهللا١١الفصل


- ٣ -

٣مصممين المواقع بيتم تقيمهم من خالل ألن ، بتعتبر المستوي األول في تصميم المواقعالحاليه دورتنا

مستويات لالداء

Expression Web او Front Page مثلتصميم برامج فقط استخدام مصمم مواقع يستطيع .. مستوي أول Photoshopستخدام برنامج أمصمم مواقع يجيد .. ثاني مستوي زي مثال Animation Programsستخدام برامج التاثيرات المتحرآه أمصمم مواقع يجيد .. ثالث مستوي

Flash MX

فعليا ، من األجاده و التميز في مجال تصميم المواقع علي درجهوصلت ألبتكون الثالث بوصولك للمستوي و Photoshop بتاعها ببرنامج الـLayoutلو تاملنا في آل المواقع اللي بندخلها هنالقي انها بيتم تصميم الـ

في معظم الوقت فيها اضافات متحرآه بسيطه

في البدايه تكون عارف تستخدم اي محتاج _ Photoshopالتصميم باستخدام الـ _ و الجاده هذه المهارة Building Web Layout Using Photoshop اسمها متخصصهمن برامج تصميم المواقع و بعدها تاخد دوره

Web Administratorو ماذا عن

الحقيقه ان مدير ... عنده مهارة التصميم وال مهارة التطوير ؟؟ Administrator مشرف الموقعيا تري بقي

!!ال يشترط فيه قدرته علي التصميم او التطوير الموقع

هو المسئول عن مراقبه اداء الموقع و مراجعه االحصائيات المتعلقه به _ عاده صاحب الموقع _ مدير الموقع و غيرها من مسئول عن التبادل االعالني مع الموقع.. مسئول عن ايجاد افكار جديده لتطوير الموقع ..

ا عالقه بالتصميم او التطويرالمهام التي ليس له

مهتم بانه يعرف آل حاجه عن الموقع و يصدر توجهيات .. رئيس مجلس االدارهفي عمله شبيه بيعني .عشان يحاول يطور و يحسن من اداء و من ترتيب الموقع

... مراحل تصميم الموقع

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

Idea or subjectتعريف الفكره ... اوال

شائه إن تحديد نشاط الموقع و الهدف منسواء آنت بتصمم موقع لنفسك او لحساب شخص ما الزم يتم

منها، و ده ألآتر من سببو تحديد نشاط الموقع مهم جدا ... يه بمنتهي الوضوح من البدا

التصميم هيتأثر بمحتوي الموقع او الهدف من من المهم تعريف نشاط الموقع قبل البدء في التصميم الن انشائه

...فمثال

تميز فانت محتاج آده يكون التصميم بي.. لو الموقع هيكون بهدف الدعايا و الترويج لمنتج معين

و غيرها من العوامل اللي تساعد في جذب و بعناصر الجذب المختلفه من الوان و مؤثرات حرآه اثاره اهتمام الزائر و تفاعله مع المنتج المعروض او الفكره اللي بيتم الترويج ليها

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

للكثيرين اي انطباع بالملل او بجو الدراسه االآاديميه اللي غالبا ما بتكون ممللهالزائر يبعد عن


- ٤ -

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

او يعمل تحديث محدود بيكلمكهيكون متحمس قوي لو وجد انه آل ما هيحتاج يضيف مقال بسيط

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

و نذآر من هذه االسباب، و أن آانت معظم هذه االسباب متواجده فقط في المواقع التجاريه و الربحيه

منها و األقتصاديهلمعرفه مدي الجدوي الماديهدراسه الفكره جيدا .١ خاص للموقعServerاصفات المطلوبه في خطط االستضافه المتوفره او التوجه لشراء تحديد المو .٢ داره و تحديث الموقع بعد أطالقهصر لفريق العمل المطلوب تواجده إلعمل ح .٣ طالق الموقعإعمل حصر لألوراق و الموافقات الرسميه المفروض الحصول عليها قبل .٤

Make your Designوضع التصميم ...ثانيا و مع أختالف الغرض من الموقع لكن ... بتاع موقعك تفكر في التصميم هتبدأ السابقه ناء علي الخطوه ب ...نذآر منها مثال ،في اي تصميم عشان يعتبر تصميم جيديجب توافرها هناك خطوط عريضه ف

.وقعيوفر للزائر سهولة الحرآه بين الصفحات و الوصول الي جزء من المحتوي الخاص بالمأن .١المكونات ذات االحجام الكبيره مثل الصور يتميز بالسرعه في التحميل و ده عن طريق االبتعاد عن .٢

.الكثيره بدون داعي .المحتوي بالنسبه لمدير الموقعفي تحديث يوفر سهولة .٣عاده التصميم من البدايه او إلو اقسام جديده للموقع بدون الحاجه توسعات ه اضافه بسهوليمكن .٤

.صميم جديد توضع

...و غيرها من الشروط اللي هنتكلم عليها بالتفصيل لما نبدا في التصميم الفعلي

Before you goقبل النشر ... ثالثا خطوات اساسيه ما ٣هناك ف... لموقع الق اإط و لدعايا لبدء ان الوقت قد حانال يعني أبدا أنتهاء التصميم إ

األطالق الفعلي للموقع بين االنتهاء من التصميم و بين

برابط ف ال يؤدي الي صفحه او ما يعرLinkالتاآد من عدم وجود اي اخطاء في التصميم آوجود رابط .١ Broken Hyperlinkمكسور

آد ان شكل الموقع في وقت التنفيذ مطابق تمام لشكله علي برنامج التصميم او في وقت لتاا .٢ التصميم

( باختالف المساحه اللي هيتم عرضه عليها سواء آانت لف ن يختلآد من ان شكل الموقع لتاا .٣800 x 600 ( او )1024 x 768 ( أو غيرها

Get Your Own Domain and Host Space احجز اسم و مساحه موقعك... رابعا

و غيرهم من اسامي www.masrawy.com او www.yahoo.comمثال ... هو اسم الموقع Domainالـ ..اقع و اللي بيشترط طبعا انه ميكونش مستخدم قبل آده المو

.comبقي اشهرهم هو امتداد تو لكن ي ... Edu و org و net وcomمتداد للدومين فهناك مثال إفيه اآتر من

ده _ جنيه مصري ٥٠ دوالر سنويا اي ما يقارب الـ ٨ ومين بأسمك مقابل مبلغ مادي يعادليتم تسجيل الد _ مره راجعته علي حسب اخر

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

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


- ٥ -

..فانت محتاجها عشان تحط عليه ملفات الموقع بتاعك Host spaceاما المساحه و بما ان الموقع هيتحط .. من ناحيه ان ليه مساحه Excel او Word الن الموقع ميختلفش عن اي ملف

عشان تسمح بالوصول للموقع علي النت مش علي جهازك يبقي الزم تأجر مساحه تحط عليها ملفاتك دي ...في اي وقت سواء آان جهازك متصل باألنترنت ام ال

...و هناك نوعين من االستضافه ، تضافهاو االس... Host Packageاالسم و المساحه مع بعض بنسميهم استضافه مجانيه .١ استضافه مدفوعه .٢

Pay Web Hosting ...االستضافه المدفوعه

Web Hostingتتم مقابل اشتراك سنوي بتسدده الحدي الشرآات اللي بتقدم خدمه االستضافه للمواقع

طانقمجموعه و بتتميز االستضافه المدفوعه بـ...

com.sitename.wwwقع علي الصوره حجز اسم المو .١

تحكمك الكامل في وضع اعالنات من عدمه في الصفحه آما ان عائد االعالنات يكون آامال لصاحب .٢ الموقع

لوحه تحكم مميزه تستطيع منها متابعه و التحكم في موقعك .٣

ه وجود مشاآلللمساعده في حالالوقت وجود دعم فني طوال .٤

تسجيل الموقع بأسمك مع أمتالك آافه حقوق ملكيه و اداره الموقع لك .٥

free web hostingاالستضافه المجانيه

حيث تقوم بعض المواقع باعطائك مساحه مجانيه تستطيع استغاللها لوضع ... تماما مثل خدمه االيميل ... موقعك

الموجود ٥الـ عن زمن مضي لكن بشكل عام لن تجد المميزات تطورت خدمه االستضافه المجانيه آثير جدا

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

نها توفر لك اسم فمثال المواقع التي ستجد لها لوحه تحكم قويه و ال تضع اعالنات في صفحاتك ستجد ا

موقع طويل للغايه او صعب التذآر

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

...و هكذا

Publish your webالنشر و الدعايا ...خامسا

.. هي الخطوه االخيره في مشروع تصميم الموقع

... وم فيها برفع الموقع علي المساحه التي قمت بحجزها و تبدا في الدعايا لموقعك و الترويج لهحيث تق

لنقل الملفات الي المساحه الخاصه )FTP )rotocolPransfer Tile F يتم استخدام بروتكول نقل الملفات اردت تحديث موقعكو يسمح لك هذا البرتوآول بنقل الملفات الخاصه بالموقع بسهوله آلما... بك

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

منها المجانيه و منها ... اساليب آثيره و طرق متنوعه و للدعايا .لدعاياطالق موقعك تبدأ مرحله اإبعد المدفوعه و منها المعتمده علي محتوي موقعك نفسه


- ٦ -

بشكل ستكون لنا عوده مع توضيح طرق و اساليب الدعايا اآثر تفصيال بعد االنتهاء من المشروع العملي آامال في

ان شاء اهللا١٢الفصل

ماذا بعد... و االن

او اذا آان ... أذا آان الهدف من انشاء موقعك أآادميا مثل نشر محاضرات للطلبه او نشر ابحاث تقوم بها و لكن اذا آان ، لمرحله نشر الموقعيعتبر هو الموقع الرسمي لمشروع معين فقد انتهي العمل بوصولك

... و لنبدأ باألهم ، الغرض من الموقع ربحيا فمازال امامك الكثير لتتعلمه

آيف يتم الربح من الموقع

منها... هناك طرق مختلفه للربح المادي عن طريق موقعك

أن يقدم الموقع مجموعه من الخدمات المدفوعه االجر .١ار الهواتف المحموله بين الشباب في تقديم خدمات ارسال الرسائل فبعض المواقع استغل انتش

القصيره و الشعارات و غيرها بمقابل ماديآما ان هناك بعض المواقع التي توفر لك امكانيه شراء الموسيقي التي تفضلها او االفالم التي

ترغب في مشاهدتها بمقابل ماديو تبقي مهاره صاحب الفكره في تقديم خدمه منفرده . ..و تختلف الخدمات و نوعيتها اختالفا آبير

ال يقدمها غيره و في نفس الوقت يحتاجها زوار المواقع

الربح عن طريق األعالنات .٢و ، ان وضع اعالنات لشرآه او لمنتج او حتي لموقع اخر هو احد مصادر الدخل للكثير من المواقع

م فيه االعالنيختلف سعر االعالن بأختالف شهره الموقع الذي يت

سنتحدث بعد قليل عن آيفيه تقييم الموقع و تحديد ترتيبه علي مستوي العالم

Goggle Adsenseاألشتراك مع .٣

خدمه للكثير من أصحاب المواقع تتمثل في توفير مجموعه من األعالنات التي Goggleتوفر شرآه بل مادي يتقاضاه من شرآه يستطيع صاحب الموقع اضافتها في صفحات موقعه و ذلك في مقا

Goggleفي أطار اتفاقيه و شروط محدده

الربح عن طريق قواعد البيانات و قوائم البريد .٤و عند ... عندما يحقق الموقع درجه من الشهره يبدا عدد الزوار المشارآين في الموقع في الزياده

االسم و الميل و تسجيلك في الموقع فأنت تقوم بتسجيل بعض البيانات الخاصه بك مثل آما انه مع زيارتك المتكرره للموقع يستطيع الموقع اخذ بيانات عن نسخه ، االهتمامات و غيرها

نظام التشغيل الذي تستخدمه و آذلك اصدار المتصفح و غيريها من البيانات حيث تساعدها في انشاء احصائيات... و هذه البيانات تهتم بها مجموعه من الشرآات الدعائيه

E-Mailوجيه دعايتها بدقه اعلي عبر الـ خاصه و تو لتحقيق هذه الفائده تتقدم شرآات الدعايا بعروض لشراء البيانات المسجله لقواعد البيانات في

.المواقع الشهيره


- ٧ -

تعتبر هذه الطريقه سيئه للربح و قد يقاطع الزائرين الموقع اذا اآتشفوا ان الموقع يبيع بياناتهم آما ان معظم المواقع الشهيره ترفض بيع قواعد بياناتها لهذا السبب ، واقع المهتمهالخاصه للم

ses Uf oerm Tأتفاقيه االستخدام ( في الذي يعتبر انتهاآا لخصوصيه المستخدم بل و تأآد دوما TOS ( التي تسجلها في الموقع لن يتم ارسالها او مبادلتها مع اي جهات اخريعلي ان البيانات

تيب العالمي للمواقعالتر

و ، تحدثنا في النقطه السابقه عن األعالنات و انها و احده من الطرق التي تحقق عائد مادي لصاحب الموقع لكن آيف يستطيع الُمعلن ان يحدد مدي شهره هذا الموقع

يره سواء حيث يمكنك ترتيب المواقع الشه... هناك جهة عالميه لتحديد ترتيب المواقع علي مستوي العالم

او ترتيب المواقع الشهيره وفقا للغه ، او ترتيب المواقع وفقا للتوزيع الجغرافي ، علي مستوي العالم المستخدمه

هذه المؤسسه أحصائيات يمكنك استخدام ... فمثال اذا آنت تريد الدعايا لمنتج ما لشرآه داخل مصر

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

com.alexa.www المسئوله عن ترتيب المواقع علي الرابط التالي اليكسايمكنك زياره موقع مؤسسه

١تمرين محاضره ... بحيث تذآر لكل موقع سرد في تقرير مجموعه من المواقع التي توفر استضافه مجانيه للمواقعأ

الذي يوفره الموقعDomain ـشكل ال .١ مساحه االستضافيه المجانيه .٢ عدد االعالنات التي سيضعها الموقع في صفحتك و اماآنها .٣ لنقل البيانات من الجهاز للموقع FTPهل يدعم الموقع اسلوب .٤

ود مثل هذه البرامج ما زلت فهل مع وجServerبعض البرامج تمكنك من ان تحول جهازك الشخصي الي

بحاجه لخطط أستضافه قبل إطالق موقعك؟

مصادر الربح لهذه _ في التقرير _ قم بعمل تقرير مبسط حول مجموعه من المواقع الشهيره توضح به المواقع؟

ما هي العناصر التي تؤثر علي تحسن او تأخر ترتيبك؟، بإصدار ترتيب عالمي للمواقعAlexaتقوم مؤسسه


- ٢ -

واجهة البرنامج

...سنتعرف في هذه المحاضره علي ما يلي

تثبيت البرنامج .١ و التعرف علي واجهة المستخدمتشغيل البرنامج .٢ تخصيص واجهة البرنامج .٣

a. تعامل مع الـ الـ Task Pans b. الموقع لتحريراألوضاع المختلفه Design / Code / Split c. رطه األدواتأخفاء أش/ أظهار

ضبط مساحه الصفحه .٤

Program Setupتثبيت البرنامج ابدء برنامج التثبيت

Product Key سيقوم البرنامج في اول خطوات مرحله التثبيت بسؤالك عن الـ Continue آما بالشكل ثم أضغط Product Keyأدخل الـ


- ٣ -

لبدء Install now علي اجراء عمليات التثبيت للبرنامج فيمكنك الضغط سريعا علي اذا آنت لست معتادا

التثبيت الفوري للبرنامج فهو يمكنك من تغيير المكان االفتراضي لتثبيت البرنامج علي جهازك آمان يمكنك Customizeاما الخيار

التحكم في تثبيت آل ملحقات البرنامج او بعض منها

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


- ٤ -

و التعرف علي واجهة المستخدمتشغيل البرنامج

لبدء البرنامج

Start / All programs / Microsoft Expression / Microsoft Expression Web

يمكنك تشغيل Classical Start Menuأذا آنت تستخدم البرنامج آالتالي

Start / Programs / Microsoft Expression / Expression Web

... برنامج ألول مره عند تشغيل ال

... يطلب منك ادخال بياناتك حوارسيظهر لك مربع ليس هو البرنامج Expression web يخبرك بان برنامج حواربعد ان تقوم بادخالها سيظهر لك مربع

االفتراضي لتصميم المواقع علي جهازك سنجيب بنعم ..ان آنت تريد اعتباره آمحرر افتراضي لصفحات الويب لديك و يسئلك


- ٥ -

Program Interface واجهة البرنامج انها ال تختلف آثيرا عن واجهة مجموعه برامج الـ Expression Webمن السمات المميزه لواجهه برنامج

Officeالحظ الشكل، الشهيره

Title Barفستجد أوال شريط العنوان

Menu barيليه شريط القوائم Tool barليه اشرطه االدوات ت

Status barآما ستجد في اسفل نافذه البرنامج شريط الحاله

Task Panesآما ستجد تعميم اوسع ألستخدام الـ منها مثال، المفيده المدرجه مع البرنامجTask Panesو هناك العديد من الـ

Folder List Task Pane

...وضعها االفتراضي في اعلي يسار البرنامج و تساعدك في ترتيبها و تنسيقها بشكل منظم... ع الملفات التي تقوم بادراجها في موقعك جميبها تظهر

Tool box Task Pane

... ضعها االفتراضي في اعلي يمين البرنامج " Buttons و الـ Layer و الـ Frameبها تظهر مجموعه من االدوات التي يمكنك اضافتها لموقعك مثل الـ

"ستفيد من وجود هذه االدواتسنري الحقا آيف سا


- ٦ -

Interface Customization تخصيص واجهة البرنامج

Task Pansالتعامل مع الـ

Panesآما تمكنك من أخفاء اي .. التي تريد أظهارها Task Paneختيار الـ إ من Task Panesتمكنك قائمه معروضه حاليا

عن Task Paneآما يمكنك عرض المساحه المعروض بها الـ

الشكلالحظ .. Maximize Windowطريق الضغط علي

عن طريق Task Paneيمكنك تحريك و تغير مكان اي آما الضغط علي اسمها بالماوس مع السحب حتي تضعها في

... المكان الذي تريد

تغير نمط التحرير

اط لتحرير و تعديل موقعك ثالث انمExpression Webيوفر لك Design View

ما تراه هو " او WYSISYG ( What You See Is What You Get)في هذا النمط تقم بأنشاء موقعك بطريقه "ما تحصل عليه

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

Code View

لبناء موقعكHTMLحيث يمكنك أستخدام لغه ... Codeيمكنك في هذا النمط أنشاء موقعك باستخدم الـ


- ٧ -

Split View .. د ما تقوم بأدخاله اوال بأوال جنبا الي جنب لتري آيف يتم تكويCode و الـ Design يمكنك عرض نمطي الـ

Codeاو لكي تقوم بأدخال بعض التعديالت عن طريق الـ

و للتبديل بين أنماط التحرير المختلفه ثم اختر نمط Page أختر االمر Viewمن قائمه

التحرير الذي تريده

عن آما يمكنك التبديل بين أنماط العرض الثالثه سب أسفل صفحه طريق أختيار نمط العرض المنا

التحرير

أظهار و أخفاء أشرطه األدوات عدد من Expression Webيوفر لك

أشرطه االدوات المفيده

و يمكنك أظهار اي من أشرطه االدوات ثم View من قائمه Toolbarبأختيار األمر

أختيار شريط األدوات الذي تريدهو ألخفاء شريط األدوات مره أخري يكفي

ن تختاره مره أخري من نفس القائمها


- ٨ -

ضبط مســـاحه الصفحه

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

نه هو حيث اx 768 1024 و هو المكافئ لسطح المكتب x 600 955و لكن ينصح دائما بأختيار مقياس األنسب حاليا للعرض عند قطاع آبير من المستخدمين

و لضبط مقياس الصفحه

Page Size أختر األمر Viewمن قائمه

ثم أختر المساحه التي تريدها


- ٩ -

في اسفل الصفحه آما يليStatus barمن شريط الحاله آما يمكنك ضبط قياس الصفحخ

Expression Webحتي اآلن قد تكونت لدينا فكره عن آيفيه التعامل مع واجهة المستخدم في برنامج آما أستطعنا ضبط مقياس الصفحه المناسب لكي نبدأ العمل و التصميم

نبدأ بأنشاء اولي مواقعناهيا بنا االن

"إنشاء موقعك األول"تابعوا الفصل الثالث


- ٢ -

نشــــاء موقعك األولإ

...سنتعرف في هذه المحاضره علي ما يلي موقع جديدبدء .١ معاينه الموقع .٢ أغالق الموقع .٣ فتح موقع ألستكمال العمل .٤ اضافه و حفظ صفحات جديده للموقع .٥

بدء موقع و يب جديد

ةأيضا تعرفنا علي مكونات واجه... يله تعلمنا سويا في الفصل السابق آيفيه تثبيت البرنامج و تشغ ... Expression Webالمستخدم لبرنامج

فلنبدأ االن في إنشاء اولي مواقعنا

لبدء موقع جديد

اختر االمر Fileمن قائمه New ثم اختر Web Site

Newالحظ ظهور مربع الحوار


- ٣ -

..تبوبين علي Newمربع حوار يحتوي

Page ... إلنشاء أنواع مختلفه من الصفحات Web ... إلنشـاء موقع

Web نتأآد من اختيارينا لتبويب نريد االن إنشاء موقع جديد

Generalاالختيار شائها انواع من المواقع يمكنك ان٣به تجد

One Page Web Site

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

Empty Web Site

يقوم البرنامج بانشاء موقع فارغ تماما

Import web site و تريد االن Front Page يمكنك استخدام هذا الخيار ان آنت بدأت تصميم موقعك علي برنامج

حيث سيساعدك هذا المعالج في اتمام عمليه التحويل و Expression webاآماله علي برنامج النقل بين البرنامجين

Templateختيار األ

فستجد به مجموعه من التصميمات الجاهزه التي يمكن التعديل فيها لتتناسب مع احتياجك

ل السهله إلنشاء موقع جيد احد الحلوTemplateتعتبر الـ

في وقت قصير و بدون مجهود

قبل أن تتقن Templateلكني ال أنصحك بالتعامل مع الـ المهارات المختلفه لتصميم المواقع حتي تكون قادرا فعال

علي االستفاده منها بالشكل الكامل

One Page Web Site اختر General الخياراالن من

Specify the location of the new web site تريد حفظ موقعك به من الخيارحدد المكان الذي

الموجود داخل My Web Siteبشكل افتراضي اذا لم تقم بتغير هذا الخيار ستم حفظ الموقع في مجلد

My documentالمجلد الشهير

... Okاضغط لألنتهاء

..يجب ان يبدو الشكل امامك قريب مما يلي ... يبدا البرنامج في انشاء موقع من صفحه واحده


- ٤ -

Defualt.htmتالحظ ان البرنامج قام بتسميه الصفحه بـ

يجب ان يحتوي موقعك علي صفحه واحده فقط بعنوان

Defualt.htm او Index.htm .... و يتعامل السيرفر الذي تقوم برفع ملفاتك عليه بأعتبار ان

الخاصه بموقعكWelcome Pageهذه هي الـ

علي Double Clickداخل صفحه موقعك الرئيسيه يكفي ان تضغط مرتين أضافه النصوص االن لتبدأ في الصفحهاسم

تعديل موقعك

و التي هي اختصار WYSIWUGبرنامج اآسبريشن ويب هو احد برامج تصميم المواقع التي تستخدم تقنيه What You See Is What You Get ... ما تراه هو ما تحصل عليه .. " تترجم"

ان ما تراه امامك في مرحله التصميم هو نفس ما سيراه الزائر في مرحله التشغيل... و المقصود بها

عن الكتابه داخل اي آثيرلهذا فان مرحله التعديل او بدء الكتابه في صفحتك الرئيسيه ال تختلف في شئ

ل لعلك الحظت وجود شريط ادوات شديد الشبه بذلك الموجود في بWordمستند من مستندات برنامج Wordبرنامج

اما .. ان شاء اهللا سنتحدث بالتفصيل عن آيفيه تنسيق النص داخل اآسبريشن و يب السابع الفصل في


- ٥ -

االن فيمكن االآتفاء بكتابه جمله او جملتين و تنسيقهم بما هو متاح امامك و لتحاول ان يصبح شكل آما يليصفحتك

عند البدء في إنشاء يجب ان نتذآرها دائما ذآرناها في نهايه الفصل الثاني و هناك خطوه مهمه للغايه ... Page Size و هي ضبط قياس الصفحه موقع جديد

:ط قياس او مساحه الصفحه باي من الطريقتين التاليتينيمكننا ضب

في اسفل الصفحه آما يليStatus barمن شريط الحاله .. اوال


- ٦ -

لمساحه المناسبه ثم اختر اPage Size اختر Viewثانيا من قائمه

و x 600 955تذآر دائما ان مساحه الصفحه األنسب هي

ذلك ألن معظم المستخدمين حاليا يضبطون شاشاتهم علي x 768 1024دقه

معاينه الموقع Pageو المقصود بمعاينه الموقع ... لموقعك هذا النص البسيط لعلك تريد ان تعاين موقعك بعد ان أضفت

Preview هو فتح الموقع في احد متصفحات األنترنت و عرضه تماما آما سيبدو أمام اي زائر للموقع

لمعاينه موقعك

ثم اختر المساحه التي تريد المعاينه عليهاPreview in Browser اختر االمر Fileمن قائمه الظاهر امامكCommonأيضا يمكنك أختيار أمر معاينه الموقع من شريط أدوات

من لوحه المفاتيحF12يمكنك معاينه الموقع عن طريق ضغط

بالطبع ستختار نعم... سيقوم البرنامج بسؤالك عما اذا آنت ترغب في حفظ الصفحه قبل معاينتها ام ال

... م فتح الصفحه االن للمعاينه ت


- ٧ -

...إغالق الموقع

File من قائمه Close Siteإلغالق الموقع يمكنك أختيار

Close Site و Closeهناك فرق بين

حيث تستخدم األولي إلغالق الصفحات و ليس الموقع بكامله

Open Site و Openو بالمثل الفرق بين

كمال العملفتح الموقع إلست

open Site أختر األمر Fileمن قائمه

openأختر موقعك ثم أضغط


- ٨ -

...ضافه صفحات جديده لموقعك إ

...Page ثم منه اختر االمر New اختر االمر Fileمن قائمه الذي تعاملنا معه في بدايه هذا الفصلNewيظهر لك مربع حوار

Pageجديده لذا نتعامل مع التبويب لكن هذه المره نحن نريد أضافه صفحه

سنتحدث ان شاء اهللا عن آل نوع عند .... انواع الصفحات التي يمكنك انشائها من آما تري هناك الكثير

و التي تسمح لك باضافه صفحه فارغه جديدهHTMLاما االن فأختر ...احتياجنا الضافته

يجب ان يكون الشكل امامك مشابها لما يلي

Folder Listو لعلك اآلن تتسائل لماذا لم تظهر الصفحه الجديده في الجزء الخاص بـ


- ٩ -

File من قائمه Save او اختر االمر Ctrl + Sاضغط ..... يجب عليك أوال حفظ الصفحه لكي تظهر

في الحالتين سيظهر امامك مربع الحوار التالي

لكن من المفضل ان تحدد اسم يعكس محتوي الصفحه.. يمكنك بالتاآيد اعطاء اي اسم تريد لصفحتك فضل استخدام المسافات في تسميه الصفحهايضا ال ي

آما ال يفضل ان تستخدم اللغه العربيه في تسميه الصفحه

... Saveاضغط ... بعد تحديد اسم لصفحتك Folder List Task Pane الحظ ظهورها في الجزء الخاص بـ


- ١٠ -

في موقعك مع وضع النصوص المناسبه About_Us.htm و Contact_Us.htmقم اآلن بإنشاء صفحات لمحتوي الصفحات

آما نري آيف يمكن استقبال ... في الفصل القادم ان شاء اهللا نتعلم سويا آيفيه ربط صفحات الموقع سويا رسائل بريد من زوار الموقع

٢تمرين محاضره

. صفحات٣نشاء موقع مكون من إقم ب .١ ف يستطيع السيرفر تحديد الصفحه الرئيسيه ؟عندما يتكون موقعك من عدة صفحات آي .٢ default و متي يمكنك تسميتها Indexتسميت الصفحه يمكنك متي .٣ لماذا ال يفضل تسميه الصفحات باللغه العربيه ؟ .٤ ؟Home Page و الـ Welcome Pageما الفرق بين الـ .٥


- ٢ -


تعريف بمعني و اهميه الروابط .١ انواع الروابط .٢ أنشاء رابط لصفحه داخل الموقع .٣ أنشاء رابط لصفحه داخل الموقع لم يتم أنشائها بعد .٤ أنشاء رابط للتواصل .٥ أنشاء رابط لصفحه خارجيه .٦ أنشاء رابط لجزء داخل الصفحه .٧ Targetوجيه الرابط ت .٨

مـــا هي الروابط

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

.أو حتي األنتقال ألي صفحات خارج الموقع

حيث يتم دائما ربط صفحات الموقع ببعضها ... ابط هي من العناصر األساسيه في اي موقع الروالبعض حتي يسهل علي المستخدم األنتقال بين أقسام الموقع و األستفاده من آافه خدماته بكل يسر و

. سهوله

أنواع الروابط

... أنواع من الروابط ٤هناك عرابط لصفحه داخليه من صفحات الموق .١ رابط لصفحه او موقع خارجي .٢ رابط للتراسل .٣ رابط لجزء محدد داخل الصفحه .٤

أضافه الروابط

و إال فقم ببدء موقع جديد من صفحه ... يمكنك أستخدام الموقع الذي قمت بإنشائه في الفصل السابق Defaultواحده

About_us.htmأنشئ صفحه جديده بعنوان مثل األسم و السن و تاريخ الميالد و ما ألي About_us.htmك في صفحه قم بأضافه بعض المعلومات عن

ذلك

About_us.htm بحيث يقوم بتحميل صفحه default.htmاالن نحن نريد ان نضع رابط في الصفحه الرئيسيه هيا لنري آيف سنتمكن من ذلك... عند الضغط عليه


- ٣ -

أضافه روابط لصفحه داخل نفس الموقع

" About Us" اضف جمله لصفحه الرئيسيهفي ا Right Clickقم بتحديد هذه الجمله ثم اضغط آليك يمين

)الحظ الشكل ... ( Hyperlinkمن القائمه المنبثقه اختر االمر

آما بالشكلInsert Hyperlinkالحظ ظهور مربع حوار


- ٤ -

... التي تم اشائها فعليا في الخطوه السابقه About_us.htm االن نحن نريد أضافه رابط لصفحه

About_us.htmاختر منها صفحه بالكامل ستالحظ ان الصفحات التي قمت بأنشائها ضمن موقعك موجوده Okبعد أختيار الصفحه اضغط

...آما بالشكل

F12يه عن طريق ضغط االن لتجربه الرباط الذي قمت بأنشائه قم بمعاينه الصفحه الرئيس ...قم بتجربة الرابط االن

إذا اردت تجربه الرابط في وضع التصميم ليكن ذلك اثناء

من لوحه المفاتيحCtrlالضغط علي

Contact_us.htmاالن نحن نريد أنشاء رابط اخر في الصفحه الرئيسيه لينقل المستخدم لصفحه بعنوان

فهل يمكن أنشاء رابط لصفحه في الموقع لم تنشئ .. بعد Contact_us.htmتذآر اننا لم ننشئ صفحه About_us.htmبعد ام اننا يجب ان ننشئها اوال آما فعلنا مع صفحه

هيا لنري آيف.. آال يمكنك أنشاء رابط لصفحه لم يتم انشائها بعد


- ٥ -

أضافه رابط لصفحه داخل الموقع لم يتم انشائها بعد

و التي سيقوم المستخدم بالضغط عليها Contact USيسيه قم باضافه جمله في الصفحه الرئ

Right Clickقم بتحديد هذه الجمله و اضغط آليك يمين Hyperlinkمن القائمه اختر االمر

و لكن آيف يمكننا اخباره ان الصفحه التي نريد الربط ... Insert hyperlinkسيقوم البرنامج بفتح مربع حوار

.... ا لم تنشئ بعد ؟ عليه

Create New Document أختر :Link toمن الجزء علي اليسار و المسمي

في هذا المثال _ تكتب اسم الصفحه التي تريد إنشائها Name of new documentثم في خانه Contact_us

سيعود بك للصفحه التي وضعت بها الرابطEdit the new document laterالخيار

سينقلك مباشره للصفحه المنشئه لتقوم بالتعديل فيهاEdit the new document now الخيار أما

آما بالشكل ... Okألنهاء الخطوات أضغط


- ٦ -

Contact_us.htmالحظ االن ان البرنامج قام بأنشاء صفحه جديده بعنوان

...آما قام بأنشاء الرابط في الصفحه الرئيسيه

ان الرابط الجديد يعمل جيداينه الصفحه الرئيسيه و تأآد منقم االن بمعا

يتم استخدامها في المواقع للتواصل بين زائري الموقع و بين فريق Contact_us.htmصفحه ... الي اخره ،بداء الرايسواء لألبالغ عن مشكله او لطلب معين او إل.. اإلعداد الخاص بالموقع

... الي فريق اداره الموقع E-Mailأنشاء رابط يستخدمه الزائر ألرسال بريد دعنا نري االن آيف يمكن


- ٧ -

أضافه رابط للتراسل

آما بالشكل ... ”For Your Feedback … Click Here“ قم بأضافه جمله Contact_us.htmفي صفحه

... بأستخدام الماوس Click hereقم بتحديد جملة Hyperlink اختر االمر وRight Clickاضغط آليك يمين

insert Hyperlinkالحظ ظهور مربع حوار

E-mail Address اختر :Look inمن الجزء الخاص بـ

الحظ الشكل

E-Mail في خانه االن يمكنك أضافه عنوان اإليميل الذي ترغب في استقبال الرسائل من زائري الموقع عليهaddress

Subject بـ خانهآما يمكنك تحديد عنوان الرساله ايضا في

فسيظهر بها اخر عناوين بريد استخدمتها ألنشاء روابط مماثله recently Used e-mail addressesأما

... Okبعد االنتهاء اضغط

اإليميل يتم تشغيل برنامجClick hereقم بحفظ الصفحه ثم معاينتها و الحظ عند الضغط علي جمله

الموجود بالجهاز


- ٨ -

هناك طرق أآثر تقدما يمكن بها التواصل بين الزائرين و اداره الموقع إال أنها مبنيه آليا علي استخدام األآواد و لغه جافا

من هذه ١١الـ و سنتعرض ان شاء اهللا لها بالتفصيل في ... الدوره

تري هل يمكن انشاء رابط ... ابط و لكن آلها داخل موقعنا انواع من الرو٣حتي االن استطعنا ان ننشئ تابع معنا.... لموقع اخر ؟

أضافه روابط لصفحات خارجيه

.. مثال " مواقعي المفضله "لنفترض االن انك تريد أنشاء جزء خاص في موقعك تسميه

..نتقل اليه ي اسم الموقع لحيث ستضع به اسماء المواقع المفضله عندك آما يمكن للزائر ان يضغط علي

و دعنا نضيف بها هذه الفقره.. لنعود االن للصفحه الرئيسيه في الموقع الذي نعمل عليه حاليا

.... Click hereاالن قم بتحديد آلمة تماما آما فعلنا في المرتين السابقتينhyperlinkاختر .. اضغط آليك يمين

تابع الخطوات آما بالشكلInsert Hyperlinkثم من مربع حوار


- ٩ -

...قم بحفظ ثم معاينه الصفحه و اختبر الرابط لتتأآد من عمله

لجزء داخل نفس الصفحهأضافه روابط

سترغب في ... أذا آانت الصفحه تحتوي علي مقال علمي او موضوع طويل مقسم الي مجموعه العناوين الضغط علي اي عنصر من عناصره الي هذا العنصر مباشره وضع فهرس في بدايه الصفحه ينقل الزائر عند

...دون الحاجه اللي قراءة الموضوع آامال

دعنا نري سويا آيف يمكننا اضافه مثل هذا الرابط

في البدايه دعنا ننشئ صفحه Subject.htmو ليكن اسمها جديده

في بدايه هذه الصفحه سننشئ

فهرس آما بالشكل


- ١٠ -

... بشكل متكرر ألضافه مجموعه من السطور الفارغه Enter أضغط Chapter 4 آتابه بعد حتي تختفي السطور السابقه تماما من امامكEnterستظل تضغط

او يمكنك آتابه اي جمله تعبر بها عن بدايه الفصل االول... Beginning of Chapter 1ثم اآتب جملة

و تسمي هذه العمليه ... و اعطائها عنوان مميز حتي يمكننا الربط عليها سنقوم االن بتعريف هذه الجمله

Bookmarkالـ

... Beginning of Chapter 1قم بتحديد جمله Bookmark اختر االمر Insert ثم من قائمه

والحظ ظهور مربع الحوار التالي

Chapter 1 اآتب Bookmark nameفي خانه

...نعود االن لبدايه الصفحه.. داد الجزء الذي سنقوم بالربط عليه االن انتهينا من أع

... التي آتبتها في الفهرس Chapter 1قم بتحديد آلمة .. Hyperlink ثم آليك يمين و اختر االمر

Insert Hyperlinkيظهر لك مربع حوار

و تابع الخطوات آما بالشكل


- ١١ -

...ها و تأآد من ان الرابط يعمل قم االن بمعاينه الصفحه بعد حفظ


- ١٢ -

targetتوجيه الرابط

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

About Usقم بتحديد آلمه ، default.htmفي الصفحه الرئيسيه

Hyperlink Properties ثم أختر Right Clickأضغط آليك يمين Target Frame الذي سيظهر أختر Edit Hyperlinkمن مربع حوار

New Windowأختر منه األمر ... target frameالحظ ظهور مربع حوار

.. ألنهاء العمل okأضغط

ده اصبحت تظهر في نافذه جديAbout Usقم األن بتجربه الرابط و الحظ ان صفحه

آما يمكن ... يمكن توجيه الرابط اليهم Targetهناك أآثر من

أستخدام هذا الخيار في تنفيذ بعض االفكار الجميله

في الفصل الخاص Target frameنتعرض بتفصيل اآتر لـ بالتصميم العملي


- ١٣ -

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

٤تمرين الفصل

قم بإنشـــاء روابط من مختلف األنواع بين صفحات الموقع الذي قمت بإنشــائه في التمرين الســــابق؟

في صفحه اخري ؟Bookmarkآيف يمكن إنشاء رابط مرتبط بـ

أبحث عن طريقه اخري يمكن بها التواصل مع زوار الموقع؟


- ٢ -

سنتعرف في هذا الفصل علي ما يلي

Page Properties في مربع حوار Generalتبويب .١ Page Properties في مربع حوار Formattingتبويب .٢ Page Properties في Advancedتبويب .٣

...ضبط خصائص الصفحه

( File من قائمه Properties عن طريق االمر Page Propertiesيمكن الوصول لمربع حوار خصائص الصفحه )١شكل

٢شكل ... ( بعد الضغط آليك يمين في اي مكان علي الصفحه page Propertiesاو عن طريق اختيار االمر

(

)١شكل (


- ٣ -

)٢شكل (

٣ آما بالشكل Page Propertiesفي الحالتين سيظهر امامك مربع حوار

)٣شكل (


- ٤ -

Generalالتبويب

Title

وقت التنفيذtitle barلكتابه عنوان الصفحه آما سيظهر في شريط الـعنوان

Page Description وKeywords لتتعرف علي آان يتم استخدامهم قديما عندما آانت محرآات البحث تراجع القيم الموجوده بهم

بحث تعمل بهذه الطريقه لذلك لم يعد من المهم لكن االن لم تعد محرآات ال.. .محتويات الصفحه وضع قيم في هذه الخانات بدرجه آبيره

نظام جديد للتعرف علي محتويات الصفحات و Googleطورت

يضمن دقه أعلي في نتائج البحث بأرسال مجموعه من البرمجيات الصغيره Googleحيث تقوم

تقرأ محتوي الموقع و تقفز من صفحه ألخري و من موقع ألخر و قد سميت هذه ... مرتبط به و فقا ألسلوب معين

"عنــــاآب "البرمجيات بالـ

Page direction لضبط أتجاه الصفحه سواء من اليمن الي اليسار او العكس

Background Sound

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

Loop (Forever)


- ٥ -

Formattingالتبويب

)٤شكل (

Background Picture ألضافه صوره آخلفيه للصفحه

Colorsمجموعه الخيارات الخاصه بااللوان أما

Background لتغير اللون في خلفيه الصفحه

Text

لتغير اللون االفتراضي للنصوص Hyperlink

لتغير اللون االفتراضي الي روابط موجوده في الصفحه

Visited hyperlink لتغير لون الروابط التي تم زيارتها سابقا

Active hyperlink

لتغير لون الروابط التي يتم الضغط عليها

Hovered hyperlink تغير لون الروابط عندما يتم الوقوف فوقها بالماوس بدون ضغط


- ٦ -

Advancedتبويب

يمكنك من هذا التبويب ضبط هوامش الصفحه


- ٢ -


أضافه الصور .١ حفظ الصور .٢ تنسيق الصور .٣ Picture propertiesمربع حوار .٤ الخاصه بالصورBorders and Shadingخيارات .٥ Padding و الـ marginالفرق بين الـ .٦ شريط ادوات الصور .٧ Thumbnailsانشاء الـ .٨ Hotspotانشاء الـ .٩

لذا فمن المهارات الهام اتقانها هي ... الصور من اآثر العوامل التي تميز و تضيف لصفحة موقعك . او التعامل مع خصائصهالصور آيفيه اضافه و تنسيق

اختالفات لن يجدوا سوي Microsoft Wordمعظم من يجيدون التعامل مع برنامج تنسيق النصوص .Expression Web و برنامج Wordر في برنامج بسيطه ما يبن التعامل مع الصو

أضافه الصور

... ألضافة صورة الي صفحه موقعك From File ثم Picture اختر األمر Insertمن قائمة

"Expression Web في برنامج Clip Artالحظ انه ال يوجد "

Insertأختر االن الصوره التي تريد اضافتها ثم اضغط


- ٣ -

ظهور المربع الحواري التالي تالحظ

Alternate text يمكنك هنا ان تكتب جمله مختصره ستظهر مكان الصوره في حالة لم يتم عرض الصوره أثناء

.التصفح الي سبب من االسباب

Long description سيظهر ايضا ... هنا يمكنك وضع وصف مطول عن الصوره و ماذا تعبر او ما لزوم وضعها في الصفحه

.هذا الوصف في حالة عدم عرض الصوره الي سبب

Show this prompt when inserting images .في حالة الغاء هذا الخيار لن يتم عرض هذا السؤال مره اخري عند اضافة الصور


- ٤ -

...االن تري الصوره و قد تم اضافتها للصفحه

حفظ الصور

Fileائمه من القSaveاضغط االن لحفظ الصفحه االمر

تالحظ ظهور الصندوق الحواري التالي

....حيث يسئلك البرنامج عن طريق هذه النافذه عن المكان الذي تريد حفظ الصوره فيه

الذي اضفتها منه بل سيتم نقلها ضمن ملفات الموقع و لذلك يسئلك المجلد الصوره لن تظل في الحظ ان فيه حيثالبرنامج عن المكان الذي تريد حفظها

Rename

لتغير اسم الصوره قبل حفظها

Change Folder "المكان االفتراضي يكون مع الصفحه التي اضفت الصوره فيها"لتغير مكان حفظ الصوره

Set Action

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

Picture File Type GIFالحظ أن هذا الخيار ال يمكن تطبيقه مع إمتداد ... متداد الصوره تغيير إ

.و قم بمعاينه الصفحه لتري الصوره آما اضفتها ... Okاضغط االن


- ٥ -

حجم الصوره من العوامل الواجب مراعتها دائما حتي ال تجعل

Png و Jpgأستخدم أمتدادات ... الصفحه بطيئه في التحميل ي جوده و اقل مساحهللحصول علي أعل

يمكنك Photoshopأذا آانت لك خبره باستخدام برنامج الـ

دائما استخدامه للحصول علي صور ذات وضوح عالي بأحجام صغيره

تنسيق الصـــور

...تغير أبعاد الصوره

..تالحظ انه تم تحديد الصوره ،يمكنك ببساطه الضغط لمره واحده علي الصورة ... لتغير حجم الصوره آما تريدClick and Drag مربعات التحجيم يمكنك الضغط و السحب االن باستخدام الحظ الشكل


- ٦ -

مربع حواري صغير به خيارينظهور أيضا تالحظ

Only Modify Size Attributes هذا الخيار يغير ابعاد الصوره فقط عند عرضها بدون حدوث اي تعديالت في ملف الصوره نفسه

Resample Picture to Match Size

باألضافه لتغير ابعاد الصوره اثناء العرض يمتد التغير ليشمل التعديل في ملف الصوره نفسها

Picture Propertiesمربع حوار

... Picture Properties علي الصوره و اختيار Right Clickيمكنك الضغط يمين الحظ الشكل ... Double Clickاو الضغط مرتين علي الصوره

Picture Propertiesاي آانت الطريقه فسيتم عرض صندوق حوار


- ٧ -

Generalالتبويب

Picture ستري المسار الذي تم تخزين الصورة به

و اختيار الصوره الجديدهBrowseآما يمكنك استبدال الصورة بصوره اخري عن طريق الضغط علي

Accessibility الذي قمت بأدخاله عند اضافتك Alternate Textيمكنك تعديل الـ

Hyper Link

يمكنك تحويل الصورة لرابط عند الضغط عليه يتم تحميل صفحه اخري و ذلك عن طريق الضغط و يمكنك التعامل Insert Hyperlink حيث سيتم فتح الصندوق الحواري الخاص بـ Browseعلي

الفصل الرابعمعه آما تعلمنا في


- ٨ -

Appearanceالتبويب

Wrapping Style ... تستخدم لضبط المحاذاه االفقيه باحد الخيارت الثالثه

None ....ال توجد محاذاه Left ....محاذاه لليسار

Right ... محاذاه يمين

فيحتوي علي مجموعه من الخيارات منها Layoutاما الخيار

Alignmentالمحاذاه الرئسيه و يشمل علي مجموعه من الخيارات و هو خالص ب Top ... السطر الذي وضعت في سياقهو فيها يتم رفع الصور ليتساوي الحد العلوي لها مع

Middle ... يصبح السطر الموضوع به الصوره في منتصفها تماما Bottom ... ي لحدها السفليذيصبح السطر الموضوع به الصوره محا

الخيارات في هذه القائمه فلم تعد ذات تأثير مع برامج التصفح الحديثهأما باقي

Sizeنأتي للخيار

الحظ ان لكل حجم اختيارين... حيث يمكنك منه تعديل مساحه الصوره آما تريد

In Pixel ... حيث ستدخل قيمة مطلقه للعرض او لألرتفاع In Percent ... مثال اذا آنت تريد ان يظل دائما عرض ... ١٠٠ الي ١ستدخل قيمة تتراوح بين التي تعرض فيها الصفحه Resolutionمن عرض الصفحه مهما آانت الدقة % ٤٠الصوره هو

Keep aspect ratio ... عند تنشيط هذا الخيار في حالة قمت بتعديل االرتفاع مثال ستجد البرنامج

يعدل عرض الصورة اتوماتيكيا


- ٩ -

الخاصه بالصورBorders and Shadingخيارات

وضع أطار للصفحه

... Borders and Shading أختر االمر Formatأضغط مره واحده علي الصوره لتنشيطها ثم من قائمه

تالحظ ظهور المربع الحواري التالي

Styleيمكنك من هذه النافذه التبديل بين اآثر من شكل لألطار و ذلك من االمر

Colorتيار لون محدد لألطار من االمر آما تستطيع اخ

Widthايضا سمك خط االطار من الممكن التعديل به من االمر

فسيعرض لك مباشره جميع التاثيرات التي تختارها Previewاما الجزء

الموجود في اسفل الصفحهPaddingو لكن ماذا عن االمر


- ١٠ -

Padding و الـ marginالفرق بين الـ

... هو المسافه بين الصوره و االطار الموضوع حولها Paddingالـ هو المسافه بين االطار و بين الكالم المحيط بالصورهف Marginأما الـ

دعونا نلقي نظره علي هذه الصوره للتوضيح اآثر

Picture Toolboxشريط أدوات الصور

يمكنك أظهار او اخفاء شريط ادوات الصور و ذلك

Toolbarار االمر بأختي ثم Viewمن قائمه

تحديد شريط االدوات Pictures


- ١١ -

أضافة صورة من ملف

في الفقره Thumbnailسيتم شرح الـ ( Thumbnailتحويل الصورة الي )التاليه

تدوير الصورة جهة اليمين او اليسار

عكس الصوره في االتجاه االفقي او الراسي

باين في الصورهأنقاص الت/ زياده

أنقاص السطوع في الصوره/ زياده

لقص جزء من الصورة

لتحويل لون معين في الصوره الي شفاف

)شفاف ( او الي ) اسود / ابيض ( لتحويل الصوره الي

للصوره) بروز ( أضافة تاثير

تغير مساحة الصورة في الملف الي الحجم الحالي في الصفحه

)سيتم توضيحها بعد فقرتين ( Hotspotأضافة

أعاده الصورة الي وضعها قبل التعديالت

Thumbnailأضافة

Thumbnailما هو الـ

هو وضع نسخه مصغره من الصوره عند الضغط عليها يتم فتح الصوره االصليه في صفحه جديده

Thumbnailو متي نحتاج لوضع الصوره آـ لو انك .. حيث ستم عرض عدد آبير من الصور في هذه الصفحه ... بوم صور مثال انت تنشئ صفحه آأل

وضعت الصور بحجمها و مساحاتها الحقيقيه سيصبح تحميل هذه الصفحه عبأ حقيقي يحتاج لوقت طويل ...آما ان تنسيقها سيكون صعب للغايه

Thumbnailتحويل الصور الي لهذا تلجأ الي

تجد الكثر .. مثال في مواقع االهدائات و ارسال آروت التهنئه ... ثيره لهذه الصفحه بالتاآيد انت رايت امثله آ

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

ايضا في مواقع الصور و الخلفيات الشكلو في مواقع التعارف يتم عرض صور المشترآين بهذا


- ١٢ -

Thumbnailآيف يمكن انشاء الـ

Auto علي الصورة المطلوب تحويلها ثم اختر االمر Right Clickببساطه اضغط بالزر االيمن للماوس

Thumbnail الحظ الشكل.. من القائمه المنبثقه امامك

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

Thumbnailهي يمكنني التحكم في حجم األفتراضي للـ

Autoبويب ثم الدخول علي التTools من قائمه Page Editor Optionنعم يمكنك هذا عن طريق اختيار االمر Thumbnail

هل يمكنني التحكم في طريقه عرض الصورة األصليه

في المراحل المتقدمه من البرنامج سنتعلم معا آيف يمكننا فعل هذا.. آال اليمكنك هذا في هذه المرحله


- ١٣ -

Hotspotأنشاء الـ

...أعتقد انكم جميعا ستحبون هذه المهارة

ة عند الضغط عليه يتم تحميل صفحه جديده هو تحديد جزء من الصورHotspotالـ بمعني انه .. تحدد جزء صغير من الصوره Hotspotحيث انك في الـ .. Linkهو يختلف قليال عن الرابط

يمكنك تحديد عدة أجزاء علي الصورة تنقلك الي عدة صفحات مختلفه

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

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

معلومات عنه

ليتم تحميل صفحه خاصه بها مجموعه من الصور و المعلومات عن ) مصر ( حيث يستطيع مثال الضغط علي مصر

لسياحيه في المغربفيتم تحميل صفحه عن المعالم ا) المغرب ( او يضغط ان اراد علي

و هكذا

..آيف يمكننا تنفيذ هذه الصفحه


- ١٤ -

الفصلسنقوم في البدايه باضافه صورة الخريطه آما تعلمنا في بدايه آما تعلمنا منذ قليلPicture Toolboxثم نظهر شريط ادوات الصور

هو موضح في الصورة آما _ موجوده علي شريط االدوات Hotspot ايقونات تمكنك من تنفيذ الـ ٣ستجد

_السابقه ) مصر ( قم االن برسم مستطيل حول .. اختر االداة االولي علي شكل مستطيل

الذي تعرفنا عليه في Insert Hyperlinkعند االنتهاء من رسم المستطيل يفتح البرنامج لك مربع حوار

قم بتحديد الصفحه التي تريدها.. المحاضره السابقه

نفس الخطوات لمجموعه من االماآن المختلفه علي الصورةو يمكنك اعاده

و ذلك حتي تستطيع تحديد اي منطقه سواء Hotspot ادوات ألنشاء الـ ٣تالحظ ان البرنامج يوفر لك منتظمه او غير منتظمه بسهولة

فالشكل المستطيل و الدائري لألشكال المنتظمه منتظمهاما الشكل الثالث فيمكنك من تحديد اشكال غير

٤تمرين محاضره

"ألبوم صور"أنشئ موقع Hotspotأنشئ موقع يحتوي علي تطبيق للـ


- ٢ -

سنتعرف في هذه المحاضره علي ما يلي Fontمربع حوار Paragraphمربع حوار Bullets and Numberingمربع حوار Borders and Shadingمربع حوار

Formattingشريط ادوات Copy / Past Propertiesخيـــــارت النسخ و اللصق

و Word عن مثيلتها في برنامج Expression webتنسيق النصوص في برنامج بشكل عام ال تختلف مهــاره هو في االساس برنامج ألنشاء المواقع و ليس لتحرير النصوص Expression webان آنا البد ان نتذآر ان

Wordمما يعني ان امكانياته في هذه النقطه ليست بالتاآيد مثل امكانيات برنامج الـ

Font Formatتنسيق الخطوط

font اختر االمر formatمن قائمه

Fontيمكنك من صندوق الحوار هذا ضبط الخطوط المستخدمه في الصفحه و ذلك من الخيار Font Styleمن الخيار ) الخ ... Italic او مائل Boldتقيل ( آما يمكنك اختيار شكل الخط

Font Sizeو ايضا حجم الخط يمكنك اختياره من


- ٣ -

يمكنك ضبط لون الخطColorمن الخيار .. فهي ألضافه مجموعه من المؤثرات علي النص المحدد Effectsاما مجموعه خيارات تي تختارها و ذلك قبل التنفيذ ستري تأثير جميع التاثيرات الPreviewفي الجزء الخاص بـ

formatting Paragraphsتنسيق الفقرات Paragraph اختر االمر formatمن قائمه

)الخ ... توسيط – يســـار–يمين ( ضبط محاذاه النص Alignmentيمكنك من الخيار او من اليسار الي Right to left ضبط اتجاه النص سواء من اليمين الي اليسار Directionو من الخيار

left to rightاليمين

زاحه النص مسافه محدده سواء لليمين او أ فهي المسئوله عن Indentationاما مجموعه خيـــارات اليســار

First Lineول فقط عن طريق الخيار آما يمكنك ازاحه السطر اال

.. و الذي يليه Paragraph هي المسئوله عن المسافات بين آل Spacingمجموعه خيارت

او المسافه بينه و Before الحالي و الذي يسبقه من الخيار Paragraphحيث يمكنك ظبط المسافه بين الـ نفسه من الخيار Paragraphسافات بين سطور الـ آما يمكنك ضبط المAfterبين الذي يليه من الخيار

Line Spacing او المسافات بين الكلمات نفسها و ذلك من الخيار Word


- ٤ -

حيث يمكنك مشاهده Previewالحظ ان جميع القيم التي تدخلها ستظهر نتيجتها في الجزء الخاص بـ نتيجه تعديالتك قبل تطبيقها

لنقطيأضـــافة الترقيم الرقمي و ا Format من قائمه Bullets and Numberingاختر االمر

اختيار اسلوب الترقيم الذي تريده Numbers و Plain Bullets و Picture Bulletsتستطيع من خالل التبويبات ) رقمي – نقطي –صوره ( اساليب اساسيه ٣من بين

Picture Bulletsحيث يمكنك اختيار صوره معينه تستخدمها للترقيم في حاله استخدمت التبويب

Plain bulletsاو اختيار احد الرموز التي يوفرها لك البرنامج في حاله استخدمت التبويب

Numbersيار اسلوب الترقيم الرقمي من التبويب او اخت


- ٥ -

أضـــافة األطــارات و التظليل

Format من قائمه Borders and Shadingاختر االمر

وعه مختلفه من االشكال لألطار الذي ترغب بوضعه يمكنك اختيار بين مجمStyleمن الخيار

Colorألختيار لون االطـــار و الحظ ان بعض االطارات ال يمكن تغير لونها

Widthلتغيير سمك االطار و ايضا بعض انواع االطر ال يمكن تغير سمكها

لفصل السابقا فقد تحدثنا عليه عندما تكلمنا علي التعامل مع الصور في Paddingاما الجزء و هو لمن ال يتذآر المسافه بين النص الداخلي و بين االطار المحيط به

في ان االخير هو المسافه بين األطار و النص الخارجيMarginو يختلف عن الـ


- ٦ -

Formattingشريط أدوات Formatting Toolbarسيق نمعظم اوامر تنسيق النصوص يمكن الوصول اليها مباشره من شريط ادوات الت

Formatting ثم منها اختر االمر View من القائمه Toolbarsألظهار شريط ادوات التنسيق اختر االمر

Copy / Past Propertiesخيـــــارت النسخ و اللصق

نص من مصدر اخر سواء آان هذا المصدر احد ملفات النصوص او موقع انترنت و Copy بنسخ عندما تقوم يظهر لك مجموعه Expression Web هذا النص في الصفحه التي تقوم بتصميمها علي الـ Pastتريد لصق

من الخيارت آما في الشكل

Match Destination Formatting

يحتفظ بجميع التنسيقات للنص الذي تم نسخه آما آان قي صفحته االصليه

Keep Source Formatting يقوم بتحويل تنسيق النص بما يتناسب مع تنسيق الصفحه المنسوخ اليها

Remove Formatting ات من النص حذف آافه التنسيق

Keep HTML Only

الموجود في النص مثل الروابط مثالHTMLيحتفظ بكود الـ

Keep Text Only يسمح لك بالتحكم Dialog Box مع الفرق انه يتبع هذا الخيار ظهور Remove Formattingتشبه

النص في طريقه نسخ


- ٢ -

:سنتعرف في هذا الفصل علي ما يلي

Insert Tableمربع حوار Tablesشريط أدوات

Cell Properties Layout Tables

و ال ترجع أهميه الجداول الي انها احدي طرق عرض ، تعتبر الجداول واحده من أهم العناصر في بناء المواقعو لكن تزيد اهميه ، ما تعودنا علي استخدامها في برامج معالجه الكلماتالبيانات بأسلوب منظم مثل

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

أدراج الجداول

Table قائمه بشكل عام تجد جميع األوامر الخاصه بالتعامل مع الجداول مجمعه في

)١شكل ( Table من قائمه Insert Tableو إلدراج جدول أختر


- ٣ -

Insert Tableمربع حوار ... ١شكل دعونا نستعرضهم سويا ... يحتوي علي الكثير من الخيارات Insert Tableآما نري مربع حوار

Rows )٢٥بحد أقصي ( تحديد عدد الصفوف في الجدول

Columns

)٢٥بحد أقص ( األعمده في الجدولعدد

Alignment سواء يظهر في يمين او يسار او وسط الصفحه_ الجدول و ليس محتوياته _ ضبط محاذاه الجدول

Pageيتغير بتغير إتجاه الصفحه الذي تقوم بتحديده من خصائص الصفحه Defaultالخيار Properties

Cell Padding

خاليا و المحتوي بدخلهاالمسافه بين حدود ال

Cell Spacing و تعبر القيمه المدخله عن المسافات األفقيه و الرئسيه، المسافات بين الخاليا

Table Direction

Left to او من اليسار الي اليمين Right to leftأتجاه الجدول و يكون إما من اليمين الي اليسار Right

Specify Width

و يحتوي علي خيارين ... تحديد عرض الجدولIn Pixels ... تحديد قيمه ثابته لعرض الجدول

In Percent ... تحديد عرض الجدول آنسبه من عرض الصفحه

Specify Height و يحتوي علي خيارين... تحديد إرتفاع الجدول

In Pixels ... تحديد قيمه ثابته إلرتفاع الجدول In Percent ... جدول آنسبه من إرتفاع الصفحهتحديد إرتفاع ال


- ٤ -

و In Pixelsغالبا ما ستلجأ لتحديد عرض الجدول •خصوصا في المواقع المحتويه علي الكثير من الصور

سواء في تصميمها او محتواها

علي عكس عرض الجدول فغالبا ما ستلجأ لتحديد • In Percentإرتفاع الجدول

Bordersأمال الجزء الخاص بخيارات Size )القيمه صفر تعني عدم إظهار األطار وقت العرض ( تحديد سمك إطار الجدول

Color لون إطار الجدول

Color تحديد لون لخلفيه الجدول Use background picture أختيار صوره توضع آخلفيه للجدول

تعديل الجدول

أضافه صفوف و أعمده

Rows or columns ثم أختر منه Insert االمر أخترTableمن قائمه تالحظ ظهور مربع الحوار التالي

Rowsألضافه صفوف جديد Columnsالضافه أعمده جديده

ثم تقوم بتحديد عدد الصفوف او األعمده التي

تريد اضافتها

تحدد اين سيتم اضافه الصفوف Locationثم من و Above( الحظ ان ... او األعمده الجديده

Below ( و )Right و Left ( محدده من الخليه التي تقف فيها حاليا


- ٥ -

اضافه عنوان للجدول

Caption ثم االمر Insert اختر االمر Tableمن قائمه ، لكي تضيف عنوان للجدول

حذف صفوف و أعمده

Deleteتر اخTableثم من قائمه ، قم بتحديد الصفوف أو األعمده التي ترغب في حذفها علي حسب رغبتكCells او Columns او Rowsثم اختر

دمج الخاليا

و يمكن دمج ، المقصود بدمج الخاليا هو تحويل مجموعه من الخاليا المتجاوره لخليه واحده مكافئه

آما يمكن دمج اي عدد من الخاليا، الخاليا المتجاوره افقيا او رأسيا او دمج االثنان معا

أختر Tableثم من قائمه _ يشترط التجاور _ خاليا قم بتحديد الخاليا التي تريد دمجها و لدمج ال Merge Cells و منه اختر Modifyاألمر

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

، عمليه معاآسه لدمج الخاليا حيث تقوم فيها بتقسيم الخليه الي عدد من الصفوف او األعمده

لعدد اآبر من األعمده او الصفوفآما يمكنك اعاده تقسيم خليتين متجاورتين

االمر Tableلتقسيم الخاليا قم بتحديد الخليه التي ترغب في تقسيمها ثم اختر من قائمه Modify و منه اختر األمر Spilt Cells

تالحظ ظهور مربع الحوار التالي

Split into Columns لتقسيم الخليه لعدد من األعمده

Split into Rows

م الخليه لعدد من الصفوفلتقسي

ثم تقوم بتحديد العدد الذي ترغب في تقسيمه

تقسيم الجدول _و ليس متجاورين _ يمكنك تقسيم جدول واحد الي جدولين متتالين

اختـر األمـر Tableثـم مـن قائمـه ، اختر الصف الذي تريد ان يكون الصف األول فـي الجـدول الجديـد Modify و منه اختر Spilt Table


- ٦ -

التنسيق التلقائي للجدولو ... عدد من التنسيقات الجاهزه التـي يمكنـك تطبيقهـا علـي جـدولك Expression Webيوفر لك

Table Auto ثم منه اختر االمر Table من قائمه Modifyأختر االمر ، ألختيار و تعديل اي من هذه التنسيقاتFormat


Format to apply يمكنك تحديد عناصر التنسيق التي ترغب في تطبيقها علي جدولك

Apply Special formats

تحديد او الغاء أماآن من الجدول ال يطبق عليها التنسيق

سيه للجدولأالمساواه الر بعد أضافه البيانات الي الجدول قد تجد تفاوت في ارتفاعات الصفوف نتيجه األختالف في عدد

و يمكنك ببساطه مساواه ارتفاعات الصفوف جميعا، الكلمات الموجوده داخل آل خليه

ثم من اختر modify اختر االمر Tableثم من قائمه ، قم بتحديد الصفوف التي ترغب في مساواتها Distrusted Rows Evenlyاالمر

المساواه االفقيه للجدول، و لمساواه عرض جميع االعمده، ده المكونه للجدولبالمثل يمكن ان تجد تفاوت في عرض األعم

ثم من اختر Table من قائمه modifyقم بتحديد االعمده التي ترغب في مساواتها ثم أختر األمر Distribute Columns Evenlyاالمر


- ٧ -

الخيارات السابقه يمكن _ إن لم يكن آل _ معظم Right Clickآليك يمين الوصول اليها عن طريق ضغط

داخل الجدول

شريط أدوات الجدول

مما ساهم Table علي معظم األوامر الموجوده في قائمه Table Toolbarيحتوي شريط أدوات الجداول للعملآثير في زياده سرعه إنجازك

Cell Propertiesخصائص الخاليا

يعرض لنا البرنامج مربع Cell Properties و اختيار علي اي من خاليا الجدولRight Clickبالضغط آليك يمين حوار خصائص الخليه التي قمنا بالضغط عليها حيث يمكننا تغيير الكثير من الخصائص


- ٨ -

Layoutفي الجزء الخاص بـ

Horizontal Alignment .... )- توسيط – يسار –يمين ( تحديد المحاذاه األفقيه للنصوص داخل الخليه

Vertical Alignment .... )- وسط – أسفل –فوق ( تحديد المحاذاه الرأسيه للنصوص داخل الخليه

Row Spanned

و تتغير هذه القيمه في حاله تم دمج الخليه مع خليه اخري ) ١( القيمه االفتراضيه لهذا الخيار كافئ ألرتفاع بمعني اخر تعبر هذه القيمه عن عدد الصفوف الم، )٢( اسفل او اعلي منها لتصبح

الخليه

Columns Spanned و لكنها تعبر عن عدد االعمده المكافئه لعرض الخليهRow Spannedمثل

Specify Width

و يحتوي علي خيارين، تحديد عرض الخليهIn Pixels ... لتحديد قيمه ثابته لعرض الخليه

In Percent ... لتحديد عرض الخليه آنسبه مئويه من عرض الجدول

Specify Height و يحتوي علي خيارين، تحديد إرتفاع الخليه

In Pixels ... لتحديد قيمه ثابته إلرتفاع الخليه In Percent ... لتحديد إرتفاع الخليه آنسبه مئويه من إرتفاع الجدول

Header Cell

نتصفالتعامل مع الخليه آخليه عنوان فيصبح المحتوي داخلها منسق اسود تقيل و في الم

Cell Direction او من اليسار الي Right to leftتحديد إتجاه النص داخل الخليه سواء من اليمين الي اليسار

Left to Rightاليمين

Bordersالجزء الخـاص بـ

Size لتحديد سمك األطار المحدد للخليه

Color لتحديد لون اإلطار

backgroundالحزء الخاص بـ

Color لتحديد لون الخلفيه للخليه

Use Background Picture أختيـــار صوره آخلفيه للخليه


- ٩ -

Layout Tables

الغرض منها تصميم جدوال تعتبر آهيئه للصفحه و ليس لعرض البيانات او الكتابه Layout Tableالـ شكال التي يوفرها لك برنامج حيث يمكنك أختيار الشكل العام للصفحه من ضمن مجموعه من األ، بها

Expression Webآما يمكنك إنشاء أشكال خاصه بك

الخاصه بـ Task paneالحظ ظهور الـ ، Layout Table األمر Table اختر من قائمه Layout Tableإلضافه layout Table _ بشكل افتراضي اسفل يسار الصفحه_

آما يمكنك ، لجدول و الذي سيمثل عرض و ارتفاع الصفحهحيث تري انه يمكنك تحديد عرض و ارتفاع ا تحديد محاذاه الجدول

. المختلفهLayoutsو اخيرا يمكن ان تختار بين مجموعه من الـ


- ٢ -

ضافات قويه لموقعكإ

Interactive Button Behaviorsأومر التحكم

Formsاضافه النماذج Inline Frameأضافه

تعلمنا سويا حتي االن آيفيه اضافه الروابط بين صفحات الموقع و آيفيه اضافه الصور و التعامل و لكن ما زالت المواقع ، ات التي تؤهلنا اآلن لبنــــاء موقع جيدعالوه علي الجدوال و غيرها من المهار، معها

.التي نقوم بتصميمها ال تبدو إحترافيه مثل تلك المواقع التي نراها دوما علي شبكه األنترنت

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

Interactive Buttonsاألزرار التفاعليه

أضافه األزرار التفاعليه

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

Interactive Buttons أختر األمر Insertمن قائمه

يتكون مربع حوار

Interactive Button من ... تبويبات ثالث

و يحتوي Buttonتبويب علي

Preview

الذي تعرض لك شكل الزر تختاره

Buttons

لألختيار و المبادله بين مجموعه من األشكال التي يوفرها لك البرنامج

Text

النص الذي سيتم عرضه فوق الزر

Link

لضبط الرابط الذي سيتم االنتقال اليه عند الضغط

علي الزر


- ٣ -

Fontالتبويب

Font

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

Font Style تنسيق الكتابه المستخدم

Size

حجم الخط

Original Font Color لون الخط االساسي المستخدم في الكتابه

Hovered Font Color

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

Pressed Font Color الخط عندما يضغط المستخدم فوق الزرن لو

Horizontal Alignment ) شمال – يمين –توسيط ( المحاذه األفقيه للكتابه

Vertical Alignment

) توسيط – أسفل –أعلي ( المحاذاه الرأسيه للكتابه

Direction اتجاه النص


- ٤ -

Imageأما التويب الثالث فهو تبويب

Width و Heightلتحديد عرض و ارتفاع الصوره علي الترتيب

Maintain Proportionsللحفاظ علي التناسب بين عرض و أرتفاع الصوره

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

ملفات صور٣اي ان آل زر تقوم باستخدامه سيضيف لملفات الموقع

Make the button JPEG image and use this background color حيث في هذه الحاله يحتاج ، هذا الخيار مؤثر فقط عند أستخدام ازرار ذات حواف دائريه و ليست متعامده

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

Make the Button GIF image and use a transparent background

يعفيك هذا الخيار من مهمه اختيار لون يملئ الفراغ بين الحافه الدائريه و المتعامده للزر و ذلك عن طريق ترك هذه المساحه بلون شفاف

ألنهاء العملokما تريد أظغط بعد األنتهاء من ضبط آافه الخيارات بما تناسب مع


- ٥ -

حفظ األزرار التفاعليه

ملفات ٣لكن الحظ هذه المره ظهور ... يمكنك االن حفظ العمل بعد ان انتهيت من إعداد القائمه التي تريد الحظ الشكل، خاصه بكل زر استخدمته

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

ملفات الصور الناتجه عن إستخدام األزرار التفاعليه صغيره المساحه و ال تتسبب في حمل مبالغ فيه عند

و لكن ايضا عليك ان تنتبه بمراجعه ، تحميل الصفحهمساحه هذه الملفات حتي ال تتسبب آثرت استخدامك

لهم الي تأخير تحميل الصفحه


- ٦ -

Behaviorsأومر التحكم

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

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

، تنقسم لقسمينو اوامر التحكمأو إتمام مثل مرور الماوس فوق عنصر معين او الضغط بالماوس ( حدوثهو هو الفعل الالزم .. Eventالحدث

)تحميل الصفحه و غيرها هي رد الفعل الذي سيتم تنفيذه عند وقوع الحدث ... Action األستجابه

مثال بسيط

)األستجابه ( رض رساله ترحيب يقوم البرنامج بع، )الحدث ( عند تحميل الصفحه )األستجابه( يقوم البرنامج بتشغيل ملف موسيقي معين ) الحدث ( عند الضغط بالماوس علي صوره معينه

...و هكذا

فمثال هناك احداث ال يمكن تنفيذها إال علي ، الحظ انه ليست جميع األحداث متاحه لجميع عناصر الصفحه

... بالصفحه و هكذا صور بينما احداث اخري مرتبطه

أضافه اوامر التحكم اختر ، و التي منها تستطيع اضافه و تعديل اوامر التحكم المختلفهbehavior Task Paneيمكنك أظهار

Behavior من قائمه Task Pane

يظهر لك جميع اوامر التحكم المتاحه للعنصر الحاليInsertبالضغط علي


- ٧ -

و لنبدء سويا، قات علي آيفيه أستخدام أوامر التحكم دعنا نستعرض بعض التطبي أضافه رساله ترحيب تظهر عند تحميل الصفحه

،أبدء صفحه جديده آما تعلمنا سابقا

Behavior ظاهره قم بأظهارها عن طريق أختيار Behavior الخاصه بأوامر التحكم Task Paneاذا لم تكن الـ Task Panesمن قائمه

Popup Messageمن قائمه أوامر التحكم أختر و Insertأضغط األمر

أآتب ما تريد، يظهر لك مربع حوار ألدخال الرساله التي تريد إظهارها عند تحميل الصفحه يجب ان تكون الشاشه امامك االن آما يلي

Okبعد األنتهاء أضغط

Behavior Task Paneالحظ االن سطر أوامر التحكم في الـ

و يعني عند إتمام تحميل الصفحهon load ان الحدث الذي سيتم ظهور الرساله عند وقوعه هو تالحظ

بدايهقم بمعاينه الصفحه اآلن و الحظ ظهور رساله الترحيب في ال


- ٨ -

فوقهاMouseتغيير الصوره عند مرور الـ هيا ، من فوقهاMouseر بالـ نريد ان نجعل احد الصور الموجوده في الصفحه تستبدل بصوره اخري عند المرو

لنري آيف يمكن برمجه هذا االمر

قم ببدء صفحه جديده و أضف اليها اي صوره ترغب في اضافتها من علي جهازك قم االن بالضغط مره و احده علي الصوره لتحديدها

Behavior Task Panes في الـ Insertثم أضغط علي Swap Imageر األمر و من قائمه اوامر التحكم التي ستظهر اخت


Browse ألختيار الصوره التي تريد ان تستبدلها بالصوره الحاليه

Preload Images

ليتم تحميل الصور المستخدمه جميعها مع بدء تحميل الموقع و يساعد هذا في زياده سرعه التبديل

Restore on mouseout event

ليتم الرجوع للصوره االصليه بعد خروج الماوس من علي الصوره

يجب ان يكون جزء اوامر التحكم عندك يشبه ما يلي، Okبعد األنتهاء يمكنك الضغط علي


- ٩ -

Expression Webمن اوامر التحكم التي تستطيع استخدامها في

Call Script ار مربع حوار لتحديد الكود الذي ترغب في تنفيذه و يعرض هذا الخي، javaلتنفيذ احد اآواد

Change Property

الذي Change Propertyيقوم هذا الخيار بعرض مربع حوار ، لتغير خواص عنصر معين من عناصر الموقع يمكنك من تحديد الخواص التي ترغب في تغيرها

Change Property Restore ا الخواص التي قمت بتغيريهةإلعاد

Check Browser

آما يمكنك تحديد الصفحه التي يتم عرضها للزائر في حاله آان يستخدم ، صدار المتصفحإللتأآد من متصفح غير متوافق مع تصميم موقعك أو األآواد الموجوده به

Go to URL

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


- ١٠ -

Jump Menu

إنشاء قائمه تحتوي علي اآثر من عنصر و يمكنك ربط آل عنصر من عناصر هذه القائمه بصفحه او عنوان مختلف

Open Browser Menu

حكم في ابعاد هذه النافذه و تحديد آما يمكنك الت، فتح نافذه جديده للمتصفح يتم بها تحميل موقع معين األمر الذي سيظهر بمجرد اختيارك هذا open Browser Windowخصائها و ذلك عن طريق مربع الحوار

Play Sound يسمح لك باضافه ملف صوتي بسيط مربع حوارلكيعرض

Pop-Up Message يعرض رساله للزائر

Preload Image

Swap Imageديله التي تريد استخدامها مع خاصيه يقوم بتحميل الصوره الب

Set Text عناصر ٤ علي Set textو يحتوي ، يسمح لك بتغير نص عنصر ما عند وقوع حدث معين

Swap Image

حيث يقوم بأستبدال الصوره بأخري، للتطبيق فقط علي الصور

Swap Image Restore ستعاده الصوره األصليهإ


- ١١ -

ي يمكن أستخدامها فهيأما األحداث الت

Onclick ... عند الضغط بالماوس

Ondbclick ... الضغط مرتين بالماوس

Onkeypress ... عند ضغط اي من مفاتيح لوحه المفاتيح

Onload ... عند تحميل الصفحه

Onmouseover ... مع الثبات _ الماوس فوق عنصر معينيتم توجيه عندما_

Onmousedown ... مع استمرار الضغط_ ما يضغط المستخدم علي هذا العنصر عند_

Onmouseup ... عند انتهاء الضغط بالماوس

Onkeydown ... عند ضغط احد ازرار لوحه المفاتيح مع استمرار الضغط

Onkeyup ... عند انتهاء الضغط

Onmousemove ... عند المرور بالماوس فوق عنصر معين

Onmouseout ... خروج الماوس من فوق العنصرعند

Onunload ... عند خروج المستخدم من الصفحه

Formsاضافه النماذج

حيث يمكنك دائما أنشاء نماذج ، توفر لك النماذج وسيله مرنه و فعاله للتواصل مع زوار موقعك ...ألستقبال رسائل الشكر او الشكاوي او طلبات األعالن في موقعك

سنقوم ببناء نموذج آالمبين بالشكللنري سويا آيف


- ١٢ -

....وذج للصفحه منبدأ أوال بأضافه الن .١ و ذلك بالضغط مرتين عليها Toolbox Task panes من Formأختر أداه

Double Click

لقياس مناسبFormثم قم بتحجيم اداه

نبدأ االن باضافه مربع النص الذي سيدخل به المستخدم أسمه .٢

األول ع الماوس في المكان الذي تريد ظهور مربع النص به تماماض

Input Textثم أختر

يجب ان يكون شكل النموذج مشابها لما يلي

E-mailنكرر نفس الخطوه السابقه الضافه خانه الـ .٣

حيث من المفترض ان نضيف قائمه يختار ، نأتي االن لخطوه أضافه خانه الغرض من الرساله .٤ - طلب إعالني – سؤال – شكوي – تهنئه –شكر ( نها الغرض من إرساله الرساله المستخدم م

)و هكذا .....

ضع االن الماوس في المكان الذي تريد ظهور قائمه الغرض من Drop-Down Boxالرساله به ثم أختر

نريد االن إضافه االختيارت المختلفه لهذه القائمه و لنتمكن من هذا

علي مربع األختيارت الذي أضفته حاالDouble Clickقم بالضغط آما بالشكل


- ١٣ -


Add

ألضافه خيار جديد للقائمه

Modify لتعديل الخيار الحالي

Remove

إلزاله الخيار الحالي

Move Up رفع الخيار الحالي مستوي واحد إلعلي في ترتيب عناصر القائمه

Move Down

لخفض الخيار الحالي مستوي واحد ألسفل في ترتيب عناصر القائمه

قم االن بأضافه عدد من األسباب المحتمله إلرسال الزائر لهذه الرساله

نقوم االن بأضافه اخر مربع نص و هو الخاص بالتعليق آما .٥ تعلمنا في الخطوه الثانيه

"إرسال"نأتي االن لمرحله إضافه زر .٦

Inputالماوس في المكان الذي تريد ظهور الزر به ثم اختر قم بوضع (Submit)

فوق Double Click بكلمه إرسال قم بـ Submitو االن لتغيير آلمه

الزر و الحظ ظهور مربع الحوار التالي


- ١٤ -

Value / Labelفي الخانه " إرسال"قم بكتابه آلمه

و الذي من المفترض ان يقوم بألغاء البيانات التي " تفريغ الحقول"نكرر االن نفس الخطوه ألضافه زر .٧ ادخلها المستخدم في حاله تراجعه عن إرسال هذه الرساله

يجب ان يبدو النموذج النهائي آما يلي .٨


- ١٥ -

Inline Frameضافه إ . هو عنصر يسمح لك بعض محتويات صفحه اخري داخل الصفحه الحاليهInline Frameالـ

Inline Frameآيفيه اضافه الـ

Toolbox Task Pane في HTML من ضمن اوامر الـ Inline Frameأختر االمر

يظهر الشكل التاليInline Frameبعد اختيار

New Page لتكون الصفحه التي يتم عرضها داخل _ لم يتم تصميمها بعد_ اي انك تختار إنشاء صفحه جديده

Frameالـ

Set Initial Page Frameد صفحه يتم عرضها داخل الـ تحدي


- ١٦ -

Inline Frameخصائص الـ

يتم عرض مربع Inline Frame Properties و اختيار االمر frame علي الـ Right Clickبالضغط آليك يمين Inline Frame Propertiesحوار


- ١٧ -

Name Frameاسم يتم استخدامه في الكود للتعبير عن الـ

Initial Page

حديد الصفحه التي سيتم تحميلها في البدايهت

Frame Sizeاما خيارات Frameلتحديد عرض و إرتفاع الـ

Marginو من خيارات

Frameلضبط الهوامش حول الصفحه التي يتم عرضها داخل الـ

Optionsاما خيارات frameفتحديد محاذاه الصفحه المعروضه داخل الـ

Frameبط آيفيه ظهور اشرطه اإلزاحه داخل الـ يمكنك ضScrollbarsو من Alternate Text ... فهو النص الذي سيظهر في حاله عدم قدره المتصفح علي عرض الـFrame


- ٢ -

التصميم العملي

مقدمه يتم بها استعراض مجموعه من المواقع و المناقشه علي مدي قدرتنا علي انشاء -١ المحتويات المختلفه التي نراها في المواقع حتي االن

توزيع –انواع الخطوط الشائعه و احجامها ( توضيح بعض المهارات الخاصه بالتصميم العملي -٢ آيفيه المحافظه علي شكل الموقع دائما آما –ات و المسافات للقوائم و النصوص المساح

)الخ ... هو عند العرض علي مساحات مختلفه و متصفحات مختلفه Styleاستخدام الـ ... اجعل عملك اسهل -٣ Dynamic Web Templesاستخدام الـ ... اجعل عملك اسرع -٤ المتدربين يتم اختياره بعنايه من المحاضر يتم تطبيق مشروع تصميم موقع موحد لجميع -٥

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

تمهيد

لقد اصبحت االن قادرا علي إنشاء الكثير و الكثير من المواقع و اصبح لك قدرا آبير من المعرفه ... مبروك نتاج مواقع ذات سمه احترافيه تحتوي علي الكثير فلتستعد إذا إل، Expression Webفي استخدام برنامج هل حقا اصبحت قادرا علي محاآاه تصميم جميع المواقع التي تراها ... و لكن مهال ، من الصفحات و العناصر

و ما هي الخطوه القادمه حتي استطيع انتاج مواقع ذات سمه احترافيه، اثناء تصفحك لشبكه األنترنت

آك لألدوات الالزمه لتصميم مواقع محترفه فإنت بالفعل تملك نسبه آبيره من ان آنت تسئلني عن إمتالفأنت علي بعد علي فعل ذلك آنت تسئل عن قدرتك اناما، هذه األدوات بعد إنتهائك من الفصول السابقه

دعنا نري ماذا يتعين عليك فعله االن لتصل لمستوي احترافي في ، خطوتين من احتراف تصميم المواقع يم المواقعتصم

شاهد و الحظ -١

ليس آأي متصفح او زائر ... في هذه المرحله انت بحاجه لتصفح العديد من المواقع و ما الفارق ؟، للموقع و لكن آمصمم مواقع

من االن عندما تتصفح المواقع المختلفه علي األنترنت يجب ان تهتم ... الفارق آبير بمالحظه عناصر الموقع المختلفه

تسائل دوما اي من هذه العناصر ما زلت ال استطيع اضافتها و لماذا؟ يجب ان ت ايضا يجب ان تالحظ آيف يتم توظيف األلوان و استخدامها حسب طبيعه الموقع

هل تسائلت مثال ما الخطوط الشائع إستخدامها في الكتابه داخل المواقع و ما حجم الخط المناسب

ض المناسب لهاعندما اريد وضع قائمه رأسيه فما العرهل تسائلت آيف يتم بناء الموقع من البدايه حتي يظل محتفظ دائما بهذا التصميم مع

إختالف مساحه العرض

أبدء تصميمك -٢بعد مالحظتك لعدد مختلف من المواقع يمكنك ان تبدأ تصميماتك و اضعا في اعتبارك هذه

عديد من التصميمات الفعليه المعلومات الجديده التي اآتسبتها بعد مشاهده و مالحظه ال الموجوده علي شبكه األنترنت

سيفيدك آثير في هذه المرحله اإلطالع علي •تصميمات المحترفين لتري آيف يتم بناء

أبحث في شبكه األنترنت ، المواقع من البدايهعن مواقع تقدم لك تصميات جاهزه لمواقع و

سيرفع هذا آثير من مستواك و ، ابدء بدراستها قدرتك علي تقديم تصميمات ذات طابع من

.احترافي

دعنا نبدأ االن مع أول خطوه


- ٣ -

شاهد و الحظ

بمساعده المحاضر قم بإستعراض عدد من المواقع و التناقش حول النقط التي اعط وقتا اآبر لنفسك آي تالحظ الموقع و حاول االستفاده من هذا النقاش آأفضل ما ... ذآرتها سابقا

و سأحاول ان اجيبك علي مجموعه من االسئله التي ربما تتبادر الي ذهنك االن، عتستطي

ما زلت ال استطيع اضافتها و لماذا؟ الموجوده اي من العناصرو لنري ، هناك بالفعل مجموعه من العناصر التي ال نستطيع اضافتها حاليا لمواقع التي قمنا بتصميمها

أمثله لها Visitor Counterار والزت دادع

حيث يمكننا فقط اضافتها بدون القدره علي برمجتها، اإلستفتائات و أستطالعات الرأي

و التي تعتبر اداه اآثر فاعليه و قوه للتواصل مع مستخدمي الموقع حيث ما Mail Formنماذج البريد س دفعها للعملتزال قدرتنا متوقفه عند وضعها في الموقع و لي


- ٤ -

لماذا ال نستطيع إضافه هذه العناصر... و السؤال اآلن ألن جميع هذه العناصر يقوم ببرمجتها مطور المواقع فكل هذه العناصر تحتاج إلجاده لغه برمجه

إلنشائها و ال تنسي اننا ندرس تصميم و ليس تطوير المواقع

من حسن الحظ ان هذه العناصر شائعه • جدا لذلك يمكنك بسهوله ان تجد اإلستخدام

و سنتعلم سويا في الفصل . اإلآواد الخاصه بهاآيف يمكننا البحث عن _ إن شاء اهللا _ التالي

هذه اإلآواد و آيف نضيفها في الموقع

؟ما الخطوط الشائع إستخدامها في الكتابه داخل المواقع و ما حجم الخط المناسب

و لكن بمالحظتك للعديد من المواقع تجد أن ، تخدام نوع او حجم خط محددبالتأآيد ال يوجد إلزام إلس شائع اإلستخدام خصوصا في المواقع التي تحوي محتوي نصي آبيرTahomaالخط

فهو اإلنسب للعنواين الرئيسيه١٨ او ١٦اما ... مناسب آثير لكتابه الموضوع نفسه ١٠حجم الخط

؟ العرض المناسب لهاعندما اريد وضع قائمه رأسيه فما

بيكسل١٧٠ الي ١٢٠بمراجعتك للكثير من التصميمات اإلحترافيه ستجد ان عرض القائمه يكون بين

؟آيف يتم بناء الموقع من البدايه حتي يظل محتفظ دائما بهذا التصميم مع إختالف مساحه العرض

هيكل الذي سيحتوي علي مختلف فبدون تمكنك الكامل من بناء ال، تعتبر هذه هي المهاره األهم

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

و نجيب علي هذه السؤال دعنا نشاهد معا بعض التصميمات الموجوده فعليا علي اإلنترنتاالن لكيضيحي المرفق مع هذه المحاضره لتشاهد عرض توPower Pointإنتقل الي ملف الـ ، آيف تم بنائها

لإلجابه علي هذه النقطه


- ٥ -

Styleأستخدام الـ ... أجعل عملك أسهل

٥ او ٤تحديدا انت تطبق ، من تطبيق التنسيقات التي تستخدمها دوما بشكل اسرعStylesتمكنك الـ ( فانت تستطيع تحديد حجم الخط و نوعه و تغيير لونه و جعله مثال مسطر ، تنسيقات بضغطه زر واحده

ذو فائده حقا يجب ان تتعلم آيف Styleو ليصبح أستخدام الـ ... بمجرد أختيارك لـ استايل ما )تحته خط هي لنري ، حتي يمكنك أستخدامها داخل موقعك بسهولهStylesيمكنك أنشاء و حفظ مجموعه من الـ

..آيف

Styleإنشاء Mange Style أختر Task Panesمن قائمه

New Style أضغط علي جديدStyleإلنشــــاء

آما بالشكل التاليNew Styleتالحظ ظهور مربع حوار


- ٦ -

mystyle. و ليكن Style أآتب أسم الـ Selectorفي األختيار

ستجد ثالث اختياراتDefine inمن

Current Page ... ليتم التعامل بالـStyleالذي ستقوم بإنشائه في الصفحه الحاليه فقط

New Style Sheet ... ليتم تخزين خصائص الـStyle في ملف CSS

Existing Style Sheet ... ليتم تحميل ملفCSSو في هذه الحاله سيتم تنشيط زر ، منشئ من قبلBrowse لتقوم بتحديد مكان ملف الـ CSSالذي ترغب في تحميل الـ Style منه

يمكنك تحديد خصائص التنسيق لمختلف العناصر الموجوده في الصفحه بدء من Categoryثم من خيارات

النصوص و أنتهاء بالجداول

_ Categoryال يشترط ان تقوم بأدخال قيم لجميع عناصر الـ _ بعد األنتهاء من ضبط الخصائص التي تريديها إلنهاء العملOkقم بالضغط علي

الجديد Styleنالحظ ظهور الـ

لمختلف العناصر الموجوده في الصفحهStyleيمكنك األن إنشاء مجموعه من الـ

Styleو لكن آيف نستخدم هذه الـ

Apply Style أختر األمر Task Panesمن قائمه

التي أنشئتها في الخطوه السابقه Styleتالحظ ان جميع الـ Styleيد تطبيق الـ فقط قم بتظليل العنصر الذي تر.. موجوده امامك

Right Click الذي تريد تطبيقه و اضغط فوق Styleعليه ثم أختر الـ آما بالشكلApply Styleو اختر من القائمه


- ٧ -

Dynamic Web Templatesأنشاء الـ ... جعل عملك أسرع إ

ل صفحه هي نفسها فتجد ان ثمه التصميم في او... آثير من المواقع لها شكل موحد في مختلف صفحاتها آما تجد قائمه سواء افقيه او رأسيه بها اجزاء و اقسام الموقع المختلفه، في باقي الصفحات

و ماذا لو اردنا تغيير احد عناصر القائمه هل نقوم بالتغيير ، تري هل يتم تصميم هذه القائمه لكل صفحه؟ ...بالتأآيد ال في آافه الصفحات المحتويه علي القائمه؟

آما انها تغنييك ، بالحفاظ علي ثمه موحده لجميع صفحات موقعكDynamic Web Templatesمح لك تس

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

Dynamic Web Templatesالديناميكه

و هذا الموقع ... فلنفترض اننا نقم بتصمم موقع ما ... سنتعلم هذه المهاره سويا في هيئه تطبيق عملي ثم بعدها مساحه للموضوعات المختلفه... يحتوي تحت الشعار علي قائمه بأقسامه

بينما المحتوي فقط هو ما ستغير من صفحه ألخري، ات الموقعفالشعار و األقسام ثابتين لجميع صفح

قم ببدء صفحه جديده مثلما تعلمت سابقا ابدء بالتصميم حتي تصل للشكل التالي

مخصصه لكتابه محتوي Cellخليه الصفحه و بالطبع سيختلف المحتوي

بإختالف القسم

Menu و الـ Headerالـ محتوي ثابت في جميع

صفحات الموقع


- ٨ -

حيث عناصر القائمه هي علي الترتيب

Home – My Gallery – Awards – About Me – Contact Me

او نموذج يقوم البرنامج بتكراره بعد ذلك عندما ننشئ باقي Masterالن ان نستخدم هذه الصفحه آـ نريد ا و لعمل هذا، صفحات الموقع

Save As االمر Fileاختر من قائمه

main آما هو مبين بالشكل و لتعطها األسم As Dynamic Web Templatesقم بحفظ الصفحه

و االن نريد ان نخبر البرنامج باي األماآن سيتغير ، او القالب االساسيالنموذجلقد أنشئنا االن ... جيد محتواها حتي يسمح بالتعديل بها و اي االماآن ثابته علي مستوي الموقع

..تحديدا نحن سنخبره فقط باالماآن التي سيتغير محتواها بتغيير الصفحه

ك منطقه واحده ستتعرض البيانات فيها الي التغيير هنا، في هذا المثال آما هو مبين في الشكل السابق Editable Regionو تسمي المناطق التي سيسمح بتغيير محتواها بـ ، بإختالف الصفحه التي يتم عرضها

Editable Regionلتحديد الـ

Dynamic Web Templates ثم منه أختر Toolbars اختر األمر Viewمن قائمه

Dynamic Web Templatesات تالحظ ظهور شريط أدو


- ٩ -

ثم اختر من شريط ادوات ، قم االن بتنشيط الخليه التي أتفقنا انها ستحوي المحتوي المتغير في الصفحاتDynamic Web Templates الذي قمت بإظهاره األمر Mange Editable Region

الحظ الشكل

مربع الحوار التالي الحظ ظهور Mange Editable Regionبعد الضغط علي


- ١٠ -

نك أعطاء هذه المساحه أسم واضح يسهل لك بعد ذلك التعرف علي محتواهاك يمRegion Nameه نفي خا و الغرض من أنشائها

فليكن أذا األسم الذي ، في هذا المثال سنستخدم هذه المساحه لكتابه المحتوي الرئيسي للصفحه

Article_Bodyسنستخدمه هاهنا هو االن ألضافه األسمAddأضغط

Closeبعد االنتهاء أضغط ، في الصفحه حسب احتياجكRegion يمكنك بالطبع إنشاء اآثر من

ثو قم بحفظ الصفحه

هيا لنري آيف سنبني صفحات جديده مرتبطه به و ، اصبح االن النموذج الذي نرغب في استخدامه جاهزا تحوي نفس التصميم

Create from Dynamic Web Templates أختر األمر Fileمن قائمه ، جديدهإلضافه صفحه

الذي قمنا بحفظه منذ قليلMainالموذج قم االن بإختيار

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

بينما يمكنك أضافه ما تشاء من Menu و الـ Headerغييرات في منطقه الـ ستري انه ال يمكنك اجراء اي ت Aretical_Bodyنصوص او صور او جداول او اي عناصر اخري من عناصر الموقع داخل الجزء الذي اسميناه

في اقل من دقيقه واحده Menuيمكنك االن بنفس الطريق إنشاء باقي صفحات الموقع الموضحه في الـ

Dynamic Web Templatesو لكن ليست هذه فقط هي فائده الـ ، طريقهبنفس ال

My Awards المكتوب علي الزر األوسط لتصبح Awardلنفترض االن انك تريد تغيير النص المسمي

_ صفحات في هذا المثال٥_ في األحوار العاديه آنت ستضطر لتغيير هذا النص في جميع صفحات الموقع Dynamic Web Templatesمع أستخدامك الـ ولكن االمر يختلف

هيا لنري آيف


- ١١ -

و التي تمثل النموذج الذي قمنا بإنشائه منذ قليل في وضع التعديلMain.dwtقم االن بفتح الصفحه

آما تعلمنا في الفصول السابقهMy Awards الي Awardقم بتغيير النص المكتوب علي الزر األوسط من

ه التاليالرساله تالحظ .... ه أضغط االن لحفظ الصفح

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

ات الخاصه بالموقعقم االن بمعاينه الموقع والحظ تطبيق التعديل علي جميع الصفح

إجراء التحديثات عن Serverال يستطيع الـ • Dynamic Web Templatesطريق قراءه الـ

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

موقعك Dynamic Web Templatesيشيع استخدام الـ •

في المواقع التي تحتوي علي مقاالت او موضوعات تحدث اسبوعيا إلنشاء فهرس لهذه المقاالت بحبث يتم تحديث اسم المقاله في

صفحه و احده و تطبيق هذه التحديثات في آافه الصفحات


- ٢ -

إنهـــــــاء العمل

تجربه الموقع و التاآد من عدم وجود اخطاء باستخدام االدوات الموجود في الـ .١Expression web

نشر الموقع .٢

فال يبقي امامك االن سوي التأآد من ، بإنتهاء التصميم انت علي بعد خطوتين من نشر موقعك و الترويج لهايضا يجب ان ، ي موقعك آصفحات ال تؤدي الي روابط او روابط تالفه او ملفات مفقودهعدم وجود أخطاء ف

تعاين موقعك علي متصفح األنترنت آأي زائر لتراجع آيف سيبدو

، مجموعه من االدوات التي تساعدك ألستكشاف األخطاء الموجوده في الموقعExpression Webيوفر لك ه التصميمفهيا لنري آيف سنتمكن من مراجع

ألختبــــار موقعك Site Summary ثم منه أختر األمر Reports األمر Siteأختر من قائمه

تالحظ ظهور معلومات عن ملفات الموقع و اي مشاآل او أخطاء موجوده

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


- ٣ -

Unlinked Filesو تعني انه هناك ملفات ضمن ملفات الموقع ال ترتبط بأي صفحات

سيتم عرض مربع حوار مناسب للتعامل مع الخطأ و Double Clickو لعالج هذه المشكله نضغط علي الخطأ

الشائعهأنواع األخطاء

Unlinked Files ... المشروع ال ترتبط باي صفحاتملفات ضمن ملفات

Slow Pages ... صفحات بطيئه في التحميل

Unverified Hyperlink ... رابط لم يتم التأآد من الملف أو الموقع الموجه اليه

Broken Hyperlink ... رابط يشير الي صفحه او ملف غير موجود

التأآد ان موقعك متوافق مع مختلف متصفحات األنترنت أسفل منطقه Compatibility Task Paneتالحظ ظهور ، Compatibility أختر األمر Task panes قائمه من

التعديل في البرنامج

سيظهر لك مربع حوار " موضح في الشكل السابق "run Compatibility Checkerبالضغك علي زر Compatibility Checker


- ٤ -

Check Whereمن خيارات تيار بين أختبار الموقع آامال او صفحات محددهيمكنك األخ

Check HTML / XHTML Compatibility Withمن خيار

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

Check CSS Compatibility Withمن خيار الذي تريد أجراء اختبار التوافق عليهCSSيمكنك تحديد إصدار

آما بالشكل، بعد األنتهاء من األختبار تظهر النتيجه لتوضح لك اسم الصفحه و رقم سطر الكود الغير متوافق


- ٥ -

نشر موقعك

تحديدا الي خطه األستضافه التي أشترآت بها ، المقصود بنشر الموقع هو رفع ملفات الموقع الي األنترنت ...وقت جميع الزوار في اي حتي يصبح الموقع متاحا الي

و الحظ ظهور مربع الحوار التالي، Publish Site أختر األمر Fileمن قائمه

... الخاص بموقعك FTP ( File Transfer Protocol )سنستخدم ها هنا حساب نقل الملفات

الخاص بكFTPقم بإدخال حساب ، Remote Web Site Locationفي خانه المستخدم و آلمه السر الخاصه بالموقعتظهر لك مربع حوار يطلب منك أسم


- ٦ -

بالمساحه الخاصه بك و عند إتمام اإلتصالبعد إدخال آلمه السر و أسم المستخدم يبدأ البرنامج في هتظهر لك الشاشه التالياإلتصال

ليتم رفع Publish Selected File ثم أختيار Right Clickحيث يمكنك أختيار أي ملف تريد رفعه و الضغط الملف منفردا

ايضا آما تالحظ يوجد باألسفل ثالث خياراتLocal to Remote

حيث تقوم برفع جميع ملفات الموقع من الجهاز الي األنترنت

Remote to Local عكس العمليه السابقه حيث تقوم بنسخ جميع الملفات من علي األنترنت للجهاز و تستطيع أستخدام هذا

ألجرا نسخ احتياطي من ملفات موقعكالخيار

Synchronize و تعني رفع الملفات المختلفه و المحدثه من جهازك لألنترنت و إنزال الملفات المحدثه ... لمساواه الملفات

و الموجوده علي الموقع لجهازك

... إلتمام العمليه Publish Siteثم تقوم بأختيار الخاص بموقعك في اي وقت تريد و من اي مكانDomainيمكنك بعدها الدخول علي الـ

Documents

ﻊﻗﻮﻣ ﻦﻣ ﻒﻠﻤﻟﺍ ﻞﻴﻤﺤﺗ ﻢﺗ ﺔﻠﺻﻮﺒﻟﺍ …kenanaonline.com/files/0097/97409/expression_web.pdf · ) ﺖﻧﺎآ ءاﻮﺳ ﺎﻬﻴﻠﻋ