شرح برنامج دريم ويفر cs6

الحجم: px

بدء العرض من الصّفحة:

Download "شرح برنامج دريم ويفر cs6"

جود السمان
منذ 4 سنوات سابقة
المشاهدات:

1 Start Adobe Dreamweaver CS5 [Amin Mahmoud] بالعربى 12/16/2014 [Type text]

2 2014 شرح برنامج دريم ويفر cs5 اعداد امين محمود عبدالدايم 2

3 ششغ تش ا ط دسي ويفش cs5 ا عضء االوي شاشح ا رشؼية خالي شاشح ا رشؼية ي ى ه فرػ ا فاخ ا ر ذع ع يها ؼا يا open recent items او فرػ ف ظذيذ create new او ذع ا ضيذ ع ا ذسي ويفش top features videos وي ى عذ اظهاسها شج اخشي don t show again وي ى ا رؽى ف اظهاسها ا مائ ح Edit->preferences->general -> Show welcome screen 3

واظهح ا ثش ا ط ا رشذية االس ا ششغ ذىظذ ف اع ا ثش ا ط وذؽرىي ع ايمى اخ ا ىصىي ا سشيع رغيش ساؼح ا ع وذعشيف ا ىلع وا مىائ وتعط االيمى اخ ا خاصح تا رؽى ف ا ثش ا ط رغييش ساؼح ا ع وظع ها ص او ىاذة ا ىىد او

4 واظهح ا ثش ا ط ا رشذية االس ا ششغ ذىظذ ف اع ا ثش ا ط وذؽرىي ع ايمى اخ ا ىصىي ا سشيع رغيش ساؼح ا ع وذعشيف ا ىلع وا مىائ وتعط االيمى اخ ا خاصح تا رؽى ف ا ثش ا ط رغييش ساؼح ا ع وظع ها ص او ىاذة ا ىىد او الش ي عا ا مىائ 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

ششيػ ادواخ ا صفؽح document toolbar ا رشذية االس ا ششغ ذظ ش ا ى د فمظ ف ا ظفحح ذظ ش ا ى د ا رظ ي ف ا ظفحح ذض ش ا رظ ي فمظ ف ا ظفحح ؼشع ذظ ي ا ظفحح ػ ا رظفح ا خاص تا ثش ا ح ذ ى ه ػشع ذظ ي طفحره ػ ا

5 ششيػ ادواخ ا صفؽح document toolbar ا رشذية االس ا ششغ ذظ ش ا ى د فمظ ف ا ظفحح ذظ ش ا ى د ا رظ ي ف ا ظفحح ذض ش ا رظ ي فمظ ف ا ظفحح ؼشع ذظ ي ا ظفحح ػ ا رظفح ا خاص تا ثش ا ح ذ ى ه ػشع ذظ ي طفحره ػ ا رظفح ا ز ذشيذج ا ضاف ا ا ثش ا ح ي ى اضافح ا حزف ا رظفحاخ ا مائ ح Edit->prefrences->Preview in browser code split design Live view ا ؼشع ػ ا رظفح title ػ title ظفحح 6 Property inspector ي خذ خضء ا خظائض ذ مائيا ف اعف ا ظفحح ذغرخذ رؼذي ف خظائض ا دضء ا ز ذم ترحذيذج ف ا ظفحح ثال ارا ل د ترحذيذ ط سج عرظ ش ه خظائض ا ظ سج الضافح ا رؼذي في ا 5

- panel Insert ىؼح ادخاي ا ع اصش يظ ش و ا تا شى ي Common تستخذو فى ادخال انعناصر انشائعة يثم انصىر وانجذاول Layout رؼا غ ذخطيظ ا ظفحح ذحر ػ ذاج اي div Spry نهتعايم يع انقىائى ان تحركة Form Contains

6 - 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

7 new site خالي ا مائ ح site فاذه في اخراس ل الخرياس اع لغ حذد ا ىا ا ز ذشيذ حفظ وي ى ذغييش ا او ا فاخ واس ا ىلع ا مائ ح ا را يح Site->manage sites->edit 7

8 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

9 ا شاء ف ظذيذ تؼذ ذحذيذ ذؼشيف اع ا لغ ا او حفظ ا فاخ ا ر ذغرؼ ا ف ذظ ي لؼه ي ى ه اال ا د ذثذا ف ا شاء ا ظفحاخ ا خاطح ت لؼه الضافح طفحح خذيذج م تفرح ا مائ ح ا شاشح ا را يح file ث خراس new عرظ ش م page type تاخرياس ع ا ف ا ز شيذ ا شاؤ يى latyout html م تاخرياس ذخطيظ ا ظفحح خراس ع ا ظفحح html/xhtml/html5 DOCType Layout css حذد ىا حفظ اي css ي ى حفظح ف head ا ف ف css خذيذ ي ى ايضا ا حاق ف css ىر ب غثما attach css file يحر ا ثش ا ح ػ ذ ث د خا ضج ي ى ه ا ثذء ت ا ا رؼذي في ا 9

