پروژه مستندات سایت خدمات دانشجویی

فایل word پروژه مستندات سایت خدمات دانشجویی

پروژه سایت خدمات دانشجویی به زبان php برای درس طراحی صفحات وب و درس بانک اطلاعاتی

امکانات سایت:

مدیر سایت: پنل کاربری، عمل ثبت پروژه، ویرایش پروژه، تایید و حذف پروژه خود وکاربران عضو، ارسال پیام به کاربر عضو، دریافت پیام از کاربر عضو و...

کاربر عضو: پنل کاربری، عمل ثبت پروژه، ویرایش پروژه، ارسال پیام به مدیر سایت، دریافت پیام از مدیر سایت و...

کاربر مهمان: مشاهده پروژه ثبت شده کاربران و اخبار و گالری سایت و.....

به همراه یک فایل word برای مستندات سایت

برای دانلود بر روی تصویر زیر کلیک کنید.

صفت Border در زبان CSS این امکان را را برای ما فراهم می کند که خطوط حاشیه ای را برای عناصر HTML ایجاد کنیم. نه تنها می توان این خطوط را ایجاد کرد بلکه حتی نوع استایل، پهنا و رنگ خطوط را نیز می توان تعیین کرد. در این فصل با نحوه ی به کارگیری صفت Border آشنا می شویم.

صفات Border در CSS

صفات border در زبان CSS به شما اجازه خواهند داد که استایل، پهنا و رنگ یک border از یک عنصر را تعیین کنید.

در عناصر مشخص شده در پایین، هرکدام از عناصر به روشی متفاوت از صفت border استفاده کرده اند:

عنصری که هر چهار طرف آن دارای border است.

عنصری که دارای یک border پایین به رنگ قرمز است.

عنصری که دارای border دایره ای (گرد) در اطراف خود است.

صفت border-style

صفت border-style نوع border را برای نمایش مشخص می کند. مقادیر زیر برای این صفت استفاده می شود:

dotted - یک border با استایل نقطه ای

dashed - یک border با استایل خطوط فاصله

solid - یک border با استایل خط مستقیم

double - یک border با استایل دو خط مستقیم

groove - یک border سه بعدی با استایل grooved. نوع اثر آن بستگی به مقدار صفت border-color دارد.

ridge - یک border سه بعدی با استایل ridge. نوع اثر آن بستگی به مقدار صفت border-color دارد.

inset - یک border سه بعدی با استایل inset. نوع اثر آن بستگی به مقدار صفت border-color دارد.

outset - یک border سه بعدی با استایل outset. نوع اثر آن بستگی به مقدار صفت border-color دارد.

none - بدون border

hidden - یک border پنهان

از صفات background در زبان CSS برای تعریف افکت های پشت زمینه عناصر HTML استفاده می شود. در این فصل به انواع background ها در CSS خواهیم پرداخت.

انواع background در CSS عبارت اند از:

background-color

background-image

background-repeat

background-attachment

background-position

صفت background-color

صفت background-color رنگ پشت زمینه ی یک عنصر را مشخص می کند. رنگ background یک عنصر به صورت زیر تنظیم می شود:

در CSS، یک رنگ اغلب به شکل های زیر مشخص می شود:

یک نام معتبر برای یک رنگ - مانند "red"

یک مقدار هگزادسیمال - مانند "ff0000#"

یک مقدار RGB - مانند "(rgb(255,0,0"

صفت background-image

صفت background-image یک تصویر را به عنوان تصویر پشت زمینه ی یک عنصر مشخص می کند. به صورت پیشفرض، تصویر آنقدر تکرار خواهد شد تا فضای کل عنصر را پوشش دهد.

نکته: در تابع ()url آدرس اینترنتی تصویر قرار می گیرد. در مثال بالا فقط از نام تصویر به عنوان پارامتر برای این تابع استفاده شده است که اشاره به نسبی بودن آدرس تصویر دارد.

Background Image - تکرار به صورت افقی و عمودی

به صورت پیشفرض صفت background-image یک تصویر را هم به صورت افقی و هم به صورت عمودی تکرار می کند. بعضی از تصاویر نیاز است تنها به صورت افقی و یا به صورت عمودی تکرار شوند.

از صفات Margin برای ایجاد فضای خالی اطراف عناصر HTML استفاده می شود.

از صفات Padding برای ایجاد فضای خالی اطراف محتوای یک عنصر استفاده می شود. در این فصل با انواع صفات padding، نحوه ی مقدار دهی آنها، و انواع مقادیر برای آنها آشنا خواهیم شد.

صفت padding در CSS

صفت padding در CSS برای ایجاد فضا اطراف محتوای یک عنصر استفاده می شود.

فضایی که توسط صفت padding ایجاد می شود بین محتوای یک عنصر و خط دور(border) آن عنصر قرار دارد.

با استفاده از CSS شما کنترل کاملی نسبت به صفت padding در عناصر مختلف خواهید داشت. صفات مختلفی در CSS وجود دارد که با استفاده از آنها می توان مقدار صفت padding را برای هر سمت از یک عنصر تعیین کرد(بالا، راست، پایین و چپ).

