آموزش: نکات ساده و بسیار مهم برای درک عمیق

[alirezagoodarzi]

تیکه B از قسمت چهارم

3-طراحی ظاهر سایت[size=6pt](ادامه)[/size]

لیست مشخصات یا Style Sheet .
قالب شما یک ستایل شیت نیز دارد که فونتها ، رنگها ، قابها و ...عناصر صفحه را کنترل میکند.در این جا توضیحاتی در مورد نامگذاری قراردادی متغیرهای این فایل که به نام style.css در شاخه قالب دیده میشود آورده شده است:

مترجم: سری به قسمت قالبهای سایت خودتان بزنید و option bottun کنار آنرا کلیک کنید و سپس از toolbar انتخاب Edit کلیک کنید . خیلی از این تگها که در زیر دیده شده خواهید دید.میتوانید آنها را تغییر دهید ولی قبل از تسلط کامل خیلی مراقب باشید یک تغییر اضافه کل ظاهر سایت را بهم میزند.

تنظیمات سراسری و فراگیر

body – تگی که مشخصات ظاهری قسمت مطالب (صورتی وسط در نمودار بالا) را کنترل میکند مثل رنگ پس زمینه نام و اندازه و کلفتی فونت و ...
div –فورمت پیش فرض برای همه مزربندیهای قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
hr – فرمت پیشفرض برای همه خطوط افقی در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
p –فرمت پیشفرض برای تمام پاراگرافها در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
td – فرمت پیشفرض برای تمام جداول اطلاعاتی در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد..
tr – فرمت پیشفرض برای تمام رکوردهای جداول در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
ul – فرمت پیشفرض برای تمام لیستهای نامنظم قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
a:link –فرمت پیشفرض ظاهر لینکها .زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.
a:visited – فرمت پیشفرض برای لینکهای دیده شده. زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.
a:hover – فرمت پیشفرض برای وقتی که موس روی لینک حرکت میکند. زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.

توجه: این کل تگهای ممکن نیست و تگهای دیگری هم ممکن است در این لیست گنجانده شوند.

تنظیمات فرم ها

inputbox – برای تمام باکس های ورود اطلاعات بکار میرود مثل : Search و Login
.button – برای تمام کلیدهایی که در سایت دیده میشود بکار میرود

کنترل صفحات (منوها و ...)

a.mainlevel:link – فرمت سطح اول تمام منوها را کنترل میکند
a.mainlevel:visited – فرمت منوهای دیده شده در سطح اول را کنترل میکند.
a.mainlevel:hover – فرمت منوهای سطح اول در هنگام حرکت موس روی آنها را کنترل میکند.
a.sublevel:link - فرمت تمام منوهای سطوح زیرسطح اول را کنترل میکند
a.sublevel:visited - فرمت منوهای دیده شده در سطح دوم به بعد را کنترل میکند.
a.sublevel:hover - فرمت منوهای سطح دوم به بعد در هنگام حرکت موس روی آنها را کنترل میکند.

pagenav - Sets the style for the footer navigation"<< Start < Prev Next > End >>&quot when they do not appear as hyperlinks (when only a few articles exist.
a.pagenav:link - Style for the footer navigation links ("<< Start < Prev Next > End >>&quot.
a.pagenav:visited -Style for visited footer navigation links ("<< Start < Prev Next > End >>&quot.
a.pagenav:hover - Mouseover effect for the footer navigation links ("<< Start < Prev Next > End >>&quot.
a.readon:link - Style for the "Read More" link that is displayed for large contemt items.
a.readon:visited - Style for visited "Read More" hyperlinks that are displayed for large content items.
a.readon:hover - Mouseover effect for the "Read More" link that is displayed for large contect items.

تنظیمات ماژول ها

table.moduletable – استایل عمومی برای همه ماژولها
table.moduletable th - استایل عمومی برای سرصفحه همه ماژولها
table.moduletable td - استایل عمومی برای قسمتهای درج اطلاعات همه ماژول
.poll -

تنظیمات صفحه مطالب

a.category:link -
a.category:hover -
a.category:visited -
.componentheading - Title of the component being used to display the content.
.contentheading - Title of the content, article, etc. being displayed.
.contentpane - Table that holds all non-article information (components, category lists, contact forms, etc).
.contentpaneopen - Table that holds the actual text for an article.
a.contentpagetitle:hover -
a.contentpagetitle:link -
a.contentpagetitle:visited -

استیل لیست بخشها:

.sectiontableheader
.sectiontableentry1
.sectiontableentry2

استایل اطلاعات دیگر مثل عنوان سایت ، تاریخ ایجاد و غیره

.title - Style for the site title.
.pathway - Default styling for the pathway (or breadcrumbs) displayed by the mosPathWay() function.
a.pathway:link - Style for hyperlinks in the pathway (or breadcrumbs) displayed by the mosPathWay() function.
a.pathway:visited - Style for hyperlinks that you have visited in the pathway (or breadcrumbs) displayed by the mosPathWay() function.
a.pathway:hover - Style for the mouseover effect for hyperlinks that are displayed as part of the pathway (or breadcrumbs) displayed by the mosPathWay() function.
.createdate - Format of the "create date" displayed for various content items
.modifydate - Format for the "last updated" date displayed at the bottom of various content items.

متفرقه

.ontab -
.offtab -
.tabpadding -
.tabheading -
.pagetext -
.moscode - For modifying {moscode} output.
.message - Text passed with mosmsg url parameter.
.small -
.smalldark -

توضیحات بیشتر وسه نمونه از فایلهای مربوط به استایل را میتوانید از آدرس زیر دانلود کنید و مفصل روی آن کار کنید:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید].

پایان تیکه B از قسمت چهارم

مترجم: علیرضا گودرزی