1 أماني الرباعي.أ

1434-1435

المحاضرة التاسعة مادة تصميم صفحات انترنت

أماني الرباعي . أ

الثاني: المستوى البرمجة تقنية : دبلوم

فيجوال ستديو بيئة العمل بناء المواقع باستخدام

وهف مىىىا بىاطؼتها جصمم مىاكم اهترهذ وبالؼبم ىحد زهص كلى بئت كمل فجىا طخدى ن طىف

SharePoint و Dreamweaverاللدد م البرامج التي جمىىىا م جصمم مىاكم مثل

ولى املفاهم التي طىف أكدمها هي (Visual Studio 2010)بئت اللمل التي طىف أكمل كليها هي : مالخـت

. هفظها في إلاصدازاث املخخلفت للفجىا طخدى

File>– New>– Web Siteكم بدشغل الفجىا طخدى ثم كم بلمل مالي

طىف ـهس ل شاشت جدخىي كلى كدد م اللىالب املخخلفت التي مىى اللمل كليها هما هى مىضح

بالصىزة الخالت

أكخلد أن الصىزة حغني ك الىثحر م الشسح

هاطم ملىكل MyFirstWebSiteوكم باخخاز (ASP.NET Empty Web Site)ألان هما باخخاز اللالب - 3

باوشاء املىكم 2010ختى لىم الفجىا طخدى (OK)كم بالظغؽ كلى شز - 4

بلد الظغؽ كلى شز املىافلت طىف يىن لد مىكم مشابه للمىكم املىحىد في الصىزة الخالت - 5

بلد إلاهتهاء م واطؼت الفجىا طخدى ألان أطخؼم أن أكى لىم مبرون كلى ئوشاؤهم أو مىكم ب

. الخؼىاث الظابلت بىجاح خان الىكذ لىخلسف أهثر كلى بئت اللمل م خال الصىزة الخالت

الخعسف على بيئت العمل:

أزجىكم املصعلحاث الخاليت مهم جدا وسىف )هأحي ألان لشسح املىاػم أو ألاحصاء املخخلفت في الصىزة

