Start Adobe Dreamweaver CS5 [Amin Mahmoud] بالعربى 12/16/2014 [Type text]
2014 شرح برنامج دريم ويفر cs5 اعداد امين محمود عبدالدايم 2
ششغ تش ا ط دسي ويفش cs5 ا عضء االوي شاشح ا رشؼية خالي شاشح ا رشؼية ي ى ه فرػ ا فاخ ا ر ذع ع يها ؼا يا open recent items او فرػ ف ظذيذ create new او ذع ا ضيذ ع ا ذسي ويفش top features videos وي ى عذ اظهاسها شج اخشي don t show again وي ى ا رؽى ف اظهاسها ا مائ ح Edit->preferences->general -> Show welcome screen 3
واظهح ا ثش ا ط ا رشذية االس ا ششغ ذىظذ ف اع ا ثش ا ط وذؽرىي ع ايمى اخ ا ىصىي ا سشيع رغيش ساؼح ا ع وذعشيف ا ىلع وا مىائ وتعط االيمى اخ ا خاصح تا رؽى ف ا ثش ا ط رغييش ساؼح ا ع وظع ها ص او ىاذة ا ىىد او الش ي عا ا مىائ The Application bar ذغييش ساؼح ا ع Workspace switcher ويؽرىي ع ايمى اخ رغغيش شى ا صفؽح ص view, and Code view وعشض ا صفؽح ع ا رصفػ Design view, Live ششيػ لىائ صفؽح The Document toolbar ىؼح panels ذساعذن ف ا رؽى ف شغ ه وذؽرىي ع ا ىؼح ا خاصح ب insert وا ىؼح ا خاصح ب, css ا ؽح ا خاصح تا رعا ع فاخ ا ىلع وي ى اظهاسها واخفاؤها ا مائ ح window وذظهش ا صفؽح ا ر ذع تها وذعذي فيها ذص ي ه خال ح ي ى ا رؽى ف ؼع سؤيح وسلح ا ع zoom وايعا مى تاخرياس اي tagا زي ع ع يح و عذج ىرىتا و ا ف ا صىسج <body> افزج ا صفؽح document window ششيػ ا ؽا ح واخرياس ا راض The Tag -Status bar selector 1 2 3 4 5 6 4
ششيػ ادواخ ا صفؽح document toolbar ا رشذية االس ا ششغ ذظ ش ا ى د فمظ ف ا ظفحح ذظ ش ا ى د ا رظ ي ف ا ظفحح ذض ش ا رظ ي فمظ ف ا ظفحح ؼشع ذظ ي ا ظفحح ػ ا رظفح ا خاص تا ثش ا ح ذ ى ه ػشع ذظ ي طفحره ػ ا رظفح ا ز ذشيذج ا ضاف ا ا ثش ا ح ي ى اضافح ا حزف ا رظفحاخ ا مائ ح Edit->prefrences->Preview in browser code split design Live view ا ؼشع ػ ا رظفح 1 2 3 4 5 title ػ title ظفحح 6 Property inspector ي خذ خضء ا خظائض ذ مائيا ف اعف ا ظفحح ذغرخذ رؼذي ف خظائض ا دضء ا ز ذم ترحذيذج ف ا ظفحح ثال ارا ل د ترحذيذ ط سج عرظ ش ه خظائض ا ظ سج الضافح ا رؼذي في ا 5
- panel Insert ىؼح ادخاي ا ع اصش يظ ش و ا تا شى ي Common تستخذو فى ادخال انعناصر انشائعة يثم انصىر وانجذاول Layout رؼا غ ذخطيظ ا ظفحح ذحر ػ ذاج اي div Spry نهتعايم يع انقىائى ان تحركة Form Contains buttons for creating forms and inserting form elements, such as search, month, and password. Favorites تس ح نك بتج يع اكثر االدوات ي انقائ ة Text insert رؼا غ اال ع ح ا خاطح تا ظ ص ث,h, ul, ol انتى تستع هها فى يكا واحذ 6
new site خالي ا مائ ح site فاذه في اخراس ل الخرياس اع لغ حذد ا ىا ا ز ذشيذ حفظ وي ى ذغييش ا او ا فاخ واس ا ىلع ا مائ ح ا را يح Site->manage sites->edit 7
Use the Files panel to view and manage the files on your Dreamweaver site. رؼا اداسج ا فاخ ف لؼه.. ذحذد ا او ا فاخ اث اء ذؼشيفه لغ ا مائ ح site ي ى ه اضافح د ذ خذيذ ا حزف د ذ خ د ػ طشيك Right click->new folder حزف Right click->edit->delete اضافح طفحح خذيذج Right click->new file شؤيح فاخ ا لغ ػ خ اصن ػ طشيك Right click-> Explore 8
ا شاء ف ظذيذ تؼذ ذحذيذ ذؼشيف اع ا لغ ا او حفظ ا فاخ ا ر ذغرؼ ا ف ذظ ي لؼه ي ى ه اال ا د ذثذا ف ا شاء ا ظفحاخ ا خاطح ت لؼه الضافح طفحح خذيذج م تفرح ا مائ ح ا شاشح ا را يح file ث خراس new عرظ ش م page type تاخرياس ع ا ف ا ز شيذ ا شاؤ يى latyout html م تاخرياس ذخطيظ ا ظفحح خراس ع ا ظفحح html/xhtml/html5 DOCType Layout css حذد ىا حفظ اي css ي ى حفظح ف head ا ف ف css خذيذ ي ى ايضا ا حاق ف css ىر ب غثما attach css file يحر ا ثش ا ح ػ ذ ث د خا ضج ي ى ه ا ثذء ت ا ا رؼذي في ا 9
م تىراتح ا ض ف طفحح ا رظ ي ذحذيذج ث خراس ا مائ ح text ا غذ ح ا مائ ح insert حذد ارا شيذ ا فؼ تا ض دؼ ح ػ ا سئيغ ا فشػ ا لائ ح شذثح غيش شذثح ىراتح فمشج داخ ا رظ ي م تا ضغظ ػ م تا ضغظ ػ Shift+Enter enter حح ا فاذيح ؼ عطش ف ا فمشج ي ى ادخاي ض ػ طشيك اعريشاد ف سد ادخا ح داخ ا ظفحح خالي File->import->word document formatting خراس حا ح ا ض ا شاد ادخا ا ارا وا د ض فمظ تذ ذ غيك ا ض تر غيك ي ى غخ فمشج ىر تح ف ف سد خاسخ داخ ا ظفحح ثاششج ػ طشيك copy/paste ي ى غخ ا تا ر غيك ا خ د ف ف ا سد فؼ ر ه ز ة مائ ح ا را يح Edit->preferences->copy/paste 11
ي خذ استغ اخرياساخ 1- ادخاي ا ض فمظ 2- ادخاي ا ض تر غيك ا فمشاخ ا م ائ 3- ادخاي ا ض تر غيك اعاع ث bold /italic 4- ادخاي ا ض تر غيك وا 11
يسرع اي css الظافح ا ر سيك واالسرايالخ صفؽح اي html ويىى ذعشيف اي css ف ا ىىد وا را يىظذ شالز غشق رشغي اي css داخ ا صفؽح االو : داخ ا ىس فسح صاي <h1 style="background-color: red ;"> this Is H1 </h1> ا صا يح: داخ ا ىس <head> وذىى وا را <head> <style type="text/css"> body {background-color: #FF0000;} </style> </head> ا صا صح : مى تىراتح ا ىىد ف صفؽح خاسظيح تا رذاد.css ش ؽمح تصفؽح اي html وا را <link rel="stylesheet" type="text/css" href="style/style.css" /> ؼيس عط ىا ا ف ف ا خاصيح href 12
افزج css ا ىصف ذعشض ظ يع االسرايالخ ا ىظىدج ف ا صفؽح all ذعشض االسراي ا خاص تا راض ا ؽذد صفؽح ا رص ي Current عشض ع يع االسرايالخ ف ا صفؽح ا ر ل د ترص ي ها ا مي ا خاصح تاالسراي ا ؽذد ا شاشح 3 وي ى اظافح خاصيح ظذيذج Add Property ع css rule ظذيذج ع ذعذي ع css rule ا ؽذدج لائ ح االسرايالخ ا ؽاق ف css ا خاسض اصا ح css rule لائ ح االسرايالخ ف ا شاشح 3 css ع وس / ذاض عي مى تا خطىاخ ا را يح ا شل 1 2 3 4 5 6 7 8 الظافح 13
new css rule خراس css panel خراس ا دضء)ا ع ( ا شاد اضافح css عرظ ش ا ا شاشح ا را يح ح ث 14
لائ ح selector type سرظهش لائ ح عذج اخرياساخ وه Class Id وذعاف الي ع صش html وذعاف ع صش واؼذ فمػ html Tag رؽذيذ ع صش عي html Compound ع ؼسة اخرياسن ا ع اصش ف صفؽح ا رص ي ث حذد Rule Definition ارا و ا س ؽفع css ف ا صفؽح this document ok و عغػ new stylesheet file او ف ف ظذيذ only سرظهش ا مائ ح ا را يح 15
الدساج خذ ي داخ ا ظفحح م تا خط اخ ا را يح Insert->table عرظ ش لائ ح حذد خال ا ػذد ا ظف ف rows االػ ذج columns ا غافح تي ا خاليا cell spacing ػشع ا دذ ي table width يى 911 تىغ 16
- ذ ح ػذد ا خاليا م تاخرياس ا ث ضغظ و يه ي ي تا ا ط ث خراس table Merge Cells - رمغي ا خاليا فظ ا مائ ح خراس Split Cells 17
ظ ح و ا تا شى 18
ؼ لائ ح خا ثيح حذد ا دضء ا شاد ادخاي ا مائ ح فيح ضغ td id ا شاد وراتح ا مائ ح في ا ىراتح ا مائ ح <td width="200" valign="top" id="navside"> <ul> <li> <a href="#"> ا شئيغيح </a> </li> <li> <a href="#"> اذظ ت ا </a> </li> <li> <a href="#"> رداذ ا </a> </li> </ul> </td> 19
ؼ css مائ ح م ترحذيذ اي td li اي tag selector ضي list-style-type #navside ul li { list-style-type: none; } م تؼ اي css ا خاص ب a ر ه تاخرياسج tag selector ث م تؼ css rule خذيذ 21
#navside ul li a { color: #FECE00; text-decoration: none; display: block; background-color: #8A3F00; text-align: right; font-size: 36px; } م تؼ اي css ا خاص ب a:hover ر ه تاخرياسج tag selector ث م تؼ css rule خذيذ 21