جلسه بیست و دوم
خب. نرم افزار ویژوال استودیو را باز کنید .
پروژه ای که در دیروز ساختید رو نیز باز کنید. برای من W3C بود.در ویژوال استودیو
2010 برخلاف 2008 یکسری پوشه های پیش فرض ساخته می شود که ما به آنها نیازی نداریم
و باید آنها را پاک کنیم.
من در اینجا مطابق تصویر پوشه های مشخص شده را
از پنجره Solution Explorer با راست کلیک بر روی پوشه
ها و انتخاب گزینه Delete پاک می کنم.
مشاهده تصویر
فایل ها و پوشه هایی که باید حذف شوند عبارتند
از:
Account و About.aspx و Default.aspx و Site.master
شما میتونید هر پوشه ای را که می خواهید به
پروژه تان اضافه کنید. نحوه کار خیلی ساده است. کافی است پوشه راکپی کرده وسپس به
نرم افزار ویژوال استودیوبیایید و در پنجره Solution
Explore
در
قسمت مشخص شده در تصویر راست کلیک کرده و گزینه Paste را انتخاب کنید.
مشاهده تصویر
مثلا من در اینجا می خواهم پوشه تصاویری که
داخل کامپیوتر دارم را به پروژه ام اضافه کنم. شما می توانید پوشه تصاویر من را از
اینجا
دانلود کنید تا شما هم دقیقا مثل من قدم به قدم جلو بیایید.
رمز فایل :w3c.blogfa.com
خب. اگر دقیقا کارهایی که ازتون خواستم را
انجام داده باشید، الان شما هم باید مطابق شکل سه پوشه Scripts و Images و Styles را در پنجره Solution
Explorer داشته
باشید.
مشاهده تصویر
امیدوارم
با این همه تصاویری که من میگذارم مشکلی در لود تصاویر نداشته باشید، اگر در Load کردن تصاویر مشکل
داشتید بر روی لینک مشاهده تصویر که در زیر همه تصاویر قرار داده ام کلیک کنید.
خب
همانطور که میدانید پوشه Scripts برای کدهای جاوا
اسکریپت هست و پوشه Styles برای کدهای CSS . اگر بخوام یک توضیح مختصر در مورد CSS بدم باید خدمتتون عرض
کنم که در بیست جلسه قبلی وبلاگ ،من در مورد HTML صحبت کردم اما در مورد CSS
چیزی نگفتم. CSS کار را راحت کرده است.
فرض کنید ما بخواهیم که مثلا رنگ همه لینک های ما سبز باشد. اگر CSS نبود باید هرجا که لینک
داریم با دستور HTML بگوییم که مثلا رنگ لینک سبز رنگ باشد. اما با CSS ما درون یک فایل می
نویسیم که رنگ لینک ها سبز باشد. همین. دیگه همیشه رنگ لینک ها سبز می شود و نیازی
به تکرار مکررات نیست.
حال
می خواهیم برای پروژه امون بواسطه کدهای CSS قالب بنویسیم . جهت این
کار بر روی پوشه Styles در پنجره Solution Explorer راست کلیک کنید و گزینه
Add
new Item را
انتخاب کنید.
از
پنجره جدید ظاهر شده به دنبال گزینه Style Sheet بگردید و آن را انتخاب
کنید. و بر روی گزینه Add کلیک کنید. مطابق شکل:
مشاهده تصویر
همانطور
که میدانید، کدهای CSS را به سه صورت می توان نوشت:
1.می
توان داخل یک فایل نوشت و آن را فراخوانی کرد.(کاری که الان من می خواهم انجام
دهم.)
2.میتوان
داخل تگ نوشت.
3.می
توان در همان تگ HTML نوشت. مثلا در تگ برای رنگ دادن به لینک ها .
من
در اینجا یک فایل Style Sheet ساختم و می خواهم کدهای CSS قالب سایت را داخل این
فایل بنویسم و در آینده هرجا که خواستم فراخوانی اش کنم.
خب
. فایل Style Sheet را که ساختید با دابل کلیک بر روی آن بازش کنید. حال همزمان که من
کدنویسی می کنم آن راتوضیح نیز می دهم.
body یعنی
کل صفحه
{margin: 0 auto;
ما
برای 4 گوشه متنمون می تونیم حاشیه تعریف کنیم. در اینجا ما میگیم که حاشیه بالا
صفر باشد، بقیه اش را خود مرورگر به صورت اتوماتیک تنظیم کند.راهنمایی
بیشتر
padding:0 auto;
padding فاصله پاراگراف یا متن ما نسبت به 4 طرف هست .فرض کنید داخل یک
خانه جدول، اگر بخواهیم متن از هر طرف این خانه 1 سانتیمتر فاصله داشته باشد باید padding:1cm بگذاریم. در اینجا ما padding بالا را 0 گذاشتیم و
بقیه را auto گذاشتیم که خود مرورگر به صورت اتوماتیک تنظیم کند. راهنمایی
بیشتر
font: [font style] [font variant] [font
weight] [font size]/[line height] [font family]
خب
همانطور که می بینید من ساختار کلی دستور font در CSS رو نوشتم. در پروژه ما
به صورت زیر تعریف می شود.
font: normal 0.8em/1.4em Tahoma , Verdana , Arial
, Georgia , Sans-serif;
خب
در بالا ما در قسمت [font style]
کلمه normal را نوشتم. با این کار من مشخص کردم که متن من Italic یا Bold نباشد
و معمولی باشد.
[font
variable] مشخص
می سازد که حروف متن ما small caps یا large caps باشد یعنی با همه با حروف کوچک باشند یا با حروف بزرگ که من چیزی
ننوشتم یعنی اتوماتیک تنظیم کن.
[font
weight] که با درصد تنظیم می شود شبیه Bold بسته به درصدی که می
گذارید متن را ضخیم تر میکند که من در اینجا مشخص نکرده ام و خالی گذاشتم.
[font
size] / [line height] همانطور که از نامش پیداست اندازه متن را بر ارتفاع خط تقسیم می
کند و کارش این هست که ارتفاع بین خطوط را مشخص می کند. em واحدی است که در اینجا
استفاده می شود. برای تعریف این واحد سایت w3schools
این طور نوشته است:
1em is equal to the current font size. 2em means 2 times the
size of the current font. E.g., if an element is displayed with a font of 12
pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can
adapt automatically to the font that the reader uses
همانطور که می بنید میگه 1em برابر با سایز معمولی
فونت هست. 2em دو برابر سایز معمولی
فونت هست. یعنی اگر سایز فونت 12 باشد. 1em
خودش می شود. 2em سایز فونت را 24 می
کند. حال ما در اینجا 0.8em/1.4em استفاده کردیم. دیگه خودتان از این مجمل بخوانید حدیث مفصل را.
[font
family] گروه فونت: اگر دقت کرده باشید، بعضی از سایت
هایی که در اینترنت باز می کنید، فونتشان به هم می ریزد و نمی توانید بخوانیدشان.
علتش این هست که آن سایت ها از فونتی استفاده می کنند که در سیستم شما تعریف شده
نیست. در اینجا گروه فونت مشخص می کنیم که اگر یک فونتی در سیستم شما موجود نبود ،
به فونت دیگر برود تا متن سایت به هم نریزد. در بالا من گروه فونتم را این ها
گذاشتم.
Tahoma , Verdana , Arial , Georgia , Sans-serif; می دانیم که این فونت
ها درتمام ویندوز ها وجود دارد. اما به هرحال سیستم عامل های زیادی به اینترنت
دسترسی دارند . مک ،لینوکس، سیستم عامل های موبایل مثل آندروید سیمبیان و... ممکن
است بعضی از این فونت هارا نداشته باشند که در اینصورت فونت های دیگر این خانواده
امتحان می شود.
خب تا اینجا یادتون نره داریم چکار می کنیم.
ما داریم یک پروژه فروشگاه الکترونیک موبایل طراحی می کنیم و قدم به قدم با هم
داریم این کار را انجام می دهیم. الان داریم CSS سایت را می نویسیم برای
قالب سایت و کدها را یک به یک توضیح می دهیم.
background:
Transparent url(../Images/back_All.jpg) fixed;
بک گراند /برای اینکه مفهوم Transparent را متوجه شوید به تصویر
زیر دقت کنید.
مشاهده
تصویر
در
اینجا کادر سفید رنگ Transparent شده است و تصویر از پشت آن پیداست.البته برای تنظیم Transparent از پارامتری به نام Opacity باید استفاده کنیم و به آن درصد بدهیم که چقدر شفاف باشد. ما در اینجا تنها از Transparent و بدون هیچ پارامتری استفاده کردیم.
url(../Images/back_All.jpg): در
اینجا مشخص می کنیم که چه عکسی را به عنوان پس زمینه انتخاب کند. اگر پوشه تصاویر
را که من در بالا لینک دادم دانلود کرده باشید و در محل مناسب ریخته باشید. شما هم
این عکس را دارید. منظور از .. که قبل از Images آمده یعنی از این پوشه
ای که الان هستی خارج شو وبه پوشه Images برو . چون همانطور که می دانید الان ما در پوشه Styles هستیم و داریم CSS می نویسیم.
fixed:
در انتها هم مشخص کردیم که تصویر پس زمینه ثابت باشد و از جایش تکان نخورد. دیدی
بعضی از سایت ها وقتی اسکرول می کنیم تصویر هم بالا و پایین می شود . اما در بعضی
دیگر از سایت ها وقتی اسکرول می شود تصویر آن پشت ثابت می ماند و تکان نمی خورد. Fixed یعنی همین. اینجا را ببینید.
Text-align: center;
طراز
متن من وسط چین باشد.
left: auto;
right: auto;
فاصله
چپ و راست متن به صورت اتوماتیک تنظیم شود.
}
خب
ما قالب کلی صفحه را با CSS مشخص کردیم. حال باید به سراغ اجزای صفحه بریم که چون در این جلسه
خیلی طولانی می شود به جلسه بعد موکول می کنیم.
من
این کدها را در ویژوال استودیو نوشتم و یکبار دیگر به صورت کلی در پایین می آورم.
خب
امیدوارم تا اینجا با من پیش آمده باشید. در جلسه بعد ادامه نوشتن قالب سایت را با
هم پی می گیریم. موفق باشید. با احترام علیرضا مهجور