( حسمعها جخكسز دوما

( Main Menu)اللائمت السئيسيت (1

, وسخ ,كص ,كائمت كادت شانها هشأن أي كائمت أخسي خث مىى م خاللها ئطافت مشسوق حدد

وغحرها م الىؿائف امللسوفت باإلطافت ئلى وؿائف أخسي طى هخؼسق ئله الخلا في دزوض أخسي ئن شاء هللا

( ToolBar Area) شسيغ ألادواث (2

م ئله مثل شسؽ ألادواث دخىي كلى بلع الىؿائف اللامت واملظخخدمت بىثرة لغسض الىصى الظس

. اللص واليسخ والحفف

( ToolBox)صىدوق ألادواث (3

ئطافت ,ئطافت شز حدد ,م خال صىدوق ألادواث مى الخلامل مم اللىاصس املخخلفت مثل ئطافت صىزة

جا ئن شاء هللا كائمت وغحرها م اللىاصس التي طىف جخللمها جدز

( Properties Window)هافرة الخصائص (4

امللصىد بها الخصائص الخابلت لللىصس الري كمذ بخددده فللى طبل املثا في الصىزة الظابلت فان

ػبلا هره .(Use Dynamic Port)أو (Virtual Path)الخصائص املىحىدة جابلت للمشسوق هفظه مثل

الري كمذ بخددده فلى وان اللىصس صفدت فظىف ججد أن (Item)الخصائص جخخلف باخخالف اللىصس

(. Image)أو اللىصس م هىق (Button)خصائصه جخخلف ك اللىصس م هىق شز

( Document Window)هافرة املسدىداث (5

هي مىؼلت اللملاث ئن صح الخلبحر فم خاللها طىف جلىم باللمل كلى اللىصس املخخلفت طىاء

بذ (C# ,VB.NET)أو شفساث بسمجت (ASP.NET pages)واهذ او ملفاث حافا طىس

( Solution Explorer)مسخعسص املشسوع (6

م (Solution Explorer)لىم ا املخخلفت لد خث مىى م خاللها (Project)بلسض حمم املشاز

مباشس ئطافت صفداث أو ئطافت مجلداث أو خرف مجلد أو ئطافت مشسوق حدد ئو حلدل خصائص

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

إوشاء صفحخك ألاولى:

ختى جلىم باوشاء صفدخ ألاولى أخخاج مى أن جلىم بهره الخؼىاث

يىن والخالي (1 C:\CodeReloadedكم باوشاء مجلد داخل الس ي و

ASP.NET Empty Webكم بفخذ الفجىا طخدى وكم باوشاء مىكم حدد وئختر اللالب الخالي (2

Site وال جيس ى أن جلىم بدفـه بداخل املجلد الري أوشأهه في الخؼىة ألاولى ولى ئطم املشسوق

HelloWorldهما هى مىضح في الصىزة الخالت .

املىكم الري كمىا باوشائه (Solution Explorer) طىف ججد في مسبم ا OKبلد الظغؽ كلى شز (3

دخىي فلؽ كلى ملف واخد ئطمه . web.configو

هما هى مىضح في الصىزة HelloWorld حددة ولى ئطمها اهترهذألان طىف هظف صفدت (4

الخالت

http://codereloaded.net/wp-content/uploads/AddItem1.png

Installed Template م Visual Basicػبلا ئذا هىذ جفظل الفجىا بظ فلم باخخاز

طىف خم ئطافت الصفدت وطىف جيىن بالشيل الخالي Addبلد الظغؽ كلى شز (5

Design وأظا HTML Surface ختى خم جلظم الشاشت ئلى هصفحن Splitغؽ كلى ضألان كم با (6

Surface

م الظغؽ كلى Toolbox م كائمت ا Labelكم باطافت هىترو م هىق (7 ئلى الصفدت ك ػس

Label1الىىترو وسحبه ئلى الصفدت وطىف ججد أن الىىترو دمل إلاطم

أصبدذ (Properties Window)كخد الظغؽ كلى الىىترو طىف ججد أن هافرة الخصائص (8

وفي خالخىا طىف هلىم فلؽ بخغحر كمت . جدخىي كلى مللىماث هرا اللىصس الري مىى حغحرها

Hello world from ASP.NET ئلى Label م Textالخاصت

كد ئولىظذ كلى (Text)الخاصت با (Properties Window)طىف ججد أن الخغحراث التي كمذ بىخابتها في

. الصفدت ئظا

أو بالظغؽ كلى شز الدشغل املىحىد في F5بلد إلاهتهاء م الخؼىاث الظابلت كم بالظغؽ كلى (9

الفجىا طخدى ختى جخمى م زؤت الصفدت كلى املخصفذ

Okبلد ذل طىف ـهس ل زطالت وول ماكل فلله هى الظغؽ كلى شز (10

هره السطالت طىف جـهس مسة واخدة فلؽ كىد جىفر البرهامج للمسة الاولى: مالخـت

ح وطىف جيىن الصفدت بالشيل الخالي فطىف خم فخذ املخص (11

visaul stdioأطخؼم أن أكى لىم ألان مبرون للد كمخم بلمل أو مىكم لىم باطخخدام

ادزاج بعض ألادواث:

الخحكم بالخعىط واحجامها وألىانها

م شسؽ ألادواث الخاص بها ك ػس

م والدزاج اللىائم املسجبت والغحر مسجبت وغحر ذل h6 ئلى h1الدزاج اللىاو

لخغحر اهىاق الخؼىغ

لخغحر أحجام الخؼىغ

ادزاج الصىز

.كىمي بدفف الصىزة املساد ادزاحها في هفع مجلد الخاص بمىكم الاهترهذ (1

الى املىكم املساد ادزاحها فه طخـهس ToolBoxم (Image)الصىزة بسحب ألان طىف هظف (2

الصىزة بالشيل الخالي

ImageURL كدلي الخاصت propertiesالطافت الصىزة اطغؼي كلى الصىزة و م حصء ا (3

. OKباخخاز الصىزة املؼلىبت وم ثم

Height , Width مثل propertiesمىى الظغف كلى الصىزة وحلدل خصائصها في حصء ا (4

ImageAlign , Borderwidth , borderstyl وغحرها أو اكادة جحجم الصىزة م ملابع

.الخحجم املدؼت بالصىزة

Property Description

Height and Width لخلدل الؼى واللسض للصىزة

ImageAlign لخلدل مداذاة الصىزة باليظبت لباقي الىص

Borderstyle لخلدل شيل خدود الجدو

Borderwidth لخلدل كسض خدود الجدو

جب أن جحجم الصىزة كبل ئدزاحها في الصفداث أله كىدما جحجم الصىزة باطخلما طماث وطم

HTML ل الصىزة الاصلت ئلى همبىجس املظخخدم زغم أن املظخلسض لسض الصىزة بحجم أصغس خم ججز

ادزاج الصىز السخعمالها كسوابغ حشعبيت( مللفاث html أو غيرها من امللفاث)

.كىمي بدفف الصىزة املساد ادزاحها في هفع مجلد الخاص بمىكم الاهترهذ (1

الى املىكم املساد ادزاحها فه ToolBoxم (Imagebutton)الصىزة بسحب ألان طىف هظف (2

طخـهس الصىزة بالشيل الخالي

ImageURL كدلي الخاصت propertiesالطافت الصىزة اطغؼي كلى الصىزة و م حصء ا (3

. OKباخخاز الصىزة املؼلىبت وم ثم

باخخاز الصفدت املساد زبؼها بالصىزة وم PostBackUrl كدلي الخاصت propertiesم حصء ا (4

. OKثم

(ملىاكع خازجيت )ادزاج الصىز السخعمالها كسوابغ حشعبيت

الى املىكم املساد ادزاحها فه ToolBoxم (Hyperlink)اداة السابؽ بسحب طىف هظف (1

طخـهس الصىزة بالشيل الخالي

ImageURL كدلي الخاصت propertiesالطافت الصىزة اطغؼي كلى الصىزة و م حصء ا (2

. OKباخخاز الصىزة املؼلىبت وم ثم

دNavegateURL كدلي الخاصت propertiesم حصء ا (3 . بىخابت اطم املىكم الري جس

إدزاج ازجباظاث حشعبيت

ادزاج ازجباط حشعبي مللفhtmlخازجي

غ حشلبي اثم ئزجب Formatكىمي بخـلل الىص املساد حللت هازجباغ حشلبي و اخخازي اللائمت (1

convert to Hyperlink.

الطخلساض الصفداث املىحىده طـهس مسبم خىاز browseطـهس مسبم خىاز اطغؼي كلى شز (2

.ok و okاخس لسض حمم الصفداث كىمي باخخاز الصفدت املساد زبؼها بالىص وم ثم

وغحر ذل م الخصائص Href خاصت propertiesلخغحر الصفدت مىىىا ذل م م حصء ا (3

.مثل لىن السابؽ

ادزاج ازجباط حشعبي لعىىان بسيد الكترووي

غ حشلبي اثم ئزجب Formatكىمي بخـلل الىص املساد حللت هازجباغ حشلبي و اخخازي اللائمت (1

convert to Hyperlink.

د الالىترووي mailto واخخازي typeطـهس مسبم خىاز اطغؼي كلى شز (2 وم ثم اهخبي كىىان البر

وم ثم مىافم

ادزاج ازجباط حشعبي ملىكع خازجي

غ حشلبي اثم ئزجب Formatكىمي بخـلل الىص املساد حللت هازجباغ حشلبي و اخخازي اللائمت (1

convert to Hyperlink.

د http واخخازي typeطـهس مسبم خىاز اطغؼي كلى شز (2 وم ثم اهخبي كىىان املىكم الري جس

ازجه ش

أعلى الصفحت أو أسفلها)ادزاج ازجباط حشعبي ملكان آخس داخل هفس الصفحت (مثال

واخخاز أو ولمت فيها ثم وطلها داخل الىطىم املساد السحىق اليهاالرهاب ئلى الفلسة (1

< /A< ... >"أي اسم تريده="‎A name >

غ اثم ئزجب Formatكىمي بخـلل الىص املساد حللت هازجباغ حشلبي و اخخازي اللائمت (2

.convert to Hyperlinkحشلبي

وم ثم اهخبي كىىان املىكم other واخخازي typeطـهس مسبم خىاز اطغؼي كلى شز (3

ازجه د ش الري جس

الطخلساض الصفداث املىحىده طـهس مسبم خىاز اخس لسض browseاطغؼي كلى شز (4

okحمم الصفداث كىمي باخخاز الصفدت هفظها وم ثم

. Okوم ثم # (الاطم الري كمتي باخخازه )اطفي (5

جدوو إدزاج

(insert Table ) ثم ادزاج حدو (Table)م اللائمت حدو اخخازي طـهس مسبم خىاز خصائص الجدو

وغحر ذلcolumns وألاكمدة rows اخخازي كدد الصفىف Sizeالحجم

الخاص بالجدو propertiesوحلدل الخصائص م حصء ا ToolBoxمى ادزاج حدو م

: أكظام3والخصائص كبازة ك

:دخىي كلى (Layout Section)كظم الخصمم

Alignment

مداذاة الجدو في الصفدت للمحن أو الظاز أو الىطؽ (املداذاة)

Cell Padding

جددد املظافت بالبىظل التي جفصل مدخىي الخلت ك خدود الخلت

Cell Spacing

جددد املظافت بالبىظل بحن الخالا املخجاوزة

Specify width/height

جددد حجم الجدو

:دخىي كلى ((Borderكظم الحدود

Size الحجم :

ددد حجم الحدود

Color اللىن :

ددد لىن الحدود واللىن الافتراض ي هى اللىن السمادي

: دخىي كلى Backgroundكظم الخلفت

: Background Color لىن الخلفيت

ددد لىن الخلفت ئما لخلت ملىت أو ليامل الجدو

Background Picture :

وطم صىزة هخلفت للجدو

إضافت صفىف و أعمدة

هظغؽ إلدزاج صفىف أو أكمدة ئطافت هظم املإشس في الخلت املساد ئطافت صفىف أو أكمدة بلدها ثم

Rows or Columnsثم هخخاز صفىف أو أكمدة insert هخخاز ئدزاج بالصز المحن و

أو الجدوو بأكملهو أعمدةأصفىف حرف

أو delete rows أو delete columns ثم هظغؽ بالصز الام ثم هخخاز خرفهاطم مإشس في الخلت املساد

delete tabl

إضافت زأس للجدوو

Captionوم ثم insert ئدزاج في الجدو م ثم هظغؽ بالصز المحن وهخخاز خلت أي هظم مإشس في

اللمل مم الخالا

إضافت خالا

هظم مإشس في الخلت املساد اطافت خالا بلدها او كبلها ثم هظغؽ بالصز الام ثم هخخاز ادزاج خالا

حرف الخالا

delete cells ثم هظغؽ بالصز الام ثم هخخاز خرفهاطم مإشس في الخلت املساد

دمج الخالا

د دمجها ثم هظغؽ بالصز الام و م اللائمت امليظدلت هخخاز حلدل وهخخاز (Modify)هددد الخالا التي هس

(merg cells)دمج خالا

جلسيم الخالا

د جلظمها ثم هظغؽ بالصز الام و م اللائمت امليظدلت هخخاز حلدل (Modify)هددد الخالا التي هس

لت الخلظم واللدد ثم (split cells)وهخخاز جلظم خالا .okطـهس مسبم خىاز هددد ػس

مكىهاث الىمىذجإدزاج

. كمالء خدمت بسهامج واحهت خال م )الشائلت ألادواث(ألادواث في صىدوق اللىاصس أهمطىلسض

الىىافر بسامج فى شىكا ألادواث أهثر فه و ألادواث صىدوق هى هرا أوال

الدازج أي اداة هلىم بسحب ألاداة من صىدوق ألادواث وهضعها في املكان املساد

أداة العىىان(lable:)

زطم صىدوق مظخؼل داخل الىمىذج للسض كىىان أو زطالت أو مللىمت ملىت الغسض م اطخخدامها

فه دون الحاحت ئلي الخلدل كليها أو حغحرها في همؽ الدشغل

: Label Propertiesصائص أداة العىىان خ

وظيفتها الخاصيت

Name اطم ألاداة التي مى الخلامل ملها في هافرة اليىد.

Text هخابت أو ملسفت الىص املىخىب داخل ألاداة.

Text Align مداذاة الىص املىخىب داخل ألاداة.

Font ملسفت أو حغحر هىق خؽ الىص املىخىب داخل ألاداة.

Fore Color ملسفت أو حغحر لىن الىص املىخىب داخل ألاداة.

Back Color ملسفت لىن خلفت ألاداة هما مى حغحره.

ئدزاج صىزة داخل ألاداة , ئما أن جيىن الصىزة م ملف مدفىؾ كلى اللسص , أو

.أن جيىن الصىزة مىحىدة داخل وائ آخس

مسبع هص(textbox:)

ظمذ بادخا باهاث في الصىدوق املددد لرل: زطم صىدوق أو مظخؼل داخل هافرة الىمىذج ليي

. لسض الباهاث داخله مم ئمياهت الخغحر فيهاأو

: Properties Textbox خصائص أداة صىدوق الىص

وظيفتها الخاصيت

Name زاحم أداة اللىىانLabel.

Text زاحم أداة اللىىانLabel.

Text Align زاحم أداة اللىىانLabel.

Font زاحم أداة اللىىانLabel.

Fore Color زاحم أداة اللىىانLabel .

Back Color زاحم أداة اللىىانLabel.

Read Only حلل هره ألاداة مخاخت في همؽ الدشغل للىخابت واللساءة أم لللساءة فلؽ.

Multi Line حلل هره ألاداة لها كدة أطؼس للىخابت بداخلها.

Scroll Bars س )حلل هره ألاداة لها أشسػت جمسا .(أفلت أو زأطت أو الاثىحن ملا

Enabled ملسفت ما ئذا واهذ ألاداة مخاخت في همؽ الدشغل للخلامل مها أم غحر مخاخت.

MaxLengt اكص ى ػى لى ازدها ان هددد اكص ى ػى دخله املظخخدم في مسبم الىص فما

اطخلما هره الخاصت والتي طخمىله م ادخا اي هص اػى م كل طىي

اللمت املدددة

ToolTipText م هده الىص الري ـهس كىد وكىف مىشس املاوض كلى ألاداة يىن ك ػس

.الخاصت

PasswordCha لى ازدها ان وغحر الحسوف املدخلت في مسبم الىص الي اي زمص م السمىش مثل ما خم

* في مسبم ولمت املسوز خم جددد السمص م هره الخاصت مثال هظم كمت ادخاله

.وهجسب# او

أداة صىدوق الاخخباز(Check Box :)

لخددد اخخاز واخد أو أهثر م مجمىكت اخخازاث , هما ظمذ باخخاز Check Boxظخخدم شز الاخخباز

. أهثر م اخخاز أو جسن حمم الاخخازاث

:Check Box Propertiesخصائص أداة صىدوق الاخخباز

وظيفتها الخاصيت

Text زاحم أداة اللىىانLabel.

Font زاحم أداة اللىىانLabel.

Fore Color زاحم أداة اللىىانLabel.

Image زاحم أداة اللىىانLabel.

Appearance ؿهىز الصز كلى شيل شز كادي(Normal)أو شز غاػع (Push Button).

Checked ملسفت أو حلل الصىدوق في خالت اخخاز(True) أو كدم اخخاز (False).

Checked State حلل الصىدوق في خالت اخخازCheckedأو كدم اخخاز , Unchecked ,

Indeterminateأو شبه اخخاز

أداة الاخخياز(Radio Button):

لخددد اخخاز واخد فلؽ م مجمىكت اخخازاث , وال ظمذ باخخاز Radio Buttonظخخدم شز الاخخاز

. أهثر م خاز أو بترن حمم الاخخازاث

:Radio Button Propertiesصائص أداة شز الاخخياز خ

وظيفتها الخاصيت

Text زاحم أداة اللىىانLabel.

Font زاحم أداة اللىىانLabel.

Fore Color زاحم أداة اللىىانLabel.

Image زاحم أداة اللىىانLabel.

Appearance زاحم أداة صىدوق الاخخبازCheck Box

Checked زاحم أداة صىدوق الاخخبازCheck Box

أداة صىدوق اللائمتList Box:

كائمت بأطماء أشخاص , أو أطماء دو ) حظخخدم هره في الاخخفاؾ بمجمىكت م اللىاصس مثل (1

مى اطخخدامها في كسض هره ألاطماء أو الخلدل فيها , هما مى (الخ ....... , أو كىاصم , و

أو مصفىفت م الباهاثا زبؽ صىدوق اللائمت بلاكدة باهاث خث لمل هأهه كامىدا

ا. أظا

ول كىصس داخل صىدوق اللائمت له زكم مثل فهسطخه داخل الصىدوق , وهرا السكم بدأ (2

لني فهسض اللىصس الثاوي , وهىرا ختى نهات كائمت (1) لني فهسض اللىصس ألاو وباملثل (0)م

. اللىاصس

هرا الصىدوق كد شغل مظاخت هبحرة م هافرة الىمىذج ك اطخخدامه في كسض أهثر م (3

.كىصس في آن واخد

:List Box Propertiesخصائص أداة صىدوق اللائمت

وظيفتهاالخاصيت

Back Color زاحم أداة اللىىانLabel.

Font زاحم أداة اللىىانLabel.

Fore Color زاحم أداة اللىىانLabel.

Horizontal Scroll Bar س أفلي أو بدون وهي جأخر حلل الصىدوق له شسؽ جمس

.(False) أو (True) اللم

Items وطم كىاصس داخل الصىدوق , هما مى حلدل هره الىاصس أو خرفها.

Count ئجاد كدد اللىاصس املىحىدة داخل صىدوق اللائمت.

Sorted وهي جأخر اجسجب أو كدم جسجب كىاصس صىدوق اللائمت هجائا

.(False) أو(True) اللم

أداة صىدوق السسدCombo Box:

هى هفع الغسض م أداة صىدوق اللائمت , ولى صىدوق الظسد ال شغل مظاخت هبحرة م هافرة

الىمىذج كىد اطخخدامه طىي مظاخت كد حظاوي مظاخت صىدوق الىص , خث مى اطخخدام صىدوق

. الظسد هصىدوق هص في ئدخا الىصىص ئله

:Combo Box Propertiesخصائص أداة صىدوق السسد

وظيفتها الخاصيت

Text زاحم أداة اللىىانLabel.

Back Color زاحم أداة اللىىانLabel.

Font زاحم أداة اللىىانLabel.

Fore Color زاحم أداة اللىىانLabel.

Items وطم كىاصس داخل الصىدوق , هما مى حلدل هره الىاصس أو خرفها.

Count ئجاد كدد اللىاصس املىحىدة داخل صىدوق اللائمت.

Sorted وهي جأخر اجسجب أو كدم جسجب كىاصس صىدوق اللائمت هجائا

.(False) أو(True) اللم

الدازج املكىهاث بشكل مىظم كىمي بادزاجها داخل جدوو : مالحظت مهمت