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

[learninweb]

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

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




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




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




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




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




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




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




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




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




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

---

به ياد داريد که در بخش قبل اين متن را بصورت درشت نمايش داديم. تگ <Strong> نيز به اين علت در اين قسمت وجود دارد. چون متن بصورت Heading1 نمايش داده ميشود عملاً تگ <Strong> عملي انجام نميدهد چون متن Heading1 بصورت درشت نمايش داده ميشود. روي دکمه Design کليک کنيد.

[learninweb]

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


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 کليک کنيد.




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




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




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




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




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




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




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




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

---

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

---

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




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




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




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




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




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




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




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




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

---

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




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




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




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




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




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




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




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




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




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

---

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




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




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




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




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