ارسال پاسخ 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 3
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش تصویری Dreamweaver CS5 قسمت 3
08-01-2011, 03:44 PM (آخرین ویرایش در این ارسال: 12-17-2012 07:35 PM، توسط learninweb.)
ارسال: #1
آموزش تصویری Dreamweaver CS5 قسمت 3
با سلام خدمت تمامی کاربران گرامی در زیر آموزش تصویری Dreamweaver CS5 را بررسی میکنیم توجه کنید که شما میتواند آموزش Dreamweaver CS5 را به همراه چند بخش آموزشی دیگر که بصورت شبیه سازی شده و تعاملی درس داده شده است و رایگان نیز میباشد از لینک آموزش Dreamweaver CS5 دانلود کنید. در انتهای این آموزش تصویری نیز کل آموزش (هم متن و هم تصویری) در یک فایل PDF پیوست است.

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

[تصویر:  001.gif]


روي فايل Index.htm دابل کليک کنيد.

[تصویر:  002.gif]


با استفاده از Headingها ميتوانيد اندازه متن را به صورت از قبل تعيين شده تغيير دهيد. در زبان HTML از Heading1 تا Heading6 تعريف شده است، که در ادامه آنها را بررسي ميکنيم. براي انتخاب متن خط اول دکمه Shift را فشرده نگهداشته و سپس کليد Home را فشار دهيد.
روي ليست باز شونده Format کليک کنيد.

[تصویر:  003.gif]


در اين ليست 6 نوع Heading وجود دارد. روي گزينه Heading1 کليک کنيد.

[تصویر:  004.gif]


اکنون متن با فرمت Heading1 نمايش داده شده است. فرمت Heading1 بزرگترين حالت و فرمت Heading6 کوچکترين حالت است. معمولاً از Heading1 ، 2 و 3 براي عنوان‌ها و زيرعنوان‌ها استفاده ميشود. Heading4 مانند يک متن معمولي ميباشد که بصورت درشت نمايش داده ميشود. Heading5 و 6 براي توضيحات کوچکي که در پايين صفحه نوشته ميشود مناسب ميباشد. ( مانند توضيحات محفوظ بودن حق کپي)
براي آنکه اين متن در وسط صفحه نوشته شود روي منوي Format کليک کنيد.

[تصویر:  005.gif]


در اين منو گزينه‌هاي مختلفي براي کار با متن‌ها وجود دارد. براي مثال با استفاده از گزينه Paragraph Format ميتوانيد متن را بصورت Heading1 تا 6 تبديل کنيد. با استفاده از منوي Align ميتوانيد نحوه تراز کردن متن را تغيير دهيد. بر روي گزينه Align کليک کنيد.

[تصویر:  006.gif]


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

[تصویر:  007.gif]


با اين کار متن در وسط صفحه قرار گرفت با استفاده از گزينه‌هاي Align ميتوانيد متن را بر روي صفحه تراز کنيد.ايجاد پاراگرافهاهمانطور که ميدانيد با استفاده از دکمه Enter ميتوانيد به يک خط پايين تر برويد و متن را تايپ کنيد. براي مثال در اين متن ابتدا عبارت welcome to Learninweb.com تايپ شده است و سپس کليد Enter فشرده شده و عبارت بعدي نوشته شده است. در صورتيکه يک متن در چندين خط نيز نوشته شود و فشردن کليد Enter يک پاراگراف جديد ايجاد ميشود.
در زبان HTML پاراگراف‌ها با باز شدن و بسته شدن تگ <p> نمايش داده ميشوند. براي مشاهده اين موضوع روي دکمه Code کليک کنيد.

[تصویر:  008.gif]


در اين کد متن خط دوم داخل تگ <p> قرار دارد.

[تصویر:  009.gif]


با استفاده از تگ <h1> نيز تعيين شده است که متن خط اول بصورت Heading1 نمايش داده شود. توسط خصوصيت align="center" نيز تعيين شده است که متن Heading1 در وسط خط قرار بگيرد.

[تصویر:  010.gif]

به ياد داريد که در بخش قبل اين متن را بصورت درشت نمايش داديم. تگ <Strong> نيز به اين علت در اين قسمت وجود دارد. چون متن بصورت Heading1 نمايش داده ميشود عملاً تگ <Strong> عملي انجام نميدهد چون متن Heading1 بصورت درشت نمايش داده ميشود. روي دکمه Design کليک کنيد.
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
08-09-2011, 03:58 PM (آخرین ویرایش در این ارسال: 12-17-2012 07:34 PM، توسط learninweb.)
ارسال: #2
RE: آموزش Dreamweaver CS5 قسمت 3
[تصویر:  011.gif]


در ادامه چند خط ديگر متن وارد ميکنيم.


Welcome to Eniacmedia.com

