آموزش تصویری Dreamweaver CS5 قسمت 2

[learninweb]

با سلام خدمت تمامی کاربران گرامی در زیر آموزش تصویری Dreamweaver CS5 را بررسی میکنیم توجه کنید که شما میتواند آموزش Dreamweaver CS5 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش Dreamweaver CS5 دانلود کنید. در انتهای این آموزش تصویری نیز کل آموزش (هم متن و هم تصویری) در یک فایل PDF پیوست است.

قبل از آنکه يک صفحه وب را ايجاد کنيم بايد يک سايت در داخل کامپيوتر تعريف کنيم تا کدهاي HTML تصاوير و ... را در اين سايت (شاخه) ذخيره نمائيم. البته ميتوانيد بدون تعريف سايت نيز يک صفحه ايجاد کنيد ولي در صورتيکه يک سايت تعريف کنيد کارها بسيار ساده‌تر ميشود.براي تعريف و تغيير مشخصات يک سايت از گزينه Manage Sites واقع در منوي Site استفاده ميکنيم. يک راه ساده‌تر استفاده از پنجره Files است. روي گزينه Files کليک کنيد.




روي گزينه Manage Sites کليک کنيد.




براي ايجاد يک سايت جديد روي دکمه New کليک کنيد.




روي گزينه Site کليک کنيد.
در صورتي که در اينجا خطايي مشاهده کرديد نشان دهنده اين است که سرويس IIS سيستم عامل شما به درستي نصب نشده و نرم افزار Dreamweaver نميتواند از اين سرويس استفاده کند. براي اطلاعات بيشتر در مورد نحوه نصب، راهاندازي و تنظيم سرويس IIS به نرمافزار آموزش شبکه شرکت انياک مراجعه کنيد.
اين پنجره داراي دو برگه Basic و Advanced ميباشد. برگه Basic مانند يک wizard مراحل را يکي يکي ميپرسد و تنظيم ميکند. براي آنکه به امکانات بيشتري دسترسي داشته باشيد روي برگه Advanced کليک کنيد.
در قدم اول بايد نام سايت وب را در جعبه متن Site Name وارد کنيم. براي مثال عبارت Site1 را تايپ کنيد.
اکنون بايد محل ذخيره سازي فايل‌هاي اين سايت را تعيين کنيم. براي اين کار روي دکمه مشخص شده در قسمت Local Site folder کليک کنيد.




با استفاده از دکمه مشخص شده ميتوانيد يک شاخه جديد ايجاد کنيد. روي اين دکمه کليک کنيد تا يک شاخه جديد ايجاد شود.




عبارت S1 را تايپ کنيد و سپس کليد Enter را فشار دهيد.




تا اينجا يک شاخه به نام S1 ايجاد شده است. دوباره دکمه Enter صفحه کليد را فشار دهيد تا وارد اين شاخه بشويم.
روي دکمه Select کليک کنيد تا اين شاخه انتخاب شود.




براي آنکه به امکانات بيشتري دسترسي داشته باشيد روي Advanced کليک کنيد.




اکنون گزينه Refresh local file list automatically فعال ميباشد. با فعال بودن اين گزينه هر بار که فايل‌هايي را download ميکنيد (در شاخه انتخاب شده کپي ميشوند) ليست فايل‌هاي داخل سايت نيز به روز ميشود.توسط گزينه Default images folder ميتوانيد تعيين کنيد که تصاوير در کدام شاخه ذخيره ميشوند. اين کار نيز مانند تعيين Local root folder ميباشد. در ادامه با استفاده از دکمه کنار گزينه Default images folder يک شاخه به نام I1 در داخل شاخه S1 ميسازيم و آن را انتخاب ميکنيم.




در قسمت HTTP address آدرس اينترنتي سايتي که در حال ساخت آن ميباشيد را وارد ميکنيد. براي مثال ميخواهيم فايل‌هاي ايجاد شده در نرمافزار Dreamweaver در سايت www.Learninweb.com ذخيره شوند. در ادامه نام سايت را در جعبه متن HTTP address وارد ميکنيم.
روي دکمه Save کليک کنيد.

---

روي دکمه Done کليک کنيد.

[learninweb]

در پنجره Site ميتوانيد شاخه اصلي وب سايت خود را مشاهده کنيد. هر فايل يا شاخه‌اي که در سايتي که تعريف کرده‌ايم قرار داشته باشد در اين قسمت نمايش داده ميشود. اکنون تعريف سايت انجام شده است و ميتوانيم در ادامه تصاوير و فايل‌هاي لازم را در آن ايجاد کنيم.