م تىراتح ا ض ف طفحح ا رظ ي ذحذيذج ث خراس ا مائ ح text ا غذ ح ا مائ ح insert حذد ارا شيذ ا فؼ تا ض دؼ ح ػ ا سئيغ ا فشػ ا لائ ح شذثح غيش شذثح ىراتح فمشج داخ ا رظ ي م تا ضغظ ػ م تا ضغظ ػ Shift+Enter

10 م تىراتح ا ض ف طفحح ا رظ ي ذحذيذج ث خراس ا مائ ح text ا غذ ح ا مائ ح insert حذد ارا شيذ ا فؼ تا ض دؼ ح ػ ا سئيغ ا فشػ ا لائ ح شذثح غيش شذثح ىراتح فمشج داخ ا رظ ي م تا ضغظ ػ م تا ضغظ ػ Shift+Enter enter حح ا فاذيح ؼ عطش ف ا فمشج ي ى ادخاي ض ػ طشيك اعريشاد ف سد ادخا ح داخ ا ظفحح خالي File->import->word document formatting خراس حا ح ا ض ا شاد ادخا ا ارا وا د ض فمظ تذ ذ غيك ا ض تر غيك ي ى غخ فمشج ىر تح ف ف سد خاسخ داخ ا ظفحح ثاششج ػ طشيك copy/paste ي ى غخ ا تا ر غيك ا خ د ف ف ا سد فؼ ر ه ز ة مائ ح ا را يح Edit->preferences->copy/paste 11

11 ي خذ استغ اخرياساخ 1- ادخاي ا ض فمظ 2- ادخاي ا ض تر غيك ا فمشاخ ا م ائ 3- ادخاي ا ض تر غيك اعاع ث bold /italic 4- ادخاي ا ض تر غيك وا 11

يسرع اي css الظافح ا ر سيك واالسرايالخ صفؽح اي html ويىى ذعشيف اي css ف ا ىىد وا را يىظذ شالز غشق رشغي اي css داخ ا صفؽح االو : داخ ا ىس فسح صاي <h1 style="background-color: red ;"> this Is H1 </h1>

12 يسرع اي 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 وي ى

13 افزج css ا ىصف ذعشض ظ يع االسرايالخ ا ىظىدج ف ا صفؽح all ذعشض االسراي ا خاص تا راض ا ؽذد صفؽح ا رص ي Current عشض ع يع االسرايالخ ف ا صفؽح ا ر ل د ترص ي ها ا مي ا خاصح تاالسراي ا ؽذد ا شاشح 3 وي ى اظافح خاصيح ظذيذج Add Property ع css rule ظذيذج ع ذعذي ع css rule ا ؽذدج لائ ح االسرايالخ ا ؽاق ف css ا خاسض اصا ح css rule لائ ح االسرايالخ ف ا شاشح 3 css ع وس / ذاض عي مى تا خطىاخ ا را يح ا شل الظافح 13

14 new css rule خراس css panel خراس ا دضء)ا ع ( ا شاد اضافح css عرظ ش ا ا شاشح ا را يح ح ث 14

15 لائ ح selector type سرظهش لائ ح عذج اخرياساخ وه Class Id وذعاف الي ع صش html وذعاف ع صش واؼذ فمػ html Tag رؽذيذ ع صش عي html Compound ع ؼسة اخرياسن ا ع اصش ف صفؽح ا رص ي ث حذد Rule Definition ارا و ا س ؽفع css ف ا صفؽح this document ok و عغػ new stylesheet file او ف ف ظذيذ only سرظهش ا مائ ح ا را يح 15

16 الدساج خذ ي داخ ا ظفحح م تا خط اخ ا را يح Insert->table عرظ ش لائ ح حذد خال ا ػذد ا ظف ف rows االػ ذج columns ا غافح تي ا خاليا cell spacing ػشع ا دذ ي table width يى 911 تىغ 16

17 - ذ ح ػذد ا خاليا م تاخرياس ا ث ضغظ و يه ي ي تا ا ط ث خراس table Merge Cells - رمغي ا خاليا فظ ا مائ ح خراس Split Cells 17

18 ظ ح و ا تا شى 18

19 ؼ لائ ح خا ثيح حذد ا دضء ا شاد ادخاي ا مائ ح فيح ضغ 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

20 ؼ css مائ ح م ترحذيذ اي td li اي tag selector ضي list-style-type #navside ul li { list-style-type: none; } م تؼ اي css ا خاص ب a ر ه تاخرياسج tag selector ث م تؼ css rule خذيذ 21

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

ملفّات مشابهة

Eng.M.Abou Elela Ubuntu Install 1 Facebook /Computer Learn Books

Eng.M.Abou Elela Ubuntu Install 1 Facebook /Computer Learn Books 1 Install Ubuntu أ ت ر )Ubuntu( إزذ ذ ص ٠ ؼاخ ١ ىظ ألخ ضج عطر ا ىرة أخ ضج ا ساع ب ا س ح ا خ اد ٠ ى ه ذس ١ غخره ظا األ ت ر ا ث ل ت غخ ا ػ ٠ ى ه ا ٠ ضا غخ ا ػ ا فالػ ١ س خالي تش ا ح Windows 7 USB DVD ا اعط