Padding - تنظیم مقدار صفت padding برای هر سمت به طور جداگانه

زبان CSS دارای صفاتی است که می توان مقدار padding را برای هر سمت از یک عنصر HTML تنظیم کرد. این صفات عبارت اند از:

padding-top

padding-right

padding-bottom

padding-left

همه ی صفات padding می توانند دارای مقادیر زیر باشند:

اندازه - در این حالت مقدار صفات padding توسط اندازه هایی در واحد های پیکسل، سانتیمتر و. مشخص می شود.

% - در این حالت مقدار padding با استفاده از درصدی از پهنای عنصر مورد نظر مشخص می شود.

inherit - مقداردهی صفات padding با مقدار inherit به معنای این است که مقدار padding از عنصر پدرش به ارث برده می شود.

انعطاف بالایی دارد و کارهایی که ما بخواهیم با استایل صفحات انجام دهیم را با روش‌های مختلف و سلکتورهای متعدد می‌توان انجام داد.

انتخاب موثر در سلکتورهای CSS

با همه کدهای زیر می‌توان color یک li خاص که دارای id برابر با xyz است را عوض کرد:

* {color:blue;}li{color:green;}li:first-line {color:yellow;}ul li {color:aqua;}ul ol+li{color:pink;}h1 + *[rel=up]{color:navy;}ul ol li.red{color:red;}li.red.level{color:orange;}#xyz {color:silver;}style="color:gray;"

اما هم بحث کارآیی مهم است (که در ادامه خواهیم گفت) و هم بحث تقدم
کدام‌یک از انتخابگرهای فوق موثر واقع خواهد شد؟
پاسخ: به ترتیب از پایین به بالا. توضیحبیشتر در W3
برای محاسبه تقدم و موثر بودن یک انتخاب‌گر، می‌توانید از این محاسبه‌گر آنلاین تقدم css طبق لینکبالا استفاده کنید.

کارایی (Performance) در CSS

با بزرگ شدن یک سایت و افزایش حجم css آن، بحث performance اهمیت می‌یابد چرا که:

• برخی کدهای css (مانند visibility:hidden) موجب تغییر در DOM می‌شود و مرورگر مجبور است موقعیت عناصر را کلا دوباره محاسبه کند
• برخی کدهای css (در نسخه 3 به بعد) حاوی انیمیشن یک المان است
• برخی کدهای css نسبت به حرکات کاربر قرار است واکنش نشان دهد (مثل hover)
• و.

و در یک css بزرگ (مثلا 200,000 خط کد css) خود css موجب کندی سایت می‌شود.
در این خصوص کتب متعددی نوشته شده (مثل کتاب Developing Large Web Applications و.)
در ادامه چند نمونه از نکاتی که (هرچند موجب کاهش خوانایی کد css می‌شود) اما باعث افزایش پرفرمنس و سرعت css می‌شود، ذکر می‌شود:

• حذف نام تگ در مورد غیر ضروری
  مثلا بجای ul#myID بهتر است از #myID استفاده شود.
• حذف والدهای غیرضروری
  مثلا بجای html div table tr td بهتر است از td استفاده شود.
• اجتناب از بکار بردن انتخابگر همه (ستاره)
  مثلا استفاده از * یا .myClass * به هیچ‌وجه توصیه نمی‌شود.
• از chain کردن اجتناب کنید
  مثلا بجای .icon.small بهتر است یکی از کلاس‌ها را بکار ببرید یا اینکه از یک انتخابگر مجزا استفاده کنید مثل .icon-small
  خاطرنشان می‌شود که chain کردن علاوه بر پرفرمنس، اشکالات متعدد دیگری هم دارد. مثلا در برخی براوزرهای قدیمی (IE) کار نمی‌کند و همچنین در برخی براوزرهای مدرن نیز به صورت ناقص کار می‌کند.

در خصوص پرفرمنس مطلب زیاد است و این مطلب در آینده تکمیل خواهد شد.

طراحی و در حقیقت «توسعه سطح کاربر» برای وب‌سایتی که قرار است محتوایش را کاربران غیرحرفه‌ای ویرایش کنند، مشکلاتی سوای مشکلات معمول توسعه یک وب‌سایت عادی دارد. این روزها بیشتر مشتریان می‌خواهند توانایی مدیریت محتوای خودشان را داشته باشند. بنابراین بیشتر طراحان متوجه خواهند شد که بیشتر طراحی‌هایشان، اگر نگوییم همه‌شان، در حد قالب‌هایی مثل CMS خواهند ماند.

دشمن‌تان را بشناسید

