جلسه بیست و سوم
در جلسه قبلی در مورد body که مشخصات کل صفحه ما بود صحبت کردیم. حال می خواهیم کمی در مورد اجزاء صفحاتمون صحبت کنیم.
#container
قبل از شروع اجازه بدید کمی توضیح دهم. در CSS سه جور ما می تونیم کد بنویسیم.
1.اینکه نام تگ رو ذکر کنیم و خصوصیات رو داخل { } بنویسیم. در جلسه قبلی ما همین کار رو کردیم در مورد تگ body.
2.خودمون یک id یا یک شناسه منحصر به فرد بسازیم. جهت این کار قبلش با شارپ یا "#" آیدی رو می سازیم و سپس این ID را هرجا که خواستیم به کار می بریم. به مثال زیر دقت کنید.
همانطور که در تصویر می بینید، با شارپ یک ID به نام para1 ساخته شده و سپس در تگ p فراخوانی شده که من با فلش قرمز رنگ مشخص کرده ام.
3.کلاس بسازیم. قبل از نام کلاس نقطه می آید . مثلا .ali و هنگام فراخوانی کلاس هم کلمه کلیدی class بکار می رود. به مثال زیر دقت کنید.
اگر این کد را داخل یک نوت پد بنویسید و با پسوند html ذخیره اش کنید . حاصل تصویر زیر می شود.
این دوتای آخر با هم تفاوت هایی دارند که به نظرم برای راهنمایی بیشتر بهتر هست اینجا رو بخونید. منبع خوبیه.
خب برگردیم به بحث خودمون.
ما درحال نوشتن یک ID هستیم. چرا که با علامت # نام شروع شد.
کل ID را من در یک تصویر آوردم. فکر می کنم، واضح باشد و نیازی به توضیح نباشد. شما هم در پروژه تون گام به گام بنویسید و انجام دهید. باور کنید خیلی مهم هست که قدم به قدم انجام بدهید و جلو بیایید.
در بالا من عرض یا width را 765 پیکسل مشخص کردم و گفتم کادر یا border نمی خواهم و آن را با none مشخص کردم. طراز متن را right یا راست گذاشتم و رنگ پس زمینه را با اعداد هگزادسیمال آبی نفتی گذاشتم.
حال هرجا بخواهم از این خصوصیات استفاده کنم باید از کلمه کلیدی ID و نام آیدی که container هست استفاده کنم به این صورت : ID=container .
حال می خواهم یک کلاس بسازم به نام txtmain .
همانطور که در تصویر می بینید، کلاسی به نام txtmain ساختم و در آن نوع فونت ، سایز فونت ، اندازه کادر و طراز متن را مشخص کردم و این کلاس را من می توانم هرجا که بخواهم با کلمه کلیدی class به کار ببرم.
به همین صورت کلاس هایی به نام های txtl و txtr میسازم.برای متن های چپ به راست و راست به چپ.
این دو کلاس هم دقیقا مثل بالایی هست تفاوتشان در این هست که در اینجا از Direction استفاده کردیم که برای مشخص کردیم جهت متن هست. این که از راست به چپ باشد یا از چپ به راست.
خب قسمت CSS اینجا تمام.
از اینجا به بعد به صورت کاملا عملی می خواهیم با Visual Studio 2010 کار کنیم.
طراحی نوار منو برای قالب فروشگاه
خب. منو را ما از سایت Obout گرفتیم. Easy menu ساخت این سایت هست که بسیار هم کاربردی است. ضمنا رایگان هم هست و نیازی به کرک ندارد.
برای دانلود اینجا را کلیک کنید.
نحوه اضافه کردن ابزار Easy Menu به ویژوال استودیو
پس از دانلود اگر بر روی فایل کلیک کنید پنجره زیر را مشاهده می کنید که به شما می گوید که باید فایل را از حالت فشرده خارج کنید. محل اکسترکت به صورت پیش فرض درایو C هست که شما می توانید آن را تغییر دهید.
پس از اینکه فایل از حالت فشرده خارج شد، پنجره زیر برای شما نمایش داده می شود که از شما می پرسد که آیا مایل هستید که Obout را به ویژوال استودیو اضافه کنم؟
که شما باید همانطور که در تصویر مشخص شده است گزینه Install Controls into Visual Studio toolbox را انتخاب کنید.
دقت کنید برنامه ویژوال استودیو و پنجره های دیگر را ببندید.
در انتها به شما پیغام می دهد که با موفقیت نصب شد.
حال اگر ویژوال استودیو را باز کنید مطابق تصویر زیر می بینید که ابزار Obout به ویژوال استودیو اضافه شده است.
در جلسات بعد نحوه استفاده از این ابزار را به تفصیل توضیح خواهم داد. موفق باشید. با احترام علیرضا مهجور