تا اينجا متوجه شده‌ايد که با تعريف سايت نرم افزار Dreamweaverکاري ميکند که تمامي فايل‌هاي يک سايت در يک شاخه قرار داشته باشند. اين کار باعث ميشود تا زماني که ميخواهيد فايل‌ها و تصاوير ايجاد شده را در سايت خود در اينترنت قرار دهيد فقط کافيست که فايل‌هاي داخل شاخه سايت را در سايت خود در اينترنت کپي کنيد. براي مثال فرض کنيد که فايل‌هاي تصاوير سايت وبي که در حال ساخت آن هستيد در مکان‌هاي مختلف هارد ديسک شما قرار داشته باشد. حال اگر تمامي اين فايل‌ها را نيز در کنار هم قرار دهيد اکثر تصاوير نمايش داده نميشوند زيرا آدرس آنها در سايت وب نامعتبر است و آدرس‌ها فقط بر روي کامپيوتر شما درست ميباشد.در صورتيکه بر روي چندين سايت کار کنيد با استفاده از ليست باز شونده مشخص شده ميتوانيد سايت‌هاي ديگري را انتخاب کنيد تا بتوانيد بر روي آنها کار کنيد.




اکنون نوبت به آن رسيده است يک صفحه جديدي ايجاد کنيم. براي ايجاد يک صفحه جديد روي گزينه HTML کليک کنيد.




همانطور که توسط کادر قرمز مشخص شده است، نام فايلي که بر روي آن کار ميکنيد در تيتر پنجره نرم افزار Macromedia Dreamweaver نمايش داده شده است. نام اين فايل اکنون Untitled-1 است. تيتر اين صفحه HTML نيز در قسمت مشخص شده با کادر آبي تعيين ميشود که اکنون Untitled Document ميباشد.




تيتر يک صفحه وب که در بالاي پنجره کاوشگر نمايش داده ميشود به کاربران ميگويد که صفحه‌اي که در حال مشاهده آن هستند مربوط به چه موضوعي مي‌باشد. ميخواهيم تيتر اين صفحه وب را Page1 تعيين کنيم. براي مشاهده بهتر جعبه متن نام تيتر، بر روي قسمت مشخص شده کليک کنيد.
تيتر يک صفحه وب که در بالاي پنجره کاوشگر نمايش داده ميشود به کاربران ميگويد که صفحه‌اي که در حال مشاهده آن هستند مربوط به چه موضوعي ميباشد. ميخواهيم تيتر اين صفحه وب را Page1 تعيين کنيم. براي اين کار در جعبه متن Title دابل کليک کنيد.




عبارت Page1 را تايپ کنيد و سپس کليد Enter را فشار دهيد.




در ادامه ميخواهيم اين صفحه را ذخيره کنيم. منوي File را باز کنيد.




با استفاده از گزينه Save صفحه ايجاد شده ذخيره ميشود. با استفاده از گزينه Save As… صفحه ايجاد شده با يک نام جديد ذخيره ميشود. چون اين صفحه هنوز تحت هيچ نامي ذخيره نشده است با انتخاب هر يک از دو گزينه Save و Save As… نام فايل پرسيده ميشود. با استفاده از گزينه Revert ميتوانيد فايل را ذخيره نکرده و آن را دوباره بخوانيد. با اين کار تغييرات ذخيره نشده و به حالت اول که فايل را باز کرديم
برميگرديم. اکنون گزينه Revert فعال نميباشد زيرا اين فايل تا کنون ذخيره نشده است.




روي گزينه Save کليک کنيد.

---

عبارت Index.htm را تايپ کنيد.
اکنون ميخواهيم فايل را با نام Index.htm در شاخه اين سايت ذخيره کنيم. توجه کنيد که بايد تمامي فايل‌هاي اين وب سايت را در داخل اين شاخه ذخيره نمائيم. البته ميتوانيد در داخل شاخه اصلي وب سايت (همين شاخه) شاخه‌اي ديگر ايجاد کنيد و فايل‌ها را در آن ذخيره کنيد. روي دکمه Save کليک کنيد.

---

توجه کنيد که فايل ذخيره شده در پنجره Files در داخل شاخه Site1 نمايش داده شده است. حال ميخواهيم اين صفحه که فقط تيتر آن را تعيين کرده‌ايم، مشاهده کنيم. براي اين کار روي دکمه Previewکليک کنيد.