این که سیستم‌های مدیریت محتوا چقدر در ویرایش محتوا به کاربر آزادی بدهند، قانون ثابتی ندارد. به‌عنوان یک طراح ابتدا باید بفهمید در مقابل سیستم قالب‌گذاری CMS انتخابی‌تان چقدر کنترل دارید. این کنترل ممکن است در حد توانایی ویرایش قالب‌های موجود یا به پیچیدگی تغییر کلی CMS برای طراحی‌تان باشد. در برخی محصولات قدیمی‌تر CMS ممکن است ببینید کنترل کمی روی نشانه‌گذاری‌هایی که در صفحه وارد شده‌اند دارید. اگر کاربران CMS قادر باشند HTML خودشان را وارد کنند، می‌توانید بفهمید طراحی‌تان چقدر در مقابل این اتفاقات مقاوم است. شرایط ایده‌آل برای یک طراح زمانی است که کاربر، قابلیت محدودی برای وارد کردن نشانه‌گذاری‌هایش داشته باشد و CMS از بلاک‌های محتوای ساخت‌یافته برای هدایت آنها با افزودن محتوا در شیوه صحیح استفاده کند و سپس بدرستی توسط قالب‌ها نشانه‌گذاری شوند.

سازگار نگه دارید

هر چقدر سیستم مدیریت محتوای منعطف‌تری داشته باشید، باید سازگاری قالب‌های خود را بیشتر در نظر بگیرید. این‌که چند ویرایشگر محتوا تربیت کنید، بسیار ساده‌تر از این است که بخواهید سیستم سازگاری داشته باشید.

اگر با هر نوعی از محتوای ساخت‌یافته در طراحی‌تان کار می‌کنید، هر بخش را به‌عنوان یک بلاک تکرارشونده قلمداد کنید. توسط CSS3 براحتی می‌توانیم هر آیتمی یا حتی آیتم آخر را هدف بگیریم. البته این قابلیت برای مرورگرهای قدیمی دردسترس نیست و ممکن است ویرایش کد پشتیبان CMS برای افزودن یک کلاس برای هر آیتم دیگر یا آخرین آیتم امکان‌پذیر نباشد.

زمانی که با نواحی‌ای سر و کار دارید که الزاما بلوک‌های بزرگ محتوایی هستند و کاربر روی نشانه‌گذاری آنها کنترل کامل دارد، اصلا فرض نکنید که کاربر خودش تشخیص می‌دهد که باید کلاس‌های CSS را اضافه کند تا جلوه‌هایی که شما برای این سیستم در نظر گرفته‌اید را پیاده کند.

اجتناب از به‌کارگیری عکس به‌جای متن

ممکن است تصاویر را با کمک PHP و دیگر زبان‌ها در سمت سرور ایجاد کرد، اما سیستم مدیریت محتوای شما نمی‌تواند این قابلیت را به‌عنوان مساله‌ای استاندارد ارائه کند، چون همواره باید فکر فونت‌های غیراستانداردی که در طراحی‌تان قرار می‌گیرد نیز باشید.

همین شرایط با استفاده از فونت‌ها ساده‌تر است و سرویس‌های زیادی همین الان هستند که می‌توانید از هر فونتی که تمایل دارید در وب‌سایت خود استفاده کنید و نیازی هم نباشد که روی کامپیوتر کاربر نصب شده‌ باشند.

در نظر گرفتن سیستم مدیریت محتوا هنگام ایجاد منو

به ‌هر حال هر سیستم مدیریت محتوایی روی یک مساله تمرکز دارد و باعث می‌شود بیشتر بازدیدهای سایت را به آن بخش هدایت کند. از این‌رو بهتر است با توسعه‌ دهندگان CMS صحبت کرد و متوجه شد که این سیستم تا چه حد کنترل لازم را به‌کاربر می‌دهد.

با اطلاعات واقعی آزمایش کنید

زمانی‌که طراحی در HTML و CSS توسعه پیدا کرد، فرضیات‌ خود را از نظر رفتاری که طراحی در برابر محتوا نشان می‌دهد، بیازمایید. اگر این کار پیش از این که قالب‌ها در CMS گنجانده شوند، انجام شود، بهتر خواهد بود.

به ویراستاران محتوا در نگهداری طراحی کمک کنید.

اگر CMS را با دستورالعمل‌های کوچک به کاربر تحویل دهید، نمی‌توانید از آنها انتظار داشته باشید ذهن‌تان را بخوانند و از طراحی آن‌گونه که دوست دارید نگهداری کنند. حتی اگر ویراستار محتوای پایه‌ای، کاملا برای ویرایش سایت تعلیم دیده باشد، ممکن است بر اثر گذشت زمان فراموش کند یا تصمیم بگیرد کمی خلاقیت به‌خرج دهد یا ممکن است ویراستار اصلی برود و شخص دیگری با آموزش کمتر جای آن را بگیرد.

حذف عملکردهای اضافی از واژه‌پرداز

واژه‌پرداز WYSIWYG در CMS شما به‌طور پیش‌فرض قابلیت اضافه کردن هر نوع شکل و ظاهری را به متن می‌دهد. با این حال در بسیاری از همین واژه‌پردازها می‌توان نوار ابزار را محدود کرده و تنها به دکمه‌ها و استایل‌هایی که می‌خواهید کاربر به آن دسترسی داشته باشد، اجازه دیده شدن بدهید.