This webpage is produced by Dreamweaver CS3! You are learnig Macromedia Dreamweaver CS3 by Eniac interactive CD's. For more information about HTML language you can use learning HTML, JavaScript & CSS CD. All of the 3 titels are just in one CD! It's a good choise to buy this CD!


همانطور که مشاهده ميکنيد متن بصورت يک پاراگراف مستقل و تراز از سمت راست نمايش داده شده است. براي آنکه متن بهتر نمايش داده شود ميخواهيم تراز آن را تغيير دهيم. ابتدا بايد متن مورد نظر را انتخاب کنيم. دکمه Shift صفحه کليد را فشرده نگهداشته و سپس دکمه Home را فشار دهيد.
دکمه Shift را فشرده نگهداشته و دو بار کليد حرکت مکان نما به سمت بالا را فشار دهيد.
براي آنکه اين متن تراز شود روي منوي Format کليک کنيد.

[تصویر:  012.gif]


بر روي گزينه Align کليک کنيد.

[تصویر:  013.gif]


روي Justify کليک کنيد.

[تصویر:  014.gif]


در اين متن چند غلط املايي نيز وجود دارد. با استفاده از امکان Check Spelling اين نرمافزار ميتوانيد بصورت خودکار آن را پيدا کنيد. براي اين کار منوي Commands را باز کنيد.

[تصویر:  015.gif]


براي بررسي غلط‌هاي املايي روي گزينه Check Spelling کليک کنيد.

[تصویر:  016.gif]


مشاهده ميکنيد که اولين غلط املايي پيدا شد. طبق فرهنگ لغت نرم افزار Dreamweaver در کلمه webpage بايد بين دو حرف web و page يک فاصله اضافه شود. روي دکمه Change کليک کنيد تا اين تغيير انجام شود.

[تصویر:  017.gif]


مشاهده ميکنيد که کلمه webpage به web page تغيير يافته است. کلمه learning نيز به اشتباه learnig تايپ شده است و يک حرف n در آن جا افتاده است. براي درست کردن اين کلمه در ليست روي عبارت درست دبل کليک کنيد.

[تصویر:  018.gif]


اکنون مشاهده ميکنيد که کلمه titlesنيز اشتباه تايپ شده است. روي دکمه Change کليک کنيد.

[تصویر:  019.gif]


کلمه Choice نيز به اشتباه با S نوشته شده است. چند کلمه در قسمت Suggestions به شما پيشنهاد شده است که ميتوانيد از آنها استفاده کنيد کلمه Choice نيز در داخل اين ليست وجود دارد. روي گزينه Choice دابل کليک کنيد.

[تصویر:  020.gif]

به همين ترتيب براي دو گزينه دوم و سوم نيز عمل ميکنيم. البته ميتوانستيم تمامي سه گزينه را انتخاب کنيم و سپس از دکمه Ordered List استفاده کنيم.
به غير از اين دو حالت حالت‌هاي ديگري نيز وجود دارد که ميتوانيد آنها را از طريق پنجره List Properties انتخاب کنيد. براي مشاهده اين پنجره منوي Format را باز کرده و سپس منوي فرعي List را باز کنيد و گزينه Properties را انتخاب نمائيد
در محيط نرمافزار Dreamweaver ميتوانيد فونت متن هايي که تايپ ميکنيد را تغيير دهيد. براي مثال ميخواهيم فونت خط اول را تغيير دهيم. در ادامه خط اول را انتخاب ميکنيم.
بر روي آيکون CSS کليک کنيد.


[تصویر:  031.gif]


بر روي ليست بازشونده Font کليک کنيد.

[تصویر:  032.gif]


اکنون ميتوانيد يک سري از فونت‌ها را مشاهده کنيد. روي گزينه Arial, Helvetica, sans-serif کليک کنيد.

[تصویر:  033.gif]


اکنون بايد يک کلاس در CSS تعريف کنيم و ويژگي مورد نظر خود را در اين کلاس تعريف کنيم. ابتدا بايد نامي براي اين کلاس انتخاب کنيد. عبارت Class1 را تايپ کنيد.
بر روي دکمه OK کليک کنيد.

[تصویر:  034.gif]


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

[تصویر:  035.gif]


اکثر فونت‌هايي که در اين ليست وجود دارند بر روي تمامي کامپيوترها موجود هستند در صورتيکه بخواهيد ميتوانيد يک فونت جديد نيز به اين ليست اضافه کنيد. براي اين کار روي گزينه Edit Font List کليک کنيد.

[تصویر:  036.gif]


در اين قسمت فونت‌هاي نصب شده در کامپيوتر شما نمايش داده شده‌اند و ميتوانيد فونت مورد نظر خود را انتخاب کنيد.
روي فونت Tahoma کليک کنيد.

[تصویر:  037.gif]


روي دکمه مشخص شده کليک کنيد. تا فونت به ليست سمت چپ اضافه شود.

[تصویر:  038.gif]