مشاهده ميکنيد که اين منو داراي چهار گزينه است. با استفاده از گزينه اول ميتوانيد صفحه ايجاد شده را با استفاده از کاوشگر Internet Explorer مشاهده کنيد.
با انتخاب گزينه دوم صفحه در برنامه Device Center باز مي‌شود و مي توانيد صفحه را براي گوشي هاي مختلف موبايل طراحي نماييد .
با استفاده از گزينه Adobe BrowserLab مي توانيد نحوه نمايش صفحه طراحي شده را در مرورگرهاي ديگر مشاهده کنيد.
با انتخاب گزينه آخز نيز ميتوانيد يک کاوشگر ديگر را معرفي کنيد. زمانيکه نرمافزار‌ Dreamweaverرا نصب ميکنيد اين نرمافزار به دنبال کاوشگرها مختلف ميگردد و اين منو را ميسازد در صورتيکه کاوشگر ديگري مانند Netscape بر روي اين کامپيوتر نصب شده بود يک گزينه ديگر جهت مشاهده صفحه ايجاد شده با کاوشگر Netscape نمايش داده ميشد.با توجه به اين گزينه مشخص است که با استفاده از دکمه F12 نيز ميتوانيد اين صفحه را در کاوشگر IE مشاهده کنيد. روي گزينه اول کليک کنيد.




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




در صورتيکه يک فايل را تغيير دهيد و قبل از آنکه آن را ذخيره کنيد بخواهيد آن را مشاهده کنيد، نرم افزار Dreamweaver از شما ميخواهد که ابتدا آن را ذخيره کنيد تا آن را در ادامه نمايش دهد. ولي ميتوانيد به نرمافزار Dreamweaver بگوييد که يک فايل موقت ساخته و آن را نمايش دهد و سپس فايل موقت را پاک ميکند. براي اين کار بايد منوي Edit را باز کنيد و سپس گزينه Preferences را انتخاب کنيد و در برگه Preview in Browser گزينه Preview Using Temporary File را فعال کنيد.
روي دکمه Close پنجره IE کليک کنيد.




مشاهده ميکنيد که در اين صفحه دو خط متن تايپ کرده‌ايم.
در صورتيکه بخواهيد اين صفحه را در يک کاوشگر مشاهده کنيد همان چيزي را ميبينيد که در اين صفحه نمايش داده شده است. در Dreamweaver صفحات وب را بصورت Visual ايجاد ميکنيد و ديگر لازم نيست که در يک ويرايشگر متن دستورات HTML را تايپ کنيد. براي مثال در اين صفحه با استفاده از ماوس و صفحه کليد يک متن تايپ کرديم و تيتر صفحه را نيز تعيين کرده‌ايم. اين کار به سادگي انجام شد در صورتيکه کد HTML آن به سادگي کارهاي انجام شده نمي‌باشد.
در نهايت Dreamweaver نيز يک کد HTML ايجاد ميکند تا کاوشگرها بتوانند آن را اجرا کنند. براي مشاهده کد HTML ايجاد شده روي دکمه Code کليک کنيد. تا وارد حالت نمايش Code بشويم.




اکنون کدهاي HTML را مشاهده ميکنيد. در Dreamweaver ميتوانيد کد HTML و صفحه ايجاد شده را نيز باهم مشاهده کنيد. براي اين کار روي دکمه Split کليک کنيد.




اکنون دو پنجره در يک صفحه نمايش داده شده‌اند. روي دکمه Design کليک کنيد تا به حالت طراحي برويم.




همانطور که در بخش قبل بيان شده براي تغيير خصوصيات هر عنصر از پنجره Properties واقع در پايين پنجره نرم افزار استفاده ميکنيم. ميخواهيم خصوصيات خط اول اين متن را تغيير دهيم. براي اين کار کليد حرکت مکان نما به سمت بالا را فشار دهيد.
دکمه Shift را فشرده نگه داشته و سپس کليد Home را فشار دهيد تا متن انتخاب شود.
اکنون با تغيير خصوصيات در پنجره Properties خصوصيات متن انتخاب شده تغيير پيدا ميکند. براي مثال روي دکمه Bold کليک کنيد تا متن درشت شود.




دکمه End صفحه کليد را فشار دهيد.
براي مشاهده نتيجه کار در کاوشگر دکمه F12 را فشار دهيد.
روي دکمه yes کليک کنيد تا فايل ذخيره شده و نمايش داده شود.




مشاهده ميکنيد که متن بصورت درشت نمايش داده شده است. در بخش‌هاي بعدي به بررسي کامل تغيير خصوصيات متن‌ها ميپردازيم. در اين بخش فقط ميخواستيم تا با محيط Dreamweaver بيشتر آشنا شويم.
توجه کنید که شما میتواند آموزش Dreamweaver CS5 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش Dreamweaver CS5 دانلود کنید.