به همين ترتيب ميتوانيد چند فونت ديگر نيز به ليست سمت چپ اضافه کنيد تا درصورتيکه فونت اول وجود نداشت از فونت دوم استفاده شود. در صورتيکه ليست فونت‌هاي آماده را نگاه کنيد آنها نيز شامل چند فونت هستند. روي دکمه OK کليک کنيد.

[تصویر:  039.gif]


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

[تصویر:  040.gif]

روي ليست باز شونده Size کليک کنيد.

[تصویر:  041.gif]


در اين ليست از عدد 9 تا 36 را ميتوانيد انتخاب کنيد. البته عددي مثل 11 در اين ليست وجود ندارد که ميتوانيد آن را در جعبه متن ليست باز شونده Size تايپ کنيد. با استفاده از گزينه Small فونت را کوچکتر ميکنيد. هر چه تعداد xهاي کنار گزينه بيشتر باشد فونت مقدار بيشتري کوچک ميشود. با استفاده از گزينه Large نيز فونت بزرگتر ميشود. روي گزينه x-Large کليک کنيد.

[تصویر:  042.gif]


در اين جا ما نام Class2 را براي اين کلاس CSS انتخاب کرده ايم. بر روي دکمه OK کليک کنيد.

[تصویر:  043.gif]


با اين کار کلمه Eniac بزرگتر شده است. اين کار باعث ميشود که اين کلمه در متن بيشتر نشان داده شود و تأکيد بيشتري بر آن بشود.
ميخواهيم اين کلمه بصورت مورب و قرمز نمايش داده شود. براي اين کار روي دکمه Italic کليک کنيد.

[تصویر:  044.gif]


مشاهده ميکنيد که متن بصورت مورب نمايش داده شده است. براي تغيير رنگ متن روي دکمه Text Color کليک کنيد.

[تصویر:  045.gif]


روي رنگ قرمز مشخص شده کليک کنيد.

[تصویر:  046.gif]


مشاهده ميکنيد که اکنون رنگ متن به رنگ قرمز تبديل شده است. بجاي تعيين رنگ ميتوانيد کد رنگ را در جعبه متن کنار دکمه Text Color نيز وارد کنيد. اين کد بصورت هگزادسيمال و RGB ميباشد. در صورتيکه بخواهيد اندازه اين متن به حالت اوليه برگردد ميتوانيد از ليست باز شونده Size گزينه None را انتخاب کنيد. براي آنکه متن از حالت انتخاب خارج شود در قسمت مشخص شده کليک کنيد.‌

[تصویر:  047.gif]


اکنون ميتوانيد کلمه Eniac را بهتر مشاهده کنيد. ميخواهيم در فاصله بين خط کنوني و خط بعدي يک خط افقي رسم کنيم. روي منوي Insert کليک کنيد.

[تصویر:  048.gif]


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

[تصویر:  049.gif]


روي دکمه Horizontal Ruler کليک کنيد.

[تصویر:  050.gif]

مشاهده ميکنيد که يک خط افقي رسم شده است. در پنجره خصوصيات اين عنصر ميتوانيد ابعاد آن را تنظيم کنيم. داخل جعبه متن w کليک کنيد.

[تصویر:  051.gif]


عدد 50 را تايپ کنيد.
روي ليست باز شونده مشخص شده کليک کنيد.


[تصویر:  052.gif]


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

[تصویر:  053.gif]


با اين کار تعيين کرديم که ميخواهيم طول اين خط برابر با 50% صفحه نمايش باشد. در صورتيکه گزينه Shading را غير فعال کنيد خط بصورت بدون سايه نمايش داده ميشود. امکان تغيير رنگ اين خط در زبان HTML و در نتيجه در نرمافزار Dreamweaver وجود ندارد.
براي مشاهده اين صفحه در کاوشگر کليد F12 را فشار دهيد.
روي دکمه Yes کليک کنيد.


[تصویر:  054.gif]


در Dreamweaver ميتوانيد کاراکترهاي خاصي را در صفحه درج کنيد. براي اين کار بايد از منوي Insert سپس منوي فرعي HTML را باز کرده و منوي Special Characters را باز نمائيد. در اين منو يک سري کاراکترهاي خاص وجود دارند در صورتيکه کاراکتر مورد نظر شما در گزينه‌هاي اين منو وجود ندارد گزينه Other را انتخاب نمائيد.

دانلود نرم افزار آموزشی
دانلود مستقیم - شبیه سازی شده - تعاملی - تصویری
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
09-21-2013, 07:33 PM
ارسال: #3
RE: آموزش تصویری Dreamweaver CS5 قسمت 3
سلام. ممنون از سایت خوبتون. فرمت فایل چیه؟

یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 2 مهمان

دانلود نرم افزار آموزشی برای اندروید
دانلود نرم افزار آموزشی برای ویندوز